:root {
  color-scheme: light;
  --glass-x: 50%;
  --glass-y: 50%;

  /* Color */
  --color-bg-base: #fdfcf9;
  --color-text-primary: #11182c;
  --color-text-display: #12182b;
  --color-text-secondary: #4f5e6e;
  --color-text-muted: #728092;
  --color-glass-fill: rgba(255, 255, 255, .54);
  --color-glass-border: rgba(255, 255, 255, .82);
  --color-glass-highlight: rgba(255, 255, 255, .96);
  --color-accent-blue: #456bca;
  --color-accent-mint: #dff8ef;
  --color-accent-sky: #dceeff;
  --color-accent-cream: #fff3cf;
  --color-accent-lavender: #eee7ff;
  --color-focus: #315cc9;

  /* Glass */
  --glass-blur-nav: 28px;
  --glass-blur-control: 20px;
  --glass-blur-media: 34px;
  --glass-saturation: 145%;
  --glass-border-alpha: .82;
  --glass-inner-highlight-alpha: .9;
  --glass-border-standard: rgba(255, 255, 255, .82);
  --glass-border-strong: rgba(255, 255, 255, .92);
  --glass-border-indicator: rgba(255, 255, 255, .62);
  --glass-border-thumbnail: rgba(255, 255, 255, .68);
  --glass-border-primary: rgba(110, 137, 167, .3);
  --glass-fill-nav: rgba(255, 255, 255, .5);
  --glass-fill-control: rgba(255, 255, 255, .55);
  --glass-fill-media: rgba(255, 255, 255, .36);
  --glass-fill-dark: linear-gradient(135deg, rgba(34, 49, 69, .94), rgba(58, 77, 98, .9));
  --glass-fill-indicator: linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(235, 246, 255, .36));
  --glass-reflection: linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .04) 48%, rgba(199, 226, 255, .12));
  --glass-reflection-dark: linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 50%, rgba(127, 176, 224, .12));
  --glass-inset-base: inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-inset-nav: inset 0 1px 0 rgba(255, 255, 255, .98);
  --glass-inset-control: inset 0 1px 0 rgba(255, 255, 255, .94);
  --glass-inset-media: inset 0 1px 0 rgba(255, 255, 255, .98);
  --glass-inner-edge: inset 0 -1px 0 rgba(139, 170, 201, .1), inset 1px 0 0 rgba(255, 255, 255, .48);
  --glass-specular-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  --glass-shadow-nav: 0 18px 48px rgba(82, 104, 126, .11), 0 4px 14px rgba(82, 104, 126, .05);
  --glass-shadow-control: 0 12px 30px rgba(72, 92, 116, .1), 0 2px 8px rgba(72, 92, 116, .04);
  --glass-shadow-media: 0 34px 86px rgba(77, 101, 128, .16), 0 8px 24px rgba(77, 101, 128, .07);
  --glass-shadow-indicator: 0 7px 20px rgba(75, 98, 124, .07), inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 -1px 0 rgba(111, 151, 194, .06);
  --glass-shadow-primary: 0 16px 34px rgba(39, 58, 80, .2), inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(7, 19, 33, .12);
  --glass-shadow-thumbnail: 0 7px 18px rgba(42, 67, 92, .11), inset 0 1px 0 rgba(255, 255, 255, .7);
  --glass-shadow-thumbnail-active: 0 0 0 1px rgba(255, 255, 255, .82), 0 11px 26px rgba(46, 73, 103, .2), inset 0 1px 0 rgba(255, 255, 255, .94);

  /* Radius */
  --radius-pill: 999px;
  --radius-media: 38px;
  --radius-card: 28px;
  --radius-control: 22px;
  --radius-thumbnail: 16px;
  --radius-media-mobile: 30px;
  --radius-thumbnail-mobile: 12px;

  /* Space */
  --space-xs: .375rem;
  --space-sm: .75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --page-gutter: clamp(1.25rem, 4.2vw, 4.5rem);

  /* Type */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  --font-meta: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
  --weight-regular: 400;
  --weight-medium: 520;
  --weight-semibold: 620;
  --weight-bold: 720;

  /* Section 01 motion system */
  --motion-fast: 180ms;
  --motion-base: 460ms;
  --motion-slow: 820ms;
  --motion-feedback: 220ms;
  --motion-morph: 520ms;
  --motion-scene: 560ms;
  --motion-reveal: 720ms;
  --cover-card-width: clamp(12rem, 17vw, 16.25rem);
  --cover-card-ratio: .66;
  --cover-near-x: clamp(8.9rem, 11.5vw, 11.5rem);
  --cover-far-x: clamp(15.5rem, 20vw, 20rem);
  --cover-duration: 720ms;
  --cover-ease: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .72, .22, 1);
  --spring-soft: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--color-bg-base); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button { border: 0; }
::selection { background: rgba(167, 213, 255, .55); color: var(--color-text-primary); }

.skip-link {
  position: fixed;
  z-index: 30;
  top: 1rem;
  left: 1rem;
  padding: .65rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-text-primary);
  color: #fff;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* Ambient background */
.ambient-field { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-field::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, .7), rgba(253, 252, 249, .35) 46%, rgba(255, 255, 255, .66));
  content: "";
}
.ambient-field__layer { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .58; }
.ambient-field__layer {
  --ambient-pointer-x: 0px;
  --ambient-pointer-y: 0px;
  transform: translate3d(var(--ambient-pointer-x), var(--ambient-pointer-y), 0);
  will-change: transform;
}
.ambient-field__layer--mint { top: -10%; left: -8%; width: 48vw; height: 58vw; max-height: 760px; background: var(--color-accent-mint); animation: ambient-mint 22s var(--ease-soft) infinite alternate; }
.ambient-field__layer--sky { top: -17%; right: 8%; width: 57vw; height: 56vw; max-height: 720px; background: var(--color-accent-sky); opacity: .68; animation: ambient-sky 27s var(--ease-soft) infinite alternate; }
.ambient-field__layer--cream { right: -9%; bottom: -18%; width: 52vw; height: 48vw; background: var(--color-accent-cream); opacity: .46; animation: ambient-cream 18s var(--ease-soft) infinite alternate; }
.ambient-field__layer--lavender { bottom: -28%; left: 20%; width: 42vw; height: 44vw; background: var(--color-accent-lavender); opacity: .42; animation: ambient-lavender 25s var(--ease-soft) infinite alternate; }
.is-page-hidden .ambient-field__layer { animation-play-state: paused; }

/* Shared liquid-glass material */
.glass-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-border-standard);
  background: var(--color-glass-fill);
  box-shadow: var(--glass-inset-base);
}
.glass-surface::before {
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: inherit;
  background: var(--glass-reflection);
  content: "";
  pointer-events: none;
}
.glass-surface::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--glass-inner-edge);
  content: "";
  pointer-events: none;
}
.glass-surface > * { position: relative; z-index: 1; }
.glass--nav {
  border-radius: var(--radius-pill);
  background: var(--glass-fill-nav);
  box-shadow: var(--glass-shadow-nav), var(--glass-inset-nav);
  -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturation));
}
.glass--control {
  border-radius: var(--radius-pill);
  background: var(--glass-fill-control);
  box-shadow: var(--glass-shadow-control), var(--glass-inset-control);
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(138%);
  backdrop-filter: blur(var(--glass-blur-control)) saturate(138%);
}
.glass--media {
  border-radius: var(--radius-media);
  background: var(--glass-fill-media);
  box-shadow: var(--glass-shadow-media), var(--glass-inset-media);
  -webkit-backdrop-filter: blur(var(--glass-blur-media)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur-media)) saturate(var(--glass-saturation));
}
.glass-specular {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    radial-gradient(130px circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, .62), transparent 68%),
    var(--glass-specular-line);
  background-repeat: no-repeat;
  background-position: center, 10% 0;
  background-size: auto, 54% 1px;
  mix-blend-mode: screen;
  opacity: .38;
  pointer-events: none;
  transition: opacity var(--motion-feedback) var(--ease-out);
}

