:root {
  --cream: #fff9df;
  --ink: #27233a;
  --muted: #514c68;
  --red: #d9364a;
  --red-dark: #a51f32;
  --blue: #176fba;
  --blue-dark: #0d467a;
  --yellow: #ffd447;
  --green: #3ba86b;
  --green-dark: #176a42;
  --purple: #7a55c7;
  --white: #fffefa;
  --focus: #061fb0;
  --shadow: 0 18px 38px rgba(39, 35, 58, .14);
  color-scheme: light;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "PingFang TC", "Noto Sans TC", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-size: 18px; line-height: 1.72; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
::selection { background: var(--yellow); color: var(--ink); }
a { color: var(--blue-dark); text-decoration-thickness: 3px; text-underline-offset: .22em; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; transform: translateY(-180%); border-radius: 12px; background: var(--ink); color: var(--white); padding: .65rem 1rem; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 20; display: flex; max-width: 1280px; margin: 0 auto; padding: .8rem clamp(1rem, 4vw, 3rem); align-items: center; justify-content: space-between; gap: 1rem; }
.identity-mark { display: grid; width: 3.4rem; height: 3.4rem; flex: 0 0 auto; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 0 5px 0 var(--red); text-decoration: none; transform: rotate(-4deg); }
.identity-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--cream) url("assets/zihe-avatar-foliage-transparent-512.webp") 50% 57% / 176% no-repeat; }
.header-actions { display: flex; align-items: center; gap: .55rem; }
.header-popover { position: relative; }
.header-popover summary { display: grid; min-width: 3rem; min-height: 3rem; place-items: center; border: 3px solid var(--ink); border-radius: 15px 11px 14px 10px; background: var(--white); color: var(--ink); cursor: pointer; font-size: .74rem; font-weight: 950; list-style: none; padding: .35rem .75rem; }
.header-popover summary::-webkit-details-marker { display: none; }
.header-popover[open] summary { background: var(--yellow); box-shadow: 0 4px 0 var(--red); transform: translateY(-2px) rotate(-1deg); }
.globe-icon { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; }
.popover-panel { position: absolute; z-index: 30; min-width: 12rem; top: calc(100% + .75rem); right: 0; border: 3px solid var(--ink); border-radius: 17px 12px 15px 10px; background: var(--white); box-shadow: 8px 10px 0 rgba(39,35,58,.16); padding: .6rem; }
.main-nav { display: grid; gap: .2rem; }
.main-nav a { min-height: 2.75rem; border-radius: 10px 7px 9px 6px; color: var(--ink); font-size: .9rem; font-weight: 900; padding: .55rem .75rem; text-decoration: none; }
.main-nav a:hover { background: #fff0b5; }
.language-switch { display: grid; gap: .2rem; transform: rotate(.4deg); }
.language-switch button { min-height: 2.75rem; border: 0; border-radius: 11px 8px 10px 7px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 950; padding: .45rem .75rem; text-align: left; }
.language-switch button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }

