.tots-root{--radius:1.25rem;--background:oklch(24% .05 275);--foreground:oklch(97% .01 90);--card:oklch(31% .06 275);--card-foreground:oklch(97% .01 90);--popover:oklch(31% .06 275);--popover-foreground:oklch(97% .01 90);--primary:oklch(87% .17 92);--primary-foreground:oklch(24% .05 275);--secondary:oklch(38% .06 275);--secondary-foreground:oklch(97% .01 90);--muted:oklch(36% .05 275);--muted-foreground:oklch(78% .03 275);--accent:oklch(70% .19 15);--accent-foreground:oklch(99% 0 0);--border:oklch(45% .05 275);--input:oklch(45% .05 275);--ring:oklch(87% .17 92);--tt-font:ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;--shadow-chunky:0 8px 0 oklch(0% 0 0/.28);--shadow-glow:0 0 40px oklch(87% .17 92/.5);--spring:cubic-bezier(.34, 1.56, .64, 1);--animal-scene-top:oklch(32% .1 255);--animal-scene-bottom:oklch(27% .1 295);--animal-highlight:oklch(100% 0 0/.7);--animal-name-color:oklch(100% 0 0);--animal-art-shadow:0 10px 14px #00000047;--animal-name-shadow:0 2px 4px oklch(20% .04 270/.65);--animal-dot:oklch(98% .01 250/.4);--animal-cow-light:oklch(88% .09 225);--animal-cow-color:oklch(68% .17 245);--animal-dog-light:oklch(90% .1 65);--animal-dog-color:oklch(73% .17 50);--animal-cat-light:oklch(90% .09 350);--animal-cat-color:oklch(71% .2 350);--animal-duck-light:oklch(97% .1 100);--animal-duck-color:oklch(85% .18 90);--animal-lion-light:oklch(92% .08 160);--animal-lion-color:oklch(74% .15 165);--animal-pig-light:oklch(90% .07 295);--animal-pig-color:oklch(72% .16 295);color:var(--foreground);font-family:var(--tt-font);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse at 50% 0%, oklch(32% .08 280), var(--background) 70%);transition:filter 1s linear;position:fixed;inset:0;overflow:hidden}.tots-root *{border-color:var(--border)}.tots-root button{cursor:pointer;touch-action:manipulation}.tots-root .play-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.tots-root .start{touch-action:pan-y;flex-direction:column;justify-content:safe center;align-items:center;gap:clamp(.75rem,2.5vh,1.5rem);height:100%;padding:1.5rem;display:flex;overflow-y:auto}.tots-root .logo{letter-spacing:-.02em;text-align:center;font-size:clamp(2.6rem,9vw,5.5rem);font-weight:900;line-height:1}.tots-root .logo span{animation:tt-hop 2.4s var(--spring) infinite;text-shadow:var(--shadow-chunky);display:inline-block}.tots-root .play-btn{background:var(--primary);min-height:96px;color:var(--primary-foreground);box-shadow:var(--shadow-chunky), var(--shadow-glow);transition:transform .25s var(--spring);border-radius:999px;padding:0 2.75rem;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:900;animation:2.2s ease-in-out infinite tt-breathe}.tots-root .play-btn:active{transform:scale(.94)translateY(4px)}.tots-root .tagline{color:var(--muted-foreground);text-align:center;font-size:.95rem}.tots-root .tt-back{color:var(--muted-foreground);font-size:.95rem;font-weight:800;text-decoration:underline}.tots-root .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,2vw,1.1rem);width:min(100%,640px);display:grid}.tots-root .tile{aspect-ratio:1.15;min-height:110px;box-shadow:var(--shadow-chunky);color:var(--primary-foreground);transition:transform .25s var(--spring);border-radius:1.75rem;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;display:flex}.tots-root .tile:active{transform:scale(.92)translateY(4px)}.tots-root .tile-emoji{font-size:clamp(2.4rem,8vw,3.6rem)}.tots-root .tile-animal-art{object-fit:contain;width:72%;height:68%;filter:drop-shadow(var(--animal-art-shadow));pointer-events:none}.tots-root .tile-label{text-align:center;padding:0 .3rem;font-size:clamp(.8rem,3.2vw,1rem);font-weight:800;line-height:1.1}@media (width<=340px){.tots-root .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=700px){.tots-root .tiles{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,820px)}}@media (orientation:landscape) and (width>=1000px){.tots-root .tiles{grid-template-columns:repeat(6,minmax(0,1fr));width:min(100%,1100px)}}@media (orientation:landscape) and (height<=600px){.tots-root .tile{aspect-ratio:1.4;min-height:88px}.tots-root .tile-emoji{font-size:2.4rem}.tots-root .tiles{grid-template-columns:repeat(6,minmax(0,1fr));width:min(100%,900px)}.tots-root .logo{font-size:3rem}}.tots-root .gate-corner{z-index:40;opacity:.45;place-items:center;width:88px;height:88px;display:grid;position:absolute;top:0;left:0}.tots-root .gate-corner svg{grid-area:1/1}.tots-root .gate-icon{color:var(--muted-foreground);grid-area:1/1}.tots-root .gate-track{fill:none;stroke:oklch(100% 0 0/.12);stroke-width:5px}.tots-root .gate-fill{fill:none;stroke:var(--primary);stroke-width:5px;stroke-linecap:round}.tots-root .gate-modal,.tots-root .panel-backdrop{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:pan-y;background:oklch(15% .04 275/.85);place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.tots-root .gate-card{background:var(--card);text-align:center;width:min(100%,380px);box-shadow:var(--shadow-chunky);border-radius:2rem;padding:1.75rem}.tots-root .gate-choice{background:var(--secondary);min-height:88px;color:var(--secondary-foreground);box-shadow:var(--shadow-chunky);border-radius:1.25rem;font-size:2.25rem;font-weight:900}.tots-root .gate-choice:active{transform:translateY(4px)}.tots-root .gate-corner[data-locked=true]{opacity:.15}.tots-root .panel{background:var(--card);-webkit-user-select:text;user-select:text;border-radius:2rem;width:min(100%,520px);max-height:92vh;padding:1.5rem;overflow-y:auto}.tots-root .panel-row{border-bottom:1px solid var(--border);text-align:left;justify-content:space-between;align-items:center;gap:1rem;width:100%;min-height:56px;padding:.9rem 0;font-weight:700;display:flex}.tots-root .switch{background:var(--muted);border-radius:999px;flex-shrink:0;width:56px;height:32px;transition:background .2s;position:relative}.tots-root .switch span{background:var(--foreground);width:24px;height:24px;transition:transform .25s var(--spring);border-radius:999px;position:absolute;top:4px;left:4px}.tots-root .switch[data-on=true]{background:var(--primary)}.tots-root .switch[data-on=true] span{background:var(--primary-foreground);transform:translate(24px)}.tots-root .seg{background:var(--muted);border-radius:999px;gap:.35rem;padding:.3rem;display:flex}.tots-root .seg button{min-width:52px;min-height:44px;color:var(--muted-foreground);border-radius:999px;flex:1;font-weight:800}.tots-root .seg button[aria-pressed=true]{background:var(--primary);color:var(--primary-foreground)}.tots-root .panel-btn{background:var(--secondary);min-height:56px;color:var(--secondary-foreground);border-radius:1rem;font-weight:800}.tots-root a.panel-btn{line-height:56px}.tots-root .panel-btn-primary{background:var(--primary);color:var(--primary-foreground)}.tots-root .icon-btn{background:var(--secondary);border-radius:999px;place-items:center;width:48px;height:48px;display:grid}.tots-root .panel-details{background:var(--secondary);color:var(--muted-foreground);border-radius:1rem;margin-top:.9rem;padding:.8rem 1rem;font-size:.9rem}.tots-root .panel-details summary{color:var(--foreground);cursor:pointer;font-weight:800}.tots-root .panel-details p{margin-top:.6rem;line-height:1.45}.tots-root .cm-wrap{flex-direction:column;justify-content:space-around;align-items:center;height:100%;padding:2rem 1rem;display:flex}.tots-root .cm-ball-zone{place-items:center;display:grid;position:relative}.tots-root .cm-ball{aspect-ratio:1;width:clamp(120px,28vmin,220px);box-shadow:inset -14px -18px 0 oklch(0% 0 0/.18), inset 12px 12px 0 oklch(100% 0 0/.3), var(--shadow-chunky);transition:transform .35s var(--spring);touch-action:none;z-index:5;border-radius:999px}.tots-root .cm-ball-win{animation:tt-winspin 1.2s var(--spring)}.tots-root .cm-confetti{pointer-events:none;font-size:4rem;animation:1.2s ease-out forwards tt-burst;position:absolute}.tots-root .cm-baskets{justify-content:center;gap:clamp(.75rem,4vw,2.5rem);width:100%;display:flex}.tots-root .cm-basket{max-width:240px;min-height:clamp(110px,22vmin,190px);transition:transform .25s var(--spring);border-style:solid;border-width:8px;border-radius:1.5rem 1.5rem 3rem 3rem;flex:1;place-items:center;display:grid}.tots-root .cm-basket:active{transform:scale(.94)}.tots-root .cm-icon{color:oklch(100% 0 0/.85);width:45%;height:45%;margin:auto}.tots-root .cm-basket-icon{aspect-ratio:1;width:45%;height:auto}.tots-root .animals-scene{background:linear-gradient(160deg, var(--animal-scene-top), var(--animal-scene-bottom));position:absolute;inset:0}.tots-root .animals-grid{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,3vmin,1.5rem);height:100%;padding:92px clamp(1rem,4vmin,2.5rem) clamp(1rem,4vmin,2.5rem);display:grid;position:relative}@media (orientation:portrait){.tots-root .animals-grid{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr))}}.tots-root .animal-cow{--animal-light:var(--animal-cow-light);--animal-color:var(--animal-cow-color);--animal-delay:0s}.tots-root .animal-dog{--animal-light:var(--animal-dog-light);--animal-color:var(--animal-dog-color);--animal-delay:-.5s}.tots-root .animal-cat{--animal-light:var(--animal-cat-light);--animal-color:var(--animal-cat-color);--animal-delay:-1s}.tots-root .animal-duck{--animal-light:var(--animal-duck-light);--animal-color:var(--animal-duck-color);--animal-delay:-1.5s}.tots-root .animal-lion{--animal-light:var(--animal-lion-light);--animal-color:var(--animal-lion-color);--animal-delay:-2s}.tots-root .animal-pig{--animal-light:var(--animal-pig-light);--animal-color:var(--animal-pig-color);--animal-delay:-2.5s}.tots-root .animal-tile{background:linear-gradient(var(--animal-light), var(--animal-color));width:100%;min-width:0;height:100%;min-height:80px;color:var(--animal-name-color);box-shadow:inset 0 2px 0 var(--animal-highlight), 0 10px 26px -12px color-mix(in oklab, var(--animal-color) 65%, transparent);transition:transform .2s var(--spring);border-radius:32px;grid-template-rows:minmax(0,78fr) minmax(30px,22fr);gap:0;padding:0;display:grid;position:relative}.tots-root .animal-tile:hover{background:linear-gradient(var(--animal-light), var(--animal-color));color:var(--animal-name-color)}.tots-root .animal-tile:active{transform:scale(.96)}.tots-root .animal-art-slot{place-items:center;width:100%;height:100%;min-height:0;padding:12px 8px 0;display:grid}.tots-root .animal-art-bounce{width:100%;height:100%;min-height:0;display:block}.tots-root .animal-art{object-fit:contain;width:100%;height:100%;filter:drop-shadow(var(--animal-art-shadow));pointer-events:none;animation:3s ease-in-out infinite tt-animal-breathe;animation-delay:var(--animal-delay)}.tots-root .animal-name{font-family:var(--tt-font);letter-spacing:0;text-shadow:var(--animal-name-shadow);text-transform:capitalize;align-self:center;padding:0 8px 6px;font-size:1.75rem;font-weight:900;line-height:1.1}@media (height<=500px){.tots-root .animal-name{font-size:1.25rem}.tots-root .animal-art-slot{padding-top:4px}}.tots-root .animal-sparkles{pointer-events:none;position:absolute;inset:0}.tots-root .animal-sparkles span{background:var(--animal-dot);border-radius:50%;width:3px;height:3px;animation:4s ease-in-out infinite tt-twinkle;position:absolute}.tots-root .animal-sparkles span:nth-child(6n+1){animation-delay:-1s;top:8%;left:8%}.tots-root .animal-sparkles span:nth-child(6n+2){animation-delay:-2s;top:4%;left:34%}.tots-root .animal-sparkles span:nth-child(6n+3){animation-delay:-3s;top:9%;left:67%}.tots-root .animal-sparkles span:nth-child(6n+4){animation-delay:-.5s;top:38%;left:96%}.tots-root .animal-sparkles span:nth-child(6n+5){animation-delay:-1.5s;top:69%;left:2%}.tots-root .animal-sparkles span:nth-child(6n){animation-delay:-2.5s;top:98%;left:52%}.tots-root .animal-sparkles span:nth-child(n+7){transform:translate(14px,12px)}.tots-root.calm .animal-tile{--animal-light:color-mix(in oklab, var(--animal-color) 25%, var(--foreground));--animal-color:var(--muted);box-shadow:inset 0 2px 0 var(--animal-highlight), var(--shadow-chunky)}.tots-root.calm .animal-cow{--animal-color:oklch(67% .06 245)}.tots-root.calm .animal-dog{--animal-color:oklch(73% .07 60)}.tots-root.calm .animal-cat{--animal-color:oklch(73% .07 350)}.tots-root.calm .animal-duck{--animal-color:oklch(80% .07 90)}.tots-root.calm .animal-lion{--animal-color:oklch(74% .06 165)}.tots-root.calm .animal-pig{--animal-color:oklch(72% .06 295)}.tots-root.calm .animal-art,.tots-root.calm .animal-sparkles span{animation:none}.tots-root .piano{align-items:flex-end;gap:clamp(4px,1.2vw,12px);height:100%;padding:92px clamp(.5rem,2vw,1.5rem) clamp(1rem,4vh,2rem);display:flex}.tots-root .piano-key{min-width:0;box-shadow:var(--shadow-chunky), inset 0 -16px 0 oklch(0% 0 0/.15);transition:transform .2s var(--spring), filter .2s;border-radius:1.25rem 1.25rem 2rem 2rem;flex:1}.tots-root .piano-key-lit{filter:brightness(1.25);transform:translateY(8px)scale(.97)}.tots-root .clear-bubble{z-index:10;width:104px;height:104px;box-shadow:var(--shadow-glow);background:radial-gradient(circle at 30% 30%,oklch(100% 0 0/.9),oklch(80% .1 220/.6) 40%,oklch(60% .15 260/.7));border-radius:999px;font-size:3rem;animation:2.4s ease-in-out infinite tt-breathe;position:absolute;bottom:1.25rem;right:1.25rem}.tots-root .done{background:linear-gradient(oklch(16% .05 275),oklch(22% .07 285));flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tots-root .moon{filter:drop-shadow(0 0 30px oklch(90% .12 90/.6));font-size:clamp(6rem,28vmin,12rem);animation:5s ease-in-out infinite tt-sway}.tots-root .done-text{text-align:center;margin-top:1rem;padding:0 1rem;font-size:clamp(2rem,7vw,3.5rem);font-weight:900}.tots-root .stars span{color:var(--primary);font-size:1.5rem;animation:3s ease-in-out infinite tt-twinkle;position:absolute}.tots-root .bounce{animation:tt-bounce .7s var(--spring);display:inline-block}.tots-root .wiggle{animation:.45s ease-in-out tt-wiggle}.tots-root .rsg-scene{touch-action:none;background:linear-gradient(var(--background) 55%, color-mix(in oklab, var(--accent) 35%, var(--background)));width:100%;display:block;position:absolute;inset:0;overflow:hidden}.tots-root .rsg-track{background:repeating-linear-gradient(90deg, var(--muted-foreground) 0 40px, transparent 40px 70px);opacity:.5;border-radius:999px;height:14px;position:absolute;top:62%;left:4%;right:4%}.tots-root .rsg-flag{font-size:5rem;position:absolute;top:calc(62% - 7rem);right:5%}.tots-root .rsg-racer{font-size:clamp(6rem,18vmin,10rem);line-height:1;transition:left 1.1s cubic-bezier(.5,0,.2,1),opacity .3s;position:absolute;top:calc(62% - 9rem);left:5%;transform:scaleX(-1)}.tots-root .rsg-ready{animation:.8s ease-in-out infinite tt-breathe}.tots-root .rsg-zoom{left:110%}.tots-root .rsg-gone{opacity:0;transition:none;left:110%}.tots-root.calm .rsg-zoom{transition-duration:1.8s!important}.tots-root .peek-scene{touch-action:none;justify-content:center;align-items:flex-end;gap:3vw;padding:6vh 3vw 10vh;display:flex;position:absolute;inset:0}.tots-root .peek-bush{flex:1 1 0;min-width:0;max-width:320px;height:min(60vh,46vw);min-height:120px;position:relative}.tots-root .peek-leaves{text-align:center;transition:transform .35s var(--spring);font-size:min(23vw,45vh,260px);line-height:1;position:absolute;inset:auto 0 0}.tots-root .peek-animal{object-fit:contain;opacity:0;width:70%;transition:transform .45s var(--spring), opacity .2s;pointer-events:none;position:absolute;bottom:10%;left:15%;transform:translateY(30%)}.tots-root .peek-bush.open .peek-animal{opacity:1;z-index:2;transform:translateY(-75%)scale(1.15)}.tots-root .peek-bush.open .peek-leaves{transform:rotate(-6deg)}.tots-root .face-scene{touch-action:none;place-items:center;padding:4vmin;display:grid;position:absolute;inset:0}.tots-root .face-svg{width:min(92vw,82vh);height:auto}.tots-root .face-part{cursor:pointer;transform-box:fill-box;transform-origin:50%}.tots-root .face-skin{fill:oklch(82% .1 65)}.tots-root .face-cheek{fill:oklch(75% .14 15);opacity:.75}.tots-root .face-hair{fill:oklch(45% .1 45)}.tots-root .face-eye-white{fill:oklch(98% 0 0)}.tots-root .face-eye{fill:oklch(25% .04 260)}.tots-root .face-nose{fill:oklch(72% .13 40)}.tots-root .face-mouth{fill:oklch(55% .18 20)}.tots-root.calm .face-skin{fill:oklch(78% .05 65)}.tots-root.calm .face-cheek{fill:oklch(72% .06 15)}.tots-root .count-scene{touch-action:none;flex-wrap:wrap;place-content:center;gap:3vmin;padding:6vmin;display:flex;position:absolute;inset:0}.tots-root .count-item{aspect-ratio:1;width:clamp(90px,24vmin,180px);transition:transform .3s var(--spring), opacity .3s;font-size:clamp(4rem,16vmin,8rem);line-height:1;position:relative}.tots-root .many .count-item{width:clamp(80px,17vmin,140px);font-size:clamp(3.4rem,11vmin,6rem)}.tots-root .count-item.popped>span{opacity:.3;display:inline-block;transform:scale(.8)}.tots-root .count-num{color:var(--foreground);text-shadow:var(--shadow-chunky);place-items:center;font-size:.55em;font-weight:900;display:grid;position:absolute;inset:0}.tots-root .puzzle-scene{touch-action:none;flex-direction:column;justify-content:space-around;padding:4vmin;display:flex;position:absolute;inset:0}.tots-root .puzzle-row{justify-content:space-around;gap:3vmin;display:flex}.tots-root .puzzle-hole,.tots-root .puzzle-slot{aspect-ratio:1;place-items:center;width:clamp(90px,26vmin,200px);display:grid;position:relative}.tots-root .puzzle-outline{opacity:.28;filter:drop-shadow(0 0);width:100%;height:100%;position:absolute;inset:0}.tots-root .puzzle-drag{touch-action:none;width:100%;height:100%;transition:transform .35s var(--spring)}.tots-root .puzzle-piece{width:100%;height:100%;filter:drop-shadow(var(--shadow-chunky));pointer-events:none}.tots-root .puzzle-piece.snapped{animation:tt-bounce .5s var(--spring);position:absolute;inset:0}.tots-root .beep-grid{touch-action:none;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:3vmin;padding:4vmin;display:grid;position:absolute;inset:0}@media (orientation:portrait){.tots-root .beep-grid{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr))}}.tots-root .beep-tile{background:color-mix(in oklab, var(--primary) 22%, var(--card));min-height:80px;box-shadow:var(--shadow-chunky);transition:transform .2s var(--spring);border-radius:2rem;flex-direction:column;justify-content:center;align-items:center;display:flex}.tots-root .beep-tile:active{transform:scale(.95)}.tots-root .beep-emoji{font-size:clamp(3.5rem,14vmin,7rem);line-height:1;display:inline-block}.tots-root .beep-emoji.bounce{animation:tt-bounce .5s var(--spring)}.tots-root .beep-name{font-size:clamp(1rem,3vmin,1.4rem);font-weight:800}.tots-root.calm *,.tots-root.calm :before,.tots-root.calm :after{transition-duration:50ms!important;animation-duration:0s!important;animation-iteration-count:1!important}.tots-root.calm .moon{animation:none}@media (prefers-reduced-motion:reduce){.tots-root .animal-art,.tots-root .animal-sparkles span{animation:none}.tots-root *,.tots-root :before,.tots-root :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@keyframes tt-animal-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes tt-hop{0%,70%,to{transform:translateY(0)}80%{transform:translateY(-14px)rotate(-4deg)}}@keyframes tt-breathe{50%{transform:scale(1.05)}}@keyframes tt-bounce{0%{transform:scale(1)}30%{transform:scale(1.3)translateY(-18%)}60%{transform:scale(.92)}to{transform:scale(1)}}@keyframes tt-wiggle{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}@keyframes tt-winspin{0%{transform:scale(1)}40%{transform:scale(1.35)rotate(180deg)}to{transform:scale(1)rotate(360deg)}}@keyframes tt-burst{0%{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(2.2)translateY(-30px)}}@keyframes tt-sway{50%{transform:rotate(-8deg)translateY(-10px)}}@keyframes tt-twinkle{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}