:root {
  --paper: #fff;
  --ink: #090909;
  --muted: #666;
  --line: #d9d9d9;
  --soft: #f4f4f2;
  --gutter: clamp(18px, 3.1vw, 52px);
  --floating-edge: 10px;
  /* 全站悬浮层级：以后新增浮窗、胶囊和提示层只使用这组阴影。 */
  --shadow-float: 0 10px 28px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
  --shadow-float-hover: 0 15px 38px rgba(0,0,0,.17), 0 4px 11px rgba(0,0,0,.07);
  --shadow-panel: 0 24px 64px rgba(0,0,0,.18), 0 5px 16px rgba(0,0,0,.08);
  --shadow-overlay: 0 28px 90px rgba(0,0,0,.24), 0 4px 14px rgba(0,0,0,.08);
  --shadow-tooltip: 0 10px 26px rgba(0,0,0,.12), 0 2px 7px rgba(0,0,0,.05);
  --shadow-panel-filter: drop-shadow(0 22px 30px rgba(0,0,0,.16)) drop-shadow(0 4px 8px rgba(0,0,0,.08));
  --shadow-cover: 0 2px 7px rgba(0,0,0,.09), 0 16px 38px rgba(0,0,0,.11), 0 34px 72px rgba(0,0,0,.065);
  --shadow-cover-hover: 0 4px 10px rgba(0,0,0,.11), 0 22px 48px rgba(0,0,0,.14), 0 42px 86px rgba(0,0,0,.08);
  --body: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --display: var(--body);
  --mono: var(--body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scrollbar-gutter: stable; }
html.project-open { overflow: hidden; scrollbar-gutter: auto; }
html.entry-snapping { scroll-behavior: auto; }
html.project-return-restoring { scroll-behavior: auto !important; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.is-loading, body.is-loading { overflow: hidden; }
body.is-loading > *:not(#site-preloader):not(.site-cursor):not(script) { visibility: hidden !important; }
.site-preloader {
  position: fixed; inset: 0; z-index: 2147483647;
  display: grid; place-items: center;
  background: #fff; color: var(--ink);
  opacity: 1; visibility: visible;
  transition: opacity .62s cubic-bezier(.16,1,.3,1), visibility 0s linear .62s;
}
.site-preloader.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.site-preloader-inner {
  width: min(92vw, 1200px);
  display: grid; place-items: center;
}
.site-preloader-word {
  position: relative;
  display: block;
  color: transparent;
  font: 900 clamp(22px, 3vw, 46px)/.86 Arial, sans-serif;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.site-preloader-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #090909;
  clip-path: inset(0 100% 0 0);
  animation: preloader-word-load 1.55s steps(7,end) infinite;
}
.site-preloader.is-finishing .site-preloader-word::after {
  animation: none;
  clip-path: inset(0);
}
.site-preloader-aside {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: calc(100vw - 40px);
  margin: 0;
  transform: translate(-50%, 5px);
  color: rgba(9,9,9,.46);
  font: 500 10px/1.4 Arial, sans-serif;
  letter-spacing: .04em;
  text-align: center;
  opacity: 0;
  animation: preloader-aside-in .65s .55s ease-out forwards;
}
.site-preloader-device-note {
  display: none;
  position: absolute; top: max(22px, env(safe-area-inset-top)); left: 50%;
  width: calc(100vw - 40px); margin: 0; transform: translateX(-50%);
  color: rgba(9,9,9,.62); font: 600 11px/1.45 var(--body);
  letter-spacing: .01em; text-align: center;
}
.site-preloader-aside span { display: block; }
@keyframes preloader-word-load {
  0% { clip-path: inset(0 100% 0 0); }
  72%, 90% { clip-path: inset(0); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes preloader-aside-in {
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .site-preloader-word::after { animation: none; clip-path: inset(0); }
  .site-preloader-aside { animation: none; opacity: 1; transform: translate(-50%, 0); }
  .site-preloader { transition-duration: .01ms; }
}
@media (max-width: 1180px) {
  .site-preloader-device-note { display: block; }
}
body.project-open { overflow: hidden; }
body.profile-open { overflow: clip; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, [data-protected-image] {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: #000; color: #fff; padding: 12px; }
.skip-link:focus { top: 12px; }

.site-header {
  --site-header-height: 72px;
  position: sticky; top: 0; z-index: 20;
  min-height: 72px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.94); border-bottom: 1px solid var(--ink);
  backdrop-filter: blur(10px);
  isolation: isolate;
  will-change: transform;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .32s ease;
}
.site-header.is-retracted { transform: translate3d(0,calc(-1 * var(--site-header-height) - 1px),0); }
body.project-open .site-header {
  z-index: 95;
  transform: none;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
body.project-open .site-header .identity-links { opacity: 0; pointer-events: none; }
.identity-links {
  display: flex; align-items: center; gap: 11px;
  will-change: transform;
  transition: opacity .24s ease, transform .5s cubic-bezier(.16,1,.3,1), gap .36s ease;
}
.wordmark {
  min-height: 32px; padding: 0;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ink); text-decoration: none; font-weight: 800;
  appearance: none; cursor: pointer;
  transition: min-height .42s cubic-bezier(.16,1,.3,1), padding .42s cubic-bezier(.16,1,.3,1), border-color .24s ease, background-color .24s ease, box-shadow .34s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.contact-popover {
  position: fixed; z-index: 145;
  width: min(390px, calc(100vw - 20px)); max-height: calc(100svh - 90px); padding: 18px;
  overflow: auto;
  border: 1px solid rgba(9,9,9,.78); border-radius: 18px;
  background: rgba(255,255,255,.985); color: var(--ink);
  box-shadow: var(--shadow-panel); backdrop-filter: blur(18px);
  opacity: 0; pointer-events: none;
  transform: translate3d(0,-10px,0) scale(.94); transform-origin: var(--contact-origin-x, 24px) 0;
  transition: opacity .22s ease, transform .46s cubic-bezier(.16,1,.3,1);
}
.contact-popover[hidden] { display: none; }
.contact-popover.is-open { opacity: 1; pointer-events: auto; transform: translate3d(0,0,0) scale(1); }
.contact-popover-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.contact-popover-header > div > span {
  display: block; margin-bottom: 8px; color: var(--muted);
  font: 650 10px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase;
}
.contact-popover-header h2 { margin: 0; font: 780 22px/1.05 var(--body); letter-spacing: 0; }
.contact-popover-close {
  width: 36px; height: 36px; flex: 0 0 36px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(9,9,9,.78); border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.contact-popover-close span { font: 400 20px/1 var(--body); transform: translateY(-1px); }
.contact-popover-close:hover,
.contact-popover-close:focus-visible { background: var(--ink); color: var(--paper); transform: rotate(5deg) scale(1.05); }
.contact-popover-list { margin: 22px 0 0; border-top: 1px solid rgba(9,9,9,.78); }
.contact-popover-list > div {
  min-height: 54px; display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; gap: 14px;
  border-bottom: 1px solid var(--line);
}
.contact-popover-list > div:last-child { border-bottom: 0; }
.contact-popover-list dt { color: var(--muted); font: 550 10px/1.3 var(--body); }
.contact-popover-list dd { min-width: 0; margin: 0; font: 650 14px/1.35 var(--body); overflow-wrap: anywhere; }
.contact-popover-list a { color: inherit; text-decoration: none; }
.contact-popover-list a:hover,
.contact-popover-list a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.github-link {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--ink); text-decoration: none;
  transition: width .42s cubic-bezier(.16,1,.3,1), height .42s cubic-bezier(.16,1,.3,1), opacity .2s ease, transform .32s cubic-bezier(.16,1,.3,1), border-color .24s ease, background-color .24s ease, box-shadow .34s ease;
}
.github-link img { display: block; width: 20px; height: 20px; }
.github-link:hover { opacity: .58; transform: translateY(-1px); }
.github-link:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.site-header.is-retracted .identity-links {
  gap: 8px;
  transform: translate3d(calc(var(--floating-edge) - var(--gutter)),var(--site-header-height),0);
}
.site-header.is-retracted .wordmark {
  min-height: 42px;
  padding: 0 16px;
  border-color: rgba(9,9,9,.72);
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-float);
}
.site-header.is-retracted .github-link {
  width: 42px; height: 42px;
  border-color: rgba(9,9,9,.72);
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-float);
}
.site-header.is-retracted .wordmark:hover,
.site-header.is-retracted .wordmark:focus-visible,
.site-header.is-retracted .github-link:hover,
.site-header.is-retracted .github-link:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: var(--shadow-float-hover);
}
.wordmark-en, .micro-label, .guide-status, .hero-meta { font-family: var(--body); letter-spacing: .025em; }
.wordmark-en { font-size: 12px; font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.3vw, 38px); font-size: 14px; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.language-toggle {
  position: fixed; top: 14px; right: clamp(190px, 12vw, 240px); z-index: 140;
  min-width: 68px; min-height: 44px; margin: 0; padding: 0 10px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ink); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; pointer-events: auto; font: 600 12px/1 var(--body); letter-spacing: .025em;
  will-change: transform;
  transition: min-width .42s cubic-bezier(.16,1,.3,1), padding .42s cubic-bezier(.16,1,.3,1), transform .32s cubic-bezier(.16,1,.3,1), border-color .24s ease, box-shadow .32s ease, background-color .24s ease;
}
.language-floating .language-toggle {
  min-width: 72px; padding: 0 15px;
  border-color: rgba(9,9,9,.72); background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-float); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.language-next { color: var(--muted); }
.language-floating .language-toggle:hover, .language-floating .language-toggle:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-float-hover); }
.language-toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.language-toggle:hover .language-next, .language-toggle:focus-visible .language-next { color: var(--ink); }
.field-trigger {
  position: fixed; top: 0; right: 0; z-index: 140; width: 132px; height: 72px; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--ink); overflow: visible;
  display: block; cursor: pointer;
  pointer-events: auto;
}
.field-trigger[aria-disabled="true"] { cursor: default; }
.field-trigger-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.field-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.field-mark {
  position: absolute; right: -36px; top: -54px; display: block; width: 190px; height: 150px;
  transform-origin: 86% 12%;
  transition: transform .56s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
.field-goo { position: absolute; inset: 0; z-index: 2; filter: url(#field-goo); pointer-events: none; }
.field-rift-core {
  position: absolute; right: -12px; top: -20px; width: 174px; height: 140px; display: block;
  border-radius: 54% 46% 51% 49% / 47% 55% 45% 53%; background: #050505;
  box-shadow: 0 5px 14px rgba(0,0,0,.1); will-change: transform, border-radius;
  animation: fieldRiftBreathe 5.8s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
.field-rift-lobe { position: absolute; display: block; background: #050505; will-change: transform, border-radius; }
.field-rift-lobe-a {
  left: 36px; top: 55px; width: 96px; height: 48px;
  border-radius: 63% 37% 52% 48% / 44% 61% 39% 56%;
  animation: fieldLobeA 4.7s ease-in-out infinite alternate;
}
.field-rift-lobe-b {
  left: 58px; top: 91px; width: 66px; height: 56px;
  border-radius: 44% 56% 65% 35% / 62% 39% 61% 38%;
  animation: fieldLobeB 5.3s ease-in-out -1.7s infinite alternate;
}
.field-rift-lobe-c {
  left: 5px; top: 77px; width: 94px; height: 34px;
  border-radius: 68% 32% 45% 55% / 40% 66% 34% 60%;
  animation: fieldLobeC 4.2s ease-in-out -2.4s infinite alternate;
}
.field-spot {
  position: absolute; display: block; border-radius: 50%;
  background: #070707; opacity: 0; pointer-events: none;
  will-change: transform, opacity, border-radius;
}
.field-spot-a { left: 22px; top: 96px; width: 18px; height: 18px; border-radius: 58% 42% 55% 45% / 46% 60% 40% 54%; animation: fieldSpotA 5.2s ease-in-out infinite; }
.field-spot-b { left: 14px; top: 84px; width: 8px; height: 8px; animation: fieldSpotB 4.1s ease-in-out -1.4s infinite; }
.field-spot-c { left: 48px; top: 118px; width: 4px; height: 4px; animation: fieldSpotC 3.5s ease-in-out -.6s infinite; }
.field-spot-d { left: 4px; top: 102px; width: 25px; height: 17px; border-radius: 62% 38% 48% 52% / 45% 58% 42% 55%; animation: fieldSpotD 5.7s ease-in-out -2.2s infinite; }
.field-spot-e { left: 42px; top: 87px; width: 13px; height: 13px; border-radius: 46% 54% 61% 39% / 57% 44% 56% 43%; animation: fieldSpotE 4.6s ease-in-out -3.1s infinite; }
.field-spot-f { left: 7px; top: 76px; width: 3px; height: 3px; animation: fieldSpotF 3.1s ease-in-out -1.8s infinite; }
.field-spot-g { left: 31px; top: 102px; width: 31px; height: 22px; border-radius: 66% 34% 53% 47% / 43% 64% 36% 57%; animation: fieldSpotG 6.2s ease-in-out -3.8s infinite; }
.field-spot-h { left: 65px; top: 94px; width: 12px; height: 17px; border-radius: 45% 55% 39% 61% / 60% 43% 57% 40%; animation: fieldSpotH 4.8s ease-in-out -2.6s infinite; }
.field-spot-i { left: 0; top: 67px; width: 6px; height: 6px; animation: fieldSpotI 3.7s ease-in-out -1.1s infinite; }
.field-spot-j { left: 50px; top: 116px; width: 21px; height: 21px; border-radius: 58% 42% 66% 34% / 48% 61% 39% 52%; animation: fieldSpotJ 5.5s ease-in-out -4.2s infinite; }
.field-ripple {
  position: absolute; z-index: 1; display: block; opacity: 0; pointer-events: none;
  border: 1px solid rgba(7,7,7,.3); will-change: transform, opacity, border-radius;
}
.field-ripple-a { left: -14px; top: 65px; width: 116px; height: 84px; border-radius: 61% 39% 54% 46% / 43% 58% 42% 57%; animation: fieldLiquidRipple 5.4s ease-out -1.2s infinite; }
.field-ripple-b { left: 18px; top: 91px; width: 86px; height: 62px; border-radius: 44% 56% 63% 37% / 59% 42% 58% 41%; animation: fieldLiquidRipple 4.6s ease-out -3.3s infinite; }
.field-ripple-c { left: -28px; top: 96px; width: 132px; height: 70px; border-radius: 68% 32% 47% 53% / 39% 62% 38% 61%; animation: fieldLiquidRipple 6.1s ease-out -4.7s infinite; }
.field-satellite {
  position: absolute; z-index: 3; display: block; background: #060606; opacity: 0;
  pointer-events: none; will-change: transform, opacity, border-radius;
}
.field-satellite::after {
  content: ""; position: absolute; inset: -7px; border: 1px solid rgba(7,7,7,.28);
  border-radius: inherit; opacity: 0; animation: fieldSatelliteEcho 3.8s ease-out infinite;
}
.field-satellite-a { left: 13px; top: 91px; width: 17px; height: 13px; border-radius: 67% 33% 54% 46% / 42% 63% 37% 58%; animation: fieldSatelliteA 5.1s ease-in-out -1.8s infinite; }
.field-satellite-b { left: -7px; top: 111px; width: 9px; height: 9px; border-radius: 54% 46% 63% 37% / 60% 35% 65% 40%; animation: fieldSatelliteB 4.3s ease-in-out -3.2s infinite; }
.field-satellite-c { left: 22px; top: 119px; width: 27px; height: 19px; border-radius: 69% 31% 42% 58% / 38% 66% 34% 62%; animation: fieldSatelliteC 6.3s ease-in-out -4.7s infinite; }
.field-satellite-d { left: 63px; top: 111px; width: 8px; height: 13px; border-radius: 45% 55% 62% 38% / 67% 39% 61% 33%; animation: fieldSatelliteD 4.8s ease-in-out -.9s infinite; }
.field-satellite-e { left: -18px; top: 78px; width: 5px; height: 5px; border-radius: 50%; animation: fieldSatelliteE 3.6s ease-in-out -2.3s infinite; }
.field-satellite-f { left: 66px; top: 125px; width: 14px; height: 11px; border-radius: 60% 40% 55% 45% / 44% 64% 36% 56%; animation: fieldSatelliteF 5.4s ease-in-out -3.5s infinite; }
.field-satellite-g { left: -2px; top: 114px; width: 20px; height: 15px; border-radius: 37% 63% 48% 52% / 65% 41% 59% 35%; animation: fieldSatelliteG 5.8s ease-in-out -1.1s infinite; }
.field-satellite-h { left: 45px; top: 76px; width: 6px; height: 6px; border-radius: 50%; animation: fieldSatelliteH 4s ease-in-out -2.7s infinite; }
.field-satellite-b::after, .field-satellite-e::after, .field-satellite-h::after { display: none; }
.field-trigger:focus-visible { outline: 0; }
.field-trigger:focus-visible .field-rift-core { box-shadow: inset 0 0 0 2px rgba(255,255,255,.88), 0 5px 14px rgba(0,0,0,.1); }
.field-trigger[aria-disabled="true"] .field-mark { opacity: .46; filter: grayscale(1); }
@keyframes fieldRiftBreathe {
  0% { transform: translate3d(0,-1px,0) scale(1,.96) rotate(-1deg); border-radius: 54% 46% 51% 49% / 47% 55% 45% 53%; }
  35% { transform: translate3d(-9px,2px,0) scale(.94,1.035) rotate(1.1deg); border-radius: 44% 56% 62% 38% / 58% 43% 57% 42%; }
  70% { transform: translate3d(5px,3px,0) scale(1.075,.97) rotate(-.8deg); border-radius: 61% 39% 45% 55% / 42% 63% 37% 58%; }
  100% { transform: translate3d(-4px,1px,0) scale(.98,1.02) rotate(.7deg); border-radius: 49% 51% 58% 42% / 56% 44% 62% 38%; }
}
@keyframes fieldLobeA {
  0% { transform: translate3d(24px,-5px,0) scale(.7,.94) rotate(-12deg); }
  55% { transform: translate3d(-18px,3px,0) scale(1.22,.8) rotate(7deg); }
  100% { transform: translate3d(5px,7px,0) scale(.9,1.04) rotate(-3deg); }
}
@keyframes fieldLobeB {
  0% { transform: translate3d(17px,-12px,0) scale(.84,1.02) rotate(9deg); }
  48% { transform: translate3d(-20px,2px,0) scale(1.12,.86) rotate(-8deg); }
  100% { transform: translate3d(2px,13px,0) scale(.82,1.1) rotate(4deg); }
}
@keyframes fieldLobeC {
  0% { transform: translate3d(40px,-5px,0) scale(.58,.88) rotate(4deg); }
  52% { transform: translate3d(-22px,2px,0) scale(1.28,.74) rotate(-7deg); }
  100% { transform: translate3d(12px,5px,0) scale(.9,1) rotate(3deg); }
}

body.project-open .entry-scroll-hint {
  z-index: 92;
}
@keyframes fieldSpotA {
  0%, 12% { transform: translate3d(36px,-18px,0) scale(.15); opacity: 0; }
  31% { opacity: .9; }
  68% { transform: translate3d(-4px,6px,0) scale(.82); opacity: .72; }
  100% { transform: translate3d(-18px,15px,0) scale(.28); opacity: 0; }
}
@keyframes fieldSpotB {
  0%, 18% { transform: translate3d(44px,4px,0) scale(.1); opacity: 0; }
  40% { opacity: .78; }
  74% { transform: translate3d(-3px,-4px,0) scale(1); opacity: .58; }
  100% { transform: translate3d(-14px,-10px,0) scale(.2); opacity: 0; }
}
@keyframes fieldSpotC {
  0%, 24% { transform: translate3d(24px,-28px,0) scale(.1); opacity: 0; }
  46% { opacity: .74; }
  100% { transform: translate3d(-8px,12px,0) scale(.4); opacity: 0; }
}
@keyframes fieldSpotD {
  0%, 8% { transform: translate3d(48px,-14px,0) scale(.1); opacity: 0; }
  28% { opacity: .62; }
  76% { transform: translate3d(-2px,8px,0) scale(.9); opacity: .48; }
  100% { transform: translate3d(-15px,18px,0) scale(.15); opacity: 0; }
}
@keyframes fieldSpotE {
  0%, 16% { transform: translate3d(30px,-14px,0) scale(.12); opacity: 0; }
  38% { opacity: .72; }
  70% { transform: translate3d(-2px,5px,0) scale(.9); opacity: .6; }
  100% { transform: translate3d(-13px,14px,0) scale(.22); opacity: 0; }
}
@keyframes fieldSpotF {
  0%, 20% { transform: translate3d(50px,4px,0) scale(.1); opacity: 0; }
  45% { opacity: .68; }
  100% { transform: translate3d(-10px,-13px,0) scale(.25); opacity: 0; }
}
@keyframes fieldSpotG {
  0%, 8% { transform: translate3d(45px,-17px,0) scale(.12,.28) rotate(18deg); opacity: 0; }
  24% { opacity: .88; }
  58% { transform: translate3d(3px,3px,0) scale(1.08,.8) rotate(-8deg); opacity: .72; }
  84% { opacity: .54; }
  100% { transform: translate3d(-24px,19px,0) scale(.22,.48) rotate(13deg); opacity: 0; }
}
@keyframes fieldSpotH {
  0%, 14% { transform: translate3d(24px,-13px,0) scale(.18,.36); opacity: 0; }
  30% { opacity: .82; }
  72% { transform: translate3d(-11px,6px,0) scale(.9,1.12); opacity: .62; }
  100% { transform: translate3d(-28px,15px,0) scale(.2,.45); opacity: 0; }
}
@keyframes fieldSpotI {
  0%, 20% { transform: translate3d(59px,9px,0) scale(.1); opacity: 0; }
  42%, 76% { opacity: .74; }
  100% { transform: translate3d(-8px,-16px,0) scale(.24); opacity: 0; }
}
@keyframes fieldSpotJ {
  0%, 10% { transform: translate3d(32px,-26px,0) scale(.14,.3); opacity: 0; }
  30% { opacity: .86; }
  68% { transform: translate3d(-3px,1px,0) scale(1,.82); opacity: .66; }
  100% { transform: translate3d(-20px,22px,0) scale(.18,.38); opacity: 0; }
}
@keyframes fieldLiquidRipple {
  0%, 12% { opacity: 0; transform: translate3d(18px,-8px,0) scale(.42,.56) rotate(-6deg); }
  28% { opacity: .48; }
  62% { opacity: .24; border-radius: 43% 57% 68% 32% / 62% 39% 61% 38%; }
  100% { opacity: 0; transform: translate3d(-18px,12px,0) scale(1.25,1.12) rotate(8deg); }
}
@keyframes fieldSatelliteA {
  0% { transform: translate3d(7px,-5px,0) scale(.74,1.08) rotate(14deg); opacity: .5; }
  48% { transform: translate3d(-9px,7px,0) scale(1.08,.78) rotate(-11deg); opacity: .82; }
  100% { transform: translate3d(5px,11px,0) scale(.84,1.02) rotate(7deg); opacity: .56; }
}
@keyframes fieldSatelliteB {
  0% { transform: translate3d(8px,-3px,0) scale(.72); opacity: .42; }
  52% { transform: translate3d(-5px,9px,0) scale(1.06); opacity: .72; }
  100% { transform: translate3d(3px,5px,0) scale(.82); opacity: .48; }
}
@keyframes fieldSatelliteC {
  0% { transform: translate3d(6px,-7px,0) scale(.82,1.04) rotate(-12deg); opacity: .5; }
  55% { transform: translate3d(-12px,4px,0) scale(1.06,.76) rotate(9deg); opacity: .78; }
  100% { transform: translate3d(3px,10px,0) scale(.88,1.02) rotate(-5deg); opacity: .54; }
}
@keyframes fieldSatelliteD {
  0% { transform: translate3d(5px,-8px,0) scale(.72,1.04); opacity: .44; }
  47% { transform: translate3d(-7px,5px,0) scale(1.02,.82); opacity: .7; }
  100% { transform: translate3d(2px,9px,0) scale(.78,1.1); opacity: .5; }
}
@keyframes fieldSatelliteE {
  0% { transform: translate3d(7px,1px,0) scale(.68); opacity: .38; }
  50% { transform: translate3d(-5px,-7px,0) scale(1.08); opacity: .68; }
  100% { transform: translate3d(2px,6px,0) scale(.8); opacity: .43; }
}
@keyframes fieldSatelliteF {
  0% { transform: translate3d(6px,-6px,0) scale(.76,1.04) rotate(-8deg); opacity: .46; }
  51% { transform: translate3d(-10px,4px,0) scale(1.08,.8) rotate(10deg); opacity: .74; }
  100% { transform: translate3d(3px,8px,0) scale(.84,1) rotate(-3deg); opacity: .5; }
}
@keyframes fieldSatelliteG {
  0% { transform: translate3d(9px,-5px,0) scale(.78,1.06) rotate(13deg); opacity: .48; }
  56% { transform: translate3d(-8px,5px,0) scale(1.1,.76) rotate(-9deg); opacity: .76; }
  100% { transform: translate3d(4px,11px,0) scale(.86,1.02) rotate(5deg); opacity: .52; }
}
@keyframes fieldSatelliteH {
  0% { transform: translate3d(5px,-4px,0) scale(.7); opacity: .4; }
  48% { transform: translate3d(-6px,7px,0) scale(1.06); opacity: .7; }
  100% { transform: translate3d(2px,3px,0) scale(.82); opacity: .45; }
}
@keyframes fieldSatelliteEcho {
  0%, 18% { opacity: 0; transform: scale(.58); }
  35% { opacity: .38; }
  100% { opacity: 0; transform: scale(1.8,1.55); }
}

.music-island {
  --music-bg: #090909;
  --music-ink: #fff;
  position: fixed; left: 50%; top: 36px; z-index: 130;
  width: 236px; height: 42px; transform: translate(-50%,-50%);
  color: var(--music-ink); background: var(--music-bg); border: 1px solid var(--music-bg); border-radius: 999px;
  overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.11);
  transition: width .46s cubic-bezier(.16,1,.3,1), height .46s cubic-bezier(.16,1,.3,1), top .46s cubic-bezier(.16,1,.3,1), border-radius .46s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background-color .42s ease, border-color .42s ease, color .42s ease;
}
.music-island.is-project-theme { box-shadow: 0 18px 48px color-mix(in srgb, var(--music-bg) 36%, rgba(0,0,0,.18)); }
.music-island.is-open {
  top: 8px; width: min(430px, calc(100vw - 32px)); height: 174px; transform: translateX(-50%);
  border-radius: 25px; box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
body.project-open .music-island {
  box-shadow: none;
  filter: none;
}
.music-island-toggle {
  position: relative; z-index: 2; width: 100%; height: 40px; padding: 0 14px;
  display: grid; grid-template-columns: 22px minmax(0,1fr) 16px; align-items: center; gap: 9px;
  border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer;
  transition: grid-template-columns .46s cubic-bezier(.16,1,.3,1), gap .4s ease, padding .4s ease;
}
.music-island-bars {
  width: 16px; height: 18px; display: flex; align-items: center; justify-content: flex-start; gap: 2px;
  overflow: hidden; opacity: .78; transform-origin: left center;
  transition: width .46s cubic-bezier(.16,1,.3,1), height .46s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.music-island-bars i {
  flex: 0 0 1.5px; width: 1.5px; height: 7px; border-radius: 999px;
  background: currentColor; opacity: var(--music-opacity, .58); transform: scaleY(var(--music-level, .22)); transform-origin: center;
  transition: transform 70ms linear, opacity 90ms linear;
}
@keyframes music-compact-wave {
  0%, 100% { transform: scaleY(.28); opacity: .46; }
  38% { transform: scaleY(1.18); opacity: .96; }
  66% { transform: scaleY(.48); opacity: .62; }
}
.music-island.is-playing:not(.is-open) .music-island-bars i {
  animation: music-compact-wave .82s ease-in-out infinite;
}
.music-island.is-playing:not(.is-open) .music-island-bars i:nth-child(2) { animation-delay: .08s; }
.music-island.is-playing:not(.is-open) .music-island-bars i:nth-child(3) { animation-delay: .16s; }
.music-island.is-playing:not(.is-open) .music-island-bars i:nth-child(4) { animation-delay: .24s; }
.music-island.is-playing:not(.is-open) .music-island-bars i:nth-child(5) { animation-delay: .32s; }
.music-island:not(.is-open) .music-island-bars i:nth-child(n+6) { display: none; }
.music-island-compact {
  min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden;
  opacity: 1; transform: translateX(0); transition: opacity .18s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.music-island-compact strong { flex: 0 0 auto; font-size: 11px; font-weight: 750; }
.music-island-compact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--music-ink) 62%, transparent); font-size: 10px; }
.music-island-chevron { width: 7px; height: 7px; justify-self: center; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); transition: transform .35s ease; }
.music-island.is-open .music-island-toggle { grid-template-columns: minmax(0,1fr) 0 16px; gap: 0 9px; padding-left: 17px; }
.music-island.is-open .music-island-bars { width: 100%; height: 26px; justify-content: space-between; gap: 2px; opacity: .92; }
.music-island.is-open .music-island-bars i { display: block; flex-basis: 1.5px; height: 7px; animation: none; }
.music-island.is-open .music-island-compact { width: 0; opacity: 0; transform: translateX(-12px); pointer-events: none; }
.music-island.is-open .music-island-chevron { transform: rotate(225deg) translate(-1px,-1px); }
.music-island-panel {
  position: absolute; inset: 48px 16px 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto 34px; gap: 10px 18px;
  opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.music-island.is-open .music-island-panel { opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: .12s; }
.music-track-copy { min-width: 0; display: grid; align-content: start; }
.music-track-copy > span { color: color-mix(in srgb, var(--music-ink) 48%, transparent); font-size: 9px; letter-spacing: .08em; }
.music-track-copy strong { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.music-track-copy small { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--music-ink) 62%, transparent); font-size: 10px; }
.music-track-copy .music-album { margin-top: 1px; color: color-mix(in srgb, var(--music-ink) 48%, transparent); font-size: 9px; }
.music-controls { display: flex; align-items: center; gap: 7px; }
.music-controls button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--music-ink) 34%, transparent); border-radius: 50%; color: var(--music-ink); background: transparent; cursor: pointer; }
.music-controls button:disabled { opacity: .28; cursor: default; }
.music-controls .music-play { background: var(--music-ink); color: var(--music-bg); border-color: var(--music-ink); }
.music-play > span { width: 0; height: 0; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.music-play.is-playing > span { width: 8px; height: 10px; margin-left: 0; border: 0; background: linear-gradient(90deg,currentColor 0 3px,transparent 3px 5px,currentColor 5px 8px); }
.music-timeline { grid-column: 1 / -1; align-self: end; }
.music-progress { width: 100%; height: 14px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.music-progress::-webkit-slider-runnable-track { height: 2px; background: color-mix(in srgb, var(--music-ink) 28%, transparent); }
.music-progress::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; margin-top: -3px; border-radius: 50%; background: var(--music-ink); }
.music-progress::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--music-ink) 28%, transparent); }
.music-progress::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--music-ink); }
.music-progress:disabled { cursor: default; opacity: .45; }
.music-time { margin-top: -1px; display: flex; justify-content: space-between; color: color-mix(in srgb, var(--music-ink) 46%, transparent); font-size: 9px; font-variant-numeric: tabular-nums; }

