.catalog-meta{margin-bottom:9px}.activity-icon{font-size:46px;text-align:center;margin:12px 0}.activity-prompt{background:#fff8ee;border:1px solid #f3e9d9;border-radius:14px;padding:14px 16px;margin:18px 0}.activity-prompt p{color:#343b4a;margin:6px 0 14px;line-height:1.55}.activity-prompt p:last-child{margin-bottom:0}.activity-note{font-size:12px}.story-reading{font:500 17px/1.8 Nunito,sans-serif;color:#343b4a;background:#fffaf2;border-radius:15px;padding:17px;margin:15px 0}.progress-link{text-align:left;width:100%;cursor:pointer}.progress-link:hover{border-color:#ffd5b6;transform:translateY(-1px)}@media print{body *{visibility:hidden!important}.modal-backdrop,.modal-backdrop *{visibility:visible!important}.modal-backdrop{position:absolute;inset:0;background:white;padding:0}.modal{width:100%;max-width:none;box-shadow:none}.modal-actions,.modal-actions button{display:none!important}}

/* Spelling activity: a focused, touch-friendly lesson card. */
.spell-shell{width:min(100%,760px);margin:0 auto;background:#fff;border:1px solid #e9e7e4;border-radius:22px;padding:24px 28px 26px;box-shadow:0 12px 34px #29344a0b;color:#28334b}
.spell-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.spell-eyebrow{display:block;color:#bd7750;font-size:12px;letter-spacing:.35px;margin:0 0 8px}
.spell-top h1{font:800 clamp(19px,2.8vw,25px)/1.3 Nunito,sans-serif;letter-spacing:-.35px;margin:0;max-width:590px}
.spell-score{flex:none;border:1px solid #e9e6e1;border-radius:22px;padding:8px 12px;font-weight:800;color:#57647a;background:#fff}
.spell-picture{display:grid;justify-items:center;gap:5px;padding:8px 12px 16px}
.spell-emoji{font-size:68px;line-height:1.1;filter:drop-shadow(0 5px 4px #26344a18)}
.spell-picture>strong{font:900 22px Nunito,sans-serif;letter-spacing:.2px}
.spell-audio,.spell-sound{min-height:42px;border:1px solid #e6e5e3;border-radius:12px;background:#fff;padding:9px 16px;font:700 14px Nunito,sans-serif;color:#26334a}
.spell-audio{background:#edf3ff;border-color:#edf3ff;margin-top:7px}
.spell-soundbox{display:grid;justify-items:center;gap:7px;border:1px solid #e7e5e2;border-radius:18px;background:#fff;padding:15px 18px;margin:7px 0 18px}
.spell-soundbox p{color:#6d7889;font-size:14px;margin:0}
.sound-check{font-size:35px;line-height:1.1;color:#151d29}
.spell-question{text-align:center;font:700 17px Nunito,sans-serif;margin:0 0 14px}
.spell-wordbox{display:grid;justify-items:center;gap:8px;padding:12px;border-radius:14px;background:#f8f8f8;margin-bottom:12px}
.spell-wordbox>span{font-size:13px;color:#778195}
.spell-wordbox>strong{display:flex;gap:13px}
.spell-wordbox button{background:transparent;padding:0;color:#142033;font:900 31px/1 Nunito,sans-serif;letter-spacing:.5px}
.spell-success{border:1px solid #e7e5e2;border-radius:13px;background:#fff;padding:12px 15px;text-align:center;font:700 15px/1.45 Nunito,sans-serif;margin:12px 0}
.spell-next{width:100%;min-height:46px;border-radius:13px;background:#397cf3;color:#fff;font:800 16px Nunito,sans-serif;padding:11px 16px}
.spell-next:hover{background:#2869da}
@media(max-width:620px){.spell-shell{padding:18px 16px 20px;border-radius:18px}.spell-top{gap:10px}.spell-score{padding:7px 9px;font-size:12px}.spell-emoji{font-size:58px}.spell-soundbox{padding:13px 12px}.spell-question{font-size:16px}.spell-wordbox button{font-size:29px}}

/* Match the focused, phone-sized spelling lesson pattern. */
body:has(.spell-mode){background:#fff}
.spell-mode{display:block;min-height:100vh;background:#fff}
.spell-mode .sidebar,.spell-mode .topbar,.spell-mode .mobile-nav{display:none!important}
.spell-mode .workspace{margin:0;width:100%;min-height:100vh}
.spell-mode .main{width:min(100%,525px);max-width:525px;min-height:100vh;padding:5px 15px;margin:0 auto}
.spell-mode .spell-shell{width:100%;min-height:calc(100vh - 10px);margin:0 auto;border-radius:16px;border:1px solid #e2e2e2;background:#fdfdfd;padding:22px 24px 10px;box-shadow:none}
.spell-mode .spell-top{margin-bottom:13px}
.spell-mode .spell-eyebrow{font:400 14px/1.4 Nunito,sans-serif;letter-spacing:0;color:#69758a}
.spell-mode .spell-top h1{font:800 19px/1.4 Nunito,sans-serif;letter-spacing:0;color:#090d14}
.spell-mode .spell-score{font:700 13px Nunito,sans-serif;padding:8px 12px}
.spell-mode .spell-picture{padding:10px 12px 16px;gap:4px}
.spell-mode .spell-emoji{font-size:82px}
.spell-mode .spell-picture>strong{font:900 23px Nunito,sans-serif;color:#05070b}
.spell-mode .spell-audio{margin-top:9px;min-height:44px;padding:10px 18px;background:#edf3ff;border:0;font-size:15px;color:#06090e}
.spell-mode .spell-soundbox{min-height:154px;margin:7px 0 20px;padding:15px 18px;border-radius:17px;background:#fdfdfd}
.spell-mode .spell-soundbox p{font:400 14px/1.5 Nunito,sans-serif;color:#68748a}
.spell-mode .sound-check{font-size:39px}
.spell-mode .spell-sound{min-height:45px;padding:10px 18px;font-size:15px}
.spell-mode .spell-question{font:800 17px/1.5 Nunito,sans-serif;color:#05070b;margin:0 0 23px}
.spell-mode .spell-wordbox{min-height:96px;margin-bottom:15px;padding:13px;border-radius:14px;background:#f7f7f7}
.spell-mode .spell-wordbox>span{font:400 14px Nunito,sans-serif;color:#738097}
.spell-mode .spell-wordbox>strong{gap:16px}
.spell-mode .spell-wordbox button{font:900 30px/1 Nunito,sans-serif;color:#03060c}
.spell-mode .spell-success{min-height:51px;margin:15px 0;border-radius:13px;font:700 15px/1.45 Nunito,sans-serif;color:#101319}
.spell-mode .spell-next{min-height:46px;border-radius:12px;background:#397cf3;font:800 16px Nunito,sans-serif}
@media(max-width:620px){.spell-mode .main{padding:5px 15px}.spell-mode .spell-shell{padding:22px 24px 10px}.spell-mode .spell-emoji{font-size:78px}.spell-mode .spell-soundbox{min-height:154px}.spell-mode .spell-question{margin-bottom:22px}}

.spell-progress{height:5px;width:100%;overflow:hidden;border-radius:9px;background:#eff1f5;margin:0 0 8px}
.spell-progress i{display:block;height:100%;border-radius:9px;background:#397cf3;transition:width .25s ease}
.spell-mode .spell-picture{padding-top:7px}
.spell-mode .spell-choices{display:flex;justify-content:center;flex-wrap:wrap;gap:10px!important}
.spell-mode .spell-choice{width:52px;height:52px;padding:0;border:1px solid #e2e5eb;border-radius:13px;background:#fff;color:#0b1220;font:900 25px/1 Nunito,sans-serif;letter-spacing:0;box-shadow:0 2px 5px #1820330a;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.spell-mode .spell-choice:hover{transform:translateY(-2px);border-color:#82aaf8;background:#f4f7ff}
.spell-mode .spell-choice.chosen{border-color:#63b78b;background:#eaf8f0;color:#27704a}
.spell-mode .spell-choice.miss{border-color:#e39a8e;background:#fff0ed;color:#a63f31}
.spell-mode .spell-choice:disabled{cursor:default}
.spell-mode .spell-success.is-hint{background:#f7f8fa;color:#69758a}
.spell-mode .spell-success.is-wrong{background:#fff5f2;border-color:#f0d3cd;color:#a34a3d}
.spell-mode .spell-success.is-correct{background:#f0faf4;border-color:#cfead8;color:#28754d}
.spell-finish-art{font-size:74px;text-align:center;margin:30px 0 8px}
.spell-finish-copy{text-align:center;color:#67748a;font:700 15px Nunito,sans-serif;margin:8px 0}
.spell-finish-score{text-align:center;font:900 46px Nunito,sans-serif;color:#28334b;margin:5px 0 14px}
.spell-finish-score span{font-size:22px;color:#929bac}
.spell-mode .spell-restart{width:100%;min-height:44px;margin-top:9px;border:1px solid #e4e6eb;border-radius:12px;background:#fff;color:#46536a;font:800 14px Nunito,sans-serif}

/* A–Z learning and independent spelling keyboard */
.alphabet-panel,.letter-detail,.letter-practice{background:#fff;border:1px solid #ebe8e3;border-radius:20px;padding:22px;margin:18px 0 24px}
.alphabet-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.letter-tile{min-height:90px;border:1px solid #e8e8eb;border-radius:16px;background:#fff;color:#25344d;display:grid;place-items:center;align-content:center;gap:5px;box-shadow:0 3px 12px #25344d08;transition:transform .15s,border-color .15s}
.letter-tile:hover{transform:translateY(-2px);border-color:#8eaef5}.letter-tile strong{font:900 31px/1 Nunito,sans-serif}.letter-tile small{font:700 11px Nunito,sans-serif;color:#7a8595}.letter-tile.learned{background:#f0faf4;border-color:#b8e2c6}.letter-tile.learning{background:#fff9eb;border-color:#f2dda4}
.letter-legend{font:600 13px Nunito,sans-serif;color:#758096;margin:15px 0 0;text-align:center}
.letter-detail{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;background:#fffaf2}
.letter-hero{display:flex;align-items:center;justify-content:center;gap:12px;color:#26344d;font:900 64px/1 Nunito,sans-serif}.letter-hero span+span{color:#9aa3b1}.letter-example{display:flex;align-items:center;gap:14px;font-family:Nunito,sans-serif}.letter-emoji{font-size:48px}.letter-example b{font-size:22px;letter-spacing:1px}.letter-example p{color:#647187;margin:5px 0}.letter-actions{grid-column:1/-1;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.letter-actions button,.keyboard-actions button{min-height:44px;padding:10px 15px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#344159;font:800 14px Nunito,sans-serif}.letter-actions .primary,.keyboard-actions .primary{background:#397cf3;color:#fff;border-color:#397cf3}
.choice-setting{color:#69758a;font:700 13px Nunito,sans-serif}.choice-setting select{margin-left:8px;border:1px solid #e4e7ec;border-radius:10px;padding:9px;background:white;color:#26344d;font:700 13px Nunito,sans-serif}
.letter-practice{max-width:620px;margin:20px auto;text-align:center;padding:24px}.letter-practice h1{font:900 27px Nunito,sans-serif}.typed-answer{min-height:66px;margin:16px auto;padding:12px;border-radius:14px;background:#f6f7f9;font:900 34px Nunito,sans-serif;letter-spacing:8px}
.letter-feedback{margin:0 auto 12px;color:#8b4b16;font-weight:800}
.touch-keyboard{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.letter-key{min-height:54px;border:1px solid #e4e7ec;border-radius:12px;background:#fff;color:#17243a;font:900 21px Nunito,sans-serif;box-shadow:0 2px 4px #26344a0d}.letter-key:hover{background:#edf3ff;border-color:#9bb8f5}.keyboard-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:14px 0}
@media(min-width:900px){.alphabet-grid{grid-template-columns:repeat(9,minmax(0,1fr))}.touch-keyboard{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:620px){.alphabet-panel,.letter-detail,.letter-practice{padding:15px;border-radius:16px}.alphabet-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.letter-tile{min-height:68px;border-radius:12px}.letter-tile strong{font-size:26px}.letter-tile small{font-size:9px}.letter-detail{grid-template-columns:1fr;text-align:center;gap:12px}.letter-hero{font-size:52px}.letter-example{justify-content:center}.letter-actions{gap:7px}.letter-actions button{font-size:12px;padding:9px 11px}.choice-setting select{margin:7px 0 0}.touch-keyboard{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.letter-key{min-height:48px}}
.spell-build{display:grid;justify-items:center;gap:12px;padding:18px;border:1px solid #e6e4e1;border-radius:18px;background:#fff;margin:7px 0 14px}
.spell-mode .spell-picture{padding-bottom:12px}.spell-mode .spell-picture .spell-audio{margin-top:2px}.spell-slots{display:flex;justify-content:center;gap:10px;min-height:62px;padding:10px 16px;border-radius:14px;background:#f7f7f7;min-width:min(100%,300px)}
.spell-slot{display:grid;place-items:center;width:43px;height:43px;border-bottom:3px solid #cbd2dd;color:#18253a;font:900 26px/1 Nunito,sans-serif}.spell-slot.filled{border-color:#5db885;color:#28754d}.spell-slot.current{border-color:#397cf3;color:#397cf3;background:#edf3ff;border-radius:8px 8px 0 0}
.spell-build .spell-choices{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.spell-build .spell-success{width:100%;max-width:390px}.spell-build .spell-question{margin:0 0 2px}
.spell-sound-guide{display:grid;justify-items:center;gap:7px;width:min(100%,390px);padding:13px 16px;border-radius:15px;background:#f5f8ff;color:#53627a;text-align:center;font:700 13px Nunito,sans-serif}.spell-sound-guide strong{color:#17243a;font:900 32px/1.1 Nunito,sans-serif}.spell-sound-audio{min-height:42px;padding:8px 16px;border:1px solid #dfe4ed;border-radius:12px;background:#fff;color:#26344d;font:800 14px Nunito,sans-serif}.spell-sound-audio:hover{border-color:#9bb8f5;background:#fafdff}
@media(max-width:620px){.spell-build{gap:10px;padding:14px 12px;border-radius:16px}.spell-slots{gap:7px;min-height:56px;padding:8px 12px}.spell-slot{width:38px;height:39px;font-size:23px}.spell-build .spell-choices{gap:9px}}

/* Keep spelling practice comfortable on narrow phones and in landscape. */
@media(max-width:620px){
 .spell-shell{width:100%;padding:16px 13px 18px;border-radius:16px}.spell-top{align-items:center}.spell-top h1{font-size:clamp(17px,5vw,21px);line-height:1.3}.spell-score{white-space:nowrap}.spell-audio,.spell-sound,.spell-sound-audio,.spell-next,.spell-restart{min-height:46px}.spell-wordbox>strong{gap:5px;max-width:100%;flex-wrap:wrap;justify-content:center}.spell-wordbox button{min-width:40px;min-height:44px;padding:4px}.spell-picture{padding-inline:4px}.spell-question{line-height:1.4}.spell-build{width:100%;min-width:0}.spell-slots{min-width:0;max-width:100%;flex-wrap:wrap}.spell-slot{flex:0 0 38px}.spell-sound-guide{width:100%;padding-inline:11px}.letter-actions button,.keyboard-actions button,.letter-key{touch-action:manipulation}
 .spell-mode .main{width:100%;max-width:525px;padding:5px 10px calc(12px + env(safe-area-inset-bottom))}.spell-mode .spell-shell{min-height:calc(100vh - 10px);min-height:calc(100svh - 10px);padding:16px 13px 14px;border-radius:15px}.spell-mode .spell-top{margin-bottom:8px}.spell-mode .spell-picture{padding:5px 5px 10px}.spell-mode .spell-emoji{font-size:clamp(56px,19vw,76px)}.spell-mode .spell-picture>strong{font-size:21px}.spell-mode .spell-audio{margin-top:4px;padding-inline:14px}.spell-mode .spell-soundbox{min-height:120px;margin:5px 0 14px;padding:12px}.spell-mode .spell-question{margin-bottom:14px}.spell-mode .spell-wordbox{min-height:78px;margin-bottom:11px;padding:9px}.spell-mode .spell-success{margin:10px 0;padding:10px}.spell-mode .spell-choices{gap:8px!important}.spell-mode .spell-choice{width:52px;height:52px;min-height:52px}
}
@media(max-width:360px){.spell-mode .main{padding-inline:6px}.spell-mode .spell-shell{padding-inline:10px}.spell-mode .spell-picture>strong{font-size:19px}.spell-mode .spell-wordbox>strong{gap:2px}.spell-mode .spell-wordbox button{min-width:36px}.spell-mode .spell-choice{width:48px;height:48px;min-height:48px}.spell-mode .spell-soundbox{min-height:108px}}
@media(max-height:540px) and (max-width:900px){.spell-mode .main{padding-block:4px}.spell-mode .spell-shell{min-height:100vh;min-height:100svh;padding-block:10px}.spell-mode .spell-emoji{font-size:54px}.spell-mode .spell-picture{padding-block:4px}.spell-mode .spell-soundbox{min-height:90px;margin-block:4px 9px}.spell-mode .spell-question{margin-bottom:8px}.spell-mode .spell-wordbox{min-height:62px;margin-bottom:7px}.spell-mode .spell-success{margin:7px 0;padding:8px}}