/* ============================================================
   BioSolveIT CLI 学习中心 — shared stylesheet  (v2, 2026-06)
   Aesthetic: dark scientific terminal / lab instrument.
   Geist (Latin UI) + JetBrains Mono (code & labels), self-hosted.
   Full parity dark & light themes; category accent system.
   ============================================================ */

/* ---------- self-hosted fonts (work offline / in CN) ---------- */
@font-face{font-family:'Geist';src:url('fonts/geist-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist';src:url('fonts/geist-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist';src:url('fonts/geist-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist';src:url('fonts/geist-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --font-sans:'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans SC', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'PingFang SC', 'Microsoft YaHei', monospace;

  /* ===== dark theme (default) ===== */
  --bg:        #090c12;
  --bg-1:      #0f141d;
  --bg-2:      #141b26;
  --bg-3:      #1a2330;
  --bg-code:   #0a0e15;
  --line:      #232e3e;
  --line-2:    #18202c;
  --ink-strong:#f2f6fb;   /* headings, strong */
  --ink:       #d4dde8;   /* body */
  --ink-2:     #95a4b8;   /* secondary */
  --ink-3:     #7a8aa0;   /* faint / labels (AA-tuned) */

  --grid-op:   0.022;
  --glow-op:   0.07;
  --shadow:    0 12px 30px -18px rgba(0,0,0,.75);
  --shadow-lg: 0 30px 60px -30px rgba(0,0,0,.85);

  /* category accents */
  --dock:  #ff8a4c; --dock-2:#ffb486;
  --sim:   #57c7ff; --sim-2: #93dbff;
  --space: #4fe0a0; --space-2:#86f0c4;

  --accent:  var(--sim);
  --accent-2:var(--sim-2);

  --radius:   14px;
  --radius-lg:18px;
  --maxw:     1000px;
  --maxw-bar: 1200px;

  color-scheme: dark;

  /* terminal syntax palette (code bg stays dark in both themes) */
  --co-base:#cdd9e6; --co-cm:#637085; --co-pr:#56d364; --co-fl:#79c0ff; --co-st:#e3b341; --co-kw:#ff7b9c;
}

/* ===== light theme ===== */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:        #eef1f7;
  --bg-1:      #ffffff;
  --bg-2:      #ffffff;
  --bg-3:      #f5f8fc;
  --bg-code:   #0c1119;       /* keep code dark for contrast */
  --line:      #d7deea;
  --line-2:    #e7edf5;
  --ink-strong:#0c131f;
  --ink:       #2c384a;
  --ink-2:     #54627a;
  --ink-3:     #5f6c80;   /* AA-tuned */

  --grid-op:   0.05;
  --glow-op:   0.10;
  --shadow:    0 10px 26px -18px rgba(33,52,94,.30);
  --shadow-lg: 0 26px 54px -28px rgba(33,52,94,.32);

  --dock:  #d65a14; --dock-2:#b8480d;
  --sim:   #1378cf; --sim-2: #0f5da6;
  --space: #0e9b62; --space-2:#0a7449;
}

body[data-cat="dock"]  { --accent:var(--dock);  --accent-2:var(--dock-2); }
body[data-cat="sim"]   { --accent:var(--sim);   --accent-2:var(--sim-2); }
body[data-cat="space"] { --accent:var(--space); --accent-2:var(--space-2); }

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 84% -8%, color-mix(in srgb, var(--accent) calc(var(--glow-op)*100%), transparent), transparent 60%),
    radial-gradient(820px 460px at -6% 16%, color-mix(in srgb, var(--space) calc(var(--glow-op)*70%), transparent), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16.5px;
  line-height:1.66;
  font-feature-settings:"cv01","ss03","tnum" 0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,.topbar,.card,.tool-card,.fact,.note,.pager a,.code,.figure,.tbl td,.tbl th,#toTop,.tbtn{
  transition:background-color .25s ease, border-color .25s ease, color .2s ease, box-shadow .25s ease;
}

/* faint engineering grid */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(125,150,185,var(--grid-op)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,150,185,var(--grid-op)) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 55%, transparent 100%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 55%, transparent 100%);
}

.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

::selection{ background:color-mix(in srgb, var(--accent) 34%, transparent); color:var(--ink-strong); }

