/* LLMbience — a night studio. Deep blue-black ink, a coral lamp, a cool teal for the
   machine; Newsreader italic for the voice of the page, Onest for reading, JetBrains Mono
   for numbers. Motif: the clip strip, a row of rounded clips with the next one still
   arriving, drawn under the hero and beside each heading. */

:root {
  --page-bg: #13131b;
  --page-text: #e4e2ea;
  --page-muted: #a3a1b2;
  --page-line: #2c2b3a;
  --page-accent: #f09279;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --surface: #1a1a25;
  --raise: #22212f;
  --code-bg: #22212f;
  --code-text: #f4d6cc;
  --strong: #f6f3fa;
  --teal: #6cc6c0;
  --violet: #b19cf0;
  --k-ink: #d6d3e0; --k-accent: var(--page-accent); --k-a: var(--page-accent); --k-b: var(--teal); --k-c: var(--violet);
  --k-d: #e9c46a; --k-ok: #8fd19e; --k-err: #ff7a72; --k-muted: #77758a; --k-file: #a3a1b2;
  color-scheme: dark;
}

.hero h1 { font: 400 clamp(46px, 7vw, 94px)/0.98 var(--display); letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; color: var(--page-accent); }
.lede { color: #cfccda; }
.clipline { display: flex; gap: 6px; margin-top: 30px; max-width: 520px; }
.clipline i { flex: 1; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--page-accent) 75%, transparent); }
.clipline i:nth-child(2) { background: color-mix(in srgb, var(--page-accent) 55%, transparent); }
.clipline i:nth-child(3) { background: color-mix(in srgb, var(--page-accent) 38%, transparent); }
.clipline i.next { background: repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 10px); opacity: 0.8; }

.part > h2 { display: flex; align-items: center; gap: 14px; font: 400 clamp(30px, 3.6vw, 46px)/1.05 var(--display); font-style: italic; }
.part > h2::before { content: ""; flex: none; width: 46px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--page-accent) 0 60%, transparent 60% 68%, var(--teal) 68%); }
.part h3 { font-family: var(--page-ui); font-weight: 650; color: var(--strong); }

.shot img { border: 0; border-radius: 10px; box-shadow: 0 30px 60px -30px #000, 0 0 0 1px #ffffff14; }
.fig { padding: 18px; background: var(--surface); border-radius: 10px; }
.facts li { border-left-color: var(--page-accent); color: #d3d0dc; }
td { color: #d3d0dc; }
tbody th { font-family: var(--mono); color: var(--page-accent); font-weight: 600; }