.stream-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(780px - var(--nav-height));
}

.stream-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--color-bg), transparent),
    radial-gradient(circle at 82% 42%, var(--color-accent-soft), transparent 34%);
  content: "";
}

.stream-hero-grid {
  position: relative;
  min-height: calc(780px - var(--nav-height));
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  align-items: center;
  gap: clamp(38px, 7vw, 94px);
}

.stream-hero-copy {
  position: relative;
  z-index: 4;
  padding-top: 72px;
  padding-bottom: 82px;
}

.stream-hero-copy h1 {
  max-width: 720px;
  margin-top: 25px;
}

.stream-hero-copy .lead strong {
  color: var(--color-text);
}

.stream-hero-actions {
  margin-top: 29px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stream-orbit {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1;
  justify-self: end;
  isolation: isolate;
}

.stream-orbit::before {
  position: absolute;
  z-index: -2;
  inset: 8%;
  border-radius: var(--radius-circle);
  background:
    radial-gradient(circle at 38% 32%, var(--color-ocean-bright), var(--color-ocean-dark) 52%, var(--color-bg) 78%);
  box-shadow:
    inset -42px -36px 68px var(--color-shadow-deep),
    inset 18px 15px 38px var(--color-text-faint),
    var(--shadow-planet);
  content: "";
}

.stream-orbit::after {
  position: absolute;
  z-index: -1;
  inset: 8%;
  border-radius: var(--radius-circle);
  box-shadow: inset 0 0 0 1px var(--color-line);
  content: "";
}

.stream-core {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-panel-raised);
  color: var(--color-text);
  box-shadow:
    inset 0 0 0 1px var(--color-accent-border),
    var(--shadow-panel);
  transform: translate(-50%, -50%);
}

.stream-core::before {
  width: 0;
  height: 0;
  margin-left: 7px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 23px solid var(--color-accent);
  content: "";
}

.stream-core span {
  position: absolute;
  bottom: -29px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%);
}

.orbit-wide {
  width: 90%;
  height: 90%;
}

.orbit-close {
  width: 62%;
  height: 62%;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.orbit-node {
  position: absolute;
  max-width: 150px;
  min-height: 33px;
  padding: 0 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-panel-raised);
  color: var(--color-text-soft);
  box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-panel);
  font-family: var(--font-mono);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orbit-node::before {
  width: 6px;
  height: 6px;
  margin-right: 7px;
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
  content: "";
}

.orbit-node-a {
  top: 9%;
  left: 8%;
}

.orbit-node-b {
  top: 30%;
  right: -5%;
}

.orbit-node-c {
  right: 8%;
  bottom: 10%;
}

.orbit-node-d {
  top: 5%;
  right: 4%;
}

.orbit-node-e {
  bottom: 6%;
  left: -10%;
}

.orbit-node-f {
  top: 47%;
  left: -24%;
}

.stream-route {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-route), transparent);
  transform-origin: center;
}

.stream-route::after {
  position: absolute;
  top: -3px;
  left: 54%;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
  content: "";
  animation: stream-pulse 2.8s var(--ease-soft) infinite;
}

.stream-route-a {
  top: 34%;
  left: 21%;
  width: 58%;
  transform: rotate(24deg);
}

.stream-route-b {
  top: 58%;
  left: 17%;
  width: 66%;
  transform: rotate(-16deg);
}

.stream-route-c {
  top: 49%;
  left: 25%;
  width: 51%;
  transform: rotate(76deg);
}

.toc-wrap {
  position: relative;
  z-index: 12;
  margin-top: -31px;
}

.stream-reading-grid {
  display: grid;
  grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
  align-items: start;
  gap: clamp(38px, 8vw, 110px);
}

.stream-reading-grid > .section-head {
  position: sticky;
  top: calc(var(--toc-top) + var(--toc-height) + 28px);
}

.stream-prose {
  color: var(--color-text-soft);
  line-height: 1.95;
}

.stream-prose p {
  margin-bottom: 1.3rem;
}

.stream-panel-section {
  background: var(--color-panel-soft);
  box-shadow:
    inset 0 1px 0 var(--color-border),
    inset 0 -1px 0 var(--color-border);
}

.streaming-table {
  min-width: 860px;
}

.streaming-table td:first-child {
  color: var(--color-text);
}

.support-mark {
  max-width: 100%;
  min-height: 28px;
  padding: 3px 10px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-text-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-border);
  font-size: .74rem;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.table-note {
  max-width: 850px;
  margin: 22px 0 0;
  color: var(--color-muted);
  font-size: .88rem;
  line-height: 1.8;
}

