:root {
  --paper: #e9efee;
  --paper-bright: #f4f6f2;
  --paper-blue: #dbe5e6;
  --ink: #17384a;
  --ink-soft: #577684;
  --deep: #10384b;
  --deep-2: #0d2f40;
  --signal: #d7b43d;
  --signal-soft: #e4d58b;
  --line: rgba(23, 56, 74, 0.2);
  --line-inverse: rgba(224, 235, 232, 0.22);
  --content-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --header-height: 6.4rem;
  --mouse-x: 0;
  --mouse-y: 0;
  --scene-progress: 0;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--signal) var(--deep);
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Bahnschrift", "Arial Narrow", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }

::selection { color: var(--deep); background: var(--signal-soft); }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-180%);
  padding: 0.7rem 1rem;
  color: #fff;
  background: var(--deep);
  text-decoration: none;
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.signal-canvas {
  position: fixed;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: normal;
  transition: opacity 1.1s ease;
}
body.is-ready .signal-canvas { opacity: 1; }
body[data-scene="signal"].is-ready .signal-canvas { opacity: 1; mix-blend-mode: normal; }
.no-js .signal-canvas { display: none; }

.ambient-field {
  position: fixed;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.grain {
  position: absolute;
  inset: -30%;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  animation: grainShift 0.42s steps(2) infinite;
}
body.webgl-particles .grain { opacity: 0.025; }

.orbital {
  position: absolute;
  border: 1px solid rgba(55, 89, 102, 0.13);
  border-radius: 50%;
  transform: translate(calc(var(--mouse-x) * 9px), calc(var(--mouse-y) * 9px));
  transition: border-color 500ms ease;
}
.orbital::after {
  content: "";
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid var(--signal);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 1.2rem rgba(215, 180, 61, 0.5);
}
.orbital-a { width: 54vw; height: 54vw; top: -13vw; right: -12vw; animation: slowSpin 34s linear infinite; }
.orbital-a::after { top: 48%; left: -0.25rem; }
.orbital-b { width: 33vw; height: 33vw; right: 9vw; bottom: -15vw; animation: slowSpin 25s linear infinite reverse; }
.orbital-b::after { top: 8%; right: 14%; }
.orbital-c { width: 18vw; height: 18vw; left: 39vw; top: 36vh; animation: slowSpin 18s linear infinite; }
.orbital-c::after { bottom: 12%; right: 16%; }

.scan-beam {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 0.18;
  background: rgba(215, 180, 61, 0.46);
  box-shadow: 0 0 1.4rem rgba(215, 180, 61, 0.16);
  animation: scanPage 14s linear infinite;
  mix-blend-mode: multiply;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--content-gutter);
  color: var(--ink);
  transition: color 450ms ease, background-color 450ms ease, border-color 450ms ease;
}

.site-header::after {
  content: "";
  position: absolute;
  left: var(--content-gutter);
  right: var(--content-gutter);
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.11;
}

body[data-scene="signal"] .site-header,
body[data-page="lost"] .site-header { color: #deebe9; background: rgba(13, 47, 64, 0.32); backdrop-filter: blur(8px); }

.brand-lockup, .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-decoration: none;
}

.brand-lockup img, .footer-brand img { width: 3.25rem; height: 3.25rem; object-fit: contain; }

.header-actions { display: flex; align-items: center; gap: clamp(0.5rem, 2.4vw, 2rem); }

.utility-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.7rem;
  padding: 0.35rem 0.2rem;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
}
.utility-button::after { content: ""; position: absolute; }
.utility-button:hover .utility-cn, .utility-button:focus-visible .utility-cn { opacity: 1; transform: translateY(0); }
.utility-cn { opacity: 0.56; letter-spacing: 0.08em; transform: translateY(1px); transition: opacity 180ms ease, transform 180ms ease; }
.utility-led, .utility-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0.23rem rgba(215,180,61,0.13); }
body[data-motion="off"] .utility-led { background: currentColor; box-shadow: none; opacity: 0.42; }

