:root {
  --bg: #0d0d0d;
  --bg-2: #121212;
  --panel: #171717;
  --panel-2: #1f1f1f;
  --line: #343034;
  --line-strong: #524150;
  --text: #f2efee;
  --muted: #c1b8bb;
  --soft: #8f8588;
  --accent: #ff0055;
  --accent-2: #00ffff;
  --accent-3: #4a154b;
  --accent-4: #0a5c36;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --radius: 8px;
  --wrap: min(1200px, calc(100vw - 32px));
  --header-h: 80px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(74, 21, 75, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(0, 255, 255, 0.03), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 88px),
    var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.72;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #fff;
}

button,
input,
textarea,
select {
  font: inherit;
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  padding: 10px 14px;
  background: #fff;
  color: #000;
  z-index: 1000;
  transition: top .2s ease;
}

.skip-link:focus {
  top: 16px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(14px);
  background: rgba(10, 10, 10, 0.84);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: contain;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 0 18px rgba(255,0,85,.18);
}

.brand-text {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.nav-row-pages {
  font-size: .9rem;
}

.site-nav a {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  transition: all .2s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: #fff;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.nav-toggle,
.download-btn,
.back-to-top,
.ghost-link {
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--text);
  border-radius: var(--radius);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.nav-toggle,
.download-btn {
  padding: 10px 16px;
  cursor: pointer;
}

.download-btn {
  background: linear-gradient(180deg, rgba(255,0,85,0.22), rgba(255,255,255,0.03));
  border-color: rgba(255,0,85,0.4);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,0,85,0.08) inset;
  min-inline-size: max-content;
  white-space: nowrap;
}

.download-btn:hover,
.nav-toggle:hover,
.back-to-top:hover,
.ghost-link:hover {
  transform: translateY(-1px);
  border-color: rgba(0,255,255,0.5);
  color: #fff;
}

.download-btn:hover {
  background: linear-gradient(180deg, rgba(0,255,255,0.18), rgba(255,0,85,0.18));
}

.download-btn-large {
  padding: 14px 20px;
  font-size: 1rem;
}

.nav-toggle {
  display: none;
}

.site-body {
  overflow-x: hidden;
}

.band {
  padding: 72px 0;
}

.band-soft {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.hero {
  padding-top: 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}

.hero-grid-tight {
  grid-template-columns: 1.05fr .95fr;
}

.hero-copy h1 {
  margin: 8px 0 12px;
  font-size: clamp(38px, 6vw, 68px);
  line-height: .95;
}

h1, h2, h3, p, dl, ul, ol, figure {
  margin-top: 0;
}

.eyebrow,
.section-kicker,
.panel-title,
.footer-title,
.step-index {
  margin-bottom: 10px;
  color: var(--accent-2);
  font-size: .88rem;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: #fff;
}

.hero-summary {
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.03rem;
}

.hero-actions,
.download-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.fact-strip div,
.info-panel,
.tile,
.qa-card,
.step-card,
.timeline-item,
.faq-item,
.media-card,
.download-panel {
  background: rgba(17,17,17,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.fact-strip div {
  padding: 14px;
}

.fact-strip dt,
.info-list dt {
  color: var(--soft);
  font-size: .85rem;
}

.fact-strip dd,
.info-list dd {
  margin: 4px 0 0;
  color: #fff;
}

.hero-media {
  display: grid;
  gap: 16px;
}

.hero-frame,
.media-card,
.gallery-item {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  background: #111;
}

.hero-frame-main img,
.media-card img,
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}

.hero-frame-main {
  aspect-ratio: 16 / 9;
}

.hero-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hero-frame-small {
  aspect-ratio: 3 / 4;
}

.hero-note {
  padding: 18px;
  background: linear-gradient(180deg, rgba(74,21,75,.24), rgba(10,92,54,.12));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
}

.hero-note-title {
  margin-bottom: 10px;
  color: var(--accent-2);
}

.hero-note ul,
.step-list {
  margin: 0;
  padding-left: 20px;
}

.section-grid {
  display: grid;
  gap: 26px;
}

.section-grid-2 {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
}

.tile-grid {
  display: grid;
  gap: 16px;
}

.tile-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tile-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tile-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tile-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile,
.qa-card,
.step-card {
  padding: 20px;
}

.tile h3,
.qa-card h3,
.step-card h3,
.timeline-item time {
  margin-bottom: 10px;
  color: #fff;
}

.tile p,
.qa-card p,
.step-card p,
.timeline-item p,
.info-panel,
.footer-copy,
.footer-meta,
.gallery-item figcaption,
.media-card figcaption,
.download-panel p {
  color: var(--muted);
}

.tile-accent {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
}

.link-tile {
  display: block;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.link-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(0,255,255,.42);
  background: rgba(255,255,255,0.05);
}

.info-panel {
  padding: 20px;
  align-self: start;
}

.info-list {
  display: grid;
  gap: 12px;
}

.info-list div {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.info-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

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

.gallery-item {
  margin: 0;
}

.gallery-item img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #05070b;
}

.gallery-item figcaption {
  padding: 14px 16px 16px;
}

.timeline {
  display: grid;
  gap: 14px;
}

.timeline-item {
  padding: 18px 20px;
}

.timeline-item time {
  display: block;
  font-size: .95rem;
}

.faq-grid {
  display: grid;
  gap: 12px;
}

.faq-grid-large {
  gap: 14px;
}

.faq-item {
  padding: 0;
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 600;
  color: #fff;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
}

.faq-item[open] summary {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.step-list {
  display: grid;
  gap: 10px;
}

.content-stack {
  display: grid;
  gap: 24px;
}

.section-lead {
  max-width: 78ch;
  color: var(--muted);
  font-size: 1.02rem;
}

.rich-list,
.compact-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.rich-list {
  display: grid;
  gap: 10px;
}

.compact-list {
  display: grid;
  gap: 6px;
}

.card-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-list li {
  padding: 16px 18px;
  color: var(--muted);
  background: rgba(44,44,44,.74);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
  box-shadow: 6px 8px 0 rgba(13,13,13,.42);
}

.card-list strong,
.rich-list strong,
.compact-list strong {
  color: #fff;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  color: var(--muted);
  background: rgba(44,44,44,.78);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 10px 10px 0 rgba(13,13,13,.5);
}

.data-table th,
.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: #fff;
  background: linear-gradient(120deg, rgba(74,21,75,.58), rgba(10,92,54,.2));
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.table-wrap {
  overflow-x: auto;
  padding-bottom: 10px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 8px 10px;
  color: #fff;
  background: rgba(74,21,75,.48);
  border: 1px solid rgba(0,255,255,.18);
  border-radius: 2px;
}

.note-panel {
  padding: 20px;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(74,21,75,.42), rgba(44,44,44,.92) 55%, rgba(10,92,54,.24)),
    #2c2c2c;
  border: 1px solid rgba(255,0,85,.24);
  border-radius: 2px;
  box-shadow: 9px 12px 0 rgba(13,13,13,.54);
}

.note-panel strong {
  color: #fff;
}

.page-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.page-index .tile {
  min-height: 188px;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
}

.meta-row span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(13,13,13,.42);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.step-card {
  min-height: 176px;
}

.step-index {
  font-weight: 700;
  margin-bottom: 8px;
}

.media-card figcaption {
  padding: 14px 16px 16px;
}

.hero-inline {
  margin: 0;
}

.panel-title {
  margin-bottom: 12px;
}

.friend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.friend-list a {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
}

.site-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 30px 0 40px;
  background: rgba(8,8,8,0.92);
}

.footer-inner {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.4fr 1fr auto;
  align-items: start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-links a {
  color: var(--muted);
}

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.download-panel {
  justify-content: space-between;
  padding: 18px 20px;
}

.download-panel p {
  margin: 0;
}

@media (max-width: 1080px) {
  .hero-grid,
  .section-grid-2,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .tile-grid-4,
  .tile-grid-5,
  .page-index,
  .step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .header-inner {
    flex-wrap: wrap;
  }

  .site-nav {
    order: 4;
    width: 100%;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 0 4px;
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-row {
    justify-content: flex-start;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .hero-copy h1 {
    font-size: clamp(32px, 10vw, 48px);
  }

  .fact-strip,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .tile-grid-4,
  .tile-grid-3,
  .tile-grid-5,
  .tile-grid-2,
  .page-index,
  .step-grid {
    grid-template-columns: 1fr;
  }

  .data-table {
    min-width: 620px;
  }

  .hero-side {
    grid-template-columns: 1fr;
  }

  .download-panel {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 520px) {
  :root {
    --wrap: min(100vw - 20px, 1200px);
  }

  .band {
    padding: 56px 0;
  }

  .header-inner {
    gap: 12px;
  }

  .brand-text {
    font-size: .96rem;
  }

  .nav-row a {
    padding: 7px 10px;
  }
}

/* Visual direction from 颜色要求.txt: dark retro stone, stained-glass transitions, fluorescent contamination. */
:root {
  --stone: #2c2c2c;
  --stone-light: #3b383a;
  --glass-purple: #4a154b;
  --curse-green: #0a5c36;
  --blood: #ff0055;
  --spirit: #00ffff;
  --scroll-depth: 0;
  --parallax-x: 0px;
  --parallax-y: 0px;
}

body {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(74, 21, 75, .28), transparent 25%),
    linear-gradient(180deg, transparent 38%, rgba(10, 92, 54, .12) 70%, rgba(13, 13, 13, .92) 100%),
    #0d0d0d;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(0,255,255,.2) 49.2% 49.35%, transparent 49.5%),
    linear-gradient(180deg, transparent 0 35%, rgba(255,0,85,.14) 35.2% 35.35%, transparent 35.55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 96px);
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .12;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.06) 4px, transparent 5px 8px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,0,85,.035) 8px, transparent 9px 16px);
  mix-blend-mode: screen;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 5;
}

.site-header {
  background: rgba(13, 13, 13, .92);
  border-bottom: 1px solid rgba(44, 44, 44, .95);
}

.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0 6%, var(--glass-purple) 6% 36%, transparent 36% 41%, var(--blood) 41% 58%, transparent 58% 68%, var(--curse-green) 68% 92%, transparent 92%);
  clip-path: polygon(0 0, 7% 0, 9% 100%, 38% 100%, 40% 0, 64% 0, 66% 100%, 100% 100%, 100% 0);
  opacity: .85;
}

