@font-face {
  font-family: "Teko ODV";
  src: url("../fonts/Teko-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani ODV";
  src: url("../fonts/Rajdhani-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani ODV";
  src: url("../fonts/Rajdhani-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani ODV";
  src: url("../fonts/Rajdhani-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --g-void: #050a10;
  --g-ink: #081421;
  --g-navy: #102a43;
  --g-blue: #294f70;
  --g-steel: #8ca2b3;
  --g-line: #5f778d;
  --g-white: #eeede6;
  --g-paper: #deddd5;
  --g-red: #cf3033;
  --g-yellow: #f0c52f;
  --g-cyan: #7fc1d0;
  --g-display: "Teko ODV", "Arial Narrow", sans-serif;
  --g-interface: "Rajdhani ODV", "Arial Narrow", sans-serif;
  --g-code: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --focus: var(--g-yellow);
}

html {
  background: var(--g-void);
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

body {
  margin: 0;
  color: var(--g-white);
  font-family: var(--g-interface);
  background: var(--g-void);
  overflow-x: hidden;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .32;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(127, 193, 208, .08) 71px 72px),
    repeating-linear-gradient(0deg, transparent 0 71px, rgba(127, 193, 208, .06) 71px 72px),
    repeating-linear-gradient(125deg, transparent 0 179px, rgba(238, 237, 230, .035) 179px 180px);
  mix-blend-mode: normal;
}

button,
select {
  font-family: var(--g-interface);
}

.page {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.inner {
  width: 100%;
  padding-inline: max(28px, calc((100vw - 1540px) / 2));
}

.rule-bottom {
  border-bottom: 1px solid rgba(140, 162, 179, .42);
}

.skip-link {
  left: 16px;
  background: var(--g-yellow);
  color: var(--g-ink);
  font-family: var(--g-interface);
  font-weight: 700;
}

.ops-header {
  position: relative;
  z-index: 20;
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid rgba(140, 162, 179, .62);
  background: rgba(5, 10, 16, .96);
}

.ops-header::after {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 34%;
  height: 4px;
  content: "";
  background: var(--g-red);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.ops-brand {
  display: flex;
  min-width: 0;
  gap: 16px;
  align-items: center;
}

.ops-emblem {
  width: 64px;
  height: auto;
  aspect-ratio: 265.2 / 226.76;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  clip-path: none;
  filter: invert(1);
}

.ops-title {
  display: grid;
  gap: 0;
  min-width: 0;
  line-height: 1;
}

.ops-title strong {
  color: var(--g-white);
  font-family: var(--g-display);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: .9;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ops-title span,
.ops-title .ops-kicker {
  color: var(--g-steel);
  font-family: var(--g-code);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ops-title .ops-kicker {
  margin-bottom: 4px;
  color: var(--g-yellow);
}

.ops-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: end;
}

.ops-link {
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--g-line);
  padding: 8px 16px;
  color: var(--g-white);
  background: rgba(41, 79, 112, .22);
  font-family: var(--g-interface);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.ops-link::before {
  width: 5px;
  height: 5px;
  margin-right: 8px;
  content: "";
  background: var(--g-red);
}

.ops-link:hover,
.ops-link:focus-visible {
  color: var(--g-ink);
  background: var(--g-white);
}

.hero {
  position: relative;
  min-height: 620px;
  height: min(780px, calc(100svh - 92px));
  display: block;
  overflow: hidden;
  padding-block: 0;
  border-bottom: 8px solid var(--g-red);
  background: var(--g-ink);
  isolation: isolate;
}

.hero-art {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  filter: saturate(.88) contrast(1.04);
}

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

.hero::before {
  background:
    linear-gradient(90deg, rgba(5, 10, 16, .98) 0%, rgba(5, 10, 16, .9) 31%, rgba(5, 10, 16, .32) 57%, rgba(5, 10, 16, .08) 78%),
    linear-gradient(0deg, rgba(5, 10, 16, .92) 0%, transparent 40%);
}

.hero::after {
  z-index: -1;
  width: 47%;
  opacity: .32;
  background:
    repeating-linear-gradient(90deg, rgba(127, 193, 208, .2) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(127, 193, 208, .15) 0 1px, transparent 1px 54px);
  mask-image: linear-gradient(90deg, black 0%, transparent 100%);
}

.hero-copy {
  position: absolute;
  left: max(28px, calc((100vw - 1540px) / 2));
  top: 50%;
  width: min(650px, calc(100% - 56px));
  transform: translateY(-48%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  border: 0;
  padding: 7px 10px 6px;
  color: var(--g-ink);
  background: var(--g-yellow);
  font-family: var(--g-code);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.eyebrow::before {
  width: 7px;
  height: 7px;
  content: "";
  background: var(--g-red);
}

.hero h1 {
  width: fit-content;
  max-width: none;
  margin: 0;
  color: var(--g-white);
  font-family: var(--g-display);
  font-size: 8rem;
  font-weight: 600;
  line-height: .7;
  letter-spacing: .015em;
  text-shadow: none;
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
  width: fit-content;
  padding-inline: 4px 18px;
}

.hero h1 span:nth-child(2) {
  color: var(--g-ink);
  background: var(--g-white);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.hero h1 span:last-child {
  color: var(--g-yellow);
}

.intro {
  max-width: 560px;
  margin: 28px 0 0;
  border: 0;
  border-left: 5px solid var(--g-red);
  padding: 4px 0 4px 18px;
  color: rgba(238, 237, 230, .88);
  background: transparent;
  font-family: var(--g-interface);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.45;
}

.hero-command {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  border: 1px solid var(--g-steel);
  padding: 9px 15px;
  color: var(--g-white);
  background: rgba(5, 10, 16, .72);
  font-family: var(--g-interface);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero-command span {
  color: var(--g-yellow);
  font-size: 1.25rem;
}

.hero-command:hover,
.hero-command:focus-visible {
  color: var(--g-ink);
  background: var(--g-white);
}

.hero-telemetry {
  position: absolute;
  right: max(28px, calc((100vw - 1540px) / 2));
  bottom: 24px;
  display: grid;
  min-width: 236px;
  border-top: 3px solid var(--g-yellow);
  color: var(--g-white);
  background: rgba(5, 10, 16, .76);
  font-family: var(--g-code);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hero-telemetry span {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(140, 162, 179, .32);
  padding: 7px 9px;
}

.section {
  position: relative;
  padding-block: 76px;
  background: var(--g-ink);
}

.section:nth-of-type(3),
.section:nth-of-type(5) {
  background: #0c2033;
}

.section-bar {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 30px;
}

.section-bar::after {
  height: 1px;
  margin-bottom: 10px;
  content: "";
  background: var(--g-line);
}

.section-bar h2 {
  position: relative;
  color: var(--g-white);
  font-family: var(--g-display);
  font-size: 4.4rem;
  font-weight: 500;
  line-height: .82;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.section-bar h2::before {
  display: block;
  margin-bottom: 9px;
  color: var(--g-yellow);
  font-family: var(--g-code);
  font-size: .64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
}

#map-title::before { content: "01 / tactical plot"; }
#paths-title::before { content: "02 / recommended ingress"; }
#read-title::before { content: "03 / field legend"; }
#method-title::before { content: "04 / archive protocol"; }
#sources-title::before { content: "05 / source registry"; }

.control-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 14px;
  margin-bottom: 14px;
}

.control-panel,
.status-panel,
.map-shell,
.detail-panel,
.reader-panel,
.method-panel {
  border: 1px solid var(--g-line);
  border-radius: 0;
}

.control-panel {
  position: relative;
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(127, 193, 208, .06) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--g-void);
}

.control-panel::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  content: "";
  background: var(--g-yellow);
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 16px;
  border: 1px solid var(--g-line);
  padding: 4px;
  background: rgba(41, 79, 112, .22);
}

.mode-tabs button,
.reset-button,
.path-button {
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.mode-tabs button {
  min-height: 44px;
  color: var(--g-steel);
  background: transparent;
  font-family: var(--g-interface);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.mode-tabs button[aria-pressed="true"] {
  color: var(--g-ink);
  background: var(--g-white);
  box-shadow: inset 0 -4px 0 var(--g-red);
}

.filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.filter-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

label,
.mini-label {
  color: var(--g-cyan);
  font-family: var(--g-code);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

select {
  width: 100%;
  min-height: 41px;
  border: 1px solid var(--g-line);
  border-radius: 0;
  padding: 0 28px 0 9px;
  color: var(--g-white);
  background: #10243a;
  font-family: var(--g-interface);
  font-size: .77rem;
  font-weight: 600;
}

.checkbox-line {
  display: inline-flex;
  min-height: 38px;
  gap: 9px;
  align-items: center;
  margin-top: 12px;
  color: var(--g-white);
  font-family: var(--g-interface);
  font-size: .74rem;
  font-weight: 700;
}

.checkbox-line input {
  width: 20px;
  height: 20px;
  accent-color: var(--g-yellow);
}

.reset-button {
  width: auto;
  min-height: 38px;
  margin: 12px 0 0 18px;
  padding: 8px 18px;
  color: var(--g-white);
  background: var(--g-red);
  font-family: var(--g-interface);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.reset-button:hover,
.reset-button:focus-visible {
  color: var(--g-ink);
  background: var(--g-yellow);
}

.status-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: var(--g-white);
  color: var(--g-ink);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.status-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  content: "";
  background: var(--g-yellow);
}

.stat {
  min-width: 0;
  border-right: 1px solid rgba(8, 20, 33, .32);
  padding: 20px 14px;
}

.stat:last-child { border-right: 0; }

.stat strong {
  display: block;
  color: var(--g-navy);
  font-family: var(--g-display);
  font-size: 3.8rem;
  font-weight: 600;
  line-height: .7;
  text-shadow: none;
}

#statMode { font-size: 3.1rem; }

.stat span {
  display: block;
  margin-top: 12px;
  color: rgba(8, 20, 33, .72);
  font-family: var(--g-code);
  font-size: .55rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}

.map-shell {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border-top: 6px solid var(--g-yellow);
  background:
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(127, 193, 208, .09) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 59px, rgba(127, 193, 208, .07) 59px 60px),
    #071523;
  box-shadow: inset 0 0 0 8px rgba(5, 10, 16, .26);
}

.map-shell::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 18px;
  content: "GM / PLOT ACTIVE";
  padding: 4px 8px;
  color: var(--g-ink);
  background: var(--g-yellow);
  font-family: var(--g-code);
  font-size: .52rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}

.axis {
  position: sticky;
  z-index: 5;
  top: 0;
  display: grid;
  grid-template-columns: 176px 1fr;
  border: 0;
  border-bottom: 1px solid var(--g-line);
  background: rgba(5, 10, 16, .96);
}

.axis-title {
  border: 0;
  border-right: 1px solid var(--g-line);
  padding: 13px 12px;
  color: var(--g-yellow);
  font-family: var(--g-code);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ticks { min-height: 45px; }

.tick {
  color: var(--g-steel);
  border-left: 1px solid rgba(140, 162, 179, .3);
  font-family: var(--g-code);
  font-size: .57rem;
  font-weight: 700;
  line-height: 45px;
}

.lane {
  display: grid;
  grid-template-columns: 176px 1fr;
  min-height: var(--lane-height, 112px);
  border-bottom: 1px solid rgba(95, 119, 141, .42);
}

.lane-label {
  position: relative;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 0;
  border-right: 1px solid var(--g-line);
  padding: 12px 14px;
  background: rgba(5, 10, 16, .88);
}

.lane-label::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  content: "";
  background: var(--lane-color);
}

.lane-label button {
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  border: 1px solid var(--g-line);
  border-radius: 0;
  padding: 6px 8px;
  color: var(--g-white);
  background: #10243a;
  font-family: var(--g-interface);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.lane-label button:hover,
.lane-label button:focus-visible,
.lane.is-selected .lane-label button {
  color: var(--g-ink);
  background: var(--g-white);
  box-shadow: inset 5px 0 0 var(--lane-color);
}

.lane-summary {
  margin: 0;
  color: var(--g-steel);
  font-family: var(--g-code);
  font-size: .53rem;
  line-height: 1.35;
}

.track { min-height: var(--lane-height, 112px); }

.track::before {
  left: 2%;
  right: 2%;
  border-top: 1px solid color-mix(in srgb, var(--lane-color) 76%, transparent);
  box-shadow: 0 -3px 0 rgba(5, 10, 16, .7), 0 3px 0 rgba(5, 10, 16, .7);
}

.connector-layer {
  left: 176px;
  top: 46px;
}

.production {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  grid-template-columns: 21px minmax(62px, 94px);
  gap: 7px;
  align-items: center;
  min-height: 44px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(238, 237, 230, .72);
  border-radius: 0;
  padding: 6px 8px;
  color: var(--g-ink);
  background: var(--g-white);
  box-shadow: 4px 4px 0 rgba(5, 10, 16, .72);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  cursor: pointer;
  transition: left .34s ease, top .34s ease, opacity .18s ease, transform .18s ease;
}

.production::before {
  width: 20px;
  height: 20px;
  border: 0;
  background: var(--lane-color);
  -webkit-mask: url("../images/gundam-production-icon.svg") center / contain no-repeat;
  mask: url("../images/gundam-production-icon.svg") center / contain no-repeat;
}

.production::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 4px;
  height: 4px;
  content: "";
  background: var(--g-red);
}

.production span {
  color: var(--g-ink);
  font-family: var(--g-interface);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: left;
}

.production small {
  margin-top: 2px;
  color: rgba(8, 20, 33, .62);
  font-family: var(--g-code);
  font-size: .5rem;
  font-weight: 700;
}

.production:hover,
.production:focus-visible,
.production.is-selected {
  z-index: 7;
  outline: 3px solid var(--g-yellow);
  outline-offset: 3px;
  transform: translate(-50%, -50%) translateY(-3px);
  background: #fff7ce;
}

.production.is-path {
  color: var(--g-ink);
  background: var(--g-yellow);
}

.production.is-related {
  outline: 2px dashed var(--g-cyan);
  outline-offset: 4px;
}

.production.is-supplemental { border-style: dashed; }
.production.is-muted { opacity: .16; }

.detail-panel {
  position: sticky;
  top: 18px;
  min-height: 420px;
  overflow: hidden;
  border-top: 6px solid var(--g-red);
  padding: 24px;
  color: var(--g-ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(8, 20, 33, .055) 29px 30px),
    var(--g-paper);
  box-shadow: 8px 8px 0 rgba(5, 10, 16, .45);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.detail-panel::after {
  position: absolute;
  top: 13px;
  right: 12px;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--g-yellow);
}

.detail-panel .mini-label {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--g-white);
  background: var(--g-navy);
  padding: 5px 7px;
}

.detail-panel h2 {
  color: var(--g-ink);
  font-family: var(--g-display);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: .9;
}

.detail-panel h3 {
  color: var(--g-ink) !important;
  font-family: var(--g-display);
  font-weight: 600;
}

.detail-panel p {
  margin: 16px 0 0;
  color: rgba(8, 20, 33, .82);
  font-family: var(--g-interface);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}

.tag {
  border: 1px solid rgba(8, 20, 33, .56);
  border-radius: 0;
  padding: 4px 6px;
  color: var(--g-ink);
  background: rgba(255, 255, 255, .38);
  font-family: var(--g-code);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

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

.relation-list button {
  width: 100%;
  border: 1px solid rgba(8, 20, 33, .48);
  border-radius: 0;
  padding: 9px;
  color: var(--g-ink);
  background: rgba(255, 255, 255, .34);
  font-family: var(--g-interface);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.relation-list button:hover,
.relation-list button:focus-visible {
  color: var(--g-white);
  background: var(--g-navy);
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--g-line);
}

.path-button {
  position: relative;
  display: grid;
  min-height: 210px;
  gap: 10px;
  align-content: end;
  border-right: 1px solid rgba(8, 20, 33, .4);
  padding: 56px 22px 22px;
  color: var(--g-ink);
  background: var(--g-paper);
  text-align: left;
  clip-path: none;
}

.path-button:last-child { border-right: 0; }
.path-button:nth-child(2) { color: var(--g-white); background: var(--g-red); }
.path-button:nth-child(3) { background: var(--g-yellow); }
.path-button:nth-child(4) { color: var(--g-white); background: var(--g-navy); }

.path-button::before {
  position: absolute;
  top: 18px;
  left: 22px;
  color: currentColor;
  font-family: var(--g-code);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.path-button:nth-child(1)::before { content: "ROUTE 01 / FOUNDATION"; }
.path-button:nth-child(2)::before { content: "ROUTE 02 / MODERN"; }
.path-button:nth-child(3)::before { content: "ROUTE 03 / UC CORE"; }
.path-button:nth-child(4)::before { content: "ROUTE 04 / SHORT FORM"; }

.path-button strong {
  font-family: var(--g-display);
  font-size: 2.45rem;
  font-weight: 600;
  line-height: .82;
  text-transform: uppercase;
}

.path-button span {
  font-family: var(--g-interface);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

.path-button span:last-child {
  font-family: var(--g-code);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.path-button:hover,
.path-button:focus-visible,
.path-button.is-active {
  z-index: 2;
  outline: 5px solid var(--g-cyan);
  outline-offset: -5px;
  filter: brightness(1.08);
}

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

.reader-panel,
.method-panel {
  position: relative;
  border: 0;
  border-left: 6px solid var(--g-red);
  padding: 10px 0 10px 26px;
  color: var(--g-white);
  background: transparent;
}

.reader-panel:nth-child(2),
.method-panel:nth-child(2) { border-left-color: var(--g-yellow); }

.reader-panel h3,
.method-panel h3 {
  color: var(--g-white);
  font-family: var(--g-display);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: .9;
}

.reader-panel p,
.reader-panel li,
.method-panel p,
.method-panel li {
  color: rgba(238, 237, 230, .76);
  font-family: var(--g-interface);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.52;
}

.reader-panel ul,
.method-panel ul {
  margin: 18px 0 0;
  padding-left: 19px;
}

.reader-panel li + li,
.method-panel li + li { margin-top: 8px; }

.source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: var(--g-line);
}

.source-list a {
  min-height: 52px;
  display: flex;
  align-items: center;
  border: 0;
  padding: 12px 14px;
  color: var(--g-white);
  background: var(--g-void);
  font-family: var(--g-interface);
  font-size: .77rem;
  font-weight: 600;
  text-decoration: none;
}

.source-list a::before {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  content: "";
  background: var(--g-yellow);
}

.source-list a:hover,
.source-list a:focus-visible {
  color: var(--g-ink);
  background: var(--g-white);
}

footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  border-top: 8px solid var(--g-yellow);
  padding-block: 28px;
  color: var(--g-steel);
  background: var(--g-void);
}

.disclaimer {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.warn {
  width: 48px;
  border: 1px solid var(--g-line);
  color: var(--g-yellow);
  font-family: var(--g-display);
  font-size: 2.4rem;
}

.disclaimer strong {
  color: var(--g-white);
  font-family: var(--g-interface);
  font-size: .72rem;
  font-weight: 700;
}

.disclaimer p {
  color: var(--g-steel);
  font-family: var(--g-interface);
  font-size: .72rem;
  font-weight: 600;
}

.barcode {
  width: 176px;
  height: 42px;
  background: repeating-linear-gradient(90deg, var(--g-white) 0 2px, transparent 2px 5px, var(--g-red) 5px 7px, transparent 7px 12px);
}

.empty-state {
  color: var(--g-white);
  font-family: var(--g-interface);
}

:focus-visible {
  outline: 3px solid var(--g-yellow);
  outline-offset: 3px;
}

.is-preview {
  overflow: hidden;
}

.is-preview .ops-header,
.is-preview main > .section,
.is-preview footer {
  display: none;
}

.is-preview .page,
.is-preview main,
.is-preview .hero {
  width: 100%;
  height: 100vh;
  min-height: 0;
}

.is-preview .hero-copy {
  left: 7%;
  width: 72%;
}

.is-preview .hero h1 { font-size: 5.2rem; }
.is-preview .hero .intro,
.is-preview .hero-command,
.is-preview .hero-telemetry { display: none; }

@media (max-width: 1240px) {
  .hero h1 { font-size: 7rem; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .control-deck { grid-template-columns: minmax(0, 1fr) 340px; }
  .map-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1080px) {
  .control-deck,
  .map-grid { grid-template-columns: 1fr; }
  .detail-panel { position: static; min-height: 0; }
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-button:nth-child(2) { border-right: 0; }
  .path-button:nth-child(-n+2) { border-bottom: 1px solid rgba(8, 20, 33, .4); }
}

@media (max-width: 900px) {
  .inner { padding-inline: 22px; }
  .ops-header { grid-template-columns: 1fr auto; min-height: 80px; }
  .ops-emblem { width: 52px; height: auto; }
  .ops-title strong { font-size: 1.55rem; }
  .ops-title span:not(.ops-kicker) { display: none; }
  .ops-link { min-height: 38px; padding-inline: 11px; font-size: .67rem; }
  .hero {
    min-height: 560px;
    height: min(720px, calc(100svh - 118px));
  }
  .hero-art { object-position: 58% center; }
  .hero-copy { left: 22px; width: min(620px, calc(100% - 44px)); }
  .hero h1 { font-size: 6.1rem; }
  .hero-telemetry { right: 22px; }
  .section { padding-block: 58px; }
  .section-bar h2 { font-size: 3.7rem; }
  .reader-grid,
  .method-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 82px; }
  .inner { padding-inline: 16px; }
  .ops-header { min-height: 72px; gap: 10px; }
  .ops-header::after { width: 52%; }
  .ops-brand { gap: 10px; }
  .ops-emblem { width: 44px; height: auto; }
  .ops-title strong { font-size: 1.25rem; }
  .ops-title .ops-kicker { font-size: .48rem; }
  .ops-links { gap: 5px; }
  .ops-link { min-height: 36px; padding: 7px 8px; font-size: .57rem; }
  .ops-link::before { display: none; }
  .hero {
    min-height: 560px;
    height: calc(100svh - 108px);
  }
  .hero-art { object-position: 66% center; }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(5, 10, 16, .96) 0%, rgba(5, 10, 16, .78) 61%, rgba(5, 10, 16, .28) 100%),
      linear-gradient(0deg, rgba(5, 10, 16, .96) 0%, transparent 58%);
  }
  .hero::after { width: 100%; opacity: .18; }
  .hero-copy { left: 16px; width: calc(100% - 32px); transform: translateY(-46%); }
  .eyebrow { margin-bottom: 20px; font-size: .56rem; }
  .hero h1 { font-size: 4.9rem; line-height: .72; }
  .intro { max-width: 470px; margin-top: 24px; font-size: .98rem; }
  .hero-command { min-height: 42px; margin-top: 22px; }
  .hero-telemetry { right: 16px; bottom: 14px; min-width: 0; }
  .hero-telemetry span { display: none; }
  .hero-telemetry span:first-child { display: block; }
  .section { padding-block: 46px; }
  .section-bar { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .section-bar::after { display: none; }
  .section-bar h2 { font-size: 3.15rem; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { border-right: 1px solid rgba(8, 20, 33, .28); border-bottom: 0; padding: 16px 9px; }
  .stat strong { font-size: 2.65rem; }
  #statMode { font-size: 2.2rem; }
  .stat span { margin-top: 8px; font-size: .46rem; }
  .map-shell { min-height: 0; overflow: visible; }
  .axis { display: none; }
  .lane { grid-template-columns: 1fr; min-height: 0; }
  .lane-label { border-right: 0; border-bottom: 1px solid var(--g-line); padding: 12px 14px; }
  .track { display: grid; min-height: 0; gap: 7px; padding: 10px; }
  .track::before,
  .connector-layer { display: none; }
  .production {
    position: static;
    width: 100%;
    min-height: 48px;
    transform: none;
    grid-template-columns: 21px 1fr;
  }
  .production:hover,
  .production:focus-visible,
  .production.is-selected { transform: none; }
  .production span { white-space: normal; }
  .detail-panel { padding: 20px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-button { min-height: 176px; border-right: 0; border-bottom: 1px solid rgba(8, 20, 33, .4); }
  .path-button:last-child { border-bottom: 0; }
  .source-list { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
  .barcode { width: 100%; }
}

@media (max-width: 500px) {
  .ops-title .ops-kicker { display: none; }
  .ops-title strong { font-size: 1.1rem; }
  .ops-link:first-child { display: none; }
  .hero h1 { font-size: 4.35rem; }
  .filters { grid-template-columns: 1fr; }
  .reset-button { width: 100%; margin-left: 0; }
  .checkbox-line { width: 100%; }
  .section-bar h2 { font-size: 2.8rem; }
}

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

/* Motion system */
.hero-art {
  transform: scale(1.035) translate3d(-.35%, 0, 0);
  transform-origin: center;
  animation: hero-orbit-drift 18s ease-in-out infinite alternate;
  will-change: transform;
}

.hero::after {
  animation: hero-grid-drift 18s linear infinite alternate;
  will-change: background-position;
}

.axis {
  transition: opacity 130ms ease, transform 130ms ease;
}

.axis.is-axis-changing {
  opacity: 0;
  transform: translateY(-5px);
}

.lane {
  transition: opacity 190ms ease, translate 190ms ease, filter 190ms ease;
}

.map-shell.is-continuity-changing .lane.is-departing {
  opacity: 0;
  translate: -14px 0;
  filter: saturate(.4);
}

.map-shell.is-continuity-changing .lane.is-focus-target {
  translate: 5px 0;
  filter: brightness(1.08);
}

.production {
  will-change: auto;
}

.map-shell.is-reordering .production,
.map-shell.is-initializing .production,
.map-shell.is-path-activating .production.is-path,
.map-shell.is-targeting .production.is-selected {
  will-change: opacity, translate, scale, filter;
}

.production.is-context-muted {
  opacity: .27;
  filter: saturate(.45);
}

.production.is-selected,
.production.is-related {
  opacity: 1;
  filter: none;
}

.production:hover::before,
.production:focus-visible::before,
.production.is-selected::before {
  scale: 1.1;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--lane-color) 75%, transparent));
}

.production::before {
  transition: scale 160ms ease, filter 160ms ease;
}

.production.is-selected::after {
  inset: 3px;
  width: auto;
  height: auto;
  background:
    linear-gradient(var(--g-cyan), var(--g-cyan)) left top / 10px 2px no-repeat,
    linear-gradient(var(--g-cyan), var(--g-cyan)) left top / 2px 10px no-repeat,
    linear-gradient(var(--g-cyan), var(--g-cyan)) right top / 10px 2px no-repeat,
    linear-gradient(var(--g-cyan), var(--g-cyan)) right top / 2px 10px no-repeat,
    linear-gradient(var(--g-cyan), var(--g-cyan)) left bottom / 10px 2px no-repeat,
    linear-gradient(var(--g-cyan), var(--g-cyan)) left bottom / 2px 10px no-repeat,
    linear-gradient(var(--g-cyan), var(--g-cyan)) right bottom / 10px 2px no-repeat,
    linear-gradient(var(--g-cyan), var(--g-cyan)) right bottom / 2px 10px no-repeat;
  pointer-events: none;
}

.map-shell.is-targeting .production.is-selected {
  animation: target-acquired 360ms cubic-bezier(.2, .82, .2, 1) both;
}

.connector-layer path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.relationship-connector {
  opacity: 0;
  stroke: var(--connector-color);
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: connector-draw 560ms cubic-bezier(.2, .82, .2, 1) var(--connector-delay) forwards;
}

.relationship-connector.is-uncertain {
  stroke-dasharray: .075 .045;
}

.route-connector {
  opacity: 0;
  stroke: var(--connector-color);
  stroke-width: 2.6;
  stroke-linecap: square;
  stroke-dasharray: .13 .055;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(240, 197, 47, .45));
  animation: route-line-acquire 650ms ease var(--connector-delay) forwards;
}

.map-shell.is-awaiting-deploy .lane {
  opacity: 0;
  translate: 0 14px;
}

.map-shell.is-initializing .lane,
.map-shell.is-continuity-revealing .lane {
  animation: lane-deploy 430ms cubic-bezier(.2, .82, .2, 1) both;
  animation-delay: calc(var(--motion-index) * 42ms);
}

.map-shell.is-initializing .production {
  animation: production-deploy 360ms ease both;
  animation-delay: calc(120ms + var(--motion-index) * 18ms);
}

.map-shell.is-path-activating .production.is-path {
  animation: route-acquire 480ms cubic-bezier(.2, .82, .2, 1) both;
  animation-delay: calc(var(--path-index) * 95ms);
}

.map-shell.is-targeting .production.is-selected {
  animation: target-acquired 360ms cubic-bezier(.2, .82, .2, 1) both;
}

.path-button {
  overflow: hidden;
}

.path-button.is-active::after {
  position: absolute;
  inset: 0 auto 0 -24%;
  width: 18%;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-15deg);
  animation: route-panel-scan 680ms ease-out both;
}

.detail-content {
  transition: opacity 140ms ease, transform 140ms ease;
}

.detail-content.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

.detail-content.is-revealing .production-thumbnail {
  animation: drawer-cover-reveal 430ms cubic-bezier(.2, .82, .2, 1) both;
}

.detail-content.is-revealing .detail-heading {
  animation: drawer-content-reveal 390ms ease 55ms both;
}

.detail-content.is-revealing .detail-drawer-grid {
  animation: drawer-content-reveal 390ms ease 110ms both;
}

@keyframes hero-orbit-drift {
  from { transform: scale(1.035) translate3d(-.35%, 0, 0); }
  to { transform: scale(1.055) translate3d(.65%, -.45%, 0); }
}

@keyframes hero-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 18px 0, 0 -14px; }
}

@keyframes lane-deploy {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes production-deploy {
  from { opacity: 0; translate: -10px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes target-acquired {
  0% { scale: .96; filter: brightness(.9); }
  58% { scale: 1.045; filter: brightness(1.12); }
  100% { scale: 1; filter: brightness(1); }
}

@keyframes connector-draw {
  from { opacity: 0; stroke-dashoffset: 1; }
  to { opacity: .96; stroke-dashoffset: 0; }
}

@keyframes route-line-acquire {
  from { opacity: 0; stroke-dashoffset: 1; }
  to { opacity: .9; stroke-dashoffset: 0; }
}

@keyframes route-acquire {
  0% { opacity: .3; scale: .94; filter: brightness(.82); }
  60% { opacity: 1; scale: 1.045; filter: brightness(1.16); }
  100% { opacity: 1; scale: 1; filter: brightness(1); }
}

@keyframes route-panel-scan {
  from { left: -24%; }
  to { left: 112%; }
}

@keyframes drawer-cover-reveal {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes drawer-content-reveal {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 720px) {
  .hero-art { animation-duration: 24s; }
  .hero::after { animation: none; }
  .map-shell.is-initializing .production { animation-delay: calc(80ms + var(--motion-index) * 12ms); }
  .map-shell.is-continuity-changing .lane.is-focus-target { translate: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .hero::after,
  .map-shell.is-initializing .lane,
  .map-shell.is-initializing .production,
  .map-shell.is-continuity-revealing .lane,
  .map-shell.is-path-activating .production.is-path,
  .map-shell.is-targeting .production.is-selected,
  .path-button.is-active::after,
  .detail-content.is-revealing .production-thumbnail,
  .detail-content.is-revealing .detail-heading,
  .detail-content.is-revealing .detail-drawer-grid,
  .connector-layer path {
    animation: none !important;
  }

  .hero-art { transform: none; }
  .map-shell.is-awaiting-deploy .lane,
  .map-shell.is-continuity-changing .lane {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
  .relationship-connector,
  .route-connector {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  .detail-content { transition: none; }
}

/* Selected production bottom drawer */
.map-grid {
  grid-template-columns: minmax(0, 1fr);
}

.detail-panel {
  position: fixed;
  z-index: 80;
  inset: auto 0 0;
  width: 100%;
  min-height: 0;
  max-height: min(64svh, 680px);
  overflow: hidden;
  border: 0;
  border-top: 7px solid var(--g-red);
  padding: 0;
  color: var(--g-ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(8, 20, 33, .055) 29px 30px),
    var(--g-paper);
  box-shadow: 0 -18px 60px rgba(5, 10, 16, .58);
  clip-path: none;
  transform: translateY(calc(100% + 12px));
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.detail-panel::before {
  position: absolute;
  top: 0;
  left: max(24px, calc((100vw - 1320px) / 2));
  width: 132px;
  height: 6px;
  content: "";
  background: var(--g-yellow);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.detail-panel::after {
  display: none;
}

.detail-panel.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

.detail-content {
  width: min(1320px, 100%);
  max-height: calc(min(64svh, 680px) - 7px);
  margin-inline: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 88px max(28px, env(safe-area-inset-bottom)) 28px;
}

.detail-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: max(24px, calc((100vw - 1320px) / 2));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--g-ink);
  border-radius: 0;
  color: var(--g-white);
  background: var(--g-red);
  font-family: var(--g-interface);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.detail-close:hover,
.detail-close:focus-visible {
  color: var(--g-ink);
  background: var(--g-yellow);
}

.detail-heading {
  max-width: 1100px;
}

.detail-overview {
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.production-thumbnail {
  position: relative;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--g-ink);
  background: var(--g-ink);
  box-shadow: 6px 6px 0 rgba(8, 20, 33, .18);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

.production-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: #050a10;
}

.production-thumbnail figcaption {
  min-height: 52px;
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--g-line);
  padding: 7px 9px 8px;
  color: var(--g-white);
  background: var(--g-ink);
  font-family: var(--g-code);
  font-size: .53rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cover-note {
  color: var(--g-muted);
  text-transform: none;
}

.cover-source {
  width: fit-content;
  color: var(--g-yellow);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cover-source:hover,
.cover-source:focus-visible {
  color: var(--g-white);
}

.detail-panel .mini-label {
  margin-bottom: 12px;
}

.detail-panel h2 {
  max-width: 24ch;
  font-size: 3.25rem;
}

.detail-drawer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 48px;
  align-items: start;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(8, 20, 33, .3);
}

.detail-panel .detail-description {
  max-width: 72ch;
  margin: 0;
  font-size: 1rem;
}

.relationship-scan h3 {
  margin: 0;
  font-size: 1.8rem;
}

.relationship-scan > p {
  margin-top: 10px;
}

.detail-drawer-grid .relation-list {
  margin-top: 10px;
}

@media (max-width: 720px) {
  .detail-panel {
    max-height: 72svh;
  }

  .detail-content {
    max-height: calc(72svh - 7px);
    padding: 62px 18px max(22px, env(safe-area-inset-bottom));
  }

  .detail-close {
    top: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
  }

  .detail-panel::before {
    left: 16px;
    width: 92px;
  }

  .detail-panel h2 {
    font-size: 2.5rem;
  }

  .detail-overview {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .production-thumbnail {
    width: min(210px, 72vw);
    margin-inline: auto;
  }

  .detail-drawer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 18px;
    padding-top: 16px;
  }
}