:root {
  --ink: #102033;
  --muted: #667384;
  --line: #dde4ea;
  --soft: #f6f8fa;
  --panel: rgba(255, 255, 255, 0.88);
  --accent: #2457d6;
  --sidebar: 250px;
  --control-panel: 430px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 8%, rgba(36, 87, 214, 0.055), transparent 28rem),
    #ffffff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a { color: inherit; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 36px 24px 24px;
  border-right: 1px solid var(--line);
  background: rgba(250, 251, 252, 0.92);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.identity .name {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 760;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.identity p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
}

.control-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--control-panel);
  padding: 36px 28px;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  z-index: 9;
}

.control-shell {
  width: 100%;
  margin: 0;
  padding: 18px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 18px 60px rgba(32, 47, 64, 0.08);
}

.control-kicker {
  margin: 2px 4px 8px;
  color: #8b96a2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

#cartpole {
  width: 100%;
  height: 460px;
  display: block;
  border-radius: 16px;
  cursor: crosshair;
  touch-action: manipulation;
}

.control-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

#modeLabel {
  color: var(--accent);
  font-weight: 700;
}

.control-hint {
  margin: 7px 0 0;
  color: #8a95a2;
  font-size: 0.7rem;
  line-height: 1.45;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.nav a {
  position: relative;
  padding: 9px 10px 9px 16px;
  border-radius: 9px;
  color: #5e6a78;
  font-size: 0.84rem;
  text-decoration: none;
  transition: 180ms ease;
}

.nav a::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b7c0ca;
  transform: translateY(-50%);
  transition: 180ms ease;
}

.nav a:hover,
.nav a.active {
  color: var(--ink);
  background: #eef2f6;
}

.nav a.active::before {
  height: 18px;
  border-radius: 4px;
  background: var(--accent);
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  gap: 18px;
  font-size: 0.76rem;
  color: var(--muted);
}

.sidebar-footer a {
  text-decoration: none;
}

main {
  margin-left: var(--sidebar);
  margin-right: var(--control-panel);
  overflow: hidden;
}

section {
  min-height: 92vh;
  padding: 110px clamp(40px, 6vw, 92px);
  border-bottom: 1px solid #edf0f3;
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1280px;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
}

h1, h2, h3 {
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(3rem, 5.2vw, 5.8rem);
  font-weight: 720;
}

h2 {
  max-width: 900px;
  margin: 0 0 22px;
  font-size: clamp(2.3rem, 4.6vw, 4.7rem);
  font-weight: 700;
}

h3 {
  margin: 10px 0 12px;
  font-size: 1.22rem;
  font-weight: 690;
}

.lede {
  max-width: 760px;
  margin: 34px 0 0;
  color: #4f5d6d;
  font-size: clamp(1.12rem, 1.7vw, 1.35rem);
}

.hero-note {
  max-width: 720px;
  margin-top: 65px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-note span {
  color: var(--ink);
  font-weight: 650;
}

.hero-note p {
  margin: 0;
}

.research {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.section-number {
  position: sticky;
  top: 50px;
  color: #b1bbc6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}

.section-copy {
  max-width: 1080px;
}

.question {
  max-width: 790px;
  margin: 0 0 48px;
  color: #586675;
  font-size: 1.08rem;
}

.paper-grid,
.dual-path {
  display: grid;
  gap: 16px;
}

.paper-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dual-path {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paper-card,
.path-card {
  min-height: 280px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 15px 45px rgba(32, 47, 64, 0.045);
}

.paper-card p,
.path-card p {
  color: #657282;
  font-size: 0.91rem;
}

.tag {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-flow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: #7a8795;
  font-size: 0.72rem;
}

.mini-flow b {
  color: #a8b1bc;
  font-weight: 500;
}

.publications,
.contact {
  max-width: 1180px;
}

.placeholder-panel {
  max-width: 850px;
  margin-top: 55px;
  padding: 36px;
  border: 1px dashed #b9c4cf;
  border-radius: 22px;
  background: var(--soft);
}

.placeholder-panel span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.placeholder-panel strong {
  display: block;
  font-size: 1.4rem;
}

.placeholder-panel p {
  margin-bottom: 0;
  color: var(--muted);
}

footer {
  margin-left: 0;
  padding: 28px clamp(48px, 8vw, 120px);
  display: flex;
  justify-content: space-between;
  color: #8b96a2;
  font-size: 0.78rem;
}

@media (max-width: 1280px) {
  :root {
    --sidebar: 225px;
    --control-panel: 350px;
  }

  .sidebar {
    padding-inline: 20px;
  }

  #cartpole {
    height: 390px;
  }

  .paper-grid {
    grid-template-columns: 1fr;
  }

  .dual-path {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  :root {
    --sidebar: 210px;
    --control-panel: 315px;
  }

  .sidebar {
    padding-inline: 18px;
  }

  .control-panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--control-panel);
    margin-left: 0;
    padding: 24px 18px;
    border-left: 1px solid var(--line);
    background:
      linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.92));
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
  }

  .control-shell {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #cartpole {
    height: 390px;
  }

  main {
    margin-left: var(--sidebar);
    margin-right: var(--control-panel);
  }

  section {
    padding-inline: 34px;
  }

  h1 {
    font-size: clamp(2.8rem, 5vw, 4.6rem);
  }

  h2 {
    font-size: clamp(2.15rem, 4.2vw, 3.7rem);
  }
}

@media (max-width: 760px) {
  body { display: block; }

  .sidebar {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 24px 20px 18px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .identity {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
  }

  .nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-top: 22px;
  }

  .nav a {
    flex: 0 0 auto;
  }

  .sidebar-footer {
    display: none;
  }

  .control-panel {
    position: relative;
    inset: auto;
    width: 100%;
    margin-left: 0;
    padding: 18px 16px 0;
    border-left: none;
    background: transparent;
    backdrop-filter: none;
  }

  .control-shell {
    max-width: none;
  }

  #cartpole {
    height: 320px;
  }

  main {
    margin-left: 0;
  }

  section {
    min-height: auto;
    padding: 80px 24px;
  }

  .hero {
    min-height: 78vh;
  }

  .research {
    grid-template-columns: 1fr;
  }

  .section-number {
    position: static;
  }

  .hero-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  footer {
    padding: 24px;
    flex-direction: column;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}


/* Academic publication presentation */
.publication-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

.publication-entry {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 25px 0 27px;
  border-bottom: 1px solid var(--line);
}

.publication-index {
  padding-top: 3px;
  color: #9aa5b1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}

.publication-body h3 {
  max-width: 780px;
  margin: 8px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.26rem;
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: -0.012em;
}

.authors,
.venue,
.contribution {
  max-width: 790px;
}

.authors {
  margin: 0 0 3px;
  color: #364657;
  font-size: 0.87rem;
}

.venue {
  margin: 0 0 11px;
  color: #768391;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.84rem;
  font-style: italic;
}

.contribution {
  margin: 0;
  color: #657282;
  font-size: 0.88rem;
  line-height: 1.62;
}

.paper-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 11px;
}

.paper-links a {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 650;
  text-decoration: none;
}

.paper-links a:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .publication-entry {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }
}


.controller-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #edf0f3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}

.controller-label span {
  color: #9aa5b1;
  text-transform: uppercase;
}

.controller-label strong {
  color: #4d5b69;
  font-weight: 650;
  text-align: right;
}


/* Venue badges: subtle color coding for fast academic scanning */
.venue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 7px 0 12px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
}

.venue-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  line-height: 1.2;
}

.venue-detail {
  color: #74808d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.84rem;
  font-style: italic;
}

.venue-cdc {
  color: #1f4fa3;
  background: #edf4ff;
  border-color: #c9daf8;
}