main { overflow: clip; }
.entry-flow { background: var(--paper); }
.foyer {
  position: relative;
  min-height: calc(100svh - 72px);
  padding: clamp(54px, 8vw, 120px) var(--gutter) clamp(42px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  column-gap: clamp(42px, 6vw, 110px);
  border-bottom: 0;
  background: var(--paper);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.foyer-info {
  position: relative; z-index: 2; grid-column: 1; align-self: end;
  width: min(100%, 480px); min-width: 0; padding-bottom: clamp(12px, 2vh, 28px);
  transform: translateY(calc(-1 * clamp(56px, 7vh, 72px)));
}
.foyer-info h1 { margin: 0; font-size: clamp(36px, 3.45vw, 60px); line-height: .94; letter-spacing: -.055em; }
.foyer-role { margin: clamp(24px, 3.6vh, 38px) 0 0; font-size: clamp(15px, 1.05vw, 19px); line-height: 1.42; font-weight: 650; }
.foyer-focus {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 15px 0 0; color: var(--ink);
}
.foyer-focus span {
  display: inline-flex; align-items: center; min-height: 30px; padding: 5px 11px 6px;
  border: 1px solid rgba(0,0,0,.72); border-radius: 999px;
  background: rgba(255,255,255,.9);
  font: 700 clamp(11px, .72vw, 13px)/1.15 var(--body);
  letter-spacing: -.01em; white-space: nowrap;
}
.foyer-summary {
  display: block; max-width: 46em; margin: clamp(20px, 2.6vh, 28px) 0 0;
  color: #222; font-size: clamp(13px, .86vw, 15px); line-height: 1.72;
  text-wrap: pretty;
}
.semantic-unit { display: inline-block; white-space: nowrap; }

.profile-overlay {
  position: fixed; inset: 0; z-index: 160;
  display: block;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background-color .36s cubic-bezier(.16,1,.3,1);
  overscroll-behavior: none; touch-action: none;
}
.profile-overlay[hidden] {
  /* 保留已经预热过的布局与合成层，避免首次点击重新构建三张高清简历。 */
  display: block; visibility: hidden; pointer-events: none;
}
.profile-overlay.is-open { background: rgba(0,0,0,.18); pointer-events: auto; }
.profile-overlay.is-motion-warming {
  /* 加载页遮挡期间真实跑一遍开合，预建首次交互所需的布局与绘制缓存。 */
  z-index: 2147483647; visibility: visible !important; opacity: .001;
  background: transparent !important; pointer-events: none !important;
}
.device-view-notice {
  position: fixed; left: 50%; bottom: max(118px, calc(env(safe-area-inset-bottom) + 104px)); z-index: 180;
  width: min(420px, calc(100vw - 32px)); min-height: 78px; padding: 15px 14px 15px 17px;
  display: grid; grid-template-columns: minmax(0,1fr) 38px; align-items: center; gap: 14px;
  border: 1px solid rgba(9,9,9,.78); border-radius: 18px;
  background: rgba(255,255,255,.97); color: var(--ink); backdrop-filter: blur(18px);
  box-shadow: var(--shadow-panel);
  opacity: 0; pointer-events: none;
  transform: translate3d(-50%,18px,0) scale(.96); transform-origin: center bottom;
  transition: opacity .26s ease, transform .46s cubic-bezier(.16,1,.3,1);
}
.device-view-notice[hidden] { display: none; }
.device-view-notice.is-visible { opacity: 1; pointer-events: auto; transform: translate3d(-50%,0,0) scale(1); }
body.project-open .device-view-notice,
body.profile-open .device-view-notice { opacity: 0; pointer-events: none; transform: translate3d(-50%,18px,0) scale(.96); }
.device-view-notice-copy { min-width: 0; }
.device-view-notice-copy strong { display: block; font: 750 13px/1.15 var(--body); letter-spacing: -.01em; }
.device-view-notice-copy p { margin: 6px 0 0; color: rgba(9,9,9,.66); font: 500 12px/1.5 var(--body); text-wrap: pretty; }
.device-view-notice-close {
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(9,9,9,.78); border-radius: 50%; background: var(--paper); color: var(--ink);
  cursor: pointer; font: 400 20px/1 var(--body); transition: color .2s ease, background-color .2s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.device-view-notice-close:hover, .device-view-notice-close:focus-visible { background: var(--ink); color: var(--paper); transform: rotate(5deg) scale(1.05); }
.profile-panel {
  position: absolute; left: 10px; bottom: 10px;
  width: 96px; height: 96px; max-height: none;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ink); border-radius: 48px;
  background: rgba(255,255,255,.985); color: var(--ink);
  box-shadow: var(--shadow-float);
  contain: layout paint; backface-visibility: hidden;
  transition:
    width .52s cubic-bezier(.16,1,.3,1),
    height .52s cubic-bezier(.16,1,.3,1),
    border-radius .52s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease;
  will-change: width, height, border-radius;
}
.profile-overlay.is-open .profile-panel {
  width: calc(100vw - 28px); height: min(900px, calc(100svh - 28px));
  border-radius: 18px; box-shadow: var(--shadow-overlay);
}
.profile-rail {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: 96px; height: min(900px, calc(100svh - 28px)); min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(20px, 2.4vh, 28px) 16px 20px;
  border-right: 1px solid transparent;
  background: rgba(255,255,255,.985);
  box-shadow: none;
  transition: border-color .24s ease, box-shadow .3s ease;
}
.profile-overlay.is-open .profile-rail { border-right-color: rgba(9,9,9,.86); box-shadow: 10px 0 24px rgba(0,0,0,.035); }
.profile-header {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; justify-content: center; align-items: flex-start;
  opacity: 0;
  transition: opacity .18s ease;
}
.profile-overlay.is-open .profile-header { opacity: 1; transition-delay: .3s; }
.profile-heading {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 13px;
  min-width: 0; max-height: 100%;
}
.profile-header h2,
.profile-heading span {
  margin: 0; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
}
.profile-header h2 { font: 750 clamp(16px, 1.2vw, 20px)/1 var(--body); letter-spacing: .12em; }
.profile-heading span { color: var(--muted); font-size: 10px; line-height: 1; letter-spacing: .08em; }
.profile-close {
  position: relative; z-index: 4; flex: 0 0 auto; margin-top: 18px;
  width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--ink); color: var(--paper); cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transform: scale(.88);
  transition: opacity .16s ease, transform .28s cubic-bezier(.16,1,.3,1), box-shadow .24s ease;
}
.profile-overlay.is-open .profile-close { opacity: 1; pointer-events: auto; transform: scale(1); transition-delay: .16s, .12s, 0s; }
.profile-close span { font: 300 27px/1 var(--body); transform: translateY(-1px); }
.profile-close:hover { box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.profile-close:focus-visible { outline: 2px solid var(--paper); outline-offset: -5px; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.resume-pages {
  position: absolute; left: 96px; bottom: 0;
  width: calc(100vw - 124px); height: min(900px, calc(100svh - 28px));
  min-width: 0; min-height: 0; display: grid; align-content: start; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); scrollbar-width: thin; scrollbar-color: rgba(9,9,9,.5) transparent;
  touch-action: pan-y; opacity: 0; pointer-events: none; transform: translate3d(-10px,0,0);
  contain: layout paint;
  transition: opacity .24s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.profile-overlay.is-open .resume-pages { opacity: 1; pointer-events: auto; transform: translate3d(0,0,0); transition-delay: .16s, .1s; }
.resume-pages::-webkit-scrollbar { width: 11px; }
.resume-pages::-webkit-scrollbar-track { background: transparent; }
.resume-pages::-webkit-scrollbar-thumb {
  min-height: 54px; border: 3px solid transparent; border-radius: 999px;
  background: rgba(9,9,9,.5); background-clip: padding-box;
}
.resume-pages::-webkit-scrollbar-thumb:hover { background-color: rgba(9,9,9,.7); }
.resume-page {
  margin: 0; border-bottom: 1px solid var(--line); background: #fff;
}
.resume-page:last-child { border-bottom: 0; }
.resume-page img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.foyer-portrait {
  grid-column: 2; width: min(17vw, 240px); height: min(46vh, 400px); margin: 0 clamp(34px, 4vw, 74px) 0 0;
  position: relative; z-index: 3; align-self: center; overflow: visible; background: transparent; transform: translateY(-5vh);
}
.foyer-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

.foyer-marquee {
  position: absolute; z-index: 1; top: -4%; left: 0; right: 0; height: 46%;
  display: grid; align-content: center; gap: clamp(18px, 2.8vh, 30px);
  overflow: hidden; pointer-events: none; user-select: none;
}
.foyer-marquee-row {
  width: 100%; overflow: hidden; padding: 5px 0 7px;
  pointer-events: auto; cursor: grab; touch-action: pan-y;
}
.foyer-marquee-row.is-dragging { cursor: grabbing; }
.foyer-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: foyerMarqueeFlow var(--marquee-duration, 120s) linear infinite;
  will-change: transform;
}
.foyer-marquee-row.is-reverse .foyer-marquee-track { animation-direction: reverse; }
.foyer-marquee.is-project-transitioning .foyer-marquee-track { animation-play-state: paused !important; }
.foyer-marquee.is-project-transitioning { visibility: hidden; }
.foyer-marquee-row:not(.is-resuming):has(.foyer-marquee-item:focus-visible) .foyer-marquee-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .foyer-marquee-row:not(.is-resuming):has(.foyer-marquee-item:hover) .foyer-marquee-track { animation-play-state: paused; }
}
.foyer-marquee-group {
  display: flex; align-items: baseline; gap: clamp(34px, 4vw, 78px);
  padding-right: clamp(34px, 4vw, 78px); flex: none;
}
.foyer-marquee-item {
  display: inline-flex; align-items: baseline; gap: clamp(10px, 1.1vw, 18px);
  color: rgba(0,0,0,.48); white-space: nowrap; text-decoration: none;
  pointer-events: auto; cursor: grab; -webkit-user-drag: none;
  transition: color .22s ease;
}
.foyer-marquee-row.is-dragging .foyer-marquee-item { cursor: grabbing; }
.foyer-marquee-item:hover,
.foyer-marquee-item:focus-visible { color: rgba(0,0,0,.96); }
.foyer-marquee-item:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.foyer-marquee-item strong {
  font: 800 clamp(20px, 1.8vw, 32px)/1.12 var(--display);
  letter-spacing: -.045em;
}
.foyer-marquee-year {
  font: 650 clamp(9px, .7vw, 12px)/1.2 var(--body);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
@keyframes foyerMarqueeFlow {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

.project-marquee-transition {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  color: var(--ink); pointer-events: none; user-select: none;
  contain: strict;
}
.project-marquee-transition-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: #fff;
  pointer-events: none;
  will-change: opacity;
}
.project-marquee-transition-field {
  position: absolute; inset: 0; z-index: 1;
  overflow: visible;
}
.project-marquee-transition-curtain {
  position: absolute; inset: 0; z-index: 3;
  background: #fff;
  pointer-events: none;
  will-change: transform, opacity;
}
.project-marquee-transition-row {
  position: absolute; left: 0; right: 0;
  min-width: 0; overflow: visible; display: flex; align-items: flex-start;
  opacity: 0; will-change: transform, opacity, filter;
}
.project-marquee-transition-track {
  width: max-content; display: flex; align-items: center; gap: var(--transition-item-gap, clamp(34px,4vw,78px));
  will-change: transform;
}
.project-marquee-transition-item {
  display: inline-flex; flex: none; align-items: baseline;
  gap: var(--transition-inner-gap, clamp(10px,1.1vw,18px));
  color: rgba(0,0,0,.2);
  white-space: nowrap;
}
.project-marquee-transition-item strong {
  font-family: var(--transition-title-font-family, var(--display));
  font-size: var(--transition-title-font-size, clamp(20px,1.8vw,32px));
  font-weight: var(--transition-title-font-weight, 800);
  line-height: var(--transition-title-line-height, 1.12);
  letter-spacing: var(--transition-title-letter-spacing, -.045em);
}
.project-marquee-transition-item.is-emphasis { color: rgba(0,0,0,.54); }
.project-marquee-transition-item.is-anchor-placeholder { visibility: hidden; }
.project-marquee-transition-seed {
  position: fixed; z-index: 2; display: inline-flex; align-items: baseline;
  gap: clamp(10px,1.1vw,18px);
  width: max-content; height: auto;
  color: rgba(0,0,0,.96); white-space: nowrap; pointer-events: none;
  transform-origin: center; will-change: transform, opacity;
}
.project-marquee-transition-seed strong {
  font-family: var(--transition-title-font-family, var(--display));
  font-size: var(--transition-title-font-size, clamp(20px,1.8vw,32px));
  font-weight: var(--transition-title-font-weight, 800);
  line-height: var(--transition-title-line-height, 1.12);
  letter-spacing: var(--transition-title-letter-spacing, -.045em);
}
.project-marquee-transition-seed .foyer-marquee-year {
  font: 650 clamp(9px,.7vw,12px)/1.2 var(--body); letter-spacing: .02em;
}
.project-archive-transition {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  color: var(--ink); pointer-events: none; user-select: none;
  contain: strict;
}
.project-archive-transition-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: var(--paper); opacity: 0;
  will-change: opacity;
}
.project-archive-transition-sheet {
  position: fixed; z-index: 1; overflow: hidden;
  background: var(--paper);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  will-change: left, top, width, height, opacity;
}
.project-archive-transition-row {
  position: fixed; z-index: 2;
  display: grid; align-items: center;
  box-sizing: border-box; text-decoration: none;
  color: var(--ink); pointer-events: none;
  transform-origin: left center;
  will-change: transform, opacity;
}
.project-archive-transition-row .work-name {
  color: rgba(9,9,9,.96);
  transform-origin: left center;
  will-change: transform, opacity;
}
.project-archive-transition-row .work-tags,
.project-archive-transition-row .work-year { will-change: transform, opacity; }
.work-row.is-archive-transition-source { visibility: hidden; }
.project-featured-transition {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  pointer-events: none; user-select: none; contain: strict;
}
.project-featured-transition-cover {
  position: fixed; z-index: 1; overflow: hidden;
  box-sizing: border-box;
  transform-origin: center center;
  will-change: left, top, width, height, transform;
}
.project-featured-transition-media {
  position: absolute; inset: 0; overflow: hidden;
  background: inherit;
}
.project-featured-transition-media img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: 50% 50%;
  will-change: transform;
}
.project-card.is-featured-transition-source .project-media { visibility: hidden; }
.project-layer.is-entry-preparing { opacity: 0; pointer-events: none; }

