/* RC1.3-U approved production integration layer. */

/* Approved Hero Candidate A and transparent Portfolio media surface. */
.pressure-title {
  text-shadow: none !important;
}

[data-canonical-portfolio] figure.p-media,
[data-canonical-portfolio] figure.p-media > img {
  background: transparent !important;
}

/* RC1.3-U unified review only. No production file imports this layer. */

:root {
  --index-paper: #edf5f7;
  --index-muted: rgba(224, 235, 239, 0.58);
  --index-faint: rgba(224, 235, 239, 0.38);
  --index-line: rgba(221, 232, 240, 0.16);
  --index-line-strong: rgba(229, 241, 248, 0.28);
  --index-cyan: #9fe8ef;
  --index-ease: cubic-bezier(.22, .61, .36, 1);
}

/* HERO LIGHTING V2: the atmospheric field belongs to the Hero stage. */
#identity.identity {
  position: relative;
  isolation: isolate;
}

.hero-wide-light-field {
  --hero-wide-x: 35%;
  --hero-wide-y: 48%;
  --hero-wide-strength: 0;
  position: absolute;
  top: -12vh;
  bottom: -18vh;
  left: 50%;
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: var(--hero-wide-strength);
  background:
    radial-gradient(ellipse min(34vw, 540px) min(28vw, 430px) at var(--hero-wide-x) var(--hero-wide-y), rgba(126, 201, 216, .16), rgba(99, 142, 163, .075) 38%, rgba(76, 90, 124, .025) 58%, transparent 78%),
    radial-gradient(ellipse min(24vw, 390px) min(21vw, 330px) at calc(var(--hero-wide-x) + 8%) calc(var(--hero-wide-y) - 6%), rgba(210, 229, 233, .035), transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 68% 74% at 42% 48%, #000 0 52%, rgba(0, 0, 0, .72) 67%, transparent 93%);
  mask-image: radial-gradient(ellipse 68% 74% at 42% 48%, #000 0 52%, rgba(0, 0, 0, .72) 67%, transparent 93%);
  transition: opacity 180ms ease-out;
}

/* The finite Portrait host now carries only a clipped surface response. */
.hero-portrait .hero-optical-veil {
  inset: 0;
  overflow: hidden;
  contain: paint;
  border-radius: var(--radius);
}

.hero-portrait .hero-optical-veil__soft {
  display: none;
}

.desktop-identity .future-webgl-fallback {
  display: none;
}

.hero-portrait .hero-optical-veil__specular {
  inset: 0;
  display: block;
  border-radius: inherit;
  opacity: calc(var(--hero-veil-specular-opacity) * .16);
  background: radial-gradient(ellipse 112px 136px at var(--hero-pointer-x) var(--hero-pointer-y), rgba(230, 244, 246, .52), rgba(153, 205, 217, .20) 37%, transparent 74%);
  filter: blur(14px);
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: screen;
}

.hero-portrait .hero-optical-veil__edge {
  display: none;
}

html[data-hero-option="b"] .hero-portrait .hero-optical-veil__edge {
  inset: 0;
  display: block;
  border-radius: inherit;
  opacity: calc(var(--hero-veil-edge-opacity) * .085);
  background: radial-gradient(ellipse 170px 205px at var(--hero-pointer-x) var(--hero-pointer-y), transparent 25%, rgba(137, 196, 208, .27) 49%, transparent 78%);
  filter: blur(18px);
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: soft-light;
}

html[data-isolate="ambient-off"] body::after,
html[data-isolate="global-ambient-off"] body::after {
  display: none !important;
}

html[data-isolate="hero-lighting-off"] .hero-wide-light-field,
html[data-isolate="hero-lighting-off"] .hero-optical-veil,
html[data-isolate="hero-lighting-off"] .future-webgl-fallback {
  display: none !important;
}

html[data-isolate="restrained-blur-off"] .restrained-blur--hero {
  display: none !important;
}

html[data-isolate="media-overlays-off"] .hero-portrait .media-frame::after,
html[data-isolate="media-overlays-off"] .hero-portrait .gradual-layer {
  display: none !important;
}

/* PORTFOLIO V2: no root slab, no section-wide tint, no hard start/end edge. */
.p-portfolio,
.p-portfolio > .p-section {
  background: transparent !important;
}

.p-portfolio {
  position: relative;
  isolation: auto;
}

.p-portfolio::before,
.p-portfolio::after {
  content: none !important;
}

/* Preserve the accepted viewport-wide Closing backdrop and 1580px inner geometry. */
#closing.closing-bplus {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent;
}

#closing.closing-bplus::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 73% 25%, rgba(87, 128, 139, .065), transparent 34%),
    linear-gradient(to bottom, rgba(4, 7, 11, .72), rgba(4, 7, 11, .66));
}

