:root{--bg:#120f1c;--card:#1d1930;--ink:#f3eee6;--mut:#a59fb8;--acc:#ffb347;--acc2:#ff5e8a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
main{max-width:760px;margin:0 auto;padding:14px 14px 40px}
header h1{margin:4px 0 0;font-size:28px;letter-spacing:.5px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:2px 0 12px;color:var(--mut)}
.stage-wrap{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:4/3.4;box-shadow:0 10px 40px #0008}
canvas{width:100%;height:100%;display:block;touch-action:manipulation}
.hud{position:absolute;left:12px;top:10px;display:flex;gap:10px;align-items:center;pointer-events:none}
#count{font:800 30px/1 ui-monospace,monospace;color:var(--acc);text-shadow:0 2px 8px #0009;min-width:28px}
#moveName{font-size:13px;color:#fff;background:#0007;padding:4px 9px;border-radius:99px}
.big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;padding:14px 26px;border-radius:99px;border:0;background:var(--acc);color:#1a1200;font-weight:800;cursor:pointer;box-shadow:0 6px 30px #ffb34766}
.big-play.hide{display:none}
.panel{background:var(--card);border-radius:18px;margin-top:12px;padding:12px 14px}
.row{display:flex;align-items:center;gap:10px;margin:9px 0;flex-wrap:wrap}
.row>label{width:92px;color:var(--mut);font-size:13px}
.row.slider label{width:120px}
.row.slider input{flex:1;min-width:140px;accent-color:var(--acc)}
.row b{color:var(--ink);font-weight:700}
.buttons{gap:8px}
button{font:inherit;color:var(--ink);background:#2b2645;border:1px solid #3c3560;border-radius:10px;padding:9px 12px;cursor:pointer}
button:hover{border-color:#5b5290}
button.primary{background:var(--acc);color:#1a1200;border-color:var(--acc);font-weight:700}
.seg{display:flex;flex-wrap:wrap;gap:0;border-radius:10px;overflow:hidden;border:1px solid #3c3560}
.seg button{border:0;border-radius:0;border-right:1px solid #3c3560;padding:8px 11px;background:#241f3b}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--acc2);color:#fff;font-weight:700}
.note{color:var(--mut);font-size:13px;margin:12px 0 4px}
.credit{color:var(--mut);font-size:12px}
.credit a{color:var(--acc)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#000c;color:#fff;padding:9px 16px;border-radius:99px;font-size:14px}
@media (max-width:480px){.row>label{width:70px}.row.slider label{width:100%}header h1{font-size:24px}}