:root {
  --ink: #0f0e0c;
  --paper: #efe6d4;
  --dim: #8a8273;
  --hot: #ff5a1f;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Riso paper grain, so the page and the printed illustrations share one surface. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.frame {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: max(1.25rem, env(safe-area-inset-top)) clamp(1.25rem, 5vw, 4rem) max(1.25rem, env(safe-area-inset-bottom));
}

.meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.meta a { color: inherit; text-decoration: none; }
.meta a:hover { color: var(--paper); }

.stage {
  align-self: safe center;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}

.caret {
  display: inline-block;
  width: .06em;
  height: .78em;
  margin-left: .05em;
  background: var(--hot);
  vertical-align: -.04em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
h1 .caret { visibility: hidden; }
h1.done .caret { visibility: visible; }

.choice {
  appearance: none;
  text-decoration: none;
  border: 0;
  background: none;
  padding: .35rem 0;
  cursor: pointer;
  color: var(--paper);
  font: 400 clamp(1.05rem, 2.2vw, 1.35rem)/1 var(--mono);
  display: inline-flex;
  align-items: baseline;
  gap: .7rem;
}
.choice kbd {
  font: inherit;
  font-size: .7em;
  color: var(--dim);
  transition: color .2s;
}
.choice > span:not(.sr-only) {
  background: linear-gradient(var(--hot), var(--hot)) 0 100% / 0 2px no-repeat;
  padding-bottom: .2rem;
  transition: background-size .35s var(--ease), color .2s;
}
.choice:hover > span, .choice:focus-visible > span { background-size: 100% 2px; color: var(--hot); }
.choice:hover kbd, .choice:focus-visible kbd { color: var(--hot); }
.choice:focus-visible { outline: none; }

.bubble {
  position: absolute;
  z-index: 7;
  width: max-content;
  max-width: 14rem;
  padding: .55rem .75rem .5rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px var(--paper), 5px 5px 0 2px var(--hot);
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bubble[hidden] { display: none; }
.bubble .ask { margin: 0 0 .35rem; }
.bubble .row { display: flex; gap: 1.1rem; }
.bubble .choice { color: var(--ink); font-size: .8rem; padding: .2rem 0; }
.bubble .choice kbd { color: var(--dim); }
/* The tail is a staircase of three pixels; ink behind, paper on top. */
.bubble::before, .bubble::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -16px;
  width: 16px;
  height: 16px;
  background: var(--ink);
  clip-path: polygon(0 0, 5px 0, 5px 5px, 10px 5px, 10px 10px, 16px 10px, 16px 16px, 0 16px);
}
.bubble::after { right: -12px; top: 14px; width: 12px; height: 12px; background: var(--paper); clip-path: polygon(0 0, 4px 0, 4px 4px, 8px 4px, 8px 8px, 12px 8px, 12px 12px, 0 12px); }
.bubble.flip::before { right: auto; left: -16px; transform: scaleX(-1); }
.bubble.flip::after { right: auto; left: -12px; transform: scaleX(-1); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; text-align: center; opacity: 0; }
.ch.on { opacity: 1; }
.hush { visibility: hidden; }

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