/* Connection annotations and white feathering at the actual source-frame edges. */
.system-page .frame-vignette{position:absolute;z-index:2;pointer-events:none;background:linear-gradient(0deg,#fff 0%,#ffffffed 12%,#ffffff80 48%,#ffffff00 100%) bottom/100% var(--fade-bottom) no-repeat,linear-gradient(180deg,#fff,#ffffff00) top/100% var(--fade-top) no-repeat,linear-gradient(90deg,#fff,#ffffff00) left/var(--fade-side) 100% no-repeat,linear-gradient(270deg,#fff,#ffffff00) right/var(--fade-side) 100% no-repeat}
.system-page .utilities-status{display:none}
.system-page .connection-labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.system-page .connection-label{position:absolute;width:max-content;transform:translate(-50%,-50%);color:var(--connection-color)}
.system-page .connection-chip{display:flex;align-items:center;gap:9px;padding:9px 13px 9px 9px;border:1px solid var(--brand-line);border-radius:13px;background:#ffffffed;box-shadow:0 5px 22px color-mix(in srgb, var(--primary-dark) 3.922%, transparent);animation:connection-entrance .5s ease both}
.system-page .connection-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--connection-color) 9%,white)}
.system-page .connection-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.system-page .connection-chip b{font-size:11px;font-weight:450;color:var(--primary-dark);white-space:nowrap}
.system-page .connection-chip i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:connection-alive 2.4s ease-in-out infinite}
.system-page .connection-leader{stroke-width:1;stroke-linecap:round;stroke-dasharray:3 4}
@keyframes connection-entrance{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes connection-alive{50%{opacity:.35;box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-tint) 33.333%, transparent)}}
.system-page .online-panel{display:flex;align-items:center;gap:14px;position:relative;margin:0 0 18px;padding:17px 18px;width:min(100%,330px);border:1px solid var(--brand-line);border-radius:18px;background:linear-gradient(120deg,#fff,var(--bg-gray));box-shadow:0 10px 35px color-mix(in srgb, var(--primary-dark) 3.137%, transparent);animation:connection-entrance .6s ease both;text-align:left}
.system-page .online-emblem{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;background:var(--brand-tint);color:var(--primary-dark)}
.system-page .online-emblem svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.system-page .online-eyebrow{display:block;font-size:11px;font-weight:450;letter-spacing:.08em;color:var(--text-gray);margin-bottom:5px}
.system-page .online-panel strong{display:block;font-size:20px;line-height:1.1;letter-spacing:-.035em;font-weight:500;color:var(--text-dark)}
.system-page .online-meta{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:10px;color:#27836c}
.system-page .online-meta i{width:6px;height:6px;background:#24b18a;border-radius:50%;box-shadow:0 0 0 3px #24b18a10;animation:online-pulse 2.4s ease-in-out infinite}
.system-page .online-check{margin-left:auto;width:21px;height:21px;color:#249d7e;flex-shrink:0}
@keyframes online-pulse{50%{box-shadow:0 0 0 6px #24b18a08}}
.system-page .device-link{position:absolute;z-index:4;width:82px;height:86px;transform:translateX(-50%);pointer-events:none}
.system-page .device-signal{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(150deg,var(--secondary),var(--primary-dark));border:1px solid var(--primary-dark);border-radius:23px;box-shadow:0 10px 22px color-mix(in srgb, var(--primary-dark) 10.588%, transparent),inset 0 1px 0 #ffffff40;color:white;animation:connection-entrance .6s ease both}
.system-page .device-signal:after{content:'';position:absolute;left:50%;top:100%;height:13px;width:1px;background:linear-gradient(var(--text-gray),var(--brand-tint))}
.system-page .device-signal svg{width:50px;height:39px;fill:none;stroke:white;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.system-page .device-signal svg path{animation:signal-breathe 2.8s ease-in-out infinite}
.system-page .device-signal svg path:nth-child(2){animation-delay:.18s}
.system-page .device-signal svg path:nth-child(3){animation-delay:.36s}
.system-page .device-signal small{font-size:8px;letter-spacing:.16em;font-weight:450}
@keyframes signal-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@media(orientation:portrait){
 .system-page .system-stage[data-mode=online] .story-description{display:none}
 .system-page .system-stage[data-mode=online] .story-shade{background:linear-gradient(180deg,#fffffffA 0%,#fffffff2 var(--copy-bottom,210px),#ffffff00 calc(var(--copy-bottom,210px) + 30px))}
 .system-page .online-panel{margin:0 auto;padding:12px 16px;width:max-content;max-width:100%;gap:12px;min-width:264px}
 .system-page .online-panel strong{font-size:18px}
 .system-page .online-eyebrow{font-size:9px;margin-bottom:4px}
 .system-page .online-meta{display:none}
 .system-page .online-emblem{width:38px;height:38px;border-radius:11px}
 .system-page .online-check{margin-left:9px;width:19px}
}
@media(orientation:portrait) and (max-width:360px){.system-page .system-stage[data-mode=online] .story-copy{top:51px}}
@media(max-width:600px){
 .system-page .connection-chip{padding:6px 8px 6px 6px;gap:6px;border-radius:10px}
 .system-page .connection-icon{width:21px;height:21px;border-radius:6px}
 .system-page .connection-icon svg{width:16px;height:16px}
 .system-page .connection-chip b{font-size:9px}
 .system-page .connection-chip i{width:3px;height:3px}
 .system-page .device-link{width:62px;height:65px}
 .system-page .device-signal{border-radius:18px;gap:2px}
 .system-page .device-signal svg{width:40px;height:31px;stroke-width:2.5}
 .system-page .device-signal small{font-size:7px}
}
@media(orientation:landscape) and (max-height:650px){
 .system-page .online-panel{padding:11px 12px;margin:0 0 12px;gap:10px;border-radius:14px}
 .system-page .online-emblem{width:33px;height:33px;border-radius:10px}
 .system-page .online-emblem svg{width:22px;height:22px}
 .system-page .online-panel strong{font-size:16px}
 .system-page .online-eyebrow{font-size:8px;margin-bottom:4px}
 .system-page .online-meta{font-size:8px;margin-top:4px}
 .system-page .online-check{width:17px}
 .system-page .device-link{width:58px;height:60px}
 .system-page .device-signal{border-radius:17px;gap:2px}
 .system-page .device-signal svg{width:37px;height:29px}
 .system-page .device-signal small{font-size:6px}
 .system-page .connection-chip{padding:5px 8px;gap:6px}
 .system-page .connection-chip b{font-size:9px}
 .system-page .connection-icon{width:20px;height:20px}
}
@media(orientation:landscape) and (max-height:530px){
 .system-page .device-link{width:46px;height:46px}
 .system-page .device-signal{border-radius:14px;gap:0}
 .system-page .device-signal svg{width:33px;height:26px}
 .system-page .device-signal small{font-size:5px}
}
@media(prefers-reduced-motion:reduce){.system-page .connection-chip,.system-page .connection-chip i,.system-page .online-panel,.system-page .online-meta i,.system-page .device-signal,.system-page .device-signal svg path{animation:none}}