.pipe-studio {
  --pipe-bg: #12394f; --pipe-ink: #e1f1f7; --pipe-muted: #a1bfce; --pipe-line: #47758c;
  flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--pipe-bg); color: var(--pipe-ink); border: 1px solid #456b82; border-radius: 0 5px 5px 5px;
  font-family: 'Consolas', 'Noto Sans JP', sans-serif;
}
.pipe-studio button { font: inherit; color: inherit; }
.pipe-titlebar { display: flex; align-items: center; gap: 10px; flex: none; min-height: 46px; padding: 0 16px; border-bottom: 1px solid #42687e; background: #0d2b3d; font-size: 12px; }
.pipe-titlebar strong { font-size: 14px; letter-spacing: .08em; }
.pipe-titlebar > span:last-of-type { color: var(--pipe-muted); }
.pipe-drawing-icon { color: #a4c8d9; font-size: 25px; }
.pipe-titlebar button { margin-left: auto; min-height: 40px; padding: 8px 0 8px 10px; background: none; border: 0; color: #c6e2ef; font-size: 12px; }
.pipe-drawing { position: relative; width: min(100%, calc((100dvh - 365px) * 1.238)); min-width: min(100%, 320px); max-width: 900px; aspect-ratio: 520/420; align-self: center; flex: none; margin-block: auto; }
.pipe-blueprint { display: block; width: 100%; height: 100%; stroke: none; }
.drawing-border { fill: none; stroke: #91bdd244; stroke-width: 1; }
.drawing-annotations { font: 9px 'Consolas', monospace; fill: #93b5c5; letter-spacing: .06em; }
.drawing-annotations path { stroke: #82a8ba; stroke-width: 1; }
.pipe-wall { fill: none; stroke: #7393a3; stroke-width: 20; stroke-linecap: butt; stroke-linejoin: round; }
.pipe-core { fill: none; stroke: #dfecf0; stroke-width: 11; stroke-linecap: butt; stroke-linejoin: round; }
.joint-housing { fill: #1a485f; stroke: #6896ac; stroke-width: 1.5; }
.joint-rim { fill: none; stroke: #2e6179; stroke-width: 3; stroke-dasharray: 2 7; }
.joint-pin { fill: #e7f4f7; stroke: #7d9caa; stroke-width: 2; }
.joint-turn { transform-origin: 0 0; transition: transform .16s ease-out; }
.pipe-terminals rect { fill: #e1edf2; stroke: #79a6bb; stroke-width: 2; }
.pipe-terminals path { fill: #285b73; }
.pipe-terminals text { font: 18px 'Noto Sans JP', sans-serif; fill: #d7ecf7; }
.pipe-direction { fill: #89b6c9; font: 20px sans-serif; }
.machine-body > rect:first-child { fill: #1c4256; stroke: #8eb1c2; stroke-width: 2; }
.machine-body > path { fill: none; stroke: #7da1b3; stroke-width: 1.5; }
.machine-body > text { fill: #c5dfe9; font: 12px 'Consolas', monospace; }
.machine-display { fill: #0c2b3d; stroke: #436b80; stroke-width: 1; }
.machine-led { fill: #f4d27c; }
.machine-power-text { font-size: 10px !important; fill: #f5d78e !important; }
.power-off .machine-led { fill: #566b75; }
.power-off .machine-power-text { fill: #9bafb9 !important; }
.machine-body .machine-internal { stroke: #89aebe66; stroke-width: 5; stroke-dasharray: 3 6; }
.machine-body .machine-port-label { fill: #e9f6fb; font: 18px 'Consolas', monospace; }
.pipe-wire { fill: none; stroke: #e8c67c; stroke-width: 3; }
.power-off .pipe-wire { stroke: #7e94a1; stroke-dasharray: 5 6; }
.power-socket rect { fill: #315a6f; stroke: #c8d5d8; stroke-width: 1.5; }
.power-socket path { fill: none; stroke: #e8d09b; stroke-width: 2; }
.pipe-gauge { fill: #e1ebee; stroke: #6d95a9; stroke-width: 1.5; }
.pipe-gauge > path:first-of-type { fill: none; stroke: #43687b; stroke-width: 1.2; }
.pipe-gauge .gauge-needle { stroke: #b15e50; stroke-width: 2.5; fill: none; }
.pipe-gauge text { fill: #4a6878; font: 7px 'Consolas', monospace; text-anchor: middle; stroke: none; }
.pipe-coffee-cup { fill: none; stroke: #dcebf1; stroke-width: 2; }
.coffee-liquid { fill: #9d6246; stroke: none; opacity: 0; transition: opacity .18s; }
.test-ready .coffee-liquid { opacity: 1; }
.pipe-flow { fill: none; stroke: #63d4f6; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pipe-flow.is-visible { opacity: 1; }
.pipe-leak { fill: #8ce2fb; }
.pipe-leak ellipse { opacity: .35; }
.pipe-knob { position: absolute; width: 15.5%; aspect-ratio: 1; padding: 0; transform: translate(-50%, -50%); border: 1px solid transparent; border-radius: 50%; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pipe-knob:hover:not(:disabled) { border-color: #d6f3ff; background: #d2edff09; }
.pipe-knob:active:not(:disabled) { background: #c4e6fa1c; }
.pipe-knob > span { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; white-space: nowrap; color: #d4e9f2; font: 12px 'Consolas', sans-serif; }
.pipe-knob b { font-size: 17px; font-weight: 400; color: #9ec7d9; }
.workspace[data-stage=pipes] .pipe-studio button:focus-visible { outline: 3px solid #f7d78c; outline-offset: 3px; }
.pipe-test-readout { display: flex; align-items: center; gap: 9px; flex: none; min-height: 42px; padding: 8px 18px; border-top: 1px solid #355d73; color: #c0dae6; font: 12px/1.6 var(--font); }
.pipe-test-light { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #7f9cae; }
.test-ready .pipe-test-light { background: #8ad8ee; }
.test-leaking .pipe-test-light { background: #f1c17a; }
.test-power .pipe-test-light { background: #e1a7ac; }
.is-testing .pipe-test-light { background: #8ad8ee; }
.pipe-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 10px 16px 14px; background: #0d2b3d; border-top: 1px solid #355d73; }
.pipe-controls button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid #7098ac; border-radius: 5px; font: 600 13px var(--font); }
.pipe-controls .pipe-test-button { color: #173b50; background: #f1d18b; border-color: #f1d18b; min-width: 180px; }
.pipe-test-button:hover:not(:disabled) { background: #ffe1a0; }
.pipe-controls .pipe-power-button { color: #e4d4a3; background: #204557; border-color: #718573; }
.pipe-power-button[aria-pressed=false] { color: #a9bac2; border-color: #506f80; }
.pipe-controls svg { width: 19px; height: 19px; }
@media (max-width: 900px) {
  .pipe-drawing { width: 100%; min-width: 0; max-width: 520px; margin-block: auto; }
  .pipe-titlebar { min-height: 44px; padding-inline: 12px; }
  .pipe-test-readout { min-height: 44px; padding-inline: 12px; font-size: 12px; }
  .pipe-controls { gap: 8px; padding: 10px 12px; }
  .pipe-controls button { font-size: 12px; padding: 10px 12px; }
  .pipe-controls .pipe-test-button { min-width: 0; flex: 1; }
  .pipe-knob > span { font-size: 11px; }
  .pipe-knob b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .joint-turn, .coffee-liquid { transition: none; } }