:root {
  --night: #030914;
  --night-soft: #071426;
  --structural-blue: #0a2f66;
  --signal-blue: #1268ff;
  --ice: #e9f2f8;
  --white: #ffffff;
  --warning: #9f1828;
  --muted: #8194a8;
  --page-pad: clamp(1.1rem, 4vw, 4.75rem);
  color-scheme: dark;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-block: 0;
  scrollbar-gutter: stable;
  background: var(--night);
}

html.is-novel-route-busy {
  scroll-behavior: auto;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--ice);
  background: var(--night);
  font-family: "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.is-leaving {
  overflow: hidden;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: var(--night);
  background: var(--ice);
}

.signal-texture,
.signal-sweep {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

.signal-texture {
  opacity: 0.19;
  background-image:
    url("assets/novel/signal-grain.webp"),
    repeating-linear-gradient(0deg, rgba(233, 242, 248, 0.085) 0, rgba(233, 242, 248, 0.085) 1px, transparent 1px, transparent 4px);
  background-size: 256px 256px, 100% 4px;
  background-blend-mode: soft-light, normal;
  mix-blend-mode: screen;
}

.signal-sweep {
  left: -35vw;
  right: auto;
  width: 32vw;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(18, 104, 255, 0.08) 35%, rgba(233, 242, 248, 0.42) 50%, rgba(18, 104, 255, 0.08) 65%, transparent);
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0) skewX(-8deg);
}

.signal-sweep.is-running {
  animation: field-sweep 900ms cubic-bezier(0.45, 0, 0.2, 1) both;
}

.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--page-pad);
  color: var(--ice);
  text-shadow: 0 1px 1rem rgba(3, 9, 20, 0.8);
}

.site-head a,
.site-head p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.19em;
}

.site-head a {
  position: relative;
  padding: 0.65rem 0;
}

.site-head a::after,
.closing-back::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.28rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 220ms ease;
}

.site-head a:hover::after,
.site-head a:focus-visible::after,
.closing-back:hover::after,
.closing-back:focus-visible::after {
  transform: scaleX(1);
}

.site-head a b {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--white);
  background: var(--signal-blue);
  font-weight: 400;
}

.site-head p i {
  width: 0.34rem;
  height: 0.34rem;
  background: var(--warning);
  box-shadow: 0 0 0.7rem rgba(159, 24, 40, 0.7);
  animation: status-pulse 2.4s steps(1) infinite;
}

.frame-counter {
  position: fixed;
  right: var(--page-pad);
  bottom: 1.35rem;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 2.8rem auto;
  align-items: center;
  gap: 0.55rem;
  color: var(--ice);
  font-family: "Share Tech Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 0.75rem var(--night);
}

.frame-counter i {
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.frame-counter b {
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.56rem;
}

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

.film-scene {
  --scene-progress: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 142svh;
  --fault-a: -14px;
  --fault-b: 10px;
  position: relative;
  min-height: 142svh;
  background: var(--night);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.film-scene--cover,
.film-scene--closing {
  min-height: 128svh;
  contain-intrinsic-size: auto 128svh;
}

.film-scene--life,
.film-scene--trace,
.film-scene--below,
.film-scene--history {
  min-height: 158svh;
  contain-intrinsic-size: auto 158svh;
}

.scene-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
}

.scene-camera {
  --cam-x: 0px;
  --cam-y: 0px;
  --cam-rot: 0deg;
  --cam-scale: 1.055;
  position: absolute;
  inset: -3.5%;
  transform: translate3d(var(--cam-x), var(--cam-y), 0) rotate(var(--cam-rot)) scale(var(--cam-scale));
  transform-origin: center;
  will-change: auto;
}

.film-scene.is-active .scene-camera {
  will-change: transform;
}

.scene-media,
.scene-media img,
.scene-grade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-media {
  --crisis-x: 67%;
  --crisis-y: 44%;
  --crisis-closed-clip: polygon(67% 44%, 67% 44%, 67% 44%, 67% 44%, 67% 44%, 67% 44%, 67% 44%, 67% 44%, 67% 44%, 67% 44%, 67% 44%, 67% 44%);
  --crisis-open-clip: polygon(49% 24%, 62% 17%, 77% 22%, 86% 36%, 84% 53%, 76% 68%, 62% 76%, 48% 71%, 41% 58%, 43% 45%, 39% 34%, 44% 27%);
  --ascii-media-mix: 0;
  --ascii-object-position: center;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  background: var(--night-soft);
}

.scene-media img {
  object-fit: cover;
  object-position: center;
  user-select: none;
}

.scene-image {
  z-index: 1;
  filter: saturate(0.78) contrast(1.12) brightness(0.82);
}

.ascii-media-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ascii-object-position, center);
  opacity: var(--ascii-media-mix, 0);
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  transform: translateZ(0);
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ascii-media-layer[hidden] {
  display: none;
}

