@font-face{font-family:Fredoka;font-style:normal;font-weight:400 700;font-display:swap;src:url(/jelly-alphabet/static/fredoka-latin-DOQG_Jwn.woff2)format("woff2")}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/jelly-alphabet/static/nunito-latin-CjueodBP.woff2)format("woff2")}:root{--font-display:"Fredoka";--font-body:"Nunito";--background:#f9fbff;--foreground:#26304f;--primary:#7759db;--primary-foreground:#fff;--secondary:#eeebfd;--muted:#edf1f8;--muted-foreground:#6f7891;--accent:#e8edff;--border:#e3e7f0;--ring:#9c83ef}*{box-sizing:border-box}body{font-family:var(--font-body),sans-serif;background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;margin:0;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation;cursor:pointer;font-family:inherit}button:focus-visible,a:focus-visible{outline-offset:5px;outline:3px solid #7355ce}button svg{width:18px;height:18px}.game-app{background:radial-gradient(at 0 90%,#f0edff80,#0000 40%),radial-gradient(at 100% 10%,#f1f7ff,#0000 50%),#fafbff;min-height:100svh}.site-header{background:#fff;border-bottom:1px solid #e9ecf5;justify-content:space-between;align-items:center;gap:22px;height:94px;padding:0 max(5.7vw,24px);display:flex}.brand{color:#343453;align-items:center;gap:11px;text-decoration:none;display:flex}.brand-icon{width:45px;height:48px;font-family:var(--font-display),sans-serif;color:#fff;text-align:center;background:#9d78ef;border-radius:16px 18px 16px 12px;font-size:40px;font-weight:600;line-height:39px;position:relative;transform:rotate(-7deg);box-shadow:0 4px #7e5eca}.brand-icon>span{color:#d5c2ff;font-size:22px;position:absolute;top:-4px;right:5px}.header-note{color:#9399ad;align-items:center;gap:8px;margin-left:50px;font-size:14px;font-weight:700;display:flex}.header-note svg{color:#edb6c9}.header-controls{gap:10px;display:flex}.control-pill{color:#626580;background:#fff;border:1.5px solid #e7e7f0;border-radius:14px;gap:8px;height:42px;padding:0 14px;font-size:14px;font-weight:800}.sound-control[aria-pressed=true]{color:#7d60bb;background:#f6f3ff;border-color:#e7dff8}.expand-control{width:43px;padding:0}.playground{width:min(1160px,100% - 80px);margin:0 auto}.game-intro{justify-content:space-between;align-items:center;gap:24px;padding:31px 2px 26px;display:flex}.eyebrow{letter-spacing:1.8px;color:#8790a5;align-items:center;gap:7px;margin-bottom:7px;font-size:11px;font-weight:900;display:flex}.eyebrow>span{background:#edb648;border-radius:50%;width:6px;height:6px}h1{font-family:var(--font-display),sans-serif;letter-spacing:-.9px;align-items:center;gap:11px;margin:0;font-size:clamp(32px,3.4vw,47px);font-weight:600;line-height:1.2;display:flex}h1>span{color:#9264d4}h1>svg{color:#eab546;stroke-width:1.8px;width:31px;height:31px;margin-left:2px;transform:rotate(10deg)}.intro-copy>p{color:#7a8198;margin:10px 0 0;font-size:16px;font-weight:600}.pop-counter{background:#fff;border:1.5px solid #eee9d9;border-radius:21px;align-items:center;gap:13px;min-width:154px;padding:13px 22px 13px 15px;display:flex;transform:rotate(3deg);box-shadow:0 4px #f1eee5}.counter-star{color:#efb944;background:#fff8df;border-radius:14px;padding:10px}.counter-star svg{stroke:#dca12c;stroke-width:1.7px;width:28px;height:28px}.pop-counter strong{font-family:var(--font-display);font-size:29px;font-weight:600;line-height:1.1;display:block}.pop-counter div>span{color:#9a8b6c;white-space:nowrap;font-size:12px;font-weight:800}.jelly-zone{isolation:isolate;background:radial-gradient(at 50% 36%,#f3fcff 0%,#e1f3fc 54%,#d5eef9 100%);border:2px solid #dae9f1;border-radius:30px;height:440px;position:relative;overflow:hidden;box-shadow:0 7px #e7edf6,0 17px 40px #364c6c05}.jelly-canvas{touch-action:pan-y;width:100%;height:100%;position:absolute;inset:0}.jelly-canvas canvas{width:100%;height:100%;display:block}.zone-top{pointer-events:none;z-index:2;justify-content:space-between;align-items:center;display:flex;position:absolute;top:21px;left:24px;right:24px}.zone-label{color:#708e9e;letter-spacing:1.7px;align-items:center;gap:8px;font-size:11px;font-weight:900;display:flex}.live-dot{background:#7ccdb8;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #bee9e250}.free-play{color:#7a96a8;background:#ffffff90;border:1px solid #cde2ed;border-radius:20px;align-items:center;gap:7px;padding:6px 11px;font-size:12px;font-weight:800;display:flex}.zone-bottom{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:15px;left:24px;right:20px}.zone-bottom>span{color:#7996a8;align-items:center;gap:8px;font-size:12px;font-weight:700;display:flex}.reset-button{pointer-events:auto;color:#6b8a9f;border-radius:10px;gap:7px;padding:0 9px;font-size:12px;font-weight:800}.reset-button:hover{background:#ffffff90}.letter-callout{z-index:2;color:#788aa2;white-space:nowrap;pointer-events:none;background:#ffffffed;border:1px solid #fff;border-radius:18px;align-items:center;gap:9px;padding:11px 19px;font-size:14px;font-weight:800;display:flex;position:absolute;bottom:52px;left:50%;transform:translate(-50%)rotate(-2deg);box-shadow:0 5px #bcd2e333,0 4px 16px #55709005}.letter-callout>svg{color:#a48bd4}.letter-callout.has-letter{padding:7px 18px 7px 10px;animation:.4s ease-out callout-pop}.callout-letter{color:#8860c7;font-family:var(--font-display);background:#f1eafe;border-radius:10px;padding:1px 10px;font-size:27px}.callout-letter small{margin-left:2px;font-size:22px}.alphabet-panel{background:#fff;border:1.5px solid #e8eaf3;border-radius:23px;margin-top:27px;padding:20px 24px 16px;box-shadow:0 4px #eef0f7}.alphabet-heading{justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px;display:flex}.alphabet-heading h2{font-family:var(--font-display);letter-spacing:.1px;margin:0;font-size:19px;font-weight:500}.alphabet-heading>span{color:#9195ab;font-size:12px;font-weight:700}.alphabet-heading strong{color:#8664bf}.alphabet-keys{grid-template-columns:repeat(13,minmax(0,1fr));gap:10px;display:grid}.letter-key{--key-bg:#fce7ef;--key-ink:#d26390;--key-border:#f0d4e1;border:1.5px solid var(--key-border);background:var(--key-bg);color:var(--key-ink);height:49px;font-family:var(--font-display);box-shadow:0 4px 0 var(--key-border);border-radius:12px;font-size:25px;font-weight:500;transition:transform .13s,box-shadow .13s,filter .13s;position:relative}.pink{--key-bg:#fce8f0;--key-ink:#ba4776;--key-border:#f2d4e0}.orange{--key-bg:#fff0e2;--key-ink:#b97535;--key-border:#f1dfca}.purple{--key-bg:#f0eaff;--key-ink:#8653b6;--key-border:#e2d6f3}.green{--key-bg:#e8f6e9;--key-ink:#54844b;--key-border:#d6e9d4}.blue{--key-bg:#e4f2fe;--key-ink:#447dae;--key-border:#d0e5f4}.yellow{--key-bg:#fcf5dd;--key-ink:#977b2c;--key-border:#ece2bd}.letter-key:hover{background:var(--key-bg);color:var(--key-ink);filter:saturate(1.4);box-shadow:0 6px 0 var(--key-border);transform:translateY(-3px)rotate(-3deg)}.letter-key:active,.letter-key.key-active{box-shadow:0 0 0 var(--key-border);transform:translateY(4px)scale(.95)}.discovery-dot{background:currentColor;border-radius:50%;width:4px;height:4px;display:none;position:absolute;bottom:5px;right:7px}.discovered .discovery-dot{display:block}.alphabet-foot{color:#969aae;justify-content:space-between;align-items:center;margin-top:17px;font-size:12px;font-weight:700;display:flex}.alphabet-foot>span{align-items:center;gap:7px;display:flex}.keep-going{color:#a68abd}.game-footer{color:#9296aa;letter-spacing:.1px;justify-content:center;align-items:center;gap:7px;padding:21px 0 23px;font-size:12px;font-weight:700;display:flex}.game-footer>svg{color:#c0a6d2}.game-footer>span{color:#c7cad6;margin:0 4px}.scene-loading{text-align:center;font-family:var(--font-display);color:#8ba2b5;pointer-events:none;font-size:24px;position:absolute;top:45%;left:0;right:0}.scene-loading span{animation:1s infinite alternate pulse}.fallback-letters{justify-content:space-evenly;align-items:center;gap:12px;display:flex;position:absolute;inset:70px 30px 130px}.fallback-letter{font-size:clamp(45px,10vw,110px);font-family:var(--font-display);color:var(--key-ink);text-shadow:0 6px 0 var(--key-border);background:0 0;border:0;font-weight:700;animation:3s ease-in-out infinite alternate float}.fallback-letter:active{transform:scale(.6)}.speech-note{text-align:center;color:#7c738a;padding:0 20px 20px;font-size:14px}.expanded .jelly-zone{height:calc(100svh - 464px);min-height:300px}@keyframes pulse{to{opacity:.35}}@keyframes float{to{translate:0 -20px}}@keyframes callout-pop{0%{opacity:.2;scale:.75}to{opacity:1;scale:1}}@media (min-width:1500px){.playground{width:min(1260px,100% - 120px)}.jelly-zone{height:490px}.game-intro{padding-top:40px;padding-bottom:32px}.alphabet-panel{padding-top:24px;padding-bottom:21px}}@media (max-width:900px){.playground{width:calc(100% - 40px)}.site-header{height:80px;padding:0 25px}.header-note{display:none}.jelly-zone{height:390px}.alphabet-keys{gap:8px}.alphabet-panel{padding:20px 18px 16px}.letter-key{height:45px}.keep-going{display:none!important}.intro-copy>p{max-width:420px;line-height:1.6}.pop-counter{min-width:133px;padding:12px}.pop-counter strong{font-size:26px}}@media (max-width:600px){.site-header{gap:10px;height:76px;padding:0 18px}.brand-icon{border-radius:12px;width:36px;height:38px;font-size:33px;line-height:30px}.control-pill{border-radius:12px;height:38px;padding:0 10px}.expand-control{width:38px;padding:0}.sound-control>span{display:none}.header-controls{gap:7px}.playground{width:calc(100% - 28px)}.game-intro{gap:12px;padding:23px 3px 20px}.eyebrow{letter-spacing:.6px;margin-bottom:8px;font-size:9px}h1{letter-spacing:-.5px;gap:6px;font-size:30px}h1>svg{display:none}.intro-copy>p{max-width:260px;margin-top:7px;font-size:14px;line-height:1.5}.pop-counter{border-radius:15px;flex-direction:column;gap:5px;min-width:64px;padding:9px}.counter-star{background:0 0;padding:0}.counter-star svg{width:21px;height:21px}.pop-counter strong{text-align:center;font-size:23px}.pop-counter div>span{font-size:10px}.jelly-zone{border-radius:23px;height:430px}.zone-top{top:17px;left:17px;right:17px}.zone-label{letter-spacing:1.2px;font-size:10px}.free-play{padding:4px 8px;font-size:12px}.zone-bottom{bottom:10px;left:15px;right:12px}.zone-bottom>span{gap:0;font-size:0}.zone-bottom>span>svg{width:21px;height:21px}.letter-callout{border-radius:15px;padding:10px 12px;font-size:12px;bottom:55px}.callout-letter{padding:1px 7px;font-size:23px}.callout-letter small{font-size:18px}.alphabet-panel{border-radius:20px;margin-top:20px;padding:17px 14px 14px}.alphabet-heading{align-items:flex-start;gap:8px;margin-bottom:14px}.alphabet-heading h2{max-width:175px;font-size:16px}.alphabet-heading>span{text-align:right;max-width:100px;font-size:12px}.alphabet-keys{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px 7px}.letter-key{border-radius:10px;height:43px;font-size:22px}.alphabet-foot{margin-top:15px;font-size:11px;line-height:1.5}.alphabet-foot>span{gap:6px}.game-footer{flex-wrap:wrap;gap:5px;padding:21px 0;font-size:10px}.game-footer>span{margin:0}.expanded .jelly-zone{height:430px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width:360px){h1{font-size:25px}.eyebrow{letter-spacing:.3px;font-size:8px}.letter-callout.has-letter{gap:6px;font-size:11px}}.picture-reveal{z-index:4;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#e8f6ff8c;place-items:center;animation:.2s ease-out picture-reveal-in;display:grid;position:absolute;inset:48px 0 42px}.picture-card{background:linear-gradient(145deg,#fffffffa,var(--key-bg));border:2px solid #fff;border-radius:28px;flex-direction:column;align-items:center;width:350px;min-height:295px;padding:12px 25px 23px;display:flex;position:relative;overflow:hidden;box-shadow:0 9px #bacddd40,0 18px 50px #4769801a}.picture-letter{font-family:var(--font-display),sans-serif;color:var(--key-ink);font-size:39px;font-weight:500;position:absolute;top:13px;left:18px}.picture-letter small{margin-left:1px;font-size:28px}.association-image{object-fit:contain;filter:drop-shadow(0 9px 6px #3b426013);width:180px;height:180px;margin:5px 0 1px;display:block}.picture-caption{text-align:center;color:var(--key-ink)}.picture-caption>span{opacity:.8;font-size:15px;font-weight:800;display:block}.picture-caption>strong{font-size:34px;line-height:1.15;font-family:var(--font-display),sans-serif;font-weight:500;display:block}.picture-pause{background:var(--key-ink);opacity:.25;transform-origin:0;width:100%;height:5px;animation:linear forwards picture-pause;position:absolute;bottom:0;left:0}@keyframes picture-reveal-in{0%{opacity:0}to{opacity:1}}@keyframes picture-pause{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (max-width:600px){.picture-reveal{inset:50px 0 43px}.picture-card{border-radius:24px;width:min(290px,100% - 34px);min-height:280px;padding:10px 19px 21px}.association-image{width:170px;height:170px}.picture-letter{font-size:34px;top:10px;left:13px}.picture-letter small{font-size:25px}.picture-caption>strong{font-size:31px}}button{white-space:nowrap;color:inherit;font-size:inherit;background:0 0;border:0;justify-content:center;align-items:center;gap:8px;padding:0;display:inline-flex}button[hidden],[hidden]{display:none!important}.letter-key{padding:0}.reset-button{background:0 0;border:0;height:32px}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.noscript{max-width:34rem;font-family:var(--font-body),sans-serif;color:#26304f;text-align:center;margin:3rem auto;padding:0 1.5rem;font-size:17px;line-height:1.6}.noscript a{color:#7759db}.brand-home{font-family:var(--font-body),sans-serif;letter-spacing:1.7px;color:#9aa0b6;font-size:10px;font-weight:900;line-height:14px;display:block}.brand-name{font-family:var(--font-display),sans-serif;letter-spacing:-1px;font-size:31px;font-weight:600;line-height:27px;display:block}.brand-name>b{font-family:var(--font-body),sans-serif;letter-spacing:3.3px;padding-left:2px;font-size:10px;font-weight:900;line-height:16px;display:block}.brand:hover .brand-home{color:#7d60bb}.scene-loading{pointer-events:auto}.scene-loading a{font-family:var(--font-body),sans-serif;color:#7d92a4;margin-top:10px;font-size:13px;font-weight:800;display:block}.fallback-note{z-index:3;text-align:center;color:#6e8697;margin:0;font-size:13px;font-weight:700;line-height:1.5;position:absolute;top:52px;left:22px;right:22px}.fallback-note a{color:#7759db;font-weight:800}.game-footer a{color:#8f7cb0;font-weight:800}@media (max-width:600px){.brand-home{letter-spacing:1.3px;font-size:8px;line-height:12px}.brand-name{font-size:25px;line-height:22px}.brand-name>b{letter-spacing:2.7px;font-size:8px;line-height:14px}.fallback-note{font-size:12px;top:48px;left:14px;right:14px}}