/* One fixed diagram coordinate system on every screen; scale uniformly. */
.field-demo{grid-column:1/-1;min-width:0;margin:2px 0 0;border-top:1px solid #d2deec;padding-top:30px}
.field-demo-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}
.field-eyebrow{display:block;color:#416387;font-size:.75rem;line-height:1.6;margin-bottom:6px}
.field-demo-heading h4{font-size:1.1875rem;line-height:1.6;font-weight:650;letter-spacing:-.035em;margin:0;color:#183956}
.field-static-badge{color:#778aa0;font-size:.6875rem;line-height:1.5;letter-spacing:.055em}
.field-demo-screen{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(225px,1fr);background:#0b233a;border:1px solid #36546f;border-radius:5px;color:#d7e8f7;overflow:hidden}
.field-process{min-width:0;padding:18px 22px 22px}
.field-diagram{display:block;width:100%;height:auto;overflow:visible}

.field-pipe-base{fill:none;stroke:#385e80;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}
.field-flow{fill:none;stroke:#85d1ff;stroke-width:2.5;stroke-dasharray:8 15;stroke-linejoin:round;stroke-linecap:round}
.field-airflow{stroke:#85d1ff;stroke-width:3;stroke-dasharray:10 19}
.field-symbol{stroke:#90bade;stroke-width:2;fill:#153b5c;stroke-linejoin:round;stroke-linecap:round}
.field-symbol .inner-vessel{fill:#102e48;stroke:#678daf}.field-symbol .vessel-lines{fill:none;stroke:#5e88ab;stroke-width:1.5}.field-symbol .vessel-liquid{fill:#285f8b;stroke:none;opacity:.5}.field-symbol .symbol-fill{fill:#75add9;stroke:none}
.field-symbol .fan-ring{fill:#0e2c46;stroke:#5c83a5}.field-symbol .fan-blades{fill:#629ac7;stroke:none}.field-symbol .filter-lines{stroke:#6d93b3;stroke-width:1.5}
.field-symbol .filling-stream{stroke:#84d0ff;stroke-width:2;stroke-dasharray:3 5;fill:none}
.air-zone{stroke:#446887;stroke-width:1.5;fill:#102e48;stroke-dasharray:5 5}
.field-instruments{stroke:#789dbd;stroke-width:1.4;fill:#112e49}.field-instruments path{fill:none;stroke-dasharray:3 4}.field-instruments text{stroke:none;fill:#c6e2fa;text-anchor:middle;font-size:14px;font-family:Arial,sans-serif}
.field-node-key circle{fill:#204567;stroke:#547ba0;stroke-width:1}.field-node-key text{fill:#d0e7fb;text-anchor:middle;font-size:15px;font-family:Arial,sans-serif}
.field-node-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;border-top:1px solid #31516d;padding-top:16px;margin-top:3px;font-size:.8125rem;line-height:1.6;color:#bfd4e7;counter-reset:none}
.field-node-legend li{display:flex;align-items:baseline;gap:8px;min-width:0}.field-node-legend span{font-size:.6875rem;color:#88b8e2;flex:none}
.field-trends{min-width:0;border-left:1px solid #34516c;padding:24px 24px 19px;background:#0d2943;display:flex;flex-direction:column}
.field-trends-title{font-size:.8125rem;color:#94b5d2;line-height:1.6;margin-bottom:12px}
.field-sensor+.field-sensor{margin-top:17px}.field-sensor-label{font-size:.9375rem;line-height:1.6;color:#d3e7f7;overflow-wrap:anywhere}
.field-sparkline{display:block;width:100%;height:73px;margin-top:5px}
.field-chart-grid{fill:none;stroke:#35536e;stroke-width:1}
.field-trace{fill:none;stroke:#91d7ff;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round}.field-trace-1{stroke:#6a9edf;stroke-dasharray:6 4}
.field-time-label{font-size:.6875rem;line-height:1.6;color:#99b7cf;margin-top:13px}
.field-demo-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;padding-top:17px;font-size:.8125rem;line-height:1.8;color:#526e89}
.field-demo-caption>div:first-child{min-width:0;max-width:720px}.field-demo-caption .field-disclaimer{font-size:.75rem;margin-top:4px;color:#71849a}
.field-playback{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}.field-animation-status{font-size:.6875rem;color:#76889c;line-height:1.5}
.field-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 14px;border:1px solid #b8c9dc;border-radius:3px;background:#fff;color:#244a70;font-size:.8125rem;line-height:1.6;transition:background .2s,border-color .2s}
.field-toggle[hidden]{display:none}.field-toggle:hover,.field-toggle:focus-visible{background:#edf4fc;border-color:#5f89b5}.field-toggle:disabled{cursor:default;background:#f3f6fa;color:#7589a0}
.field-toggle i{display:block;width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}.field-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}.field-toggle:disabled i{display:none}
@media(max-width:1000px){.field-demo-screen{grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr)}.field-process{padding:15px}.field-trends{padding:18px}.field-node-legend{gap:10px;font-size:.75rem}.field-demo-caption{gap:18px}.field-static-badge{display:none}}
@media(max-width:700px){.field-demo-screen{grid-template-columns:1fr}.field-trends{border-left:0;border-top:1px solid #34516c;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}.field-trends-title,.field-time-label{grid-column:1/-1}.field-sensor+.field-sensor{margin-top:0}.field-sensor-label{font-size:.8125rem}.field-time-label{margin-top:1px}.field-sparkline{height:65px}.field-trends-title{margin-bottom:3px}.field-demo-caption{display:block}.field-playback{flex-direction:row;justify-content:space-between;align-items:center;margin-top:15px;gap:15px}}
@media(max-width:600px){.field-demo{margin-top:28px;padding-top:24px}.field-demo-heading{margin-bottom:14px}.field-demo-heading h4{font-size:1.0625rem}.field-demo-screen{border-radius:3px}.field-process{padding:14px 15px 17px}.field-node-legend{grid-template-columns:1fr;gap:6px;font-size:.8125rem;padding-top:13px}.field-node-legend li{gap:10px}.field-demo-caption{font-size:.8125rem;padding-top:14px}.field-trends{padding:17px 15px;gap:7px 14px}.field-animation-status{font-size:.6875rem}.field-demo-caption .field-disclaimer{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.field-toggle{transition:none}}
@media print{.field-demo{break-inside:avoid}.field-toggle{display:none}.field-demo-screen{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

.solution-panel{row-gap:32px}

.field-zoom-open{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:9px 15px;border:1px solid #b8c9dc;border-radius:3px;color:#244a70;background:#fff;font-size:.8125rem;line-height:1.6}
.field-zoom-open[hidden]{display:none}.field-zoom-open:hover,.field-zoom-open:focus-visible{background:#edf4fc;border-color:#5f89b5}
.field-diagram{aspect-ratio:600/270;transform:none}
.field-dialog-open{overflow:hidden}
.field-zoom-dialog{width:min(1100px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid #7292b2;border-radius:6px;background:#f5f8fc;color:#183956;overflow:auto;box-shadow:0 24px 80px #06172750}
.field-zoom-dialog::backdrop{background:#061727b8}
.field-zoom-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px 15px}.field-zoom-header>div{min-width:0}.field-zoom-header p{font-size:.75rem;color:#607a95}.field-zoom-header h2{font-size:1.25rem;line-height:1.5;letter-spacing:-.035em;margin:4px 0 0;overflow-wrap:anywhere}
.field-zoom-close,.field-zoom-toolbar button{min-width:44px;min-height:44px;border:1px solid #b4c7dc;background:#fff;color:#244a70;border-radius:3px;padding:8px 13px;font-size:.875rem;line-height:1.6}
.field-zoom-close{flex-shrink:0}.field-zoom-close:hover,.field-zoom-toolbar button:hover{background:#e6effa;border-color:#6d93ba}
.field-zoom-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:0 24px 13px}.field-zoom-toolbar button[data-zoom=out],.field-zoom-toolbar button[data-zoom=in]{font-size:1.25rem;padding:4px 10px}.field-zoom-toolbar output{font-size:.875rem;min-width:4em;text-align:center}.field-zoom-toolbar .field-modal-toggle{margin-left:auto}.field-zoom-toolbar button:disabled{opacity:.65;cursor:default}
.field-zoom-description{padding:0 24px 16px;font-size:.8125rem;line-height:1.8;color:#5d7690}
.field-zoom-viewport{max-height:58dvh;min-height:180px;overflow:auto;overscroll-behavior:contain;touch-action:none;cursor:grab;scrollbar-gutter:stable;background:#0b233a;border-block:1px solid #36546f;padding:10px;outline-offset:-4px}
.field-zoom-canvas{width:900px;max-width:none;margin-inline:auto;color:#bfd4e7}
.field-zoom-canvas .field-diagram{width:100%;max-width:none;height:auto}
.field-zoom-canvas .field-node-legend{grid-template-columns:repeat(3,minmax(0,1fr));font-size:14px;gap:16px;margin:10px 15px 8px;padding-top:12px}.field-zoom-canvas .field-node-legend span{font-size:12px}
.field-zoom-disclaimer{font-size:.75rem;line-height:1.8;color:#6e839a;padding:15px 24px 20px}
@media(max-width:600px){.field-demo-heading{align-items:flex-start;gap:12px}.field-demo-heading>div{min-width:0}.field-zoom-open{padding-inline:10px;max-width:45%;white-space:normal}.field-zoom-dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.field-zoom-header{padding:16px 15px 12px;gap:12px}.field-zoom-header h2{font-size:1.0625rem}.field-zoom-toolbar{padding:0 15px 12px;gap:8px}.field-zoom-toolbar .field-modal-toggle{margin-left:0}.field-zoom-description{padding:0 15px 12px}.field-zoom-disclaimer{padding:13px 15px 16px}.field-zoom-viewport{max-height:52dvh}}
@media print{.field-zoom-open,.field-zoom-dialog{display:none}}

.field-zoom-viewport[data-dragging=true]{cursor:grabbing;user-select:none}

/* The whole illustrated screen is a native keyboard and touch target. */
.field-demo-screen{position:relative}
.field-screen-zoom{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:transparent;padding:0;cursor:zoom-in;border-radius:inherit}
.field-screen-zoom[hidden]{display:none}.field-screen-zoom:focus-visible{outline:3px solid #91caff;outline-offset:-5px;background:#b6dcff08}
.field-demo-screen button:not(.field-screen-zoom){position:relative;z-index:3}
.field-eyebrow,.field-static-badge,.field-trends-title,.field-time-label,.field-demo-caption,.field-demo-caption .field-disclaimer,.field-animation-status,.field-zoom-description,.field-zoom-disclaimer,.field-zoom-header p{font-size:.875rem;line-height:1.8}
.field-eyebrow,.field-static-badge,.field-demo-caption,.field-demo-caption .field-disclaimer,.field-animation-status,.field-zoom-description,.field-zoom-disclaimer,.field-zoom-header p{color:#52677f}
.field-trends-title,.field-time-label{color:#adc6dc}
.field-toggle,.field-zoom-open{font-size:.875rem}
@media(max-width:700px){.field-playback{flex-wrap:wrap}.field-animation-status{min-width:0;max-width:100%;overflow-wrap:anywhere}}

/* Keep each numbered stage centered in a shared three-column reading order. */
.field-node-legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;font-size:.875rem;text-align:center}
.field-node-legend li{display:block;min-width:0;max-width:100%;text-align:center;word-break:normal;overflow-wrap:anywhere}
.field-node-legend span{display:block;font-size:.875rem;margin-bottom:3px}
@media(max-width:600px){.field-node-legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:.875rem}}

/* Full available modal space, including resize and device rotation. */
.field-zoom-dialog{width:calc(100vw - 32px);height:calc(100dvh - 32px);max-width:none;max-height:none;overflow:hidden;margin:auto}
.field-zoom-dialog[open]{display:flex;flex-direction:column}
.field-zoom-header,.field-zoom-toolbar,.field-zoom-description,.field-zoom-disclaimer{flex-shrink:0}
.field-zoom-viewport{flex:1;min-height:0;max-height:none;display:grid;align-items:center}
.field-zoom-canvas{flex:none}
.field-zoom-description{padding-bottom:8px}.field-zoom-disclaimer{padding-block:8px}
@media(max-width:600px){.field-zoom-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:none;max-width:none}.field-zoom-header{padding:10px 12px 8px}.field-zoom-toolbar{padding:0 12px 8px}.field-zoom-header p{display:none}.field-zoom-description,.field-zoom-disclaimer{font-size:.75rem;line-height:1.5}}
@media(max-height:550px){.field-zoom-header{padding:8px 12px}.field-zoom-header p,.field-zoom-description,.field-zoom-disclaimer{display:none}.field-zoom-header h2{font-size:1rem}.field-zoom-toolbar{padding:0 12px 6px;gap:5px}.field-zoom-toolbar button,.field-zoom-close{min-height:36px;padding:4px 9px}}
.cycle-reference{fill:none;stroke:#91bde0;stroke-width:1.5;opacity:.2}
.field-trace[data-cycle]{stroke-dasharray:1;stroke-dashoffset:0}
.cycle-stages{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:.75rem;line-height:1.7;color:#c6dbed;grid-column:1/-1;margin-top:10px}
.cycle-stages li+li:before{content:'→';color:#7197ba;margin-right:10px}
.solution-panel>.field-demo{margin:0 0 4px;padding-top:0;border-top:0}