:root{--ground: #e4e5e1;--panel: #f2f2ef;--raised: #fafaf8;--ink: #22262b;--muted: #5d636b;--rule: #c9cbc5;--symbol: #3a4049;--liquid: #4e7c9e;--powder: #b39866;--alarm: #c4122f;--alarm-soft: #f6d9dd;--warning: #d29a00;--warning-soft: #f7ecc8;--bad: #7652a8;--focus: #1f5fbf;--sans: "IBM Plex Sans", system-ui, sans-serif;--condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;color-scheme:light}@media (prefers-color-scheme: dark){:root{--ground: #1c1e21;--panel: #24272b;--raised: #2b2f34;--ink: #e3e4e0;--muted: #9aa0a8;--rule: #3a3e44;--symbol: #c9ccd1;--liquid: #7aa6c6;--powder: #cdb486;--alarm: #ff5468;--alarm-soft: #4a1d24;--warning: #f0b72a;--warning-soft: #43381a;--bad: #b394e0;--focus: #7fb0ff;color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--ground);color:var(--ink);font:400 15px/1.45 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.code{font:600 .92em var(--condensed);color:var(--muted)}button.quiet{background:none;border:1px solid var(--rule);border-radius:6px;padding:4px 10px;font-size:13px}button.quiet:hover{background:var(--raised)}.boot{min-height:100vh;display:grid;place-items:center;color:var(--muted)}.login{min-height:100vh;display:grid;place-items:center;padding:16px}.login-form{width:min(360px,100%);display:grid;gap:14px}.login-mark{width:40px;height:40px}.login-mark path,.brand-mark path{fill:none;stroke:var(--powder);stroke-width:2.4;stroke-linejoin:round}.login-mark circle,.brand-mark circle{fill:var(--liquid)}.login h1{font-size:26px;font-weight:600;letter-spacing:-.01em}.login-intro{color:var(--muted);margin-top:-8px}.login label{display:grid;gap:4px;font-size:13px;color:var(--muted)}.login input{font:inherit;color:var(--ink);background:var(--raised);border:1px solid var(--rule);border-radius:6px;padding:9px 11px}.login button[type=submit]{background:var(--ink);color:var(--ground);border:0;border-radius:6px;padding:10px;font-weight:600}.login button:disabled{opacity:.6;cursor:default}.login-error{color:var(--alarm);font-size:14px}.plant{min-height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--rule)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:30px;height:30px}.brand h1{font-size:20px;font-weight:700;letter-spacing:.02em;line-height:1}.brand p{font-size:12px;color:var(--muted);line-height:1.2}.modes{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}.mode{display:grid;padding:4px 12px 5px;border:1px solid var(--rule);border-radius:6px;min-width:104px}.mode-name{font-size:12px;color:var(--muted)}.mode-state{font-weight:600;font-size:14px}.mode-on{background:var(--symbol);border-color:var(--symbol)}.mode-on .mode-name,.mode-on .mode-state{color:var(--ground)}.mode-unknown .mode-state{color:var(--bad)}.header-end{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.alarm-count{color:var(--ink);text-decoration:none;font-size:14px;padding:5px 10px;border-radius:6px;border:1px solid var(--rule)}.alarm-count strong{font-size:16px}.alarm-count-new{background:var(--alarm);border-color:var(--alarm);color:#fff}.alarm-count-seen{border-color:var(--alarm)}.link{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}.link:before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}.link-connected:before{background:currentColor}.link-disconnected,.link-error{color:var(--alarm)}.user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}.banner{background:var(--warning-soft);color:var(--ink);padding:8px 20px;font-size:14px;border-bottom:1px solid var(--warning)}.line{padding:18px 20px 20px;background:var(--panel);border-bottom:1px solid var(--rule)}.line-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}.line-steps:before{content:"";position:absolute;left:0;right:0;top:30px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--liquid) 0%,var(--liquid) 30%,var(--powder) 58%,var(--powder) 100%)}.line-step{position:relative;padding:0 12px;min-width:0}.line-step+.line-step{border-left:1px dashed var(--rule)}.line-step h2{font-size:15px;font-weight:600;margin-bottom:30px}.line-step:after{content:"";position:absolute;left:12px;top:26px;width:14px;height:14px;border-radius:50%;background:var(--panel);border:3px solid var(--ink)}.line-values{margin:0;display:grid;gap:8px}.line-value dt{font:600 12px var(--condensed);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.line-value dt span{font-weight:400}.line-value dd{margin:0}.line-devices{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px}.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 6px 2px 4px;background:var(--raised);border:1px solid var(--rule);border-radius:5px;font:500 12px var(--condensed)}.chip:hover{border-color:var(--muted)}.value{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}.value-num{font-weight:600}.value-big .value-num{font-size:24px;line-height:1.1;letter-spacing:-.01em}.value-unit{font-size:12px;color:var(--muted)}.value-bad .value-num{color:var(--bad);text-decoration:underline dotted 1.5px;text-underline-offset:3px}.sym{flex:none;overflow:visible}.sym circle,.sym path:not(.sym-mark),.sym rect{fill:none;stroke:var(--symbol);stroke-width:2;stroke-linejoin:round}.sym-filled circle,.sym-filled path:not(.sym-mark),.sym-filled rect{fill:var(--symbol)}.sym-moving circle,.sym-moving path:not(.sym-mark),.sym-moving rect{stroke-dasharray:3 2.4}.sym-warning circle,.sym-warning path:not(.sym-mark),.sym-warning rect{stroke:var(--warning)}.sym-warning.sym-filled circle,.sym-warning.sym-filled path:not(.sym-mark),.sym-warning.sym-filled rect{fill:var(--warning)}.sym-fault circle,.sym-fault path:not(.sym-mark),.sym-fault rect{stroke:var(--alarm);fill:var(--alarm)}.sym-mark{stroke:#fff;stroke-width:2.2;stroke-linecap:round;fill:none}.sym-unknown circle,.sym-unknown path:not(.sym-mark),.sym-unknown rect{stroke:var(--bad);stroke-dasharray:2 2;fill:none}.workspace{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start}.zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.zone{padding:18px 20px 28px;min-width:0}.zone+.zone{border-left:1px solid var(--rule)}.zone>h2{font-size:20px;font-weight:600;margin-bottom:10px}.group{margin-top:18px}.group h3{font-size:13px;font-weight:600;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--rule)}table{width:100%;border-collapse:collapse;table-layout:fixed}.c-sym{width:30px}.c-state{width:136px}.c-mode,.c-amount{width:64px}.c-value{width:112px}.c-setpoint{width:140px}td,th{padding:6px 4px;border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent);text-align:left;vertical-align:middle}th{font-weight:400}.measurements td{white-space:nowrap;text-align:right;padding-left:12px}.setpoint{font-size:12px;color:var(--muted)}.devices tr{cursor:pointer}.devices tr:hover{background:var(--raised)}.device-sym{width:28px}.device-name{background:none;border:0;padding:0;text-align:left}.device-name:hover{text-decoration:underline}.device-state{white-space:nowrap;font-weight:500}.device-state .flags{display:block;font-size:12px;font-weight:400;color:var(--muted)}.device-mode,.device-amount{white-space:nowrap;color:var(--muted);font-size:13px;text-align:right}.device-fault .device-state{color:var(--alarm);font-weight:600}.device-warning .device-state{color:var(--ink)}.device-warning{box-shadow:inset 3px 0 var(--warning)}.device-fault{box-shadow:inset 3px 0 var(--alarm)}.device-unknown .device-state{color:var(--bad)}.device-selected,.device-selected:hover{background:color-mix(in srgb,var(--focus) 12%,var(--raised))}.alarms{position:sticky;top:0;max-height:100vh;overflow-y:auto;border-left:1px solid var(--rule);background:var(--panel);padding:18px 16px 24px}.alarms h2{font-size:20px;font-weight:600;margin-bottom:10px}.alarms-error{color:var(--alarm);font-size:14px;margin-bottom:8px}.empty{color:var(--muted);font-size:14px}.alarm-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.alarm{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"sev name" "sev meta" "sev ack";column-gap:10px;padding:8px 10px;background:var(--raised);border:1px solid var(--rule);border-radius:6px}.alarm-sev{grid-area:sev;align-self:start;font:600 11px var(--condensed);padding:2px 6px;border-radius:4px;border:1px solid currentColor}.alarm-name{grid-area:name;font-weight:500;line-height:1.3}.alarm-meta{grid-area:meta;font-size:12px;color:var(--muted)}.ack{grid-area:ack;justify-self:start;margin-top:6px;background:var(--ink);color:var(--ground);border:0;border-radius:5px;padding:3px 10px;font-size:13px}.ack:disabled{opacity:.5}.alarm-critical .alarm-sev{color:#fff;background:var(--alarm);border-color:var(--alarm)}.alarm-high .alarm-sev{color:var(--alarm)}.alarm-medium .alarm-sev{color:var(--ink);background:var(--warning);border-color:var(--warning)}.alarm-low .alarm-sev{color:var(--muted)}.alarm-active.alarm-critical,.alarm-active.alarm-high{border-color:var(--alarm);background:var(--alarm-soft)}.alarm-acknowledged{opacity:.85}.alarm-acknowledged .alarm-name{font-weight:400}.panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);overflow-y:auto;z-index:10;background:var(--raised);border-left:1px solid var(--rule);padding:18px 20px 28px;box-shadow:-18px 0 40px -24px #14161a73;animation:panel-in .14s ease-out}@keyframes panel-in{0%{transform:translate(16px);opacity:0}}@media (prefers-reduced-motion: reduce){.panel{animation:none}}.panel-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}.panel-head h2{font-size:18px;font-weight:600;line-height:1.25}.panel-head p{font-size:13px;color:var(--muted)}.panel-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:18px 0 4px}.panel-summary dt{font-size:12px;color:var(--muted)}.panel-summary dd{margin:0;font-weight:600;font-size:16px}.level-fault{color:var(--alarm)}.level-unknown{color:var(--bad)}.panel-group{margin-top:18px}.panel-group h3{font-size:13px;font-weight:600;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--rule)}.panel-group ul{list-style:none;margin:0;padding:0}.bit{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent);font-size:14px}.bit-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--symbol)}.bit-on .bit-dot{background:var(--symbol)}.bit-alarm{color:var(--alarm);font-weight:600}.bit-alarm .bit-dot{background:var(--alarm);border-color:var(--alarm)}.bit-bad .bit-dot{border-color:var(--bad);border-style:dashed}.bit-state{font-size:12px;color:var(--muted);font-weight:400}.panel-note{margin-top:22px;font-size:13px;color:var(--muted)}@media (max-width: 1400px){.workspace{grid-template-columns:minmax(0,1fr) 320px}.zones{grid-template-columns:minmax(0,1fr)}.zone+.zone{border-left:0;border-top:1px solid var(--rule)}}@media (max-width: 1100px){.line-steps{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}.line-steps:before{display:none}.line-step{border-left:0!important;padding:0 12px 0 0}.line-step:after{display:none}.line-step h2{margin-bottom:8px;padding-bottom:6px;border-bottom:4px solid var(--liquid)}.line-step:nth-child(n+4) h2{border-bottom-color:var(--powder)}}@media (max-width: 860px){.workspace{grid-template-columns:minmax(0,1fr)}.alarms{position:static;max-height:none;border-left:0;border-top:1px solid var(--rule)}.header{gap:12px;padding:10px 16px}.header-end{margin-left:0;width:100%;justify-content:space-between}.line,.zone{padding-left:16px;padding-right:16px}.line-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.device-mode,.c-mode{display:none}.c-state{width:96px}.setpoint,.c-setpoint{display:none}}