/* Tonal greens mark learning milestones without changing their meaning. */
.tone-0 {--journey-tint:var(--read-tint);--journey-color:var(--read-ink);--journey-edge:var(--read-edge);--journey-fill:#426a3e}
.tone-1 {--journey-tint:var(--track-tint);--journey-color:var(--track-ink);--journey-edge:var(--track-edge);--journey-fill:#536f3d}
.tone-2 {--journey-tint:var(--learn-tint);--journey-color:var(--learn-ink);--journey-edge:var(--learn-edge);--journey-fill:#52154e}
.tone-3 {--journey-tint:var(--listen-tint);--journey-color:var(--listen-ink);--journey-edge:var(--listen-edge);--journey-fill:#3d6b4f}
html[data-theme=night] .tone-0 {--journey-fill:#b7d7b7}
html[data-theme=night] .tone-1 {--journey-fill:#c7dab3}
html[data-theme=night] .tone-2 {--journey-fill:#b7d7b7}
html[data-theme=night] .tone-3 {--journey-fill:#94ceac}
.journey-kicker {font-size:.75rem;font-weight:600;letter-spacing:.1em;line-height:1.5;color:var(--muted)}
.journey-primary {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;border-radius:13px;box-shadow:0 4px 0 var(--action-shadow);transition:background .18s,box-shadow .18s,transform .18s}
.journey-primary svg {width:20px;height:20px;flex-shrink:0}
.journey-primary:active {transform:translateY(3px);box-shadow:0 1px 0 var(--action-shadow)}
html[data-theme=night] .journey-primary {box-shadow:0 4px 0 var(--action-shadow)}
html[data-theme=night] .journey-primary:active {box-shadow:0 1px 0 var(--action-shadow)}
.journey-glyphs {display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center;margin:22px 0}
.glyph-tile {display:flex;align-items:center;justify-content:center;width:4.125rem;height:4.5rem;border-radius:17px;background:var(--journey-tint);color:var(--journey-color);border:1px solid var(--journey-edge);border-bottom-width:4px;font-family:Amiri,serif;font-size:2.6rem;line-height:1.7;font-weight:400;flex-shrink:0}
.beginner-onboarding {max-width:880px;margin-inline:auto}
.beginner-onboarding>.product-heading {margin-bottom:24px}
.beginner-welcome {padding:30px;background:var(--surface);border:1px solid var(--line);border-bottom:5px solid var(--gold);border-radius:23px;margin-bottom:22px;box-shadow:var(--shadow)}
.beginner-welcome h2 {font-size:1.875rem;letter-spacing:-.035em;line-height:1.3;margin:12px 0;color:var(--ink)}
.beginner-welcome p {font-size:1.0625rem;margin:0;line-height:1.6;color:var(--muted)}
.welcome-glyphs {margin:25px 0 29px;gap:14px}
.welcome-glyphs .glyph-tile {width:4.875rem;height:5.375rem;font-size:3.125rem}
.beginner-welcome-footer {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.welcome-meta {display:flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--muted)}
.welcome-meta svg {width:18px;height:18px}
.welcome-meta>span {padding-inline:2px}
.level-alternatives {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.level-alternatives .level-choice {display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:start;gap:13px;margin:0;padding:22px;border-radius:17px;min-width:0;background:var(--surface)}
.level-alternatives .level-symbol {display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:var(--journey-tint);color:var(--journey-color)}
.level-symbol svg {width:24px;height:24px}
.level-alternatives .level-choice>svg {width:17px;height:17px;align-self:center;color:var(--muted)}
.level-alternatives .level-choice strong {font-size:1.0625rem;line-height:1.5}
.level-alternatives .level-choice small {font-size:.9375rem;line-height:1.5;margin-top:3px}
.level-alternatives .level-choice em {font-size:.875rem;padding:5px 8px;margin-top:10px}
.learning-journey .learning-stat-tiles>div:first-child {background:var(--surface);border-top:3px solid var(--brand-light)}
.learning-journey .learning-stat-tiles>div:nth-child(2) {border-top:3px solid var(--brand-soft)}
.learning-journey .learning-stat-tiles>div:nth-child(3) {border-top:3px solid var(--brand-primary)}
.learning-journey .learning-focus-grid {grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch}
.learning-journey .learning-focus-grid .journey-next {position:relative;border:1px solid var(--journey-edge);border-bottom:4px solid var(--journey-edge);background:var(--surface);border-radius:20px;padding:26px;gap:20px}
.journey-next .journey-kicker {color:var(--journey-color)}
.learning-journey .journey-next h2 {font-size:1.5rem;line-height:1.4;margin:9px 0}
.journey-next p {margin:0;color:var(--muted);font-size:.9375rem}
.journey-next .journey-glyphs {gap:9px;margin:19px 0}
.journey-next .glyph-tile {width:3.3125rem;height:3.5625rem;font-size:2.1rem;border-radius:13px}
.learning-journey .daily-start-card {background:var(--accent);border-color:var(--line)}
.learning-journey .daily-symbol {background:var(--surface);border:1px solid var(--line)}
.learning-journey .daily-start-card .primary {background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.journey-roadmap {display:grid;gap:15px}
.journey-roadmap .journey-unit,.journey-roadmap .journey-unit[open] {border:1px solid var(--line);border-radius:19px;background:var(--surface);overflow:visible;margin:0}
.journey-roadmap .journey-unit>summary {display:flex;gap:14px;align-items:center;padding:21px;min-height:85px;border-radius:18px;list-style:none}
.journey-unit>summary::-webkit-details-marker {display:none}
.journey-unit[open]>summary {background:var(--journey-tint);border-bottom-left-radius:0;border-bottom-right-radius:0;color:var(--journey-color)}
.journey-roadmap .unit-number {display:flex;align-items:center;justify-content:center;width:43px;height:43px;flex-shrink:0;border-radius:13px;background:var(--journey-tint);color:var(--journey-color);font-size:1.1875rem;border:1px solid var(--journey-edge)}
.journey-roadmap .unit-number svg {width:22px;height:22px}
.journey-roadmap .journey-unit[open] .unit-number {background:var(--surface)}
.journey-unit>summary>span:nth-child(2) {flex:1;min-width:0}
.journey-roadmap .journey-unit>summary strong {font-size:1.125rem;color:inherit}
.journey-roadmap .journey-unit>summary small {color:var(--journey-color);font-size:.875rem}
.journey-roadmap .unit-count {margin-left:auto;background:var(--bg);color:var(--muted);border-radius:8px;white-space:nowrap}
.unit-chevron {font-size:1.4rem;color:var(--muted);transition:transform .2s}
.journey-unit[open] .unit-chevron {transform:rotate(180deg)}
.unit-journey-intro {padding:23px 24px 4px}
.unit-progress-track {display:flex;gap:5px;max-width:600px;height:7px;overflow:hidden;border-radius:6px}
.unit-progress-track>span {display:block;flex:1;min-width:0;background:var(--line);border-radius:4px}
.unit-progress-track>span.done {background:var(--journey-fill)}
.unit-journey-intro>span {display:block;margin-top:9px;font-size:.875rem;color:var(--muted)}
.journey-roadmap .journey-nodes {position:relative;padding:20px 26px 14px;max-width:670px;margin-inline:auto}
.journey-stop {position:relative;padding:0 0 21px;--step-offset:0px}
.journey-stop:nth-child(3n+2) {--step-offset:30px}
.journey-stop:nth-child(3n) {--step-offset:15px}
.journey-stop:before {content:'';position:absolute;left:31px;top:31px;bottom:-31px;border-left:3px solid var(--line)}
.journey-stop.is-complete:before {border-color:var(--journey-edge)}
.journey-stop:last-child:before {display:none}
.journey-roadmap .journey-lesson,.journey-roadmap .journey-lesson.current,.journey-roadmap .journey-lesson.complete {position:relative;display:flex;align-items:center;gap:18px;width:calc(100% - var(--step-offset));min-height:94px;padding:13px 15px 13px 0;margin:0 0 0 var(--step-offset);border:0;border-radius:16px;background:var(--surface);color:var(--ink);text-align:left;box-shadow:none}
.journey-roadmap .journey-lesson.current {padding:15px;border:1px solid var(--journey-edge);background:var(--journey-tint);width:calc(100% - var(--step-offset));margin-left:var(--step-offset)}
.journey-lesson.current .lesson-node {width:62px;height:62px}
.lesson-node {display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;width:64px;height:64px;border-radius:22px;border:1px solid var(--line);border-bottom:5px solid var(--line);background:var(--bg);color:var(--muted);transition:transform .18s,box-shadow .18s}
.lesson-node svg {width:24px;height:24px}
.journey-lesson.current .lesson-node {background:var(--journey-fill);color:#fff;border-color:var(--journey-color);box-shadow:0 0 0 5px var(--surface)}
html[data-theme=night] .journey-lesson.current .lesson-node {color:var(--bg);border-color:var(--journey-edge)}
.journey-lesson.complete .lesson-node {background:var(--journey-tint);color:var(--journey-color);border-color:var(--journey-edge)}
.journey-roadmap .journey-lesson.locked {opacity:1;color:var(--muted)}
.journey-roadmap .lesson-node-copy {flex:1;min-width:0}
.lesson-node-copy .node-status {display:block;font-size:.75rem;letter-spacing:.075em;font-weight:600;color:var(--journey-color);margin-bottom:6px}
.journey-roadmap .lesson-node-copy>strong {display:block;font-size:1rem;font-weight:600;line-height:1.6}
.journey-roadmap .lesson-node-copy>small {display:block;font-size:.875rem;line-height:1.5;margin-top:4px;color:var(--muted)}
.journey-roadmap .journey-lesson.current .lesson-node-copy>small {color:var(--journey-color)}
.node-letter {font-family:Amiri,serif;font-size:2rem;line-height:1.8;padding-inline:8px;color:var(--journey-color);flex-shrink:0}
.journey-lesson.locked .node-letter {color:var(--muted)}
.journey-milestone {display:flex;align-items:center;gap:14px;margin:0 24px 24px;border:1px dashed var(--journey-edge);border-radius:13px;padding:18px;color:var(--journey-color);background:var(--journey-tint)}
.journey-milestone>svg {width:25px;height:25px;flex-shrink:0}
.journey-milestone strong {display:block;font-size:1rem;line-height:1.5}
.journey-milestone small {display:block;margin-top:3px;font-size:.875rem;line-height:1.5}
.journey-exercise {--journey-tint:var(--read-tint);--journey-color:var(--read-ink);--journey-edge:var(--read-edge);--journey-fill:#426a3e}
html[data-theme=night] .journey-exercise {--journey-fill:#b7d7b7}
.journey-exercise>progress {height:10px;border:0;border-radius:10px;accent-color:var(--journey-fill);background:var(--soft);overflow:hidden}
.journey-exercise>progress::-webkit-progress-bar {background:var(--soft);border-radius:10px}
.journey-exercise>progress::-webkit-progress-value {background:var(--journey-fill);border-radius:10px;transition:width .3s}
.journey-exercise .beginner-letter-card {padding:27px;border-radius:22px;overflow:visible;background:var(--surface)}
.letter-card-top {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}
.letter-card-count {font-size:.875rem;color:var(--muted)}
.letter-card-trail {display:flex;gap:10px;justify-content:center;margin:0 0 22px}
.letter-card-trail>span {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;min-width:67px;background:var(--bg);color:var(--muted)}
.letter-card-trail>span.current {background:var(--journey-tint);color:var(--journey-color);border-color:var(--journey-edge)}
.letter-card-trail b {font-family:Amiri,serif;font-size:1.5rem;line-height:1.6;font-weight:400}
.letter-card-trail small {font-size:.875rem;overflow-wrap:anywhere}
.letter-stage {display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:24px;background:var(--journey-tint);color:var(--journey-color);border:1px solid var(--journey-edge);border-bottom:4px solid var(--journey-edge);border-radius:19px;padding:20px 26px}
.letter-stage-symbol {font-family:Amiri,serif;font-size:6.5rem;font-weight:400;line-height:1.65;text-align:center}
.letter-stage-tag {font-size:.75rem;letter-spacing:.1em;font-weight:600}
.journey-exercise .letter-stage h1 {font-size:2.125rem;line-height:1.4;font-weight:600;letter-spacing:-.04em;color:inherit;margin:7px 0 10px}
.journey-exercise .letter-stage p {font-size:1.0625rem;line-height:1.7;color:inherit;margin:0}
.letter-sound-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:22px 0}
.letter-sound-actions>.inline-audio-control {display:flex;flex-direction:column;align-items:stretch;min-width:0}
.letter-sound-actions .audio-button {display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px;font-size:.9375rem;border:1px solid var(--line);border-bottom-width:3px;border-radius:12px;background:var(--bg);color:var(--ink);white-space:normal;line-height:1.5}
.letter-sound-actions .audio-button svg {width:21px;height:21px;flex-shrink:0}
.letter-sound-actions .audio-button.is-playing {background:var(--journey-tint);border-color:var(--journey-edge);color:var(--journey-color)}
.letter-sound-actions .audio-status {margin-top:5px;font-size:.875rem}
.letter-sound-actions .audio-status:empty {display:none}
.letter-forms {margin-top:14px;border-top:1px solid var(--line)}
.letter-forms>summary {padding:17px 0 8px;min-height:46px;font-size:.9375rem;color:var(--muted);cursor:pointer}
.letter-form-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}
.letter-form-grid>div {display:flex;flex-direction:column;gap:6px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:12px 8px;background:var(--bg)}
.letter-form-grid span {font-family:Amiri,serif;font-size:2.1rem;line-height:1.7}
.letter-form-grid small {font-size:.875rem;color:var(--muted);overflow-wrap:anywhere;max-width:100%}
.journey-exercise .letter-forms>p {font-size:1rem;line-height:1.85;padding:4px 0;color:var(--muted);margin:12px 0 0}
.journey-exercise .letter-try {margin-top:22px}
.journey-exercise .course-controls .primary {border-radius:12px;box-shadow:0 3px 0 var(--action-shadow);min-height:50px}
.journey-exercise .course-option {border-bottom-width:4px;transition:background .17s,border-color .17s,transform .17s}
.journey-exercise .course-option.selected {border:2px solid var(--journey-color);border-bottom-width:4px;background:var(--journey-tint)}
.journey-exercise .course-option.answer-correct {border-color:var(--success-text);background:var(--success-bg)}
.journey-exercise .course-option:active:not(:disabled) {transform:translateY(2px)}
.journey-exercise .course-feedback.correct {border-radius:16px;border-width:1px;border-left-width:4px}
.journey-exercise .round-dots i.current {background:var(--journey-fill)}
.journey-celebration {border-top:4px solid var(--gold);text-align:center}
.journey-celebration .result-mark {background:var(--journey-tint);color:var(--journey-color);box-shadow:0 0 0 7px var(--bg);margin:10px auto 22px}
.earned-letters {justify-content:center}
.journey-celebration .lesson-stars {justify-content:center}
@media(hover:hover) {
 .level-choice:hover,.journey-lesson:hover:not(:disabled) {border-color:var(--journey-edge,var(--nav-border))}
 .journey-lesson:hover:not(:disabled) .lesson-node {transform:translateY(-3px)}
 .journey-primary:hover {filter:brightness(1.07)}
}
@keyframes journey-arrive {from {opacity:0;transform:translateY(9px)}to {opacity:1;transform:translateY(0)}}
@keyframes journey-ring {0%,100% {box-shadow:0 0 0 5px var(--surface)}50% {box-shadow:0 0 0 8px var(--surface)}}
@media(prefers-reduced-motion:no-preference) {
 .beginner-welcome,.journey-exercise .beginner-letter-card,.journey-exercise .course-feedback.correct {animation:journey-arrive .3s ease-out both}
 .welcome-glyphs .glyph-tile,.earned-letters .glyph-tile {animation:journey-arrive .36s ease-out both}
 .welcome-glyphs .glyph-tile:nth-child(2),.earned-letters .glyph-tile:nth-child(2) {animation-delay:60ms}
 .welcome-glyphs .glyph-tile:nth-child(3),.earned-letters .glyph-tile:nth-child(3) {animation-delay:120ms}
 .welcome-glyphs .glyph-tile:nth-child(4),.earned-letters .glyph-tile:nth-child(4) {animation-delay:180ms}
 .journey-lesson.current .lesson-node {animation:journey-ring 1.8s ease-in-out 2}
 .journey-celebration .result-mark {animation:journey-arrive .4s ease-out both}
}
@media(max-width:800px),(max-width:1100px) and (pointer:coarse) {
 .beginner-welcome {padding:22px;border-radius:20px;margin-bottom:17px}
 .beginner-welcome h2 {font-size:1.625rem}
 .beginner-welcome p {font-size:1rem}
 .welcome-glyphs {gap:9px;margin:22px 0}
 .welcome-glyphs .glyph-tile {width:3.625rem;height:4.125rem;font-size:2.5rem;border-radius:13px}
 .beginner-welcome-footer {gap:18px}
 .beginner-welcome-footer .journey-primary {width:100%;min-height:54px}
 .level-alternatives {grid-template-columns:1fr;gap:12px}
 .level-alternatives .level-choice {padding:19px;gap:14px;align-items:center}
 .level-alternatives .level-choice em {margin-top:7px}
 .learning-journey .learning-focus-grid {grid-template-columns:1fr}
 .learning-journey .learning-focus-grid .journey-next {padding:22px;border-radius:17px;gap:18px}
 .learning-journey .journey-next h2 {font-size:1.375rem}
 .learning-journey .journey-next .journey-primary {align-self:stretch}
 .journey-next .glyph-tile {width:52px;height:57px}
 .journey-roadmap .journey-unit>summary {padding:17px 14px;gap:11px;min-height:83px}
 .journey-roadmap .journey-unit>summary strong {font-size:1rem}
 .journey-roadmap .unit-number {width:37px;height:40px;border-radius:11px}
 .journey-roadmap .unit-count {padding:6px 7px;font-size:.875rem}
 .journey-unit>summary .unit-chevron {display:none}
 .unit-journey-intro {padding:20px 18px 5px}
 .journey-roadmap .journey-nodes {padding:17px 14px 9px}
 .journey-stop {padding-bottom:17px}
 .journey-stop:nth-child(3n+2) {--step-offset:17px}
 .journey-stop:nth-child(3n) {--step-offset:8px}
 .journey-stop:before {left:26px;border-left-width:2px;top:25px;bottom:-25px}
 .journey-roadmap .journey-lesson,.journey-roadmap .journey-lesson.complete {gap:14px;padding:12px 6px 12px 0;min-height:91px}
 .journey-roadmap .journey-lesson.current {padding:14px 11px;gap:13px}
 .lesson-node,.journey-lesson.current .lesson-node {width:51px;height:54px;border-radius:17px}
 .lesson-node svg {width:21px;height:21px}
 .journey-roadmap .lesson-node-copy>strong {font-size:.9375rem;line-height:1.65}
 .journey-roadmap .lesson-node-copy>small {font-size:.875rem}
 .node-letter {display:none}
 .lesson-node-copy .node-status {font-size:.75rem;letter-spacing:.045em}
 .journey-milestone {margin:0 15px 18px;padding:15px 12px;gap:12px}
 .journey-milestone strong {font-size:.9375rem}
 .journey-milestone small {font-size:.875rem}
 .journey-exercise .beginner-letter-card {padding:19px;border-radius:18px}
 .letter-card-top {margin-bottom:17px}
 .letter-card-trail {gap:7px;margin-bottom:18px}
 .letter-card-trail>span {flex:1;min-width:0;padding:5px 4px;gap:5px}
 .letter-card-trail b {font-size:1.25rem}
 .letter-card-trail small {font-size:.875rem;overflow-wrap:anywhere}
 .letter-stage {grid-template-columns:97px minmax(0,1fr);gap:17px;padding:17px 16px;border-radius:16px}
 .letter-stage-symbol {font-size:5rem;line-height:1.85}
 .journey-exercise .letter-stage h1 {font-size:1.875rem;margin:5px 0 7px}
 .journey-exercise .letter-stage p {font-size:1rem;line-height:1.7}
 .letter-sound-actions {gap:10px;margin:17px 0}
 .letter-sound-actions .audio-button {flex-direction:column;gap:7px;font-size:.875rem;padding:13px 9px;min-height:83px}
 .letter-form-grid {gap:7px}
 .letter-form-grid>div {padding:10px 4px}
 .letter-form-grid span {font-size:1.875rem}
 .letter-forms>summary {font-size:.9375rem;line-height:1.6}
 .journey-exercise .letter-try {width:100%}
 .earned-letters {gap:8px}
 .earned-letters .glyph-tile {width:3.25rem;height:3.625rem;font-size:2.1rem}
}
@media(max-width:380px) {
 .beginner-welcome {padding:19px}
 .welcome-glyphs {gap:7px}
 .welcome-glyphs .glyph-tile {width:3.1875rem;height:3.75rem;font-size:2.3rem}
 .letter-stage {grid-template-columns:73px minmax(0,1fr);gap:12px;padding:15px 12px}
 .letter-stage-symbol {font-size:4.25rem}
 .letter-card-trail>span {flex-direction:column;gap:1px;padding:5px 4px}
 .journey-roadmap .journey-lesson.current {gap:11px;padding:13px 9px}
 .lesson-node,.journey-lesson.current .lesson-node {width:45px;height:48px;border-radius:15px}
 .journey-stop:nth-child(n) {--step-offset:0px}
 .journey-next .journey-glyphs {gap:7px}
 .journey-next .glyph-tile {width:48px;height:54px}
}
@media(prefers-reduced-motion:reduce) {
 .beginner-onboarding *,.learning-journey *,.journey-exercise * {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}