:root{--bg-main: #fdfedc;--bg-panel: #ebebbb;--ink: rgba(254, 253, 221, .92);--ink-dim: rgba(254, 253, 221, .65);--ink-panel: rgba(28, 26, 14, .92);--ink-panel-dim: rgba(28, 26, 14, .65);--note-green: #1cd04b;--note-orange: #f38b0d;--frame-w: 1359;--frame-h: 747;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg-main);color:var(--ink)}button,input,select{font:inherit}.app-root{height:100%;display:grid;place-items:center;background:var(--bg-main)}.app-frame{width:min(100vw,calc(100vh * (var(--frame-w) / var(--frame-h))));height:min(100vh,calc(100vw * (var(--frame-h) / var(--frame-w))));aspect-ratio:var(--frame-w) / var(--frame-h);background:var(--bg-main);overflow:hidden}.page{height:100%;width:100%;display:grid;place-items:center;padding:16px;overflow:auto}.panel{width:min(720px,92%);padding:22px 18px;background:var(--bg-panel);border-radius:10px;max-height:100%;overflow:auto;--ink: var(--ink-panel);--ink-dim: var(--ink-panel-dim);color:var(--ink)}.panel-title{margin:0 0 14px;font-size:18px;letter-spacing:.06em;color:var(--ink)}.btn{appearance:none;border:0;border-radius:10px;padding:12px 16px;background:#ffffff1a;color:var(--ink);cursor:pointer}.panel .btn{background:#00000014}.panel input[type=text],.panel input[type=number],.panel select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.15);background:#ffffff8c;color:var(--ink)}.panel input[type=checkbox],.panel input[type=radio]{accent-color:rgba(28,26,14,.85)}.panel input[type=color]{width:44px;height:28px;padding:0;border:1px solid rgba(0,0,0,.18);border-radius:8px;background:transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.muted{color:var(--ink-dim)}.error{margin-top:12px;color:#ff5a5a}.hidden{display:none}.player[data-v-a9adfb06]{height:100%;display:grid;grid-template-rows:125fr 491fr 131fr}.player-header[data-v-a9adfb06],.player-footer[data-v-a9adfb06]{background:var(--bg-panel)}.player-header[data-v-a9adfb06],.player-main[data-v-a9adfb06],.player-footer[data-v-a9adfb06]{min-height:0;min-width:0}.player-title[data-v-a9adfb06]{height:100%;display:grid;place-items:center;color:var(--ink);font-family:Times New Roman,Georgia,serif;font-size:clamp(28px,6.5vmin,48px);line-height:1;font-style:italic;letter-spacing:.06em;text-transform:uppercase;opacity:.9}.player-main[data-v-a9adfb06]{position:relative}.piano-canvas[data-v-a9adfb06]{width:100%;height:100%;display:block}.webgpu-error[data-v-a9adfb06]{position:absolute;inset:12px;padding:10px 12px;border-radius:10px;background:#00000040;color:var(--ink)}.player-footer[data-v-a9adfb06]{position:relative;padding:0;--footer-key-font: clamp(18px, 3.4vmin, 28px);--footer-label-font: clamp(14px, 2.4vmin, 18px);--footer-bottom-inset: 20%;--footer-bar-h: clamp(5px, 1vmin, 6px);--footer-wave-h: clamp(10px, 2.2vmin, 18px)}.footer-left[data-v-a9adfb06],.footer-center[data-v-a9adfb06],.footer-right[data-v-a9adfb06]{position:absolute;top:10%;bottom:10%}.footer-left[data-v-a9adfb06]{left:10.53%;width:14%;top:19%;bottom:16%}.footer-center[data-v-a9adfb06]{left:41.65%;width:16.7%;top:13%;bottom:var(--footer-bottom-inset)}.footer-right[data-v-a9adfb06]{left:69.39%;width:19.94%;top:4%;bottom:2%}.footer-waveform[data-v-a9adfb06]{position:absolute;left:69.39%;width:19.94%;height:var(--footer-wave-h);bottom:calc(var(--footer-bottom-inset) + var(--footer-bar-h) - var(--footer-wave-h));pointer-events:none}.footer-canvas[data-v-a9adfb06]{width:100%;height:100%;display:block}.footer-center[data-v-a9adfb06]{display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;gap:clamp(4px,.9vmin,6px)}.pitch-grid[data-v-a9adfb06]{display:grid;grid-auto-flow:column;--pitch-size: clamp(10px, 1.74vmin, 13px);--pitch-gap: clamp(4px, .8vmin, 6px);grid-auto-columns:var(--pitch-size);gap:var(--pitch-gap);height:var(--pitch-size);align-items:center;align-self:start}.pitch-cell[data-v-a9adfb06]{position:relative;width:var(--pitch-size);height:var(--pitch-size)}.pitch-outline[data-v-a9adfb06]{display:none}.pitch-fill[data-v-a9adfb06]{position:absolute;inset:0;background:var(--ink);border-radius:0;transition:opacity 40ms linear}.footer-chord[data-v-a9adfb06]{font-size:var(--footer-key-font);font-family:Times New Roman,Georgia,serif;font-style:italic;letter-spacing:.06em;opacity:.9}.footer-progress[data-v-a9adfb06]{position:relative;width:100%;height:var(--footer-bar-h);cursor:pointer;border-radius:3px}.progress-bg[data-v-a9adfb06]{position:absolute;inset:0;background:#ffffff40;border-radius:3px}.progress-bar[data-v-a9adfb06]{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:3px}.footer-right[data-v-a9adfb06]{display:grid;gap:1px;align-content:start;font-size:var(--footer-label-font);line-height:1}.footer-right-label[data-v-a9adfb06],.footer-numbers[data-v-a9adfb06],.footer-right-progress[data-v-a9adfb06]{justify-self:end}.footer-right-beat-progress[data-v-a9adfb06]{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:1px}.beat-step[data-v-a9adfb06]{height:100%;border-radius:2px;background:#ffffff40}.beat-step.filled[data-v-a9adfb06]{background:var(--ink)}.footer-numbers[data-v-a9adfb06]{display:flex;gap:clamp(8px,1.8vmin,14px);font-size:var(--footer-key-font);font-variant-numeric:tabular-nums;letter-spacing:.06em;line-height:1}.footer-right-progress[data-v-a9adfb06]{position:relative;width:65%;height:var(--footer-bar-h);border-radius:3px}.footer-controls[data-v-a9adfb06]{width:100%;display:grid;justify-items:stretch;align-self:end}