.site-header.is-scrolled {
  box-shadow: 0 14px 40px rgba(0,0,0,.56);
}

.brand-mark {
  border-radius: 6px;
  clip-path: none;
  background: transparent;
  box-shadow: 0 0 18px rgba(255,0,85,.18);
}

.brand-text {
  color: #fff;
  text-shadow: 0 0 16px rgba(0,255,255,.2);
}

.site-nav {
  gap: 18px;
}

.nav-row {
  gap: 4px;
}

.site-nav a {
  border-radius: 0;
  padding: 8px 11px;
  border-bottom: 1px solid transparent;
  color: #bdb5b8;
}

.site-nav a:hover,
.site-nav a.is-active {
  border-color: var(--spirit);
  background: rgba(0,255,255,.06);
  color: #fff;
  text-shadow: 0 0 12px rgba(0,255,255,.35);
}

.nav-row-pages a {
  color: #9e8ba0;
}

.nav-toggle,
.download-btn,
.back-to-top,
.ghost-link {
  border-radius: 0;
  clip-path: polygon(0 0, 92% 0, 100% 26%, 100% 100%, 8% 100%, 0 74%);
  background: #2c2c2c;
}

.download-btn {
  border-color: var(--blood);
  background: linear-gradient(135deg, rgba(255,0,85,.25), rgba(74,21,75,.7));
  box-shadow: 0 0 0 1px rgba(255,0,85,.15) inset, 0 0 22px rgba(255,0,85,.12);
}

