:root{--ink:#20313f;--green:#287a67;--green2:#1f6455;--gold:#e4a83d;--cream:#fffaf0;--paper:#fffdf8;--line:#dbe4df;--muted:#667680;--blue:#3c74b9;--shadow:0 16px 44px rgba(31,49,63,.12)}
*{box-sizing:border-box}
body{margin:0;background:#edf2ef;color:var(--ink);font-family:"Times New Roman",Times,serif}
button,select{font:inherit}
button{cursor:pointer}
.app{min-height:100vh}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:13px;font-weight:900;font-size:21px}
.glass{width:36px;height:36px;border:6px solid var(--green);border-radius:50%;position:relative}
.glass:after{content:"";position:absolute;width:19px;height:7px;border-radius:7px;background:var(--gold);right:-16px;bottom:-8px;transform:rotate(45deg)}
.brand small{display:block;color:var(--green);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.topstats{display:flex;align-items:center;gap:10px}
.pill{border:1px solid var(--line);background:white;border-radius:999px;padding:9px 13px;font-size:13px;font-weight:800}
.coin{background:#fff4cf;border-color:#efd58f;color:#79581a}
.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 72px)}
.sidebar{padding:24px 16px;background:#f7faf8;border-right:1px solid var(--line)}
.navbtn{width:100%;border:0;background:transparent;color:#586b74;border-radius:12px;padding:13px 14px;text-align:left;font-weight:800;margin:3px 0}
.navbtn.active,.navbtn:hover{background:#dff1ea;color:var(--green2)}
.main{padding:34px;max-width:1200px;width:100%;margin:auto}
.eyebrow{color:var(--green);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:30px;border-radius:22px;background:linear-gradient(125deg,#e4f4ed,#fff7e7);border:1px solid #c7e2d8;box-shadow:var(--shadow)}
h1,h2,h3,p{margin-top:0}
.hero h1{font-size:38px;margin-bottom:8px}
.hero p{color:var(--muted);max-width:590px;line-height:1.55}
.avatar{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:white;border:4px solid var(--gold);font-size:43px;box-shadow:0 8px 20px rgba(31,49,63,.12)}
.primary,.secondary{border-radius:12px;min-height:44px;padding:0 18px;font-weight:900}
.primary{border:1px solid var(--green);background:var(--green);color:white;box-shadow:0 7px 16px rgba(40,122,103,.22)}
.primary:hover{background:var(--green2)}
.secondary{border:1px solid var(--line);background:white;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.card{background:white;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(31,49,63,.06)}
.casecard{position:relative;overflow:hidden}
.casecard:before{content:"CASE";position:absolute;right:-18px;top:12px;transform:rotate(35deg);background:var(--gold);color:white;padding:4px 25px;font-size:9px;font-weight:900}
.pattern{font-size:34px;font-weight:900;color:var(--green)}
.progress{height:9px;background:#e5ece9;border-radius:99px;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#57a994);border-radius:inherit}
.lessonList{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.lessonChip{border:1px solid var(--line);border-radius:11px;background:white;padding:11px;color:var(--ink);font-weight:900}
.lessonChip.current{background:var(--green);color:white;border-color:var(--green)}
.lessonShell{max-width:980px;margin:auto}
.lessonHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.screenCard{min-height:600px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:var(--shadow)}
.screenCard h1{font-size:38px}
.screenTag{color:var(--gold);font-weight:900;letter-spacing:.14em;font-size:11px}
.wordRow,.choiceRow{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin:28px 0}
.word{min-width:145px;padding:24px;border:2px solid var(--line);border-radius:17px;background:white;font-size:38px;font-weight:900}
.word mark{background:#dcecff;color:#285f9c;border-radius:8px;padding:4px}
.fluencyWord{appearance:none;color:var(--ink);transition:border-color .15s ease,background .15s ease,transform .15s ease}
.fluencyWord:hover,.fluencyWord:focus-visible{border-color:var(--green);background:#e8f6f1;outline:3px solid rgba(40,122,103,.2);outline-offset:2px}
.fluencyWord.active{border-color:var(--gold);background:#fff4cf;box-shadow:0 10px 25px rgba(180,125,26,.24);transform:scale(1.08)}
.fluencyWord:active{transform:translateY(1px)}
.choice{border:2px solid var(--line);border-radius:15px;background:white;padding:18px 24px;font-size:25px;font-weight:900}
.choice:hover,.choice.selected{border-color:var(--green);background:#e8f6f1}
.choice:disabled{cursor:wait;opacity:.55}
.choice:disabled:hover{border-color:var(--line);background:white}
.primary:disabled,.secondary:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}
.primary:disabled:hover{background:var(--green)}
.clue{border-left:5px solid var(--gold);background:#fff6e5;border-radius:10px;padding:14px 18px;text-align:left;max-width:700px;line-height:1.55}
.sentenceList{width:min(760px,100%)}
.sentence{width:100%;text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);font-size:20px;line-height:1.8}
.sentenceWord,.storyWord{border-radius:6px;padding:2px 3px;margin:0 -3px;transition:background .12s ease,color .12s ease,box-shadow .12s ease}
.sentenceWord.active,.storyWord.active{background:#ffe58f;color:#174d43;box-shadow:0 0 0 3px rgba(228,168,61,.28);font-weight:900}
.screenEightStatus{min-height:26px;margin:14px 0 0;color:var(--green2);font-weight:900}
.screenNineStatus{min-height:26px;margin:14px 0 0;color:var(--green2);font-weight:900}
.spellingInstruction{width:min(720px,100%);min-height:68px;display:flex;align-items:center;justify-content:center;margin:0;padding:12px 18px;border-radius:12px;background:#edf7f3;color:var(--green2);font-size:18px;font-weight:900;line-height:1.4}
.spellingLines{width:min(680px,100%);margin:22px auto 14px;padding-left:44px;text-align:left}
.spellingLine{min-height:60px;padding:11px 14px;border-bottom:3px solid var(--line);border-radius:10px 10px 0 0;background:white;font-size:30px;font-weight:900;line-height:1.2;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.spellingLine + .spellingLine{margin-top:7px}
.spellingLine::marker{color:var(--green);font-size:21px;font-weight:900}
.spellingLine.active{border-color:var(--gold);background:#fff8e8;box-shadow:0 5px 14px rgba(180,125,26,.12)}
.spellingLine.complete{border-color:var(--green);background:#f5fbf8}
.spellingWord{display:block;min-height:1.2em;letter-spacing:.14em}
.spellingHint{margin:0;color:var(--muted);font-weight:800;line-height:1.4}
.spellingPractice .footerActions{width:100%;justify-content:center}
.screenElevenInstruction{margin-bottom:8px;color:var(--green2);font-size:19px;font-weight:900}
.screenElevenPattern{min-height:118px;display:flex;align-items:center;justify-content:center;margin:0;color:var(--blue);font-size:clamp(58px,10vw,92px);font-weight:900;letter-spacing:.08em;opacity:0;visibility:hidden;transform:scale(.82)}
.screenElevenPattern.active{visibility:visible;animation:casePatternFlash .42s ease-in-out infinite alternate}
.screenElevenPattern.revealed{opacity:1;visibility:visible;transform:scale(1);filter:none}
.patternHunt .choiceRow{margin:12px 0 16px}
.patternHunt .choiceRow+p{margin-bottom:0}
.story{max-width:700px;text-align:left;font-size:20px;line-height:1.8;background:white;border:1px solid var(--line);border-radius:16px;padding:26px}
.story p:last-child{margin-bottom:0}
.footerActions{width:100%;margin-top:clamp(18px,3vh,28px);display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding-top:0}
.startCasePrompt{margin-top:24px;align-items:center;justify-content:center;gap:14px}
.startCaseArrow{color:var(--gold);font-size:38px;font-weight:900;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(122,83,18,.2));animation:pointToStart .7s ease-in-out infinite alternate}
.startCaseButton{min-width:180px;font-size:18px}
.shopGrid,.avatarGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.shopItem,.avatarItem{border:2px solid var(--line);background:white;border-radius:17px;padding:18px;text-align:center}
.avatarItem{font-size:38px}
.avatarItem.selected{border-color:var(--green);background:#e4f4ed}
.shopItem .icon{font-size:38px}
.price{color:#79581a;font-weight:900}
.badge{display:inline-flex;align-items:center;gap:8px;background:#eef5ff;color:#315b8d;border-radius:999px;padding:9px 13px;font-weight:900}
.celebrate{background:radial-gradient(circle at 50% 15%,#fff0b9,transparent 38%),var(--paper)}
.bigReward{font-size:64px}
.toast{position:fixed;right:20px;bottom:20px;padding:13px 18px;border-radius:12px;background:var(--ink);color:white;font-weight:800;z-index:50}
.hidden{display:none!important}
.screenTwoQuestion{font-size:20px;color:var(--muted);margin-bottom:0}
.flashWordRow{margin:22px 0}
.flashWord{opacity:.24;transform:scale(.88);transition:opacity .25s ease,transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.flashWord.seen{opacity:.62}
.flashWord.active{opacity:1;transform:scale(1.1);border-color:var(--gold);background:#fff4cf;box-shadow:0 10px 25px rgba(180,125,26,.24);animation:wordFlash .65s ease-in-out}
.hearWordsButton{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.humanEarIcon{font-size:25px;line-height:1;filter:drop-shadow(0 2px 2px rgba(31,49,63,.14))}
.challengeWordRow{align-items:stretch}
.rimeReveal,.keepReading,.fluencyPractice,.sentencePractice,.storyPractice,.challengeWords,.masteryCheck,.caseCelebration{position:relative;overflow:hidden}
.rimeReveal>:not(.confettiLayer),.keepReading>:not(.confettiLayer),.fluencyPractice>:not(.confettiLayer),.sentencePractice>:not(.confettiLayer),.storyPractice>:not(.confettiLayer),.challengeWords>:not(.confettiLayer),.masteryCheck>:not(.confettiLayer),.caseCelebration>:not(.confettiLayer){position:relative;z-index:1}
.rimeReveal h1 mark{white-space:nowrap}
.rimeReveal .rimeWord mark{background:#ffe58f;color:#174d43;border:2px solid #e4a83d;box-shadow:0 0 0 5px rgba(228,168,61,.14);animation:rimeGlow 1s ease-in-out 2}
.rimeSequenceStatus{min-height:46px;display:flex;align-items:center;justify-content:center;margin:0;padding:10px 16px;border-radius:12px;background:#edf7f3;color:var(--green2);font-weight:900}
.screenFourQuestion{min-height:50px;max-width:640px;display:flex;align-items:center;justify-content:center;margin:0;padding:10px 16px;border-radius:12px;background:#edf7f3;color:var(--green2);font-size:20px;font-weight:900}
.screenFourWord{transition:none}
.screenFourWord.active{transform:scale(1.1);border-color:var(--gold);background:#fff4cf;box-shadow:0 10px 25px rgba(180,125,26,.24);animation:wordFlash .65s ease-in-out infinite}
.keepReading.celebrating .choiceRow{pointer-events:none}
.challengeWords.celebrating .wordRow{pointer-events:none}
.masteryCheck.celebrating .word{pointer-events:none}
.caseCelebration.collecting .footerActions{pointer-events:none}
.caseCelebration .choiceRow{margin-bottom:0}
.fluencyPractice.celebrating .wordRow{pointer-events:none}
.sentencePractice.celebrating .sentenceList{pointer-events:none}
.storyPractice.celebrating .story{pointer-events:none}
.screenSevenStatus{min-height:26px;margin:0;color:var(--green2);font-weight:900}
.screenThirteenStatus{min-height:50px;max-width:720px;margin:0;padding:10px 16px;border-radius:12px;background:#edf7f3;color:var(--green2);font-weight:900}
.screenFourteenStatus{max-width:720px;margin:0;padding:12px 18px;border-radius:12px;background:#fff6d8;color:#684d17;font-size:18px;font-weight:900;line-height:1.5}
.buildWordBox{display:inline-flex;align-items:center;justify-content:center;gap:0;min-width:210px;margin:22px 0 16px;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.buildOnset:empty{display:inline-block;min-width:1ch;min-height:1em;margin-right:2px;border-bottom:3px solid currentColor}
.buildWordBox.built{border-color:var(--green);background:#e8f6f1;box-shadow:0 8px 20px rgba(40,122,103,.16)}
.buildWordBox.built .buildOnset{color:var(--green2)}
.buildWordBox.built .buildOnset:empty{display:none}
.buildInstruction{min-height:50px;max-width:680px;display:flex;align-items:center;justify-content:center;margin:0;padding:10px 16px;border-radius:12px;background:#edf7f3;color:var(--green2);font-size:20px;font-weight:900}
.buildChoice.selected{border-color:var(--green);background:#dff1ea;box-shadow:0 0 0 4px rgba(40,122,103,.12)}
.revealContinuePrompt{align-items:center;justify-content:center;gap:14px}
.revealContinueArrow{width:46px;color:var(--gold);font-size:40px;font-weight:900;line-height:1;opacity:0;visibility:hidden;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(122,83,18,.22))}
.revealContinuePrompt.ready .revealContinueArrow{visibility:visible;animation:continuePoint .65s ease-in-out infinite alternate,continueFlash 1s ease-in-out infinite}
.revealContinuePrompt.fallback .revealContinueArrow{animation:none;opacity:1;transform:translateX(3px)}
.confettiLayer{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.confettiPiece{position:absolute;top:-24px;left:var(--x);width:10px;height:16px;border-radius:2px;background:var(--confetti);opacity:0}
.confettiPiece:nth-child(3n){border-radius:50%}
.confettiPiece:nth-child(4n){height:9px;width:15px}
.confettiLayer.active .confettiPiece{animation:confettiFall var(--duration) cubic-bezier(.2,.72,.35,1) var(--delay) both}
@keyframes pointToStart{from{transform:translateX(-9px) scale(.96)}to{transform:translateX(5px) scale(1.04)}}
@keyframes wordFlash{0%{filter:brightness(.9)}48%{filter:brightness(1.25)}100%{filter:brightness(1)}}
@keyframes rimeGlow{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.18);transform:scale(1.08)}}
@keyframes continuePoint{from{transform:translateX(-8px) scale(.96)}to{transform:translateX(5px) scale(1.05)}}
@keyframes continueFlash{0%,100%{opacity:1;filter:drop-shadow(0 4px 5px rgba(122,83,18,.22))}50%{opacity:.28;filter:drop-shadow(0 4px 10px rgba(228,168,61,.5))}}
@keyframes casePatternFlash{from{opacity:.25;transform:scale(.9);filter:brightness(.85)}to{opacity:1;transform:scale(1.08);filter:brightness(1.2)}}
@keyframes confettiFall{0%{opacity:0;transform:translate3d(0,-20px,0) rotate(0)}10%{opacity:1}100%{opacity:1;transform:translate3d(var(--drift),680px,0) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){
  .startCaseArrow,.flashWord.active,.screenFourWord.active,.rimeReveal .rimeWord mark,.revealContinuePrompt.ready .revealContinueArrow,.confettiLayer.active .confettiPiece{animation:none}
  .flashWord,.screenFourWord,.fluencyWord{transition:none}
  .sentenceWord,.storyWord{transition:none}
  .spellingLine{transition:none}
  .screenElevenPattern.active{animation:none;opacity:1;transform:none}
  .flashWord.active,.screenFourWord.active,.fluencyWord.active{transform:scale(1.03)}
  .revealContinuePrompt.ready .revealContinueArrow{opacity:1;visibility:visible;transform:none}
  .confettiLayer.active .confettiPiece{top:12%;opacity:.85;transform:none}
}
@media(max-width:850px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:18px}
  .grid{grid-template-columns:1fr}
  .lessonList{grid-template-columns:repeat(4,1fr)}
  .shopGrid,.avatarGrid{grid-template-columns:repeat(2,1fr)}
  .screenCard{padding:24px 16px;min-height:calc(100vh - 125px)}
  .topbar{padding:0 14px}
  .topstats .pill:not(.coin){display:none}
  .hero{align-items:flex-start}
  .hero h1{font-size:31px}
  .word{min-width:95px;padding:18px;font-size:30px}
  .spellingInstruction{min-height:76px;font-size:16px}
  .spellingLines{padding-left:36px}
  .spellingLine{min-height:54px;padding:9px 11px;font-size:27px}
}
@media(max-width:380px){
  .lessonHead .secondary{padding:0 10px}
  .lessonHead .pill{padding:9px 8px;font-size:12px}
}