:root{--p-bg:oklch(96.5% .012 82);--p-surface:oklch(98.8% .006 78);--p-ink:oklch(22% .018 62);--p-ink-2:oklch(43% .018 65);--p-ink-3:oklch(57% .012 70);--p-clay:oklch(60% .09 42);--p-clay-light:oklch(93% .025 75);--p-slate:oklch(50% .1 248);--p-slate-light:oklch(93% .02 240);--p-sage:oklch(52% .08 158);--p-sage-light:oklch(94% .02 155);--p-rose:oklch(57% .09 18);--p-rose-light:oklch(94% .02 20);--p-border:oklch(88% .012 75);--color-bg-app:var(--p-bg);--color-bg-surface:var(--p-surface);--color-bg-attention:var(--p-clay-light);--color-bg-active:var(--p-slate-light);--color-bg-mastered:var(--p-sage-light);--color-bg-heart:var(--p-rose-light);--color-text-primary:var(--p-ink);--color-text-secondary:var(--p-ink-2);--color-text-tertiary:var(--p-ink-3);--color-text-on-accent:var(--p-surface);--color-accent-attention:var(--p-clay);--color-accent-active:var(--p-slate);--color-accent-mastered:var(--p-sage);--color-accent-heart:var(--p-rose);--color-border-default:var(--p-border);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-pill:999px;--font-family:"Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;--text-display-size:48px;--text-display-weight:600;--text-display-lh:1.1;--text-heading-size:32px;--text-heading-weight:500;--text-heading-lh:1.2;--text-prompt-size:22px;--text-prompt-weight:500;--text-prompt-lh:1.45;--text-body-l-size:18px;--text-body-l-weight:400;--text-body-l-lh:1.4;--text-body-size:16px;--text-body-weight:400;--text-body-lh:1.5;--text-label-size:13px;--text-label-weight:400;--text-label-lh:1.5;--text-caption-size:12px;--text-caption-weight:400;--text-caption-lh:1.4}.text-display{font:var(--text-display-weight) var(--text-display-size)/var(--text-display-lh) var(--font-family)}.text-heading{font:var(--text-heading-weight) var(--text-heading-size)/var(--text-heading-lh) var(--font-family)}.text-prompt{font:var(--text-prompt-weight) var(--text-prompt-size)/var(--text-prompt-lh) var(--font-family)}.text-body-l{font:var(--text-body-l-weight) var(--text-body-l-size)/var(--text-body-l-lh) var(--font-family)}.text-body{font:var(--text-body-weight) var(--text-body-size)/var(--text-body-lh) var(--font-family)}.text-label{font:var(--text-label-weight) var(--text-label-size)/var(--text-label-lh) var(--font-family)}.text-caption{font:var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-lh) var(--font-family)}:root{font-family:var(--font-family);font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--color-text-primary);background:var(--color-bg-app);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}h1,h2,h3{font-family:var(--font-family);color:var(--color-text-primary);margin:0 0 var(--space-md)}h1{font-size:var(--text-display-size);font-weight:var(--text-display-weight);line-height:var(--text-display-lh)}h2{font-size:var(--text-heading-size);font-weight:var(--text-heading-weight);line-height:var(--text-heading-lh)}h3{font-size:var(--text-prompt-size);font-weight:var(--text-prompt-weight);line-height:var(--text-prompt-lh)}p{margin:0}.page-shell{min-height:100vh;padding:var(--space-lg);background:var(--color-bg-app);color:var(--color-text-primary);place-items:center;display:grid}.panel{box-sizing:border-box;background:var(--color-bg-surface);width:min(760px,100%);min-width:0;padding:var(--space-xl);border-radius:28px;box-shadow:0 18px 48px #3f2f1424}.narrow-panel{width:min(480px,100%)}.hero-panel h1{font-size:clamp(2rem,7vw,4rem)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-secondary);font-weight:700}.stack{gap:18px;display:grid}label{gap:var(--space-sm);font-weight:700;display:grid}input,select,button,.primary-link{min-height:48px;font:inherit;border-radius:14px}input,select{border:2px solid var(--color-border-default);padding:0 14px}button,.primary-link{background:var(--color-text-primary);color:var(--color-text-on-accent);border:0;place-items:center;padding:0 18px;font-weight:800;text-decoration:none;display:inline-grid}.card-list{gap:12px;padding:0;list-style:none;display:grid}.card-list li{justify-content:space-between;gap:var(--space-md);border:2px solid var(--color-border-default);padding:var(--space-md);border-radius:18px;display:flex}.student-mode{background:var(--color-bg-app)}.practice-surface{gap:var(--space-md);width:min(720px,100%);display:grid}.practice-surface .phonics-card{box-sizing:border-box;width:100%}.practice-exit{min-width:44px;min-height:44px;color:var(--color-text-primary);border:2px solid var(--color-border-default);background:0 0;justify-self:end}.hero-panel>.practice-exit{margin-left:var(--space-sm)}.phonics-card{background:var(--color-bg-surface);width:min(720px,100%);padding:var(--space-xl);text-align:center;border-radius:36px;box-shadow:0 18px 48px #3f2f1424}.card-word{letter-spacing:.04em;margin:var(--space-xl) 0;font-size:clamp(5rem,28vw,11rem);font-weight:900}.card-prompt,.card-sentence{margin:var(--space-xl) 0;font-size:clamp(2rem,8vw,3.5rem);font-weight:700;line-height:1.3}.pa-role-instructions{gap:var(--space-lg);margin:var(--space-xl) 0;text-align:left;display:grid}.pa-role-instruction h2{margin:0 0 var(--space-xs);font-size:1.1rem}.pa-role-instruction p{margin:0;font-size:clamp(1.25rem,5vw,1.75rem);line-height:1.4}.guardian-answer{color:var(--color-text-muted,#6b5d43);margin-bottom:var(--space-lg);font-size:1.1rem}.heart-part{color:var(--color-accent,#b3402e);text-underline-offset:.14em;text-decoration:underline;text-decoration-thickness:.08em}.tap-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}@media (width<=640px){.tap-controls{grid-template-columns:1fr}}.tap-controls button[data-result=correct]{background:var(--color-accent-mastered);color:var(--color-text-on-accent)}.tap-controls button[data-result=incorrect]{background:var(--color-accent-active);color:var(--color-text-on-accent)}.tap-controls button[data-result=skipped]{box-sizing:border-box;color:var(--color-text-primary);border:2px solid var(--color-text-primary);background:0 0}.drill-alert{margin-top:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);background:var(--color-bg-heart);border:2px solid var(--color-accent-heart);color:var(--color-text-primary);text-align:center;font-weight:700}.drill-alert a{color:var(--color-text-primary);text-decoration:underline}.done-panel .primary-link{margin-top:var(--space-lg)}.audio-catalog .catalog-list{margin:var(--space-lg) 0;padding:0;list-style:none}.audio-catalog .catalog-row{border-bottom:1px solid var(--color-border-default);padding:10px 0}.audio-catalog .catalog-row-main button[data-play]{width:auto;margin:0 0 0 10px;padding:4px 12px;font-size:.9rem;display:inline-block}.audio-catalog .catalog-row-meta{color:var(--color-text-muted,#6b5d43);margin-top:4px;font-size:.8rem}.guardian-layout{background:var(--color-bg-app);min-height:100vh;overflow-x:hidden}.guardian-layout>.page-shell{place-items:start center;min-height:0}.guardian-header{z-index:1;background:var(--color-bg-surface);border-bottom:2px solid var(--color-border-default);position:relative}.guardian-header-inner{justify-content:space-between;align-items:center;gap:var(--space-md);box-sizing:border-box;width:min(1200px,100%);min-height:68px;padding:10px var(--space-lg);margin:0 auto;display:flex}.guardian-brand,.guardian-nav-actions a{min-height:44px;color:var(--color-text-primary);align-items:center;font-weight:700;text-decoration:none;display:inline-flex}.guardian-brand{white-space:nowrap;flex:0 auto;font-size:1.15rem;font-weight:900}.guardian-nav{min-width:0}.guardian-menu-button{min-width:44px;min-height:44px;color:var(--color-text-primary);border:2px solid var(--color-text-primary);background:0 0;padding:0 14px;display:none}.guardian-nav-actions{align-items:center;gap:12px;display:flex}.guardian-nav-actions form{margin:0}.guardian-nav-actions button{min-height:44px;color:var(--color-text-primary);border:2px solid var(--color-text-primary);background:0 0;padding:0 14px}@media (width<=700px){.guardian-header-inner{min-height:64px;padding:8px var(--space-md)}.guardian-menu-button{display:inline-grid}.guardian-nav-actions{top:100%;right:var(--space-md);width:min(18rem, calc(100vw - (2 * var(--space-md))));box-sizing:border-box;padding:var(--space-sm);border:2px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface);display:none;position:absolute;box-shadow:0 12px 30px #3f2f142e}.guardian-nav-actions.is-open{display:grid}.guardian-nav-actions a,.guardian-nav-actions button{box-sizing:border-box;width:100%}.guardian-layout>.page-shell{padding:var(--space-md)}}.muted{color:var(--color-text-secondary)}.actions{margin:var(--space-md) 0;flex-wrap:wrap;align-items:center;gap:12px;display:flex}.empty{color:var(--color-text-secondary);font-style:italic}button:disabled{opacity:.5;cursor:not-allowed}.landing-shell{padding-block:var(--space-2xl);align-items:start}.landing{gap:var(--space-lg);width:min(760px,100%);display:grid}.landing-lede{font-size:var(--text-body-l-size);line-height:var(--text-body-l-lh);color:var(--color-text-secondary);margin-block:var(--space-md) var(--space-lg);max-width:56ch}.landing-story,.landing-privacy{gap:var(--space-sm);display:grid}.landing-story p,.landing-privacy p{max-width:62ch;color:var(--color-text-secondary);line-height:var(--text-body-l-lh);margin:0}.landing-steps ol{gap:var(--space-md);margin:0;padding-left:1.4em;display:grid}.landing-steps li{font-size:var(--text-body-l-size);line-height:var(--text-body-l-lh);color:var(--color-text-secondary)}.landing-steps li strong{color:var(--color-text-primary);font-weight:500}.landing-not{background:var(--color-bg-mastered);text-align:center}.landing-not p{font-size:var(--text-body-l-size);line-height:var(--text-body-l-lh);color:var(--color-text-primary);margin:0}.landing-cta{gap:var(--space-md);padding-block:var(--space-md);place-items:center;display:grid}.landing-footer{justify-content:center;gap:var(--space-lg);padding-bottom:var(--space-md);flex-wrap:wrap;display:flex}.dev-magic-link{gap:var(--space-sm);margin-top:var(--space-md);padding:var(--space-md);border:1px dashed var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-attention);display:grid}.dev-magic-link a{font-family:ui-monospace,Consolas,monospace;font-size:var(--text-label-size);word-break:break-all;color:var(--color-accent-attention)}.diag-table{border-collapse:collapse;width:100%;margin-top:12px}.diag-table th,.diag-table td{text-align:left;border-bottom:1px solid var(--color-border-default);padding:8px 10px;font-size:.95rem}.diag-table th{background:var(--color-bg-app);font-weight:800}