.download-btn:hover,
.download-btn:focus-visible {
  background: linear-gradient(135deg, rgba(0,255,255,.24), rgba(10,92,54,.74));
  border-color: var(--spirit);
  box-shadow: 0 0 0 1px rgba(0,255,255,.18) inset, 0 0 24px rgba(0,255,255,.17);
}

.ghost-link:hover,
.back-to-top:hover,
.nav-toggle:hover {
  background: rgba(0,255,255,.12);
}

.band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(74,21,75,.18), transparent 36%),
    linear-gradient(300deg, rgba(10,92,54,.09), transparent 42%);
}

.band::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 10px;
  background:
    linear-gradient(120deg, transparent 0 7%, rgba(74,21,75,.8) 7.2% 23%, transparent 23.4% 31%, rgba(44,44,44,.95) 31.4% 56%, transparent 56.5% 62%, rgba(10,92,54,.8) 62.2% 88%, transparent 88.4%);
  clip-path: polygon(0 0, 14% 0, 16% 45%, 30% 22%, 33% 90%, 58% 70%, 61% 18%, 74% 50%, 100% 20%, 100% 100%, 0 100%);
  opacity: .78;
}

.band::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,0,85,.5) 18%, rgba(44,44,44,.8) 42%, rgba(0,255,255,.46) 76%, transparent);
  opacity: .65;
}

.band-soft {
  background:
    linear-gradient(135deg, rgba(74,21,75,.3), transparent 44%),
    linear-gradient(315deg, rgba(10,92,54,.17), transparent 53%),
    rgba(44,44,44,.16);
}

body.is-deep .band-soft {
  background:
    linear-gradient(135deg, rgba(74,21,75,.16), transparent 42%),
    linear-gradient(315deg, rgba(10,92,54,.27), transparent 56%),
    rgba(20,20,20,.32);
}

body.is-abyss .band {
  background:
    linear-gradient(180deg, rgba(13,13,13,.22), rgba(13,13,13,.78)),
    linear-gradient(135deg, rgba(74,21,75,.08), transparent 42%);
}

.hero {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding-top: 58px;
  padding-bottom: 82px;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 77% 32%, rgba(0,255,255,.11), transparent 30%),
    linear-gradient(180deg, rgba(13,13,13,.12), rgba(13,13,13,.78)),
    linear-gradient(90deg, #0d0d0d 0 34%, transparent 70%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -5% -4% 0 24%;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(13,13,13,.78), transparent 42%),
    linear-gradient(180deg, rgba(13,13,13,.18), rgba(13,13,13,.8)),
    url("../img/d3e75c034fb8f425b073a4bf8f5c90f53494352403826731.webp") center / cover no-repeat;
  transform: translate3d(calc(var(--parallax-x) * -0.42), calc(var(--parallax-y) * -0.32), 0) scale(1.07);
  filter: grayscale(.18) contrast(1.22) saturate(.72);
  opacity: .7;
  transition: transform .2s ease-out;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 48%, rgba(255,0,85,.13) 48.2% 48.5%, transparent 48.8%),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.035) 6px, transparent 7px 13px);
  mix-blend-mode: screen;
  opacity: .5;
}

.hero-grid {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100vw - 48px));
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
  transition: transform .2s ease-out;
}

.hero-copy h1 {
  max-width: 9ch;
  color: #fff;
  text-shadow: 3px 3px 0 rgba(74,21,75,.9), 0 0 24px rgba(255,0,85,.18);
}

