#firstVisit {
 --side-gap:max(12px,env(safe-area-inset-left),env(safe-area-inset-right));
 --end-gap:max(8px,env(safe-area-inset-top),env(safe-area-inset-bottom));
 width:510px;max-width:calc(100% - var(--side-gap) - var(--side-gap));max-height:calc(100dvh - var(--end-gap) - var(--end-gap));overflow:auto;
 padding:0; border:1px solid #f0bf7b; border-radius:26px; background:#fff9e9; color:#213e37;
 box-shadow:0 18px 80px #3b241a54; overscroll-behavior:contain;
}
#firstVisit::backdrop {background:#332518a8}
#firstVisit [hidden] {display:none!important}
.entry-bar,.entry-brand,.entry-actions,.entry-custom {display:flex; align-items:center; gap:10px}
.entry-bar {justify-content:space-between; padding:10px 18px; border-bottom:1px solid #edcf9d; background:#fffdf6; min-height:54px}
.entry-brand {font-weight:850;letter-spacing:-.05em}
.entry-brand img {width:33px;height:33px;border-radius:10px}
#entryClose {width:44px;height:44px;background:transparent;border:0;color:#355b51;font-size:25px;line-height:1}
.entry-body {padding:clamp(16px,4vw,28px);text-align:center}
#entryProgress {display:flex;justify-content:center;gap:5px;margin:0 auto 12px}
#entryProgress i {height:5px;width:21px;border-radius:4px;background:#eadbc1}
#entryProgress i.active {background:#297365}
#firstVisit h2 {color:#264a41;font-size:clamp(25px,6vw,34px);line-height:1.08;letter-spacing:-.05em;margin:0 0 10px}
#entryTitle:focus {outline:none}
#firstVisit p {font-size:15px;line-height:1.45;margin:0 0 14px;color:#455d53}
.entry-characters {display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
#firstVisit button {min-height:44px}
.entry-characters button {padding:10px 5px 8px;border:2px solid #80c7cf;background:radial-gradient(ellipse at 44% 52%,#fff9d9,transparent 68%),#cdeff1;border-radius:21px;box-shadow:0 3px 0 #80c7cf;color:#214d56}
.entry-characters button+button {background:radial-gradient(ellipse at 56% 52%,#fff9d9,transparent 68%),#ffded9;border-color:#f2abac;box-shadow:0 3px 0 #f2abac;color:#773a4f}
.choice-art {display:block;position:relative;height:clamp(92px,25dvh,204px)}
.choice-art > img {display:block;height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #55361425)}
.entry-characters button>span:last-child {display:inline-block;font-size:19px;margin-top:5px}
#firstVisit button:focus-visible {outline:3px solid #176e64;outline-offset:2px}
#firstVisit [aria-pressed=true] {box-shadow:inset 0 0 0 2px #236b5f}
.entry-ages {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.entry-ages button {background:#fffdf6;color:#435747;font-size:23px;border-color:#e1c89c}
.entry-ages button[aria-pressed=true] {background:#daeee2}
.entry-custom {justify-content:space-between;text-align:left;margin:8px 0 18px;font-weight:700}
#entryAge {width:76px;padding:8px;border:1px solid #c9bda3;background:white;border-radius:12px;font-size:17px}
#firstVisit .entry-primary {background:#225e51;color:#fff;border-color:#225e51;padding:10px 17px}
#entryAgeForm .entry-primary {width:100%}
#entryBack {background:none;border:0;color:#285e53;margin-left:auto;padding:6px 9px}
.mascot-stage {height:clamp(128px,34dvh,282px);isolation:isolate;overflow:hidden;position:relative;border-radius:25px;background:radial-gradient(#fff3cb66 1px,transparent 1.7px) 0 0 / 13px 13px,linear-gradient(135deg,#ffb458,#ffd984 67%,#ffc578)}
.mascot-halo {position:absolute;left:50%;transform:translateX(-50%);z-index:-1;bottom:-25%;width:72%;height:125%;border-radius:55% 55% 0 0;background:linear-gradient(#fff7c4e0,#fff5bd29);box-shadow:0 0 0 10px #fff4ba45}
.mascot-stage:after {content:"";position:absolute;left:50%;transform:translateX(-50%);z-index:-1;bottom:5%;height:9%;width:53%;border-radius:50%;background:#a8652f32;filter:blur(3px)}
/* The portrait and the animated canvas share one fitted box in each scene. */
.mascot-actor {display:block;position:absolute;inset:0}
.mascot-stage .mascot-actor {inset:5% 4%}
.mascot-actor img,.mascot-actor canvas {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
#firstVisit .entry-caption {margin:13px 0 16px;padding:10px 14px;background:#fffef8;border:1px solid #eed7a8;border-radius:15px;font-weight:650;color:#344e46}
.entry-actions {justify-content:center;flex-wrap:wrap}
#entryPlay {background:transparent;color:#235e51;border-color:#a8bb9d}
#chooseMascot {margin-left:0}
@media(max-width:470px){header{gap:6px;flex-wrap:wrap}.brand{font-size:17px}#chooseMascot{padding:4px 6px;font-size:12px}header .logo{height:30px;width:30px}}

.entry-question {display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px}
#questionPlay {display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid #a8bb9d;border-radius:22px;background:#fffdf6;color:#235e51}
.question-play-icon {width:0;height:0;border-block:6px solid transparent;border-left:10px solid currentColor}
.speaking .question-play-icon {width:10px;height:10px;border:0;border-radius:2px;background:currentColor}
.choice-art:has(.mascot-actor)>img {visibility:hidden}
.choice-art .mascot-actor {filter:drop-shadow(0 4px 3px #55361425)}
#ageSpeaker {display:block;flex:none;position:relative;width:clamp(78px,23vw,106px);height:clamp(78px,15dvh,120px);border-radius:20px;background:#ffe4ac}
#ageSpeaker .mascot-actor {inset:4px}
#firstVisit #entryAudioError {margin-top:10px}

@media(max-width:549px) and (max-height:660px) {
 .entry-bar {min-height:44px;padding:3px 12px}
 .entry-body {padding:12px}
 .entry-question {margin-bottom:6px}
 #entryProgress {margin-bottom:8px}
 .entry-ages {gap:5px;margin:9px 0}
 .entry-custom {margin:6px 0 10px}
 #firstVisit .entry-caption {margin:9px 0;padding:8px 10px}
 .entry-actions {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6px}
 #firstVisit .entry-actions button {padding:7px;font-size:15px;line-height:1.18}
}
@media(orientation:landscape) and (min-width:480px) and (max-height:550px) {
 #firstVisit {width:750px}
 .entry-bar {min-height:44px;padding:2px 14px}
 .entry-body {padding:10px 16px}
 #firstVisit h2 {font-size:clamp(23px,3.6vw,30px);margin-bottom:7px}
 [data-step="greeting"]:not([hidden]) {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:1fr auto;align-items:center;gap:8px 14px}
 .mascot-stage {grid-row:1 / 3;height:clamp(125px,calc(100dvh - 124px),248px)}
 #firstVisit .entry-caption {margin:0;padding:8px 10px}
 .entry-actions {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5px}
 #firstVisit .entry-actions button {padding:6px 8px;font-size:15px;line-height:1.15}
 #firstVisit:is([data-screen="mascot"],[data-screen="age"]) .entry-body {
  display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);column-gap:14px;align-items:center;
  grid-template-areas:"progress choices" "heading choices" "question choices" "message message";
 }
 #entryProgress {grid-area:progress}
 #entryTitle {grid-area:heading}
 #entryQuestion {grid-area:question}
 #entryAudioError {grid-area:message}
 [data-step="mascot"],#entryAgeForm {grid-area:choices}
 .entry-question {margin:0;flex-wrap:wrap;gap:5px}
 #ageSpeaker {height:73px;width:72px}
 .entry-ages {margin:0 0 8px;gap:5px}
 .entry-custom {margin:6px 0 10px}
 .entry-characters {gap:6px}
 .choice-art {height:clamp(80px,32dvh,132px)}
}
/* The same language cards appear in the first visit and the header picker. */
#siteLanguage {display:inline-flex;align-items:center;gap:9px;min-height:42px;margin-left:auto;padding:6px 12px 6px 9px;background:#fffdf7;border:1px solid #d7b88e;border-radius:15px;box-shadow:0 2px 0 #e7c89f;color:#234f46;font-size:14px;font-weight:800}
.language-flag {display:block;width:30px;height:21px;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px #1d42251c}
.language-chevron {display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
#siteLanguage[aria-expanded=true] .language-chevron {transform:translateY(2px) rotate(225deg)}
.language-code {display:none}
#languageDialog {position:fixed;inset:auto;top:var(--picker-top,70px);left:var(--picker-left,12px);width:min(314px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:0;padding:15px;background:#fff9e9;color:#244f45;border:1px solid #e8c497;border-radius:23px;box-shadow:0 10px 38px #412a1640;overflow:auto}
#languageDialog::backdrop {background:#30291018}
.language-dialog-top {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 11px}
#languageTitle {margin:0;font-size:24px;line-height:1.15;letter-spacing:-.055em;color:#264a41}
#closeLanguages {display:grid;place-items:center;width:44px;height:44px;padding:0;color:#3a554c;border:1px solid #e5d5b9;border-radius:50%;background:#fffefa;font-size:24px;line-height:1}
.language-options {display:grid;gap:9px}
.language-option {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:69px;padding:9px 13px 9px 10px;background:#fffdfa;border:1px solid #e1ceb0;border-radius:16px;color:#23483f;text-align:left;line-height:1.15}
.language-art {display:grid;place-items:center;width:59px;height:45px;border-radius:11px;background:#f5eddb}
.language-art .language-flag {width:43px;height:29px;border-radius:4px;box-shadow:0 1px 4px #29392138}
.language-option[lang=en-US] .language-art .language-flag {height:25px}
.language-copy strong,.language-copy small {display:block}
.language-copy strong {font-size:17px;font-weight:800;letter-spacing:-.025em}
.language-copy small {margin-top:3px;font-size:13px;color:#53675d;font-weight:600}
.language-check {width:21px;height:21px;border-radius:50%;border:1.5px solid #c7c4b4;display:grid;place-items:center}
.language-option[aria-pressed=true],#firstVisit .language-option[aria-pressed=true] {background:#e8f5e9;border:1.5px solid #3b816b;box-shadow:none}
.language-option[aria-pressed=true] .language-art {background:#d9ecdd}
.language-option[aria-pressed=true] .language-check {background:#216954;border-color:#216954}
.language-option[aria-pressed=true] .language-check:after {content:"";width:8px;height:4px;border-left:2px solid white;border-bottom:2px solid white;transform:translateY(-1px) rotate(-45deg)}
#entryLanguageChoices {margin-top:18px}
#siteLanguage:focus-visible,#languageDialog button:focus-visible {outline:3px solid #176e64;outline-offset:2px}
@media(hover:hover){.language-option:hover,#siteLanguage:hover,#closeLanguages:hover {border-color:#538571}}
@media(max-width:520px){
 #siteLanguage {min-height:44px;gap:6px;padding:6px 9px;border-radius:14px}
 #siteLanguage .language-flag {width:25px;height:18px}
 .language-name {display:none}.language-code {display:inline;font-size:12px}
 #languageDialog {width:100%;max-width:none;max-height:90dvh;left:0;right:0;top:auto;bottom:0;padding:20px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border:0;border-radius:25px 25px 0 0;box-shadow:0 -8px 32px #3f291626}
 #languageDialog::backdrop {background:#30251673}
 #languageDialog .language-option {min-height:70px}
}