:root{--paper:#0b0a09;--paper-2:#131110;--ink:#f4efe6;--ink-dim:#a29a8e;--ink-faint:#6b645b;--amber:#ff7a1a;--ember:#ffd27a;--line:color-mix(in oklab, var(--ink) 14%, transparent);--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-serif:ui-serif, "Iowan Old Style", Georgia, serif;--font-mono:ui-monospace, "SF Mono", Menlo, monospace;--step:clamp(.75rem, .6rem + .6vw, 1.1rem);--measure:62ch;--radius:2px}*{box-sizing:border-box}html{scroll-behavior:smooth}body.demo{background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:16px;line-height:1.55}.demo-nav{z-index:100;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(#0b0a09eb,#0b0a0900);align-items:baseline;gap:1rem;padding:.85rem 1.25rem;font-size:.78rem;display:flex;position:fixed;inset:0 0 auto;-webkit-mask-image:linear-gradient(#000 55%,#0000);mask-image:linear-gradient(#000 55%,#0000)}.demo-nav a{color:var(--ink-dim);border-bottom:1px solid #0000;text-decoration:none}.demo-nav a:hover{color:var(--ink);border-bottom-color:var(--amber)}.demo-nav strong{color:var(--ink);font-weight:600}.demo-nav .demo-nav-spacer{flex:1}.demo-shell{max-width:76rem;margin:0 auto;padding:0 1.25rem}.demo-hero{max-width:var(--measure);padding:7rem 0 2.5rem}.demo-kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 .75rem;font-size:.72rem}.demo-hero h1{font-family:var(--font-serif);letter-spacing:-.02em;margin:0 0 .9rem;font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem);font-weight:400;line-height:1.05}.demo-hero p{color:var(--ink-dim);margin:0;font-size:1.05rem}.demo-section{padding:3rem 0}.demo-section>h2{font-family:var(--font-serif);margin:0 0 1rem;font-size:1.5rem;font-weight:400}.demo-note{max-width:var(--measure);color:var(--ink-dim);font-size:.95rem}.demo-note code,.demo-inline-code{font-family:var(--font-mono);color:var(--ember);font-size:.86em}.demo-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);overflow:hidden}pre.demo-code{font-family:var(--font-mono);color:#d8cfc2;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);tab-size:2;margin:0;padding:1rem 1.1rem;font-size:.8rem;line-height:1.65;overflow-x:auto}.demo-scroll-hint{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);align-items:center;gap:.5rem;font-size:.74rem;display:inline-flex}.demo-scroll-hint:after{content:"";background:linear-gradient(to bottom, var(--ink-faint), transparent);width:1px;height:2.2rem;animation:2.4s ease-in-out infinite demo-hint}@keyframes demo-hint{0%,to{transform-origin:top;opacity:.4;transform:scaleY(.4)}50%{transform-origin:top;opacity:1;transform:scaleY(1)}}.demo-controls{z-index:90;overscroll-behavior:contain;width:15.5rem;max-height:calc(100dvh - 2rem);color:var(--ink-dim);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#131110e0;padding:0 .85rem .85rem;font-size:.78rem;position:fixed;bottom:1rem;right:1rem;overflow-y:auto}.demo-controls[hidden]{display:none}.demo-controls>summary{z-index:1;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;background:#131110eb;margin:0 -.85rem;padding:.85rem .85rem .5rem;font-size:.7rem;position:sticky;top:0}.demo-control-group{border-top:1px solid var(--line)}.demo-control-group>summary{letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);cursor:pointer;padding:.45rem 0;font-size:.7rem}.demo-control-group[open]>summary{color:var(--ink)}.demo-control-group>.demo-control{padding-left:.55rem}.demo-control{grid-template-columns:1fr auto;align-items:center;gap:.15rem .5rem;padding:.3rem 0;display:grid}.demo-control>label{color:var(--ink-dim)}.demo-control>output{font-family:var(--font-mono);color:var(--ember);font-size:.74rem}.demo-control>input[type=range],.demo-control>select{width:100%;accent-color:var(--amber);grid-column:1/-1}.demo-control>select{color:var(--ink);font:inherit;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.25rem}.demo-control.is-toggle{grid-template-columns:auto 1fr}.demo-control.is-toggle>input{accent-color:var(--amber)}.demo-control>button{color:var(--paper);font:inherit;letter-spacing:.06em;text-transform:uppercase;background:var(--amber);border-radius:var(--radius);cursor:pointer;border:0;grid-column:1/-1;padding:.4rem}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-scroll-hint:after{animation:none}}