.literacy-intro{display:flex;align-items:center;gap:24px;padding:26px;margin:0 auto 28px;max-width:1040px;background:#f1f5e7;border:1px solid #d7e2c4;border-radius:24px;color:#244f43;scroll-margin-top:90px}
.literacy-intro h2{margin:6px 0}.literacy-intro p{margin:8px 0;max-width:530px;line-height:1.7}.literacy-intro-mark{display:grid;place-items:center;flex:0 0 80px;height:80px;border-radius:24px;background:#e2bd65;font-size:36px;font-weight:800;box-shadow:0 5px 0 #c5a353}.literacy-intro-actions{display:flex;flex-direction:column;gap:12px;margin-left:auto;flex-shrink:0}.literacy-intro.is-skipped{background:#fafbf7}.literacy-page,.literacy-session{max-width:900px;margin:auto;padding-bottom:40px}.literacy-summary{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0 30px}.literacy-group{padding:24px;background:#fff;border:1px solid #d7e2c4;border-radius:22px;margin:20px 0}.literacy-group header{display:flex;align-items:center;justify-content:space-between;gap:20px}.literacy-group h2{margin:0 0 8px}.literacy-group p,.literacy-session header p{line-height:1.8;color:#5d735f}.literacy-chart{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px;margin-top:20px}.literacy-chart button{border:1px solid #d7e2c4;background:#f6f8ef;color:#244f43;border-radius:16px;padding:16px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}.literacy-chart strong{font-size:30px}.literacy-chart small{font-size:13px}.literacy-chart button:hover{background:#e8efd9}.literacy-session{max-width:700px}.literacy-session header{margin:22px 0}.literacy-session h1{font-size:clamp(23px,4vw,32px)}.literacy-session progress{width:100%;height:14px;accent-color:#618a54}.literacy-session header small{display:block;margin-top:8px}.literacy-focus{display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px;background:#f4f7ed;border-radius:24px;min-height:220px;justify-content:center}.literacy-glyph{font-size:clamp(55px,12vw,90px);line-height:1.2;font-weight:750}.literacy-ear{font-size:60px}.literacy-example{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;border-top:1px solid #d7e2c4;padding-top:20px;width:100%}.literacy-example>span:first-child{font-size:36px}.literacy-example>strong{font-size:25px}.literacy-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.literacy-option{font-size:26px;padding:20px;border:2px solid #d7e2c4;border-radius:16px;background:white;color:#244f43;cursor:pointer}.literacy-option.is-picked{border-color:#48794d;background:#edf4e2}.literacy-option.is-correct{border-color:#48794d;background:#dfeecf}.literacy-option:disabled{cursor:default}.literacy-session>[role=status]{min-height:32px;margin:18px 0;line-height:1.7}.literacy-session>[data-literacy-next]{display:block;width:100%;margin-top:24px}.nav-icon-literacy{font-weight:850;font-size:23px;color:#427e88}button[data-literacy-audio]:focus-visible,.literacy-option:focus-visible{outline:3px solid #497a4b;outline-offset:4px}
@media(max-width:700px){.literacy-intro{flex-wrap:wrap;padding:20px;gap:16px}.literacy-intro-copy{flex:1;min-width:0}.literacy-intro-actions{width:100%;margin-left:0}.literacy-intro-mark{flex-basis:60px;height:60px;font-size:28px}.literacy-summary{align-items:stretch;flex-direction:column}.literacy-group{padding:18px}.literacy-chart{grid-template-columns:repeat(3,minmax(0,1fr))}.literacy-group header{align-items:flex-start}.literacy-group header .button{flex-shrink:0}.literacy-option{padding:16px;font-size:22px}.literacy-focus{padding:24px 14px}}
.literacy-writing{padding:22px;background:#f4f7ed;border-radius:24px}.literacy-writing>p{font-size:13px;line-height:1.8;color:#5d735f}.literacy-writing-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.literacy-writing-grid small{display:block;text-align:center;margin-bottom:10px;color:#5d735f}.literacy-writing-model,.literacy-writing-grid svg{display:block;width:100%;aspect-ratio:1;background:#fff;border:1px solid #d7e2c4;border-radius:16px}.literacy-writing-model{display:grid;place-items:center;font-size:clamp(65px,14vw,155px);font-family:'Yu Kyokasho','UD Digi Kyokasho N-R','Hiragino Mincho ProN',serif}.literacy-writing-grid svg{touch-action:none;user-select:none;cursor:crosshair}.literacy-trace-guide{fill:#dce3d5;font-size:190px;font-family:'Yu Kyokasho','UD Digi Kyokasho N-R','Hiragino Mincho ProN',serif;pointer-events:none}.literacy-writing-grid polyline{stroke:#355f48;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;fill:none}.literacy-writing-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}@media(max-width:480px){.literacy-writing{padding:14px}.literacy-writing-grid{grid-template-columns:1fr}.literacy-writing-model{aspect-ratio:auto;min-height:80px;font-size:64px}.literacy-writing-grid svg{max-width:300px;margin:auto}}
.literacy-group header>div{min-width:0}.literacy-group header .button{flex-shrink:0;white-space:nowrap}

.literacy-exercise .exercise-main{width:100%;min-width:0}.literacy-exercise .literacy-session{width:100%;max-width:900px;padding:24px clamp(16px,4vw,48px) 40px;box-sizing:border-box}.literacy-session [data-literacy-heading]:focus{outline:none}

.exercise-screen.literacy-exercise{padding-bottom:24px}.exercise-screen.literacy-exercise .exercise-main{max-width:1000px;padding:0;margin:auto}
.literacy-mode-switch{display:flex;flex-wrap:wrap;gap:8px}.literacy-mode-switch .button{font-size:13px;padding:10px 14px;min-height:44px}.literacy-mode-switch [aria-pressed=true]{background:#355f48;color:#fff}.literacy-writing-model .literacy-stroke-model{width:100%;height:100%;border:0;max-height:220px}.literacy-writing-grid .literacy-stroke-model{touch-action:auto;cursor:default}.literacy-writing-grid [data-literacy-pad]{max-width:300px;margin:auto}
body .exercise-screen.literacy-exercise .exercise-main{padding:0;overflow:hidden;display:flex;max-width:1000px}
body .literacy-exercise .literacy-session:has(.literacy-session-footer){display:flex;flex-direction:column;height:100%;min-height:0;padding:16px 22px 0;box-sizing:border-box}
.literacy-session:has(.literacy-session-footer)>[data-literacy-home]{align-self:flex-start;flex:none;min-height:40px}
.literacy-session-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:16px}
.literacy-session-footer{flex:none;background:#fff;border-top:1px solid #d7e2c4;padding:12px 0 max(12px,env(safe-area-inset-bottom))}
.literacy-session-footer>.button{width:100%;min-height:48px}
.literacy-session-content header{margin:10px 0 16px}.literacy-session-content header p{margin:8px 0}.literacy-session-content h1{margin:8px 0;font-size:clamp(21px,4vw,28px)}
@media(max-width:480px){.literacy-writing-grid{grid-template-columns:minmax(70px,1fr) minmax(0,3fr);gap:10px}.literacy-writing-model{min-height:0;aspect-ratio:1}.literacy-writing-grid small{font-size:11px}.literacy-writing>p{margin:8px 0}.literacy-writing-tools{gap:8px}.literacy-writing-tools .button{padding:10px}.literacy-session-content .literacy-writing{padding:12px}.literacy-writing-model .literacy-stroke-model{height:auto}}
body .literacy-exercise .literacy-page{width:100%;height:100%;overflow-y:auto;box-sizing:border-box;padding:24px}
.literacy-stroke-credit{display:block;font-size:10px;color:#5d735f;margin-top:8px}

/* Letter overview: quiet paper, moss borders and small botanical details. */
body .literacy-page { max-width:780px; color:#294c3d; }
body .literacy-page .page-heading { margin:8px 0 22px; }
.literacy-page .page-heading>div { display:grid; grid-template-columns:28px 1fr; column-gap:10px; align-items:center; }
body .literacy-page .page-heading h1 { margin:0; font-size:26px; letter-spacing:-.025em; }
body .literacy-page .page-heading p { grid-column:1/-1; margin:12px 0 0; font-size:13px; line-height:1.7; color:#687568; }
.literacy-leaf,.literacy-speaker { width:20px; height:20px; flex-shrink:0; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.literacy-heading-mark { display:flex; color:#729265; }
.literacy-heading-mark .literacy-leaf { width:27px; height:27px; }
body .literacy-page .literacy-summary { flex-wrap:wrap; gap:12px 20px; margin:0 0 24px; padding:0 0 18px; border-bottom:1px solid #e1e7dc; }
.literacy-page .literacy-summary strong { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:#607459; }
body .literacy-page .literacy-course-link { min-height:44px; padding:6px 0; margin-left:auto; font-size:12px; color:#526e49; background:none; border:0; box-shadow:none; text-align:left; }
body .literacy-page .literacy-group { position:relative; margin:16px 0; padding:20px; border:1px solid #d6dfcd; border-radius:16px 5px 16px 16px; background:#fffefa; box-shadow:0 2px 6px #344d2d04; }
.literacy-page .literacy-group::before { content:''; position:absolute; left:-1px; top:22px; width:3px; height:28px; border-radius:0 3px 3px 0; background:#a7b895; }
body .literacy-page .literacy-group h2 { display:flex; align-items:center; gap:8px; margin:0; font-size:18px; line-height:1.5; font-weight:650; }
.literacy-page .literacy-group h2 .literacy-leaf { width:17px; height:17px; color:#82966e; }
body .literacy-page .literacy-group p { margin:8px 0 0; font-size:12px; line-height:1.65; color:#6b7767; }
body .literacy-page .literacy-group header { gap:14px; }
body .literacy-page .literacy-group header .button { min-height:40px; padding:9px 17px; border-radius:20px; border:1px solid #466b43; background:#466b43; box-shadow:none; font-size:12px; }
body .literacy-page .literacy-chart { grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:8px; margin-top:18px; }
body .literacy-page .literacy-chart button { position:relative; min-height:106px; padding:13px 6px 10px; gap:4px; border:1px solid #e2e7d9; border-radius:10px; background:#f5f7ee; color:#36533d; transition:background .15s,border-color .15s; }
body .literacy-page .literacy-chart strong { font-size:29px; font-weight:600; }
body .literacy-page .literacy-chart small { font-size:12px; color:#66785e; }
.literacy-page .literacy-speaker { width:13px; height:13px; margin-top:4px; color:#7d916d; }
body .literacy-page .literacy-chart button:hover { background:#eaf0df; border-color:#a2b48f; }
.literacy-page button:focus-visible { outline:2px solid #64864f; outline-offset:4px; }
.literacy-page .is-complete::before { background:#507447; }
@media(max-width:700px) {
  body .literacy-page .literacy-summary { flex-direction:row; align-items:center; gap:4px 12px; }
  body .literacy-page .literacy-group { padding:16px; }
  body .literacy-page .page-heading h1 { font-size:24px; }
  body .literacy-page .literacy-group h2 { font-size:16px; }
  body .literacy-page .literacy-chart { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) { body .literacy-page .literacy-chart button { transition:none; } }

/* Compact lesson navigation and icon-only playback controls. */
.literacy-session-top{display:flex;align-items:center;gap:16px;flex:none}
.literacy-session-top [data-literacy-home]{display:grid;place-items:center;flex:0 0 44px;width:44px;min-height:44px;padding:0;font-size:24px}
.literacy-session-top progress{flex:1;min-width:0;width:auto;height:10px}
.literacy-session-content header h1{font-size:14px;font-weight:600;letter-spacing:.04em;margin:12px 0 18px;color:#48794d}
body .literacy-session .literacy-audio-button{display:inline-grid;place-items:center;flex:0 0 48px;width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;font-size:23px;line-height:1;box-shadow:none}
.literacy-exercise .lesson-save-status:empty{display:none}

.literacy-intro{position:relative;padding-right:56px}.literacy-intro-copy{min-width:0}.literacy-intro-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:#657963;font-size:22px;font-weight:400;line-height:1;cursor:pointer}.literacy-intro-close:hover{background:#e6eddc;color:#244f43}.literacy-intro-close:focus-visible{outline:3px solid #497a4b;outline-offset:2px}
body .literacy-page .literacy-overview p { font-size:14px; line-height:1.85; margin-top:14px; }
.literacy-overview .eyebrow{display:block;margin-bottom:8px;font-size:11px;color:#687568}
.literacy-explanation-card{margin:24px auto;padding:clamp(22px,5vw,44px);border:1px solid #d6dfcd;border-radius:24px 6px 24px 24px;background:#fffefa;max-width:580px}
.literacy-explanation-mark{display:grid;place-items:center;width:52px;height:52px;background:#edf3e4;color:#64864f;border-radius:50%;margin-bottom:24px;font-size:28px}
.literacy-explanation-mark .literacy-leaf{width:28px;height:28px}
.literacy-explanation-card h2{font-size:22px;line-height:1.5;margin:0 0 18px;color:#294c3d}
.literacy-explanation-card p{font-size:18px;line-height:2;color:#405947;margin:0;overflow-wrap:anywhere}
.literacy-explanation-footer{display:flex;gap:12px}
.literacy-explanation-footer>.button{flex:1;width:auto}
.literacy-explanation .literacy-session-top button{flex:0 0 44px;min-height:44px;font-size:24px}

/* Optional foundations alongside the first unit's story activities. */
.unit-literacy-icon{font-size:24px;font-weight:800}
.unit-literacy-shortcut small{line-height:1.7;text-align:center;overflow-wrap:anywhere}