/* anz33 docs — same tokens as anz33.com, so the two sites read as one product.
   Light is the default; the toggle stores a choice and dark follows the system
   until someone makes one. */

:root {
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-full:999px;
  --sans:"Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-body:16.5px; --fs-sm:14.5px; --fs-xs:13px; --fs-mono:13.5px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sidebar:264px; --toc:212px; --topbar:58px;
}
:root, [data-theme="light"] {
  color-scheme:light;
  --bg:#ffffff; --bg-elev:#fafafa; --surface:#ffffff; --surface-2:#f6f7f9;
  --line:rgba(10,12,20,.10); --line-strong:rgba(10,12,20,.18);
  --text:#14161c; --text-2:#545c6b; --text-3:#858c9a;
  --accent:#b45309; --accent-ink:#fff8ec; --ok:#0f766e;
  --term-bg:#0a0c11; --term-text:#d7dee4;
  --shadow:0 1px 2px rgba(10,12,20,.05), 0 12px 40px rgba(10,12,20,.10);
  --shadow-sm:0 1px 3px rgba(10,12,20,.06);
}
[data-theme="dark"] {
  color-scheme:dark;
  --bg:#08090c; --bg-elev:#0e1016; --surface:#12151d; --surface-2:#171b25;
  --line:rgba(255,255,255,.075); --line-strong:rgba(255,255,255,.14);
  --text:#f0f2f7; --text-2:#a3aab9; --text-3:#6c7382;
  --accent:#FFB454; --accent-ink:#1a1200; --ok:#2dd4bf;
  --term-bg:#0a0c11; --term-text:#d7dee4;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45);
  --shadow-sm:0 1px 3px rgba(0,0,0,.35);
}

*,*::before,*::after { box-sizing:border-box; }
html { background:var(--bg); -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--topbar) + 16px); }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:var(--fs-body); line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--s1); }
code { font-family:var(--mono); font-size:.9em; }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.022em; line-height:1.25; }
.i { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.muted { color:var(--text-3); font-size:var(--fs-xs); }

.skip { position:absolute; left:-9999px; }
.skip:focus { left:var(--s4); top:var(--s4); z-index:200; background:var(--surface);
  padding:var(--s3) var(--s4); border:1px solid var(--line-strong); border-radius:var(--r-sm); }

/* ---------------- top bar ---------------- */
.topbar { position:sticky; top:0; z-index:70; height:var(--topbar);
  display:flex; align-items:center; gap:var(--s4); padding:0 var(--s5);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:var(--s3); color:var(--text); }
.brand:hover { text-decoration:none; }
.brand__mark { width:26px; height:26px; display:grid; place-items:center; color:var(--accent);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); }
.brand__mark svg { width:15px; height:15px; }
.brand__text { font-family:var(--mono); font-weight:700; font-size:15.5px; letter-spacing:-.03em; }
.brand__text span { color:var(--accent); }
.brand__text em { font-style:normal; color:var(--text-3); font-weight:500; }
.topbar__end { margin-left:auto; display:flex; align-items:center; gap:var(--s2); }
.icon-btn { width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--text-2); }
.icon-btn:hover { color:var(--text); border-color:var(--line-strong); text-decoration:none; }
.sun { display:none; } [data-theme="light"] .sun { display:block; } [data-theme="light"] .moon { display:none; }
.burger { display:none; width:34px; height:34px; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--text-2); }

.search-open { display:inline-flex; align-items:center; gap:var(--s2); cursor:pointer;
  min-width:200px; padding:7px 10px; font-size:var(--fs-sm); font-family:var(--sans);
  color:var(--text-3); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); }
.search-open:hover { border-color:var(--line-strong); color:var(--text-2); }
.search-open kbd { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--text-3);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; background:var(--surface); }

/* the platform-aware download control */
.dl-btn { display:inline-flex; align-items:center; gap:var(--s2); white-space:nowrap;
  padding:8px 14px; font-size:var(--fs-sm); font-weight:600; border-radius:var(--r-sm);
  background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-sm); }
.dl-btn:hover { text-decoration:none; transform:translateY(-1px); }
.dl-btn .i { stroke-width:2; }
.dl-btn.is-working { opacity:.65; pointer-events:none; }

/* ---------------- layout ---------------- */
.shell { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr) var(--toc);
  gap:var(--s7); max-width:1440px; margin:0 auto; padding:0 var(--s5); align-items:start; }
