:root{--bg: #0a0813;--panel: #161228;--line: #2a2444;--ink: #f0ecff;--muted: #9b93c4;--accent: #b07cff;--gold: #ffd36e;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(900px 520px at 50% -10%,#1b1535,var(--bg));color:var(--ink);font-family:Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;user-select:none;touch-action:manipulation}.wrap{max-width:980px;margin:0 auto;padding:8px 12px 10px;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:6px;overflow:hidden}header{flex:0 0 auto}.bar,.hud,.tools,.share,.hint{flex:0 0 auto}header h1{margin:0;font-size:1.5rem;letter-spacing:4px;font-weight:800;background:linear-gradient(180deg,#e6d4ff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.tag{margin:2px 0 0;color:var(--muted);font-size:.72rem;line-height:1.3}.bar{display:flex;align-items:center;gap:7px;margin:0;flex-wrap:wrap}.spacer{flex:1}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:0;padding:7px 12px;font-size:.8rem;cursor:pointer}.seg button.active{background:linear-gradient(180deg,var(--accent),#8b51e6);color:#fff;font-weight:700}button.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:7px 11px;font-size:.8rem;cursor:pointer}button.btn:active{transform:translateY(1px)}button.btn.primary{background:linear-gradient(180deg,var(--accent),#8b51e6);color:#fff;font-weight:700;border:0}button.btn.gold{background:linear-gradient(180deg,var(--gold),#e8b73e);color:#2a1d05;font-weight:700;border:0}button.btn:disabled{opacity:.4;cursor:default}.hud{display:flex;gap:7px;margin:0;align-items:center;flex-wrap:wrap;font-size:.78rem}.hud .box{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px 9px}.hud .box b{color:var(--ink)}.hud .k{color:var(--muted)}.hud input[type=range]{width:110px;accent-color:var(--accent)}.stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:flex-start;overflow-x:auto;overflow-y:hidden}canvas{display:block;height:100%;width:auto;max-height:100%;flex:0 0 auto;background:linear-gradient(180deg,#0d0a1a,#08060f);border:1px solid var(--line);border-radius:12px;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#08060fd9;border-radius:12px;backdrop-filter:blur(2px);text-align:center;padding:14px}.overlay.hidden{display:none}.overlay h2{margin:0 0 6px;font-size:1.3rem}.overlay p{margin:0 0 12px;color:var(--muted);font-size:.84rem;line-height:1.5}.overlay b{color:var(--ink)}.tools{display:flex;flex-direction:column;gap:5px;margin:0}.toolrow{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;scrollbar-width:thin}.toolrow .tool{flex:0 0 auto}.toolrow.context{padding-top:6px;border-top:1px dashed var(--line)}.tool{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 9px;cursor:pointer;min-width:46px;position:relative}.tool .g{font-size:1.1rem;line-height:1}.tool .n{font-size:.56rem;color:var(--muted)}.tool.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.tool.active .n{color:var(--ink)}.tool.voice:after,.tool.chan:after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--vc)}.tool.voice.active,.tool.chan.active{border-color:var(--vc);box-shadow:0 0 0 1px var(--vc)}.share{margin:0;display:flex;gap:6px}.share input{flex:1;background:#0c0a16;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:5px 9px;font-size:.72rem;font-family:monospace}.hint{margin:0;color:var(--muted);font-size:.7rem;line-height:1.35;max-height:4.4em;overflow:hidden}.hint b{color:var(--accent)}