:root{color-scheme:dark;--bg:#101419;--panel:#1a2028;--border:#343d49;--text:#f0f3f6;--muted:#acb8c6;--root:#b5ef79;--third:#ffc87d;--fifth:#79ccec;--seventh:#c4a4ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,'Yu Gothic',sans-serif}button,input,select{font:inherit}button,select{background:#252e39;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 12px}button{cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--root)}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,.fret-scroll:focus-visible{outline:3px solid var(--seventh);outline-offset:3px}button:disabled{opacity:.55;cursor:wait}input{accent-color:var(--root)}header{height:70px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:12px}header strong{letter-spacing:.12em;font-size:20px}header strong span{color:var(--root)}main{max-width:1420px;margin:auto;padding:26px 32px 36px}.intro{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--root);font-weight:800}h1{margin:4px 0;font-size:34px;line-height:1.4}h2{margin:0;font-size:18px}p{margin:8px 0;color:var(--muted)}.key{border-left:2px solid var(--root);padding-left:15px;white-space:nowrap;letter-spacing:.05em;font-size:14px}.key small{color:var(--muted)}.muted,.hint{color:var(--muted);font-size:14px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px}.transport{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}.primary{background:var(--root);color:#172313;border-color:var(--root);font-weight:800}#play{min-width:112px}.transport label{display:flex;align-items:center;gap:8px;font-size:14px}.transport input{width:94px}.transport .volume input{width:70px}#status{width:100%;font-size:14px;margin:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px}.workspace{display:flex;flex-direction:column;gap:18px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.bar{border-top:2px solid #566070;padding-top:10px;min-width:0}.bar.active{border-color:var(--root)}.bar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.bar-top strong{font-size:20px}.bar-top span{font-size:12px;color:var(--muted)}.beats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.beat{padding:7px 2px;min-height:85px;position:relative;border-radius:6px}.beat small{font-size:11px;color:var(--muted);display:block}.beat strong{display:block;font-size:17px}.beat em{font-size:12px;font-style:normal;display:block}.beat.selected{outline:2px solid var(--root);outline-offset:1px;background:#34432b}.beat.sounding:after{content:'';position:absolute;bottom:-8px;left:20%;width:60%;height:3px;background:white}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.actions button{font-size:13px}.guide{font-size:14px;white-space:nowrap;display:flex;gap:6px;align-items:center}.chord-info{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.chord-info strong{font-size:22px;margin-right:5px}.chip{padding:3px 8px;border:1px solid currentColor;border-radius:6px;font-size:14px}.root{color:var(--root)}.third{color:var(--third)}.fifth{color:var(--fifth)}.seventh{color:var(--seventh)}.other{color:var(--muted)}.fret-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:#161b22}.fretboard{min-width:650px;display:grid;grid-template-columns:40px repeat(13,minmax(42px,1fr));padding:8px 6px 12px;gap:0}.fret-head,.string-label{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}.fret-head{height:26px}.fret{height:55px;border:0;border-right:1px solid #495463;border-radius:0;padding:6px 2px;background:linear-gradient(transparent 48%,#66717b 49%,#66717b 51%,transparent 52%);position:relative}.fret[data-fret='0']{border-right:3px solid #9098a0}.fret span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:35px;height:39px;margin:auto;background:#222b35;border-radius:7px;font-size:14px;line-height:1.15}.fret small{font-size:11px;margin-top:3px}.fret.tone span{background:#2b3440;border:1px solid currentColor}.fret.chosen span{outline:2px solid white;outline-offset:2px}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin:14px 0}.explain{border-left:2px solid var(--third);padding-left:12px;min-height:48px;color:var(--text);font-size:15px}.lesson{align-self:start}.lesson h2{margin:8px 0}.lesson>p{font-size:14px}.check{padding:15px 0;border-bottom:1px solid var(--border)}.check strong{font-size:15px}.check p{font-size:13px;margin:4px 0}.check .mark{color:var(--root);margin-right:8px}.check.done strong{color:var(--root)}#result{font-size:14px;margin:16px 0;color:var(--muted)}#result.clear{padding:12px;border:1px solid var(--root);border-radius:8px;color:var(--root)}#save,#restore{width:100%;margin-bottom:10px}details{border-top:1px solid var(--border);padding-top:15px;margin-top:18px;font-size:14px}summary{cursor:pointer}#connections p{font-size:13px}.sound-controls{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px}.sound-controls label{display:flex;align-items:center;gap:8px;font-size:14px}.sound-controls input{width:100px}.sound-controls button{font-size:14px}footer{font-size:13px;color:var(--muted);margin-top:24px} [hidden]{display:none!important}@media(max-width:1120px){.layout{grid-template-columns:1fr}.lesson{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.lesson>.eyebrow,.lesson>h2,.lesson>p{grid-column:1/-1}.bars{gap:15px}.transport{gap:12px}}@media(max-width:640px){header{padding:0 16px;height:60px}header strong{font-size:16px}header .muted{font-size:11px}main{padding:20px 14px}.intro{display:block}.key{display:none}h1{font-size:28px}.panel{padding:15px}.bars{grid-template-columns:1fr 1fr;gap:18px 14px}.transport{gap:12px}.transport label{flex-wrap:wrap}.transport label:first-of-type{flex:1}.transport select{max-width:180px}.transport #status{font-size:13px}.transport .volume input{width:80px}.beat{min-height:78px}.section-title h2{font-size:16px}.section-title .muted{font-size:12px}.guide{font-size:12px}.lesson{display:block}.legend{gap:10px;font-size:12px}.actions button{padding:9px;font-size:12px}.sound-controls{gap:12px}.sound-controls label{flex-wrap:wrap}.sound-controls select{max-width:220px}.explain{font-size:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.workspace,.panel{min-width:0}@media(max-width:1120px){.layout{grid-template-columns:minmax(0,1fr)}}