.art { overflow: visible; }
.art .g-fill { fill: var(--glass-back); }
.art .g-line { fill: none; stroke: var(--glass-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.art .liq { fill: var(--u); }
.art .liq-top { fill: var(--glass-hi); opacity: 0.45; }
.art .steel { fill: var(--steel); }
.art .steel-line { fill: none; stroke: var(--steel); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art .thin { stroke-width: 2.5; }
.art .sign { fill: none; stroke: var(--face); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.art .shine { fill: none; stroke: var(--glass-hi); stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
.art .face circle { fill: var(--face); }
.art .face path { fill: none; stroke: var(--face); stroke-width: 1.7; stroke-linecap: round; }
.art .face .blush { fill: var(--blush); }
.art .xtal { fill: var(--crystal); }
.art .bubble { fill: none; stroke: var(--bubble); stroke-width: 1.2; }
.art .electrode { fill: var(--steel-shade); }
.art .tray { fill: none; stroke: var(--glass-line); stroke-width: 1.6; stroke-linecap: round; }
.art .steam circle { fill: var(--steam); }
.art .spark { fill: var(--unit-final); }
.art .gauge { fill: var(--gauge-face); stroke: var(--steel); stroke-width: 4; }
.art .tick { fill: none; stroke: var(--steel-shade); stroke-width: 2; stroke-dasharray: 1.5 4.6; }
.art .needle { fill: none; stroke: var(--face); stroke-width: 2.4; stroke-linecap: round; }
.art .valve { fill: var(--steel); stroke: var(--glass-back); stroke-width: 1; stroke-linejoin: round; }
.art .bead-1 { fill: var(--bead-1); }
.art .bead-2 { fill: var(--bead-2); }
.art .bead-3 { fill: var(--bead-3); }
.art .bead-4 { fill: var(--bead-4); }
.art .steam { animation: steam 5s ease-in-out infinite alternate; }
.art .bubble { animation: bubble 2.4s ease-in infinite; }
.art .bubble:nth-of-type(2) { animation-delay: 0.8s; }
.art .bubble:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes steam { to { transform: translate(3px, -4px); opacity: 0.7; } }
@keyframes bubble { from { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }

.plant { position: relative; max-width: 1376px; margin: var(--sp-12) auto 0; padding: 0 var(--sp-3) var(--sp-8); }
.plant::before { content: ""; position: absolute; top: var(--node-art-h); bottom: 0; left: -100vw; right: -100vw; background: var(--ground); border-top: 2px solid var(--ground-line); z-index: -1; }
.backdrop { position: absolute; left: 50%; transform: translateX(-50%); width: 1440px; height: 420px; bottom: calc(100% - var(--node-art-h)); z-index: -2; }
.backdrop .star { fill: var(--star); }
.backdrop .moon { fill: var(--moon); }
.backdrop .moon-glow { fill: var(--moon-glow); }
.backdrop .moon-face { fill: none; stroke: var(--moon-face); stroke-width: 2; stroke-linecap: round; }
.backdrop .cloud { fill: var(--cloud); }
.backdrop .hill-far { fill: var(--hill-far); }
.backdrop .hill-near { fill: var(--hill-near); }
.backdrop .far { fill: var(--works-far); }
.backdrop .lit { fill: var(--works-window); }
.plant-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(min-content, 1fr)); }
.node { display: flex; flex-direction: column; text-decoration: none; grid-row: 1; }
.node-art { position: relative; height: var(--node-art-h); display: flex; justify-content: center; contain: inline-size; }
.node-art .art { position: relative; height: 100%; width: auto; z-index: 1; transition: transform 0.2s ease; transform-origin: 50% 96%; }
.node:hover .art, .node:focus-visible .art { transform: scale(1.06) rotate(-2deg); }
.node-art::before { content: ""; position: absolute; left: 0; right: 0; top: calc(76.92% - var(--pipe-w) / 2); height: var(--pipe-w); background: var(--glass-back); border-block: 1.5px solid var(--glass-line); }
.node-art::after { content: ""; position: absolute; left: 0; right: 0; top: calc(76.92% - var(--pipe-w) / 2 + 3.5px); height: calc(var(--pipe-w) - 7px); background-image: repeating-linear-gradient(90deg, transparent 0 14px, var(--pipe-glint) 14px 20px), linear-gradient(90deg, var(--u-in), var(--u)); animation: flow-x 0.9s linear infinite; }
@keyframes flow-x { to { background-position: 20px 0, 0 0; } }
.node.first .node-art::before, .node.first .node-art::after { left: 50%; }
.node.last .node-art::before, .node.last .node-art::after { right: 50%; }
.plate { flex: 1; display: flex; flex-direction: column; margin: var(--sp-3) var(--plate-gap) 0; padding: var(--sp-2) var(--plate-pad) var(--sp-3); background: var(--bg-card); border: 1px solid var(--line-2); border-top: 2px solid var(--u); border-radius: var(--r-md); font-size: var(--micro-size); line-height: 17px; color: var(--ink-4); }
.node:hover .plate { border-color: var(--u); }
.plate-k { font: 500 var(--micro-size)/18px var(--mono); color: var(--u); }
.plate-name { font-weight: 600; font-size: var(--plate-name-size); line-height: 17px; color: var(--ink); margin-bottom: var(--sp-1); hyphens: manual; overflow-wrap: normal; }
.plate-meta:last-child { margin-top: auto; }
.lane-cap { grid-row: 2; margin: var(--sp-4) var(--plate-gap) 0; padding-top: var(--sp-2); border-top: 1px solid var(--line-3); position: relative; font-size: var(--tiny-size); line-height: var(--tiny-line); color: var(--ink-3); text-align: center; }
.lane-cap::before, .lane-cap::after { content: ""; position: absolute; top: -6px; height: 6px; width: 1px; background: var(--line-3); }
.lane-cap::before { left: 0; }
.lane-cap::after { right: 0; }

.plant.bare { margin-top: 0; padding-bottom: 0; position: absolute; left: 0; right: 0; bottom: var(--sp-6); max-width: none; }
.plant.bare .plant-grid { max-width: 1340px; margin: 0 auto; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.plant.bare { --node-art-h: var(--bare-art-h); }
.plant.bare::before { bottom: calc(-1 * var(--sp-6)); }

.pipe { position: absolute; top: 0; bottom: calc(var(--end-w) * 102 / 64); left: calc(var(--tube-w) / -2); width: var(--tube-w); background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--glass-line); -webkit-mask-image: linear-gradient(to bottom, transparent, black 48px); mask-image: linear-gradient(to bottom, transparent, black 48px); overflow: hidden; }
.pipe-liquid { position: absolute; left: 3.5px; right: 3.5px; top: 0; height: var(--p, 0px); max-height: 100%; border-radius: 0 0 var(--r-pill) var(--r-pill); background-image: repeating-linear-gradient(180deg, transparent 0 18px, var(--pipe-glint) 18px 26px), linear-gradient(180deg, var(--rail-start), var(--tint-1) 10%, var(--tint-2) 36%, var(--tint-3) 60%, var(--tint-4) 84%, var(--unit-final)); background-size: 100% 26px, 100% var(--track-h, 100%); background-repeat: repeat-y, no-repeat; animation: flow-y 1.1s linear infinite; }
@keyframes flow-y { to { background-position: 0 26px, 0 0; } }
.rail-end { position: absolute; bottom: 0; left: calc(var(--end-w) / -2); width: var(--end-w); height: calc(var(--end-w) * 130 / 64); --u: var(--unit-final); }
.rail-end .liq, .rail-end .liq-top, .rail-end .face { opacity: 0; transition: opacity 0.5s ease; }
.rail-end.full .liq, .rail-end.full .face { opacity: 1; }
.rail-end.full .liq-top { opacity: 0.45; }
.bulb { display: block; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(var(--glass), var(--glass)), var(--bg); box-shadow: inset 0 0 0 1.5px var(--glass-line); position: relative; }
.bulb::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--t); transform: scale(0); transition: transform 0.35s ease; }
.bulb::after { content: ""; position: absolute; left: 8px; top: 7px; width: 7px; height: 4px; border-radius: 50%; background: var(--glass-hi); transform: rotate(-30deg); }
.reached .bulb::before { transform: scale(1); }
.unit-head .art { margin-bottom: -4px; }

@media (max-width: 1180px) {
  .plant:not(.bare) { margin-top: calc(var(--sp-12) + 150px); padding-top: var(--sp-6); }
  .plant:not(.bare)::before { top: 0; }
  .plant:not(.bare) .backdrop { bottom: 100%; }
  .plant:not(.bare) .plant-grid { display: flex; flex-direction: column; max-width: 460px; margin: 0 auto; }
  .plant:not(.bare) .node { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-3); }
  .plant:not(.bare) .node-art { height: auto; min-height: 104px; align-items: center; }
  .plant:not(.bare) .node-art .art { height: 92px; }
  .plant:not(.bare) .node-art::before { left: calc(50% - var(--pipe-w) / 2); right: auto; top: 0; bottom: 0; height: auto; width: var(--pipe-w); border-block: 0; border-inline: 1.5px solid var(--glass-line); }
  .plant:not(.bare) .node-art::after { left: calc(50% - var(--pipe-w) / 2 + 3.5px); right: auto; top: 0; bottom: 0; height: auto; width: calc(var(--pipe-w) - 7px); background-image: repeating-linear-gradient(180deg, transparent 0 14px, var(--pipe-glint) 14px 20px), linear-gradient(180deg, var(--u-in), var(--u)); animation-name: flow-y-node; }
  .plant:not(.bare) .node.first .node-art::before, .plant:not(.bare) .node.first .node-art::after { top: 50%; }
  .plant:not(.bare) .node.last .node-art::before, .plant:not(.bare) .node.last .node-art::after { bottom: 50%; }
  .plant:not(.bare) .plate { margin: var(--sp-2) 0; flex: none; align-self: center; }
  .plant:not(.bare) .plate-meta:last-child { margin-top: 0; }
  .plant:not(.bare) .lane-cap { margin: var(--sp-4) 0 var(--sp-2) calc(84px + var(--sp-3)); padding: 0; border: 0; text-align: left; font-weight: 500; color: var(--ink); }
  .plant:not(.bare) .lane-cap::before, .plant:not(.bare) .lane-cap::after { display: none; }
  .plant:not(.bare) .lane-cap.piped::before, .plant:not(.bare) .lane-cap.piped::after { display: block; content: ""; position: absolute; top: calc(-1 * var(--sp-4)); bottom: calc(-1 * var(--sp-2)); height: auto; }
  .plant:not(.bare) .lane-cap.piped::before { left: calc(-42px - var(--sp-3) - var(--pipe-w) / 2); width: var(--pipe-w); background: var(--glass-back); border-inline: 1.5px solid var(--glass-line); }
  .plant:not(.bare) .lane-cap.piped::after { left: calc(-42px - var(--sp-3) - var(--pipe-w) / 2 + 3.5px); right: auto; width: calc(var(--pipe-w) - 7px); background: var(--u); }
}
@keyframes flow-y-node { to { background-position: 0 20px, 0 0; } }