:root{--bg:#ffffff;--ink:#000000;--accent:#2563eb;--muted:#6b7280;--border:rgba(0,0,0,0.05);--surface:#fafafa;--sans:"Plus Jakarta Sans",sans-serif;--mono:"JetBrains Mono",monospace}
[data-theme=dark]{--bg:#050505;--ink:#ffffff;--accent:#d9ff00;--muted:#9ca3af;--border:rgba(255,255,255,0.06);--surface:#0f0f0f}

*{margin:0;padding:0;box-sizing:border-box}
html{overflow-y:scroll;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans)}

.container{max-width:1200px;margin:0 auto;padding:0 40px}

/* ── Sidebar ── */
.docs-nav-sidebar{position:fixed;top:0;left:0;width:300px;height:100vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:40px 20px 24px;border-right:1px solid var(--border);background:var(--bg);z-index:100}
.docs-nav-sidebar .logo-row{width:100%;padding-bottom:20px;border-bottom:1px solid var(--border);display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;text-decoration:none;color:var(--ink)}
.logo img{height:40px;width:auto;filter:brightness(0)}
[data-theme=dark] .logo img{filter:brightness(0) invert(1)}
.logo .logo-full span,.logo span{opacity:.55}
.docs-nav-sidebar .nav-links{padding-top:32px;display:flex;flex-direction:column;width:100%;gap:4px;list-style:none}
.docs-nav-sidebar .nav-links a{display:block;padding:10px 14px;border-radius:10px;width:100%;color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600;transition:background .2s,color .2s}
.docs-nav-sidebar .nav-links a:hover{background:var(--accent);color:#fff}
[data-theme="dark"] .docs-nav-sidebar .nav-links a:hover{color:#000}
.docs-nav-sidebar .nav-links a.active{background:#000;color:#d9ff00;font-weight:700}
[data-theme=dark] .docs-nav-sidebar .nav-links a.active{background:#fff;color:#2563eb}
.docs-sidebar-footer{margin-top:auto;padding-top:20px;border-top:1px solid var(--border);font-size:.6rem;color:var(--muted);font-family:var(--mono);line-height:1.6;width:100%}
.docs-sidebar-links{display:flex;gap:12px;margin-top:6px}
.docs-sidebar-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.6rem}
.docs-sidebar-links a:hover{color:var(--accent)}
.nav-icon-btn:hover{color:var(--accent)!important}
.mobile-only{display:none}
body .container{padding-left:340px}

/* ── Content ── */
.docs-content{max-width:860px;padding:0 0 80px}
.docs-section{display:none;margin-bottom:32px}
.docs-section.active{display:block}
.docs-section h2{font-size:3.2rem;font-weight:800;letter-spacing:-.04em;margin:64px 0 20px;color:var(--ink)}
.docs-section h2 .sec-num{font-size:3.2rem;color:var(--accent);display:inline;margin-right:16px}

.docs-section h3{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:36px 0 8px}
.docs-section h3:first-child{margin-top:0}
.sec-nav{display:flex;justify-content:space-between;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);gap:8px}
.sec-nav a{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#fff;text-decoration:none;padding:8px 20px;background:#000;border:1px solid #000;border-radius:10px;transition:background .2s,color .2s}
.sec-nav a:hover{background:#fff;color:#000}
[data-theme=dark] .sec-nav a{background:#fff;color:#000;border-color:#fff}
[data-theme=dark] .sec-nav a:hover{background:#000;color:#fff}
[data-theme=dark] .sec-nav a{background:#fff;color:#000}
.sec-nav a:hover{color:var(--ink);border-color:var(--ink)}
.sec-nav .spacer{flex:1}
.docs-section p{font-size:.95rem;line-height:1.7;color:var(--muted);margin-bottom:10px}
.docs-section p strong{color:var(--ink)}
.docs-section code:not(pre code){font-family:var(--mono);font-size:.85rem;background:#d4d4d4;padding:2px 8px;border-radius:6px;color:var(--ink)}
[data-theme=dark] .docs-section code:not(pre code){background:#333333}
.docs-section pre{margin:12px 0 28px}
.docs-section pre code{display:block;padding:20px;border-radius:12px;border:1px solid var(--border);line-height:1.6;overflow-x:auto;background:var(--surface);font-size:.85rem;font-family:var(--mono);white-space:pre}
.blog-copy-btn{position:absolute;top:8px;right:8px;padding:4px 10px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-family:var(--mono);opacity:1;z-index:1;transition:color .2s}
.blog-copy-btn:hover{color:var(--ink);border-color:var(--ink)}
pre{position:relative}
.blog-highlight{background:linear-gradient(120deg,transparent 0,#86efac 10%,#86efac 90%,transparent 100%);padding:0 6px;border-radius:4px;color:#000}
[data-theme=dark] .blog-highlight{background:linear-gradient(120deg,transparent 0,#38bdf8 3%,#38bdf8 97%,transparent 100%)}
.blog-divider{border:none;border-top:1px solid var(--border);margin:24px 0}
.blog-table{overflow-x:auto;margin:16px 0;border:1px solid var(--border);border-radius:12px}
.blog-table table{width:100%;border-collapse:collapse;font-size:.85rem}
.blog-table th{text-align:left;padding:10px 14px;font-weight:800;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bg);background:var(--ink);font-family:var(--mono)}
[data-theme=dark] .blog-table th{background:#fff;color:#000}
.blog-table td{padding:10px 14px;color:var(--muted);border-bottom:1px solid var(--border);line-height:1.5}
.blog-table tr:last-child td{border-bottom:none}
.blog-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.demo-img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block;border-radius:12px;border:1px solid var(--border)}
.demo-label{position:absolute;top:8px;right:8px;z-index:5;font-size:.6rem;color:rgba(255,255,255,.85);font-family:var(--mono);background:rgba(0,0,0,.6);padding:3px 8px;border-radius:4px;line-height:1.4;white-space:nowrap}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0;overflow:hidden}
.gallery-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:8px}
.masonry-grid{columns:3;gap:8px;margin:16px 0}
.masonry-grid img{width:100%;display:block;margin-bottom:8px;border-radius:8px}
.btn-sample{display:inline-block;font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:12px 28px;border-radius:12px;text-decoration:none;cursor:pointer;transition:background .2s;margin:4px}

/* ── Footer ── */
.docs-page-footer{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px solid var(--border);margin-top:48px;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.docs-page-footer a{color:inherit;text-decoration:underline}
.footer-links{display:flex;gap:12px}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:var(--ink)}

@media(max-width:800px){
.docs-nav-sidebar{width:100%;height:auto;position:relative;border-right:none;padding:16px 20px}
.docs-nav-sidebar .nav-links{display:none}
.docs-sidebar-footer{display:none}
.mobile-only{display:flex!important;position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);cursor:pointer;padding:8px}
body .container{padding-left:20px}
.hero h1{font-size:2rem}
}