.hero { position: relative; display: grid; max-width: 1180px; min-height: calc(100svh - 5rem); margin: 0 auto; overflow: hidden; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(5rem, 9vw, 8rem); grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.hero::before { position: absolute; z-index: -2; width: 36rem; height: 36rem; top: 2rem; left: -18rem; border-radius: 47% 53% 41% 59%; background: #8cdbef; content: ""; transform: rotate(15deg); }
.hero::after { position: absolute; z-index: -2; width: 17rem; height: 17rem; right: -6rem; bottom: 5rem; background: var(--yellow); clip-path: polygon(50% 0, 61% 37%, 100% 24%, 70% 52%, 100% 78%, 61% 66%, 50% 100%, 39% 66%, 0 78%, 30% 52%, 0 24%, 39% 37%); content: ""; transform: rotate(8deg); }
.hero-squiggle { position: absolute; z-index: -1; width: 80%; right: -18%; bottom: 7%; fill: none; stroke: var(--red); stroke-dasharray: 1 11; stroke-linecap: round; stroke-width: 11; }
.hero-portrait { position: relative; transform: rotate(-3deg); }
.hero-portrait img { position: relative; z-index: 1; display: block; width: min(36vw, 405px); height: min(36vw, 405px); margin: auto; border-radius: 50%; clip-path: circle(49% at 50% 50%); filter: drop-shadow(0 18px 24px rgba(39,35,58,.2)); object-fit: contain; object-position: center; }
.portrait-rays { position: absolute; width: min(42vw, 470px); height: min(42vw, 470px); top: 50%; left: 50%; border: 12px dashed var(--yellow); border-radius: 43% 57% 46% 54%; transform: translate(-50%, -50%) rotate(9deg); }
.hero-portrait p { position: relative; z-index: 2; width: fit-content; max-width: 25rem; margin: -1.1rem auto 0; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 0 9px 22px rgba(39,35,58,.12); color: var(--ink); font-size: .9rem; font-weight: 950; padding: .55rem .9rem; transform: rotate(2deg); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 13ch; margin-bottom: 1.5rem; font-size: clamp(2.8rem, 6vw, 5.8rem); line-height: 1.01; letter-spacing: -.04em; text-wrap: balance; }
h1::after { display: block; width: 45%; height: .35rem; margin-top: .65rem; border-radius: 50%; background: var(--red); content: ""; transform: rotate(-2deg); }
.hero-intro { max-width: 34rem; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.28rem); font-weight: 700; }
.hero-copy [data-i18n="heroTitle"], .hero-intro { white-space: pre-line; }
.birthday { width: fit-content; margin: 1rem 0; background: #d6f3c5; color: var(--green-dark); font-size: .88rem; font-weight: 950; padding: .4rem .7rem; transform: rotate(-1deg); }
.primary-action, .project-link { display: inline-flex; width: fit-content; min-height: 3.4rem; margin-top: .8rem; align-items: center; border: 3px solid var(--ink); border-radius: 15px 11px 14px 9px; background: var(--red); box-shadow: 0 9px 0 #8f2432; color: var(--white); font-weight: 950; padding: .7rem 1.2rem; text-decoration: none; transition: transform 180ms cubic-bezier(.16,1,.3,1), box-shadow 180ms ease; }
.primary-action:hover, .project-link:hover { transform: translateY(3px) rotate(-1deg); box-shadow: 0 5px 0 #8f2432; }

main > section:not(.hero) { padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 5vw, 5rem); }
.section-title { max-width: 1080px; margin: 0 auto 3.5rem; }
h2 { max-width: 17ch; margin-bottom: 1.2rem; font-size: clamp(2.35rem, 5vw, 5rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
h3 { font-size: clamp(1.45rem, 2.8vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }

.about-section { background: var(--blue); color: var(--white); clip-path: polygon(0 3%, 100% 0, 100% 96%, 0 100%); }
.about-columns { display: grid; max-width: 1080px; margin: 0 auto; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.about-story p { max-width: 66ch; color: #f4faff; font-weight: 650; }
blockquote { margin: 0; background: var(--yellow); color: var(--ink); clip-path: polygon(4% 0, 96% 4%, 100% 91%, 91% 100%, 2% 96%, 0 8%); padding: clamp(2rem, 4vw, 3.2rem); transform: rotate(2deg); }
blockquote p { margin: 0; font-size: clamp(1.35rem, 2.8vw, 2.1rem); font-weight: 950; line-height: 1.42; }

.journey-section { position: relative; background: #fff1f1; }
.journey-section::before, .journey-section::after { position: absolute; content: ""; pointer-events: none; }
.journey-section::before { width: 7rem; height: 7rem; top: 6rem; right: 6vw; border: 10px solid var(--purple); border-radius: 50%; border-right-color: transparent; transform: rotate(-20deg); }
.journey-section::after { width: 8rem; height: 1rem; left: 4vw; bottom: 5rem; background: var(--green); box-shadow: 0 1.7rem 0 var(--green), 0 3.4rem 0 var(--green); transform: rotate(8deg); }
.journey-heading h2 { max-width: 18ch; }
.journey-heading > p { max-width: 55ch; color: var(--muted); font-size: 1.1rem; font-weight: 750; }
.journey-map { position: relative; max-width: 1080px; min-height: 1480px; margin: 0 auto; }
.journey-path { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.path-shadow, .path-main { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.path-shadow, .path-main, .map-dots circle { vector-effect: non-scaling-stroke; }
.path-shadow { stroke: var(--ink); stroke-width: 28; opacity: .12; transform: translate(8px, 10px); }
.path-main { stroke: var(--red); stroke-dasharray: 2 19; stroke-width: 18; }
.map-dots { fill: var(--yellow); stroke: var(--ink); stroke-width: 5; }
.life-list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr 1fr; gap: 4rem 14rem; }
.life-stop { position: relative; z-index: 2; max-width: 24rem; min-height: 12rem; border: 4px solid var(--ink); border-radius: 22px 14px 19px 12px; background: var(--white); box-shadow: 0 13px 28px rgba(39,35,58,.13); padding: 1.35rem 1.5rem; }
.life-stop:nth-child(even) { margin-top: 8rem; transform: rotate(1.4deg); }
.life-stop:nth-child(odd) { transform: rotate(-1.2deg); }
.life-stop::after { position: absolute; width: 4rem; height: 1rem; top: -.7rem; left: calc(50% - 2rem); background: rgba(255, 212, 71, .8); content: ""; transform: rotate(-4deg); }
.life-stop .age { display: inline-block; margin-bottom: .65rem; border-radius: 8px 5px 7px 4px; color: var(--white); font-size: .78rem; font-weight: 950; padding: .2rem .55rem; }
.life-stop h3 { margin-bottom: .5rem; font-size: clamp(1.35rem, 2.2vw, 2rem); }
.life-stop p { margin: 0; color: var(--muted); font-size: .94rem; font-weight: 650; line-height: 1.55; }
.life-stop.red .age { background: var(--red-dark); }
.life-stop.yellow .age { background: #8a5c00; }
.life-stop.blue .age { background: var(--blue-dark); }
.life-stop.green .age { background: var(--green-dark); }
.life-stop.purple .age { background: #513691; }
.next-stop { border-style: dashed; background: #edffe5; }

.method-section { display: grid; background: var(--ink); color: var(--white); grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 8rem); }
.method-section > * { max-width: 650px; }
.method-copy { justify-self: end; }
.method-copy h2::after { display: block; width: 10rem; height: .7rem; margin-top: 1rem; border-radius: 50%; background: var(--yellow); content: ""; transform: rotate(-3deg); }
.method-story { align-self: center; }
.method-story > p { color: #f0edf9; }
.decision-equation { display: grid; margin-top: 2.2rem; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.decision-equation span { display: grid; min-height: 8rem; place-items: center; border: 3px solid var(--white); border-radius: 18px 11px 16px 10px; background: var(--purple); color: var(--white); font-weight: 900; padding: 1rem; text-align: center; }
.decision-equation span:last-child { background: var(--green-dark); }
.decision-equation svg { width: 4rem; fill: none; stroke: var(--yellow); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }

.projects-section { background: #dff3ff; }
.projects-heading h2 { max-width: 20ch; }
.project-spread { position: relative; display: grid; max-width: 1120px; margin: 0 auto 5rem; overflow: hidden; border: 4px solid var(--ink); border-radius: 24px 15px 22px 12px; background: var(--white); box-shadow: var(--shadow); grid-template-columns: .36fr .64fr; }
.project-spread:nth-of-type(odd) { transform: rotate(-.35deg); }
.project-spread:nth-of-type(even) { transform: rotate(.45deg); }
.project-year { display: flex; min-height: 34rem; flex-direction: column; justify-content: space-between; background: var(--blue); color: var(--white); padding: clamp(2rem, 5vw, 4rem); }
.project-year span { font-weight: 950; }
.project-year strong { max-width: 9ch; font-size: clamp(2.2rem, 5vw, 5rem); line-height: .96; letter-spacing: -.04em; overflow-wrap: anywhere; }
.dog-project .project-year { background: var(--purple); }
.project-content { padding: clamp(2.2rem, 5vw, 5rem); }
.project-content > p:not(.project-status) { color: var(--muted); }
.project-status { width: fit-content; margin: 0 0 1rem; border: 3px solid var(--ink); border-radius: 10px 7px 9px 5px; font-size: .8rem; font-weight: 950; padding: .25rem .6rem; transform: rotate(-1deg); }
.project-status.live { background: var(--yellow); color: var(--ink); }
.project-status.planning { background: #d7f5cc; color: var(--green-dark); }
.project-flow { display: grid; margin: 2rem 0; padding: 0; list-style: none; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
.project-flow li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .7rem; align-items: start; }
.project-flow li > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 3px solid var(--ink); border-radius: 43% 57% 48% 52%; background: var(--red); color: var(--white); font-size: .78rem; font-weight: 950; }
.project-flow p { margin: 0; color: var(--ink); font-size: .94rem; font-weight: 750; line-height: 1.5; }
.evidence-note, .honest-state { margin-top: 1.5rem; font-size: .82rem; }
.honest-state { border-top: 4px dotted var(--purple); padding-top: 1rem; }

.automation-section { display: grid; max-width: 1180px; margin: 0 auto; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.automation-section > div:first-child p { max-width: 60ch; color: var(--muted); }
.automation-flow { position: relative; margin: 0; padding: 0; list-style: none; }
.automation-flow::before { position: absolute; top: 2.2rem; bottom: 2.2rem; left: 2rem; width: 7px; border-radius: 50%; background: var(--yellow); content: ""; transform: rotate(.5deg); }
.automation-flow li { position: relative; display: grid; margin-bottom: 1.1rem; grid-template-columns: 4.2rem 1fr; gap: 1rem; align-items: center; }
.automation-flow span { z-index: 1; display: grid; width: 4.2rem; height: 4.2rem; place-items: center; border: 3px solid var(--ink); border-radius: 44% 56% 47% 53%; background: var(--red); color: var(--white); font-size: .7rem; font-weight: 950; }
.automation-flow li:nth-child(2) span { background: var(--blue); }
.automation-flow li:nth-child(3) span { background: var(--purple); }
.automation-flow li:nth-child(4) span { background: var(--green-dark); }
.automation-flow p { margin: 0; font-weight: 850; }
.sync-readback { display: flex; grid-column: 2; align-items: center; gap: 1rem; margin-top: -1rem; border: 3px dashed var(--green-dark); border-radius: 14px 9px 13px 8px; background: #e5f9dc; color: var(--green-dark); padding: 1rem 1.2rem; transform: rotate(-.5deg); }
.sync-readback p { margin: 0; line-height: 1.45; }
.sync-light { width: 1rem; height: 1rem; flex: 0 0 auto; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); }

.closing-section { position: relative; overflow: hidden; background: var(--red); color: var(--white); text-align: center; }
.closing-section svg { position: absolute; width: 100%; top: 5%; left: 0; fill: none; stroke: rgba(255,255,255,.35); stroke-dasharray: 3 18; stroke-linecap: round; stroke-width: 12; }
.closing-section h2, .closing-section p { position: relative; z-index: 1; max-width: 900px; margin-right: auto; margin-left: auto; }
.closing-section h2 { max-width: 19ch; }
.closing-section p { color: #fffafa; font-size: 1.15rem; font-weight: 650; }
footer { background: var(--ink); color: #eeeaf8; padding: 3rem clamp(1rem, 5vw, 5rem); text-align: center; }
footer a { color: #ffe47d; }
.source-note { max-width: 70ch; margin: 1rem auto 0; font-size: .78rem; }

@media (max-width: 920px) {
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-portrait img { width: min(68vw, 390px); height: min(68vw, 390px); }
  .portrait-rays { width: min(78vw, 450px); height: min(78vw, 450px); }
  .hero-copy { max-width: 720px; }
  .life-list { gap-inline: 8rem; }
  .method-section, .automation-section { grid-template-columns: 1fr; }
  .method-copy { justify-self: start; }
  .method-section > * { max-width: 760px; }
  .sync-readback { grid-column: 1; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .site-header { gap: .7rem; }
  .identity-mark { width: 3.25rem; height: 3.25rem; }
  .header-popover summary { min-height: 3rem; }
  .hero { padding-top: 2.5rem; }
  .hero::before { width: 24rem; height: 24rem; left: -13rem; }
  .about-columns { grid-template-columns: 1fr; }
  .journey-map { min-height: auto; }
  .journey-path { width: 3rem; height: calc(100% - 3rem); left: .1rem; }
  .path-shadow { stroke-width: 22; }
  .path-main { stroke-width: 15; }
  .map-dots { display: none; }
  .life-list { display: block; padding-left: 3.3rem; }
  .life-stop, .life-stop:nth-child(even), .life-stop:nth-child(odd) { min-height: 0; margin: 0 0 2rem; transform: rotate(-.4deg); }
  .life-stop:nth-child(even) { transform: rotate(.55deg); }
  .decision-equation { grid-template-columns: 1fr; }
  .decision-equation svg { transform: rotate(90deg); justify-self: center; }
  .project-spread, .project-spread:nth-of-type(odd), .project-spread:nth-of-type(even) { grid-template-columns: 1fr; transform: none; }
  .project-year { min-height: 13rem; }
  .project-year strong { max-width: 14ch; }
  .project-flow { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}