.scene-crisis {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  filter: saturate(0.72) contrast(1.19) brightness(0.8);
  -webkit-mask-image:
    radial-gradient(ellipse 21% 29% at var(--crisis-x) var(--crisis-y), #000 0 42%, rgba(0, 0, 0, 0.82) 58%, rgba(0, 0, 0, 0.22) 74%, transparent 100%),
    radial-gradient(ellipse 13% 17% at calc(var(--crisis-x) + 8%) calc(var(--crisis-y) - 7%), #000 0 36%, rgba(0, 0, 0, 0.7) 58%, transparent 100%),
    radial-gradient(ellipse 11% 15% at calc(var(--crisis-x) - 8%) calc(var(--crisis-y) + 8%), #000 0 32%, rgba(0, 0, 0, 0.62) 56%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 21% 29% at var(--crisis-x) var(--crisis-y), #000 0 42%, rgba(0, 0, 0, 0.82) 58%, rgba(0, 0, 0, 0.22) 74%, transparent 100%),
    radial-gradient(ellipse 13% 17% at calc(var(--crisis-x) + 8%) calc(var(--crisis-y) - 7%), #000 0 36%, rgba(0, 0, 0, 0.7) 58%, transparent 100%),
    radial-gradient(ellipse 11% 15% at calc(var(--crisis-x) - 8%) calc(var(--crisis-y) + 8%), #000 0 32%, rgba(0, 0, 0, 0.62) 56%, transparent 100%);
  transform: translateZ(0) scale(1.006);
  transform-origin: center;
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
}

.scene-media.is-crisis-armed .scene-crisis,
.scene-media.is-crisis-visible .scene-crisis,
.scene-media.is-crisis-transition .scene-crisis {
  will-change: opacity, transform;
}

.scene-media.is-crisis-visible .scene-crisis {
  opacity: 0.98;
  transform: translateZ(0) scale(1);
}

.scene-media.is-crisis-gsap .scene-crisis {
  transition: none;
}

.scene-crisis-slice,
.scene-local-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene-crisis-slice {
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  clip-path: var(--crisis-open-clip);
  filter: saturate(0.52) contrast(1.3) brightness(1.18) hue-rotate(5deg);
  mix-blend-mode: screen;
}

.scene-media.is-crisis-transition .scene-crisis-slice,
.scene-media.is-signal-fault .scene-crisis-slice {
  will-change: transform, opacity;
}

.scene-crisis-slice--a {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0 17%, #000 17% 19.4%, transparent 19.4% 38%,
    #000 38% 42.2%, transparent 42.2% 68%, #000 68% 71%, transparent 71% 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0 17%, #000 17% 19.4%, transparent 19.4% 38%,
    #000 38% 42.2%, transparent 42.2% 68%, #000 68% 71%, transparent 71% 100%);
}

.scene-crisis-slice--b {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0 27%, #000 27% 30.6%, transparent 30.6% 52%,
    #000 52% 55%, transparent 55% 79%, #000 79% 81.3%, transparent 81.3% 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0 27%, #000 27% 30.6%, transparent 30.6% 52%,
    #000 52% 55%, transparent 55% 79%, #000 79% 81.3%, transparent 81.3% 100%);
}

.scene-local-scan {
  z-index: 5;
  left: -24%;
  right: auto;
  width: 22%;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(18, 104, 255, 0.04) 30%,
    rgba(233, 242, 248, 0.42) 49%,
    rgba(18, 104, 255, 0.12) 58%,
    transparent);
  mix-blend-mode: screen;
  transform: skewX(-10deg);
}

.scene-media.is-signal-fault .scene-local-scan {
  will-change: transform, opacity;
}

.scene-glitch {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  filter: saturate(0.52) contrast(1.24) brightness(1.08);
  mix-blend-mode: screen;
}

.scene-glitch--a {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0 18.1%, #000 18.1% 18.7%, transparent 18.7% 47.3%,
    #000 47.3% 48%, transparent 48% 72.2%, #000 72.2% 72.6%, transparent 72.6% 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0 18.1%, #000 18.1% 18.7%, transparent 18.7% 47.3%,
    #000 47.3% 48%, transparent 48% 72.2%, #000 72.2% 72.6%, transparent 72.6% 100%);
}

.scene-glitch--b {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0 31.4%, #000 31.4% 31.9%, transparent 31.9% 59.6%,
    #000 59.6% 60.3%, transparent 60.3% 84.1%, #000 84.1% 84.5%, transparent 84.5% 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0 31.4%, #000 31.4% 31.9%, transparent 31.9% 59.6%,
    #000 59.6% 60.3%, transparent 60.3% 84.1%, #000 84.1% 84.5%, transparent 84.5% 100%);
}

.scene-media.is-signal-fault .scene-glitch--a {
  animation: fault-slice-a 170ms steps(2, end) both;
}

.scene-media.is-signal-fault .scene-glitch--b {
  animation: fault-slice-b 170ms steps(2, end) both;
}

.scene-media.is-signal-fault .scene-image {
  animation: fault-base 170ms steps(2, end) both;
}

.scene-media.is-signal-fault .scene-local-scan {
  animation: local-scan 420ms cubic-bezier(0.32, 0, 0.12, 1) both;
}

.scene-grade {
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 9, 20, 0.42), rgba(3, 9, 20, 0.03) 34%, rgba(3, 9, 20, 0.46) 82%, rgba(3, 9, 20, 0.9)),
    linear-gradient(90deg, rgba(3, 9, 20, 0.7), transparent 42%, rgba(3, 9, 20, 0.28));
}

.film-scene--cover .scene-image,
.film-scene--cover .scene-glitch {
  object-position: 50% 45%;
  filter: saturate(0.55) contrast(1.24) brightness(0.45) hue-rotate(-4deg);
}

.film-scene--cover .scene-crisis,
.film-scene--cover .scene-crisis-slice {
  object-position: center;
  filter: saturate(0.66) contrast(1.2) brightness(0.58);
}

.film-scene--cover .scene-grade {
  background:
    linear-gradient(90deg, rgba(3, 9, 20, 0.92) 0, rgba(3, 9, 20, 0.64) 38%, rgba(3, 9, 20, 0.2) 68%, rgba(3, 9, 20, 0.7)),
    linear-gradient(180deg, rgba(3, 9, 20, 0.5), transparent 40%, rgba(3, 9, 20, 0.94));
}

.film-scene--frontier .scene-image,
.film-scene--frontier .scene-crisis,
.film-scene--frontier .scene-crisis-slice,
.film-scene--frontier .scene-glitch {
  object-position: center 56%;
}

.film-scene--order .scene-image,
.film-scene--order .scene-crisis,
.film-scene--order .scene-crisis-slice,
.film-scene--order .scene-glitch {
  object-position: center 46%;
}

.film-scene--order .scene-grade {
  background:
    linear-gradient(90deg, rgba(3, 9, 20, 0.2), rgba(3, 9, 20, 0.02) 48%, rgba(3, 9, 20, 0.82)),
    linear-gradient(180deg, rgba(3, 9, 20, 0.36), transparent 38%, rgba(3, 9, 20, 0.76));
}

.film-scene--life .scene-image,
.film-scene--life .scene-crisis,
.film-scene--life .scene-crisis-slice,
.film-scene--life .scene-glitch {
  object-position: center 48%;
}

.film-scene--trace .scene-image,
.film-scene--trace .scene-crisis,
.film-scene--trace .scene-crisis-slice,
.film-scene--trace .scene-glitch {
  object-position: center 50%;
}

.film-scene--trace .scene-grade {
  background:
    linear-gradient(90deg, rgba(3, 9, 20, 0.28), rgba(3, 9, 20, 0.03) 48%, rgba(3, 9, 20, 0.78)),
    linear-gradient(180deg, rgba(3, 9, 20, 0.34), transparent 40%, rgba(3, 9, 20, 0.78));
}

.film-scene--below .scene-image,
.film-scene--below .scene-crisis,
.film-scene--below .scene-crisis-slice,
.film-scene--below .scene-glitch {
  object-position: center 50%;
}

.film-scene--below .scene-grade {
  background:
    linear-gradient(90deg, rgba(3, 9, 20, 0.78), rgba(3, 9, 20, 0.06) 52%, rgba(3, 9, 20, 0.28)),
    linear-gradient(180deg, rgba(3, 9, 20, 0.36), transparent 42%, rgba(3, 9, 20, 0.82));
}

.film-scene--history .scene-image,
.film-scene--history .scene-crisis,
.film-scene--history .scene-crisis-slice,
.film-scene--history .scene-glitch {
  object-position: center 52%;
  filter: saturate(0.62) contrast(1.2) brightness(0.69);
}

@media (hover: hover) and (pointer: fine) {
  .scene-media[data-crisis] {
    cursor: crosshair;
  }

  .scene-media[data-crisis]::before {
    content: "";
    position: absolute;
    z-index: 5;
    left: var(--crisis-x);
    top: var(--crisis-y);
    width: clamp(4.8rem, 9vw, 8rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(233, 242, 248, 0.72), var(--signal-blue), transparent);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scaleX(0.05);
    transform-origin: center;
  }

  .scene-media[data-crisis]::after {
    content: "HOLD / SECOND EXPOSURE";
    position: absolute;
    z-index: 5;
    right: 1.8rem;
    top: 1.7rem;
    color: rgba(233, 242, 248, 0.48);
    font: 0.52rem/1 "Share Tech Mono", monospace;
    letter-spacing: 0.18em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .scene-media[data-crisis]:hover::after {
    opacity: 0.7;
  }

  .scene-media.is-crisis-armed::before {
    animation: crisis-arm-line 860ms cubic-bezier(0.32, 0, 0.12, 1) both;
  }

  .scene-media.is-crisis-visible::before,
  .scene-media.is-crisis-visible::after {
    opacity: 0;
  }
}

.scene-media[data-crisis]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.72);
}

.film-scene--history .scene-grade {
  background:
    linear-gradient(90deg, rgba(3, 9, 20, 0.82), rgba(3, 9, 20, 0.16) 48%, rgba(7, 20, 38, 0.55)),
    linear-gradient(180deg, rgba(3, 9, 20, 0.2), transparent 42%, rgba(3, 9, 20, 0.8));
}

.film-scene--closing .scene-image,
.film-scene--closing .scene-glitch {
  object-position: center 50%;
  filter: saturate(0.58) contrast(1.18) brightness(0.62);
  opacity: calc(0.9 - var(--scene-progress) * 0.42);
}

.film-scene--closing .scene-crisis,
.film-scene--closing .scene-crisis-slice {
  object-position: center 50%;
  filter: saturate(0.62) contrast(1.22) brightness(0.68);
}

.film-scene--closing .scene-grade {
  background:
    linear-gradient(90deg, rgba(3, 9, 20, 0.94), rgba(3, 9, 20, 0.34), rgba(3, 9, 20, 0.86)),
    linear-gradient(180deg, rgba(3, 9, 20, 0.42), transparent 38%, rgba(3, 9, 20, 0.98));
}

.scene-copy {
  position: absolute;
  z-index: 12;
  max-width: min(52rem, 74vw);
  pointer-events: none;
  text-shadow: 0 2px 1.3rem rgba(3, 9, 20, 0.9);
}

.scene-copy a,
.scene-copy button {
  pointer-events: auto;
}

.scene-copy--left {
  left: var(--page-pad);
  top: 48%;
  transform: translateY(-50%);
}

.scene-copy--right {
  right: var(--page-pad);
  top: 50%;
  max-width: min(47rem, 62vw);
  text-align: right;
  transform: translateY(-50%);
}

.scene-copy--low {
  top: auto;
  bottom: 12vh;
  transform: none;
}

.scene-kicker,
.scene-coordinate,
.roman-title,
.scene-state,
.site-foot,
.closing-back {
  font-family: "Share Tech Mono", monospace;
  text-transform: uppercase;
}

.scene-kicker {
  margin: 0 0 1.3rem;
  color: var(--ice);
  font-size: clamp(0.62rem, 0.8vw, 0.76rem);
  line-height: 1.4;
  letter-spacing: 0.22em;
}

.scene-kicker::before {
  content: "";
  display: inline-block;
  width: 1.9rem;
  height: 1px;
  margin-right: 0.8rem;
  vertical-align: 0.25em;
  background: var(--signal-blue);
}

.scene-copy h1,
.scene-copy h2 {
  margin: 0;
  color: var(--white);
  font-weight: 900;
  letter-spacing: -0.07em;
}

.scene-copy h1 {
  font-size: clamp(5.3rem, 12vw, 12rem);
  line-height: 0.82;
}

.scene-copy h2 {
  font-size: clamp(3.2rem, 7vw, 7.8rem);
  line-height: 1.02;
  text-wrap: balance;
}

.scene-coordinate {
  margin: 1.6rem 0 0;
  color: rgba(233, 242, 248, 0.64);
  font-size: clamp(0.58rem, 0.76vw, 0.72rem);
  line-height: 1.6;
  letter-spacing: 0.15em;
}

.scene-copy--title {
  left: var(--page-pad);
  top: 50%;
  max-width: 56vw;
  transform: translateY(-48%);
}

.scene-copy--title .scene-kicker {
  margin-bottom: 1.8rem;
}

.roman-title {
  margin: 1.35rem 0 0 0.35rem;
  color: var(--ice);
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  line-height: 1;
  letter-spacing: 0.6em;
}

.scene-state {
  display: inline-block;
  margin: 2.2rem 0 0 0.35rem;
  padding: 0.55rem 0.75rem;
  color: var(--white);
  background: rgba(18, 104, 255, 0.76);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
}

.cover-slit {
  position: absolute;
  z-index: 8;
  top: 9svh;
  right: 6.5vw;
  width: clamp(14rem, 22vw, 24rem);
  height: 82svh;
  overflow: hidden;
  border: 1px solid rgba(233, 242, 248, 0.38);
  box-shadow: 1.2rem 1.1rem 0 rgba(18, 104, 255, 0.15), 0 1.8rem 5rem rgba(3, 9, 20, 0.55);
  transform: translate3d(0, calc(var(--scene-progress) * -2vh), 0);
}

.cover-slit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.68) contrast(1.08) brightness(0.82);
}