.eyebrow,
.section-kicker,
.panel-title,
.footer-title,
.step-index {
  color: var(--spirit);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero-subtitle {
  color: #f4dfe8;
  text-shadow: 0 0 14px rgba(255,0,85,.22);
}

.hero-summary,
.tile p,
.qa-card p,
.step-card p,
.timeline-item p,
.info-panel,
.footer-copy,
.footer-meta,
.gallery-item figcaption,
.media-card figcaption,
.download-panel p {
  color: #c7bfc1;
}

.fact-strip div,
.info-panel,
.tile,
.qa-card,
.step-card,
.timeline-item,
.faq-item,
.media-card,
.download-panel {
  background: #2c2c2c;
  border-color: rgba(255,255,255,.12);
  border-radius: 2px;
  box-shadow: 10px 10px 0 rgba(13,13,13,.56), 0 0 0 1px rgba(74,21,75,.16) inset;
}

.fact-strip div:nth-child(2n),
.tile:nth-child(2n),
.step-card:nth-child(2n) {
  box-shadow: -8px 12px 0 rgba(13,13,13,.5), 0 0 0 1px rgba(10,92,54,.18) inset;
}

.fact-strip div {
  padding: 13px;
}

.fact-strip dd,
.info-list dd {
  color: #fff;
}

.hero-media {
  position: relative;
  transform: translate3d(calc(var(--parallax-x) * .7), calc(var(--parallax-y) * .5), 0);
  transition: transform .2s ease-out;
}

.hero-media::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 0;
  bottom: 20px;
  left: 20px;
  border: 1px solid rgba(0,255,255,.25);
  clip-path: polygon(0 8%, 36% 0, 63% 5%, 100% 0, 95% 31%, 100% 66%, 92% 100%, 54% 94%, 22% 100%, 0 86%, 5% 48%);
  pointer-events: none;
}

.hero-frame,
.media-card,
.gallery-item {
  position: relative;
  border-radius: 2px;
  border-color: rgba(255,255,255,.16);
  background: #0d0d0d;
  box-shadow: 12px 14px 0 rgba(13,13,13,.65), 0 0 28px rgba(74,21,75,.2);
}

.hero-frame-main {
  clip-path: polygon(0 0, 98% 0, 100% 5%, 100% 94%, 96% 100%, 3% 100%, 0 94%);
}

.hero-frame-main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,255,255,.12), transparent 14% 84%, rgba(255,0,85,.12)),
    linear-gradient(180deg, transparent 74%, rgba(0,0,0,.65));
  mix-blend-mode: screen;
}

.hero-side {
  transform: translateY(8px);
}

.hero-frame-small {
  clip-path: polygon(5% 0, 100% 0, 96% 100%, 0 94%, 0 8%);
}

.hero-note {
  border-radius: 2px;
  background:
    linear-gradient(145deg, rgba(74,21,75,.86), rgba(44,44,44,.96) 58%, rgba(10,92,54,.55));
  border-color: rgba(255,0,85,.28);
  box-shadow: 8px 12px 0 rgba(13,13,13,.56);
}

.hero-note::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--blood);
  box-shadow: 14px 0 0 var(--spirit);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 22% 100%);
}

.section-grid-2 {
  align-items: start;
}

.tile-grid-4,
.tile-grid-3,
.tile-grid-5,
.gallery-grid,
.step-grid {
  position: relative;
}

.tile-grid-4 .tile:nth-child(2),
.tile-grid-3 .tile:nth-child(2),
.tile-grid-5 .tile:nth-child(2),
.step-grid .step-card:nth-child(2),
.gallery-grid .gallery-item:nth-child(2) {
  transform: translateY(16px);
}

.tile-grid-4 .tile:nth-child(3),
.tile-grid-3 .tile:nth-child(3),
.tile-grid-5 .tile:nth-child(3),
.step-grid .step-card:nth-child(3),
.gallery-grid .gallery-item:nth-child(3) {
  transform: translateY(-8px);
}

.tile,
.qa-card,
.step-card,
.timeline-item,
.info-panel,
.download-panel {
  position: relative;
  overflow: hidden;
}

.tile::before,
.qa-card::before,
.step-card::before,
.timeline-item::before,
.info-panel::before,
.download-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--glass-purple), var(--blood) 48%, var(--spirit));
  clip-path: polygon(0 0, 28% 0, 30% 100%, 55% 50%, 72% 100%, 100% 0, 100% 100%, 0 100%);
  opacity: .72;
}

.tile-accent {
  background:
    linear-gradient(145deg, rgba(74,21,75,.42), rgba(44,44,44,.92) 52%, rgba(10,92,54,.2)),
    #2c2c2c;
}

.link-tile:hover {
  transform: translateY(-4px) rotate(-.25deg);
  border-color: var(--spirit);
  background:
    linear-gradient(145deg, rgba(0,255,255,.12), rgba(44,44,44,.96) 55%, rgba(255,0,85,.14)),
    #2c2c2c;
  box-shadow: 8px 12px 0 rgba(13,13,13,.6), 0 0 24px rgba(0,255,255,.14);
}

#content .tile-grid,
#systems .tile-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

