/* =====================================================================
   BUFONITE — inner pages: check, docs, safety posture, $BUFONITE, 404.
   Loaded after style.css, so the tokens, nav, buttons, code blocks, grade marks and footer are the
   landing's own. What stays on the landing: the welcome, the coins, the glow, smooth scroll and the
   word-by-word reveals. Here the chrome is quiet and the content carries the page: the grade, the
   finding with its file and line, the commands.
   Spacing on a 4 px grid. Gold marks a finding or grade C, red only CLOSED, blue the primary action.
   ===================================================================== */

.page main { padding-top: 84px; } /* the nav is solid from the start (.nav.is-solid = 84 px) */
.page .nav::before, .page .nav::after { transition: none; }
.page .code { box-shadow: none; }
.page .code__bar > span + .code__copy { margin-left: auto; }

/* the current page's entry in the nav menus */
.dropdown a[aria-current="page"] { background: rgba(255, 255, 255, 0.06); }
.dropup a[aria-current="page"] { color: #fff; }

/* ------------------------------------------------------------------ page head */
.ph { padding-top: clamp(56px, 9vh, 96px); padding-bottom: clamp(32px, 5vh, 56px); }
.ph__eyebrow { margin: 0 0 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.ph__title { margin: 0; max-width: 20ch; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.ph__lede { margin: 20px 0 0; max-width: 62ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.ph__lede a, .prose a:not(.btn), .pr a, .tk a { color: #fff; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.ph__lede a:hover, .prose a:not(.btn):hover, .pr a:hover, .tk a:hover { text-decoration-color: #fff; }

/* ------------------------------------------------------------------ buttons */
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--quiet { border: 1px solid var(--line-2); color: #e7e9ee; }
.btn--quiet:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ------------------------------------------------------------------ footer */
.page-foot { margin-top: clamp(96px, 14vh, 160px); border-top: 1px solid var(--line); }
.page-foot .footer { padding-top: 24px; padding-bottom: 24px; }

/* grade letters as plain text (lists, meta) */
.g-a { color: #b9c8ff; }
.g-b { color: #fff; }
.g-c { color: var(--gold-hi); }
.g-closed { color: var(--red); }

/* =====================================================================
   CHECK  (check/)
   ===================================================================== */
.ck .ph { padding-bottom: 0; }
.ck .ph__title { max-width: none; }
/* once a check runs (or a report opens from a link), the head steps back and the report starts high */
.ck:not([data-state="idle"]) .ph { padding-top: clamp(32px, 5vh, 56px); }
.ck:not([data-state="idle"]) .ph__title { font-size: clamp(28px, 2.6vw, 40px); }
.ck:not([data-state="idle"]) .ph__lede, .ck:not([data-state="idle"]) .ckf__formats { display: none; }

.ckf {
  margin-top: 32px; display: flex; align-items: center; gap: 8px;
  width: min(760px, 100%); padding: 6px 6px 6px 24px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line-2);
  transition: border-color 0.2s, background-color 0.2s;
}
.ck:not([data-state="idle"]) .ckf { margin-top: 20px; }
.ckf:focus-within { border-color: rgba(91, 124, 255, 0.8); }
.ckf input { flex: 1; min-width: 0; height: 48px; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 17px; }
.ckf input::placeholder { color: #7d828b; }
.ckf .btn { height: 48px; padding: 0 24px; }
.ckf__note { margin: 12px 0 0; min-height: 20px; max-width: 760px; font-size: 14px; line-height: 20px; color: var(--muted); }
.ckf__note:empty { margin-top: 0; }
.ckf__note.is-error { color: #ff8a80; }
.ckf__formats { margin: 4px 0 0; max-width: 760px; font-size: 14px; line-height: 22px; color: var(--dim); text-wrap: pretty; }
.ckf__formats code, .run code, .rp code, .rc code { padding: 0; background: none; border-radius: 0; font-size: 0.92em; color: var(--muted); }
.ckf__formats a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.ckf__formats a:hover { color: #fff; text-decoration-color: #fff; }

.ck__body { padding-top: clamp(56px, 8vh, 88px); }
.ck:not([data-state="idle"]) .ck__body { padding-top: 40px; }
.ck__h { margin: 0 0 16px; font-size: 15px; line-height: 22px; font-weight: 500; color: #fff; }
.ck__h span { margin-left: 8px; font-weight: 400; color: var(--dim); }

/* idle: what a check does, and the latest checks */
.ck__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.ck__intro.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.cs { margin: 0; padding: 0; list-style: none; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.cs li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; column-gap: 20px; align-items: baseline; padding: 16px 20px; }
.cs li + li::before, .cr li + li::before, .rc a + a::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: 1px; background: var(--line); }
.cs b { font-size: 15px; line-height: 22px; font-weight: 500; }
.cs span { font-size: 14px; line-height: 22px; color: var(--muted); }
.cs em { font-style: normal; font-family: var(--mono); font-size: 13px; line-height: 22px; color: var(--dim); text-align: right; }
.cs .is-c { color: var(--gold-hi); }
.cs .is-closed { color: var(--red); }
.cs__head { padding-top: 12px !important; padding-bottom: 12px !important; }
.cs__head span, .cs__head em { font-family: var(--font); font-size: 13px; color: var(--dim); }

.rc { display: grid; border-radius: 16px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.rc a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 14px 20px; transition: background-color 0.16s var(--ease-out); }
.rc a:hover { background: rgba(255, 255, 255, 0.03); }
.rc__grade { font-size: 15px; line-height: 22px; font-weight: 600; }
.rc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 22px; }
.rc__name code { margin-left: 8px; color: var(--dim); }
.rc__time { font-family: var(--mono); font-size: 13px; line-height: 22px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc__empty { margin: 0; padding: 16px 20px; font-size: 14px; color: var(--dim); }

/* running: one live line, like the CLI, and the courses waiting for the report */
.run { max-width: 860px; }
.run__line { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-radius: 16px 16px 0 0; background: var(--card); border: 1px solid var(--line); font-size: 15px; line-height: 22px; }
.run__spin { flex: none; width: 1ch; font-family: var(--mono); color: var(--blue-soft); }
.run__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.run__what b { font-weight: 500; color: #fff; }
.run__time { margin-left: auto; flex: none; font-family: var(--mono); font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.run .cr { border-top: 0; border-radius: 0 0 16px 16px; }
.run__note { margin: 16px 0 0; max-width: 64ch; font-size: 14px; line-height: 22px; color: var(--dim); }

/* the courses of a check, settings-list style (as the findings switches on the landing) */
.cr { margin: 0; padding: 0; list-style: none; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.cr li { position: relative; display: grid; grid-template-columns: 16px 112px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 14px 20px; }
.cr__mk { font-family: var(--mono); font-size: 14px; line-height: 22px; color: var(--dim); text-align: center; }
.cr__name { font-size: 15px; line-height: 22px; color: #fff; }
.cr__note { min-width: 0; font-size: 14px; line-height: 22px; color: var(--muted); overflow-wrap: anywhere; }
.cr__note small { display: block; font-family: var(--mono); font-size: 12.5px; line-height: 20px; color: var(--dim); }
.cr__time { font-family: var(--mono); font-size: 13px; line-height: 22px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr .is-ok .cr__mk { color: var(--ice); }
.cr .is-fail .cr__mk { color: var(--red); }
.cr .is-run .cr__mk { color: var(--blue-soft); }
.cr .is-wait .cr__note { color: var(--dim); }
.cr .is-flag .cr__mk, .cr .is-flag .cr__note { color: var(--gold-hi); }
.cr .is-leak .cr__mk, .cr .is-leak .cr__note { color: var(--red); }
.cr .is-skip .cr__name, .cr .is-fail .cr__name, .cr .is-wait .cr__name { color: var(--muted); }

/* ---------------------------------------------------------------- the report */
.rp:focus { outline: none; }
.rp__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.rp__id { min-width: 0; }
.rp__kind { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.rp__name { margin: 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.rp__name small { margin-left: 12px; font-size: 0.5em; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.rp__meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-family: var(--mono); font-size: 13px; line-height: 20px; color: var(--dim); }
.rp__meta a { color: var(--muted); }
.rp__meta a:hover { color: #fff; }
.rp__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rp__notice { margin: 20px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 14px; line-height: 22px; color: #c9ccd3; }
.rp__notice a { color: #fff; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

.rp__body { margin-top: clamp(40px, 6vh, 64px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
.rp .gr { top: 108px; }
.rp .gr__do { margin-top: 40px; }
.rp__summary { margin: 16px 0 0; max-width: 46ch; font-size: 16px; line-height: 24px; color: #c9ccd3; overflow-wrap: anywhere; }
.rp .gr__sum { margin-top: 32px; }
.rp .gr__line dt { white-space: normal; }
.rp__caveat { margin: 20px 0 0; padding-left: 16px; border-left: 2px solid var(--line-2); max-width: 46ch; font-size: 14px; line-height: 22px; color: var(--muted); }
.rp .gr__agent { margin-top: 32px; }

.rp__sec + .rp__sec { margin-top: 56px; }
.rp__lead { margin: -8px 0 16px; max-width: 64ch; font-size: 14px; line-height: 22px; color: var(--dim); }

/* findings: the finding, where it is, the line itself */
.fd { display: grid; gap: 8px; padding: 20px 0; border-top: 1px solid var(--line); }
.fd:first-of-type { border-top-color: var(--line-2); }
.fd__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; line-height: 20px; color: var(--muted); }
.fd__sev { font-weight: 500; color: #fff; }
.fd__sev.is-high, .fd__sev.is-critical { color: var(--gold-hi); }
.fd__sev.is-leak { color: var(--red); }
.fd__sev.is-low, .fd__sev.is-info { color: var(--muted); }
.fd__loc { font-family: var(--mono); font-size: 12.5px; color: #c9ccd3; overflow-wrap: anywhere; }
.fd__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; overflow-wrap: anywhere; }
.fd__detail { margin: 0; max-width: 68ch; font-size: 15px; line-height: 24px; color: var(--muted); }
.fd__ev { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.045); font-family: var(--mono); font-size: 13px; line-height: 20px; color: #e7e9ee; white-space: pre-wrap; overflow-wrap: anywhere; }
.fd__ev b { margin-right: 1.4ch; font-weight: 400; color: var(--dim); }
/* an invisible character, made visible by the scanner as <U+200B> */
.fd__ev mark { padding: 0 2px; border-radius: 4px; background: rgba(230, 184, 92, 0.14); color: var(--gold-hi); }
.fd__hosts { margin: 0; font-size: 13px; line-height: 20px; color: var(--dim); }
.fd__hosts code { color: var(--muted); }
.fd-none { margin: 0; padding: 20px 0; border-top: 1px solid var(--line-2); font-size: 15px; line-height: 24px; color: var(--muted); }
.fd-more { border-top: 1px solid var(--line); }
.fd-more summary { padding: 16px 0; cursor: pointer; list-style: none; font-size: 14px; line-height: 22px; color: var(--muted); transition: color 0.2s; }
.fd-more summary::-webkit-details-marker { display: none; }
.fd-more summary::before { content: "+"; display: inline-block; width: 2ch; font-family: var(--mono); color: var(--dim); }
.fd-more[open] summary::before { content: "−"; }
.fd-more summary:hover { color: #fff; }

/* hosts */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.tbl th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-2); text-align: left; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tbl td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: #c9ccd3; }
.tbl td:first-child { color: #fff; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl code { padding: 0; background: none; border-radius: 0; font-size: 13.5px; color: inherit; }
.tbl .is-dim { color: var(--dim); }
.tbl .is-gold { color: var(--gold-hi); }

/* share: the card, the link, the README snippet */
.sh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sh__card { display: block; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: var(--card); aspect-ratio: 1200 / 630; }
.sh__card img { width: 100%; height: 100%; object-fit: cover; }
.sh__fields { display: grid; gap: 20px; }
.fld { display: grid; gap: 8px; }
.fld > span { font-size: 13px; line-height: 20px; color: var(--muted); }
.fld__row { display: flex; gap: 8px; }
.fld__row input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: #e7e9ee; font-family: var(--mono); font-size: 12.5px; outline: 0; }
.fld__row input:focus { border-color: rgba(91, 124, 255, 0.8); }
.sh__dl { font-size: 14px; line-height: 20px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; justify-self: start; }
.sh__dl:hover { color: #fff; text-decoration-color: #fff; }

@media (max-width: 1080px) {
  .ck__intro, .rp__body { grid-template-columns: minmax(0, 1fr); }
  .rp .gr { position: static; }
  .sh { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ckf { padding-left: 16px; }
  .ckf input { font-size: 16px; }
  .ckf .btn { padding: 0 16px; }
  .cs li { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 4px; padding: 14px 16px; }
  .cs li > span { grid-column: 1 / -1; grid-row: 2; }
  .cs__head { display: none !important; }
  .cr li { grid-template-columns: 16px minmax(0, 1fr) auto; row-gap: 2px; padding: 14px 16px; }
  .cr__time { grid-column: 3; grid-row: 1; }
  .cr__note { grid-column: 2 / -1; grid-row: 2; }
  .cs li + li::before, .cr li + li::before, .rc a + a::before { left: 16px; }
  .rc a { grid-template-columns: 56px minmax(0, 1fr); padding: 14px 16px; }
  .rc__time { grid-column: 2; }
  .run__line { flex-wrap: wrap; padding: 14px 16px; }
  .rp__actions { width: 100%; }
}

/* =====================================================================
   DOCS  (docs/)
   ===================================================================== */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.toc { position: sticky; top: 108px; max-height: calc(100vh - 132px); overflow: auto; padding-bottom: 24px; scrollbar-width: none; }
.toc summary { display: none; }
.toc__group + .toc__group { margin-top: 24px; }
.toc__label { margin: 0 0 4px; font-size: 13px; line-height: 20px; color: var(--dim); }
.toc a { display: block; margin-left: -12px; padding: 6px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--muted); transition: color 0.16s, background-color 0.16s; }
.toc a:hover { color: #fff; }
.toc a.is-on { color: #fff; background: rgba(255, 255, 255, 0.06); }

.prose { max-width: 840px; min-width: 0; }
.prose > section + section { margin-top: 96px; }
.prose h2 { margin: 0 0 16px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; scroll-margin-top: 108px; }
.prose h3 { margin: 48px 0 12px; font-size: 19px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; scroll-margin-top: 108px; }
.prose p, .prose li { font-size: 16px; line-height: 26px; color: #c9ccd3; }
.prose p { margin: 0 0 16px; max-width: 70ch; }
.prose ul { margin: 0 0 16px; padding-left: 20px; max-width: 70ch; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--dim); }
.prose strong { font-weight: 500; color: #fff; }
.prose .lead { font-size: 18px; line-height: 28px; color: var(--muted); }
.prose .code { margin: 20px 0 24px; }
.prose .tbl-wrap { margin: 20px 0 24px; }
.prose .tbl td { font-size: 15px; }
.prose .tbl td:first-child { white-space: nowrap; }
.prose .tbl td:first-child code { color: #fff; }
.prose .code__body { white-space: pre; }
.prose .install .code__body { white-space: pre-wrap; }
.prose .dev__tabs { margin: 0 0 12px; }
.note { margin: 20px 0 24px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 15px; line-height: 24px; color: #c9ccd3; max-width: 70ch; }
.note b { font-weight: 500; color: #fff; }

/* an endpoint's method and path */
.ep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0 0 12px; font-family: var(--mono); font-size: 15px; line-height: 22px; }
.ep b { font-weight: 600; color: var(--blue-soft); }
.ep span { color: #fff; }
.prose h3 + .ep { margin-top: -4px; }

/* three ways in, side by side */
.ways { margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ways a { display: grid; gap: 4px; align-content: start; padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: border-color 0.2s, background-color 0.2s; }
.ways a:hover { border-color: var(--line-2); background: var(--card-2); }
.ways b { font-size: 16px; line-height: 24px; font-weight: 500; color: #fff; }
.ways span { font-size: 14px; line-height: 22px; color: var(--muted); }
.ways code { margin-top: 8px; padding: 0; background: none; font-size: 12.5px; color: var(--dim); justify-self: start; }

/* the CLI's own screen (js/cli-ui.js), in a terminal window */
.code .cli { padding: 20px 24px 24px; font-size: 13.5px; overflow-x: auto; }
.code .cli .ln { width: max-content; min-width: 100%; }

/* inspection card preview */
.card-shot { margin: 20px 0 24px; max-width: 640px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.card-shot img { width: 100%; height: auto; }

@media (max-width: 960px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { position: static; max-height: none; overflow: visible; padding: 0; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
  .toc summary { display: block; padding: 14px 16px; cursor: pointer; font-size: 15px; line-height: 22px; font-weight: 500; list-style: none; }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary::after { content: "+"; float: right; font-family: var(--mono); color: var(--dim); }
  .toc[open] summary::after { content: "−"; }
  .toc__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding: 4px 16px 16px; }
  .toc__group + .toc__group { margin-top: 0; }
  .toc a { margin-left: 0; padding: 4px 0; }
  .toc a.is-on { background: none; }
  .ways { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   SAFETY POSTURE  (security/)
   ===================================================================== */
.prs { border-top: 1px solid var(--line-2); }
.pr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(40px, 6vw, 112px); padding: 40px 0; border-bottom: 1px solid var(--line); }
.pr__title { margin: 0; max-width: 18ch; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; scroll-margin-top: 108px; }
.pr__body p { margin: 0 0 16px; max-width: 62ch; font-size: 16px; line-height: 26px; color: #c9ccd3; }
.pr__body p:last-child { margin-bottom: 0; }
.pr__facts { margin: 20px 0 0; display: grid; }
.pr__facts div { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 5fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.pr__facts dt { font-size: 14px; line-height: 22px; color: var(--muted); }
.pr__facts dd { margin: 0; font-size: 14px; line-height: 22px; color: #fff; overflow-wrap: anywhere; }
.pr__facts code { padding: 0; background: none; border-radius: 0; font-size: 13px; color: inherit; }
@media (max-width: 900px) {
  .pr { grid-template-columns: minmax(0, 1fr); padding: 32px 0; }
  .pr__facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* =====================================================================
   $BUFONITE  (token/)
   ===================================================================== */
.tk { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.tk__facts { margin: 0; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.tk__facts div { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 20px; padding: 16px 20px; }
.tk__facts div + div::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: 1px; background: var(--line); }
.tk__facts dt { font-size: 14px; line-height: 22px; color: var(--muted); }
.tk__facts dd { margin: 0; font-size: 15px; line-height: 22px; color: #fff; }
.tk__facts .is-mono { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }
.tk__copy p { margin: 0 0 16px; max-width: 58ch; font-size: 16px; line-height: 26px; color: #c9ccd3; }
.tk__copy h2 { margin: 0 0 12px; font-size: 19px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.tk__copy h2:not(:first-child) { margin-top: 40px; }
@media (max-width: 900px) {
  .tk { grid-template-columns: minmax(0, 1fr); }
  .tk__facts div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 14px 16px; }
  .tk__facts .is-mono { font-size: 11.5px; } /* the 42-character address fits one line at 375 px */
  .tk__facts div + div::before { left: 16px; }
}

/* =====================================================================
   404
   ===================================================================== */
.nf { min-height: calc(100vh - 84px - 120px); display: grid; align-content: center; }
.nf .ph { padding-bottom: 0; }
.nf__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .rc a, .toc a, .ways a, .ckf { transition: none; }
}