.cover-slit::after {
  content: "CONCEPT COVER / SURFACE ACCESS";
  position: absolute;
  left: 0.7rem;
  bottom: 0.65rem;
  color: rgba(233, 242, 248, 0.72);
  font-family: "Share Tech Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.15em;
}

.scroll-cue {
  position: absolute;
  z-index: 12;
  left: var(--page-pad);
  bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(233, 242, 248, 0.72);
  font-family: "Share Tech Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.scroll-cue i {
  position: relative;
  width: 4rem;
  height: 1px;
  overflow: hidden;
  background: rgba(233, 242, 248, 0.25);
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ice);
  animation: cue-run 2.1s ease-in-out infinite;
}

.film-fragments {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.film-fragment {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(233, 242, 248, 0.28);
  background: var(--night);
  box-shadow: 0 1.2rem 4rem rgba(3, 9, 20, 0.45);
  opacity: calc(0.08 + var(--scene-progress) * 0.92);
}

.film-fragment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.62) contrast(1.14) brightness(0.74);
}

.film-fragment--figure {
  top: 9svh;
  right: 7vw;
  width: min(25vw, 29rem);
  height: 62svh;
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 10vh), 0) rotate(0.35deg);
}

.film-fragment--figure img {
  object-position: 58% center;
}

.film-fragment--detail {
  top: 19svh;
  right: min(30vw, 34rem);
  width: min(16vw, 18rem);
  height: 38svh;
  transform: translate3d(0, calc((1 - var(--scene-progress)) * -8vh), 0) rotate(-0.55deg);
}

