@layer layout-primitives{:where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile)>:where(*){min-width:0}.od-stack{gap:var(--od-gap,8px);flex-direction:column;display:flex}.od-row{align-items:center;gap:var(--od-gap,8px);display:flex}.od-row-top{align-items:flex-start;gap:var(--od-gap,8px);display:flex}.od-cluster{align-items:center;gap:var(--od-gap,8px);flex-wrap:wrap;display:flex}.od-fill{flex:1 1 0;min-width:0}.od-fixed{flex:none}.od-grid{gap:var(--od-gap,12px);grid-template-columns:repeat(var(--od-cols,3),minmax(0,1fr));display:grid}.od-stat,.od-field,.od-cell{gap:var(--od-gap,2px);display:grid}:where(.od-stat,.od-field,.od-cell)>:where(*){display:block}.od-tile{grid-template-rows:auto 1fr;display:grid}:where(.od-tile)>:where(*){display:block}.od-media{width:100%;height:auto;aspect-ratio:var(--od-ratio,auto);display:block}.od-media-cover{object-fit:cover}.od-truncate{white-space:nowrap;text-overflow:ellipsis;max-width:100%;display:block;overflow:hidden}.od-clamp-2,.od-clamp-3{overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.od-clamp-2{-webkit-line-clamp:2}.od-clamp-3{-webkit-line-clamp:3}.od-lines-2{min-height:2.8em}.od-nowrap{white-space:nowrap}.od-keep{word-break:keep-all;overflow-wrap:anywhere}.od-screen{grid-template-rows:auto minmax(0,1fr) auto;height:100%;display:grid}.od-scroll{overscroll-behavior:contain;min-height:0;overflow-y:auto}.od-rail{gap:var(--od-gap,8px);scroll-snap-type:x proximity;scrollbar-width:none;padding-inline:var(--od-rail-pad,16px);scroll-padding-inline:var(--od-rail-pad,16px);display:flex;overflow-x:auto}.od-rail::-webkit-scrollbar{display:none}:where(.od-rail)>:where(*){scroll-snap-align:start;flex:none}:where(.od-rail)>:where(:last-child){margin-inline-end:var(--od-rail-pad,16px)}.od-spacer{visibility:hidden;pointer-events:none;flex:none}.od-touch{min-width:44px;min-height:44px}}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:#101214;--surface:#191d21;--raised:#242a30;--code:#10272d;--ink:#f2f5f7;--muted:#adb7c2;--accent:#75dccb;--on-accent:#10201d;--line:#46515d;--quiet-line:#2a3036;--focus:#a5c9ff;--error:#ffb4ab;--selection:#203c38;--glass:#101214e0;--scrim:#000000b8;--amber:#e3ca90;--blue:#a5c9ff;--shadow:0 16px 48px #0008;--font:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:2rem;--text-display:3rem;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--radius:0;--hit:44px;--gutter:16px;--header:64px;--side:224px;--rail:200px;--fast:.16s;--enter:.2s;--exit:.12s;--focus-ring:2px solid var(--focus);--preview-height:568px;--preview-width:320px;--preview-window-height:560px;--mini-height:168px;--editor-height:320px}[data-appearance=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--canvas:#eef3f2;--surface:#fff;--raised:#dfe7e5;--code:#e0efeb;--ink:#14201e;--muted:#526460;--line:#71827e;--quiet-line:#ccd7d4;--accent:#006b5f;--on-accent:#fff;--focus:#174cb0;--selection:#c7e8e0}[data-appearance=accessibility]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:#000;--surface:#000;--raised:#161616;--code:#001c18;--ink:#fff;--muted:#fff;--line:#fff;--quiet-line:#777;--accent:#00ffcf;--on-accent:#000;--focus:#ff0;--selection:#003f35}*{box-sizing:border-box}html{scroll-padding-top:calc(var(--header) + var(--s6))}body{background:var(--canvas);color:var(--ink);font:var(--text-base)/1.6 var(--font);margin:0}button,input,textarea{font:inherit;color:inherit;border-radius:var(--radius)}button,a,summary{touch-action:manipulation}button,summary{cursor:pointer}button{justify-content:center;align-items:center;gap:var(--s2);min-height:var(--hit);padding:var(--s2) var(--s4);font-size:var(--text-sm);background:0 0;border:0;font-weight:500;display:inline-flex}a{color:inherit;text-decoration:none}button:disabled{cursor:not-allowed;color:var(--muted);background:var(--surface)}:focus-visible{outline:var(--focus-ring);outline-offset:var(--s1)}input,textarea{background:var(--surface);border:1px solid var(--line);padding:var(--s3);width:100%;min-width:0}input[type=checkbox],input[type=radio]{accent-color:var(--accent);flex:none;width:20px;height:20px}input[type=search]::-webkit-search-cancel-button{cursor:pointer}svg{stroke:currentColor;fill:none;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px;display:block}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:550;line-height:1.25}h1{font:500 clamp(2rem,4.4vw,var(--text-display))/1.16 var(--mono);letter-spacing:-.06em;overflow-wrap:break-word}h2{font-size:var(--text-xl);letter-spacing:-.035em}h3{font-size:var(--text-base)}p{max-width:68ch}small,.small{font-size:var(--text-sm)}code,kbd,.mono{font-family:var(--mono)}kbd{font-size:var(--text-xs);padding:0 var(--s1);border:1px solid var(--line);color:var(--muted);white-space:nowrap;display:inline-block}fieldset{border:0;min-width:0;margin:0;padding:0}legend{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--s2)}[hidden]{display:none!important}.muted{color:var(--muted)}.accent{color:var(--accent)}.eyebrow{font:var(--text-xs)/1.5 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.button{justify-content:center;align-items:center;gap:var(--s2);min-height:var(--hit);padding:var(--s2) var(--s4);font-size:var(--text-sm);background:var(--raised);font-weight:550;display:inline-flex}.primary{background:var(--accent);color:var(--on-accent)}.outline{border:1px solid var(--line)}.icon-button{width:var(--hit);padding:var(--s2);flex:none}.badge{align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);font:var(--text-xs)/1.3 var(--mono);background:var(--raised);white-space:nowrap;display:inline-flex}.badge.free{color:var(--accent);background:var(--selection)}.badge.pro{color:var(--amber)}.badge.experimental{color:var(--blue)}.skip{top:var(--s2);left:var(--s2);z-index:20;background:var(--accent);color:var(--on-accent);padding:var(--s3);position:fixed;transform:translateY(-160%)}.skip:focus{transform:translateY(0)}.topbar{z-index:5;align-items:center;gap:var(--s3);min-height:var(--header);padding:var(--s2) var(--gutter);background:var(--canvas);border-bottom:1px solid var(--quiet-line);display:flex;position:sticky;top:0}@supports ((-webkit-backdrop-filter:blur(16px)) or (backdrop-filter:blur(16px))){.topbar{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}.brand{align-items:center;gap:var(--s3);font:600 var(--text-lg)/1 var(--mono);letter-spacing:-.08em;white-space:nowrap;min-height:var(--hit);display:flex}.brandmark{grid-template-columns:repeat(2,8px);gap:3px;display:grid;transform:rotate(-8deg)}.brandmark i{background:var(--accent);width:8px;height:8px;display:block}.brandmark i:last-child{border:1px solid var(--accent);background:0 0}.top-spacer{flex:1}.topnav,.quicksearch{display:none}.topnav{align-items:center;gap:var(--s6);font-size:var(--text-sm)}.topnav a{min-height:var(--hit);border-bottom:2px solid #0000;align-items:center;display:flex}.topnav a.active{border-bottom-color:var(--accent);color:var(--accent)}.quicksearch{align-items:center;gap:var(--s8);color:var(--muted);background:var(--surface);border:1px solid var(--quiet-line)}.layout{min-height:calc(100vh - var(--header));grid-template-columns:minmax(0,1fr);display:grid}.sidebar,.rightbar{display:none}.nav-content{gap:var(--s1);flex-direction:column;display:flex}.nav-content a,.nav-content summary,.rail-link{align-items:center;gap:var(--s3);min-height:var(--hit);padding:var(--s2) var(--s3);font-size:var(--text-sm);color:var(--muted);display:flex}.nav-content a.current{background:var(--selection);color:var(--accent)}.nav-content .nav-caption{margin:var(--s8) var(--s3) var(--s2);font:var(--text-xs) var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}.nav-content summary{color:var(--ink);justify-content:space-between;list-style:none}summary::-webkit-details-marker{display:none}.nav-content details[open] summary .chevron{transform:rotate(90deg)}.nav-content details a{padding-left:var(--s8)}.nav-content .count{font:var(--text-xs) var(--mono);color:var(--muted);margin-left:auto}.nav-bottom{margin-top:var(--s12);padding:var(--s4) var(--s3);border-top:1px solid var(--quiet-line)}.nav-bottom p{font-size:var(--text-sm);margin:var(--s2) 0 var(--s3)}main{min-width:0;padding:var(--s6) var(--gutter) var(--s12)}.breadcrumb{align-items:center;gap:var(--s2);font:var(--text-xs) var(--mono);color:var(--muted);margin-bottom:var(--s8);flex-wrap:wrap;display:flex}.breadcrumb a{min-height:var(--hit);align-items:center;display:inline-flex}.hero{gap:var(--s8);padding:var(--s2) 0 var(--s12);align-items:center;display:grid}.hero-copy{gap:var(--s6);flex-direction:column;display:flex}.hero-copy .eyebrow{color:var(--accent)}.hero-copy h1 span{color:var(--muted);display:block}.hero-copy p{color:var(--muted);max-width:48ch}.search-label{font-size:var(--text-xs);font-family:var(--mono);color:var(--muted);margin-bottom:var(--s2);display:block}.hero-search{align-items:center;gap:var(--s3);padding:var(--s1) var(--s4);background:var(--surface);border:1px solid var(--line);display:flex}.hero-search input{padding:var(--s3) 0;min-height:var(--hit);background:0 0;border:0}.hero-search kbd{display:none}.hero-hints{align-items:center;gap:var(--s3);margin-top:var(--s2);font-size:var(--text-xs);color:var(--muted);flex-wrap:wrap;display:flex}.hero-hints a{min-height:var(--hit);text-underline-offset:var(--s1);align-items:center;text-decoration:underline;display:inline-flex}.workbench{background:var(--surface);border:1px solid var(--quiet-line);min-width:0}.bench-head{padding:var(--s3) var(--s4);font:var(--text-xs) var(--mono);color:var(--muted);border-bottom:1px solid var(--quiet-line);justify-content:space-between;align-items:center;display:flex}.bench-example{justify-content:center;align-items:center;gap:var(--s2);min-height:144px;padding:var(--s6);background-image:radial-gradient(var(--quiet-line) 1px,transparent 1px);background-size:16px 16px;display:flex}.bench-code{padding:var(--s4) var(--s6);background:var(--code);font:var(--text-xs)/1.9 var(--mono);overflow-wrap:anywhere}.syntax-key{color:var(--blue)}.syntax-string{color:var(--accent)}.bench-foot{justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);font:var(--text-xs) var(--mono);display:flex}.pulse-dot{background:var(--accent);width:6px;height:6px;margin-right:var(--s2);display:inline-block}.section-head{justify-content:space-between;align-items:end;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap;display:flex}.section-head p{margin-top:var(--s2);color:var(--muted)}.section-head .mono{font-size:var(--text-xs);color:var(--muted)}.filterbar{align-items:center;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap;display:flex}.device-filters,.style-filters{--od-gap:var(--s4);margin-block:var(--s6);min-width:0}.style-filters .segments{flex-wrap:wrap}.style-filters .segments button{white-space:nowrap}.style-filters legend{color:var(--ink);font-weight:600}.device-filters .segments{flex-wrap:wrap}.device-filters button{white-space:nowrap}.device-filters button .od-field{text-align:left}.device-filters button small{font-size:var(--text-xs);color:var(--muted);font-weight:400}.target-meta{font-size:var(--text-sm);overflow-wrap:anywhere}.target-summary{--od-gap:var(--s2);margin-block:var(--s4) var(--s6)}.segments{gap:var(--s2);display:flex}.segments button{background:var(--surface);min-width:var(--hit)}.segments button[aria-pressed=true]{background:var(--raised);color:var(--ink);box-shadow:inset 0 -2px var(--accent)}.segments button[aria-pressed=false]{color:var(--muted)}.toggle-label{align-items:center;gap:var(--s2);min-height:var(--hit);font-size:var(--text-sm);cursor:pointer;display:flex}.toggle-label input{appearance:none;background:var(--raised);border:1px solid var(--line);width:32px;height:20px;padding:2px;display:block}.toggle-label input:before{content:"";background:var(--muted);width:12px;height:14px;display:block}.toggle-label input:checked{background:var(--selection);border-color:var(--accent)}.toggle-label input:checked:before{background:var(--accent);transform:translate(12px)}.filter-end{gap:var(--s2);flex-wrap:wrap;margin-left:auto;display:flex}.filter-end button{border:1px solid var(--quiet-line)}.filter-end button.is-filtered{color:var(--accent);border-color:var(--accent)}.catalog-query{gap:var(--s2);margin:var(--s4) 0;align-items:center;display:flex}.catalog-query input{flex:1}.catalog{gap:var(--s6);grid-template-columns:minmax(0,1fr);display:grid}.component-card{min-width:0;color:var(--ink);grid-template-rows:auto 1fr;text-decoration:none;display:grid}.miniature{min-height:var(--mini-height);padding:var(--s6);background:var(--surface);transition:border-color var(--fast);pointer-events:none;border:1px solid #0000;justify-content:center;align-items:center;display:flex;position:relative}.miniature .mini-caption{top:var(--s3);left:var(--s3);color:var(--muted);font:var(--text-xs) var(--mono);position:absolute}.card-body{padding:var(--s4) 0 var(--s2);gap:var(--s2);display:grid}.card-title{justify-content:space-between;align-items:center;gap:var(--s2);display:flex}.card-title h3{letter-spacing:-.02em;font-weight:550}.card-body p{color:var(--muted);font-size:var(--text-sm);line-height:1.6}.card-meta{align-items:center;gap:var(--s2);font:var(--text-xs) var(--mono);color:var(--muted);margin-top:var(--s2);display:flex}.mini-button{justify-content:center;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);background:var(--accent);min-height:40px;color:var(--on-accent);font-size:var(--text-sm);font-weight:600;display:flex}.mini-button.secondary{background:var(--raised);color:var(--ink)}.mini-stack{gap:var(--s2);width:min(100%,216px);display:grid}.mini-label{font-size:var(--text-xs);color:var(--muted)}.mini-input{align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--line);font:var(--text-xs) var(--mono);color:var(--muted);display:flex}.mini-row{justify-content:space-between;align-items:center;gap:var(--s3);font-size:var(--text-xs);padding:var(--s2);background:var(--raised);display:flex}.mini-tabs{gap:var(--s3);border-bottom:1px solid var(--line);font-size:var(--text-xs);display:flex}.mini-tabs span{padding-bottom:var(--s2);display:block}.mini-tabs .active{border-bottom:2px solid var(--accent);color:var(--accent)}.mini-lines{gap:var(--s2);padding:var(--s2) 0;display:grid}.mini-lines i{background:var(--line);width:75%;height:4px;display:block}.mini-lines i:nth-child(2){width:55%}.mini-switch{background:var(--accent);justify-content:flex-end;align-items:center;width:32px;height:20px;padding:3px;display:flex}.mini-switch:after{content:"";background:var(--on-accent);width:12px;height:14px;display:block}.mini-dialog{background:var(--raised);padding:var(--s4);width:min(100%,216px);box-shadow:var(--shadow);gap:var(--s3);display:grid}.mini-table{gap:var(--s2);width:100%;display:grid}.mini-table .mini-row{border-bottom:1px solid var(--quiet-line);background:0 0;grid-template-columns:1fr auto;display:grid}.empty-state{justify-items:start;gap:var(--s4);padding:var(--s12) var(--s6);background:var(--surface);grid-column:1/-1;display:grid}.footer{justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid var(--quiet-line);font:var(--text-xs) var(--mono);color:var(--muted);flex-wrap:wrap;display:flex}.rightbar .eyebrow{margin-bottom:var(--s3)}.rail-link{min-height:36px;padding-left:0}.rail-note{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--quiet-line);font-size:var(--text-xs);color:var(--muted)}.rail-note h3{font-size:var(--text-sm);color:var(--ink);margin-bottom:var(--s2)}.rail-note code{color:var(--accent)}.detail-head{gap:var(--s4);margin-bottom:var(--s8);display:grid}.detail-head p{color:var(--muted)}.detail-meta{gap:var(--s2);flex-wrap:wrap;display:flex}.detail-section{margin-top:var(--s12);scroll-margin-top:calc(var(--header) + var(--s6))}.detail-section>h2{margin-bottom:var(--s4)}.example{border:1px solid var(--quiet-line);margin-top:var(--s6)}.example-top{justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--surface);font:var(--text-xs) var(--mono);display:flex}.preview-controls{align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--surface);border-top:1px solid var(--quiet-line);flex-wrap:wrap;display:flex}.preview-controls fieldset{gap:var(--s2);flex-wrap:wrap;flex:1;display:flex}.preview-controls legend{font:var(--text-xs) var(--mono)}.preview-option{align-items:center;gap:var(--s2);min-height:var(--hit);padding:var(--s2) var(--s3);background:var(--raised);cursor:pointer;font-size:var(--text-sm);display:flex}.preview-option:has(input:checked){background:var(--selection);color:var(--accent)}.preview-option .od-field{gap:var(--s1)}.preview-option small{font:var(--text-xs) var(--mono);color:var(--muted);white-space:nowrap}.preview-option input{margin:0}.preview-scroll{min-width:0;max-width:100%;max-height:var(--preview-window-height);overscroll-behavior:contain;background:var(--canvas);scrollbar-gutter:stable;display:block;overflow:auto}.example iframe{width:var(--preview-width);min-width:var(--preview-width);max-width:none;height:var(--preview-height);background:var(--surface);border:0;margin-inline:auto;display:block}.preview-caption{gap:var(--s2);padding:var(--s2) var(--s4);font:var(--text-xs)/1.6 var(--mono);color:var(--muted);background:var(--surface);flex-wrap:wrap;display:flex}.example-actions{gap:var(--s3);padding:var(--s3);border-top:1px solid var(--quiet-line);border-bottom:1px solid var(--quiet-line);background:var(--surface);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.example-actions .segments{gap:var(--s1)}.example-actions .segments button{padding:var(--s2);font-size:var(--text-xs)}.editor-top{gap:var(--s2);padding:var(--s2) var(--s4);background:var(--code);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.file-tabs{gap:var(--s2);display:flex}.file-tabs button{font:var(--text-xs) var(--mono);padding:var(--s2);color:var(--muted)}.file-tabs button[aria-pressed=true]{color:var(--accent);box-shadow:inset 0 -2px var(--accent)}.editor-label{font:var(--text-xs) var(--mono);color:var(--muted)}.editor{height:var(--editor-height);resize:vertical;background:var(--code);color:var(--accent);font:var(--text-sm)/1.8 var(--mono);padding:var(--s6);tab-size:2;white-space:pre;border:0;display:block;overflow:auto}.editor-footer{gap:var(--s3);background:var(--code);padding:var(--s3) var(--s4);border-top:1px solid var(--line);font:var(--text-xs) var(--mono);color:var(--muted);flex-wrap:wrap;justify-content:space-between;display:flex}.error-panel{padding:var(--s4);color:var(--error);background:var(--surface);overflow-wrap:anywhere}.locked{padding:var(--s8);justify-items:start;gap:var(--s4);background:var(--code);display:grid}.locked svg{color:var(--amber)}.api-list{gap:0;display:grid}.api-row{gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--quiet-line);grid-template-columns:minmax(0,1fr);display:grid}.api-row code{color:var(--accent);font-size:var(--text-sm);overflow-wrap:anywhere}.api-row p{color:var(--muted);font-size:var(--text-sm)}.compatibility{gap:var(--s6);grid-template-columns:minmax(0,1fr);display:grid}.compatibility h3{margin-bottom:var(--s3)}.compat-row{gap:var(--s2);padding:var(--s2) 0;font-size:var(--text-sm);flex-wrap:wrap;justify-content:space-between;display:flex}.compat-row .muted{font:var(--text-xs)/1.8 var(--mono)}.notice{font-size:var(--text-sm);color:var(--muted);margin-top:var(--s4);line-height:1.7}dialog{color:var(--ink);background:var(--surface);border:1px solid var(--line);width:calc(100% - var(--s8));max-width:600px;max-height:calc(100dvh - var(--s8));box-shadow:var(--shadow);padding:0;overflow:auto}dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-head{justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s4) var(--s6);border-bottom:1px solid var(--quiet-line);display:flex}.dialog-head h2{font:var(--text-lg) var(--mono)}.dialog-body{padding:var(--s6);gap:var(--s6);display:grid}.dialog-body p{color:var(--muted)}.dialog-body .option{align-items:center;gap:var(--s3);min-height:var(--hit);padding:var(--s2);cursor:pointer;display:flex}.dialog-body .option:has(input:checked){background:var(--selection)}.dialog-actions{justify-content:flex-end;gap:var(--s2);padding:var(--s4) var(--s6);border-top:1px solid var(--quiet-line);display:flex}.search-dialog input{font-size:var(--text-lg);background:0 0;border:0}.search-results{gap:var(--s1);margin-top:var(--s4);display:grid}.search-result{justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3);min-height:var(--hit);display:flex}.search-result .od-field{gap:var(--s1)}.search-result small{color:var(--muted)}.dialog-help{padding:var(--s3) var(--s6);font-size:var(--text-xs);color:var(--muted);border-top:1px solid var(--quiet-line)}.toast{bottom:max(var(--s6),env(safe-area-inset-bottom));right:var(--s4);left:var(--s4);width:-moz-fit-content;width:fit-content;max-width:calc(100% - var(--s8));padding:var(--s3) var(--s4);background:var(--raised);border:1px solid var(--line);z-index:20;box-shadow:var(--shadow);font-size:var(--text-sm);margin-left:auto;position:fixed}.mobile-tools{justify-content:space-between;gap:var(--s2);margin-bottom:var(--s4);display:flex}.mobile-tools button{color:var(--muted);padding-inline:0}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (hover:hover){button:not(:disabled):hover,.button:hover{filter:brightness(1.12);background-color:var(--raised)}.primary:hover{background:var(--accent)}.nav-content a:hover,.rail-link:hover,.search-result:hover{background:var(--raised);color:var(--ink)}.component-card:hover .miniature{border-color:var(--accent)}.component-card:hover h3,.topnav a:hover{color:var(--accent)}}@media (min-width:375px){.hero-search kbd{display:inline-block}}@media (min-width:600px){.catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.api-row{grid-template-columns:minmax(120px,1fr) 2fr}.compatibility{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){:root{--gutter:32px}.topnav{display:flex}.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.hero-copy h1{font-size:clamp(2rem,3.6vw,var(--text-display))}.dialog-body.filter-options{grid-template-columns:1fr 1fr}}@media (min-width:1024px) and (min-height:500px){.layout{grid-template-columns:var(--side) minmax(0,1fr)}.sidebar{top:var(--header);height:calc(100dvh - var(--header));padding:var(--s6) var(--s4);border-right:1px solid var(--quiet-line);flex-direction:column;align-self:start;display:flex;position:sticky;overflow:auto}.mobile-menu,.mobile-tools .nav-trigger{display:none}.topbar .brand{width:calc(var(--side) - var(--gutter));flex:none}.quicksearch{display:flex}.search-icon{display:none}main{padding-top:var(--s6)}.catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{padding-bottom:var(--s12)}}@media (min-width:1440px) and (min-height:500px){.layout{grid-template-columns:var(--side) minmax(0,1fr) var(--rail)}.rightbar{top:var(--header);padding:var(--s8) var(--s6);border-left:1px solid var(--quiet-line);min-height:calc(100dvh - var(--header));align-self:start;display:block;position:sticky}.mobile-tools{display:none}main{padding:var(--s8) var(--s12) var(--s12)}.hero{gap:var(--s12)}}@media (min-width:1800px){:root{--side:256px;--rail:240px}main{justify-self:center;width:100%;max-width:1400px}}@media (any-pointer:coarse){:root{--hit:48px}.rail-link{min-height:var(--hit)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.storybook-canvas{background:var(--canvas);min-height:100vh;padding:clamp(16px,4vw,64px)}.story-section{gap:var(--s6);max-width:960px;margin-inline:auto;display:grid}.story-example{max-width:880px;margin-inline:auto}.story-preview{justify-content:center;gap:var(--s4);padding:var(--s12);background:var(--canvas);color:var(--ink);display:grid}.setting{justify-content:space-between;align-items:center;gap:var(--s8);min-width:240px;display:flex}.story-code{padding:var(--s6);background:var(--code);color:var(--accent);font:var(--text-sm)/1.8 var(--mono);margin:0;overflow:auto}.token-grid{gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));display:grid}.token-grid div{gap:var(--s2);display:grid}.token-grid span{border:1px solid var(--line);min-height:72px;display:block}.production-story{background:var(--canvas);border:0;width:100%;height:100vh;display:block}