:root{--bg:#0e0f12;--card:#17191e;--card2:#1f2229;--line:#2b2f38;--text:#e9eaee;--muted:#8b90a0;--accent:#f5c542;--drums:#ff6b4a;--bass:#4aa8ff;--chords:#b07cff;--lead:#3ddc97;--c:var(--accent);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.45}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit;color:inherit}.app{max-width:980px;margin:0 auto;padding:16px 12px 110px}header h1{letter-spacing:-.02em;margin:8px 0 2px;font-size:1.7rem}header .tag{color:var(--muted);margin:0 0 14px}h2{align-items:center;gap:8px;margin:0 0 10px;font-size:1.05rem;display:flex}.muted{color:var(--muted)}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:14px}button{background:var(--card2);border:1px solid var(--line);cursor:pointer;border-radius:10px;padding:8px 12px}button:hover{border-color:#444a57}button.active{background:var(--c);color:#111;border-color:var(--c);font-weight:600}button:disabled{opacity:.4;cursor:default}select,input[type=range]{width:100%}select{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}input[type=range]{accent-color:var(--accent)}.styles{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}@media (width>=700px){.styles{grid-template-columns:repeat(4,1fr)}}.style{text-align:left;flex-direction:column;gap:2px;padding:10px;display:flex}.style span{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.style{min-width:0;padding:8px 10px}.plainnote{color:#e8d79a;background:#2a2614;border:1px solid #5a4b1c;border-radius:8px;margin-bottom:8px;padding:6px 10px;font-size:.82rem}.style.active{border-color:var(--accent);color:var(--text);background:#2a2614}.style.active span{color:#cfc39a}.form{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;display:grid}.form label,.custom label{color:var(--muted);flex-direction:column;gap:4px;font-size:.8rem;display:flex}.form label.wide{grid-column:1/-1}@media (width>=700px){.form{grid-template-columns:repeat(3,1fr)}.form label.wide{grid-column:span 1}}.custom{background:var(--card2);border-radius:10px;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px;padding:10px;display:grid}@media (width>=700px){.custom{grid-template-columns:repeat(4,1fr)}}.seg{border:1px solid var(--line);border-radius:10px;display:flex;overflow:hidden}.seg button{border:0;border-radius:0;flex:1;padding:7px 4px}.actions{flex-wrap:wrap;gap:8px;display:flex}.check{align-items:center;gap:6px;font-size:.85rem;display:inline-flex}.warnbtn{border-color:var(--accent);color:var(--accent);background:#3a2a10}.badge{white-space:nowrap;background:var(--accent);color:#111;border-radius:6px;padding:2px 6px;font-size:.7rem}.chordchips{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;display:grid}.chordchip{background:var(--card2);border:1px solid var(--line);border-radius:10px;flex-direction:column;padding:8px;transition:border-color .1s;display:flex}.chordchip b{font-size:1rem}.chordchip span{color:var(--muted);font-size:.72rem}.chordchip.home{border-top:3px solid #3ddc97}.chordchip.soft{border-top:3px solid #7fb8a4}.chordchip.away{border-top:3px solid #4aa8ff}.chordchip.tension{border-top:3px solid #ff6b4a}.chordchip.now{border-color:var(--accent);background:#2a2614}.overview p{margin:6px 0}.ab{background:#2a2614;border:1px solid #5a4b1c;border-radius:10px;margin-top:8px;padding:10px}.ab ul{margin:6px 0 0;padding-left:18px}.viewbar{align-items:center;gap:10px;margin:4px 2px 12px;display:flex}.viewbar select{width:auto}.t-drums{--c:var(--drums)}.t-bass{--c:var(--bass)}.t-chords{--c:var(--chords)}.t-lead{--c:var(--lead)}.track{border-left:4px solid var(--c)}.muted-track .grid{opacity:.35}.trackhead{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.trackhead h2{margin:0}.tn{background:var(--c);color:#111;border-radius:6px;place-items:center;width:22px;height:22px;font-size:.8rem;display:inline-grid}.tbtns{gap:4px;display:flex}.tbtns button{min-width:34px;padding:5px 9px;font-size:.82rem}.tcontrols{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.tcontrols select{flex:200px;width:auto}.chips{flex-wrap:wrap;gap:6px;width:100%;display:flex}.chip{border-radius:999px;padding:5px 10px;font-size:.82rem}.grid{flex-direction:column;gap:10px;display:flex}.bar{border:1px solid #0000;border-radius:8px;padding:4px}.bar.selected{border-color:var(--line);background:#1b1d23}.barhead{color:var(--muted);margin:0 0 3px 2px;font-size:.8rem}.barhead b{color:var(--text)}.row{align-items:stretch;gap:4px;margin-bottom:2px;display:flex}.row.head .cell{color:#5d6271;text-align:center;background:0 0;height:auto;font-size:.6rem}.row.head .cell.beat{color:var(--muted);font-weight:700}.lbl{color:var(--muted);white-space:nowrap;flex:0 0 76px;justify-content:space-between;align-items:center;gap:2px;font-size:.72rem;display:flex;overflow:hidden}.lbl.root{color:var(--text);font-weight:700}.lbl .pad{background:var(--card2);color:var(--c);border-radius:4px;padding:0 4px;font-size:.62rem}.lbl .pad.off{color:#ff6b4a}.cells{flex:1;grid-template-columns:repeat(16,1fr);gap:2px;display:grid}.cell{background:#23262e;border-radius:3px;height:18px;position:relative}.cell.beat{background:#2b2f39}.cell.on{background:var(--c)}.cell.on.ghost{background:color-mix(in srgb, var(--c) 35%, #23262e)}.cell.on.acc{box-shadow:inset 0 0 0 2px #fff6}.cell.hold{background:linear-gradient(to bottom, transparent 35%, color-mix(in srgb, var(--c) 70%, #23262e) 35% 65%, transparent 65%), #23262e}.vlegend{color:var(--muted);flex-wrap:wrap;gap:4px 12px;font-size:.72rem;display:flex}.vlegend span{align-items:center;gap:5px;display:inline-flex}.vlegend .cell{width:16px;height:12px;display:inline-block}.cell.play{outline-offset:-1px;outline:2px solid #fff}.cell.new{box-shadow:0 0 0 2px var(--accent), 0 0 8px var(--accent);z-index:1}.cell.gone{background:repeating-linear-gradient(45deg,#ff4a4a99 0 3px,#0000 3px 6px),#23262e;box-shadow:inset 0 0 0 1px #ff4a4a}.cell.gonehold{background:linear-gradient(#0000 40%,#ff4a4a66 40% 60%,#0000 60%),#23262e}@media (width<=420px){.lbl{flex-basis:64px}.cell{height:16px}}details summary{cursor:pointer;padding:4px 0;font-size:.9rem;font-weight:600}.explain{background:var(--card2);border-radius:10px;margin-top:10px;padding:8px 12px}.explain p{margin:6px 0}.explain ul{margin:4px 0 6px;padding-left:18px}.explain li{margin-bottom:4px;font-size:.9rem}.movepanel{border:1px dashed var(--line);border-radius:10px;margin-top:8px;padding:6px 12px}.move p{margin:6px 0;font-size:.9rem}.move .warn{color:#ffb08f}.padwrap{margin-top:8px}.bartabs{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.bartabs button{padding:4px 8px;font-size:.8rem}.padmap{background:#0a0a0c;border-radius:10px;flex-direction:column;gap:4px;padding:8px;display:inline-flex}.padrow{gap:4px;display:flex}.padcell{color:#6b7080;background:#24262c;border-radius:6px;place-items:center;width:36px;height:36px;font-size:.68rem;display:grid}.padcell.keyroot{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent)}.padcell.outkey{color:#3f4350;background:#16171b}.padcell.lit{background:var(--c);color:#111;font-weight:700}.padcell.chordroot{box-shadow:inset 0 0 0 3px #fff}@media (width<=380px){.padcell{width:32px;height:32px}}.legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;font-size:.75rem;display:flex}.sw{background:#24262c;border-radius:3px;width:12px;height:12px;display:inline-block}.sw.lit{background:var(--c)}.sw.keyroot{box-shadow:inset 0 0 0 2px var(--c)}.lesson{border-top:1px solid var(--line);padding:6px 0}.lesson p{margin:6px 0;font-size:.92rem}.lesson .try{background:var(--card2);border-radius:8px;padding:8px 10px}.prompts{margin:0;padding-left:20px}.prompts li{margin-bottom:8px}.favs{margin:10px 0 0;padding:0;list-style:none}.favs li{gap:6px;margin-bottom:6px;display:flex}.favs .link{text-align:left;flex:1;font-size:.85rem}.favs .x{padding:4px 10px}footer{text-align:center;margin:20px 0;font-size:.8rem}.transport{padding:10px 12px calc(10px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:10;background:#0b0c0fee;align-items:center;gap:10px;display:flex;position:fixed;bottom:0;left:0;right:0}@media (width>=1004px){.transport{border:1px solid var(--line);border-radius:14px;width:980px;padding:10px 12px;bottom:12px;left:50%;right:auto;transform:translate(-50%)}}.transport .play{background:var(--accent);color:#111;border:0;min-width:96px;padding:12px 18px;font-weight:700}.transport .play.on{background:#ff6b4a}.tinfo{flex-direction:column;flex:1;min-width:0;display:flex}.tinfo b,.tinfo span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tinfo span{color:var(--muted);font-size:.75rem}.toast{background:var(--accent);color:#111;z-index:11;border-radius:10px;padding:8px 14px;font-weight:600;position:fixed;bottom:84px;left:50%;transform:translate(-50%)}.modeswitch{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;display:grid}.modeswitch button{text-align:left;flex-direction:column;gap:2px;padding:10px 12px;display:flex}.modeswitch button span{color:var(--muted);font-size:.75rem;font-weight:400}.modeswitch button.active{border-color:var(--accent);color:var(--text);background:#2a2614}.modeswitch button.active span{color:#cfc39a}.buildcard{border-color:#5a4b1c}.buildcard h2{font-size:1.15rem}.buildcard p{margin:6px 0}.stepper{flex-wrap:wrap;gap:4px;margin-bottom:10px;display:flex}.stepper .dot{border-radius:999px;min-width:34px;padding:4px 8px;font-size:.8rem}.stepper .dot.done{color:#cfc39a;background:#2a2614;border-color:#5a4b1c}.movebox{background:var(--card2);border-left:3px solid var(--accent);border-radius:8px;margin:8px 0;padding:8px 10px;font-size:.92rem}.small{font-size:.82rem}.addc{color:var(--accent)}.remc{color:#ff7a7a}button.primary{background:var(--accent);color:#111;border-color:var(--accent);font-weight:700}button.primary:disabled{background:var(--card2);color:var(--muted);border-color:var(--line)}.done{background:#13261d;border:1px solid #2c6b4c;border-radius:8px;padding:8px 10px}.track.changed{box-shadow:0 0 0 2px var(--accent)}.trackhead h2 .badge{margin-left:4px}.nochange summary{color:var(--muted);font-size:.85rem;font-weight:400}.stepnav{gap:4px;display:flex}.stepnav button{padding:10px 14px;font-weight:700}.difflg{color:var(--text)}