:root {
  color: #d9d2c6;
  background: #0b0b0c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --H: 110px;
  --host-w: 396px;
  --host-h: 286px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0b0b0c; }
body { overflow-x: hidden; }
.stage { position: relative; width: 100vw; min-height: 100svh; }
.stage[data-scroll="1"] { min-height: 180svh; }

/* the host canvas: small, fixed, placed by JS every frame (translate3d, never rounded) */
.relic { position: fixed; left: 0; top: 0; width: var(--host-w); height: var(--host-h); pointer-events: none; will-change: transform; z-index: 2; }
.relic canvas { display: block; width: 100%; height: 100%; }

/* the content card: real copy, always readable, lit by the relic */
.card {
  position: absolute; left: 46%; top: 30%; width: min(34vw, 520px); z-index: 1;
  padding: calc(.36 * var(--H)) calc(.40 * var(--H));
  overflow: hidden; border-radius: 4px;
  background: rgba(255, 244, 226, calc(.02 + var(--projection, 0) * .04));
  border: 1px solid rgba(255, 200, 140, calc(.05 * var(--projection, 0)));
  --pool: 0; --pool-x: 22%; --pool-y: 28%; --pool-rx: 0px; --pool-ry: 0px; --reveal-r: 0px; --beam-angle: -6deg; --wash: 0;
}
.card__ink { position: relative; color: rgba(217, 210, 198, .62); }
.card__ink h2 { margin: 0 0 .7em; font-weight: 500; font-size: 1.05rem; letter-spacing: .02em; }
.card__ink p { margin: 0 0 .8em; font-size: .86rem; line-height: 1.55; }
.card__ink .colophon { margin: 1.1em 0 0; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.card__ink.card__ink-lit {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: inherit; color: #f1e8d6; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse calc(var(--reveal-r) * 1.6) var(--reveal-r) at var(--pool-x) var(--pool-y), #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse calc(var(--reveal-r) * 1.6) var(--reveal-r) at var(--pool-x) var(--pool-y), #000 60%, transparent 100%);
}
/* the light pool: a lamp on paper, keystoned along the beam, with a hot spot on the near side */
.card::before {
  content: ""; position: absolute; left: calc(var(--pool-x) - var(--pool-rx) * 2); top: calc(var(--pool-y) - var(--pool-ry) * 2);
  width: calc(var(--pool-rx) * 4); height: calc(var(--pool-ry) * 4); pointer-events: none; mix-blend-mode: screen;
  transform: rotate(var(--beam-angle));
  background: radial-gradient(ellipse 50% 50% at center, rgba(255, 214, 160, calc(.16 * var(--pool))) 0%, rgba(255, 214, 160, calc(.06 * var(--pool))) 45%, transparent 100%);
}
.card::after {
  content: ""; position: absolute; pointer-events: none; mix-blend-mode: screen;
  left: calc(var(--pool-x) - var(--pool-rx) * .42); top: calc(var(--pool-y) - var(--pool-ry) * .3);
  width: calc(var(--pool-rx) * .6); height: calc(var(--pool-ry) * .6); border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 220, 170, calc(.04 * var(--pool))) 0%, transparent 100%);
}
.card__wash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--wash); -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(.3 * var(--H))); mask-image: linear-gradient(90deg, transparent, #000 calc(.3 * var(--H)));
  background: linear-gradient(calc(90deg + var(--beam-angle)), rgba(255, 214, 160, .10) 0%, rgba(255, 214, 160, .03) 100%); }

.ask {
  position: absolute; left: 50%; top: calc(30% + 42svh); transform: translateX(-50%); width: min(520px, 72vw); z-index: 3;   /* top is rewritten by JS to sit under the card */
  display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid rgba(217, 210, 198, .28); padding: .4rem .2rem;
}
.ask input { flex: 1; background: transparent; border: 0; outline: 0; color: inherit; font: inherit; font-size: 1rem; letter-spacing: .01em; }
.ask input::placeholder { color: rgba(217, 210, 198, .42); }
.ask button { padding: .3rem .8rem; border-radius: 999px; border: 0; background: rgba(217, 210, 198, .12); color: inherit; font: inherit; font-size: .8rem; letter-spacing: .06em; cursor: pointer; }
.ask button:hover { background: rgba(217, 210, 198, .22); }
.ask[hidden] { display: none; }      /* the author rule above would otherwise beat the hidden attribute (hero mode) */

.status { position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%); margin: 0; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(217, 210, 198, .38); }
.status[data-level="ok"] { opacity: 0; }
.status[data-level="error"] { color: #e08a7a; opacity: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.diagnostics {
  position: fixed; left: 1rem; bottom: 1rem; width: min(380px, 90vw); max-height: 70vh; overflow: auto; padding: .75rem .9rem; border-radius: 6px; z-index: 9;
  background: rgba(20, 20, 22, .92); color: #cfc4b2; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.diagnostics pre { margin: 0 0 .6rem; white-space: pre-wrap; }
.state-controls { display: flex; flex-wrap: wrap; gap: .3rem; }
.state-controls button { padding: .25rem .45rem; border: 1px solid #5c554c; background: #2b2926; color: #d7cab8; font: inherit; cursor: pointer; border-radius: 3px; }
.state-controls button[aria-pressed="true"] { background: #6b5a3c; border-color: #a58a5a; }

/* r12 — the light on the paper is the beam continued: a soft cone from the landing, brightest where it arrives, fading along the throw */
.card { --lit: 1; --dust: 0; --reveal-y: 0px; --apex: calc(var(--pool-ry) / 0.344); --apex2: calc(var(--pool-ry) / 0.445);
  --ink-mask: linear-gradient(to bottom, #000 0, #000 calc(var(--reveal-y) - .3 * var(--H)), transparent calc(var(--reveal-y) + .1 * var(--H))), linear-gradient(calc(90deg + var(--beam-angle)), #000 0%, #000 40%, rgba(0, 0, 0, .78) 100%);
  --wedge-mask: conic-gradient(from calc(66deg + var(--beam-angle)) at calc(var(--pool-x) - var(--apex2)) var(--pool-y), transparent 0deg, #000 8deg, #000 40deg, transparent 48deg), radial-gradient(ellipse calc(var(--reveal-r) * 1.15) var(--reveal-r) at var(--pool-x) var(--pool-y), #000 50%, transparent 100%); }
.card__ink.card__ink-lit { opacity: var(--lit); }
.card--wedge::before {
  left: calc(var(--pool-x) - var(--apex)); top: calc(var(--pool-y) - var(--pool-ry) - var(--reveal-r) * 0.42);
  width: calc(var(--apex) + var(--reveal-r)); height: calc(var(--pool-ry) * 2 + var(--reveal-r) * 0.84);
  transform-origin: var(--apex) 50%; transform: rotate(var(--beam-angle));
  background: linear-gradient(90deg, transparent 0, rgba(255, 214, 160, calc(.06 * var(--pool))) calc(var(--apex) - var(--pool-ry) * 2.5), rgba(255, 214, 160, calc(.20 * var(--pool))) var(--apex), rgba(255, 214, 160, calc(.07 * var(--pool))) calc(var(--apex) + var(--reveal-r) * .45), transparent 100%);
  -webkit-mask-image: conic-gradient(from 71deg at 0 50%, transparent 0deg, #000 6deg, #000 32deg, transparent 38deg);
  mask-image: conic-gradient(from 71deg at 0 50%, transparent 0deg, #000 6deg, #000 32deg, transparent 38deg);
}
.card--wedge .card__ink.card__ink-lit { -webkit-mask-image: var(--ink-mask); mask-image: var(--ink-mask); -webkit-mask-composite: source-in; mask-composite: intersect; }
.card__throw { display: none; }
.card--wedge .card__throw { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: var(--wedge-mask); mask-image: var(--wedge-mask); -webkit-mask-composite: source-in; mask-composite: intersect; }
.card__dust { position: absolute; inset: -30%; pointer-events: none; opacity: calc(var(--pool) * var(--dust)); background-image: var(--dust-img); background-size: 96px 96px; will-change: transform; }