:root {
  color-scheme: dark;
  --background: #050b13;
  --surface: #0c1322e8;
  --text: #e7edf4;
  --body: #b3bfce;
  --muted: #96a5b9;
  --accent: #57cfcc;
  --blue: #73a5fa;
  --line: #7badc222;
  --content: 1200px;
  --motion-state: paused;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { isolation: isolate; margin: 0; background: var(--background); color: var(--text); font: 16px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
h1,h2,h3,p,figure,dl,dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button,a { -webkit-tap-highlight-color: transparent; }
img,svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: #57cfcc; color: #070a14; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
main:focus, .section:focus, .hero:focus { outline: none; }
.container { width: min(var(--content),86%); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 8px 16px; background: var(--accent); color: var(--background); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--background); }
.nebula { position: absolute; inset: -5%; background: url("images/deep-space-v7-2.png") center/cover; opacity: .20; filter: saturate(.65); animation: nebula-drift 60s ease-in-out infinite alternate; animation-play-state: var(--motion-state); }
.site-atmosphere::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 15%,#113a4b22,transparent 55%),linear-gradient(0deg,#070a1433,transparent); }
.sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
main,.section { scroll-margin-top: 96px; }
.section { position: relative; padding-block: 60px; }
.about,.contact { padding-block: 40px; }
.section::before { content: ""; position: absolute; inset: 0 12% auto; height: 1px; background: linear-gradient(90deg,transparent,var(--line),transparent); }
h2 { color: var(--accent); font-size: 32px; line-height: 1.45; font-weight: 500; letter-spacing: .05em; text-align: center; }
.section-copy { color: var(--body); }
.about .section-copy { max-width: 640px; margin: 24px auto 0; text-align: center; }
.about-description { font-size: 19px; line-height: 1.9; text-wrap: pretty; }
.placeholder { color: var(--muted); font-size: 16px; }
.about .placeholder { margin-top: 18px; }
.project-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; margin-top: 48px; }
.project-card { --project-accent: var(--accent); --project-rgb: 87 207 204; --project-surface: #0b202475; --project-hover: #0e292da6; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 28px; backdrop-filter: blur(10px); border: 1px solid rgb(var(--project-rgb) / .25); border-radius: 18px; background: var(--project-surface); animation: portfolio-float 5s ease-in-out infinite; animation-play-state: var(--project-motion-state,paused); transform-origin: center; transition: box-shadow 360ms cubic-bezier(.2,.7,.3,1),border-color 240ms,background 240ms; }
.project-video { --project-accent: var(--blue); --project-rgb: 115 165 250; --project-surface: #10203975; --project-hover: #142b48a6; animation-duration: 4.5s; animation-delay: .8s; }
.project-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient(105deg,transparent 40%,rgb(var(--project-rgb) / .08) 46%,#ffffff14 50%,rgb(var(--project-rgb) / .08) 54%,transparent 60%); background-size: 250% 100%; background-position: 200% 0; opacity: 0; }
.project-card::after { content: ""; position: absolute; inset: 0 16% auto; height: 1px; background: linear-gradient(90deg,transparent,rgb(var(--project-rgb) / .4),transparent); pointer-events: none; }
.works-in-view { --project-motion-state: var(--motion-state); }
@keyframes portfolio-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes portfolio-sweep { 0% { background-position: 200% 0; opacity: 0; } 12%,85% { opacity: 1; } 100% { background-position: -50% 0; opacity: 0; } }
@media (hover:hover) and (pointer:fine) and (min-width:681px) {
  .motion-enabled:not(.is-page-hidden) .project-card.is-hovered::before { animation: portfolio-sweep .6s ease-out both; animation-play-state: var(--project-motion-state,paused); }
  .project-card.is-hovered { border-color: rgb(var(--project-rgb) / .42); background: var(--project-hover); }
  .motion-enabled:not(.is-page-hidden) .project-card.is-hovered {
    animation-play-state: paused;
    transform: none;
    box-shadow: 0 20px 36px -12px #0009,0 0 24px rgb(var(--project-rgb) / .12);
  }
}
@media (hover:none),(pointer:coarse),(max-width:680px) {
  .project-card.is-touching { border-color: rgb(var(--project-rgb) / .42); background: var(--project-hover); }
}
html:not(.motion-enabled) .project-card,.is-page-hidden .project-card { transition: none; }
html:not(.motion-enabled) .project-card { animation: none; }

h3 { font-size: 25px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.project-heading h3::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px 5px 0; border-radius: 50%; background: var(--accent); }
.project-video .project-heading h3::before { background: var(--blue); }
.project-value { margin-top: 10px; font-size: 16px; color: #bdceda; text-wrap: pretty; }
.project-illustration { margin-block: 12px 0; }
.project-line-art { width: 100%; height: 112px; fill: none; stroke: var(--project-accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.project-line-art path,.project-line-art rect,.project-line-art circle { vector-effect: non-scaling-stroke; }
.project-illustration figcaption { margin-top: 6px; margin-bottom: 10px; color: var(--muted); font-size: 11px; text-align: right; }
.project-description { margin-top: 10px; font-size: 15px; color: var(--body); text-wrap: pretty; }
.project-illustration .editorial-art { --art-offset: 0s; --art-ink: #b8e9e0; --art-paper: #092127; height: 188px; }
.project-video .editorial-art { --art-offset: 1.1s; --art-ink: #d7c9ed; --art-paper: #171226; }
.editorial-back-sheet,.editorial-video-back { fill: var(--art-paper); stroke-width: 1; opacity: .28; }
.editorial-source-paper { fill: var(--art-paper); stroke-width: 1.5; }
.editorial-source-fold,.editorial-slate-fold { stroke-width: 1.2; opacity: .75; }
.editorial-source-heading { stroke: var(--art-ink); stroke-width: 1.8; }
.editorial-source-lines { opacity: .65; stroke-width: 1.2; }
.editorial-excerpt-base,.editorial-note-emphasis { fill: var(--project-accent); stroke: none; opacity: .14; }
.editorial-source-accent { stroke: var(--art-ink); stroke-width: 1.7; opacity: .85; }
.editorial-quote { fill: var(--art-ink); stroke: none; opacity: .85; }
.editorial-reference-link { stroke-width: 1.6; opacity: .8; }
.editorial-note,.editorial-slate-body,.editorial-slate-top { fill: var(--art-paper); stroke: var(--art-ink); stroke-width: 1.7; }
.editorial-note-fold { opacity: .75; stroke-width: 1.2; }
.editorial-note-heading { stroke: var(--art-ink); stroke-width: 2; }
.editorial-note-lines { opacity: .65; stroke-width: 1.2; }
.editorial-note-excerpt { stroke: var(--art-ink); stroke-width: 1.7; }
.editorial-excerpt-bracket { opacity: .8; stroke-width: 1.6; }
.editorial-source-mark { opacity: .8; stroke-width: 1.4; }
.editorial-lens-handle { fill: var(--art-paper); stroke: var(--art-ink); stroke-width: 1.7; }
.editorial-lens { fill: var(--art-paper); stroke: var(--art-ink); stroke-width: 2; }
.editorial-lens-type { fill: var(--art-ink); stroke: none; opacity: .9; }
.editorial-focus-scan { stroke: var(--art-ink); stroke-width: 2; opacity: .5; }
.editorial-slate-stripes { fill: var(--project-accent); fill-opacity: .22; stroke: none; }
.editorial-slate-rule { stroke-width: 1; opacity: .4; }
.editorial-slate-hinge { fill: var(--project-accent); stroke: none; }
.editorial-shot-edge { stroke-width: 1; opacity: .4; }
.editorial-code-focus { fill: var(--project-accent); fill-opacity: .15; stroke: none; }
.editorial-code-braces { stroke: var(--art-ink); stroke-width: 1.8; }
.editorial-code-lines { stroke: var(--art-ink); stroke-width: 1.6; opacity: .85; }
.editorial-explain-link { stroke-width: 1.5; opacity: .7; }
.editorial-explain-base { stroke-width: 1.5; opacity: .6; }
.editorial-explain-accent { stroke: var(--art-ink); stroke-width: 1.8; opacity: .75; }
.editorial-caption-base { stroke-width: 1.1; opacity: .45; }
.editorial-caption-stroke { stroke: var(--art-ink); stroke-width: 1.8; opacity: .65; }
.editorial-audio-ribbon { fill: var(--art-paper); stroke-width: 1.1; }
.editorial-audio { --wave-high: 1.1; --wave-low: .72; transform-box: fill-box; transform-origin: center; opacity: .85; stroke-width: 1.6; }
.editorial-audio-middle { --wave-high: .8; --wave-low: 1.08; }
.editorial-audio-tail { --wave-high: 1.12; --wave-low: .75; --wave-lag: .18s; }
.editorial-playhead { stroke: var(--art-ink); stroke-width: 1; opacity: 0; }
.editorial-playhead path+path { fill: var(--art-ink); stroke: none; }
.project-illustration .editorial-caption { text-align: center; font-size: 13px; }
.motion-enabled.works-in-view .editorial-source-accent { stroke-dasharray: 100; animation: editorial-source 9s ease-in-out var(--art-offset) infinite both; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .editorial-note-emphasis { animation: editorial-emphasis 9s ease-in-out var(--art-offset) infinite both; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .editorial-focus-scan { stroke-dasharray: 100; animation: editorial-focus 9s ease-in-out var(--art-offset) infinite both; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .editorial-playhead { animation: editorial-playhead 9s ease-in-out var(--art-offset) infinite both; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .editorial-caption-stroke { stroke-dasharray: 100; animation: editorial-caption 9s ease-in-out var(--art-offset) infinite both; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .editorial-explain-accent { stroke-dasharray: 100; animation: editorial-explain 9s ease-in-out var(--art-offset) infinite both; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .editorial-audio { animation: editorial-audio 9s ease-in-out calc(var(--art-offset) + var(--wave-lag,0s)) infinite both; animation-play-state: var(--motion-state,paused); }
@keyframes editorial-source { 0%,100% { opacity: .6; stroke-dashoffset: 0; } 6% { opacity: .3; stroke-dashoffset: 100; } 23%,47% { opacity: 1; stroke-dashoffset: 0; } 70% { opacity: .6; } }
@keyframes editorial-emphasis { 0%,12%,100% { opacity: .14; } 28%,60% { opacity: .38; } 82% { opacity: .14; } }
@keyframes editorial-focus { 0%,28%,100% { opacity: .5; stroke-dashoffset: 0; } 32% { opacity: .3; stroke-dashoffset: 100; } 53%,72% { opacity: 1; stroke-dashoffset: 0; } 90% { opacity: .5; } }
@keyframes editorial-playhead { 0%,7% { transform: translateX(0); opacity: 0; } 12% { opacity: .75; } 68%,77% { transform: translateX(202px); opacity: .75; } 84%,99% { transform: translateX(202px); opacity: 0; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes editorial-caption { 0%,18%,100% { opacity: .65; stroke-dashoffset: 0; } 22% { opacity: .3; stroke-dashoffset: 100; } 40%,72% { opacity: 1; stroke-dashoffset: 0; } 90% { opacity: .65; } }
@keyframes editorial-explain { 0%,27%,100% { opacity: .65; stroke-dashoffset: 0; } 31% { opacity: .3; stroke-dashoffset: 100; } 47%,74% { opacity: 1; stroke-dashoffset: 0; } 90% { opacity: .65; } }
@keyframes editorial-audio { 0%,15%,78%,100% { transform: scaleY(1); opacity: .85; } 27%,44%,61% { transform: scaleY(var(--wave-high)); opacity: 1; } 35%,52%,69% { transform: scaleY(var(--wave-low)); opacity: .75; } }
@media (max-width:680px) {
  .project-illustration .editorial-art { height: auto; aspect-ratio: 100 / 47; max-height: 170px; }
  .editorial-back-sheet,.editorial-video-back,.editorial-source-lines,.editorial-note-lines,.editorial-shot-edge { display: none; }
}
.project-term { white-space: nowrap; }
.project-contribution { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.contact { text-align: center; }
.contact .section-copy { margin-top: 24px; }
.contact-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 44px; margin-top: 32px; }
.contact-item { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.contact-item svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-footer { padding-block: 28px 44px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
.motion-enabled { --motion-state: running; }
.is-page-hidden { --motion-state: paused; }
@keyframes nebula-drift { to { transform: translate3d(1.5%,-1%,0) scale(1.035); } }
@media (max-width:900px) {
  .container { width: calc(100% - 64px); }
  .project-card { padding: 24px; }
  .project-grid { gap: 22px; }
  .section { padding-block: 56px; }
  .about,.contact { padding-block: 44px; }
}
@media (max-width:680px) {
  .container { width: calc(100% - 48px); }
  main,.section,.hero { scroll-margin-top: 84px; }
  .section { padding-block: 48px; }
  .about,.contact { padding-block: 40px; }
  h2 { font-size: 28px; }
  .about .section-copy { margin-top: 24px; text-align: left; }
  .about-description { font-size: 17px; }
  .project-grid { grid-template-columns: 1fr; margin-top: 32px; gap: 24px; }
  .project-card { padding: 22px; backdrop-filter: none; --project-surface: #0b20248a; }
  .project-video { --project-surface: #1020398a; }
  .project-line-art { height: 96px; stroke-width: 1.4; }
  .project-description { font-size: 16px; }
  .contact-list { flex-direction: column; align-items: center; gap: 20px; }
  .site-footer { padding-bottom: 36px; }
}
@media (max-width:360px) {
  .container { width: calc(100% - 40px); }
  .project-card { padding: 18px; }
  .project-value { font-size: 15px; }
  .project-description { text-wrap: balance; }
}
@media (max-height:600px) and (min-width:681px) {
}

/* Shared typography and project surfaces. */
.container { width: min(1200px,86%); }
.section { padding-block: 16px; }
.section::before { display: none; }
h2 { text-align: left; font-size: 34px; line-height: 46px; font-weight: 550; color: #eef4fa; letter-spacing: 0; }
.about { padding-block: 20px 18px; }
.about .section-copy { max-width: 520px; margin: 8px 0 0; text-align: left; }
.about-description { font-size: 20px; line-height: 34px; color: #dde7ef; text-wrap: pretty; }
.placeholder { color: #b6c7d7; font-size: 16px; line-height: 26px; }
.about .placeholder { margin-top: 4px; }
.project-grid { grid-template-columns: minmax(0,1fr); gap: 30px; margin-top: 24px; }
.project-card { display: flex; flex-direction: column; padding: 28px 32px; --project-accent: #8bd0ca; --project-rgb: 68 146 139; --project-surface: #062025b5; --project-hover: #0a2931cb; border-color: #285356; backdrop-filter: blur(3px); }
.project-video { --project-accent: #b6a4d7; --project-rgb: 139 114 182; --project-surface: #1c142db8; --project-hover: #251a38cf; border-color: #514266; }
.project-heading h3 { font-size: 32px; line-height: 40px; font-weight: 550; }
.project-heading h3::before,.project-video .project-heading h3::before { background: var(--project-accent); width: 6px; height: 6px; }
.project-value { margin-top: 8px; font-size: 19px; line-height: 30px; color: #e0e9f1; }
.project-description { margin-top: 4px; font-size: 18px; line-height: 29px; color: #c3d0df; }
.project-tech-stack { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 24px; text-wrap: pretty; }
.project-design { grid-column: 1 / -1; grid-row: 4; order: 5; min-width: 0; margin-top: 16px; border-top: 1px solid rgb(var(--project-rgb) / .28); }
.project-design > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-block: 8px; color: var(--project-accent); font-size: 15px; line-height: 24px; font-weight: 500; list-style: none; cursor: pointer; }
.project-design > summary::-webkit-details-marker { display: none; }
.project-design > summary:focus-visible { outline-offset: 3px; }
.design-summary-action { display: inline-flex; align-items: center; gap: 8px; color: var(--body); font-size: 13px; font-weight: 400; }
.design-summary-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.design-less,.project-design[open] .design-more { display: none; }
.project-design[open] .design-less { display: inline; }
.project-design[open] .design-summary-action svg { transform: rotate(180deg); }
.design-content { padding: 8px 0 4px; color: var(--body); }
.design-map { margin: 20px 0 0; padding: 20px; border: 1px solid rgb(var(--project-rgb) / .22); border-radius: 12px; background: rgb(0 0 0 / .10); }
.design-map-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 18px; }
.design-map-title strong { color: var(--text); font-size: 15px; font-weight: 500; }
.design-map-title > span { color: var(--muted); font-size: 12px; }
.knowledge-map,.production-map { background: radial-gradient(ellipse at 50% 35%,rgb(var(--project-rgb) / .07),transparent 65%),rgb(0 0 0 / .08); }
.arch-eyebrow { display: block; margin-bottom: 6px; color: var(--project-accent); font: 10px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .12em; }
.design-map-heading { min-width: 0; }
.design-map-heading > strong { font-size: 18px; line-height: 1.6; }
.flow-node { position: relative; min-width: 0; color: var(--project-accent); }
.flow-node strong { display: block; color: var(--text); font-size: 16px; font-weight: 500; line-height: 1.7; }
.flow-node small { display: block; margin-top: 4px; color: var(--body); font-size: 12px; line-height: 1.8; }
.flow-art { display: block; flex: none; width: var(--flow-art-size,100px); height: var(--flow-art-size,100px); margin-inline: auto; overflow: visible; fill: none; stroke: var(--project-accent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.flow-muted { opacity: .4; }
.flow-accent { opacity: .8; }
.knowledge-scene.knowledge-cycle { --cycle-art-size: 86px; --cycle-label-size: 72px; --cycle-gap: 36px; --flow-art-size: var(--cycle-art-size); position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,calc(var(--cycle-art-size) + var(--cycle-label-size))); row-gap: var(--cycle-gap); max-width: 760px; margin: 28px auto 22px; }
.knowledge-cycle .cycle-node { z-index: 1; width: min(calc(100% - 20px),160px); height: calc(var(--cycle-art-size) + var(--cycle-label-size)); justify-self: center; text-align: center; }
.knowledge-cycle .knowledge-store { grid-area: 1 / 1; }
.knowledge-cycle .knowledge-compile { grid-area: 1 / 2; }
.knowledge-cycle .knowledge-use { grid-area: 2 / 2; }
.knowledge-cycle .knowledge-incubation { grid-area: 2 / 1; }
.knowledge-cycle .cycle-node > strong { margin-top: 8px; font-size: 18px; }
.knowledge-cycle .cycle-node > small { font-size: 13px; line-height: 1.7; }
.knowledge-cycle .map-hotspot:hover { background: transparent; }
.knowledge-cycle .map-hotspot[aria-pressed="true"]::after { display: none; }
.knowledge-cycle .cycle-node.is-selected > strong { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.knowledge-cycle .cycle-link { position: absolute; pointer-events: none; color: var(--project-accent); }
.cycle-link svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cycle-route,.cycle-light { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cycle-route { stroke: rgb(var(--project-rgb) / .6); stroke-width: 1.1; }
.cycle-light { stroke: #d5f5eb; stroke-width: 1.6; stroke-dasharray: 9 91; opacity: 0; }
.cycle-link-top,.cycle-link-bottom { left: calc(25% + var(--cycle-art-size) / 2); width: calc(50% - var(--cycle-art-size)); height: 12px; }
.cycle-link-top { top: calc(var(--cycle-art-size) / 2 - 6px); --cycle-phase: 0s; }
.cycle-link-bottom { bottom: calc(var(--cycle-label-size) + var(--cycle-art-size) / 2 - 6px); --cycle-phase: 7s; }
.cycle-link-right,.cycle-link-return { top: calc(var(--cycle-art-size) / 2); bottom: calc(var(--cycle-label-size) + var(--cycle-art-size) / 2); width: calc(25% - var(--cycle-art-size) / 2 - 8px); }
.cycle-link-right { right: 8px; --cycle-phase: 3.5s; }
.cycle-link-return { left: 8px; --cycle-phase: 10.5s; }
.cycle-link-return .cycle-route { stroke-dasharray: 3 4; }
.cycle-link::after { content: ""; position: absolute; width: 5px; height: 5px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; opacity: .75; }
.cycle-link-top::after { right: 0; top: 3px; transform: rotate(45deg); }
.cycle-link-right::after { left: 0; bottom: -2px; transform: rotate(225deg); }
.cycle-link-bottom::after { left: 0; top: 3px; transform: rotate(225deg); }
.cycle-link-return::after { right: 0; top: -2px; transform: rotate(45deg); }
.cycle-center,.cycle-return-label { position: absolute; top: calc(50% - var(--cycle-label-size) / 2); transform: translateY(-50%); color: var(--project-accent); pointer-events: none; }
.cycle-center { left: 50%; transform: translate(-50%,-50%); font-size: 14px; line-height: 1.8; letter-spacing: .08em; opacity: .7; white-space: nowrap; }
.cycle-return-label { z-index: 2; left: -14px; width: 44px; padding: 5px 0; background: #082329; font-size: 12px; line-height: 1.7; text-align: center; border-radius: 4px; }
.cycle-return-label span { display: block; }
.motion-enabled.works-in-view .project-design[open] .knowledge-cycle .cycle-light { animation: architecture-cycle-travel 14s linear var(--cycle-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
@keyframes architecture-cycle-travel { 0% { stroke-dashoffset: 10; opacity: 0; } 3% { opacity: .95; } 23% { stroke-dashoffset: -100; opacity: .95; } 25%,100% { stroke-dashoffset: -100; opacity: 0; } }
@media (max-width:680px) {
  .knowledge-scene.knowledge-cycle { --cycle-art-size: 58px; --cycle-label-size: 88px; --cycle-gap: 76px; margin-block: 24px 18px; }
  .knowledge-cycle .cycle-node > strong { font-size: 16px; }
  .cycle-center { font-size: 12px; letter-spacing: .03em; }
  .cycle-center,.cycle-return-label { top: 50%; }
}
@media (max-width:340px) {
  .knowledge-scene.knowledge-cycle { --cycle-art-size: 50px; }
}
@media (max-width:300px) {
  .knowledge-scene.knowledge-cycle { grid-template-columns: minmax(0,1fr); grid-template-rows: none; gap: 20px; }
  .knowledge-cycle .cycle-node { grid-area: auto; width: 100%; height: auto; }
  .knowledge-cycle .cycle-node:not(.knowledge-incubation)::after { content: "↓"; display: block; margin-top: 8px; color: var(--project-accent); font-size: 20px; }
  .knowledge-cycle .cycle-link,.cycle-center { display: none; }
  .cycle-return-label { position: static; width: auto; transform: none; background: transparent; font-size: 12px; }
  .cycle-return-label::before { content: "↶ "; }
  .cycle-return-label span { display: inline; }
}
.production-library { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 14px 8px 20px; border-bottom: 1px dashed rgb(var(--project-rgb) / .3); }
.production-library strong { font-size: 14px; }
.library-reference { color: var(--muted); font-size: 12px; }
.library-samples { display: flex; align-items: center; gap: 13px; color: var(--project-accent); }
.library-palette { display: flex; gap: 3px; }
.library-palette i { display: block; width: 9px; height: 22px; border-radius: 2px; background: var(--project-accent); }
.library-palette i:nth-child(2) { opacity: .6; }
.library-palette i:nth-child(3) { opacity: .3; }
.library-type { font: 22px/1.4 Georgia,serif; }
.library-samples svg { width: 32px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1; }
.production-track { --flow-art-size: 92px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin: 30px 0 24px; padding: 0; list-style: none; }
.production-step { text-align: center; padding-bottom: 8px; }
.flow-label { margin-top: 14px; }
.flow-label em { display: block; margin-bottom: 4px; color: var(--project-accent); font: 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .12em; }
.map-hotspot { position: absolute; inset: 0; z-index: 2; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: inherit; }
.map-hotspot[hidden] { display: none; }
.map-hotspot:hover { background: rgb(var(--project-rgb) / .035); }
.map-hotspot:focus-visible { outline: 2px solid var(--project-accent); outline-offset: 3px; }
.map-hotspot[aria-pressed="true"]::after { content: ""; position: absolute; top: 5px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--project-accent); }
.flow-node.is-selected > strong,.flow-node.is-selected > div > strong { color: var(--project-accent); }
.flow-node.is-selected .flow-art { stroke: #def0f3; }
.map-reading { min-height: 112px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgb(var(--project-rgb) / .22); display: grid; align-content: start; gap: 8px; }
.map-insight { display: grid; align-content: start; gap: 4px; min-height: 0; margin: 0; padding: 0; border: 0; color: var(--body); font-size: 14px; line-height: 1.8; }
.map-insight strong { color: var(--project-accent); font-size: 13px; font-weight: 500; }
.map-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.design-map .icon-draw { opacity: 0; stroke-width: 1.6; }
.knowledge-map .icon-draw { stroke: #c8f5e8; }
.production-map .icon-draw { stroke: #e0d1fa; }
.icon-core,.icon-audience,.icon-color-chip,.icon-preview-play,.icon-focus-ring,.icon-story-wave path { transform-box: view-box; }
.icon-core { transform-origin: 50px 50px; }
.icon-audience { transform-origin: 50px 48px; }
.icon-color-chip { transform-origin: 50px 53px; }
.icon-preview-play { transform-origin: 51px 44px; }
.icon-focus-ring { transform-origin: 50px 46px; }
.icon-story-wave path { transform-origin: 20px 72px; }
.motion-enabled.works-in-view .project-design[open] .icon-sheet { animation: architecture-icon-sheet 14s cubic-bezier(.22,.7,.36,1) var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-write,.motion-enabled.works-in-view .project-design[open] .icon-relate,.motion-enabled.works-in-view .project-design[open] .icon-result { stroke-dasharray: 100; animation: architecture-icon-draw 14s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-core { animation: architecture-icon-core 14s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-lens { animation: architecture-icon-scan 14s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-result { animation-delay: calc(var(--flow-phase,0s) + .8s); }
.motion-enabled.works-in-view .project-design[open] .icon-audience { animation: production-icon-focus 12s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-focus-ring { animation: production-icon-ring 12s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-content-sheet { animation: production-icon-compose 12s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.icon-color-chip:nth-child(2),.library-palette i:nth-child(2) { --part-phase: .12s; }
.icon-color-chip:nth-child(3),.library-palette i:nth-child(3) { --part-phase: .24s; }
.motion-enabled.works-in-view .project-design[open] .icon-color-chip { animation: production-icon-color 12s ease-in-out calc(var(--flow-phase,0s) + var(--part-phase,0s)) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .library-palette i { transform-origin: center bottom; animation: production-icon-color 12s ease-in-out calc(3s + var(--part-phase,0s)) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-content-write,.motion-enabled.works-in-view .project-design[open] .icon-check { stroke-dasharray: 100; animation: production-icon-draw 12s ease-in-out calc(var(--flow-phase,0s) + .6s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-frame-out { animation: production-icon-frame-out 12s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-frame-in { animation: production-icon-frame-in 12s ease-in-out calc(var(--flow-phase,0s) + .22s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-story-wave path { animation: production-icon-wave 12s ease-in-out calc(var(--flow-phase,0s) + var(--part-phase,0s)) infinite; animation-play-state: var(--motion-state,paused); }
.icon-story-wave path:nth-child(2) { --part-phase: .12s; }
.icon-story-wave path:nth-child(3) { --part-phase: .24s; }
.icon-story-wave path:nth-child(4) { --part-phase: .36s; }
.motion-enabled.works-in-view .project-design[open] .icon-preview-play { animation: production-icon-focus 12s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .icon-preview-cursor { fill: #e0d1fa; animation: production-icon-preview 12s linear var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
@keyframes architecture-icon-sheet { 0%,16%,100% { transform: translateY(0); } 3% { transform: translateY(-4px); } 8% { transform: translateY(1px); } 12% { transform: translateY(0); } }
@keyframes architecture-icon-draw { 0% { stroke-dashoffset: 100; opacity: 0; } 3% { opacity: .95; } 15% { stroke-dashoffset: 0; opacity: .95; } 23%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes architecture-icon-core { 0%,22%,100% { transform: scale(1); } 8% { transform: scale(1.12); } 14% { transform: scale(1.03); } 18% { transform: scale(1); } }
@keyframes architecture-icon-scan { 0%,25%,100% { transform: translateX(0); } 4% { transform: translateX(-6px); } 12% { transform: translateX(6px); } 20% { transform: translateX(0); } }
@keyframes production-icon-focus { 0%,16%,100% { transform: scale(1); } 6% { transform: scale(1.07); } 13% { transform: scale(1); } }
@keyframes production-icon-ring { 0% { transform: scale(.92); opacity: 0; } 6% { transform: scale(1); opacity: .55; } 14% { transform: scale(1.06); opacity: 0; } 16%,100% { transform: scale(1); opacity: 0; } }
@keyframes production-icon-compose { 0%,16%,100% { transform: translate(0,0); } 3% { transform: translate(-4px,3px); } 12% { transform: translate(0,0); } }
@keyframes production-icon-color { 0%,16%,100% { transform: scaleY(1); } 3% { transform: scaleY(.65); } 9% { transform: scaleY(1.08); } 14% { transform: scaleY(1); } }
@keyframes production-icon-draw { 0% { stroke-dashoffset: 100; opacity: 0; } 3% { opacity: .95; } 12% { stroke-dashoffset: 0; opacity: .95; } 18%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes production-icon-frame-out { 0%,16%,100% { transform: translateX(0); } 4% { transform: translateX(-3px); } 13% { transform: translateX(0); } }
@keyframes production-icon-frame-in { 0%,16%,100% { transform: translateX(0); } 4% { transform: translateX(4px); } 13% { transform: translateX(0); } }
@keyframes production-icon-wave { 0%,18%,100% { transform: scaleY(1); } 2% { transform: scaleY(.55); } 5% { transform: scaleY(1.2); } 8% { transform: scaleY(.7); } 11% { transform: scaleY(1.08); } 15% { transform: scaleY(1); } }
@keyframes production-icon-preview { 0%,3% { transform: translateX(0); opacity: 0; } 5% { opacity: .95; } 14% { transform: translateX(59px); opacity: .95; } 17%,100% { transform: translateX(59px); opacity: 0; } }
@media (max-width:900px) and (min-width:681px) {
  .production-track { --flow-art-size: 72px; gap: 16px; }
  .production-step strong { font-size: 14px; }
}
@media (max-width:680px) {
  .design-map { padding: 16px; }
  .production-library { grid-template-columns: auto minmax(0,1fr); gap: 14px; padding: 8px 0 18px; }
  .library-samples { gap: 9px; }
  .library-samples svg,.library-reference { display: none; }
  .library-palette i { width: 7px; height: 19px; }
  .library-type { font-size: 20px; }
  .production-track { --flow-art-size: 68px; grid-template-columns: minmax(0,1fr); gap: 24px; margin: 22px 0; }
  .production-step { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 14px; text-align: left; padding: 0; }
  .production-step .flow-art { margin: 0; }
  .flow-label { margin: 0; }
  .flow-label em { display: inline-block; margin: 0 7px 0 0; font-size: 9px; }
  .production-step strong { font-size: 15px; }
  .map-reading { min-height: 160px; }
}
@media (max-width:340px) {
  .production-step { grid-template-columns: 58px minmax(0,1fr); gap: 10px; }
  .production-track { --flow-art-size: 54px; }
  .production-step strong { font-size: 14px; }
}
@media (max-width:280px) {
  .production-step { display: block; text-align: center; }
  .production-step .flow-art { margin: 0 auto 8px; }
  .production-library { grid-template-columns: minmax(0,1fr); }
}
.design-notes { display: block; margin: 18px 0 8px; padding: 0 0 0 14px; list-style: none; border-left: 2px solid rgb(var(--project-rgb) / .5); }
.design-notes-label { display: block; margin-bottom: 4px; color: var(--project-accent); font-size: 12px; line-height: 1.6; }
.design-notes strong { color: var(--text); font-size: 16px; line-height: 1.6; font-weight: 500; }
.design-notes p { margin-top: 4px; font-size: 14px; line-height: 1.8; text-wrap: pretty; }
#works .project-card:has(.project-design[open]) { --project-motion-state: paused; animation: none; translate: none; transform: none; transition: none; }
#works .project-card:has(.project-design[open])::before { animation: none; opacity: 0; }
@media (max-width:680px) {
  .design-map { padding: 16px; }
  .design-notes { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .design-intro { font-size: 15px; }
}
.project-illustration { width: min(460px,100%); margin: 12px 0 0; align-self: flex-start; }
.project-line-art { height: 126px; stroke: var(--project-accent); stroke-width: 1.4; }
.project-illustration figcaption { text-align: left; font-size: 14px; line-height: 22px; color: #bacbd8; margin: 4px 0 0; }
.project-contribution { margin-top: 8px; padding: 0; border: 0; }
.contact { text-align: left; padding-block: 36px 38px; }
.contact .section-copy { margin-top: 8px; font-size: 20px; line-height: 32px; color: #dce7f0; }
.contact-placeholder { margin-top: 8px; }
.site-footer { display: flex; align-items: center; gap: 22px; padding-block: 20px 28px; text-align: left; font-size: 14px; border-color: #8196aa70; }
.site-footer .brand-icon { width: 30px; height: 34px; color: #bcecf2; }
@media (max-width:680px) {
  .container { width: calc(100% - 48px); }
  h2 { font-size: 30px; line-height: 42px; }
  .about { padding-block: 24px; }
  .about-description { font-size: 18px; line-height: 31px; }
  .placeholder { font-size: 14px; line-height: 24px; }
  .works { padding-block: 24px; }
  .project-grid { margin-top: 22px; gap: 26px; }
  .project-card { padding: 20px; backdrop-filter: none; --project-surface: #082128d4; }
  .project-video { --project-surface: #1c142dd4; }
  .project-heading h3 { font-size: 28px; line-height: 38px; }
  .project-value { font-size: 17px; line-height: 29px; }
  .project-description { font-size: 16px; line-height: 28px; text-wrap: pretty; }
  .project-illustration { width: 100%; order: 3; margin-top: 8px; }
  .project-line-art { height: 108px; stroke-width: 1.4; }
  .project-contribution { order: 4; margin-top: 6px; }
  .pipeclip-sample { order: 4; }
  .project-design { margin-top: 12px; }
  .project-tech-stack { margin-top: 6px; }
  .contact .section-copy { font-size: 18px; }
}
@media (max-width:360px) {
  .container { width: calc(100% - 40px); }
  .project-card { padding: 20px; }
}
@media (min-width:541px) and (max-width:680px) {
}
@media (max-height:600px) and (min-width:681px) {
}
@media (max-width:680px) {
  .project-video .project-description { text-wrap: balance; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}

/* v8.19: the confirmed career timeline shares the existing night sky. */
.about { padding-block: 48px 56px; }

.about .about-profile { max-width: 400px; margin: 48px auto 0; text-align: center; }
.experience-timeline { list-style: none; margin: 0; padding: 0; }
.experience-stage { margin: 0; padding: 0; }
.experience-connector { position: relative; display: block; width: 1px; height: 34px; margin: 8px auto 12px; background: linear-gradient(var(--accent),#26515b); opacity: .6; clip-path: inset(0 -8px); }
.experience-year { display: block; color: var(--accent); font-size: clamp(15px,1.2vw,16px); line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.experience-dot { display: block; width: 8px; height: 8px; margin: 11px auto 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgb(87 207 204 / .3); }
.experience-role { color: var(--text); font-size: 16px; line-height: 1.5; font-weight: 500; }
.experience-detail { color: var(--body); font-size: 14px; line-height: 1.75; font-weight: 400; }
.experience-summary { margin-top: 46px; }
.experience-total { display: flex; align-items: baseline; justify-content: center; gap: 7px; color: #9edbea; }
.experience-number { font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.experience-unit { font-size: 20px; line-height: 1; font-weight: 400; }
.experience-caption { margin-top: 12px; color: var(--body); font-size: 14px; line-height: 1.7; letter-spacing: .04em; }
@media (min-width:681px) {
  .about .about-profile { max-width: 900px; }
  .experience-timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }
  .experience-stage { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: max-content 32px max-content max-content; }
  .experience-year { grid-column: 1; grid-row: 1; }
  .experience-dot { grid-column: 1; grid-row: 2; align-self: center; margin: 0 auto; }
  .experience-role { grid-column: 1; grid-row: 3; }
  .experience-detail { grid-column: 1; grid-row: 4; }
  .experience-connector { grid-column: 1; grid-row: 2; align-self: center; width: calc(100% - 32px); height: 1px; margin: 0 0 0 calc(50% + 16px); background: linear-gradient(90deg,var(--accent),#26515b); clip-path: inset(-8px 0); }
}
@media (max-width:680px) {
  .about { padding-block: 36px 44px; }
  .about .about-profile { margin-top: 40px; }
}

/* Timeline: one node, transfer, then the next node; text stays at its final position. */
.experience-stage { --experience-step: 200ms; }
.experience-stage:nth-child(2) { --experience-step: 1200ms; }
.experience-stage:nth-child(3) { --experience-step: 2200ms; }
.experience-connector::after { content: ""; position: absolute; width: 3px; height: 16px; left: 50%; top: -16px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(transparent,var(--accent) 65%,#e3fffc); box-shadow: 0 0 6px rgb(132 240 230 / .5); opacity: 0; pointer-events: none; }
.motion-enabled .timeline-pending .experience-stage,.motion-enabled .timeline-pending + .experience-summary { opacity: 0; }
.motion-enabled .timeline-enter .experience-node { animation: experience-node-in 500ms cubic-bezier(.34,1.56,.64,1) var(--experience-step) both; }
.motion-enabled .timeline-enter .experience-dot { animation: experience-arrival 700ms ease-out var(--experience-step) both; }
.motion-enabled .timeline-enter .experience-connector::after { animation: experience-transfer-v 500ms ease-out calc(var(--experience-step) + 500ms) both; }
.motion-enabled .timeline-enter + .experience-summary > .experience-foundation { animation: experience-stat-in 600ms cubic-bezier(.16,1,.3,1) 2900ms both; }
.motion-enabled .timeline-enter + .experience-summary > .experience-foundation:nth-child(2) { animation-delay: 3100ms; }
.motion-enabled .timeline-enter + .experience-summary > .experience-foundation:nth-child(3) { animation-delay: 3300ms; }
.motion-enabled .timeline-enter + .experience-summary > .about-statement { animation: experience-statement-in 600ms cubic-bezier(.16,1,.3,1) 3700ms both; }
@keyframes experience-node-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes experience-arrival { 0%,100% { box-shadow: 0 0 10px rgb(87 207 204 / .3); } 45% { box-shadow: 0 0 5px rgb(179 255 247 / .9),0 0 15px rgb(87 207 204 / .6); } }
@keyframes experience-transfer-v { 0% { top: -16px; opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes experience-transfer-h { 0% { left: -30px; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes experience-stat-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes experience-statement-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width:681px) {
  .experience-connector::after { width: 30px; height: 3px; left: -30px; top: 50%; transform: translateY(-50%); background: linear-gradient(90deg,transparent,var(--accent) 65%,#e3fffc); }
  .motion-enabled .timeline-enter .experience-connector::after { animation-name: experience-transfer-h; }
}

/* v8.22: keep narrow cards inside the window without hiding content. */
.project-card,.project-heading,.project-description,.project-illustration { min-width: 0; }
@media (max-width:280px) {
  .project-heading h3 { font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
}
@media (max-width:240px) {
  .project-heading h3 { font-size: 20px; }
}
.incubation-shell { opacity: .3; }
.incubation-fragment { opacity: .45; transform-box: view-box; transform-origin: 50px 50px; }
.fragment-one { transform-origin: 20.5px 30px; }
.fragment-two { transform-origin: 81px 69.5px; }
.incubation-core { opacity: 0; fill: var(--project-accent); transform-box: view-box; transform-origin: 50px 50px; }
.incubation-output { transform-box: view-box; transform-origin: 50px 50px; }
.incubation-new-mark { opacity: .6; }
.motion-enabled.works-in-view .project-design[open] .fragment-one { animation: architecture-incubate-one 14s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .fragment-two { animation: architecture-incubate-two 14s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .incubation-core { animation: architecture-incubate-core 14s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
.motion-enabled.works-in-view .project-design[open] .incubation-output { animation: architecture-incubate-output 14s ease-in-out var(--flow-phase,0s) infinite; animation-play-state: var(--motion-state,paused); }
@keyframes architecture-incubate-one { 0%,23%,100% { transform: translate(0,0) scale(1); opacity: .45; } 3% { transform: translate(0,0) scale(1); opacity: .9; } 10% { transform: translate(29px,20px) scale(.5); opacity: 0; } 17% { transform: translate(0,0) scale(1); opacity: 0; } }
@keyframes architecture-incubate-two { 0%,24%,100% { transform: translate(0,0) scale(1); opacity: .45; } 4% { transform: translate(0,0) scale(1); opacity: .9; } 11% { transform: translate(-30px,-20px) scale(.5); opacity: 0; } 18% { transform: translate(0,0) scale(1); opacity: 0; } }
@keyframes architecture-incubate-core { 0%,3%,21%,100% { transform: scale(.6); opacity: 0; } 9% { transform: scale(1.1); opacity: .9; } 13% { transform: scale(1.3); opacity: .45; } }
@keyframes architecture-incubate-output { 0%,23%,100% { transform: scale(1); opacity: 1; } 3%,9% { transform: scale(.6); opacity: 0; } 18% { transform: scale(1.03); opacity: 1; } }
.production-track { --production-gap: 24px; gap: var(--production-gap); }
.production-transfer { position: absolute; left: calc(50% + var(--flow-art-size) / 2 + 8px); top: calc(var(--flow-art-size) / 2 - 6px); width: calc(100% + var(--production-gap) - var(--flow-art-size) - 16px); height: 12px; pointer-events: none; color: var(--project-accent); }
.production-transfer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.production-transfer .transfer-vertical { display: none; }
.transfer-route,.transfer-signal { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.transfer-route { stroke: rgb(var(--project-rgb) / .45); stroke-width: 1.1; }
.transfer-signal { stroke: #e0d1fa; stroke-width: 1.7; stroke-dasharray: 12 188; opacity: 0; }
.production-transfer::after { content: ""; position: absolute; right: 0; top: 3px; width: 5px; height: 5px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .7; }
.motion-enabled.works-in-view .project-design[open] .transfer-signal { animation: production-transfer 12s linear calc(var(--flow-phase,0s) + 1.8s) infinite; animation-play-state: var(--motion-state,paused); }
@keyframes production-transfer { 0% { stroke-dashoffset: 12; opacity: 0; } 1% { opacity: .95; } 8.5% { stroke-dashoffset: -100; opacity: .95; } 9.5%,100% { stroke-dashoffset: -100; opacity: 0; } }
@media (max-width:900px) and (min-width:681px) {
  .production-track { --production-gap: 16px; gap: var(--production-gap); }
}
@media (max-width:680px) {
  .production-track { --production-gap: 36px; gap: var(--production-gap); }
  .production-step .flow-art { align-self: start; }
  .production-transfer { left: calc(var(--flow-art-size) / 2 - 6px); top: calc(var(--flow-art-size) + 6px); width: 12px; height: calc(100% + var(--production-gap) - var(--flow-art-size) - 12px); }
  .production-transfer .transfer-horizontal { display: none; }
  .production-transfer .transfer-vertical { display: block; }
  .transfer-vertical .transfer-signal { stroke-dasharray: 30 170; }
  .production-transfer::after { left: 3px; right: auto; top: auto; bottom: 0; transform: rotate(135deg); }
}
@media (max-width:280px) {
  .production-transfer { left: calc(50% - 6px); top: calc(100% + 6px); height: calc(var(--production-gap) - 12px); }
}

/* Section position shares the header navigation state and native anchors. */
.section-pager { position: fixed; left: 16px; top: 50%; z-index: 11; display: grid; transform: translateY(-50%); }
.pager-indicator { display: none; position: absolute; left: 50%; top: 0; width: 8px; height: 8px; border-radius: 50%; transform: translate3d(-4px,12px,0); transform-origin: center top; will-change: transform; z-index: 1; background: var(--accent); box-shadow: 0 0 10px rgb(87 207 204 / .35); opacity: .9; pointer-events: none; }
.pager-ready > .pager-indicator { display: block; }
.section-pager.pager-ready a[aria-current]::before { background: #6c7a92; box-shadow: none; }
.section-pager a { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; }
.section-pager a + a { margin-top: -4px; }
.section-pager a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6c7a92; transition: background 180ms,box-shadow 180ms; }
.section-pager a[aria-current]::before { background: var(--accent); box-shadow: 0 0 10px rgb(87 207 204 / .45); }
.section-pager a:hover::before,.section-pager a:focus-visible::before { background: #9edbea; }
.section-pager a span { position: absolute; z-index: 2; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; background: #08121e; color: var(--text); font-size: 13px; line-height: 1.6; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 180ms; }
.section-pager a:hover span,.section-pager a:focus-visible span { opacity: 1; }
.static-review { scroll-behavior: auto; }
.static-review .section-pager a::before,.static-review .section-pager a span { transition: none; }
@media (max-width:767px) { .section-pager { display: none; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .section-pager a::before,.section-pager a span { transition: none; }
}

/* Three main chapters share one fixed sky; long work sections remain readable. */
html { scroll-snap-type: y mandatory; }
main > section { scroll-snap-align: start; }
main > .section { scroll-margin-top: 0; }
.about,.works { --section-safe-top: clamp(112px,12vw,160px); min-height: 100svh; padding-block: var(--section-safe-top) 64px; }
.about { display: flex; flex-direction: column; justify-content: flex-start; }
.about .about-profile { width: 100%; margin-top: clamp(40px,5vw,72px); }
.site-end { position: relative; z-index: 2; scroll-snap-align: none; }
.site-end .contact { padding-block: 28px 36px; }
.site-end .contact h2 { font-size: 24px; line-height: 34px; }
.site-end .contact .section-copy { font-size: 16px; line-height: 28px; }

.works .site-end { margin-top: clamp(40px,6svh,72px); }
.works .site-end > .container { width: 100%; }

/* v8.52: centered chapters, comparable work cards, and text-safe focus depth. */
#about > h2,#works > h2 { text-align: center; color: var(--accent); font-size: clamp(30px,2.5vw,36px); line-height: 1.4; font-weight: 500; letter-spacing: .04em; }
.about { padding-top: clamp(112px,16svh,180px); }
.about .about-profile { max-width: 760px; margin-top: clamp(56px,9svh,96px); }
.experience-summary { margin-top: clamp(52px,7svh,80px); }
.experience-number { font-size: clamp(64px,5.5vw,76px); font-weight: 550; background: linear-gradient(110deg,#65b6ed,#57cfcc); background-clip: text; -webkit-background-clip: text; color: transparent; }
.works { padding-top: clamp(112px,13svh,160px); }
.project-grid { width: min(1040px,100%); margin: clamp(44px,6svh,64px) auto 0; gap: 32px; align-items: start; }
.project-card { min-width: 0; display: flex; flex-direction: column; padding: 28px; transition: transform 480ms cubic-bezier(.22,1,.36,1),opacity 320ms,box-shadow 480ms,border-color 240ms,background 240ms; }
.project-heading h3 { font-size: 28px; line-height: 38px; }
.project-value { font-size: 17px; line-height: 28px; }
.project-description { font-size: 16px; line-height: 27px; margin-top: 8px; }
.project-tech-stack { margin-top: 10px; }
.project-illustration { width: min(400px,100%); margin: 20px auto 0; align-self: center; transition: transform 480ms cubic-bezier(.22,1,.36,1); }
.project-illustration .editorial-art { height: auto; aspect-ratio: 100 / 47; max-height: 160px; }
.project-illustration .editorial-caption { margin-top: 8px; font-size: 12px; color: var(--muted); }
.project-contribution { margin-top: auto; padding-top: 20px; font-size: 15px; line-height: 26px; }
.project-card::after { inset: -1px; height: auto; border: 1px solid rgb(var(--project-rgb) / .35); background: transparent; border-radius: inherit; z-index: -1; opacity: 0; transition: transform 480ms cubic-bezier(.22,1,.36,1),opacity 320ms; }
.project-design { margin-top: 16px; }
.project-card:has(.project-design[open]) { grid-column: 1 / -1; }
.project-card:has(.project-design[open]) .project-description { min-height: 0; max-width: 760px; }
.project-card:has(.project-design[open]) .project-illustration { margin-top: 16px; }
.project-card:has(.project-design[open])::after { opacity: 0; transform: none; }
@media (min-width:960px) {
  .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
  .project-grid:has(.project-design[open]) { grid-template-columns: minmax(0,1fr); align-items: start; }
  .project-grid:has(.project-design[open]) .project-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 32px; }
  .project-grid:has(.project-design[open]) .project-card .project-heading { grid-column: 1; grid-row: 1; }
  .project-grid:has(.project-design[open]) .project-card .project-description { grid-column: 1; grid-row: 2; min-height: 0; }
  .project-grid:has(.project-design[open]) .project-card .project-contribution { grid-column: 1; grid-row: 3; align-self: end; margin-top: 0; }
  .project-grid:has(.project-design[open]) .project-card .project-illustration { grid-column: 2; grid-row: 1 / 4; margin: 0; }

  .project-grid:not(:has(.project-design[open])) .project-card .project-description { min-height: 90px; }
  .project-grid:not(:has(.project-design[open])) .project-card .project-illustration { margin-top: 12px; }
  .project-grid:not(:has(.project-design[open])) .project-card .editorial-art { max-height: 136px; }
  .project-grid:not(:has(.project-design[open])) .project-card .project-contribution { padding-top: 16px; }
}
@media (hover:hover) and (pointer:fine) and (min-width:681px) {
  .motion-enabled:not(.is-page-hidden) .project-card.is-hovered:not(:has(.project-design[open])) {
    animation: none; translate: 0 0; transform: translateY(-8px); z-index: 2;
    border-color: rgb(var(--project-rgb) / .6); background: var(--project-hover);
    box-shadow: 0 24px 48px -20px #000c,0 0 36px rgb(var(--project-rgb) / .16);
  }
  .motion-enabled:not(.is-page-hidden) .project-card.is-hovered:not(:has(.project-design[open]))::after { opacity: 1; transform: rotate(-.6deg) scale(1.015); }
  .motion-enabled:not(.is-page-hidden) .project-card.is-hovered:not(:has(.project-design[open])) .project-illustration { transform: rotate(-.6deg) scale(1.025); }
  .motion-enabled:not(.is-page-hidden) .project-grid:has(.project-card.is-hovered) .project-card:not(.is-hovered):not(:has(.project-design[open])) { opacity: .64; }
}
html:not(.motion-enabled) .project-illustration,.is-page-hidden .project-illustration,
html:not(.motion-enabled) .project-card::after,.is-page-hidden .project-card::after { transition: none; }
@media (max-width:959px) {
  .project-card { width: min(640px,100%); margin-inline: auto; }
}
@media (max-width:680px) {
  .about { padding-top: 112px; }
  .about .about-profile { margin-top: 44px; }
  .experience-summary { margin-top: 44px; }
  .project-grid { margin-top: 36px; gap: 28px; }
  .project-card { padding: 20px; }
  .project-description { line-height: 28px; }
  .project-illustration { margin-top: 16px; }
  .project-illustration .editorial-art { max-height: 160px; }
  .project-contribution { padding-top: 16px; font-size: 14px; line-height: 25px; }
}

/* Long project explanations use continuous document reading, not page snapping. */

.project-design > summary { scroll-margin-block: calc(clamp(76px,9.87vw,130px) + 16px) 16px; }
#works .project-grid:has(.project-design[open]) .project-card { animation: none; translate: none; transform: none; transition: none; opacity: 1; }
#works .project-grid:has(.project-design[open]) .project-card::before { animation: none; opacity: 0; }
#works .project-grid:has(.project-design[open]) .project-card::after { opacity: 0; transform: none; }
#works .project-grid:has(.project-design[open]) .project-illustration { transform: none; transition: none; }

/* v8.57: one timeline and two factual summaries, without repeating the works. */
.about { padding-block: clamp(112px,17svh,172px) clamp(64px,9svh,96px); }
.about .about-profile { max-width: 760px; margin-top: clamp(56px,9svh,84px); text-align: center; }
.about .experience-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(28px,5vw,64px); max-width: 520px; margin: clamp(52px,8svh,76px) auto 0; text-align: center; }
.experience-foundation { min-width: 0; }
.about .experience-number { font-size: clamp(56px,5.5vw,72px); }
.about .experience-caption { margin-top: 14px; font-size: 15px; line-height: 1.8; }
@media (max-width:680px) {
  .about { padding-block: 112px 64px; }
  .about .about-profile { margin-top: 44px; }
  .about .experience-summary { gap: 24px; margin-top: 44px; }
  .about .experience-number { font-size: 52px; }
  .about .experience-caption { margin-top: 12px; font-size: 14px; }
}

/* Complete chapter landings keep both headings below the shared fixed header. */
.about { padding-top: max(clamp(112px,17svh,172px),calc(var(--site-header-height) + 24px)); }
.works { padding-top: max(clamp(112px,13svh,160px),calc(var(--site-header-height) + 24px)); }

/* v8.59: three concise summaries align with the career timeline. */
.about .experience-summary { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 760px; gap: 0; }
.about .experience-summary .experience-total { min-height: clamp(56px,5.5vw,72px); }
.about .experience-words { align-self: center; font-size: clamp(42px,5.3vw,64px); line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
@media (max-width:680px) {
  .about .experience-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
  .experience-commitment { grid-column: 1 / -1; }
  .about .experience-summary .experience-total { min-height: 52px; }
  .about .experience-words { font-size: 48px; line-height: 1; }
}

/* v8.61: bilingual statement follows the existing About hierarchy. */
.about-statement { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .5em; row-gap: 4px; margin: clamp(40px,7svh,64px) 0 0; color: #67bbb7; font-size: clamp(17px,1.6vw,20px); line-height: 1.8; font-weight: 500; letter-spacing: .08em; text-wrap: balance; }
.statement-en { max-width: 100%; color: #77b9b7; letter-spacing: .02em; }
.statement-separator { opacity: .45; letter-spacing: 0; }
@media (max-width:680px) {
  .about-statement { flex-direction: column; align-items: center; row-gap: 5px; margin-top: 16px; }
  .statement-separator { display: none; }
}

/* v8.62: a staged About entry; nodes scale independently of their connections. */
.motion-enabled .about-pending > h2 { opacity: 0; }
.motion-enabled .about-enter > h2 { animation: experience-heading-in 600ms cubic-bezier(.16,1,.3,1) both; }
@keyframes experience-heading-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.motion-enabled .timeline-enter .experience-connector { animation: experience-line-in 200ms linear calc(var(--experience-step) + 400ms) both; }
@keyframes experience-line-in { from { opacity: 0; } to { opacity: .6; } }

.map-touch-help { display: none; }

@media (max-width:680px) and (orientation:portrait) {
  html { scroll-snap-type: none; }
  .about,.works { padding-block: clamp(48px,8svh,72px) 40px; }
  .about .about-profile { margin-top: 24px; }
  .experience-timeline { width: min(100%,320px); margin-inline: auto; text-align: left; }
  .experience-stage { position: relative; }
  .experience-stage:not(:last-child) { padding-bottom: clamp(14px, calc(10svh - 42px), 36px); }
  .experience-node { display: grid; grid-template-columns: minmax(0,1fr) 10px minmax(0,1fr); gap: 1px 10px; align-items: baseline; }
  .experience-year { grid-area: 1 / 1; justify-self: end; }
  .experience-dot { grid-area: 1 / 2; place-self: center; margin: 0; }
  .experience-role { grid-area: 1 / 3; }
  .experience-detail { grid-area: 2 / 3; }
  .experience-connector { position: absolute; left: calc(50% - .5px); top: 17px; bottom: -6px; height: auto; margin: 0; }
  .about .experience-summary { margin-top: 24px; gap: 16px 14px; }
  .about .experience-summary .experience-total { min-height: auto; }
  .about .experience-number,.about .experience-words { font-size: 38px; }
  .about .experience-caption { margin-top: 6px; }
  .about-statement { margin-top: 4px; }

  .design-map { margin-top: 20px; padding: 0; border: 0; background: none; }
  .design-map-title { margin-bottom: 6px; }
  .design-map-title > span { display: none; }
  .map-touch-help:not([hidden]) { display: block; margin: 0 0 10px; color: var(--body); font-size: 13px; line-height: 1.6; }
  .map-help { display: none; }
  .map-reading { min-height: 0; margin-top: 12px; padding-top: 10px; }
  .map-reading:not(:has(.map-insight)) { display: none; }
  .flow-node { border-bottom: 1px solid rgb(var(--project-rgb) / .25); }
  .flow-node > .map-insight { position: relative; z-index: 3; grid-column: 1 / -1; padding: 8px 0 3px; }
  .map-hotspot:not([hidden])::after,.knowledge-cycle .map-hotspot[aria-pressed="true"]::after {
    display: block; content: "+"; position: absolute; inset: 15px 4px auto auto; width: auto; height: auto;
    border-radius: 0; background: none; color: var(--project-accent); font: 500 19px/1.2 system-ui;
  }
  .design-map .map-hotspot[aria-pressed="true"]::after,.knowledge-cycle .map-hotspot[aria-pressed="true"]::after { content: "−"; }
  .flow-node.is-selected { border-bottom-color: var(--project-accent); }
  .flow-node.is-selected .map-hotspot { bottom: auto; height: 54px; }

  .knowledge-scene.knowledge-cycle { --flow-art-size: 38px; grid-template-columns: minmax(0,1fr); grid-template-rows: none; gap: 0; margin: 12px 0; border-top: 1px solid rgb(var(--project-rgb) / .25); }
  .knowledge-cycle .cycle-node { grid-area: auto; width: 100%; height: auto; min-height: 54px; display: grid; grid-template-columns: 38px minmax(0,1fr); column-gap: 10px; align-content: center; padding: 6px 28px 6px 0; text-align: left; }
  .knowledge-cycle .cycle-node::after,.knowledge-cycle .cycle-link,.cycle-center { display: none; }
  .knowledge-cycle .cycle-node > .flow-art { grid-area: 1 / 1 / 3 / 2; align-self: center; }
  .knowledge-cycle .cycle-node > strong { grid-area: 1 / 2; margin: 0; }
  .knowledge-cycle .cycle-node > small { grid-area: 2 / 2; margin: 0; }
  .cycle-return-label { position: static; width: auto; padding: 7px 0 0; transform: none; background: none; font-size: 13px; text-align: left; }
  .cycle-return-label::before { content: "↶ "; }
  .cycle-return-label span { display: inline; }

  .production-library { gap: 8px; padding: 6px 28px 8px 0; }
  .production-track { --flow-art-size: 38px; --production-gap: 0px; margin-block: 4px 12px; }
  .production-step { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 8px; min-height: 54px; padding: 6px 28px 6px 0; text-align: left; }
  .production-step .flow-art { align-self: center; margin: 0; }
  .production-transfer { display: none; }
}
.motion-enabled .experience-number { background-image: linear-gradient(110deg,#65b6ed,#57cfcc 30%,#9edbea 50%,#57cfcc 70%,#65b6ed); background-size: 200% 100%; animation: experience-gradient 3s linear infinite; animation-play-state: var(--motion-state); }
@keyframes experience-gradient { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@media (min-width:681px) {
  .experience-stage { display: block; position: relative; }
  .experience-node { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: max-content 32px max-content max-content; }
  .experience-connector { position: absolute; top: calc(clamp(15px,1.2vw,16px) * 1.5 + 16px); left: calc(50% + 16px); margin: 0; }
}

/* PipeClip finished sample */
.project-video > .project-design { grid-row: 5; }
.pipeclip-sample { grid-column: 1 / -1; grid-row: 4; min-width: 0; margin-top: 16px; border-top: 1px solid rgb(var(--project-rgb) / .23); }
.pipeclip-sample > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-block: 8px; color: var(--project-accent); font-size: 15px; font-weight: 600; line-height: 24px; list-style: none; cursor: pointer; }
.pipeclip-sample > summary::-webkit-details-marker { display: none; }
.pipeclip-sample > summary:focus-visible { outline-offset: 3px; }
.pipeclip-sample-duration { display: inline-flex; align-items: center; gap: 8px; color: var(--body); font-size: 13px; font-weight: 400; }
.pipeclip-sample-duration svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.pipeclip-sample[open] .pipeclip-sample-duration svg { transform: rotate(180deg); }
.pipeclip-sample-content { padding-block: 4px 8px; }
.pipeclip-sample-content h4 { margin: 0 0 10px; color: var(--text); font-size: 16px; line-height: 1.5; }
.pipeclip-sample-content video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; background: #0c1720; }
.pipeclip-sample-content p { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; color: var(--body); font-size: 13px; line-height: 1.6; }
.pipeclip-sample-content a { color: var(--project-accent); text-decoration: underline; text-underline-offset: .18em; }