@font-face{font-family:Kidmons;src:url(assets/fonts/Baloo2.ttf) format('truetype');font-weight:400 800;font-display:swap}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{font-family:Kidmons,'Trebuchet MS',Arial,sans-serif;color:#314258;background:#faf4e8}button,select,input{font:inherit}button,select{border:2px solid transparent;border-radius:16px;min-height:44px;padding:6px 14px;color:#314258;background:white;font-weight:700;cursor:pointer;box-shadow:0 3px 0 #31425815;touch-action:manipulation}button:hover{filter:brightness(.97);transform:translateY(-1px)}button:active{transform:translateY(2px);box-shadow:none}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #314258;outline-offset:3px}button[aria-pressed=true],button.selected{background:#e4ddff;border-color:#8170b8}button:disabled{opacity:.45;cursor:default}.primary{background:#675798;color:white;padding:9px 26px}.warm{background:#ffe3a0}.danger{color:#a23e53}#app{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);max-width:1600px;margin:auto}header{display:flex;align-items:center;gap:8px;padding:8px 14px;flex:none}header h1{font-size:clamp(16px,2.8vw,26px);line-height:1.05;margin:0;flex:1;font-weight:800}header select{max-width:90px}header button{padding:4px 10px;min-width:44px}#screen{display:flex;flex:1;min-height:0;flex-direction:column}#tools,#bottom{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px 12px;flex:none}#tools:empty,#bottom:empty{display:none}#stage{flex:1;min-height:160px;position:relative;overflow:hidden;border-radius:28px;margin:4px 14px;background:#edf3ef;box-shadow:inset 0 0 0 1px #31425808}#stage canvas{display:block;touch-action:none}#status{font-size:clamp(14px,2vw,18px);text-align:center;margin:0;padding:3px 15px;min-height:28px;flex:none}#palette{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.swatch{width:44px;height:44px;border-radius:50%;padding:0;border:3px solid #ffffff;box-shadow:0 2px 5px #31425830;font-family:Arial;font-size:15px;color:#1b2433;text-shadow:0 0 2px white}.swatch[aria-pressed=true]{outline:3px solid #314258;outline-offset:1px}.menu{overflow:auto;padding:12px 20px 30px;flex:1}.hero{display:flex;align-items:center;gap:24px;max-width:1050px;margin:auto auto 20px;background:#eee8f7;border-radius:32px;padding:24px 36px}.hero img{width:clamp(100px,24vw,230px);height:200px;object-fit:contain;animation:float 3.5s ease-in-out infinite}.hero h2{font-size:clamp(24px,4vw,42px);line-height:1.1;margin:0 0 12px}.hero p{font-size:18px;line-height:1.4;margin:8px 0;color:#617086}.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:12px;color:#8170b8}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px;max-width:1100px;margin:auto}.card{padding:12px;border-radius:24px;background:#fff;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.card img{width:130px;height:110px;object-fit:contain}.card small{color:#7b7390}.menu-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:15px}.subtitle{font-size:18px;text-align:center;margin:10px}.pills{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:10px}dialog{border:0;border-radius:28px;box-shadow:0 20px 80px #31425855;max-width:min(560px,90vw);max-height:85dvh;overflow:auto;padding:28px;color:#314258;background:#fffdf8}dialog::backdrop{background:#31425855}dialog h2{font-size:28px;line-height:1.2}dialog img{max-width:100%;max-height:300px;object-fit:contain}dialog .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}.result-stars{font-size:48px;color:#edba55;text-align:center;letter-spacing:9px}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.gallery-grid img{width:100%;height:auto;border-radius:12px}label{display:flex;align-items:center;gap:6px}input[type=range]{max-width:95px}a{color:#675798}progress{accent-color:#8b77b7}.care-meters{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:14px}.meter{min-width:70px;text-align:center}.meter progress{display:block;width:85px;height:12px}#loading{position:absolute;inset:0;display:grid;place-content:center;color:#8170b8}footer{text-align:center;font-size:11px;opacity:.65;padding:0 0 3px}#tools button,#bottom button{font-size:15px;padding:5px 11px}.info{background:#eff3f4;padding:12px;border-radius:16px}.compact{font-size:13px}body[data-kind=glow] #stage{background:#10172f}body[data-kind=music] #stage{background:#edf1fa}@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}@media(max-width:600px){header{gap:5px;padding:7px 9px}header h1{font-size:17px}header select{max-width:65px;padding:5px}header button{padding:4px 7px}#stage{margin:3px 8px;border-radius:22px}#tools,#bottom{gap:5px;padding:4px 7px}#tools button,#bottom button{font-size:14px;padding:4px 9px}.hero{gap:8px;padding:18px;margin-bottom:14px}.hero img{height:120px;width:110px}.hero p{font-size:14px}.hero h2{font-size:24px}.menu{padding:8px 12px 20px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card{min-height:150px}.card img{width:100%;height:90px}.swatch{width:38px;height:38px;min-height:38px}.meter progress{width:68px}.care-meters{gap:6px}.eyebrow{font-size:10px;letter-spacing:1px}}@media(max-height:480px) and (orientation:landscape){header{padding:4px 10px}header h1{font-size:17px}header button,header select{min-height:34px}#tools,#bottom{padding:3px 8px;gap:4px}#tools button,#bottom button{min-height:36px;font-size:13px;padding:2px 9px}.swatch{width:32px;height:32px;min-height:32px}#stage{min-height:100px;margin:1px 10px}#status{font-size:13px;min-height:20px;padding:0}.hero{padding:12px}.hero img{height:100px}.hero h2{font-size:28px}.care-meters{font-size:11px}.meter progress{height:8px}footer{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
header h1{min-width:0;overflow:hidden;text-overflow:ellipsis}header button{flex-shrink:0}@media(max-width:420px){header{flex-wrap:wrap}header h1{flex-basis:calc(100% - 58px);order:0}header #home{order:0}header #languages,header #sound,header #music,header #help,header #fullscreen{order:1}header #languages{margin-left:auto}header #fullscreen{margin-right:auto}.hero{flex-direction:column;text-align:center}.hero img{height:105px;width:115px}.hero p{margin-bottom:0}}@media(max-height:480px) and (orientation:landscape){header{flex-wrap:nowrap}header h1{flex-basis:auto}}

/* The portal owns fullscreen. Keep the activity inside the actual iframe viewport. */
html,body{overflow:hidden;min-width:0;min-height:0}
#app{width:100%;height:100%;max-height:100%;min-width:0;min-height:0;overflow:hidden}
#screen{flex:1 1 0;min-width:0;min-height:0;overflow:hidden}
#stage{flex:1 1 0;min-width:0;min-height:0!important}
#stage canvas{position:absolute;inset:0;max-width:100%;max-height:100%;margin:0!important}
.menu{min-width:0;min-height:0;overscroll-behavior:contain}
@media(max-width:420px){header #help{margin-right:auto}}
@media(max-height:420px){header{padding:3px 8px;gap:4px}header button,header select{min-height:32px;padding:2px 7px}header h1{font-size:16px}#tools,#bottom{padding:2px 5px;gap:4px}#tools button,#bottom button{min-height:32px;padding:2px 7px;font-size:12px}.swatch{width:30px;height:30px;min-height:30px}#status{min-height:18px;padding:0 7px;font-size:12px}footer{display:none}}

@media(max-width:420px){#tools button,#bottom button{min-height:36px;font-size:12px;padding:3px 7px}#tools select{min-height:36px;padding:3px 7px}#tools,#bottom{gap:4px;padding:3px 6px}#palette{gap:4px;flex-basis:100%}.swatch{width:34px;height:34px;min-height:34px}#status{font-size:12px;min-height:20px;padding:1px 8px}}

/* A quiet play surface, illustrated navigation and clear, tactile controls. */
body{background:radial-gradient(ellipse at 0 0,#eee8ff,transparent 48%),radial-gradient(ellipse at 100% 100%,#e4f3ed,transparent 50%),#fffaf1}
header{border-bottom:1px solid #73658f12;background:#fffaf3d9;box-shadow:0 3px 18px #51487505}
header h1{color:#514875;letter-spacing:-.4px}
header #home{position:relative;width:44px;height:44px;padding:3px!important;flex:0 0 44px;background:#eee6ff;border-color:#e3d7fa;overflow:visible}
.home-mascot{display:block;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 1px #51487518)}
.home-glyph{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;line-height:16px;border-radius:7px;background:white;color:#8170b8;font-size:13px;box-shadow:0 1px 4px #51487520}
button,select{transition:background-color .16s,border-color .16s,box-shadow .16s;position:relative}
button[aria-pressed=true],button.selected{box-shadow:0 3px 0 #8170b820,inset 0 0 0 1px #8170b82a}
button[data-action=record][aria-pressed=true]::after{content:'';position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;background:#de667f;animation:record-glow 1s ease-in-out infinite}
#stage{background:radial-gradient(ellipse at 25% 10%,#fffdfb,#eef4f0);box-shadow:inset 0 0 0 2px #ffffffc9,0 4px 15px #51487508}
body[data-kind=music] #stage{background:radial-gradient(ellipse at 70% 0,#fffaf0,#e9edfb)}
#tools,#bottom{background:#fffaf180}
#status{position:relative;color:#6a6481;line-height:1.25}
#status[data-progress=true]{padding-bottom:7px}
#status[data-progress=true]::after{content:'';position:absolute;bottom:1px;left:12%;width:76%;height:4px;border-radius:10px;background:linear-gradient(90deg,#9ccbb4 0 var(--progress,0%),#e7e4ed var(--progress,0%) 100%);transition:background .2s}
.hero{background:radial-gradient(circle at 10% 20%,#ffffffb0,transparent 55%),linear-gradient(120deg,#efe4ff,#e8f3ee);box-shadow:0 8px 24px #51487508,inset 0 0 0 2px #ffffff80}
.hero img{filter:drop-shadow(0 8px 5px #51487510)}
.cards .card{border:2px solid #ffffff;box-shadow:0 5px 0 #dcd6e55c,0 8px 20px #51487508;background:linear-gradient(165deg,#fff,#fffaf3);animation:card-in .4s both}
.cards .card:nth-child(2n){animation-delay:.03s}.cards .card:nth-child(3n){animation-delay:.06s}.cards .card:nth-child(4n){animation-delay:.09s}
.card>span{font-size:16px;line-height:1.2;color:#514875}.card small{font-size:19px;color:#d99835;letter-spacing:3px}
.card img{filter:drop-shadow(0 4px 3px #51487510);transition:transform .2s}
@media(hover:hover){.card:hover{border-color:#d4c3ef;box-shadow:0 6px 0 #c6b8dc50,0 12px 24px #51487512}.card:hover img{transform:translateY(-3px) rotate(-2deg)}}
dialog{border:3px solid #fff;box-shadow:0 15px 80px #51487540;background:linear-gradient(145deg,#fffdf7,#f7f0ff)}
dialog h2{text-align:center;margin-top:3px;color:#675798}.result-content{text-align:center}.result-mascot{display:block;width:130px;height:120px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 6px 4px #51487515);animation:result-in .5s cubic-bezier(.2,.8,.25,1.3) both}
.result-stars{letter-spacing:0;display:flex;gap:8px;justify-content:center}.result-stars span{display:inline-block;animation:star-in .45s var(--delay,0ms) both}
@keyframes card-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes result-in{from{opacity:0;transform:translateY(20px) scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes star-in{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes record-glow{50%{opacity:.35}}
@media(max-width:420px){header{display:grid;grid-template-columns:44px 1fr repeat(3,36px);grid-template-rows:44px 36px;gap:4px;padding:5px 8px}header #home{grid-row:1;grid-column:1}header h1{grid-row:1;grid-column:2/-1;font-size:17px;flex-basis:auto}header #languages{grid-row:2;grid-column:2;margin:0;justify-self:end}header #sound{grid-row:2;grid-column:3}header #music{grid-row:2;grid-column:4}header #help{grid-row:2;grid-column:5;margin:0}header #sound,header #music,header #help{width:36px;min-width:36px;min-height:36px;padding:0}.card>span{font-size:14px}.result-mascot{height:100px;width:110px}}
@media(max-height:420px){header #home{height:34px;width:36px;flex-basis:36px}.home-mascot{height:26px;width:28px}#status[data-progress=true]{padding-bottom:5px}}
@media(prefers-reduced-motion:reduce){.card,.result-mascot,.result-stars span,button::after{animation:none!important}.card img,button,select{transition:none!important}}

.brush-select{display:none}body[data-kind=coloring] canvas,body[data-kind=symmetry] canvas,body[data-kind=pixel] canvas{cursor:crosshair}body[data-kind=tangram] canvas{cursor:grab}#stage canvas:focus-visible{outline:3px solid #8170b8;outline-offset:-4px}@media(max-width:420px){.brush-select{display:inline-block;max-width:115px}.brush-pill{display:none}}