:root {
  color-scheme: dark;
  --ink: #020201;
  --text: #f8ead2;
  --muted: rgba(248, 234, 210, 0.68);
  --line: rgba(248, 187, 92, 0.32);
  --gold: #f4c779;
  --ember: #ff7d25;
  --blood: #72180f;
  --panel: rgba(4, 3, 2, 0.78);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
}

button,
input {
  font: inherit;
}

button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(7, 5, 3, 0.84);
  color: var(--text);
  cursor: pointer;
}

button:hover,
button:focus-visible {
  border-color: rgba(255, 215, 146, 0.85);
  background: rgba(61, 24, 7, 0.88);
  outline: none;
}

.cinema-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
  background: #020201;
}

.cinema-shell > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.cinema-shell.cinema-focus {
  grid-template-rows: minmax(0, 1fr);
}

.stage {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: clamp(560px, 78vh, 980px);
  overflow: hidden;
  isolation: isolate;
}

.cinema-shell.cinema-focus .stage {
  min-height: 100vh;
}

.image-deck,
.scene,
#cinematic-field,
#particle-field,
.glyph-field,
.impact-flash,
.scene-pressure,
.letterbox,
.film-grain,
.vignette {
  position: absolute;
  inset: 0;
}

.image-deck {
  z-index: 0;
}

.scene {
  opacity: 0;
  background-position: center;
  background-size: cover;
  filter: contrast(1.16) saturate(0.72) brightness(0.54);
  transform: scale(1.08);
  transition:
    opacity 900ms ease,
    transform 8500ms linear,
    filter 900ms ease;
}

.scene.is-visible {
  opacity: 1;
  transform:
    scale(var(--camera-scale, 1.2))
    translate3d(var(--pan-x, 0), var(--pan-y, 0), 0);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.52) 36%, rgba(0, 0, 0, 0.28) 66%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.82), transparent 22%, transparent 58%, rgba(0, 0, 0, 0.94)),
    radial-gradient(circle at 74% 46%, transparent 0 14%, rgba(0, 0, 0, 0.52) 44%, rgba(0, 0, 0, 0.86) 78%);
}

.cinema-shell.cinema-focus .scene {
  filter: contrast(1.08) saturate(0.9) brightness(0.92);
}

.cinema-shell.cinema-focus .scene::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.1) 34%, rgba(0, 0, 0, 0.04) 66%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 24%, transparent 72%, rgba(0, 0, 0, 0.62));
}

#particle-field {
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0.95;
}

.glyph-field {
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
  background:
    linear-gradient(91deg, transparent 49.5%, rgba(255, 164, 55, 0.58), transparent 50.5%),
    repeating-radial-gradient(circle at 53% 50%, rgba(255, 186, 91, 0.14) 0 1px, transparent 2px 24px);
  animation: glyph-drift 13s ease-in-out infinite;
}

.impact-flash {
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(255, 245, 222, 0.92), rgba(255, 140, 35, 0.28) 22%, transparent 56%);
}

.cinema-shell.cut .impact-flash {
  animation: impact-cut 520ms ease-out;
}

.scene-pressure {
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 191, 106, 0.18), transparent 18%),
    linear-gradient(100deg, transparent 0 38%, rgba(255, 142, 40, 0.12), transparent 62% 100%);
  transform: scaleX(0.84);
  transition: opacity 800ms ease, transform 1200ms ease;
}

.cinema-shell.is-playing .scene-pressure {
  opacity: 0.56;
  transform: scaleX(1);
  animation: pressure-breathe 9s ease-in-out infinite;
}

.cinema-shell[data-plate="rubble"] .scene-pressure,
.cinema-shell[data-plate="refusal"] .scene-pressure,
.cinema-shell[data-plate="tunnel"] .scene-pressure {
  opacity: 0.72;
}

.letterbox {
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom, #020201 0 7.5%, transparent 7.5% 88%, #020201 88% 100%);
  transition: opacity 700ms ease;
}

.cinema-shell.is-playing .letterbox {
  opacity: 0.36;
}

.film-grain {
  z-index: 8;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 11px 11px, 3px 3px;
  animation: grain 500ms steps(2) infinite;
}

#cinematic-field {
  z-index: 1;
  pointer-events: none;
  opacity: 0.78;
  filter: contrast(1.12) saturate(0.92);
  transition:
    opacity 700ms ease,
    filter 900ms ease;
}

.vignette {
  z-index: 7;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.94), transparent 18%, transparent 65%, rgba(0, 0, 0, 0.94)),
    radial-gradient(circle at 56% 45%, transparent 0 24%, rgba(0, 0, 0, 0.42) 56%, rgba(0, 0, 0, 0.95) 100%);
}

.story-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  transform:
    translate3d(var(--shot-pan, 0), var(--shot-drift-y, 0), 0)
    rotate(var(--shot-tilt, 0deg));
  transition: transform 900ms ease;
}

.story-layer::before,
.story-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.story-layer::before {
  background:
    linear-gradient(110deg, transparent 0 32%, rgba(255, 194, 108, 0.1), transparent 58% 100%),
    radial-gradient(circle at 30% 62%, rgba(114, 24, 15, 0.32), transparent 34%),
    radial-gradient(circle at 73% 38%, rgba(255, 166, 71, 0.2), transparent 28%);
  mix-blend-mode: screen;
}

.story-layer::after {
  background:
    linear-gradient(to right, rgba(255, 198, 112, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 198, 112, 0.08) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 50% 52%, #000 0 26%, transparent 66%);
  opacity: 0.16;
  transform: perspective(760px) rotateX(62deg) translateY(18%);
}

.story-camera-mask {
  inset: -4%;
  z-index: 1;
  opacity: 0.24;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 30%, rgba(0, 0, 0, 0.2) 56%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.8));
  transform: scale(var(--shot-breathe, 1));
  mix-blend-mode: multiply;
}

.scene-projector {
  position: absolute;
  left: clamp(84px, 12vw, 190px);
  right: clamp(84px, 12vw, 190px);
  top: clamp(112px, 17vh, 190px);
  bottom: clamp(164px, 25vh, 270px);
  z-index: 2;
  pointer-events: none;
  opacity: 0.34;
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * -0.18), var(--projector-lift, 0), 0)
    perspective(1100px)
    rotateX(1.3deg)
    rotateZ(calc(var(--shot-tilt, 0deg) * 0.28));
  filter: saturate(0.92) contrast(1.08);
  transition:
    opacity 700ms ease,
    filter 700ms ease,
    transform 900ms ease;
}

.cinema-shell.is-playing .scene-projector {
  opacity: calc(0.44 + var(--incident-intensity, 0.58) * 0.28);
}

.scene-projector-frame,
.scene-projector-rift,
.scene-projector-aperture,
.scene-projector-progress {
  position: absolute;
  display: block;
  pointer-events: none;
}

.scene-projector-frame {
  inset: 0;
  overflow: hidden;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 42%, transparent);
  background-repeat: no-repeat;
  background-size: calc(110% + var(--projector-pressure, 0.58) * 18%) auto;
  background-position:
    calc(50% + var(--projector-pan, 0%))
    calc(47% - var(--projector-progress, 0) * 8%);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.72),
    inset 0 0 24px color-mix(in srgb, var(--chapter-secondary, #72180f) 28%, transparent),
    0 36px 120px rgba(0, 0, 0, 0.5);
  clip-path: polygon(1% 5%, 96% 0, 100% 82%, 82% 100%, 4% 93%, 0 25%);
  transform: scale(var(--projector-frame-scale, 1.18));
  transition:
    background-position 800ms ease,
    filter 700ms ease,
    transform 900ms ease;
}

.scene-projector-frame::before,
.scene-projector-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.scene-projector-frame::before {
  background-image:
    radial-gradient(circle at calc(18% + var(--projector-progress, 0) * 64%) 44%, rgba(255, 228, 180, 0.2), transparent 22%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 28% 70%, rgba(0, 0, 0, 0.38)),
    var(--projector-secondary-image, linear-gradient(transparent, transparent));
  background-position:
    center,
    center,
    calc(50% + var(--projector-secondary-pan, 0%)) calc(50% + var(--projector-secondary-lift, 0px));
  background-repeat: no-repeat;
  background-size:
    cover,
    cover,
    cover;
  mix-blend-mode: screen;
  opacity: 0.54;
  filter: saturate(0.9) contrast(1.12) brightness(1.08);
  transform: scale(1.02);
}

.scene-projector-frame::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 238, 204, 0.06) 0 1px, transparent 1px 8px),
    linear-gradient(to bottom, rgba(255, 225, 170, 0.12), transparent 18% 82%, rgba(0, 0, 0, 0.28));
  opacity: 0.5;
}

.scene-projector-rift {
  left: 5%;
  right: 5%;
  top: calc(14% + var(--projector-progress, 0) * 62%);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 197, 0.68), rgba(93, 217, 192, 0.34), transparent);
  box-shadow: 0 0 30px rgba(255, 195, 110, 0.26);
  transform: rotate(-1deg);
  opacity: 0.76;
}

.scene-projector-aperture {
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 20%, transparent);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  opacity: 0.74;
}

.scene-projector-progress {
  left: 6%;
  bottom: 16px;
  width: 42%;
  height: 3px;
  background: linear-gradient(90deg, rgba(112, 22, 12, 0.8), rgba(255, 210, 140, 0.74), rgba(95, 213, 190, 0.32));
  transform: scaleX(var(--projector-progress, 0));
  transform-origin: left center;
  box-shadow: 0 0 26px rgba(255, 168, 80, 0.28);
}

.scene-projector-meta {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 26px;
  z-index: 2;
  display: grid;
  gap: 5px;
  max-width: min(520px, 54%);
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 44%, transparent);
  color: rgba(255, 237, 202, 0.86);
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.88);
}

.scene-projector-meta small,
.scene-projector-meta span {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.scene-projector-meta small {
  font-size: clamp(0.56rem, 0.9vw, 0.68rem);
  color: color-mix(in srgb, var(--chapter-accent, #f4c779) 76%, #fff4d8);
}

.scene-projector-meta strong {
  max-width: 100%;
  font-size: clamp(0.9rem, 1.45vw, 1.28rem);
  line-height: 1.18;
  font-weight: 700;
}

.scene-projector-meta span {
  font-size: clamp(0.52rem, 0.82vw, 0.64rem);
  color: rgba(248, 234, 210, 0.62);
}

.cinema-shell[data-projector-kind="impact"] .scene-projector,
.cinema-shell[data-projector-kind="weight"] .scene-projector {
  opacity: calc(0.52 + var(--incident-intensity, 0.7) * 0.28);
  filter: saturate(1.12) contrast(1.2) brightness(1.04);
}

.cinema-shell[data-projector-source="caption"] .scene-projector {
  opacity: calc(0.46 + var(--projector-pressure, 0.62) * 0.28);
  z-index: 6;
}

.cinema-shell[data-projector-source="caption"] .scene-projector-meta {
  border-left-color: color-mix(in srgb, var(--chapter-accent, #f4c779) 60%, rgba(93, 217, 192, 0.4));
}

.cinema-shell[data-projector-source="caption"] .source-diorama,
.cinema-shell[data-projector-source="caption"] .source-lens-stack,
.cinema-shell[data-projector-source="caption"] .source-montage,
.cinema-shell[data-projector-source="caption"] .source-tableau {
  opacity: 0.12;
  filter: blur(0.6px) saturate(0.72);
}

.cinema-shell[data-projector-kind="body"] .scene-projector-frame {
  filter: saturate(0.96) brightness(1.02) contrast(1.08);
}

.cinema-shell[data-projector-kind="authority"] .scene-projector-frame {
  clip-path: polygon(0 0, 100% 2%, 94% 100%, 8% 94%);
  filter: sepia(0.18) saturate(0.92) contrast(1.12);
}

.cinema-shell[data-projector-kind="memory"] .scene-projector-frame {
  filter: sepia(0.16) saturate(0.9) brightness(1.08);
}

.cinema-shell[data-projector-kind="threat"] .scene-projector {
  filter: saturate(0.82) contrast(1.2) brightness(0.92);
}

.cinema-shell[data-projector-kind="threat"] .scene-projector-rift {
  background: linear-gradient(90deg, transparent, rgba(255, 236, 197, 0.42), rgba(102, 177, 202, 0.62), transparent);
}

.cinema-shell[data-projector-kind="voice"] .scene-projector-frame {
  clip-path: polygon(0 0, 78% 0, 100% 28%, 86% 100%, 0 92%);
}

.cinema-shell[data-projector-kind="passage"] .scene-projector-frame,
.cinema-shell[data-projector-kind="signal"] .scene-projector-frame {
  filter: saturate(1.08) hue-rotate(8deg) brightness(0.96);
}

.story-breath {
  right: clamp(100px, 19vw, 340px);
  bottom: clamp(148px, 24vh, 280px);
  z-index: 2;
  width: min(34vw, 460px);
  aspect-ratio: 1.2;
  opacity: 0.08;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 229, 176, 0.4), rgba(255, 126, 36, 0.18) 27%, transparent 62%);
  filter: blur(12px);
  transform: translate3d(var(--shot-drift-x, 0), var(--shot-drift-y, 0), 0) scale(var(--shot-breathe, 1));
  mix-blend-mode: screen;
}

.story-dust-curtain {
  inset: -8% -4% 12%;
  z-index: 1;
  opacity: 0.18;
  overflow: hidden;
}

.story-dust-curtain span {
  position: absolute;
  bottom: -18%;
  display: block;
  width: 2px;
  height: 76%;
  background: linear-gradient(to top, rgba(255, 215, 151, 0.26), rgba(255, 126, 42, 0.14), transparent);
  filter: blur(0.7px);
  transform: rotate(7deg);
  animation: dust-rise 8s linear infinite;
}

.story-dust-curtain span:nth-child(1) {
  left: 9%;
  animation-delay: -1s;
}

.story-dust-curtain span:nth-child(2) {
  left: 24%;
  height: 58%;
  animation-delay: -4s;
}

.story-dust-curtain span:nth-child(3) {
  left: 42%;
  height: 86%;
  animation-delay: -6s;
}

.story-dust-curtain span:nth-child(4) {
  left: 59%;
  height: 64%;
  animation-delay: -2s;
}

.story-dust-curtain span:nth-child(5) {
  left: 75%;
  height: 92%;
  animation-delay: -5s;
}

.story-dust-curtain span:nth-child(6) {
  left: 88%;
  height: 68%;
  animation-delay: -7s;
}

.story-fragment-burst {
  left: 50%;
  top: 48%;
  z-index: 3;
  width: min(48vw, 620px);
  height: min(38vh, 360px);
  opacity: 0.08;
  transform: translate3d(-50%, -50%, 0) scale(0.92);
  filter: drop-shadow(0 0 24px rgba(255, 126, 36, 0.24));
}

.story-fragment-burst span {
  position: absolute;
  display: block;
  width: clamp(32px, 5vw, 78px);
  height: clamp(18px, 2.6vw, 44px);
  background: linear-gradient(135deg, rgba(255, 212, 138, 0.34), rgba(59, 31, 18, 0.78));
  clip-path: polygon(8% 18%, 100% 0, 83% 68%, 32% 100%, 0 60%);
  transform-origin: center;
  animation: shard-drift 9s ease-in-out infinite;
}

.story-fragment-burst span:nth-child(1) {
  left: 7%;
  top: 16%;
  transform: rotate(-18deg);
}

.story-fragment-burst span:nth-child(2) {
  left: 23%;
  top: 62%;
  transform: rotate(16deg);
  animation-delay: -2s;
}

.story-fragment-burst span:nth-child(3) {
  left: 42%;
  top: 10%;
  transform: rotate(41deg);
  animation-delay: -4s;
}

.story-fragment-burst span:nth-child(4) {
  right: 24%;
  top: 52%;
  transform: rotate(-33deg);
  animation-delay: -5s;
}

.story-fragment-burst span:nth-child(5) {
  right: 9%;
  top: 18%;
  transform: rotate(22deg);
  animation-delay: -7s;
}

.story-fragment-burst span:nth-child(6) {
  left: 53%;
  bottom: 5%;
  transform: rotate(-8deg);
  animation-delay: -8s;
}

.story-cue-field {
  inset: 0;
  z-index: 4;
  opacity: 0.12;
  mix-blend-mode: screen;
}

.story-cue-field span {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(255, 216, 150, 0.56), transparent);
  height: 1px;
  transform-origin: center;
  filter: drop-shadow(0 0 16px rgba(255, 125, 37, 0.25));
}

.story-cue-field span:nth-child(1) {
  left: 10%;
  top: 28%;
  width: 34%;
  transform: rotate(19deg);
}

.story-cue-field span:nth-child(2) {
  left: 22%;
  top: 64%;
  width: 48%;
  transform: rotate(-8deg);
}

.story-cue-field span:nth-child(3) {
  right: 14%;
  top: 35%;
  width: 29%;
  transform: rotate(-32deg);
}

.story-cue-field span:nth-child(4) {
  right: 7%;
  top: 58%;
  width: 24%;
  transform: rotate(28deg);
}

.story-cue-field span:nth-child(5) {
  left: 43%;
  top: 18%;
  width: 32%;
  transform: rotate(90deg);
}

.story-cue-field span:nth-child(6) {
  left: 36%;
  bottom: 22%;
  width: 36%;
  transform: rotate(2deg);
}

.story-memory-thread {
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: min(42vw, 520px);
  opacity: 0.1;
  transform: translate3d(-50%, 0, 0);
  mix-blend-mode: screen;
}

.story-memory-thread span {
  position: absolute;
  top: 10%;
  bottom: 14%;
  display: block;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 210, 142, 0.42), transparent);
  animation: thread-waver 10s ease-in-out infinite;
}

.story-memory-thread span:nth-child(1) {
  left: 18%;
}

.story-memory-thread span:nth-child(2) {
  left: 52%;
  animation-delay: -3s;
}

.story-memory-thread span:nth-child(3) {
  right: 12%;
  animation-delay: -6s;
}

.caption-cinema {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: screen;
  transition:
    opacity 700ms ease,
    filter 700ms ease,
    transform 900ms ease;
}

.cinema-shell.is-playing .caption-cinema {
  opacity: calc(0.24 + var(--cue-intensity, 0.7) * 0.24);
}

.caption-cinema span {
  position: absolute;
  display: block;
  max-width: min(52vw, 700px);
  overflow: hidden;
  color: color-mix(in srgb, var(--chapter-accent, #f4c779) 54%, rgba(255, 238, 207, 0.5));
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: 0;
  text-shadow:
    0 0 28px color-mix(in srgb, var(--chapter-accent, #f4c779) 22%, transparent),
    0 18px 80px rgba(0, 0, 0, 0.92);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform-origin: center;
}

#caption-cinema-primary {
  left: clamp(170px, 28vw, 420px);
  top: clamp(128px, 24vh, 250px);
  font-size: clamp(2.8rem, 9vw, 8.5rem);
  opacity: 0.32;
  transform:
    translate3d(var(--caption-cinema-a, 0), calc(var(--caption-cinema-b, 0) * 0.4), 0)
    rotate(-3deg);
}

#caption-cinema-secondary {
  left: clamp(32px, 9vw, 150px);
  top: clamp(250px, 43vh, 430px);
  font-size: clamp(1.8rem, 5.4vw, 5.1rem);
  opacity: 0.24;
  transform:
    translate3d(calc(var(--caption-cinema-b, 0) * -0.7), var(--caption-cinema-a, 0), 0)
    rotate(7deg);
}

#caption-cinema-tertiary {
  right: clamp(42px, 8vw, 140px);
  top: clamp(162px, 31vh, 330px);
  max-width: min(44vw, 560px);
  font-size: clamp(1.5rem, 4.8vw, 4.6rem);
  opacity: 0.18;
  text-align: right;
  transform:
    translate3d(calc(var(--caption-cinema-a, 0) * -0.5), calc(var(--caption-cinema-b, 0) * 0.8), 0)
    rotate(-8deg);
}

#caption-cinema-pulse {
  left: 50%;
  bottom: clamp(145px, 26vh, 270px);
  max-width: min(36vw, 420px);
  color: color-mix(in srgb, var(--chapter-secondary, #72180f) 38%, rgba(255, 233, 191, 0.6));
  font-size: clamp(1.25rem, 3.2vw, 3rem);
  opacity: 0.3;
  text-align: center;
  transform:
    translate3d(-50%, calc(var(--caption-cinema-a, 0) * 0.34), 0)
    rotate(var(--caption-cinema-spin, 0deg));
}

.cinema-shell[data-cue="dust"] .caption-cinema,
.cinema-shell[data-cue="breath"] .caption-cinema,
.cinema-shell[data-cue="refusal"] .caption-cinema,
.cinema-shell[data-cue="search"] .caption-cinema {
  opacity: calc(0.3 + var(--cue-intensity, 0.75) * 0.26);
}

.cinema-shell[data-cue="archive"] .caption-cinema span,
.cinema-shell[data-cue="map"] .caption-cinema span {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.cinema-shell[data-cue="breath"] #caption-cinema-primary,
.cinema-shell[data-cue="breath"] #caption-cinema-pulse {
  animation: caption-breath 5.2s ease-in-out infinite;
}

.cinema-shell[data-cue="refusal"] #caption-cinema-primary,
.cinema-shell[data-cue="refusal"] #caption-cinema-tertiary {
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--chapter-secondary, #72180f) 54%, transparent));
}

.cinema-shell[data-cue-family="threat"] .caption-cinema {
  filter: blur(0.2px) contrast(1.25);
}

.story-chapter-sigil {
  right: clamp(44px, 8vw, 150px);
  top: clamp(92px, 16vh, 178px);
  z-index: 4;
  width: min(24vw, 310px);
  aspect-ratio: 1;
  opacity: 0.16;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 48%, transparent);
  border-radius: 50%;
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * -0.4), var(--shot-drift-y, 0), 0)
    rotate(calc(var(--shot-local, 0) * 1turn));
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--chapter-accent, #f4c779) 22%, transparent), transparent 36%),
    conic-gradient(from 18deg, transparent 0 12%, color-mix(in srgb, var(--chapter-accent, #f4c779) 38%, transparent) 13% 14%, transparent 15% 34%, color-mix(in srgb, var(--chapter-secondary, #72180f) 48%, transparent) 35% 37%, transparent 38% 100%);
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--chapter-accent, #f4c779) 16%, transparent),
    0 0 80px color-mix(in srgb, var(--chapter-secondary, #72180f) 26%, transparent);
  mix-blend-mode: screen;
}

.story-chapter-sigil span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 78%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chapter-accent, #f4c779) 70%, transparent), transparent);
  transform-origin: left center;
}

.story-chapter-sigil span:nth-child(1) {
  transform: rotate(0deg) translateX(-50%);
}

.story-chapter-sigil span:nth-child(2) {
  transform: rotate(58deg) translateX(-50%);
}

.story-chapter-sigil span:nth-child(3) {
  transform: rotate(127deg) translateX(-50%);
}

.story-phase-vault {
  inset: 0;
  z-index: 1;
  opacity: 0.18;
  overflow: hidden;
  mix-blend-mode: screen;
}

.story-phase-vault span {
  position: absolute;
  bottom: 14%;
  width: 1px;
  height: 54%;
  background: linear-gradient(to top, color-mix(in srgb, var(--chapter-accent, #f4c779) 46%, transparent), transparent);
  transform-origin: bottom center;
  animation: vault-breathe 12s ease-in-out infinite;
}

.story-phase-vault span:nth-child(1) {
  left: 16%;
  transform: rotate(-28deg);
}

.story-phase-vault span:nth-child(2) {
  left: 32%;
  height: 72%;
  transform: rotate(-13deg);
  animation-delay: -2s;
}

.story-phase-vault span:nth-child(3) {
  left: 50%;
  height: 84%;
  transform: rotate(0deg);
  animation-delay: -4s;
}

.story-phase-vault span:nth-child(4) {
  right: 32%;
  height: 72%;
  transform: rotate(13deg);
  animation-delay: -6s;
}

.story-phase-vault span:nth-child(5) {
  right: 16%;
  transform: rotate(28deg);
  animation-delay: -8s;
}

.story-cut-shutter {
  inset: 0;
  z-index: 8;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(255, 232, 184, 0.45) 49% 51%, transparent 54% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 215, 154, 0.28), transparent 42%);
  mix-blend-mode: screen;
}

.story-cut-shutter::before,
.story-cut-shutter::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.cinema-shell.cut .story-cut-shutter {
  animation: shutter-cut 460ms ease-out;
}

.cinema-shell.cinema-focus .story-cut-shutter {
  z-index: 18;
  visibility: visible;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255, 229, 184, 0.2) 48% 52%, transparent 58% 100%),
    radial-gradient(circle at var(--projector-grade-x, 50%) var(--projector-grade-y, 40%), rgba(255, 233, 188, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 24% 72%, rgba(0, 0, 0, 0.38));
  mix-blend-mode: screen;
  transform: translateZ(0);
}

.cinema-shell.cinema-focus .story-cut-shutter::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 18% 82%, rgba(0, 0, 0, 0.38)),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 232, 184, 0.07) 43px, transparent 47px);
  opacity: 0.48;
  transform: translate3d(-4%, 0, 0);
}

.cinema-shell.cinema-focus .story-cut-shutter::after {
  background:
    linear-gradient(180deg, transparent 0 46%, rgba(255, 247, 218, 0.16) 49% 51%, transparent 54% 100%),
    radial-gradient(ellipse at 50% 50%, transparent 0 44%, rgba(0, 0, 0, 0.24) 100%);
  opacity: 0.42;
  transform: scaleX(1.08);
}

