/* AI Daily — /tie/
   The base block below is copied verbatim from index.html so these pages are the
   same furniture as the rest of the site: the serif body face, the 72rem
   container, the header and footer metrics, the accent link colour.
   Everything after "section styles" belongs to /tie/.
   If index.html's base changes, change it here in the same edit. */

:root {
  color-scheme: light dark;
  --bg: #fbfaf6;
  --card: #ffffff;
  --fg: #1f1d1a;
  --muted: #5d5a54;
  --rule: #e6e2d9;
  --accent: #b45309;
  --measure: 72rem;
  --prose: 72ch;
  --sans: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fig-false: #c94f44;
  --fig-true:  #2e7d5b;
  --fig-ink:   #77736a;
  --fig-grid:  #e9e5db;
  --fig-paper: #f5f3ec;
  /* Evidence tiers. Two are the site's own figure colours; the other two are the
     deck's periwinkle and a muted plum, so no new hue enters the system. */
  --t1: #2e7d5b;
  --t2: #b45309;
  --t3: #4f6d8f;
  --t4: #8a6a7d;
  /* A step darker than the site's --fig-false (#c94f44). That colour lives inside
     figures on the homepage; here it also has to carry 11px running text, where
     4.29:1 is under AA. #b8443a is the same hue at 5.12:1 on the page and 4.82:1
     on the caveat panel. --fig-false itself is left alone so shared figure work
     stays pixel-identical to the homepage. */
  --warn: #b8443a;
  --warn-bg: #fbf1ef;
  --rule-2: #f1ede3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1216; --card:#151a20; --fg:#e9e6e0; --muted:#a39f97;
    --rule:#272d35; --accent:#e3a35b;
    --fig-false:#e07a6d; --fig-true:#5fbf94; --fig-ink:#8d8981;
    --fig-grid:#242a32; --fig-paper:#12171d;
    --t1:#5fbf94; --t2:#e3a35b; --t3:#8aa0ff; --t4:#c49bb0;
    --warn:#e07a6d; --warn-bg:#241a17; --rule-2:#1c2128;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.15625rem/1.65 Charter, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  padding: 2.6rem clamp(1.4rem, 5vw, 4rem) 5rem;
}
/* Scale the ROOT, not the body: --measure, --prose and every rem gap scale with
   it, so the container widens on a 27" display instead of only the type. */
@media (min-width: 1800px) { html { font-size: 113.5%; } }
main { max-width: var(--measure); margin: 0 auto; }

header.site {
  font-family: var(--sans); font-size: 0.85rem; color: var(--muted);
  display: flex; gap: 1.6rem; align-items: center; margin-bottom: clamp(3rem, 8vh, 5.5rem);
}
header.site .name {
  color: var(--fg); font-weight: 600; margin-right: auto;
  display: flex; align-items: center; gap: 0.55rem;
}
header.site .name svg { display: block; flex: 0 0 auto; }
header.site a { color: inherit; text-decoration: none; }
header.site a:hover { color: var(--accent); }
header.site .name:hover { color: var(--fg); }

h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.015em;
  margin: 0 0 0.8rem; font-weight: 700;
}
p { margin: 0 0 1.25rem; max-width: var(--prose); text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
em { font-style: italic; }
footer {
  font-family: var(--sans); font-size: 0.85rem; color: var(--muted);
  padding-top: 1.3rem; border-top: 1px solid var(--rule); margin-top: 3.5rem;
}
footer a { color: inherit; }
@media (max-width: 560px) {
  body { font-size: 1.09375rem; }
  header.site { gap: 1rem; }
}

/* Sub-page menu. One nav tab owns seven pages, so the tab opens rather than
   leading to one of them and leaving the other six to be guessed at.
   <details> gives open/close and keyboard support with no script; the script
   at the end of the body only adds click-away and Escape. */
header.site .menu { position: relative; }
header.site .menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.34rem;
}
header.site .menu > summary::-webkit-details-marker { display: none; }
header.site .menu > summary::after {
  content: ""; width: 0.32em; height: 0.32em; opacity: 0.5;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
}
header.site .menu > summary:hover { color: var(--accent); }
header.site .menu[open] > summary { color: var(--accent); }
header.site .menu[open] > summary::after { transform: translateY(0.06em) rotate(225deg); }
header.site .menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.menupanel {
  position: absolute; top: calc(100% + 0.8rem); right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(2, 14.2rem); gap: 0.1rem;
  width: max-content; max-width: calc(100vw - 2.8rem);
  padding: 0.6rem; background: var(--card); border: 1px solid var(--rule);
  border-radius: 5px; box-shadow: 0 14px 36px rgba(31, 29, 26, 0.11);
}
.menupanel a { display: block; padding: 0.5rem 0.65rem; border-radius: 4px; text-decoration: none; }
.menupanel a:hover, .menupanel a:focus-visible { background: var(--fig-paper); }
.menupanel b {
  display: block; font-family: Charter, Georgia, 'Iowan Old Style', serif;
  font-size: 0.96rem; font-weight: 600; color: var(--fg); margin-bottom: 0.05rem;
}
.menupanel a:hover b, .menupanel a:focus-visible b { color: var(--accent); }
.menupanel span { display: block; font-size: 0.77rem; line-height: 1.45; color: var(--muted); }
.menupanel a[aria-current] { background: var(--fig-paper); }
.menupanel a[aria-current] b { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  .menupanel { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }
}
/* On a phone the tab sits too far right for a panel hung off its right edge:
   anchored there it runs off the left of the screen. Dropping the tab out of
   the positioning context lets the panel span the page's own text column. */
@media (max-width: 640px) {
  header.site .menu { position: static; }
  .menupanel {
    position: fixed; top: 4.7rem;   /* body padding-top + the one-line header */
    left: clamp(1.4rem, 5vw, 4rem); right: clamp(1.4rem, 5vw, 4rem);
    width: auto; max-width: none; grid-template-columns: 1fr;
    max-height: 74vh; overflow-y: auto;
  }
}


/* ------------------------------ page furniture ------------------------------
   main is 72rem because the homepage's card grids need it. A prose column is
   72ch, so on a wide screen that left a ~350px strip of nothing down the right
   of every page here. The strip now carries the section index: where you are,
   what else is in this section, and the headings of the page you are on. Below
   1100px it collapses and the menu in the header takes over. */
.tiegrid {
  display: grid; grid-template-columns: minmax(0, var(--prose)) 1fr;
  gap: clamp(2rem, 4vw, 3.6rem); align-items: start;
}
@media (max-width: 1100px) { .tiegrid { grid-template-columns: minmax(0, 1fr); } .rail { display: none; } }

.rail { position: sticky; top: 1.6rem; font-family: var(--sans); }
.rail h2 {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fig-ink); font-weight: 500;
  margin: 0 0 0.7rem;
}
.rail nav + h2 { margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.rail nav { display: flex; flex-direction: column; }
.rail a {
  display: block; padding: 0.3rem 0 0.3rem 0.85rem; margin-left: -0.05rem;
  border-left: 2px solid var(--rule);
  font-size: 0.87rem; line-height: 1.4; color: var(--muted); text-decoration: none;
}
.rail a:hover { color: var(--accent); border-left-color: var(--accent); }
.rail a[aria-current] { color: var(--fg); font-weight: 600; border-left-color: var(--accent); }
.rail .toc a { font-size: 0.85rem; }
.rail .back {
  display: inline-block; border: 0; padding: 0; margin: 1.6rem 0 0;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--fig-ink);
}
.rail .back:hover { color: var(--accent); }

/* Breadcrumb. The eyebrow used to be a bare "AI DAILY" link; with seven pages
   under one tab it has to say which of them you are on. */
.crumb { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fig-ink); margin: 0 0 0.5rem; max-width: none; }
.crumb a { color: var(--fig-ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.crumb a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.crumb .sep { margin: 0 0.45rem; opacity: 0.5; }
.crumb .here { color: var(--muted); }

/* ============================== section styles ============================== */

.tie { max-width: var(--prose); }
/* Anchors from the contents list land with a little air above them. */
.tie h2[id], .tie h3[id] { scroll-margin-top: 1.5rem; }

/* The site marks a section with a mono eyebrow and a short gradient rule.
   Reused here so a TIE page reads as the same publication. */
.lead h2, .mod h3, .also h3, .caveats h3 {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  margin: 0 0 1rem; display: flex; align-items: center; gap: 0.85rem;
}
.lead h2::before, .mod h3::before, .also h3::before, .caveats h3::before {
  content: ""; width: 26px; height: 1px; flex: 0 0 auto;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.caveats h3 { color: var(--warn); }
.caveats h3::before { background: linear-gradient(90deg, var(--warn), transparent); }

.eyebrow { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fig-ink); margin: 0 0 0.5rem; max-width: none; }
.dek { font-size: 1.05rem; color: var(--muted); margin: 0; max-width: 58ch; text-wrap: pretty; }
.runbar { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--fig-ink);
  margin: 1.4rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); max-width: none; }
.runbar .live { width: 6px; height: 6px; border-radius: 50%; background: var(--t1);
  display: inline-block; margin-right: 0.4rem; }
.runbar b { color: var(--fg); font-weight: 600; }
.counts { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--fig-ink); margin: 0.6rem 0 2.2rem; max-width: none; }
.counts b { color: var(--fg); font-variant-numeric: tabular-nums; }

.ribbon { border: 1px solid var(--rule); border-radius: 4px; background: var(--card);
  padding: 0.6rem 0.85rem; margin: 0.8rem 0 0; }
.ribbon p { font-family: var(--mono); font-size: 0.7rem; color: var(--muted);
  margin: 0.25rem 0; line-height: 1.75; max-width: none; }
.ribbon .lbl { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.62rem;
  color: var(--fig-ink); margin-right: 0.6rem; }
.ribbon a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule); }
.ribbon a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.ribbon b { color: var(--warn); font-variant-numeric: tabular-nums; }
.ribbon s { color: var(--fig-ink); }
.ribbon .sep { color: var(--rule); }
.ribbon .more { border-bottom: 0; text-decoration: underline; color: var(--muted); }

.lead { margin: 2.2rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--fg); }
.lead ul { margin: 0; padding-left: 1.1rem; }
.lead li { margin-bottom: 0.55rem; }
.lead .xref { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }

.trend { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.rank { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fig-ink); margin: 0 0 0.4rem; max-width: none; }
.trend.major .tag { color: var(--warn); font-weight: 600; }
.trend.watch .tag { color: var(--accent); font-weight: 600; }
.trend h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.012em;
  font-weight: 700; margin: 0 0 0.5rem; text-wrap: balance; }
.stage { font-family: var(--sans); font-size: 0.8rem; color: var(--muted);
  margin: 0 0 0.9rem; max-width: none; }
.stage b { color: var(--fg); font-weight: 600; }
.trend .body { margin: 0 0 0.9rem; }
.sowhat { margin: 0; padding-left: 0.9rem; border-left: 2px solid var(--accent); }
.sowhat .lbl { display: block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  font-weight: 600; margin-bottom: 0.2rem; }

/* Disclosure triangles for evidence blocks and the desk sections. Scoped to the
   article: the header menu is also a <details>, and it draws its own chevron. */
.tie details { margin-top: 1rem; }
.tie summary { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--muted); cursor: pointer; list-style: none;
  display: inline-flex; gap: 0.4rem; align-items: baseline; }
.tie summary::-webkit-details-marker { display: none; }
.tie summary::before { content: "\25B8"; }
.tie details[open] > summary::before { content: "\25BE"; }
.tie summary:hover { color: var(--accent); }
.ev { margin: 0.9rem 0 0; padding-left: 0.85rem; border-left: 2px solid var(--rule); }
.ev.t1 { border-left-color: var(--t1); } .ev.t2 { border-left-color: var(--t2); }
.ev.t3 { border-left-color: var(--t3); } .ev.t4 { border-left-color: var(--t4); }
.ev-h { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em;
  margin: 0 0 0.2rem; color: var(--fig-ink); max-width: none; }
.ev-h .tier { font-weight: 600; text-transform: uppercase; }
.ev.t1 .tier { color: var(--t1); } .ev.t2 .tier { color: var(--t2); }
.ev.t3 .tier { color: var(--t3); } .ev.t4 .tier { color: var(--t4); }
.ev-h a { color: var(--muted); }
.quote { font-size: 0.95rem; font-style: italic; color: var(--fg); margin: 0; }

.mod { margin: 0 0 2rem; }
.bullets { margin: 0; padding-left: 1.1rem; }
.bullets li { margin-bottom: 0.4rem; color: var(--muted); }
.bullets b { color: var(--fg); font-weight: 600; }

.caveats { border: 1px solid var(--warn); border-left-width: 3px; border-radius: 4px;
  background: var(--warn-bg); padding: 1.1rem 1.2rem; margin: 0 0 2rem; }
.caveats .sub { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em;
  color: var(--muted); margin: -0.6rem 0 0.7rem; max-width: none; }
.caveats ul { margin: 0; padding-left: 1.1rem; }
.caveats li { font-size: 0.95rem; margin-bottom: 0.45rem; }

.empty { border: 1px solid var(--rule); border-radius: 4px; padding: 1.2rem 1.3rem;
  background: var(--card); margin-top: 1.6rem; }
.empty p:last-child { margin: 0; }

.tiefoot { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.03em;
  color: var(--fig-ink); margin: 2.4rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--rule); max-width: none; line-height: 1.9; }

.also { border-top: 1px solid var(--rule); padding-top: 1.6rem; margin-top: 2.4rem; }
.also .sub { font-size: 0.92rem; color: var(--muted); margin: -0.6rem 0 1rem; }
.cat { border-top: 1px solid var(--rule-2); margin: 0; scroll-margin-top: 1rem; }
.cat:last-of-type { border-bottom: 1px solid var(--rule-2); }
.cat > summary { display: flex; gap: 0.6rem; align-items: baseline; width: 100%;
  padding: 0.7rem 0; font-family: var(--sans); font-size: 1rem; color: var(--fg); }
.cat > summary::before { color: var(--muted); }
.cat > summary .cname { font-weight: 600; }
.cat > summary .cn { margin-left: auto; font-family: var(--mono); font-size: 0.72rem;
  font-variant-numeric: tabular-nums; color: var(--fig-ink); }
.cat > summary:hover .cname { color: var(--accent); }
.cat .rows { padding: 0.3rem 0 1.2rem 1.2rem; }
.r { margin-bottom: 0.9rem; }
.r .t { font-size: 0.98rem; font-weight: 600; margin: 0 0 0.1rem; line-height: 1.45; }
.r .t a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule); }
.r .t a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.r .n { font-size: 0.95rem; color: var(--muted); margin: 0; }
.r .m { font-family: var(--mono); font-size: 0.66rem; color: var(--fig-ink);
  margin: 0.15rem 0 0; max-width: none; }
.r .dd { font-family: var(--mono); font-size: 0.72rem; color: var(--warn);
  font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 0.35rem; }

.arc { margin-top: 1.8rem; }
.arc .e { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem;
  align-items: baseline; padding: 0.85rem 0.5rem; margin: 0 -0.5rem;
  border-bottom: 1px solid var(--rule-2); text-decoration: none; border-radius: 3px;
  color: inherit; }
.arc .e:hover { background: var(--fig-paper); }
.arc .e:hover .h { color: var(--accent); }
.arc .d { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--fig-ink); font-variant-numeric: tabular-nums; }
.arc .h { font-size: 1rem; color: var(--fg); }
.arc .h .sub { display: block; font-size: 0.85rem; color: var(--muted); }
.arc .m { font-family: var(--mono); font-size: 0.66rem; color: var(--fig-ink); white-space: nowrap; }
.arc .e.bad .h { color: var(--muted); font-style: italic; }
.arc .e.bad .m { color: var(--warn); }

/* ------------------------------ standing pages ------------------------------ */
.prose h2 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.01em; margin: 2.4rem 0 0.7rem; }
.prose h3 { font-size: 1.02rem; font-weight: 700; margin: 1.7rem 0 0.5rem; }
.prose h4 { font-size: 0.95rem; font-weight: 700; margin: 1.3rem 0 0.4rem; }
.prose b, .prose strong { font-weight: 700; }
.prose code { font-family: var(--mono); font-size: 0.78em; background: var(--fig-paper);
  padding: 0.08em 0.32em; border-radius: 3px; }
.prose pre { background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.9rem 1.1rem; overflow-x: auto; margin: 0 0 1.2rem; }
.prose pre code { background: none; padding: 0; font-size: 0.76rem; line-height: 1.75; }
.prose pre.legal { font-family: var(--mono); font-size: 0.72rem; line-height: 1.8;
  white-space: pre-wrap; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0; }
.prose blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 2px solid var(--rule);
  color: var(--muted); }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.4rem; max-width: var(--prose); }
.tbl { overflow-x: auto; margin: 0 0 1.4rem; }
.tbl table { border-collapse: collapse; font-size: 0.9rem; min-width: 100%; }
.tbl th, .tbl td { text-align: left; padding: 0.5rem 0.9rem 0.5rem 0;
  border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fig-ink); font-weight: 500;
  border-bottom-color: var(--rule); }
.tbl td { color: var(--muted); }

.limits li { margin-bottom: 0.65rem; }
.roles { list-style: none; padding-left: 0; }
.roles li { margin-bottom: 0.5rem; }
.roles b { display: inline-block; min-width: 7.5rem; font-weight: 700; }
.roles .t1 { color: var(--t1); } .roles .t2 { color: var(--t2); }
.roles .t3 { color: var(--t3); } .roles .t4 { color: var(--t4); }

/* Both figures are 520 units wide with 10-11px labels. Left to scale freely they
   hit 6.6px on a 390px phone, which is not readable. So the drawing gets a floor
   of 470px and scrolls sideways inside its own box rather than shrinking past it.
   min-width beats max-width in the cascade, which is what makes the floor hold.
   Only the drawing scrolls: the caption stays at reading width outside the box,
   and the page body never scrolls sideways. Past ~600px the floor never binds. */
.fig { margin: 2rem 0 2.4rem; }
.figscroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.fig svg { min-width: 470px; max-width: 100%; height: auto; display: block; color: var(--fg); }
/* No max-width here. The caption belongs to the figure, so its rule has to span
   the figure; capping it at 46ch drew a half-width line under a full-width
   drawing and squeezed the text into a narrow stack beside all that white. The
   article is already 72ch, so nothing runs long. */
.fig figcaption { font-size: 0.88rem; line-height: 1.6; color: var(--muted);
  margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--rule);
  max-width: none; text-wrap: pretty; }
.fig .hint { display: none; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fig-ink);
  margin: 0 0 0.5rem; max-width: none; }
@media (max-width: 600px) { .fig .hint { display: block; } }

.srcs { padding: 0.2rem 0 1rem; }
.s { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  padding: 0.4rem 0; border-bottom: 1px solid var(--rule-2); }
.s:last-child { border-bottom: 0; }
.s .sn { font-size: 0.95rem; }
.s .sh { font-family: var(--mono); font-size: 0.66rem; color: var(--fig-ink); }
.s.down .sn { color: var(--muted); }
.s .st { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn);
  border-radius: 2px; padding: 0 0.28rem; }
.gblurb { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.6rem; }
.gblurb .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block;
  margin-right: 0.5rem; }
.gblurb .dot.t1 { background: var(--t1); } .gblurb .dot.t2 { background: var(--t2); }
.gblurb .dot.t3 { background: var(--t3); } .gblurb .dot.t4 { background: var(--t4); }

.dfiles { margin: 1.6rem 0 1.8rem; }
.df { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px solid var(--rule-2); }
.df:last-child { border-bottom: 0; }
.df .fn { font-family: var(--mono); font-size: 0.76rem; }
.df .fd { font-size: 0.92rem; color: var(--muted); }
@media (max-width: 560px) {
  .df { grid-template-columns: 1fr; gap: 0.15rem; }
  .arc .e { grid-template-columns: 4rem 1fr; }
  .arc .m { grid-column: 2; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }