:root {
  --bg: #0e0d0c;
  --bg-raised: #171513;
  --ink: #e6dfd2;
  --muted: #a39c90;
  --faint: #3a3631;
  --blood: #b23a2f;
  --blood-text: #d0574b;
  --blood-soft: rgba(178, 58, 47, 0.18);
  --shadow: #7f8d99;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--muted); outline-offset: 3px; }

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--muted); background: linear-gradient(var(--bg) 70%, transparent);
}
.bar .tool { padding: 0.2rem 0.5rem; color: var(--muted); }
.bar .tool[aria-pressed="true"] { color: var(--ink); }
.mode .tag, .tag {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--faint); padding: 0.05rem 0.4rem; border-radius: 2px; color: var(--muted);
}
.mode .tag.replay { color: var(--shadow); border-color: var(--shadow); }
.mode .tag.live { color: var(--ink); }

main { max-width: 36rem; margin: 0 auto; padding: 5.5rem 1rem 6rem; }
.screen[hidden] { display: none; }

h1 { font-weight: normal; font-size: 2.4rem; letter-spacing: 0.01em; margin: 3rem 0 0.25rem; }
h2 { font-weight: normal; font-size: 1.2rem; margin: 0; }
.sub { color: var(--muted); margin-top: 0; }
.tagline { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--muted); margin: 0 0 1.1rem; }
.small { font-size: 0.9rem; }
.muted { color: var(--muted); }

