#launch { color:#081a34; font-family:var(--page-font); }
#launch h2 em { color:#3868a7; }
#launch .step {
  align-items:flex-start; border:1px solid #c1d2e7; border-radius:15px;
  background:linear-gradient(135deg,#fff,#f2f7ff);
  box-shadow:0 4px 10px -8px #355a8e55;
}
#launch .step > b { color:#386daf; font-weight:550; font-variant-numeric:tabular-nums; line-height:1.25; }
#launch .step > div { flex:1; min-width:0; }
#launch .step h3 { font:600 clamp(16px,1.45vw,22px)/1.24 var(--page-font); letter-spacing:-.035em; }
#launch .step-open { width:100%; display:flex; align-items:start; justify-content:space-between; gap:7px; }
#launch .step-open span { flex:none; text-align:center; width:21px; height:21px; margin:0; border-radius:50%; background:#e7f0fb; color:#315c8c; font-size:14px; line-height:21px; }
#launch .step p { color:#455d79; }
#launch .step:has([aria-expanded=true]),#launch .step:focus-within { background:#e9f3ff; border-color:#6d9dd4; }
@media(hover:hover) {
  #launch .step:hover { background:#e2efff; border-color:#658fc6; box-shadow:0 4px 14px #5982b620; }
}
.step-detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s var(--ease); }
.step-detail > div { min-height:0; overflow:hidden; }
.step-detail:not([inert]) { grid-template-rows:1fr; }
#launch .launch-close > p { margin:12px auto 0; max-width:53ch; color:#506580; }
#launch .launch-close > .primary { margin-top:24px; }
#launch .launch-close h3 { font:550 clamp(24px,2.25vw,36px)/1.15 var(--page-font); letter-spacing:-.04em; }

@media(prefers-reduced-motion:reduce) {
  #launch .step-detail,#launch .step,#launch .primary { transition:none; }
}

