:root { color-scheme: dark; --bg:#090d10; --panel:#11171c; --ink:#eff3f5; --muted:#a8b3bc; --border:#2b343c; --gold:#d6a247; --blue:#4da3ff; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:var(--gold); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.site-header,main,footer { width:min(1120px,100% - 48px); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; letter-spacing:.04em; text-decoration:none; }
.brand img { width:32px; height:32px; }
.brand::before { content:""; display:block; width:32px; height:32px; flex:none; background:url('/favicon.svg') center/contain no-repeat; }
nav,footer { display:flex; gap:24px; flex-wrap:wrap; font-size:14px; }
nav a { text-decoration:none; color:var(--muted); padding-block:10px; }
nav [aria-current] { color:var(--ink); }
.page-heading { padding:54px 0 28px; }
.eyebrow { color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.1em; margin:0 0 12px; }
h1 { font-size:clamp(30px,4vw,48px); line-height:1.13; letter-spacing:-.035em; max-width:24ch; margin:0; text-wrap:balance; }
h2 { font-size:22px; line-height:1.3; margin:0 0 18px; letter-spacing:-.02em; }
h3 { font-size:18px; line-height:1.35; margin:0 0 12px; }
.subtitle { color:var(--muted); font-size:17px; margin:16px 0 0; }
.section > p,details li { max-width:72ch; }
.verdicts { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.verdict { border-top:3px solid var(--muted); padding:22px 24px; background:var(--panel); min-width:0; }
.verdict[data-winner-lane="apex"] { border-color:var(--gold); }
.verdict[data-winner-lane="vortex"] { border-color:var(--blue); }
.verdict h2 { color:var(--muted); font-size:14px; margin:0 0 10px; }
.verdict strong { display:block; font-size:clamp(21px,2.4vw,28px); line-height:1.25; overflow-wrap:anywhere; }
.verdict p { margin:12px 0 0; font-variant-numeric:tabular-nums; font-size:20px; }
.verdict p span { font-size:14px; color:var(--muted); }
.actions { display:flex; align-items:center; gap:24px; margin:24px 0 20px; }
.primary,button { border:0; border-radius:6px; background:var(--gold); color:#11171c; font:inherit; font-size:15px; font-weight:700; padding:12px 18px; text-decoration:none; cursor:pointer; }
.primary:hover,button:hover { background:#edbb60; color:#11171c; }
.disclaimer,.version { color:var(--muted); font-size:14px; margin:18px 0; max-width:90ch; }
.table-wrap { border:1px solid var(--border); margin-top:26px; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:15px; table-layout:fixed; }
th,td { padding:15px 18px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
thead th { background:var(--panel); font-size:17px; line-height:1.35; }
thead th:first-child { width:25%; }
thead th:nth-child(2) { border-top:2px solid var(--gold); }
thead th:nth-child(3) { border-top:2px solid var(--blue); }
tbody th { color:var(--muted); font-weight:500; }
td { font-variant-numeric:tabular-nums; }
tr:last-child th,tr:last-child td { border-bottom:0; }
.section { padding-top:34px; margin-top:30px; border-top:1px solid var(--border); }
.sources { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.source { min-width:0; }
.source p,.source dd { color:var(--muted); font-size:14px; }
dl { margin:20px 0; }
dt { font-size:13px; font-weight:600; margin-top:15px; }
dd { margin:5px 0 0; overflow-wrap:anywhere; }
.permalink { overflow-wrap:anywhere; font-size:14px; }
.version { font-family:ui-monospace,monospace; font-size:12px; overflow-wrap:anywhere; }
details { margin:24px 0; color:var(--muted); font-size:14px; }
summary { cursor:pointer; color:var(--ink); padding:10px 0; }
li { margin-block:8px; }
.compare-form { display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:end; padding:24px; background:var(--panel); border:1px solid var(--border); }
label { display:grid; gap:8px; font-size:14px; min-width:0; }
select,input { width:100%; min-width:0; font:inherit; font-size:16px; background:var(--bg); color:var(--ink); border:1px solid #54616d; border-radius:4px; padding:11px 12px; height:48px; }
.compare-form button { min-height:48px; }
.search-form { display:flex; gap:12px; max-width:700px; }
.search-form input { flex:1; }
.result-list,.featured { list-style:none; padding:0; margin:20px 0; }
.result-list li,.featured li { margin:0; border-bottom:1px solid var(--border); }
.result-list a,.featured a { display:block; padding:17px 0; text-decoration:none; }
.result-list strong { display:block; font-size:17px; }
.result-list span { display:block; color:var(--muted); font-size:14px; margin-top:4px; }
.featured a { font-size:18px; }
.featured span { color:var(--muted); font-size:14px; padding:0 6px; }
pre { background:var(--panel); border:1px solid var(--border); padding:18px; overflow-x:auto; font-size:14px; line-height:1.8; }
.split-note { border-left:3px solid var(--gold); padding-left:16px; }
footer { color:var(--muted); border-top:1px solid var(--border); margin-top:54px; padding:26px 0 40px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:680px) {
  .site-header,main,footer { width:calc(100% - 32px); }
  .site-header { gap:12px; min-height:68px; }
  .brand { font-size:16px; }
  nav { gap:14px; font-size:13px; }
  .page-heading { padding-top:34px; }
  .verdicts,.sources,.compare-form { grid-template-columns:1fr; }
  .verdict { padding:18px; }
  .verdict p span { display:block; margin-top:3px; }
  .compare-form { padding:18px; }
  .actions { gap:18px; font-size:14px; flex-wrap:wrap; }
  th,td { padding:12px 10px; font-size:14px; }
  thead th { font-size:14px; }
  thead th:first-child { width:27%; }
  .featured a { font-size:16px; }
  footer { gap:18px; }
}