:root {
  --ink: #1a1d21;
  --muted: #7a7f85;
  --steel: #4a4e54;
  --brown: #a9713a;
  --red: #d43a2a;
  --bg: #f0f0f0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  -webkit-font-smoothing: antialiased;
}
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 20px 120px;
}
.stack > * + * { margin-top: 10px; }
section { margin-top: 56px; }
h1 {
  font-size: 15px;
  font-weight: 700;
  margin: 8px 0 0;
  letter-spacing: 0.02em;
}
h2 {
  font-size: 11px;
  font-weight: 700;
  color: var(--brown);
  text-transform: lowercase;
  margin: 0 0 4px;
}
h2::before { content: "## "; color: var(--muted); }
.t9 { font-size: 13px; line-height: 1.65; margin: 0; }
.t8 { font-size: 11.5px; line-height: 1.6; margin: 0; }
.muted { color: var(--muted); }
.steel { color: var(--steel); font-weight: 700; }
a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--red); }
pre {
  white-space: pre-wrap;
  word-break: break-all;
  background: #e6e6e6;
  border-left: 2px solid var(--brown);
  padding: 12px 14px;
  overflow-x: auto;
}
pre.ca {
  border-left-color: var(--red);
  font-weight: 700;
  cursor: pointer;
  user-select: all;
}
pre.ca:hover { background: #dedede; }
canvas#chart {
  width: 100%;
  height: 180px;
  display: block;
  background: #e9e9e9;
  border-left: 2px solid var(--brown);
}
.tape { border-left: 2px solid var(--brown); padding: 10px 0 10px 14px; background: #e6e6e6; }
.row { padding: 1px 0; white-space: pre-wrap; word-break: break-all; }
.bust { color: var(--red); font-weight: 700; }
#verify-out { border-left: 2px solid var(--brown); padding: 10px 0 10px 14px; background: #e6e6e6; font-size: 11.5px; }
header img { display: block; image-rendering: pixelated; }
footer { margin-top: 72px; }
.ok { color: #2e7d32; }
.bad { color: var(--red); font-weight: 700; }