/* Layout owns semantic reflow. No global overflow suppression. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-header);
  border-bottom: 1px solid rgba(244,248,255,.12);
  transition: background .25s,border-color .25s,box-shadow .25s;
}
.site-header.is-stuck {
  position: fixed;
  background: rgba(5,12,28,.93);
  border-color: rgba(167,216,250,.16);
  box-shadow: 0 12px 60px rgba(0,0,0,.2);
  backdrop-filter: blur(22px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px,3vw,42px);
  min-block-size: var(--header-height);
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  min-inline-size: 0;
  flex-shrink: 0;
}
.brand-lockup:hover {
  color: inherit;
}
.brand-lockup__glyph {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: .9;
  color: var(--c-yellow);
}
.brand-lockup__glyph span {
  color: var(--c-cyan);
}
.brand-lockup__text {
  display: grid;
  gap: 1px;
  line-height: 1.08;
}
.brand-lockup__text strong {
  font-family: var(--font-display);
  letter-spacing: .1em;
  font-size: 1.08rem;
}
.brand-lockup__text small {
  font-family: var(--font-mono);
  font-size: .58rem;
  color: var(--c-cyan);
  letter-spacing: .22em;
}
.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(13px,2.25vw,35px);
}
.desktop-nav a {
  font-size: .79rem;
  font-weight: 760;
  white-space: normal;
  color: #dce8f9;
  text-decoration: none;
}
.desktop-nav a:hover {
  color: var(--c-yellow);
}
.header-actions {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  align-items: center;
}
.utility-button {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  background: transparent;
  color: #eff7ff;
  border: 1px solid var(--c-outline);
  border-radius: 4px;
}
.utility-button svg {
  inline-size: 21px;
  block-size: 21px;
}
.utility-button:hover {
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}
.menu-toggle {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  background: transparent;
  color: #fff;
  border: 1px solid var(--c-outline);
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  background: currentColor;
  transition: transform .25s,opacity .25s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu {
  position: absolute;
  inset: 100% 0 auto;
  background: rgba(5,12,28,.97);
  backdrop-filter: blur(24px);
  border-block-end: 1px solid var(--c-outline);
  box-shadow: var(--shadow-depth);
}
.mobile-menu__inner {
  display: grid;
  padding-block: 20px 28px;
}
.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 19px;
  padding-block: 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
}
.mobile-menu a span {
  font-family: var(--font-mono);
  color: var(--c-cyan);
  font-size: .68rem;
}
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: min(950px, max(770px, 100svh));
  isolation: isolate;
  background: radial-gradient(ellipse at 75% 30%,#113f85 0%,#081832 35%,#050e20 69%,#040915 100%);
}
.hero__art {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(2,8,22,.95) 0%,rgba(4,14,33,.91) 35%,rgba(4,17,43,.38) 73%,rgba(4,17,43,.31) 100%),url('../assets/art/city-atmosphere.webp') center 37% / cover no-repeat;
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}
.hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,var(--c-bg) 0%,transparent 29%),linear-gradient(90deg,rgba(4,8,21,.35),transparent);
}
.hero__particles,.hero__grid,.hero__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__particles {
  width: 100%;
  height: 100%;
  opacity: .78;
}
.hero__grid {
  inset: 0;
  background-image: linear-gradient(rgba(130,204,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(130,204,255,.035) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg,transparent 8%,black 70%);
}
.hero__orbit {
  inset: auto;
  top: 17%;
  right: 4%;
  inline-size: min(52vw,770px);
  aspect-ratio: 1;
  border: 1px solid rgba(130,205,255,.10);
  border-radius: 50%;
}
.hero__orbit--inner {
  top: 23%;
  right: 9%;
  inline-size: min(39vw,580px);
  border-style: dashed;
  border-color: rgba(130,205,255,.12);
}
.hero__layout {
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.95fr);
  align-items: center;
  gap: 22px;
  flex: 1;
  padding-block: calc(var(--header-height) + 82px) 64px;
}
.hero__copy {
  min-inline-size: 0;
  align-self: center;
  z-index: 2;
}
.hero__pretitle {
  margin: clamp(29px,4vw,58px) 0 12px;
  font-family: var(--font-mono);
  font-size: .71rem;
  letter-spacing: .22em;
  line-height: 1.7;
  color: var(--c-yellow);
  font-weight: 700;
}
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.05rem, 8.4vw, 8.5rem);
  line-height: .89;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-shadow: 0 10px 55px rgba(0,0,0,.32);
}
.hero__title-outline {
  -webkit-text-stroke: 1.5px rgba(241,249,255,.85);
  color: transparent;
}
.hero__title em {
  font-style: normal;
  color: var(--c-yellow);
}
.hero__lead {
  max-inline-size: 49ch;
  margin: 30px 0 28px;
  font-size: clamp(1.03rem,1.55vw,1.21rem);
  color: #e2ebf8;
  line-height: 1.8;
}
.hero__titleplate {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-cyan);
  font-family: var(--font-mono);
  letter-spacing: .15em;
  font-size: .75rem;
}
.titleplate__rule {
  inline-size: 24px;
  block-size: 1px;
  background: var(--c-cyan);
}
.hero__tagline {
  font-weight: 760;
  font-size: .91rem;
  margin: 16px 0 0;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-block-start: 36px;
}
.hero__assurance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-block-start: 27px;
  color: #c0d2e6;
  font-size: .76rem;
}
.hero__assurance b {
  color: #fff;
}
.assurance-dot {
  block-size: 3px;
  inline-size: 3px;
  border-radius: 50%;
  background: var(--c-cyan);
}
.hero__scanline {
  display: flex;
  justify-content: space-between;
  max-inline-size: 460px;
  gap: 18px;
  color: var(--c-dim);
  margin-top: 46px;
  font-family: var(--font-mono);
  letter-spacing: .14em;
  font-size: .59rem;
}
.hero__product {
  position: relative;
  min-inline-size: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  isolation: isolate;
  perspective: 1450px;
}
.hero__product-glow {
  position: absolute;
  z-index: -1;
  inline-size: 110%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(30,128,244,.38),rgba(0,132,255,.08) 48%,transparent 70%);
  filter: blur(12px);
}
.hero__book-orbit {
  position: absolute;
  inline-size: 112%;
  aspect-ratio: 1;
  max-inline-size: 620px;
  border-radius: 50%;
  border: 1px solid rgba(140,207,255,.18);
}
.hero__book-orbit::before,.hero__book-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(140,207,255,.18);
  inset: 10%;
}
.hero__book-orbit::after {
  inset: 20%;
  border-style: solid;
  border-color: rgba(140,207,255,.1);
}
.hero__book-orbit span {
  position: absolute;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--c-cyan);
}
.hero__book-orbit span:nth-child(1) {
  top: 0;
  left: 50%;
}
.hero__book-orbit span:nth-child(2) {
  top: 50%;
  right: 0;
}
.hero__book-orbit span:nth-child(3) {
  bottom: 0;
  left: 50%;
}
.hero__book-orbit span:nth-child(4) {
  top: 50%;
  left: 0;
}
.book-3d {
  position: relative;
  width: min(100%,400px);
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(3deg);
  filter: drop-shadow(20px 30px 20px rgba(0,0,0,.6));
  transition: transform 280ms var(--ease-smooth);
}
.book-3d--hero {
  width: clamp(250px,31vw,414px);
  margin: 20px 5% 36px 0;
}
.book-3d__front {
  position: absolute;
  inset: 0;
  transform: translateZ(16px);
  display: block;
  border-radius: 2px 6px 6px 2px;
  overflow: clip;
  box-shadow: inset 2px 0 10px rgba(0,0,0,.3),var(--shadow-book);
}
.book-3d__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-3d__back {
  position: absolute;
  inset: 0;
  background: #091930;
  transform: translateZ(-16px);
  border-radius: 5px;
}
.book-3d__spine {
  position: absolute;
  inset-block: 0;
  left: 0;
  inline-size: 32px;
  transform-origin: left center;
  transform: rotateY(-90deg) translateX(-32px);
  background: linear-gradient(90deg,#061026,#0d3872 25%,#2a69a2 65%,#07132b);
  box-shadow: inset -3px 0 8px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-3d__spine span {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  color: #d6f1fc;
  font-size: clamp(.7rem,1.1vw,1.08rem);
  white-space: nowrap;
}
.book-3d__spine small {
  display: none;
}
.book-3d__gleam {
  position: absolute;
  inset: 0;
  transform: translateZ(17px);
  background: linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 47%,transparent 62%);
  opacity: .5;
  pointer-events: none;
}
.book-callout {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .13em;
  color: #b9eaff;
  white-space: nowrap;
  pointer-events: none;
}
.book-callout--upper {
  top: 15%;
  right: -5%;
}
.book-callout--lower {
  left: -10%;
  bottom: 20%;
}
.hud-line {
  width: clamp(14px,4.5vw,64px);
  height: 1px;
  background: linear-gradient(90deg,rgba(133,222,255,.9),transparent);
}
.hud-cross {
  font-size: 1rem;
}
.hero__book-caption {
  position: absolute;
  bottom: 0;
  font-family: var(--font-mono);
  color: #b8def9;
  font-size: .7rem;
  letter-spacing: .25em;
  text-align: center;
  margin: 0;
}
.hero__bottom {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding-block: 0 27px;
}
.scroll-invitation {
  display: flex;
  gap: 13px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
}
.scroll-invitation__stem {
  width: 22px;
  height: 37px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 13px;
  position: relative;
}
.scroll-invitation__stem::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 8px;
  background: var(--c-yellow);
  top: 8px;
  left: 9px;
  animation: mouse-bounce 1.6s infinite;
}
.hero__coordinates {
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .12em;
  color: var(--c-dim);
}
.signal-band {
  position: relative;
  overflow: clip;
  background: var(--c-yellow);
  color: #0b1429;
  isolation: isolate;
  padding-block: 12px;
}
.signal-band__track {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  width: max-content;
  animation: marquee 35s linear infinite;
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.25;
  letter-spacing: .04em;
}
.signal-band__track i {
  font-style: normal;
  font-size: 1.2em;
}
.story-section {
  background: linear-gradient(180deg,#080f23,#0b1429);
}
.incident-layout {
  display: grid;
  grid-template-columns: minmax(0,1.02fr) minmax(0,.92fr);
  gap: clamp(30px,7.5vw,116px);
  align-items: center;
}
.incident-visual {
  position: relative;
  min-height: 550px;
  border: 1px solid rgba(115,195,254,.23);
  background: #08172f;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.incident-visual__frame,.incident-visual__footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 21px 23px;
  position: relative;
  z-index: 2;
  color: #c8e9ff;
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .11em;
}
.incident-visual__footer {
  margin-top: auto;
  color: var(--c-cyan);
  border-top: 1px solid rgba(136,204,255,.19);
}
.incident-visual__scene {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 43%,#216bb9 0%,#0b284d 28%,#071329 70%);
  overflow: clip;
}
.incident-visual__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,transparent 0,transparent 38px,rgba(133,225,255,.06) 39px,transparent 40px);
  opacity: .45;
}
.incident-visual__sun {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(154,235,255,.6);
  border-radius: 50%;
  top: 17%;
  left: calc(50% - 90px);
  background: radial-gradient(circle,#fff9bb 0%,#b5ecff 8%,#3a95d3 18%,rgba(15,70,148,.2) 60%);
  box-shadow: 0 0 120px rgba(30,166,255,.58),0 0 40px rgba(189,250,255,.47);
}
.incident-visual__horizon {
  position: absolute;
  top: 58%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-cyan);
  box-shadow: 0 0 22px 9px rgba(55,154,242,.55);
}
.incident-visual__road {
  position: absolute;
  top: 56%;
  bottom: -20%;
  left: 15%;
  right: 15%;
  background: linear-gradient(#09172f,#03050c);
  clip-path: polygon(45% 0,55% 0,100% 100%,0 100%);
}
.incident-visual__road::before,.incident-visual__road::after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  width: 2px;
  background: linear-gradient(white,transparent);
  opacity: .45;
}
.incident-visual__road::before {
  left: 9%;
  transform: skew(-24deg);
}
.incident-visual__road::after {
  right: 9%;
  transform: skew(24deg);
}
.incident-visual__road span {
  position: absolute;
  width: 3px;
  height: 180%;
  top: 0;
  left: 50%;
  background: repeating-linear-gradient(180deg,#e2f8ff 0 8px,transparent 8px 25px);
  transform: perspective(100px) rotateX(65deg);
  opacity: .65;
}
.incident-visual__pulse {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.95);
  opacity: 0;
  pointer-events: none;
  animation: incident-flash 13s infinite;
}
.incident-visual__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #378dff;
  filter: blur(45px);
}
.incident-dossier {
  display: grid;
  min-inline-size: 0;
}
.dossier-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--c-outline);
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .13em;
  color: var(--c-cyan);
}
.dossier-header__symbol {
  color: var(--c-yellow);
  font-size: 1.7rem;
  line-height: 1;
}
.dossier-header small {
  margin-inline-start: auto;
  color: var(--c-dim);
}
.dossier-row {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 18px;
  gap: 16px;
  border-bottom: 1px solid var(--c-outline);
  padding-block: 27px;
}
.dossier-row__index {
  font-family: var(--font-mono);
  color: var(--c-yellow);
  font-size: .66rem;
  padding-top: 7px;
}
.dossier-row h3 {
  font-size: 1.32rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.dossier-row p {
  color: var(--c-muted);
  line-height: 1.78;
  font-size: .93rem;
  margin: 0;
}
.dossier-row__icon {
  color: var(--c-cyan);
}
.dossier-footnote {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 25px 0 27px;
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--c-dim);
  line-height: 1.8;
}
.world-section {
  position: relative;
  background: #0b1933;
  isolation: isolate;
}
.world-section__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 25%,rgba(27,94,170,.29),transparent 50%);
}
.world-portal {
  position: relative;
  height: clamp(360px,48vw,640px);
  isolation: isolate;
  border: 1px solid rgba(133,223,255,.28);
  overflow: clip;
}
.world-portal__art {
  position: absolute;
  inset: 0;
}
.world-portal__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.world-portal__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(3,11,28,.94),rgba(6,19,40,.69) 45%,rgba(3,10,23,.1)),linear-gradient(0deg,rgba(1,7,20,.7),transparent 60%);
}
.world-portal__frame {
  position: absolute;
  inset: 19px 22px auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  color: #e5f8ff;
  font-size: .68rem;
  letter-spacing: .13em;
}
.world-portal__message {
  position: absolute;
  bottom: clamp(26px,5vw,72px);
  left: clamp(25px,7vw,90px);
  z-index: 2;
  max-width: 660px;
  right: 26px;
}
.world-portal__topline {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--c-yellow);
}
.world-portal__message h3 {
  margin: 17px 0 20px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem,5.65vw,5.6rem);
  line-height: .97;
}
.world-portal__message p {
  max-width: 38ch;
  color: #ecf6ff;
  font-size: clamp(.96rem,1.5vw,1.14rem);
  line-height: 1.7;
  margin: 0;
}
.world-pillars {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  background: var(--c-outline);
  margin-top: 52px;
  border: 1px solid var(--c-outline);
}
.pillar {
  background: #0b1933;
  padding: clamp(26px,3.5vw,48px);
  min-inline-size: 0;
}
.pillar__index {
  font-family: var(--font-mono);
  color: var(--c-cyan);
  font-size: .72rem;
  letter-spacing: .15em;
}
.pillar__symbol {
  width: 56px;
  height: 56px;
  color: var(--c-yellow);
  margin: 42px 0 28px;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: clamp(1.38rem,1.7vw,1.7rem);
  line-height: 1.18;
}
.pillar p {
  color: var(--c-muted);
  font-size: .94rem;
  line-height: 1.83;
  margin: 0;
}
.quote-break {
  position: relative;
  padding: clamp(55px,8vw,125px) 0;
  background: radial-gradient(ellipse at 50% 50%,#1a4988,#081d40 42%,#061126);
  overflow: clip;
  isolation: isolate;
}
.quote-break__rings {
  position: absolute;
  width: 750px;
  max-width: 100%;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(152,237,255,.12);
  border-radius: 50%;
  pointer-events: none;
}
.quote-break__rings::before,.quote-break__rings::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(152,237,255,.11);
  border-radius: 50%;
}
.quote-break__rings::after {
  inset: 37%;
}
.quote-break__inner {
  position: relative;
  text-align: center;
}
.quote-break__symbol {
  display: block;
  font-family: var(--font-editorial);
  font-size: 7rem;
  height: 75px;
  color: var(--c-yellow);
  line-height: 1;
}
.quote-break blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem,7.6vw,8rem);
  line-height: .95;
  letter-spacing: -.035em;
}
.quote-break blockquote footer {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .14em;
  color: #c0e7fa;
}
.quote-break blockquote cite {
  font-style: normal;
}
.preview-section {
  background: #080f23;
}
.reader-shell {
  max-inline-size: 1080px;
  margin-inline: auto;
  border: 1px solid rgba(173,210,249,.28);
  box-shadow: 0 32px 90px rgba(0,0,0,.28);
  background: #0c182b;
}
.reader-shell__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--c-outline);
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .1em;
  color: #c8e4f7;
}
.reader-shell__lights {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}
.reader-shell__lights i {
  inline-size: 9px;
  block-size: 9px;
  border: 1px solid rgba(159,208,243,.55);
  border-radius: 50%;
}
.reader-shell__lights i:first-child {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
}
.reader-shell__controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.reader-shell__controls button {
  padding: 7px 10px;
  background: #152844;
  border: 1px solid var(--c-outline);
  color: #f4f8ff;
  border-radius: 2px;
  font-size: .72rem;
}
.reader-shell__controls button:hover {
  border-color: var(--c-yellow);
}
.reader-shell__body {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  min-inline-size: 0;
  background: linear-gradient(115deg,#0b1a2f,#102340);
}
.reader-shell__margin {
  border-right: 1px solid var(--c-outline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 32px 0;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .17em;
  color: var(--c-dim);
}
.reader-shell__margin span:nth-child(2) {
  writing-mode: vertical-rl;
}
.reader-shell__page {
  padding: clamp(26px,5vw,76px) clamp(25px,6vw,98px) 20px;
  position: relative;
  min-inline-size: 0;
}
.reader-shell__eyebrow {
  font-family: var(--font-mono);
  color: var(--c-cyan);
  font-size: .73rem;
  letter-spacing: .22em;
}
.reader-shell__page h3 {
  font-family: var(--font-editorial);
  font-size: clamp(1.9rem,3.25vw,3rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 18px 0 27px;
}
.reader-shell__page p {
  color: #e5edf7;
  font-family: var(--font-editorial);
  font-size: var(--reader-font-size);
  line-height: 1.95;
  max-width: 66ch;
}
.reader-shell__page .reader-shell__time {
  font-style: italic;
  color: var(--c-muted);
  font-size: calc(var(--reader-font-size)*.91);
}
.reader-shell__fade {
  margin: 30px 0 0;
  padding: 34px 0 26px;
  text-align: center;
  border-top: 1px solid var(--c-outline);
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .14em;
  color: var(--c-cyan);
}
.reader-shell__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 25px clamp(22px,3.4vw,44px);
  border-top: 1px solid var(--c-outline);
}
.reader-shell__foot-badge {
  display: inline-block;
  border: 1px solid var(--c-outline);
  padding: 7px 10px;
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .09em;
}
.reader-shell__foot p {
  color: var(--c-dim);
  font-size: .73rem;
  margin: 8px 0 0;
}
.transmission-section {
  background: linear-gradient(180deg,#08172a,#102348);
}
.terminal-layout {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  border: 1px solid var(--c-outline);
  background: #09162e;
}
.terminal-scene {
  padding: clamp(26px,4.3vw,58px);
  border-right: 1px solid var(--c-outline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.terminal-scene__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  letter-spacing: .16em;
  font-size: .7rem;
  color: var(--c-cyan);
}
.terminal-scene__radar {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 310px;
}
.radar-scope {
  position: relative;
  width: min(270px,80%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(126,217,255,.5);
  background: repeating-radial-gradient(circle,transparent 0,transparent 39px,rgba(131,222,255,.12) 40px,transparent 41px),radial-gradient(circle,rgba(35,108,171,.17),transparent 74%);
  overflow: clip;
}
.radar-scope::before,.radar-scope::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  top: 50%;
  background: rgba(130,224,255,.2);
}
.radar-scope::after {
  transform: rotate(90deg);
}
.radar-scope span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 13px var(--c-cyan);
}
.radar-scope span:nth-child(1) {
  top: 25%;
  left: 66%;
}
.radar-scope span:nth-child(2) {
  top: 59%;
  left: 24%;
}
.radar-scope span:nth-child(3) {
  top: 76%;
  left: 70%;
}
.radar-scope span:nth-child(4) {
  top: 45%;
  left: 52%;
}
.radar-scope i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,transparent 0 285deg,rgba(131,222,255,.34) 355deg,rgba(131,222,255,.0) 360deg);
  animation: radar-sweep 7s linear infinite;
}
.terminal-scene > p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem,2.5vw,2.7rem);
  line-height: 1.12;
  margin: 0 0 24px;
}
.terminal-scene__footer {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  color: var(--c-yellow);
}
.terminal-choice {
  min-inline-size: 0;
  padding: clamp(28px,4.5vw,64px);
  display: grid;
  align-content: center;
  gap: 14px;
}
.terminal-choice fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
  display: grid;
  gap: 12px;
}
.terminal-choice legend {
  font-family: var(--font-mono);
  color: var(--c-cyan);
  font-size: .72rem;
  letter-spacing: .12em;
  margin-bottom: 20px;
}
.choice-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 18px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  min-inline-size: 0;
  border: 1px solid var(--c-outline);
  cursor: pointer;
  transition: background .2s,border-color .2s,transform .2s;
}
.choice-card:hover {
  border-color: rgba(255,207,50,.55);
  transform: translateY(-2px);
}
.choice-card:has(input:checked) {
  border-color: var(--c-yellow);
  background: rgba(255,207,50,.085);
}
.choice-card:has(input:focus-visible) {
  outline: 3px solid var(--df-color-focus);
  outline-offset: 3px;
}
.choice-card input {
  position: absolute;
  top: 10px;
  right: 10px;
  inline-size: 20px;
  block-size: 20px;
  accent-color: var(--c-yellow);
  opacity: .001;
}
.choice-card__index {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--c-cyan);
}
.choice-card__copy {
  display: grid;
  min-inline-size: 0;
  gap: 3px;
}
.choice-card__copy strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: .02em;
}
.choice-card__copy small {
  color: var(--c-muted);
  line-height: 1.55;
  font-size: .78rem;
}
.choice-card__chevron {
  color: var(--c-yellow);
}
.clue-result {
  min-inline-size: 0;
  padding: 25px 24px;
  min-height: 148px;
  background: rgba(89,170,229,.1);
  border: 1px solid var(--c-outline);
}
.clue-result__label {
  font-family: var(--font-mono);
  color: var(--c-yellow);
  letter-spacing: .13em;
  font-size: .68rem;
}
.clue-result p {
  color: #d9e9f7;
  margin: 12px 0 0;
  font-size: .91rem;
  line-height: 1.74;
}