@font-face{font-family:DM;src:url('/assets/fonts/dm-sans-latin.woff2')}@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin.woff2')}*{box-sizing:border-box}body{margin:0;background:#081d29;color:#f4f5e9;font-family:DM,Arial,sans-serif;background-image:radial-gradient(ellipse at 85% 30%,#11435366,transparent 55%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ffc85b;outline-offset:4px}[hidden]{display:none!important}header{height:90px;border-bottom:1px solid #ffffff16;display:flex;justify-content:space-between;align-items:center;padding:0 max(5vw,20px);font-size:12px}header img{width:205px}.header-tag{letter-spacing:3px;font-size:9px;color:#8da9af}main{max-width:1300px;margin:auto;padding:42px 40px 0}.intro{display:flex;align-items:end;gap:70px;position:relative;margin-bottom:35px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#6cd7db;margin:0 0 12px}h1,h2,h3{font-family:Manrope,Arial,sans-serif;letter-spacing:-.05em;margin:0}h1{font-size:clamp(50px,7vw,85px);line-height:1.04;letter-spacing:-.065em}h1 span{color:#ffc65c}.intro>p{color:#a1b6ba;font-size:16px;line-height:1.7;margin-bottom:8px}.intro-mark{font-size:130px;line-height:1;color:#2d6871;position:absolute;right:30px;top:8px}.tabs{display:flex;gap:14px}.tabs button{display:flex;align-items:center;gap:18px;background:#102d3a;color:#9ab3bb;border:1px solid #234654;border-radius:12px;padding:19px 23px;text-align:left;flex:1;transition:.2s}.tabs strong{font:800 22px Manrope;color:#d9e7e4}.tabs small{display:block;font-size:8px;letter-spacing:1.5px;margin-top:6px}.tab-num{font-size:11px;border:1px solid #ffffff30;border-radius:50%;width:30px;height:30px;display:grid;place-items:center}.tab-arrow{margin-left:auto;font-size:27px}.tabs [aria-selected=true]{background:#e7f2e9;color:#406272;border-color:#e7f2e9}.tabs [aria-selected=true] strong{color:#112f3d}.tabs [aria-selected=true] .tab-num{background:#0c3948;color:#fff}.game-heading{display:flex;justify-content:space-between;align-items:center;padding:28px 0 20px}h2{font-size:26px}.record{font-size:9px;letter-spacing:1.3px;text-align:right;color:#86a6b2}.record strong{display:block;font:800 25px Manrope;color:#ffc65c;margin-top:4px}.stage{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1200/580;border:3px solid #234d59;box-shadow:0 25px 60px #0004;background:#81d6e0}canvas{width:100%;height:100%;display:block;touch-action:manipulation}.hud{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none}.hud>span{background:#123c4eea;border:1px solid #e7ffff36;box-shadow:0 4px 0 #06263666;padding:11px 18px;border-radius:9px;min-width:115px;color:#fff}.hud small{font-size:8px;letter-spacing:1.5px;color:#bee3e4}.hud b{display:block;font:800 25px Manrope;margin-top:2px}.hud .wrench-hud b{color:#ffd371}.world-tag{position:absolute;bottom:17px;right:20px;font-weight:800;font-size:11px;letter-spacing:1px;color:#ffefca;text-shadow:0 2px 3px #2d3927}.world-tag i{font-style:normal;margin-left:15px;font-size:8px;background:#15342680;padding:5px 8px;border-radius:4px}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#07303a6b,#082d3c16)}.overlay-card{text-align:center;padding:20px 36px;border-radius:16px;background:linear-gradient(160deg,#0a344df2,#0c2538f5);border:1px solid #8dd9cf55;box-shadow:0 14px 0 #06213044,0 20px 50px #143a5555;color:white;min-width:320px}.pill{font-size:9px;letter-spacing:2px;font-weight:800;color:#71dce0}.overlay h3{font-size:70px;font-weight:900;line-height:.83;letter-spacing:-4px;margin:22px 0 17px;transform:rotate(-3deg);text-shadow:0 5px 0 #05283e,0 8px 0 #041a29;color:#fff6d9}.overlay h3 em{font-style:normal;color:#ffcc5d}.overlay p{line-height:1.6;color:#b7d9db;font-size:12px}.primary,.secondary{border-radius:7px;padding:13px 20px;font-weight:800;font-size:13px;border:1px solid transparent;min-height:46px}.primary{background:#ffc65c;color:#173143;box-shadow:0 3px 0 #b97d29;transition:transform .15s}.primary:hover{background:#ffda89;transform:translateY(-1px)}.primary>span{margin-left:30px}.secondary{border-color:#42616d;color:#d2e5e7;background:#143442}.overlay .primary{min-width:180px}.overlay-tip{display:block;font-size:7px;letter-spacing:1.2px;color:#72a5b4;margin-top:18px}.controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:17px}.controls p{font-size:12px;color:#9bb6bc;line-height:1.7;max-width:720px}.controls strong{color:#dfefec;margin-right:7px}.controls>div{display:flex;gap:8px;flex-shrink:0}#jump{touch-action:none;user-select:none;min-width:130px}.status{font-size:12px;color:#9bb6bc;min-height:14px}.workshop{display:grid;grid-template-columns:1.2fr 1fr;background:#102e3b;border:1px solid #2c505d;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px #0003}.excavation{background:radial-gradient(ellipse at 40% 0,#6f533d,#362d2b);padding:0 28px 20px;position:relative}.surface{height:68px;position:relative;border-top:7px solid #74b950;background:linear-gradient(#6f9545,#3e673b);margin:0 -28px 18px;color:#e7ffcb;box-shadow:0 7px 0 #241f2377}.surface>span{position:absolute;left:15px;top:19px;font-size:8px;letter-spacing:1px}.surface>strong{position:absolute;left:calc(41.666% - 9px);bottom:-22px;background:linear-gradient(90deg,#0081a1,#6fdfef,#0081a1);color:#083b4b;width:29px;text-align:center;height:57px;font-size:27px;border:3px solid #164652;border-bottom:0;z-index:2;border-radius:6px 6px 0 0}.surface>i{position:absolute;right:15px;top:22px;font-style:normal;font-size:7px;letter-spacing:1px}.board{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;position:relative;z-index:3}.cell{aspect-ratio:1;min-width:0;border:1px solid #e9c99a16;background:#201f2540;border-radius:7px;padding:0;position:relative;touch-action:none;user-select:none;overflow:hidden;box-shadow:inset 0 2px 5px #0003}.cell.empty:after{content:'+';color:#a58d7644;font-size:20px;position:absolute;inset:0;display:grid;place-items:center}.cell.empty:hover{background:#a9d3c328;border-color:#8edfc69c}.cell.selected,.kit-piece.selected{outline:3px solid #ffcd65;outline-offset:-3px;background:#ffd96b24}.cell.obstacle{border-color:#120f1733;background:#30282699;cursor:default}.cell svg,.kit-piece svg{width:100%;height:100%;display:block;pointer-events:none}.cell.wet{background:#30c1dc22;box-shadow:inset 0 0 15px #38e3ef30}.cell.bad{outline:2px solid #ff876f}.cell.inlet:before,.cell.outlet:before{position:absolute;z-index:2;font-size:8px;letter-spacing:.5px;color:#bcfaff;left:4px;top:3px;content:'IN ↓'}.cell.outlet:before{content:'OUT ↓';top:auto;bottom:3px}.destination{position:relative;padding-top:23px}.destination>strong{position:absolute;left:calc(58.333% - 9px);top:-4px;background:linear-gradient(90deg,#007b9a,#70e6ed,#007b9a);color:#083b4b;width:27px;text-align:center;border:3px solid #164652;border-top:0;z-index:1;height:35px;font-size:23px}.destination>span{font-size:8px;letter-spacing:1px;color:#c9b7a1}.tank{height:38px;position:relative;background:#092536cc;border:2px solid #5a8285;border-radius:7px;overflow:hidden;margin-top:7px;text-align:center}.tank>div{position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(#55e8ed,#058bb9);transition:height 1.2s}.tank>span{position:relative;z-index:2;line-height:34px;font-size:8px;font-weight:800;letter-spacing:1.5px;color:#cbf8f6}.toolbox{padding:28px;min-width:0}.toolbox h3{font-size:28px;margin:10px 0}.toolbox-head>p{font-size:12px;line-height:1.7;color:#9db7bd;margin-bottom:20px}.kit-caption{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:#8eacb5;margin:15px 0 10px}.kit-caption b{color:#ffd172}.tray{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;background:#071e2a88;padding:10px;border-radius:9px;min-height:75px}.kit-piece{aspect-ratio:1;min-width:0;border:1px solid #46616b;border-radius:6px;background:linear-gradient(145deg,#314b54,#182f3d);padding:0;touch-action:none;position:relative;cursor:grab}.kit-piece:hover{background:#42616b}.selection{border-bottom:1px solid #345361;padding:16px 0}.selection>span{font-size:8px;letter-spacing:1px;color:#ffcf70;display:block;margin-bottom:10px}.selection>div{display:flex;gap:7px}.selection button{font-size:11px;padding:8px 12px;min-height:36px;flex:1}.selection small{font-size:10px;line-height:1.6;color:#81a2ad;display:block;margin-top:12px}.puzzle-stats{display:flex;gap:50px;font-size:8px;letter-spacing:1.5px;margin:17px 0}.puzzle-stats b{display:block;font-size:22px;margin-top:5px;color:#f9d384;letter-spacing:0}.flow-status{font-size:12px;line-height:1.6;color:#bed4d7;min-height:55px}.flow-actions{display:flex;gap:8px}.flow-actions .primary{flex:1}.flow-legend{display:flex;justify-content:center;gap:35px;font-size:8px;letter-spacing:1px;color:#8cafb7;padding:20px 0}.flow-legend span{display:flex;align-items:center;gap:7px}.flow-legend i{width:10px;height:10px;border-radius:3px;background:#aabcc0}.flow-legend .legend-rock{background:#99816c}.flow-legend .legend-water{background:#40d5ed}.water-stream{stroke-dasharray:5 13;animation:flowdash .55s linear infinite}@keyframes flowdash{to{stroke-dashoffset:-36}}body.dragging{cursor:grabbing}.drag-ghost{position:fixed;width:68px;height:68px;z-index:100;pointer-events:none;filter:drop-shadow(0 10px 8px #0008)}footer{border-top:1px solid #ffffff19;margin-top:28px;padding:25px 0 30px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px}footer>span{font-size:9px;letter-spacing:1.5px;color:#7495a0}footer a{font-weight:700}footer small{width:100%;color:#658a99;font-size:10px}@media(max-width:900px){main{padding:30px 22px 0}.intro{gap:35px}.intro-mark{display:none}.workshop{grid-template-columns:1.1fr 1fr}.excavation{padding:0 14px 16px}.surface{margin:0 -14px 14px}.surface>span{font-size:7px;left:8px}.surface>i{display:none}.toolbox{padding:20px}.tray{grid-template-columns:repeat(5,1fr)}.toolbox h3{font-size:23px}.flow-actions .primary,.flow-actions .secondary{padding:12px;font-size:11px}}@media(max-width:650px){header{height:72px}header img{width:160px}header>a:last-child{font-size:10px}.header-tag{display:none}main{padding:26px 13px 0}.intro{gap:15px;margin-bottom:24px;align-items:center}.intro>p{font-size:11px;max-width:130px}h1{font-size:50px}.intro .eyebrow{font-size:7px;letter-spacing:1.3px}.tabs{gap:8px}.tabs button{padding:14px 10px;gap:9px;border-radius:9px}.tabs strong{font-size:17px}.tabs small{font-size:6px;letter-spacing:.5px}.tab-num{width:22px;height:22px;font-size:9px}.tab-arrow{display:none}h2{font-size:21px}.game-heading{gap:10px;padding:24px 0 17px}.game-heading .eyebrow{font-size:8px;letter-spacing:1.4px}.record{font-size:7px;min-width:75px}.record strong{font-size:20px}.stage{aspect-ratio:1.14;border-width:2px;border-radius:12px}.hud{top:12px;left:12px;right:12px}.hud>span{padding:8px 11px;min-width:85px}.hud small{font-size:6px;letter-spacing:1px}.hud b{font-size:21px}.overlay-card{min-width:245px;padding:19px 18px;margin-top:20px}.overlay h3{font-size:58px;margin:15px 0}.overlay p{font-size:10px}.overlay-tip{font-size:6px}.overlay .primary{min-height:42px;padding:10px}.world-tag{font-size:8px;bottom:12px;right:12px}.world-tag i{font-size:6px}.controls{align-items:start;flex-direction:column;gap:4px}.controls>div{width:100%}.controls button{flex:1}.controls p{font-size:11px;margin-bottom:8px}.workshop{grid-template-columns:1fr}.excavation{padding:0 20px 16px}.surface{margin:0 -20px 16px}.board{gap:5px;max-width:480px;margin:auto}.destination{max-width:480px;margin:auto}.surface>strong{left:calc(41.666% - 5px)}.toolbox{padding:22px}.toolbox-head>p{margin-bottom:12px}.toolbox h3{font-size:27px}.tray{grid-template-columns:repeat(6,1fr)}.selection{padding:14px 0}.flow-status{min-height:38px}.flow-legend{gap:12px;font-size:6px;letter-spacing:.2px;flex-wrap:wrap}.flow-legend i{width:8px;height:8px}footer{font-size:10px}footer>span{font-size:8px}.puzzle-stats{margin:15px 0}.overlay .pill{font-size:7px}}

/* Compact arcade layout and touch-first controls. */
.intro{margin-bottom:22px}.intro h1{font-size:clamp(28px,5vw,48px);line-height:1.15;letter-spacing:-.05em}.intro h1 span{color:#ffc65c}.tabs button{min-height:60px;padding:14px 20px}.game-heading{padding:20px 0 14px}.game-heading h2{font-size:22px}.overlay-card{min-width:280px}.overlay h3{font-size:58px;margin:12px 0 18px}.overlay-tip{font-size:9px;line-height:1.6}.overlay p{font-size:13px}.toolbox-head h3{font-size:22px}.toolbox-head p{font-size:13px}.tray button,.cell{touch-action:manipulation}.kit-piece{touch-action:pan-y}.cell.pipe{touch-action:none}canvas{touch-action:none}.primary,.secondary{touch-action:manipulation}.flow-actions button{min-height:48px}.cell,.kit-piece{transition:outline-color .12s}.kit-piece.selected,.cell.selected{outline:3px solid #ffcf70;box-shadow:inset 0 0 18px #ffcd652b}.flow-status{min-height:38px}.puzzle-stats{margin:12px 0}footer{margin-top:20px;padding:18px 0}footer small{width:auto}
@media(pointer:coarse){button{min-height:48px}.kit-piece{min-height:48px}.cell{min-height:44px}.tabs button{min-height:58px}}
@media(max-width:650px){header{height:58px;padding:0 16px}header img{width:145px}header>a:last-child{font-size:12px;padding:12px 0}main{padding:20px 10px 0}.intro{margin-bottom:16px}.intro h1{font-size:31px}.tabs{gap:8px}.tabs button{padding:12px 10px;min-height:58px}.tabs strong{font-size:17px}.tab-num{display:none}.game-heading{padding:16px 0 12px}.game-heading h2{font-size:19px}.record{font-size:9px}.record strong{font-size:20px}.hud small{font-size:8px;letter-spacing:.6px}.overlay-card{min-width:230px;margin-top:22px;padding:16px}.overlay h3{font-size:48px;margin:8px 0 14px}.overlay p{font-size:12px}.overlay-tip{font-size:8px;letter-spacing:.3px;margin-top:12px}.overlay .primary{min-height:48px;font-size:16px}.controls{position:sticky;bottom:0;z-index:10;background:#081d29f7;padding:9px 0 max(12px,env(safe-area-inset-bottom));margin:10px 0 0;border-radius:8px}.controls p{font-size:12px;margin:0 0 5px}.controls>div{gap:10px}.controls #jump{flex:2.3;min-height:64px;font-size:20px}.controls #pause{min-height:64px;font-size:15px}.status{margin:6px 0;font-size:11px;min-height:0}.stage{border-radius:10px}.workshop{display:block;overflow:visible;border-radius:10px}.excavation{padding:0 6px 12px;border-radius:10px}.surface{height:44px;margin:0 -6px 14px}.surface>span{font-size:8px;top:13px}.surface>strong{height:43px;bottom:-20px;left:calc(41.666% - 13px)}.board{gap:3px;max-width:400px}.cell{min-height:44px;border-radius:5px}.destination{padding-top:21px;max-width:400px}.destination>span{font-size:8px}.tank{height:30px}.tank>span{line-height:26px}.destination>strong{left:calc(58.333% - 13px)}body.flow-open{padding-bottom:238px}.flow-open .toolbox{position:fixed;bottom:0;left:0;right:0;z-index:30;padding:8px 12px max(10px,env(safe-area-inset-bottom));background:#102e3bfa;box-shadow:0 -7px 30px #0005;border-top:1px solid #48727e;border-radius:12px 12px 0 0;backdrop-filter:blur(10px)}.toolbox-head,.kit-caption,.selection>small,.puzzle-stats{display:none}.tray{display:flex;gap:8px;overflow-x:auto;overscroll-behavior:contain;padding:7px;min-height:68px;scrollbar-width:thin;touch-action:pan-x;scroll-snap-type:x proximity}.kit-piece{width:54px;height:54px;min-width:54px;flex:none;scroll-snap-align:center;touch-action:pan-x}.selection{display:flex;gap:8px;align-items:center;padding:7px 0;border:0}.selection>span{font-size:9px;line-height:1.4;flex:1;margin:0}.selection>div{flex:2;gap:8px}.selection button{min-height:44px;font-size:13px;padding:8px}.flow-status{font-size:11px;line-height:1.4;margin:3px 0 8px;min-height:16px;max-height:31px;overflow:auto}.flow-actions{gap:8px}.flow-actions button{min-height:48px;font-size:14px;padding:10px 16px}.flow-actions .secondary{flex:.6}.flow-actions .primary{flex:1.5}.flow-open footer{display:none}.board{scroll-margin-top:10px}footer{font-size:11px;margin-top:14px}footer small{font-size:10px}.world-tag{font-size:8px;max-width:75%;text-align:right}.hud>span{padding:7px 9px}.hud b{font-size:21px}}
@media(max-width:360px){.intro h1{font-size:28px}.overlay h3{font-size:41px}.overlay-card{padding:12px;min-width:215px}.overlay p{margin:8px 0}.overlay-tip{font-size:7px}.overlay .primary{min-height:46px}.kit-piece{width:50px;min-width:50px;height:50px}}

.mobile-bar{display:none}
/* A viewport-sized game console: neither game scrolls during mobile play. */
@media(max-width:650px),(max-width:1000px) and (max-height:500px){
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body,body.flow-open{position:fixed;inset:0;padding:0}header,.intro,footer{display:none!important}main{width:100%;max-width:none;height:100vh;height:100dvh;display:grid;grid-template-rows:32px 44px minmax(0,1fr);gap:6px;padding:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden}.mobile-bar{display:flex;align-items:center;justify-content:space-between;font:800 15px Manrope;letter-spacing:-.3px}.mobile-bar a,.mobile-bar button{display:grid;place-items:center;width:44px;min-height:32px;height:32px;color:#cce6e8;background:transparent;border:0;font-size:26px;padding:0}.mobile-bar a{font-size:33px;justify-content:start}.tabs{gap:7px;min-height:0}.tabs button{min-height:44px;height:44px;padding:8px 14px;justify-content:center;border-radius:8px}.tabs strong{font-size:16px}.tab-num,.tab-arrow{display:none}.game-heading{display:none}section[role=tabpanel]{min-width:0;min-height:0;height:100%;overflow:hidden}#runnerPanel{display:grid;grid-template-rows:minmax(0,1fr) 64px;gap:8px}.stage{aspect-ratio:auto;min-height:0;height:100%;width:100%;border-radius:10px}.stage canvas{width:100%;height:100%}.controls{position:static;display:block;margin:0;padding:0;background:none}.controls>p,.status{display:none}.controls>div{height:100%;gap:9px}.controls #pause{min-height:0;height:100%;flex:1;font-size:15px}.controls #jump{height:100%;min-height:0;flex:2.5;font-size:22px}.hud{top:10px;left:10px;right:10px}.hud small{font-size:8px}.hud b{font-size:24px}.world-tag{bottom:12px;right:12px;font-size:8px}.overlay-card{padding:20px;min-width:230px;max-width:calc(100% - 24px);margin:24px 0 0}.overlay h3{font-size:clamp(40px,8vh,64px);margin:10px 0 16px}.overlay p{font-size:12px}.overlay-tip{font-size:8px}.overlay .primary{min-height:48px;min-width:170px;font-size:16px}
#flowPanel{display:block}.workshop{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border-radius:10px;box-shadow:none}.excavation{height:100%;min-height:0;display:grid;grid-template-rows:22px minmax(0,1fr) 27px;gap:5px;padding:0 7px 5px;overflow:hidden;border-radius:0;align-items:center}.surface{height:22px;width:calc(100% + 14px);margin:0 -7px;align-self:start;border-top-width:4px;box-shadow:none}.surface>span{font-size:7px;top:5px;left:10px}.surface>strong{height:24px;width:22px;bottom:-8px;font-size:18px;line-height:19px;left:calc(41.666% - 11px);border-width:2px}.board{width:min(calc(100vw - 34px),calc(100dvh - 370px));max-width:100%;height:auto;aspect-ratio:1;gap:3px;min-height:0;justify-self:center;margin:0;align-self:center}.cell{min-height:0;min-width:0;aspect-ratio:1;border-radius:5px}.cell.inlet:before,.cell.outlet:before{font-size:7px}.destination{width:100%;max-width:none;padding:0;height:27px;display:flex;align-items:center;justify-content:center;margin:0}.destination>span,.destination>strong{display:none}.tank{margin:0;width:95%;height:24px;border-width:1px}.tank>span{font-size:8px;line-height:22px}
.toolbox,.flow-open .toolbox{position:static;min-height:0;min-width:0;max-height:none;display:grid;grid-template-columns:1fr;grid-template-rows:60px 44px 18px 46px;gap:5px;padding:7px 9px;background:#102e3b;border-radius:0;border-top:1px solid #3c626f;box-shadow:none;backdrop-filter:none;z-index:2}.toolbox-head,.kit-caption,.puzzle-stats{display:none}.tray{display:flex;overflow-x:auto;overflow-y:hidden;gap:7px;height:60px;min-height:0;width:100%;max-width:100%;padding:3px;scrollbar-width:none;touch-action:pan-x}.tray::-webkit-scrollbar{display:none}.kit-piece{width:54px;height:54px;min-width:54px;min-height:0;flex:none}.selection{height:44px;min-height:0;display:flex;align-items:center;padding:0;border:0;gap:7px}.selection>span{flex:1;font-size:8px;line-height:1.4;min-width:0;margin:0}.selection>div{display:flex;flex:2.2;gap:7px;height:44px}.selection button{height:44px;min-height:44px;font-size:12px;padding:8px;flex:1}.selection>small{display:none}.flow-status{font-size:10px;line-height:18px;min-height:0;height:18px;max-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.flow-actions{height:46px;min-height:0;gap:7px}.flow-actions button{min-height:46px;height:46px;font-size:14px;padding:8px}.flow-actions .secondary{flex:.7}.flow-actions .primary{flex:1.5}
}
@media(max-width:650px) and (max-height:650px){.board{width:min(calc(100vw - 34px),calc(100dvh - 330px))}.toolbox,.flow-open .toolbox{grid-template-rows:54px 44px 44px;gap:4px;padding:5px 8px}.tray{height:54px}.kit-piece{height:50px;width:50px;min-width:50px}.flow-status{display:none}.flow-actions,.flow-actions button{height:44px;min-height:44px}.overlay-card{padding:12px}.overlay h3{font-size:42px}.overlay p{margin:10px 0}.overlay-tip{margin-top:10px}.hud b{font-size:20px}}
@media(max-width:1000px) and (max-height:500px){main{grid-template-rows:28px 38px minmax(0,1fr);gap:4px}.mobile-bar{font-size:13px}.tabs button{height:38px;min-height:38px}.tabs strong{font-size:14px}#runnerPanel{grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:minmax(0,1fr);gap:8px}.controls>div{flex-direction:column}.controls #jump{min-width:0;flex:2}.controls #pause{flex:1}.overlay-card{min-width:225px;padding:10px;margin:0}.overlay h3{font-size:33px;line-height:.9;margin:5px 0 8px}.overlay p{margin:7px 0;font-size:10px}.overlay-tip{display:none}.overlay .primary{min-height:42px;font-size:13px;padding:8px}.hud>span{padding:5px 9px}.hud b{font-size:18px}.hud small{font-size:7px}.world-tag{bottom:6px}.workshop{grid-template-columns:minmax(0,1fr) minmax(245px,38%);grid-template-rows:minmax(0,1fr)}.excavation{grid-template-rows:16px minmax(0,1fr) 22px;gap:3px;padding:0 5px 3px}.surface{height:16px}.surface>span{top:2px}.surface>strong{bottom:-8px;height:20px;font-size:15px;line-height:16px}.board{width:min(calc(62vw - 30px),calc(100dvh - 145px));gap:2px}.destination{height:22px}.tank{height:20px}.tank>span{line-height:18px;font-size:7px}.toolbox,.flow-open .toolbox{grid-template-rows:minmax(54px,1fr) 44px 18px 44px;padding:7px;gap:5px;border-top:0;border-left:1px solid #3c626f}.tray{display:grid;grid-template-columns:repeat(5,1fr);height:100%;overflow-y:auto;overflow-x:hidden;align-content:start;gap:4px;padding:2px}.kit-piece{width:100%;height:auto;aspect-ratio:1;min-width:0;min-height:0}.selection>span{display:none}.selection>div{flex:1}.flow-actions,.flow-actions button{height:44px;min-height:44px;font-size:12px}.flow-status{font-size:9px}}
@media(max-width:650px){.surface>strong{left:calc(50% - min((100vw - 34px)/12,(100dvh - 370px)/12) - 11px)}}
@media(max-width:650px) and (max-height:650px){.surface>strong{left:calc(50% - min((100vw - 34px)/12,(100dvh - 330px)/12) - 11px)}}
@media(max-width:1000px) and (max-height:500px){.surface>strong{left:calc(50% - min((62vw - 30px)/12,(100dvh - 145px)/12) - 11px)}}
.avatar-picker{display:flex;gap:8px;justify-content:center;margin:14px 0 18px}.avatar-picker button{min-width:90px;min-height:44px;border:1px solid #698e9a;background:#143b51;color:#cbe3e7;border-radius:7px;font-size:14px;font-weight:800}.avatar-picker [aria-pressed=true]{background:#44bfd5;color:#082d40;border-color:#97e7eb;box-shadow:0 0 0 2px #73d8e82b}.controls #pause{min-width:48px}.controls #left,.controls #right{min-width:55px;font-size:22px}.stage{background:#44b9d5}.overlay{background:linear-gradient(180deg,#05273518,#05273555)}
@media(max-width:650px),(max-width:1000px) and (max-height:500px){.controls>div{display:grid;grid-template-columns:44px 54px minmax(0,1fr) 54px;gap:6px}.controls #pause,.controls #left,.controls #right,.controls #jump{height:100%;min-width:0;min-height:0;padding:5px}.controls #pause{font-size:19px}.controls #left,.controls #right{font-size:27px}.controls #jump{font-size:19px}.avatar-picker{margin:10px 0 14px}.avatar-picker button{min-width:82px;min-height:42px}.overlay h3{font-size:48px;line-height:.9}.overlay-card{padding:18px}.overlay-tip{font-size:8px;letter-spacing:.4px}}
@media(max-width:360px){.controls>div{grid-template-columns:40px 46px minmax(0,1fr) 46px;gap:5px}.controls #jump{font-size:17px}.overlay-card{min-width:215px;padding:14px}.overlay h3{font-size:41px}}
@media(max-width:1000px) and (max-height:500px){#runnerPanel{grid-template-columns:minmax(0,1fr) 130px}.controls>div{grid-template-columns:1fr 1fr;grid-template-rows:44px minmax(0,1fr) 44px;gap:6px}.controls #pause{grid-column:1/-1;grid-row:1}.controls #jump{grid-column:1/-1;grid-row:2;font-size:20px}.controls #left{grid-column:1;grid-row:3}.controls #right{grid-column:2;grid-row:3}.overlay h3{font-size:29px;margin:4px 0 6px}.overlay-card{padding:9px}.avatar-picker{margin:7px 0}.avatar-picker button{min-height:36px;font-size:12px}.overlay p{margin:5px 0}.overlay .primary{min-height:37px;font-size:13px}.overlay-tip{display:none}}
/* Original glossy puzzle artwork with a bright, toy-like palette. */
body.flow-open{background:#c6deff;background-image:radial-gradient(ellipse at 20% 20%,#f2f8ff,transparent 60%),linear-gradient(#b3d6ff,#e0dcff);color:#253f73}.flow-open .intro h1{color:#254779}.flow-open .intro h1 span{color:#247eaf}.flow-open .mobile-bar{color:#214777}.flow-open .mobile-bar a,.flow-open .mobile-bar button{color:#2f6091}.flow-open .tabs button{background:linear-gradient(#7ea9e9,#5b86cd);border:2px solid #416bab;box-shadow:inset 0 2px 0 #b5dbff,0 3px 0 #456bab;color:#dff2ff}.flow-open .tabs strong{color:#eff9ff}.flow-open .tabs button[aria-selected=true]{background:linear-gradient(#78e0ed,#2fb4cf);border-color:#2588b1;box-shadow:inset 0 2px 0 #bffaff,0 3px 0 #2382a8}.flow-open .game-heading h2{color:#224677}.flow-open .record{color:#5772a0}.flow-open .record strong{color:#326baa}.flow-open footer{border-color:#789bcd55;color:#335b8b}.flow-open footer small{color:#597aa1}.flow-open .workshop{background:#accdf6;border:3px solid #5072ad;box-shadow:0 8px 0 #7090c24a,0 22px 40px #487bb326;border-radius:18px}.flow-open .excavation{background:radial-gradient(ellipse at 50% 15%,#d6edff,#aacafa);border-radius:12px 0 0 12px}.flow-open .surface{background:linear-gradient(#98dcff,#66b8ec);border-top-color:#d5f6ff;box-shadow:0 3px 0 #4777c033;border-bottom:1px solid #78a7dd}.flow-open .surface>span{color:#2b5b8c;font-weight:800}.flow-open .surface>strong{background:linear-gradient(90deg,#368fdd,#b0f7ff,#3b9be4);border-color:#3076b7;color:#276394;box-shadow:0 0 14px #d0ffff77}.flow-open .board{background:linear-gradient(145deg,#4e70b0,#344b85);border:5px solid #263e75;border-radius:15px;padding:5px;box-shadow:inset 0 3px 0 #9cb1e650,0 5px 0 #1e346169,0 10px 14px #4169b02b;gap:3px}.flow-open .cell{border:1px solid #2e4477;background:linear-gradient(145deg,#4d65a0,#405486);box-shadow:inset 0 2px 4px #1d2e5c66,0 1px 0 #7a90cb55;border-radius:6px}.flow-open .cell.empty:after{content:'·';font-size:25px;color:#a0b7e644}.flow-open .cell.empty:hover{background:#5c82c7;border-color:#a4d8ff}.flow-open .cell.pipe{background:linear-gradient(#5673b5,#344a84);border-color:#6f8cc877}.flow-open .cell.obstacle{background:#3d4a83;border-color:#796fbc66;box-shadow:inset 0 1px 5px #1e315477}.flow-open .cell.wet{background:#4084ba;box-shadow:inset 0 0 15px #80ffff5e}.flow-open .cell.selected,.flow-open .kit-piece.selected{outline:3px solid #fff29e;box-shadow:0 0 13px #fff08dbb,inset 0 0 10px #fff19b55;z-index:2}.flow-open .cell.inlet:before,.flow-open .cell.outlet:before{color:#e7fbff;text-shadow:0 1px 3px #1f3263;font-size:7px}.flow-open .cell.bad{outline:3px solid #ff638e}.flow-open .toolbox{background:linear-gradient(#dcecff,#c1d7f7);border-color:#84a2d4}.flow-open .toolbox h3{color:#335484}.flow-open .toolbox-head p{color:#56739b}.flow-open .kit-caption{color:#4c6da0}.flow-open .kit-caption b{color:#3272a9}.flow-open .tray{background:#8faee0;border:2px solid #6082bd;box-shadow:inset 0 3px 5px #33568b3a;border-radius:10px}.flow-open .kit-piece{background:linear-gradient(#5a7bbd,#3a5291);border:1px solid #2b477d;box-shadow:inset 0 1px 1px #b1caff66,0 2px 0 #6589c6;border-radius:8px}.flow-open .kit-piece:hover{background:#6887c8}.flow-open .selection{border-color:#89a8d0}.flow-open .selection>span{color:#3c5f94;font-weight:800}.flow-open .selection small{color:#5b789f}.flow-open .toolbox .secondary{background:linear-gradient(#f0f7ff,#c2ddfb);border:2px solid #7c9fd1;color:#355d94;box-shadow:inset 0 2px 0 #ffffffc4,0 2px 0 #6d92c5}.flow-open .toolbox .primary{background:linear-gradient(#9cf3a1,#4bd4a4);color:#15596a;border:2px solid #2fa2a4;box-shadow:inset 0 2px 0 #d8ffc8,0 3px 0 #2c8e9b}.flow-open .toolbox .primary:hover{background:linear-gradient(#c3ffb7,#6ce2b2)}.flow-open .toolbox button:disabled{opacity:.48}.flow-open .flow-status{color:#3b6298}.flow-open .puzzle-stats{color:#6280ad}.flow-open .puzzle-stats b{color:#2c72b3;text-shadow:0 1px 0 #fff}.flow-open .destination>span{color:#416d9c;font-weight:800}.flow-open .destination>strong{background:linear-gradient(90deg,#317ed1,#a9f2ff,#368fe0);border-color:#377cb4}.flow-open .tank{background:linear-gradient(#e0f5ff,#a5d5f0);border:2px solid #5a99cb;box-shadow:inset 0 2px 4px #668bb555,0 2px 0 #91b7e7}.flow-open .tank>span{color:#3574a5;font-weight:900;text-shadow:0 1px 0 #e4faff}.flow-open .tank>div{background:linear-gradient(#a8ffff,#39cde3,#4298e4);box-shadow:0 -2px 8px #e6ffff}.flow-open .tank>div:after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 12% 35%,#ffffffb3 2px,transparent 3px),radial-gradient(circle at 41% 65%,#ffffff8a 3px,transparent 4px),radial-gradient(circle at 74% 35%,#ffffffb3 2px,transparent 3px)}.flow-open .water-stream{animation-duration:.7s}.flow-open button:focus-visible{outline:3px solid #fff28d;outline-offset:2px}
@media(max-width:650px),(max-width:1000px) and (max-height:500px){.flow-open .workshop{border-width:2px;border-radius:12px;box-shadow:0 3px 0 #6484b84a}.flow-open .excavation{border-radius:0}.flow-open .toolbox{background:linear-gradient(#daeaff,#bdd7f7);border-top-color:#88a6d7}.flow-open .board{border-width:4px;padding:3px;border-radius:12px;gap:2px}.flow-open .cell{border-radius:5px}.flow-open .kit-piece{border-radius:7px}.flow-open .surface{border-top-width:3px}.flow-open .surface>span{font-size:7px}.flow-open .flow-status{font-size:10px}.flow-open .tank{border-width:1px}.flow-open .selection button{border-width:1px}.flow-open .tray{border-width:1px}.flow-open .flow-actions button{border-width:1px}}
.flow-open .cell:disabled{opacity:1}.flow-open .tray>span{color:#315f91!important}
/* Rendered ceramic pieces on a machined puzzle console. */
body.flow-open{background:radial-gradient(ellipse at 22% 8%,#f3fcff,transparent 45%),radial-gradient(ellipse at 90% 90%,#dabaff77,transparent 50%),linear-gradient(155deg,#abd4f6,#e4edff 55%,#c9d9fb)}.flow-open .workshop{border:2px solid #7091bd;box-shadow:0 4px 0 #7b97bf,0 12px 0 #9bb2d03d,0 20px 46px #23497b33,inset 0 2px 0 #fff;border-radius:20px;overflow:hidden}.flow-open .excavation{position:relative;background:radial-gradient(ellipse at 45% 0,#f1fbff,#bad2ec 67%,#8caaca);box-shadow:inset 1px 1px 1px #ffffffc7}.flow-open .board{border:7px solid #24405c;border-radius:18px;background:linear-gradient(145deg,#416383,#203b57);padding:7px;gap:4px;box-shadow:inset 0 3px 2px #97bdd855,inset 0 -3px 6px #061b3066,0 3px 0 #142d46,0 7px 0 #6b8cab,0 16px 18px #14375c44;position:relative}.flow-open .cell{background:linear-gradient(145deg,#547797,#385873);border:1px solid #25445f;border-radius:8px;box-shadow:inset 0 3px 5px #102e4880,0 1px 0 #a4c9df55}.flow-open .cell.empty:after{content:'';inset:43%;border-radius:50%;background:#8cacc542;box-shadow:0 1px 0 #16344b55}.flow-open .cell.pipe{background:linear-gradient(150deg,#3e627e,#244861);border-color:#6088a680;box-shadow:inset 0 0 10px #10273a66,0 1px 0 #9ebdd155}.flow-open .cell svg{filter:drop-shadow(0 3px 2px #081e3140)}.flow-open .cell.obstacle{background:linear-gradient(135deg,#425a82,#293e60);box-shadow:inset 0 3px 5px #152c4c88;border-color:#405f89}.flow-open .cell.obstacle svg{filter:drop-shadow(0 4px 2px #11284277)}.flow-open .cell.selected,.flow-open .kit-piece.selected{outline:3px solid #e8ffff;outline-offset:-3px;box-shadow:0 0 13px #6be3f8b3,inset 0 0 16px #b2f4ff44}.flow-open .cell.wet{background:radial-gradient(ellipse at center,#347e99,#284860);box-shadow:inset 0 0 15px #4fd8ec60,0 0 6px #6beaff33}.flow-open .cell.inlet:before,.flow-open .cell.outlet:before{color:#deffff;text-shadow:0 1px 3px #11324f;font-size:7px}.flow-open .toolbox{background:linear-gradient(135deg,#edf6ff,#c0d2eb);box-shadow:inset 1px 0 0 #ffffff99}.flow-open .tray{background:linear-gradient(#8ca9c6,#b2c9df);border:2px solid #7a99b8;box-shadow:inset 0 4px 8px #3d5d8444,inset 0 -1px 0 #e5f5ff;border-radius:12px}.flow-open .kit-piece{background:linear-gradient(145deg,#557c99,#2f526c);border:1px solid #416783;border-radius:10px;box-shadow:inset 0 1px 1px #a5c8dd88,0 2px 0 #24455d,0 4px 5px #2d537755;overflow:hidden}.flow-open .kit-piece svg{filter:drop-shadow(1px 3px 2px #061e3e55)}.flow-open .surface{background:linear-gradient(#e7f7ff,#a6c7e3);border-top:3px solid #f4fdff;border-bottom:1px solid #8babc7;box-shadow:0 2px 2px #7493b133}.flow-open .surface>strong{background:linear-gradient(90deg,#538aa7,#bdf9ff 44%,#6fbad0 69%,#39738f);border-color:#32637e;border-radius:5px 5px 0 0;color:#25637e;box-shadow:inset 0 2px 0 #fff,0 0 14px #aff8ff77}.flow-open .tank{border:2px solid #7c9db6;background:linear-gradient(#345e7a,#1e435f);box-shadow:inset 0 3px 4px #142f4c88,0 2px 0 #e3f4ff,0 -1px 0 #779bbd;border-radius:7px}.flow-open .tank>span{color:#c9efff;text-shadow:0 1px 2px #163d58;font-size:8px;letter-spacing:1px}.flow-open .tank>div{background:linear-gradient(#bcffff,#54dbe9 22%,#24a3c6);box-shadow:0 -2px 7px #bfffff}.flow-open .toolbox .primary{background:linear-gradient(#72e9de,#29adbe 75%,#208ca8);border:1px solid #288aa5;box-shadow:inset 0 2px 0 #c9ffff,0 3px 0 #237494,0 5px 7px #315f8940;color:#f0ffff;text-shadow:0 1px 1px #2a7b94}.flow-open .toolbox .secondary{background:linear-gradient(#f6fbff,#c4d7e9);border:1px solid #8ea9c4;box-shadow:inset 0 2px 0 #ffffff,0 3px 0 #7797b4;color:#355b7d}.build-meter{position:absolute;top:20px;right:15px;width:125px;height:19px;background:#2a4e70;border:2px solid #6892b2;border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 3px #16365355}.build-meter>div{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(#b5fff1,#3bd3c4);transition:width .25s}.build-meter>span{position:absolute;inset:0;text-align:center;font:bold 8px/15px DM;color:#f2ffff;text-shadow:0 1px 2px #275172}
@media(max-width:650px),(max-width:1000px) and (max-height:500px){.flow-open .workshop{border-width:2px;border-radius:12px;box-shadow:0 4px 0 #8fa8c4}.flow-open .board{border-width:5px;border-radius:14px;padding:4px;gap:2px}.flow-open .cell{border-radius:6px}.flow-open .cell svg{filter:drop-shadow(0 2px 1px #10263c55)}.flow-open .kit-piece{border-radius:8px}.flow-open .toolbox{background:linear-gradient(135deg,#e4f0fa,#b2c9df)}.flow-open .tray{border-width:1px}.flow-open .surface{border-top-width:2px}.build-meter{top:1px;right:7px;width:108px;height:17px;border-width:1px;border-radius:5px}.build-meter>span{font-size:7px;line-height:15px}.flow-open .surface>span{font-size:6px;letter-spacing:.4px}.flow-open .tank{border-width:1px}.flow-open .tank>span{font-size:7px}.flow-open .selection>span{font-size:8px}.flow-open .flow-status{color:#45647e}.flow-open .flow-actions button{font-size:13px}}
@media(max-width:1000px) and (max-height:500px){.build-meter{top:0;height:14px;width:95px}.build-meter>span{font-size:6px;line-height:12px}}
@media(prefers-reduced-motion:reduce){.build-meter>div{transition:none}.water-stream{animation:none}}
.touch-pause,.swipe-cue{display:none}
@media(max-width:650px),(max-width:1000px) and (max-height:500px){#runnerPanel{display:block;grid-template-columns:none;grid-template-rows:none}.stage{height:100%;width:100%;touch-action:none;user-select:none;-webkit-user-select:none}.stage canvas{touch-action:none}.controls{display:none!important}.touch-pause{display:grid;place-items:center;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;width:46px;height:46px;min-height:46px;border:1px solid #c8f5ff77;border-radius:10px;background:#123e55e8;color:#edffff;font-size:23px;box-shadow:0 3px 8px #082a3e33;touch-action:manipulation}.touch-pause:disabled{display:none}.overlay{z-index:4}.swipe-cue{display:block;position:absolute;bottom:11px;left:50%;transform:translateX(-50%);pointer-events:none;background:#143c54b8;border:1px solid #d3f5f333;border-radius:20px;padding:7px 13px;color:#eafaf5;font:700 10px DM;white-space:nowrap;z-index:2}.world-tag{bottom:48px;right:10px}.hud>span{max-width:calc(50% - 34px);min-width:0}.hud small{font-size:7px;letter-spacing:.4px}.hud b{font-size:21px}}
@media(max-width:1000px) and (max-height:500px){.touch-pause{width:42px;height:42px;min-height:42px}.swipe-cue{bottom:7px;padding:5px 11px}.world-tag{bottom:37px}.overlay h3{font-size:33px}}
.runner-webgl{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.has-3d .runner-webgl{display:block}.has-3d #runner{opacity:0;position:relative;z-index:1}.stage .hud{z-index:2}.stage .world-tag{z-index:2}.stage .overlay{z-index:5}.stage .touch-pause{z-index:4}.level-notice{position:absolute;top:23%;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;background:#0c344de8;border:1px solid #b8eef47a;box-shadow:0 6px 20px #0c354c22;border-radius:10px;padding:13px 20px;color:#ffe29b;font:800 12px Manrope;letter-spacing:1px;white-space:nowrap}.has-3d .overlay{background:linear-gradient(180deg,#102e4810,#082b4955)}.has-3d .overlay-card{border-color:#bcebf255;background:linear-gradient(155deg,#123f58ed,#102c43f5);backdrop-filter:blur(10px);box-shadow:0 18px 50px #0a2d4f4d}.has-3d .hud>span{backdrop-filter:blur(8px);background:#173c57c9;border-color:#d9f8ff50;box-shadow:0 4px 12px #122d4a29}.has-3d .world-tag{text-shadow:0 1px 4px #173647}.has-3d .swipe-cue{background:#123e57ad;backdrop-filter:blur(6px);color:#f4ffff}
@media(max-width:650px),(max-width:1000px) and (max-height:500px){.level-notice{font-size:10px;letter-spacing:.6px;padding:11px 14px;max-width:calc(100% - 24px)}.has-3d .touch-pause{background:#173f59cc;backdrop-filter:blur(8px)}}

/* Dark brand mark against the light Fix the Flow header. */
body:has(#flowTab[aria-selected="true"]) header img{filter:brightness(0)}

.arcade-brand{display:flex;align-items:center;justify-content:center;gap:20px}.intro .arcade-brand{font-size:clamp(28px,4vw,46px);letter-spacing:-.04em}.arcade-brand img{display:block;width:clamp(190px,27vw,330px);height:auto}.arcade-brand>span{color:#ffc65c}.flow-open .arcade-brand img{filter:brightness(0)}.flow-open .arcade-brand>span{color:#247eaf}.mobile-bar .arcade-brand{gap:9px;font-size:15px;white-space:nowrap}.mobile-bar .arcade-brand img{width:126px}.mobile-bar .arcade-brand>span{color:inherit}@media(max-width:360px){.mobile-bar .arcade-brand img{width:105px}.mobile-bar .arcade-brand{gap:7px;font-size:13px}}