/* ---------- top nav ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{ display:flex; align-items:center; gap:16px; height:60px; max-width:var(--maxw-bar); }
.brand{
  font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.01em;
  color:var(--ink-strong); text-decoration:none; white-space:nowrap; border:none; flex:none;
  display:inline-flex; align-items:center; gap:0;
}
.brand:hover{ opacity:.85; }
.brand .dot{ color:var(--accent); }
.topbar nav{ margin-left:auto; display:flex; gap:1px; flex-wrap:nowrap; align-items:center; }
.topbar nav a{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2);
  text-decoration:none; white-space:nowrap; border:none;
  padding:6px 9px; border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.topbar nav a:hover{ color:var(--ink-strong); background:color-mix(in srgb, var(--ink-3) 16%, transparent); }
.topbar nav a.active{ color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, transparent); font-weight:600; }

.tbtn{
  flex:none; width:35px; height:35px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-2);
  color:var(--ink-2); cursor:pointer; display:grid; place-items:center;
  font-size:15px; line-height:1; padding:0;
}
.tbtn:hover{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); }
.tbtn svg{ width:17px; height:17px; }
#menuBtn{ display:none; }

/* ---------- hero ---------- */
.hero{ padding:72px 0 28px; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }
.hero h1{
  font-size:clamp(2.25rem,5.6vw,3.7rem); line-height:1.05; margin:0 0 18px;
  font-weight:700; letter-spacing:-.025em; color:var(--ink-strong);
}
.hero h1 .mono{ font-family:var(--font-mono); font-weight:700; color:var(--accent); letter-spacing:-.01em; }
.hero .lede{ font-size:1.16rem; color:var(--ink-2); max-width:68ch; margin:0; }

.tagrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.tag{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em;
  padding:5px 12px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-2); background:color-mix(in srgb, var(--bg-2) 70%, transparent);
}
.tag.accent{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); background:color-mix(in srgb, var(--accent) 9%, transparent); }

/* ---------- sections & headings ---------- */
section{ padding:26px 0; }
h2{
  font-size:clamp(1.42rem,2.6vw,1.7rem); margin:42px 0 14px; letter-spacing:-.015em;
  color:var(--ink-strong); font-weight:600; display:flex; align-items:baseline; gap:13px;
}
h2 .num{
  font-family:var(--font-mono); font-size:.82rem; font-weight:600;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius:8px; padding:3px 9px; flex:none; line-height:1.1;
}
h3{ font-size:1.2rem; margin:30px 0 10px; color:var(--ink-strong); font-weight:600; letter-spacing:-.01em; }
p{ margin:13px 0; }
a{ color:var(--accent-2); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 32%, transparent); transition:border-color .15s,color .15s; }
a:hover{ border-bottom-color:var(--accent); color:var(--accent); }
strong{ color:var(--ink-strong); font-weight:600; }
hr{ border:none; border-top:1px solid var(--line); margin:34px 0; }

