.scene-viewport { width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; background: #080c0e; scrollbar-width: thin; scrollbar-color: #485952 #080c0e; }
.scene-viewport:focus-visible { outline: 2px solid #c7ff6b; outline-offset: -3px; }
.scene-svg { display: block; width: 100%; min-width: 850px; height: auto; isolation: isolate; color: #dcebe5; font-family: "Arial", "Microsoft YaHei", sans-serif; }
.scene-svg text { user-select: none; }
.scene-reticle { fill: none; stroke: #70867d; stroke-width: 1; opacity: .5; }
.scene-code { fill: #93aaa0; font: 11px monospace; letter-spacing: 1.2px; }
.scene-caption { fill: #8eaaa0; font-size: 12px; letter-spacing: .8px; }
.scene-device-base { fill: #122321; fill-opacity: .8; stroke: #3c5f52; stroke-width: .8; }
.scene-device-edge { fill: none; stroke: #7b9c92; stroke-width: .9; stroke-linejoin: round; }
.scene-metal { fill: #203a38; stroke: #81a99a; stroke-width: .9; stroke-linejoin: round; }
.scene-light-metal { fill: #304d47; stroke: #a3bba7; stroke-width: .8; stroke-linejoin: round; }
.scene-light { fill: #c7ff6b; }
.scene-panel { fill: #173946; stroke: #87bfce; stroke-width: .8; }
.scene-panel-grid { fill: none; stroke: #448499; stroke-width: .55; }
.scene-glass { fill: #7ab3bd; stroke: #acd7d4; stroke-width: .8; }
.scene-wheel { fill: #080c0e; stroke: #8c9d91; stroke-width: 2.2; }
.scene-vents { fill: none; stroke: #92ae93; stroke-width: .6; }
.scene-grille { fill: none; stroke: #b4c3ac; stroke-width: 1.3; }
.scene-tank-label { fill: #c7ff6b; font: 13px monospace; }
.scene-pipe { fill: none; stroke: #96c2b5; stroke-width: 3; stroke-linejoin: round; }
.scene-pit { fill: #102326; fill-opacity: .35; stroke: #73918b; stroke-width: .8; }
.scene-conveyor { fill: #9fb3a0; stroke: #cee1c9; stroke-width: .5; }
.scene-power-wire { fill: none; stroke: #a3c9c4; stroke-width: 1; }
.scene-turbine { animation: scene-wind 12s linear infinite; }
.scene-device-wind .scene-device-base { opacity: .65; }
.scene-device-hub { color: #c7ff6b; }
.scene-hub-orbit { fill: #c7ff6b; fill-opacity: .025; stroke: #b9ed73; stroke-opacity: .45; stroke-width: .8; }
.scene-hub-orbit:first-child { stroke-dasharray: 30 6 4 6; animation: scene-orbit 28s linear infinite; }
.scene-hub-core { fill: #334c30; stroke: #d0ff84; stroke-width: 1.2; }
.scene-flow-track { fill: none; stroke: #101e23; stroke-width: 8; stroke-linejoin: bevel; }
.scene-flow-line { fill: none; stroke: #90c7c3; stroke-linejoin: bevel; stroke-opacity: .38; }
.scene-flow-active .scene-flow-line { stroke-opacity: .9; }
.scene-flow-pulse { fill: none; stroke: #d3ffef; stroke-width: 2; stroke-linecap: round; stroke-linejoin: bevel; stroke-dasharray: 4 25; animation: scene-current 2.8s linear infinite; }
.scene-flow-reverse .scene-flow-pulse { animation-direction: reverse; }
.scene-flow-storage .scene-flow-pulse { stroke: #c7ff6b; }
.scene-flow-idle .scene-flow-line { stroke: #6c8984; stroke-dasharray: 4 7; stroke-opacity: .4; }
.scene-flow-boundary .scene-flow-line { stroke: #94b7ce; }
.scene-flow-boundary .scene-flow-pulse { stroke: #c5e6ff; }
.scene-transport { fill: none; stroke: #718866; stroke-width: 2; stroke-dasharray: 3 6; opacity: .55; }
.scene-label { fill: #d5e4dd; font-size: 14px; font-weight: 400; letter-spacing: .25px; paint-order: stroke; stroke: #080c0e; stroke-width: 4px; }
.scene-value { fill: #c7ff6b; font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: .2px; paint-order: stroke; stroke: #080c0e; stroke-width: 4px; }
.scene-asset-extension .scene-device { opacity: .42; filter: saturate(.3); }
.scene-asset-extension .scene-label { fill: #8ba19a; }
.scene-extension-label { fill: #80958e; font-size: 11.5px; letter-spacing: 1px; }
.scene-asset-extension .scene-turbine { animation-play-state: paused; }
.scene-hub-label { fill: #c7ff6b; font-size: 14px; letter-spacing: 1px; }
.scene-hub-detail { fill: #86a293; font: 11px monospace; letter-spacing: 1.5px; }
.scene-boundary-label { fill: #c1d4d3; font-size: 12.5px; }
.scene-boundary-value { fill: #9db9c2; font: 11.5px monospace; }
.scene-island { cursor: pointer; outline: none; }
.scene-island-hit { fill: #0d191b; fill-opacity: .8; stroke: #2c4442; stroke-width: 1; transition: fill .2s ease, stroke .2s ease; }
.scene-island:hover .scene-island-hit, .scene-island:focus-visible .scene-island-hit { fill: #192b29; stroke: #c7ff6b; }
.scene-island-selected .scene-island-hit { stroke: #6f984f; }
.scene-island:focus-visible { outline: none; }
.scene-island-platform { fill: #132d2a; fill-opacity: .8; stroke: #61836e; stroke-width: 1; }
.scene-island-edge { fill: none; stroke: #39584a; stroke-width: 1; }
.scene-island-bus { fill: none; stroke: #b2e879; stroke-opacity: .5; stroke-width: 1; }
.scene-island-name { fill: #e3eee5; font-size: 16px; letter-spacing: .8px; }
.scene-island-index { fill: #96aa9c; font: 9px monospace; letter-spacing: .3px; }
.scene-island-value { fill: #93aea7; font-size: 11px; }
.scene-island-value tspan { fill: #c6e0da; font-size: 13px; font-variant-numeric: tabular-nums; }
.scene-island-status { fill: #c7ff6b; font-size: 13px; font-variant-numeric: tabular-nums; }
.scene-island-action { fill: #a5b9ac; font-size: 12px; letter-spacing: .7px; }
.scene-island:hover .scene-island-action, .scene-island:focus-visible .scene-island-action { fill: #c7ff6b; }
.scene-link-reading rect { fill: #0a171b; stroke: #456c6a; stroke-width: .7; }
.scene-link-reading text { fill: #c3e9e4; font: 12px monospace; font-variant-numeric: tabular-nums; }
.scene-network-core { opacity: .72; }
.scene-os > ellipse { fill: none; stroke: #45615d; stroke-width: .7; stroke-dasharray: 3 8; opacity: .5; }
.scene-os > path { fill: none; stroke: #688a66; stroke-width: 1; stroke-dasharray: 2 5; opacity: .45; }
.scene-os-chip { fill: #1d3329; stroke: #abc988; stroke-width: 1; }
.scene-os-title { fill: #d5edbd; font-size: 11px; letter-spacing: .3px; }
.scene-os-detail { fill: #91ac91; font-size: 8px; letter-spacing: .8px; }
.scene-scroll-hint { display: none; margin: 0; padding: 12px 18px; background: #0a1114; color: #a0b4ad; font-size: 11px; border-top: 1px solid #243732; line-height: 1.5; }
.scene-scroll-hint span { color: #c7ff6b; margin-right: 5px; }
@keyframes scene-current { to { stroke-dashoffset: -58; } }
@keyframes scene-wind { to { transform: rotate(360deg); } }
@keyframes scene-orbit { to { stroke-dashoffset: -460; } }
@media (max-width: 1050px) {
  .scene-scroll-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-turbine, .scene-flow-pulse, .scene-hub-orbit:first-child { animation: none; }
  .scene-island-hit { transition: none; }
}