:root {
  --coda-bg: #05030a;
  --coda-ink: #f3f1f6;
  --coda-muted: #aaa6b2;
  --coda-violet: #a06cff;
  --coda-blue: #67a8ff;
  --coda-crimson: #ef315f;
  --coda-ember: #ff7446;
  --coda-line: rgba(231, 224, 245, 0.18);
  --coda-glass: rgba(8, 7, 14, 0.78);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--coda-header-height, var(--forge-header-height));
  background: var(--coda-bg);
}

body.page-lore-lab {
  margin: 0;
  overflow-x: clip;
  background: var(--coda-bg);
  color: var(--coda-ink);
  cursor: default;
}

.page-lore-lab .site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
}

.page-lore-lab::-webkit-scrollbar { width: 0; height: 0; }
body.page-lore-lab { scrollbar-width: none; }

.coda-experience {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: #05030a;
}

.coda-stage {
  position: fixed;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  background: #05030a;
  pointer-events: none;
}

.coda-stage-image,
.coda-stage-image img,
.coda-canvas,
.coda-vignette,
.coda-scanlines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.coda-stage-image {
  opacity: 0.67;
  transition: opacity 900ms ease, filter 900ms ease, transform 1600ms cubic-bezier(.2,.7,.2,1);
  transform: scale(1.025);
}

.coda-stage-image img {
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.08) brightness(0.62);
}

.coda-experience[data-active-phase="forge-city"] .coda-stage-image,
.coda-experience[data-active-phase="glassmere-junction"] .coda-stage-image {
  opacity: 0.38;
  filter: hue-rotate(-8deg);
  transform: scale(1.06);
}

.coda-experience[data-active-phase="archive-hall"] .coda-stage-image {
  opacity: 0.48;
  filter: saturate(0.86);
  transform: scale(1.045);
}

.coda-canvas {
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 1000ms ease;
}

.coda-experience.is-three-ready .coda-canvas {
  opacity: 1;
}

.coda-vignette {
  z-index: 2;
  background:
    radial-gradient(circle at 65% 44%, transparent 0, rgba(5, 3, 10, 0.12) 40%, rgba(5, 3, 10, 0.68) 100%),
    linear-gradient(90deg, rgba(5, 3, 10, 0.88) 0%, rgba(5, 3, 10, 0.28) 42%, rgba(5, 3, 10, 0.52) 100%);
}

.coda-scanlines {
  z-index: 3;
  opacity: 0.11;
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,0.045) 4px);
  mix-blend-mode: soft-light;
}

.coda-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(205, 184, 255, 0.58);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) scale(var(--cursor-scale, 1));
  transition: width 180ms ease, height 180ms ease, border-color 180ms ease, opacity 250ms ease, transform 80ms linear;
  box-shadow: 0 0 28px rgba(133, 83, 255, 0.34), inset 0 0 18px rgba(255,255,255,0.07);
}

.coda-cursor::before,
.coda-cursor::after {
  content: "";
  position: absolute;
  background: rgba(240, 232, 255, 0.72);
}

.coda-cursor::before { width: 1px; height: 7px; left: 18px; top: 15px; }
.coda-cursor::after { width: 7px; height: 1px; left: 15px; top: 18px; }
.coda-cursor span { position: absolute; inset: 7px; border: 1px solid rgba(239,49,95,0.35); border-radius: 50%; }
.coda-experience.has-pointer .coda-cursor { opacity: 1; }
.coda-experience.is-cursor-active .coda-cursor { --cursor-scale: 1.55; border-color: var(--coda-crimson); }

.coda-hud {
  position: fixed;
  z-index: 50;
  top: 106px;
  left: 36px;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 11px 34px;
  align-items: end;
  min-width: 330px;
  color: var(--coda-muted);
  pointer-events: none;
}

.coda-hud-signal,
.coda-hud-location,
.coda-hud-route {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 8px;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
}

.coda-hud-signal i {
  grid-row: 1 / span 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coda-crimson);
  box-shadow: 0 0 14px var(--coda-crimson);
  animation: coda-pulse 1.8s ease-in-out infinite;
}

.coda-hud strong { color: var(--coda-ink); font-weight: 650; font-size: 12px; }
.coda-hud-location strong,
.coda-hud-route strong { display: block; grid-column: 1 / -1; }
.coda-hud-progress { grid-column: 1 / -1; width: 100%; height: 1px; background: var(--coda-line); overflow: hidden; }
.coda-hud-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--coda-violet), var(--coda-crimson)); transform: scaleX(0); transform-origin: left; }

.coda-wayfinder {
  position: fixed;
  z-index: 55;
  right: 28px;
  top: 50%;
  display: grid;
  gap: 6px;
  transform: translateY(-50%);
}

.coda-wayfinder button {
  position: relative;
  display: grid;
  grid-template-columns: 25px 10px;
  align-items: center;
  justify-content: end;
  width: 46px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,0.42);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color 180ms ease, width 250ms ease;
}

.coda-wayfinder button::after {
  content: "";
  width: 10px;
  height: 1px;
  background: currentColor;
  transition: width 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.coda-wayfinder button span { font-size: 9px; }
.coda-wayfinder button strong {
  position: absolute;
  right: 48px;
  width: max-content;
  opacity: 0;
  color: var(--coda-ink);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.coda-wayfinder button:hover strong,
.coda-wayfinder button:focus-visible strong { opacity: 1; transform: none; }
.coda-wayfinder button:hover,
.coda-wayfinder button:focus-visible,
.coda-wayfinder button.is-active { color: var(--coda-ink); outline: none; }
.coda-wayfinder button.is-active::after { width: 24px; background: var(--coda-violet); box-shadow: 0 0 14px var(--coda-violet); }

.coda-chapter {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 112svh;
  padding: 160px max(9vw, 120px) 110px;
  overflow: clip;
}

.coda-chapter--threshold { min-height: 100svh; }
.coda-chapter--threshold .coda-chapter-copy { padding-top: 110px; }
.coda-chapter--hall { min-height: 128svh; }
.coda-chapter--forge { min-height: 132svh; }
.coda-chapter--junction { min-height: 150svh; align-content: center; gap: 42px; }

.coda-chapter-copy {
  position: relative;
  z-index: 5;
  width: min(660px, 52vw);
  opacity: 0.28;
  transform: translateY(48px);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}

.coda-chapter.is-current .coda-chapter-copy,
.coda-chapter.is-past .coda-chapter-copy { opacity: 1; transform: none; }
.coda-chapter-copy--right { justify-self: end; width: min(610px, 48vw); }
.coda-chapter-copy--wide { width: min(880px, 72vw); }
.coda-chapter-copy--hero { width: min(780px, 60vw); }

.coda-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--coda-muted);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
}

.coda-kicker::before { content: ""; width: 34px; height: 1px; background: var(--coda-crimson); box-shadow: 0 0 10px rgba(239,49,95,0.6); }
.coda-kicker span { color: var(--coda-ink); }

.coda-chapter h1,
.coda-chapter h2 {
  margin: 0;
  max-width: 13ch;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 8px 34px rgba(0,0,0,0.5);
}

.coda-chapter h1 { font-size: 86px; }
.coda-chapter h1 span { display: block; color: #fff; font-style: italic; }
.coda-chapter h2 { font-size: 58px; }

.coda-hero-line {
  margin: 26px 0 0;
  max-width: 30ch;
  color: #ddd8e9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1.35;
}

.coda-intro,
.coda-lead {
  margin: 26px 0 0;
  max-width: 61ch;
  color: #c3becb;
  font-size: 16px;
  line-height: 1.75;
}

.coda-chapter blockquote {
  margin: 28px 0 0;
  padding-left: 22px;
  max-width: 31ch;
  border-left: 1px solid var(--coda-violet);
  color: #f3eefd;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.45;
}

.coda-enter {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1px 14px;
  align-items: center;
  margin-top: 38px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.coda-enter > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(210,192,255,0.42);
  border-radius: 50%;
  font-size: 19px;
  box-shadow: inset 0 0 22px rgba(111,71,190,0.18), 0 0 24px rgba(111,71,190,0.16);
}

.coda-enter strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0; }
.coda-enter small { color: var(--coda-muted); font-size: 11px; }
.coda-enter:hover > span,
.coda-enter:focus-visible > span { border-color: var(--coda-violet); box-shadow: 0 0 30px rgba(160,108,255,0.4); }
.coda-enter:focus-visible { outline: 2px solid var(--coda-violet); outline-offset: 8px; }

.coda-text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(218,204,255,0.38);
  border-radius: 0;
  color: #f4efff;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.coda-text-link span { color: var(--coda-violet); }
