:root{--ink-900:#090b0f;--ink-850:#0c0f14;--ink-800:#11151b;--ink-750:#151a21;--ink-700:#1a2029;--ink-650:#212936;--ink-600:#2a3340;--line-faint:#ffffff0b;--line:#ffffff13;--line-strong:#ffffff20;--line-hot:#fff3;--text-hi:#f4f7fa;--text:#c4cdd8;--text-mid:#9ba6b4;--text-low:#6a7583;--text-faint:#47505c;--accent-200:#c7e9f8;--accent-300:#93d2ef;--accent-400:#5fb8e2;--accent-500:#3a9dcc;--accent-600:#23789f;--accent-700:#175872;--accent-ink:#04161f;--accent-wash:#5fb8e21a;--accent-edge:#5fb8e257;--accent-glow:#5fb8e24d;--accent-glow-hi:#5fb8e280;--flam:#d9f25e;--flam-wash:#d9f25e1a;--flam-edge:#d9f25e4d;--ok:#3fbf83;--ok-wash:#3fbf831f;--ok-edge:#3fbf8359;--warn:#e3a93a;--warn-wash:#e3a93a1f;--warn-edge:#e3a93a59;--danger:#e8624a;--danger-wash:#e8624a1f;--danger-edge:#e8624a59;--font-sans:"Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;--fs-3xs:10px;--fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:38px;--track-tight:-.022em;--track-snug:-.012em;--track-normal:0em;--track-wide:.02em;--lh-tight:1.15;--lh-snug:1.35;--lh-body:1.6;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:56px;--sp-10:72px;--sp-11:96px;--r-xs:6px;--r-sm:9px;--r-md:14px;--r-lg:20px;--r-pill:999px;--lift-0:inset 0 1px 0 var(--line-faint);--lift-1:inset 0 1px 0 var(--line), 0 1px 2px #00000073, 0 4px 12px -6px #0000008c;--lift-2:inset 0 1px 0 var(--line-strong), 0 2px 4px #0000006b, 0 12px 28px -12px #000000b3;--lift-3:inset 0 1px 0 var(--line-hot), 0 4px 10px #0006, 0 24px 56px -20px #000c;--well:inset 0 1px 3px #0000008c, inset 0 0 0 1px var(--line-faint);--ease:cubic-bezier(.34, 1.32, .48, 1);--ease-out:cubic-bezier(.22, .61, .36, 1);--ease-in:cubic-bezier(.55, .06, .68, .19);--dur-1:90ms;--dur-2:.16s;--dur-3:.24s;--dur-4:.42s;--focus-ring:0 0 0 2px var(--ink-850), 0 0 0 4px var(--accent-400);--shell-max:1520px;--rail-w:320px}*,:before,:after{box-sizing:border-box}html{background:var(--ink-900);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--ink-850);min-height:100%;color:var(--text);font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-body);font-feature-settings:"cv05" 1, "ss03" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;accent-color:var(--accent-400);margin:0}body:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(90rem 55rem at 12% -12%,#5fb8e216,#0000 62%),radial-gradient(70rem 50rem at 108% 118%,#7e94d60e,#0000 60%),radial-gradient(120rem 90rem at 50% 40%,#0000 42%,#0000006b 100%);position:fixed;inset:0}body:after{content:"";z-index:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");position:fixed;inset:0}.demo-app{z-index:1;min-height:100dvh;max-width:var(--shell-max);padding:var(--sp-8) var(--sp-7) var(--sp-10);margin:0 auto;position:relative;overflow-x:clip}@media (width<=720px){.demo-app{padding:var(--sp-6) var(--sp-4) var(--sp-8)}}*{scrollbar-width:thin;scrollbar-color:var(--ink-600) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:var(--r-pill);background-clip:content-box;border:3px solid #0000}::-webkit-scrollbar-thumb:hover{background:var(--ink-600);filter:brightness(1.4);background-clip:content-box}::selection{background:var(--accent-edge);color:var(--text-hi)}:where(a,button,input,textarea,select,[tabindex]):focus{outline:none}:where(a,button,input,textarea,select,[tabindex]):focus-visible{box-shadow:var(--focus-ring);border-radius:var(--r-xs);outline:none}.mono{font-family:var(--font-mono);font-feature-settings:"zero" 1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.demo-kv dd,.kv dd,.field b,.field-value,.chip-dims,.stage-dims-value,.stage-dims-scale,.demo-inspector-value{font-variant-numeric:tabular-nums}h1,h2,h3,h4{color:var(--text-hi);font-weight:600;line-height:var(--lh-tight);text-wrap:balance;margin:0}h1{font-size:var(--fs-3xl);letter-spacing:var(--track-tight);font-weight:700}h2{font-size:var(--fs-lg);letter-spacing:var(--track-snug)}h3{font-size:var(--fs-sm);letter-spacing:var(--track-normal)}p{text-wrap:pretty;margin:0}.demo-section-label{align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);letter-spacing:var(--track-normal);text-transform:none;color:var(--text-mid);margin:0 0 var(--sp-3);font-weight:500;display:flex}.demo-section-label:before{content:"";background:linear-gradient(90deg, transparent, var(--line-strong));flex:none;width:14px;height:1px}.panel{border:1px solid var(--line);background:var(--ink-750);isolation:isolate;position:relative}.panel:before{content:"";background:linear-gradient(90deg, transparent 0%, var(--line-hot) 14%, var(--line) 52%, transparent 92%);pointer-events:none;z-index:2;height:1px;position:absolute;inset:0 0 auto}.panel-stage{border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--lift-3);background:linear-gradient(180deg, #ffffff09, #fff0 220px), var(--ink-750);border:1px solid #ffffff0f;border-bottom-color:#ffffff08;flex-direction:column;align-items:center;min-width:0;min-height:260px;display:flex}.panel-control{border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--lift-1);background:linear-gradient(180deg, #ffffff06, #fff0 120px), var(--ink-750)}.panel-readout{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--lift-0);background:var(--ink-800);border-color:var(--line-faint)}.panel-readout:before{inset:var(--sp-4) auto var(--sp-4) 0;background:linear-gradient(180deg, transparent, var(--accent-edge) 22%, var(--accent-edge) 78%, transparent);width:1px;height:auto}.panel-head{justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding-bottom:var(--sp-3);margin-bottom:var(--sp-4);border-bottom:1px solid var(--line-faint);display:flex}.panel-head h2{font-size:var(--fs-sm);color:var(--text-hi);letter-spacing:var(--track-normal);font-weight:600}.panel-sub{font-size:var(--fs-2xs);color:var(--text-low);margin:calc(var(--sp-3) * -1) 0 var(--sp-4)}.demo-layout{grid-template-columns:minmax(0, 1fr) var(--rail-w);gap:var(--sp-4);align-items:start;display:grid}.demo-column{gap:var(--sp-5);flex-direction:column;min-width:0;display:flex}@media (width>=1041px){.demo-column-sticky{top:var(--sp-6);max-height:calc(100vh - var(--sp-10));overscroll-behavior:contain;padding-right:var(--sp-1);align-self:start;position:sticky;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 12px calc(100% - 16px),#0000 100%);mask-image:linear-gradient(#0000 0,#000 12px calc(100% - 16px),#0000 100%)}.demo-column{gap:var(--sp-6)}.stage-bar{align-items:center;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--line-faint);margin-top:var(--sp-4);flex-wrap:wrap;display:flex}.stage-bar .switch{margin-left:0}}@media (width<=1040px){.demo-layout{grid-template-columns:minmax(0,1fr)}}.btn{justify-content:center;align-items:center;gap:var(--sp-2);height:34px;padding:0 var(--sp-4);border-radius:var(--r-sm);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-xs);letter-spacing:.004em;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);background:0 0;border:1px solid #0000;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn:disabled{opacity:.42;cursor:not-allowed;transform:none!important}.btn:focus-visible{box-shadow:var(--focus-ring)}.btn:active:not(:disabled){transition-duration:var(--dur-1);transform:translateY(1px)}.btn>svg{flex:none;width:14px;height:14px}.btn-primary{background:linear-gradient(180deg, var(--accent-300), var(--accent-500));color:var(--accent-ink);box-shadow:inset 0 1px 0 #ffffff73, inset 0 -1px 0 #0000002e, 0 1px 2px #00000080, 0 6px 18px -10px var(--accent-glow)}.btn-primary:hover:not(:disabled){background:linear-gradient(180deg, var(--accent-200), var(--accent-400));box-shadow:inset 0 1px 0 #ffffff8c, inset 0 -1px 0 #0000002e, 0 2px 4px #00000073, 0 12px 30px -10px var(--accent-glow-hi);transform:translateY(-1px)}.btn-primary:active:not(:disabled){box-shadow:inset 0 1px 3px #00000047,0 1px 2px #00000080}.btn-primary:after{content:"";pointer-events:none;width:60%;height:220%;transition:left .62s var(--ease-out);background:linear-gradient(90deg,#0000,#ffffff6b,#0000);position:absolute;top:-60%;left:-140%;transform:rotate(18deg)}.btn-primary:hover:after{left:160%}.btn-secondary{border-color:var(--line-strong);color:var(--text-hi);box-shadow:var(--lift-1);background:linear-gradient(#ffffff0e,#ffffff04)}.btn-secondary:hover:not(:disabled){border-color:var(--accent-edge);color:var(--text-hi);box-shadow:var(--lift-2), 0 0 22px -8px var(--accent-glow);background:linear-gradient(#ffffff16,#ffffff08);transform:translateY(-1px)}.btn-secondary:active:not(:disabled){box-shadow:var(--well)}.btn-ghost{color:var(--text-mid)}.btn-ghost:hover:not(:disabled){color:var(--text-hi);background:#ffffff0d}.btn-icon{width:34px;padding:0}.btn-sm{height:28px;padding:0 var(--sp-3);font-size:var(--fs-2xs);border-radius:var(--r-xs)}.btn-lg{height:40px;padding:0 var(--sp-5);font-size:var(--fs-sm)}.brand-header{padding:var(--sp-9) 0 var(--sp-8);margin-bottom:var(--sp-8);position:relative}.brand-header-grid{gap:var(--sp-9);grid-template-columns:minmax(0,1fr) minmax(340px,440px);align-items:center;display:grid}.brand-header-main{min-width:0}@media (width<=1040px){.brand-header-grid{grid-template-columns:minmax(0,1fr)}.brand-header-main{max-width:none}}.brand-header-glow{pointer-events:none;z-index:-1;background:radial-gradient(closest-side, var(--accent-glow), transparent 70%), radial-gradient(closest-side at 70% 60%, var(--flam-wash), transparent 70%);filter:blur(46px);opacity:.75;width:620px;height:320px;animation:brand-drift 22s var(--ease-out) infinite alternate;position:absolute;top:-80px;left:-140px}@keyframes brand-drift{0%{transform:translate(0,0)scale(1)}to{transform:translate(38px,14px)scale(1.07)}}.brand-badge{align-items:center;gap:var(--sp-3);border:1px solid var(--flam-edge);border-radius:var(--r-pill);background:var(--flam-wash);color:var(--flam);font-size:var(--fs-sm);letter-spacing:var(--track-wide);margin-bottom:var(--sp-8);box-shadow:0 0 24px -10px var(--flam), inset 0 1px 0 #ffffff14;padding:12px 24px 12px 20px;font-weight:600;display:inline-flex}.brand-badge-dot{background:var(--flam);width:11px;height:11px;box-shadow:0 0 12px var(--flam);animation:badge-pulse 2.6s var(--ease-out) infinite;border-radius:50%}@keyframes badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.82)}}.brand-badge-sep{background:var(--flam-edge);width:1px;height:15px}.brand-badge-sub{color:#d9f25eb8;font-weight:500}.brand-title{letter-spacing:var(--track-tight);margin:0 0 var(--sp-3);background:linear-gradient(168deg, var(--text-hi) 18%, #9fb0c2 96%);color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:48px;font-weight:700;line-height:1.02}@supports not ((-webkit-background-clip:text) or (background-clip:text)){.brand-title{color:var(--text-hi);-webkit-text-fill-color:currentColor}}.brand-kicker{font-size:var(--fs-xl);letter-spacing:var(--track-snug);color:var(--text-low);margin:2px 0 var(--sp-4);font-weight:400}.brand-standfirst{font-size:var(--fs-xl);line-height:var(--lh-body);color:var(--text);max-width:72ch;margin:0 0 var(--sp-4);font-weight:400}.brand-meta{font-size:var(--fs-sm);color:var(--text-low);margin:0 0 var(--sp-5)}.brand-meta-item{display:inline}.brand-meta b{color:var(--text-mid);font-weight:500}.brand-credit{padding:var(--sp-8) var(--sp-9);border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-750);box-shadow:var(--lift-1);position:relative}.brand-credit:before{content:"";top:0;left:var(--sp-5);right:var(--sp-5);background:linear-gradient(90deg, var(--flam), transparent 82%);height:1px;position:absolute}.brand-credit-eyebrow{font-size:var(--fs-sm);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text);margin:0 0 var(--sp-3);font-weight:700}.brand-credit-name{font-size:var(--fs-md);color:var(--text-low);line-height:var(--lh-tight);letter-spacing:var(--track-wide);margin:0;font-weight:500}.brand-credit-name-hi{letter-spacing:-.03em;color:var(--accent-300);margin-top:var(--sp-1);text-shadow:0 0 40px #5fb8e226;font-size:56px;font-weight:800;line-height:1;display:block}.brand-credit-school{font-size:var(--fs-xl);color:var(--text-hi);margin:var(--sp-4) 0 var(--sp-5);letter-spacing:-.01em;font-weight:700}.brand-credit-text{font-size:var(--fs-lg);line-height:var(--lh-snug);color:var(--text);margin:0}.brand-credit-text b{color:var(--text-hi);font-weight:600}.brand-credit-links{gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap;display:flex}.brand-credit-links .btn{text-decoration:none}.btn-xs{font-size:var(--fs-sm);padding:8px 16px}@media (width<=720px){.brand-title{font-size:var(--fs-2xl)}.brand-kicker{font-size:var(--fs-lg)}.brand-standfirst{font-size:var(--fs-md)}.brand-credit-links{flex-direction:column;align-items:stretch}.brand-credit-links .btn{width:100%}}.site-footer{margin-top:var(--sp-11)}.site-footer-rule{background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);height:1px;margin-bottom:var(--sp-6)}.site-footer-body{gap:var(--sp-2);flex-direction:column;display:flex}.site-footer-line{align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--text-mid);flex-wrap:wrap;display:flex}.site-footer-mark{font-size:var(--fs-sm);letter-spacing:var(--track-snug);color:var(--flam);font-weight:700}.site-footer-sep{color:var(--text-faint)}.site-footer-sub{font-size:var(--fs-2xs);color:var(--text-low);line-height:var(--lh-snug);max-width:78ch}.tabs{border:1px solid var(--line);background:var(--ink-800);box-shadow:var(--well);margin-bottom:var(--sp-7);border-radius:12px;grid-auto-columns:1fr;grid-auto-flow:column;gap:0;padding:4px;display:inline-grid;position:relative}.tabs-indicator{background:linear-gradient(180deg, var(--ink-650), var(--ink-700));width:calc(50% - 4px);box-shadow:inset 0 1px 0 var(--line-hot), 0 2px 6px #00000080;transform:translateX(calc(var(--tab-index,0) * 100%));transition:transform var(--dur-3) var(--ease);pointer-events:none;border-radius:9px;position:absolute;top:4px;bottom:4px;left:4px}.tabs-item{z-index:1;font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--text-low);cursor:pointer;transition:color var(--dur-2) var(--ease-out);background:0 0;border:none;border-radius:9px;padding:8px 22px;font-weight:600;position:relative}.tabs-item:hover{color:var(--text-mid)}.tabs-item.is-active{color:var(--text-hi)}.tabs-item:focus-visible{box-shadow:var(--focus-ring)}.picker{gap:var(--sp-2);margin-bottom:var(--sp-6);flex-wrap:wrap;display:flex}.chip{align-items:center;gap:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-sm);background:linear-gradient(#ffffff08,#fff0);background-color:var(--ink-700);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-xs);text-align:left;cursor:pointer;box-shadow:var(--lift-1);transition:transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);padding:9px 14px;line-height:1.25;display:inline-flex;position:relative}.chip:hover{background-color:var(--ink-650);border-color:var(--line-strong);box-shadow:var(--lift-2);transform:translateY(-1px)}.chip:active{box-shadow:var(--well);transform:translateY(1px)}.chip:focus-visible{box-shadow:var(--focus-ring)}.chip-body{flex-direction:column;gap:1px;min-width:0;display:flex}.chip-label{color:inherit;font-weight:500}.chip-dims{font-size:var(--fs-3xs);color:var(--text-low)}.chip.is-selected{background:linear-gradient(180deg, var(--accent-300), var(--accent-500));background-color:var(--accent-500);color:var(--accent-ink);box-shadow:inset 0 1px 0 #ffffff6b, 0 2px 4px #0006, 0 10px 26px -12px var(--accent-glow-hi);border-color:#0000}.chip.is-selected .chip-dims{color:#04161fa8}.chip.is-selected:hover{filter:brightness(1.05);transform:translateY(-1px)}.surface-thumb{color:currentColor;opacity:.85;flex:none}.chip.is-selected .surface-thumb{opacity:1}.chip-swatch{flex:none;display:inline-flex}.chip-swatch i{border:1px solid #00000073;border-radius:50%;width:11px;height:11px;display:block;box-shadow:0 0 0 1px #ffffff24}.chip-swatch i+i{margin-left:-4px}.chip-preset{border-radius:var(--r-xs);background:var(--ink-800);box-shadow:var(--lift-0);font-size:var(--fs-2xs);background-image:none;padding:7px 11px}.chip-preset:hover{background:var(--ink-700);border-color:var(--accent-edge);box-shadow:var(--lift-1)}.picker-tight{margin-bottom:var(--sp-4);gap:6px}.stage-lightbox{border-radius:var(--r-md);width:100%;min-width:0;padding:var(--sp-6) var(--sp-5);background: radial-gradient(60% 42% at 50% 96%, #5fb8e21a, transparent 70%),  radial-gradient(120% 100% at 50% 30%, transparent 40%, #00000073 100%), var(--ink-900);box-shadow:var(--well), inset 0 1px 0 #ffffff0a;position:relative;overflow:hidden}.stage-viewport{flex:1;justify-content:center;align-items:center;width:100%;min-width:0;display:flex}.stage-frame{transition:width var(--dur-4) var(--ease), height var(--dur-4) var(--ease);filter:drop-shadow(0 18px 34px #0000009e)drop-shadow(0 3px 8px #00000073);position:relative}.stage-frame:after{content:"";pointer-events:none;z-index:-1;background:radial-gradient(closest-side,#0000009e,#0000 78%);border-radius:50%;height:20px;position:absolute;bottom:-14px;left:8%;right:8%}.stage-surface{outline:1px solid var(--line-strong);background-color:var(--ink-800);background-image:linear-gradient(45deg,#ffffff09 25%,#0000 25%),linear-gradient(-45deg,#ffffff09 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ffffff09 75%),linear-gradient(-45deg,#0000 75%,#ffffff09 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;min-width:0}.stage-tick{pointer-events:none;opacity:.55;border-color:var(--accent-300);border-style:solid;border-width:0;width:9px;height:9px;position:absolute}.stage-tick-tl{border-top-width:1px;border-left-width:1px;top:-5px;left:-5px}.stage-tick-tr{border-top-width:1px;border-right-width:1px;top:-5px;right:-5px}.stage-tick-bl{border-bottom-width:1px;border-left-width:1px;bottom:-5px;left:-5px}.stage-tick-br{border-bottom-width:1px;border-right-width:1px;bottom:-5px;right:-5px}.stage-dims{align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);font-size:var(--fs-xs);color:var(--text-mid);display:flex}.stage-dims-label{color:var(--text-hi);font-weight:500}.stage-dims-rule{background:linear-gradient(90deg, var(--line), transparent);flex:1;min-width:12px;height:1px}.stage-dims-value{color:var(--text)}.stage-dims-unit{color:var(--text-low);margin-left:2px}.stage-dims-scale{border-radius:var(--r-xs);background:var(--accent-wash);border:1px solid var(--accent-edge);color:var(--accent-200);font-size:var(--fs-3xs);padding:2px 7px}.stage-bar{justify-content:center;align-items:center;gap:var(--sp-5);width:100%;margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line-faint);flex-wrap:wrap;display:flex}.segmented{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-800);box-shadow:var(--well);align-items:center;gap:2px;padding:3px;display:inline-flex}.segmented-item{font-family:var(--font-sans);font-size:var(--fs-2xs);color:var(--text-low);cursor:pointer;transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);background:0 0;border:none;border-radius:6px;padding:5px 13px;font-weight:600}.segmented-item:hover{color:var(--text-mid)}.segmented-item.is-active{background:linear-gradient(180deg, var(--ink-650), var(--ink-700));color:var(--text-hi);box-shadow:inset 0 1px 0 var(--line-hot), 0 1px 3px #00000080}.segmented-item:focus-visible{box-shadow:var(--focus-ring)}.segmented .demo-info-tooltip{margin-left:4px;margin-right:4px}.switch{align-items:center;gap:var(--sp-2);cursor:pointer;font-size:var(--fs-xs);color:var(--text-mid);display:inline-flex}.switch input{opacity:0;width:0;height:0;position:absolute}.switch-track{border-radius:var(--r-pill);background:var(--ink-800);border:1px solid var(--line);width:34px;height:19px;box-shadow:var(--well);transition:background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);flex:none;position:relative}.switch-thumb{width:13px;height:13px;transition:transform var(--dur-3) var(--ease), background var(--dur-2) var(--ease-out);background:linear-gradient(#e9f2f8,#a9bcc8);border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0009}.switch input:checked+.switch-track{background:linear-gradient(180deg, var(--accent-500), var(--accent-600));border-color:var(--accent-edge);box-shadow:inset 0 1px 2px #0000004d, 0 0 16px -6px var(--accent-glow-hi)}.switch input:checked+.switch-track .switch-thumb{background:linear-gradient(#fff,#d6e9f4);transform:translate(15px)}.switch input:focus-visible+.switch-track{box-shadow:var(--focus-ring)}.switch:hover .switch-label{color:var(--text-hi)}.switch-label{transition:color var(--dur-2) var(--ease-out)}.field{margin-bottom:var(--sp-4);display:block}.field-head{justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-2);display:flex}.field-label{font-size:var(--fs-xs);color:var(--text-mid);align-items:center;display:inline-flex}.field-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-xs);color:var(--text-hi);border-radius:var(--r-xs);background:var(--ink-800);border:1px solid var(--line-faint);padding:2px 7px;font-weight:500}.field-value em{color:var(--text-low);margin-left:1px;font-style:normal}.range{appearance:none;cursor:pointer;background:0 0;width:100%;height:22px;display:block}.range::-webkit-slider-runnable-track{border-radius:var(--r-pill);background:linear-gradient(90deg, var(--accent-400) 0 var(--fill,0%), transparent var(--fill,0%) 100%), var(--ink-800);height:5px;box-shadow:inset 0 0 0 1px var(--line-faint), inset 0 1px 2px #00000080}.range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;box-shadow:0 1px 3px #000000b3, 0 0 0 0 var(--accent-glow);transition:box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);background:radial-gradient(circle at 32% 28%,#fff,#dceaf3 42%,#8fb7cc 100%);border:1px solid #ffffff8c;border-radius:50%;margin-top:-5.5px}.range:hover::-webkit-slider-thumb{box-shadow:0 1px 3px #000000b3, 0 0 0 6px var(--accent-wash)}.range:active::-webkit-slider-thumb{box-shadow:0 1px 3px #000000b3, 0 0 0 9px var(--accent-wash);transform:scale(1.1)}.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--ink-750), 0 0 0 4px var(--accent-400)}.range::-moz-range-track{border-radius:var(--r-pill);background:var(--ink-800);height:5px;box-shadow:inset 0 0 0 1px var(--line-faint)}.range::-moz-range-progress{border-radius:var(--r-pill);background:var(--accent-400);height:5px}.range::-moz-range-thumb{background:radial-gradient(circle at 32% 28%,#fff,#dceaf3 42%,#8fb7cc 100%);border:1px solid #ffffff8c;border-radius:50%;width:15px;height:15px;box-shadow:0 1px 3px #000000b3}.fieldset{border:1px solid var(--line-faint);border-radius:var(--r-xs);padding:var(--sp-3) var(--sp-4) var(--sp-4);margin:0 0 var(--sp-4);background:#0000002e}.fieldset>legend{padding:0 var(--sp-2);font-size:var(--fs-2xs);color:var(--text-mid);align-items:center;font-weight:500;display:inline-flex}.grid-2{gap:var(--sp-2);grid-template-columns:1fr 1fr;display:grid}.num-field{font-size:var(--fs-3xs);color:var(--text-low);flex-direction:column;gap:3px;display:flex}.num-field input{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-xs);border:1px solid var(--line);border-radius:var(--r-xs);background:var(--ink-800);color:var(--text-hi);box-shadow:var(--well);transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);padding:6px 8px}.num-field input:hover{border-color:var(--line-strong)}.num-field input:focus{border-color:var(--accent-edge);box-shadow:var(--well), 0 0 0 3px var(--accent-wash);outline:none}.num-field input:focus-visible{box-shadow:var(--focus-ring)}.radio-row{margin-bottom:var(--sp-2);flex-wrap:wrap;gap:6px;display:flex}.radio-pill{display:inline-flex;position:relative}.radio-pill input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.radio-pill span{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--ink-800);font-size:var(--fs-2xs);color:var(--text-mid);transition:all var(--dur-2) var(--ease-out);pointer-events:none;text-transform:capitalize;align-items:center;padding:5px 12px;font-weight:500;display:inline-flex}.radio-pill:hover span{color:var(--text-hi);border-color:var(--line-strong)}.radio-pill input:checked+span{background:var(--accent-wash);border-color:var(--accent-edge);color:var(--accent-200);box-shadow:inset 0 1px 0 #ffffff0f, 0 0 14px -6px var(--accent-glow)}.radio-pill input:focus-visible+span{box-shadow:var(--focus-ring)}.code-box{width:100%;font-family:var(--font-mono);font-size:var(--fs-2xs);tab-size:2;border:1px solid var(--line);border-radius:var(--r-xs);padding:var(--sp-3);resize:vertical;margin-bottom:var(--sp-2);background:var(--ink-900);color:var(--accent-200);box-shadow:var(--well);transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);line-height:1.65;display:block}.code-box::placeholder{color:var(--text-faint)}.code-box:focus{border-color:var(--accent-edge);box-shadow:var(--well), 0 0 0 3px var(--accent-wash);outline:none}.alert-error{gap:var(--sp-2);background:var(--danger-wash);border:1px solid var(--danger-edge);color:#ffb3a3;border-radius:var(--r-xs);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2xs);line-height:var(--lh-snug);margin:0 0 var(--sp-3);animation:shake-in var(--dur-3) var(--ease-out);border-left-width:2px;display:flex}@keyframes shake-in{0%{opacity:0;transform:translate(0)}25%{opacity:1;transform:translate(-3px)}60%{transform:translate(2px)}to{transform:translate(0)}}.status{border-radius:var(--r-pill);font-size:var(--fs-2xs);letter-spacing:var(--track-wide);text-transform:none;border:1px solid #0000;align-items:center;gap:6px;padding:3px 11px 3px 9px;font-weight:600;display:inline-flex}.status:before{content:"";background:currentColor;border-radius:50%;flex:none;width:6px;height:6px;box-shadow:0 0 8px}.status.ok{background:var(--ok-wash);border-color:var(--ok-edge);color:var(--ok)}.status.degraded{background:var(--warn-wash);border-color:var(--warn-edge);color:var(--warn)}.status.constrained{background:var(--danger-wash);border-color:var(--danger-edge);color:var(--danger)}.status.constrained:before{animation:badge-pulse 1.6s var(--ease-out) infinite}.status-row{align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap;display:flex}.kv{margin:0 0 var(--sp-4);grid-template-columns:auto 1fr;gap:0;display:grid}.kv dt,.kv dd{border-bottom:1px solid var(--line-faint);align-items:center;min-height:28px;padding:4px 0;display:flex}.kv dt{color:var(--text-mid);font-size:var(--fs-xs);gap:2px}.kv dd{text-align:right;color:var(--text-hi);font-family:var(--font-mono);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;word-break:break-word;justify-content:flex-end;margin:0}.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:none}.kv dt:hover,.kv dt:hover+dd{background:#ffffff07}.empty{text-align:center;align-items:center;gap:var(--sp-1);padding:var(--sp-6) var(--sp-4);border:1px dashed var(--line);border-radius:var(--r-xs);color:var(--text-low);flex-direction:column;display:flex}.empty>svg{opacity:.5;width:20px;height:20px;margin-bottom:var(--sp-1)}.empty-title{font-size:var(--fs-xs);color:var(--text-mid);font-weight:600}.empty-hint{font-size:var(--fs-2xs);line-height:var(--lh-snug);max-width:30ch}.demo-info-tooltip{vertical-align:middle;margin-left:5px;display:inline-flex;position:relative}.demo-info-trigger{border:1px solid var(--line);background:var(--ink-700);width:15px;height:15px;color:var(--text-low);font-family:var(--font-sans);cursor:help;transition:all var(--dur-2) var(--ease-out);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:9px;font-weight:700;line-height:1;display:inline-flex}.demo-info-trigger:hover,.demo-info-trigger[aria-expanded=true]{border-color:var(--accent-edge);background:var(--accent-wash);color:var(--accent-200);box-shadow:0 0 12px -4px var(--accent-glow)}.demo-info-trigger:focus-visible{box-shadow:var(--focus-ring)}.demo-info-popover{z-index:60;width:max-content;max-width:240px;padding:var(--sp-3);border-radius:var(--r-xs);border:1px solid var(--line-strong);background:var(--ink-700);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:400;line-height:var(--lh-snug);letter-spacing:0;text-align:left;text-transform:none;white-space:normal;box-shadow:var(--lift-3);animation:tip-in .14s var(--ease-out);position:absolute;top:calc(100% + 8px);left:-6px}.demo-info-popover.is-flipped{left:auto;right:-6px}@keyframes tip-in{0%{opacity:0;transform:translateY(-4px)scale(.97)}to{opacity:1;transform:none}}.demo-info-popover:before{content:"";background:var(--ink-700);border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong);width:8px;height:8px;position:absolute;top:-5px;left:10px;transform:rotate(45deg)}.demo-info-popover.is-flipped:before{left:auto;right:10px}.demo-guide{max-width:780px;padding:var(--sp-8) var(--sp-9) var(--sp-9);counter-reset:guide-section}@media (width<=720px){.demo-guide{padding:var(--sp-6) var(--sp-5)}}.guide-head{padding-bottom:var(--sp-6);margin-bottom:var(--sp-7);border-bottom:1px solid var(--line)}.guide-eyebrow{font-size:var(--fs-2xs);letter-spacing:var(--track-wide);color:var(--flam);margin-bottom:var(--sp-3);font-weight:600}.guide-title{font-size:var(--fs-2xl);letter-spacing:var(--track-tight);margin-bottom:var(--sp-3)}.guide-lede{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text-mid);max-width:62ch}.demo-guide-section{margin-bottom:var(--sp-8);position:relative}.demo-guide-section h2{counter-increment:guide-section;font-size:var(--fs-lg);letter-spacing:var(--track-snug);margin-bottom:var(--sp-4)}@media (width>=900px){.demo-guide-section h2:before{content:counter(guide-section, decimal-leading-zero);left:calc(var(--sp-9) * -1);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-faint);font-weight:400;line-height:inherit;position:absolute}}.demo-guide-section p{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text);margin-bottom:var(--sp-3);max-width:68ch}.demo-guide-section p:last-child{margin-bottom:0}.demo-guide-steps,.demo-guide-phases{padding-left:var(--sp-5);font-size:var(--fs-md);line-height:var(--lh-body);margin:0}.demo-guide-steps li,.demo-guide-phases li{margin-bottom:var(--sp-3);padding-left:var(--sp-1)}.demo-guide-steps li::marker{color:var(--text-faint);font-family:var(--font-mono);font-size:var(--fs-xs)}.demo-guide-phases li::marker{color:var(--text-faint);font-family:var(--font-mono);font-size:var(--fs-xs)}.demo-guide-phases li b{color:var(--text-hi)}.demo-guide-quote{margin:var(--sp-5) 0 0;padding:var(--sp-5) var(--sp-6);border-left:2px solid var(--accent-400);border-radius:0 var(--r-xs) var(--r-xs) 0;background:linear-gradient(90deg, var(--accent-wash), transparent 70%);font-size:var(--fs-lg);font-style:normal;font-weight:500;line-height:var(--lh-snug);letter-spacing:var(--track-snug);color:var(--text-hi);position:relative}.demo-guide-quote:before{content:"“";color:var(--accent-400);opacity:.16;pointer-events:none;font-size:56px;line-height:1;position:absolute;top:-4px;left:10px}.demo-guide-deflist{font-size:var(--fs-sm);grid-template-columns:minmax(120px,auto) 1fr;gap:0;margin:0;display:grid}.demo-guide-deflist dt,.demo-guide-deflist dd{padding:var(--sp-3) 0;border-bottom:1px solid var(--line-faint)}.demo-guide-deflist dt{color:var(--text-hi);white-space:nowrap;padding-right:var(--sp-5);font-weight:600}.demo-guide-deflist dd{color:var(--text-mid);line-height:var(--lh-snug);margin:0}.demo-guide-deflist dt:last-of-type,.demo-guide-deflist dd:last-of-type{border-bottom:none}.demo-guide-back{margin-top:var(--sp-6)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.brand-header,.tabs,.demo-section-label,.picker,.demo-column>*,.site-footer{animation:rise .48s var(--ease-out) backwards}.brand-header{animation-delay:0s}.tabs{animation-delay:60ms}.demo-section-label{animation-delay:90ms}.picker{animation-delay:.11s}.demo-column>*{animation-delay:.15s}.site-footer{animation-delay:.22s}.stage-content{width:100%;height:100%;animation:fade-in var(--dur-3) var(--ease-out)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.brand-header-glow{animation:none}.btn-primary:after{display:none}}@media (width<=1040px){.demo-layout{grid-template-columns:minmax(0,1fr)}.demo-column-sticky{max-height:none;position:static;overflow:visible;-webkit-mask-image:none;mask-image:none}}@media (width<=720px){.panel-stage{padding:var(--sp-4);border-radius:var(--r-md)}.stage-lightbox{padding:var(--sp-4) var(--sp-3)}.panel-control{padding:var(--sp-4)}.panel-readout{padding:var(--sp-3) var(--sp-4)}.stage-bar{gap:var(--sp-3)}.stage-dims{flex-wrap:wrap}.chip{padding:8px 11px}.tabs{width:100%;display:grid}}@media (pointer:coarse){.chip{min-height:44px}.btn{min-height:40px}.segmented-item{min-height:36px}.demo-info-trigger{width:20px;height:20px;font-size:11px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}
