:root{color:#e7eff2;font-synthesis:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#101b22;font-family:Inter,Segoe UI,Noto Sans JP,sans-serif}*{box-sizing:border-box}body{margin:0}#app{max-width:540px;margin:auto;padding:16px 12px 24px}header{justify-content:space-between;align-items:center;gap:6px;margin-bottom:12px;display:flex}h1{letter-spacing:-.04em;white-space:nowrap;margin:0;font-size:clamp(18px,5.5vw,28px)}h1 span{color:#53d5e9}.eyebrow{color:#9eb2c0;white-space:nowrap;margin:0;font-size:clamp(9px,2.2vw,11px)}h2{letter-spacing:.15em;color:#9eb2c0;font-size:11px}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:#233743;border:1px solid #415965;border-radius:6px;min-height:44px;padding:10px 16px}button:hover:not(:disabled){background:#335361;border-color:#60d7e6}button:focus-visible{outline-offset:3px;z-index:3;outline:3px solid #ffd07d}button:disabled{cursor:default;opacity:.45}main{grid-template-columns:minmax(0,1fr);gap:12px;display:grid}.status-bar{align-items:center;min-height:24px;display:flex}#status{color:#5cdeee;font-variant-numeric:tabular-nums}#status[data-state=failed]{color:#ff9388}#status[data-state=complete]{color:#b7eb9d}.board-frame{margin:18px 28px 22px;position:relative}#board{background:#172731;border:1px solid #4c6370;display:grid}.cell{aspect-ratio:1;background:#1b2d37;border:1px solid #304550;border-radius:0;min-width:0;min-height:0;padding:0;position:relative;overflow:hidden}.cell:disabled{opacity:1}.cell:empty:after{content:"·";color:#405764}.cell:not(:disabled):hover{background:#315365}.cell svg{width:100%;height:100%;display:block}.cell.wall{color:#8f9fa8;background:repeating-linear-gradient(135deg,#45515a 0 5px,#38454e 5px 10px);font-size:24px}.pipe-border{fill:none;stroke:#7e939e;stroke-width:34px;stroke-linejoin:round}.pipe-inner{fill:none;stroke:#233e4a;stroke-width:22px;stroke-linejoin:round}.bridge{fill:none;stroke:#d6e2e7;stroke-width:3px}#water,#ports{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.water-trail{fill:none;stroke:#43cfe7;stroke-width:12px;stroke-linejoin:round;opacity:.85}.water-head{fill:#e7fcff;stroke:#41d9f1;stroke-width:5px}.stream-1 .water-trail,.stream-1 .water-head{stroke:#e486ff}.water-head.failure{fill:#ffafa0;stroke:#ef665f}.port{background:#18262f;border:1px solid;border-radius:3px;padding:3px 4px;font-size:10px;font-weight:800;position:absolute;transform:translate(-50%,-50%)}.port.top{transform:translate(-50%,-100%)}.port.bottom{transform:translate(-50%)}.port.left{transform:translate(-100%,-50%)}.port.right{transform:translateY(-50%)}.in{color:#5ae2ec}.out{color:#ffcb7d}.in.stream-1{color:#e486ff}.panel{background:#192932;border:1px solid #304550;border-radius:10px;min-width:0;padding:12px}h2{margin:0 0 16px}#queue{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;grid-template-rows:subgrid;grid-row:1/span 3;align-items:start;gap:0 8px;display:grid}.queue-area{grid-template-rows:auto auto auto;grid-template-columns:minmax(0,3fr) minmax(44px,1fr);align-items:start;gap:0 8px;margin-inline:28px;display:grid}.queue-piece{text-align:center;grid-template-rows:subgrid;grid-row:1/span 3;row-gap:0;min-width:0;display:grid}.piece-preview{aspect-ratio:1;background:#192c36;border:2px solid #0000;border-radius:6px;width:100%;max-width:64px;margin:auto;overflow:hidden}.piece-preview svg{opacity:.7;width:100%;height:100%;display:block}.queue-piece.now .piece-preview{background:#243944;border-color:#53d5e9}.queue-piece.now svg{opacity:1}.queue-piece h3{color:#99afbc;margin:0 0 8px;font-size:10px}.queue-piece.now h3{color:#63e1ef}#discard{letter-spacing:.02em;width:100%;min-height:32px;margin-top:4px;padding:4px 0;font-size:8px}#fast-flow{color:#ffce84;border-color:#d3a861;grid-area:2/2;align-self:center;min-height:48px;padding:6px 2px;font-size:10px;line-height:1.4}#fast-flow[aria-pressed=true]{background:#614b2c}#undo{grid-area:3/2;min-height:32px;margin-top:4px;padding:4px 0;font-size:9px}.game-actions{align-items:stretch;gap:6px;display:flex}.game-actions>button{white-space:nowrap;flex:1;min-width:0;padding:8px 6px;font-size:11px}.inlet-control{flex-direction:column;align-items:center;gap:3px;font-size:10px;display:flex}.inlet-control>div{gap:3px;display:flex}.inlet-control button{min-width:32px;padding:8px 6px}.inlet-control button[aria-pressed=true]{color:#101b22;background:#53d5e9;border-color:#53d5e9}#start,#replay{width:100%}.primary{color:#0b2933;background:#47ccdf;font-weight:700}.scoreboard{grid-template-columns:1fr 1fr;gap:16px;display:grid}dl{margin:0}dl div{border-bottom:1px solid #354853;justify-content:space-between;align-items:baseline;gap:6px;padding:7px 0;display:flex}dt{color:#a4bac6;font-size:11px}dd{font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;font-size:clamp(12px,3vw,16px)}#replay{margin-top:16px}[hidden]{display:none!important}