:root {
  color-scheme: dark;
  --bg: #171921;
  --ink: #f0ede5;
  --muted: #c0bdcb;
  --rule: #484754;
  --warm: #f0d5b4;
  --lilac: #c4bed9;
  --focus: #f9dbad;
  --song: "Songti SC", "Noto Serif CJK SC", "STSong", serif;
}

body {
  isolation: isolate;
  background-color: var(--bg);
  color: var(--ink);
}
.reading-ripple { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .reading-ripple { display: none; } }
.shell { width: min(100% - 96px, 1460px); margin-inline: auto; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 20px; }
.icon-library { position: absolute; pointer-events: none; }
.link-icon {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .24s ease;
}
a:is(:hover, :focus-visible) > .link-icon { transform: translateY(-1.5px); }

.mast {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--rule);
}
.wordmark { justify-self: start; font: 700 12px var(--mono); letter-spacing: .12em; white-space: nowrap; }
.wordmark-divider { color: var(--lilac); margin-inline: 4px; }
.mast nav { display: flex; gap: clamp(15px, 3.1vw, 44px); }
.mast nav a, .motion { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; color: var(--muted); }
.footer a:hover { color: var(--ink); }
.motion { justify-self: end; white-space: nowrap; padding: 0; }

.hero { position: relative; isolation: isolate; }
.water { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(ellipse at 76% 53%, #30303f 0, #20212d 49%, #191b23 100%); }
.water canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; cursor: grab; }
.water canvas:active { cursor: grabbing; }
.water::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #191b23e0 4%, #191b2380 32%, transparent 59%), linear-gradient(0deg, #191b23 1%, transparent 32%);
}
.hero-main { display: grid; align-items: center; min-height: clamp(465px, 64svh, 690px); pointer-events: none; }
.intro { align-self: center; padding: 38px 0 42px clamp(24px, 4vw, 64px); position: relative; z-index: 1; }
.identity { display: flex; align-items: center; gap: 12px; }
.identity img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 28%; border: 1px solid #d4c6d28c; }
.identity-name { font-size: 17px; font-weight: 700; }
.identity-latin { margin-left: 7px; color: var(--lilac); font: 10px var(--mono); letter-spacing: .09em; }
.identity .role { margin-top: 3px; font-size: 12px; color: var(--muted); }
.intro h1 { font: 800 clamp(52px, 5.8vw, 96px)/1.04 var(--song); letter-spacing: -.083em; margin: 24px 0 16px; white-space: nowrap; transition: color .34s ease; }
.title-stop { color: var(--lilac); }
.mast :is(a, button, .wordmark-divider),
.intro :is(.title-stop, .identity-name, .identity-latin, .role, .lede, .actions .text-link),
.footer .name-accent { transition: color .34s ease; }
.mast :is(a, button):focus-visible, .wordmark:focus-visible .wordmark-divider,
.actions .text-link:focus-visible { color: var(--warm); }

