:root{
  --bg:#FBFCFC; --side:#F1F5F2; --line:#DDE3E1; --card:#FFFFFF; --card-line:#E1E6E4;
  --ink:#1A1E23; --text:#2C333B; --mute:#4B5560; --acc:#007C41; --acc-soft:#E6F4EC; --acc-line:#C6E3D2; --gold:#FFDB05;
  --pill-bg:#EEF0F2; --pill-fg:#4B5560;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14181B; --side:#1A2022; --line:#2A3235; --card:#1B2124; --card-line:#2A3235;
    --ink:#E8ECEA; --text:#C9D1CD; --mute:#94A09B; --acc:#4FC48A; --acc-soft:#14301F; --acc-line:#265C3C; --gold:#F5D33A;
    --pill-bg:#262E31; --pill-fg:#A4AFAB;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
img{max-width:100%;height:auto}
h1,h2,h3{color:var(--ink);text-wrap:balance}

.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;align-items:stretch}
.side{background:var(--side);border-right:1px solid var(--line);padding:40px 28px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow:auto}
.side-id{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.side-id a{color:inherit}
.side-id a:hover{text-decoration:none}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:top;margin-bottom:14px;display:block}
.name{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.role{font-size:13.5px;color:var(--mute);line-height:1.45}
.aff{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--acc);margin-top:8px;line-height:1.5;display:inline-block}
.side-id a.aff{color:var(--acc)}
.side-id a.aff:hover{text-decoration:underline}
.nav{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:16px;font-size:15px}
.nav a{color:var(--ink);padding:5px 0}
.nav a{display:inline-block;align-self:flex-start;border-bottom:2px solid transparent}
.nav a.on{font-weight:600;color:var(--acc);border-bottom-color:var(--gold)}
.ext{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);padding-top:16px;font-size:13.5px}
.ext a{display:flex;align-items:center;gap:9px;color:var(--acc);word-break:break-all}
.ext .loc{display:flex;align-items:flex-start;gap:9px;color:var(--acc);line-height:1.45}
.ext .loc svg{margin-top:2px}
.ext svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.content{padding:48px 56px 40px;width:100%;max-width:880px;display:flex;flex-direction:column}
.content > :first-child{margin-top:0}
.content > h2:first-child{margin-top:0}
.foot{margin-top:auto;padding-top:48px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}

.lede{font-size:18px;line-height:1.55;margin:0 0 14px;color:var(--ink)}
.lede b{font-weight:600}
p{margin:0 0 14px}
h1.page{font-size:26px;font-weight:600;letter-spacing:-.01em;margin:0 0 20px}
h2{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:32px 0 14px;display:flex;align-items:center;gap:12px}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
h3{font-size:17px;font-weight:600;margin:24px 0 8px}
ul{padding-left:20px;margin:0 0 14px}
li{margin-bottom:4px}

.papers{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.paper{background:var(--card);border:1px solid var(--card-line);border-radius:6px;padding:16px 18px;display:grid;gap:8px}
.paper .top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.paper .title{font-size:16.5px;font-weight:600;line-height:1.3;margin:0;color:var(--ink);letter-spacing:-.005em}
.paper .title a{color:inherit}
.paper .title a:hover{color:var(--acc);text-decoration:none}
.pill{flex:none;font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:3px;white-space:nowrap;background:var(--acc-soft);color:var(--acc)}
.pill.wp{background:var(--pill-bg);color:var(--pill-fg)}
.paper .gist{font-size:14.5px;color:var(--text);margin:0;max-width:none;line-height:1.5}
.paper .meta{font-size:13.5px;color:var(--mute);margin:0;max-width:none}
.paper .meta a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.paper .meta a:hover{color:var(--acc);text-decoration-color:var(--acc)}
.paper .detail{font-size:13.5px;color:var(--mute);margin:0;max-width:none;line-height:1.5}
.paper .detail b{color:var(--text);font-weight:500}
.paper .links{display:flex;gap:6px;flex-wrap:wrap}
.paper .links a{font-size:12.5px;color:var(--acc);border:1px solid var(--acc-line);border-radius:4px;padding:3px 9px}
.paper .links a:hover{background:var(--acc-soft);text-decoration:none}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;display:block}
.pdf{width:100%;height:80vh;border:1px solid var(--line);border-radius:6px;background:var(--card)}

@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:28px 22px;gap:16px}
  .avatar{width:84px;height:84px;margin-bottom:8px}
  .nav{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
  .ext{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
  .content{padding:28px 22px 24px}
  .paper .top{flex-direction:column;gap:6px}
  .courses li{grid-template-columns:1fr}
  .courses .when{text-align:left}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){ a{transition:color .12s} }

.courses{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column}
.courses li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:10px 0;border-bottom:1px solid var(--line)}
.courses .course{color:var(--ink);font-weight:500}
.courses .when{font-family:var(--mono);font-size:12.5px;color:var(--mute);align-self:baseline;text-align:right}
.courses .note{grid-column:1 / -1;font-size:13.5px;color:var(--mute)}
.courses .desc{grid-column:1 / -1;font-size:14px;color:var(--mute);line-height:1.5;margin-top:2px}
.courses .course a{color:inherit}
.courses .course a:hover{color:var(--acc);text-decoration:none}
.detail-note{color:var(--mute);font-size:14.5px}

.tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 4px}
.tags-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-right:6px}
.tags span:not(.tags-label){font-size:13px;color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:4px;padding:3px 9px}

.abs{font-size:14px;color:var(--text)}
.abs summary{cursor:pointer;color:var(--acc);font-size:13.5px;font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px}
.abs summary::-webkit-details-marker{display:none}
.abs summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.abs[open] summary::before{transform:rotate(45deg)}
.abs p{margin:8px 0 4px;line-height:1.55}

.edu{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column}
.edu li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 16px;padding:7px 0;border-bottom:1px solid var(--line)}
.edu .year{grid-column:2;grid-row:1 / 3;align-self:baseline;font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.edu .degree{color:var(--ink);font-weight:500}
.edu .school{font-size:14px;color:var(--mute)}