.sidebar__inner, .toc__inner { position:sticky; top:calc(var(--topbar) + var(--s5));
  max-height:calc(100vh - var(--topbar) - var(--s6)); overflow-y:auto; padding:var(--s5) 0; }
.sidebar__inner { scrollbar-width:thin; }
.nav-group { margin-bottom:var(--s5); }
/* Labels, not document headings: the sidebar and the contents list are
   navigation, and h4s here would leave a screen-reader outline that jumps from
   the page's h2s into unrelated h4s. Both landmarks carry an aria-label. */
.nav-group__label { margin:0 0 var(--s3); font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; color:var(--text-3); }
.nav-group--sub .nav-group__label { text-transform:none; letter-spacing:0;
  font-size:var(--fs-xs); color:var(--text-2); }
.nav-group ul { list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.nav-group a { display:block; padding:5px 10px; margin-left:-10px; border-radius:6px;
  font-size:var(--fs-sm); color:var(--text-2); }
.nav-group a:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.nav-group a.on { background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent); font-weight:600; }
.nav-group code { font-size:.92em; }

main { min-width:0; padding:var(--s6) 0 var(--s8); }
.prose { max-width:74ch; }
.crumb { font-size:var(--fs-xs); color:var(--text-3); margin-bottom:var(--s3); }
.prose h1 { font-size:clamp(30px,4vw,40px); letter-spacing:-.03em; margin-bottom:var(--s4); }
.prose h2 { font-size:23px; margin:var(--s7) 0 var(--s3); padding-top:var(--s2); }
.prose h3 { font-size:18px; margin:var(--s6) 0 var(--s3); }
.prose p, .prose li { color:var(--text-2); }
.prose p { margin:0 0 var(--s4); }
.prose .lead { font-size:18.5px; color:var(--text-2); margin-bottom:var(--s5); }
.prose strong { color:var(--text); font-weight:600; }
.prose ul, .prose ol { margin:0 0 var(--s4); padding-left:var(--s5); display:grid; gap:var(--s2); }
.prose code:not(pre code) { background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:1px 5px; color:var(--text); }
.prose img { max-width:100%; border-radius:var(--r); border:1px solid var(--line); }
.prose h2 a.anchor, .prose h3 a.anchor { opacity:0; margin-left:8px; color:var(--text-3);
  font-weight:400; text-decoration:none; }
.prose h2:hover a.anchor, .prose h3:hover a.anchor { opacity:1; }

/* terminal blocks: one visual language with the dashboard and the landing page */
pre.term { position:relative; margin:0 0 var(--s5); padding:14px 16px; overflow-x:auto;
  background:var(--term-bg); color:var(--term-text); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); font-family:var(--mono); font-size:var(--fs-mono); line-height:1.75; }
pre.term code { font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:0; }
pre.term .out { color:#8d96a3; }
.copy { position:absolute; top:8px; right:8px; cursor:pointer; font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.04em; color:#8d96a3;
  background:rgba(255,255,255,.07); border:0; border-radius:5px; padding:5px 8px; }
.copy:hover { color:#fff; background:rgba(255,255,255,.14); }
.copy.done { color:var(--ok); }

.tablewrap { overflow-x:auto; margin:0 0 var(--s5); border:1px solid var(--line); border-radius:var(--r); }
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-2); }
th { color:var(--text); font-weight:600; background:var(--surface-2); white-space:nowrap; }
tr:last-child td { border-bottom:0; }

.note, .warn, .tip { display:grid; gap:var(--s2); margin:0 0 var(--s5); padding:var(--s4) var(--s5);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:var(--r); font-size:var(--fs-sm); color:var(--text-2); }
.warn { border-left-color:#c2410c; }
.tip { border-left-color:var(--accent); }
.note b, .warn b, .tip b { color:var(--text); }
.note p:last-child, .warn p:last-child, .tip p:last-child { margin-bottom:0; }

.steps { list-style:none; counter-reset:step; padding:0; display:grid; gap:var(--s5); margin-bottom:var(--s5); }
.steps > li { counter-increment:step; position:relative; padding-left:44px; }
.steps > li::before { content:counter(step); position:absolute; left:0; top:0;
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); font-size:var(--fs-xs); font-weight:700; }
.steps h3 { margin:0 0 var(--s2); font-size:17px; }

.cmdgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:var(--s3); margin:0 0 var(--s6); }
.cmdcard { display:grid; gap:4px; padding:var(--s4); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); color:var(--text); }
.cmdcard:hover { border-color:var(--accent); text-decoration:none; transform:translateY(-1px); }
.cmdcard code { font-size:var(--fs-sm); color:var(--accent); font-weight:600; }
.cmdcard span { font-size:var(--fs-xs); color:var(--text-3); line-height:1.55; }

.cards2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s4); margin-bottom:var(--s5); }
.cards2 > a, .cards2 > div { padding:var(--s5); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); color:var(--text); }
.cards2 > a:hover { border-color:var(--accent); text-decoration:none; }
.cards2 h3 { margin:0 0 var(--s2); font-size:17px; }
.cards2 p { font-size:var(--fs-sm); color:var(--text-2); margin:0; }

.pager { display:flex; gap:var(--s4); margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line); }
.pager a { flex:1; padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); font-weight:600; font-size:var(--fs-sm); }
.pager a:hover { border-color:var(--accent); text-decoration:none; }
.pager span { display:block; font-size:var(--fs-xs); font-weight:500; color:var(--text-3); margin-bottom:2px; }
.pager__next { text-align:right; }

/* ---------------- on-page contents ---------------- */
.toc__label { margin:0 0 var(--s3); font-size:11.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text-3); }
.toc ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:1px solid var(--line); }
.toc a { display:block; padding:3px 0 3px 12px; margin-left:-1px; border-left:2px solid transparent;
  font-size:var(--fs-xs); color:var(--text-3); line-height:1.5; }
.toc a:hover { color:var(--text-2); text-decoration:none; }
.toc a.on { color:var(--accent); border-left-color:var(--accent); }
.toc li.sub a { padding-left:24px; }

/* ---------------- search ---------------- */
.search { position:fixed; inset:0; z-index:120; background:rgba(8,9,12,.55);
  backdrop-filter:blur(3px); display:grid; place-items:start center; padding-top:12vh; }
.search[hidden] { display:none; }
.search__panel { width:min(640px,92vw); background:var(--bg-elev); border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
.search__panel input { width:100%; padding:var(--s5); font-size:17px; font-family:var(--sans);
  color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--line); }
.search__panel input:focus { outline:none; }
.search__panel ul { list-style:none; margin:0; padding:var(--s2); max-height:52vh; overflow-y:auto; display:grid; gap:2px; }
.search__panel li a { display:grid; gap:2px; padding:10px 14px; border-radius:var(--r-sm); color:var(--text); }
.search__panel li a:hover, .search__panel li.on a { background:var(--surface-2); text-decoration:none; }
.search__panel li b { font-size:var(--fs-sm); font-weight:600; }
.search__panel li em { font-style:normal; font-size:var(--fs-xs); color:var(--text-3); }
.search__panel li .where { font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.search__hint { padding:10px var(--s5); border-top:1px solid var(--line); font-size:11.5px; color:var(--text-3); }
.search__empty { padding:var(--s5); font-size:var(--fs-sm); color:var(--text-3); }

.docfoot { display:flex; gap:var(--s5); flex-wrap:wrap; max-width:1440px; margin:0 auto;
  padding:var(--s5); border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--text-3); }
.docfoot a { color:var(--text-2); }

/* ---------------- responsive ---------------- */
@media (max-width:1180px) {
  .shell { grid-template-columns:var(--sidebar) minmax(0,1fr); }
  .toc { display:none; }
}
@media (max-width:860px) {
  .shell { grid-template-columns:minmax(0,1fr); gap:0; }
  .burger { display:grid; }
  .search-open { min-width:0; }
  .search-open span, .search-open kbd { display:none; }
  .dl-btn span { display:none; }
  .sidebar { position:fixed; inset:var(--topbar) auto 0 0; width:min(300px,86vw); z-index:90;
    background:var(--bg-elev); border-right:1px solid var(--line); transform:translateX(-102%);
    transition:transform .22s var(--ease); }
  .sidebar.open { transform:none; box-shadow:var(--shadow); }
  .sidebar__inner { position:static; max-height:none; height:100%; padding:var(--s5); }
  main { padding:var(--s5) 0 var(--s7); }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; scroll-behavior:auto !important; }
}