.venue-l4dc {
  color: #08766f;
  background: #eaf8f6;
  border-color: #bfe5df;
}

.venue-neurips {
  color: #6741a5;
  background: #f3effb;
  border-color: #d9cef2;
}

.venue-iclr {
  color: #9a5c00;
  background: #fff6e5;
  border-color: #efd59f;
}

.venue-preprint {
  color: #5f6b77;
  background: #f2f4f6;
  border-color: #d8dee4;
}


/* Compact academic bibliography */
.bibliography-list {
  max-width: 900px;
  border-top: 1px solid var(--line);
}

.bibliography-entry {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0 21px;
  border-bottom: 1px solid var(--line);
}

.bibliography-entry h3 {
  max-width: 790px;
  margin: 0 0 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
}

.bibliography-entry .authors {
  margin-bottom: 2px;
  font-size: 0.84rem;
}

.bibliography-entry .venue {
  margin: 6px 0 0;
}

.bibliography-entry .paper-links {
  margin-top: 7px;
}

.venue-saes {
  color: #8a4f00;
  background: #fff1e2;
  border-color: #efc996;
}

@media (max-width: 760px) {
  .bibliography-entry {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }
}


/* Education: conventional academic presentation, interactive system on the right */
.education {
  max-width: 1180px;
}

.education-intro {
  max-width: 760px;
  margin: 0 0 42px;
  color: #586675;
  font-size: 1.03rem;
}

.education-list {
  max-width: 850px;
  border-top: 1px solid var(--line);
}

.education-entry {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 30px;
  padding: 31px 0 33px;
  border-bottom: 1px solid var(--line);
}

.education-years {
  padding-top: 5px;
  color: #8b96a2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.education-body h3 {
  margin: 0 0 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.education-degree {
  margin: 0 0 3px;
  color: #334456;
  font-size: 0.92rem;
  font-weight: 620;
}

.education-meta {
  margin: 0;
  color: #788491;
  font-size: 0.83rem;
}

.education-note {
  max-width: 850px;
  margin: 18px 0 0;
  color: #929ca7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
}

@media (max-width: 760px) {
  .education-entry {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 25px 0 27px;
  }
}


/* Academic CV page */
.cv-main section {
  min-height: auto;
  padding-top: 72px;
  padding-bottom: 72px;
}

.cv-hero {
  padding-top: 105px !important;
  padding-bottom: 80px !important;
}

.cv-hero h1 {
  max-width: 820px;
  font-size: clamp(3rem, 5vw, 5.2rem);
}

.cv-summary {
  max-width: 760px;
  margin: 26px 0 0;
  color: #536171;
  font-size: 1.02rem;
}

.cv-section {
  max-width: 1020px;
}

.cv-section h2 {
  margin-bottom: 30px;
  font-size: clamp(2rem, 3.5vw, 3.35rem);
}

.cv-list {
  max-width: 900px;
  border-top: 1px solid var(--line);
}

.cv-entry {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 28px;
  padding: 27px 0 29px;
  border-bottom: 1px solid var(--line);
}

.cv-date {
  padding-top: 4px;
  color: #8a95a1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
}

.cv-entry h3 {
  margin: 0 0 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.cv-role {
  margin: 0 0 4px;
  color: #344456;
  font-size: 0.91rem;
  font-weight: 650;
}

.cv-meta {
  margin: 0 0 8px;
  color: #768290;
  font-size: 0.83rem;
}

.cv-detail {
  max-width: 760px;
  margin: 0;
  color: #606e7d;
  font-size: 0.86rem;
  line-height: 1.6;
}

.cv-detail + .cv-detail {
  margin-top: 4px;
}

.cv-nav-active {
  color: var(--ink) !important;
  background: #eef2f6;
}

.cv-nav-active::before {
  height: 18px !important;
  border-radius: 4px !important;
  background: var(--accent) !important;
}

.cv-page .control-hint {
  max-width: 320px;
}

@media (max-width: 760px) {
  .cv-entry {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 23px 0 25px;
  }

  .cv-main section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .cv-hero {
    padding-top: 72px !important;
  }
}


/* Academic identity and homepage introduction */
.profile-photo {
  display: block;
  width: 138px;
  height: 138px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.88) contrast(.98);
}

.academic-bio {
  max-width: 820px;
  margin: 30px 0 0;
  color: #4d5b6a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04rem;
  line-height: 1.85;
}

.academic-bio strong {
  color: var(--ink);
  font-weight: 600;
}

.academic-bio a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(36, 87, 214, .22);
}

.academic-bio a:hover {
  border-bottom-color: var(--accent);
}

.home-research-interests {
  max-width: 900px;
  margin-top: 52px;
  padding-top: 31px;
  border-top: 1px solid var(--line);
}

.home-research-interests .eyebrow {
  margin-bottom: 13px;
}

.home-research-interests h2 {
  max-width: 850px;
  margin-bottom: 17px;
  font-size: clamp(2rem, 3.4vw, 3.5rem);
}

.home-research-interests .lede {
  margin-top: 0;
  max-width: 800px;
  font-size: 1.03rem;
}

@media (max-width: 980px) {
  .profile-photo {
    width: 118px;
    height: 118px;
  }
}

@media (max-width: 760px) {
  .identity {
    align-items: center;
  }

  .profile-photo {
    width: 76px;
    height: 76px;
    margin: 0 14px 0 0;
    border-radius: 16px;
    flex: 0 0 auto;
  }

  .academic-bio {
    font-size: .98rem;
    line-height: 1.72;
  }

  .home-research-interests {
    margin-top: 40px;
    padding-top: 25px;
  }
}


/* Compact homepage profile links and research-interest block */
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 650;
}

.profile-links a {
  color: #526171;
  text-decoration: none;
  border-bottom: 1px solid #d8dfe6;
  padding-bottom: 1px;
}

.profile-links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.home-research-interests {
  max-width: 820px;
  margin-top: 34px;
  padding-top: 24px;
}

.home-research-interests .eyebrow {
  margin-bottom: 9px;
  font-size: 0.67rem;
}