.edge-coordinate {
  position: fixed;
  z-index: 5;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: currentColor;
  opacity: 0.42;
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
  transition: color 450ms ease;
  pointer-events: none;
}
.edge-coordinate i { width: 1px; height: 3rem; background: currentColor; opacity: 0.45; }
.edge-coordinate-left { left: 1rem; transform: translateY(-50%) rotate(180deg); }
.edge-coordinate-right { right: 1rem; transform: translateY(-50%); }
body[data-scene="signal"] .edge-coordinate { color: #dce9e8; }

main { position: relative; z-index: 1; }

.scene {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
}
.scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
}
.scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
  transform: scale(1.015) translate(calc(var(--mouse-x) * 5px), calc(var(--mouse-y) * 3px));
  transition: opacity 700ms ease;
}
.scene-boot::before {
  background:
    radial-gradient(circle at 76% 42%, rgba(204, 219, 220, 0.18), transparent 36%),
    linear-gradient(118deg, var(--paper-bright), var(--paper) 58%, var(--paper-blue));
}
.scene-boot::after {
  background-image: url("/assets/art/signal-flight.84757cec.webp");
  opacity: 0.92;
}
.scene-signal::before {
  background:
    radial-gradient(circle at 62% 51%, rgba(75, 129, 148, 0.27), transparent 34%),
    linear-gradient(130deg, var(--deep-2), var(--deep) 55%, #174b60);
}
.scene-signal::after {
  background-image: url("/assets/art/signal-organism.d19697e5.webp");
  opacity: 0.91;
}
.scene-transmit::before {
  background:
    radial-gradient(circle at 69% 50%, rgba(203, 216, 211, 0.48), transparent 36%),
    linear-gradient(116deg, var(--paper-bright), var(--paper) 62%, #d4e1e2);
}
.scene-transmit::after {
  background-image: url("/assets/art/signal-aperture.192802a9.webp");
  opacity: 0.92;
}
body.webgl-particles .scene-boot::after { opacity: 0.88; }
body.webgl-particles .scene-signal::after { opacity: 0.86; }
body.webgl-particles .scene-transmit::after { opacity: 0.9; }
body.canvas-fallback .scene::after { opacity: 0.92; }

.scene-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(23, 56, 74, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 56, 74, 0.09) 1px, transparent 1px);
  background-size: 7.5vw 7.5vw;
  transform: translate(calc(var(--mouse-x) * -4px), calc(var(--mouse-y) * -4px));
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.55), transparent 78%);
}
.scene-signal .scene-grid { opacity: 0.23; filter: invert(1); mask-image: linear-gradient(90deg, rgba(0,0,0,0.68), transparent 84%); }

.scene-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 100svh;
  padding: calc(var(--header-height) + 4vh) var(--content-gutter) 6rem;
}

.boot-layout { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(20rem, 1.06fr); align-items: center; }
.boot-copy { position: relative; max-width: 55rem; }

.mega-title {
  margin: 0;
  color: var(--ink);
  font-family: "Bahnschrift Condensed", "Arial Narrow", "Microsoft YaHei", sans-serif;
  font-size: clamp(5.2rem, 13vw, 14rem);
  font-stretch: condensed;
  font-weight: 350;
  line-height: 0.78;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.identity-title {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  inline-size: 8.15ch;
  max-inline-size: 100%;
}
.identity-word-shell {
  position: relative;
  display: inline-grid;
  inline-size: max-content;
  max-inline-size: calc(100% + 0.2em);
  overflow: clip;
  padding: 0.18em 0.08em 0.14em;
  margin: -0.14em -0.04em -0.14em;
}
.identity-word {
  position: relative;
  z-index: 2;
  display: block;
  min-block-size: 0.78em;
  white-space: pre;
  will-change: color, filter, text-shadow;
  transition: color 280ms ease, filter 180ms ease, text-shadow 320ms ease;
}
.identity-light {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0 24%, rgba(168, 208, 218, 0.1) 34%, rgba(244, 223, 139, 0.74) 48%, rgba(255, 248, 215, 0.94) 50%, rgba(244, 223, 139, 0.66) 52%, rgba(168, 208, 218, 0.08) 66%, transparent 76% 100%);
  background-repeat: no-repeat;
  background-size: 24% 100%;
  background-position: -32% 0;
  filter: blur(0.012em);
  mix-blend-mode: screen;
}
.identity-pulse {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0.075em;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(112, 158, 175, 0.42) 12%, rgba(237, 214, 122, 0.94) 50%, rgba(112, 158, 175, 0.42) 88%, transparent);
  box-shadow: 0 0 0.08em rgba(215,180,61,0.2);
  transform: scaleX(0.08);
}
.identity-title.is-decoding .identity-word { filter: blur(0.012em); }
.identity-title.is-human .identity-pulse { opacity: 0.66; animation: identityHeartbeat 2.7s cubic-bezier(.22,1,.36,1) infinite; }
.identity-title.is-human-reveal .identity-word { animation: identityHumanBloom 900ms cubic-bezier(.22,1,.36,1) both; }
.identity-title.is-human-reveal .identity-light { animation: identityHumanScan 820ms cubic-bezier(.22,1,.36,1) both; }
.identity-slogan > span { transition: opacity 180ms ease, transform 240ms cubic-bezier(.22,1,.36,1); }
.identity-slogan.is-decoding > span { opacity: 0; transform: translateY(0.2rem); }

