:root{--ink: #0d0a16;--ink2: #1b1630;--line: #4a3f6b;--paper: #f6f1e0;--gold: #f5c33b;--red: #e0503c;--green: #67c23a;--font: "Courier New", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:#07060c;color:var(--paper);font-family:var(--font);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1a1430,#07060c 70%)}#stage{position:relative;line-height:0;box-shadow:0 0 0 3px #2a2247,0 0 40px #5a46a073}#screen{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#6ab8f0}.overlay{position:absolute;inset:0;display:grid;place-items:center;line-height:1.45;background:#080610d1;backdrop-filter:blur(2px);padding:12px;overflow:auto}.overlay.hidden,.panel{display:none}.panel.active{display:block;width:min(100%,460px);max-height:100%;overflow:auto;text-align:center;border:2px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#221b3c,#14102a);padding:16px 18px 18px;box-shadow:inset 0 0 0 2px #0d0a16}.panel.wide.active{width:min(100%,560px);text-align:left}.logo{margin:6px 0 0;font-size:34px;letter-spacing:3px;color:var(--gold);text-shadow:0 3px 0 #8a4a12,0 4px 0 #000}.logo span{display:block;font-size:34px;color:#ff8f4a;text-shadow:0 3px 0 #7a2a12,0 4px 0 #000}.tagline{margin:4px 0 14px;font-size:12px;color:#b9aee0}h2{margin:2px 0 12px;font-size:20px;color:var(--gold);letter-spacing:2px}h3{margin:16px 0 6px;font-size:13px;color:#b9aee0;letter-spacing:1px}.btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}.btn-row.column{flex-direction:column;align-items:stretch}.btn{font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:1px;color:var(--paper);background:#33295c;border:2px solid #574a8c;border-radius:6px;padding:9px 14px;cursor:pointer;transition:transform .06s,background .12s}.btn:hover{background:#453a78}.btn:active{transform:translateY(2px)}.btn.primary{background:#2f7d33;border-color:#55b45a}.btn.primary:hover{background:#379340}.btn.danger{background:#7d2f2f;border-color:#b45555}.keys{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:11px;text-align:left;color:#ded6ff;margin:10px 0}.keys div{display:flex;gap:6px;align-items:baseline}.keys b{color:var(--gold);white-space:nowrap}.keys span{color:#a79ccd}.hiscore,.score-line{font-size:12px;color:#ded6ff;margin:8px 0 0}.hiscore b,.score-line b{color:var(--gold)}.legal{font-size:10px;color:#7c72a4;margin:10px 0 0}.rows{display:grid;gap:8px}.row{display:grid;grid-template-columns:150px auto 1fr auto;gap:8px;align-items:center;font-size:12px;background:#1b1636;border:1px solid #332a5c;border-radius:5px;padding:7px 9px}.row>span{color:#ded6ff}.row em{font-style:normal;font-size:11px;color:var(--gold)}.row em.hint{grid-column:3 / span 2;color:#8d84b8}.row select,.row input[type=range]{width:100%}.row select{font-family:var(--font);background:#0f0c1e;color:var(--paper);border:1px solid #453a78;border-radius:4px;padding:4px}.binds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}.bind{display:flex;justify-content:space-between;gap:6px;align-items:center;font-size:11px;background:#1b1636;border:1px solid #332a5c;border-radius:5px;padding:6px 8px}.bind button{font-family:var(--font);font-size:11px;color:var(--gold);background:#0f0c1e;border:1px solid #453a78;border-radius:4px;padding:3px 7px;cursor:pointer;min-width:62px}.bind button.listening{color:#fff;background:var(--red);border-color:#ff9a8a}.tally{list-style:none;padding:0;margin:8px auto 12px;font-size:13px;display:grid;gap:4px;max-width:290px}.tally li{display:flex;justify-content:space-between;color:#ded6ff}.tally li b{color:var(--gold)}.tally li.total{border-top:1px dashed #574a8c;padding-top:4px;margin-top:2px}.touch{position:absolute;inset:0;pointer-events:none;line-height:1}.touch.hidden{display:none}.tgroup{position:absolute;bottom:10px;display:flex;gap:8px;pointer-events:auto}.tgroup.left{left:10px}.tgroup.right{right:10px}.tbtn{font-family:var(--font);font-size:15px;font-weight:700;color:#fff;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:#1e183c80;pointer-events:auto;touch-action:none}.tbtn.pressed{background:#f0be3cbf}.tbtn.jump{width:64px;height:64px;font-size:12px;background:#3c8c468c}.tbtn.run{font-size:12px;background:#a0463c80}.tbtn.pausebtn{position:absolute;top:8px;right:8px;width:34px;height:34px;font-size:12px}@media (max-width: 480px){.keys{grid-template-columns:1fr}.row{grid-template-columns:110px auto 1fr}}