:root{--cream:#fbf3ee;--ink:#1e1a2b;--navy:#4b2e83;--green:#4caf50;--red:#d9503f;--purple:#4b2e83;--orange:#f58220;--lav:#4b2e83;--pink:#ffb26b;--yellow:#ffd23f}*{box-sizing:border-box}html,body{margin:0;height:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;overflow:hidden;background:var(--cream);font-family:Fredoka,system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none}canvas#gl{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.blobs{position:fixed;right:-60px;top:-60px;width:300px;height:300px;pointer-events:none}.blobs i{position:absolute;border-radius:50%}.blobs i:nth-child(1){width:240px;height:240px;right:20px;top:-40px;background:var(--orange)}.blobs i:nth-child(2){width:200px;height:200px;right:-20px;top:-20px;background:var(--lav)}.blobs i:nth-child(3){width:150px;height:150px;right:-30px;top:-10px;background:var(--pink)}.slide{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.head{position:absolute;left:5vw;top:4vh;max-width:min(600px,86vw)}h1,h2{margin:0;font-weight:700;line-height:1.05;letter-spacing:-.01em}h1{font-size:clamp(2.6rem,7vw,5.2rem)}h2{font-size:clamp(2rem,4.6vw,3.6rem)}h1 span,h2 span{color:var(--purple)}.head p{margin:.5em 0 0;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.3}.dock{position:absolute;left:0;right:0;bottom:92px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 12px}.side{position:absolute;left:3vw;top:30vh;display:flex;flex-direction:column;gap:9px;align-items:stretch}.side .btn{text-align:left;padding:.4em .9em}.side.low{top:52vh}.bzz{right:12vw;top:30vh}.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.card{pointer-events:auto;background:#fff;border:3px solid var(--ink);border-radius:22px;padding:14px 22px;max-width:min(760px,94vw);box-shadow:0 6px #1e1a2b26;font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.35;text-align:center}.card b{color:var(--navy)}.logo{position:fixed;right:16px;top:12px;z-index:4;width:clamp(150px,16vw,230px);background:#fff;border-radius:18px;padding:8px 14px;box-shadow:0 4px #1e1a2b33;pointer-events:none}.kicker{display:inline-block;background:var(--orange);color:#fff;border-radius:999px;padding:.15em .9em;font-weight:600;font-size:clamp(1rem,1.7vw,1.3rem);margin-bottom:.5em}.card.quiz{text-align:left;width:min(680px,94vw)}.badge{display:inline-block;background:var(--orange);border:2px solid var(--ink);border-radius:999px;padding:0 .6em;font-weight:700;margin-left:.4em}.btn{pointer-events:auto;font:inherit;font-weight:600;font-size:clamp(1.05rem,1.8vw,1.35rem);padding:.55em 1.1em;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;transition:transform .08s}.btn:hover{background:#fff7e0}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.btn.sel{background:var(--orange)}.btn.big{font-size:clamp(1.3rem,2.6vw,2rem);background:var(--yellow)}.btn.on{background:#8be28b}.btn:disabled{opacity:.4;cursor:default}.steps{display:flex;gap:8px;justify-content:center;margin-top:8px}.steps i{width:16px;height:16px;border-radius:50%;border:3px solid var(--ink);background:#fff}.steps i.done{background:var(--green)}.steps i.now{background:var(--yellow);animation:pulse .8s infinite alternate}@keyframes pulse{to{transform:scale(1.3)}}.inset{position:absolute;right:4vw;top:24vh;pointer-events:none;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:8px 8px 4px;text-align:center;font-weight:600;font-size:1.05rem;box-shadow:0 6px #1e1a2b26}.inset canvas{display:block;width:170px;height:170px}.bzz{position:absolute;font-weight:700;font-size:clamp(2rem,5vw,4rem);color:var(--red);opacity:0;pointer-events:none;text-shadow:3px 3px 0 #fff}.bzz.show{opacity:1;animation:shake .12s infinite}@keyframes shake{0%{transform:translate(0) rotate(-3deg)}50%{transform:translate(4px,-3px) rotate(3deg)}to{transform:translate(-4px,3px) rotate(-3deg)}}.opts{display:flex;flex-direction:column;gap:10px;margin-top:10px}.opts .btn{text-align:left}.opts .btn.right{background:#8be28b;opacity:1}.opts .btn.wrong{background:#ffa9a0;animation:shake .12s 3}.fb{margin-top:8px;min-height:1.4em}#nav{position:fixed;left:0;right:0;bottom:0;height:80px;display:flex;align-items:center;justify-content:center;gap:16px;pointer-events:none;z-index:5}#nav .btn{padding:.4em 1.3em}#dots{display:flex;gap:9px;pointer-events:auto}#dots i{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:pointer}#dots i.on{background:var(--purple);transform:scale(1.25)}#snd{pointer-events:auto;padding:.3em .7em}#nav{padding-bottom:env(safe-area-inset-bottom)}#nav .btn,#dots i{pointer-events:auto}@media (max-width:700px){.logo{width:112px;right:8px;top:8px;padding:4px 8px;border-radius:12px}.blobs{transform:scale(.6);transform-origin:top right}.head{left:14px;top:10px;max-width:calc(100vw - 140px)}h1{font-size:2.1rem}h2{font-size:1.6rem}.head p{font-size:1rem;margin-top:.35em}.kicker{font-size:.8rem;margin-bottom:.35em}.dock{bottom:76px;gap:8px;padding:0 10px}.card{font-size:1rem;padding:10px 14px;border-radius:18px;border-width:2px}.btn{font-size:.95rem;padding:.4em .8em;border-width:2px;box-shadow:0 3px 0 var(--ink)}.btn.big{font-size:1.15rem}.row{gap:6px}.side,.side.low{left:10px;right:10px;top:108px;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px}.side .btn{text-align:center;padding:.35em .7em}.inset{right:auto;left:10px;top:auto;bottom:196px;padding:4px 4px 2px;font-size:.8rem;border-width:2px;border-radius:14px}.inset canvas{width:96px;height:96px}.bzz{right:12px;top:auto;bottom:200px;font-size:2rem}.opts .btn{font-size:.95rem}.steps i{width:13px;height:13px;border-width:2px}#nav{height:64px;gap:8px}#nav .btn{padding:.3em .8em}#nav .lbl{display:none}#dots{gap:6px}#dots i{width:13px;height:13px;border-width:2px}}@media (max-height:520px){.logo{width:120px;padding:4px 8px;top:6px;right:8px}.head{top:6px;left:14px;max-width:46vw}.head p,.kicker{display:none}h1{font-size:1.9rem}h2{font-size:1.5rem}.dock{bottom:58px;gap:6px}.card{font-size:.95rem;padding:6px 12px;max-width:62vw}.btn{font-size:.9rem;padding:.25em .7em;box-shadow:0 2px 0 var(--ink)}.btn.big{font-size:1.05rem}.side,.side.low{top:64px;left:8px;gap:5px}.inset{top:64px;right:8px;padding:3px}.inset canvas{width:90px;height:90px}.bzz{top:22vh;font-size:2rem}#nav{height:48px}}