:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#07080d;--surface:#10131c;--surface-2:#161a26;--border:#232839;--text:#e6edf3;--muted:#8b949e;--accent:#ff4f9a;--accent-2:#b48bff;--log:#e6edf3;--info:#58a6ff;--debug:#8b949e;--warn:#e3b341;--error:#ff7b72;--radius:14px;--mono:"JetBrains Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(1200px 600px at 80% -10%, #b48bff24, transparent 60%), radial-gradient(900px 500px at 0% 0%, #ff4f9a1f, transparent 60%), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:16px/1.6 Inter,system-ui,sans-serif}a{color:var(--text)}code,kbd{font-family:var(--mono);font-size:.9em}p code{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:.05em .35em}kbd{border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 .3em}.nav{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#07080dbf;justify-content:space-between;align-items:center;gap:16px;padding:14px max(16px,50vw - 600px);display:flex;position:sticky;top:0}.brand{letter-spacing:-.02em;align-items:center;gap:10px;font-weight:800;text-decoration:none;display:flex}.nav nav{gap:20px;display:flex;overflow-x:auto}.nav nav a{color:var(--muted);white-space:nowrap;font-size:15px;font-weight:500;text-decoration:none}.nav nav a:hover{color:var(--text)}main{max-width:1200px;margin:0 auto;padding:0 16px}.hero{text-align:center;padding:72px 0 40px}.eyebrow{border:1px solid var(--border);color:var(--muted);border-radius:999px;margin:0 0 18px;padding:4px 12px;font-size:14px;font-weight:500;display:inline-block}h1{letter-spacing:-.035em;margin:0;font-size:clamp(36px,6vw,64px);font-weight:800;line-height:1.05}.accent{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text}.lede{max-width:640px;color:var(--muted);margin:20px auto 28px;font-size:18px}.install{background:var(--surface);border:1px solid var(--border);border-radius:12px;align-items:center;gap:4px;max-width:100%;padding:6px 6px 6px 18px;display:inline-flex}.install code{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.install code:before{content:"$ ";color:var(--muted)}button{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:9px;padding:7px 12px;transition:border-color .15s,background .15s,transform 50ms}button:hover{background:#1c2130;border-color:#3a4160}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[data-copy].copied:after{content:" ✓";color:#3fd68f}.playground{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:16px;display:grid}.stage-column{min-width:0}.stage-frame{border-radius:var(--radius);background:linear-gradient(135deg, #ff4f9a99, #b48bff4d 40%, var(--border));padding:1px;box-shadow:0 30px 80px -30px #ff4f9a59}.stage{aspect-ratio:16/10;border-radius:calc(var(--radius) - 1px);background:#0b0d14;overflow:hidden}.stage canvas{touch-action:none;width:100%;height:100%;display:block}.stage-hint{color:var(--muted);margin:12px 4px 0;font-size:14px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:18px;padding:18px;display:flex}.panel h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px;font-size:13px}.buttons{flex-wrap:wrap;gap:6px;display:flex}.buttons button{padding:6px 10px;font-size:13px}.buttons button[class^=lvl-]{font-family:var(--mono);border-left-width:3px}.buttons button.line{font-family:var(--mono)}.buttons button.line:before{content:"> ";color:var(--info)}.buttons button:disabled{color:var(--muted);cursor:default;opacity:.6}.buttons button:disabled:hover{border-color:var(--border);background:var(--surface-2)}.note{color:var(--muted);margin:10px 0 0;font-size:13px;line-height:1.5}#settings .note{margin-top:2px}.lvl-log{border-left-color:var(--log)!important}.lvl-info{border-left-color:var(--info)!important}.lvl-debug{border-left-color:var(--debug)!important}.lvl-warn{border-left-color:var(--warn)!important}.lvl-error{border-left-color:var(--error)!important}#settings{flex-direction:column;gap:8px;display:flex}.segmented{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;gap:0;margin:0 0 4px;padding:3px;display:flex}.segmented legend{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.segmented label{text-align:center;font-family:var(--mono);color:var(--muted);cursor:pointer;border-radius:7px;flex:1;padding:5px 0;font-size:13px}.segmented label:has(input:checked){color:var(--text);background:#262c40}.segmented label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}.segmented input{opacity:0;pointer-events:none;position:absolute}.switch{font-family:var(--mono);cursor:pointer;align-items:center;gap:10px;font-size:13px;display:flex}.switch input{accent-color:var(--accent);width:16px;height:16px}.switch:has(input:disabled){color:var(--muted);cursor:default}.option{font-family:var(--mono);justify-content:space-between;align-items:center;gap:10px;font-size:13px;display:flex}.option .segmented{flex:0 190px;margin:0}.option .segmented label{padding:2px 0}.code{border:1px solid var(--border);font-family:var(--mono);background:#0b0d14;border-radius:12px;margin:0;padding:16px 18px;font-size:13.5px;line-height:1.65;overflow-x:auto}.snippet{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px}.tok-keyword{color:#ff7ab6}.tok-string{color:#a5d6ff}.tok-type{color:#d2a8ff}.tok-comment{color:var(--muted)}.features{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:72px 0 24px;display:grid}.features article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}.features .feature-wide{grid-column:1/-1}.features h3{letter-spacing:-.01em;margin:0 0 8px;font-size:17px}.features p{color:var(--muted);margin:0;font-size:15px}.usage{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:48px 0 24px;display:grid}.usage h2{letter-spacing:-.02em;margin:0 0 14px;font-size:24px}.muted{color:var(--muted)}.footer{text-align:center;color:var(--muted);padding:48px 16px 64px;font-size:14px}.footer a{color:var(--muted)}@media (min-width:961px) and (min-height:700px){.stage-column{position:sticky;top:72px}}@media (max-width:960px){.playground,.usage{grid-template-columns:minmax(0,1fr)}.features{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:620px){.hero{padding-top:48px}.features{grid-template-columns:minmax(0,1fr)}.stage{aspect-ratio:3/4}.nav nav a:not(.nav-github):not([href="./api/"]){display:none}}body.recording{background:#0b0d14;margin:0}body.recording canvas{display:block}