:root{font-family:Arial,Helvetica,sans-serif;color:#102d57;background:#fffdf8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:44px}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b57712;outline-offset:4px}button{color:#124186}button.quiet{border:1px solid #cbdcf2;background:#fff;border-radius:12px;padding:10px 16px}.demo-banner{text-align:center;background:#fff0c6;color:#654913;font-size:12px;padding:10px 16px;line-height:1.5}header{max-width:1040px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:26px 35px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#175bd1;font-size:24px;font-weight:800;letter-spacing:-.6px}.brand small{display:block;font-size:11px;font-weight:500;letter-spacing:.4px;margin-top:4px;color:#536982}.brand-icon{border:2px solid #175bd1;border-radius:50%;height:40px;width:40px;display:grid;place-items:center;font-size:29px}main{max-width:850px;padding:24px 28px;margin:auto}#welcome{text-align:center}.eyebrow{text-transform:uppercase;letter-spacing:1.6px;font-size:11px;font-weight:700;color:#617896;margin-top:22px}h1{font-size:clamp(40px,6vw,62px);line-height:1.1;letter-spacing:-2px;margin:20px 0 15px;font-weight:800}h1 span{color:#246bea}.intro{font-size:18px;color:#586d85;margin:0 0 23px}.age-row{display:flex;gap:12px;align-items:center;justify-content:center;font-size:13px;color:#536982}.age-row select{background:white;border:1px solid #cfdded;border-radius:9px;padding:10px;color:#173451;min-height:44px}.privacy{font-size:11px;color:#61738c;margin:9px 0 25px}#composer{background:white;border:1px solid #c3d5f1;box-shadow:0 5px 22px #254b8610;border-radius:32px;display:flex;align-items:flex-end;padding:12px 13px 12px 23px;gap:10px;margin:20px 0 10px}textarea{border:0;resize:vertical;min-height:42px;max-height:160px;padding:10px 0;width:100%;min-width:0;font-size:17px;background:white;color:#173451;line-height:1.4}textarea::placeholder{color:#72839d}#send{background:#246bea;color:white;border:0;border-radius:50%;width:46px;height:46px;flex-shrink:0;font-size:27px}#stop{border:1px solid #c3d5f1;background:#fff;border-radius:10px;padding:0 12px}.learning-art{max-width:620px;margin:20px auto 0}.learning-art svg{display:block;width:100%;height:auto}.sample-label{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:#637893;margin:18px 0 13px}.samples{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}.samples button,.followups button{background:#fff;border:1px solid #d4e0f0;border-radius:20px;padding:10px 15px;font-size:13px}.conversation-level{font-size:12px;color:#627995;padding-bottom:16px;border-bottom:1px solid #e7edf4}.turn{margin:25px 0 35px}.user{margin:0 0 20px auto;background:#e6efff;border-radius:23px 23px 5px 23px;padding:15px 20px;max-width:85%;width:fit-content;line-height:1.5;white-space:pre-wrap}.reply{border:1px solid #d5e1f2;border-radius:22px;padding:25px;background:#fff}.reply h2{font-size:23px;letter-spacing:-.5px;margin:0 0 15px}.reply p{font-size:16px;line-height:1.75;white-space:pre-wrap;margin:0 0 15px}.reply .byline{font-size:12px;font-weight:700;color:#246bea;margin-bottom:18px}.example{border-left:3px solid #f1c768;padding:9px 14px;background:#fffaf0}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.actions button{border:1px solid #bdd0ed;border-radius:22px;background:white;padding:10px 15px;font-size:13px}.actions button[aria-pressed=true]{background:#e6efff}.visual{margin:18px 0}.visual svg{width:100%;max-width:430px;display:block;margin:auto}.visual figcaption{font-size:12px;color:#596f8a;line-height:1.5;max-width:430px;margin:10px auto}.followups{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}details{border-top:1px solid #e2eaf5;padding-top:13px;font-size:13px}summary{cursor:pointer;min-height:44px;padding:9px 0;color:#1753a5}details p{font-size:14px!important}.sources{display:flex;flex-wrap:wrap;gap:8px}.sources a,.citation{color:#144eaa;font-size:12px}.sources a{border:1px solid #d4e0f0;border-radius:16px;padding:8px 10px;text-decoration:none;min-height:36px}.citation{padding:0 3px}.disclaimer{text-align:center;font-size:11px;line-height:1.6;color:#667890;max-width:650px;margin:15px auto}#status{font-size:13px;color:#506985;text-align:center;min-height:20px}#error{padding:12px 16px;border:1px solid #e1b6a1;background:#fff4ed;border-radius:12px;display:flex;gap:10px;align-items:center;font-size:14px}#retry{border:0;background:transparent;text-decoration:underline;white-space:nowrap}footer{text-align:center;font-size:13px;color:#617b98;padding:15px 20px 30px;font-style:italic}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:560px){header{padding:20px 18px}.brand{font-size:21px}.brand-icon{width:34px;height:34px;font-size:24px}header .quiet{font-size:12px;padding:8px 11px}main{padding:12px 18px}h1{font-size:43px;letter-spacing:-1.8px}.intro{font-size:16px;line-height:1.5}.eyebrow{font-size:9px;letter-spacing:1px;margin-top:15px}.age-row{flex-direction:column;gap:6px}.privacy{line-height:1.6}.reply{padding:19px 16px}.reply h2{font-size:22px}.user{max-width:93%}.actions button{flex:1;font-size:12px;white-space:nowrap}.actions{gap:6px}#composer{padding-left:16px;border-radius:26px}textarea{font-size:16px}.learning-art{margin-top:8px}.samples button{font-size:12px}.visual{margin:15px 0}.sources a{min-height:44px}.citation{display:inline-block;min-width:24px}.followups{display:grid}.followups button{text-align:left}#error{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Keep educational labels readable; scroll the figure locally at narrow widths. */
.visual > div{overflow-x:auto;max-width:100%;border-radius:20px}.visual svg{min-width:330px}

/* Child-friendly identity revision: no gold boxes, illustrated learning companions. */
:root{background:#fcfdff}
header{padding-top:23px;padding-bottom:17px}
.new-brand-mark{width:58px;height:58px;flex-shrink:0}
.brand{gap:10px;letter-spacing:-1px}
.new-wordmark{font-family:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;line-height:1.1}
.word-child{font-size:34px;color:#246bea;font-weight:900}
.word-gpt{font-size:22px;color:#5367a4;font-weight:700;letter-spacing:.5px;margin-left:5px}
.brand .new-wordmark small{font-family:Arial,sans-serif;font-size:8px;letter-spacing:1.25px;font-weight:700;color:#60758c;margin-top:7px}
h1{font-family:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;letter-spacing:-2px}
.demo-banner{background:transparent;color:#62738a;font-style:normal;font-size:10px;line-height:1.6;padding:14px 10px 0;max-width:660px;margin:auto}
.example{background:#f1f7ff;border-left-color:#9cbfee;border-radius:0 12px 12px 0}
button:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#4c80ce}
.kids-art{max-width:650px;margin:8px auto 0}
.kids-art svg{width:100%;height:auto}
.float-star{animation:gentle-wonder 3s ease-in-out 3;transform-origin:center}
@keyframes gentle-wonder{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-7px);opacity:.7}}
@media(max-width:560px){.new-brand-mark{width:44px;height:44px}.word-child{font-size:27px}.word-gpt{font-size:17px}.brand .new-wordmark small{font-size:6.5px;letter-spacing:.7px}.brand{gap:6px}header{padding:18px 15px}header .quiet{font-size:11px;padding:8px}.kids-art{margin:5px -12px 0}h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){.float-star{animation:none}}
/* Simple child-facing home: topic pills, parent settings tucked away. */
:root{background:#f5faff}
.grownup-settings{border:0;padding:0;max-width:440px;margin:4px auto 10px}
.grownup-settings summary{font-size:12px;color:#61738c;list-style-position:inside;min-height:36px;padding:8px}
.grownup-settings .privacy{margin-bottom:10px}
.samples button{font-size:15px;font-weight:700;border:0;padding:12px 19px;box-shadow:0 3px 0 #1d44700a;color:#254577}
.samples button:nth-child(6n+1){background:#ffe5dd;color:#8c4734}
.samples button:nth-child(6n+2){background:#e5ddff;color:#604394}
.samples button:nth-child(6n+3){background:#d9f2e5;color:#296744}
.samples button:nth-child(6n+4){background:#d8edff;color:#285e8b}
.samples button:nth-child(6n+5){background:#d9f4f4;color:#28686b}
.samples button:nth-child(6n){background:#ffe1f0;color:#8c416b}
.sample-label{text-transform:none;font-size:16px;font-weight:700;letter-spacing:0;color:#496a91;margin-top:8px}
.reply{border-color:#d9e9fb;box-shadow:0 6px 22px #254b8606}
.conversation-level{font-size:10px;border:0;text-align:right;padding:0;color:#677d95}
@media(max-width:560px){.samples{gap:10px}.samples button{font-size:14px;padding:12px 16px}.intro{margin-bottom:10px}.grownup-settings{margin-bottom:0}.kids-art{margin-top:0}#composer{margin-top:12px}}
/* Picture-first opening inspired by the simplicity of YouTube Kids, original Waykin art. */
body.is-opening{background:#eaf3ff;background-image:radial-gradient(circle at 8% 80%,#d8efe8 0, #d8efe8 12%,transparent 12.2%),radial-gradient(circle at 95% 17%,#e3dffa 0,#e3dffa 13%,transparent 13.2%);min-height:100vh}
#opening{max-width:800px;background:white;border:1px solid #d8e5f5;border-radius:36px;margin:12px auto 28px;padding:18px 40px 32px;text-align:center;box-shadow:0 16px 48px #3a609414}
#opening-art{max-width:520px;margin:auto}#opening-art svg{display:block;width:100%;height:auto}
#opening h1{font-size:43px;line-height:1.12;margin:5px 0 14px;letter-spacing:-1.4px;color:#173760}#opening h1 span{color:#246bea}
#opening-copy{font-size:17px;color:#60738c;margin:0 0 23px}
#opening-choices{display:flex;gap:14px;justify-content:center}
#opening-choices button,#start-together{border:0;border-radius:19px;padding:17px 26px;font-weight:800;font-size:17px;background:#246bea;color:white;min-width:175px;box-shadow:0 4px 0 #184ead}
#opening-choices #parent-choice{background:#d9f0e8;color:#24634f;box-shadow:0 4px 0 #aed5c6}
#opening-choices span{margin-left:20px}#opening small{display:block;font-size:11px;letter-spacing:.4px;color:#73849a;margin-top:26px}
#kid-message p,#parent-panel p{font-size:16px;line-height:1.6;color:#4f6682}
.opening-back{display:block;margin:17px auto 0;border:0;background:transparent;color:#315d95;padding:10px}
#parent-panel label{display:block;font-size:14px;color:#526c89;margin:10px}#opening-age{padding:12px 18px;border:1px solid #b9cdeb;border-radius:12px;background:white;color:#224771;font-size:16px}
body.is-opening #new{visibility:hidden}
@media(max-width:600px){#opening{margin:8px 14px 18px;border-radius:27px;padding:18px 18px 25px}#opening h1{font-size:34px}#opening-copy{font-size:15px}#opening-choices{gap:10px}#opening-choices button{min-width:0;flex:1;font-size:15px;padding:16px 10px}#opening-choices span{margin-left:7px}#opening-art{margin:0 -10px}#start-together{font-size:15px;min-width:0}}
/* User-triggered reveal only; no continuous motion in answers. */
.visual.playing svg > :not(rect:first-child){animation:lesson-reveal 900ms ease-out both}
.visual.playing svg > :nth-child(3n){animation-delay:180ms}
.visual.playing svg > :nth-child(3n+1){animation-delay:360ms}
@keyframes lesson-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.visual.playing svg > *{animation:none!important}}
/* Responsive illustrations: contain the complete scene on desktop/tablet/mobile. */
.learning-art svg,#opening-art svg,.visual svg{display:block;width:100%;height:auto;min-width:0;max-width:100%;object-fit:contain}
.visual > div{overflow:visible}.visual{max-width:430px;margin:18px auto}.visual figcaption{overflow-wrap:anywhere}
@media(min-width:601px) and (max-width:1024px){#opening{width:calc(100% - 64px);max-width:800px}.kids-art{max-width:590px}main{padding-left:32px;padding-right:32px}}
/* One rounded question bubble: the field itself has no rectangular focus border. */
#composer{--bubble-accent:#8ab9ef;border:2px solid var(--bubble-accent);border-radius:36px;align-items:center;background:#fff;transition:border-color 1.2s ease,box-shadow .25s ease;box-shadow:0 7px 24px #5286c514}
#composer:focus-within{border-color:#3975ce;box-shadow:0 0 0 4px #dceaff,0 7px 24px #5286c514}
#composer #question{resize:none;border:0;outline:none;box-shadow:none;background:transparent;border-radius:20px;overflow-y:auto;transition:color 1s ease}
#composer #question:focus-visible{outline:none}
#composer #question::placeholder{color:#516f96;opacity:1}
#composer[data-hint-tone="mint"]{--bubble-accent:#73bba6}
#composer[data-hint-tone="lilac"]{--bubble-accent:#aa95d5}
#composer[data-hint-tone="rose"]{--bubble-accent:#d695b5}
#send{transition:transform .2s ease,background .3s ease}
#send:hover{transform:translateY(-2px);background:#1757ce}
#send:active{transform:scale(.95)}
@media(prefers-reduced-motion:reduce){#composer,#composer #question,#send{transition:none}#send:hover,#send:active{transform:none}}