:root{--bg: #14110e;--panel: #1d1915;--ink: #f4ede1;--muted: #9a8f7d;--accent: #e8a33d;--accent2: #5fb89a;--wrong: #d4654f;--key-w: #efe6d6;--key-b: #211c17;--line: #322a22}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);background-image:radial-gradient(circle at 20% -10%,#2a221a 0%,transparent 45%),radial-gradient(circle at 95% 110%,#1f2b26 0%,transparent 50%);color:var(--ink);font-family:Spline Sans Mono,monospace;min-height:100vh;padding:32px 20px 60px}.wrap{max-width:880px;margin:0 auto}header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:28px}h1{font-family:Fraunces,serif;font-weight:900;font-size:52px;line-height:.9;letter-spacing:-1px}h1 span{color:var(--accent);font-style:italic;margin-left:2px}.sub{color:var(--muted);font-size:13px;margin-top:6px;max-width:380px}.below-kb{display:flex;justify-content:space-between;align-items:center;margin-top:14px;margin-bottom:8px;gap:12px;flex-wrap:wrap}.metro-bar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 14px}.metro-toggle{background:none;border:none;color:var(--accent);font-size:14px;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.15s}.metro-toggle:hover{background:#ffffff12}.metro-toggle.on{color:var(--accent2)}.metro-toggle.on .metro-icon{animation:none}.metro-beats{display:flex;gap:5px}.metro-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .08s}.metro-dot.lit{background:var(--accent)}.metro-dot.accent{background:var(--accent);box-shadow:0 0 6px var(--accent)}.metro-bpm{width:48px;background:transparent;color:var(--ink);border:1px solid var(--line);padding:3px 4px;border-radius:5px;font-family:inherit;font-size:12px;text-align:center}.metro-num,.metro-denom{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:2px 4px;border-radius:5px;font-family:inherit;font-size:12px;text-align:center;width:36px}.metro-slash{color:var(--muted);font-size:14px;margin:0 -2px}.status{font-size:12px;display:flex;align-items:center;gap:8px;color:var(--muted)}.dot{width:9px;height:9px;border-radius:50%;background:var(--wrong);box-shadow:0 0 10px var(--wrong)}.dot.on{background:var(--accent2);box-shadow:0 0 10px var(--accent2)}.modes{display:flex;gap:8px;margin-bottom:20px}.modes button{flex:1;background:var(--panel);color:var(--muted);border:1px solid var(--line);padding:12px;border-radius:10px;font-family:inherit;font-size:13px;cursor:pointer;transition:.2s;font-weight:500}.modes button.active{color:var(--bg);background:var(--accent);border-color:var(--accent)}.modes button:hover:not(.active){border-color:var(--accent);color:var(--ink)}.stage{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px 28px;margin-bottom:18px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.big{font-family:Fraunces,serif;font-weight:600;font-size:80px;line-height:1;letter-spacing:-2px}.big.flash-ok{color:var(--accent2)}.big.flash-no{color:var(--wrong)}.label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}.notes-played{color:var(--muted);font-size:15px;margin-top:18px;min-height:22px;letter-spacing:1px}.prompt-target{color:var(--accent);font-size:14px;margin-top:10px;min-height:20px}.drill-stats{display:flex;gap:28px;margin-top:22px}.drill-stats div{font-size:13px;color:var(--muted)}.drill-stats b{color:var(--ink);font-size:22px;font-family:Fraunces,serif;display:block}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}.controls button,select{background:transparent;color:var(--ink);border:1px solid var(--line);padding:10px 18px;border-radius:8px;font-family:inherit;font-size:12px;cursor:pointer;transition:.2s}.controls button:hover{border-color:var(--accent)}select{background:var(--panel)}.kb-wrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;overflow-x:auto}.kb{position:relative;height:130px;display:flex;min-width:700px}.wk{position:relative;flex:1;background:var(--key-w);border:1px solid #00000040;border-radius:0 0 6px 6px;margin:0 1px;transition:background .08s}.wk.act{background:var(--accent)}.wk.demo{background:var(--accent2)}.wk.demo-root{background:var(--accent)}.bk{position:absolute;top:-1px;left:100%;width:60%;height:62%;background:var(--key-b);border-radius:0 0 5px 5px;z-index:2;transform:translate(-50%);transition:background .08s;border:1px solid #000}.bk.act{background:var(--accent)}.bk.demo{background:var(--accent2)}.bk.demo-root{background:var(--accent)}.wk .nm{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:9px;color:#0005;pointer-events:none}footer{color:var(--muted);font-size:11px;text-align:center;margin-top:22px;line-height:1.7}a{color:var(--accent2)}.footer-actions{margin-top:16px}.donate{display:inline-block;text-decoration:none;color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:8px 18px;font-size:12px;letter-spacing:.5px;transition:.2s}.donate:hover{background:var(--accent);color:var(--bg)}.footer-note{margin-top:12px;font-size:11px;color:var(--muted);opacity:.8}.explain-toggle{background:transparent;color:var(--accent2);border:1px solid var(--line);padding:8px 16px;border-radius:20px;font-family:inherit;font-size:11px;cursor:pointer;transition:.2s;margin-top:18px;letter-spacing:.5px}.explain-toggle:hover{border-color:var(--accent2)}.explain{overflow:hidden;max-height:0;transition:max-height .35s ease;width:100%;text-align:left;margin-top:0}.explain.open{max-height:600px;margin-top:20px}.explain-inner{background:#00000028;border:1px solid var(--line);border-radius:12px;padding:20px 22px;font-size:13px;line-height:1.65}.explain-inner h4{font-family:Fraunces,serif;font-weight:600;font-size:17px;color:var(--accent);margin-bottom:10px;letter-spacing:-.3px}.explain-inner .desc{color:var(--ink);margin-bottom:14px}.formula{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.frow{display:grid;grid-template-columns:90px 70px 1fr;gap:10px;align-items:center;font-size:12px}.frow .iv{color:var(--accent2)}.frow .nt{font-weight:600;color:var(--ink)}.frow .rl{color:var(--muted)}.frow.root .nt{color:var(--accent)}.tip{color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:12px}#exercisesView{width:100%;text-align:left}.ex-list{display:flex;flex-direction:column;gap:12px}.ex-card{background:#00000028;border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:.2s;cursor:pointer}.ex-card:hover{border-color:var(--accent)}.ex-card .ex-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.ex-card h3{font-family:Fraunces,serif;font-weight:600;font-size:19px;letter-spacing:-.3px}.ex-badge{font-size:10px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;letter-spacing:.5px}.ex-badge.lvl2{color:var(--accent2);border-color:var(--accent2)}.ex-badge.lvl0{color:var(--muted)}.ex-card .ex-desc{color:var(--muted);font-size:13px;line-height:1.6;margin-top:8px}.ex-card .ex-src{font-size:11px;color:var(--accent2);margin-top:10px}.runner-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}.runner-head button{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 14px;font-family:inherit;font-size:12px;cursor:pointer}.runner-head button:hover{border-color:var(--accent)}.runner-head h3{font-family:Fraunces,serif;font-weight:600;font-size:22px}.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:16px;border:1px solid var(--line)}.video-embed iframe{width:100%;height:100%;border:0}.ex-run-body{text-align:center}.th-body{font-size:14px;line-height:1.7;color:var(--ink)}.th-body p{margin-bottom:12px}.th-body h4{font-family:Fraunces,serif;font-weight:600;font-size:18px;color:var(--accent);margin:18px 0 8px;letter-spacing:-.3px}.th-body b{color:var(--accent2);font-weight:600}.th-body ul{margin:0 0 12px 20px}.th-body li{margin-bottom:6px}.th-examples{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}.th-ex-btn{background:transparent;color:var(--accent2);border:1px solid var(--accent2);padding:8px 14px;border-radius:8px;font-family:inherit;font-size:12px;cursor:pointer;transition:.2s}.th-ex-btn:hover{background:var(--accent2);color:var(--bg)}.th-section-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;margin:8px 0}.th-links{display:flex;flex-direction:column;gap:6px}.th-links a{font-size:13px}.ex-badge.theory{color:var(--accent);border-color:var(--accent)}#circleView{width:100%}.cf-layout{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}.cf-svg-col{flex:0 0 340px;max-width:100%}#cfSvg{width:100%;height:auto;display:block}.cf-ring{fill:none;stroke:var(--line);stroke-width:2}.cf-ring-inner{stroke-dasharray:4 4;stroke-width:1}.cf-node circle{fill:var(--panel);stroke:var(--line);stroke-width:1.5;cursor:pointer;transition:.15s}.cf-node:hover circle{stroke:var(--accent)}.cf-node text{text-anchor:middle;pointer-events:none}.cf-node-maj text{font-family:Fraunces,serif;font-size:17px;font-weight:600;fill:var(--ink)}.cf-node-min text{font-family:Spline Sans Mono,monospace;font-size:11px;fill:var(--muted)}.cf-min-label{dominant-baseline:central}.cf-node.nbr circle{stroke:var(--accent2);stroke-width:2}.cf-node.sel circle{fill:var(--accent);stroke:var(--accent)}.cf-node.sel text{fill:var(--bg)}.cf-node-min.sel circle{fill:var(--accent2);stroke:var(--accent2)}.cf-node-min.sel text{fill:var(--bg)}.cf-info{flex:1 1 240px;min-width:220px;text-align:left}.cf-key{font-family:Fraunces,serif;font-weight:600;font-size:46px;line-height:1;letter-spacing:-1px}.cf-sub{color:var(--muted);font-size:13px;margin-top:8px}.cf-sub b{color:var(--accent2)}.cf-moves{display:flex;flex-direction:column;gap:8px;margin:18px 0}.cf-step{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 14px;font-family:inherit;font-size:12px;cursor:pointer;text-align:left;transition:.2s}.cf-step:hover{border-color:var(--accent)}.cf-hint{color:var(--muted);font-size:11px;line-height:1.6;border-top:1px solid var(--line);padding-top:12px}.cf-hint .sw{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:middle;margin:0 2px}.cf-hint .sw.g{background:var(--accent2)}.cf-hint .sw.o{background:var(--accent)}.cf-seg,.cf-mode-toggle{display:flex;gap:8px;margin-bottom:16px}.cf-seg button,.cf-mode-toggle button{flex:1;background:var(--panel);color:var(--muted);border:1px solid var(--line);padding:9px 14px;border-radius:8px;font-family:inherit;font-size:12px;cursor:pointer;transition:.2s}.cf-seg button.active,.cf-mode-toggle button.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}.cf-seg button:hover:not(.active),.cf-mode-toggle button:hover:not(.active){border-color:var(--accent);color:var(--ink)}.cf-controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}.cf-controls label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.cf-controls select{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:9px 12px;border-radius:8px;font-family:inherit;font-size:13px}.cf-arrow{stroke:var(--muted);stroke-width:2.5;fill:none}.cf-arrow.done{stroke:var(--accent2)}.cf-trace-line{stroke:var(--accent);stroke-width:2.5;fill:none}.cf-numeral{font-family:Spline Sans Mono,monospace;font-size:12px;font-weight:600;fill:var(--accent);text-anchor:middle;dominant-baseline:middle;pointer-events:none}.cf-node.on circle{stroke:var(--accent);stroke-width:2.5}.cf-node.cur circle{fill:var(--accent);stroke:var(--accent)}.cf-node.cur .cf-maj{fill:var(--bg)}.cf-node.cur .cf-min{fill:#0009}.cf-node.cur{animation:cfpulse 1.1s ease-in-out infinite}@keyframes cfpulse{0%,to{opacity:1}50%{opacity:.5}}.cf-steps{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.cf-chip{font-size:12px;padding:5px 9px;border-radius:7px;border:1px solid var(--line);color:var(--muted)}.cf-chip.cur{border-color:var(--accent);color:var(--accent)}.cf-chip.done{border-color:var(--accent2);color:var(--accent2)}.cf-chip .num{color:var(--accent2);font-size:9px;margin-left:5px;vertical-align:top}.ex-progress{color:var(--muted);font-size:12px;letter-spacing:1px;margin-bottom:6px}.ex-seq{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0 4px}.ex-seq span{font-size:12px;padding:5px 10px;border-radius:7px;border:1px solid var(--line);color:var(--muted)}.ex-seq span.cur{border-color:var(--accent);color:var(--accent)}.ex-seq span.done{border-color:var(--accent2);color:var(--accent2)}.browser-banner,.onboard-hint{background:#2a221a;border:1px solid var(--accent);border-radius:12px;padding:14px 18px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;line-height:1.5;color:var(--ink)}.onboard-hint{border-color:var(--accent2)}.browser-banner b,.onboard-hint b{color:var(--accent2)}.browser-banner button,.onboard-hint button{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:0 4px;flex-shrink:0}.browser-banner button:hover,.onboard-hint button:hover{color:var(--ink)}.sc-controls{display:flex;gap:8px;justify-content:center;margin-bottom:16px}.sc-controls select{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:10px 14px;border-radius:8px;font-family:inherit;font-size:13px}.sc-title{font-family:Fraunces,serif;font-weight:600;font-size:36px;letter-spacing:-1px;margin-bottom:8px}.sc-desc{color:var(--muted);font-size:13px;line-height:1.6;max-width:520px;margin:0 auto 18px}.sc-notes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}.sc-note{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);font-size:16px;font-weight:600;color:var(--accent2);min-width:44px}.sc-note.root{color:var(--accent);border-color:var(--accent)}.sc-deg{font-size:10px;font-weight:400;color:var(--muted)}.sc-formula{color:var(--muted);font-size:12px;letter-spacing:1px;margin-bottom:16px}.sc-hint{color:var(--muted);font-size:11px;line-height:1.6}.sc-hint b{color:var(--accent2)}.rhythm-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}.rhythm-toggle input{accent-color:var(--accent);cursor:pointer}.bpm-group{display:flex;align-items:center;gap:6px}.bpm-group label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}.bpm-group input[type=number]{width:60px;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:7px 8px;border-radius:6px;font-family:inherit;font-size:13px;text-align:center}@keyframes dotpulse{0%,to{opacity:1}50%{opacity:.3}}.dot.waiting{animation:dotpulse 1.5s ease-in-out infinite}@media(max-width:768px){body{padding:20px 14px 40px}h1{font-size:38px}.sub{font-size:12px}.modes{flex-wrap:wrap}.modes button{flex:1 1 calc(33.3% - 6px);padding:10px 8px}.stage{padding:24px 18px}.big{font-size:56px}.kb{min-width:520px}.cf-svg-col{flex:0 0 280px}.cf-key{font-size:36px}}@media(max-width:480px){body{padding:16px 10px 32px}h1{font-size:30px}.sub{max-width:100%}header{gap:10px}.modes button{flex:1 1 calc(50% - 4px);font-size:12px;padding:9px 6px}.stage{padding:20px 14px;min-height:160px}.big{font-size:40px;letter-spacing:-1px}.drill-stats{gap:14px;flex-wrap:wrap}.controls{flex-direction:column;align-items:stretch}.controls button,select{width:100%}.kb-wrap{padding:10px}.kb{min-width:100%;height:90px}.wk .nm{font-size:7px}.cf-layout{flex-direction:column}.cf-svg-col{flex:0 0 auto;width:100%;max-width:300px;margin:0 auto}.cf-info{min-width:auto}.cf-key{font-size:30px}.frow{grid-template-columns:1fr;gap:4px}.ex-card{padding:14px}.ex-card h3{font-size:16px}.runner-head h3{font-size:18px}.th-body{font-size:13px}.below-kb{flex-direction:column;align-items:stretch;gap:10px}.metro-bar{justify-content:center;padding:6px 10px}.metro-bpm{width:42px;font-size:11px}.donate{text-align:center}.footer-note{font-size:10px}}