.film-fragment--detail img {
  object-position: center;
}

.map-reticle {
  position: absolute;
  z-index: 8;
  left: 55%;
  top: 45%;
  width: min(34vw, 32rem);
  aspect-ratio: 1;
  border: 1px solid rgba(233, 242, 248, 0.26);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(0.86 + var(--scene-progress) * 0.14));
}

.map-reticle::before,
.map-reticle::after,
.map-reticle i,
.map-reticle b {
  content: "";
  position: absolute;
  display: block;
  background: rgba(233, 242, 248, 0.3);
}

.map-reticle::before {
  left: 50%;
  top: -8%;
  width: 1px;
  height: 116%;
}

.map-reticle::after {
  left: -8%;
  top: 50%;
  width: 116%;
  height: 1px;
}

.map-reticle i {
  inset: 20%;
  border: 1px solid rgba(18, 104, 255, 0.68);
  border-radius: 50%;
  background: transparent;
}

.map-reticle b {
  left: 50%;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--signal-blue);
  box-shadow: 0 0 1.4rem rgba(18, 104, 255, 0.9);
  transform: translate(-50%, -50%);
}

.telemetry {
  position: absolute;
  z-index: 10;
  left: var(--page-pad);
  bottom: 7.5svh;
  margin: 0;
  color: rgba(233, 242, 248, 0.65);
  font: 0.62rem/1.7 "Share Tech Mono", monospace;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 1rem var(--night);
}

