@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap";:root{color:#30343b;font-synthesis:none;background:#f5f3ee;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{min-width:320px}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0}button:disabled{opacity:.35;cursor:default}.app{isolation:isolate;min-height:100dvh;padding:calc(26px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));background:#f5f3ee;flex-direction:column;display:flex;position:relative;overflow:hidden}.wash{filter:blur(1px);opacity:.38;z-index:-1;border-radius:50%;position:absolute}.wash-one{background:#e6d9ee;width:230px;height:230px;top:-120px;right:-50px}.wash-two{background:#dce9df;width:270px;height:270px;bottom:-170px;left:-110px}.topbar{justify-content:space-between;align-items:center;width:min(100%,900px);margin:auto auto 0;display:flex}.wordmark{letter-spacing:2px;align-items:center;gap:6px;font:700 18px Outfit;display:flex}.wordmark strong{color:#6b7380;font-weight:800}.drop-mark{color:#5c9df5;margin-right:2px;font-size:22px;display:inline-block;transform:rotate(25deg)}.top-actions{gap:10px;display:flex}.icon-btn{color:#85817a;background:#ffffffb8;border-radius:14px;place-items:center;width:42px;height:42px;display:grid;box-shadow:0 5px 16px #41495514}.icon-btn svg{width:18px}.level-heading{text-align:center;width:min(100%,900px);margin:clamp(28px,6vh,68px) auto 0}.level-heading p{color:#85817a;letter-spacing:2px;margin:0;font-size:10px;font-weight:700}.level-heading p span{color:#6fc69a;margin:0 5px}.level-heading h1{letter-spacing:3px;margin:7px 0 17px;font:500 clamp(28px,5vw,42px) Outfit}.level-heading h1 b{font-weight:800}.progress{background:#e6e2da;border-radius:99px;width:96px;height:4px;margin:auto;overflow:hidden}.progress i{border-radius:inherit;background:#6fc69a;height:100%;transition:width .3s;display:block}.board{grid-template-columns:repeat(4,1fr);place-items:end center;gap:clamp(14px,3.7vw,35px);width:min(100%,680px);margin:auto;padding:clamp(28px,5vh,58px) 0;display:grid}.tube-wrap{width:min(18vw,96px);min-width:58px;padding:0 0 8px;transition:transform .22s cubic-bezier(.2,.8,.2,1);position:relative}.tube-wrap:hover{transform:translateY(-3px)}.tube-wrap.is-selected{transform:translateY(-12px)}.tube-wrap.is-selected .tube{filter:drop-shadow(0 9px 9px #5c9df542)}.tube-wrap.is-selected .tube-glass{border-color:#5c9df5b8}.tube-wrap.is-hint{animation:1s ease-in-out infinite hint}.tube-wrap.is-invalid{animation:.28s shake}.tube{border-radius:16px 16px 29px 29px;height:clamp(160px,25vw,250px);position:relative;overflow:hidden}.tube-glass{z-index:2;pointer-events:none;background:#ffffff1f;border:2px solid #41495547;border-top-color:#41495566;border-radius:16px 16px 29px 29px;position:absolute;inset:0;box-shadow:inset 5px 0 #ffffff73,inset -3px 0 #ffffff1f,0 8px 14px #41495514}.liquid-stack{z-index:1;border-radius:12px 12px 25px 25px;flex-direction:column-reverse;height:calc(100% - 8px);display:flex;position:absolute;bottom:4px;left:4px;right:4px;overflow:hidden}.liquid{background:var(--liquid);flex:none;width:100%;height:25%;position:relative;box-shadow:inset 0 1px #ffffff2e}.liquid.surface:before{content:"";background:var(--liquid);border-top:2px solid #ffffff57;border-radius:50%;height:9px;position:absolute;top:-4px;left:0;right:0}.liquid span{filter:blur(1px);background:#fff3;border-radius:50%;width:22%;height:30%;position:absolute;top:11%;left:13%}.glass-shine{z-index:3;opacity:.72;background:#ffffff94;border-radius:5px;width:5px;height:50%;position:absolute;top:10%;left:14%}.tube-number{color:#b0aaa0;letter-spacing:1px;font-size:9px;position:absolute;bottom:-2px;left:0;right:0}.tip{text-align:center;color:#85817a;letter-spacing:1.5px;min-height:15px;margin:0 auto;font-size:10px;font-weight:700}.controls{justify-content:center;gap:clamp(20px,7vw,64px);margin:clamp(22px,4vh,40px) auto 0;display:flex}.controls button{color:#85817a;letter-spacing:1px;justify-items:center;gap:7px;font-size:9px;font-weight:700;display:grid}.controls .hint-btn{color:#6b9c84}.controls .hint-btn svg{background:#deefe6;border-radius:13px;width:39px;height:39px;margin-top:-9px;padding:9px}.controls button:hover:not(:disabled){color:#30343b}.controls button:hover:not(:disabled) svg{transform:translateY(-2px)}.controls svg{transition:transform .18s}.app footer{color:#b0aaa0;letter-spacing:1.3px;justify-content:center;gap:11px;margin:auto auto 0;font-size:9px;font-weight:700;display:flex}.dot{color:#6fc69a}.modal-backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10;background:#30343b40;place-items:center;padding:22px;display:grid;position:fixed;inset:0}.win-modal,.help-modal{text-align:center;background:#fdfcf9;border-radius:28px;width:min(100%,380px);padding:35px 26px 27px;animation:.3s ease-out pop;position:relative;box-shadow:0 24px 70px #30343b33}.modal-close{color:#aaa49a;position:absolute;top:15px;right:15px}.modal-close svg{width:18px}.win-icon{color:#4ea87f;background:#dff1e7;border-radius:50%;place-items:center;width:57px;height:57px;margin:0 auto 17px;display:grid}.win-icon svg{width:28px}.win-modal p,.eyebrow{color:#85817a;letter-spacing:2px;margin:0;font-size:10px;font-weight:700}.win-modal h2,.help-modal h2{margin:7px 0 12px;font:700 28px Outfit}.star-row{color:#f4c95d;letter-spacing:5px;margin:12px;font-size:28px}.win-modal small{color:#aaa49a;letter-spacing:1px;margin-bottom:23px;font-size:10px;display:block}.primary{color:#fff;letter-spacing:1px;background:#6fc69a;border-radius:16px;justify-content:center;align-items:center;gap:8px;width:100%;height:52px;font-weight:800;display:flex;box-shadow:0 8px 18px #6fc69a40}.help-illustration{color:#aaa49a;justify-content:center;align-items:center;gap:15px;margin:8px auto 25px;display:flex}.help-illustration svg{width:19px}.mini-tube{border:2px solid #41495559;border-radius:8px 8px 12px 12px;flex-direction:column-reverse;width:35px;height:74px;padding:2px;display:flex;overflow:hidden}.mini-tube i{background:#5c9df5;height:33%;display:block}.mini-tube i:nth-child(2){background:#f4c95d}.mini-tube i:nth-child(3){background:#ff6f70}.help-modal h2{margin-bottom:10px}.help-modal>p:not(.eyebrow){color:#85817a;max-width:290px;margin:0 auto 23px;font-size:14px;line-height:1.6}.is-paused{filter:blur(8px);pointer-events:none}.pause-overlay{z-index:5;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#f5f3ee94;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.pause-overlay svg{color:#6fc69a;width:40px;height:40px}.pause-overlay h2{letter-spacing:2px;font:700 25px Outfit}.pause-overlay .primary{width:170px}@keyframes hint{50%{transform:translateY(-9px)}}@keyframes shake{25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes pop{0%{opacity:0;transform:scale(.94)translateY(10px)}to{opacity:1;transform:none}}@media (width<=520px){.app{padding-left:18px;padding-right:18px}.tube-wrap{width:19vw;min-width:57px}.board{gap:clamp(9px,2vw,18px)}.topbar{margin-top:0}.level-heading{margin-top:28px}.board{padding-top:35px;padding-bottom:30px}}@media (width>=700px){.app{padding-bottom:30px}.board{grid-template-columns:repeat(4,100px)}.board .tube-wrap:nth-child(5){grid-column:2}.board .tube-wrap:nth-child(6){grid-column:3}.board{row-gap:35px}}.board{position:relative}.pour-overlay{z-index:5;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.pour-stream{fill:none;stroke:url(#pour-gradient);stroke-width:10px;stroke-linecap:round;filter:drop-shadow(0 4px 4px #5c9df547);stroke-dasharray:10 7;animation:.32s linear infinite water-flow,.72s ease-out both stream-in}.pour-drop{fill:#8bc5ff;filter:drop-shadow(0 3px 3px #5c9df54d);animation:.36s ease-in-out infinite alternate drop-bob}.tube-wrap.is-pouring{z-index:4;transform-origin:50% 100%;transition:transform .25s cubic-bezier(.2,.8,.2,1);transform:translateY(-20px)rotate(10deg)}.tube-wrap.is-receiving{z-index:3;animation:.72s ease-in-out receive}.tube-wrap.is-pouring .tube{filter:drop-shadow(0 9px 9px #5c9df542)}@keyframes water-flow{to{stroke-dashoffset:-17px}}@keyframes stream-in{0%{opacity:0;stroke-dashoffset:70px}to{opacity:1;stroke-dashoffset:0}}@keyframes drop-bob{to{transform:translateY(5px)}}@keyframes receive{0%,to{transform:translateY(0)}35%{transform:translateY(4px)scale(.98)}70%{transform:translateY(-2px)}}.lobby-screen .topbar{margin-top:0}.lobby-content{text-align:center;width:min(100%,520px);margin:auto}.lobby-art{width:240px;height:210px;margin:0 auto 25px;position:relative}.art-tube{background:#ffffff2e;border:2px solid #4149554d;border-radius:12px 12px 18px 18px;flex-direction:column-reverse;width:48px;padding:3px;display:flex;position:absolute;bottom:8px;overflow:hidden;box-shadow:inset 4px 0 #ffffff8c,0 9px 13px #41495514}.art-tube i{background:#5c9df5;height:25%;display:block}.art-tube i:nth-child(2){background:#f4c95d}.art-tube i:nth-child(3){background:#ff6f70}.art-tube i:nth-child(4){background:#65c99a}.art-one{height:118px;left:22px;transform:rotate(-8deg)}.art-two{height:156px;bottom:28px;left:96px;transform:rotate(3deg)}.art-three{height:96px;right:20px;transform:rotate(9deg)}.lobby-screen .eyebrow{color:#85817a;letter-spacing:2px;margin:0;font-size:10px;font-weight:700}.lobby-content h1{letter-spacing:-1px;margin:12px 0 16px;font:700 clamp(38px,10vw,58px)/.95 Outfit}.lobby-content h1 em{color:#5c9df5;font-style:normal}.lobby-copy{color:#85817a;max-width:270px;margin:0 auto 28px;font-size:14px;line-height:1.5}.lobby-actions{gap:12px;width:min(100%,280px);margin:auto;display:grid}.lobby-actions .secondary{color:#6b7380;letter-spacing:1px;background:#ffffffb8;border-radius:16px;justify-content:center;align-items:center;gap:8px;height:52px;font-weight:800;display:flex;box-shadow:0 5px 16px #41495514}.app{font-family:ui-rounded,Arial Rounded MT Bold,Nunito,system-ui,sans-serif}button{transition:transform .12s,filter .12s,box-shadow .12s}button:hover:not(:disabled){filter:brightness(.99)}button:active:not(:disabled){transform:translateY(2px)scale(.985)}button:focus-visible{outline-offset:3px;outline:3px solid #5c9df559}.wordmark{letter-spacing:1.5px;font-family:ui-rounded,Arial Rounded MT Bold,Nunito,system-ui,sans-serif;font-weight:900}.icon-btn{border-radius:16px;width:50px;height:50px;box-shadow:0 4px 12px #32374614}.icon-btn svg{stroke-width:2.4px;width:22px;height:22px}.level-heading h1{letter-spacing:2px;font-family:ui-rounded,Arial Rounded MT Bold,Nunito,system-ui,sans-serif;font-weight:900}.controls button{min-width:58px;font-size:10px;font-weight:800}.controls svg{stroke-width:2.3px;width:27px;height:27px}.primary{background:#5c9df5;border-radius:18px;height:56px;font-weight:900;box-shadow:0 5px #3670be33,0 8px 18px #5c9df52e}.primary:active:not(:disabled){box-shadow:0 2px #3670be33,0 4px 10px #5c9df524}.tube-wrap.is-pouring{transform-origin:50% 100%;z-index:4;animation:1.12s cubic-bezier(.2,.8,.2,1) both lift-and-pour}.pour-stream{stroke-width:11px;stroke-linecap:round;stroke-dasharray:18 5;animation:1.12s ease-out both water-appear,.28s linear .58s infinite water-flow}.pour-drop{animation:.58s ease-in-out .58s infinite alternate drop-fall}.pour-drop-two{animation-delay:.7s}@keyframes lift-and-pour{0%{transform:translate(0)rotate(0)}30%{transform:translateY(-76px)rotate(0)}62%{transform:translate(var(--pour-dx),var(--pour-dy)) rotate(var(--pour-tilt))}to{transform:translate(var(--pour-dx),var(--pour-dy)) rotate(var(--pour-tilt))}}@keyframes water-appear{0%,48%{opacity:0;stroke-dashoffset:60px}58%{opacity:1;stroke-dashoffset:28px}to{opacity:1;stroke-dashoffset:0}}@keyframes drop-fall{0%{opacity:.6;transform:translateY(-3px)}to{opacity:1;transform:translateY(8px)}}