:root{--bg:#030305;--fg:#ece9e4eb;--dim:#ece9e480;--faint:#ece9e42e;--line:#ece9e41f;--ease:cubic-bezier(.22, 1, .36, 1);--mono:ui-monospace, "SF Mono", Menlo, monospace;--top:max(20px, env(safe-area-inset-top));--right:max(20px, env(safe-area-inset-right));--bottom:max(20px, env(safe-area-inset-bottom));--left:max(22px, env(safe-area-inset-left))}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;margin:0;font:12.5px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}canvas#c{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}kbd{border:1px solid var(--faint);min-width:16px;font:10.5px/15px var(--mono);text-align:center;color:var(--fg);border-radius:3px;margin-right:2px;padding:0 3px;display:inline-block}#loader{pointer-events:none;opacity:0;transition:opacity .9s var(--ease);place-items:center;display:grid;position:fixed;inset:0}body[data-state=loading] #loader{opacity:1}#loader .line{background:var(--line);width:120px;height:1px;overflow:hidden}#loader-fill{background:var(--dim);transform-origin:0;height:100%;transition:transform .3s var(--ease);display:block;transform:scaleX(0)}#label{white-space:nowrap;color:var(--dim);letter-spacing:.01em;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);will-change:transform;font-size:12px;position:absolute;top:0;left:0}#label.show{opacity:1}body:not([data-state=gallery]) #label{opacity:0}#hud-title{left:var(--left);top:var(--top);pointer-events:none;opacity:0;text-shadow:0 1px 12px #000000b3,0 0 2px #00000080;position:fixed}body.show-title #hud-title{animation:title-fade 3.4s var(--ease) forwards}#title{color:var(--fg);font-size:13px}#meta{font:10.5px/1.5 var(--mono);color:var(--dim)}@keyframes title-fade{0%{opacity:0;transform:translateY(3px)}15%{opacity:1;transform:none}70%{opacity:1}to{opacity:0}}#close,#view{right:var(--right);top:var(--top);border:1px solid var(--faint);-webkit-backdrop-filter:blur(8px);width:30px;height:30px;color:var(--dim);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s var(--ease), color .2s, border-color .2s, transform .2s var(--ease);background:#03030559;border-radius:50%;padding:0;font-size:16px;line-height:28px;position:fixed}#view{right:calc(var(--right) + 40px);place-items:center;display:grid}body[data-state=inside] :is(#close,#view),body[data-state=operator] :is(#close,#view){opacity:1;pointer-events:auto}:is(#close,#view):hover,#view[aria-pressed=true]{color:var(--fg);border-color:var(--dim)}:is(#close,#view):active{transform:scale(.94)}#help-btn{right:var(--right);bottom:var(--bottom);border:1px solid var(--line);width:26px;height:26px;color:var(--faint);cursor:pointer;background:0 0;border-radius:50%;padding:0;font-size:12px;transition:color .2s,border-color .2s;position:fixed}#help-btn:hover,body.help #help-btn{color:var(--fg);border-color:var(--faint)}#tune-btn{right:calc(var(--right) + 34px);bottom:var(--bottom);border:1px solid var(--line);width:26px;height:26px;color:var(--faint);cursor:pointer;background:0 0;border-radius:50%;place-items:center;padding:0;transition:color .2s,border-color .2s;display:grid;position:fixed}#tune-btn:hover,#tune-btn[aria-pressed=true]{color:var(--fg);border-color:var(--faint)}#tune{right:var(--right);bottom:calc(var(--bottom) + 38px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);opacity:0;transform-origin:100% 100%;pointer-events:none;width:min(260px,100vw - 40px);max-height:calc(100vh - 120px);transition:opacity .22s var(--ease), transform .22s var(--ease);scrollbar-width:thin;background:#06060ab8;border-radius:12px;position:fixed;overflow:auto;transform:translateY(6px)scale(.98)}body.tune #tune{opacity:1;pointer-events:auto;transform:none}body.help #tune{opacity:0;pointer-events:none}#tune .lil-gui{--background-color:transparent;--text-color:var(--dim);--title-background-color:transparent;--title-text-color:var(--fg);--widget-color:#ece9e412;--hover-color:#ece9e41f;--focus-color:#ece9e429;--number-color:#a6ccff;--string-color:var(--fg);--font-size:11px;--input-font-size:11px;--font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-family-mono:var(--mono);--padding:6px;--spacing:5px;--widget-height:20px;--widget-padding:0 0 0 4px;--widget-border-radius:4px;--name-width:40%;--slider-knob-width:2px;--slider-input-width:28%;--folder-indent:6px;-webkit-user-select:none;user-select:none}#tune .lil-gui.root{width:100%!important}#tune .lil-gui .title{letter-spacing:.02em}#tune .lil-gui.root>.title{padding:4px var(--padding);font-weight:500}#tune .lil-gui .lil-gui .title{color:var(--dim)}#help{right:var(--right);bottom:calc(var(--bottom) + 38px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);opacity:0;transform-origin:100% 100%;pointer-events:none;width:min(300px,100vw - 40px);transition:opacity .22s var(--ease), transform .22s var(--ease);background:#06060ab8;border-radius:12px;gap:14px;padding:14px 16px;display:grid;position:fixed;transform:translateY(6px)scale(.98)}body.help #help{opacity:1;pointer-events:auto;transform:none}#help h3{font:10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}#help dl{grid-template-columns:auto 1fr;gap:4px 14px;margin:0;display:grid}#help dt{color:var(--dim);white-space:nowrap}#help dd{color:var(--fg);margin:0}#help dd.sub{color:var(--faint);margin-top:-2px;font-size:11px}#drop{border:1px dashed var(--faint);color:var(--dim);opacity:0;pointer-events:none;transition:opacity .2s var(--ease);border-radius:16px;place-items:center;display:grid;position:fixed;inset:12px}body.dragging #drop{opacity:1}#status{left:50%;top:var(--top);font:11px/1.4 var(--mono);color:var(--dim);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s var(--ease), transform .3s var(--ease);position:fixed;transform:translate(-50%,-4px)}#status.show{opacity:1;transform:translate(-50%)}@media (width<=640px){#help{width:auto;left:12px;right:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}body.show-title #hud-title{opacity:.8;animation:none}}