/* Legacy-character Studio response on the current B+ DOM. */
#closing .bplus-studio__mark-wrap {
  --studio-proximity: 0;
  --studio-glow-x: 50%;
  --studio-glow-y: 50%;
  position: relative;
  grid-column: 10 / 13;
  justify-self: end;
  width: min(100%, 216px);
  aspect-ratio: 1 / 1;
  transform: translateY(64px);
  isolation: isolate;
}

#closing .bplus-studio__mark-wrap .bplus-studio__mark {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  transform: none;
  filter: saturate(.82) brightness(.94);
}

#closing .bplus-studio__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: var(--studio-proximity);
  transition: opacity 560ms cubic-bezier(.22, .72, .2, 1);
  will-change: opacity;
}

#closing .bplus-studio__glow--gold {
  inset: -38%;
  background: radial-gradient(ellipse 49% 45% at var(--studio-glow-x) var(--studio-glow-y), rgba(230, 169, 69, .36), rgba(201, 139, 52, .12) 42%, transparent 76%);
  filter: blur(34px);
}

#closing .bplus-studio__glow--cool {
  inset: -48%;
  background: radial-gradient(ellipse 48% 43% at var(--studio-glow-x) var(--studio-glow-y), rgba(76, 163, 186, .20), rgba(47, 116, 143, .065) 47%, transparent 79%);
  filter: blur(44px);
  transform: translate(-3%, 5%);
}

