:root {
  color-scheme: light;
  --ink:#173d47; --muted:#607b80; --paper:#fffdf8; --teal:#168e8c; --teal-dark:#09615f;
  --coral:#f36e50; --coral-dark:#ad3c2a; --gold:#f8be3f; --blue:#41a8cf; --line:rgba(23,61,71,.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:1000px;min-height:650px;overflow:hidden}
body{margin:0;color:var(--ink);background:#dff5f4} button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:4px solid #075f83;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lesson{height:100%;padding:14px}.data-lab{position:relative;isolation:isolate;width:min(1390px,100%);height:100%;min-height:620px;margin:auto;overflow:hidden;border:1px solid rgba(38,95,99,.18);border-radius:28px;background:#ecfaf8;box-shadow:0 9px 0 rgba(37,100,101,.12),0 28px 65px rgba(31,77,83,.16)}
.world-art{position:absolute;z-index:-4;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.83) contrast(.88) brightness(1.04)}.world-wash{position:absolute;z-index:-3;inset:0;background:radial-gradient(ellipse at 52% 47%,rgba(255,255,255,.2) 0 26%,rgba(246,255,252,.64) 66%,rgba(231,249,247,.72) 100%)}
.mission-hud{position:absolute;z-index:30;left:24px;right:24px;top:19px;height:62px;display:grid;grid-template-columns:190px 150px minmax(220px,1fr) auto;align-items:center;gap:18px}.mission-copy,.practice-meter,.scoreboard{border:1px solid var(--line);background:rgba(255,253,248,.92);box-shadow:0 5px 18px rgba(26,72,78,.1);backdrop-filter:blur(10px)}.mission-copy{align-self:stretch;display:grid;align-content:center;padding:9px 15px;border-radius:16px}.mission-copy span,.practice-meter span,.scoreboard span{color:var(--muted);font-size:9px;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.mission-copy strong{margin-top:2px;font-size:15px}.mission-dots{display:flex;justify-content:center;gap:8px}.mission-dots i{width:14px;height:14px;border:2px solid #abc5c0;border-radius:50%;background:#edf4f0;transition:transform 150ms ease-out,background 150ms ease-out}.mission-dots i.done{border-color:#a96b0c;background:var(--gold)}.mission-dots i.current{transform:scale(1.24);border-color:var(--teal-dark);background:var(--teal);box-shadow:0 0 0 5px rgba(22,142,140,.12)}
.practice-meter{height:54px;display:grid;grid-template-columns:auto minmax(90px,1fr) auto;align-items:center;gap:10px;padding:9px 14px;border-radius:16px}.practice-meter i{height:8px;overflow:hidden;border-radius:99px;background:#dfeae5}.practice-meter i b{display:block;width:18%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--coral));transition:width 240ms ease-out}.practice-meter strong{font-size:11px;white-space:nowrap}.scoreboard{height:62px;display:flex;padding:7px;border-radius:16px}.scoreboard div{min-width:66px;display:grid;place-content:center;text-align:center;padding:0 11px}.scoreboard div+div{border-left:1px solid #d8e2dd}.scoreboard strong{font-size:21px;line-height:1}
.game-card{position:absolute;z-index:10;left:240px;right:220px;top:100px;bottom:22px;display:grid;grid-template-rows:auto minmax(260px,1fr) 31px auto;gap:8px;padding:22px 30px 24px;border:1px solid rgba(28,70,76,.16);border-radius:26px;background:rgba(255,253,248,.965);box-shadow:0 10px 0 rgba(48,102,99,.09),0 26px 50px rgba(31,74,78,.16);backdrop-filter:blur(13px)}
.challenge-copy{text-align:center}.challenge-copy span{color:var(--coral-dark);font-size:9px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}.challenge-copy h1{margin:5px 0 4px;font-size:clamp(25px,2.35vw,36px);line-height:1.02;letter-spacing:-.04em}.challenge-copy p{margin:0;color:var(--muted);font-size:12px}
.chart-shell{position:relative;min-height:0;overflow:hidden;padding:34px 22px 18px;border:2px solid #c7ded8;border-radius:22px;background:linear-gradient(180deg,#fbfffd,#edf8f4);box-shadow:inset 0 -5px 0 rgba(32,100,91,.05)}.chart-title{position:absolute;left:18px;top:12px;font-size:12px;font-weight:950}.chart-stage{height:100%;min-height:225px}.scale-key{position:absolute;right:14px;top:10px;padding:5px 9px;border-radius:999px;color:#365e62;background:#e3f2ed;font-size:10px;font-weight:900}
.picture-chart{height:100%;display:grid;align-content:center;gap:14px;padding:10px 4%}.picture-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:15px;padding:9px 13px;border-radius:15px;background:rgba(255,255,255,.72);transition:transform 150ms ease-out,background 150ms ease-out}.picture-row strong{font-size:13px;text-align:right}.picture-marks{display:flex;flex-wrap:wrap;gap:8px}.picture-mark{width:38px;height:38px;display:grid;place-items:center;border:2px solid currentColor;border-radius:12px;background:#fff;box-shadow:0 3px 0 rgba(26,69,73,.12);font-size:23px;animation:mark-pop 220ms ease-out both}.picture-row.is-focus{transform:scale(1.025);background:#fff4c8;box-shadow:0 0 0 4px rgba(248,190,63,.2)}
.bar-layout{height:100%;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr 28px;padding:5px 4% 0}.axis{grid-row:1;position:relative;border-right:2px solid #6b8b8b}.axis span{position:absolute;right:7px;transform:translateY(50%);color:#587478;font-size:10px;font-weight:900}.bars{grid-column:2;grid-row:1;display:flex;align-items:stretch;justify-content:space-around;gap:20px;border-bottom:3px solid var(--ink);background:repeating-linear-gradient(to top,transparent 0,transparent calc(var(--step) - 1px),rgba(57,103,103,.11) var(--step))}.bar-slot{position:relative;width:min(95px,22%);display:flex;align-items:flex-end;justify-content:center}.bar{position:relative;width:72%;min-width:52px;height:var(--height);border:3px solid var(--bar-dark);border-bottom:0;border-radius:14px 14px 3px 3px;background:linear-gradient(90deg,var(--bar),color-mix(in srgb,var(--bar),white 25%));box-shadow:inset 5px 0 rgba(255,255,255,.18);transition:height 150ms ease-out,transform 150ms ease-out,filter 150ms ease-out}.bar::after{position:absolute;left:50%;top:9px;content:attr(data-value);transform:translateX(-50%);padding:3px 7px;border-radius:8px;color:var(--ink);background:rgba(255,255,255,.86);font-size:11px;font-weight:950;opacity:0;transition:opacity 150ms ease-out}.bar.is-revealed::after,.build-mode .bar::after{opacity:1}.bar.is-focus{transform:scaleX(1.07);filter:saturate(1.18) drop-shadow(0 0 8px rgba(248,190,63,.65))}.bar.is-focus::before{position:absolute;inset:-12px;content:"";border:3px solid var(--gold);border-radius:18px;animation:focus-pulse 500ms ease-out 2}.bar.is-editable{cursor:ns-resize;touch-action:none}.bar.is-editable::before{position:absolute;left:50%;top:-12px;width:34px;height:9px;content:"";transform:translateX(-50%);border:2px solid var(--teal-dark);border-radius:99px;background:white;box-shadow:0 3px 0 rgba(9,97,95,.18)}.labels{grid-column:2;grid-row:2;display:flex;justify-content:space-around;gap:20px}.labels span{width:min(95px,22%);padding-top:7px;overflow:hidden;font-size:11px;font-weight:950;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.build-readout{position:absolute;left:14px;top:10px;color:var(--coral-dark);font-size:10px;font-weight:950}.build-controls{position:absolute;right:13px;bottom:12px;display:flex;gap:6px}.step-button{width:44px;height:44px;border:2px solid #9cbab5;border-radius:13px;background:white;box-shadow:0 4px 0 #d2dfdb;font-size:21px;font-weight:950}.step-button:active{transform:translateY(3px);box-shadow:0 1px 0 #d2dfdb}
.feedback{min-height:31px;display:grid;place-items:center;color:var(--teal-dark);font-size:13px;font-weight:900;text-align:center}.feedback.error{color:var(--coral-dark)}.action-dock{min-height:72px;display:flex;align-items:center;justify-content:center;gap:11px}.choices{width:min(650px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.choice,.primary{min-height:62px;border:2px solid #bed0cc;border-radius:16px;background:white;box-shadow:0 5px 0 #d9e3df;font-weight:950;transition:transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out}.choice{padding:9px 12px;font-size:17px}.choice small{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:800}.choice:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 7px 0 #c9ded9}.choice:active{transform:translateY(4px);box-shadow:0 1px 0 #c9ded9}.primary{min-width:235px;padding:0 24px;border-color:var(--teal-dark);color:#fff;background:var(--teal);box-shadow:0 6px 0 var(--teal-dark);font-size:15px}.primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--teal-dark)}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-dark)}.primary.gold{border-color:#9b650c;color:#5e3a00;background:var(--gold);box-shadow:0 6px 0 #b47a15}
.mascot{position:absolute;z-index:18;left:24px;bottom:35px;width:185px;pointer-events:none;transform-origin:50% 100%}.sticker-art,.sticker-prop{overflow:hidden;padding:7px;border:1px solid rgba(29,74,68,.1);border-radius:27px;background:#fffdf8;box-shadow:0 11px 28px rgba(25,62,59,.16)}.sticker-art img,.sticker-prop img{display:block;width:100%;border-radius:20px}.mascot p{position:absolute;left:132px;top:2px;width:145px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:16px 16px 16px 5px;background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(25,65,69,.12);font-size:11px;font-weight:900;line-height:1.3}.mascot.happy{animation:mascot-pop 520ms ease-out}.mascot.miss{animation:mascot-shake 330ms ease-out}.prop-card{position:absolute;z-index:2;right:26px;width:160px;opacity:.82}.fruit-prop{bottom:34px;transform:rotate(2deg)}.trophy-prop{top:105px;width:140px;transform:rotate(-2deg);opacity:.72}.trophy-prop.is-earned{animation:trophy-pop 650ms ease-out;opacity:1}
.sparkles{position:absolute;left:50%;top:47%;pointer-events:none}.sparkles i{position:absolute;width:12px;height:12px;opacity:0;transform:rotate(45deg);border-radius:3px;background:var(--gold)}.chart-shell.is-sparkling .sparkles i{animation:sparkle 650ms ease-out both}.sparkles i:nth-child(1){--x:-230px;--y:-100px}.sparkles i:nth-child(2){--x:-135px;--y:-145px;animation-delay:40ms}.sparkles i:nth-child(3){--x:-30px;--y:-125px;animation-delay:80ms}.sparkles i:nth-child(4){--x:90px;--y:-150px;animation-delay:120ms}.sparkles i:nth-child(5){--x:210px;--y:-90px;animation-delay:160ms}.sparkles i:nth-child(6){--x:180px;--y:55px;animation-delay:200ms}.sparkles i:nth-child(7){--x:20px;--y:90px;animation-delay:240ms}.sparkles i:nth-child(8){--x:-185px;--y:55px;animation-delay:280ms}.data-lab.is-miss .game-card{animation:card-shake 320ms ease-out}.celebration{position:absolute;z-index:55;inset:0;pointer-events:none}.celebration i{position:absolute;left:50%;top:50%;opacity:0;color:var(--gold);font-size:24px;font-style:normal}.celebration.show i{animation:confetti 780ms ease-out forwards}.celebration i:nth-child(1){--x:-330px;--y:-250px}.celebration i:nth-child(2){--x:-250px;--y:-310px;color:var(--teal)}.celebration i:nth-child(3){--x:-155px;--y:-260px;color:var(--coral)}.celebration i:nth-child(4){--x:-60px;--y:-330px}.celebration i:nth-child(5){--x:50px;--y:-280px;color:var(--teal)}.celebration i:nth-child(6){--x:155px;--y:-320px;color:var(--coral)}.celebration i:nth-child(7){--x:250px;--y:-255px}.celebration i:nth-child(8){--x:335px;--y:-300px;color:var(--teal)}.celebration i:nth-child(9){--x:270px;--y:-150px;color:var(--coral)}.celebration i:nth-child(10){--x:-280px;--y:-150px}.toast{position:absolute;z-index:60;left:50%;bottom:26px;max-width:530px;padding:10px 17px;opacity:0;transform:translate(-50%,10px);border-radius:999px;color:white;background:var(--ink);pointer-events:none;font-size:12px;font-weight:900;transition:opacity 150ms ease-out,transform 150ms ease-out}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes mark-pop{from{opacity:0;transform:scale(.6) rotate(-8deg)}}@keyframes focus-pulse{50%{transform:scale(1.04);opacity:.55}}@keyframes mascot-pop{45%{transform:translateY(-14px) rotate(-3deg)}70%{transform:rotate(2deg)}}@keyframes mascot-shake{25%{transform:translateX(-6px) rotate(-2deg)}70%{transform:translateX(5px) rotate(2deg)}}@keyframes card-shake{30%{transform:translateX(-6px)}70%{transform:translateX(6px)}}@keyframes trophy-pop{40%{transform:rotate(4deg) scale(1.1)}}@keyframes sparkle{0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.2)}35%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(180deg) scale(1.15)}}@keyframes confetti{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(420deg)}}
@media(max-width:1220px){.game-card{left:205px;right:175px;padding-inline:22px}.mascot{left:16px;width:150px}.mascot p{left:105px;width:130px}.prop-card{right:12px;width:130px}.trophy-prop{width:112px}}
@media(max-height:750px){.game-card{top:88px;bottom:14px;padding-top:17px;padding-bottom:17px}.mission-hud{top:12px}.mascot{bottom:18px;width:145px}.chart-shell{padding-top:30px}.action-dock{min-height:62px}.choice,.primary{min-height:54px}.fruit-prop{bottom:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}