@layer kit{:root{--bg:#fafaf9;--bg-2:#f1f1ef;--card:#fff;--fg:#111;--muted:#6b6b6b;--line:#e6e6e3;--accent:#ff5a1f;--accent-fg:#fff;--danger:#e5484d;--ok:#30a46c;--font-body:var(--font-sans,ui-sans-serif, system-ui, sans-serif);--font-display:var(--font-body);--font-code:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, monospace);--tracking-display:-.03em;--radius:14px;--radius-sm:10px;--radius-pill:999px;--shadow-1:0 1px 1px #0000000a, 0 2px 4px #0000000a;--shadow-2:0 1px 1px #0000000a, 0 4px 8px #0000000d, 0 12px 24px #0000000f;--shadow-3:0 2px 2px #0000000d, 0 8px 16px #00000014, 0 24px 48px #0000001f;--dur-0:0s;--dur-1:.12s;--dur-2:.18s;--dur-3:.26s;--dur-page:.52s;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-in:cubic-bezier(.55, 0, 1, .45);--spring:linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.087 24.1%, 1.085, 1.068 28.3%, 1.01 33.9%, .993 37.5%, .986 40.6%, .997 51.5%, 1.002 59.2%, 1);--stagger:40ms;--hit:44px;--focus:0 0 0 3px var(--accent)}@supports (color:color-mix(in lab, red, red)){:root{--focus:0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--dur-1:0s;--dur-2:0s;--dur-3:.12s;--dur-page:.16s;--stagger:0s;--spring:var(--ease-out)}*,:before,:after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important}}@keyframes sk-rise{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:none}}@keyframes sk-fade{0%{opacity:0}to{opacity:1}}@keyframes sk-shake{0%,to{transform:none}20%{transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes sk-draw{to{stroke-dashoffset:0}}@keyframes sk-burst{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}@keyframes sk-spin{to{transform:rotate(360deg)}}.sk-rise,.sk-stagger>*{animation:sk-rise var(--dur-3) var(--spring) both}.sk-stagger>:nth-child(2){animation-delay:calc(var(--stagger) * 1)}.sk-stagger>:nth-child(3){animation-delay:calc(var(--stagger) * 2)}.sk-stagger>:nth-child(4){animation-delay:calc(var(--stagger) * 3)}.sk-stagger>:nth-child(5){animation-delay:calc(var(--stagger) * 4)}.sk-stagger>:nth-child(n+6){animation-delay:calc(var(--stagger) * 5)}.sk-shake{animation:sk-shake .24s var(--ease-out)}.sk-tilt{transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);transform:perspective(700px)rotateX(0)rotateY(0)}.sk-tilt:hover{box-shadow:var(--shadow-3);transform:perspective(700px)rotateX(2deg)rotateY(-3deg)translateY(-2px)}.sk-flourish{place-items:center;display:inline-grid;position:relative}.sk-flourish svg path{stroke-dasharray:24;stroke-dashoffset:24px;animation:sk-draw var(--dur-3) var(--ease-out) forwards}.sk-flourish:after{content:"";border:2px solid var(--ok);animation:sk-burst .42s var(--ease-out) forwards;pointer-events:none;border-radius:50%;position:absolute;inset:-6px}.sk-btn{min-height:var(--hit);border-radius:var(--radius-pill);background:var(--fg);color:var(--bg);font:500 .95rem/1 var(--font-body);cursor:pointer;transition:transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:0 1.1rem;display:inline-flex}.sk-btn:hover{background:var(--fg)}@supports (color:color-mix(in lab, red, red)){.sk-btn:hover{background:color-mix(in oklab, var(--fg) 86%, var(--bg))}}.sk-btn:active{transition-timing-function:var(--spring);transform:scale(.97)}.sk-btn:focus-visible,.sk-pill:focus-visible,.sk-icon-btn:focus-visible{box-shadow:var(--focus);outline:none}.sk-btn:disabled{opacity:.5;cursor:default;transform:none}.sk-btn:has(.sk-btn-aside){text-align:center;white-space:normal;flex-wrap:wrap;gap:.2rem .3em;max-width:100%;padding-block:.6rem;line-height:1.2}.sk-btn-aside{opacity:.72;font-weight:400}.sk-btn-quiet{color:var(--fg);border-color:var(--line);background:0 0}.sk-btn-quiet:hover{background:var(--bg-2)}.sk-btn-chatgpt{color:#fff;background:#0d0d0d}.sk-btn-chatgpt:hover{background:#2a2a2a}.sk-icon-btn{min-width:var(--hit);min-height:var(--hit);color:var(--muted);border-radius:var(--radius-pill);cursor:pointer;transition:background-color var(--dur-1) var(--ease-out);background:0 0;border:0;place-items:center;font-size:1.5rem;display:inline-grid}.sk-icon-btn:hover{background:var(--bg-2);color:var(--fg)}.sk-link{color:var(--fg);text-underline-offset:3px;min-height:var(--hit);align-items:center;font-size:.9rem;display:inline-flex}.sk-field{color:var(--muted);gap:.35rem;font-size:.85rem;display:grid}.sk-row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.sk-stack{justify-items:start;gap:.75rem;display:grid}.sk-stack>.sk-row,.sk-stack>.sk-field,.sk-stack>p{justify-self:stretch}.sk-panel input,.sk-panel select{min-height:var(--hit);border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--card);color:var(--fg);font:.95rem var(--font-body);transition:border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);flex:14rem;padding:0 .9rem}.sk-panel input:focus,.sk-panel select:focus{border-color:var(--accent);box-shadow:var(--focus);outline:none}.sk-panel code,.sk-copy code{font-family:var(--font-code);font-size:.82rem}.sk-muted{color:var(--muted)}.sk-error{color:var(--danger);background:var(--danger)}@supports (color:color-mix(in lab, red, red)){.sk-error{background:color-mix(in oklab, var(--danger) 10%, transparent)}}.sk-error{border-radius:var(--radius-sm);animation:sk-shake .24s var(--ease-out);margin:0;padding:.7rem .9rem}.sk-error a{color:inherit;font-weight:600}.sk-tag{border-radius:var(--radius-pill);background:var(--ok);align-items:center;min-height:28px;padding:0 .65rem;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.sk-tag{background:color-mix(in oklab, var(--ok) 14%, transparent)}}.sk-tag{color:var(--ok)}@supports (color:color-mix(in lab, red, red)){.sk-tag{color:color-mix(in oklab, var(--ok) 70%, var(--fg))}}.sk-tag{white-space:nowrap;font-size:.78rem;font-weight:600}.sk-pill{min-height:var(--hit);border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--card);align-items:center;gap:.5rem;padding:0 1rem;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.sk-pill{background:color-mix(in oklab, var(--card) 80%, transparent)}}.sk-pill{color:var(--fg);font:500 .88rem var(--font-body);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out)}.sk-pill:hover{border-color:var(--fg)}@supports (color:color-mix(in lab, red, red)){.sk-pill:hover{border-color:color-mix(in oklab, var(--fg) 25%, var(--line))}}.sk-pill:active{transform:scale(.97)}.sk-dot{background:var(--muted);border-radius:50%;width:8px;height:8px}.sk-dot.is-on{background:var(--ok);box-shadow:0 0 0 3px var(--ok)}@supports (color:color-mix(in lab, red, red)){.sk-dot.is-on{box-shadow:0 0 0 3px color-mix(in oklab, var(--ok) 25%, transparent)}}.sk-dialog{border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);background:var(--bg);width:min(40rem,100vw - 2rem);max-height:min(90vh,52rem);color:var(--fg);box-shadow:var(--shadow-3);margin:auto;padding:1.25rem;overflow-x:hidden}.sk-dialog[open]{animation:sk-rise var(--dur-3) var(--spring)}.sk-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:sk-fade var(--dur-2) var(--ease-out);background:#00000073}.sk-dialog-head{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.sk-dialog-head h2{font:600 1.15rem/1.2 var(--font-display);letter-spacing:var(--tracking-display);margin:0}.sk-panel{grid-template-columns:minmax(0,1fr);gap:1rem;display:grid}.sk-cards{grid-template-columns:minmax(0,1fr);gap:.75rem;display:grid}.sk-cards>*{animation:sk-rise var(--dur-3) var(--spring) both}.sk-cards>:nth-child(2){animation-delay:var(--stagger)}.sk-cards>:nth-child(3){animation-delay:calc(var(--stagger) * 2)}.sk-cards>:nth-child(4){animation-delay:calc(var(--stagger) * 3)}.sk-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-1);transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);padding:1rem}.sk-card.is-active{border-color:var(--ok)}@supports (color:color-mix(in lab, red, red)){.sk-card.is-active{border-color:color-mix(in oklab, var(--ok) 55%, var(--line))}}.sk-card.is-active{box-shadow:var(--shadow-2)}.sk-card-head{grid-template-columns:auto 1fr auto;align-items:start;gap:.85rem;display:grid}.sk-card-head h3{font:600 1rem/1.25 var(--font-display);margin:0 0 .15rem}.sk-card-head p{margin:0;font-size:.88rem;line-height:1.45}.sk-card-icon{background:var(--bg-2);border-radius:10px;place-items:center;width:36px;height:36px;display:grid}.sk-card-icon svg{fill:none;width:20px;height:20px;stroke:var(--fg);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.sk-card-body:not(:empty){margin-top:.85rem}.sk-detail{color:var(--muted);margin:.6rem 0 0;font-size:.85rem}.sk-local{border-radius:var(--radius);border:1px dashed var(--line);padding:.9rem 1rem;font-size:.9rem}.sk-local p{margin:0 0 .6rem}.sk-copy{border-radius:var(--radius-sm);background:var(--bg-2);align-items:center;gap:.5rem;padding:.35rem .35rem .35rem .8rem;display:flex;overflow:hidden}.sk-copy code{white-space:nowrap;flex:1;min-width:0;overflow-x:auto}.sk-gate{place-items:center;min-height:60vh;padding:2rem 1rem;display:grid}.sk-gate-inner{width:min(40rem,100%)}.sk-gate-title{font:600 clamp(1.5rem, 3vw, 2rem)/1.1 var(--font-display);letter-spacing:var(--tracking-display);margin:0 0 .4rem}.sk-gate-inner>p{margin:0 0 1.25rem}.sk-spinner{border:2px solid var(--line);border-top-color:var(--fg);border-radius:50%;width:22px;height:22px;animation:.7s linear infinite sk-spin}}:root{--bg:#fff;--bg-2:#f5f4f1;--card:#fff;--ink:#141413;--body:#2c2c2a;--muted:#6b6b6a;--line:#1414131f;--line-2:#14141312;--action:#c2410c;--action-ink:#fff;--accent:#e8590c;--err:#b42318;--ground:#d9ccb7;--ground-ink:#2a2622;--font:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;--mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--r-sm:8px;--r-md:12px;--r-lg:20px;--btn-h:44px;--shadow:0 30px 60px -32px #14141359;--publik-bg:var(--bg);--publik-card:var(--card);--publik-ink:var(--ink);--publik-muted:var(--muted);--publik-line:var(--line);--publik-accent:var(--action);--publik-accent-ink:var(--action-ink);--publik-hover:var(--bg-2);--publik-display-font:var(--font);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#141413;--bg-2:#212120;--card:#1c1c1b;--ink:#fff;--body:#e4e3df;--muted:#9c9c9b;--line:#ffffff1f;--line-2:#ffffff12;--err:#ff8a7a;--ground:#2b2722;--ground-ink:#efe7da;--shadow:0 30px 60px -30px #000000b3}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);margin:0}body{font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration-color:currentColor}@supports (color:color-mix(in lab, red, red)){a{-webkit-text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);-webkit-text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);-webkit-text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);text-decoration-color:color-mix(in oklab, currentColor 35%, transparent)}}a{text-underline-offset:3px}a:hover{text-decoration-color:currentColor}h1,h2,h3{letter-spacing:-.02em;margin:0;font-weight:500}p{margin:0}.mono{font-family:var(--mono);font-size:.9em}.muted{color:var(--muted)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.eyebrow{color:var(--muted);margin-bottom:16px;font-size:13px;font-weight:500}.lede{color:var(--body);max-width:34em;font-size:18px;line-height:1.55}:focus-visible{outline:2px solid var(--action);outline-offset:2px}.btn{height:var(--btn-h);background:var(--ink);border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 20px;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.btn{background:color-mix(in oklab, var(--ink) 7%, var(--bg))}}.btn{color:var(--ink);font:500 15px var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color .15s,transform .1s}.btn:hover{background:var(--ink)}@supports (color:color-mix(in lab, red, red)){.btn:hover{background:color-mix(in oklab, var(--ink) 13%, var(--bg))}}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--action);color:var(--action-ink)}.btn.primary:hover{background:var(--action)}@supports (color:color-mix(in lab, red, red)){.btn.primary:hover{background:color-mix(in oklab, var(--action) 88%, #000)}}.btn.ghost{background:0 0}.btn.ghost:hover{background:var(--ink)}@supports (color:color-mix(in lab, red, red)){.btn.ghost:hover{background:color-mix(in oklab, var(--ink) 7%, var(--bg))}}.btn.big{padding:0 24px;font-size:16px}.btn:disabled{opacity:.5;cursor:default}.link{font:inherit;color:inherit;background:0 0;border:0;padding:0;text-decoration:underline}@supports (color:color-mix(in lab, red, red)){.link{-webkit-text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);-webkit-text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);-webkit-text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);text-decoration-color:color-mix(in oklab, currentColor 35%, transparent)}}.link{text-underline-offset:3px;cursor:pointer}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.field{color:var(--muted);gap:6px;font-size:14px;display:grid}.field>span{font-size:13px;font-weight:500}.field input,.row input,.pick{height:var(--btn-h);border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);font:16px var(--font);width:100%;min-width:0;padding:0 14px}.field input:focus,.row input:focus,.pick:focus{outline:2px solid var(--action);outline-offset:-1px;border-color:#0000}.field input.mono{font:15px var(--mono)}.row input{flex:220px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{min-height:var(--btn-h);border:1px solid var(--line);background:var(--card);color:var(--ink);font:500 15px var(--font);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:0 16px;display:inline-flex}.chip .mono{font-size:13px}.chip[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.seg{border:1px solid var(--line);background:var(--card);border-radius:999px;width:max-content;padding:3px;display:inline-flex}.seg button{height:36px;color:var(--muted);font:500 14px var(--font);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 16px}.seg button[aria-pressed=true]{background:var(--ink)}@supports (color:color-mix(in lab, red, red)){.seg button[aria-pressed=true]{background:color-mix(in oklab, var(--ink) 8%, var(--bg))}}.seg button[aria-pressed=true]{color:var(--ink)}.err{color:var(--err);font-size:15px}.ground{background:var(--ground);border-radius:var(--r-lg);padding:clamp(16px,4vw,48px)}.stage{background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow);border-radius:14px;overflow:hidden}.stage-bar{border-bottom:1px solid var(--line-2);height:40px;color:var(--muted);align-items:center;gap:10px;padding:0 16px;font-size:13px;display:flex}.stage-bar i{background:var(--ink);border-radius:50%;width:10px;height:10px}@supports (color:color-mix(in lab, red, red)){.stage-bar i{background:color-mix(in oklab, var(--ink) 12%, var(--card))}}.stage-bar .dots{gap:6px;display:flex}.stage-body{padding:36px 32px 28px}.stage .dt-head{font-size:20px}.device{color:var(--ground-ink);margin-top:20px;font-size:15px}.tickcount{font:13px var(--mono);color:var(--ground-ink);opacity:.75;margin-top:4px}.top-wrap{border-bottom:1px solid var(--line);background:var(--bg)}.top{justify-content:space-between;align-items:center;gap:12px;width:min(100% - 160px,1280px);height:72px;margin:0 auto;display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:8px;font-size:20px;font-weight:500;text-decoration:none;display:inline-flex}.brand .mark{color:var(--ink)}.top-r{align-items:center;gap:8px;min-width:0;display:flex}.pick{border-radius:999px;width:auto;max-width:42vw;padding:0 16px;font-size:15px}.foot{width:min(100% - 160px,1280px);color:var(--muted);border-top:1px solid var(--line);flex-wrap:wrap;gap:8px 24px;margin:0 auto;padding:32px 0 40px;font-size:14px;display:flex}.wrap{width:min(100% - 160px,1280px);margin:0 auto}.ws{flex-direction:column;min-height:100dvh;display:flex}.ws>main{flex:1}.ws-loading{min-height:100dvh;color:var(--muted);place-items:center;font-size:15px;display:grid}.ws-loading span{align-items:center;gap:10px;display:inline-flex}.ws-loading span:before{content:"";border:2px solid var(--line);border-top-color:var(--action);border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.note{border-radius:var(--r-md);background:var(--bg-2);width:min(100% - 160px,1280px);margin:16px auto 0;padding:12px 16px;font-size:15px}.onb{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:24px 96px;padding:64px 0 96px;display:grid}.onb-copy{align-content:start;gap:24px;display:grid}.onb h1{letter-spacing:-.035em;font-size:clamp(36px,2.3vw + 20px,56px);line-height:1.04}.small-print{font-size:14px}.onb .btn.primary{justify-self:start}.howto{background:var(--bg-2);border-radius:var(--r-md);justify-content:space-between;align-items:center;gap:24px;width:min(100% - 160px,1280px);margin:24px auto 0;padding:16px 20px;display:flex}.howto ol{color:var(--body);grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;font-size:15px;list-style:none;display:grid}.howto b{color:var(--ink);font-weight:500}.howto .link{text-decoration:none}.bench{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"preview tune""code code";gap:24px;width:min(100% - 160px,1280px);margin:0 auto;padding:24px 0 64px;display:grid}.preview{grid-area:preview;align-content:start;align-self:start;display:grid}.preview .stage-body{padding:48px 40px 40px}.qr{color:var(--ground-ink);align-items:center;gap:16px;margin-top:24px;font-size:15px;display:flex}.qr p{margin-bottom:4px}.qr b{font-weight:500}.qr .btn{background:var(--ground-ink)}@supports (color:color-mix(in lab, red, red)){.qr .btn{background:color-mix(in oklab, var(--ground-ink) 10%, transparent)}}.qr .btn{color:var(--ground-ink)}.qr-img{border-radius:var(--r-sm);color:#000;background:#fff;flex:none;width:96px;height:96px;padding:8px}.qr-img svg{width:100%;height:100%;display:block}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);align-content:start;gap:20px;min-width:0;padding:24px;scroll-margin-top:16px;display:grid}.tune{grid-area:tune}.panel h2{letter-spacing:-.015em;font-size:20px}.grid2{grid-template-columns:1fr 1fr;gap:12px 16px;display:grid}.swatches{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.swatch{border:3px solid var(--card);width:36px;height:36px;box-shadow:0 0 0 1px var(--line);cursor:pointer;border-radius:50%;padding:0}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}.swatches input[type=color]{border:1px solid var(--line);background:var(--card);cursor:pointer;border-radius:50%;width:40px;height:40px;padding:3px}.toggles{flex-wrap:wrap;gap:20px;font-size:15px;display:flex}.toggle{cursor:pointer;align-items:center;gap:10px;min-height:44px;display:inline-flex}.toggle input{width:20px;height:20px;accent-color:var(--action)}.describe{border-top:1px solid var(--line);gap:12px;padding-top:20px;display:grid}.describe h3{letter-spacing:0;font-size:16px;font-weight:500}.describe p.muted{font-size:15px}.ideas{flex-wrap:wrap;gap:8px;display:flex}.idea{border:1px solid var(--line);min-height:36px;color:var(--body);font:14px var(--font);cursor:pointer;background:0 0;border-radius:999px;padding:0 14px}.idea:hover{background:var(--bg-2);color:var(--ink)}.code{grid-area:code}.code>p{font-size:15px}.code-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.tabs{border:1px solid var(--line);border-radius:999px;padding:3px;display:inline-flex}.tabs button{height:36px;color:var(--muted);font:500 14px var(--font);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 16px}.tabs button[aria-selected=true]{background:var(--ink)}@supports (color:color-mix(in lab, red, red)){.tabs button[aria-selected=true]{background:color-mix(in oklab, var(--ink) 8%, var(--bg))}}.tabs button[aria-selected=true]{color:var(--ink)}.snippet{background:var(--bg-2);border-radius:var(--r-md);max-height:380px;font:13px/1.6 var(--mono);margin:0;padding:20px;overflow:auto}.menu{position:relative}.menu summary{list-style:none}.menu summary::-webkit-details-marker{display:none}.menu-list{z-index:5;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);min-width:240px;box-shadow:var(--shadow);padding:6px;display:grid;position:absolute;top:52px;right:0}.menu-list button{text-align:left;border-radius:var(--r-sm);min-height:44px;font:15px var(--font);color:var(--ink);cursor:pointer;background:0 0;border:0;padding:0 12px}.menu-list button:hover{background:var(--bg-2)}@media (max-width:1023px){.top,.foot,.wrap,.bench,.howto,.note{width:calc(100% - 96px)}.onb{grid-template-columns:1fr;gap:40px;padding-top:48px}.bench{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview""tune""code"}.howto{flex-direction:column;align-items:stretch}.howto ol{grid-template-columns:1fr;gap:12px}}@media (max-width:639px){.top,.foot,.wrap,.bench,.howto,.note{width:calc(100% - 32px)}.top{height:56px}.brand{font-size:18px}.top-r .btn{padding:0 14px}.pick{max-width:38vw;padding:0 12px}.onb{padding:32px 0 56px}.grid2{grid-template-columns:1fr 1fr}.preview .stage-body,.stage-body{padding:28px 20px 24px}.ground{padding:16px}.qr{margin-top:16px}.panel{padding:20px 16px}.swatch{width:44px;height:44px}.onb .btn.primary{justify-self:stretch}.hide-sm{display:none}.pick{max-width:44vw}}@media (prefers-reduced-motion:reduce){.ws-loading span:before{animation:none}.btn{transition:none}}:root{--fg:var(--ink);--accent-fg:#fff;--danger:var(--err);--font-body:var(--font);--font-display:var(--font);--font-code:var(--mono)}.ai-by{flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:15px;display:flex}