:root{
  --bg:#0a0a0a; --panel:#121212; --panel-2:#161616; --line:#262626;
  --text:#e9e9e6; --text-dim:#8c8c88; --yellow:#f4c400; --yellow-dim:#5c4c10;
  --code-bg:#151310;
  --wm-stroke:rgba(255,255,255,.7);
  --yellow-glow:rgba(244,196,0,.25);
  --topbar-h:59px;
  --safe-top:env(safe-area-inset-top,0px);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#fbfaf6; --panel:#ffffff; --panel-2:#f1efe4; --line:#bdb89e;
    --text:#0f0e09; --text-dim:#3a3930; --yellow:#b8860b; --yellow-dim:#f2e4a8;
    --code-bg:#f6f1e1;
    --wm-stroke:rgba(15,14,9,.78);
    --yellow-glow:rgba(184,134,11,.16);
  }
}
:root[data-theme="light"]{
  --bg:#fbfaf6; --panel:#ffffff; --panel-2:#f1efe4; --line:#bdb89e;
  --text:#0f0e09; --text-dim:#3a3930; --yellow:#b8860b; --yellow-dim:#f2e4a8;
  --code-bg:#f6f1e1;
  --wm-stroke:rgba(15,14,9,.78);
  --yellow-glow:rgba(184,134,11,.16);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--topbar-h) + var(--safe-top) + 16px);}
body{
  min-height:100vh; min-height:100dvh;
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
code, .mono{font-family:'JetBrains Mono',monospace;}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky; top:var(--safe-top); z-index:20;
  display:flex; align-items:center; gap:12px;
  min-height:var(--topbar-h);
  padding:12px 22px; border-bottom:1px solid var(--line);
  background:var(--bg);
  max-width:100vw;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:0;}
.brand-badge{
  background:#f4c400; font-weight:800; font-size:16px; line-height:1.2;
  padding:7px 18px; border-radius:999px; letter-spacing:0;
  border:1.5px solid rgba(0,0,0,.55);
  white-space:nowrap; flex-shrink:0;
  font-family:'Space Grotesk','Inter',sans-serif;
  box-shadow:0 0 0 1px rgba(0,0,0,.04);
}
.brand-badge .gis{
  color:#fff;
  text-shadow:
    -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111,
    0 -1.3px 0 #111, 0 1.3px 0 #111, -1.3px 0 0 #111, 1.3px 0 0 #111;
}
.brand-badge .not{
  color:#111;
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
    0 -1.3px 0 #fff, 0 1.3px 0 #fff, -1.3px 0 0 #fff, 1.3px 0 0 #fff;
}
.brand-docs{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:18px;
  letter-spacing:-.02em; color:var(--text); margin-left:-4px; flex-shrink:0; line-height:1;
}
.brand-sep{width:1px; height:24px; background:var(--line); flex-shrink:0;}
.brand-tag{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
.brand-tag .l1{font-size:11.5px; font-weight:700; color:var(--text); letter-spacing:.02em; white-space:nowrap;}
.brand-tag .l1 .yl{color:var(--yellow);}
.brand-tag .l2{font-size:9.5px; font-weight:500; color:var(--text-dim); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;}

/* Search */
.search-wrap{position:relative; flex:1; max-width:420px; min-width:0; margin:0 auto;}
.search-icon{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-dim); pointer-events:none; width:14px; height:14px;}
.search-input{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  font-family:inherit; font-size:13px; padding:8px 60px 8px 34px; border-radius:8px;
  transition:border-color .15s ease;
}
.search-input::placeholder{color:var(--text-dim);}
.search-input:focus{outline:none; border-color:var(--yellow);}
.search-kbd{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim);
  border:1px solid var(--line); border-radius:4px; padding:2px 5px; pointer-events:none;
}
.search-wrap.has-value .search-kbd{display:none;}
.search-wrap.has-value .search-clear{display:inline-flex;}
.search-clear{
  display:none; position:absolute; right:34px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  padding:4px; border-radius:4px; align-items:center; justify-content:center;
}
.search-clear:hover{color:var(--text);}
.search-back{display:none;}
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  max-height:min(420px,70vh); overflow-y:auto; overscroll-behavior:contain; display:none; z-index:40;
}
.search-results.show{display:block;}
.search-empty{padding:14px 14px; font-size:13px; color:var(--text-dim); text-align:center;}
.search-item{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--line);
}
.search-item:last-child{border-bottom:none;}
.search-item:hover,.search-item.hl{background:var(--panel-2);}
.search-item-title{font-size:13px; font-weight:600; color:var(--text);}
.search-item-path{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim);}
.search-item-snip{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.search-item .hl-txt{color:var(--yellow);}
.search-scope{
  display:flex; gap:6px; padding:8px 10px;
  border-bottom:1px solid var(--line);
}
.scope-chip{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--text-dim); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  padding:4px 11px; cursor:pointer; white-space:nowrap;
}
.scope-chip:hover{color:var(--text); border-color:var(--text-dim);}
.scope-chip.on{color:var(--yellow); border-color:var(--yellow); background:var(--panel-2);}

