:root {
  --paper: #f6f4ef;
  --ink: #15171b;
  --soft: #555b66;
  --accent: #2f5bea;
  --line: #dcd8cf;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
body {
  font: 400 clamp(16px, 2.9vmin, 34px)/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.slide {
  position: fixed; inset: 0; padding: 9vh 9vw; display: none; flex-direction: column; justify-content: center; gap: .4em;
  --dr-accent: var(--accent);
}
.slide.is-live { display: flex; animation: enter .35s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(1.2vh); } }
h1 { font-size: 2.9em; line-height: 1.02; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 1.75em; line-height: 1.1; margin: 0 0 .35em; letter-spacing: -.01em; max-width: 26em; }
h3 { font-size: 1em; margin: 0 0 .3em; color: var(--accent); }
p { margin: .25em 0; max-width: 34em; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .55em; font-weight: 700; color: var(--accent); }
.lede { font-size: 1.15em; color: var(--soft); max-width: 26em; }
.note { color: var(--soft); font-size: .8em; }
.keys { list-style: none; padding: 0; margin: 1.2em 0 0; display: grid; gap: .35em; font-size: .75em; color: var(--soft); }
kbd {
  font: 600 .8em ui-monospace, SFMono-Regular, Menlo, monospace; padding: .08em .45em; border-radius: .3em;
  border: 1px solid var(--line); border-bottom-width: 3px; background: #fff; color: var(--ink);
}
code { font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; background: #ebe7de; padding: .05em .3em; border-radius: .25em; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4vw; margin-top: .6em; }
.cols > div { border-top: 3px solid var(--ink); padding-top: .6em; font-size: .85em; }
.poll h2 { max-width: 30em; }
.poll [data-ix-results] { font-size: .95em; max-width: 44em; }
.count {
  position: fixed; right: 2.2vw; bottom: 2vh; font: 600 .5em ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--soft); letter-spacing: .05em;
}

/* The giant X: above ALL content, including deck-remote's own overlays. */
#bigx { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; display: none; }
#bigx.on { display: block; animation: pop .18s ease-out; }
#bigx svg { width: 100%; height: 100%; }
#bigx path { stroke: #e11d48; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; stroke-width: 7vmin; opacity: .92; }
@keyframes pop { from { transform: scale(1.06); opacity: 0; } }

@media (max-width: 700px) {
  .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .slide.is-live, #bigx.on { animation: none; }
}

/* Controls driven from the phone (choice / number / text / momentary). */
.demo-note { position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%); max-width: 80vw; padding: 12px 20px;
  border-radius: 14px; background: rgba(15, 17, 21, .9); color: #fff; font-size: clamp(16px, 2.4vmin, 24px); z-index: 60; }
.demo-note[hidden] { display: none; }
body.flash { box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, .22); }