.home-research-interests h2 {
  max-width: 760px;
  margin: 0 0 11px;
  font-size: clamp(1.55rem, 2.25vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.home-research-interests .lede {
  max-width: 760px;
  margin: 0;
  color: #5b6876;
  font-size: 0.94rem;
  line-height: 1.7;
}

.interactive-caption {
  max-width: 760px;
  margin: 22px 0 0;
  color: #8b96a2;
  font-size: 0.76rem;
  line-height: 1.55;
}

.interactive-caption span {
  color: #586675;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .profile-links {
    gap: 10px 15px;
  }

  .home-research-interests {
    margin-top: 30px;
    padding-top: 21px;
  }

  .home-research-interests h2 {
    font-size: 1.5rem;
  }
}


/* Collaborators globe page */
.collab-main {
  margin-left: var(--sidebar);
  margin-right: 0;
  overflow: hidden;
}
.collab-hero {
  min-height: auto;
  padding-top: 100px;
  padding-bottom: 34px;
}
.collab-hero h1 {
  max-width: 900px;
  font-size: clamp(3rem, 5vw, 5.2rem);
}
.collab-intro {
  max-width: 760px;
  margin: 24px 0 0;
  color: #566473;
  font-size: 1rem;
}
.globe-section {
  min-height: auto;
  padding-top: 24px;
  padding-bottom: 70px;
}
.globe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 36px;
  align-items: center;
  max-width: 1220px;
}
.globe-stage {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(248,250,252,.74);
}
#collabGlobe {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-height: 690px;
  cursor: grab;
  touch-action: none;
}
#collabGlobe:active { cursor: grabbing; }
.globe-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 0 8px 4px;
  color: #8a95a1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .67rem;
}
.globe-controls button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #536171;
  padding: 7px 11px;
  font: inherit;
  cursor: pointer;
}
.collab-detail-kicker {
  color: #9aa5b1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.collab-detail h2 {
  margin: 10px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.025em;
}
.collab-affiliation {
  margin: 0 0 14px;
  color: #74808d;
  font-size: .86rem;
}
.collab-area {
  margin: 0;
  color: #586675;
  font-size: .92rem;
  line-height: 1.65;
}
.collab-city {
  display: inline-flex;
  margin-top: 18px;
  padding: 5px 9px;
  border: 1px solid #d8e0e7;
  border-radius: 999px;
  color: #667483;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .66rem;
}
.collab-roster-section {
  min-height: auto;
  padding-top: 70px;
  padding-bottom: 90px;
}
.collab-roster {
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.collab-person {
  appearance: none;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 10px;
  width: 100%;
  padding: 18px 18px 19px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.collab-person:nth-child(odd) {
  border-right: 1px solid var(--line);
  padding-right: 26px;
}
.collab-person:nth-child(even) {
  padding-left: 26px;
}
.collab-dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(36,87,214,.08);
}
.collab-person h3 {
  margin: 0 0 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.006em;
}
.collab-person p {
  margin: 0;
  color: #77838f;
  font-size: .78rem;
  line-height: 1.45;
}
.collab-nav-active {
  color: var(--ink) !important;
  background: #eef2f6;
}
.collab-nav-active::before {
  height: 18px !important;
  border-radius: 4px !important;
  background: var(--accent) !important;
}
@media (max-width: 980px) {
  .globe-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .collab-main { margin-left: 0; }
  .collab-hero { padding-top: 68px; }
  .globe-section { padding-inline: 18px; }
  .collab-roster { grid-template-columns: 1fr; }
  .collab-person,
  .collab-person:nth-child(odd),
  .collab-person:nth-child(even) {
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}


/* Collaborator grouping + globe labels */
.collab-roster {
  display: block;
  max-width: 1050px;
  border-top: 0;
}

.collab-group {
  margin: 0 0 38px;
}

.collab-group-title {
  margin: 0 0 12px;
  color: #536171;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.collab-group-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  border-top: 1px solid var(--line);
}

.collab-group-list .collab-person {
  align-items: start;
}

.collab-person.selected {
  background: rgba(36,87,214,.035);
}

.collab-person-name,
.collab-person-affiliation,
.collab-person-papers {
  display: block;
}

.collab-person-name {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.collab-person-affiliation {
  margin-top: 3px;
  color: #74808d;
  font-size: .76rem;
  line-height: 1.45;
}

.collab-person-papers {
  margin-top: 5px;
  color: #9aa5b1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .66rem;
}

@media (max-width: 760px) {
  .collab-group-list {
    grid-template-columns: 1fr;
  }
}


/* Globe zoom controls + academic journey */
.globe-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.globe-actions button {
  min-width: 34px;
  min-height: 34px;
}

#zoomReadout {
  min-width: 46px;
  text-align: center;
  color: #647281;
}

.journey-strip {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  margin: 14px 8px 2px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.journey-strip > div {
  min-width: 0;
}

.journey-strip strong {
  display: block;
  color: #b87333;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .65rem;
  letter-spacing: .08em;
}

.journey-strip span {
  display: block;
  margin-top: 1px;
  color: #27394c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .92rem;
  font-weight: 600;
}

.journey-strip small {
  display: block;
  margin-top: 2px;
  color: #84909c;
  font-size: .66rem;
  line-height: 1.35;
}

.journey-strip i {
  color: #c68b55;
  font-style: normal;
  font-size: .9rem;
}

@media (max-width: 760px) {
  .globe-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .globe-actions {
    justify-content: flex-start;
  }

  .journey-strip {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .journey-strip i {
    transform: rotate(90deg);
    transform-origin: left center;
  }
}


/* Site-wide dark mode */
.theme-control {
  margin-top: 14px;
}

.theme-toggle {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.5);
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  text-align: left;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--ink);
  background: var(--soft);
}

.theme-toggle-icon {
  color: var(--accent);
  font-size: .95rem;
  line-height: 1;
}

.theme-toggle-track {
  width: 30px;
  height: 17px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #e9eef3;
}

.theme-toggle-track span {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #778594;
  transform: translateX(0);
}

html[data-theme="dark"] {
  --ink: #e8eef5;
  --muted: #98a7b7;
  --line: #283746;
  --soft: #141d27;
  --panel: rgba(17, 25, 35, .9);
  --accent: #7d9fff;
  color-scheme: dark;
}

html.theme-transition-ready,
html.theme-transition-ready body,
html.theme-transition-ready .sidebar,
html.theme-transition-ready .control-panel,
html.theme-transition-ready .control-shell,
html.theme-transition-ready section,
html.theme-transition-ready .globe-stage,
html.theme-transition-ready .theme-toggle {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

html[data-theme="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 8%, rgba(82, 118, 225, .11), transparent 30rem),
    #0b1118;
}

html[data-theme="dark"] .sidebar {
  background: rgba(12, 18, 25, .94);
}

html[data-theme="dark"] .control-panel {
  background:
    linear-gradient(180deg, rgba(13, 20, 28, .96), rgba(10, 16, 23, .93));
}

html[data-theme="dark"] .control-shell {
  background: rgba(17, 25, 35, .88);
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
}

html[data-theme="dark"] section {
  border-bottom-color: #18232e;
}

html[data-theme="dark"] .nav a {
  color: #9aa9b8;
}

html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a.active,
html[data-theme="dark"] .cv-nav-active,
html[data-theme="dark"] .collab-nav-active {
  color: var(--ink) !important;
  background: #172230;
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(18,27,37,.82);
  color: #a8b6c5;
}

html[data-theme="dark"] .theme-toggle:hover {
  background: #172230;
  color: var(--ink);
}

html[data-theme="dark"] .theme-toggle-track {
  background: #223247;
  border-color: #34495c;
}

html[data-theme="dark"] .theme-toggle-track span {
  background: #8fa8ff;
  transform: translateX(13px);
}

.theme-toggle-track span {
  transition: transform 180ms ease, background-color 180ms ease;
}

html[data-theme="dark"] .academic-bio,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .question,
html[data-theme="dark"] .contribution,
html[data-theme="dark"] .cv-summary,
html[data-theme="dark"] .cv-detail,
html[data-theme="dark"] .collab-intro,
html[data-theme="dark"] .collab-area {
  color: #aab7c4;
}

html[data-theme="dark"] .academic-bio strong,
html[data-theme="dark"] .education-degree,
html[data-theme="dark"] .cv-role,
html[data-theme="dark"] .journey-strip span,
html[data-theme="dark"] .collab-person-name {
  color: #edf3f8;
}

html[data-theme="dark"] .authors {
  color: #c2ccd6;
}

html[data-theme="dark"] .venue-detail,
html[data-theme="dark"] .cv-meta,
html[data-theme="dark"] .education-meta,
html[data-theme="dark"] .collab-affiliation,
html[data-theme="dark"] .collab-person-affiliation {
  color: #8797a8;
}

html[data-theme="dark"] .profile-links a {
  color: #9daebe;
  border-bottom-color: #344453;
}

html[data-theme="dark"] .profile-links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

html[data-theme="dark"] .interactive-caption,
html[data-theme="dark"] .control-hint,
html[data-theme="dark"] .control-kicker,
html[data-theme="dark"] .section-number,
html[data-theme="dark"] .publication-index,
html[data-theme="dark"] footer {
  color: #78899b;
}

html[data-theme="dark"] .controller-label {
  border-top-color: #24313e;
}

html[data-theme="dark"] .controller-label span {
  color: #758698;
}

html[data-theme="dark"] .controller-label strong {
  color: #b2c0cd;
}

html[data-theme="dark"] .paper-card,
html[data-theme="dark"] .path-card {
  background: rgba(18, 27, 37, .72);
  box-shadow: 0 15px 45px rgba(0,0,0,.12);
}

html[data-theme="dark"] .venue-cdc {
  color: #a9c5ff;
  background: #14233b;
  border-color: #29466f;
}

html[data-theme="dark"] .venue-l4dc {
  color: #8fd9d0;
  background: #102c2a;
  border-color: #26514d;
}

html[data-theme="dark"] .venue-neurips {
  color: #c4adf1;
  background: #251c38;
  border-color: #473666;
}

html[data-theme="dark"] .venue-iclr {
  color: #e7bf79;
  background: #342913;
  border-color: #64502a;
}

html[data-theme="dark"] .venue-preprint {
  color: #b4c0cb;
  background: #1c2630;
  border-color: #36434f;
}

html[data-theme="dark"] .venue-saes {
  color: #e4b07a;
  background: #352416;
  border-color: #65472e;
}

html[data-theme="dark"] .globe-stage {
  background:
    radial-gradient(circle at 34% 28%, rgba(125,159,255,.06), transparent 42%),
    rgba(15,23,32,.78);
}

html[data-theme="dark"] .globe-controls button {
  background: #151f2a;
  color: #aebbc7;
  border-color: #314150;
}

html[data-theme="dark"] .collab-city {
  color: #a3b2c0;
  border-color: #334452;
}

html[data-theme="dark"] .collab-person.selected {
  background: rgba(125,159,255,.06);
}

html[data-theme="dark"] .journey-strip {
  border-top-color: #2b3947;
}

html[data-theme="dark"] .journey-strip small,
html[data-theme="dark"] .collab-person-papers {
  color: #7e8e9e;
}

html[data-theme="dark"] .profile-photo {
  border-color: #334452;
  filter: saturate(.82) brightness(.9) contrast(1.03);
}

/* Cart-pole canvases are line art; this preserves contrast on a dark panel. */
html[data-theme="dark"] #cartpole {
  filter: invert(.9) hue-rotate(180deg) saturate(.82) brightness(1.08);
}

@media (max-width: 760px) {
  .theme-control {
    margin-top: 12px;
  }

  .theme-toggle {
    width: auto;
    min-width: 150px;
  }
}

html[data-theme="dark"] #collabGlobe {
  filter: brightness(.72) contrast(1.08) saturate(.9);
}


/* 2026-10-12 homepage: top navigation + right-hand news rail */
:root {
  --topbar-h: 76px;
  --news-rail: 365px;
}

body {
  padding-top: var(--topbar-h);
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  min-height: var(--topbar-h);
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
}

.topbar-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-photo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  object-fit: cover;
}

.topbar-name {
  display: block;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 760;
  line-height: 1.1;
  text-decoration: none;
}

.topbar-identity span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .67rem;
  white-space: nowrap;
}

.topnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.topnav a {
  padding: 7px 9px;
  border-radius: 8px;
  color: #5e6a78;
  font-size: .72rem;
  font-weight: 610;
  text-decoration: none;
  white-space: nowrap;
  transition: 150ms ease;
}

.topnav a:hover,
.topnav a.active {
  color: var(--ink);
  background: #eef2f6;
}

.topbar-actions {
  display: flex;
  gap: 12px;
  white-space: nowrap;
}

.topbar-actions a {
  color: var(--muted);
  font-size: .68rem;
  text-decoration: none;
}

.news-rail {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: var(--news-rail);
  z-index: 12;
  overflow-y: auto;
  padding: 20px 20px 26px;
  border-left: 1px solid var(--line);
  background: rgba(249,251,253,.95);
  backdrop-filter: blur(18px);
}

.mini-control-shell {
  padding: 13px 13px 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.mini-control-shell #cartpole {
  height: 205px;
}

.mini-control-shell .control-kicker {
  margin-bottom: 2px;
  font-size: .58rem;
}

.mini-control-shell .control-readout {
  font-size: .62rem;
}

.mini-control-shell .controller-label {
  font-size: .57rem;
}

.mini-control-shell .control-hint {
  margin-top: 6px;
  font-size: .62rem;
}

.news-panel {
  min-height: 0;
  padding: 29px 0 0;
  border-bottom: 0;
}

.news-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.news-heading .eyebrow {
  margin: 0 0 3px;
  font-size: .6rem;
}

.news-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.025em;
}

.news-live-dot {
  width: 7px;
  height: 7px;
  margin-top: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(36,87,214,.08);
}

.news-list {
  border-bottom: 1px solid var(--line);
}

.news-item {
  padding: 16px 1px 17px;
  border-bottom: 1px solid var(--line);
}

.news-item:last-child {
  border-bottom: 0;
}

.news-item time {
  display: block;
  margin-bottom: 5px;
  color: #98a3ae;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.news-item p {
  margin: 0;
  color: #586675;
  font-size: .78rem;
  line-height: 1.55;
}

.news-item strong {
  color: var(--ink);
  font-weight: 650;
}

main {
  margin-left: 0;
  margin-right: var(--news-rail);
}

section {
  scroll-margin-top: calc(var(--topbar-h) + 14px);
}

.hero,
.research,
.publications,
.contact {
  max-width: 1220px;
}

html[data-theme="dark"] .topbar {
  background: rgba(11,17,24,.95);
}

html[data-theme="dark"] .topnav a {
  color: #9aa9b8;
}

html[data-theme="dark"] .topnav a:hover,
html[data-theme="dark"] .topnav a.active {
  color: var(--ink);
  background: #172230;
}

html[data-theme="dark"] .news-rail {
  background: rgba(12,18,25,.95);
}

html[data-theme="dark"] .news-item p {
  color: #aab7c4;
}

html[data-theme="dark"] .topbar-photo {
  border-color: #334452;
  filter: saturate(.82) brightness(.9) contrast(1.03);
}

@media (max-width: 1180px) {
  :root {
    --news-rail: 315px;
  }

  .topbar {
    grid-template-columns: auto 1fr;
    gap: 14px 20px;
  }

  .topnav {
    justify-content: flex-end;
    overflow-x: auto;
  }

  .topbar-actions {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --topbar-h: auto;
    --news-rail: 0px;
  }

  body {
    padding-top: 0;
  }

  .topbar {
    position: relative;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 13px 16px;
  }

  .topnav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .topbar-identity span {
    white-space: normal;
  }

  .news-rail {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    overflow: visible;
    padding: 18px 20px 28px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .mini-control-shell #cartpole {
    height: 260px;
  }

  .news-panel {
    max-width: none;
  }

  main {
    margin-right: 0;
  }

  section {
    scroll-margin-top: 10px;
  }
}


/* 2026-10-12 correction: News on LEFT, cart-pole restored on RIGHT */
:root {
  --news-rail: 342px;
  --control-panel: 430px;
}

.news-rail {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: auto;
  bottom: 0;
  width: var(--news-rail);
  z-index: 12;
  overflow-y: auto;
  padding: 25px 22px 30px;
  border-left: 0;
  border-right: 1px solid var(--line);
  background: rgba(249,251,253,.95);
  backdrop-filter: blur(18px);
}

.news-panel {
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

.control-panel {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  left: auto;
  width: var(--control-panel);
  padding: 28px;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(248,250,252,.94), rgba(255,255,255,.9));
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  z-index: 11;
}

.control-panel .control-shell {
  width: 100%;
  margin: 0;
  padding: 18px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 18px 60px rgba(32,47,64,.08);
}