.oct-continuation #launch {
  --route: #396eaf;
  --rim: #c1d2e7;
  --surface: #f7faff;
  background: radial-gradient(ellipse at 43% 48%, #e8f2ff 0%, var(--surface) 68%);
}
#launch > .wrap { width:min(1480px,calc(100% - 2 * var(--gutter))); padding-block:clamp(48px,4.6vw,76px); }
#launch h2 { font:500 clamp(42px,4.85vw,78px)/1.04 var(--page-font); letter-spacing:-.047em; }
#launch h2 em { color:var(--route); }
#launch .launch-scene { display:block; width:100%; margin:clamp(28px,2.4vw,40px) auto; }
#launch .launch-scene .journey {
  position:relative; width:100%; display:grid; grid-template-columns:minmax(0,1fr);
  padding-inline:clamp(85px,11.5vw,205px);
  gap:clamp(18px,1.65vw,28px); border:0;
}
#launch .journey .step {
  width:46.75%; min-width:0; align-items:center;
  padding:clamp(15px,1.15vw,20px); gap:clamp(12px,1.15vw,20px);
  border:1px solid var(--rim); border-radius:16px;
  background:linear-gradient(125deg,#fff,#f2f7ff);
  box-shadow:inset 0 1px #fff,0 7px 18px -13px #28548d7a;
}
#launch .step > b {
  padding-right:clamp(12px,1.1vw,18px); border-right:1px solid var(--rim);
  color:var(--route); font:550 clamp(26px,2.3vw,38px)/1.45 var(--page-font); letter-spacing:-.05em;
}
#launch .step .step-open { font-weight:600; }
#launch .step-open span { background:#deedff; color:var(--cobalt); }
#launch .step:focus-within,#launch .step:has([aria-expanded="true"]) { border-color:#6d9dd4; background:#e9f3ff; }
@media(hover:hover) {
  #launch .journey .step:hover { border-color:#658fc6; background:#e2efff; box-shadow:0 4px 14px #5982b620; }
}
#launch .network-map {
  position:absolute; display:block; inset:0; width:100%; height:100%; pointer-events:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.network-map .conductor { stroke:#a8c8ef; stroke-width:4.5; }
.network-map .transmission { stroke:var(--route); stroke-width:1.7; }
.network-map .branch .conductor { stroke:#bdd6f2; stroke-width:2; }
.network-map .branch .transmission { stroke:#7298bd; stroke-width:1; }
.network-map .port,.network-map .terminal rect { fill:#e7f0fb; stroke:#5989bc; stroke-width:1.2; }
.network-map .terminal circle { fill:var(--blue); }
.network-map .trail { opacity:0; }
.network-map .trail { stroke:#70c8ff; stroke-width:3; }
.network-map .branch .trail { stroke-width:2; }

#launch[data-network-running] :is(.step,.trace,.launch-close):not(.connected) { visibility:hidden; }
#launch[data-network-running] .trace:not(.terminated) .terminal { visibility:hidden; }
@media(max-width:900px) and (min-width:721px) {
  #launch .launch-scene .journey { padding-inline:7%; gap:22px; }
  #launch .step h3 { font-size:17px; }
}
@media(max-width:720px) {
  #launch .launch-scene .journey { padding-inline:clamp(15px,4vw,24px); gap:25px; }
  #launch .journey .step { width:100%; padding:13px 11px; gap:10px; }
  #launch .step > b { font-size:24px; padding-right:9px; }
  #launch .step p { font-size:14px; }
  #launch .network-map .terminal rect { rx:2px; }
}

/* Only the travelling light and the port response change the desktop surface. */
.network-map .signal { opacity:0; }
.network-map .signal .halo { fill:var(--blue); opacity:.23; }
.network-map .signal .edge { fill:#70c8ff; }
.network-map .signal .core { fill:#fff; }
.network-map .signal { filter:drop-shadow(0 0 2px #70c8ff); }
.network-map .branch .signal .halo { r:5.5px; }
.network-map .branch .signal .edge { r:3px; }
.network-map .branch .signal .core { r:1.85px; }
.network-map .terminal rect { fill:#deedff; stroke:var(--route); }
.network-map .terminal .socket { fill:var(--blue); filter:drop-shadow(0 0 1px #70c8ff); }
.network-map .terminal .contact { fill:#fff; }
.network-map .terminal .flash { fill:none; stroke:#70c8ff; opacity:0; }
#launch[data-network-running] .connected:not(.terminated) :is(.conductor,.transmission) {
  stroke-dasharray:100 200; stroke-dashoffset:var(--remaining,100);
}
@media(prefers-reduced-motion:no-preference) {
  #launch .terminated .terminal .flash { animation:port-arrival 240ms ease-out; }
  #launch .step.connected:not(:first-of-type)::before {
    content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit;
    border:1px solid #70aff0; box-shadow:inset 0 0 14px #82c4ff40;
    opacity:0; animation:step-arrival 320ms ease-out;
  }
}
@keyframes port-arrival {
  from {opacity:.85;transform:scale(.62)}
  to {opacity:0;transform:scale(1.45)}
}
@keyframes step-arrival { 0%,22% {opacity:1} 100% {opacity:0} }

@media(max-width:720px) {
  /* Borrow the outside gutter on the wired side only, keeping room for copy. */
  #launch .launch-scene {
    width:calc(100% + 16px); margin-inline:-8px;
  }
  #launch .launch-scene .journey {
    --branch-room:clamp(43px,15vw,76px); padding-inline:0;
  }
  #launch .journey .step {
    width:calc(100% - var(--branch-room) - 5px);
  }
  #launch .journey .step:nth-of-type(odd) {margin-left:var(--branch-room);}
  #launch .journey .step:nth-of-type(even) {margin-left:5px;}
}

.network-map .backbone .signal {
  filter:drop-shadow(0 0 2.8px #589fff);
}
.network-map .backbone .signal .halo { r:8px; fill:#589fff; opacity:.36; }
.network-map .backbone .signal .edge { r:4.8px; fill:#70c8ff; stroke:var(--blue); stroke-width:1; }
.network-map .backbone .signal .core { r:2.8px; fill:#f6fcff; }
.network-map .backbone .trail { stroke-width:3.5px; }
.network-map .terminal .socket {
  r:2.8px; fill:var(--blue); filter:drop-shadow(0 0 1.7px #589fff);
}
.network-map .terminal .flash { stroke:#589fff; stroke-width:1.25; }
@media(prefers-reduced-motion:no-preference) {
  #launch .terminated .terminal .socket { animation:socket-contact 280ms ease-out; }
  #launch .terminated .terminal .flash { animation:port-arrival 280ms ease-out; }
  #launch .backbone.terminated .signal { animation:signal-contact 200ms ease-out; }
}
@keyframes socket-contact {
  0%,18% { r:4px; filter:drop-shadow(0 0 3px #70c8ff); }
  to { r:2.8px; filter:drop-shadow(0 0 1.7px #589fff); }
}
@keyframes signal-contact { from {opacity:.85} to {opacity:0} }