/* Hsin-Yi (Lucy) Lin — personal site
   Palette taken from the plasma colormap used in the research figures. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(vendor/fonts/newsreader-latin-standard-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(vendor/fonts/newsreader-latin-standard-italic.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(vendor/fonts/newsreader-latin-ext-standard-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(vendor/fonts/newsreader-latin-ext-standard-italic.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --paper:#f7f6fb;
  --surface:#ffffff;
  --ink:#1f1a38;
  --muted:#5f5a75;
  --rule:#e1deea;
  --violet:#5b2a86;
  --violet-soft:#efe9f7;
  --amber:#a8650f;          /* text-safe amber */
  --amber-bright:#e39b2d;   /* decorative amber */
  --night:#120f26;
  --night-ink:#eae6f6;
  --measure:40rem;
  --wide:72rem;
  --serif:"Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15122a; --surface:#1c1836; --ink:#ebe8f5; --muted:#a9a3c2; --rule:#2e2950;
    --violet:#c7a6ec; --violet-soft:#2a2350; --amber:#f0b45a;
  }
}
:root[data-theme="dark"]{
  --paper:#15122a; --surface:#1c1836; --ink:#ebe8f5; --muted:#a9a3c2; --rule:#2e2950;
  --violet:#c7a6ec; --violet-soft:#2a2350; --amber:#f0b45a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:4.2rem}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.1875rem; line-height:1.62;
  font-optical-sizing:auto; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--violet); text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--amber-bright); outline-offset:3px; border-radius:2px}
