:root{--ink:#233f36;--green:#246b58;--paper:#f7f5ed;--pale:#e8f0e9;--line:#d7dfd6;--muted:#607469;--amber:#9b6528;font-family:system-ui,-apple-system,"PingFang SC",sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:24px 24px 60px}a{color:var(--green);text-underline-offset:4px}button,select,input{font:inherit}button,select{border:1px solid #b7cbbf;border-radius:13px;padding:12px 16px;min-height:50px}button{cursor:pointer;font-weight:650;transition:background .15s}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #c6903c;outline-offset:4px}button.primary{background:var(--green);color:white;border-color:var(--green)}button.secondary{background:var(--pale);color:var(--ink)}button.quiet{background:transparent;color:var(--muted);border-color:transparent;font-size:15px}button:hover:not(:disabled){filter:brightness(.96)}.wide{width:100%;display:block;margin-top:10px}.primary.wide{min-height:58px}h1{font-size:clamp(30px,4.8vw,46px);line-height:1.25;letter-spacing:-.03em;margin:16px 0}h2{font-size:25px;line-height:1.35;margin:12px 0 18px}h3{font-size:19px;line-height:1.4;margin:0 0 8px}p{margin:10px 0}section,.help{padding:25px;border:1px solid var(--line);background:#fffefa;border-radius:22px;margin-bottom:22px}.breadcrumbs{display:flex;gap:12px;font-size:14px;flex-wrap:wrap}.hero{padding:32px 4px 24px}.hero>p{max-width:700px;font-size:17px;color:#53665b}.eyebrow{font-size:13px;letter-spacing:.06em;color:var(--amber);font-weight:750}.hero-footer,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.hero-footer{margin-top:20px;flex-wrap:wrap}.pill{padding:6px 12px;background:#e4ecdf;border-radius:99px;font-size:14px}.sound-toggle{display:flex;gap:9px;align-items:center;font-size:15px}.sound-toggle input{accent-color:var(--green);width:21px;height:21px}.small,.hero>.small{font-size:13px;color:var(--muted)}.journey h2{font-size:18px;margin:0 0 12px}.section-heading{flex-wrap:wrap}.journey-actions,.step-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}summary{cursor:pointer;min-height:48px;align-content:center;font-weight:650}#course-menu>summary{display:flex;justify-content:space-between;gap:15px;padding:9px 0}.lesson-list{display:grid;gap:8px;margin:8px 0 16px}.lesson-choice{display:grid;grid-template-columns:32px 1fr;gap:4px 10px;text-align:left;background:#fff;border:1px solid var(--line);font-size:16px;padding:14px}.lesson-choice.active{border-color:var(--green);background:var(--pale)}.lesson-choice .index{grid-row:span 2;align-self:center;font-size:22px;color:var(--green)}.lesson-choice small{font-weight:400;color:var(--muted);font-size:13px}.lesson-copy{padding:19px;background:#f3f3e9;border-radius:16px;margin:18px 0}.lesson-copy p{margin-bottom:0}.study-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-row label{display:grid;gap:4px;font-size:13px;color:var(--muted)}select{width:100%;background:white;color:var(--ink);min-width:0;font-size:16px}.chord-caption{font-weight:700;text-align:center;margin:16px 0 0;font-size:18px}.diagram{max-width:360px;margin:auto}.diagram svg{width:100%;height:auto;display:block;overflow:visible}.diagram .fret{stroke:#cad3c9;stroke-width:1.5}.diagram .nut{stroke:#6a8074;stroke-width:4}.diagram .string{stroke:#8fa398}.diagram .active-string{stroke:var(--green);stroke-width:4}.diagram .finger{fill:#718f78}.diagram .active-finger{fill:var(--green)}.diagram .barre{stroke:#718f78;stroke-width:18;stroke-linecap:round}.diagram .finger-label{fill:white;font-size:13px;font-weight:700;text-anchor:middle}.diagram .label{fill:var(--muted);font-size:14px;text-anchor:middle}.diagram .open{fill:white;stroke:#718f78;stroke-width:2}.diagram .focus-string{fill:#e1ede1}.diagram .fret-label{fill:#657769;font-size:11px}.diagram .capo{fill:#e1ebdf}.diagram .capo-text{fill:var(--green);font-size:12px;text-anchor:middle}.diagram-help{font-size:12px;color:var(--muted);margin:4px 0}.note-panel{padding:20px;background:#eff4ee;border-radius:18px}.big-note{font-size:66px;font-weight:750;line-height:1.2;margin:14px 0 6px;color:var(--green);letter-spacing:-.04em}.note-equation{font-weight:650;background:white;padding:12px;border-radius:12px}#position-explanation{font-size:14px}.string-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:22px 0}.string-card{background:white;min-width:0;padding:12px 5px;display:grid;gap:3px;text-align:center}.string-card.active{background:var(--green);color:white;border-color:var(--green)}.string-card strong{font-size:20px}.string-card span,.string-card small{font-size:12px}.string-card.muted{color:#7b817b;background:#f3f2ed}.step-actions{margin:18px 0 10px}#quiz-title{font-size:23px}progress{appearance:none;width:100%;height:7px;border:0;margin:15px 0 10px;border-radius:6px;overflow:hidden;background:#e2e9df}progress::-webkit-progress-bar{background:#e2e9df}progress::-webkit-progress-value{background:var(--green)}progress::-moz-progress-bar{background:var(--green)}.quiz-diagram{max-width:270px}.quiz-options{display:grid;gap:10px;margin:20px 0 10px}.quiz-option{width:100%;background:white;color:var(--ink);font-size:23px;text-align:left;padding:14px 20px;min-height:59px}.quiz-option .option-letter{font-size:14px;margin-right:18px;color:var(--muted)}.quiz-option:disabled{opacity:1}.quiz-option.correct{background:#e2f0e6;border:2px solid var(--green)}.quiz-option.incorrect{background:#fff0e2;border:2px solid #b77530}.feedback{background:#edf4ee;border-radius:16px;padding:20px;margin-top:18px}.feedback strong{font-size:21px;color:var(--green)}.feedback p{line-height:1.8}.feedback.miss{background:#fbf0df}.feedback.miss strong{color:#87541d}#result-title{font-size:32px}.transfer{background:#f3f3e9;padding:20px;border-radius:16px;margin:20px 0}.result-topic{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}.help{font-size:15px;background:transparent}.help li{margin:10px 0}.help ol{padding-left:23px}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;padding:10px 0}#study,#quiz,#result{scroll-margin-top:15px}[hidden]{display:none!important}
@media(max-width:650px){main{padding:18px 14px 45px}section,.help{padding:18px;border-radius:19px}.hero{padding-top:26px}.hero>p{font-size:16px}.study-layout{grid-template-columns:1fr;gap:18px}.diagram{max-width:330px}.note-panel{padding:18px}.string-cards{grid-template-columns:repeat(3,1fr)}.big-note{font-size:56px}.journey-actions{grid-template-columns:1fr}h2{font-size:22px}.step-actions button{padding:12px 7px}.quiz-options{margin-top:12px}.quiz-diagram{max-width:250px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.free-fret-control{display:grid;grid-template-columns:1fr 130px;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-top:10px}