:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--fg:#f2ece2;--dim:#f2ece29e;--line:#ffdcaa29;--glass:#08080c94;--accent:#ffb566;font-family:system-ui,-apple-system,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:13px}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;color:var(--fg);overscroll-behavior:none;background:#000;margin:0;overflow:hidden}.stage{width:100vw;height:100vh;touch-action:none;cursor:grab;height:100dvh;display:block;position:fixed;inset:0}.stage:active{cursor:grabbing}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}kbd{border:1px solid var(--line);text-align:center;background:#ffffff0f;border-radius:4px;min-width:1.5em;padding:0 .35em;font:600 11px/1.6 ui-monospace,Cascadia Mono,Consolas,monospace;display:inline-block}.hud{pointer-events:none;padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));position:fixed;inset:0}.hud>*{pointer-events:auto}.hud-top{top:max(14px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));right:max(16px, env(safe-area-inset-right));pointer-events:none;justify-content:space-between;align-items:flex-start;gap:12px;display:flex;position:absolute}.hud-top>*{pointer-events:auto}.title h1{letter-spacing:.42em;text-shadow:0 0 18px #ffaa5a59;margin:0;font-size:18px;font-weight:600}.title p{color:var(--dim);letter-spacing:.06em;margin:2px 0 0;font-size:11px}.chips{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.chip{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--dim);white-space:nowrap;border-radius:999px;padding:5px 11px;font-size:12px}.chip b{color:var(--fg);font-weight:600}.chip.on b{color:var(--accent)}.chip.ghost{color:var(--fg)}.presets{top:72px;left:max(16px, env(safe-area-inset-left));flex-direction:column;gap:5px;display:flex;position:absolute}.presets button{text-align:left;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--dim);border-radius:8px;padding:5px 10px 5px 6px}.presets button.active{color:var(--fg);box-shadow:inset 2px 0 0 var(--accent);border-color:#ffb56699}.presets kbd{margin-right:6px}.drawer{top:64px;right:max(16px, env(safe-area-inset-right));border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:12px;flex-direction:column;width:292px;max-height:calc(100% - 150px);display:flex;position:absolute;overflow:hidden}.tabs{border-bottom:1px solid var(--line);display:flex}.tabs button{color:var(--dim);background:0 0;border:0;flex:1;padding:8px 2px;font-size:12px}.tabs button.active{color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}.panel{padding:8px 12px 4px;overflow-y:auto}.slider{padding:5px 0}.slider label{color:var(--dim);justify-content:space-between;gap:8px;font-size:12px;display:flex}.slider output{color:var(--fg);font-variant-numeric:tabular-nums}.slider input{width:100%;accent-color:var(--accent);height:18px;margin:4px 0 0}.debug-list{flex-direction:column;gap:3px;display:flex}.debug-list button{text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;align-items:flex-start;gap:8px;padding:4px 6px;display:flex}.debug-list button.active{background:#ffb56614;border-color:#ffb5668c}.debug-list b{font-size:12px;font-weight:600;display:block}.debug-list small{color:var(--dim);font-size:11px}.panel-foot{border-top:1px solid var(--line);color:var(--dim);justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;font-size:10.5px;display:flex}.reset{background:#ffb5661f;border:1px solid #ffb56680;border-radius:6px;flex:none;padding:4px 9px;font-size:12px}.hud-bottom{left:max(16px, env(safe-area-inset-left));right:max(16px, env(safe-area-inset-right));bottom:max(12px, env(safe-area-inset-bottom));pointer-events:none;flex-direction:column;align-items:flex-start;gap:6px;display:flex;position:absolute}.debug-desc{background:var(--glass);color:var(--dim);border-radius:6px;margin:0;padding:4px 10px;font-size:12px}.debug-desc b{color:var(--accent);font-weight:600}.keys{color:var(--dim);text-shadow:0 1px 3px #000;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;font-size:11px;list-style:none;display:flex}.hud-reveal{top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));border:1px solid var(--line);color:var(--dim);background:#08080c66;border-radius:999px;padding:5px 11px;font-size:11px;position:fixed}.overlay{text-align:center;background:#0a0806db;border:1px solid #ffb56680;border-radius:12px;flex-direction:column;gap:6px;max-width:min(420px,88vw);padding:16px 20px;line-height:1.5;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay.error{border-color:#ff5a5a99}@media (max-width:760px){.title h1{letter-spacing:.3em;font-size:15px}.title p{display:none}.hud-top{flex-direction:column;gap:8px}.chips{justify-content:flex-start}.chip{padding:4px 9px;font-size:11px}.presets{top:auto;bottom:calc(max(12px, env(safe-area-inset-bottom)) + 40px);scrollbar-width:none;flex-direction:row;padding:0 12px;left:0;right:0;overflow-x:auto}.presets button{flex:none;font-size:11.5px}.drawer{width:auto;max-height:52%;padding-bottom:env(safe-area-inset-bottom);border-bottom:0;border-radius:14px 14px 0 0;inset:auto 0 0}.drawer:not(.open){max-height:none}.hud-bottom{bottom:calc(max(12px, env(safe-area-inset-bottom)) + 76px)}.hud-bottom .keys{display:none}.debug-desc{font-size:11px}.drawer.open~.hud-bottom{display:none}.hud:has(.drawer.open) .presets{display:none}}