.cinema-shell.cinema-focus[data-projector-mood="impact"] .story-cut-shutter {
  background:
    radial-gradient(circle at var(--projector-grade-x, 50%) var(--projector-grade-y, 40%), rgba(255, 245, 220, 0.34), rgba(255, 133, 54, 0.16) 18%, transparent 46%),
    linear-gradient(90deg, transparent 0 38%, rgba(255, 235, 196, 0.22) 48% 52%, transparent 62% 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), transparent 52%, rgba(0, 0, 0, 0.32));
}

.cinema-shell.cinema-focus[data-projector-mood="absence"] .story-cut-shutter {
  background:
    linear-gradient(90deg, transparent 0 39%, rgba(0, 0, 0, 0.34) 44% 47%, rgba(255, 226, 178, 0.2) 49% 51%, rgba(0, 0, 0, 0.34) 53% 56%, transparent 61% 100%),
    radial-gradient(ellipse at 50% 50%, rgba(139, 231, 224, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 45%, rgba(0, 0, 0, 0.42));
}

.cinema-shell.cinema-focus[data-projector-mood="archive"] .story-cut-shutter {
  background:
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(255, 236, 196, 0.09) 37px, transparent 40px),
    linear-gradient(90deg, transparent 0 18%, rgba(255, 214, 143, 0.12) 46% 54%, transparent 82% 100%),
    radial-gradient(circle at var(--projector-grade-x, 50%) var(--projector-grade-y, 40%), rgba(255, 234, 188, 0.18), transparent 38%);
}

.cinema-shell.cinema-focus[data-projector-mood="memory"] .story-cut-shutter {
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255, 206, 133, 0.16) 34%, transparent 56% 100%),
    radial-gradient(circle at var(--projector-grade-x, 50%) var(--projector-grade-y, 40%), rgba(255, 224, 174, 0.24), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 62%, rgba(0, 0, 0, 0.34));
}

.cinema-shell.cinema-focus.cut-pulse .story-cut-shutter {
  animation: movie-gate-cut 720ms cubic-bezier(0.16, 0.76, 0.24, 1) both;
}

.cinema-shell.cinema-focus.cut-pulse .story-cut-shutter::before {
  animation: movie-gate-slide 720ms cubic-bezier(0.16, 0.76, 0.24, 1) both;
}

.cinema-shell.cinema-focus.cut-pulse .story-cut-shutter::after {
  animation: movie-gate-aperture 720ms cubic-bezier(0.16, 0.76, 0.24, 1) both;
}

.story-horizon {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 16%;
  height: 28%;
  opacity: 0.48;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent 72%),
    repeating-linear-gradient(92deg, transparent 0 44px, rgba(255, 193, 100, 0.18) 45px 47px, transparent 48px 82px);
  clip-path: polygon(0 62%, 9% 55%, 15% 68%, 23% 38%, 32% 58%, 41% 31%, 49% 62%, 58% 47%, 66% 66%, 76% 37%, 86% 59%, 94% 46%, 100% 64%, 100% 100%, 0 100%);
  filter: blur(0.3px);
  animation: horizon-drift 22s ease-in-out infinite;
}

.story-map,
.story-tunnel-lines,
.story-archive,
.story-searchlight,
.story-glyph-mark,
.story-fragment-burst,
.story-dust-curtain,
.story-breath,
.story-cut-shutter,
.story-camera-mask,
.story-silhouette,
.story-rubble {
  position: absolute;
  transition:
    opacity 700ms ease,
    transform 900ms ease,
    filter 900ms ease;
}

.story-map {
  right: clamp(48px, 9vw, 160px);
  top: clamp(96px, 18vh, 190px);
  width: min(34vw, 460px);
  aspect-ratio: 1.35;
  opacity: 0.16;
  transform: translate3d(7%, -2%, 0) rotate(-2deg);
  border: 1px solid rgba(255, 212, 143, 0.28);
  background:
    radial-gradient(circle at 28% 32%, rgba(255, 206, 128, 0.65) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 66%, rgba(255, 125, 37, 0.6) 0 3px, transparent 4px),
    linear-gradient(132deg, transparent 0 42%, rgba(255, 216, 150, 0.3) 43% 44%, transparent 45% 100%),
    linear-gradient(18deg, transparent 0 52%, rgba(255, 216, 150, 0.18) 53% 54%, transparent 55% 100%),
    rgba(10, 5, 3, 0.28);
  box-shadow: 0 0 80px rgba(255, 118, 32, 0.12);
}

.story-map::before,
.story-map::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 212, 143, 0.2);
  transform: rotate(7deg);
}

.story-map::after {
  inset: 28% 16% 22% 24%;
  border-color: rgba(141, 32, 16, 0.58);
  transform: rotate(-12deg);
}

.story-map span {
  position: absolute;
  height: 1px;
  background: rgba(255, 216, 150, 0.54);
  transform-origin: left center;
}

.story-map span:nth-child(1) {
  left: 18%;
  top: 30%;
  width: 54%;
  transform: rotate(21deg);
}

.story-map span:nth-child(2) {
  left: 36%;
  top: 64%;
  width: 38%;
  transform: rotate(-31deg);
}

.story-map span:nth-child(3) {
  left: 20%;
  top: 72%;
  width: 62%;
  transform: rotate(-5deg);
}

.story-tunnel-lines {
  left: 50%;
  bottom: 11%;
  width: min(58vw, 820px);
  height: min(48vh, 470px);
  opacity: 0.08;
  transform: translate3d(-50%, 14%, 0) perspective(720px) rotateX(68deg);
  transform-origin: center bottom;
}

.story-tunnel-lines::before,
.story-tunnel-lines::after,
.story-tunnel-lines span {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 203, 124, 0.72), transparent);
  transform-origin: center bottom;
}

.story-tunnel-lines::before {
  transform: rotate(-36deg);
}

.story-tunnel-lines::after {
  transform: rotate(36deg);
}

.story-tunnel-lines span:nth-child(1) {
  transform: rotate(-18deg);
}

.story-tunnel-lines span:nth-child(2) {
  transform: rotate(18deg);
}

.story-tunnel-lines span:nth-child(3) {
  transform: rotate(-7deg);
}

.story-tunnel-lines span:nth-child(4) {
  transform: rotate(7deg);
}

.story-archive {
  left: clamp(30px, 6vw, 108px);
  top: clamp(130px, 28vh, 290px);
  width: min(35vw, 460px);
  height: min(38vh, 360px);
  opacity: 0.18;
  transform: translate3d(-8%, 4%, 0) rotate(-4deg);
}

.story-archive span {
  position: absolute;
  display: block;
  width: clamp(64px, 7vw, 112px);
  height: clamp(92px, 11vw, 156px);
  border: 1px solid rgba(255, 216, 150, 0.38);
  background:
    linear-gradient(to bottom, rgba(255, 226, 168, 0.7), rgba(127, 61, 31, 0.22)),
    repeating-linear-gradient(to bottom, transparent 0 16px, rgba(47, 18, 8, 0.28) 17px 18px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
  filter: sepia(0.3);
  animation: paper-orbit 11s ease-in-out infinite;
}

.story-archive span:nth-child(1) {
  left: 4%;
  top: 18%;
  transform: rotate(-11deg);
}

.story-archive span:nth-child(2) {
  left: 34%;
  top: 2%;
  transform: rotate(8deg);
  animation-delay: -3s;
}

.story-archive span:nth-child(3) {
  left: 58%;
  top: 31%;
  transform: rotate(17deg);
  animation-delay: -6s;
}

.story-archive span:nth-child(4) {
  left: 20%;
  top: 54%;
  transform: rotate(-4deg);
  animation-delay: -8s;
}

.story-searchlight {
  right: clamp(70px, 14vw, 260px);
  top: -8%;
  width: min(38vw, 520px);
  height: min(78vh, 720px);
  opacity: 0.12;
  transform: rotate(-17deg);
  transform-origin: top center;
  background: linear-gradient(to bottom, rgba(255, 236, 184, 0.56), rgba(255, 165, 72, 0.16) 28%, transparent 78%);
  clip-path: polygon(44% 0, 57% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: search-sweep 12s ease-in-out infinite;
}

.story-glyph-mark {
  right: clamp(44px, 11vw, 190px);
  bottom: clamp(170px, 24vh, 310px);
  width: min(26vw, 320px);
  aspect-ratio: 1;
  opacity: 0.18;
  transform: scale(0.9) rotate(0deg);
  border: 1px solid rgba(255, 199, 121, 0.52);
  border-radius: 50%;
  box-shadow:
    inset 0 0 42px rgba(255, 124, 36, 0.22),
    0 0 92px rgba(255, 91, 28, var(--story-glow, 0.24));
  animation: glyph-turn 18s linear infinite;
}

.story-glyph-mark::before,
.story-glyph-mark::after,
.story-glyph-mark span {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 151, 0.75), transparent);
  transform-origin: left center;
}

.story-glyph-mark::before {
  transform: rotate(0deg) translateX(-50%);
}

.story-glyph-mark::after {
  transform: rotate(90deg) translateX(-50%);
}

.story-glyph-mark span:nth-child(1) {
  transform: rotate(36deg) translateX(-50%);
}

.story-glyph-mark span:nth-child(2) {
  transform: rotate(134deg) translateX(-50%);
}

.story-silhouette {
  right: clamp(120px, 18vw, 320px);
  bottom: clamp(80px, 12vh, 150px);
  z-index: 2;
  width: min(19vw, 240px);
  height: min(55vh, 510px);
  opacity: 0.24;
  transform: translate3d(18%, 4%, 0) scale(0.94);
  background: radial-gradient(ellipse at 58% 42%, rgba(255, 145, 52, 0.16), transparent 54%);
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.86));
}

.story-silhouette::before {
  content: "";
  position: absolute;
  left: 26%;
  right: 21%;
  top: 22%;
  bottom: 0;
  border-radius: 43% 48% 7% 7% / 30% 34% 6% 6%;
  background:
    radial-gradient(circle at 60% 20%, rgba(255, 196, 107, 0.12), transparent 28%),
    linear-gradient(112deg, rgba(4, 2, 1, 0.98), rgba(30, 11, 5, 0.92) 42%, rgba(2, 1, 1, 0.98));
}

.story-silhouette::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 7%;
  width: 34%;
  height: 84%;
  border-right: 2px solid rgba(255, 194, 108, 0.42);
  border-radius: 54% 46% 18% 18%;
  box-shadow:
    18px 0 34px rgba(255, 136, 45, 0.28),
    -10px 0 30px rgba(255, 213, 143, 0.1);
  opacity: 0.85;
}

.story-head {
  position: absolute;
  left: 38%;
  top: 4%;
  width: 33%;
  aspect-ratio: 0.76;
  border-radius: 52% 46% 43% 48%;
  background:
    radial-gradient(circle at 58% 34%, rgba(255, 195, 110, 0.16), transparent 22%),
    linear-gradient(120deg, rgba(7, 3, 2, 0.96), rgba(44, 15, 6, 0.92));
}

.story-head::before {
  content: "";
  position: absolute;
  left: -42%;
  top: 3%;
  width: 82%;
  height: 124%;
  border-radius: 60% 12% 54% 40%;
  background: rgba(3, 2, 1, 0.96);
  transform: rotate(-11deg);
}

.story-shoulder {
  position: absolute;
  left: 17%;
  right: 9%;
  top: 36%;
  height: 24%;
  border-radius: 50% 45% 14% 11%;
  background: linear-gradient(100deg, rgba(4, 2, 1, 0.96), rgba(47, 17, 8, 0.9));
  transform: rotate(-4deg);
}

.story-scar {
  position: absolute;
  left: 55%;
  top: 28%;
  width: 2px;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(255, 138, 54, 0.78), transparent);
  box-shadow: 0 0 18px rgba(255, 112, 38, 0.6);
  transform: rotate(5deg);
}

.character-stage {
  position: absolute;
  left: clamp(46px, 8vw, 138px);
  right: clamp(48px, 8vw, 148px);
  bottom: clamp(62px, 9vh, 118px);
  height: min(58vh, 520px);
  z-index: 4;
  pointer-events: none;
  opacity: 0.72;
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * 0.42), calc(var(--shot-drift-y, 0) * 0.28), 0)
    scale(var(--cast-breath, 1));
  transform-origin: center bottom;
  transition:
    opacity 700ms ease,
    transform 900ms ease,
    filter 900ms ease;
  filter: drop-shadow(0 34px 72px rgba(0, 0, 0, 0.82));
}

.character-stage::before,
.character-stage::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 9%;
  bottom: 3%;
  height: 36%;
  opacity: 0.4;
  background:
    radial-gradient(ellipse at 48% 80%, rgba(255, 180, 86, 0.18), transparent 54%),
    linear-gradient(90deg, transparent, rgba(255, 201, 125, 0.18), transparent);
  mix-blend-mode: screen;
}

.character-stage::after {
  left: 34%;
  right: 28%;
  bottom: 6%;
  height: 86%;
  opacity: 0.18;
  border-left: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 62%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--chapter-secondary, #72180f) 56%, transparent);
  background:
    linear-gradient(90deg, transparent 0 42%, color-mix(in srgb, var(--chapter-accent, #f4c779) 20%, transparent) 48% 52%, transparent 58% 100%);
  transform: skewX(-6deg);
}

.cast-figure,
.cast-figure span {
  position: absolute;
  display: block;
}

.cast-figure {
  bottom: 0;
  width: clamp(72px, 10vw, 150px);
  height: clamp(220px, 43vh, 420px);
  opacity: 0.14;
  transform:
    translate3d(var(--cast-x, 0), var(--cast-y, 0), 0)
    scale(var(--cast-scale, 1));
  transform-origin: center bottom;
  transition:
    opacity 700ms ease,
    transform 900ms ease,
    filter 900ms ease;
  filter:
    saturate(0.76)
    drop-shadow(0 28px 50px rgba(0, 0, 0, 0.78));
}

.cast-shadow {
  left: -18%;
  right: -18%;
  bottom: -2%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.72), transparent 70%);
  transform: rotate(-4deg);
}

.cast-head {
  left: 40%;
  top: 4%;
  width: 29%;
  aspect-ratio: 0.74;
  border-radius: 52% 48% 43% 47%;
  background:
    radial-gradient(circle at 62% 32%, rgba(255, 210, 138, 0.16), transparent 24%),
    linear-gradient(116deg, rgba(8, 4, 2, 0.98), rgba(52, 20, 9, 0.94) 58%, rgba(3, 2, 1, 0.98));
  box-shadow: inset 8px -16px 26px rgba(0, 0, 0, 0.58);
}

.cast-hair {
  left: 24%;
  top: 0;
  width: 44%;
  height: 25%;
  border-radius: 62% 22% 56% 35%;
  background:
    radial-gradient(ellipse at 38% 30%, rgba(61, 25, 9, 0.64), transparent 42%),
    linear-gradient(120deg, rgba(2, 1, 1, 0.98), rgba(23, 9, 4, 0.96));
  transform: rotate(-10deg);
}

.cast-body {
  left: 27%;
  right: 20%;
  top: 22%;
  bottom: 4%;
  border-radius: 45% 48% 9% 10% / 26% 30% 8% 8%;
  background:
    radial-gradient(circle at 61% 19%, rgba(255, 194, 105, 0.12), transparent 22%),
    linear-gradient(112deg, rgba(4, 2, 1, 0.98), rgba(37, 13, 6, 0.95) 42%, rgba(7, 3, 2, 0.98));
}

.cast-arm {
  top: 35%;
  width: 10%;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(40, 15, 7, 0.95), rgba(5, 2, 1, 0.96));
  transform-origin: top center;
}

.cast-arm-left {
  left: 20%;
  transform: rotate(15deg);
}

.cast-arm-right {
  right: 18%;
  transform: rotate(-18deg);
}

.cast-scar {
  left: 55%;
  top: 28%;
  width: 2px;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(255, 138, 54, 0.86), transparent);
  box-shadow:
    0 0 18px rgba(255, 112, 38, 0.72),
    0 0 42px color-mix(in srgb, var(--chapter-secondary, #72180f) 56%, transparent);
  transform: rotate(5deg);
}

.cast-scarf {
  left: 18%;
  top: 27%;
  width: 76%;
  height: 18%;
  border-radius: 60% 38% 62% 32%;
  background:
    linear-gradient(102deg, transparent 0 9%, rgba(246, 196, 119, 0.72) 11% 48%, rgba(126, 35, 18, 0.7) 58% 100%);
  box-shadow: 0 0 26px rgba(255, 184, 92, 0.34);
  transform: rotate(-10deg);
}

.cast-name-line {
  left: 18%;
  right: 12%;
  top: 43%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 223, 166, 0.8), transparent);
  box-shadow: 0 0 18px rgba(255, 179, 80, 0.58);
  opacity: 0.54;
  transform: rotate(-7deg);
}

.cast-cap {
  left: 32%;
  top: 1%;
  width: 48%;
  height: 12%;
  border-radius: 42% 42% 22% 22%;
  background: linear-gradient(120deg, rgba(8, 10, 10, 0.98), rgba(54, 43, 27, 0.9));
}

.cast-line {
  left: 2%;
  right: -26%;
  top: 41%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 226, 169, 0.72), rgba(122, 23, 12, 0.78), transparent);
  box-shadow: 0 0 24px rgba(255, 157, 60, 0.3);
  transform: rotate(-3deg);
}

.cast-alia {
  left: 48%;
  --cast-x: -50%;
  --cast-scale: 1;
  opacity: 0.62;
}

.cast-mother {
  left: 30%;
  --cast-x: -50%;
  --cast-y: 8px;
  --cast-scale: 0.9;
}

.cast-mother .cast-body {
  background:
    radial-gradient(circle at 52% 18%, rgba(255, 214, 151, 0.15), transparent 24%),
    linear-gradient(112deg, rgba(8, 4, 2, 0.98), rgba(56, 28, 12, 0.95) 46%, rgba(4, 2, 1, 0.98));
}

.cast-brother {
  left: 66%;
  --cast-x: -50%;
  --cast-y: 18px;
  --cast-scale: 0.68;
}

.cast-brother .cast-body {
  border-radius: 48% 44% 16% 14% / 30% 30% 10% 10%;
}

.cast-authority {
  left: 78%;
  --cast-x: -50%;
  --cast-y: 10px;
  --cast-scale: 0.86;
  filter:
    saturate(0.56)
    drop-shadow(0 28px 54px rgba(0, 0, 0, 0.88));
}

.cast-authority .cast-head,
.cast-authority .cast-body {
  background:
    radial-gradient(circle at 63% 28%, rgba(255, 220, 150, 0.1), transparent 22%),
    linear-gradient(116deg, rgba(2, 2, 2, 0.98), rgba(31, 31, 27, 0.95) 55%, rgba(6, 5, 4, 0.98));
}

.cinema-shell.is-playing .character-stage {
  opacity: 0.94;
}

.cinema-shell.is-playing .cast-alia {
  opacity: 0.78;
  animation: cast-breathe 7s ease-in-out infinite;
}

.cinema-shell[data-cast-companion="mother"] .cast-mother,
.cinema-shell[data-cast-companion="family"] .cast-mother,
.cinema-shell[data-cast-focus="mother"] .cast-mother {
  opacity: 0.72;
  --cast-y: 0px;
  --cast-scale: 0.96;
}

.cinema-shell[data-cast-companion="brother"] .cast-brother,
.cinema-shell[data-cast-companion="family"] .cast-brother,
.cinema-shell[data-cast-focus="brother"] .cast-brother {
  opacity: 0.74;
  --cast-y: 2px;
  --cast-scale: 0.76;
}

.cinema-shell[data-cast-threat="true"] .cast-authority,
.cinema-shell[data-cast-focus="authority"] .cast-authority {
  opacity: 0.76;
  --cast-y: 0px;
  --cast-scale: 0.96;
}

.cinema-shell[data-cast-threat="true"] .cast-line {
  animation: cast-threat-scan 2.8s ease-in-out infinite;
}

.cinema-shell[data-cast-focus="alia"] .cast-alia,
.cinema-shell[data-cast-focus="mother"] .cast-mother,
.cinema-shell[data-cast-focus="brother"] .cast-brother,
.cinema-shell[data-cast-focus="authority"] .cast-authority {
  filter:
    saturate(0.92)
    drop-shadow(0 26px 58px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 28px color-mix(in srgb, var(--chapter-accent, #f4c779) 30%, transparent));
}

.cinema-shell[data-cast-scene="rubble"] .character-stage {
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * 0.46), calc(10px + var(--shot-drift-y, 0) * 0.34), 0)
    scale(calc(var(--cast-breath, 1) * 0.98));
}

.cinema-shell[data-cast-scene="tunnel"] .character-stage {
  left: clamp(74px, 13vw, 220px);
  right: clamp(34px, 6vw, 110px);
  filter:
    drop-shadow(0 36px 74px rgba(0, 0, 0, 0.9))
    blur(0.1px);
}

.cinema-shell[data-cast-scene="archive"] .cast-mother,
.cinema-shell[data-cast-scene="library"] .cast-mother {
  opacity: 0.78;
}

.cinema-shell[data-cast-scene="map"] .cast-authority,
.cinema-shell[data-cast-scene="search"] .cast-authority {
  left: 73%;
  opacity: 0.82;
}

.cinema-shell[data-cast-scene="chalk"] .cast-brother,
.cinema-shell[data-cast-scene="refusal"] .cast-brother {
  opacity: 0.76;
}

.cinema-shell[data-visual-incident="split-toy"] .cast-brother {
  opacity: 0.84;
  --cast-y: 0px;
  --cast-scale: 0.8;
}

.cinema-shell[data-cast-scene="refusal"] .cast-name-line,
.cinema-shell[data-visual-incident="split-toy"] .cast-name-line,
.cinema-shell[data-visual-incident="word-erased"] .cast-name-line,
.cinema-shell[data-visual-incident="name-caught"] .cast-name-line {
  opacity: 0.92;
  animation: cast-name-flicker 1.9s steps(3) infinite;
}

.cinema-shell[data-cast-scene="body"] .cast-scar,
.cinema-shell[data-chapter-motif="scar"] .cast-scar,
.cinema-shell[data-chapter-motif="speaking-scar"] .cast-scar {
  width: 3px;
  box-shadow:
    0 0 22px rgba(255, 112, 38, 0.86),
    0 0 64px color-mix(in srgb, var(--chapter-secondary, #72180f) 72%, transparent);
}

.cinema-shell[data-cast-distance="near"] .cast-alia {
  --cast-scale: 1.08;
}

.cinema-shell[data-cast-distance="far"] .cast-alia {
  --cast-scale: 0.9;
  opacity: 0.58;
}

.cinema-shell[data-chapter-motif="disappearance"] .cast-alia,
.cinema-shell[data-chapter-motif="disappearance"] .cast-brother {
  filter:
    blur(1px)
    saturate(0.48)
    drop-shadow(0 34px 70px rgba(0, 0, 0, 0.92));
}

.story-rubble {
  left: -6%;
  right: -6%;
  bottom: -2%;
  height: min(29vh, 260px);
  opacity: 0.74;
  transform: translate3d(0, 5%, 0);
  filter: drop-shadow(0 -18px 46px rgba(0, 0, 0, 0.65));
}

.story-rubble span {
  position: absolute;
  bottom: 0;
  display: block;
  background:
    linear-gradient(140deg, rgba(58, 35, 24, 0.96), rgba(8, 5, 3, 0.98)),
    repeating-linear-gradient(92deg, transparent 0 18px, rgba(255, 198, 112, 0.07) 19px 20px);
  clip-path: polygon(0 32%, 14% 9%, 23% 38%, 39% 20%, 52% 45%, 66% 16%, 75% 36%, 91% 12%, 100% 28%, 100% 100%, 0 100%);
}

.story-rubble span:nth-child(1) {
  left: 0;
  width: 36%;
  height: 82%;
}

.story-rubble span:nth-child(2) {
  left: 26%;
  width: 34%;
  height: 66%;
  transform: translateY(10%) rotate(2deg);
}

.story-rubble span:nth-child(3) {
  left: 54%;
  width: 28%;
  height: 78%;
  transform: rotate(-3deg);
}

.story-rubble span:nth-child(4) {
  right: 0;
  width: 30%;
  height: 62%;
  transform: translateY(6%) rotate(1deg);
}

.story-artifacts {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}

.story-artifacts > div {
  position: absolute;
  opacity: 0;
  transition:
    opacity 500ms ease,
    transform 700ms ease,
    filter 700ms ease;
}

.artifact-drone {
  left: 8%;
  top: 28%;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 231, 184, 0.78), transparent);
  filter: drop-shadow(0 0 12px rgba(255, 207, 122, 0.6));
  transform: rotate(-5deg) translateX(-5%);
}

.artifact-drone::before,
.artifact-drone::after {
  content: "";
  position: absolute;
  right: 12%;
  top: -18px;
  width: 72px;
  height: 36px;
  border-top: 1px solid rgba(255, 210, 142, 0.42);
  border-bottom: 1px solid rgba(255, 210, 142, 0.24);
  transform: skewX(-18deg);
}

.artifact-drone::after {
  right: 24%;
  top: 15px;
  width: 46px;
  opacity: 0.6;
}

.artifact-blast {
  left: 50%;
  top: 48%;
  width: min(44vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 230, 182, 0.5);
  background:
    radial-gradient(circle, rgba(255, 246, 221, 0.28), rgba(255, 139, 43, 0.18) 24%, transparent 62%);
  transform: translate3d(-50%, -50%, 0) scale(0.4);
  filter: blur(0.4px) drop-shadow(0 0 42px rgba(255, 132, 38, 0.42));
}

.artifact-ash {
  left: 38%;
  top: 38%;
  width: min(34vw, 420px);
  height: min(32vh, 280px);
  transform: translate3d(-8%, -4%, 0);
}

.artifact-ash span {
  position: absolute;
  display: block;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 165, 0.68), transparent);
  filter: blur(0.4px);
  animation: ash-drift 5s ease-in-out infinite;
}

