@import url('./assets/fonts.css');
:root{font-family:Nunito,'Trebuchet MS',Arial,sans-serif;color:#4b386b;font-synthesis:none;font-weight:700;--ink:#4b386b;--purple:#9465c6;--deep:#7650a5;--cream:#fffdf8;--line:#ede5f4;--shadow:0 5px 0 #6d4a9133,0 12px 28px #3b245529;--radius:28px;--max:470px}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;background:#e5e6ef}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #5636aa;outline-offset:4px}button svg{width:23px;height:23px;flex:none}a{color:inherit;text-decoration:none}button{border:0}button:active:not(:disabled),.game-tile:active{transform:translateY(2px)}[hidden]{display:none}h1,h2,p{margin:0}svg{display:block}.scene{position:fixed;inset:0;z-index:-3;background-color:#ddd9ef;background-image:url('./assets/scenes.svg');background-repeat:no-repeat;background-size:cover;pointer-events:none;isolation:isolate}.theme-0{background-image:url('./assets/scenes.svg#theme0')}.theme-1{background-image:url('./assets/scenes.svg#theme1')}.theme-2{background-image:url('./assets/scenes.svg#theme2')}.theme-3{background-image:url('./assets/scenes.svg#theme3')}.theme-4{background-image:url('./assets/scenes.svg#theme4')}.theme-5{background-image:url('./assets/scenes.svg#theme5')}.theme-6{background-image:url('./assets/scenes.svg#theme6')}.theme-7{background-image:url('./assets/scenes.svg#theme7')}.theme-8{background-image:url('./assets/scenes.svg#theme8')}.ambient-light{position:fixed;inset:0;z-index:-2;background:#eee4f443;pointer-events:none}.playing .ambient-light{background:transparent}body:not(.playing) .scene{filter:saturate(.87)}
.circle{width:46px;height:46px;display:inline-grid;place-items:center;flex:none;border-radius:17px;border:2px solid #fff;background:linear-gradient(#fffef9,#f7f0ff);color:#8455aa;box-shadow:0 3px 0 #78559c31,0 5px 12px #3b24551c}.circle svg{width:22px;height:22px}.site-header,.play-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.site-header{min-height:54px}.header-right{display:flex;gap:8px;align-items:center}.brand{font-size:14px;letter-spacing:3.6px;text-align:center;font-weight:900}.brand span{display:block;font-size:10px;letter-spacing:1.2px;font-weight:700;margin-top:3px}.catalog{max-width:1050px;margin:auto;padding:22px 22px 30px;padding-top:calc(22px + env(safe-area-inset-top))}.catalog-hero{max-width:610px;margin:35px auto 30px;text-align:center}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:#806295}.catalog-hero h1{position:relative;font-size:clamp(38px,7vw,58px);letter-spacing:-1.9px;line-height:1.25;font-weight:900;margin:10px 0 12px}.catalog-hero em{font-style:normal;color:#9c5bb2}.hero-star{font-size:26px;position:absolute;margin:0 0 0 8px;top:-8px;color:#edbb4d;text-shadow:0 2px #fff}.catalog-hero p{font-size:15px;line-height:1.7;color:#765f88;font-weight:700}.hero-note{font-size:11px;background:#fffcf9c9;padding:7px 13px;border:1px solid white;border-radius:20px;display:inline-flex;align-items:center;gap:7px;margin-top:17px}.note-star{color:#bc8f3a;font-size:21px;line-height:.7}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.game-tile{background:#fffdfb;border:3px solid #fff;box-shadow:var(--shadow);border-radius:27px;overflow:hidden;transition:transform .2s,box-shadow .2s}.game-tile:hover{transform:translateY(-3px);box-shadow:0 7px 0 #6d4a9133,0 18px 30px #3b245529}.tile-art{height:145px;background-size:cover;display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden}.tile-art:before{content:'';position:absolute;inset:0;background:#fff2;z-index:-1}.tile-mark{font-size:52px;font-weight:900;letter-spacing:2px;color:#fff5ea;text-shadow:0 3px 0 #9c6caa,2px 0 #9c6caa,-2px 0 #9c6caa,0 6px 15px #49395b4d;transform:rotate(-6deg)}.mark-colors{color:#f39a59;letter-spacing:-5px;text-shadow:0 3px 0 #fff;word-spacing:0}.mark-colors:first-letter{color:#ee739d}.mark-shapes{font-size:49px;color:#f8dc86}.mark-addition,.mark-subtraction{font-size:90px;line-height:.9}.tile-content{padding:17px 18px 15px}.tile-tag{font-size:8px;font-weight:900;letter-spacing:1.3px;color:#aa8db5}.tile-content h2{font-size:24px;font-weight:900;margin:3px 0 4px}.tile-content p{font-size:12px;color:#8c769a;font-weight:700;line-height:1.5;min-height:36px}.tile-open{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:900;color:#9e67b7;margin-top:14px;border-top:1px solid #f1eaf4;padding-top:10px}.tile-open svg{height:21px;width:21px;padding:3px;border-radius:50%;background:#f4eaf8}.parent-info{max-width:620px;margin:32px auto 0;background:#fffaf4d9;border:1px solid #fff;border-radius:20px;padding:15px 18px;font-size:12px;line-height:1.7;color:#82678f}.parent-info summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:900}.parent-info svg{width:18px;height:18px;color:#c19e5d}.parent-info p{margin-top:12px}.parent-info button{background:#a06cc3;color:white;border-radius:12px;padding:10px 18px;margin-top:10px}.catalog-footer{text-align:center;margin-top:25px;font-size:11px;color:#8e789c;line-height:1.7}.catalog-footer span{display:block;font-size:9px;letter-spacing:1.5px;margin-top:11px}
.menu-shell{max-width:var(--max);margin:auto;padding:18px 18px 25px;padding-top:calc(18px + env(safe-area-inset-top));min-height:100dvh}.mode-panel{margin:40px 0 20px;background:#fffdf8ed;border:2px solid white;padding:26px 20px;border-radius:32px;box-shadow:var(--shadow);text-align:center}.mode-panel h1{font-size:36px;letter-spacing:-1px;margin-top:8px;font-weight:900}.menu-subtitle{font-size:13px;line-height:1.6;color:#9b7ca7;margin:8px 0 24px}.mode-list{display:grid;gap:12px}.mode-list>button{display:flex;align-items:center;text-align:left;gap:12px;background:#fff8fa;border:1px solid #efe4ed;box-shadow:0 3px 0 #eadfec;border-radius:20px;padding:15px 12px;min-height:84px}.mode-list>button:nth-child(2){background:#f7f5ff}.mode-list>button:nth-child(3){background:#fff8e9}.mode-list>button>span:nth-child(2){flex:1}.mode-list strong{display:block;font-size:15px;font-weight:900}.mode-list small{display:block;color:#a18caf;font-size:10px;margin-top:4px;line-height:1.5}.mode-list>button>svg{width:18px}.mode-symbol{font-size:20px;color:#ba84c9;min-width:46px;text-align:center;font-weight:900;letter-spacing:-1px}.mode-symbol svg{margin:auto}.colorful{color:#e58688}.menu-foot{text-align:center;color:#fff;font-size:11px;font-weight:800;text-shadow:0 1px 7px #442856}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:20px;min-height:51px;width:100%;background:linear-gradient(130deg,#bb83d4,#9862bf);color:#fff;border:2px solid #fff;border-radius:18px;box-shadow:0 4px 0 #79519f3d;font-size:15px;font-weight:900;margin-top:20px;padding:10px 12px}.secondary{background:#f3e7fc;color:#8d5db3;margin-top:14px}.text-button{background:none;min-height:46px;margin-top:12px;font-size:12px}.character-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.character-grid button{min-height:45px;border-radius:13px;background:#f6edf9;box-shadow:0 2px 0 #e6d6ef;color:#9968b4;font-size:21px}.shape-levels{display:grid;grid-template-columns:1fr 1fr;gap:12px}.shape-levels button{padding:14px 10px;border:1px solid #ede3f1;border-radius:22px;background:#fff9ff;box-shadow:0 3px 0 #eadfec}.shape-levels button>span{display:grid;place-items:center;margin:0 auto 10px;background:#ecddf5;color:#a777c6;border-radius:18px;width:49px;height:49px;font-size:27px;font-weight:900}.shape-levels strong{font-size:13px;display:block}.shape-levels small{font-size:9px;color:#a08aaa;display:block;margin-top:6px}.bonus-button{background:#fff5da;min-height:46px;width:100%;border-radius:16px;margin-top:16px;font-size:12px;color:#ac8554}.level-choice{border:0;margin:26px 0 0;padding:0;display:flex;justify-content:center;gap:12px}.level-choice legend{font-size:11px;margin:0 auto 10px;color:#a080ac}.level-choice input{position:absolute;opacity:0}.level-choice label span{width:44px;height:44px;display:grid;place-items:center;background:#f2e8f7;border-radius:14px;cursor:pointer}.level-choice input:checked+span{background:#ad7ecb;color:white}.level-choice input:focus-visible+span{outline:3px solid #7650a5}.math-intro{display:flex;align-items:center;justify-content:center;gap:12px;font-size:33px;margin:30px 0 20px}.illustrated-apple{width:57px;height:53px;background:radial-gradient(circle at 30% 30%,#ffb8b0,#ef6467 50%,#d04753);border-radius:42% 42% 50% 50%;position:relative;transform:rotate(-9deg);box-shadow:inset -3px -4px 0 #bd435a33,0 4px 0 #b889a333}.illustrated-apple:before{content:'';position:absolute;width:21px;height:11px;border-radius:90% 0;background:#7fb97b;right:8px;top:-8px;transform:rotate(-22deg)}.round-description{color:#947da5;font-size:14px;line-height:1.7}#word-form{text-align:left}#word-form label{font-size:12px;color:#9679a5}#parent-word{display:block;width:100%;height:56px;margin:10px 0 0;padding:10px 12px;border:2px solid #e6d6f1;border-radius:16px;background:white;color:#80519e;font-size:22px;letter-spacing:2px;text-transform:uppercase}#parent-word::placeholder{font-size:15px;letter-spacing:0;color:#bca9c9}#word-error{font-size:12px;color:#b56375;line-height:1.5;margin-top:10px;min-height:18px}.finish-rabbit{width:105px;margin:14px auto}.finish-rabbit svg{width:100%}
.playing{height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}.play-shell{height:100vh;height:100dvh;max-width:var(--max);margin:auto;display:grid;grid-template-rows:48px 42px minmax(0,1fr) auto minmax(35px,10vh);gap:10px;padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));overflow:hidden}.play-header{padding:0 8px;min-width:0}.play-header .circle{height:44px;width:44px;border-radius:16px}.play-header .header-right{gap:6px}.counter{display:flex;gap:9px;align-items:center;justify-content:center;background:#fffdf6ed;border:2px solid #fff;border-radius:24px;min-width:78px;padding:8px 12px;font-size:12px;color:#a07ab7;box-shadow:0 3px 0 #7c4d9d31}.counter #counter-current{color:#8050a0;font-size:16px;font-weight:900}.counter-line{width:1px;height:16px;background:#d8c3e4;transform:rotate(20deg)}.selector{display:flex;gap:3px;overflow-x:auto;overflow-y:hidden;max-width:100%;align-items:center;scrollbar-width:none;background:#fffdf8f2;border:2px solid white;border-radius:24px;box-shadow:0 3px 0 #7451912c;margin:0 12px;padding:0 4px}.selector::-webkit-scrollbar{display:none}.selector-item{display:inline-grid;place-items:center;border-radius:50%;color:#9b7aad;font-size:17px;font-weight:900;background:transparent;min-width:42px;height:40px;flex:none}.selector-item.current{background:#b181ce;color:white;width:34px;min-width:34px;height:34px;box-shadow:inset 0 2px 2px #fff5,0 2px 2px #7e4a9f33}.selector span.selector-item{min-width:25px;font-size:16px}.play-main{min-height:0;display:flex;align-items:center;justify-content:center;margin:0 16px}.trace{grid-template-rows:48px 44px minmax(0,1fr) 48px 46px minmax(35px,10vh);gap:9px}.trace-card,.activity-card{position:relative;background:linear-gradient(150deg,#fffefa,#fff9fd);border:3px solid white;border-radius:32px;box-shadow:0 5px 0 #9d77ba44,0 8px 24px #50396933;display:flex;flex-direction:column;min-height:0;width:100%;height:100%;max-height:430px;padding:8px 10px 10px}.trace-pad{width:100%;min-height:0;height:100%;flex:1;touch-action:none;user-select:none}.guide-corridor{fill:none;stroke:#f2eaf5;stroke-width:23;stroke-linecap:round;stroke-linejoin:round}.guide-dots{fill:none;stroke:#a273bc;stroke-width:4.3;stroke-dasharray:5 10;stroke-linecap:round;stroke-linejoin:round}.ink-stroke{fill:none;stroke-width:16.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.trace-status{flex:none;height:24px;text-align:center;font-size:11px;font-weight:800;color:#b098c0;display:flex;align-items:center;justify-content:center}.trace-status.yes,.math-feedback.yes,.sort-feedback.yes{color:#a17a31;font-weight:900}.trace-status.yes{font-size:16px}.card-footer{position:relative;min-height:53px;flex:none;padding:9px 65px 5px 5px;display:flex;justify-content:center;flex-direction:column;gap:7px}.next{position:absolute;right:1px;bottom:1px;width:51px;height:51px;border-radius:50%;background:linear-gradient(135deg,#bc8ad6,#9462bd);color:#fff;box-shadow:0 3px 0 #7d519c77,0 4px 11px #69408b33}.next svg{width:27px;height:27px}.next:disabled{opacity:.26;filter:saturate(.3);box-shadow:none}.tiny-hint{font-size:9px;color:#b7a1c2;font-weight:700;line-height:1.5;text-align:center}.trace-meter{height:5px;border-radius:9px;background:#ede5f4;overflow:hidden}.trace-meter span{height:100%;display:block;width:0;background:linear-gradient(90deg,#e9aac9,#ad7cce);border-radius:9px;transition:width .1s}.palette{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));max-width:350px;width:100%;height:48px;margin:auto;align-items:center;background:#fffcf6f5;border:2px solid white;border-radius:28px;box-shadow:0 3px 0 #74519138;padding:0 2px}.paint{height:44px;min-width:0;background:transparent;display:grid;place-items:center;padding:0;border-radius:50%}.paint>span{display:block;width:30px;height:30px;border-radius:50%;background:var(--paint);border:2px solid #fff;box-shadow:inset 0 2px 3px #fff4,0 1px 3px #62447b33}.paint[aria-pressed=true]>span{outline:2px solid var(--paint);outline-offset:2px}.paint-0{--paint:#ee4a88}.paint-1{--paint:#fb913c}.paint-2{--paint:#f3c52f}.paint-3{--paint:#30ad72}.paint-4{--paint:#369de0}.paint-5{--paint:#9765d8}.paint-6{--paint:#34425c}.tools{display:flex;justify-content:center;gap:6px;max-width:350px;margin:auto;width:100%;height:46px}.tools>button{display:flex;gap:5px;align-items:center;justify-content:center;background:#fffdf8f2;box-shadow:0 3px 0 #7f5c9b38;border:2px solid white;border-radius:18px;min-height:44px;padding:8px 10px;font-size:10px;font-weight:800;color:#9a72af;flex:1}.tools svg{width:16px;height:16px}.tools [aria-pressed=true]{background:#b080ca;color:white}.scene-space{pointer-events:none}.reward{position:fixed;left:calc(50% + 110px);top:18%;width:64px;height:80px;pointer-events:none;z-index:10;filter:drop-shadow(0 3px 6px #714c8a33)}.reward svg{width:100%}.reward span{position:absolute;font-size:25px;color:#ffcc6a;top:10px;right:-10px}.reward span:last-child{left:-15px;top:20px;right:auto}.reward.jump{animation:reward-hop 1.5s ease-in-out both}@keyframes reward-hop{0%{transform:translateY(20px) scale(.5);opacity:0}20%{transform:translateY(-25px) scale(1);opacity:1}40%{transform:translateY(0)}60%{transform:translateY(-18px) rotate(-7deg)}80%{transform:translateY(0)}100%{transform:translateY(-10px);opacity:0}}
.game-instruction{text-align:center;font-size:18px;color:#fff;text-shadow:0 2px 12px #2b225f99;align-self:center;font-weight:900}.math .play-main,.colors .play-main,.shapes .play-main{margin:0 12px}.activity-card{max-height:470px}.math-feedback,.sort-feedback{font-size:12px;color:#ac91bb;text-align:center;min-height:28px;flex:none;display:flex;align-items:center;justify-content:center}.equation{display:grid;grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);align-items:center;gap:5px;flex:1;min-height:0}.fruit-group{--fruit-size:48px;background:#fff8eb;border:1px solid #f2e5ca;border-radius:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 4px;gap:1px;align-content:center;align-self:center;min-height:84px;width:100%}.fruit-group.removed{background:#f7eff8;border-color:#e7dae9}.fruit-group.removed .fruit{opacity:.48}.fruit{width:100%;aspect-ratio:1;max-height:var(--fruit-size);position:relative;display:flex;align-items:center;justify-content:center}.fruit svg{width:100%;height:100%;max-height:var(--fruit-size)}.removed .fruit:after{content:'';position:absolute;left:12%;right:12%;top:52%;height:2px;background:#bf8aab;transform:rotate(-35deg);border-radius:3px}.operator{font-size:30px;font-weight:900;text-align:center;color:#bd90c6}.math-result{display:flex;gap:16px;align-items:center;justify-content:center;font-size:27px;flex:none;height:60px;color:#b099c3}.math-result strong{width:50px;height:50px;border-radius:16px;background:#f0e3f7;display:grid;place-items:center;color:#a26fbe;font-size:30px}.zero{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70px;text-align:center;gap:5px;color:#b4a08b}.zero strong{font-size:36px;line-height:1}.zero span{font-size:8px}.answers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-width:365px;width:100%;margin:auto;padding:0 7px}.answers button{min-height:44px;background:#fffdf8;border:2px solid white;border-radius:15px;color:#a27bb5;font-size:21px;font-weight:900;box-shadow:0 3px 0 #7955983d}.answers button:last-child{grid-column:5/7}.answers button.correct{background:#b4dba3;color:#fff}.answers button:disabled:not(.correct){opacity:.65}.hinted{outline:3px solid #e7ba58;outline-offset:2px;animation:hint-breathe 1.8s ease-in-out infinite}@keyframes hint-breathe{50%{outline-color:#f8deb3}}.math{grid-template-rows:48px 36px minmax(0,1fr) 99px minmax(35px,10vh)}.colors,.shapes{grid-template-rows:48px 40px minmax(0,1fr) minmax(55px,14vh)}.sorting-card{padding:10px 12px 12px;max-height:530px}.sort-content{min-height:0;flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:10px}.slots,.pieces{display:grid;gap:12px;justify-items:center;align-items:center;width:100%;min-height:0}.slots-1,.pieces-1{grid-template-columns:1fr}.slots-2,.pieces-2{grid-template-columns:1fr 1fr}.slots-3,.pieces-3,.slots-4,.pieces-4{grid-template-columns:repeat(2,minmax(0,1fr))}.slots-3>:last-child,.pieces-3>:last-child{grid-column:1/-1}.shape-piece,.shape-slot{min-width:44px;min-height:44px;width:100%;max-width:calc(90px * var(--shape-scale,1));aspect-ratio:1;background:transparent;padding:calc(3px * var(--shape-scale,1));position:relative;border-radius:20px;transition:transform .18s,box-shadow .18s;touch-action:none}.shape-svg{width:100%;height:100%;overflow:visible}.shape-piece svg{filter:drop-shadow(0 4px 2px #66517b2e)}.shape-slot{background:#f7f1fb}.shape-slot.filled{background:#f3f9ef}.shape-piece:disabled,.ball-piece:disabled{opacity:.15;pointer-events:none}.shape-piece:disabled>svg,.ball-piece:disabled>.ball{visibility:hidden}.selected{box-shadow:0 0 0 3px #d0a1e5}.shape-piece.dragging,.ball-piece.dragging{transition:none;filter:drop-shadow(0 9px 6px #53406733)}.slots-1 .shape-slot,.pieces-1 .shape-piece{max-width:calc(122px * var(--shape-scale,1))}.sort-divider{text-align:center;flex:none;font-size:9px;color:#c1adc9;display:flex;align-items:center;gap:10px}.sort-divider:before,.sort-divider:after{content:'';height:1px;background:#eee5f4;flex:1}.ball{display:block;border-radius:50%;background:radial-gradient(circle at 32% 27%,#ffffff70,transparent 50%),var(--color);box-shadow:inset -4px -5px 0 #00000009,0 3px 2px #61477819;border:1px solid #fff6;width:100%;aspect-ratio:1}.color-red{--color:#e9434b}.color-yellow{--color:#f5c72e}.color-blue{--color:#3279d7}.color-green{--color:#32a86a}.color-orange{--color:#f28b2d}.color-purple{--color:#8858c8}.color-pink{--color:#ed83b3}.color-brown{--color:#925b3c}.color-black{--color:#303846}.color-white{--color:#faf9f0}.color-sample{width:105px;max-width:35%;align-self:center}.sample-label{text-align:center;color:#b49bc1;font-size:10px}.color-choices{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:center}.color-choice{background:#fff9fd;border:1px solid #eadff0;padding:12px;border-radius:21px;min-height:70px;box-shadow:0 3px 0 #eaddf0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;max-height:130px}.color-choice>.ball{width:55px;max-width:100%}.color-choice>span:last-child{font-size:10px;color:#a283b2}.color-choice.correct{background:#f0f7eb;border-color:#a6cf94}.choices-3{grid-template-columns:repeat(3,minmax(0,1fr))}.choices-4{grid-template-columns:repeat(2,minmax(0,1fr))}.pattern-row{display:flex;gap:6px;align-items:center;justify-content:center;min-height:50px}.pattern-row .ball{width:28px;flex:1;max-width:35px}.pattern-question{display:grid;place-items:center;width:35px;height:35px;border:2px dashed #d5bde4;border-radius:50%;color:#b98bcc;font-size:22px;font-weight:900}.color-pieces{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ball-piece{padding:5px;background:transparent;border-radius:50%;width:100%;max-width:58px;min-height:44px;min-width:44px;aspect-ratio:1;touch-action:none;transition:transform .18s}.basket{width:100%;max-width:105px;min-width:44px;min-height:64px;aspect-ratio:1.1;background:transparent;padding:0;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}.basket-sample{position:absolute;top:5%;width:34%;z-index:-1}.basket-weave{display:block;position:absolute;inset:25% 2% 0;border-radius:8px 8px 18px 18px;background:repeating-linear-gradient(0deg,#fff2 0 2px,transparent 2px 12px),repeating-linear-gradient(90deg,#fff3 0 2px,transparent 2px 17px),var(--color);box-shadow:inset 0 5px 0 #fff4,0 4px 0 #6c53842e;opacity:.78}.basket:after{content:attr(data-received);position:absolute;top:42%;font-size:18px;color:#fff;font-weight:900;text-shadow:0 1px 4px #694e6a33}.basket.received .basket-weave{opacity:1}.baskets.slots-3,.baskets.slots-4{grid-template-columns:repeat(2,minmax(0,1fr))}.baskets.slots-3>:last-child{grid-column:1/-1}.update{position:fixed;z-index:50;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#fff8ea;box-shadow:var(--shadow);border:2px solid #fff;padding:9px 12px;display:flex;align-items:center;gap:10px;border-radius:18px;font-size:11px;max-width:95vw;width:max-content}.update button{border-radius:12px;min-height:44px;background:#ac7dca;color:#fff;padding:8px 12px}.update button:last-child{background:none;color:#ac7dca;padding:5px}
.colors{--color-scale:1.3}.color-sample>.ball,.color-choice>.ball{transform:scale(var(--color-scale));transform-origin:center}.shapes{--shape-scale:1.25}.shapes[data-level="3"],.shapes[data-level="4"]{grid-template-rows:48px 40px minmax(0,1fr) minmax(20px,6vh)}.shapes[data-level="3"] .sorting-card,.shapes[data-level="4"] .sorting-card{max-height:660px}
@media(min-width:600px){.playing .scene{max-width:540px;left:50%;transform:translateX(-50%);border-radius:24px;box-shadow:0 0 0 200vmax #dcd5e7}.playing .ambient-light{background:transparent}.play-shell{max-width:470px}.catalog-hero{margin-top:42px}.tile-art{height:165px}}
@media(max-width:650px){.catalog{padding:12px 15px 25px;padding-top:calc(12px + env(safe-area-inset-top))}.catalog-hero{margin:25px auto 24px}.catalog-hero h1{font-size:39px;letter-spacing:-1.5px}.catalog-hero p{font-size:12px}.eyebrow{font-size:8px;letter-spacing:1.6px}.hero-note{font-size:9px;padding:6px 10px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 13px}.game-tile{border-radius:23px;border-width:2px}.tile-art{height:117px}.tile-mark{font-size:36px}.mark-addition,.mark-subtraction{font-size:72px}.mark-shapes{font-size:35px}.tile-content{padding:12px 12px 10px}.tile-tag{font-size:6px;letter-spacing:.9px}.tile-content h2{font-size:20px}.tile-content p{font-size:10px;min-height:30px}.tile-open{font-size:10px;margin-top:10px;padding-top:7px}.brand{font-size:11px;letter-spacing:2.5px}.brand span{font-size:8px}.site-header .circle{width:42px;height:42px;border-radius:15px}.parent-info{margin-top:25px;font-size:11px}.parent-info summary{font-size:12px}}
@media(max-width:350px){.catalog-hero h1{font-size:34px}.tile-content h2{font-size:18px}.tile-content{padding:10px}.tile-mark{font-size:30px}.tile-tag{letter-spacing:.5px}.mode-panel{padding:20px 14px}.mode-panel h1{font-size:30px}.menu-shell{padding-inline:12px}.character-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.character-grid button{min-height:44px}.mode-list strong{font-size:13px}.mode-symbol{min-width:35px}.mode-list>button{padding:12px 9px;gap:9px}}
@media(max-height:700px) and (orientation:portrait){.play-shell{gap:7px;padding-top:calc(5px + env(safe-area-inset-top));padding-bottom:calc(5px + env(safe-area-inset-bottom))}.trace{grid-template-rows:46px 43px minmax(0,1fr) 47px 44px 34px}.play-main{margin-inline:12px}.trace-card,.activity-card{border-radius:27px;padding-top:4px}.trace-status{height:18px;font-size:10px}.trace-status.yes{font-size:14px}.card-footer{min-height:49px;padding-right:57px}.next{width:45px;height:45px}.tiny-hint{font-size:8px}.tools>button{padding:7px;font-size:9px}.math{grid-template-rows:46px 28px minmax(0,1fr) 99px 35px}.math-feedback,.sort-feedback{min-height:23px;font-size:10px}.math-result{height:47px}.math-result strong{height:41px;width:41px;font-size:25px}.fruit{max-height:37px}.fruit svg{max-height:37px}.fruit-group{min-height:65px;padding:3px}.operator{font-size:25px}.zero{min-height:52px}.colors,.shapes{grid-template-rows:46px 30px minmax(0,1fr) 47px}.game-instruction{font-size:16px}.sort-content{gap:6px}.shape-piece,.shape-slot{max-width:calc(68px * var(--shape-scale,1))}.slots-1 .shape-slot,.pieces-1 .shape-piece{max-width:calc(89px * var(--shape-scale,1))}.slots,.pieces{gap:7px}.sort-divider{font-size:8px}.color-sample{width:73px}.color-choice{padding:8px;min-height:60px;gap:8px;border-radius:17px}.color-choice>.ball{width:38px}.color-choice>span:last-child{font-size:8px}.color-choices{gap:8px}.ball-piece{max-width:45px;padding:4px}.basket{max-width:69px;min-height:54px}.pattern-row{min-height:42px;gap:4px}.pattern-row .ball{width:24px}.mode-panel{margin-top:25px}.reward{top:15%;width:52px;left:calc(50% + 100px)}}
@media(orientation:landscape) and (max-height:550px){.playing .scene{max-width:none;left:0;transform:none;border-radius:0;background-size:cover;box-shadow:none}.play-shell{max-width:900px;padding:5px 12px;gap:6px;grid-template-columns:130px minmax(0,1fr) 130px;grid-template-rows:44px minmax(0,1fr) 48px}.play-header{grid-column:1/-1;grid-row:1}.trace .selector{grid-column:1;grid-row:2;margin:0;flex-wrap:wrap;align-content:flex-start;justify-content:center;height:100%;border-radius:20px;overflow:auto}.trace .play-main{grid-column:2;grid-row:2/4;margin:0;align-self:stretch}.trace .palette{grid-column:3;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;align-self:stretch;border-radius:22px}.trace .tools{grid-column:1/2;grid-row:3;height:48px;gap:3px}.trace .tools>button{min-width:0;padding:4px 3px;font-size:0}.trace .tools svg{width:21px;height:21px}.trace .scene-space{display:none}.trace .trace-card{max-width:340px}.trace-status{height:18px}.card-footer{min-height:48px}.trace-pad{max-height:none}.game-instruction{grid-column:1;grid-row:2;font-size:15px;line-height:1.6}.math .play-main{grid-column:2;grid-row:2/4;margin:0}.math .answers{grid-column:3;grid-row:2/4;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:5px;align-content:center}.math .answers button{min-height:36px}.math .answers button:last-child{grid-column:1/-1}.math .scene-space,.colors .scene-space,.shapes .scene-space{display:none}.colors .play-main,.shapes .play-main{grid-column:2/4;grid-row:2/4;margin:0}.sort-content{flex-direction:row;align-items:center;gap:16px}.sort-content>.slots,.sort-content>.pieces{width:46%}.sort-divider{display:none}.shape-piece,.shape-slot{max-width:calc(65px * var(--shape-scale,1))}.color-sample{width:80px;max-width:25%}.sample-label{display:none}.color-choices{width:70%;gap:8px}.color-choice{min-height:55px;padding:7px}.color-choice>.ball{width:37px}.pattern-row{flex-wrap:wrap;max-width:35%}.color-pieces{grid-template-columns:repeat(4,minmax(0,1fr))}.baskets{max-width:45%}.basket{max-width:60px;min-height:50px}.reward{top:60px;left:60px;width:50px}}
@media(max-height:700px) and (orientation:portrait){.play-shell.shapes[data-level="3"],.play-shell.shapes[data-level="4"]{grid-template-rows:46px 30px minmax(0,1fr) 0;gap:6px}.shapes[data-level="3"] .scene-space,.shapes[data-level="4"] .scene-space{display:none}.shapes .sorting-card{padding-bottom:8px}.shapes .sort-content{gap:4px}.shapes .slots,.shapes .pieces{gap:6px}}
@media(orientation:landscape) and (max-height:550px){.play-shell.shapes{grid-template-rows:44px minmax(0,1fr) 48px}.shapes .sorting-card{padding:6px 12px}.shapes .sort-feedback{min-height:20px}.shapes .card-footer{min-height:46px}.shapes .next{width:44px;height:44px}.shapes[data-level="3"] .sort-content,.shapes[data-level="4"] .sort-content{flex-direction:column;gap:6px}.shapes[data-level="3"] .slots,.shapes[data-level="3"] .pieces,.shapes[data-level="4"] .slots,.shapes[data-level="4"] .pieces{width:100%}.shapes .slots-3,.shapes .pieces-3{grid-template-columns:repeat(3,minmax(0,1fr))}.shapes .slots-4,.shapes .pieces-4{grid-template-columns:repeat(4,minmax(0,1fr))}.shapes .slots-3>:last-child,.shapes .pieces-3>:last-child{grid-column:auto}.shapes .sort-divider{display:none}}
@media(min-height:701px) and (max-height:820px){.play-shell.shapes[data-level="3"],.play-shell.shapes[data-level="4"]{grid-template-rows:48px 40px minmax(0,1fr) 0;gap:6px}.shapes[data-level="3"] .scene-space,.shapes[data-level="4"] .scene-space{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms;animation-iteration-count:1;transition:none;scroll-behavior:auto}}

[hidden]{display:none}

.fruit-group[data-count="1"]{grid-template-columns:1fr;--fruit-size:80px}.fruit-group[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));--fruit-size:64px}
@media(max-height:700px) and (orientation:portrait){.fruit-group[data-count="1"]{--fruit-size:58px}.fruit-group[data-count="2"]{--fruit-size:48px}}
@media(orientation:landscape) and (max-height:550px){.math .fruit-group{--fruit-size:28px}.math .fruit{max-height:var(--fruit-size)}.math .fruit svg{max-height:var(--fruit-size)}}
[hidden]{display:none}

.playing{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.trace-pad,.trace-card,.selector,.palette,.tools{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#guide,#ink,#trace-missing{pointer-events:none}#trace-missing{fill:#d3a53e;stroke:#fff8dc;stroke-width:.8}
.studio-footer{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 auto 12px;max-width:400px}.studio-logo-link{display:block;background:#fffef9;border-radius:12px;padding:8px;border:1px solid #fff;box-shadow:0 3px 12px #76538c12}.studio-logo-link img{display:block;width:192px;height:auto}.studio-footer p{font-size:12px;line-height:1.65;max-width:310px}.install-guide-link{display:inline-block;margin-top:12px;text-decoration:underline;color:#80549e;font-weight:900}

.developer-credit{display:inline-block;max-width:100%;margin-top:11px;font-size:11px;line-height:1.7;text-decoration:underline;text-underline-offset:3px}

.runner-link{display:block;width:fit-content;margin:16px auto 0;font-size:13px;color:#80549e;text-decoration:underline;text-underline-offset:3px}

/* The approved characters have their own space, independent of background crop. */
.tracing .scene{background-size:auto 160%;background-position:center top}
.mascot-sprite{background-image:url('./assets/companions.webp');background-repeat:no-repeat;background-size:300% 300%;background-position:var(--mascot-x,0%) var(--mascot-y,0%)}
body[data-theme="0"]{--mascot-x:0%;--mascot-y:0%}body[data-theme="1"]{--mascot-x:50%;--mascot-y:0%}body[data-theme="2"]{--mascot-x:100%;--mascot-y:0%}body[data-theme="3"]{--mascot-x:0%;--mascot-y:50%}body[data-theme="4"]{--mascot-x:50%;--mascot-y:50%}body[data-theme="5"]{--mascot-x:100%;--mascot-y:50%}body[data-theme="6"]{--mascot-x:0%;--mascot-y:100%}body[data-theme="7"]{--mascot-x:50%;--mascot-y:100%}body[data-theme="8"]{--mascot-x:100%;--mascot-y:100%}
.trace{--companion-stage:clamp(164px,26vh,224px);grid-template-rows:48px 44px minmax(0,1fr) 48px 46px var(--companion-stage)}
.trace .scene-space{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:0;height:100%;padding:12px 14px;isolation:isolate}
.scene-companion{display:block;flex:none;height:100%;aspect-ratio:1;animation:companion-breathe 5s ease-in-out infinite;transform-origin:50% 88%;will-change:transform;filter:drop-shadow(0 5px 6px #5a47731c)}
.companion-sparkle{position:absolute;display:none;color:#ffda7b;left:30px;top:20px;font-size:24px;text-shadow:0 1px 5px #fff;pointer-events:none}.companion-sparkle:last-child{left:135px;top:32px;font-size:20px}
.celebrating .scene-companion{animation:companion-cheer 1.5s ease-in-out both}.celebrating .companion-sparkle{display:block;animation:companion-sparkle 1.5s ease-in-out both}
@keyframes companion-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes companion-cheer{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-3deg) scale(1.02)}50%{transform:translateY(0) rotate(2deg)}75%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes companion-sparkle{0%,100%{opacity:0;transform:scale(.5)}35%,65%{opacity:1;transform:scale(1)}}
@media(max-height:700px) and (orientation:portrait){.trace{--companion-stage:clamp(96px,22vh,145px);grid-template-rows:46px 43px minmax(0,1fr) 47px 44px var(--companion-stage)}}
@media(orientation:landscape) and (max-height:550px){.tracing .scene{background-size:cover;background-position:center top}.trace{grid-template-rows:44px minmax(0,1fr) 48px}.trace .selector{height:calc(100% - 95px);align-self:start}.trace .scene-space{display:flex;grid-column:1;grid-row:2;height:90px;align-self:end;padding:10px 12px}.companion-sparkle{left:8px;top:6px;font-size:17px}.companion-sparkle:last-child{left:90px;top:12px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.scene-companion,.celebrating .scene-companion,.celebrating .companion-sparkle{animation:none}.celebrating .companion-sparkle{display:block}}

/* Larger, tactile baskets in the color-sorting game. */
.colors[data-mode="sort"] .sort-content{gap:10px}
.colors[data-mode="sort"] .baskets{--basket-size:150px;--basket-gap:12px;gap:var(--basket-gap);flex:none}
.colors[data-mode="sort"] .baskets.slots-3,.colors[data-mode="sort"] .baskets.slots-4{--basket-size:128px}
.colors[data-mode="sort"] .baskets.slots-3>.basket:last-child{width:min(var(--basket-size),calc((100% - var(--basket-gap))/2))}
.colors[data-mode="sort"] .basket{width:100%;max-width:var(--basket-size);min-height:0;aspect-ratio:168/148;display:block;border-radius:24px;transition:filter .18s,transform .18s;touch-action:manipulation}
.colors[data-mode="sort"] .basket:after{content:none}
.basket-svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 3px 3px #73536b14)}
.basket-count{position:absolute;left:50%;top:73.65%;transform:translate(-50%,-50%);font-size:clamp(12px,3.8vw,18px);line-height:1;font-weight:900;color:#69526f;pointer-events:none}
.basket-marker{transition:opacity .18s}.basket.received .basket-marker{opacity:0}
.basket-cargo-one,.basket-cargo-two{opacity:0;transition:opacity .2s}.basket.received .basket-cargo-one{opacity:1}.basket.received:not([data-received="1"]) .basket-cargo-two{opacity:1}
.basket:focus-visible{outline:3px solid #8054b5;outline-offset:4px}.basket.catching{animation:basket-catch .36s ease-in-out}
@keyframes basket-catch{0%,100%{transform:translateY(0)}35%{transform:translateY(2px) scale(1.025,.975)}70%{transform:translateY(-2px)}}
@media(hover:hover){.colors[data-mode="sort"] .basket:hover{filter:brightness(1.04)}}
@media(max-height:700px) and (orientation:portrait){.colors[data-mode="sort"] .sort-content{gap:6px}.colors[data-mode="sort"] .baskets{--basket-size:132px;--basket-gap:10px}.colors[data-mode="sort"] .baskets.slots-3,.colors[data-mode="sort"] .baskets.slots-4{--basket-size:104px}}
@media(orientation:landscape) and (max-height:550px){.colors[data-mode="sort"] .sort-content{gap:16px}.colors[data-mode="sort"] .baskets{--basket-size:128px;--basket-gap:10px;max-width:none;width:46%}.colors[data-mode="sort"] .baskets.slots-3,.colors[data-mode="sort"] .baskets.slots-4{--basket-size:104px}.colors[data-mode="sort"] .basket-count{font-size:14px}}
@media(prefers-reduced-motion:reduce){.basket.catching{animation:none}.basket-marker,.basket-cargo-one,.basket-cargo-two{transition:none}}