.slogan {
  display: grid;
  gap: 0.28rem;
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  color: #507487;
  font-size: clamp(1.1rem, 2vw, 2.15rem);
  font-weight: 420;
  letter-spacing: 0.12em;
}
.slogan [lang="zh-CN"] { color: var(--ink); font-size: 0.52em; letter-spacing: 0.32em; }

.signal-entry {
  appearance: none;
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.1rem;
  margin-top: clamp(2.8rem, 7vh, 5.4rem);
  padding: 0.85rem 1.2rem;
  border: 0;
  border-bottom: 1px solid rgba(23, 56, 74, 0.44);
  color: var(--ink);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-decoration: none;
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.signal-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
  opacity: 0.55;
}
.signal-entry [lang="zh-CN"] { font-size: 0.76em; letter-spacing: 0.14em; opacity: 0.64; }
.signal-entry .action-arrow { color: var(--signal); font-size: 1.3rem; transition: transform 220ms ease; }
.signal-entry:hover, .signal-entry:focus-visible { border-color: var(--signal); transform: translateY(-2px); }
.signal-entry:hover .action-arrow, .signal-entry:focus-visible .action-arrow { transform: translateX(0.45rem); }

.boot-readout {
  position: absolute;
  right: var(--content-gutter);
  bottom: 5.6rem;
  display: grid;
  gap: 0.46rem;
  color: var(--ink-soft);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-align: right;
}

.signal-progress {
  position: absolute;
  z-index: 5;
  left: var(--content-gutter);
  right: var(--content-gutter);
  bottom: 2.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
}
.signal-progress i { position: relative; flex: 1; height: 1px; background: rgba(23,56,74,0.24); }
.signal-progress i::before { content: ""; position: absolute; left: 0; top: -1px; width: 16%; height: 3px; background: var(--signal); }

.scroll-cue {
  position: absolute;
  z-index: 5;
  right: 1.3rem;
  bottom: 5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
}
.scroll-cue i { width: 1px; height: 3.6rem; background: currentColor; animation: cuePulse 1.9s ease-in-out infinite; transform-origin: top; }

