:root{--canvas: #fbfaf9;--stone: #f2f0ed;--sand: #f6f4ef;--white: #ffffff;--ink: #121212;--charcoal: #343433;--brown: #474645;--muted: #7e7e7d;--ember: #ff3e00;--blue: #0086fc;--grass: #00c978;--honey: #ffbb26;--sun: #ffcd6c;--coral: #ff58ae;--sky: #64c6ff;--hairline: inset 0 0 0 1px var(--stone);--ease: cubic-bezier(.2, 0, 0, 1);--mono: ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:gray transparent}html,body{margin:0}body{display:grid;place-items:center;min-height:100dvh;overflow-x:clip;background:var(--canvas);color:var(--brown);font:400 13.5px/1.5 Inter,system-ui,sans-serif;letter-spacing:-.013em;-webkit-font-smoothing:antialiased}::selection{background:#ffbb2659}:focus-visible{outline:1.5px solid var(--blue);outline-offset:2px;border-radius:6px}main{position:relative;max-width:480px;width:100%;padding:40px 20px 36px}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}section,header,footer{animation:rise .5s var(--ease) backwards;animation-delay:calc(var(--i, 0) * 70ms)}.confetti{position:absolute;cursor:pointer;animation:float 5s ease-in-out infinite alternate}@keyframes float{0%{transform:translateY(0) rotate(var(--r, 0deg))}to{transform:translateY(-3px) rotate(var(--r, 0deg))}}.confetti.star{top:38px;left:120px;--r: -14deg}.confetti.heart{top:118px;right:4px;--r: 10deg;animation-delay:1.2s}.confetti.coin{bottom:66px;right:14px;--r: -6deg;animation-delay:2.1s}.confetti svg{display:block;transition:transform .24s cubic-bezier(.34,1.56,.64,1)}@media(hover:hover)and (pointer:fine){.confetti:hover svg{transform:scale(1.3) rotate(12deg)}}.confetti:active svg{transform:scale(.85)}.particle{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;pointer-events:none}header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}h1{font-size:21px;font-weight:600;letter-spacing:-.026em;color:var(--ink);margin:0;display:flex;align-items:center;gap:8px}.dot{width:8px;height:8px;border-radius:50%;background:var(--honey);box-shadow:inset 0 0 0 1px #34343340}.meta{font-size:11.5px;color:var(--muted);font-feature-settings:"tnum"}.tagline{margin:2px 0 26px;font-size:13.5px;color:var(--brown)}.tagline strong{color:var(--charcoal);font-weight:500}h2{font-size:12.5px;font-weight:500;letter-spacing:-.009em;color:var(--charcoal);margin:0 0 8px}h2 small{font-size:11px;font-weight:400;color:var(--muted);margin-left:8px}section{margin-bottom:26px}.scope{position:relative;background:repeating-linear-gradient(90deg,transparent 0 27px,rgba(0,0,0,.02) 27px 28px),var(--white);border-radius:10px;box-shadow:var(--hairline);height:56px;margin-bottom:6px;overflow:hidden}.scope svg{position:absolute;inset:0;width:100%;height:100%}.scope .baseline{stroke:#e5d5c3;stroke-width:1;stroke-dasharray:1 5;vector-effect:non-scaling-stroke}.scope .trace{fill:none;stroke:var(--ember);stroke-width:1.5;vector-effect:non-scaling-stroke}.scope .echo{stroke-width:4.5;opacity:0}.readout .ro-name{transition:color .2s ease}.scope.preview .ro-name{color:var(--muted)}.readout{position:absolute;top:7px;right:10px;display:flex;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:0;color:var(--muted);font-feature-settings:"tnum"}.readout .ro-name{color:var(--ember)}.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}@media(max-width:400px){.palette{grid-template-columns:repeat(3,1fr)}}.chip{appearance:none;border:0;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--white);box-shadow:var(--hairline);border-radius:10px;padding:8px 0 7px;font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:-.006em;color:var(--brown);cursor:pointer;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .16s ease,color .16s ease}@media(hover:hover)and (pointer:fine){.chip:hover{color:var(--ink);transform:translateY(-1px);box-shadow:var(--hairline),0 1px 6px #0000000a,0 0 24px #0000000d}.chip:hover i{transform:scale(1.3)}}.chip:active,.chip.down{transform:translateY(0) scale(.95);box-shadow:var(--hairline);background:var(--sand)}.chip i{width:6px;height:6px;border-radius:50%;background:var(--c);transition:transform .2s var(--ease)}@keyframes pop{30%{transform:scale(1.6)}to{transform:scale(1)}}.chip.hit i{animation:pop .4s var(--ease)}.row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:46px;box-shadow:inset 0 -1px 0 var(--stone)}.row:first-of-type{box-shadow:inset 0 1px 0 var(--stone),inset 0 -1px 0 var(--stone)}.row-label{font-family:var(--mono);font-size:11px;color:var(--charcoal);white-space:nowrap}.row-hint{display:block;font-family:Inter,system-ui,sans-serif;font-size:10.5px;letter-spacing:-.006em;color:var(--muted)}.links{display:flex;gap:12px}.links span{font-size:12px;font-weight:500;color:var(--blue);cursor:default;transition:color .16s ease}@media(hover:hover)and (pointer:fine){.links span:hover{color:var(--ink)}}.btn{position:relative;appearance:none;border:0;background:var(--ink);border-radius:9999px;min-width:62px;height:27px;padding:0 14px;font:600 11.5px Inter,system-ui,sans-serif;letter-spacing:-.009em;color:var(--canvas);cursor:pointer;transition:transform .1s var(--ease)}.btn:active{transform:scale(.96)}.btn .face{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .22s var(--ease),filter .22s var(--ease)}.btn .face.alt{opacity:0;filter:blur(4px);color:var(--sun)}.btn.done .face.base{opacity:0;filter:blur(4px)}.btn.done .face.alt{opacity:1;filter:blur(0)}.switch{appearance:none;border:0;padding:2px;width:36px;height:21px;border-radius:9999px;background:var(--stone);box-shadow:inset 0 0 0 1px #0000000a;cursor:pointer;transition:background .2s ease,transform .1s var(--ease)}.switch:active{transform:scale(.96)}.switch[aria-checked=true]{background:var(--grass)}.switch .knob{display:block;width:17px;height:17px;border-radius:50%;background:var(--white);box-shadow:0 1px 2px #0000001f;transition:transform .18s var(--ease)}.switch[aria-checked=true] .knob{transform:translate(15px)}.command{display:flex;align-items:center;gap:10px;background:var(--white);box-shadow:var(--hairline);border-radius:10px;padding:7px 7px 7px 12px}.command .prompt{font-family:var(--mono);font-size:11.5px;color:var(--muted)}.command code{flex:1;font-family:var(--mono);font-size:11.5px;color:var(--ink)}.copy{position:relative;appearance:none;border:0;width:24px;height:24px;border-radius:6px;background:transparent;cursor:pointer;color:var(--muted);transition:transform .12s var(--ease),color .16s ease,background .16s ease}@media(hover:hover)and (pointer:fine){.copy:hover{background:var(--sand);color:var(--charcoal)}}.copy:active{transform:scale(.92)}.copy svg{position:absolute;inset:0;margin:auto;transition:opacity .22s var(--ease),transform .22s var(--ease),filter .22s var(--ease)}.copy .icon-check{opacity:0;transform:scale(.25);filter:blur(4px);color:var(--grass)}.copy.copied .icon-copy{opacity:0;transform:scale(.25);filter:blur(4px)}.copy.copied .icon-check{opacity:1;transform:scale(1);filter:blur(0)}.code-card{background:var(--white);box-shadow:var(--hairline);border-radius:10px;overflow:hidden}.code-head{display:flex;align-items:center;justify-content:space-between;padding:5px 6px 5px 5px;box-shadow:inset 0 -1px 0 var(--stone)}.tabs{display:flex;gap:2px}.tab{appearance:none;border:0;background:transparent;border-radius:6px;padding:4px 9px;font-family:var(--mono);font-size:10.5px;color:var(--muted);cursor:pointer;transition:background .16s ease,color .16s ease,transform .1s var(--ease)}.tab:active{transform:scale(.96)}@media(hover:hover)and (pointer:fine){.tab:hover{color:var(--charcoal)}}.tab.active{background:var(--sand);color:var(--ink)}.panes{display:grid;min-height:128px}.code{grid-area:1 / 1;padding:14px 15px;margin:0;overflow-x:auto;font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--charcoal);opacity:0;filter:blur(3px);pointer-events:none;transition:opacity .2s var(--ease),filter .2s var(--ease)}.code.active{opacity:1;filter:blur(0);pointer-events:auto}.code .k{color:var(--muted)}.code .s{color:var(--ember)}.code .c{color:#b5b2ae}footer{margin-top:30px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}footer a{color:var(--ember);text-decoration:underline;text-underline-offset:2px;transition:color .16s ease}@media(hover:hover)and (pointer:fine){footer a:hover{color:var(--ink)}}@media(prefers-reduced-motion:reduce){section,header,footer,.confetti{animation:none}.chip:active,.btn:active,.switch:active,.copy:active{transform:none}.btn .face,.copy svg{transition:opacity .2s ease;filter:none;transform:none}.code{transition:opacity .2s ease;filter:none}.chip:hover{transform:none}.scope.settled .trace{transform:none;opacity:0;transition:opacity .4s ease .3s}.confetti:hover svg,.confetti:active svg{transform:none}}