/* The illustration and live screen share one coordinate space. The projective
   transform matches the four inner glass corners; no animation leaves the bezel. */
.hero-control{width:100%;margin:0;min-width:0;align-self:center}
.hero-control:before{display:none}
.monitor-scene{display:block;width:100%;height:auto;overflow:hidden;mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 94%,transparent 100%),linear-gradient(90deg,#000 96%,transparent 100%);mask-composite:intersect}
.monitor-screen-plane{position:relative;width:1536px;height:1024px;overflow:hidden}
.control-display{position:absolute;left:0;top:0;width:600px;height:500px;transform-origin:0 0;transform:matrix3d(.4613828568,-.180802669,0,-.0003083462,-.1677844839,.775670768,0,-.000083927,0,0,1,0,812,278,0,1);background:linear-gradient(145deg,#102b42,#061b2c 75%);border-radius:3px;overflow:hidden;border:1px solid #33536b;color:#d9eafa}
.control-display-header{display:flex;align-items:center;justify-content:space-between;padding:12px 23px 7px;height:51px;border-bottom:1px solid #365570}
.display-eyebrow{display:block;color:#98c7ef;font-size:20px;font-weight:600;letter-spacing:2px;line-height:1.5}
.control-display-header h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.display-tag{font-size:17px;color:#9bb6cd;white-space:nowrap;letter-spacing:1px}
.process-screen{padding:11px 23px 4px;height:229px;overflow:hidden}
.visual-section-label{display:flex;align-items:center;justify-content:space-between;gap:14px}
.visual-section-label h3{font-size:25px;line-height:1.5;font-weight:550;letter-spacing:0;color:#d4e6f6;white-space:nowrap}
.visual-section-label>span{display:none}
.process-schematic{width:100%;height:180px;display:block;margin:3px 0 0}
.pipe-base{stroke:#375d7d;stroke-width:5}
.pipe-flow{stroke:#84ceff;stroke-width:2.5;stroke-dasharray:7 17}
.pipe-feedback{stroke:#528fc6;stroke-dasharray:5 15;stroke-width:2}
.process-legend{display:none}
.control-charts{display:grid;grid-template-columns:1.7fr 1fr;height:220px;border-top:1px solid #365570}
.control-trend,.control-load{min-width:0;padding:8px 19px 6px;overflow:hidden}
.control-load{border-left:1px solid #365570}
.control-load .visual-section-label h3{font-size:22px}
.trend-plot,.load-plot{display:block;width:100%;height:105px;margin-top:3px;overflow:hidden}
.chart-grid{stroke:#32516d;stroke-width:1;fill:none}
.signal-a,.signal-b{fill:none;stroke-width:2.8;stroke-linejoin:round;stroke-linecap:round}
.signal-a{stroke:#91d5ff}.signal-b{stroke:#5e91dc;stroke-dasharray:6 4;stroke-width:2.6}
.signal-legend{display:flex;flex-direction:column;gap:0;font-size:26px;line-height:1.25;color:#c3d9eb;margin-top:2px;letter-spacing:0;white-space:nowrap}
.signal-legend span:before{content:"";width:22px;display:inline-block;border-top:3px solid #91d5ff;vertical-align:middle;margin-right:10px}
.signal-legend span+span:before{border-top:3px dashed #5e91dc}
.profile-note{font-size:19px;line-height:1.5;color:#a3bdd5;margin-top:8px;letter-spacing:0}
.hero-control .control-caption{position:static;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding-inline:4px;letter-spacing:0;text-align:left;color:#aec6de}
.hero-control .control-caption .visual-status{display:block;font-size:.8125rem;line-height:1.6;margin:0;letter-spacing:0;color:#c4d9eb}
.control-caption p{font-size:.75rem;line-height:1.65;color:#95adc5;letter-spacing:-.025em;margin-top:2px}
.visual-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:44px;padding:9px 12px;border:1px solid #587d9f;border-radius:4px;color:#c5dcf1;background:#102b44;font-size:.875rem;line-height:1.5;transition:background .2s,border-color .2s}
.visual-toggle[hidden]{display:none}.visual-toggle:hover,.visual-toggle:focus-visible{background:#204464;border-color:#9cbfdc}
.visual-toggle:disabled{cursor:default;background:transparent;border-color:#3d5b76;color:#a2b9ce}
.visual-toggle i{display:block;width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.visual-toggle[data-paused=true] i{border:0;width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.visual-toggle:disabled i{display:none}
.hero-control .visual-toggle span{font-size:inherit;margin:0;line-height:inherit}
@media(min-width:1001px){.hero-main{gap:24px;grid-template-columns:.95fr 1.12fr}.hero-control{padding-top:0}}
@media(max-width:1000px) and (min-width:601px){.hero-main{grid-template-columns:1fr 1.08fr;gap:12px}.hero-control .control-caption{flex-wrap:wrap;gap:10px}.visual-toggle{margin-left:auto}}
@media(max-width:600px){.hero-control{width:100%;margin:18px 0 0;padding:0}.hero-control .control-caption{margin-top:1px;gap:12px;padding-inline:0;flex-wrap:wrap}.visual-toggle{margin-left:auto}.control-caption p{max-width:none}}
@media(prefers-reduced-motion:reduce){.visual-toggle{transition:none}}
@media print{.hero-control{display:block;max-width:650px;margin:25px auto}.visual-toggle{display:none}.hero-control .control-caption{position:static}}

.hero-control #control-visual-description{font-size:.8125rem;line-height:1.6;color:#c4d9eb;letter-spacing:0;margin:0}