#content .tile-grid .tile,
#systems .tile-grid .tile {
  height: 100%;
  transform: none;
}

.info-panel {
  border-left: 3px solid var(--glass-purple);
}

.info-list div {
  border-bottom-color: rgba(255,255,255,.12);
}

.gallery-item {
  cursor: default;
  user-select: auto;
  touch-action: auto;
}

.gallery-item figcaption {
  position: relative;
  z-index: 5;
  background: #0d0d0d;
  border-top: 1px solid rgba(255,0,85,.32);
}

.timeline-item time {
  color: var(--blood);
  text-shadow: 0 0 14px rgba(255,0,85,.32);
}

.faq-item summary {
  border-left: 3px solid var(--glass-purple);
}

.faq-item[open] summary {
  border-bottom-color: rgba(255,255,255,.12);
  border-left-color: var(--blood);
  color: #fff;
  text-shadow: 0 0 12px rgba(255,0,85,.24);
}

.download-panel {
  background:
    linear-gradient(110deg, rgba(255,0,85,.13), transparent 44%),
    linear-gradient(290deg, rgba(0,255,255,.09), transparent 54%),
    #2c2c2c;
  border-color: rgba(255,0,85,.26);
}

.friend-list a {
  border-radius: 0;
  border-color: rgba(0,255,255,.18);
  background: #2c2c2c;
}

.friend-list a:hover {
  border-color: var(--spirit);
  color: #fff;
  background: rgba(0,255,255,.1);
}

.site-footer {
  background:
    linear-gradient(120deg, rgba(74,21,75,.18), transparent 36%),
    #0d0d0d;
  border-top-color: rgba(255,0,85,.32);
}

.back-to-top {
  background: var(--glass-purple);
  border-color: var(--blood);
}

.dive-rail {
  position: fixed;
  top: 50%;
  right: 18px;
  z-index: 20;
  display: grid;
  gap: 10px;
  width: 72px;
  transform: translateY(-50%);
  text-align: right;
}

.dive-rail-label {
  color: var(--spirit);
  font-size: .68rem;
  letter-spacing: .14em;
  writing-mode: vertical-rl;
  justify-self: end;
  text-transform: uppercase;
}

.dive-rail-line {
  width: 1px;
  height: 52px;
  justify-self: end;
  background: linear-gradient(var(--spirit), var(--blood), transparent);
}

.dive-rail a {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 3px 0;
  color: rgba(255,255,255,.42);
  font-size: .72rem;
  transition: color .2s ease, transform .2s ease;
}

.dive-rail a span {
  display: none;
}

.dive-rail a:hover,
.dive-rail a.is-active {
  color: #fff;
  transform: translateX(-4px);
  text-shadow: 0 0 12px var(--spirit);
}

.dive-rail a.is-active {
  color: var(--blood);
}

.is-glitching {
  animation: glitch-shake .52s steps(2, end);
}

.is-glitching::before,
.is-glitching::after {
  content: "";
  position: absolute;
  z-index: 6;
  pointer-events: none;
  inset: 0;
}

.is-glitching::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,0,85,.28) 9px 11px, transparent 12px 18px);
  mix-blend-mode: screen;
  clip-path: polygon(0 10%, 100% 6%, 100% 17%, 0 22%, 0 48%, 100% 42%, 100% 54%, 0 60%);
}

.is-glitching::after {
  background: linear-gradient(90deg, transparent, rgba(0,255,255,.22), transparent);
  mix-blend-mode: screen;
  transform: translateX(-18%);
  animation: glitch-scan .52s linear;
}

.is-hit {
  animation: damage-flash .52s steps(3, end);
}

@keyframes glitch-shake {
  0%, 100% { transform: translate3d(0, 0, 0); filter: none; }
  25% { transform: translate3d(-3px, 1px, 0); filter: hue-rotate(22deg); }
  50% { transform: translate3d(4px, -1px, 0); filter: saturate(2) contrast(1.24); }
  75% { transform: translate3d(-1px, 2px, 0); filter: hue-rotate(-28deg); }
}

@keyframes glitch-scan {
  from { transform: translateX(-30%); }
  to { transform: translateX(120%); }
}

@keyframes damage-flash {
  0%, 100% { filter: none; }
  25% { filter: sepia(.8) saturate(3) hue-rotate(290deg); }
  45% { filter: invert(.1) saturate(2); }
  70% { filter: hue-rotate(130deg) saturate(2.4); }
}

@media (max-width: 1100px) {
  .dive-rail {
    right: 8px;
  }

  .dive-rail a {
    font-size: .66rem;
  }
}

@media (max-width: 840px) {
  .hero {
    min-height: auto;
    padding-top: 44px;
  }

  .hero::before {
    inset: 0;
    opacity: .38;
    transform: none;
  }

  .hero-grid {
    width: var(--wrap);
  }

  .hero-media,
  .hero-grid {
    transform: none;
  }

  .hero-media::before {
    inset: -10px 0 10px 0;
  }

  .dive-rail {
    display: none;
  }

  .tile-grid-4 .tile:nth-child(2),
  .tile-grid-3 .tile:nth-child(2),
  .tile-grid-5 .tile:nth-child(2),
  .step-grid .step-card:nth-child(2),
  .gallery-grid .gallery-item:nth-child(2),
  .tile-grid-4 .tile:nth-child(3),
  .tile-grid-3 .tile:nth-child(3),
  .tile-grid-5 .tile:nth-child(3),
  .step-grid .step-card:nth-child(3),
  .gallery-grid .gallery-item:nth-child(3) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero::before,
  .hero-grid,
  .hero-media {
    transition: none;
    transform: none;
  }

  .is-glitching,
  .is-hit {
    animation: none;
  }
}