/* ---------- code blocks (terminal) ---------- */
.code{
  position:relative; background:var(--bg-code); border:1px solid var(--line);
  border-radius:var(--radius); margin:18px 0; overflow:hidden; box-shadow:var(--shadow);
}
.code .bar{
  position:relative; display:flex; align-items:center; gap:7px;
  padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.code .bar .c{ width:11px; height:11px; border-radius:50%; background:#39435a; }
.code .bar .c:nth-child(1){ background:#ff5f56; } .code .bar .c:nth-child(2){ background:#ffbd2e; } .code .bar .c:nth-child(3){ background:#27c93f; }
.code .bar .label{ margin-left:9px; font-family:var(--font-mono); font-size:11.5px; color:#7e8ca3; }
.code .copy{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.03em;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#aeb9cc;
  border-radius:8px; padding:5px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:.15s;
}
.code .copy:hover{ color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
.code .copy.ok{ color:#56d364; border-color:rgba(86,211,100,.5); }
.code .copy svg{ width:13px; height:13px; }
.code pre{
  margin:0; padding:16px 18px; overflow-x:auto;
  font-family:var(--font-mono); font-size:13.5px; line-height:1.75; color:var(--co-base);
  scrollbar-width:thin;
}
.code pre .cm{ color:var(--co-cm); font-style:italic; }
.code pre .fl{ color:var(--co-fl); }
.code pre .pr{ color:var(--co-pr); }
.code pre .st{ color:var(--co-st); }
.code pre .kw{ color:var(--co-kw); }

code.inline{
  font-family:var(--font-mono); font-size:.86em;
  background:color-mix(in srgb, var(--accent) 9%, var(--bg-3));
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line-2));
  padding:1.5px 6px; border-radius:6px; color:var(--accent-2); white-space:nowrap;
}
:root[data-theme="light"] code.inline{ color:var(--accent-2); }

/* ---------- callouts ---------- */
.note{
  position:relative; border:1px solid var(--line);
  border-left:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, var(--bg-2));
  border-radius:0 12px 12px 0; padding:14px 16px 14px 18px; margin:18px 0;
}
.note .h{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:5px; font-weight:600; }
.note.warn{ --accent:#f5a623; }
.note.tip { --accent:var(--space); }
:root[data-theme="light"] .note.warn{ --accent:#c87f0a; }

/* ---------- cards / steps ---------- */
.card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin:18px 0; box-shadow:var(--shadow); }

.steps{ counter-reset:step; margin:20px 0; padding:0; list-style:none; }
.steps>li{ position:relative; padding:3px 0 24px 54px; border-left:1px dashed var(--line); margin-left:16px; }
.steps>li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps>li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:-17px; top:-2px; width:34px; height:34px; border-radius:10px;
  background:var(--bg-3); border:1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  color:var(--accent); font-family:var(--font-mono); font-weight:700; font-size:14px;
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.steps>li .st-h{ font-weight:600; color:var(--ink-strong); margin-bottom:3px; }

ul.clean{ margin:13px 0; padding-left:22px; }
ul.clean li{ margin:7px 0; }
ul.clean li::marker{ color:var(--accent); }

/* ---------- tables ---------- */
.table-scroll{ overflow-x:auto; margin:18px 0; border-radius:12px; scrollbar-width:thin; }
.tbl{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
.table-scroll .tbl{ margin:0; }
.tbl th,.tbl td{ text-align:left; padding:11px 13px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.tbl thead th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--ink-3) 7%, transparent); }
.tbl td code{ font-family:var(--font-mono); color:var(--accent-2); font-size:13px; }
.tbl tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 5%, transparent); }

/* option list */
.opts{ margin:18px 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:4px 18px; box-shadow:var(--shadow); }
.opt{ border-bottom:1px solid var(--line-2); padding:15px 0; }
.opt:last-child{ border-bottom:none; }
.opt .flag{ font-family:var(--font-mono); font-size:13.5px; color:var(--accent-2); font-weight:600; }
.opt .def { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); margin-left:8px; }
.opt p{ margin:7px 0 0; color:var(--ink-2); font-size:14.5px; }

/* ---------- pager ---------- */
.pager{ display:flex; gap:14px; margin:54px 0 0; }
.pager a{ flex:1; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:var(--bg-2); text-decoration:none; box-shadow:var(--shadow); }
.pager a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.pager .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.pager .t{ color:var(--ink-strong); font-weight:600; margin-top:4px; }
.pager .next{ text-align:right; }

/* ---------- footer ---------- */
footer{ margin-top:76px; border-top:1px solid var(--line); padding:32px 0 56px; color:var(--ink-3); font-size:13.5px; }
footer .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer a{ color:var(--ink-2); }

/* ---------- index: tool grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(272px,1fr)); gap:16px; margin:8px 0 22px; }
.tool-card{
  position:relative; display:block; text-decoration:none; border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; background:var(--bg-2); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tool-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--tc,var(--accent)); opacity:.0; transition:opacity .16s; }
.tool-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--tc,var(--accent)) 60%, var(--line)); box-shadow:var(--shadow-lg); }
.tool-card:hover::before{ opacity:1; }
.tool-card .ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:700; font-size:16px;
  background:color-mix(in srgb, var(--tc) 16%, var(--bg-3)); color:var(--tc);
  border:1px solid color-mix(in srgb, var(--tc) 40%, var(--line)); margin-bottom:15px;
}
.tool-card h3{ margin:0 0 4px; font-size:1.18rem; color:var(--ink-strong); }
.tool-card .role{ font-family:var(--font-mono); font-size:11.5px; color:var(--tc); letter-spacing:.03em; }
.tool-card p{ margin:11px 0 0; font-size:14px; color:var(--ink-2); line-height:1.6; }

.cat-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:36px 0 8px; display:flex; align-items:center; gap:12px; }
.cat-label::after{ content:""; flex:1; height:1px; background:var(--line); }

/* facts pills */
.facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin:24px 0; }
.fact{ border:1px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--bg-2); box-shadow:var(--shadow); }
.fact .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.fact .v{ font-size:14.5px; color:var(--ink-strong); margin-top:4px; font-weight:500; }
.fact .v code{ font-family:var(--font-mono); color:var(--accent-2); font-size:13px; }

