.example-appearance{--example-toolbar-height:52px;--example-header-height:64px}.example-appearance .demo-toolbar{min-height:var(--example-toolbar-height);box-sizing:border-box}.example-appearance .showcase-shell .af-shell-topbar{top:var(--example-toolbar-height)}.example-appearance .showcase-shell .af-shell-sidebar{top:calc(var(--example-toolbar-height) + var(--example-header-height));max-height:calc(100dvh - var(--example-toolbar-height) - var(--example-header-height))}.example-appearance:not([data-example-brand=neutral]){--af-semantic-action:var(--example-light-action);--af-semantic-action-hover:var(--example-light-action-hover);--af-semantic-action-foreground:var(--example-light-action-foreground);--af-semantic-accent:var(--example-light-accent);--af-semantic-accent-hover:var(--example-light-accent-hover);--af-semantic-accent-soft:var(--example-light-accent-soft);--af-semantic-accent-foreground:var(--example-light-accent-foreground);--af-semantic-focus:var(--example-light-focus);--af-semantic-brand:var(--example-light-brand);--af-semantic-brand-foreground:var(--example-light-brand-foreground)}[data-theme=dark] .example-appearance:not([data-example-brand=neutral]){--af-semantic-action:var(--example-dark-action);--af-semantic-action-hover:var(--example-dark-action-hover);--af-semantic-action-foreground:var(--example-dark-action-foreground);--af-semantic-accent:var(--example-dark-accent);--af-semantic-accent-hover:var(--example-dark-accent-hover);--af-semantic-accent-soft:var(--example-dark-accent-soft);--af-semantic-accent-foreground:var(--example-dark-accent-foreground);--af-semantic-focus:var(--example-dark-focus);--af-semantic-brand:var(--example-dark-brand);--af-semantic-brand-foreground:var(--example-dark-brand-foreground)}.example-appearance:not([data-example-brand=neutral]){--af-component-button-bg:var(--af-semantic-action);--af-component-button-fg:var(--af-semantic-action-foreground);--af-component-button-bg-hover:var(--af-semantic-action-hover);--af-component-choice-checked-bg:var(--af-semantic-action);--af-component-choice-checked-fg:var(--af-semantic-action-foreground);--af-component-selection-bg:var(--af-semantic-accent-soft);--af-component-selection-fg:var(--af-semantic-accent);--af-component-menu-active-bg:var(--af-semantic-accent-soft);--af-component-menu-active-fg:var(--af-semantic-accent)}.example-brand-trigger{gap:8px}.example-brand-chip{border:1px solid var(--af-semantic-control-border);flex:none;width:14px;height:14px;display:inline-block}.example-brand-panel{--af-floating-max-width:360px;gap:16px;width:min(360px,100vw - 16px);padding:20px}.example-brand-panel .af-popover__description{font-size:13px}.example-brand-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.example-brand-presets .af-button{border-color:var(--af-semantic-border);justify-content:start;gap:6px;padding:0 6px;font-size:12px}.example-brand-presets .af-button[aria-pressed=true]{background:var(--af-semantic-accent-soft);border-color:var(--af-semantic-accent);color:var(--af-semantic-accent)}.example-brand-presets .af-button>svg{width:12px;margin-inline-start:auto}.example-brand-custom{gap:10px;display:grid}.example-brand-custom>.af-button{justify-self:end}.example-brand-custom-row{grid-template-columns:44px minmax(0,1fr);align-items:start;gap:12px;display:grid}.example-brand-color-input{margin-top:29px;display:block}.example-brand-color-input input{border:1px solid var(--af-semantic-control-border);background:var(--af-semantic-surface);cursor:pointer;width:44px;height:36px;padding:3px;display:block}.example-brand-color-input input:focus-visible{outline:2px solid var(--af-semantic-focus);outline-offset:3px}.example-brand-color-input input::-webkit-color-swatch-wrapper{padding:0}.example-brand-color-input input::-webkit-color-swatch{border:0;border-radius:0}.example-brand-color-input input::-moz-color-swatch{border:0;border-radius:0}.example-brand-mode{justify-content:space-between;align-items:center;gap:12px;font-size:12px;display:flex}.example-brand-mode .af-button[aria-pressed=true]{background:var(--af-semantic-accent-soft);color:var(--af-semantic-accent)}.example-brand-feedback{min-height:32px;color:var(--af-semantic-muted);margin:0;font-size:12px;line-height:1.6}.example-brand-footer{border-top:1px solid var(--af-semantic-border);justify-content:space-between;gap:12px;padding-top:12px;display:flex}.example-brand-specimen{border-bottom:1px solid var(--af-semantic-border);grid-template-columns:1fr 1fr;align-items:center;gap:64px;padding-block:40px;display:grid}.example-brand-intro h2{font:500 26px/1.3 var(--af-font-sans), sans-serif;letter-spacing:-.025em;margin:0 0 12px}.example-brand-intro>p{color:var(--af-semantic-muted);max-width:48ch;margin-bottom:20px;font-size:14px;line-height:1.7}.example-brand-intro .example-brand-thumbnails-note{margin:14px 0 0;font-size:12px}.example-brand-live{border:1px solid var(--af-semantic-border);background:var(--af-semantic-surface);gap:20px;min-width:0;padding:24px;display:grid}.example-brand-live-heading{justify-content:space-between;align-items:center;gap:12px;font-size:15px;display:flex}.example-brand-live-actions{flex-wrap:wrap;gap:8px;display:flex}.example-brand-live>[role=status]{color:var(--af-semantic-muted);font-size:12px}.example-foundation-brand{border-bottom:1px solid var(--af-semantic-border);justify-content:flex-end;align-items:center;gap:16px;padding:12px 32px;font-size:12px;display:flex}.example-appearance:not([data-example-brand=neutral]) .showcase-shell[data-navigation-layout=top] .demo-nav a[aria-current]{color:var(--af-semantic-accent);border-bottom-color:var(--af-semantic-accent)}@media (max-width:1100px){.example-appearance .demo-toolbar-title{display:none}}@media (max-width:767px){.example-appearance{--example-toolbar-height:48px;--example-header-height:56px}.example-brand-specimen{grid-template-columns:1fr;gap:24px;padding-block:32px}.example-brand-live{padding:20px}.example-appearance .demo-back>span{display:none}.example-appearance .demo-toolbar-controls .example-brand-trigger{padding-inline:8px}.demo-toolbar .example-brand-trigger-label{display:none}.example-appearance .demo-toolbar-controls .af-native-select{width:138px}}@media (pointer:coarse){.example-appearance{--example-toolbar-height:64px}}@media (pointer:coarse) and (max-width:767px){.example-appearance{--example-toolbar-height:60px}}@media (max-width:360px){.example-brand-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.example-appearance .demo-toolbar-controls .af-native-select{width:122px}}@media (forced-colors:active){.example-brand-chip{forced-color-adjust:none;border-color:canvastext}}