/* Furnace – the deck's look (chosen 30 Sep 2026).
   Proof of Work is energy, so heat carries meaning: a stepped scale from
   ember to white-hot, where hotter always means more work. Warm coal black and
   cast-iron plates underneath. Flat colours and thick shapes only, so nothing
   smears in a compressed Meet share. */

:root {
  --coal: #140c08;      /* background */
  --iron: #22160f;      /* plates, cells */
  --iron-2: #2e1e15;    /* rivets, dividers */
  --edge: #0a0503;      /* plate bottom edge */

  --bone: #f6e7d3;      /* main text */
  --ash: #a88f78;       /* secondary text, labels */
  --ash-dim: #6e5847;   /* background detail */

  /* The heat scale, coolest to hottest. */
  --ember: #6e2210;
  --red: #c8391c;
  --flame: #f26a1b;
  --amber: #ffb23f;
  --white-hot: #fff4d6;

  /* Cold: work undone or refused (a tampered block, a stopped transaction).
     Never red: red is heat. */
  --cold: #23313b;
  --cold-2: #2e3f4b;
  --cold-text: #a7bccb;

  --steel: #8ea6b4;     /* bots and other machines */
  --alarm: #ff5a4a;     /* the deck itself has a problem: errors, lost connection. Never lesson content */

  --font-body: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--coal);
  color: var(--bone);
  font-family: var(--font-body);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* The heat strip: five steps of the scale, the signature under every title. */
.heat {
  display: flex;
}

.heat span { flex: 1; }
.heat span:nth-child(1) { background: var(--ember); }
.heat span:nth-child(2) { background: var(--red); }
.heat span:nth-child(3) { background: var(--flame); }
.heat span:nth-child(4) { background: var(--amber); }
.heat span:nth-child(5) { background: var(--white-hot); }

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