.artifact-ash span:nth-child(1) {
  left: 4%;
  top: 26%;
  --ash-rotate: 18deg;
  transform: rotate(18deg);
}

.artifact-ash span:nth-child(2) {
  left: 26%;
  top: 52%;
  --ash-rotate: -7deg;
  transform: rotate(-7deg);
  animation-delay: -1.7s;
}

.artifact-ash span:nth-child(3) {
  right: 0;
  top: 72%;
  --ash-rotate: 29deg;
  transform: rotate(29deg);
  animation-delay: -3.2s;
}

.artifact-slab {
  left: 19%;
  top: 39%;
  width: min(58vw, 760px);
  height: min(18vh, 150px);
  background:
    linear-gradient(115deg, rgba(19, 12, 8, 0.72), rgba(84, 44, 26, 0.5), rgba(11, 7, 5, 0.78)),
    repeating-linear-gradient(98deg, transparent 0 42px, rgba(255, 206, 133, 0.08) 43px 45px);
  clip-path: polygon(2% 18%, 96% 0, 100% 78%, 12% 100%);
  transform: rotate(3deg) translateY(10px);
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.68),
    inset 0 0 46px rgba(255, 143, 49, 0.16);
}

.artifact-scarf {
  left: 25%;
  top: 54%;
  width: min(42vw, 520px);
  height: 88px;
  border-top: 9px solid rgba(255, 186, 94, 0.52);
  border-bottom: 2px solid rgba(120, 28, 15, 0.44);
  border-radius: 52% 24% 48% 16%;
  transform: rotate(-8deg) translateY(12px);
  filter: drop-shadow(0 0 18px rgba(255, 114, 38, 0.25));
}

.artifact-scarf::after {
  content: "";
  position: absolute;
  right: 9%;
  top: -22px;
  width: 28%;
  height: 44px;
  border-top: 2px solid rgba(255, 212, 142, 0.46);
  border-radius: 50%;
  transform: rotate(18deg);
}

.artifact-toy {
  left: 44%;
  top: 58%;
  width: min(24vw, 280px);
  height: 92px;
  transform: translate3d(-50%, 16px, 0);
}

.artifact-toy span {
  position: absolute;
  top: 23px;
  width: 48%;
  height: 46px;
  background:
    linear-gradient(135deg, rgba(226, 167, 91, 0.45), rgba(80, 40, 23, 0.72)),
    radial-gradient(circle at 70% 42%, rgba(255, 229, 166, 0.4) 0 4px, transparent 5px);
  clip-path: polygon(0 28%, 66% 0, 100% 58%, 28% 100%);
  box-shadow: inset 0 0 20px rgba(255, 214, 148, 0.16);
}

.artifact-toy span:nth-child(1) {
  left: 0;
  transform: rotate(-16deg) translateX(-8px);
}

.artifact-toy span:nth-child(2) {
  right: 0;
  transform: scaleX(-1) rotate(-12deg) translateX(-10px);
}

.artifact-voice {
  right: clamp(80px, 16vw, 260px);
  top: 42%;
  width: min(30vw, 390px);
  height: 96px;
  transform: translateY(12px);
}

.artifact-voice span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 190, 0.7), rgba(129, 24, 13, 0.44), transparent);
  filter: drop-shadow(0 0 16px rgba(255, 125, 37, 0.32));
  animation: voice-break 2.8s ease-in-out infinite;
}

.artifact-voice span:nth-child(1) {
  top: 22%;
}

.artifact-voice span:nth-child(2) {
  top: 50%;
  animation-delay: -0.8s;
}

.artifact-voice span:nth-child(3) {
  top: 78%;
  animation-delay: -1.7s;
}

.artifact-spiral,
.artifact-pulse {
  left: 50%;
  top: 50%;
  width: min(30vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0.82);
}

.artifact-spiral {
  border: 1px solid rgba(255, 216, 145, 0.44);
  background:
    conic-gradient(from 90deg, transparent 0 42%, rgba(255, 214, 144, 0.46) 45% 47%, transparent 52% 100%),
    radial-gradient(circle, transparent 0 28%, rgba(255, 126, 36, 0.12) 29% 32%, transparent 34% 100%);
  animation: artifact-turn 8s linear infinite;
}

.artifact-spiral span,
.artifact-pulse::before,
.artifact-pulse::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 204, 124, 0.26);
  border-radius: 50%;
}

.artifact-spiral span:nth-child(2) {
  inset: 34%;
}

.artifact-pulse {
  border: 1px solid rgba(255, 219, 157, 0.36);
  box-shadow:
    inset 0 0 38px rgba(255, 136, 44, 0.18),
    0 0 60px rgba(255, 136, 44, 0.18);
  animation: pulse-ring 3.8s ease-in-out infinite;
}

.artifact-pulse::before {
  inset: 26%;
}

.artifact-pulse::after {
  inset: 42%;
}

.artifact-tunnel-path {
  left: 50%;
  bottom: 17%;
  width: min(46vw, 620px);
  height: min(36vh, 360px);
  transform: translateX(-50%) perspective(620px) rotateX(62deg);
  transform-origin: center bottom;
  background:
    linear-gradient(102deg, transparent 0 48%, rgba(255, 215, 142, 0.44) 49% 51%, transparent 52% 100%),
    repeating-radial-gradient(ellipse at 50% 100%, rgba(255, 204, 124, 0.18) 0 1px, transparent 2px 36px);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 24px rgba(255, 135, 38, 0.24));
}

.artifact-blood {
  left: 47%;
  top: 63%;
  width: min(18vw, 210px);
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 55%, rgba(145, 20, 11, 0.72), rgba(93, 15, 9, 0.28) 45%, transparent 72%),
    linear-gradient(90deg, transparent, rgba(255, 139, 58, 0.26), transparent);
  transform: rotate(-8deg) translateY(8px);
  filter: drop-shadow(0 0 18px rgba(140, 20, 10, 0.42));
}

.cinema-shell[data-visual-incident="drone-pitch"] .artifact-drone,
.cinema-shell[data-visual-incident="pressure-blast"] .artifact-blast,
.cinema-shell[data-visual-incident="ash-inhale"] .artifact-ash,
.cinema-shell[data-visual-incident="chest-resistance"] .artifact-ash,
.cinema-shell[data-visual-incident="chest-resistance"] .artifact-pulse,
.cinema-shell[data-visual-incident="slab-weight"] .artifact-slab,
.cinema-shell[data-visual-incident="mother-scarf"] .artifact-scarf,
.cinema-shell[data-visual-incident="split-toy"] .artifact-toy,
.cinema-shell[data-visual-incident="lost-voice"] .artifact-voice,
.cinema-shell[data-visual-incident="dust-spiral"] .artifact-spiral,
.cinema-shell[data-visual-incident="breath-vibration"] .artifact-pulse,
.cinema-shell[data-visual-incident="ancient-signal"] .artifact-pulse,
.cinema-shell[data-visual-incident="ancient-signal"] .artifact-spiral,
.cinema-shell[data-visual-incident="tunnel-memory"] .artifact-tunnel-path,
.cinema-shell[data-visual-incident="stone-blood"] .artifact-blood,
.cinema-shell[data-visual-incident="name-caught"] .artifact-voice,
.cinema-shell[data-visual-incident="mouth-sealed"] .artifact-voice,
.cinema-shell[data-visual-incident="word-erased"] .artifact-voice {
  opacity: calc(0.44 + var(--incident-intensity, 0.72) * 0.56);
  transition: none;
}

.cinema-shell[data-visual-incident="pressure-blast"] .artifact-blast {
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.cinema-shell[data-visual-incident="ash-inhale"] .artifact-ash {
  opacity: 0.88;
  transform: translate3d(-8%, -4%, 0) scale(1.04);
}

.cinema-shell[data-visual-incident="slab-weight"] .artifact-slab {
  opacity: 0.9;
  transform: rotate(3deg) translateY(0) scale(1.03);
}

.cinema-shell[data-visual-incident="mother-scarf"] .artifact-scarf {
  opacity: 0.9;
  transform: rotate(-8deg) translateY(0) scale(1.03);
}

.cinema-shell[data-visual-incident="split-toy"] .artifact-toy {
  opacity: 0.9;
  transform: translate3d(-50%, 0, 0) scale(1.04);
}

.cinema-shell[data-visual-incident="lost-voice"] .artifact-voice,
.cinema-shell[data-visual-incident="name-caught"] .artifact-voice,
.cinema-shell[data-visual-incident="mouth-sealed"] .artifact-voice,
.cinema-shell[data-visual-incident="word-erased"] .artifact-voice {
  opacity: 0.9;
  transform: translateY(0) scale(1.03);
}

.cinema-shell[data-visual-incident="breath-vibration"] .artifact-pulse {
  opacity: 0.88;
}

.cinema-shell[data-visual-incident="dust-spiral"] .artifact-spiral,
.cinema-shell[data-visual-incident="ancient-signal"] .artifact-spiral {
  opacity: 0.88;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.cinema-shell[data-visual-incident="tunnel-memory"] .artifact-tunnel-path {
  opacity: 0.88;
  transform: translateX(-50%) perspective(620px) rotateX(62deg) translateY(-10px);
}

.cinema-shell[data-visual-incident="stone-blood"] .artifact-blood {
  opacity: 0.9;
  transform: rotate(-8deg) translateY(0) scale(1.04);
}

.source-lens-stack {
  position: absolute;
  left: clamp(70px, 10vw, 160px);
  right: clamp(70px, 10vw, 160px);
  top: clamp(128px, 20vh, 214px);
  bottom: clamp(164px, 25vh, 260px);
  z-index: 3;
  pointer-events: none;
  opacity: 0.22;
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * -0.12), var(--lens-drift, 0), 0)
    perspective(1000px)
    rotateX(1deg);
  transition:
    opacity 700ms ease,
    transform 900ms ease,
    filter 900ms ease;
}

.cinema-shell.is-playing .source-lens-stack {
  opacity: calc(0.4 + var(--incident-intensity, 0.58) * 0.32);
}

.source-lens-stack::before,
.source-lens-stack::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.source-lens-stack::before {
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 218, 160, 0.34), transparent);
  opacity: 0.72;
  transform: rotate(-2deg);
}

.source-lens-stack::after {
  left: 4%;
  right: 4%;
  top: var(--lens-scan, 50%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(95, 213, 190, 0.36), rgba(255, 238, 204, 0.48), transparent);
  opacity: 0.5;
}

.source-lens-frame {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 24%, transparent);
  background-repeat: no-repeat;
  background-size: calc(112% + var(--lens-frame-pressure, 0.6) * 12%) auto;
  background-position:
    calc(50% + var(--lens-frame-pan, 0%))
    calc(50% - var(--lens-frame-progress, 0) * 10%);
  box-shadow:
    inset 0 0 46px rgba(0, 0, 0, 0.72),
    inset 0 0 18px color-mix(in srgb, var(--chapter-secondary, #72180f) 18%, transparent),
    0 24px 90px rgba(0, 0, 0, 0.42);
  filter: saturate(0.98) brightness(0.9);
  opacity: 0.54;
  transform-origin: center;
  transition:
    opacity 500ms ease,
    transform 600ms ease,
    filter 600ms ease,
    border-color 500ms ease,
    background-position 700ms ease;
}

.source-lens-frame::before,
.source-lens-frame::after,
.source-lens-frame i,
.source-lens-frame b {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.source-lens-frame::before {
  inset: 0;
  background:
    radial-gradient(circle at calc(var(--lens-frame-progress, 0) * 100%) 36%, rgba(255, 228, 178, 0.16), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 28% 72%, rgba(0, 0, 0, 0.46));
}

.source-lens-frame::after {
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 18%, transparent);
  opacity: 0.7;
}

.source-lens-frame i {
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 229, 186, 0.5), transparent);
  transform: rotate(var(--lens-frame-tilt, 0deg));
}

.source-lens-frame b {
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 2px;
  background: linear-gradient(90deg, rgba(142, 29, 13, 0.76), rgba(255, 210, 141, 0.68), rgba(92, 206, 185, 0.34));
  opacity: 0.66;
  transform: scaleX(var(--lens-frame-progress, 0));
  transform-origin: left center;
}

.source-lens-prev {
  left: 0;
  top: 12%;
  width: 33%;
  height: 45%;
  clip-path: polygon(0 10%, 92% 0, 100% 82%, 10% 100%);
  transform: rotate(-4deg) translateX(1%);
}

.source-lens-active {
  left: 23%;
  top: 5%;
  width: 54%;
  height: 76%;
  border-color: color-mix(in srgb, var(--chapter-accent, #f4c779) 52%, transparent);
  clip-path: polygon(2% 4%, 95% 0, 100% 88%, 9% 100%, 0 28%);
  filter: saturate(1.06) brightness(1);
  opacity: 0.86;
  transform: rotate(1deg) scale(1.02);
}

.source-lens-next {
  right: 0;
  bottom: 9%;
  width: 32%;
  height: 44%;
  clip-path: polygon(9% 0, 100% 11%, 91% 100%, 0 86%);
  transform: rotate(5deg) translateX(-1%);
}

.cinema-shell[data-visual-kind="impact"] .source-lens-active,
.cinema-shell[data-visual-kind="weight"] .source-lens-active {
  filter: saturate(1.18) brightness(1.08) contrast(1.12);
  transform: rotate(1deg) scale(1.06);
}

.cinema-shell[data-visual-kind="memory"] .source-lens-active {
  filter: sepia(0.16) saturate(0.92) brightness(1.06);
}

.cinema-shell[data-visual-kind="voice"] .source-lens-active {
  clip-path: polygon(0 0, 76% 0, 100% 28%, 66% 100%, 0 92%);
}

.cinema-shell[data-visual-kind="passage"] .source-lens-active,
.cinema-shell[data-visual-kind="signal"] .source-lens-active {
  filter: saturate(1.12) brightness(0.94) hue-rotate(8deg);
}

.source-diorama {
  position: absolute;
  left: clamp(185px, 25vw, 430px);
  right: clamp(150px, 23vw, 360px);
  top: clamp(170px, 25vh, 260px);
  bottom: clamp(168px, 24vh, 246px);
  z-index: 6;
  pointer-events: none;
  opacity: 0.28;
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * 0.16), calc(var(--shot-drift-y, 0) * 0.24), 0)
    scale(0.98);
  transform-origin: center bottom;
  transition:
    opacity 700ms ease,
    transform 900ms ease,
    filter 900ms ease;
}

.cinema-shell.is-playing .source-diorama {
  opacity: calc(0.46 + var(--incident-intensity, 0.58) * 0.34);
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * 0.22), calc(var(--shot-drift-y, 0) * 0.28), 0)
    scale(1);
}

.source-diorama::before,
.source-diorama::after,
.source-diorama span,
.source-diorama i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.source-diorama::before {
  content: "";
  left: 4%;
  right: 8%;
  bottom: 8%;
  height: 28%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 206, 143, 0.24), transparent 66%),
    linear-gradient(90deg, transparent, rgba(90, 35, 16, 0.42), transparent);
  filter: blur(10px);
  opacity: 0.38;
}

.source-diorama::after {
  content: "";
  left: 12%;
  right: 4%;
  top: 44%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 178, 0.6), transparent);
  opacity: 0.28;
  transform: rotate(-5deg);
}

.diorama-backlight {
  inset: 0 4% 4% 0;
  border: 1px solid rgba(255, 203, 126, 0.14);
  background:
    radial-gradient(circle at 58% 34%, rgba(255, 193, 105, 0.2), transparent 28%),
    radial-gradient(circle at 32% 62%, rgba(122, 28, 14, 0.18), transparent 32%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.7);
  clip-path: polygon(8% 6%, 94% 0, 100% 78%, 78% 100%, 0 90%);
  opacity: 0.52;
}

.diorama-ground {
  left: 8%;
  right: 8%;
  bottom: 9%;
  height: 12%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent, rgba(40, 17, 8, 0.8), rgba(118, 47, 20, 0.42), transparent),
    repeating-linear-gradient(166deg, transparent 0 24px, rgba(255, 204, 137, 0.1) 25px 26px);
  transform: perspective(520px) rotateX(62deg);
  transform-origin: center bottom;
  opacity: 0.68;
}

.diorama-alia {
  left: 42%;
  bottom: 15%;
  width: min(15vw, 170px);
  min-width: 92px;
  height: min(31vh, 270px);
  opacity: 0.72;
  transform:
    translate3d(-50%, calc(var(--shot-breathe, 1) * -1px), 0)
    rotate(-3deg)
    scale(var(--story-pulse, 1));
  transform-origin: center bottom;
  filter:
    drop-shadow(0 22px 44px rgba(0, 0, 0, 0.86))
    drop-shadow(0 0 22px rgba(255, 184, 94, 0.12));
}

.diorama-alia i {
  background: rgba(4, 2, 1, 0.94);
}

.diorama-hair {
  left: 38%;
  top: 0;
  width: 34%;
  height: 17%;
  border-radius: 48% 52% 40% 46%;
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 203, 135, 0.12), transparent 30%),
    rgba(2, 1, 1, 0.98) !important;
  transform: rotate(-6deg);
}

.diorama-head {
  left: 41%;
  top: 7%;
  width: 28%;
  aspect-ratio: 0.78;
  border-radius: 50% 46% 45% 49%;
  box-shadow:
    inset -5px 0 0 rgba(255, 206, 143, 0.08),
    0 0 28px rgba(255, 162, 69, 0.12);
}

.diorama-body {
  left: 31%;
  top: 22%;
  width: 43%;
  height: 68%;
  border-radius: 42% 46% 10% 12% / 24% 32% 10% 12%;
  background:
    linear-gradient(95deg, rgba(7, 3, 1, 0.98), rgba(75, 45, 27, 0.62), rgba(3, 2, 1, 0.96)) !important;
  border-right: 1px solid rgba(255, 209, 142, 0.18);
}

.diorama-arm {
  left: 17%;
  top: 48%;
  width: 58%;
  height: 8%;
  border-radius: 999px;
  transform: rotate(-16deg);
  background: linear-gradient(90deg, rgba(8, 4, 2, 0.92), rgba(95, 50, 26, 0.58), transparent) !important;
}

.diorama-hand {
  left: 10%;
  top: 57%;
  width: 20%;
  height: 6%;
  border-radius: 50%;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, rgba(113, 33, 18, 0.64), rgba(255, 196, 130, 0.2)) !important;
  opacity: 0.48;
}

.diorama-chest {
  left: 40%;
  top: 35%;
  width: 30%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 220, 169, 0.38);
  border-radius: 50%;
  background: transparent !important;
  box-shadow: 0 0 22px rgba(255, 196, 114, 0.18);
  opacity: 0.16;
  transform: scale(var(--shot-breathe, 1));
}

.diorama-drone {
  left: 2%;
  top: 9%;
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 226, 221, 0.74), rgba(255, 223, 174, 0.42), transparent);
  opacity: 0;
  transform: rotate(-8deg);
  filter: drop-shadow(0 0 18px rgba(142, 230, 221, 0.42));
}

.diorama-blast {
  left: 43%;
  top: 42%;
  width: 28%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 235, 193, 0.5);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.55);
  box-shadow:
    0 0 36px rgba(255, 106, 32, 0.28),
    inset 0 0 30px rgba(255, 210, 154, 0.12);
}

.diorama-dust {
  inset: 10% 4% 18% 2%;
  opacity: 0.2;
}

.diorama-dust i {
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 223, 170, 0.38), transparent);
  filter: blur(0.3px);
}

.diorama-dust i:nth-child(1) {
  left: 5%;
  top: 28%;
  transform: rotate(14deg);
}

.diorama-dust i:nth-child(2) {
  left: 16%;
  top: 42%;
  width: 56%;
  transform: rotate(-9deg);
}

.diorama-dust i:nth-child(3) {
  right: 10%;
  top: 58%;
  width: 38%;
  transform: rotate(5deg);
}

.diorama-dust i:nth-child(4) {
  left: 24%;
  top: 70%;
  width: 48%;
  transform: rotate(-17deg);
}

.diorama-dust i:nth-child(5) {
  right: 18%;
  top: 21%;
  width: 26%;
  transform: rotate(22deg);
}

.diorama-slab {
  left: 16%;
  top: 42%;
  width: 72%;
  height: 18%;
  opacity: 0.18;
  background:
    linear-gradient(105deg, rgba(7, 4, 2, 0.94), rgba(118, 65, 32, 0.56), rgba(8, 5, 3, 0.96));
  border-top: 1px solid rgba(255, 216, 157, 0.26);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.64);
  clip-path: polygon(4% 18%, 88% 0, 100% 58%, 16% 100%);
  transform: rotate(-7deg);
}

.diorama-slab i:nth-child(1) {
  left: 12%;
  right: 16%;
  top: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 219, 162, 0.32), transparent);
}

.diorama-slab i:nth-child(2) {
  left: 62%;
  top: 2%;
  width: 1px;
  height: 88%;
  background: linear-gradient(to bottom, rgba(255, 219, 162, 0.26), transparent);
  transform: rotate(15deg);
}

.diorama-scarf {
  left: 49%;
  top: 32%;
  width: 28%;
  height: 12%;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(80, 8, 5, 0.9), rgba(153, 35, 18, 0.72), rgba(255, 188, 116, 0.24));
  border-radius: 70% 10% 70% 20%;
  transform: rotate(-16deg);
  filter: drop-shadow(0 0 18px rgba(144, 25, 12, 0.42));
}

.diorama-toy {
  left: 24%;
  bottom: 17%;
  width: 24%;
  height: 10%;
  opacity: 0;
}

.diorama-toy i {
  top: 26%;
  width: 52%;
  height: 28%;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(69, 29, 12, 0.9), rgba(199, 143, 80, 0.44));
}

.diorama-toy i:nth-child(1) {
  left: 0;
  transform: rotate(-18deg);
}

.diorama-toy i:nth-child(2) {
  right: 0;
  transform: rotate(17deg);
}

.diorama-voice {
  right: 8%;
  top: 37%;
  width: 42%;
  height: 32%;
  opacity: 0;
}

.diorama-voice i {
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 195, 0.76), rgba(118, 18, 10, 0.7), transparent);
  filter: drop-shadow(0 0 14px rgba(255, 142, 64, 0.28));
}

.diorama-voice i:nth-child(1) {
  top: 18%;
  transform: rotate(-4deg);
}

.diorama-voice i:nth-child(2) {
  top: 38%;
  width: 80%;
  transform: rotate(3deg);
}

.diorama-voice i:nth-child(3) {
  top: 58%;
  width: 92%;
  transform: rotate(-9deg);
}

.diorama-voice i:nth-child(4) {
  top: 78%;
  width: 62%;
  transform: rotate(11deg);
}

.diorama-tunnel {
  left: 9%;
  right: 4%;
  bottom: 4%;
  height: 50%;
  opacity: 0.08;
  transform: perspective(620px) rotateX(65deg);
  transform-origin: center bottom;
}

.diorama-tunnel i {
  bottom: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to top, rgba(93, 214, 191, 0.44), transparent);
}

.diorama-tunnel i:nth-child(1) {
  left: 28%;
  transform: rotate(-22deg);
}

.diorama-tunnel i:nth-child(2) {
  left: 50%;
}

.diorama-tunnel i:nth-child(3) {
  right: 28%;
  transform: rotate(22deg);
}

.diorama-contact {
  left: 21%;
  top: 58%;
  width: 16%;
  height: 7%;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(151, 13, 7, 0.76), rgba(255, 187, 116, 0.16), transparent 68%);
  filter: drop-shadow(0 0 18px rgba(150, 16, 8, 0.44));
  transform: rotate(-12deg);
}

.cinema-shell[data-visual-kind="threat"] .diorama-drone,
.cinema-shell[data-visual-incident="drone-pitch"] .diorama-drone {
  opacity: 0.92;
}

.cinema-shell[data-visual-kind="impact"] .diorama-blast,
.cinema-shell[data-visual-incident="pressure-blast"] .diorama-blast {
  opacity: 0.9;
  transform: translate3d(-50%, -50%, 0) scale(1.08);
}

.cinema-shell[data-visual-kind="impact"] .diorama-dust,
.cinema-shell[data-visual-kind="body"] .diorama-dust,
.cinema-shell[data-visual-incident="ash-inhale"] .diorama-dust,
.cinema-shell[data-visual-incident="chest-resistance"] .diorama-dust {
  opacity: 0.82;
}

.cinema-shell[data-visual-kind="body"] .diorama-alia,
.cinema-shell[data-visual-kind="signal"] .diorama-alia,
.cinema-shell[data-visual-kind="contact"] .diorama-alia {
  opacity: 0.9;
}

.cinema-shell[data-visual-kind="body"] .diorama-chest,
.cinema-shell[data-visual-incident="chest-resistance"] .diorama-chest {
  opacity: 0.95;
}

