:root{--ink: #12212b;--panel: rgba(255, 255, 255, .92);--accent: #e5533d;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#cfe6f5;font:15px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.panel{position:fixed;inset:0;margin:auto;width:min(340px,calc(100% - 32px));height:fit-content;background:var(--panel);backdrop-filter:blur(8px);border-radius:18px;padding:22px;text-align:center;box-shadow:0 18px 50px #12212b40}.panel h1{margin:0 0 4px;font-size:26px;letter-spacing:-.02em}.panel .sub{margin:0 0 16px;opacity:.65;font-size:14px}.panel input[type=text],.panel input:not([type]){width:100%;padding:11px 13px;font-size:16px;border:1px solid rgba(18,33,43,.15);border-radius:11px;outline:none}.panel input:focus{border-color:var(--accent)}.row{display:flex;gap:8px;margin:14px 0;justify-content:center}.row label{flex:1;font-size:12px;opacity:.7;display:grid;gap:5px;justify-items:center}.row input[type=color]{width:100%;height:34px;padding:0;border:1px solid rgba(18,33,43,.15);border-radius:9px;background:none;cursor:pointer}button{width:100%;padding:12px;font-size:16px;font-weight:600;color:#fff;background:var(--accent);border:0;border-radius:11px;cursor:pointer}button:active{transform:translateY(1px)}.hint{margin:12px 0 0;font-size:12px;opacity:.5}#hud{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;gap:8px;align-items:center;justify-content:space-between;pointer-events:none}#online{background:var(--panel);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;box-shadow:0 4px 14px #12212b26}button.ghost{width:auto;pointer-events:auto;background:var(--panel);color:var(--ink);font-size:13px;padding:6px 14px;border-radius:999px;box-shadow:0 4px 14px #12212b26}button.ghost.on{background:var(--accent);color:#fff}#stick{position:fixed;left:26px;bottom:max(26px,env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;background:#ffffff47;border:2px solid rgba(255,255,255,.5);touch-action:none}#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#ffffffd9;box-shadow:0 3px 10px #12212b40}[hidden]{display:none!important}