.scene-copy--history {
  top: 39%;
}

.scene-copy--closing {
  left: 50%;
  top: 46%;
  width: min(48rem, 76vw);
  text-align: center;
  transform: translate(-50%, -50%);
}

.scene-copy--closing .scene-kicker::before {
  display: none;
}

.scene-copy--closing h2 {
  font-size: clamp(4rem, 8.2vw, 8.7rem);
}

.scene-copy--closing > p:not(.scene-kicker) {
  margin: 1.8rem 0 0;
  color: rgba(233, 242, 248, 0.68);
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.08em;
}

.closing-back {
  position: relative;
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.72rem 0;
  color: var(--white);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
}

.site-foot {
  position: absolute;
  z-index: 12;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: 1.3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(233, 242, 248, 0.48);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
}

.site-foot p {
  margin: 0;
}

a:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 4px;
}

/* Cross-page pressure aperture --------------------------------------------- */
.novel-route {
  --route-x: 72vw;
  --route-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  contain: paint;
}

.novel-route > * {
  position: absolute;
}

.novel-route__pressure {
  inset: -1px;
  background-color: var(--night);
  background-image: url("assets/novel/signal-grain.webp");
  background-repeat: repeat;
  background-size: 256px 256px;
  background-blend-mode: soft-light;
  clip-path: circle(160vmax at var(--route-x) var(--route-y));
  transform: translateZ(0);
  will-change: clip-path;
}

.novel-route__pulse {
  left: var(--route-x);
  top: var(--route-y);
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(233, 242, 248, 0.74);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2.2rem rgba(18, 104, 255, 0.34);
  will-change: transform, opacity;
}

.novel-route__pulse i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--ice);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 1.4rem rgba(18, 104, 255, 0.88);
}

html[data-novel-entry="blueprint-lock"] .novel-route,
body.is-entering-from-world .novel-route,
body.is-leaving .novel-route {
  visibility: visible;
}

html[data-novel-entry="blueprint-lock"] .scene-copy--title {
  opacity: 0;
}

body.is-entering-from-world .novel-route__pressure {
  animation: novel-pressure-reveal 460ms cubic-bezier(0.64, 0, 0.18, 1) both;
}

body.is-entering-from-world .novel-route__pulse {
  animation: novel-pressure-pulse-release 380ms ease-out both;
}

body.is-entering-from-world .scene-copy--title {
  animation: novel-pressure-copy-in 220ms ease 210ms both;
}

body.is-leaving .scene-copy--title,
body.is-leaving .site-head,
body.is-leaving .frame-counter {
  animation: novel-pressure-copy-out 160ms ease both;
}

body.is-leaving .novel-route__pressure {
  animation: novel-pressure-cover 420ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

body.is-leaving .novel-route__pulse {
  animation: novel-pressure-pulse-lock 300ms ease-out both;
}

@keyframes field-sweep {
  0% { transform: translate3d(0, 0, 0) skewX(-8deg); opacity: 0; }
  12% { opacity: 0.74; }
  78% { opacity: 0.34; }
  100% { transform: translate3d(155vw, 0, 0) skewX(-8deg); opacity: 0; }
}

@keyframes status-pulse {
  0%, 74% { opacity: 1; }
  75%, 100% { opacity: 0.22; }
}

@keyframes cue-run {
  0% { transform: translateX(-110%); }
  64%, 100% { transform: translateX(110%); }
}

@keyframes fault-slice-a {
  0%, 100% { opacity: 0; transform: translateX(0); }
  14% { opacity: 0.58; transform: translateX(var(--fault-a)); }
  42% { opacity: 0.18; transform: translateX(calc(var(--fault-a) * -0.35)); }
  70% { opacity: 0.42; transform: translateX(calc(var(--fault-a) * 0.5)); }
}

@keyframes fault-slice-b {
  0%, 100% { opacity: 0; transform: translateX(0); }
  18% { opacity: 0.5; transform: translateX(var(--fault-b)); }
  48% { opacity: 0.16; transform: translateX(calc(var(--fault-b) * -0.42)); }
  76% { opacity: 0.36; transform: translateX(calc(var(--fault-b) * 0.25)); }
}

@keyframes fault-base {
  0%, 100% { filter: saturate(0.78) contrast(1.12) brightness(0.82); transform: translateX(0); }
  18% { filter: saturate(0.58) contrast(1.2) brightness(0.94); transform: translateX(1px); }
  52% { filter: saturate(0.9) contrast(1.06) brightness(0.76); transform: translateX(-1px); }
}

@keyframes local-scan {
  0% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-10deg); }
  18% { opacity: 0.34; }
  58% { opacity: 0.18; }
  100% { opacity: 0; transform: translate3d(560%, 0, 0) skewX(-10deg); }
}

@keyframes crisis-arm-line {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.05); }
  12% { opacity: 0.5; }
  70% { opacity: 0.76; transform: translate(-50%, -50%) scaleX(0.84); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1); }
}

@keyframes novel-pressure-reveal {
  from { clip-path: circle(160vmax at var(--route-x) var(--route-y)); }
  to { clip-path: circle(0 at var(--route-x) var(--route-y)); }
}

@keyframes novel-pressure-cover {
  from { clip-path: circle(0 at var(--route-x) var(--route-y)); }
  to { clip-path: circle(160vmax at var(--route-x) var(--route-y)); }
}

