:root { color-scheme: dark; --bg:#090d12; --surface:#111820; --surface-2:#17212b; --line:#263442; --line-light:#35485a; --text:#e8edf2; --muted:#8e9aa6; --gold:#d2ae62; --gold-soft:rgba(210,174,98,.12); --status:#adff6a; --red:#ff9d92; --font:'Manrope',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:105px; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 72% 0,rgba(43,76,104,.2),transparent 28%),var(--bg); font:400 16px/1.7 var(--font); overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.02; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
code { font-family:var(--mono); overflow-wrap:anywhere; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:9px 13px; color:#171208; background:var(--gold); border-radius:6px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.docs-header { position:sticky; z-index:30; top:0; min-height:78px; display:flex; align-items:center; gap:28px; padding:0 max(24px,calc((100vw - 1440px)/2)); border-bottom:1px solid rgba(53,72,90,.7); background:rgba(9,13,18,.88); backdrop-filter:blur(18px); }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:750; letter-spacing:-.6px; white-space:nowrap; }
.brand img { border-radius:9px; }
.brand span span { color:var(--muted); font-weight:450; }
.docs-title { color:#87938a; font:500 9px var(--mono); letter-spacing:1.4px; padding-left:28px; border-left:1px solid var(--line); }
.docs-title span { color:var(--gold); }
.docs-header nav { margin-left:auto; display:flex; align-items:center; gap:25px; color:#aab5ac; font-size:12px; font-weight:650; }
.docs-header nav a[aria-current="page"] { color:var(--gold); }
.docs-menu-toggle { display:none; position:relative; width:48px; height:42px; padding:9px 10px; color:var(--text); border:1px solid var(--line-light); border-radius:8px; background:#111820; cursor:pointer; }
.docs-menu-toggle span { display:block; width:19px; height:1px; margin:4px auto; background:currentColor; }
.docs-menu-toggle b { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.docs-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.docs-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.docs-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }
.header-action { padding:9px 12px; border:1px solid var(--line-light); border-radius:7px; background:#151d19; }
.header-action span { color:var(--gold); margin-left:10px; }
.docs-shell { width:min(1440px,100%); margin:0 auto; display:grid; grid-template-columns:280px minmax(0,1fr); }
.docs-sidebar { position:sticky; top:78px; height:calc(100vh - 78px); padding:34px 24px 30px; border-right:1px solid var(--line); overflow:auto; }
.search-box label { display:block; margin-bottom:8px; color:#657169; font:500 7px var(--mono); letter-spacing:1.2px; }
.search-box > div { min-height:42px; display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid var(--line); border-radius:7px; background:#0d141b; }
.search-box span { color:var(--gold); }
.search-box input { width:100%; color:var(--text); border:0; outline:0; background:transparent; font-size:11px; }
.search-box input::placeholder { color:#59655d; }
.chapter-nav { display:flex; flex-direction:column; gap:4px; margin-top:28px; }
.chapter-nav a { display:flex; align-items:center; gap:11px; min-height:40px; padding:0 11px; color:#87938a; border:1px solid transparent; border-radius:6px; font-size:11px; transition:.15s; }
.chapter-nav a:hover,.chapter-nav a.active { color:#e4e9e5; border-color:#39483e; background:var(--gold-soft); }
.chapter-nav a span { color:#665f4c; font:500 7px var(--mono); }
.chapter-nav a.active span { color:var(--gold); }
.sidebar-support { margin-top:28px; padding:17px; display:flex; flex-direction:column; gap:7px; border:1px solid #4b4535; border-radius:8px; background:rgba(210,174,98,.055); }
.sidebar-support strong { font-size:11px; }
.sidebar-support span { color:#7f8b82; font-size:9px; line-height:1.6; }
.sidebar-support a { color:var(--gold); font:500 8px var(--mono); overflow-wrap:anywhere; }
.docs-content { width:min(100%,1000px); min-width:0; padding:58px 72px 105px; }
.docs-content section { padding:54px 0; border-bottom:1px solid var(--line); }
.docs-content section:first-child { padding-top:35px; }
.guide-hero { min-height:520px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { margin:0 0 22px; color:#9eaaa1; font:500 10px var(--mono); letter-spacing:1.7px; }
.eyebrow span { display:inline-block; width:24px; height:1px; margin:0 10px 3px 0; background:var(--gold); }
h1 { max-width:790px; margin:0 0 28px; font-size:clamp(58px,7vw,92px); line-height:.98; letter-spacing:-5.5px; font-weight:650; }
.lead { max-width:760px; margin:0; color:#a3aea6; font-size:18px; line-height:1.8; }
.guide-meta { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:34px; color:#7b877f; font:500 8px var(--mono); letter-spacing:.4px; }
.guide-meta b { color:var(--gold); margin-right:7px; }
.section-number { color:var(--gold); font:500 9px var(--mono); letter-spacing:1.5px; }
h2 { margin:15px 0 23px; font-size:clamp(39px,5vw,61px); line-height:1.08; letter-spacing:-3px; }
h3 { margin:0 0 7px; font-size:16px; }
.docs-content section > p { max-width:800px; color:#9ba79e; font-size:14px; line-height:1.85; }
.requirements-grid,.operations-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:35px; }
.requirements-grid article,.operations-grid article { min-height:180px; padding:24px; border:1px solid var(--line); border-radius:9px; background:linear-gradient(145deg,#121b23,#0d141a); }
.requirements-grid article > span,.operations-grid article > span,.method-grid article > span { color:var(--gold); font:500 8px var(--mono); letter-spacing:1px; }
.requirements-grid strong { display:block; margin:22px 0 8px; font-size:16px; }
.requirements-grid p,.operations-grid p,.method-grid p { margin:0; color:#829087; font-size:11px; line-height:1.7; }
.path-strip { margin-top:25px; display:flex; align-items:center; justify-content:space-between; padding:22px; border:1px solid #3d493d; border-radius:9px; background:#111913; }
.path-strip div { display:flex; align-items:center; gap:9px; }
.path-strip b { width:30px; height:30px; display:grid; place-items:center; color:#171208; border-radius:50%; background:var(--gold); font:700 9px var(--mono); }
.path-strip span { color:#aeb8b0; font-size:9px; line-height:1.4; }
.path-strip i { color:#545f57; font-style:normal; }
.steps { margin-top:35px; border-top:1px solid var(--line); }
.steps article { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:28px 0; border-bottom:1px solid var(--line); }
.steps article > span { color:var(--gold); font:500 9px var(--mono); }
.steps p { margin:0; color:#8e9a91; font-size:12px; line-height:1.75; }
.code-block { margin:18px 0; overflow:hidden; border:1px solid #394a58; border-radius:8px; background:#08100d; }
.code-block > div { min-height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; border-bottom:1px solid #24323e; background:#151e27; }
.code-block > div span { color:#738078; font:500 7px var(--mono); letter-spacing:1px; }
.code-block button { color:var(--gold); border:1px solid #465146; border-radius:5px; background:#1b261f; padding:5px 8px; font:500 8px var(--mono); cursor:pointer; }
.code-block pre { margin:0; padding:20px; overflow:auto; white-space:pre-wrap; }
.code-block code { color:#ccd5ce; font-size:10px; line-height:1.9; }
.notice { margin-top:30px; padding:19px 21px; display:grid; grid-template-columns:190px 1fr; gap:22px; border:1px solid; border-radius:8px; }
.notice strong { font-size:12px; }
.notice p { margin:0; font-size:10px; line-height:1.7; }
.notice.warning { border-color:#5f5235; background:rgba(210,174,98,.06); }
.notice.warning p { color:#a99a78; }
.notice.info,.notice.roadmap { border-color:#344d5d; background:rgba(44,85,114,.09); }
.notice.info p,.notice.roadmap p { color:#8ba0ad; }
.notice.danger { border-color:#62433f; background:rgba(255,157,146,.055); }
.notice.danger p { color:#b7948e; }
details { margin-top:15px; border:1px solid var(--line); border-radius:8px; background:#0f161d; }
summary { padding:16px 19px; cursor:pointer; font-size:12px; font-weight:700; }
details > p,details > ul { margin:0; padding:0 19px 19px 38px; color:#89968d; font-size:11px; line-height:1.75; }
.method-grid,.split-panel { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-top:33px; }
.method-grid article,.split-panel article { padding:27px; border:1px solid var(--line); border-radius:9px; background:#111820; }
.method-grid h3 { margin:22px 0 14px; }
.method-grid ol,.split-panel ol { margin:0; padding-left:19px; color:#8e9a91; font-size:11px; line-height:1.9; }
.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:34px; }
.flow-grid article { min-height:225px; padding:23px; border:1px solid var(--line); border-radius:8px; background:#10171e; }
.flow-grid b { color:var(--gold); font:500 8px var(--mono); }
.flow-grid h3 { margin-top:38px; }
.flow-grid p { margin:0; color:#849087; font-size:10px; line-height:1.75; }
.subheading { margin-top:42px; }
.placeholder-table { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.placeholder-table > div { display:grid; grid-template-columns:115px 1fr 155px 1fr; border-top:1px solid var(--line); }
.placeholder-table > div:first-child { border-top:0; }
.placeholder-table code,.placeholder-table span { padding:12px; font-size:10px; }
.placeholder-table code { color:var(--gold); background:#0d141b; }
.placeholder-table span { color:#89958d; }
.fine-print { color:#76837a!important; font:400 9px/1.8 var(--mono)!important; }
.split-panel h3 { margin-bottom:18px; }
.split-panel p { color:#859188; font-size:10px; line-height:1.75; }
.text-action,.split-panel a { color:var(--gold); }
.text-action { display:inline-block; margin-top:18px; font-size:10px; font-weight:700; }
.phone-install-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-top:33px; }
.phone-install-grid > article { padding:29px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(145deg,#121b23,#0d141a); }
.phone-install-grid article > span { color:var(--gold); font:500 10px var(--mono); letter-spacing:1px; }
.phone-install-grid h3 { margin:24px 0 2px; font-size:22px; }
.platform-browser { margin:0 0 20px; color:#77857c; font:500 11px var(--mono); }
.phone-install-grid ol { margin:0; padding-left:21px; color:#99a59c; font-size:14px; line-height:1.85; }
.phone-install-grid li { margin:8px 0; padding-left:4px; }
.browser-alternative { margin:20px 0 0; padding-top:16px; color:#859188; border-top:1px solid var(--line); font-size:13px; line-height:1.7; }
.pwa-benefit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.pwa-benefit-grid article { min-height:180px; padding:24px; border:1px solid var(--line); border-radius:8px; background:#10171e; }
.pwa-benefit-grid article > span { color:var(--gold); font:500 10px var(--mono); }
.pwa-benefit-grid strong { display:block; margin:25px 0 8px; font-size:17px; }
.pwa-benefit-grid p { margin:0; color:#859188; font-size:13px; line-height:1.75; }
.trouble-list { margin-top:30px; }
.trouble-list details { margin-top:9px; }
.trouble-list li { margin:4px 0; }
.checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:32px; }
.checklist label { min-height:68px; display:flex; align-items:flex-start; gap:12px; padding:16px; color:#9ca89f; border:1px solid var(--line); border-radius:7px; background:#10171e; font-size:11px; cursor:pointer; }
.checklist input { margin-top:4px; accent-color:var(--gold); }
.checklist input:checked + span { color:#69756d; text-decoration:line-through; }
.next-actions { margin-top:35px; padding:28px; display:flex; align-items:center; justify-content:space-between; gap:25px; color:#171208; border-radius:10px; background:var(--gold); }
.next-actions span { font:600 8px var(--mono); letter-spacing:1px; }
.next-actions h3 { margin:4px 0; font-size:21px; }
.next-actions p { margin:0; color:#5e4e2d; font-size:10px; }
.next-actions a { padding:12px 15px; color:var(--gold); border-radius:6px; background:#11180d; font-size:11px; font-weight:750; white-space:nowrap; }
.no-results { margin:90px 0; padding:45px; text-align:center; border:1px dashed #5c5037; border-radius:10px; }
.no-results strong { font-size:20px; }
.no-results p { color:#869289; }
.no-results a { color:var(--gold); }
footer { max-width:1440px; margin:0 auto; padding:28px; display:flex; align-items:center; justify-content:space-between; gap:25px; color:#657169; border-top:1px solid var(--line); font:500 8px var(--mono); }
footer .brand { font-family:var(--font); font-size:17px; }
footer > a:last-child { color:var(--gold); }
[hidden] { display:none!important; }

@media (max-width:1200px) {
  .docs-header { gap:14px; }
  .docs-title { margin-right:auto; }
  .docs-menu-toggle { display:block; }
  .docs-header nav { position:absolute; top:68px; left:14px; right:14px; display:none; align-items:stretch; flex-direction:column; gap:3px; padding:10px; border:1px solid var(--line-light); border-radius:10px; background:rgba(9,13,18,.98); box-shadow:0 22px 55px rgba(0,0,0,.45); }
  .docs-header nav.open { display:flex; }
  .docs-header nav a { padding:10px 12px; border-radius:6px; }
  .docs-header nav a:hover,.docs-header nav a[aria-current="page"] { background:var(--gold-soft); }
  .docs-shell { grid-template-columns:230px minmax(0,1fr); }
  .docs-sidebar { padding-left:17px; padding-right:17px; }
  .docs-content { padding-left:45px; padding-right:45px; }
  .flow-grid { grid-template-columns:repeat(2,1fr); }
  .path-strip span { display:none; }
}
@media (max-width:760px) {
  html { scroll-padding-top:80px; }
  .docs-header { min-height:66px; padding:0 12px; gap:12px; }
  .docs-header .brand { font-size:17px; }
  .docs-header .brand img { width:33px; height:33px; }
  .docs-title { display:none; }
  .docs-menu-toggle { margin-left:auto; }
  .docs-header nav { top:62px; }
  .docs-shell { display:block; }
  .docs-sidebar { position:static; width:100%; height:auto; padding:18px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .chapter-nav { flex-direction:row; margin-top:14px; overflow:auto; padding-bottom:4px; }
  .chapter-nav a { min-width:max-content; }
  .sidebar-support { display:none; }
  .docs-content { width:100%; padding:20px 20px 90px; }
  .guide-hero { min-height:480px; }
  h1 { font-size:clamp(48px,15vw,67px); letter-spacing:-4px; }
  h2 { font-size:42px; }
  .lead { font-size:15px; }
  .requirements-grid,.operations-grid,.method-grid,.split-panel,.flow-grid,.checklist,.phone-install-grid,.pwa-benefit-grid { grid-template-columns:1fr; }
  .path-strip { overflow:auto; justify-content:flex-start; gap:13px; }
  .path-strip div { min-width:max-content; }
  .notice { grid-template-columns:1fr; gap:6px; }
  .placeholder-table > div { grid-template-columns:110px 1fr; }
  .next-actions { align-items:flex-start; flex-direction:column; }
  footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Readability and canonical brand pass. */
.brand .brand-wordmark { width:auto; height:38px; border-radius:0; }
.docs-title { font-size:11px; }
.docs-header nav { font-size:14px; }
.search-box label,.chapter-nav a span,.requirements-grid article > span,.operations-grid article > span,.method-grid article > span,.code-block > div span,.flow-grid b,.next-actions span { font-size:10px; }
.search-box input,.chapter-nav a { font-size:14px; }
.sidebar-support strong { font-size:14px; }
.sidebar-support span { font-size:12px; }
.eyebrow,.guide-meta,.section-number,.steps article > span { font-size:11px; }
.docs-content section > p { font-size:16px; }
.requirements-grid p,.operations-grid p,.method-grid p,.steps p,.method-grid ol,.split-panel ol,details > p,details > ul,.checklist label { font-size:14px; }
.path-strip span,.code-block code,.notice p,.flow-grid p,.placeholder-table code,.placeholder-table span,.split-panel p,.fine-print,.next-actions p,.text-action { font-size:13px!important; }
.code-block button { font-size:11px; }
.notice strong,summary { font-size:14px; }
.flow-grid h3,.method-grid h3,.split-panel h3 { font-size:18px; }
.next-actions a { font-size:14px; }
footer { font-size:12px; }

@media (max-width:760px) {
  .docs-header .brand .brand-wordmark { width:auto; height:34px; }
  .lead { font-size:17px; }
  .docs-content section > p { font-size:16px; }
  .chapter-nav a { font-size:13px; }
}