:root {
  color-scheme: dark;
  --canvas: #080808;
  --surface: #131313;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --blue: #2997ff;
  --action: #2997ff;
  --line: #292929;
  --lime: #2997ff;
  --detail-bg: #080808;
  --detail-copy: #a1a1a6;
  --detail-title: #f5f5f7;
  --detail-button-bg: #2997ff;
  --detail-button-ink: #080808;
  --detail-logo-font: 600 22px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
  --detail-logo-spacing: -.5px;
  --detail-logo-transform: none;
  --detail-kicker-font: 600 14px/1.5 -apple-system, BlinkMacSystemFont, sans-serif;
  --character-scale: .98;
  --character-x: 41%;
  --character-y: 21%;
  --logic-size: 13.5vw;
  --logic-spacing: .1em;
  --logic-y: -122px;
  --introduction-y: 92px;
}
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; scroll-padding-top: 76px; }
body { width: 100%; min-width: 0; max-width: 100%; margin: 0; overflow-x: clip; background: var(--canvas); color: var(--ink); font: 400 17px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
main, section { min-width: 0; max-width: 100%; }
img, video, svg, canvas { max-width: 100%; }
button, a { font: inherit; color: inherit; }
a { text-decoration: none; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: clamp(28px, 3.15vw, 40px); line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
h3 { font-size: 19px; line-height: 1.5; font-weight: 600; }
p { color: var(--muted); }
.wrap { min-width: 0; width: min(1200px, calc(100% - 96px)); max-width: 100%; margin-inline: auto; }
.section { padding-block: 88px; scroll-margin-top: 72px; }
.collection > .wrap { border-top: 1px solid var(--line); padding-top: 48px; }
.eyebrow { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.skip-link { position: fixed; z-index: 50; left: 16px; top: 8px; transform: translateY(-150%); padding: 12px 20px; background: var(--action); color: var(--canvas); border-radius: 24px; }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--canvas); }
.navigation { min-height: 56px; display: flex; align-items: center; gap: 32px; }
.wordmark { font-size: 22px; font-weight: 600; letter-spacing: -.04em; line-height: 1; display: inline-flex; align-items: center; min-height: 44px; }
.site-links { display: flex; align-items: center; justify-content: center; gap: 28px; margin-left: auto; }
.site-links a { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; color: #ccc; }
.site-links a:hover, .site-links a[aria-current="location"] { color: #fff; }
.menu-toggle { display: none; }
.hero { position: relative; background: var(--surface); }
.hero::after { content: ''; position: absolute; height: 1px; bottom: 0; left: 0; right: 0; background: var(--line); }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; width: min(1200px, calc(100% - 96px)); min-height: 340px; height: calc((100svh - 56px) * .54); }
.hero h1 { align-self: center; padding-top: 24px; font-size: clamp(124px, var(--logic-size), 196px); line-height: .92; font-weight: 600; letter-spacing: var(--logic-spacing); transform: translateY(var(--logic-y)); }
.hero-stage { position: relative; z-index: 4; min-width: 0; width: 149%; max-width: 912px; aspect-ratio: 3 / 2; align-self: end; justify-self: end; transform: translate(var(--character-x), var(--character-y)) scale(var(--character-scale)); transform-origin: 50% 100%; pointer-events: none; }
.hero-portrait { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; }
.hero-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.hero-clip.is-visible { opacity: 1; }
.hero-stage:has(.hero-clip.is-visible) .hero-portrait { opacity: 0; }
.button-primary { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border-radius: 999px; padding: 10px 24px; background: var(--action); color: var(--canvas); font-size: 17px; line-height: 1.5; transition: transform .15s ease; }
.button-primary:active { transform: scale(.97); }
.text-link { color: var(--blue); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.text-link:hover, .contact-email:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.about-section { min-height: calc((100svh - 56px) * .46); padding-block: 32px 40px; }
.introduction { position: relative; z-index: 2; width: min(1200px, calc(100% - 96px)); margin-top: var(--introduction-y); }
.introduction h2 { font-size: 24px; margin-bottom: 16px; }
.introduction-copy { max-width: min(540px, calc((100% - 32px) / 2.2)); }
.introduction-copy p { font-size: 17px; line-height: 1.8; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 12px; }
.experience-section { padding-top: 0; }
.career { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; margin-top: 40px; }
.company > p { margin-top: 10px; font-size: 15px; }
.company .company-note { max-width: 27em; margin-top: 24px; }
.career-roles { margin: 0; padding: 0; list-style: none; }
.career-roles li + li { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.career-roles h3 { margin-block: 4px 10px; }
.role-period { font-size: 14px; }
.career-roles li > p, .career-roles details p { font-size: 16px; line-height: 1.75; }
.career-roles summary { cursor: pointer; color: var(--muted); font-size: 14px; padding-block: 10px; min-height: 44px; }
.career-roles summary:hover { color: var(--ink); }
.career-roles details p { padding-top: 4px; }
.career-roles details p + p { padding-top: 10px; }
.credentials { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.credential { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content); align-items: baseline; gap: 12px; min-width: 0; color: var(--muted); font-size: 14px; }
.credential > * { min-width: 0; overflow-wrap: anywhere; }
.credential strong { color: var(--ink); font-size: 15px; font-weight: 600; }
.credential time { color: #c5c5ca; white-space: nowrap; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.section-heading > p { font-size: 16px; max-width: 26em; }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.card { min-width: 0; }
.card-link { display: block; height: 100%; border-radius: 8px; }
.card-art { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; background: var(--surface); border-radius: 8px; position: relative; }
.card-art img, .card-art video { display: block; width: 100%; height: 100%; object-fit: contain; }
.card h3 { margin-top: 16px; min-height: 3em; font-size: 17px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.card .group { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.5; }
.card-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.card-error { position: absolute; inset: 0; background: var(--surface); padding: 16px; display: grid; place-content: center; color: var(--muted); text-align: center; font-size: 14px; }
.closing { padding-block: 88px 64px; border-top: 1px solid var(--line); }
.closing-inner { display: grid; gap: 72px; }
.personal-copy { max-width: 900px; }
.interests { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 28px 0 0; }
.interests li { color: var(--muted); font-size: 17px; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: start; gap: clamp(40px, 8vw, 128px); padding-top: 48px; border-top: 1px solid var(--line); text-align: left; }
.contact h2 { text-wrap: balance; }
.contact p:not(.eyebrow) { margin-top: 16px; max-width: 36em; }
.contact-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; min-width: 0; } .contact-email { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; } .wechat-card { margin: 0; width: 100%; } .wechat-card a, .wechat-card img { display: block; width: 100%; } .wechat-card img { height: auto; } .wechat-card figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--muted); } [aria-disabled="true"] { cursor: default; }
.site-footer { border-top: 1px solid var(--line); padding-block: 20px; }
.footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; font-size: 12px; color: var(--muted); }
.footer-inner span { margin-right: auto; }
.footer-inner > a { min-height: 44px; display: inline-flex; align-items: center; }
.participated { padding-block: 0 64px; }
.participated h2 { font-size: 17px; color: var(--muted); margin-bottom: 24px; }
.participated ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; padding: 0; margin: 0; list-style: none; }
.participated li { font-size: 14px; color: var(--muted); }
/* The existing review tools remain available explicitly, outside the visitor flow. */
body:not(.review) .review-toolbar, body:not(.review) .review-panel, body:not(.review) .inset-editor { display: none; }
.hero-tuner { position: fixed; z-index: 80; right: 20px; bottom: 20px; width: min(320px, calc(100% - 40px)); padding: 18px; border: 1px solid #3a3a3c; border-radius: 14px; background: #181818f2; box-shadow: 0 18px 60px #0008; color: var(--ink); font-size: 13px; }
.hero-tuner h2 { margin-bottom: 12px; font-size: 16px; }
.hero-tuner label { display: grid; grid-template-columns: 88px minmax(0, 1fr) 52px; align-items: center; gap: 10px; min-height: 38px; }
.hero-tuner input { width: 100%; accent-color: var(--blue); }
.hero-tuner output { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.hero-tuner-actions { display: flex; gap: 8px; margin-top: 12px; }
.hero-tuner button { flex: 1; min-height: 38px; border: 1px solid #444; border-radius: 20px; color: var(--ink); }
.hero-tuner button:first-child { border-color: var(--blue); color: var(--blue); }
.hero-tuner h2 { display: flex; justify-content: space-between; align-items: center; }
.hero-tuner h2 button { flex: none; padding: 4px 12px; font-size: 13px; }
.hero-tuner textarea { width: 100%; height: 100px; margin-top: 10px; background: #101010; color: var(--ink); }
.hero-tuner-toggle { position: fixed; z-index: 80; right: 20px; bottom: 20px; padding: 10px 20px; border-radius: 24px; background: var(--blue); color: #080808; }
@media (max-width: 1599px) {
  .hero-stage { width: 118%; transform: translate(6%, 16%) scale(var(--character-scale)); }
}
@media (max-width: 1099px) {
  :root { --logic-y: 0px; --introduction-y: 0px; }
  .wrap { width: calc(100% - 64px); }
  .hero-inner, .introduction { width: calc(100% - 64px); }
  .credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
  .credential { grid-template-columns: minmax(0, 1fr) max-content; gap: 2px 12px; }
  .credential > span { grid-column: 1 / -1; }
  .work-grid, .participated ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navigation { gap: 20px; }
  .site-links { gap: 16px; }
  .career { gap: 40px; grid-template-columns: 1fr 1.5fr; }
}
@media (max-width: 833px) {
  .navigation { position: relative; flex-wrap: wrap; gap: 0; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; margin-left: auto; padding: 0 16px; }
  .site-links { display: none; order: 4; flex-basis: 100%; padding: 12px 0 24px; margin: 0; }
  .site-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .site-links a { font-size: 17px; min-height: 48px; }
}
@media (max-width: 699px) {
  .wrap { width: calc(100% - 40px); }
  .section { padding-block: 48px; }
  .hero-inner { width: calc(100% - 40px); height: clamp(310px, 40svh, 360px); min-height: 0; display: block; padding-top: 0; }
  .hero h1 { position: absolute; z-index: 2; left: 0; top: 28%; font-size: clamp(56px, 17vw, 78px); padding-top: 0; transform: none; }
  .hero-stage { position: absolute; right: -40px; bottom: 0; width: min(90vw, 420px); max-width: none; transform: scale(var(--character-scale)); }
  .about-section { min-height: 0; padding-block: 72px 56px; }
  .introduction { width: calc(100% - 40px); }
  .introduction-copy { max-width: none; }
  .collection > .wrap { padding-top: 32px; }
  .card h3 { min-height: 0; }
  .career { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .introduction-copy p { font-size: 16px; }
  .experience-section { padding-top: 8px; }
  .career { margin-top: 28px; }
  .company .company-note { margin-top: 12px; }
  .credentials { margin-bottom: 20px; padding-bottom: 18px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .credential { grid-template-columns: 1fr; gap: 2px; }
  .credential > span { grid-column: auto; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-heading > p { margin-top: 16px; }
  .section-heading > p br { display: none; }
  .work-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .participated { padding-block: 0 24px; }
  .participated ul { grid-template-columns: minmax(0, 1fr); gap: 14px 20px; }
  .closing { padding-block: 56px 40px; }
  .closing-inner { gap: 48px; }
  .interests { gap: 10px 20px; margin-top: 20px; }
  .contact { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px; padding-top: 36px; }
  .contact-action { margin-top: 24px; }
  .footer-inner { gap: 4px 20px; }
  .footer-inner span { flex: 1; }
}
@media (max-width: 430px) {
  .interests li, .contact-email { font-size: 16px; }
}
@media (max-width: 359px) {
  .wrap { width: calc(100% - 32px); }
}
.proportional-mobile { --character-y: 32%; }
.proportional-mobile .hero-inner { height: 574px; }
.proportional-mobile .about-section { min-height: 490px; }
.proportional-mobile .hero-tuner { right: 32px; bottom: 32px; width: 1480px; max-height: calc(100dvh - 64px); overflow: auto; padding: 48px; border-radius: 48px; font-size: 54px; }
.proportional-mobile .hero-tuner h2 { margin-bottom: 24px; font-size: 68px; }
.proportional-mobile .hero-tuner h2 button { padding: 12px 40px; font-size: 54px; }
.proportional-mobile .hero-tuner label { grid-template-columns: 380px minmax(0, 1fr) 200px; gap: 24px; min-height: 150px; }
.proportional-mobile .hero-tuner input { height: 100px; }
.proportional-mobile .hero-tuner-actions { gap: 32px; margin-top: 28px; }
.proportional-mobile .hero-tuner-actions button { min-height: 140px; }
.proportional-mobile .hero-tuner textarea { height: 320px; font-size: 48px; }
.proportional-mobile .hero-tuner-toggle { right: 32px; bottom: 32px; padding: 36px 80px; border-radius: 100px; font-size: 60px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}