:root{--bg: #070d1c;--panel: #0b1226cc;--ink: #e8f4ff;--dim: #8fa6c4;--line: #ffffff1c;--accent: #6ef0d0;--side: 340px;--radius: 14px;--bw: 1px;--code: #ffffff14;--fs-bg: #0b1226aa;--stage-bg: radial-gradient(ellipse at 20% 20%, #1c8f8a55 0%, #0000 50%), radial-gradient(ellipse at 80% 70%, #6a3dd155 0%, #0000 55%), var(--bg);--font-body: "Chakra Petch", system-ui, sans-serif;--font-mono: "Share Tech Mono", monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font-body);overflow:hidden}body{display:grid;grid-template-columns:var(--side) 1fr}a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}a:hover{color:var(--accent)}#sidebar{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:flex;flex-direction:column;background:var(--panel);border-right:var(--bw) solid var(--line);min-height:0;z-index:2}#side-body{flex:1;min-height:0;display:flex;flex-direction:column}#home-only{overflow-y:auto;padding:32px 28px 16px}#demo-only{flex:1;min-height:0;display:flex;flex-direction:column}#demo-head{flex:none;padding:28px 28px 14px;border-bottom:var(--bw) solid var(--line)}#demo-text{flex:1;min-height:0;overflow-y:auto;padding:0 28px 16px}.eyebrow{font:12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}h1{font-size:44px;line-height:1;margin:0 0 18px;letter-spacing:-.02em}h2{font-size:28px;line-height:1.1;margin:14px 0 0;letter-spacing:-.01em}h3{font:12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:22px 0 6px}p{margin:0 0 12px;color:var(--dim)}ul{margin:0;padding-left:18px;color:var(--dim)}li{margin-bottom:6px}#home-list{list-style:none;padding:0;margin-top:20px}#home-list a{position:relative;display:block;padding:10px 0;border-top:var(--bw) solid var(--line);color:var(--dim);text-decoration:none;transition:color .25s,transform .3s cubic-bezier(.2,.8,.2,1),letter-spacing .3s}#home-list a:after{content:"";position:absolute;left:0;top:calc(var(--bw) * -1);height:var(--bw);width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}#home-list a.active,#home-list a:focus-visible{color:var(--c);transform:translate(10px);letter-spacing:.02em;outline:none}#home-list a.active:after,#home-list a:focus-visible:after{transform:scaleX(1)}#back{font:13px var(--font-mono);color:var(--dim);text-decoration:none}#back:hover{color:var(--accent)}code{font:13px var(--font-mono);background:var(--code);padding:1px 5px;border-radius:calc(var(--radius) / 1.5);color:var(--ink)}#demo-text{transition:opacity .25s,transform .25s}#demo-text.swap{opacity:0;transform:translateY(6px)}#credit{padding:14px 28px 18px;border-top:var(--bw) solid var(--line);font-size:13px}#credit p{margin:0 0 6px}#credit .made{font:12px var(--font-mono)}body.demo #home-only,body.demo #home-canvas,body.demo #home-hint{display:none}body:not(.demo) #demo-only,body:not(.demo) #frame,body:not(.demo) #fs{display:none}#stage{position:relative;min-width:0;min-height:0;background:var(--stage-bg);overflow:hidden}#home-canvas,#frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;display:block}#home-canvas{cursor:grab;touch-action:none}#home-canvas.grabbing{cursor:grabbing}#home-canvas.pointer{cursor:pointer}#frame{background:#000}#home-hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;font:12px var(--font-mono);letter-spacing:.1em;color:var(--dim);pointer-events:none}.nojs{padding:24px}#fs{position:absolute;top:14px;right:14px;z-index:4;width:38px;height:38px;display:grid;place-items:center;border:var(--bw) solid #ffffff30;border-radius:var(--radius);background:var(--fs-bg);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:background .2s,border-color .2s}#fs:hover{background:var(--accent);border-color:var(--accent)}#fs .exit{display:none}#stage:fullscreen #fs .exit{display:inline}#stage:fullscreen #fs .enter{display:none}#stage:fullscreen #frame{top:0;right:0;bottom:0;left:0}#loader{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:var(--bg);font:13px var(--font-mono);color:var(--dim);transition:opacity .5s;pointer-events:none}#loader.done{opacity:0}#loader .bar{width:180px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}#loader .bar i{display:block;width:40%;height:100%;background:var(--accent);border-radius:2px;animation:slide 1.1s ease-in-out infinite}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(max-width:800px){body{grid-template-columns:1fr;grid-template-rows:minmax(0,38vh) 1fr}#sidebar{border-right:0;border-bottom:var(--bw) solid var(--line)}#home-only{padding:18px 18px 8px}#demo-head{padding:14px 18px 10px}#demo-text{padding:0 18px 8px}h1{font-size:32px}#credit{padding:10px 18px}}@media(prefers-reduced-motion:reduce){#home-list a,#home-list a:after{transition:none}#loader .bar i{animation:none;width:100%}#demo-text{transition:none}}body.thumb{grid-template-columns:1fr;grid-template-rows:1fr}body.thumb #sidebar,body.thumb #fs,body.thumb #home-hint{display:none}