:root{color-scheme:light;--ink:#18354a;--muted:#637786;--paper:#fffdf7;--teal:#168d8a;--teal-dark:#0d625f;--yellow:#ffd65c;--coral:#f36f58;--blue:#4aaee8;--line:rgba(25,61,80,.16);font-family:"Avenir Next","Trebuchet MS",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box} [hidden]{display:none!important} html,body{width:100%;height:100%;min-width:960px;min-height:650px;overflow:hidden} body{margin:0;background:#dff3fc;color:var(--ink)} button{font:inherit;color:inherit;cursor:pointer} :focus-visible{outline:4px solid #075e89;outline-offset:4px}
.lesson{width:100%;height:100%;padding:14px}.weather-world{position:relative;width:min(1340px,100%);height:100%;min-height:620px;margin:auto;overflow:hidden;isolation:isolate;border:1px solid rgba(24,69,88,.16);border-radius:30px;background:#9fdcf4;box-shadow:0 10px 0 rgba(39,99,117,.12),0 28px 60px rgba(27,72,91,.18)}
.world-backdrop{position:absolute;z-index:-5;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.04)}.sky-wash{position:absolute;z-index:-4;inset:0;background:linear-gradient(180deg,rgba(211,246,255,.15),rgba(240,251,249,.3) 54%,rgba(222,243,235,.75));transition:background 220ms ease-out}.sun-orb{position:absolute;z-index:-3;right:9%;top:11%;width:108px;height:108px;border-radius:50%;opacity:.35;background:radial-gradient(circle at 36% 32%,#fffbd0 0 13%,#ffd755 42%,#f6a72c 100%);box-shadow:0 0 70px rgba(255,208,72,.55);transition:opacity 220ms,transform 220ms}
.weather-layer{position:absolute;z-index:-2;inset:0;pointer-events:none}.cloud{position:absolute;width:220px;height:62px;border-radius:999px;opacity:.08;background:#f7fbff;box-shadow:48px -31px 0 2px #f7fbff,108px -15px 0 10px #f7fbff;transition:opacity 200ms,transform 400ms ease-out}.cloud-a{left:12%;top:20%}.cloud-b{right:21%;top:29%;transform:scale(.72)}.rain,.snow{position:absolute;left:0;right:0;top:12%;bottom:30%;opacity:0;transition:opacity 160ms}.rain{background-image:repeating-linear-gradient(108deg,transparent 0 48px,rgba(52,145,199,.65) 49px 52px,transparent 53px 78px);background-size:130px 105px}.snow{background-image:radial-gradient(circle,#fff 0 4px,transparent 5px);background-size:66px 66px}.lightning{position:absolute;left:61%;top:24%;opacity:0;color:#ffe05b;font-size:105px;font-weight:900;text-shadow:0 4px 0 #d37b20;transform:rotate(8deg)}
.weather-world[data-weather="sunny"] .sun-orb{opacity:1;transform:scale(1.08)}.weather-world[data-weather="rainy"] .sky-wash,.weather-world[data-weather="stormy"] .sky-wash{background:linear-gradient(#789aaeaa,#bdd1d7aa)}.weather-world[data-weather="rainy"] .cloud,.weather-world[data-weather="stormy"] .cloud,.weather-world[data-weather="snowy"] .cloud{opacity:.94;transform:translateX(18px)}.weather-world[data-weather="rainy"] .rain,.weather-world[data-weather="stormy"] .rain{opacity:1}.weather-world[data-weather="snowy"] .snow{opacity:1}.weather-world[data-weather="stormy"] .lightning{opacity:1;animation:flash 700ms ease-out}.weather-world[data-weather="windy"] .cloud{opacity:.82;animation:cloud-drift 2.2s ease-in-out infinite alternate}
.mission-pill,.practice-hud{position:absolute;z-index:20;left:24px;top:20px;display:flex;align-items:center;gap:13px;min-height:50px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,253,247,.91);box-shadow:0 5px 18px rgba(24,67,84,.1);backdrop-filter:blur(10px)}.mission-pill>span,.mission-pill>strong,.practice-hud span{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}.mission-pill>span{color:var(--coral)}.mission-pill>strong{color:var(--muted)}.mission-dots{display:flex;gap:6px}.mission-dots i{width:12px;height:12px;border:2px solid #a8bbc1;border-radius:50%;background:#edf3f3}.mission-dots i.done{border-color:#d48b17;background:var(--yellow)}.mission-dots i.current{border-color:var(--teal-dark);background:var(--teal);box-shadow:0 0 0 4px rgba(22,141,138,.14)}.practice-hud{border-radius:18px}.practice-hud>div:not(.difficulty){min-width:48px;text-align:center}.practice-hud strong{display:block;font-size:19px}.practice-hud span{color:var(--muted)}.difficulty{width:190px}.difficulty>div{height:8px;margin-top:5px;overflow:hidden;border-radius:99px;background:#dbe6e5}.difficulty i{display:block;height:100%;width:18%;border-radius:inherit;background:linear-gradient(90deg,var(--yellow),var(--coral));transition:width 220ms}
.sticker-art{overflow:hidden;border:7px solid #fff;border-radius:25px;background:#fff;box-shadow:0 8px 0 rgba(35,77,89,.1),0 15px 30px rgba(29,66,82,.15)}.sticker-art img{width:100%;height:100%;display:block;object-fit:cover}.mascot{position:absolute;z-index:14;left:27px;bottom:183px;width:165px;height:175px;transform-origin:50% 100%;transition:transform 150ms ease-out}.mascot img{object-position:center}.mascot p{position:absolute;right:7px;top:5px;max-width:100px;margin:0;padding:8px 10px;border-radius:13px 13px 3px 13px;background:#fff;color:var(--teal-dark);font-size:10px;font-weight:900;line-height:1.2;box-shadow:0 4px 12px rgba(27,61,78,.13)}.mascot.happy{animation:mascot-pop 500ms ease-out}.mascot.miss{animation:mascot-shake 320ms ease-out}.weather-crew{position:absolute;z-index:9;right:22px;top:20px;width:250px;height:85px;border-width:5px;border-radius:20px;opacity:.95}.weather-crew img{object-fit:cover}
.station-card{position:absolute;z-index:10;left:215px;right:215px;top:92px;height:454px;padding:21px 26px;border:1px solid var(--line);border-radius:28px;background:rgba(255,253,247,.9);box-shadow:0 10px 0 rgba(37,83,94,.09),0 24px 48px rgba(28,70,87,.15);backdrop-filter:blur(13px)}.station-topline{display:flex;justify-content:space-between;align-items:center}.station-topline>span:first-child{color:var(--coral);font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.live-dot{padding:5px 9px;border-radius:99px;background:#e9f7f0;color:#187554;font-size:9px;font-weight:900;text-transform:uppercase}.live-dot:before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#2cb678}.station-card h1{margin:8px 0 10px;text-align:center;font-size:clamp(25px,2.6vw,36px);line-height:1.05;letter-spacing:-.04em}.clue-stage{position:relative;height:300px;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,#e5f7ff,#f8fbf0);border:1px solid rgba(31,86,108,.11)}.clue-icons{display:flex;align-items:center;justify-content:center;gap:34px;width:100%;height:100%}.clue{position:relative;width:132px;height:132px;display:grid;place-items:center;border:3px solid rgba(20,91,109,.12);border-radius:36px;background:#fff;box-shadow:0 7px 0 rgba(34,91,107,.1);font-size:67px;transition:transform 160ms,border-color 160ms}.clue small{position:absolute;left:0;right:0;bottom:9px;color:var(--muted);font-size:10px;font-weight:900;text-align:center;text-transform:uppercase}.clue.is-hint{border-color:var(--yellow);animation:clue-pulse 600ms ease-out}.windsock{width:84px;height:48px;clip-path:polygon(0 0,100% 28%,100% 72%,0 100%);background:repeating-linear-gradient(90deg,var(--coral) 0 18px,#fff 18px 36px);transform-origin:left center}.windsock.wind{transform:rotate(-8deg)}
.thermometer{display:flex;align-items:center;gap:31px}.thermometer-scale{position:relative;width:46px;height:210px;border:5px solid var(--ink);border-radius:25px 25px 18px 18px;background:repeating-linear-gradient(to top,transparent 0 27px,rgba(24,53,74,.2) 28px 30px)}.thermometer-scale:after{content:"";position:absolute;left:50%;bottom:-20px;width:67px;height:67px;transform:translateX(-50%);border:5px solid var(--ink);border-radius:50%;background:var(--coral)}.thermometer-scale i{position:absolute;left:50%;bottom:9px;width:16px;height:var(--temp-height,40%);transform:translateX(-50%);border-radius:10px 10px 0 0;background:var(--coral);transition:height 350ms ease-out}.thermometer strong{min-width:118px;font-size:29px;line-height:1.15}.dress-stage{display:flex;align-items:center;gap:38px}.kid-frame{width:158px;height:240px;border-radius:26px}.weather-bubble{width:155px;height:155px;display:grid;place-items:center;border:3px dashed rgba(24,83,105,.22);border-radius:50%;background:#fff;font-size:74px}.pattern-strip{display:flex;align-items:center;gap:16px}.pattern-day{width:112px;height:142px;display:grid;place-items:center;border:3px solid #fff;border-radius:24px;background:#fff;box-shadow:0 6px 0 rgba(36,88,102,.11);font-size:55px}.pattern-day small{align-self:end;margin-bottom:11px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.pattern-day.unknown{border-style:dashed;border-color:var(--teal);color:var(--teal);background:#effaf8;font-size:45px}.hint{height:19px;margin:8px 0 0;color:var(--muted);font-size:11px;font-weight:800;text-align:center}
.decision-dock{position:absolute;z-index:16;left:210px;right:24px;bottom:22px;min-height:160px;display:grid;grid-template-columns:230px minmax(0,1fr);align-items:center;gap:20px;padding:19px 22px;border:1px solid var(--line);border-radius:25px;background:rgba(255,253,247,.97);box-shadow:0 8px 0 rgba(39,84,94,.1),0 22px 45px rgba(31,71,86,.14);backdrop-filter:blur(12px)}.goal-copy span{display:block;color:var(--coral);font-size:9px;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.goal-copy strong{display:block;margin-top:5px;font-size:20px;line-height:1.15}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.choice{min-height:84px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border:2px solid #c9d7d8;border-radius:17px;background:#fff;box-shadow:0 5px 0 #d9e3e2;font-size:15px;font-weight:950;transition:transform 140ms ease-out,border-color 140ms,box-shadow 140ms}.choice .icon{font-size:29px}.choice:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 7px 0 #c5dedb}.choice:active{transform:translateY(4px);box-shadow:0 1px 0 #c5dedb}.choice[aria-disabled="true"]{cursor:default;opacity:.58}.choice.correct{border-color:#238760;background:#e9f8ef;opacity:1}.next-button{grid-column:2;width:min(360px,100%);min-height:62px;justify-self:center;border:2px solid var(--teal-dark);border-radius:16px;color:white;background:var(--teal);box-shadow:0 6px 0 var(--teal-dark);font-size:16px;font-weight:950}.weather-world.wrong .decision-dock{animation:dock-shake 320ms ease-out}
.toast{position:absolute;z-index:30;left:50%;bottom:194px;max-width:560px;padding:10px 17px;opacity:0;transform:translate(-50%,10px);border-radius:99px;background:var(--ink);color:#fff;font-size:12px;font-weight:900;pointer-events:none;transition:opacity 150ms,transform 150ms}.toast.show{opacity:1;transform:translate(-50%,0)}.confetti{position:absolute;z-index:28;left:55%;top:34%;pointer-events:none}.confetti i{position:absolute;width:13px;height:13px;opacity:0;border-radius:4px;background:var(--yellow)}.weather-world.celebrate .confetti i{animation:spark 720ms ease-out both}.confetti i:nth-child(1){--x:-200px;--y:-130px}.confetti i:nth-child(2){--x:-100px;--y:-190px;animation-delay:40ms}.confetti i:nth-child(3){--x:10px;--y:-180px;animation-delay:80ms}.confetti i:nth-child(4){--x:150px;--y:-120px;animation-delay:120ms}.confetti i:nth-child(5){--x:210px;--y:5px;animation-delay:160ms}.confetti i:nth-child(6){--x:120px;--y:110px;animation-delay:200ms}.confetti i:nth-child(7){--x:-120px;--y:115px;animation-delay:240ms}.confetti i:nth-child(8){--x:-220px;--y:10px;animation-delay:280ms}
@keyframes mascot-pop{45%{transform:scale(1.09) rotate(-3deg)}}@keyframes mascot-shake{25%{transform:translateX(-6px) rotate(-2deg)}70%{transform:translateX(6px) rotate(2deg)}}@keyframes dock-shake{30%{transform:translateX(-6px)}70%{transform:translateX(6px)}}@keyframes clue-pulse{50%{transform:scale(1.07)}}@keyframes cloud-drift{to{transform:translateX(70px)}}@keyframes flash{20%,60%{opacity:.25}40%,100%{opacity:1}}@keyframes spark{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(200deg) scale(1.2)}}
@media(max-height:760px){.lesson{padding:10px}.station-card{top:75px;height:405px}.clue-stage{height:258px}.decision-dock{min-height:145px;bottom:15px}.mascot{bottom:166px;width:150px;height:160px}.toast{bottom:170px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.thermometer-scale.is-hint,.weather-bubble.is-hint,.pattern-day.is-hint{border-color:var(--yellow);box-shadow:0 0 0 7px rgba(255,214,92,.24);animation:clue-pulse 600ms ease-out}