/* =========================
   THEME VARIABLES
   ========================= */
   :root{
    /* Dark theme defaults (body[data-theme="dark"]) */
    --bg:#0b0c10; 
    --panel:#111318; 
    --muted:#9aa3b2; 
    --text:#e6e6e6; 
    --brand:#7cc4ff; 
    --accent:#98ffa7; 
    --code:#0f1318; 
    --border:#1c2029;
    --radius:14px; 
    --shadow:0 6px 24px rgba(0,0,0,.25);
  
    --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  }
  
  /* Light theme overrides */
  body[data-theme="light"]{
    --bg:#ffffff;
    --panel:#f6f7f9;
    --muted:#616b7a;
    --text:#0d1117;
    --brand:#0b74ff;
    --accent:#0bb65e;
    --code:#f3f5f7;
    --border:#d8dee9;
    --shadow:0 4px 18px rgba(0,0,0,.08);
  }
  
  /* =========================
     LAYOUT + BASICS
     ========================= */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg);
    color:var(--text); font-family:Quicksand, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; display:flex; min-height:100vh;
  }
  
  #sidebar{
    width:320px; padding:18px; background:var(--panel); border-right:1px solid var(--border);
    position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:16px;
  }
  .brand{
    display:flex; align-items:center; justify-content:space-between; gap:10px; 
  }
  .brand-link{
    font-weight:700; color:var(--text); text-decoration:none; letter-spacing:.2px;
  }
  .brand-link:hover{ text-decoration:underline; text-underline-offset:3px; }
  
  .theme-toggle{
    border:1px solid var(--border); background:transparent; color:var(--text);
    padding:6px 10px; border-radius:10px; cursor:pointer; font-size:14px; min-width:42px;
  }
  .theme-toggle:active{ transform:translateY(1px); }
  .theme-icon{ display:inline-block; width:18px; text-align:center; }
  
  .search input{
    width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text);
  }
  
  #toc{flex:1; overflow:auto; padding-right:4px}
  
  /* Collapsible groups */
  .toc-group{
    border:1px solid var(--border);
    background:transparent;
    border-radius:10px; margin-bottom:10px;
  }
  .toc-group summary{
    list-style:none;
    cursor:pointer;
    padding:10px 12px;
    color:var(--text);
    display:flex; align-items:center; gap:8px;
  }
  .toc-group summary::-webkit-details-marker { display:none; }
  .toc-group summary .caret{
    transition: transform .18s ease;
    display:inline-block;
  }
  .toc-group[open] summary .caret{
    transform: rotate(90deg);
  }
  .toc-subitems{
    padding:6px 8px 10px 30px;
  }
  .toc-link{
    display:block; padding:6px 8px; color:var(--muted); text-decoration:none; border-radius:8px;
  }
  .toc-link:hover{ background:var(--code); color:var(--text); }
  .toc-link.active{ background:var(--code); color:var(--text); }
  
  main{flex:1; overflow:auto}
  .container{max-width:980px; margin:0 auto; padding:28px}
  article{
    background:rgba(0,0,0,0.02); 
    border:1px solid var(--border); 
    border-radius:var(--radius); 
    box-shadow:var(--shadow); 
    padding:28px
  }
  body[data-theme="light"] article{ background:#fff; }
  
  article h1,article h2,article h3{scroll-margin-top:80px}
  article h1{font-size:30px;margin:0 0 10px}
  article h2{font-size:22px;margin-top:28px}
  article h3{font-size:18px;margin-top:18px;color:var(--muted)}
  article p{line-height:1.7}
  article ul{line-height:1.7}
  a{color:var(--brand)}
  code, pre code{font-family:Quicksand, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}
  pre{
    background:var(--code); border:1px solid var(--border); border-radius:12px; padding:14px; overflow:auto; position:relative; margin:16px 0;
  }
  .copy-btn{
    position:absolute; top:8px; right:8px; border:1px solid var(--border); background:transparent; color:var(--text); padding:6px 10px; border-radius:8px; cursor:pointer; font-size:12px;
  }
  .copy-btn:active{transform:translateY(1px)}
  kbd{
    background:var(--code); border:1px solid var(--border); border-bottom-color:#10141b; border-radius:6px; padding:2px 6px; font-family:Quicksand, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; font-size:12px;
  }
  
  #backToTop{
    position:fixed; right:18px; bottom:18px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; display:none;
  }
  @media (max-width:1100px){
    #sidebar{display:none}
    .container{padding:16px}
  }
  
  /* Images: consistent sizing helpers */
  figure { margin: 18px auto; }
  figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }
  .center { text-align:center; }
  .center img { display:inline-block; }
  
  /* Standardized image widths */
  img.img-sm { width: 420px; max-width: 100%; }
  img.img-md { width: 720px; max-width: 100%; }
  img.img-lg { width: 1024px; max-width: 100%; }