.pi-surface,.pi-liquid-water{--pi-fluid:#1f86dc}.pi-surface.surface-dark{--pi-fluid:#3a9df2}.pi[data-liquid=lava] .pi-surface,.pi-liquid-lava{--pi-fluid:#ec5418}.pi[data-liquid=lava] .pi-surface.surface-dark{--pi-fluid:#ff6b2c}.pi[data-liquid=slime] .pi-surface,.pi-liquid-slime{--pi-fluid:#3fae22}.pi[data-liquid=slime] .pi-surface.surface-dark{--pi-fluid:#5fd23a}.pi[data-liquid=grape] .pi-surface,.pi-liquid-grape{--pi-fluid:#8645d8}.pi[data-liquid=grape] .pi-surface.surface-dark{--pi-fluid:#a46cf3}.pi[data-liquid=honey] .pi-surface,.pi-liquid-honey{--pi-fluid:#eaa10c}.pi[data-liquid=honey] .pi-surface.surface-dark{--pi-fluid:#ffbb2e}.pi[data-liquid=rose] .pi-surface,.pi-liquid-rose{--pi-fluid:#e1427a}.pi[data-liquid=rose] .pi-surface.surface-dark{--pi-fluid:#f7609a}.pi-surface{--pi-pipe:#a3aebb;--pi-pipe-edge:#5d6a78;--pi-flange:#77838f}.pi-surface.surface-dark{--pi-pipe:#8f9cab;--pi-pipe-edge:#4c5866;--pi-flange:#66727f}.pi[data-pipes=copper] .pi-surface{--pi-pipe:#d08a54;--pi-pipe-edge:#8a4a22;--pi-flange:#a85c2c}.pi[data-pipes=copper] .pi-surface.surface-dark{--pi-pipe:#d18b57;--pi-pipe-edge:#7a411d;--pi-flange:#9b5428}.pi[data-pipes=clay] .pi-surface{--pi-pipe:#cf9579;--pi-pipe-edge:#8b5540;--pi-flange:#ab6c52}.pi[data-pipes=clay] .pi-surface.surface-dark{--pi-pipe:#bf8569;--pi-pipe-edge:#6c3f2f;--pi-flange:#8f5844}.pi-bg-slate{--pi-bg:#dce3e9;--pi-cell:#f1f4f7;--pi-grid:#d0d8e0;--pi-pattern:linear-gradient(160deg, #eef2f5, #d3dbe2)}.pi-bg-slate.surface-dark{--pi-bg:#1a2129;--pi-cell:#222a33;--pi-grid:#2e3843;--pi-pattern:linear-gradient(160deg, #222b35, #161c23)}.pi-bg-paper{--pi-bg:#ece1c8;--pi-cell:#faf5e9;--pi-grid:#e6dbc2;--pi-pattern:repeating-linear-gradient(0deg, transparent 0 22px, #e0d3b5 22px 23px)}.pi-bg-paper.surface-dark{--pi-bg:#28231b;--pi-cell:#312b22;--pi-grid:#3f372b;--pi-pattern:repeating-linear-gradient(0deg, transparent 0 22px, #352e24 22px 23px)}.pi-bg-garden{--pi-bg:#cfe2c1;--pi-cell:#eef6e7;--pi-grid:#d3e4c6;--pi-pattern:radial-gradient(circle at 30% 30%, #b8d3a5 0 3px, transparent 3.5px) 0 0 / 26px 26px}.pi-bg-garden.surface-dark{--pi-bg:#16241a;--pi-cell:#1d2e21;--pi-grid:#29402d;--pi-pattern:radial-gradient(circle at 30% 30%, #233a27 0 3px, transparent 3.5px) 0 0 / 26px 26px}.pi-bg-blueprint{--pi-bg:#c6daf2;--pi-cell:#e6f0fc;--pi-grid:#c4d8f1;--pi-pattern:linear-gradient(#b3cbea 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, #b3cbea 1px, transparent 1px) 0 0 / 18px 18px}.pi-bg-blueprint.surface-dark{--pi-bg:#0c2242;--pi-cell:#102b52;--pi-grid:#1b3d6c;--pi-pattern:linear-gradient(#173663 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, #173663 1px, transparent 1px) 0 0 / 18px 18px}.pi-bg-night{--pi-bg:#d4d0e8;--pi-cell:#eeecf7;--pi-grid:#d9d5ec;--pi-pattern:radial-gradient(circle at 20% 30%, #b9b3d8 0 1.5px, transparent 2px) 0 0 / 40px 40px, radial-gradient(circle at 70% 75%, #c4bfe0 0 1px, transparent 1.5px) 0 0 / 28px 28px}.pi-bg-night.surface-dark{--pi-bg:#0d0d17;--pi-cell:#171725;--pi-grid:#24243a;--pi-pattern:radial-gradient(circle at 20% 30%, #3e3d5e 0 1.5px, transparent 2px) 0 0 / 40px 40px, radial-gradient(circle at 70% 75%, #2f2e49 0 1px, transparent 1.5px) 0 0 / 28px 28px}.pi-surface{--pi-open:#e0362f;--pi-hollow:color-mix(in srgb, var(--pi-pipe-edge) 82%, var(--pi-cell));background:var(--pi-pattern), var(--pi-bg);color:var(--ink);border-radius:18px;justify-items:center;gap:12px;padding:14px;display:grid;position:relative}.pi-surface.surface-dark{--pi-hollow:color-mix(in srgb, var(--pi-pipe-edge) 78%, #10141a)}.pi-board{--board-chrome:200px;--board-min-cell:28px;background-color:var(--pi-cell);max-width:560px;box-shadow:0 0 0 3px var(--pi-flange), 0 6px 18px color-mix(in srgb, var(--pi-pipe-edge) 30%, transparent);border-radius:12px;grid-area:1/1;transition:box-shadow .3s;overflow:hidden}.pi-board.has-grid{background-image:linear-gradient(90deg, var(--pi-grid) 1px, transparent 1px), linear-gradient(var(--pi-grid) 1px, transparent 1px);background-size:calc(100% / var(--board-cols)) 100%, 100% calc(100% / var(--board-rows))}.pi-row{grid-template-columns:repeat(var(--board-cols), minmax(0, 1fr));display:grid}.pi-tile{aspect-ratio:1;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:0 0;border:0;border-radius:0;width:100%;padding:0;transition:background-color .16s;display:block;position:relative}.pi-tile.is-locked{background:color-mix(in srgb, var(--pi-pipe-edge) 9%, transparent)}.pi-tile.is-fixed{background:color-mix(in srgb, var(--pi-fluid) 12%, transparent)}.pi-tile.is-next{background:color-mix(in srgb, var(--pi-fluid) 26%, transparent);animation:.9s ease-in-out infinite alternate pi-next}@keyframes pi-next{to{background-color:color-mix(in srgb, var(--pi-fluid) 8%, transparent)}}.pi-tile:focus-visible{z-index:2;outline:3px solid var(--focus);outline-offset:-3px}.pi-tile[aria-disabled=true]{cursor:default}.pi-art,.pi-marks{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.pi-art{transform:rotate(var(--pi-angle));transition:transform .17s cubic-bezier(.3,1.3,.6,1)}.pi-edge line{stroke:var(--pi-pipe-edge);stroke-width:38px}.pi-edge circle,.pi-flange{fill:var(--pi-pipe-edge)}.pi-flange{fill:var(--pi-flange);stroke:var(--pi-pipe-edge);stroke-width:2px}.pi-wall line{stroke:var(--pi-pipe);stroke-width:30px}.pi-wall circle{fill:var(--pi-pipe)}.pi-channel line{stroke:var(--pi-hollow);stroke-width:15px}.pi-channel circle{fill:var(--pi-hollow)}.pi-liquid line{stroke:#0000;stroke-width:15px;transition:stroke .22s}.pi-liquid circle{fill:#0000;transition:fill .22s}.pi-gloss line{stroke:#0000;stroke-width:3.5px;transition:stroke .22s}.pi-gloss circle{fill:#0000;transition:fill .22s}.pi-tile.is-full .pi-liquid line{stroke:var(--pi-fluid)}.pi-tile.is-full .pi-liquid circle{fill:var(--pi-fluid)}.pi-tile.is-full .pi-gloss line{stroke:color-mix(in srgb, var(--pi-fluid) 45%, #fff)}.pi-tile.is-full .pi-gloss circle{fill:color-mix(in srgb, var(--pi-fluid) 45%, #fff)}.pi-tile.is-pouring :is(.pi-liquid,.pi-gloss) line{stroke-dasharray:1 1;transition:none}.pi-tile.is-pouring :is(.pi-liquid,.pi-gloss) line.is-in{animation:pi-pour-in calc(var(--pi-step) / 2) linear both}.pi-tile.is-pouring :is(.pi-liquid,.pi-gloss) line.is-out{animation:pi-pour-out calc(var(--pi-step) / 2) linear calc(var(--pi-step) / 2) both}.pi-tile.is-source :is(.pi-liquid,.pi-gloss) line.is-out{animation-duration:var(--pi-step);animation-delay:0s}.pi-tile.is-pouring :is(.pi-liquid,.pi-gloss) circle{animation:pi-pour-joint calc(var(--pi-step) / 2) step-end both;transition:none}@keyframes pi-pour-in{0%{stroke-dashoffset:-1px}to{stroke-dashoffset:0}}@keyframes pi-pour-out{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes pi-pour-joint{0%{fill:#0000}}.pi-board.is-still *,.pi-board.is-still .pi-tile.is-pouring :is(.pi-liquid,.pi-gloss) :is(line,circle){animation-play-state:paused}.pi-warn circle{fill:var(--pi-open);stroke:#fff;stroke-width:3px;animation:.7s ease-in-out infinite alternate pi-warn}.pi-warn path{fill:none;stroke:#fff;stroke-width:4px;stroke-linecap:round}.pi-tile.is-warned{background:color-mix(in srgb, var(--pi-open) 16%, transparent)}@keyframes pi-warn{to{fill:#ff8a7a}}.pi-surface.is-flow{padding-top:52px}.pi-surface.is-flow .pi-board{--board-chrome:238px}.pi-flow-start{z-index:2;background:color-mix(in srgb, var(--pi-cell) 92%, transparent);box-shadow:0 2px 10px color-mix(in srgb, var(--pi-pipe-edge) 35%, transparent);color:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none;border-radius:999px;grid-area:1/1;place-self:start center;margin-top:-44px;padding:4px 14px;font-weight:700}.pi-flow-start strong{min-width:1.4em;color:var(--ink);text-align:center;font-size:1.25em;display:inline-block}.pi-flow-start.is-soon{color:#fff;background:#b3261e}.pi-flow-start.is-soon strong{color:#fff}.pi-pump-ring{fill:#e5b53d;stroke:#8f6a12;stroke-width:4px}.pi-pump-core{fill:var(--pi-fluid);stroke:#8f6a12;stroke-width:2px}.pi-pump path{fill:#fff}.pi-open{fill:var(--pi-open);stroke:var(--pi-cell);stroke-width:3px}.pi-splash circle{fill:var(--pi-fluid);stroke:var(--pi-open);stroke-width:3px}.pi-lock{fill:var(--pi-pipe-edge)}.pi-board.is-flood{box-shadow:0 0 0 3px var(--pi-flange), 0 0 26px color-mix(in srgb, var(--pi-fluid) 55%, transparent);animation:pi-glow 1.4s ease-out var(--pi-wave-end) both}.pi-board.is-flood .pi-tile{animation:1.1s ease-out both pi-flash;animation-delay:calc(var(--pi-wave) * var(--pi-wave-step))}.pi-shine line{stroke:#fff;stroke-width:15px;opacity:0}.pi-shine circle{fill:#fff;opacity:0}.pi-board.is-flood .pi-shine :is(line,circle){animation:1.1s ease-out both pi-shine;animation-delay:calc(var(--pi-wave) * var(--pi-wave-step))}.pi-board.is-flood .pi-pump-ring{animation:.8s ease-in-out 3 pi-pump}@keyframes pi-flash{25%{background-color:color-mix(in srgb, var(--pi-fluid) 38%, transparent)}}@keyframes pi-shine{30%{opacity:.75}}@keyframes pi-pump{50%{fill:#ffe08a}}@keyframes pi-glow{0%{box-shadow:0 0 0 3px var(--pi-flange), 0 6px 18px color-mix(in srgb, var(--pi-pipe-edge) 30%, transparent)}35%{box-shadow:0 0 0 4px var(--pi-fluid), 0 0 44px color-mix(in srgb, var(--pi-fluid) 80%, transparent)}to{box-shadow:0 0 0 3px var(--pi-flange), 0 0 26px color-mix(in srgb, var(--pi-fluid) 55%, transparent)}}@media (hover:hover) and (pointer:fine){.pi-tile:not([aria-disabled=true]):hover{background-color:color-mix(in srgb, var(--pi-pipe) 18%, transparent)}}.pi-tools,.pi-end{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.pi-tool{align-items:center;gap:6px;min-height:44px;display:inline-flex}.pi-tool svg{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.pi-tool[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}.pi-held{z-index:3;background:var(--pi-pattern), var(--pi-bg);color:var(--ink);text-align:center;border-radius:18px;place-content:center;justify-items:center;gap:10px;padding:16px;display:grid;position:absolute;inset:0}.pi-held p{margin:0;font-weight:700}.pi-message{background:color-mix(in srgb, var(--pi-cell) 80%, transparent);min-height:1.5em;color:var(--ink);text-align:center;border-radius:999px;margin:0;padding:4px 12px}.pi-status{font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:4px 12px;display:inline-flex}.pi-swatch{background:var(--pi-fluid);border-radius:6px;justify-self:stretch;width:auto;min-width:48px;height:100%;min-height:28px;display:block}.pi-swatch[class*=pi-bg-]{background:var(--pi-pattern), var(--pi-bg);box-shadow:inset 0 0 0 6px var(--pi-bg)}.pi-daily{width:100%;margin-bottom:8px}.pi-note,.pi-warning{color:var(--muted);margin:4px 0 8px}.pi-warning{color:var(--ink);font-weight:600}@container game (orientation:landscape){.pi-surface{grid-template-columns:max(0px,min(100cqh - 96px,100cqw - 268px)) minmax(150px,220px);justify-content:center;align-items:center;column-gap:16px}.pi-board{--board-chrome:96px;--board-min-cell:14px;grid-area:1/1/span 2}.pi-surface.is-flow .pi-board{--board-chrome:134px}.pi-tools,.pi-end{flex-direction:column;align-self:end}.pi-message{border-radius:14px;align-self:start}}@container game (orientation:landscape) and (height<=320px){.pi-message{display:none}}@media (prefers-reduced-motion:reduce){.pi-tile,.pi-art,.pi-board,.pi-liquid line,.pi-liquid circle,.pi-gloss line,.pi-gloss circle{transition:none}.pi-tile.is-next,.pi-tile.is-pouring :is(.pi-liquid,.pi-gloss) :is(line,circle),.pi-warn circle,.pi-board.is-flood,.pi-board.is-flood .pi-tile,.pi-board.is-flood .pi-shine :is(line,circle),.pi-board.is-flood .pi-pump-ring{animation:none}.pi-tile.is-pouring :is(.pi-liquid,.pi-gloss) line{stroke-dasharray:none}}