.tb-meta{display:flex; gap:6px; align-items:center; flex-shrink:0;}
.tb-meta-item{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--text-dim); padding:5px 9px;
  border:1px solid var(--line); border-radius:7px;
  transition:all .15s ease;
}
.tb-meta-item:hover{border-color:var(--yellow); color:var(--yellow);}
.top-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.pillbtn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:7px 11px; min-height:34px;
  border-radius:7px; cursor:pointer;
}
.pillbtn:hover{border-color:var(--yellow);}
.pillbtn:focus-visible, .navlink:focus-visible{outline:2px solid var(--yellow); outline-offset:2px;}
.pillbtn.icon-only{
  padding:0; width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
}
.pillbtn.icon-only svg{display:block;}

/* ===== 3-COLUMN SHELL ===== */
.shell{
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 220px;
  max-width:1360px; margin:0 auto; width:100%;
}
.sidebar{
  position:sticky; top:calc(var(--topbar-h) + var(--safe-top)); align-self:start;
  height:calc(100vh - var(--topbar-h) - var(--safe-top));
  height:calc(100dvh - var(--topbar-h) - var(--safe-top));
  padding:24px 14px; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
}
.sidebar > *{flex-shrink:0;}
.side-group{margin-bottom:22px;}
.side-label{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--yellow);
  letter-spacing:.06em; margin:0 10px 8px;
}
.navlink{
  display:block; padding:8px 10px; border-radius:6px; font-size:14px;
  color:var(--text-dim); margin-bottom:2px; border-left:2px solid transparent;
}
.navlink:hover{color:var(--text); background:var(--panel-2);}
.navlink.active{color:var(--text); background:var(--panel-2); border-left-color:var(--yellow); font-weight:500;}

.content{padding:36px 42px; min-width:0; max-width:820px;}

.toc{
  padding:36px 18px 40px 0;
  font-size:12.5px; line-height:1.5;
  position:sticky; top:calc(var(--topbar-h) + var(--safe-top));
  align-self:start;
  max-height:calc(100vh - var(--topbar-h) - var(--safe-top));
  max-height:calc(100dvh - var(--topbar-h) - var(--safe-top)); overflow-y:auto;
}
.toc-title{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--yellow);
  letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 12px; padding-left:10px; font-weight:600;
}
.toc-list{list-style:none; margin:0; padding:0; border-left:1px solid var(--line);}
.toc-link{
  display:block; padding:5px 10px;
  color:var(--text-dim); font-size:12.5px; line-height:1.45;
  border-left:2px solid transparent; margin-left:-1px;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.toc-link:hover{color:var(--text);}
.toc-link.active{color:var(--yellow); border-left-color:var(--yellow); font-weight:500;}

.crumb{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); margin-bottom:10px;}
.crumb .yl{color:var(--yellow);}
h1{font-size:30px; margin:0 0 6px; letter-spacing:-.01em; scroll-margin-top:calc(var(--topbar-h) + var(--safe-top) + 16px);}
.lede{color:var(--text-dim); font-size:15px; margin:0 0 28px; max-width:60ch; line-height:1.55;}
h2{font-size:19px; margin:34px 0 10px; padding-top:6px; border-top:1px solid var(--line); padding-top:22px; scroll-margin-top:calc(var(--topbar-h) + var(--safe-top) + 16px);}
h2:first-of-type{border-top:none; padding-top:0;}
p{line-height:1.65; color:var(--text); font-size:14.5px; max-width:66ch;}
.pkg-block{
  background:var(--code-bg); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; font-family:'JetBrains Mono',monospace; font-size:13px;
  color:var(--text); overflow-x:auto; margin:14px 0;
  white-space:pre; line-height:1.6; tab-size:2; max-width:100%;
}
.table-wrap{overflow-x:auto; margin:12px 0 20px; max-width:100%;}
table{border-collapse:collapse; width:100%; margin:0; font-size:13.5px;}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line);}
th{color:var(--text-dim); font-weight:500; font-family:'JetBrains Mono',monospace; font-size:11.5px;}
td code{background:var(--code-bg); padding:1px 6px; border-radius:4px; font-size:12.5px; overflow-wrap:anywhere;}

