@font-face{font-family:Open Runde;src:url(/fonts/OpenRunde-Regular.woff2)format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Open Runde;src:url(/fonts/OpenRunde-Medium.woff2)format("woff2");font-weight:500;font-display:swap}@font-face{font-family:Open Runde;src:url(/fonts/OpenRunde-Semibold.woff2)format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Open Runde;src:url(/fonts/OpenRunde-Bold.woff2)format("woff2");font-weight:700;font-display:swap}:root{--bg:#0a0a0b;--text:#f2f2f3;--soft:#a1a1a8;--muted:#6b6b73;--faint:#3d3d43;--fill:#ffffff0b;--sans:"Open Runde", system-ui, -apple-system, sans-serif;--mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;--ease:cubic-bezier(.3, .7, .4, 1);--glow:#131316;--seg-on:#ffffff17;--ring:#ffffff14;--dock-bg:#ffffff0d;--dock-shadow:0 24px 60px #00000080;--tip-bg:#1c1c1f;--tok-text:#e6edf3;--tok-tag:#7ee787;--tok-attr:#79c0ff;--tok-string:#a5d6ff;--tok-number:#79c0ff;--tok-punct:#e6edf3;--code-bg:#0d1117;--gutter:40px;--dock-room:112px;--controls-w:300px;--states-h:168px}:root[data-theme=light]{--bg:#f3f3f1;--text:#151517;--soft:#4f4f56;--muted:#85858d;--faint:#c4c4c8;--fill:#0000000b;--glow:#fff;--seg-on:#fff;--ring:#0000001a;--dock-bg:#ffffff8c;--dock-shadow:0 20px 50px #1e1e2824;--tip-bg:#fff;--tok-text:#1f2328;--tok-tag:#116329;--tok-attr:#0550ae;--tok-string:#0a3069;--tok-number:#0550ae;--tok-punct:#1f2328;--code-bg:#fff}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--text);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;margin:0}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:focus-visible,label:focus-within{outline:1.5px solid var(--soft);outline-offset:4px;border-radius:6px}.app{grid-template-columns:var(--dock-room) minmax(0, 1fr) var(--controls-w);grid-template-rows:auto minmax(0, 1fr) var(--states-h);column-gap:var(--gutter);height:100vh;min-height:660px;padding:32px var(--gutter) 28px;background:radial-gradient(50% 50% at 50% 45%, var(--glow) 0%, var(--bg) 100%);transition:background-color .3s;display:grid;overflow:hidden}.masthead{grid-area:1/1/auto/-1;justify-content:space-between;align-items:center;display:flex}.byline{align-items:center;gap:8px;font-size:16px;display:flex}.name{letter-spacing:-.01em;font-weight:600}.by{color:var(--muted)}.author{color:var(--soft);align-items:center;gap:8px;font-weight:500;text-decoration:none;transition:color .15s;display:inline-flex}.author:hover{color:var(--text)}.author img{background:var(--fill);border-radius:50%;width:24px;height:24px}.author:focus-visible{outline:1.5px solid var(--soft);outline-offset:4px;border-radius:999px}.install{font:16px var(--mono);color:var(--soft);align-items:center;gap:14px;transition:color .15s;display:inline-flex}.install:hover{color:var(--text)}.install-copy{font:16px var(--sans);color:var(--muted)}.masthead-end{align-items:center;gap:20px;display:flex}.masthead-end .icon-link+.theme{margin-left:-14px}.icon-link{width:38px;height:38px;color:var(--soft);border-radius:50%;place-items:center;transition:color .15s,background .15s;display:grid}.icon-link:hover{color:var(--text);background:var(--fill)}.icon-link svg{width:20px;height:20px}.icon-link:focus-visible{outline:1.5px solid var(--soft);outline-offset:2px}.theme{width:38px;height:38px;color:var(--soft);border-radius:50%;place-items:center;transition:color .15s,background .15s;display:grid}.theme:hover{color:var(--text);background:var(--fill)}.theme svg{width:20px;height:20px}.stage{flex-direction:column;grid-area:2/1/auto/-1;justify-content:center;align-items:center;min-height:0;display:flex}.caption{text-align:center;margin-top:-8px}.caption h1{letter-spacing:-.025em;margin:0;font-size:30px;font-weight:700}.caption p{color:var(--muted);margin:6px 0 0;font-size:14px}.controls{z-index:1;flex-direction:column;grid-area:2/3;align-self:start;gap:30px;min-height:0;padding-top:64px;display:flex}.control{gap:12px;display:grid}.control-head{justify-content:space-between;align-items:baseline;display:flex}.control-label{color:var(--soft);font-size:13px}.control-value{color:var(--muted);font-size:12px}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{width:20px;height:20px;box-shadow:inset 0 0 0 1px var(--ring);transition:transform .15s var(--ease), box-shadow .15s;border-radius:50%;position:relative}.swatch:hover{transform:scale(1.15)}.swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--ring), 0 0 0 2px var(--bg), 0 0 0 3px var(--text)}.swatch-custom{cursor:pointer;background:conic-gradient(#ff6b6b,#ffd36b,#7dff9a,#6bd6ff,#8a6bff,#ff6bd0,#ff6b6b);overflow:hidden}.swatch-custom input{opacity:0;cursor:pointer;width:calc(100% + 8px);height:calc(100% + 8px);position:absolute;inset:-4px}.segments{background:var(--fill);border-radius:10px;gap:2px;padding:3px;display:flex}.segment{font:12.5px var(--mono);color:var(--muted);border-radius:7px;flex:1;padding:6px 0;transition:color .15s,background .15s}.segment:hover{color:var(--soft)}.segment[aria-pressed=true]{background:var(--seg-on);color:var(--text);box-shadow:0 1px 2px #0000000f}.text-button{color:var(--muted);font-size:12.5px;transition:color .15s}.text-button:hover{color:var(--text)}.code{background:var(--code-bg);font:12px/1.7 var(--mono);color:var(--tok-text);white-space:pre;box-shadow:0 0 0 1px var(--fill);border-radius:12px;margin:0;padding:14px 16px;overflow-x:auto}.tok-tag{color:var(--tok-tag)}.tok-attr{color:var(--tok-attr)}.tok-string{color:var(--tok-string)}.tok-number{color:var(--tok-number)}.tok-punct{color:var(--tok-punct)}.code code{font:inherit;display:grid}.code-prop{opacity:0;transition:grid-template-rows .36s var(--ease), opacity .22s ease;grid-template-rows:0fr;display:grid}.code-prop[data-open=true]{opacity:1;transition:grid-template-rows .36s var(--ease), opacity .3s ease 80ms;grid-template-rows:1fr}.code-prop-inner{min-height:0;transition:transform .36s var(--ease);overflow:hidden;transform:translateY(-4px)}.code-prop[data-open=true] .code-prop-inner{transform:none}.control-actions{gap:16px;display:inline-flex}.reset{transition:opacity .15s,color .15s}.reset[aria-hidden=true]{opacity:0;pointer-events:none}.states{grid-area:3/1/auto/-1;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,28px);min-width:0;display:flex}.state{flex-direction:column;flex:0 120px;align-items:center;gap:2px;min-width:0;display:flex}.state-head{opacity:.38;filter:saturate(.6);width:100%;max-width:120px;transition:opacity .25s, filter .25s, transform .25s var(--ease);display:block}.state-head canvas{aspect-ratio:1;width:100%!important;height:auto!important}:root[data-theme=light] .state-head{opacity:.55;filter:saturate(.25)}:root[data-theme=light] .dock-icon{opacity:.6}.state-name{color:var(--muted);font-size:12.5px;transition:color .2s}.state:hover .state-head{opacity:.75;filter:none;transform:translateY(-4px)}.state:hover .state-name{color:var(--soft)}.state[aria-pressed=true] .state-head{opacity:1;filter:none}.state[aria-pressed=true] .state-name{color:var(--text)}.dock{left:28px;top:calc((100vh - var(--states-h)) / 2);z-index:10;background:var(--dock-bg);box-shadow:var(--dock-shadow);-webkit-backdrop-filter:blur(24px)saturate(1.5);border-radius:34px;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;display:flex;position:fixed;transform:translateY(-50%)}.dock-item{--s:1;width:52px;height:calc(52px * var(--s));transition:height .2s var(--ease);display:block;position:relative}.dock-icon{width:52px;height:52px;transform:translateY(-50%) scale(var(--s));transform-origin:0;opacity:.45;transition:transform .2s var(--ease), opacity .2s;position:absolute;top:50%;left:0}.dock-icon canvas{margin:-10px;width:72px!important;height:72px!important}.dock-item:hover{--s:1.4}.dock-item:hover+.dock-item{--s:1.15}.dock-item:has(+.dock-item:hover){--s:1.15}.dock-item:hover .dock-icon,.dock-item[aria-pressed=true] .dock-icon{opacity:1}.dock-tip{left:calc(52px * var(--s) + 16px);white-space:nowrap;pointer-events:none;background:var(--tip-bg);color:var(--text);opacity:0;border-radius:8px;padding:5px 10px;font-size:12px;transition:opacity .15s,transform .15s;position:absolute;top:50%;transform:translate(-4px,-50%);box-shadow:0 4px 14px #0000001f}.dock-item:hover .dock-tip,.dock-item:focus-visible .dock-tip{opacity:1;transform:translateY(-50%)}@media (width<=900px),(height<=640px){.app{grid-template-rows:none;grid-template-columns:minmax(0,1fr);row-gap:40px;height:auto;min-height:0;padding:24px 20px 128px;overflow:visible}.masthead,.stage,.controls,.states{grid-area:auto/1}.controls{align-self:stretch}.states{flex-wrap:wrap;row-gap:20px}.state{flex-basis:30%}.dock{flex-direction:row;align-items:flex-end;top:auto;bottom:16px;left:50%;transform:translate(-50%)}.dock-item{width:calc(52px * var(--s));height:52px;transition:width .2s var(--ease)}.dock-icon{transform:translateX(-50%) scale(var(--s));transform-origin:bottom;top:auto;bottom:0;left:50%}.dock-tip{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}