:root{
  --brand:#0ea5e9;
  --brand2:#7c3aed;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --panel:#f8fafc;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e5e7eb; --muted:#94a3b8; --bg:#0b1020; --panel:#111827; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; color:var(--ink); background:var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, 'Noto Sans Thai', Arial, sans-serif; }
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.nav{ background:linear-gradient(90deg, var(--panel), transparent); border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:20; }
.nav .inner{display:flex; gap:16px; align-items:center; padding:10px 0}
.nav .spacer{flex:1}
.nav a.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink)}
.brand img{height:28px}
.nav ul{display:flex; list-style:none; gap:14px; padding:0; margin:0}
.hero{ background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(124,58,237,.06)); padding:56px 0 36px; border-bottom:1px solid rgba(0,0,0,.06); }
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr} }
.card{ background:var(--panel); border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px; }
.footer{ border-top:1px solid rgba(0,0,0,.08); color:var(--muted); padding:22px 0; margin-top:36px; }
.btn{display:inline-block; padding:10px 16px; border-radius:10px; border:1px solid rgba(0,0,0,.15)}
.btn.primary{ background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; border:0 }
.btn.ghost{ background:transparent }
.badge{background:rgba(14,165,233,.15); color:#0369a1; padding:3px 8px; border-radius:999px; font-size:12px}
.bpl{border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,.06)}
code,pre{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
pre{background:var(--panel); border:1px solid rgba(0,0,0,.06); padding:12px; border-radius:10px; overflow:auto}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.1); text-align:left}
.small{color:var(--muted); font-size:14px}


.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns: 1.3fr 1fr; align-items:start}
@media (max-width: 1000px){ .grid.cols-2{grid-template-columns:1fr} }
.hero-split .right{ position: sticky; top: 84px; }
@media (max-width: 1000px){ .hero-split .right{ position: static; } }
.bpl .bpl-quality button {
  flex: 1 1 auto;
  min-width: 60px;
  max-width: 100px;
}

/* downloads badge */
.badge{display:inline-block;padding:.2rem .5rem;border-radius:9999px;border:1px solid #e5e7eb;font-size:.75rem}