/* The heroshot's live connection signature, adapted to the white System stage. */
.system-page .system-signal-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.system-page .system-live-status{display:flex;align-items:center;gap:16px;margin:2px 0 25px;padding:8px 0 8px 7px;color:var(--text-gray);font-size:13px;font-weight:450;letter-spacing:.2em;line-height:1.5;animation:connection-entrance .5s ease both}
.system-page .system-live-lamp{position:relative;width:12px;height:12px;border-radius:50%;background:var(--success);box-shadow:0 0 12px color-mix(in srgb, var(--success) 66.667%, transparent);flex:none}
.system-page .system-live-lamp:before,.system-page .system-live-lamp:after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--success);opacity:0;animation:system-signal-live 1s ease-out infinite}
.system-page .system-live-lamp:after{border-width:1px;animation-delay:.18s}
@keyframes system-signal-live{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@media(orientation:portrait){
 .system-page .system-live-status{justify-content:center;margin:0 auto;gap:13px;padding:8px 0;font-size:11px}
 .system-page .system-live-lamp{width:10px;height:10px}
}
@media(orientation:landscape) and (max-height:650px){
 .system-page .system-live-status{font-size:10px;gap:12px;margin-bottom:12px;padding:6px 0 6px 4px}
 .system-page .system-live-lamp{width:9px;height:9px}
}
@media(prefers-reduced-motion:reduce){.system-page .system-live-status,.system-page .system-live-lamp:before,.system-page .system-live-lamp:after{animation:none}}