.content ul, .content ol{margin:10px 0 14px; padding-left:22px; max-width:66ch;}
.content ul{list-style:disc;}
.content ol{list-style:decimal;}
.content li{margin:4px 0; line-height:1.6; color:var(--text); font-size:14.5px;}
.content li::marker{color:var(--yellow);}
.content li > code, .content p > code{
  background:var(--code-bg); border:1px solid var(--line); border-radius:4px;
  padding:1px 6px; font-family:'JetBrains Mono',monospace; font-size:12.5px;
  color:var(--yellow);
}
.content blockquote{
  margin:14px 0; padding:10px 16px;
  border-left:3px solid var(--yellow); background:var(--code-bg);
  border-radius:0 8px 8px 0; color:var(--text-dim);
  font-size:14px; line-height:1.6; max-width:66ch;
}
.content blockquote p{margin:0; color:var(--text-dim); max-width:none;}
.content strong{color:var(--text); font-weight:600;}
.content a{
  color:var(--yellow); text-decoration:none;
  border-bottom:1px dotted var(--yellow-dim);
}
.content a:hover{color:var(--text); border-bottom-color:var(--yellow);}
.badge{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px;
  background:var(--yellow-dim); color:var(--yellow); padding:4px 10px; border-radius:20px; margin-bottom:16px;
  border:1px solid var(--line);
}
.coords{
  margin-top:auto; padding:18px 10px 0;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
}
.coords span{color:var(--yellow);}

.article-foot{margin-top:40px; padding-top:20px; border-top:1px solid var(--line);}
.util-row{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--text-dim); padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px;
}
.helpful{display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px;}
.votebtn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  font-size:11.5px; padding:5px 10px; border-radius:6px; cursor:pointer; font-family:inherit;
}
.votebtn:hover{border-color:var(--yellow);}
.meta-right{display:flex; align-items:center; gap:12px;}
.meta-right a:hover{color:var(--yellow);}
.pager{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pager a{
  border:1px solid var(--line); border-radius:8px; padding:12px 14px;
  background:var(--panel); display:flex; flex-direction:column; gap:3px;
}
.pager a:hover{border-color:var(--yellow);}
.pager .dir{font-size:11px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}
.pager .ttl{font-size:13.5px; font-weight:500;}
.pager .next{text-align:right; align-items:flex-end;}

/* ===== BACK TO TOP ===== */
.to-top{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:42px; height:42px; border-radius:50%;
  background:var(--yellow); color:#111;
  border:none; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  z-index:25;
  transition:transform .18s ease, opacity .18s ease;
}
.to-top.show{display:flex;}
.to-top:hover{transform:translateY(-3px);}
.to-top svg{width:16px; height:16px;}

/* global footer */
.sitefoot{border-top:1px solid var(--line); background:var(--panel); margin-top:60px; position:relative; overflow:hidden;}
.sitefoot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 50% 100%, var(--yellow-dim) 0%, transparent 60%);
  opacity:.5;
}
.sitefoot-in{max-width:1180px; margin:0 auto; padding:48px 24px 30px; position:relative;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:38px; border-bottom:1px solid var(--line);}
.foot-brand .brand{flex-wrap:wrap; row-gap:8px;}
.foot-brand p{font-size:13.5px; color:var(--text-dim); line-height:1.7; max-width:36ch; margin:14px 0 16px;}
.foot-links{display:flex; gap:8px;}
.foot-links a{
  border:1px solid var(--line); border-radius:8px; padding:7px 12px;
  font-size:12px; font-weight:500; color:var(--text-dim);
  font-family:'JetBrains Mono',monospace;
  transition:all .15s ease;
}
.foot-links a:hover{border-color:var(--yellow); color:var(--yellow); transform:translateY(-1px);}
.foot-col h4{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.1em; color:var(--yellow); margin:0 0 14px; text-transform:uppercase;
}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.foot-col a{font-size:14px; font-weight:500; color:var(--text-dim); transition:color .15s ease;}
.foot-col a:hover{color:var(--yellow);}
.foot-wordmark{text-align:center; padding:44px 0 10px;}
.foot-wordmark .wm{
  font-size:clamp(36px,11vw,96px); font-weight:700; letter-spacing:-.03em; line-height:1;
  margin:0 0 10px; user-select:none;
}
.foot-wordmark .wm-bold{color:var(--yellow); text-shadow:0 0 40px var(--yellow-glow); font-weight:800;}
.foot-wordmark .wm-light{
  color:transparent; -webkit-text-stroke:2px var(--wm-stroke);
  margin-left:.15em; font-weight:600;
}
.foot-wordmark .tag{color:var(--text-dim); font-size:14px; margin:0 auto 20px; max-width:none; text-align:center; font-family:'JetBrains Mono',monospace; overflow-wrap:anywhere;}

