.hmi{--hmi-ink: var(--foreground);--hmi-ink-2: color-mix(in oklch, var(--foreground) 80%, transparent);--hmi-ink-3: var(--muted-foreground);--hmi-panel: var(--background);--hmi-line-strong: color-mix(in oklch, var(--muted-foreground) 70%, transparent);--equip: oklch(.5 .02 260);--equip-off: oklch(.99 .002 264);--equip-unknown: oklch(.84 .008 264);--stroke: oklch(.36 .02 260);--detail-on: oklch(.93 .004 264);--pipe: oklch(.6 .015 260);--pipe-idle: oklch(.79 .01 260);--level: oklch(.74 .04 250);--select: oklch(.55 .2 262);--rail: oklch(.88 .006 264);--p-urgent: #b4006e;--p-high: #d4261b;--p-medium: #e8a000;--p-low: #7a5cc8;--to-confirm: #f3dfa6;--to-confirm-2: #f8ecc6;--to-confirm-ink: #6b5310;--sim: #f2c14e;--sim-a: #fff7df;--sim-b: #fdf0c8}.dark .hmi{--equip: oklch(.72 .02 260);--equip-off: oklch(.195 .042 260);--equip-unknown: oklch(.38 .03 260);--stroke: oklch(.8 .015 260);--detail-on: oklch(.24 .04 260);--pipe: oklch(.64 .02 260);--pipe-idle: oklch(.4 .03 260);--level: oklch(.5 .06 245);--select: oklch(.72 .16 255);--rail: oklch(.3 .04 260);--to-confirm: oklch(.4 .07 85);--to-confirm-2: oklch(.35 .06 85);--to-confirm-ink: oklch(.9 .1 90);--sim-a: oklch(.3 .05 85);--sim-b: oklch(.26 .045 85)}.hmi .prio{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;font-size:11px;font-weight:700;color:#fff}.hmi .prio.urgent{background:var(--p-urgent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.hmi .prio.high{background:var(--p-high);clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:5px}.hmi .prio.medium{background:var(--p-medium);color:#1f2328}.hmi .prio.low{background:var(--p-low);border-radius:50%}.hmi .prio.acked{opacity:.55}.hmi .blink{animation:hmi-blink 1s steps(2,start) infinite}@keyframes hmi-blink{to{visibility:hidden}}.hmi .tc{background:repeating-linear-gradient(135deg,var(--to-confirm),var(--to-confirm) 5px,var(--to-confirm-2) 5px,var(--to-confirm-2) 10px);color:var(--to-confirm-ink)}.hmi .simbox{border:2px solid var(--sim);padding:8px 10px 10px;background:repeating-linear-gradient(135deg,var(--sim-a),var(--sim-a) 8px,var(--sim-b) 8px,var(--sim-b) 16px)}.hmi .simbox .title{font:700 11px var(--font-mono);color:var(--to-confirm-ink);margin-bottom:6px;letter-spacing:.05em}.hmi .schematic-wrap{overflow:auto;position:relative}.hmi .schematic-wrap.stale svg{filter:grayscale(1);opacity:.6}.hmi svg.schematic{display:block;-webkit-user-select:none;user-select:none}.hmi svg.schematic .pipe{fill:none;stroke:var(--pipe);stroke-width:2}.hmi svg.schematic .pipe.idle{stroke:var(--pipe-idle)}.hmi svg.schematic .pipe.recycle{stroke-dasharray:7 4}.hmi svg.schematic .val-bg{fill:var(--hmi-panel)}.hmi svg.schematic .val{font:600 11px var(--font-mono);fill:var(--hmi-ink)}.hmi svg.schematic .val.idle{fill:var(--hmi-ink-3);font-weight:400}.hmi svg.schematic .sid{font:9px var(--font-mono);fill:var(--hmi-ink-3)}.hmi svg.schematic .unit{cursor:pointer}.hmi svg.schematic .unit .body{stroke:var(--stroke);stroke-width:1.5}.hmi svg.schematic .unit.run .body{fill:var(--equip)}.hmi svg.schematic .unit.stop .body{fill:var(--equip-off)}.hmi svg.schematic .unit.na .body{fill:var(--equip-unknown)}.hmi svg.schematic .unit .detail{stroke:var(--stroke);stroke-width:1.2;fill:none}.hmi svg.schematic .unit.run .detail{stroke:var(--detail-on)}.hmi svg.schematic .unit.fault .body{stroke:var(--p-high);stroke-width:3}.hmi svg.schematic .unit .tag{font:600 12px var(--font-mono);fill:var(--hmi-ink)}.hmi svg.schematic .unit .state{font:10px var(--font-mono);fill:var(--hmi-ink-3)}.hmi svg.schematic .unit .pv{font:600 11px var(--font-mono);fill:var(--hmi-ink)}.hmi svg.schematic .unit .sel{fill:none;stroke:var(--select);stroke-width:2;stroke-dasharray:4 3}.hmi svg.schematic .unit:hover .hover{stroke:var(--hmi-ink-2);stroke-width:1;fill:color-mix(in oklch,var(--foreground) 4%,transparent)}.hmi svg.schematic .unit .hover{fill:transparent;stroke:none}.hmi svg.schematic .level{fill:var(--level)}.hmi svg.schematic .unit.run .vessel .vessel-body,.hmi svg.schematic .unit.stop .vessel .vessel-body{fill:var(--equip-off)}.hmi svg.schematic .unit .vessel .detail{stroke:var(--stroke)}.hmi svg.schematic .vessel-body{fill:var(--equip-off);stroke:var(--stroke);stroke-width:1.5}.hmi svg.schematic .conn{fill:var(--hmi-panel);stroke:var(--hmi-line-strong);stroke-width:1.2}.hmi svg.schematic .conn-label{font:600 11px var(--font-mono);fill:var(--hmi-ink-2)}.hmi svg.schematic .conn-sub{font:9px Inter,sans-serif;fill:var(--hmi-ink-3)}.hmi svg.schematic .area-box{fill:var(--hmi-panel);stroke:var(--hmi-line-strong);stroke-width:1.2}.hmi svg.schematic .area-box.alarm{stroke-width:2.5}.hmi svg.schematic .area-code{font:600 20px var(--font-mono);fill:var(--hmi-ink-2)}.hmi svg.schematic .area-name{font:600 12px Inter,sans-serif;fill:var(--hmi-ink)}.hmi svg.schematic .area-stat{font:11px var(--font-mono);fill:var(--hmi-ink-3)}.hmi .state-chip{font:600 11px var(--font-mono);padding:2px 8px;border:1px solid var(--hmi-ink-2)}.hmi .state-chip.run{background:var(--equip);color:var(--hmi-panel)}.hmi .state-chip.fault{background:var(--p-high);border-color:var(--p-high);color:#fff}.hmi .state-chip.na{background:var(--equip-unknown)}.hmi .level-bar{height:6px;background:var(--rail);overflow:hidden}.hmi .level-bar>div{height:100%;background:var(--hmi-ink-2)}.hmi .mark{font:600 11px var(--font-mono);width:54px;text-align:center;padding:1px 0;border:1px solid var(--hmi-line-strong);flex:none}.hmi .mark.bad{background:var(--p-medium);border-color:var(--p-medium);color:#1f2328}