.control-panel #cartpole {
  width: 100%;
  height: 460px;
  display: block;
}

main {
  margin-left: var(--news-rail);
  margin-right: var(--control-panel);
}

html[data-theme="dark"] .news-rail {
  background: rgba(12,18,25,.95);
}

html[data-theme="dark"] .control-panel {
  background:
    linear-gradient(180deg, rgba(13,20,28,.96), rgba(10,16,23,.93));
}

@media (max-width: 1380px) {
  :root {
    --news-rail: 294px;
    --control-panel: 350px;
  }

  .news-rail {
    padding-inline: 18px;
  }

  .control-panel {
    padding: 22px 18px;
  }

  .control-panel #cartpole {
    height: 390px;
  }
}

@media (max-width: 1080px) {
  :root {
    --news-rail: 264px;
    --control-panel: 315px;
  }

  .news-item p {
    font-size: .73rem;
  }

  .control-panel #cartpole {
    height: 360px;
  }
}

@media (max-width: 900px) {
  :root {
    --news-rail: 0px;
    --control-panel: 0px;
  }

  .news-rail {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    overflow: visible;
    padding: 22px 20px 26px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .control-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    padding: 18px 16px 0;
    border-left: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .control-panel #cartpole {
    height: 320px;
  }

  main {
    margin-left: 0;
    margin-right: 0;
  }
}


/* Compact dark-mode toggle in the homepage top bar */
.topbar .theme-control-topbar {
  margin: 0 0 0 2px;
}

.topbar .theme-toggle {
  width: auto;
  min-width: 0;
  min-height: 34px;
  grid-template-columns: 16px auto;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 9px;
  background: transparent;
  font-size: .68rem;
  white-space: nowrap;
}

.topbar .theme-toggle-track {
  display: none;
}

.topbar .theme-toggle-icon {
  font-size: .9rem;
}

.topbar .theme-toggle-label {
  line-height: 1;
}

html[data-theme="dark"] .topbar .theme-toggle {
  background: transparent;
}

html[data-theme="dark"] .topbar .theme-toggle:hover,
.topbar .theme-toggle:hover {
  background: var(--soft);
}

@media (max-width: 1180px) {
  .topbar-actions {
    display: flex;
  }

  .topbar-actions > a {
    display: none;
  }

  .topbar .theme-toggle-label {
    display: none;
  }

  .topbar .theme-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
  }
}

@media (max-width: 900px) {
  .topbar-actions {
    position: absolute;
    top: 16px;
    right: 16px;
  }
}


/* News rail refresh: reuse publication venue language */
.news-heading {
  padding-bottom: 16px;
}

.news-list {
  position: relative;
  border-bottom: 0;
}

.news-item {
  position: relative;
  padding: 18px 0 19px 14px;
  border-bottom: 1px solid var(--line);
}

.news-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9c3cd;
}

.news-item:first-child::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(36,87,214,.08);
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 8px;
}

.news-item time {
  margin: 0;
  color: #98a3ae;
  font-size: .6rem;
  letter-spacing: .045em;
}

.news-item .venue-badge {
  min-height: 19px;
  padding: 1px 7px;
  font-size: .6rem;
  letter-spacing: .045em;
}

.news-item p {
  margin: 0;
  color: #5c6977;
  font-size: .78rem;
  line-height: 1.58;
}

.news-item strong {
  color: var(--ink);
  font-weight: 650;
}

@media (hover:hover) and (pointer:fine) {
  .news-item {
    transition: background-color 150ms ease, padding-left 150ms ease;
  }

  .news-item:hover {
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 22px;
    padding-right: 8px;
    background: rgba(36,87,214,.025);
  }

  .news-item:hover::before {
    left: 8px;
  }
}

html[data-theme="dark"] .news-item p {
  color: #aab7c4;
}

html[data-theme="dark"] .news-item::before {
  background: #526274;
}

html[data-theme="dark"] .news-item:first-child::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(125,159,255,.09);
}

@media (hover:hover) and (pointer:fine) {
  html[data-theme="dark"] .news-item:hover {
    background: rgba(125,159,255,.035);
  }
}


/* Additional news badge families */
.venue-ojcs {
  color: #31536f;
  background: #edf3f7;
  border-color: #cbd9e3;
}

.venue-talk {
  color: #8b4c74;
  background: #faeef6;
  border-color: #e8c9dc;
}

.venue-utsw {
  color: #8f401f;
  background: #fff0e9;
  border-color: #efc8b5;
}

.venue-fds {
  color: #376944;
  background: #edf7ef;
  border-color: #c9e1ce;
}

.venue-milestone {
  color: #5b5f66;
  background: #f1f2f4;
  border-color: #d7d9dd;
}

html[data-theme="dark"] .venue-ojcs {
  color: #a8c7df;
  background: #182938;
  border-color: #35516a;
}

html[data-theme="dark"] .venue-talk {
  color: #e0a8ca;
  background: #321f2c;
  border-color: #62445a;
}

html[data-theme="dark"] .venue-utsw {
  color: #e6ad8c;
  background: #382116;
  border-color: #68422f;
}

html[data-theme="dark"] .venue-fds {
  color: #a9d6b2;
  background: #182d1d;
  border-color: #36573d;
}

html[data-theme="dark"] .venue-milestone {
  color: #bdc3ca;
  background: #20242a;
  border-color: #3b4148;
}


/* Academic timeline badge additions */
.venue-acc {
  color: #7a4b00;
  background: #fff5df;
  border-color: #ead19c;
}

.venue-nescw {
  color: #245d67;
  background: #eaf6f7;
  border-color: #bcdde0;
}

.venue-columbia {
  color: #315f98;
  background: #eef5ff;
  border-color: #c8d9ee;
}

.venue-waterloo {
  color: #7a6515;
  background: #fff9df;
  border-color: #e7d995;
}

html[data-theme="dark"] .venue-acc {
  color: #e4be75;
  background: #332811;
  border-color: #604d28;
}

html[data-theme="dark"] .venue-nescw {
  color: #9cd2d9;
  background: #152b2f;
  border-color: #31545a;
}

html[data-theme="dark"] .venue-columbia {
  color: #a8c6e8;
  background: #18283b;
  border-color: #334f70;
}

html[data-theme="dark"] .venue-waterloo {
  color: #e3d38a;
  background: #332f16;
  border-color: #60572b;
}


.equal-contribution {
  margin: 2px 0 7px;
  color: #8a95a1;
  font-size: .72rem;
  font-style: italic;
}

html[data-theme="dark"] .equal-contribution {
  color: #7f8f9f;
}


/* Refined academic About — portrait belongs to the biography, not the navigation */
.about-hero {
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(52px, 6vh, 84px);
  padding-bottom: clamp(60px, 7vh, 92px);
}

.about-profile-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 30px);
  padding-bottom: 27px;
  border-bottom: 1px solid var(--line);
}

.about-profile-photo {
  display: block;
  width: clamp(112px, 10vw, 150px);
  height: auto;
  aspect-ratio: 4 / 5;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(31, 46, 65, 0.07);
  filter: saturate(.9) contrast(1.01);
}

.about-profile-intro {
  min-width: 0;
}

.about-profile-intro .eyebrow {
  margin: 0 0 11px;
  font-size: .65rem;
}