.cinema-shell[data-visual-kind="weight"] .diorama-slab,
.cinema-shell[data-visual-incident="slab-weight"] .diorama-slab {
  opacity: 0.88;
  transform: rotate(-7deg) translateY(9px);
}

.cinema-shell[data-visual-kind="memory"] .diorama-scarf,
.cinema-shell[data-visual-incident="mother-scarf"] .diorama-scarf {
  opacity: 0.94;
}

.cinema-shell[data-visual-incident="split-toy"] .diorama-toy {
  opacity: 0.94;
}

.cinema-shell[data-visual-kind="voice"] .diorama-voice,
.cinema-shell[data-visual-incident="lost-voice"] .diorama-voice,
.cinema-shell[data-visual-incident="name-caught"] .diorama-voice,
.cinema-shell[data-visual-incident="mouth-sealed"] .diorama-voice,
.cinema-shell[data-visual-incident="word-erased"] .diorama-voice {
  opacity: 0.96;
}

.cinema-shell[data-visual-incident="mouth-sealed"] .diorama-voice {
  transform: scaleX(0.68);
  transform-origin: right center;
}

.cinema-shell[data-visual-incident="word-erased"] .diorama-voice {
  clip-path: polygon(0 0, 74% 0, 42% 100%, 0 100%);
}

.cinema-shell[data-visual-kind="signal"] .diorama-tunnel,
.cinema-shell[data-visual-kind="passage"] .diorama-tunnel,
.cinema-shell[data-visual-incident="dust-spiral"] .diorama-tunnel,
.cinema-shell[data-visual-incident="breath-vibration"] .diorama-tunnel,
.cinema-shell[data-visual-incident="ancient-signal"] .diorama-tunnel,
.cinema-shell[data-visual-incident="tunnel-memory"] .diorama-tunnel {
  opacity: 0.78;
}

.cinema-shell[data-visual-kind="contact"] .diorama-contact,
.cinema-shell[data-visual-incident="stone-blood"] .diorama-contact {
  opacity: 0.95;
}

.source-tableau {
  position: absolute;
  left: clamp(44px, 8vw, 150px);
  right: clamp(44px, 8vw, 150px);
  top: clamp(118px, 19vh, 220px);
  bottom: clamp(146px, 24vh, 260px);
  z-index: 4;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * 0.18), calc(var(--shot-drift-y, 0) * 0.22), 0)
    scale(0.98);
  transition:
    opacity 700ms ease,
    transform 900ms ease,
    filter 900ms ease;
}

.cinema-shell.is-playing .source-tableau {
  opacity: calc(0.28 + var(--incident-intensity, 0.5) * 0.48);
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * 0.24), calc(var(--shot-drift-y, 0) * 0.24), 0)
    scale(1);
}

.tableau-frame,
.tableau-sky,
.tableau-room,
.tableau-figure,
.tableau-object,
.tableau-voice,
.tableau-path {
  position: absolute;
  inset: 0;
}

.tableau-frame {
  opacity: 0.58;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 18%, transparent);
  background:
    radial-gradient(circle at var(--cue-scan, 50%) 46%, color-mix(in srgb, var(--chapter-accent, #f4c779) 10%, transparent), transparent 28%),
    linear-gradient(112deg, transparent 0 42%, color-mix(in srgb, var(--chapter-secondary, #72180f) 18%, transparent) 43% 45%, transparent 46% 100%),
    rgba(2, 1, 1, 0.06);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.72),
    inset 0 0 48px color-mix(in srgb, var(--chapter-accent, #f4c779) 7%, transparent);
  clip-path: polygon(0 8%, 88% 0, 100% 22%, 96% 100%, 10% 92%);
}

.tableau-frame::before,
.tableau-frame::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chapter-accent, #f4c779) 42%, transparent), transparent);
}

.tableau-frame::before {
  top: 28%;
  transform: rotate(-5deg);
}

.tableau-frame::after {
  bottom: 24%;
  transform: rotate(4deg);
}

.tableau-sky {
  opacity: 0.2;
}

.tableau-sky span {
  position: absolute;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 231, 184, 0.78), transparent);
  filter: drop-shadow(0 0 18px rgba(255, 199, 105, 0.34));
  transform-origin: center;
}

.tableau-sky span:nth-child(1) {
  left: 4%;
  top: 16%;
  width: 86%;
  transform: rotate(-6deg);
}

.tableau-sky span:nth-child(2) {
  left: 12%;
  top: 24%;
  width: 48%;
  transform: rotate(8deg);
}

.tableau-sky span:nth-child(3) {
  right: 9%;
  top: 31%;
  width: 28%;
  transform: rotate(-24deg);
}

.tableau-sky span:nth-child(4) {
  left: 35%;
  top: 11%;
  width: 1px;
  height: 34%;
  transform: rotate(12deg);
}

.tableau-room {
  opacity: 0.3;
  transform: perspective(700px) rotateX(61deg) translateY(10%);
  transform-origin: center bottom;
}

.tableau-room span {
  position: absolute;
  bottom: 0;
  display: block;
  width: 1px;
  height: 88%;
  background: linear-gradient(to top, color-mix(in srgb, var(--chapter-accent, #f4c779) 44%, transparent), transparent);
  transform-origin: center bottom;
}

.tableau-room span:nth-child(1) {
  left: 22%;
  transform: rotate(-34deg);
}

.tableau-room span:nth-child(2) {
  left: 38%;
  transform: rotate(-13deg);
}

.tableau-room span:nth-child(3) {
  left: 50%;
  transform: rotate(0deg);
}

.tableau-room span:nth-child(4) {
  right: 38%;
  transform: rotate(13deg);
}

.tableau-room span:nth-child(5) {
  right: 22%;
  transform: rotate(34deg);
}

.tableau-figure {
  left: 58%;
  top: 26%;
  width: min(16vw, 210px);
  height: min(38vh, 360px);
  opacity: 0.46;
  transform: translate3d(-50%, 0, 0) scale(var(--story-pulse, 1));
  filter: drop-shadow(0 24px 70px rgba(0, 0, 0, 0.9));
}

.tableau-head,
.tableau-body,
.tableau-chest,
.tableau-hand {
  position: absolute;
  display: block;
}

.tableau-head {
  left: 42%;
  top: 0;
  width: 28%;
  aspect-ratio: 0.78;
  border-radius: 50% 46% 44% 48%;
  background:
    radial-gradient(circle at 57% 35%, rgba(255, 197, 112, 0.16), transparent 26%),
    rgba(4, 2, 1, 0.9);
  box-shadow: 0 0 34px rgba(255, 151, 49, 0.12);
}

.tableau-body {
  left: 31%;
  right: 16%;
  top: 18%;
  bottom: 0;
  border-radius: 46% 46% 8% 8% / 28% 35% 8% 8%;
  background:
    linear-gradient(108deg, rgba(4, 2, 1, 0.96), rgba(46, 16, 7, 0.7), rgba(2, 1, 1, 0.94));
  border-right: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 26%, transparent);
}

.tableau-chest {
  left: 40%;
  top: 28%;
  width: 44%;
  aspect-ratio: 1.22;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 42%, transparent);
  border-radius: 50%;
  opacity: 0.42;
  transform: scale(var(--shot-breathe, 1));
}

.tableau-hand {
  left: 8%;
  bottom: 10%;
  width: 46%;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(133, 24, 12, 0.38), rgba(255, 157, 70, 0.24), transparent);
  opacity: 0.08;
  transform: rotate(-11deg);
}

.tableau-object {
  opacity: 0.08;
}

.tableau-object span {
  position: absolute;
  display: block;
  filter: drop-shadow(0 0 18px rgba(255, 137, 39, 0.28));
}

.tableau-object span:nth-child(1) {
  left: 21%;
  top: 52%;
  width: min(34vw, 410px);
  height: 36px;
  border-top: 7px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 52%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--chapter-secondary, #72180f) 58%, transparent);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.tableau-object span:nth-child(2) {
  left: 41%;
  top: 58%;
  width: min(13vw, 150px);
  height: 54px;
  background:
    linear-gradient(135deg, rgba(226, 167, 91, 0.36), rgba(62, 30, 18, 0.68));
  clip-path: polygon(0 22%, 62% 0, 100% 56%, 29% 100%);
  transform: rotate(-13deg);
}

.tableau-object span:nth-child(3) {
  left: 18%;
  top: 34%;
  width: min(50vw, 680px);
  height: min(13vh, 116px);
  background:
    linear-gradient(118deg, rgba(16, 10, 7, 0.72), rgba(98, 50, 28, 0.34), rgba(8, 5, 3, 0.84));
  clip-path: polygon(2% 21%, 96% 0, 100% 78%, 12% 100%);
  box-shadow: inset 0 0 38px rgba(255, 132, 40, 0.1);
  transform: rotate(3deg);
}

.tableau-voice {
  opacity: 0.16;
}

.tableau-voice span {
  position: absolute;
  left: 28%;
  width: 44%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 195, 0.8), color-mix(in srgb, var(--chapter-secondary, #72180f) 54%, transparent), transparent);
  filter: drop-shadow(0 0 18px rgba(255, 120, 34, 0.32));
  transform-origin: center;
  animation: voice-break 3.2s ease-in-out infinite;
}

.tableau-voice span:nth-child(1) {
  top: 38%;
}

.tableau-voice span:nth-child(2) {
  top: 47%;
  animation-delay: -0.6s;
}

.tableau-voice span:nth-child(3) {
  top: 56%;
  animation-delay: -1.3s;
}

.tableau-voice span:nth-child(4) {
  top: 65%;
  animation-delay: -2s;
}

.tableau-path {
  opacity: 0.12;
  transform: perspective(650px) rotateX(64deg);
  transform-origin: center bottom;
}

.tableau-path span {
  position: absolute;
  bottom: 0;
  display: block;
  background: linear-gradient(to top, color-mix(in srgb, var(--chapter-accent, #f4c779) 48%, transparent), transparent);
}

.tableau-path span:nth-child(1) {
  left: 49%;
  width: 1px;
  height: 92%;
}

.tableau-path span:nth-child(2) {
  left: 34%;
  width: 1px;
  height: 78%;
  transform: rotate(-21deg);
}

.tableau-path span:nth-child(3) {
  right: 34%;
  width: 1px;
  height: 78%;
  transform: rotate(21deg);
}

.cinema-shell[data-visual-kind="threat"] .source-tableau,
.cinema-shell[data-visual-kind="impact"] .source-tableau,
.cinema-shell[data-visual-kind="body"] .source-tableau,
.cinema-shell[data-visual-kind="weight"] .source-tableau,
.cinema-shell[data-visual-kind="memory"] .source-tableau,
.cinema-shell[data-visual-kind="voice"] .source-tableau,
.cinema-shell[data-visual-kind="signal"] .source-tableau,
.cinema-shell[data-visual-kind="passage"] .source-tableau,
.cinema-shell[data-visual-kind="contact"] .source-tableau {
  opacity: calc(0.42 + var(--incident-intensity, 0.72) * 0.42);
}

.cinema-shell[data-visual-kind="threat"] .tableau-sky,
.cinema-shell[data-visual-incident="drone-pitch"] .tableau-sky {
  opacity: 0.94;
  animation: tableau-alert 3.2s ease-in-out infinite;
}

.cinema-shell[data-visual-kind="impact"] .tableau-frame,
.cinema-shell[data-visual-incident="pressure-blast"] .tableau-frame {
  opacity: 0.98;
  filter: brightness(1.36);
  transform: scale(1.03);
}

.cinema-shell[data-visual-kind="impact"] .tableau-room,
.cinema-shell[data-visual-incident="pressure-blast"] .tableau-room {
  opacity: 0.88;
  animation: tableau-impact 1.4s ease-in-out infinite;
}

.cinema-shell[data-visual-kind="body"] .tableau-figure,
.cinema-shell[data-visual-kind="signal"] .tableau-figure {
  opacity: 0.9;
}

.cinema-shell[data-visual-kind="body"] .tableau-chest,
.cinema-shell[data-visual-kind="signal"] .tableau-chest {
  opacity: 0.96;
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--chapter-accent, #f4c779) 18%, transparent),
    0 0 38px color-mix(in srgb, var(--chapter-accent, #f4c779) 22%, transparent);
}

.cinema-shell[data-visual-kind="weight"] .tableau-object,
.cinema-shell[data-visual-incident="slab-weight"] .tableau-object {
  opacity: 0.92;
}

.cinema-shell[data-visual-incident="slab-weight"] .tableau-object span:nth-child(1),
.cinema-shell[data-visual-incident="slab-weight"] .tableau-object span:nth-child(2) {
  opacity: 0.08;
}

.cinema-shell[data-visual-kind="memory"] .tableau-object {
  opacity: 0.82;
}

.cinema-shell[data-visual-incident="mother-scarf"] .tableau-object span:nth-child(2),
.cinema-shell[data-visual-incident="mother-scarf"] .tableau-object span:nth-child(3) {
  opacity: 0.08;
}

.cinema-shell[data-visual-incident="split-toy"] .tableau-object span:nth-child(1),
.cinema-shell[data-visual-incident="split-toy"] .tableau-object span:nth-child(3) {
  opacity: 0.08;
}

.cinema-shell[data-visual-kind="voice"] .tableau-voice,
.cinema-shell[data-visual-incident="lost-voice"] .tableau-voice,
.cinema-shell[data-visual-incident="name-caught"] .tableau-voice,
.cinema-shell[data-visual-incident="mouth-sealed"] .tableau-voice,
.cinema-shell[data-visual-incident="word-erased"] .tableau-voice {
  opacity: 0.96;
}

.cinema-shell[data-visual-incident="mouth-sealed"] .tableau-voice {
  transform: scaleX(0.72);
  filter: blur(0.2px) brightness(0.9);
}

.cinema-shell[data-visual-incident="word-erased"] .tableau-voice {
  clip-path: polygon(0 0, 73% 0, 42% 100%, 0 100%);
}

.cinema-shell[data-visual-kind="signal"] .tableau-frame {
  border-radius: 50%;
  clip-path: none;
}

.cinema-shell[data-visual-kind="signal"] .tableau-path,
.cinema-shell[data-visual-kind="passage"] .tableau-path,
.cinema-shell[data-visual-incident="tunnel-memory"] .tableau-path {
  opacity: 0.9;
}

.cinema-shell[data-visual-kind="contact"] .tableau-hand,
.cinema-shell[data-visual-incident="stone-blood"] .tableau-hand {
  opacity: 0.96;
  box-shadow: 0 0 26px rgba(145, 20, 11, 0.38);
}

.cinema-shell[data-visual-incident="ancient-signal"] .tableau-frame {
  transform: rotate(8deg) scale(0.92);
  border-radius: 50%;
  clip-path: none;
}

.cinema-shell[data-visual-incident="tunnel-memory"] .tableau-figure,
.cinema-shell[data-visual-kind="passage"] .tableau-figure {
  opacity: 0.32;
  transform: translate3d(-50%, 6%, 0) scale(0.82);
}

.caption-tableau {
  position: absolute;
  left: clamp(42px, 8vw, 150px);
  right: clamp(42px, 8vw, 150px);
  top: clamp(112px, 18vh, 208px);
  bottom: clamp(142px, 23vh, 248px);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * -0.12), calc(var(--shot-drift-y, 0) * 0.18), 0)
    scale(0.98);
  transition:
    opacity 700ms ease,
    transform 900ms ease,
    filter 900ms ease;
}

.caption-tableau > div,
.caption-tableau span {
  position: absolute;
  display: block;
}

.caption-tableau > div {
  opacity: 0.08;
  transition:
    opacity 600ms ease,
    transform 850ms ease,
    filter 850ms ease;
}

.cinema-shell[data-projector-source="caption"] .caption-tableau {
  opacity: calc(0.34 + var(--incident-intensity, 0.58) * 0.48);
  z-index: 7;
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * -0.18), calc(var(--shot-drift-y, 0) * 0.22), 0)
    scale(1);
}

.caption-tableau-rubble {
  left: 4%;
  right: 5%;
  bottom: 0;
  height: 42%;
  transform: translateY(12px);
}

.caption-tableau-rubble span {
  bottom: 0;
  background:
    linear-gradient(140deg, rgba(76, 43, 25, 0.76), rgba(9, 5, 3, 0.92)),
    repeating-linear-gradient(96deg, transparent 0 34px, rgba(255, 207, 131, 0.11) 35px 37px);
  clip-path: polygon(0 48%, 12% 20%, 20% 54%, 33% 18%, 47% 62%, 61% 23%, 74% 55%, 88% 18%, 100% 43%, 100% 100%, 0 100%);
}

.caption-tableau-rubble span:nth-child(1) {
  left: 0;
  width: 48%;
  height: 58%;
}

.caption-tableau-rubble span:nth-child(2) {
  left: 31%;
  width: 40%;
  height: 82%;
  opacity: 0.76;
}

.caption-tableau-rubble span:nth-child(3) {
  right: 0;
  width: 46%;
  height: 66%;
}

.caption-tableau-map {
  right: clamp(28px, 6vw, 104px);
  top: 7%;
  width: min(36vw, 460px);
  height: min(36vh, 320px);
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 36%, transparent);
  background:
    radial-gradient(circle at 25% 34%, rgba(255, 213, 142, 0.65) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 62%, rgba(128, 23, 12, 0.76) 0 4px, transparent 5px),
    linear-gradient(118deg, transparent 0 48%, rgba(255, 219, 154, 0.32) 49% 50%, transparent 51% 100%),
    rgba(8, 4, 2, 0.18);
  box-shadow: 0 0 54px rgba(255, 135, 44, 0.12);
  transform: rotate(-2deg) translateY(-8px);
}

.caption-tableau-map span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 169, 0.78), rgba(125, 24, 12, 0.66), transparent);
  transform-origin: left center;
}

.caption-tableau-map span:nth-child(1) {
  left: 12%;
  top: 26%;
  width: 72%;
  transform: rotate(18deg);
}

.caption-tableau-map span:nth-child(2) {
  left: 18%;
  top: 62%;
  width: 62%;
  transform: rotate(-11deg);
}

.caption-tableau-map span:nth-child(3) {
  left: 38%;
  top: 12%;
  width: 1px;
  height: 74%;
  background: linear-gradient(to bottom, transparent, rgba(255, 226, 169, 0.68), transparent);
  transform: rotate(7deg);
}

.caption-tableau-map span:nth-child(4) {
  left: 55%;
  top: 18%;
  width: 1px;
  height: 66%;
  background: linear-gradient(to bottom, transparent, rgba(132, 25, 13, 0.76), transparent);
  transform: rotate(-13deg);
}

.caption-tableau-library {
  left: clamp(24px, 5vw, 96px);
  top: 10%;
  width: min(34vw, 420px);
  height: min(42vh, 380px);
  transform: rotate(-2deg) translateY(8px);
}

.caption-tableau-library::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-left: 1px solid rgba(255, 220, 155, 0.34);
  border-right: 1px solid rgba(255, 220, 155, 0.18);
  background:
    repeating-linear-gradient(to right, rgba(255, 226, 169, 0.2) 0 2px, transparent 3px 28px),
    repeating-linear-gradient(to bottom, transparent 0 52px, rgba(255, 220, 155, 0.22) 53px 55px);
}

.caption-tableau-library span {
  width: 26%;
  height: 38%;
  border: 1px solid rgba(255, 226, 169, 0.36);
  background:
    linear-gradient(to bottom, rgba(255, 223, 159, 0.62), rgba(103, 42, 19, 0.24)),
    repeating-linear-gradient(to bottom, transparent 0 13px, rgba(45, 18, 8, 0.35) 14px 15px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
}

.caption-tableau-library span:nth-child(1) {
  left: 8%;
  top: 16%;
  transform: rotate(-8deg);
}

.caption-tableau-library span:nth-child(2) {
  left: 38%;
  top: 6%;
  transform: rotate(5deg);
}

.caption-tableau-library span:nth-child(3) {
  left: 63%;
  top: 34%;
  transform: rotate(14deg);
}

.caption-tableau-chalk {
  left: 10%;
  right: 12%;
  bottom: 13%;
  height: 38%;
  min-height: 120px;
  transform: perspective(680px) rotateX(48deg);
  transform-origin: center bottom;
}

.caption-tableau-chalk span {
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 220, 0.72), transparent);
  filter: blur(0.2px);
}

.caption-tableau-chalk span:nth-child(1) {
  top: 18%;
  transform: rotate(-3deg);
}

.caption-tableau-chalk span:nth-child(2) {
  top: 50%;
  transform: rotate(2deg);
}

.caption-tableau-chalk span:nth-child(3) {
  top: 78%;
  transform: rotate(-1deg);
}

.caption-tableau-tunnel {
  left: 15%;
  right: 13%;
  bottom: 2%;
  height: 74%;
  transform: perspective(720px) rotateX(66deg);
  transform-origin: center bottom;
}

.caption-tableau-tunnel span {
  bottom: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 209, 133, 0.58), transparent);
  transform-origin: center bottom;
}

.caption-tableau-tunnel span:nth-child(1) {
  left: 22%;
  transform: rotate(-24deg);
}

.caption-tableau-tunnel span:nth-child(2) {
  left: 50%;
}

.caption-tableau-tunnel span:nth-child(3) {
  right: 22%;
  transform: rotate(24deg);
}

.caption-tableau-refusal {
  right: clamp(42px, 9vw, 160px);
  bottom: 12%;
  width: min(25vw, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 161, 72, 0.56);
  border-radius: 50%;
  box-shadow:
    inset 0 0 36px rgba(255, 118, 39, 0.2),
    0 0 64px rgba(255, 80, 25, 0.18);
  transform: rotate(10deg) scale(0.92);
}

.caption-tableau-refusal::before,
.caption-tableau-refusal::after,
.caption-tableau-refusal span {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 169, 0.78), transparent);
  transform-origin: left center;
}

.caption-tableau-refusal::before {
  transform: rotate(0deg) translateX(-50%);
}

.caption-tableau-refusal::after {
  transform: rotate(90deg) translateX(-50%);
}

.caption-tableau-refusal span:nth-child(1) {
  transform: rotate(42deg) translateX(-50%);
}

.caption-tableau-refusal span:nth-child(2) {
  transform: rotate(137deg) translateX(-50%);
}

.caption-tableau-search {
  right: 8%;
  top: -8%;
  width: min(34vw, 440px);
  height: 86%;
  background: linear-gradient(to bottom, rgba(255, 236, 184, 0.54), rgba(255, 150, 55, 0.12) 34%, transparent 82%);
  clip-path: polygon(43% 0, 58% 0, 100% 100%, 0 100%);
  filter: blur(0.4px);
  transform: rotate(-14deg);
}

.caption-tableau-scar {
  left: 43%;
  top: 4%;
  width: min(16vw, 190px);
  height: 82%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 34px rgba(255, 116, 44, 0.3));
}

.caption-tableau-scar span:nth-child(1) {
  left: 50%;
  top: 7%;
  width: 2px;
  height: 82%;
  background:
    linear-gradient(to bottom, transparent, rgba(255, 218, 153, 0.68), rgba(255, 96, 42, 0.82), transparent),
    repeating-linear-gradient(to bottom, transparent 0 18px, rgba(255, 235, 186, 0.74) 19px 21px);
  transform: translateX(-50%) rotate(-2deg);
}

.caption-tableau-scar span:nth-child(2) {
  left: 4%;
  top: 12%;
  width: 58%;
  height: 44%;
  border: 1px solid rgba(255, 226, 169, 0.32);
  background:
    linear-gradient(132deg, transparent 0 45%, rgba(255, 223, 159, 0.32) 46% 48%, transparent 49% 100%),
    rgba(255, 255, 255, 0.03);
  clip-path: polygon(8% 0, 100% 14%, 84% 90%, 0 100%);
  transform: rotate(-17deg);
}

.caption-tableau-scar span:nth-child(3) {
  right: 9%;
  bottom: 18%;
  width: 42%;
  height: 28%;
  border: 1px solid rgba(255, 118, 44, 0.4);
  clip-path: polygon(20% 0, 100% 22%, 74% 100%, 0 78%);
  transform: rotate(16deg);
}

.caption-tableau-border {
  left: 10%;
  top: 18%;
  width: min(38vw, 520px);
  height: min(48vh, 420px);
  border-bottom: 1px solid rgba(255, 226, 169, 0.4);
  transform: perspective(760px) rotateX(58deg) rotateZ(-2deg);
  transform-origin: center bottom;
}

.caption-tableau-border span {
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 221, 153, 0.74), transparent);
}

.caption-tableau-border span:nth-child(1) {
  left: 12%;
  width: 2px;
  height: 82%;
}

.caption-tableau-border span:nth-child(2) {
  left: 48%;
  width: 2px;
  height: 100%;
}

.caption-tableau-border span:nth-child(3) {
  right: 16%;
  width: 2px;
  height: 74%;
}

.caption-tableau-memory {
  left: 14%;
  top: 8%;
  width: min(44vw, 560px);
  height: min(46vh, 380px);
  transform: rotate(-1deg);
}

.caption-tableau-memory span {
  width: 36%;
  height: 44%;
  border: 1px solid rgba(255, 228, 174, 0.28);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 224, 166, 0.32) 0 11%, transparent 12%),
    linear-gradient(to bottom, transparent 0 54%, rgba(255, 224, 166, 0.22) 55% 56%, transparent 57%),
    rgba(7, 4, 3, 0.22);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.5);
  filter: blur(0.25px);
}