form { margin: 3rem 0 2rem; display: grid; gap: 0.8rem; }
label { font-style: italic; }
input {
  font: inherit; color: var(--ink); background: transparent; border: 0;
  border-bottom: 1px solid var(--faint); padding: 0.4rem 0; width: 100%;
}
input::placeholder { color: #8a8378; }
.primary {
  justify-self: start; margin-top: 0.6rem; padding: 0.35rem 0;
  border-bottom: 1px solid var(--muted); letter-spacing: 0.02em;
}
.primary:hover { border-color: var(--ink); }
.primary:disabled { opacity: 0.4; cursor: default; }

.static-note { margin: 2rem 0 0.4rem; }
.static-note p { margin: 0 0 0.6rem; }
.replays ul { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.replays li button {
  text-align: left; padding: 0.3rem 0; color: var(--muted); font-size: 0.95rem;
}
.replays li button:hover { color: var(--ink); }

.text p { margin: 0 0 1.2rem; opacity: 0; transform: translateY(4px); animation: in 0.9s ease forwards; }
@keyframes in { to { opacity: 1; transform: none; } }

.choices { margin-top: 2.2rem; display: grid; gap: 0.5rem; opacity: 0; animation: in 0.6s ease forwards; }
.choices button {
  text-align: left; padding: 0.3rem 0; color: var(--muted); transition: color 0.2s;
}
.choices button::before { content: "→ "; color: var(--faint); }
.choices button:hover, .choices button:focus-visible { color: var(--ink); }
.choices button:disabled { opacity: 0.3; cursor: default; }

.waiting { color: var(--muted); font-style: italic; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.35; } }

/* The intrusion */
.kind-crossing .text p { animation-duration: 1.4s; }
.ink {
  color: var(--blood); font-style: italic; letter-spacing: 0.04em; white-space: nowrap;
  border-bottom: 1px dotted var(--blood); padding: 0 0.1rem;
  animation: bleed 2.4s ease-out both;
}
.ink:hover { background: var(--blood-soft); }
@keyframes bleed {
  0% { filter: blur(6px); opacity: 0; }
  60% { filter: blur(1px); opacity: 1; }
  100% { filter: none; }
}
.trace-hint {
  display: inline-block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.72rem;
  color: var(--blood); letter-spacing: 0.06em; opacity: 0; animation: in 1s ease 2.2s forwards;
}
body.flicker main { animation: flicker 0.9s steps(2) 1; }
@keyframes flicker { 0%, 30%, 60% { opacity: 1; } 15%, 45% { opacity: 0.2; } }

/* Drawer: trace and event detail */
.drawer {
  position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(30rem, 100vw);
  background: var(--bg-raised); border-left: 1px solid var(--faint);
  padding: 2.5rem 1.25rem 2rem; overflow-y: auto; font-size: 0.95rem;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
}
.drawer[hidden], .map[hidden], .evidence[hidden] { display: none; }
.close { position: absolute; top: 0.6rem; right: 0.9rem; font-size: 1.4rem; color: var(--muted); line-height: 1; }
.close:hover { color: var(--ink); }
.drawer h3 { font-weight: normal; font-size: 1.05rem; margin: 1.4rem 0 0.4rem; }
.drawer .kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.drawer .quote { border-left: 2px solid var(--blood); padding-left: 0.8rem; margin: 0.6rem 0; }
.drawer .shadowq { border-left-color: var(--shadow); }
.facts, .attempts { list-style: none; padding: 0; margin: 0; font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; }
.facts li, .attempts li { padding: 0.35rem 0; border-top: 1px solid var(--faint); overflow-wrap: anywhere; }
.ok { color: #8fb38a; }
.bad { color: var(--blood); }
.fb { color: #c7a55b; }
code, pre { font-family: var(--mono); font-size: 0.78rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.3rem 0 0; color: var(--muted); }

/* Map */
.map {
  position: fixed; inset: 0; z-index: 15; background: var(--bg);
  display: grid; grid-template-rows: auto 1fr; padding: 3rem 1rem 1rem;
}
.map-head { position: relative; width: 100%; max-width: 72rem; margin: 0 auto 1rem; padding-right: 2.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 2rem; }
.map-head .close { top: -0.3rem; right: 0; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; padding: 0; font-size: 0.9rem; color: var(--muted); }
.legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 0.45rem; vertical-align: -1px; }
.legend .lived { background: var(--ink); }
.legend .unlived { border: 1.5px solid var(--shadow); }
.legend .crossed { width: 22px; height: 0; border-radius: 0; border-top: 2px dashed var(--blood); vertical-align: 3px; }
.map-scroll { overflow: auto; width: 100%; max-width: 100%; display: flex; justify-content: center; align-items: flex-start; }
#map-svg { display: block; flex: none; font-family: var(--mono); }
#map-svg .lane-label { fill: var(--muted); font-size: 13px; letter-spacing: 0.02em; font-family: var(--serif); font-style: italic; }
#map-svg .lane { stroke: var(--faint); stroke-width: 1.5; fill: none; }
#map-svg .lane.shadow { stroke-dasharray: 2 5; stroke: var(--shadow); opacity: 0.7; }
#map-svg .node { cursor: pointer; outline: none; }
#map-svg .node .hit { fill: transparent; }
#map-svg .node .dot { stroke-width: 2; transition: r 0.15s; }
#map-svg .node:hover .dot, #map-svg .node:focus .dot { r: 12; }
#map-svg .node:focus-visible .hit { stroke: var(--ink); stroke-width: 1; }
#map-svg .node.canonical .dot { fill: var(--ink); stroke: var(--ink); }
#map-svg .node.shadow .dot { fill: var(--bg); stroke: var(--shadow); }
#map-svg .node.fallback .dot { stroke-dasharray: 3 2; }
#map-svg .node.intrusion .dot, #map-svg .node.origin .dot { stroke: var(--blood); }
#map-svg .node.intrusion .dot { fill: var(--blood); }
#map-svg .eid { fill: var(--muted); font-size: 13px; }
#map-svg .thread { stroke: var(--blood); stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes thread-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.map-tip {
  position: absolute; z-index: 2; max-width: 250px; padding: 0.45rem 0.6rem; font-size: 0.9rem; line-height: 1.4;
  background: var(--bg-raised); border: 1px solid var(--faint); border-radius: 3px; pointer-events: none;
}

/* Evidence */
.evidence {
  position: fixed; z-index: 25; left: 0; top: 0; bottom: 0; width: min(34rem, 100vw);
  background: #0b0a09; border-right: 1px solid var(--faint); padding: 2.5rem 1rem 2rem; overflow-y: auto;
}
.ev-head { position: relative; margin-bottom: 1rem; }
.ev-head .close { top: -0.3rem; right: 0; }
.ev { font-family: var(--mono); font-size: 0.74rem; line-height: 1.5; border-top: 1px solid var(--faint); padding: 0.5rem 0; overflow-wrap: anywhere; }
.ev .head { color: var(--muted); }

@media (max-width: 40rem) {
  body { font-size: 1.05rem; }
  main { padding-top: 6.5rem; }
  .bar { align-items: flex-start; gap: 0.5rem; }
  h1 { font-size: 2rem; margin-top: 1.5rem; }
  .drawer { top: auto; height: 78vh; width: 100vw; border-left: 0; border-top: 1px solid var(--faint); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}

/* The staged crossing */
.crossing-stage {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.5rem 1rem;
  background: rgba(8, 7, 6, 0.94); animation: in 0.8s ease both; overflow-y: auto;
}
body.staged main { filter: blur(2px) brightness(0.5); }
.stage-inner { max-width: 30rem; width: 100%; text-align: center; }
.stage-before { color: var(--muted); font-style: italic; margin: 0 0 1.4rem; }
@keyframes write { to { stroke-dashoffset: 0; } }
@keyframes ink-in { to { fill: currentColor; stroke-width: 0.4; } }
.stage-after { margin: 0 0 1rem; opacity: 0; animation: in 1s ease 3s forwards; }
.stage-color { color: var(--muted); margin: 0 0 1.4rem; opacity: 0; animation: in 1s ease 3.6s forwards; }
.stage-go { opacity: 0; animation: in 0.6s ease 3.8s forwards; justify-self: center; }
.crossing-stage.instant *, 
.play-live { margin: 2.5rem 0 1rem; }
.play-live a { color: var(--ink); text-decoration: none; display: inline-block; }
.linkish { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 0.4rem 0.2rem; }
.linkish:hover { color: var(--ink); }
.drawer a { color: var(--ink); }

/* History of the night: earlier scenes stay, fainter; the option you didn't take is struck through */
.history .past { color: var(--muted); padding-bottom: 1.4rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--faint); }
.history .past p { margin: 0 0 1rem; animation: none; opacity: 1; transform: none; }
.history .past .ink { animation: none; }
.past-choices { list-style: none; padding: 0; margin: 1rem 0 0; font-size: 0.95rem; }
.past-choices li { padding: 0.15rem 0; }
.past-choices .taken { color: var(--ink); }
.past-choices .taken::before { content: "→ "; color: var(--muted); }
.past-choices .not-taken { color: #8a8378; text-decoration: line-through; text-decoration-thickness: 1px; }
.past-choices .not-taken { margin-left: 1.15rem; }
.current { scroll-margin-top: 5rem; min-height: 60vh; }
.current.fade-in { animation: in 0.7s ease both; }
.text.typing p { animation: none; opacity: 1; transform: none; }
.choices button { min-height: 44px; display: flex; align-items: center; gap: 0.6rem; width: 100%; }
.choices button::before { content: none; }
.choices .num {
  flex: none; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); border: 1px solid var(--faint);
  border-radius: 3px; width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center;
}
.choices button:hover .num, .choices button:focus-visible .num { color: var(--ink); border-color: var(--muted); }
/* The time over a scene, in the landing's style. */
.stamp { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 0.7rem; }

/* Grain and vignette (static; no motion) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: reduce) { body.flicker main { animation: none; } }

/* Accessibility: readable red text, visible focus everywhere, 44px targets */
.ink, .trace-hint, .bad { color: var(--blood-text); }
.ink { border-bottom-color: var(--blood-text); }
:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 3px; }
.bar .tool, .linkish, .replays li button, .close, .chip { min-height: 44px; min-width: 44px; }
.close { display: grid; place-items: center; }
.replays li button { display: flex; align-items: center; }

/* Header, replays only: the "recorded night" tag; what it means opens on tap */
.mode { display: flex; align-items: center; gap: 0.5rem; position: relative; }
.chip { font: inherit; color: inherit; padding: 0 0.2rem; display: inline-flex; align-items: center; }
.mode .detail { display: none; color: var(--muted); }
.mode.open .detail {
  display: block; position: absolute; top: 2.6rem; left: 0; width: min(22rem, calc(100vw - 2rem));
  background: var(--bg-raised); border: 1px solid var(--faint); padding: 0.6rem 0.7rem; line-height: 1.5; z-index: 6;
}

/* Memory-first crossing details */
.drawer .memory { font-size: 1.12rem; line-height: 1.65; font-style: normal; }
.route { list-style: none; padding: 0; margin: 1rem 0 1.2rem; }
.route li { padding: 0.45rem 0 0.45rem 1.4rem; position: relative; }
.route li::before { content: ""; position: absolute; left: 0.3rem; top: 0.95rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid var(--shadow); }
.route li + li::before { background: var(--blood); border-color: var(--blood); }
.route li + li::after { content: ""; position: absolute; left: 0.52rem; top: -0.35rem; height: 1.1rem; border-left: 1.5px dashed var(--blood); }
.route-k { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.proof { margin-top: 1rem; border-top: 1px solid var(--faint); padding-top: 0.6rem; }
.proof summary { cursor: pointer; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); padding: 0.6rem 0; min-height: 44px; display: flex; align-items: center; }
.proof summary:hover { color: var(--ink); }
.ev-summary { border: 1px solid var(--faint); padding: 0.6rem 0.9rem; margin-bottom: 1rem; font-size: 0.95rem; }
.ev-summary p { margin: 0 0 0.4rem; }
.ev-summary ol { margin: 0; padding-left: 1.2rem; }