@keyframes novel-pressure-pulse-release {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
  28% { opacity: 0.82; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
}

@keyframes novel-pressure-pulse-lock {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.48); }
  36% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes novel-pressure-copy-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes novel-pressure-copy-out {
  to { opacity: 0; transform: translateY(-0.35rem); }
}

@media (max-width: 900px) {
  .scene-copy {
    max-width: 82vw;
  }

  .scene-copy--right {
    max-width: 76vw;
  }

  .cover-slit {
    right: 3vw;
    width: clamp(13rem, 30vw, 20rem);
    opacity: 0.76;
  }

  .scene-copy--title {
    max-width: 62vw;
  }

  .film-fragment--figure {
    right: 4vw;
    width: 31vw;
  }

  .film-fragment--detail {
    right: 31vw;
    width: 20vw;
  }
}

@media (max-width: 760px) {
  .signal-texture {
    opacity: 0.1;
    background-size: 256px 256px, 100% 5px;
  }

  .signal-sweep {
    display: none;
  }

  .site-head {
    padding-top: 0.8rem;
  }

  .site-head p span {
    display: none;
  }

  .frame-counter {
    right: 1rem;
    bottom: 0.9rem;
    grid-template-columns: auto 1.8rem auto;
  }

  .frame-counter b {
    display: none;
  }

  .film-scene,
  .film-scene--life,
  .film-scene--trace,
  .film-scene--below,
  .film-scene--history {
    min-height: 122svh;
  }

  .film-scene--cover,
  .film-scene--closing {
    min-height: 112svh;
  }

  .scene-sticky {
    min-height: 31rem;
  }

  .scene-camera {
    inset: -2.5%;
    transform: scale(1.035);
  }


  .scene-crisis-slice,
  .scene-local-scan {
    display: none;
  }

  .scene-media[data-crisis] {
    cursor: default;
  }

  .scene-media[data-crisis]::before,
  .scene-media[data-crisis]::after {
    display: none;
  }

  .film-scene--below .scene-image,
  .film-scene--below .scene-crisis,
  .film-scene--below .scene-glitch {
    object-position: 71% 50%;
  }

  .scene-copy,
  .scene-copy--left,
  .scene-copy--right,
  .scene-copy--low,
  .scene-copy--history {
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: 13svh;
    width: auto;
    max-width: none;
    text-align: left;
    transform: none;
  }

  .scene-copy h2 {
    max-width: 94%;
    font-size: clamp(2.55rem, 12.5vw, 4.4rem);
    line-height: 1.03;
  }

  .scene-kicker {
    margin-bottom: 0.8rem;
  }

  .scene-coordinate {
    margin-top: 1rem;
    max-width: 88%;
  }

  .scene-copy--title {
    left: 1rem;
    right: 1rem;
    top: 15svh;
    bottom: auto;
    max-width: 92vw;
  }

  .scene-copy h1 {
    font-size: clamp(4.2rem, 22vw, 7rem);
  }

  .roman-title {
    margin-top: 0.9rem;
    font-size: 0.74rem;
    letter-spacing: 0.42em;
  }

  .scene-state {
    margin-top: 1.2rem;
  }

  .cover-slit {
    top: auto;
    right: -3vw;
    bottom: 5svh;
    width: 54vw;
    height: 62svh;
    opacity: 0.68;
    box-shadow: 0.7rem 0.8rem 0 rgba(18, 104, 255, 0.12), 0 1rem 3rem rgba(3, 9, 20, 0.5);
  }

  .scroll-cue {
    left: 1rem;
    bottom: 1rem;
  }

  .scroll-cue i {
    width: 2.2rem;
  }

  .film-fragment--figure {
    top: 8svh;
    right: -3vw;
    width: 52vw;
    height: 50svh;
  }

  .film-fragment--detail {
    top: 22svh;
    right: 44vw;
    width: 34vw;
    height: 26svh;
  }

  .map-reticle {
    left: 61%;
    top: 35%;
    width: 76vw;
    opacity: 0.62;
  }

  .telemetry {
    left: 1rem;
    top: 11svh;
    bottom: auto;
    font-size: 0.48rem;
    line-height: 1.55;
    letter-spacing: 0.05em;
  }

  .scene-copy--closing {
    left: 1rem;
    right: 1rem;
    top: 47%;
    bottom: auto;
    width: auto;
    text-align: left;
    transform: translateY(-50%);
  }

  .scene-copy--closing h2 {
    font-size: clamp(3.4rem, 16vw, 5.8rem);
  }

  .site-foot {
    left: 1rem;
    right: 1rem;
    bottom: 0.7rem;
    padding-right: 5rem;
    font-size: 0.48rem;
  }

  .site-foot p:last-child {
    display: none;
  }

}

