:root{--navy:#1f3a5f;--teal:#2eb4a7;--mint:#7bcba4;--yellow:#f7c948;--coral:#ff8a7a;--lavender:#a89de3;--paper:#fffdf7;--ink:#263c59;--muted:#546a77;--line:#d8e9e7;font-family:ui-rounded,"Trebuchet MS",Verdana,sans-serif;color:var(--ink);background:#eff7f6;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}button:disabled{opacity:.55;cursor:not-allowed}[hidden]{display:none!important}
.app-shell{max-width:1130px;min-height:100vh;margin:auto;background:var(--paper);box-shadow:0 0 46px #173b4a14}.topbar{height:92px;display:flex;align-items:center;gap:20px;padding:13px clamp(20px,4vw,48px);border-top:8px solid var(--teal);border-bottom:1px solid var(--line)}.brand{width:132px;height:67px;object-fit:contain;object-position:left}.top-title{display:flex;flex-direction:column;gap:4px}.top-title span,.eyebrow,.adult-label{font-size:.78rem;font-weight:800;letter-spacing:.11em;color:#178a85}.top-title strong{font-size:1.27rem;color:var(--navy)}.icon-button{margin-left:auto;background:#e5f5f1;border:0;border-radius:14px;width:46px;height:46px;font-size:1.25rem}
main{padding:24px clamp(18px,4vw,48px) 36px}.guide{display:grid;grid-template-columns:126px 1fr;align-items:center;gap:14px;background:#e9f8f4;border:2px solid #cfebe5;border-radius:28px;padding:12px 22px;min-height:170px;overflow:hidden}.mascot{width:119px;height:144px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 5px #1f3a5f22)}.guide-copy{padding:7px 0}.guide-copy .eyebrow{margin:0 0 5px}.guide-message{font-size:1.13rem;line-height:1.45;font-weight:750;color:var(--navy);max-width:650px;margin:0 0 12px}.guide-actions{display:flex;flex-wrap:wrap;gap:9px}.small-button,.outline-button,.primary-button,.text-button,.choice,.mic-button{border-radius:13px;min-height:43px;font-weight:800;transition:transform .15s,background .15s}.small-button:hover,.outline-button:hover,.primary-button:hover,.mode-button:hover,.choice:hover{transform:translateY(-1px)}.small-button{border:0;background:var(--navy);color:white;padding:9px 16px}.small-button.quiet{background:transparent;color:var(--navy);border:1.5px solid #9acbc6}.mode-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.mode-button{border:2px solid #d7e9e6;background:white;border-radius:19px;min-height:75px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:1.04rem;font-weight:800;color:var(--navy)}.mode-button.active{background:var(--navy);color:white;border-color:var(--navy);box-shadow:0 7px 0 #b7dbd7}.mode-icon{font-size:1.45rem}
.mission-panel{border:1px solid var(--line);border-radius:26px;padding:28px;background:white;box-shadow:0 10px 30px #1f3a5f0a}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading .eyebrow{margin:0 0 4px}h1,h2,p{margin-top:0}h1{font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.15;color:var(--navy);margin-bottom:4px}h2{color:var(--navy)}.step-pill{background:#ffefd2;border-radius:999px;padding:9px 14px;color:var(--navy);font-weight:800;white-space:nowrap;font-size:.86rem}.panel-intro{color:var(--muted);line-height:1.55;margin:10px 0 20px;font-size:1rem}.source-switch{display:flex;gap:8px;margin-bottom:18px}.choice{border:2px solid var(--line);background:#f8fbfa;color:var(--navy);padding:9px 15px}.choice.active{border-color:var(--teal);background:#e4f6f1}.school-setup{border:2px dashed #a7d7d0;background:#f4fbf9;border-radius:20px;padding:19px;margin-bottom:18px}.school-setup .adult-label{margin-bottom:12px}.school-setup label,.math-card label{display:block;font-weight:800;color:var(--navy);margin:12px 0 7px}.school-setup textarea,.school-setup input,.response-row textarea,.writing-step textarea,.math-answer-row input{border:1.5px solid #b8d5d1;border-radius:12px;background:white;padding:12px 14px;color:var(--navy);width:100%;font-size:1rem;line-height:1.5}.form-status{margin:8px 0 0;color:#225e62;font-size:.9rem}.school-setup .primary-button{margin-top:12px}
.reading-card{border-radius:22px;background:#fff9e9;border:2px solid #f6e6bb;padding:22px 24px}.reading-top{display:flex;align-items:center;gap:9px;color:var(--navy);font-weight:850;font-size:.88rem}.colored-dot{width:13px;height:13px;border-radius:50%;background:var(--coral)}.reading-progress{margin-left:auto;color:#138c85;letter-spacing:.16em}.reading-text{font-size:clamp(1.13rem,2vw,1.38rem);line-height:1.7;max-width:760px;margin:22px 0;color:#203d58}.outline-button{border:2px solid var(--teal);background:white;color:var(--navy);padding:9px 16px}.question-card{margin-top:16px;background:#f0f6fb;border-radius:22px;padding:22px 24px}.question-card .eyebrow{margin-bottom:6px}.question-card h2{font-size:1.17rem;line-height:1.4;margin-bottom:13px}.hint{background:#fff3d8;border-left:5px solid var(--yellow);padding:12px 14px;border-radius:8px;font-weight:700;line-height:1.5}.response-row{display:flex;align-items:stretch;gap:9px}.response-row textarea{resize:vertical;min-height:72px}.mic-button{width:56px;border:0;background:#dbf1ec;font-size:1.3rem}.action-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:15px}.text-button{border:0;background:transparent;color:#216b70;text-decoration:underline;padding:8px 4px}.primary-button{border:0;background:var(--navy);color:white;padding:10px 18px;box-shadow:0 4px 0 #102844}.primary-button:hover{background:#284e7b}
.writing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.writing-step{display:flex;flex-direction:column;background:#fff7ec;border:1.5px solid #f1dfc5;border-radius:20px;padding:18px;min-width:0}.writing-step:nth-child(2){background:#eef8f6;border-color:#cde9e2}.writing-step:nth-child(3){background:#f4f1fb;border-color:#e0d8f1}.writing-step span{color:var(--navy);font-weight:850;font-size:1.05rem}.writing-step b{display:inline-grid;place-items:center;background:var(--coral);border-radius:50%;width:28px;height:28px;margin-right:6px}.writing-step:nth-child(2) b{background:var(--teal)}.writing-step:nth-child(3) b{background:var(--lavender)}.writing-step small{color:var(--muted);font-size:.88rem;min-height:45px;line-height:1.45;margin:10px 0}.writing-step textarea{resize:vertical;min-height:104px}.dictate{align-self:flex-start;margin-top:10px;background:transparent;border:0;color:#216b70;font-size:.89rem;font-weight:800;padding:7px 0}.writing-actions{justify-content:flex-start}.story-preview{background:#eef8f6;border-radius:20px;padding:22px;margin-top:20px}.story-preview #story-body{white-space:pre-wrap;font-size:1.12rem;line-height:1.7}.last-word{background:#fff4da;border-radius:12px;padding:13px 16px;margin-top:15px;line-height:1.5}
.math-card{background:#fff8e9;border:2px solid #f4e3b6;border-radius:22px;padding:24px;max-width:720px}.math-card h2{font-size:1.28rem;line-height:1.6}.math-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.math-answer-row{display:flex;gap:9px}.math-answer-row input{max-width:200px}.math-feedback{min-height:25px;margin:16px 0 4px;font-weight:750;line-height:1.5}.math-feedback.success{color:#156e5d}.math-feedback.retry{color:#9c4e24}
.small-advances{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;background:#eaf7f2;border-radius:23px;padding:18px 23px}.small-advances h2{font-size:1.16rem;margin:2px 0 5px}.small-advances p{margin-bottom:0;color:var(--muted);line-height:1.5}.advances-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.advance-chip{background:white;border:1px solid #b9dfd5;padding:8px 10px;border-radius:100px;color:#235e60;font-size:.81rem;font-weight:750;white-space:nowrap}.privacy-note{margin:18px 4px 0;color:#596b73;font-size:.82rem;line-height:1.5}.pause-overlay{position:fixed;inset:0;background:#15375cba;display:grid;place-items:center;padding:20px;z-index:5}.pause-dialog{background:white;border-radius:28px;max-width:430px;width:100%;padding:22px 28px 30px;text-align:center;box-shadow:0 22px 70px #0f294160}.pause-mascot{height:125px;width:125px;object-fit:contain}.pause-dialog h2{margin:4px 0 8px}.pause-dialog p{line-height:1.6;color:var(--muted)}.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}
@media(max-width:740px){.topbar{height:78px;padding:9px 16px;gap:8px}.brand{width:82px;height:50px}.top-title span{font-size:.61rem}.top-title strong{font-size:1rem}.icon-button{width:40px;height:40px}.guide{grid-template-columns:76px 1fr;padding:10px;min-height:130px}.mascot{width:80px;height:108px}.guide-message{font-size:.97rem}.guide-copy .eyebrow{font-size:.63rem}.small-button{font-size:.78rem;min-height:37px;padding:7px 10px}.mode-nav{gap:7px;margin:17px 0}.mode-button{font-size:.75rem;min-height:68px;flex-direction:column;gap:2px;padding:6px}.mode-icon{font-size:1.25rem}.mission-panel{padding:18px;border-radius:21px}.panel-heading{align-items:flex-start}.step-pill{font-size:.7rem;padding:8px}.reading-card,.question-card{padding:18px}.writing-grid{grid-template-columns:1fr}.writing-step small{min-height:0}.math-answer-row{flex-wrap:wrap}.small-advances{align-items:flex-start;flex-direction:column}.advances-list{justify-content:flex-start}}
@media(max-width:380px){.top-title span{display:none}.brand{width:75px}.guide{grid-template-columns:64px 1fr}.mascot{width:65px}.guide-actions{gap:4px}.mode-button{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.voice-settings{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px}
.voice-settings label{font-size:.82rem;font-weight:800;color:var(--navy)}
.voice-settings select{min-height:39px;max-width:min(100%,310px);border:1px solid #9acbc6;border-radius:10px;background:#fff;color:var(--navy);padding:6px 9px}
.voice-settings button{min-height:39px;border:1px solid #9acbc6;border-radius:10px;background:#fff;color:var(--navy);font-weight:750;padding:6px 12px}
.voice-note{font-size:.76rem;line-height:1.4;color:#536b71;margin:7px 0 0}
@media(max-width:740px){.voice-settings{align-items:flex-start}.voice-settings select{flex:1 1 160px;max-width:100%}.voice-settings label{flex:0 0 100%}}