.about-profile-intro h1 {
  max-width: 100%;
  margin: 0 0 13px;
  font-size: clamp(2.15rem, 3vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 720;
}

.about-role {
  margin: 0;
  color: var(--ink);
  font-size: clamp(.84rem, 1.04vw, 1rem);
  font-weight: 620;
  line-height: 1.45;
}

.about-affiliation {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .8rem;
}

.about-biography {
  max-width: 790px;
  padding-top: 25px;
}

.about-hero .academic-bio {
  max-width: 790px;
  margin: 0;
  color: #536171;
  font-size: clamp(.91rem, .98vw, 1rem);
  line-height: 1.76;
  letter-spacing: -.003em;
}

.about-hero .academic-bio + .academic-bio {
  margin-top: 15px;
}

.about-hero .profile-links {
  margin-top: 23px;
  gap: 8px;
}

.about-hero .profile-links a {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: #556576;
  font-size: .67rem;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.about-hero .profile-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--soft);
}

.about-hero .home-research-interests {
  max-width: 790px;
  margin-top: 34px;
  padding-top: 25px;
}

.about-hero .home-research-interests .eyebrow {
  margin-bottom: 8px;
}

.about-hero .home-research-interests h2 {
  max-width: 740px;
  margin: 0 0 12px;
  font-size: clamp(1.42rem, 2vw, 1.95rem);
  font-weight: 660;
  line-height: 1.27;
}

.about-hero .home-research-interests .lede {
  max-width: 760px;
  margin: 0;
  font-size: .91rem;
  line-height: 1.7;
}

.about-hero .interactive-caption {
  margin-top: 24px;
  font-size: .7rem;
}

html[data-theme="dark"] .about-hero .academic-bio,
html[data-theme="dark"] .about-hero .home-research-interests .lede {
  color: #aab7c4;
}

html[data-theme="dark"] .about-hero .profile-links a {
  color: #a5b6c7;
  border-color: var(--line);
}

html[data-theme="dark"] .about-hero .profile-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

html[data-theme="dark"] .about-profile-photo {
  filter: saturate(.86) brightness(.92) contrast(1.02);
  box-shadow: 0 8px 26px rgba(0,0,0,.2);
}

@media (max-width: 1160px) {
  .about-profile-head { gap: 17px; }
  .about-profile-photo { width: 104px; }
  .about-profile-intro h1 { font-size: clamp(1.92rem, 3vw, 2.45rem); }
  .about-role { font-size: .82rem; }
  .about-hero .academic-bio { font-size: .9rem; }
}

@media (max-width: 900px) {
  .about-hero { min-height: auto; padding-top: 70px; }
  .about-profile-photo { width: 128px; }
  .about-profile-intro h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
}

@media (max-width: 520px) {
  .about-profile-photo { width: 100px; border-radius: 12px; }
  .about-profile-head { gap: 15px; padding-bottom: 22px; }
  .about-profile-intro h1 { font-size: clamp(1.85rem, 7vw, 2.4rem); margin-bottom: 8px; }
  .about-role { font-size: .77rem; }
  .about-affiliation { font-size: .72rem; }
  .about-biography { padding-top: 20px; }
  .about-hero .academic-bio { font-size: .91rem; line-height: 1.72; }
}


/* Compact research identity; site links for ConicFlow */
.about-hero .home-research-interests {
  margin-top: 27px;
  padding-top: 19px;
}
.about-hero .home-research-interests .eyebrow {
  margin: 0 0 9px;
}
.about-hero .research-summary {
  max-width: 730px;
  margin: 0;
  color: #495c6f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.95rem, 1.04vw, 1.07rem);
  font-weight: 400;
  line-height: 1.7;
}
.project-paper-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
.project-paper-links .project-site-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.project-paper-links .project-site-link:hover {
  border-color: var(--accent);
  background: var(--panel);
  text-decoration: none;
}
.project-link-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.project-link-arrow {
  padding-left: 2px;
  font-size: .8rem;
}
html[data-theme="dark"] .about-hero .research-summary {
  color: #bfccd9;
}
html[data-theme="dark"] .project-paper-links .project-site-link {
  border-color: #33485c;
  background: #172331;
  color: var(--accent);
}
html[data-theme="dark"] .project-paper-links .project-site-link:hover {
  border-color: var(--accent);
  background: #1b2a3c;
}
@media (max-width: 900px) {
  .about-hero .research-summary {
    font-size: .99rem;
  }
}


/* Research sections: no oversized chapter numbers or full-screen whitespace */
main > .research {
  display: block;
  min-height: 0;
  padding-top: clamp(38px, 4vw, 56px);
  padding-bottom: clamp(44px, 5vw, 72px);
}

main > .research .section-copy {
  max-width: 100%;
}

main > .research .eyebrow {
  margin-bottom: 12px;
  font-size: .65rem;
}

main > .research h2 {
  margin-bottom: 16px;
  font-size: clamp(1.72rem, 2.4vw, 2.55rem);
  font-weight: 690;
  line-height: 1.17;
}

main > .research .question {
  margin-bottom: 25px;
  color: #586675;
  font-size: clamp(.89rem, 1vw, 1.02rem);
  line-height: 1.67;
}

main > .research .publication-entry {
  padding-top: 20px;
  padding-bottom: 21px;
}

/* Put the first research section closer to the About introduction. */
main > .about-hero {
  min-height: 0;
  justify-content: flex-start;
  padding-top: clamp(37px, 4vw, 55px);
  padding-bottom: 38px;
}

/* Apply a similar compact rhythm to the remaining homepage sections. */
main > .publications,
main > .contact {
  min-height: 0;
  padding-top: clamp(44px, 4.5vw, 65px);
  padding-bottom: clamp(48px, 5vw, 72px);
}

/* Keep the project website logo understated, and balance the About portrait. */
.project-paper-links .project-link-icon {
  width: 11px;
  height: 11px;
}
.project-paper-links .project-site-link {
  padding: 4px 7px;
  font-size: .67rem;
}
.about-profile-photo {
  width: clamp(100px, 8vw, 124px);
}

@media (max-width: 1160px) {
  .about-profile-photo {
    width: 102px;
  }
}
@media (max-width: 900px) {
  main > .research {
    padding-top: 42px;
    padding-bottom: 48px;
  }
  main > .about-hero {
    padding-top: 48px;
    padding-bottom: 35px;
  }
  main > .research h2 {
    font-size: clamp(1.68rem, 3.7vw, 2.15rem);
  }
  .about-profile-photo {
    width: 112px;
  }
}
@media (max-width: 520px) {
  main > .research {
    padding-top: 34px;
    padding-bottom: 42px;
  }
  main > .research h2 {
    font-size: 1.62rem;
  }
  main > .research .question {
    margin-bottom: 22px;
  }
  .about-profile-photo {
    width: 94px;
  }
}


/* Official GitHub code links share the project's subdued link vocabulary. */
.project-paper-links .project-code-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .67rem;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.project-paper-links .project-code-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
.project-paper-links .project-code-link .project-link-icon {
  width: 12px;
  height: 12px;
}
html[data-theme="dark"] .project-paper-links .project-code-link {
  color: #abbccc;
}
html[data-theme="dark"] .project-paper-links .project-code-link:hover {
  color: var(--accent);
}


/* 2026-10-18: restrained academic typography and responsive page hierarchy */

/* More readable center column on three-column desktop. */
main > .about-hero,
main > .research,
main > .publications,
main > .contact {
  padding-left: clamp(25px, 3.1vw, 48px);
  padding-right: clamp(25px, 3.1vw, 48px);
}

/* Research titles are labels for the work below, not large splash headlines. */
main > .research h2 {
  max-width: 800px;
  margin: 0 0 13px;
  font-size: clamp(1.47rem, 1.85vw, 1.9rem);
  font-weight: 660;
  line-height: 1.27;
  letter-spacing: -.028em;
}
main > .research .eyebrow {
  margin-bottom: 8px;
  font-size: .62rem;
  letter-spacing: .12em;
}
main > .research .question {
  max-width: 740px;
  margin-bottom: 22px;
  font-size: .9rem;
  line-height: 1.65;
}
main > .research .publication-body h3 {
  font-size: clamp(1.06rem, 1.14vw, 1.16rem);
  line-height: 1.34;
}
main > .research .publication-entry {
  gap: 11px;
  padding-top: 18px;
  padding-bottom: 19px;
}
main > .research .contribution,
main > .research .authors,
main > .research .venue {
  line-height: 1.58;
}

