:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#f2f2f3)var(--lightningcss-dark,#121212);--surface:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1c1c1c);--raised:var(--lightningcss-light,#ececee)var(--lightningcss-dark,#262626);--inset:var(--lightningcss-light,#f7f7f8)var(--lightningcss-dark,#161616);--line:var(--lightningcss-light,#e3e3e6)var(--lightningcss-dark,#2c2c2c);--line-strong:var(--lightningcss-light,#cfcfd5)var(--lightningcss-dark,#3d3d3d);--fg:var(--lightningcss-light,#18181b)var(--lightningcss-dark,#ededed);--muted:var(--lightningcss-light,#5d5d66)var(--lightningcss-dark,#a1a1a1);--track:var(--lightningcss-light,#dcdce0)var(--lightningcss-dark,#3a3a3a);--accent:var(--lightningcss-light,#c8312a)var(--lightningcss-dark,#d63a31);--accent-text:var(--lightningcss-light,#b3261e)var(--lightningcss-dark,#ff7b72);--accent-soft:var(--lightningcss-light,#c8312a17)var(--lightningcss-dark,#d63a3129);--ok:var(--lightningcss-light,#1e9e4a)var(--lightningcss-dark,#4cd964);--warn-bg:var(--lightningcss-light,#fff5db)var(--lightningcss-dark,#33280f);--warn-fg:var(--lightningcss-light,#6b4a00)var(--lightningcss-dark,#f5d48a);--demo-bg:var(--lightningcss-light,#f2edff)var(--lightningcss-dark,#211a33);--demo-line:var(--lightningcss-light,#cdbdf7)var(--lightningcss-dark,#4b3a85);--demo-fg:var(--lightningcss-light,#4a2fa0)var(--lightningcss-dark,#d9ccff);--callout-bg:var(--lightningcss-light,#fff0ef)var(--lightningcss-dark,#2a1717);--callout-line:#d6453c;--callout-dot:var(--lightningcss-light,#d6453c)var(--lightningcss-dark,#f08a80);--glow:var(--lightningcss-light,#d6453c38)var(--lightningcss-dark,#c8281e80);--shadow:var(--lightningcss-light,#00000047)var(--lightningcss-dark,#0009);--elev:var(--lightningcss-light,0 1px 2px #0000000f)var(--lightningcss-dark,0 1px 2px #0006);--elev-2:var(--lightningcss-light,0 12px 32px #00000024)var(--lightningcss-dark,0 16px 40px #0000008c);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;--ease:cubic-bezier(.2, .7, .2, 1);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,sans-serif;font-size:15px;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}@media (pointer:fine){html{overscroll-behavior:none}}html{scroll-padding-bottom:96px}@media (width>=721px){html{scroll-padding-top:72px}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);-webkit-tap-highlight-color:var(--accent-soft);margin:0}button,label,summary,a,input{touch-action:manipulation}h1,h2,h3{letter-spacing:-.01em;text-wrap:balance;margin:0;line-height:1.2}h2{font-size:1.3rem;font-weight:650}h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.8rem;font-weight:650}p{margin:0}a{color:var(--accent-text)}code{font-family:ui-monospace,SF Mono,JetBrains Mono,Menlo,Consolas,monospace;font-size:.9em}.muted{color:var(--muted)}.hint{color:var(--muted);text-wrap:pretty;font-size:.875rem}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}.icon{flex:none}.app{flex-direction:column;min-height:100dvh;display:flex}.topbar{align-items:center;gap:var(--s3) var(--s4);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20;flex-wrap:wrap;display:flex}.brand{white-space:nowrap;font-size:.9rem;font-weight:650}.topbar .tabs{margin-left:auto}.topbar-end{align-items:center;gap:var(--s2);display:flex}.tabs+.topbar-end{margin-left:0}.brand+.topbar-end{margin-left:auto}main{width:min(1080px,100%);padding:0 var(--s5) var(--s7);flex:1;margin:0 auto}.statusbar{justify-content:space-between;align-items:center;gap:var(--s2) var(--s4);padding:var(--s3) var(--s5);border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;font-size:.82rem;display:flex}.status{min-height:1.5em}.statusbar:has(.status:empty):not(:has(.muted)){border-top-color:#0000}.status.error{color:var(--accent-text);font-weight:600}.status.busy:before{content:"";width:11px;height:11px;margin-right:var(--s2);vertical-align:-1px;border:2px solid;border-right-color:#0000;border-radius:50%;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.demo-banner{align-items:center;gap:var(--s1) var(--s3);width:min(1032px,100% - 32px);margin:var(--s4) auto 0;padding:var(--s2) var(--s4);border:1px solid var(--demo-line);border-radius:var(--r);background:var(--demo-bg);color:var(--demo-fg);flex-wrap:wrap;font-size:.875rem;display:flex}.demo-banner strong{letter-spacing:.1em;background:var(--demo-fg);color:var(--demo-bg);border-radius:999px;padding:2px 8px;font-size:.72rem}.btn{justify-content:center;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s4);border:1px solid var(--line-strong);background:var(--raised);color:var(--fg);font:inherit;white-space:nowrap;cursor:pointer;border-radius:10px;font-size:.9rem;font-weight:600;transition:background-color .15s,border-color .15s,transform .1s,filter .15s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:active:not(:disabled){transform:translateY(1px)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover:not(:disabled){filter:brightness(.9);border-color:var(--accent)}.btn.ghost{background:0 0}.btn.small{min-height:32px;padding:0 var(--s3);font-size:.82rem}.btn:disabled,.chip:disabled,.tile:disabled,.frame:disabled{opacity:.45;cursor:not-allowed}.icon-btn{border:1px solid var(--line);width:36px;height:36px;color:var(--fg);cursor:pointer;background:0 0;border-radius:10px;place-items:center;transition:background-color .15s;display:inline-grid}.icon-btn:hover{background:var(--raised)}.actions{gap:var(--s2);flex-wrap:wrap;align-items:center;display:flex}.actions.end{justify-content:flex-end}.tabs{gap:var(--s1);border:0;min-width:0;margin:0;padding:0;display:flex}.tab{color:var(--muted);cursor:pointer;white-space:nowrap;border-radius:10px;align-items:center;gap:6px;padding:6px 14px;font-size:.875rem;font-weight:550;transition:background-color .15s,color .15s;display:inline-flex;position:relative}.tab input,.segmented input{opacity:0;width:1px;height:1px;margin:0;position:absolute}.tab:hover{color:var(--fg)}.tab:has(input:checked){background:var(--raised);color:var(--fg)}.tab:has(:focus-visible){outline:2px solid var(--accent-text);outline-offset:2px}.segmented label:has(:focus-visible){outline:2px solid var(--accent-text);outline-offset:2px}.tabs:disabled .tab{cursor:not-allowed;opacity:.55}.dot{border-radius:50%;flex:none;width:7px;height:7px;display:inline-block}.dot.ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent)}.figure{width:min(100%,500px);margin:0 auto;position:relative}.controller{width:100%;height:auto;display:block}.controller .part-label{text-anchor:middle;dominant-baseline:central;pointer-events:none;font:700 9px system-ui,sans-serif}.controller .shadow{fill:var(--shadow)}.controller .glow-in{stop-color:var(--glow)}.controller .glow-out{stop-color:var(--glow);stop-opacity:0}.controller .grip path{transition:stroke .3s}.controller .part{transform-box:fill-box;transform-origin:50%;transition:transform .3s var(--ease), filter .45s ease-out}.controller .part>:first-child{transition:fill .45s ease-out,stroke .45s ease-out}.controller .part.lit{filter:drop-shadow(0 0 4px var(--accent));transition-duration:60ms;transform:scale(.9)}.controller .part.lit>:first-child{fill:var(--accent);stroke:color-mix(in srgb, var(--accent) 55%, white);transition-duration:60ms}.controller .arm{fill:#0000}.controller .level{fill:var(--accent);stroke:none}.controller .deco{pointer-events:none}.controller.pressable{-webkit-user-select:none;user-select:none}.controller.pressable .part{cursor:pointer;touch-action:none}@media (prefers-reduced-motion:reduce){.controller .part,.controller .part>:first-child{transition:none}.controller .part.lit{filter:none;transform:none}}.live-hint{text-align:center;margin:0}.callout-lines,.callout{display:none}.callout-lines polyline{stroke-width:1.5px}.callout-lines .on polyline{stroke:var(--callout-line)}.callout-lines .on circle{fill:var(--callout-dot)}.callout-lines .off polyline{stroke:var(--line-strong)}.callout-lines .off circle{fill:var(--line-strong)}.callout{white-space:nowrap;border:1.5px solid var(--callout-line);background:var(--callout-bg);color:var(--fg);font:inherit;border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:650;line-height:1.4;position:absolute;transform:translateY(-50%)}.callout.l{right:105.43%}.callout.r{left:105.43%}button.callout{cursor:pointer;transition:background-color .15s,box-shadow .15s}button.callout:hover{background:color-mix(in srgb, var(--callout-line) 22%, var(--callout-bg));box-shadow:0 0 0 4px var(--accent-soft)}.callout.static{border-color:var(--line-strong);background:var(--surface);color:var(--muted);font-weight:550}@media (width>=900px){.figure.with-callouts{width:min(56.5%,520px)}.with-callouts .controller{overflow:visible}.with-callouts .callout-lines{display:inline}.with-callouts .callout{display:block}}.landing{gap:var(--s6);padding:var(--s7) 0 var(--s5);grid-template-columns:1fr;grid-template-areas:"art""copy";align-items:center;display:grid}.landing-art{grid-area:art}.landing-copy{gap:var(--s4);grid-area:copy;justify-items:start;max-width:560px;display:grid}.eyebrow{color:var(--accent-text);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;font-weight:700}.landing h1{letter-spacing:-.025em;font-size:clamp(2rem,1.4rem + 2.6vw,3rem);font-weight:750}.lead{color:var(--muted);text-wrap:pretty;max-width:52ch;font-size:1.05rem}.landing .actions{margin-top:var(--s2)}.notice{gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r);align-items:flex-start;font-size:.9rem;display:flex}.notice .icon{margin-top:2px}.notice.warning{background:var(--warn-bg);color:var(--warn-fg)}.notes{margin-top:var(--s2);color:var(--muted);width:100%;font-size:.875rem}.notes summary{cursor:pointer;color:var(--fg);border-radius:6px;width:fit-content;font-weight:600}.notes summary:hover{color:var(--accent-text)}.notes ul{margin:var(--s3) 0 0;gap:var(--s2);padding-left:1.2em;display:grid}@media (width>=900px){.landing{min-height:calc(100dvh - 160px);padding-top:var(--s5);grid-template-columns:1fr 1.1fr;grid-template-areas:"copy art"}}.workspace{border:0;min-width:0;margin:0;padding:0}.hero{text-align:center;padding:var(--s6) 0 var(--s4);justify-items:center;display:grid}.hero h1{font-size:1.9rem;font-weight:600}.hero .sub{color:var(--muted);margin:var(--s1) 0 var(--s4);font-size:.9rem}.device{justify-content:center;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap;display:flex}.pill{align-items:center;gap:var(--s2);background:var(--surface);border:1px solid var(--line);color:var(--fg);font-variant-numeric:tabular-nums;border-radius:999px;padding:4px 12px;font-size:.82rem;display:inline-flex}.battery{border:1.5px solid var(--muted);border-radius:3px;width:22px;height:11px;padding:1px;position:relative}.battery:after{content:"";background:var(--muted);border-radius:0 1px 1px 0;width:2px;height:4px;position:absolute;top:2.5px;right:-4px}.battery span{background:var(--ok);transform-origin:0;height:100%;transition:transform .4s var(--ease);border-radius:1px;display:block}.tiles{gap:var(--s3);width:min(100%,520px);margin:var(--s4) auto var(--s5);grid-template-columns:repeat(4,1fr);display:grid}.tile{justify-items:center;gap:var(--s2);padding:var(--s4) var(--s1) var(--s3);border-radius:var(--r-lg);background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;box-shadow:var(--elev);border:1px solid #0000;font-size:.85rem;transition:background-color .15s,border-color .15s,color .15s;display:grid}.tile .icon{color:var(--muted);transition:color .15s}.tile:hover:not(:disabled){background:var(--raised)}.tile[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.tile[aria-pressed=true] .icon{color:var(--accent-text)}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--elev);gap:var(--s4);scroll-margin-top:var(--s4);display:grid}.panel:focus{outline:none}.panel:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}.stack{gap:var(--s5);display:grid}.grid-2{gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));display:grid}.grid-2.tight{gap:var(--s4) var(--s6)}.card{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);min-width:0;margin:0}.card-head{align-items:center;gap:var(--s3);margin-bottom:var(--s1);font-weight:600;display:flex}.badge{min-width:36px;height:28px;padding:0 var(--s2);border-radius:var(--r-sm);background:var(--raised);letter-spacing:.04em;place-items:center;font-size:.8rem;font-weight:750;display:inline-grid}.trigger{gap:var(--s3);display:grid}.trigger h3{margin-top:var(--s2)}.card-row{justify-content:space-between;align-items:center;gap:var(--s3) var(--s5);padding:var(--s4);border-radius:var(--r-lg);background:var(--inset);border:1px solid var(--line);flex-wrap:wrap;display:flex}.card-row h3{margin-bottom:var(--s1)}.field{gap:6px;display:grid}.field label,.stepper{font-size:.875rem;font-weight:600}input[type=text],input[type=number]{font:inherit;height:40px;padding:0 var(--s3);border:1px solid var(--line-strong);background:var(--inset);color:var(--fg);border-radius:10px;transition:border-color .15s}input[type=number]{font-variant-numeric:tabular-nums}input[type=text]{width:100%;max-width:420px}input[type=text]:focus,input[type=number]:focus{border-color:var(--accent-text)}.range{align-items:center;gap:2px var(--s3);grid-template-columns:1fr auto;display:grid}.range label{font-size:.875rem}.range .value{font-variant-numeric:tabular-nums;font-size:.875rem;font-weight:650}.range input{grid-column:1/-1}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:24px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--accent), var(--accent)) 0 / var(--p) 100% no-repeat, var(--track);border-radius:3px;height:6px}input[type=range]::-moz-range-track{background:var(--track);border-radius:3px;height:6px}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--accent);background:#fff;border-radius:50%;width:18px;height:18px;margin-top:-6px;transition:transform .15s;box-shadow:0 1px 3px #00000059}input[type=range]::-moz-range-thumb{border:2px solid var(--accent);background:#fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #00000059}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}input[type=range]:focus-visible{outline-offset:4px;border-radius:4px}.switch-row{justify-content:space-between;align-items:center;gap:var(--s3);padding-top:var(--s3);margin-top:var(--s1);border-top:1px solid var(--line);cursor:pointer;font-weight:600;display:flex}.switch{appearance:none;background:var(--track);cursor:pointer;border-radius:12px;flex:none;width:42px;height:24px;margin:0;transition:background-color .2s;position:relative}.switch:before{content:"";width:18px;height:18px;transition:transform .2s var(--ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0000004d}.switch:hover{background:color-mix(in srgb, var(--track), var(--fg) 15%)}.switch:checked{background:var(--accent)}.switch:checked:before{transform:translate(18px)}.segmented{background:var(--raised);border-radius:10px;gap:2px;width:fit-content;max-width:100%;padding:3px;display:inline-flex}.segmented label{color:var(--muted);cursor:pointer;text-align:center;border-radius:8px;padding:5px 14px;font-size:.85rem;font-weight:550;transition:background-color .15s,color .15s;position:relative}.segmented label:hover{color:var(--fg)}.segmented label:has(input:checked){color:var(--fg);box-shadow:var(--elev);background:var(--lightningcss-light,#fff)var(--lightningcss-dark,#3d3d3d)}.cap{text-transform:capitalize}.segmented.wide{grid-template-columns:repeat(4,1fr);width:100%;max-width:560px;display:grid}.segmented.wide label{padding:7px 4px}.chips{gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap;display:flex}.chip{min-height:34px;padding:0 var(--s4);border:1px solid var(--line-strong);background:var(--raised);color:var(--fg);font:inherit;cursor:pointer;border-radius:999px;font-size:.85rem;font-weight:550;transition:border-color .15s,background-color .15s}.chip:hover{border-color:var(--accent);background:var(--accent-soft)}.timeline-head{justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;display:flex}.stepper{align-items:center;gap:var(--s2);display:inline-flex}.stepper input{width:68px}.timeline{gap:var(--s2);margin-top:calc(var(--s3) * -1);grid-template-columns:repeat(auto-fill,minmax(58px,1fr));display:grid}.frame{padding:var(--s2) 4px 6px;border-radius:var(--r);border:1px solid var(--line);background:var(--inset);color:var(--muted);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;justify-items:center;gap:6px;font-size:.75rem;font-weight:650;transition:border-color .15s,background-color .15s;display:grid}.frame:hover{border-color:var(--line-strong)}.frame[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}.dots{gap:3px;display:flex}.dots span{border-radius:50%;width:7px;height:7px;box-shadow:inset 0 0 0 1px #7f7f7f59}.swatches{gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));display:grid}.swatch{align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--inset);border:1px solid var(--line);display:flex}.swatch label{cursor:pointer;flex:1;font-size:.875rem;font-weight:550}.swatch code{color:var(--muted);text-transform:uppercase;font-size:.75rem}input[type=color]{appearance:none;border:2px solid var(--line-strong);cursor:pointer;background:0 0;border-radius:50%;flex:none;width:36px;height:36px;padding:0;transition:border-color .15s}input[type=color]:hover{border-color:var(--muted)}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}input[type=color]::-moz-color-swatch{border:0;border-radius:50%}.actionbar{bottom:var(--s4);z-index:10;margin-top:var(--s4);justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s4);border-radius:var(--r-lg);border:1px solid var(--accent);background:var(--surface);box-shadow:var(--elev-2);animation:rise .25s var(--ease);flex-wrap:wrap;display:flex;position:sticky}.actionbar p{align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:.9rem;display:flex}.actionbar .muted{margin-left:calc(var(--s2) * -1)}.count{background:var(--accent);color:#fff;font-variant-numeric:tabular-nums;border-radius:999px;place-items:center;min-width:26px;height:26px;padding:0 6px;font-size:.82rem;font-weight:700;display:inline-grid}.backdrop{z-index:30;padding:var(--s4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0000008c;place-items:center;animation:.2s fade;display:grid;position:fixed;inset:0}.dialog{overscroll-behavior:contain;gap:var(--s4);width:min(100%,560px);max-height:90dvh;padding:var(--s5);border-radius:var(--r-xl);background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:var(--elev-2);animation:rise .25s var(--ease);display:grid;overflow:auto}.dialog ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.changes li{padding:var(--s2) var(--s3);background:var(--inset);border:1px solid var(--line);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;border-radius:10px;font-size:.9rem}.bytes li{color:var(--muted);overflow-wrap:anywhere;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.8rem}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}@keyframes fade{0%{opacity:0}}@media (width<=720px){.topbar{padding:var(--s3) var(--s4);gap:var(--s2)}.brand .muted{display:none}.segmented.wide{grid-template-columns:repeat(2,1fr)}.topbar .tabs{order:3;justify-content:space-between;width:100%;margin:0}.tab{flex:1;justify-content:center;padding:6px 4px}.brand+.topbar-end,.tabs+.topbar-end{margin-left:auto}main{padding:0 var(--s4) var(--s6)}.statusbar{padding:var(--s3) var(--s4)}.landing{padding-top:var(--s5);gap:var(--s4)}.hero{padding-top:var(--s5)}.tiles{gap:var(--s2)}.tile{font-size:.78rem}.panel{padding:var(--s4);border-radius:var(--r-lg)}.actionbar{bottom:var(--s2)}.actionbar .actions{width:100%}.actionbar .btn{padding:0 var(--s3);flex:1}.dialog{padding:var(--s4)}.dialog .actions{flex-direction:column-reverse;align-items:stretch}}@media (width>=721px){.topbar{position:sticky;top:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}