.coda-text-link:hover,
.coda-text-link:focus-visible { color: #fff; border-bottom-color: var(--coda-crimson); outline: none; }
.coda-inline-actions { display: flex; flex-wrap: wrap; gap: 6px 28px; }

.coda-threshold-note {
  display: grid;
  gap: 7px;
  max-width: 610px;
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 2px solid var(--coda-blue);
  background: linear-gradient(90deg, rgba(22, 30, 54, 0.62), rgba(8, 7, 14, 0.08));
}

.coda-threshold-note span {
  color: var(--coda-blue);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.coda-threshold-note p {
  margin: 0;
  color: #cbc6d2;
  font-size: 13px;
  line-height: 1.65;
}

.coda-vertical-caption {
  position: absolute;
  right: 80px;
  bottom: 76px;
  color: rgba(255,255,255,0.45);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0;
  writing-mode: vertical-rl;
}

.coda-city-readout {
  position: absolute;
  right: max(9vw, 120px);
  bottom: 14vh;
  display: flex;
  gap: 34px;
  padding-top: 15px;
  border-top: 1px solid var(--coda-line);
  color: var(--coda-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.coda-city-readout span { display: grid; gap: 5px; }
.coda-city-readout b { color: #fff; font-size: 22px; font-weight: 450; }

.coda-chapter-media {
  position: absolute;
  z-index: 1;
  inset: 8vh 0;
  display: block;
  overflow: hidden;
  opacity: 0.18;
  transform: scale(1.06);
  transition: opacity 900ms ease, transform 1500ms cubic-bezier(.2,.8,.2,1);
}

.coda-chapter-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,3,10,0.86), rgba(5,3,10,0.12) 52%, rgba(5,3,10,0.62));
}

.coda-chapter-copy--right + .coda-chapter-media::after { background: linear-gradient(90deg, rgba(5,3,10,0.58), rgba(5,3,10,0.12) 45%, rgba(5,3,10,0.88)); }
.coda-chapter.is-current .coda-chapter-media,
.coda-chapter.is-past .coda-chapter-media { opacity: 0.78; transform: scale(1); }
.coda-chapter-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(0, var(--coda-media-y, 0), 0) scale(1.05); }
.coda-chapter--coda .coda-chapter-media img { object-position: 54% center; }

.coda-hall-register {
  position: absolute;
  z-index: 7;
  right: max(8vw, 90px);
  bottom: 12vh;
  width: min(500px, 39vw);
  border-top: 1px solid rgba(214, 198, 244, 0.28);
  background: linear-gradient(135deg, rgba(9, 7, 15, 0.82), rgba(25, 14, 42, 0.34));
  backdrop-filter: blur(14px);
}

.coda-hall-door {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 20px;
  width: 100%;
  padding: 22px 24px;
  border: 0;
  border-bottom: 1px solid rgba(214, 198, 244, 0.22);
  border-radius: 0;
  color: #fff;
  background: rgba(106, 63, 171, 0.2);
  text-align: left;
  cursor: pointer;
}

.coda-hall-door span { color: var(--coda-violet); font-size: 9px; text-transform: uppercase; }
.coda-hall-door strong { grid-column: 1; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 400; }
.coda-hall-door small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #bcb5c7; font-size: 11px; }
.coda-hall-door:hover,
.coda-hall-door:focus-visible { background: rgba(128, 76, 201, 0.34); outline: 1px solid rgba(201, 173, 255, 0.7); outline-offset: -1px; }

.coda-hall-preserved {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coda-hall-preserved span {
  min-height: 42px;
  padding: 13px 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #8f8997;
  font-size: 10px;
  text-transform: uppercase;
}

.coda-district-mesh {
  position: absolute;
  z-index: 7;
  left: max(8vw, 90px);
  bottom: 10vh;
  width: min(660px, 48vw);
  border-top: 1px solid rgba(131, 168, 255, 0.32);
  background: rgba(5, 7, 13, 0.58);
  backdrop-filter: blur(12px);
}

.coda-district-mesh-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  color: var(--coda-blue);
  font-size: 9px;
  text-transform: uppercase;
}

.coda-district-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coda-district-names span {
  position: relative;
  min-height: 47px;
  padding: 14px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #96909d;
  font-size: 10px;
}
.coda-district-names .is-route { color: #fff; background: rgba(91, 71, 153, 0.28); }
.coda-district-names b { display: block; margin-top: 5px; color: var(--coda-violet); font-size: 8px; font-weight: 700; text-transform: uppercase; }

.coda-junction-heading {
  position: relative;
  z-index: 7;
  width: min(780px, 62vw);
}

.coda-junction-heading h2 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.02;
}

.coda-junction-heading > p:last-child { max-width: 62ch; color: #bdb7c5; line-height: 1.7; }

.coda-junction-console {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(470px, 1.28fr);
  gap: clamp(34px, 6vw, 92px);
  width: min(1200px, 82vw);
  align-items: stretch;
}

.coda-junction-routes { border-top: 1px solid var(--coda-line); }
.coda-junction-routes button {
  position: relative;
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 78px;
  padding: 15px 18px 15px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  color: #aaa4b1;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: padding 180ms ease, color 180ms ease, background 180ms ease;
}

.coda-junction-routes button::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: transparent; }
.coda-junction-routes button span { color: #817a88; font-size: 9px; text-transform: uppercase; }
.coda-junction-routes button strong { color: currentColor; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; }
.coda-junction-routes button small { color: #817b87; font-size: 10px; }
.coda-junction-routes button:hover,
.coda-junction-routes button:focus-visible,
.coda-junction-routes button.is-active { padding-left: 18px; color: #fff; background: linear-gradient(90deg, rgba(126, 73, 193, 0.24), transparent); outline: none; }
.coda-junction-routes button.is-active::after { background: var(--coda-violet); box-shadow: 0 0 16px var(--coda-violet); }

.coda-junction-detail {
  display: grid;
  grid-template-rows: minmax(210px, 0.9fr) auto;
  min-height: 570px;
  border-left: 1px solid rgba(210, 192, 238, 0.2);
  background: linear-gradient(145deg, rgba(15, 11, 24, 0.72), rgba(6, 5, 10, 0.4));
  backdrop-filter: blur(12px);
}

.coda-junction-detail.is-changing { animation: coda-record-shift 360ms ease; }
.coda-junction-visual { position: relative; overflow: hidden; background: rgba(4, 3, 8, 0.72); }
.coda-junction-visual:empty::before { content: "ROUTE HISTORY"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.18); font-size: 11px; }
.coda-junction-visual picture,
.coda-junction-visual img { display: block; width: 100%; height: 100%; }
.coda-junction-visual img { object-fit: cover; }
.coda-junction-visual::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(transparent, rgba(12, 9, 19, 0.96)); }
.coda-junction-copy { padding: 28px 34px 34px; }
.coda-route-code { margin: 0; color: var(--coda-crimson); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.coda-junction-copy h3 { margin: 15px 0 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 39px; font-weight: 400; }
.coda-junction-copy > p:not(.coda-route-code) { max-width: 62ch; color: #bdb7c5; font-size: 14px; line-height: 1.65; }
.coda-route-note { padding-left: 14px; border-left: 1px solid rgba(103, 168, 255, 0.55); color: #9892a0 !important; }
.coda-junction-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.coda-route-history {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7f7985;
  font-size: 9px;
  text-transform: uppercase;
}
.coda-route-history i { width: 28px; height: 1px; background: rgba(255, 255, 255, 0.16); }
.coda-route-history strong { color: #ddd5e9; font-weight: 650; }

.coda-platform-board {
  position: absolute;
  z-index: 6;
  left: max(9vw, 120px);
  bottom: 12vh;
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 28px;
  min-width: 300px;
  padding: 16px 18px;
  border: 1px solid rgba(131,168,255,0.25);
  border-radius: 4px;
  background: rgba(4,8,18,0.72);
  box-shadow: 0 0 34px rgba(42,93,173,0.16);
  backdrop-filter: blur(10px);
}

.coda-platform-board span { color: var(--coda-blue); font-size: 11px; }
.coda-platform-board strong { color: #fff; font-size: 12px; text-align: right; }
.coda-platform-board em { grid-column: 1 / -1; color: var(--coda-muted); font-size: 10px; font-style: normal; }

.coda-handwritten {
  position: absolute;
  right: 10vw;
  bottom: 10vh;
  z-index: 6;
  color: rgba(255,255,255,0.72);
  font-family: "Segoe Script", cursive;
  font-size: 22px;
  transform: rotate(-3deg);
}

.coda-closing-call {
  position: absolute;
  left: 9vw;
  bottom: 10vh;
  z-index: 6;
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0;
}

.coda-route-console {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(420px, 1.25fr);
  gap: 7vw;
  width: min(1180px, 82vw);
  align-items: start;
}

.coda-route-list { display: grid; border-top: 1px solid var(--coda-line); }
.coda-route-list button {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 50px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  color: #c8c2d0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, padding-left 180ms ease, border-color 180ms ease;
}

.coda-route-list button span { color: #77717e; font-size: 10px; }
.coda-route-list button strong { font-size: 13px; font-weight: 580; }
.coda-route-list button::after { content: "→"; color: var(--coda-violet); opacity: 0; }
.coda-route-list button:hover,
.coda-route-list button:focus-visible,
.coda-route-list button.is-active { padding-left: 10px; color: #fff; border-bottom-color: rgba(160,108,255,0.55); outline: none; }
.coda-route-list button:hover::after,
.coda-route-list button:focus-visible::after,
.coda-route-list button.is-active::after { opacity: 1; }

.coda-route-record {
  min-height: 420px;
  padding: 28px 0 0 34px;
  border-left: 1px solid var(--coda-line);
}

.coda-route-record.is-changing { animation: coda-record-shift 360ms ease; }
.coda-route-record .coda-route-code { color: var(--coda-crimson); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.coda-route-record h3 { margin: 22px 0 0; max-width: 15ch; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 42px; font-weight: 400; line-height: 1.05; }
.coda-route-record > p:not(.coda-route-code) { max-width: 58ch; color: var(--coda-muted); font-size: 15px; line-height: 1.7; }
.coda-route-identity { margin-top: 12px; color: #dad4df !important; }
.coda-route-open { margin-top: 16px; }

.coda-portal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 620px;
  margin-top: 34px;
  border-top: 1px solid var(--coda-line);
}

.coda-portal-grid button {
  display: grid;
  gap: 6px;
  min-height: 90px;
  padding: 19px 20px;
  border: 0;
  border-right: 1px solid var(--coda-line);
  border-bottom: 1px solid var(--coda-line);
  border-radius: 0;
  color: #fff;
  background: rgba(10,8,17,0.35);
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.coda-portal-grid button:nth-child(2n) { border-right: 0; }
.coda-portal-grid button span { color: var(--coda-muted); font-size: 9px; text-transform: uppercase; }
.coda-portal-grid button strong { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; }
.coda-portal-grid button:hover,
.coda-portal-grid button:focus-visible { background: rgba(96,54,145,0.34); box-shadow: inset 0 0 28px rgba(144,82,223,0.16); outline: 1px solid rgba(185,144,255,0.48); outline-offset: -1px; }

.coda-final-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.coda-primary-link,
.coda-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(211,196,240,0.3);
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.coda-primary-link { border-color: rgba(160,108,255,0.72); background: rgba(107,63,172,0.3); box-shadow: inset 0 0 28px rgba(140,87,220,0.16); }
.coda-primary-link:hover,
.coda-primary-link:focus-visible { border-color: #d5c1ff; box-shadow: 0 0 30px rgba(160,108,255,0.28); outline: none; }
.coda-secondary-link:hover,
.coda-secondary-link:focus-visible { border-color: var(--coda-crimson); background: rgba(117,21,47,0.18); outline: none; }

.coda-endmark {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  gap: 16px;
  min-height: 62vh;
  padding: 90px 30px;
  background: rgba(5,3,10,0.78);
  text-align: center;
}

.coda-endmark span { color: var(--coda-muted); font-size: 9px; text-transform: uppercase; }
.coda-endmark strong { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 42px; font-weight: 400; }
.coda-endmark div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.coda-endmark button { padding: 11px 14px; border: 0; border-bottom: 1px solid rgba(205,185,239,0.45); border-radius: 0; color: #cdb9ef; background: transparent; font: inherit; font-size: 11px; text-transform: uppercase; cursor: pointer; }
.coda-endmark button:hover,
.coda-endmark button:focus-visible { color: #fff; border-bottom-color: var(--coda-crimson); outline: none; }

body.coda-reader-open { overflow: hidden; }

.coda-reader[hidden] { display: none; }
.coda-reader {
  position: fixed;
  inset: 88px 0 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr minmax(500px, 48vw);
}

.coda-reader-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(3,2,7,0.72);
  backdrop-filter: blur(14px);
  cursor: zoom-out;
}

.coda-reader-panel {
  position: relative;
  grid-column: 2;
  height: 100%;
  overflow: auto;
  border-left: 1px solid rgba(215,199,238,0.22);
  background: rgba(9,7,14,0.96);
  box-shadow: -32px 0 90px rgba(0,0,0,0.52);
  animation: coda-reader-in 480ms cubic-bezier(.2,.8,.2,1) both;
}

.coda-reader-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(9,7,14,0.9);
  backdrop-filter: blur(16px);
}

.coda-reader-header div { display: grid; gap: 4px; }
.coda-reader-header div span { color: var(--coda-muted); font-size: 9px; text-transform: uppercase; }
.coda-reader-header div strong { color: var(--coda-crimson); font-size: 10px; }
.coda-reader-header > button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--coda-line); border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }
.coda-reader-header > button span { font-size: 24px; font-weight: 300; line-height: 1; }
.coda-reader-header > button:hover,
.coda-reader-header > button:focus-visible { border-color: var(--coda-violet); background: rgba(160,108,255,0.12); outline: none; }

.coda-reader-media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: #040307; }
.coda-reader-media:empty { display: none; }
.coda-reader-media picture,
.coda-reader-media img { display: block; width: 100%; height: 100%; }
.coda-reader-media img { object-fit: cover; }
.coda-reader-media::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(transparent, rgba(9,7,14,0.96)); }
.coda-reader-copy { padding: 42px 9% 100px; }
.coda-reader-copy h2 { margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 48px; font-weight: 400; line-height: 1.05; }
.coda-reader-teaser { margin: 24px 0 0; color: #d7d1de; font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.5; }
.coda-reader-body { margin-top: 34px; color: #bdb7c5; font-size: 15px; line-height: 1.85; }
.coda-reader-body p { margin: 0 0 1.4em; }

.coda-loading,
.coda-noscript {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 34px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--coda-line);
  background: rgba(5,3,10,0.82);
  color: var(--coda-muted);
  font-size: 10px;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity 300ms ease;
}

.coda-experience.is-ready .coda-loading { opacity: 0; pointer-events: none; }
.coda-noscript { color: #fff; }
.coda-experience.is-reader-open { overflow: hidden; }

@keyframes coda-pulse { 0%, 100% { opacity: 0.45; transform: scale(0.84); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes coda-reader-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes coda-record-shift { 0% { opacity: 0.38; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }

@media (max-width: 1120px) {
  .coda-chapter { padding-left: 72px; padding-right: 72px; }
  .coda-city-readout { right: 72px; }
  .coda-chapter h1 { font-size: 72px; }
  .coda-chapter h2 { font-size: 50px; }
  .coda-wayfinder { right: 16px; }
  .coda-hud { left: 22px; }
  .coda-route-console { width: calc(100vw - 144px); }
}

@media (max-width: 760px) {
  body.page-lore-lab { cursor: auto; }
  .coda-cursor { display: none; }
  .coda-experience.is-three-ready .coda-canvas { opacity: 0.4; }
  .coda-stage-image img { object-position: center; filter: saturate(0.92) contrast(1.06) brightness(0.52); }
  .coda-vignette { background: linear-gradient(180deg, rgba(5,3,10,0.35), rgba(5,3,10,0.18) 35%, rgba(5,3,10,0.82) 100%); }
  .coda-hud { top: auto; right: 16px; bottom: 18px; left: 16px; grid-template-columns: 1fr auto; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; background: rgba(5,3,10,0.76); backdrop-filter: blur(12px); }
  .coda-hud-route { display: none; }
  .coda-hud-progress { position: absolute; right: 0; bottom: 0; left: 0; }
  .coda-hud-location { text-align: right; }
  .coda-wayfinder { top: auto; right: 16px; bottom: 80px; left: 16px; display: flex; justify-content: center; gap: 2px; transform: none; }
  .coda-wayfinder button { grid-template-columns: 18px 8px; width: 30px; min-height: 30px; }
  .coda-wayfinder button strong { display: none; }
  .coda-wayfinder button.is-active::after { width: 16px; }
  .coda-chapter { min-height: 108svh; padding: 130px 24px 140px; align-items: center; }
  .coda-chapter--threshold { min-height: 100svh; padding-bottom: 120px; }
  .coda-chapter--threshold .coda-chapter-copy { padding-top: 0; }
  .coda-chapter--hall { min-height: 148svh; align-content: center; gap: 34px; }
  .coda-chapter--forge { min-height: 150svh; align-content: center; gap: 32px; }
  .coda-chapter--junction { min-height: auto; padding-top: 160px; gap: 28px; }
  .coda-chapter-copy,
  .coda-chapter-copy--right,
  .coda-chapter-copy--wide,
  .coda-chapter-copy--hero { width: 100%; max-width: 620px; justify-self: start; }
  .coda-chapter h1 { font-size: 54px; }
  .coda-chapter h2 { font-size: 38px; max-width: 14ch; }
  .coda-hero-line { font-size: 20px; }
  .coda-intro,
  .coda-lead { font-size: 14px; line-height: 1.7; }
  .coda-chapter blockquote { font-size: 19px; }
  .coda-kicker { font-size: 9px; }
  .coda-vertical-caption { display: none; }
  .coda-city-readout { position: relative; right: auto; bottom: auto; align-self: end; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 40px; font-size: 8px; }
  .coda-city-readout b { font-size: 18px; }
  .coda-chapter-media { inset: 7vh 0; opacity: 0.3; }
  .coda-chapter-media::after,
  .coda-chapter-copy--right + .coda-chapter-media::after { background: linear-gradient(180deg, rgba(5,3,10,0.34), rgba(5,3,10,0.28) 42%, rgba(5,3,10,0.91) 88%); }
  .coda-chapter.is-current .coda-chapter-media,
  .coda-chapter.is-past .coda-chapter-media { opacity: 0.7; }
  .coda-chapter--coda .coda-chapter-media img { object-position: 56% center; }
  .coda-platform-board { left: 24px; right: 24px; bottom: 11vh; min-width: 0; }
  .coda-handwritten { right: 26px; bottom: 10vh; font-size: 17px; }
  .coda-closing-call { left: 24px; bottom: 10vh; }
  .coda-route-console { grid-template-columns: 1fr; gap: 24px; width: 100%; }
  .coda-route-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-left: 1px solid var(--coda-line); }
  .coda-route-list button { grid-template-columns: 1fr; gap: 3px; min-height: 64px; padding: 9px; border-right: 1px solid var(--coda-line); text-align: center; }
  .coda-route-list button::after { display: none; }
  .coda-route-list button:hover,
  .coda-route-list button:focus-visible,
  .coda-route-list button.is-active { padding-left: 9px; background: rgba(160,108,255,0.14); }
  .coda-route-list button strong { overflow-wrap: anywhere; font-size: 10px; }
  .coda-route-record { min-height: 330px; padding: 24px 0 0; border-top: 1px solid var(--coda-line); border-left: 0; }
  .coda-route-record h3 { font-size: 34px; }
  .coda-portal-grid { grid-template-columns: 1fr; }
  .coda-portal-grid button,
  .coda-portal-grid button:nth-child(2n) { border-right: 0; }
  .coda-final-actions { display: grid; }
  .coda-primary-link,
  .coda-secondary-link { width: 100%; }
  .coda-endmark { min-height: 72vh; padding-bottom: 150px; }
  .coda-endmark strong { font-size: 34px; }
  .coda-reader { grid-template-columns: 1fr; }
  .coda-reader { inset: 72px 0 0; }
  .coda-reader-panel { grid-column: 1; border-left: 0; }
  .coda-reader-media { aspect-ratio: 4 / 3; }
  .coda-reader-copy { padding: 34px 24px 100px; }
  .coda-reader-copy h2 { font-size: 38px; }
  .coda-reader-teaser { font-size: 18px; }
  .coda-inline-actions { display: grid; justify-items: start; }
  .coda-threshold-note { margin-top: 22px; padding: 15px 16px; }
  .coda-hall-register,
  .coda-district-mesh { position: relative; right: auto; bottom: auto; left: auto; width: 100%; margin-top: 32px; }
  .coda-hall-door { grid-template-columns: 1fr; padding: 18px; }
  .coda-hall-door small { grid-column: 1; grid-row: auto; }
  .coda-hall-preserved { grid-template-columns: 1fr 1fr; }
  .coda-hall-preserved span { padding: 11px 10px; font-size: 8px; }
  .coda-district-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coda-district-names span { min-height: 44px; padding: 12px 10px; font-size: 9px; }
  .coda-junction-heading { width: 100%; }
  .coda-junction-heading h2 { font-size: 39px; }
  .coda-junction-console { grid-template-columns: 1fr; gap: 24px; width: 100%; }
  .coda-junction-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--coda-line); }
  .coda-junction-routes button { min-height: 92px; padding: 12px; border-right: 1px solid var(--coda-line); }
  .coda-junction-routes button:hover,
  .coda-junction-routes button:focus-visible,
  .coda-junction-routes button.is-active { padding-left: 12px; }
  .coda-junction-routes button strong { font-size: 17px; }
  .coda-junction-detail { grid-template-rows: 190px auto; min-height: 0; border-top: 1px solid var(--coda-line); border-left: 0; }
  .coda-junction-copy { padding: 24px 20px 28px; }
  .coda-junction-copy h3 { font-size: 32px; }
  .coda-junction-actions { display: grid; }
  .coda-route-history { flex-wrap: wrap; padding-bottom: 120px; }
  .coda-route-history i { width: 13px; }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .coda-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .coda-stage-image,
  .coda-chapter-copy,
  .coda-chapter-media,
  .coda-reader-panel { transition: none; animation: none; }
  .coda-hud-signal i { animation: none; }
}

/* Spatial navigation correction: world hotspots, route memory, civic terminal. */
.coda-route-hud {
  position: fixed;
  z-index: 68;
  top: 104px;
  right: 24px;
  width: 278px;
  color: var(--coda-ink);
}

.coda-route-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(225, 217, 237, 0.2);
  border-radius: 3px;
  color: #e8e4ed;
  background: rgba(6, 5, 10, 0.82);
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.coda-route-toggle i { width: 7px; height: 7px; border-radius: 50%; background: var(--coda-violet); box-shadow: 0 0 12px var(--coda-violet); }
.coda-route-panel {
  overflow: hidden;
  border: 1px solid rgba(224, 216, 236, 0.16);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(7, 6, 10, 0.86), rgba(13, 11, 17, 0.72));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(115%);
  transition: opacity 220ms ease, transform 220ms ease;
}

.coda-route-panel-head,
.coda-route-current,
.coda-route-metrics { display: flex; align-items: center; justify-content: space-between; }
.coda-route-panel-head { min-height: 42px; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,0.08); color: #aaa4af; font-size: 9px; text-transform: uppercase; }
.coda-route-panel-head button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; color: #b9b3bf; background: transparent; font-size: 18px; cursor: pointer; }
.coda-route-current { align-items: end; padding: 15px 13px 10px; }
.coda-route-current span { color: #7e7884; font-size: 8px; text-transform: uppercase; }
.coda-route-current strong { max-width: 16ch; font-size: 11px; text-align: right; text-transform: uppercase; }
.coda-route-metrics { padding: 0 13px 12px; color: #77717d; font-size: 8px; text-transform: uppercase; }
.coda-route-metrics b { color: #d8d3df; font-weight: 650; }
.coda-route-progress { height: 1px; background: rgba(255,255,255,0.08); }
.coda-route-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--coda-violet), var(--coda-crimson)); transform: scaleX(0); transform-origin: left; }
.coda-route-history-nav { display: grid; padding: 7px; }
.coda-route-history-nav button {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 2px;
  color: #d4ced9;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.coda-route-history-nav button span { color: var(--coda-violet); font-size: 8px; }
.coda-route-history-nav button strong { font-size: 9px; font-weight: 550; text-transform: uppercase; }
.coda-route-history-nav button:hover:not(:disabled),
.coda-route-history-nav button:focus-visible:not(:disabled) { background: rgba(132, 94, 185, 0.14); outline: 1px solid rgba(172, 137, 222, 0.25); }
.coda-route-history-nav button:disabled { color: #5d5862; cursor: default; }
.coda-route-history-nav button.is-current { color: #fff; background: rgba(255,255,255,0.035); }
.coda-route-hud.is-collapsed .coda-route-panel { opacity: 0; pointer-events: none; transform: translateY(-8px) scale(0.98); }
.coda-route-hud.is-collapsed .coda-route-toggle { display: flex; }

.coda-world-hotspot {
  position: absolute;
  z-index: 12;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 180px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.coda-world-hotspot--hall { top: 52%; left: 51%; }
.coda-world-hotspot--forge { top: 68%; left: 47%; }
.coda-world-hotspot--junction { top: 72%; left: 72%; }
.coda-hotspot-reticle {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(218, 204, 239, 0.46);
  border-radius: 50%;
  background: rgba(6, 5, 10, 0.25);
  box-shadow: 0 0 0 8px rgba(7,5,11,0.12), inset 0 0 24px rgba(125, 80, 177, 0.2), 0 0 28px rgba(119, 78, 172, 0.2);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.coda-hotspot-reticle::before,
.coda-hotspot-reticle::after { content: ""; position: absolute; background: rgba(239, 232, 246, 0.82); }
.coda-hotspot-reticle::before { width: 1px; height: 13px; }
.coda-hotspot-reticle::after { width: 13px; height: 1px; }
.coda-hotspot-reticle i { width: 7px; height: 7px; border: 1px solid var(--coda-crimson); border-radius: 50%; box-shadow: 0 0 12px rgba(239,49,95,0.8); }
.coda-world-hotspot strong,
.coda-world-hotspot small { opacity: 0; transform: translateY(5px); transition: opacity 180ms ease, transform 180ms ease; }
.coda-world-hotspot strong { margin-top: 5px; font-size: 10px; text-transform: uppercase; }
.coda-world-hotspot small { color: #b8b2bf; font-size: 9px; }
.coda-world-hotspot:hover .coda-hotspot-reticle,
.coda-world-hotspot:focus-visible .coda-hotspot-reticle { border-color: #eee8f6; box-shadow: 0 0 0 10px rgba(7,5,11,0.22), inset 0 0 26px rgba(157, 104, 223, 0.34), 0 0 42px rgba(157, 104, 223, 0.44); transform: scale(1.08); }
.coda-world-hotspot:hover strong,
.coda-world-hotspot:hover small,
.coda-world-hotspot:focus-visible strong,
.coda-world-hotspot:focus-visible small { opacity: 1; transform: none; }
.coda-world-hotspot:focus-visible { outline: none; }

.coda-data-terminal {
  position: absolute;
  z-index: 11;
  display: grid;
  gap: 4px;
  min-width: 166px;
  padding: 13px 15px;
  border: 1px solid rgba(131, 168, 255, 0.25);
  border-radius: 2px;
  color: #e5e1e9;
  background: rgba(5, 7, 12, 0.72);
  font: inherit;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.coda-data-terminal--hall { left: max(6vw, 70px); bottom: 12vh; }
.coda-data-terminal--forge { right: max(7vw, 80px); bottom: 10vh; }
.coda-data-terminal span { color: var(--coda-blue); font-size: 8px; text-transform: uppercase; }
.coda-data-terminal strong { font-size: 10px; font-weight: 600; text-transform: uppercase; }
.coda-data-terminal:hover,
.coda-data-terminal:focus-visible { border-color: rgba(161, 194, 255, 0.7); background: rgba(12, 17, 27, 0.84); outline: none; box-shadow: 0 0 28px rgba(76, 124, 195, 0.18); }

.coda-route-constellation { position: absolute; z-index: 7; inset: 20% 9% 13%; pointer-events: none; }
.coda-route-constellation::before { content: ""; position: absolute; inset: 20% 14% 8%; background: radial-gradient(ellipse at center, transparent 0 20%, rgba(148, 102, 204, 0.1) 21% 22%, transparent 23%), linear-gradient(125deg, transparent 48%, rgba(144, 104, 191, 0.22) 49%, rgba(144, 104, 191, 0.22) 49.4%, transparent 50%); opacity: 0.8; }
.coda-route-signal { position: absolute; display: grid; gap: 4px; color: #ddd7e4; text-shadow: 0 2px 18px #000; }
.coda-route-signal i { width: 8px; height: 8px; border: 1px solid #d9c9ee; border-radius: 50%; background: rgba(139, 91, 191, 0.45); box-shadow: 0 0 18px rgba(172, 112, 235, 0.85); }
.coda-route-signal strong { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; }
.coda-route-signal small { color: #a7a0ad; font-size: 8px; text-transform: uppercase; }
.coda-route-signal--left { top: 42%; left: 7%; }
.coda-route-signal--forward { top: 18%; left: 48%; }
.coda-route-signal--right { top: 45%; right: 5%; text-align: right; justify-items: end; }
.coda-route-signal--down { right: 35%; bottom: 8%; }

.coda-terminal-stage { position: relative; z-index: 3; min-height: 112svh; overflow: hidden; background: #050408; }
.coda-terminal-stage-media,
.coda-terminal-stage-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.coda-terminal-stage-media img { object-fit: cover; object-position: center; }
.coda-terminal-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 55% 52%, transparent 0 17%, rgba(4,3,7,0.18) 42%, rgba(4,3,7,0.82) 100%), linear-gradient(180deg, rgba(4,3,7,0.2), rgba(4,3,7,0.12) 48%, rgba(4,3,7,0.84)); pointer-events: none; }
.coda-terminal-stage-copy { position: absolute; z-index: 3; left: max(7vw, 86px); bottom: 11vh; display: grid; gap: 7px; max-width: 360px; }
.coda-terminal-stage-copy span { color: #a2a0a7; font-size: 9px; text-transform: uppercase; }
.coda-terminal-stage-copy strong { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; }
.coda-terminal-stage-copy small { color: #aaa5ad; font-size: 11px; }
.coda-world-hotspot--terminal { top: 51%; left: 56%; }

.coda-terminal[hidden] { display: none; }
.coda-terminal { position: fixed; inset: 88px 0 0; z-index: 130; display: grid; place-items: center; padding: 28px; }
.coda-terminal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: radial-gradient(circle at 50% 45%, rgba(17,15,20,0.4), rgba(2,2,3,0.9)); backdrop-filter: blur(16px); cursor: zoom-out; }
.coda-terminal-shell { position: relative; width: min(1120px, calc(100vw - 80px)); max-height: calc(100vh - 144px); overflow: auto; border: 1px solid rgba(216, 210, 222, 0.18); border-radius: 4px; background: linear-gradient(145deg, rgba(10,10,12,0.97), rgba(22,21,24,0.94)); box-shadow: 0 42px 130px rgba(0,0,0,0.68); }
.coda-terminal-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(10,10,12,0.9); backdrop-filter: blur(14px); }
.coda-terminal-header div { display: grid; gap: 3px; }
.coda-terminal-header span { color: #8d8990; font-size: 8px; text-transform: uppercase; }
.coda-terminal-header strong { color: #d1c9d8; font-size: 10px; }
.coda-terminal-header > button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }
.coda-terminal-boot { min-height: 520px; place-content: center; justify-items: center; gap: 18px; color: #c7c2ca; text-align: center; }
.coda-terminal-boot:not([hidden]) { display: grid; }
.coda-terminal-boot span { color: #88838c; font-size: 9px; text-transform: uppercase; }
.coda-terminal-boot i { width: 66px; height: 66px; border: 1px solid rgba(182, 145, 221, 0.36); border-top-color: var(--coda-violet); border-radius: 50%; animation: coda-terminal-spin 850ms linear infinite; }
.coda-terminal-boot strong { font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; }
.coda-terminal-interface[hidden] { display: none; }
.coda-terminal-interface { padding: 34px 38px 24px; }
.coda-terminal-title p { margin: 0 0 8px; color: #8d8891; font-size: 9px; text-transform: uppercase; }
.coda-terminal-title h2 { margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 43px; font-weight: 400; }
.coda-terminal-layout { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(390px, 1.2fr); gap: 5vw; margin-top: 30px; }
.coda-terminal-routes { border-top: 1px solid rgba(255,255,255,0.1); }
.coda-terminal-routes button { display: grid; gap: 5px; width: 100%; min-height: 62px; padding: 12px 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 0; color: #aaa6ad; background: transparent; text-align: left; cursor: pointer; }
.coda-terminal-routes button span { color: #77737a; font-size: 8px; text-transform: uppercase; }
.coda-terminal-routes button strong { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; }
.coda-terminal-routes button:hover,
.coda-terminal-routes button:focus-visible,
.coda-terminal-routes button.is-active { color: #fff; background: linear-gradient(90deg, rgba(108, 78, 138, 0.2), transparent); outline: none; box-shadow: inset 2px 0 var(--coda-violet); }
.coda-terminal-route { min-height: 350px; padding: 28px 32px; border-left: 1px solid rgba(255,255,255,0.12); background: radial-gradient(circle at 100% 0, rgba(119,85,149,0.12), transparent 46%); }
.coda-terminal-route.is-changing { animation: coda-record-shift 300ms ease; }
.coda-terminal-route h3 { margin: 18px 0 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 37px; font-weight: 400; }
.coda-terminal-route > p:not(.coda-route-code) { color: #aaa5ae; font-size: 14px; line-height: 1.7; }
.coda-terminal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.coda-terminal-settings { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.coda-terminal-settings > span { color: #827d86; font-size: 8px; text-transform: uppercase; }
.coda-terminal-settings div { display: flex; }
.coda-terminal-settings button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.12); color: #8f8a93; background: transparent; font: inherit; font-size: 9px; text-transform: uppercase; cursor: pointer; }
.coda-terminal-settings button + button { border-left: 0; }
.coda-terminal-settings button.is-active { color: #fff; border-color: rgba(168, 128, 211, 0.58); background: rgba(123, 84, 162, 0.18); }
body.coda-terminal-open { overflow: hidden; }
body.coda-terminal-open .site-header { z-index: 130; }
body.coda-reader-open .site-header,
body.coda-traveling .site-header { z-index: 130; }

/* Desktop record reading is centered and treated as an intentional interruption. */
.coda-reader { grid-template-columns: 1fr; place-items: center; padding: 28px; }
.coda-reader-panel { grid-column: auto; width: min(1040px, calc(100vw - 96px)); height: auto; max-height: calc(100vh - 144px); border: 1px solid rgba(214, 207, 221, 0.18); border-radius: 4px; background: radial-gradient(circle at 50% 0, rgba(33,29,38,0.42), transparent 38%), rgba(8,8,10,0.97); box-shadow: 0 42px 130px rgba(0,0,0,0.72); }
.coda-reader-media { aspect-ratio: 16 / 7; }
.coda-reader-copy { width: min(760px, 82%); margin: 0 auto; padding: 42px 0 90px; }

@keyframes coda-terminal-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .coda-route-hud { top: 82px; right: 12px; width: calc(100vw - 24px); }
  .coda-route-toggle { display: flex; }
  .coda-route-hud:not(.is-collapsed) .coda-route-toggle { display: none; }
  .coda-route-panel { max-height: calc(100vh - 104px); overflow: auto; background: rgba(7,6,10,0.94); }
  .coda-route-hud.is-collapsed { width: auto; }
  .coda-world-hotspot { width: 140px; }
  .coda-world-hotspot--hall { top: 52%; left: 55%; }
  .coda-world-hotspot--forge { top: 65%; left: 50%; }
  .coda-world-hotspot--junction { top: 70%; left: 63%; }
  .coda-hotspot-reticle { width: 52px; height: 52px; }
  .coda-world-hotspot strong,
  .coda-world-hotspot small { opacity: 1; transform: none; text-shadow: 0 2px 14px #000; }
  .coda-data-terminal { min-width: 145px; padding: 11px 12px; }
  .coda-data-terminal--hall,
  .coda-data-terminal--forge { right: auto; bottom: 12vh; left: 24px; }
  .coda-route-constellation { inset: 22% 20px 15%; }
  .coda-route-signal strong { font-size: 14px; }
  .coda-route-signal--left { left: 2%; }
  .coda-route-signal--forward { top: 23%; left: 43%; }
  .coda-route-signal--right { right: 1%; }
  .coda-route-signal--down { right: 27%; bottom: 5%; }
  .coda-terminal-stage { min-height: 110svh; }
  .coda-terminal-stage-media img { object-position: center; }
  .coda-terminal-stage-copy { right: 24px; bottom: 16vh; left: 24px; }
  .coda-terminal-stage-copy strong { font-size: 29px; }
  .coda-world-hotspot--terminal { top: 48%; left: 53%; }
  .coda-terminal { inset: 72px 0 0; padding: 0; align-items: stretch; }
  .coda-terminal-shell { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; }
  .coda-terminal-interface { padding: 26px 20px 38px; }
  .coda-terminal-title h2 { font-size: 36px; }
  .coda-terminal-layout { grid-template-columns: 1fr; gap: 24px; }
  .coda-terminal-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid rgba(255,255,255,0.08); }
  .coda-terminal-routes button { min-height: 74px; border-right: 1px solid rgba(255,255,255,0.08); }
  .coda-terminal-routes button strong { font-size: 15px; }
  .coda-terminal-route { min-height: 0; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,0.1); border-left: 0; }
  .coda-terminal-route h3 { font-size: 31px; }
  .coda-terminal-actions { display: grid; }
  .coda-terminal-settings { align-items: flex-start; }
  .coda-reader { inset: 72px 0 0; padding: 0; align-items: stretch; }
  .coda-reader-panel { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; }
  .coda-reader-copy { width: auto; margin: 0; padding: 34px 24px 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .coda-terminal-boot i { animation: none; }
  .coda-route-panel,
  .coda-hotspot-reticle { transition: none; }
}

/* Coda Vale spatial route: the world is the forward interface. */
.coda-hud {
  top: 106px;
  right: 36px;
  left: auto;
  grid-template-columns: auto auto auto 34px;
  gap: 11px 28px;
  min-width: 390px;
  pointer-events: none;
}

.coda-hud::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -28px -20px;
  background:
    radial-gradient(ellipse at 68% 48%, rgba(4, 4, 8, 0.88) 0 34%, rgba(4, 4, 8, 0.58) 52%, transparent 76%),
    linear-gradient(90deg, transparent, rgba(5, 4, 8, 0.38) 34%, rgba(5, 4, 8, 0.62));
  filter: blur(5px);
  pointer-events: none;
}

.coda-hud-history-toggle {
  align-self: center;
  display: grid;
  grid-template-columns: auto 8px;
  gap: 7px;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  color: rgba(239, 235, 243, 0.62);
  background: transparent;
  font: inherit;
  font-size: 9px;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
}

.coda-hud-history-toggle i {
  width: 8px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(160, 108, 255, 0.65);
}

.coda-hud-history-toggle:hover,
.coda-hud-history-toggle:focus-visible { color: #fff; outline: none; }

.coda-hud-history {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  width: 224px;
  padding: 13px 8px 13px 19px;
  border: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(5, 4, 8, 0.9), rgba(5, 4, 8, 0.62) 54%, transparent 82%);
  box-shadow: none;
  backdrop-filter: blur(9px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.coda-hud-history::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(164, 99, 231, 0.82) 18% 82%, transparent);
  box-shadow: 0 0 14px rgba(154, 94, 224, 0.42);
}

.coda-hud.is-history-open .coda-hud-history { opacity: 1; pointer-events: auto; transform: none; }
.coda-hud-history button {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  color: #cfc9d5;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.coda-hud-history button span { color: var(--coda-violet); font-size: 8px; }
.coda-hud-history button strong { font-size: 9px; font-weight: 560; text-transform: uppercase; }
.coda-hud-history button:hover:not(:disabled),
.coda-hud-history button:focus-visible:not(:disabled) { color: #fff; background: rgba(155, 104, 213, 0.12); outline: none; }
.coda-hud-history button:disabled { color: #57515d; cursor: default; }
.coda-hud-history button.is-current { color: #fff; box-shadow: inset 2px 0 var(--coda-violet); }

.coda-world-hit {
  position: absolute;
  z-index: 12;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 12%;
  color: transparent;
  background: transparent;
  cursor: pointer;
}
.coda-world-hit::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid transparent;
  border-radius: inherit;
  opacity: 0;
  box-shadow: inset 0 0 34px rgba(173, 120, 230, 0.2), 0 0 42px rgba(137, 83, 196, 0.24);
  transition: opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.coda-world-hit:hover::after,
.coda-world-hit:focus-visible::after {
  border-color: rgba(220, 199, 242, 0.34);
  opacity: 1;
  box-shadow: inset 0 0 54px rgba(177, 113, 233, 0.28), 0 0 54px rgba(150, 91, 211, 0.32);
}
.coda-world-hit:focus-visible { outline: 1px solid rgba(229, 215, 244, 0.38); outline-offset: 4px; }
.coda-world-hit--hall-left { top: 44%; left: 44%; width: 6.5%; height: 35%; border-radius: 12% 0 0 12%; }
.coda-world-hit--hall-right { top: 44%; left: 50.5%; width: 6.5%; height: 35%; border-radius: 0 12% 12% 0; }
.coda-world-hit--forge { top: 58%; left: 35.5%; width: 14%; height: 24%; }
.coda-world-hit--junction { right: 26%; bottom: 4%; width: 25%; height: 21%; border-radius: 50% 50% 10% 10%; }
.coda-world-hit--terminal { top: 9%; left: 39%; width: 25%; height: 57%; }

.coda-chapter-video,
.coda-terminal-motion,
.coda-exit-video { object-fit: cover; }
.coda-chapter-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform: translate3d(0, var(--coda-media-y, 0), 0) scale(1.04); }

.coda-chapter--junction .coda-junction-heading {
  top: 21%;
  right: auto;
  bottom: auto;
  left: max(7vw, 70px);
  width: min(510px, 37vw);
  padding: 0;
  background: transparent;
}
.coda-route-constellation { inset: 14% 6% 9% 49%; }
.coda-route-constellation::before {
  inset: 12% 4% 5%;
  background:
    linear-gradient(155deg, transparent 49.5%, rgba(167, 125, 211, 0.24) 50%, transparent 50.6%),
    linear-gradient(28deg, transparent 49.5%, rgba(102, 155, 212, 0.2) 50%, transparent 50.6%);
}
.coda-route-signal { opacity: 0.82; }
.coda-route-signal strong { font-size: 17px; }
.coda-route-signal--left { top: 33%; left: 2%; }
.coda-route-signal--forward { top: 8%; left: 43%; }
.coda-route-signal--right { top: 39%; right: 1%; }
.coda-route-signal--down { right: 35%; bottom: 5%; }

.coda-terminal-stage { min-height: 112svh; }
.coda-terminal-motion { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; }
.coda-terminal-motion[hidden] { display: none; }
body.coda-terminal-open .coda-terminal-motion {
  position: fixed;
  z-index: 110;
  inset: 0;
  width: 100vw;
  height: 100vh;
}
body.coda-terminal-open .coda-terminal-stage-copy,
body.coda-terminal-open .coda-world-hit--terminal { opacity: 0; pointer-events: none; }

.coda-civic-interface[hidden] { display: none; }
.coda-civic-interface {
  position: fixed;
  z-index: 120;
  inset: 0;
  overflow: hidden;
  color: #e8e5eb;
  background: radial-gradient(circle at 51% 40%, rgba(6, 5, 8, 0.08) 0 22%, rgba(4, 4, 6, 0.32) 55%, rgba(3, 3, 5, 0.72) 100%);
}
.coda-civic-interface:focus { outline: none; }
.coda-civic-interface.is-previewing {
  position: fixed;
  z-index: 120;
  inset: 0;
}
.coda-civic-interface.is-previewing .coda-civic-close { top: calc(var(--coda-header-height, 72px) + 18px); }
.coda-civic-interface.is-previewing .coda-civic-screen > header { opacity: 0; pointer-events: none; }
.coda-civic-interface.is-previewing .coda-civic-screen::before,
.coda-civic-interface.is-previewing .coda-civic-settings { display: none; }
.coda-civic-close {
  position: absolute;
  z-index: 8;
  top: 104px;
  right: 30px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  color: #ddd9e0;
  background: rgba(5,4,8,0.3);
  font: inherit;
  font-size: 24px;
  cursor: pointer;
  backdrop-filter: blur(9px);
}
.coda-civic-close:hover,
.coda-civic-close:focus-visible { border-color: rgba(214,188,239,0.58); color: #fff; outline: none; }
.coda-civic-boot {
  position: absolute;
  z-index: 4;
  top: 23%;
  left: 42%;
  display: none;
  place-items: center;
  width: 19%;
  min-height: 35%;
  color: #d8d3dc;
  text-align: center;
  text-shadow: 0 2px 18px #000;
}
.coda-civic-boot:not([hidden]) { display: grid; }
.coda-civic-boot i { width: 48px; height: 48px; border: 1px solid rgba(202,175,229,0.28); border-top-color: var(--coda-violet); border-radius: 50%; animation: coda-terminal-spin 900ms linear infinite; }
.coda-civic-screen[hidden] { display: none; }
.coda-civic-screen { position: absolute; inset: 0; }
.coda-civic-screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 35%;
  width: 32%;
  height: 72%;
  background: radial-gradient(ellipse at center, rgba(3, 3, 6, 0.7) 0 27%, rgba(3, 3, 6, 0.4) 52%, transparent 78%);
  filter: blur(10px);
  pointer-events: none;
}
.coda-civic-screen > header {
  position: absolute;
  z-index: 3;
  top: 17%;
  left: 40.5%;
  width: 22%;
  text-align: center;
  text-shadow: 0 2px 16px #000;
}
.coda-civic-screen > header span { color: #b4aabd; font-size: 8px; text-transform: uppercase; }
.coda-civic-screen > header h2 { margin: 9px 0 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2vw, 34px); font-weight: 400; }
.coda-civic-routes {
  position: absolute;
  z-index: 3;
  top: 30%;
  left: 41%;
  display: grid;
  width: 21%;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.coda-civic-routes[hidden] { display: none; }
.coda-civic-routes button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 10px;
  min-height: 52px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  color: #e3dee8;
  background: transparent;
  font: inherit;
  text-align: left;
  text-shadow: 0 2px 12px #000;
  cursor: pointer;
}
.coda-civic-routes button span { grid-column: 1 / -1; color: #a79dac; font-size: 7px; text-transform: uppercase; }
.coda-civic-routes button strong { font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 400; }
.coda-civic-routes button::after { content: ""; width: 18px; height: 1px; margin-bottom: 7px; background: var(--coda-violet); opacity: 0.6; box-shadow: 0 0 10px var(--coda-violet); transition: width 180ms ease, opacity 180ms ease; }
.coda-civic-routes button:hover,
.coda-civic-routes button:focus-visible { color: #fff; outline: none; }
.coda-civic-routes button:hover::after,
.coda-civic-routes button:focus-visible::after { width: 38px; opacity: 1; }

.coda-civic-destination[hidden] { display: none; }
.coda-civic-destination { position: absolute; z-index: 2; inset: 0; overflow: hidden; }
.coda-civic-destination-media,
.coda-civic-destination-media picture,
.coda-civic-destination-media img,
.coda-civic-destination-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.coda-civic-destination-media img,
.coda-civic-destination-media video { z-index: 1; object-fit: cover; object-position: center; background: #050508; }
.coda-civic-destination-media img { object-fit: cover; }
.coda-civic-destination::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,3,5,0.93), rgba(3,3,5,0.48) 38%, rgba(3,3,5,0.08) 68%, rgba(3,3,5,0.44)), linear-gradient(0deg, rgba(3,3,5,0.78), transparent 50%); pointer-events: none; }
.coda-civic-destination-copy { position: absolute; z-index: 3; top: clamp(108px, 15vh, 168px); left: max(7vw, 76px); max-width: 520px; text-shadow: 0 2px 18px #000; }
.coda-civic-destination-copy h3 { margin: 14px 0 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5vw, 76px); font-weight: 400; line-height: 0.98; }
.coda-civic-destination-copy > p:not(.coda-route-code) { max-width: 55ch; color: #c1bbc7; font-size: 13px; line-height: 1.65; }
.coda-civic-destination-copy .coda-route-note { color: #928b98 !important; font-size: 11px !important; }
.coda-terminal-actions { position: absolute; z-index: 5; inset: 0; margin: 0; pointer-events: none; }
.coda-terminal-actions .coda-primary-link {
  position: absolute;
  top: 46%;
  left: 52%;
  width: 18%;
  height: 29%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: transparent;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 0;
  pointer-events: auto;
  cursor: pointer;
}
.coda-terminal-actions .coda-primary-link::after {
  content: "";
  position: absolute;
  inset: 5%;
  display: block;
  border: 1px solid transparent;
  border-radius: 12%;
  opacity: 0;
  box-shadow: inset 0 0 34px rgba(173, 120, 230, 0.2), 0 0 42px rgba(137, 83, 196, 0.24);
  transition: opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  pointer-events: none;
}
.coda-terminal-actions .coda-primary-link:hover,
.coda-terminal-actions .coda-primary-link:focus-visible { border-color: transparent; box-shadow: none; outline: none; }
.coda-terminal-actions .coda-primary-link:hover::after,
.coda-terminal-actions .coda-primary-link:focus-visible::after {
  border-color: rgba(220, 199, 242, 0.34);
  opacity: 1;
  box-shadow: inset 0 0 54px rgba(177, 113, 233, 0.28), 0 0 54px rgba(150, 91, 211, 0.32);
}
.coda-terminal-actions .coda-secondary-link {
  position: absolute;
  top: calc(var(--coda-header-height, 72px) + 18px);
  left: 28px;
  width: auto;
  min-height: 32px;
  margin: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(167, 104, 225, 0.48);
  color: rgba(234, 228, 239, 0.76);
  background: transparent;
  font-size: 9px;
  text-transform: uppercase;
  pointer-events: auto;
}
[data-route-destination="black-kettle"] .coda-civic-destination-copy {
  top: 34%;
  right: max(6vw, 72px);
  left: auto;
  width: min(430px, 31vw);
  transform: none;
  text-align: right;
}
[data-route-destination="black-kettle"] .coda-terminal-actions .coda-primary-link { top: 29%; left: 45%; width: 20%; height: 44%; }
[data-route-destination="undercity-gate"] .coda-terminal-actions .coda-primary-link { top: 48%; left: 54%; width: 16%; height: 30%; }
.coda-civic-settings {
  position: fixed;
  z-index: 126;
  right: 30px;
  bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: #918a96;
  font-size: 8px;
  text-transform: uppercase;
}
.coda-civic-settings div { display: flex; gap: 8px; }
.coda-civic-settings button { padding: 4px 0; border: 0; border-bottom: 1px solid transparent; color: #8f8994; background: transparent; font: inherit; font-size: 8px; text-transform: uppercase; cursor: pointer; }
.coda-civic-settings button.is-active { color: #fff; border-bottom-color: var(--coda-violet); }

.coda-travel-transition[hidden] { display: none; }
.coda-travel-transition { position: fixed; z-index: 125; inset: 0; overflow: hidden; background: #030305; }
.coda-travel-transition video { display: block; width: 100%; height: 100%; object-fit: cover; }
.coda-travel-transition::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 28%, rgba(3,3,5,0.62) 100%); pointer-events: none; }
.coda-travel-transition span { position: absolute; z-index: 2; right: 32px; bottom: 24px; color: rgba(235,230,240,0.68); font-size: 9px; text-transform: uppercase; }
body.coda-traveling { overflow: hidden; }

.coda-reader-backdrop { background: radial-gradient(circle at 50% 38%, rgba(25,27,30,0.36), rgba(2,2,3,0.94)); }
.coda-reader-panel { background: radial-gradient(circle at 50% 0, rgba(35,36,40,0.35), transparent 40%), rgba(7,8,10,0.98); }

@media (max-width: 760px) {
  .coda-hud {
    top: 84px;
    right: 12px;
    bottom: auto;
    left: auto;
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .coda-hud-signal,
  .coda-hud-location,
  .coda-hud-route,
  .coda-hud-progress { display: none; }
  .coda-hud-history-toggle { display: grid; min-height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(5,4,8,0.72); backdrop-filter: blur(12px); }
  .coda-hud-history { top: calc(100% + 8px); width: min(236px, calc(100vw - 24px)); }
  .coda-world-hit--hall-left { top: 43%; left: 31%; width: 19%; height: 34%; }
  .coda-world-hit--hall-right { top: 43%; left: 50%; width: 19%; height: 34%; }
  .coda-world-hit--forge { top: 54%; left: 27%; width: 46%; height: 30%; }
  .coda-world-hit--junction { right: 19%; bottom: 7%; width: 62%; height: 24%; }
  .coda-world-hit--terminal { top: 17%; left: 18%; width: 64%; height: 54%; }
  .coda-chapter--junction .coda-junction-heading { top: 18%; right: 24px; left: 24px; width: auto; }
  .coda-route-constellation { inset: 38% 24px 10%; }
  .coda-route-signal--left { top: 26%; left: 0; }
  .coda-route-signal--forward { top: 4%; left: 43%; }
  .coda-route-signal--right { top: 30%; right: 0; }
  .coda-route-signal--down { right: 32%; bottom: 4%; }
  .coda-terminal-stage { min-height: 106svh; }
  .coda-civic-close { top: 84px; right: 14px; }
  .coda-civic-boot { top: 25%; left: 20%; width: 60%; min-height: 34%; }
  .coda-civic-screen > header { top: 18%; left: 14%; width: 72%; }
  .coda-civic-screen > header h2 { font-size: 30px; }
  .coda-civic-routes { top: 32%; left: 14%; width: 72%; }
  .coda-civic-routes button { min-height: 60px; }
  .coda-civic-interface.is-previewing { inset: 0; }
  .coda-civic-destination-copy { top: 76px; right: 24px; bottom: auto; left: 24px; }
  .coda-civic-destination-copy h3 { font-size: 44px; }
  .coda-civic-destination-copy > p:not(.coda-route-code) { font-size: 12px; }
  .coda-terminal-actions .coda-primary-link { top: 48%; left: 30%; width: 40%; height: 28%; }
  .coda-terminal-actions .coda-secondary-link { top: calc(var(--coda-header-height, 72px) + 14px); left: 18px; }
  [data-route-destination="black-kettle"] .coda-civic-destination-copy { right: 24px; left: 24px; width: auto; transform: none; text-align: left; }
  [data-route-destination="black-kettle"] .coda-terminal-actions .coda-primary-link,
  [data-route-destination="undercity-gate"] .coda-terminal-actions .coda-primary-link { top: 48%; left: 30%; width: 40%; height: 28%; }
  .coda-civic-settings { right: 16px; bottom: 14px; left: 16px; justify-content: space-between; }
  .coda-travel-transition { inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .coda-civic-boot i { animation: none; }
  .coda-world-hit::after,
  .coda-hud-history { transition: none; }
}

/* The main route remains one continuous descent. Door routes become separate
   streets that can converge again at an already-built junction. */
.coda-experience[data-active-route="forge-city"] #threshold,
.coda-experience[data-active-route="forge-city"] #archive-hall,
.coda-experience[data-active-route="glassmere-junction"] #threshold,
.coda-experience[data-active-route="glassmere-junction"] #archive-hall,
.coda-experience[data-active-route="glassmere-junction"] #forge-city { display: none; }

/* Branch scenes are separate streets, not anchor jumps inside the main descent. */
.coda-chapter[data-coda-route-scene] { display: none; }
.coda-experience[data-active-route="forge-city"] [data-coda-route-scene="forge-city"] { display: grid; }
.coda-experience[data-active-route="archive-doors"] [data-coda-route-scene="archive-doors"] { display: grid; }
.coda-experience[data-active-route="coda-vale"] [data-coda-route-scene="coda-vale"] { display: grid; }
.coda-experience[data-active-route="glassmere-central"] [data-coda-route-scene="glassmere-central"] { display: grid; }
.coda-experience[data-active-route="black-kettle"] [data-coda-route-scene="black-kettle"] { display: grid; }
.coda-experience[data-active-route="undercity-gate"] [data-coda-route-scene="undercity-gate"] { display: grid; }
.coda-experience[data-active-route="lattice"] [data-coda-route-scene="lattice"] { display: grid; }
.coda-experience[data-active-route="archive-doors"] #threshold,
.coda-experience[data-active-route="archive-doors"] #archive-hall,
.coda-experience[data-active-route="archive-doors"] #forge-city,
.coda-experience[data-active-route="archive-doors"] #glassmere-junction,
.coda-experience[data-active-route="archive-doors"] #glassmere-terminal { display: none; }
.coda-experience[data-active-route="coda-vale"] #threshold,
.coda-experience[data-active-route="coda-vale"] #archive-hall,
.coda-experience[data-active-route="coda-vale"] #forge-city,
.coda-experience[data-active-route="coda-vale"] #glassmere-junction,
.coda-experience[data-active-route="coda-vale"] #glassmere-terminal,
.coda-experience[data-active-route="glassmere-central"] #threshold,
.coda-experience[data-active-route="glassmere-central"] #archive-hall,
.coda-experience[data-active-route="glassmere-central"] #forge-city,
.coda-experience[data-active-route="glassmere-central"] #glassmere-junction,
.coda-experience[data-active-route="glassmere-central"] #glassmere-terminal,
.coda-experience[data-active-route="black-kettle"] #threshold,
.coda-experience[data-active-route="black-kettle"] #archive-hall,
.coda-experience[data-active-route="black-kettle"] #forge-city,
.coda-experience[data-active-route="black-kettle"] #glassmere-junction,
.coda-experience[data-active-route="black-kettle"] #glassmere-terminal,
.coda-experience[data-active-route="undercity-gate"] #threshold,
.coda-experience[data-active-route="undercity-gate"] #archive-hall,
.coda-experience[data-active-route="undercity-gate"] #forge-city,
.coda-experience[data-active-route="undercity-gate"] #glassmere-junction,
.coda-experience[data-active-route="undercity-gate"] #glassmere-terminal,
.coda-experience[data-active-route="lattice"] #threshold,
.coda-experience[data-active-route="lattice"] #archive-hall,
.coda-experience[data-active-route="lattice"] #forge-city,
.coda-experience[data-active-route="lattice"] #glassmere-junction,
.coda-experience[data-active-route="lattice"] #glassmere-terminal { display: none; }

.coda-chapter--remembered {
  min-height: 126svh;
  padding-top: calc(var(--coda-header-height, 72px) + 92px);
  background: #050507;
}

.coda-chapter--remembered-entry { min-height: 118svh; }
.coda-chapter--rain { min-height: 134svh; }
.coda-chapter--boundary { min-height: 124svh; }
.coda-chapter--two-names { min-height: 136svh; }

.coda-chapter--remembered .coda-chapter-media { inset: 0; }
.coda-chapter--remembered .coda-chapter-media::after {
  z-index: 3;
  background: linear-gradient(90deg, rgba(3, 3, 6, 0.84), rgba(3, 3, 6, 0.12) 48%, rgba(3, 3, 6, 0.52));
  pointer-events: none;
}
.coda-chapter--rain .coda-chapter-media::after,
.coda-chapter--two-names .coda-chapter-media::after {
  background: linear-gradient(90deg, rgba(3, 3, 6, 0.2), rgba(3, 3, 6, 0.16) 44%, rgba(3, 3, 6, 0.86) 82%);
}

.coda-chapter--remembered .coda-chapter-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -54px -90px;
  background: radial-gradient(ellipse at 34% 50%, rgba(3, 3, 6, 0.9) 0 34%, rgba(3, 3, 6, 0.56) 56%, transparent 78%);
  filter: blur(8px);
  pointer-events: none;
}
.coda-chapter--remembered .coda-chapter-copy--right::before {
  background: radial-gradient(ellipse at 68% 50%, rgba(3, 3, 6, 0.92) 0 34%, rgba(3, 3, 6, 0.58) 56%, transparent 79%);
}

.coda-seamless-media video {
  position: absolute;
  z-index: 1;
  inset: -3%;
  display: block;
  width: 106%;
  height: 106%;
  object-fit: cover;
  opacity: 0;
  transform: translate3d(0, var(--coda-media-y, 0), 0) scale(1.035);
  transition: opacity 720ms linear;
}
.coda-seamless-media[data-loop-active="0"] video:nth-of-type(1),
.coda-seamless-media[data-loop-active="1"] video:nth-of-type(2) { opacity: 1; }

.coda-world-hit--two-names {
  top: 7%;
  left: 17%;
  width: 27%;
  height: 86%;
  border-radius: 2%;
}

@media (max-width: 760px) {
  .coda-chapter--remembered {
    min-height: 118svh;
    padding: calc(var(--coda-header-height, 72px) + 62px) 24px 112px;
  }
  .coda-chapter--remembered-entry { min-height: 112svh; }
  .coda-chapter--rain { min-height: 132svh; align-items: end; }
  .coda-chapter--boundary { min-height: 120svh; align-items: end; }
  .coda-chapter--two-names { min-height: 138svh; align-items: end; }
  .coda-chapter--remembered .coda-chapter-media::after,
  .coda-chapter--rain .coda-chapter-media::after,
  .coda-chapter--two-names .coda-chapter-media::after {
    background: linear-gradient(180deg, rgba(3, 3, 6, 0.12), rgba(3, 3, 6, 0.18) 42%, rgba(3, 3, 6, 0.9) 84%);
  }
  .coda-chapter--remembered .coda-chapter-copy::before,
  .coda-chapter--remembered .coda-chapter-copy--right::before {
    inset: -42px -30px;
    background: radial-gradient(ellipse at 50% 62%, rgba(3, 3, 6, 0.92) 0 38%, rgba(3, 3, 6, 0.55) 62%, transparent 82%);
  }
  .coda-chapter--two-names .coda-chapter-copy { justify-self: end; width: min(88%, 430px); }
  .coda-world-hit--two-names { top: 4%; left: 0; width: 38%; height: 91%; }
}

/* Forge City's branch stays close to the people and systems that keep it alive.
   The track itself, not a continue control, carries the route into Glassmere. */
.coda-chapter--forge-life {
  min-height: 126svh;
  padding-top: calc(var(--coda-header-height, 72px) + 92px);
  background: #050609;
}

.coda-chapter--night-mechanic { min-height: 124svh; }
.coda-chapter--clerk-line { min-height: 128svh; }
.coda-chapter--comfort { min-height: 132svh; }
.coda-chapter--platform-four { min-height: 140svh; }

.coda-chapter--forge-life .coda-chapter-media {
  inset: 0;
  background: #050609;
}
.coda-motion-media__video {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, var(--coda-media-y, 0), 0) scale(1.05);
}
.coda-chapter--forge-life .coda-chapter-media::after {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(3, 4, 7, 0.86), rgba(3, 4, 7, 0.12) 48%, rgba(3, 4, 7, 0.48)),
    linear-gradient(180deg, rgba(3, 4, 7, 0.15), transparent 56%, rgba(3, 4, 7, 0.56));
  pointer-events: none;
}
.coda-chapter--clerk-line .coda-chapter-media::after,
.coda-chapter--platform-four .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(3, 4, 7, 0.32), rgba(3, 4, 7, 0.1) 43%, rgba(3, 4, 7, 0.88) 82%),
    linear-gradient(180deg, rgba(3, 4, 7, 0.14), transparent 54%, rgba(3, 4, 7, 0.62));
}
.coda-chapter--forge-life.is-current .coda-chapter-media,
.coda-chapter--forge-life.is-past .coda-chapter-media { opacity: 0.88; }

.coda-chapter--forge-life .coda-chapter-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -58px -94px;
  background: radial-gradient(ellipse at 34% 50%, rgba(3, 4, 7, 0.92) 0 33%, rgba(3, 4, 7, 0.58) 55%, transparent 79%);
  filter: blur(9px);
  pointer-events: none;
}
.coda-chapter--forge-life .coda-chapter-copy--right::before {
  background: radial-gradient(ellipse at 68% 50%, rgba(3, 4, 7, 0.92) 0 33%, rgba(3, 4, 7, 0.58) 55%, transparent 79%);
}
.coda-chapter--forge-life .coda-kicker::before { background: #f03b63; }
.coda-chapter--comfort .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 58% center; }
.coda-chapter--platform-four .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 52% center; }

@media (max-width: 760px) {
  .coda-chapter--forge-life {
    min-height: 122svh;
    padding: calc(var(--coda-header-height, 72px) + 62px) 24px 116px;
    align-items: end;
  }
  .coda-chapter--night-mechanic { min-height: 118svh; }
  .coda-chapter--clerk-line { min-height: 122svh; }
  .coda-chapter--comfort { min-height: 126svh; }
  .coda-chapter--platform-four { min-height: 134svh; }
  .coda-chapter--forge-life .coda-chapter-media::after,
  .coda-chapter--clerk-line .coda-chapter-media::after,
  .coda-chapter--platform-four .coda-chapter-media::after {
    background:
      linear-gradient(180deg, rgba(3, 4, 7, 0.08), rgba(3, 4, 7, 0.18) 43%, rgba(3, 4, 7, 0.92) 84%),
      linear-gradient(90deg, rgba(3, 4, 7, 0.3), transparent 54%, rgba(3, 4, 7, 0.22));
  }
  .coda-chapter--forge-life .coda-chapter-copy::before,
  .coda-chapter--forge-life .coda-chapter-copy--right::before {
    inset: -44px -30px;
    background: radial-gradient(ellipse at 50% 62%, rgba(3, 4, 7, 0.94) 0 38%, rgba(3, 4, 7, 0.58) 62%, transparent 82%);
  }
  .coda-chapter--night-mechanic .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 48% center; }
  .coda-chapter--clerk-line .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 52% center; }
  .coda-chapter--comfort .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 54% center; }
  .coda-chapter--platform-four .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 50% center; }

  .coda-chapter--junction {
    min-height: 132svh;
    padding: 0 24px;
  }
  .coda-chapter--junction .coda-junction-heading {
    position: absolute;
    top: calc(var(--coda-header-height, 66px) + 7vh);
    right: 24px;
    left: 24px;
    width: auto;
    max-width: 340px;
  }
  .coda-chapter--junction .coda-junction-heading h2 { font-size: 36px; }
  .coda-chapter--junction .coda-junction-heading > p:last-child {
    max-width: 36ch;
    font-size: 12px;
    line-height: 1.55;
  }
  .coda-chapter--junction .coda-route-constellation { inset: 46% 24px 11%; }
  .coda-chapter--junction .coda-route-signal--left { top: 8%; left: 0; }
  .coda-chapter--junction .coda-route-signal--forward {
    top: 0;
    right: 0;
    left: auto;
    justify-items: end;
    text-align: right;
  }
  .coda-chapter--junction .coda-route-signal--right { top: 47%; right: 0; }
  .coda-chapter--junction .coda-route-signal--down { right: auto; bottom: 0; left: 12%; }
}

/* Records dissolve into the current place instead of appearing as a card. */
.coda-reader {
  inset: 0;
  display: block;
  box-sizing: border-box;
  padding: var(--coda-header-height, 72px) 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 18%, rgba(42, 44, 49, 0.34), transparent 44%),
    radial-gradient(circle at 12% 55%, rgba(18, 20, 24, 0.42), transparent 38%),
    rgba(3, 4, 6, 0.91);
  backdrop-filter: blur(18px) saturate(78%);
  scrollbar-width: none;
}
.coda-reader::-webkit-scrollbar { display: none; }
.coda-reader-backdrop {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,3,4,0.18), rgba(2,3,4,0.7));
  backdrop-filter: none;
}
.coda-reader-panel {
  position: relative;
  z-index: 2;
  display: block;
  width: min(1120px, 100%);
  height: auto;
  max-height: none;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.coda-reader-header {
  position: sticky;
  z-index: 5;
  top: 0;
  min-height: 66px;
  padding: 0 4vw;
  border: 0;
  background: linear-gradient(180deg, rgba(4,5,7,0.96), rgba(4,5,7,0.72) 72%, transparent);
  backdrop-filter: blur(12px);
}
.coda-reader-media { width: min(1040px, calc(100% - 48px)); margin: 0 auto; aspect-ratio: 16 / 7; }
.coda-reader-media::after { background: linear-gradient(transparent, rgba(4,5,7,0.9)); }
.coda-reader-copy { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0 120px; }

.coda-civic-settings {
  right: auto;
  left: 50%;
  justify-content: center;
  width: max-content;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .coda-reader { inset: 0; padding-top: var(--coda-header-height, 72px); }
  .coda-reader-backdrop { inset: 0; }
  .coda-reader-panel { width: 100%; height: auto; max-height: none; }
  .coda-reader-header { padding: 0 20px; }
  .coda-reader-media { width: 100%; aspect-ratio: 4 / 3; }
  .coda-reader-copy { width: auto; padding: 34px 24px 100px; }
  .coda-civic-settings { right: auto; left: 50%; width: max-content; max-width: calc(100vw - 24px); }
}

/* First-pass civic branches. These are complete routes with real exits; their
   still plates can be upgraded to motion without changing the route graph. */
.coda-chapter--branch { min-height: 132svh; }
.coda-chapter--route-end { min-height: 148svh; }

.coda-chapter--coda-walk .coda-motion-media__video {
  object-position: 52% center;
  transform: translate3d(0, var(--coda-media-y, 0), 0) scale(1.2);
}
.coda-chapter--coda-note .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 48% center; }
.coda-chapter--coda-late-table .coda-motion-media__video { object-position: 50% center; }
.coda-chapter--coda-unresolved .coda-chapter-media img { object-position: 56% center; }
.coda-chapter--coda-crossing .coda-chapter-media img { object-position: center; }

.coda-chapter--coda-walk .coda-chapter-media::after,
.coda-chapter--coda-unresolved .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(3, 4, 7, 0.84), rgba(3, 4, 7, 0.08) 48%, rgba(3, 4, 7, 0.5)),
    linear-gradient(180deg, rgba(3, 4, 7, 0.08), transparent 52%, rgba(3, 4, 7, 0.62));
}
.coda-chapter--coda-note .coda-chapter-media::after,
.coda-chapter--coda-crossing .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(3, 4, 7, 0.3), rgba(3, 4, 7, 0.08) 44%, rgba(3, 4, 7, 0.9) 84%),
    linear-gradient(180deg, rgba(3, 4, 7, 0.08), transparent 52%, rgba(3, 4, 7, 0.64));
}

.coda-chapter--glassmere-route .coda-kicker::before { background: #67c9e8; }
.coda-chapter--glassmere-route .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(3, 6, 11, 0.82), rgba(3, 6, 11, 0.08) 48%, rgba(3, 6, 11, 0.48)),
    linear-gradient(180deg, rgba(3, 6, 11, 0.06), transparent 48%, rgba(3, 6, 11, 0.62));
}
.coda-chapter--glassmere-route.coda-chapter--copy-right .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(3, 6, 11, 0.28), rgba(3, 6, 11, 0.08) 44%, rgba(3, 6, 11, 0.9) 84%),
    linear-gradient(180deg, rgba(3, 6, 11, 0.06), transparent 48%, rgba(3, 6, 11, 0.62));
}

.coda-chapter--black-kettle-route { background: #050507; }
.coda-chapter--black-kettle-route .coda-kicker::before { background: #e99a56; }
.coda-chapter--black-kettle-route .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(4, 4, 7, 0.86), rgba(4, 4, 7, 0.1) 48%, rgba(4, 4, 7, 0.5)),
    linear-gradient(180deg, rgba(4, 4, 7, 0.08), transparent 48%, rgba(4, 4, 7, 0.68));
}
.coda-chapter--black-kettle-route.coda-chapter--copy-right .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(4, 4, 7, 0.3), rgba(4, 4, 7, 0.08) 42%, rgba(4, 4, 7, 0.91) 84%),
    linear-gradient(180deg, rgba(4, 4, 7, 0.08), transparent 48%, rgba(4, 4, 7, 0.7));
}
.coda-chapter--black-kettle-open .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 50% center; }
.coda-chapter--black-kettle-cup .coda-chapter-media img { object-position: 50% center; }
.coda-chapter--black-kettle-close .coda-chapter-media img {
  object-position: 58% center;
  filter: brightness(0.74) saturate(0.82);
}

.coda-chapter--lattice-route { background: #030508; }
.coda-chapter--lattice-route .coda-kicker::before { background: #77bfff; }
.coda-chapter--lattice-route .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(2, 5, 10, 0.88), rgba(2, 5, 10, 0.1) 48%, rgba(2, 5, 10, 0.5)),
    linear-gradient(180deg, rgba(2, 5, 10, 0.08), transparent 48%, rgba(2, 5, 10, 0.68));
}
.coda-chapter--lattice-route.coda-chapter--copy-right .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(2, 5, 10, 0.28), rgba(2, 5, 10, 0.08) 42%, rgba(2, 5, 10, 0.92) 84%),
    linear-gradient(180deg, rgba(2, 5, 10, 0.08), transparent 48%, rgba(2, 5, 10, 0.7));
}
.coda-chapter--lattice-after-house .coda-chapter-media img { object-position: 50% center; }
.coda-chapter--lattice-standing .coda-chapter-media img { object-position: 50% center; }
.coda-chapter--lattice-stage .coda-chapter-media img { object-position: 54% center; }

.coda-chapter--undercity-route { background: #070505; }
.coda-chapter--undercity-route .coda-kicker::before { background: #e4573e; }
.coda-chapter--undercity-route .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(7, 4, 4, 0.86), rgba(7, 4, 4, 0.09) 50%, rgba(7, 4, 4, 0.54)),
    linear-gradient(180deg, rgba(7, 4, 4, 0.08), transparent 48%, rgba(7, 4, 4, 0.7));
}
.coda-chapter--undercity-route.coda-chapter--copy-right .coda-chapter-media::after {
  background:
    linear-gradient(90deg, rgba(7, 4, 4, 0.28), rgba(7, 4, 4, 0.08) 42%, rgba(7, 4, 4, 0.9) 84%),
    linear-gradient(180deg, rgba(7, 4, 4, 0.08), transparent 48%, rgba(7, 4, 4, 0.7));
}
.coda-chapter--undercity-terminal { min-height: 120svh; background: #030308; }
.coda-chapter--undercity-terminal .coda-chapter-media::after {
  background: linear-gradient(90deg, rgba(3,3,7,0.88), rgba(3,3,7,0.44) 34%, rgba(3,3,7,0.06) 68%, rgba(3,3,7,0.22));
}
.coda-chapter--undercity-terminal.coda-chapter--copy-right .coda-chapter-media::after {
  background: linear-gradient(90deg, rgba(3,3,7,0.08), rgba(3,3,7,0.13) 48%, rgba(3,3,7,0.9) 82%);
}
.coda-chapter--undercity-terminal .coda-chapter-media img { object-position: center; }

.coda-branch-choices {
  display: grid;
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.coda-branch-choices button,
.coda-record-signal {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(247, 244, 250, 0.94);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: padding 180ms ease, color 180ms ease, border-color 180ms ease;
}
.coda-branch-choices button span,
.coda-record-signal span {
  color: #d15ca8;
  font: 700 0.64rem/1.2 var(--font-sans, Arial, sans-serif);
  text-transform: uppercase;
}
.coda-branch-choices button strong,
.coda-record-signal strong {
  font: 500 1.08rem/1.2 var(--font-serif, Georgia, serif);
}
.coda-branch-choices button:hover,
.coda-branch-choices button:focus-visible,
.coda-record-signal:hover,
.coda-record-signal:focus-visible {
  padding-left: 12px;
  border-color: rgba(209, 92, 168, 0.8);
  color: #fff;
  outline: none;
}
.coda-record-signal {
  max-width: 340px;
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.coda-scene-records {
  display: grid;
  width: min(100%, 440px);
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.coda-scene-records .coda-record-signal {
  max-width: none;
  margin-top: 0;
  border-top: 0;
}

@media (min-width: 1024px) {
  .coda-inline-record[hidden] { display: none; }
  .coda-inline-record {
    position: absolute;
    z-index: 7;
    top: 50%;
    left: max(9vw, 120px);
    width: min(520px, 38vw);
    color: rgba(239, 236, 243, 0.94);
    transform: translateY(-50%);
    animation: coda-inline-record-in 440ms cubic-bezier(.2,.8,.2,1) both;
  }
  .coda-inline-record::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -86px -110px;
    background: radial-gradient(ellipse at 43% 48%, rgba(2, 3, 5, 0.68) 0 34%, rgba(2, 3, 5, 0.44) 58%, transparent 82%);
    filter: blur(10px);
    pointer-events: none;
  }
  .coda-inline-record__content { position: relative; }
  .coda-inline-record__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .coda-inline-record__header > div { display: grid; gap: 4px; }
  .coda-inline-record__header span,
  .coda-inline-record__header strong {
    font: 700 0.62rem/1.2 var(--font-sans, Arial, sans-serif);
    text-transform: uppercase;
  }
  .coda-inline-record__header span { color: #d15ca8; }
  .coda-inline-record__header strong { color: rgba(218, 214, 224, 0.58); }
  .coda-inline-record__header > button,
  .coda-inline-record__nav button {
    padding: 0 0 5px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    color: rgba(239, 236, 243, 0.72);
    background: transparent;
    font: 700 0.62rem/1.2 var(--font-sans, Arial, sans-serif);
    text-transform: uppercase;
    cursor: pointer;
  }
  .coda-inline-record__header > button:hover,
  .coda-inline-record__header > button:focus-visible,
  .coda-inline-record__nav button:hover,
  .coda-inline-record__nav button:focus-visible {
    border-color: #d15ca8;
    color: #fff;
    outline: none;
  }
  .coda-inline-record__nav button:disabled {
    border-color: transparent;
    color: rgba(239, 236, 243, 0.25);
    cursor: default;
  }
  .coda-inline-record h3 {
    margin: 24px 0 0;
    color: #fff;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.05;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.66);
  }
  .coda-inline-record__teaser {
    margin: 14px 0 0;
    color: rgba(236, 231, 240, 0.86);
    font-family: var(--font-serif, Georgia, serif);
    font-size: 17px;
    line-height: 1.45;
  }
  .coda-inline-record__body {
    margin-top: 22px;
    color: rgba(211, 206, 217, 0.78);
    font-size: 13px;
    line-height: 1.62;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.86);
  }
  .coda-inline-record__body p { margin: 0 0 0.85em; }
  .coda-inline-record__nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .coda-inline-record__nav button:first-child { justify-self: start; }
  .coda-inline-record__nav button:last-child { justify-self: end; }
  .coda-inline-record__nav span {
    color: rgba(218, 214, 224, 0.48);
    font: 700 0.6rem/1.2 var(--font-sans, Arial, sans-serif);
  }
  .coda-scene-records .coda-record-signal.is-active {
    padding-left: 12px;
    border-color: rgba(209, 92, 168, 0.8);
    color: #fff;
  }
}

@keyframes coda-inline-record-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 1024px) and (max-width: 1499px) {
  .coda-inline-record {
    left: 50%;
    width: min(620px, 76vw);
    transform: translate(-50%, -50%);
  }
  .coda-experience.is-inline-record-open #forge-city .coda-chapter-copy {
    opacity: 0.1;
    filter: blur(2px);
    pointer-events: none;
  }
  .coda-inline-record__header { justify-content: flex-start; }
  .coda-inline-record::before {
    inset: -82px -130px;
    background: radial-gradient(ellipse at 50% 48%, rgba(2, 3, 5, 0.72) 0 34%, rgba(2, 3, 5, 0.46) 60%, transparent 84%);
  }
}

@media (max-width: 760px) {
  .coda-chapter--branch { min-height: 128svh; }
  .coda-chapter--route-end { min-height: 150svh; }
  .coda-chapter--coda-walk .coda-motion-media__video {
    object-position: 45% center;
    transform: translate3d(0, var(--coda-media-y, 0), 0) scale(1.3);
  }
  .coda-chapter--coda-note .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 48% center; }
  .coda-chapter--coda-late-table .coda-motion-media__video { object-position: 42% center; }
  .coda-chapter--coda-unresolved .coda-chapter-media img { object-position: 52% center; }
  .coda-chapter--coda-crossing .coda-chapter-media img { object-position: center; }
  .coda-chapter--glassmere-route .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 50% center; }
  .coda-chapter--black-kettle-route .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 50% center; }
  .coda-chapter--black-kettle-close .coda-chapter-media img { object-position: 52% center; }
  .coda-chapter--lattice-route .coda-chapter-media img { object-position: 50% center; }
  .coda-chapter--undercity-route .coda-chapter-media :is(img, .coda-motion-media__video) { object-position: 50% center; }
  .coda-chapter--undercity-route#undercity-boundary .coda-chapter-media img { object-position: 78% center; }
  .coda-chapter--undercity-terminal { min-height: 112svh; }
  .coda-chapter--undercity-terminal-one .coda-chapter-media img { object-position: 42% center; }
  .coda-chapter--undercity-terminal-two .coda-chapter-media img { object-position: 38% center; }
  .coda-chapter--undercity-terminal-three .coda-chapter-media img { object-position: 58% center; }
  .coda-chapter--branch .coda-chapter-media::after,
  .coda-chapter--branch.coda-chapter--copy-right .coda-chapter-media::after {
    background:
      linear-gradient(180deg, rgba(3, 4, 7, 0.08), rgba(3, 4, 7, 0.18) 42%, rgba(3, 4, 7, 0.94) 84%),
      linear-gradient(90deg, rgba(3, 4, 7, 0.24), transparent 54%, rgba(3, 4, 7, 0.2));
  }
  .coda-branch-choices { margin-top: 24px; }
  .coda-branch-choices button strong,
  .coda-record-signal strong { font-size: 1rem; }
}