:root {
  --paper: #f8fafc;
  --white: #ffffff;
  --ink: #101828;
  --muted: #667085;
  --line: #dfe5ee;
  --blue: #1547ed;
  --blue-2: #3468ff;
  --red: #ee3d3d;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); overflow-x: hidden; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.shell { width: min(1440px, calc(100% - clamp(40px, 8vw, 144px))); margin-inline: auto; }
.sr-only { position: absolute !important; 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; z-index: 100; left: 20px; top: 12px; padding: 10px 14px; border-radius: 3px; background: var(--ink); color: white; transform: translateY(-160%); transition: transform 180ms var(--ease-ui); }
.skip-link:focus { transform: translateY(0); }

.hero { height: 100vh; height: 100svh; position: relative; display: grid; grid-template-columns: 42% 58%; overflow: hidden; background: #edf6ff; }
.hero-copy { position: relative; z-index: 2; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 7vh, 84px) 3vw clamp(28px, 7vh, 84px) max(40px, calc((100vw - min(1440px, calc(100vw - clamp(40px, 8vw, 144px)))) / 2)); }
.quote-mark { display: block; flex: 0 0 auto; margin-bottom: clamp(8px, 2.4vh, 24px); color: var(--blue); font: 700 clamp(44px, min(5vw, 9vh), 72px)/1 Georgia, serif; }
.hero blockquote { margin: 0; max-width: none; font-size: clamp(18px, min(2.15vw, 4.6vh), 42px); line-height: 1.55; letter-spacing: -.025em; font-weight: 600; }
.quote-line { display: block; white-space: nowrap; }
.hero-rule { display: block; flex: 0 0 auto; width: 74px; height: 2px; margin-top: clamp(16px, 5vh, 40px); background: var(--blue); transform-origin: left center; }
.hero-visual { position: relative; min-width: 0; overflow: hidden; background: #6aa8e8; }
.hero-visual picture, .hero-visual img { display: block; width: 100%; height: 100%; }
.hero-visual img { object-fit: cover; object-position: 48% 74%; will-change: transform; }
.hero-visual::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 22%; background: linear-gradient(90deg, #edf6ff 0%, rgba(237,246,255,.74) 38%, transparent 100%); pointer-events: none; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: 46px; height: 46px; margin-left: -23px; display: grid; place-items: center; color: var(--ink); text-decoration: none; }
.scroll-cue span { width: 12px; height: 12px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }

@supports (height: 100dvh) {
  .hero { height: 100dvh; }
}

.profile { display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr); gap: clamp(52px, 6.1vw, 96px); padding-top: clamp(88px, 10vw, 152px); padding-bottom: clamp(88px, 10vw, 156px); align-items: start; }
.identity { align-self: start; }
.portrait-wrap { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #d7e5ed; }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 55%; }
.identity-copy { padding-top: clamp(34px, 3.3vw, 52px); }
.name-row { display: flex; align-items: baseline; gap: 20px; }
.name-row h1 { margin: 0; font-size: clamp(40px, 4vw, 66px); line-height: 1; letter-spacing: -.055em; font-weight: 680; }
.identity-alias { color: #344054; font: 600 clamp(17px, 1.4vw, 22px)/1 Georgia, serif; letter-spacing: .06em; }
.personality { margin: 22px 0 0; color: var(--blue); font: 700 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .24em; }
.name-rule { display: block; width: 48px; height: 3px; margin: 10px 0 32px; background: var(--blue); }
.honors { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.honors::before { content: ""; position: absolute; left: 10px; top: 11px; bottom: 11px; width: 1px; background: #cbd5e1; }
.honors li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 15px; align-items: start; font-size: 15px; line-height: 1.72; }
.honor-mark { position: relative; z-index: 1; width: 21px; height: 21px; margin-top: 2px; border: 1px solid #98a2b3; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 4px var(--paper); }
.honor-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); transform: translate(-50%, -50%); }
.honor-copy { min-width: 0; }
.honor-main, .honor-detail { display: block; }
.honor-detail { margin-top: 4px; color: #475467; font-size: 13px; line-height: 1.62; }

.biography { max-width: 760px; padding-top: 4px; }
.biography p { margin: 0; font-size: clamp(16.5px, 1.24vw, 18px); line-height: 1.96; letter-spacing: .005em; text-align: justify; text-justify: inter-ideograph; }
.biography p + p { margin-top: clamp(34px, 3.2vw, 52px); padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid var(--line); }
.biography a { color: #244ec9; text-decoration-color: rgba(36,78,201,.35); transition: color 180ms var(--ease-ui), text-decoration-color 180ms var(--ease-ui); overflow-wrap: anywhere; }
.biography a:hover, .biography a:focus-visible { color: var(--blue); text-decoration-color: currentColor; }

.publication { padding-bottom: clamp(90px, 10vw, 150px); }
.publication-rule { display: block; width: 100%; height: 1px; background: var(--red); transform-origin: left center; }
.publication-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(38px, 4.2vw, 64px); padding-top: 38px; align-items: start; }
.eyebrow { margin: 0; color: var(--blue); font-size: 11px; line-height: 1.4; letter-spacing: .18em; font-weight: 750; }
.publication-media { width: 100%; max-width: 300px; margin: 0; min-width: 0; }
.publication-media .eyebrow { margin-bottom: 18px; }
.publication-media picture { display: block; overflow: hidden; border: 1px solid #d7dee8; background: var(--white); }
.publication-media img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: contain; transition: transform 500ms var(--ease-out); }
.publication:hover .publication-media img { transform: scale(1.012); }
.publication-copy { padding-top: 31px; }
.publication h2 { margin: 0; font: 500 clamp(27px, 2.8vw, 44px)/1.18 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.publication h2 a { text-decoration: none; background-image: linear-gradient(var(--red), var(--red)); background-position: 0 100%; background-size: 0 1px; background-repeat: no-repeat; transition: background-size 220ms var(--ease-ui); }
.publication h2 a:hover, .publication h2 a:focus-visible { background-size: 100% 1px; }
.journal { margin: 18px 0 0; color: var(--red); font: italic 18px/1.5 Georgia, serif; }
.authors { max-width: 980px; margin: 18px 0 0; color: #475467; font-size: 14px; line-height: 1.75; }
.publication-actions { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 16px; }
.github-link { display: inline-block; min-height: 44px; padding: 10px 0; color: var(--blue); font-size: 14px; font-weight: 650; }
.more-button { flex: 0 0 auto; min-width: 116px; height: 44px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #aeb8c7; border-radius: 999px; color: var(--ink); background: transparent; font: 650 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; opacity: 1; cursor: default; transform: translateY(10px); }
.more-button span:last-child { color: var(--blue); font-size: 18px; font-weight: 400; }

.activity { padding: clamp(54px, 6vw, 88px) 0 clamp(76px, 8vw, 118px); border-top: 1px solid var(--line); }
.activity-status { margin: 0 0 18px; color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.activity-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(34px, 5vw, 76px); }
.chart-panel { min-width: 0; padding-top: 28px; border-top: 1px solid #bfc8d5; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; min-height: 52px; }
.chart-head h3 { margin: 0; font-size: 17px; line-height: 1.4; }
.chart-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.task-total { color: var(--blue); font: 500 clamp(34px, 3.3vw, 52px)/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.task-chart { height: 340px; display: grid; grid-template-columns: repeat(7, minmax(30px, 1fr)); gap: clamp(8px, 1.15vw, 18px); align-items: end; padding-top: 24px; border-bottom: 1px solid var(--line); }
.task-day { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; gap: 12px; min-width: 0; }
.task-bar-area { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.task-fill { width: clamp(16px, 1.5vw, 24px); height: 32px; min-height: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--blue-2), var(--blue)); transform: scaleY(0); transform-origin: center bottom; transition: transform 420ms var(--ease-out); }
.task-value { color: var(--ink); font: 600 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; opacity: 0; transition: opacity 220ms var(--ease-ui) 240ms; }
.task-level-0 { height: 32px; }
.task-level-1 { height: 43px; }
.task-level-2 { height: 54px; }
.task-level-3 { height: 65px; }
.task-level-4 { height: 76px; }
.task-level-5 { height: 87px; }
.task-level-6 { height: 98px; }
.task-level-7 { height: 109px; }
.task-level-8 { height: 120px; }
.task-level-9 { height: 131px; }
.task-level-10 { height: 142px; }
.task-level-11 { height: 153px; }
.task-level-12 { height: 164px; }
.task-level-13 { height: 175px; }
.task-level-14 { height: 186px; }
.task-level-15 { height: 197px; }
.task-level-16 { height: 208px; }
.task-level-17 { height: 219px; }
.task-level-18 { height: 230px; }
.task-level-19 { height: 240px; }
.task-level-20 { height: 250px; }
.task-fill.is-zero { height: 3px; }
.task-day:nth-child(2) .task-fill { transition-delay: 45ms; }
.task-day:nth-child(3) .task-fill { transition-delay: 90ms; }
.task-day:nth-child(4) .task-fill { transition-delay: 135ms; }
.task-day:nth-child(5) .task-fill { transition-delay: 180ms; }
.task-day:nth-child(6) .task-fill { transition-delay: 225ms; }
.task-day:nth-child(7) .task-fill { transition-delay: 270ms; }
.task-label { display: grid; gap: 3px; padding-bottom: 10px; text-align: center; color: var(--muted); font-size: 10px; line-height: 1.2; white-space: nowrap; }
.activity.is-visible .task-fill { transform: scaleY(1); }
.activity.is-visible .task-value { opacity: 1; }

.legend { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.legend i { display: block; width: 10px; height: 10px; }
.lv0 { background: #eef2f7; }
.lv1 { background: #dbe7ff; }
.lv2 { background: #9cbbff; }
.lv3 { background: #527ff5; }
.lv4 { background: #1547ed; }
.heatmap-wrap { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: stretch; margin-top: 24px; }
.weekday-labels { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 4px; height: auto; color: var(--muted); font-size: 9px; line-height: 1; align-items: center; }
.heatmap { --weeks: 20; width: 100%; height: auto; aspect-ratio: var(--weeks) / 7; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.heat-cell { width: 100%; min-width: 0; border: 0; border-radius: 1px; padding: 0; opacity: 0; transform: translateY(3px); transition: opacity 260ms var(--ease-ui) var(--delay, 0ms), transform 260ms var(--ease-ui) var(--delay, 0ms), outline-color 180ms var(--ease-ui); cursor: default; }
.activity.is-visible .heat-cell { opacity: 1; transform: translateY(0); }
.heat-cell.today { outline: 1.5px solid var(--red); outline-offset: 1px; }
.heat-cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.heat-cell.empty { visibility: hidden; }

.noscript { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10; margin: 0; padding: 12px; background: var(--ink); color: white; text-align: center; font-size: 13px; }

.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.js .quote-mark { animation: heroIn 480ms var(--ease-out) 120ms both; }
.js .hero blockquote { animation: heroIn 680ms var(--ease-out) 220ms both; }
.js .hero-rule { animation: ruleIn 380ms var(--ease-out) 520ms both; }
.js .hero-visual img { animation: imageIn 900ms var(--ease-out) both; }
.js .scroll-cue { animation: cueBreath 1800ms var(--ease-ui) 1000ms infinite; }

@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes imageIn { from { opacity: .45; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@keyframes cueBreath { 0%, 100% { transform: translateY(0); opacity: .52; } 50% { transform: translateY(6px); opacity: 1; } }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (min-width: 1200px) {
  .identity { position: sticky; top: 32px; }
}

@media (max-width: 1199px) {
  .shell { width: min(100% - 64px, 1100px); }
  .profile { grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); gap: 48px; }
  .biography p { font-size: 16.5px; line-height: 1.88; }
  .activity-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 36px; }
}

@media (max-width: 767px) {
  .shell { width: calc(100% - 40px); }
  .hero { min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 48%) minmax(0, 52%); }
  .hero-copy { min-height: 0; padding: max(clamp(10px, 4vh, 40px), env(safe-area-inset-top)) 20px clamp(10px, 3vh, 32px); align-self: stretch; }
  .quote-mark { margin-bottom: clamp(6px, 1.8vh, 14px); font-size: clamp(34px, min(10vw, 8vh), 48px); }
  .hero blockquote { font-size: clamp(14px, min(5.7vw, 3.6vh), 28px); line-height: 1.42; }
  .hero-rule { width: 54px; margin-top: clamp(10px, 3vh, 26px); }
  .hero-visual { grid-row: 2; }
  .hero-visual::before { inset: 0 0 auto; width: 100%; height: 16%; background: linear-gradient(180deg, #edf6ff 0%, transparent 100%); }
  .hero-visual img { object-position: 50% 72%; }
  .scroll-cue { left: auto; right: 14px; bottom: 18px; }
  .profile { grid-template-columns: 1fr; gap: 58px; padding-top: 72px; padding-bottom: 88px; }
  .identity { display: contents; }
  .portrait-wrap { grid-row: 1; }
  .identity-copy { grid-row: 2; padding-top: 0; }
  .biography { grid-row: 3; max-width: none; }
  .name-row h1 { font-size: 46px; }
  .honors { gap: 20px; }
  .honors li { font-size: 14px; }
  .biography p { font-size: 16px; line-height: 1.84; text-align: left; }
  .biography p + p { margin-top: 30px; padding-top: 30px; }
  .publication-grid { grid-template-columns: 1fr; gap: 24px; }
  .publication-media { max-width: 280px; }
  .publication-copy { padding-top: 0; }
  .publication h2 { font-size: 27px; }
  .journal { font-size: 16px; }
  .activity { padding-top: 68px; }
  .activity-status { margin-bottom: 14px; text-align: left; }
  .activity-grid { grid-template-columns: 1fr; gap: 62px; }
  .chart-head { min-height: 52px; }
  .task-chart { height: 340px; gap: 8px; }
  .task-fill { width: clamp(14px, 4.8vw, 20px); }
  .heatmap { gap: 3px; }
  .weekday-labels { gap: 3px; }
  .publication-actions { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767px) and (max-height: 420px) {
  .hero { grid-template-rows: minmax(0, 56%) minmax(0, 44%); }
  .hero-copy { padding: max(6px, env(safe-area-inset-top)) 20px 6px; }
  .quote-mark { margin-bottom: 2px; font-size: 28px; }
  .hero blockquote { font-size: clamp(14px, min(5vw, 4.6vh), 20px); line-height: 1.32; }
  .hero-rule { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .heat-cell, .task-fill, .task-value { opacity: 1; transform: none; }
}