.ip-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ip-panel {
  min-width: 0;
  padding: clamp(26px, 4vw, 42px);
  border-radius: var(--radius-xl);
  background: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.ip-panel-raised {
  background: var(--color-panel-raised);
  box-shadow: inset 0 0 0 1px var(--color-accent-border), var(--shadow-panel);
}

.ip-index {
  margin-bottom: 28px;
  display: block;
  color: var(--color-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.ip-panel p {
  color: var(--color-muted);
  line-height: 1.85;
}

.quality-flow {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-border);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.quality-flow > div {
  min-width: 0;
  padding: 24px;
  background: var(--color-panel);
}

.quality-flow strong {
  display: block;
  color: var(--color-text);
}

.quality-flow p {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: .86rem;
  line-height: 1.7;
}

.quality-dot {
  width: 8px;
  height: 8px;
  margin-bottom: 17px;
  display: block;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
}

.selection-track {
  position: relative;
  max-width: 960px;
  margin-left: auto;
}

.selection-track::before {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 92px;
  width: 1px;
  background: var(--color-border);
  content: "";
}

.selection-step {
  position: relative;
  padding-top: 10px;
  padding-bottom: 38px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 34px;
}

.selection-step::before {
  position: absolute;
  top: 18px;
  left: 88px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
  box-shadow: 0 0 0 7px var(--color-accent-soft);
  content: "";
}

.selection-step:last-child {
  padding-bottom: 10px;
}

.selection-label {
  padding-top: 1px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.selection-step h3 {
  margin-bottom: 8px;
}

.selection-step p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.85;
}

.selection-step a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-border);
  text-underline-offset: .2em;
}

.stream-summary {
  padding: clamp(28px, 6vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 38px;
  border-radius: var(--radius-xl);
  background: var(--color-panel-raised);
  box-shadow: inset 0 0 0 1px var(--color-accent-border), var(--shadow-panel);
}

.stream-summary h2 {
  max-width: 700px;
}

.stream-summary p:not(.section-kicker) {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--color-muted);
  line-height: 1.85;
}

.stream-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

@keyframes stream-pulse {
  0%,
  100% {
    opacity: .48;
    transform: scale(.78);
  }

  50% {
    opacity: 1;
    transform: scale(1.16);
  }
}

@media (max-width: 1040px) {
  .stream-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stream-hero-copy {
    max-width: 760px;
    padding-bottom: 12px;
  }

  .stream-orbit {
    width: min(100%, 570px);
    margin-bottom: 74px;
    justify-self: center;
  }

  .stream-reading-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .stream-reading-grid > .section-head {
    position: static;
  }

  .selection-track {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .stream-hero-grid {
    min-height: auto;
  }

  .stream-hero-copy {
    padding-top: 45px;
  }

  .stream-orbit {
    width: min(100%, 480px);
    margin-bottom: 54px;
  }

  .orbit-node {
    font-size: .61rem;
  }

  .orbit-node-f {
    left: -10%;
  }

  .toc-wrap {
    margin-top: 0;
  }

  .ip-comparison,
  .quality-flow,
  .stream-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .quality-flow {
    gap: 1px;
  }

  .stream-summary-actions {
    width: 100%;
  }

  .stream-summary-actions .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .stream-hero-actions .button {
    flex: 1 1 140px;
  }

  .stream-orbit {
    width: 350px;
    max-width: 100%;
    margin-top: 22px;
  }

  .stream-core {
    width: 82px;
    height: 82px;
  }

  .stream-core::before {
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 18px;
  }

  .orbit-node {
    min-height: 29px;
    padding-inline: 9px;
  }

  .orbit-node-a {
    left: 0;
  }

  .orbit-node-b {
    right: -2%;
  }

  .orbit-node-c {
    right: 1%;
  }

  .orbit-node-d {
    right: -4%;
  }

  .orbit-node-e {
    left: -6%;
  }

  .orbit-node-f {
    left: -16%;
  }

  .selection-track::before {
    left: 7px;
  }

  .selection-step {
    padding-left: 30px;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .selection-step::before {
    left: 3px;
  }

  .selection-label {
    padding-top: 0;
  }

  .ip-panel {
    padding: 24px 21px;
  }
}

@media (max-width: 380px) {
  .stream-orbit {
    width: 310px;
  }

  .orbit-node {
    max-width: 112px;
  }

  .orbit-node-f {
    left: -8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stream-route::after {
    animation: none;
  }
}