#ph .ph-pressure { margin: 6px 0; padding: 8px; border: 1px solid var(--rule); background: var(--paper-warm); }
#ph .ph-pressure h3 { margin: 0 0 5px; font-size: 12pt; }
#ph .ph-pressure p { margin: 5px 0; }
#ph .ph-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#ph .ph-controls button { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 3px; padding: 7px 9px; font: inherit; cursor: pointer; }
#ph .ph-controls button[aria-pressed="true"] { color: var(--paper); background: var(--guide-red-deep); }
#ph .ph-controls button:focus-visible { outline: 3px solid var(--guide-red); outline-offset: 2px; }
#ph .ph-circuit { display: block; width: 100%; max-width: 460px; height: auto; margin: auto; color: var(--ink); }
#ph .ph-circuit text { font: 15px Arial, sans-serif; fill: var(--ink); }
#ph .ph-circuit .ph-major { font-weight: 700; font-size: 17px; }
#ph .ph-flow-line { stroke: var(--guide-red-deep); stroke-width: 3; stroke-dasharray: 7 7; animation: ph-forward 1.5s linear infinite; animation-play-state: paused; }
#ph .ph-pressure[data-running="true"] .ph-flow-line { animation-play-state: running; }
#ph .ph-circuit rect { fill: var(--paper); stroke: var(--rule); }
#ph .ph-print-cases { width: 100%; border-collapse: collapse; margin-top: 5px; }
#ph .ph-print-cases th, #ph .ph-print-cases td { border: 1px solid var(--rule-hair); padding: 3px 5px; text-align: left; }
#ph .ph-case-note { min-height: 2.8em; }
#ph .ph-vq { margin: 6px 0; padding: 7px; border: 1px solid var(--rule); }
#ph .ph-vq img { display: block; max-width: 100%; width: 470px; height: auto; margin: 0 auto 6px; }
#ph .ph-vq figcaption { font-size: 8pt; line-height: 1.35; }
#ph .ph-vq-fullsize { display: inline-block; padding: 7px 0; }
@media screen {
  #ph .band { flex-wrap: wrap; }
  #ph .band h2, #ph .band .tag { white-space: normal; min-width: 0; }
  #ph .band .tag { max-width: 100%; }
}
@keyframes ph-forward { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { #ph .ph-pressure .ph-flow-line { animation: none; } }
@media print {
  #ph .ph-controls, #ph .ph-circuit, #ph .ph-case-note { display: none; }
  #ph .ph-pressure { padding: 4px 6px; margin: 4px 0; font-size: 6.5pt; }
  #ph .ph-pressure h3 { font-size: 8pt; }
  #ph .ph-pressure .ph-print-cases { font-size: 6.3pt; }
  #ph .ph-vq { padding: 4px; }
  #ph .ph-vq img { width: 245px; }
  #ph .ph-vq figcaption { font-size: 6.2pt; line-height: 1.15; }
  #ph .ph-vq-fullsize { display: none; }
  #ph .ph-flow-line { animation: none; }
}