/* Chord-scale study catalogue */
.original-scope { display:flex; align-items:center; gap:12px; margin:18px 0; font-size:11px; color:#6c8061; }.original-scope select { min-width:0; max-width:100%; padding:9px; border:1px solid #cbd8bf; border-radius:6px; background:#fffef9; color:#345c3f; }
.original-player audio { width:100%; display:block; margin:14px 0; }.original-audio-speed { display:flex; gap:10px; align-items:center; color:#cbd9bf; font-size:12px; }.original-audio-speed select { padding:6px; border:0; border-radius:5px; background:#edf2e5; color:#264b35; }
.workshop-intro h2 { margin:8px 0; font-size:26px; }.workshop-intro p { font-size:12px; color:#718069; }
.workshop-selectors { display:flex; flex-wrap:wrap; gap:15px; margin:23px 0 18px; }.workshop-scale-field { flex:1; min-width:240px; }.workshop-selectors select { width:100%; }
.workshop-context { display:grid; grid-template-columns:1fr 1fr; gap:25px; border:1px solid #d4ddc9; padding:22px; border-radius:10px; background:#edf1e3; }.workshop-context h3 { font-size:21px; margin:8px 0; }.workshop-context p { font-size:12px; line-height:1.9; color:#617456; }.parent-scale-note { border-left:3px solid #dca770; padding-left:12px; }
.workshop-mode-tabs { display:flex; border-bottom:1px solid #d6dfcd; gap:20px; margin:26px 0 17px; }.workshop-mode-tabs button { padding:12px 4px; border-bottom:3px solid transparent; background:none; color:#7c8c70; font-size:14px; }.workshop-mode-tabs button[aria-pressed="true"] { border-color:#31583e; color:#254d35; font-weight:650; }.workshop-mode-tabs span { padding:3px 7px; margin-left:4px; background:#e2e9d7; border-radius:15px; font-size:10px; }
.source-disclosure { color:#7b876f; font-size:11px; line-height:1.9; margin:12px 0 17px; }
.original-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-height:650px; overflow:auto; padding-right:5px; scrollbar-width:thin; }.original-card { background:#fffef9; border:1px solid #dce3d2; border-radius:9px; padding:19px; }.original-card > span { font-size:10px; color:#849177; }.original-card h3 { margin:9px 0; font-size:16px; line-height:1.6; }.original-card p { font-size:12px; line-height:1.8; color:#5f7755; }.original-card small { font-size:10px; line-height:1.8; color:#89937d; display:block; }.original-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; }.original-actions a { color:#396746; font-size:11px; text-underline-offset:4px; }.original-actions .button { font-size:11px; padding:7px 10px; min-height:34px; }.original-card details { margin-top:14px; font-size:10px; color:#8c957f; }.original-card summary { cursor:pointer; }
.original-player { margin:22px 0; padding:22px; border-radius:10px; background:#183d36; color:#f7f5ea; }.source-player-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }.original-player iframe { width:100%; aspect-ratio:16/9; border:0; background:#112e28; }.original-player p { font-size:12px; line-height:1.9; color:#c1d1b2; }.original-player a { color:#eeb67e; font-size:12px; }
.practice-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:24px; }.practice-card { display:flex; flex-direction:column; text-align:left; gap:10px; padding:17px 13px; border-radius:9px; border:1px solid #d4dfc9; background:#fffef9; color:#345b3c; }.practice-card span { font-size:9px; color:#859077; }.practice-card strong { font-size:13px; line-height:1.7; }.practice-card small { font-size:10px; line-height:1.8; color:#7a896d; }.practice-card[aria-pressed="true"] { background:#183d36; color:#fffdf0; border-color:#183d36; }.practice-card[aria-pressed="true"] small,.practice-card[aria-pressed="true"] span { color:#bfd0ad; }
.workshop-selection .phrase-tools,.workshop-selection #phrase-list { display:none; }.workshop-selection .phrase-layout { display:block; }.workshop-selection .phrase-detail { max-width:1100px; margin:auto; }
.phrase-tools { padding:18px; border-radius:9px; border:1px solid #dce2d2; background:#ecefE3; }.phrase-tools .field { flex:1 1 130px; }.phrase-tools .field:first-child { flex:2 1 190px; }.phrase-tools .field select { min-width:0; width:100%; }.phrase-tools #phrase-count { width:100%; padding:0; text-align:right; }
@media(max-width:1050px){ .original-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.practice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px){ .workshop-context { grid-template-columns:1fr; gap:10px; padding:18px; }.original-list { grid-template-columns:1fr; }.practice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.workshop-selectors .field { flex:1 1 40%; }.workshop-selectors .workshop-scale-field { flex-basis:100%; }.workshop-mode-tabs { gap:14px; }.workshop-mode-tabs button { font-size:12px; }.source-player-head { align-items:flex-start; flex-direction:column; }.study-heading .study-view-tabs { min-width:0; max-width:100%; height:auto; }.study-view-tabs button { padding:8px 9px; font-size:11px; }.phrase-tools { padding:14px; }.phrase-tools .field { flex:1 1 40%; } }
/* Listening studio */
body[data-mode="study"] .hero { display:none; }
body[data-mode="study"] .mode-tabs { margin-top:20px; }
.tone-control { display:flex; align-items:center; gap:8px; font-size:11px; }
#tone-select { max-width:195px; padding:8px; border:1px solid #b9c9b2; border-radius:6px; color:#183d36; background:#fffef9; }
.study-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:28px 0 20px; }
.study-heading h2 { font-size:29px; letter-spacing:-.6px; margin:9px 0; }
.study-heading p { color:#6b7c66; font-size:12px; }
.study-view-tabs { flex-shrink:0; min-width:260px; }
.study-view-tabs button { white-space:nowrap; }
.study-view-tabs button[aria-pressed="true"] { color:#fffef9; background:#183d36; }
.study-transport { display:flex; align-items:center; flex-wrap:wrap; gap:15px; padding:17px 20px; margin-bottom:24px; border:1px solid #d8dfcf; background:#e9ede1; border-radius:10px; font-size:12px; }
.study-transport label { display:flex; align-items:center; gap:6px; }
.study-transport input { accent-color:#315a45; }
#study-tempo { width:61px; padding:7px; border:1px solid #c5d0bb; background:#fffef9; border-radius:5px; color:#183d36; }
.study-mix input { width:90px; }
#study-status { flex-basis:100%; border-top:1px solid #d2dcc8; padding-top:10px; min-height:25px; font-size:11px; color:#526b4b; }
.study-advice { margin:17px 0; font-size:12px; line-height:1.8; color:#667a5f; }
.lab-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.lab-choice { min-width:0; }
.lab-choice-head { display:flex; align-items:center; gap:10px; padding-bottom:18px; border-bottom:1px solid #e1e5d8; margin-bottom:18px; }
.lab-choice-head select { min-width:0; flex:1; height:39px; padding:6px; border:1px solid #cbd4c2; border-radius:6px; color:#183d36; background:#fffef9; font-size:12px; }
.study-letter { display:grid; place-items:center; flex-shrink:0; width:29px; height:29px; border-radius:50%; background:#e9ede1; color:#3c6348; font-size:15px; font-weight:700; }
.lab-choice h3 { font-size:20px; margin:13px 0 8px; }
.lab-choice p { font-size:12px; line-height:1.9; color:#5e7257; }
.fit-tag { display:inline-block; padding:5px 9px; font-size:10px; border-radius:20px; background:#e3eddd; color:#3a6947; }
.fit-tag.color { background:#ece5d4; color:#8c663b; }
.fit-tag.outside { background:#f3e0d7; color:#965736; }
.harmony-facts { display:grid; grid-template-columns:75px 1fr; gap:10px; font-size:12px; line-height:1.8; margin:20px 0; }
.harmony-facts dt { color:#78846e; }.harmony-facts dd { margin:0; }
.lab-choice p.harmony-caution { padding:10px 12px; border-left:2px solid #dba56c; background:#f6f0e4; font-size:11px; }
.study-callout { padding:16px 19px; border-radius:7px; background:#e7ecdc; color:#506845; font-size:12px; line-height:1.9; margin:18px 0; }
.note-inspector { border:1px solid #d4dcc9; border-left:4px solid #dca26a; background:#fffdf4; border-radius:7px; padding:18px 20px; margin:18px 0; min-height:87px; }
.note-inspector strong { font-size:15px; }.note-inspector p { font-size:12px; line-height:1.9; margin:10px 0 0; color:#566a50; }
.inspector-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.inspector-top strong span { font-size:12px; font-weight:500; }.inspector-top small,.inspector-scale { color:#7b836f; font-size:10px; }.inspector-scale { display:block; margin-top:9px; }
.study-sources,.analysis-details { border-top:1px solid #dce1d3; margin-top:20px; padding-top:17px; font-size:12px; }
.study-sources summary,.analysis-details summary { cursor:pointer; color:#466345; padding:4px 0; }
.study-sources > p { line-height:1.8; color:#7b806e; }
.source-link { display:block; padding:13px 0; color:#35604b; border-bottom:1px solid #e2e6d9; text-decoration:none; }
.source-link strong { font-size:12px; }.source-link span { display:block; font-size:10px; margin-top:6px; color:#7c8870; }.source-link:hover strong { text-decoration:underline; }
.phrase-tools { display:flex; align-items:flex-end; gap:18px; margin:0 0 22px; flex-wrap:wrap; }
#phrase-count { margin-left:auto; font-size:11px; color:#758468; padding-bottom:12px; }
.phrase-layout { display:grid; grid-template-columns:235px minmax(0,1fr); gap:25px; align-items:start; }
.phrase-list { display:flex; flex-direction:column; gap:8px; max-height:820px; overflow:auto; padding-right:5px; scrollbar-width:thin; }
.phrase-choice { display:flex; flex-direction:column; gap:8px; text-align:left; background:#f8f8ef; border:1px solid #dce2d3; border-radius:8px; padding:16px; color:#294a39; }
.phrase-choice small { font-size:9px; color:#8a927c; }.phrase-choice strong { font-size:13px; line-height:1.6; }.phrase-choice span { font-size:10px; color:#7c8a70; }
.phrase-choice[aria-pressed="true"] { background:#183d36; border-color:#183d36; color:#fffdef; }.phrase-choice[aria-pressed="true"] small,.phrase-choice[aria-pressed="true"] span { color:#b8c9a7; }
.phrase-choice:hover { border-color:#98b08a; }
.phrase-detail { min-width:0; border:1px solid #dce2d3; border-radius:12px; background:#fffef9; padding:25px; }
.phrase-title-row { display:flex; gap:16px; align-items:center; justify-content:space-between; }.phrase-title-row h2 { font-size:24px; line-height:1.5; margin:8px 0 0; }.phrase-title-row .button { flex-shrink:0; }
.phrase-description { font-size:12px; line-height:1.9; color:#718166; margin:13px 0 21px; }
.phrase-progression { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:9px; }
.progression-bar { background:#f0f2e7; border:1px solid #e1e5d6; border-radius:7px; padding:13px; transition:background .15s; }
.progression-bar > span { display:block; color:#849174; font-size:10px; }.progression-bar > strong { display:block; font-size:24px; margin:7px 0; }.progression-bar > small { color:#456d48; font-size:10px; }.progression-bar p { font-size:11px; line-height:1.8; color:#647959; margin:8px 0; }.progression-bar em { font-size:10px; color:#7e886d; font-style:normal; line-height:1.9; }
.progression-bar.study-active { background:#f6e2c9; border-color:#c9945f; }
.tab-heading { display:flex; justify-content:space-between; gap:9px; flex-wrap:wrap; margin:24px 0 14px; }.tab-heading strong { font-size:12px; }.tab-heading span { font-size:10px; color:#879177; }
.phrase-score { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.tab-bar { min-width:0; border:1px solid #dfe5d6; border-radius:8px; overflow:hidden; background:#fafbf4; }.tab-bar svg { display:block; width:100%; }
.tab-string { stroke:#b2bda6; stroke-width:.8; }.tab-beat-line { stroke:#e0e5d8; stroke-width:.7; stroke-dasharray:2 4; }.tab-string-label,.tab-beat { font-size:9px; fill:#8b957e; }.tab-beat { text-anchor:middle; }.tab-chord-label { font-size:12px; font-weight:600; fill:#3e6546; }.tab-caption { font-size:10px; fill:#8a967c; }
.study-note { cursor:pointer; outline:none; }.study-note rect { fill:#dfebd9; stroke:#b4cca5; }.study-note text { fill:#315c39; font-size:11px; font-weight:600; text-anchor:middle; }.study-note.role-extension rect { fill:#f5dfbd; stroke:#ddb583; }.study-note.role-extension text { fill:#855b29; }.study-note.role-tension rect,.study-note.role-approach rect { fill:#e7e0ef; stroke:#c6b5d2; }.study-note.role-tension text,.study-note.role-approach text { fill:#705a84; }
.study-note:hover rect,.study-note:focus rect { stroke:#a86c36; stroke-width:2; }.study-note.note-active rect { fill:#dd9758; stroke:#8d531e; stroke-width:2; }.study-note.note-active text { fill:#fff; }
.note-legend { display:flex; gap:12px; flex-wrap:wrap; margin:13px 0; color:#88917b; font-size:9px; }.note-legend .role-chord { color:#4c7850; }.note-legend .role-extension { color:#ad7d43; }.note-legend .role-tension { color:#8b749e; }
.analysis-table-wrap { overflow:auto; max-height:360px; margin-top:12px; }.analysis-table-wrap table { width:100%; border-collapse:collapse; font-size:11px; text-align:left; }.analysis-table-wrap th,.analysis-table-wrap td { padding:9px 10px; border-bottom:1px solid #e3e7da; line-height:1.7; }.analysis-table-wrap th { background:#eef2e5; position:sticky; top:0; white-space:nowrap; }.analysis-table-wrap td:nth-child(-n+4) { white-space:nowrap; }
#chord-to-study { margin-top:16px; }
@media(max-width:1050px) { .phrase-layout { grid-template-columns:195px minmax(0,1fr); gap:15px; }.phrase-detail { padding:18px; }.phrase-title-row { align-items:flex-start; flex-direction:column; }.study-heading { align-items:flex-start; flex-direction:column; }.lab-choice-head { gap:5px; }.phrase-progression { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .mode-tabs { overflow:auto; }.mode-tabs .mode-tab { min-width:100px; flex-shrink:0; }.study-heading h2 { font-size:25px; }.study-transport { padding:14px; gap:12px; }.study-transport label { font-size:11px; }.lab-grid { grid-template-columns:1fr; }.phrase-layout { grid-template-columns:1fr; }.phrase-list { max-height:220px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.phrase-choice { padding:12px; }.phrase-tools { gap:12px; }.phrase-tools .field { flex:1 1 40%; }.phrase-tools .field input { width:100%; }#phrase-count { margin-left:0; padding:0; }.phrase-detail { padding:16px; }.phrase-title-row h2 { font-size:22px; }.phrase-score { grid-template-columns:1fr; }.inspector-top { align-items:flex-start; flex-direction:column; }.note-inspector { padding:15px; }.study-mix input { width:65px; } }
:root {
  color-scheme: light;
  --paper: #f5f2e9;
  --ink: #203b33;
  --green: #183d36;
  --muted: #788078;
  --line: #dedfd5;
  --orange: #edaa72;
  --mint: #c5dfca;
  --white: #fffef9;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
.sound-panel { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:23px; padding:14px 18px; background:#e8ede1; border:1px solid #d6dfce; border-radius:9px; }
body[data-mode="chord"] .hero, body[data-mode="scale"] .hero, body[data-mode="quiz"] .hero { display:none; }
body[data-mode="chord"] .mode-tabs, body[data-mode="scale"] .mode-tabs, body[data-mode="quiz"] .mode-tabs { margin-top:20px; }
.sound-identity { display:flex; align-items:center; gap:11px; margin-right:auto; }
.sound-identity strong { display:block; font-size:13px; }
.sound-identity small { display:block; font-size:10px; color:#71806a; margin-top:2px; }
.sound-indicator { width:10px; height:10px; background:#75a783; border-radius:50%; box-shadow:0 0 0 5px #75a78320; }
.volume-control { display:flex; align-items:center; gap:9px; font-size:11px; color:#63785e; }
.volume-control input { width:100px; accent-color:var(--green); }
#audio-status[data-state="error"] { color:#a24832; }
.field input[type="search"] { height:39px; width:200px; max-width:100%; border:1px solid #d7ddcf; border-radius:6px; padding:6px 12px; background:#fffef966; color:var(--ink); font-size:12px; }
.scale-player { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-bottom:18px; font-size:11px; color:#71806a; }
.scale-player > span { margin-right:auto; }
.scale-player select, .chord-play-controls select { height:36px; border:1px solid #cbd5c5; border-radius:6px; background:#fffef9; color:var(--green); padding:4px 8px; font-size:11px; }
.scale-player input, .chord-tempo input { width:63px; height:32px; border:1px solid #cbd5c5; border-radius:5px; background:#fffef9; text-align:center; margin:0 5px; }
.interval-editor { padding:16px 20px; background:#e9ede1; border-radius:9px; margin:0 0 19px; }
.interval-editor strong { display:block; font-size:12px; }
.interval-editor small { display:block; margin-top:10px; color:#6d7f63; font-size:11px; }
.interval-buttons { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.interval-buttons button { min-width:38px; height:35px; border:1px solid #c9d4c2; border-radius:5px; background:#fffef9; color:var(--green); font-size:12px; }
.interval-buttons button[aria-pressed="true"] { background:var(--green); color:#fff; border-color:var(--green); }
.interval-buttons button:disabled { opacity:.75; }
.chord-controls { margin-bottom:24px; }
.chord-library-head { display:flex; gap:24px; justify-content:space-between; align-items:center; margin-bottom:20px; }
.chord-library-head h2 { font-size:27px; margin:5px 0; }
.chord-library-head p { color:#71806a; font-size:12px; max-width:630px; }
.chord-library-head .formula { margin-top:0; max-width:450px; justify-content:flex-end; }
.chord-stage { display:grid; grid-template-columns:300px minmax(0,1fr); gap:22px; }
.chord-feature { padding:18px 18px 14px; background:#fffef9; }
#chord-diagram svg { width:100%; max-height:355px; display:block; }
.diagram-key { font-size:10px; color:#73836a; text-align:center; line-height:1.8; padding-top:7px; }
.chord-detail h3 { font-size:21px; margin:8px 0; }
#voicing-description { font-size:12px; color:#667b5e; }
.omission-note { font-size:12px; color:#976638; margin:13px 0 18px; }
.chord-play-controls { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.chord-tempo { display:block; font-size:11px; color:#71806a; margin-top:12px; }
.voicing-table-wrap { overflow-x:auto; margin-top:20px; }
.voicing-table { width:100%; border-collapse:collapse; font-size:12px; text-align:center; }
.voicing-table th,.voicing-table td { padding:8px 10px; border-bottom:1px solid #dce2d4; min-width:38px; }
.voicing-table th { font-weight:600; color:#6e7e62; }
.voicing-table td { color:#234a35; }
.voicing-table tr:last-child td { color:#a06b39; }
#chord-feedback { min-height:1.6em; font-size:12px; color:#657e59; }
.voicing-list-header { display:flex; justify-content:space-between; align-items:baseline; margin:26px 0 12px; }
.voicing-list-header h3 { margin:0; font-size:16px; }
.voicing-list-header span { font-size:11px; color:#77856b; }
.voicing-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.voicing-card { display:flex; flex-direction:column; align-items:center; background:#fffef9; padding:6px 7px 11px; border:2px solid #e0e5d8; border-radius:9px; color:var(--green); }
.voicing-card svg { width:100%; max-width:190px; }
.voicing-card[aria-pressed="true"] { border-color:#4d7961; background:#e5eddd; }
.voicing-card:hover { border-color:#b0835d; }
.voicing-card span { font-size:10px; }
.empty-voicing { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#74876b; gap:15px; padding:20px; }
.empty-voicing p { font-size:12px; }
.credits { margin-top:12px; max-width:900px; }
.credits summary { cursor:pointer; color:#5f7859; }
.credits p { margin:8px 0; font-size:11px; }
.credits a { text-decoration:underline; text-underline-offset:3px; }
.fret-cell.playing .note-dot { outline:3px solid #fff4cf; outline-offset:3px; transform:scale(1.12); }
@media (max-width:1000px) { .mode-tab { min-width:0!important; flex:1; padding-left:10px!important; padding-right:10px!important; } .chord-library-head { align-items:flex-start; flex-direction:column; gap:12px; } .chord-library-head .formula { justify-content:flex-start; } }
@media (max-width:760px) { .chord-stage { grid-template-columns:1fr; } .chord-feature { max-width:360px; width:100%; justify-self:center; } .chord-detail { padding:21px 18px; } .chord-library-head h2 { font-size:23px; } .voicing-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .voicing-card { padding:4px 2px 9px; } .voicing-card span { font-size:9px; } .sound-panel { gap:12px; padding:13px; } .sound-identity { flex-basis:55%; } .sound-panel .button { padding:7px 11px; } .volume-control { margin-right:auto; } .scale-player > span { width:100%; } .field input[type="search"] { width:100%; } }
@media (max-width:460px) { .mode-icon { display:none!important; } .mode-tab strong { font-size:11px!important; } .chord-controls .field { min-width:0; } .voicing-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.6; }
button, select, input { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
button, select { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .48; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #bc7750; outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
button { border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-shell { width: min(1420px, calc(100% - 96px)); margin: 0 auto; }
.topbar { height: 99px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-icon { display: grid; place-items: center; width: 41px; height: 45px; border-radius: 13px 13px 18px 18px; background: var(--green); color: var(--paper); font-family: Georgia, serif; font-size: 35px; line-height: 1; }
.brand-copy { display: flex; flex-direction: column; }
.brand-copy strong { font-size: 18px; letter-spacing: 1px; font-weight: 750; line-height: 1.5; }
.brand-copy small { font-size: 9px; font-weight: 650; letter-spacing: 2.1px; color: #747f73; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 17px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 650; line-height: 1.5; transition: background .15s, transform .15s, border-color .15s; white-space: nowrap; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { color: #fffef7; background: var(--green); border-color: var(--green); }
.button.primary:hover:not(:disabled) { background: #2b5348; border-color: #2b5348; }
.button.secondary { background: transparent; border-color: #cbd0c4; color: var(--green); }
.button.secondary:hover:not(:disabled) { background: #e8ecdf; border-color: #9cae9e; }
.button.ghost { color: #697669; background: transparent; }
.button.ghost:hover { background: #e8ecdf; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 38px 0 34px; }
.eyebrow { font-size: 10px; letter-spacing: 2.1px; font-weight: 750; color: #7e8b77; margin-bottom: 10px; }
.hero h1 { font-size: clamp(28px, 3vw, 43px); line-height: 1.35; font-weight: 720; letter-spacing: -1.5px; color: #203d32; }
.hero p:not(.eyebrow) { font-size: 13px; color: #7a8276; margin-top: 11px; }
.mobile-break { display: none; }
.hero-note { display: flex; flex-direction: column; flex-shrink: 0; padding: 9px 0 10px 26px; border-left: 1px solid #ced7c7; }
.hero-note > span { font-size: 10px; color: #7a876f; letter-spacing: 2px; margin-bottom: 6px; }
.hero-note strong { font-size: 17px; font-weight: 600; }
.hero-note small { color: #7d8877; font-size: 11px; margin-top: 7px; }
.mode-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 21px; }
.mode-tab { background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 11px 24px 11px 15px; display: flex; align-items: center; gap: 12px; text-align: left; min-width: 190px; transition: background .18s, color .18s; }
.mode-tab:hover { background: #e9ebdf; }
.mode-tab[aria-selected="true"] { background: var(--green); color: white; box-shadow: 0 3px 7px #183d3610; }
.mode-icon { font-size: 11px; font-weight: 600; letter-spacing: .5px; border: 1px solid #bfcaba; color: #708170; border-radius: 50%; width: 29px; height: 29px; display: grid; place-items: center; }
.mode-tab[aria-selected="true"] .mode-icon { border-color: #70897b; color: #c5d5c0; }
.mode-tab strong { display: block; font-size: 13px; font-weight: 650; letter-spacing: .4px; }
.mode-caption { display: block; font-size: 10px; color: #8a9082; margin-top: 1px; }
.mode-tab[aria-selected="true"] .mode-caption { color: #b4c6b6; }
.workspace { padding-bottom: 24px; }
.control-panel { padding: 0 0 18px; }
.control-row { display: flex; align-items: flex-end; gap: 16px 22px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.field > label { font-size: 10px; font-weight: 600; color: #7d8779; letter-spacing: .5px; }
.field select { height: 39px; min-width: 151px; max-width: 100%; border: 1px solid #d7ddcf; border-radius: 6px; background-color: #fffef966; padding: 6px 31px 6px 12px; font-size: 12px; outline-offset: 3px; }
.field select:hover { border-color: #9eae99; }
.segmented { display: flex; gap: 2px; background: #e6e9dd; border-radius: 6px; padding: 3px; height: 39px; }
.segmented button { padding: 5px 14px; font-size: 12px; border-radius: 4px; background: transparent; color: #7f8a78; }
.segmented button[aria-pressed="true"] { color: var(--green); background: var(--white); box-shadow: 0 1px 3px #203b3310; }
.toggle-label { display: inline-flex; align-items: center; gap: 8px; color: #65755f; font-size: 11px; height: 39px; margin-left: auto; white-space: nowrap; cursor: pointer; }
.toggle-label input { accent-color: var(--green); width: 14px; height: 14px; cursor: pointer; }
.board-card { background: #25372f; color: #f5f1e4; border: 1px solid #263c31; border-radius: 12px; overflow: hidden; box-shadow: 0 9px 22px #213d3010; }
.board-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 26px 20px; background: #25372f; }
.board-title h2 { font-size: 18px; line-height: 1.5; font-weight: 650; letter-spacing: .5px; }
.board-title p { margin-top: 6px; font-size: 10px; color: #a2b09e; }
.legend { display: flex; gap: 18px; color: #bdc7b5; font-size: 10px; flex-shrink: 0; }
.legend > span { display: flex; gap: 7px; align-items: center; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.legend-dot.root { background: var(--orange); }
.legend-dot.scale, .legend-dot.natural { background: var(--mint); }
.board-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #8c9d86 #24332b; padding: 0 20px 16px; }
.fretboard { display: grid; position: relative; isolation: isolate; min-width: 800px; width: 100%; padding: 0 0 6px; }
.fret-corner, .fret-number { height: 29px; color: #abb29c; font-size: 10px; display: flex; justify-content: center; align-items: center; font-variant-numeric: tabular-nums; }
.fret-number.octave { color: var(--orange); font-weight: 700; }
.string-label { height: 47px; display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; padding-right: 8px; }
.string-label strong { color: #d5dfca; font-family: "Segoe UI", sans-serif; font-size: 13px; font-weight: 600; }
.string-label small { color: #899880; font-size: 9px; }
.fret-cell { min-width: 0; height: 47px; position: relative; display: grid; place-items: center; padding: 0; border: 0; border-right: 2px solid #a8ae8760; background: repeating-linear-gradient(0deg, transparent, transparent 5px, #84906705 6px), #303e2f; outline-offset: -3px; border-radius: 0; }
.fret-cell:hover { background-color: #485540; }
.fret-cell.nut { border-right: 5px solid #d2c7a5; background-color: #22342a; }
.string-wire { position: absolute; left: 0; right: 0; top: 50%; height: var(--wire-size, 1px); background: linear-gradient(#f8e5bc, #b4a480); opacity: .72; pointer-events: none; box-shadow: 0 2px 1px #0b171840; }
.note-dot { display: grid; place-items: center; width: 31px; height: 31px; min-width: 31px; position: relative; z-index: 2; border-radius: 50%; color: #223b2f; background: var(--mint); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 2px 4px #111d2940, inset 0 1px 0 #ffffff60; letter-spacing: -.3px; transition: transform .12s, box-shadow .12s; }
.note-dot.root { background: var(--orange); color: #593820; }
.note-dot.scale, .note-dot.natural { background: var(--mint); }
.note-dot.muted { background: #52614b; color: #b7c2aa; box-shadow: none; }
.fret-cell:hover .note-dot { transform: scale(1.1); }
.fret-cell.selected .note-dot { outline: 2px solid #f9f4df; outline-offset: 3px; }
.fret-cell.selected:not(:has(.note-dot)) { box-shadow: inset 0 0 0 2px #f9f4df; }
.fret-cell.correct { background-color: #466d4c; box-shadow: inset 0 0 0 2px #a1d7a5; }
.fret-cell.correct .note-dot { background: #c6edb5; }
.fret-cell.wrong { background-color: #6a3c32; box-shadow: inset 0 0 0 2px #e09777; }
.fret-cell.wrong .note-dot { background: #e9b29c; }
.fret-cell.inactive-string { opacity: .48; }
.fret-cell.inactive-string:hover { opacity: .7; }
.inlay { pointer-events: none; position: absolute; z-index: 0; top: 50%; left: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: #bdc4a635; }
.inlay.double { box-shadow: 0 15px 0 #bdc4a635; transform: translate(-50%, -125%); }
.board-bottom { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 76px; padding: 15px 26px 17px; border-top: 1px solid #4c5c463b; background: #21342b; }
.selected-note { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; }
.selected-note strong { font-size: 13px; font-weight: 550; color: #e4ebd8; }
.selected-note span { font-size: 10px; color: #99aa91; }
.selected-note strong > span { font-weight: 400; margin-left: 6px; }
.selected-note sub { font-size: 9px; margin-left: 1px; }
.board-hint { color: #99aa91; font-size: 10px; text-align: right; }
.lower-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 22px; align-items: stretch; }
.panel { border: 1px solid #dce1d2; border-radius: 10px; padding: 25px 26px; background: #fffef957; min-width: 0; }
.panel-heading .kicker, .kicker { display: inline-block; font-size: 10px; color: #8b937b; font-weight: 650; letter-spacing: 1px; }
.panel-heading h2, .quiz-question h2 { font-size: 19px; font-weight: 650; letter-spacing: -.3px; margin-top: 7px; line-height: 1.5; }
.panel-heading p, .quiz-question p { font-size: 12px; line-height: 1.9; color: #788370; margin-top: 9px; max-width: 590px; }
.formula { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.formula:empty { display: none; }
.formula-chip { background: #e5edde; color: #466344; border: 1px solid #d3dfc9; min-width: 35px; padding: 7px 9px; text-align: center; border-radius: 5px; font-size: 11px; font-weight: 600; }
.formula-chip.root { background: #f3ddc4; border-color: #e7c4a2; color: #935d35; }
.practice-note { color: #73836a; line-height: 1.8; font-size: 11px; margin: 17px 0 19px; }
.practice-note:empty { display: none; }
.practice-note strong { font-weight: 650; color: #4d6545; }
.preset-list { margin-top: 14px; }
.preset-button { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; background: transparent; padding: 12px 0; border-bottom: 1px solid #e3e7d9; }
.preset-button:last-child { border-bottom: 0; }
.preset-button:hover strong { color: #a0643b; }
.preset-button > span:nth-child(2) { flex: 1; }
.preset-button strong { display: block; font-size: 12px; font-weight: 650; color: #3c543a; }
.preset-button > span > span { display: block; font-size: 10px; color: #8a937d; margin-top: 4px; line-height: 1.7; }
.preset-button > span:last-child { color: #9ba58a; font-size: 18px; }
.step-number { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: #e5ebdc; border: 1px solid #d9e0cf; color: #7f8f72; font-size: 11px; font-weight: 600; }
.steps { display: grid; gap: 15px; margin-top: 20px; }
.step { display: flex; align-items: flex-start; gap: 12px; }
.step-copy strong { font-size: 12px; font-weight: 650; }
.step-copy p { font-size: 11px; color: #829075; margin-top: 4px; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quiz-progress { color: #71816a; font-size: 10px; font-variant-numeric: tabular-nums; }
.progress-track { height: 4px; border-radius: 4px; background: #e0e8d9; margin-top: 14px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: #7f9f70; transition: width .25s; }
.quiz-question { margin-top: 20px; }
.quiz-target { display: flex; align-items: baseline; gap: 14px; margin: 9px 0; }
.quiz-target strong { font-size: 42px; line-height: 1.25; font-weight: 650; letter-spacing: -1px; color: var(--green); }
.quiz-target small { color: #829175; font-size: 13px; }
.quiz-feedback { min-height: 24px; margin-top: 12px; font-size: 11px; color: #7d8872; }
.quiz-feedback[data-tone="correct"] { color: #3d773e; }
.quiz-feedback[data-tone="wrong"] { color: #a76743; }
.quiz-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 13px; }
.score-row { display: flex; gap: 25px; padding-top: 18px; margin-top: 21px; border-top: 1px solid #e0e5d6; }
.score-item { display: flex; flex-direction: column; gap: 3px; }
.score-item strong { font-size: 21px; line-height: 1.2; font-weight: 600; color: #536e49; }
.score-item small { color: #8d967f; font-size: 9px; }
.footer-note { color: #8e9783; font-size: 10px; line-height: 1.9; }
.panel > .footer-note { margin-top: 13px; }
footer.footer-note { padding: 2px 0 29px; text-align: center; font-size: 9px; }
.text-button { color: #76876b; background: transparent; padding: 0 2px; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.status-toast { position: fixed; z-index: 20; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 11px 21px; border-radius: 8px; background: #183d36; color: #f6f5e9; box-shadow: 0 7px 25px #132b3025; font-size: 12px; text-align: center; }
@media (min-width: 1600px) { .hero { padding-top: 47px; padding-bottom: 41px; } .fret-cell, .string-label { height: 53px; } }
@media (max-width: 1050px) {
  .app-shell { width: calc(100% - 48px); }
  .hero h1 { font-size: 32px; }
  .hero-note { padding-left: 20px; }
  .hero-note strong { font-size: 15px; }
  .control-row { gap: 13px 15px; }
  .toggle-label { margin-left: 0; }
  .board-topline { padding: 20px; }
  .lower-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
  .panel { padding: 22px 20px; }
  .panel-heading h2, .quiz-question h2 { font-size: 17px; }
}
@media (max-width: 760px) {
  .app-shell { width: calc(100% - 32px); }
  .topbar { height: 80px; gap: 12px; }
  .brand { gap: 9px; }
  .brand-icon { width: 33px; height: 37px; font-size: 28px; }
  .brand-copy strong { font-size: 15px; }
  .brand-copy small { font-size: 7px; letter-spacing: 1.6px; }
  .header-actions { gap: 2px; }
  .header-actions .button { padding: 7px 10px; font-size: 10px; min-height: 34px; }
  .hero { align-items: flex-start; gap: 20px; padding: 29px 0 26px; }
  .hero h1 { font-size: 29px; letter-spacing: -.8px; line-height: 1.4; }
  .hero p:not(.eyebrow) { font-size: 11px; }
  .hero-note { display: none; }
  .eyebrow { font-size: 8px; letter-spacing: 1.7px; margin-bottom: 8px; }
  .mode-tabs { gap: 5px; margin-bottom: 19px; padding-bottom: 12px; }
  .mode-tab { flex: 1; min-width: 0; padding: 11px 8px; justify-content: center; gap: 7px; border-radius: 7px; }
  .mode-tab strong { font-size: 11px; letter-spacing: 0; }
  .mode-icon { width: 23px; height: 23px; font-size: 9px; }
  .mode-caption { display: none; }
  .control-row { gap: 12px; }
  .field { flex: 1 1 calc(50% - 12px); min-width: 0; }
  .field select { width: 100%; min-width: 0; font-size: 11px; padding-left: 9px; }
  .field > label { font-size: 9px; }
  .segmented button { flex: 1; }
  .toggle-label { margin-left: 0; height: 25px; font-size: 10px; }
  .board-card { border-radius: 9px; }
  .board-topline { flex-direction: column; align-items: flex-start; gap: 11px; padding: 18px 16px 13px; }
  .board-title h2 { font-size: 16px; }
  .board-title p { font-size: 9px; line-height: 1.8; max-width: 310px; }
  .legend { gap: 16px; font-size: 9px; }
  .board-scroll { padding: 0 12px 14px; }
  .board-bottom { padding: 13px 16px 15px; min-height: 79px; gap: 8px; align-items: flex-start; flex-direction: column; }
  .selected-note { gap: 4px 11px; }
  .selected-note strong { font-size: 12px; }
  .selected-note span, .board-hint { font-size: 9px; text-align: left; }
  .lower-grid { grid-template-columns: 1fr; gap: 15px; margin-top: 17px; }
  .panel { padding: 21px; }
  .panel-heading h2, .quiz-question h2 { font-size: 18px; }
  .panel-heading p, .quiz-question p { font-size: 11px; }
  .formula { gap: 6px; }
  .formula-chip { min-width: 31px; padding: 6px 8px; }
  .footer-note { font-size: 9px; }
  footer.footer-note { padding-bottom: 24px; line-height: 2; }
}
.board-layout-controls { display: none; }
@media screen and (max-width: 600px) {
  .topbar { height: auto; min-height: 80px; flex-wrap: wrap; padding: 14px 0; }
  .board-layout-controls:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 0 16px 14px; color: #bdc7b5; font-size: 11px; }
  .board-layout-controls [role="group"] { display: flex; gap: 6px; }
  .board-layout-controls button { min-height: 44px; padding: 8px 12px; border: 1px solid #80917a; border-radius: 7px; background: transparent; color: #dce6d5; font-size: 12px; }
  .board-layout-controls button[aria-pressed="true"] { background: #d4e2c9; border-color: #d4e2c9; color: #193c31; font-weight: 700; }
  .board-layout-controls p { flex-basis: 100%; margin: 0; color: #a5b59d; font-size: 11px; line-height: 1.6; }
  .board-scroll.is-vertical { overflow: visible; padding: 0 12px 14px; }
  .fretboard.is-vertical { min-width: 0; width: 100%; padding-bottom: 0; }
  .fretboard.is-vertical .string-label { height: 36px; padding: 0; }
  .fretboard.is-vertical .fret-corner { height: 36px; }
  .fretboard.is-vertical .fret-number { height: 44px; font-size: 11px; white-space: normal; text-align: center; line-height: 1.3; padding-right: 5px; }
  .fretboard.is-vertical .fret-cell { height: 44px; border-right: 0; border-bottom: 2px solid #a8ae8760; touch-action: manipulation; }
  .fretboard.is-vertical .fret-cell.nut { border-bottom: 5px solid #d2c7a5; }
  .fretboard.is-vertical .string-wire { width: var(--wire-size, 1px); height: 100%; top: 0; bottom: 0; left: 50%; right: auto; transform: translateX(-50%); background: linear-gradient(90deg, #f8e5bc, #b4a480); box-shadow: 2px 0 1px #0b171840; }
  .fretboard.is-vertical .inlay.double { box-shadow: 15px 0 0 #bdc4a635; transform: translate(-125%, -50%); }
}
@media (max-width: 390px) {
  .app-shell { width: calc(100% - 24px); }
  .brand-copy small { letter-spacing: 1px; }
  .header-actions .button { font-size: 9px; padding: 6px 8px; }
  .hero h1 { font-size: 27px; }
  .mobile-break { display: inline; }
  .mode-tab { gap: 5px; padding-left: 4px; padding-right: 4px; }
  .mode-tab strong { font-size: 10px; }
  .score-row { gap: 23px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (max-width:760px) { .mode-tabs .mode-tab { min-width:105px!important; flex:0 0 auto; }.mode-tab strong { white-space:nowrap; } }
.study-note .tab-finger { font-size:10px; font-weight:400; fill:#657659; }
.study-note.note-active .tab-finger { fill:#a65a1f; }
.study-note .tab-duration { stroke:#7f9672; stroke-width:1.5; opacity:.6; }
.tab-position-info { margin:0; padding:0 12px 12px; font-size:10px; line-height:1.7; color:#637756; }
.tab-rest { fill:#8c967e; font-size:10px; text-anchor:middle; paint-order:stroke; stroke:#fafbf4; stroke-width:4px; stroke-linejoin:round; }
.fingering-detail { color:#426746; }
.practice-category { grid-column:1/-1; margin:15px 0 0; font-size:14px; color:#536c43; letter-spacing:.02em; }
.phrase-reference { padding:16px 18px; margin:14px 0 22px; background:#edf2e6; border-left:3px solid #859a5f; border-radius:5px; color:#41563d; font-size:12px; line-height:1.8; }
.phrase-reference p { margin:5px 0; }
.phrase-reference a { display:inline-block; margin-top:5px; font-weight:600; }
.phrase-reference small { display:block; margin-top:7px; color:#77846b; }
.licensed-intro { margin:8px 0 22px; max-width:820px; }
.licensed-intro h2 { font-family:Georgia,"Noto Serif SC",serif; font-size:27px; margin:8px 0 12px; }
.licensed-intro p { color:#718166; font-size:13px; line-height:1.85; }
.licensed-intro .licensed-credit { font-size:11px; }
.licensed-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:16px 0; font-size:12px; }
.licensed-toolbar span { color:#7c886e; }
.licensed-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; align-items:start; }
.licensed-layout .phrase-list { max-height:760px; overflow:auto; }
.licensed-score-card { min-width:0; padding:24px; border:1px solid #d9e0ce; border-radius:12px; background:#fffef9; }
.licensed-score-card h3 { margin:8px 0; font-size:22px; }
.licensed-progression { font-family:Georgia,serif; font-size:20px; letter-spacing:.03em; color:#466344; }
.licensed-player { background:#eff3e7; border-radius:9px; padding:14px; margin:18px 0; }
.licensed-player audio { display:block; width:100%; }
.licensed-player>div { display:flex; flex-wrap:wrap; align-items:center; gap:17px; margin-top:10px; font-size:12px; }
.licensed-player p { font-size:11px; color:#718166; margin-bottom:0; }
#licensed-image { display:block; width:100%; height:auto; background:white; border-radius:4px; }
#licensed-description { font-size:13px; color:#607454; line-height:1.9; }
.licensed-links { display:flex; flex-wrap:wrap; gap:20px; padding:10px 0; font-size:12px; }
#licensed-attribution { display:block; margin-top:8px; font-size:10px; line-height:1.8; color:#859077; }
@media(max-width:850px){.licensed-layout{grid-template-columns:1fr}.licensed-layout .phrase-list{max-height:230px}.licensed-score-card{padding:16px}.study-heading .study-view-tabs{height:auto;flex-wrap:wrap}}
.source-locator { margin-top:14px; padding:12px; border-radius:7px; background:#f0f4eb; border:1px solid #d9e2d2; min-width:0; }
.source-locator .source-location-kind { display:block; color:#506b43; font-size:10px; margin-bottom:5px; }
.source-locator strong { display:block; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.source-locator p { font-size:11px; margin:7px 0 9px; }
.source-locator .source-copy { padding:6px 10px; font-size:11px; min-height:32px; }
.source-locator .source-find-text { box-sizing:border-box; max-width:100%; width:100%; margin-top:8px; padding:6px; }
.source-copy-status { display:block; font-size:11px; line-height:1.7; color:#396746; margin-top:6px; }
.original-card details > a { display:inline-block; margin-top:8px; color:#396746; }
@media print {
  @page { size: landscape; margin: 12mm; }
  body { background: white; }
  .app-shell { width: 100%; max-width: none; }
  .topbar, .hero, .mode-tabs, .control-panel, .lower-grid, footer, .status-toast, .board-hint { display: none !important; }
  .workspace { padding: 0; }
  .board-card { box-shadow: none; border: 1px solid #aaa; color: #000; background: white; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .board-scroll { overflow: visible; }
  .fretboard { min-width: 0; }
  .fret-cell { min-width: 0; }
  .board-title h2 { font-size: 22px; }
  .board-topline, .board-bottom { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}