:root{color-scheme:dark;--ink: #ededed;--muted: #a1a1a1;--surface: #171717;--control: #272727;--control-hover: #343434;--line: rgba(255, 255, 255, .1);--select: #dedede;--select-ink: #171717;--focus: #bdbdbd;--side-w: 340px;--tool-size: 44px;--tool-rail-w: 52px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%;background:#101010;color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}canvas{display:block;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity var(--vignette-fade, 1.1s) ease-out;background:radial-gradient(ellipse 78% 68% at 50% 46%,#0000 45%,#00000047 74%,#00000094)}.vignette[data-on]{opacity:1}@media (prefers-reduced-motion: reduce){.vignette{display:none}}@keyframes chrome-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.tool-rail .tool-btn,.nav-gizmos>*,.hud-count{animation:chrome-in .36s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(.12s + var(--i, 0) * 45ms)}.tool-rail .tool-btn:nth-child(1){--i: 0}.tool-rail .tool-btn:nth-child(2){--i: 1}.tool-rail .tool-btn:nth-child(3){--i: 2}.tool-rail .tool-btn:nth-child(4){--i: 3}.tool-rail .tool-btn:nth-child(5){--i: 4}.tool-rail .tool-btn:nth-child(6){--i: 5}.nav-gizmos>:nth-child(1){--i: 2}.nav-gizmos>:nth-child(2){--i: 3}.nav-gizmos>:nth-child(3){--i: 4}.nav-gizmos>:nth-child(4){--i: 5}@media (prefers-reduced-motion: reduce){.tool-rail .tool-btn,.nav-gizmos>*,.hud-count{animation:none}}.panel{position:fixed;display:flex;gap:10px;align-items:stretch;pointer-events:none}.panel>*{pointer-events:auto}.panel[data-edge=side]{top:0;bottom:0;left:0;flex-direction:row-reverse}.panel[data-edge=sheet]{left:0;right:0;bottom:0;flex-direction:column}.tool-rail{display:flex;flex-direction:column;align-items:flex-start;align-self:center;gap:8px;width:var(--tool-rail-w);padding:6px 4px}.tool-btn{display:flex;align-items:center;flex:none;height:var(--tool-size);padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 2px 8px #00000059;color:var(--muted);font:inherit;cursor:pointer;transition:background-color .12s ease,color .12s ease,padding-right .16s cubic-bezier(.22,.61,.36,1)}.tool-icon{display:grid;place-items:center;flex:none;width:var(--tool-size);height:var(--tool-size)}.tool-label{display:block;max-width:0;overflow:hidden;transition:max-width .18s cubic-bezier(.22,.61,.36,1)}.tool-label>span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tool-btn:hover,.tool-btn:focus-visible{padding-right:14px;background:var(--control);color:var(--ink)}.tool-btn:hover .tool-label,.tool-btn:focus-visible .tool-label{max-width:14ch}.tool-btn[data-on]{background:var(--select);color:var(--select-ink)}.tool-btn[data-drag]{touch-action:none;cursor:grab}.tool-btn[data-drag][data-on]{cursor:grabbing}.nav-gizmos{position:fixed;display:flex;flex-direction:column;align-items:center;gap:8px;right:calc(20px + env(safe-area-inset-right,0px));transition:left .26s cubic-bezier(.22,.61,.36,1),right .26s cubic-bezier(.22,.61,.36,1),bottom .26s cubic-bezier(.22,.61,.36,1)}.nav-gizmos:not([data-lay=strip]){top:calc(20px + env(safe-area-inset-top,0px))}.nav-gizmos[data-lay=strip]{bottom:calc(68px + env(safe-area-inset-bottom,0px))}.panel[data-edge=sheet][data-open] .nav-gizmos[data-lay=strip]{bottom:calc(min(38dvh,380px) + 68px + env(safe-area-inset-bottom,0px))}.nav-gizmos[data-side=left]{right:auto;left:calc(20px + env(safe-area-inset-left,0px))}.panel[data-edge=side][data-open] .nav-gizmos[data-side=left]{left:calc(var(--side-w) + 24px + env(safe-area-inset-left,0px))}.nav-gizmos[data-lay=strip]{transition:left .26s cubic-bezier(.22,.61,.36,1),right .26s cubic-bezier(.22,.61,.36,1),bottom .26s cubic-bezier(.22,.61,.36,1),transform .16s cubic-bezier(.22,.61,.36,1)}.nav-gizmos[data-lay=strip][data-side=right][data-pushed]{transform:translate(-72px)}.nav-gizmos[data-lay=strip][data-side=left][data-pushed]{transform:translate(72px)}.nav-flip{display:grid;place-items:center;width:var(--tool-size);height:var(--tool-size);padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) drop-shadow(0 0 1px rgba(0,0,0,.55))}.nav-flip:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:12px}.nav-flip-icon{transition:transform .16s ease}.nav-gizmos[data-side=right] .nav-flip-icon{transform:rotate(-90deg)}.nav-gizmos[data-side=left] .nav-flip-icon{transform:rotate(90deg)}.nav-gizmos .tool-btn{width:var(--tool-size);min-width:var(--tool-size);justify-content:center;background:#17171747;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 6px #00000040;color:var(--ink)}.nav-gizmos .tool-btn:hover,.nav-gizmos .tool-btn:focus-visible{padding-right:0;background:#27272780}.nav-gizmos .tool-btn[data-on]{background:var(--select);color:var(--select-ink)}.nav-gizmos .tool-label{max-width:0}.tool-chevron{transition:transform .2s ease;transform:rotate(90deg)}.tool-btn[data-on] .tool-chevron{transform:rotate(-90deg)}.tool-rail[data-lay=strip] .tool-chevron{transform:rotate(0)}.tool-rail[data-lay=strip] .tool-btn[data-on] .tool-chevron{transform:rotate(180deg)}.tool-rail[data-lay=strip]{flex-direction:row;align-items:stretch;justify-content:center;flex-wrap:wrap;width:auto;gap:5px;padding:0 6px calc(4px + env(safe-area-inset-bottom,0px))}.panel[data-edge=side] .tool-rail[data-lay=strip]{align-self:flex-end;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}.tool-rail[data-lay=strip] .tool-btn{justify-content:center;width:var(--tool-size);height:var(--tool-size);min-width:var(--tool-size);flex:none;padding:0}.tool-rail[data-lay=strip] .tool-icon{width:100%;height:100%}.tool-rail[data-lay=strip] .tool-label{max-width:0}.tool-rail[data-lay=strip] .tool-btn:hover,.tool-rail[data-lay=strip] .tool-btn:focus-visible{padding-right:0}.tool-toast{position:fixed;left:50%;transform:translate(-50%);bottom:calc(var(--tool-size) + 22px + env(safe-area-inset-bottom,0px));margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:0 2px 8px #00000059;color:var(--ink);font-size:12px;white-space:nowrap;pointer-events:none}.hud-count{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px));margin:0;color:var(--ink);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.35),0 0 1px rgba(0,0,0,.55),1px 0 1px rgba(0,0,0,.3),-1px 0 1px rgba(0,0,0,.3);pointer-events:none;transition:left .26s cubic-bezier(.22,.61,.36,1)}.panel[data-edge=side][data-open]~.hud-count,.panel[data-edge=side][data-open] .hud-count{left:calc(var(--side-w) + 24px + env(safe-area-inset-left,0px))}.panel-collapse{display:grid;min-height:0;min-width:0;transition:grid-template-rows .26s cubic-bezier(.22,.61,.36,1),grid-template-columns .26s cubic-bezier(.22,.61,.36,1),visibility 0s .26s;visibility:hidden}.panel[data-open] .panel-collapse{visibility:visible;transition:grid-template-rows .26s cubic-bezier(.22,.61,.36,1),grid-template-columns .26s cubic-bezier(.22,.61,.36,1),visibility 0s}.panel[data-edge=sheet] .panel-collapse{grid-template-rows:0fr}.panel[data-edge=sheet][data-open] .panel-collapse{grid-template-rows:1fr}.panel[data-edge=side] .panel-collapse{grid-template-columns:0fr}.panel[data-edge=side][data-open] .panel-collapse{grid-template-columns:1fr}.panel-clip{overflow:hidden;min-height:0;min-width:0}.panel-surface{display:flex;flex-direction:column;gap:16px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:var(--surface)}.panel[data-edge=side] .panel-surface{width:var(--side-w);height:100%;padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));padding-top:calc(14px + env(safe-area-inset-top,0px));border-right:1px solid var(--line)}.panel[data-edge=sheet] .panel-surface{width:100%;max-height:min(38dvh,380px);padding:14px calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));border-top:1px solid var(--line);border-radius:16px 16px 0 0}.panel-rows,.hud-group{display:flex;flex-direction:column}.hud-group+.hud-group{border-top:1px solid var(--line)}.hud-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:12px 0 8px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.hud-group-chevron{flex:none;color:var(--muted);transition:transform .2s ease;transform:rotate(180deg)}.hud-group[data-open] .hud-group-chevron{transform:none}.hud-group-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s cubic-bezier(.22,.61,.36,1),visibility 0s .2s;visibility:hidden}.hud-group[data-open] .hud-group-body{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .2s cubic-bezier(.22,.61,.36,1),visibility 0s}.hud-group-clip{overflow:hidden;min-height:0}.hud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:6px;padding-bottom:12px}.hud-group-clip{container-type:inline-size}@container (min-width: 240px){.hud-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}}.hud-row{display:flex;align-items:center;gap:8px}.hud-sliders{display:flex;flex-direction:column;gap:4px}.hud-label{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em}.hud-row>.hud-label{width:62px;flex:none}.hud-value{font-variant-numeric:tabular-nums;min-width:24px;text-align:right}.hud-hint{margin:0;color:var(--muted);font-size:12px}.hud-group+.hud-hint{padding-top:14px;border-top:1px solid var(--line)}.hud-hint+.hud-hint{padding-top:8px}.hud-of{color:var(--muted);font-size:15px;margin-left:3px}.chip{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;border:0;border-radius:8px;background:var(--control);color:var(--ink);font:inherit;line-height:1.2;cursor:pointer;transition:background-color .12s ease,color .12s ease}.chip:hover{background:var(--control-hover)}.chip-on,.chip-on:hover{background:var(--select);color:var(--select-ink)}.chip-action{justify-content:flex-start;gap:8px}.chip-swatch{display:inline-flex;flex-direction:column;flex:none;width:11px;height:11px;margin-right:7px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px #00000059}.chip-swatch>span{flex:1}.chip-swatch-solid{display:inline-block}.cpick-trigger{display:inline-flex;align-items:center;gap:9px;flex:1;min-width:0;min-height:44px;padding:8px 10px;border:0;border-radius:8px;background:var(--control);color:var(--ink);font:inherit;line-height:1.2;text-align:left;cursor:pointer;transition:background-color .12s ease}.cpick-trigger:hover{background:var(--control-hover)}.cpick-trigger[data-named]{width:100%}.cpick-trigger:not([data-named]){padding:3px;overflow:hidden}.cpick-trigger:not([data-named]) .cpick-chip{flex:1;width:auto;height:auto;align-self:stretch;border-radius:8px}.cpick-chip{display:flex;flex-direction:column;flex:none;width:22px;height:22px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px #00000059,inset 0 0 0 1px #ffffff4d}.cpick-chip>span{flex:1}.cpick-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-row-colors{min-height:44px}.cpick-pop{position:fixed;inset:auto;width:244px;max-width:calc(100vw - 16px);max-height:min(78vh,460px);margin:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 10px 30px #00000080;overflow:hidden}.cpick-pop:popover-open{display:flex;flex-direction:column;gap:8px}.cpick-pop::backdrop{background:transparent}.cpick-title{margin:0;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em}.cpick-presets{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cpick-preset{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 8px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.cpick-preset:hover{background:var(--control)}.cpick-preset[data-on],.cpick-preset[data-on]:hover{background:var(--select);color:var(--select-ink)}.cpick-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.cpick-caution{flex:none;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--muted)}.cpick-preset[data-on] .cpick-caution{background:var(--select-ink)}.cpick-free{display:flex;align-items:center;gap:8px;flex:none;padding-top:8px;border-top:1px solid var(--line)}.cpick-free-label{color:var(--muted);font-size:12px;white-space:nowrap}.cpick-hex{flex:1;min-width:0;height:30px;padding:0 8px;border:0;border-radius:7px;background:var(--control);color:var(--ink);font:13px/1 ui-monospace,SF Mono,Menlo,Consolas,monospace;text-transform:uppercase}.cpick-hex[aria-invalid]{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}.cpick-drop{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:7px;background:var(--control);color:var(--ink);cursor:pointer}.cpick-drop:hover{background:var(--control-hover)}.cpick-drop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.cpick-picker{--cpick-sv-h: clamp(56px, 22vh, 190px);display:flex;gap:8px;flex:none;-webkit-user-select:none;user-select:none}.cpick-sv{position:relative;flex:1;min-width:0;height:var(--cpick-sv-h);border-radius:8px;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0);box-shadow:inset 0 0 0 1px #ffffff29;touch-action:none;cursor:crosshair}.cpick-hue{position:relative;flex:none;width:14px;height:var(--cpick-sv-h);border-radius:7px;background-image:linear-gradient(to bottom,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:pointer}.cpick-thumb{position:absolute;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #fff,0 0 0 3px #00000073;pointer-events:none}.cpick-sv:focus-visible,.cpick-hue:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.hud-ratio[data-low]{color:var(--ink);font-weight:700}.hud-range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:20px;background:transparent;cursor:pointer}.hud-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--control)}.hud-range::-moz-range-track{height:4px;border-radius:999px;background:var(--control)}.hud-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--ink);border:none}.hud-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:none}.hud-range:focus-visible,.chip:focus-visible,.hud-group-head:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.tool-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}@media (pointer: coarse){.chip{min-height:44px}.hud-range{height:44px}}@media (prefers-reduced-motion: reduce){.panel-collapse,.hud-group-body,.hud-group-chevron,.tool-btn,.tool-label,.tool-chevron,.chip{transition:none}}