/* PROJECT INDEX V2.3 — native same-document floating UI. */
.project-index-veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  border: 0;
  background: rgba(1, 4, 8, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

body.project-index-open > .project-index-veil {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.project-index-shell {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.project-index-trigger {
  position: absolute;
  right: 18px;
  top: 50%;
  display: grid;
  grid-template-rows: 8px 15px;
  gap: 7px;
  align-content: center;
  justify-items: end;
  width: 82px;
  height: 58px;
  padding: 11px 12px;
  border: 1px solid var(--index-line);
  border-radius: 9px;
  color: var(--index-paper);
  background: rgba(5, 8, 13, .72);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: right;
  transform: translateX(7px) scale(.985);
  transition: opacity 290ms cubic-bezier(.4, 0, .6, 1), transform 290ms cubic-bezier(.4, 0, .6, 1), visibility 0s linear 290ms, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.project-index-shell.is-portfolio .project-index-trigger {
  opacity: .74;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 360ms cubic-bezier(.22, .72, .2, 1), transform 360ms cubic-bezier(.22, .72, .2, 1), visibility 0s;
}

.project-index-trigger::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
}

.project-index-trigger:hover,
.project-index-trigger:focus-visible {
  border-color: var(--index-line-strong);
  box-shadow: 0 0 16px rgba(159, 232, 239, .08);
}

.project-index-trigger.is-discovering::before {
  animation: project-index-discovery 1180ms var(--index-ease) 100ms 1;
}

@keyframes project-index-discovery {
  0% { border-color: transparent; box-shadow: 0 0 0 rgba(159, 232, 239, 0); }
  34% { border-color: rgba(159, 232, 239, .58); box-shadow: 0 0 17px rgba(159, 232, 239, .20); }
  100% { border-color: transparent; box-shadow: 0 0 0 rgba(159, 232, 239, 0); }
}

.project-index-trigger:focus-visible,
.project-index-close:focus-visible,
.project-index-level-one:focus-visible,
.project-index-project-link:focus-visible {
  outline: 1px solid var(--index-cyan);
  outline-offset: 4px;
}

.project-index-trigger__label {
  color: rgba(224, 235, 239, .42);
  font-size: 8px;
  font-weight: 480;
  line-height: 1;
  letter-spacing: .16em;
}

.project-index-trigger__current-wrap {
  display: grid;
  grid-template-areas: "label";
  overflow: hidden;
}

.project-index-trigger__current {
  grid-area: label;
  max-width: 58px;
  color: rgba(237, 245, 247, .94);
  font-size: 13px;
  font-weight: 610;
  line-height: 15px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 190ms ease, transform 210ms var(--index-ease);
}

.project-index-trigger__current.is-out {
  opacity: 0;
  transform: translateY(-3px);
}

.project-index-panel {
  position: absolute;
  top: 104px;
  right: 18px;
  width: 254px;
  max-height: calc(100vh - 152px);
  overflow: auto;
  padding: 20px 22px 24px;
  border: 1px solid var(--index-line-strong);
  border-radius: 11px;
  color: var(--index-paper);
  background: rgba(4, 7, 11, .92);
  box-shadow: -24px 0 48px rgba(0, 0, 0, .16);
  opacity: 0;
  transform: translateX(18px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 240ms var(--index-ease), visibility 0s linear 240ms;
}

.project-index-shell.is-open .project-index-panel {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.project-index-shell.is-open .project-index-trigger {
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
}

.project-index-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--index-line);
}

.project-index-eyebrow {
  margin: 0;
  color: var(--index-paper);
  font-size: 10px;
  font-weight: 640;
  line-height: 1;
  letter-spacing: .16em;
}

.project-index-context {
  display: block;
  margin-top: 7px;
  color: var(--index-faint);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.project-index-close {
  width: 28px;
  height: 28px;
  margin-top: -8px;
  margin-right: -8px;
  border: 0;
  color: var(--index-muted);
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.project-index-nav {
  display: grid;
  margin-top: 8px;
}

.project-index-group {
  border-bottom: 1px solid var(--index-line);
}

.project-index-level-one {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0 14px;
  border: 0;
  color: var(--index-faint);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  font-weight: 540;
  line-height: 1;
  letter-spacing: .13em;
  transition: color 180ms ease, padding-left 200ms var(--index-ease);
}

.project-index-level-one::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--index-cyan);
  opacity: 0;
  transition: width 200ms var(--index-ease), opacity 180ms ease;
}

.project-index-state-mark {
  font-size: 12px;
  font-weight: 300;
  opacity: .42;
  transition: transform 220ms var(--index-ease), opacity 180ms ease;
}

.project-index-group.is-current .project-index-level-one,
.project-index-group.is-expanded .project-index-level-one {
  color: var(--index-paper);
  padding-left: 14px;
}

.project-index-group.is-current .project-index-level-one::before {
  width: 7px;
  opacity: .7;
}

.project-index-group.is-expanded .project-index-state-mark {
  transform: rotate(45deg);
  opacity: .8;
}

.project-index-project-list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-index-group.is-expanded .project-index-project-list {
  display: block;
}

.project-index-project-list__inner > div {
  display: grid;
  gap: 1px;
  padding: 0 0 15px 14px;
}

.project-index-project-link {
  position: relative;
  width: 100%;
  padding: 6px 0;
  border: 0;
  color: rgba(224, 235, 239, .48);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-weight: 445;
  line-height: 1.35;
  letter-spacing: .005em;
  transition: color 160ms ease, transform 180ms var(--index-ease);
}

.project-index-project-link:hover {
  color: rgba(237, 245, 247, .78);
  transform: translateX(2px);
}

.project-index-project-link[aria-current="true"] {
  color: var(--index-paper);
  transform: translateX(5px);
}

.project-index-project-link[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 5px;
  height: 1px;
  background: var(--index-cyan);
  opacity: .78;
}

@media (max-width: 820px) {
  .hero-wide-light-field,
  .desktop-identity .hero-optical-veil {
    display: none !important;
  }

  #closing .bplus-studio__mark-wrap {
    grid-column: 2;
    width: 104px;
    transform: translateY(24px) scale(1.153846);
    transform-origin: right center;
  }

  #closing .bplus-studio__glow {
    opacity: .035;
    transition: none;
    will-change: auto;
  }

  .project-index-trigger {
    top: auto;
    right: 12px;
    bottom: 76px;
    width: 82px;
    height: 58px;
    padding: 11px 12px;
    border-radius: 9px;
    background: rgba(5, 8, 13, .76);
  }

  .project-index-panel {
    top: auto;
    left: auto;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: min(260px, calc(100vw - 24px));
    max-height: 38vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--index-line-strong);
    border-radius: 13px;
    background: rgba(4, 7, 11, .70);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    transform: translateY(12px);
  }

  .project-index-shell.is-open .project-index-panel { transform: none; }

  .project-index-panel__head {
    flex: 0 0 auto;
    align-items: center;
    padding: 10px 12px 9px;
  }

  .project-index-context { display: none; }

  .project-index-close {
    width: 40px;
    height: 40px;
    margin: 0 -6px 0 0;
    border: 1px solid rgba(229, 241, 248, .09);
    border-radius: 9px;
    color: rgba(224, 235, 239, .48);
    font-size: 17px;
  }

  .project-index-nav {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0 10px 10px;
    scrollbar-width: thin;
  }

  .project-index-group { border-bottom: 0; }

  .project-index-level-one {
    min-height: 42px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 11px;
  }

  .project-index-level-one::after,
  .project-index-project-link::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 0;
    height: 1px;
    background: rgba(229, 241, 248, .11);
    pointer-events: none;
  }

  .project-index-group:last-child > .project-index-level-one::after,
  .project-index-project-list__inner > div > .project-index-project-link:last-child::after {
    opacity: .28;
  }

  .project-index-group.is-current .project-index-level-one,
  .project-index-group.is-expanded .project-index-level-one { padding-left: 22px; }

  .project-index-group.is-current .project-index-level-one::before { left: 10px; }

  .project-index-level-one:hover,
  .project-index-level-one:active,
  .project-index-level-one:focus-visible,
  .project-index-project-link:hover,
  .project-index-project-link:active,
  .project-index-project-link:focus-visible {
    background: rgba(237, 245, 247, .045);
    color: rgba(237, 245, 247, .86);
  }

  .project-index-level-one:active,
  .project-index-project-link:active { transform: translateX(1px); }

  .project-index-project-list__inner > div {
    gap: 0;
    padding: 0 0 0 12px;
  }

  .project-index-project-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.22;
  }

  .project-index-project-link[aria-current="true"] { transform: translateX(2px); }
  .project-index-project-link[aria-current="true"]::before { left: 2px; width: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wide-light-field,
  #closing .bplus-studio__glow,
  .project-index-veil,
  .project-index-trigger,
  .project-index-trigger::before,
  .project-index-trigger__current,
  .project-index-panel,
  .project-index-level-one,
  .project-index-level-one::before,
  .project-index-state-mark,
  .project-index-project-list,
  .project-index-project-link {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .hero-wide-light-field { display: none; }

  #closing .bplus-studio__glow {
    opacity: .025;
    will-change: auto;
  }
}

