:root {
  --bg:     #0f0d14;
  --ink:    #ebe6f0;
  --muted:  #9c93ab;
  --pink:   #ff2d95;
  --purple: #b48cff;
  --grid:   rgba(180, 140, 255, 0.09);
  --mono: ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", Consolas, monospace;
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3rem 1rem 2rem;
  background: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.sheet {
  max-width: 44rem;
  margin: 0 auto;
  border-left: 5px solid var(--pink);
  padding-left: 1.75rem;
}

/* man-page chrome */
.manhead {
  display: flex;
  justify-content: space-between;
  font: 400 0.75rem/1.6 var(--mono);
  color: var(--muted);
  margin-bottom: 2rem;
}
.prompt {
  font: 400 0.8125rem/1.6 var(--mono);
  color: var(--muted);
  margin: 0 0 2rem;
}
.prompt .user { color: var(--purple); }
.prompt .path { color: var(--pink); }

h1 {
  font: 400 1.5rem/1.3 var(--mono);
  color: var(--ink);
  margin: 0 0 0.1rem;
}
.tagline {
  font: 400 0.8125rem/1.6 var(--mono);
  color: var(--pink);
  margin: 0 0 2.25rem;
}

section { margin-bottom: 2.25rem; }
section > h2 {
  font: 400 0.75rem/1.6 var(--mono);
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
section > div { margin-left: 1.25rem; }

p { margin: 0 0 0.9rem; font-size: 0.9375rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--purple); text-decoration: none; border-bottom: 1px solid rgba(180, 140, 255, 0.35); }
a:hover { color: var(--pink); border-bottom-color: var(--pink); }
a:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

.syn { font: 400 0.875rem/1.8 var(--mono); color: var(--ink); }
.syn .flag { color: var(--pink); }

/* ls -l project listing */
ul.ls { margin: 0; padding: 0; list-style: none; }
ul.ls li { margin-bottom: 1.1rem; }
ul.ls li:last-child { margin-bottom: 0; }
.lsline {
  font: 400 0.8125rem/1.7 var(--mono);
  color: var(--muted);
  white-space: nowrap;
  overflow-x: auto;
}
.lsline a, .lsline .name { color: var(--pink); border-bottom-color: rgba(255, 45, 149, 0.35); }
.lsline .file { color: var(--ink); border-bottom-color: rgba(235, 230, 240, 0.3); }
.what {
  display: block;
  margin: 0.15rem 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--ink);
}
.what a { border-bottom-width: 1px; }

.qr {
  display: inline-block;
  line-height: 0;               /* svg draws its own light quiet zone */
}
.qr-alt { font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); margin-top: 0.75rem; }

figure.evidence { margin: 1.5rem 0 0; }
figure.evidence img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border: 1px solid rgba(156, 147, 171, 0.4);
}
figure.evidence figcaption {
  font: 400 0.75rem/1.6 var(--mono);
  color: var(--muted);
  margin-top: 0.5rem;
}

footer {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding-left: calc(1.75rem + 5px);
  font: 400 0.75rem/1.8 var(--mono);
  color: var(--muted);
}
footer .n { color: var(--pink); }
footer .d { color: var(--purple); }
footer p { margin: 0; font-size: 0.75rem; }

.cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: var(--pink);
  vertical-align: -0.15em;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

@media (max-width: 34rem) {
  body { padding: 1.5rem 0.75rem; }
  .sheet { padding-left: 1rem; }
  .manhead .mid { display: none; }
  section > div { margin-left: 0.5rem; }
}

/* --- added in the renderer port --- */

/* Replaces inline style="margin-bottom:0.75rem" on prompt lines inside sections
   and figures. Inline styles are blocked by the site's style-src 'self' CSP. */
.prompt-inset { margin-bottom: 0.75rem; }

/* Man-page section suffix after a listing name, e.g. videomixer-audio-hang(7). */
.lsline .sec { color: var(--purple); }

/* --- log and post bodies (phase 4) --- */

/* The mono aside under a listing: "… ls log/ for all · feed.xml". */
.note {
  font: 400 0.8125rem/1.7 var(--mono);
  color: var(--muted);
  margin: 0.6rem 0 0 1.25rem;
}

/* SEE ALSO on a post: name(7), name(1) */
.crossrefs {
  font: 400 0.8125rem/1.8 var(--mono);
  color: var(--muted);
  margin: 0;
}
.crossrefs a, .crossrefs span:not(.sec) { color: var(--pink); }

/* Post body. h1 is the post title and h2 is the section name, so a post's own
   headings start at h3 — the parser enforces that from the other side. */
.post h3 {
  font: 400 1rem/1.4 var(--mono);
  color: var(--ink);
  margin: 1.8rem 0 0.5rem;
}
.post h4 {
  font: 400 0.875rem/1.4 var(--mono);
  color: var(--muted);
  margin: 1.4rem 0 0.4rem;
}
.post p { margin: 0 0 0.9rem; }
.post ul, .post ol { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.post li { margin-bottom: 0.35rem; font-size: 0.9375rem; }
.post blockquote {
  margin: 0 0 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(180, 140, 255, 0.35);
  color: var(--muted);
}
.post hr {
  border: 0;
  border-top: 1px solid rgba(156, 147, 171, 0.25);
  margin: 1.75rem 0;
}

/* Code. Wrapping is off on purpose: a diff or a table of slot numbers means
   nothing once the columns stop lining up, so long lines scroll instead. */
.post pre {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  background: rgba(180, 140, 255, 0.06);
  border-left: 2px solid rgba(180, 140, 255, 0.3);
  overflow-x: auto;
}
.post pre code {
  font: 400 0.8125rem/1.6 var(--mono);
  color: var(--ink);
  background: none;
  padding: 0;
  white-space: pre;
}
.post code {
  font: 400 0.875em/1.5 var(--mono);
  background: rgba(180, 140, 255, 0.1);
  padding: 0.1em 0.3em;
  color: var(--ink);
}
.post strong { font-weight: 600; color: var(--ink); }
.post em { font-style: italic; }

/* --- syntax highlighting ---
   Rendered server-side: the site sends script-src 'none', so there is no client
   highlighter to load and nothing for a reader to download. Four token colours,
   three of them already in the palette — legibility, not a rainbow.
   Measured against the code-block background (#191522): keyword 5.2:1,
   string 10.4:1, comment 6.1:1, number 6.9:1. All AA. */
.post .kw { color: var(--pink); }
.post .st { color: #e5c07b; }
.post .cm { color: var(--muted); font-style: italic; }
.post .nu { color: var(--purple); }

/* Diffs. The row tint carries as much of the signal as the text colour does, so a
   patch still reads when printed, and for anyone who cannot separate red from green
   the leading +/- remains the primary cue — which is why the markers are never
   stripped. The prefix selector also catches language-diff-js and friends. */
.post [class^="language-diff"] .da,
.post [class^="language-patch"] .da {
  color: #7ee787;
  background: rgba(63, 185, 80, 0.10);
  display: inline-block;
  width: 100%;
}
.post [class^="language-diff"] .dr,
.post [class^="language-patch"] .dr {
  color: #ff7b72;
  background: rgba(248, 81, 73, 0.10);
  display: inline-block;
  width: 100%;
}
.post [class^="language-diff"] .dh,
.post [class^="language-patch"] .dh { color: var(--purple); }
.post [class^="language-diff"] .df,
.post [class^="language-patch"] .df { color: var(--muted); }

/* When the patched language is known, the code inside carries syntax colours, so
   the row drops its blanket green/red and the marker carries the signal instead —
   alongside the tint, which never goes away. */
.post .da.hl, .post .dr.hl, .post .dc.hl { color: var(--ink); }
.post .dc.hl { display: inline-block; width: 100%; }
.post .da.hl .dm { color: #7ee787; }
.post .dr.hl .dm { color: #ff7b72; }