/* Spelled Black — spelled, in dark mode: black paper, white ink, one hot red. One column, read top to bottom. */
:root {
  --bw: 4px;
  --hot: #ff4c4c;
  --font-ui: 'Archivo Black', 'Arial Black', sans-serif;
  --font-meta: Inter, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #000; color: #fff; -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: var(--font-ui); }
::selection { background: var(--hot); color: #fff; }

.meta { font-family: var(--font-meta); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.muted { color: #888; }
.hot { color: var(--hot); }

main { max-width: 48rem; margin: 0 auto; padding: 3rem 1.25rem 9rem; }
@media (min-width: 640px) { main { padding: 4rem 2.5rem 9rem; } }
.mast { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.wordmark { font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.04em; }

/* the code: a white rule on top, no box */
pre[class*="language-"] {
  margin: 0 0 5rem;
  padding: 1.5rem 0 1.5rem 3.6em;
  border-top: var(--bw) solid #fff;
  background: none;
  color: #fff;
  font: 14px/1.75 var(--font-mono);
  white-space: pre;
  tab-size: 2;
  overflow: auto;
}
pre[class*="language-"] code { font: inherit; background: none; color: inherit; }
.line-numbers .line-numbers-rows { border-right: 0; }
.line-numbers-rows > span::before { color: #444; padding-right: 1.2em; }

/* tokens: white ink, grey for structure, red for numbers */
.token.property { color: #888; }
.token.string { color: #fff; }
.token.number, .token.boolean, .token.null { color: var(--hot); }
.token.punctuation, .token.operator { color: #555; }

/* the words between */
main > p { margin: 0 0 5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.03em; }

/* the wordmark's end cap: .punkt, from @spelled/spell */

/* the ops array: clickable, and hot when clicked */
.ops { cursor: pointer; outline: 0; }
.ops:hover, .ops:focus-visible { background: #1a1a1a; }
.ops.on { background: var(--hot); padding: 0.32em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ops.on .token { color: #fff; }
.ops.on .token.punctuation { color: rgba(255, 255, 255, 0.65); }

/* the spell, rendered by @spelled/spell (../packages/spell): the page only gives it a stage. Dark mode: black ink is white. */
.spell { --spell-ink: #fff; margin: -2.5rem 0 5rem; cursor: pointer; }
.spell-stage { position: relative; height: clamp(14rem, 45vh, 26rem); overflow: hidden; }
.spell figcaption { margin-top: 1rem; }