/* Navigation hierarchy: primary routes above, browseable reference topics below. */
:root {
  --header-h: 116px;
}

.header-inner {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 18px;
  padding: 10px 0 8px;
}

.site-nav {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.nav-row {
  min-width: 0;
}

.nav-row-primary {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 3px;
}

.nav-row-primary a {
  padding: 7px 10px;
  white-space: nowrap;
  font-size: .92rem;
}

.nav-row-pages {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.nav-group-label {
  color: var(--spirit);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-topic-scroll {
  display: flex;
  min-width: 0;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.nav-topic-scroll::-webkit-scrollbar {
  display: none;
}

.nav-topic-scroll a {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #9e8ba0;
  font-size: .78rem;
  line-height: 1.35;
  white-space: nowrap;
  scroll-snap-align: start;
}

.nav-topic-scroll a:hover,
.nav-topic-scroll a.is-active {
  color: #fff;
  border-color: rgba(0,255,255,.55);
  background: rgba(0,255,255,.08);
}

.site-header .download-btn {
  min-height: 46px;
  padding-inline: 17px;
}

@media (max-width: 1160px) {
  .header-inner {
    gap: 12px;
  }

  .brand-text {
    font-size: .92rem;
  }

  .nav-row-primary a {
    padding-inline: 8px;
    font-size: .86rem;
  }
}

@media (max-width: 840px) {
  :root {
    --header-h: 124px;
  }

  .header-inner {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
  }

  .brand {
    min-width: 0;
  }

  .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }

  .site-header > .header-inner > .download-btn {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: center;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    display: none;
    gap: 16px;
    padding: 16px 0 4px;
    border-top: 1px solid rgba(255,255,255,.1);
  }

  .site-nav.is-open {
    display: grid;
  }

  .nav-row-primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .nav-row-primary a {
    display: grid;
    min-height: 46px;
    place-items: center;
    padding: 9px;
    background: rgba(44,44,44,.52);
    border: 1px solid rgba(255,255,255,.1);
  }

  .nav-row-pages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding-top: 14px;
  }

  .nav-group-label {
    font-size: .72rem;
  }

  .nav-topic-scroll {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }

  .nav-topic-scroll a {
    display: grid;
    min-height: 42px;
    place-items: center start;
    padding: 9px 10px;
    color: #c7bfc1;
    background: rgba(13,13,13,.44);
    border: 1px solid rgba(255,255,255,.09);
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .brand-mark {
    width: 28px;
    height: 28px;
  }

  .brand-text {
    font-size: .9rem;
  }

  .nav-toggle {
    padding-inline: 14px;
  }
}

body[data-page="home"] .hero {
  min-height: min(720px, calc(100svh - var(--header-h) - 34px));
  display: flex;
  align-items: center;
  padding: clamp(42px, 7vh, 72px) 0 clamp(46px, 7vh, 70px);
  overflow: hidden;
  isolation: isolate;
  background: #07090d;
}

body[data-page="home"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 6, 10, .99) 0%, rgba(5, 6, 10, .95) 42%, rgba(5, 6, 10, .56) 70%, rgba(5, 6, 10, .24) 100%),
    linear-gradient(180deg, rgba(5, 6, 10, .32), rgba(5, 6, 10, .86));
  opacity: 1;
  transform: none;
  filter: none;
}

body[data-page="home"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 9% 66%, rgba(5, 6, 10, .94) 0 15%, rgba(5, 6, 10, .62) 26%, transparent 39%),
    linear-gradient(180deg, rgba(5, 6, 10, .1) 0 58%, rgba(5, 6, 10, .82) 100%),
    linear-gradient(115deg, transparent 0 59%, rgba(176, 42, 70, .2) 59.2% 59.7%, transparent 60%);
  opacity: 1;
  mix-blend-mode: normal;
}

body[data-page="home"] .hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}

body[data-page="home"] .hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 66%, rgba(5, 6, 10, .96) 0 18%, rgba(5, 6, 10, .7) 31%, transparent 44%),
    linear-gradient(90deg, rgba(5, 6, 10, .98) 0%, rgba(5, 6, 10, .94) 42%, rgba(5, 6, 10, .52) 70%, rgba(5, 6, 10, .18) 100%),
    linear-gradient(180deg, transparent 0 52%, rgba(5, 6, 10, .84) 100%);
}

body[data-page="home"] .hero-backdrop img {
  width: 100%;
  height: calc(100% + 140px);
  object-fit: cover;
  object-position: 56% 54%;
  transform: translateY(-70px) scale(1.02);
  filter: saturate(.9) contrast(1.06) brightness(.82);
  transition: transform .2s ease-out;
}