.caption-tableau-memory span:nth-child(1) {
  left: 2%;
  top: 12%;
  transform: rotate(-6deg);
}

.caption-tableau-memory span:nth-child(2) {
  left: 32%;
  top: 4%;
  transform: rotate(4deg) scale(0.92);
}

.caption-tableau-memory span:nth-child(3) {
  right: 5%;
  bottom: 10%;
  transform: rotate(10deg);
  opacity: 0.72;
}

.caption-tableau-officer {
  left: 7%;
  right: 7%;
  top: 18%;
  height: 44%;
  transform: perspective(760px) rotateX(52deg);
  transform-origin: center bottom;
}

.caption-tableau-officer span:nth-child(1) {
  left: 7%;
  right: 7%;
  bottom: 8%;
  height: 22%;
  border: 1px solid rgba(255, 220, 150, 0.28);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), rgba(255, 215, 143, 0.22), rgba(0, 0, 0, 0.32));
}

.caption-tableau-officer span:nth-child(2),
.caption-tableau-officer span:nth-child(3) {
  bottom: 28%;
  width: 62px;
  height: 122px;
  border: 1px solid rgba(255, 220, 150, 0.22);
  border-radius: 50% 50% 12% 12%;
  background: linear-gradient(to bottom, rgba(255, 220, 150, 0.22), rgba(0, 0, 0, 0.3));
}

.caption-tableau-officer span:nth-child(2) {
  left: 24%;
}

.caption-tableau-officer span:nth-child(3) {
  right: 24%;
}

.caption-tableau-anomaly {
  right: 9%;
  top: 9%;
  width: min(32vw, 420px);
  height: min(48vh, 390px);
  border: 1px solid rgba(255, 196, 106, 0.28);
  background:
    repeating-linear-gradient(to bottom, transparent 0 38px, rgba(255, 226, 169, 0.16) 39px 41px),
    repeating-linear-gradient(to right, transparent 0 82px, rgba(255, 226, 169, 0.14) 83px 84px);
  transform: rotate(1deg);
}

.caption-tableau-anomaly span {
  background: rgba(255, 226, 169, 0.24);
  border: 1px solid rgba(255, 226, 169, 0.34);
}

.caption-tableau-anomaly span:nth-child(1) {
  left: 16%;
  top: 18%;
  width: 42%;
  height: 18%;
  transform: rotate(-7deg);
}

.caption-tableau-anomaly span:nth-child(2) {
  right: 12%;
  top: 48%;
  width: 36%;
  height: 22%;
  transform: rotate(9deg);
}

.caption-tableau-anomaly span:nth-child(3) {
  left: 28%;
  bottom: 10%;
  width: 1px;
  height: 78%;
  background: linear-gradient(to bottom, transparent, rgba(255, 114, 42, 0.7), transparent);
  border: 0;
  transform: rotate(18deg);
}

.caption-tableau-toll {
  left: 10%;
  bottom: 8%;
  width: min(42vw, 560px);
  height: min(42vh, 350px);
  border-left: 1px solid rgba(255, 206, 128, 0.26);
  border-bottom: 1px solid rgba(255, 206, 128, 0.3);
  background:
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(255, 226, 169, 0.14) 31px 32px),
    linear-gradient(110deg, rgba(255, 226, 169, 0.08), transparent 42%);
  transform: rotate(-1deg);
}

.caption-tableau-toll span {
  width: 1px;
  height: 72%;
  bottom: 10%;
  background: linear-gradient(to top, rgba(255, 226, 169, 0.76), transparent);
}

.caption-tableau-toll span:nth-child(1) {
  left: 20%;
  transform: rotate(-8deg);
}

.caption-tableau-toll span:nth-child(2) {
  left: 42%;
  transform: rotate(7deg);
}

.caption-tableau-toll span:nth-child(3) {
  left: 64%;
  height: 88%;
  transform: rotate(-3deg);
}

.caption-tableau-mural {
  left: 12%;
  top: 14%;
  width: min(42vw, 540px);
  height: min(45vh, 380px);
  border: 1px solid rgba(255, 235, 204, 0.2);
  background:
    radial-gradient(ellipse at 52% 38%, rgba(255, 238, 197, 0.16), transparent 34%),
    linear-gradient(115deg, transparent 0 24%, rgba(255, 200, 126, 0.12) 25% 27%, transparent 28% 100%),
    linear-gradient(90deg, transparent, rgba(255, 246, 224, 0.12), transparent),
    repeating-linear-gradient(to bottom, rgba(255, 246, 224, 0.07) 0 2px, transparent 3px 34px);
  box-shadow:
    inset 0 0 52px rgba(0, 0, 0, 0.58),
    inset 0 0 18px rgba(255, 235, 204, 0.08);
}

.caption-tableau-mural::before,
.caption-tableau-mural::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.caption-tableau-mural::before {
  left: 30%;
  top: 12%;
  width: 44%;
  height: 74%;
  opacity: 0.56;
  background:
    radial-gradient(circle at 55% 14%, rgba(255, 239, 205, 0.72) 0 12%, transparent 13%),
    linear-gradient(88deg, transparent 0 47%, rgba(255, 239, 205, 0.52) 48% 51%, transparent 52% 100%),
    linear-gradient(105deg, transparent 0 40%, rgba(255, 239, 205, 0.46) 41% 46%, transparent 47% 100%),
    linear-gradient(76deg, transparent 0 52%, rgba(255, 239, 205, 0.38) 53% 58%, transparent 59% 100%);
  filter: drop-shadow(0 0 22px rgba(255, 200, 126, 0.22));
}

.caption-tableau-mural::after {
  left: 42%;
  top: 58%;
  width: 28%;
  height: 18px;
  opacity: 0.74;
  border-radius: 999px;
  background:
    radial-gradient(circle at 88% 50%, rgba(255, 246, 224, 0.92) 0 8px, rgba(255, 192, 112, 0.42) 9px 18px, transparent 19px),
    linear-gradient(90deg, transparent, rgba(255, 236, 194, 0.7));
  transform: rotate(-8deg);
  filter: blur(0.2px) drop-shadow(0 0 20px rgba(255, 215, 150, 0.36));
}

.caption-tableau-mural span:nth-child(1) {
  left: 48%;
  top: 16%;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 246, 224, 0.72);
  border-radius: 50%;
  box-shadow:
    0 0 30px rgba(255, 219, 158, 0.2),
    inset 0 0 18px rgba(255, 246, 224, 0.12);
}

.caption-tableau-mural span:nth-child(2) {
  left: 50%;
  top: 32%;
  width: 3px;
  height: 38%;
  background: linear-gradient(to bottom, rgba(255, 246, 224, 0.72), rgba(255, 207, 137, 0.28));
  box-shadow: 0 0 18px rgba(255, 220, 164, 0.22);
}

.caption-tableau-mural span:nth-child(3) {
  left: 35%;
  top: 50%;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 224, 0.78), rgba(255, 202, 128, 0.48), transparent);
  transform: rotate(-8deg);
  box-shadow: 0 0 16px rgba(255, 210, 146, 0.22);
}

.caption-tableau-absence {
  right: 12%;
  top: 8%;
  width: min(34vw, 420px);
  height: min(52vh, 440px);
  border: 1px solid rgba(255, 226, 169, 0.26);
  background:
    radial-gradient(ellipse at 54% 50%, rgba(0, 0, 0, 0.92) 0 21%, rgba(0, 0, 0, 0.2) 22% 36%, transparent 37%),
    linear-gradient(90deg, rgba(255, 226, 169, 0.1), transparent);
  clip-path: polygon(12% 0, 100% 8%, 88% 100%, 0 86%);
}

.caption-tableau-absence span {
  background: linear-gradient(90deg, transparent, rgba(255, 226, 169, 0.64), transparent);
}

.caption-tableau-absence span:nth-child(1) {
  left: 20%;
  top: 18%;
  width: 62%;
  height: 1px;
}

.caption-tableau-absence span:nth-child(2) {
  left: 26%;
  top: 52%;
  width: 48%;
  height: 1px;
  transform: rotate(11deg);
}

.caption-tableau-absence span:nth-child(3) {
  left: 50%;
  top: 8%;
  width: 1px;
  height: 78%;
  background: linear-gradient(to bottom, transparent, rgba(255, 226, 169, 0.5), transparent);
}

.caption-tableau-scar::before,
.caption-tableau-scar::after,
.caption-tableau-officer::before,
.caption-tableau-officer::after,
.caption-tableau-toll::before,
.caption-tableau-toll::after,
.caption-tableau-absence::before,
.caption-tableau-absence::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.caption-tableau-scar::before {
  left: 18%;
  top: 5%;
  width: 66%;
  height: 90%;
  opacity: 0.22;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 222, 163, 0.32), transparent 24%),
    linear-gradient(to bottom, rgba(255, 180, 92, 0.18), rgba(0, 0, 0, 0.04) 48%, transparent);
  filter: blur(0.5px);
}

.caption-tableau-scar::after {
  left: 49%;
  top: 3%;
  width: 22%;
  height: 88%;
  opacity: 0.26;
  background:
    linear-gradient(to bottom, transparent, rgba(255, 238, 193, 0.78), rgba(255, 91, 39, 0.58), transparent),
    repeating-linear-gradient(to bottom, transparent 0 28px, rgba(255, 240, 204, 0.58) 29px 31px);
  clip-path: polygon(42% 0, 72% 12%, 48% 52%, 66% 72%, 34% 100%, 16% 74%, 38% 45%, 18% 18%);
  filter: drop-shadow(0 0 24px rgba(255, 125, 50, 0.28));
}

.caption-tableau-officer::before {
  left: 11%;
  right: 11%;
  bottom: 14%;
  height: 38%;
  opacity: 0.28;
  background:
    linear-gradient(90deg, transparent, rgba(255, 230, 174, 0.32), transparent),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(255, 218, 150, 0.2) 71px 72px);
  transform: perspective(740px) rotateX(48deg);
  transform-origin: center bottom;
}

.caption-tableau-officer::after {
  left: 51%;
  top: -22%;
  width: 34%;
  height: 138%;
  opacity: 0.22;
  background: linear-gradient(to bottom, rgba(255, 230, 174, 0.42), rgba(255, 164, 72, 0.11) 38%, transparent 86%);
  clip-path: polygon(44% 0, 60% 0, 100% 100%, 0 100%);
  transform: rotate(-8deg);
  filter: blur(0.6px);
}

.caption-tableau-toll::before {
  left: 5%;
  right: 8%;
  top: 8%;
  height: 78%;
  opacity: 0.28;
  background:
    repeating-linear-gradient(to right, transparent 0 42px, rgba(255, 222, 154, 0.22) 43px 45px),
    repeating-linear-gradient(to bottom, transparent 0 26px, rgba(255, 222, 154, 0.16) 27px 28px);
}

.caption-tableau-toll::after {
  left: 14%;
  top: 20%;
  width: 64%;
  height: 48%;
  opacity: 0.3;
  background:
    repeating-linear-gradient(104deg, transparent 0 34px, rgba(183, 46, 24, 0.56) 35px 38px, transparent 39px 55px),
    linear-gradient(90deg, transparent, rgba(255, 213, 145, 0.18), transparent);
  filter: drop-shadow(0 0 20px rgba(183, 46, 24, 0.22));
}

.caption-tableau-absence::before {
  left: 29%;
  top: 10%;
  width: 42%;
  height: 78%;
  opacity: 0.32;
  border: 1px solid rgba(255, 232, 176, 0.24);
  border-radius: 50% 50% 34% 34%;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 226, 169, 0.16), transparent 18%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.06));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.72);
}

.caption-tableau-absence::after {
  left: 5%;
  right: 5%;
  top: 45%;
  height: 1px;
  opacity: 0.46;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 169, 0.78), transparent);
  box-shadow: 0 0 22px rgba(255, 226, 169, 0.24);
}

.cinema-shell[data-projector-source="caption"][data-visual-kind="impact"] .caption-tableau-rubble,
.cinema-shell[data-projector-source="caption"][data-cast-scene="rubble"] .caption-tableau-rubble {
  opacity: 0.82;
  transform: translateY(0);
}

.cinema-shell[data-projector-source="caption"][data-visual-kind="authority"] .caption-tableau-map,
.cinema-shell[data-projector-source="caption"][data-cast-scene="map"] .caption-tableau-map {
  opacity: 0.86;
  transform: rotate(-1deg) translateY(0);
}

.cinema-shell[data-projector-source="caption"][data-cast-scene="library"] .caption-tableau-library,
.cinema-shell[data-projector-source="caption"][data-chapter-motif="inheritance"] .caption-tableau-library {
  opacity: 0.86;
  transform: rotate(-1deg) translateY(0);
}

.cinema-shell[data-projector-source="caption"][data-cast-scene="chalk"] .caption-tableau-chalk,
.cinema-shell[data-projector-source="caption"][data-cue="chalk"] .caption-tableau-chalk {
  opacity: 0.78;
}

.cinema-shell[data-projector-source="caption"][data-cast-scene="tunnel"] .caption-tableau-tunnel,
.cinema-shell[data-projector-source="caption"][data-cue="breath"] .caption-tableau-tunnel {
  opacity: 0.76;
}

.cinema-shell[data-projector-source="caption"][data-cast-scene="refusal"] .caption-tableau-refusal,
.cinema-shell[data-projector-source="caption"][data-visual-kind="voice"] .caption-tableau-refusal {
  opacity: 0.84;
  transform: rotate(18deg) scale(1);
}

.cinema-shell[data-projector-source="caption"][data-cast-scene="search"] .caption-tableau-search,
.cinema-shell[data-projector-source="caption"][data-visual-kind="threat"] .caption-tableau-search {
  opacity: 0.8;
  animation: search-sweep 12s ease-in-out infinite;
}

.cinema-shell[data-projector-source="caption"][data-cast-scene="library"][data-visual-kind="impact"] .caption-tableau-rubble {
  opacity: 0.58;
}

.cinema-shell[data-projector-source="caption"][data-chapter-motif="scar"] .caption-tableau-scar,
.cinema-shell[data-projector-source="caption"][data-chapter-motif="speaking-scar"] .caption-tableau-scar {
  opacity: 0.88;
  animation: scar-pulse 5.8s ease-in-out infinite;
}

.cinema-shell:not(.cinema-focus)[data-projector-source="caption"][data-chapter-phase="scar"] .caption-tableau > .caption-tableau-scar,
.cinema-shell:not(.cinema-focus)[data-projector-source="caption"][data-chapter-phase="speaking-scar"] .caption-tableau > .caption-tableau-scar {
  opacity: 0.88;
}

.cinema-shell[data-projector-source="caption"][data-chapter-motif="consent"] .caption-tableau-border {
  opacity: 0.82;
  transform: perspective(760px) rotateX(54deg) rotateZ(-1deg) translateY(-4px);
}

.cinema-shell[data-projector-source="caption"][data-chapter-motif="wrong-memory"] .caption-tableau-memory {
  opacity: 0.84;
  filter: blur(0.5px) saturate(0.76);
}

.cinema-shell[data-projector-source="caption"][data-chapter-motif="officer"] .caption-tableau-officer {
  opacity: 0.84;
  transform: perspective(760px) rotateX(49deg) translateY(-5px);
}

.cinema-shell[data-projector-source="caption"][data-chapter-motif="anomaly"] .caption-tableau-anomaly {
  opacity: 0.88;
  animation: anomaly-shift 7.2s steps(2, end) infinite;
}

.cinema-shell[data-projector-source="caption"][data-chapter-motif="toll"] .caption-tableau-toll {
  opacity: 0.86;
}

.cinema-shell[data-projector-source="caption"][data-chapter-motif="mural"] .caption-tableau-mural {
  opacity: 0.84;
}

.cinema-shell[data-projector-source="caption"][data-chapter-motif="disappearance"] .caption-tableau-absence {
  opacity: 0.9;
  animation: absence-thin 8s ease-in-out infinite;
}

.source-montage {
  --montage-hot: rgba(174, 49, 21, 0.74);
  --montage-gold: rgba(255, 204, 128, 0.72);
  --montage-cool: rgba(96, 204, 185, 0.42);
  position: absolute;
  right: clamp(28px, 4.8vw, 84px);
  top: clamp(160px, 24vh, 260px);
  z-index: 5;
  width: min(350px, 28vw);
  height: min(250px, 34vh);
  min-height: 190px;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: normal;
  transform:
    translate3d(0, var(--montage-drift, 0), 0)
    perspective(820px)
    rotateY(-13deg)
    rotateZ(-2deg);
  transform-origin: 74% 50%;
  filter:
    drop-shadow(0 28px 90px rgba(0, 0, 0, 0.72))
    saturate(1.08);
  transition:
    opacity 700ms ease,
    transform 900ms ease,
    filter 900ms ease;
}

.cinema-shell.is-playing .source-montage {
  opacity: calc(0.48 + var(--incident-intensity, 0.62) * 0.34);
  transform:
    translate3d(calc(var(--shot-drift-x, 0) * -0.14), var(--montage-drift, 0), 0)
    perspective(820px)
    rotateY(-9deg)
    rotateZ(-1deg);
}

.source-montage::before,
.source-montage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.source-montage::before {
  inset: 4% 0 3% 9%;
  border: 1px solid color-mix(in srgb, var(--montage-gold) 24%, transparent);
  background:
    linear-gradient(90deg, rgba(2, 1, 1, 0.9), rgba(33, 11, 4, 0.42), rgba(2, 1, 1, 0.78)),
    repeating-linear-gradient(0deg, transparent 0 28px, color-mix(in srgb, var(--montage-gold) 6%, transparent) 29px 30px);
  box-shadow:
    inset 0 0 48px rgba(0, 0, 0, 0.78),
    inset 0 0 32px color-mix(in srgb, var(--montage-hot) 12%, transparent);
  clip-path: polygon(4% 0, 100% 7%, 94% 100%, 0 92%);
}

.source-montage::after {
  left: 14%;
  right: 3%;
  top: var(--montage-scan, 50%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--montage-cool), rgba(255, 237, 196, 0.62), transparent);
  opacity: 0.62;
  transform: rotate(-4deg);
}

.source-montage-sprocket {
  position: absolute;
  left: 1%;
  top: 8%;
  bottom: 8%;
  z-index: 1;
  width: 20px;
  display: grid;
  align-content: space-between;
}

.source-montage-sprocket i {
  display: block;
  width: 12px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--montage-gold) 38%, transparent);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.8),
    0 0 14px color-mix(in srgb, var(--montage-cool) 18%, transparent);
}

.source-montage-cell {
  position: absolute;
  z-index: 2;
  display: block;
  height: 28%;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--montage-gold) 22%, transparent);
  background:
    radial-gradient(circle at calc(var(--montage-cell-progress, 0) * 100%) 46%, color-mix(in srgb, var(--montage-cool) 46%, transparent), transparent 24%),
    linear-gradient(160deg, rgba(3, 2, 1, 0.98), rgba(66, 23, 9, calc(0.28 + var(--montage-cell-pressure, 0.6) * 0.2)), rgba(2, 1, 1, 0.94));
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.78),
    inset 0 0 18px color-mix(in srgb, var(--montage-hot) 10%, transparent),
    0 18px 52px rgba(0, 0, 0, 0.46);
  opacity: 0.58;
  transform-origin: 50% 50%;
  clip-path: polygon(2% 8%, 96% 0, 100% 84%, 7% 100%);
  transition:
    opacity 360ms ease,
    transform 460ms ease,
    border-color 360ms ease,
    filter 460ms ease;
}

.source-montage-cell::before,
.source-montage-cell::after,
.source-montage-cell i,
.source-montage-cell b {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.source-montage-cell::before {
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--montage-gold) 28%, transparent);
  opacity: calc(0.28 + var(--montage-cell-pressure, 0.7) * 0.28);
  transform: rotate(var(--montage-cell-tilt, 0deg));
}

.source-montage-cell::after {
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--montage-cool) 58%, transparent);
  border-radius: 50%;
  opacity: calc(0.2 + var(--montage-cell-pressure, 0.7) * 0.22);
  transform: translate3d(-50%, -50%, 0) scale(calc(0.8 + var(--montage-cell-progress, 0) * 0.5));
}

.source-montage-cell i:nth-child(1) {
  left: 14%;
  top: 26%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--montage-gold), transparent);
  transform: rotate(-11deg);
}

.source-montage-cell i:nth-child(2) {
  left: 21%;
  top: 50%;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--montage-cool), transparent);
  transform: rotate(7deg);
}

.source-montage-cell i:nth-child(3) {
  left: 28%;
  bottom: 20%;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--montage-hot), transparent);
  transform: rotate(22deg);
}

.source-montage-cell b {
  left: 8px;
  right: 8px;
  bottom: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--montage-hot), var(--montage-gold), var(--montage-cool));
  opacity: 0.76;
  transform: scaleX(var(--montage-cell-progress, 0));
  transform-origin: left center;
}

.source-montage-prev {
  left: 18%;
  top: 4%;
  width: 64%;
  transform: translateX(-6%) rotate(-6deg) scale(0.9);
}

.source-montage-active {
  left: 7%;
  top: 34%;
  width: 87%;
  height: 34%;
  min-height: 72px;
  opacity: 0.96;
  border-color: color-mix(in srgb, var(--montage-gold) 66%, transparent);
  transform: rotate(1deg) scale(1.04);
  filter: brightness(1.28) saturate(1.18);
}

.source-montage-next {
  left: 26%;
  bottom: 5%;
  width: 60%;
  transform: translateX(3%) rotate(5deg) scale(0.88);
}

.source-montage[data-signal-kind="threat"] {
  --montage-hot: rgba(189, 28, 21, 0.78);
  --montage-cool: rgba(114, 213, 218, 0.42);
}

.source-montage[data-signal-kind="impact"] {
  --montage-hot: rgba(255, 94, 32, 0.88);
  --montage-cool: rgba(255, 239, 197, 0.36);
  filter:
    drop-shadow(0 30px 90px rgba(0, 0, 0, 0.76))
    brightness(1.08)
    saturate(1.22);
}

.source-montage[data-signal-kind="memory"] {
  --montage-hot: rgba(126, 58, 26, 0.6);
  --montage-gold: rgba(255, 215, 154, 0.78);
  --montage-cool: rgba(95, 166, 153, 0.34);
}

.source-montage[data-signal-kind="voice"] {
  --montage-hot: rgba(120, 21, 15, 0.72);
  --montage-cool: rgba(178, 228, 215, 0.5);
}

.source-montage[data-signal-kind="passage"] {
  --montage-hot: rgba(111, 49, 24, 0.68);
  --montage-cool: rgba(80, 188, 174, 0.56);
}

.source-montage-cell[data-signal-kind="impact"]::before,
.source-montage-cell[data-signal-kind="weight"]::before {
  clip-path: polygon(0 0, 44% 0, 28% 46%, 58% 42%, 41% 100%, 100% 100%, 100% 0);
  background: linear-gradient(130deg, transparent, rgba(255, 235, 202, 0.12), transparent);
}

.source-montage-cell[data-signal-kind="body"]::after,
.source-montage-cell[data-signal-kind="signal"]::after {
  width: 34%;
  border-color: color-mix(in srgb, var(--montage-gold) 68%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--montage-cool) 24%, transparent);
}

.source-montage-cell[data-signal-kind="memory"] {
  filter: sepia(0.18) brightness(1.08);
}

.source-montage-cell[data-signal-kind="voice"] i {
  left: 12%;
  width: 76%;
  transform: none;
}

.source-montage-cell[data-signal-kind="voice"] i:nth-child(1) {
  top: 33%;
}

.source-montage-cell[data-signal-kind="voice"] i:nth-child(2) {
  top: 50%;
}

.source-montage-cell[data-signal-kind="voice"] i:nth-child(3) {
  top: 67%;
}

.source-montage-cell[data-signal-kind="passage"]::before {
  inset: 12px 18%;
  transform: perspective(260px) rotateX(64deg);
  transform-origin: center bottom;
}

.source-montage-cell[data-signal-kind="contact"] b {
  height: 4px;
  background: linear-gradient(90deg, rgba(120, 9, 5, 0.9), rgba(255, 205, 150, 0.62), transparent);
}

.shot-card {
  position: absolute;
  left: clamp(18px, 4vw, 64px);
  bottom: clamp(174px, 23vh, 250px);
  width: min(390px, 34vw);
  padding: 13px 15px 15px;
  border-left: 2px solid rgba(255, 198, 112, 0.78);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.18));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.5);
  opacity: 0.82;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

.shot-card span,
.shot-card strong {
  display: block;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.9);
}

.shot-card span {
  margin-bottom: 5px;
  color: rgba(255, 204, 128, 0.72);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.shot-card strong {
  color: rgba(255, 238, 207, 0.92);
  font-size: clamp(1rem, 1.7vw, 1.36rem);
  font-weight: 500;
  line-height: 1.12;
}

.story-incident {
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  bottom: clamp(260px, 34vh, 380px);
  z-index: 6;
  width: min(360px, 31vw);
  padding: 11px 14px 12px;
  border-right: 2px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 64%, transparent);
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.12)),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--chapter-secondary, #72180f) 18%, transparent));
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.48);
  opacity: 0.18;
  text-align: right;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 700ms ease,
    transform 700ms ease,
    filter 700ms ease;
}

.story-incident span,
.story-incident strong {
  display: block;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.92);
}

.story-incident span {
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--chapter-accent, #f4c779) 72%, transparent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-incident strong {
  color: rgba(255, 238, 207, 0.9);
  font-size: clamp(0.88rem, 1.35vw, 1.12rem);
  font-weight: 500;
  line-height: 1.16;
}

.cinema-shell.is-playing .shot-card {
  opacity: 1;
  transform: translate3d(0, -8px, 0);
}

.cinema-shell.is-playing .story-incident {
  opacity: 0.74;
  transform: translate3d(0, 0, 0);
}

.cinema-shell[data-visual-incident="ambient"] .story-incident {
  opacity: 0.22;
  filter: blur(0.2px);
}

.cinema-shell[data-visual-kind="impact"] .story-incident,
.cinema-shell[data-visual-kind="signal"] .story-incident,
.cinema-shell[data-visual-kind="voice"] .story-incident {
  opacity: 0.88;
}

.cinema-shell[data-visual-kind="weight"] .story-incident {
  border-right-color: rgba(255, 134, 58, 0.76);
}

.cinema-shell[data-intensity="low"] .story-layer {
  opacity: 0.62;
}

.cinema-shell[data-intensity="low"] #cinematic-field {
  opacity: 0.5;
  filter: contrast(1.02) saturate(0.7);
}

.cinema-shell.is-playing #cinematic-field {
  opacity: 0.9;
}

.cinema-shell[data-cue="map"] #cinematic-field,
.cinema-shell[data-cue="refusal"] #cinematic-field,
.cinema-shell[data-cue="search"] #cinematic-field {
  opacity: 0.96;
  filter: contrast(1.24) saturate(1.04);
}

.cinema-shell[data-palette="predawn-slate"] #cinematic-field,
.cinema-shell[data-palette="archive-blue"] #cinematic-field,
.cinema-shell[data-palette="absence-black"] #cinematic-field {
  filter: contrast(1.05) saturate(0.68) hue-rotate(8deg);
}

.cinema-shell.is-playing .story-silhouette {
  opacity: 0.46;
  transform: translate3d(8%, 2%, 0) scale(0.98);
}

.cinema-shell[data-beat="rubble"] .story-rubble,
.cinema-shell[data-beat="rubble"] .story-searchlight {
  opacity: 0.96;
}

.cinema-shell[data-beat="rubble"] .story-rubble {
  transform: translate3d(0, 0, 0) scaleY(var(--story-pulse, 1));
}

.cinema-shell[data-beat="tunnel"] .story-tunnel-lines {
  opacity: 0.82;
  transform: translate3d(-50%, 7%, 0) perspective(720px) rotateX(68deg);
  filter: drop-shadow(0 0 28px rgba(255, 147, 52, 0.34));
}

.cinema-shell[data-beat="tunnel"] .story-searchlight {
  opacity: 0.5;
}

.cinema-shell[data-beat="archive"] .story-archive,
.cinema-shell[data-beat="library"] .story-archive,
.cinema-shell[data-beat="chalk"] .story-archive {
  opacity: 0.78;
  transform: translate3d(0, -2%, 0) rotate(-2deg);
}

.cinema-shell[data-beat="balfour"] .story-map,
.cinema-shell[data-beat="archive"] .story-map {
  opacity: 0.72;
  transform: translate3d(0, 0, 0) rotate(-1deg) scale(var(--story-pulse, 1));
}

.cinema-shell[data-beat="refusal"] .story-glyph-mark,
.cinema-shell[data-beat="tunnel"] .story-glyph-mark,
.cinema-shell[data-beat="archive"] .story-glyph-mark {
  opacity: 0.86;
  transform: scale(var(--story-pulse, 1)) rotate(12deg);
}

.cinema-shell[data-beat="alia"] .story-silhouette,
.cinema-shell[data-beat="archive"] .story-silhouette,
.cinema-shell[data-beat="balfour"] .story-silhouette,
.cinema-shell[data-beat="chalk"] .story-silhouette,
.cinema-shell[data-beat="library"] .story-silhouette,
.cinema-shell[data-beat="predawn"] .story-silhouette,
.cinema-shell[data-beat="refusal"] .story-silhouette,
.cinema-shell[data-beat="rubble"] .story-silhouette,
.cinema-shell[data-beat="tunnel"] .story-silhouette {
  opacity: 0.82;
  transform: translate3d(0, 0, 0) scale(var(--story-pulse, 1));
}

.cinema-shell[data-beat="predawn"] .story-searchlight,
.cinema-shell[data-beat="balfour"] .story-searchlight {
  opacity: 0.74;
}

.cinema-shell[data-beat="chalk"] .story-map {
  opacity: 0.36;
}

.cinema-shell[data-motion="trace"] .story-horizon {
  opacity: 0.7;
  filter: contrast(1.2);
}

.cinema-shell[data-event="collapse"] .story-fragment-burst,
.cinema-shell[data-event="collapse"] .story-dust-curtain {
  opacity: var(--event-opacity, 0.72);
}

.cinema-shell[data-event="collapse"] .story-fragment-burst {
  transform:
    translate3d(calc(-50% + var(--shot-drift-x, 0)), calc(-50% + var(--shot-drift-y, 0)), 0)
    scale(var(--shot-breathe, 1));
}

.cinema-shell[data-event="descent"] .story-tunnel-lines,
.cinema-shell[data-event="descent"] .story-dust-curtain {
  opacity: 0.86;
}

.cinema-shell[data-event="descent"] .story-camera-mask {
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 18%, rgba(0, 0, 0, 0.26) 42%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), transparent 34%, transparent 66%, rgba(0, 0, 0, 0.92));
}

.cinema-shell[data-event="breath"] .story-breath,
.cinema-shell[data-event="breath"] .story-silhouette {
  opacity: 0.92;
}

.cinema-shell[data-event="breath"] .story-breath {
  filter: blur(8px);
}

.cinema-shell[data-event="papers"] .story-archive,
.cinema-shell[data-event="papers"] .story-fragment-burst {
  opacity: 0.82;
}

.cinema-shell[data-event="map"] .story-map,
.cinema-shell[data-event="map"] .story-searchlight {
  opacity: 0.82;
}

.cinema-shell[data-event="glyph"] .story-glyph-mark,
.cinema-shell[data-event="glyph"] .story-breath {
  opacity: 0.94;
}

.cinema-shell[data-event="search"] .story-searchlight {
  opacity: 0.92;
  filter: blur(0.4px) brightness(1.18);
}

.cinema-shell[data-event="trace"] .story-horizon,
.cinema-shell[data-event="trace"] .story-dust-curtain {
  opacity: 0.76;
}

.cinema-shell[data-shot-size="close"] .story-layer {
  transform:
    translate3d(calc(var(--shot-pan, 0) + var(--shot-drift-x, 0)), var(--shot-drift-y, 0), 0)
    rotate(var(--shot-tilt, 0deg))
    scale(1.035);
}

.cinema-shell[data-shot-size="portrait"] .story-silhouette {
  right: clamp(72px, 12vw, 190px);
  width: min(24vw, 310px);
}

.cinema-shell[data-shot-size="wide"] .story-rubble {
  height: min(34vh, 310px);
}

.cinema-shell[data-camera="push"] .story-camera-mask,
.cinema-shell[data-camera="descend"] .story-camera-mask,
.cinema-shell[data-camera="strike"] .story-camera-mask {
  opacity: 0.5;
}

.cinema-shell[data-camera="witness"] .story-camera-mask {
  opacity: 0.18;
}

.cinema-shell[data-camera="strike"] .scene-pressure,
.cinema-shell[data-camera="strike"] .glyph-field {
  opacity: 0.92;
}

.cinema-shell[data-chapter-phase="mandate"] .story-map,
.cinema-shell[data-chapter-phase="archive-anomaly"] .story-map {
  opacity: 0.86;
}

.cinema-shell[data-chapter-phase="chalk"] .story-horizon,
.cinema-shell[data-chapter-phase="return"] .story-horizon {
  opacity: 0.82;
}

.cinema-shell[data-chapter-phase="pre-drone"] .story-searchlight,
.cinema-shell[data-chapter-phase="disappearance"] .story-searchlight {
  opacity: 0.96;
}

.cinema-shell[data-cue="dust"] .story-dust-curtain,
.cinema-shell[data-cue="dust"] .story-fragment-burst {
  opacity: var(--cue-intensity, 0.72);
}

.cinema-shell[data-cue="dust"] .story-cue-field {
  opacity: calc(var(--cue-intensity, 0.72) * 0.44);
}

.cinema-shell[data-cue="dust"] .story-cue-field span {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 181, 84, 0.58), transparent);
}

.cinema-shell[data-cue="breath"] .story-breath,
.cinema-shell[data-cue="breath"] .story-silhouette,
.cinema-shell[data-cue="breath"] .story-memory-thread {
  opacity: var(--cue-intensity, 0.76);
}

.cinema-shell[data-cue="breath"] .story-cue-field {
  opacity: calc(var(--cue-intensity, 0.76) * 0.32);
  transform: scale(var(--shot-breathe, 1));
}

.cinema-shell[data-cue="archive"] .story-archive,
.cinema-shell[data-cue="archive"] .story-memory-thread {
  opacity: var(--cue-intensity, 0.72);
}

.cinema-shell[data-cue="archive"] .story-cue-field span {
  width: min(24vw, 260px);
  background: linear-gradient(90deg, transparent, rgba(255, 235, 185, 0.5), rgba(108, 42, 19, 0.42), transparent);
}

.cinema-shell[data-cue="map"] .story-map,
.cinema-shell[data-cue="map"] .story-cue-field {
  opacity: var(--cue-intensity, 0.74);
}

.cinema-shell[data-cue="map"] .story-cue-field {
  clip-path: polygon(0 0, 100% 0, 100% 76%, 64% 76%, 47% 100%, 31% 76%, 0 76%);
}

.cinema-shell[data-cue="chalk"] .story-horizon,
.cinema-shell[data-cue="chalk"] .story-cue-field {
  opacity: var(--cue-intensity, 0.7);
}

.cinema-shell[data-cue="chalk"] .story-cue-field span {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 210, 0.72), transparent);
  filter: blur(0.2px);
}

.cinema-shell[data-cue="search"] .story-searchlight,
.cinema-shell[data-cue="search"] .story-camera-mask {
  opacity: var(--cue-intensity, 0.82);
}

.cinema-shell[data-cue="search"] .story-cue-field {
  opacity: calc(var(--cue-intensity, 0.82) * 0.28);
  transform: translateX(calc(var(--cue-scan, 50%) - 50%));
}

.cinema-shell[data-cue="refusal"] .story-glyph-mark,
.cinema-shell[data-cue="refusal"] .story-cue-field,
.cinema-shell[data-cue="refusal"] .glyph-field {
  opacity: var(--cue-intensity, 0.86);
}

.cinema-shell[data-cue-family="authority"] .story-camera-mask,
.cinema-shell[data-cue-family="threat"] .story-camera-mask {
  opacity: 0.56;
}

.cinema-shell[data-cue-family="memory"] .story-memory-thread {
  opacity: 0.78;
}

.cinema-shell[data-chapter-motif="collapse"] .story-chapter-sigil,
.cinema-shell[data-chapter-motif="toll"] .story-chapter-sigil {
  opacity: calc(var(--chapter-pressure, 0.8) * 0.44);
  border-radius: 46% 51% 43% 57%;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--chapter-secondary, #72180f) 55%, transparent));
}

.cinema-shell[data-chapter-motif="collapse"] .story-phase-vault,
.cinema-shell[data-chapter-motif="toll"] .story-rubble {
  opacity: calc(var(--chapter-pressure, 0.8) * 0.72);
}

.cinema-shell[data-chapter-motif="fracture"] .story-map,
.cinema-shell[data-chapter-motif="officer"] .story-map {
  opacity: calc(var(--chapter-pressure, 0.8) * 0.88);
}

.cinema-shell[data-chapter-motif="fracture"] .story-chapter-sigil,
.cinema-shell[data-chapter-motif="officer"] .story-chapter-sigil {
  clip-path: polygon(0 0, 78% 0, 100% 36%, 62% 38%, 83% 100%, 0 100%, 38% 52%);
  opacity: calc(var(--chapter-pressure, 0.8) * 0.55);
}

.cinema-shell[data-chapter-motif="descent"] .story-phase-vault,
.cinema-shell[data-chapter-motif="consent"] .story-phase-vault {
  opacity: calc(var(--chapter-pressure, 0.75) * 0.84);
  transform: perspective(640px) rotateX(58deg) translateY(14%);
}

.cinema-shell[data-chapter-motif="inheritance"] .story-archive,
.cinema-shell[data-chapter-motif="wrong-memory"] .story-archive,
.cinema-shell[data-chapter-motif="anomaly"] .story-archive {
  opacity: calc(var(--chapter-pressure, 0.7) * 0.86);
}

.cinema-shell[data-chapter-motif="scar"] .story-scar,
.cinema-shell[data-chapter-motif="speaking-scar"] .story-scar {
  width: 3px;
  box-shadow:
    0 0 20px color-mix(in srgb, var(--chapter-accent, #ff8a43) 78%, transparent),
    0 0 56px color-mix(in srgb, var(--chapter-secondary, #72180f) 64%, transparent);
}

.cinema-shell[data-chapter-motif="chalkline"] .story-horizon,
.cinema-shell[data-chapter-motif="mural"] .story-horizon,
.cinema-shell[data-chapter-motif="return"] .story-horizon {
  opacity: calc(var(--chapter-pressure, 0.7) * 0.9);
  filter: contrast(1.28) brightness(1.08);
}

.cinema-shell[data-chapter-motif="refusal"] .story-glyph-mark,
.cinema-shell[data-chapter-motif="anomaly"] .story-glyph-mark {
  opacity: calc(var(--chapter-pressure, 0.85) * 0.98);
}

.cinema-shell[data-chapter-motif="pre-drone"] .story-searchlight,
.cinema-shell[data-chapter-motif="disappearance"] .story-searchlight {
  opacity: calc(var(--chapter-pressure, 0.88) * 0.98);
  filter: blur(0.2px) brightness(1.24);
}

.cinema-shell[data-chapter-motif="disappearance"] .story-silhouette {
  opacity: 0.38;
  filter: blur(1.4px) drop-shadow(0 30px 70px rgba(0, 0, 0, 0.92));
}

.cinema-shell[data-palette="predawn-slate"] .scene,
.cinema-shell[data-palette="archive-blue"] .scene,
.cinema-shell[data-palette="absence-black"] .scene {
  filter: contrast(1.08) saturate(0.64) brightness(0.64);
}

.cinema-shell[data-palette="glyph-red"] .scene-pressure,
.cinema-shell[data-palette="body-ember"] .scene-pressure,
.cinema-shell[data-palette="ash-red"] .scene-pressure {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--chapter-accent, #ff7d25) 22%, transparent), transparent 18%),
    linear-gradient(100deg, transparent 0 38%, color-mix(in srgb, var(--chapter-secondary, #72180f) 24%, transparent), transparent 62% 100%);
}

.topline {
  position: absolute;
  z-index: 12;
  top: 20px;
  left: clamp(18px, 4vw, 60px);
  right: clamp(18px, 4vw, 60px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.68rem, 1.4vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 234, 210, 0.72);
}

.topline strong {
  color: #ffd188;
  font-weight: 700;
}

.title-panel {
  position: absolute;
  z-index: 10;
  top: clamp(72px, 12vh, 136px);
  left: clamp(18px, 5vw, 76px);
  width: min(680px, 56vw);
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  transition:
    opacity 900ms ease,
    transform 900ms ease,
    top 900ms ease,
    width 900ms ease;
}

.eyebrow,
.title-panel p,
.now-playing span,
.chapter-strip-header span,
.source-rail-header span,
.source-aperture-header span,
.source-signal-list small {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(248, 234, 210, 0.7);
}

.eyebrow {
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
}

.title-panel h1 {
  margin: 0.08em 0 0.06em;
  color: #ffd188;
  font-size: clamp(4rem, 8vw, 7.35rem);
  line-height: 0.84;
  letter-spacing: 0;
  text-transform: uppercase;
  filter: drop-shadow(0 0 28px rgba(255, 125, 37, 0.2));
  transition: font-size 900ms ease, opacity 900ms ease;
}

.title-panel p {
  margin: 0;
  max-width: 620px;
  font-size: clamp(0.75rem, 1.6vw, 0.92rem);
  line-height: 1.6;
}

.alia-anchor {
  position: absolute;
  z-index: 5;
  right: clamp(-96px, -2vw, -18px);
  top: 0;
  bottom: 0;
  width: min(62vw, 860px);
  margin: 0;
  overflow: hidden;
  opacity: 0.9;
  filter: drop-shadow(-30px 0 90px rgba(0, 0, 0, 0.9));
  transition: opacity 900ms ease, filter 900ms ease, transform 900ms ease;
}

.alia-anchor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, transparent 38%, rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.76), transparent 24%, transparent 64%, rgba(0, 0, 0, 0.88));
}

.alia-anchor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transform: scale(1.05);
  animation: anchor-breathe 12s ease-in-out infinite;
}

.cinema-shell:not([data-plate="alia"]) .alia-anchor {
  opacity: 0.3;
  filter: blur(0.8px) drop-shadow(-30px 0 90px rgba(0, 0, 0, 0.9));
}

.cinema-shell[data-plate="alia"] .alia-anchor {
  opacity: 0.92;
}

.cinema-shell.is-playing .title-panel {
  top: 74px;
  width: min(430px, 44vw);
  opacity: 0.72;
  transform: translate3d(0, -12px, 0);
}

.cinema-shell.is-playing .title-panel h1 {
  font-size: clamp(2rem, 4.1vw, 3.8rem);
  opacity: 0.88;
}

.cinema-shell.is-playing .title-panel p {
  max-width: 360px;
  font-size: clamp(0.62rem, 1.1vw, 0.74rem);
}

.cinema-shell.is-playing:not([data-plate="alia"]) .alia-anchor {
  opacity: 0;
  filter: blur(2px) drop-shadow(-30px 0 90px rgba(0, 0, 0, 0.9));
}

.cinema-shell.is-playing:not([data-plate="alia"]) .scene {
  filter: contrast(1.14) saturate(0.86) brightness(0.76);
}

.cinema-shell.is-playing[data-plate="alia"] .alia-anchor {
  opacity: 0.78;
}

.cinema-shell[data-plate="refusal"] .glyph-field,
.cinema-shell[data-plate="tunnel"] .glyph-field,
.cinema-shell[data-plate="archive"] .glyph-field {
  opacity: 0.82;
}

.cinema-shell[data-plate="predawn"] .glyph-field,
.cinema-shell[data-plate="chalk"] .glyph-field,
.cinema-shell[data-plate="library"] .glyph-field,
.cinema-shell[data-plate="balfour"] .glyph-field {
  opacity: 0.28;
}

.caption-zone {
  position: absolute;
  z-index: 13;
  left: 50%;
  bottom: clamp(36px, 6.5vh, 66px);
  transform: translateX(-50%);
  width: min(900px, calc(100vw - 40px));
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 12px clamp(18px, 4vw, 46px);
  border-top: 1px solid rgba(255, 196, 106, 0.58);
  border-bottom: 1px solid rgba(255, 196, 106, 0.28);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.62) 14%, rgba(0, 0, 0, 0.66) 86%, transparent);
  backdrop-filter: blur(7px);
  transition:
    bottom 500ms ease,
    min-height 500ms ease,
    opacity 500ms ease,
    padding 500ms ease,
    transform 500ms ease,
    width 500ms ease;
}

.caption-zone p {
  margin: 0;
  text-align: center;
  font-size: clamp(1.02rem, 2vw, 1.58rem);
  line-height: 1.18;
  text-wrap: balance;
  text-shadow: 0 5px 22px #000;
  transition: font-size 500ms ease, line-height 500ms ease;
}

.cinema-shell.cinema-focus .caption-zone {
  bottom: clamp(52px, 7vh, 86px);
  width: min(920px, calc(100vw - 96px));
  min-height: 56px;
  padding: 10px clamp(18px, 3.8vw, 42px);
  border-top-color: rgba(255, 220, 158, 0.42);
  border-bottom-color: rgba(255, 196, 106, 0.18);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.68) 15%, rgba(0, 0, 0, 0.72) 85%, transparent);
  transform: translate3d(-50%, 0, 0);
}

.cinema-shell.cinema-focus.controls-open .caption-zone {
  bottom: clamp(104px, 15vh, 138px);
}

.cinema-shell.cinema-focus .caption-zone p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.24;
  letter-spacing: 0;
}

.book-reader {
  position: absolute;
  z-index: 34;
  inset: clamp(34px, 5vh, 68px) clamp(18px, 4vw, 64px) clamp(108px, 16vh, 150px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 16px, 0) scale(0.985);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.cinema-shell.book-open .book-reader {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.book-reader-shell {
  width: min(980px, 100%);
  height: min(650px, 100%);
  min-height: min(520px, 72vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 212, 142, 0.44);
  border-radius: 6px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 207, 128, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(24, 14, 8, 0.94), rgba(6, 4, 3, 0.98) 46%, rgba(22, 13, 8, 0.94));
  box-shadow:
    0 38px 120px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px) saturate(1.05);
}

.book-reader-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 18px;
  align-items: end;
  padding: 16px clamp(16px, 3vw, 28px) 13px;
  border-bottom: 1px solid rgba(255, 196, 106, 0.22);
  background: rgba(0, 0, 0, 0.36);
}

.book-reader-header span,
.book-reader-header small {
  color: rgba(239, 204, 150, 0.74);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
}

.book-reader-header strong {
  grid-column: 1;
  overflow: hidden;
  color: rgba(255, 244, 226, 0.96);
  font-size: clamp(1rem, 1.7vw, 1.34rem);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-reader-header small {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 270px;
  text-align: right;
  line-height: 1.34;
}

.book-reader-lines {
  min-height: 0;
  overflow-y: auto;
  padding: 14px clamp(12px, 2.4vw, 26px) 28px;
  scrollbar-color: rgba(255, 196, 106, 0.54) rgba(0, 0, 0, 0.3);
}

.book-reader-line {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: rgba(246, 232, 208, 0.72);
  background: transparent;
  text-align: left;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.book-reader-line:hover {
  border-color: rgba(255, 196, 106, 0.24);
  background: rgba(255, 196, 106, 0.06);
}

.book-reader-line small {
  padding-top: 2px;
  color: rgba(239, 204, 150, 0.48);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  line-height: 1.4;
}

.book-reader-line-source {
  color: inherit;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.48;
}

.book-reader-line-translation {
  grid-column: 2;
  color: rgba(255, 217, 158, 0.74);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1.12vw, 1.02rem);
  line-height: 1.44;
}

.book-reader-line.is-active {
  border-color: rgba(255, 207, 128, 0.7);
  color: #fff8ec;
  background:
    linear-gradient(90deg, rgba(255, 177, 77, 0.2), rgba(255, 224, 165, 0.08) 48%, rgba(255, 177, 77, 0.12)),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 4px 0 0 rgba(255, 196, 106, 0.9),
    0 12px 40px rgba(0, 0, 0, 0.28);
  transform: translate3d(4px, 0, 0);
}

.book-reader-line.is-active small {
  color: rgba(255, 225, 174, 0.82);
}

.book-reader-empty {
  margin: 0;
  padding: 18px;
  color: rgba(246, 232, 208, 0.72);
  font-family: Arial, Helvetica, sans-serif;
}

.cinema-shell.book-open .caption-zone {
  opacity: 0.18;
}

.cinema-shell.book-open .scene-projector {
  filter: brightness(0.58) saturate(0.76);
}

.cinema-shell.cinema-focus .title-panel {
  opacity: 0;
  transform: translate3d(0, -28px, 0) scale(0.9);
}

.cinema-shell.cinema-focus .source-aperture,
.cinema-shell.cinema-focus .source-rail,
.cinema-shell.cinema-focus .chapter-telemetry {
  opacity: 0 !important;
  pointer-events: none;
}

.cinema-shell.cinema-focus .shot-card,
.cinema-shell.cinema-focus .story-incident {
  opacity: 0;
}

.cinema-shell.cinema-focus #cinematic-field {
  opacity: 0.34;
  filter: contrast(1.04) saturate(0.78);
}

.cinema-shell.cinema-focus #particle-field,
.cinema-shell.cinema-focus .glyph-field,
.cinema-shell.cinema-focus .scene-pressure {
  opacity: 0.18;
}

.cinema-shell.cinema-focus .story-layer::before {
  opacity: 0.18;
}

.cinema-shell.cinema-focus .story-layer::after {
  opacity: 0.04;
}

.cinema-shell.cinema-focus .story-camera-mask {
  opacity: 0.1;
}

.cinema-shell.cinema-focus .story-layer {
  transform: none;
}

.cinema-shell.cinema-focus .vignette {
  opacity: 0.42;
}

.cinema-shell.cinema-focus .film-grain {
  opacity: 0.06;
  animation: none;
}

.cinema-shell.cinema-focus .letterbox {
  opacity: 0.22;
}

.cinema-shell.cinema-focus .alia-anchor {
  z-index: 11;
  right: clamp(-34px, -2.2vw, -14px);
  width: min(44vw, 610px);
  opacity: 0.32 !important;
  visibility: visible;
  filter:
    saturate(0.98)
    contrast(1.04)
    brightness(1.18)
    drop-shadow(-34px 0 88px rgba(0, 0, 0, 0.72));
  transform: translate3d(0, 0, 0) scale(1.01);
}

.cinema-shell.cinema-focus .alia-anchor::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, transparent 34%, rgba(0, 0, 0, 0.02) 66%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.28), transparent 28%, transparent 74%, rgba(0, 0, 0, 0.46));
}

.cinema-shell.cinema-focus[data-projector-plate="alia"] .alia-anchor,
.cinema-shell.cinema-focus[data-chapter-motif="scar"] .alia-anchor,
.cinema-shell.cinema-focus[data-chapter-motif="speaking-scar"] .alia-anchor {
  opacity: 0.6 !important;
  right: clamp(-24px, -1.6vw, -10px);
}

.cinema-shell.cinema-focus #cinematic-field,
.cinema-shell.cinema-focus #particle-field,
.cinema-shell.cinema-focus .glyph-field,
.cinema-shell.cinema-focus .impact-flash,
.cinema-shell.cinema-focus .scene-pressure,
.cinema-shell.cinema-focus .story-horizon,
.cinema-shell.cinema-focus .story-camera-mask,
.cinema-shell.cinema-focus .story-breath,
.cinema-shell.cinema-focus .story-dust-curtain,
.cinema-shell.cinema-focus .story-cue-field,
.cinema-shell.cinema-focus .story-memory-thread,
.cinema-shell.cinema-focus .caption-cinema,
.cinema-shell.cinema-focus .story-chapter-sigil,
.cinema-shell.cinema-focus .story-phase-vault,
.cinema-shell.cinema-focus .story-map,
.cinema-shell.cinema-focus .story-tunnel-lines,
.cinema-shell.cinema-focus .story-archive,
.cinema-shell.cinema-focus .story-searchlight,
.cinema-shell.cinema-focus .story-glyph-mark,
.cinema-shell.cinema-focus .story-fragment-burst,
.cinema-shell.cinema-focus .story-silhouette,
.cinema-shell.cinema-focus .character-stage,
.cinema-shell.cinema-focus .story-rubble,
.cinema-shell.cinema-focus .story-artifacts,
.cinema-shell.cinema-focus .source-diorama,
.cinema-shell.cinema-focus .source-lens-stack,
.cinema-shell.cinema-focus .source-montage,
.cinema-shell.cinema-focus .source-tableau,
.cinema-shell.cinema-focus .caption-tableau,
.cinema-shell.cinema-focus .shot-card,
.cinema-shell.cinema-focus .story-incident {
  opacity: 0 !important;
  visibility: hidden;
  animation: none !important;
  transition-duration: 240ms;
}

.cinema-shell.cinema-focus .scene-projector {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
  opacity: calc(0.9 + var(--projector-pressure, 0.62) * 0.1);
  filter: saturate(1.14) contrast(1.08) brightness(1.34);
  transform: none;
}

.cinema-shell.cinema-focus .scene-projector::before,
.cinema-shell.cinema-focus .scene-projector::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.cinema-shell.cinema-focus .scene-projector::before {
  z-index: 2;
  background:
    radial-gradient(
      circle at var(--projector-grade-x, 52%) var(--projector-grade-y, 38%),
      rgba(255, 231, 184, 0.18) 0 8%,
      rgba(255, 184, 92, 0.06) 22%,
      transparent 54%
    ),
    radial-gradient(
      ellipse at calc(var(--projector-grade-x, 52%) - 18%) calc(var(--projector-grade-y, 38%) + 18%),
      rgba(123, 238, 222, 0.08),
      transparent 42%
    ),
    repeating-linear-gradient(
      100deg,
      transparent 0 27px,
      rgba(255, 232, 190, 0.034) 28px,
      transparent 31px
    );
  mix-blend-mode: screen;
  opacity: var(--projector-haze, 0.22);
  filter: blur(0.35px) saturate(1.06);
  transform: translate3d(-1.2%, -0.8%, 0) scale(1.035);
  animation: movie-atmosphere 16s ease-in-out infinite alternate;
}

.cinema-shell.cinema-focus .scene-projector::after {
  z-index: 3;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.26) 0%,
      transparent 17% 82%,
      rgba(0, 0, 0, 0.3) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.36) 0%,
      transparent 16% 76%,
      rgba(0, 0, 0, 0.62) 100%
    ),
    radial-gradient(
      ellipse at 50% 48%,
      transparent 0 48%,
      rgba(0, 0, 0, 0.44) 100%
    );
  opacity: var(--projector-shadow, 0.34);
}

.cinema-shell.cinema-focus .scene-projector-frame {
  border: 0;
  clip-path: none;
  background-size:
    cover,
    cover,
    calc(104% + var(--projector-cut-zoom, 8%)) auto;
  background-position:
    center,
    center,
    var(--projector-center-x, 50%) var(--projector-center-y, 50%);
  filter:
    brightness(var(--projector-variant-brightness, 1))
    contrast(var(--projector-variant-contrast, 1));
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.18),
    inset 0 -14vh 72px rgba(0, 0, 0, 0.28);
  transform: none;
  animation: projector-drift 18s ease-in-out infinite alternate;
  transition: filter 520ms ease;
}

.cinema-shell.cinema-focus.cut .scene-projector-frame {
  filter:
    brightness(calc(var(--projector-variant-brightness, 1) * 1.12))
    contrast(calc(var(--projector-variant-contrast, 1) * 1.06))
    saturate(1.1);
}

.cinema-shell.cinema-focus.cut .scene-projector-frame::after {
  animation: movie-cut-flash 520ms ease-out both;
}

.cinema-shell.cinema-focus .scene-projector-frame::before {
  opacity: var(--projector-secondary-opacity, 0.36);
  animation: movie-secondary-drift 9s ease-in-out infinite alternate;
}

.cinema-shell.cinema-focus .scene-projector-frame::after {
  opacity: 0.14;
}

.cinema-shell.cinema-focus .scene-projector-meta,
.cinema-shell.cinema-focus .scene-projector-rift,
.cinema-shell.cinema-focus .scene-projector-aperture,
.cinema-shell.cinema-focus .scene-projector-progress {
  opacity: 0;
}