.katex{font-size:1.02em}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; background:var(--night); color:var(--night-ink); overflow:hidden; display:flex; flex-direction:column}
.hero canvas{position:absolute; inset:0; width:100%; height:100%}
.hero__inner{position:relative; z-index:1; margin:auto 0 0; padding:0 clamp(1rem,5vw,4.5rem) clamp(1.5rem,5vh,3rem); max-width:72rem}
.hero h1{
  font-weight:300; font-size:clamp(3.1rem,9.5vw,7.4rem); line-height:.92; letter-spacing:-.025em; margin:0 0 .35em;
  font-variation-settings:"opsz" 72;
}
.hero h1 span{display:block; font-style:italic; font-weight:300; font-size:.42em; letter-spacing:0; margin-top:.25em; color:#cdbff0}
.hero__lede{font-size:clamp(1.15rem,2.1vw,1.45rem); line-height:1.45; max-width:36rem; margin:0 0 1.4rem; color:#ddd7f0}
.hero__links{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin:0 0 2.6rem; padding:0; list-style:none; font-size:1.02rem}
.hero__links a{color:#fff; text-decoration-color:rgba(227,155,45,.7)}
.hero__caption{
  max-width:34rem; font-size:.86rem; line-height:1.45; color:#a59dc4; margin:0;
  border-left:2px solid var(--amber-bright); padding-left:.8rem;
}
.hero__caption b{color:#e6dff8; font-weight:600}
.hero__toggle{
  position:absolute; z-index:2; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vh,1.6rem);
  background:rgba(18,15,38,.6); color:#d8d1f0; border:1px solid #3b3460; border-radius:999px;
  font:inherit; font-size:.82rem; padding:.3rem .8rem; cursor:pointer;
}
.hero__toggle:hover{border-color:#6b5fa3}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
.nav__in{max-width:var(--wide); margin:0 auto; padding:.55rem 1rem; display:flex; align-items:baseline; gap:1.2rem; overflow-x:auto; scrollbar-width:none}
.nav__in::-webkit-scrollbar{display:none}
.nav__name{font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap; margin-right:auto}
.nav a:not(.nav__name){color:var(--muted); text-decoration:none; font-size:1rem; white-space:nowrap}
.nav a:not(.nav__name):hover,.nav a[aria-current="true"]{color:var(--violet)}
.theme-btn{background:none; border:0; color:var(--muted); font:inherit; font-size:1rem; cursor:pointer; padding:0 .1rem}

/* ---------- layout ---------- */
main{padding:0 1rem}
section{max-width:var(--wide); margin:0 auto; padding:clamp(3.5rem,8vw,6rem) 0 0}
.prose{max-width:var(--measure)}
h2{font-weight:400; font-size:clamp(2rem,4.2vw,2.75rem); line-height:1.08; letter-spacing:-.015em; margin:0 0 .6em; font-variation-settings:"opsz" 60}
h3{font-weight:500; font-size:1.5rem; line-height:1.2; margin:0 0 .5em; font-variation-settings:"opsz" 36}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.small{font-size:.95rem}

/* about */
.about{display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:2.5rem 3.5rem; align-items:start}
.about figure{margin:0}
.about img{border-radius:3px; filter:saturate(.92)}
.about figcaption{font-size:.9rem; color:var(--muted); margin-top:.5rem; line-height:1.4}
.facts{margin:1.6rem 0 0; padding:0; list-style:none; border-top:1px solid var(--rule)}
.facts li{display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--rule); font-size:1.02rem}
.facts span{color:var(--muted)}

/* chapters: a real sequence in time, numbered like a paper */
.thread-intro{max-width:var(--measure)}
.chapter{display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:0 1rem; padding:3.2rem 0 0; border-top:1px solid var(--rule); margin-top:3.2rem}
.chapter:first-of-type{margin-top:2.4rem}
.chapter__num{font-size:1.5rem; color:var(--amber); font-variation-settings:"opsz" 36; line-height:1.2}
.chapter__body{min-width:0}
.chapter__meta{color:var(--muted); font-size:1rem; margin:-.3rem 0 1rem; font-style:italic}
.chapter__cols{display:grid; grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr); gap:1.5rem 3rem; align-items:start}
.eq{margin:1.3rem 0 1.5rem; padding:.9rem 1.1rem; background:var(--surface); border-left:3px solid var(--violet); overflow-x:auto; overflow-y:hidden}
.eq .katex-display{margin:.35rem 0}
.eq__note{font-size:.92rem; color:var(--muted); margin:.2rem 0 0; line-height:1.45}
.refs{font-size:.98rem; color:var(--muted); margin:0}
.refs a{overflow-wrap:anywhere}

figure.fig{margin:1.6rem 0 0}
figure.fig .frame{background:#fff; padding:.6rem; border:1px solid var(--rule); border-radius:3px}
figure.fig figcaption{font-size:.92rem; line-height:1.45; color:var(--muted); margin-top:.6rem; max-width:var(--measure)}
figure.fig figcaption b{color:var(--ink); font-weight:600}
.chapter__cols--stack{grid-template-columns:minmax(0,1fr)}
.chapter__cols--stack > div{max-width:var(--measure)}
.chapter__cols--stack figure.fig{max-width:56rem; margin-top:.4rem}
.chapter__cols--stack figure.fig--narrow{max-width:40rem}
.tag-src{display:inline-block; font-size:.8rem; color:var(--violet); border:1px solid currentColor; border-radius:999px; padding:0 .5rem; margin-right:.35rem; line-height:1.5; vertical-align:1px}
.tag-src--ill{color:var(--amber)}

.qgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem 1.6rem; margin-top:1.8rem}
.qgrid figure{margin:0}

/* vocabulary matrix */
.vocab{width:100%; border-collapse:collapse; margin-top:1.8rem; font-size:1rem; line-height:1.4}
.vocab th,.vocab td{text-align:left; vertical-align:top; padding:.75rem .8rem; border-bottom:1px solid var(--rule)}
.vocab thead th{font-weight:500; color:var(--muted); font-size:.95rem; border-bottom:2px solid var(--ink); padding-bottom:.5rem}
.vocab tbody th{font-weight:600; width:11rem}
.vocab tbody th small{display:block; font-weight:400; color:var(--muted); margin-top:.2rem}
.vocab td.empty{color:var(--rule)}
.vocab tbody tr{transition:background-color .15s}
.vocab tbody tr:hover,.vocab tbody tr:focus-within{background:var(--violet-soft)}
.vocab td .pill{display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.45rem; vertical-align:1px}
.c-pde .pill{background:#2d1b6b}.c-mod .pill{background:#8b2a8f}.c-ml .pill{background:#d2546a}.c-q .pill{background:#e39b2d}
.vocab-wrap{overflow-x:auto}

/* publications */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 1.6rem; padding:0}
.filters button{font:inherit; font-size:.98rem; background:transparent; color:var(--ink); border:1px solid var(--rule); border-radius:999px; padding:.22rem .9rem; cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.filters button:hover{border-color:var(--violet)}
.pubs{list-style:none; margin:0; padding:0; counter-reset:pub}
.pub{display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:0 1rem; padding:.85rem 0; border-bottom:1px solid var(--rule)}
.pub[hidden]{display:none}
.pub__year{color:var(--muted); font-size:1rem; padding-top:.1rem}
.pub__title{font-weight:500; display:block}
.pub__auth{font-size:1rem; color:var(--muted); display:block}
.pub__auth b{color:var(--ink); font-weight:600}
.pub__venue{font-size:1rem; font-style:italic}
.pub__links{font-size:.95rem; margin-left:.4rem}
.pub__links a{margin-right:.55rem}
.pub__tags{display:inline-flex; gap:.3rem; margin-left:.3rem; vertical-align:1px}
.pub__tags i{width:.5rem; height:.5rem; border-radius:50%; display:inline-block}
.t-pde{background:#2d1b6b}.t-mod{background:#8b2a8f}.t-ml{background:#d2546a}.t-q{background:#e39b2d}
.legend{display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; font-size:.92rem; color:var(--muted); margin:0}
.legend i{width:.55rem; height:.55rem; border-radius:50%; display:inline-block; margin-right:.35rem}

/* experience timeline — a real chronological sequence */
.timeline{list-style:none; margin:1.4rem 0 0; padding:0; border-left:1px solid var(--rule)}
.timeline li{position:relative; padding:0 0 1.5rem 1.6rem}
.timeline li::before{content:""; position:absolute; left:-5px; top:.55rem; width:9px; height:9px; border-radius:50%; background:var(--paper); border:2px solid var(--violet)}
.timeline li:first-child::before{background:var(--violet)}
.timeline .when{display:block; color:var(--muted); font-size:.98rem}
.timeline .what{font-weight:600}
.timeline .where{font-style:italic}
.timeline p{font-size:1.02rem; margin:.2rem 0 0; max-width:var(--measure)}

/* footer */
footer{max-width:var(--wide); margin:clamp(4rem,9vw,7rem) auto 0; padding:2rem 1rem 3rem; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; font-size:1rem}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .chapter__cols{grid-template-columns:minmax(0,1fr)}
  .about{grid-template-columns:minmax(0,1fr)}
  .about figure{max-width:13rem; order:-1}
}
@media (max-width: 640px){
  body{font-size:1.09rem}
  .chapter{grid-template-columns:minmax(0,1fr)}
  .chapter__num{margin-bottom:.2rem}
  .qgrid{grid-template-columns:minmax(0,1fr)}
  .facts li{grid-template-columns:minmax(0,1fr); gap:0}
  .pub{grid-template-columns:minmax(0,1fr)}
  .vocab thead{display:none}
  .vocab, .vocab tbody, .vocab tr, .vocab th, .vocab td{display:block; width:auto}
  .vocab tr{border-bottom:2px solid var(--rule); padding:.4rem 0}
  .vocab td, .vocab tbody th{border:0; padding:.3rem .2rem}
  .vocab td.empty{display:none}
  .vocab td::before{content:attr(data-field); display:block; font-size:.85rem; color:var(--muted)}
}
@media print{
  .hero canvas,.hero__toggle,.nav,.filters{display:none}
  .hero{min-height:auto; background:none; color:#000}
}