/* Industrial digital-twin demonstration — local HTML simulation using user-supplied JPG scenes. */
.demo-section{background:linear-gradient(145deg,var(--bg2),var(--bg));border-block:1px solid var(--line)}
.demo-shell{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.demo-tabs{display:flex;gap:8px;overflow:auto;padding:16px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.demo-tab{color:var(--muted);border:1px solid var(--line);background:var(--bg);padding:10px 13px;border-radius:10px;white-space:nowrap;font-size:12px;font-weight:750}
.demo-tab[aria-selected=true]{background:var(--green);border-color:var(--green);color:#072216}
.demo-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px 21px;border-bottom:1px solid var(--line)}
.demo-head h3{margin:0;font-size:21px}.demo-sub{font-size:12px;color:var(--muted);max-width:760px}.demo-indicator{font-size:12px;border:1px solid var(--line);padding:5px 12px;border-radius:100px;color:var(--lime)}
.demo-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:0}
.demo-view{min-height:480px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#1d493b 0%,#081a18 69%);touch-action:none}
.demo-scene-pan{position:relative;padding:14px;height:100%}
.demo-scene-media{position:relative;overflow:hidden;border-radius:18px;border:1px solid #235646;box-shadow:0 10px 40px #0005;will-change:transform;transition:transform .12s linear}
.demo-image{display:block;width:100%;height:auto;aspect-ratio:2048/1448;object-fit:cover;filter:saturate(1.04) contrast(1.02) brightness(.95)}
.demo-overlay,.demo-hotspots,.demo-hud,.demo-image-strip{position:absolute;inset:0}.demo-overlay{width:100%;height:100%;pointer-events:none}
.flow-line{stroke-dasharray:15 10;animation:flowDash 8s linear infinite}.flow-line.glow{stroke-dasharray:none;filter:blur(4px);opacity:.7}
@keyframes flowDash{to{stroke-dashoffset:-250}}
.node-core{animation:nodeBeat 1.8s ease-in-out infinite}.node-ring{animation:nodeBeat 1.8s ease-in-out infinite;opacity:.55}.node-ring.large{animation-delay:.2s;opacity:.25}
@keyframes nodeBeat{50%{transform:scale(1.12);opacity:.2}}
.demo-hotspots{pointer-events:none;overflow:visible}
.hotspot{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:transparent;border:0;color:#effef3;pointer-events:auto;text-align:left}
.hotspot-dot{width:16px;height:16px;border-radius:50%;background:#6effb4;border:2px solid #e5fff0;box-shadow:0 0 0 8px #6effb426,0 0 26px #6effb47c;animation:hotDot 1.6s ease-in-out infinite}
@keyframes hotDot{50%{transform:scale(.78);box-shadow:0 0 0 14px #6effb414,0 0 18px #6effb448}}
.hotspot-card{display:flex;flex-direction:column;gap:2px;min-width:110px;max-width:165px;padding:10px 12px;border-radius:12px;border:1px solid #82ffbe47;background:#081a15d6;backdrop-filter:blur(10px);box-shadow:0 8px 28px #0006}
.hotspot-card b{font-size:11px;line-height:1.2}.hotspot-card .hot-value{font-size:13px;font-weight:800;color:#9cf8be;font-variant-numeric:tabular-nums}
.hotspot.muted .hotspot-dot{animation-play-state:paused;opacity:.55}.hotspot.muted .hotspot-card{opacity:.74}.hotspot.alarm .hotspot-dot{background:#ff8a8a;box-shadow:0 0 0 8px #ff8a8a24,0 0 26px #ff8a8a88}.hotspot.alarm .hot-value{color:#ffb4b4}
.demo-hud{display:flex;align-items:center;gap:10px;inset:auto 14px 14px 14px;background:linear-gradient(90deg,#071c15f4,#071a14b9 65%,transparent);padding:10px 12px;border-radius:12px;pointer-events:none}
.demo-hud-badge{display:inline-flex;align-items:center;justify-content:center;background:#0d3c2c;border:1px solid #57db92;padding:5px 9px;border-radius:999px;color:#a8ffcc;font-size:10px;font-weight:800;letter-spacing:.08em}.demo-hud-dot{width:9px;height:9px;border-radius:50%;background:#73fbb8;box-shadow:0 0 16px #73fbb8;animation:pulse 2s infinite}.demo-hud span:last-child{font-size:12px;color:#eaf6ee}
.demo-image-strip{display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;padding:14px;pointer-events:none}
.demo-image-strip[hidden]{display:none}
.demo-thumb{width:72px;height:52px;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#071713;pointer-events:auto;box-shadow:0 8px 24px #0007;padding:0}
.demo-thumb.active{border-color:#73fbb8}.demo-thumb img{width:100%;height:100%;object-fit:cover}
.demo-view[data-status="trip"] .flow-line,.demo-view[data-status="trip"] .node-core,.demo-view[data-status="trip"] .node-ring{animation-duration:1s}
.demo-view[data-status="stopped"] .flow-line,.demo-view[data-status="stopped"] .node-core,.demo-view[data-status="stopped"] .node-ring,.demo-view[data-status="stopped"] .hotspot-dot{animation-play-state:paused;opacity:.45}
.demo-corner{position:absolute;top:13px;left:16px;color:#e3f9ed;font-size:11px;letter-spacing:.11em;pointer-events:none;z-index:2}
.demo-view-label{position:absolute;bottom:12px;left:16px;color:#aad9c1;font-size:11px;pointer-events:none;z-index:2}
.demo-metrics{padding:17px;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line)}
.demo-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.demo-metric{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg)}.demo-metric small{display:block;color:var(--muted);font-size:11px}.demo-metric strong{font-size:22px;line-height:1.4;font-variant-numeric:tabular-nums}.demo-metric em{font-style:normal;font-size:11px;color:var(--muted)}
.demo-chart{border:1px solid var(--line);background:var(--bg);width:100%;height:100px;border-radius:10px}
.demo-controls{display:flex;flex-wrap:wrap;gap:8px}.demo-control{border:1px solid var(--line);background:var(--bg2);color:var(--text);border-radius:9px;padding:9px 12px;font-size:12px;font-weight:700}.demo-control:hover:not(:disabled){border-color:var(--green)}.demo-control:disabled{opacity:.4;cursor:not-allowed}.demo-control.primary{background:var(--green);color:#082319}.demo-control.danger{border-color:#f37979;color:#f39595}
.demo-events{max-height:125px;overflow:auto;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}.demo-events div{padding:3px 0}.demo-events time{color:var(--lime);margin-right:7px}
.demo-foot{padding:14px 19px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.demo-foot b{color:var(--lime)}
.demo-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.demo-overview .card{padding:15px}.demo-overview strong{display:block;color:var(--green);font-size:13px}.demo-overview p{font-size:12px;color:var(--muted);margin:5px 0 0}
@media(max-width:850px){.demo-layout{grid-template-columns:1fr}.demo-metrics{border-left:0;border-top:1px solid var(--line)}.demo-view{min-height:390px}.demo-overview{grid-template-columns:1fr}.hotspot-card{min-width:92px;max-width:120px;padding:8px 10px}.hotspot-card b{font-size:10px}.hotspot-card .hot-value{font-size:11px}}
@media(max-width:600px){.demo-scene-pan{padding:8px}.demo-view{min-height:320px}.demo-corner,.demo-view-label{font-size:10px}.hotspot{gap:6px}.hotspot-dot{width:12px;height:12px}.hotspot-card{display:none}.demo-thumb{width:54px;height:42px}.demo-head h3{font-size:18px}.demo-metric strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.flow-line,.node-core,.node-ring,.hotspot-dot,.demo-hud-dot{animation:none!important}}