/* Samet Site Core — permanent functional UI */
.ssc-flag-ribbon{height:var(--ssc-flag-h,18px);overflow:hidden;background:#e30a17;position:relative;z-index:10000}.ssc-flag-ribbon-link{display:block;height:100%;color:inherit;text-decoration:none}.ssc-flag-track{display:flex;width:max-content;height:100%;animation:sscFlagFlow var(--ssc-flag-speed,22s) linear infinite;will-change:transform}.ssc-flag-ribbon.is-reverse .ssc-flag-track{animation-direction:reverse}.ssc-flag-ribbon.is-pausable:hover .ssc-flag-track{animation-play-state:paused}.ssc-flag-set{display:flex;height:100%;flex:0 0 auto}.ssc-flag-cell{width:34px;height:100%;display:grid;place-items:center;border-right:1px solid rgba(255,255,255,.08)}.ssc-flag-cell img{height:calc(var(--ssc-flag-h,18px) - 4px);width:auto;display:block}@keyframes sscFlagFlow{to{transform:translateX(-50%)}}

.ssc-topology{margin:32px 0;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;background:#0a0c0f}.ssc-topology figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.ssc-topology figcaption strong{font-size:14px}.ssc-topology figcaption span{font-size:11px;opacity:.56}.ssc-topology-canvas{position:relative;aspect-ratio:16/9;min-height:330px;background:radial-gradient(circle at 50% 45%,rgba(35,58,68,.18),transparent 48%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}.ssc-topology-lines{position:absolute;inset:0;width:100%;height:100%;color:#4bd8e8}.ssc-topology-lines line{stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.62}.ssc-topology-lines text{fill:#b5c5ca;font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;paint-order:stroke;stroke:#0a0c0f;stroke-width:7px;stroke-linejoin:round}.ssc-topology-node{position:absolute;transform:translate(-50%,-50%);width:132px;min-height:62px;padding:10px 12px;border:1px solid rgba(105,221,231,.32);border-radius:10px;background:rgba(16,21,25,.95);box-shadow:0 10px 35px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);display:flex;flex-direction:column;justify-content:center;gap:4px;text-align:left}.ssc-topology-node span{font-size:8px;letter-spacing:.12em;color:#55dbe8}.ssc-topology-node strong{font-size:11px;line-height:1.2;color:#f1f4f5}.ssc-topology-node:before{content:"";position:absolute;left:-3px;top:12px;bottom:12px;width:2px;border-radius:4px;background:#55dbe8;box-shadow:0 0 8px rgba(85,219,232,.65)}
@media(max-width:700px){.ssc-topology{margin-inline:-4px}.ssc-topology figcaption{align-items:flex-start;flex-direction:column}.ssc-topology-canvas{min-height:300px;overflow:auto}.ssc-topology-node{width:92px;min-height:52px;padding:7px 8px}.ssc-topology-node strong{font-size:9px}.ssc-topology-lines text{font-size:8px}}
@media(prefers-reduced-motion:reduce){.ssc-flag-track{animation:none}}
/* lightweight equipment silhouettes inside topology nodes */
.ssc-topology-node .ssc-device-icon{position:absolute;right:8px;top:8px;width:25px;height:17px;border:1px solid #46535a;border-radius:3px;opacity:.75;background:#11181c}.ssc-topology-node[data-device-type="plc"] .ssc-device-icon{background:repeating-linear-gradient(90deg,#172127 0 5px,#3c4b51 5px 6px);box-shadow:inset -3px 0 #21c7d5}.ssc-topology-node[data-device-type="hmi"] .ssc-device-icon{border-color:#4acbda;background:linear-gradient(135deg,#19333b,#0c1418);box-shadow:inset 0 0 0 2px #0c1012}.ssc-topology-node[data-device-type="switch"] .ssc-device-icon{background:radial-gradient(circle,#65e9f2 0 1.2px,transparent 1.7px) 3px 8px/6px 6px repeat-x,#101619}.ssc-topology-node[data-device-type="pc"] .ssc-device-icon{height:15px;border-color:#778087}.ssc-topology-node[data-device-type="pc"] .ssc-device-icon:after{content:"";position:absolute;width:8px;height:3px;border-top:1px solid #778087;border-bottom:1px solid #778087;left:8px;bottom:-6px}.ssc-topology-node[data-device-type="server"] .ssc-device-icon{background:repeating-linear-gradient(180deg,#172127 0 4px,#4f666e 4px 5px)}.ssc-topology-node[data-device-type="drive"] .ssc-device-icon,.ssc-topology-node[data-device-type="tool"] .ssc-device-icon{background:linear-gradient(90deg,#1a2226 70%,#df8b28 70%);border-color:#56636a}.ssc-topology-node[data-device-type="rfid"] .ssc-device-icon{border-radius:50%;width:20px;height:20px;background:radial-gradient(circle at center,transparent 0 3px,#46dbe8 3px 4px,transparent 4px 7px,#46dbe8 7px 8px,transparent 8px)}.ssc-topology-node[data-device-type="sensor"] .ssc-device-icon{width:20px;border-radius:9px;background:linear-gradient(90deg,#1b2428 0 65%,#52dae6 65%)}.ssc-topology-node[data-device-type="robot"] .ssc-device-icon{border:none;background:linear-gradient(135deg,transparent 38%,#7b8b92 39% 48%,transparent 49%),radial-gradient(circle at 72% 20%,#55dbe8 0 2px,transparent 3px)}


/* SSC 1.2 — topology rendering improvements */
.ssc-topology-viewport{overflow:hidden}
.ssc-topology-lines .ssc-wire{
  fill:none;stroke:#4bd8e8;stroke-width:1.65;vector-effect:non-scaling-stroke;opacity:.68
}
.ssc-topology-lines .ssc-wire-label rect{
  fill:rgba(16,24,28,.94);stroke:rgba(83,213,226,.33);stroke-width:1;vector-effect:non-scaling-stroke
}
.ssc-topology-lines .ssc-wire-label text{
  fill:#d5e2e5;font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  stroke:none;paint-order:normal
}
@media(max-width:700px){
  .ssc-topology-viewport{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .ssc-topology-canvas{width:680px;min-width:680px;min-height:382px}
  .ssc-topology-node{width:108px;min-height:56px;padding:8px 9px}
  .ssc-topology-node strong{font-size:9.5px}
}


/* =========================================================
   SSC 1.8 — TOPOLOGY DESKTOP SCALE
   Desktop gets a much larger engineering canvas.
   Existing mobile horizontal-scroll behavior is preserved.
   ========================================================= */
@media (min-width: 901px){
  .ssc-topology{
    width:100%;
    margin:34px 0;
  }

  .ssc-topology-viewport{
    width:100%;
    overflow:visible;
  }

  .ssc-topology-canvas{
    width:100% !important;
    min-width:0 !important;
    min-height:560px !important;
    aspect-ratio:16/8.5 !important;
    background-size:auto,40px 40px,40px 40px;
  }

  .ssc-topology-node{
    width:158px !important;
    min-height:78px !important;
    padding:13px 15px !important;
    border-radius:12px;
  }

  .ssc-topology-node span{
    font-size:8.5px !important;
  }

  .ssc-topology-node strong{
    font-size:13px !important;
    line-height:1.25;
  }

  .ssc-topology-lines .ssc-wire,
  .ssc-topology-lines line{
    stroke-width:2.1 !important;
  }

  .ssc-topology-lines .ssc-wire-label text,
  .ssc-topology-lines text{
    font-size:11.5px !important;
  }

  .ssc-topology figcaption{
    padding:18px 20px;
  }

  .ssc-topology figcaption strong{
    font-size:16px;
  }

  .ssc-topology figcaption span{
    font-size:11.5px;
  }
}

@media (min-width: 1280px){
  .ssc-topology-canvas{
    min-height:620px !important;
  }

  .ssc-topology-node{
    width:170px !important;
    min-height:84px !important;
  }

  .ssc-topology-node strong{
    font-size:14px !important;
  }

  .ssc-topology-lines .ssc-wire-label text,
  .ssc-topology-lines text{
    font-size:12px !important;
  }
}

/* Keep tablet/mobile compact and horizontally scrollable. */
@media (max-width: 900px){
  .ssc-topology-viewport{
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
}


/* =========================================================
   SSC 1.9 — DESKTOP BREAKOUT WIDTH MODES
   The project body is intentionally narrow for reading. Topology diagrams
   can break out of that text column on desktop while mobile stays scrollable.
   ========================================================= */
@media (min-width: 901px){
  .ssc-topology{
    position:relative;
    max-width:none !important;
  }

  .ssc-topology--normal{
    width:100% !important;
    margin-left:0 !important;
    transform:none !important;
  }

  .ssc-topology--wide{
    width:min(1240px,calc(100vw - 72px)) !important;
    max-width:none !important;
    margin-left:50% !important;
    margin-right:0 !important;
    transform:translateX(-50%) !important;
  }

  .ssc-topology--full{
    width:min(1560px,calc(100vw - 28px)) !important;
    max-width:none !important;
    margin-left:50% !important;
    margin-right:0 !important;
    transform:translateX(-50%) !important;
  }

  .ssc-topology--wide .ssc-topology-canvas,
  .ssc-topology--full .ssc-topology-canvas{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:16/9 !important;
  }

  .ssc-topology--wide .ssc-topology-node,
  .ssc-topology--full .ssc-topology-node{
    width:164px !important;
    min-height:80px !important;
  }

  .ssc-topology--full .ssc-topology-node{
    width:176px !important;
    min-height:86px !important;
  }
}

@media (min-width: 1400px){
  .ssc-topology--wide .ssc-topology-node{width:174px !important;min-height:84px !important}
  .ssc-topology--full .ssc-topology-node{width:188px !important;min-height:90px !important}
  .ssc-topology--full .ssc-topology-node strong{font-size:14.5px !important}
}

/* Mobile/tablet portrait: ignore desktop breakout modes entirely. */
@media (max-width: 900px){
  .ssc-topology,
  .ssc-topology--normal,
  .ssc-topology--wide,
  .ssc-topology--full{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:none !important;
  }
}


/* SSC 2.0 — restrained desktop topology scale */
@media (min-width:901px){
  .ssc-topology,.ssc-topology--normal,.ssc-topology--wide,.ssc-topology--full{position:relative;max-width:none!important;border-radius:16px}
  .ssc-topology--normal{width:100%!important;margin:28px 0!important;transform:none!important}
  .ssc-topology--wide{width:min(980px,calc(100vw - 96px))!important;margin:30px 0 30px 50%!important;transform:translateX(-50%)!important}
  .ssc-topology--full{width:min(1160px,calc(100vw - 72px))!important;margin:32px 0 32px 50%!important;transform:translateX(-50%)!important}
  .ssc-topology-viewport{width:100%!important;overflow:hidden!important}
  .ssc-topology-canvas,.ssc-topology--wide .ssc-topology-canvas,.ssc-topology--full .ssc-topology-canvas{width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;aspect-ratio:16/9!important;background-size:auto,34px 34px,34px 34px!important}
  .ssc-topology-node,.ssc-topology--wide .ssc-topology-node,.ssc-topology--full .ssc-topology-node{width:126px!important;min-height:62px!important;padding:10px 12px!important;border-radius:10px!important}
  .ssc-topology--full .ssc-topology-node{width:132px!important;min-height:64px!important}
  .ssc-topology-node span{font-size:7.5px!important}.ssc-topology-node strong{font-size:10.8px!important;line-height:1.22!important}
  .ssc-topology-node .ssc-device-icon{width:23px!important;height:16px!important;transform:none!important}
  .ssc-topology-lines .ssc-wire,.ssc-topology-lines line{stroke-width:1.65!important}
  .ssc-topology-lines .ssc-wire-label text,.ssc-topology-lines text{font-size:9.5px!important}
  .ssc-topology figcaption{padding:14px 17px!important}.ssc-topology figcaption strong{font-size:13.5px!important}.ssc-topology figcaption span{font-size:10px!important}
}
@media (min-width:1400px){.ssc-topology--wide{width:min(1040px,calc(100vw - 140px))!important}.ssc-topology--full{width:min(1200px,calc(100vw - 110px))!important}}
@media (max-width:900px){
  .ssc-topology,.ssc-topology--normal,.ssc-topology--wide,.ssc-topology--full{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;transform:none!important}
  .ssc-topology-viewport{overflow-x:auto!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
}


/* =========================================================
   SSC 2.1 — USER-CONTROLLED DESKTOP TOPOLOGY
   This is intentionally the final desktop override. Previous normal/wide/full
   experiments are ignored on desktop. Mobile retains its existing layout.
   ========================================================= */
@media (min-width:901px){
  .ssc-topology.ssc-topology--user{
    position:relative!important;
    width:min(var(--ssc-user-width,820px),calc(100vw - 40px))!important;
    max-width:none!important;
    margin-top:var(--ssc-user-gap,26px)!important;
    margin-bottom:var(--ssc-user-gap,26px)!important;
    margin-left:50%!important;
    margin-right:0!important;
    transform:translateX(calc(-50% + var(--ssc-user-x,0px)))!important;
    overflow:hidden!important;
  }
  .ssc-topology.ssc-topology--user .ssc-topology-viewport{width:100%!important;overflow:hidden!important}
  .ssc-topology.ssc-topology--user .ssc-topology-canvas{
    width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;
    aspect-ratio:16/9!important;background-size:auto,32px 32px,32px 32px!important;
  }
  .ssc-topology.ssc-topology--user .ssc-topology-node{
    width:132px!important;min-height:62px!important;padding:10px 12px!important;
    transform:translate(-50%,-50%) scale(var(--ssc-user-node-scale,1))!important;
    transform-origin:center center!important;
  }
  .ssc-topology.ssc-topology--user .ssc-topology-node span{font-size:8px!important}
  .ssc-topology.ssc-topology--user .ssc-topology-node strong{font-size:11px!important;line-height:1.2!important}
  .ssc-topology.ssc-topology--user .ssc-topology-lines .ssc-wire{stroke-width:1.65!important}
  .ssc-topology.ssc-topology--user .ssc-topology-lines .ssc-wire-label text{font-size:10px!important}
}
@media (max-width:900px){
  .ssc-topology.ssc-topology--user{
    width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;
    transform:none!important;
  }
  .ssc-topology.ssc-topology--user .ssc-topology-viewport{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .ssc-topology.ssc-topology--user .ssc-topology-node{transform:translate(-50%,-50%)!important}
}