/* ZETA — theme. Obsidian-flavoured: monospace, hairlines, no shadows, no rounding beyond 3px. */

:root {
  --bg: #fcfcfb;
  --bg-2: #f4f3f0;
  --bg-inset: #efeee9;
  --ink: #16150f;
  --ink-2: #52514e;
  --ink-3: #8a8880;
  --line: #e3e1da;
  --line-2: #cfcdc4;
  --accent: #4a3aa7;
  --accent-soft: #4a3aa71a;

  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --good: #0ca30c; --warn: #fab219; --bad: #d03b3b;
  --pos: #2a78d6; --neg: #e34948; --mid: #f0efec;

  --mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", ui-monospace, monospace;
  --measure: 74ch;
  --sidebar: 260px;
  --outline: 220px;
  --fs: 14.5px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1a1a19;
  --bg-2: #1f1f1e;
  --bg-inset: #141413;
  --ink: #e3e2dc;
  --ink-2: #a9a89f;
  --ink-3: #6f6e67;
  --line: #2e2e2c;
  --line-2: #3e3e3b;
  --accent: #9085e9;
  --accent-soft: #9085e922;

  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #22a822; --s7: #9085e9; --s8: #e66767;
  --good: #0ca30c; --warn: #fab219; --bad: #d03b3b;
  --pos: #3987e5; --neg: #e66767; --mid: #383835;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
}
::selection { background: var(--accent-soft); }

/* ── layout ─────────────────────────────────────────────────────────────── */

#shell { display: grid; grid-template-columns: var(--sidebar) 1fr; height: 100vh; height: 100dvh; }
#shell.no-sidebar { grid-template-columns: 0 1fr; }

#sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 0 60px;
  user-select: none;
}
#shell.no-sidebar #sidebar { display: none; }

#pane { overflow-y: auto; position: relative; scroll-behavior: smooth; }
#main {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--outline);
  gap: 48px;
  justify-content: center;
  padding: 56px 40px 200px;
}
@media (max-width: 1180px) { #main { grid-template-columns: minmax(0, var(--measure)); } #outline { display: none; } }
/* Small screens: the sidebar becomes a drawer, closed by default, opened with the ☰ button. */
#side-toggle { display: none; }
#side-backdrop { display: none; }
@media (max-width: 860px) {
  /* The sidebar is fixed (out of flow), so the pane is the only grid item: give it the whole row. */
  #shell, #shell.no-sidebar { grid-template-columns: 1fr; }
  #pane { grid-column: 1; }
  #sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(var(--sidebar), 85vw); height: 100%;
    transform: translateX(-102%); transition: transform 180ms ease-out;
    box-shadow: none; display: block;
  }
  #shell.no-sidebar #sidebar { display: block; }
  #shell.side-open #sidebar { transform: none; }
  #side-backdrop { position: fixed; inset: 0; z-index: 39; background: #0006; }
  #shell.side-open #side-backdrop { display: block; }
  #side-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 10px; z-index: 41;
    width: 38px; height: 38px; padding: 0;
    font: inherit; font-size: 18px; line-height: 1; color: var(--ink-2);
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
  }
  #shell.side-open #side-toggle { left: calc(min(var(--sidebar), 85vw) + 10px); }
  .side-link { padding-top: 7px; padding-bottom: 7px; }
  #main { padding: 60px 18px 160px; }
  #pane { -webkit-overflow-scrolling: touch; overflow-x: hidden; }
  /* Let long inline formulas break between terms instead of pushing the page sideways;
     display formulas keep their own horizontal scroll. */
  #main .katex { white-space: normal; }
  #main .katex-display .katex { white-space: nowrap; }
  /* Wide tables scroll sideways on their own rather than widening the page. */
  #main table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ── sidebar ────────────────────────────────────────────────────────────── */

.brand {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 16px 16px; cursor: pointer;
}
.brand b { font-size: 15px; letter-spacing: 0.14em; font-weight: 600; }
.brand span { color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.06em; }

