:root {
  color-scheme: dark;
  --bg: #171117;
  --panel: #241924;
  --paper: #f3e7d3;
  --muted: #c9b7a1;
  --line: #6c4a55;
  --accent: #f0a66e;
  --accent-2: #b9d6c7;
  --shadow: rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  background: radial-gradient(circle at 20% 0%, #332033 0, transparent 34rem), var(--bg);
  color: var(--paper);
}
.shell { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 56px; }
.masthead { margin-bottom: 24px; }
.eyebrow, .note, .meta { color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; }
.eyebrow { text-transform: uppercase; font-size: .76rem; }
h1 { font-size: clamp(2.5rem, 8vw, 5.6rem); line-height: .88; margin: .1em 0 .2em; }
.dek { max-width: 760px; font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.45; }
.note { max-width: 760px; font-size: .92rem; line-height: 1.5; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 60px var(--shadow);
  padding: clamp(20px, 4vw, 36px);
}
.scene-title { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); margin: 0 0 14px; }
.prose { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.65; max-width: 720px; }
.prose p { margin: 0 0 1em; }
.choices { display: grid; gap: 12px; margin-top: 18px; }
.choices--first { margin-top: 0; }
.opening-context {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 14px;
}
.opening-context summary {
  color: var(--muted);
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .9rem;
  letter-spacing: .04em;
}
.opening-context .prose { margin-top: 14px; }
button {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  background: #2f2028;
  color: var(--paper);
  border-radius: 16px;
  padding: 16px 18px;
  text-align: left;
  font: inherit;
  font-size: 1.03rem;
  line-height: 1.35;
  cursor: pointer;
}
button:hover, button:focus { outline: 2px solid var(--accent); outline-offset: 2px; background: #3b2830; }
.choice-label { display:block; color:var(--accent-2); font-family:ui-sans-serif, system-ui, sans-serif; font-size:.74rem; font-weight:800; letter-spacing:.12em; margin-bottom:6px; text-transform:uppercase; }
.route-card { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; }
.route-card strong { color: var(--paper); }
.first-choice-note { margin: 16px 0 0; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: .92rem; line-height: 1.45; }
.choice-response {
  margin: 0 0 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  border-radius: 16px;
  background: rgba(240, 166, 110, .10);
  color: var(--paper);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .96rem;
  line-height: 1.45;
  padding: 12px 14px;
}
.ledger {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(0,0,0,.18);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.ledger-label {
  margin: 0 0 8px;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}
.ledger-line { margin: 0; color: var(--paper); font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: 1.12rem; font-style: italic; }
.ledger-status { margin: 8px 0 0; color: var(--muted); line-height: 1.45; }
.ledger ol { margin: 12px 0 0; padding-left: 1.25rem; color: var(--muted); line-height: 1.45; }
.ledger--held { border-color: color-mix(in srgb, var(--accent-2) 70%, var(--line)); }
.ledger--risk { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); }
.ledger--missing { border-color: #9f5b67; }
.echo { color: var(--accent); font-style: italic; }
.missing { display: inline-block; min-width: 4.2ch; border-bottom: 2px solid var(--accent); transform: translateY(-.1em); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.actions button { width: auto; }
.receipt { white-space: pre-wrap; background: #181018; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 14px; color: var(--accent-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
@media (max-width: 640px) { .shell { width: min(100% - 22px, 920px); padding-top: 24px; } .card { border-radius: 16px; } }