@media (max-width: 390px) {
  .scene-copy h2 {
    font-size: clamp(2.35rem, 12vw, 3.6rem);
  }

  .scene-copy h1 {
    font-size: clamp(3.8rem, 21vw, 5.5rem);
  }

  .scene-coordinate {
    font-size: 0.5rem;
  }

  .cover-slit {
    height: 58svh;
  }

  .film-fragment--figure {
    height: 46svh;
  }

  .scene-copy--closing > p:not(.scene-kicker) {
    max-width: 100%;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 340px) {
  .scroll-cue {
    gap: 0.45rem;
    max-width: 56vw;
    font-size: 0.5rem;
    letter-spacing: 0.13em;
  }

  .scroll-cue i {
    display: none;
  }

  .frame-counter {
    right: 0.75rem;
    grid-template-columns: auto 1.75rem auto;
    gap: 0.4rem;
    font-size: 0.56rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .signal-sweep,
  .scene-glitch,
  .scene-crisis,
  .scene-crisis-slice,
  .scene-local-scan {
    display: none !important;
  }

  .scene-media[data-crisis] {
    cursor: default !important;
  }

  .scene-media[data-crisis]::before,
  .scene-media[data-crisis]::after {
    display: none !important;
  }

  .ascii-media-layer {
    transition: none !important;
  }

  .scene-camera {
    transform: scale(1.035) !important;
  }

  .film-fragment,
  .cover-slit {
    opacity: 1;
    transform: none;
  }
}

html.is-reduced-motion {
  scroll-behavior: auto;
}

html.is-reduced-motion *,
html.is-reduced-motion *::before,
html.is-reduced-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

html.is-reduced-motion .signal-sweep,
html.is-reduced-motion .scene-glitch,
html.is-reduced-motion .scene-crisis,
html.is-reduced-motion .scene-crisis-slice,
html.is-reduced-motion .scene-local-scan {
  display: none !important;
}

html.is-reduced-motion .scene-media[data-crisis] {
  cursor: default !important;
}

html.is-reduced-motion .scene-media[data-crisis]::before,
html.is-reduced-motion .scene-media[data-crisis]::after {
  display: none !important;
}

html.is-reduced-motion .ascii-media-layer {
  transition: none !important;
}

html.is-reduced-motion .scene-camera {
  transform: scale(1.035) !important;
}

html.is-reduced-motion .film-fragment,
html.is-reduced-motion .cover-slit {
  opacity: 1;
  transform: none;
}

/* Yuri Fano display title ------------------------------------------------- */
.scene-copy--title h1 {
  font-family: "Noto Sans SC", "Source Han Sans CN", "Microsoft YaHei UI", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.065em;
  white-space: nowrap;
  text-shadow: 0 0.08em 0.42em rgba(3, 9, 20, 0.48);
}

.novel-route.novel-typegate {
  --typegate-blue: #1268ff;
  --typegate-ice: #e9f2f8;
  color: var(--typegate-ice);
  font-family: "Share Tech Mono", monospace;
  background: transparent;
}

.novel-typegate__field,
.novel-typegate__grain {
  inset: -1px;
}

.novel-typegate__field {
  background:
    radial-gradient(circle at 64% 40%, rgba(10, 47, 102, 0.32), transparent 40%),
    #030914;
  opacity: 0;
  will-change: opacity;
}

.novel-typegate__grain {
  background: url("assets/novel/signal-grain.webp") repeat;
  background-size: 256px 256px;
  mix-blend-mode: soft-light;
  opacity: 0;
  will-change: opacity;
}

.novel-typegate__stage {
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  width: max-content;
  max-width: 96vw;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 52%;
  will-change: transform, opacity;
}

.novel-typegate__index,
.novel-typegate__roman {
  margin: 0;
  color: rgba(233, 242, 248, 0.68);
  font-size: clamp(0.56rem, 0.74vw, 0.72rem);
  line-height: 1;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform, opacity;
}

.novel-typegate__index {
  justify-self: start;
  margin: 0 0 1.2rem 0.55em;
}

.novel-typegate__roman {
  justify-self: end;
  margin: 1.05rem 0.2em 0 0;
  color: rgba(233, 242, 248, 0.48);
}

.novel-typegate__title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Yuri Brush", "Ma Shan Zheng", "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: clamp(7rem, 18vw, 16rem);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: 0.012em;
  white-space: nowrap;
  filter: drop-shadow(-0.03em 0 rgba(18, 104, 255, 0.32));
}

.novel-typegate__glyph {
  display: inline-block;
  overflow: hidden;
  padding: 0.12em 0.015em 0.22em;
}

.novel-typegate__glyph i {
  display: block;
  color: var(--typegate-ice);
  font-style: normal;
  transform-origin: 50% 72%;
  will-change: transform, opacity;
}

.novel-typegate__glyph:nth-child(1) { --glyph-index: 0; --glyph-shift: 0em; }
.novel-typegate__glyph:nth-child(2) { --glyph-index: 1; --glyph-shift: -0.025em; }
.novel-typegate__glyph:nth-child(3) { --glyph-index: 2; --glyph-shift: 0.035em; }
.novel-typegate__glyph:nth-child(4) { --glyph-index: 3; --glyph-shift: -0.012em; }

.novel-typegate__glyph i {
  transform: translateY(var(--glyph-shift));
}

html[data-novel-entry="blueprint-lock"] .novel-typegate__field,
html[data-novel-entry="blueprint-lock"] .novel-typegate__grain {
  opacity: 1;
}

html[data-novel-entry="blueprint-lock"] .novel-typegate__stage {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.46);
}

body.is-entering-from-world.is-typegate-gsap .scene-copy--title,
body.is-leaving.is-typegate-gsap .scene-copy--title,
body.is-leaving.is-typegate-gsap .site-head,
body.is-leaving.is-typegate-gsap .frame-counter {
  animation: none;
}

.novel-typegate:not(.is-gsap-route) .novel-typegate__stage {
  animation: novel-typegate-stage-reveal 590ms cubic-bezier(0.76, 0, 0.18, 1) both;
}

body.is-entering-from-world .novel-typegate:not(.is-gsap-route) .novel-typegate__field,
body.is-entering-from-world .novel-typegate:not(.is-gsap-route) .novel-typegate__grain {
  animation: novel-typegate-field-reveal 560ms ease both;
}

body.is-leaving .novel-typegate:not(.is-gsap-route) .novel-typegate__stage {
  animation: novel-typegate-stage-cover 620ms cubic-bezier(0.76, 0, 0.18, 1) both;
}

