:root {
    --bg:    #0b1120;
    --bg2:   #111827;
    --bg3:   #1a2235;
    --bg4:   #1f2d44;
    --border:  rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.14);
    --text:  #dde3f0;
    --muted: #6e7d99;
    --accent:  #38bdf8;
    --accent2: #4ade80;
    --amber:   #fbbf24;
    --red:     #f87171;
    --purple:  #a78bfa;
    --teal:    #2dd4bf;
    --orange:  #fb923c;
    --mono: 'Cascadia Code','Fira Code','JetBrains Mono',monospace;
    --sans: 'Inter',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.7;display:flex;min-height:100vh}

  /* ── SIDEBAR ── */
  .sidebar{width:252px;min-width:252px;background:var(--bg2);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;overflow-y:auto;padding:0 0 48px;flex-shrink:0}
  .sidebar::-webkit-scrollbar{width:3px}
  .sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
  .sb-head{padding:20px 20px 16px;border-bottom:1px solid var(--border);margin-bottom:10px;background:linear-gradient(130deg,rgba(56,189,248,.1),rgba(74,222,128,.05))}
  .sb-title{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.06em}
  .sb-sub{font-size:11px;color:var(--muted);margin-top:2px}
  .nav-grp{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;padding:11px 20px 4px}
  .nav-link{display:flex;align-items:center;gap:8px;padding:5px 20px;color:var(--muted);text-decoration:none;font-size:12.5px;transition:color .15s,background .15s;border-left:2px solid transparent}
  .nav-link:hover{color:var(--text);background:var(--bg3)}
  .nav-link.active{color:var(--accent);border-left-color:var(--accent);background:rgba(56,189,248,.07)}
  .nd{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.45}

  /* ── MAIN ── */
  .main{flex:1;max-width:980px;padding:40px 52px 100px;overflow-x:hidden}

  /* ── HERO ── */
  .hero{border-radius:12px;padding:28px 32px;margin-bottom:40px;position:relative;overflow:hidden;background:linear-gradient(130deg,rgba(56,189,248,.09),rgba(74,222,128,.05) 60%,rgba(167,139,250,.06));border:1px solid rgba(56,189,248,.2)}
  .hero::after{content:'LG';position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:110px;font-weight:900;color:rgba(56,189,248,.05);letter-spacing:-6px;pointer-events:none;user-select:none}
  .hero h1{font-size:24px;font-weight:700;margin-bottom:6px}
  .hero p{font-size:14px;color:var(--muted);max-width:580px;margin-bottom:16px}
  .badges{display:flex;flex-wrap:wrap;gap:8px}
  .badge{font-size:11px;font-weight:600;padding:3px 11px;border-radius:20px;white-space:nowrap;letter-spacing:.02em}
  .ba{background:rgba(56,189,248,.15);color:#7dd3f8;border:1px solid rgba(56,189,248,.28)}
  .bg{background:rgba(74,222,128,.13);color:#6ee7a0;border:1px solid rgba(74,222,128,.25)}
  .bam{background:rgba(251,191,36,.13);color:#fcd34d;border:1px solid rgba(251,191,36,.25)}
  .bp{background:rgba(167,139,250,.13);color:#c4b5fd;border:1px solid rgba(167,139,250,.25)}

  /* ── TYPOGRAPHY ── */
  h2{font-size:19px;font-weight:700;color:var(--text);margin:42px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
  h2 .ico{font-size:17px;opacity:.85}
  h3{font-size:14.5px;font-weight:600;color:var(--text);margin:24px 0 9px}
  h4{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:18px 0 7px}
  p{color:var(--muted);margin-bottom:10px;line-height:1.75;font-size:13.5px}
  p strong{color:var(--text);font-weight:600}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  ul,ol{margin:8px 0 12px 20px}
  li{color:var(--muted);font-size:13.5px;margin-bottom:4px;line-height:1.65}
  li strong{color:var(--text);font-weight:600}
  section{margin-bottom:56px;scroll-margin-top:24px}

  /* ── CODE ── */
  pre{background:#070d1a;border:1px solid var(--border);border-radius:9px;padding:17px 20px;overflow-x:auto;margin:12px 0;font-family:var(--mono);font-size:12.5px;line-height:1.7;position:relative}
  pre[data-label]::before{content:attr(data-label);position:absolute;top:9px;right:12px;font-size:10px;font-family:var(--sans);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
  pre::-webkit-scrollbar{height:3px}
  pre::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
  code{font-family:var(--mono);font-size:12px;background:rgba(56,189,248,.11);padding:1px 6px;border-radius:4px;color:var(--accent)}
  pre code{background:none;padding:0;border-radius:0;font-size:12.5px;color:inherit}
  /* tokens */
  .kw{color:#c792ea}  .str{color:#c3e88d}  .cm{color:#3d4f6b;font-style:italic}
  .fn{color:#82aaff}  .tp{color:#ffcb6b}   .nu{color:#f78c6c}
  .at{color:var(--teal)}  .op{color:#89ddff} .de{color:var(--orange)}
  .hl{background:rgba(56,189,248,.08);display:block;margin:0 -20px;padding:0 20px;border-left:2px solid var(--accent)}

  /* ── DO/DON'T ── */
  .diff{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
  @media(max-width:720px){.diff{grid-template-columns:1fr}}
  .diff-blk{border-radius:8px;overflow:hidden}
  .diff-hdr{font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 14px;display:flex;align-items:center;gap:6px}
  .do .diff-hdr{background:rgba(74,222,128,.14);color:#4ade80;border:1px solid rgba(74,222,128,.24);border-bottom:none}
  .dn .diff-hdr{background:rgba(248,113,113,.11);color:#f87171;border:1px solid rgba(248,113,113,.2);border-bottom:none}
  .do pre{border-top-left-radius:0;border-top-right-radius:0;border-color:rgba(74,222,128,.18);margin:0}
  .dn pre{border-top-left-radius:0;border-top-right-radius:0;border-color:rgba(248,113,113,.15);margin:0}

  /* ── TABLE ── */
  .tw{overflow-x:auto;margin:12px 0;border-radius:9px;border:1px solid var(--border)}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;padding:9px 14px;background:var(--bg3);color:var(--text);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--border2)}
  td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted);vertical-align:top}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:rgba(255,255,255,.016)}

  /* ── CALLOUT ── */
  .call{display:flex;gap:12px;border-radius:8px;padding:13px 16px;margin:13px 0;font-size:13.5px;line-height:1.65}
  .call-icon{flex-shrink:0;font-size:15px;margin-top:1px}
  .call-body{color:var(--muted)}
  .call-body strong{color:var(--text)}
  .tip{background:rgba(74,222,128,.07);border:1px solid rgba(74,222,128,.2)}
  .warn{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.22)}
  .info{background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.2)}
  .danger{background:rgba(248,113,113,.07);border:1px solid rgba(248,113,113,.2)}

  /* ── CARDS ── */
  .cards{display:grid;gap:12px}
  .cards2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .cards3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .card{background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:16px 18px;transition:border-color .18s}
  .card:hover{border-color:var(--border2)}
  .ctag{font-size:10px;font-weight:700;color:var(--accent);background:rgba(56,189,248,.12);padding:1px 7px;border-radius:10px;display:inline-block;margin-bottom:7px;letter-spacing:.04em}
  .ctitle{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:5px}
  .cbody{font-size:12.5px;color:var(--muted);line-height:1.6}

  /* ── FLOW ── */
  .flow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:12px 0}
  .fstep{font-size:12px;font-weight:500;padding:5px 12px;border-radius:6px;background:var(--bg3);border:1px solid var(--border2);color:var(--text)}
  .farr{color:var(--muted);font-size:14px}

  /* ── SEVERITY ── */
  .sev{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:.04em;white-space:nowrap}
  .must{background:rgba(248,113,113,.18);color:#f8a0a0;border:1px solid rgba(248,113,113,.3)}
  .should{background:rgba(251,191,36,.14);color:#fcd34d;border:1px solid rgba(251,191,36,.3)}
  .avoid{background:rgba(74,222,128,.12);color:#6ee7a0;border:1px solid rgba(74,222,128,.25)}

  /* ── LINK LIST ── */
  .llist{list-style:none;display:flex;flex-direction:column;gap:6px;margin:10px 0}
  .llist li{display:flex;align-items:baseline;gap:8px;padding:8px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:7px;font-size:13px;transition:border-color .15s}
  .llist li:hover{border-color:var(--border2)}
  .ltag{font-size:10px;color:var(--muted);background:var(--bg3);padding:1px 6px;border-radius:4px;flex-shrink:0}

  ::-webkit-scrollbar{width:5px;height:5px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:3px}
  @media(max-width:768px){.sidebar{display:none}.main{padding:24px 18px 60px}}