.side-part {
  padding: 18px 16px 5px; font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
}
.side-link {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 16px 3px 14px; color: var(--ink-2); cursor: pointer;
  border-left: 2px solid transparent; font-size: 13px; line-height: 1.45;
}
.side-link:hover { background: var(--bg-inset); color: var(--ink); }
.side-link.active { color: var(--ink); border-left-color: var(--accent); background: var(--bg-inset); }
.side-link .num { color: var(--ink-3); font-size: 11px; min-width: 2.2em; }
.side-link.done .num::after { content: "·"; color: var(--good); font-weight: 700; margin-left: 2px; }
.side-link .t { flex: 1; }

.side-tools { padding: 12px 16px 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.tool {
  font: inherit; font-size: 11px; color: var(--ink-2); background: var(--bg);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; cursor: pointer;
}
.tool:hover { border-color: var(--line-2); color: var(--ink); }
kbd {
  font: inherit; font-size: 10px; background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; color: var(--ink-3);
}

/* ── prose ──────────────────────────────────────────────────────────────── */

#outline { position: sticky; top: 0; align-self: start; padding-top: 78px; font-size: 12px; }
#outline .o-h { color: var(--ink-3); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 8px; }
#outline a {
  display: block; color: var(--ink-3); text-decoration: none; padding: 2px 0 2px 10px;
  border-left: 1px solid var(--line); line-height: 1.4;
}
#outline a.lv3 { padding-left: 22px; }
#outline a:hover { color: var(--ink-2); }
#outline a.active { color: var(--accent); border-left-color: var(--accent); }

article { min-width: 0; }
.ch-eyebrow { color: var(--ink-3); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; }
.ch-title { font-size: 27px; line-height: 1.25; margin: 8px 0 6px; font-weight: 600; letter-spacing: -0.01em; }
.ch-blurb { color: var(--ink-2); margin: 0 0 12px; }
.ch-meta { color: var(--ink-3); font-size: 11.5px; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 30px; }

article h2 {
  font-size: 17px; font-weight: 600; margin: 46px 0 14px; letter-spacing: -0.005em;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
article h3 { font-size: 14.5px; font-weight: 600; margin: 30px 0 10px; color: var(--ink); }
article h2 .anchor, article h3 .anchor {
  opacity: 0; color: var(--ink-3); text-decoration: none; margin-left: 8px; font-weight: 400;
}
article h2:hover .anchor, article h3:hover .anchor { opacity: 1; }
article p { margin: 0 0 15px; }
article ul, article ol { margin: 0 0 15px; padding-left: 22px; }
article li { margin: 3px 0; }
article li > ul, article li > ol { margin: 3px 0; }
article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
article a:hover { border-bottom-color: var(--accent); }
article hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
article strong { font-weight: 600; color: var(--ink); }
article em { font-style: italic; color: var(--ink); }
code {
  font-family: var(--mono); font-size: 0.9em; background: var(--bg-inset);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.5px 4px;
}
pre { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; overflow-x: auto; margin: 0 0 16px; }
pre code { background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.6; }

table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 13px; }
th, td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top; }
th { background: var(--bg-2); font-weight: 600; color: var(--ink-2); font-size: 11.5px; letter-spacing: 0.03em; }
tbody tr:hover { background: var(--bg-2); }

blockquote { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line-2); color: var(--ink-2); }

/* ── callouts ───────────────────────────────────────────────────────────── */

.callout {
  border: 1px solid var(--line); border-left-width: 2px; border-radius: 3px;
  background: var(--bg-2); padding: 12px 16px 2px; margin: 0 0 18px;
}
.callout > .c-head {
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--c, var(--ink-3)); margin-bottom: 8px; font-weight: 600;
}
.callout > .c-head .c-name { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 600; }
.callout > .c-head .c-name::before { content: "· "; color: var(--ink-3); }
.callout p:last-child { margin-bottom: 12px; }
.callout ul, .callout ol { margin-bottom: 12px; }

