:root{--ink:#080a40;--muted:#4e597b;--purple:#10134b;--purple-dark:#272b69;--lavender:#e7f7ff;--pink:#ff3693;--paper:#fff;--line:#c9e8f9;--yellow:#ffe16b;--mint:#dff6ff}
body{background-color:#fffaf1;background-image:radial-gradient(#bce5fa66 .8px,transparent .8px)}button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#f52c91}.hub-return{background:#ffe16b;color:#080a40;font-weight:700}.topbar{border-color:#b8e6fb}.brand-mark{background:#ffdc56;color:#080a40}.brand-mark>span{color:#ff3693}.brand small{color:#4e597b}.help-button{background:white;border-color:#95d8f8;color:#263264}.help-button>span{border-color:#263264}.age-tag,.age-tag b{color:#233269}.age-tag b{background:#ffe16b}
.eyebrow{color:#af1767}.eyebrow>span:first-child:not(.title-doodle){background:#ff3693}.welcome h1{color:#080a40}.welcome h1>span{color:#f52c91;-webkit-text-stroke:2px white;paint-order:stroke fill;text-shadow:0 2px 0 #ffc3de}.title-doodle{background:#a0e0ff}.welcome p{color:#4c597b}
.letter-sidebar,.workbook{border:2px solid #a0e0ff;background:white;box-shadow:0 4px 0 #d5f1ff}.section-dot{background:#ff3693}.little-label{background:#fff2ae;color:#604908}.sidebar-description{color:#4e597b}.letter-tile{border-color:#c1e8fa;background:#e7f7ff;color:#080a40}.letter-tile:nth-child(2n){background:#fff3bb}.letter-tile:nth-child(3n){background:#ffe7f2}.letter-tile:hover{background:#ffe1ef;border-color:#ff3693}.letter-tile.selected{background:#ffdfed;border:2px solid #ff3693;color:#080a40;box-shadow:0 3px 0 #ffa5ce}.tile-name{color:#4b5679}.tile-check{background:#0f79ad}.progress-card{background:#fff3b9;border-color:#ffe16b}.progress-heading,.progress-card p{color:#34436f}.progress-heading>.icon{fill:#ffbd23;stroke:#d88f0b}.progress-flower{color:#ddcf95}.progress-flower.earned{color:#ff3693}.progress-track{background:#eedb8e}.progress-track>div{background:#ff3693}.progress-card small,.sidebar-note{color:#697249}.sidebar-note>span{color:#ff3693}
.steps{background:#e6f6ff;border-color:#b8e4fa}.step{color:#080a40}.step.active{background:white;border-color:#7bd3fa;box-shadow:0 2px 0 #b2e6ff}.step small{color:#4f5d83}.step>.icon{color:#5588ab}.step.active>.icon{color:#e91d82}.step-number{background:#caeafc;color:#36547c}.step.active .step-number{background:#ffe16b;color:#080a40}.step.is-past .step-number{background:#ffc9df;color:#9b1456}.lesson-heading h2{color:#080a40}.lesson-heading .eyebrow{color:#ba1b6c}.lesson-counter{border-color:#91d8f8;color:#344e7c}
.letter-display{border-color:#98dbfb;background:#e2f5ff}.letter-display:before,.letter-display:after{background:#b9e9ff}.large-letter{color:#080a40}.letter-name{color:#173263}.display-caption{color:#4e6482}.letter-spark{color:#ff3693}.word-display{background:#fff3b6;border-color:#ffe16b}.word-tag{color:#816119}.example-word{color:#080a40}.example-word .highlight{color:#d40d70}.letter-fact{border-color:#ddbf65;color:#6b5b27}
.lesson-bottom{border-color:#bbdef3}.lesson-bottom>p{color:#4c5e83}.lesson-bottom>p>span{color:#efab13}.primary-button{background:#10134b;color:white;border:2px solid white;font-weight:700;box-shadow:0 4px 0 #ff8cbe}.primary-button:hover:not(:disabled){background:#272b69}.page-footer{color:#526689}.footer-flower{color:#ff3693}
.writing-panel{border-color:#91d8f8}.canvas-toolbar{background:#e7f7ff;border-color:#bce7fb}.pen-colors>span,.canvas-actions>button{color:#35527a}.writing-surface{background:white}#guide-svg .rule-line{stroke:#b7e4fa}#guide-svg .baseline{stroke:#fb7ab0}.guide-stroke{stroke:#c9eafb}.guide-dash{stroke:#5cadd5}.guide-stroke.faint{stroke:#e0f2fc}.demo-stroke{stroke:#10134b}.start-circle{fill:#ffce3d;stroke:white}.start-number{fill:#080a40}.canvas-hint{color:#56718d}.canvas-footer{background:#f5fcff;border-color:#bee7fa}.text-button{color:#b80f65}.text-button:hover{color:#8f0b50}.guide-toggle,.canvas-footer>p{color:#42617f}.toggle-switch{background:#bfdcea}.guide-toggle input:checked+.toggle-switch{background:#f52c91}.guide-toggle input:focus-visible+.toggle-switch{outline-color:#f52c91}
dialog{background:#fffdf7;border:2px solid #a0e0ff;color:#080a40}dialog p,dialog li{color:#4f5e80}.close-dialog{background:#ffe2ef;color:#a70f5c}.dialog-kicker{color:#b81568}.helper-note{background:#e4f6ff}.privacy-note{color:#586d84!important}.celebration-stars,.celebration-stars>span{color:#ffb315}.completed-letter{background:#ffe16b;color:#080a40}
@media(max-width:730px){.progress-card{background:none;border-color:#b9e5fa}.progress-card>p,.progress-heading{color:#35527a}.progress-track{background:#d4edfa}}
.letter-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.letter-tile{min-height:62px}.letter-tile .tile-letter{font-size:28px}.tile-name{font-size:9px}.progress-flowers{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.progress-flower{font-size:18px;text-align:center}.letter-picker>summary{display:none}.demo-stroke{stroke-width:13}.print-sheet-note{display:flex;gap:15px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:23px;font-size:11px}.print-sheet-note a{color:#b81568;border-bottom:1px solid #f52c91;padding:6px 0}.print-sheet-note span{color:#4c5e83;font-size:10px}
@media(max-width:730px){.letter-picker>summary{display:flex;align-items:center;gap:11px;list-style:none;background:#fff2b2;border:1px solid #ffcf38;border-radius:11px;margin-top:12px;padding:7px 12px;font-size:13px;cursor:pointer;min-height:53px}.letter-picker>summary::-webkit-details-marker{display:none}.letter-picker>summary:focus-visible{outline:3px solid #f52c91;outline-offset:3px}.letter-picker>summary>span{font-size:29px;line-height:1.2;font-weight:700}.letter-picker>summary>small{margin-right:auto;color:#5c5570;font-size:10px}.letter-picker>summary>small:after{content:'⌄';padding-right:8px}.letter-grid{grid-template-columns:repeat(7,minmax(0,1fr));margin-top:10px;gap:5px}.letter-tile{min-height:60px}.letter-tile .tile-letter{font-size:25px}.tile-name{font-size:8px}.progress-flowers{display:none}.progress-heading{margin-left:auto}.progress-card{gap:8px}.print-sheet-note{font-size:10px;gap:4px;margin-top:18px;flex-direction:column}.print-sheet-note span{font-size:9px}}
.download-notice{display:flex;flex-direction:column;gap:6px;flex-basis:100%;font-size:11px;line-height:1.9;color:#40557c;padding:11px 12px;border:1px solid #c5e3f4;border-radius:11px;background:#f1faff;max-width:100%;text-align:start}.download-open{color:#a51560;text-decoration:underline;font-weight:700}a[aria-busy=true]{opacity:.7;cursor:progress}