: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));
  --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; }
html.entry-snapping { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.field-open, body.project-open, body.profile-open { overflow: hidden; }
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,
body.project-open .site-header .language-toggle { opacity: 0; pointer-events: none; }
body.project-open .site-header .field-trigger { transform: none; pointer-events: auto; }
.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;
  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);
}
.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 {
  min-height: 44px; margin-right: clamp(8px, 1vw, 16px); padding: 0; border: 0; background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: 600 12px/1 var(--body); letter-spacing: .025em;
}
.language-next { color: var(--muted); }
.language-toggle:hover .language-next, .language-toggle:focus-visible .language-next { color: var(--ink); }
.field-trigger {
  position: relative; width: 132px; height: 72px; margin-right: calc(var(--gutter) * -1); padding: 0;
  border: 0; background: transparent; color: var(--ink); overflow: visible;
  display: block; cursor: pointer;
  will-change: transform;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.site-header.is-retracted .field-trigger { transform: translate3d(0,var(--site-header-height),0); }
.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:hover .field-mark,
.field-trigger:focus-visible .field-mark { transform: scale(1.1) rotate(-3deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.12)); }
.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 {
  position: fixed; left: 50%; top: 36px; z-index: 130;
  width: 236px; height: 42px; transform: translate(-50%,-50%);
  color: #fff; background: #090909; border: 1px solid #090909; 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;
}
.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);
}
.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;
}
.music-island-bars { height: 16px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.music-island-bars i { display: block; width: 2px; height: 5px; border-radius: 2px; background: currentColor; opacity: .75; transform-origin: center; }
.music-island.is-playing .music-island-bars i { animation: music-pulse .72s ease-in-out infinite alternate; }
.music-island.is-playing .music-island-bars i:nth-child(2) { animation-delay: -.45s; }
.music-island.is-playing .music-island-bars i:nth-child(3) { animation-delay: -.2s; }
@keyframes music-pulse { from { transform: scaleY(.65); } to { transform: scaleY(2.35); } }
.music-island-compact { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.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: rgba(255,255,255,.62); 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-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: rgba(255,255,255,.48); 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: rgba(255,255,255,.62); font-size: 10px; }
.music-source { width: max-content; margin-top: 4px; color: rgba(255,255,255,.56); font-size: 9px; text-decoration: none; }
.music-source:hover, .music-source:focus-visible { color: #fff; }
.music-island.is-loading .music-island-bars i { animation: music-pulse .5s ease-in-out infinite alternate; }
.music-island.is-loading .music-island-bars i:nth-child(2) { animation-delay: -.28s; }
.music-island.is-loading .music-island-bars i:nth-child(3) { animation-delay: -.12s; }
.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 rgba(255,255,255,.34); border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }
.music-controls button:disabled { opacity: .28; cursor: default; }
.music-controls .music-play { background: #fff; color: #090909; border-color: #fff; }
.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: rgba(255,255,255,.28); }
.music-progress::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; margin-top: -3px; border-radius: 50%; background: #fff; }
.music-progress::-moz-range-track { height: 2px; background: rgba(255,255,255,.28); }
.music-progress::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; }
.music-progress:disabled { cursor: default; opacity: .45; }
.music-time { margin-top: -1px; display: flex; justify-content: space-between; color: rgba(255,255,255,.46); 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-decoration: none; text-wrap: pretty;
  transition: color .2s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.semantic-unit { display: inline-block; white-space: nowrap; }
.foyer-summary:hover, .foyer-summary:focus-visible { color: #000; transform: translateX(3px); }
.foyer-summary:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

.profile-overlay {
  position: fixed; inset: 0; z-index: 160;
  display: grid; place-items: center; padding: 18px;
  background: rgba(0,0,0,.22); backdrop-filter: blur(9px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.profile-overlay[hidden] { display: none; }
.profile-overlay.is-open { opacity: 1; pointer-events: auto; }
.profile-overlay.is-morphing .profile-panel {
  opacity: 1; transform: translateY(0) scale(1); transition: none;
  will-change: transform, opacity, border-radius, clip-path;
}
.profile-panel {
  width: min(1500px, calc(100vw - 36px)); max-height: calc(100svh - 36px);
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--ink); border-radius: 18px;
  background: rgba(255,255,255,.985); color: var(--ink);
  box-shadow: var(--shadow-overlay);
  opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .24s ease, transform .48s cubic-bezier(.16,1,.3,1);
}
.profile-overlay.is-open .profile-panel { opacity: 1; transform: translateY(0) scale(1); }
.profile-header {
  position: sticky; top: 0; z-index: 2;
  min-height: 70px; display: flex; justify-content: space-between; align-items: center; gap: 28px;
  padding: 10px 12px 10px clamp(18px, 2.2vw, 32px);
  border-bottom: 1px solid var(--ink);
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
}
.profile-heading { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.profile-header h2 { margin: 0; font: 750 clamp(17px, 1.35vw, 22px)/1.1 var(--body); letter-spacing: -.02em; }
.profile-heading span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.profile-close {
  position: fixed; left: 26px; bottom: 26px; z-index: 4;
  width: 64px; height: 64px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%;
  background: var(--ink); color: var(--paper); cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .24s ease;
}
.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 { display: grid; background: var(--paper); }
.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-row:not(.is-resuming):has(.foyer-marquee-item:hover) .foyer-marquee-track,
.foyer-marquee-row:not(.is-resuming):has(.foyer-marquee-item:focus-visible) .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); }
}

.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: scale(.82); pointer-events: 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);
}
.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 24px 82px; overflow: auto;
  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 { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portfolio-guide-head h2 { max-width: 300px; margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -.04em; }
.portfolio-guide-close {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  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: rotate(7deg) scale(1.06); }
.portfolio-guide-close span { font: 300 30px/1 var(--body); transform: translateY(-1px); }
.portfolio-guide-log { min-height: 150px; margin: 24px 0 16px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.portfolio-guide-form { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--ink); }
.portfolio-guide-form input { min-width: 0; min-height: 48px; padding: 10px 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
.portfolio-guide-form button { min-width: 60px; border: 0; background: transparent; cursor: pointer; font-weight: 700; }
.portfolio-guide-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.portfolio-guide-prompts button {
  min-height: 40px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--paper); cursor: pointer; font-size: 12px;
}
.portfolio-guide-prompts button:hover, .portfolio-guide-prompts button:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.portfolio-guide-note { margin: 14px 0 0; color: #555; font-size: 11px; line-height: 1.5; }
.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(32px, 5vw, 84px) 18px; }
.project-card { grid-column: span 6; text-decoration: none; display: block; min-width: 0; }
.project-card:nth-child(3n+1) { grid-column: span 7; }
.project-card:nth-child(3n+2) { grid-column: 9 / span 4; padding-top: 12vw; }
.project-card:nth-child(3n) { grid-column: 3 / span 8; }
.project-media { aspect-ratio: var(--ratio, 16 / 10); position: relative; overflow: hidden; background: var(--project-color, #e9e9e6); border: 1px solid #cfcfcb; }
.project-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.project-card:hover .project-media img { transform: scale(1.018); }
.project-view { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 8px 10px; background: #fff; border: 1px solid var(--ink); font: 600 11px/1 var(--body); opacity: 0; transform: translateY(5px); transition: opacity .25s ease, transform .25s ease; }
.project-card:hover .project-view, .project-card:focus-visible .project-view { opacity: 1; transform: translateY(0); }
.project-media::before {
  content: attr(data-media); position: absolute; inset: 14px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); color: color-mix(in srgb, var(--ink) 60%, transparent);
  font: 500 12px/1.4 var(--body); letter-spacing: .015em; text-align: center;
}
.project-media::after { content: ""; position: absolute; inset: auto 0 0; height: 0; background: var(--ink); transition: height .35s cubic-bezier(.16,1,.3,1); }
.project-card:hover .project-media::after { height: 5px; }

.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 / span 8; margin: 0; max-width: 15em; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .18em; row-gap: 0; font-family: var(--display); font-size: clamp(38px,4.5vw,76px); line-height: .98; letter-spacing: -.045em; overflow-wrap: normal; word-break: normal; }
.project-title-unit { display: inline-block; white-space: nowrap; }
.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-spread { margin: 0; overflow: hidden; background: #fff; }
.project-spread img { display: block; width: 100%; height: auto; }
.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; border-top: 1px solid var(--ink); 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: #070707;
  overflow: hidden; isolation: isolate; will-change: clip-path;
}
.field-layer[hidden] { display: none; }
.field-layer::before {
  content: ""; position: absolute; inset: -15%; z-index: 1; pointer-events: none; opacity: 0;
  background: repeating-radial-gradient(ellipse at 100% 0%, transparent 0 5.6vw, rgba(255,255,255,.075) 5.85vw 6vw, transparent 6.25vw 11.4vw);
  mix-blend-mode: screen; transform-origin: 100% 0;
}
.field-layer.entering { animation: fieldInvasion 2.2s cubic-bezier(.18,.68,.12,1) both; }
.field-layer.leaving { animation: fieldInvasion 1.08s cubic-bezier(.72,0,.86,.28) reverse both; }
.field-layer.entering::before { animation: fieldInvasionRipple 2.2s cubic-bezier(.18,.68,.12,1) both; }
.field-layer.leaving::before { animation: fieldInvasionRipple .9s ease-in reverse both; }
.field-layer.entering .field-close,
.field-layer.entering .field-copy,
.field-layer.entering .field-calibration,
.field-layer.entering .field-orbits { animation: fieldContentArrive .62s 1.42s cubic-bezier(.16,1,.3,1) both; }
.field-layer.leaving .field-close,
.field-layer.leaving .field-copy,
.field-layer.leaving .field-calibration,
.field-layer.leaving .field-orbits { animation: fieldContentLeave .22s ease both; }
@keyframes fieldInvasion {
  0% { clip-path: circle(0 at 100% 0); }
  12% { clip-path: circle(10vmax at 100% 0); }
  30% { clip-path: circle(32vmax at 100% 0); }
  52% { clip-path: circle(62vmax at 100% 0); }
  72% { clip-path: circle(92vmax at 100% 0); }
  88% { clip-path: circle(125vmax at 100% 0); }
  100% { clip-path: circle(155vmax at 100% 0); }
}
@keyframes fieldInvasionRipple {
  0% { opacity: 0; transform: scale(.18) rotate(-3deg); }
  18% { opacity: .9; }
  62% { opacity: .5; }
  100% { opacity: 0; transform: scale(1.35) rotate(1deg); }
}
@keyframes fieldContentArrive {
  from { opacity: 0; transform: translate3d(18px,-10px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes fieldContentLeave { to { opacity: 0; transform: translate3d(12px,-8px,0); } }
.field-close { position: absolute; right: var(--gutter); top: 22px; z-index: 3; min-height: 44px; color: #fff; background: transparent; border: 0; cursor: pointer; font: 10px/1 var(--mono); }
.field-copy { position: absolute; left: var(--gutter); bottom: clamp(34px, 7vw, 96px); z-index: 2; max-width: 720px; }
.field-copy h2 { margin: 18px 0 26px; font-family: var(--display); font-size: clamp(62px, 11vw, 180px); line-height: .75; letter-spacing: -.07em; }
.field-copy > p:not(.micro-label) { max-width: 560px; line-height: 1.7; color: #bcbcbc; }
.field-probe { min-height: 44px; margin-top: 16px; padding: 0; color: #fff; background: transparent; border: 0; border-bottom: 1px solid #fff; cursor: pointer; }
.field-calibration i { position: absolute; width: 42px; height: 42px; border-color: #fff; border-style: solid; opacity: .7; }
.field-calibration i:nth-child(1) { left: 24px; top: 24px; border-width: 1px 0 0 1px; }
.field-calibration i:nth-child(2) { right: 24px; top: 24px; border-width: 1px 1px 0 0; }
.field-calibration i:nth-child(3) { left: 24px; bottom: 24px; border-width: 0 0 1px 1px; }
.field-calibration i:nth-child(4) { right: 24px; bottom: 24px; border-width: 0 1px 1px 0; }
.field-orbits { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.field-orbits.shifted { transform: translate3d(-5vw, 4vh, 0) rotate(-2deg) scale(1.08); }
.orbit { position: absolute; display: grid; place-items: center; width: clamp(120px, 17vw, 290px); aspect-ratio: 1; border: 1px solid #4f4f4f; border-radius: 50%; color: #8f8f8f; font: 9px/1.4 var(--mono); }
.orbit-a { right: 16%; top: 8%; }
.orbit-b { right: -3%; top: 38%; }
.orbit-c { left: 42%; top: 34%; width: clamp(90px, 11vw, 180px); }
.orbit-d { right: 30%; bottom: -11%; width: clamp(150px, 23vw, 360px); }

/* 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-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;
}
.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 .foyer-marquee-row,
  html.cursor-ready .foyer-marquee-row * { cursor: none !important; }
  html.cursor-ready input, html.cursor-ready textarea, html.cursor-ready [contenteditable="true"] { cursor: text !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:nth-child(3n+1), .project-card:nth-child(3n+2), .project-card:nth-child(3n) { grid-column: span 6; padding-top: 0; }
  .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 / span 7; }
  .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) {
  :root { --gutter: 18px; --floating-edge: 8px; }
  .profile-overlay { padding: 8px; }
  .profile-panel { width: calc(100vw - 16px); max-height: calc(100svh - 16px); border-radius: 17px; }
  .profile-header { min-height: 62px; padding: 8px 9px 8px 16px; gap: 12px; }
  .profile-heading { display: grid; gap: 3px; }
  .profile-header h2 { font-size: 17px; }
  .profile-heading span { font-size: 10px; }
  .profile-close { left: 19px; bottom: 19px; width: 54px; height: 54px; }
  .site-header { --site-header-height: 60px; min-height: 60px; }
  .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; grid-template-columns: 22px minmax(0,1fr) 16px; 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; }
  .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-view { opacity: 1; transform: none; }
  .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(78px + env(safe-area-inset-bottom)); }
  .portfolio-guide-head h2 { font-size: 25px; }
  .portfolio-guide-log { min-height: 120px; margin-top: 18px; }
  .portfolio-guide-close { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); 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; }
  .project-card { margin-bottom: 62px; }
  .project-card:nth-child(even) { margin-left: 14vw; }
  .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-copy { right: var(--gutter); }
  .field-copy h2 { font-size: clamp(62px, 22vw, 96px); }
  .orbit-a { right: 4%; top: 10%; }
  .orbit-b { right: -23%; top: 30%; }
  .orbit-c { left: 10%; top: 29%; }
  .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 (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; }