/* Adapted from Xiyuan Yang's whoami portfolio (MIT).
   Copyright (c) 2025 Xiyuan Yang. See credits/whoami-LICENSE.txt. */
:root {
  --bg:#faf8f4; --surface:#fffdf9; --ink:#26332c; --muted:#646b62;
  --accent:#2e6556; --secondary:#856345; --line:rgba(48,66,54,.13);
  --soft:rgba(46,101,86,.07); --header:rgba(250,248,244,.92);
  --number-bg:rgba(133,99,69,.08); --badge-ink:#fffdf9;
  --section-tint:#f2f4ee; --warm-tint:#f6f0e7;
  --orb-green:rgba(87,126,105,.16); --orb-warm:rgba(188,151,107,.14);
  --selection-bg:#dce8de; --selection-ink:#26332c;
  color-scheme:light;
}
:root[data-theme=dark] {
  --bg:#191e1b; --surface:#222a25; --ink:#eeeee5; --muted:#acb5ac;
  --accent:#9bc5b3; --secondary:#d4b995; --line:rgba(213,228,215,.15);
  --soft:rgba(155,197,179,.1); --header:rgba(25,30,27,.94);
  --number-bg:rgba(212,185,149,.09); --badge-ink:#191e1b;
  --section-tint:#1c251f; --warm-tint:#25251f;
  --orb-green:rgba(107,153,126,.1); --orb-warm:rgba(174,140,92,.09);
  --selection-bg:#38584a; --selection-ink:#eeeee5;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2,h3 { line-height:1.15; letter-spacing:-.035em; }
h1 { font-size:clamp(2.8rem,6vw,4.5rem); }
h2 { font-size:clamp(2rem,5vw,3rem); }
h3 { font-size:1.4rem; }
p { margin-bottom:1rem; }
a { color:var(--accent); text-decoration:none; text-underline-offset:4px; }
a:hover { text-decoration:underline; }
button { font:inherit; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
[hidden] { display:none!important; }
::selection { background:var(--selection-bg); color:var(--selection-ink); }
.container { width:min(1200px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; padding:12px; background:var(--surface); }
.skip-link:focus { top:10px; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; border-bottom:1px solid var(--line); background:var(--header); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.nav-wrap { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:16px 32px; min-height:72px; gap:24px; }
.brand { color:var(--ink); font-size:1.5rem; font-weight:700; justify-self:start; }
.brand span { color:var(--accent); }
.brand:hover { text-decoration:none; }
nav { display:flex; align-items:center; gap:32px; }
nav a { font-size:.9rem; font-weight:500; color:var(--ink); }
nav a:hover,nav a[aria-current=page] { color:var(--accent); }
.nav-tools { display:flex; gap:16px; align-items:center; justify-self:end; }
.github-link { color:var(--ink); }
.icon-button { border:0; background:none; color:var(--muted); padding:6px; display:grid; place-items:center; }
.icon-button:hover { color:var(--accent); }
.hero { min-height:100vh; min-height:100svh; display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; padding:128px 32px 96px; }
.hero-content { max-width:900px; text-align:center; position:relative; z-index:1; }
.hero h1 { font-size:clamp(3rem,10vw,6rem); font-weight:700; line-height:1.1; margin-bottom:20px; }
.title-line { display:block; }
.title-gradient { color:var(--accent); }
.hero-subtitle { font-size:clamp(1.2rem,3vw,1.5rem); color:var(--muted); margin-bottom:8px; }
.hero-description { font-size:clamp(1rem,2vw,1.2rem); color:var(--muted); }
.hero-links { display:flex; gap:16px; align-items:center; justify-content:center; font-size:.9rem; margin-top:24px; }
.hero-links span { color:var(--line); }
.hero-scroll { display:inline-flex; flex-direction:column; align-items:center; gap:12px; margin-top:56px; color:var(--muted); }
.hero-scroll:hover { text-decoration:none; color:var(--accent); }
.hero-scroll>span:first-child { text-transform:uppercase; font-size:.75rem; letter-spacing:2px; }
.scroll-indicator { width:24px; height:40px; border:2px solid currentColor; border-radius:12px; position:relative; }
.scroll-indicator:before { content:''; position:absolute; left:8px; top:7px; height:8px; width:4px; border-radius:2px; background:var(--accent); animation:scroll-bounce 2s ease infinite; }
.hero-background { position:absolute; inset:0; pointer-events:none; }
.gradient-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.3; }
.orb-1 { width:400px; height:400px; background:radial-gradient(circle,var(--orb-green),transparent 70%); top:10%; left:10%; }
.orb-2 { width:500px; height:500px; background:radial-gradient(circle,var(--orb-warm),transparent 70%); top:40%; right:8%; }
.orb-3 { width:350px; height:350px; background:radial-gradient(circle,var(--orb-green),transparent 70%); bottom:8%; left:30%; }
@keyframes scroll-bounce { 50% { transform:translateY(10px); opacity:.5; } }
.section { padding:128px 0; }
.section-header { text-align:center; margin-bottom:64px; }
.section-tag { display:inline-block; padding:6px 16px; margin-bottom:16px; background:var(--number-bg); color:var(--secondary); border-radius:20px; font-size:.85rem; font-weight:600; letter-spacing:2px; }
.section-header h2 { margin-bottom:12px; }
.section-header>p { color:var(--muted); font-size:1.1rem; }
.research-section { background:linear-gradient(180deg,var(--bg),var(--section-tint)); }
.project-row { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; min-height:400px; margin-bottom:128px; }
.project-row:nth-child(even) .project-visual { order:2; }
.project-row:nth-child(even) .project-info { order:1; }
.project-visual,.project-info { min-width:0; }
.project-visual .figure-link { height:400px; border-radius:32px; background:#fff; display:flex; align-items:center; padding:20px; overflow:hidden; }
.project-visual img { width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.project-row:hover .project-visual img { transform:scale(1.025); }
.project-visual figcaption { font-size:.68rem; color:var(--muted); margin-top:10px; text-align:center; }
.project-info { padding:24px 16px; }
.project-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.project-badge { display:inline-block; background:var(--accent); color:var(--badge-ink); padding:6px 16px; border-radius:20px; font-size:.75rem; font-weight:600; }
.first-author { font-size:.8rem; color:var(--muted); }
.project-info h3 { font-size:2rem; line-height:1.2; margin-bottom:20px; }
.project-info>p { font-size:1.1rem; color:var(--muted); margin-bottom:28px; }
.project-links { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.arrow-link { display:inline-flex; gap:8px; align-items:center; font-weight:600; }
.arrow-link span { transition:transform .2s; }
.arrow-link:hover span { transform:translateX(4px); }
.detail-link { color:var(--muted); font-size:.82rem; }
.small-projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.project-item { display:flex; align-items:center; gap:24px; padding:30px; color:var(--ink); border:1px solid var(--line); border-radius:18px; background:var(--surface); transition:transform .25s,border-color .25s; }
.project-item:hover { transform:translateY(-3px); border-color:var(--accent); text-decoration:none; }
.project-number { color:var(--secondary); font-size:1.5rem; min-width:44px; font-weight:700; }
.project-item h3 { font-size:1.1rem; margin-bottom:8px; }
.project-item p { font-size:.9rem; color:var(--muted); margin:0; }
[data-reveal] { transition:opacity .6s ease,transform .6s ease; }
[data-reveal].reveal-ready { opacity:0; transform:translateY(24px); }
.timeline { max-width:950px; margin-inline:auto; }
.timeline article { display:grid; grid-template-columns:190px 1fr; gap:32px; padding:32px 0; border-bottom:1px solid var(--line); }
.timeline article:last-child { border:0; }
.timeline-date { font-size:.78rem; color:var(--muted); padding-top:4px; }
.timeline h3 { font-size:1.35rem; margin-bottom:8px; }
.timeline .role { color:var(--accent); font-size:.88rem; }
.timeline p:last-child { color:var(--muted); margin:0; }
.about-section { background:linear-gradient(180deg,var(--bg),var(--warm-tint)); }
.about-copy { max-width:760px; margin-inline:auto; color:var(--muted); font-size:1.08rem; }
.about-copy p { margin-bottom:24px; }
.about-links { display:flex; gap:28px; padding-top:12px; }
.site-footer { padding:40px 24px; border-top:1px solid var(--line); text-align:center; background:var(--surface); }
.site-footer p { font-size:.9rem; color:var(--muted); margin-bottom:12px; }
.footer-links { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.footer-links a { color:var(--ink); font-size:.85rem; }
/* Supporting pages share typography, whitespace and low-contrast separators. */
.inner-page main { padding-top:72px; }
.page-intro { padding-block:100px 64px; text-align:center; }
.page-intro h1 { margin-bottom:24px; }
.page-intro>p { max-width:720px; margin-inline:auto; color:var(--muted); }
.eyebrow { display:block; font-size:.75rem; letter-spacing:.08em; color:var(--muted); margin-bottom:16px; }
.quiet { font-size:.82rem; color:var(--muted); }
.text-link { display:inline-flex; gap:8px; align-items:center; font-size:.88rem; }
.section-tight { padding-bottom:96px; }
.paper-card { display:grid; grid-template-columns:34% 1fr; gap:48px; padding:44px 0; border-bottom:1px solid var(--line); align-items:center; }
.paper-visual,.paper-content { min-width:0; }
.paper-visual .figure-link { display:block; position:relative; padding:16px; background:white; border-radius:18px; }
.paper-visual img { height:230px; width:100%; object-fit:contain; }
.paper-visual figcaption { margin-top:8px; font-size:.68rem; color:var(--muted); }
.zoom-hint { position:absolute; bottom:8px; right:12px; font-size:.65rem; color:#646b62; background:white; }
.paper-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.badge { color:var(--muted); font-size:.73rem; }
.badge.accepted { color:var(--accent); }
.badge.first { color:var(--secondary); }
.year { margin-left:auto; font-size:.75rem; color:var(--muted); }
.paper-content h3 { font-size:1.3rem; line-height:1.4; margin-bottom:14px; }
.paper-content h3 a { color:var(--ink); }
.authors { font-size:.8rem; color:var(--muted); margin-bottom:12px; }
.authors summary { cursor:pointer; }
.authors p { margin-top:12px; }
.authors strong { color:var(--ink); }
.paper-description { color:var(--muted); font-size:.9rem; }
.paper-links { display:flex; gap:20px; flex-wrap:wrap; }
.cite-button { border:0; padding:0; background:none; color:var(--accent); }
.citation { margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:8px; font-size:.75rem; }
.citation pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.copy-citation { color:var(--accent); background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:6px 12px; }
.filters { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.filters button { padding:8px 16px; border:1px solid var(--line); border-radius:24px; color:var(--muted); background:transparent; font-size:.85rem; }
.filters button[aria-pressed=true] { background:var(--soft); color:var(--accent); border-color:var(--accent); }
.filters span { margin-left:5px; }
.publication-note { text-align:center; }
.sources-note { padding:32px 0 64px; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 40px; }
.project-card { min-width:0; border-bottom:1px solid var(--line); }
.project-image { display:block; border-radius:24px; background:white; padding:24px; }
.project-image img { width:100%; height:270px; object-fit:contain; }
.project-body { padding:28px 0; }
.project-body h3 { margin-bottom:14px; }
.project-body h3 a { color:var(--ink); }
.project-body p { color:var(--muted); }
.project-symbol { display:none; }
.tags { display:flex; flex-wrap:wrap; gap:16px; font-size:.75rem; color:var(--muted); }
.button { display:inline-flex; gap:10px; align-items:center; padding:10px 20px; background:var(--soft); border-radius:24px; color:var(--accent); font-weight:500; }
.cv-layout { display:grid; grid-template-columns:155px 1fr; gap:48px; padding-bottom:80px; }
.cv-nav { position:sticky; top:110px; display:flex; flex-direction:column; align-self:start; gap:18px; font-size:.85rem; }
.cv-section { padding:30px 0; border-top:1px solid var(--line); }
.cv-section h2 { font-size:1.8rem; margin-bottom:24px; }
.education-card { padding-bottom:20px; }
.education-card h3 { margin-bottom:14px; }
.education-card p { color:var(--muted); }
.clean-list { padding-left:20px; color:var(--muted); }
.cv-layout .timeline article { grid-template-columns:160px 1fr; gap:24px; }
.cv-layout .timeline h3 { font-size:1.15rem; }
.cv-papers { padding-left:20px; }
.cv-papers li { padding-bottom:20px; }
.cv-papers p { font-size:.82rem; color:var(--muted); margin-top:8px; }
.skills-list { display:grid; grid-template-columns:155px 1fr; gap:16px; }
.skills-list dt { font-weight:600; }
.skills-list dd { margin:0; color:var(--muted); }
.cv-section>h3 { margin:20px 0 10px; font-size:1.1rem; }
.prose { max-width:800px; overflow-wrap:anywhere; }
.prose h2 { font-size:1.8rem; margin:40px 0 24px; }
.prose h3 { font-size:1.25rem; margin-bottom:16px; }
.prose article { padding:24px 0; border-bottom:1px solid var(--line); }
.prose p { color:var(--muted); }
dialog { max-width:min(1100px,92vw); max-height:90vh; padding:48px 24px 20px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:18px; }
dialog::backdrop { background:rgba(0,0,0,.65); }
dialog img { max-height:70vh; object-fit:contain; margin:auto; background:white; }
dialog p { text-align:center; margin:16px 0 0; color:var(--muted); font-size:.8rem; }
.dialog-close { position:absolute; right:12px; top:8px; border:0; background:none; color:var(--ink); font-size:28px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:900px) {
  .project-row { gap:28px; }
  .project-info { padding:16px 0; }
  .project-visual .figure-link { height:320px; }
  .paper-card { gap:24px; }
  .cv-layout { grid-template-columns:125px 1fr; gap:24px; }
  .cv-layout .timeline article { grid-template-columns:1fr; gap:8px; }
}
@media(max-width:768px) {
  .container { width:calc(100% - 36px); }
  .nav-wrap { padding:14px 18px; grid-template-columns:auto 1fr auto; gap:16px; min-height:64px; }
  nav { justify-content:center; gap:18px; }
  nav a { font-size:.8rem; }
  .nav-tools { gap:8px; }
  .section { padding:72px 0; }
  .section-header { margin-bottom:48px; }
  .hero { padding:110px 18px 72px; }
  .project-row { grid-template-columns:1fr; gap:20px; margin-bottom:72px; }
  .project-row:nth-child(even) .project-visual { order:0; }
  .project-row:nth-child(even) .project-info { order:0; }
  .project-visual .figure-link { height:280px; border-radius:24px; }
  .project-info { padding:12px 4px; }
  .project-info h3 { font-size:1.7rem; }
  .project-info>p { font-size:1rem; }
  .small-projects,.project-grid { grid-template-columns:1fr; gap:20px; }
  .project-item { padding:24px; gap:18px; }
  .timeline article { grid-template-columns:1fr; gap:10px; }
  .paper-card { grid-template-columns:1fr; gap:24px; }
  .paper-visual img { height:260px; }
  .page-intro { padding:64px 0 40px; }
  .inner-page main { padding-top:64px; }
  .cv-layout { display:block; }
  .cv-nav { position:static; flex-direction:row; flex-wrap:wrap; margin-bottom:28px; }
  .skills-list { grid-template-columns:1fr; gap:6px; }
  .skills-list dd { margin-bottom:14px; }
}
@media(max-width:420px) {
  .nav-wrap { gap:8px; padding-inline:12px; }
  .nav-tools { gap:2px; }
  .nav-tools svg { width:18px; height:18px; }
  nav { gap:12px; }
  nav a { font-size:.73rem; }
  .brand { font-size:1.2rem; }
  .hero h1 { font-size:3rem; }
  .project-visual .figure-link { height:230px; padding:12px; }
  .paper-visual img { height:210px; }
  .project-badge { font-size:.68rem; padding:6px 12px; }
  .project-links { gap:14px; }
  .project-number { min-width:30px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation:none!important; transition:none!important; }
  [data-reveal].reveal-ready { opacity:1; transform:none; }
}
@media print {
  .site-header,.site-footer,.cv-nav,.button,dialog,.hero-background,.hero-scroll { display:none!important; }
  body { color:black; background:white; font-size:10pt; }
  .container { width:100%; }
  .inner-page main { padding:0; }
  .page-intro { padding:0 0 20px; }
  .cv-layout { display:block; }
  .cv-section,.timeline article { break-inside:avoid; }
  [data-reveal] { opacity:1!important; transform:none!important; }
  a { color:black; }
}