:root{--bg: #12141a;--panel: #1b1e27;--line: #2b2f3c;--text: #e8eaf0;--muted: #8b90a0;--rh: #4fc3f7;--lh: #ffb74d;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{max-width:1100px;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;gap:16px}.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}h1{margin:0;font-size:28px}#composer{margin:4px 0 0;color:var(--muted)}.now{display:flex;gap:24px;text-align:right}.now .label{display:block;font-size:12px;color:var(--muted)}.now strong{font-size:24px;font-variant-numeric:tabular-nums}.stage{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.sheet{height:480px;overflow:auto;background:#fff;color:#000}#roll{display:block;width:100%;height:480px}.stage[data-view=sheet] #roll,.stage[data-view=roll] .sheet{display:none}.views{display:flex}.views button{min-width:0;border-radius:0}.views button:first-child{border-radius:8px 0 0 8px}.views button:last-child{border-radius:0 8px 8px 0;border-left:0}.views button.selected{background:#2f7fd6;border-color:#2f7fd6}.paper{position:relative;margin:0 auto;cursor:pointer}.measure-highlight{position:absolute;background:#4fc3f733;border-radius:6px;pointer-events:none;transition:left .1s,top .1s,width .1s}.sheet .on-rh *,.sheet .on-lh *{fill:#0277bd;stroke:#0277bd}.sheet .on-lh *{fill:#e65100;stroke:#e65100}.song{display:flex;align-items:center;gap:8px}select{font:inherit;color:var(--text);background:#2a2e3b;border:1px solid var(--line);border-radius:8px;padding:6px 10px}.keyboard{position:relative;height:130px;border-top:3px solid #c0392b;background:#000}.key{position:absolute;top:0}.key.white{height:100%;background:#f4f4f1;border:1px solid #9a9a9a;border-top:0;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center}.key.white span{font-size:10px;color:#777;padding-bottom:4px}.key.black{height:62%;background:#1a1a1a;border-radius:0 0 3px 3px;z-index:1}.key.rh{background:var(--rh)}.key.lh{background:var(--lh)}.controls{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px}.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}button{font:inherit;color:var(--text);background:#2a2e3b;border:1px solid var(--line);border-radius:8px;padding:8px 16px;cursor:pointer;min-width:96px}button:hover{background:#343949}button.primary{background:#2f7fd6;border-color:#2f7fd6;min-width:130px}button.primary:hover{background:#3a8ce6}#progress{flex:1;min-width:160px}.mono{font-variant-numeric:tabular-nums;color:var(--muted)}.tempo{display:flex;align-items:center;gap:10px}.tempo .mono{min-width:64px}.hand{display:flex;align-items:center;gap:6px}.hand.rh{color:var(--rh)}.hand.lh{color:var(--lh)}.hint{margin-left:auto;font-size:13px;color:var(--muted)}@media(max-width:600px){.sheet,#roll{height:360px}.keyboard{height:90px}.hint{display:none}}