:root{color-scheme:light;--ink:#173e43;--muted:#627b78;--cream:#fcf7e9;--gold:#f8d27d;--accent:#f7c96f;font-family:ui-rounded,'Avenir Next','Trebuchet MS',system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#123f43;color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #ea9475;outline-offset:4px}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}button{transition:transform .15s,background .15s}button:active{transform:translateY(2px)}.menu{min-height:100svh;background:radial-gradient(ellipse at 95% 5%,#e9eed8,transparent 45%),var(--cream);padding:25px max(32px,calc((100vw - 1390px)/2));overflow:hidden}.brandbar{display:flex;align-items:center;gap:22px}.brand{font-size:35px;font-weight:1000;letter-spacing:-2.5px;text-decoration:none;color:var(--ink)}.brand span{font-size:27px;color:#e7a55d;margin-left:3px;vertical-align:top}.edition{font-size:10px;font-weight:850;letter-spacing:2px;border-left:1px solid #b8c7b6;padding:8px 20px}.quiet{background:#ffffff5c;border:1px solid #cbd3be;border-radius:11px;padding:10px 15px;font-size:13px;font-weight:800;color:inherit}.brandbar>.quiet{margin-left:auto}.welcome{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:46px 0 35px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:900;margin:0 0 12px}.welcome h1{font-size:clamp(38px,4.3vw,67px);line-height:1.06;letter-spacing:-2.9px;margin:0;font-weight:950}.welcome h1 em{font-style:normal;color:#587b64}.lede{font-size:15px;line-height:1.65;color:#5a7470;margin:20px 0 0}.passport{width:245px;padding:26px 20px;text-align:center;border:1px dashed #9baa8f;border-radius:18px;transform:rotate(3deg);background:#f5efdf}.passport>span{font-size:9px;font-weight:900;letter-spacing:1.4px}.passport>div{font-size:34px;letter-spacing:4px;color:#bbc5ac;margin:13px 0}.passport p{font-size:12px;margin:0;color:#627660}.world-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.world-card{background:#fffdf7;border-radius:19px;overflow:hidden;border:1px solid #cbd1b9;box-shadow:0 7px 0 #1f464308;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.world-card:hover{transform:translateY(-5px);box-shadow:0 12px 25px #29483817}.card-art{height:185px;position:relative;background-image:url('./assets/worlds.webp');background-size:200% 200%;isolation:isolate}.card-art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#153a4d3a);z-index:-1}.card-number{position:absolute;top:14px;left:14px;font-size:11px;font-weight:900;letter-spacing:1px;border:1px solid #fff6;background:#fcf5decc;border-radius:50px;padding:7px 10px}.sprite{background-image:url('./assets/characters.webp');background-size:400% 400%;background-repeat:no-repeat;width:140px;height:140px;filter:drop-shadow(0 8px 3px #15372e2e)}.card-art .sprite{position:absolute;bottom:-3px;right:18px}.hero-tag{position:absolute;left:17px;bottom:16px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:900;letter-spacing:2px;color:white;text-shadow:0 1px 6px #233a40}.card-copy{padding:21px 19px 18px;display:flex;flex:1;flex-direction:column}.card-copy .eyebrow{font-size:9px;letter-spacing:1.3px;color:#6c8275;margin-bottom:8px}.card-copy h2{font-size:23px;line-height:1.15;letter-spacing:-.8px;margin:0 0 12px}.card-copy p{font-size:13px;line-height:1.6;color:#607570;margin:0 0 18px;min-height:62px}.card-genre{font-size:8px;letter-spacing:1px;font-weight:900;margin-bottom:18px;border-top:1px solid #e9eadf;padding-top:13px}.play-card{background:var(--card-accent);color:#1c4144;border:1px solid #2648391a;border-radius:10px;padding:12px 14px;text-align:left;font-weight:850;font-size:13px;margin-top:auto;display:flex;justify-content:space-between}.menu-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:28px;padding-bottom:10px;font-size:10px;color:#6a7c71}.text-button{padding:0;background:none;color:inherit;font-size:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}.game{position:fixed;inset:0;background:#163840;color:#fff6de;overscroll-behavior:none}.gamebar{height:78px;display:flex;gap:18px;align-items:center;padding:10px 24px;background:#123c41;position:relative;z-index:2;border-bottom:1px solid #ffffff17}.gamebar .quiet{background:#ffffff0a;border-color:#ffffff29}.world-heading{min-width:0}.world-heading .eyebrow{font-size:8px;color:var(--accent);display:block;margin-bottom:3px}.world-heading h1{font-size:19px;letter-spacing:-.3px;margin:0}.score{margin-left:auto;white-space:nowrap;font-size:18px}.score>span{color:#ffd27e}.icon-button{width:38px;height:38px;background:#ffffff0e;color:#fff6dc;border:1px solid #ffffff25;border-radius:10px;font-weight:900;font-size:20px}.playfield{position:absolute;inset:78px 0 0;overflow:hidden;touch-action:none;user-select:none}canvas{width:100%;height:100%;display:block}.mission{position:absolute;left:25px;top:20px;max-width:min(560px,calc(100% - 50px));padding:15px 19px;border:1px solid #fff3;background:#143b42e8;border-radius:14px;backdrop-filter:blur(10px);box-shadow:0 5px 20px #132f3125}.mission .eyebrow{font-size:9px;color:var(--accent);margin:0}.mission p{margin:7px 0 9px;font-size:14px;font-weight:800}.progress-dots{display:flex;gap:5px}.progress-dots span{width:24px;height:4px;background:#ffffff28;border-radius:3px}.progress-dots span.done{background:var(--accent)}.touch-controls{position:absolute;left:25px;right:25px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:12px}.left-controls{display:flex;gap:14px}.control{pointer-events:auto;background:#183d45c9;border:1px solid #f6efcf70;box-shadow:0 4px 0 #0c293ac7,inset 0 1px #fff3;color:#fff5de;width:66px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:17px;font-size:30px;font-weight:800;touch-action:none;backdrop-filter:blur(8px)}.control.pressed{background:#547f78;transform:translateY(4px);box-shadow:none}.control small{font-size:8px;letter-spacing:1px}.jump{background:#f7d18edb;color:#25474a;border-color:#f8e6c2}.flip{background:#a590e1d9;width:83px;color:#202e50}.action-button{position:absolute;left:50%;transform:translateX(-50%);bottom:102px;background:#fff0c7;color:#264347;border:2px solid #fff8e1;box-shadow:0 5px 22px #16394033;border-radius:13px;padding:13px 19px;font-weight:850;font-size:14px;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}.action-button:active{transform:translate(-50%,2px)}kbd{font:800 11px inherit;padding:3px 6px;border-radius:5px;background:#173f4320;margin-right:6px}.toast{position:absolute;left:50%;bottom:180px;transform:translateX(-50%);width:max-content;max-width:min(590px,90%);padding:13px 20px;border-radius:14px;background:#fffae9f5;color:#234d48;box-shadow:0 5px 28px #132a372b;font-size:13px;font-weight:750;line-height:1.5;text-align:center;pointer-events:none}.word-panel{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:min(750px,calc(100% - 36px));padding:14px 18px 10px;border:1px solid #ffe9d899;background:#fffaeaf2;color:#403e56;border-radius:17px;text-align:center;box-shadow:0 6px 22px #43355225}.word-panel p{font-size:12px;line-height:1.5;margin:0 0 7px}.word-panel h2{margin:0 0 10px;font-size:18px;letter-spacing:-.3px}.lane-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.lane-choice{background:#ece4e3;padding:9px 5px;border:2px solid transparent;border-radius:10px;color:#575066;font-size:12px;font-weight:850;display:flex;gap:7px;align-items:center;justify-content:center;min-height:40px}.lane-choice.selected{background:#f8d0d7;border-color:#b5738e;color:#49394d}.lane-choice b{font-size:10px;border:1px solid #68556f66;border-radius:50%;width:18px;height:18px;display:inline-grid;place-items:center;flex-shrink:0}.word-timer{height:3px;background:#d9cbd0;border-radius:3px;margin:9px 0 4px;overflow:hidden}.word-timer span{height:100%;display:block;background:#bb7c9a;width:100%;transition:width .08s linear}.word-panel small{font-size:9px;letter-spacing:.4px;color:#8c7381}.overlay{position:fixed;inset:0;z-index:10;background:#102e3cbd;backdrop-filter:blur(7px);display:grid;place-items:center;padding:22px;overflow-y:auto}.dialog{position:relative;background:#fcf7e9;border:1px solid #fff4d2;border-radius:25px;padding:32px;width:min(730px,100%);max-height:calc(100svh - 44px);overflow-y:auto;box-shadow:0 24px 80px #0d283855;color:var(--ink)}.dialog h2{font-size:32px;line-height:1.1;letter-spacing:-1.2px;margin:8px 0 15px}.dialog p{font-size:14px;line-height:1.65;color:#5c7471}.dialog-close{position:absolute;top:15px;right:15px;background:#1e4d4710;color:#3e5b51;border-radius:50%;width:30px;height:30px;font-size:20px}.dialog .eyebrow{color:#648477;margin-right:25px}.intro-head{display:flex;align-items:center;gap:22px}.intro-art{width:140px;height:140px;flex-shrink:0;border-radius:22px;background-image:url('./assets/worlds.webp');background-size:200% 200%}.intro-art .sprite{width:140px;height:140px}.controls-note{padding:15px 18px;background:#e8ecdc;border-radius:12px;font-size:12px;line-height:1.7;color:#526a5c}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.primary{background:#214e4e;color:#fff5dc;border-radius:11px;font-weight:800;padding:13px 24px;font-size:14px}.secondary{background:#e8ecdd;color:#35594e;border-radius:11px;font-weight:800;padding:13px 20px;font-size:13px}.settings{display:flex;flex-direction:column;gap:12px;margin:22px 0}.settings label{display:flex;align-items:center;gap:12px;font-size:13px;color:#4d655b;cursor:pointer}.settings input{accent-color:#315e53;width:18px;height:18px}.feedback{border-radius:11px;padding:12px 15px;background:#f6e1be;color:#78573e;font-size:13px;line-height:1.6;margin-top:18px}.feedback.success{background:#e1ecd0;color:#3e6550}.work-area{padding:23px 20px;background:#e5ebdf;border:1px solid #c5d2be;border-radius:18px;min-height:180px;margin-top:22px}.equation{display:flex;align-items:center;justify-content:center;gap:18px;font-size:35px;font-weight:900;letter-spacing:-1px;min-height:90px}.drop-slot{border:2px dashed #799b87;background:#f8f5df;width:85px;height:76px;border-radius:12px;font-size:33px;font-weight:900;color:#2c5d52;display:grid;place-items:center}.drop-slot.filled{background:#f2d28f;border-style:solid;border-color:#d4ab64}.parts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}.part{background:#fffbed;color:#345e52;border:1px solid #b4c6ad;border-bottom:4px solid #b4c6ad;border-radius:12px;min-width:59px;min-height:53px;padding:10px 13px;font-size:22px;font-weight:850;touch-action:manipulation}.part.selected{background:#f5d493;border-color:#c6a361}.part small{font-size:11px;display:block;margin-top:4px;letter-spacing:.2px}.work-label{text-align:center;font-size:10px;font-weight:850;letter-spacing:1px;color:#63816d;margin:13px 0 0}.balance{height:100px;position:relative;max-width:360px;margin:10px auto 25px}.balance:before{content:'';position:absolute;top:25px;left:calc(50% - 20px);width:40px;height:78px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#6d8a75}.balance-beam{position:absolute;left:0;right:0;top:20px;height:9px;background:#658872;border-radius:5px;transition:transform .3s}.scale-pan{position:absolute;top:10px;width:100px;border-bottom:5px solid #6f8f76;border-radius:0 0 25px 25px;height:53px;background:#f4efd5;text-align:center;padding:10px;font-size:23px;font-weight:900;color:#456451}.scale-pan:first-child{left:0}.scale-pan:last-child{right:0}.weights{display:flex;justify-content:center;gap:8px}.weights .drop-slot{width:62px;height:60px;font-size:25px}.gear-row{display:flex;gap:15px;align-items:center;justify-content:center;margin:0 0 20px}.gear-wheel{width:70px;height:70px;background:#e9bc67;clip-path:polygon(35% 0,65% 0,70% 15%,85% 15%,85% 30%,100% 35%,100% 65%,85% 70%,85% 85%,70% 85%,65% 100%,35% 100%,30% 85%,15% 85%,15% 70%,0 65%,0 35%,15% 30%,15% 15%,30% 15%);display:grid;place-items:center;color:#436058;font-size:20px;letter-spacing:1px}.robot-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:360px;margin:0 auto 18px;gap:7px}.grid-cell{height:58px;background:#cdd9ca;border:1px solid #b9c8b5;border-radius:9px;display:grid;place-items:center;font-size:26px;color:#677f70}.grid-cell.path{background:#fff5cf;border-color:#cdb87c}.program{display:flex;gap:9px;justify-content:center}.program .drop-slot{width:60px;height:55px;font-size:25px}.pipes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.pipe{width:88px;height:88px;background:#cdddc8;border:1px solid #a5bca7;border-radius:15px;position:relative;padding:8px}.pipe svg{width:100%;height:100%;overflow:visible}.pipe .channel{transition:transform .2s;transform-origin:50px 50px}.pipe-number{display:block;margin-top:10px;font-size:10px;font-weight:900;color:#577960}.care-bed{min-height:114px;border:2px dashed #a5ba98;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:20px;background:#f7f3df;padding:14px;font-size:41px}.care-bed .supplied{font-size:30px}.care-part{font-size:25px;min-width:95px}.habitats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.habitat{border:2px dashed #98b694;border-radius:15px;background:#f9f4df;color:#50785d;padding:15px 8px;min-height:116px;display:flex;align-items:center;flex-direction:column;gap:5px}.habitat .home-icon{font-size:30px}.habitat strong{font-size:11px}.habitat .resident{font-size:25px;min-height:29px}.completion{padding:15px 0;text-align:center}.completion .stars{font-size:58px;color:#dba953;letter-spacing:10px}.completion h2{font-size:39px}.completion .sprite{margin:auto}.completion .dialog-actions{justify-content:center}.loading{position:fixed;inset:0;z-index:20;background:#fcf7e9;display:grid;place-content:center;text-align:center}.loading .brand{font-size:55px}.loading p{font-size:13px;color:#607c70}.empty-hint{text-align:center;font-size:12px;color:#738674}.skate-game .mission{display:none}.calm *{transition:none!important;scroll-behavior:auto!important}
@media(min-width:1500px){.card-art{height:220px}.card-copy{padding:25px}.welcome{padding-top:55px;padding-bottom:48px}}
@media(max-width:1000px){.menu{padding:22px 28px}.world-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card-art{height:180px}.card-copy p{min-height:0}.passport{width:200px}.welcome h1{font-size:49px}.menu-footer{flex-wrap:wrap}.card-copy h2{font-size:25px}.card-genre{font-size:9px}}
@media(max-width:600px){.menu{padding:20px}.edition{display:none}.brand{font-size:29px}.brandbar .quiet{font-size:11px;padding:9px 10px}.welcome{padding:30px 0 25px}.welcome h1{font-size:38px;letter-spacing:-1.7px}.welcome .eyebrow{font-size:8px;letter-spacing:1.3px}.lede{font-size:13px;margin-top:15px}.passport{display:none}.world-cards{gap:12px}.card-art{height:139px}.card-art .sprite{width:118px;height:118px;right:0;bottom:0}.card-number{font-size:8px;top:10px;left:10px}.hero-tag{font-size:8px;left:10px;bottom:13px}.card-copy{padding:16px 12px 12px}.card-copy .eyebrow{font-size:7px;letter-spacing:.8px}.card-copy h2{font-size:20px;letter-spacing:-.5px;min-height:46px}.card-copy p{font-size:11px;line-height:1.55;min-height:68px;margin-bottom:14px}.card-genre{font-size:7px;letter-spacing:.3px;min-height:31px;padding-top:10px;margin-bottom:12px}.play-card{font-size:11px;padding:11px 10px}.menu-footer{font-size:9px;gap:12px;margin-top:23px}.gamebar{height:70px;padding:10px 12px;gap:10px}.gamebar .quiet{font-size:0;width:36px;padding:9px}.gamebar .quiet:before{content:'←';font-size:17px}.world-heading h1{font-size:14px}.world-heading .eyebrow{font-size:7px;letter-spacing:.7px}.score{font-size:14px}.icon-button{width:32px;height:34px;font-size:17px}.playfield{top:70px}.mission{top:12px;left:12px;max-width:calc(100% - 24px);padding:12px 14px}.mission p{font-size:12px;line-height:1.5}.mission .eyebrow{font-size:8px}.touch-controls{left:15px;right:15px;bottom:20px;gap:9px}.control{width:59px;height:61px;border-radius:16px}.left-controls{gap:11px}.flip{width:64px}.action-button{font-size:12px;padding:12px;bottom:100px}.toast{font-size:12px;bottom:163px;padding:11px 15px}.word-panel{top:12px;width:calc(100% - 24px);padding:13px 11px 9px}.word-panel h2{font-size:15px}.word-panel p{font-size:11px}.lane-choice{font-size:10px;padding:7px 4px;gap:4px}.lane-choice b{font-size:9px;width:15px;height:15px}.word-panel small{font-size:8px}.overlay{padding:12px}.dialog{border-radius:20px;padding:24px 19px;max-height:calc(100svh - 24px)}.dialog h2{font-size:27px}.dialog p{font-size:12px}.intro-art{width:105px;height:120px}.intro-art .sprite{width:115px;height:115px}.intro-head{gap:14px}.intro-head h2{font-size:26px}.controls-note{font-size:11px;padding:12px}.work-area{padding:20px 12px}.equation{font-size:28px;gap:12px}.drop-slot{width:67px;height:66px;font-size:29px}.parts{gap:8px}.part{font-size:20px;min-width:45px;padding:8px 10px}.gear-row{gap:9px}.gear-wheel{width:53px;height:53px;font-size:16px}.pipes{gap:8px}.pipe{width:50px;height:58px;padding:3px;border-radius:9px}.pipe-number{font-size:9px;margin-top:8px}.care-part{min-width:78px}.care-part small{font-size:10px}.habitats{gap:8px}.habitat{padding:12px 4px}.habitat strong{font-size:10px}.completion h2{font-size:31px}.completion .stars{font-size:45px}.desktop{display:none}}
@media(max-height:550px) and (orientation:landscape){.gamebar{height:52px;padding:6px 16px}.playfield{top:52px}.mission{padding:8px 13px;top:10px}.mission p{margin:3px 0 5px;font-size:11px}.control{width:53px;height:48px;font-size:24px;border-radius:13px}.touch-controls{bottom:12px}.action-button{bottom:74px;padding:8px 12px;font-size:12px}.toast{bottom:120px;padding:9px 14px;font-size:11px}.word-panel{top:8px;padding:8px 12px;width:min(690px,76%)}.word-panel h2{font-size:13px;margin-bottom:5px}.word-panel p{font-size:10px;line-height:1.3;margin-bottom:4px}.lane-choice{min-height:26px;padding:4px}.word-panel small{display:none}.word-timer{margin:4px 0 0}.dialog{max-height:calc(100svh - 24px);padding:22px}.dialog h2{font-size:25px}.work-area{margin-top:14px}}

/* Keep feedback above the action, leaving the character and controls visible. */
.toast{top:120px;bottom:auto}.skate-game .toast{top:205px}.dialog:focus{outline:none}
@media(max-width:600px){.toast{top:115px;bottom:auto}.skate-game .toast{top:205px}}
@media(max-height:550px) and (orientation:landscape){.toast,.skate-game .toast{top:auto;bottom:116px}}