/* Publications and contact should inherit the same academic scale. */
main > .publications h2,
main > .contact h2 {
  font-size: clamp(1.65rem, 2vw, 2.12rem);
  line-height: 1.24;
  margin-bottom: 12px;
}
main > .publications .bibliography-entry h3 {
  font-size: clamp(1.03rem, 1.12vw, 1.16rem);
  line-height: 1.36;
}
main > .contact p:not(.eyebrow) {
  max-width: 590px;
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 13px;
}
main > .contact .contact-email {
  display: inline-flex;
  color: var(--accent);
  font-size: .89rem;
  font-weight: 650;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}
main > .contact .contact-email:hover {
  opacity: .8;
}

/* Keep navigation and dark-mode toggle in a single top row on tablets. */
@media (max-width: 1180px) and (min-width: 901px) {
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 36px;
    gap: 12px;
    padding-left: 18px;
    padding-right: 14px;
    min-height: 76px;
  }
  .topbar-identity {
    min-width: 0;
  }
  .topbar-identity span {
    font-size: .59rem;
  }
  .topnav {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
  }
  .topnav::-webkit-scrollbar {
    display: none;
  }
  .topnav a {
    padding: 7px 7px;
    flex: 0 0 auto;
    font-size: .68rem;
  }
  .topbar-actions {
    position: static;
    display: flex;
    align-items: center;
    grid-column: 3;
    grid-row: 1;
  }
}
@media (max-width: 1050px) and (min-width: 901px) {
  .topbar-identity span {
    display: none;
  }
}

/* The long news archive never blocks the About section on mobile. */
.news-toggle {
  display: none;
}

@media (max-width: 900px) {
  body {
    display: flex;
    flex-direction: column;
  }
  main {
    display: contents;
  }
  .topbar {
    order: 0;
    width: 100%;
  }
  #home { order: 1; }
  .news-rail { order: 2; }
  .control-panel { order: 3; }
  #control { order: 4; }
  #learned { order: 5; }
  #neural { order: 6; }
  #physical { order: 7; }
  #publications { order: 8; }
  #contact { order: 9; }
  main > footer { order: 10; }

  main > .about-hero,
  main > .research,
  main > .publications,
  main > .contact {
    padding-left: clamp(20px, 5vw, 38px);
    padding-right: clamp(20px, 5vw, 38px);
    width: 100%;
  }
  .news-rail {
    width: 100%;
  }
  .news-rail:not(.news-expanded) .news-list .news-item:nth-child(n+5) {
    display: none;
  }
  .news-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 14px;
    padding: 8px 0;
    color: var(--accent);
    border: 0;
    background: transparent;
    font: 650 .74rem Inter, ui-sans-serif, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  .news-toggle:hover {
    text-decoration: underline;
  }
  main > .research h2 {
    font-size: clamp(1.46rem, 3.1vw, 1.79rem);
  }
  main > .research .publication-body h3 {
    font-size: 1.12rem;
  }
}

@media (max-width: 520px) {
  main > .research h2 {
    font-size: 1.45rem;
  }
  main > .research .question {
    font-size: .91rem;
  }
}

/* Consistent quiet contrast in dark mode. */
html[data-theme="dark"] main > .research .question,
html[data-theme="dark"] main > .contact p:not(.eyebrow) {
  color: #aab7c4;
}


/* Consolidated research navigation: clear top-level IA with four accessible sub-areas */
.topnav {
  gap: 5px;
}
.topnav .research-menu {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}
.topnav .research-menu > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #5e6a78;
  font-size: .72rem;
  font-weight: 610;
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  outline-offset: 3px;
  transition: background-color 150ms ease, color 150ms ease;
}
.topnav .research-menu > summary::-webkit-details-marker {
  display: none;
}
.topnav .research-menu > summary svg {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  transition: transform 160ms ease;
}
.topnav .research-menu[open] > summary svg {
  transform: rotate(180deg);
}
.topnav .research-menu > summary:hover,
.topnav .research-menu[open] > summary,
.topnav .research-menu.active > summary {
  background: #eef2f6;
  color: var(--ink);
}
.topnav .research-subnav {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  width: 254px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(24, 39, 59, .13);
}
.topnav .research-subnav a {
  display: block;
  padding: 10px 11px;
  border-radius: 7px;
  font-size: .76rem;
  font-weight: 560;
  line-height: 1.35;
  white-space: normal;
}
.topnav .research-subnav a.active {
  color: var(--accent);
  background: var(--soft);
  font-weight: 700;
}
.topnav .topnav-external {
  font-size: .65rem;
  color: var(--muted);
  padding-left: 2px;
}
html[data-theme="dark"] .topnav .research-menu > summary {
  color: #9aa9b8;
}
html[data-theme="dark"] .topnav .research-menu > summary:hover,
html[data-theme="dark"] .topnav .research-menu[open] > summary,
html[data-theme="dark"] .topnav .research-menu.active > summary {
  color: var(--ink);
  background: #172230;
}
html[data-theme="dark"] .topnav .research-subnav {
  background: #111b27;
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
}
html[data-theme="dark"] .topnav .research-subnav a.active {
  color: var(--accent);
  background: #17283d;
}
@media (max-width: 1180px) {
  .topnav {
    overflow: visible;
  }
  .topnav .research-menu > summary {
    padding: 7px;
    font-size: .68rem;
  }
}
@media (max-width: 900px) {
  .topnav {
    overflow: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px 5px;
    padding-right: 38px;
  }
  .topnav .research-subnav {
    width: min(254px, calc(100vw - 92px));
  }
}


/* Collaborators now uses the same top navigation and restrained typography as the homepage. */
.collab-page {
  min-height: 100vh;
}
.collab-page .collab-main {
  width: min(100%, 1190px);
  margin: var(--topbar-h) auto 0;
  padding: 0;
  overflow: visible;
}
.collab-page .collab-main > section {
  min-height: 0;
  padding-left: clamp(24px, 4vw, 54px);
  padding-right: clamp(24px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
}
.collab-page .collab-hero {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: 23px;
}
.collab-page .collab-hero .eyebrow {
  margin-bottom: 11px;
  font-size: .64rem;
}
.collab-page .collab-hero h1 {
  max-width: 750px;
  margin: 0;
  font-size: clamp(2rem, 3.05vw, 3.05rem);
  font-weight: 700;
  line-height: 1.14;
}
.collab-page .collab-intro {
  max-width: 735px;
  margin: 13px 0 0;
  color: #536171;
  font-size: clamp(.9rem, 1vw, .98rem);
  line-height: 1.72;
}
.collab-page .globe-section {
  padding-top: 27px;
  padding-bottom: 39px;
}
.collab-page .globe-layout {
  max-width: none;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .68fr);
  gap: clamp(18px, 2.5vw, 30px);
  align-items: start;
}
.collab-page .globe-stage {
  border-radius: 17px;
  padding: 13px;
  background: var(--soft);
  box-shadow: none;
}
.collab-page #collabGlobe {
  max-height: 620px;
}
.collab-page .collab-detail {
  max-width: 100%;
}
.collab-page .globe-controls {
  flex-wrap: wrap;
  gap: 10px 16px;
}
.collab-page .collab-roster-section {
  padding-top: 33px;
  padding-bottom: 55px;
}
.collab-page .collab-roster-section > h2 {
  margin-bottom: 22px;
  font-size: clamp(1.65rem, 2.1vw, 2rem);
  line-height: 1.25;
}
.collab-page .collab-group {
  margin-bottom: 26px;
}
.collab-page .collab-group-title {
  font-size: .66rem;
  margin-bottom: 6px;
}
.collab-page .collab-person {
  padding-top: 15px;
  padding-bottom: 16px;
}
.collab-page .collab-person-name {
  font-size: .98rem;
}
.collab-page .topbar {
  width: 100%;
}
.collab-page .topnav .research-menu > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
html[data-theme="dark"] .collab-page .collab-intro {
  color: #aab7c4;
}
html[data-theme="dark"] .collab-page .globe-stage {
  background: #131e2b;
}
@media (max-width: 900px) {
  .collab-page {
    display: flex;
    flex-direction: column;
  }
  .collab-page .collab-main {
    display: block;
    order: 1;
    margin: 0 auto;
    overflow: visible;
  }
  .collab-page .globe-layout {
    grid-template-columns: 1fr;
  }
  .collab-page .collab-main > section {
    padding-left: clamp(18px, 5vw, 32px);
    padding-right: clamp(18px, 5vw, 32px);
  }
  .collab-page .collab-hero {
    padding-top: 34px;
    padding-bottom: 20px;
  }
  .collab-page .globe-section {
    padding-top: 20px;
    padding-bottom: 32px;
  }
}
@media (max-width: 520px) {
  .collab-page .collab-hero h1 {
    font-size: 1.91rem;
  }
  .collab-page .globe-stage {
    padding: 8px;
    border-radius: 13px;
  }
  .collab-page .collab-roster-section {
    padding-top: 29px;
    padding-bottom: 42px;
  }
}


