/* A bespoke illustrative process, drawn in SVG and animated locally. */
.process-live { margin: 0; min-width: 0; --signal: #80e5d4; }
.process-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; border-bottom: 1px solid #34535e; padding-bottom: 15px; }
.process-heading h3 { font-size: 1.35rem; }
.process-heading>span { font-size: .68rem; color: #a9c2c8; }
.process-scene { width: 100%; height: auto; display: block; overflow: visible; margin: 20px 0 8px; }
.process-scene text { font-family: "SINC Sans", Arial, sans-serif; }
.scene-note { fill: #b0c9d1; font-size: 12px; }
.scene-label { fill: #8bcec8; font-size: 12px; }
.scene-title { fill: #e5f1f1; font-size: 15px; font-weight: 600; }
.scene-value { fill: #b6f4e8; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plant-pipe { fill: none; stroke: #3e6370; stroke-width: 9; stroke-linejoin: round; }
.liquid-flow { fill: none; stroke: #8bcacb; stroke-width: 2; stroke-dasharray: 3 15; animation: liquid-circulation 6s linear infinite; }
.tank-foot { stroke: #728f99; stroke-width: 7; }
.surface-wave { animation: water-ripple 3.5s ease-in-out infinite alternate; }
.pump-rotor { transform-origin: 107px 345px; animation: pump-turn 4s linear infinite; }
.sensor-node { fill: #14333e; stroke: var(--signal); stroke-width: 2; }
.signal-track { fill: none; stroke: #385766; stroke-width: 1.5; }
.signal-data, .signal-advice, .signal-control { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 18; animation: transmit-data 2.4s linear infinite; }
.signal-data { stroke: var(--signal); }
.signal-advice { stroke: #e3b879; animation-duration: 3s; }
.signal-control { stroke: #aac7ee; animation-duration: 2.8s; }
.analysis-box, .plc-box { fill: #13313e; stroke: #456e7d; }
.analysis-baseline { stroke: #395663; stroke-width: 1; }
.process-trend { fill: none; stroke: var(--signal); stroke-width: 1.5; }
.inference-links { fill: none; stroke: #619b99; stroke-width: 1; }
.inference-nodes { fill: #9ae9d9; }
.inference-nodes circle { animation: inference-pulse 2.6s ease-in-out infinite; }
.inference-nodes circle:nth-child(2n) { animation-delay: .7s; }
.inference-nodes circle:nth-child(3n) { animation-delay: 1.4s; }
.plc-led { fill: var(--signal); }
.process-live[data-phase="detect"], .process-live[data-phase="analyze"] { --signal: #e6b978; }
.process-live[data-phase="analyze"] .analysis-box { stroke: #b89965; }
.process-live[data-phase="control"] .control-valve path { stroke: #a9d1ff; }
.process-live figcaption { border-top: 1px solid #34535e; padding-top: 15px; }
.process-state { color: #d4eee9; font-size: .96rem; min-height: 1.65em; }
.process-explanation { color: #adc6cd; font-size: .82rem; margin-top: 7px; }
.process-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 18px; }
.process-actions[hidden] { display: none; }
.process-actions button { font-size: .79rem; padding: 9px 13px; border: 1px solid #60828d; border-radius: 2px; color: #e2f4f1; background: transparent; cursor: pointer; min-height: 44px; }
.process-actions button:hover { background: #203f4d; }
.process-actions .process-pause { border-color: transparent; padding-inline: 0; color: #b4cbd1; text-decoration: underline; text-underline-offset: 4px; }
.process-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.process-live[data-playing="false"] .process-scene * { animation-play-state: paused; }
@keyframes transmit-data { to { stroke-dashoffset: -100; } }
@keyframes liquid-circulation { to { stroke-dashoffset: -108; } }
@keyframes inference-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes water-ripple { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@keyframes pump-turn { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .process-live { max-width: 550px; width: 100%; margin-inline: auto; } .process-state { min-height: 3.3em; } }
@media (max-width: 400px) { .process-heading { gap: 8px; } .process-heading h3 { font-size: 1.2rem; } .process-heading>span { font-size: .61rem; } .process-actions { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .process-scene * { animation: none !important; } }