body[data-page="home"] .hero-grid {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100vw - 48px));
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
  transform: none;
}

body[data-page="home"] .hero-copy {
  max-width: 700px;
}

body[data-page="home"] .hero-copy h1 {
  max-width: 10ch;
  margin: 10px 0 18px;
  color: #fff8f4;
  font-size: 4.875rem;
  line-height: 1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .72);
}

body[data-page="home"] .hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  color: #9de8ea;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-page="home"] .hero .eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: #d94b67;
}

body[data-page="home"] .hero-subtitle {
  max-width: 21em;
  margin-bottom: 14px;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.45;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .68);
}

body[data-page="home"] .hero-summary {
  max-width: 62ch;
  color: #d8d2cf;
  font-size: 1rem;
  line-height: 1.86;
}

body[data-page="home"] .hero-actions {
  margin-top: 24px;
  gap: 14px;
}

body[data-page="home"] .hero .download-btn,
body[data-page="home"] .hero .ghost-link {
  min-height: 48px;
  border-radius: 6px;
  clip-path: none;
  font-weight: 700;
}

body[data-page="home"] .hero .download-btn {
  border-color: rgba(255, 77, 116, .72);
  background: linear-gradient(180deg, rgba(213, 55, 93, .95), rgba(116, 26, 55, .92));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .36), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

body[data-page="home"] .hero .ghost-link {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(9, 12, 17, .62);
  backdrop-filter: blur(10px);
}

body[data-page="home"] .hero .download-btn:hover,
body[data-page="home"] .hero .download-btn:focus-visible {
  border-color: rgba(157, 232, 234, .86);
  background: linear-gradient(180deg, rgba(23, 109, 106, .92), rgba(24, 48, 55, .96));
}

body[data-page="home"] .meta-row {
  margin-top: 18px;
  color: rgba(255, 255, 255, .72);
}

body[data-page="home"] .meta-row span {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(9, 12, 17, .46);
  backdrop-filter: blur(8px);
}

body[data-page="home"] .hero-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
  max-width: 720px;
}

body[data-page="home"] .hero-shortcuts a {
  min-height: 84px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  background: rgba(9, 12, 17, .58);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

body[data-page="home"] .hero-shortcuts a:hover,
body[data-page="home"] .hero-shortcuts a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(157, 232, 234, .62);
  background: rgba(16, 29, 34, .78);
}

body[data-page="home"] .hero-shortcuts span,
body[data-page="home"] .hero-route-panel strong {
  display: block;
  color: #fff;
  line-height: 1.35;
  grid-column: 2;
}

body[data-page="home"] .hero-shortcuts small,
body[data-page="home"] .hero-route-panel small {
  display: block;
  margin-top: 5px;
  color: rgba(238, 234, 229, .68);
  font-size: .78rem;
  line-height: 1.45;
  grid-column: 2;
}

body[data-page="home"] .hero-route-panel {
  align-self: end;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(8, 11, 16, .68);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36);
  backdrop-filter: blur(14px);
}

body[data-page="home"] .hero-route-panel .panel-title {
  margin-bottom: 16px;
  color: #9de8ea;
}

body[data-page="home"] .hero-route-panel ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-page="home"] .hero-route-panel a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

body[data-page="home"] .hero-route-panel li:last-child a {
  padding-bottom: 0;
  border-bottom: 0;
}

body[data-page="home"] .hero-route-panel a > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: #ffd5c8;
  background: rgba(186, 57, 78, .14);
  font-size: .8rem;
  line-height: 1;
}

body[data-page="home"] .hero-scroll-cue {
  position: absolute;
  right: max(24px, calc((100vw - 1180px) / 2));
  bottom: 16px;
  z-index: 3;
  color: rgba(255, 255, 255, .68);
  font-size: .86rem;
}

body[data-page="home"] .hero-scroll-cue::after {
  content: "↓";
  margin-left: 8px;
  color: #9de8ea;
}

@media (max-width: 1080px) {
  body[data-page="home"] .hero {
    min-height: auto;
  }

  body[data-page="home"] .hero-copy h1 {
    font-size: 4.125rem;
  }

  body[data-page="home"] .hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body[data-page="home"] .hero-route-panel {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .header-inner {
    position: relative;
    padding-right: 78px;
  }

  .nav-toggle {
    position: absolute;
    top: 12px;
    right: 0;
    z-index: 2;
    display: inline-flex !important;
    min-width: 64px;
    justify-content: center;
    color: #fff;
    border-color: rgba(157, 232, 234, .3);
    background: rgba(9, 12, 17, .72);
  }

  body[data-page="home"] .hero {
    padding: 32px 0 38px;
  }

  body[data-page="home"] .hero::before {
    background:
      linear-gradient(180deg, rgba(5, 6, 10, .74), rgba(5, 6, 10, .92)),
      linear-gradient(90deg, rgba(5, 6, 10, .9), rgba(5, 6, 10, .44));
  }

  body[data-page="home"] .hero-backdrop img {
    object-position: 60% 54%;
    transform: translateY(-58px) scale(1.02);
    filter: saturate(.86) contrast(1.04) brightness(.72);
  }

  body[data-page="home"] .hero-grid {
    width: var(--wrap);
    gap: 22px;
  }

  body[data-page="home"] .hero-copy h1 {
    max-width: 9ch;
    font-size: 3.125rem;
  }

  body[data-page="home"] .hero-subtitle {
    font-size: 1.12rem;
  }

  body[data-page="home"] .hero-summary {
    display: none;
  }

  body[data-page="home"] .hero-actions {
    margin-top: 18px;
  }

  body[data-page="home"] .hero-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
  }

  body[data-page="home"] .hero-shortcuts a {
    min-height: 56px;
    padding: 11px 12px;
  }

  body[data-page="home"] .hero-shortcuts small {
    display: none;
  }

  body[data-page="home"] .hero-route-panel {
    display: none;
  }

  body[data-page="home"] .hero-scroll-cue {
    display: none;
  }
}

