:root {
  --paper: #fbfaf7;
  --ink: #111110;
  --ink-2: #55534e;
  --ink-3: #8e8b84;
  --rule: #d9d6cf;
  --stage: #0d0d0c;
  --threat: 214, 84, 52;
  --cmp: #ffc36b;
  --cmp-ink: #a35f00;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f0f0e; --ink: #ecebe7; --ink-2: #a9a69f; --ink-3: #75726c;
    --rule: #2a2927; --cmp-ink: #ffc36b; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f0f0e; --ink: #ecebe7; --ink-2: #a9a69f; --ink-3: #75726c;
  --rule: #2a2927; --cmp-ink: #ffc36b; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--serif); font-size: 17px; line-height: 1.5;
       -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: 1480px; margin: 0 auto; padding: 0 16px; }

/* ── Masthead ─────────────────────────────────────────── */
header.mast { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 22px 0 14px; border-bottom: 1px solid var(--ink); }
.mast h1 { font-weight: 400; font-size: 30px; letter-spacing: -0.01em; margin: 0; }
.mast h1 em { font-style: italic; }
.mast .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); }
.mast a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.lede { color: var(--ink-2); font-size: 18px; max-width: 760px; margin: 14px 0 18px; }

/* ── Stage ────────────────────────────────────────────── */
.stage-shell { position: relative; background: var(--stage); aspect-ratio: 16 / 9;
  overflow: hidden; user-select: none; touch-action: pan-y; }
.stage { position: absolute; inset: 0; }
.stage img.layer, .stage canvas.layer, .stage svg.layer, .stage .ghosts {
  position: absolute; inset: 0; width: 100%; height: 100%; }
.stage img.layer { object-fit: cover; transition: filter 900ms ease; }
.stage img.base { filter: blur(var(--soft, 1.4px)) saturate(var(--desat, .62))
  brightness(.94) contrast(.96); transform: scale(1.012); }
