:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f4f6fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --surface: #ffffff;
  --surface-muted: #f8f9fc;
  --text: #172033;
  --muted: #657089;
  --border: #dfe4ee;
  --primary: #6750e8;
  --primary-dark: #5038d3;
  --success: #17775a;
  --shadow: 0 18px 50px rgba(30, 42, 74, 0.10);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f4f6fb; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(circle at 15% 0%, rgba(103, 80, 232, .10), transparent 34rem), #f4f6fb; color: var(--text); }
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(103, 80, 232, .38); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }

.skip-link { position: fixed; inset-inline-start: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; border-radius: .75rem; background: #111827; color: white; text-decoration: none; }
.skip-link:focus { top: 1rem; }
.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 { min-height: 100vh; }
.topbar { min-height: 76px; display: flex; align-items: center; gap: .9rem; padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid rgba(223, 228, 238, .8); background: rgba(255, 255, 255, .82); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #765fff, #4d35c8); color: white; font-size: 1.4rem; box-shadow: 0 10px 22px rgba(103, 80, 232, .25); }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 1rem; }
.brand-copy span { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-language { margin-inline-start: auto; }
.compact-language select { max-width: 9rem; border: 1px solid var(--border); border-radius: .7rem; padding: .55rem .75rem; color: var(--text); background: white; }

.main-content { width: min(1060px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) 0 5rem; }
.progress-wrap { width: min(720px, 100%); margin: 0 auto 1rem; }
.progress-label { margin-bottom: .45rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
.progress-track { height: 7px; border-radius: 999px; overflow: hidden; background: #dfe4ee; }
.progress-value { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #9b7fff); transition: width .25s ease; }

.onboarding-card { width: min(760px, 100%); margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.4rem); border: 1px solid rgba(223, 228, 238, .95); border-radius: 1.6rem; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); }
.section-heading { margin-bottom: 1.5rem; }
.section-heading h1 { margin: 0 0 .55rem; font-size: clamp(1.65rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.035em; }
.section-heading p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.65; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.option-list { display: grid; gap: .7rem; }
.choice { min-height: 76px; display: flex; align-items: center; gap: .85rem; width: 100%; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); color: var(--text); text-align: start; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.choice:hover { transform: translateY(-1px); border-color: #b8b0ef; box-shadow: 0 8px 20px rgba(40, 46, 73, .07); }
.choice.is-selected { border-color: var(--primary); background: #f4f1ff; box-shadow: inset 0 0 0 1px var(--primary); }
.choice-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: .8rem; background: #f0edff; color: var(--primary-dark); font-size: 1.25rem; font-weight: 800; }
.choice-copy { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.choice-copy strong { line-height: 1.3; }
.choice-copy small { color: var(--muted); }
.selection-check { margin-inline-start: auto; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 999px; background: var(--primary); color: white; font-size: .8rem; }
.footer-actions { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.button { min-height: 44px; padding: .7rem 1.15rem; border-radius: .8rem; border: 1px solid transparent; font-weight: 750; }
.button.primary { background: var(--primary); color: white; box-shadow: 0 8px 18px rgba(103, 80, 232, .22); }
.button.primary:hover:not(:disabled) { background: var(--primary-dark); }
.button.secondary { background: white; border-color: var(--border); color: var(--text); }

.guitar-orientation { margin: 1.4rem auto 0; display: flex; align-items: center; justify-content: center; width: min(420px, 100%); height: 90px; transition: transform .2s ease; }
.guitar-orientation[data-handedness="left"] { transform: scaleX(-1); }
.headstock { color: var(--primary); font-size: 1.4rem; }
.neck { width: 58%; height: 17px; border: 2px solid #74563e; background: repeating-linear-gradient(90deg, #c7a57f 0 20px, #73543c 21px 22px); }
.body-shape { display: grid; place-items: center; width: 76px; height: 76px; margin-inline-start: -5px; border: 4px solid #74563e; border-radius: 48% 56% 52% 46%; background: #d9ad76; color: #74563e; font-size: 1.5rem; }

.dashboard { display: grid; gap: 1.2rem; }
.hero-panel { padding: clamp(1.5rem, 5vw, 3rem); border-radius: 1.7rem; background: linear-gradient(135deg, #1d2540, #40368d); color: white; box-shadow: var(--shadow); }
.hero-panel h1 { margin: .45rem 0 .55rem; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.045em; line-height: 1; }
.hero-panel p { margin: 0; max-width: 55ch; color: rgba(255,255,255,.75); line-height: 1.6; }
.eyebrow, .card-kicker { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 850; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.feature-card { position: relative; min-height: 220px; padding: 1.4rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--surface); box-shadow: 0 12px 30px rgba(32, 43, 72, .07); }
.feature-card h2 { margin: .45rem 0 .6rem; font-size: 1.35rem; }
.feature-card p { color: var(--muted); line-height: 1.6; }
.feature-primary { grid-row: span 2; min-height: 460px; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff, #f8f6ff); }
.feature-primary .button { align-self: flex-start; margin-top: auto; }
.card-kicker { color: var(--primary-dark); }
.card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: .8rem; background: #eef1f8; font-size: 1.25rem; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: .7rem 0; color: var(--muted); font-size: .85rem; }
.objective { display: flex; flex-direction: column; gap: .35rem; margin: 1rem 0; padding: 1rem; border-radius: .9rem; background: #eeeaff; }
.objective span { color: #554c7c; line-height: 1.5; }
.status-pill { display: inline-flex; margin-top: .5rem; padding: .35rem .65rem; border-radius: 999px; background: #fff3d6; color: #805f17; font-size: .78rem; font-weight: 800; }
.fret-preview { display: grid; grid-template-rows: repeat(6, 1fr); height: 70px; margin-top: 1rem; border-inline: 3px solid #7c5a42; background: repeating-linear-gradient(90deg, transparent 0 42px, #af917d 43px 44px); }
.fret-preview span { border-top: 1px solid #786a62; }
.profile-card dl { display: grid; gap: .65rem; }
.profile-card dl div { display: grid; grid-template-columns: 8rem 1fr; gap: .6rem; }
.profile-card dt { color: var(--muted); }
.profile-card dd { margin: 0; font-weight: 700; }
.text-button { border: 0; padding: .4rem 0; background: transparent; color: var(--primary-dark); text-decoration: underline; font-weight: 700; }

[dir="rtl"] .eyebrow, [dir="rtl"] .card-kicker { letter-spacing: 0; text-transform: none; }

@media (max-width: 720px) {
  .topbar { min-height: 68px; padding: .75rem 1rem; }
  .brand-copy span { display: none; }
  .main-content { width: min(100% - 1rem, 1060px); padding-top: 1rem; }
  .onboarding-card { border-radius: 1.2rem; padding: 1rem; }
  .option-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .feature-primary { grid-row: auto; min-height: 410px; }
  .choice { min-height: 66px; }
  .compact-language select { max-width: 7.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* R0.3 — interactive B01 */
.music-ltr { direction: ltr !important; unicode-bidi: isolate; }
.lesson-progress-card { margin: .9rem 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .9rem; background: #fff; }
.lesson-progress-card > div:first-child { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.55rem; color:var(--muted); font-size:.82rem; }
.lesson-progress-card strong { color:var(--text); }
.lesson-main { width:min(1180px,calc(100% - 2rem)); }
.lesson-screen { display:grid; gap:1rem; }
.lesson-back { justify-self:start; text-decoration:none; }
.lesson-hero { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:clamp(1.4rem,4vw,2.5rem); border-radius:1.55rem; background:linear-gradient(135deg,#1d2540,#40368d); color:#fff; box-shadow:var(--shadow); }
.lesson-hero h1 { margin:.4rem 0 .55rem; font-size:clamp(2rem,5vw,3.25rem); line-height:1; letter-spacing:-.045em; }
.lesson-hero p { max-width:72ch; margin:0; color:rgba(255,255,255,.76); line-height:1.65; }
.lesson-ring { flex:0 0 108px; width:108px; height:108px; border-radius:50%; display:grid; place-content:center; text-align:center; background:conic-gradient(#9b7fff calc(var(--p)*1%),rgba(255,255,255,.15) 0); position:relative; }
.lesson-ring::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#2c285f; }
.lesson-ring strong,.lesson-ring span { position:relative; z-index:1; }
.lesson-ring strong { font-size:1.35rem; }
.lesson-ring span { font-size:.72rem; color:rgba(255,255,255,.72); }
.lesson-progress-wide { padding:.8rem 1rem; border:1px solid var(--border); border-radius:1rem; background:#fff; }
.lesson-progress-wide > span { display:block; margin-bottom:.5rem; color:var(--muted); font-size:.8rem; font-weight:700; }
.lesson-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.lesson-tab { position:relative; min-height:74px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; padding:.7rem .8rem; border:1px solid var(--border); border-radius:1rem; background:#fff; text-align:start; color:var(--text); }
.lesson-tab > span { width:30px; height:30px; border-radius:.65rem; display:grid; place-items:center; background:#eef1f8; color:var(--muted); font-size:.75rem; font-weight:850; }
.lesson-tab b { font-size:.8rem; line-height:1.25; }
.lesson-tab em { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#e5f6ee; color:var(--success); font-style:normal; font-weight:900; }
.lesson-tab.is-active { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); background:#f8f6ff; }
.lesson-tab.is-active > span { background:var(--primary); color:#fff; }
.lesson-tab.is-complete:not(.is-active) { border-color:#b9dfd0; }
.lesson-panel { display:grid; gap:1.2rem; padding:clamp(1.2rem,4vw,2rem); border:1px solid var(--border); border-radius:1.45rem; background:#fff; box-shadow:0 12px 30px rgba(32,43,72,.07); }
.lesson-copy { position:relative; padding-inline-start:3.2rem; }
.section-number { position:absolute; inset-inline-start:0; top:.05rem; width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:.75rem; background:#eeeaff; color:var(--primary-dark); font-weight:900; font-size:.76rem; }
.lesson-copy h2 { margin:0 0 .5rem; font-size:clamp(1.45rem,3vw,2rem); }
.lesson-copy p { margin:0; max-width:76ch; color:var(--muted); line-height:1.7; }
.lesson-demo { padding:1rem; border-radius:1.1rem; background:var(--surface-muted); border:1px solid var(--border); }
.demo-label { display:block; margin-bottom:.7rem; color:var(--muted); font-size:.78rem; font-weight:850; letter-spacing:.04em; }
.string-board { width:100%; max-width:820px; margin:0 auto; }
.string-end-labels { display:flex; justify-content:space-between; margin:0 2.9rem .35rem; color:var(--muted); font-size:.7rem; }
.string-row { width:100%; min-height:46px; display:grid; grid-template-columns:2rem 1fr 1.8rem 2rem; align-items:center; gap:.5rem; border:0; background:transparent; color:var(--text); text-align:center; border-radius:.65rem; }
.string-row:hover { background:#eeeaff; }
.string-row strong { font-size:.9rem; }
.string-row small { color:var(--muted); }
.string-row i { color:var(--primary); font-style:normal; font-size:.75rem; }
.string-line { display:block; height:var(--string-w,2px); background:#6d5a4e; border-radius:999px; box-shadow:0 1px 1px rgba(0,0,0,.15); }
.string-6 { --string-w:5px; } .string-5 { --string-w:4px; } .string-4 { --string-w:3px; } .string-3 { --string-w:2.5px; } .string-2 { --string-w:2px; } .string-1 { --string-w:1.5px; }
.clean-note-grid { display:grid; grid-template-columns:minmax(220px,.8fr) 1.2fr; gap:1rem; align-items:center; }
.hand-card { min-height:200px; display:grid; place-items:center; position:relative; overflow:hidden; border-radius:1.1rem; background:linear-gradient(145deg,#f2edff,#f9f7ff); border:1px solid #e2dcff; }
.finger { font-size:5rem; transform:rotate(8deg); }
.fret-mini { position:absolute; bottom:28px; width:80%; height:58px; border-inline:4px solid #755b47; background:repeating-linear-gradient(90deg,transparent 0 62px,#b99e8a 63px 65px); }
.fret-mini span { position:absolute; left:0; right:0; height:2px; background:#665a52; }
.fret-mini span:first-child { top:18px; } .fret-mini span:nth-child(2) { top:38px; }
.fret-mini i { position:absolute; left:38%; top:10px; width:18px; height:18px; border-radius:50%; background:var(--primary); }
.tip-list { display:grid; gap:.75rem; margin:0; padding-inline-start:1.3rem; color:var(--text); line-height:1.6; }
.practice-box { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; border-radius:1rem; background:#f4f1ff; color:#4f4772; }
.practice-box p { margin:0; line-height:1.6; }
.lesson-actions { display:flex; justify-content:flex-end; padding-top:.4rem; }
.button.success { background:#17775a; color:#fff; box-shadow:0 8px 18px rgba(23,119,90,.18); }
.tab-shell { position:relative; overflow:auto; padding:1.1rem; border:1px solid #27304c; border-radius:1rem; background:#151a28; color:#e8ebf4; text-align:left; }
.tab-shell pre { margin:.8rem 0; min-width:420px; font:700 1rem/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.03em; }
.tab-shell > span { display:block; color:#9ba4bc; font-size:.72rem; }
.tab-badge { display:inline-flex; padding:.25rem .5rem; border-radius:.45rem; background:#6750e8; color:#fff; font-size:.68rem; font-weight:900; }
.lesson-finish { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem 1.4rem; border-radius:1.2rem; background:#eaf7f1; border:1px solid #b9dfd0; }
.lesson-finish h2 { margin:0 0 .35rem; }
.lesson-finish p { margin:0; color:#48675b; line-height:1.55; }
.lesson-finish.is-finished { background:#e4f5ed; }

@media (max-width: 820px) {
  .lesson-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clean-note-grid,.chord-card { grid-template-columns:1fr; }
  .practice-box,.lesson-finish { align-items:stretch; flex-direction:column; }
  .lesson-finish .button { align-self:flex-start; }
}
@media (max-width: 560px) {
  .lesson-main { width:min(100% - 1rem,1180px); }
  .lesson-hero { align-items:flex-start; gap:1rem; }
  .lesson-ring { flex-basis:76px; width:76px; height:76px; }
  .lesson-ring::after { inset:6px; }
  .lesson-ring strong { font-size:1rem; }
  .lesson-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lesson-tab { min-width:0; }
  .lesson-copy { padding-inline-start:0; padding-top:3rem; }
  .section-number { inset-inline-start:0; }
  .string-end-labels { margin-inline:2.2rem; }

}

.tuning-play-row { display:flex; justify-content:center; padding-top:.8rem; }
.audio-button { min-height:46px; }
.audio-feedback { min-height:1.1rem; color:var(--muted); font-size:.78rem; }
.audio-feedback.is-error { color:#a12c38; }
.chord-card { display:grid; grid-template-columns:minmax(250px,360px) 1fr; gap:1.5rem; align-items:center; padding:1.25rem; border-radius:1.1rem; background:var(--surface-muted); border:1px solid var(--border); }
.chord-visual { display:grid; justify-items:center; gap:.65rem; }
.chord-name { margin:0; color:var(--text); font-size:1rem; letter-spacing:0; }
.chord-wrap { width:min(100%,280px); margin:0 auto; }
.diagram-orientation { margin-bottom:.35rem; text-align:center; color:var(--muted); font-size:.72rem; font-weight:750; }
.chord-svg { display:block; width:100%; height:auto; overflow:visible; direction:ltr; }
.chord-svg .cd-string { stroke:#565d70; stroke-width:2; }
.chord-svg .cd-fret { stroke:#9299a9; stroke-width:2; }
.chord-svg .cd-nut { stroke:#282c38; stroke-width:7; }
.chord-svg .cd-open { fill:#fff; stroke:#363d4e; stroke-width:2.5; }
.chord-svg .cd-dot { fill:var(--primary); }
.chord-svg .cd-finger { fill:#fff; font:800 12px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.chord-svg .cd-label { fill:#626b80; font:750 11px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.chord-audio { justify-self:center; }
.chord-explanation { display:grid; gap:.85rem; }
.chord-explanation > p { margin:0; color:var(--muted); line-height:1.65; }
.chord-steps { display:grid; gap:.7rem; margin:0; padding:0; list-style:none; }
.chord-steps li { display:grid; grid-template-columns:2rem 1fr; align-items:center; gap:.75rem; padding:.7rem .8rem; border:1px solid #ded9f8; border-radius:.8rem; background:#fff; }
.chord-steps strong { width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:#fff; font-size:.8rem; }
.chord-steps li:last-child strong { background:#fff; color:#343b4d; border:2px solid #343b4d; }
.chord-steps span { line-height:1.45; }
.chord-legend { padding:.7rem .8rem; border-inline-start:4px solid var(--primary); background:#f3efff; border-radius:.55rem; }
@media (max-width:820px) { .chord-card { grid-template-columns:1fr; } }
@media (max-width:560px) { .chord-card { padding:.9rem; } .chord-wrap { width:min(100%,250px); } .chord-steps li { grid-template-columns:1.8rem 1fr; padding:.65rem; } }


/* R0.5 placement assessment */
.assessment-offer { margin-top:1.25rem; padding:1rem; border:1px solid #dcd6ff; border-radius:1.1rem; background:linear-gradient(145deg,#faf9ff,#f1eeff); }
.assessment-offer-copy { display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; }
.assessment-icon { width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:.8rem; background:var(--primary); color:#fff; font-weight:900; }
.assessment-offer h2 { margin:.1rem 0 .35rem; font-size:1.05rem; }
.assessment-offer p { margin:0; color:var(--muted); line-height:1.55; }
.assessment-offer-actions { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.9rem; }
.assessment-offer-actions .choice { min-height:68px; padding:.7rem .8rem; }
.assessment-test { display:grid; gap:1rem; }
.assessment-test-head { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; color:var(--muted); font-size:.82rem; }
.level-pill { display:inline-flex; padding:.45rem .7rem; border-radius:999px; background:#eeeaff; color:var(--primary-dark); font-weight:800; }
.assessment-question { padding:clamp(1rem,4vw,1.4rem); border:1px solid var(--border); border-radius:1.15rem; background:var(--surface-muted); }
.assessment-question h2 { margin:0 0 1rem; font-size:clamp(1.2rem,3vw,1.55rem); line-height:1.45; }
.answer-list { display:grid; gap:.65rem; }
.answer-list .choice { background:#fff; }
.assessment-nav,.assessment-result-actions { display:flex; justify-content:space-between; gap:.75rem; }
.assessment-result { display:grid; grid-template-columns:130px 1fr; gap:1.25rem; align-items:start; padding:1.2rem; border:1px solid #d9d3ff; border-radius:1.2rem; background:linear-gradient(145deg,#fbfaff,#f1edff); }
.score-ring { width:118px; height:118px; border-radius:50%; display:grid; place-content:center; text-align:center; background:#2c285f; color:#fff; box-shadow:0 10px 24px rgba(44,40,95,.18); }
.score-ring strong { font-size:1.65rem; line-height:1; }
.score-ring span { margin-top:.35rem; font-size:.72rem; opacity:.76; }
.assessment-result-copy h2 { margin:.3rem 0 .45rem; font-size:1.55rem; }
.assessment-result-copy > p { margin:.3rem 0; color:var(--muted); line-height:1.6; }
.result-levels { display:grid; grid-template-columns:1fr auto 1fr; gap:.65rem; align-items:center; margin:1rem 0; }
.result-levels > div { padding:.75rem; border:1px solid #ded9f8; border-radius:.85rem; background:#fff; }
.result-levels small,.result-levels strong { display:block; }
.result-levels small { color:var(--muted); margin-bottom:.25rem; }
.assessment-correct { font-weight:800; color:var(--text)!important; }
.assessment-note { padding:.75rem .85rem; border-inline-start:4px solid var(--primary); background:#fff; border-radius:.55rem; }
.assessment-result-actions { margin-top:1rem; justify-content:flex-end; }
@media (max-width:620px) {
  .assessment-offer-actions { grid-template-columns:1fr; }
  .assessment-result { grid-template-columns:1fr; }
  .score-ring { width:96px; height:96px; }
  .result-levels { grid-template-columns:1fr; }
  .result-levels > span { transform:rotate(90deg); justify-self:center; }
  [dir="rtl"] .result-levels > span { transform:rotate(90deg); }
  .assessment-nav,.assessment-result-actions { flex-direction:column-reverse; }
  .assessment-nav .button,.assessment-result-actions .button { width:100%; }
}


/* R0.7 — interactive T01 theory foundation */
.theory-dashboard-card .button { margin-top:.8rem; }
.theory-hero { background:linear-gradient(135deg,#17263c,#255b67); }
.theory-panel { overflow:hidden; }
.note-alphabet { display:grid; grid-template-columns:repeat(7,minmax(64px,1fr)); gap:.55rem; }
.note-key { min-height:88px; display:grid; place-items:center; gap:.1rem; padding:.6rem; border:1px solid #d8d3f4; border-radius:.9rem; background:#fff; color:var(--text); }
.note-key strong { font-size:1.45rem; } .note-key small { color:var(--muted); } .note-key i { color:var(--primary); font-style:normal; font-size:.72rem; }
.note-key:hover { border-color:var(--primary); background:#f5f2ff; }
.theory-callout,.octave-note { margin:1rem 0 0; padding:.85rem 1rem; border-radius:.8rem; line-height:1.6; }
.theory-callout { background:#eeeaff; color:#514879; border-inline-start:4px solid var(--primary); }
.octave-note { background:#eaf7f1; color:#386452; border-inline-start:4px solid #17775a; }
.semitone-strip { display:flex; align-items:center; justify-content:center; gap:.55rem; overflow-x:auto; padding:.4rem 0; }
.semitone-strip > b { flex:0 0 auto; color:#8a789e; }
.semitone-note { flex:0 0 116px; min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; border:1px solid var(--border); border-radius:.9rem; background:#fff; color:var(--text); }
.semitone-note strong { font-size:1.3rem; } .semitone-note span,.semitone-note small { color:var(--muted); font-size:.74rem; }
.semitone-note:hover { border-color:var(--primary); background:#f5f2ff; }
.fretboard-wrap { display:grid; gap:.8rem; padding:1rem; border:1px solid var(--border); border-radius:1.1rem; background:var(--surface-muted); }
.fretboard-meta { display:flex; justify-content:space-between; gap:1rem; align-items:end; flex-wrap:wrap; }
.fretboard-meta span { color:var(--muted); font-size:.8rem; max-width:55ch; }
.fretboard-scroll { overflow-x:auto; padding-bottom:.35rem; -webkit-overflow-scrolling:touch; }
.fretboard-grid { min-width:790px; display:grid; gap:0; padding:.25rem; border-radius:.8rem; background:#5f4433; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.fret-head,.fret-row { display:grid; grid-template-columns:52px repeat(13,minmax(52px,1fr)); }
.fret-head { position:sticky; top:0; z-index:1; }
.fret-corner,.fret-number { min-height:30px; display:grid; place-items:center; background:#342a27; color:#f3ece8; font-size:.68rem; font-weight:800; border-inline-end:1px solid #765d4f; }
.fret-number.is-octave { background:#4f3b62; }
.string-number { min-height:50px; display:grid; place-content:center; text-align:center; background:#342a27; color:#fff; border-top:1px solid #5c4a43; }
.string-number b { font-size:.8rem; }.string-number small { color:#d2c2b8; font-size:.62rem; }
.fret-cell { position:relative; min-width:52px; min-height:50px; display:grid; place-content:center; gap:.1rem; border:0; border-top:1px solid rgba(247,238,222,.55); border-inline-end:2px solid #bea693; background:linear-gradient(180deg,#caa77b,#bd9368); color:#2d241e; }
.fret-cell::after { content:''; position:absolute; inset-inline:0; top:50%; height:var(--s,1px); background:#5d514a; opacity:.72; pointer-events:none; }
.fret-row:nth-child(3) .fret-cell::after { --s:1.3px; }.fret-row:nth-child(4) .fret-cell::after { --s:1.6px; }.fret-row:nth-child(5) .fret-cell::after { --s:2px; }.fret-row:nth-child(6) .fret-cell::after { --s:2.5px; }.fret-row:nth-child(7) .fret-cell::after { --s:3px; }
.fret-cell strong,.fret-cell small { position:relative; z-index:1; }
.fret-cell strong { display:grid; place-items:center; width:30px; height:30px; margin:auto; border-radius:50%; background:rgba(255,255,255,.82); font-size:.78rem; box-shadow:0 1px 4px rgba(0,0,0,.14); }
.fret-cell small { color:#5b493d; font-size:.55rem; }
.fret-cell.is-open { background:#e0c7a5; }.fret-cell.is-octave { background:linear-gradient(180deg,#ba9bc8,#9c79ad); }.fret-cell.is-selected strong { background:var(--primary); color:#fff; transform:scale(1.1); }.fret-cell:hover strong { outline:2px solid var(--primary); }
.octave-callout { justify-self:end; color:#5c4c6b; font-size:.74rem; font-weight:750; }
.selected-note-card { min-height:72px; display:flex; align-items:center; gap:1rem; padding:.8rem 1rem; border:1px solid #d9d3ff; border-radius:.9rem; background:#fff; }
.selected-note-card > div { display:grid; gap:.15rem; } .selected-note-card span { color:var(--muted); font-size:.7rem; }.selected-note-card strong { font-size:1rem; } .selected-note-card .button { margin-inline-start:auto; }
.selected-note-card.is-empty { justify-content:center; color:var(--muted); }
.theory-quiz { display:grid; gap:1rem; padding:1rem; border:1px solid var(--border); border-radius:1.1rem; background:var(--surface-muted); }
.theory-quiz .assessment-question h3 { margin:0 0 1rem; font-size:1.2rem; }
.theory-quiz-result { display:grid; grid-template-columns:120px 1fr; gap:1.1rem; align-items:center; padding:1.1rem; border:1px solid #b9dfd0; border-radius:1.1rem; background:#eaf7f1; }
.theory-quiz-result.is-review { border-color:#ead39a; background:#fff7df; }
.theory-quiz-result h3 { margin:.1rem 0 .35rem; }.theory-quiz-result p { margin:.25rem 0; line-height:1.55; }
@media (max-width:720px){ .note-alphabet{grid-template-columns:repeat(4,minmax(60px,1fr));}.semitone-strip{justify-content:flex-start}.fretboard-wrap{padding:.7rem}.fretboard-meta{align-items:start}.selected-note-card{align-items:stretch;flex-direction:column}.selected-note-card .button{margin-inline-start:0;align-self:flex-start}.theory-quiz-result{grid-template-columns:1fr}.theory-quiz-result .score-ring{width:90px;height:90px} }
@media (max-width:420px){ .note-alphabet{grid-template-columns:repeat(3,minmax(60px,1fr));}.note-key{min-height:76px}.fretboard-grid{min-width:760px} }