:root { --paper:#f1f0e9; --paper-soft:#e9e8df; --ink:#171913; --muted:#6d7066; --line:#c9c9bd; --acid:#b9f227; --acid-dark:#26300b; --danger:#a83f37; --sidebar:260px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:1.72; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
code,kbd,.eyebrow,.card-label,.section-heading>span,.tag { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; padding:8px 12px; color:var(--paper); background:var(--ink); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.topbar { position:sticky; z-index:10; top:0; height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--ink); background:#e5e4dbeb; backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; letter-spacing:-.03em; }
.mark { width:37px; height:37px; display:grid; place-items:center; border:1px solid var(--ink); color:var(--ink); background:var(--acid); box-shadow:2px 2px 0 var(--ink); font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.brand-section { margin-left:3px; padding-left:13px; border-left:1px solid #aaaca1; color:var(--muted); font-weight:500; }
.top-links { display:flex; align-items:center; gap:24px; font-size:12px; font-weight:600; }
.top-links a:last-child { padding:8px 11px; border:1px solid var(--ink); background:var(--acid); box-shadow:2px 2px 0 var(--ink); }
.menu-button { display:none; padding:7px 10px; border:1px solid var(--ink); background:transparent; font-size:11px; font-weight:700; }
.docs-shell { display:grid; grid-template-columns:var(--sidebar) minmax(0,850px) 170px; justify-content:center; min-height:calc(100vh - 66px); }
.sidebar { position:sticky; top:66px; align-self:start; height:calc(100vh - 66px); padding:28px 22px 24px; border-right:1px solid var(--line); background:#e9e8df; overflow:auto; }
.search-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.search-box { display:flex; align-items:center; gap:8px; padding:8px 9px; border:1px solid #aeb0a5; background:#f6f5ef; }
.search-box>span { color:#789e15; font-family:ui-monospace,monospace; font-weight:800; }
.search-box input { min-width:0; width:100%; padding:0; border:0; outline:0; color:var(--ink); background:transparent; font-size:11px; }
.search-box kbd { flex:none; padding:1px 5px; border:1px solid var(--line); color:#898c81; background:var(--paper-soft); font-size:8px; }
.search-status { min-height:16px; margin:5px 0 0; color:var(--muted); font:9px/1.5 ui-monospace,monospace; }
.section-nav { margin-top:19px; }
.section-nav p { margin:23px 8px 7px; color:#96998f; font:8px/1.4 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
.section-nav a { display:flex; gap:13px; align-items:center; margin:1px 0; padding:8px; color:#686b61; font-size:11px; font-weight:600; border-left:3px solid transparent; }
.section-nav a span { color:#a1a399; font:8px/1 ui-monospace,monospace; }
.section-nav a:hover,.section-nav a.active { color:var(--ink); background:#deddd4; }
.section-nav a.active { border-left-color:var(--ink); background:var(--acid); }
.section-nav a.active span { color:var(--ink); }
.sidebar-note { display:flex; align-items:flex-start; gap:9px; margin-top:35px; padding-top:18px; border-top:1px solid var(--line); color:#85887e; font:8px/1.65 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
.sidebar-note i { flex:none; width:7px; height:7px; margin-top:3px; border-radius:50%; background:#789e15; box-shadow:0 0 0 3px #d7e8aa; }
.content { min-width:0; padding:0 clamp(32px,5vw,72px); border-right:1px solid var(--line); background-image:linear-gradient(#d9d8cf50 1px,transparent 1px),linear-gradient(90deg,#d9d8cf50 1px,transparent 1px); background-size:48px 48px; }
.doc-section { padding:76px 0 82px; border-bottom:1px solid var(--ink); background:linear-gradient(90deg,rgba(241,240,233,.9),rgba(241,240,233,.76)); }
.hero { padding-top:92px; }
.eyebrow { margin:0; color:#526c0d; font-size:9px; font-weight:600; letter-spacing:.15em; }
.hero h1 { max-width:730px; margin:18px 0 27px; font-size:clamp(48px,6vw,76px); line-height:.98; letter-spacing:-.065em; font-weight:550; }
.hero h1 em { color:#536e0d; font-style:normal; }
.lede { max-width:660px; margin:0; color:#595c53; font-size:17px; line-height:1.75; }
.hero-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:31px; }
.button { display:inline-flex; justify-content:space-between; align-items:center; gap:28px; padding:10px 14px; border:1px solid var(--ink); background:var(--paper-soft); font-size:11px; font-weight:700; }
.button:hover { color:var(--paper); background:var(--ink); }
.button.primary { color:var(--acid-dark); border-color:#8eb713; background:var(--acid); box-shadow:3px 3px 0 var(--ink); }
.button.primary:hover { color:var(--acid-dark); border-color:var(--ink); background:#c7ff35; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.signal-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:70px; border:1px solid var(--ink); box-shadow:4px 4px 0 #bcbeb2; }
.signal-grid div { min-height:100px; padding:17px; border-right:1px solid var(--ink); background:#e7e6dd; }
.signal-grid div:last-child { border:0; }
.signal-grid strong { display:block; color:#7e8177; font:9px/1 ui-monospace,monospace; }
.signal-grid span { display:block; margin-top:29px; font-size:11px; font-weight:650; }
.section-heading { display:grid; grid-template-columns:40px 1fr; gap:15px; align-items:start; margin-bottom:28px; }
.section-heading>span { padding-top:4px; color:#92958b; font-size:9px; }
.section-heading h2 { margin:4px 0 0; font-size:clamp(33px,4vw,47px); line-height:1.1; letter-spacing:-.05em; font-weight:600; }
.intro { max-width:680px; color:#565950; font-size:16px; }
.doc-section h3 { margin:36px 0 8px; font-size:20px; letter-spacing:-.025em; }
.doc-section p { max-width:720px; }
.doc-section ul { padding-left:20px; color:#50534a; }
.doc-section li { margin:7px 0; padding-left:5px; }
.steps { margin:32px 0 0; padding:0; list-style:none; counter-reset:steps; border-top:1px solid var(--line); }
.steps li { position:relative; min-height:110px; margin:0; padding:22px 15px 20px 68px; border-bottom:1px solid var(--line); counter-increment:steps; }
.steps li::before { content:"0" counter(steps); position:absolute; left:12px; top:25px; color:#6f920f; font:10px/1 ui-monospace,monospace; }
.steps strong { font-size:14px; }
.steps p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.callout { display:grid; grid-template-columns:90px 1fr; gap:16px; margin-top:32px; padding:18px; border:1px solid #819d38; background:#e4f4bc; }
.callout>span { color:#4d650d; font:8px/1.4 ui-monospace,monospace; letter-spacing:.1em; }
.callout p { margin:0; color:#40500f; font-size:12px; }
.callout.warning { border-color:#a79452; background:#f1e8bc; }
.callout.warning>span,.callout.warning p { color:#665614; }
.callout.danger { border-color:#c7857f; background:#f2d2cf; }
.callout.danger>span,.callout.danger p { color:#812d27; }
.cards { display:grid; gap:12px; margin-top:32px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.cards.two { grid-template-columns:repeat(2,1fr); }
.cards article { padding:19px; border:1px solid var(--ink); background:#ebeae2; box-shadow:3px 3px 0 #bcbeb2; }
.cards h3 { margin:21px 0 7px; font-size:16px; }
.cards article p:last-child { margin:0; color:var(--muted); font-size:12px; }
.card-label { margin:0; color:#83867c; font-size:8px; letter-spacing:.12em; }
.code-block { margin:17px 0 28px; border:1px solid #50534a; background:#11130f; box-shadow:4px 4px 0 #aeb0a5; }
.code-block>div { display:flex; justify-content:space-between; align-items:center; padding:7px 11px; border-bottom:1px solid #35382f; color:#8c9084; font:8px/1.5 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.copy-button { padding:3px 7px; border:1px solid #4b4f45; color:#aeb1a5; background:#191c16; font:8px/1.5 ui-monospace,monospace; cursor:pointer; }
.copy-button:hover { color:var(--acid); border-color:var(--acid); }
pre { margin:0; padding:18px; overflow:auto; color:#cbd0c2; font:11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; }
pre code { font:inherit; }
.status,.tag { display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border:1px solid #95b83d; color:#33440b; background:#dcf59c; font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.status i { width:5px; height:5px; border-radius:50%; background:#6f950d; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:30px 0; }
.comparison article { display:flex; gap:16px; padding:20px; border:1px solid var(--ink); background:#ebeae2; }
.comparison h3 { margin:0 0 6px; }
.comparison p { margin:0; color:var(--muted); font-size:12px; }
.adapter-mark { flex:none; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--ink); background:var(--acid); box-shadow:2px 2px 0 var(--ink); font:700 11px/1 ui-monospace,monospace; }
.adapter-mark.dark { color:var(--paper); background:var(--ink); }
.table-wrap { margin-top:28px; overflow:auto; border:1px solid var(--ink); box-shadow:4px 4px 0 #bcbeb2; }
table { width:100%; min-width:660px; border-collapse:collapse; background:#ebeae2; font-size:11px; }
th,td { padding:13px 15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:#73766c; background:#deddd4; font:8px/1.4 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
td:first-child { width:120px; font-weight:700; }
td:last-child,th:last-child { width:120px; border-right:0; }
tr:last-child td { border-bottom:0; }
.security-diagram { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; margin:32px 0; border:1px solid var(--ink); background:#e5e4db; box-shadow:4px 4px 0 #bcbeb2; }
.security-diagram div { display:flex; flex-direction:column; justify-content:center; min-height:100px; padding:16px; }
.security-diagram .control { color:var(--paper); background:var(--ink); }
.security-diagram>span { display:grid; place-items:center; padding:8px; color:#66870d; font:8px/1.4 ui-monospace,monospace; text-align:center; }
.security-diagram small { color:#898c82; font:7px/1.5 ui-monospace,monospace; letter-spacing:.1em; }
.security-diagram strong { margin-top:7px; font-size:11px; }
.checklist { padding:0!important; list-style:none; }
.checklist li { position:relative; padding:9px 0 9px 30px; border-bottom:1px solid var(--line); }
.checklist li::before { content:"✓"; position:absolute; left:4px; color:#65850d; font-family:ui-monospace,monospace; font-weight:700; }
details { border-bottom:1px solid var(--line); }
details:first-of-type { margin-top:28px; border-top:1px solid var(--line); }
summary { padding:17px 3px; font-weight:650; cursor:pointer; list-style:none; }
summary::after { content:"+"; float:right; font-family:ui-monospace,monospace; }
details[open] summary::after { content:"−"; }
details p { margin:0 0 20px; padding-right:28px; color:var(--muted); font-size:13px; }
.next-step { margin:70px 0; padding:32px; border:1px solid var(--ink); color:var(--paper); background:var(--ink); box-shadow:6px 6px 0 var(--acid); }
.next-step .eyebrow { color:var(--acid); }
.next-step h2 { margin:10px 0 23px; font-size:34px; letter-spacing:-.045em; }
.footer { display:flex; justify-content:space-between; gap:20px; padding:25px 0 35px; color:#85887d; font:8px/1.5 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.toc { position:sticky; top:66px; align-self:start; height:calc(100vh - 66px); padding:40px 22px; overflow:auto; }
.toc p { color:#979a90; font:8px/1.4 ui-monospace,monospace; letter-spacing:.13em; }
.toc a { display:block; padding:5px 0; color:#85887d; font-size:9px; }
.toc a:hover,.toc a.active { color:#526c0d; }
.doc-section.search-hidden { display:none; }
.search-empty { margin-top:24px; padding:20px; border:1px dashed var(--muted); color:var(--muted); font-size:12px; }
@media (max-width:1100px) { .docs-shell { grid-template-columns:var(--sidebar) minmax(0,850px); } .toc { display:none; } .content { border-right:0; } }
@media (max-width:760px) {
  html { scroll-padding-top:72px; }
  .topbar { height:58px; padding:0 15px; }
  .mark { width:32px; height:32px; }
  .top-links { display:none; }
  .menu-button { display:block; }
  .docs-shell { display:block; }
  .sidebar { position:fixed; z-index:9; top:58px; left:0; width:min(310px,calc(100vw - 32px)); height:calc(100dvh - 58px); border-right:1px solid var(--ink); box-shadow:6px 0 0 #17191322; transform:translateX(-105%); transition:transform .2s ease; }
  .sidebar.open { transform:none; }
  .content { padding:0 20px; }
  .doc-section { padding:58px 0 62px; }
  .hero { padding-top:62px; }
  .hero h1 { font-size:47px; }
  .lede { font-size:15px; }
  .signal-grid { grid-template-columns:1fr; margin-top:48px; }
  .signal-grid div { min-height:76px; border-right:0; border-bottom:1px solid var(--ink); }
  .signal-grid span { margin-top:15px; }
  .cards.three,.cards.two,.comparison { grid-template-columns:1fr; }
  .security-diagram { grid-template-columns:1fr; }
  .security-diagram>span { min-height:42px; }
  .callout { grid-template-columns:1fr; gap:7px; }
  .footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }