:root {
  color-scheme: dark;
  --ink: #050303;
  --panel: rgba(12, 8, 8, 0.9);
  --panel-soft: rgba(21, 12, 12, 0.78);
  --bone: #e8dfd1;
  --muted: #9f9186;
  --red: #9f171d;
  --red-bright: #e13a42;
  --blood-dark: #33070a;
  --line: rgba(235, 210, 188, 0.16);
  --spring: cubic-bezier(0.16, 1.45, 0.35, 1);
  --snap: cubic-bezier(0.77, -0.28, 0.16, 1.35);
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #020101; color: var(--bone); }
body { min-height: 100dvh; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
img, video { display: block; max-width: 100%; }

.noscript {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: #050303; padding: 2rem; color: #fff; text-align: center;
}

.grain, .grain::before {
  pointer-events: none; position: fixed; inset: -50%; z-index: 900;
  content: ""; opacity: 0.075; mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 40%, #fff 0 0.55px, transparent 0.8px),
    radial-gradient(circle at 80% 60%, #fff 0 0.6px, transparent 0.9px);
  background-size: 5px 5px, 7px 7px;
  animation: grainShift 0.24s steps(2, end) infinite;
}

.grain::before { position: absolute; opacity: 0.7; transform: rotate(19deg); }

@keyframes grainShift {
  0% { transform: translate3d(-1.5%, 1%, 0); }
  50% { transform: translate3d(1.5%, -1%, 0); }
  100% { transform: translate3d(-0.5%, 1.5%, 0); }
}

.flash {
  position: fixed; inset: 0; z-index: 850; pointer-events: none; opacity: 0;
  background: #f1e9da; mix-blend-mode: screen;
}
.flash.is-on { animation: flashCut 0.22s steps(2, end); }
@keyframes flashCut { 0% { opacity: 0; } 15% { opacity: 0.93; } 32% { opacity: 0.1; } 55% { opacity: 0.72; } 100% { opacity: 0; } }

.screen {
  position: fixed; inset: 0; z-index: 1; display: none; min-height: 100dvh;
  background: var(--ink); overflow: hidden;
}
.screen.is-active { display: block; animation: screenIn 0.75s var(--spring) both; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.018) translateY(12px); } to { opacity: 1; transform: none; } }

.eyebrow {
  margin: 0 0 0.65rem; color: #d8a6a0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.65rem, 0.85vw, 0.78rem); letter-spacing: 0.17em; text-transform: uppercase;
}

.button {
  min-height: 3rem; padding: 0.78rem 1.15rem; border: 1px solid var(--line); border-radius: 0;
  background: rgba(8, 5, 5, 0.78); cursor: pointer; letter-spacing: 0.08em;
  transition: transform 0.42s var(--spring), border-color 0.25s, background 0.25s, filter 0.25s;
}
.button:hover, .button:focus-visible { transform: translateY(-3px) scale(1.025); border-color: rgba(255, 235, 222, 0.55); outline: none; }
.button:active { transform: translateY(1px) scale(0.97); }
.button-primary { border-color: #a62a2f; background: linear-gradient(135deg, #7d1016, #31080b 70%); box-shadow: 0 15px 42px rgba(122, 6, 13, 0.24); }
.button-primary:hover { filter: brightness(1.18); }
.button-quiet { color: #c7b9ad; }
.button:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }

/* Cover */
.cover { isolation: isolate; }
.cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 48%; animation: coverBreathe 16s ease-in-out infinite alternate; }
@keyframes coverBreathe { from { transform: scale(1.01); filter: brightness(0.78) saturate(0.9); } to { transform: scale(1.075) translateY(-0.7%); filter: brightness(0.93) saturate(1.05); } }
.cover-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,1,1,.98) 0%, rgba(3,1,1,.72) 36%, rgba(3,1,1,.12) 66%, rgba(2,1,1,.52) 100%), linear-gradient(0deg, rgba(1,0,0,.85), transparent 40%); }
.cover-top, .cover-evidence { position: absolute; z-index: 2; left: clamp(1rem, 4vw, 4rem); right: clamp(1rem, 4vw, 4rem); display: flex; justify-content: space-between; color: #aa9187; font: 0.7rem/1.4 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.cover-top { top: max(1.25rem, env(safe-area-inset-top)); }
.cover-evidence { bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.cover-evidence span:nth-child(2) { margin-left: auto; margin-right: 3rem; }
.cover-copy { position: absolute; z-index: 3; left: clamp(1.15rem, 7vw, 7.5rem); top: 50%; width: min(42rem, 82vw); transform: translateY(-50%); }
.cover-copy h1 { margin: 0; font-size: clamp(4rem, 10vw, 9.5rem); font-weight: 400; line-height: 0.78; letter-spacing: -0.07em; text-shadow: 0 6px 44px #000; }
.cover-copy h1 span { display: block; margin-left: -0.08em; color: #b91e25; font-size: 0.48em; letter-spacing: 0.22em; }
.cover-hook { margin: 2rem 0 0.8rem; max-width: 34rem; color: #f0e8df; font-size: clamp(1.05rem, 2vw, 1.55rem); line-height: 1.65; }
.cover-note { margin: 0; color: #aa9b91; font-size: 0.82rem; }
.cover-actions { display: flex; gap: 0.7rem; margin-top: 2.1rem; }

/* Disclaimer */
.disclaimer { padding: max(0.8rem, env(safe-area-inset-top)) clamp(0.8rem, 2vw, 2rem) max(0.8rem, env(safe-area-inset-bottom)); background: radial-gradient(circle at 78% 22%, rgba(117,17,22,.16), transparent 27%), #050303; }
.disclaimer.is-active { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.75rem; }
.disclaimer-header, .disclaimer-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.disclaimer-header h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.6rem); font-weight: 500; }
.disclaimer-header p:last-child { margin: 0.28rem 0 0; color: #a89588; font-size: 0.76rem; }
.read-clock { min-width: 7rem; padding: 0.55rem 0.8rem; border-left: 2px solid var(--red); text-align: right; }
.read-clock span, .read-clock small { display: block; color: #a9968a; font: 0.62rem/1.3 ui-monospace, monospace; letter-spacing: 0.1em; }
.read-clock strong { display: block; margin: 0.1rem 0; color: #f1e8de; font: 1.55rem/1 ui-monospace, monospace; }
.disclaimer-frame { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(35,12,13,.52), rgba(5,3,3,.94)); box-shadow: inset 0 0 100px rgba(0,0,0,.82); }
.legal-wall { height: 100%; padding: clamp(0.45rem, 1.1vh, 0.9rem); columns: 4; column-gap: clamp(0.6rem, 1.5vw, 1.25rem); column-rule: 1px solid rgba(255,255,255,.08); overflow: hidden; font-size: clamp(5.25px, 0.54vw, 9.2px); line-height: 1.42; text-align: justify; color: #d1c4b8; }
.legal-wall p { margin: 0 0 0.62em; break-inside: avoid; }
.reader-lens { position: absolute; z-index: 4; left: 0.75rem; right: 0.75rem; bottom: 0.65rem; min-height: 2.35rem; padding: 0.55rem 0.8rem; border: 1px solid rgba(226,178,166,.34); background: rgba(10,5,5,.96); box-shadow: 0 8px 35px #000; color: #f2e8de; font-size: 0.84rem; line-height: 1.45; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .38s var(--spring); }
.reader-lens.is-visible { opacity: 1; transform: none; }
.disclaimer-actions p { margin: 0 auto; color: #a9978b; text-align: center; font-size: clamp(0.62rem, 0.8vw, 0.75rem); line-height: 1.45; }
.disclaimer-actions strong { color: #ddc8b9; font-weight: 500; }

/* Brief */
.brief.is-active { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(26rem, .85fr); }
.brief-visual { position: relative; overflow: hidden; background: #080404; }
.brief-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.58) saturate(.7); transform: scale(1.02); }
.brief-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 58%, #050303), linear-gradient(0deg, rgba(0,0,0,.72), transparent 45%); }
.film-label { position: absolute; z-index: 2; left: 1.2rem; bottom: 1.2rem; padding: .45rem .65rem; background: rgba(0,0,0,.74); color: #c6b5a8; font: .68rem ui-monospace, monospace; letter-spacing: .08em; }
.brief-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 5vw, 5rem); background: radial-gradient(circle at 80% 10%, rgba(115,15,20,.14), transparent 30%), #050303; }
.brief-copy h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 400; line-height: 1; }
.brief-lead { color: #cdbfb4; font-size: clamp(.92rem, 1.2vw, 1.06rem); line-height: 1.85; }
.brief-lead strong { color: #f1dfd4; font-weight: 500; }
.case-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 1.2rem 0; background: var(--line); border: 1px solid var(--line); }
.case-facts div { padding: .72rem .8rem; background: #090606; }
.case-facts dt { color: #9f8880; font: .62rem ui-monospace, monospace; letter-spacing: .1em; }
.case-facts dd { margin: .22rem 0 0; color: #e2d6ca; font-size: .84rem; }
.brief-rule { margin: .2rem 0 1.35rem; padding: 1rem 1.1rem; border-left: 2px solid var(--red); background: rgba(69,16,18,.16); }
.brief-rule strong, .brief-rule span, .brief-rule small { display: block; }
.brief-rule span { margin: .4rem 0; color: #e2d4c8; }
.brief-rule small { color: #9e8e84; line-height: 1.5; }

/* Experience */
.experience.is-active { display: grid; grid-template-rows: auto 3px minmax(0, 1fr); background: radial-gradient(circle at 20% 15%, rgba(91,13,17,.12), transparent 33%), #030202; }
.experience-topbar { display: grid; grid-template-columns: minmax(15rem, 1fr) auto minmax(15rem, 1fr); align-items: center; gap: 1rem; min-height: 4.6rem; padding: .65rem clamp(.8rem, 2vw, 1.75rem); border-bottom: 1px solid var(--line); background: rgba(5,3,3,.94); }
.chapter-stamp span, .timeline-stamp span, .timeline-stamp small { display: block; color: #a88f86; font: .6rem/1.4 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.chapter-stamp strong { display: block; margin-top: .22rem; font-size: clamp(.85rem, 1.25vw, 1.15rem); font-weight: 500; }
.timeline-stamp { text-align: center; min-width: 11rem; }
.timeline-stamp strong { display: block; margin: .08rem 0; color: #e8ddd3; font: 1.12rem ui-monospace, monospace; }
.experience-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }
.experience-actions button { min-height: 2.3rem; padding: .45rem .7rem; border: 1px solid var(--line); background: #0a0606; cursor: pointer; font-size: .72rem; }
.volume-control { display: flex; align-items: center; gap: .4rem; color: #aa978b; font-size: .7rem; }
.volume-control input { width: 7rem; accent-color: var(--red-bright); }
.progress-track { position: relative; background: #17090a; }
.progress-track i { display: block; width: 2.4%; height: 100%; background: linear-gradient(90deg, #7a1015, #e43c43); transition: width .9s var(--spring); }
.progress-track span { position: absolute; top: .35rem; right: 1rem; color: #8c7770; font: .58rem ui-monospace, monospace; }
.experience-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem); min-height: 0; }
.stage-column { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; }
.stage { position: relative; min-height: 0; overflow: hidden; background: #000; perspective: 1200px; isolation: isolate; }
.scene-image, .scene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s ease, transform 1.5s var(--spring), filter 1s; }
.scene-video { z-index: 1; opacity: 0; }
.scene-video.is-visible { opacity: 1; }
.scene-video.is-visible + .scene-image { opacity: 0; }
.scene-image { z-index: 0; transform: scale(1.015); }
.stage[data-mood="archive"] .scene-image, .stage[data-mood="archive"] .scene-video { filter: saturate(.55) contrast(1.12) brightness(.72); }
.stage[data-mood="wedding"] .scene-image, .stage[data-mood="wedding"] .scene-video { filter: saturate(.88) contrast(1.18) brightness(.76); }
.stage[data-mood="blue"] .scene-image, .stage[data-mood="blue"] .scene-video { filter: saturate(.62) contrast(1.2) brightness(.72) hue-rotate(-8deg); }
.stage.is-pulsing .scene-image, .stage.is-pulsing .scene-video { animation: dreadPulse 4.8s ease-in-out infinite; }
@keyframes dreadPulse { 0%,100% { transform: scale(1.025); } 48% { transform: scale(1.06) translateY(-.7%); } 52% { transform: scale(1.052) translateY(-.4%); } }
.film-burn { position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: screen; background: radial-gradient(circle at 92% 12%, rgba(255,95,40,.4), transparent 12%), linear-gradient(90deg, rgba(255,88,42,.12), transparent 16%, transparent 86%, rgba(180,15,22,.14)); }
.gate-weave { position: absolute; z-index: 4; inset: -1%; pointer-events: none; box-shadow: inset 0 0 100px 20px #000; animation: gateWeave .25s steps(2,end) infinite; }
@keyframes gateWeave { 0% { transform: translate(0,0); } 50% { transform: translate(.12%, -.08%); } 100% { transform: translate(-.08%, .1%); } }
.scene-blackout { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s; }
.scene-blackout span { color: #473d38; font: .68rem ui-monospace, monospace; letter-spacing: .16em; }
.scene-blackout.is-visible { opacity: 1; }
.face-rush { position: absolute; z-index: 40; inset: -6%; opacity: 0; pointer-events: none; transform: scale(.18); filter: brightness(.15); }
.face-rush img { width: 100%; height: 100%; object-fit: cover; }
.face-rush.is-rushing { animation: faceRush .72s var(--snap) both; }
@keyframes faceRush { 0% { opacity: 0; transform: scale(.2) translateY(15%); filter: brightness(.12) blur(3px); } 28% { opacity: 1; } 76% { opacity: 1; transform: scale(1.16); filter: brightness(1.05) blur(0); } 100% { opacity: 0; transform: scale(1.55); filter: brightness(.25); } }
.hotspot-layer { position: absolute; z-index: 12; inset: 0; pointer-events: none; }
.hotspot { position: absolute; width: 4.2rem; height: 4.2rem; border: 1px solid rgba(255,231,213,.62); border-radius: 50%; background: radial-gradient(circle, rgba(173,27,34,.42), transparent 65%); box-shadow: 0 0 0 0 rgba(200,45,51,.4); pointer-events: auto; cursor: pointer; animation: hotspotPulse 1.7s ease-out infinite; }
.hotspot::after { content: "检查"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); color: #decac0; font: .6rem ui-monospace, monospace; }
@keyframes hotspotPulse { 0% { box-shadow: 0 0 0 0 rgba(200,45,51,.45); } 100% { box-shadow: 0 0 0 1rem rgba(200,45,51,0); } }
.stage-label { position: absolute; z-index: 18; left: .8rem; right: .8rem; bottom: .7rem; display: flex; justify-content: space-between; color: rgba(232,218,205,.63); font: .58rem ui-monospace, monospace; letter-spacing: .08em; }
.stage-label b { color: #c2393f; font-weight: 500; }
.narrative-card { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; min-height: 8.8rem; padding: 1rem clamp(1rem, 2.5vw, 2rem); border-top: 1px solid var(--line); background: linear-gradient(90deg, rgba(61,13,16,.18), rgba(7,4,4,.96) 26%); }
.beat-mark { display: flex; align-items: center; flex-direction: column; color: #c5b4aa; font: 1.2rem ui-monospace, monospace; }
.beat-mark i { display: block; width: 1px; flex: 1; margin-top: .5rem; background: linear-gradient(var(--red), transparent); }
.narrative-card h2 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 400; }
.narrative-card p { margin: .2rem 0; color: #c2b2a7; font-size: clamp(.8rem, 1vw, .92rem); line-height: 1.65; }
.narrative-card .continuity { margin-top: .55rem; color: #8f7e75; font-size: .72rem; }
.continuity strong { color: #b99a91; font-weight: 500; }
.interaction-panel { display: grid; grid-template-columns: minmax(13rem, .8fr) minmax(18rem, 1.2fr); align-items: center; gap: 1.2rem; min-height: 6.7rem; padding: .75rem clamp(1rem, 2.5vw, 2rem); border-top: 1px solid var(--line); background: #080505; }
.interaction-panel span { color: #b98d88; font: .6rem ui-monospace, monospace; letter-spacing: .1em; }
.interaction-panel strong { display: block; margin: .2rem 0; font-size: .9rem; font-weight: 500; }
.interaction-panel p { margin: 0; color: #84756d; font-size: .67rem; }
.interaction-control { min-width: 0; }
.interaction-control input[type="range"] { width: 100%; accent-color: var(--red-bright); }
.range-scale { display: flex; justify-content: space-between; margin-top: .35rem; color: #8e7d73; font: .62rem ui-monospace, monospace; }
.rub-control { position: relative; height: 3.2rem; overflow: hidden; border: 1px solid #442326; background: repeating-linear-gradient(96deg, #2b090c 0 8px, #4b1116 8px 14px); cursor: ew-resize; touch-action: none; }
.rub-control::before { content: "反贴封签 / 往返擦开"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(245,220,205,.76); font-size: .78rem; letter-spacing: .12em; }
.rub-control i { position: absolute; inset: 0 auto 0 0; width: var(--rub, 0%); background: linear-gradient(90deg, rgba(214,183,148,.85), rgba(90,42,30,.65)); mix-blend-mode: screen; }
.hold-control, .door-control, .listen-control { width: 100%; min-height: 3.25rem; border: 1px solid #673033; background: linear-gradient(90deg, #20090b, #531116 50%, #20090b); cursor: pointer; position: relative; overflow: hidden; }
.hold-control i, .door-control i, .listen-control i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: rgba(183,41,47,.35); }
.hold-control span, .door-control span, .listen-control span { position: relative; z-index: 1; color: #ead9ce; }
.case-column { min-height: 0; overflow: auto; border-left: 1px solid var(--line); background: rgba(7,4,4,.97); scrollbar-width: thin; scrollbar-color: #4b171a #090505; }
.case-column section { border-bottom: 1px solid var(--line); }
.causal-map header, .transcript-card header { display: flex; justify-content: space-between; align-items: center; padding: .72rem .9rem; background: #0d0808; }
.causal-map header strong, .transcript-card header strong { font-size: .76rem; font-weight: 500; letter-spacing: .06em; }
.causal-map header span { color: #a38980; font: .62rem ui-monospace, monospace; }
.causal-map ol { list-style: none; margin: 0; padding: .25rem .9rem .75rem; }
.causal-map li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .6rem; padding: .48rem 0; color: #5e5550; font-size: .72rem; line-height: 1.35; border-bottom: 1px dotted rgba(255,255,255,.06); transition: color .5s, transform .55s var(--spring); }
.causal-map li i { color: #534642; font: .58rem ui-monospace, monospace; }
.causal-map li.is-known { color: #dfd0c5; transform: translateX(3px); }
.causal-map li.is-known i { color: #d13c43; }
.transcript-card { min-height: 10rem; }
#audioMeter { width: 4rem; height: .32rem; overflow: hidden; background: #1b0d0e; }
#audioMeter i { display: block; width: 5%; height: 100%; background: #b8272d; transition: width .08s linear; }
.transcript { max-height: 11rem; overflow: auto; padding: .6rem .9rem .8rem; }
.transcript p { display: grid; grid-template-columns: 4.1rem 1fr; gap: .6rem; margin: 0; padding: .38rem 0; color: #988a81; font-size: .68rem; line-height: 1.45; border-bottom: 1px dotted rgba(255,255,255,.05); }
.transcript p:last-child { color: #dfcfc3; }
.transcript time { color: #6d5f58; font: .58rem ui-monospace, monospace; }
.artifact-card { padding: .85rem .9rem 1rem; }
.artifact-card span { color: #9a7e77; font: .6rem ui-monospace, monospace; letter-spacing: .1em; }
.artifact-card strong { display: block; margin: .3rem 0; font-size: .88rem; font-weight: 500; }
.artifact-card p { margin: 0; color: #8b7d75; font-size: .68rem; line-height: 1.55; }
.transition-card { position: fixed; z-index: 700; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; background: #020101; opacity: 0; pointer-events: none; }
.transition-card span { color: #d3c5ba; font-size: clamp(1rem, 2vw, 1.4rem); }
.transition-card i { width: min(18vw, 10rem); height: 1px; background: linear-gradient(90deg, #571116, #ce3036); transform-origin: left; }
.transition-card strong { position: absolute; top: 58%; color: #76665f; font: .64rem ui-monospace, monospace; letter-spacing: .12em; }
.transition-card.is-visible { animation: matchCut 1.45s ease both; }
@keyframes matchCut { 0% { opacity: 0; } 18%, 72% { opacity: 1; } 100% { opacity: 0; } }
.transition-card.is-visible i { animation: drawLine .75s .18s var(--spring) both; }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.resume-replay { position: fixed; z-index: 720; inset: 0; display: none; place-items: center; align-content: center; gap: .5rem; padding: 2rem; background: #000; text-align: center; }
.resume-replay.is-visible { display: grid; }
.resume-replay strong { font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 400; }
.resume-replay p { color: #9b8980; }

/* Ending */
.ending { isolation: isolate; }
.ending-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: endingCreep 18s ease-in-out infinite alternate; }
@keyframes endingCreep { from { transform: scale(1.01); } to { transform: scale(1.09) translateX(-1.3%); } }
.ending-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,1,1,.96) 0%, rgba(3,2,2,.82) 38%, rgba(2,1,1,.1) 72%), linear-gradient(0deg, rgba(1,0,0,.78), transparent 44%); }
.ending-copy { position: absolute; z-index: 2; left: clamp(1.2rem, 6vw, 6rem); top: 50%; width: min(42rem, 58vw); transform: translateY(-50%); }
.ending-copy h2 { margin: 0; font-size: clamp(3rem, 7vw, 7rem); font-weight: 400; line-height: .9; letter-spacing: -.05em; }
.ending-line { color: #e0d2c6; font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.7; }
.ending-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 40rem; margin: 1.2rem 0; background: var(--line); border: 1px solid var(--line); }
.ending-facts div { padding: .65rem .75rem; background: rgba(6,3,3,.87); }
.ending-facts dt { color: #9f8580; font: .58rem ui-monospace, monospace; }
.ending-facts dd { margin: .22rem 0 0; font-size: .75rem; line-height: 1.4; }
.ending-final { color: #bfa9a0; font-size: .8rem; }
.ending-actions { display: flex; gap: .7rem; margin-top: 1.2rem; }
.ending-foot { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; margin: 0; color: rgba(226,209,196,.52); font-size: .7rem; }

/* Evidence */
.evidence.is-active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); grid-template-rows: auto minmax(0, 1fr); gap: 0; overflow: auto; padding: clamp(1rem, 3vw, 2.5rem); background: radial-gradient(circle at 83% 15%, rgba(110,15,20,.16), transparent 30%), #050303; }
.evidence > header { grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.evidence > header h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; }
.evidence > header p:last-child { margin: .35rem 0 0; color: #927f76; }
.evidence-chain { list-style: none; margin: 0; padding: 1rem 2rem 2rem 0; overflow: auto; counter-reset: evidence; }
.evidence-chain li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.2rem; position: relative; padding: 0 0 1.2rem; }
.evidence-chain li::before { content: ""; position: absolute; left: 8.38rem; top: 1rem; bottom: 0; width: 1px; background: linear-gradient(#7e1519, #2b0a0c); }
.evidence-chain li::after { content: ""; position: absolute; left: 8.17rem; top: .48rem; width: .45rem; height: .45rem; border-radius: 50%; background: #bf2c32; box-shadow: 0 0 0 .25rem rgba(191,44,50,.12); }
.evidence-chain time { padding-top: .2rem; color: #9a8278; font: .64rem/1.5 ui-monospace, monospace; text-align: right; }
.evidence-chain strong { font-weight: 500; }
.evidence-chain p { margin: .28rem 0 0; color: #9f9187; font-size: .78rem; line-height: 1.6; }
.evidence-audio { align-self: start; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); background: rgba(14,8,8,.86); }
.evidence-audio h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.evidence-audio p { color: #8f7f76; font-size: .7rem; line-height: 1.5; }
.audio-replay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.audio-replay-grid button { min-height: 2.6rem; border: 1px solid #3b1d1f; background: #0a0606; color: #cabbaf; cursor: pointer; font-size: .68rem; }
.evidence-audio output { display: block; min-height: 1.1rem; margin-top: .6rem; color: #bd3a40; font-size: .65rem; }

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

@media (max-width: 1120px) {
  .experience-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .legal-wall { columns: 3; font-size: clamp(5px, .72vw, 8px); }
  .cover-evidence span:nth-child(2) { margin-right: 1rem; }
}

@media (max-width: 840px) {
  body { overflow: auto; }
  .screen { min-height: 100dvh; overflow: auto; }
  .cover-copy { top: auto; bottom: 5rem; transform: none; }
  .cover-image { object-position: 61% center; }
  .cover-scrim { background: linear-gradient(0deg, rgba(2,1,1,.97) 0%, rgba(2,1,1,.67) 54%, rgba(2,1,1,.18)); }
  .cover-evidence { display: none; }
  .disclaimer.is-active { position: fixed; overflow: hidden; }
  .disclaimer-header p:last-child, .disclaimer-actions p { display: none; }
  .legal-wall { columns: 2; font-size: clamp(4.5px, 1.15vw, 6.8px); line-height: 1.34; }
  .reader-lens { font-size: .7rem; min-height: 1.9rem; }
  .brief.is-active { display: block; }
  .brief-visual { height: 34dvh; }
  .brief-copy { min-height: 66dvh; }
  .experience.is-active { position: relative; overflow: visible; min-height: 100dvh; }
  .experience-topbar { grid-template-columns: 1fr auto; position: sticky; top: 0; z-index: 100; }
  .timeline-stamp { display: none; }
  .volume-control { display: none; }
  .experience-grid { display: block; }
  .stage-column { display: block; }
  .stage { aspect-ratio: 16 / 10; min-height: auto; }
  .interaction-panel { grid-template-columns: 1fr; }
  .case-column { border: 0; overflow: visible; }
  .causal-map ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
  .ending-copy { width: min(92vw, 40rem); }
  .ending-scrim { background: linear-gradient(0deg, rgba(2,1,1,.98) 0%, rgba(2,1,1,.8) 60%, rgba(2,1,1,.12)); }
  .ending-copy { top: auto; bottom: 2.8rem; transform: none; }
  .ending-copy h2 { font-size: clamp(2.8rem, 12vw, 5rem); }
  .ending-foot { display: none; }
  .evidence.is-active { display: block; }
  .evidence-chain { overflow: visible; padding-right: 0; }
}

@media (max-width: 520px) {
  .cover-copy { left: 1.1rem; right: 1.1rem; width: auto; }
  .cover-copy h1 { font-size: clamp(4.2rem, 23vw, 6.2rem); }
  .cover-hook { font-size: .98rem; }
  .cover-note { font-size: .65rem; }
  .cover-actions, .ending-actions { flex-direction: column; }
  .cover-actions .button, .ending-actions .button { width: 100%; }
  .disclaimer { padding: .45rem; gap: .35rem; }
  .disclaimer-header .eyebrow, .disclaimer-header p:last-child { display: none; }
  .disclaimer-header h2 { font-size: 1rem; }
  .read-clock { padding: .2rem .45rem; }
  .read-clock strong { font-size: 1.1rem; }
  .legal-wall { columns: 2; column-gap: .4rem; padding: .35rem; font-size: clamp(3.85px, 1.05vw, 5px); line-height: 1.28; }
  .disclaimer-actions .button { min-height: 2.5rem; padding: .55rem .7rem; font-size: .7rem; }
  .brief-copy { padding: 1.2rem; }
  .case-facts, .ending-facts { grid-template-columns: 1fr; }
  .experience-topbar { min-height: 4rem; padding: .5rem .65rem; }
  .chapter-stamp strong { font-size: .76rem; }
  .experience-actions { gap: .3rem; }
  .experience-actions button { padding: .38rem .45rem; font-size: .62rem; }
  .narrative-card { grid-template-columns: 2.2rem 1fr; padding: .8rem; }
  .interaction-panel { padding: .75rem .8rem; }
  .causal-map ol { grid-template-columns: 1fr; }
  .ending-copy { left: 1rem; right: 1rem; width: auto; }
  .ending-facts { max-height: 33dvh; overflow: auto; }
  .evidence { padding: .8rem; }
  .evidence > header { display: block; }
  .evidence > header .button { margin-top: .8rem; width: 100%; }
  .evidence-chain li { grid-template-columns: 5.8rem 1fr; gap: .8rem; }
  .evidence-chain li::before { left: 5.38rem; }
  .evidence-chain li::after { left: 5.17rem; }
}

@media (max-height: 650px) and (min-width: 841px) {
  .disclaimer { gap: .35rem; padding-top: .45rem; padding-bottom: .45rem; }
  .disclaimer-header .eyebrow, .disclaimer-header p:last-child, .disclaimer-actions p { display: none; }
  .disclaimer-header h2 { font-size: 1.15rem; }
  .legal-wall { columns: 4; font-size: clamp(4.5px, .44vw, 6.5px); line-height: 1.28; }
  .cover-copy h1 { font-size: 6rem; }
  .cover-hook { margin-top: 1rem; }
  .cover-actions { margin-top: 1rem; }
  .experience-topbar { min-height: 3.8rem; }
  .narrative-card { min-height: 7rem; padding-top: .65rem; padding-bottom: .65rem; }
  .interaction-panel { min-height: 5.2rem; padding-top: .5rem; padding-bottom: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .grain::before { animation: none; }
}