:root{
  --bg: #0b0c10;
  --fg: #e6e8ea;
  --muted: #b8c0cc;
  --brand: #4cc9f0;
  --accent: #f7b801;
  --card: #0e1118; /* darker */
  --border: #1a1f2e; /* darker */
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --fg:#17181c; --muted:#4a5568; --card:#f7f8fa; --border:#e3e8ef; }
}
*{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6; }
.container{ width:100%; max-width: 1100px; margin:0 auto; padding: 0 16px; }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:fixed; left:16px; top:16px; width:auto; height:auto; background:#000; color:#fff; padding:8px 12px; z-index:1000; }

/* Header */
.site-header{ position:sticky; top:0; z-index: 50; background: var(--card); border-bottom:1px solid var(--border); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.logo{ color:var(--fg); text-decoration:none; font-weight:700; letter-spacing:.2px; display:inline-flex; align-items:center; gap:8px; }
.logo img{ height:28px; width:auto; display:block; }
.top-nav ul{ display:flex; gap:16px; list-style:none; margin:0; padding:0; }
.top-nav a{ color:var(--fg); text-decoration:none; padding:6px 8px; border-radius:6px; }
.top-nav a:focus, .top-nav a:hover{ outline:2px solid var(--brand); outline-offset:2px; }

/* Hero */
#hero{ padding: 32px 0; background: linear-gradient(180deg, rgba(76,201,240,.08), transparent 60%); }
.hero__inner{ display:grid; grid-template-columns: 1fr; gap:20px; align-items:center; }
@media(min-width:820px){ .hero__inner{ grid-template-columns: 1.2fr .8fr; } }
.lead{ color:var(--muted); margin-top:8px; }
.meta{ color:var(--muted); font-size:.95rem; }
.btn{ display:inline-block; background:var(--brand); color:#001018; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600; }
.btn--ghost{ background:transparent; color:var(--brand); border:1px solid var(--brand); }
.hero__media img{ width:100%; height:auto; aspect-ratio: 16 / 9; border-radius:12px; border:1px solid var(--border); object-fit:cover; }

/* Table */
.table-responsive{ overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:12px; }
.sites-table{ width:100%; border-collapse:collapse; }
.sites-table th, .sites-table td{ padding:14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.sites-table thead th{ text-align:left; font-size:.95rem; color:var(--muted); }
.sites-table tbody tr:hover{ background: rgba(76,201,240,.06); }
.logo-svg{ fill:var(--brand); }
.logo-svg.alt{ fill:#9b5de5; }
.logo-svg.tri{ fill:#f15bb5; }
.rate-value{ margin-left:6px; color:var(--muted); font-size:.9rem; }
.btn--table{ padding:8px 12px; border-radius:8px; }
.note{ font-size:.9rem; color:var(--muted); margin: 10px 4px 0; }

/* Bigger logos in table */
.sites-table td img{ width:56px; height:56px; object-fit:contain; display:block; }

/* Responsive table -> cards */
@media(max-width:720px){
  .sites-table thead{ display:none; }
  .sites-table, .sites-table tbody, .sites-table tr, .sites-table td{ display:block; width:100%; }
  .sites-table tr{ border-bottom:1px solid var(--border); }
  .sites-table td{ display:flex; justify-content:space-between; gap:16px; }
  .sites-table td::before{ content: attr(data-label); color:var(--muted); }
}

/* ToC */
.toc{ padding:24px 0; }
.toc nav ol{ list-style:decimal; padding-left:18px; }
.toc a{ color:var(--fg); text-decoration:none; }
.toc a.active{ color:var(--brand); font-weight:600; }

/* Article */
.article section{ padding: 28px 0; border-top:1px solid var(--border); }
.article h2{ scroll-margin-top: 80px; }
.article figure{ margin: 12px 0; }
.article img{ width:100%; height:auto; border-radius:10px; border:1px solid var(--border); }
.content{ max-width: none; width: 100%; }

/* Author */
.author{ background: var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.author__inner{ display:flex; gap:16px; align-items:center; padding:16px 0; }
.author__avatar{ width:64px; height:64px; border-radius:50%; border:2px solid var(--border); flex: 0 0 64px; object-fit: cover; object-position: center; background: var(--card); }
.author__meta p{ margin:.25rem 0; }

/* FAQ */
.faq details{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:10px 0; }
.faq summary{ cursor:pointer; font-weight:600; }
.faq summary:focus{ outline:2px solid var(--brand); outline-offset:4px; }

/* Footer */
.site-footer{ margin-top: 24px; padding: 24px 0; background: var(--card); border-top:1px solid var(--border); }
.footer__links{ list-style:none; display:flex; gap:16px; padding:0; margin:0 0 8px; flex-wrap:wrap; }
.footer__links a{ color:var(--fg); text-decoration:none; }
.footer__links a:focus, .footer__links a:hover{ outline:2px solid var(--brand); outline-offset:2px; }
.legal{ color:var(--muted); font-size:.9rem; }

/* Back to top */
.back-to-top{ position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--brand); color:#001018; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,.2); }
.back-to-top:focus{ outline:2px solid #fff; outline-offset:2px; }
.back-to-top.hidden{ opacity:0; pointer-events:none; transform: translateY(8px); transition:.2s; }

/* Utilities */
.visually-hidden{ position:absolute !important; clip:rect(1px,1px,1px,1px); padding:0 !important; border:0 !important; height:1px !important; width:1px !important; overflow:hidden; }



/* Explicit heading sizes to avoid UA defaults (fix deprecation warnings) */
h1{ font-size: 2rem; }
h2{ font-size: 1.6rem; }
h3{ font-size: 1.3rem; }
h4{ font-size: 1.1rem; }
h5{ font-size: 1rem; }
h6{ font-size: .9rem; }