/* Replay presentation */
.choices .recorded { color: var(--ink); }
.choices .recorded::after { content: none; }
.rec-k { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shadow); }
.not-taken-note { margin: 0.4rem 0 0 2rem; font-size: 0.9rem; color: #8a8378; }
.mode .detail a { color: var(--ink); }

/* Primary call to action */
.cta {
  justify-self: start; margin-top: 0.8rem; min-height: 48px; padding: 0.6rem 1.4rem;
  background: #2a1210; border: 1px solid var(--blood); color: var(--ink); border-radius: 3px; letter-spacing: 0.02em;
}
.cta:hover { background: #3a1612; }
.cta:disabled { opacity: 0.5; cursor: default; }
input::placeholder { color: #a39c90; }
label[for="pocket"] { color: var(--ink); }
/* One word of dried blood: quieter than the clickable ink red, still AA on the background (4.8:1). */
label[for="pocket"] .tonight { color: #b9675e; }

/* Motion: routine transitions are quick; long effects are kept for crossings and the map reveal */
.text p { animation-duration: 0.35s !important; }
.choices { animation-duration: 0.3s; }
.current.fade-in { animation-duration: 0.35s; }
.trace-hint { animation-delay: 0s; animation-duration: 0.3s; }

/* Map reveal */
.map [data-stage] { transition: opacity 0.9s ease; }
.map.revealing [data-stage]:not(.on) { opacity: 0; }
.map.revealing .thread:not(.on) { stroke-dashoffset: 1; }
.map.revealing .thread.on { animation: thread-draw 1.5s ease-in-out both; }
.map-intro {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 1.2rem; z-index: 3;
  background: var(--bg); animation: in 1s ease both;
}
.map-intro p { font-size: clamp(1.3rem, 3vw, 1.9rem); font-style: italic; margin: 0; }
#map-svg .fork-label { fill: var(--ink); font-size: 13px; font-family: var(--serif); font-style: italic; opacity: 0.85; }
#map-svg .lane-label { font-size: 14px; }

/* Map on phones: nights as cards */
.map-list { width: 100%; max-width: 32rem; margin: 0 auto; padding-bottom: 3rem; }
.night-card { border-left: 2px solid var(--ink); padding: 0.2rem 0 0.2rem 0.9rem; margin: 0 0 1rem; }
.night-card.other { border-left: 2px dashed var(--shadow); }
.night-card h3 { font-weight: normal; font-style: italic; font-size: 1rem; margin: 0 0 0.3rem; color: var(--muted); }
.night-card ol { list-style: none; margin: 0; padding: 0; }
.ev-row { width: 100%; text-align: left; min-height: 44px; padding: 0.5rem 0; color: var(--ink); line-height: 1.4; border-bottom: 1px solid var(--faint); }
.night-card.other .ev-row { color: #c9c2b6; }
.ev-row.crossing { color: var(--blood-text); }
.xmark { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.2rem; }
.fork-note { font-style: italic; color: var(--muted); margin: 0.2rem 0 1rem; font-size: 0.95rem; }
.afterword button { color: var(--ink); }
.afterword .afterword-how { color: var(--muted); font-size: 0.85rem; margin-top: 0.8rem; }
#map-svg[hidden] { display: none; }

/* Landing: one closed door, light under it, a peephole that catches the light */
.door { display: block; width: 12rem; height: auto; margin: 0 0 -1.6rem; overflow: visible; }
/* Light from the hallway: a lit seam, a faint edge, a low spill on the floor. Brighter on Begin hover/focus. */
.door .seam { opacity: 0.85; transition: opacity 0.6s ease; }
.door .edge { opacity: 0.25; transition: opacity 0.6s ease; }
.door .spill { opacity: 0.3; transition: opacity 0.6s ease; }
.door.lit .seam { opacity: 1; }
.door.lit .edge { opacity: 0.45; }
.door.lit .spill { opacity: 0.4; }
/* Someone steps up to the peephole once you start typing: the lens warms (fades in 400ms, out 600ms). */
.door .lens-warm { opacity: 0; transition: opacity 0.6s ease-out; }
.door .lens { transition: filter 0.6s ease-out; }
.door.warm .lens-warm { opacity: 0.9; transition: opacity 0.4s ease-in; }
.door.warm .lens { filter: drop-shadow(0 0 5px rgba(240, 194, 122, 0.85)); transition: filter 0.4s ease-in; }
@media (max-width: 40rem) { .door { width: 8.5rem; margin-bottom: -1.1rem; } }
@media (prefers-reduced-motion: reduce) { .door .seam, .door .edge, .door .spill, .door .lens, .door .lens-warm { transition: none !important; } }
input::placeholder { color: #8f887c; font-style: italic; }
@media (max-width: 40rem) {
}

/* ---------- final polish ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-only:focus-within { position: fixed !important; width: auto; height: auto; clip: auto; inset: 1rem; z-index: 50; background: var(--bg-raised); padding: 1rem; overflow: auto; white-space: normal; }

/* Pacing: routine text fades quickly; slow effects only for crossings and the map. */
.text p { animation: in 0.25s ease both !important; opacity: 1; }
.current.fade-in { animation-duration: 0.25s; }
.choices { animation: in 0.2s ease both; }
body.instant-text .text p, body.instant-text .current.fade-in, body.instant-text .choices { animation: none !important; }
body.instant-text main { animation: none !important; }

/* Crossing stage: "Go on" appears and takes focus the moment the mark is written. */
.stage-go { opacity: 0; animation: none; pointer-events: none; }
.crossing-stage.ready .stage-go, .crossing-stage.instant .stage-go { opacity: 1; pointer-events: auto; transition: opacity 0.2s; }
.stage-after { animation-delay: 2.9s; }
.stage-color { animation-delay: 3.1s; }

/* Map anchors and threads */
#map-svg .node .hit { fill: transparent; }
#map-svg .node .dot { stroke-width: 1.5; }
#map-svg .node.anchor .dot { stroke-width: 3; }
#map-svg .node.canonical.anchor .dot { fill: var(--blood); stroke: #e98a7e; }
#map-svg .node.shadow.anchor .dot { fill: var(--bg); stroke: #e98a7e; }
#map-svg .node:hover .dot, #map-svg .node:focus .dot { r: 9; }
#map-svg .node.anchor:hover .dot, #map-svg .node.anchor:focus .dot, #map-svg .node.selected .dot { r: 11; }
#map-svg .node.selected .hit { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
#map-svg .thread { stroke-width: 3.5; opacity: 0.75; }
#map-svg .thread.lit { opacity: 1; stroke: #e98a7e; filter: drop-shadow(0 0 4px rgba(233, 138, 126, 0.6)); }
#map-svg .cross-label { fill: var(--blood-text); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
#map-svg .lane-label { fill: var(--ink); font-family: var(--mono); font-style: normal; font-size: 13px; letter-spacing: 0.04em; }
#map-svg .lane-label.other { fill: #b9c3cc; }
.map { grid-template-rows: auto 1fr auto; overflow-y: auto; }
.map-detail {
  max-width: 44rem; width: 100%; margin: 0.6rem auto 0; padding: 0.9rem 1.1rem; min-height: 7.5rem;
  border: 1px solid var(--faint); background: var(--bg-raised);
}
.map-detail .kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--blood-text); margin: 0 0 0.3rem; }
.map-detail .detail-title { font-size: 1.1rem; margin: 0 0 0.4rem; }
.map-detail .detail-route { color: var(--muted); font-size: 0.95rem; margin: 0 0 0.6rem; }
.map-detail .detail-route b { color: var(--ink); font-weight: normal; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.4rem; }
.ink-text { color: var(--blood-text); font-style: italic; }
.cta.small { min-height: 44px; padding: 0.4rem 1rem; margin-right: 1rem; }
.tool[aria-pressed="false"] { color: var(--muted); }

/* Props */
.prop-wrap { width: min(26rem, 100%); margin: 0 auto 1.4rem; transform: rotate(-1.5deg); filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.7)); }
.prop-wrap.keytag { transform: rotate(2deg); }
.prop { display: block; width: 100%; height: auto; overflow: visible; }
.prop .printed { font-family: ui-monospace, "SF Mono", Menlo, monospace; fill: #5f5545; font-size: 13px; letter-spacing: 0.08em; }
.prop .printed.small { font-size: 11px; letter-spacing: 0.14em; }
.prop .printed.serial { fill: #a99e86; font-size: 11px; }
.prop .printed.route { font-size: 12.5px; }
.prop-wrap.keytag .printed { fill: #2a2014; font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-size: 24px; letter-spacing: 0.16em; }
.prop .ink-hand {
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; color: #6b3220;   /* old ink, gone brown */
  fill: transparent; stroke: #6b3220; stroke-width: 1.2; stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: write 2.2s cubic-bezier(.5,.1,.4,1) 0.4s forwards, ink-in 0.6s ease 2.4s forwards;
}
.crossing-stage.instant .prop .ink-hand { animation: none !important; fill: currentColor; stroke-dashoffset: 0; stroke-width: 0.4; }

/* Flashback memories */
.flash-night { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: #b9c3cc; margin: 0.4rem 0 0.4rem; text-transform: uppercase; }
.flashback { border-left: 2px dashed var(--shadow); padding-left: 0.9rem; margin: 0 0 0.6rem; font-style: italic; color: #d9d2c5; }
.flashback p { margin: 0 0 0.45rem; line-height: 1.55; }
.flashback p:last-child { color: var(--ink); font-style: normal; }
.flash-close { margin: 0.4rem 0 0.2rem; }

#drawer-body:focus { outline: none !important; }    /* a reading container, focused only so screen readers start at the memory */
a.cta { display: inline-flex; align-items: center; text-decoration: none; }

/* One scroll region: the overlay. The graph is sized to fit; only an explicitly widened phone graph scrolls sideways. */
.map { overflow-y: auto; overflow-x: hidden; }
.map-scroll { overflow: visible; }
.map-scroll.wide { overflow-x: auto; justify-content: flex-start; }
#map-svg { max-width: 100%; }
.map-scroll.wide #map-svg { max-width: none; }

.prop .printed.faded { fill: #9a907c; font-size: 11px; }
.tools { position: relative; display: flex; gap: 0.2rem; }

/* The power cut: a brief darkening, nothing more. */
body.blackout main { animation: blackout 1.3s ease both; }
@keyframes blackout { 0% { opacity: 1; } 12% { opacity: 0.08; } 70% { opacity: 0.08; } 100% { opacity: 1; } }
body.instant-text.blackout main { animation: none; }
/* The header (status, sound, about, evidence) stays reachable above the crossing stage. */
.bar { z-index: 35; }
/* With animations off (Show text immediately / reduced motion), nothing may stay at its pre-fade opacity. */
body.instant-text .choices, body.instant-text .text p, body.instant-text .stage-after,
body.instant-text .stage-color, body.instant-text .trace-hint { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .choices, .text p, .stage-after, .stage-color, .trace-hint { opacity: 1 !important; transform: none !important; }
}

/* Evidence: a toggle, with collapsible groups */
.ev-title { font: inherit; color: inherit; padding: 0; display: inline-flex; gap: 0.4rem; align-items: center; min-height: 44px; }
.ev-title span { font-size: 0.8rem; color: var(--muted); }
.ev-group { border-top: 1px solid var(--faint); }
.ev-group summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px; padding: 0.4rem 0; font-size: 0.95rem;
}
.ev-group summary::-webkit-details-marker { display: none; }
.ev-group summary::before { content: "\25B8"; color: var(--muted); margin-right: 0.5rem; transition: transform 0.15s; }
.ev-group[open] summary::before { transform: rotate(90deg); }
.ev-group summary span:first-child { flex: 1; }
.ev-counts { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.evidence { padding-top: 3.6rem; }   /* the panel's title sits below the header bar, so it can be clicked */

#how[aria-expanded="true"] { color: var(--ink); }
@media (max-width: 40rem) {
  body.drawer-from-story main { padding-bottom: 85vh; }   /* room to scroll an in-story opener above the sheet */
}

/* Engraved (metal) and scratched (small solids) marks: thin light strokes that draw in, no ink. */
.prop .engrave, .prop .scratch {
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; fill: transparent;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: write 2.2s cubic-bezier(.5,.1,.4,1) 0.4s forwards;
}
.prop .engrave { stroke: #241906; stroke-width: 1.6; paint-order: stroke; }
.crossing-stage .prop .engrave { animation: write 2.2s cubic-bezier(.5,.1,.4,1) 0.4s forwards, cut-in 0.6s ease 2.4s forwards; }
.crossing-stage.instant .prop .engrave { fill: rgba(36, 25, 6, 0.55); }
@keyframes cut-in { to { fill: rgba(36, 25, 6, 0.55); } }
.prop .scratch { stroke: #e2d8c3; stroke-width: 1.1; opacity: 0.7; }   /* worn, not fresh */
/* The raised lip beside a hand-scratched groove: a faint highlight, offset up and left. */
.prop .etch-lip { stroke: rgba(255, 244, 214, 0.55) !important; fill: transparent !important; stroke-width: 0.7 !important; }
.prop .etch-lip.scratch { stroke: rgba(0, 0, 0, 0.45) !important; }
.prop .scratch.chalk { stroke: #e8e0cf; stroke-width: 1.4; }
.prop .printed.own { fill: #8f887c; font-size: 11px; letter-spacing: 0.14em; }
.crossing-stage.instant .prop .engrave, .crossing-stage.instant .prop .scratch { animation: none !important; stroke-dashoffset: 0; }



/* A close button you can't miss: labelled, bordered, pinned to the top of its panel. */
.close-btn {
  position: sticky; top: 0; z-index: 3; float: right; display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 40px; padding: 0.35rem 0.85rem; margin: -1.6rem 0 0.6rem 0.8rem;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink);
  background: var(--bg-raised); border: 1px solid #6b6358; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.close-btn span { font-size: 0.9rem; line-height: 1; }
.close-btn:hover, .close-btn:focus-visible { border-color: var(--ink); background: #24201c; }
.map-head .close-btn { position: absolute; top: -0.4rem; right: 0; float: none; margin: 0; }
.ev-head .close-btn { position: absolute; top: -0.4rem; right: 0; float: none; margin: 0; }
.drawer { padding-top: 2.6rem; }
@media (min-width: 40.01rem) {
  .drawer { top: 3.4rem; padding-top: 2.2rem; border-top: 1px solid var(--faint); }   /* below the header, so Close stays reachable */
}

/* The drawer's Close sits in a pinned bar with its own background; content scrolls under it. */
.drawer { padding-top: 0 !important; }
.drawer-bar {
  position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end;
  margin: 0 -1.25rem 0.6rem; padding: 0.7rem 1.25rem 0.6rem; background: var(--bg-raised);
  border-bottom: 1px solid var(--faint);
}
.drawer-bar .close-btn { position: static; float: none; margin: 0; box-shadow: none; }
.ev-head { position: sticky; top: -2.5rem; z-index: 3; background: #0b0a09; padding: 0.4rem 0 0.6rem; }
.evidence { top: 3.4rem; padding-top: 0 !important; border-top: 1px solid var(--faint); }
.ev-head { top: 0; padding-top: 0.9rem; }

/* Landing as a title card: the door, the name in spaced capitals and the tagline form one centred
   mark; the hook below it is the first scene (the time, then the line); then the question. */
#title { text-align: center; }
#title .door { margin: 0 auto -1.2rem; }
#title h1 { text-transform: uppercase; letter-spacing: 0.32em; padding-left: 0.32em; font-size: 1.7rem; margin: 2.4rem 0 0.6rem; }
#title .tagline { font-size: 1rem; line-height: 1.5; color: #8f877b; margin: 0 auto 2.6rem; }
#title .hook { color: var(--ink); font-size: 1.05rem; max-width: 30rem; margin: 0 auto 0.6rem; }
#title .hook .clock { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
#title form { max-width: 30rem; margin-left: auto; margin-right: auto; }
#title label { display: block; }
#title input { text-align: center; }
#title form .cta { justify-self: center; }
#title .replays { max-width: 34rem; margin-left: auto; margin-right: auto; }
/* Recorded nights: a short centred column; the dividers are quiet separators, not rules across the page. */
#title .replays ul { max-width: 15rem; margin-left: auto; margin-right: auto; }
.night { border-top: 1px solid var(--faint); }
.night:last-child { border-bottom: 1px solid var(--faint); }
#title .night button { width: 100%; justify-content: center; text-align: center; min-height: 48px; color: var(--ink); }
#title .night button:hover { text-decoration: underline; text-underline-offset: 4px; }
#title .night button { flex-direction: column; align-items: center; gap: 0.15rem; }
#title .night .night-model { font-size: 0.78rem; color: var(--muted); text-decoration: none; display: block; }
@media (max-width: 40rem) {
  #title h1 { font-size: 1.2rem; letter-spacing: 0.22em; padding-left: 0.22em; margin-top: 1.6rem; }
  #title .tagline { font-size: 0.95rem; margin-bottom: 2rem; }
}

/* The sound card after Begin: dark, quiet, gone in two seconds. */
.sound-card {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; background: var(--bg); color: var(--muted); animation: card-in 0.5s ease both;
}
.sound-card[hidden] { display: none; }
.sound-card svg { width: 2.6rem; height: 2.6rem; opacity: 0.8; }
.sound-card p { margin: 0; font-style: italic; letter-spacing: 0.02em; }
.sound-card.out { opacity: 0; transition: opacity 0.35s ease; }
@keyframes card-in { from { opacity: 0; } to { opacity: 1; } }
.sound-card .sound-card-hint { font-size: 0.85rem; color: #8f877b; margin-top: -0.4rem; }
.sound-card .cta { margin-top: 0.4rem; }
/* The sound switch, always visible in the bar: a speaker with waves when on, crossed out when off. */
.sound-icon { display: inline-flex; align-items: center; justify-content: center; }
.sound-icon svg { width: 1.15rem; height: 1.15rem; }
.sound-icon .slash { display: none; }
.sound-icon[aria-pressed="false"] .waves { display: none; }
.sound-icon[aria-pressed="false"] .slash { display: inline; }

/* "Knock" flickers once as the landing appears: a quick turn to dried-blood red, a beat, then a slow
   fade back to ivory (about 1.2 s), never repeated. Colour only: no movement, no glow. Off for reduced motion. */
#title .knock-word { animation: knock-flicker 1.2s ease-out 0.9s 1 both; }
@keyframes knock-flicker {
  0% { color: var(--ink); }
  12% { color: #b9675e; }
  28% { color: #b9675e; }
  100% { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { #title .knock-word { animation: none; } }

/* Mobile: a compact landing while the pocket form is in use (body.typing, set in app.js). The door
   recedes into the dark, keeping its peephole glow; the title shrinks; the rest steps aside so the
   field stays above the keyboard. Nothing is pinned: on short phones the field matters more.
   Short screens too, so a phone turned sideways gets it. */
@media (max-width: 40rem), (max-height: 30rem) {
  #title .door { transition: width 0.35s ease, margin 0.35s ease; }
  #title h1 { transition: font-size 0.35s ease, margin 0.35s ease; }
  body.typing main { padding-top: 3.5rem; }
  body.typing #title .door { width: 4.25rem; margin-bottom: -0.25rem; }
  body.typing #title h1 { font-size: 1rem; margin: 0.5rem 0 0.3rem; }
  body.typing #title .tagline,
  body.typing #title .hook,
  body.typing #title .replays { display: none; }
  body.typing #title form { margin-top: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  #title .door, #title h1 { transition: none; }
}
/* Centred landing text wraps into even lines, never a single orphaned word. */
#title p, #title label { text-wrap: balance; }
/* The list's heading is a prompt, like the pocket question: italic and muted at the rows' size, so it
   leads the list without looking like one of its items (those are upright, in full ink). */
#title #replays-head { font-family: var(--serif); font-style: italic; font-size: 1rem; letter-spacing: 0.01em; color: var(--muted); margin: 1.6rem 0 0.5rem; }
/* Under Begin: start status and, on failure, two ways on. (Where the answer goes is told in "about".) */
#title .start-status { font-size: 0.85rem; color: var(--muted); margin: 0.7rem 0 0; }
#title .start-fail { margin: 0.2rem 0 0; font-size: 0.9rem; }
#title .start-fail .linkish { color: var(--ink); }
#title .start-fail[hidden], #title .start-status[hidden] { display: none; }
/* Phones: every tap target at least 44x44 CSS px. Invisible hit areas where the visible control is
   smaller (the Close pills, Go on, the inscription in the text), so nothing looks different. */
@media (max-width: 40rem) {
  .close-btn::after { content: ""; position: absolute; inset: -3px -2px; }
  .ink { position: relative; }
  .ink::after { content: ""; position: absolute; inset: -8px -4px; }
}
/* The header bar is 44px controls plus padding (about 4rem). Panels that sit under it start below it,
   and the bar's transparent fade never catches a tap meant for what lies beneath. */
:root { --bar-h: 4rem; }
.bar { pointer-events: none; }
.bar .mode, .bar .tools > * { pointer-events: auto; }
.evidence { top: var(--bar-h); }
.map { padding-top: calc(var(--bar-h) + 0.6rem); }
.ev-head .close-btn { top: 0.25rem; }       /* inside the panel, so none of it is clipped above the panel's edge */

/* One way on (Continue, and Go on on the crossing stage): a thin outlined pill with an arrow. Upright,
   slightly dimmed ink; quieter than the numbered two-option choices. No glow, no pulse, no accent. */
.choices .continue, .crossing-stage .stage-go {
  position: relative; display: inline-flex; align-items: center; width: auto; min-height: 44px;
  padding: 0.45rem 1.1rem; border: 1px solid var(--faint); border-radius: 999px;
  color: rgba(230, 223, 210, 0.85); font-style: normal; letter-spacing: 0.02em; background: none;
}
.choices .continue { justify-self: start; }
.choices .continue::after, .crossing-stage .stage-go::after {
  content: "\2192"; position: static; inset: auto; margin-left: 0.5rem; color: var(--muted); transition: color 0.2s, transform 0.2s;
}
.choices .continue:hover, .choices .continue:focus-visible,
.crossing-stage .stage-go:hover, .crossing-stage .stage-go:focus-visible { border-color: var(--muted); color: var(--ink); }
.choices .continue:hover::after, .choices .continue:focus-visible::after,
.crossing-stage .stage-go:hover::after, .crossing-stage .stage-go:focus-visible::after { color: var(--ink); transform: translateX(2px); }
/* On appearance the arrow nudges twice, then stops: Continue ~0.4 s after the choices fade in; Go on once ready. */
@keyframes nudge-twice { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: translateX(4px); } }
.choices .continue::after { animation: nudge-twice 1.2s ease-in-out 0.4s 1; }
.crossing-stage.ready .stage-go::after { animation: nudge-twice 1.2s ease-in-out 0.4s 1; }
body.instant-text .choices .continue::after, body.instant-text .crossing-stage .stage-go::after,
.crossing-stage.instant .stage-go::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .choices .continue::after, .crossing-stage .stage-go::after { animation: none; transition: none; }
}
/* Desktop with a keyboard and a mouse: a small muted "Enter" hint just after the Continue pill. */
@media (hover: hover) and (pointer: fine) {
  .choices .continue::before {
    content: "Enter"; position: absolute; left: calc(100% + 0.7rem); top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); font-style: normal; pointer-events: none;
  }
}
.ev-authored { color: var(--muted); font-style: italic; }

/* The other you's door: the landing's door again, peephole lit, over the scene. */
.scene-door { display: flex; justify-content: center; margin: 0 0 1.6rem; }
.scene-door .door { width: 8rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .scene-door .door * { transition: none !important; } }
/* The central line: its own paragraph, more room above, a little larger; it arrives after the rest. */
.text p.climax { margin-top: 2.4rem; font-size: 1.15em; animation-delay: 1.2s !important; opacity: 0; }   /* !important beats the pacing rule's shorthand; opacity 0 keeps it hidden until its own fade */
body.instant-text .text p.climax { animation: none; opacity: 1; transform: none; }
.ev-changed { border-top: 1px solid var(--faint); margin: 0.6rem 0; padding-top: 0.4rem; }
.ev-changed p { margin: 0.2rem 0 0.5rem; }

.choices .continue:disabled { visibility: hidden; }
/* Crossing 1, discovered: the mark is already there; it settles into view, no stroke-writing. */
.crossing-stage.discovered .prop .ink-hand { animation: none !important; fill: currentColor; stroke-dashoffset: 0; stroke-width: 0.4; }
.crossing-stage.discovered .prop .engrave { animation: none !important; stroke-dashoffset: 0; fill: rgba(36, 25, 6, 0.55); }
.crossing-stage.discovered .prop .scratch { animation: none !important; stroke-dashoffset: 0; }
.crossing-stage.discovered .prop-wrap { animation: settle 0.9s ease both; }
@keyframes settle { from { opacity: 0; transform: rotate(-1.5deg) translateY(6px); } }
.crossing-stage.discovered .prop-wrap.keytag { animation-name: settle-tag; }
@keyframes settle-tag { from { opacity: 0; transform: rotate(2deg) translateY(6px); } }
.crossing-stage.discovered .stage-after { animation-delay: 1s; }
.crossing-stage.discovered .stage-color { animation-delay: 1.5s; }
.crossing-stage.discovered .stage-go { animation-delay: 1.6s; }
/* Crossing 2, written while you watch: the stroke starts after the beat of near-silence. */
.crossing-stage.written .prop .ink-hand { animation-delay: 1s, 3s; }
.crossing-stage.written .prop .engrave { animation-delay: 1s, 3s; }
.crossing-stage.written .prop .scratch, .crossing-stage.written .prop .etch-lip { animation-delay: 1s; }
.crossing-stage.written .stage-after { animation-delay: 3.5s; }
.crossing-stage.written .stage-color { animation-delay: 4.1s; }
.crossing-stage.written .stage-go { animation-delay: 4.3s; }
.crossing-stage.instant .prop-wrap { animation: none !important; }
/* The central line, larger (clamped on narrow phones), with room around it. */
.text p.climax { font-size: clamp(1.1em, 5.4vw, 1.3em); margin: 2.8rem 0 2.4rem; line-height: 1.4; }
.afterword-note { margin: -0.2rem 0 0.6rem 2rem; font-size: 0.85rem; color: var(--muted); font-style: italic; }
.ev-diverged { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.4rem 0 0.6rem; }
.ev-diverged th, .ev-diverged td { text-align: left; vertical-align: top; padding: 0.35rem 0.4rem 0.35rem 0; border-top: 1px solid var(--faint); }
.ev-diverged thead th { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: normal; }
.ev-diverged tbody th { font-weight: normal; color: var(--muted); white-space: nowrap; padding-right: 0.8rem; }

/* The line about your own choice comes last on the stage, after the atmosphere sentence. */
.crossing-stage.discovered .stage-echo { animation-delay: 2s; }
.crossing-stage.written .stage-echo { animation-delay: 4.6s; }
#map-svg .fork-leader { stroke: var(--faint); stroke-width: 1; }

.ev-target { outline: 1px solid var(--ink); outline-offset: 2px; }