@media (max-width: 420px) {
  body[data-page="home"] .hero {
    padding-top: 28px;
  }

  body[data-page="home"] .hero-copy h1 {
    font-size: 2.625rem;
  }

  body[data-page="home"] .hero .download-btn,
  body[data-page="home"] .hero .ghost-link {
    width: 100%;
  }

  body[data-page="home"] .hero-shortcuts {
    gap: 8px;
  }

  body[data-page="home"] .hero-shortcuts a {
    min-height: 50px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-backdrop img,
  body[data-page="home"] .hero-shortcuts a {
    transition: none;
  }

  body[data-page="home"] .hero-shortcuts a:hover,
  body[data-page="home"] .hero-shortcuts a:focus-visible {
    transform: none;
  }
}

.intro-section {
  padding: 76px 0 82px;
  background:
    linear-gradient(180deg, rgba(23, 7, 22, .72), rgba(8, 10, 15, .94)),
    linear-gradient(115deg, rgba(157, 232, 234, .08), transparent 36%),
    #080a0f;
}

.intro-section::before {
  opacity: .42;
}

.intro-section::after {
  opacity: .36;
}

.intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: 26px;
  align-items: start;
}

.intro-copy {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.intro-copy h2 {
  max-width: 14em;
  margin-bottom: 0;
  color: #fff;
  font-size: 2.35rem;
  line-height: 1.18;
}

.intro-lead {
  max-width: 62ch;
  margin: 0;
  color: #f1ece8;
  font-size: 1.08rem;
  line-height: 1.78;
}

.intro-body {
  display: grid;
  gap: 10px;
  max-width: 72ch;
  color: #cfc7c6;
}

.intro-body p {
  margin: 0;
}

.intro-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.intro-highlights article,
.intro-next a {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(8, 11, 16, .72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
}

.intro-highlights article {
  min-height: 154px;
  padding: 17px;
}

.intro-highlights span {
  display: inline-flex;
  margin-bottom: 18px;
  color: #9de8ea;
  font-size: .82rem;
  font-weight: 700;
}

.intro-highlights strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.35;
}

.intro-highlights p {
  margin: 8px 0 0;
  color: rgba(238, 234, 229, .72);
  font-size: .92rem;
  line-height: 1.65;
}

.intro-facts {
  align-self: end;
  width: 100%;
  padding: 24px 26px;
  border-radius: 8px;
  border-color: rgba(157, 232, 234, .2);
  background:
    linear-gradient(180deg, rgba(13, 17, 23, .94), rgba(9, 11, 17, .86)),
    linear-gradient(145deg, rgba(217, 75, 103, .14), transparent 42%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.intro-facts::before {
  height: 3px;
  background: linear-gradient(90deg, #9de8ea, #d94b67 62%, transparent);
  clip-path: none;
}

.intro-facts .panel-title {
  margin-bottom: 18px;
}

.intro-facts .info-list {
  gap: 0;
}

.intro-facts .info-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.intro-facts .info-list div:first-child {
  padding-top: 0;
}

.intro-facts .info-list div:last-child {
  padding-bottom: 0;
}

.intro-facts .info-list dt {
  color: rgba(157, 232, 234, .78);
}

.intro-facts .info-list dd {
  margin: 0;
  color: #fff;
  line-height: 1.58;
}

.intro-next {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.intro-next a {
  display: grid;
  min-height: 76px;
  align-content: center;
  padding: 15px 18px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.intro-next a:hover,
.intro-next a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(157, 232, 234, .52);
  background: rgba(18, 28, 34, .8);
}

.intro-next span {
  margin-bottom: 3px;
  color: rgba(238, 234, 229, .58);
  font-size: .78rem;
}

.intro-next strong {
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.35;
}

@media (max-width: 1080px) {
  .intro-layout {
    grid-template-columns: 1fr;
  }

  .intro-facts {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .intro-section {
    padding: 58px 0 64px;
  }

  .intro-copy h2 {
    font-size: 1.95rem;
  }

  .intro-lead {
    font-size: 1rem;
  }

  .intro-highlights,
  .intro-next {
    grid-template-columns: 1fr;
  }

  .intro-highlights article {
    min-height: auto;
  }

  .intro-facts {
    padding: 21px 18px;
  }

  .intro-facts .info-list div {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
  }
}