.pipes { --n: 3; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; width: min(100%, 380px); margin: 16px auto 0; padding: 8px; border: 5px solid var(--ink); border-radius: 20px; background: color-mix(in srgb, var(--ink) 14%, var(--surface)); }
.p-cell { display: block; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 12px; background: var(--surface); cursor: pointer; }
.p-cell svg { display: block; width: 100%; height: 100%; }
.p-cell:active { transform: scale(.95); }
.p-cell .pipe-dry { stroke: #8a96a0; }
.p-cell .pipe-wet { stroke: var(--water); }
.p-cell .pipe-edge { stroke: var(--ink); }
.p-cell .src-ring { fill: var(--water); stroke: var(--ink); }
.p-cell .joint-edge { fill: var(--ink); stroke: none; }
.p-cell .wet-fill { fill: var(--water); stroke: none; }
.p-cell .dry-fill { fill: #8a96a0; stroke: none; }
.p-cell.wet { background: color-mix(in srgb, var(--water) 16%, var(--surface)); }
body.theme-high .p-cell .pipe-dry { stroke: #fff; }
body.theme-high .p-cell .dry-fill { fill: #fff; }
body.theme-high .p-cell { background: #101010; }
body.theme-high .p-cell.wet { background: #002a45; }
body.theme-light .p-cell .pipe-dry { stroke: #6b7782; }
body.theme-light .p-cell .dry-fill { fill: #6b7782; }