:root{
  --bg:#ffffff; --fg:#1d1f23; --muted:#5d636e; --line:#e4e6ea; --soft:#f5f6f8;
  --accent:#4b2e83; --accent-soft:#efeaf8; --link:#3a5bbf;
  --j:#1f6f50; --c:#3a5bbf; --w:#8a5a12; --t:#7a3d8f; --pp:#5d636e;
  --award:#9a5b00; --award-bg:#fff4dd;
  --maxw:880px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#131417; --fg:#e7e8ea; --muted:#a1a6b0; --line:#2a2d33; --soft:#1b1d21;
    --accent:#b9a3ee; --accent-soft:#2a2340; --link:#8fb0ff;
    --j:#6fcf9f; --c:#8fb0ff; --w:#e3b366; --t:#d29be6; --pp:#a1a6b0;
    --award:#f2c46b; --award-bg:#3a2e14; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:64px}
body{margin:0; background:var(--bg); color:var(--fg); line-height:1.55; font-size:16px}
a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}

.topnav{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; gap:16px; height:52px}
.brand{font-weight:700; color:var(--fg); white-space:nowrap}
.topnav ul{display:flex; gap:14px; list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none}
.topnav ul::-webkit-scrollbar{display:none}
.topnav li a{color:var(--muted); font-size:14px; white-space:nowrap; padding:4px 0; border-bottom:2px solid transparent}
.topnav li a.active{color:var(--fg); border-bottom-color:var(--accent); text-decoration:none}
@media (max-width:640px){ .brand{display:none} }

.hero{display:flex; gap:24px; padding:36px 0 8px; align-items:flex-start}
.photo{border-radius:50%; flex:none; object-fit:cover; background:var(--soft)}
h1{font-size:30px; margin:0 0 4px; letter-spacing:-.01em}
.role{color:var(--muted); margin:0 0 12px}
.bio{margin:0 0 12px} .bio p{margin:0}
.links{font-size:15px; margin:0}
.callout{margin:14px 0 0; padding:10px 14px; background:var(--accent-soft); border-radius:8px; font-size:15px}
@media (max-width:640px){ .hero{flex-direction:column; gap:14px} .photo{width:96px;height:96px} }

section{padding:28px 0 8px; border-top:1px solid var(--line); margin-top:24px}
h2{font-size:22px; margin:0 0 14px}
h3{font-size:17px; margin:0 0 6px}
h3.sub{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 10px}
.count{text-transform:none; letter-spacing:0}
.meta{color:var(--muted); font-size:14px}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:var(--muted)}

.news{list-style:none; padding:0; margin:0}
.news li{display:flex; gap:14px; padding:4px 0}
.news time{flex:none; width:72px; color:var(--muted); font-size:14px; padding-top:1px}

.themes{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.theme{background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.theme p{margin:0 0 8px; font-size:15px}
.keypapers{font-size:13px; color:var(--muted)}
.keypapers a{display:inline-block; margin-right:4px; white-space:nowrap}
@media (max-width:760px){ .themes{grid-template-columns:1fr} }

.featured{display:grid; gap:12px}
.feat{display:grid; grid-template-columns:168px 1fr; gap:16px; padding:12px; border:1px solid var(--line); border-radius:10px}
.feat img{width:168px; height:112px; object-fit:cover; border-radius:6px; background:var(--soft)}
.feat .pub-title{display:block; margin:2px 0 4px}
.feat .venue{line-height:1.4}
.feat .summary{margin:0; font-size:14.5px; color:var(--muted)}
@media (max-width:560px){ .feat{grid-template-columns:96px 1fr; gap:12px} .feat img{width:96px; height:64px} }

.filters{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px}
.filters button{font:inherit; font-size:13px; padding:3px 10px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--muted); cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.year{font-size:15px; color:var(--muted); margin:18px 0 6px; font-weight:600}
.pubs{list-style:none; padding:0; margin:0}
.pub{display:grid; grid-template-columns:92px 1fr; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line)}
.pub:last-child{border-bottom:0}
.pub.hidden{display:none}
.pub:target{background:var(--accent-soft); border-radius:6px}
.venue{font-size:12.5px; font-weight:700; letter-spacing:.01em; line-height:1.9; white-space:nowrap}
.pub > .venue{text-align:right}
.venue-journal{color:var(--j)} .venue-conference{color:var(--c)} .venue-workshop{color:var(--w)}
.venue-tool{color:var(--t)} .venue-preprint{color:var(--pp)}
.pub-body{min-width:0}
.pub-title{color:var(--fg); font-weight:600}
.pub-authors{font-size:14px; color:var(--muted)}
.pub-authors strong{color:var(--fg); font-weight:600}
.award{display:inline-block; font-size:12px; font-weight:600; color:var(--award); background:var(--award-bg); padding:1px 7px; border-radius:4px}
.pub-links{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:13px; margin-top:2px}
.fold{display:contents}
.fold > summary{cursor:pointer; color:var(--link); list-style:none}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::after{content:" ▸"} .fold[open] > summary::after{content:" ▾"}
.fold:not([open])::details-content{display:none}
.fold[open] > :not(summary){flex-basis:100%; min-width:0; max-width:100%}
.summary{margin:4px 0; font-size:14px}
.summary-note{display:block; font-size:12px; color:var(--muted); font-style:italic; margin-top:2px}
.bib{position:relative; margin-top:4px}
.bib pre{margin:0; padding:10px 12px; background:var(--soft); border:1px solid var(--line); border-radius:6px;
  font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere}
.copy{position:absolute; top:6px; right:6px; font-size:12px; padding:2px 8px; border-radius:4px; border:1px solid var(--line);
  background:var(--bg); color:var(--muted); cursor:pointer}
@media (max-width:560px){ .pub{grid-template-columns:1fr; gap:0} .pub .venue{line-height:1.4} .pub > .venue{text-align:left} }

details.more{margin-top:14px}
details.more > summary{cursor:pointer; color:var(--link); font-size:15px}

.plain{padding-left:18px; margin:0} .plain li{margin:4px 0}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:700px){ .cols{grid-template-columns:1fr; gap:0} }
.foot{color:var(--muted); font-size:13px; padding-top:24px; padding-bottom:40px; border-top:1px solid var(--line); margin-top:32px}