.button-visual-reference{display:grid;gap:1rem;min-width:0}.visual-reference__toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}.visual-reference__cards{display:grid;gap:1rem;min-width:0}.button-visual-reference .section-heading{display:grid;gap:.35rem}.button-visual-reference .section-heading>*{margin:0}.button-visual-reference .section-heading>p:last-child,.button-visual-reference .theme-card__header>p{color:var(--lb-color-text-muted);line-height:1.55}.button-visual-reference .eyebrow,.theme-card__kicker{color:var(--lb-color-accent);font-size:.75rem;font-weight:var(--lb-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase}.button-visual-reference .mode-controls{display:flex;flex:none;gap:.75rem}.button-visual-reference .mode-controls label{display:grid;gap:.35rem;color:var(--lb-color-text-subtle);font-size:.75rem;font-weight:var(--lb-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.button-visual-reference .mode-controls select{min-width:7.5rem;height:2.25rem;padding-inline:.7rem 2rem;border:1px solid var(--lb-color-border-strong);border-radius:var(--lb-radius-md);background:var(--lb-color-surface);color:var(--lb-color-text);font:inherit}.theme-card{min-width:0;overflow:hidden;border:1px solid var(--lb-color-border);border-radius:var(--lb-radius-lg);background:var(--lb-color-surface);box-shadow:0 16px 44px #0003}.theme-card__header{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem 1.25rem;border-block-end:1px solid var(--lb-color-border);background:var(--lb-color-surface-raised)}.theme-card__header>div{display:grid;gap:.15rem}.theme-card__header h3,.theme-card__header p{margin:0}.theme-card__header h3{font-size:1.125rem;text-transform:capitalize}.theme-card__kicker{color:var(--lb-color-text-subtle)}.matrix-scroll{overflow-x:auto}.matrix{display:grid;grid-template-columns:9rem repeat(5,minmax(11rem,1fr));min-width:64rem;background:var(--lb-color-surface)}.matrix>*{min-height:4.5rem;border-inline-end:1px solid var(--lb-color-border);border-block-end:1px solid var(--lb-color-border)}.matrix>:nth-child(6n){border-inline-end:0}.matrix__corner,.matrix__state,.matrix__row-label{display:flex;align-items:center;padding:.75rem 1rem}.matrix__corner,.matrix__state{min-height:2.75rem;background:#ffffff05;color:var(--lb-color-text-subtle);font-size:.75rem;font-weight:var(--lb-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.matrix__state{justify-content:center}.matrix__row-label{flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;text-transform:capitalize}.matrix__row-label span{color:var(--lb-color-text-subtle);font-size:.75rem}.matrix__cell{display:flex;align-items:center;justify-content:center;padding:.75rem}.button-visual-reference .lb-button[data-specimen-state=hover][data-variant=primary]{--_lb-button-background: var(--_lb-button-tone-hover)}.button-visual-reference .lb-button[data-specimen-state=hover][data-variant=secondary]{--_lb-button-border: var(--_lb-button-tone-border-hover)}.button-visual-reference .lb-button[data-specimen-state=hover][data-variant=tertiary]{--_lb-button-background: var(--lb-button-neutral-hover)}.button-visual-reference .lb-button[data-specimen-state=pressed][data-variant=primary]{--_lb-button-background: var(--_lb-button-tone-active)}.button-visual-reference .lb-button[data-specimen-state=pressed][data-variant=secondary]{--_lb-button-border: var(--_lb-button-tone-border-active)}.button-visual-reference .lb-button[data-specimen-state=pressed][data-variant=tertiary]{--_lb-button-background: var(--lb-button-neutral-active)}.button-visual-reference .lb-button[data-specimen-state=focus][data-variant=primary]{--_lb-button-focus-shadow: 0 0 0 2px var(--_lb-button-tone-focus)}.button-visual-reference .lb-button[data-specimen-state=focus]:where([data-variant=secondary],[data-variant=tertiary]){--_lb-button-focus-shadow: 0 0 0 1px var(--lb-color-surface), 0 0 0 3px var(--lb-button-neutral-focus)}.button-visual-reference .lb-button[data-specimen-state=focus][data-variant=primary]:not(:disabled)>.lb-button__focus-segment{opacity:1}@media(max-width:58rem){.visual-reference__toolbar{align-items:stretch;flex-direction:column}.button-visual-reference .mode-controls{overflow-x:auto}}