.signal-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(24rem, 1.28fr);
  align-items: center;
  color: #e4eeee;
}
.telemetry { max-width: 30rem; }
.section-index {
  margin: 0 0 1.4rem;
  color: var(--signal);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.24em;
}
.section-title {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 clamp(2rem, 5vh, 4rem);
  font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.7rem, 5.7vw, 5.8rem);
  font-weight: 350;
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.section-title [lang="zh-CN"] { color: #b7cbcf; font-size: 0.3em; font-weight: 420; letter-spacing: 0.34em; }

.telemetry-list { display: grid; gap: 1.4rem; margin: 0; }
.telemetry-list div { display: grid; gap: 0.45rem; }
.telemetry-list dt { color: #afc4c8; font-size: 0.62rem; letter-spacing: 0.22em; }
.telemetry-list dt b { color: var(--signal); font-weight: 500; }
.telemetry-list dd { margin: 0; font-size: clamp(0.78rem, 1.1vw, 0.95rem); letter-spacing: 0.18em; }
.telemetry-list dd span { display: inline-block; margin-left: 0.8rem; color: #8eabb1; font-size: 0.75em; letter-spacing: 0.12em; }

.signal-statements { margin-top: clamp(2rem, 6vh, 4.8rem); padding-top: 1.5rem; border-top: 1px solid var(--line-inverse); }
.signal-statements p { margin: 0.8rem 0; font-size: 0.62rem; letter-spacing: 0.23em; }
.signal-statements p:last-child { color: var(--signal-soft); }

.signal-legend {
  align-self: end;
  justify-self: end;
  display: flex;
  gap: 1.8rem;
  padding-bottom: 2.6rem;
  color: rgba(224,235,232,0.58);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
}

.waveform {
  position: absolute;
  z-index: 5;
  left: var(--content-gutter);
  right: calc(var(--content-gutter) + 3rem);
  bottom: 1.45rem;
  height: 6.8rem;
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  pointer-events: none;
}
.waveform::after {
  content: "";
  position: absolute;
  left: 7.9rem;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(221, 236, 236, 0.12), rgba(221, 236, 236, 0.38), rgba(221, 236, 236, 0.12));
}
.waveform-label {
  display: grid;
  gap: 0.7rem;
  color: rgba(223, 237, 237, 0.67);
  font-size: 0.46rem;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.waveform-label i { width: 2rem; height: 2px; background: var(--signal); }
.waveform-canvas { position: relative; z-index: 1; display: block; align-self: center; min-width: 0; width: 100%; height: 6.8rem; max-height: 6.8rem; }

.vertical-progress {
  position: absolute;
  z-index: 5;
  top: 28%;
  right: var(--content-gutter);
  bottom: 20%;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  color: rgba(224,235,232,0.65);
  font-size: 0.46rem;
  letter-spacing: 0.14em;
}
.vertical-progress i { position: relative; width: 1px; height: 100%; background: rgba(224,235,232,0.35); }
.vertical-progress b { position: absolute; top: calc(var(--scene-progress) * 100%); left: 50%; width: 0.75rem; height: 0.75rem; border: 1px solid #dbe8e7; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0.38rem rgba(215,180,61,0.15); transform: translate(-50%,-50%); }

.transmit-layout { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(22rem, 1.14fr); align-items: center; }
.transmit-copy { max-width: 47rem; }
.mega-title-small { display: grid; gap: 1rem; font-size: clamp(4.5rem, 10vw, 11rem); line-height: 0.82; }
.mega-title-small [lang="zh-CN"] { color: var(--ink-soft); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.19em; font-weight: 500; letter-spacing: 0.32em; }
.transmit-line { display: grid; gap: 0.55rem; margin: 2.4rem 0 0; color: #41687a; font-size: clamp(0.8rem, 1.3vw, 1.08rem); letter-spacing: 0.15em; line-height: 1.6; }
.transmit-line [lang="zh-CN"] { color: var(--ink); font-size: 0.78em; letter-spacing: 0.16em; }

.site-footer {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 5.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 0 var(--content-gutter);
  border-top: 1px solid rgba(23,56,74,0.22);
  color: var(--ink);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.site-footer > :nth-child(2) { justify-self: center; }
.site-footer > :last-child { justify-self: end; color: inherit; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #8c7320; }
.footer-brand img { width: 2.65rem; height: 2.65rem; }

.github-portal {
  position: relative;
  isolation: isolate;
  min-width: 12.8rem;
  min-height: 3.15rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.72rem;
  padding: 0.48rem 0.72rem;
  overflow: hidden;
  border: 1px solid rgba(23,56,74,0.25);
  background: rgba(220,233,237,0.18);
  clip-path: polygon(0.55rem 0,100% 0,100% calc(100% - 0.55rem),calc(100% - 0.55rem) 100%,0 100%,0 0.55rem);
  transition: color 240ms ease, border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease, transform 180ms ease;
}
.github-portal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% auto -40% -38%;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(215,180,61,0.2), transparent);
  transform: skewX(-16deg);
  transition: left 650ms cubic-bezier(.22,1,.36,1);
}
.github-portal::after {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border: 1px solid rgba(215,180,61,0);
  clip-path: inherit;
  pointer-events: none;
  transition: border-color 240ms ease;
}
.github-portal:hover, .github-portal:focus-visible {
  color: #8c7320;
  border-color: rgba(140,115,32,0.56);
  background: rgba(228,213,139,0.13);
  box-shadow: 0 0 1.4rem rgba(215,180,61,0.14), inset 0 0 1.1rem rgba(215,180,61,0.06);
}
.github-portal:hover::before, .github-portal:focus-visible::before { left: 116%; }
.github-portal:hover::after, .github-portal:focus-visible::after { border-color: rgba(215,180,61,0.2); }
.github-mark { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; }
.github-mark svg { width: 100%; height: 100%; display: block; }
.github-copy { display: grid; gap: 0.14rem; line-height: 1; }
.github-copy strong { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; }
.github-copy small { color: rgba(23,56,74,0.58); font-size: 0.42rem; font-weight: 600; letter-spacing: 0.18em; transition: color 240ms ease; }
.github-portal:hover .github-copy small, .github-portal:focus-visible .github-copy small { color: rgba(140,115,32,0.7); }
.github-arrow { width: 0.9rem; height: 0.9rem; transition: transform 240ms cubic-bezier(.22,1,.36,1); }
.github-arrow svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: square; stroke-linejoin: miter; }
.github-portal:hover .github-arrow, .github-portal:focus-visible .github-arrow { transform: translate(0.15rem,-0.15rem); }

.reveal-block { opacity: 1; transform: none; }
.reveal-block > * {
  opacity: 0;
  filter: blur(7px);
  clip-path: inset(0 0 100% 0);
  transform: translateY(3.4rem) scale(0.975);
  transition:
    opacity 760ms cubic-bezier(.22,1,.36,1),
    filter 880ms cubic-bezier(.22,1,.36,1),
    clip-path 1050ms cubic-bezier(.22,1,.36,1),
    transform 1050ms cubic-bezier(.22,1,.36,1);
}
.reveal-block.is-visible > * { opacity: 1; filter: blur(0); clip-path: inset(-14% -4% -18%); transform: translateY(0) scale(1); }
.reveal-block > :nth-child(1) { transition-delay: 80ms; }
.reveal-block > :nth-child(2) { transition-delay: 190ms; }
.reveal-block > :nth-child(3) { transition-delay: 320ms; }
.reveal-block > :nth-child(4) { transition-delay: 450ms; }
.reveal-block > :nth-child(n+5) { transition-delay: 560ms; }

.channel-main, .lost-main {
  position: relative;
  z-index: auto;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--header-height) + 2rem) var(--content-gutter) 7rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 71% 52%, rgba(193,212,211,0.35), transparent 35%),
    linear-gradient(120deg, var(--paper-bright), var(--paper) 62%, #d5e2e3);
}
.channel-main::before, .lost-main::before { content: ""; position: absolute; z-index: 0; inset: 0; background-image: linear-gradient(rgba(23,56,74,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(23,56,74,.07) 1px,transparent 1px); background-size: 7.5vw 7.5vw; mask-image: linear-gradient(90deg,#000,transparent 80%); }
.channel-panel, .lost-panel { position: relative; z-index: 6; width: min(46rem, 58vw); }
.channel-title { display: grid; gap: 1rem; margin: 0; color: var(--ink); font-family: "Bahnschrift Condensed","Arial Narrow",sans-serif; font-size: clamp(4rem,8.5vw,9rem); font-weight: 350; line-height: .78; letter-spacing: -.04em; }
.channel-title [lang="zh-CN"] { color: var(--ink-soft); font-family: "PingFang SC","Microsoft YaHei",sans-serif; font-size: .2em; font-weight: 500; letter-spacing: .34em; }
.channel-line { max-width: 38rem; }
.channel-address { margin-top: 2.2rem; color: var(--ink); font-size: clamp(1.15rem,2vw,1.75rem); letter-spacing: .1em; }
.channel-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.signal-entry-secondary { opacity: .7; }
.channel-status { min-height: 1.5rem; margin: 1rem 0 0; color: #496d66; font-size: .75rem; letter-spacing: .11em; }
.channel-footer { position: fixed; }
.lost-main { color: #e4eeee; background: radial-gradient(circle at 67% 50%,rgba(75,129,148,.28),transparent 33%),linear-gradient(130deg,var(--deep-2),var(--deep) 58%,#174b60); }
.lost-main::before { filter: invert(1); opacity: .25; }
.lost-panel .channel-title, .lost-panel .transmit-line { color: #e1ebea; }
.lost-panel .channel-title [lang="zh-CN"], .lost-panel .transmit-line [lang="zh-CN"] { color: #aec3c7; }
.lost-panel .signal-entry { color: #e1ebea; border-color: rgba(224,235,232,.35); }

.noscript-note { position: fixed; z-index: 99; left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem; color: #fff; background: var(--deep); text-align: center; }

body[data-motion="off"] *,
body[data-motion="off"] *::before,
body[data-motion="off"] *::after { animation-play-state: paused !important; }
body[data-motion="off"] .identity-light,
body[data-motion="off"] .identity-pulse { display: none; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }

@keyframes slowSpin { to { transform: translate(calc(var(--mouse-x) * 9px), calc(var(--mouse-y) * 9px)) rotate(360deg); } }
@keyframes scanPage { from { transform: translateY(-2px); } to { transform: translateY(102vh); } }
@keyframes identityHumanScan {
  0% { background-position: -32% 0; opacity: 0; }
  12% { opacity: 0.72; }
  68% { opacity: 0.5; }
  100% { background-position: 132% 0; opacity: 0; }
}
@keyframes identityHumanBloom {
  0%, 100% { color: var(--ink); text-shadow: none; }
  36% { color: #315d6e; text-shadow: 0 0 0.08em rgba(151,195,205,0.22), 0 0 0.22em rgba(215,180,61,0.12); }
}
@keyframes identityHeartbeat {
  0%, 12%, 100% { transform: scaleX(0.08); opacity: 0.18; }
  3% { transform: scaleX(0.42); opacity: 0.56; }
  6% { transform: scaleX(0.2); opacity: 0.34; }
  9% { transform: scaleX(1); opacity: 0.72; }
}
@keyframes grainShift { 0%{transform:translate(0,0)}25%{transform:translate(2%,-3%)}50%{transform:translate(-3%,2%)}75%{transform:translate(4%,1%)}100%{transform:translate(0,0)} }
@keyframes cuePulse { 0%,100%{transform:scaleY(.25);opacity:.35}50%{transform:scaleY(1);opacity:1} }
@keyframes waveLive { from{transform:scaleY(.38);opacity:.45}to{transform:scaleY(1);opacity:.9} }

@media (max-width: 900px) {
  :root { --header-height: 5.3rem; }
  .brand-lockup span { display: none; }
  .brand-lockup img { width: 2.7rem; height: 2.7rem; }
  .edge-coordinate, .boot-readout, .signal-legend { display: none; }
  .boot-layout, .signal-layout, .transmit-layout { grid-template-columns: 1fr; align-items: center; }
  .boot-copy, .telemetry, .transmit-copy { max-width: 84%; }
  .scene-inner { padding-top: calc(var(--header-height) + 8vh); }
  .mega-title { font-size: clamp(4.2rem, 18vw, 8.2rem); }
  .section-title { font-size: clamp(3rem, 10vw, 5.2rem); }
  .telemetry-list { max-width: 25rem; }
  .vertical-progress { right: 1.1rem; }
  .waveform { right: 2.6rem; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .waveform::after { left: 6rem; }
  .channel-panel, .lost-panel { width: min(36rem, 80vw); }
  .channel-title { font-size: clamp(4rem, 14vw, 7.5rem); }
}

@media (max-width: 600px) {
  :root { --content-gutter: 1.1rem; --header-height: 4.9rem; }
  .site-header { padding-top: .7rem; padding-bottom: .7rem; }
  .header-actions { gap: .65rem; }
  .utility-button { font-size: .56rem; letter-spacing: .13em; gap: .35rem; }
  .utility-cn { display: none; }
  .brand-lockup img { width: 2.45rem; height: 2.45rem; }
  .scene { min-height: 100svh; }
  .scene-inner { padding-top: calc(var(--header-height) + 8vh); padding-bottom: 6.5rem; }
  .boot-copy, .telemetry, .transmit-copy { max-width: 100%; }
  .mega-title { font-size: clamp(4rem, 20vw, 6.9rem); letter-spacing: -.065em; }
  .slogan { font-size: clamp(.92rem, 4.2vw, 1.15rem); letter-spacing: .1em; }
  .signal-entry { gap: .55rem; min-height: 3.7rem; margin-top: 3rem; padding-left: .7rem; padding-right: .7rem; font-size: .63rem; letter-spacing: .14em; }
  .scroll-cue { display: none; }
  .section-title { margin-bottom: 2rem; font-size: 13vw; }
  .telemetry-list { gap: 1rem; }
  .telemetry-list dd span { display: block; margin: .35rem 0 0; }
  .signal-statements { margin-top: 2rem; }
  .signal-statements p { font-size: .55rem; }
  .vertical-progress { display: none; }
  .scene::after { background-size: auto 88%; }
  .scene-boot::after { background-position: 61% 58%; opacity: 0.78; }
  .scene-signal::after { background-position: 61% 56%; opacity: 0.72; }
  .scene-transmit::after { background-position: 58% 55%; opacity: 0.78; }
  body.is-ready .signal-canvas { opacity: 0.92; }
  body[data-scene="signal"].is-ready .signal-canvas { opacity: 0.96; }
  .waveform { left: 1.1rem; right: 1.1rem; bottom: 1.1rem; height: 4.2rem; grid-template-columns: 3.9rem minmax(0, 1fr); gap: .65rem; }
  .waveform::after { left: 4.55rem; }
  .waveform-label { gap: .45rem; font-size: .38rem; letter-spacing: .12em; }
  .waveform-label i { width: 1.35rem; }
  .waveform-canvas { height: 4.2rem; max-height: 4.2rem; }
  .transmit-copy { width: 100%; min-width: 0; padding-inline: .15rem; }
  .mega-title-small {
    width: max-content;
    max-width: 100%;
    font-size: clamp(3.1rem, 14.8vw, 4.85rem);
    line-height: .88;
    letter-spacing: -.06em;
    transform-origin: left center;
  }
  .transmit-line { max-width: 100%; margin-top: 1.5rem; font-size: .76rem; letter-spacing: .1em; overflow-wrap: break-word; }
  .site-footer { min-height: 4.6rem; grid-template-columns: 1fr auto; padding: 0 1.1rem; font-size: .5rem; letter-spacing: .13em; }
  .site-footer > :nth-child(2) { display: none; }
  .footer-brand span { display: none; }
  .github-portal { min-width: 0; min-height: 2.85rem; gap: .55rem; padding: .42rem .62rem; }
  .github-copy small { display: none; }
  .github-copy strong { font-size: .54rem; letter-spacing: .14em; }
  .github-mark { width: 1.18rem; height: 1.18rem; }
  .channel-main, .lost-main { align-items: start; padding-top: calc(var(--header-height) + 11vh); }
  .channel-panel, .lost-panel { width: 100%; }
  .channel-title { font-size: clamp(3.6rem,17vw,5.8rem); }
  .channel-address { font-size: 1rem; }
  .channel-actions { gap: .25rem; }
  .channel-footer { font-size: .48rem; }
}

body.webgl-particles.is-ready .signal-canvas,
body.webgl-particles[data-scene="signal"].is-ready .signal-canvas {
  opacity: 0.4;
  mix-blend-mode: multiply;
}

body.webgl-particles[data-scene="signal"].is-ready .signal-canvas {
  opacity: 0.28;
  mix-blend-mode: screen;
}

body.webgl-particles .scene::after {
  transform-origin: 68% 50%;
  transition:
    opacity 1050ms cubic-bezier(.22,1,.36,1),
    transform 1450ms cubic-bezier(.22,1,.36,1),
    filter 1200ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, filter;
}

body.webgl-particles .scene-boot::after {
  opacity: 0.34;
  filter: blur(3px) saturate(0.84);
  transform: scale(1.055) rotate(-0.8deg) translate(calc(var(--mouse-x) * 5px), calc(var(--mouse-y) * 3px));
}

body.webgl-particles .scene-signal::after {
  opacity: 0.3;
  filter: blur(4px) saturate(0.8);
  transform: scale(1.05) rotate(0.9deg) translate(calc(var(--mouse-x) * 5px), calc(var(--mouse-y) * 3px));
}

body.webgl-particles .scene-transmit::after {
  opacity: 0.32;
  filter: blur(4px) saturate(0.82);
  transform: scale(1.055) rotate(-0.9deg) translate(calc(var(--mouse-x) * 5px), calc(var(--mouse-y) * 3px));
}

body.webgl-particles[data-scene="boot"] .scene-boot::after,
body.webgl-particles[data-scene="signal"] .scene-signal::after,
body.webgl-particles[data-scene="transmit"] .scene-transmit::after {
  filter: blur(0) saturate(1);
  transform: scale(1.015) rotate(0deg) translate(calc(var(--mouse-x) * 5px), calc(var(--mouse-y) * 3px));
}

body.webgl-particles[data-scene="boot"] .scene-boot::after { opacity: 0.88; }
body.webgl-particles[data-scene="signal"] .scene-signal::after { opacity: 0.86; }
body.webgl-particles[data-scene="transmit"] .scene-transmit::after { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}