/* ─────────────────────────────────────────────────────────────
   THE EGGPLANT FILES — noir dossier theme
   A dark "desk" background with paper case files on top.
   ───────────────────────────────────────────────────────────── */
:root {
  --desk: #16111c;
  --desk-2: #221831;
  --paper: #f1e8d4;
  --paper-2: #e7dcc2;
  --paper-edge: #d6c7a6;
  --ink: #221c17;
  --ink-soft: #544a3f;
  --ink-faint: #8a7d6c;
  --eggplant: #5b2a86;
  --eggplant-2: #7c3fb3;
  --eggplant-glow: #b681ef;
  --stamp: #b3261e;
  --leaf: #3f7a3a;
  --highlight: #ffe86b;
  --sticky: #fff1a1;
  --terminal: #0f1410;
  --terminal-ink: #8df58a;
  --on-desk: #e9e1f3;
  --on-desk-soft: #b9adc9;
  --radius: 6px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  --font-type: "Special Elite", "Courier New", monospace;
  /* Reading text, buttons and cards: one clean face, large. The typewriter face (--font-type) is for titles, stamps,
     tabs and labels only, so the case-file feel stays where it reads as a label, not in the paragraphs. */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* The holographic sheen on 3D buttons (see "Holo desk" at the end) */
  --holo: linear-gradient(110deg, rgba(255, 80, 210, 0) 18%, rgba(255, 80, 210, .26) 34%, rgba(90, 230, 255, .28) 50%, rgba(255, 236, 120, .24) 66%, rgba(255, 236, 120, 0) 82%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Everything sized in rem grows with this: 18px instead of the browser's 16px. */
html { -webkit-text-size-adjust: 100%; font-size: 112.5%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(124, 63, 179, .35), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(179, 38, 30, .12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 7px),
    var(--desk);
  background-attachment: fixed;
  color: var(--on-desk);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

a { color: var(--eggplant-glow); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--highlight); outline-offset: 2px; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--highlight); color: #000; padding: 8px 12px; border-radius: 4px;
}
.skip:focus { left: 8px; }

/* ───────────── HUD ───────────── */
#hud {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 16px;
  background: rgba(22, 17, 28, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(182, 129, 239, .25);
}
.brand {
  background: none; border: 0; padding: 4px 0;
  font-family: var(--font-type); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-desk); white-space: nowrap;
}
.brand-egg { width: 1.7em; height: 1.7em; vertical-align: -0.5em; filter: drop-shadow(0 0 3px rgba(182, 129, 239, .45)); }
.stats { display: flex; gap: 16px; align-items: center; }
.stat { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.stat b { font-family: var(--font-type); font-size: 1.15rem; min-width: 1ch; }
.stat small { color: var(--on-desk-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.meter { display: inline-flex; gap: 2px; }
.meter i { width: 6px; height: 14px; border-radius: 1px; background: rgba(255, 255, 255, .14); }
.meter i.on { background: #6fd66a; }
.meter.low i.on { background: #ff6a5a; animation: pulse 1s ease-in-out infinite; }
.tools { display: flex; gap: 6px; margin-left: auto; } /* when the bar wraps on a narrower screen, the tools stay on the right */
.tools button {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 5px 11px; font-size: .9rem; white-space: nowrap;
}
.tools button:hover { background: rgba(182, 129, 239, .2); border-color: var(--eggplant-glow); }

/* ───────────── Layout ───────────── */
main { max-width: 860px; margin: 0 auto; padding: 32px 16px 24px; outline: none; }
body[data-view="lab"] main { max-width: 1280px; } /* the Forensic Dynamics Lab (js/lab.js, css/lab.css) runs wider */
@media (max-width: 640px) { body[data-view="lab"] main { padding: 10px 6px 24px; } } /* and nearly edge to edge on a phone, close to the top */

.dossier, .cover-folder {
  position: relative;
  background:
    radial-gradient(140px 140px at 92% 8%, rgba(120, 80, 30, .10) 38%, rgba(120, 80, 30, .16) 40%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 120px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .018) 0 1px, transparent 1px 3px),
    var(--paper);
  color: var(--ink);
  border-radius: 2px var(--radius) var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 44px clamp(18px, 5vw, 56px) 40px;
  margin-top: 28px;
  animation: slide-in .45s ease-out both;
}
.folder-tab {
  position: absolute; top: -28px; left: 0;
  background: var(--paper-2); color: var(--ink-soft);
  font-family: var(--font-type); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 16px 4px; border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, .2);
  max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stamp {
  position: absolute; top: 22px; right: clamp(14px, 4vw, 40px);
  font-family: var(--font-type); text-transform: uppercase; letter-spacing: .12em;
  color: var(--stamp); border: 3px solid var(--stamp); border-radius: 4px;
  padding: 2px 10px; font-size: .85rem;
  transform: rotate(8deg); opacity: .7;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.scene-head { margin-bottom: 22px; padding-right: 110px; }
.chapter {
  margin: 0 0 6px; font-family: var(--font-type); text-transform: uppercase; letter-spacing: .1em;
  color: var(--eggplant); font-size: .85rem;
}
.scene-head h1, .cover h1 {
  margin: 0; font-family: var(--font-type); font-weight: 400;
  font-size: clamp(1.7rem, 4.6vw, 2.6rem); line-height: 1.12; outline: none;
}
.timestamp { margin: 10px 0 0; color: var(--ink-soft); font-size: .9rem; letter-spacing: .04em; }

/* ───────────── Outcome sticky note ───────────── */
.outcome {
  position: relative;
  background: var(--sticky); color: #2c2610;
  padding: 18px 20px 14px; margin: 6px 0 28px;
  transform: rotate(-.6deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  animation: drop-in .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.outcome .tape {
  position: absolute; top: -10px; left: 50%; width: 90px; height: 22px; margin-left: -45px;
  background: rgba(255, 255, 255, .55); transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.outcome p { margin: 0 0 8px; }
.you-chose { font-size: .88rem; color: #6b5d1c; }
.you-chose span { font-family: var(--font-type); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.outcome .result { font-size: 1.02rem; }
.gains { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gains li {
  font-size: .8rem; padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .07); border: 1px solid rgba(0, 0, 0, .12);
}
.gains .up { background: #d7f5d0; border-color: #8fcf84; }
.gains .down { background: #ffd9d3; border-color: #f0998c; }
.gains .debt { background: #eadcf7; border-color: #b890de; }
.gains .exhibit { background: #fff; border-color: #cbb88c; }
.gains .bingo { background: #dfe9ff; border-color: #95b0ec; }

/* ───────────── Media ───────────── */
.media { margin: 0 0 30px; display: grid; gap: 18px; }
.media-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.tapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; align-items: start; }
.m { margin: 0; }
.m figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: 8px; text-align: center; }

.polaroid {
  position: relative; background: #fff; padding: 12px 12px 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22); transform: rotate(.4deg);
}
.polaroid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #222; }
.clip {
  position: absolute; top: -14px; left: 28px; width: 18px; height: 46px; z-index: 2;
  border: 3px solid #8d8d95; border-radius: 10px; border-bottom-color: transparent;
}

.ph { display: none; }
.m[data-state="missing"] .ph { display: flex; }
.m-image[data-state="missing"] img { display: none; }
.m-video[data-state="missing"] video { display: none; }
.m-audio[data-state="missing"] .deck, .m-audio[data-state="missing"] .reels { opacity: .35; }

.ph-image {
  aspect-ratio: 16 / 9; width: 100%;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(124, 63, 179, .55), transparent 60%),
    linear-gradient(135deg, #1c1426, #2b1d3b);
  color: #efe6ff; padding: 16px;
}
.ph-icon { font-size: clamp(3rem, 12vw, 5.5rem); line-height: 1; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); }
.ph-label { font-family: var(--font-type); text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; }
.ph-sub { font-size: .78rem; opacity: .75; }

.crt {
  position: relative; background: #0b0b0d; border-radius: 14px; padding: 10px;
  box-shadow: inset 0 0 0 2px #2a2a31, 0 10px 24px rgba(0, 0, 0, .3);
}
.crt video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: #000; }
.ph-video {
  aspect-ratio: 16 / 9; width: 100%; border-radius: 6px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  color: #c9c9d1; padding: 12px; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, #26262e, #0c0c10);
}
.ph-video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .06) 50%, transparent 100%);
  animation: scan 3.5s linear infinite;
}
.rec { position: absolute; top: 10px; left: 12px; font-size: .75rem; letter-spacing: .1em; color: #ff5a4e; display: flex; align-items: center; gap: 6px; }
.rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: blink 1.2s steps(2, start) infinite; }

.m-audio { display: flex; flex-direction: column; } /* a 3D cassette over its deck; the caption stays inside the figure */
.ph-audio { flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.ph-audio .ph-label { color: #ff9b8f; }

.dev-info { margin-top: 8px; font-size: .72rem; line-height: 1.4; text-align: left; max-width: 100%; }
.dev-info code { display: inline-block; background: rgba(255, 232, 107, .9); color: #000; padding: 1px 6px; border-radius: 3px; word-break: break-all; }
.dev-info p { margin: 6px 0 0; opacity: .85; }

/* ───────────── Body copy ───────────── */
.body p { margin: 0 0 1em; }
.body strong { color: var(--eggplant); }

.transcript {
  margin: 1.2em 0; padding: 14px 18px;
  background: rgba(91, 42, 134, .07);
  border-left: 5px solid var(--eggplant);
}
.transcript .who {
  display: block; font-family: var(--font-type); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--eggplant); margin-bottom: 4px;
}
.transcript p { margin: 0; font-size: 1.12rem; font-weight: 700; }

.analyst {
  margin: 1.4em 0; padding: 14px 18px 12px; position: relative;
  border: 2px dashed rgba(179, 38, 30, .55); border-radius: 4px;
  background: rgba(179, 38, 30, .04);
}
.analyst .tag {
  position: absolute; top: -12px; left: 12px; background: var(--paper);
  padding: 0 8px; font-family: var(--font-type); font-size: .75rem; letter-spacing: .12em;
  color: var(--stamp); text-transform: uppercase;
}
.analyst p { margin: 0; font-size: .95rem; }

.document {
  margin: 1.4em 0; padding: 22px 22px 16px; background: #fbf8f0;
  border: 1px solid var(--paper-edge);
  box-shadow: 0 0 0 6px rgba(182, 129, 239, .12), 0 8px 18px rgba(0, 0, 0, .12);
  border-radius: 3px;
}
.document h3 {
  margin: 0 0 12px; text-align: center; font-family: var(--font-type); font-weight: 400;
  text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem;
  border-bottom: 2px double var(--ink-faint); padding-bottom: 8px;
}
.document p { margin: 0 0 .7em; font-size: .95rem; }
.document.fold > summary { list-style: none; cursor: pointer; }
.document.fold > summary::-webkit-details-marker { display: none; }
.document.fold:not([open]) { padding-bottom: 14px; }
.document.fold:not([open]) h3 { margin-bottom: 8px; }
.fold-hint {
  display: block; text-align: center; font-family: var(--font-type); font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stamp);
}
.fold-hint::before { content: "🔒 "; }
.document.fold[open] .fold-hint { display: none; }
.document.fold > summary:focus-visible { outline: 2px solid var(--eggplant-glow); outline-offset: 4px; }
.signatures { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: .85rem; color: var(--ink-faint); flex-wrap: wrap; }

.phone {
  margin: 1.2em auto; max-width: 360px; padding: 16px 14px;
  background: #101014; border-radius: 26px; box-shadow: inset 0 0 0 3px #2a2a30, 0 10px 24px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; gap: 8px;
}
.bubble {
  max-width: 82%; padding: 8px 12px; border-radius: 18px; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .95rem; line-height: 1.35;
}
.bubble.them { background: #3a3a40; color: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.me { background: #6b37a3; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.system { background: none; color: #a8a8b3; align-self: center; text-align: center; font-size: .85rem; }
.bubble .meta { display: block; font-size: .7rem; opacity: .65; margin-top: 3px; }

.terminal {
  margin: 1.2em 0; padding: 16px 18px; background: var(--terminal); color: var(--terminal-ink);
  border-radius: 6px; overflow-x: auto; font-size: .92rem; line-height: 1.5;
  box-shadow: inset 0 0 0 1px #1f3a1f;
}

.redact {
  border: 0; padding: 0 2px; margin: 0; background: #111; color: transparent; border-radius: 2px;
  font: inherit; line-height: inherit; cursor: pointer; position: relative; text-align: left;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.redact span { color: transparent; }
.redact:hover, .redact:focus-visible { background: #2c2233; }
.redact:hover::after {
  content: "declassify?"; position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  font-size: .7rem; color: #fff; background: var(--stamp); padding: 1px 6px; border-radius: 3px; white-space: nowrap;
}
mark.declassified {
  background: linear-gradient(transparent 35%, var(--highlight) 35%, var(--highlight) 88%, transparent 88%);
  color: inherit; padding: 0 2px; animation: reveal .5s ease-out;
}

/* ───────────── Choices ───────────── */
.choices { margin-top: 34px; border-top: 2px dashed var(--ink-faint); padding-top: 22px; }
.choices h2 {
  margin: 0 0 14px; font-family: var(--font-type); font-weight: 400; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--eggplant);
}
.choices ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.choice {
  width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 14px 16px; background: #fffdf6; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: 4px 4px 0 var(--eggplant);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  font-size: 1rem; line-height: 1.45;
}
.choice:hover, .choice:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--eggplant-2); background: #fff; }
.choice:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--eggplant); }
.choice .letter {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--eggplant); color: #fff;
  font-family: var(--font-type); font-size: .95rem;
}
.choice .label { padding-top: 3px; }
.choice small { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: 4px; }
.choice.locked { background: transparent; border-style: dashed; border-color: var(--ink-faint); box-shadow: none; color: var(--ink-faint); cursor: not-allowed; }
.choice.locked .letter { background: none; }
.choice.locked:hover { transform: none; }
.kbd-hint { margin: 14px 0 0; font-size: .78rem; color: var(--ink-faint); }
kbd { font-family: var(--font-body); border: 1px solid var(--ink-faint); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; background: #fff; }

/* ───────────── Endings ───────────── */
.ending-panel { margin-top: 34px; border-top: 2px dashed var(--ink-faint); padding-top: 26px; position: relative; overflow-x: clip; }
.stamp-big {
  display: inline-block; font-family: var(--font-type); text-transform: uppercase; letter-spacing: .15em;
  font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--stamp); border: 5px double var(--stamp);
  padding: 4px 18px; transform: rotate(-6deg); opacity: .85; margin: 0 0 18px;
  animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both .15s;
}
.grade-best .stamp-big, .grade-good .stamp-big { color: var(--leaf); border-color: var(--leaf); }
.rank { font-family: var(--font-type); font-size: 1.25rem; margin: 0 0 16px; }
.rank span { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.ledger { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 8px 24px; }
.ledger div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--ink-faint); padding: 4px 0; }
.ledger dt { color: var(--ink-soft); }
.ledger dd { margin: 0; font-weight: 700; }
.ledger .owed dd { color: var(--leaf); }
.fine-print { font-size: .8rem; color: var(--ink-faint); margin: 8px 0 18px; font-style: italic; }
.badges { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.badges li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; background: #fffdf6; border: 1px solid var(--paper-edge); border-radius: 6px; padding: 8px 10px; }
.badges li span { font-size: 1.6rem; grid-row: span 2; }
.badges small { color: var(--ink-faint); font-size: .75rem; line-height: 1.3; }
.tip { background: rgba(91, 42, 134, .08); padding: 10px 14px; border-radius: 4px; font-size: .92rem; }
.endings-found h3 { font-family: var(--font-type); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; margin: 22px 0 8px; }
.endings-found ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.endings-found li { padding: 8px 10px; border: 1px dashed var(--ink-faint); border-radius: 4px; font-size: .88rem; color: var(--ink-faint); }
.endings-found li.got { border-style: solid; color: var(--ink); background: #fffdf6; }
.endings-found li.current { border-color: var(--eggplant); box-shadow: 0 0 0 2px rgba(91, 42, 134, .25); }
.end-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.btn {
  padding: 11px 18px; border-radius: 4px; border: 2px solid var(--ink); background: #fffdf6; color: var(--ink);
  font-family: var(--font-type); letter-spacing: .04em; font-size: 1rem;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover, .btn:focus-visible { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn.primary { background: var(--eggplant); color: #fff; border-color: #2d1245; box-shadow: 3px 3px 0 #2d1245; }

/* ───────────── Cover ───────────── */
.cover { padding-top: 24px; }
.cover-folder { text-align: center; padding-top: 56px; }
.cover-emoji { --egg-slot: clamp(124px, 34vw, 200px); font-size: clamp(4.5rem, 18vw, 7.5rem); line-height: 1; margin-bottom: 6px; animation: wobble 4s ease-in-out infinite; position: relative;
  display: inline-grid; place-items: center; width: var(--egg-slot); height: var(--egg-slot); }
/* The 3D eggplant (js/eggplant3d.js) draws into the cover's slot; the emoji shows until it's ready, or for good without WebGL. */
.cover-emoji.is-3d { animation: none; }
.egg-glyph { animation: wobble 4s ease-in-out infinite; transition: opacity .5s ease; }
.egg3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; touch-action: pan-y pinch-zoom; cursor: grab; }
.egg3d:active { cursor: grabbing; }
.cover-emoji.is-ready .egg3d { opacity: 1; }
.cover-emoji.is-ready .egg-glyph { opacity: 0; }
/* The eggplant system (js/eggplant-play.js): the play stage around the cover slot, the hit buttons, the DOM and
   sprite views, and the parked canvas. */
.cover-emoji.is-play { z-index: 2; }                 /* carried fruit draws over the title */
.cover-emoji.is-play .egg3d { inset: -45%; width: 190%; height: 190%; pointer-events: none; touch-action: auto; cursor: default; }
.cover-emoji.is-lite .egg3d { inset: -15%; width: 130%; height: 130%; }
.egg-hit { position: absolute; inset: 0; background: none; border: 0; padding: 0; border-radius: 50%; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; z-index: 3; }
.egg-hit:active { cursor: grabbing; }
.egg-hit:focus-visible { outline: 3px solid var(--eggplant-2); outline-offset: 4px; }
.egg-dom { position: absolute; pointer-events: none; will-change: auto; }
.egg-dom::after, .egg-glyph::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(48,34,26,.6), rgba(48,34,26,0)); transform: scale(calc(1 + .3 * var(--lift, 0))); opacity: calc(.9 - .55 * var(--lift, 0)); }
.egg-glyph { position: relative; display: inline-block; } /* an in-flow grid item (it keeps the slot's baseline) that carries the same contact shadow */
/* The still of the same model (tools/eggplant-stills.html) rides the glyph, slot-sized and centred on it, framed like
   the live canvas. Once it has loaded it replaces the emoji, which stays in flow (hidden) for the slot's baseline. */
.egg-still { display: none; position: absolute; left: 50%; top: 50%; width: var(--egg-slot); height: var(--egg-slot);
  margin: calc(var(--egg-slot) / -2) 0 0 calc(var(--egg-slot) / -2); pointer-events: none; }
.egg-still img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; }
.cover-emoji.has-still .egg-glyph { visibility: hidden; animation: none; } /* the still fades into the live fruit level, in the same pose */
.cover-emoji.has-still .egg-still { display: block; visibility: visible; }
.egg-still::after { content: ""; position: absolute; left: 12%; right: 8%; top: 81%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(48,34,26,.42), rgba(48,34,26,0)); transform: scale(calc(1 + .3 * var(--lift, 0))); opacity: calc(.9 - .55 * var(--lift, 0)); z-index: -1; }
.egg-sprite { position: absolute; pointer-events: none; }
.is-thud { animation: none; }                        /* jolts are WAAPI transforms */
.egg-park { display: none; }
/* M1: the Invoice stage on Chapter 6 (the fruit served after the SACRIFICE transcript), the chalk outline, the nod */
.egg-stage { position: relative; height: clamp(150px, 42vw, 200px); margin: 14px 0 18px; overflow: hidden; touch-action: pan-y; }
.egg-stage--desk {
  /* the desk: a pencil-dashed edge at the rest height and a faint shade below it, so the fruit sits on something */
  background:
    repeating-linear-gradient(90deg, var(--ink-faint) 0 5px, transparent 5px 9px) 0 88% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 88%, rgba(0,0,0,.09));
}
.egg-stage .egg3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 1; transition: none; touch-action: auto; cursor: default; }
.egg-stage.is-lost .egg3d { visibility: hidden; } /* a lost WebGL context: the PNG shows on the same body until it is back */
.egg-stage .egg-dom, .egg-stage .egg-twin { position: absolute; left: 50%; top: 0; pointer-events: none; }
.egg-shadow { position: absolute; left: 50%; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(48,34,26,.6), rgba(48,34,26,0)); }
.egg-grip { position: absolute; left: 0; top: 0; width: 40%; height: 70%; border: 0; padding: 0; background: none; border-radius: 50%; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.egg-grip:active { cursor: grabbing; }
.egg-grip:focus-visible { outline: 3px solid var(--eggplant-2); outline-offset: 2px; }
.egg-string { position: absolute; top: 0; left: 50%; width: 0; height: 0; border-left: 1px dashed var(--ink-soft); pointer-events: none; visibility: hidden; }
.egg-string.is-visible { visibility: visible; }
.egg-chalk { display: block; height: 56px; margin: 4px 0 0 auto; width: 96px; overflow: visible; }
.egg-chalk path { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 4 3; }
.egg-nod { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; transform-origin: 50% 90%; }
/* M3: the paperweight on the casefile's coffee ring (the match cut from the cover): the live canvas or a sheet sprite
   in a slot that is the article's first child, measured at mount so it never touches the chapter line */
.egg-weight { position: absolute; top: 60px; right: 24px; width: 84px; height: 84px; z-index: 1; }
.egg-weight .egg3d, .egg-weight .egg-sprite { position: absolute; inset: -30%; width: 160%; height: 160%; pointer-events: none; }
.egg-weight .egg3d { opacity: 1; transition: none; touch-action: auto; cursor: default; }
.egg-weight.is-lost .egg3d { visibility: hidden; } /* a lost WebGL context: the sprite shows on the same body until it is back */
.egg-weight .egg-hit { inset: 0; }
.egg-weight.is-small { width: 48px; height: 48px; }
/* the paperweight lies on the stamp (it pins the ink, not the other way round); the stamp stays decorative and lets pointers through */
@media (max-width: 720px) { .egg-weight { top: 6px; right: 8px; width: 56px; height: 56px; } .egg-weight.is-small { width: 48px; height: 48px; } }
/* M4: the verdict's eggplant under the Case Closed stamp (a sprite and its hit at the ending panel's top right; nothing
   in the flow). M5: the harvest's railing canvas across the panel, hung on its dashed top border, and a hit per fruit. */
.egg-verdict { position: absolute; top: 8px; right: 16px; width: 72px; height: 72px; }
.egg-verdict-hit { inset: 8px 16px auto auto; width: 72px; height: 72px; }
.egg-verdict-shadow { left: auto; }
@media (max-width: 720px) { .egg-verdict, .egg-verdict-hit { width: 60px; height: 60px; } }
.egg-harvest { position: absolute; left: 0; right: 0; top: -42px; height: 84px; pointer-events: none; }
.egg-pluck { inset: -42px auto auto 50%; width: 64px; height: 84px; margin-left: -32px; }
/* The witness (M6): the brand's live sprite over its PNG (the same box, measured on mount), lit for the dark header. */
.brand { position: relative; }
.brand-egg-live { position: absolute; width: 1.7em; height: 1.7em; left: 0; top: 50%; margin-top: -0.85em; transform-origin: 50% 85%; pointer-events: none; filter: brightness(2) drop-shadow(0 0 3px rgba(182, 129, 239, .45)); }
.brand-egg.is-hidden { opacity: 0; }
/* Reopen the case (M8): the button's glyph as a sprite, the span the glyph's own width. */
.egg-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .25em; }
.egg-ico canvas { width: 100%; height: 100%; display: block; transform-origin: 50% 100%; filter: brightness(1.7); }
.cover h1 { font-size: clamp(2.3rem, 8vw, 4.2rem); text-transform: uppercase; letter-spacing: .04em; }
.tagline { font-size: 1.15rem; color: var(--eggplant); margin: 10px 0 4px; font-weight: 700; }
.subtitle { color: var(--ink-soft); max-width: 52ch; margin: 8px auto 24px; }
.cover-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.how { list-style: none; padding: 0; margin: 0 auto; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; font-size: .9rem; }
.how li { display: flex; }
.how-card {
  position: relative; flex: 1; display: block; padding: 8px 28px 8px 10px; color: inherit; text-decoration: none;
  background: rgba(255, 255, 255, .5); border: 1px solid var(--paper-edge); border-radius: 4px;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.how-card:hover, .how-card:focus-visible { background: #fffdf6; border-color: var(--eggplant-2); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--eggplant-2); }
.how-card:focus-visible { outline: 2px solid var(--eggplant-2); outline-offset: 2px; }
.how b { display: block; color: var(--eggplant); }
.how-go { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--eggplant-2); font-weight: 700; transition: transform .12s; }
.how-card:hover .how-go, .how-card:focus-visible .how-go { transform: translate(3px, -50%); }
.found { margin: 18px 0 0; font-family: var(--font-type); color: var(--leaf); }
.content-note { margin: 22px auto 0; font-size: .8rem; color: var(--ink-faint); max-width: 50ch; }

/* ───────────── Dialogs ───────────── */
dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(10, 6, 14, .72); backdrop-filter: blur(3px); }
.dlg-head {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; background: var(--paper-2); border-bottom: 1px solid var(--paper-edge);
}
.dlg-head h2 { margin: 0; font-family: var(--font-type); font-weight: 400; font-size: 1.3rem; }
.dlg-close { background: none; border: 0; font-size: 1.2rem; padding: 4px 8px; }
#dlg-confirm { width: min(580px, calc(100vw - 32px)); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.dlg-body { padding: 16px 20px 24px; }
.dlg-sub { margin: 0 0 16px; color: var(--ink-soft); font-size: .92rem; }
.exhibits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.exhibits li { position: relative; background: #fffdf6; border: 1px solid var(--paper-edge); border-radius: 4px; padding: 12px; box-shadow: 0 3px 8px rgba(0, 0, 0, .08); }
.exhibits li.missing { background: transparent; border-style: dashed; color: var(--ink-faint); box-shadow: none; }
.ex-code { position: absolute; top: 8px; right: 10px; font-family: var(--font-type); font-size: .7rem; color: var(--stamp); letter-spacing: .08em; text-transform: uppercase; }
.ex-icon { font-size: 1.8rem; display: block; margin-bottom: 4px; }
.exhibits b { display: block; font-size: .95rem; line-height: 1.3; margin-bottom: 4px; }
.exhibits p { margin: 0; font-size: .82rem; line-height: 1.4; }
.bingo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 520px; margin: 0 auto; }
.sq {
  position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 8px; border: 2px solid var(--ink); background: #fffdf6; font-size: clamp(.7rem, 2.4vw, .9rem); line-height: 1.25;
}
.sq-icon { font-size: clamp(1.4rem, 5vw, 2rem); }
.sq.on { background: #efe3fb; }
.sq > span:not(.dab) { position: relative; z-index: 1; }
.dab {
  position: absolute; inset: 14%; border-radius: 50%; z-index: 0;
  background: rgba(124, 63, 179, .22); box-shadow: 0 0 0 3px rgba(124, 63, 179, .35);
  animation: dab .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
.check {
  position: absolute !important; top: 6px; right: 8px;
  color: var(--eggplant); font-weight: 700; font-size: 1.1rem;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────────── Toasts & footer ───────────── */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  background: #fffdf6; color: var(--ink); border-left: 5px solid var(--eggplant);
  padding: 10px 14px; border-radius: 4px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: .9rem; max-width: min(360px, calc(100vw - 32px)); animation: toast-in .3s ease-out both;
}
.toast.big { border-left-color: var(--stamp); font-family: var(--font-type); font-size: 1.05rem; }
.toast.out { opacity: 0; transform: translateY(8px); transition: all .5s ease; }

.site-foot { max-width: 860px; margin: 0 auto; padding: 8px 16px 40px; color: var(--on-desk-soft); font-size: .8rem; text-align: center; }
.site-foot p { margin: 6px 0; }
.noscript { color: var(--on-desk); text-align: center; }

/* ───────────── Motion ───────────── */
@keyframes slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-12px) rotate(-3deg); } to { opacity: 1; transform: rotate(-.6deg); } }
@keyframes stamp { from { opacity: 0; transform: scale(2.2) rotate(-6deg); } to { opacity: .85; transform: scale(1) rotate(-6deg); } }
@keyframes dab { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { to { visibility: hidden; } }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes reveal { from { background-size: 0 100%; opacity: .2; } to { opacity: 1; } }
/* A toast lands instead of fading in (M7): up from below, a 3 px overshoot at 70 %, a one-frame squash on impact
   (origin at the bottom), done in 320 ms; .big drops from 24 px, overshoots 4 px and lands with a scale(.9), 380 ms. */
@keyframes toast-in {
  0% { opacity: 0; transform: translateY(var(--toast-drop, 18px)); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  70% { opacity: 1; transform: translateY(var(--toast-over, -3px)); animation-timing-function: ease-in; }
  82% { transform: translateY(0) var(--toast-impact, scaleY(.94)); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: none; }
}
.toast { transform-origin: bottom; animation-duration: .32s; animation-timing-function: linear; }
.toast.big { --toast-drop: 24px; --toast-over: -4px; --toast-impact: scale(.9); animation-duration: .38s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───────────── Small screens ───────────── */
@media (max-width: 720px) {
  body { font-size: 1rem; }
  #hud { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .brand span { display: none; }
  .stats { gap: 12px; order: 3; width: 100%; justify-content: space-between; }
  .stat small { display: none; }
  .tools { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .tools button { padding: 5px 8px; }
  .media-row { grid-template-columns: 1fr; }
  .scene-head { padding-right: 0; margin-top: 26px; }
  .stamp { top: 12px; font-size: .7rem; }
  .how { grid-template-columns: 1fr; }
  main { padding-top: 24px; }
}

/* ───────────── Field Manual, Their Dossier, 4×4 bingo, build stamp ───────────── */
.gains .dossier { background: #fde8e8; border-color: #e8a9a9; }
.gains .script { background: #e6f4e6; border-color: #9fcf9f; }
.choices.single ol { max-width: 560px; }
.bingo-grid.cols-4 { max-width: 640px; }
.bingo-grid.cols-4 .sq { padding: 8px 6px; font-size: .74rem; line-height: 1.2; }
.sq { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) { .bingo-grid.cols-4 { gap: 4px; } .bingo-grid.cols-4 .sq { padding: 6px 2px; font-size: .62rem; letter-spacing: -.02em; } }
.bingo-grid.cols-4 .sq-icon { font-size: clamp(1.1rem, 4vw, 1.5rem); }
.scripts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.scripts li { background: #fffdf6; border: 1px solid var(--paper-edge); border-left: 4px solid var(--leaf); border-radius: 4px; padding: 12px 14px; }
.scripts li.missing { border-left-color: var(--ink-faint); border-style: dashed; border-left-style: solid; color: var(--ink-faint); background: transparent; }
.scripts .sc-name { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.scripts .sc-line { margin: 0; font-family: var(--font-type); font-size: 1.02rem; line-height: 1.45; }
.scripts li.missing .sc-line { font-family: inherit; font-size: .88rem; }
.scripts .sc-when { margin: 6px 0 0; font-size: .78rem; color: var(--ink-soft); }
.site-foot .build { font-family: var(--font-mono); font-size: .8rem; opacity: .7; }

/* ───────────── External evidence (outbound links) ───────────── */
.links { margin: 0 0 30px; padding: 14px 18px; border: 1px dashed var(--eggplant-2); border-radius: 10px; background: rgba(124, 63, 179, .06); }
.links h2 { margin: 0 0 10px; font-family: var(--font-type); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--eggplant-2); }
.links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.links a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink); text-decoration: none; }
.links a b { text-decoration: underline; text-decoration-color: var(--eggplant-2); text-underline-offset: 3px; }
.links a:hover b, .links a:focus-visible b { color: var(--eggplant-2); }
.links a small { color: var(--ink-soft); font-family: var(--font-type); font-size: .75rem; }
.links a::after { content: "↗"; color: var(--eggplant-2); font-size: .85rem; }
.links a.internal::after { content: "→"; }
.links li p { margin: 4px 0 0; font-size: .9rem; color: var(--ink-soft); }
/* Links written inside the story text: [text](https://…) or a pasted address. */
a.inline-link { color: var(--eggplant-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
a.inline-link:hover, a.inline-link:focus-visible { color: var(--ink); }
a.inline-link:not(.internal)::after { content: "↗"; margin-left: 2px; font-size: .8em; text-decoration: none; display: inline-block; }

/* ───────────── “Unbroken”: Now Playing cards, clips, lyric sheet ───────────── */
.analyst.tagged { border-color: rgba(91, 42, 134, .55); background: rgba(91, 42, 134, .05); }
.analyst.tagged .tag { color: var(--eggplant); }

.track-card {
  margin: 1.8em 0 1.4em; padding: 16px 18px 18px; border-radius: 10px; position: relative; overflow: hidden;
  color: #f4ecff; background: radial-gradient(120% 140% at 0% 0%, #4a1f6e 0%, #241033 55%, #140a1d 100%);
  box-shadow: 0 0 0 1px rgba(182, 129, 239, .35), 0 12px 26px rgba(20, 8, 30, .35);
}
.track-card::after { /* a faint groove pattern, like a record under the lyric */
  content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .06) 0 1px, transparent 1px 6px);
}
.tc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; font-family: var(--font-type); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.tc-now { color: var(--highlight); }
.tc-now::before { content: "● "; color: #ff4d6d; }
.tc-name { color: #cdb8e8; }
.tc-lyric { margin: 0 0 12px; position: relative; z-index: 1; }
.tc-lyric p { margin: 0; font-family: var(--font-body); font-weight: 700; font-style: italic; font-size: clamp(1.25rem, 4.2vw, 1.7rem); line-height: 1.3; color: #fff; text-wrap: balance; }
.tc-his { display: inline-block; font-family: var(--font-type); font-style: normal; font-weight: 400; font-size: .82rem; color: var(--highlight); transform: rotate(-2deg); }
.tc-lyric cite { display: block; margin-top: 6px; font-style: normal; font-size: .78rem; color: #b9a6d3; }
.tc-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .8rem; color: #cdb8e8; margin-bottom: 12px; }
.tc-where b { color: #fff; }
.tc-strip { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; flex: 1 1 180px; max-width: 320px; }
.tc-strip li { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.tc-strip li.done { background: var(--eggplant-glow); }
.tc-strip li.now { background: var(--highlight); box-shadow: 0 0 8px rgba(255, 232, 107, .8); }
.tc-play, .tc-row {
  position: relative; overflow: hidden; font: inherit; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(182, 129, 239, .7); border-radius: 999px;
}
.tc-play { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: .9rem; max-width: 100%; text-align: left; }
.tc-play small, .tc-row small { color: #b9a6d3; font-size: .75rem; }
.tc-play:hover, .tc-row:hover, .tc-play.playing, .tc-row.playing { background: rgba(182, 129, 239, .28); }
.tc-play:focus-visible, .tc-row:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.tc-play:disabled, .tc-row:disabled { cursor: default; opacity: .6; }
.tc-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--highlight); transition: width .25s linear; }
.track-card.is-hidden { background: #120a19; box-shadow: 0 0 0 1px rgba(182, 129, 239, .25); }
.track-card.is-hidden .tc-now::before { content: "◌ "; color: #b9a6d3; }
/* The song page's "Press play" card: the whole recording up top, the lyric sheet under it */
.track-card.is-full { box-shadow: 0 0 0 2px var(--highlight), 0 10px 30px rgba(0, 0, 0, .35); }
.track-card.is-full .tc-now::before { content: "▶ "; color: var(--highlight); }
.track-card.is-full .tc-head { font-size: .86rem; }
.tc-full-note { position: relative; margin: 0 0 12px; font-family: var(--font-type); font-size: 1.05rem; line-height: 1.4; color: #f1e8ff; }
.track-card.is-full .tc-play { font-size: 1rem; padding: 10px 18px; margin-bottom: 14px; }
.tc-sheet { margin: 4px 0 14px; padding-top: 12px; border-top: 1px dashed rgba(182, 129, 239, .45); }
.tc-sheet-title { margin: 0 0 8px; font-family: var(--font-type); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--highlight); }
.tc-sheet ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc-sheet li { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.tc-row { grid-row: span 2; align-self: center; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.tc-row .tc-label, .tc-row small { display: none; }
.tc-sec { grid-column: 2; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #b9a6d3; }
.tc-line { grid-column: 2; font-weight: 700; font-style: italic; color: #fff; }
.tc-sheet .tc-his { font-size: .72rem; }
.tc-when { grid-column: 3; grid-row: 1 / span 2; font-size: .78rem; color: var(--highlight); text-align: right; max-width: 170px; }
@media (max-width: 560px) {
  .tc-sheet li { grid-template-columns: 34px 1fr; }
  .tc-when { grid-column: 2; grid-row: auto; text-align: left; max-width: none; }
  .tc-row { grid-row: span 3; }
}

/* ───────────── Museum Of Said Things (voicemail tab: his shelf and Stacey's) ───────────── */
.tools button.has-new { position: relative; border-color: var(--eggplant-glow); }
.tools button.has-new::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: #ff4d3d; box-shadow: 0 0 0 2px var(--desk); animation: pulse 1.6s ease-in-out infinite;
}
.vm-shelf { font-family: var(--font-type); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: 1rem; margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px dashed currentColor; }
.vm-shelf:first-of-type { margin-top: 8px; }
.tape-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 18px; align-items: start; }
.tape { display: flex; flex-direction: column; }
.ph-audio.pending .ph-label { color: var(--highlight); display: inline-flex; align-items: center; gap: 8px; }
.ph-audio.pending .vm-spin { border-color: rgba(255, 232, 107, .25); border-top-color: var(--highlight); }
.transcript-card { background: #fffdf6; border: 1px solid var(--paper-edge); border-top: 0; border-left: 4px solid var(--eggplant-2); border-radius: 0 0 6px 6px; padding: 10px 12px 12px; }
.tape.pinned .transcript-card { border-left-color: var(--stamp); background: #fff7ec; }
.tape.checked .transcript-card { border-left-color: var(--leaf); }
.tape.locked .transcript-card { background: transparent; border-style: dashed; border-top-style: none; border-left-style: solid; border-left-color: var(--ink-faint); color: var(--ink-faint); }
.tape.locked .tape-label { opacity: .75; }
.tape.just-checked .transcript-card { animation: vm-flash 1.2s ease-out; }
.tr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 6px; font-family: var(--font-type); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tr-title .vm-new { margin-left: auto; }
.transcript-card .vm-head { margin: 0 0 4px; }
.vm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vm-how { font-size: 1.1rem; }
.vm-who { font-size: .98rem; }
.vm-meta { font-size: .78rem; color: var(--ink-soft); }
.vm-tag, .vm-pin, .vm-new {
  font-family: var(--font-type); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 1px 8px; border: 1px solid currentColor;
}
.vm-tag { color: var(--eggplant-2); }
.vm-tag.self { color: var(--stamp); }
.vm-pin { color: var(--stamp); border-color: transparent; padding: 1px 0; }
.vm-new { margin-left: auto; color: #fff; background: #d6342a; border-color: #d6342a; }
.vm-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(179, 38, 30, .25); border-top-color: var(--stamp); animation: vm-spin 1.1s linear infinite; }
.vm-text { margin: 4px 0 0; font-family: var(--font-type); font-size: 1.02rem; line-height: 1.5; }
.vm-word {
  font: inherit; color: inherit; background: var(--highlight); border: 0; border-bottom: 2px dashed var(--stamp);
  padding: 0 2px; border-radius: 2px; cursor: pointer;
}
.vm-word:hover, .vm-word:focus-visible { background: #ffd84a; }
.vm-struck { text-decoration: line-through; text-decoration-color: var(--stamp); text-decoration-thickness: 2px; color: var(--ink-faint); }
.vm-hint { margin: 6px 0 0; font-size: .76rem; color: var(--ink-faint); }
.vm-check { margin: 8px 0 0; padding: 8px 10px; background: rgba(63, 122, 58, .08); border-radius: 4px; font-size: .88rem; line-height: 1.45; }
.vm-stamp {
  display: inline-block; margin-right: 6px; padding: 0 6px; transform: rotate(-3deg);
  font-family: var(--font-type); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--leaf); border: 2px solid var(--leaf); border-radius: 3px;
}
.vm-more { margin: 14px 0 0; text-align: center; font-family: var(--font-type); color: var(--ink-soft); }
@keyframes vm-spin { to { transform: rotate(360deg); } }
@keyframes vm-flash { from { background: #e3f4dc; } to { background: #fffdf6; } }
@media (prefers-reduced-motion: reduce) {
  .vm-spin, .tape.just-checked .transcript-card, .tools button.has-new::after { animation: none; }
}

/* ───────────── The tapes as objects: 3D cassettes ───────────── */
/* Lean toward the pointer, drag to spin, tap to turn over (js: "tapes in 3D"). The obj is 100 × 64 units; faces size
   their parts in cqw (100cqw = the cassette's width). The window is a real hole: the reels sit inside, at mid-depth. */
:root {
  --t3-hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V64H0ZM31 21.8H69A7.5 7.5 0 0 1 69 36.8H31A7.5 7.5 0 0 1 31 21.8Z'/%3E%3C/svg%3E");
}
.t3-hint { margin: -8px 0 14px; font-family: var(--font-type); font-size: .78rem; color: var(--ink-faint); }
.t3 {
  --d: 22px; --a: 16; --b: -164; --x: -8; --sx: -2px; --sw: .96; --l: 0;
  --s1: #34293f; --s2: #1c1523; --edge: #241b2c; --edge-hi: #3b2f47; --head: #2a2132; --grain: .025;
  --pack: #4d3222; --pack-2: #3a2418; --hub: #efe7f8; --hub-2: #7d6f8c; --glow: #b681ef; --tint: rgba(25, 12, 35, .45); --film: rgba(14, 9, 18, .62);
  position: relative; padding: 12px 7% 26px; perspective: 1000px; container-type: inline-size;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: grab; outline: none;
}
.t3.held { cursor: grabbing; }
/* shells */
.t3[data-shell="smoke"] { --s1: rgba(58, 50, 66, .9); --s2: rgba(22, 18, 27, .93); --edge: rgba(26, 22, 31, .96); --edge-hi: #48405a; --head: rgba(36, 30, 42, .95); --glow: #a3a9c9; }
.t3[data-shell="clear"] { --film: rgba(255, 255, 255, .1);
  --s1: rgba(236, 242, 250, .2); --s2: rgba(196, 208, 224, .14); --edge: rgba(180, 192, 210, .5); --edge-hi: rgba(240, 246, 255, .7);
  --head: rgba(220, 228, 240, .28); --grain: .07; --glow: #cfe8ff; --tint: rgba(60, 70, 95, .28);
}
.t3[data-shell="eggplant"] { --s1: rgba(128, 64, 182, .9); --s2: rgba(66, 28, 100, .94); --edge: #3b1d57; --edge-hi: #7a45ad; --head: rgba(60, 26, 92, .95); --glow: #c38bff; }
.t3[data-shell="white"] { --s1: #f7f6f9; --s2: #d4d0da; --edge: #b5b0bd; --edge-hi: #f4f2f7; --head: #e2dfe7; --hub: #ffffff; --hub-2: #9b93a6; --glow: #ffffff; --tint: rgba(40, 30, 50, .32); }
.t3[data-shell="red"] { --s1: rgba(214, 44, 52, .86); --s2: rgba(124, 12, 22, .92); --edge: #6d0f17; --edge-hi: #c22f3a; --head: rgba(118, 14, 22, .93); --glow: #ff5a5f; --tint: rgba(110, 10, 20, .32); }
.t3[data-shell="ice"] { --film: rgba(255, 255, 255, .1);
  --s1: rgba(160, 208, 250, .5); --s2: rgba(76, 136, 208, .46); --edge: rgba(64, 116, 178, .72); --edge-hi: rgba(180, 222, 255, .85);
  --head: rgba(88, 148, 214, .52); --grain: .05; --glow: #8fd3ff; --tint: rgba(30, 80, 140, .3);
}
.t3[data-shell="cream"] { --s1: #f0e5cd; --s2: #c9b993; --edge: #a8977a; --edge-hi: #ebdfc5; --head: #dacbaa; --hub: #3a2f25; --hub-2: #8d7c64; --glow: #ffe2a8; --tint: rgba(60, 45, 20, .34); }
.t3[data-shell="black"] { --s1: #2c2a30; --s2: #111013; --edge: #0d0c0f; --edge-hi: #312e36; --head: #1c1a1f; --hub: #e9e9ec; --pack: #2e1f16; --pack-2: #1f140e; --glow: #ffd27a; }
.t3[data-shell="neon"] { --film: rgba(255, 255, 255, .1);
  --s1: rgba(176, 255, 112, .52); --s2: rgba(86, 196, 58, .5); --edge: rgba(74, 160, 46, .78); --edge-hi: rgba(206, 255, 168, .9);
  --head: rgba(104, 204, 66, .55); --grain: .05; --glow: #a6ff6b; --tint: rgba(40, 110, 20, .3);
}
.t3[data-shell="metal"] { --s1: #dde0e6; --s2: #8d94a0; --edge: #666c76; --edge-hi: #eceff3; --head: #b5bac3; --hub: #2b2b30; --hub-2: #8a8f99; --pack: #241912; --pack-2: #170f0a; --glow: #dfe7ff; --tint: rgba(30, 34, 44, .4); }
.t3-glow {
  position: absolute; left: 10%; right: 10%; top: 14%; bottom: 24%; border-radius: 40%; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(16px);
  opacity: calc(var(--l) * .3 + var(--lvl, 0) * .9); transform: scale(calc(1 + var(--lvl, 0) * .2));
}
.t3-obj { position: relative; z-index: 1; aspect-ratio: 100 / 64; transform-style: preserve-3d; transform: rotateX(-8deg) rotateY(16deg); }
.t3-face, .t3-edge, .t3-glass, .t3-seal { position: absolute; display: block; }
.t3-face {
  inset: 0; overflow: hidden; container-type: inline-size; border-radius: 3.4% / 5.3%; color: var(--ink);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  -webkit-mask: var(--t3-hole) center / 100% 100% no-repeat; mask: var(--t3-hole) center / 100% 100% no-repeat;
  background:
    radial-gradient(120% 90% at 25% 0%, rgba(255, 255, 255, .12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, var(--grain)) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--s1), var(--s2));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .3);
}
.t3[data-shell="metal"] .t3-face { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, rgba(0, 0, 0, .06) 1px 3px), linear-gradient(180deg, var(--s1), var(--s2)); }
.t3-front { --dev: var(--a); --gx: var(--gxA, -300); --gy: var(--gyA, -300); --gs: var(--gsA, 0); --sh: var(--shA, 0); --dim: var(--dimA, .1); transform: translateZ(calc(var(--d) / 2)); }
.t3-back { --dev: var(--b); --gx: var(--gxB, -300); --gy: var(--gyB, -300); --gs: var(--gsB, 0); --sh: var(--shB, 0); --dim: var(--dimB, .3); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.t3:focus-visible .t3-face { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 0 0 3px var(--eggplant-glow); }
/* the shell's thickness, lit by how much each side faces the lamp */
.t3-edge::after { content: ""; position: absolute; inset: 0; background: #fff; pointer-events: none; }
.t3-l, .t3-r { top: 5%; bottom: 5%; width: var(--d); background: linear-gradient(90deg, var(--edge), var(--edge-hi) 50%, var(--edge)); }
.t3-l { left: calc(var(--d) / -2); transform: rotateY(-90deg); }
.t3-r { right: calc(var(--d) / -2); transform: rotateY(90deg); }
.t3-t, .t3-b { left: 3.4%; right: 3.4%; height: var(--d); background: linear-gradient(180deg, var(--edge), var(--edge-hi) 50%, var(--edge)); }
.t3-t { top: calc(var(--d) / -2); transform: rotateX(90deg); }
.t3-b { bottom: calc(var(--d) / -2); transform: rotateX(-90deg); }
.t3-l::after { opacity: var(--rl, 0); }
.t3-r::after { opacity: var(--rr, 0); }
.t3-t::after { opacity: var(--rt, 0); }
.t3-b::after { opacity: var(--rb, 0); }
.t3-shadow {
  position: absolute; left: 12%; right: 12%; bottom: 4px; height: 24px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--tint), transparent);
  transform: translateX(var(--sx)) scaleX(var(--sw)) scale(calc(1 + var(--l) * .15)); opacity: calc(1 - var(--l) * .4);
}
/* inside the shell, at mid-depth: the two tape packs on their hubs and the tape running past the head */
.t3-inner { position: absolute; inset: 0; pointer-events: none; }
.t3-inner svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t3-film { position: absolute; left: 22%; width: 56%; top: 32%; height: 27.5%; border-radius: 999px; background: var(--film); } /* the smoked strip behind the window */
.t3-inner path { fill: none; stroke: var(--pack); stroke-width: .7; }
.t3-inner circle { fill: #e9e5ee; }
.t3-pack {
  position: absolute; top: 45.8%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), transparent 55%), repeating-radial-gradient(circle, var(--pack) 0 1px, var(--pack-2) 1px 2px);
}
.t3-pack.l { left: 31%; width: calc(11% + (1 - var(--p, 0)) * 24%); }
.t3-pack.r { left: 69%; width: calc(11% + var(--p, 0) * 24%); }
.t3-hub {
  position: absolute; top: 45.8%; width: 10%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle, rgba(10, 6, 14, .9) 0 27%, transparent 28%), repeating-conic-gradient(var(--hub) 0 24deg, var(--hub-2) 24deg 60deg);
  box-shadow: inset 0 0 0 2px var(--hub), 0 0 0 1px rgba(0, 0, 0, .35);
}
.t3-hub.l { left: 31%; }
.t3-hub.r { left: 69%; }
.deck3d.playing .t3-hub { animation: t3-spin 1.8s linear infinite; }
.deck3d.whirr-ff .t3-hub { animation: t3-spin .3s linear infinite; }
.deck3d.whirr-rew .t3-hub { animation: t3-spin .3s linear infinite reverse; }
@keyframes t3-spin { to { rotate: 360deg; } }
/* the window's glass, just inside each face, with the minute scale printed along the bottom */
.t3-glass {
  left: 23.5%; width: 53%; top: 34.06%; height: 23.44%; border-radius: 999px; pointer-events: none;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    radial-gradient(circle at calc((var(--gx) - 23.5) * 1.887%) calc((var(--gy) - 34) * 4.27%), rgba(255, 255, 255, calc(var(--gs) * .85)), transparent 42%),
    linear-gradient(172deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 45%, rgba(0, 0, 0, .12) 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 1px, transparent 1px 9%) 14% 100% / 72% 16% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.t3-glass-a { --gx: var(--gxA, -300); --gy: var(--gyA, -300); --gs: var(--gsA, 0); transform: translateZ(calc(var(--d) / 2 - 3px)); }
.t3-glass-b { --gx: var(--gxB, -300); --gy: var(--gyB, -300); --gs: var(--gsB, 0); transform: rotateY(180deg) translateZ(calc(var(--d) / 2 - 3px)); }
/* screws, the head opening, the window's molded rim */
.t3-screw {
  position: absolute; width: 2.8cqw; height: 2.8cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d4cedb, #625b6b 60%, #2a2530); box-shadow: 0 0 0 .4cqw rgba(0, 0, 0, .3);
}
.t3-screw::after { content: ""; position: absolute; left: 18%; right: 18%; top: 44%; height: 12%; background: #241e29; transform: rotate(35deg); }
.t3-screw.s1 { left: 1.7cqw; top: 1.7cqw; }
.t3-screw.s2 { right: 1.7cqw; top: 1.7cqw; }
.t3-screw.s3 { left: 1.7cqw; bottom: 1.7cqw; }
.t3-screw.s4 { right: 1.7cqw; bottom: 1.7cqw; }
.t3-screw.s5 { left: 50%; top: 2.4cqw; margin-left: -1.4cqw; }
.t3-head { position: absolute; left: 21cqw; right: 21cqw; bottom: 0; height: 12.5cqw; clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--head), rgba(0, 0, 0, .25)), var(--head); }
.t3-hole { position: absolute; bottom: 2.2cqw; width: 4cqw; height: 4cqw; border-radius: .7cqw; background: rgba(10, 7, 13, .8); box-shadow: inset 0 .4cqw .6cqw rgba(0, 0, 0, .9); }
.t3-hole:nth-child(2) { left: 20%; }
.t3-hole:nth-child(3) { right: 20%; }
.t3-winrim { position: absolute; left: 23.5%; top: 34.06%; width: 53%; height: 23.44%; border-radius: 999px; box-shadow: 0 0 0 .6cqw rgba(0, 0, 0, .38), 0 0 0 1.1cqw rgba(255, 255, 255, .1); }
/* light on the face: a little darker when it turns from the lamp, a sheen, and the glint */
.t3-shade { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(8, 4, 14, var(--dim)); }
.t3-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
  background:
    radial-gradient(circle at calc(var(--gx) * 1%) calc(var(--gy) * 1%), rgba(255, 255, 255, calc(var(--gs) * .7)), rgba(255, 255, 255, calc(var(--gs) * .16)) 20%, transparent 46%),
    linear-gradient(160deg, rgba(255, 255, 255, var(--sh)), transparent 65%);
}
/* labels: paper with a printed band by default; each tape has its own */
.t3-label {
  position: absolute; left: 6.5cqw; right: 6.5cqw; top: 4.6cqw; height: 42cqw; overflow: hidden; border-radius: 1.4cqw;
  background:
    linear-gradient(180deg, transparent 31%, var(--eggplant) 31%, var(--eggplant-2) 58%, var(--eggplant) 86%, transparent 86%),
    repeating-linear-gradient(180deg, transparent 0 4.6cqw, rgba(84, 74, 63, .18) 4.6cqw calc(4.6cqw + 1px)) 0 1.6cqw / 100% 31% no-repeat,
    var(--paper);
  box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .35);
}
.t3 .tape-label, .t3-band {
  position: absolute; left: 3.5cqw; right: 3.5cqw; top: 1.6cqw; padding: 0; border: 0; background: none; border-radius: 0;
  font-family: var(--font-type); font-size: 3.5cqw; line-height: 4.6cqw; text-align: left; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.t3-band { -webkit-line-clamp: 1; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.t3-line, .t3-spec {
  position: absolute; left: 3.5cqw; right: 3.5cqw; bottom: 0; margin: 0; height: 5.9cqw;
  font-size: 3cqw; line-height: 5.9cqw; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t3-spec { font-family: var(--font-type); font-size: 2.4cqw; letter-spacing: .14em; text-transform: uppercase; }
.t3-side { position: absolute; left: 3.6cqw; top: 18.4cqw; font: 700 8.5cqw/1 var(--font-body); color: var(--paper); text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .3); }
.t3-holo {
  position: absolute; right: 2.2cqw; top: 19.4cqw; width: 13cqw; padding: 1.3cqw 0; border-radius: 1cqw; text-align: center;
  font-family: var(--font-type); font-size: 2.1cqw; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: rgba(40, 18, 60, .75);
  background: linear-gradient(115deg, #ff9ad5, #fff59d, #9dffb0, #8fd3ff, #c99bff, #ff9ad5) calc(50% + var(--dev) * 3%) 50% / 400% 100%;
  box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .55);
}
.t3-stamp {
  position: absolute; right: 3cqw; top: 1.4cqw; padding: .4cqw 1.4cqw; transform: rotate(-6deg);
  font-family: var(--font-type); font-size: 2.6cqw; letter-spacing: .1em; text-transform: uppercase;
  color: var(--leaf); border: .5cqw solid var(--leaf); border-radius: .8cqw; background: rgba(241, 232, 212, .85);
}
.t3[data-label="rainbow"] .t3-label {
  background:
    linear-gradient(180deg, transparent 32%, #e8463c 32% 43%, #f39a2b 43% 54%, #f5d33b 54% 65%, #58b05a 65% 76%, #3f86d6 76% 86%, transparent 86%),
    #f8f6f1;
}
.t3[data-label="kraft"] .t3-label {
  background:
    repeating-linear-gradient(17deg, rgba(90, 60, 20, .09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-23deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4px),
    radial-gradient(140% 100% at 30% 20%, #d3ab72, #b88a51);
}
.t3[data-label="grid"] .t3-label {
  background:
    linear-gradient(rgba(70, 120, 200, .28) 1px, transparent 1px) 0 0 / 100% 3.2cqw,
    linear-gradient(90deg, rgba(70, 120, 200, .28) 1px, transparent 1px) 0 0 / 3.2cqw 100%,
    #fbfbf7;
}
.t3[data-label="gold"] .t3-label {
  background:
    linear-gradient(180deg, transparent 30%, #c9a24a 30% calc(30% + 1px), transparent calc(30% + 1px) 87%, #c9a24a 87% calc(87% + 1px), transparent calc(87% + 1px)),
    linear-gradient(180deg, #1d1c20, #0c0b0e);
}
.t3[data-label="sunset"] .t3-label { background: linear-gradient(160deg, #ffb35c, #ff5e7a 50%, #8b3fe0); }
.t3[data-label="evidence"] .t3-label { background: linear-gradient(180deg, transparent 30%, #b3261e 30% 32%, transparent 32% 84%, #b3261e 84% 85%, transparent 85%), #ecd9a5; }
.t3[data-label="evidence"] .t3-label::after {
  content: "Evidence"; position: absolute; right: 3cqw; bottom: .7cqw; padding: .2cqw 1.2cqw; transform: rotate(-4deg);
  font-family: var(--font-type); font-size: 2.4cqw; letter-spacing: .12em; text-transform: uppercase; color: #b3261e; border: .5cqw solid #b3261e; border-radius: .6cqw;
}
.t3[data-label="masking"] .t3-label { background: none; box-shadow: none; }
.t3[data-label="masking"] .tape-label, .t3[data-label="masking"] .t3-band {
  left: 4cqw; right: 8cqw; top: 1cqw; padding: .8cqw 3cqw; -webkit-line-clamp: 1; transform: rotate(-1.6deg);
  background: rgba(238, 226, 190, .94); box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .25);
  clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 2%, 100% 0, 97% 30%, 100% 55%, 97% 80%, 100% 100%, 3% 100%, 0 85%, 2% 50%);
}
.t3[data-label="kraft"] .tape-label, .t3[data-label="grid"] .tape-label, .t3[data-label="masking"] .tape-label,
.t3[data-label="kraft"] .t3-band, .t3[data-label="grid"] .t3-band, .t3[data-label="masking"] .t3-band {
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 700; font-size: 5.4cqw; line-height: 5.2cqw; letter-spacing: 0; text-transform: none;
}
.t3[data-label="kraft"] .tape-label, .t3[data-label="kraft"] .t3-band, .t3[data-label="kraft"] .t3-side, .t3[data-label="kraft"] .t3-spec, .t3[data-label="kraft"] .t3-line { color: #2f1f0f; text-shadow: none; }
.t3[data-label="grid"] .tape-label, .t3[data-label="grid"] .t3-band, .t3[data-label="grid"] .t3-side, .t3[data-label="grid"] .t3-spec, .t3[data-label="grid"] .t3-line { color: #1f4fa8; text-shadow: none; }
.t3[data-label="masking"] .tape-label, .t3[data-label="masking"] .t3-band { color: #1d1a20; }
.t3[data-label="masking"] .t3-side, .t3[data-label="masking"] .t3-spec, .t3[data-label="masking"] .t3-line { color: rgba(255, 255, 255, .55); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.t3[data-label="gold"] .tape-label, .t3[data-label="gold"] .t3-band, .t3[data-label="gold"] .t3-side, .t3[data-label="gold"] .t3-spec, .t3[data-label="gold"] .t3-line { color: #e8c76a; text-shadow: none; }
.t3[data-label="gold"] .tape-label { text-transform: uppercase; letter-spacing: .08em; font-size: 3cqw; }
.t3[data-label="sunset"] .tape-label, .t3[data-label="sunset"] .t3-band, .t3[data-label="sunset"] .t3-spec, .t3[data-label="sunset"] .t3-line { color: #fff; text-shadow: 0 .2cqw .4cqw rgba(0, 0, 0, .3); }
.t3[data-label="kraft"] .t3-holo, .t3[data-label="grid"] .t3-holo, .t3[data-label="evidence"] .t3-holo, .t3[data-label="masking"] .t3-holo { display: none; }
.t3[data-label="kraft"] .t3-side, .t3[data-label="grid"] .t3-side { font-family: "Caveat", cursive; font-size: 10cqw; }
.t3-seal {
  left: -1%; right: -1%; top: 40%; padding: 1.2cqw 0; text-align: center; white-space: nowrap; overflow: hidden; pointer-events: none;
  font-family: var(--font-type); font-size: 2.8cqw; letter-spacing: .14em; text-transform: uppercase; color: #1b1522;
  background: #ffd84a; box-shadow: 0 .5cqw 1.2cqw rgba(0, 0, 0, .4); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.t3-seal-a { transform: translateZ(calc(var(--d) / 2 + 1px)) rotate(-6deg); }
.t3-seal-b { transform: rotateY(180deg) translateZ(calc(var(--d) / 2 + 1px)) rotate(-6deg); }

/* the deck under each tape: a screen with the recording's waveform, a counter and a VU meter, and piano keys */
.say-deck {
  display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; color: #efe6ff;
  background: linear-gradient(180deg, #30283a, #18131d); border-radius: 14px 14px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px #3c2f49;
}
.deck3d:not(.say-tape) .say-deck { border-radius: 14px; } /* on a page, nothing hangs under the deck */
.dk-screen {
  --vfd: #ffb84d; position: relative; border-radius: 8px; padding: 10px 12px 8px;
  background: radial-gradient(120% 140% at 50% 0%, #22170f, #0a0705); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .07);
}
.dk-wave { position: relative; height: 44px; cursor: pointer; touch-action: pan-y; outline: none; }
.dk-wave:focus-visible { box-shadow: 0 0 0 2px var(--vfd); border-radius: 4px; }
.dk-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.dk-bars i { flex: 1; height: calc(var(--h, .08) * 100%); min-height: 2px; border-radius: 2px; background: rgba(255, 184, 77, .2); transition: height .5s ease-out; }
.dk-bars.lit { clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.dk-bars.lit i { background: var(--vfd); box-shadow: 0 0 6px rgba(255, 184, 77, .65); }
.dk-wave:not(.has-wave)[data-src]::after {
  content: "Reading tape…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-type); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 184, 77, .55);
  animation: pulse 1.6s ease-in-out infinite;
}
.dk-wave.no-wave::after { content: none; }
.dk-head { position: absolute; top: -3px; bottom: -3px; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px; background: #fff3d6; box-shadow: 0 0 8px var(--vfd); opacity: 0; }
.deck3d.loaded .dk-head { opacity: 1; }
.dk-read { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--font-type); font-size: .78rem; letter-spacing: .08em; color: var(--vfd); text-shadow: 0 0 6px rgba(255, 184, 77, .55); }
.dk-read .time { min-width: 4.5ch; font-variant-numeric: tabular-nums; }
.dk-tag { opacity: .6; text-transform: uppercase; font-size: .66rem; letter-spacing: .16em; }
.dk-vu { display: flex; gap: 2px; margin-left: auto; }
.dk-vu i { width: 6px; height: 10px; border-radius: 1px; background: #5dd36a; opacity: clamp(.14, calc(var(--lvl, 0) * 9 - var(--i) + 1), 1); }
.dk-vu i:nth-child(n+6) { background: #ffb84d; }
.dk-vu i:nth-child(8) { background: #ff5a4e; }
.dk-screen .ph { position: absolute; inset: 0; border-radius: inherit; justify-content: center; background: rgba(10, 7, 5, .86); }
.deck3d[data-state="missing"] .dk-bars i { height: 6%; }
.dk-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 2px; }
.key {
  position: relative; height: 50px; padding: 3px 0 0; border: 0; border-radius: 6px 6px 9px 9px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font-type); color: #2a2230; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: linear-gradient(180deg, #faf8fb 0%, #ded8e4 55%, #c3bccb 100%);
  box-shadow: 0 7px 0 #7f7787, 0 8px 0 #2e2834, 0 13px 14px rgba(0, 0, 0, .55), inset 0 1px 0 #fff, inset 0 -3px 4px rgba(0, 0, 0, .1);
  transition: transform .06s ease-out, box-shadow .06s ease-out, background .06s;
}
.key .key-ico { font-size: .95rem; line-height: 1; letter-spacing: -.14em; margin-left: -.14em; }
.key small { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: #6c6474; }
.key-play .key-ico { color: #1d6b35; }
.key:active:not(:disabled), .key.down {
  transform: translateY(6px);
  box-shadow: 0 1px 0 #7f7787, 0 2px 0 #2e2834, 0 3px 5px rgba(0, 0, 0, .5), inset 0 1px 0 #fff, inset 0 3px 7px rgba(0, 0, 0, .18);
}
.key.down { background: linear-gradient(180deg, #ebe6f0, #cdc6d4); }
.key-led { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #3a3a33; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
.key-play.down .key-led { background: #66ff7f; box-shadow: 0 0 6px #66ff7f, 0 0 12px rgba(102, 255, 127, .6); }
.key:disabled { cursor: not-allowed; opacity: .4; }
.key:focus-visible { outline: 2px solid var(--eggplant-glow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .deck3d.playing .t3-hub, .deck3d.whirr-ff .t3-hub, .deck3d.whirr-rew .t3-hub, .dk-wave::after { animation: none; }
  .key { transition: none; }
}
@media (max-width: 480px) {
  .tools .count .of { display: none; } /* "4" instead of "4/23": six buttons fit on one row */
}

/* ───────────── Field Guide (the cover's five cards) ───────────── */
.guide-live { margin: 6px 0 28px; }
.guide-live .analyst { margin: 0 0 14px; }
.guide-meters { grid-template-columns: 1fr; max-width: 520px; }
.guide-meters dd { display: inline-flex; align-items: center; gap: 8px; }
.guide-meter i { background: rgba(0, 0, 0, .12); }
.guide-meter i.on { background: var(--leaf); }
.guide-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 0 0 22px; padding-top: 18px; border-top: 1px dashed var(--ink-faint); }
.guide-nav .btn, .guide-page .cover-actions .btn { text-decoration: none; }
.guide-page .cover-actions { justify-content: flex-start; margin-bottom: 0; }
a.btn { display: inline-block; }

/* ── Voice update (2026-10-15.3): two counters, the audit page, the cover footer, quick exit ── */
.stat[hidden] { display: none; }
.cover-footer { margin: 18px auto 0; font-size: .85rem; color: var(--ink-soft); max-width: 50ch; }
.found a { color: inherit; }
.audit-list { margin: 8px 0 18px; padding-left: 1.6em; display: grid; gap: 8px; }
.audit-list li { padding-left: 4px; }
.body em { font-style: italic; }
.quick-exit {
  position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  font: 600 .8rem/1 var(--font-type, system-ui); letter-spacing: .04em; text-decoration: none;
  color: #fff; background: #7a1f2b; border-radius: 999px; padding: 9px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.quick-exit:hover, .quick-exit:focus-visible { background: #5c1520; outline: 2px solid #fff; outline-offset: 2px; }
#toasts { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } /* toasts sit above the Quick exit button */
@media (max-width: 640px) { body { padding-bottom: 52px; } }


/* ───────────── Hash badges (SHA-256 of a loaded file, in the caption) ───────────── */
.m figcaption .hash {
  display: block; box-sizing: border-box; width: max-content; max-width: 100%; margin: 6px auto 0; padding: 2px 10px;
  font-family: var(--font-type); font-size: .72rem; letter-spacing: .04em; line-height: 1.6; text-align: center;
  color: var(--ink-soft); background: transparent; border: 1px dotted var(--ink-faint); border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m figcaption .hash:hover, .m figcaption .hash:focus-visible { color: var(--ink); border-style: solid; }
.m figcaption .hash:focus-visible { outline: 2px solid var(--eggplant-glow); outline-offset: 2px; }
.say-tape figcaption { font-size: .82rem; color: var(--ink-soft); margin: 6px 0 2px; text-align: center; } /* a tape in Museum Of Said Things has no caption of its own until a hash goes on */

/* ───────────── Three True Things notebook (endings) ───────────── */
.notebook { margin: 0 0 22px; max-width: 100%; }
.notebook h3 {
  margin: 0 0 6px; font-family: var(--font-type); font-weight: 400; font-size: 1.1rem; letter-spacing: .04em;
}
.nb-copy { margin: 0 0 4px; font-size: .9rem; color: var(--ink-soft); }
.nb-prev { margin: 0 0 4px; font-family: var(--font-type); font-size: .8rem; letter-spacing: .06em; color: var(--ink-faint); }
.nb-lines { display: grid; gap: 2px; margin: 8px 0 6px; }
.nb-line { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--ink-faint); padding: 6px 0 2px; }
.nb-line label { flex: 0 0 auto; font-family: var(--font-type); font-size: .95rem; color: var(--ink-soft); min-width: 1.6em; }
.nb-line input {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; padding: 2px 0; margin: 0;
  font: inherit; color: var(--ink); line-height: 1.5; outline: none; border-radius: 0;
}
.nb-line:focus-within { border-bottom-color: var(--ink); }
.nb-line input:focus-visible { outline: 2px solid var(--eggplant, #5b2a86); outline-offset: 3px; }
.nb-note { margin: 0; font-size: .78rem; color: var(--ink-faint); font-style: italic; }

/* ───────────── DARVO card (Red Flag Bingo dialog) ───────────── */
.darvo-title { margin: 26px 0 4px; font-family: var(--font-type); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.darvo-sub { margin-top: 0; }
.darvo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; margin: 0 auto; }
.darvo-head { font-family: var(--font-type); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--ink-soft); padding: 4px 0 2px; border-bottom: 2px solid var(--ink); }
.darvo-head.full { color: var(--eggplant); border-bottom-color: var(--eggplant); }
.darvo-grid .sq { aspect-ratio: auto; min-height: 5.6em; padding: 20px 6px 10px; font-size: clamp(.68rem, 2.3vw, .86rem); } /* no icon row here, so the top padding keeps the text clear of the corner check */
.darvo-grid .sq .check { top: 2px; right: 6px; font-size: .95rem; }
.darvo-grid .sq.darvo-empty { border-style: dashed; border-color: var(--ink-faint); background: transparent; }
@media (max-width: 480px) { .darvo-grid { gap: 4px; } .darvo-grid .sq { padding: 18px 3px 8px; font-size: .64rem; letter-spacing: -.01em; } .darvo-head { font-size: .66rem; letter-spacing: .08em; } }

/* ───────────── Bystander Blind Spot (#/guide/bystander) ───────────── */
.qb-list { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 2px; }
.qb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--ink-faint); }
.qb-q { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qb-num { font-family: var(--font-type); font-size: .8rem; letter-spacing: .08em; color: var(--ink-faint); margin-right: 6px; }
.qb-opts { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.qb {
  font: inherit; font-family: var(--font-type); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  min-width: 4.2em; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--ink-faint);
  background: #fffdf6; color: var(--ink-soft); cursor: pointer; line-height: 1.2;
}
.qb:hover { border-color: var(--eggplant-2); color: var(--eggplant); }
.qb:focus-visible { outline: 2px solid var(--eggplant-glow); outline-offset: 2px; }
.qb[aria-pressed="true"] { background: var(--eggplant); border-color: var(--eggplant); color: #fff; }
.qb-result:empty { display: none; }
.qb-result { background: rgba(91, 42, 134, .08); padding: 12px 14px; border-radius: 4px; font-size: .92rem; margin: 0 0 14px; }
.qb-result p { margin: 0 0 6px; }
.qb-result p:last-child { margin-bottom: 0; }
.qb-stamp {
  display: inline-block; font-family: var(--font-type); text-transform: uppercase; letter-spacing: .12em;
  font-size: 1.05rem; color: var(--eggplant); border: 3px double var(--eggplant); border-radius: 4px;
  padding: 2px 12px; transform: rotate(-3deg); margin: 2px 0 10px !important;
}
.qb-count { font-family: var(--font-type); font-size: .8rem; letter-spacing: .06em; color: var(--ink-faint); }
.qb-actions { margin: 0 0 22px; }
@media (max-width: 480px) {
  .qb-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .qb-opts { justify-content: flex-end; }
}

/* ═════════════════════════════════════════════════════════════
   HOLO DESK (2026-10-22): one look for the whole site
   A dark desk with a soft holographic glow; the case file is a 3D manila folder lying on it (sheets inside, a back
   cover, real thickness); every button is a 3D tile you press down, with a faint rainbow sheen that follows the pointer
   (js/engine.js sets --hx/--hy). Reading text is one clean face, large; titles, tabs and stamps keep the typewriter.
   ═════════════════════════════════════════════════════════════ */

/* ── the desk ── */
body {
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(70, 220, 255, .10), transparent 62%),
    radial-gradient(900px 600px at 100% 0%, rgba(255, 80, 210, .11), transparent 60%),
    radial-gradient(1300px 760px at 50% 115%, rgba(124, 63, 179, .38), transparent 62%),
    radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(180deg, #140e20 0%, #0d0a18 55%, #0a0913 100%);
  background-attachment: fixed;
}

/* ── type: bigger, one reading face, typewriter for labels ── */
.body p, .body li { line-height: 1.7; }
.timestamp { font-size: .9rem; }
.folder-tab { font-size: .86rem; }
.content-note, .cover-footer { font-size: .9rem; line-height: 1.55; }
.kbd-hint, .fine-print { font-size: .86rem; }
.choice small, .badges small, .rank span { font-size: .84rem; }
.transcript .who, .analyst .tag { font-size: .8rem; }
.ex-code { font-size: .78rem; }
.stat small { font-size: .78rem; }
.site-foot { font-size: .88rem; line-height: 1.6; }
.m figcaption { font-size: .86rem; }
.ph-sub { font-size: .84rem; }
.rec { font-size: .8rem; }
.dev-info { font-size: .8rem; }
.transcript p { font-size: 1.12rem; line-height: 1.5; }
.analyst p, .document p, .tip { font-size: .98rem; }
.bubble { font-family: var(--font-body); font-size: 1rem; }
.bubble .meta { font-size: .76rem; }
.how { font-size: .95rem; }
.how b { font-family: var(--font-type); font-weight: 400; letter-spacing: .03em; font-size: 1.02rem; }
.tagline { font-size: 1.2rem; line-height: 1.45; }
.subtitle { line-height: 1.7; }
/* a printed title: a hairline of light under the letters, like ink pressed into paper */
.scene-head h1, .cover h1, .dlg-head h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }

/* ── the HUD: a glass bar with a holographic edge ── */
#hud {
  background: linear-gradient(180deg, rgba(20, 15, 34, .86), rgba(14, 11, 26, .78));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(90, 230, 255, .45), rgba(182, 129, 239, .7), rgba(255, 80, 210, .45)) 1;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
}

/* ── the case file: a 3D manila folder ──
   Its thickness is a stack of paper edges under the page; two sheets peek out behind it, and behind them the folder's
   darker back cover, wider than the sheets (4px out on the left, 12px on the right, 28px below) with a darker lip;
   the light falls from the top left. All of it is box-shadow, so nothing sits over the text. The coffee ring sits
   under the paperweight (.egg-weight: 84px at top 60px, right 24px; 56px at top 6px, right 8px on a phone). */
.dossier, .cover-folder {
  border-radius: 4px 16px 16px 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 38%, rgba(120, 88, 40, .07) 100%),
    radial-gradient(140px 140px at calc(100% - 66px) 102px, rgba(120, 80, 30, .10) 38%, rgba(120, 80, 30, .16) 40%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .016) 0 1px, transparent 1px 3px),
    var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(120, 95, 55, .18),
    0 1px 0 #ddd0b0, 0 2px 0 #d3c4a0, 0 3px 0 #c9b992, 0 4px 0 #bfae86,
    5px 8px 0 -1px #e8dec5,
    9px 14px 0 -2px #d9cba9,
    4px 20px 0 8px #c3a46a,
    4px 21px 0 8px #a8894f,
    0 30px 44px -8px rgba(0, 0, 0, .6),
    0 60px 100px -30px rgba(60, 20, 100, .65);
}
@media (max-width: 720px) {
  .dossier, .cover-folder {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 38%, rgba(120, 88, 40, .07) 100%),
      radial-gradient(92px 92px at calc(100% - 36px) 34px, rgba(120, 80, 30, .10) 38%, rgba(120, 80, 30, .16) 40%, transparent 42%),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, .016) 0 1px, transparent 1px 3px),
      var(--paper);
  }
}
.folder-tab {
  background: linear-gradient(180deg, #f3e9d0, #e2d4b1);
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 -8px 16px -6px rgba(0, 0, 0, .35);
  color: #4a4036; padding: 7px 18px 6px;
}
.document { border-radius: 10px; box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(182, 129, 239, .12), 0 2px 0 #e2d7bd, 0 12px 24px -6px rgba(0, 0, 0, .2); }
.transcript { border-radius: 0 12px 12px 0; }
.analyst { border-radius: 12px; }
.polaroid { box-shadow: 0 2px 0 #e9e9e9, 0 14px 30px -6px rgba(0, 0, 0, .35); }

/* ── 3D tiles: every button and card you can press ──
   A lit face, a darker edge underneath for thickness, and a soft drop shadow; it lifts under the pointer and sinks
   when pressed. The sheen (::before) sits between the face and the words; its rainbow band runs with the pointer.
   Paper tiles: .btn, .choice, .how-card, the Yes/No answers (.qb) and the cover's and endings' links to the Field
   Guide (.found a, .fine-print > a). Dark tiles: the primary button, the HUD's glass, Quick exit, the song's play
   buttons (.tc-play, .tc-row). */
.btn, .choice, .how-card, .qb, .found a, .fine-print > a[href^="#/guide/"], .tools button, .dlg-close { position: relative; }
.btn, .choice, .how-card, .qb, .found a, .fine-print > a[href^="#/guide/"], .tools button, .quick-exit, .dlg-close, .tc-play, .tc-row {
  isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: transform .14s cubic-bezier(.2, .7, .3, 1), box-shadow .14s ease, background-color .14s ease, filter .14s ease;
}
.btn::before, .choice::before, .how-card::before, .qb::before, .found a::before, .fine-print > a[href^="#/guide/"]::before,
.tools button::before, .quick-exit::before, .tc-play::before, .tc-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--hx, 22%) var(--hy, 0%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 46%),
    var(--holo);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, calc(81.25% - .625 * var(--hx, 0%)) 0; /* the band is 2.6 tiles wide: this puts its middle under the pointer */
  opacity: .16; transition: opacity .25s ease, background-position .35s ease;
}
.btn:hover::before, .choice:hover::before, .how-card:hover::before, .qb:hover::before, .found a:hover::before, .fine-print > a[href^="#/guide/"]:hover::before,
.btn:focus-visible::before, .choice:focus-visible::before, .how-card:focus-visible::before, .qb:focus-visible::before,
.found a:focus-visible::before, .fine-print > a[href^="#/guide/"]:focus-visible::before { opacity: .55; }
/* dark faces get the band alone, held low: a white glint (or a bright band) would wash out their white labels */
.btn.primary::before, .tools button::before, .quick-exit::before, .tc-play::before, .tc-row::before, .qb[aria-pressed="true"]::before {
  background: var(--holo); background-size: 260% 100%; background-position: calc(81.25% - .625 * var(--hx, 0%)) 0;
}
.btn.primary::before, .qb[aria-pressed="true"]::before { opacity: .3; }
.tools button::before, .quick-exit::before, .tc-play::before, .tc-row::before { opacity: .25; }

/* paper tiles (on the folder) */
.btn, .choice, .how-card, .qb, .found a, .fine-print > a[href^="#/guide/"] {
  border: 1px solid rgba(60, 44, 24, .28);
  background: linear-gradient(180deg, #fffefb 0%, #f4ecda 100%);
  color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(120, 95, 55, .12), 0 4px 0 #c4b38b, 0 12px 20px -8px rgba(40, 14, 60, .45);
}
.btn:hover, .btn:focus-visible, .choice:hover, .choice:focus-visible, .how-card:hover, .how-card:focus-visible, .qb:hover, .qb:focus-visible,
.found a:hover, .found a:focus-visible, .fine-print > a[href^="#/guide/"]:hover, .fine-print > a[href^="#/guide/"]:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ffffff 0%, #f7f0e1 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(120, 95, 55, .12), 0 6px 0 #c4b38b, 0 18px 26px -10px rgba(40, 14, 60, .5);
}
.btn:active, .choice:active, .how-card:active, .qb:active, .found a:active, .fine-print > a[href^="#/guide/"]:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(120, 95, 55, .12), 0 1px 0 #c4b38b, 0 4px 8px -4px rgba(40, 14, 60, .4);
}
.how-card:hover, .how-card:focus-visible, .qb:hover, .qb:focus-visible { border-color: rgba(60, 44, 24, .28); color: var(--ink); } /* one tile language: no purple outline on hover */
.btn, .found a, .fine-print > a[href^="#/guide/"] {
  border-radius: 14px; padding: 12px 22px; min-height: 48px;
  font-family: var(--font-body); font-weight: 700; font-style: normal; letter-spacing: .01em; font-size: 1.02rem;
}
.found a, .fine-print > a[href^="#/guide/"] { display: inline-flex; align-items: center; text-decoration: none; line-height: 1.3; }
.fine-print:has(> a[href^="#/guide/"]) { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0; font-style: normal; } /* the " · " between them goes */
.btn.primary {
  color: #fff; border-color: #3a1660;
  background: linear-gradient(180deg, #9356d6 0%, #6c33ac 48%, #55278a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(30, 6, 50, .35), 0 4px 0 #34134f, 0 14px 24px -8px rgba(91, 42, 134, .75);
  text-shadow: 0 1px 1px rgba(30, 6, 50, .5);
}
.btn.primary:hover, .btn.primary:focus-visible {
  background: linear-gradient(180deg, #9a5edc 0%, #7237b2 48%, #5b2a8f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -4px 8px rgba(30, 6, 50, .35), 0 6px 0 #34134f, 0 20px 30px -10px rgba(91, 42, 134, .85);
}
.btn.primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 4px rgba(30, 6, 50, .35), 0 1px 0 #34134f, 0 4px 10px -4px rgba(91, 42, 134, .6); }

.choice { border-radius: 16px; padding: 16px 18px; font-size: 1.04rem; line-height: 1.5; }
.choice .letter {
  width: 34px; height: 34px; font-family: var(--font-body); font-weight: 800; font-size: .95rem;
  background: radial-gradient(circle at 35% 30%, #b98af0 0%, #7c3fb3 45%, #4a1f72 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 2px 0 #2d1245, 0 4px 8px rgba(45, 18, 69, .35);
}
.choice .label { padding-top: 4px; }
.choice.locked { background: rgba(255, 255, 255, .25); box-shadow: none; transform: none; }
.choice.locked::before { display: none; }

.how { gap: 12px; }
.how-card { border-radius: 14px; padding: 12px 34px 12px 14px; }
.how-go { right: 14px; font-size: 1.1rem; }
/* on a wide folder the cards use its full width, and a fifth card on its own spans the row */
@media (min-width: 721px) { .how { max-width: 716px; } .how li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* the Bystander page's Yes / No: small paper tiles; the one you chose is pressed in */
.qb {
  font: 700 .95rem/1.2 var(--font-body); text-transform: none; letter-spacing: .01em;
  min-height: 44px; min-width: 64px; padding: 8px 18px; border-radius: 12px;
}
.qb[aria-pressed="true"], .qb[aria-pressed="true"]:hover, .qb[aria-pressed="true"]:focus-visible {
  background: linear-gradient(180deg, #9356d6, #6c33ac 48%, #55278a); color: #fff; border-color: #3a1660;
  transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(30, 6, 50, .45), 0 1px 0 #34134f;
}

/* glass tiles (on the dark desk and the song's dark card) */
.tools button {
  min-height: 44px; min-width: 44px; border-radius: 12px; padding: 6px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 rgba(0, 0, 0, .55), 0 8px 16px -6px rgba(0, 0, 0, .6);
}
.tools button:hover, .tools button:focus-visible {
  transform: translateY(-1px); border-color: rgba(182, 129, 239, .7);
  background: linear-gradient(180deg, rgba(182, 129, 239, .32), rgba(182, 129, 239, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 rgba(0, 0, 0, .55), 0 12px 20px -6px rgba(124, 63, 179, .55);
}
.tools button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 rgba(0, 0, 0, .55), 0 3px 8px -4px rgba(0, 0, 0, .6); }
.tc-play, .tc-row {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid rgba(182, 129, 239, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 0 rgba(10, 4, 18, .8), 0 10px 18px -8px rgba(0, 0, 0, .6);
}
.tc-play { border-radius: 14px; }
.tc-play small { white-space: nowrap; }
.tc-play:hover, .tc-row:hover, .tc-play.playing, .tc-row.playing { background: linear-gradient(180deg, rgba(182, 129, 239, .36), rgba(182, 129, 239, .14)); }
.tc-play:hover:not(:disabled) { transform: translateY(-1px); }
.tc-play:active:not(:disabled), .tc-row:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 rgba(10, 4, 18, .8); }

.quick-exit {
  font: 700 .86rem/1 var(--font-body); letter-spacing: .02em; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px;
  background: linear-gradient(180deg, #a32d3c, #7a1f2b); border: 1px solid #4d0f18;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #4d0f18, 0 10px 18px -6px rgba(0, 0, 0, .6);
}
.quick-exit:hover, .quick-exit:focus-visible { background: linear-gradient(180deg, #b23444, #84212e); transform: translateY(-1px); }
.quick-exit:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 #4d0f18, 0 4px 8px -4px rgba(0, 0, 0, .6); }
/* its focus ring is white with a dark halo, so it shows over the paper folder as well as the desk */
.quick-exit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #2d1245, inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #4d0f18; }

/* the sealed Forensic Review card on a chapter ("Tap to open the file") lifts and presses like a tile */
.document.fold:not([open]) {
  box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(182, 129, 239, .12), 0 4px 0 #d3c4a0, 0 14px 24px -8px rgba(40, 14, 60, .35);
  transition: transform .14s cubic-bezier(.2, .7, .3, 1), box-shadow .14s ease;
}
.document.fold:not([open]):hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(182, 129, 239, .22), 0 6px 0 #d3c4a0, 0 18px 28px -8px rgba(40, 14, 60, .4);
}
.document.fold:not([open]):active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(182, 129, 239, .12), 0 1px 0 #d3c4a0; }

/* ── dialogs and toasts: the same paper, the same depth ── */
dialog {
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 0 #d3c4a0, 0 4px 0 #bfae86, 0 40px 90px -20px rgba(0, 0, 0, .8);
}
dialog::backdrop { background: rgba(8, 5, 16, .72); backdrop-filter: blur(6px); }
.dlg-head { z-index: 3; background: linear-gradient(180deg, #efe5cc, #e4d7b8); border-radius: 18px 18px 0 0; } /* above a scrolled bingo card's words */
.dlg-close {
  min-width: 44px; min-height: 44px; border-radius: 12px;
  background: linear-gradient(180deg, #fffefb, #efe6d1); border: 1px solid rgba(60, 44, 24, .25);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #c4b38b, 0 8px 14px -8px rgba(40, 14, 60, .4);
}
.dlg-close:hover, .dlg-close:focus-visible { transform: translateY(-1px); }
.dlg-close:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #c4b38b; }
.dlg-sub { font-size: .95rem; }
.exhibits li, .scripts li, .badges li { border-radius: 12px; }
.exhibits li:not(.missing) { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #ddd0b0, 0 10px 18px -8px rgba(0, 0, 0, .25); }
.exhibits p { font-size: .95rem; line-height: 1.5; }
.toast { border-radius: 14px; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #c4b38b, 0 16px 30px -10px rgba(0, 0, 0, .55); font-size: .95rem; }
.toast.big { font-size: 1.1rem; }
/* Red Flag Bingo and the DARVO card: paper squares with the tiles' corners and edge */
.sq {
  border: 1px solid rgba(60, 44, 24, .3); border-radius: 10px;
  background: linear-gradient(180deg, #fffefb, #f4ecda);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d3c4a0, 0 6px 10px -6px rgba(40, 14, 60, .35);
}
.sq.on { background: linear-gradient(180deg, #f6edff, #e7d6fa); }
.darvo-grid .sq.darvo-empty { box-shadow: none; }

.ledger { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); } /* the ending's tally fits a 320px phone */

/* ── reading text in the reading face, labels a size up ── */
.vm-text { font-family: var(--font-body); font-weight: 600; font-size: 1.08rem; line-height: 1.5; } /* a tape's words, like a chapter's transcript */
.t3-hint { font-family: var(--font-body); font-size: .86rem; color: var(--ink-soft); }
.found { font-family: var(--font-body); color: #2f6a2b; }
.tr-title { font-size: .76rem; }
.vm-tag, .vm-pin, .vm-new { font-size: .7rem; }
.key small { font-size: .7rem; letter-spacing: .1em; color: #4a4252; }
.dk-tag { font-size: .7rem; opacity: .8; }
.dk-screen .ph { padding: 6px 12px; background: rgba(10, 7, 5, .95); } /* a sealed tape's note, clear of the counter under it */
.dk-screen .ph-sub { font-size: .82rem; line-height: 1.3; }
/* secondary text on paper (hints, notes, fine print, missing exhibits): 4.9:1 on the paper, up from 3.2:1 */
:root { --ink-faint: #6b5f50; }
/* links in the folder's own text: the eggplant ink (7.8:1), not the desk's light violet */
.fine-print a:not([href^="#/guide/"]), :is(.dossier, .cover-folder, dialog) :is(p, li) > a:not([class]):not(:is(.track-card, .terminal) *) { color: var(--eggplant); }
/* keyboard focus on paper: a dark ring (the desk's yellow ring is near invisible on the paper); the dark parts on the
   paper (the song card, terminals, the tape decks) keep theirs */
:is(.dossier, .cover-folder, dialog, .toast) :focus-visible:not([tabindex="-1"]):not(:is(.track-card, .terminal, .deck3d, .say-deck, .t3) *),
.document.fold > summary:focus-visible, .m figcaption .hash:focus-visible { outline: 3px solid var(--eggplant); outline-offset: 3px; }
/* the keyboard tip under the choices only helps with a keyboard */
@media (hover: none) and (pointer: coarse) { .kbd-hint { display: none; } }
@media (min-width: 768px) { .bingo-grid.cols-4 .sq { font-size: .84rem; line-height: 1.3; } }

/* touch screens don't hover: the sheen rests a little brighter (it tilts with the phone) and sweeps across while the
   finger is down; the dark tiles stay capped */
@media (hover: none) {
  .btn::before, .choice::before, .how-card::before, .qb::before, .found a::before, .fine-print > a[href^="#/guide/"]::before { opacity: .45; }
  .tools button::before, .quick-exit::before, .tc-play::before, .tc-row::before { opacity: .35; }
  .btn:active::before, .choice:active::before, .how-card:active::before, .qb:active::before, .found a:active::before,
  .fine-print > a[href^="#/guide/"]:active::before { opacity: 1; background-position: 0 0, 0% 0; }
  .tools button:active::before, .quick-exit:active::before, .tc-play:active::before, .tc-row:active::before, .btn.primary:active::before { background-position: 0% 0; }
}
.btn.primary::before, .qb[aria-pressed="true"]::before { opacity: .3; }
.btn.primary:is(:hover, :focus-visible, :active)::before { opacity: .45; }
:is(.tools button, .quick-exit, .tc-play, .tc-row):is(:hover, :focus-visible, :active)::before { opacity: .35; }
/* the HUD stays one row with 44px tools: a tablet (768) and phones down to 360 */
@media (min-width: 721px) and (max-width: 900px) { .tools button { padding: 6px 9px; } }
@media (max-width: 720px) {
  .btn { padding: 12px 18px; }
  .choice { padding: 14px 14px; }
  .tools { gap: 3px; }
  .tools button { padding: 6px 7px; }
  #hud { padding: 8px 10px; }
}
@media (max-width: 374px) { .tools { gap: 2px; } .tools button { padding: 6px 4px; } #hud { padding: 8px; } }
/* phones: the cover's first screen, the folder tab, dialog titles, the bingo card, the cover cards, the stamp and
   the stacked buttons, each kept to one line or one width */
@media (max-width: 480px) {
  .cover h1 { font-size: 2.05rem; }
  .cover .subtitle { line-height: 1.55; }
  .folder-tab { font-size: .74rem; letter-spacing: .04em; padding: 7px 12px 6px; max-width: calc(100% - 6px); }
  .dlg-head { padding: 10px 12px 10px 18px; gap: 10px; }
  .dlg-head h2 { font-size: clamp(1rem, 5.2vw, 1.3rem); letter-spacing: 0; }
  .bingo-grid.cols-4, .darvo-grid { gap: 4px; margin-inline: -10px; }
  .bingo-grid.cols-4 .sq, .darvo-grid .sq { padding: 6px 2px; font-size: .7rem; letter-spacing: 0; line-height: 1.18; overflow-wrap: break-word; hyphens: auto; }
  .darvo-grid .sq { padding-top: 18px; }
  .darvo-head { font-size: .72rem; }
  .how b { font-size: .92rem; letter-spacing: 0; margin-bottom: 2px; }
  .how-card { line-height: 1.45; padding: 12px 32px 12px 14px; }
  .stamp-big { font-size: 1.45rem; letter-spacing: .12em; padding: 4px 14px; }
  .end-actions .btn, .guide-nav .btn, .guide-page .cover-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .quick-exit { padding: 0 13px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .choice, .how-card, .qb, .found a, .fine-print > a, .tools button, .quick-exit, .dlg-close, .tc-play, .tc-row, .document.fold { transform: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   EGGPLANT GLASS (2026-10-22.3): buttons that pop
   Every button and card you press is the same deep-purple glass tile: white words, a glossy top, a thick dark edge
   you can see it stand on, a purple glow under it. It rises under the pointer and sinks when pressed. A wrong answer
   turns red, is struck through, shakes and buzzes (js/engine.js wrongAnswer()).
   ═════════════════════════════════════════════════════════════ */
.btn, .choice, .how-card, .qb, .found a, .fine-print > a[href^="#/guide/"] {
  color: #fff; border: 1px solid #2b0f45;
  background: linear-gradient(180deg, #ad7bef 0%, #8143c8 38%, #6430a3 68%, #50247f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -7px 14px rgba(28, 5, 48, .45),
    0 6px 0 #2b0f45,
    0 7px 0 rgba(0, 0, 0, .22),
    0 20px 32px -12px rgba(91, 42, 134, .9);
  text-shadow: 0 1px 1px rgba(20, 4, 36, .55);
}
/* the glossy top: a band of reflected light over the upper half, under the words */
.btn::after, .choice::after, .how-card::after, .qb::after, .found a::after, .fine-print > a[href^="#/guide/"]::after {
  content: ""; position: absolute; left: 3%; right: 3%; top: 2px; height: 46%; z-index: -1; pointer-events: none;
  border-radius: 12px 12px 40% 40% / 12px 12px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .06));
}
.btn:hover, .btn:focus-visible, .choice:hover, .choice:focus-visible, .how-card:hover, .how-card:focus-visible,
.qb:hover, .qb:focus-visible, .found a:hover, .found a:focus-visible, .fine-print > a[href^="#/guide/"]:hover, .fine-print > a[href^="#/guide/"]:focus-visible {
  color: #fff; border-color: #2b0f45; transform: translateY(-3px);
  background: linear-gradient(180deg, #ba8ff4 0%, #8d4fd3 38%, #6d36b0 68%, #57288a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -7px 14px rgba(28, 5, 48, .4),
    0 9px 0 #2b0f45,
    0 10px 0 rgba(0, 0, 0, .22),
    0 26px 38px -12px rgba(124, 63, 179, .95);
}
.btn:active, .choice:active, .how-card:active, .qb:active, .found a:active, .fine-print > a[href^="#/guide/"]:active {
  transform: translateY(5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -4px 10px rgba(28, 5, 48, .5), 0 1px 0 #2b0f45, 0 6px 12px -6px rgba(91, 42, 134, .8);
}
.btn::before, .choice::before, .how-card::before, .qb::before, .found a::before, .fine-print > a[href^="#/guide/"]::before { opacity: .35; mix-blend-mode: screen; }
.btn:hover::before, .choice:hover::before, .how-card:hover::before, .btn:focus-visible::before, .choice:focus-visible::before, .how-card:focus-visible::before { opacity: 1; }
.btn.primary {
  font-size: 1.15rem; padding: 14px 30px; border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -7px 14px rgba(28, 5, 48, .45),
    0 0 0 3px rgba(182, 129, 239, .35),
    0 6px 0 #2b0f45,
    0 24px 40px -12px rgba(124, 63, 179, 1);
}
.btn.primary:hover, .btn.primary:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -7px 14px rgba(28, 5, 48, .4), 0 0 0 4px rgba(182, 129, 239, .5), 0 9px 0 #2b0f45, 0 30px 46px -12px rgba(124, 63, 179, 1);
}

/* inside the tiles: white words, a white disc for the letter, light small print */
.choice .letter {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #efe4fd 70%, #d9c4f6 100%); color: #4a1f7a;
  box-shadow: inset 0 -2px 3px rgba(74, 31, 122, .3), 0 2px 0 rgba(30, 6, 50, .55), 0 4px 8px rgba(30, 6, 50, .35);
  text-shadow: none;
}
.choice small { color: #ecdffd; }
.how-card, .how-card:hover, .how-card:focus-visible { color: #f6efff; }
.how b, .how-card:hover b { color: #fff; }
.how-go { color: #fff; }
.choice.locked { color: #e5d8f7; background: linear-gradient(180deg, rgba(120, 80, 170, .55), rgba(80, 40, 120, .55)); box-shadow: none; transform: none; border-style: dashed; }
/* a Yes/No answer you picked stays pushed in, darker, with a light ring; the one you didn't pick fades back */
.qb[aria-pressed="true"], .qb[aria-pressed="true"]:hover, .qb[aria-pressed="true"]:focus-visible {
  background: linear-gradient(180deg, #4a1f7a, #2b0f45); color: #fff; border-color: #1a0730;
  transform: translateY(5px);
  box-shadow: inset 0 3px 8px rgba(10, 0, 20, .6), 0 0 0 3px #d9c4f6, 0 1px 0 #1a0730;
}
.qb-opts:has(.qb[aria-pressed="true"]) .qb:not([aria-pressed="true"]):not(:hover):not(:focus-visible) { opacity: .45; filter: saturate(.5); }

/* the HUD's tools and the dialogs' close button: the same glass, smaller */
.tools button {
  color: #fff; border-color: rgba(214, 180, 255, .4);
  background: linear-gradient(180deg, rgba(160, 105, 225, .62), rgba(95, 45, 150, .62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 #1e0a33, 0 10px 18px -6px rgba(124, 63, 179, .7);
}
.tools button:hover, .tools button:focus-visible { background: linear-gradient(180deg, rgba(180, 125, 240, .8), rgba(110, 55, 170, .8)); border-color: rgba(230, 205, 255, .7); }
.dlg-close {
  color: #fff; border-color: #2b0f45;
  background: linear-gradient(180deg, #ad7bef, #6430a3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 0 #2b0f45, 0 10px 16px -8px rgba(91, 42, 134, .8);
}

/* ── a wrong answer: red, struck through, a shake; the note under the choices says what giving in costs ── */
.choice.is-wrong, .choice.is-wrong:hover, .choice.is-wrong:focus-visible {
  background: linear-gradient(180deg, #ef7a72 0%, #c7342b 45%, #9c1f17 100%); border-color: #5a0d09;
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -5px 10px rgba(60, 5, 2, .4), 0 2px 0 #5a0d09, 0 10px 18px -8px rgba(179, 38, 30, .8);
  cursor: not-allowed;
}
.choice.is-wrong::before { opacity: 0; }
.choice.is-wrong .label { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 255, 255, .85); }
.choice.is-wrong .letter { color: transparent; position: relative; }
.choice.is-wrong .letter::after { content: "✗"; position: absolute; inset: 0; display: grid; place-items: center; color: #b3261e; font-weight: 800; }
.choice.shake { animation: wrong-shake .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes wrong-shake {
  10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 0; } 30%, 50%, 70% { translate: -7px 0; } 40%, 60% { translate: 7px 0; } 100% { translate: 0 0; }
}
.wrong-note {
  margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; font-size: 1rem; line-height: 1.5;
  scroll-margin: calc(var(--bar-h, 61px) + 12px) 0 84px; /* scrolled into view clear of the bar and Quick exit */
  background: #fde9e7; border: 1px solid #eab0a9; color: #4d0f0a;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e2a39b;
}
.wrong-note b { color: #b3261e; }
.wrong-note span { display: block; margin-top: 2px; color: #7a2a22; font-size: .92rem; }

/* ── the stamp sits square inside the page's corner, clear of the edge and the tab ── */
.stamp { top: 30px; right: clamp(18px, 4vw, 44px); transform: rotate(5deg); }
@media (max-width: 720px) { .stamp { top: 26px; right: 16px; font-size: .74rem; transform: rotate(4deg); } }

/* ── To the friend who got the folder (#/guide/bystander): each question, its Yes / No, and a clinical-commentary
   drop-down under it (a video slot, the forensic concept, breakdown, mechanism and audit, sources) ── */
.qb-row { display: block; padding: 14px 0 12px; }
.qb-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 560px) { .qb-line { flex-direction: column; align-items: stretch; gap: 10px; } .qb-line .qb-opts { justify-content: flex-end; } }
.qb-q { font-weight: 600; line-height: 1.5; }
.qb-more { margin: 10px 0 2px; border-radius: 14px; background: #fffdf7; border: 1px solid #e3d6b8; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e2d4b2; }
.qb-more > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  min-height: 44px; padding: 10px 44px 10px 14px; position: relative; border-radius: 14px;
}
.qb-more > summary::-webkit-details-marker { display: none; }
.qb-more > summary::after {
  content: "▾"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--eggplant-2);
  font-size: 1.1rem; transition: transform .2s ease;
}
.qb-more[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.qb-more > summary:hover { background: rgba(124, 63, 179, .06); }
.qb-more > summary:focus-visible { outline: 3px solid var(--eggplant-2); outline-offset: 2px; }
.qb-more-k { font-family: var(--font-type); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--eggplant); }
.qb-more > summary b { font-family: var(--font-type); font-weight: 400; font-size: 1rem; color: var(--ink); }
.qb-more-body { padding: 0 14px 14px; }
.qb-video { margin: 4px 0 14px; }
.qb-video .crt { padding: 8px; }
.qb-video .ph-video, .qb-video video { aspect-ratio: 16 / 9; }
.qb-video figcaption { text-align: left; }
.qb-analysis { margin: 0; display: grid; gap: 12px; }
.qb-analysis dt { font-family: var(--font-type); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--eggplant); margin-bottom: 2px; }
.qb-analysis dd { margin: 0; line-height: 1.65; }
.qb-sources { margin: 12px 0 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.55; }
.qb-sources a { color: var(--eggplant); }
/* a quiz page with more than one track (Stuck in the Middle): each track's heading and line, a dashed rule between */
.qb-track + .qb-track { margin-top: 34px; padding-top: 26px; border-top: 2px dashed var(--paper-edge); }
.qb-track-h { margin: 0 0 6px; font-family: var(--font-type); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: var(--eggplant); }
.qb-track-intro { margin: 0 0 10px; color: var(--ink-soft); }
/* a Yes on a safety question: the band gives way to "Safety first" in stamp red */
.qb-stamp-safety { color: var(--stamp); border-color: var(--stamp); }
.qb-abuse:focus { outline: 3px solid var(--eggplant-glow); outline-offset: 4px; border-radius: 4px; }
/* a book's buy links after its source (js/affiliate.js; only while an affiliate ID is set), and the disclosure line */
.qb-buy { font-size: .8rem; color: var(--ink-faint); white-space: nowrap; }
.qb-buy a { font-weight: 700; }
.qb-buy a.is-amazon { font-weight: 400; }
.qb-disclosure { margin: 6px 0 0; font-size: .78rem; color: var(--ink-faint); line-height: 1.5; }
.qb-navigate { margin: 26px 0 18px; padding: 18px 18px 14px; border-radius: 16px; background: #f6f0ff; border: 1px solid #dccbf3; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d9c8f0; }
.qb-navigate h2 { margin: 0 0 10px; font-family: var(--font-type); font-weight: 400; font-size: 1.25rem; color: var(--eggplant); }
.qb-navigate ul { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 8px; }
.qb-navigate li { line-height: 1.6; }
.qb-abuse { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fde9e7; border: 1px solid #eab0a9; color: #4d0f0a; line-height: 1.6; }
.qb-cta { margin: 22px 0 18px; padding: 16px 18px; border-left: 5px solid var(--eggplant); border-radius: 0 14px 14px 0; background: rgba(91, 42, 134, .07); }
.qb-cta p { margin: 0; font-family: var(--font-type); font-size: 1.08rem; line-height: 1.55; color: var(--ink); }

/* ═════════════════════════════════════════════════════════════
   YOUTUBE (2026-10-22.5): the owner's vertical videos, one per page
   A 9:16 frame with the video's thumbnail and a play button; YouTube's player loads only on press (engine.js
   ytHTML / playYouTube). The frame is the phone's own shape, so it sits centered, no wider than 360 px.
   ═════════════════════════════════════════════════════════════ */
.m-yt { margin-inline: auto; width: min(100%, 360px); }
.yt-frame {
  position: relative; aspect-ratio: 9 / 16; width: 100%; overflow: hidden; border-radius: 18px; background: #000;
  box-shadow: inset 0 0 0 2px #2a2a31, 0 18px 36px -12px rgba(0, 0, 0, .55), 0 0 0 6px rgba(182, 129, 239, .12);
}
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s ease, transform .4s ease; }
.yt-play:hover img, .yt-play:focus-visible img { opacity: 1; transform: scale(1.03); }
.yt-icon {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 6px; font-size: 1.9rem; color: #fff;
  background: linear-gradient(180deg, #ad7bef, #50247f); border: 1px solid #2b0f45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 0 #2b0f45, 0 20px 32px -12px rgba(91, 42, 134, .9);
}
.yt-play:focus-visible { outline: 3px solid var(--eggplant-glow); outline-offset: -3px; }
.m-yt figcaption a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .yt-play img { transition: none; } .yt-play:hover img { transform: none; } }

/* ═════════════════════════════════════════════════════════════
   COVER 3D (2026-10-22.6): six equal buttons on top, the case file as a 3D object in the middle, the closing line
   The folder (engine.js renderCover) is a back cover with the tab, five papers each at its own depth, and a front cover
   hinged at the bottom. It rests flat, leans at most 4° toward the pointer (--px/--py, set by coverTilt()), and its
   front cover lifts (--cf-lift) under the pointer or while Say yes has keyboard focus, showing the papers. The menu and
   Say yes are the site's one button, the eggplant glass .btn. The front cover's face keeps .cover-folder for the 3D
   eggplant's lamp and landing jolt, with the old paper styles of that class switched off here.
   It is drawn as a real manila folder on a dark desk under a lamp: grained card with worn edges and score lines, a
   die-cut tab with a typed label, a rubber stamp, a paper clip, a dog-ear, a coffee ring, contact and cast shadows.
   Everything that moves is a transform or an opacity on its own layer; the textures are drawn once and never repaint.
   ═════════════════════════════════════════════════════════════ */
@property --px { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --py { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cf-lift { syntax: "<number>"; inherits: true; initial-value: 0; }

body[data-view="cover"] main { max-width: 1200px; padding-top: 14px; }
.cover-3d { padding-top: 0; }

/* the menu: one tray, six buttons of one size (3 x 2 below 960 px, 6 across above) */
.cover-menu {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px;
  padding: 8px; border-radius: 22px;
  background: rgba(27, 15, 40, .9); border: 1px solid rgba(182, 129, 239, .22);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cover-menu { background: rgba(27, 15, 40, .62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
}
@media (min-width: 960px) { .cover-menu { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }
.cover-menu .cm {
  display: flex; align-items: center; text-decoration: none;
  width: 100%; height: 100%; min-height: 66px; padding: 8px 6px 10px; gap: 4px;
  flex-direction: column; justify-content: flex-start; padding-top: 12px; text-align: center;
  font-size: .8rem; line-height: 1.2; letter-spacing: 0; border-radius: 14px;
}
.cm-ic { font-size: 1.2rem; line-height: 1; }
.cm-t { overflow-wrap: normal; }
@media (min-width: 600px) {
  .cover-menu .cm { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; min-height: 60px; padding: 8px 12px 10px; font-size: .92rem; }
  .cm-ic { font-size: 1.35rem; }
}
@media (min-width: 960px) and (max-width: 1099.98px) { /* six across but narrow: the icon over the label, so no word breaks */
  .cover-menu .cm { flex-direction: column; justify-content: flex-start; text-align: center; gap: 4px; font-size: .82rem; padding: 10px 6px; }
}
@media (max-width: 359.98px) { .cover-menu { gap: 6px; padding: 6px; } .cover-menu .cm { font-size: .72rem; padding: 10px 4px 8px; } }
@supports (text-wrap: balance) { .cm-t { text-wrap: balance; } }

/* the stage and the folder */
.cf-stage { position: relative; display: grid; justify-items: center; padding: 30px 0 0; overflow-x: hidden; overflow-x: clip; }
.cf-stage::before { /* the desk lamp's pool: a warm core inside the room's purple light */
  content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 1000px; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255, 214, 160, .16), rgba(255, 204, 150, .05) 46%, transparent 68%),
    radial-gradient(closest-side, rgba(124, 63, 179, .42), rgba(91, 42, 134, .14) 58%, transparent);
  opacity: .85; transition: opacity .6s;
}
@media (min-width: 600px) { .cf-stage { padding-top: clamp(36px, 6vh, 60px); } }
/* The folder is real card: manila under a desk lamp beyond its far (top) edge, so warm light on the top edges and the
   middle of the cover, cool indigo shadows falling toward you. Its grain is static inline SVG noise (see "the card's
   grain" below); the coffee ring, the dog-ear and the clip are decorative <i>s (engine.js renderCover). */
.cf-folder {
  --tab-h: 30px; --strip: 25px; --depth: 22px; --lip: 9px; --egg: 164px; --rise-k: .55; --ear: 20px; --clip-w: 17px;
  position: relative; width: min(760px, 100%);
  perspective: 1500px; perspective-origin: 50% 58%;
  transition: --cf-lift .65s cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 600px) { .cf-folder { --tab-h: 38px; --strip: 36px; --depth: 26px; --lip: 12px; --egg: 204px; --rise-k: 1; --ear: 28px; --clip-w: 23px; } }
@media (hover: hover) { .cf-folder:hover { --cf-lift: 1; } }
.cf-folder:has(.btn:focus-visible) { --cf-lift: 1; }
/* on the desk: a dried coffee ring half under the folder (wide screens only), and the lamp's soft cast shadow, which
   slides as the folder leans. The tight contact shadow is the back cover's own, so it stays with the folder. */
.cf-ring { display: none; }
@media (min-width: 900px) {
  .cf-ring {
    display: block; position: absolute; left: -104px; top: 44%; width: 176px; height: 176px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='w' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3Cg filter='url(%23w)' fill='none' stroke='rgb(214,170,120)'%3E%3Ccircle cx='100' cy='100' r='76' stroke-width='12' stroke-opacity='.035'/%3E%3Ccircle cx='100' cy='100' r='81' stroke-width='3.4' stroke-opacity='.11'/%3E%3Ccircle cx='100' cy='100' r='82.5' stroke-width='1.2' stroke-opacity='.12'/%3E%3Cpath d='M30 70A76 76 0 0 1 140 34' transform='translate(10 15)' stroke-width='2.4' stroke-opacity='.07'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-24deg);
  }
}
.cf-shadow {
  position: absolute; left: 1.5%; right: 1.5%; top: calc(var(--tab-h) + 4%); bottom: calc(-1 * var(--lip)); pointer-events: none;
  border-radius: 28px;
  box-shadow: 0 16px 26px rgba(4, 2, 14, .82), 0 40px 80px -4px rgba(10, 4, 32, .72);
  transform: translateX(calc(var(--px) * -14px)) scaleX(calc(1 + var(--cf-lift) * .05)); will-change: transform;
  animation: cf-shadow-in 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
/* keep these two free of overflow, filter and opacity: any of them would flatten the 3D */
.cf-float { position: relative; transform-style: preserve-3d; animation: cf-drop 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.cf-rig {
  position: relative; transform-style: preserve-3d;
  padding-top: calc(var(--tab-h) + var(--strip));
  transform: rotateX(calc(var(--py) * -4deg)) rotateY(calc(var(--px) * 4deg));
}
.cf-back { /* lies on the desk (z 0), so its outer shadow is the contact shadow and ambient occlusion */
  position: absolute; inset: var(--tab-h) 0 calc(-1 * var(--lip));
  border-radius: 3px 5px 6px 6px;
  background: linear-gradient(180deg, #ecd9a8 0, #e2ca96 48px, #d3b880 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 236, .75), inset 0 0 0 1px rgba(122, 88, 38, .2), inset 0 0 18px rgba(110, 78, 30, .14),
    0 0 0 .5px rgba(36, 22, 8, .6), 0 1px 2px rgba(4, 2, 12, .75), 0 4px 10px rgba(4, 2, 12, .5);
}
.cf-back::after { /* the fold's lip under the front cover: a full folder's rounded spine, with a score line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lip) + 6px); border-radius: 0 0 6px 6px;
  background:
    linear-gradient(180deg, rgba(48, 30, 10, .5), rgba(48, 30, 10, 0) 10px),
    linear-gradient(180deg, transparent 60%, rgba(100, 70, 28, .4) 60% calc(60% + 1px), rgba(255, 244, 212, .4) calc(60% + 1px) calc(60% + 2px), transparent calc(60% + 2px)),
    linear-gradient(180deg, #ae925c 0%, #d6bc86 46%, #c6aa72 78%, #977c48 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 244, 212, .28), inset 1px 0 0 rgba(255, 244, 212, .14), inset -1px 0 0 rgba(60, 40, 15, .25);
}
.cf-tab { /* die-cut from the back cover: rounded top corners, concave shoulders, a typed label stuck on */
  position: absolute; left: 5%; bottom: calc(100% - 2px); margin: 0;
  min-height: calc(var(--tab-h) + 2px); display: flex; align-items: center; padding: 3px 9px 1px;
  border-radius: 9px 9px 0 0;
  background-color: #ecd9a8;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 236, .85), inset 0 8px 10px -8px rgba(255, 251, 236, .55), inset 1px 0 0 rgba(255, 251, 236, .35), inset -1px 0 0 rgba(122, 88, 38, .22),
    0 -.5px 0 rgba(36, 22, 8, .5), 0 -2px 4px -1px rgba(4, 2, 12, .45);
  font: 400 13px/1 var(--font-type); letter-spacing: .08em; text-transform: uppercase; color: #2a1f33; white-space: nowrap;
}
.cf-tab::before, .cf-tab::after { content: ""; position: absolute; bottom: 2px; width: 9px; height: 9px; pointer-events: none; }
.cf-tab::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 8.5px, #ecd9a8 9px); }
.cf-tab::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 8.5px, #ecd9a8 9px); }
.cf-label {
  display: block; padding: 5px 9px 3px; border-radius: 2px;
  background: linear-gradient(var(--eggplant-2) 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(180deg, #fffdf6, #f2ecdc);
  box-shadow: 0 0 0 .5px rgba(84, 62, 30, .32), 0 1px 1.5px rgba(70, 48, 16, .35), inset 0 -1px 0 rgba(120, 96, 56, .12);
  transform: rotate(-.8deg);
}
@media (min-width: 600px) { .cf-tab { font-size: 15px; padding-inline: 12px; } .cf-label { padding: 6px 13px 4px; } }
.cf-papers { position: absolute; inset: calc(var(--tab-h) + 8px) 0 10px; transform-style: preserve-3d; pointer-events: none; }
.cf-paper {
  position: absolute; top: var(--t, 0px); bottom: 0; left: var(--pl, 4%); right: var(--pr, 4%);
  border-radius: 2px 2px 1px 1px; background-color: #fbf8f1;
  background-image: repeating-linear-gradient(180deg, transparent 0 9px, rgba(36, 21, 47, .2) 9px 11px);
  background-size: calc(100% - 32px) 100%; background-position: 16px 5px; background-repeat: no-repeat;
  box-shadow: /* its top edge catches the lamp */
    inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(110, 90, 60, .22), 0 -1px 0 rgba(0, 0, 0, .05), 0 -8px 16px -10px rgba(20, 8, 30, .5);
  transform: translate3d(0, calc(var(--cf-lift) * var(--rise, -8px) * var(--rise-k)), var(--z, 4px)) rotate(var(--rot, 0deg));
}
.cf-paper:nth-child(1) { /* the bottom of the pile: a ream's worth of edges, not quite squared */
  --z: 3px; --pl: 2.5%; --pr: 2.5%; --t: 7px; --rise: -4px; background-color: #eee5d0;
  box-shadow:
    inset 0 1px 0 #fffaf0, 0 -2px 0 -1px #faf5ea, 0 -3px 0 -1px #d6caae, 2px -5px 0 -2px #f6f0e2, 2px -6px 0 -2px #cfc2a5,
    -3px -8px 0 -3px #f3ecdc, -3px -9px 0 -3px #c9bb9d, 0 -8px 16px -8px rgba(20, 8, 30, .45);
}
.cf-paper:nth-child(2) { --z: 7px; --pl: 7%; --pr: 45%; --t: 3px; --rise: -8px; --rot: -.7deg; }
.cf-paper:nth-child(3) { --z: 11px; --pl: 41%; --pr: 6%; --t: 0px; --rise: -16px; --rot: .9deg; background-color: #f7e9e6; }
.cf-paper:nth-child(4) { /* a redaction bar */
  --z: 15px; --pl: 48%; --pr: 13%; --t: -5px; --rise: -28px; --rot: -1.8deg;
  background-image: linear-gradient(#17101d 0 0), repeating-linear-gradient(180deg, transparent 0 9px, rgba(36, 21, 47, .2) 9px 11px);
  background-size: 44% 8px, calc(100% - 32px) 100%; background-position: 40% 14px, 16px 5px;
}
.cf-paper:nth-child(5) { /* a green form slip */
  --z: 19px; --pl: 66%; --pr: 3%; --t: -11px; --rise: -36px; --rot: 3deg; background-color: #e4eedc;
  background-image: linear-gradient(#3f7a3a 0 0), repeating-linear-gradient(180deg, transparent 0 9px, rgba(36, 60, 30, .22) 9px 11px);
  background-size: 100% 5px, calc(100% - 28px) 100%; background-position: 0 0, 14px 10px;
}
.cf-front { /* manila card: the lamp's warm pool on it, darker handled edges, thumb grime where it opens, a cut edge */
  position: relative; border-radius: 3px 4px 5px 5px; color: #24152f;
  background:
    radial-gradient(70px 150px at 100% 56%, rgba(118, 82, 32, .14), transparent),
    radial-gradient(60px 44px at 0 100%, rgba(118, 82, 32, .14), transparent),
    radial-gradient(120% 92% at 48% 16%, rgba(255, 249, 228, .55), rgba(255, 249, 228, 0) 60%),
    radial-gradient(140% 115% at 50% 30%, transparent 48%, rgba(84, 56, 24, .28)),
    linear-gradient(180deg, #eedcab 0%, #e6cf9b 55%, #dbc18b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 238, .9), inset 0 0 0 1px rgba(128, 94, 42, .22), inset 0 0 14px rgba(128, 94, 42, .16),
    inset 0 -18px 24px -20px rgba(54, 34, 84, .28),
    0 1px 0 rgba(96, 70, 30, .6), .5px 0 0 rgba(96, 70, 30, .35), 0 -3px 12px -8px rgba(30, 12, 40, .5);
  transform-origin: 50% 100%;
  transform: translateZ(var(--depth)) rotateX(calc(var(--cf-lift) * -11deg));
}
.cf-front::before { /* the expansion scores along the fold */
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 8px; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(104, 74, 30, .26) 0 1px, rgba(255, 250, 232, .55) 1px 2px) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(104, 74, 30, .22) 0 1px, rgba(255, 250, 232, .5) 1px 2px) 0 100% / 100% 2px no-repeat;
}
.cf-front::after { /* its shadow on the papers as it lifts: one fixed shadow, faded in on its own layer (no repaint) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 -21px 38px -8px rgba(30, 12, 40, .5);
  opacity: var(--cf-lift); will-change: opacity;
}
.cf-glare { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* the card's grain: fine specks and short fibres (a 260 px tile) over a soft mottle (640 px), inline SVG noise that is
   drawn once. Written out here, never through a custom property: a url() reached through var() is re-made on every
   style change, and --px/--py change each frame the folder leans, which would repaint all of it. */
.cf-glare, .cf-back::before, .cf-tab {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .07 .62 0 0 0 -.3'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .9 -.66 0 0 0 .3'/%3E%3C/filter%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='.04 .22' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .1 -3.4 0 0 0 .22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .12 .26 0 0 0 -.108'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 260px, 640px;
}
.cf-back::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.cf-glare > i { /* the lamp's sheen on the card, moved (not repainted) as the folder leans */
  position: absolute; inset: -50%;
  background: radial-gradient(circle clamp(200px, 40vw, 320px) at 50% 36%, rgba(255, 246, 222, .38), transparent);
  transform: translate(calc(var(--px) * 22.5%), calc(var(--py) * 17.5%)); will-change: transform;
}
.cf-ear { /* a dog-eared corner: the folder's back in the flap's shade, and the flap folded over */
  position: absolute; top: 0; right: 0; width: var(--ear); height: var(--ear); pointer-events: none;
  border-top-right-radius: 4px; background: linear-gradient(225deg, #cbb07a 0, #a98e5a 49.5%, transparent 50%);
}
.cf-ear::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(45deg, #dcc38c 0, #ecd8a6 36%, #f7e9c2 47%, #fff7df 49.6%, transparent 50%);
  filter: drop-shadow(-1px 1.5px 1.2px rgba(70, 46, 14, .4));
}
.cf-clip { /* a steel paper clip over the cover's top edge */
  position: absolute; left: 64%; top: calc(var(--clip-w) * -1.2); width: var(--clip-w); height: calc(var(--clip-w) * 2.4); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 72'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236f747c'/%3E%3Cstop offset='.35' stop-color='%23eef1f4'/%3E%3Cstop offset='.6' stop-color='%23a9aeb6'/%3E%3Cstop offset='1' stop-color='%235d626a'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M10 24V55a4 4 0 0 0 8 0V11a6 6 0 0 0-12 0v47a8 8 0 0 0 16 0V20' fill='none' stroke='rgba(40,24,8,.42)' stroke-width='2.4' stroke-linecap='round' transform='translate(2.2 2.6)' filter='url(%23b)'/%3E%3Cpath d='M10 24V55a4 4 0 0 0 8 0V11a6 6 0 0 0-12 0v47a8 8 0 0 0 16 0V20' fill='none' stroke='%23596069' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 24V55a4 4 0 0 0 8 0V11a6 6 0 0 0-12 0v47a8 8 0 0 0 16 0V20' fill='none' stroke='url(%23s)' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M10 24V55a4 4 0 0 0 8 0V11a6 6 0 0 0-12 0v47a8 8 0 0 0 16 0V20' fill='none' stroke='rgba(255,255,255,.75)' stroke-width='.45' stroke-linecap='round' transform='translate(-.45 -.3)'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-5deg);
}
.cover-3d .cover-folder {
  position: relative; display: grid; justify-items: center; text-align: center;
  margin: 0; padding: 24px 18px 28px; border-radius: 0; background: none; box-shadow: none; animation: none;
}
@media (min-width: 600px) { .cover-3d .cover-folder { padding: 34px 48px 40px; } }
.cover-3d .stamp { /* rubber-stamped: uneven ink (a static mask), and a faint second strike where the stamp rocked */
  top: 18px; left: 16px; right: auto; margin: 0; padding: 8px 11px 5px;
  border: 1.5px solid; border-radius: 5px; color: #ad231c;
  font: 400 14px/1 var(--font-type); letter-spacing: .16em; opacity: .9; mix-blend-mode: normal;
  text-shadow: 1.2px .8px 0 rgba(173, 35, 28, .3), 0 0 .6px rgba(173, 35, 28, .55);
  box-shadow: inset 1.2px .8px 0 rgba(173, 35, 28, .22);
  transform: rotate(-9deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='i' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.25'/%3E%3C/filter%3E%3Cfilter id='j' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.6 1.75'/%3E%3C/filter%3E%3Cmask id='k'%3E%3Crect width='100%25' height='100%25' fill='%23fff' filter='url(%23j)'/%3E%3C/mask%3E%3Crect width='100%25' height='100%25' filter='url(%23i)' mask='url(%23k)'/%3E%3C/svg%3E") 0 0 / 150px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='i' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.25'/%3E%3C/filter%3E%3Cfilter id='j' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.6 1.75'/%3E%3C/filter%3E%3Cmask id='k'%3E%3Crect width='100%25' height='100%25' fill='%23fff' filter='url(%23j)'/%3E%3C/mask%3E%3Crect width='100%25' height='100%25' filter='url(%23i)' mask='url(%23k)'/%3E%3C/svg%3E") 0 0 / 150px;
}
.cover-3d .stamp::before { content: ""; position: absolute; inset: 2px; border: 2.5px solid; border-radius: 3px; box-shadow: 1.2px .8px 0 -.5px rgba(173, 35, 28, .26); }
@media (min-width: 600px) {
  .cover-3d .stamp { top: 30px; left: 34px; font-size: 21px; padding: 11px 16px 8px; border-width: 2px; }
  .cover-3d .stamp::before { inset: 2.5px; border-width: 3px; }
}
.cf-egg { position: relative; width: var(--egg); height: var(--egg); margin: 30px 0 4px; display: grid; place-items: center; }
@media (min-width: 600px) { .cf-egg { margin-top: 8px; } }
.cf-egg::before { /* a blind-debossed seal in the card, which the eggplant hovers over */
  content: ""; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(124, 63, 179, .16), rgba(124, 63, 179, .05) 58%, transparent 71%);
  box-shadow: inset 0 3px 7px rgba(92, 62, 22, .24), inset 0 -1px 1px rgba(255, 250, 230, .4), 0 1px 0 rgba(255, 250, 230, .6), 0 -1px 0 rgba(110, 80, 34, .14);
}
.cover-3d .cover-emoji { --egg-slot: var(--egg); font-size: calc(var(--egg) * .58); margin: 0; }
.cover-3d h1 {
  margin: 8px 0 0; color: #24152f; text-transform: none;
  font: 800 clamp(2.3rem, 1rem + 4.2vw, 3.6rem)/1.02 var(--font-body); letter-spacing: -.035em;
  text-shadow: 0 1px 0 rgba(255, 248, 226, .55);
}
.cover-3d .tagline {
  margin: 14px auto 0; max-width: 33ch; color: #45344f;
  font-size: clamp(1rem, .93rem + .35vw, 1.18rem); font-weight: 400; line-height: 1.5;
}
.tagline-turn { color: #24152f; font-weight: 700; white-space: nowrap; }
@supports (text-wrap: balance) { .cover-3d h1, .cover-3d .tagline { text-wrap: balance; } }
.cover-3d .cover-actions { margin: 22px 0 0; }
.cover-3d .cover-listen { text-decoration: none; } /* the second button: Listen to Recordings, to the Museum */
@media (max-width: 599.98px) { /* on a phone the two stack, the same width */
  .cover-3d .cover-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .cover-3d .cover-actions .btn { justify-content: center; text-align: center; }
}
@media (min-width: 600px) { .cover-3d .cover-actions { margin-top: 26px; } }
.cover-3d .found { margin-top: 12px; }
@media (hover: hover) { .cf-stage:has(.cf-folder:hover)::before { opacity: 1; } }

/* short screens: the case file and Say yes stay on the first screen (laptops 720-800 px high; phones up to 760) */
@media (min-width: 600px) and (max-height: 800px) {
  .cf-folder { --egg: clamp(120px, 22vh, 204px); }
  .cf-stage { padding-top: 20px; }
  .cover-3d .cover-folder { padding: 22px 40px 26px; }
  .cover-3d h1 { font-size: clamp(2rem, 6.5vh, 3.6rem); }
}
/* phones: a compact tray and folder, so Say yes ends above Quick exit's corner (it floats at the bottom right) */
@media (max-width: 599.98px) {
  .cover-menu { gap: 6px; padding: 6px; border-radius: 18px; }
  .cover-menu .cm { min-height: 0; padding: 9px 4px 8px; gap: 3px; }
  .cm-ic { font-size: 1.05rem; }
  .cf-stage { padding-top: 18px; }
  .cf-folder { --egg: 136px; }
  .cover-3d .cover-folder { padding: 14px 16px 22px; }
  .cf-egg { margin-top: 18px; }
  .cover-3d .cover-actions { margin-top: 18px; }
}
@media (max-width: 599.98px) and (max-height: 760px) {
  .cf-folder { --egg: 96px; --tab-h: 26px; --strip: 20px; }
  .cover-3d .cover-folder { padding: 8px 14px 18px; }
  .cf-egg { margin-top: 10px; }
  .cover-3d h1 { font-size: 2rem; }
  .cover-3d .tagline { margin-top: 10px; font-size: .95rem; }
  .cover-3d .cover-actions { margin-top: 14px; }
  .cf-stage { padding-top: 12px; }
  .cf-tab { font-size: 12px; }
  .cf-label { padding: 4px 8px 2px; }
}

/* very short phones (an SE-size 320 x 568): one-word tiles, a smaller egg and title, so Open the Files ends above
   Quick exit */
.cm-s { display: none; }
@media (max-width: 599.98px) and (max-height: 620px) {
  .cover-menu .cm { padding: 7px 4px 6px; gap: 2px; }
  .cover-menu .cm-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cover-menu .cm-s { display: block; font-size: .8rem; }
  .cf-folder { --egg: 72px; }
  .cover-3d h1 { font-size: 1.8rem; }
  .cover-3d .tagline { margin-top: 6px; }
  .cover-3d .cover-actions { margin-top: 10px; }
}

/* the closing line: its last word lands outside the crop marks */
.cover-hook { position: relative; text-align: center; padding: clamp(96px, 18vh, 170px) 0 clamp(40px, 7vh, 88px); overflow-x: hidden; overflow-x: clip; }
.cover-hook-line { margin: 0 auto; max-width: 1120px; color: var(--paper); font: 800 clamp(2.3rem, 1rem + 4.6vw, 5.2rem)/1.02 var(--font-body); letter-spacing: -.038em; }
.cover-hook-frame { position: relative; display: inline-block; max-width: 100%; padding: .16em .26em .2em; text-align: left; vertical-align: baseline; }
@supports (text-wrap: balance) { .cover-hook-frame { text-wrap: balance; } }
.cover-hook-frame::before { /* crop marks */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --m: .42em; --w: 3px; --k: var(--eggplant-glow);
  background:
    linear-gradient(var(--k) 0 0) left top / var(--m) var(--w), linear-gradient(var(--k) 0 0) left top / var(--w) var(--m),
    linear-gradient(var(--k) 0 0) right top / var(--m) var(--w), linear-gradient(var(--k) 0 0) right top / var(--w) var(--m),
    linear-gradient(var(--k) 0 0) left bottom / var(--m) var(--w), linear-gradient(var(--k) 0 0) left bottom / var(--w) var(--m),
    linear-gradient(var(--k) 0 0) right bottom / var(--m) var(--w), linear-gradient(var(--k) 0 0) right bottom / var(--w) var(--m);
  background-repeat: no-repeat;
}
.cover-hook-out { display: inline-block; margin-left: .12em; color: var(--eggplant-glow); transform: rotate(-7deg) translateY(.04em); transform-origin: 0 100%; }
@media (max-width: 599px) {
  .cover-hook-out { display: block; width: fit-content; margin: .06em .2em 0 auto; transform: rotate(-6deg); transform-origin: 100% 100%; }
}
.cover-hook-sub {
  display: inline-flex; align-items: center; gap: 12px; margin: clamp(28px, 4vw, 44px) auto 0;
  font-size: clamp(1rem, .9rem + .45vw, 1.28rem); font-weight: 500; line-height: 1.35; color: #c9bcd9;
}
.cover-hook-up {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(182, 129, 239, .55); color: var(--eggplant-glow);
}
.cover-hook-up svg { width: 14px; height: 14px; }

/* the cover keeps the help line under the closing line, and drops the version line */
body[data-view="cover"] .site-foot .build { display: none; }

/* Say yes: the case file unfolds into the first page (engine.js openTheFile; skipped under reduced motion) */
@supports (view-transition-name: none) {
  html[data-vt] .cf-folder, html[data-vt] #app > .dossier { view-transition-name: case-file; }
  ::view-transition-group(case-file) { animation-duration: .75s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  html[data-vt="open"]::view-transition-old(case-file) { animation: cf-vt-out .3s ease-in both; }
  html[data-vt="open"]::view-transition-new(case-file) { animation: cf-vt-unfold .75s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 0; }
}

/* the crop marks close in as the line scrolls into view, where scroll-driven animation exists */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cover-hook { view-timeline: --cover-hook block; }
    .cover-hook-frame::before { animation: cf-crop linear both; animation-timeline: --cover-hook; animation-range: entry 0% cover 42%; }
    .cover-hook-line { animation: cf-land linear both; animation-timeline: --cover-hook; animation-range: entry 0% cover 40%; }
  }
}
/* phones (no hover): the front cover peeks open once after the folder lands, to show it opens */
@media (hover: none) and (prefers-reduced-motion: no-preference) { .cf-folder { animation: cf-peek 2.4s ease-in-out 1.4s 1 backwards; } }

@keyframes cf-drop { from { transform: translateY(46px) rotateX(26deg) scale(.94); opacity: 0; } 40% { opacity: 1; } }
@keyframes cf-shadow-in { from, 25% { opacity: 0; } }
@keyframes cf-peek { 0%, 100% { --cf-lift: 0; } 40%, 60% { --cf-lift: .9; } }
@keyframes cf-crop { from { transform: scale(1.08); opacity: .35; } }
@keyframes cf-land { from { transform: translateY(28px); } }
@keyframes cf-vt-out { to { opacity: 0; } }
@keyframes cf-vt-unfold { from { opacity: 0; transform: perspective(1400px) rotateX(-70deg); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cf-folder, .cf-float, .cf-shadow, .cf-paper, .cf-front, .cf-stage::before, .cover-hook-line, .cover-hook-frame::before { animation: none !important; transition: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   ONE BUTTON (2026-10-22.6): every button on the site is the same eggplant-glass tile
   Same 14 px corners, bold white words, glossy top; it rises under the pointer and sinks when pressed. A button that
   marks a state (an answer you picked, the tab you're on) is the same tile pushed in: darker, with a light ring. The
   lab gets the same rules in tools/lab-css/lab.src.css. Quick exit keeps its safety red in the same shape. Not
   buttons, so left as they are: the cassette deck's keys, the voicemail's tappable words, drop-down headers, the
   eggplant's own hit areas.
   ═════════════════════════════════════════════════════════════ */
.btn, .btn.primary, .choice, .qb, .found a, .fine-print > a[href^="#/guide/"], .tools button, .dlg-close, .quick-exit, .cover-menu .cm { border-radius: 14px; }
.choice .label { font-weight: 600; }
/* a guide link set as a button reads white on the glass (a rule for plain links in running text made it purple) */
:is(.dossier, .cover-folder, dialog, .guide-page, .ending-panel) .fine-print > a[href^="#/guide/"]:not([class]),
:is(.dossier, .cover-folder, dialog, .guide-page, .ending-panel) .found a:not([class]),
.fine-print > a[href^="#/guide/"], .found a { color: #fff; }
/* the HUD's tools: the full glass, not a tint of it */
.tools button {
  color: #fff; font-weight: 700; border: 1px solid #2b0f45; text-shadow: 0 1px 1px rgba(20, 4, 36, .55);
  background: linear-gradient(180deg, #ad7bef 0%, #8143c8 38%, #6430a3 68%, #50247f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -5px 10px rgba(28, 5, 48, .45), 0 4px 0 #1e0a33, 0 12px 20px -10px rgba(124, 63, 179, .85);
}
.tools button:hover, .tools button:focus-visible {
  background: linear-gradient(180deg, #ba8ff4 0%, #8d4fd3 38%, #6d36b0 68%, #57288a 100%); border-color: #2b0f45;
}
.tools button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 8px rgba(28, 5, 48, .5), 0 1px 0 #1e0a33; }
.tools button.has-new { border-color: #d9c4f6; }
.tools button::before { opacity: .3; }
/* the main button is the same glass, only bigger and ringed; the dialogs' close button too */
.btn.primary, .dlg-close { background: linear-gradient(180deg, #ad7bef 0%, #8143c8 38%, #6430a3 68%, #50247f 100%); }
.btn.primary:hover, .btn.primary:focus-visible, .dlg-close:hover, .dlg-close:focus-visible { background: linear-gradient(180deg, #ba8ff4 0%, #8d4fd3 38%, #6d36b0 68%, #57288a 100%); }
/* the song player's buttons: the same glass; the one playing is the pushed-in tile */
.tc-play, .tc-row {
  color: #fff; font-weight: 700; border: 1px solid #2b0f45; border-radius: 14px; text-shadow: 0 1px 1px rgba(20, 4, 36, .55);
  background: linear-gradient(180deg, #ad7bef 0%, #8143c8 38%, #6430a3 68%, #50247f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -5px 10px rgba(28, 5, 48, .45), 0 4px 0 #1e0a33, 0 12px 20px -10px rgba(124, 63, 179, .85);
}
.tc-play:hover:not(:disabled), .tc-row:hover:not(:disabled) { background: linear-gradient(180deg, #ba8ff4 0%, #8d4fd3 38%, #6d36b0 68%, #57288a 100%); }
.tc-play small { color: #ecdffd; }
.tc-play.playing, .tc-row.playing {
  background: linear-gradient(180deg, #4a1f7a, #2b0f45); border-color: #1a0730; transform: translateY(3px);
  box-shadow: inset 0 3px 8px rgba(10, 0, 20, .6), 0 0 0 3px #d9c4f6, 0 1px 0 #1a0730;
}
.nowrap { white-space: nowrap; }

/* ═════════════════════════════════════════════════════════════
   TOP BAR (2026-10-22.9): pinned on every page
   ← Back, the eggplant (home), the file's six sections, and on the story's pages its counters and tools (engine.js
   topbar). The six show as icons from 900 px (1100 px on the story's pages) and with short labels from 1000 px where
   there are no tools (1680 px where there are); below that a Menu button opens them as six large tiles. The section you're on is the pushed-in button. On the
   cover the bar waits off screen and slides in once the cover's own menu scrolls away.
   ═════════════════════════════════════════════════════════════ */
:root { --bar-h: 61px; } /* the bar's height at every width (the lab's sticky shelf headings sit under it) */
html { scroll-padding-top: calc(var(--bar-h) + 15px); } /* a jump lands below the pinned bar */
#hud { flex-wrap: nowrap; gap: 8px; padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); }
.tb-back, .tb-menu { flex: none; min-height: 44px; padding: 6px 14px 8px; font-size: .95rem; gap: 2px; }
.brand { flex: none; }
.topnav { display: none; flex: 1 1 auto; min-width: 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.topnav .tn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px 8px; font-size: .85rem; line-height: 1.1; text-decoration: none; white-space: nowrap; }
.tn-ic { font-size: 1.1rem; line-height: 1; }
.tn-t { display: none; }
.tb-menu { display: inline-flex; margin-left: auto; }
.tb-menu[aria-expanded="true"], .topnav .tn[aria-current="page"], .topmenu .cm[aria-current="page"] {
  background: linear-gradient(180deg, #4a1f7a, #2b0f45); border-color: #1a0730; transform: translateY(2px);
  box-shadow: inset 0 3px 8px rgba(10, 0, 20, .6), 0 0 0 3px #d9c4f6, 0 1px 0 #1a0730;
}
.topmenu {
  position: absolute; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); top: calc(100% + 6px); z-index: 30;
  max-height: calc(100vh - var(--bar-h) - 16px); max-height: calc(100dvh - var(--bar-h) - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: 18px; background: rgba(27, 15, 40, .97); border: 1px solid rgba(182, 129, 239, .3);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .95);
}
.topmenu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.topmenu .cm {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 56px; padding: 10px 12px;
  text-align: left; text-decoration: none; font-size: .95rem; line-height: 1.2; border-radius: 14px;
}
.topmenu .cm-ic { font-size: 1.3rem; }
.topmenu .cm, .topmenu .cm-t { white-space: normal; min-width: 0; }
@media (max-width: 380px) { /* icon over the name, so the longest word fits a 320 px tile */
  .topmenu .cm { flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: 8px 6px; font-size: .85rem; }
}
@media (min-width: 900px) {
  .topnav { display: grid; }
  .tb-menu, .topmenu { display: none; }
  #hud .brand span { display: none; }
}
@media (min-width: 1680px) { .tn-t { display: inline; } }
/* story pages carry the counters and tools too: there the six sections wait in the Menu until 1100 px, and their
   names until 1680 px, so no icon is ever squeezed */
@media (min-width: 900px) and (max-width: 1099.98px) {
  body[data-view="scene"] .topnav { display: none; }
  body[data-view="scene"] .tb-menu { display: inline-flex; }
  body[data-view="scene"] .topmenu:not([hidden]) { display: block; }
}
@media (min-width: 600px) { .topmenu { left: auto; width: min(560px, calc(100vw - 16px)); } }
@media (min-width: 1000px) { body:not([data-view="scene"]) .tn-t { display: inline; } }
@media (max-width: 599.98px) {
  .tb-back .tb-t, .tb-menu .tb-t { display: none; }
  .tb-back, .tb-menu { padding: 6px 12px 8px; min-width: 44px; justify-content: center; }
}
/* off the story's pages the counters and tools stay out of the bar */
body:not([data-view="scene"]) #hud .stats, body:not([data-view="scene"]) #hud .tools { display: none; }
/* the cover: the bar waits above the screen until the cover's own menu has scrolled away */
body[data-view="cover"] #hud { position: fixed; left: 0; right: 0; top: 0; transform: translateY(-110%); transition: transform .28s ease; }
body[data-view="cover"].bar-in #hud { transform: none; }
@media (prefers-reduced-motion: reduce) { body[data-view="cover"] #hud { transition: none; } }
/* phones: the bar keeps one row; scene audio and restart move into the Menu (story pages only) */
.topmenu-tools { display: none; gap: 8px; margin-top: 8px; }
.topmenu-tools .btn { flex: 1 1 0; min-height: 48px; font-size: .9rem; padding: 8px 10px; }
@media (max-width: 899.98px) {
  body[data-view="scene"] .topmenu-tools { display: flex; }
  body[data-view="scene"] #hud .tools #btn-sound, body[data-view="scene"] #hud .tools [data-action="restart"] { display: none; }
  #hud .tools { flex-wrap: nowrap; gap: 4px; }
  #hud .tools button { padding: 5px 8px; min-height: 44px; }
  #hud .stats { display: none; }
}
@media (max-width: 380px) { #hud { gap: 5px; } #hud .brand-egg { width: 1.4em; height: 1.4em; } }
/* The bar never scrolls sideways: the egg alone stands for home (Back and Menu carry the words), and under 900 px the
   story's counters are icon tiles with the count on a badge, so ←, the egg, ☰ and four counters fit 320 px. */
#hud .brand span { display: none; }
body[data-view="scene"] #hud .tb-menu { margin-left: 0; } /* after the counters, at the far right */
@media (max-width: 899.98px) {
  body[data-view="scene"] #hud .tools button { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; font-size: 1.1rem; }
  body[data-view="scene"] #hud .tools .count {
    position: absolute; right: -5px; bottom: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center; color: #2b0f45; background: #efe4ff;
    box-shadow: 0 0 0 2px rgba(14, 11, 26, .92);
  }
  body[data-view="scene"] #hud .tools .count .of { display: none; }
}
@media (max-width: 359.98px) {
  #hud { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  body[data-view="scene"] #hud .tools { gap: 3px; }
  body[data-view="scene"] #hud .tools button { width: 40px; min-width: 40px; }
}