.playground[data-v-71ed039c]{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"stage inspector""code inspector";align-items:start;gap:20px;display:grid}.stage[data-v-71ed039c]{grid-area:stage;min-width:0}.artboard[data-v-71ed039c]{background-color:var(--paper);background-image:radial-gradient(var(--paper-dot) 1px, transparent 1px);border-radius:var(--radius);border:1px solid var(--line);background-size:20px 20px;padding:0;overflow:hidden}canvas[data-v-71ed039c]{touch-action:none;width:100%;height:560px;display:block}.statusbar[data-v-71ed039c]{font-family:var(--font-mono);color:var(--ink-mid);align-items:baseline;gap:22px;padding:10px 4px;font-size:12.5px;display:flex}.stat-num[data-v-71ed039c]{color:var(--ink-hi);font-weight:600}.clip[data-v-71ed039c]{color:var(--ink-low)}.clip.on[data-v-71ed039c]{color:var(--amber)}.time[data-v-71ed039c]{color:var(--ink-low);margin-left:auto}.unit[data-v-71ed039c]{color:var(--ink-low)}.inspector[data-v-71ed039c]{background:var(--chrome-1);border:1px solid var(--line-soft);border-radius:var(--radius);grid-area:inspector;padding:6px 16px 16px;position:sticky;top:16px}.group[data-v-71ed039c]{border-bottom:1px solid var(--line-soft);padding:14px 0}.group-title[data-v-71ed039c]{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-low);margin-bottom:10px;font-size:11px;font-weight:600}.text-input[data-v-71ed039c]{background:var(--chrome-2);border:1px solid var(--line);width:100%;color:var(--ink-hi);font-family:var(--font-ui);resize:vertical;border-radius:6px;padding:8px 10px;font-size:13.5px}.row[data-v-71ed039c]{align-items:center;gap:10px;padding:4px 0;font-size:13px;display:flex}.row-label[data-v-71ed039c]{font-family:var(--font-mono);color:var(--ink-mid);flex:0 0 92px;font-size:12px}.row input[type=range][data-v-71ed039c]{appearance:none;background:var(--chrome-3);border-radius:2px;flex:1;min-width:0;height:3px}.row input[type=range][data-v-71ed039c]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink-hi);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px}.row input[type=range][data-v-71ed039c]::-moz-range-thumb{background:var(--ink-hi);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px}.num[data-v-71ed039c]{background:var(--chrome-2);border:1px solid var(--line);width:56px;color:var(--ink-hi);font-family:var(--font-mono);text-align:right;border-radius:5px;padding:3px 6px;font-size:12px}.select[data-v-71ed039c]{background:var(--chrome-2);border:1px solid var(--line);color:var(--ink-hi);font-family:var(--font-mono);border-radius:5px;flex:1;padding:5px 6px;font-size:12px}.seg[data-v-71ed039c]{background:var(--chrome-2);border:1px solid var(--line);border-radius:6px;flex:1;gap:2px;padding:2px;display:flex}.seg button[data-v-71ed039c]{font-family:var(--font-mono);color:var(--ink-mid);border-radius:4px;flex:1;padding:4px 0;font-size:11.5px}.seg button[data-v-71ed039c]:hover{color:var(--ink-hi)}.seg button.on[data-v-71ed039c]{background:var(--accent-soft);color:var(--accent)}.check[data-v-71ed039c]{color:var(--ink-mid);cursor:pointer;gap:8px;font-size:13px}.check input[data-v-71ed039c]{accent-color:var(--accent)}.swatch[data-v-71ed039c]{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:5px;width:28px;height:22px;padding:0}.mono-val[data-v-71ed039c]{font-family:var(--font-mono);color:var(--ink-low);font-size:12px}.reset[data-v-71ed039c]{width:100%;font-family:var(--font-mono);color:var(--ink-mid);border:1px solid var(--line);border-radius:6px;margin-top:14px;padding:8px 0;font-size:12.5px}.reset[data-v-71ed039c]:hover{color:var(--ink-hi);border-color:var(--ink-low)}.codestrip[data-v-71ed039c]{flex-direction:column;grid-area:code;gap:12px;min-width:0;display:flex}.install[data-v-71ed039c]{background:var(--chrome-1);border:1px solid var(--line-soft);border-radius:var(--radius);font-family:var(--font-mono);align-items:center;gap:12px;padding:10px 14px;font-size:13.5px;display:flex}.install code[data-v-71ed039c]:before{content:"$ ";color:var(--ink-low)}.codeblock[data-v-71ed039c]{background:var(--chrome-1);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}.codeblock-head[data-v-71ed039c]{border-bottom:1px solid var(--line-soft);font-family:var(--font-mono);letter-spacing:.05em;color:var(--ink-low);justify-content:space-between;align-items:center;padding:8px 14px;font-size:11.5px;display:flex}.codeblock pre[data-v-71ed039c]{font-family:var(--font-mono);color:var(--ink-hi);padding:14px 16px;font-size:13px;line-height:1.55;overflow-x:auto}.copy[data-v-71ed039c]{font-family:var(--font-mono);color:var(--accent);border:1px solid var(--line);border-radius:5px;margin-left:auto;padding:3px 10px;font-size:11.5px}.copy[data-v-71ed039c]:hover{border-color:var(--accent)}@media (width<=900px){.playground[data-v-71ed039c]{grid-template-columns:1fr;grid-template-areas:"stage""inspector""code"}.inspector[data-v-71ed039c]{position:static}}.page[data-v-e701f713]{flex-direction:column;min-height:100vh;display:flex}.titlebar[data-v-e701f713]{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;padding:14px 28px;display:flex}.brand[data-v-e701f713]{font-family:var(--font-mono);align-items:baseline;gap:10px;font-size:14px;display:flex}.brand-mark[data-v-e701f713]{border:1.5px solid var(--accent);align-self:center;width:10px;height:10px}.brand-name[data-v-e701f713]{letter-spacing:.02em;font-weight:600}.brand-ver[data-v-e701f713]{color:var(--ink-low);font-size:12px}.titlebar-nav[data-v-e701f713]{font-family:var(--font-mono);gap:22px;font-size:13px;display:flex}.titlebar-nav a[data-v-e701f713]{color:var(--ink-mid);text-decoration:none}.titlebar-nav a[data-v-e701f713]:hover{color:var(--ink-hi)}main[data-v-e701f713]{flex:1;width:min(1180px,100%);margin:0 auto;padding:0 28px}.hero[data-v-e701f713]{max-width:720px;padding:64px 0 40px}.eyebrow[data-v-e701f713]{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-size:12px}.headline[data-v-e701f713]{font-family:var(--font-display);letter-spacing:-.015em;font-size:clamp(40px,6.5vw,68px);font-weight:500;line-height:1.04}.headline em[data-v-e701f713]{color:var(--amber);font-style:italic;font-weight:400}.lede[data-v-e701f713]{color:var(--ink-mid);max-width:58ch;margin-top:22px;font-size:17px}.notes[data-v-e701f713]{background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);grid-template-columns:repeat(3,1fr);gap:1px;margin:56px 0 72px;display:grid;overflow:hidden}.note[data-v-e701f713]{background:var(--chrome-1);padding:26px 24px}.note h2[data-v-e701f713]{font-family:var(--font-display);margin-bottom:10px;font-size:19px;font-weight:500}.note p[data-v-e701f713]{color:var(--ink-mid);font-size:14px}.note code[data-v-e701f713]{font-family:var(--font-mono);color:var(--ink-hi);background:var(--chrome-2);border-radius:4px;padding:1px 5px;font-size:12.5px}.footer[data-v-e701f713]{border-top:1px solid var(--line-soft);color:var(--ink-low);font-size:13px;font-family:var(--font-mono);justify-content:space-between;padding:18px 28px;display:flex}.footer a[data-v-e701f713]{color:var(--ink-mid)}@media (width<=900px){.notes[data-v-e701f713]{grid-template-columns:1fr}.hero[data-v-e701f713]{padding-top:44px}}:root{--chrome-0:#14161b;--chrome-1:#1b1e25;--chrome-2:#232730;--chrome-3:#2b303b;--line:#2e333d;--line-soft:#262b34;--ink-hi:#e9ebee;--ink-mid:#9aa1ac;--ink-low:#6a7280;--paper:#fafaf7;--paper-dot:#d9d9d2;--paper-ink:#17191c;--accent:#0c8ce9;--accent-soft:#0c8ce924;--amber:#e8a33d;--font-display:"Fraunces", "Iowan Old Style", Georgia, serif;--font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--font-ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--radius:8px}*{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--chrome-0);color:var(--ink-hi);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6}::selection{background:var(--accent);color:#fff}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}