:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--line:#e4e4e7;--ink:#18181b;--muted:#71717a;--cell:218px;--load:42px;--track-bg:#f4f4f5;--radius:8px;--radius-md:6px;--radius-lg:14px;--ctl-h:36px;--field-shadow:0 1px 2px #0000000d;--bg:#fff;--surface:#fff;--panel:#fffffff5;--panel-line:#dfe1e6;--panel-shadow:0 8px 24px #1f232d14;--hover:#f4f4f5;--ink-hover:#27272a;--accent:#a1a1aa;--slider-fill:#f4f4f5;--slider-thumb:#52525b;--loader-ink:#838994;--loader-duration:1.3s}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}html{background:var(--bg);min-height:100%}body{background:var(--bg);min-height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font:400 14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:auto}button,textarea,input{font:inherit}button{color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.goo-defs{pointer-events:none;position:absolute}.goo-loader{vertical-align:-.22em;color:currentColor;width:1.15em;height:1.15em;display:inline-block}.goo-loader svg{width:100%;height:100%;display:block;overflow:visible}.goo-loader .c{fill:currentColor;transform-box:fill-box;transform-origin:50%}@media (prefers-reduced-motion:reduce){.goo-loader .c{animation:none!important}}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:40;background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:10px 16px;font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-decoration:none;position:fixed;top:8px;left:50%;transform:translate(-50%,-200%)}.skip-link:focus-visible{transform:translate(-50%)}.filter-panel{top:max(24px,env(safe-area-inset-top));z-index:20;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);width:166px;max-width:calc(100vw - 28px);box-shadow:var(--panel-shadow);font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;transition:width .24s cubic-bezier(.22,1,.36,1);position:fixed;left:50%;overflow:hidden;transform:translate(-50%)}.filter-panel.is-open{width:min(720px,100vw - 28px)}.filter-toggle{width:100%;height:var(--ctl-h);color:var(--ink);cursor:pointer;font:inherit;text-align:left;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border:0;align-items:center;padding:0 12px;display:flex}.filter-reveal{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.22,1,.36,1),opacity .16s;display:grid}.filter-panel.is-open .filter-reveal{opacity:1;grid-template-rows:1fr}.filter-reveal-inner{min-height:0;overflow:hidden}.filter-body{overscroll-behavior:contain;border-top:1px solid var(--line);max-height:calc(100dvh - 66px);padding:14px 16px 15px;overflow:auto}.filter-groups{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 24px;display:grid}.filter-group{border:0;min-width:0;margin:0;padding:0}.filter-group legend{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px;padding:0;font-size:10px}.filter-option{cursor:pointer;break-inside:avoid;min-width:0;color:var(--muted);white-space:nowrap;align-items:baseline;gap:7px;padding:2px 0;display:flex;position:relative}.filter-option:hover{color:var(--ink)}.filter-option:focus-within{outline:1px solid var(--accent);outline-offset:2px}.filter-option input{opacity:0;width:1px;height:1px;position:absolute}.filter-check:before{content:"[ ]"}.filter-option input:checked+.filter-check:before{content:"[•]";color:var(--ink)}.filter-clear{color:var(--muted);cursor:pointer;font:inherit;text-transform:uppercase;background:0 0;border:0;margin-top:14px;padding:0}.filter-clear:hover{color:var(--ink)}.cell:focus-visible,.filter-toggle:focus-visible,.filter-clear:focus-visible,.zoom-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.zoom-controls{top:max(24px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));z-index:19;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);box-shadow:var(--panel-shadow);font-variant-numeric:tabular-nums;align-items:center;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;position:fixed;overflow:hidden}.zoom-controls button{width:34px;height:var(--ctl-h);cursor:pointer;background:0 0;border:0;padding:0;font-size:15px}.zoom-controls button:hover{background:var(--hover)}.zoom-controls button:disabled{color:#c9ccd2;cursor:default}.zoom-value{text-align:center;min-width:52px;color:var(--muted)}.stage{min-width:100%;min-height:100dvh}.grid{grid-template-columns:repeat(auto-fill,minmax(var(--cell),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);width:100%;display:grid}.cell{aspect-ratio:1;content-visibility:auto;contain-intrinsic-size:auto var(--cell);background:var(--bg);border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;color:inherit;justify-content:center;align-items:center;margin:0;padding:0;transition:background .12s;display:flex;position:relative;overflow:hidden}.cell:hover{background:var(--hover)}.cell:focus-visible{z-index:1;background:var(--hover)}.cell .goo-loader{font-size:var(--load);color:var(--loader-ink)}.clabel,.copyhint{color:var(--muted);pointer-events:none;font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute}.clabel{text-align:center;opacity:0;transition:opacity .12s;bottom:10px;left:0;right:0}.copyhint{letter-spacing:.1em;text-transform:uppercase;opacity:0;font-size:9px;transition:opacity .12s;top:15px;right:17px}.cell:hover .clabel,.cell:hover .copyhint,.cell:focus-visible .clabel,.cell:focus-visible .copyhint{opacity:1}.copyhint.is-copied{opacity:1;color:var(--ink)}.empty{min-height:100dvh;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;place-items:center;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;display:grid}.zoom-hint{left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:19;border-radius:var(--radius);color:#fff;text-align:center;white-space:nowrap;pointer-events:none;background:#343842f0;border:1px solid #ffffff1f;max-width:calc(100vw - 28px);padding:8px 11px;font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;transition:opacity .2s,transform .2s,visibility 0s .2s;animation:.3s cubic-bezier(.22,1,.36,1) zoom-hint-in;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #1f232d29}.zoom-hint.is-hidden{opacity:0;visibility:hidden;transform:translate(-50%,8px)}@keyframes zoom-hint-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.copy-toast{left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:30;background:var(--ink);max-width:calc(100vw - 28px);color:var(--bg);border-radius:var(--radius);text-align:center;white-space:nowrap;pointer-events:none;padding:9px 14px;font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;transition:opacity .18s,transform .18s;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #1f232d2e}.copy-toast.is-hidden{opacity:0;transform:translate(-50%,8px)}@media (prefers-reduced-motion:reduce){.zoom-hint{animation:none}.cell,.clabel,.copyhint,.filter-panel,.filter-reveal,.zoom-hint,.copy-toast{transition:none}}@media (max-width:520px){.filter-panel{max-width:calc(100vw - 16px);left:50%}.filter-panel.is-open{width:calc(100vw - 16px)}.zoom-controls{top:60px;right:8px}.filter-body{max-height:calc(100dvh - 54px);padding:12px}.filter-groups{gap:14px}.zoom-hint{white-space:normal}.copyhint{display:none}}.corner{top:max(24px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));z-index:20;align-items:center;gap:8px;display:flex;position:fixed}.corner-link{height:var(--ctl-h);background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);box-shadow:var(--panel-shadow);color:var(--ink);text-transform:uppercase;letter-spacing:.12em;align-items:center;padding:0 14px;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-decoration:none;display:inline-flex}.corner-link:hover{background:var(--hover)}.theme-toggle{width:var(--ctl-h);height:var(--ctl-h);background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);box-shadow:var(--panel-shadow);color:var(--ink);cursor:pointer;place-items:center;font-size:14px;line-height:1;display:grid}.theme-toggle:hover{background:var(--hover)}.theme-icon-sun{display:none}html[data-theme=dark] .theme-icon-sun{display:block}html[data-theme=dark] .theme-icon-moon{display:none}.builder{background:var(--bg);color:var(--ink);grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr minmax(320px,360px);font:400 13px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:grid;position:fixed;inset:0}.builder button:focus-visible,.corner-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.builder-back{z-index:5;color:var(--muted);align-items:center;gap:4px;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex;position:absolute;top:16px;left:16px}.builder-back:hover{color:var(--ink)}.builder-tools{z-index:5;align-items:center;gap:8px;display:flex;position:absolute;top:14px;right:14px}.builder-tools .theme-toggle{box-shadow:none;border-radius:var(--radius-md);border-color:var(--line);background:var(--surface);width:36px;height:36px}.canvas{background:var(--hover);grid-area:1/1;place-items:center;display:grid;position:relative;overflow:hidden}.stagebox{--px:300px;width:var(--px);height:var(--px);color:var(--ecolor)}.builder .c{fill:currentColor;transform-box:fill-box;transform-origin:50%}.play-btn{background:var(--ink);width:48px;height:48px;color:var(--bg);cursor:pointer;border:0;border-radius:50%;place-items:center;transition:transform .1s,background .15s;display:grid;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 2px 10px #0000002e}.play-btn:hover{background:var(--ink-hover)}.play-btn:active{transform:translate(-50%)scale(.93)}.play-btn:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent),0 2px 10px #0000002e;outline:none}.clear-btn{border-radius:var(--radius-md);color:var(--muted);cursor:pointer;font:inherit;background:0 0;border:0;padding:6px 10px;font-size:12px;font-weight:500;transition:background .12s,color .12s;position:absolute;bottom:24px;left:14px}.clear-btn:hover{background:var(--hover);color:var(--ink)}.clear-btn:focus-visible{box-shadow:0 0 0 2px var(--accent);outline:none}.minimap{z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);flex-direction:column;align-items:center;gap:7px;padding:12px 14px;display:flex;position:absolute;bottom:16px;right:16px;box-shadow:0 1px 3px #00000014}.minimap-inner{place-items:center;display:grid}.minimap-label{color:var(--muted);white-space:nowrap;font-size:11px}.editor-wysiwyg{width:100%;height:100%;position:relative}.still{pointer-events:none;position:absolute;inset:0}.still svg{width:100%;height:100%;display:block;overflow:visible}.paint-grid{touch-action:none;-webkit-user-select:none;user-select:none;border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid;position:absolute;inset:0}.paint-grid button{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:crosshair;background:0 0;margin:0;padding:0;transition:background 80ms,box-shadow 80ms}.paint-grid button:hover{box-shadow:inset 0 0 0 2px var(--accent)}.paint-grid button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}.glyph{width:82%;height:82%;display:block}.glyph svg{width:100%;height:100%;display:block;overflow:visible}.preview-host{width:100%;height:100%;display:block}.preview-host svg{width:100%;height:100%;display:block;overflow:visible}.sidebar{border-left:1px solid var(--line);grid-area:1/2/-1;padding:18px 16px;overflow:auto}.controls{flex-direction:column;gap:16px;display:flex}.field,.control-group{flex-direction:column;gap:7px;display:flex}.field-label{color:var(--muted);font-size:13px;font-weight:500;line-height:1.4}.shape-row{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.shape-btn{aspect-ratio:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--muted);cursor:pointer;box-shadow:var(--field-shadow);place-items:center;transition:background .12s,color .12s,border-color .12s;display:grid}.shape-btn:hover{background:var(--hover);color:var(--ink)}.shape-btn.sel{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.shape-btn .glyph{width:62%;height:62%}.shape-add{box-shadow:none;background:0 0;border-style:dashed}.shape-add[aria-expanded=true]{border-style:solid;border-color:var(--ink);color:var(--ink)}.add-shape{display:grid;position:relative}.add-shape-pop{z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overscroll-behavior:contain;flex-direction:column;gap:9px;width:232px;padding:12px;display:flex;position:absolute;top:calc(100% + 8px);left:auto;right:0;box-shadow:0 12px 32px #18181b29}.add-shape-hint{color:var(--muted);font-size:12px;font-weight:500}.add-shape-row{gap:8px;display:flex}.add-shape-row .char-input{text-align:left;flex:1;width:auto;min-width:0;margin:0}.add-shape-egs{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.add-shape-eg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);height:34px;color:var(--ink);cursor:pointer;place-items:center;font-size:15px;line-height:1;transition:background .12s,border-color .12s;display:grid}.add-shape-eg:hover{background:var(--hover);border-color:var(--muted)}.add-shape-eg:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent);outline:none}.char-input{width:100%;height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:inherit;box-shadow:var(--field-shadow);text-align:center;padding:0 12px;font-size:13px}.char-input:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);outline:none}.export{gap:8px;margin-top:4px;display:flex}.export .btn{flex:1;min-width:0}.export-note{min-height:1em;color:var(--muted);text-wrap:pretty;margin:0;font-size:12px;line-height:1.4}.timeline{border-top:1px solid var(--line);grid-area:2/1;align-items:center;gap:10px;padding:16px 14px 12px;display:flex;overflow-x:auto}.frame-slot{flex:none;position:relative}.frame-thumb{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);color:#c4c8cf;cursor:grab;place-items:center;width:66px;height:66px;display:grid;position:relative;box-shadow:0 1px 2px #0000000a}.frame-thumb:hover{color:var(--muted)}.frame-thumb.sel{outline:2px solid var(--ink);outline-offset:-2px;color:var(--muted)}.frame-thumb:active{cursor:grabbing}.thumb-svg{pointer-events:none;width:66%;height:66%;display:block}.thumb-svg svg{width:100%;height:100%;display:block;overflow:visible}.frame-slot .del{background:var(--surface);border:1px solid var(--line);width:18px;height:18px;color:var(--muted);cursor:pointer;opacity:0;z-index:2;border-radius:50%;place-items:center;padding:0;font-size:12px;line-height:1;transition:opacity .12s;display:grid;position:absolute;top:-8px;right:-8px;box-shadow:0 1px 5px #14161c33}.frame-slot:hover .del,.frame-slot .del:focus-visible{opacity:1}.frame-slot .del:hover{color:var(--ink);border-color:var(--muted)}.add-frame{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius-md);width:66px;height:66px;color:var(--muted);cursor:pointer;flex:none;place-items:center;display:grid}.add-frame:hover{background:var(--hover);color:var(--ink)}@media (prefers-reduced-motion:reduce){.paint-grid button,.frame-slot .del,.play-btn,.clear-btn{transition:none}}@media (max-width:720px){.builder{grid-template-rows:minmax(0,1fr) auto auto;grid-template-columns:1fr}.canvas{grid-area:1/1}.timeline{grid-area:2/1}.sidebar{border-left:0;border-top:1px solid var(--line);grid-area:3/1}}.drop-line{background:var(--muted);border-radius:1px;flex:none;width:2px;height:66px}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--line:#27272a;--ink:#fafafa;--muted:#a1a1aa;--track-bg:#27272a;--bg:#09090b;--surface:#18181b;--panel:#171a21f5;--panel-line:#2a2f3a;--panel-shadow:0 8px 24px #00000073;--hover:#18181b;--ink-hover:#e4e4e7;--accent:#52525b;--slider-fill:#27272a;--slider-thumb:#71717a;--loader-ink:#9aa0ab}html[data-theme=dark] .zoom-controls button:hover{background:#20242e}html[data-theme=dark] .switch-track{box-shadow:none;--switch-knob:#d4d4d8;background:#3f3f46}html[data-theme=dark] .switch-track.is-on{background:var(--ink);--switch-knob:#18181b}html[data-theme=dark] .canvas{background:#0c0c0e}.btn{box-sizing:border-box;border-radius:var(--radius-md);color:var(--ink);font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;font-size:13px;font-weight:500;line-height:1;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s;display:inline-flex}.btn:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);outline:none}.btn:disabled{opacity:.5;cursor:default;pointer-events:none}.btn-md{height:36px;padding:0 16px}.btn-sm{height:32px;padding:0 12px;font-size:12px}.btn-icon{width:36px;height:36px;padding:0}.btn-default{background:var(--ink);color:var(--bg);box-shadow:0 1px 2px #0000000d}.btn-default:hover{background:var(--ink-hover)}.btn-outline{background:var(--surface);border-color:var(--line);box-shadow:0 1px 2px #0000000d}.btn-outline:hover{background:var(--hover)}.btn-ghost{background:0 0}.btn-ghost:hover{background:var(--hover)}.btn[data-active]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.slider{--sl-pad:12px;--sl-label:82px;--sl-gap:10px;--sl-value:52px;align-items:center;gap:var(--sl-gap);width:100%;height:var(--ctl-h);padding:0 var(--sl-pad);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--field-shadow);display:flex;position:relative;overflow:hidden}.slider:focus-within{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}.slider-fill{z-index:0;width:calc(var(--sl-pad) + var(--sl-label) + var(--sl-gap) + var(--fill-frac,0) * (100% - (2 * var(--sl-pad) + var(--sl-label) + 2 * var(--sl-gap) + var(--sl-value))));background:var(--slider-fill);pointer-events:none;position:absolute;top:0;bottom:0;left:0}.slider-label{z-index:1;flex:0 0 var(--sl-label);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-size:13px;font-weight:500;line-height:1;position:relative;overflow:hidden}.slider-track{z-index:1;flex:auto;align-self:stretch;min-width:24px;position:relative}.slider-input{appearance:none;cursor:pointer;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.slider-input:focus-visible{outline:none}.slider-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:0 0;border:0;height:100%}.slider-input::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);border:0;border-radius:2px;width:4px;height:22px;margin-top:6px;box-shadow:0 1px 2px #0000002e}.slider-input::-moz-range-track{background:0 0;border:0;height:100%}.slider-input::-moz-range-thumb{background:var(--slider-thumb);border:0;border-radius:2px;width:4px;height:22px;box-shadow:0 1px 2px #0000002e}.slider-value{z-index:1;flex:0 0 var(--sl-value);text-align:right;color:var(--muted);font:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;background:0 0;border:0;padding:3px 5px;font-size:13px;font-weight:500;line-height:1;position:relative}.slider-value.is-editable{cursor:text}.slider-value.is-editable:hover{color:var(--ink);background:var(--hover);box-shadow:0 0 0 1px var(--line);border-radius:4px}.slider-value.is-editable:focus-visible{color:var(--ink);box-shadow:0 0 0 2px var(--accent);border-radius:4px;outline:none}.slider-value-edit{z-index:1;flex:0 0 var(--sl-value);text-align:right;border:1px solid var(--accent);background:var(--surface);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;border-radius:4px;padding:3px 5px;font-size:13px;font-weight:500;line-height:1;position:relative}.slider-value-edit:focus-visible{outline:none}.dropdown{width:100%;position:relative}.dropdown-trigger{width:100%;height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:inherit;box-shadow:var(--field-shadow);cursor:pointer;justify-content:space-between;align-items:center;gap:10px;padding:0 14px;font-size:13px;transition:background .12s,border-color .12s;display:flex}.dropdown-trigger:hover{background:var(--hover)}.dropdown-trigger:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);outline:none}.dropdown-trigger[aria-expanded=true]{border-color:var(--ink)}.dropdown-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-chevron{color:var(--muted);flex:none;transition:transform .18s cubic-bezier(.22,1,.36,1)}.dropdown-trigger[aria-expanded=true] .dropdown-chevron{transform:rotate(180deg)}.dropdown-menu{z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overscroll-behavior:contain;flex-direction:column;max-height:280px;padding:5px;display:flex;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto;box-shadow:0 12px 32px #18181b29}.dropdown-option{border-radius:var(--radius-md);width:100%;height:32px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:8px;padding:0 10px;font-size:13px;display:flex}.dropdown-option:hover,.dropdown-option:focus-visible{background:var(--hover);outline:none}.dropdown-option.is-active{font-weight:600}.dropdown-tick{color:var(--muted);flex:none}.switch{justify-content:space-between;align-items:center;gap:12px;display:flex}.switch-text{flex-direction:column;gap:2px;min-width:0;display:flex}.switch-label{color:var(--ink);font-size:13px;font-weight:500}.switch-desc{color:var(--muted);text-wrap:pretty;font-size:11px;line-height:1.3}.switch-track{background:var(--track-bg);width:40px;height:22px;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;--switch-knob:#fff;border:0;border-radius:999px;flex:none;padding:0;transition:background .18s;position:relative}.switch-track.is-on{background:var(--ink);box-shadow:none;--switch-knob:#fff}.switch-track:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);outline:none}.switch-thumb{background:var(--switch-knob);border-radius:50%;width:18px;height:18px;transition:transform .18s cubic-bezier(.22,1,.36,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000040}.switch-track.is-on .switch-thumb{transform:translate(18px)}@media (prefers-reduced-motion:reduce){.switch-track,.switch-thumb,.dropdown-chevron{transition:none}}.color-field{align-items:center;gap:8px;display:flex;position:relative}.color-swatch{width:var(--ctl-h);height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--swatch);box-shadow:var(--field-shadow),inset 0 0 0 1px #ffffff24;cursor:pointer;flex:none;padding:0}.color-swatch:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);outline:none}.color-hex{min-width:0;height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);box-shadow:var(--field-shadow);flex:1;padding:0 12px;font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.color-hex:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);outline:none}.color-pop{z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overscroll-behavior:contain;flex-direction:column;gap:12px;padding:12px;display:flex;position:absolute;bottom:calc(100% + 8px);left:0;right:0;box-shadow:0 12px 32px #18181b29}.color-area{border-radius:var(--radius-md);cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0),var(--hue);height:130px;position:relative}.color-area-knob{background:var(--knob);pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006}.color-hue{cursor:pointer;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:6px;height:12px;position:relative}.color-hue:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.color-hue-knob{background:var(--knob);pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006}.color-presets{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.color-preset{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--swatch);cursor:pointer;padding:0;transition:transform .1s;box-shadow:inset 0 0 0 1px #ffffff1f}.color-preset:hover{transform:scale(1.1)}.color-preset.is-active{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ink)}.color-preset:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent);outline:none}@media (prefers-reduced-motion:reduce){.color-preset{transition:none}}.segmented{background:var(--hover);border-radius:var(--radius-md);gap:2px;width:100%;padding:3px;display:inline-flex}.segmented-item{border-radius:calc(var(--radius-md) - 2px);min-width:0;height:28px;color:var(--muted);cursor:pointer;font:inherit;background:0 0;border:0;flex:1;font-size:12px;font-weight:500;transition:background .12s,color .12s}.segmented-item:hover{color:var(--ink)}.segmented-item.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px #00000014}.segmented-item:focus-visible{box-shadow:0 0 0 2px var(--accent);outline:none}