/* Bytown Docs — /docs/*.
 * Lines between the two DESIGN markers are the Claude Design "Bytown Docs" stylesheet,
 * copied verbatim (tokens = BRAND.md palette). Only the code font was swapped to
 * JetBrains Mono (BRAND.md: Inter for UI, JetBrains Mono for code). Everything below
 * the closing marker is what real pages need on top of the mock: site footer
 * coexistence (assets/tw.css preflight is loaded first), skip link, lists, inline
 * code, code blocks, search, copy menu and FAQ rows.
 * Pages are generated by scripts/build-docs.mjs from docs-src/. */
/* ---- DESIGN: begin ---- */
:root{--ink:#0A0A0A;--charcoal:#1A1A1A;--body:#4A4A4A;--muted:#808080;--canvas:#FAFAFA;--surface:#FFFFFF;--border:#E5E7EB;--soft:#F0F0F0;--blue:#3B82F6;--blue-h:#2563EB;--blue-deep:#1E40AF;--tint:#DBEAFE;--wash:#EFF6FF;--shadow-soft:0 1px 2px rgba(10,10,10,.04),0 4px 12px rgba(10,10,10,.04);--shadow-card:0 4px 16px rgba(10,10,10,.06),0 1px 3px rgba(10,10,10,.04);--shadow-float:0 8px 24px rgba(10,10,10,.08),0 2px 6px rgba(10,10,10,.04);--bar:57px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--canvas);color:var(--charcoal);-webkit-font-smoothing:antialiased}
a{color:var(--blue-h);text-decoration:none}
a:hover{color:var(--blue-deep)}
h1,h2,h3,h4,p,ul,ol{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.icon{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.i16{width:16px;height:16px}
.i24{width:24px;height:24px}
.i32{width:32px;height:32px}
/* ---------- docs bar ---------- */
.bar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid var(--soft)}
.bar-in{max-width:1560px;margin:0 auto;padding:0 72px;height:var(--bar);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.mk{width:26px;height:26px;border-radius:8px;background:var(--ink);display:grid;place-items:center}
.mk img{width:62%;height:62%;object-fit:contain;filter:brightness(0) invert(1)}
.brand b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.brand span{font-size:15px;font-weight:500;color:var(--muted)}
.bar-nav{display:flex;gap:4px;margin-left:8px}
.bar-nav button{font-size:14px;font-weight:500;color:var(--body);padding:7px 11px;border-radius:9px;transition:background 150ms,color 150ms}
.bar-nav button:hover{background:var(--canvas);color:var(--charcoal)}
.bar-nav button[aria-current=page]{background:var(--wash);color:var(--blue-h);font-weight:600}
.bar-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.bar-search{display:flex;align-items:center;gap:8px;width:210px;padding:7px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);font-size:13.5px;transition:border-color 200ms,box-shadow 200ms}
.bar-search:hover{border-color:var(--dot)}
.bar-search kbd{margin-left:auto;font:inherit;font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:1px 5px;background:var(--canvas)}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border-radius:999px;padding:9px 18px;transition:background 200ms,transform 200ms,box-shadow 200ms,border-color 200ms}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--charcoal);transform:translateY(-1px);color:#fff}
.btn-out{border:1px solid var(--border);color:var(--ink);background:transparent}
.btn-out:hover{background:var(--canvas);border-color:var(--dot);color:var(--ink)}
.icon-btn{width:44px;height:44px;border-radius:999px;background:var(--surface);border:1px solid var(--soft);display:none;place-items:center;box-shadow:var(--shadow-soft)}
.icon-btn:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)}
/* ---------- home ---------- */
.wrap{max-width:1560px;margin:0 auto;padding:0 72px}
.home{padding-top:76px;padding-bottom:120px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;max-width:1180px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(2.4rem,4.2vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;color:var(--ink);margin-top:18px}
.hero p{font-size:18px;line-height:1.65;color:var(--body);margin-top:22px;max-width:46ch}
.hero-search{display:flex;align-items:center;gap:10px;margin-top:32px;padding:14px 18px;background:var(--surface);border:1.5px solid var(--tint);border-radius:14px;box-shadow:0 1px 2px rgba(10,10,10,.03),0 8px 24px rgba(59,130,246,.08);color:var(--muted);font-size:16px;max-width:460px;transition:border-color 200ms,box-shadow 200ms}
.hero-search:hover{border-color:var(--blue);box-shadow:0 1px 2px rgba(10,10,10,.04),0 8px 28px rgba(59,130,246,.18)}
.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--charcoal);transition:box-shadow 200ms,transform 200ms,border-color 200ms}
.pill:hover{color:var(--charcoal);box-shadow:var(--shadow-soft);transform:translateY(-1px);border-color:var(--dot)}
.pill svg{color:var(--blue)}
/* code panel */
.code{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden}
.code-tabs{display:flex;align-items:center;gap:2px;padding:8px 10px;border-bottom:1px solid var(--soft);overflow-x:auto;scrollbar-width:none}
.code-tabs::-webkit-scrollbar{display:none}
.code-tabs button{font-size:13px;font-weight:500;color:var(--muted);padding:6px 11px;border-radius:8px;white-space:nowrap;transition:background 150ms,color 150ms}
.code-tabs button:hover{background:var(--canvas);color:var(--charcoal)}
.code-tabs button.on{background:var(--wash);color:var(--blue-h);font-weight:600}
.code-tabs .cp{margin-left:auto;color:var(--muted);display:grid;place-items:center;padding:6px;border-radius:8px}
.code pre{margin:0;padding:22px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-ligatures:none;font-size:13px;line-height:1.75;color:var(--charcoal);overflow-x:auto;background:var(--surface)}
.k{color:var(--blue-h)}.s{color:#0E7C5A}.c{color:var(--muted)}.n{color:#B45309}
/* sections */
.sec{margin-top:104px;max-width:1180px}
.sec-h{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:8px;line-height:1.2}
.sec-p{font-size:16.5px;line-height:1.65;color:var(--body);margin-top:12px;max-width:62ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.card{background:var(--surface);border-radius:16px;padding:26px;box-shadow:var(--shadow-card);transition:transform 200ms,box-shadow 200ms}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.card-art{height:150px;border-radius:12px;background:var(--wash);display:grid;place-items:center;color:var(--blue-deep);margin-bottom:24px}
.card h3{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.card p{font-size:15px;line-height:1.6;color:var(--body);margin-top:10px}
.linklist{display:flex;flex-direction:column;gap:2px;margin-top:20px}
.linklist a{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--charcoal);padding:8px 10px;margin:0 -10px;border-radius:9px;transition:background 150ms,color 150ms}
.linklist a:hover{background:var(--canvas);color:var(--blue-h)}
.linklist svg{color:var(--muted)}
.linklist a:hover svg{color:var(--blue)}
.conn{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.conn a{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;font-size:14.5px;font-weight:500;color:var(--charcoal);transition:box-shadow 200ms,transform 200ms,border-color 200ms}
.conn a:hover{color:var(--charcoal);box-shadow:var(--shadow-card);transform:translateY(-1px);border-color:transparent}
.conn img{width:20px;height:20px;object-fit:contain}
.conn span:last-child{margin-left:auto;color:var(--muted);font-size:12.5px}
/* journey */
.tabs{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;margin-top:28px}
.tabs button{font-size:13.5px;font-weight:500;color:var(--body);padding:7px 16px;border-radius:999px;transition:background 150ms,color 150ms}
.tabs button.on{background:var(--ink);color:#fff;font-weight:600}
.stage{margin-top:28px;display:flex;flex-direction:column;gap:26px}
.step-h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.num{width:26px;height:26px;border-radius:999px;background:var(--wash);color:var(--blue-h);font-size:13px;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.step-h h4{font-size:16.5px;font-weight:600;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px 14px;font-size:14px;font-weight:500;color:var(--charcoal);transition:box-shadow 200ms,transform 200ms,border-color 200ms}
.tile:hover{color:var(--charcoal);box-shadow:var(--shadow-soft);transform:translateY(-1px);border-color:var(--dot)}
.tile svg{color:var(--muted)}
/* product family */
.fam{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.fam .card{padding:0;overflow:hidden}
.fam-art{height:104px;display:grid;place-items:center;color:var(--blue-deep)}
.fam-b{padding:18px 20px 22px}
.fam-b h4{font-size:15.5px;font-weight:700;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.chips span{font-size:11.5px;font-weight:500;color:var(--body);background:var(--canvas);border:1px solid var(--soft);border-radius:999px;padding:3px 9px}
.fam-b p{font-size:13.5px;line-height:1.55;color:var(--muted)}
.tag-new{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-h);background:var(--wash);border-radius:999px;padding:3px 8px;margin-left:7px;vertical-align:2px}
.res{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
@media(max-width:1180px){.res{grid-template-columns:repeat(2,1fr)}}
.res .card{padding:22px 24px 24px}
.res h4{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:600;color:var(--ink);margin-top:18px}
.res p{font-size:14px;line-height:1.55;color:var(--body);margin-top:8px}
.res .card>svg{color:var(--charcoal)}
/* ---------- article ---------- */
.doc{display:grid;grid-template-columns:272px minmax(0,1fr) 236px;max-width:1560px;margin:0 auto;align-items:start}
.side{position:sticky;top:var(--bar);height:calc(100dvh - var(--bar));overflow-y:auto;padding:28px 20px 60px 40px;border-right:1px solid var(--soft);background:var(--canvas)}
.side .bar-search{width:100%;margin-bottom:22px}
.side-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:18px 12px 8px}
.side-lbl:first-of-type{padding-top:0}
.side nav{display:flex;flex-direction:column;gap:2px}
.side a{font-size:14.5px;font-weight:500;color:var(--body);padding:8px 12px;border-radius:9px;transition:background 150ms,color 150ms}
.side a:hover{background:var(--surface);color:var(--charcoal)}
.side a.on{background:var(--wash);color:var(--blue-h);font-weight:600}
.main{padding:40px 72px 96px;min-width:0}
.crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--charcoal)}
.doc-top{display:flex;align-items:flex-start;gap:24px;margin-top:14px}
.doc-top h1{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
.copy-btn{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:9px 13px;font-size:14px;font-weight:500;color:var(--charcoal);box-shadow:var(--shadow-soft);transition:box-shadow 200ms,transform 200ms}
.copy-btn:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)}
.lede{font-size:19px;line-height:1.6;color:var(--muted);margin-top:18px;max-width:70ch}
.main h2{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:64px;scroll-margin-top:80px}
.main h3{font-size:18px;font-weight:600;color:var(--ink);margin-top:36px}
.main p{font-size:16.5px;line-height:1.7;color:var(--body);margin-top:16px;max-width:74ch;text-wrap:pretty}
.main ul{margin-top:14px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.main li{font-size:16.5px;line-height:1.65;color:var(--body);max-width:72ch}
.rule{height:1px;background:var(--soft);margin:56px 0 0}
.call{display:flex;gap:14px;border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:20px 22px;margin-top:28px;box-shadow:var(--shadow-soft)}
.call svg{color:var(--muted);margin-top:2px}
.call p{margin-top:0}
.call p+p{margin-top:12px}
.call.info{background:var(--wash);border-color:var(--tint);box-shadow:none}
.call.info svg{color:var(--blue)}
.call.info p{color:var(--charcoal)}
table{width:100%;border-collapse:collapse;margin-top:26px}
th{text-align:left;font-size:15px;font-weight:600;color:var(--ink);padding:0 18px 12px 0;border-bottom:1px solid var(--border)}
td{font-size:15.5px;line-height:1.6;color:var(--body);padding:16px 18px 16px 0;border-bottom:1px solid var(--soft);vertical-align:top}
td:first-child{font-weight:600;color:var(--charcoal);width:130px}
.steps{margin-top:28px;display:flex;flex-direction:column;gap:0}
.stp{display:grid;grid-template-columns:30px 1fr;gap:18px}
.stp-l{display:flex;flex-direction:column;align-items:center;gap:8px}
.stp-l i{flex:1;width:1px;background:var(--border)}
.stp:last-child .stp-l i{display:none}
.stp-b{padding-bottom:28px}
.stp-b h4{font-size:17px;font-weight:600;color:var(--ink);margin-top:3px}
.stp-b p{margin-top:10px;font-size:16px}
.stp-b a{display:inline-block;margin-top:12px;font-size:15.5px;font-weight:500;color:var(--blue-h);text-decoration:underline;text-decoration-color:var(--tint);text-underline-offset:3px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.grid2 .card,.grid3 .card{padding:22px 24px 24px;border:1px solid var(--border);box-shadow:none}
.grid2 .card:hover,.grid3 .card:hover{box-shadow:var(--shadow-card);border-color:transparent}
.grid2 h4,.grid3 h4{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:600;color:var(--ink);margin-top:18px}
.grid2 p,.grid3 p{font-size:14.5px;line-height:1.55;margin-top:8px}
.helpful{margin-top:56px;padding-top:26px;border-top:1px solid var(--soft)}
.helpful p{font-size:15.5px;color:var(--charcoal);margin:0}
.thumbs{display:flex;gap:8px;margin-top:14px}
.thumbs button{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--body);transition:box-shadow 200ms,color 200ms,border-color 200ms}
.thumbs button:hover{color:var(--blue-h);border-color:var(--tint);box-shadow:var(--shadow-soft)}
.toc{position:sticky;top:var(--bar);padding:40px 40px 40px 0;display:flex;flex-direction:column;gap:2px}
.toc a{font-size:14px;font-weight:500;color:var(--muted);padding:7px 0 7px 14px;border-left:2px solid transparent;transition:color 150ms,border-color 150ms}
.toc a:hover{color:var(--charcoal)}
.toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--ink)}
.scrim{display:none;position:fixed;inset:0;background:rgba(10,10,10,.28);z-index:45}
/* ---------- responsive ---------- */
@media(max-width:1240px){.doc{grid-template-columns:252px minmax(0,1fr)}.toc{display:none}.main{padding:36px 40px 88px}.fam{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1080px){.bar-nav{display:none}.bar-search{width:150px}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:36px}.split,.conn,.tiles,.res,.grid3{grid-template-columns:1fr}.sec{margin-top:72px}.home{padding-top:48px;padding-bottom:80px}.wrap,.bar-in{padding:0 40px}}
@media(max-width:767px){.bar-in{padding:0 16px;gap:14px}.bar-r .bar-search,.bar-r .btn-out{display:none}.icon-btn{display:grid}.wrap{padding:0 16px}
.doc{grid-template-columns:1fr}
.side{position:fixed;top:0;left:0;width:min(320px,86vw);height:100dvh;z-index:50;background:var(--surface);box-shadow:var(--shadow-float);border-right:0;padding:20px 16px 60px;transform:translateX(-102%);transition:transform 300ms cubic-bezier(.16,1,.3,1)}
body.nav-open .side{transform:none}
body.nav-open .scrim{display:block}
.main{padding:26px 16px 72px}
.doc-top{flex-direction:column;gap:14px}
.copy-btn{margin-left:0}
.grid2{grid-template-columns:1fr}
.fam{grid-template-columns:1fr}
.hero h1{font-size:2.1rem}
.hero p,.main p,.main li{font-size:16px}
.pillrow .pill{flex:1 1 auto;justify-content:center}
.main h2{margin-top:48px}
table{display:block;overflow-x:auto;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---- DESIGN: end ---- */

/* Accessibility: the mock's --muted (#808080) is 3.9:1 on white, under WCAG AA
   for the small text docs use it on. #6B7280 is the palette's sev-low grey
   (BRAND.md) at 4.8:1. */
:root{--muted:#6B7280}
.tabset{display:contents}

/* Site chrome on docs pages */
.skip-link{position:absolute;top:-100px;left:16px;z-index:100;padding:12px 24px;background:var(--blue);color:#fff;border-radius:8px;font-weight:600}
.skip-link:focus{top:12px;color:#fff}
*:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body{line-height:1.5}
.brand{color:var(--ink)}
.brand:hover{color:var(--ink)}
.bar-nav a{font-size:14px;font-weight:500;color:var(--body);padding:7px 11px;border-radius:9px;transition:background 150ms,color 150ms}
.bar-nav a:hover{background:var(--canvas);color:var(--charcoal)}
.bar-nav a[aria-current=page]{background:var(--wash);color:var(--blue-h);font-weight:600}
.btn-dark{background:linear-gradient(180deg,#1F1F21,#0A0A0A);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn-dark:hover{background:#000}
.bar-search kbd,.hero-search kbd{pointer-events:none}
.hero-search{width:100%}
.icon{display:inline-block;vertical-align:middle}

/* Home page: the docs drawer exists only for phones */
.home-page .side{display:none}
.home-page .scrim{display:none}
.code-panel[hidden]{display:none}
.journey[hidden]{display:none}
.fam .card{display:flex;flex-direction:column;color:inherit}
.fam .card:hover{color:inherit}
.fam-art .logo{width:44px;height:44px;border-radius:12px;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.fam-art .logo svg{width:24px;height:24px}
.res .card,.grid2 .card,.grid3 .card,.split .card{color:inherit}
.conn{grid-template-columns:repeat(3,1fr)}
.conn a{padding:14px 14px;gap:10px}
.conn span:first-of-type{white-space:nowrap}
.conn span:last-child{white-space:nowrap;font-size:12px}
.tile{min-height:44px}

/* Article body */
.main ul{list-style:disc}
.main ol{list-style:decimal;margin-top:14px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.main ol li{font-size:16.5px;line-height:1.65;color:var(--body);max-width:72ch}
.main li::marker{color:var(--muted)}
.main strong{color:var(--charcoal);font-weight:600}
.main p a,.main li a,.main td a,.call a{color:var(--blue-h);text-decoration:underline;text-decoration-color:var(--tint);text-underline-offset:3px}
.main p a:hover,.main li a:hover,.main td a:hover,.call a:hover{text-decoration-color:var(--blue-h)}
.main code,.call code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-ligatures:none;font-size:.86em;background:var(--canvas);border:1px solid var(--soft);border-radius:6px;padding:1px 6px;color:var(--charcoal);word-break:break-word}
.main h3{scroll-margin-top:80px}
.meta-line{font-size:13.5px!important;color:var(--muted)!important;margin-top:10px!important}
.call .call-b{min-width:0}
.call .call-b>*:first-child{margin-top:0}
.call ul{margin-top:10px}
td:first-child{width:auto;min-width:130px}
td code{white-space:nowrap}
.stp-b>*:first-child{margin-top:3px}
.stp-b ul,.stp-b ol{margin-top:10px}
.stp-b .code{margin-top:14px}
.main .code{margin-top:22px;box-shadow:var(--shadow-soft)}
.code-lbl{font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 11px}
.code-tabs .cp{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:6px 9px;flex:0 0 auto}
.code-tabs .cp:hover{background:var(--canvas);color:var(--charcoal)}
.code pre{white-space:pre-wrap;word-break:break-word}
.related{margin-top:56px}
.related h2{margin-top:0!important}
.note{font-size:14px!important;line-height:1.6!important;color:var(--muted)!important}
.faq{margin-top:22px;border-top:1px solid var(--soft)}
.faq-item{border-bottom:1px solid var(--soft)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-size:16.5px;font-weight:600;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";width:9px;height:9px;flex:0 0 auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform 200ms}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-item .faq-a{padding-bottom:18px}
.faq-item .faq-a p:first-child{margin-top:0}
.thanks{font-size:15px;color:var(--body);margin-top:14px}
.toc-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 0 10px 16px}

/* Generated markup uses h3 (not the mock's h4) inside steps and cards so the
   heading outline never skips a level under each h2. Same look as the mock. */
.main .stp-b h3{font-size:17px;font-weight:600;color:var(--ink);margin-top:3px;scroll-margin-top:80px}
.main .grid2 h3,.main .grid3 h3,.res h3,.split h3.card-h{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:600;color:var(--ink);margin-top:18px}
.fam-b h3{font-size:15.5px;font-weight:700;color:var(--ink)}
.brand-docs{font-size:15px;font-weight:500;color:var(--muted);padding:4px 6px;border-radius:7px}
.brand-docs:hover{color:var(--charcoal)}
.brand:hover b{color:var(--ink)}

/* Home connect panel: the copy button stays pinned right while tabs scroll */
.hero .code-tabs .cp{position:sticky;right:0;margin-left:auto;background:var(--surface);box-shadow:-10px 0 10px var(--surface)}
.hero .code-tabs .cp [data-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cp.copied svg,.copy-btn.copied svg:first-child{color:var(--blue)}

/* Accessibility additions from the 2026-10-09 review */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.srch-in:focus-within{box-shadow:inset 0 0 0 2px var(--blue)}
.tbl{margin-top:26px;overflow-x:auto}
.tbl table{margin-top:0}
.tbl:focus-visible{outline-offset:4px}
.code-panel:focus-visible,.journey:focus-visible{outline-offset:-2px}

/* Copy page menu */
.copy-wrap{position:relative;margin-left:auto;flex:0 0 auto}
.copy-wrap .copy-btn{margin-left:0}
.copy-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-float);padding:6px;z-index:30}
.copy-menu a,.copy-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-size:14px;font-weight:500;color:var(--charcoal);padding:9px 10px;border-radius:8px}
.copy-menu a:hover,.copy-menu button:hover{background:var(--canvas);color:var(--charcoal)}
.copy-menu .icon{color:var(--muted)}

/* Search */
.srch{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.28);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.srch[hidden]{display:none}
.srch-box{width:min(620px,100%);background:var(--surface);border-radius:16px;box-shadow:var(--shadow-float);overflow:hidden}
.srch-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--soft);color:var(--muted)}
.srch-in input{flex:1;border:0;outline:0;font:inherit;font-size:16px;color:var(--charcoal);background:transparent;min-width:0}
.srch-in kbd{font:inherit;font-size:11px;border:1px solid var(--border);border-radius:5px;padding:1px 5px;background:var(--canvas)}
.srch-res{max-height:min(60vh,440px);overflow-y:auto;padding:6px}
.srch-res a{display:block;padding:10px 12px;border-radius:10px;color:var(--charcoal)}
.srch-res a:hover,.srch-res a.on{background:var(--wash);color:var(--charcoal)}
.srch-res b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.srch-res span{display:block;font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-empty{padding:18px;font-size:14px;color:var(--muted)}

@media(max-width:1240px){.conn{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.conn{grid-template-columns:1fr 1fr}}
@media(max-width:767px){
.conn{grid-template-columns:1fr}
.home-page .side{display:block}
body.nav-open .scrim{display:block}
.side{visibility:hidden;transition:transform 300ms cubic-bezier(.16,1,.3,1),visibility 0s linear 300ms}
body.nav-open .side{visibility:visible;transition-delay:0s}
table{display:table;white-space:normal}
th,td{min-width:160px}
.copy-wrap{margin-left:0}
.copy-menu{left:0;right:auto}
.main ol li{font-size:16px}
.bar-r .btn-dark{padding:9px 14px;min-height:44px}
.brand,.brand-docs{min-height:44px;display:flex;align-items:center}
.srch{padding-top:16px}
td:first-child{min-width:120px}
}
.step-h h3{font-size:16.5px;font-weight:600;color:var(--ink)}
.res h3 .icon,.grid2 h3 .icon,.grid3 h3 .icon{color:var(--muted)}

/* ---- 2026-10-09 round 2: header matched to the site, and dark mode ---- */
:root{--dot:#D4D4D8;color-scheme:light}

/* Brand: the site header's black b mark + wordmark (index.html), then "Docs" */
.brand-wrap{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand{gap:8px}
.logo-mark{display:block;width:28px;height:28px;flex:0 0 auto}
.brand b{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1}
.brand-docs{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--muted);padding:4px 6px;margin-left:-6px}

/* Controls: one 40px height, a 10px control radius (BRAND.md) and room
   between them. The search label never wraps; it truncates instead. */
.btn{border-radius:10px}
.bar-r{gap:12px}
.bar-r .btn{height:40px;padding:0 16px;white-space:nowrap}
.bar-r .bar-search{flex:0 1 240px;width:auto;min-width:0;height:40px;padding:0 12px;white-space:nowrap;overflow:hidden}
.bar-search-l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bar-r .bar-search kbd{flex:0 0 auto}
.theme-btn{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--body);transition:border-color 200ms,color 200ms}
.theme-btn:hover{border-color:var(--dot);color:var(--ink)}
.theme-btn .t-sun,[data-theme=dark] .theme-btn .t-moon{display:none}
[data-theme=dark] .theme-btn .t-sun{display:block}
@media(min-width:768px) and (max-width:1240px){.bar-in{gap:20px}.bar-r .bar-search kbd{display:none}.bar-r .bar-search{flex-basis:220px}}
@media(max-width:1180px){.bar-nav{display:none}}
@media(max-width:767px){
.bar-in{gap:10px}
.bar-r{gap:8px}
.logo-mark{width:26px;height:26px}
.brand b{font-size:18px}
.brand-docs{font-size:18px}
.theme-btn{width:44px;height:44px}
.bar-r .btn-dark{height:44px;padding:0 14px}
}
@media(max-width:400px){.brand b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Header menu button and the hero quick links: the same 10px control shape
   as the CTAs, not fully round (Tomas, 2026-10-09). Chips and tags stay round. */
.icon-btn{border-radius:10px;border-color:var(--border)}
.pill{border-radius:10px}

/* Tutorial videos (:::video): poster + play button; docs.js swaps in the YouTube player on click */
.vid{margin:28px 0 0}
.video-facade{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:14px;overflow:hidden;background:#0A0A0A;border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.video-play{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.video-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-play-btn{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:999px;background:#0A0A0A;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .15s ease,background-color .15s ease}
.video-play-btn svg{margin-left:3px}
.video-play:hover .video-play-btn{transform:scale(1.06);background:var(--blue)}
.video-play:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:14px}
.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.vid-len{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--charcoal);background:var(--soft);border-radius:6px;padding:2px 7px}
.vid-t{flex:1 1 220px;min-width:0;color:var(--body)}
.vid figcaption a{display:inline-flex;align-items:center;gap:4px;color:var(--blue-h);font-weight:500;text-decoration:none}
.vid figcaption a:hover{text-decoration:underline}
@media (max-width:640px){.video-play-btn{width:52px;height:52px;margin:-26px 0 0 -26px}}
@media (prefers-reduced-motion:reduce){.video-play-btn{transition:none}.video-play:hover .video-play-btn{transform:none}}

/* Brand marks sit on white tiles in both themes, like app icons */
.fam-art .logo{background:#fff}

/* Dark mode: the guide articles' dark palette (guide-src/guide-template.html) */
:root[data-theme=dark]{color-scheme:dark;--ink:#FAFAFA;--charcoal:#E4E4E7;--body:#A1A1AA;--muted:#8E8E98;--canvas:#0A0A0A;--surface:#111113;--border:#2A2A30;--soft:#1E1E22;--dot:#3F3F46;--blue-h:#60A5FA;--blue-deep:#93C5FD;--tint:rgba(59,130,246,.26);--wash:rgba(59,130,246,.12);--shadow-soft:0 1px 2px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.35);--shadow-card:0 4px 16px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);--shadow-float:0 8px 24px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.45)}
[data-theme=dark] .bar{background:rgba(10,10,10,.82)}
[data-theme=dark] .logo-mark{filter:invert(1)}
[data-theme=dark] .btn-dark{background:linear-gradient(180deg,#FFFFFF,#E4E4E7);color:#0A0A0A;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme=dark] .btn-dark:hover{background:#FFFFFF;color:#0A0A0A}
[data-theme=dark] .tabs button.on{color:#0A0A0A}
[data-theme=dark] .s{color:#4ADE80}
[data-theme=dark] .n{color:#FBBF24}
[data-theme=dark] .scrim,[data-theme=dark] .srch{background:rgba(0,0,0,.6)}
/* Shadows don't show on near-black, so cards get a hairline edge instead */
[data-theme=dark] .card{box-shadow:0 0 0 1px var(--border)}
[data-theme=dark] .card:hover{box-shadow:0 0 0 1px var(--dot),var(--shadow-float)}
[data-theme=dark] .grid2 .card:hover,[data-theme=dark] .grid3 .card:hover,[data-theme=dark] .conn a:hover{border-color:var(--dot)}
[data-theme=dark] .hero-search{box-shadow:none}
[data-theme=dark] .side a:hover{background:var(--soft)}
[data-theme=dark] .srch-box,[data-theme=dark] .copy-menu{box-shadow:0 0 0 1px var(--border),var(--shadow-float)}
[data-theme=dark] footer.bg-st-dark{border-top:1px solid var(--soft)}