:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-1:#ec3a4c;--color-2:#2f63f2;--color-3:#36c45a;--color-4:#ffd43b;--color-5:#ff8a1c;--color-6:#9150ff;--color-7:#ff66b8;--color-8:#17c4b2;--color-9:#8f5a2e;--color-10:#86dcff;--color-11:#17703f;--color-12:#a6afb8;--color-13:#2a2d3a;--color-14:#f5f8fb;--abyss:#051b26;--deep:#072634;--lagoon:#0d3a4c;--foam:#eaf7f5;--tide:#8fbcc4;--tide-dim:#5f8d97;--glass:#d6f2fa12;--glass-strong:#d6f2fa1f;--glass-edge:#beecf629;--panel:#082a38c7;--sun:#ffc93c;--sun-deep:#c8920f;--sun-ink:#3a2600;--coral:#ff8576;--focus:#9ef0ff;--font:ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text-xs:.8125rem;--text-sm:.9375rem;--text-md:1.0625rem;--text-lg:1.375rem;--text-xl:clamp(1.75rem, 7vw, 2.25rem);--gap:clamp(.75rem, 3vw, 1.25rem);--radius-control:16px;--radius-panel:28px}[data-color="1"]{--c:var(--color-1)}[data-color="2"]{--c:var(--color-2)}[data-color="3"]{--c:var(--color-3)}[data-color="4"]{--c:var(--color-4)}[data-color="5"]{--c:var(--color-5)}[data-color="6"]{--c:var(--color-6)}[data-color="7"]{--c:var(--color-7)}[data-color="8"]{--c:var(--color-8)}[data-color="9"]{--c:var(--color-9)}[data-color="10"]{--c:var(--color-10)}[data-color="11"]{--c:var(--color-11)}[data-color="12"]{--c:var(--color-12)}[data-color="13"]{--c:var(--color-13)}[data-color="14"]{--c:var(--color-14)}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{background:radial-gradient(120% 55% at 50% -12%, #6ed6e23d, transparent 62%), radial-gradient(70% 45% at 88% 108%, #ffc93c12, transparent 60%), linear-gradient(180deg, var(--lagoon) 0%, var(--deep) 52%, var(--abyss) 100%);color:var(--foam);font-family:var(--font);font-size:var(--text-md);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none;background-attachment:fixed;margin:0;line-height:1.4}body:before{content:"";pointer-events:none;background:repeating-linear-gradient(104deg,#0000 0 9%,#a0ecf509 11% 14%,#0000 17% 26%);position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000 0%,#0000 65%);mask-image:linear-gradient(#000 0%,#0000 65%)}.icon{flex:none;width:1.375rem;height:1.375rem}#app{flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.screen{min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;flex:1;display:none}.screen.is-active{display:flex}.panel{width:min(100% - 2 * var(--gap), 25rem);background:var(--panel);border:1px solid var(--glass-edge);border-radius:var(--radius-panel);-webkit-backdrop-filter:blur(16px);flex-direction:column;gap:1.125rem;margin:auto;padding:clamp(1.5rem,6vw,2.25rem);display:flex;box-shadow:inset 0 1px #ffffff14,0 30px 60px -20px #0000008c}.panel--wide{width:min(100% - 2 * var(--gap), 30rem)}.panel--brand{text-align:center}.title{font-size:var(--text-xl);letter-spacing:-.015em;margin:0;font-weight:800;line-height:1.1}.title--brand{letter-spacing:-.03em;font-size:clamp(2.25rem,10vw,3rem)}.subtitle,.muted{color:var(--tide);font-size:var(--text-md);margin:0}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.brand-mark{justify-content:center;align-items:flex-end;gap:.75rem;margin-bottom:.25rem;display:flex}.brand-mark__tube{background:#d6f2fa0f;border:2px solid #d2f2fa73;border-top:0;border-radius:0 0 .75rem .75rem;flex-direction:column-reverse;width:1.5rem;height:5.25rem;display:flex;overflow:hidden;box-shadow:inset -4px 0 #0000002e}.brand-mark__tube:nth-child(2){height:5.75rem;transform:translateY(-.5rem)}.brand-mark__layer{background:var(--c);flex:0 0 1.125rem}.form{text-align:left;flex-direction:column;gap:1rem;display:flex}.field{flex-direction:column;gap:.4rem;display:flex}.field__label{font-size:var(--text-sm);color:var(--tide);font-weight:600}.input{width:100%;font:inherit;font-size:var(--text-lg);color:var(--foam);border:1px solid var(--glass-edge);border-radius:var(--radius-control);background:#02121a8c;padding:.875rem 1rem;font-weight:600;box-shadow:inset 0 2px 6px #0000004d}.input::placeholder{color:var(--tide-dim);font-weight:500}.input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.form__error{color:var(--coral);font-size:var(--text-sm);margin:0;font-weight:600}.form__notice{color:var(--tide);font-size:var(--text-sm);margin:0}.form__actions{justify-content:flex-end;gap:.5rem;display:flex}.button{appearance:none;min-height:3rem;font:inherit;font-size:var(--text-md);color:var(--foam);background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--radius-control);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.125rem;font-weight:700;transition:transform .11s,background-color .14s,box-shadow .11s,border-color .14s;display:inline-flex}.button:hover{background:var(--glass-strong)}.button:active{transform:translateY(1px)}.button:focus-visible,.tool:focus-visible,.color-swatch:focus-visible,.player:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{min-height:3.25rem;font-size:var(--text-lg);color:var(--sun-ink);background:var(--sun);box-shadow:inset 0 2px 0 #ffffff73, 0 5px 0 var(--sun-deep), 0 12px 22px -8px #ffc93c73;border:0;border-radius:999px;font-weight:800}.button--primary:hover{background:#ffd35e}.button--primary:active{box-shadow:inset 0 2px 0 #ffffff73, 0 1px 0 var(--sun-deep), 0 4px 10px -6px #ffc93c73;transform:translateY(4px)}.button--dashed{color:var(--tide);background:0 0;border:2px dashed #beecf647}.button--dashed:hover{color:var(--foam);background:var(--glass);border-color:#beecf680}.button--quiet{min-height:2.75rem;color:var(--tide);background:0 0;border-color:#0000;font-weight:600}.button--quiet:hover{color:var(--foam);background:var(--glass)}.tool{appearance:none;width:2.75rem;height:2.75rem;color:var(--tide);background:var(--glass);border:1px solid var(--glass-edge);cursor:pointer;border-radius:50%;place-items:center;padding:0;transition:color .14s,background-color .14s,border-color .14s;display:inline-grid}.tool:hover{color:var(--foam);background:var(--glass-strong)}.tool .icon{width:1.25rem;height:1.25rem}.tool[aria-pressed=true],.button[aria-pressed=true]{color:var(--sun-ink);background:var(--sun);border-color:var(--sun)}.player-list{flex-direction:column;gap:.625rem;margin:0;padding:0;list-style:none;display:flex}.player-list__empty{text-align:center;color:var(--tide);margin:0;padding:1rem 0}.player-row{align-items:center;gap:.5rem;display:flex}.player{--player-color:var(--tide);appearance:none;min-width:0;min-height:4rem;font:inherit;text-align:left;color:var(--foam);background:var(--glass);border:1px solid var(--glass-edge);cursor:pointer;border-radius:20px;flex:auto;align-items:center;gap:.875rem;padding:.625rem 1rem .625rem .875rem;transition:transform .14s,background-color .14s,border-color .14s;display:flex}.player:hover{background:var(--glass-strong);border-color:color-mix(in srgb, var(--player-color) 55%, transparent)}.player:active{transform:scale(.99)}.player__dot{border:2px solid #d2f2fa80;border-top:0;border-radius:0 0 .6rem .6rem;flex:none;width:1.125rem;height:2rem;position:relative;overflow:hidden;background:0 0!important}.player__dot:after{content:"";background:var(--player-color);position:absolute;inset:32% 0 0}.player__name{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-lg);flex:auto;font-weight:700;overflow:hidden}.player__level{font-size:var(--text-xs);color:var(--tide);font-variant-numeric:tabular-nums;background:#02121a73;border-radius:999px;flex:none;padding:.25rem .625rem;font-weight:700}.player__remove{color:var(--tide-dim);background:0 0;border-color:#0000;flex:none}.player__remove:hover{color:var(--coral);background:#ff85761f}.color-picker{grid-template-columns:repeat(7,1fr);gap:.5rem;display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;border:0;border-radius:50%;width:100%;padding:0;transition:transform .12s;box-shadow:inset 0 -3px #00000038,inset 0 2px #ffffff40}.color-swatch:hover{transform:scale(1.08)}.color-swatch.is-selected{box-shadow:inset 0 -3px 0 #00000038, 0 0 0 3px var(--deep), 0 0 0 5px var(--foam);transform:scale(1.08)}.screen--game{padding:calc(var(--gap) + env(safe-area-inset-top)) var(--gap) calc(var(--gap) + env(safe-area-inset-bottom))}.game{gap:var(--gap);flex-direction:column;flex:1;width:100%;max-width:920px;min-height:0;margin:0 auto;display:flex}.hud{align-items:center;gap:var(--gap);grid-template-columns:1fr auto 1fr;display:grid}.hud__stat{flex-direction:column;line-height:1;display:flex}.hud__stat--level{justify-self:start;gap:.2rem}.hud__stat--moves{flex-direction:column-reverse;justify-self:center;align-items:center;gap:.3rem}.hud__label{font-size:var(--text-sm);color:var(--tide);font-weight:600}.hud__value{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:800}.hud__stat--level .hud__value{font-size:clamp(2.25rem,9vw,3rem)}.hud__stat--moves .hud__value{font-size:var(--text-lg);background:var(--glass);border:1px solid var(--glass-edge);text-align:center;border-radius:999px;min-width:3.25rem;padding:.3rem .875rem}.hud__tools{justify-self:end;gap:.5rem;display:flex}.board-wrap{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.board{--unit:40px;--tube-w:44px;--tube-h:190px;--gap-x:18px;--gap-y:40px;--cols:8;grid-template-columns:repeat(var(--cols), var(--tube-w));place-content:center;column-gap:var(--gap-x);row-gap:var(--gap-y);padding-top:calc(var(--unit) * .6);max-width:100%;display:grid;position:relative}.board__placeholder{text-align:center;color:var(--tide);font-size:var(--text-md);grid-column:1/-1;margin:0;font-weight:600}.game__hint{text-align:center;color:var(--sun);font-size:var(--text-sm);background:#ffc93c1a;border-radius:999px;margin:0 auto;padding:.5rem 1rem;font-weight:700}.tube{--glass-line:max(2px, calc(var(--unit) * .065));--rim-glow:transparent;width:var(--tube-w);height:var(--tube-h);font:inherit;cursor:pointer;transform-origin:bottom;background:0 0;border:0;padding:0;transition:transform .18s cubic-bezier(.3,.7,.4,1);display:block;position:relative}.tube:before{content:"";z-index:3;height:calc(var(--unit) * .24);box-shadow:0 2px 3px #00000038, 0 0 0 2px var(--rim-glow), 0 0 16px var(--rim-glow);background:linear-gradient(#ecfaff9e,#bee8f44d);border-radius:999px;transition:box-shadow .16s;position:absolute;top:0;left:-9%;right:-9%}.tube:after{content:"";z-index:3;top:calc(var(--unit) * .5);bottom:calc(var(--unit) * .55);pointer-events:none;background:linear-gradient(#fff9,#ffffff1a 70%,#0000);border-radius:999px;width:11%;position:absolute;left:20%}.tube__glass{inset:calc(var(--unit) * .16) 0 0;border:var(--glass-line) solid #cef0fa66;border-radius:0 0 calc(var(--tube-w) / 2) calc(var(--tube-w) / 2);background:linear-gradient(90deg,#ffffff0a,#ffffff1c 30%,#ffffff08 58%,#0000001a);border-top:0;transition:border-color .16s;position:absolute;overflow:hidden;box-shadow:0 10px 18px -8px #00000080}.tube__glass:after{content:"";pointer-events:none;background:linear-gradient(90deg,#00000042,#0000 26%,#ffffff1a 44%,#0000 62%,#0000004d);position:absolute;inset:0}.tube__liquid{flex-direction:column-reverse;display:flex;position:absolute;bottom:0;left:0;right:0}.unit{height:var(--unit);background:var(--c,transparent);box-shadow:0 1px 0 var(--c,transparent);flex:none;transition:height .34s cubic-bezier(.4,0,.2,1);display:block}.unit.is-empty{height:0}.unit.is-surface{box-shadow:inset 0 calc(var(--unit) * .13) 0 color-mix(in srgb, var(--c) 55%, white), 0 1px 0 var(--c)}.unit.is-hidden{background:repeating-linear-gradient(135deg,#ffffff0a 0 6px,#0000 6px 12px),#12313e;place-items:center;display:grid;box-shadow:inset 0 -1px #00000059}.unit.is-hidden:after{content:"?";font-size:calc(var(--unit) * .5);color:var(--tide);font-weight:800;line-height:1}.board.is-color-blind .unit:not(.is-hidden){place-items:center;display:grid}.unit__symbol{font-size:calc(var(--unit) * .55);color:#fffffff0;-webkit-text-stroke:max(1px, calc(var(--unit) * .035)) #0009;paint-order:stroke fill;pointer-events:none;-webkit-user-select:none;user-select:none;font-weight:700;line-height:1}.tube__cork{z-index:4;top:calc(var(--unit) * -.3);height:calc(var(--unit) * .52);border-radius:calc(var(--unit) * .12) calc(var(--unit) * .12) calc(var(--unit) * .06) calc(var(--unit) * .06);opacity:0;pointer-events:none;background:radial-gradient(circle at 30% 35%,#5a321459 0 6%,#0000 7%),radial-gradient(circle at 70% 60%,#5a32144d 0 5%,#0000 6%),linear-gradient(90deg,#a46a38,#dba468 42%,#c2854c 70%,#9a6131);position:absolute;left:14%;right:14%;transform:translateY(-70%)scale(.6);box-shadow:inset 0 2px #ffe6be73,0 3px 5px #0000004d}.tube.is-complete .tube__cork{opacity:1;animation:.52s cubic-bezier(.25,1.6,.45,1) both cork-pop;transform:none}.tube.is-complete .tube__glass{border-color:#cef0fa94}@keyframes cork-pop{0%{opacity:0;transform:translateY(-140%)scale(.5)rotate(-12deg)}60%{opacity:1}to{opacity:1;transform:none}}.tube:focus-visible{outline:none}.tube:focus-visible .tube__glass{outline:3px solid var(--focus);outline-offset:4px}@media (hover:hover){.tube:not(.is-selected):hover{transform:translateY(calc(var(--unit) * -.12))}}.tube.is-selected{transform:translateY(calc(var(--unit) * -.55))}.tube.is-legal{--rim-glow:#ffc93ccc}.tube.is-hint-source{--rim-glow:var(--focus)}.tube.is-hint-target{--rim-glow:var(--sun)}.tube.is-hint-source:before,.tube.is-hint-target:before{animation:.7s ease-in-out 3 hint-pulse}@keyframes hint-pulse{50%{box-shadow:0 2px 3px #00000038, 0 0 0 4px var(--rim-glow), 0 0 26px var(--rim-glow)}}.tube.is-pouring{z-index:5;transition:none}.pour-stream{z-index:4;background:linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, white), var(--c) 45%);transform-origin:50% 0;pointer-events:none;border-radius:999px;display:block;position:absolute;transform:scaleY(0)}.controls{justify-content:center;gap:clamp(.5rem,2.5vw,.875rem);display:flex}.button--control{min-height:4.25rem;font-size:var(--text-sm);border-radius:20px;flex-direction:column;flex:0 7rem;gap:.3rem;padding:.625rem .75rem}.button--control .icon{width:1.625rem;height:1.625rem}.button--hint .icon{color:var(--sun)}.panel--complete{text-align:center;align-items:stretch}.screen--complete.is-active .panel--complete{animation:.38s cubic-bezier(.2,.9,.3,1.15) both panel-in}.title--win{letter-spacing:-.03em;font-size:clamp(2.5rem,12vw,3.5rem)}.stars{justify-content:center;gap:.5rem;margin:.25rem 0 .75rem;font-size:clamp(2.75rem,13vw,3.75rem);line-height:1;display:flex}.star{color:#beecf629;text-shadow:none}.star:nth-child(2){transform:translateY(-.6rem)scale(1.15)}.star.is-filled{color:var(--sun);text-shadow:0 3px 0 var(--sun-deep), 0 0 24px #ffc93c73}.screen--complete.is-active .star.is-filled{animation:.46s cubic-bezier(.25,1.7,.45,1) both star-pop}.screen--complete.is-active .star.is-filled:first-child{animation-delay:.18s}.screen--complete.is-active .star.is-filled:nth-child(2){animation-delay:.32s}.screen--complete.is-active .star.is-filled:nth-child(3){animation-delay:.46s}@keyframes star-pop{0%{opacity:0;rotate:-30deg;scale:.2}to{opacity:1;rotate:0deg;scale:1}}@keyframes panel-in{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:none}}.ios-hint{left:50%;bottom:calc(var(--gap) + env(safe-area-inset-bottom));z-index:50;width:min(100% - 2 * var(--gap), 32rem);background:var(--panel);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(16px);border-radius:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.875rem 1rem;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 18px 40px -12px #0009}.ios-hint__text{font-size:var(--text-sm);color:var(--foam);flex:14rem;margin:0}.ios-hint__dismiss{flex:none}@media (height<=520px){.hud__stat--level .hud__value{font-size:1.75rem}.button--control{flex-direction:row;min-height:2.75rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
