:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans JP,sans-serif;color:var(--text, #203c35);background:var(--page, #f5f4ef);font-synthesis:none;font-weight:400;line-height:1.6}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select,summary{cursor:pointer}button{touch-action:manipulation}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,.board-scroll:focus-visible{outline:3px solid var(--strong-line, #bd783a);outline-offset:3px}button:disabled{cursor:default}button{color:inherit}a{color:inherit;text-decoration:none}.topbar{height:90px;border-bottom:1px solid var(--line, #dedfd6);display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{display:flex;align-items:center;gap:8px;font-family:Georgia,serif;font-size:26px;font-weight:700}.brand em{font-weight:400;color:var(--muted, #8a986e)}.brand-icon{background:#214b3f;color:#fff;width:35px;height:40px;display:grid;place-items:center;border-radius:9px;font-size:30px;margin-right:5px}.brand-sub{font:9px/1.5 sans-serif;letter-spacing:1.8px;margin-left:16px;border-left:1px solid var(--line, #c8cfc4);padding-left:20px;max-width:135px}.topbar-note{font-size:11px;color:var(--muted, #6f7b6a)}.topbar-note i{display:inline-block;width:6px;height:6px;background:var(--raised, #729273);border-radius:50%;margin-right:8px}main{max-width:1240px;margin:auto;padding:48px 40px 20px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.8px;color:var(--muted, #6d7c67);margin:0 0 10px}h1{font-size:32px;letter-spacing:1.5px;line-height:1.4;margin:8px 0 12px}p{margin:0}.intro>div>p:last-child{font-size:12px;color:var(--muted, #7a8275)}.practice-badge{border-left:2px solid var(--line, #cfb887);padding-left:18px;display:flex;flex-direction:column;gap:5px}.practice-badge span{font-size:9px;letter-spacing:1.8px;color:var(--muted, #7d8579)}.practice-badge b{font-size:14px;letter-spacing:6px;font-weight:500}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:24px;align-items:start}.practice-card{background:var(--surface, #fffefa);border:1px solid var(--line, #dfe2d7);border-radius:14px;padding:26px;overflow:hidden;box-shadow:0 4px 12px #203c3503}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-top .eyebrow{margin:0;font-size:9px}.position-chip{background:var(--raised, #edf0e6);padding:4px 10px;border-radius:5px;letter-spacing:1px;font-size:9px;color:var(--text, #617157)}.question{text-align:center;padding:32px 0 25px}.key-label{font-size:10px;color:var(--muted, #7e897b);letter-spacing:1px}.key-label b{font-weight:550;margin-left:7px;color:var(--text, #3e594a)}.question h2{font-size:17px;font-weight:500;margin:15px 0 0}.target{font-family:Georgia,serif;font-size:76px;line-height:1.2;margin:6px 0 12px;letter-spacing:-2px;color:var(--text, #204f3d)}.question p{font-size:12px;color:var(--muted, #737e6d)}.question .root-caption{font-size:10px;margin-top:5px}.board-container{margin-top:8px}.board-caption{display:flex;justify-content:space-between;font-size:9px;color:var(--muted, #7b8476);margin-bottom:14px;gap:10px}.legend-root{display:inline-block;border:2px solid var(--strong-line, #aa925c);border-radius:50%;height:9px;width:9px;margin-right:4px}.board-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:3px 2px 8px}.fretboard{width:100%;-webkit-user-select:none;user-select:none}.fret-header,.string-row,.fret-dots{display:grid}.fret-header{font-size:11px;color:var(--muted, #75816c);text-align:center;margin-bottom:12px}.fret-header>span:first-child{font-size:8px;align-self:center}.string-row{height:48px}.string-label{display:flex;align-items:center;gap:8px}.string-label b{font-size:13px;font-weight:500}.string-label small{font-size:9px;color:var(--muted, #8b9283)}.fret-cell{position:relative;background:var(--fret, #f2eddf);border:0;border-right:2px solid var(--string, #bdbba8);padding:0;display:grid;place-items:center;border-radius:0;min-width:48px;min-height:48px}.string-row:nth-child(2n) .fret-cell{background:var(--fret-alt, #f5f0e4)}.fret-cell:before{content:"";position:absolute;top:50%;height:var(--string-weight);left:0;right:0;background:var(--string, #aea793);pointer-events:none}.fret-cell:hover:not(:disabled){background:var(--raised, #e5e8d8)}.fret-cell:focus-visible{outline-offset:-4px;z-index:1}.note-marker{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600}.is-root .note-marker{border:1px solid var(--strong-line, #a08b59);color:var(--gold-text, #7d6939);background:var(--gold-bg, #faf5e7)}.is-correct .note-marker{background:#285f47;color:#fff;border-color:var(--strong-line, #285f47)}.is-wrong .note-marker{background:var(--warning-bg, #f6ddd2);color:var(--warning-text, #a4472c)}.fret-dots{text-align:center;height:27px;color:var(--muted, #b4b39d);font-size:15px;letter-spacing:4px}.scroll-hint{text-align:center;font-size:9px;color:var(--muted, #7e8775);display:none}.feedback{background:var(--raised, #f4f5ef);border:1px solid var(--line, #e8eadf);border-radius:8px;padding:15px 17px;display:flex;flex-direction:column;gap:3px;min-height:80px;margin-top:18px}.feedback b{font-size:12px;font-weight:600}.feedback span{font-size:11px;color:var(--muted, #5d6e56)}.feedback.success{background:var(--raised, #eaf2e8);border-color:var(--line, #d5e5d2)}.feedback.retry{background:var(--warning-bg, #fbf0e6);border-color:var(--line, #eedbc9)}.question-actions{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.text-button{border:none;background:none;font-size:12px;padding:10px 0;color:var(--muted, #6f7c64)}.text-button:disabled{opacity:.4}.primary-button{border:0;background:#244e40;color:#fff;padding:12px 23px;border-radius:6px;font-size:12px;min-width:140px}.primary-button span{margin-left:20px}.primary-button:hover{background:#173d30}aside{display:flex;flex-direction:column;gap:16px}.progress-card,.settings-card{border:1px solid var(--line, #dde1d4);background:var(--surface, #fbfcf6);border-radius:12px;padding:22px}.progress-card h2{font-size:14px;margin:0;font-weight:550}.accuracy{display:flex;align-items:baseline;gap:10px;margin-top:13px}.accuracy>b{font:42px/1.3 Georgia,serif}.accuracy>span{font-size:10px;color:var(--muted, #7b8872)}.progress-track{height:4px;background:var(--raised, #e5eadc);border-radius:3px;margin:12px 0 20px;overflow:hidden}.progress-track div{background:#839761;height:100%}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stats>div+div{border-left:1px solid var(--line, #dee5d3);padding-left:14px}.stats b{font-size:23px;font-weight:500;display:block;line-height:1.3}.stats b small{font-size:12px;color:var(--muted, #8b957d)}.stats span,.fine-print{font-size:11px;color:var(--muted, #5d6e56)}.fine-print{margin-top:16px;line-height:1.8}.settings-card{background:transparent}.settings-card summary{font-size:13px;font-weight:600;list-style:none;display:flex;justify-content:space-between}.settings-card summary::-webkit-details-marker{display:none}.settings-card summary span{color:var(--muted, #87957b)}.settings-body{display:grid;grid-template-columns:1fr 1fr;gap:15px 12px;margin-top:20px}.settings-body>label{display:flex;flex-direction:column;font-size:10px;gap:5px;color:var(--muted, #6d7b62)}select{width:100%;border:1px solid var(--line, #d9dfcf);background:var(--surface, #fffef9);color:var(--text, #354e37);border-radius:5px;min-height:38px;padding:6px;font-size:12px}.settings-body fieldset{grid-column:1/-1;padding:0;border:0;margin:0}.settings-body legend{font-size:10px;color:var(--muted, #6d7b62);margin-bottom:7px}.quality-options{display:flex;flex-wrap:wrap;gap:9px}.quality-options label{font-size:11px;display:flex;align-items:center;gap:3px}.quality-options input{accent-color:var(--accent, #28533c);margin:0;width:15px;height:15px}.settings-help{grid-column:1/-1;font-size:9px;color:var(--muted, #5d6e56);line-height:1.9}.tip-card{padding:15px 8px}.tip-card .eyebrow{font-size:8px;color:var(--gold-text, #9a865d)}.tip-card h2{font-size:13px;font-weight:550;margin:8px 0}.tip-card p{font-size:10px;color:var(--muted, #7c8573);line-height:2}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line, #dfe2d6);margin-top:40px;padding-top:20px;color:var(--muted, #8b937e);font-size:9px;letter-spacing:1px}footer>span:first-child{font-family:Georgia,serif;font-size:11px}.empty-state{padding:80px 0;text-align:center}.empty-state h2{font-size:18px}.empty-state p{font-size:12px}@media(min-width:1500px){main{padding-top:60px}}@media(max-width:1000px){main{padding:32px 24px}.workspace{grid-template-columns:minmax(0,1fr) 248px;gap:16px}.practice-card{padding:20px}.brand-sub,.practice-badge{display:none}.board-caption{font-size:8px}.scroll-hint{display:block}}@media(max-width:760px){.topbar{height:70px;padding:0 20px}.brand{font-size:23px}.topbar-note{display:none}main{padding:28px 16px 20px}.intro{margin-bottom:25px}h1{font-size:26px;letter-spacing:.4px}.intro>div>p:last-child{font-size:11px}.eyebrow{font-size:8px}.workspace{display:flex;flex-direction:column;gap:22px}.practice-card{width:100%;padding:18px 14px}.card-top .eyebrow{font-size:8px;letter-spacing:1px}.position-chip{font-size:8px}.question{padding:24px 0 20px}.question h2{font-size:16px}.target{font-size:64px}.board-caption{font-size:8px}.board-caption>span:first-child{max-width:220px}.feedback{min-height:84px;padding:13px}.question-actions{margin-top:16px}.primary-button,.text-button{min-height:44px}.scroll-hint{display:block}aside{width:100%;display:grid;grid-template-columns:1fr;gap:16px}.progress-card,.settings-card{padding:22px}.accuracy{margin-top:8px}.stats{grid-template-columns:1fr 1fr}.tip-card{padding:10px 5px}.tip-card p{font-size:11px}.settings-body{gap:16px}select{min-height:44px}.quality-options{gap:18px}.quality-options label{min-height:32px}.settings-help{font-size:10px}.fine-print{font-size:11px}footer{margin-top:24px;font-size:8px}footer>span:last-child{display:none}}.practical-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0}.practical-intro h2{margin:5px 0 10px;font-size:24px}.practical-intro p:not(.eyebrow){font-size:12px;color:var(--muted, #728067)}.guide-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.guide-controls label{font-size:11px;color:var(--muted, #6d7b62)}.guide-controls select{margin-top:6px}.progression-strip{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;margin:24px 0 0}.progression-strip>div{display:flex;flex-direction:column;padding:12px;border-radius:7px;background:var(--raised, #f0f1e8);border:1px solid transparent}.progression-strip>div.current{background:#264f41;color:#fff}.progression-strip span{font-size:10px;opacity:.7}.progression-strip b{font:22px Georgia,serif;margin:5px 0}.progression-strip small{font-size:11px}.guide-question{padding:25px 0}.guide-question .current-note{margin-top:10px;font-size:11px}.is-reference .note-marker{background:var(--raised, #e6eadc);border:2px solid var(--strong-line, #798964);color:var(--text, #3f5d40)}.is-reference.is-correct .note-marker{background:#285f47;border-color:var(--strong-line, #285f47);color:#fff}.is-reference.is-wrong .note-marker{background:var(--warning-bg, #f6ddd2);color:var(--warning-text, #a4472c);border-color:var(--strong-line, #a4472c)}.primary-button:disabled{opacity:.4}.guide-score{font-size:11px;color:var(--muted, #64745b);border-top:1px solid var(--line, #e2e6d8);padding-top:18px;margin-top:24px}.guide-score span{display:block;margin-top:4px;font-size:9px}.line-review{margin-top:35px}.line-review h2{font-size:20px}.line-review>p:not(.eyebrow){font-size:13px;line-height:1.9;margin-bottom:20px}.line-notes{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0;gap:12px}.line-notes>div{display:flex;flex-direction:column;background:var(--raised, #eff3e8);padding:16px 8px;text-align:center;border-radius:8px}.line-notes b{font:38px Georgia,serif}.line-notes span{font-size:11px;margin:8px 0}.line-notes small{font-size:10px;color:var(--muted, #728266)}.audio-note{display:block;font-size:10px;color:var(--muted, #748368);margin-top:10px}.transfer-task{background:var(--raised, #f7f3e7);padding:20px;border-radius:8px;margin:28px 0 5px}.transfer-task h3{font-size:14px;margin:0 0 10px}.chord-chart{font-family:Georgia,serif;font-size:17px}.transfer-task ol{padding-left:20px;font-size:12px;line-height:2}.transfer-task>p:last-child{font-size:10px;color:var(--muted, #7e8067)}.practice-purpose{padding:0 6px 18px}.practice-purpose p+p{margin-top:12px}.practice-path{background:var(--surface, #f9faf3);padding:20px;border:1px solid var(--line, #dde2d3);border-radius:10px}.practice-path>h2{font-size:13px;margin:0 0 18px}.practice-path>div{display:flex;gap:10px;padding:15px 0;border-top:1px solid var(--line, #e3e7d9)}.practice-path>div>span{font-size:10px;color:var(--muted, #8a957d)}.practice-path h3{font-size:12px;margin:0 0 5px;font-weight:550}.practice-path p{font-size:10px;color:var(--muted, #7c8770)}.practice-path small{display:inline-block;font-size:9px;color:var(--muted, #839176);margin-top:5px}.practice-path .available small{color:var(--text, #365c3a)}.practice-references{font-size:11px;color:var(--muted, #63755c);padding:0 8px}.practice-references ul{padding-left:15px;line-height:2}.practice-references a{text-decoration:underline}.practice-references p{font-size:10px}.answer-mode-setting{grid-column:1/-1}.answer-progress{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:15px;flex-wrap:wrap}.answer-progress b{font-size:12px;margin-right:5px}.answer-progress span{font-size:11px;border:1px solid var(--line, #dbe1d0);border-radius:20px;padding:3px 10px}.answer-progress .collected{background:#285f47;color:#fff;border-color:var(--strong-line, #285f47)}@media(max-width:760px){.practical-intro{align-items:start}.practical-intro h2{font-size:21px}.practical-intro>.position-chip{display:none}.guide-controls{gap:8px}.guide-controls label{font-size:10px}.progression-strip{gap:5px}.progression-strip>div{padding:10px 8px}.progression-strip b{font-size:20px}.line-review h2{font-size:17px}.line-notes{gap:6px}.line-notes b{font-size:30px}.transfer-task{padding:15px}.practical-view aside{margin-top:8px}}.string-label{position:sticky;left:0;z-index:2;background:var(--surface, #fffefa)}.fret-header>span:first-child{position:sticky;left:0;z-index:2;background:var(--surface, #fffefa)}.mode-purpose{font-size:12px;color:var(--muted, #62765d);margin:-8px 0 22px}.pattern-options{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}.pattern-options button{border:1px solid var(--line, #d5ddcd);border-radius:8px;padding:12px 10px;background:var(--surface, #f7f9f0);text-align:left}.pattern-options button[aria-pressed=true]{background:#244e40;color:#fff;border-color:var(--strong-line, #244e40)}.pattern-options b{font-size:12px}.pattern-options span{display:block;font-size:10px;opacity:.75;margin-top:5px}.melody-settings{margin:18px 0;font-size:11px;color:var(--muted, #6a795f)}.melody-settings .guide-controls{margin-top:12px}.melody-toolbar{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;margin:20px 0}.melody-toolbar label{display:flex;gap:6px;align-items:center;min-height:32px}.melody-toolbar input{accent-color:var(--accent, #285f47)}.melody-instruction{padding:22px 0 16px;text-align:center}.melody-instruction h2{font-size:32px;margin:4px 0 10px}.melody-instruction p:last-child{font-size:12px;color:var(--muted, #65775c)}.melody-ribbon{display:flex;gap:5px;margin:12px 0 25px;flex-wrap:wrap}.melody-ribbon>div{flex:1;min-width:52px;text-align:center;border:1px solid var(--line, #e1e5d9);border-radius:7px;padding:7px 3px;display:flex;flex-direction:column}.melody-ribbon small{font-size:9px}.melody-ribbon b{font:24px Georgia,serif}.melody-ribbon span,.melody-ribbon em{font-size:9px;font-style:normal}.melody-ribbon .now{background:#264f41;color:#fff;border-color:var(--strong-line, #264f41)}.melody-ribbon .played{background:var(--raised, #eaf0df);color:var(--text, #4e6744)}.is-hint .note-marker{background:var(--raised, #d8e6ba);color:var(--text, #284b32);border:2px solid var(--strong-line, #769659);box-shadow:0 0 0 4px #d8e6ba55}.melody-actions{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:20px}.melody-actions .text-button:disabled{opacity:.35}.played-positions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.played-positions span{font-size:10px;background:var(--surface, #fffaf0);padding:4px 7px;border-radius:4px}.melody-how{font-size:12px;line-height:2.2;padding-left:18px}.practical-view .tip-card p+p{margin-top:12px}@media(max-width:760px){.pattern-options{grid-template-columns:1fr 1fr}.pattern-options button:first-child{grid-column:1/-1}.melody-toolbar{gap:4px 14px}.melody-ribbon>div{flex-basis:17%;min-width:42px}.melody-instruction h2{font-size:27px}.melody-actions{gap:8px 16px}.melody-actions .primary-button{width:100%}}.pentatonic-help{font-size:11px;color:var(--muted, #677a60);margin-top:22px}.pentatonic-help p{margin-top:10px}.note-display-toggle{display:flex;gap:5px;margin:18px 0 8px}.note-display-toggle button{border:1px solid var(--line, #dce2d3);background:var(--surface, #fafbf5);padding:9px 14px;border-radius:6px;font-size:12px;min-height:42px}.note-display-toggle button[aria-pressed=true]{background:#264f41;color:#fff;border-color:var(--strong-line, #264f41)}.relative-help{font-size:10px;color:var(--muted, #738368);line-height:1.8}.pent-stages{display:flex;gap:7px;margin-top:22px}.pent-stages button{flex:1;background:var(--raised, #f6f8ef);border:1px solid var(--line, #d9e0cd);border-radius:6px;min-height:44px;font-size:12px;padding:10px 6px}.pent-stages button[aria-pressed=true]{border-color:var(--strong-line, #769761);background:var(--raised, #e8efdc)}.pent-formula{display:flex;justify-content:center;gap:15px;margin-top:20px}.pent-formula>span{display:flex;flex-direction:column;min-width:32px}.pent-formula b{font:25px Georgia,serif}.pent-formula small{font-size:10px;color:var(--muted, #748766)}.question .pent-count{margin-top:15px;color:var(--text, #335b3f);font-size:14px}.is-visible-note .note-marker{background:var(--raised, #e5ecd9);color:var(--text, #526d40);border:1px solid var(--line, #bdcca9)}.is-visible-note.is-wrong .note-marker{background:var(--warning-bg, #f6ddd2);color:var(--warning-text, #a4472c);border-color:var(--strong-line, #a4472c)}@media(max-width:760px){.pent-stages button{font-size:10px}.note-display-toggle button{flex:1;padding:9px 6px}.relative-help{font-size:9px}}.practice-index .intro{margin-bottom:12px}.practice-index .intro>div>p{font-size:15px;color:var(--text, #526158)}.start-note{font-size:14px;color:var(--text, #526158)}.start-note a{text-decoration:underline;text-underline-offset:3px}.roadmap-stage{margin:32px 0}.stage-heading h2{margin:0 0 10px;font-size:18px}.lesson-grid{margin-left:24px;border-top:1px solid var(--line, #cbd1c7)}.lesson-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 8px;border-bottom:1px solid var(--line, #dedfd6)}.lesson-card h3{margin:0 0 4px;font-size:17px;font-weight:600}.lesson-card p{margin:0;color:var(--text, #526158);font-size:14px}.lesson-card>span{flex-shrink:0;padding:0 8px}a.lesson-card:hover{background:var(--raised, #e9eee3)}.upcoming-lessons article+article{margin-top:16px}.lesson-guide{border-top:1px solid var(--line, #d5dbcf);border-bottom:1px solid var(--line, #d5dbcf);padding:12px 0;margin:16px 0 20px}.lesson-guide summary{font-weight:600;min-height:28px}.lesson-guide h3{font-size:15px;margin-bottom:4px}.lesson-guide>:not(summary){margin-left:20px}.lesson-guide p{max-width:850px}.lesson-guide a{text-decoration:underline}.lesson-breadcrumb{display:flex;gap:12px;margin:0 0 12px;font-size:14px}.lesson-heading h1{font-size:clamp(24px,4vw,34px);margin:6px 0}.lesson-heading p{margin:6px 0}.lesson-navigation{display:flex;justify-content:space-between;gap:20px;padding:28px 0;flex-wrap:wrap}.lesson-navigation a,.home-link{padding:10px 0;text-decoration:underline;text-underline-offset:4px}main:focus{outline:none}@media(max-width:600px){.home-link{font-size:12px}.lesson-card{padding:16px 4px}}.rhythm-card{padding:24px}.rhythm-controls{border:0;padding:0;display:flex;flex-wrap:wrap;gap:16px}.rhythm-controls legend{font-weight:600;margin-bottom:10px}.rhythm-controls label{display:flex;flex-direction:column;gap:4px;font-size:14px}.rhythm-controls label:has(input){flex-direction:row;align-items:center}.rhythm-controls select{max-width:100%;padding:8px;border:1px solid var(--line, #cdd5cb);border-radius:6px;background:var(--surface, white)}.rhythm-chords,.beat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}.rhythm-chords>div,.beat-strip>div{display:flex;align-items:center;flex-direction:column;padding:12px 4px;border:1px solid var(--line, #d9dfd2);border-radius:9px}.rhythm-chords b{font-size:20px}.beat-strip b{font-size:30px}.rhythm-chords .current,.beat-strip .current{background:#234c40;color:#fff}.rhythm-review{margin:16px 0}.rhythm-review>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.rhythm-review span{padding:10px;border-radius:6px;overflow-wrap:anywhere}.rhythm-review small{display:block}.rhythm-review .met{background:var(--raised, #e7edde)}.rhythm-review .miss{background:var(--warning-bg, #f6e5da)}@media(max-width:600px){.rhythm-card{padding:16px}.rhythm-controls label{max-width:100%}.rhythm-chords b{font-size:16px}.rhythm-review>div{grid-template-columns:repeat(2,minmax(0,1fr))}}.rhythm-controls[hidden]{display:none}.rhythm-playing-area{scroll-margin-top:8px}.rhythm-overview{position:sticky;top:0;z-index:5;background:var(--surface, #fff);padding:4px 0 8px}.rhythm-overview .rhythm-chords{margin:0 0 8px;gap:6px}.rhythm-overview .rhythm-chords>div{flex-direction:row;justify-content:center;gap:8px;padding:6px 4px}.rhythm-transport{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,2fr);column-gap:16px;align-items:center}.rhythm-transport h2{grid-column:1;grid-row:1;margin:0;font-size:21px}.rhythm-transport .rhythm-cycle{grid-column:1;grid-row:2;margin:0}.rhythm-transport .beat-strip{grid-column:2;grid-row:1 / 3;margin:0;gap:4px}.rhythm-transport .beat-strip>div{padding:4px 0;border-radius:5px}.rhythm-transport .beat-strip b{font-size:20px}.rhythm-transport .beat-strip span{font-size:10px}@media(max-width:600px){.rhythm-overview .rhythm-chords>div{flex-direction:column;gap:0;padding:4px 0}.rhythm-transport{grid-template-columns:1fr;gap:4px}.rhythm-transport h2{font-size:18px}.rhythm-transport .beat-strip{grid-column:1;grid-row:3}}.beat-strip.eighth-strip{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.eighth-strip b{font-size:22px}@media(max-width:600px){.beat-strip.eighth-strip{gap:3px}.eighth-strip>div{padding:10px 0}.eighth-strip b{font-size:16px}.eighth-strip span{font-size:11px}}.rhythm-hint-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:8px 0;padding:8px 12px;background:var(--raised, #f1f4ec);border-radius:10px}.rhythm-hint-controls label{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.rhythm-hint-controls select{max-width:100%;padding:8px;border:1px solid var(--line, #cdd5cb);border-radius:6px;background:var(--surface, #fff)}.rhythm-hint-controls p{flex-basis:100%;font-size:13px;margin:0}.rhythm-cycle{font-size:13px;margin:4px 0;color:var(--muted, #65775c)}.fret-cell.is-blocked,.fret-cell.is-blocked:disabled{background:#161918;opacity:1;cursor:not-allowed}.fret-cell.is-blocked:before{display:none}.fret-cell.is-blocked .note-marker{color:var(--muted, #8d9992);background:transparent;border:0;box-shadow:none}.restriction-controls{grid-column:1 / -1}.restriction-controls fieldset{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.restriction-controls label{display:flex;align-items:center;gap:6px;min-height:44px}.restriction-controls input{width:auto}.restriction-summary{font-size:13px}.rhythm-playing-area>.melody-actions{margin:8px 0;gap:8px 16px}.rhythm-hint-controls .note-display-toggle{margin:0}.mini-phrase-controls{display:flex;flex-wrap:wrap;gap:12px 20px;padding:16px;margin-bottom:16px;border:1px solid var(--line, #d9dfd2);border-radius:8px}.mini-phrase-controls label{display:flex;flex-direction:column;gap:4px}.mini-phrase-controls select{max-width:100%;min-height:44px}.mini-phrase-controls:disabled{display:none}.mini-phrase-heading{position:sticky;top:0;background:var(--surface, #fff);z-index:5;padding:8px 0}.mini-phrase-heading h2{margin:0;font-size:23px}.mini-phrase-sequence{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.mini-phrase-sequence span{padding:8px;border-radius:6px;background:var(--raised, #edf1e6)}.mini-phrase-sequence .current{background:#234c40;color:#fff}.mini-phrase-sequence .played{background:var(--raised, #dce9cd)}.mini-phrase-cue{margin:2px 0 6px;font-size:14px;font-weight:600;color:var(--text, #234c40)}.mini-phrase-controls .mini-phrase-restriction{flex-direction:row;align-items:center}.mini-phrase-phase{font-size:12px;color:var(--muted, #65775c);margin:0 0 4px}.mini-phrase-sequence small{display:block;font-size:11px}.mini-phrase-study .is-reference:not(.is-correct):not(.is-wrong):not(.is-hint) .note-marker{color:var(--warning-text, #755317);background:var(--gold-bg, #fff0c4);border:2px solid var(--strong-line, #b48b3b);box-shadow:none;border-radius:5px;font-size:11px}.mini-phrase-study .is-visible-note .note-marker{background:#285f47;color:#fff;border-color:var(--strong-line, #285f47)}.mini-phrase-celebration{position:absolute;right:0;bottom:8px;pointer-events:none;background:#234c40;color:#fff;border-radius:8px;padding:12px 18px;box-shadow:0 3px 16px #234c4033;animation:phrase-complete 1.1s ease-out both}@keyframes phrase-complete{0%{opacity:0;transform:translateY(8px) scale(.95)}15%,70%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px)}}@media(prefers-reduced-motion:reduce){.mini-phrase-celebration{animation:none}}.mini-phrase-goal{display:inline-block;padding:4px 10px;border-left:3px solid var(--strong-line, #788a67);background:var(--raised, #edf0e7);font-weight:600}.mini-phrase-sequence .demo-current{background:var(--gold-bg, #f1dfb7);outline:2px solid var(--strong-line, #9a6b2e)}@media(max-width:600px){.lesson-grid{margin-left:16px}}.ear-round{scroll-margin-top:8px}.ear-heading{position:relative;margin-bottom:8px}.ear-heading h2{margin:0;font-size:23px}.ear-caption{color:var(--text, #526158);font-size:13px}.ear-input,.ear-stats{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:8px 0}.ear-input>span{min-width:40px;text-align:center;background:var(--raised, #edf0e7);padding:4px 8px;border-radius:4px}.ear-round .is-visible-note .note-marker{background:#285f47;color:#fff}.ear-solution{padding:12px 0}.ear-hints .melody-actions{margin:8px 0}.ear-actions{margin:12px 0}@media(min-width:900px)and (max-height:800px){.ear-round{padding:16px}.ear-heading h2{font-size:20px}}.free-play-caption{margin:10px 0;color:var(--text, #526158);font-size:14px}.free-play-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px}.free-play .is-sounding .note-marker{background:#335b3f;border:2px solid var(--strong-line, #335b3f);color:#fff;box-shadow:0 0 0 4px #335b3f30}@media(min-width:900px)and (max-height:800px){.app-shell:has(.free-play) .topbar{height:56px}main:has(.free-play){padding-top:12px}main:has(.free-play) .lesson-heading h1{font-size:26px}main:has(.free-play) .lesson-breadcrumb{margin-bottom:4px}}.ad-preview-notice{color:var(--text, #526158);font-size:13px;margin:0 0 16px}.ad-preview{border:1px solid var(--line, #d5dbcf);padding:12px;margin:24px 0;font-size:13px}.ad-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.ad-preview-heading button{min-height:44px}.ad-preview-placeholder{display:grid;place-items:center;min-height:90px;margin-top:8px;background:var(--raised, #edf0e7);color:var(--text, #526158)}.ad-preview>p{margin-bottom:0}.topbar-links{display:flex;align-items:center;gap:20px;font-size:14px}.instrument-link{text-decoration:underline;text-underline-offset:4px}@media(max-width:600px){.topbar-links{flex-direction:column;align-items:flex-end;gap:0;font-size:12px}.topbar-links a{display:flex;align-items:center;min-height:28px}.topbar:has(.topbar-links) .brand{font-size:20px}}.bass-playing-area{scroll-margin-top:8px}.bass-playing-area h2{margin:10px 0 4px;font-size:24px}.bass-target{margin:4px 0 8px}.bass-chords,.bass-beats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bass-chords span{padding:8px;background:var(--raised, #edf0e7);border-radius:4px;text-align:center}.bass-beats{margin-bottom:10px}.bass-beats>div{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line, #d5dbcf);border-radius:4px}.bass-chords .current,.bass-beats .current{background:#285f47;color:#fff}.bass-sound{display:flex;align-items:center;gap:8px}.bass-sound input{width:auto}.bass-review{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.bass-review>div{display:grid;gap:4px;padding:10px;border:1px solid var(--line, #d5dbcf)}.bass-review .met{background:var(--raised, #e5ecd9)}.bass-review .miss{background:var(--warning-bg, #f7eee8)}.bass-line .guide-controls[hidden]{display:none}.ear-bar-selector button[aria-pressed=true]{background:#285f47;color:#fff}.ear-bar-selector{margin:12px 0}.ear-bar-selector p{margin:8px 0;font-size:14px}.ear-input>span[data-bar-start=true]{border-left:3px solid var(--strong-line, #526158)}.ear-input-bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.ear-input-bars>span{min-width:0}.ear-input-bars>small{grid-column:1 / -1}@media(max-width:600px){.ear-input-bars{grid-template-columns:repeat(4,minmax(0,1fr))}}.ear-level-picker{margin:16px 0}.ear-level-picker h2{font-size:17px;margin:0 0 10px}.ear-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.ear-level-button{min-height:72px;border:1px solid var(--strong-line, #9cae9f);border-radius:8px;padding:10px 8px;background:var(--surface, #fffefa);color:var(--text, #234d3b);cursor:pointer}.ear-level-button strong{display:block;font-size:18px}.ear-level-button span{display:block;font-size:13px;margin-top:4px}.ear-level-button[aria-pressed=true]{background:#285f47;color:#fff;border-color:var(--strong-line, #285f47);box-shadow:inset 0 0 0 2px #fff9}.ear-level-description{margin:10px 0;font-size:14px}.ear-input-bars>span{padding:4px 2px}@media(max-width:600px){.ear-levels{grid-template-columns:repeat(3,minmax(0,1fr))}.ear-input-bars>span{font-size:13px}}:root{color-scheme:light}:root[data-theme=dark]{color-scheme:dark;--page: #141c19;--surface: #1c2722;--raised: #2c3c30;--text: #dfebe1;--muted: #b0bfaf;--line: #47574b;--strong-line: #90aa83;--accent: #93bc9b;--fret: #30332b;--fret-alt: #35382e;--string: #8c927c;--gold-bg: #51442a;--gold-text: #ebce91;--warning-bg: #52362e;--warning-text: #ffc2aa}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:7px 10px;border:1px solid var(--line, #cbd1c7);border-radius:7px;background:transparent;white-space:nowrap;font-size:12px}.theme-toggle[aria-pressed=true]{color:var(--gold-text);background:var(--raised)}.theme-toggle:hover{border-color:var(--strong-line, #798964)}:root[data-theme=dark] .fret-cell.is-blocked{background:#080c0a}@media(max-width:600px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;gap:4px;padding:10px 16px}.topbar-links{width:100%;flex-direction:row;justify-content:flex-end;align-items:center;gap:12px}.topbar-links a{min-height:44px}}.course-entry{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;margin:16px 0 28px;border:1px solid var(--line, #c6d1bf);border-radius:12px;background:var(--surface, #f0f5e9)}.course-entry p,.course-heading p{margin:0 0 6px}.course-entry h2{margin:0 0 8px}.course-primary{display:inline-block;background:var(--raised, #e4edd9);color:var(--text, #234c35);padding:10px 18px;border:1px solid var(--strong-line, #779368);border-radius:8px;font-weight:700;white-space:nowrap}.course{max-width:1120px;margin:0 auto}.course-heading h1{font-size:25px;margin:0 0 8px}.course-steps{margin:0 0 12px}.course-steps ol{padding-left:24px}.course button:not(.fret-cell){padding:8px 14px;border:1px solid var(--line, #c6d1bf);border-radius:7px;background:var(--surface, #fffefa)}.course button.primary-button,.course button[aria-pressed=true]:not(.fret-cell){background:#316c40;color:#fff;border-color:#316c40}.course-steps li{margin:6px 0}.course-steps button[aria-current]{border-color:var(--strong-line, #557348);font-weight:700}.course-prompt{padding:12px 16px;background:var(--surface, #f0f5e9);border-radius:10px;margin-bottom:12px}.course-prompt h2{font-size:20px;margin:0}.course-prompt p{margin:4px 0}.course-actions{display:flex;flex-wrap:wrap;gap:8px}.course-result{min-height:92px;padding:10px 0}.course-result [role=status]{margin:4px 0 10px}.course-complete{padding:16px;border:1px solid var(--strong-line, #779368);border-radius:10px;background:var(--surface, #f0f5e9)}.course-complete a{display:inline-block;margin:8px 16px 8px 0;text-decoration:underline}.course-note{font-size:12px;color:var(--muted, #526158)}@media(max-width:650px){.course-entry{align-items:flex-start;flex-direction:column;padding:16px}.course-heading h1{font-size:22px}.course-prompt h2{font-size:18px}}.app-shell:has(.course) main{padding-top:12px}.journey-map{border:1px solid var(--line, #c6d1bf);padding:18px;border-radius:12px;margin:16px 0 28px;background:var(--surface, #fffefa)}.journey-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.journey-heading h2{margin:0 0 10px}.journey-map details{margin-top:12px}.journey-map ol{padding-left:24px}.journey-map li{margin:0;border-bottom:1px solid var(--line, #dfe3d7)}.journey-map li a{display:block;padding:12px 8px}.journey-map small{display:block;color:var(--muted, #526158)}.journey-review{padding:12px;margin:12px 0;background:var(--raised, #eef3e8);border-radius:8px}.journey-review a{display:block;padding:8px 0;text-decoration:underline}.unit-instruction{margin:8px 0 12px}.unit-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 0}.unit-actions p{flex-basis:100%;margin:0}.unit-free-link,.guided-entry a{text-decoration:underline}.guided-entry{margin:0 0 14px}.guided-tempo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}.unit-course .practice-card{box-shadow:none;border:0;padding:0;background:transparent}.unit-course .ear-level-picker[hidden],.unit-course fieldset[hidden]{display:none}.unit-course .course-steps{margin-bottom:10px}.drill-target{font-weight:700}.course-progress{margin:0 0 12px}.course-progress>div{display:flex;justify-content:space-between;font-size:13px;gap:12px}.course-progress progress{appearance:none;display:block;width:100%;height:12px;margin:5px 0 0;border:0;border-radius:8px;overflow:hidden;background:var(--line, #dce4d4)}.course-progress progress::-webkit-progress-bar{background:var(--line, #dce4d4)}.course-progress progress::-webkit-progress-value{background:var(--accent, #397945);border-radius:8px;transition:width .18s ease}.course-progress progress::-moz-progress-bar{background:var(--accent, #397945)}.course .fret-cell.is-visible-note .note-marker,.course .fret-cell.is-reference .note-marker{background:#316c40;color:#fff;border:2px solid #a9d28c;box-shadow:0 0 0 4px #39794530;font-weight:700}.course .fret-cell.is-sounding .note-marker{background:#f0cc61;color:#24391f;border:2px solid #805918;box-shadow:0 0 0 6px #dca53750;transform:scale(1.1)}.lesson-celebration{width:min(440px,calc(100vw - 32px));padding:28px;border:1px solid var(--strong-line, #729467);border-radius:18px;background:var(--surface, #fffefa);color:var(--text, #234c35);text-align:center}.lesson-celebration::backdrop{background:#122719aa}.lesson-celebration h2{font-size:28px;margin:12px 0}.celebration-check{width:64px;height:64px;border-radius:50%;background:#397945;color:#fff;font-size:42px;margin:auto}.celebration-actions{display:flex;flex-direction:column;gap:12px;margin-top:20px}.celebration-actions button{padding:10px 16px;border:1px solid var(--line, #bdcbb6);background:var(--raised, #edf3e7);border-radius:8px}@media(prefers-reduced-motion:reduce){.course-progress progress::-webkit-progress-value{transition:none}}.unit-course .lesson-breadcrumb{font-size:12px;margin:0 0 4px}.unit-course .course-heading h1{font-size:22px;margin-bottom:4px}.unit-course .unit-instruction{font-size:13px;line-height:1.5;margin:6px 0}.unit-course .course-prompt{padding:8px 12px}.unit-course .course-prompt h2{font-size:18px}.unit-course .course-prompt p{font-size:13px;margin:4px 0}.unit-course .ear-heading h2{font-size:20px;margin:8px 0 4px}.unit-course .ear-heading p{font-size:13px;margin:4px 0}.unit-course .ear-bar-selector>p{font-size:12px;margin:4px 0}.unit-course .ear-bar-selector .melody-actions{gap:4px}.unit-course .ear-bar-selector button{padding:5px 9px}.unit-course .ear-actions{margin:8px 0}@media(min-width:900px)and (max-height:800px){.app-shell:has(.course) main{padding-top:4px}.course:not(.unit-course) .course-heading h1{font-size:22px;margin-bottom:4px}.app-shell:has(.course) .topbar{height:56px}.unit-course .course-heading h1{font-size:20px}.unit-course .course-heading p{font-size:13px;margin-bottom:2px}.unit-course .course-progress{margin-bottom:6px}}