.editors-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:14px; margin:18px 0 6px;}
.editor-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:16px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s ease, transform .15s ease;
}
.editor-card:hover{border-color:var(--yellow); transform:translateY(-2px);}
.editor-placeholder{opacity:.55; border-style:dashed;}

.platforms-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:14px 0;}
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0 22px;}
.service-card{
  display:flex; align-items:center; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:12px 14px; transition:border-color .15s ease, transform .15s ease;
}
.service-card:hover{border-color:var(--yellow); transform:translateY(-2px);}
.service-icon{
  width:38px; height:38px; flex-shrink:0; border-radius:8px;
  display:grid; place-items:center; padding:6px;
  background:color-mix(in srgb, var(--brand) 14%, var(--panel));
  border:1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
}
.service-info{flex:1; min-width:0;}
.service-name{font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:2px;}
.service-desc{font-size:11.5px; color:var(--text-dim); line-height:1.4;}
.service-arrow{color:var(--text-dim); font-size:14px; flex-shrink:0;}
.service-card:hover .service-arrow{color:var(--yellow); transform:translate(2px,-2px);}
.platform-card{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:12px; display:flex; flex-direction:column; gap:8px;
}
.platform-card:hover{border-color:var(--yellow);}
.platform-head{display:flex; align-items:center; gap:8px;}
.platform-icon{
  width:30px; height:30px; border-radius:7px; display:grid; place-items:center;
  flex-shrink:0; overflow:hidden;
}
.platform-icon.linux{background:linear-gradient(135deg,#333,#5c5c5c);}
.platform-icon.windows{background:linear-gradient(135deg,#0067b8,#00a4ef);}
.platform-icon.macos{background:linear-gradient(135deg,#1d1d1f,#6e6e73);}
.platform-icon.colab{background:linear-gradient(135deg,#f9ab00,#e8710a);}
.platform-name{font-weight:600; font-size:13px;}
.platform-install{
  display:flex; align-items:flex-start; gap:6px;
  background:var(--code-bg); border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; font-family:'JetBrains Mono',monospace; font-size:12px;
}
.platform-install code{flex:1; min-width:0; white-space:pre; overflow-x:auto; line-height:1.6;}

.vscode-cta{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(135deg,rgba(0,120,212,.12),rgba(31,156,240,.04));
  border:1px solid #0078d4; border-radius:10px;
  padding:14px 18px; margin:14px 0;
}
.vscode-cta-left{display:flex; align-items:center; gap:12px; min-width:0;}
.vscode-cta-icon{
  width:42px; height:42px; border-radius:9px;
  background:linear-gradient(135deg,#0078d4,#1f9cf0);
  display:grid; place-items:center; flex-shrink:0;
}
.vscode-cta-text h3{margin:0 0 2px; font-size:14px; font-weight:600;}
.vscode-cta-text p{margin:0; font-size:12px; color:var(--text-dim);}
.vscode-cta-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; background:#0078d4; color:#fff;
  border-radius:7px; font-weight:600; font-size:12.5px;
  white-space:nowrap; flex-shrink:0;
  font-family:'JetBrains Mono',monospace;
}
.vscode-cta-btn:hover{background:#1f9cf0; transform:translateY(-1px);}

.editor-head{display:flex; align-items:center; gap:10px;}
.editor-icon{width:42px; height:42px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;}
.editor-icon.vscode{background:linear-gradient(135deg,#0078d4,#1f9cf0);}
.editor-icon.sublime{background:linear-gradient(135deg,#ff9800,#ff5722);}
.editor-icon.notepad{background:linear-gradient(135deg,#42ac3d,#90e36e);}
.editor-name{font-weight:600; font-size:15px; line-height:1.2;}
.editor-meta{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);}
.editor-desc{font-size:13px; color:var(--text-dim); line-height:1.5; margin:0;}
.editor-install{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  background:var(--code-bg); border:1px solid var(--line); border-radius:7px;
  padding:8px 10px; font-family:'JetBrains Mono',monospace; font-size:12px;
  margin-top:auto;
}
.editor-install code{flex:1 1 150px; min-width:0; white-space:normal; overflow-wrap:break-word; line-height:1.5;}
.editor-install .copybtn{margin-left:auto;}
.editor-link{display:block; max-width:100%; min-width:0; font-size:12px; color:var(--yellow); font-family:'JetBrains Mono',monospace; overflow-wrap:anywhere;}
.editor-feat{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:5px;}
.editor-feat li{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim);
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
  padding:2px 7px;
}

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-top:24px; font-size:13px; color:var(--text-dim);
}
.foot-bottom-left{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.pill{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  color:var(--text-dim);
}
.pill:hover{border-color:var(--yellow); color:var(--text);}
.pill .dot{width:6px; height:6px; border-radius:50%; background:#22a35a; box-shadow:0 0 6px #22a35a;}

.pipcopy{position:relative; display:inline-flex; align-items:center; gap:8px;}
.copybtn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
  font-family:'JetBrains Mono',monospace; font-size:11.5px; padding:5px 10px;
  border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  transition:all .15s ease; line-height:1; flex-shrink:0;
}
.copybtn:hover{border-color:var(--yellow); color:var(--yellow);}
.copybtn.copied{background:rgba(74,222,128,.14); border-color:#22a35a; color:#1a7a43;}
.copybtn svg{width:13px; height:13px; flex-shrink:0;}
.copybtn .check{display:none !important;}
.copybtn.copied .clip{display:none;}
.copybtn.copied .check{display:inline-block !important;}

.foot-pip{
  margin:18px auto 0; padding:14px 16px; background:var(--code-bg);
  border:1px solid var(--line); border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; max-width:720px;
}
.foot-pip .pip-label{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em;
}
.foot-pip .pip-cmd{
  font-family:'JetBrains Mono',monospace; font-size:13.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
}
.foot-pip .pip-cmd .p{color:#22a35a; user-select:none; font-weight:700;}

.icon-img{width:100%;height:100%;object-fit:contain;display:block;}
.editor-icon .icon-img,.platform-icon .icon-img,.vscode-cta-icon .icon-img{width:70%;height:70%;}

.side-label.side-toggle{
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 10px 8px; margin:0 0 2px;
  font:inherit; color:var(--yellow); letter-spacing:.06em; text-align:left;
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
}
.side-label.side-toggle:hover{color:var(--text);}
.side-label.side-toggle .chev{transition:transform .2s ease;}
.side-label.side-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg);}
.side-group-body.collapsed{display:none;}
.side-soon-item{margin-top:14px;}
.pkg-side-soon{
  margin-top:8px; padding:8px 10px; border:1px dashed var(--line); border-radius:7px;
  color:var(--text-dim); font-size:11px; font-family:'JetBrains Mono',monospace;
  display:flex; align-items:center; gap:7px;
}
button.pkg-side-soon{
  width:100%; background:none; text-align:left; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
button.pkg-side-soon:hover{border-color:var(--yellow); color:var(--text);}
button.pkg-side-soon:focus-visible{outline:2px solid var(--yellow); outline-offset:2px;}
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,12px); opacity:0; pointer-events:none; z-index:50;
  display:flex; align-items:center; gap:8px;
  background:var(--panel); color:var(--text); border:1px solid var(--yellow);
  border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:opacity .2s ease, transform .2s ease;
}
.toast::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--yellow); flex-shrink:0;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.pkg-side-soon .dot{width:6px; height:6px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 3px var(--yellow-dim);}

#menuBtn, #mobileSearchBtn{display:none;}
.backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:15;}
.backdrop.show{display:block;}

/* ===== Misc fixes ===== */
.pkg-block.pipcopy{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.pkg-block.pipcopy code{flex:1; min-width:0; overflow-x:auto; white-space:pre;}
.foot-bottom-right{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.pager a{min-width:0; overflow-wrap:anywhere;}
.crumb{overflow-wrap:anywhere;}
.content{overflow-wrap:break-word;}
body.drawer-open{overflow:hidden;}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}

/* ===== Responsive ===== */
@media (min-width:801px){
  .content{border-left:1px solid var(--line);}
  .backdrop{display:none !important;}
}
@media (max-width:1200px){
  .shell{grid-template-columns:220px minmax(0,1fr);}
  .toc{display:none;}
}
@media (max-width:900px){
  .foot-grid{grid-template-columns:repeat(3,1fr); gap:22px;}
  .foot-brand{grid-column:1 / -1;}
  .topbar .brand-tag,.topbar .brand-sep{display:none;}
  .content{padding:32px 28px;}
}
@media (max-width:800px){
  :root{--topbar-h:55px;}
  #menuBtn, #mobileSearchBtn{display:inline-flex;}
  #mobileSearchBtn{margin-left:auto;}
  .topbar{padding:10px 12px; gap:8px;}
  .top-actions{gap:6px;}
  .tb-meta{display:none;}

  /* Search overlay */
  .search-wrap{
    position:fixed; top:0; left:0; right:0; width:auto; max-width:none; flex:none; margin:0;
    display:flex; align-items:center; gap:8px;
    padding:10px 12px; padding-top:calc(10px + var(--safe-top));
    background:var(--bg); border-bottom:1px solid var(--line);
    transform:translateY(-100%); visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
    z-index:30;
  }
  .search-wrap.show{
    transform:translateY(0); visibility:visible; transition-delay:0s;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  .search-back{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:42px; flex-shrink:0;
    background:none; border:none; color:var(--text); cursor:pointer;
    padding:0; border-radius:6px;
  }
  .search-back:hover{background:var(--panel-2);}
  .search-wrap .search-icon{left:66px; top:calc(var(--safe-top) + 31px);}
  .search-wrap .search-kbd{display:none;}
  .search-wrap .search-input{height:42px; padding:0 40px 0 38px; font-size:16px;}
  .search-wrap .search-clear{right:20px; top:calc(var(--safe-top) + 31px); padding:8px;}
  .search-wrap .search-results{
    left:12px; right:12px; top:calc(100% + 6px);
    max-height:60vh; max-height:calc(100dvh - var(--safe-top) - 96px);
  }

  /* Drawer */
  .shell{grid-template-columns:1fr;}
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:16;
    width:min(288px,84vw); height:auto; align-self:auto;
    padding:calc(var(--topbar-h) + var(--safe-top) + 16px) 14px calc(20px + env(safe-area-inset-bottom,0px));
    background:var(--panel); border-right:1px solid var(--line);
    transform:translateX(-100%); visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
  }
  .sidebar.open{
    transform:none; visibility:visible; transition-delay:0s;
    box-shadow:12px 0 40px rgba(0,0,0,.35);
  }
  .navlink{padding:10px 12px; font-size:15px;}

  .content{padding:24px 18px; max-width:100%;}
  .sitefoot-in{padding:40px 18px 26px;}
  /* Footer: mobilda hammasi markazda */
  .sitefoot-in{text-align:center;}
  .foot-brand .brand{justify-content:center;}
  .foot-brand p{margin:14px auto 16px;}
  .foot-links{justify-content:center;}
  .foot-col ul{align-items:center;}
  .foot-bottom{flex-direction:column; align-items:center; text-align:center;}
  .foot-bottom-left{justify-content:center;}
  .foot-bottom-right{justify-content:center;}
  .foot-pip{flex-direction:column; align-items:center; text-align:center; max-width:100%; gap:10px;}
  .foot-pip .pip-cmd{justify-content:center; flex-wrap:wrap;}
  .foot-pip .copybtn{justify-content:center; padding:9px 22px;}
  .pager{grid-template-columns:1fr;}
  .pager .next{text-align:left; align-items:flex-start;}
  .vscode-cta{flex-direction:column; align-items:flex-start;}
  .vscode-cta-btn{width:100%; justify-content:center;}
}
@media (max-width:640px){
  .platforms-grid,.services-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-col:last-child{grid-column:1 / -1;}
  h1{font-size:24px;}
  h2{font-size:17px;}
  .content{padding:20px 14px;}
  .sitefoot-in{padding:32px 16px 22px;}
}
@media (max-width:480px){
  .brand-badge{font-size:14px; padding:6px 14px;}
  .brand-docs{font-size:15px; margin-left:-6px;}
  .brand{gap:10px;}
  .foot-wordmark .wm-light{-webkit-text-stroke:1.5px var(--wm-stroke);}
  .to-top{right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); width:38px; height:38px;}
}