:root{color-scheme:dark;--bg:#19182b;--panel:#222137;--ink:#f4f0ff;--muted:#aaa6bf;--lavender:#b6a4f8;--border:#ffffff12;--tube-width:78px;--tube-height:222px;--tube-gap:45px;font-family:ui-rounded,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 50% 40%,#2a2542 0,transparent 58%),var(--bg);color:var(--ink)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button, a{outline-offset:6px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d0c1ff}button svg,a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}.site-header{height:96px;max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px;position:relative;z-index:1}.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:650;letter-spacing:1px}.brand small{display:block;font-size:8px;letter-spacing:1.8px;color:#9a96ae;margin-top:5px;font-weight:400}.brand-mark{display:flex;align-items:center;gap:4px;height:35px}.brand-mark b{width:9px;height:25px;border-radius:4px 4px 6px 6px;background:linear-gradient(#e5bd7e 45%,#e896a0 45%)}.brand-mark b:nth-child(2){height:34px;background:linear-gradient(#b8a0ed 40%,#8ba9f0 40%)}.brand-mark b:nth-child(3){background:linear-gradient(#84ccc4 50%,#a6d693 50%)}nav{display:flex;align-items:center;gap:15px}.story-link{display:flex;align-items:center;gap:8px;color:#bbb6cb;font-size:13px}.story-link:hover{color:#fff}.nav-divider{height:19px;width:1px;background:#ffffff16;margin:0 5px}.icon-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border);background:#ffffff04;border-radius:50%;color:#bdb7d1;transition:background .2s}.icon-button:hover{background:#ffffff0d;color:white}.game-shell{max-width:850px;padding:22px 36px 24px;margin:auto;text-align:center}.game-heading .eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;letter-spacing:3px;color:#a6a0b8}.eyebrow>span{width:5px;height:5px;border-radius:50%;background:#a7d4b5}.game-heading h1{font-size:64px;letter-spacing:-2.8px;line-height:1.1;font-weight:750;margin:18px 0 9px;display:flex;align-items:center;justify-content:center;gap:14px}.game-heading h1>span{color:#b7a2ee}.game-heading h1 svg{width:37px;height:43px;fill:#b7a2ee;stroke:#ede3ff;stroke-width:1;transform:rotate(12deg);margin-left:2px}.game-heading>p{font-size:15px;color:#beb6ce;letter-spacing:6px;margin:0}.play-area{margin-top:37px}.level-toolbar{display:flex;align-items:center;gap:12px;text-align:left;max-width:570px;margin:auto}.level-picker{border:1px solid #b7a2ee38;background:#b7a2ee0b;border-radius:12px;display:flex;align-items:center;gap:12px;padding:12px 15px;font-size:14px}.level-picker svg{width:17px;height:17px;color:var(--lavender)}.level-picker b{font-weight:600;font-size:16px}.chevron{font-size:18px;color:#9e95b4;margin-left:8px;line-height:14px}.mode-badge{border:1px solid #99d4b520;color:#a2c6b3;border-radius:20px;padding:5px 10px;font-size:10px;letter-spacing:1px}.move-counter{display:flex;align-items:center;gap:12px;margin-left:auto}.move-counter span{font-size:12px;color:var(--muted)}.move-counter strong{font-size:23px;font-weight:500;min-width:24px;font-variant-numeric:tabular-nums}.level-progress{max-width:570px;height:2px;background:#ffffff08;border-radius:2px;overflow:hidden;margin:18px auto 0}.level-progress span{display:block;height:100%;background:#af9dde;transition:width .35s}.board-wrap{position:relative;padding:64px 0 28px;min-height:340px;display:flex;align-items:center;justify-content:center}.board{--columns:5;display:grid;grid-template-columns:repeat(var(--columns),var(--tube-width));gap:35px var(--tube-gap);justify-content:center;position:relative;z-index:1}.tube{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:var(--tube-width);padding:0;border:0;background:none;touch-action:manipulation;isolation:isolate}.tube:before{content:"";position:absolute;bottom:28px;left:0;right:0;height:13px;background:#0a08145c;border-radius:50%;filter:blur(5px);transition:transform .25s}.tube-glass{position:relative;width:var(--tube-width);height:var(--tube-height);border:3px solid #c4bed44f;border-top:0;border-radius:9px 9px 32px 32px;background:linear-gradient(90deg,#ffffff08,#ffffff02 50%,#ffffff07);box-shadow:inset 2px 0 5px #ffffff0b,2px 6px 12px #08051012;transition:transform .25s,filter .25s;transform-origin:50% 10px;display:block}.tube-glass:before{content:"";position:absolute;left:-5px;right:-5px;top:-3px;height:8px;border:2px solid #bbb3cd99;border-radius:5px;background:#3c354f;z-index:4}.tube-glass:after{content:"";position:absolute;left:5px;top:12px;bottom:23px;width:6px;border-radius:4px;background:linear-gradient(#ffffff29,#ffffff0b);z-index:3;pointer-events:none}.tube-liquid{position:absolute;inset:15px 3px 4px;border-radius:0 0 25px 25px;overflow:hidden;display:block}.liquid{position:absolute;left:0;right:0;height:25%;background:linear-gradient(90deg,#ffffff13,transparent 45%,#00000008),var(--water);bottom:calc(var(--layer)*25%);display:flex;justify-content:center;align-items:center;color:#ffffffbd;font-size:18px;transition:height .25s,bottom .25s}.liquid:last-child:before{content:"";position:absolute;left:0;right:0;top:-1px;height:6px;border-radius:50%;background:#ffffff20}.liquid .pattern{opacity:0}.patterns .liquid .pattern{opacity:.65}.tube-number{font-size:11px;color:#88829d;display:block;margin-top:19px;font-variant-numeric:tabular-nums}.tube.selected .tube-glass{transform:translateY(-21px);filter:drop-shadow(0 0 13px #c1a8ff35);border-color:#d5c4ffcc}.tube.selected:before{transform:scale(.8);opacity:.5}.tube.selected .tube-number{color:#e5d8ff}.tube:not(:disabled):hover .tube-glass{filter:brightness(1.12)}.tube.done .tube-glass{border-color:#c5d4bf77}.completion-mark{position:absolute;top:-25px;color:#b9d7b4;font-size:15px;opacity:0}.tube.done .completion-mark{opacity:1}.tube.hint-from .tube-glass,.tube.hint-to .tube-glass{filter:drop-shadow(0 0 10px #f2d17e6a);border-color:#f2d17e}.hint-marker{position:absolute;top:-49px;left:-12px;right:-12px;color:#f2d899;font-size:11px;white-space:nowrap}.stage-glow{position:absolute;left:15%;right:15%;height:70px;bottom:22px;background:radial-gradient(ellipse,#a897e50b,transparent 70%);pointer-events:none}.instruction{min-height:42px;display:flex;align-items:center;justify-content:center;gap:9px;color:#aaa3bb;font-size:12px;line-height:1.7;padding:0 5px}.instruction>svg{width:15px;height:18px;fill:none;stroke:#baa8ea;stroke-width:1.5;flex-shrink:0}.instruction.warning{color:#e9be8e}.game-controls{display:flex;justify-content:center;gap:35px;margin:27px auto 0}.tool-button{width:74px;padding:0;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11px;color:#c2bad0}.tool-icon{position:relative;width:62px;height:59px;border:1px solid #ffffff13;border-radius:17px;background:linear-gradient(150deg,#ffffff07,#ffffff02);display:grid;place-items:center;transition:background .2s,transform .2s}.tool-icon svg{width:24px;height:24px}.tool-icon small{position:absolute;right:-7px;top:-7px;min-width:25px;padding:3px 5px;border:2px solid #211e34;background:#5e566e;border-radius:8px;font-size:8px;line-height:1.2;color:#eee5ff}.hint-tool .tool-icon{background:#ccb05b0e;border-color:#d2b35e38;color:#ead393}.hint-tool small{background:#ccb77e;color:#2b2531;font-weight:600}.tool-button:hover:not(:disabled) .tool-icon{background:#ffffff10;transform:translateY(-3px)}.tool-button:disabled{opacity:.35}.journey{max-width:470px;margin:40px auto 0;display:flex;align-items:center;gap:13px;text-align:left;border:1px solid #ffffff0a;background:#ffffff02;border-radius:14px;padding:16px 18px}.journey-icon{display:grid;place-items:center;color:#c0a97e}.journey-icon svg{width:25px;height:25px;fill:#c0a97e10;stroke:currentColor;stroke-width:1.3}.journey>div>span{font-size:11px;color:#b9b0c9}.journey p{font-size:10px;color:#858096;margin:5px 0 0}.journey p b{font-weight:400;color:#aea4c1}.journey-track{height:4px;background:#ffffff08;flex:1;margin-left:15px;border-radius:4px;overflow:hidden}.journey-track span{height:100%;display:block;background:#b6a4f8}.journey-end{color:#8e7ca6;font-size:17px}footer{font-size:10px;color:#777187;letter-spacing:1px;margin-top:25px}footer>span{margin:0 9px;color:#6b627e}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.ambient i{position:absolute;border:1px solid #bda9e20d;width:69px;height:69px;border-radius:50%;left:12%;top:27%;background:radial-gradient(circle at 30% 25%,#bca7e805,transparent)}.ambient i:nth-child(2){left:auto;right:12%;top:44%;width:95px;height:95px}.ambient i:nth-child(3){left:20%;top:73%;width:27px;height:27px}.ambient i:nth-child(4){left:auto;right:20%;top:19%;width:21px;height:21px}.ambient i:nth-child(5){left:8%;top:61%;width:5px;height:5px;background:#af9fd12b}.ambient i:nth-child(6){left:auto;right:8%;top:72%;width:5px;height:5px;background:#af9fd12b}dialog{color:var(--ink);background:#28233e;border:1px solid #c7b4ec2b;border-radius:25px;padding:38px;width:min(440px,calc(100% - 32px));max-height:calc(100svh - 40px);overflow-y:auto;box-shadow:0 30px 100px #0d091282;text-align:center}dialog::backdrop{background:#0b0815b3;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:15px;top:15px;border:0}.dialog-emblem{background:#b7a2ee14;color:#c0a8fb;width:67px;height:67px;display:grid;place-items:center;margin:0 auto 24px;border-radius:22px}.dialog-emblem svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}h2{font-size:23px;letter-spacing:-.5px;margin:10px 0 0}.dialog-subtitle{font-size:12px;color:#b4aac6;line-height:1.9;margin:12px 0 25px}.help-steps{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:22px}.help-steps li{display:flex;gap:14px}.help-steps li>b{background:#b7a2ee13;border:1px solid #b7a2ee2a;color:#c3aff7;flex-shrink:0;width:30px;height:30px;border-radius:50%;font-size:12px;display:grid;place-items:center}.help-steps strong{font-weight:500;font-size:13px}.help-steps p{font-size:11px;line-height:1.8;color:#a99fb9;margin:6px 0 0}.setting-row{display:flex;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid #ffffff10;padding-top:20px;margin-top:25px;font-size:12px}.setting-row small{display:block;color:#9d93ae;font-size:10px;margin-top:5px}.setting-row input{width:20px;height:20px;accent-color:#b7a2ee}.keyboard-tip{font-size:10px;color:#94899f;line-height:1.8;margin:24px 0 0}.primary-button{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;padding:15px 20px;margin-top:24px;border:1px solid #d6bcff55;border-radius:12px;background:#b4a0eb;color:#241d34;font-weight:650;font-size:13px}.primary-button:hover{background:#c8b5ff}.secondary-button{margin-top:12px;padding:10px;border:0;background:none;font-size:12px;color:#c3b5d7}.levels-dialog{width:min(480px,calc(100% - 32px))}.eyebrow{font-size:9px;color:#b7a2ee;letter-spacing:2px}.level-tabs{display:flex;gap:8px;margin-bottom:20px}.level-tabs button{flex:1;border:1px solid #ffffff10;border-radius:8px;padding:8px 0;background:#ffffff03;font-size:11px;color:#aaa0bc}.level-tabs button[aria-selected=true]{background:#b7a2ee1c;border-color:#b7a2ee55;color:#dacaff}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.level-tile{min-height:56px;background:#ffffff03;border:1px solid #ffffff0f;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font-size:15px}.level-tile:disabled{color:#71677f;background:#0000000c}.level-tile small{font-size:9px;color:#94899f}.level-tile.cleared{background:#b9d5b60b;border-color:#b9d5b62b}.level-tile.cleared small{color:#b9d5b6}.level-tile.current{border-color:#b7a2ee;color:#dac7ff}.win-stars{color:#e2c783;font-size:33px;margin:0 0 26px}.win-stars span{font-size:67px;display:inline-block;vertical-align:middle;margin:0 7px;filter:drop-shadow(0 3px 10px #dabf7733)}.win-stat{background:#ffffff04;border-radius:14px;padding:17px}.win-stat strong{display:block;color:#ddcbff;font-size:36px;font-weight:500;margin-bottom:4px}.win-stat span{font-size:11px;color:#a99dbb}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}.confetti i{position:absolute;top:-20px;width:7px;height:12px;background:var(--water);border-radius:2px;animation:confetti-fall 2.8s var(--delay) ease-in forwards}.pour-clone{position:fixed;z-index:15;pointer-events:none;transition:none}.pour-stream{position:fixed;z-index:14;width:5px;border-radius:4px;pointer-events:none;background:var(--water);transform-origin:top;box-shadow:0 0 7px color-mix(in srgb,var(--water),transparent 60%)}.tube.shake .tube-glass{animation:shake .28s ease}.noscript{position:fixed;bottom:0;left:0;right:0;padding:20px;background:#483453;color:white;text-align:center}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@keyframes confetti-fall{to{transform:translate(var(--drift),105vh) rotate(640deg);opacity:0}}
@media(min-width:601px){.board.many-tubes{--tube-width:64px;--tube-height:180px;--tube-gap:33px}.many-tubes .tube-glass{border-bottom-left-radius:28px;border-bottom-right-radius:28px}.many-tubes .tube-liquid{border-radius:0 0 22px 22px}.board-wrap:has(.many-tubes){padding-top:45px;padding-bottom:15px}.game-shell:has(.many-tubes) .journey{margin-top:26px}}
@media(min-width:1500px) and (min-height:950px){.game-shell{padding-top:40px}.board-wrap{padding-top:80px;padding-bottom:40px}.game-controls{margin-top:35px}.journey{margin-top:50px}}
@media(max-width:600px){:root{--tube-width:61px;--tube-height:169px;--tube-gap:34px}.site-header{height:76px;padding:0 22px}.brand{font-size:14px;gap:9px}.brand small{font-size:6px;letter-spacing:1.2px}.brand-mark{transform:scale(.85);transform-origin:left center;width:32px}nav{gap:8px}.icon-button{width:35px;height:35px}.story-link>span,.nav-divider{display:none}.story-link{padding:6px}.story-link svg{width:19px;height:19px}.game-shell{padding:10px 22px 24px}.game-heading .eyebrow{font-size:8px;letter-spacing:2px}.game-heading h1{font-size:46px;gap:10px;letter-spacing:-2px;margin:13px 0 7px}.game-heading h1 svg{width:27px;height:32px}.game-heading>p{font-size:12px;letter-spacing:5px}.play-area{margin-top:27px}.level-picker{padding:10px 12px;font-size:12px;gap:9px;border-radius:10px}.level-picker b{font-size:14px}.chevron{margin-left:2px}.mode-badge{font-size:9px;padding:5px 8px;letter-spacing:0}.move-counter{gap:7px}.move-counter span{font-size:10px}.move-counter strong{font-size:20px}.level-progress{margin-top:14px}.board-wrap{padding:40px 0 16px;min-height:0}.board{column-gap:var(--tube-gap);row-gap:35px;grid-template-columns:repeat(var(--mobile-columns,3),var(--tube-width))}.board .tube:last-child:nth-child(5){grid-column:3}.board:has(.tube:nth-child(5):last-child) .tube:nth-child(4){grid-column:1;margin-left:calc((var(--tube-width) + var(--tube-gap))/2)}.board:has(.tube:nth-child(5):last-child) .tube:nth-child(5){margin-left:calc((var(--tube-width) + var(--tube-gap))/-2)}.board.many-tubes{--tube-width:52px;--tube-height:145px;--tube-gap:23px}.tube-glass{border-width:2.5px;border-radius:8px 8px 27px 27px}.tube-liquid{inset:13px 3px 4px;border-radius:0 0 21px 21px}.tube-glass:before{height:7px;left:-4px;right:-4px}.tube-glass:after{left:4px;width:4px;bottom:18px}.tube-number{margin-top:12px;font-size:10px}.tube:before{bottom:18px}.instruction{font-size:10px;gap:6px;min-height:37px;padding:0}.game-controls{gap:22px;margin-top:18px}.tool-button{width:59px;font-size:10px;gap:10px}.tool-icon{width:52px;height:50px;border-radius:14px}.tool-icon svg{width:22px;height:22px}.journey{margin-top:26px;padding:13px;gap:10px}.journey>div>span{font-size:10px}.journey p{font-size:9px}.journey-track{margin-left:0}.journey-icon svg{width:21px;height:21px}footer{font-size:8px;margin-top:20px;letter-spacing:.5px}.ambient i{opacity:.6}dialog{padding:32px 25px}h2{font-size:21px}.level-grid{gap:8px}.level-tile{min-height:50px}.hint-marker{top:-39px;font-size:9px}.completion-mark{top:-22px}.liquid{font-size:14px}}
@media(max-width:360px){.site-header{padding:0 15px}.game-shell{padding-left:16px;padding-right:16px}.game-controls{gap:19px}.board.many-tubes{--tube-gap:19px}.mode-badge{font-size:8px}.level-toolbar{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.confetti{display:none}}
/* Keep the game controls within reach on laptop screens and phones. */
@media(min-width:601px) and (max-height:1000px){
  :root{--tube-width:68px;--tube-height:190px;--tube-gap:40px}
  .site-header{height:72px}.game-shell{padding-top:4px;padding-bottom:18px}
  .game-heading h1{font-size:50px;margin:12px 0 6px}.game-heading h1 svg{width:29px;height:34px}
  .game-heading>p{font-size:12px}.game-heading .eyebrow{font-size:9px}
  .play-area{margin-top:23px}.level-picker{padding:10px 13px}.level-progress{margin-top:14px}
  .board-wrap{min-height:270px;padding:39px 0 14px}.instruction{min-height:31px}
  .game-controls{margin-top:17px}.tool-icon{height:52px;width:56px}.tool-button{gap:9px}
  .journey{margin-top:26px;padding:13px 18px}footer{margin-top:18px}
  .board.many-tubes{--tube-height:136px;--tube-width:51px;--tube-gap:34px;row-gap:25px}
  .board-wrap:has(.many-tubes){padding-top:29px;padding-bottom:8px}
}
@media(min-width:601px) and (max-height:800px){.journey{display:none}.game-shell:has(.many-tubes) footer{margin-top:12px}}
@media(max-width:600px){
  :root{--tube-width:56px;--tube-height:145px;--tube-gap:35px}
  .site-header{height:66px}.game-shell{padding-top:6px}.game-heading h1{font-size:42px}
  .play-area{margin-top:22px}.board-wrap{padding-top:32px;padding-bottom:9px}.board{row-gap:25px}
  .board.many-tubes{--tube-height:125px;--tube-width:48px;--tube-gap:23px}
  .journey{margin-top:22px}footer{margin-top:17px}
}
@media(max-width:600px) and (max-height:740px){
  :root{--tube-height:125px;--tube-width:50px}.site-header{height:58px}
  .game-heading h1{font-size:35px;margin-top:9px}.game-heading .eyebrow{display:none}
  .play-area{margin-top:18px}.board-wrap{padding-top:30px}.journey{display:none}
  .game-controls{margin-top:12px}.board.many-tubes{--tube-height:110px;--tube-width:44px}
}