@font-face{font-family:Andika;font-style:normal;font-display:swap;font-weight:400;src:url(./andika-latin-400-normal-BTFTIZb-.woff2)format("woff2"),url(./andika-latin-400-normal-BK42By1L.woff)format("woff")}@font-face{font-family:Andika;font-style:normal;font-display:swap;font-weight:700;src:url(./andika-latin-700-normal-Dk95f5lc.woff2)format("woff2"),url(./andika-latin-700-normal-CAUSQC6x.woff)format("woff")}:root{--ground:#cfe6df;--paper:#fffdf8;--ink:#1e2b3a;--muted:#4c6272;--yellow:#f4b942;--orange:#ef7f45;--shelf:#b5d5cb;--shelf-edge:#8fb8ab;--h:1vh;--edge:5vw;--rest:calc(var(--h) * 18)}@supports (height:1dvh){:root{--h:1dvh}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{overscroll-behavior:none;background:var(--ground);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-family:Andika,Trebuchet MS,Verdana,sans-serif;position:fixed;inset:0;overflow:hidden}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;background:0 0;border:0;margin:0;padding:0}button:focus-visible,a:focus-visible{outline:4px solid var(--orange);outline-offset:4px}.screen{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none;display:flex;position:absolute;inset:0}.round-button{--button:calc(var(--h) * 14);width:max(var(--button), 76px);height:max(var(--button), 76px);border:max(.8vmin, 4px) solid var(--ink);background:var(--paper);border-radius:50%;flex:none;justify-content:center;align-items:center;transition:transform .1s ease-out;display:flex}.round-button.primary{background:var(--yellow)}.round-button:active{transform:scale(.96)}.round-button>svg{width:62%;height:62%}.round-button.busy{animation:.9s ease-in-out infinite breathe}.start,.asleep{justify-content:center;align-items:center;gap:9vw}.start-penguin{height:calc(var(--h) * 44);max-width:34vw}.start-play{--button:min(calc(var(--h) * 44), 36vw)}.start-play>svg{width:58%;height:58%}.grown-up{top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px);width:48px;height:48px;padding:6px;position:absolute}.grown-up svg{width:100%;height:100%}.asleep{z-index:10;background:var(--ground);display:flex;position:fixed;inset:0}.play{flex-direction:column}.topbar{padding:calc(var(--h) * 2.5) 3vw 0;flex:none;align-items:center;gap:2.5vw;display:flex}.mascot-button{flex:none;transition:transform .1s ease-out;display:flex}.mascot-button:active{transform:scale(.95)}.mascot{height:max(calc(var(--h) * 15), 64px);flex:none}.shelf{min-width:0;padding:calc(var(--h) * 1.4) 1.4vw;border-radius:calc(var(--h) * 3);background:var(--shelf);flex:1;gap:1vw;margin:0;list-style:none;display:flex}.slot{min-width:0;max-width:calc(var(--h) * 11);height:max(calc(var(--h) * 8.5), 36px);border-radius:calc(var(--h) * 1.8);border:max(.35vmin, 2px) dashed var(--shelf-edge);font-weight:700;font-size:max(calc(var(--h) * 6), 24px);flex:1 1 0;justify-content:center;align-items:center;line-height:1;display:flex}.slot.filled{background:var(--paper);border-color:#0000;animation:.26s ease-out land}.circles{--gap:4.5vw;--size:min(calc((100vw - 2 * var(--edge) - (var(--choices) - 1) * var(--gap)) / var(--choices)), calc(var(--h) * 42));place-content:center;align-items:center;gap:var(--gap);min-height:0;padding:0 var(--edge) var(--rest);flex-wrap:wrap;flex:1;display:flex}.circle{width:var(--size);height:var(--size);border-radius:50%;flex:none;position:relative}.circle:before{content:"";inset:calc(var(--gap) / -2);border-radius:50%;position:absolute}.circle-face{border:max(.9vmin, 4px) solid var(--ink);background:var(--paper);width:100%;height:100%;font-weight:700;font-size:calc(var(--size) * .62);border-radius:50%;justify-content:center;align-items:center;gap:.08em;line-height:1;transition:transform .14s ease-out,opacity .26s ease-out,box-shadow .2s ease-out;display:flex;position:relative}.circle:active .circle-face{transform:scale(.97)}.circle.dimmed .circle-face{opacity:.32}.circle.wobble .circle-face{animation:.42s ease-in-out wobble}.circle.pointed .circle-face{box-shadow:0 0 0 max(1.8vmin, 9px) var(--yellow)}.circle.found .circle-face{transform:scale(1.12)}.hand{pointer-events:none;width:36%;animation:1.2s ease-in-out infinite point;position:absolute;bottom:-16%;right:-4%;transform:rotate(-24deg)}.spark{pointer-events:none;width:14%;animation:.42s ease-out both pop;position:absolute}.spark-1{top:2%;left:-14%}.spark-2{width:10%;animation-delay:90ms;top:18%;right:-12%}.spark-3{width:16%;animation-delay:.16s;bottom:4%;right:-10%}.spark-4{width:9%;animation-delay:.23s;bottom:8%;left:-8%}.picture{height:calc(var(--h) * 24);aspect-ratio:1.35;margin-top:calc(var(--h) * 2);padding:calc(var(--h) * 1.5);border-radius:calc(var(--h) * 4);background:var(--paper);flex:none;justify-content:center;align-self:center;align-items:center;animation:.26s ease-out land;display:flex}.picture img{object-fit:contain;pointer-events:none;width:100%;height:100%}.picture:active{transform:scale(.97)}.with-picture .circles{--size:min(calc((100vw - 2 * var(--edge) - (var(--choices) - 1) * var(--gap)) / var(--choices)), calc(var(--h) * 30));padding-bottom:calc(var(--rest) - var(--h) * 4)}.two-games{gap:5vw}.two-games .start-penguin{height:calc(var(--h) * 34);max-width:22vw}.games{gap:4vw;display:flex}.game-button{--tile:min(30vw, calc(var(--h) * 46));width:var(--tile);height:calc(var(--tile) * .82);border-radius:calc(var(--tile) * .14);border:max(.8vmin, 4px) solid var(--ink);background:var(--paper);justify-content:center;align-items:center;transition:transform .1s ease-out;display:flex}.game-button:active{transform:scale(.97)}.game-button.busy{animation:.9s ease-in-out infinite breathe}.game-button img{object-fit:contain;pointer-events:none;width:62%;height:62%}.game-sample{gap:calc(var(--tile) * .04);display:flex}.game-sample span{width:calc(var(--tile) * .27);height:calc(var(--tile) * .27);border:max(.5vmin, 3px) solid var(--ink);background:var(--ground);font-weight:700;font-size:calc(var(--tile) * .17);border-radius:50%;justify-content:center;align-items:center;line-height:1;display:flex}.done{justify-content:center;align-items:center;gap:calc(var(--h) * 6);padding-bottom:var(--rest);flex-direction:column}.found-letters{padding:0 var(--edge);flex-wrap:wrap;justify-content:center;gap:1.6vmin;margin:0;list-style:none;display:flex}.found-letters li{--tile:min(12vw, calc(var(--h) * 18));width:var(--tile);height:calc(var(--tile) * 1.12);border-radius:calc(var(--tile) * .2);background:var(--paper);font-weight:700;font-size:calc(var(--tile) * .78);justify-content:center;align-items:center;line-height:1;animation:.32s ease-out both land;display:flex}.found-letters li:nth-child(2){animation-delay:60ms}.found-letters li:nth-child(3){animation-delay:.12s}.found-letters li:nth-child(4){animation-delay:.18s}.found-letters li:nth-child(5){animation-delay:.24s}.found-letters li:nth-child(n+6){animation-delay:.3s}.done-buttons{gap:9vw;display:flex}.done-buttons .round-button{--button:min(calc(var(--h) * 32), 30vw)}.button-penguin{width:72%;height:72%}.waving .penguin-wing{transform-box:fill-box;transform-origin:20% 90%;animation:.5s ease-in-out infinite wave}.done-spark-1{left:6vw;top:calc(var(--h) * 8);width:5vmin}.done-spark-2{right:7vw;top:calc(var(--h) * 30);width:7vmin;animation-delay:.2s}@media (orientation:portrait){:root{--edge:7vw}.circles{--gap:5vw;--size:min(40vw, calc(var(--h) * 60 / var(--rows) - var(--h) * 2))}.start,.asleep{gap:calc(var(--h) * 6);flex-direction:column}.start-penguin{height:calc(var(--h) * 30);max-width:60vw}.start-play{--button:min(calc(var(--h) * 28), 56vw)}.found-letters li{--tile:min(20vw, calc(var(--h) * 11))}.picture{height:calc(var(--h) * 20)}.with-picture .circles{--size:min(38vw, calc(var(--h) * 42 / var(--rows) - var(--h) * 2))}.games{gap:calc(var(--h) * 3);flex-direction:column}.game-button{--tile:min(62vw, calc(var(--h) * 28))}.two-games .start-penguin{height:calc(var(--h) * 20);max-width:40vw}.done-buttons .round-button{--button:min(calc(var(--h) * 22), 38vw)}}.gate,.grown-up-screen{touch-action:pan-y;-webkit-user-select:text;user-select:text;flex-direction:column;font-size:17px;line-height:1.5;overflow-y:auto}.gate{text-align:center;justify-content:center;align-items:center;gap:18px}.gate h1,.grown-up-screen h1{margin:0;font-size:28px;line-height:1.1}.gate p{margin:0;font-size:22px}.gate-numbers{grid-template-columns:repeat(3,72px);gap:12px;display:grid}.gate-number{border:3px solid var(--ink);background:var(--paper);border-radius:18px;height:72px;font-size:28px;font-weight:700}.text-button{border:2px solid var(--ink);background:var(--paper);border-radius:12px;padding:10px 16px;font-weight:700}.text-button.strong{background:var(--yellow)}.text-button.danger{background:var(--orange)}.grown-up-screen{padding:calc(env(safe-area-inset-top) + 20px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 40px) calc(env(safe-area-inset-left) + 20px);gap:16px}.grown-up-screen>*{width:100%;max-width:720px;margin-inline:auto}.grown-up-screen>header{justify-content:space-between;align-items:center;gap:16px;display:flex}.grown-up-screen section{background:var(--paper);border-radius:18px;flex-direction:column;gap:12px;padding:18px;display:flex}.grown-up-screen h2{margin:0;font-size:20px}.grown-up-screen p,.grown-up-screen ul{color:var(--muted);margin:0}.grown-up-screen ul{padding-left:1.2em}.grown-up-screen a{color:var(--ink);font-weight:700}.letter-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;display:grid}.letter-toggle{border:2px solid var(--shelf-edge);background:var(--paper);height:52px;color:var(--muted);border-radius:12px;font-size:24px;font-weight:700}.letter-toggle[aria-pressed=true]{border-color:var(--ink);background:var(--yellow);color:var(--ink)}.choice{flex-wrap:wrap;gap:8px;display:flex}.choice button{border:2px solid var(--shelf-edge);background:var(--paper);color:var(--muted);border-radius:12px;padding:10px 16px;font-weight:700}.choice button[aria-pressed=true]{border-color:var(--ink);background:var(--yellow);color:var(--ink)}.stepper{align-items:center;gap:10px;display:flex}.stepper span{flex:1}.stepper button{border:2px solid var(--ink);background:var(--paper);border-radius:12px;width:44px;height:44px;font-size:24px;font-weight:700;line-height:1}.stepper button:disabled{opacity:.3}.stepper output{white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums;min-width:2ch;font-weight:700}.grown-up-screen table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.grown-up-screen th,.grown-up-screen td{text-align:left;border-bottom:1px solid var(--shelf);padding:6px 8px}.grown-up-screen th{color:var(--muted);font-size:14px}.confirm{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.grown-up-screen .text-button{align-self:flex-start}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}85%{transform:rotate(-3deg)}}@keyframes point{0%,to{transform:translate(0)rotate(-24deg)}50%{transform:translate(-7%,-7%)rotate(-24deg)}}@keyframes pop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes land{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes wave{0%,to{transform:rotate(0)}50%{transform:rotate(-22deg)}}@keyframes breathe{0%,to{opacity:1}50%{opacity:.6}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}