/* Compact collaborator detail panel adjacent to the larger globe. */
.collab-page .collab-detail {
  border-left: 1px solid var(--line);
  padding: 14px 0 12px 24px;
  margin: 8px 0 0;
}
.collab-page .collab-detail h2 {
  font-size: clamp(1.56rem, 2.3vw, 2.07rem);
  line-height: 1.24;
  margin: 8px 0 11px;
}
.collab-page .collab-area {
  font-size: .86rem;
}
html[data-theme="dark"] .collab-page .collab-area {
  color: #aab7c4;
}
@media (max-width: 900px) {
  .collab-page .collab-detail {
    margin: 0;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}


/* Compact collaborator directory: names and institutions only.
   Full department affiliations and paper references live in the selection panel. */
.collab-page .collab-roster-section {
  padding-top: 27px;
  padding-bottom: 40px;
}
.collab-page .collab-roster-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 20px;
  margin-bottom: 17px;
}
.collab-page .collab-roster-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 1.85vw, 1.77rem);
  font-weight: 680;
  line-height: 1.25;
}
.collab-page .collab-roster-heading p {
  margin: 0;
  color: var(--muted);
  font-size: .73rem;
}
.collab-page .collab-roster {
  max-width: 100%;
}
.collab-page .collab-group {
  margin: 0 0 23px;
}
.collab-page .collab-group-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 730;
  letter-spacing: .095em;
}
.collab-page .collab-group-count {
  color: #a2acb8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .65rem;
  font-weight: 550;
  letter-spacing: 0;
}
.collab-page .collab-group-list {
  grid-template-columns: repeat(3,minmax(0,1fr));
  column-gap: 18px;
  border-top: 1px solid var(--line);
}
.collab-page .collab-group-list .collab-person,
.collab-page .collab-group-list .collab-person:nth-child(odd),
.collab-page .collab-group-list .collab-person:nth-child(even) {
  grid-template-columns: 8px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  min-height: 62px;
  margin: 0;
  padding: 10px 7px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
  transition: background-color 150ms ease;
}
.collab-page .collab-group-list .collab-person:hover,
.collab-page .collab-group-list .collab-person.selected {
  background: rgba(36,87,214,.045);
}
.collab-page .collab-group-list .collab-person:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.collab-page .collab-person .collab-dot {
  width: 6px;
  height: 6px;
  margin-top: 7px;
  background: #b7c2ce;
  box-shadow: none;
}
.collab-page .collab-person.selected .collab-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(36,87,214,.11);
}
.collab-page .collab-person-name {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .83rem;
  font-weight: 670;
  line-height: 1.3;
}
.collab-page .collab-person-affiliation {
  margin-top: 2px;
  color: #7c8996;
  font-size: .72rem;
  line-height: 1.35;
}
html[data-theme="dark"] .collab-page .collab-group-count {
  color: #8191a2;
}
html[data-theme="dark"] .collab-page .collab-group-list .collab-person:hover,
html[data-theme="dark"] .collab-page .collab-group-list .collab-person.selected {
  background: rgba(105,150,245,.10);
}
@media (max-width: 1000px) {
  .collab-page .collab-group-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 620px) {
  .collab-page .collab-roster-heading {
    display: block;
    margin-bottom: 14px;
  }
  .collab-page .collab-roster-heading p {
    margin-top: 5px;
  }
  .collab-page .collab-group-list {
    grid-template-columns: 1fr;
  }
  .collab-page .collab-group-list .collab-person,
  .collab-page .collab-group-list .collab-person:nth-child(odd),
  .collab-page .collab-group-list .collab-person:nth-child(even) {
    min-height: 55px;
  }
}


/* Reserve a blog tab without implying published posts or an active page. */
.topnav .topnav-coming-soon {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #8995a2;
  font-size: .72rem;
  font-weight: 610;
  line-height: 1.6;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.topnav .topnav-soon-note {
  font-size: .6rem;
  font-weight: 500;
  color: #9eabb6;
}
html[data-theme="dark"] .topnav .topnav-coming-soon {
  color: #758697;
}
html[data-theme="dark"] .topnav .topnav-soon-note {
  color: #687b8e;
}
@media (max-width: 1180px) and (min-width: 901px) {
  .topnav .topnav-coming-soon {
    padding: 7px 6px;
    font-size: .68rem;
  }
}
@media (max-width: 900px) {
  .topnav .topnav-coming-soon {
    padding: 7px 9px;
  }
}


/* Linkable, descriptive bibliography anchors used by collaborator profiles. */
.bibliography-entry[id] {
  scroll-margin-top: calc(var(--topbar-h) + 20px);
}
.bibliography-entry[id]:target {
  background: rgba(36,87,214,.045);
  outline: 1px solid rgba(36,87,214,.20);
  outline-offset: 7px;
  border-radius: 4px;
}
html[data-theme="dark"] .bibliography-entry[id]:target {
  background: rgba(100,145,233,.11);
  outline-color: rgba(100,145,233,.26);
}

/* Full paper titles appear only for the selected collaborator. */
.collab-page .collab-paper-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.collab-page .collab-papers-kicker {
  margin: 0 0 9px;
  color: var(--muted);
  font: 730 .62rem Inter, ui-sans-serif, sans-serif;
  letter-spacing: .09em;
}
.collab-page .collab-paper-list {
  margin: 0;
  padding: 0 4px 0 0;
  max-height: 325px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}
.collab-page .collab-paper-list li {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.collab-page .collab-paper-list li:last-child {
  border-bottom: none;
}
.collab-page .collab-paper-list a {
  display: block;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 540;
  line-height: 1.42;
  text-decoration: none;
}
.collab-page .collab-paper-list a:hover {
  text-decoration: underline;
}
.collab-page .collab-papers-status {
  margin: 0;
  font-size: .79rem;
  color: var(--muted);
}
.collab-page .collab-papers-status a {
  color: var(--accent);
  text-decoration: none;
}
@media (max-width: 900px) {
  .bibliography-entry[id] {
    scroll-margin-top: 18px;
  }
}