:root{color-scheme:light;--ink:#16333a;--muted:#5b7072;--paper:#fffdf2;--teal:#167b7d;--teal-dark:#0c555d;--coral:#f26957;--yellow:#ffd45c;--blue:#caeef1;--shadow:#153f46;font-family:"Avenir Next Rounded","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:#153c43}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}:focus-visible{outline:4px solid #fff2a6;outline-offset:4px}.lesson{height:100%;padding:12px}.world{position:relative;height:100%;min-height:626px;overflow:hidden;isolation:isolate;border:2px solid #0d4e57;border-radius:28px;background:#8fd1d1 url("./assets/storyville-backdrop-01.webp") center/cover no-repeat;box-shadow:0 10px 0 #092f36,0 24px 60px #092a31}.world-wash{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(16,68,76,.48),rgba(243,239,190,.12) 38%,rgba(16,58,66,.45))}.hud{position:absolute;z-index:10;left:22px;right:22px;top:18px;height:66px;display:grid;grid-template-columns:210px 1fr auto auto;gap:14px;align-items:center}.route-card,.route-track,.difficulty,.scoreboard{height:66px;border:1px solid rgba(255,255,255,.7);border-radius:19px;background:rgba(255,253,238,.94);box-shadow:0 5px 0 rgba(11,66,72,.56),0 10px 24px rgba(12,53,58,.16);backdrop-filter:blur(10px)}.route-card{display:grid;align-content:center;padding:9px 18px}.route-card span,.difficulty span,.scoreboard span{font-size:10px;font-weight:1000;letter-spacing:.09em;text-transform:uppercase;color:#6a7972}.route-card strong{margin-top:3px;font-size:17px}.route-track{justify-self:center;min-width:300px;display:flex;align-items:center;justify-content:center;padding:0 18px}.route-track i{width:31px;height:31px;display:grid;place-items:center;border:2px solid #86aaa5;border-radius:50%;background:#d8ebe6;color:#54756f;font-style:normal;font-weight:1000;transition:all 160ms ease-out}.route-track b{width:34px;height:4px;background:#b6d2ca}.route-track i.is-current{transform:scale(1.15) rotate(-4deg);border-color:#9a4b33;color:#572b1e;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,212,92,.25)}.route-track i.is-complete{border-color:var(--teal-dark);color:white;background:var(--teal)}.difficulty{width:220px;display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:9px 14px}.difficulty>i{grid-column:1/-1;height:7px;border-radius:999px;background:#d0dfd8;overflow:hidden}.difficulty>i b{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--coral));transition:width 180ms ease-out}.difficulty strong{font-size:11px}.scoreboard{display:flex;padding:6px}.scoreboard div{min-width:70px;display:grid;place-content:center;text-align:center;padding:0 10px}.scoreboard div+div{border-left:1px solid #d9ddd2}.scoreboard strong{font-size:21px;line-height:1.1}.scoreboard strong:first-letter{color:#e8a51e}.game-card{position:absolute;z-index:2;left:22px;right:22px;top:102px;bottom:20px;display:grid;grid-template-columns:250px minmax(680px,1fr);gap:18px}.mascot-zone{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}.sticker-art{overflow:hidden;border:7px solid #fff;border-radius:26px;background:#fff;box-shadow:0 7px 0 rgba(13,71,76,.55),0 18px 34px rgba(11,45,50,.24)}.sticker-art img{display:block;width:100%;height:100%;object-fit:contain}.mascot-card{width:238px;height:300px;transform:rotate(-2deg);transform-origin:50% 100%;transition:transform 160ms ease-out,filter 160ms ease-out}.speech{position:absolute;z-index:4;top:2%;left:3px;right:3px;min-height:80px;display:grid;place-items:center;padding:14px 18px;border:3px solid #87462f;border-radius:22px 22px 7px 22px;background:#fffdf2;box-shadow:0 6px 0 rgba(91,45,28,.48);font-weight:1000;line-height:1.25;text-align:center}.speech:after{position:absolute;right:30px;bottom:-13px;width:20px;height:20px;content:"";transform:rotate(45deg);border-right:3px solid #87462f;border-bottom:3px solid #87462f;background:#fffdf2}.mascot-zone.is-cheering .mascot-card{animation:cheer 620ms ease-out;filter:drop-shadow(0 0 16px #fff49a)}.mascot-zone.is-oops .mascot-card{animation:oops 350ms ease-out}.story-panel{min-width:0;display:grid;grid-template-rows:auto minmax(240px,1fr) 62px 34px auto;gap:9px;padding:18px 22px;border:2px solid rgba(255,255,255,.86);border-radius:28px;background:rgba(255,253,242,.96);box-shadow:0 9px 0 rgba(10,65,70,.62),0 22px 44px rgba(7,40,45,.3)}.story-heading{text-align:center}.story-heading span{color:#a54935;font-size:11px;font-weight:1000;letter-spacing:.11em;text-transform:uppercase}.story-heading h1{margin:4px 0 1px;font-size:clamp(27px,2.5vw,39px);line-height:1;letter-spacing:-.035em}.story-stage{position:relative;min-height:240px;display:grid;grid-template-columns:235px 1fr;align-items:center;gap:28px;padding:18px 76px 18px 22px;border:2px solid #b8d5ce;border-radius:24px;background:linear-gradient(135deg,#e8f5ee,#fff8db);box-shadow:inset 0 0 34px rgba(28,105,103,.09)}.scene-art{width:220px;height:190px;border-width:6px;border-radius:22px;box-shadow:0 5px 0 rgba(34,96,91,.35),0 12px 22px rgba(20,67,66,.13)}.story-copy p{margin:0 0 14px;font-size:clamp(19px,1.65vw,26px);font-weight:800;line-height:1.34}.question{padding-top:12px;border-top:2px dashed #acc9bf;color:var(--teal-dark);font-size:18px;font-weight:1000}.parcel-seal{position:absolute;right:18px;top:50%;width:52px;height:52px;display:grid;place-items:center;transform:translateY(-50%) rotate(7deg);border:4px solid #9a4b33;border-radius:50%;background:var(--yellow);box-shadow:0 5px 0 #8b432d;color:#633220;font-size:27px;font-weight:1000;transition:all 160ms ease-out}.parcel-seal.is-open{transform:translateY(-50%) rotate(-8deg) scale(1.08);color:white;background:var(--teal);border-color:var(--teal-dark)}.work-strip{min-height:62px;display:grid;place-items:center;padding:9px 16px;border:2px dashed #b7c7bc;border-radius:17px;background:#f5f1df;color:#68786f;font-size:15px;font-weight:900;text-align:center}.work-strip.is-revealed{border-style:solid;border-color:#72aaa3;background:#dff2eb;color:var(--ink);font-size:29px;letter-spacing:.025em}.work-strip strong{color:#a44732}.feedback{min-height:34px;display:grid;place-items:center;color:#496962;font-size:14px;font-weight:900;text-align:center}.feedback.is-error{color:#a33c2d}.actions{min-height:64px;display:flex;align-items:center;justify-content:center;gap:12px}.operation-grid,.answer-grid,.explain-grid{width:100%;display:flex;align-items:stretch;justify-content:center;gap:12px}.choice,.primary{min-height:58px;border:2px solid #0e5e62;border-radius:17px;background:#fff;color:var(--ink);box-shadow:0 5px 0 #0e5e62;font-weight:1000;transition:transform 140ms ease-out,box-shadow 140ms ease-out,background 140ms ease-out}.choice{min-width:100px;padding:8px 20px;font-size:19px}.choice.operation{min-width:118px;font-size:28px}.choice small{display:block;margin-top:2px;color:#6c7b73;font-size:11px}.choice:hover,.choice:focus-visible{transform:translateY(-2px);background:#fff9d9;box-shadow:0 7px 0 #0e5e62}.choice:active,.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #0e5e62}.primary{padding:11px 28px;color:white;background:var(--teal);font-size:17px}.primary.coral{border-color:#963e2e;background:var(--coral);box-shadow:0 5px 0 #963e2e}.burst{position:absolute;inset:0;pointer-events:none}.burst i{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:3px;background:var(--coral);opacity:0}.story-stage.is-celebrating .burst i{animation:pop 650ms ease-out}.burst i:nth-child(2){background:var(--yellow);--x:150px;--y:-75px}.burst i:nth-child(3){background:var(--teal);--x:-155px;--y:-65px}.burst i:nth-child(4){--x:130px;--y:80px}.burst i:nth-child(5){background:var(--yellow);--x:-135px;--y:72px}.burst i:nth-child(6){background:#6b9cda;--x:5px;--y:-105px}.toast{position:absolute;z-index:30;left:50%;bottom:25px;padding:12px 22px;transform:translate(-50%,18px);border-radius:999px;color:white;background:#173f45;box-shadow:0 5px 0 #092a2e;opacity:0;pointer-events:none;font-weight:900;transition:all 160ms ease-out}.toast.is-showing{transform:translate(-50%,0);opacity:1}@keyframes cheer{35%{transform:rotate(4deg) translateY(-20px) scale(1.04)}70%{transform:rotate(-3deg) translateY(-5px)}}@keyframes oops{25%{transform:translateX(-7px) rotate(-4deg)}50%{transform:translateX(7px) rotate(3deg)}75%{transform:translateX(-4px)}}@keyframes pop{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x,-120px),var(--y,-90px)) rotate(210deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}