:root {
  --ink:#183042; --muted:#647780; --paper:#fffdf7; --cream:#f6f1e7;
  --coral:#f26752; --coral-dark:#ca4937; --green:#207a68; --mint:#cfeee5;
  --yellow:#f6ca55; --line:#dbe5df; --shadow:0 20px 60px rgba(27,61,57,.12);
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--cream); overflow-x:clip; }
body {
  margin:0; min-width:320px; min-height:100vh; min-height:100dvh; color:var(--ink);
  font-family:"Avenir Next","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  background:linear-gradient(145deg,#faf5ea 0%,#edf8f4 100%); overflow-x:clip;
}
button,input,textarea { font:inherit; }
button { cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid rgba(32,122,104,.25); outline-offset:3px; }
[hidden] { display:none!important; }
.ambient { position:fixed; border-radius:50%; filter:blur(2px); pointer-events:none; opacity:.55; }
.ambient-one { width:min(330px,100vw); height:330px; top:-170px; right:0; background:#f8da83; clip-path:ellipse(68% 50% at 100% 50%); }
.ambient-two { width:min(400px,100vw); height:400px; bottom:-250px; left:0; background:#aee3d4; clip-path:ellipse(68% 50% at 0 50%); }
.app-shell { width:min(1120px,calc(100% - 40px)); margin:auto; padding:max(20px,env(safe-area-inset-top)) 0 max(28px,env(safe-area-inset-bottom)); position:relative; }
.app-bar { min-height:52px; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:11px; border:0; padding:0; background:transparent; color:var(--ink); text-align:left; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--coral); color:white; font-size:24px; font-weight:1000; box-shadow:0 4px 0 var(--coral-dark); transform:rotate(-4deg); }
.brand-copy strong,.brand-copy small { display:block; }
.brand-copy strong { font-size:14px; text-transform:uppercase; letter-spacing:.1em; }
.brand-copy small { color:var(--muted); font-size:11px; font-weight:700; }
.top-actions { display:flex; gap:10px; }
.icon-button,.library-button,.back-button { min-width:44px; min-height:44px; border:1px solid var(--line); background:rgba(255,253,247,.9); color:var(--ink); border-radius:14px; box-shadow:0 3px 0 #d2ddd7; font-weight:900; }
.library-button { display:flex; align-items:center; gap:7px; padding:0 14px; }
.screen { animation:screen-in .32s ease both; }
.home-screen { display:grid; grid-template-columns:minmax(260px,.82fr) minmax(480px,1.18fr); gap:28px 72px; align-items:start; padding:clamp(34px,7vh,76px) 0 20px; }
.home-copy { align-self:center; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--coral); font-size:12px; font-weight:1000; letter-spacing:.16em; }
.eyebrow span { width:18px; height:2px; background:currentColor; }
h1 { margin:0; max-width:590px; font-size:clamp(38px,5vw,67px); line-height:1.04; letter-spacing:-.055em; }
h1 em { color:var(--coral); font-style:normal; }
.home-copy>p:last-child { margin:20px 0 0; color:var(--muted); font-size:17px; line-height:1.7; }
.pack-picker { grid-column:1; padding:17px; border:1px solid var(--line); border-radius:22px; background:rgba(255,253,247,.82); box-shadow:0 9px 26px rgba(27,61,57,.06); }
.pack-picker-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }.pack-picker-head small,.pack-picker-head strong { display:block; }.pack-picker-head small { color:var(--coral); font-size:9px; font-weight:1000; letter-spacing:.13em; }.pack-picker-head strong { margin-top:2px; font-size:16px; }
.pack-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.pack-option { min-width:0; min-height:72px; display:grid; grid-template-columns:48px minmax(0,1fr) 20px; align-items:center; gap:9px; padding:7px; border:2px solid transparent; border-radius:15px; background:#eef4f1; color:var(--ink); text-align:left; }.pack-option.active { border-color:var(--green); background:#e6f4ef; }.pack-option>span:not(.pack-thumb) { min-width:0; }.pack-option strong,.pack-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.pack-option strong { font-size:12px; }.pack-option small { margin-top:3px; color:var(--muted); font-size:10px; }.pack-option i { display:none; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--green); color:white; font-style:normal; font-size:11px; }.pack-option.active i { display:grid; }.pack-thumb { width:48px; height:58px; object-fit:cover; border-radius:9px; }.basic-thumb { display:grid; place-items:center; height:48px; background:#ddefd6; font-size:24px; }.pack-source { margin:9px 0 0; color:var(--muted); font-size:9px; }.pack-source a,.preview-source a { color:var(--green); }
.route-card { grid-column:1; padding:22px; background:rgba(255,253,247,.82); border:1px solid var(--line); border-radius:24px; box-shadow:0 9px 26px rgba(27,61,57,.06); }
.route-top { display:flex; justify-content:space-between; margin-bottom:17px; font-size:13px; font-weight:900; }
.route-top b { color:var(--green); }
.route-line { display:flex; align-items:center; }
.route-line span { flex:1; height:2px; background:#cbdad4; }
.route-dot { display:grid; place-items:center; width:28px; height:28px; border:2px solid #cbdad4; border-radius:50%; background:var(--paper); color:#82928d; font-style:normal; font-size:11px; font-weight:1000; }
.route-dot.active { border-color:var(--coral); background:var(--coral); color:white; box-shadow:0 0 0 5px rgba(242,103,82,.12); }
.route-labels { display:flex; justify-content:space-between; margin-top:9px; color:var(--muted); font-size:10px; font-weight:800; }
.voice-home-status { grid-column:1; margin:-14px 0 0; padding:12px 14px; border:1px solid #f0bdaf; border-radius:14px; background:#fff1ed; color:#9c4437; font-size:12px; font-weight:800; line-height:1.45; }
.mode-grid { grid-column:2; grid-row:1 / span 3; display:grid; gap:14px; }
.mode-card { min-height:142px; display:grid; grid-template-columns:76px 1fr 40px; gap:18px; align-items:center; position:relative; padding:20px 22px; border:1px solid var(--line); border-radius:26px; background:rgba(255,253,247,.91); color:var(--ink); text-align:left; box-shadow:0 8px 0 rgba(205,220,213,.8),0 18px 42px rgba(27,61,57,.08); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.mode-card:hover { transform:translateY(-3px); border-color:#a8c8be; box-shadow:0 11px 0 rgba(205,220,213,.8),0 24px 48px rgba(27,61,57,.11); }
.mode-card:disabled { cursor:not-allowed; filter:grayscale(.7); opacity:.55; transform:none; box-shadow:0 5px 0 rgba(205,220,213,.7); }
.mode-art { display:grid; place-items:center; width:72px; height:72px; border-radius:22px; background:#e9f7f2; font-size:34px; }
.beginner .mode-art { background:#e6f5d8; }.standard .mode-art { background:#fff0c9; }.challenge .mode-art { background:#f7ded9; }
.mode-copy>* { display:block; }.mode-copy small { color:var(--green); font-size:10px; font-weight:1000; letter-spacing:.14em; }.mode-copy strong { margin:3px 0 7px; font-size:24px; }.mode-copy em { color:var(--muted); font-size:13px; font-style:normal; }
.mode-arrow { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--ink); color:white; font-size:20px; }
.mode-badge { position:absolute; top:-8px; right:20px; padding:5px 10px; border-radius:99px; background:var(--coral); color:white; font-size:10px; font-weight:1000; letter-spacing:.08em; }
.game-screen { padding:28px 0 0; }
.game-card { width:min(940px,100%); margin:auto; padding:22px; border:1px solid var(--line); border-radius:30px; background:rgba(255,253,247,.94); box-shadow:var(--shadow),0 7px 0 #d7e2dc; }
.game-card.challenge-mode { border-color:#a8b9cc; box-shadow:0 20px 60px rgba(25,54,83,.14),0 7px 0 #c8d4df; }.challenge-mode .picture-tag { background:#d7d9ff; box-shadow:0 3px 0 #aeb2df; }.challenge-mode .prompt-copy small { color:#47627d; }
.game-head { display:flex; align-items:center; gap:14px; }
.back-button { flex:0 0 44px; font-size:20px; }
.round-copy { flex:1; display:flex; align-items:center; gap:10px; }.round-copy b { color:var(--muted); font-size:12px; letter-spacing:.1em; }
.pack-label { padding:5px 9px; border-radius:99px; background:#e4f4ef; color:var(--green); font-size:11px; font-weight:900; }
.score-pill { display:flex; align-items:center; gap:5px; padding:8px 13px; border-radius:99px; background:#fff0c7; border:1px solid #f3d984; }.score-pill span { color:#e7a80d; }
.progress { height:7px; margin:14px 0 22px; overflow:hidden; border-radius:99px; background:#e5ece8; }.progress i { display:block; height:100%; width:12.5%; border-radius:inherit; background:linear-gradient(90deg,var(--green),#62c8a8); transition:width .35s ease; }
.learning-stage { display:grid; grid-template-columns:minmax(270px,42%) 1fr; gap:28px; align-items:center; }
.picture { width:100%; max-width:350px; aspect-ratio:1; justify-self:center; position:relative; overflow:hidden; border:8px solid white; border-radius:26px; background:#e0f2ed; box-shadow:0 15px 36px rgba(29,72,65,.18); }
.picture>img { position:absolute; width:calc(var(--cols,4) * 100%); height:calc(var(--rows,2) * 100%); max-width:none; left:calc(var(--col,0) * -100%); top:calc(var(--row,0) * -100%); transition:left .24s ease,top .24s ease; user-select:none; }
.picture.custom>img { width:100%; height:100%; left:0; top:0; object-fit:cover; }.picture.challenge { filter:saturate(.55); opacity:.82; }.picture.revealed { filter:none; opacity:1; }
.custom-visual { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(145deg,#e3f7ff,#fff0c8); font-size:clamp(84px,13vw,140px); }
.picture-tag { position:absolute; top:12px; right:12px; padding:6px 9px; border-radius:9px; background:var(--yellow); box-shadow:0 3px 0 #d9a72d; font-size:11px; font-weight:1000; transform:rotate(3deg); }
.practice-panel { min-width:0; }
.prompt-copy { display:flex; justify-content:space-between; gap:18px; align-items:end; }.prompt-copy small { color:var(--coral); font-size:10px; font-weight:1000; letter-spacing:.16em; }.prompt-copy h2 { margin:4px 0 0; font-size:clamp(23px,3vw,34px); letter-spacing:-.035em; }.replay-count { color:var(--muted); font-size:11px; font-weight:800; }
.audio-tools { display:flex; gap:9px; align-items:center; margin:22px 0 12px; }.speak-button,.slow-button { min-height:48px; border:0; border-radius:15px; padding:0 17px; font-weight:1000; }.speak-button { background:var(--ink); color:white; box-shadow:0 4px 0 #071b29; }.speak-button span { color:var(--yellow); }.slow-button { background:#e2f3ee; color:var(--green); box-shadow:0 4px 0 #bfded5; }
.voice-picker { display:flex; margin-left:auto; padding:4px; border-radius:13px; background:#e9efec; }.voice-option { min-width:44px; min-height:44px; border:0; border-radius:10px; padding:0 11px; background:transparent; color:var(--muted); font-size:12px; font-weight:900; }.voice-option.active { background:white; color:var(--ink); box-shadow:0 2px 8px rgba(22,57,52,.12); }.voice-option.active::before { content:"✓"; margin-right:3px; font-size:10px; }
.voice-status { min-height:18px; margin:0 0 8px; color:#976212; font-size:12px; font-weight:800; }.voice-status.error { color:var(--coral-dark); }
.voice-fallback-actions { display:flex; gap:8px; align-items:center; margin:0 0 10px; }.voice-fallback-actions .secondary-button,.voice-fallback-actions .text-button { min-height:44px; }
.answer-row { display:flex; gap:10px; }.answer-row input { min-width:0; flex:1; min-height:56px; border:2px solid #d6e2dc; border-radius:17px; padding:0 16px; background:white; color:var(--ink); font-size:17px; font-weight:800; }.answer-row input:focus { border-color:#69b7a1; box-shadow:0 0 0 4px rgba(63,157,131,.12); outline:0; }
.check-button,#nextButton,.primary-button { min-height:48px; border:0; border-radius:15px; padding:0 20px; background:var(--coral); color:white; font-weight:1000; box-shadow:0 4px 0 var(--coral-dark); }.check-button:active,#nextButton:active,.primary-button:active { transform:translateY(2px); box-shadow:0 2px 0 var(--coral-dark); }
.hint-row { display:flex; justify-content:space-between; align-items:center; min-height:44px; color:var(--muted); font-size:12px; }.text-button { min-height:44px; border:0; background:transparent; color:var(--green); font-weight:900; }
.feedback { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:12px; padding:13px; border:1px solid #aee0d1; border-radius:18px; background:#e6f6f0; animation:pop .25s ease; }.feedback.wrong { border-color:#f5c0b8; background:#fff0ed; }.feedback-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--green); color:white; font-size:22px; font-weight:1000; }.feedback.wrong .feedback-icon { background:var(--coral); }.feedback-copy { min-width:0; }.feedback-copy strong { font-size:17px; }.feedback-copy p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }#nextButton { min-width:116px; }
.feedback-translation { display:block; margin-top:3px; color:#3d6258; font-size:12px; font-weight:800; }.feedback-translation:empty { display:none; }
.result-screen { min-height:calc(100dvh - 100px); display:grid; place-items:center; padding:30px 0; }.result-card { width:min(520px,100%); padding:34px; text-align:center; border:1px solid var(--line); border-radius:30px; background:rgba(255,253,247,.95); box-shadow:var(--shadow),0 7px 0 #d7e2dc; }.result-card .eyebrow { justify-content:center; }.result-card h2 { margin:8px 0; font-size:40px; }.result-card>p:not(.eyebrow) { color:var(--muted); }.result-badge { display:block; font-size:72px; }.result-score { display:flex; justify-content:space-between; align-items:center; margin:24px 0 14px; padding:18px 20px; border-radius:18px; background:#fff1c9; font-weight:900; }.result-score strong { font-size:30px; }.result-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.stat { padding:14px; border-radius:15px; background:#edf4f1; }.stat strong,.stat span { display:block; }.stat strong { font-size:23px; }.stat span { color:var(--muted); font-size:11px; }.result-actions { display:flex; gap:10px; margin-top:22px; }.result-actions>* { flex:1; }
.secondary-button { min-height:48px; border:1px solid var(--line); border-radius:15px; padding:0 16px; background:#e9f0ed; color:var(--ink); font-weight:900; }
.library-dialog { width:min(650px,calc(100% - 24px)); max-height:min(88dvh,760px); padding:0; border:0; border-radius:26px; color:var(--ink); box-shadow:0 30px 100px rgba(20,48,63,.32); }.library-dialog::backdrop { background:rgba(15,40,52,.55); backdrop-filter:blur(4px); }.library-dialog form { max-height:min(88dvh,760px); overflow:auto; padding:26px; }.dialog-head { display:flex; justify-content:space-between; gap:20px; }.dialog-head h2 { margin:0 0 18px; font-size:28px; }.library-dialog label { display:block; margin:14px 0 7px; font-weight:900; }.library-dialog input,.library-dialog textarea { width:100%; border:2px solid #d6e2dc; border-radius:14px; padding:12px 14px; background:#fffefb; color:var(--ink); outline:0; }.library-dialog textarea { resize:vertical; line-height:1.5; }.form-note { color:var(--muted); font-size:12px; line-height:1.55; }.form-error { min-height:18px; color:var(--coral-dark); font-size:13px; font-weight:800; }.dialog-actions { position:sticky; bottom:-26px; display:flex; justify-content:space-between; gap:12px; margin:14px -26px -26px; padding:16px 26px max(16px,env(safe-area-inset-bottom)); background:rgba(255,253,247,.97); border-top:1px solid var(--line); }
.voice-help { margin-top:14px; padding:13px 14px; border-radius:14px; background:#eef5f2; }.voice-help p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.pack-preview-dialog { width:min(720px,calc(100% - 24px)); max-height:88dvh; padding:0; border:0; border-radius:26px; color:var(--ink); background:var(--paper); box-shadow:0 30px 100px rgba(20,48,63,.32); }.pack-preview-dialog::backdrop { background:rgba(15,40,52,.58); backdrop-filter:blur(4px); }.preview-dialog-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:24px 24px 16px; background:rgba(255,253,247,.97); border-bottom:1px solid var(--line); }.preview-dialog-head .eyebrow { margin-bottom:4px; }.preview-dialog-head h2 { margin:0; font-size:27px; }.preview-poster-wrap { display:grid; grid-template-columns:118px 1fr; gap:18px; align-items:center; margin:20px 24px 4px; padding:14px; border-radius:19px; background:#132b3d; color:white; }.preview-poster-wrap img { width:118px; aspect-ratio:2/3; object-fit:cover; border-radius:10px; }.preview-poster-wrap strong,.preview-poster-wrap span,.preview-poster-wrap small { display:block; }.preview-poster-wrap strong { font-size:21px; }.preview-poster-wrap span { margin-top:7px; color:#f6ca55; font-size:12px; font-weight:900; }.preview-poster-wrap small { margin-top:9px; color:#bdd0da; line-height:1.45; }.pack-preview-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:18px 24px; padding:0; list-style:none; counter-reset:lines; }.pack-preview-list li { counter-increment:lines; position:relative; padding:12px 12px 12px 38px; border-radius:14px; background:#eef4f1; }.pack-preview-list li::before { content:counter(lines); position:absolute; left:12px; top:12px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--green); color:white; font-size:9px; font-weight:1000; }.pack-preview-list strong,.pack-preview-list span { display:block; }.pack-preview-list strong { font-size:13px; line-height:1.35; }.pack-preview-list span { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.4; }.preview-source { margin:0 24px 22px; color:var(--muted); font-size:10px; }
.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; }.shake { animation:shake .34s; }.celebrate { animation:celebrate .65s ease; }.speaking { animation:pulse .55s infinite alternate; }#confetti { position:fixed; inset:0; width:100%; height:100%; z-index:20; pointer-events:none; }
@keyframes screen-in { from{opacity:0;transform:translateY(8px)} }@keyframes pop { from{opacity:0;transform:translateY(6px) scale(.98)} }@keyframes pulse { to{transform:scale(1.05)} }@keyframes shake { 25%,75%{transform:translateX(-6px)}50%{transform:translateX(6px)} }@keyframes celebrate { 45%{transform:translateY(-9px) rotate(-2deg) scale(1.04)} }
@media(max-width:760px) {
  .app-shell { width:100%; padding:max(12px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom)); }
  .home-screen { display:block; padding:28px 4px 10px; }.home-copy { text-align:center; }.eyebrow { justify-content:center; }.home-copy h1 { font-size:clamp(34px,10vw,48px); }.home-copy>p:last-child { margin:12px 0 18px; font-size:14px; }.pack-picker { margin-bottom:12px; padding:13px; }.pack-picker-head { margin-bottom:8px; }.pack-options { display:flex; overflow-x:auto; padding:1px 1px 5px; scroll-snap-type:x mandatory; }.pack-option { flex:0 0 78%; min-height:68px; scroll-snap-align:start; }.route-card { margin-bottom:18px; padding:16px; }.voice-home-status { margin:-7px 0 13px; }.mode-grid { gap:12px; }.mode-card { min-height:106px; grid-template-columns:54px 1fr 38px; gap:13px; padding:15px; border-radius:21px; }.mode-art { width:54px; height:54px; border-radius:17px; font-size:28px; }.mode-copy strong { font-size:19px; }.mode-copy em { font-size:12px; }.mode-arrow { width:38px; height:38px; }.pack-preview-list { grid-template-columns:1fr; }.pack-preview-dialog { width:100%; max-height:92dvh; margin:auto 0 0; border-radius:26px 26px 0 0; }.preview-dialog-head { padding:18px 16px 13px; }.preview-poster-wrap { grid-template-columns:88px 1fr; margin:14px 16px 0; padding:11px; }.preview-poster-wrap img { width:88px; }.preview-poster-wrap strong { font-size:17px; }.pack-preview-list { margin:14px 16px; }.preview-source { margin:0 16px 18px; }
  .game-screen { padding-top:12px; }.game-card { padding:13px; border-radius:23px; }.progress { margin:10px 0 14px; }.learning-stage { display:block; }.picture { width:min(54vw,230px); border-width:6px; border-radius:20px; }.practice-panel { margin-top:14px; }.prompt-copy h2 { font-size:23px; }.audio-tools { margin:12px 0 7px; }.speak-button,.slow-button { min-height:46px; padding:0 13px; }.voice-picker { margin-left:auto; }.voice-option { min-height:44px; padding:0 8px; }.answer-row input { min-height:52px; font-size:16px; }.check-button { min-height:52px; }.feedback { grid-template-columns:42px 1fr; }.feedback-icon { width:40px; height:40px; }.feedback #nextButton { grid-column:1 / -1; width:100%; }.result-card { padding:28px 20px; }.library-button b { display:none; }.library-button { padding:0; justify-content:center; }
}
@media(max-width:380px), (max-height:690px) and (max-width:760px) {
  .brand-copy small,.home-copy>p:last-child,.route-labels { display:none; }.home-screen { padding-top:14px; }.home-copy h1 { font-size:31px; }.route-card { margin:13px 0; padding:12px 15px; }.route-top { margin-bottom:10px; }.mode-card { min-height:88px; padding:11px 13px; }.mode-art { width:48px; height:48px; }.mode-copy em { display:none; }.mode-copy strong { margin-bottom:0; }.game-head { gap:8px; }.pack-label { max-width:130px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.picture { width:min(43vw,175px); }.practice-panel { margin-top:9px; }.prompt-copy h2 { font-size:20px; }.audio-tools { margin:8px 0 5px; }.hint-row { min-height:38px; }.voice-status { margin:0; }.feedback { padding:9px; }
}
@media(max-width:380px) and (min-height:521px) {
  .picture { width:min(37vw,145px); }.audio-tools { display:grid; grid-template-columns:1fr 1fr; }.audio-tools>button { width:100%; }.voice-picker { grid-column:1 / -1; width:100%; margin:0; }.voice-option { flex:1; }
}
@media(max-width:699px) and (max-height:520px) {
  .app-shell { padding:6px 8px; }.app-bar { display:none; }.game-screen { padding:0; }.game-card { padding:8px 10px; border-radius:18px; }.game-head { gap:7px; }.progress { margin:5px 0 8px; }
  .learning-stage { display:grid; grid-template-columns:100px 1fr; gap:10px; align-items:start; }.picture { width:100px; margin-top:2px; border-width:4px; border-radius:15px; }.picture-tag { top:5px; right:5px; padding:3px 5px; font-size:9px; }
  .practice-panel { margin-top:0; }.prompt-copy h2 { font-size:18px; }.prompt-copy small,.replay-count { display:none; }.audio-tools { margin:5px 0; }.speak-button,.slow-button { min-height:40px; padding:0 10px; }.voice-picker,.voice-status,.hint-row { display:none; }
  .answer-row { gap:6px; }.answer-row input { min-height:44px; padding:0 10px; }.check-button { width:44px; min-width:44px; min-height:44px; padding:0; }.check-button span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }.feedback { position:fixed; left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); z-index:5; }
}
@media(min-width:700px) and (max-height:520px) and (orientation:landscape) {
  .app-shell { width:min(1000px,calc(100% - 24px)); padding:8px 0; }.app-bar { display:none; }.game-screen { padding:0; }.game-card { padding:10px 15px; }.progress { margin:6px 0 9px; }.learning-stage { display:grid; grid-template-columns:minmax(190px,35%) 1fr; gap:20px; }.picture { width:min(32vw,220px); }.practice-panel { margin-top:0; }.prompt-copy h2 { font-size:21px; }.audio-tools { margin:7px 0 4px; }.answer-row input { min-height:46px; }.check-button { min-height:46px; }.hint-row { min-height:36px; }.feedback { padding:8px; }.home-screen { display:grid; grid-template-columns:.8fr 1.2fr; gap:12px 30px; padding:8px 0; }.home-copy h1 { font-size:34px; }.home-copy>p:last-child { display:none; }.route-card { grid-column:1; margin:0; }.mode-grid { grid-column:2; grid-row:1 / span 2; }.mode-card { min-height:86px; }.mode-copy em { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }