/* ⛔ GENERATED — do not edit.
   The block below is extracted verbatim from site/stillcode/index.html by
   stillcode/tools/2fa-pages/build.mjs, so the 51 pages under /2fa/ cannot drift from the home
   page's palette. Edit index.html and re-run the generator. */
:root{color-scheme:light dark;
    --bg:#f2f3f5;--surface:#fff;--ink:#16181c;--ink-muted:#5a6070;--line:#dfe2e8;
    --accent:#2f4f8f;--accent-hover:#1d3a70;--brand:#10736c;--brand-hover:#0b5a55;--ok:#2f6b45;--ok-bg:#e4efe8;--warn:#8a5a22;--warn-bg:#f5ebdd}
  @media (prefers-color-scheme:dark){:root{
    --bg:#14161a;--surface:#1b1e24;--ink:#e8eaee;--ink-muted:#9aa1b0;--line:#2c313a;
    --accent:#8fb0e8;--accent-hover:#b3caf2;--brand:#5ec5ba;--brand-hover:#83d6cd;--ok:#7cc79b;--ok-bg:#1e3328;--warn:#d9ab6f;--warn-bg:#33281a}}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:400 16px/1.6 "Space Grotesk",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  .wrap{max-width:720px;margin:0 auto;padding:30px 22px 80px}
  a{color:var(--accent)}a:hover{color:var(--accent-hover)}
  h1{font-size:clamp(28px,5vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
  h2{font-size:21px;letter-spacing:-.01em;margin:38px 0 10px}
  h3{font-size:16px;margin:24px 0 6px}
  .lede{font-size:18px;color:var(--ink-muted);margin:0 0 8px;max-width:60ch}
  .home{display:inline-block;font-size:14px;color:var(--ink-muted);text-decoration:none;margin-bottom:26px}
  .get{display:inline-block;background:var(--brand);color:var(--surface);text-decoration:none;
       font-weight:500;font-size:16px;padding:11px 20px;border-radius:12px;margin:4px 0 2px}
  .get:hover{background:var(--brand-hover);color:var(--surface)}
  .home:hover{color:var(--accent)}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:16px 0}
  ul{padding-left:20px}li{margin:6px 0}
  .tag{display:inline-block;font-size:12px;font-weight:500;padding:3px 8px;border-radius:6px;margin-right:6px}
  /* ⭐ SOLID, not tinted, and the reason is a measurement rather than a preference.
     The tinted chips were 1.18:1 against the white card — the BOX never read, only the ink, so the
     tag looked like indented words. The same defect on the trial banner was reported as "the left
     padding looks wrong", which is what an invisible box looks like from the outside.
     Filled: FREE 6.34:1, PAID 5.89:1 against the card; each one's own ink ≥5.89:1.
     ⚠️ The themes need OPPOSITE fills — a dark fill on a dark card is the same invisible box one
     step along, so dark takes the light value with dark ink. */
  .tag.free{background:var(--tag-free);color:var(--tag-free-ink)}
  .tag.paid{background:var(--tag-paid);color:var(--tag-paid-ink)}
  :root{--tag-free:#2f6b45;--tag-free-ink:#ffffff;--tag-paid:#8a5a22;--tag-paid-ink:#ffffff}
  @media (prefers-color-scheme:dark){:root{
    --tag-free:#7cc79b;--tag-free-ink:#0f2a25;--tag-paid:#d9ab6f;--tag-paid-ink:#2a1f10}}
  table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
  th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  th{font-weight:500;color:var(--ink-muted);font-size:13px}
  .muted{color:var(--ink-muted);font-size:14px}
  footer{margin-top:52px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-muted);font-size:14px}
  code{font-family:ui-monospace,monospace;font-size:.92em;background:var(--bg);padding:1px 5px;border-radius:4px}

/* ── Additions used only by /2fa/ ───────────────────────────────────────────────────────────── */
.crumbs{font-size:13px;color:var(--ink-muted);margin:0 0 22px}
.crumbs a{color:var(--ink-muted)}
.methods td:first-child{font-weight:500}
.yes{color:var(--ok);font-weight:500}
.no{color:var(--ink-muted)}
.warnbox{background:var(--warn-bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:18px 0}
.warnbox p:last-child{margin-bottom:0}
.cols{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:14px 0}
.cols a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;
        padding:10px 13px;text-decoration:none;font-size:15px}
.src{font-size:13px;color:var(--ink-muted);margin-top:10px}
/* ⚠️ The provenance sentence prints a real documentation path, and GitHub's is 130 characters with
   no space in it. Without this the <p> pushes the page wider than a 375px viewport and the whole
   body scrolls sideways — a mobile-usability failure produced by a content change, which is the
   kind nothing in the build can see. anywhere breaks mid-token; break-word is the fallback. */
code{overflow-wrap:anywhere;word-break:break-word}

/* ── The /2fa/ diagrams ─────────────────────────────────────────────────────────────────────── */
figure{margin:24px 0}
figure img{display:block;max-width:100%;height:auto}
@media (max-width:699px){figure img{max-width:460px;margin-left:auto;margin-right:auto}}
figcaption{font-size:13px;line-height:1.5;color:var(--ink-muted);margin-top:9px;max-width:62ch}