:root{--ink:#263b37;--green:#245c57;--border:#d9dfd7}body{background:#faf8f2;color:var(--ink);font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif}header{gap:10px;background:#fffdf8;border-color:var(--border);padding-block:12px}.logo{width:48px;height:48px;border-radius:14px}.brand{font-size:22px;font-weight:850;letter-spacing:-1.2px}header small{color:var(--green)}.hero{isolation:isolate;background:#f9d992;border:0;min-height:260px;border-radius:26px}.intro{width:62%}.intro h1{color:#303d33}.intro p{color:#3d453a;font-size:17px}.primary,button.active{background:var(--green);border-color:var(--green)}.art{width:38%;display:grid;place-items:center;background:none;isolation:isolate}.art:before{content:"";background:#f3ad76;border-radius:50%;width:88%;aspect-ratio:1;position:absolute;z-index:-1;bottom:-38%}.art:after{content:"✦";position:absolute;top:20%;left:10%;color:#fff9e9;font-size:42px;transform:rotate(-9deg)}.art img{position:relative;inset:auto;width:95%;height:250px;object-fit:contain;border:0;box-shadow:none;transform:rotate(8deg)}h2{font-size:29px}.filters button{min-height:42px}.book{border-color:var(--border);box-shadow:0 3px 0 #3447360b}.details strong{line-height:1.16}.arrow{color:var(--green)}.pic{height:155px}.dock{position:sticky;bottom:0;z-index:4;display:flex;justify-content:center;gap:12px;background:#fffdf8f7;border-top:1px solid var(--border);padding:7px 8px max(7px,env(safe-area-inset-bottom));backdrop-filter:blur(12px)}body{min-height:100dvh;display:flex;flex-direction:column}main{width:100%;flex:1}.dock button{display:grid;justify-items:center;gap:3px;min-width:90px;font-size:12px;border:0;background:transparent;color:#53645f}.dock button[aria-current=true]{background:#deeee5;color:#164c44}.dock b{font-size:21px;line-height:1}.saved-card{display:flex;text-align:left;align-items:center;width:100%;margin:10px 0;gap:14px}.saved-card img{width:52px;height:65px;object-fit:cover;border:1px solid var(--border)}dialog{border:0;border-radius:20px;max-width:min(390px,92vw);padding:25px;box-shadow:0 15px 40px #243d332a}dialog p,#saved p{margin:12px 0;line-height:1.5}dialog::backdrop{background:#1e362f77}.tools{border-color:var(--border)}#status{display:block}.editor h1{color:var(--green)}button:focus-visible{outline:3px solid #cd7421;outline-offset:2px}
@media(max-width:650px){header{padding:9px 16px}.logo{width:41px;height:41px}.brand{font-size:20px}header small{display:none}main{padding:14px 14px 20px}.hero{min-height:200px}.intro{width:66%;padding:20px 0 20px 18px}.intro h1{font-size:clamp(28px,8vw,45px)}.intro p{font-size:14px;margin:9px 0 13px}.art{width:34%}.art img{width:155%;max-width:none;height:170px;left:-6%}.art:after{font-size:21px;top:12%;left:0}.art:before{width:180%;bottom:-23%}.details{min-height:75px}.pic{height:110px}.filters{gap:5px}.filters button{padding:8px 12px}.dock{justify-content:space-around;gap:2px}.dock button{flex:1;min-width:0}.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tools #colors{order:2;grid-column:1/-1;justify-content:space-between}.tools label{order:3;grid-column:1/-1;display:flex;align-items:center;gap:12px}.tools input[type=range]{flex:1}.tools .swatch{min-height:30px;width:30px;padding:0}.tools button,.pager button,.pager select{min-height:42px}.pager{gap:5px}.pager button{padding:8px}.editor h1{margin:14px 0}.section{gap:10px}.dock button{padding:6px}.tools #undo{grid-column:3;grid-row:1}}
@media print{body,main{display:block;min-height:0}.dock,#saved,dialog{display:none!important}}

.book{display:flex;flex-direction:column;align-items:stretch}
.book .details{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.book .details small{margin-bottom:12px}
.book-open{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:36px;padding:2px 16px 2px 8px;border-radius:24px;background:#245c57;color:#fffdf8;font-size:14px;margin-top:auto}
.book-open img{width:26px;height:30px;object-fit:cover}
@keyframes pencil-wave{35%{transform:rotate(-18deg)}70%{transform:rotate(10deg)}}
@media(prefers-reduced-motion:no-preference){.book:focus-visible .book-open img,.book:active .book-open img{animation:pencil-wave .36s ease-in-out}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.book:hover .book-open img{animation:pencil-wave .36s ease-in-out}}
.hero{background:#3566af;background-image:radial-gradient(#ffffff24 1.5px,transparent 2px);background-size:17px 17px;color:white;min-height:276px}.intro{width:46%;padding:26px 5%}.intro h1{font-size:clamp(42px,4.8vw,68px);line-height:.96;color:white;letter-spacing:-.055em}.intro em{color:#ffe196;font-style:normal}.intro p{color:white;margin:12px 0 15px}.intro button{background:#ffe196;color:#303344;border:0;border-bottom:4px solid #dfae58;border-radius:17px}.art{width:54%;position:relative}.art:after,.art:before{display:none}.art img.scene{position:absolute;inset:0;width:100%;height:100%;padding:6px;transform:none;object-fit:contain}.art img.guide-pencil{position:absolute;width:36%;height:56%;left:62%;top:41%;transform:rotate(11deg);filter:drop-shadow(2px 5px 0 #20345340)}
@media(max-width:650px){.hero{display:grid;grid-template-columns:1fr;min-height:0}.intro{width:100%;padding:18px 19px 17px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px}.intro h1{font-size:clamp(28px,7vw,40px)}.intro h1 br{display:none}.intro h1 em:before{content:" "}.intro button{grid-area:1/2/3/3;padding:10px 12px;font-size:14px}.intro p{font-size:13px;margin:7px 0 0}.art{grid-row:1;width:100%;height:clamp(136px,min(51vw,30dvh),228px)}.art img.guide-pencil{width:28%;height:65%;left:64%;top:48%}}
@media(max-width:360px){.intro{grid-template-columns:1fr}.intro button{grid-area:auto;justify-self:start;margin-top:10px}}
.new-paths{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.new-paths a,.pack-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px 16px;color:var(--ink);text-decoration:none}.new-paths a:first-child{background:#f2eaf9;border-color:#daceea}.new-paths a:last-child{background:#e6f2ea;border-color:#c8dfd0}.new-paths strong,.new-paths small,.pack-item small{display:block}.new-paths strong{font-size:18px;line-height:1.15}.new-paths small{margin-top:4px}.new-paths b{min-width:48px;height:48px;display:grid;place-items:center;border-radius:14px;transform:rotate(-5deg);font-size:25px}.play-icon{color:#55346b;background:#fff3b6}.pack-icon{color:#24695b;background:#cce3d6}.play-view{max-width:760px;margin:auto}.play-view>a{color:var(--green);font-weight:700}.play-view h1{font-size:clamp(32px,5vw,50px);margin:18px 0 8px}.game-link{display:inline-block;margin:16px 0}.play-board{position:relative;margin-top:18px;padding:clamp(18px,4vw,38px);border-radius:24px;background:#efe8fa;border:1px solid #d8cce7}.play-board h1,.play-board h2{color:#483266;max-width:78%;line-height:1.06}.play-mascot{position:absolute;right:2%;top:6px;width:19%;max-width:100px;pointer-events:none}.play-board p{margin:12px 0}.play-board h2{font-size:clamp(24px,5vw,34px);margin:10px 0 15px}#topics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.topic{display:grid;justify-items:center;gap:4px;color:#35314a;border:0;border-bottom:4px solid #38224024;border-radius:18px;padding:14px}.topic b{font-size:32px}.letras{background:#ffd594}.numeros{background:#b6dfef}.cores{background:#ffbdc3}.formas{background:#b8e1ce}#clue{background:#fffdf8;border-radius:20px;display:grid;place-items:center;min-height:135px;font:800 72px system-ui;color:#56386e}#answers{display:flex;gap:8px;margin:12px 0}#answers button{flex:1;display:grid;place-items:center;min-height:66px;font:700 32px system-ui;color:#4e3c64;border-bottom-width:3px}#answers .again{font-size:16px}#answers button.correct{opacity:1;background:#d6f6db;border-color:#258058}.paint-chip{width:clamp(30px,9vw,54px);height:38px;border-radius:8px 8px 15px 15px;border:2px solid #28223140;border-top:6px solid #302b3d}#clue .paint-chip{border:0;border-radius:46% 54% 57% 43%;width:73px;height:65px}.dots{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.dots i{width:19px;height:19px;border-radius:50%;background:#376fbb}#roundInfo{color:#635374}#changeTopic{margin:5px}#packList{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:8px}.pack-item img{width:47px;height:62px;object-fit:contain}.pack-item span{font-weight:bold}.pack-item small{font-weight:normal}#packRetry{margin:8px}#feedback{min-height:1.4em;font-weight:bold;color:#344f41}
@media(max-width:520px){.new-paths{gap:7px}.new-paths a{align-items:flex-start;padding:10px;flex-direction:column;gap:7px}.new-paths b{min-width:32px;height:30px;font-size:18px;border-radius:8px}.new-paths strong{font-size:15px}.new-paths small{font-size:12px}}
.dock button img{width:40px;height:34px;object-fit:contain}.dock button{min-width:100px;gap:4px}.play-view>a:first-child{display:inline-flex;align-items:center;gap:7px;text-decoration:none}.back-art{width:25px;height:25px;object-fit:contain}.path-art{width:50px;height:48px;object-fit:contain}.play-board{background:#f6effa;border-color:#e1d3e8}.play-mascot{width:18%;top:14px;right:4%}.topic{gap:9px;padding:16px 8px 12px;font-size:18px;color:#363044}.topic img{width:100%;height:clamp(84px,18vw,132px);object-fit:contain;filter:drop-shadow(0 3px 1px #4a364024)}#topics{gap:12px}.topic.letras{background:#ffe7b2}.topic.numeros{background:#d5edf8}.topic.cores{background:#ffdee0}.topic.formas{background:#d6efdf}
@media(max-width:650px){.path-art{width:40px;height:38px}.play-mascot{width:22%;max-height:86px;object-fit:contain}.play-board h1{max-width:75%}.dock button img{height:33px}.dock button{min-width:0}}
.book .pic{display:block;height:auto;aspect-ratio:2 / 1;padding:0;background:none}
.book .pic img{display:block;width:100%;height:100%;object-fit:cover;transform:none;border-radius:0;box-shadow:none}
.counting-toys{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:clamp(5px,1.3vw,12px);max-width:100%;padding:12px;place-items:center}
.counting-toys img{display:block;width:clamp(34px,9vw,63px);max-width:100%;height:clamp(34px,9vw,63px);object-fit:contain}
#answers .number-toy{height:clamp(40px,11vw,58px);width:100%;object-fit:contain}
/* Warm paper background and illustrated painting desk. */
@media screen{
 body{background-color:#ffd69b;background-image:radial-gradient(ellipse at 12% 4%,#ffb64f 0%,transparent 46%),radial-gradient(ellipse at 94% 6%,#ffa348 0%,transparent 42%),radial-gradient(#e89e5745 1.2px,transparent 1.4px);background-size:auto,auto,15px 15px;background-attachment:fixed}
 header{background:#fffaef;border-color:#f4bb77}
 .hero{background-color:#f37f27;background-image:radial-gradient(ellipse at 78% 46%,#ffd45f 0%,transparent 51%),linear-gradient(125deg,#e97021,#ffad37);background-size:100% 100%;border:2px solid #ffefcf;box-shadow:0 4px 0 #dc862e42}
 .intro h1,.intro p{color:#412740}.intro em{color:#fff9e9;text-shadow:0 2px #a2532b}.intro button{background:#245c57;color:white;border-bottom-color:#173e39}
 .art::before{display:block;content:"";position:absolute;width:72%;height:135%;top:4%;left:14%;border-radius:50%;background:#ffeaaa59}.art img.scene{filter:drop-shadow(0 5px 4px #99512630)}
 #saved,.play-view{background:#fff5e3;padding:clamp(14px,3vw,28px);border-radius:24px}
 .editor{background:#fff3d9;border:2px solid #fff6e9;padding:clamp(10px,2vw,22px);border-radius:24px;box-shadow:0 6px 0 #ca782431}
 .studio-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.studio-heading img{width:60px;height:60px;object-fit:contain}
 .editor .tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fffcf4;border-color:#ebc698}.editor .tools label{display:inline-flex;align-items:center;gap:6px;order:0}.editor .tools input{accent-color:#245c57;width:80px}
 .drawing-desk{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;align-items:start;margin-top:10px;padding:14px;border-radius:20px;background:#fac47b;border:1px solid #edac60}
 .paper{width:100%;margin:0 auto;border-radius:4px;overflow:hidden;box-shadow:0 3px 9px #703d2430}
 #colors{display:grid;gap:4px;background:#fff3d5;border-radius:14px;padding:6px;box-shadow:inset 0 1px 4px #a2673e20}
 #colors .swatch{display:grid;place-items:center;width:100%;height:38px;min-height:0;padding:3px;border:2px solid transparent;border-radius:9px;background:transparent;box-shadow:none;outline:0}
 #colors .swatch[aria-pressed=true]{background:white;border-color:#245c57}
 #colors .swatch:focus-visible{outline:2px solid #2a6086}
 #colors img{width:100%;height:100%;object-fit:contain}
 @media(max-width:650px){.drawing-desk{grid-template-columns:1fr;gap:8px;padding:7px}.editor .tools{margin:8px 0;padding:7px;gap:6px}.editor .tools button{padding:7px 10px}.editor .tools input{width:60px}.studio-heading img{width:46px;height:46px}.editor .pager{gap:4px}.editor #colors{grid-template-columns:repeat(4,1fr);gap:2px;padding:4px}.editor #colors .swatch{height:32px}.editor .pager select{max-width:46%}.art::before{width:68%;height:170%;top:-15%;left:16%}.editor{padding:8px}}
}
#chooseMascot{display:flex;align-items:center;gap:6px;margin-left:auto;padding:4px 12px 4px 5px;border:1px solid #e9ba7c;border-radius:24px;background:white;font-size:14px}
#chooseMascot img{width:33px;height:33px;object-fit:contain}
#mascotDialog{width:min(440px,92vw);padding:26px 19px 18px;background:#fff8e9;color:#283b36}
#mascotDialog h2{padding-right:32px}.close-dialog{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:24px}
.avatars{display:grid;grid-template-columns:1fr 1fr;gap:10px}.avatars button{display:grid;justify-items:center;align-content:end;gap:9px;padding:12px 7px;font-size:17px;background:#d3efff;border:2px solid transparent}.avatars button:nth-child(2){background:#ffe0e6}.avatars button[aria-pressed=true]{border-color:#245c57}.avatars img{width:100%;height:clamp(90px,24vw,143px);object-fit:contain}
@media print{.editor>.drawing-desk{display:block!important}.drawing-desk>#colors,#mascotDialog{display:none!important}.drawing-desk{border:0;padding:0;margin:0;background:white}}

.paper{isolation:isolate}.paper canvas{mix-blend-mode:multiply}

#ink.shows-pencil{cursor:none}
#pencilPointer{
 position:absolute;z-index:1;width:54px;height:9px;max-width:none;
 transform-origin:right center;transform:translate(-100%,-50%) rotate(135deg);
 pointer-events:none;user-select:none;filter:drop-shadow(0 1px 1px #53402f55)
}
@media print{#pencilPointer{display:none!important}}

.welcome{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:11px 16px;margin-top:8px;background:#fff9eb;border:1px solid #e6c391;border-radius:18px;color:#24564e}
.welcome h2{margin:0 auto 0 0;font-size:clamp(16px,3vw,20px);line-height:1.2;letter-spacing:-.025em}
.welcome-languages{display:flex;gap:7px;flex-wrap:wrap}
.welcome-languages button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:6px 13px;border:1px solid #b4c9ba;border-radius:14px;background:#fffef8;color:#24564e;font-size:14px;font-weight:750}
.welcome-play{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.welcome-languages button[aria-pressed=true]{background:#245c57;border-color:#245c57;color:white}
.welcome-languages button[aria-pressed=true] .welcome-play{width:9px;height:9px;border:0;border-radius:1px;background:currentColor}
.welcome-caption,.welcome-error{flex-basis:100%;margin:0;line-height:1.45;color:#3f5149;font-size:14px}
@media(max-width:420px){.welcome{padding:8px 11px;gap:5px 10px}.welcome-languages{gap:5px}.welcome-languages button{padding-inline:9px}}

@media screen and (orientation:landscape) and (min-width:480px) and (max-width:950px) and (max-height:550px){
 .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
 .hero .intro{grid-area:1/1;display:block;width:100%;padding:14px 16px}
 .hero .intro h1{font-size:clamp(25px,4.5vw,37px)}
 .hero .intro p{margin:6px 0 9px}
 .hero .art{grid-area:1/2;width:100%;height:auto;min-height:clamp(128px,45dvh,192px)}
}
.offline-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 18px;margin:16px 0 8px;padding:clamp(17px,4vw,30px);background:#fff8e9;border:1px solid #e7b97a;border-radius:22px}
.offline-card .offline-bag{width:clamp(58px,12vw,90px);height:auto;object-fit:contain}
.offline-card h1{margin:0 0 5px;font-size:clamp(28px,5vw,42px)}
.offline-card p{margin:0;color:#31524a}
.offline-download{grid-column:1/-1;display:grid;justify-items:start;gap:10px}
.offline-download #packStatus{font-weight:750}
#packAction,#offlineLibrary{min-height:44px;margin:0;padding:10px 17px}
#packProgress{width:100%;height:14px;accent-color:#22675d}
#packList .pack-item img{width:64px;height:45px;border-radius:8px;object-fit:cover}
@media(max-width:480px){.offline-card{grid-template-columns:54px 1fr;gap:10px}.offline-card .offline-bag{width:52px}.offline-card #packDescription{font-size:14px}}