html:root{--text-display:clamp(2.9rem,5.4vw + 1rem,5.6rem);--wrap:1200px;--color-amber-soft:oklch(95% .035 85);--color-amber-ink:oklch(45% .09 70)}.hero{background:linear-gradient(var(--color-paper) 0 58%,var(--color-paper-3) 58% 100%);padding:128px 0 var(--space-4xl);overflow:hidden}.hero__copy{text-align:center}.hero h1{font-size:var(--text-display);max-width:12.5ch;margin:0 auto;line-height:.98}.hero .lede{max-width:33em;margin:var(--space-lg) auto var(--space-xl)}.hero .field{justify-content:center;max-width:470px;margin:0 auto}.fine{font-size:var(--text-xs);color:var(--color-neutral);margin-top:var(--space-sm)}.stage{perspective:1600px;max-width:1040px;margin:var(--space-3xl) auto 0;padding:0 var(--space-lg)}.panel{transform-origin:50% 0;will-change:transform;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-lg);box-shadow:0 60px 120px -50px var(--color-shadow),0 2px 0 var(--color-rule);text-align:left;grid-template-columns:200px minmax(0,1fr);display:grid;overflow:hidden}.pside{background:var(--color-paper-2);padding:var(--space-md) var(--space-sm);border-right:1px solid var(--color-rule);font-size:var(--text-sm);color:var(--color-muted)}.pbrand{color:var(--color-ink);font-weight:700;font-family:var(--font-display);align-items:center;gap:8px;padding:4px 8px 16px;display:flex}.pside .it{border-radius:var(--radius-sm);justify-content:space-between;padding:8px 10px;display:flex}.pside .it.on{background:var(--color-paper);color:var(--color-ink);box-shadow:0 1px 0 var(--color-rule);font-weight:600}.pside em{font-style:normal;font-size:var(--text-xs);color:var(--color-neutral);font-variant-numeric:tabular-nums}.pmain{padding:var(--space-xl) var(--space-xl) 0;flex-direction:column;min-height:520px;display:flex;position:relative}.pstat{font:500 var(--text-xs) var(--font-mono);color:var(--color-neutral);height:18px}.pans{font-family:var(--font-display);letter-spacing:-.025em;min-height:4.2rem;margin-top:6px;font-size:1.75rem;font-weight:700;line-height:1.18}.pans span{opacity:0;transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-long) var(--ease-out);display:inline-block;transform:translateY(8px)}.pans span.in{opacity:1;transform:none}.pans .idle{opacity:1;color:var(--color-neutral);transform:none}.pbar{background:var(--color-free);height:22px;margin:var(--space-md) 0 8px;border-radius:8px;gap:2px;display:flex;overflow:hidden}.pbar span{height:100%;transition:flex-basis var(--dur-xl) var(--ease-out);flex:0 0}.plabels{font-size:var(--text-xs);color:var(--color-muted);font-variant-numeric:tabular-nums;justify-content:space-between;display:flex}.plabels b{color:var(--color-ink)}.prows{margin-top:var(--space-lg);gap:8px;display:grid}.row{gap:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-md);font-size:var(--text-sm);background:var(--color-paper);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out),background var(--dur-short),border-color var(--dur-short);grid-template-columns:22px minmax(0,1fr) auto auto;align-items:center;padding:12px 14px;display:grid}.prows .row{opacity:0;transform:translateY(10px)}.prows .row.in{opacity:1;transform:none}.prows .row.gone{opacity:.35;transform:translate(14px)}.row b{font-weight:600;display:block}.row small{font-size:var(--text-xs);color:var(--color-muted)}.row .size{font-variant-numeric:tabular-nums;font-weight:650}.tick{border:1.5px solid var(--color-stone);width:20px;height:20px;color:var(--color-on-dark);border-radius:6px;place-items:center;display:grid}.tick svg{opacity:0;transition:all var(--dur-short) var(--ease-spring);transform:scale(.4)}.row.picked{background:var(--color-accent-soft);border-color:oklch(84% .06 155)}.row.picked .tick{background:var(--color-accent);border-color:var(--color-accent)}.row.picked .tick svg{opacity:1;transform:none}.ptray{margin:auto calc(var(--space-xl) * -1) 0;justify-content:space-between;align-items:center;gap:var(--space-md);padding:14px var(--space-xl);border-top:1px solid var(--color-rule);background:var(--color-paper-2);font-size:var(--text-sm);color:var(--color-muted);display:flex}.ptray b{color:var(--color-ink)}.ptray .acts{align-items:center;gap:8px;display:flex}.go{background:var(--color-accent);color:var(--color-on-dark);border-radius:var(--radius-pill);cursor:pointer;transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-short);border:0;padding:8px 16px;font-weight:650}.go.press{box-shadow:0 0 0 6px var(--color-accent-soft);transform:scale(.94)}.replay{border:1px solid var(--color-rule);background:var(--color-paper);border-radius:var(--radius-pill);font-size:var(--text-xs);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--dur-long);padding:7px 12px;font-weight:600}.replay.show{opacity:1;pointer-events:auto}.back{font-family:var(--font-display);font-weight:750;font-size:var(--text-lg);color:var(--color-accent-deep);font-variant-numeric:tabular-nums}.toast{right:var(--space-xl);background:var(--color-ink);color:var(--color-on-dark);font-size:var(--text-sm);border-radius:var(--radius-md);gap:var(--space-md);opacity:0;transition:all var(--dur-long) var(--ease-out);padding:10px 14px;display:flex;position:absolute;bottom:72px;transform:translateY(8px)}.toast.in{opacity:1;transform:none}.toast u{color:var(--color-ok);font-weight:650;text-decoration:none}.leaf{transform-box:fill-box;transition:transform var(--dur-xl) var(--ease-spring)}.leaf.l{transform-origin:100% 100%}.leaf.r{transform-origin:0 100%}.bud .leaf{transform:scale(.2)}.pin{height:170vh}.pin__stage{align-items:stretch;height:100vh;padding:88px 0 5vh;display:flex;position:sticky;top:0;overflow:hidden}.sd{flex-direction:column;justify-content:space-between;gap:2.5vh;width:100%;display:flex}.sd__top{justify-content:space-between;align-items:end;gap:var(--space-xl);flex-wrap:wrap;display:flex}.sd__top h2{max-width:14ch}.sd__top p{color:var(--color-night-dim);font-size:var(--text-lg);margin:12px 0 0}.sd__num{font-family:var(--font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--color-on-dark);text-align:right;font-size:clamp(3rem,min(8vw,13vh),8rem);font-weight:750;line-height:.9}.sd__num small{font-size:var(--text-sm);letter-spacing:0;color:var(--color-night-dim);margin-top:10px;font-weight:500;display:block}.switcher{background:var(--color-night-2);border:1px solid var(--color-night-rule);border-radius:var(--radius-pill);font-size:var(--text-sm);align-self:flex-start;gap:4px;margin-top:0;padding:4px;font-weight:600;display:inline-flex}.switcher span{border-radius:var(--radius-pill);color:var(--color-night-dim);transition:background var(--dur-long) var(--ease-out),color var(--dur-long);padding:7px 14px}.switcher span.on{background:var(--color-night-ink);color:var(--color-night)}.sdbar{background:var(--color-night-2);border-radius:18px;height:clamp(84px,17vh,190px);margin-top:0;display:flex;position:relative;overflow:hidden}.sdbar span{text-indent:14px;height:100%;box-shadow:inset 3px 0 0 var(--color-night);font-size:var(--text-sm);color:var(--color-night);white-space:nowrap;align-items:flex-end;min-width:0;padding:0 0 12px;font-weight:650;display:flex;overflow:hidden}.sdbar .gray{color:var(--color-night-ink);background:var(--color-graybar);box-shadow:none}.sdlab{gap:var(--space-md);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.sdlab div{border-top:2px solid var(--color-night-rule);font-size:var(--text-sm);color:var(--color-night-dim);will-change:transform,opacity;padding-top:12px}.sdlab b{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-night-ink);font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,3.6vh,2.2rem);display:block}.sdlab i{border-radius:3px;width:10px;height:10px;margin-right:6px;display:inline-block}.sdsay{font-family:var(--font-display);letter-spacing:-.025em;max-width:30em;font-size:clamp(1.4rem,min(2.4vw,4vh),2.4rem);font-weight:700;line-height:1.22}.sdsay span{opacity:.14}.how{background:var(--color-paper-2)}.htrack-wrap{height:240vh}.hstage{flex-direction:column;justify-content:center;height:100vh;padding:84px 0 3vh;display:flex;position:sticky;top:0;overflow:hidden}.hhead{width:100%;margin-bottom:3vh}.dots{gap:8px;margin-top:12px;display:flex}.dots i{background:var(--color-rule);border-radius:4px;width:28px;height:4px;position:relative;overflow:hidden}.dots i b{background:var(--color-accent);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.htrack{align-items:stretch;gap:var(--space-lg);min-height:0;max-height:540px;padding-left:max(var(--space-lg),calc((100vw - var(--wrap)) / 2 + var(--space-lg)));will-change:transform;flex:1;display:flex}.hcard{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-lg);height:100%;padding:var(--space-lg);box-shadow:0 30px 60px -40px var(--color-shadow);will-change:transform;flex-direction:column;flex:0 0 min(470px,82vw);display:flex}.hcard .n{font:500 var(--text-xs) var(--font-mono);color:var(--color-accent)}.hcard h3{margin:6px 0;font-size:clamp(1.5rem,3.2vh,2rem);line-height:1.08}.hcard p{margin:0 0 var(--space-md);color:var(--color-muted);font-size:var(--text-sm)}.vig{background:var(--color-paper-2);border-radius:var(--radius-md);padding:var(--space-lg);font-size:var(--text-md);flex-direction:column;flex:1;justify-content:center;gap:1.4vh;min-height:0;display:flex;overflow:hidden}.vig.dk{background:var(--color-night);color:var(--color-night-dim);font:.8rem/1.75 var(--font-mono);justify-content:flex-start}.vig.dk .c{color:var(--color-ok)}.vig.dk .w{color:var(--color-on-dark);font-family:var(--font-body);font-size:var(--text-sm)}.vbar{background:var(--color-free);border-radius:5px;gap:2px;height:14px;display:flex;overflow:hidden}.vline{font-size:var(--text-xs);color:var(--color-muted);font-family:var(--font-mono);justify-content:space-between;align-items:center;display:flex}.vline b{font-family:var(--font-body);color:var(--color-ink);font-size:var(--text-sm)}.vrow{border-top:1px solid var(--color-rule);justify-content:space-between;padding:7px 0;display:flex}.vbig{font-family:var(--font-display);letter-spacing:-.04em;color:var(--color-accent-deep);font-size:2.2rem;font-weight:750;line-height:1}.vig .row{padding:9px 11px}.decode{padding:var(--space-4xl) 0}.dgrid{gap:var(--space-2xl);margin-top:var(--space-2xl);grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch;display:grid}.fcol{position:relative}.guide{margin-bottom:var(--space-md);transition:opacity var(--dur-long),transform var(--dur-long) var(--ease-out);align-items:center;gap:10px;display:flex}.guide svg{animation:bob 1.8s var(--ease-out) 4;flex:none}@keyframes bob{50%{transform:translateY(-4px)rotate(-6deg)}}.bubble{background:var(--color-ink);color:var(--color-on-dark);font-size:var(--text-sm);border-radius:var(--radius-md);padding:9px 14px;font-weight:550;position:relative}.bubble:before{content:"";background:var(--color-ink);border-radius:2px;width:12px;height:12px;position:absolute;top:50%;left:-6px;transform:translateY(-50%)rotate(45deg)}.guide.hide{opacity:0;transform:translateY(-6px)}.folders{gap:8px;display:grid}.folder{gap:var(--space-md);text-align:left;border:1.5px solid var(--color-rule);background:var(--color-paper);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--dur-short),transform var(--dur-short) var(--ease-out),background var(--dur-short);grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:15px 18px;display:grid;position:relative;overflow:hidden}.folder:hover{border-color:var(--color-stone);transform:translate(4px)}.folder[aria-selected=true]{border-color:var(--color-accent);background:var(--color-accent-soft)}.folder code{font:500 var(--text-xs)/1.4 var(--font-mono);color:var(--color-muted);overflow-wrap:anywhere}.folder b{font-family:var(--font-display);font-size:var(--text-lg);white-space:nowrap}.folder:after{content:"";background:var(--color-accent);transform-origin:0;width:100%;height:3px;position:absolute;bottom:0;left:0;transform:scaleX(0)}.auto .folder[aria-selected=true]:after{animation:4.5s linear forwards fill}@keyframes fill{to{transform:scaleX(1)}}.abox{background:var(--color-night);color:var(--color-night-ink);border-radius:var(--radius-lg);padding:var(--space-2xl);flex-direction:column;display:flex}.abox .q{font:500 var(--text-xs) var(--font-mono);color:var(--color-night-dim)}.abox .a{font-family:var(--font-display);letter-spacing:-.025em;margin:var(--space-md) 0 var(--space-lg);color:var(--color-on-dark);font-size:1.85rem;font-weight:700;line-height:1.22}.abox .a span{opacity:0;transition:opacity var(--dur-short)}.abox .a span.in{opacity:1}.abox .tags{flex-wrap:wrap;gap:8px;display:flex}.sugg{margin-top:var(--space-lg);justify-content:space-between;align-items:center;gap:var(--space-md);background:var(--color-night-2);border:1px solid var(--color-night-rule);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-night-dim);padding:12px 12px 12px 16px;display:flex}.sugg b{background:var(--color-accent);color:var(--color-on-dark);border-radius:var(--radius-pill);white-space:nowrap;padding:7px 14px;font-weight:600}.sugg b.soft{background:var(--color-night-3);color:var(--color-night-ink)}.abox .how2{padding-top:var(--space-lg);border-top:1px solid var(--color-night-rule);font-size:var(--text-sm);color:var(--color-night-dim);margin-top:auto}.abox .how2 b{color:var(--color-night-ink)}.story{padding:var(--space-4xl) 0}.story__grid{gap:var(--space-3xl);grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;display:grid}.story h2{margin-bottom:var(--space-lg)}.story p{margin:0 0 var(--space-md);font-size:var(--text-lg);color:var(--color-night-dim);line-height:1.6}.story p strong{color:var(--color-ok);font-weight:600}.sign{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-night-dim);align-items:center;gap:12px;display:flex}.sign b{color:var(--color-night-ink);display:block}.term{background:var(--color-night-2);border:1px solid var(--color-night-rule);border-radius:var(--radius-lg);padding:var(--space-lg);font:400 .84rem/1.8 var(--font-mono);box-shadow:0 40px 80px -40px oklch(0% 0 0/.5)}.term__h{color:var(--color-night-dim);font-size:var(--text-xs);border-bottom:1px solid var(--color-night-rule);justify-content:space-between;margin-bottom:14px;padding-bottom:12px;display:flex}.ln{color:var(--color-night-dim);white-space:pre-wrap;overflow-wrap:anywhere;will-change:opacity,transform}.ln.hot{color:var(--color-hot)}.ln.ok{color:var(--color-ok)}.ln.prompt{color:var(--color-night-ink)}.ln.gap{height:10px}.tools{padding:var(--space-4xl) 0;background:var(--color-paper-2)}.tbox{margin-top:var(--space-2xl);border:1px solid var(--color-rule);border-radius:var(--radius-lg);background:var(--color-paper);grid-template-columns:230px minmax(0,1fr);display:grid;overflow:hidden}.tabs{background:var(--color-paper-2);padding:var(--space-sm);border-right:1px solid var(--color-rule);align-content:start;gap:2px;display:grid}.tab{text-align:left;border-radius:var(--radius-sm);cursor:pointer;color:var(--color-muted);font-size:var(--text-sm);white-space:nowrap;background:0 0;border:0;align-items:center;gap:10px;padding:10px 12px;display:flex}.tab svg{color:var(--color-neutral);flex:none}.tab:hover{color:var(--color-ink)}.tab[aria-selected=true]{background:var(--color-paper);color:var(--color-ink);box-shadow:0 1px 0 var(--color-rule);font-weight:600}.tab[aria-selected=true] svg{color:var(--color-accent)}.tab{position:relative}.tab.new:after{content:"";background:var(--color-accent);width:7px;height:7px;box-shadow:0 0 0 3px var(--color-accent-soft);border-radius:50%;margin-top:-3.5px;position:absolute;top:50%;right:12px}.tab[aria-selected=true]:before{content:"";background:var(--color-accent);border-radius:3px;width:3px;position:absolute;top:10px;bottom:10px;left:0}.tabhint{font-size:var(--text-xs);color:var(--color-neutral);justify-content:space-between;padding:6px 12px 10px;display:flex}.tnext{margin-top:var(--space-lg);border:1.5px solid var(--color-rule);background:var(--color-paper);border-radius:var(--radius-pill);font-weight:600;font-size:var(--text-sm);cursor:pointer;transition:border-color var(--dur-short),transform var(--dur-short) var(--ease-out);align-items:center;gap:8px;padding:9px 16px;display:inline-flex}.tnext:hover{border-color:var(--color-accent);transform:translate(3px)}.tpanel{gap:var(--space-xl);padding:var(--space-xl);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:360px;display:grid}.tpanel .st{opacity:0;transition:opacity .36s var(--ease-out),transform .52s var(--ease-out);transition-delay:calc(var(--d,0) * 45ms);transform:translateY(12px)}.tpanel.show .st{opacity:1;transform:none}.tpanel.leave .st{opacity:0;transition:opacity .16s var(--ease-in),transform .16s var(--ease-in);transition-delay:0s;transform:translateY(-8px)}.tprev{transition:background var(--dur-short)}.ticon{border-radius:var(--radius-md);background:var(--color-accent-soft);width:48px;height:48px;color:var(--color-accent-deep);margin-bottom:var(--space-md);place-items:center;display:grid}.tcopy h3{font-size:var(--text-2xl)}.tcopy p{color:var(--color-muted);margin:8px 0 var(--space-md)}.tcopy ul{font-size:var(--text-sm);gap:8px;margin:0;padding:0;list-style:none;display:grid}.tcopy li{align-items:start;gap:8px;display:flex}.tcopy li svg{color:var(--color-accent);flex:none;margin-top:4px}.tprev{background:var(--color-paper-2);border-radius:var(--radius-md);padding:var(--space-lg);align-content:center;gap:8px;min-height:280px;display:grid}.tprev .say{font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:6px;font-size:1.2rem;font-weight:700;line-height:1.25}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.rules{padding:var(--space-4xl) 0}.rgrid{gap:var(--space-md);margin-top:var(--space-2xl);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.rule{background:var(--color-night-2);border:1px solid var(--color-night-rule);border-radius:var(--radius-md);padding:var(--space-lg);gap:var(--space-sm);transition:transform var(--dur-short) var(--ease-out),border-color var(--dur-short),background var(--dur-short),opacity var(--dur-long) var(--ease-out);flex-direction:column;display:flex}.rule:hover{background:var(--color-night-3);border-color:oklch(50% .08 158);transform:translateY(-4px)}.rule .ri{background:var(--color-night-3);width:40px;height:40px;color:var(--color-ok);transition:transform var(--dur-long) var(--ease-spring),background var(--dur-short);border-radius:12px;place-items:center;display:grid}.rule:hover .ri{background:var(--color-accent);color:var(--color-on-dark);transform:rotate(-8deg)scale(1.08)}.rule:hover .switch:after{transform:translate(-2px)}.switch:after{transition:transform var(--dur-short) var(--ease-spring)}.rgrid .rule{opacity:0;transform:translateY(24px)}.rgrid.in .rule{opacity:1;transform:none}.rgrid.in .rule:hover{transform:translateY(-4px)}.rule .top{justify-content:space-between;align-items:start;gap:var(--space-md);display:flex}.rule h3{font-size:var(--text-lg);letter-spacing:-.02em}.rule p{color:var(--color-night-dim);font-size:var(--text-sm);margin:0}.switch{border-radius:var(--radius-pill);background:var(--color-accent);cursor:pointer;border:0;flex:none;width:50px;height:30px;position:relative}.switch:after{content:"";background:var(--color-on-dark);border-radius:50%;width:24px;height:24px;position:absolute;top:3px;right:3px}.switch.nope{animation:nope .38s var(--ease-out)}@keyframes nope{20%{transform:translate(-5px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.tip{background:var(--color-on-dark);color:var(--color-night);font-size:var(--text-xs);white-space:nowrap;opacity:0;transition:all var(--dur-short) var(--ease-out);pointer-events:none;border-radius:8px;padding:6px 10px;font-weight:600;position:absolute;bottom:calc(100% + 8px);right:0;transform:translateY(4px)}.switch.nope .tip{opacity:1;transform:none}[data-rise]{will-change:transform,opacity}@media (prefers-reduced-motion:reduce){.pin,.htrack-wrap{height:auto}.pin__stage,.hstage{height:auto;padding:var(--space-4xl) 0;position:relative}.htrack{padding:0 var(--space-lg);flex-wrap:wrap;transform:none!important}.guide svg{animation:none}}@media (width<=900px){.panel{grid-template-columns:minmax(0,1fr)}.pside{display:none}.sdlab{grid-template-columns:repeat(3,minmax(0,1fr))}.story__grid,.dgrid,.tpanel,.rgrid,.tbox{grid-template-columns:minmax(0,1fr)}.tabs{border-right:0;border-bottom:1px solid var(--color-rule);grid-auto-flow:column;overflow-x:auto}}.foot .tl{margin-bottom:var(--space-lg)}
