.pipes-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0;color:#264e63}
.pipes-help{font-size:14px;line-height:1.5;color:#615548}
.pipes-board{display:grid;grid-template-columns:repeat(var(--pipes-size),minmax(0,1fr));width:100%;max-width:480px;margin:18px auto;border:3px solid #857864;border-radius:12px;overflow:hidden;background:#857864;gap:1px;touch-action:manipulation}
.pipes-board .pipes-cell{position:relative;display:block;width:100%;min-width:0;min-height:0;aspect-ratio:1;padding:0;border:0;border-radius:0;background:#faf5eb;cursor:pointer;touch-action:manipulation}
.pipes-cell svg{display:block;width:100%;height:100%;overflow:hidden}
.pipes-outline{fill:none;stroke:#7b817f;stroke-width:30;stroke-linecap:round;stroke-linejoin:round}
.pipes-inner{fill:none;stroke:#d8dddb;stroke-width:17;stroke-linecap:round;stroke-linejoin:round}
.pipes-joint{fill:#a7b1af;stroke:#7b817f;stroke-width:3}
.pipes-wet .pipes-outline{stroke:#206885}.pipes-wet .pipes-inner{stroke:#73d6f2}.pipes-wet .pipes-joint{fill:#b7eefb;stroke:#206885}
.pipes-board .pipes-wet{background:#e6f5f8}.pipes-board .pipes-endpoint{box-shadow:inset 0 0 0 2px #b97625}
.pipes-marker{position:absolute;top:2px;left:2px;padding:1px 3px;border-radius:3px;background:#fff2d0;color:#5b390c;font:800 clamp(8px,2.5vw,11px)/1.3 system-ui;pointer-events:none}
.pipes-board .pipes-cell:focus-visible{outline:3px solid #b94d18;outline-offset:-4px;z-index:1}
.pipes-board .pipes-cell:disabled{opacity:1;cursor:default}
@media(hover:hover){.pipes-board .pipes-cell:hover:not(:disabled){background:#ffe8bb}}