/* Header */
.site-header { position: fixed; z-index: 20; top: 1.5rem; right: 0; left: 0; }
.site-header__inner {
  position: relative;
  display: grid;
  width: min(84rem, calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: var(--space-lg);
}
.wordmark {
  display: inline-flex;
  width: fit-content;
  align-items: flex-start;
  flex-direction: column;
  color: var(--color-text-primary);
  line-height: 1;
  text-decoration: none;
}
.wordmark__name { display: block; font-size: .78rem; font-weight: var(--weight-bold); letter-spacing: .29em; }
.wordmark__role { align-self: stretch; margin-top: .34rem; color: var(--color-text-muted); font-size: .5rem; font-weight: var(--weight-semibold); letter-spacing: .2em; text-align: center; }
.glass-nav {
  --indicator-x: .375rem;
  --indicator-width: 5.75rem;
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  gap: .1rem;
  padding: .36rem;
}
.glass-nav__indicator {
  position: absolute;
  z-index: 1;
  top: .36rem;
  bottom: .36rem;
  left: 0;
  width: var(--indicator-width);
  border: 1px solid var(--glass-border-indicator);
  border-radius: var(--radius-pill);
  background: var(--glass-fill-indicator);
  box-shadow: var(--glass-shadow-indicator);
  transform: translate3d(var(--indicator-x), 0, 0);
  transition:
    width var(--motion-morph) var(--spring-soft),
    transform var(--motion-morph) var(--spring-soft),
    box-shadow var(--motion-base) var(--ease-out);
  will-change: width, transform;
}
.glass-nav__item {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 5.4rem;
  min-height: 2.65rem;
  place-items: center;
  padding: .55rem .92rem;
  border-radius: var(--radius-pill);
  font-size: .82rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-feedback) var(--ease-out), transform var(--motion-feedback) var(--ease-out);
}
.glass-nav__item.is-active { font-weight: var(--weight-semibold); }
.header-note {
  display: flex;
  justify-self: end;
  align-items: flex-start;
  gap: .72rem;
  margin: 0;
  color: #4a5868;
  font-size: .62rem;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  letter-spacing: .045em;
}
.header-note span:last-child { display: grid; gap: .2rem; }
.header-note strong { color: var(--color-text-primary); font-size: .64rem; font-weight: var(--weight-semibold); letter-spacing: .08em; }
.header-note small { color: var(--color-text-muted); font-size: .56rem; letter-spacing: .13em; }
.header-note__dot { width: .58rem; height: .58rem; margin-top: .2rem; border-radius: 50%; background: var(--color-text-primary); box-shadow: 0 0 0 5px rgba(255, 255, 255, .45); }
.menu-toggle, .mobile-nav { display: none; }

/* Section 01 */
.hero {
  position: relative;
  display: grid;
  width: min(78rem, calc(100% - 2 * var(--page-gutter)));
  min-height: 100svh;
  margin-inline: auto;
  padding: 7.8rem 0 3.5rem;
  grid-template-columns: minmax(25rem, .9fr) minmax(35rem, 1.1fr);
  align-items: center;
  gap: clamp(3rem, 5vw, 5rem);
}
.hero__copy { position: relative; z-index: 2; padding: 1.5rem 0 1rem; }
.hero-lockup {
  display: flex;
  max-width: 8ch;
  flex-direction: column;
  margin: 0;
  color: var(--color-text-display);
  font-family: var(--font-display);
  font-size: clamp(4.25rem, 6.3vw, 6rem);
  font-weight: var(--weight-bold);
  letter-spacing: -.04em;
  line-height: .87;
}
.hero-lockup__line { display: block; }
.hero-lockup__line--cn { margin-top: .1em; }
.hero-lockup__line--name { margin-top: .12em; color: #25335a; font-size: .78em; font-weight: 680; letter-spacing: -.032em; }
.hero__role {
  margin: 1.6rem 0 0;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -.015em;
}
.hero__description {
  max-width: 38.5rem;
  margin: 1.05rem 0 0;
  color: var(--color-text-secondary);
  font-size: clamp(.91rem, 1.02vw, 1rem);
  letter-spacing: 0;
  line-break: strict;
  line-height: 1.84;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: normal;
}

/* Skills */
.skill-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.skill-pill {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  gap: .4rem;
  padding: .52rem .72rem;
  color: #3f4c5c;
  font-size: .76rem;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition:
    transform var(--motion-base) var(--spring-soft),
    box-shadow var(--motion-base) var(--ease-out),
    filter var(--motion-feedback) var(--ease-out);
}
.skill-pill__icon { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; transition: transform var(--motion-base) var(--spring-soft); }
.skill-pill__icon--rose { color: #df6f87; }
.skill-pill__icon--violet { color: #9474d9; }
.skill-pill__icon--blue { color: #5889d8; }
.skill-pill__icon--lilac { color: #9972cf; }

/* CTA */
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.65rem; }
.cta {
  --magnetic-x: 0px;
  --magnetic-y: 0px;
  --cta-lift: 0px;
  display: inline-flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  overflow: hidden;
  padding: .72rem 1.35rem;
  font-size: .92rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translate3d(var(--magnetic-x), calc(var(--magnetic-y) + var(--cta-lift)), 0);
  transition:
    transform var(--motion-base) var(--spring-soft),
    box-shadow var(--motion-base) var(--ease-out),
    filter var(--motion-feedback) var(--ease-out);
}
.cta--primary {
  min-width: 12.4rem;
  border-color: var(--glass-border-primary);
  background: var(--glass-fill-dark);
  box-shadow: var(--glass-shadow-primary);
  color: #fff;
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(125%);
  backdrop-filter: blur(var(--glass-blur-control)) saturate(125%);
}
.cta--primary::before { background: var(--glass-reflection-dark); }
.cta--secondary { min-width: 7.2rem; color: #465566; }
.cta__divider { width: 1px; height: 1.5rem; background: rgba(255, 255, 255, .15); }
.cta__label, .cta__icon { transition: transform var(--motion-base) var(--spring-soft); }
.cta--primary.is-magnetic {
  transition:
    transform 90ms var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-out),
    filter var(--motion-feedback) var(--ease-out);
}
.cta__icon { width: 1.12rem; height: 1.12rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }

/* Personal media */
.personal-media {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40.5rem;
  justify-self: end;
  padding: 1.2rem 2.8rem 1.2rem 1.2rem;
}
.personal-media__plate { position: absolute; pointer-events: none; }
.personal-media__plate--back { --plate-x: 0px; --plate-y: 0px; z-index: -2; top: 3.65rem; right: 4.25rem; bottom: -.1rem; left: -.65rem; transform: translate3d(var(--plate-x), var(--plate-y), 0) rotate(-3.2deg); opacity: .48; transition: transform 700ms var(--spring-soft); }
.personal-media__plate--middle { --plate-x: 0px; --plate-y: 0px; z-index: -1; top: 1.6rem; right: 3.15rem; bottom: .6rem; left: .25rem; transform: translate3d(var(--plate-x), var(--plate-y), 0) rotate(-1.15deg); opacity: .66; transition: transform 620ms var(--spring-soft); }
.media-showcase {
  --media-rotate-x: 0deg;
  --media-rotate-y: 0deg;
  --media-content-x: 0px;
  --media-content-y: 0px;
  --media-overlay-x: 0px;
  --media-overlay-y: 0px;
  --media-play-x: 0px;
  --media-play-y: 0px;
  position: relative;
  min-height: 30.5rem;
  overflow: hidden;
  padding: 1.25rem;
  border-color: var(--glass-border-strong);
  transform: perspective(1200px) rotateX(var(--media-rotate-x)) rotateY(var(--media-rotate-y));
  transform-style: preserve-3d;
  transition: transform 700ms var(--spring-soft), box-shadow var(--motion-base) var(--ease-out);
}
.media-showcase__viewport { position: absolute !important; z-index: 0 !important; inset: .48rem; overflow: hidden; border-radius: calc(var(--radius-media) - 8px); background: #dceafa; }
.media-placeholder {
  --scene-y: 0px;
  --scene-scale: 1.025;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(165deg, #d8ecfb 0%, #c8dff2 38%, #f8ddc7 66%, #a8c2d1 100%);
  opacity: 1;
  transform: translate3d(var(--media-content-x), calc(var(--media-content-y) + var(--scene-y)), 0) scale(var(--scene-scale));
  transition:
    opacity 240ms var(--ease-out),
    transform var(--motion-scene) var(--ease-out),
    background var(--motion-scene) var(--ease-out);
}
.media-placeholder.is-switching { --scene-y: 7px; --scene-scale: 1.012; opacity: 0; }
.media-placeholder__sky { position: absolute; top: -16%; left: -10%; width: 78%; height: 70%; border-radius: 50%; background: rgba(255, 255, 255, .48); filter: blur(26px); }
.media-placeholder__horizon { position: absolute; right: -16%; bottom: -16%; width: 86%; height: 58%; border-radius: 50% 50% 0 0; background: linear-gradient(145deg, rgba(114, 150, 176, .55), rgba(53, 76, 96, .24)); filter: blur(5px); transform: rotate(-7deg); }
.media-placeholder__light { position: absolute; top: 24%; right: 25%; width: 8rem; height: 8rem; border-radius: 50%; background: rgba(255, 245, 218, .82); box-shadow: 0 0 70px 35px rgba(255, 226, 187, .55); }
.media-showcase__overlay { position: absolute !important; z-index: 1 !important; inset: -1%; background: linear-gradient(180deg, rgba(11, 23, 40, .04) 20%, transparent 45%, rgba(16, 31, 46, .58) 100%); transform: translate3d(var(--media-overlay-x), var(--media-overlay-y), 0); transition: transform 760ms var(--spring-soft); }
.media-showcase__header {
  position: absolute;
  z-index: 3;
  top: 1.6rem;
  right: 1.7rem;
  left: 1.7rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: #172338;
  font-family: var(--font-meta);
}
.media-showcase__header p { display: flex; flex-direction: column; margin: 0; }
.media-showcase__header strong { font-size: .68rem; font-weight: var(--weight-semibold); letter-spacing: .12em; }
.media-showcase__header p span { margin-top: .1rem; font-size: .5rem; font-weight: var(--weight-medium); letter-spacing: .14em; }
.media-showcase__index { font-size: .62rem; font-weight: var(--weight-medium); letter-spacing: .12em; }
.media-play {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  width: 4.7rem;
  height: 4.7rem;
  padding: 0;
  place-items: center;
  border-color: var(--glass-border-strong);
  background: var(--glass-fill-control);
  transform: translate(calc(-50% + var(--media-play-x)), calc(-50% + var(--media-play-y)));
  opacity: 1;
  transition: transform 620ms var(--spring-soft), box-shadow var(--motion-base) var(--ease-out);
}
.media-play svg { width: 1.45rem; height: 1.45rem; fill: rgba(22, 35, 51, .85); stroke: none; }
.media-showcase__footer {
  position: absolute;
  z-index: 3;
  right: 1.7rem;
  bottom: 1.55rem;
  left: 1.7rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 1.1rem;
  color: rgba(255, 255, 255, .92);
}
.media-showcase__keywords, .media-showcase__caption { display: flex; flex-direction: column; margin: 0; }
.media-showcase__keywords { font-size: .54rem; font-weight: var(--weight-semibold); letter-spacing: .18em; line-height: 1.4; }
.media-showcase__caption { align-items: flex-end; font-size: .62rem; line-height: 1.45; text-align: right; }
.media-action { display: grid; width: 2.6rem; height: 2.6rem; padding: 0; place-items: center; }
.media-action svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: #26384a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.media-play:disabled, .media-action:disabled, .thumbnail:disabled { cursor: default; }

.thumbnail-rail {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: -.18rem;
  display: flex;
  width: 4.45rem;
  flex-direction: column;
  gap: .62rem;
  padding: .6rem;
  border-radius: var(--radius-control);
  box-shadow: 0 18px 38px rgba(61, 84, 109, .12), var(--glass-inset-control);
  transform: translateY(-50%);
}
.thumbnail {
  position: relative;
  display: block;
  width: 3.15rem;
  aspect-ratio: .9;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--glass-border-thumbnail);
  border-radius: var(--radius-thumbnail);
  background: rgba(255, 255, 255, .2);
  box-shadow: var(--glass-shadow-thumbnail);
  cursor: pointer;
  transition:
    transform var(--motion-base) var(--spring-soft),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    filter var(--motion-feedback) var(--ease-out);
}
.thumbnail.is-active { border-color: rgba(255, 255, 255, .86); box-shadow: var(--glass-shadow-thumbnail-active); filter: brightness(1.06) saturate(1.04); transform: translateX(-2px) scale(1.012); }
.thumbnail__art { position: absolute; inset: 0; }
.thumbnail__art--sky { background: linear-gradient(155deg, #c6e1f7 0 48%, #819eb3 49% 70%, #446176 71%); }
.thumbnail__art--city { background: linear-gradient(170deg, #f1e5d2 0 46%, #b7c9d3 47%); }
.thumbnail__art--city::before, .thumbnail__art--city::after { position: absolute; bottom: 0; width: 34%; height: 62%; background: rgba(80, 101, 121, .6); content: ""; }
.thumbnail__art--city::before { left: 12%; }
.thumbnail__art--city::after { right: 10%; height: 78%; }
.thumbnail__art--land { background: linear-gradient(160deg, #dcecf6 0 44%, #88a986 45% 64%, #3f665e 65%); }

/* Placeholder scene states */
.media-placeholder__sky,
.media-placeholder__horizon,
.media-placeholder__light {
  transition:
    inset var(--motion-scene) var(--ease-out),
    width var(--motion-scene) var(--ease-out),
    height var(--motion-scene) var(--ease-out),
    background var(--motion-scene) var(--ease-out),
    opacity var(--motion-scene) var(--ease-out),
    transform var(--motion-scene) var(--ease-out);
}
.media-placeholder[data-scene="2"] { background: linear-gradient(160deg, #f4eadb 0%, #d9e4ec 42%, #aebdca 67%, #687f91 100%); }
.media-placeholder[data-scene="2"] .media-placeholder__sky { top: -24%; left: 28%; width: 58%; height: 58%; background: rgba(255, 249, 230, .64); }
.media-placeholder[data-scene="2"] .media-placeholder__horizon { right: 4%; bottom: -12%; width: 92%; height: 64%; border-radius: 22% 28% 0 0; background: linear-gradient(160deg, rgba(111, 132, 149, .38), rgba(45, 63, 79, .5)); transform: rotate(-2deg); }
.media-placeholder[data-scene="2"] .media-placeholder__light { top: 17%; right: 54%; width: 5.8rem; height: 5.8rem; background: rgba(255, 242, 207, .8); opacity: .82; }
.media-placeholder[data-scene="3"] { background: linear-gradient(155deg, #d8edf3 0%, #c8ddd4 40%, #83a69a 66%, #395d58 100%); }
.media-placeholder[data-scene="3"] .media-placeholder__sky { top: -8%; left: -20%; width: 92%; height: 56%; background: rgba(244, 255, 249, .52); }
.media-placeholder[data-scene="3"] .media-placeholder__horizon { right: -12%; bottom: -8%; width: 108%; height: 66%; border-radius: 55% 45% 0 0; background: linear-gradient(145deg, rgba(88, 132, 112, .62), rgba(35, 75, 70, .52)); transform: rotate(4deg); }
.media-placeholder[data-scene="3"] .media-placeholder__light { top: 20%; right: 18%; width: 6.5rem; height: 6.5rem; background: rgba(225, 244, 224, .72); opacity: .72; }

/* Section 02 — Selected Work */
.selected-work {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(7.5rem, 10vw, 10rem) 0 clamp(5.5rem, 8vw, 8rem);
  scroll-margin-top: 5rem;
}
.selected-work__ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 22% 22%, rgba(223, 248, 239, .28), transparent 30%),
    radial-gradient(circle at 68% 36%, rgba(211, 234, 255, .66), transparent 37%),
    radial-gradient(circle at 83% 58%, rgba(255, 243, 207, .5), transparent 33%),
    radial-gradient(circle at 72% 92%, rgba(238, 231, 255, .28), transparent 30%);
  pointer-events: none;
}
.selected-work__inner {
  display: grid;
  width: min(90rem, calc(100% - 2 * var(--page-gutter)));
  min-height: 42rem;
  margin-inline: auto;
  grid-template-columns: minmax(18rem, .72fr) minmax(43rem, 1.72fr);
  align-items: center;
  gap: clamp(1.75rem, 3vw, 3rem);
}
.selected-work__intro { position: relative; z-index: 8; max-width: 21rem; }
.selected-work__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--color-text-display);
  font-family: var(--font-display);
  font-size: clamp(3.45rem, 5vw, 4.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: -.038em;
  line-height: .98;
}
.selected-work__title [lang="en"] { margin-top: .35rem; color: #52627b; font-size: .5em; font-weight: var(--weight-semibold); letter-spacing: .015em; }
.selected-work__subtitle { margin: 1.9rem 0 0; color: var(--color-text-display); font-size: clamp(1.35rem, 1.75vw, 1.7rem); font-weight: var(--weight-medium); letter-spacing: -.025em; line-height: 1.38; }
.selected-work__description { max-width: 20.5rem; margin: 1.55rem 0 0; color: var(--color-text-secondary); font-size: .94rem; line-height: 1.82; }
.selected-work__cta { margin-top: 1.75rem; }
.selected-work__cta[aria-disabled="true"] { cursor: default; opacity: 1; }
.selected-work__showcase { position: relative; min-width: 0; min-height: 42rem; }
.coverflow {
  position: relative;
  width: 100%;
  height: 42rem;
  outline: none;
  perspective: 1300px;
  perspective-origin: 50% 46%;
  touch-action: pan-y;
  user-select: none;
}
.coverflow:focus-visible { border-radius: var(--radius-card); outline: 3px solid rgba(49, 92, 201, .5); outline-offset: 5px; }
.coverflow__depth-field {
  position: absolute;
  top: 47%;
  left: 50%;
  width: min(44rem, 86%);
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(171, 211, 248, .22), rgba(255, 241, 207, .11) 45%, transparent 72%);
  filter: blur(32px);
  transform: translate(-50%, -50%);
}
.coverflow__viewport { position: absolute; inset: 0 0 5.2rem; transform-style: preserve-3d; }
.work-card {
  --card-x: 0px;
  --card-z: 0px;
  --card-rotate: 0deg;
  --card-scale: 1;
  --card-opacity: 1;
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  --card-lift: 0px;
  --card-media-x: 0px;
  --card-media-y: 0px;
  --card-entry-y: 0px;
  --card-filter: saturate(1) brightness(1);
  --card-shadow-alpha: .18;
  --card-shadow-y: 30px;
  --card-shadow-blur: 72px;
  --card-glass-alpha: .26;
  --card-media-saturation: 1;
  --card-media-brightness: 1;
  --card-overlay-opacity: 1;
  --card-highlight-opacity: .32;
  --work-tone: rgba(211, 234, 255, .52);
  --glass-x: 50%;
  --glass-y: 50%;
  position: absolute;
  z-index: var(--card-layer, 1);
  top: 50%;
  left: 50%;
  width: var(--cover-card-width);
  aspect-ratio: var(--cover-card-ratio);
  overflow: visible;
  border: 0;
  border-radius: var(--radius-card);
  color: #fff;
  cursor: pointer;
  filter: var(--card-filter);
  opacity: var(--card-opacity);
  translate: 0 0;
  transform: translate3d(calc(-50% + var(--card-x)), calc(-50% + var(--card-lift) + var(--card-entry-y)), var(--card-z)) rotateX(var(--card-tilt-x)) rotateY(calc(var(--card-rotate) + var(--card-tilt-y))) scale(var(--card-scale));
  transform-style: preserve-3d;
  transform-origin: center;
  transition:
    transform var(--motion-base) var(--ease-out),
    opacity var(--cover-duration) var(--cover-ease),
    filter var(--motion-base) var(--ease-out),
    translate var(--motion-feedback) var(--ease-out);
}
.work-card[data-slot="0"] { --card-layer: 10; --card-x: 0px; --card-z: 70px; --card-rotate: 0deg; --card-scale: 1; --card-opacity: 1; }
.work-card[data-slot="-1"] { --card-layer: 7; --card-x: calc(var(--cover-near-x) * -1); --card-z: -20px; --card-rotate: 12deg; --card-scale: .87; --card-opacity: .82; --card-filter: saturate(.86) brightness(.94); }
.work-card[data-slot="1"] { --card-layer: 7; --card-x: var(--cover-near-x); --card-z: -20px; --card-rotate: -12deg; --card-scale: .87; --card-opacity: .82; --card-filter: saturate(.86) brightness(.94); }
.work-card[data-slot="-2"] { --card-layer: 4; --card-x: calc(var(--cover-far-x) * -1); --card-z: -150px; --card-rotate: 17deg; --card-scale: .75; --card-opacity: .52; --card-filter: saturate(.68) brightness(.9); }
.work-card[data-slot="2"] { --card-layer: 4; --card-x: var(--cover-far-x); --card-z: -150px; --card-rotate: -17deg; --card-scale: .75; --card-opacity: .52; --card-filter: saturate(.68) brightness(.9); }
.work-card[data-slot="-3"], .work-card[data-slot="3"], .work-card[data-slot="-4"], .work-card[data-slot="4"] { --card-layer: 1; --card-x: calc(var(--cover-far-x) * 1.3); --card-z: -220px; --card-rotate: -20deg; --card-scale: .66; --card-opacity: 0; pointer-events: none; }
.work-card[data-slot="-3"] { --card-x: calc(var(--cover-far-x) * -1.3); --card-rotate: 20deg; }
.work-card[data-slot="-4"] { --card-x: calc(var(--cover-far-x) * -1.52); --card-rotate: 22deg; }
.work-card[data-slot="4"] { --card-x: calc(var(--cover-far-x) * 1.52); --card-rotate: -22deg; }
.selected-work.is-entering .work-card { will-change: transform, opacity; }
.coverflow.is-dragging { cursor: grabbing; }
.coverflow.is-continuous .work-card { filter: none; transition: translate var(--motion-feedback) var(--ease-out); will-change: transform, opacity; }
.coverflow.is-continuous.is-settled .work-card { will-change: auto; }
.coverflow.is-continuous.is-settled .work-card.is-pointer-active {
  transition: transform 90ms var(--ease-standard), translate var(--motion-feedback) var(--ease-out);
  will-change: transform;
}
.coverflow.is-continuous.is-settled .work-card.is-pointer-settling {
  transition: transform var(--motion-base) var(--ease-out), translate var(--motion-feedback) var(--ease-out);
}
.work-card[data-position="hidden"] { pointer-events: none; }
.work-card__ambient { position: absolute; z-index: -2; inset: 8% -8% -7%; border-radius: 42%; background: rgba(173, 214, 251, .32); filter: blur(30px); opacity: var(--card-shadow-alpha); }
.work-card__glass { position: absolute; z-index: -1; inset: -.42rem; border: 1px solid rgba(255, 255, 255, .8); border-radius: calc(var(--radius-card) + 7px); background: rgba(255, 255, 255, var(--card-glass-alpha)); box-shadow: 0 var(--card-shadow-y) var(--card-shadow-blur) rgba(44, 67, 92, var(--card-shadow-alpha)), inset 0 1px 0 rgba(255, 255, 255, .94); transition: box-shadow var(--motion-base) var(--ease-out); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
.work-card__media { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: var(--radius-card); background: #b9d4e6; filter: saturate(var(--card-media-saturation)) brightness(var(--card-media-brightness)); transform: translate3d(var(--card-media-x), var(--card-media-y), 0) scale(1.035); transition: transform 110ms var(--ease-standard); }
.work-card__media::after { position: absolute; inset: 0; background: radial-gradient(circle at 18% 18%, var(--work-tone), transparent 58%); content: ""; mix-blend-mode: screen; opacity: .18; pointer-events: none; }
.work-card__scene, .work-card__scene i { position: absolute; display: block; }
.work-card__scene { inset: 0; overflow: hidden; background: linear-gradient(165deg, #dceeff 0%, #bfd7e9 42%, #f6d6bd 65%, #66859b 100%); }
.work-card__scene i:nth-child(1) { top: 18%; right: 18%; width: 5rem; height: 5rem; border-radius: 50%; background: rgba(255, 237, 199, .8); box-shadow: 0 0 48px 24px rgba(255, 225, 185, .38); }
.work-card__scene i:nth-child(2) { right: -18%; bottom: 9%; width: 104%; height: 43%; border-radius: 55% 48% 0 0; background: rgba(68, 94, 111, .48); filter: blur(3px); transform: rotate(-7deg); }
.work-card__scene i:nth-child(3) { bottom: -11%; left: -17%; width: 112%; height: 34%; border-radius: 52% 50% 0 0; background: rgba(34, 62, 74, .66); transform: rotate(4deg); }
.work-card[data-scene="2"] .work-card__scene { background: linear-gradient(160deg, #d8eef6, #bddbd3 46%, #799f92 69%, #355d58); }
.work-card[data-scene="1"] { --work-tone: rgba(211, 234, 255, .58); }
.work-card[data-scene="2"] { --work-tone: rgba(213, 240, 227, .56); }
.work-card[data-scene="3"] { --work-tone: rgba(232, 224, 255, .5); }
.work-card[data-scene="4"] { --work-tone: rgba(249, 232, 207, .54); }
.work-card[data-scene="5"] { --work-tone: rgba(206, 238, 241, .56); }
.work-card[data-scene="2"] .work-card__scene i:nth-child(1) { top: 12%; right: 55%; background: rgba(240, 251, 232, .75); }
.work-card[data-scene="3"] .work-card__scene { background: linear-gradient(155deg, #e6eef6, #c3d6e4 42%, #9caab6 43% 60%, #586d7d 61%); }
.work-card[data-scene="3"] .work-card__scene i:nth-child(2) { right: 12%; bottom: 0; width: 30%; height: 68%; border-radius: 12px 12px 0 0; transform: none; }
.work-card[data-scene="3"] .work-card__scene i:nth-child(3) { left: 16%; width: 26%; height: 52%; border-radius: 10px 10px 0 0; transform: none; }
.work-card[data-scene="4"] .work-card__scene { background: linear-gradient(162deg, #f8ead7, #d8e4ee 45%, #8aa2b4 67%, #485f70); }
.work-card[data-scene="4"] .work-card__scene i:nth-child(1) { right: 11%; background: rgba(255, 231, 193, .72); }
.work-card[data-scene="5"] .work-card__scene { background: linear-gradient(160deg, #ddecfa, #a9c4df 43%, #718cac 62%, #344f6c); }
.work-card[data-scene="5"] .work-card__scene i:nth-child(2) { right: -5%; bottom: 17%; height: 35%; background: rgba(56, 79, 100, .48); transform: rotate(3deg); }
.work-card__overlay { position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(13, 26, 41, .04) 28%, transparent 44%, rgba(13, 26, 41, .86) 100%); opacity: var(--card-overlay-opacity); }
.work-card__meta-top { position: absolute; z-index: 3; top: 1rem; right: 1rem; left: 1rem; display: flex; justify-content: space-between; font-size: .58rem; font-weight: var(--weight-semibold); letter-spacing: .12em; }
.work-card__meta-bottom { position: absolute; z-index: 3; right: 1rem; bottom: 4.15rem; left: 1rem; display: flex; flex-direction: column; text-shadow: 0 2px 12px rgba(13, 26, 41, .35); }
.work-card__context { color: rgba(255, 255, 255, .72); font-size: .56rem; font-weight: var(--weight-medium); letter-spacing: .12em; }
.work-card__meta-bottom strong { margin-top: .25rem; font-size: clamp(1.2rem, 1.75vw, 1.55rem); line-height: 1.15; }
.work-card__detail { margin-top: .28rem; color: rgba(255, 255, 255, .78); font-size: .66rem; }
.work-card__play { position: absolute; z-index: 4; right: .8rem; bottom: .75rem; left: .8rem; display: flex; min-height: 2.55rem; align-items: center; justify-content: center; gap: .45rem; border-color: rgba(255, 255, 255, .32); background: rgba(28, 43, 61, .46); box-shadow: 0 9px 22px rgba(11, 25, 41, .18), inset 0 1px 0 rgba(255, 255, 255, .24); color: #fff; -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); }
.work-card__play:disabled { cursor: default; opacity: 1; }
.work-card__play svg { width: 1rem; height: 1rem; fill: #fff; stroke: none; }

.work-card__play span { font-size: .76rem; font-weight: var(--weight-semibold); }
.work-card__highlight { position: absolute; z-index: 5; inset: -.42rem; border-radius: calc(var(--radius-card) + 7px); background: radial-gradient(150px circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, .42), transparent 70%); opacity: var(--card-highlight-opacity); pointer-events: none; }
.cover-control { position: absolute; z-index: 20; top: 47%; display: grid; width: 3.55rem; height: 3.55rem; padding: 0; place-items: center; border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .52); cursor: pointer; transform: translateY(-50%); transition: transform var(--motion-feedback) var(--ease-out), box-shadow var(--motion-feedback) var(--ease-out), filter var(--motion-feedback) var(--ease-out); }
.cover-control--prev { left: .25rem; }
.cover-control--next { right: .25rem; }
.cover-control svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: #1c2b41; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; transition: transform var(--motion-feedback) var(--ease-out); }
.cover-scrubber { position: absolute; z-index: 20; bottom: .15rem; left: 50%; display: grid; min-width: min(23rem, 76%); min-height: 3.25rem; align-items: center; padding: .8rem .75rem .48rem; grid-template-columns: 2.1rem minmax(8rem, 1fr) 2.1rem; gap: .72rem; border-color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .42); transform: translateX(-50%); }
.cover-scrubber__hint { position: absolute; top: .28rem; left: 50%; color: rgba(77, 101, 128, .68); font-size: .55rem; letter-spacing: .08em; opacity: .72; transform: translateX(-50%); transition: opacity var(--motion-feedback) var(--ease-out); white-space: nowrap; }
.cover-scrubber__hint--mobile { display: none; }
.cover-scrubber__index, .cover-scrubber__total { color: var(--color-text-primary); font-size: .72rem; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); letter-spacing: .09em; text-align: center; }
.cover-scrubber__total { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.cover-scrubber__track { position: relative; min-height: 2.75rem; overflow: visible; border-radius: var(--radius-pill); cursor: ew-resize; touch-action: pan-y; }
.cover-scrubber__base, .cover-scrubber__progress { position: absolute; top: 50%; right: 0; left: 0; height: 2px; border-radius: var(--radius-pill); transform: translateY(-50%); }
.cover-scrubber__base { background: rgba(92, 118, 148, .2); box-shadow: 0 1px 0 rgba(255, 255, 255, .72); }
.cover-scrubber__progress { --scrubber-progress: 0; background: linear-gradient(90deg, rgba(42, 62, 88, .72), rgba(93, 123, 158, .54)); transform: translateY(-50%) scaleX(var(--scrubber-progress)); transform-origin: left center; }
.cover-scrubber__node { position: absolute; z-index: 1; top: 50%; left: var(--node-position); width: .26rem; height: .26rem; border-radius: 50%; background: rgba(78, 105, 135, .35); opacity: .76; transform: translate(-50%, -50%); transition: background-color var(--motion-feedback) var(--ease-out), opacity var(--motion-feedback) var(--ease-out), scale var(--motion-feedback) var(--ease-out); }
.cover-scrubber__node.is-active { background: rgba(74, 111, 161, .52); opacity: .92; scale: 1.45; }
.cover-scrubber__node.is-pulsing { animation: scrubber-node-pulse 260ms var(--ease-out) both; }
.cover-scrubber__knob { position: absolute; z-index: 2; top: 50%; left: 0; display: block; width: 1.38rem; height: 1.38rem; border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%; background: rgba(244, 249, 253, .7); box-shadow: 0 7px 18px rgba(48, 70, 96, .2), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(100, 132, 165, .12); opacity: 1; transform: translate(-50%, -50%); -webkit-backdrop-filter: blur(12px) saturate(145%); backdrop-filter: blur(12px) saturate(145%); }
.cover-scrubber__knob::before { position: absolute; inset: .16rem; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; content: ""; }
.cover-scrubber__knob::after { position: absolute; top: 50%; left: 50%; width: .3rem; height: .3rem; border-radius: 50%; background: rgba(65, 96, 133, .62); box-shadow: 0 0 0 3px rgba(190, 222, 255, .22); content: ""; transform: translate(-50%, -50%); }
.cover-scrubber__knob .glass-specular { opacity: .5; }
.cover-scrubber__knob--ghost { opacity: 0; }
.cover-scrubber.is-scrubbing { box-shadow: 0 16px 38px rgba(72, 92, 116, .14), var(--glass-inset-control); }
.cover-scrubber.is-scrubbing .cover-scrubber__knob { filter: brightness(1.05); scale: 1.08; }
.cover-scrubber.is-scrubbing .cover-scrubber__hint,
.cover-scrubber:hover .cover-scrubber__hint { opacity: 1; }
.cover-scrubber__track:focus-visible { outline: 3px solid rgba(49, 92, 201, .48); outline-offset: 2px; }

.selected-work.is-motion-primed:not(.is-in-view) .selected-work__title,
.selected-work.is-motion-primed:not(.is-in-view) .selected-work__subtitle,
.selected-work.is-motion-primed:not(.is-in-view) .selected-work__description,
.selected-work.is-motion-primed:not(.is-in-view) .selected-work__cta,
.selected-work.is-motion-primed:not(.is-in-view) .work-card,
.selected-work.is-motion-primed:not(.is-in-view) .cover-scrubber { opacity: 0; filter: blur(8px); translate: 0 20px; }
.selected-work.is-in-view .selected-work__title,
.selected-work.is-in-view .selected-work__subtitle,
.selected-work.is-in-view .selected-work__description,
.selected-work.is-in-view .selected-work__cta,
.selected-work.is-in-view .cover-scrubber { transition: opacity 620ms var(--ease-out), filter 620ms var(--ease-out), translate 620ms var(--ease-out); }
.selected-work.is-entering .selected-work__title { transition-delay: 70ms; }
.selected-work.is-entering .selected-work__subtitle,
.selected-work.is-entering .selected-work__description { transition-delay: 150ms; }
.selected-work.is-entering .selected-work__cta { transition-delay: 230ms; }
.selected-work.is-entering .work-card[data-position="active"] { animation: selected-card-enter 780ms var(--ease-out) 250ms backwards; }
.selected-work.is-entering .work-card[data-position="near"] { animation: selected-card-enter 820ms var(--ease-out) 360ms backwards; }
.selected-work.is-entering .work-card[data-position="far"] { animation: selected-card-enter 840ms var(--ease-out) 470ms backwards; }
.selected-work.is-entering .cover-scrubber { transition-delay: 540ms; }
.selected-work.is-nav-target .selected-work__ambient { animation: selected-ambient-focus 900ms var(--ease-out) both; }

@keyframes selected-card-enter {
  from { filter: blur(8px); opacity: 0; translate: 0 20px; }
}

@keyframes selected-ambient-focus {
  0% { opacity: .68; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes scrubber-node-pulse {
  50% { opacity: 1; scale: 1.9; }
}

@media (hover: hover) and (pointer: fine) {
  .work-card:not([data-position="active"]):hover { translate: 0 -4px; }
  .work-card[data-position="active"]:hover .work-card__glass { box-shadow: 0 calc(var(--card-shadow-y) + 4px) calc(var(--card-shadow-blur) + 8px) rgba(44, 67, 92, calc(var(--card-shadow-alpha) + .025)), inset 0 1px 0 rgba(255, 255, 255, .98); }
  .cover-scrubber__track:hover .cover-scrubber__knob { filter: brightness(1.035); }
  .cover-control:hover { filter: brightness(1.035); transform: translateY(calc(-50% - 2px)); box-shadow: 0 17px 36px rgba(72, 92, 116, .15), var(--glass-inset-control); }
  .cover-control--prev:hover svg { transform: translateX(-2px); }
  .cover-control--next:hover svg { transform: translateX(2px); }
  .cover-control:active { filter: brightness(.99); transform: translateY(-50%) scale(.97); }
}

.cover-control:focus-visible { outline: 3px solid rgba(49, 92, 201, .54); outline-offset: 4px; }

@media (max-width: 1100px) {
  :root { --cover-near-x: 8.25rem; --cover-far-x: 13.25rem; }
  .selected-work__inner { width: min(62rem, calc(100% - 2 * var(--page-gutter))); grid-template-columns: minmax(16rem, .68fr) minmax(34rem, 1.5fr); }
  .selected-work__showcase, .coverflow { min-height: 38rem; height: 38rem; }
  .work-card[data-slot="-2"], .work-card[data-slot="2"] { --card-opacity: .24; }
  .cover-control--prev { left: -.25rem; }
  .cover-control--next { right: -.25rem; }
}

@media (max-width: 820px) {
  .selected-work { padding-top: 6.5rem; }
  .selected-work__inner { width: min(42rem, calc(100% - 2rem)); grid-template-columns: 1fr; gap: 2rem; }
  .selected-work__intro { max-width: 34rem; }
  .selected-work__description { max-width: 33rem; }
  .selected-work__showcase, .coverflow { min-height: 35rem; height: 35rem; }
  .coverflow__viewport { inset: 0 0 4.6rem; }
}

@media (max-width: 520px) {
  .wordmark { min-height: 2.75rem; justify-content: center; }
  :root { --cover-card-width: min(70vw, 16rem); --cover-near-x: 58vw; --cover-far-x: 92vw; }
  .selected-work { padding: 6rem 0 4.5rem; }
  .selected-work__title { font-size: clamp(2.75rem, 14vw, 3.6rem); }
  .selected-work__title [lang="en"] { font-size: .58em; }
  .selected-work__subtitle { margin-top: 1.55rem; font-size: clamp(1.25rem, 6vw, 1.5rem); }
  .selected-work__description { margin-top: 1.2rem; }
  .selected-work__description br { display: none; }
  .selected-work__cta { margin-top: 1.5rem; }
  .selected-work__showcase, .coverflow { min-height: 32rem; height: 32rem; }
  .coverflow__viewport { inset: 0 0 4.6rem; overflow: visible; }
  .work-card[data-slot="-1"], .work-card[data-slot="1"] { --card-scale: .84; --card-opacity: .48; }
  .work-card[data-slot="-2"], .work-card[data-slot="2"] { --card-opacity: 0; pointer-events: none; }
  .work-card__meta-bottom strong { font-size: 1.25rem; }
  .cover-control { display: none; }
  .cover-scrubber { bottom: .1rem; min-width: min(21rem, 90%); }
  .cover-scrubber__hint { display: none; }
  .cover-scrubber__hint--mobile { display: block; }
}
/* Authored Section 01 entrance */
.has-js.motion-ready .ambient-field { animation: ambient-in 620ms var(--ease-out) both; }
.has-js.motion-ready .wordmark { animation: reveal-brand 620ms var(--ease-out) 80ms both; }
.has-js.motion-ready .glass-nav { animation: reveal-nav 720ms var(--ease-out) 140ms both; }
.has-js.motion-ready .header-note { animation: reveal-brand 620ms var(--ease-out) 180ms both; }
.has-js.motion-ready .hero-lockup__line--en { animation: reveal-copy var(--motion-reveal) var(--ease-out) 220ms both; }
.has-js.motion-ready .hero-lockup__line--cn { animation: reveal-copy var(--motion-reveal) var(--ease-out) 300ms both; }
.has-js.motion-ready .hero-lockup__line--name { animation: reveal-name 780ms var(--ease-out) 380ms both; }
.has-js.motion-ready .hero__role { animation: reveal-copy 680ms var(--ease-out) 500ms both; }
.has-js.motion-ready .hero__description { animation: reveal-copy 680ms var(--ease-out) 580ms both; }
.has-js.motion-ready .skill-pill:nth-child(1) { animation: reveal-chip 560ms var(--ease-out) 680ms both; }
.has-js.motion-ready .skill-pill:nth-child(2) { animation: reveal-chip 560ms var(--ease-out) 740ms both; }
.has-js.motion-ready .skill-pill:nth-child(3) { animation: reveal-chip 560ms var(--ease-out) 800ms both; }
.has-js.motion-ready .skill-pill:nth-child(4) { animation: reveal-chip 560ms var(--ease-out) 860ms both; }
.has-js.motion-ready .hero__actions { animation: reveal-copy 540ms var(--ease-out) 860ms both; }
.has-js.motion-ready .personal-media { animation: reveal-media 760ms var(--ease-out) 300ms both; }
.has-js.motion-ready .personal-media__plate--back { animation: reveal-plate-back 880ms var(--ease-out) 340ms backwards; }
.has-js.motion-ready .personal-media__plate--middle { animation: reveal-plate-middle 820ms var(--ease-out) 410ms backwards; }

@keyframes ambient-in {
  from { opacity: .58; }
  to { opacity: 1; }
}
@keyframes reveal-brand {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-nav {
  from { opacity: 0; filter: blur(8px); transform: translateY(-10px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes reveal-copy {
  from { opacity: 0; filter: blur(7px); transform: translateY(26px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes reveal-name {
  from { opacity: 0; filter: blur(9px); transform: translateY(28px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes reveal-chip {
  from { opacity: 0; filter: blur(5px); transform: translateY(14px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes reveal-media {
  from { opacity: 0; filter: blur(8px); transform: translateX(28px) scale(.985); }
  to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); }
}
@keyframes reveal-plate-back {
  from { opacity: 0; transform: translate3d(20px, 8px, 0) rotate(-4.5deg); }
  to { opacity: .48; transform: translate3d(var(--plate-x), var(--plate-y), 0) rotate(-3.2deg); }
}
@keyframes reveal-plate-middle {
  from { opacity: 0; transform: translate3d(14px, 5px, 0) rotate(-2.5deg); }
  to { opacity: .66; transform: translate3d(var(--plate-x), var(--plate-y), 0) rotate(-1.15deg); }
}
@keyframes ambient-mint {
  from { transform: translate3d(var(--ambient-pointer-x), var(--ambient-pointer-y), 0); }
  to { transform: translate3d(calc(var(--ambient-pointer-x) + 18px), calc(var(--ambient-pointer-y) + 10px), 0); }
}
@keyframes ambient-sky {
  from { transform: translate3d(var(--ambient-pointer-x), var(--ambient-pointer-y), 0); }
  to { transform: translate3d(calc(var(--ambient-pointer-x) - 20px), calc(var(--ambient-pointer-y) + 14px), 0); }
}
@keyframes ambient-cream {
  from { transform: translate3d(var(--ambient-pointer-x), var(--ambient-pointer-y), 0); }
  to { transform: translate3d(calc(var(--ambient-pointer-x) - 12px), calc(var(--ambient-pointer-y) - 18px), 0); }
}
@keyframes ambient-lavender {
  from { transform: translate3d(var(--ambient-pointer-x), var(--ambient-pointer-y), 0); }
  to { transform: translate3d(calc(var(--ambient-pointer-x) + 14px), calc(var(--ambient-pointer-y) - 12px), 0); }
}

/* Focus, hover and pointer states */
.glass-nav__item:focus-visible, .cta:focus-visible, .menu-toggle:focus-visible, .mobile-nav a:focus-visible {
  outline: 3px solid rgba(49, 92, 201, .54);
  outline-offset: 4px;
}
.thumbnail:focus-visible { outline: 3px solid rgba(49, 92, 201, .54); outline-offset: 4px; }
.media-showcase.is-pointer-active {
  transition: transform 90ms var(--ease-standard), box-shadow var(--motion-base) var(--ease-out);
  will-change: transform;
}
.media-showcase.is-pointer-active .media-placeholder,
.media-showcase.is-pointer-active .media-showcase__overlay,
.personal-media.is-pointer-active .personal-media__plate { will-change: transform; }
.media-showcase.is-pointer-active .media-placeholder {
  transition: opacity 240ms var(--ease-out), transform 100ms var(--ease-standard), background var(--motion-scene) var(--ease-out);
}
.media-showcase.is-pointer-active .media-showcase__overlay,
.media-showcase.is-pointer-active .media-play,
.personal-media.is-pointer-active .personal-media__plate { transition-duration: 110ms; }

@media (hover: hover) and (pointer: fine) {
  .glass-surface:hover > .glass-specular { opacity: .8; }
  .glass-nav__item:hover, .glass-nav__item:focus-visible { color: #1d3157; transform: translateY(-1px); }
  .skill-pill:hover, .skill-pill:focus-within { filter: brightness(1.035); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(72, 92, 116, .13), var(--glass-inset-control); }
  .skill-pill:hover .skill-pill__icon { transform: translate3d(1px, -1px, 0); }
  .cta--primary:hover { --cta-lift: -2px; box-shadow: 0 20px 42px rgba(39, 58, 80, .25), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(7, 19, 33, .1); }
  .cta--primary:hover .cta__icon { transform: translateX(4px); }
  .cta--primary:hover .cta__label { transform: translateX(1px); }
  .cta--secondary:hover { --cta-lift: -1px; filter: brightness(1.035); box-shadow: 0 16px 36px rgba(72, 92, 116, .13), var(--glass-inset-control); }
  .cta:active { --cta-lift: 0px; filter: brightness(.985); }
  .thumbnail:hover { filter: brightness(1.04); transform: translate3d(-3px, -1px, 0); }
  .thumbnail.is-active:hover { filter: brightness(1.08) saturate(1.05); transform: translate3d(-3px, -1px, 0) scale(1.012); }
  .thumbnail:active { transform: translateX(-1px) scale(.985); }
  .media-showcase:hover { box-shadow: 0 40px 94px rgba(77, 101, 128, .19), 0 10px 28px rgba(77, 101, 128, .08), var(--glass-inset-media); }
}

@media (max-width: 1080px) {
  .header-note { display: none; }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .glass-nav { justify-self: end; }
  .hero { width: min(62rem, calc(100% - 2 * var(--page-gutter))); grid-template-columns: minmax(21rem, .9fr) minmax(30rem, 1.1fr); gap: 2.2rem; }
  .hero-lockup { font-size: clamp(3.8rem, 7vw, 5.4rem); }
  .hero__description { max-width: 34rem; font-size: .9rem; line-height: 1.82; }
  .hero__description br { display: none; }
  .personal-media { padding-right: 2.2rem; }
}

@media (max-width: 820px) {
  .site-header { top: .9rem; }
  .site-header__inner { width: calc(100% - 2rem); }
  .glass-nav { display: none; }
  .menu-toggle { display: inline-flex; min-height: 2.8rem; align-items: center; justify-self: end; gap: .55rem; padding: .55rem .8rem; font-size: .78rem; }
  .menu-toggle__icon, .menu-toggle__icon::after { display: block; width: 1rem; height: 1px; background: currentColor; content: ""; }
  .menu-toggle__icon::after { transform: translateY(5px); }
  .mobile-nav { position: absolute; top: calc(100% + .7rem); right: 0; left: 0; flex-direction: column; align-items: stretch; gap: .18rem; padding: .7rem; border-radius: var(--radius-card); }
  .mobile-nav.is-open { display: flex; animation: mobile-menu-in 260ms var(--ease-out) both; }
  .mobile-nav a { min-height: 2.8rem; padding: .62rem .9rem; border-radius: var(--radius-control); text-decoration: none; }
  .mobile-nav a[aria-current="page"] { background: rgba(255, 255, 255, .68); }
  .hero { width: min(42rem, calc(100% - 2rem)); min-height: auto; padding: 7.4rem 0 3rem; grid-template-columns: 1fr; gap: 3.5rem; }
  .hero__copy { padding: 0; }
  .hero-lockup { font-size: clamp(3.75rem, 16vw, 5.6rem); }
  .hero__description { font-size: .95rem; line-height: 1.8; }
  .personal-media { max-width: 39rem; justify-self: center; padding: 1rem 2rem 1rem .8rem; }
  .media-showcase { min-height: 28rem; }
  .thumbnail-rail { width: 3.8rem; padding: .48rem; }
  .thumbnail { width: 2.72rem; }
  .has-js.motion-ready .menu-toggle { animation: reveal-brand 540ms var(--ease-out) 140ms both; }
  .has-js.motion-ready .hero-lockup__line--en,
  .has-js.motion-ready .hero-lockup__line--cn,
  .has-js.motion-ready .hero-lockup__line--name,
  .has-js.motion-ready .hero__role,
  .has-js.motion-ready .hero__description,
  .has-js.motion-ready .skill-pill,
  .has-js.motion-ready .hero__actions { animation-duration: 560ms; }
  .has-js.motion-ready .personal-media { animation-name: reveal-media-mobile; animation-duration: 660ms; }
}

@media (max-width: 520px) {
  .wordmark { min-height: 2.75rem; justify-content: center; }
  .wordmark__name { font-size: .68rem; }
  .wordmark__role { font-size: .44rem; }
  .hero-lockup { font-size: clamp(3.5rem, 18vw, 4.9rem); }
  .hero__role { font-size: .96rem; }
  .hero__description br { display: none; }
  .hero__description { max-width: 100%; overflow-wrap: anywhere; }
  .skill-pills { max-width: 100%; gap: .35rem; }
  .skill-pill { min-height: 2.75rem; padding-inline: .55rem; font-size: .7rem; }
  .hero__actions { align-items: stretch; }
  .cta--primary { min-width: 11.5rem; }
  .personal-media { padding: .75rem 1.4rem .75rem .25rem; }
  .media-showcase { min-height: 24rem; border-radius: var(--radius-media-mobile); }
  .media-showcase__viewport { border-radius: calc(var(--radius-media-mobile) - 7px); }
  .thumbnail-rail { right: -.35rem; width: 3.25rem; gap: .45rem; padding: .4rem; }
  .thumbnail { width: 2.3rem; border-radius: var(--radius-thumbnail-mobile); }
  .media-showcase__footer { right: 1.25rem; bottom: 1.2rem; left: 1.25rem; grid-template-columns: 1fr auto; }
  .media-showcase__caption { display: none; }
  .media-play { width: 4.1rem; height: 4.1rem; }
}

@media (hover: none), (pointer: coarse) {
  .cta:active, .thumbnail:active, .menu-toggle:active { transform: scale(.985); }
  .work-card:active { --card-lift: -2px; }
}

@keyframes mobile-menu-in {
  from { opacity: 0; filter: blur(5px); transform: translateY(-8px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes reveal-media-mobile {
  from { opacity: 0; filter: blur(7px); transform: translateY(18px) scale(.99); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .ambient-field__layer,
  .wordmark,
  .glass-nav,
  .header-note,
  .hero-lockup__line,
  .hero__role,
  .hero__description,
  .skill-pill,
  .hero__actions,
  .personal-media,
  .personal-media__plate { opacity: 1 !important; filter: none !important; }
  .ambient-field__layer { transform: none !important; }
  .media-showcase,
  .media-placeholder,
  .media-showcase__overlay { transform: none !important; }
  .media-play { transform: translate(-50%, -50%) !important; }
  .personal-media__plate--back { transform: rotate(-3.2deg) !important; }
  .personal-media__plate--middle { transform: rotate(-1.15deg) !important; }
  .selected-work__intro { opacity: 1 !important; filter: none !important; transform: none !important; }
  .work-card {
    --card-z: 0px !important;
    --card-rotate: 0deg !important;
    --card-tilt-x: 0deg !important;
    --card-tilt-y: 0deg !important;
    --card-entry-y: 0px !important;
    filter: none !important;
    transition-duration: 180ms !important;
    transition-property: transform, opacity !important;
    transition-timing-function: ease-out !important;
  }
  .work-card[data-slot="-1"] { --card-x: calc(var(--cover-near-x) * -.86); --card-scale: .92; --card-opacity: .6; }
  .work-card[data-slot="1"] { --card-x: calc(var(--cover-near-x) * .86); --card-scale: .92; --card-opacity: .6; }
  .work-card[data-slot="-2"], .work-card[data-slot="2"],
  .work-card[data-slot="-3"], .work-card[data-slot="3"],
  .work-card[data-slot="-4"], .work-card[data-slot="4"] { --card-opacity: 0; pointer-events: none; }
  .work-card__media { transform: scale(1.035) !important; transition: none !important; }
  .work-card__highlight { display: none; }
}