/* RC1.3-U content-order review only. Presentation alignment; no sizing/crop/geometry system changes. */

@media (min-width: 821px) {
  [data-project-id="xu-rongzhen-account"] [data-frame-id="people-05"],
  [data-project-id="xu-rongzhen-account"] [data-frame-id="people-01"],
  [data-project-id="kk-music-blogger-account"] [data-frame-id="kk-music-blogger-account-05"] {
    align-self: center;
  }
}

@media (max-width: 820px) {
  [data-project-id="xu-rongzhen-account"] [data-frame-id="people-05"] {
    align-self: center;
  }
}

/* RC1.3-U final Closing narrative review only. Approved Candidate A geometry is inherited. */

#closing .bplus-collaboration__modes {
  display: grid;
  row-gap: clamp(54px, 4.8vw, 74px);
}

#closing .bplus-mode + .bplus-mode {
  margin-top: 0;
}

#closing .bplus-mode--team {
  color: var(--bplus-support);
}

#closing .bplus-team-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px clamp(18px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#closing .bplus-team-list li {
  position: relative;
  padding-top: 10px;
  color: var(--bplus-muted);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 430;
  line-height: 1.65;
  white-space: nowrap;
}

#closing .bplus-team-list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 1px;
  background: var(--bplus-cyan);
  opacity: 0.38;
}

#closing .bplus-contact__positioning {
  max-width: 500px;
  margin: clamp(24px, 2.1vw, 30px) 0 0;
  color: var(--bplus-faint);
  font-size: 13px;
  line-height: 1.7;
  text-wrap: pretty;
}

#closing .bplus-studio__subtitle {
  color: var(--bplus-faint);
  font-size: 14px;
}

@media (max-width: 820px) {
  #closing .bplus-collaboration__modes {
    display: grid;
    row-gap: 54px;
  }

  #closing .bplus-project-list,
  #closing .bplus-role-list {
    margin-top: 20px;
  }

  #closing .bplus-role-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #closing .bplus-team-list {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 20px;
  }

  #closing .bplus-team-list li {
    font-size: 17px;
  }

  #closing .bplus-contact__positioning {
    max-width: none;
    margin-top: 26px;
    font-size: 12px;
  }

  #closing .bplus-contact__direct {
    margin-top: 54px;
  }

  #closing .bplus-studio__subtitle {
    font-size: 13px;
    line-height: 1.55;
  }

  [data-project-id="xu-rongzhen-account"] [data-frame-id="people-01"] {
    align-self: center;
  }
}