:root{
  --ink:#1a2b3c; --muted:#5b6b7a; --line:#e6ebf1;
  --accent:#2563a8; --accent2:#0e7c66; --bg-soft:#f6f8fb; --warn:#b3471a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:#fff;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px; margin:0 auto; padding:0 22px}
.section{padding:54px 0}
.section.alt{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h2.title{font-size:1.7rem; font-weight:800; letter-spacing:-.01em; margin:0 0 6px}
h2.title .em{color:var(--accent)}
.sub{color:var(--muted); margin:0 0 26px; font-size:1.02rem}
h3{font-size:1.18rem; font-weight:700; margin:30px 0 8px}

/* hero */
.hero{padding:60px 0 38px; text-align:center; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfdff 0%,#fff 100%)}
.hero h1{font-size:2.35rem; line-height:1.18; font-weight:850; letter-spacing:-.02em; margin:0 auto 14px; max-width:880px}
.hero h1 .em{color:var(--accent)}
.authors{font-size:1.12rem; margin:6px 0 2px}
.affil{color:var(--muted); margin:0 0 4px}
.venue{color:var(--muted); font-size:.95rem; margin:2px 0 22px}
.btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff;
  padding:9px 16px; border-radius:999px; font-weight:600; font-size:.95rem; border:1px solid var(--ink)}
.btn:hover{text-decoration:none; opacity:.92}
.btn.ghost{background:#fff; color:var(--ink); border-color:#cfd8e2}
.btn.soon{background:#fff; color:var(--muted); border-color:#dde4ec; cursor:default}
.btn i{font-size:1.02rem}

/* highlight cards */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:6px}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 18px}
.card .big{font-size:1.5rem; font-weight:800; color:var(--accent); letter-spacing:-.01em}
.card .lab{font-weight:700; margin:2px 0 3px}
.card p{margin:0; color:var(--muted); font-size:.95rem}

/* figures */
figure{margin:22px 0; text-align:center}
figure img{max-width:100%; border:1px solid var(--line); border-radius:10px; background:#fff}
figcaption{color:var(--muted); font-size:.9rem; margin-top:10px; max-width:820px; margin-left:auto; margin-right:auto}
.fig-narrow img{max-width:680px}

/* table */
.tbl{width:100%; border-collapse:collapse; margin:16px 0; font-size:.95rem; overflow:hidden;
  border:1px solid var(--line); border-radius:10px}
.tbl th,.tbl td{padding:9px 12px; border-bottom:1px solid var(--line); text-align:left}
.tbl thead th{background:var(--bg-soft); font-weight:700}
.tbl td.num,.tbl th.num{text-align:right; font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}
.tbl .best{color:var(--accent); font-weight:800}
.tbl .grp{background:#fbfdff; font-weight:700; color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em}
.note{color:var(--muted); font-size:.86rem}

/* lists */
ul.clean{padding-left:0; list-style:none}
ul.clean li{position:relative; padding-left:24px; margin:8px 0}
ul.clean li:before{content:"▸"; color:var(--accent); position:absolute; left:4px; top:0}
.lead{font-size:1.04rem}

/* code */
pre{background:#0f1b2a; color:#e7eef6; padding:16px 18px; border-radius:12px; overflow:auto; font-size:.86rem; line-height:1.5}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.inline{background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.88em}

.kicker{display:inline-block; background:#eaf1fa; color:var(--accent); font-weight:700;
  font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:12px}

footer{padding:34px 0 50px; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line)}
footer a{color:var(--muted); text-decoration:underline}

@media (max-width:680px){
  .hero h1{font-size:1.7rem}
  .cards{grid-template-columns:1fr}
  h2.title{font-size:1.4rem}
}