.network { margin: 0; min-width: 0; }
.network-stage { height: 500px; position: relative; margin: -30px -25px 0 -30px; background: radial-gradient(ellipse at 52% 51%, #102c3766 0, transparent 63%); }
.network-stage canvas, .network-fallback { position: absolute; width: 100%; height: 100%; inset: 0; }
.network-stage canvas { cursor: grab; touch-action: pan-y; }
.network-stage canvas:active { cursor: grabbing; }
.network-fallback { color: var(--ice); opacity: .65; padding: 35px; }
.network-stage.is-rendered .network-fallback { display: none; }
.scene-caption { position: absolute; bottom: 4px; right: 25px; font-size: 11px; color: #a0b6c4; pointer-events: none; }
.network figcaption { padding: 22px 0 18px; border-bottom: 1px solid #29363f; display: flex; justify-content: space-between; gap: 12px; }
.network figcaption strong { font-size: 15px; font-weight: 500; }
.network figcaption p { font-size: 12px; color: #a6b6c1; margin: 4px 0 0; }
.art-label { align-self: flex-start; font-size: 11px; padding: 3px 8px; border: 1px solid #364652; border-radius: 3px; color: #b3c2cc; white-space: nowrap; }
.scene-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.scene-controls button { color: #bacbd6; background: none; border: 1px solid #344550; border-radius: 3px; min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 12px; }
.scene-controls button:hover { color: white; background: #182a37; }
#motion-status { font-size: 11px; color: #9fb3bf; margin-left: auto; }

@media (max-width:780px) { .network-stage { height:380px; margin:0; }.network figcaption { padding-top:12px; } }
@media (max-width:420px) { .network-stage { height:290px; }.scene-controls button { padding:8px 9px; }#motion-status { flex-basis:100%; margin:5px 0 0; } }