.stage img.sharp { filter: saturate(1.08) contrast(1.04);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  transition: opacity 700ms ease; }
.stage canvas.tint { mix-blend-mode: soft-light; pointer-events: none; }
.stage canvas.glow { mix-blend-mode: screen; pointer-events: none; }
.stage .ghosts { pointer-events: none; }
.stage .ghost { position: absolute; background-repeat: no-repeat; opacity: .16;
  filter: sepia(.75) blur(.6px); -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.stage svg.layer { overflow: visible; }
.stage svg text { font-family: var(--mono); fill: #fff; paint-order: stroke;
  stroke: rgba(0,0,0,.55); stroke-width: 2.4px; }
.stage svg { --k: 1.2; }
.stage svg .note { font-family: var(--serif); font-style: italic; font-size: calc(14px * var(--k)); }
.stage svg .tick { font-size: calc(10px * var(--k)); letter-spacing: .04em; }
.stage svg .slabel { font-size: calc(9.5px * var(--k)); letter-spacing: .1em; }
.stage svg text { stroke-width: calc(2.4px * var(--k)); }
.stage svg .hit { fill: transparent; cursor: crosshair; }
.stage svg .pred { stroke-dasharray: 2 5; animation: drift 6s linear infinite; }
@keyframes drift { to { stroke-dashoffset: -70; } }
@media (prefers-reduced-motion: reduce) { .stage svg .pred { animation: none; } }

.stage.right { clip-path: inset(0 0 0 var(--split, 50%)); }
/* Compare: each mind is cut at the divider (the left one used to spill its
   marks into the right half), and the second mind is drawn in amber. CSS beats
   SVG presentation attributes, so the renderer stays colour-agnostic. */
.compare .stage.left { clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
.stage.right svg text { fill: var(--cmp); }
.stage.right svg [stroke="#fff"] { stroke: var(--cmp); }
.stage.right svg [fill="#fff"] { fill: var(--cmp); }
.stage-label.r { color: var(--cmp); }
.compare .split-handle::before { background: linear-gradient(#fff, var(--cmp)); }
.reading:not(.single) > div:nth-child(2) { border-left: 2px solid var(--cmp-ink); padding-left: 14px; }
.reading:not(.single) > div:nth-child(2) .who { color: var(--cmp-ink); }
.chain.b .seen, .chain.b .who { color: var(--cmp-ink); }
.chain.b ol::before { background: var(--cmp-ink); opacity: .7; }
.split-handle { position: absolute; top: 0; bottom: 0; width: 28px; margin-left: -14px;
  left: var(--split, 50%); cursor: ew-resize; display: none; z-index: 5; touch-action: none; }
.split-handle::before { content: ""; position: absolute; left: 13.5px; top: 0; bottom: 0;
  width: 1px; background: rgba(255,255,255,.75); }
.compare .split-handle { display: block; }
.stage-label { position: absolute; top: 12px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); display: none; z-index: 4; }
.compare .stage-label { display: block; }
.stage-label.l { left: 14px; } .stage-label.r { right: 14px; text-align: right; }

.stage-status { position: absolute; inset: 0; display: grid; place-items: center;
  color: #e9e7e1; font-style: italic; font-size: 19px; text-align: center; padding: 24px;
  background: rgba(13,13,12,.55); opacity: 0; pointer-events: none; transition: opacity 400ms; z-index: 6; }
.stage-status.on { opacity: 1; }

.tip { position: absolute; z-index: 7; max-width: 280px; padding: 10px 12px;
  background: rgba(251,250,247,.96); color: #111110; font-size: 14px; line-height: 1.4;
  border: 1px solid #111110; pointer-events: none; display: none; }
.tip .t-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #55534e; }
.tip .t-note { font-style: italic; font-size: 16px; margin: 2px 0 6px; }
.tip dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 0; }
.tip dt { font-family: var(--mono); font-size: 10.5px; color: #8e8b84; padding-top: 2px; }
.tip dd { margin: 0; }

/* ── Touch: selection, details panel, notice chips ─────── */
.sel-box { position: absolute; z-index: 6; pointer-events: none; border: 1.5px solid #fff;
  border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 22px rgba(255,255,255,.25); }
.notice { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 10px 0 0; }
.notice:empty { display: none; }
.notice-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); margin-right: 4px; }
.notice-chip { font-size: 14px; padding: 6px 11px; min-height: 36px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink-2); text-align: left; }
.notice-chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.detail { position: relative; margin-top: 10px; padding: 12px 40px 14px 14px; border-left: 2px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, var(--ink)); font-size: 15px; line-height: 1.45; }
.detail .t-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.detail .t-note { font-style: italic; font-size: 18px; margin: 2px 0 8px; }
.detail dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.detail dt { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-top: 3px; }
.detail dd { margin: 0; }
.detail-close { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0;
  background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-2); }
/* Mouse users have the hover tooltip; keep the chips row for touch and narrow
   screens, where there is no hover to discover objects with. */
@media (hover: hover) and (min-width: 861px) { .notice { display: none; } }

/* Credit line for embeds on other sites (hidden on emergencemachine.com). */
.embed-credit { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; margin: 14px 0 4px; }
.embed-credit a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }

/* Whose street: your country by default, any other on request. */
.place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.place[hidden] { display: none; }
.place-k { letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.place select { font: inherit; font-size: 13px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; min-height: 36px; max-width: 100%; }
.place-note { color: var(--ink-3); }
.place-back { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid var(--rule); }

/* ── Three sequences ──────────────────────────────────── */
.seq { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.seq button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px 9px 0;
  margin-right: 18px; cursor: pointer; color: var(--ink-2); font-size: 15px; }
.seq button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.seq button:disabled { opacity: .35; cursor: default; }
.seq-people .ladder, .seq-people .controls,
.seq-table .ladder, .seq-table .controls, .seq-table #reading, .seq-table #chains, .seq-table .notice { display: none; }
.self-box { position: absolute; z-index: 6; pointer-events: none; border: 1.5px dashed #fff; border-radius: 6px; }
.self-box span { position: absolute; top: -22px; left: 0; font-family: var(--mono); font-size: 11px; color: #fff;
  letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.hl-boxes > div { position: absolute; z-index: 6; pointer-events: none; border: 1.5px solid #fff; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.people-bar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 12px 0 2px; }
.people-bar .p-chip { font-size: 14px; padding: 6px 12px; min-height: 36px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink-2); }
.people-bar .p-chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.people-bar .p-sum { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.people-bar .p-play { margin-left: auto; font-family: var(--mono); font-size: 11px; }
.estrip { display: grid; grid-template-columns: minmax(80px, 9em) repeat(15, minmax(14px, 1fr)); gap: 2px 0;
  margin: 14px 0 6px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); align-items: center; }
.estrip .h { text-align: center; padding-bottom: 2px; }
.estrip .h.shared { color: var(--ink); }
.estrip .name { font-family: var(--serif); font-size: 13px; color: var(--ink-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.estrip .cell { height: 22px; display: grid; place-items: center; }
.estrip .cell.shared { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.estrip .dot { border-radius: 50%; background: var(--ink); }
.sim { font-size: 34px; font-style: italic; line-height: 1.1; margin: 4px 0 2px; }
.diff-list { margin: 10px 0 0; padding: 0; list-style: none; }
.diff-list li { padding: 4px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.diff-list b { font-weight: 400; font-style: italic; }
.ladder-table { margin: 14px 0 0; }
.lt-title { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); padding: 18px 0 8px; border-bottom: 1px solid var(--ink); }
.local-lens .lt-title { padding-top: 6px; }
.local-intro { color: var(--ink-2); font-style: italic; margin: 8px 0 12px; }
.local-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.local-card { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.local-card:hover, .local-card.on { border-color: var(--ink); }
.lc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 8px; }
.lc-name { font-size: 19px; font-style: italic; }
.lc-local { font-size: 14px; color: var(--ink-2); }
.lc-chain { list-style: none; margin: 0 0 8px; padding: 0 0 0 4px; border-left: 1px solid var(--rule); }
.lc-chain li { display: grid; grid-template-columns: 3em 1fr; gap: 0 6px; padding: 3px 0 3px 8px; font-size: 14px;
  line-height: 1.4; position: relative; }
.lc-chain li::before { content: ""; position: absolute; left: -4px; top: 11px; width: 7px; height: 1px; background: var(--ink-3); }
.lc-e { font-family: var(--mono); font-size: 11px; color: var(--ink-2); padding-top: 2px; }
.lc-emerges, .lc-view { font-size: 14.5px; line-height: 1.45; margin: 6px 0 0; }
.lc-emerges b, .lc-view b { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); }
.lt-row { display: grid; grid-template-columns: 4.2em minmax(7em, 13em) 1fr; gap: 0 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.lt-row:hover, .lt-row.on { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lt-row .e { font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding-left: 4px; }
.lt-row .n { font-style: italic; }
.lt-row .things { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.lt-row .thing { font-size: 14px; padding: 1px 9px; border: 1px solid var(--rule); border-radius: 999px; }
.lt-row .thing.struct { font-style: italic; border-style: dashed; }
.lt-row .none { color: var(--ink-3); font-style: italic; font-size: 14px; }
@media (max-width: 860px) {
  .lt-row { grid-template-columns: 3.4em 1fr; }
  .lt-row .things { grid-column: 1 / -1; padding: 4px 4px 0; }
  .seq button { font-size: 14px; margin-right: 12px; }
}

/* ── Ladder (E-level slider) ──────────────────────────── */
.ladder { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 14px; padding: 14px 0 10px; border-bottom: 1px solid var(--rule); }
.ladder .lvl { font-family: var(--mono); font-size: 12px; min-width: 210px; }
.ladder .lvl b { font-weight: 500; font-size: 15px; margin-right: 6px; }
.ladder input[type=range] { width: 100%; accent-color: var(--ink); }
.ladder .ticks { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.ladder .reset { font-family: var(--mono); font-size: 11px; }

/* ── Controls ─────────────────────────────────────────── */
.controls { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0;
  border-bottom: 1px solid var(--rule); }
.controls > section { padding: 14px 18px 18px 0; }
.controls > section + section { padding-left: 18px; border-left: 1px solid var(--rule); }
.label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.chip { background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--ink-2);
  border-bottom: 1px solid transparent; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.chip:disabled { opacity: .35; cursor: default; }
.btn { background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  padding: 7px 14px; cursor: pointer; font-size: 15px; }
.btn.ghost { background: none; color: var(--ink); }
.btn:disabled { opacity: .4; cursor: default; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
input[type=text], select, textarea { background: transparent; border: 0;
  border-bottom: 1px solid var(--rule); padding: 5px 0; width: 100%; font-size: 15px; }
textarea { resize: vertical; min-height: 44px; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--ink); }
.toggle { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-size: 15px; }
.toggle input { accent-color: var(--ink); }
.signals { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin-top: 8px;
  line-height: 1.6; }
.signals .live::before { content: "● "; color: #4a8f5a; }
.signals .derived::before { content: "○ "; }
.modes { display: flex; gap: 18px; }
.observer-form { display: none; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 10px; }
.observer-form.open { display: grid; }
.observer-form label { font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; }
.observer-form .wide { grid-column: 1 / -1; }
.compare-only { display: none; }
.is-compare .compare-only { display: block; }

/* ── Reading ──────────────────────────────────────────── */
.reading { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; padding: 22px 0 10px; }
.reading.single { grid-template-columns: minmax(0, 760px); }
.gist { font-size: 22px; line-height: 1.38; margin: 0 0 6px; font-style: italic; }
.who { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-2);
  text-transform: uppercase; }
.disclaim { color: var(--ink-3); font-size: 14px; margin: 10px 0 0; max-width: 760px; }
.misread { color: var(--ink-2); font-size: 15px; margin: 12px 0 0; padding-left: 12px;
  border-left: 1px solid var(--rule); }
.unseen-btn { margin-top: 16px; }

.chains { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px; margin-top: 18px; }
.chain { position: relative; padding-left: 0; }
.chain .seen { font-style: italic; font-size: 18px; margin-bottom: 8px; }
.chain ol { list-style: none; margin: 0; padding: 0 0 0 52px; position: relative; }
.chain ol::before { content: ""; position: absolute; left: 36px; top: 4px; bottom: 6px;
  width: 1px; background: var(--ink); opacity: .35; }
.chain li { position: relative; font-size: 15px; padding: 2px 0 6px;
  opacity: 0; transform: translateY(4px); animation: rise 500ms ease forwards; }
.chain li .e { position: absolute; left: -52px; width: 30px; text-align: right;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2); top: 5px; }
.chain li::before { content: ""; position: absolute; left: -19px; top: 11px; width: 7px;
  height: 1px; background: var(--ink); opacity: .5; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chain li { animation: none; opacity: 1; transform: none; } }

.feed { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); }
.feed .label { margin-bottom: 6px; }
.feed-item { display: grid; grid-template-columns: 9.5em 1fr; gap: 0 12px; padding: 3px 0; font-size: 15px; }
.feed-ch { font-family: var(--mono); font-size: 11px; color: var(--ink-2); padding-top: 3px; }
.feed-fr { font-style: italic; }
.feed-th { grid-column: 2; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.chain .feed-th { margin: 6px 0 0 52px; }
.feed-none { color: var(--ink-3); font-style: italic; font-size: 15px; margin: 0; }
.signals details { margin-top: 4px; }
.signals summary { cursor: pointer; }
.signals ul { margin: 4px 0 0; padding-left: 16px; }
.signals a { color: inherit; }

footer.colophon { border-top: 1px solid var(--ink); margin-top: 28px; padding: 14px 0 40px;
  font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
footer.colophon a { color: inherit; }

/* ── Embedded in an essay ─────────────────────────────── */
.embed body { background: transparent; }
/* emergencemachine.com is a fixed dark theme (base #1B1B1B, text #CBCBCB). */
:root.embed[data-theme="dark"] { --paper: #1b1b1b; --ink: #e2e2e2; --ink-2: #a8a8a8;
  --ink-3: #7c7c7c; --rule: #343434; }
.embed .wrap { padding: 0; max-width: none; }
.embed header.mast, .embed .lede, .embed footer.colophon, .embed .world-section { display: none; }
.embed .controls { grid-template-columns: 1fr 1fr; }
.embed .stage-shell { margin-top: 0; }

@media (max-width: 860px) {
  .controls { grid-template-columns: 1fr; }
  .controls > section { padding: 14px 0; }
  .controls > section + section { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .reading { grid-template-columns: 1fr; gap: 24px; }
  .ladder { grid-template-columns: 1fr; gap: 6px; }
  .ladder .lvl { min-width: 0; }
  .mast h1 { font-size: 24px; }
}

/* Mobile: a real tap area for 'back to your country'. */
.place-back { padding: 8px 2px; }
@media (max-width: 600px) { .ladder .reset { min-height: 36px; } }

/* [hidden] must win over display rules (e.g. .people-bar is flex). */
[hidden] { display: none !important; }