:root{--bg:#0a0a0f;--bg2:#111118;--bg3:#18181f;--border:#242430;--text:#f0f0f8;--text2:#8888a8;--accent:#0ea5e9;--accent2:#38bdf8;--green:#22c55e;--blue:#6366f1;--orange:#f97316;--yellow:#eab308;--red:#ef4444;--cyan:#06b6d4;--sidebar-w:260px;--panel-w:260px;--header-h:56px}
    html.light{--bg:#f8f9fc;--bg2:#ffffff;--bg3:#f0f2f7;--border:#dde1ea;--text:#0f1117;--text2:#5c6580;--accent:#0284c7;--accent2:#0369a1}
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;overflow-x:hidden}
    body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
    ::-webkit-scrollbar{width:6px;height:6px}
    ::-webkit-scrollbar-track{background:var(--bg2)}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
    header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);background:rgba(10,10,15,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}
    .header-left{display:flex;align-items:center;gap:10px}
    .logo-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:7px;display:flex;align-items:center;justify-content:center}
    .logo-icon svg{width:16px;height:16px;fill:white}
    .logo-text{font-size:15px;font-weight:700;color:var(--text);text-decoration:none}
    .header-version{font-size:11px;padding:2px 8px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;color:var(--text2)}
    .header-right{display:flex;align-items:center;gap:8px}
    .header-nav{display:flex;gap:4px}
    .header-nav a{font-size:13px;color:var(--text2);text-decoration:none;padding:5px 10px;border-radius:6px;transition:all .15s}
    .header-nav a:hover{color:var(--text);background:var(--bg3)}
    .btn-gh{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:13px;font-weight:500;padding:6px 12px;border-radius:7px;transition:all .15s;white-space:nowrap}
    .btn-gh:hover{border-color:var(--accent);color:var(--accent2)}
    .btn-theme{display:none}
    .hamburger{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:6px}
    .layout{display:flex;margin-top:var(--header-h);min-height:calc(100vh - var(--header-h));overflow-x:hidden}
    .sidebar{position:fixed;top:var(--header-h);bottom:0;left:0;width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;padding:20px 0 40px;transition:transform .25s ease;z-index:90}
    .right-panel{position:fixed;top:var(--header-h);bottom:0;right:0;width:var(--panel-w);background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:24px}
    .rp-title{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text2);text-transform:uppercase;margin-bottom:10px;display:block}
    .contributor-grid{display:flex;flex-wrap:wrap;gap:6px}
    .contributor{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;transition:transform .15s}
    .contributor:hover{transform:translateY(-2px)}
    .contributor img{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);transition:border-color .15s}
    .contributor:hover img{border-color:var(--accent)}
    .contributor span{font-size:10px;color:var(--text2);max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
    .sponsor-list{display:flex;flex-direction:column;gap:8px}
    .sponsor-item{display:flex;align-items:center;gap:8px;text-decoration:none;padding:7px 8px;border-radius:7px;border:1px solid var(--border);transition:all .15s;background:var(--bg3)}
    .sponsor-item:hover{border-color:var(--accent);background:rgba(14,165,233,.06)}
    .sponsor-item img{width:28px;height:28px;border-radius:50%;flex-shrink:0}
    .sponsor-item-info{overflow:hidden}
    .sponsor-item-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sponsor-item-role{font-size:11px;color:var(--text2)}
    .sponsor-cta{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent2);text-decoration:none;padding:8px;border:1px dashed rgba(14,165,233,.35);border-radius:7px;transition:all .15s;margin-top:4px}
    .sponsor-cta:hover{background:rgba(14,165,233,.07);border-color:var(--accent)}
    .rp-skeleton{width:36px;height:36px;border-radius:50%;background:var(--bg3);animation:shimmer 1.4s infinite}
    .rp-stat-row{display:flex;align-items:center;justify-content:space-between;text-decoration:none;padding:6px 8px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);transition:border-color .15s}
    .rp-stat-row:hover{border-color:var(--accent)}
    .rp-stat-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
    .rp-commit-box{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:5px}
    .rp-commit-msg{font-size:12px;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
    .rp-commit-meta{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px}
    .rp-commit-sha{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--bg2);border:1px solid var(--border);padding:1px 5px;border-radius:4px;color:var(--accent2);text-decoration:none;flex-shrink:0}
    .rp-commit-sha:hover{border-color:var(--accent)}
    .rp-quicklink{display:flex;align-items:center;gap:8px;text-decoration:none;padding:7px 9px;border-radius:7px;border:1px solid var(--border);background:var(--bg3);transition:all .15s;font-size:12px;color:var(--text2);font-weight:500}
    .rp-quicklink:hover{border-color:var(--accent);color:var(--accent2);background:rgba(14,165,233,.06)}
    .rp-quicklink svg{flex-shrink:0}
    .rp-tech-chips{display:flex;flex-wrap:wrap;gap:5px}
    .rp-chip{font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;border:1px solid;letter-spacing:.03em}
    .chip-kotlin{background:rgba(126,82,193,.15);border-color:rgba(126,82,193,.4);color:#b48ef7}
    .chip-compose{background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.3);color:var(--accent2)}
    .chip-kmp{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.3);color:#fb923c}
    .chip-android{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);color:#4ade80}
    .chip-ios{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.3);color:#93c5fd}
    .chip-web{background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.3);color:#fde047}
    .chip-mit{background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.25);color:#94a3b8}
    @keyframes shimmer{0%,100%{opacity:.4}50%{opacity:1}}

    /* ══════════════════════════════════════════════════════
       PROFESSIONAL ANIMATIONS SYSTEM
    ══════════════════════════════════════════════════════ */

    /* ── Keyframes ─────────────────────────────────────── */
    @keyframes fadeUp{
      from{opacity:0;transform:translateY(24px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes fadeIn{
      from{opacity:0}
      to{opacity:1}
    }
    @keyframes fadeLeft{
      from{opacity:0;transform:translateX(-24px)}
      to{opacity:1;transform:translateX(0)}
    }
    @keyframes fadeRight{
      from{opacity:0;transform:translateX(24px)}
      to{opacity:1;transform:translateX(0)}
    }
    @keyframes scaleIn{
      from{opacity:0;transform:scale(.92)}
      to{opacity:1;transform:scale(1)}
    }
    @keyframes slideDown{
      from{opacity:0;transform:translateY(-16px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes pulseGlow{
      0%,100%{box-shadow:0 0 0 0 rgba(14,165,233,.0)}
      50%{box-shadow:0 0 0 6px rgba(14,165,233,.15)}
    }
    @keyframes borderPulse{
      0%,100%{border-color:rgba(14,165,233,.3)}
      50%{border-color:rgba(14,165,233,.7)}
    }
    @keyframes gradientShift{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    @keyframes float{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-6px)}
    }
    @keyframes typewriter{
      from{width:0}
      to{width:100%}
    }
    @keyframes progressFill{
      from{width:0%}
      to{width:var(--target-w,100%)}
    }
    @keyframes ripple{
      to{transform:scale(4);opacity:0}
    }
    @keyframes countUp{
      from{opacity:0;transform:translateY(8px) scale(.9)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }

    /* ── Scroll-reveal base ────────────────────────────── */
    /* JS añade .is-visible cuando el elemento entra en viewport */
    .reveal{
      opacity:0;
      transform:translateY(28px);
      transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
    }
    .reveal.from-left{transform:translateX(-28px)}
    .reveal.from-right{transform:translateX(28px)}
    .reveal.scale{transform:scale(.93)}
    .reveal.is-visible{
      opacity:1 !important;
      transform:none !important;
    }
    /* Stagger delay helpers */
    .reveal.delay-1{transition-delay:.08s}
    .reveal.delay-2{transition-delay:.16s}
    .reveal.delay-3{transition-delay:.24s}
    .reveal.delay-4{transition-delay:.32s}
    .reveal.delay-5{transition-delay:.40s}

    /* ── Page load: header slides in ───────────────────── */
    header{animation:slideDown .45s cubic-bezier(.16,1,.3,1) both}

    /* ── Hero section entrance ──────────────────────────── */
    .hero-badge{animation:fadeUp .5s .1s cubic-bezier(.16,1,.3,1) both}
    .version-pill{animation:fadeUp .5s .15s cubic-bezier(.16,1,.3,1) both}
    h1{animation:fadeUp .55s .2s cubic-bezier(.16,1,.3,1) both}
    .hero-subtitle{animation:fadeUp .55s .28s cubic-bezier(.16,1,.3,1) both}
    .hero-actions{animation:fadeUp .55s .36s cubic-bezier(.16,1,.3,1) both}
    .platform-grid{animation:fadeUp .55s .44s cubic-bezier(.16,1,.3,1) both}

    /* ── Sidebar entrance ───────────────────────────────── */
    .sidebar-section{animation:fadeLeft .4s cubic-bezier(.16,1,.3,1) both}
    .sidebar-section:nth-child(1){animation-delay:.05s}
    .sidebar-section:nth-child(2){animation-delay:.1s}
    .sidebar-section:nth-child(3){animation-delay:.15s}
    .sidebar-section:nth-child(4){animation-delay:.2s}
    .sidebar-section:nth-child(5){animation-delay:.25s}

    /* ── Cards hover effect (profesional lift + glow) ───── */
    .card{
      transition:border-color .25s, transform .25s cubic-bezier(.16,1,.3,1),
                 box-shadow .25s;
      will-change:transform;
    }
    .card:hover{
      border-color:rgba(14,165,233,.5) !important;
      transform:translateY(-4px) scale(1.01);
      box-shadow:0 12px 40px rgba(14,165,233,.12), 0 2px 8px rgba(0,0,0,.3);
    }

    /* ── Code blocks: subtle entrance on hover ──────────── */
    .code-block{
      transition:border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.16,1,.3,1);
    }
    .code-block:hover{
      border-color:rgba(14,165,233,.3);
      box-shadow:0 8px 32px rgba(0,0,0,.25);
      transform:translateY(-2px);
    }

    /* ── Copy button ripple feedback ────────────────────── */
    .copy-btn{position:relative;overflow:hidden}
    .copy-btn .ripple-wave{
      position:absolute;
      border-radius:50%;
      width:20px;height:20px;
      background:rgba(14,165,233,.35);
      transform:scale(0);
      animation:ripple .5s linear;
      pointer-events:none;
      margin-top:-10px;margin-left:-10px;
    }

    /* ── Buttons ─────────────────────────────────────────── */
    .btn-primary{
      transition:background .2s, color .2s, transform .2s cubic-bezier(.16,1,.3,1),
                 box-shadow .2s;
      position:relative;overflow:hidden;
    }
    .btn-primary::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);
      transform:translateX(-100%);
      transition:transform .5s;
    }
    .btn-primary:hover::after{transform:translateX(100%)}
    .btn-primary:active{transform:scale(.97) !important}

    .btn-secondary{
      transition:border-color .2s, color .2s, transform .2s cubic-bezier(.16,1,.3,1),
                 box-shadow .2s;
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      box-shadow:0 4px 16px rgba(14,165,233,.15);
    }
    .btn-secondary:active{transform:scale(.97)}

    /* ── Platform badges bounce on hover ───────────────── */
    .platform-badge{
      transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s,
                 background .2s, border-color .2s;
      cursor:default;
    }
    .platform-badge:hover{transform:translateY(-3px) scale(1.06)}

    /* ── Sidebar link active indicator slide ────────────── */
    .sidebar-link{
      position:relative;
      transition:background .15s, color .15s, padding-left .2s;
    }
    .sidebar-link.active{padding-left:14px}
    .sidebar-link.active::before{
      content:'';position:absolute;left:0;top:50%;
      transform:translateY(-50%);
      width:3px;height:60%;
      background:var(--accent);
      border-radius:0 2px 2px 0;
      animation:fadeIn .2s ease;
    }

    /* ── Tab switching animation ────────────────────────── */
    .tab-panel.active{animation:fadeUp .25s cubic-bezier(.16,1,.3,1) both}

    /* ── Callouts pop in ────────────────────────────────── */
    .callout{transition:border-color .2s, box-shadow .2s, transform .2s}
    .callout:hover{
      box-shadow:0 4px 20px rgba(0,0,0,.15);
      transform:translateX(4px);
    }

    /* ── Search modal: scale + fade ─────────────────────── */
    #search-overlay.open #search-modal{
      animation:scaleIn .25s cubic-bezier(.16,1,.3,1) both;
    }

    /* ── Toast bounce in ────────────────────────────────── */
    #toast.show{
      animation:fadeUp .3s cubic-bezier(.34,1.56,.64,1) both;
    }

    /* ── New API banner: animated gradient border ───────── */
    .new-api-banner{
      animation:borderPulse 3s ease-in-out infinite;
    }

    /* ── Logo icon float on hover ───────────────────────── */
    .logo-icon{
      transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    }
    .logo-icon:hover{
      transform:rotate(-8deg) scale(1.15);
      box-shadow:0 4px 20px rgba(14,165,233,.4);
    }

    /* ── Contributor avatar: pop on hover ───────────────── */
    .contributor img{
      transition:border-color .2s, transform .25s cubic-bezier(.34,1.56,.64,1),
                 box-shadow .2s;
    }
    .contributor:hover img{
      border-color:var(--accent);
      transform:scale(1.15);
      box-shadow:0 4px 12px rgba(14,165,233,.35);
    }

    /* ── Changelog entry line animation ─────────────────── */
    .changelog-entry{
      transition:border-left-color .3s, padding-left .3s;
    }
    .changelog-entry:hover{
      border-left-color:var(--accent2);
      padding-left:26px;
    }

    /* ── Table rows hover slide ──────────────────────────── */
    .doc-table tr{transition:background .15s, transform .15s}
    .doc-table tbody tr:hover td{
      background:rgba(14,165,233,.05);
    }

    /* ── Version pill shimmer ────────────────────────────── */
    .version-pill{
      background-size:200% 200%;
    }
    .version-pill:hover{
      animation:gradientShift 1.5s ease infinite;
      background:linear-gradient(120deg,
        rgba(14,165,233,.14) 0%,
        rgba(99,102,241,.1) 50%,
        rgba(14,165,233,.14) 100%);
      background-size:200% 200%;
    }

    /* ── Reading progress glow ───────────────────────────── */
    #read-progress{
      box-shadow:0 0 8px rgba(14,165,233,.6), 0 0 20px rgba(14,165,233,.3);
    }

    /* ── Back to top button pulse ────────────────────────── */
    #back-top.visible{
      animation:pulseGlow 2.5s ease-in-out infinite;
    }
    #back-top:hover{
      transform:translateY(-4px) scale(1.1) !important;
      box-shadow:0 8px 24px rgba(14,165,233,.5);
    }

    /* ── Reduce motion: respeta preferencias del usuario ── */
    @media(prefers-reduced-motion:reduce){
      *, *::before, *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
      }
      .reveal{opacity:1;transform:none}
    }
    .sidebar-section{padding:0 12px 16px}
    .sidebar-label{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--text2);text-transform:uppercase;padding:4px 8px 8px;display:block}
    .sidebar-link{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);text-decoration:none;padding:6px 8px;border-radius:6px;transition:all .15s;cursor:pointer}
    .sidebar-link:hover{background:var(--bg3);color:var(--text)}
    .sidebar-link.active{background:rgba(14,165,233,.12);color:var(--accent2)}
    .sidebar-link .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
    .content{margin-left:var(--sidebar-w);margin-right:var(--panel-w);flex:1;padding:48px 48px 80px;min-width:0;overflow-x:hidden}
    .content-inner{max-width:900px;margin:0 auto;width:100%}
    .section{margin-bottom:64px;scroll-margin-top:80px}
    h1{font-size:2rem;font-weight:700;line-height:1.2;margin-bottom:12px;color:#fff}
    h2{font-size:1.4rem;font-weight:700;margin-bottom:12px;color:#fff}
    h3{font-size:1.05rem;font-weight:600;margin-bottom:10px;color:var(--text)}
    p{color:var(--text2);margin-bottom:16px}
    p a{color:var(--accent2);text-decoration:none}
    p a:hover{text-decoration:underline}
    .divider{border:none;border-top:1px solid var(--border);margin:48px 0}
    .hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.25);color:var(--accent2);font-size:12px;font-weight:500;padding:4px 10px;border-radius:20px;margin-bottom:16px}
    .hero-subtitle{font-size:1.05rem;color:var(--text2);margin-bottom:24px;max-width:560px}
    .hero-author{font-size:12px;color:var(--text2);margin-bottom:12px;opacity:.85;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .hero-author a{color:var(--accent2);text-decoration:none;font-weight:600}
    .hero-author a:hover{text-decoration:underline}
    .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
    .btn-primary{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;padding:9px 18px;border-radius:8px;text-decoration:none;transition:all .15s;letter-spacing:-.01em}
    .btn-primary:hover{background:var(--accent2);color:#000;transform:translateY(-1px);box-shadow:0 4px 20px rgba(14,165,233,.3)}
    .btn-secondary{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:500;padding:9px 18px;border-radius:8px;text-decoration:none;transition:all .15s}
    .btn-secondary:hover{border-color:var(--accent);color:var(--accent2)}
    .platform-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
    .platform-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:4px 10px;border-radius:6px;border:1px solid}
    .badge-android{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#4ade80}
    .badge-ios{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);color:#60a5fa}
    .badge-desktop{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.3);color:#fb923c}
    .badge-web{background:rgba(234,179,8,.1);border-color:rgba(234,179,8,.3);color:#facc15}
    .badge-wasm{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.3);color:var(--accent2)}
    .code-block{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:20px}
    .code-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg3);border-bottom:1px solid var(--border);font-size:12px;color:var(--text2)}
    .code-lang{display:flex;align-items:center;gap:6px}
    .code-lang-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
    .copy-btn{background:none;border:1px solid var(--border);color:var(--text2);font-size:11px;padding:3px 8px;border-radius:5px;cursor:pointer;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif}
    .copy-btn:hover{border-color:var(--accent);color:var(--accent2)}
    pre{padding:20px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.75;color:#cdd6f4}
    .kw{color:#89b4fa}.fn{color:#89dceb}.str{color:#a6e3a1}.num{color:#fab387}.cmt{color:#585b70;font-style:italic}.type{color:#f9e2af}.ann{color:#74c7ec}.bool{color:#f38ba8}
    .tabs{display:flex;gap:2px;margin-bottom:0;border-bottom:1px solid var(--border)}
    .tab{font-size:13px;font-weight:500;padding:8px 14px;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;user-select:none;background:none;border-top:none;border-left:none;border-right:none}
    .tab:hover{color:var(--text)}
    .tab.active{color:var(--accent2);border-bottom-color:var(--accent)}
    .tab-panel{display:none}
    .tab-panel.active{display:block}
    .tabs-wrapper{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:20px}
    .tabs-wrapper .tabs{background:var(--bg3);border-bottom:1px solid var(--border);padding:0 16px}
    .tabs-wrapper pre{background:var(--bg2);border-radius:0}
    .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:20px}
    .card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:20px;transition:border-color .15s}
    .card:hover{border-color:rgba(14,165,233,.35)}
    .card-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:18px}
    .card h3{font-size:14px;margin-bottom:6px}
    .card p{font-size:13px;margin-bottom:0}
    .callout{border-radius:8px;padding:14px 16px;display:flex;gap:12px;margin-bottom:20px;border:1px solid}
    .callout-info{background:rgba(59,130,246,.07);border-color:rgba(59,130,246,.25)}
    .callout-warn{background:rgba(234,179,8,.07);border-color:rgba(234,179,8,.25)}
    .callout-tip{background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.25)}
    .callout-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;margin-top:1px}
    .callout-body{font-size:13.5px;color:var(--text2)}
    .callout-body strong{color:var(--text)}
    .doc-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:13px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .doc-table th{text-align:left;padding:10px 14px;background:var(--bg3);color:var(--text2);font-weight:600;border-bottom:1px solid var(--border)}
    .doc-table td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text2)}
    .doc-table tr:last-child td{border-bottom:none}
    .doc-table tr:hover td{background:rgba(255,255,255,.02)}
    .doc-table code{background:var(--bg3);border:1px solid var(--border);padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent2)}
    .check svg{color:var(--green)}.cross svg{color:var(--red)}
    .install-tabs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
    .two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
    code{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--bg3);border:1px solid var(--border);padding:1px 5px;border-radius:4px;color:var(--accent2)}
    pre code{background:none;border:none;padding:0;font-size:inherit;color:inherit}
    #site-footer{background:var(--bg2);border-top:1px solid var(--border);padding:32px 48px;margin-left:var(--sidebar-w);margin-right:var(--panel-w);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
    .footer-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .footer-brand-inner{display:flex;align-items:center;gap:10px}
    .footer-copy{color:var(--text2);font-size:13px}
    .footer-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
    .footer-links a{color:var(--text2);text-decoration:none;font-size:13px;transition:color .15s}
    .footer-links a:hover{color:var(--accent2)}
    @media(max-width:1280px){
      .right-panel{display:none}
      .content{margin-right:0}
      #site-footer{margin-right:0}
    }
    @media(max-width:900px){
      .sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}
      .content{margin-left:0;margin-right:0;padding:32px 16px 60px;overflow-x:hidden}
      .content-inner{max-width:100%;overflow-x:hidden}
      .hamburger{display:flex}.header-nav{display:none}
      .btn-gh{display:none}
      .install-tabs{grid-template-columns:1fr}
      .two-col-grid{grid-template-columns:1fr}
      .right-panel{
        display:flex;
        position:static;
        width:100%;
        border-left:none;
        border-top:1px solid var(--border);
        padding:24px 16px 32px;
        flex-direction:column;
        gap:20px;
        margin-left:0;
        margin-right:0;
      }
      #site-footer{margin-left:0;margin-right:0;flex-direction:column;align-items:center;text-align:center;padding:24px 20px;gap:16px}
      .footer-brand{justify-content:center}
      .footer-links{gap:12px;justify-content:center}
    }
    @media(max-width:600px){
      h1{font-size:1.5rem}h2{font-size:1.2rem}
      .content{padding:20px 12px 60px}
      .content-inner{max-width:100%;overflow-x:hidden}
      pre{font-size:12px;padding:14px;word-break:break-all}
      .hero-actions{flex-direction:column}
      .hero-actions a{width:100%;justify-content:center;box-sizing:border-box}
      .platform-grid{gap:6px}
      .platform-badge{font-size:11px;padding:3px 8px}
      .cards{grid-template-columns:1fr}
      .code-block{border-radius:8px;max-width:100%;overflow:hidden}
      .tabs-wrapper{max-width:100%}
      .tabs-wrapper .tabs{padding:0 8px;overflow-x:auto;flex-wrap:nowrap}
      .tab{font-size:12px;padding:8px 10px;white-space:nowrap}
      .callout{padding:12px}
      .version-pill{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
      .changelog-entry{padding-left:14px}
      .doc-table{font-size:12px}
      .hero-subtitle{font-size:0.95rem}
      #site-footer{padding:20px 16px}
      .footer-brand{flex-direction:column;align-items:center;gap:8px}
      .footer-links{gap:10px;justify-content:center}
      .footer-links a{font-size:12px}
    }
    html.light header{background:rgba(248,249,252,.95)}
    html.light pre{color:#24292e}
    html.light .kw{color:#0550ae}.light .fn{color:#0070b8}.light .str{color:#116329}.light .num{color:#953800}.light .cmt{color:#6e7781;font-style:italic}.light .type{color:#953800}.light .ann{color:#0550ae}.light .bool{color:#cf222e}
    .overlay{display:none;position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.5)}
    .overlay.open{display:block}

    /* ── Reading progress bar ── */
    #read-progress{position:fixed;top:0;left:0;z-index:200;height:2px;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .1s linear;pointer-events:none}

    /* ── Back to top ── */
    #back-top{position:fixed;bottom:32px;right:32px;z-index:150;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(14,165,233,.35);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;pointer-events:none}
    #back-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
    #back-top:hover{background:var(--accent2);transform:translateY(-2px)}
    @media(max-width:1280px){#back-top{right:16px;bottom:20px}}

    /* ── Toast ── */
    #toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(12px);z-index:300;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:13px;padding:9px 18px;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
    #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

    /* ── Search modal ── */
    #search-overlay{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding-top:80px}
    #search-overlay.open{display:flex}
    #search-modal{background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:100%;max-width:560px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5)}
    #search-input{width:100%;padding:16px 20px;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font-size:15px;font-family:'Plus Jakarta Sans',sans-serif;outline:none}
    #search-input::placeholder{color:var(--text2)}
    #search-results{max-height:360px;overflow-y:auto;padding:8px}
    .search-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text);transition:background .12s;cursor:pointer}
    .search-item:hover,.search-item.focused{background:var(--bg3)}
    .search-item-icon{width:32px;height:32px;border-radius:7px;background:rgba(14,165,233,.12);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
    .search-item-info{overflow:hidden}
    .search-item-title{font-size:13px;font-weight:600;color:var(--text)}
    .search-item-desc{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .search-hint{padding:12px 16px;font-size:12px;color:var(--text2);border-top:1px solid var(--border);display:flex;justify-content:space-between}
    kbd{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text2)}

    /* ── Search trigger button ── */
    .btn-search{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:13px;padding:5px 12px;border-radius:7px;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif}
    .btn-search:hover{border-color:var(--accent);color:var(--accent2)}
    .btn-search kbd{font-size:10px}
    @media(max-width:900px){.btn-search span{display:none}.btn-search{padding:6px 8px}}

    /* ── Version badge in hero ── */
    .version-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(14,165,233,.08);border:1px solid rgba(14,165,233,.2);border-radius:20px;padding:5px 12px;font-size:12px;text-decoration:none;transition:all .15s;margin-bottom:20px}
    .version-pill:hover{background:rgba(14,165,233,.14);border-color:rgba(14,165,233,.4)}
    .version-pill-tag{background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;letter-spacing:.04em}
    .version-pill-text{color:var(--text2);font-size:12px}
    .version-pill-arrow{color:var(--accent2)}

    /* ── Changelog entries ── */
    .changelog-entry{border-left:2px solid var(--border);padding-left:20px;margin-bottom:32px;position:relative}
    .changelog-entry::before{content:'';position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--border);border:2px solid var(--bg)}
    .changelog-entry.latest{border-left-color:var(--accent)}
    .changelog-entry.latest::before{background:var(--accent)}
    .changelog-version{display:flex;align-items:center;gap:10px;margin-bottom:8px}
    .changelog-version-num{font-size:14px;font-weight:700;color:var(--text)}
    .changelog-date{font-size:12px;color:var(--text2)}
    .changelog-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.04em}
    .tag-new{background:rgba(34,197,94,.15);color:#4ade80}
    .tag-fix{background:rgba(239,68,68,.15);color:#f87171}
    .tag-break{background:rgba(234,179,8,.15);color:#facc15}
    .changelog-items{list-style:none;display:flex;flex-direction:column;gap:5px}
    .changelog-items li{font-size:13px;color:var(--text2);padding-left:16px;position:relative}
    .changelog-items li::before{content:'·';position:absolute;left:4px;color:var(--accent)}
    .changelog-items li strong{color:var(--text)}

    /* ── Section read-time badge ── */
    .read-time{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);margin-bottom:14px;margin-top:-4px}
    .read-time svg{opacity:.6}

    /* ── "New" label on sidebar items ── */
    .badge-new{font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;background:rgba(34,197,94,.15);color:#4ade80;letter-spacing:.03em;margin-left:auto}

    /* ── New API promo banner ── */
    .new-api-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,rgba(14,165,233,.12) 0%,rgba(99,102,241,.1) 50%,rgba(34,211,238,.08) 100%);border:1px solid rgba(14,165,233,.3);border-radius:14px;padding:20px 24px;margin-bottom:32px;position:relative;overflow:hidden}
    .new-api-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 20% 50%,rgba(14,165,233,.06),transparent);pointer-events:none}
    .new-api-banner-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
    .new-api-banner-icon{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,rgba(14,165,233,.25),rgba(99,102,241,.2));display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(14,165,233,.25)}
    .new-api-banner-text{min-width:0}
    .new-api-banner-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;flex-wrap:wrap}
    .new-api-banner-title .pill-new{background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.4);color:#4ade80;font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.05em}
    .new-api-banner-desc{font-size:13px;color:var(--text2);line-height:1.5}
    .new-api-banner-desc strong{color:var(--accent2)}
    .new-api-banner-action{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:9px 18px;border-radius:8px;text-decoration:none;transition:all .15s;white-space:nowrap;flex-shrink:0}
    .new-api-banner-action:hover{background:var(--accent2);color:#000;transform:translateY(-1px);box-shadow:0 4px 20px rgba(14,165,233,.35)}