:root{--bg:#fafaf7;--card:#fff;--tint:#dcecf9;--line:#c9d4df;--ink:#1c2733;--mut:#51606f;--brand:#0b6fbf;--onb:#fff;--shadow:0 12px 32px #12304f33;--code:#e8eef5;font:100%/1.55 "Open Sans","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
@media(prefers-color-scheme:dark){:root{--bg:#151b23;--card:#1e2630;--tint:#243447;--line:#3a4756;--ink:#e8eef5;--mut:#9fb0c0;--brand:#5ab0f2;--onb:#0b1620;--shadow:0 12px 32px #0009;--code:#243447}}
*{box-sizing:border-box}body{margin:0}
header,main,footer{max-width:68rem;margin:auto;padding:1.3rem clamp(1rem,4vw,3rem)}
header,nav,footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
nav{font-size:.93rem;gap:1.4rem}nav a{color:var(--mut);text-decoration:none}nav a:hover{color:var(--ink)}
a{color:var(--brand);text-underline-offset:.22em}a:focus-visible,.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.brand{display:flex;align-items:center;gap:.65rem;font-size:1.35rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}.brand img{width:2.4rem;height:2.4rem;display:block}.brand small{font:inherit;font-weight:400;color:var(--mut)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:clamp(2rem,6vw,4.5rem) 0 2.5rem}
.hero h1{font-size:clamp(2.6rem,5.8vw,4.1rem);line-height:1.03;letter-spacing:-.03em;margin:0 0 1rem}
.hero p{font-size:1.15rem;color:var(--mut);max-width:34rem;margin:0 0 1.6rem}
.buttons{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.btn,.download{display:inline-block;padding:.7rem 1.2rem;border-radius:.4rem;background:var(--brand);color:var(--onb);text-decoration:none;font-weight:600}
.hero small{display:block;margin-top:1.1rem;color:var(--mut);font-size:.87rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.5rem;padding:0;list-style:none}.chips li{margin:0;font-size:.82rem;padding:.15rem .75rem;border-radius:99px;background:var(--tint)}
.win{background:var(--card);border:1px solid var(--line);border-radius:.75rem;box-shadow:var(--shadow);overflow:hidden;font-size:.82rem}
.win .bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-bottom:1px solid var(--line);font-weight:600}
.win .bd{display:flex}.win .sd{width:6.5rem;border-right:1px solid var(--line);padding:.5rem;color:var(--mut)}.win .sd b{display:block;padding:.25rem .5rem;border-radius:.4rem;background:var(--tint);color:var(--ink);margin-bottom:.1rem}.win .sd span{display:block;padding:.25rem .5rem}
.win .ls{flex:1}.win .ls div{padding:.6rem .8rem;border-bottom:1px solid var(--line)}.win .ls div:last-child{border:0}.win .ls b{display:block}.win .ls span{color:var(--mut)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:1.5rem 0;gap:1rem}.stats strong{display:block;font-size:clamp(1.5rem,4vw,2.3rem);letter-spacing:-.04em;color:var(--brand)}
.note,footer{font-size:.87rem;color:var(--mut)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-block:2.3rem}.cols section{background:var(--card);border:1px solid var(--line);border-radius:.75rem;padding:1.4rem}.cols h2{margin-top:0}
h2{line-height:1.2;letter-spacing:-.02em}footer{border-top:1px solid var(--line);margin-top:2rem}
article{max-width:49rem}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--code);padding:1rem;border-radius:.45rem}code{overflow-wrap:anywhere}li{margin-block:.5rem}
@media(max-width:46rem){.hero,.cols,.stats{grid-template-columns:minmax(0,1fr)}.hero>*{min-width:0}header,nav{gap:.6rem 1rem}.stats{gap:.7rem}.stats strong{display:inline;margin-right:.6rem}}

.compat{border-block:1px solid var(--line);padding:1.4rem 0}
.compat h2{margin:0 0 1rem}.compat dl{margin:0 0 .8rem}.compat dt{font-weight:650}.compat dd{margin:0 0 .65rem}
.context{max-width:43rem;color:var(--mut);margin-top:1.5rem}

.hero h1 {
  max-width: 14ch;
  font-weight: 650;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.preview {
  padding: clamp(.75rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(145deg, var(--tint), var(--bg));
}
.performance {
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--card);
}
.performance-heading, .performance dl {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}
.performance-heading { align-items: baseline; justify-content: space-between; }
.performance-heading h2 { margin: 0; font-size: 1.15rem; }
.performance-heading a { font-size: .875rem; }
.performance dl { margin: 1rem 0 0; gap: 1rem; }
.performance dl div { flex: 1 1 10rem; }
.performance dt { color: var(--mut); font-size: .875rem; }
.performance dd { margin: 0; font-size: 1.65rem; font-weight: 650; letter-spacing: -.03em; }
.performance dd small { font-size: 1rem; font-weight: 500; }
@media (max-width: 40rem) {
  .performance dl { display: block; }
  .performance dl div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    border-top: 1px solid var(--line);
    padding-block: .45rem;
  }
  .performance dd { font-size: 1.25rem; white-space: nowrap; }
  .performance-heading a { padding-block: .35rem; }
}
.win { box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 10%, transparent); }
.win .bar { gap: .45rem; letter-spacing: -.015em; }
.win .sd { background: var(--bg); }
.win .sd b { color: var(--brand); }
.compat dl { display: grid; gap: .15rem; }
.compat dt { color: var(--mut); font-size: .875rem; }
.compat dd { font-variant-numeric: tabular-nums; }
.compat dd:first-of-type { font-weight: 600; }
.download:hover { background: color-mix(in srgb, var(--brand) 88%, var(--ink)); }

@media (max-width: 40rem) {
  header, main, footer { padding-inline: clamp(1rem, 5vw, 1.75rem); }
  header { display: grid; gap: .5rem; padding-block: .9rem .35rem; background: var(--card); border-bottom: 1px solid var(--line); }
  .brand { width: fit-content; min-height: 2.75rem; }
  header nav { justify-content: flex-start; gap: 0 1.25rem; }
  header nav a, footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  header nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px var(--brand); }
  main { padding-block: 0; }
  .hero { gap: 1.5rem; padding-block: 2rem 1.5rem; }
  .hero h1 { font-size: clamp(2.65rem, 10.5vw, 3.5rem); text-wrap: balance; }
  .hero p { max-width: 30ch; font-size: 1.05rem; margin-bottom: 1.25rem; }
  .buttons { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .5rem; }
  .buttons a { display: grid; place-items: center; min-height: 2.75rem; padding: .65rem .9rem; text-align: center; }
  .buttons a:not(.download) { border: 1px solid var(--line); border-radius: .4rem; background: var(--card); text-decoration: none; font-weight: 600; }
  .hero small { margin-top: .65rem; }
  .win { box-shadow: 0 4px 14px #12304f12; }
  .win .sd { width: auto; flex: 0 0 4.6rem; }
  .win .ls div { padding: .4rem .7rem; }
  .compat { padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: .75rem; }
  .compat dt { color: var(--mut); font-size: .875rem; }
  .compat dd { margin: .15rem 0 .85rem; }
  .compat .note { display: inline-block; padding-block: .45rem; }
  article { padding-top: 1.25rem; }
  article h1 { margin-top: 0; line-height: 1.15; }
  article ol, article ul { padding-inline-start: 1.4rem; }
  footer { justify-content: flex-start; gap: 0 1.25rem; padding-block: .75rem; }
}
@media (max-width: 24rem) {
  .buttons { grid-template-columns: 1fr; justify-content: stretch; }
}