/* lifetail — a journal that never ends. Near-black with a lilac pen; Recursive's monospace
   for the record, Onest for reading. Motif: the timestamp gutter of a tail, and a live line
   with a block cursor. */

:root {
  --page-bg: #111015;
  --page-text: #e2dfea;
  --page-muted: #a29fb1;
  --page-line: #2a2833;
  --page-accent: #c9a2ff;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Recursive", ui-monospace, monospace;
  --mono: "Recursive", ui-monospace, monospace;
  --surface: #17161d;
  --raise: #1f1d27;
  --code-bg: #17161d;
  --code-text: #e8dcff;
  --strong: #f5f2fb;
  --k-ink: #d8d4e4; --k-accent: var(--page-accent); --k-a: #ffb37a; --k-b: #7ec8e3; --k-c: #9ce0b0;
  --k-d: #f2a6c8; --k-ok: #9ce0b0; --k-err: #ff7b86; --k-muted: #77738a; --k-file: #b0a8c8;
  color-scheme: dark;
}

code, pre code { font-variation-settings: "MONO" 1; }
.hero h1 { font: 700 clamp(44px, 7vw, 96px)/1 var(--display); font-variation-settings: "MONO" 1; letter-spacing: -0.03em; }
.hero h1 .prompt { color: var(--page-accent); }
.hero h1 em { font-style: normal; color: var(--page-accent); text-decoration: underline 6px; text-underline-offset: 10px; }
.part > h2 { font: 650 clamp(26px, 3.2vw, 38px)/1.15 var(--display); font-variation-settings: "MONO" 1; letter-spacing: -0.02em; }
.part > h2::before { content: "# "; color: var(--page-accent); }

.tail { margin-top: 26px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 6px; font: 14px/1.9 var(--mono); max-width: 760px; }
.tail p { margin: 0; color: #d9d3e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tail time { color: #9591aa; margin-right: 18px; }
.tail .live { color: var(--page-muted); font-style: italic; }
.tail .live i { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 2px; vertical-align: -0.2em; background: var(--page-accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tail .live i { animation: none; } }

.fig { padding: 18px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 8px; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.facts li { border-left-color: var(--page-accent); }
td { color: #d9d3e8; }
tbody th code { color: var(--page-accent); background: none; padding: 0; }
@media (max-width: 640px) { .tail time { display: block; margin: 0; line-height: 1.3; } .tail p { white-space: normal; margin-bottom: 6px; } }