/* Zichen Ding — a research portfolio. No framework or external font dependency. */
:root {
  --bg: #f7f7f2;
  --surface: #fff;
  --surface-soft: #efefe8;
  --ink: #202820;
  --muted: #60695e;
  --line: #dddfd5;
  --accent: #355edc;
  --accent-soft: #e9edfc;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --header-bg: rgba(247, 247, 242, 0.94);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #151b18;
  --surface: #1c2420;
  --surface-soft: #202a24;
  --ink: #edf0e7;
  --muted: #abb5a8;
  --line: #354037;
  --accent: #9aafff;
  --accent-soft: #283453;
  --header-bg: rgba(21, 27, 24, 0.94);
  color-scheme: dark;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body,
button,
input,
select {
  font-family: var(--sans);
}
::selection {
  background: var(--accent);
  color: var(--bg);
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
summary,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button {
  color: inherit;
}
button:disabled {
  cursor: default;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
button {
  border: 0;
  background: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
}
svg {
  flex-shrink: 0;
}
em {
  font-family: var(--serif);
  font-weight: 400;
}
button,
.button,
a,
summary {
  touch-action: manipulation;
}
[hidden] {
  display: none !important;
}
.container {
  width: min(1200px, calc(100% - 112px));
  margin-inline: auto;
}
.section-pad {
  padding-block: 100px;
}
.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 24px;
  z-index: 100;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--bg);
}
.skip-link:focus {
  top: 16px;
}
.reading-progress {
  height: 2px;
  background: var(--accent);
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  z-index: 60;
}
.eyebrow {
  font: 10px/1.5 var(--mono);
  letter-spacing: 1.4px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-dot {
  display: inline-block;
  background: #b8cd8e;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.site-header {
  position: sticky;
  top: 0;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  z-index: 50;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: 88px;
  max-width: 1360px;
  margin: auto;
  padding-inline: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  font-size: 25px;
  letter-spacing: -1.1px;
  font-weight: 650;
  line-height: 1;
}
.wordmark-number {
  color: var(--accent);
}
.desktop-nav {
  display: flex;
  gap: 32px;
  margin-left: 60px;
}
.desktop-nav a {
  font-size: 12px;
  color: var(--muted);
  position: relative;
  padding-block: 12px;
  transition: color 0.2s;
}
.desktop-nav a:after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s;
}
.desktop-nav a:hover,
.desktop-nav a.active {
  color: var(--ink);
}
.desktop-nav a.active:after {
  transform: scaleX(1);
}
.header-actions {
  display: flex;
  gap: 24px;
  align-items: center;
}
.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.icon-button:hover {
  background: var(--surface-soft);
}
.header-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}
.header-contact .icon {
  width: 18px;
}
.theme-sun,
[data-theme="dark"] .theme-moon {
  display: none;
}
[data-theme="dark"] .theme-sun {
  display: block;
}
.menu-toggle {
  display: none;
}
.mobile-nav {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--line);
}
.mobile-nav a {
  display: block;
  padding: 10px;
}
.hero {
  padding-top: 84px;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  column-gap: 64px;
  align-items: center;
}
.hero-copy {
  padding-block: 6px 18px;
}
.hero-copy > .eyebrow {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.1px;
}
.hero-copy > .eyebrow a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero h1 {
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.4px;
  margin-top: 30px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.chinese-name {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 2px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.hero-statement {
  font-size: clamp(45px, 4.6vw, 67px);
  line-height: 1.1;
  letter-spacing: -3px;
  font-weight: 500;
  margin-top: 16px;
}
.hero-statement em {
  color: var(--accent);
  letter-spacing: -2.8px;
}
.hero-description {
  color: var(--muted);
  max-width: 365px;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 25px;
}
.hero-buttons {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 29px;
}
.button {
  display: inline-flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 5px;
  transition:
    background 0.2s,
    transform 0.2s,
    color 0.2s;
}
.button:hover {
  transform: translateY(-2px);
}
.button-primary {
  background: var(--ink);
  color: var(--bg);
}
.button-primary:hover {
  background: var(--accent);
  color: #fff;
}
.button .icon {
  width: 18px;
  height: 18px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  transition: color 0.2s;
}
.text-link:hover {
  color: var(--accent);
}
.text-link .icon {
  width: 16px;
  height: 16px;
}
.hero-person {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 34px;
}
.hero-person img {
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--surface);
  width: 40px;
  height: 40px;
}
.hero-person strong {
  font-size: 11px;
  font-weight: 550;
  display: block;
}
.hero-person div > span {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
.person-separator {
  padding-inline: 5px;
  color: var(--line);
}
.hero-footnote {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 22px 0;
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
}
.footnote-plus {
  margin-inline: 12px;
  color: var(--accent);
}
.hero-footnote > a {
  display: flex;
  gap: 16px;
  align-items: center;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 11px;
}
.hero-footnote > a span {
  font-size: 18px;
}
/* The interactive, intentionally illustrative agent workspace. */
.agent-visual {
  position: relative;
  background: #172922;
  color: #e7ece3;
  border-radius: 12px;
  height: 456px;
  isolation: isolate;
  background-image: radial-gradient(#b2c5ae16 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: hidden;
  box-shadow: 0 16px 44px #15251d12;
}
.visual-topline {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #a2b7a8;
}
.tiny-cross {
  color: #c1d79a;
  font-size: 16px;
  margin-right: 6px;
}
.live-indicator {
  border: 1px solid #9eb99f40;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 8px;
  align-self: center;
}
.orbit {
  position: absolute;
  border: 1px solid #8cac9d1c;
  border-radius: 50%;
  z-index: -1;
  width: 450px;
  height: 450px;
  left: 20px;
  top: -20px;
}
.orbit-two {
  width: 560px;
  height: 560px;
  left: -35px;
  top: -75px;
}
.visual-coordinate {
  position: absolute;
  font: 8px var(--mono);
  color: #799889;
  right: 24px;
  top: 72px;
}
.demo-window {
  position: absolute;
  top: 92px;
  left: 10%;
  width: 79%;
  background: #f0f1e9;
  border: 1px solid #ffffff36;
  border-radius: 8px;
  transform: rotate(-3deg);
  box-shadow: 0 15px 30px #0003;
  transition: transform 0.7s;
}
.agent-visual:hover .demo-window {
  transform: rotate(-1deg) translateY(-2px);
}
.window-bar {
  height: 33px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d9ddd1;
  color: #707c70;
  font: 8px var(--mono);
}
.window-dots {
  display: flex;
  gap: 4px;
}
.window-dots i {
  width: 5px;
  height: 5px;
  border: 1px solid #9fa999;
  border-radius: 50%;
}
.window-bar .icon {
  width: 12px;
  height: 12px;
}
.demo-workspace {
  display: flex;
  min-height: 170px;
}
.workspace-sidebar {
  width: 39px;
  border-right: 1px solid #d9ddd1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 13px;
  padding-top: 14px;
}
.workspace-sidebar b {
  color: #4e6352;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
.sidebar-line {
  width: 12px;
  height: 4px;
  border-radius: 1px;
  background: #d3dacc;
}
.sidebar-line.active {
  background: #7f947b;
}
.workspace-content {
  position: relative;
  padding: 13px 16px;
  width: calc(100% - 39px);
}
.workspace-heading {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #394b3c;
  font-weight: 600;
  margin-bottom: 9px;
}
.workspace-count {
  font: 7px var(--mono);
  color: #899382;
  padding-top: 2px;
}
.demo-file {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  gap: 8px;
  border: 1px solid transparent;
  color: #52634f;
  margin-top: 3px;
  transition:
    border-color 0.5s,
    background 0.5s;
}
.file-icon {
  width: 23px;
  height: 25px;
  display: grid;
  place-items: center;
  background: #e1e6d9;
  border-radius: 4px;
  font-size: 13px;
}
.demo-file b {
  font-size: 8px;
  display: block;
  font-weight: 600;
}
.demo-file div > span {
  font-size: 7px;
  color: #8a9584;
  display: block;
  margin-top: 1px;
}
.file-state {
  margin-left: auto;
  font: 7px var(--mono);
  color: #8d9b86;
}
.agent-visual[data-stage="0"] .demo-file:nth-of-type(2),
.agent-visual[data-stage="1"] .demo-file:nth-of-type(3),
.agent-visual[data-stage="2"] .demo-file:nth-of-type(4) {
  background: #e3ead9;
  border-color: #adbfa0;
}
.demo-cursor {
  position: absolute;
  left: 77%;
  top: 58px;
  width: 20px;
  color: #355edc;
  transition:
    top 0.9s,
    left 0.9s;
}
.demo-cursor svg {
  width: 20px;
  height: 24px;
}
.demo-cursor span {
  background: #355edc;
  color: #fff;
  font: 7px var(--mono);
  padding: 3px 6px;
  border-radius: 3px;
  margin-left: 13px;
}
.agent-visual[data-stage="1"] .demo-cursor {
  top: 100px;
  left: 56%;
}
.agent-visual[data-stage="2"] .demo-cursor {
  top: 142px;
  left: 73%;
}
.agent-terminal {
  position: absolute;
  left: 17%;
  right: 6%;
  top: 266px;
  transform: rotate(2deg);
  background: #243b30;
  border: 1px solid #76998266;
  box-shadow: 0 12px 26px #0002;
  padding: 14px 17px 16px;
  border-radius: 6px;
}
.terminal-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 8px var(--mono);
  color: #a0b5a5;
}
.terminal-label .status-dot {
  width: 4px;
  height: 4px;
}
.agent-terminal code {
  display: block;
  font: 12px var(--mono);
  color: #dce9be;
  margin-top: 12px;
  white-space: nowrap;
}
.code-muted {
  color: #9bb6a3;
}
.terminal-caret {
  color: #b9d38c;
  margin-left: 3px;
  animation: blink 1.3s steps(2, start) infinite;
}
#demo-output {
  display: block;
  font: 8px var(--mono);
  color: #9fb2a4;
  margin-top: 8px;
}
.visual-bottom {
  position: absolute;
  top: 383px;
  left: 26px;
  right: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 8px var(--mono);
  color: #8eaa98;
  letter-spacing: 1px;
}
.visual-star {
  font-size: 24px;
  line-height: 1;
  color: #bdce9d;
}
.loop-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  border-top: 1px solid #aac7b226;
  background: #11261d;
  display: flex;
  align-items: stretch;
  padding: 0 12px;
  gap: 4px;
}
.loop-step {
  flex: 1;
  position: relative;
  font-size: 9px;
  color: #9fb3a5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.loop-step > span {
  font: 8px var(--mono);
  opacity: 0.5;
}
.loop-step.active {
  color: #d7e9b9;
}
.loop-step:after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: #bdd394;
  transform: scaleX(0);
  transition: transform 0.4s;
}
.loop-step.active:after {
  transform: scaleX(1);
}
.loop-step:hover {
  background: #a4c5ab0a;
}
.loop-play {
  width: 26px;
  color: #a4b7a8;
  font-size: 12px;
}
.loop-controls button:focus-visible {
  outline-color: #d7e9b9;
  outline-offset: -4px;
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
/* Research directions. */
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-end;
  margin-bottom: 40px;
}
.section-label {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
}
.section-heading h2,
.news-intro h2 {
  font-weight: 450;
  font-size: 44px;
  letter-spacing: -1.6px;
  line-height: 1.12;
}
.section-heading h2 em,
.news-intro h2 em {
  color: var(--muted);
}
.section-heading > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 3px;
}
.research-section {
  padding-top: 73px;
  border-bottom: 1px solid var(--line);
}
.research-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
.research-card {
  position: relative;
  padding: 25px 23px 47px;
  transition: background 0.25s;
  min-width: 0;
  border-right: 1px solid var(--line);
}
.research-card:last-child {
  border: 0;
}
.research-card:hover {
  background: var(--surface);
}
.research-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.research-glyph {
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
}
.research-card-top > .icon {
  width: 17px;
  height: 17px;
  color: var(--muted);
  transition: transform 0.25s;
}
.research-card:hover .research-card-top > .icon {
  transform: translate(3px, -3px);
  color: var(--accent);
}
.research-card h3 {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}
.research-card p {
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted);
}
.research-tags {
  font: 8px/1.8 var(--mono);
  color: var(--muted);
  margin-top: 20px;
  letter-spacing: -0.3px;
}
.research-tags span {
  margin-inline: 3px;
}
.research-index {
  position: absolute;
  bottom: 14px;
  right: 20px;
  font: 9px var(--mono);
  color: var(--muted);
  opacity: 0.55;
}
.research-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.research-note a:hover {
  color: var(--accent);
}
/* Publication explorer. */
.publications-section {
  padding-bottom: 90px;
}
.publications-section > .section-heading {
  margin-bottom: 37px;
}
.publication-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.paper-tabs {
  display: flex;
  gap: 24px;
  align-self: stretch;
}
.paper-tab {
  padding: 17px 0;
  position: relative;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
}
.paper-tab > span {
  font: 9px var(--mono);
  margin-left: 5px;
  background: var(--surface-soft);
  border-radius: 4px;
  padding: 2px 4px;
}
.paper-tab.active {
  color: var(--ink);
  font-weight: 550;
}
.paper-tab:after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: -1px;
  background: var(--ink);
  left: 0;
  right: 0;
  transform: scaleX(0);
}
.paper-tab.active:after {
  transform: scaleX(1);
}
.publication-tools {
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-field {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 10px;
  border-radius: 5px;
  width: 211px;
}
.search-field .icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.search-field input {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 0;
  font-size: 11px;
  min-width: 0;
  outline: none;
}
.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.search-field kbd {
  font: 9px var(--mono);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--muted);
}
.publication-tools select {
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  max-width: 110px;
  padding: 7px 0;
}
.publication-filters {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  padding-block: 20px 25px;
}
.topic-chip {
  font-size: 10px;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 4px;
  transition:
    background 0.2s,
    color 0.2s;
  border: 1px solid transparent;
}
.topic-chip:hover {
  border-color: var(--line);
}
.topic-chip.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.result-count {
  font: 9px var(--mono);
  margin-left: auto;
  color: var(--muted);
}
.paper-card, .research-blog {
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 30px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.paper-list {
  border-bottom: 1px solid var(--line);
}
.paper-card-compact {
  grid-template-columns: 1fr;
  padding-left: 285px;
}
.paper-image {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: white;
  aspect-ratio: 1.6;
}
.paper-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  transition: transform 0.4s;
}
.paper-image:hover img {
  transform: scale(1.04);
}
.image-open {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #202820;
  border: 1px solid #e1e1d9;
  border-radius: 50%;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  transform: translateY(4px);
}
.image-open .icon {
  width: 14px;
  height: 14px;
}
.paper-image:hover .image-open,
.paper-image:focus-visible .image-open {
  opacity: 1;
  transform: none;
}
.paper-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.venue {
  font: 8px/1.5 var(--mono);
  letter-spacing: 0.2px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 3px 6px;
  border-radius: 3px;
}
.venue-highlight {
  background: var(--accent-soft);
  color: var(--accent);
}
.paper-category {
  font-size: 9px;
  color: var(--muted);
}
.award-badge {
  font-size: 9px;
  color: var(--accent);
}
.paper-body {
  min-width: 0;
}
.paper-body h3 {
  font-size: 17px;
  letter-spacing: -0.4px;
  font-weight: 550;
  line-height: 1.45;
  margin-bottom: 10px;
}
.paper-body h3 a:hover {
  color: var(--accent);
}
.paper-authors {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.paper-authors strong,
.full-authors strong {
  color: var(--ink);
  font-weight: 600;
}
.paper-summary {
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 7px;
}
.paper-bottom {
  margin-top: 15px;
}
.paper-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding-right: 70px;
}
.paper-links a {
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.paper-links a:hover {
  color: var(--accent);
}
.paper-links .icon {
  width: 12px;
  height: 12px;
}
.paper-details {
  margin-top: -21px;
  min-height: 21px;
}
.paper-details > summary {
  margin-left: auto;
  width: max-content;
  list-style: none;
  cursor: pointer;
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: 3px;
}
.paper-details > summary::-webkit-details-marker {
  display: none;
}
.paper-details > summary > span {
  font-size: 13px;
  transition: transform 0.2s;
}
.paper-details[open] > summary > span {
  transform: rotate(45deg);
}
.paper-details-content {
  padding: 16px;
  background: var(--surface-soft);
  border-radius: 4px;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.85;
  color: var(--muted);
}
.paper-details-content p + p {
  margin-top: 9px;
}
.contribution-note {
  font-size: 10px;
}
.copy-citation {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  margin-top: 15px;
  color: var(--ink);
  padding: 0;
}
.copy-citation .icon {
  width: 13px;
  height: 13px;
}
.papers-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 25px;
}
.papers-note {
  font: 9px var(--mono);
  color: var(--muted);
}
.button-outline {
  border: 1px solid var(--line);
  font-size: 11px;
  padding: 11px 17px;
}
.button-outline:hover {
  background: var(--surface);
}
.empty-state {
  text-align: center;
  padding: 60px 20px;
  border-block: 1px solid var(--line);
  color: var(--muted);
}
.empty-state > span {
  font-size: 36px;
  color: var(--accent);
}
.empty-state h3 {
  font-size: 18px;
  color: var(--ink);
}
.empty-state p {
  font-size: 12px;
  margin-top: 6px;
}
.reset-filters {
  margin-top: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 16px;
}
/* Updates, biography, and recognition. */
.news-section {
  border-block: 1px solid var(--line);
  background: var(--surface-soft);
}
.news-layout {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 90px;
}
.news-intro h2 {
  font-size: 43px;
}
.news-intro > p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 22px;
}
.news-decor {
  display: block;
  color: var(--accent);
  font-size: 68px;
  line-height: 1;
  margin-top: 45px;
  font-weight: 250;
}
.news-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.9;
}
.news-item:first-child {
  padding-top: 0;
}
.news-item time {
  font: 10px/2 var(--mono);
  color: var(--muted);
  padding-top: 1px;
}
.news-item a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.news-item a:hover {
  text-decoration-color: var(--accent);
}
.news-item span[style] {
  color: var(--accent) !important;
}
.news-toggle {
  padding: 0;
  margin-top: 24px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 11px;
}
.news-toggle > span {
  font: 9px var(--mono);
  color: var(--muted);
}
.portrait-wrap {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-soft);
  aspect-ratio: 4/4.6;
}
.portrait-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition:
    filter 0.8s,
    transform 1s;
}
.portrait-wrap:hover > img {
  transform: scale(1.025);
}
.portrait-caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: #f7f7f2e8;
  color: #202820;
  padding: 5px 8px;
  font: 8px var(--mono);
  letter-spacing: 0.8px;
}
.profile-socials {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  font-size: 10px;
  border-bottom: 1px solid var(--line);
}
.profile-socials a:hover {
  color: var(--accent);
}
.recognition-grid {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding-top: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.honor-highlight {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
}
.honor-highlight > span:first-child {
  font: 9px var(--mono);
  color: var(--muted);
}
.honor-highlight p {
  font-size: 12px;
}
.honor-highlight small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}
.honor-star {
  font-size: 32px;
  color: var(--accent);
  margin-left: auto;
}
.background-details {
  font-size: 11px;
  border-top: 1px solid var(--line);
}
.background-details summary {
  padding-block: 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.background-details summary::-webkit-details-marker {
  display: none;
}
.background-details summary span {
  color: var(--muted);
}
.background-details[open] summary span {
  transform: rotate(45deg);
}
.background-details ul {
  padding: 0 0 15px;
  list-style: none;
  margin: 0;
}
.background-details li {
  padding: 7px 0;
  color: var(--muted);
  font-size: 10px;
}
.background-details time {
  font: 9px var(--mono);
  display: block;
  margin-bottom: 3px;
}
.service-block > p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 24px;
  line-height: 1.8;
}
.service-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 17px;
}
.service-tags > span {
  font-size: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 9px;
}
.service-block .journal-note {
  font-size: 10px;
  margin-top: 17px;
}
.contact-section {
  background: #dfe7d4;
  color: #26382a;
  overflow: hidden;
}
.contact-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-block: 77px;
  gap: 36px;
}
.contact-inner > .contact-asterisk {
  position: absolute;
  font-size: 260px;
  line-height: 1;
  color: #c9d6bb;
  right: -76px;
  top: -37px;
  pointer-events: none;
  z-index: 0;
}
.contact-inner > div {
  position: relative;
  z-index: 1;
}
.contact-inner .eyebrow {
  font-size: 9px;
  color: #4e6148;
  letter-spacing: 1.3px;
}
.contact-inner h2 {
  font-size: 43px;
  font-weight: 450;
  line-height: 1.16;
  letter-spacing: -1.4px;
  margin-top: 19px;
}
.contact-inner p {
  font-size: 12px;
  color: #51614c;
  margin-top: 20px;
}
.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-right: 23px;
}
.button-contact {
  background: #26382a;
  color: #f0f2e8;
  min-width: 160px;
  justify-content: space-between;
}
.button-contact:hover {
  background: #355edc;
}
.email-copy {
  font-size: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0;
  color: #455740;
}
.email-copy .icon {
  width: 13px;
  height: 13px;
}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 30px;
  gap: 20px;
}
.site-footer .wordmark {
  font-size: 22px;
}
.site-footer > p,
.site-footer > a:last-child {
  font-size: 9px;
  color: var(--muted);
}
.site-footer > p span {
  padding-inline: 8px;
}
.site-footer > a:last-child:hover {
  color: var(--accent);
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 100;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 6px 20px #0002;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Progressive enhancement: content stays visible when JS or motion is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.7s,
      transform 0.7s;
  }
  .reveal-ready.is-visible {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 1500px) {
  .hero {
    padding-top: 100px;
    column-gap: 80px;
  }
  .agent-visual {
    height: 480px;
  }
  .demo-window {
    top: 102px;
  }
  .agent-terminal {
    top: 280px;
  }
  .visual-bottom {
    top: 405px;
  }
  .hero-statement {
    font-size: 68px;
  }
}
@media (max-width: 1100px) {
  .container {
    width: calc(100% - 72px);
  }
  .header-inner {
    padding-inline: 36px;
  }
  .hero {
    gap: 36px;
    padding-top: 62px;
  }
  .hero-statement {
    font-size: 50px;
    letter-spacing: -2.2px;
  }
  .hero-statement em {
    letter-spacing: -2px;
  }
  .hero-buttons {
    gap: 18px;
  }
  .hero-buttons .text-link {
    font-size: 11px;
  }
  .agent-visual {
    height: 432px;
  }
  .demo-window {
    left: 7%;
    width: 85%;
    top: 87px;
  }
  .agent-terminal {
    top: 255px;
    left: 14%;
    right: 4%;
  }
  .visual-bottom {
    top: 362px;
  }
  .research-card {
    padding: 23px 18px 42px;
  }
  .research-card h3 {
    font-size: 12px;
  }
  .research-tags {
    font-size: 7px;
  }
  .research-card p {
    font-size: 10px;
  }
  .paper-card, .research-blog {
    grid-template-columns: 220px 1fr;
    gap: 25px;
  }
  .paper-card-compact {
    grid-template-columns: 1fr;
    padding-left: 245px;
  }

  .section-heading h2 {
    font-size: 40px;
  }
  .paper-tabs {
    gap: 18px;
  }
  .publication-tools {
    gap: 8px;
  }
  .search-field {
    width: 180px;
  }
}
@media (max-width: 850px) {
  .container {
    width: calc(100% - 48px);
  }
  .header-inner {
    height: 74px;
    padding-inline: 24px;
  }
  .desktop-nav {
    margin-left: 0;
    gap: 24px;
  }
  .header-actions {
    gap: 16px;
  }
  .hero {
    column-gap: 28px;
  }
  .hero-statement {
    font-size: 42px;
    letter-spacing: -1.8px;
  }
  .hero-statement em {
    letter-spacing: -1.8px;
  }
  .hero-description {
    font-size: 12px;
  }
  .hero h1 {
    margin-top: 25px;
  }
  .hero-buttons {
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
  }
  .hero-person {
    margin-top: 25px;
  }
  .hero-person div > span {
    font-size: 9px;
  }
  .hero-footnote {
    margin-top: 36px;
  }
  .agent-visual {
    height: 405px;
  }
  .visual-topline {
    left: 18px;
    right: 18px;
    font-size: 8px;
  }
  .demo-window {
    top: 88px;
    left: 5%;
    width: 91%;
  }
  .agent-terminal {
    top: 249px;
    left: 10%;
    right: 4%;
    padding: 12px;
  }
  .agent-terminal code {
    font-size: 10px;
  }
  #demo-output {
    font-size: 7px;
  }
  .visual-bottom {
    top: 337px;
    font-size: 7px;
    left: 18px;
    right: 18px;
  }
  .workspace-content {
    padding: 12px 9px;
  }
  .workspace-sidebar {
    width: 30px;
  }
  .workspace-content {
    width: calc(100% - 30px);
  }
  .file-icon {
    width: 20px;
  }
  .demo-file {
    padding: 7px;
    gap: 5px;
  }
  .workspace-heading {
    font-size: 8px;
  }
  .demo-file b {
    font-size: 7px;
  }
  .demo-file div > span {
    font-size: 6px;
  }
  .research-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .research-card {
    padding: 23px 24px 42px;
  }
  .research-card:nth-child(2) {
    border-right: 0;
  }
  .research-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .research-card h3 {
    font-size: 14px;
  }
  .research-card p {
    font-size: 12px;
  }
  .research-tags {
    font-size: 9px;
  }
  .research-card-top {
    margin-bottom: 25px;
  }
  .section-pad {
    padding-block: 74px;
  }
  .section-heading {
    gap: 20px;
  }
  .section-heading h2 {
    font-size: 36px;
  }
  .section-heading > p {
    font-size: 11px;
  }
  .paper-card, .research-blog {
    grid-template-columns: 190px 1fr;
    gap: 24px;
  }
  .paper-card-compact {
    grid-template-columns: 1fr;
    padding-left: 214px;
  }
  .paper-body h3 {
    font-size: 15px;
  }
  .paper-authors {
    font-size: 10px;
  }
  .publication-tools select {
    max-width: 95px;
    font-size: 9px;
  }
  .search-field {
    width: 160px;
  }
  .paper-tabs {
    gap: 16px;
  }
  .paper-tab {
    font-size: 11px;
  }
  .publication-filters {
    gap: 4px;
  }
  .topic-chip {
    font-size: 9px;
    padding: 5px 8px;
  }
  .result-count {
    font-size: 8px;
  }
  .news-layout {
    gap: 48px;
    grid-template-columns: 1fr 1.5fr;
  }
  .news-intro h2 {
    font-size: 36px;
  }
  .news-item {
    gap: 16px;
    grid-template-columns: 55px 1fr;
    font-size: 11px;
  }



  .recognition-grid {
    gap: 35px;
  }
  .contact-inner h2 {
    font-size: 36px;
  }
  .contact-actions {
    margin-right: 0;
  }
  .email-copy {
    font-size: 9px;
  }
}
@media (max-width: 640px) {
  html {
    scroll-padding-top: 90px;
  }
  .container {
    width: calc(100% - 40px);
  }
  .header-inner {
    padding-inline: 20px;
    height: 68px;
  }
  .wordmark {
    font-size: 22px;
  }
  .desktop-nav {
    display: none;
  }
  .header-contact {
    font-size: 11px;
    gap: 6px;
  }
  .header-actions {
    gap: 12px;
  }
  .menu-toggle {
    display: grid;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 42px;
  }
  .hero-copy {
    padding-bottom: 0;
  }
  .hero h1 {
    margin-top: 26px;
    font-size: 16px;
  }
  .hero-copy > .eyebrow {
    font-size: 9px;
  }
  .hero-statement {
    font-size: clamp(42px, 10.3vw, 65px);
    letter-spacing: -2.5px;
    margin-top: 15px;
  }
  .hero-statement em {
    letter-spacing: -2px;
  }
  .hero-description {
    max-width: 340px;
    font-size: 13px;
    margin-top: 21px;
  }
  .hero-buttons {
    gap: 22px;
    margin-top: 24px;
  }
  .hero-buttons .text-link {
    font-size: 11px;
  }
  .button {
    padding: 13px 17px;
  }
  .hero-person {
    margin-top: 26px;
  }
  .hero-person div > span {
    font-size: 9px;
  }
  .agent-visual {
    margin-top: 35px;
    height: 420px;
    max-width: 440px;
    width: 100%;
    justify-self: center;
  }
  .visual-topline {
    left: 22px;
    right: 22px;
    top: 22px;
    font-size: 9px;
  }
  .demo-window {
    left: 8%;
    width: 82%;
    top: 85px;
  }
  .agent-terminal {
    top: 250px;
    left: 16%;
    right: 5%;
    padding: 14px 17px;
  }
  .agent-terminal code {
    font-size: 12px;
  }
  #demo-output {
    font-size: 8px;
  }
  .visual-bottom {
    top: 353px;
    left: 22px;
    right: 22px;
    font-size: 8px;
  }
  .workspace-content {
    padding: 12px;
  }
  .workspace-sidebar {
    width: 35px;
  }
  .workspace-content {
    width: calc(100% - 35px);
  }
  .workspace-heading {
    font-size: 9px;
  }
  .demo-file b {
    font-size: 8px;
  }
  .demo-file div > span {
    font-size: 7px;
  }
  .demo-file {
    padding: 8px;
  }
  .hero-footnote {
    margin-top: 30px;
    padding-block: 19px;
    font-size: 7px;
    letter-spacing: 0.5px;
  }
  .footnote-plus {
    margin-inline: 5px;
  }
  .hero-footnote > a {
    font-size: 9px;
    gap: 8px;
  }
  .hero-footnote > a span {
    font-size: 16px;
  }
  .section-pad {
    padding-block: 58px;
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
  }
  .section-heading h2,
  .news-intro h2 {
    font-size: 35px;
    letter-spacing: -1px;
  }
  .section-label {
    font-size: 8px;
    margin-bottom: 14px;
  }
  .section-heading > p br {
    display: none;
  }
  .section-heading > p {
    font-size: 12px;
  }
  .research-card {
    padding: 21px 16px 35px;
  }
  .research-card h3 {
    font-size: 12px;
    line-height: 1.5;
    max-width: 130px;
  }
  .research-card p {
    font-size: 10px;
    line-height: 1.85;
  }
  .research-card-top {
    margin-bottom: 21px;
  }
  .research-glyph {
    font-size: 26px;
  }
  .research-tags {
    font-size: 7px;
    line-height: 1.8;
    margin-top: 15px;
  }
  .research-index {
    font-size: 8px;
    bottom: 10px;
    right: 13px;
  }
  .research-note {
    display: block;
    font-size: 9px;
    line-height: 1.8;
  }
  .research-note a {
    display: block;
    margin-top: 5px;
  }
  .publications-section > .section-heading {
    margin-bottom: 22px;
  }
  .publication-toolbar {
    display: block;
  }
  .paper-tabs {
    gap: 24px;
  }
  .paper-tab {
    font-size: 12px;
    padding: 12px 0;
  }
  .publication-tools {
    padding: 16px 0;
    gap: 10px;
  }
  .search-field {
    width: auto;
    flex: 1;
    padding: 9px 10px;
  }
  .search-field input {
    font-size: 12px;
  }
  .publication-tools select {
    max-width: 110px;
    font-size: 10px;
  }
  .publication-filters {
    padding-block: 15px 22px;
    gap: 5px;
  }
  .topic-chip {
    font-size: 9px;
    padding: 5px 8px;
  }
  .result-count {
    width: 100%;
    margin-top: 8px;
    font-size: 9px;
  }
  .paper-card, .research-blog {
    grid-template-columns: 1fr;
    gap: 19px;
    padding-block: 25px;
  }
  .paper-image {
    aspect-ratio: 1.9;
    max-height: 230px;
  }
  .paper-image img {
    padding: 15px;
  }
  .image-open {
    opacity: 1;
    transform: none;
  }
  .paper-meta {
    gap: 8px;
    margin-bottom: 10px;
  }
  .venue {
    font-size: 8px;
  }
  .paper-category {
    font-size: 9px;
  }
  .paper-body h3 {
    font-size: 17px;
    line-height: 1.45;
  }
  .paper-authors {
    font-size: 11px;
  }
  .paper-summary {
    font-size: 11px;
    margin-top: 10px;
  }
  .paper-links {
    gap: 14px;
  }
  .paper-links a,
  .paper-details > summary {
    font-size: 10px;
  }
  .paper-details {
    margin-top: -21px;
  }
  .paper-card-compact {
    padding-left: 0;
  }
  .papers-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .load-papers {
    align-self: stretch;
  }
  .papers-note {
    font-size: 8px;
  }
  .news-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .news-intro h2 br {
    display: none;
  }
  .news-intro > p {
    font-size: 12px;
    margin-top: 15px;
  }
  .news-intro > p br {
    display: none;
  }
  .news-decor {
    display: none;
  }
  .news-item {
    grid-template-columns: 55px 1fr;
    gap: 20px;
    font-size: 12px;
    padding: 17px 0;
  }
  .news-item time {
    font-size: 9px;
  }
  .news-toggle {
    font-size: 11px;
  }


  .portrait-wrap {
    aspect-ratio: 1;
  }
  .portrait-caption {
    display: none;
  }
  .profile-socials {
    flex-direction: column;
    gap: 15px;
    padding: 0;
    border: 0;
    font-size: 11px;
  }






  .recognition-grid {
    margin-top: 38px;
    padding-top: 30px;
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .service-block > p {
    font-size: 12px;
    margin-top: 20px;
  }
  .service-tags > span {
    font-size: 10px;
  }
  .honor-highlight p {
    font-size: 12px;
  }
  .contact-inner {
    padding-block: 54px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .contact-inner h2 {
    font-size: 35px;
  }
  .contact-inner .eyebrow {
    font-size: 8px;
  }
  .contact-inner > .contact-asterisk {
    font-size: 240px;
    right: -100px;
    top: 110px;
    opacity: 0.65;
  }
  .contact-actions {
    gap: 18px;
  }
  .email-copy {
    font-size: 10px;
  }
  .site-footer {
    padding-block: 25px;
    gap: 15px;
    flex-wrap: wrap;
  }
  .site-footer > p {
    font-size: 8px;
  }
  .site-footer > a:last-child {
    font-size: 9px;
  }
  .site-footer .wordmark {
    font-size: 21px;
  }
  .site-footer > p span {
    padding-inline: 4px;
  }
}
@media (max-width: 370px) {
  .hero-statement {
    font-size: 39px;
  }
  .hero-buttons {
    gap: 14px;
  }
  .hero-buttons .button {
    font-size: 11px;
  }
  .hero-buttons .text-link {
    font-size: 10px;
  }
  .research-card {
    padding-inline: 12px;
  }
  .research-tags {
    font-size: 6px;
  }
  .hero-footnote {
    font-size: 6px;
  }
  .agent-terminal code {
    font-size: 10px;
  }
  #demo-output {
    font-size: 7px;
  }
  .demo-window {
    left: 5%;
    width: 90%;
  }
  .paper-links {
    gap: 10px;
  }
  .site-footer > a:last-child {
    margin-left: auto;
  }
  .section-heading h2,
  .news-intro h2,
  .contact-inner h2 {
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .reveal-ready {
    opacity: 1;
    transform: none;
  }
}
@media print {
  :root,
  [data-theme="dark"] {
    --bg: #fff;
    --surface: #fff;
    --surface-soft: #f3f3f3;
    --ink: #111;
    --muted: #444;
    --line: #ccc;
    --accent: #234cb8;
    --accent-soft: #eef1fb;
    color-scheme: light;
  }
  .empty-state {
    display: none !important;
  }
  .paper-list {
    display: flex;
    flex-direction: column;
  }
  .paper-card,
  .paper-card[hidden] {
    display: grid !important;
    order: var(--paper-order);
    grid-template-columns: 150px 1fr;
    gap: 20px;
  }
  .paper-card-compact,
  .paper-card-compact[hidden] {
    grid-template-columns: 1fr;
  }
  .paper-authors {
    display: block;
    overflow: visible;
  }

  .site-header,
  .agent-visual,
  .publication-toolbar,
  .publication-filters,
  .loop-controls,
  .reading-progress,
  .contact-actions,
  .toast,
  .news-toggle,
  .load-papers,
  .research-note {
    display: none !important;
  }
  .container {
    width: 100%;
  }
  .hero {
    display: block;
    padding-top: 0;
  }
  .hero-statement {
    font-size: 36px;
  }
  .hero-person {
    display: none;
  }
  .section-pad {
    padding-block: 25px;
  }
  .research-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .paper-card, .research-blog {
    break-inside: avoid;
  }
  .news-item[hidden] {
    display: block !important;
  }
  .paper-card-compact {
    padding-left: 0;
  }
  .reveal-ready {
    opacity: 1;
    transform: none;
  }
  .contact-inner {
    padding-block: 25px;
  }
  .paper-details {
    display: none;
  }
  .contact-section {
    background: none;
  }
  .contact-asterisk {
    display: none;
  }

  .site-footer {
    padding-block: 20px;
  }
}

.scholar-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.scholar-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.scholar-count strong {
  color: var(--accent);
  font: 27px/1 var(--serif);
  font-weight: 400;
}
.scholar-count .icon {
  width: 16px;
  height: 16px;
}
.scholar-source {
  color: var(--muted);
  font: 8px/1.6 var(--mono);
}
@media (max-width: 640px) {
  .scholar-summary {
    align-items: flex-start;
  }
}

@media (max-width: 370px) {
  .header-actions {
    gap: 5px;
  }
  .header-inner {
    padding-inline: 16px;
  }
}

/* The same dual-77 silhouette is used by the lockup and app icons. */
.brand-mark { width: 34px; height: 34px; flex: none; color: var(--accent); }
.affiliation { display: inline-flex; align-items: baseline; gap: .3em; vertical-align: baseline; }
.company-logo { display: inline-flex; align-self: center; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; flex: none; }
.company-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.company-logo--naiveai { background: #f7f7f2; border-radius: .2em; }
.company-logo--shailab { background: #fff; border-radius: .15em; }
@media (max-width: 640px) { .wordmark { gap: 6px; } .brand-mark { width: 28px; height: 28px; } }
@media (max-width: 370px) { .header-contact { display: none; } }
/* Show the symbol from the existing laboratory lockup at inline size. */
.company-logo--shailab { position: relative; overflow: hidden; width: 2.7em; height: .9em; border-radius: 0; }
.company-logo--shailab img { position: absolute; left: 0; top: -.6em; width: 100%; height: auto; }

/* Background: readable biography, then two balanced columns of affiliations. */
.about-section .section-heading { margin-bottom: 36px; }
.about-section .section-heading h2 { max-width: 720px; }
.about-overview { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: center; }
.about-identity { min-width: 0; }
.about-identity .portrait-wrap { aspect-ratio: 4 / 4.5; border-radius: 12px; overflow: hidden; }
.about-identity .portrait-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.identity-name { margin-top: 15px; font-size: 17px; font-weight: 650; letter-spacing: -.4px; }
.identity-name span { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
.about-identity .profile-socials { padding: 14px 0 0; border: 0; font-size: 11px; }
.about-kicker { font-size: 10px; color: var(--muted); letter-spacing: 1.1px; }
.about-introduction p { max-width: 770px; font-size: 15px; line-height: 1.9; color: var(--muted); margin-top: 17px; }
.about-introduction .about-lead { margin-top: 17px; font-size: clamp(20px, 2vw, 25px); line-height: 1.6; color: var(--ink); letter-spacing: -.65px; }
.about-introduction a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.about-introduction a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.about-interests { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.about-interests span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; color: var(--muted); }
.background-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; margin-top: 46px; }
.background-group { min-width: 0; }
.background-heading { display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 550; letter-spacing: -.3px; margin-bottom: 17px; }
.background-heading > span { font: 10px var(--mono); color: var(--accent); }
.background-card { display: flex; gap: 18px; padding: 23px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
.background-card + .background-card { margin-top: 14px; }
.current-position { border-color: var(--accent); background: linear-gradient(120deg,var(--accent-soft),var(--surface) 80%); }
.institution-logo { width: 56px; height: 56px; flex: none; padding: 5px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.institution-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.institution-logo--naiveai { background: #f7f7f2; }
.institution-logo--shailab { padding: 0; }
.institution-logo--dlut { position: relative; padding: 0; }
.institution-logo--dlut img { position: absolute; width: 365.625%; height: auto; max-width: none; left: -137.5%; top: -75%; }
.institution-content { min-width: 0; flex: 1; }
.institution-content h4 { font-size: 16px; line-height: 1.45; letter-spacing: -.35px; font-weight: 600; }
.institution-content h4 a:hover { color: var(--accent); }
.institution-topline { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.current-badge { font: 9px var(--mono); border-radius: 4px; background: var(--accent); color: var(--bg); padding: 5px 7px; }
.institution-role { font-size: 12px; line-height: 1.7; color: var(--ink); margin-top: 7px; }
.institution-content time { display: block; font: 10px/1.7 var(--mono); color: var(--muted); margin-top: 5px; }
.institution-description { font-size: 12px; line-height: 1.85; color: var(--muted); margin-top: 10px; }
.institution-description a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.appointment + .appointment { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
.admission-note { display: inline-block; margin-top: 10px; font-size: 10px; color: var(--accent); }
.hero-affiliation .company-logo { width: 18px; height: 18px; margin-right: 1px; }
.about-section .recognition-grid { margin-top: 42px; }

/* Accepted venues and distinctions have a different visual hierarchy to preprints. */
.venue { font: 600 11px/1.5 var(--sans); letter-spacing: .1px; padding: 5px 9px; border-radius: 5px; }
.venue--conference { background: #355edc; color: #fff; }
.venue--findings { background: #e9edfc; color: #294cba; box-shadow: inset 0 0 0 1px #cfdaff; }
.venue--workshop { background: var(--surface-soft); color: var(--ink); border: 1px dashed var(--muted); }
.venue--preprint { background: var(--surface-soft); color: var(--muted); font-weight: 500; }
.ccf-badge, .distinction-badge { display: inline-flex; align-items: center; border-radius: 5px; padding: 5px 8px; font: 700 10px/1.5 var(--sans); letter-spacing: .25px; }
.ccf-a { background: #fff0c6; color: #765006; box-shadow: inset 0 0 0 1px #e8cf8d; }
.ccf-b { background: #e0f1f1; color: #24585e; box-shadow: inset 0 0 0 1px #b8dcdc; }
.distinction-badge { background: #eee7fb; color: #7044a0; box-shadow: inset 0 0 0 1px #d7c7ef; }
.paper-meta { gap: 7px; }
.paper-category { margin-left: 3px; }
.ranking-note { font: 10px/1.8 var(--sans); color: var(--muted); margin-top: 18px; }
.ranking-note a { text-decoration: underline; text-underline-offset: 3px; }
.paper-authors strong, .full-authors strong { color: var(--ink); font-weight: 750; white-space: nowrap; }
.paper-image, .paper-image img { background: #fff; color-scheme: light; }
.paper-image { transition: transform .25s ease, box-shadow .25s ease; transform-origin: center; }
.paper-image img { transform: none; }
.paper-image:hover img { transform: none; }
.image-open { font: 20px/1 var(--sans); }
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  .paper-image:hover, .paper-image:focus-visible { transform: scale(1.14); box-shadow: 0 14px 38px #10241b28; z-index: 3; }
}
.figure-dialog { width: min(1180px, 94vw); max-width: 94vw; max-height: 92vh; border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--surface); color: var(--ink); margin: auto; box-shadow: 0 24px 100px #0005; }
.figure-dialog::backdrop { background: #101a17bf; backdrop-filter: blur(7px); }
.figure-dialog-bar { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.figure-dialog-bar h2 { font-size: 14px; font-weight: 550; line-height: 1.5; }
.figure-close { flex: none; padding: 8px 12px; background: var(--surface-soft); border-radius: 5px; font-size: 12px; }
.figure-canvas { padding: 24px; background: #fff; display: flex; align-items: center; justify-content: center; }
.figure-full { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; }
.figure-paper-link { display: block; padding: 15px 22px; color: var(--accent); font-size: 12px; }
@media (max-width: 960px) {
  .about-overview { gap: 36px; grid-template-columns: 190px minmax(0, 1fr); }
  .background-columns { gap: 20px; }
  .background-card { padding: 19px; gap: 13px; }
  .institution-content h4 { font-size: 14px; }
}
@media (max-width: 700px) {
  .about-overview { grid-template-columns: 1fr; gap: 26px; }
  .about-identity { display: grid; grid-template-columns: 105px minmax(0, 1fr); column-gap: 22px; align-items: center; }
  .about-identity .portrait-wrap { grid-row: 1 / 3; width: 105px; aspect-ratio: 1; }
  .identity-name { margin-top: 0; align-self: end; font-size: 16px; }
  .identity-name span { display: block; margin: 5px 0 0; font-size: 11px; }
  .about-identity .profile-socials { flex-direction: row; gap: 12px; justify-content: flex-start; padding-top: 15px; align-self: start; font-size: 10px; }
  .about-introduction .about-lead { font-size: 21px; }
  .about-introduction p { font-size: 14px; line-height: 1.85; }
  .about-interests { margin-top: 20px; }
  .background-columns { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .background-card { gap: 14px; padding: 19px 16px; }
  .institution-logo { width: 48px; height: 48px; }
  .institution-content h4 { font-size: 15px; }
  .figure-dialog-bar { padding: 12px; gap: 10px; }
  .figure-dialog-bar h2 { font-size: 11px; }
  .figure-close { font-size: 11px; }
  .figure-canvas { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .paper-image { transition: none; } }
.author-list-link { color: var(--accent); font-size: 10px; white-space: nowrap; margin-left: 5px; }
/* Keep the author's own name and contribution visible, including on narrow screens. */
.paper-authors { display: block; overflow: visible; }
/* Dark mode uses brighter secondary copy and readable supporting type in About. */
[data-theme="dark"] .about-section { --muted: #c8d2c5; --line: #49574c; }
[data-theme="dark"] .about-section .about-introduction p:not(.about-lead) { color: #d4dcd1; }
[data-theme="dark"] .about-section .institution-content time { font-size: 12px; }
[data-theme="dark"] .about-section .institution-role { font-size: 14px; }
[data-theme="dark"] .about-section .institution-description { font-size: 13px; }
[data-theme="dark"] .about-section .about-kicker,
[data-theme="dark"] .about-section .mini-heading { color: #d1d9cc; font-size: 11px; }
[data-theme="dark"] .about-section .background-details { font-size: 14px; }
[data-theme="dark"] .about-section .background-details li { color: #d4dcd1; font-size: 13px; line-height: 1.8; }
[data-theme="dark"] .about-section .background-details time { color: #c8d2c5; font-size: 12px; }
[data-theme="dark"] .about-section .honor-highlight p { font-size: 15px; }
[data-theme="dark"] .about-section .honor-highlight small,
[data-theme="dark"] .about-section .honor-highlight > span:first-child { color: #c8d2c5; font-size: 12px; }
[data-theme="dark"] .about-section .service-block > p { color: #d4dcd1; font-size: 14px; }
[data-theme="dark"] .about-section .service-tags > span { font-size: 12px; }
[data-theme="dark"] .about-section .admission-note { color: #bccaff; font-size: 12px; }
/* The first screen establishes identity, focus, contribution, and evidence. */
.hero { padding-top: 58px; }
.hero h1 { font-size: clamp(38px, 3.8vw, 54px); margin-top: 26px; font-weight: 600; letter-spacing: -2px; gap: 15px; }
.hero h1 > span { display: flex; align-items: center; gap: 14px; }
.hero-avatar { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; border: 2px solid var(--surface); flex: none; }
.hero .chinese-name { font-size: 14px; padding-left: 13px; letter-spacing: 1px; }
.hero-statement { font-size: clamp(28px, 2.8vw, 39px); line-height: 1.25; letter-spacing: -1.4px; margin-top: 21px; }
.hero-statement em { letter-spacing: -1.4px; }
.hero-description { max-width: 450px; font-size: 14px; margin-top: 19px; }
.hero-buttons { margin-top: 23px; gap: 21px; }
.hero-evidence { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 29px; }
.hero-evidence a { display: block; min-width: 0; }
.hero-evidence strong { display: block; font: 30px/1.1 var(--serif); color: var(--ink); }
.hero-evidence a:hover strong { color: var(--accent); }
.hero-evidence span { display: block; font-size: 10px; line-height: 1.65; margin-top: 8px; color: var(--ink); }
.hero-evidence small { display: block; color: var(--muted); font-size: 9px; line-height: 1.6; margin-top: 4px; }
.hero-evidence .evidence-venue { font: 600 19px/1.75 var(--sans); letter-spacing: -.6px; white-space: nowrap; }
.evidence-venue em { font: 18px var(--serif); color: var(--accent); }
.hero-history { font-size: 10px; line-height: 1.8; color: var(--muted); margin-top: 20px; }
.hero-history strong { font-weight: 500; color: var(--ink); }
.hero-footnote { margin-top: 34px; }
.publication-intro { max-width: 780px; font-size: 14px; line-height: 1.8; color: var(--muted); margin: -12px 0 27px; }
.publication-intro strong { color: var(--ink); font-weight: 550; }
.contribution-badge { font-size: 10px; font-weight: 600; line-height: 1.5; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); }
.about-section { padding-top: 80px; }
@media (max-width: 960px) {
  .hero h1 { font-size: 39px; gap: 11px; }
  .hero-avatar { width: 43px; height: 43px; }
  .hero h1 > span { gap: 9px; }
  .hero .chinese-name { font-size: 12px; padding-left: 9px; }
  .hero-statement { font-size: 30px; }
  .hero-evidence { gap: 10px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 35px; }
  .hero h1 { font-size: 37px; letter-spacing: -1.7px; margin-top: 23px; gap: 10px; }
  .hero-avatar { width: 39px; height: 39px; }
  .hero h1 > span { gap: 8px; }
  .hero .chinese-name { font-size: 11px; letter-spacing: 0; border: 0; padding: 0; }
  .hero-statement { font-size: 29px; letter-spacing: -1.1px; margin-top: 19px; }
  .hero-statement em { letter-spacing: -1.1px; }
  .hero-description { font-size: 13px; margin-top: 17px; }
  .hero-buttons { gap: 18px; }
  .hero-evidence { gap: 12px; margin-top: 25px; padding-top: 19px; }
  .hero-evidence strong { font-size: 27px; }
  .hero-evidence .evidence-venue { font-size: 16px; }
  .evidence-venue em { font-size: 15px; }
  .hero-evidence span { font-size: 9px; }
  .hero-evidence small { font-size: 8px; }
  .hero-history { font-size: 9px; }
  .publication-intro { font-size: 12px; margin-top: 0; }
  .about-section { padding-top: 60px; }
}
/* About follows a vertical resume: portrait aside, then biography and grouped entries. */
.about-resume { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; }
.about-resume > .about-identity { position: sticky; top: 112px; }
.about-resume-content { min-width: 0; }
.about-resume .about-introduction .about-lead { margin-top: 13px; font-size: 23px; }
.about-resume .about-introduction p { max-width: 750px; }
.about-resume .background-columns { display: block; margin-top: 38px; }
.about-resume .background-group + .background-group { margin-top: 38px; }
.about-resume .background-heading { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 22px; font-size: 16px; }
.about-resume .background-card { padding: 0; gap: 18px; border: 0; border-radius: 0; background: none; }
.about-resume .background-card + .background-card { margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--line); }
.about-resume .institution-topline { justify-content: flex-start; gap: 14px; }
.about-resume .institution-content h4 { font-size: 17px; }
.about-resume .institution-role { font-size: 14px; }
.about-resume .institution-content time { font-size: 12px; }
.about-resume .institution-description { font-size: 13px; }
.about-resume .appointment + .appointment { border: 0; padding-top: 5px; margin-top: 9px; }
.about-section .mini-heading { font-size: 11px; font-weight: 500; letter-spacing: 1px; color: var(--ink); }
.about-section .reveal-ready { opacity: 1; transform: none; transition: none; }
@media (max-width: 1050px) {
  .about-resume { grid-template-columns: 210px minmax(0, 1fr); gap: 42px; }
}
@media (max-width: 700px) {
  .about-resume { grid-template-columns: 1fr; gap: 30px; }
  .about-resume > .about-identity { position: static; }
  .about-resume .about-introduction .about-lead { font-size: 20px; }
  .about-resume .background-columns { margin-top: 30px; }
  .about-resume .institution-content h4 { font-size: 15px; }
  .about-resume .background-card { gap: 14px; }
  .about-section .recognition-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Research writing complements the bibliography without changing paper counts. */
.research-blog[hidden] { display: none; }
.research-blog .paper-body { min-width: 0; }
.research-blog .paper-image { align-self: center; }
.research-blog .paper-meta time { font-size: 11px; color: var(--muted); }
.research-blog .venue--blog { background: var(--accent); color: var(--bg); }
.blog-byline { color: var(--muted); font-size: 12px; margin: 9px 0; }
.research-blog .paper-links { margin-top: 17px; }
@media (max-width: 640px) {
  .research-blog .paper-image { width: 100%; }
}

/* Preserve readable secondary text and predictable wrapping across screen sizes. */
.hero-statement .focus-term { white-space: nowrap; }
.publication-results { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.publication-results .result-count { margin: 0; width: auto; }
.show-all-papers { color: var(--accent); font-size: 11px; padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .publication-results { width: 100%; margin-top: 8px; justify-content: space-between; }
}