.cinema-shell.cinema-focus .story-dust-curtain,
.cinema-shell.cinema-focus .story-cue-field,
.cinema-shell.cinema-focus .story-memory-thread,
.cinema-shell.cinema-focus .story-chapter-sigil,
.cinema-shell.cinema-focus .story-phase-vault,
.cinema-shell.cinema-focus .story-map,
.cinema-shell.cinema-focus .story-tunnel-lines,
.cinema-shell.cinema-focus .story-archive,
.cinema-shell.cinema-focus .story-glyph-mark,
.cinema-shell.cinema-focus .story-fragment-burst {
  opacity: 0.04 !important;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .scene-projector {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: calc(0.9 + var(--projector-pressure, 0.62) * 0.1);
  filter: saturate(1.16) contrast(1.08) brightness(1.36);
  transform: none;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .scene-projector-frame {
  border: 0;
  clip-path: none;
  background-size:
    cover,
    cover,
    calc(104% + var(--projector-cut-zoom, 8%)) auto;
  background-position:
    center,
    center,
    var(--projector-center-x, 50%) var(--projector-center-y, 50%);
  filter:
    brightness(var(--projector-variant-brightness, 1))
    contrast(var(--projector-variant-contrast, 1));
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.18),
    inset 0 -14vh 72px rgba(0, 0, 0, 0.28);
  transform: none;
}

.cinema-shell.cinema-focus[data-projector-variant="close"] .scene-projector-frame {
  animation-duration: 22s;
}

.cinema-shell.cinema-focus[data-projector-variant="detail"] .scene-projector-frame {
  animation-duration: 14s;
}

.cinema-shell.cinema-focus[data-projector-editorial="true"] .scene-projector-frame {
  filter:
    brightness(calc(var(--projector-variant-brightness, 1) * 1.1))
    contrast(calc(var(--projector-variant-contrast, 1) * 1.05))
    saturate(1.08);
}

.cinema-shell.cinema-focus[data-projector-editorial="true"] .scene-projector-frame::before {
  opacity: calc(var(--projector-secondary-opacity, 0.36) + 0.08);
  mix-blend-mode: soft-light;
}

.cinema-shell.cinema-focus[data-projector-mood="impact"] .scene-projector {
  filter: saturate(1.06) contrast(1.14) brightness(1.24);
}

.cinema-shell.cinema-focus[data-projector-mood="archive"] .scene-projector {
  filter: saturate(0.98) contrast(1.14) brightness(1.2) hue-rotate(-7deg);
}

.cinema-shell.cinema-focus[data-projector-mood="memory"] .scene-projector {
  filter: saturate(1.04) contrast(1.08) brightness(1.22) hue-rotate(3deg);
}

.cinema-shell.cinema-focus[data-projector-mood="absence"] .scene-projector {
  filter: saturate(0.78) contrast(1.16) brightness(1.2) hue-rotate(-18deg);
}

.cinema-shell.cinema-focus[data-projector-mood="passage"] .scene-projector {
  filter: saturate(0.9) contrast(1.16) brightness(1.18) hue-rotate(-10deg);
}

@keyframes projector-drift {
  from {
    background-position:
      center,
      center,
      calc(var(--projector-center-x, 50%) - 1.8%) calc(var(--projector-center-y, 50%) + 0.7%);
  }

  to {
    background-position:
      center,
      center,
      calc(var(--projector-center-x, 50%) + 2.2%) calc(var(--projector-center-y, 50%) - 1.2%);
  }
}

@keyframes movie-secondary-drift {
  from {
    background-position:
      center,
      center,
      calc(50% + var(--projector-secondary-pan, 0%)) calc(50% + var(--projector-secondary-lift, 0px));
  }

  to {
    background-position:
      center,
      center,
      calc(46% + var(--projector-secondary-pan, 0%)) calc(52% + var(--projector-secondary-lift, 0px));
  }
}

@keyframes movie-atmosphere {
  from {
    transform: translate3d(-1.2%, -0.8%, 0) scale(1.035);
    background-position:
      center,
      center,
      0 0;
  }

  to {
    transform: translate3d(1.35%, 0.9%, 0) scale(1.055);
    background-position:
      center,
      center,
      var(--projector-roll-x, 35px) var(--projector-roll-y, -21px);
  }
}

@keyframes movie-gate-cut {
  0% {
    opacity: 0;
    filter: blur(0.2px) brightness(0.9);
    transform: translate3d(-1.4%, 0, 0) scale(1.015);
  }

  18% {
    opacity: 0.42;
    filter: blur(0.4px) brightness(1.04);
    transform: translate3d(0.7%, 0, 0) scale(1.025);
  }

  48% {
    opacity: 0.24;
    filter: blur(0.2px) brightness(0.96);
    transform: translate3d(0.25%, 0, 0) scale(1.01);
  }

  100% {
    opacity: 0;
    filter: blur(0.1px) brightness(1);
    transform: translate3d(1.4%, 0, 0) scale(1);
  }
}

@keyframes movie-gate-slide {
  0% {
    opacity: 0;
    transform: translate3d(-7%, 0, 0);
  }

  24% {
    opacity: 0.5;
    transform: translate3d(-1.2%, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }
}

@keyframes movie-gate-aperture {
  0% {
    opacity: 0;
    transform: scaleX(1.18) scaleY(0.96);
  }

  22% {
    opacity: 0.44;
    transform: scaleX(0.94) scaleY(1.02);
  }

  100% {
    opacity: 0;
    transform: scaleX(1.04) scaleY(1);
  }
}

@keyframes movie-cut-flash {
  0% {
    opacity: 0.46;
    background:
      linear-gradient(90deg, rgba(255, 232, 190, 0.16), transparent 16% 84%, rgba(255, 184, 92, 0.12)),
      repeating-linear-gradient(0deg, rgba(255, 238, 204, 0.16) 0 1px, transparent 1px 5px),
      linear-gradient(to bottom, rgba(255, 225, 170, 0.16), transparent 22% 78%, rgba(0, 0, 0, 0.62));
  }

  100% {
    opacity: 0.14;
  }
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .scene-projector-frame::before {
  opacity: calc(var(--projector-secondary-opacity, 0.36) + 0.04);
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .scene-projector-frame::after {
  opacity: 0.16;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .scene-projector-meta {
  opacity: 0;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .caption-tableau {
  left: clamp(18px, 3vw, 54px);
  right: clamp(18px, 3vw, 54px);
  top: clamp(34px, 6vh, 78px);
  bottom: clamp(118px, 17vh, 190px);
  opacity: calc(0.42 + var(--incident-intensity, 0.58) * 0.3);
  filter:
    drop-shadow(0 0 24px color-mix(in srgb, var(--chapter-accent, #f4c779) 16%, transparent))
    saturate(0.9);
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .caption-cinema {
  opacity: 0;
  filter: blur(0.4px) saturate(0.82);
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .source-diorama,
.cinema-shell.cinema-focus[data-projector-source="caption"] .source-lens-stack,
.cinema-shell.cinema-focus[data-projector-source="caption"] .source-montage,
.cinema-shell.cinema-focus[data-projector-source="caption"] .source-tableau {
  opacity: 0.04;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .title-panel {
  opacity: 0;
  transform: translate3d(0, -36px, 0) scale(0.82);
  transition-duration: 420ms;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .topline {
  opacity: 0.16;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .source-aperture,
.cinema-shell.cinema-focus[data-projector-source="caption"] .source-rail,
.cinema-shell.cinema-focus[data-projector-source="caption"] .chapter-telemetry {
  opacity: 0 !important;
  pointer-events: none;
  transition-duration: 420ms;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .shot-card,
.cinema-shell.cinema-focus[data-projector-source="caption"] .story-incident {
  opacity: 0;
}

.cinema-shell.cinema-focus[data-projector-source="caption"] .caption-zone {
  bottom: clamp(56px, 7.2vh, 92px);
  width: min(900px, calc(100vw - 104px));
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0.76) 85%, transparent);
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="mural"] .caption-tableau-mural {
  left: clamp(36px, 8%, 96px);
  top: clamp(24px, 7%, 64px);
  width: min(54vw, 690px);
  height: min(55vh, 450px);
  opacity: 0.94;
  border-color: rgba(255, 235, 204, 0.34);
  box-shadow:
    inset 0 0 82px rgba(0, 0, 0, 0.62),
    inset 0 0 28px rgba(255, 235, 204, 0.12),
    0 0 42px rgba(255, 199, 121, 0.12);
  filter: drop-shadow(0 0 28px rgba(255, 214, 146, 0.16));
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="mural"] .caption-tableau-mural::before {
  opacity: 0.74;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="mural"] .caption-tableau-mural::after {
  opacity: 0.88;
  width: 34%;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="scar"] .caption-tableau-scar,
.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="speaking-scar"] .caption-tableau-scar {
  left: 34%;
  top: clamp(6px, 2%, 24px);
  width: min(38vw, 470px);
  height: min(64vh, 500px);
  opacity: 0.95;
  transform: translateX(-50%) scale(1.02);
  filter:
    drop-shadow(0 0 38px rgba(255, 116, 44, 0.3))
    saturate(1.14);
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="scar"] .caption-tableau-scar::before,
.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="speaking-scar"] .caption-tableau-scar::before {
  opacity: 0.42;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="scar"] .caption-tableau-scar::after,
.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="speaking-scar"] .caption-tableau-scar::after {
  opacity: 0.62;
  width: 28%;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="officer"] .caption-tableau-officer {
  left: 5%;
  right: 5%;
  top: clamp(38px, 8%, 74px);
  height: min(56vh, 440px);
  opacity: 0.94;
  transform: perspective(840px) rotateX(42deg) translateY(-18px) scale(1.04);
  filter:
    drop-shadow(0 34px 78px rgba(0, 0, 0, 0.54))
    saturate(1.08);
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="officer"] .caption-tableau-officer::before {
  opacity: 0.46;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="officer"] .caption-tableau-officer::after {
  opacity: 0.42;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="toll"] .caption-tableau-toll {
  left: clamp(34px, 7%, 90px);
  bottom: clamp(34px, 7%, 80px);
  width: min(56vw, 760px);
  height: min(48vh, 390px);
  opacity: 0.94;
  transform: rotate(-0.4deg) translateY(-8px) scale(1.02);
  box-shadow:
    0 0 46px rgba(182, 47, 23, 0.12),
    inset 0 0 52px rgba(255, 222, 154, 0.05);
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="toll"] .caption-tableau-toll::before {
  opacity: 0.5;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="toll"] .caption-tableau-toll::after {
  opacity: 0.58;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="disappearance"] .caption-tableau-absence {
  right: clamp(32px, 7%, 92px);
  top: clamp(12px, 3%, 38px);
  width: min(54vw, 680px);
  height: min(62vh, 500px);
  opacity: 0.96;
  filter:
    drop-shadow(0 0 54px rgba(255, 226, 169, 0.12))
    contrast(1.1);
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="disappearance"] .caption-tableau-absence::before {
  opacity: 0.54;
}

.cinema-shell.cinema-focus[data-projector-source="caption"][data-chapter-motif="disappearance"] .caption-tableau-absence::after {
  opacity: 0.78;
}

.cinema-shell.captions-off .caption-zone {
  opacity: 0;
}

.chapter-telemetry {
  position: absolute;
  z-index: 14;
  right: clamp(18px, 4vw, 60px);
  bottom: clamp(164px, 19vh, 218px);
  display: flex;
  gap: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248, 234, 210, 0.78);
}

.chapter-telemetry span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 196, 106, 0.28);
  background: rgba(0, 0, 0, 0.48);
}

.source-aperture {
  position: absolute;
  z-index: 14;
  left: clamp(18px, 4vw, 60px);
  top: clamp(166px, 24vh, 238px);
  width: min(520px, 42vw);
  min-width: 340px;
  pointer-events: none;
  opacity: 0.46;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 700ms ease,
    transform 700ms ease,
    filter 700ms ease;
}

.cinema-shell.is-playing .source-aperture {
  opacity: 0.94;
  transform: translate3d(0, 0, 0);
}

.source-aperture-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding-left: 2px;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.9);
}

.source-aperture-header span {
  color: color-mix(in srgb, var(--chapter-accent, #f4c779) 76%, rgba(248, 234, 210, 0.64));
  font-size: 0.58rem;
}

.source-aperture-header strong {
  overflow: hidden;
  color: rgba(255, 239, 208, 0.86);
  font-size: clamp(0.76rem, 1.2vw, 0.92rem);
  font-weight: 400;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-aperture-strip {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 4px;
  height: 42px;
  padding: 4px;
  border: 1px solid rgba(255, 196, 106, 0.2);
  background:
    linear-gradient(90deg, rgba(2, 1, 1, 0.78), rgba(22, 9, 3, 0.34), rgba(2, 1, 1, 0.62)),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255, 196, 106, 0.08) 29px 30px);
  box-shadow:
    inset 0 0 24px rgba(255, 138, 43, 0.08),
    0 24px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.source-aperture-cell {
  position: relative;
  display: block;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 16%, transparent);
  background:
    linear-gradient(to top, color-mix(in srgb, var(--chapter-secondary, #72180f) 30%, transparent) 0 calc(var(--signal-progress, 0) * 100%), transparent 0),
    linear-gradient(160deg, rgba(12, 7, 3, 0.92), rgba(45, 18, 7, calc(0.16 + var(--cell-pressure, 0.7) * 0.18)));
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6);
  opacity: 0.52;
  overflow: hidden;
  transition:
    opacity 300ms ease,
    transform 300ms ease,
    border-color 300ms ease,
    background 300ms ease;
}

.source-aperture-cell::before,
.source-aperture-cell::after,
.source-aperture-cell i {
  content: "";
  position: absolute;
  inset: auto;
  display: block;
  pointer-events: none;
}

.source-aperture-cell::before {
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chapter-accent, #f4c779) 70%, transparent), transparent);
  transform: rotate(var(--cell-line-tilt, 0deg));
}

.source-aperture-cell::after {
  left: 50%;
  top: 50%;
  width: 15px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #f4c779) 52%, transparent);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale(var(--cell-ring, 0.58));
  opacity: 0.42;
}

.source-aperture-cell i:nth-child(1) {
  left: 25%;
  top: 20%;
  width: 1px;
  height: 62%;
  background: color-mix(in srgb, var(--chapter-accent, #f4c779) 52%, transparent);
  transform: rotate(-18deg);
}

.source-aperture-cell i:nth-child(2) {
  left: 48%;
  top: 14%;
  width: 1px;
  height: 70%;
  background: color-mix(in srgb, var(--chapter-secondary, #72180f) 76%, transparent);
  transform: rotate(11deg);
}

.source-aperture-cell i:nth-child(3) {
  right: 20%;
  bottom: 18%;
  width: 42%;
  height: 1px;
  background: color-mix(in srgb, var(--chapter-accent, #f4c779) 56%, transparent);
  transform: rotate(28deg);
}

.source-aperture-cell[data-signal-kind="impact"] {
  --cell-ring: 1.08;
  --cell-line-tilt: 18deg;
}

.source-aperture-cell[data-signal-kind="body"],
.source-aperture-cell[data-signal-kind="signal"] {
  --cell-ring: 0.86;
  --cell-line-tilt: -11deg;
}

.source-aperture-cell[data-signal-kind="memory"]::before {
  height: 3px;
  border-radius: 999px;
}

.source-aperture-cell[data-signal-kind="voice"] i {
  height: 1px;
  width: 66%;
}

.source-aperture-cell[data-signal-kind="voice"] i:nth-child(1) {
  left: 16%;
  top: 30%;
}

.source-aperture-cell[data-signal-kind="voice"] i:nth-child(2) {
  left: 10%;
  top: 50%;
}

.source-aperture-cell[data-signal-kind="voice"] i:nth-child(3) {
  left: 22%;
  top: 70%;
}

.source-aperture-cell.is-past {
  opacity: 0.38;
  background:
    linear-gradient(180deg, rgba(91, 33, 11, 0.32), rgba(5, 3, 2, 0.78));
}

.source-aperture-cell.is-next {
  opacity: 0.74;
  border-color: color-mix(in srgb, var(--chapter-accent, #f4c779) 36%, transparent);
}

.source-aperture-cell.is-active {
  opacity: 1;
  border-color: color-mix(in srgb, var(--chapter-accent, #f4c779) 78%, transparent);
  transform: translateY(-4px) scaleY(1.2);
  box-shadow:
    inset 0 0 22px color-mix(in srgb, var(--chapter-accent, #f4c779) 18%, transparent),
    0 0 28px color-mix(in srgb, var(--chapter-accent, #f4c779) 24%, transparent);
}

.source-rail {
  display: grid;
  grid-template-columns: minmax(180px, 270px) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 196, 106, 0.2);
  background:
    linear-gradient(90deg, rgba(4, 2, 1, 0.98), rgba(12, 6, 3, 0.94)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255, 196, 106, 0.045) 59px 60px);
  overflow: hidden;
}

.source-rail-header {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px clamp(12px, 2vw, 24px);
  border-right: 1px solid rgba(255, 196, 106, 0.18);
}

.source-rail-header span {
  font-size: 0.62rem;
}

.source-rail-header strong {
  overflow: hidden;
  color: rgba(248, 234, 210, 0.86);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-signal-list {
  min-width: 0;
  display: grid;
  grid-auto-columns: minmax(118px, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  scrollbar-color: rgba(255, 196, 106, 0.42) #050302;
}

.source-signal-list button {
  position: relative;
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-width: 0 1px 0 0;
  border-color: rgba(255, 196, 106, 0.16);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(11, 6, 3, 0.88), rgba(3, 2, 1, 0.96));
  padding: 8px 10px;
  overflow: hidden;
  text-align: left;
}

.source-signal-list button::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: calc(var(--signal-progress, 0) * 100%);
  height: 2px;
  background: color-mix(in srgb, var(--chapter-accent, #f4c779) 84%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--chapter-accent, #f4c779) 34%, transparent);
}

.source-signal-list button:hover,
.source-signal-list button:focus-visible,
.source-signal-list button.is-active {
  background:
    linear-gradient(180deg, rgba(101, 38, 13, 0.74), rgba(8, 4, 2, 0.98));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--chapter-accent, #f4c779) 76%, transparent);
}

.source-signal-list button.is-past {
  background:
    linear-gradient(180deg, rgba(50, 18, 6, 0.68), rgba(3, 2, 1, 0.96));
}

.source-signal-icon {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 196, 106, 0.22);
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--chapter-accent, #f4c779) 18%, transparent), transparent 54%),
    rgba(2, 1, 1, 0.6);
  overflow: hidden;
}

.source-signal-icon::before,
.source-signal-icon::after,
.source-signal-icon i {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.source-signal-icon::before {
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 225, 166, 0.72), transparent);
  transform: rotate(var(--icon-line-tilt, -7deg));
}

.source-signal-icon::after {
  left: 50%;
  top: 50%;
  width: 20px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 212, 142, 0.42);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale(var(--icon-ring, 0.58));
}

.source-signal-icon i:nth-child(1) {
  left: 9px;
  top: 8px;
  width: 1px;
  height: 24px;
  background: rgba(255, 210, 142, 0.54);
  transform: rotate(-19deg);
}

.source-signal-icon i:nth-child(2) {
  left: 20px;
  top: 6px;
  width: 1px;
  height: 26px;
  background: rgba(129, 24, 13, 0.7);
  transform: rotate(14deg);
}

.source-signal-icon i:nth-child(3) {
  right: 7px;
  bottom: 9px;
  width: 18px;
  height: 1px;
  background: rgba(255, 210, 142, 0.52);
  transform: rotate(24deg);
}

.source-signal-list button[data-signal-kind="impact"] .source-signal-icon {
  --icon-ring: 1.05;
  --icon-line-tilt: 17deg;
}

.source-signal-list button[data-signal-kind="voice"] .source-signal-icon i {
  height: 1px;
  width: 24px;
}

.source-signal-list button[data-signal-kind="voice"] .source-signal-icon i:nth-child(1) {
  left: 7px;
  top: 13px;
}

.source-signal-list button[data-signal-kind="voice"] .source-signal-icon i:nth-child(2) {
  left: 5px;
  top: 20px;
}

.source-signal-list button[data-signal-kind="voice"] .source-signal-icon i:nth-child(3) {
  left: 11px;
  top: 27px;
}

.source-signal-list button[data-signal-kind="memory"] .source-signal-icon::before {
  height: 4px;
  border-radius: 999px;
}

.source-signal-list small {
  display: block;
  margin-bottom: 3px;
  font-size: 0.56rem;
}

.source-signal-copy {
  min-width: 0;
}

.source-signal-copy span {
  display: block;
  overflow: hidden;
  color: rgba(248, 234, 210, 0.9);
  font-size: 0.76rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transport {
  display: grid;
  grid-template-columns: 112px minmax(132px, 220px) minmax(92px, 150px) minmax(126px, 214px) minmax(130px, 1fr) minmax(96px, 124px) repeat(4, minmax(72px, 88px));
  gap: 10px;
  align-items: center;
  padding: 12px clamp(12px, 2.4vw, 28px);
  border-top: 1px solid rgba(255, 196, 106, 0.24);
  background: rgba(1, 1, 1, 0.96);
}

.cinema-shell.translations-unavailable .transport {
  grid-template-columns: 112px minmax(132px, 220px) minmax(92px, 150px) minmax(126px, 214px) minmax(130px, 1fr) repeat(4, minmax(72px, 88px));
}

.play-control {
  color: #180701;
  border-color: rgba(255, 220, 150, 0.9);
  background: linear-gradient(135deg, #ffe4ae, #ff9b43 45%, #871e0e);
  font-weight: 800;
}

.now-playing {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-left: 1px solid rgba(255, 196, 106, 0.28);
}

.now-playing span {
  font-size: 0.62rem;
}

.now-playing strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.96rem;
  font-weight: 500;
}

.book-jump,
.chapter-jump,
.language-jump {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.language-jump[hidden] {
  display: none !important;
}

.book-jump span,
.chapter-jump span,
.language-jump span {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.book-jump select,
.chapter-jump select,
.language-jump select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255, 196, 106, 0.42);
  border-radius: 4px;
  color: rgba(248, 234, 210, 0.92);
  background:
    linear-gradient(180deg, rgba(58, 25, 12, 0.92), rgba(8, 4, 2, 0.98));
  padding: 0 10px;
  font: inherit;
  font-size: 0.86rem;
}

.timeline-wrap {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#timeline {
  width: 100%;
  min-height: 32px;
  margin: 0;
  accent-color: var(--gold);
}

.timeline-copy {
  display: flex;
  justify-content: space-between;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
}

.chapter-strip {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  max-height: 130px;
  border-top: 1px solid rgba(255, 196, 106, 0.18);
  background: #050302;
  overflow: hidden;
  transition:
    max-height 700ms ease,
    opacity 700ms ease,
    border-color 700ms ease;
}

.cinema-shell.is-playing .chapter-strip {
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
}

.cinema-shell.cinema-focus .source-rail,
.cinema-shell.cinema-focus .chapter-strip {
  max-height: 0;
  opacity: 0;
  border-color: transparent;
  overflow: hidden;
}

.cinema-shell.cinema-focus .transport {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.08;
  transform: translateY(calc(100% - 8px));
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.cinema-shell.cinema-focus.controls-open .transport {
  opacity: 0.98;
  transform: translateY(0);
}

.chapter-strip-header {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px clamp(14px, 3vw, 28px);
  border-right: 1px solid rgba(255, 196, 106, 0.18);
}

.chapter-strip-header span {
  font-size: 0.68rem;
}

.chapter-strip-header strong {
  color: rgba(248, 234, 210, 0.82);
  font-size: 0.9rem;
  font-weight: 400;
}

.chapter-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  overflow-x: auto;
  scrollbar-color: rgba(255, 196, 106, 0.42) #050302;
}

.chapter-list button {
  min-height: 76px;
  border-width: 0 1px 0 0;
  border-color: rgba(255, 196, 106, 0.18);
  border-radius: 0;
  background: rgba(7, 4, 2, 0.96);
  text-align: left;
  padding: 12px;
}

.chapter-list button.is-active {
  background: linear-gradient(180deg, rgba(100, 36, 11, 0.78), rgba(8, 4, 2, 0.98));
  box-shadow: inset 0 3px 0 #f3b25e;
}

.chapter-list small {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 202, 129, 0.76);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chapter-list span {
  display: block;
  color: rgba(248, 234, 210, 0.9);
  font-size: 0.82rem;
  line-height: 1.2;
}

@keyframes anchor-breathe {
  0%,
  100% {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.12) translate3d(1.2%, -0.8%, 0);
  }
}

@keyframes cast-breathe {
  0%,
  100% {
    transform:
      translate3d(var(--cast-x, 0), var(--cast-y, 0), 0)
      scale(var(--cast-scale, 1));
  }

  50% {
    transform:
      translate3d(var(--cast-x, 0), calc(var(--cast-y, 0) - 5px), 0)
      scale(calc(var(--cast-scale, 1) * 1.015));
  }
}

@keyframes cast-threat-scan {
  0%,
  100% {
    opacity: 0.34;
    transform: rotate(-3deg) translateX(-8%);
  }

  45% {
    opacity: 0.92;
    transform: rotate(-3deg) translateX(10%);
  }
}

@keyframes cast-name-flicker {
  0%,
  100% {
    opacity: 0.32;
  }

  33% {
    opacity: 0.96;
  }

  66% {
    opacity: 0.58;
  }
}

@keyframes ash-drift {
  0%,
  100% {
    opacity: 0.32;
    transform: translate3d(-8px, 8px, 0) rotate(var(--ash-rotate, 0deg));
  }
  50% {
    opacity: 0.9;
    transform: translate3d(16px, -14px, 0) rotate(var(--ash-rotate, 0deg));
  }
}

@keyframes voice-break {
  0%,
  100% {
    opacity: 0.28;
    transform: scaleX(0.56) translateX(14%);
  }
  38% {
    opacity: 0.86;
    transform: scaleX(1) translateX(0);
  }
  62% {
    opacity: 0.16;
    transform: scaleX(0.18) translateX(38%);
  }
}

@keyframes artifact-turn {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes pulse-ring {
  0%,
  100% {
    filter: blur(0);
    transform: translate3d(-50%, -50%, 0) scale(0.84);
  }
  50% {
    filter: blur(0.8px);
    transform: translate3d(-50%, -50%, 0) scale(1.08);
  }
}

@keyframes tableau-alert {
  0%,
  100% {
    filter: brightness(0.86);
    transform: translate3d(-1%, 0, 0);
  }
  50% {
    filter: brightness(1.3);
    transform: translate3d(1%, -1%, 0);
  }
}

@keyframes tableau-impact {
  0%,
  100% {
    filter: blur(0);
    transform: perspective(700px) rotateX(61deg) translateY(10%) scale(1);
  }
  46% {
    filter: blur(0.8px);
    transform: perspective(700px) rotateX(61deg) translateY(7%) scale(1.04);
  }
}

@keyframes caption-breath {
  0%,
  100% {
    opacity: 0.18;
    filter: blur(0.2px);
  }
  50% {
    opacity: 0.46;
    filter: blur(0);
  }
}

@keyframes glyph-drift {
  0%,
  100% {
    opacity: 0.32;
    transform: translate3d(-1%, 0, 0) scaleX(1);
  }
  50% {
    opacity: 0.72;
    transform: translate3d(1.5%, -0.5%, 0) scaleX(1.04);
  }
}

@keyframes horizon-drift {
  0%,
  100% {
    transform: translate3d(-1%, 2%, 0) scaleX(1.02);
  }
  50% {
    transform: translate3d(1%, -1%, 0) scaleX(1.06);
  }
}

@keyframes paper-orbit {
  0%,
  100% {
    margin-top: 0;
    filter: sepia(0.3) brightness(0.92);
  }
  50% {
    margin-top: -18px;
    filter: sepia(0.24) brightness(1.14);
  }
}

@keyframes dust-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18%, 0) rotate(7deg) scaleY(0.92);
  }
  22% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate3d(28px, -72%, 0) rotate(13deg) scaleY(1.18);
  }
}

@keyframes shard-drift {
  0%,
  100% {
    opacity: 0.44;
    filter: brightness(0.82);
    margin-top: 0;
  }
  50% {
    opacity: 0.9;
    filter: brightness(1.25);
    margin-top: -24px;
  }
}

@keyframes shutter-cut {
  0% {
    opacity: 0;
    transform: scaleX(0.9);
  }
  18% {
    opacity: 0.76;
    transform: scaleX(1.04);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.22);
  }
}

@keyframes thread-waver {
  0%,
  100% {
    transform: translate3d(-12px, 0, 0) rotate(-1deg);
    opacity: 0.45;
  }
  50% {
    transform: translate3d(14px, -2%, 0) rotate(1.4deg);
    opacity: 1;
  }
}

@keyframes vault-breathe {
  0%,
  100% {
    opacity: 0.42;
    filter: blur(0);
  }
  50% {
    opacity: 1;
    filter: blur(0.7px);
  }
}

@keyframes search-sweep {
  0%,
  100% {
    transform: rotate(-21deg) translateX(-4%);
  }
  50% {
    transform: rotate(19deg) translateX(8%);
  }
}

@keyframes scar-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 26px rgba(255, 116, 44, 0.2));
    transform: translateX(-50%) scaleY(0.98);
  }
  50% {
    filter: drop-shadow(0 0 46px rgba(255, 116, 44, 0.48));
    transform: translateX(-50%) scaleY(1.02);
  }
}

@keyframes anomaly-shift {
  0%,
  100% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(-1deg) translate3d(-10px, 5px, 0);
  }
}

@keyframes absence-thin {
  0%,
  100% {
    filter: blur(0.2px);
    transform: scaleX(1);
  }
  50% {
    filter: blur(1px);
    transform: scaleX(0.86);
  }
}

@keyframes glyph-turn {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes impact-cut {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

@keyframes pressure-breathe {
  0%,
  100% {
    filter: blur(0);
    transform: scaleX(1) translate3d(-0.8%, 0, 0);
  }
  50% {
    filter: blur(1.2px);
    transform: scaleX(1.04) translate3d(0.8%, -0.4%, 0);
  }
}

@keyframes grain {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-1%, 1%, 0);
  }
  100% {
    transform: translate3d(1%, -1%, 0);
  }
}

@media (max-width: 900px) {
  .cinema-shell {
    min-height: 100svh;
  }

  .stage {
    min-height: min(46svh, 420px);
  }

  .topline {
    top: 16px;
    gap: 12px;
    font-size: 0.62rem;
  }

  .title-panel {
    width: calc(100vw - 32px);
    top: 62px;
  }

  .title-panel h1 {
    font-size: 3rem;
    margin-bottom: 0.12em;
  }

  .cinema-shell.is-playing .title-panel {
    top: 58px;
    width: calc(100vw - 32px);
    transform: translate3d(0, -4px, 0);
  }

  .cinema-shell.is-playing .title-panel h1 {
    font-size: 2.42rem;
    line-height: 0.88;
  }

  .cinema-shell.is-playing .title-panel p {
    max-width: 330px;
    font-size: 0.62rem;
    line-height: 1.28;
  }

  .alia-anchor {
    right: -38vw;
    width: 110vw;
    opacity: 0.62;
  }

  .caption-zone {
    bottom: 20px;
    min-height: 78px;
    padding: 12px 16px;
  }

  .caption-zone p {
    font-size: 1.08rem;
  }

  .cinema-shell.cinema-focus .caption-zone {
    bottom: 18px;
    width: calc(100vw - 42px);
    min-height: 48px;
    padding: 8px 12px;
  }

  .cinema-shell.cinema-focus .caption-zone p {
    font-size: 0.86rem;
  }

  .book-reader {
    inset: 54px 12px 156px;
  }

  .cinema-shell.book-open .book-reader {
    inset: 54px 12px clamp(300px, 40vh, 370px);
  }

  .book-reader-shell {
    min-height: min(520px, 68vh);
  }

  .book-reader-header {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 13px 14px 11px;
  }

  .book-reader-header strong,
  .book-reader-header small {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    text-align: left;
    white-space: normal;
  }

  .book-reader-lines {
    padding: 10px 10px 22px;
  }

  .book-reader-line {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 5px 10px;
    padding: 9px 8px;
  }

  .book-reader-line-source {
    font-size: 0.96rem;
    line-height: 1.42;
  }

  .chapter-telemetry {
    left: 16px;
    right: 16px;
    bottom: 132px;
    justify-content: space-between;
    font-size: 0.62rem;
  }

  .source-aperture {
    left: 16px;
    right: 16px;
    top: 130px;
    width: auto;
    min-width: 0;
  }

  .source-aperture-header {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .source-aperture-header span {
    font-size: 0.5rem;
  }

  .source-aperture-header strong {
    font-size: 0.68rem;
  }

  .source-aperture-strip {
    height: 28px;
    gap: 2px;
    padding: 3px;
  }

  .source-rail {
    grid-template-columns: 1fr;
  }

  .source-rail-header {
    min-height: 42px;
    padding: 7px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 196, 106, 0.14);
  }

  .source-rail-header span {
    font-size: 0.54rem;
  }

  .source-rail-header strong {
    font-size: 0.74rem;
  }

  .source-signal-list {
    grid-auto-columns: minmax(106px, 33vw);
  }

  .source-signal-list button {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    min-height: 52px;
    padding: 6px 8px;
  }

  .source-signal-icon {
    width: 28px;
    height: 28px;
  }

  .source-signal-list small {
    font-size: 0.5rem;
  }

  .source-signal-list span {
    font-size: 0.7rem;
  }

  .story-horizon {
    bottom: 21%;
    height: 22%;
  }

  .story-breath {
    right: 6vw;
    bottom: 138px;
    width: 54vw;
  }

  .story-dust-curtain {
    inset: -10% -12% 18%;
  }

  .story-cue-field {
    inset: 0 -28% 0 -18%;
  }

  .story-memory-thread {
    width: 86vw;
  }

  .caption-cinema {
    opacity: 0.18;
  }

  .cinema-shell.is-playing .caption-cinema {
    opacity: calc(0.2 + var(--cue-intensity, 0.7) * 0.18);
  }

  .caption-cinema span {
    max-width: 80vw;
  }

  #caption-cinema-primary {
    left: 20px;
    top: 184px;
    max-width: 84vw;
    font-size: 3rem;
    opacity: 0.16;
  }

  #caption-cinema-secondary {
    left: 22px;
    top: 300px;
    max-width: 64vw;
    font-size: 2rem;
    opacity: 0.16;
  }

  #caption-cinema-tertiary {
    right: 18px;
    top: 232px;
    max-width: 62vw;
    font-size: 1.72rem;
    opacity: 0.14;
  }

  #caption-cinema-pulse {
    bottom: 178px;
    max-width: 52vw;
    font-size: 1.25rem;
    opacity: 0.18;
  }

  .story-chapter-sigil {
    right: -14vw;
    top: 124px;
    width: 54vw;
    opacity: 0.12;
  }

  .story-phase-vault span {
    bottom: 19%;
    height: 42%;
  }

  .story-fragment-burst {
    width: 92vw;
    height: 240px;
  }

  .story-camera-mask {
    opacity: 0.18;
  }

  .story-map {
    right: -16vw;
    top: 122px;
    width: 68vw;
  }

  .story-tunnel-lines {
    width: 98vw;
    height: 35vh;
    bottom: 15%;
  }

  .story-archive {
    left: -4vw;
    top: 150px;
    width: 78vw;
    height: 220px;
  }

  .story-searchlight {
    right: -18vw;
    width: 72vw;
    height: 62vh;
  }

  .story-glyph-mark {
    right: -5vw;
    bottom: 168px;
    width: 46vw;
  }

  .story-silhouette {
    right: 10px;
    bottom: 118px;
    width: 43vw;
    height: 300px;
  }

  .story-rubble {
    height: 154px;
  }

  .artifact-drone {
    left: 2%;
    top: 26%;
    width: 76%;
  }

  .artifact-blast {
    width: 72vw;
  }

  .artifact-ash {
    left: 16%;
    top: 35%;
    width: 72vw;
    height: 170px;
  }

  .artifact-slab {
    left: 8%;
    top: 43%;
    width: 84vw;
    height: 88px;
  }

  .artifact-scarf {
    left: 12%;
    top: 52%;
    width: 76vw;
    height: 58px;
  }

  .artifact-toy {
    left: 45%;
    top: 50%;
    width: 54vw;
  }

  .artifact-voice {
    right: 10%;
    top: 34%;
    width: 70vw;
  }

  .artifact-spiral,
  .artifact-pulse {
    width: 70vw;
  }

  .artifact-tunnel-path {
    bottom: 21%;
    width: 88vw;
    height: 230px;
  }

  .artifact-blood {
    left: 37%;
    top: 55%;
    width: 42vw;
  }

  .scene-projector {
    left: 18px;
    right: 18px;
    top: 150px;
    bottom: 210px;
    opacity: 0.32;
    transform:
      translate3d(0, calc(var(--projector-lift, 0) * 0.35), 0)
      perspective(660px)
      rotateX(1deg);
  }

  .cinema-shell.is-playing .scene-projector {
    opacity: calc(0.34 + var(--incident-intensity, 0.58) * 0.24);
  }

  .scene-projector-frame {
    background-size: auto 116%;
    clip-path: polygon(0 4%, 100% 0, 96% 84%, 76% 100%, 3% 94%);
    transform: scale(1.01);
  }

  .scene-projector-meta {
    left: 7%;
    right: 7%;
    bottom: 22px;
    max-width: 78%;
    gap: 4px;
    padding-left: 10px;
  }

  .scene-projector-meta strong {
    font-size: 0.86rem;
    line-height: 1.16;
  }

  .scene-projector-meta small,
  .scene-projector-meta span {
    font-size: 0.48rem;
    letter-spacing: 0.12em;
  }

  .source-lens-stack {
    left: 14px;
    right: 14px;
    top: 156px;
    bottom: 204px;
    opacity: 0.3;
    transform:
      translate3d(0, calc(var(--lens-drift, 0) * 0.35), 0)
      perspective(620px)
      rotateX(1deg);
  }

  .cinema-shell.is-playing .source-lens-stack {
    opacity: calc(0.28 + var(--incident-intensity, 0.58) * 0.26);
  }

  .source-lens-prev {
    left: 0;
    top: 14%;
    width: 34%;
    height: 34%;
  }

  .source-lens-active {
    left: 18%;
    top: 4%;
    width: 64%;
    height: 58%;
  }

  .source-lens-next {
    right: 0;
    bottom: 20%;
    width: 33%;
    height: 34%;
  }

  .source-diorama {
    left: 18px;
    right: 52px;
    top: 156px;
    bottom: 74px;
    opacity: 0.3;
  }

  .cinema-shell.is-playing .source-diorama {
    opacity: calc(0.34 + var(--incident-intensity, 0.58) * 0.28);
  }

  .diorama-alia {
    left: 45%;
    width: 22vw;
    min-width: 64px;
    height: 150px;
  }

  .diorama-slab {
    left: 12%;
    width: 78%;
  }

  .diorama-voice {
    right: 2%;
    width: 50%;
  }

  .diorama-scarf {
    left: 52%;
    width: 34%;
  }

  .diorama-tunnel {
    left: 4%;
    right: 0;
  }

  .source-tableau {
    left: 16px;
    right: 16px;
    top: 174px;
    bottom: 168px;
  }

  .source-montage {
    right: 10px;
    top: 208px;
    width: 132px;
    height: 218px;
    min-height: 0;
    opacity: 0.2;
    transform:
      translate3d(0, calc(var(--montage-drift, 0) * 0.4), 0)
      perspective(520px)
      rotateY(-10deg)
      rotateZ(-2deg);
  }

  .cinema-shell.is-playing .source-montage {
    opacity: calc(0.22 + var(--incident-intensity, 0.62) * 0.26);
  }

  .source-montage-sprocket {
    left: 0;
    width: 14px;
  }

  .source-montage-sprocket i {
    width: 8px;
  }

  .source-montage-cell {
    min-height: 44px;
  }

  .source-montage-prev {
    left: 20%;
    width: 62%;
  }

  .source-montage-active {
    left: 8%;
    top: 35%;
    width: 86%;
    min-height: 58px;
  }

  .source-montage-next {
    left: 30%;
    width: 58%;
  }

  .tableau-frame {
    clip-path: polygon(0 6%, 88% 0, 100% 18%, 96% 100%, 8% 93%);
  }

  .tableau-figure {
    left: 68%;
    top: 18%;
    width: 28vw;
    height: 210px;
  }

  .tableau-object span:nth-child(1) {
    left: 10%;
    top: 56%;
    width: 70vw;
    height: 28px;
  }

  .tableau-object span:nth-child(2) {
    left: 34%;
    top: 58%;
    width: 31vw;
    height: 44px;
  }

  .tableau-object span:nth-child(3) {
    left: 9%;
    top: 39%;
    width: 82vw;
    height: 78px;
  }

  .tableau-voice span {
    left: 14%;
    width: 74%;
  }

  .cinema-shell[data-shot-size="portrait"] .story-silhouette {
    right: 2px;
    width: 48vw;
  }

  .cinema-shell[data-shot-size="close"] .story-layer {
    transform:
      translate3d(var(--shot-pan, 0), var(--shot-drift-y, 0), 0)
      rotate(var(--shot-tilt, 0deg))
      scale(1.01);
  }

  .shot-card {
    top: 164px;
    bottom: auto;
    left: 16px;
    width: min(290px, calc(100vw - 32px));
    padding: 10px 12px 12px;
  }

  .shot-card span {
    font-size: 0.58rem;
  }

  .shot-card strong {
    font-size: 0.96rem;
  }

  .story-incident {
    top: 252px;
    right: 16px;
    bottom: auto;
    width: min(262px, calc(100vw - 32px));
    padding: 9px 11px 10px;
  }

  .story-incident span {
    font-size: 0.54rem;
  }

  .story-incident strong {
    font-size: 0.82rem;
  }

  .transport {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .cinema-shell.translations-unavailable .transport {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .transport > * {
    min-width: 0;
  }

  .timeline-wrap {
    grid-column: 1 / -1;
  }

  .timeline-wrap {
    order: -2;
  }

  .play-control {
    order: -1;
    grid-column: 1 / 2;
  }

  .now-playing {
    order: -1;
    grid-column: 2 / -1;
    padding: 5px 8px;
  }

  .now-playing strong {
    font-size: 0.86rem;
  }

  .book-jump,
  .chapter-jump,
  .language-jump {
    grid-column: 1 / -1;
  }

  .book-jump select,
  .chapter-jump select,
  .language-jump select {
    min-height: 40px;
    font-size: 0.82rem;
  }

  .transport > button:not(.play-control) {
    min-height: 42px;
  }

  .chapter-strip {
    grid-template-columns: 1fr;
    max-height: 112px;
  }

  .chapter-strip-header {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 196, 106, 0.18);
  }
}

@media (max-width: 420px) {
  .title-panel h1 {
    font-size: 2.62rem;
  }

  .cinema-shell.is-playing .title-panel h1 {
    font-size: 2.16rem;
  }

  .caption-zone p {
    font-size: 1rem;
  }

  .shot-card {
    top: 164px;
  }

  .shot-card strong {
    font-size: 0.88rem;
  }

  .story-incident {
    top: 250px;
  }
}

.cinema-shell[data-viewer-mode="public"].cinema-focus #cinematic-field,
.cinema-shell[data-viewer-mode="public"].cinema-focus #particle-field,
.cinema-shell[data-viewer-mode="public"].cinema-focus .glyph-field,
.cinema-shell[data-viewer-mode="public"].cinema-focus .impact-flash,
.cinema-shell[data-viewer-mode="public"].cinema-focus .scene-pressure,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-horizon,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-camera-mask,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-breath,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-dust-curtain,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-cue-field,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-memory-thread,
.cinema-shell[data-viewer-mode="public"].cinema-focus .caption-cinema,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-chapter-sigil,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-phase-vault,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-map,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-tunnel-lines,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-archive,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-searchlight,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-glyph-mark,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-fragment-burst,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-silhouette,
.cinema-shell[data-viewer-mode="public"].cinema-focus .character-stage,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-rubble,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-artifacts,
.cinema-shell[data-viewer-mode="public"].cinema-focus .source-diorama,
.cinema-shell[data-viewer-mode="public"].cinema-focus .source-lens-stack,
.cinema-shell[data-viewer-mode="public"].cinema-focus .source-montage,
.cinema-shell[data-viewer-mode="public"].cinema-focus .source-tableau,
.cinema-shell[data-viewer-mode="public"].cinema-focus .caption-tableau,
.cinema-shell[data-viewer-mode="public"].cinema-focus .shot-card,
.cinema-shell[data-viewer-mode="public"].cinema-focus .story-incident {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none !important;
}