/* ============ Base ============ */
:root{
    --bg: #ffffff;
    --bg-soft:#f8f9fa;
    --text:#0f172a;
    --muted:#475569;
    --border:#e5e7eb;
    --accent:#2563eb;     /* blue */
    --accent-2:#0d47a1;   /* dark blue */
    --code-bg:#e3f2fd;    /* blue tint */
    --shadow: 0 8px 24px rgba(15,23,42,.08);
  
    --topbar-h: 56px;
    --sidebar-w: 280px;
    --content-w: 920px;
  
    --r: 14px;
    --p: 16px;
    --p-lg: 22px;
    --fs: 16px;
  
    --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Cascadia Code", "Liberation Mono", monospace;
  }
  
  *{box-sizing:border-box}
  html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    overflow-x:hidden;
    width:100%;
  }
  html,body{height:100%;margin:0;padding:0}
  body{
    font: var(--fs)/1.6 var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    width:100%;
    max-width:100vw;
  }
  
  ::selection{background:#bbdefb;color:#000}
  
  a{color:var(--accent);text-decoration:none;overflow-wrap:anywhere;word-break:break-word}
  a:hover{text-decoration:underline}
  img{max-width:100%;height:auto;display:block}
  p,li,code{overflow-wrap:anywhere;word-break:break-word}
  
  .container{
    display:grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height:100vh;
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
  }
  
  /* ============ Topbar ============ */
  .topbar{
    position:sticky; top:0; z-index:50;
    height:var(--topbar-h);
    background:rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 var(--p-lg);
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
  }
  .topbar .wrap{
    width:100%;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:700; letter-spacing:.2px;
  }
  .menu-toggle{
    display:none;
    flex-direction:column;
    gap:4px;
    padding:8px;
    min-width:44px;
    min-height:44px;
    border:none;
    background:transparent;
    cursor:pointer;
    z-index:51;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-toggle span{
    width:20px;
    height:2px;
    background:var(--text);
    border-radius:2px;
    transition: all .2s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:rotate(45deg) translate(6px, 6px);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:rotate(-45deg) translate(6px, -6px);
  }
  .brand .logo{
    width:32px; height:32px;
    border-radius:8px;
    object-fit:contain;
    flex-shrink:0;
  }
  .lang-tabs{
    display:flex; gap:4px;
  }
  .lang-tabs .tab{
    padding:6px 12px;
    min-height:32px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--muted);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .lang-tabs .tab:hover{
    background:var(--bg-soft);
    color:var(--text);
  }
  .lang-tabs .tab[aria-selected="true"]{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
  }
  .brand .dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
  }
  .topnav{
    display:flex; gap:14px; align-items:center;
    font-size:14px;
  }
  .topnav a{
    color:var(--muted);
    padding:8px 10px;
    border-radius:10px;
    transition: background .15s ease, color .15s ease;
  }
  .topnav a:hover{
    background:var(--bg-soft);
    color:var(--text);
    text-decoration:none;
  }
  
  /* ============ Sidebar ============ */
  .sidebar-overlay{
    display:none;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.4);
    z-index:48;
    opacity:0;
    transition: opacity .3s ease;
  }
  .sidebar-overlay.active{
    display:block;
    opacity:1;
  }
  .sidebar{
    position:sticky; top:var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow:auto;
    border-right:1px solid var(--border);
    background:var(--bg);
    padding:14px 12px;
    transition: transform .3s ease;
  }
  .sidebar .box{
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:12px;
    margin-bottom:12px;
  }
  .sidebar .search{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:none;
    font: 14px/1.2 var(--font);
    background:#fff;
  }
  .sidebar .search:focus{
    border-color: rgba(37,99,235,.45);
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
  }
  .sidebar nav{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .sidebar nav a{
    display:block;
    padding:12px 10px;
    min-height:44px;
    border-radius:12px;
    color:var(--muted);
    transition: background .15s ease, color .15s ease;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(37,99,235,.1);
  }
  .sidebar nav a:hover{
    background:var(--bg-soft);
    color:var(--text);
    text-decoration:none;
  }
  .sidebar nav a.active{
    background:rgba(37,99,235,.10);
    color:var(--accent-2);
    font-weight:600;
  }
  .sidebar nav a.toc-h3{
    padding-left:22px;
    font-size:14px;
  }
  
  /* ============ Content ============ */
  .content{
    padding: 18px var(--p-lg) 64px;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  .doc{
    max-width: var(--content-w);
    margin:0 auto;
  }
  .kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border:1px solid var(--border);
    background:var(--bg-soft);
    border-radius:999px;
    color:var(--muted);
    font-size:13px;
    margin-bottom:24px;
  }
  .card{
    margin-bottom:32px;
    content-visibility:auto;
    contain-intrinsic-size:800px;
  }
  .card:last-child{
    margin-bottom:0;
  }
  .kbd{
    font-family:var(--mono);
    font-size:0.9em;
    padding:2px 6px;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:4px;
    color:var(--accent-2);
    font-weight:500;
  }
  .code-slot{
    margin:20px 0;
    border:1px dashed var(--border);
    border-radius:12px;
    background:var(--bg-soft);
    overflow:hidden;
  }
  .code-slot-title{
    padding:10px 14px;
    background:rgba(37,99,235,.05);
    border-bottom:1px dashed var(--border);
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    font-family:var(--mono);
  }
  .code-slot pre{
    margin:0;
    border-radius:0;
    border:none;
    background:var(--code-bg);
  }
  h1,h2,h3,h4{
    line-height:1.3;
    margin: 24px 0 12px;
    letter-spacing:-.2px;
  }
  h1{font-size:34px}
  h2{font-size:24px; color: var(--accent-2); margin-top:32px; scroll-margin-top: calc(var(--topbar-h) + 16px);}
  h3{font-size:20px; margin-top:24px; scroll-margin-top: calc(var(--topbar-h) + 16px);}
  h4{font-size:18px; margin-top:20px; font-weight:600}
  
  p,li{color:var(--text); line-height:1.7}
  p{margin:12px 0}
  ul,ol{
    margin:12px 0;
    padding-left:24px;
  }
  li{
    margin:6px 0;
    line-height:1.6;
  }
  ul ul, ol ol, ul ol, ol ul{
    margin:4px 0;
  }
  strong{
    font-weight:600;
    color:var(--text);
  }
  em{
    font-style:italic;
    color:var(--text);
  }
  
  hr{
    border:0;
    border-top:1px solid var(--border);
    margin:24px 0;
  }
  
  blockquote{
    margin:14px 0;
    padding:12px 14px;
    border-left:4px solid var(--accent);
    background:var(--bg-soft);
    border-radius:12px;
    color:var(--muted);
  }
  
  code{
    font-family:var(--mono);
    font-size:.95em;
  }
  pre{
    margin:14px 0;
    padding:14px 14px;
    border-radius:14px;
    background:var(--code-bg);
    border:1px solid rgba(33,150,243,.25);
    overflow-x:auto;
    overflow-y:visible;
    max-width:100%;
    box-shadow:none;
    position:relative;
  }
  pre code{display:block}
  pre .copy-btn{
    position:absolute;
    top:10px;
    right:10px;
    padding:8px 12px;
    min-height:36px;
    min-width:60px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition: background .15s ease, transform .12s ease;
    z-index:10;
    font-family:var(--font);
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  pre .copy-btn:hover{
    background:var(--bg-soft);
    transform:translateY(-1px);
  }
  pre .copy-btn:active{
    transform:translateY(0);
  }
  
  /* ============ Buttons / links (optional) ============ */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .btn:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    background: var(--bg-soft);
  }
  
  /* ============ Back to top button ============ */
  .back-to-top{
    position:fixed;
    bottom:24px;
    right:24px;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    border-radius:50%;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    z-index:40;
    transition: opacity .2s ease, transform .2s ease, background .15s ease;
    opacity:0;
    transform:translateY(10px);
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .back-to-top.visible{
    display:flex;
    opacity:1;
    transform:translateY(0);
  }
  .back-to-top:hover{
    background:var(--bg-soft);
    transform:translateY(-2px);
  }
  .back-to-top:active{
    transform:translateY(0);
  }
  .back-to-top svg{
    width:20px;
    height:20px;
  }

  /* ============ Responsive ============ */
  @media (max-width: 980px){
    :root{ --sidebar-w: 0px; }
    .container{grid-template-columns: 1fr;max-width:100vw;overflow-x:hidden}
    .menu-toggle{
      display:flex;
    }
    .sidebar{
      position:fixed;
      top:var(--topbar-h);
      left:0;
      width:280px;
      max-width:85vw;
      height:calc(100vh - var(--topbar-h));
      z-index:49;
      transform:translateX(-100%);
      box-shadow:2px 0 8px rgba(0,0,0,.1);
      -webkit-overflow-scrolling:touch;
    }
    .sidebar.open{
      transform:translateX(0);
    }
    .content{padding: 14px 16px 56px;max-width:100%;overflow-x:hidden}
    .topbar{padding:0 12px;max-width:100vw;overflow-x:hidden}
    h1{font-size:28px}
    h2{font-size:20px; margin-top:24px}
    h3{font-size:18px; margin-top:20px}
    h4{font-size:16px; margin-top:16px}
    p,li{line-height:1.6}
    .card{
      margin-bottom:24px;
    }
    .back-to-top{
      bottom:16px;
      right:16px;
      width:44px;
      height:44px;
      min-width:44px;
      min-height:44px;
    }
    .topbar{
      padding:0 12px;
    }
    .brand h1{
      font-size:16px;
      line-height:1.3;
    }
    ul,ol{
      padding-left:20px;
    }
  }
  
  /* ============ Footer ============ */
  footer{
    border-top:1px solid var(--border);
    background:var(--bg-soft);
    padding:20px var(--p-lg);
  }
  footer .foot{
    max-width:var(--content-w);
    margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
    font-size:13px;
  }
  footer .chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--muted);
  }

  /* ============ Print ============ */
  @media print{
    .topbar,.sidebar,footer{display:none !important}
    .content{padding:0}
    .doc{max-width: 100%}
    a{color:#000;text-decoration:underline}
  }
  .header-row{display:flex;align-items:center;gap:14px}