:root {
    --bg: #f6f6f3; --fg: #141414; --dim: #8a8a85; --rule: #d9d9d3;
    --bar: #2b2b29; --bar-fg: #ecece6; --accent: #5b7f68; --you: #5e7391;
  }
  :root[data-theme="dark"] {
    --bg: #0f0f0e; --fg: #e6e6e0; --dim: #7c7c76; --rule: #2a2a27;
    --bar: #2a3a30; --bar-fg: #cfd6cf; --accent: #8fae98; --you: #9aaac2;
  }
  /* Pages without the toggle (confirm, privacy, review) still follow the system setting. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0f0f0e; --fg: #e6e6e0; --dim: #7c7c76; --rule: #2a2a27;
      --bar: #2a3a30; --bar-fg: #cfd6cf; --accent: #8fae98; --you: #9aaac2;
    }
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    background: var(--bg); color: var(--fg);
    font: 14px/1.7 "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
    display: grid; grid-template-rows: 1fr auto auto auto auto; height: 100vh;
  }
  a { color: inherit; }
  .pane { overflow-y: auto; padding: 28px 40px 20px; }
  .top { display: flex; justify-content: space-between; align-items: flex-start; }
  .links a { margin-left: 14px; text-decoration: none; }
  .links a:hover { text-decoration: underline; }
  .cursor { display: inline-block; width: .6em; height: 1.1em; background: var(--fg); vertical-align: -3px; animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  pre { font: inherit; margin: 0 0 16px; white-space: pre; }
  .dim { color: var(--dim); }
  h1, h2 { font: inherit; font-weight: 700; margin: 26px 0 10px; }
  .col { max-width: 72ch; }
  .cta { display: inline-block; margin: 6px 18px 6px 0; font-weight: 700; cursor: pointer; text-decoration: none; }
  .cta:hover { text-decoration: underline; }
  .chat { border-top: 1px solid var(--rule); padding: 12px 40px; max-height: 50vh; overflow-y: auto; display: none; }
  .chat.open { display: block; }
  .chat div { white-space: pre-wrap; margin: 2px 0; }
  /* In the flow above the prompt, so a challenge never covers the chat. */
  #turnstile { padding: 0 40px; }
  .chat .who-ai { color: var(--accent); }
  .chat .who-you { color: var(--you); }
  .prompt { border-top: 1px solid var(--rule); padding: 10px 40px; display: flex; gap: 10px; align-items: center; }
  .prompt { transition: background .2s, box-shadow .2s; }
  .prompt span { color: var(--accent); white-space: nowrap; }
  .prompt.active { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); box-shadow: inset 0 2px 0 var(--accent); }
  .prompt.flash { animation: flash .6s ease-out 1; }
  @keyframes flash { 0% { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); } 100% { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); } }
  .status .win.on { background: var(--bar-fg); color: var(--bar); padding: 0 4px; }
  .prompt input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); font: inherit; }
  .status { background: var(--bar); color: var(--bar-fg); display: flex; justify-content: space-between; padding: 0 12px; font-size: 13px; }
  .status b { font-weight: 700; }
  .status .theme { cursor: pointer; }
  .legal { max-width: 72ch; padding: 28px 40px; }
  .legal h1 { margin-top: 0; }
  footer.page { padding: 0 40px 28px; color: var(--dim); }