/* Photograph and annotations use the same coordinate system. */
.hero-image.warehouse-monitoring{height:auto;min-height:0;display:flex;flex-direction:column;border:1px solid #3d514133;border-radius:6px 6px 28px 6px;background:#16231d;overflow:hidden}
.monitoring-viewport{position:relative;isolation:isolate;aspect-ratio:1.1;min-height:290px;max-height:540px;overflow:hidden}
.warehouse-scene{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.warehouse-scene.is-active{opacity:1}
.warehouse-scene>img,.station-overlay{position:absolute;inset:0;width:100%;height:100%}
.warehouse-scene>img{object-fit:cover;object-position:50% 50%}
.warehouse-monitoring .image-shade{background:linear-gradient(180deg,#0e1b24b8 0%,#101d2800 24%,#0b181e00 80%,#0b181e5c 100%)}
.station-overlay{pointer-events:none}
.station-route-guide,.station-route{fill:none;stroke:var(--lime);vector-effect:non-scaling-stroke;stroke-width:1.5}
.station-route-guide{opacity:.18;stroke-dasharray:3 7}
.station-route{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:.65;transition:stroke-dashoffset .8s ease}
.station-point{--point-color:#c2ee71;color:var(--point-color)}
.station-point[data-kind="CH"]{--point-color:#8be0f2}
.station-point[data-kind="DO"]{--point-color:#ffd287}
.station-point[data-kind="PF"]{--point-color:#efbae0}
.lamp-point{--point-color:#d8c2ff}
.station-leader{fill:none;stroke:var(--point-color);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.85}
.station-footprint{fill:#c2ee7133;stroke:#c2ee71b3;stroke-width:1.5}
.station-box{fill:#15271c;stroke:#c2ee71;stroke-width:2}
.station-box-edge{stroke:#718d50;stroke-width:2}
.station-dot{fill:var(--point-color)}
.station-halo{fill:none;stroke:var(--point-color);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.station-label rect{fill:#102019f5;stroke:var(--point-color);stroke-width:1.5}
.station-label text{fill:var(--point-color);font-family:var(--heading);font-size:30px;font-weight:650;letter-spacing:.4px}
.device-focus{fill:#101c2219;stroke:var(--point-color);stroke-width:1.3;vector-effect:non-scaling-stroke}
.lamp-focus{fill:none;stroke:#d8c2ff;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.85}
.lamp-point .station-label rect{fill:#202032f2}
.lamp-point .station-label text{font-size:32px}
.lamp-aura{opacity:.75}
.warehouse-monitoring.has-station-animation .station-point{opacity:0;transition:opacity .3s ease}
.warehouse-monitoring.has-station-animation .station-point.is-visible{opacity:1}
.warehouse-monitoring.has-station-animation .station-point.is-current .station-label{animation:stationLabelArrival .5s ease-out}
.warehouse-monitoring.has-station-animation .station-point.is-current .station-halo{animation:stationRing 1.1s ease-out}
.warehouse-monitoring.has-station-animation .lamp-point.is-current .lamp-aura{animation:lampGlow 1.8s ease-out}
.warehouse-monitoring.is-paused *{animation-play-state:paused!important}
.warehouse-monitoring.is-paused .station-route{transition:none}
.warehouse-monitoring .visual-top{left:18px;right:18px;top:16px;gap:10px;letter-spacing:.1em;font-size:11px;z-index:2}
.warehouse-monitoring .visual-top>.icon{width:19px}
.scene-number{font-size:11px;letter-spacing:.07em;margin-left:auto;color:#d7e4ce;font-variant-numeric:tabular-nums}
.station-motion-toggle{display:flex;align-items:center;gap:6px;border:1px solid #d5e4cb55;background:#13221ddd;border-radius:5px;padding:8px;color:#e1eed8;font-size:12px;line-height:1.2;letter-spacing:0}
.station-motion-toggle[hidden]{display:none}
.station-motion-toggle:hover{background:#2f4230;border-color:#c2ee7199}
.station-motion-toggle .icon{height:14px;width:14px;stroke-width:2}
.station-motion-toggle .play-symbol{display:none}
.warehouse-monitoring.is-paused .station-motion-toggle .play-symbol{display:block}
.warehouse-monitoring.is-paused .station-motion-toggle .pause-symbol{display:none}
.monitoring-meta{padding:16px 20px 8px;background:#17271e}
.monitoring-meta-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.monitoring-meta-top>[data-scene-eyebrow]{font-size:10px;letter-spacing:.08em;color:#bccdb3;line-height:1.5}
.point-counter{white-space:nowrap;color:#acbda3;font-size:11px;line-height:1.2}
.point-counter b{color:var(--lime);font:550 23px var(--heading);font-variant-numeric:tabular-nums}
.warehouse-monitoring .image-caption{position:static;gap:12px;margin-top:11px;align-items:center;min-height:51px}
.warehouse-monitoring .caption-icon{width:35px;height:35px;flex-shrink:0}
.warehouse-monitoring .caption-icon .icon{width:21px}
.warehouse-monitoring .image-caption strong{font-size:15px;font-weight:550;line-height:1.4}
.warehouse-monitoring .image-caption span{font-size:12px;line-height:1.5;margin-top:4px;color:#bbc9b4}
.device-legend{display:flex;flex-wrap:wrap;gap:6px 13px;min-height:24px;margin-top:8px;visibility:hidden;align-items:center;font-size:11px;line-height:1.4;color:#c1cebc}
.device-legend.is-shown{visibility:visible}
.device-legend span{display:flex;gap:5px;align-items:center}
.device-legend b{font-weight:650}
.device-legend [data-kind="CH"] b{color:#8be0f2}.device-legend [data-kind="DO"] b{color:#ffd287}.device-legend [data-kind="PF"] b{color:#efbae0}
.station-progress-track{width:100%;height:2px;background:#e1f2d81f;margin-top:7px;overflow:hidden}
.station-progress-track i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:left;transition:transform .5s ease}
.warehouse-monitoring figcaption{position:static;background:#17271e;padding:0 20px 12px;font-size:10px;color:#8fa386;line-height:1.5;min-height:27px}
.scene-switch{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;z-index:2;background:#14211a;border-top:1px solid #394932}
.scene-switch button{position:relative;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:4px;min-height:64px;padding:10px 13px;border:0;border-right:1px solid #394932;background:transparent;color:#a7b59f;font-size:14px;line-height:1.3;text-align:left;transition:color .2s,background .2s}
.scene-switch button:last-child{border-right:0}
.scene-switch button span{font-size:10px;letter-spacing:.1em;opacity:.65;font-variant-numeric:tabular-nums}
.scene-switch button.is-active{color:var(--lime);background:#253b24}
.scene-switch button.is-active:before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:currentColor}
.scene-switch button:hover{background:#2a3b25;color:#e2eed9}
.warehouse-monitoring[data-active-scene="inside"] .scene-switch button.is-active{color:#e1d4ff;background:#29223e}
.warehouse-monitoring[data-active-scene="inside"] .point-counter b{color:#d4bfff}
.warehouse-monitoring[data-active-scene="inside"] .station-progress-track i{background:#c5abf4}
.warehouse-monitoring[data-device-kind="CH"] .point-counter b{color:#8be0f2}.warehouse-monitoring[data-device-kind="DO"] .point-counter b{color:#ffd287}.warehouse-monitoring[data-device-kind="PF"] .point-counter b{color:#efbae0}
.warehouse-monitoring[data-device-kind="CH"] .station-progress-track i{background:#8be0f2}.warehouse-monitoring[data-device-kind="DO"] .station-progress-track i{background:#ffd287}.warehouse-monitoring[data-device-kind="PF"] .station-progress-track i{background:#efbae0}
@keyframes stationLabelArrival{from{opacity:.1}to{opacity:1}}
@keyframes stationRing{0%{opacity:.9;scale:.4}100%{opacity:0;scale:1.9}}
@keyframes lampGlow{0%{opacity:0}35%{opacity:1}100%{opacity:.75}}
@media(max-width:1150px) and (min-width:681px){.warehouse-monitoring .visual-top{left:14px;right:14px;gap:7px;font-size:10px}.station-motion-toggle>span{display:none}.scene-switch button{font-size:12px;padding:9px}.monitoring-meta{padding:13px 14px 8px}.warehouse-monitoring .image-caption{min-height:84px}.warehouse-monitoring .image-caption strong{font-size:14px}.warehouse-monitoring .caption-icon{display:none}.monitoring-meta-top>[data-scene-eyebrow]{font-size:9px}.device-legend{font-size:10px;min-height:36px;gap:4px 9px}.warehouse-monitoring figcaption{padding-left:14px;padding-right:14px}}
@media(max-width:680px){.monitoring-viewport{min-height:280px;max-height:510px}.warehouse-monitoring .visual-top{top:12px;left:14px;right:14px;font-size:10px;gap:8px}.station-motion-toggle>span{display:none}.monitoring-meta{padding:13px 15px 8px}.monitoring-meta-top>[data-scene-eyebrow]{font-size:9px;letter-spacing:.04em}.point-counter b{font-size:21px}.point-counter{font-size:10px}.warehouse-monitoring .caption-icon{display:none}.warehouse-monitoring .image-caption{min-height:84px;margin-top:8px}.warehouse-monitoring .image-caption strong{font-size:14px}.warehouse-monitoring .image-caption span{font-size:12px}.device-legend{min-height:35px;font-size:10px;gap:4px 9px}.warehouse-monitoring figcaption{padding:0 15px 11px;font-size:9px}.scene-switch button{min-height:62px;padding:9px 8px;font-size:12px}.station-label text,.lamp-point .station-label text{font-size:46px}}
@media(prefers-reduced-motion:reduce){.warehouse-monitoring .station-point{opacity:1!important}.warehouse-monitoring .station-route{stroke-dashoffset:0!important}.station-progress-track i{transform:scaleX(1)!important}.station-motion-toggle{display:none!important}}

@media(max-width:380px){.warehouse-monitoring .visual-top>.icon{display:none}.scene-switch button span{font-size:9px;letter-spacing:0}.scene-switch button{font-size:11px}.station-label text,.lamp-point .station-label text{font-size:46px}}

@media(max-width:680px){.station-motion-toggle{min-width:44px;min-height:44px;justify-content:center}}