.c-definition { --c: var(--s1); border-left-color: var(--s1); }
.c-theorem    { --c: var(--s7); border-left-color: var(--s7); }
.c-lemma, .c-proposition, .c-corollary { --c: var(--s7); border-left-color: var(--line-2); }
.c-proof      { --c: var(--ink-3); border-left-color: var(--line-2); background: transparent; }
.c-example    { --c: var(--s3); border-left-color: var(--s3); }
.c-intuition  { --c: var(--s4); border-left-color: var(--s4); }
.c-note       { --c: var(--ink-3); border-left-color: var(--line-2); }
.c-warning    { --c: var(--s2); border-left-color: var(--s2); }
.c-history    { --c: var(--s5); border-left-color: var(--s5); background: transparent; }
.c-recap      { --c: var(--accent); border-left-color: var(--accent); }
.c-proof > p:last-of-type::after { content: " ∎"; color: var(--ink-3); }

/* ── exercises ──────────────────────────────────────────────────────────── */

.ex { border: 1px solid var(--line); border-radius: 3px; margin: 0 0 14px; background: var(--bg-2); }
.ex > .c-head { padding: 11px 16px 0; }
.ex > .c-head .tier {
  border: 1px solid currentColor; border-radius: 2px; padding: 0 4px; margin-left: 8px;
  font-size: 9px; letter-spacing: 0.1em;
}
.ex-body { padding: 8px 16px 4px; }
.ex-body > p:last-child { margin-bottom: 12px; }
.tier-warmup    { --c: var(--ink-3); }
.tier-core      { --c: var(--s1); }
.tier-hard      { --c: var(--s2); }
.tier-challenge { --c: var(--s8); }
.ex.tier-core      { border-left: 2px solid var(--s1); }
.ex.tier-hard      { border-left: 2px solid var(--s2); }
.ex.tier-challenge { border-left: 2px solid var(--s8); }
.ex.tier-warmup    { border-left: 2px solid var(--line-2); }

details.sol { border-top: 1px solid var(--line); background: var(--bg); border-radius: 0 0 3px 3px; }
details.sol > summary {
  cursor: pointer; list-style: none; padding: 7px 16px; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
details.sol > summary::-webkit-details-marker { display: none; }
details.sol > summary::before { content: "▸ "; }
details.sol[open] > summary::before { content: "▾ "; }
details.sol > summary:hover { color: var(--accent); }
.sol-body { padding: 4px 16px 2px; border-top: 1px solid var(--line); }
.sol-body > p:last-child { margin-bottom: 14px; }

/* ── widgets ────────────────────────────────────────────────────────────── */

.widget {
  border: 1px solid var(--line); border-radius: 3px; margin: 0 0 20px;
  background: var(--bg); overflow: hidden;
}
.widget-body { padding: 10px 12px 4px; }
.wk-controls {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2);
  font-size: 11.5px; color: var(--ink-2);
}
.wk-controls label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wk-controls input[type="range"] { accent-color: var(--accent); width: 120px; height: 14px; }
.wk-controls input[type="number"], .wk-controls select {
  font: inherit; font-size: 11.5px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px;
}
.wk-controls button {
  font: inherit; font-size: 11px; background: var(--bg); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px; cursor: pointer;
}
.wk-controls button:hover { color: var(--ink); border-color: var(--line-2); }
.wk-controls button[aria-pressed="true"], .wk-controls button.on {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}
.wk-readout { font-size: 11.5px; color: var(--ink-2); margin-left: auto; white-space: nowrap; }
/* PK.readout() emits .wk-out. Long readouts wrap rather than overflowing the control row. */
.wk-out {
  font-size: 11.5px; color: var(--ink-2); margin-left: auto; text-align: right;
  flex: 1 1 auto; min-width: 0; line-height: 1.45;
}
.wk-out b, .wk-out strong { color: var(--ink); font-weight: 600; }
.wk-caption {
  font-size: 12px; color: var(--ink-2); padding: 8px 12px 10px;
  border-top: 1px solid var(--line); background: var(--bg-2); line-height: 1.6;
}
.wk-tooltip {
  position: absolute; pointer-events: none; z-index: 5; font-size: 11px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px;
  padding: 3px 7px; color: var(--ink); white-space: pre; line-height: 1.45;
}
.wk-error { color: var(--bad); font-size: 12px; padding: 14px; }
.widget canvas { display: block; width: 100%; }
.fig { display: block; margin: 0 auto 18px; max-width: 100%; color: var(--ink-2); }
.fig text { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); }

/* ── katex ──────────────────────────────────────────────────────────────── */

.katex { font-size: 1.04em; }
.katex-display { margin: 18px 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.katex-display > .katex { font-size: 1.06em; }

/* ── chapter nav / footer ───────────────────────────────────────────────── */

.ch-nav { display: flex; gap: 12px; margin-top: 56px; border-top: 1px solid var(--line); padding-top: 20px; }
.ch-nav a {
  flex: 1; border: 1px solid var(--line); border-radius: 3px; padding: 10px 14px;
  text-decoration: none; color: var(--ink-2); font-size: 12px; line-height: 1.5;
}
.ch-nav a:hover { border-color: var(--accent); color: var(--ink); }
.ch-nav a .dir { display: block; color: var(--ink-3); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; }
.ch-nav a.next { text-align: right; }
.mark-read {
  font: inherit; font-size: 12px; margin-top: 20px; background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 3px; padding: 6px 12px; cursor: pointer; width: 100%;
}
.mark-read:hover { border-color: var(--line-2); color: var(--ink); }
.mark-read.done { color: var(--good); border-color: var(--good); background: transparent; }

#progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--accent); z-index: 50; transition: width 90ms linear; }

/* ── command palette ────────────────────────────────────────────────────── */

#palette-bg { position: fixed; inset: 0; background: #0006; z-index: 100; display: none; }
#palette-bg.open { display: block; }
#palette {
  position: absolute; top: 14vh; left: 50%; transform: translateX(-50%);
  width: min(640px, 92vw); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 5px; overflow: hidden;
}
#palette input {
  width: 100%; font: inherit; font-size: 14px; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line); padding: 13px 16px; outline: none;
}
#palette-list { max-height: 54vh; overflow-y: auto; }
.p-item { padding: 7px 16px; cursor: pointer; border-left: 2px solid transparent; }
.p-item.sel { background: var(--bg-2); border-left-color: var(--accent); }
.p-item .p-t { font-size: 13px; color: var(--ink); }
.p-item .p-s { font-size: 11px; color: var(--ink-3); }
.p-item mark { background: var(--accent-soft); color: var(--accent); }
.p-empty { padding: 18px 16px; color: var(--ink-3); font-size: 12px; }

/* ── home ───────────────────────────────────────────────────────────────── */

.home-hero { margin-bottom: 42px; }
.home-hero h1 { font-size: 34px; letter-spacing: 0.02em; margin: 0 0 4px; font-weight: 600; }
.home-hero .sub { color: var(--ink-2); font-size: 15px; margin-bottom: 22px; }
.home-part { margin-top: 34px; }
.home-part > h3 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 0 0 4px; }
.home-ch { display: grid; grid-template-columns: 3.2em 1fr; gap: 12px; padding: 9px 6px; cursor: pointer; border-radius: 3px; }
.home-ch:hover { background: var(--bg-2); }
.home-ch .n { color: var(--ink-3); font-size: 12px; }
.home-ch .t { font-size: 13.5px; color: var(--ink); }
.home-ch .b { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.home-ch.done .n::after { content: " ·"; color: var(--good); font-weight: 700; }
.stat-row { display: flex; gap: 26px; margin: 24px 0 8px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { font-size: 12px; color: var(--ink-3); }
.stat b { display: block; font-size: 20px; color: var(--ink); font-weight: 600; line-height: 1.3; }

/* ── index of results ───────────────────────────────────────────────────── */

.idx-list { margin-bottom: 8px; }
.idx-row {
  display: grid; grid-template-columns: 5.2em 1fr auto; gap: 12px; align-items: baseline;
  padding: 4px 6px; border-radius: 3px; text-decoration: none; border: 0;
}
.idx-row:hover { background: var(--bg-2); }
.idx-row .k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.idx-row .t { color: var(--ink); font-size: 13px; }
.idx-row .c { color: var(--ink-3); font-size: 11px; }

/* ── click-to-explain ───────────────────────────────────────────────────── */

.mx { cursor: pointer; border-radius: 2px; transition: background 90ms; }
.mx:hover { background: var(--accent-soft); }
.mx:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.mx.lit { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.mx-d { display: block; }
.mx-d:hover { background: var(--bg-2); }
/* the panel's own formulas are for reading, not for recursing into */
#explain .mx { cursor: default; }
#explain .mx:hover { background: none; }

#explain {
  position: fixed; z-index: 120; display: none;
  width: min(460px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px;
  font-size: 12.5px; line-height: 1.62;
}
#explain.open { display: block; }

#explain .ex-head {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
#explain .ex-kind { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
#explain .ex-close {
  font: inherit; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid var(--line-2); border-radius: 3px;
  color: var(--ink-3); padding: 1px 6px; cursor: pointer;
}
#explain .ex-close:hover { color: var(--ink); border-color: var(--ink-3); }

#explain .ex-tex {
  padding: 14px 12px; border-bottom: 1px solid var(--line); overflow-x: auto;
  text-align: center; background: var(--bg-inset);
}
#explain .ex-tex .katex-display { margin: 0; }

#explain .ex-sec { padding: 11px 12px; border-bottom: 1px solid var(--line); }
#explain .ex-sec h4 {
  margin: 0 0 7px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
#explain .ex-sec p { margin: 0; color: var(--ink); }

#explain .ex-part {
  display: grid; grid-template-columns: 6.4em 1fr; gap: 4px 10px; align-items: baseline;
  padding: 4px 0; border-top: 1px solid var(--line);
}
#explain .ex-part:first-of-type { border-top: 0; }
#explain .ex-part .pl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
#explain .ex-part .pt { overflow-x: auto; }
#explain .ex-part .pr { grid-column: 2; color: var(--ink-2); font-size: 12px; }

#explain .ex-sym {
  display: grid; grid-template-columns: 4.6em 1fr; gap: 10px; align-items: baseline;
  padding: 5px 0; border-top: 1px solid var(--line);
}
#explain .ex-sym:first-of-type { border-top: 0; }
#explain .ex-sym .sk { color: var(--ink); overflow-x: auto; }
#explain .ex-sym .sm { color: var(--ink-2); }
#explain .ex-sym .sm strong { color: var(--ink); }

#explain .ex-foot { padding: 8px 12px; }
#explain .ex-foot a { color: var(--accent); text-decoration: none; font-size: 11.5px; }

/* ── home: the two tracks ───────────────────────────────────────────────── */

.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 22px; }
@media (max-width: 720px) { .tracks { grid-template-columns: 1fr; } }
.track {
  border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 3px;
  padding: 11px 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
.track b { display: block; color: var(--ink); font-size: 11px; letter-spacing: .1em;
           text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }

/* ── Lean code ──────────────────────────────────────────────────────────── */

pre code.lang-lean { line-height: 1.65; }
.l-com   { color: var(--ink-3); font-style: italic; }
.l-kw    { color: var(--s7); }
.l-tac   { color: var(--s1); }
.l-str   { color: var(--s3); }
.l-cmd   { color: var(--s5); }
/* an unproved goal left in a file is exactly what the reader must notice */
.l-sorry { color: var(--bad); border-bottom: 1px dotted var(--bad); }