:root{color-scheme:dark;--bg: #141210;--bg-raise: #1e1a16;--line: #34302a;--ink: #f6f1e7;--muted: #a89b8c;--gold: #e4c27a;--gold-deep: #b8883e;--danger: #e07a62;--ok: #8fbf8a;--white-key: #f7f1e6;--white-edge: #d9d0c2;--black-key: #221f1c;font-family:Segoe UI,Malgun Gothic,sans-serif;background:var(--bg);color:var(--ink)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(900px 420px at 50% 108%,rgba(228,194,122,.16),transparent 70%),var(--bg)}button,select,input{font:inherit;color:inherit}.arm-banner{display:block;width:min(1180px,calc(100% - 32px));margin:16px auto 0;padding:16px 18px;border:0;border-radius:14px;background:var(--gold);color:#23180c;font-size:18px;font-weight:700;text-align:left;cursor:pointer}.arm-banner[hidden]{display:none}.page{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:28px 0 40px}.panel{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:18px;background:#1e1a16e0;border:1px solid var(--line);border-radius:18px}.readout{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;height:176px;padding:18px 20px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(228,194,122,.08),transparent 42%),#12100e;border:1px solid #3a342c}.note-name{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:.42em;min-width:0;height:92px;margin:0;overflow:hidden;white-space:nowrap;font-family:Palatino Linotype,Palatino,serif;font-size:84px;line-height:1;letter-spacing:-.04em}.chord-note.sustained{opacity:.62}.note-meta{margin:10px 0 0;color:var(--muted);height:1.4em;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vel{margin-top:16px;height:6px;border-radius:99px;background:#2a261f;overflow:hidden}.vel-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transition:width 80ms linear}.controls{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px 16px}.field{display:flex;flex-direction:column;gap:8px;min-width:0}.field-label{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:13px}.mono{font-variant-numeric:tabular-nums;color:var(--ink)}.dot{width:8px;height:8px;border-radius:99px;background:#6a6258}.dot.on{background:var(--ok);box-shadow:0 0 0 4px #8fbf8a26}.dot.wait{background:var(--gold)}select,.primary,.ghost{border-radius:10px;border:1px solid var(--line);background:#141210}select{height:40px;padding:0 10px}.hint{margin:0;color:var(--muted);font-size:13px;line-height:1.4;min-height:2.8em}.progress{height:8px;border-radius:99px;background:#2a261f;overflow:hidden}.progress-bar{width:0%;height:100%;background:var(--gold);transition:width .12s linear}.progress-bar.indeterminate{width:35%;animation:slide 1.1s ease-in-out infinite}@keyframes slide{0%{transform:translate(-120%)}to{transform:translate(320%)}}input[type=range]{width:100%;accent-color:var(--gold-deep)}.actions{display:flex;flex-wrap:wrap;gap:8px;align-content:end}.primary,.ghost{height:40px;padding:0 14px;cursor:pointer}.primary{background:var(--gold);color:#23180c;border-color:transparent;font-weight:650}.primary:disabled,.ghost:disabled{opacity:.45;cursor:default}.ghost:hover:not(:disabled),.primary:hover:not(:disabled){filter:brightness(1.06)}.lamps{display:flex;flex-direction:column;justify-content:end;gap:4px}.lamp{margin:0;font-size:13px}.lamp.quiet{color:var(--muted)}.lamp.on{color:var(--gold)}.stage{margin-top:18px}.stage-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;color:var(--muted);font-size:13px}.stage-bar p{margin:0}.nudge{display:flex;gap:6px}.nudge button{width:36px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--bg-raise);cursor:pointer}.kb-scroll{overflow-x:auto;border-radius:16px;background:#0d0c0b;border:1px solid #2c2823;padding:14px 12px 18px}.keyboard{position:relative;height:188px;min-width:1560px}.whites{display:flex;height:100%;gap:3px}.key{border:0;padding:0;cursor:pointer;touch-action:none}.key.white{position:relative;flex:1;border-radius:0 0 7px 7px;background:linear-gradient(#fffdf8,var(--white-key) 18%,#e7dece);box-shadow:inset 0 -8px #5a462814;color:#8d8274;font-size:11px}.key.white span{position:absolute;left:0;right:0;bottom:8px;pointer-events:none}.key.black{position:absolute;top:0;height:61%;border-radius:0 0 5px 5px;background:linear-gradient(#3a342e,var(--black-key) 30%,#0c0b0a);box-shadow:0 8px 10px #00000059;transform:translate(-50%);z-index:2}.blacks{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.key.black{pointer-events:auto}.key.white.down{background:linear-gradient(#f8e7bf,#e4c27a);color:#5c4318}.key.black.down{background:linear-gradient(#f0d7a2,#a67c3d)}.key.sustain{filter:brightness(.92)}.key.white.sustain{background:linear-gradient(#f3ead7,#ddd1b8)}footer{margin-top:22px;color:var(--muted);font-size:13px;line-height:1.5}footer a{color:var(--gold)}@media(max-width:860px){.panel,.controls{grid-template-columns:minmax(0,1fr)}.note-name{height:72px}.readout{height:156px}}