body.is-leaving .novel-typegate:not(.is-gsap-route) .novel-typegate__field,
body.is-leaving .novel-typegate:not(.is-gsap-route) .novel-typegate__grain {
  animation: novel-typegate-field-cover 620ms ease both;
}

body.is-entering-from-world:not(.is-typegate-gsap) .scene-copy--title {
  animation: novel-typegate-copy-in 220ms ease 390ms both;
}

body.is-entering-from-world .novel-typegate:not(.is-gsap-route) .novel-typegate__glyph i {
  animation: novel-typegate-glyph-out 230ms cubic-bezier(0.62, 0, 0.78, 0.2) both;
  animation-delay: calc(280ms + var(--glyph-index) * 24ms);
}

body.is-leaving .novel-typegate:not(.is-gsap-route) .novel-typegate__glyph i {
  animation: novel-typegate-glyph-in 330ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
  animation-delay: calc(130ms + var(--glyph-index) * 34ms);
}

body.is-entering-from-world .novel-typegate:not(.is-gsap-route) .novel-typegate__index,
body.is-entering-from-world .novel-typegate:not(.is-gsap-route) .novel-typegate__roman {
  animation: novel-typegate-meta-out 170ms ease 220ms both;
}

body.is-leaving .novel-typegate:not(.is-gsap-route) .novel-typegate__index,
body.is-leaving .novel-typegate:not(.is-gsap-route) .novel-typegate__roman {
  animation: novel-typegate-meta-in 210ms ease 310ms both;
}

@keyframes novel-typegate-stage-reveal {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.46); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(0.52); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.42); }
}

@keyframes novel-typegate-stage-cover {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42); }
  24% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.46); }
}

@keyframes novel-typegate-field-reveal {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes novel-typegate-field-cover {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes novel-typegate-copy-in {
  from { opacity: 0; transform: translateY(0.45rem); }
  to { opacity: 1; transform: translateY(-48%); }
}

@keyframes novel-typegate-glyph-in {
  from { opacity: 0; transform: translateY(112%); }
  to { opacity: 1; transform: translateY(var(--glyph-shift)); }
}

@keyframes novel-typegate-glyph-out {
  from { opacity: 1; transform: translateY(var(--glyph-shift)); }
  to { opacity: 0; transform: translateY(-112%); }
}

@keyframes novel-typegate-meta-in {
  from { opacity: 0; transform: translateX(-0.8rem); }
  to { opacity: 0.68; transform: translateX(0); }
}

@keyframes novel-typegate-meta-out {
  to { opacity: 0; transform: translateX(0.8rem); }
}

@media (max-width: 760px) {
  .novel-typegate__title {
    font-size: clamp(5rem, 22vw, 7rem);
  }

  .novel-typegate__index,
  .novel-typegate__roman {
    font-size: 0.52rem;
    letter-spacing: 0.32em;
  }

  .novel-typegate__index { margin-bottom: 0.8rem; }
  .novel-typegate__roman { margin-top: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .novel-typegate__stage,
  .novel-typegate__field,
  .novel-typegate__grain {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

html.is-reduced-motion .novel-typegate__stage,
html.is-reduced-motion .novel-typegate__field,
html.is-reduced-motion .novel-typegate__grain,
html.is-reduced-motion .novel-typegate__glyph i,
html.is-reduced-motion .novel-typegate__index,
html.is-reduced-motion .novel-typegate__roman {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
}

/* Blueprint route compositor handoff — 2026-07-18 ------------------------ */
html[data-novel-entry="blueprint-lock"] .signal-texture,
html[data-novel-entry="blueprint-lock"] .signal-sweep,
body.is-entering-from-world .signal-texture,
body.is-entering-from-world .signal-sweep,
body.is-leaving .signal-texture,
body.is-leaving .signal-sweep {
  visibility: hidden;
}

html.is-novel-route-busy .site-head p i,
html.is-novel-route-busy .scroll-cue i::after {
  animation-play-state: paused;
}

html[data-novel-entry="blueprint-lock"] .yuri-loader--page .yuri-loader__field,
body.is-entering-from-world .yuri-loader--page .yuri-loader__field,
body.is-leaving .yuri-loader--page .yuri-loader__field {
  clip-path: none !important;
  will-change: opacity;
}

html[data-novel-entry="blueprint-lock"] .yuri-loader--page .yuri-loader__poster,
body.is-entering-from-world .yuri-loader--page .yuri-loader__poster,
body.is-leaving .yuri-loader--page .yuri-loader__poster {
  clip-path: none !important;
}

.yuri-loader--page.is-gsap-route .yuri-loader__image {
  will-change: auto;
}

body.is-leaving .scene-camera,
body.is-leaving .ascii-media-layer {
  will-change: auto;
}

body:not(.is-entering-from-world):not(.is-leaving) .yuri-loader--page .yuri-loader__field,
body:not(.is-entering-from-world):not(.is-leaving) .yuri-loader--page .yuri-loader__grain,
body:not(.is-entering-from-world):not(.is-leaving) .yuri-loader--page .yuri-loader__poster,
body:not(.is-entering-from-world):not(.is-leaving) .yuri-loader--page .yuri-loader__image,
body:not(.is-entering-from-world):not(.is-leaving) .yuri-loader--page .yuri-loader__title,
body:not(.is-entering-from-world):not(.is-leaving) .yuri-loader--page .yuri-loader__meta,
body:not(.is-entering-from-world):not(.is-leaving) .yuri-loader--page .yuri-loader__status {
  will-change: auto;
}