@charset "UTF-8";
:root{font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif;color:#293c35;background:#faf7f0;font-synthesis:none;--muted:#718077;--ink:#293c35;--green:#315c45;--paper:#faf7f0}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #315c45;outline-offset:5px}button:disabled{cursor:default}button,a{-webkit-user-select:none;user-select:none}button{border:0}button svg{width:23px;height:23px;vertical-align:middle}svg{display:block}button[hidden],[hidden]{display:none!important}
.app{width:min(100%,1000px);margin:auto;padding:calc(24px + env(safe-area-inset-top)) 40px calc(18px + env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:16px}.brand{color:var(--ink);text-decoration:none;font-weight:650;font-size:15px;letter-spacing:-.3px;display:flex;align-items:center;gap:12px}.brand-mark{width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(-9deg)}.brand-mark i{background:#ed7665;border-radius:4px}.brand-mark i:nth-child(2){background:#efc859}.brand-mark i:nth-child(3){background:#76a98b}.brand-mark i:nth-child(4){background:#6ca7d5}.icon-button{width:46px;height:46px;background:#f0eee5;border-radius:50%;display:grid;place-items:center}.icon-button[aria-pressed=true]{background:#e7e4db;color:#8c8d83}main{display:flex;align-items:center;justify-content:center;flex:1}section{width:100%}.welcome{text-align:center;padding:45px 0 22px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:750;margin:0 0 17px;color:#71836d}h1{font-size:clamp(40px,6vw,62px);line-height:1.1;font-weight:750;letter-spacing:-2.5px;margin:0}h1 span{color:#5c8a5d}.lead{font-size:17px;color:var(--muted);line-height:1.6;margin:19px 0 0}.color-garden{height:235px;width:350px;max-width:100%;position:relative;margin:25px auto 17px}.friend{position:absolute;display:grid;place-items:center}.friend-blue{width:116px;height:142px;background:#75abd8;left:12px;bottom:25px;border-radius:60px 60px 35px 35px;transform:rotate(-13deg)}.friend-yellow{width:154px;height:154px;background:#efc951;left:98px;top:18px;border-radius:50%;z-index:2;transform:rotate(7deg)}.friend-red{width:117px;height:120px;background:#e98370;right:7px;bottom:27px;border-radius:29% 48% 35% 42%;transform:rotate(12deg);z-index:3}.face{width:49px;height:38px;position:relative;transform:translateY(8px)}.face i{background:#34413a;width:7px;height:10px;border-radius:50%;position:absolute;top:0;left:10px}.face i:nth-child(2){left:33px}.face b{width:16px;height:10px;border:2.5px solid #34413a;border-top:0;border-radius:0 0 15px 15px;position:absolute;left:17px;top:21px}.garden-shadow{position:absolute;width:300px;height:15px;background:#e8e4d5;border-radius:50%;bottom:10px;left:26px;z-index:-1}.spark{position:absolute;color:#8a9e6d;font-size:30px}.spark-a{left:38px;top:5px;transform:rotate(10deg)}.spark-b{right:22px;top:4px;font-size:46px;color:#d6b753}.primary{background:var(--green);color:#fffef6;border-radius:20px;font-size:18px;font-weight:650;padding:21px 28px;display:flex;justify-content:space-between;align-items:center;gap:36px;margin:0 auto;min-width:263px;box-shadow:0 5px 0 #234534;transition:transform .15s,box-shadow .15s}.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #234534}.primary span{font-size:25px;line-height:1}.quiet{font-size:12px;color:#899087;margin:18px 0 0}.little-note{display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px;color:#92958a;margin-top:34px}.little-note span{font-size:20px;color:#a5ae8c}footer{padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#969b90;font-size:9px;letter-spacing:1.8px}.text-button{background:none;font-size:12px;color:#7b877a;padding:12px 0;letter-spacing:0}.text-button span{margin-left:5px}.game{max-width:640px;padding:25px 0 10px}.game-top{display:flex;align-items:center;justify-content:space-between}.back-button{height:42px;width:42px;border:1px solid #dfdfd2;background:transparent;border-radius:50%;font-size:23px}.progress{display:flex;gap:9px}.progress i{width:9px;height:9px;border-radius:50%;background:#e0e3d7}.progress i.filled{background:#77a080}.tiny-flower{font-size:32px;color:#b1ba94;width:42px;text-align:center}.question-block{text-align:center;margin:29px 0 26px}.question-block .eyebrow{font-size:9px;margin-bottom:11px}.question-block h1{font-size:clamp(35px,5vw,48px);letter-spacing:-1.5px}.listen{display:inline-flex;align-items:center;gap:8px;background:#ecefe4;color:#53634d;border-radius:25px;padding:11px 17px;font-size:12px;font-weight:600;margin-top:17px}.listen svg{width:17px;height:17px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:17px}.color-choice{position:relative;min-height:155px;height:clamp(130px,22vh,215px);border-radius:30px;background:var(--color);display:flex;align-items:center;justify-content:center;border:4px solid transparent;transition:transform .18s,opacity .18s,box-shadow .18s;box-shadow:inset 0 -7px 0 #00000009}.color-choice .face{opacity:.75;transform:scale(1.15)}.color-choice:nth-child(2) .face{transform:rotate(9deg) scale(1.15)}.color-choice:nth-child(3) .face{transform:rotate(-8deg) scale(1.15)}.color-choice:active{transform:scale(.96)}.color-choice.correct{box-shadow:0 0 0 4px var(--paper),0 0 0 7px #315c45;transform:scale(.97)}.color-choice.correct:after{content:'✓';position:absolute;top:12px;right:14px;background:#fffdf2;color:#315c45;width:29px;height:29px;border-radius:50%;font-size:21px}.choices.solved .color-choice:not(.correct){opacity:.45}.color-choice.hint{animation:nudge .35s ease-in-out}.feedback{height:28px;text-align:center;font-size:14px;font-weight:550;margin:26px 0 0;color:#7d8978}.feedback.success{color:#3d7952}.finish{text-align:center;padding:50px 0}.finish-star{font-size:125px;color:#e7b847;line-height:1.1;margin-bottom:32px;animation:pop .5s ease-out}.finish h1{font-size:clamp(38px,5vw,55px)}.finish-dots{display:flex;justify-content:center;gap:13px;margin:36px 0 44px}.finish-dots i{height:20px;width:20px;border-radius:50%;background:#e77364}.finish-dots i:nth-child(2){background:#efc951}.finish-dots i:nth-child(3){background:#79a98c}.finish-dots i:nth-child(4){background:#75abd8}.finish-dots i:nth-child(5){background:#a98ac8}.finish .text-button{display:block;margin:22px auto 0}dialog{max-width:440px;width:calc(100% - 32px);border:0;background:#faf7f0;color:#293c35;border-radius:27px;padding:40px 28px 29px;max-height:85svh;overflow:auto}dialog::backdrop{background:#26352eb3;backdrop-filter:blur(5px)}dialog h2{font-size:30px;letter-spacing:-1px;margin:0 0 20px}dialog h3{margin:24px 0 0;font-size:16px}dialog p{font-size:14px;line-height:1.65;color:#6b786b}dialog .close{position:absolute;top:12px;right:12px;width:34px;height:34px;font-size:23px}dialog .eyebrow{font-size:8px}.offline-note{background:#e8eddf;padding:13px 16px;border-radius:12px}.privacy{font-size:12px!important}dialog .primary{width:100%;margin-top:24px;justify-content:center;min-width:0;font-size:16px;padding:17px}
@keyframes pop{0%{transform:scale(.6) rotate(-20deg)}75%{transform:scale(1.08) rotate(4deg)}100%{transform:scale(1)}}@keyframes nudge{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@media(min-width:900px){.app{padding-left:48px;padding-right:48px}.welcome{padding-top:35px}.game{max-width:600px}.color-choice{height:190px}.color-garden{margin-top:35px;margin-bottom:25px}}
@media(max-width:540px){.app{padding:calc(16px + env(safe-area-inset-top)) 23px calc(9px + env(safe-area-inset-bottom))}.brand{font-size:12px;gap:9px}.brand-mark{width:24px;height:24px}.icon-button{width:42px;height:42px}.welcome{padding-top:30px}.eyebrow{font-size:9px;letter-spacing:2px}h1{font-size:45px;letter-spacing:-2px}.lead{font-size:14px;margin-top:16px}.color-garden{transform:scale(.87);height:220px;margin:9px auto 0;width:330px}.friend-yellow{left:89px}.friend-blue{left:4px}.friend-red{right:2px}.primary{min-width:255px;font-size:17px;padding:19px 25px}.little-note{margin-top:25px;font-size:10px}.game{padding-top:20px}.question-block{margin:24px 0}.choices{gap:15px}.color-choice{border-radius:25px;min-height:135px;height:clamp(140px,22svh,190px)}.feedback{font-size:12px;margin-top:23px}.question-block h1{font-size:35px}.question-block .eyebrow{font-size:8px}.finish{padding:35px 0}.finish .eyebrow{font-size:8px}footer{font-size:8px;padding-top:10px}footer .text-button{font-size:10px}.quiet{font-size:11px}}
@media(max-height:700px) and (max-width:540px){.welcome{padding-top:16px}.color-garden{height:176px;transform:scale(.73);margin-top:-7px;margin-bottom:-9px}.friend-yellow{top:0}.friend-blue,.friend-red{bottom:0}.garden-shadow{bottom:-5px}h1{font-size:39px}.little-note{margin-top:20px}.question-block{margin:12px 0 17px}.color-choice{height:128px;min-height:115px}.game{padding-top:8px}.feedback{margin-top:16px}.finish-star{font-size:90px;margin-bottom:20px}}
@media(orientation:landscape) and (max-height:550px){.app{padding-top:12px}.welcome{position:relative;padding:12px 50% 12px 0;min-height:265px}.welcome h1{font-size:35px}.welcome .lead{font-size:12px}.color-garden{position:absolute;right:0;top:12px;width:300px;transform:scale(.85);margin:0}.welcome .primary{margin-top:20px;min-width:220px;padding:14px 20px}.welcome .quiet,.welcome .little-note{display:none}.game{max-width:780px;padding-top:8px}.game-top{position:absolute;top:73px;left:30px;right:30px}.question-block{margin:12px 0 18px}.question-block .eyebrow{display:none}.question-block h1{font-size:30px}.listen{margin-top:9px;padding:6px 12px}.choices{grid-template-columns:repeat(4,1fr);gap:14px}.color-choice{height:125px;min-height:100px;border-radius:23px}.feedback{margin-top:15px;font-size:12px}footer{padding-top:0}.finish{padding:10px 0}.finish-star{font-size:60px;margin:0 0 10px}.finish h1{font-size:32px}.finish .lead{margin-top:8px}.finish-dots{margin:17px 0}.finish .primary{padding:13px 22px}.finish .text-button{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}