:root{--bg:#f6f5f2;--paper:#fff;--ink:#1d1b18;--dim:#7b766d;--line:#e2ded6;--accent:#1f6feb;--accent-soft:#1f6feb1f;--right:#e8890c;--left:#1597a8;--ok:#2da44e;--bad:#e5484d;--T:#2da44e;--S:#3b6fd6;--D:#e8890c;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer}select{font:inherit;border:1px solid var(--line);background:#fff;border-radius:8px;padding:3px 6px}.dim{color:var(--dim)}body{grid-template-rows:auto 1fr auto;height:100vh;display:grid;overflow:hidden}.top{background:var(--paper);border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:8px 14px;display:flex}.brand{flex-direction:column;margin-right:6px;line-height:1.1;display:flex}.brand b{font-size:17px}.brand span{color:var(--dim);font-size:12px}.sp{flex:1}.ctl{color:var(--dim);white-space:nowrap;align-items:center;gap:6px;font-size:13px;display:flex}.pill{border:1px solid var(--line);white-space:nowrap;color:inherit;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;text-decoration:none}.pill.on{background:var(--accent);border-color:var(--accent);color:#fff}.pill.ghost{background:0 0}.pill:hover{border-color:#c8c2b6}.icon{background:0 0;border:0;border-radius:8px;padding:4px 8px;font-size:16px}.icon:hover{background:var(--bg)}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;margin:2px;padding:2px 9px;font-size:12px}.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}.cols{grid-template-columns:var(--tree,250px) minmax(0, 1.15fr) var(--theory,minmax(0, 1fr)) 0;min-height:0;transition:grid-template-columns .2s;display:grid}body.chat-open .cols{grid-template-columns:var(--tree,220px) minmax(0, 1fr) var(--theory,minmax(0, 1fr)) var(--chat,380px)}body.practice .tree,body.practice .theory{display:none}body.practice .cols{grid-template-columns:minmax(0,1fr) 0}body.practice.chat-open .cols{grid-template-columns:minmax(0, 1fr) var(--chat,minmax(0, 1fr))}body.resizing{-webkit-user-select:none;user-select:none}body.resizing .cols{transition:none}body.resizing iframe,body.resizing svg{pointer-events:none}.col{border-right:1px solid var(--line);min-height:0;overflow-y:auto}.tree{background:var(--paper);padding:8px 8px 30px}.floor{margin-bottom:10px}.floor h4{text-transform:uppercase;letter-spacing:.04em;color:var(--dim);flex-wrap:wrap;align-items:baseline;gap:6px;margin:8px 4px 4px;font-size:12px;display:flex}.floor h4 i{background:var(--ink);color:#fff;border-radius:4px;padding:0 5px;font-size:11px;font-style:normal}.floor h4 small{text-transform:none;letter-spacing:0;width:100%;font-size:11px;font-weight:400}.floor.col h4 i{display:none}.node{text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:7px;width:100%;padding:4px 6px;font-size:13px;display:flex}.node:hover{background:var(--bg)}.node.cur{background:var(--accent-soft);font-weight:600}.node.stub span{color:#5c574f}.node.full span:after{content:" ●";color:var(--accent);vertical-align:2px;font-size:9px}.ring{flex:none;width:16px;height:16px}.ring .bg{fill:none;stroke:var(--line);stroke-width:3px}.ring .fg{fill:none;stroke:var(--ok);stroke-width:3px;stroke-linecap:round}.notes{background:var(--bg);flex-direction:column;display:flex;overflow:hidden}.minfo{border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap;align-items:center;gap:8px;min-height:38px;padding:6px 12px;font-size:13px;display:flex}.minfo sub{color:var(--dim);margin-right:4px;font-size:10px}.sheet{flex:1;padding:6px 4px 40px;overflow-y:auto}.mrow{background:#fff;margin:0 0 4px;display:flex;box-shadow:0 1px 2px #0000000d}.mrow svg{cursor:pointer;width:100%;height:auto;display:block}.mrect{fill:#0000}.mrect.hl{fill:#ffc40038}.mrect.sel{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2px}.mrect.zone{fill:#1f6feb0d;stroke:#1f6feb59;stroke-dasharray:6 5;stroke-width:2px}.mrect.pick{fill:#2da44e2e;stroke:var(--ok);stroke-width:3px}.mrect.cur{fill:#1f6feb1a}.mrect.ab{fill:#7a5cff12;stroke:#7a5cff;stroke-width:2px;stroke-dasharray:8 5}.hd{fill:none}.hd.on.R{fill:var(--right);fill-opacity:.6;stroke:var(--right);stroke-width:2px}.hd.on.L{fill:var(--left);fill-opacity:.6;stroke:var(--left);stroke-width:2px}.hd.want-R{fill:var(--right);fill-opacity:.85;stroke:var(--right);stroke-width:3px;animation:1.1s ease-in-out infinite want}.hd.want-L{fill:var(--left);fill-opacity:.85;stroke:var(--left);stroke-width:3px;animation:1.1s ease-in-out infinite want}@keyframes want{50%{fill-opacity:.3}}.hd.next{stroke:#8a8378;stroke-width:2px;stroke-dasharray:3 2}.hd.okf{fill:var(--ok);fill-opacity:.75;stroke:var(--ok);stroke-width:2px}.hd.echo{fill:#7a5cff;fill-opacity:.55;stroke:#7a5cff;stroke-width:2.5px}.mrect.err{fill:#cf222e14}.mrect.err2{fill:#cf222e2e}.mno{fill:var(--dim);font:600 22px -apple-system,system-ui,sans-serif}.chl{paint-order:stroke;stroke:#fff;stroke-width:5px;font:700 20px -apple-system,system-ui,sans-serif}.chr{paint-order:stroke;stroke:#fff;stroke-width:5px;font:600 15px -apple-system,system-ui,sans-serif}.fn-T{fill:var(--T)}.fn-S{fill:var(--S)}.fn-D{fill:var(--D)}.chl.unsure,.chr.unsure{opacity:.45;font-style:italic}.theory{background:var(--paper);flex-direction:column;display:flex;overflow:hidden}.cardhead{border-bottom:1px solid var(--line);padding:8px 18px;font-size:12px}.crumbs{color:var(--dim)}.mbar{background:var(--line);border-radius:2px;height:4px;margin:5px 0 2px;overflow:hidden}.mbar i{background:var(--ok);height:100%;display:block}.links{color:var(--dim);margin-top:4px}.card{flex:1;padding:4px 22px 60px;overflow-y:auto}.md h1{margin:14px 0 8px;font-size:24px}.md h2{border-top:1px solid var(--line);margin:22px 0 6px;padding-top:10px;font-size:16px}.md p,.md li{font-size:14.5px}.md .lead{font-size:16px}.md table{border-collapse:collapse;margin:8px 0;font-size:13px}.md td,.md th{border-bottom:1px solid var(--line);text-align:left;padding:4px 10px 4px 0}.md code{background:var(--bg);border-radius:4px;padding:1px 5px}.blk{border:1px solid var(--line);background:#fcfbf9;border-radius:12px;margin:12px 0;padding:12px}.blk .cap{color:var(--dim);margin-bottom:8px;font-size:12.5px}.row{flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;display:flex}.readout{min-height:20px;margin:8px 0;font-size:13.5px}.ms{font-weight:600}.ms small{color:var(--dim);font-weight:400}.roots{flex-wrap:wrap;gap:2px;display:flex}.seg{background:var(--bg);border-radius:10px;gap:2px;padding:2px;display:inline-flex}.seg button{background:0 0;border:0;border-radius:8px;padding:4px 10px;font-size:12.5px}.seg button.on{background:#fff;font-weight:600;box-shadow:0 1px 2px #0000001f}.triads{flex-wrap:wrap;gap:6px;margin-bottom:6px;display:flex}.chordbtn{border:1px solid var(--line);background:#fff;border-radius:10px;flex-direction:column;align-items:center;min-width:54px;padding:6px 10px;display:flex}.chordbtn b{font-size:15px}.chordbtn span{color:var(--dim);font-size:12px}.chordbtn.on{border-color:var(--accent);background:var(--accent-soft)}.chordbtn.fn-T{border-bottom:3px solid var(--T)}.chordbtn.fn-S{border-bottom:3px solid var(--S)}.chordbtn.fn-D{border-bottom:3px solid var(--D)}svg.circle{width:100%;max-width:360px;margin:0 auto;display:block}.circle .ring{fill:none;stroke:var(--line)}.circle .key circle{fill:#fff;stroke:#cfc9bd;cursor:pointer}.circle .key text{text-anchor:middle;pointer-events:none;font-size:13px;font-weight:600}.circle .key.mi text{font-size:11px;font-weight:500}.circle .key.hl circle{fill:#fff4d6;stroke:#e0a800}.circle .key.sel circle{fill:var(--accent);stroke:var(--accent)}.circle .key.sel text{fill:#fff}.circle .sig{fill:var(--dim);text-anchor:middle;font-size:10px}.circle .center{text-anchor:middle;fill:var(--dim);font-size:18px}svg.kbd{-webkit-user-select:none;user-select:none;touch-action:manipulation;width:100%;display:block}.kbd .k.w{fill:#fff;stroke:#b9b3a8}.kbd .k.b{fill:#1d1b18}.kbd .k{cursor:pointer}.kbd .k.L-sel.w{fill:#cfe0ff}.kbd .k.L-sel.b{fill:#4a7fe0}.kbd .k.tonic.w{fill:#9cc0ff}.kbd .k.tonic.b{fill:#1f5fd0}.kbd .k.L-hint.w{fill:#fff1c7}.kbd .k.L-hint.b{fill:#b98a00}.kbd .k.L-play.R.w{fill:#ffd29a}.kbd .k.L-play.R.b{fill:var(--right)}.kbd .k.L-play.L.w{fill:#a6e3ea}.kbd .k.L-play.L.b{fill:var(--left)}.kbd .k.L-mark.w{fill:#bcd3ff}.kbd .k.L-mark.b{fill:#3d6fd6}.kbd .k.L-mark.R.w{fill:#ffd29a}.kbd .k.L-mark.R.b{fill:#c46a00}.kbd .k.L-mark.L.w{fill:#a6e3ea}.kbd .k.L-mark.L.b{fill:#0b6f7c}.kbd .kf{text-anchor:middle;pointer-events:none;fill:#1d1b18;font:700 11px system-ui,sans-serif}.kbd .kf.R{fill:#8a4300}.kbd .kf.L{fill:#064f59}.kbd .kf.onb{fill:#fff}.kbd .k.L-next.w{fill:#e9e2d4}.kbd .k.L-next.b{fill:#6d665c}.kbd .k.L-want.R.w{fill:#ffb867}.kbd .k.L-want.R.b{fill:#c46a00}.kbd .k.L-want.L.w{fill:#7fd6e0}.kbd .k.L-want.L.b{fill:#0b6f7c}.kbd .k.L-held.w{fill:#8fd3a0}.kbd .k.L-held.b{fill:var(--ok)}.kbd .k.L-ok.w{fill:#8fd3a0}.kbd .k.L-ok.b{fill:var(--ok)}.kbd .k.L-bad.w{fill:#f6b0b2}.kbd .k.L-bad.b{fill:var(--bad)}.kbd .kl{text-anchor:middle;fill:#8a847a;pointer-events:none;font-size:8px}.kbd .kl.b{fill:#ddd;font-size:6.5px}.blk.task{background:#fff}.blk.task.done{background:#f5fbf6;border-color:#bfe5c9}.thead{align-items:flex-start;gap:10px;display:flex}.tmark{color:var(--ok);width:18px;font-size:18px;line-height:1}.ttitle{font-weight:600}.ttitle small{color:var(--dim);text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;font-weight:500;display:block}.tbody{margin-top:8px}.tstatus{min-height:18px;color:var(--dim);margin-top:6px;font-size:13px}.tstatus.ok{color:var(--ok)}.tstatus.bad{color:var(--bad)}.opts{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.opt{border:1px solid var(--line);text-align:left;background:#fff;border-radius:10px;padding:6px 12px}.opt:hover{border-color:var(--accent)}.steps{flex-wrap:wrap;gap:4px;display:flex}.st{border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:13px;font-weight:600}.st.cur{border-color:var(--accent);background:var(--accent-soft)}.st.ok{color:var(--ok);background:#e9f7ec;border-color:#bfe5c9}.stubnote{background:var(--bg);color:var(--dim);border-radius:12px;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;padding:12px;display:flex}.kbar{background:#24221f;padding:6px 10px 8px}.kctl{flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:6px;display:flex}.kctl .ctl{color:#c9c3b8}.kctl .pill{color:#eee;background:#36332e;border-color:#4a463f}.kctl .pill.on{background:var(--accent);border-color:var(--accent)}#midiState.on{background:#1f6a3a;border-color:#2da44e}.lastkey{color:#fff;margin-left:auto;font-size:16px;font-weight:700}.bottomkb{max-width:var(--kbw,1400px);margin:0 auto}.chat{background:var(--paper);border-left:1px solid var(--line);flex-direction:column;min-height:0;display:flex;overflow:hidden}body:not(.chat-open) .chat{visibility:hidden}.chat-head{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:6px;padding:8px;display:flex}.chat-head .close{margin-left:auto}.chat-body{flex-direction:column;flex:1;min-height:0;display:flex}.msgs{flex:1;padding:10px 12px;overflow-y:auto}.msg{margin:0 0 12px;font-size:13.5px}.msg.user{background:var(--accent-soft);white-space:pre-wrap;border-radius:12px;margin-left:30px;padding:8px 10px}.msg.assistant p{margin:0 0 6px}.msg .tools{color:var(--dim);margin-bottom:4px;font-size:11.5px}.empty{color:var(--dim);font-size:13px}.ask{border-top:1px solid var(--line);gap:6px;padding:8px;display:flex}.ask textarea{resize:none;border:1px solid var(--line);font:inherit;border-radius:10px;flex:1;padding:7px 9px}.nb-body{flex:1;padding:8px;overflow-y:auto}.nbl{margin-top:8px}.nbi{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:8px 10px;position:relative}.nbi p{margin:4px 0}.nbi small{color:var(--dim);cursor:pointer}.nbi.done p{color:var(--dim);text-decoration:line-through}.nbi .icon{font-size:12px;position:absolute;top:4px;right:4px}.overlay{z-index:20;background:#f6f5f2;flex-direction:column;display:flex;position:fixed;inset:0}.ohead{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:10px 16px;display:flex}.ohead .icon{margin-left:auto}.mapbox{flex:1;padding:10px;overflow:auto}svg.map .fl{fill:var(--dim);font-size:13px;font-weight:700}svg.map .edge{fill:none;stroke:#cfc9bd;stroke-width:1.5px}svg.map .edge.hot{stroke:var(--accent);stroke-width:2.5px}svg.map .mn{cursor:pointer}svg.map .mn rect:first-child{fill:#fff;stroke:#cfc9bd}svg.map .mn.full rect:first-child{stroke:var(--accent);stroke-width:1.5px}svg.map .mn.cur rect:first-child{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.5px}svg.map .mn .bar{fill:var(--ok)}svg.map .mn text{text-anchor:middle;font-size:12px}[hidden]{display:none!important}.blk svg.kbd{max-width:520px;max-height:150px;margin:4px auto}.tbody svg.kbd{max-width:420px;max-height:120px;margin:4px 0}.blk.abc .abc-paper{background:#fff;border-radius:8px;padding:4px 6px 0;overflow:hidden}.blk.abc .abc-paper svg{overflow:visible}.abc-ru{fill:#7a6f60;font:11.5px system-ui,sans-serif}.blk.abc .row{margin-top:6px}.msg .blk{margin:8px 0;padding:8px}.nbt{margin:4px 0}.nbt p{margin:0 0 4px}.nbt .blk{margin:6px 0;padding:8px}.fg{text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:4px;pointer-events:none;font:700 14px -apple-system,system-ui,sans-serif}.fg.R{fill:#b36200}.fg.L{fill:#0b6f7c}.fg.auto{opacity:.55;font-weight:600}.agentkeys{color:#f3e9d8;background:#3a342c;border-radius:10px;align-items:center;gap:8px;padding:3px 4px 3px 10px;font-size:13px;display:flex}.agentkeys[hidden]{display:none}.agentkeys b{color:#fff}.agentkeys .pill{padding:3px 9px;font-size:12px}.pbar{color:#f3e9d8;align-items:center;gap:6px;font-size:13px;display:flex}.pbar .pill{padding:4px 10px;font-size:13px}.pbar .pill.hand.on.L{background:var(--left);border-color:var(--left)}.pbar .pill.hand.on.R{background:var(--right);border-color:var(--right)}.pbar select{color:#eee;font:inherit;background:#36332e;border:1px solid #4a463f;border-radius:8px;padding:3px 6px}.pbar .pstat b{color:#fff}.pbar .pres{color:#9be3ae;font-weight:600}.ghost ellipse{fill-opacity:.9}.ghost.ok ellipse{fill:var(--ok)}.ghost.bad ellipse{fill:var(--bad)}.ghost .gl{stroke-width:1.4px}.ghost.ok .gl{stroke:var(--ok)}.ghost.bad .gl{stroke:var(--bad)}.ghost .ga{text-anchor:middle;font:700 15px system-ui,sans-serif}.ghost.ok .ga{fill:var(--ok)}.ghost.bad .ga{fill:var(--bad)}.ghost{pointer-events:none;animation:2.2s ease-in forwards ghost}@keyframes ghost{0%,70%{opacity:1}to{opacity:0}}.pbar .pill.ab.on{background:#7a5cff;border-color:#7a5cff}.pbar .abset{gap:4px;display:inline-flex}.ped{fill:none;stroke:#6b5a8e;stroke-width:2.2px;stroke-linejoin:round}.pbar .pedal{-webkit-user-select:none;user-select:none;touch-action:none;min-width:34px}.pbar .pedal.down{color:#fff;background:#6b5a8e;border-color:#6b5a8e}.pbar .pedal.need{animation:1s ease-in-out infinite pedneed;box-shadow:0 0 0 2px #ffb867}@keyframes pedneed{50%{box-shadow:0 0 0 4px #ffb86759}}.pbar .pmsg{color:#ffb4a8;font-weight:600}.pbar .pmsg.ok{color:#9be3ae}