:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #202124;
  --muted: #62666d;
  --line: #e5e7eb;
  --blue: #3156c8;
  --maas-paper: #e9eefb;
  --maas-ink: #253e88;
  --skill-paper: #f0eff6;
  --skill-ink: #47415f;
  --radius: 12px;
  --content: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
::selection { background: #dce5ff; color: #1e3479; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 2px; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1 { font-size: 64px; line-height: 1; }
h1, h2, h3 { text-wrap: balance; }
a, button { -webkit-tap-highlight-color: #dce5ff; }
.wrap { width: min(var(--content), calc(100% - 80px)); margin-inline: auto; }
.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-size: 16px; font-weight: 600; white-space: nowrap; }
.brand-mark { width: 32px; height: 30px; color: var(--blue); stroke-width: 2.1; }
.brand-mark circle, .hero-arc circle, .about-arc circle { fill: currentColor; stroke: none; }
nav { display: flex; gap: 32px; }
nav a { color: var(--muted); font-size: 15px; padding-block: 10px; text-decoration: none; }
nav a:hover { color: var(--blue); text-decoration: underline; }
.intro { text-align: center; padding-top: 45px; padding-bottom: 65px; }
.greeting { display: block; font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--muted); margin-bottom: 10px; }
.name { position: relative; display: block; width: max-content; margin-inline: auto; font-size: clamp(36px, 5.2vw, 64px); font-weight: 650; line-height: 1.3; letter-spacing: -.025em; }
.hero-arc { position: absolute; width: 110px; height: 77px; left: calc(100% + 26px); top: -7px; color: var(--blue); stroke-width: 2.5; transform: rotate(8deg); }
.arc-dot { offset-path: path("M8 80Q70-58 132 73"); offset-distance: 100%; cx: 0; cy: 0; animation: parabola 850ms cubic-bezier(.16,1,.3,1) both; }
@keyframes parabola { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.tagline { font-size: 22px; margin-top: 17px; letter-spacing: .01em; }
.intro-copy { color: var(--muted); line-height: 1.9; margin-top: 16px; font-size: 16px; }
.work-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 23px; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.work-link svg { width: 17px; height: 17px; }
.work-link:hover { color: var(--blue); border-color: var(--blue); }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; gap: 16px; }
h2 { font-size: 26px; line-height: 1.45; font-weight: 600; letter-spacing: -.02em; }
.section-note { color: var(--muted); font-size: 14px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; }
.project { min-width: 0; }
.project-visual { position: relative; width: 100%; min-width: 0; aspect-ratio: 1.6; border-radius: var(--radius); overflow: hidden; }
.project-visual figcaption { position: absolute; right: 16px; bottom: 11px; font-size: 11px; line-height: 1.5; color: inherit; opacity: .85; }
.maas-visual { background: var(--maas-paper); color: var(--maas-ink); }
.maas-cover { height: 100%; padding: 25px 32px 34px; display: flex; flex-direction: column; justify-content: space-between; }
.cover-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.cover-monogram { font-size: 22px; font-weight: 750; line-height: 1; display: flex; gap: 1px; align-items: flex-start; }
.small-orbit { width: 6px; height: 6px; border: 1.5px solid var(--maas-ink); border-radius: 50%; }
.maas-wordmark { font-size: clamp(50px, 5.3vw, 78px); line-height: .94; letter-spacing: -.04em; font-weight: 700; padding-block: 12px 8px; }
.maas-wordmark > span { margin-left: 50px; }
.cover-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.cover-bottom svg { width: 25px; height: 25px; }
.skill-visual { background: var(--skill-paper); color: var(--skill-ink); }
.skill-cover { height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 24px 25px 36px; }
.skill-wordmark { font-size: 45px; font-weight: 650; letter-spacing: -.04em; line-height: 1.1; }
.skill-wordmark > span { color: #786d9d; }
.skill-wordmark .wordmark-dot { color: var(--blue); }
.skill-diagram { width: 88%; max-width: 330px; margin-top: 22px; display: flex; align-items: center; flex-direction: column; }
.skill-file { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px; font-weight: 500; }
.skill-file svg { width: 22px; height: 26px; stroke-width: 1.4; }
.branches { height: 34px; width: 69%; border-top: 1px solid #9a94ac; margin-top: 18px; display: flex; justify-content: space-between; position: relative; }
.branches::before { content:""; width: 1px; height: 18px; background: #9a94ac; position: absolute; left: 50%; bottom: 100%; }
.branches span { width: 1px; height: 100%; background: #9a94ac; }
.agent-nodes { display: flex; justify-content: space-between; width: 100%; gap: 10px; }
.agent-nodes span { padding: 5px 10px; text-align: center; background: #e3dfed; border-radius: 6px; font-size: 11px; flex: 1; white-space: nowrap; }
.skill-caption { font-size: 12px; margin-top: 20px; }
.project-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 21px; }
h3 { font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; }
.project-type { color: var(--muted); font-size: 12px; white-space: nowrap; }
.project-purpose { font-size: 17px; line-height: 1.65; margin-top: 6px; }
.project-description { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 33em; }
.text-link { color: var(--blue); display: inline-flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 18px; }
.text-link svg { width: 14px; height: 14px; }
.text-link:hover { text-decoration-thickness: 2px; }
.about { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 90px; border-top: 1px solid var(--line); margin-top: 92px; padding-top: 64px; padding-bottom: 66px; }
.about-heading h2 { font-size: 29px; line-height: 1.6; }
.about-arc { width: 90px; height: 60px; margin-top: 24px; color: var(--blue); stroke-width: 2; transform: rotate(-9deg); }
.about-copy { max-width: 36em; font-size: 16px; line-height: 1.95; color: var(--muted); }
.about-copy > p + p { margin-top: 16px; }
.experience { margin-top: 32px; }
.experience h3 { font-size: 19px; font-weight: 600; color: var(--ink); }
.experience h4 { color: var(--ink); font-size: 19px; font-weight: 600; margin-top: 9px; }
.experience p { font-size: 15px; margin-top: 7px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-block: 27px 34px; font-size: 13px; }
.site-footer p { font-weight: 500; }
.site-footer p span { color: var(--muted); font-weight: 400; margin-left: 20px; }
.back-top { display: flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; padding-block: 10px; white-space: nowrap; }
.back-top svg { width: 14px; height: 14px; }
.back-top:hover { color: var(--blue); }
.skip-link { position: fixed; top: 8px; left: 16px; transform: translateY(-160%); z-index: 5; background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 4px; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 800px) {
  .wrap { width: calc(100% - 48px); }
  .hero-arc { width: 75px; left: calc(100% + 14px); top: -15px; }
  .project-grid { gap: 25px; }
  .maas-cover { padding: 22px 24px 31px; }
  .cover-top { font-size: 10px; }
  .maas-wordmark { font-size: 53px; }
  .skill-wordmark { font-size: 32px; }
  .skill-diagram { margin-top: 13px; }
  .skill-file { font-size: 11px; }
  .branches { height: 20px; margin-top: 13px; }
  .branches::before { height: 13px; }
  .agent-nodes { gap: 5px; }
  .agent-nodes span { font-size: 9px; padding: 4px; }
  .skill-caption { margin-top: 12px; font-size: 10px; }
  .project-title-row { display: block; }
  .project-type { display: block; margin-top: 2px; }
  .about { gap: 40px; }
  .about-heading h2 { font-size: 26px; }
}
@media (max-width: 600px) {
  .site-header { min-height: 76px; gap: 12px; }
  .brand { font-size: 14px; gap: 5px; }
  .brand-mark { width: 27px; }
  nav { gap: 22px; }
  nav a { font-size: 14px; }
  .intro { padding-top: 40px; padding-bottom: 47px; }
  .greeting { font-size: 16px; margin-bottom: 14px; }
  .name { font-size: 36px; letter-spacing: -.025em; }
  .hero-arc { width: 45px; height: 40px; top: -28px; left: auto; right: -23px; transform: rotate(13deg); }
  .tagline { font-size: 19px; margin-top: 17px; }
  .intro-copy { font-size: 15px; margin-top: 14px; }
  .work-link { margin-top: 21px; }
  .section-heading { display: block; margin-bottom: 18px; }
  h2 { font-size: 23px; }
  .section-note { display: block; font-size: 13px; margin-top: 5px; }
  .project-grid { grid-template-columns: 1fr; gap: 43px; }
  .project-visual { min-height: 220px; }
  .maas-cover { display: grid; justify-content: stretch; grid-template-rows: 24px 1fr 20px; padding: 20px 24px 38px; }
  .maas-wordmark { font-size: clamp(44px, 14vw, 72px); align-self: center; padding-block: 5px; }
  .cover-top { font-size: 10px; }
  .cover-bottom { font-size: 11px; }
  .skill-wordmark { font-size: 36px; }
  .skill-diagram { margin-top: 16px; width: 90%; }
  .skill-file { font-size: 12px; }
  .branches { height: 22px; margin-top: 14px; }
  .branches::before { height: 14px; }
  .agent-nodes span { font-size: 10px; }
  .skill-caption { margin-top: 13px; font-size: 11px; }
  .project-visual figcaption { font-size: 11px; bottom: 9px; right: 12px; }
  .project-title-row { display: flex; margin-top: 16px; }
  h3 { font-size: 22px; }
  .project-type { margin: 0; font-size: 11px; }
  .project-purpose { font-size: 16px; }
  .project-description { font-size: 14px; margin-top: 8px; }
  .about { grid-template-columns: 1fr; margin-top: 57px; padding-top: 38px; padding-bottom: 37px; gap: 24px; }
  .about-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .about-heading h2 { font-size: 24px; }
  .about-arc { width: 63px; margin-top: 0; }
  .about-copy { font-size: 15px; }
  .experience { margin-top: 27px; }
  .experience p { font-size: 14px; }
  .site-footer { font-size: 12px; padding-block: 20px; gap: 12px; }
  .site-footer p span { display: block; margin-left: 0; margin-top: 3px; }
}
@media (max-width: 359px) {
  .wrap { width: calc(100% - 40px); }
  nav { gap: 16px; }
  .name { font-size: 32px; }
  .tagline { font-size: 18px; }
  .project-title-row { display: block; }
  .project-type { margin-top: 2px; }
  .skill-cover { padding-inline: 18px; }
  .skill-wordmark { font-size: 30px; }
  .skill-diagram { margin-top: 11px; }
  .skill-caption { margin-top: 9px; font-size: 10px; }
  .about-heading h2 { font-size: 21px; }
  .about-arc { width: 45px; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* v2: portrait-led introduction and brighter project artwork. */
:root { --content: 1120px; --maas-paper: #2747ae; --maas-ink: #f5f7ff; --skill-paper: #e9efc5; --skill-ink: #374124; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.site-header { min-height: 92px; }
.intro { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 32px; text-align: left; padding-top: 44px; padding-bottom: 65px; }
.intro-text { padding-left: 20px; position: relative; z-index: 2; }
.name { margin: 0; font-size: clamp(54px, 5.8vw, 80px); font-weight: 650; line-height: 1.14; letter-spacing: -.035em; }
.name > span { display: block; }
.name-blue { color: var(--blue); position: relative; width: max-content; }
.title-mark { display: inline-block; width: 66px; height: 47px; margin-left: 16px; vertical-align: middle; stroke-width: 2.3; }
.title-mark circle { fill: currentColor; stroke: none; }
.tagline { font-size: 24px; margin-top: 25px; font-weight: 500; }
.intro-copy { font-size: 16px; margin-top: 17px; line-height: 1.95; }
.work-link { margin-top: 27px; gap: 22px; }
.portrait-area { min-width: 0; }
.portrait-stage { height: 475px; position: relative; isolation: isolate; }
.portrait-disc { position: absolute; width: 360px; height: 360px; left: 95px; top: 65px; border-radius: 50%; background: #edf0fc; z-index: -2; }
.portrait-disc::after { content: ""; position: absolute; width: 70px; height: 70px; background: #e9efc5; border-radius: 50%; right: -27px; top: 43px; }
.portrait-orbit { position: absolute; width: 100%; height: 100%; inset: 0; color: var(--blue); stroke-width: 1.6; z-index: -1; overflow: visible; }
.orbit-dot { fill: var(--blue); stroke: white; stroke-width: 3; offset-path: path("M35 375C-25 155 285-35 476 75S542 409 392 427"); offset-distance: 100%; cx: 0; cy: 0; animation: orbit-arrival 1200ms cubic-bezier(.16,1,.3,1) both; }
@keyframes orbit-arrival { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.portrait-illustration { position: absolute; width: 338px; height: 507px; left: 102px; bottom: 0; }
.portrait-illustration img { display: block; width: 100%; height: 100%; object-fit: contain; }
.orbit-project { position: absolute; background: white; box-shadow: 0 9px 25px #25396715; color: var(--ink); text-decoration: none; padding: 15px 19px; border-radius: 12px; z-index: 3; transition: transform 180ms cubic-bezier(.16,1,.3,1), box-shadow 180ms; }
.orbit-project > span:last-child { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; }
.orbit-project-name { display: flex; align-items: center; gap: 22px; font-size: 19px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.orbit-project-name svg { width: 14px; height: 14px; color: var(--blue); }
.orbit-maas { top: 24px; right: -4px; transform: rotate(6deg); }
.orbit-skill { left: 6px; bottom: 75px; transform: rotate(-7deg); }
.orbit-project:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 12px 28px #25396725; }
.curiosity-note { position: absolute; right: -9px; bottom: 49px; width: 109px; height: 120px; transform: rotate(8deg); background: #eff3c8; color: #404826; padding: 15px 15px; font-size: 15px; font-weight: 500; line-height: 1.5; z-index: 2; }
.curiosity-note svg { width: 22px; height: 22px; stroke-width: 1.5; margin-bottom: 8px; }
.work { padding-top: 23px; border-top: 1px solid var(--line); }
.section-heading { margin-bottom: 24px; }
.section-heading h2 { font-size: 28px; }
.maas-cover { padding: 25px 32px 36px; }
.small-orbit { border-color: currentColor; }
.maas-wordmark { font-size: clamp(54px, 5.9vw, 85px); }
.maas-wordmark > span { margin-left: 65px; }
.skill-wordmark > span { color: #6d7c3b; }
.skill-wordmark .wordmark-dot { color: #4f6028; }
.branches { border-color: #7d885a; }
.branches::before, .branches span { background: #7d885a; }
.agent-nodes span { background: #f8faed; }
.project-visual figcaption { opacity: 1; }
.about { margin-top: 78px; }
@media (max-width: 1100px) {
  .intro { gap: 10px; }
  .intro-text { padding-left: 0; }
  .name { font-size: 65px; }
  .portrait-stage { height: 430px; }
  .portrait-disc { width: 310px; height: 310px; left: 65px; top: 77px; }
  .portrait-illustration { width: 290px; height: 435px; left: 77px; }
  .orbit-maas { right: 0; top: 25px; }
  .orbit-skill { left: 0; bottom: 58px; }
  .orbit-project { padding: 12px 14px; }
  .orbit-project-name { font-size: 16px; gap: 14px; }
  .curiosity-note { right: 0; width: 95px; height: 110px; font-size: 13px; bottom: 34px; }
}
@media (max-width: 800px) and (min-width: 601px) {
  .intro { grid-template-columns: 1fr 1.12fr; gap: 5px; padding-top: 33px; padding-bottom: 43px; }
  .name { font-size: 54px; }
  .title-mark { width: 45px; margin-left: 7px; }
  .tagline { font-size: 20px; }
  .intro-copy { font-size: 14px; }
  .portrait-stage { height: 370px; }
  .portrait-disc { width: 260px; height: 260px; left: 40px; top: 72px; }
  .portrait-disc::after { width: 50px; height: 50px; right: -15px; }
  .portrait-illustration { width: 245px; height: 367px; left: 53px; }
  .orbit-project { padding: 10px 12px; }
  .orbit-project-name { font-size: 15px; gap: 10px; }
  .orbit-maas { right: 0; top: 25px; }
  .orbit-skill { bottom: 45px; left: 0; }
  .orbit-project > span:last-child { font-size: 11px; }
  .curiosity-note { width: 82px; height: 97px; font-size: 12px; bottom: 26px; padding: 10px 12px; }
  .curiosity-note svg { width: 18px; height: 18px; }
  .maas-cover { padding: 20px 24px 32px; }
  .maas-wordmark { font-size: 53px; }
}
@media (max-width: 600px) {
  .site-header { min-height: 76px; }
  .intro { grid-template-columns: 1fr; gap: 20px; padding-top: 28px; padding-bottom: 34px; }
  .intro-text { padding-left: 0; }
  .name { font-size: clamp(50px, 13.3vw, 68px); line-height: 1.13; }
  .name > span { display: inline; }
  .name > span:first-child::after { content:""; display: block; }
  .title-mark { width: 50px; height: 36px; margin-left: 15px; }
  .tagline { font-size: 21px; margin-top: 19px; }
  .intro-copy { font-size: 15px; margin-top: 13px; }
  .work-link { margin-top: 18px; }
  .portrait-stage { max-width: 410px; margin-inline: auto; height: 380px; }
  .portrait-disc { width: 282px; height: 282px; top: 70px; left: 50%; transform: translateX(-50%); }
  .portrait-disc::after { width: 50px; height: 50px; right: -14px; }
  .portrait-illustration { width: 256px; height: 384px; left: 50%; transform: translateX(-50%); }
  .orbit-project { padding: 10px 12px; }
  .orbit-project-name { font-size: 16px; gap: 12px; }
  .orbit-maas { right: 1px; top: 0; }
  .orbit-skill { left: 0; bottom: 43px; }
  .orbit-project > span:last-child { font-size: 11px; }
  .curiosity-note { right: 1px; bottom: 25px; width: 87px; height: 103px; padding: 12px; font-size: 12px; }
  .work { padding-top: 28px; }
  .section-heading h2 { font-size: 25px; }
  .maas-cover { padding: 20px 24px 38px; }
  .maas-wordmark { font-size: clamp(44px, 14vw, 72px); }
  .maas-wordmark > span { margin-left: 50px; }
  .about { margin-top: 57px; }
}
@media (max-width: 359px) {
  .name { font-size: 48px; }
  .tagline { font-size: 19px; }
  .intro-copy { font-size: 14px; }
  .portrait-stage { height: 340px; }
  .portrait-disc { width: 237px; height: 237px; top: 76px; }
  .portrait-illustration { width: 225px; height: 337px; }
  .orbit-project { padding: 9px 10px; }
  .orbit-project-name { font-size: 14px; gap: 9px; }
  .orbit-maas { top: 0; right: 0; }
  .orbit-skill { bottom: 34px; }
  .curiosity-note { width: 76px; height: 94px; font-size: 11px; bottom: 20px; padding: 10px; }
  .curiosity-note svg { width: 18px; height: 18px; }
}

/* v3: a playable trajectory, a journal, and a shared-skill demonstration. */
.portrait-orbit { z-index: -1; }
.throw-path { stroke-dasharray: 5 7; opacity: .55; }
.throw-ball { fill: var(--blue); stroke: white; stroke-width: 3; }
.portrait-stage.is-aiming .throw-path { stroke-dasharray: none; opacity: .9; }
.launch-handle { position: absolute; left: 3.2%; top: 81%; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--blue); color: white; display: grid; place-items: center; box-shadow: 0 5px 15px #3156c825; z-index: 4; touch-action: none; cursor: grab; }
.launch-handle svg { width: 20px; height: 20px; }
.launch-handle:active { cursor: grabbing; }
.throw-hint { position: absolute; left: 0; top: 93%; font-size: 11px; color: var(--blue); white-space: nowrap; }
.orbit-skill { bottom: 145px; }
.portrait-stage .orbit-project.is-hit { outline: 2px solid var(--blue); outline-offset: 5px; }
.project-exhibits { display: flex; flex-direction: column; gap: 84px; }
.project-exhibits > article { display: grid; align-items: center; gap: 58px; }
.exhibit-maas { grid-template-columns: .8fr 1.2fr; padding-top: 16px; }
.exhibit-skill { grid-template-columns: 1.2fr .8fr; }
.exhibit-skill .exhibit-copy { grid-column: 2; grid-row: 1; }
.exhibit-skill .sharing-stage { grid-column: 1; grid-row: 1; }
.exhibit-copy h3 { font-size: 44px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; }
.project-title-stop { color: var(--blue); }
.exhibit-copy .project-purpose { margin-top: 20px; font-size: 19px; line-height: 1.7; }
.exhibit-copy .project-description { font-size: 15px; margin-top: 14px; max-width: 28em; }
.exhibit-invitation { margin-top: 28px; color: var(--blue); font-size: 14px; }
.exhibit-copy .text-link { margin-top: 14px; }
.journal-stage { position: relative; min-width: 0; padding: 27px 34px 20px; background: #eef1fc; border-radius: 12px; }
.journal-tabs { display: flex; justify-content: center; gap: 26px; margin-bottom: 29px; }
.journal-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #58648c; padding: 8px 2px; font-size: 14px; }
.journal-tabs button[aria-selected="true"] { color: #2747ae; border-color: #2747ae; font-weight: 600; }
.journal-stack { position: relative; margin-inline: auto; width: min(100%, 390px); perspective: 1200px; isolation: isolate; }
.paper-back { position: absolute; inset: 0; transform-origin: 50% 90%; }
.paper-back-one { background: #a9b8eb; transform: rotate(-5deg); z-index: -2; }
.paper-back-two { background: #d4ddf6; transform: rotate(5deg); z-index: -1; }
.journal-paper { background: white; color: #263e88; padding: 23px 27px 22px; box-shadow: 0 9px 25px #25396713; transform-origin: left center; }
.paper-masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #b9c5e7; }
.paper-masthead > span:first-child { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.paper-masthead > span:last-child { font-size: 11px; }
.journal-panel { min-height: 302px; outline-offset: 8px; }
.journal-panel h4 { font-size: 35px; line-height: 1.45; letter-spacing: -.03em; font-weight: 600; padding-top: 20px; }
.journal-panel > p { margin-top: 18px; font-size: 14px; line-height: 1.8; }
.paper-index, .paper-timeline, .source-chain { display: flex; gap: 0; margin-top: 20px; font-size: 13px; align-items: center; min-height: 37px; }
.paper-index span { padding: 5px 12px; border: 1px solid #b9c5e7; margin-right: -1px; }
.paper-timeline { justify-content: space-between; border-top: 1px solid #b9c5e7; padding-top: 8px; }
.paper-timeline span { position: relative; }
.paper-timeline span::before { content: ""; width: 5px; height: 5px; background: #3156c8; position: absolute; top: -11px; left: 0; border-radius: 50%; }
.source-chain { gap: 18px; }
.source-chain span:last-child { padding: 5px 9px; background: #edf1fc; }
.source-chain svg { width: 26px; height: 20px; }
.paper-bottom { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 12px; border-top: 1px solid #b9c5e7; font-size: 11px; }
.journal-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 26px; }
.journal-footer > span { font-size: 11px; color: #58648c; }
.next-page { display: inline-flex; gap: 8px; align-items: center; border: 0; background: transparent; color: #2747ae; font-size: 13px; padding: 9px 0 9px 9px; }
.next-page svg { width: 16px; height: 16px; }
.next-page:hover { text-decoration: underline; text-underline-offset: 5px; }
.sharing-stage { padding: 29px 26px 21px; background: #edf1d5; border-radius: 12px; color: #374124; }
.skill-picker { display: flex; justify-content: center; gap: 10px; }
.skill-picker button { background: transparent; border: 1px solid #a7b281; border-radius: 30px; padding: 7px 20px; color: #4c5a30; font-size: 13px; }
.skill-picker button[aria-pressed="true"] { background: #3e4b27; border-color: #3e4b27; color: white; }
.sharing-diagram { position: relative; height: 310px; }
.sharing-wires { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #a0ad7b; stroke-width: 1.5; }
.sharing-current { stroke: #3e4b27; stroke-width: 3; stroke-dasharray: 12 500; opacity: 0; }
.is-sharing .sharing-current { opacity: 1; animation: share-flow 650ms linear both; }
@keyframes share-flow { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -240; } }
.shared-file { position: absolute; top: 35px; left: 50%; transform: translateX(-50%) rotate(-3deg); display: flex; align-items: center; text-align: left; gap: 15px; width: 192px; height: 104px; background: #fbfcf5; border: 0; box-shadow: 0 8px 20px #3e4b2715; color: #374124; padding: 15px 19px 26px; border-radius: 4px; }
.shared-file > svg { width: 29px; height: 35px; stroke-width: 1.4; }
.shared-file strong { display: block; font-size: 20px; font-weight: 600; line-height: 1.4; }
.shared-file > span > span { font-size: 11px; }
.file-action { position: absolute; bottom: 9px; left: 19px; font-size: 11px; color: #5c693f; }
.shared-file:hover:not(:disabled) { transform: translateX(-50%) rotate(0); }
.shared-file:disabled { cursor: default; }
.shared-file:disabled .file-action { visibility: hidden; }
.environment-nodes { position: absolute; top: 242px; width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.environment { text-align: center; background: #f8faed; border: 1px solid #c7d2a4; border-radius: 8px; padding: 10px 4px; }
.environment > span { display: block; font-size: 13px; }
.received-skill { font-size: 11px; font-weight: 400; color: #5c693f; display: block; margin-top: 3px; }
.is-shared .environment { background: #3e4b27; border-color: #3e4b27; color: white; }
.is-shared .received-skill { color: #edf1d5; }
.share-status { text-align: center; margin-top: 22px; font-size: 13px; min-height: 45px; line-height: 1.7; }
.demo-label { text-align: center; font-size: 11px; color: #5c693f; margin-top: 8px; }
@media (max-width: 1000px) {
  .project-exhibits > article { gap: 32px; }
  .exhibit-copy h3 { font-size: 38px; }
  .journal-stage { padding-inline: 25px; }
  .journal-paper { padding-inline: 22px; }
  .journal-panel h4 { font-size: 31px; }
  .sharing-stage { padding-inline: 20px; }
}
@media (max-width: 800px) {
  .project-exhibits { gap: 66px; }
  .project-exhibits > article { grid-template-columns: 1fr; gap: 28px; }
  .exhibit-copy { max-width: 600px; }
  .exhibit-copy .project-description { max-width: 39em; }
  .exhibit-copy .exhibit-invitation { margin-top: 16px; }
  .exhibit-skill .exhibit-copy, .exhibit-skill .sharing-stage { grid-column: auto; grid-row: auto; }
  .journal-stage { padding-inline: 36px; }
  .journal-paper { padding-inline: 27px; }
  .journal-panel h4 { font-size: 35px; }
  .sharing-diagram { max-width: 500px; margin-inline: auto; }
  .orbit-skill { bottom: 120px; }
}
@media (max-width: 600px) {
  .throw-hint { font-size: 11px; top: 95%; }
  .launch-handle { width: 40px; height: 40px; top: 82%; }
  .orbit-skill { bottom: 110px; }
  .section-note { max-width: 26em; }
  .exhibit-copy h3 { font-size: 37px; }
  .exhibit-copy .project-purpose { font-size: 18px; margin-top: 15px; }
  .exhibit-copy .project-description { font-size: 14px; }
  .exhibit-copy .exhibit-invitation { font-size: 13px; }
  .journal-stage { padding: 17px 22px 13px; }
  .journal-tabs { margin-bottom: 23px; gap: 22px; }
  .journal-tabs button { font-size: 13px; }
  .journal-paper { padding: 18px 19px; }
  .paper-masthead > span:first-child { font-size: 16px; }
  .paper-masthead > span:last-child { font-size: 11px; }
  .journal-panel { min-height: 280px; }
  .journal-panel h4 { font-size: 29px; }
  .paper-index { font-size: 12px; }
  .paper-index span { padding-inline: 10px; }
  .journal-panel > p { font-size: 13px; }
  .journal-footer { gap: 4px; margin-top: 22px; }
  .journal-footer > span { max-width: 8em; font-size: 11px; line-height: 1.5; }
  .next-page { font-size: 12px; }
  .sharing-stage { padding: 23px 14px 17px; }
  .skill-picker { gap: 8px; }
  .skill-picker button { padding: 7px 17px; }
  .shared-file { width: 174px; }
  .environment-nodes { gap: 8px; }
  .environment { padding: 9px 3px; }
  .environment > span { font-size: 12px; }
  .share-status { font-size: 12px; }
  .exhibit-maas { padding-top: 8px; }
}
@media (max-width: 359px) {
  .journal-stage { padding-inline: 16px; }
  .journal-paper { padding-inline: 15px; }
  .paper-masthead > span:first-child { font-size: 15px; }
  .paper-masthead > span:last-child { font-size: 11px; }
  .journal-panel h4 { font-size: 27px; }
  .paper-index span { padding-inline: 7px; }
  .paper-timeline { font-size: 11px; }
  .shared-file { width: 162px; }
  .environment > span { font-size: 11px; }
  .orbit-skill { bottom: 100px; }
}


/* v5: the product manager's work, explored through a connected responsibility map. */
.exhibit-xingchen { grid-template-columns: .82fr 1.18fr; padding: 14px 0 58px; border-bottom: 1px solid var(--line); }
.exhibit-xingchen .exhibit-copy h3 { font-size: 43px; line-height: 1.2; }
.xingchen-wordmark { font-size: 72px; letter-spacing: -.035em; }
.xingchen-attribution { margin-top: 18px; color: var(--muted); font-size: 13px; }
.xingchen-reference { margin-top: 23px; max-width: 350px; font-size: 13px; color: var(--muted); }
.xingchen-reference summary { width: fit-content; padding: 8px 0; cursor: pointer; text-underline-offset: 4px; }
.xingchen-reference summary:hover { color: var(--blue); }
.xingchen-reference summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.xingchen-reference img { width: 100%; height: auto; display: block; margin-top: 10px; border: 1px solid var(--line); }
.xingchen-reference p { margin-top: 8px; font-size: 11px; line-height: 1.7; }
.pm-map { --map-surface: #203b80; --map-ink: #ffffff; --map-muted: #dce5ff; --map-accent: #e9efc5; background: var(--map-surface); color: var(--map-ink); border-radius: 12px; padding: 30px 34px 20px; min-width: 0; }
.pm-map-title { font-size: 30px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.pm-map-title > span { color: var(--map-accent); }
.pm-network { display: grid; grid-template-columns: 70px 80px minmax(0,1fr); align-items: center; margin: 20px 0 24px; height: 240px; }
.pm-origin { width: 68px; height: 68px; border: 1px solid #8195c2; border-radius: 50%; display: grid; place-items: center; font-size: 14px; line-height: 1.5; text-align: center; }
.pm-connections { width: 100%; height: 240px; stroke: #8195c2; stroke-width: 1; }
.pm-connections path.is-active { stroke: var(--map-accent); stroke-width: 2.5; }
.pm-choices { height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.pm-node { color: var(--map-muted); background: transparent; border: 0; border-bottom: 1px solid #5b71a5; padding: 9px 0 12px 15px; text-align: left; display: flex; align-items: center; gap: 8px; position: relative; height: 68px; }
.pm-node-dot { width: 8px; height: 8px; background: var(--map-surface); border: 1px solid #a9b8db; border-radius: 50%; position: absolute; left: -4px; top: 30px; }
.pm-node strong { display: block; font-size: 20px; line-height: 1.4; font-weight: 500; }
.pm-node > span > span { font-size: 12px; display: block; margin-top: 3px; white-space: nowrap; }
.pm-node > svg { width: 19px; height: 19px; margin-left: auto; flex-shrink: 0; opacity: 0; }
.pm-node[aria-selected="true"] { color: var(--map-accent); border-color: var(--map-accent); }
.pm-node[aria-selected="true"] .pm-node-dot { background: var(--map-accent); border-color: var(--map-accent); }
.pm-node[aria-selected="true"] > svg { opacity: 1; }
.pm-node:hover:not(:disabled) { color: white; }
.pm-node:focus-visible { outline: 2px solid var(--map-accent); outline-offset: 4px; }
.pm-node:disabled { cursor: default; }
.pm-reading { padding-top: 20px; border-top: 1px solid #8195c2; }
.pm-panel { min-height: 115px; }
.pm-panel:focus-visible { outline: 2px solid var(--map-accent); outline-offset: 6px; }
.pm-panel h5 { margin: 0; font-size: 22px; line-height: 1.55; font-weight: 500; color: var(--map-accent); }
.pm-panel p { font-size: 14px; line-height: 1.85; margin-top: 10px; color: var(--map-muted); }
.pm-map-note { font-size: 11px; color: var(--map-muted); margin-top: 17px; }
@media (max-width: 1100px) {
 .pm-map { padding-inline: 25px; }
 .pm-network { grid-template-columns: 58px 48px minmax(0,1fr); }
 .pm-origin { width: 56px; height: 56px; font-size: 13px; }
 .pm-panel { min-height: 145px; }
}
@media (max-width: 800px) {
 .exhibit-xingchen { padding-bottom: 48px; }
 .exhibit-xingchen .exhibit-copy h3 { font-size: 38px; }
 .exhibit-xingchen .exhibit-copy h3 br { display: none; }
 .xingchen-wordmark { font-size: inherit; margin-left: .25em; }
 .pm-network { grid-template-columns: 70px minmax(50px,110px) minmax(0,1fr); }
 .pm-origin { width: 68px; height: 68px; font-size: 14px; }
 .pm-panel { min-height: 110px; }
}
@media (max-width: 600px) {
 .exhibit-xingchen .exhibit-copy h3 { font-size: 34px; }
 .pm-map { padding: 25px 22px 20px; }
 .pm-map-title { font-size: 27px; }
 .pm-network { grid-template-columns: 48px 35px minmax(0,1fr); }
 .pm-origin { width: 46px; height: 46px; font-size: 11px; }
 .pm-node { padding-left: 12px; }
 .pm-node strong { font-size: 19px; }
 .pm-node > span > span { font-size: 11px; }
 .pm-node > svg { width: 15px; height: 15px; }
 .pm-panel { min-height: 145px; }
 .pm-panel h5 { font-size: 21px; }
 .pm-panel p { font-size: 13px; }
}
@media (max-width: 359px) {
 .exhibit-xingchen .exhibit-copy h3 { font-size: 29px; }
 .pm-map { padding-inline: 18px; }
 .pm-network { grid-template-columns: 42px 22px minmax(0,1fr); }
 .pm-origin { width: 40px; height: 40px; }
 .pm-node { gap: 2px; padding-left: 9px; }
 .pm-node > svg { width: 12px; }
 .pm-panel { min-height: 155px; }
}

.release-timeline { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 19px 0 16px; }
.release-timeline > div { flex-shrink: 0; }
.release-timeline strong { font-size: 37px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.03em; display: block; }
.release-timeline span { color: var(--map-muted); font-size: 12px; display: block; margin-top: 7px; }
.release-timeline svg { flex: 1; min-width: 20px; max-width: 90px; height: 24px; color: var(--map-accent); }
.pm-panel { min-height: 213px; }
@media (max-width: 1100px) and (min-width: 801px) { .pm-panel { min-height: 255px; } }
@media (max-width: 600px) {
 .release-timeline { gap: 12px; }
 .release-timeline strong { font-size: 32px; }
 .release-timeline span { font-size: 11px; }
 .pm-panel { min-height: 246px; }
}
@media (max-width: 359px) {
 .release-timeline strong { font-size: 28px; }
 .pm-panel { min-height: 266px; }
}

/* Small labels remain readable at compact widths. */
.pm-map-note, .pm-node > span > span, .release-timeline span, .xingchen-reference p { font-size: 12px; }
.pm-connections path { vector-effect: non-scaling-stroke; }

.orbit-daily { right: -4%; top: 44%; transform: rotate(4deg); z-index: 4; }
.daily-logo { display:block; width:min(294px,100%); height:auto; }
.platform-results { margin-top:22px; display:grid; gap:14px; }
.platform-results strong { display:block; font-size:21px; font-weight:600; color:var(--blue); }
.platform-results span { display:block; font-size:12px; color:var(--muted); }
.daily-facts { display:flex; flex-wrap:wrap; gap:22px; margin:24px 0 8px; }
.daily-facts dt { font-size:24px; font-weight:600; color:var(--blue); }
.daily-facts dd { margin:0; font-size:12px; color:var(--muted); }
.facts-note { font-size:12px; line-height:1.7; color:var(--muted); }
@media(max-width:600px){.orbit-daily{right:0;top:42%;padding:10px 12px}.orbit-daily .orbit-project-name{font-size:14px}.platform-results strong{font-size:19px}.daily-facts{gap:20px}}

.xingchen-logo { display: block; width: min(350px, 100%); height: auto; }

/* A lighter showcase and a single-line personal signature. */
.intro { grid-template-columns: 1.1fr 1fr; gap: 20px; }
.intro-text { padding-left: 0; min-width: 0; }
.name { display:block; white-space:nowrap; font-size:clamp(32px,4.3vw,60px); width:auto; }
.name > span { display:inline; }
.signature-mark { width: 88px; margin-bottom:24px; color:var(--blue); }
.parabola-mark { width:100%; height:auto; overflow:visible; stroke-width:3; }
.brand > .parabola-mark { width:36px; height:32px; color:var(--blue); }
.mark-tail { stroke-width:2; opacity:.5; }
.mark-return { stroke-width:2; opacity:.35; }
.mark-traveler { fill:currentColor; stroke:white; stroke-width:1.8; }
.mark-track { animation:mark-draw 1000ms cubic-bezier(.16,1,.3,1) both; }
.mark-traveler { offset-path:path('M18 51Q44 -30 72 45'); offset-distance:100%; cx:0; cy:0; animation:mark-flight 1100ms cubic-bezier(.2,.7,.2,1) both; }
.replay-mark .mark-track { animation-name:mark-redraw; }
.replay-mark .mark-traveler { animation-name:mark-refly; }
@keyframes mark-draw { from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0} }
@keyframes mark-redraw { from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0} }
@keyframes mark-flight { from{offset-distance:0%}to{offset-distance:100%} }
@keyframes mark-refly { from{offset-distance:0%}to{offset-distance:100%} }
.xingchen-light { min-width:0; padding:20px; background:#f2f4fa; border-radius:12px; }
.xingchen-page-link { display:block; }
.xingchen-page-link img { display:block; width:100%; height:auto; border-radius:5px; }
.xingchen-light figcaption { padding:20px 5px 3px; }
.xingchen-light figcaption > span { font-size:17px; font-weight:500; }
.xingchen-light p { font-size:14px; color:var(--muted); margin-top:6px; }
.xingchen-light figcaption a { display:inline-block; font-size:13px; color:var(--blue); margin-top:12px; }
.xingchen-light small { display:block; font-size:12px; color:var(--muted); margin-top:10px; }
.site-footer { margin-top:72px; }
@media(max-width:1100px){.name{font-size:clamp(30px,4.2vw,48px)}.intro{gap:10px}}
@media(max-width:600px){.intro{grid-template-columns:1fr}.name{font-size:clamp(29px,8vw,46px)}.signature-mark{width:68px;margin-bottom:18px}.xingchen-light{padding:14px}.site-footer{margin-top:48px}}

/* Product identities and richer trajectory lettering. */
.orbit-logo { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.orbit-project-name { gap:8px; }
.orbit-project { padding:12px 14px; }
.skill-title-mark { width:40px; height:40px; display:inline-block; vertical-align:middle; margin-right:12px; }
.signature-mark { width:100px; }
.mark-guide { stroke-width:1; opacity:.23; }
.mark-echo { stroke-width:1.3; stroke-dasharray:2 4; opacity:.35; }
.mark-tangent { stroke-width:1.6; opacity:.6; }
.mark-checkpoint { fill:white; stroke-width:1.5; }
.mark-traveler { offset-path:path('M16 63Q45 -25 80 52'); }
.brand .mark-guide,.brand .mark-tangent,.brand .mark-checkpoint { display:none; }
.intro-copy strong { font-weight:500; color:var(--ink); }
.work { padding-top:36px; }
.xingchen-light { padding:0; overflow:hidden; background:#f2f4fa; }
.xingchen-page-link img { border-radius:12px; }
.field-notes { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; border-top:1px solid var(--line); margin-top:80px; padding-top:60px; }
.notes-intro h2 { font-size:32px; line-height:1.5; }
.notes-intro p { color:var(--muted); font-size:14px; line-height:1.9; margin-top:20px; }
.field-note { border-bottom:1px solid var(--line); }
.field-note summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; font-size:18px; font-weight:500; cursor:pointer; list-style:none; }
.field-note:first-child summary { padding-top:0; }
.field-note summary::-webkit-details-marker { display:none; }
.field-note summary:focus-visible { outline:2px solid var(--blue); outline-offset:6px; }
.note-toggle { font-size:24px; color:var(--blue); font-weight:400; flex-shrink:0; }
.field-note[open] .note-toggle { transform:rotate(45deg); }
.note-body { padding:0 30px 24px 0; font-size:14px; line-height:1.9; color:var(--muted); }
.note-body p+p { margin-top:10px; }
.note-body a { display:inline-block; color:var(--blue); margin-top:16px; font-size:13px; }
@media(max-width:800px){.field-notes{grid-template-columns:1fr;gap:30px}.notes-intro h2 br{display:none}.field-notes{margin-top:64px;padding-top:40px}}
@media(max-width:600px){.signature-mark{width:82px}.orbit-logo{width:20px;height:20px}.orbit-project{padding:10px}.orbit-project-name{gap:5px}.notes-intro h2{font-size:28px}.field-note summary{font-size:17px}.note-body{padding-right:0}.intro-copy{font-size:14px}.work{padding-top:20px}}

/* A visible, finite curiosity pinball tour. */
.play-intro { margin-top:24px; }
.launch-tour { display:inline-flex; align-items:center; gap:20px; min-height:48px; padding:10px 20px; border:0; border-radius:12px; background:var(--blue); color:white; font-size:16px; font-weight:500; }
.launch-tour:hover { background:#2444ab; }
.play-caption { display:block; margin-top:8px; font-size:12px; color:var(--muted); }
.bounce-story { margin-top:18px; min-height:84px; max-width:31em; padding-left:14px; border-left:1px solid #a9b8eb; }
.bounce-story strong { color:var(--blue); font-size:16px; font-weight:500; }
.bounce-story p { color:var(--muted); font-size:14px; line-height:1.8; margin-top:5px; }
.intro .work-link { margin-top:14px; }
.portrait-stage { height:540px; }
.portrait-orbit { z-index:4; pointer-events:none; }
.throw-path { opacity:.24; stroke-dasharray:4 9; }
.throw-ball { fill:#3156c8; stroke:#fff; stroke-width:3; }
.launch-handle { width:58px; height:58px; top:auto; bottom:27px; left:3%; z-index:6; }
.launch-handle svg { width:26px; height:26px; }
.throw-hint { top:auto; bottom:0; left:0; font-size:12px; z-index:6; }
.orbit-project { z-index:5; }
.orbit-maas { top:15px; right:0; }
.orbit-skill { top:220px; bottom:auto; left:0; }
.orbit-daily { top:auto; bottom:75px; right:0; }
.curiosity-note { right:0; bottom:240px; width:85px; height:95px; padding:12px; font-size:12px; }
.curiosity-note svg { width:18px; height:18px; margin-bottom:5px; }
.portrait-stage .orbit-project.is-hit { outline:2px solid #3156c8; outline-offset:5px; }
@media(max-width:1100px){.portrait-stage{height:510px}.orbit-skill{top:205px}.curiosity-note{bottom:230px}}
@media(max-width:800px){.portrait-stage{height:470px}.orbit-skill{top:175px}.orbit-daily{bottom:45px}.curiosity-note{display:none}.launch-handle{bottom:20px}.throw-hint{bottom:-10px}.bounce-story{min-height:110px}}
@media(max-width:600px){.portrait-stage{height:460px;margin-top:20px}.orbit-skill{top:190px}.orbit-maas{top:0;right:0}.orbit-daily{bottom:65px}.portrait-illustration{bottom:30px}.launch-handle{width:54px;height:54px;bottom:15px}.throw-hint{bottom:-13px}.bounce-story{min-height:88px}.intro .work-link{margin-top:8px}.launch-tour{min-height:50px}.intro{padding-bottom:52px}}
@media(max-width:359px){.portrait-stage{height:430px}.orbit-skill{top:180px}.orbit-daily{bottom:55px}.orbit-project-name{font-size:13px}.orbit-project{padding:9px}.bounce-story{min-height:108px}}

/* Explicit foreground projectile and elastic launcher. */
.portrait-orbit { z-index:8; overflow:visible; }
.throw-path { fill:none; stroke:#3156c8; stroke-width:2.5; stroke-dasharray:3 9; opacity:.7; }
.flight-trails path { fill:none; stroke:#3156c8; stroke-width:3; stroke-dasharray:1 11; stroke-linecap:round; opacity:.65; }
.sling-band { fill:none; stroke:#947451; stroke-width:5; }
.flight-ball { position:absolute; width:38px; height:38px; border:3px solid white; border-radius:50%; background:#3156c8; box-shadow:inset -5px -6px 0 #203d9c,0 3px 8px #213a6a25; z-index:10; pointer-events:none; }
.launch-handle { left:-13%; background:transparent; box-shadow:none; z-index:11; cursor:grab; }
.launch-handle svg { opacity:0; }
.sling-fork { position:absolute; left:calc(-13% + 16px); bottom:0; width:26px; height:54px; border:7px solid #947451; border-top:0; border-radius:0 0 16px 16px; z-index:7; }
.sling-fork:after { content:""; position:absolute; width:8px; height:28px; background:#947451; left:2px; top:44px; border-radius:4px; }
.throw-hint { left:-17%; bottom:-45px; }
@media(max-width:800px){.launch-handle{left:0}.sling-fork{left:16px}.throw-hint{left:0}}
@media(max-width:600px){.sling-fork{bottom:-10px}.portrait-stage{margin-bottom:35px}.throw-hint{bottom:-48px}}

.portrait-area { position:relative; z-index:3; }

/* Polished cobalt projectile and machined fork, in the site's own palette. */
.flight-ball { width:40px;height:40px;border:1px solid #2443a3;background:radial-gradient(circle at 30% 23%,#aebfff 0%,#5479eb 24%,#3156c8 55%,#183679 100%);box-shadow:inset 0 1px 2px #ffffffc0,inset -3px -4px 5px #11265970,0 5px 9px #1a32662b;}
.flight-ball:before {content:"";position:absolute;inset:8px;border:1.5px solid #ffffff9e;border-radius:50%;transform:rotate(-35deg) scaleX(.48);}
.flight-ball:after {content:"";position:absolute;width:7px;height:4px;left:10px;top:7px;border-radius:50%;background:#ffffffb0;transform:rotate(-30deg);}
.sling-fork {width:76px;height:101px;border:0;border-radius:0;left:calc(-13% - 9px);bottom:-35px;overflow:visible;}
.sling-fork:after {content:none;}
.sling-band {stroke:#657545;stroke-width:4;filter:drop-shadow(0 1px 0 #cddd9e);}
.throw-hint {bottom:-63px;}
.flight-trails path{opacity:.45;stroke-width:2.5;stroke-dasharray:1 9;}
@media(max-width:800px){.sling-fork{left:-9px;bottom:-42px}.portrait-stage{margin-bottom:45px}}
@media(max-width:600px){.sling-fork{left:-11px;bottom:-47px}.throw-hint{bottom:-70px}.portrait-stage{margin-bottom:60px}}

/* Playground: movable targets, reset by the launcher and a hidden goal. */
.play-intro .play-caption{display:none}.play-intro{margin-top:20px}.intro-text{align-self:start}
.reset-shot{position:absolute;left:calc(-13% + 68px);bottom:28px;z-index:12;min-height:36px;width:36px;height:36px;padding:8px;border:1px solid #d7deef;border-radius:50%;background:#fff;color:#3156c8;box-shadow:none;}
.reset-shot:hover{background:#edf1ff}.reset-shot svg{width:19px;height:19px}
.orbit-project{cursor:grab;user-select:none}.orbit-project:active{cursor:grabbing}
.bonus-goal{position:absolute;right:-22px;top:133px;width:64px;height:56px;border:3px solid #3156c8;border-radius:8px;z-index:6;display:grid;place-items:center;background:#ffffffa6;color:#7d91cc;box-shadow:inset 0 -5px 0 #e8edff;}
.bonus-goal.scored{background:#e9f3c9;border-color:#748b38}.bonus-goal.scored span{visibility:hidden}.bonus-goal.scored:after{content:'✓';position:absolute;font-size:25px;color:#657d31}
.goal-status{position:absolute;right:0;top:198px;font-size:12px;color:#3156c8;z-index:7}
.confetti-layer{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}.confetti-layer i{position:absolute;width:7px;height:12px;border-radius:1px}
.work-carousel-controls{display:flex;gap:14px;align-items:center;margin:0 0 32px}.work-carousel-controls>button{width:40px;height:40px;border:1px solid #d8ddea;border-radius:50%;background:white;color:#3156c8;font-size:20px}.work-picker{display:flex;gap:8px;flex:1}.work-picker button{border:0;border-bottom:2px solid transparent;background:none;padding:10px 12px;font:inherit;color:#717684}.work-picker button[aria-pressed=true]{border-color:#3156c8;color:#3156c8}.work-count{font-size:12px;color:#717684;font-variant-numeric:tabular-nums}
.project-exhibits>article[hidden]{display:none!important}.project-exhibits{gap:0}.project-exhibits>article{border:0;padding-top:0;margin:0}.work{padding-bottom:30px}
@media(max-width:800px){.reset-shot{left:68px;bottom:20px}.bonus-goal{right:0;top:110px;width:55px;height:50px}.goal-status{top:166px}}
@media(max-width:600px){.reset-shot{bottom:15px}.work-carousel-controls{gap:6px;flex-wrap:wrap}.work-picker{order:-1;flex-basis:100%;justify-content:center}.work-picker button{padding:8px;font-size:13px}.work-count{flex:1;text-align:center}.bonus-goal{top:100px}.goal-status{top:155px}.intro-text{width:100%}}

@media(max-width:800px){.curiosity-note{display:block;right:0;bottom:165px;width:68px;height:88px;padding:10px;font-size:11px;z-index:5}.curiosity-note svg{width:16px;height:16px;margin-bottom:4px}}
@media(min-width:801px){.launch-handle{left:0}.sling-fork{left:-9px}.reset-shot{left:68px}.throw-hint{left:0}}

/* Keep the launch lane clear; reset sits beneath the wooden fork. */
.reset-shot{left:11px;bottom:-88px;width:36px;height:36px}
.throw-hint{left:58px;bottom:-77px}
.portrait-stage{margin-bottom:55px}
@media(max-width:600px){.reset-shot{left:9px;bottom:-98px}.throw-hint{left:54px;bottom:-86px}.portrait-stage{margin-bottom:85px}}
/* Shift the desktop launcher left as one unit; preserve mobile edge clearance. */
@media(min-width:801px){
 .launch-handle{left:-48px}
 .sling-fork{left:-57px}
 .reset-shot{left:-37px}
 .throw-hint{left:10px}
}

/* A recognizable basket rather than an empty mystery box. */
.bonus-goal{width:82px;height:84px;right:-24px;top:120px;border:0;border-radius:0;background:transparent;box-shadow:none;}
.goal-art{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 3px #27478915)}
.bonus-goal.scored{background:transparent;border:0}.bonus-goal.scored:after{content:'好球！';top:-20px;left:14px;font-size:14px;color:#3156c8;white-space:nowrap}
.goal-status{top:210px}
@media(max-width:800px){.bonus-goal{right:0;top:95px;width:68px;height:70px}.goal-status{top:175px}}

/* Basketball and a movable note clear of the basket's approach. */
.flight-ball{background:radial-gradient(circle at 30% 25%,#f9b15e 0%,#e88832 45%,#bd591c 100%);border-color:#92451e;box-shadow:inset 0 1px 2px #ffe0b3,inset -3px -4px 5px #77321550,0 4px 8px #62381526;overflow:hidden}
.flight-ball:before,.flight-ball:after{content:none}.flight-ball svg{width:100%;height:100%;stroke:#57301d}
.curiosity-note{right:112px;bottom:125px;cursor:grab;user-select:none;touch-action:none}.curiosity-note:active{cursor:grabbing}.curiosity-note:focus-visible{outline:2px solid #3156c8;outline-offset:4px}
@media(max-width:800px){.curiosity-note{right:80px;bottom:130px}}

/* Quiet, direct personal links replace the standalone notes section. */
.elsewhere{display:grid;grid-template-columns:.8fr 1.2fr;gap:58px;border-top:1px solid #e6e8ed;padding-top:48px;padding-bottom:60px;margin-top:65px}
.elsewhere h2{font-size:30px;letter-spacing:-.03em;margin:0 0 14px}.elsewhere-intro p{font-size:15px;color:#727783}
.elsewhere-links{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.social-link{display:flex;align-items:center;gap:14px;padding:10px 0 22px;border-bottom:1px solid #e6e8ed;text-decoration:none;color:#202226}.social-link:hover strong{color:#3156c8}.social-link strong{font-size:18px;font-weight:600}.social-detail{display:block;font-size:13px;color:#727783;margin-top:7px}.social-icon svg{width:28px;height:28px}.wechat-link .social-icon{color:#42816a}.social-arrow{width:16px;height:16px;margin-left:auto;color:#3156c8}.wechat-hint{grid-column:2;margin:12px 0 0;font-size:12px;line-height:1.7;color:#727783}
@media(max-width:800px){.elsewhere{grid-template-columns:1fr;gap:24px;margin-top:40px;padding-top:32px;padding-bottom:40px}}
@media(max-width:480px){.elsewhere-links{grid-template-columns:1fr;gap:18px}.wechat-hint{grid-column:1;margin-top:-9px}.elsewhere h2{font-size:26px}}

/* Contact links with an accessible native WeChat dialog. */
.elsewhere-intro p{line-height:1.9}.social-link{padding:20px 0 24px}.wechat-dialog{width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #e0e5ed;border-radius:20px;padding:38px 32px 30px;color:#202226;background:#fff;box-shadow:0 24px 80px #18264833;text-align:center;}
.wechat-dialog::backdrop{background:#17213d70;backdrop-filter:blur(5px)}
.dialog-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:#f3f5f8;color:#626a7b}.dialog-close:hover{background:#e6ebf4}.dialog-close svg{width:18px;height:18px}
.dialog-eyebrow{font-size:11px;letter-spacing:.1em;color:#4c826d;margin:0 0 14px}.wechat-dialog h2{font-size:28px;letter-spacing:-.035em;margin:0 0 12px}.wechat-dialog p#wechat-dialog-description{font-size:14px;line-height:1.8;color:#6a7280;margin:0}
.wechat-qr{margin:22px auto 0;width:min(248px,100%);padding:8px;background:#fff;border:1px solid #e7ebf0;border-radius:12px}.wechat-qr img{display:block;width:100%;height:auto}.qr-caption{font-size:12px;color:#7e8591;margin:10px 0 22px}.dialog-article{font-size:14px;color:#3156c8;text-underline-offset:5px}.dialog-article span[aria-hidden]{margin-left:8px}
html.wechat-open{overflow:hidden}
@media(max-width:480px){.wechat-dialog{padding:38px 22px 26px}.wechat-dialog h2{font-size:25px}}
.elsewhere-intro p,.social-detail,.qr-caption{color:#6a7280}.dialog-eyebrow{color:#467660}


.elsewhere-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.elsewhere{grid-template-columns:.65fr 1.35fr;gap:40px}.social-link{gap:10px}.social-detail{overflow-wrap:anywhere}
@media(max-width:800px){.elsewhere{grid-template-columns:1fr;gap:24px}}
@media(max-width:600px){.elsewhere-links{grid-template-columns:1fr;gap:12px}}

/* North London: football, red shirts and a personal touch. */
:root{--blue:#ba1730}.name-blue,.text-link,.platform-results strong,.daily-facts dt,.exhibit-invitation{color:#ba1730}
.portrait-disc{background:#f9e9e9}.portrait-stage{isolation:isolate}
.pitch-lines{position:absolute;left:12%;right:0;top:110px;bottom:-15px;border:1px solid #c9d9cf;border-radius:50% 50% 0 0;z-index:-1;background:repeating-linear-gradient(90deg,#f1f6ef80 0 48px,#e7efe580 48px 96px)}
.pitch-lines:after{content:'';position:absolute;width:35%;height:30%;border:1px solid #b8cdbd;right:-1px;top:30%;border-right:0}
.arsenal-tag{position:absolute;left:10px;top:20px;color:#b51b32;font-size:10px;letter-spacing:.1em;line-height:1.8;transform:rotate(-6deg)}.arsenal-tag b{display:block;font-size:9px;color:#8b6b46;font-weight:500}
.flight-ball{background:none;border:0;box-shadow:0 4px 8px #1e382b25;overflow:hidden;border-radius:50%}.flight-ball svg{stroke:none}
.sling-band{display:none}.throw-path,.flight-trails path{stroke:#b51b32}.throw-hint{color:#a51a30}
.rice-player{position:absolute;left:-145px;bottom:32px;width:125px;height:170px;margin:0;z-index:7;transform-origin:65% 93%;pointer-events:none}.rice-player img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 5px 3px #243e2922)}.rice-player figcaption{position:absolute;bottom:-19px;left:22px;font-size:10px;letter-spacing:.12em;color:#b51b32}.rice-player b{background:#b51b32;color:white;padding:2px 4px;margin-left:5px}
.bonus-goal{width:128px;height:94px;right:-25px;top:125px}.bonus-goal.scored:after{content:'GOAL!';color:#ba1730;font-weight:700}.goal-status{color:#ba1730;top:224px;right:0}.portrait-stage .orbit-project.is-hit{outline-color:#ba1730}
.work-picker button[aria-pressed=true]{color:#ba1730;border-color:#ba1730}.reset-shot{color:#ba1730}.arsenal-tag{max-width:150px}
@media(max-width:1100px){.rice-player{left:-110px;width:100px;height:150px}}
@media(max-width:800px){.rice-player{left:-12px;bottom:15px;width:105px;height:145px}.launch-handle{left:95px}.reset-shot{left:106px}.throw-hint{left:150px}.bonus-goal{right:0;top:95px;width:105px;height:78px}.goal-status{top:180px}.arsenal-tag{top:5px;left:0;font-size:8px}.pitch-lines{left:0}.rice-player figcaption{left:15px}}
@media(max-width:600px){.launch-handle{left:95px}.reset-shot{left:104px}.throw-hint{left:148px;font-size:10px}.rice-player{bottom:4px}}

/* Football: a smaller ball, a proper net, and a three-pose kick. */
.flight-ball{width:24px;height:24px;box-shadow:0 3px 5px #1e382b20}
.rice-sprite{display:block;width:100%;height:100%;background:url('assets/rice-ready.png') 0 0/100% 100% no-repeat;filter:drop-shadow(0 4px 3px #243e2920)}
.rice-player[data-pose="backswing"] .rice-sprite{background-image:url('assets/rice-backswing.png')}
.rice-player[data-pose="strike"] .rice-sprite{background-image:url('assets/declan-rice-cartoon.png');background-size:100% 100%;background-position:0 0}
.bonus-goal{width:190px;height:127px;right:-30px;top:120px;isolation:isolate}
.goal-art{position:relative;width:100%;height:100%;z-index:2;overflow:visible}
.goal-supporters{position:absolute;left:6%;bottom:33%;width:88%;opacity:0;z-index:1;pointer-events:none;transform:translateY(22px)}
.goal-supporters img{display:block;width:100%;height:auto}
.bonus-goal.scored .goal-supporters{animation:terrace-celebration 3s ease-out both}
.bonus-goal.scored .goal-art image{transform-origin:center;animation:net-ripple 650ms ease-out}
.bonus-goal.scored:after{content:none}
.goal-status{top:242px;right:0;font-weight:600}
@keyframes terrace-celebration{0%{opacity:0;transform:translateY(22px)}12%{opacity:1;transform:translateY(-16px) rotate(-3deg)}25%{transform:translateY(-4px) rotate(2deg)}38%{transform:translateY(-18px) rotate(-2deg)}51%{transform:translateY(-5px) rotate(2deg)}65%,82%{opacity:1;transform:translateY(-14px)}100%{opacity:0;transform:translateY(15px)}}
@keyframes net-ripple{0%,100%{transform:scale(1)}25%{transform:scale(1.035,.95)}55%{transform:scale(.985,1.02)}}
/* Each product owns its accents; body copy stays quiet and readable. */
.exhibit-xingchen{--product-accent:#6940bc;--product-ink:#39305b}
.exhibit-maas{--product-accent:#087e72;--product-ink:#284941}
.exhibit-skill{--product-accent:#26755d;--product-ink:#244e42}
.exhibit-copy .project-purpose{color:var(--product-ink)}
.exhibit-copy .copy-highlight,.exhibit-copy .text-link,.exhibit-copy .platform-results strong,.exhibit-copy .daily-facts dt,.exhibit-copy .exhibit-invitation{color:var(--product-accent)}
.exhibit-skill #skill-title{color:#174e3e}.exhibit-skill .project-title-stop{color:#ba652c}
.exhibit-copy .project-description{color:#52605c}
.work-picker button[data-work="0"][aria-pressed="true"]{color:#6940bc;border-color:#6940bc}
.work-picker button[data-work="1"][aria-pressed="true"]{color:#087e72;border-color:#087e72}
.work-picker button[data-work="2"][aria-pressed="true"]{color:#26755d;border-color:#26755d}
/* Skill sharing is a small, responsive demonstration of one reusable source. */
.sharing-stage{background:#133e35;color:#f1f6e6;padding:30px 28px 22px}
.sharing-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.sharing-heading h4{margin:0;font-size:25px;line-height:1.4;letter-spacing:-.02em;font-weight:500}
.sharing-heading em{font-style:normal;color:#bfe79f}.shared-count{font-size:24px;letter-spacing:-.03em;color:#bfe79f;white-space:nowrap}
.skill-picker{justify-content:flex-start;gap:8px}
.skill-picker button{border:1px solid #537c6c;color:#e1eddf;border-radius:8px;padding:7px 20px}
.skill-picker button[aria-pressed="true"]{background:#c8e9aa;border-color:#c8e9aa;color:#173e31}
.skill-picker button:hover{background:#315c4c;color:#fff}.skill-picker button[aria-pressed="true"]:hover{background:#d6f2be;color:#173e31}
.sharing-diagram{height:400px}.sharing-wires{stroke-width:1.4}.sharing-wires>path{opacity:.55;fill:none}
.skill-packet{opacity:0;stroke:none}.is-sharing .skill-packet{opacity:1}
.shared-file{top:30px;width:224px;height:168px;padding:20px 20px 86px;gap:12px;transform:translateX(-50%) rotate(-3deg);background:#f6f6e9;color:#234b3c;box-shadow:0 14px 30px #061e2440;border-radius:10px;transition:transform 180ms ease-out}
.shared-file>svg{width:27px;height:34px;flex-shrink:0}.shared-file strong{font-size:22px}
.skill-preview{position:absolute;top:83px;left:20px;right:20px;display:flex;gap:5px;flex-wrap:wrap}
.shared-file .skill-preview>span{font-size:10px;background:#e4ead8;padding:4px 6px;border-radius:4px;color:#365a45}
.file-action{bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #cbd8bf;padding-top:8px;color:#315840;font-size:11px}
.environment-nodes{top:303px;gap:10px}.environment{padding:12px 3px 10px;border:0;border-radius:9px;color:#f6b66a;background:#2c5042;min-width:0}.environment:nth-child(2){color:#bbc7ff;background:#2c454c}.environment:nth-child(3){color:#87e4ca;background:#22594c}
.environment-icon{display:block;width:27px;height:25px;margin:0 auto 7px;stroke:currentColor;stroke-width:1.5;fill:none}
.environment>span{font-size:13px;font-weight:500}.received-skill{font-size:10px;color:#e0eadd;margin-top:4px}
.is-shared .environment{background:#f1bd7c;color:#483820}.is-shared .environment:nth-child(2){background:#c1cafd;color:#313e65}.is-shared .environment:nth-child(3){background:#9ae2ca;color:#1b4f40}.is-shared .received-skill{color:inherit}
.share-status{color:#e0edda;margin-top:16px;font-size:12px;min-height:40px}.sharing-stage .demo-label{color:#b4cbb9;font-size:11px;margin-top:4px}
.sharing-stage :focus-visible{outline:2px solid #f7d394;outline-offset:5px}
@media(max-width:800px){.bonus-goal{width:154px;height:103px;right:-4px;top:98px}.goal-status{top:200px}.rice-player{width:105px;height:145px}.sharing-heading h4{font-size:24px}}
@media(max-width:600px){.sharing-stage{padding:23px 17px 17px}.sharing-heading{margin-bottom:20px}.sharing-heading h4{font-size:22px}.shared-count{font-size:21px}.shared-file{width:208px}.environment-nodes{gap:7px}.environment>span{font-size:12px}.environment .received-skill{font-size:9px}.skill-picker button{padding:7px 16px}.flight-ball{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.bonus-goal.scored .goal-supporters{animation:none;opacity:1;transform:translateY(-12px)}.bonus-goal.scored .goal-art image{animation:none}.shared-file{transition:none}}

/* Keep the instruction beside Rice, with a clear pointer to the football. */
.shoot-guide{position:absolute;left:-97px;bottom:-40px;width:174px;min-height:48px;display:flex;align-items:flex-end;z-index:12;pointer-events:none;color:#a51a30}
.shoot-guide .throw-hint{position:static;display:block;white-space:normal;font-size:12px;line-height:1.6;text-align:left;max-width:100%}
.shoot-guide-arrow{position:absolute;left:65px;top:-38px;width:70px;height:56px;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:opacity 150ms ease-out}
.portrait-stage.is-aiming .shoot-guide-arrow,.portrait-stage.is-playing .shoot-guide-arrow{opacity:0}
.reset-shot{left:-145px;bottom:-42px}
@media(max-width:800px){.shoot-guide{left:90px;bottom:-53px;width:calc(100% - 100px);max-width:190px}.shoot-guide-arrow{left:20px;top:-41px}.reset-shot{left:43px;bottom:-53px}}
@media(prefers-reduced-motion:reduce){.shoot-guide-arrow{transition:none}}

/* Original single-line lettering, with a text alternative in the heading. */
#intro-title{width:100%;max-width:530px;line-height:1}
.intro-wordmark{display:block;width:100%;height:auto}
.intro-text .signature-mark{margin-bottom:4px}
.intro-text .tagline{margin-top:8px}
@media(max-width:600px){#intro-title{max-width:440px}.intro-text .signature-mark{margin-bottom:6px}.intro-text .tagline{margin-top:8px}}
@media(min-width:801px){.intro-text .play-intro{max-width:min(420px,calc(100% - 140px))}}
/* Public activity and a quieter personal sign-off. */
.theme-toggle{margin-left:auto;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:20px;padding:7px 12px;cursor:pointer;font:inherit;font-size:12px}.theme-toggle svg{width:18px;height:18px}.site-header nav{margin-left:0}.contributions{padding:55px 0 32px;border-top:1px solid var(--line);margin-top:55px}.contribution-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.contribution-heading h2{font-size:27px}.contribution-heading p{color:var(--muted);font-size:15px;margin-top:8px}.contribution-heading>a{font-size:14px;color:var(--muted)}.contribution-scroll{overflow-x:auto;margin-top:32px;padding-bottom:10px}.contribution-months{min-width:730px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding-bottom:10px}.contribution-grid{min-width:730px;display:grid;grid-template-rows:repeat(7,14px);grid-auto-flow:column;grid-auto-columns:minmax(12px,1fr);gap:4px}.contribution-cell,.contribution-legend i{border-radius:3px;background:var(--cell);display:block}.contribution-cell:hover{outline:2px solid var(--ink);outline-offset:2px}.level-0{--cell:#e9edea}.level-1{--cell:#b5ddbd}.level-2{--cell:#6ebc85}.level-3{--cell:#35965b}.level-4{--cell:#18743f}.contribution-summary{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:14px;color:var(--muted)}.contribution-summary strong{color:var(--ink);font-weight:600}.contribution-legend{display:flex;align-items:center;gap:5px;font-size:12px}.contribution-legend i{width:13px;height:13px}.contribution-date{font-size:11px;color:var(--muted);margin-top:12px}.elsewhere-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 24px}.elsewhere{padding-top:64px}.elsewhere-intro h2{line-height:1.5}.social-detail{overflow-wrap:anywhere}.footer-year{color:var(--muted);font-size:12px}.site-footer{gap:16px}.site-footer p{flex:1}.site-footer p span{display:block;margin-left:0;font-size:12px;margin-top:4px}
html[data-theme=dark]{color-scheme:dark;--paper:#131715;--ink:#ecefe8;--muted:#a9b4ae;--line:#333e37;--blue:#e79092}
html[data-theme=dark] body{background:var(--paper);color:var(--ink)}
html[data-theme=dark] .intro-wordmark{filter:drop-shadow(0 1px 0 #ffffff18);background:#f5f3ed;border-radius:12px}
html[data-theme=dark] .portrait-disc{background:#30252b}html[data-theme=dark] .pitch-lines{background:repeating-linear-gradient(90deg,#8bb79c08 0 42px,#a2c6aa12 42px 84px);border-color:#46604f}
html[data-theme=dark] .orbit-project{background:#242e28;color:#eff3ec;box-shadow:0 10px 30px #0003}html[data-theme=dark] .orbit-project>span:last-child{color:#b7c4bb}
html[data-theme=dark] .bounce-story strong,html[data-theme=dark] .throw-hint,html[data-theme=dark] .shoot-guide,html[data-theme=dark] .goal-status,html[data-theme=dark] .arsenal-tag{color:#f29d9f}
html[data-theme=dark] .work-carousel-controls>button,html[data-theme=dark] .reset-shot{background:#222b25;border-color:#46534a;color:#d1dbc9}
html[data-theme=dark] .exhibit-xingchen{--product-accent:#c4acf6;--product-ink:#dfd5f1}html[data-theme=dark] .exhibit-maas{--product-accent:#7fd4be;--product-ink:#c2e8dc}html[data-theme=dark] .exhibit-skill{--product-accent:#a4d9b6;--product-ink:#cee6d4}
html[data-theme=dark] .exhibit-copy .project-description{color:#b8c5bc}html[data-theme=dark] .exhibit-skill #skill-title{color:#bde5cb}
html[data-theme=dark] .xingchen-logo,html[data-theme=dark] .daily-logo{background:#f4f3ee;padding:10px;border-radius:8px}
html[data-theme=dark] .work-picker button[data-work][aria-pressed=true]{color:#d5e6d1;border-color:#d5e6d1}html[data-theme=dark] .work-picker button{color:#aab8ad}
html[data-theme=dark] .journal-stage{background:#252d42}html[data-theme=dark] .journal-tabs button{color:#becbee}html[data-theme=dark] .journal-tabs button[aria-selected=true]{color:#edf0ff;border-color:#edf0ff}html[data-theme=dark] .journal-footer,html[data-theme=dark] .journal-footer button{color:#c4cfed}
html[data-theme=dark] .social-link{color:#edf2e9;border-color:var(--line)}html[data-theme=dark] .social-detail{color:var(--muted)}html[data-theme=dark] .social-link:hover{background:#222c25}
html[data-theme=dark] .wechat-dialog{background:#202823;color:var(--ink);border-color:#455448}html[data-theme=dark] .wechat-dialog p{color:#bdcabe}html[data-theme=dark] .dialog-close{color:#e5eee3;background:#344036}html[data-theme=dark] .dialog-article{color:#b1d7c3}
html[data-theme=dark] .level-0{--cell:#252e28}html[data-theme=dark] .level-1{--cell:#174b33}html[data-theme=dark] .level-2{--cell:#237945}html[data-theme=dark] .level-3{--cell:#36a852}html[data-theme=dark] .level-4{--cell:#5acc68}
@media(max-width:600px){.site-header{gap:10px;flex-wrap:wrap}.site-header nav{gap:14px}.theme-toggle{padding:6px 8px}.theme-toggle span{display:none}.contribution-heading{align-items:flex-start;flex-direction:column;gap:10px}.contribution-heading h2{font-size:23px}.contribution-summary{flex-wrap:wrap}.elsewhere-links{grid-template-columns:1fr!important}.site-footer{flex-wrap:wrap}.site-footer p{flex-basis:60%}.contributions{margin-top:28px;padding-top:35px}}
html[data-theme=dark] .intro-wordmark{background:none;border-radius:0;filter:invert(1) hue-rotate(180deg) saturate(.75)}
html[data-theme=dark] .xingchen-logo,html[data-theme=dark] .daily-logo{background:none;padding:0;border-radius:0;filter:invert(1) hue-rotate(180deg)}
html[data-theme=dark] .orbit-logo{background:#f3f4ed;border-radius:5px;padding:2px}
html[data-theme=dark] .elsewhere-intro p,html[data-theme=dark] .xingchen-attribution,html[data-theme=dark] .facts-note{color:#b4c1b7}
html[data-theme=dark] .social-arrow{color:#abc6bc}html[data-theme=dark] .skip-link{color:#131715}

.personal-signoff{display:flex;flex-direction:column;align-items:center;text-align:center;padding:42px 0;gap:18px}.personal-signoff .footer-signature{flex:none;font-size:16px;font-weight:400;color:var(--muted)}.footer-signature strong{color:var(--ink);font-weight:500}.footer-meta{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px}.footer-meta a{text-decoration:none}.footer-meta a:hover{color:var(--ink);text-decoration:underline}.life-counter{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:16px}.life-counter[hidden]{display:none}.life-counter svg{width:20px;height:20px}.life-years{font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink)}@media(max-width:600px){.life-counter{font-size:13px;gap:6px}.footer-meta{gap:8px}.personal-signoff .footer-signature{flex-basis:auto}}