.guide-panel.ai-screen {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: none;
  min-height: calc(100svh - 72px);
  display: grid;
  place-items: center;
  padding: 48px var(--gutter);
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.entry-scroll-hint {
  position: fixed; left: 50%; bottom: 0; z-index: 18;
  width: 100%; min-height: 58px; padding: 0 var(--gutter); border: 0; border-top: 1px solid var(--ink);
  background: rgba(255,255,255,.96); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer;
  font: 600 12px/1.2 var(--body); letter-spacing: .02em; white-space: nowrap;
  transform: translateX(-50%); opacity: 1; backdrop-filter: blur(10px);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  overflow: hidden;
  transition:
    width .52s cubic-bezier(.16,1,.3,1),
    min-height .52s cubic-bezier(.16,1,.3,1),
    bottom .52s cubic-bezier(.16,1,.3,1),
    transform .34s cubic-bezier(.16,1,.3,1),
    padding .52s cubic-bezier(.16,1,.3,1),
    border-radius .52s cubic-bezier(.16,1,.3,1),
    border-width .34s ease,
    border-color .3s ease,
    box-shadow .38s ease,
    background-color .3s ease;
}
.entry-scroll-hint.is-return {
  left: 50%; right: auto; bottom: 10px;
  width: 124px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  isolation: isolate;
}
.entry-scroll-hint.is-return:hover,
.entry-scroll-hint.is-return:focus-visible {
  transform: translate(-50%, -3px);
  box-shadow: var(--shadow-float-hover);
}
.entry-scroll-hint.is-return:active {
  transform: translate(-50%, -1px) scale(.98);
  box-shadow: 0 9px 22px rgba(0,0,0,.12);
}
.entry-scroll-copy {
  display: grid;
  align-items: center;
  min-width: 0;
}
.entry-scroll-copy-down,
.entry-scroll-copy-up {
  grid-area: 1 / 1;
  transition: opacity .2s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.entry-scroll-copy-down { opacity: 1; transform: translateY(0); }
.entry-scroll-copy-up { opacity: 0; transform: translateY(7px); }
.entry-scroll-hint.is-return .entry-scroll-copy-down { opacity: 0; transform: translateY(-7px); }
.entry-scroll-hint.is-return .entry-scroll-copy-up { opacity: 1; transform: translateY(0); }
.entry-scroll-hint.is-return .entry-scroll-copy-down { display: none; }
.entry-scroll-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 28px;
  flex: 0 0 20px;
}
.scroll-mouse,
.scroll-top-icon { grid-area: 1 / 1; }
.scroll-mouse {
  position: relative; width: 17px; height: 27px; border: 1px solid currentColor; border-radius: 10px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .2s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.scroll-mouse i {
  position: absolute; top: 5px; left: 50%; width: 2px; height: 5px; border-radius: 2px;
  background: currentColor; transform: translateX(-50%); animation: scroll-wheel 1.65s cubic-bezier(.16,1,.3,1) infinite;
}
.scroll-top-icon {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateY(7px) scale(.78);
  transition: opacity .2s ease, transform .42s cubic-bezier(.16,1,.3,1);
}
.entry-scroll-hint.is-return .scroll-mouse {
  opacity: 0;
  transform: translateY(-7px) scale(.78);
}
.entry-scroll-hint.is-return .entry-scroll-icon {
  width: 18px;
  height: 20px;
  flex: 0 0 18px;
  overflow: hidden;
}
.entry-scroll-hint.is-return .scroll-top-icon {
  width: 16px;
  height: 16px;
  overflow: hidden;
  opacity: 1;
  transform: translate(1px, 0) scale(1);
}
@keyframes scroll-wheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  22% { opacity: 1; }
  68% { opacity: 1; transform: translate(-50%, 8px); }
  100% { opacity: 0; transform: translate(-50%, 8px); }
}
.guide-panel.ai-screen .guide-panel-inner { width: min(760px, 100%); padding: 0; }
.guide-panel.ai-screen .guide-head { display: block; text-align: center; }
.guide-panel.ai-screen .guide-head h2 { margin: 0; font-size: clamp(34px, 4.5vw, 62px); line-height: 1.05; letter-spacing: -.045em; }
.guide-panel.ai-screen .guide-log { min-height: 74px; margin: 26px auto 22px; padding: 0; border: 0; max-width: 620px; text-align: center; }
.guide-panel.ai-screen .guide-answer { font-size: 15px; line-height: 1.75; }
.guide-panel.ai-screen .guide-form { min-height: 68px; margin: 0; padding: 8px 10px 8px 22px; grid-template-columns: 1fr 52px; align-items: center; border: 1px solid var(--ink); border-radius: 36px; }
.guide-panel.ai-screen .guide-form input { min-height: 50px; padding: 0; background: transparent; font-size: 16px; }
.guide-panel.ai-screen .guide-form button { min-width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.guide-panel.ai-screen .guide-prompts { justify-content: center; margin-top: 18px; }
.guide-panel.ai-screen .guide-prompts button { min-height: 40px; border-color: var(--line); border-radius: 22px; font-size: 13px; }
.guide-panel.ai-screen .guide-note { margin-top: 22px; text-align: center; }
.guide-panel.ai-screen.has-conversation .guide-head { display: none; }
.guide-panel.ai-screen.has-conversation .guide-log { min-height: 230px; padding: 28px 0; border-bottom: 1px solid var(--line); text-align: left; }

.hero {
  min-height: min(760px, calc(100svh - 72px)); padding: clamp(54px, 7vw, 104px) var(--gutter) 36px;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .45fr); gap: clamp(46px, 7vw, 120px);
  border-bottom: 1px solid var(--ink);
}
.hero-copy { display: flex; flex-direction: column; min-width: 0; }
.eyebrow, .micro-label { margin: 0; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .025em; }
.hero h1 {
  margin: clamp(28px, 7vh, 76px) 0 0; max-width: 760px;
  font-family: var(--display); font-size: clamp(42px, 5.2vw, 78px); line-height: .98; letter-spacing: -.055em;
  font-weight: 800; text-wrap: balance;
}
.hero-identity { margin: clamp(38px, 6vh, 72px) 0 0; padding-top: 14px; border-top: 1px solid var(--ink); }
.hero-identity p { margin: 0; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.3; font-weight: 700; letter-spacing: -.025em; }
.hero-intro { margin: 16px 0 0; max-width: 690px; color: #303030; font-size: clamp(14px, 1vw, 17px); line-height: 1.7; text-wrap: pretty; }
.hero-proof { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: auto; padding-top: 40px; }
.hero-proof a { min-height: 70px; padding: 12px 12px 10px 0; border-top: 1px solid var(--ink); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; }
.hero-proof a + a { padding-left: 12px; border-left: 1px solid var(--line); }
.hero-proof strong { font-size: 14px; }
.hero-proof span { color: #555; font: 500 12px/1.4 var(--body); }
.hero-meta { display: flex; gap: 26px; padding-top: 13px; border-top: 1px solid var(--ink); font-size: 12px; }

.hero-side { align-self: end; border-top: 2px solid var(--ink); }
.role-list { padding: 15px 0 42px; }
.role-list > p:not(.micro-label) { margin: 9px 0 0; font-size: 14px; }
.resume-float {
  position: fixed; left: var(--floating-edge); bottom: 10px; z-index: 90;
  width: 96px; height: 96px; padding: 13px; border: 1px solid var(--ink); border-radius: 50%;
  background: rgba(255,255,255,.98); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: var(--shadow-float); backdrop-filter: blur(16px);
  transition: color .22s ease, background .22s ease, opacity .22s ease,
    transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease;
}
.resume-float.is-profile-source {
  /* 圆球只作为变形锚点，面板覆盖它后不再叠出第二个浮层。 */
  opacity: 0; transform: none !important; pointer-events: none;
  transition: none;
}
.resume-float.is-profile-source:hover,
.resume-float.is-profile-source:focus-visible { transform: none !important; }
.resume-float.is-profile-returning,
.resume-float.is-profile-returning:hover,
.resume-float.is-profile-returning:focus-visible {
  transform: none !important;
  transition: none;
}
.resume-float:hover, .resume-float:focus-visible {
  color: var(--paper); background: var(--ink); transform: translateY(-4px);
  box-shadow: var(--shadow-float-hover);
}
.resume-float-label { display: block; font: 600 12px/1 var(--body); letter-spacing: .025em; }
.resume-float strong { position: absolute; left: 13px; bottom: 14px; font-size: 16px; }
.resume-float-mark { position: absolute; right: 14px; top: 12px; font-size: 14px; }
.portfolio-guide {
  position: fixed; right: 10px; bottom: 10px; z-index: 90;
  width: 96px; height: 96px; border: 1px solid var(--ink); border-radius: 50%;
  background: rgba(255,255,255,.98); color: var(--ink); overflow: hidden;
  box-shadow: var(--shadow-float); backdrop-filter: blur(16px);
  transition: width .52s cubic-bezier(.16,1,.3,1), height .52s cubic-bezier(.16,1,.3,1), bottom .38s cubic-bezier(.16,1,.3,1),
    border-radius .52s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
body.entry-mode .portfolio-guide.is-open { bottom: 10px; }
.portfolio-guide.is-open {
  width: min(440px, calc(100vw - 36px)); height: min(610px, calc(100svh - 36px));
  border-radius: 24px; box-shadow: var(--shadow-panel);
}
.portfolio-guide.is-ai-project-transition-source { opacity: 0 !important; pointer-events: none !important; }
.portfolio-guide.is-ai-project-measuring { transition: none !important; }
.portfolio-guide.ai-project-transition {
  right: auto; bottom: auto; z-index: 220; margin: 0;
  max-width: none; max-height: none; opacity: 1; pointer-events: auto;
  transition: none !important; will-change: left, top, width, height, border-radius, opacity;
  contain: layout paint style;
}
.portfolio-guide.ai-project-transition .portfolio-guide-panel { transition: none !important; }
body.ai-project-transitioning { overflow: hidden; }
.guide-open {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 13px; border: 0; border-radius: inherit;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
  opacity: 1; transition: opacity .16s ease, background .2s, color .2s;
}
.guide-open:hover, .guide-open:focus-visible { background: var(--ink); color: var(--paper); }
.portfolio-guide.is-open .guide-open { opacity: 0; pointer-events: none; }
.guide-open span, .guide-open strong { display: block; }
.guide-open-label { font: 600 12px/1 var(--body); letter-spacing: .025em; }
.guide-open strong { position: absolute; left: 13px; bottom: 14px; font-size: 16px; }
.guide-open-mark { position: absolute; right: 14px; top: 12px; font-size: 14px; }
.portfolio-guide-panel {
  position: relative; width: 100%; height: 100%; padding: 24px; overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(.97);
  transform-origin: right bottom;
  transition: opacity .2s ease, transform .38s cubic-bezier(.16,1,.3,1), visibility 0s linear .38s;
}
.portfolio-guide.is-open .portfolio-guide-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
  transition-delay: .16s, .1s, 0s;
}
.portfolio-guide-head { flex: 0 0 auto; padding-right: 4px; }
.portfolio-guide-head h2 { max-width: 300px; margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -.04em; }
.portfolio-guide-note { max-width: 330px; margin: 10px 0 0; color: #555; font-size: 11px; line-height: 1.5; }
.portfolio-guide-close {
  position: static; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--paper); cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.18); transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.portfolio-guide-close:hover, .portfolio-guide-close:focus-visible { transform: none; background: #242424; box-shadow: 0 10px 26px rgba(0,0,0,.24); }
.portfolio-guide-close span { font: 300 30px/1 var(--body); transform: translateY(-1px); }
.portfolio-guide-log { flex: 1 1 auto; min-height: 0; max-height: none; margin: 20px 0 14px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.guide-message + .guide-message { margin-top: 16px; }
.guide-message-user { padding-left: 42px; }
.guide-message-user .guide-answer { padding: 9px 12px; background: #f0f0ec; border-radius: 14px 14px 2px 14px; }
.guide-message-assistant .guide-answer { white-space: normal; }
.guide-message-assistant.is-fallback .guide-answer { color: #555; }
.guide-answer > :first-child { margin-top: 0; }
.guide-answer > :last-child { margin-bottom: 0; }
.guide-answer-paragraph { margin: 0 0 10px; }
.guide-answer-heading {
  margin: 15px 0 7px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.4; font-weight: 750; letter-spacing: .015em;
}
.guide-answer-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-answer-list { margin: 0 0 11px; padding-left: 18px; }
.guide-answer-list li { padding-left: 2px; }
.guide-answer-list li + li { margin-top: 6px; }
.guide-answer strong { font-weight: 750; }
.guide-stream-target::after {
  content: ""; display: inline-block; width: 1px; height: .92em; margin-left: 2px;
  vertical-align: -.08em; background: currentColor; animation: guide-stream-caret .72s steps(1,end) infinite;
}
@keyframes guide-stream-caret { 0%, 48% { opacity: .8; } 49%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .guide-stream-target::after { animation: none; } }
.guide-progress { min-height: 20px; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; color: #666; font-size: 11px; line-height: 1.35; }
.guide-progress-dot { width: 6px; height: 6px; flex: 0 0 6px; border: 1px solid currentColor; border-radius: 50%; background: transparent; }
.guide-progress.is-active .guide-progress-dot { background: var(--ink); animation: guide-progress-pulse .9s ease-in-out infinite; }
.guide-progress.is-complete .guide-progress-dot { background: currentColor; opacity: .55; }
.guide-progress-label { font-weight: 600; }
.guide-progress-timer { margin-left: auto; font-variant-numeric: tabular-nums; color: #777; }
@keyframes guide-progress-pulse {
  0%, 100% { opacity: .3; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1); }
}
.guide-project-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.guide-project-link { padding: 6px 9px; border: 1px solid var(--ink); border-radius: 16px; background: transparent; color: inherit; font: 600 11px/1.35 var(--body); text-align: left; cursor: pointer; }
.guide-project-link:hover, .guide-project-link:focus-visible { background: var(--ink); color: var(--paper); }
.portfolio-guide-dock { flex: 0 0 auto; min-width: 0; }
.portfolio-guide-actions { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; align-items: center; }
.portfolio-guide-form { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 52px; padding: 3px 5px 3px 15px; border: 1px solid var(--ink); border-radius: 28px; background: rgba(255,255,255,.94); }
.portfolio-guide-form input { min-width: 0; min-height: 44px; padding: 8px 8px 8px 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
.portfolio-guide-form button { min-width: 56px; min-height: 40px; padding: 0 10px; border: 0; border-left: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 700; }
.portfolio-guide-form input:disabled, .portfolio-guide-form button:disabled { cursor: wait; opacity: .5; }
.portfolio-guide-prompts { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 10px; padding: 0 1px 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; user-select: none; transition: opacity .18s ease, max-height .24s cubic-bezier(.16,1,.3,1), margin .24s cubic-bezier(.16,1,.3,1); }
.portfolio-guide-prompts::-webkit-scrollbar { display: none; }
.portfolio-guide-prompts.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.portfolio-guide-prompts button {
  flex: 0 0 auto; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--paper); cursor: pointer; font-size: 12px; white-space: nowrap;
}
.portfolio-guide-prompts button:hover, .portfolio-guide-prompts button:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.portfolio-guide.has-conversation .portfolio-guide-prompts { max-height: 0; margin-bottom: 0; padding-bottom: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.guide-panel {
  position: fixed; left: max(18px, var(--gutter)); bottom: max(18px, 3vw); z-index: 43;
  width: min(440px, calc(100vw - 36px)); max-height: min(680px, calc(100svh - 36px));
  border: 1px solid var(--ink); border-radius: 0; background: rgba(255,255,255,.98); box-shadow: var(--shadow-panel);
  overflow: auto; backdrop-filter: blur(16px);
}
.guide-panel[hidden] { display: none; }
.guide-panel-inner { width: 100%; padding: 22px 22px 20px; }
.guide { align-self: end; border-top: 2px solid var(--ink); padding-top: 14px; }
.guide-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.guide-head h2 { font-family: var(--display); font-size: clamp(24px, 2.4vw, 34px); margin: 7px 0 0; letter-spacing: -.04em; }
.guide-status { font-size: 12px; border: 1px solid var(--ink); padding: 7px 8px; }
.guide-close { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font: 600 12px/1 var(--body); }
.guide-log { min-height: 120px; margin: 28px 0 18px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-answer { margin: 0; font-size: 14px; line-height: 1.75; text-wrap: pretty; }
.guide-answer + .guide-answer { margin-top: 14px; }
.guide-question { color: var(--muted); }
.guide-prompts { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-prompts button, .filters button {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); cursor: pointer; font-size: 12px;
}
.guide-prompts button:hover, .guide-prompts button:focus-visible, .filters button:hover, .filters button.active { background: var(--ink); color: var(--paper); }
.guide-form { display: grid; grid-template-columns: 1fr auto; margin-top: 10px; border-bottom: 1px solid var(--ink); }
.guide-form input { min-width: 0; min-height: 48px; padding: 10px 0; border: 0; outline: 0; font-size: 14px; }
.guide-form button { min-width: 60px; border: 0; background: transparent; cursor: pointer; font-weight: 700; }
.guide-note { margin: 12px 0 0; color: #555; font-size: 12px; line-height: 1.5; }

.featured, .all-work, .about { padding: clamp(72px, 9vw, 150px) var(--gutter); }
.section-heading { display: grid; grid-template-columns: 1.45fr .55fr; gap: 48px; align-items: end; margin-bottom: clamp(38px, 6vw, 90px); }
.section-heading h2 { margin: 9px 0 0; font-family: var(--display); font-size: clamp(48px, 7vw, 108px); line-height: .9; letter-spacing: -.06em; }
.section-heading > p { max-width: 420px; margin: 0; font-size: 14px; line-height: 1.7; }
.section-heading.compact { margin-bottom: 28px; }
.section-heading.compact h2 { font-size: clamp(44px, 5vw, 76px); }

.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(72px, 7vw, 124px) 24px; align-items: start; }
.project-card { grid-column: span 6; text-decoration: none; display: block; min-width: 0; }
.project-card[data-layout="lead"] { grid-column: 1 / span 8; }
.project-card[data-layout="side"] { grid-column: 9 / span 4; margin-top: clamp(48px, 5vw, 84px); }
.project-card[data-layout="half-left"] { grid-column: 1 / span 6; }
.project-card[data-layout="half-right"] { grid-column: 7 / span 6; margin-top: clamp(24px, 3vw, 52px); }
.project-card[data-layout="compact"] { grid-column: 1 / span 5; margin-top: clamp(12px, 1.5vw, 24px); }
.project-card[data-layout="wide-right"] { grid-column: 6 / span 7; margin-top: clamp(18px, 2vw, 32px); }
.project-card[data-layout="wide-left"] { grid-column: 1 / span 7; margin-top: clamp(6px, 1vw, 16px); }
.project-card[data-layout="square-side"] { grid-column: 9 / span 4; margin-top: clamp(56px, 6vw, 96px); }
.project-card[data-layout="center-wide"] { grid-column: 3 / span 8; }
.project-card[data-layout="full"] { grid-column: 1 / -1; }
.featured-mosaic {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.featured-mosaic-column { display: flex; min-width: 0; flex-direction: column; gap: clamp(72px, 7vw, 124px); }
.featured-mosaic-column.is-left { grid-column: 1 / span 6; }
.featured-mosaic-column.is-right { grid-column: 7 / span 6; padding-top: clamp(24px, 3vw, 52px); }
.featured-mosaic .project-card,
.featured-mosaic .project-card[data-layout] { width: 100%; margin-top: 0; }
.project-media { aspect-ratio: var(--ratio, 16 / 10); position: relative; overflow: hidden; background: var(--project-color, #e9e9e6); }
.featured .project-media {
  box-shadow: var(--shadow-cover);
  transform: translateZ(0);
  transition: box-shadow .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1);
}
.featured .project-card:hover .project-media {
  box-shadow: var(--shadow-cover-hover);
  transform: translate3d(0,-3px,0);
}
.project-media img {
  width: 100%; height: 100%; display: block;
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
}
.project-card:hover .project-media img { transform: none; }
.project-media::before {
  content: attr(data-media); position: absolute; inset: 14px; display: grid; place-items: center;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font: 500 12px/1.4 var(--body); letter-spacing: .015em; text-align: center;
}

.project-layer { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); }
.project-layer[hidden] { display: none; }
.project-detail-header { --detail-header-height: 72px; position: sticky; top: 0; z-index: 4; min-height: 72px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--ink); backdrop-filter: blur(12px); overflow: visible; will-change: transform; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.project-layer.detail-header-retracted .project-detail-header { transform: translate3d(0,-101%,0); }
.project-detail-back {
  min-height: 44px; padding: 0; display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid transparent; border-radius: 0; background: transparent; color: inherit;
  cursor: pointer; font: 650 13px/1 var(--body); white-space: nowrap; will-change: transform;
  transition: transform .5s cubic-bezier(.16,1,.3,1), min-height .45s cubic-bezier(.16,1,.3,1), padding .45s cubic-bezier(.16,1,.3,1), border-color .28s ease, border-radius .45s cubic-bezier(.16,1,.3,1), background-color .28s ease, box-shadow .36s ease;
}
.project-layer.detail-header-retracted .project-detail-back {
  min-height: 42px;
  padding: 0 16px;
  transform: translate3d(calc(var(--floating-edge) - var(--gutter)),var(--detail-header-height),0);
  border-color: var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-float);
}
.project-layer.detail-header-retracted .project-detail-back:hover,
.project-layer.detail-header-retracted .project-detail-back:focus-visible {
  transform: translate3d(calc(var(--floating-edge) - var(--gutter)),calc(var(--detail-header-height) - 3px),0);
  box-shadow: var(--shadow-float-hover);
}
.project-layer.detail-header-retracted .project-detail-back:active {
  transform: translate3d(calc(var(--floating-edge) - var(--gutter)),calc(var(--detail-header-height) - 1px),0) scale(.98);
}
.project-rail { position: fixed; left: 12px; top: 50%; z-index: 6; width: 34px; height: min(58vh, 580px); transform: translateY(-50%); overflow: visible; }
.project-rail-track {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;
  opacity: 1; transform: translate3d(0,0,0) scaleY(1); transform-origin: left center;
  transition:
    opacity .16s ease .38s,
    transform .28s cubic-bezier(.16,1,.3,1) .32s;
}
.project-rail-track::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: #aaa; }
.project-rail-item { position: relative; z-index: 1; width: 30px; min-height: 8px; padding: 0; display: flex; align-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.project-rail-tick { display: block; width: 9px; height: 1px; background: #777; transform-origin: left center; transition: width .25s cubic-bezier(.16,1,.3,1), height .25s ease, background-color .25s ease; }
.project-rail-item:hover .project-rail-tick, .project-rail-item:focus-visible .project-rail-tick { width: 20px; background: var(--ink); }
.project-rail-item.is-active .project-rail-tick { width: 28px; height: 2px; background: var(--ink); }
.project-rail-directory {
  position: absolute; left: -1px; top: 50%; width: clamp(300px, 30vw, 420px); max-height: min(72vh, 720px);
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
  border: 1px solid rgba(9,9,9,.78); border-radius: 18px; background: rgba(255,255,255,.97);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); filter: var(--shadow-panel-filter); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; pointer-events: none;
  clip-path: inset(0 calc(100% - 12px) 0 0 round 18px);
  transform: translate3d(0,-50%,0) scaleX(.985); transform-origin: left center;
  transition:
    opacity .14s ease .34s,
    visibility 0s linear .54s,
    clip-path .48s cubic-bezier(.55,0,.45,1),
    transform .48s cubic-bezier(.55,0,.45,1);
}
.project-rail:hover .project-rail-track,
.project-rail:focus-within .project-rail-track,
.project-rail.is-directory-open .project-rail-track {
  opacity: 0; pointer-events: none; transform: translate3d(-14px,0,0) scaleY(.72);
  transition: opacity .13s ease, transform .25s cubic-bezier(.55,0,1,.45);
}
.project-rail:hover .project-rail-directory,
.project-rail:focus-within .project-rail-directory,
.project-rail.is-directory-open .project-rail-directory {
  opacity: 1; visibility: visible; pointer-events: auto;
  clip-path: inset(0 0 0 0 round 18px); transform: translate3d(0,-50%,0) scaleX(1);
  transition:
    opacity .16s ease .08s,
    visibility 0s linear 0s,
    clip-path .46s cubic-bezier(.16,1,.3,1) .07s,
    transform .46s cubic-bezier(.16,1,.3,1) .07s;
}
.project-directory-header {
  min-height: 54px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96);
}
.project-directory-header p { margin: 0; font: 700 13px/1 var(--body); }
.project-directory-header span { color: var(--muted); font: 600 10px/1 var(--body); }
.project-directory-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #aaa transparent; }
.project-directory-item {
  width: 100%; min-height: 48px; padding: 9px 14px 9px 16px; display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 16px; align-items: center; border: 0; border-bottom: 1px solid var(--line); color: rgba(9,9,9,.68);
  background: transparent; text-align: left; cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.project-directory-item:last-child { border-bottom: 0; }
.project-directory-item:hover, .project-directory-item:focus-visible { color: var(--ink); background: var(--soft); outline: none; }
.project-directory-item.is-active { color: #fff; background: var(--ink); }
.project-directory-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px/1.35 var(--body); }
.project-directory-year { color: inherit; opacity: .62; font: 600 10px/1 var(--body); white-space: nowrap; }
.project-detail-intro { padding: clamp(54px, 8vw, 128px) var(--gutter) clamp(48px, 7vw, 104px); display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: var(--gap); border-bottom: 1px solid var(--ink); }
.project-detail-kicker { grid-column: 1 / -1; margin: 0 0 clamp(28px,4vw,64px); color: var(--muted); font: 600 11px/1.4 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.project-detail-intro h1 { grid-column: 1 / -1; margin: 0; max-width: 17em; display: block; font-family: var(--display); font-size: clamp(38px,4.5vw,76px); line-height: .98; letter-spacing: -.045em; overflow-wrap: normal; word-break: normal; }
.project-detail-subtitle { grid-column: 1 / span 8; margin: 18px 0 0; color: var(--muted); font: 500 clamp(16px,1.4vw,22px)/1.35 var(--body); }
.project-detail-meta { grid-column: 9 / -1; align-self: end; margin: 0; border-top: 1px solid var(--ink); }
.project-detail-meta > div { padding: 13px 0; display: grid; grid-template-columns: 78px 1fr; gap: 12px; border-bottom: 1px solid #cfcfcb; }
.project-detail-meta dt { color: var(--muted); font: 500 11px/1.5 var(--body); }
.project-detail-meta dd { margin: 0; font: 600 13px/1.5 var(--body); }
.project-detail-live-row a {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
  color: var(--ink); text-decoration: none;
}
.project-detail-live-row a span { font-size: 14px; transition: transform .18s ease; }
.project-detail-live-row a:hover span, .project-detail-live-row a:focus-visible span { transform: translate(2px,-2px); }
.project-detail-description { grid-column: 1 / span 7; margin: clamp(44px,7vw,92px) 0 0; max-width: 42em; font: 500 clamp(17px,1.5vw,23px)/1.75 var(--body); }
.project-detail-source-note { grid-column: 9 / -1; align-self: end; margin: 44px 0 0; color: var(--muted); font: 500 11px/1.65 var(--body); }
.project-media-sequence { padding: var(--gutter); display: grid; gap: max(1px,.55vw); background: #e7e7e4; }
.project-video { margin: 0; overflow: hidden; background: #090909; color: #fff; container-type: inline-size; }
.project-video-frame { position: relative; aspect-ratio: var(--project-video-ratio, 16 / 9); overflow: hidden; background: #090909; }
.project-video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #090909; }
.project-video-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: auto minmax(90px,1fr) auto auto; align-items: center; gap: clamp(12px,1.25vw,22px);
  min-height: 68px; padding: 24px clamp(16px,2.2vw,30px) 14px;
  background: linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent);
  color: #fff;
}
@media (min-width: 900px) {
  .project-video-frame:not(.is-fullscreen) .project-video-controls { padding-left: clamp(58px,5.2vw,66px); padding-right: clamp(58px,5.2vw,66px); }
}
.project-video-control {
  position: relative; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit;
  opacity: .76; transition: opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.project-video-control:hover, .project-video-control:focus-visible { opacity: 1; }
.project-video-control:active { transform: scale(.86); }
.project-video-play::before,
.project-video-play::after,
.project-video-mute::before,
.project-video-mute::after,
.project-video-fullscreen::before {
  content: ""; position: absolute; left: 50%; top: 50%; transition: opacity .16s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.project-video-play::before {
  margin: -9px 0 0 -5px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid currentColor;
}
.project-video-play::after {
  width: 16px; height: 20px; margin: -10px 0 0 -8px;
  background: linear-gradient(to right,currentColor 0 5px,transparent 5px 11px,currentColor 11px 16px);
  opacity: 0; transform: scale(.62);
}
.project-video-play[data-state="pause"]::before { opacity: 0; transform: scale(.62); }
.project-video-play[data-state="pause"]::after { opacity: 1; transform: scale(1); }
.project-video-mute::before {
  width: 23px; height: 23px; margin: -11.5px 0 0 -13px; background: currentColor;
  clip-path: polygon(0 35%,34% 35%,72% 5%,72% 95%,34% 65%,0 65%);
}
.project-video-mute::after {
  width: 11px; height: 18px; margin: -9px 0 0 3px; border-right: 2px solid currentColor; border-radius: 50%;
}
.project-video-mute[data-state="muted"]::after {
  width: 24px; height: 2px; margin: -1px 0 0 -12px; border: 0; border-radius: 0; background: currentColor; transform: rotate(-45deg);
}
.project-video-fullscreen::before {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  background:
    linear-gradient(currentColor,currentColor) left top / 10px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left top / 2px 10px no-repeat,
    linear-gradient(currentColor,currentColor) right top / 10px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right top / 2px 10px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom / 10px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom / 2px 10px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom / 10px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom / 2px 10px no-repeat;
}
.project-video-fullscreen[data-state="exit"]::before { transform: scale(.72) rotate(180deg); }
.project-video-time { min-width: 94px; color: rgba(255,255,255,.78); font: 600 11px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.project-video-progress {
  --video-progress: 0%;
  width: 100%; height: 18px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent;
}
.project-video-progress::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right,#fff var(--video-progress),rgba(255,255,255,.34) var(--video-progress)); }
.project-video-progress::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; appearance: none; -webkit-appearance: none; border: 1px solid #fff; border-radius: 50%; background: #090909; }
.project-video-progress::-moz-range-track { height: 2px; background: rgba(255,255,255,.34); }
.project-video-progress::-moz-range-progress { height: 2px; background: #fff; }
.project-video-progress::-moz-range-thumb { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #090909; }
.project-video-control:focus-visible, .project-video-progress:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.project-video-frame:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }
.project-video-frame:fullscreen::backdrop { background: #000; }
.project-video-frame:fullscreen video { width: 100%; height: 100%; }
.project-video-frame:fullscreen .site-cursor { z-index: 10000; }
.project-video-frame:fullscreen .marquee-drag-tooltip { z-index: 10001; }
.project-spread { margin: 0; overflow: hidden; background: #fff; }
.project-spread img { display: block; width: 100%; height: auto; }
.project-media-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: max(1px,.55vw); }
@container (max-width: 520px) {
  .project-video-frame:not(.is-fullscreen) .project-video-controls { grid-template-columns: auto minmax(48px,1fr) auto auto; gap: 6px; min-height: 56px; padding: 18px 10px 8px; }
  .project-video-time { min-width: 70px; font-size: 9px; }
}
.project-detail-next { padding: clamp(72px,11vw,180px) var(--gutter); border-top: 1px solid var(--ink); }
.project-detail-next button { width: 100%; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--ink); background: none; color: inherit; text-align: left; cursor: pointer; font-family: var(--display); font-size: clamp(25px,3vw,50px); line-height: 1.08; letter-spacing: -.035em; }
.project-info { padding-top: 13px; margin-top: 10px; }
.project-title { margin: 0; font-family: var(--display); font-size: clamp(24px, 2.4vw, 40px); line-height: 1; letter-spacing: -.035em; }
.project-en { margin: 6px 0 0; color: var(--muted); font: 500 12px/1.4 var(--body); text-transform: uppercase; }
html[lang="zh-CN"] .project-en { display: none; }
.project-meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: #555; font-size: 12px; }

.all-work { border-top: 1px solid var(--ink); background: var(--paper); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 32px; border-top: 1px solid var(--ink); }
.filters button {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 42px; padding: 8px 12px;
  border-radius: 999px; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.filters button:not([data-filter-key="all"])::before { content: "+"; font: 500 14px/1 var(--body); }
.filters button.active:not([data-filter-key="all"])::before { content: "✓"; }
.filters button:hover, .filters button:focus-visible { transform: translateY(-2px); }
.filter-count {
  min-width: 20px; padding-left: 8px; border-left: 1px solid currentColor;
  color: var(--muted); font: 600 10px/1.2 var(--body); text-align: right;
}
.filters button.active .filter-count { color: currentColor; }
.filter-empty {
  margin: 0; padding: 52px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 14px; line-height: 1.6;
}
.work-row {
  min-height: 88px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(220px, .85fr) 120px;
  align-items: center; gap: 20px; border-top: 1px solid var(--line); text-decoration: none;
}
.work-row:last-child { border-bottom: 1px solid var(--line); }
.work-row:hover { background: var(--soft); }
.work-year, .work-tags { font: 500 11px/1.55 var(--body); }
.work-name {
  color: rgba(9,9,9,.62);
  font-family: var(--display); font-size: clamp(21px, 2vw, 31px); font-weight: 800; letter-spacing: -.03em;
  transition: color .24s ease;
}
.work-row:hover .work-name,
.work-row:focus-visible .work-name { color: rgba(9,9,9,1); }
.work-tags { color: var(--muted); }

.about { border-top: 1px solid var(--ink); }
.about-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(48px, 7vw, 112px); margin-top: 0; }
.about h2 { margin: 0; max-width: 1000px; font-family: var(--display); font-size: clamp(42px, 4.4vw, 68px); line-height: .95; letter-spacing: -.05em; }
.contact-list { align-self: end; margin: 0; border-top: 1px solid var(--ink); }
.contact-row { min-height: 58px; display: grid; grid-template-columns: minmax(88px,.32fr) 1fr; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }
.contact-row dt { color: var(--muted); font-size: 11px; }
.contact-row dd { min-width: 0; margin: 0; font-size: clamp(14px, 1vw, 16px); overflow-wrap: anywhere; }
.contact-row a { color: inherit; text-decoration: none; }
.contact-row a:hover, .contact-row a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.field-layer {
  position: fixed; inset: 0; z-index: 150; color: #fff; background: transparent;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; isolation: isolate;
}
.field-layer[hidden] { display: none; }
.field-layer.is-static { background: #070707; }
.field-layer.is-static .field-close,
.field-layer.is-static .field-copy,
.field-layer.is-static .field-skills { opacity: 1; }
.field-layer.entering { animation: fieldInvasion 3.35s linear both; }
.field-layer.reversing .field-close { pointer-events: none; }
.field-invasion {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  filter: url(#field-goo); pointer-events: none; contain: paint;
}
.field-invasion-blob {
  position: absolute; display: block; right: -8vmax; top: -8vmax;
  background: #070707; opacity: 0; transform-origin: 50% 50%;
  will-change: transform, opacity, border-radius;
}
.field-invasion-core {
  right: -120vmax; top: -120vmax; width: 240vmax; height: 240vmax;
  border-radius: 52% 48% 58% 42% / 46% 55% 45% 54%;
}
.field-invasion-tendril { width: 27vmax; height: 22vmax; border-radius: 61% 39% 54% 46% / 48% 62% 38% 52%; }
.field-invasion-tendril-a { width: 31vmax; height: 23vmax; }
.field-invasion-tendril-b { width: 24vmax; height: 29vmax; }
.field-invasion-lobe { width: 20vmax; height: 18vmax; border-radius: 57% 43% 38% 62% / 61% 46% 54% 39%; }
.field-invasion-lobe-a { width: 25vmax; height: 20vmax; }
.field-invasion-lobe-b { width: 22vmax; height: 25vmax; }
.field-invasion-lobe-c { width: 17vmax; height: 15vmax; }
.field-invasion-drop { width: 8vmax; height: 8vmax; border-radius: 55% 45% 58% 42% / 47% 57% 43% 53%; }
.field-invasion-drop-b { width: 5.5vmax; height: 5.5vmax; }
.field-layer.entering .field-invasion-core { animation: fieldVenomCore 3.35s cubic-bezier(.4,0,.18,1) both; }
.field-layer.entering .field-invasion-tendril-a { animation: fieldVenomTendrilA 3.05s .12s cubic-bezier(.4,0,.2,1) both; }
.field-layer.entering .field-invasion-tendril-b { animation: fieldVenomTendrilB 3.08s .16s cubic-bezier(.4,0,.2,1) both; }
.field-layer.entering .field-invasion-lobe-a { animation: fieldVenomLobeA 2.82s .28s cubic-bezier(.42,0,.2,1) both; }
.field-layer.entering .field-invasion-lobe-b { animation: fieldVenomLobeB 2.9s .34s cubic-bezier(.42,0,.2,1) both; }
.field-layer.entering .field-invasion-lobe-c { animation: fieldVenomLobeC 2.68s .46s cubic-bezier(.42,0,.2,1) both; }
.field-layer.entering .field-invasion-drop-a { animation: fieldVenomDropA 2.46s .52s cubic-bezier(.42,0,.2,1) both; }
.field-layer.entering .field-invasion-drop-b { animation: fieldVenomDropB 2.32s .64s cubic-bezier(.42,0,.2,1) both; }
.field-layer.entering .field-close,
.field-layer.entering .field-copy,
.field-layer.entering .field-skills { animation: fieldContentArrive .68s 2.92s cubic-bezier(.16,1,.3,1) both; }
@keyframes fieldInvasion {
  from { transform: translateZ(0); }
  to { transform: translateZ(0); }
}
@keyframes fieldVenomCore {
  0% { opacity: 1; transform: scale(.014); border-radius: 58% 42% 63% 37% / 45% 58% 42% 55%; }
  12% { transform: scale(.055); border-radius: 48% 52% 43% 57% / 59% 39% 61% 41%; }
  30% { transform: scale(.18); border-radius: 61% 39% 54% 46% / 42% 63% 37% 58%; }
  50% { transform: scale(.39); border-radius: 46% 54% 62% 38% / 57% 41% 59% 43%; }
  70% { transform: scale(.66); border-radius: 59% 41% 45% 55% / 43% 60% 40% 57%; }
  86% { transform: scale(.94); border-radius: 49% 51% 57% 43% / 55% 47% 53% 45%; }
  100% { opacity: 1; transform: scale(1.3); border-radius: 50%; }
}
@keyframes fieldVenomTendrilA { 0% { opacity: 0; transform: translate3d(2vmax,-2vmax,0) scale(.08) rotate(-8deg); } 20% { opacity: 1; } 48% { transform: translate3d(-14vmax,6vmax,0) scale(.82,.66) rotate(-12deg); } 72% { transform: translate3d(-32vmax,18vmax,0) scale(1.24,1.08) rotate(-7deg); } 100% { opacity: 1; transform: translate3d(-54vmax,33vmax,0) scale(1.7,1.46) rotate(-2deg); } }
@keyframes fieldVenomTendrilB { 0% { opacity: 0; transform: translate3d(1vmax,-1vmax,0) scale(.07) rotate(7deg); } 22% { opacity: 1; } 50% { transform: translate3d(-5vmax,15vmax,0) scale(.78,.9) rotate(9deg); } 74% { transform: translate3d(-14vmax,34vmax,0) scale(1.16,1.28) rotate(5deg); } 100% { opacity: 1; transform: translate3d(-28vmax,56vmax,0) scale(1.55,1.72) rotate(1deg); } }
@keyframes fieldVenomLobeA { 0% { opacity: 0; transform: translate3d(1vmax,-1vmax,0) scale(.06) rotate(9deg); } 25% { opacity: 1; } 54% { transform: translate3d(-20vmax,2vmax,0) scale(.88,.76) rotate(-7deg); } 78% { transform: translate3d(-42vmax,5vmax,0) scale(1.22,1.08) rotate(-3deg); } 100% { opacity: 1; transform: translate3d(-70vmax,10vmax,0) scale(1.52,1.38) rotate(0); } }
@keyframes fieldVenomLobeB { 0% { opacity: 0; transform: translate3d(1vmax,-1vmax,0) scale(.06) rotate(-6deg); } 26% { opacity: 1; } 55% { transform: translate3d(-12vmax,18vmax,0) scale(.84,.92) rotate(8deg); } 80% { transform: translate3d(-30vmax,40vmax,0) scale(1.2,1.3) rotate(4deg); } 100% { opacity: 1; transform: translate3d(-52vmax,64vmax,0) scale(1.48,1.62) rotate(0); } }
@keyframes fieldVenomLobeC { 0% { opacity: 0; transform: translate3d(1vmax,-1vmax,0) scale(.05); } 30% { opacity: 1; } 58% { transform: translate3d(-20vmax,12vmax,0) scale(.78,.72) rotate(-5deg); } 82% { transform: translate3d(-44vmax,28vmax,0) scale(1.08,1.02) rotate(-2deg); } 100% { opacity: 1; transform: translate3d(-68vmax,46vmax,0) scale(1.4,1.32) rotate(0); } }
@keyframes fieldVenomDropA { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.04); } 35% { opacity: 0; } 47% { opacity: 1; transform: translate3d(-14vmax,10vmax,0) scale(.72); } 74% { transform: translate3d(-34vmax,25vmax,0) scale(1.05); } 100% { opacity: 1; transform: translate3d(-58vmax,44vmax,0) scale(1.34); } }
@keyframes fieldVenomDropB { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.04); } 40% { opacity: 0; } 52% { opacity: 1; transform: translate3d(-24vmax,7vmax,0) scale(.76); } 78% { transform: translate3d(-50vmax,20vmax,0) scale(1.04); } 100% { opacity: 1; transform: translate3d(-76vmax,36vmax,0) scale(1.28); } }
@keyframes fieldContentArrive {
  from { opacity: 0; transform: translate3d(18px,-10px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
.field-close { position: fixed; right: var(--gutter); top: 22px; z-index: 4; min-height: 44px; color: #fff; background: transparent; border: 0; cursor: pointer; font: 10px/1 var(--mono); opacity: 0; }
.field-build { position: relative; z-index: 2; min-height: 100svh; padding: clamp(92px,11vh,132px) var(--gutter) clamp(42px,7vh,76px); display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); gap: clamp(54px,8vw,150px); align-items: end; }
.field-copy, .field-skills { opacity: 0; }
.field-copy { max-width: 760px; }
.field-status { margin: clamp(42px,8vh,90px) 0 0; color: #7d7d7d; font: 600 10px/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.field-copy h2 { margin: 20px 0 28px; font-family: var(--display); font-size: clamp(64px,8.2vw,144px); line-height: .79; letter-spacing: -.075em; text-wrap: balance; }
.field-description { max-width: 590px; margin: 0; color: #bcbcbc; font-size: clamp(14px,1.05vw,17px); line-height: 1.72; text-wrap: pretty; }
.field-await { margin: 24px 0 0; color: #fff; font: 650 14px/1.3 var(--body); letter-spacing: .02em; }
.field-skills { align-self: end; border-top: 1px solid rgba(255,255,255,.72); }
.field-skills h3 { margin: 0; padding: 13px 0 30px; color: #8d8d8d; font: 600 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.field-skill-row { display: grid; grid-template-columns: minmax(118px,.38fr) 1fr; gap: 20px; padding: 17px 0 20px; border-top: 1px solid rgba(255,255,255,.2); }
.field-skill-row h4 { margin: 0; color: #fff; font: 650 12px/1.45 var(--body); }
.field-skill-row p { margin: 0; color: #a5a5a5; font: 500 11px/1.65 var(--body); text-wrap: pretty; }

/* Custom cursor: only enabled after JS confirms a precise pointer. */
.site-cursor {
  --cursor-scale: 1;
  position: fixed;
  left: -100px;
  top: -100px;
  z-index: 10000;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border: 0 solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--cursor-scale));
  transition: width .24s cubic-bezier(.16,1,.3,1), height .24s cubic-bezier(.16,1,.3,1), border-width .2s ease, background-color .2s ease, opacity .12s ease, transform .12s ease;
  will-change: left, top, width, height, transform;
}

.site-cursor.is-visible { opacity: 1; }
.site-cursor.is-pressed { --cursor-scale: .82; }
.site-cursor.is-clickable {
  width: 34px;
  height: 34px;
  border-width: 1.5px;
  background: transparent;
}
.site-cursor.is-scrub {
  width: 32px;
  height: 32px;
  border-width: 1.5px;
  background: transparent;
}
.site-cursor.is-video {
  width: 96px;
  height: 96px;
  border-width: 0;
  background: #fff;
  mix-blend-mode: normal;
}
.site-cursor.is-video .site-cursor-label {
  position: relative;
  width: 32px;
  height: 32px;
  opacity: 1;
  transform: translateY(0);
}
.site-cursor.is-video .site-cursor-label::before,
.site-cursor.is-video .site-cursor-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transition: opacity .18s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.site-cursor.is-video .site-cursor-label::before {
  margin: -13px 0 0 -7px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid #000;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.site-cursor.is-video .site-cursor-label::after {
  width: 24px;
  height: 28px;
  margin: -14px 0 0 -12px;
  background: linear-gradient(to right,#000 0 7px,transparent 7px 17px,#000 17px 24px);
  opacity: 0;
  transform: scale(.58) rotate(8deg);
}
.site-cursor.is-video-playing .site-cursor-label::before {
  opacity: 0;
  transform: scale(.58) rotate(-8deg);
}
.site-cursor.is-video-playing .site-cursor-label::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.site-cursor.is-marquee {
  width: 36px;
  height: 36px;
  border-width: 1.5px;
  background: transparent;
  animation: marqueeCursorArrive .42s cubic-bezier(.16,1,.3,1) both;
}
.site-cursor.is-ai-context {
  width: 42px;
  height: 42px;
  border-width: 1.5px;
  background: transparent;
}
.site-cursor.is-field-context {
  width: 46px;
  height: 46px;
  border-width: 1.5px;
  background: transparent;
}
.site-cursor.is-disabled-context {
  width: 24px;
  height: 24px;
  border-width: 1px;
  background: transparent;
  opacity: .55;
}
@keyframes marqueeCursorArrive {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); }
  58% { box-shadow: 0 0 0 7px rgba(255,255,255,.18); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.site-cursor.is-action {
  width: 60px;
  height: 60px;
  border-width: 0;
  background: #fff;
}
.site-cursor-label {
  font: 10px/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .15s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.site-cursor.is-action .site-cursor-label,
.site-cursor.is-ai-context .site-cursor-label,
.site-cursor.is-field-context .site-cursor-label { opacity: 1; transform: translateY(0); }
.site-cursor.is-field-context .site-cursor-label { font-size: 8px; letter-spacing: .04em; }

.marquee-drag-tooltip {
  --tooltip-shift-x: -12px;
  --tooltip-shift-y: -8px;
  position: fixed; left: -400px; top: -400px; z-index: 10001;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  color: var(--ink); pointer-events: none; white-space: nowrap;
  opacity: 0;
  transition: opacity .12s ease;
  will-change: left, top, transform;
}
.marquee-drag-tooltip:not(.has-secondary):not(.has-tags) { gap: 0; }
.marquee-drag-tooltip[data-mode="ai"] .marquee-tooltip-card,
.marquee-drag-tooltip[data-mode="field"] .marquee-tooltip-card { border-radius: 13px; }
.marquee-drag-tooltip.opens-left {
  --tooltip-shift-x: 12px;
  align-items: flex-end;
}
.marquee-drag-tooltip.opens-above { --tooltip-shift-y: 8px; }
.marquee-tooltip-card {
  --enter-delay: 0ms;
  --exit-delay: 0ms;
  display: block;
  padding: 10px 13px;
  border: 1px solid rgba(0,0,0,.72);
  border-radius: 10px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-tooltip);
  opacity: 0;
  transform: translate3d(var(--tooltip-shift-x), var(--tooltip-shift-y), 0) scale(.78);
  transform-origin: left top;
  transition:
    opacity .16s ease,
    transform .34s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--exit-delay);
}
.marquee-tooltip-card[hidden] { display: none !important; }
.marquee-drag-tooltip.opens-left .marquee-tooltip-card { transform-origin: right top; }
.marquee-drag-tooltip.opens-above .marquee-tooltip-card { transform-origin: left bottom; }
.marquee-drag-tooltip.opens-left.opens-above .marquee-tooltip-card { transform-origin: right bottom; }
.marquee-tooltip-card.is-primary {
  font: 700 12px/1.15 var(--body);
  letter-spacing: .01em;
}
.marquee-tooltip-card.is-secondary {
  font: 560 11px/1.15 var(--body);
  color: rgba(0,0,0,.66);
}
.marquee-drag-tooltip.is-visible { opacity: 1; }
.marquee-drag-tooltip .is-primary { --enter-delay: 0ms; --exit-delay: 120ms; }
.marquee-drag-tooltip .is-secondary { --enter-delay: 60ms; --exit-delay: 60ms; }
.marquee-drag-tooltip.opens-above .is-primary { --enter-delay: 120ms; --exit-delay: 0ms; }
.marquee-drag-tooltip.opens-above .is-secondary { --enter-delay: 60ms; --exit-delay: 60ms; }
.marquee-drag-tooltip.is-visible .marquee-tooltip-card {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition-delay: var(--enter-delay);
}

.cursor-tag-list {
  --enter-delay: 120ms;
  --exit-delay: 0ms;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: max-content;
  max-width: min(340px, calc(100vw - 48px));
  white-space: normal;
  opacity: 0;
  transform: translate3d(var(--tooltip-shift-x), var(--tooltip-shift-y), 0) scale(.9);
  transform-origin: left top;
  transition: opacity .18s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--exit-delay);
}
.cursor-tag-list[hidden] { display: none !important; }
.cursor-tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px 5px;
  border: 1px solid rgba(9, 9, 9, .42);
  border-radius: 8px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-tooltip);
  color: rgba(9, 9, 9, .92);
  font: 600 10px/1.25 var(--body);
  letter-spacing: .01em;
  white-space: nowrap;
}
.marquee-drag-tooltip.opens-left .cursor-tag-list {
  justify-content: flex-end;
  transform-origin: right top;
}
.marquee-drag-tooltip.opens-above .cursor-tag-list { transform-origin: left bottom; }
.marquee-drag-tooltip.opens-left.opens-above .cursor-tag-list { transform-origin: right bottom; }
.marquee-drag-tooltip.opens-above .cursor-tag-list { --enter-delay: 0ms; --exit-delay: 120ms; }
.marquee-drag-tooltip.is-visible .cursor-tag-list {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: var(--enter-delay);
}

@media (hover: hover) and (pointer: fine) {
  html.cursor-ready, html.cursor-ready body, html.cursor-ready a, html.cursor-ready button { cursor: none !important; }
  html.cursor-ready .project-video-frame,
  html.cursor-ready .project-video-frame * { cursor: none !important; }
  html.cursor-ready .foyer-marquee-row,
  html.cursor-ready .foyer-marquee-row * { cursor: none !important; }
  html.cursor-ready .music-progress,
  html.cursor-ready .music-track-copy strong { cursor: none !important; }
  html.cursor-ready textarea,
  html.cursor-ready [contenteditable="true"],
  html.cursor-ready input:not([type]),
  html.cursor-ready input[type="text"],
  html.cursor-ready input[type="search"],
  html.cursor-ready input[type="email"],
  html.cursor-ready input[type="url"],
  html.cursor-ready input[type="tel"],
  html.cursor-ready input[type="password"],
  html.cursor-ready input[type="number"] { cursor: text !important; }
  html.cursor-ready .portfolio-guide-panel,
  html.cursor-ready .portfolio-guide-panel *,
  html.cursor-ready .portfolio-guide-panel input { cursor: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .marquee-drag-tooltip { display: none !important; }
}

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 34px; min-height: auto; }
  .hero h1 { font-size: clamp(38px, 6vw, 58px); }
  .hero-identity { margin-top: 64px; }
  .hero-intro { margin-top: 18px; }
  .hero-proof { grid-template-columns: 1fr 1fr; margin-top: 64px; }
  .project-card,
  .project-card[data-layout] { grid-column: span 6; padding-top: 0; }
  .project-card[data-layout="side"],
  .project-card[data-layout="half-right"],
  .project-card[data-layout="square-side"] { margin-top: 28px; }
  .featured-mosaic-column.is-right { padding-top: 28px; }
  .section-heading, .about-grid { grid-template-columns: 1fr 1fr; }
  .work-row { grid-template-columns: minmax(0, 1fr) 110px; padding: 14px 0; }
  .work-name { grid-column: 1; grid-row: 1; }
  .work-year { grid-column: 2; grid-row: 1; align-self: center; }
  .work-tags { display: block; grid-column: 1 / -1; grid-row: 2; margin-top: 5px; }
  .project-detail-intro h1 { grid-column: 1 / -1; }
  .project-detail-meta { grid-column: 8 / -1; }
  .project-detail-description { grid-column: 1 / span 7; }
  .project-detail-source-note { grid-column: 8 / -1; }
}

@media (max-width: 680px) {
  body.project-open {
    position: fixed;
    inset: var(--project-page-lock-top, 0px) 0 auto;
    width: 100%;
  }
  :root { --gutter: 18px; --floating-edge: 8px; }
  .profile-panel {
    left: 8px; bottom: 8px; width: 76px; height: 76px; border-radius: 38px;
  }
  .profile-overlay.is-open .profile-panel { width: calc(100vw - 16px); height: calc(100svh - 16px); border-radius: 17px; }
  .profile-rail { width: 76px; height: calc(100svh - 16px); padding: 16px 10px 12px; }
  .resume-pages { left: 76px; width: calc(100vw - 92px); height: calc(100svh - 16px); }
  .profile-heading { gap: 8px; }
  .profile-header h2 { font-size: 15px; letter-spacing: .08em; }
  .profile-heading span { font-size: 9px; letter-spacing: .04em; }
  .profile-close { width: 50px; height: 50px; margin-top: 12px; }
  .site-header { --site-header-height: 60px; min-height: 60px; }
  .language-toggle { top: 9px; right: 96px; z-index: 120; min-width: 66px; min-height: 40px; padding: 0 12px; }
  .music-island { top: 30px; width: 38px; height: 34px; }
  .music-island-toggle { height: 32px; padding: 0; display: grid; grid-template-columns: 1fr; place-items: center; }
  .music-island-compact, .music-island-chevron { display: none; }
  .music-island.is-open { top: 6px; width: calc(100vw - 24px); height: 168px; }
  .music-island.is-open .music-island-toggle { height: 38px; padding: 0 14px 0 17px; grid-template-columns: minmax(0,1fr) 0 16px; gap: 0 9px; place-items: initial; align-items: center; }
  .music-island.is-open .music-island-compact { display: flex; }
  .music-island.is-open .music-island-chevron { display: block; }
  .music-island-panel { inset: 44px 14px 12px; gap: 8px 12px; }
  .music-track-copy strong { font-size: 13px; }
  .music-controls { gap: 5px; }
  .music-controls button { width: 29px; height: 29px; }
  .project-detail-header { --detail-header-height: 60px; min-height: 60px; }
  .project-layer.detail-header-retracted .project-detail-back { min-height: 40px; padding: 0 13px; }
  .project-rail { left: 0; top: 60px; width: 100%; height: 34px; transform: none; overflow-x: auto; overflow-y: hidden; background: rgba(255,255,255,.94); border-bottom: 1px solid #ccc; scrollbar-width: none; }
  .project-layer.detail-header-retracted .project-rail { top: 0; }
  .project-rail::-webkit-scrollbar { display: none; }
  .project-rail-track { min-width: max-content; width: auto; padding: 0 14px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
  .project-rail-track::before { left: 14px; right: 14px; top: 16px; bottom: auto; width: auto; height: 1px; }
  .project-rail-item { width: 22px; height: 34px; flex: 0 0 22px; justify-content: center; }
  .project-rail-tick { width: 1px; height: 9px; transform-origin: center bottom; }
  .project-rail-item:hover .project-rail-tick, .project-rail-item:focus-visible .project-rail-tick { width: 1px; height: 17px; }
  .project-rail-item.is-active .project-rail-tick { width: 2px; height: 23px; }
  .project-rail-directory { display: none; }
  /* Phone portrait only: remove desktop-only field and project directory chrome. */
  .field-trigger, .project-rail { display: none; }
  .project-detail-intro { display: block; padding-top: 82px; }
  .project-detail-kicker { margin-bottom: 26px; }
  .project-detail-intro h1 { max-width: none; font-size: clamp(34px,9.5vw,48px); line-height: 1.04; letter-spacing: -.035em; }
  .project-detail-subtitle { margin-top: 12px; }
  .project-detail-meta { margin-top: 50px; }
  .project-detail-description { margin-top: 46px; font-size: 17px; line-height: 1.7; }
  .project-detail-source-note { margin-top: 28px; }
  .project-media-sequence { padding: 8px; gap: 8px; }
  .project-media-pair { grid-template-columns: 1fr; gap: 8px; }
  .wordmark-en, .nav-links > a { display: none; }
  .nav-links { gap: 12px; }
  .hero { min-height: auto; padding-top: 42px; grid-template-columns: 1fr; gap: 70px; }
  .hero h1 { margin-top: 18px; max-width: 12em; font-size: clamp(36px, 11vw, 48px); line-height: .98; }
  .hero-identity { margin-top: 52px; }
  .hero-identity p { font-size: 19px; }
  .hero-intro { margin: 18px 0 0; font-size: 16px; }
  .hero-proof { margin-top: 64px; }
  .hero-proof a { min-height: 68px; }
  .hero-meta { justify-content: space-between; gap: 12px; }
  .hero-side { margin-top: -18px; }
  .resume-float { left: 8px; bottom: 8px; width: 76px; height: 76px; padding: 11px; }
  .resume-float strong { left: 11px; bottom: 11px; font-size: 14px; }
  .resume-float-mark { right: 11px; top: 9px; }
  .portfolio-guide { right: 8px; bottom: 8px; width: 76px; height: 76px; }
  .portfolio-guide.is-open { width: calc(100vw - 24px); height: min(620px, calc(100svh - 24px)); border-radius: 20px; }
  .guide-open { padding: 11px; }
  .guide-open strong { left: 11px; bottom: 11px; font-size: 14px; }
  .guide-open-mark { right: 11px; top: 9px; }
  .portfolio-guide-panel { padding: 21px 18px calc(14px + env(safe-area-inset-bottom)); }
  .portfolio-guide-head h2 { font-size: 25px; }
  .portfolio-guide-log { min-height: 0; margin-top: 18px; }
  .portfolio-guide-actions { grid-template-columns: minmax(0, 1fr) 50px; gap: 8px; }
  .portfolio-guide-close { width: 50px; height: 50px; }
  .guide-panel { inset: auto 0 0; width: 100%; max-height: min(76svh, 680px); border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
  .guide-panel-inner { padding: 22px 18px calc(20px + env(safe-area-inset-bottom)); }
  .guide-log { min-height: 105px; }
  .featured, .all-work, .about { padding-top: 80px; padding-bottom: 80px; }
  .section-heading, .section-heading.compact { grid-template-columns: 1fr; gap: 22px; margin-bottom: 42px; }
  .section-heading h2 { font-size: 58px; }
  .section-heading > p { max-width: 100%; }
  .project-grid { display: block; }
  .featured-mosaic { display: block; }
  .featured-mosaic-column { display: block; }
  .featured-mosaic-column.is-right { padding-top: 0; }
  .featured-mosaic .project-card,
  .featured-mosaic .project-card[data-layout] { margin-bottom: 62px; }
  .project-card, .project-card[data-layout] { width: 100%; margin: 0 0 62px; padding-top: 0; }
  .project-info { grid-template-columns: 1fr 28px; }
  .project-title { font-size: 28px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: 0 0 auto; }
  .work-row { min-height: 82px; grid-template-columns: minmax(0, 1fr) 50px; gap: 10px; }
  .work-name { font-size: 21px; }
  .about-grid { grid-template-columns: 1fr; gap: 68px; }
  .about h2 { font-size: clamp(36px, 11vw, 48px); }
  .contact-row { min-height: 54px; grid-template-columns: 76px 1fr; gap: 12px; }
  .field-build { min-height: 100svh; padding-top: 92px; grid-template-columns: 1fr; gap: 56px; align-items: start; }
  .field-copy h2 { font-size: clamp(58px, 18vw, 96px); }
  .field-status { margin-top: 44px; }
  .field-skills { align-self: start; }
  .field-skill-row { grid-template-columns: 1fr; gap: 8px; }
  .foyer {
    min-height: calc(100svh - 60px); padding-top: 28px; padding-bottom: 86px;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 0; overflow: hidden;
  }
  .foyer-info { grid-column: auto; align-self: auto; width: 100%; padding-bottom: 0; }
  .foyer-marquee { top: -5%; height: 42%; gap: 14px; }
  .foyer-marquee-row:nth-child(4) { display: none; }
  .foyer-marquee-group { gap: 28px; padding-right: 28px; }
  .foyer-marquee-item { gap: 8px; }
  .foyer-marquee-item strong { font-size: clamp(16px, 5.2vw, 20px); }
  .foyer-marquee-year { font-size: 9px; }
  .foyer-portrait {
    position: absolute; z-index: 3; top: 12px; right: 0; margin: 0;
    width: min(43vw, 170px); height: min(36vh, 288px); transform: none;
  }
  .foyer-info h1 { font-size: clamp(38px, 11.5vw, 46px); }
  .foyer-role { margin-top: 26px; font-size: 15px; }
  .foyer-focus { margin-top: 12px; gap: 6px; }
  .foyer-focus span { min-height: 27px; padding: 4px 9px 5px; font-size: 10.5px; }
  .entry-scroll-hint { min-height: 52px; gap: 9px; font-size: 11px; }
  .entry-scroll-hint.is-return { bottom: 8px; width: 120px; min-height: 42px; padding: 0 12px; gap: 5px; }
  body.entry-mode .portfolio-guide.is-open { bottom: 8px; }
  .entry-scroll-icon { width: 18px; height: 25px; flex-basis: 18px; }
  .scroll-mouse { width: 15px; height: 24px; }
  .scroll-top-icon { width: 18px; height: 18px; }
}

@media (max-width: 680px) and (orientation: portrait) {
  .profile-rail {
    left: 0; bottom: 0;
    width: calc(100vw - 16px); height: 76px;
    display: block; padding: 0;
    border-right: 0; border-top: 1px solid transparent;
  }
  .profile-overlay.is-open .profile-rail {
    border-right-color: transparent; border-top-color: rgba(9,9,9,.86);
    box-shadow: 0 -10px 24px rgba(0,0,0,.035);
  }
  .profile-header {
    position: absolute; inset: 0;
    width: auto; min-height: 0;
    display: flex; align-items: center; justify-content: flex-start;
    padding: 0 14px 0 76px;
  }
  .profile-heading {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px;
  }
  .profile-header h2,
  .profile-heading span { writing-mode: horizontal-tb; text-orientation: mixed; }
  .profile-header h2 { font-size: 15px; line-height: 1.1; letter-spacing: .03em; }
  .profile-heading span { font-size: 9px; line-height: 1.25; letter-spacing: .03em; }
  .profile-close {
    position: absolute; left: 12px; top: 13px;
    width: 50px; height: 50px; margin: 0;
  }
  .resume-pages {
    left: 0; bottom: 76px;
    width: calc(100vw - 16px); height: calc(100svh - 92px);
  }
  .language-toggle { right: max(18px, env(safe-area-inset-right)); }
  /* On phone detail scroll, retract the global header with the detail header. */
  body.project-open:has(.project-layer.detail-header-retracted) .site-header {
    transform: translate3d(0, calc(-1 * var(--site-header-height) - 1px), 0);
  }
}

/* Conventional portrait phones: place the reduced portrait immediately below
   the marquee field, while keeping its right-edge anchor. */
@media (max-width: 480px) and (orientation: portrait) {
  .foyer-portrait {
    top: calc(37% + 4px);
    right: 14px;
    width: min(25vw, 100px);
    height: min(21vh, 168px);
  }
  .foyer-info h1 { font-size: clamp(34px, 9.8vw, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .foyer-marquee-track { transform: translateX(-8%); }
  .site-cursor { display: none !important; }
}
  .ai-screen { min-height: calc(100svh - 60px); padding: 34px 18px; }
  .ai-screen .guide-head h2 { font-size: 36px; }
  .ai-screen .guide-log { margin-top: 20px; }
  .ai-screen .guide-form { min-height: 60px; padding-left: 17px; grid-template-columns: 1fr 44px; }
  .ai-screen .guide-form button { width: 42px; height: 42px; min-width: 42px; }