:root{--color-paper: #faf8f0;--color-surface: #fffdf8;--color-ink: #403b37;--color-muted: #797269;--color-purple: #7960a6;--color-purple-deep: #62488e;--color-focus: #493471;--space-page: 24px;--space-shell: 40px;--radius-button: 16px;color:#403b37;background:#faf8f0;font-family:Trebuchet MS,Segoe UI,Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{min-width:320px;background:var(--color-paper);color-scheme:light;overflow-x:hidden}body{min-width:320px;min-height:100vh;min-height:100dvh;margin:0;overflow-x:hidden}button{min-height:56px;padding:12px 24px;border:0;border-radius:var(--radius-button);background:var(--color-purple);color:#fff;cursor:pointer;font:inherit;font-weight:700;transition:background-color .18s ease,transform .18s ease}.screen-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}.home-screen{display:flex;flex-direction:column}.home-screen .ui-button{align-self:flex-start;margin-top:12px}.home-stars{margin:0;color:#f0a93b;font-size:1.35rem;font-weight:800}.letter-select-screen h1{margin-bottom:12px}.letter-group{margin-top:32px}.letter-group h2{margin:0 0 12px;color:var(--color-muted);font-size:1rem}.letter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.letter-card{display:flex;min-height:180px;padding:16px 12px;flex-direction:column;align-items:center;gap:7px;border:2px solid transparent;border-radius:20px;background:var(--color-surface);color:var(--color-ink);box-shadow:0 4px 12px #403b3714}.letter-card:not(:disabled):hover{border-color:var(--color-purple)}.letter-card:disabled{cursor:not-allowed;opacity:.62}.letter-card__glyph{color:var(--color-purple-deep);font-size:3.2rem;line-height:1}.letter-card__lowercase{color:var(--color-muted);font-size:1.2rem}.letter-card__status{min-height:1.2em;color:var(--color-muted);font-size:.75rem}.letter-card .star-rating{font-size:1rem}@media (max-width: 480px){.letter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.ui-button{display:inline-flex;align-items:center;justify-content:center}.ui-button--secondary{background:var(--color-surface);color:var(--color-purple-deep);box-shadow:inset 0 0 0 2px var(--color-purple)}.sound-button{display:grid;width:56px;min-height:56px;padding:0;place-items:center;background:var(--color-surface);color:var(--color-ink);font-size:1.35rem}.sound-button:hover{background:#f3edde;color:var(--color-ink)}.progress{margin:28px 0}.progress__label{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px;color:var(--color-muted);font-size:.9rem}.progress__track{height:8px;overflow:hidden;border-radius:999px;background:#e9e6dc}.progress__value{display:block;height:100%;border-radius:inherit;background:var(--color-purple);transition:width .18s ease}.star-rating{display:flex;gap:3px;color:#d8d1c3;font-size:1.45rem;line-height:1}.star-rating__star.is-filled{color:#f0c05b}button:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}button:hover{background:var(--color-purple-deep)}button:active{transform:translateY(2px)}a{color:var(--color-purple-deep);font-weight:700}a:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.route-nav{display:flex;flex-wrap:wrap;gap:20px}.app-shell{width:min(100%,720px);min-height:100vh;min-height:100dvh;margin:0 auto;padding:var(--space-shell) var(--space-page)}.eyebrow{margin:0 0 12px;color:#7960a6;font-size:12px;font-weight:800;letter-spacing:.12em}h1{max-width:560px;margin:0;font-size:clamp(2rem,6vw,3.25rem);line-height:1.15}.intro{max-width:520px;margin:20px 0 28px;color:#797269;font-size:1.05rem;line-height:1.6}.letter-glyph{display:block;width:min(100%,180px);height:220px;margin:32px auto;color:var(--color-purple);font-size:clamp(7rem,28vw,11rem);line-height:1;object-fit:contain}.lesson-screen .progress{margin-top:0}.lesson-screen h1{outline:none}.lesson-intro{display:flex;flex-direction:column;align-items:center}.lesson-intro .letter-glyph{margin-bottom:8px}.lesson-lowercase{margin:0 0 28px;color:var(--color-muted);font-size:clamp(2rem,8vw,4rem);line-height:1}.lesson-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.lesson-review{display:flex;flex-direction:column;align-items:center;text-align:center}.lesson-review h2{margin:24px 0 0;font-size:clamp(1.5rem,5vw,2rem)}.lesson-review__glyph{width:min(44vw,180px);height:min(52vw,220px);margin:20px 0 8px;color:var(--color-purple);font-size:clamp(7rem,28vw,11rem);object-fit:contain}.lesson-review__lowercase{margin:0 0 28px;color:var(--color-muted);font-size:clamp(2rem,8vw,4rem);line-height:1}.result-screen{display:flex;flex-direction:column}.result-screen h1{margin-bottom:8px}.result-screen__glyph{width:min(44vw,180px);height:min(52vw,220px);margin:20px auto;color:var(--color-purple);font-size:clamp(7rem,28vw,11rem);object-fit:contain}.result-card{display:flex;padding:24px;flex-direction:column;align-items:center;gap:12px;border-radius:24px;background:var(--color-surface);box-shadow:0 4px 12px #403b3714;text-align:center}.result-card h2{margin:0;font-size:1.25rem}.result-card__best{margin:0;color:var(--color-muted)}.result-complete{margin:24px 0;color:var(--color-purple-deep);font-size:1.1rem;font-weight:800;text-align:center}.result-screen>.ui-button{align-self:center;margin-top:24px}.lesson-placeholder{min-height:280px;padding:24px;border-radius:24px;background:var(--color-surface);text-align:center}.listen-puzzle{margin-top:24px}.listen-puzzle__prompt{display:flex;min-height:190px;padding:24px;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:24px;background:var(--color-surface);text-align:center}.listen-puzzle__prompt h2{margin:0;font-size:clamp(1.5rem,5vw,2rem)}.listen-puzzle__sample{width:84px;height:104px;color:var(--color-purple-deep);font-size:5rem;object-fit:contain}.listen-puzzle__replay{background:var(--color-surface);color:var(--color-purple-deep);box-shadow:inset 0 0 0 2px var(--color-purple)}.listen-puzzle__options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}.listen-puzzle__option{display:grid;min-height:112px;padding:12px;place-items:center;background:var(--color-surface);color:var(--color-purple-deep);box-shadow:0 4px 12px #403b3714}.listen-puzzle__option:disabled{cursor:wait;opacity:.72}.listen-puzzle__option.is-hint,.find-puzzle__option.is-hint,.build-puzzle__piece.is-hint{border:3px solid #f0a93b;box-shadow:0 0 0 4px #f0a93b38}.listen-puzzle__option-glyph{width:64px;height:80px;color:currentColor;font-size:4.5rem;line-height:1;object-fit:contain}.listen-puzzle__feedback{min-height:1.5em;margin:16px 0 0;color:var(--color-purple-deep);font-size:1.1rem;font-weight:800;text-align:center}.find-puzzle{margin-top:24px}.find-puzzle__prompt{display:flex;min-height:260px;padding:24px;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:24px;background:var(--color-surface);text-align:center}.find-puzzle__prompt h2{margin:0;font-size:clamp(1.5rem,5vw,2rem)}.find-puzzle__sample{width:min(42vw,160px);height:min(48vw,190px);color:var(--color-purple-deep);font-size:clamp(5rem,22vw,10rem);line-height:1;object-fit:contain}.find-puzzle__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.find-puzzle__option{display:grid;min-height:112px;padding:12px;place-items:center;background:var(--color-surface);color:var(--color-purple-deep);box-shadow:0 4px 12px #403b3714}.find-puzzle__option:disabled{cursor:wait;opacity:.72}.find-puzzle__option.is-hint{border:3px solid #f0a93b;box-shadow:0 0 0 4px #f0a93b38}.find-puzzle__option-glyph{width:64px;height:80px;color:currentColor;font-size:4.5rem;line-height:1;object-fit:contain}.find-puzzle__feedback{min-height:1.5em;margin:16px 0 0;color:var(--color-purple-deep);font-size:1.1rem;font-weight:800;text-align:center}.build-puzzle{margin-top:24px}.build-puzzle__board{padding:24px;border-radius:24px;background:var(--color-surface);text-align:center}.build-puzzle__board h2{margin:0;font-size:clamp(1.5rem,5vw,2rem)}.build-puzzle__letter{position:relative;width:min(54vw,220px);height:min(62vw,260px);margin:16px auto 8px}.build-puzzle__letter svg{position:absolute;inset:0;width:100%;height:100%}.build-puzzle__silhouette{color:#e6e0d5}.build-puzzle__silhouette path{fill:currentColor}.build-puzzle__placed{color:var(--color-purple)}.build-puzzle__placed path{fill:currentColor}.build-puzzle__hint{margin:0;color:var(--color-muted)}.build-puzzle__pieces{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}.build-puzzle__piece{display:grid;width:96px;min-height:96px;padding:12px;place-items:center;background:var(--color-surface);color:var(--color-purple-deep);box-shadow:0 4px 12px #403b3714}.build-puzzle__piece svg{width:72px;height:72px}.build-puzzle__piece path{fill:currentColor}.build-puzzle__piece:disabled{cursor:wait;opacity:.72}.build-puzzle__piece.is-hint{border:3px solid #f0a93b;box-shadow:0 0 0 4px #f0a93b38}.build-puzzle__feedback{min-height:1.5em;margin:16px 0 0;color:var(--color-purple-deep);font-size:1.1rem;font-weight:800;text-align:center}@media (max-width: 420px){.listen-puzzle__options{gap:10px}.listen-puzzle__option{min-height:96px;padding:8px}.listen-puzzle__option-glyph{width:52px;height:68px}.find-puzzle__options{gap:10px}.find-puzzle__option{min-height:96px;padding:8px}.find-puzzle__option-glyph{width:52px;height:68px}.build-puzzle__piece{width:84px;min-height:84px}.build-puzzle__piece svg{width:64px;height:64px}}.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: 600px){.app-shell{padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}}@media (max-height: 520px) and (orientation: landscape){.app-shell{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}button:active{transform:none}}