/* ---------- figures ---------- */
.figure{ margin:18px 0; border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; box-shadow:var(--shadow); }
.figure img{ display:block; width:100%; height:auto; }
.figure .cap{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); padding:9px 13px; border-top:1px solid var(--line-2); background:var(--bg-2); }
.fig-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:14px; margin:16px 0; }
.fig-grid .figure{ margin:0; }

details.more{ border:1px solid var(--line); border-radius:var(--radius); padding:0; margin:16px 0; background:var(--bg-2); overflow:hidden; box-shadow:var(--shadow); }
details.more>summary{ cursor:pointer; padding:14px 18px; font-weight:600; color:var(--ink-strong); list-style:none; display:flex; align-items:center; gap:10px; }
details.more>summary::-webkit-details-marker{ display:none; }
details.more>summary::before{ content:"▸"; color:var(--accent); font-size:14px; transition:transform .15s; }
details.more[open]>summary::before{ transform:rotate(90deg); }
details.more>summary:hover{ color:var(--accent); }
details.more .body{ padding:0 18px 18px; }

/* ---------- reading progress ---------- */
#progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); z-index:60; transition:width .1s linear; box-shadow:0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---------- on-page TOC ---------- */
.toc{ position:sticky; top:80px; align-self:start; font-size:13.5px; line-height:1.5; }
.toc .toc-h{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.toc a{ display:block; color:var(--ink-2); text-decoration:none; border:none; border-left:2px solid var(--line); padding:5px 0 5px 13px; transition:color .15s, border-color .15s; }
.toc a:hover{ color:var(--ink-strong); border-left-color:var(--accent); }
.toc a.active{ color:var(--accent); border-left-color:var(--accent); font-weight:500; }

/* layout: content + sticky sidebar TOC.
   FIX: main is the WIDE left column, TOC the narrow right column,
   regardless of DOM order (TOC comes first in markup). */
.with-toc{ display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:40px; align-items:start; }
.with-toc>.main{ grid-column:1; grid-row:1; min-width:0; }
.with-toc>.toc{ grid-column:2; grid-row:1; }

/* ---------- back to top ---------- */
#toTop{ position:fixed; right:22px; bottom:22px; z-index:55; width:44px; height:44px; border-radius:12px; cursor:pointer; background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2); display:grid; place-items:center; opacity:0; pointer-events:none; transform:translateY(8px); box-shadow:var(--shadow-lg); }
#toTop.show{ opacity:1; pointer-events:auto; transform:none; }
#toTop:hover{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); transform:translateY(-2px); }
#toTop svg{ width:18px; height:18px; }

/* ---------- index search ---------- */
.search-wrap{ position:relative; margin:10px 0 4px; }
.search-wrap svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3); pointer-events:none; }
#toolSearch{ width:100%; padding:14px 16px 14px 42px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-family:var(--font-mono); font-size:14px; box-shadow:var(--shadow); }
#toolSearch:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
#toolSearch::placeholder{ color:var(--ink-3); }
.no-result{ color:var(--ink-3); font-family:var(--font-mono); font-size:13px; padding:18px 2px; display:none; }

/* ---------- workflow diagram (index) ---------- */
.flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin:20px 0 8px; }
.flow .step{ flex:1 1 150px; min-width:140px; position:relative; border:1px solid var(--line); border-top:3px solid var(--fc,var(--accent)); border-radius:12px; padding:14px 15px; background:var(--bg-2); text-decoration:none; display:block; box-shadow:var(--shadow); }
.flow .step:hover{ border-color:var(--fc,var(--accent)); transform:translateY(-3px); transition:transform .14s; box-shadow:var(--shadow-lg); }
.flow .step .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--fc); letter-spacing:.1em; }
.flow .step .nm{ font-weight:600; color:var(--ink-strong); margin:3px 0 2px; font-size:1.02rem; }
.flow .step .ds{ font-size:12.5px; color:var(--ink-2); }
.flow .arr{ align-self:center; color:var(--ink-3); font-family:var(--font-mono); flex:none; }

