:root{--font-sans:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;--color-ink:#e9f2ef;--color-muted:#8b9c97;--color-faint:#5b6a66;--color-readout:#f2bb55;--color-accent:#25d39b;--color-surface:#060c0aa8;--color-surface-raised:#0e1815cc;--color-hairline:#aaffe11a;--color-hairline-strong:#aaffe138;--text-xs:.6875rem;--text-sm:.8125rem;--text-base:.9375rem;--text-hero:clamp(3.25rem, 1.5rem + 7vw, 7.5rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--gutter:clamp(1rem, .5rem + 2vw, 2rem);--radius-panel:14px;--radius-control:4px;--duration-fast:.14s;--duration-morph:.56s;--pill-height:40px;--pill-radius:20px;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;color:var(--color-ink);font-family:var(--font-sans);font-size:var(--text-base);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#000;margin:0}#field,.masthead{touch-action:none}#field{width:100%;height:100%;display:block;position:fixed;inset:0}.layout{gap:var(--gutter);min-height:100svh;padding:var(--gutter);pointer-events:none;grid-template:"masthead console"1fr"install console"/minmax(0,1fr) 320px;display:grid;position:relative}.layout>*{pointer-events:auto}.masthead{grid-area:masthead;align-self:start;max-width:34rem}.eyebrow{margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-readout)}h1{font-size:var(--text-hero);letter-spacing:-.045em;text-shadow:0 2px 40px #000c;margin:0;font-weight:500;line-height:.88}.lede{margin:var(--space-4) 0 var(--space-6);max-width:26ch;color:var(--color-muted);font-size:1.125rem;line-height:1.4}.presets{gap:var(--space-2);flex-wrap:wrap;display:flex}.github-link{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);padding:10px var(--space-2) 10px var(--space-4);border:1px solid var(--color-hairline-strong);color:var(--color-ink);font:500 var(--text-base) var(--font-sans);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);background:#00000073;border-radius:999px;text-decoration:none;display:inline-flex}.github-link svg{fill:currentColor;width:18px;height:18px}.github-link:hover{border-color:var(--color-accent);box-shadow:0 0 18px -4px var(--color-accent)}.github-link:active{transform:scale(.97)}.github-stars{margin-left:var(--space-1);padding:2px var(--space-3);color:var(--color-readout);font:500 var(--text-sm) / 1 var(--font-mono);font-variant-numeric:tabular-nums;background:#ffffff14;border-radius:999px;align-items:center;gap:5px;display:inline-flex}.github-stars .star-icon{fill:currentColor;flex:none;width:12px;height:12px}.github-stars[hidden]{display:none}.preset{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-hairline-strong);color:var(--color-ink);font:500 var(--text-sm) var(--font-sans);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);background:#0006;border-radius:999px;display:inline-flex}.preset:before{content:"";background:var(--swatch);width:8px;height:8px;box-shadow:0 0 10px var(--swatch);border-radius:50%}.preset:hover{border-color:var(--swatch)}.preset:active{transform:scale(.96)}.preset[aria-pressed=true]{border-color:var(--swatch);background:#ffffff0f}.console,.install{border:1px solid var(--color-hairline);border-radius:var(--radius-panel);background:var(--color-surface);-webkit-backdrop-filter:blur(14px)saturate(1.2);backdrop-filter:blur(14px)saturate(1.2);box-shadow:inset 0 1px #ffffff0a}.panel{clip-path:inset(0 0 0 0 round var(--radius-panel));transition:clip-path var(--duration-morph) var(--ease-out-expo);position:relative}.panel:not([data-ready]),.panel:not([data-ready]) *{transition:none!important}.panel[data-state=collapsed]{clip-path:inset(var(--clip-top) var(--clip-right) var(--clip-bottom) var(--clip-left) round var(--pill-radius))}.panel-content{touch-action:pan-x pan-y pinch-zoom;transition:opacity var(--duration-fast) ease .12s}.panel[data-state=collapsed] .panel-content{opacity:0;transition-delay:0s}.panel-pill{align-items:center;gap:var(--space-2);height:var(--pill-height);padding:0 var(--space-4) 0 var(--space-3);border:1px solid var(--color-hairline-strong);border-radius:var(--pill-radius);background:var(--color-surface-raised);color:var(--color-ink);font:500 var(--text-sm) var(--font-sans);white-space:nowrap;cursor:pointer;opacity:0;transition:opacity var(--duration-fast) ease, border-color var(--duration-fast);display:inline-flex;position:absolute}.panel[data-corner=top-right] .panel-pill{top:0;right:0}.panel[data-corner=bottom-left] .panel-pill{bottom:0;left:0}.panel[data-corner=bottom-right] .panel-pill{bottom:0;right:0}.panel[data-state=collapsed] .panel-pill{opacity:1;transition-delay:.2s,0s}.panel[data-state=expanded] .panel-pill{pointer-events:none}.panel-pill:hover{border-color:var(--color-accent)}.panel-pill:active{transform:scale(.97)}.panel-pill svg,.icon-button svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.head-actions{align-items:center;gap:var(--space-2);display:flex}.icon-button{width:28px;height:28px;color:var(--color-muted);cursor:pointer;transition:color var(--duration-fast), border-color var(--duration-fast);background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;padding:0;display:inline-grid}.icon-button:hover{border-color:var(--color-hairline-strong);color:var(--color-ink)}h2{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);margin:0;font-weight:500}.console{top:var(--gutter);grid-area:console;align-self:start;position:sticky}.console .panel-content{max-height:calc(100svh - 2 * var(--gutter) - 2px);padding:var(--space-4) var(--space-4) var(--space-2);scrollbar-width:thin;overflow-y:auto}.console-head{margin-bottom:var(--space-2);justify-content:space-between;align-items:center;display:flex}.group{padding:var(--space-3) 0;border-top:1px solid var(--color-hairline)}.group-title{margin:0 0 var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-faint)}.slider{align-items:baseline;gap:0 var(--space-2);padding:var(--space-1) 0;grid-template-columns:1fr auto;display:grid}.slider label{font-size:var(--text-sm);color:var(--color-ink)}.readout{font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--color-readout)}input[type=range]{touch-action:none;--thumb-width:10px;--thumb-height:14px;appearance:none;cursor:pointer;background:0 0;grid-column:1/-1;width:100%;height:18px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-accent) 0 var(--fill,50%), var(--color-hairline-strong) var(--fill,50%) 100%);height:2px}input[type=range]::-moz-range-track{background:var(--color-hairline-strong);height:2px}input[type=range]::-moz-range-progress{background:var(--color-accent);height:2px}input[type=range]::-webkit-slider-thumb{width:var(--thumb-width);height:var(--thumb-height);margin-top:calc(1px - var(--thumb-height) / 2);background:var(--color-ink);appearance:none;transition:transform var(--duration-fast) var(--ease-out-expo);border:0;border-radius:2px}input[type=range]::-moz-range-thumb{width:var(--thumb-width);height:var(--thumb-height);background:var(--color-ink);border:0;border-radius:2px}input[type=range]:hover::-webkit-slider-thumb{background:var(--color-accent);transform:scaleY(1.25)}input[type=range]:active::-webkit-slider-thumb{background:var(--color-accent);transform:scaleY(1.25)}.swatches{gap:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid}.swatch{gap:var(--space-1);font-size:var(--text-xs);color:var(--color-muted);display:grid}input[type=color]{border:1px solid var(--color-hairline-strong);border-radius:var(--radius-control);cursor:pointer;background:0 0;width:100%;height:30px;padding:2px}.toggle{padding:var(--space-2) 0;font-size:var(--text-sm);cursor:pointer;justify-content:space-between;align-items:center;display:flex}.toggle input{background:var(--color-hairline-strong);appearance:none;cursor:pointer;width:30px;height:16px;transition:background var(--duration-fast);border-radius:999px;margin:0;position:relative}.toggle input:after{content:"";background:var(--color-ink);width:12px;height:12px;transition:transform var(--duration-fast) var(--ease-out-expo);border-radius:50%;position:absolute;top:2px;left:2px}.toggle input:checked{background:var(--color-accent)}.toggle input:checked:after{background:#000;transform:translate(14px)}.install{grid-area:install;align-self:end;width:min(100%,38rem)}.install .panel-content{padding:var(--space-4)}.install-head{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.tabs{background:#00000080;border-radius:8px;gap:2px;padding:2px;display:flex}.tab{padding:var(--space-1) var(--space-3);color:var(--color-muted);font:500 var(--text-sm) var(--font-sans);cursor:pointer;transition:color var(--duration-fast), background var(--duration-fast);background:0 0;border:0;border-radius:6px}.tab:hover{color:var(--color-ink)}.tab[aria-selected=true]{background:var(--color-surface-raised);color:var(--color-ink);box-shadow:0 0 0 1px var(--color-hairline-strong) inset}.code-wrap{position:relative}pre{-webkit-user-select:text;user-select:text;height:13.5rem;padding:var(--space-4);font:400 var(--text-sm) / 1.6 var(--font-mono);color:#cfe3dc;white-space:pre;background:#0000008c;border-radius:10px;margin:0;padding-top:2.75rem;overflow:auto}.copy{top:var(--space-2);right:var(--space-2);position:absolute}.copy,.ghost{padding:var(--space-1) var(--space-3);border:1px solid var(--color-hairline-strong);background:var(--color-surface-raised);color:var(--color-ink);font:500 var(--text-xs) var(--font-mono);letter-spacing:.04em;cursor:pointer;transition:border-color var(--duration-fast), color var(--duration-fast);border-radius:6px}.copy:hover,.ghost:hover{border-color:var(--color-accent)}.copy[data-copied=true]{border-color:var(--color-accent);color:var(--color-accent)}.share{margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--color-muted)}.link{color:var(--color-accent);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:0;position:absolute;top:0;left:0;overflow:hidden}@media (width<=860px){.layout{min-height:100svh;padding-top:clamp(var(--gutter), 30svh - 3rem, 30svh);padding-bottom:calc(var(--pill-height) + 2 * var(--gutter));display:block}.panel{z-index:10;left:var(--gutter);right:var(--gutter);bottom:calc(var(--gutter) + env(safe-area-inset-bottom));background:#060c0ae0;width:auto;position:fixed}.panel[data-state=expanded]{z-index:20}.panel .panel-content{overscroll-behavior:contain;max-height:min(72svh,640px);overflow-y:auto}.console{top:auto}.console [data-collapse] svg{transform:rotate(180deg)}.panel-pill{height:44px}input[type=range]{--thumb-width:14px;--thumb-height:24px;height:36px}pre{white-space:pre-wrap;height:auto;max-height:13.5rem;font-size:.75rem}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}