:root{--bg:#111316;--panel:#1a1d22;--panel-2:#22262d;--line:#2e333b;--text:#e8eaed;--muted:#8b929c;--accent:#ffb547;--accent-soft:#ffb54729;--ok:#4cc38a;--a:#4cc38a;--b:#e5484d;--x:#3e8ef7;--y:#f5c542;--shoulder:#5b6270;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}#app{gap:16px;max-width:1040px;margin:0 auto;padding:16px;display:grid}.top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}h1{letter-spacing:.02em;margin:0;font-size:22px}h1 span{color:var(--accent);font-weight:400}.status{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.pill{background:var(--panel-2);color:var(--muted);border-radius:999px;padding:5px 12px;font-size:13px}.pill.ok{color:var(--ok)}select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);font:inherit;border-radius:8px;padding:4px 8px;font-size:13px}.midi{color:var(--muted);align-items:center;gap:6px;font-size:13px;display:flex}.stage{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;display:grid}.compass{aspect-ratio:1;background:var(--panel);border-radius:var(--radius);grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;display:grid}.cell{background:var(--panel-2);color:var(--muted);text-align:center;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:12px;transition:background 60ms,color 60ms;display:flex}.cell b{font-size:18px;font-weight:400}.cell.centre{border:1px dashed var(--line);text-transform:uppercase;letter-spacing:.08em;background:0 0;font-size:11px}.cell.active{background:var(--accent);color:#1a1206}.cell.locked{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}.screen{background:var(--panel);border-radius:var(--radius);flex-direction:column;min-width:0;padding:18px 22px;display:flex}.roman{color:var(--accent);min-height:22px;font-size:16px}.chord{letter-spacing:-.02em;overflow-wrap:anywhere;font-size:clamp(48px,10vw,92px);font-weight:700;line-height:1.05}.notes{color:var(--muted);font-variant-numeric:tabular-nums;min-height:21px;margin-bottom:auto}.readout{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin:18px 0 0;display:grid}.readout dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.readout dd{margin:2px 0 0;font-weight:600}.pads{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;display:grid}.pad{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 10px;transition:transform 60ms,background 60ms;display:flex;position:relative}.pad.held{background:var(--panel-2)}.pad.active{border-color:var(--accent);background:var(--accent-soft);transform:translateY(1px)}.btn{color:#111;background:var(--shoulder);border-radius:999px;place-items:center;min-width:28px;height:28px;padding:0 6px;font-size:12px;font-weight:700;display:inline-grid}.btn-A{background:var(--a)}.btn-B{background:var(--b)}.btn-X{background:var(--x)}.btn-Y{background:var(--y)}.btn-LB,.btn-RB,.btn-RT{color:var(--text);border-radius:7px}.pad-roman{color:var(--muted);font-size:13px}.pad-name{font-size:18px;font-weight:700}.pad-badges{color:var(--accent);min-height:15px;font-size:11px}.fx{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.fx-page{background:var(--panel);border-radius:var(--radius);border:1px solid #0000;gap:8px;padding:12px 16px;display:grid}.fx-page.active{border-color:var(--accent)}.fx-page h3{margin:0;font-size:14px}.fx-page h3 small{color:var(--muted);margin-right:4px}.fx-page label{color:var(--muted);gap:2px;font-size:12px;display:grid}.fx-page label i{opacity:.6;font-style:normal}input[type=range]{width:100%;accent-color:var(--accent)}.help{color:var(--muted);grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;font-size:13px;display:grid}.help h3{color:var(--text);margin:0 0 6px;font-size:14px}.help ul{margin:0;padding-left:18px}.help li{margin:3px 0}kbd{border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:5px;margin:0 1px;padding:0 5px;font:12px/18px ui-monospace,monospace;display:inline-block}.overlay{text-align:center;color:var(--muted);z-index:10;background:#0a0b0de0;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:16px;display:flex;position:fixed;inset:0}.overlay[hidden]{display:none}.overlay button{background:var(--accent);color:#1a1206;cursor:pointer;border:0;border-radius:999px;padding:14px 36px;font:700 18px system-ui,sans-serif}@media (width<=760px){.stage,.fx,.help{grid-template-columns:minmax(0,1fr)}.compass{max-width:300px}.pads{grid-template-columns:repeat(4,minmax(0,1fr))}.readout{grid-template-columns:repeat(2,minmax(0,1fr))}}