/* ---------- entrance animation (gated; never hides content if JS/CSS fail) ---------- */
@media (prefers-reduced-motion:no-preference){
  body.ready .hero>*{ animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) backwards; }
  body.ready .hero .eyebrow{ animation-delay:.02s; }
  body.ready .hero h1{ animation-delay:.08s; }
  body.ready .hero .lede{ animation-delay:.16s; }
  body.ready .hero .tagrow, body.ready .hero .facts{ animation-delay:.24s; }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .with-toc{ grid-template-columns:1fr; gap:0; }
  .with-toc>.toc{ display:none; }
}
@media (max-width:1080px){
  #menuBtn{ display:grid; }
  .topbar nav{
    position:fixed; inset:60px 0 auto 0; flex-direction:column; gap:0;
    background:color-mix(in srgb, var(--bg) 96%, transparent); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg); padding:8px 24px 16px; display:none;
    max-height:calc(100vh - 60px); overflow-y:auto;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .topbar nav.open{ display:flex; }
  .topbar nav a{ padding:13px 10px; border-bottom:1px solid var(--line-2); font-size:14.5px; border-radius:0; }
  .topbar nav a:last-child{ border-bottom:none; }
  .topbar nav a.active{ background:transparent; }
}
@media (max-width:640px){
  body{ font-size:15.5px; }
  .hero{ padding:44px 0 18px; }
  .wrap{ padding:0 18px; }
  .pager{ flex-direction:column; }
  .flow .arr{ display:none; }
  .flow .step{ flex-basis:100%; }
  h2{ margin-top:34px; }
}

/* nicer thin scrollbars on dark surfaces */
.code pre::-webkit-scrollbar,.table-scroll::-webkit-scrollbar{ height:9px; }
.code pre::-webkit-scrollbar-thumb,.table-scroll::-webkit-scrollbar-thumb{ background:rgba(150,165,190,.28); border-radius:9px; }
.code pre::-webkit-scrollbar-thumb:hover,.table-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(150,165,190,.45); }

/* ============================================================
   v3 polish — a11y, heading anchors, focus, print
   ============================================================ */

/* skip-to-content (keyboard users) */
.skip{
  position:fixed; left:14px; top:-60px; z-index:100;
  background:var(--accent); color:#04121b; font-family:var(--font-mono); font-weight:700;
  font-size:13px; padding:9px 16px; border-radius:10px; text-decoration:none;
  border:none; box-shadow:var(--shadow-lg); transition:top .18s ease;
}
.skip:focus{ top:14px; outline:none; }
:root[data-theme="light"] .skip{ color:#fff; }

/* visible keyboard focus everywhere (mouse clicks stay clean) */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
.tool-card:focus-visible,.flow .step:focus-visible,.pager a:focus-visible{ outline-offset:4px; }
.topbar nav a:focus-visible{ outline-offset:1px; }
:focus:not(:focus-visible){ outline:none; }
[tabindex="-1"]:focus{ outline:none; }

/* heading anchor links (hover a section title -> clickable #) */
.main h2, .main h3{ scroll-margin-top:84px; }
.h-anchor{
  margin-left:.45em; font-family:var(--font-mono); font-weight:400;
  color:var(--accent); opacity:0; text-decoration:none; border:none;
  font-size:.62em; vertical-align:middle; transition:opacity .15s ease;
  -webkit-user-select:none; user-select:none;
}
.main h2:hover .h-anchor, .main h3:hover .h-anchor,
.h-anchor:focus-visible{ opacity:.9; }
.h-anchor:hover{ opacity:1; }
.h-anchor.copied{ opacity:1; color:var(--space); }

/* search keyboard hint on the index */
.search-wrap .kbd{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:6px; padding:2px 7px; pointer-events:none;
  background:var(--bg-3);
}
.search-wrap.focused .kbd{ display:none; }

/* ---------- print stylesheet (clean docs printout) ---------- */
@media print{
  :root{ --bg:#fff; --bg-1:#fff; --bg-2:#fff; --bg-3:#fff; --ink:#111; --ink-strong:#000; --ink-2:#333; --ink-3:#555; --line:#ccc; --line-2:#e2e2e2; }
  body{ background:#fff !important; color:#000; font-size:11.5pt; }
  body::before, .topbar, #progress, #toTop, .skip, .tbtn, #menuBtn, .toc, .h-anchor, .search-wrap, .code .copy{ display:none !important; }
  .wrap{ max-width:none; padding:0; }
  .with-toc{ display:block; }
  a{ color:#000; border:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; word-break:break-all; }
  .code, .card, .fact, .note, .opts, .figure, .tool-card, .flow .step, details.more{ border:1px solid #bbb !important; box-shadow:none !important; break-inside:avoid; }
  .code pre{ color:#000; white-space:pre-wrap; word-break:break-word; }
  .code .bar{ background:#f2f2f2; }
  .code pre .cm,.code pre .fl,.code pre .pr,.code pre .st,.code pre .kw{ color:#000; }
  details.more{ }
  details.more[open] .body, details.more .body{ display:block; }
  .figure{ background:#fff; }
  h1,h2,h3{ break-after:avoid; }
  .pager{ display:none; }
}