:root{
  --bg:#ffffff; --surface:#f6f7f9; --border:#e4e7ec;
  --ink:#1a1d23; --muted:#5b6472; --accent:#0b62f2; --accent-soft:#e8f0ff;
  --maxw:900px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0e1116; --surface:#171b22; --border:#252b34;
    --ink:#e8eaed; --muted:#9aa4b2; --accent:#5b9bff; --accent-soft:#16233c; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* header */
header{padding:56px 0 30px; text-align:center}
h1{font-size:clamp(1.7rem,4.2vw,2.6rem); line-height:1.2; margin:0 0 18px; letter-spacing:-.01em}
.authors{font-size:1.05rem; margin:0 0 6px}
.authors a{color:var(--ink)}
.authors sup{color:var(--accent); font-weight:600}
.affil{color:var(--muted); margin:6px 0 4px}
.note{color:var(--muted); font-size:.9rem; margin:2px 0}
.venue{margin-top:14px; font-weight:600; color:var(--muted)}

/* link buttons */
.links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:24px 0 8px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  background:var(--ink); color:var(--bg); font-weight:600; font-size:.95rem; border:1px solid var(--ink)}
.btn:hover{opacity:.88; text-decoration:none}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--border)}
.btn.soft{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.btn.disabled{background:var(--surface); color:var(--muted); border-color:var(--border); cursor:default}
.btn.disabled:hover{opacity:1; text-decoration:none}
.btn.disabled em{font-style:normal; opacity:.7; font-weight:500; margin-left:2px}

/* sections */
section{padding:34px 0; border-top:1px solid var(--border)}
section:first-of-type{border-top:none}
h2{font-size:1.5rem; text-align:center; margin:0 0 8px; letter-spacing:-.01em}
.sub{text-align:center; color:var(--muted); max-width:640px; margin:0 auto 22px}
p{margin:0 0 16px}
.lead{max-width:760px; margin:0 auto; text-align:justify}

/* media */
figure{margin:18px 0 6px}
img,video{max-width:100%; height:auto; display:block; border-radius:12px; margin-left:auto; margin-right:auto}
.framed{border:1px solid var(--border); background:var(--surface)}
figcaption{color:var(--muted); font-size:.9rem; text-align:center; margin-top:10px; padding:0 6px}
.hero video,.hero img{width:100%; border-radius:16px; border:1px solid var(--border)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:680px){ .grid2{grid-template-columns:1fr} }

/* stat tiles */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:6px 0 26px}
@media(max-width:680px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 12px; text-align:center}
.stat b{display:block; font-size:1.25rem; line-height:1.15; color:var(--accent)}
.stat span{color:var(--muted); font-size:.82rem}

/* tables */
.tablecard{overflow-x:auto}
table{border-collapse:collapse; width:100%; margin:8px 0; font-size:.94rem}
caption{caption-side:top; color:var(--muted); font-size:.88rem; text-align:left; padding:0 0 8px}
th,td{padding:8px 12px; text-align:center; border:none}
thead th{border-bottom:2px solid var(--ink)}
tbody tr:last-child td{border-top:1px solid var(--border); font-weight:600}
th:first-child,td:first-child{text-align:left}

/* bibtex */
pre{background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px; overflow-x:auto; font-size:.84rem; line-height:1.5}
.copybar{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.copybtn{cursor:pointer; font-size:.85rem; padding:6px 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink)}

/* before/after compare slider */
.compare{position:relative; max-width:440px; margin:0 auto; aspect-ratio:4/3; border-radius:12px;
  overflow:hidden; border:1px solid var(--border); user-select:none; touch-action:none; cursor:ew-resize; outline:none}
.compare:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:0; pointer-events:none}
.compare .top{clip-path:inset(0 50% 0 0)}
.compare .handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.compare .grip{position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:38px; height:38px;
  border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center;
  color:#111; font-size:13px; font-weight:700; letter-spacing:1px}
.compare .lbl{position:absolute; top:10px; padding:4px 11px; border-radius:999px; background:rgba(15,17,22,.82);
  color:#fff; font-size:.82rem; font-weight:600}
.compare .lbl.l{left:10px} .compare .lbl.r{right:10px}

footer{padding:34px 0 60px; text-align:center; color:var(--muted); font-size:.88rem; border-top:1px solid var(--border)}
.small{font-size:.86rem; color:var(--muted)}