@media (hover: hover) {
  .intro :is(h1, .identity-name, .role, .lede) { width: fit-content; pointer-events: auto; }
  .mast :is(a, button):hover, .wordmark:hover .wordmark-divider,
  .intro :is(.identity-name, .role, .lede, .actions .text-link):hover,
  .intro h1:hover, .intro h1:hover .title-stop, .identity-name:hover .identity-latin,
  .footer .name-accent:hover { color: var(--warm); }

  @supports (background-clip: text) {
    @media (forced-colors: none) {
      .intro h1, .intro h1:hover {
        color: transparent;
        background: linear-gradient(105deg, #e6bd8f, #fae6cc 40%, var(--ink) 59%) 100% 50% / 250% 100%;
        background-clip: text;
        transition: background-position .62s cubic-bezier(.23, .65, .24, 1);
      }
      .intro h1:hover { background-position: 0% 50%; }
    }
  }
}
.lede { color: #e1dce8; font-size: clamp(14px, 1.3vw, 17px); max-width: 24em; line-height: 1.77; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 23px; width: fit-content; }
.actions > * { pointer-events: auto; }
.primary { display: inline-flex; gap: 17px; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 14px; border: 1px solid var(--warm); background: var(--warm); color: #2b2530; font-size: 13px; font-weight: 670; transition: background-color .28s, color .28s; }
.primary:is(:hover, :focus-visible) { background-color: #29232c; color: var(--warm); }
.primary .link-icon { width: 19px; height: 19px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 13px; color: var(--muted); }
.text-link:hover { color: var(--ink); }

.content {
  display: grid;
  grid-template-columns: minmax(180px, 30%) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 78px);
  border-top: 1px solid var(--rule);
  padding: clamp(36px, 5vw, 72px) clamp(8px, 2vw, 30px);
}
.section-head .eyebrow { font-size: 11px; color: var(--lilac); }
.section-head h2 { font: 750 clamp(36px, 4.2vw, 62px)/1.14 var(--song); letter-spacing: -.065em; margin-top: 8px; }
.section-head > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 12px; max-width: 18em; }
.section-body h3 { font-size: clamp(16px, 1.55vw, 20px); line-height: 1.4; letter-spacing: -.025em; }
.section-body p { font-size: 14px; color: #cec9d7; line-height: 1.75; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: minmax(145px, 24%) minmax(0, 1fr); gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--rule); }
.timeline li:first-child { padding-top: 0; }
.timeline .date { color: var(--lilac); font-size: 11px; letter-spacing: .055em; padding-top: 4px; }
.timeline h3 { margin-bottom: 5px; }
.timeline .position { color: var(--warm); font-size: 12px; margin: -2px 0 5px; }
.education { padding-top: 20px; }
.education h3 { margin-bottom: 6px; font-size: 15px; }
.education p { margin-top: 4px; }
.education span { color: var(--lilac); white-space: nowrap; font: 11px var(--mono); margin-left: 6px; }
.capabilities, .projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 23px; }
.capabilities article, .projects article { border-top: 1px solid var(--rule); padding: 17px 2px 22px; }
.projects article { display: flex; flex-direction: column; }
.capabilities h3, .projects h3 { margin-bottom: 7px; }
.projects .project-status { color: var(--warm); font-size: 12px; margin-bottom: 6px; }
.project-links { display: flex; gap: 0 14px; flex-wrap: wrap; margin-top: auto; }
.project-links a, .more-projects a { color: var(--warm); font-size: 12px; text-decoration: underline; text-decoration-color: #9a847e; text-underline-offset: 4px; }
.project-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
.project-links a + a { color: var(--muted); }
.project-links a:hover, .more-projects a:hover { color: var(--ink); }
.more-projects { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 15px; }
.more-projects h3 { font-size: 15px; }
.more-projects a { display: inline-flex; align-items: center; gap: 5px; font-size: inherit; }
.footer {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto auto;
  align-items: start;
  gap: 8px clamp(22px, 5vw, 64px);
  padding-block: clamp(22px, 3.3vw, 44px);
  border-top: 1px solid var(--rule);
  color: var(--muted);
}
.footer-author p { color: var(--ink); font: 750 24px/1.3 var(--song); }
.footer-icons { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0 -9px; }
.footer-icons a { display: grid; place-items: center; width: 44px; height: 44px; transition: color .22s ease; }
.footer-icons .footer-mark { filter: invert(1); opacity: .76; transition: filter .22s ease, opacity .22s ease; }
.footer-icons a:is(:focus-visible, :active) { color: var(--warm); }
.footer-icons a:is(:focus-visible, :active) .footer-mark {
  filter: invert(89%) sepia(33%) saturate(400%) hue-rotate(318deg) brightness(.97);
  opacity: 1;
}
@media (hover: hover) {
  .footer-icons a:hover { color: var(--warm); }
  .footer-icons a:hover .footer-mark {
    filter: invert(89%) sepia(33%) saturate(400%) hue-rotate(318deg) brightness(.97);
    opacity: 1;
  }
}
.footer-links { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 clamp(16px, 3vw, 42px); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.back-to-top { display: inline-flex; align-items: center; align-self: end; gap: 8px; min-height: 48px; padding-inline: 10px 0; color: var(--warm); font-size: 16px; font-weight: 620; white-space: nowrap; }
.back-to-top span { font-size: 19px; }

.workbench { margin-bottom: 28px; }
.workbench-head {
  border-top: 1px solid var(--rule);
  padding-block: clamp(18px, 2.5vw, 34px) 10px;
  cursor: pointer;
  list-style: none;
}
.workbench-head::-webkit-details-marker { display: none; }
.workbench-head h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  font: 750 clamp(36px, 4.2vw, 62px)/1.14 var(--song);
  letter-spacing: -.065em;
}
.workbench-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--rule);
  color: var(--warm);
  font: 600 14px/1.2 system-ui, sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
}
.workbench-head:hover .workbench-toggle { border-color: var(--warm); }
.collapse-label, .workbench-disclosure[open] .expand-label { display: none; }
.workbench-disclosure[open] .collapse-label { display: inline; }
.workbench-actions { display: flex; justify-content: flex-end; }
.canvas-launch { color: var(--warm); }
#experience-crm { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1050px) {
  .shell { width: calc(100% - 52px); }
  .intro { padding-left: 25px; }
  .intro h1 { font-size: clamp(46px, 5.85vw, 72px); }
}

@media (max-width: 730px) {
  .shell { width: calc(100% - 28px); }
  .mast { min-height: 58px; gap: 10px; }
  .wordmark { font-size: 11px; letter-spacing: .04em; }
  .wordmark-divider { margin-inline: 0; }
  .mast nav { gap: 11px; }
  .mast nav a, .motion { font-size: 11px; }
  .hero-main { min-height: 415px; }
  .intro { padding: 28px 13px 82px; }
  .identity img { width: 38px; height: 38px; }
  .identity-name { font-size: 15px; }
  .intro h1 { font-size: clamp(42px, 10.4vw, 73px); margin: 15px 0 10px; }
  .lede { font-size: 14px; line-height: 1.62; max-width: 29em; }
  .actions {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 2px 16px;
    margin-top: 13px;
  }
  .actions .text-link { width: fit-content; }
  .primary { min-height: 44px; }
  .water::after { background: linear-gradient(180deg, #191b23bd 0%, #191b2380 58%, #191b23); }
  .content { grid-template-columns: 1fr; gap: 21px; padding: 30px 5px; }
  .section-head > p:last-child { max-width: 28em; margin-top: 5px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .capabilities, .projects { column-gap: 14px; }
  .footer { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; }
  .footer-links a { font-size: 13px; }
  .back-to-top { grid-column: 2; justify-self: end; }
}

@media (max-width: 560px) {
  .projects { grid-template-columns: 1fr; }
  .projects article { padding: 14px 0 12px; }
  .footer-author { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .mast { gap: 7px; }
  .mast nav { gap: 8px; }
  .identity-latin { display: none; }
  .intro h1 { font-size: 40px; }
  .capabilities { grid-template-columns: 1fr; }
}

.workbench-frame {
  display: block;
  width: min(100%, 1460px);
  height: clamp(650px, calc(100svh - clamp(148px, 11.5vw, 178px)), 1000px);
  margin-inline: auto;
  border: 0;
  background: #e6e1d5;
}
@media (max-width: 900px) {
  .workbench-frame { width: calc(100% - 28px); height: 70svh; min-height: 420px; }
}