:root {
  --orange: #ff6500;
  --orange-soft: #ff9746;
  --orange-line: #ff792f66;
}

html.runtime-safe,
html.runtime-safe body,
html.runtime-safe main {
  opacity: 1 !important;
  visibility: visible !important;
}

img.asset-load-failed { opacity: 0 !important; }

.micro,
.section-head > div > .micro,
.section-head > a,
.playlist span,
.life-log-card small,
.theme-player-top > span,
.music-release-note span {
  color: var(--orange) !important;
}

.primary {
  color: #180b02;
  background: linear-gradient(135deg, #ff9943, #ff5d00);
  box-shadow: 0 10px 30px #ff65002c;
}

.secondary:hover,
.team-file-link:hover,
.section-head > a:hover {
  color: var(--orange-soft);
  border-color: var(--orange-line);
}

.team-status i,
.theme-player-top i.playing {
  background: var(--orange);
  box-shadow: 0 0 12px #ff6500aa;
}

.section-head {
  border-bottom-color: #ff792f31;
}

.section-head::after,
.archive-media::before,
.record-list button::before {
  color: #ffc39e;
  border-color: #ff792f47;
}

.playlist button.active {
  background: #ff650017;
  box-shadow: inset 3px 0 0 var(--orange);
}

.playlist button.active::after {
  color: var(--orange-soft);
}

.playlist b {
  gap: 3px;
  display: grid;
}

.playlist b em,
.track-cn {
  color: #9eabb3;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.album img.vinyl-art {
  border: 1px solid #ff792f4a;
  border-radius: 50%;
  background: #050507;
  padding: 0;
  box-shadow: 0 0 0 7px #05090d, 0 0 0 8px #ff792f24, 0 18px 42px #0009;
  transform: rotate(-3deg);
  transform-origin: 50% 50%;
}

.album img.vinyl-art.playing {
  animation: fsa-vinyl-spin 7s linear infinite;
}

@keyframes fsa-vinyl-spin {
  to { transform: rotate(357deg); }
}

.site-header {
  height: 86px;
}

.site-header .nav-shell {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(210px, 1fr);
  gap: 22px;
  justify-content: initial;
}

.site-brand {
  min-width: 0;
  line-height: 1.15;
  display: grid;
  justify-self: start;
}

.site-brand strong {
  color: #f3f6f7;
  letter-spacing: .035em;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
}

.site-brand small {
  color: var(--orange-soft);
  letter-spacing: .14em;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 700;
}

.site-brand .brand-mobile { display: none; }

.site-header .desktop-nav {
  justify-self: center;
}

.site-header .header-socials {
  justify-self: end;
  position: static;
}

.header-socials .social-link,
.mobile-socials .social-link {
  border-color: #ff792f42;
}

.pattern-layer {
  background-image:
    radial-gradient(42% 12% at 8% 23%, transparent 66%, #ff7a2d28 67% 68%, transparent 69%),
    radial-gradient(36% 10% at 95% 61%, transparent 66%, #ff9a4430 67% 68%, transparent 69%),
    radial-gradient(circle at 11% 17%, #ff8a3330 0 16px, #ffd18c4c 17px 19px, transparent 20px),
    linear-gradient(118deg, transparent 0 18%, #ff792f19 18.1% 18.35%, transparent 18.5% 72%, #4ab5cb18 72.1% 72.35%, transparent 72.5%);
}

.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  pointer-events: none;
  opacity: .26;
  background:
    linear-gradient(90deg, transparent 0 4%, #ff792f 4% 7%, transparent 7% 11%, #ff792f 11% 16%, transparent 16% 20%, #ff792f 20% 22%, transparent 22% 28%, #ff792f 28% 34%, transparent 34% 40%, #ff792f 40% 44%, transparent 44% 51%, #ff792f 51% 58%, transparent 58% 66%, #ff792f 66% 69%, transparent 69% 75%, #ff792f 75% 82%, transparent 82% 89%, #ff792f 89% 94%, transparent 94%) bottom / 100% 46px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 29px, #ff792f36 30px 31px) bottom / 100% 82px no-repeat;
  position: absolute;
  inset: auto 0 0;
  height: 82px;
}

.public-contact {
  gap: 5px;
  display: grid;
}

.footer-right {
  min-width: 310px;
  margin-left: auto;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 14px;
  text-align: right;
}

.footer-right > small {
  color: #657987;
  letter-spacing: .08em;
}

.public-contact p,
.public-contact span {
  color: #718592;
  letter-spacing: .12em;
  margin: 0;
  font-size: 9px;
}

.public-contact a {
  color: var(--orange-soft);
  font-size: 14px;
  font-weight: 750;
}

@media (width <= 760px) {
  .footer-right {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-items: start;
    text-align: left;
  }
}

@media (width <= 1320px) {
  .site-header { height: auto; }
  .site-header .nav-shell {
    width: calc(100% - 24px);
    min-height: 64px;
    padding: 8px 0;
    display: grid;
    grid-template-columns: 1fr;
  }
  .site-brand { width: 100%; }
  .site-brand .brand-desktop { display: none; }
  .site-brand .brand-mobile { display: block; }
  .site-brand strong { font-size: 13px; }
  .site-brand small { font-size: 8px; }
  .site-header .desktop-nav,
  .site-header .header-socials,
  .site-header .menu-toggle { display: none !important; }
  .site-header .mobile-menu {
    border-top: 1px solid #ff792f2b;
    padding: 7px 12px 9px;
    display: flex !important;
    position: static;
    overflow-x: auto;
    box-shadow: none;
  }
  .mobile-menu nav {
    width: max-content;
    max-width: none;
    flex: 0 0 auto;
    gap: 7px;
    display: flex;
  }
  .mobile-menu nav a {
    min-width: 88px;
    min-height: 44px;
    padding: 8px 10px;
  }
  .mobile-menu nav a span {
    font-size: 15px;
    font-weight: 800;
  }
  .mobile-socials {
    flex: 0 0 auto;
    gap: 7px;
    margin-left: 7px;
    display: flex;
  }
  .mobile-socials .social-link {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

@media (width <= 720px) {
  .site-brand strong { white-space: normal; font-size: 12px; }
  .album img.vinyl-art { width: 150px; height: 150px; }
  .playlist b em { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .album img.vinyl-art.playing { animation: none; }
}

/* v0.36.1: neon city, citrus orbit and orange section split */
#team,
#vlog,
#music {
  position: relative;
  isolation: isolate;
}

#team {
  padding-top: 88px;
  padding-bottom: 104px;
}

#team::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 54%;
  transform: translateX(-50%);
  clip-path: polygon(0 28%, 23% 17%, 52% 31%, 76% 9%, 100% 21%, 100% 100%, 0 100%);
  background:
    linear-gradient(112deg, #e74b00 0%, #ff6500 45%, #ff8a24 100%);
  box-shadow: inset 0 1px 0 #ffd2ae80, 0 -18px 60px #ff65001f;
}

#team::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 12px;
  width: 100vw;
  height: 190px;
  transform: translateX(-50%);
  opacity: .48;
  background:
    linear-gradient(90deg, transparent 0 3%, #07202c 3% 3.2%, transparent 3.2% 8%, #07202c 8% 8.2%, transparent 8.2% 13%, #07202c 13% 13.2%, transparent 13.2% 19%, #07202c 19% 19.2%, transparent 19.2% 26%, #07202c 26% 26.2%, transparent 26.2% 34%, #07202c 34% 34.2%, transparent 34.2% 43%, #07202c 43% 43.2%, transparent 43.2% 52%, #07202c 52% 52.2%, transparent 52.2% 61%, #07202c 61% 61.2%, transparent 61.2% 70%, #07202c 70% 70.2%, transparent 70.2% 79%, #07202c 79% 79.2%, transparent 79.2% 88%, #07202c 88% 88.2%, transparent 88.2% 96%, #07202c 96% 96.2%, transparent 96.2%),
    linear-gradient(165deg, transparent 0 57%, #07202c 57.3% 58%, transparent 58.3%),
    repeating-linear-gradient(0deg, transparent 0 28px, #06243188 29px 30px);
  border-bottom: 2px solid #07202c;
}

.team-grid {
  position: relative;
}

.team-grid::before,
.section-head::before {
  content: "";
  position: absolute;
  width: 78px;
  height: 42px;
  border: 2px solid #ffd47e;
  border-radius: 78px 78px 12px 12px;
  background:
    radial-gradient(circle at 50% 100%, #fff1b0 0 5px, transparent 6px),
    repeating-conic-gradient(from 270deg at 50% 100%, #fff4bd 0 2deg, #ff9b12 3deg 22deg, #ffdc69 23deg 25deg);
  box-shadow: 0 0 0 4px #ff6500, 0 0 22px #ff9b3c8c;
  transform: rotate(-9deg);
}

.team-grid::before {
  right: -42px;
  top: -72px;
}

.team-grid::after {
  content: "";
  position: absolute;
  right: 3px;
  top: -22px;
  width: 16px;
  height: 24px;
  border: 2px solid #ffd47e;
  border-radius: 70% 30% 65% 35%;
  background: #ff7b08;
  box-shadow: 25px 13px 0 -3px #ffb229, 25px 13px 0 -1px #ffd47e;
  transform: rotate(37deg);
}

#vlog .section-head::before,
#music .section-head::before {
  right: 42px;
  top: -26px;
  width: 56px;
  height: 30px;
  opacity: .72;
}

#vlog .section-head::after,
#music .section-head::after {
  content: "";
  position: absolute;
  right: 56px;
  top: 13px;
  width: 11px;
  height: 17px;
  border-radius: 65% 35% 65% 35%;
  background: var(--orange);
  box-shadow: 17px 9px 0 -2px var(--orange-soft);
  transform: rotate(34deg);
}

#vlog::before,
#music::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 42vw;
  height: 180px;
  pointer-events: none;
  opacity: .35;
  border: 1px solid #ff7d39;
  border-color: #ff7d39 transparent transparent;
  border-radius: 50%;
}

#vlog::before {
  left: -24vw;
  top: 40px;
  transform: rotate(10deg);
}

#music::before {
  right: -25vw;
  top: 10px;
  transform: rotate(-13deg);
}

.pattern-layer {
  background-image:
    url("/favicon-orange-v2.svg"),
    url("/favicon-orange-v2.svg"),
    radial-gradient(42% 12% at 8% 23%, transparent 66%, #ff7a2d3d 67% 68%, transparent 69%),
    radial-gradient(36% 10% at 95% 61%, transparent 66%, #35d5cc3d 67% 68%, transparent 69%),
    linear-gradient(118deg, transparent 0 18%, #ff792f24 18.1% 18.35%, transparent 18.5% 72%, #43d7d026 72.1% 72.35%, transparent 72.5%);
  background-repeat: no-repeat;
  background-size: 78px 78px, 54px 54px, auto, auto, auto;
  background-position: 4vw 31vh, calc(100vw - 96px) 68vh, center, center, center;
}

@media (width <= 900px) {
  #team { padding-top: 72px; padding-bottom: 80px; }
  #team::before { height: 62%; clip-path: polygon(0 16%, 42% 8%, 70% 18%, 100% 5%, 100% 100%, 0 100%); }
  #team::after { height: 130px; opacity: .28; }
  .team-grid::before { right: 12px; top: -58px; width: 58px; height: 32px; }
  .team-grid::after { right: 33px; top: -18px; width: 12px; height: 18px; }
  #vlog .section-head::before,
  #music .section-head::before { right: 12px; }
  .pattern-layer { background-size: 54px 54px, 42px 42px, auto, auto, auto; background-position: 10px 33vh, calc(100vw - 52px) 72vh, center, center, center; }
}

/* v0.36.2: type scale and one consistent orange system */
:root {
  --orange: #ff6500;
  --orange-soft: #ff9a3d;
  --orange-line: #ff650052;
  --orange-glow: #ff650028;
}

.site-header {
  height: 78px;
  border-bottom-color: #ff65003d;
}

.site-header .nav-shell {
  width: min(96%, 1900px);
  grid-template-columns: minmax(320px, 1.15fr) minmax(820px, 2.8fr) minmax(150px, .7fr);
  gap: clamp(12px, 1.4vw, 28px);
}

.site-brand strong {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 15px;
  letter-spacing: .025em;
}

.site-brand .brand-en,
.site-brand small,
.nav-en,
.mobile-menu nav small {
  color: var(--orange) !important;
}

.site-brand .brand-en {
  font-size: 13px;
  letter-spacing: .01em;
}

.site-brand .brand-official {
  color: #d8e0e4;
  font-size: 12px;
  letter-spacing: .05em;
}

.site-brand small {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: .16em;
}

.site-header .desktop-nav {
  width: 100%;
  justify-content: space-between;
  gap: clamp(8px, .9vw, 18px);
}

.site-header .desktop-nav a {
  min-width: 64px;
  padding: 8px 4px;
}

.nav-cn {
  font-size: 15px !important;
  line-height: 1.05;
  letter-spacing: .08em;
  font-weight: 760;
}

.nav-en {
  margin-top: 6px;
  font-size: 9px !important;
  line-height: 1;
  letter-spacing: .18em;
  font-weight: 800;
}

.micro,
.route-code,
.case-meta span,
.archive-label,
.record-code,
.toy-stamp,
.toy-specs span,
.status-list span,
.music-release-note span,
.playlist span,
.life-log-card small,
.theme-player-top > span,
.footer-motto {
  color: var(--orange) !important;
}

.primary,
.route-home:hover,
.team-file-link:hover,
.section-head > a:hover,
.record-list button:hover {
  border-color: var(--orange-line) !important;
}

.primary {
  background: linear-gradient(135deg, var(--orange-soft), var(--orange));
  box-shadow: 0 10px 30px var(--orange-glow);
}

.team-status i,
.theme-player-top i.playing,
.toy-status i {
  background: var(--orange) !important;
  box-shadow: 0 0 12px #ff6500a6 !important;
}

@media (width <= 1540px) and (width > 1320px) {
  .site-header .nav-shell {
    grid-template-columns: minmax(285px, 1fr) minmax(760px, 2.65fr) minmax(128px, .55fr);
    gap: 12px;
  }
  .site-brand strong { font-size: 13px; gap: 5px; }
  .site-brand .brand-en { font-size: 11px; }
  .site-brand .brand-official { font-size: 10px; }
  .site-header .desktop-nav { gap: 6px; }
  .site-header .desktop-nav a { min-width: 58px; }
  .nav-cn { font-size: 14px !important; }
  .nav-en { font-size: 8px !important; }
}

@media (width <= 1320px) {
  .site-header { height: auto; }
  .site-brand strong { display: flex; flex-wrap: wrap; font-size: 13px; }
  .site-brand .brand-en { font-size: 11px; }
  .mobile-menu nav small { font-size: 9px; letter-spacing: .12em; }

  .site-header .mobile-menu {
    width: 100%;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible !important;
  }

  .mobile-menu nav {
    width: 100%;
    padding: 8px 12px 9px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #ffb06f55 transparent;
  }

  .mobile-socials {
    width: 100%;
    margin: 0;
    padding: 8px 12px 10px;
    justify-content: flex-start;
    border-top: 1px solid #7b210044;
    background: #c83f001f;
  }

  .mobile-socials .social-link {
    width: 42px;
    height: 38px;
    min-height: 38px;
  }
}

/* v0.36.9: synchronized global music controller */
.floating-music {
  position: fixed;
  z-index: 48;
  top: 104px;
  left: max(18px, calc((100vw - 1420px) / 2));
  width: min(292px, calc(100vw - 36px));
  color: #e8f0f3;
  border: 1px solid #4f7585;
  border-top: 3px solid var(--orange);
  border-radius: 3px;
  background: #061018;
  box-shadow: 0 18px 48px #000a, inset 0 0 0 1px #ffffff08;
  overflow: hidden;
}

.floating-music::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-left: 18px solid #ff65000b;
}

.floating-music-top {
  position: relative;
  z-index: 1;
  min-height: 29px;
  padding: 0 8px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #89a8b5;
  border-bottom: 1px solid #4f758547;
  background: #030b10;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .16em;
}

.floating-music button {
  color: inherit;
  font: inherit;
}

.floating-music-list-toggle {
  min-height: 21px;
  padding: 0 7px;
  color: #ff9a54 !important;
  border: 1px solid #ff650064;
  background: #ff65000f;
  cursor: pointer;
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .13em;
}

.floating-music-list-toggle.active {
  color: #071018 !important;
  background: var(--orange);
}

.floating-music-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.floating-music-main > img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid #ff8c4873;
  border-radius: 50%;
  background: #020508;
  box-shadow: 0 0 0 4px #03090d, 0 0 0 5px #ff650027;
}

.floating-music-main > img.playing {
  animation: fsa-vinyl-spin 7s linear infinite;
}

.floating-music-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.floating-music-copy > span {
  color: var(--orange);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.floating-music-copy > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f3f6f7;
  font-size: 12px;
  line-height: 1.25;
}

.floating-music-copy > small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #7f98a3;
  font-size: 9px;
}

.floating-music-controls {
  position: relative;
  z-index: 1;
  padding: 0 10px 8px;
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr;
  gap: 5px;
}

.floating-music-controls button {
  min-height: 29px;
  color: #dce8ed;
  border: 1px solid #4f75856b;
  background: #081923;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.floating-music-controls button:hover,
.floating-music-controls button:focus-visible {
  color: #071018;
  border-color: var(--orange);
  background: var(--orange);
}

.floating-music-play {
  color: #fff0e4 !important;
  border-color: #ff65007d !important;
  background: #ff650029 !important;
}

.floating-music.playing .floating-music-play {
  color: #071018 !important;
  background: var(--orange) !important;
}

.floating-music-progress {
  position: relative;
  z-index: 1;
  width: calc(100% - 20px);
  height: 10px;
  margin: 0 10px 9px;
  padding: 0;
  border: 1px solid #4f758550;
  background: #02080c;
  cursor: pointer;
  overflow: hidden;
}

.floating-music-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--orange);
  transition: width .15s linear;
}

.floating-music.resume-pending .floating-music-progress::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
}

.floating-music-list {
  position: relative;
  z-index: 1;
  max-height: 238px;
  border-top: 1px solid #4f758557;
  background: #030b10;
  overflow: auto;
}

.floating-music-list[hidden] {
  display: none;
}

.floating-music-list button {
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  color: #a9bbc3;
  border: 0;
  border-bottom: 1px solid #4f75852f;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.floating-music-list button > span {
  grid-row: 1 / 3;
  align-self: center;
  color: #57717c;
  font-size: 8px;
  font-weight: 900;
}

.floating-music-list button > b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 9px;
}

.floating-music-list button > small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #637b86;
  font-size: 8px;
}

.floating-music-list button:hover,
.floating-music-list button:focus-visible,
.floating-music-list button.active {
  color: #f3f6f7;
  background: #ff650014;
  box-shadow: inset 3px 0 0 var(--orange);
}

.global-music-audio {
  display: none;
}

.theme-player.autoplay-blocked .theme-autoplay-note {
  color: #ffb06f;
}

@media (width >= 1381px) {
  .floating-music {
    top: 124px;
  }
}

@media (width <= 720px) {
  .floating-music {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
  }

  .floating-music-main {
    min-height: 54px;
    padding: 7px 9px;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .floating-music-main > img {
    width: 42px;
    height: 42px;
  }

  .floating-music-controls {
    position: absolute;
    right: 8px;
    bottom: 9px;
    width: 112px;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
  }

  .floating-music-controls button {
    min-height: 25px;
  }

  .floating-music-main {
    padding-right: 124px;
  }

  .floating-music-progress {
    margin-bottom: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-music-main > img.playing {
    animation: none !important;
  }
}

.hero-copy .fsa-wordmark {
  display: none !important;
}

.hero-copy > .micro {
  margin-top: 20px;
  margin-bottom: 18px;
  letter-spacing: .18em;
}

/* v0.36.3: full-width orange navigation with squeezed-juice edge */
.site-header {
  position: relative;
  overflow: visible;
  background: linear-gradient(108deg, #e84a00 0%, #ff6500 42%, #ff8122 72%, #f45100 100%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 10px 34px #ff650026, inset 0 -1px 0 #7b210050;
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 8px;
  pointer-events: none;
  background: linear-gradient(90deg, #e84a00, #ff6500 42%, #ff8122 72%, #f45100);
  border-radius: 0 0 55% 45%;
}

.site-header::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: -30px;
  height: 32px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 12px 27px at 50% 0, #ee5100 0 68%, transparent 72%) 8% 0 / 24px 30px no-repeat,
    radial-gradient(ellipse 8px 19px at 50% 0, #f75b00 0 68%, transparent 72%) 24% 0 / 18px 22px no-repeat,
    radial-gradient(ellipse 14px 31px at 50% 0, #ff6500 0 68%, transparent 72%) 47% 0 / 28px 32px no-repeat,
    radial-gradient(ellipse 9px 22px at 50% 0, #ff7413 0 68%, transparent 72%) 68% 0 / 20px 25px no-repeat,
    radial-gradient(ellipse 13px 29px at 50% 0, #f85b00 0 68%, transparent 72%) 88% 0 / 26px 31px no-repeat;
  filter: drop-shadow(0 6px 8px #ff65002b);
}

.site-header .site-brand strong,
.site-header .nav-cn {
  color: #09131a !important;
  text-shadow: 0 1px 0 #ffb46880;
}

.site-header .brand-official,
.site-header .brand-en,
.site-header .site-brand small,
.site-header .nav-en,
.site-header .mobile-menu nav small {
  color: #fff2dc !important;
}

.site-header .desktop-nav a:hover,
.site-header .desktop-nav a:focus-visible {
  background: #07101816;
}

.site-header .header-socials .social-link,
.site-header .mobile-socials .social-link {
  border-color: #07101866;
  background-color: #07101817;
}

.site-header .mobile-menu {
  background: transparent !important;
  border-top-color: #7b210044 !important;
}

@media (width <= 720px) {
  .site-header::after {
    bottom: -23px;
    height: 26px;
    background:
      radial-gradient(ellipse 9px 22px at 50% 0, #ee5100 0 68%, transparent 72%) 10% 0 / 20px 24px no-repeat,
      radial-gradient(ellipse 7px 16px at 50% 0, #ff6500 0 68%, transparent 72%) 51% 0 / 16px 19px no-repeat,
      radial-gradient(ellipse 10px 23px at 50% 0, #f85b00 0 68%, transparent 72%) 86% 0 / 22px 25px no-repeat;
  }
}

#vlog + .section {
  position: relative;
}

#vlog + .section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 2px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #ff6500 7%, #ff9a3d 50%, #ff6500 93%, transparent 100%);
  box-shadow: 0 0 14px #ff65004d;
}

.hero-bg-video,
.hero-bg-poster {
  transition: opacity .85s ease;
}

.hero-bg-video {
  z-index: 0;
  opacity: 0;
  object-fit: cover;
  background: #02070b;
}

.hero-bg-poster {
  z-index: 1;
  opacity: 1;
}

.hero.hero-video-playing .hero-bg-video {
  opacity: 1;
}

.hero.hero-video-playing .hero-bg-poster {
  opacity: 0;
}

.hero .hero-shade,
.hero .hero-inner {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; }
  .hero-bg-poster { opacity: 1 !important; }
}

.record-screen.archive-media::before,
.record-list button::before {
  color: #071018 !important;
  border-color: #ffb46f !important;
  background: var(--orange) !important;
  box-shadow: 0 5px 16px #ff65003d;
}

.record-list-inline {
  overflow: hidden;
  padding: 0;
}

.record-list-inline-video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

.record-list-inline-meta {
  padding: 12px 14px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.record-list-inline-meta b {
  color: #f3f6f7;
  font-size: 15px;
}

.record-list-inline-meta span {
  color: var(--orange);
  font-size: 11px;
}

/* v0.38.5: selected cards use a fine orange archive outline, never an orange fill. */
.record-list > button.active,
.record-list > button[aria-pressed="true"] {
  background: #071018 !important;
  border-color: #ff6500 !important;
  box-shadow: 0 0 0 1px #ff6500, 0 10px 24px #ff65002e !important;
}

.record-list > button.active img,
.record-list > button[aria-pressed="true"] img {
  filter: saturate(1) contrast(1.04) !important;
}

.record-list > button.active b,
.record-list > button.active span,
.record-list > button[aria-pressed="true"] b,
.record-list > button[aria-pressed="true"] span {
  color: #f1f6f7 !important;
}

.record-list > button.active::before,
.record-list > button[aria-pressed="true"]::before {
  background: #081018 !important;
  color: #ffe7c7 !important;
  border-color: #081018 !important;
}

/* The archive download is one complete image: clean photo plus the lower information rail. */
.life-lightbox img[data-fsa-download-image="true"] {
  display: block;
  max-height: min(86vh, 1120px);
  object-fit: contain;
  background: #030b11;
}

.life-lightbox-caption[hidden] {
  display: none !important;
}

/* Life-log selections follow the same thin orange marker. */
.life-log-card.active,
.life-log-card[aria-pressed="true"] {
  background: #071018 !important;
  border-color: #ff6500 !important;
  box-shadow: 0 0 0 1px #ff6500, 0 10px 24px #ff65002e !important;
}

.life-log-card.active b,
.life-log-card[aria-pressed="true"] b { color: #f1f6f7 !important; }
.life-log-card.active span,
.life-log-card[aria-pressed="true"] span { color: #a9bdc8 !important; }
.life-log-card.active small,
.life-log-card.active .micro,
.life-log-card[aria-pressed="true"] small,
.life-log-card[aria-pressed="true"] .micro { color: #ff8b43 !important; }

@media (width > 720px) {
  .record-list-inline { display: none; }
}

@media (width <= 720px) {
  .records-grid > .record-screen {
    display: none !important;
  }

  .record-list button { cursor: pointer; }

  .record-list button::after {
    content: "点击图片直接播放";
    position: absolute;
    right: 12px;
    top: 12px;
    color: #fff4df;
    padding: 5px 8px;
    border: 1px solid #ffb46f80;
    background: #ff6500d9;
    font-size: 9px;
    letter-spacing: .08em;
  }
}

/* v0.36.4: remove all in-page citrus ornaments and keep only clean city linework */
.team-grid::before,
.team-grid::after,
.section-head::before,
#vlog .section-head::after,
#music .section-head::after,
#vlog::before,
#music::before,
.site-header::after {
  display: none !important;
  content: none !important;
}

.pattern-layer {
  background-image:
    radial-gradient(42% 12% at 8% 23%, transparent 66%, #ff650038 67% 68%, transparent 69%),
    radial-gradient(36% 10% at 95% 61%, transparent 66%, #35d5cc38 67% 68%, transparent 69%),
    linear-gradient(118deg, transparent 0 18%, #ff650020 18.1% 18.35%, transparent 18.5% 72%, #43d7d022 72.1% 72.35%, transparent 72.5%);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

#team > * {
  position: relative;
  z-index: 1;
}

#team::after {
  display: block !important;
  content: "" !important;
  z-index: 0;
  bottom: 14px;
  height: 210px;
  opacity: .82;
  border: 0;
  clip-path: polygon(0 100%, 0 72%, 5% 72%, 5% 49%, 10% 49%, 10% 64%, 15% 64%, 15% 36%, 20% 36%, 20% 58%, 26% 58%, 26% 26%, 31% 26%, 31% 67%, 36% 67%, 36% 43%, 42% 43%, 42% 19%, 47% 19%, 47% 55%, 53% 55%, 53% 32%, 58% 32%, 58% 63%, 64% 63%, 64% 40%, 70% 40%, 70% 21%, 75% 21%, 75% 58%, 81% 58%, 81% 30%, 87% 30%, 87% 65%, 93% 65%, 93% 46%, 100% 46%, 100% 100%);
  background:
    repeating-linear-gradient(90deg, transparent 0 52px, #07131bd1 53px 55px, transparent 56px 86px),
    repeating-linear-gradient(0deg, transparent 0 27px, #48ded696 28px 30px, transparent 31px 48px);
  filter: drop-shadow(0 -2px 0 #07131b) drop-shadow(0 -5px 10px #07131b26);
}

@media (width <= 720px) {
  #team::after {
    height: 135px;
    opacity: .65;
  }
}

/* v0.36.5: flat orange team field */
#team::before {
  z-index: 0;
  top: 150px;
  bottom: 0;
  height: auto;
  clip-path: none;
  background:
    radial-gradient(circle at 5% 25%, transparent 0 30px, #07131bbd 31px 34px, transparent 35px),
    radial-gradient(ellipse 8px 14px at 8% 39%, #07131bbd 0 70%, transparent 74%),
    radial-gradient(ellipse 6px 11px at 10% 48%, #48ded6c7 0 70%, transparent 74%),
    radial-gradient(circle at 94% 22%, transparent 0 25px, #07131bbd 26px 29px, transparent 30px),
    radial-gradient(ellipse 8px 14px at 92% 35%, #07131bbd 0 70%, transparent 74%),
    radial-gradient(ellipse 5px 10px at 89% 43%, #48ded6c7 0 70%, transparent 74%),
    radial-gradient(circle at 81% 63%, transparent 0 17px, #07131b9c 18px 20px, transparent 21px),
    radial-gradient(ellipse 5px 9px at 83% 70%, #07131b9c 0 70%, transparent 74%),
    #ff6500;
  box-shadow: none;
}

#team::after {
  z-index: 1;
}

#team > * {
  z-index: 2;
}

@media (width <= 720px) {
  #team::before {
    top: 118px;
    height: auto;
  }
}

/* v0.36.6: clearer desktop header and image-first mobile hero */
@media (width > 1320px) {
  .site-header .nav-shell {
    grid-template-columns: minmax(430px, 1fr) auto auto;
    gap: 18px;
  }

  .site-brand strong {
    font-size: 18px;
    gap: 8px;
  }

  .site-brand .brand-en { font-size: 15px; }
  .site-brand .brand-official { font-size: 12px; }
  .site-brand small { font-size: 10px; }

  .site-header .desktop-nav {
    width: auto;
    justify-self: end;
    justify-content: flex-end;
    gap: clamp(5px, .6vw, 11px);
  }

  .site-header .desktop-nav a {
    min-width: 66px;
    padding: 7px 4px;
  }

  .nav-cn { font-size: 14px !important; }
  .nav-en { font-size: 8px !important; }
}

@media (width <= 720px) {
  .site-header .nav-shell {
    min-height: 54px;
    padding: 7px 0 6px;
  }

  .site-brand strong {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 14px;
  }

  .site-brand .brand-en { font-size: 12px; }
  .site-brand small { margin-top: 4px; font-size: 7px; }

  .site-header .mobile-menu {
    gap: 0;
  }

  .mobile-menu nav {
    width: 100%;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .mobile-menu nav a {
    min-width: 0;
    min-height: 40px;
    padding: 5px 3px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    text-align: center;
  }

  .mobile-menu nav a span { font-size: 12px; line-height: 1; }
  .mobile-menu nav small { font-size: 7px; letter-spacing: .08em; }

  .mobile-socials {
    min-height: 38px;
    padding: 4px 8px 6px;
    justify-content: flex-end;
    gap: 5px;
  }

  .mobile-socials .social-link {
    width: 30px;
    height: 30px;
    min-height: 30px;
  }

  .hero {
    min-height: 720px;
    align-items: stretch;
  }

  .hero .hero-inner {
    width: 100%;
    padding: 300px 0 18px !important;
    display: block;
  }

  .hero-copy.panel {
    width: calc(100% - 24px);
    max-width: 540px;
    margin: 0 auto;
    padding: 18px;
    background: linear-gradient(180deg, #07131aa8, #050d14ed);
    backdrop-filter: blur(3px);
  }

  .hero-logo {
    width: 142px;
    margin-bottom: 8px;
  }

  .hero-copy > .micro {
    margin: 8px 0 10px;
    font-size: 9px;
  }

  .hero-copy h1 {
    margin: 8px 0 10px;
    font-size: clamp(42px, 12vw, 52px);
    line-height: .95;
  }

  .hero-copy > p:not(.micro) {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .hero-actions { margin-top: 14px; }
  .hero-side { display: none; }

  .hero-shade {
    background: linear-gradient(180deg, #02070b00 0 34%, #02070b52 52%, #02070bd9 100%) !important;
  }

  .hero-bg-video,
  .hero-bg-poster {
    display: block !important;
    object-position: 50% 16% !important;
  }

  .hero.hero-video-playing .hero-bg-video { opacity: 1 !important; }
  .hero.hero-video-playing .hero-bg-poster { opacity: 0 !important; }
}

/* v0.36.7: clean team floor, visible contact, no broken skyline fragments */
#team::after {
  display: none !important;
  content: none !important;
}

#team::before {
  position: absolute !important;
  left: calc(50% - 50vw) !important;
  right: auto !important;
  top: 190px !important;
  bottom: 58px !important;
  width: 100vw !important;
  height: auto !important;
  transform: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  background-color: #ff6500 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

@media (width > 900px) {
  #team .team-grid {
    width: 94%;
    margin-inline: auto;
  }
}

.footer-right {
  min-width: 360px;
  padding: 16px 20px;
  border: 1px solid #ff650075;
  border-left: 4px solid var(--orange);
  background: #ff650012;
}

.public-contact { gap: 7px; }

.public-contact span {
  color: var(--orange-soft);
  font-size: 11px;
  font-weight: 800;
}

.public-contact a {
  color: #fff4e8;
  font-size: 17px;
}

.public-contact p { color: #a8785c; }

@media (width <= 900px) {
  #team::before {
    top: 150px !important;
    bottom: 48px !important;
  }
  #team .team-grid { width: 100%; }
}

/* v0.36.8: four-language switcher, with Simplified Chinese as the master */
.language-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(34px, auto));
  gap: 3px;
  padding: 3px;
  border: 1px solid #07101870;
  border-radius: 5px;
  background: #07101820;
  box-shadow: inset 0 0 0 1px #ffb46a20;
}

.language-switcher a {
  min-width: 34px;
  min-height: 25px;
  padding: 0 7px;
  border: 1px solid transparent !important;
  border-radius: 3px;
  color: #47200f !important;
  background: transparent !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
  color: #071018 !important;
  border-color: #0710186e !important;
  background: #fff0d15e !important;
}

.language-switcher a.active {
  color: #071018 !important;
  border-color: #0710188c !important;
  background: #fff2d5 !important;
  box-shadow: 0 2px 8px #7b21002e;
}

html[lang="zh-Hant"] body {
  font-family: Inter, "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
}

html[lang="ja"] body {
  font-family: Inter, "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}

html[lang="ja"] .nav-cn {
  letter-spacing: .02em !important;
  line-height: 1.1;
}

/* Keep the original English labels and remove only translated duplicates. */
html[lang="en"] .site-brand .brand-cn,
html[lang="en"] .footer-cn-slogan,
html[lang="en"] .team-copy h3 b,
html[lang="en"] .character-info h1 b,
html[lang="en"] .desktop-nav .nav-cn,
html[lang="en"] .mobile-menu nav a > span {
  display: none !important;
}

html[lang="en"] .desktop-nav .nav-en {
  color: #09131a !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
}

html[lang="en"] .mobile-menu nav small {
  color: #09131a !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

.life-feature,
.life-log-card {
  cursor: zoom-in;
}

html[lang="zh-CN"] .life-lightbox::before {
  content: "PHOTO VIEWER / 页面可继续滑动";
}

html[lang="zh-Hant"] .life-lightbox::before {
  content: "PHOTO VIEWER / 頁面可繼續滑動";
}

html[lang="en"] .life-lightbox::before {
  content: "PHOTO VIEWER / SCROLL ENABLED";
}

html[lang="ja"] .life-lightbox::before {
  content: "PHOTO VIEWER / スクロール可能";
}

@media (width > 1320px) {
  .site-header .header-socials {
    width: max-content;
    max-width: 220px;
    display: grid;
    grid-template-columns: repeat(4, 32px);
    justify-content: end;
    gap: 4px;
  }

  .header-socials .language-switcher {
    grid-column: 1 / -1;
    width: 100%;
  }

  .header-socials > .social-link {
    width: 32px;
    height: 28px;
    min-height: 28px;
    padding: 0;
  }
}

@media (width <= 1320px) {
  .site-header .mobile-socials {
    width: 100%;
    margin: 0;
    padding: 7px 12px 9px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) repeat(4, 42px);
    justify-content: stretch;
    gap: 5px;
  }

  .mobile-socials .language-switcher {
    grid-column: 1 / -1;
    width: min(100%, 520px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mobile-socials > .social-link:first-of-type {
    grid-column: 2;
  }
}

@media (width <= 720px) {
  .language-switcher {
    gap: 2px;
    padding: 2px;
  }

  .language-switcher a {
    min-width: 0;
    min-height: 28px;
    padding: 0 5px;
    font-size: 9px !important;
  }

  html[lang="en"] .mobile-menu nav a span,
  html[lang="ja"] .mobile-menu nav a span {
    font-size: 10px;
  }
}

/* v0.37: high-resolution hero playback, full-frame personnel files and mobile hierarchy */
.hero {
  isolation: isolate;
}

.hero .hero-bg-video,
.hero .hero-bg-poster {
  z-index: 0;
  filter: saturate(.78) contrast(1.06) brightness(.78);
}

.hero .hero-shade {
  z-index: 1;
  background: linear-gradient(90deg, #02070be0 0%, #02070ba7 37%, #02070b34 73%), linear-gradient(180deg, #02070b16, #04090ee6) !important;
}

.hero::before {
  z-index: 2;
  opacity: .36;
  animation: none;
}

.hero::after {
  content: "";
  z-index: 2;
  pointer-events: none;
  opacity: .2;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, #cceaff13 4px 5px),
    linear-gradient(90deg, #4fcae00f, transparent 28% 72%, #ff743314);
  mix-blend-mode: screen;
  position: absolute;
  inset: 0;
}

.hero .hero-inner {
  z-index: 3;
}

.mobile-language-row {
  display: none;
}

.character-layout {
  grid-template-columns: minmax(440px, .82fr) minmax(0, 1.18fr);
  align-items: start;
}

.character-photo.archive-media {
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  align-self: start;
  position: sticky;
  top: 128px;
  background: #030a10;
}

.character-photo.archive-media img {
  object-fit: contain !important;
  object-position: center !important;
  filter: saturate(.82) contrast(1.04) !important;
}

@media (width <= 1100px) {
  .character-layout {
    grid-template-columns: 1fr;
  }

  .character-photo.archive-media {
    width: 100%;
    position: static;
  }
}

@media (width <= 720px) {
  .site-header .nav-shell {
    min-height: 58px;
    padding-right: 132px;
  }

  .site-header .site-brand {
    min-width: 0;
  }

  .site-brand strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
  }

  .site-header .mobile-socials {
    width: 122px !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: grid !important;
    grid-template-columns: repeat(4, 28px) !important;
    gap: 3px;
    position: absolute !important;
    top: 11px;
    right: 10px;
    z-index: 4;
  }

  .site-header .mobile-socials .social-link {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
  }

  .site-header .mobile-socials > .social-link:first-of-type {
    grid-column: auto !important;
  }

  .site-header .mobile-socials .social-symbol {
    transform: scale(.86);
  }

  .mobile-language-row {
    width: 100%;
    padding: 5px 8px 8px;
    border-top: 1px solid #7b210044;
    display: block;
  }

  .mobile-language-row .language-switcher {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero {
    min-height: 0;
    align-items: stretch;
  }

  .hero .hero-inner {
    width: calc(100% - 20px);
    padding: 224px 0 22px !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-copy.panel,
  .hero-side {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .hero-copy.panel {
    padding: 18px;
  }

  .hero-copy > p:not(.micro) {
    display: block;
    overflow: visible;
  }

  .hero-side {
    padding: 15px 16px !important;
    display: block !important;
    background: linear-gradient(180deg, #07131af2, #050d14fa);
  }

  .hero-side h3 {
    margin: 6px 0 13px;
    font-size: 21px;
  }

  .status-list {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 11px 0;
  }

  .hero-side small {
    margin-top: 10px;
    font-size: 9px;
  }

  .hero .hero-bg-video,
  .hero .hero-bg-poster {
    object-position: 50% 18% !important;
  }

  .hero::after {
    opacity: .13;
  }

  .character-photo.archive-media {
    aspect-ratio: 16 / 9;
  }
}

/* Figure archive: all current imagery is reused, so this adds no new visual payload. */
.toy-copy { display: flex; flex-direction: column; }
.toy-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; }
.toy-footer-row .toy-status { margin-top: 0; }
.toy-view-all { color: #ff6500; border: 1px solid #ff6500; min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; transition: background .18s, color .18s; }
.toy-view-all:hover, .toy-view-all:focus-visible { color: #061018; background: #ff6500; }
.toy-specs--tabs { gap: 10px; }
.toy-specs--tabs .toy-spec { color: #ff6500; text-align: left; background: #050b10; border: 1px solid #235166; min-height: 45px; padding: 0 13px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.toy-specs--tabs .toy-spec.is-selected { color: #071018; background: #ff6500; border-color: #ff6500; }
.toy-specs--tabs .toy-spec:disabled { cursor: default; opacity: 1; }
.subpage--toys { --section-accent: #ff6500; --section-accent-rgb: 255, 101, 0; }
.toy-gallery-hero > img { object-position: center 30%; filter: saturate(.82) contrast(1.04) brightness(.62); }
.toy-file-section { padding-bottom: 78px; }
.toy-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.toy-gallery-card { min-width: 0; overflow: hidden; }
.toy-gallery-card--team { grid-column: span 2; grid-row: span 2; }
.toy-gallery-image { aspect-ratio: 4 / 5; overflow: hidden; background: #03070b; position: relative; }
.toy-gallery-card--team .toy-gallery-image { aspect-ratio: 16 / 10; }
.toy-gallery-image:after { content: ""; pointer-events: none; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 11px, #e8f4f508 12px 13px), linear-gradient(90deg, #ff650060, transparent 18% 80%, #61c7d738); }
.toy-gallery-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03) brightness(.94); transition: transform .35s ease; }
.toy-gallery-card:hover .toy-gallery-image img { transform: scale(1.035); }
.toy-gallery-card--team .toy-gallery-image img { object-position: center center; }
.toy-gallery-card--yin .toy-gallery-image img { object-position: 8% center; }
.toy-gallery-card--mo .toy-gallery-image img { object-position: 37% center; }
.toy-gallery-card--wu .toy-gallery-image img { object-position: 64% center; }
.toy-gallery-card--que .toy-gallery-image img { object-position: 92% center; }
.toy-gallery-copy { border-top: 1px solid #ff650055; padding: 13px 14px 16px; }
.toy-gallery-copy span { color: #ff6500; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.toy-gallery-copy h2 { color: #e8f0f3; margin: 7px 0 0; font-size: clamp(17px, 1.55vw, 23px); line-height: 1.18; }
.footer::before, .footer::after { content: none !important; display: none !important; }
@media (width <= 900px) { .toy-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toy-gallery-card--team { grid-column: span 2; } }
@media (width <= 720px) { .toy-footer-row { padding-top: 16px; } .toy-view-all { min-height: 34px; font-size: 11px; } .toy-specs--tabs .toy-spec { min-height: 42px; font-size: 10px; padding: 0 10px; } .toy-gallery-grid { gap: 10px; } .toy-gallery-card--team { grid-column: span 2; } .toy-gallery-copy { padding: 11px 11px 13px; } .toy-gallery-copy h2 { font-size: 15px; } }

/* Final footer: a clean brand sign-off rather than a decorative city block. */
.footer { margin-top: 84px; background: #03090d; border-top: 1px solid #244654; }
.footer::before, .footer::after { content: none !important; display: none !important; }
.footer-inner { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) minmax(260px, 340px); gap: clamp(24px, 4vw, 68px); min-height: 168px; padding: 28px 0; position: relative; z-index: 1; }
.footer-inner > img { width: min(205px, 100%); margin: 0; }
.footer strong { color: #edf4f6; font-size: clamp(23px, 2.1vw, 31px); letter-spacing: .035em; line-height: 1.05; }
.footer-slogan { color: #b9d9e3 !important; margin: 8px 0 2px !important; font-size: 15px !important; }
.footer-cn-slogan { margin: 0 0 12px !important; font-size: 18px !important; }
.footer-motto { color: #899ca8 !important; font-size: 10px !important; letter-spacing: .14em !important; }
.footer-development { color: #ff792f; letter-spacing: .12em; margin-top: 10px; font-size: 12px; font-weight: 800; display: block; }
.footer-entity { gap: 7px 13px; margin-top: 14px; font-size: 9px; }
.footer-right { min-width: 0; margin: 0; padding: 0 0 0 22px; border: 0; border-left: 1px solid #ff650065; background: transparent; justify-items: start; text-align: left; }
.footer-right > small { color: #647b88; }
.public-contact span, .public-contact p { font-size: 9px; letter-spacing: .13em; }
.public-contact a { color: #f0c590; font-size: 14px; }

/* Active music must read immediately as the selected track. */
.playlist button.active { color: #071018 !important; background: #ff6500 !important; border-color: #ff8a24 !important; box-shadow: inset 5px 0 0 #ffc16a, 0 0 0 1px #ff6500, 0 12px 26px #ff65005c !important; }
.playlist button.active span, .playlist button.active b, .playlist button.active small, .playlist button.active em { color: #071018 !important; text-shadow: none !important; }
.playlist button.active::after { color: #071018 !important; font-weight: 900; }
@media (width <= 900px) { .footer-inner { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; } .footer-right { grid-column: 1 / -1; border-top: 1px solid #ff650050; border-left: 0; padding: 18px 0 0; } }
@media (width <= 720px) { .footer { margin-top: 58px; } .footer-inner { grid-template-columns: 1fr; gap: 15px; min-height: 0; padding: 26px 0; } .footer-inner > img { width: 170px; } .footer strong { font-size: 23px; } .footer-development { font-size: 11px; } .footer-right { width: 100%; padding-top: 15px; } }

/* Desktop homepage header: retain every entry, but give the first viewport more room. */
@media (width >= 1381px) {
  .site-header { height: 82px !important; }
  .site-header .nav-shell { min-height: 82px; }
  .site-header .site-brand strong { font-size: 15px; gap: 6px; }
  .site-header .brand-en { font-size: 12px; }
  .site-header .brand-official { font-size: 10px; }
  .site-header .site-brand small { margin-top: 4px; font-size: 8px; }
  .site-header .desktop-nav { gap: clamp(12px, 1.1vw, 20px); }
  .site-header .desktop-nav a { gap: 3px; min-width: 64px; }
  .site-header .desktop-nav .nav-cn { font-size: 16px !important; }
  .site-header .desktop-nav .nav-en { font-size: 9px !important; }
  .header-socials .social-link { width: 34px; height: 34px; min-height: 34px; }
}

/* Hero media is treated as a 16:9 archive screen: no faces are cropped at the sides. */
@media (width >= 721px) {
  .hero { background: #000; }
  .hero .hero-bg-video,
  .hero .hero-bg-poster {
    object-fit: contain !important;
    object-position: center center !important;
    background: #000;
  }
}

/* Shared scanline treatment for the current video and future carousel stills. */
.hero::after {
  opacity: .38;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, #cceaff17 4px 5px),
    repeating-linear-gradient(90deg, transparent 0 88px, #62c8dc0c 89px 90px),
    linear-gradient(90deg, #4fcae018, transparent 28% 72%, #ff74331c);
}
@media (prefers-reduced-motion: reduce) { .hero::after { opacity: .28; } }
@media (width <= 720px) { .hero::after { opacity: .24; } }

/* Compact, non-obstructive global music controller. The full list only opens on request. */
.floating-music {
  top: auto !important;
  right: 22px;
  bottom: 20px;
  left: auto !important;
  width: min(390px, calc(100vw - 44px));
  min-height: 66px;
  height: 66px;
  border: 1px solid #ff792f88;
  border-top: 1px solid #ff792f88;
  border-radius: 999px;
  background: linear-gradient(100deg, #0a151bfa 0%, #081016f5 65%, #160e09f5 100%);
  box-shadow: 0 16px 36px #000b, inset 0 0 0 1px #ffffff08;
  overflow: visible;
}

.floating-music::before {
  border: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff650012, transparent 48%);
}

.floating-music-top {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.floating-music-top > span { display: none; }

.floating-music-list-toggle {
  width: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #dce8ed !important;
  border: 1px solid #49626c !important;
  border-radius: 50%;
  background: #071017 !important;
  font-size: 0 !important;
  letter-spacing: 0;
}

.floating-music-list-toggle::after {
  content: "+";
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.floating-music-list-toggle.active {
  color: #071018 !important;
  border-color: #ff6500 !important;
  background: #ff6500 !important;
}

.floating-music-main {
  min-height: 66px;
  height: 66px;
  padding: 0 164px 0 13px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
}

.floating-music-main > img {
  width: 46px;
  height: 46px;
  border-color: #ff95525e;
  box-shadow: 0 0 0 3px #03090d, 0 0 0 4px #ff650034;
}

.floating-music-copy { gap: 2px; }

.floating-music-copy > span {
  font-size: 8px;
  letter-spacing: .17em;
}

.floating-music-copy > strong {
  color: #f3f6f7;
  font-size: 13px;
  line-height: 1.2;
}

.floating-music-copy > small { display: none; }

.floating-music-controls {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 53px;
  width: 116px;
  padding: 0;
  grid-template-columns: 30px 48px 30px;
  gap: 4px;
}

.floating-music-controls button {
  min-height: 38px;
  border-color: #49626c;
  background: #071017;
  font-size: 17px;
}

.floating-music-play,
.floating-music.playing .floating-music-play {
  color: #071018 !important;
  border-color: #ff6500 !important;
  background: #ff6500 !important;
}

.floating-music-progress {
  position: absolute;
  z-index: 2;
  right: 164px;
  bottom: 9px;
  left: 70px;
  width: auto;
  height: 3px;
  margin: 0;
  border: 0;
  border-radius: 99px;
  background: #26343a;
}

.floating-music-progress > span { border-radius: inherit; }

.floating-music-list {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: calc(100% + 9px);
  left: 0;
  max-height: min(280px, calc(100vh - 112px));
  border: 1px solid #4f7585;
  border-radius: 16px;
  background: #050d13fa;
  box-shadow: 0 16px 36px #000b;
}

/* Keep the orange field narrower than the four-person card group. */
#team::before {
  left: 50% !important;
  right: auto !important;
  top: 190px !important;
  bottom: 58px !important;
  width: min(1120px, calc(100% - 64px)) !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  background: #ff6500 !important;
  background-image: none !important;
}

@media (width > 900px) {
  #team .team-grid { width: min(1200px, 94%) !important; }
}

@media (width <= 720px) {
  .floating-music {
    right: 10px;
    bottom: 10px;
    left: 10px !important;
    width: auto;
    min-height: 60px;
    height: 60px;
  }

  .floating-music-main {
    min-height: 60px;
    height: 60px;
    padding: 0 144px 0 12px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
  }

  .floating-music-main > img { width: 40px; height: 40px; }
  .floating-music-copy > strong { font-size: 12px; }

  .floating-music-controls {
    top: 11px;
    right: 49px;
    width: 100px;
    grid-template-columns: 26px 40px 26px;
    gap: 4px;
  }

  .floating-music-controls button,
  .floating-music-list-toggle { min-height: 36px; }

  .floating-music-list-toggle { width: 36px; }

  .floating-music-progress {
    right: 144px;
    bottom: 7px;
    left: 61px;
  }

  #team::before {
    top: 150px !important;
    bottom: 48px !important;
    width: calc(100% - 28px) !important;
  }
}

/* 21:9 desktop archive frame: the full 16:9 source remains visible inside pure-black side pillars. */
@media (width >= 1101px) {
  .hero {
    min-height: 0 !important;
    aspect-ratio: 21 / 9;
    align-items: stretch;
    overflow: hidden;
    background: #000 !important;
  }

  .hero .hero-bg-video,
  .hero .hero-bg-poster {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
  }

  .hero .hero-inner {
    align-items: end;
    padding: clamp(38px, 5.2vw, 104px) 0 clamp(30px, 3.1vw, 60px) !important;
  }

  .hero .hero-shade {
    background:
      linear-gradient(90deg, #02070bd6 0%, #02070b9a 34%, #02070b20 67%, #02070b40 100%),
      linear-gradient(0deg, #02070ba6 0%, #02070b08 48%) !important;
  }

  .hero::before,
  .hero::after { clip-path: inset(0 11.9%); }

  .hero::after {
    opacity: .46;
    background:
      repeating-linear-gradient(0deg, transparent 0 3px, #d7f5ff18 4px 5px),
      repeating-linear-gradient(90deg, transparent 0 88px, #62c8dc0d 89px 90px),
      linear-gradient(90deg, #4fcae01c, transparent 26% 74%, #ff74331d);
  }
}

/* The phone keeps its taller image-led layout, while the language controls stay compact. */
@media (width <= 720px) {
  .mobile-language-row {
    padding: 5px 10px 8px;
    display: flex;
    justify-content: center;
  }

  .mobile-language-row .language-switcher {
    width: min(252px, 100%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 auto;
  }

  .mobile-language-row .language-switcher a {
    min-height: 26px;
    padding: 0 3px;
    font-size: 8px !important;
  }
}

/* Drag from the artwork/title area; controls remain ordinary tap targets. */
.floating-music .floating-music-main {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.floating-music.is-dragging,
.floating-music.is-dragging .floating-music-main { cursor: grabbing; }

.floating-music.is-dragging { transition: none !important; }

/* Desktop default: place the compact player inside the archive frame, just past the black side pillar. */
@media (width >= 1101px) {
  .floating-music:not(.is-dragged) {
    top: 134px !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(11.9vw + 110px) !important;
  }

  .floating-music:not(.is-dragged) .floating-music-list {
    top: calc(100% + 9px);
    bottom: auto;
  }
}

/* The reset control lives at the top of the deliberately opened track drawer. */
.floating-music-list .floating-music-reset {
  min-height: 38px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  color: #ffb06f;
  border: 0;
  border-bottom: 1px solid #ff65005c;
  background: #ff650015;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-align: left;
}

.floating-music-list .floating-music-reset:hover,
.floating-music-list .floating-music-reset:focus-visible {
  color: #071018;
  background: #ff6500;
}

/* v0.37.5: keep the active controls above hero media, while navigation remains the persistent top layer. */
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 1200 !important;
}

.floating-music {
  z-index: 1100 !important;
}

/* Desktop hero media is presented as one real 21:9 screen. Source files stay untouched; the frame safely masks the extra vertical image area. */
@media (width >= 1101px) {
  .hero .hero-bg-video,
  .hero .hero-bg-poster,
  .hero [data-hero-carousel-media] {
    object-fit: cover !important;
    object-position: center 43% !important;
  }

  .hero::before,
  .hero::after {
    clip-path: none !important;
  }

  .hero::before {
    opacity: .27;
  }

  .hero::after {
    opacity: .4;
  }
}

/* Keep the four official platform placeholders visible alongside the language controls. */
@media (width >= 1321px) {
  .site-header .nav-shell {
    grid-template-columns: minmax(220px, .82fr) auto minmax(308px, .95fr);
    gap: 14px;
  }

  .site-header .header-socials {
    width: auto;
    max-width: none;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
  }

  .header-socials .language-switcher {
    order: 2;
    width: 176px;
    min-width: 176px;
    grid-column: auto;
  }

  .header-socials > .social-link {
    order: 1;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0;
  }
}

.social-link[data-fsa-coming-soon] {
  position: relative;
  cursor: pointer;
}

.social-link[data-fsa-coming-soon]::after {
  content: attr(data-fsa-coming-soon-label);
  position: absolute;
  z-index: 1300;
  right: 0;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: min(220px, 70vw);
  padding: 7px 9px;
  color: #f5f8f8;
  border: 1px solid #ff8b4b;
  background: #071018f7;
  box-shadow: 0 10px 22px #000a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

.social-link[data-fsa-coming-soon]:hover::after,
.social-link[data-fsa-coming-soon]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.toy-spec[data-fsa-coming-soon] {
  cursor: pointer;
}

.toy-spec[data-fsa-coming-soon]:hover,
.toy-spec[data-fsa-coming-soon]:focus-visible {
  color: #f6fbfc;
  border-color: #ff8a47;
  background: #ff650020;
}

.fsa-coming-soon-notice {
  position: fixed;
  z-index: 1400;
  right: 20px;
  bottom: 20px;
  max-width: min(320px, calc(100vw - 40px));
  padding: 11px 14px;
  color: #f7fafb;
  border: 1px solid #ff8b4b;
  background: #071018f5;
  box-shadow: 0 16px 42px #000c;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .16s ease, transform .16s ease;
}

.fsa-coming-soon-notice.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (width <= 720px) {
  .fsa-coming-soon-notice {
    right: 10px;
    bottom: 78px;
    font-size: 11px;
  }

  .social-link[data-fsa-coming-soon]::after {
    display: none;
  }
}

/* v0.37.8: one 21:9 media frame, with every mask layer removed from normal document flow. */
@media (width >= 1101px) {
  .hero {
    --hero-frame-width: min(76.2vw, calc(233.333svh - 550.667px));
    --hero-frame-height: min(32.657vw, calc(100svh - 236px));
    height: calc(var(--hero-frame-height) + 52px) !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    display: block !important;
    background: #000 !important;
    isolation: isolate;
    overflow: hidden !important;
    box-shadow: none;
    clip-path: none;
  }

  .hero .hero-bg-video,
  .hero .hero-bg-poster,
  .hero [data-hero-carousel-media] {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--hero-frame-width) !important;
    height: var(--hero-frame-height) !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
    transform: translateX(-50%);
  }

  .hero .hero-shade {
    position: absolute !important;
    z-index: 1 !important;
    inset: auto !important;
    top: 0 !important;
    left: 50% !important;
    width: var(--hero-frame-width) !important;
    height: var(--hero-frame-height) !important;
    transform: translateX(-50%);
    clip-path: none !important;
  }

  .hero::before,
  .hero::after {
    inset: auto !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--hero-frame-width) !important;
    height: var(--hero-frame-height) !important;
    transform: translateX(-50%);
    clip-path: none !important;
  }

  .hero::before { opacity: .25; }
  .hero::after { opacity: .38; }

  .hero .hero-inner {
    position: relative !important;
    z-index: 3;
    width: min(1180px, calc(var(--hero-frame-width) - 80px));
    min-height: var(--hero-frame-height);
    margin-inline: auto;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 372px);
    align-items: end !important;
    gap: 22px;
  }

  .hero .hero-copy.panel {
    width: min(100%, 640px);
    margin: 0 0 28px;
    justify-self: start;
  }

  .hero .hero-side {
    width: 100%;
    margin: 0 0 28px;
    justify-self: end;
  }

  #team {
    padding-top: 24px !important;
  }

  #team .section-head {
    margin-top: 0;
    margin-bottom: 16px;
  }
}

/* The title panel keeps a quiet field-team presence without competing with the copy. */
.hero-copy.panel {
  isolation: isolate;
}

.hero-copy.panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -5%;
  bottom: 8%;
  width: 48%;
  height: 85%;
  pointer-events: none;
  opacity: .17;
  background: url("/assets/images/fsa-team-ghost.png") right bottom / contain no-repeat;
  filter: grayscale(1) brightness(2.15) contrast(.84) sepia(.18) hue-rotate(145deg) saturate(1.25);
  mix-blend-mode: screen;
}

.hero-copy.panel > * {
  position: relative;
  z-index: 1;
}

/* A restrained live-channel beacon makes the agency's active status legible at a glance. */
.hero-side {
  isolation: isolate;
}

.hero-side::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 19px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #76e3bd;
  box-shadow: 0 0 0 0 #76e3bd78, 0 0 16px #76e3bd;
  animation: fsa-open-beacon 1.8s ease-out infinite;
}

.hero-side > * {
  position: relative;
  z-index: 1;
}

.hero-side h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero-side h3::after {
  content: "ONLINE";
  color: #89ead0;
  border: 1px solid #57d9b15e;
  background: #57d9b111;
  padding: 4px 6px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
  line-height: 1;
}

/* A true analyser trace: it stays dark until the shared global audio is actually playing. */
.status-audio-wave {
  width: min(100%, 340px);
  max-height: 0;
  height: 0;
  margin: 0 0 0 auto;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: max-height .18s ease, height .18s ease, margin .18s ease, opacity .18s ease, transform .18s ease;
}

.status-audio-wave.is-playing {
  max-height: 58px;
  height: 52px;
  margin: 3px 0 8px auto;
  opacity: 1;
  transform: translateY(0);
}

.status-audio-wave::before {
  content: "LIVE WAVE";
  position: absolute;
  top: -10px;
  right: 0;
  color: #a8f000;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
  opacity: .72;
}

.status-audio-wave canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-side .status-list {
  position: relative;
}

.hero-side .status-list::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28%;
  height: 1px;
  background: #76e3bd;
  box-shadow: 0 0 12px #76e3bd;
  animation: fsa-open-scan 2.8s ease-in-out infinite;
}

@keyframes fsa-open-beacon {
  0%, 100% { box-shadow: 0 0 0 0 #76e3bd78, 0 0 16px #76e3bd; }
  55% { box-shadow: 0 0 0 7px #76e3bd00, 0 0 22px #76e3bd; }
}

@keyframes fsa-open-scan {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50% { transform: translateX(235%); opacity: 1; }
}

@media (width <= 720px) {
  .hero-copy.panel::after {
    right: -16%;
    width: 66%;
    opacity: .1;
  }

  .status-audio-wave {
    width: min(100%, 270px);
  }

  .status-audio-wave.is-playing {
    max-height: 44px;
    height: 40px;
    margin-bottom: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-side::before,
  .hero-side .status-list::before { animation: none; }
}

/* A theme file is clearly live in green; its idle archive channel is orange. */
.theme-player-top i {
  background: var(--orange) !important;
  box-shadow: 0 0 12px #ff6500aa !important;
}

.theme-player-top i.playing {
  background: #76e3bd !important;
  box-shadow: 0 0 14px #76e3bd !important;
}

/* Personnel files use the supplied individual portraits as the primary record image. */
@media (width >= 1101px) {
  .character-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
  }

  .character-photo.archive-media {
    width: 100%;
  }

  .character-photo--yin { aspect-ratio: 16 / 9; }
  .character-photo--mo { aspect-ratio: 1 / 1; }
  .character-photo--wu,
  .character-photo--que { aspect-ratio: 4 / 5; }
}

.character-photo.archive-media img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #030a10;
}

.switch-grid {
  gap: 18px;
  padding-bottom: 92px;
}

.switch-grid .switch-member {
  position: relative;
  isolation: isolate;
  display: block;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #030a10;
}

.switch-grid .switch-member::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px;
  opacity: .5;
  background: var(--member-image) center / cover no-repeat;
  filter: saturate(.68) brightness(.38) blur(14px);
  transform: scale(1.08);
}

.switch-grid .switch-member img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain !important;
  object-position: center center !important;
  filter: saturate(.82) contrast(1.04) brightness(.98);
  transition: transform .28s ease;
}

.switch-grid .switch-member:hover img,
.switch-grid .switch-member:focus-visible img {
  transform: scale(1.025);
}

.switch-grid .switch-member span,
.switch-grid .switch-member::after {
  z-index: 2;
}

@media (width <= 1100px) {
  .character-photo.archive-media {
    width: min(720px, 100%);
    margin-inline: auto;
  }
}

@media (width <= 720px) {
  .switch-grid .switch-member {
    aspect-ratio: 4 / 3;
  }

  .switch-grid .switch-member img {
    padding: 7px;
  }
}

/* Compact language selector: all four choices remain visible without becoming a second navigation bar. */
.language-switcher {
  width: 132px !important;
  min-width: 132px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2px;
  padding: 2px;
}

.language-switcher a {
  min-width: 0 !important;
  min-height: 26px;
  padding: 0 !important;
  font-size: 8px !important;
  letter-spacing: 0 !important;
  overflow: hidden;
  text-overflow: clip;
}

@media (width <= 720px) {
  .mobile-language-row .language-switcher {
    width: 132px !important;
    min-width: 132px !important;
  }
}

/* v0.37.9: persistent navigation, with the movable player allowed to pass above it. */
:root { --fsa-header-height: 78px; }

.site-header {
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 1500 !important;
  width: 100%;
}

html { scroll-padding-top: var(--fsa-header-height); }
body { padding-top: var(--fsa-header-height); }

.floating-music { z-index: 1600 !important; }

@media (width >= 1381px) {
  :root { --fsa-header-height: 82px; }
}

@media (width <= 1320px) {
  :root { --fsa-header-height: 64px; }
}

@media (width >= 1101px) {
  .floating-music:not(.is-dragged) {
    top: calc(var(--fsa-header-height) + 14px) !important;
  }
}

/* v0.38.0: a clean utility strip and a small team mark that follows the title on every screen. */
.site-header .header-socials > .social-link,
.site-header .mobile-socials > .social-link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: filter .16s ease, opacity .16s ease, transform .16s ease;
}

.site-header .header-socials > .social-link:hover,
.site-header .header-socials > .social-link:focus-visible,
.site-header .mobile-socials > .social-link:hover,
.site-header .mobile-socials > .social-link:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  filter: brightness(1.2);
  opacity: 1;
  transform: translateY(-1px);
}

.site-header .header-socials > .social-link:hover .social-symbol,
.site-header .header-socials > .social-link:focus-visible .social-symbol,
.site-header .mobile-socials > .social-link:hover .social-symbol,
.site-header .mobile-socials > .social-link:focus-visible .social-symbol {
  text-shadow: none !important;
}

.social-link[data-fsa-coming-soon]::after {
  top: calc(100% + 9px);
  right: auto;
  bottom: auto;
  left: 50%;
  min-width: max-content;
  max-width: min(168px, calc(100vw - 24px));
  padding: 8px 10px;
  transform: translate(-50%, -4px);
  font-size: 11px;
  letter-spacing: .08em;
}

.social-link[data-fsa-coming-soon]:hover::after,
.social-link[data-fsa-coming-soon]:focus-visible::after {
  opacity: 0;
  transform: translate(-50%, -4px);
}

.social-link[data-fsa-coming-soon][data-fsa-notice-open="true"]::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Keep the social confirmation below the whole utility row, clear of every icon. */
.social-link[data-fsa-coming-soon]::after {
  display: none !important;
}

.fsa-social-inline-notice {
  position: fixed;
  z-index: 1500;
  max-width: min(220px, calc(100vw - 30px));
  padding: 8px 10px;
  color: #f7fafb;
  border: 1px solid #ff8b4b;
  background: #071018f7;
  box-shadow: 0 10px 22px #000a;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .16s ease, transform .16s ease;
}

.fsa-social-inline-notice.place-right {
  transform: translate(-50%, 4px);
}

.fsa-social-inline-notice.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.fsa-social-inline-notice.place-right.visible {
  transform: translate(-50%, 0);
}

.language-switcher,
.site-header .header-socials .language-switcher,
.mobile-language-row .language-switcher {
  width: 228px !important;
  min-width: 228px !important;
  height: 42px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2px;
  padding: 3px;
  border: 1px solid #2e1912 !important;
  border-radius: 999px;
  background: #151110d9 !important;
  box-shadow: inset 0 1px 0 #ffffff17, 0 4px 14px #6c26001f;
}

.language-switcher a {
  min-width: 0 !important;
  min-height: 34px;
  padding: 0 !important;
  color: #dfd3cd !important;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 850;
  letter-spacing: .02em !important;
  overflow: visible;
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
  color: #fff5eb !important;
  border: 0 !important;
  background: #ffffff12 !important;
}

.language-switcher a.active {
  color: #111214 !important;
  border: 0 !important;
  background: #ff6500 !important;
  box-shadow: 0 0 0 1px #ffb2765e, 0 2px 9px #7e25004d;
}

.hero-copy.panel::after {
  right: 4%;
  top: 39%;
  bottom: auto;
  width: 34%;
  height: 43%;
  opacity: .18;
  background-position: center bottom;
}

@media (width <= 1380px) and (width >= 1101px) {
  .site-header .header-socials .language-switcher {
    width: 204px !important;
    min-width: 204px !important;
  }
}

@media (width <= 720px) {
  .social-link[data-fsa-coming-soon]::after {
    display: block;
    top: calc(100% + 7px);
  }

  .mobile-language-row .language-switcher {
    width: min(228px, calc(100vw - 32px)) !important;
    min-width: min(228px, calc(100vw - 32px)) !important;
  }

  .language-switcher a {
    min-height: 34px;
    font-size: 10px !important;
  }

  .hero-copy.panel::after {
    right: 4%;
    top: 35%;
    bottom: auto;
    width: 35%;
    height: 39%;
    opacity: .16;
  }
}

/* v0.38.1: the archive window is always a filled 21:9 screen on desktop. */
@media (width >= 1101px) {
  .hero {
    --hero-frame-width: 100vw;
    --hero-frame-height: 42.857142857vw;
    height: var(--hero-frame-height) !important;
  }

  .hero .hero-bg-video,
  .hero .hero-bg-poster,
  .hero [data-hero-carousel-media] {
    width: var(--hero-frame-width) !important;
    height: var(--hero-frame-height) !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 40% !important;
    background: #000 !important;
  }

  .hero .hero-inner {
    width: min(1420px, calc(100vw - 36px));
    grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
    justify-content: space-between;
    gap: 24px;
  }

  .hero .hero-copy.panel {
    width: min(100%, 640px);
  }

  .hero .hero-side {
    width: min(100%, 372px);
  }
}

/* On phones the media is deliberately zoomed out to preserve at least two thirds of the source width. */
@media (width <= 720px) {
  .hero .hero-bg-video,
  .hero .hero-bg-poster,
  .hero [data-hero-carousel-media] {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 150vw !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    object-position: center 32% !important;
    transform: translateX(-50%) !important;
  }

  .hero .hero-inner {
    padding-top: min(60vw, 284px) !important;
  }
}

/* A nearly imperceptible citrus lift closes every page without tinting the working sections. */
.footer {
  background: linear-gradient(0deg, #ff65001c 0%, #a63a000d 32%, #03090d 74%) !important;
}

/* v0.38.2: one solid citrus field extends the personnel photos without effects or transparency. */
#team::before {
  top: 150px !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(50% - 50vw) !important;
  width: 100vw !important;
  height: clamp(300px, 29vw, 448px) !important;
  transform: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  background: #ff6500 !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

#team::after {
  display: none !important;
  content: none !important;
}

@media (width <= 720px) {
  #team::before {
    top: 124px !important;
    height: min(76vw, 380px) !important;
  }
}

/* v0.38.3: brighter, finer Y2K orbit lines and restrained fruit signals deepen the city field. */
.pattern-layer::after {
  content: "" !important;
  display: block !important;
  pointer-events: none;
  inset: -14% !important;
  opacity: .72;
  background:
    radial-gradient(74% 12% at 8% 14%, transparent 69.2%, #79dce86e 69.45% 69.72%, transparent 70%),
    radial-gradient(66% 10% at 85% 25%, transparent 70.1%, #ff9e5964 70.35% 70.58%, transparent 70.86%),
    radial-gradient(58% 9% at 18% 50%, transparent 69.5%, #ffe08b4e 69.75% 69.98%, transparent 70.28%),
    radial-gradient(70% 11% at 86% 67%, transparent 69.4%, #79dce85b 69.66% 69.9%, transparent 70.2%),
    radial-gradient(55% 8% at 12% 84%, transparent 69.5%, #ff9e5951 69.74% 69.97%, transparent 70.25%),
    radial-gradient(48% 7% at 58% 7%, transparent 70%, #a7f0df4e 70.22% 70.44%, transparent 70.7%);
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  transform: perspective(1180px) rotateX(57deg) rotateZ(-5deg) translate3d(0, 3%, 0) scale(1.13);
  transform-origin: 50% 52%;
  animation: fsa-y2k-orbit-drift 24s ease-in-out infinite alternate;
}

.pattern-layer::before {
  content: "" !important;
  display: block !important;
  pointer-events: none;
  opacity: .64;
  background:
    repeating-conic-gradient(from 180deg at 50% 100%, #ffd78235 0deg 2deg, transparent 2.4deg 30deg) 8% 19% / 76px 52px no-repeat,
    radial-gradient(circle at 50% 100%, #ff9f3817 0 66%, #ffca7231 67% 71%, transparent 72%) 8% 19% / 76px 52px no-repeat,
    linear-gradient(136deg, transparent 44%, #8ee2b831 45% 48%, transparent 49%) calc(100% - 11%) 74% / 72px 58px no-repeat,
    linear-gradient(43deg, transparent 44%, #8ee2b831 45% 48%, transparent 49%) calc(100% - 8%) 74% / 72px 58px no-repeat,
    radial-gradient(ellipse at 50% 60%, #f6b5441b 0 61%, #f7c8612d 62% 67%, transparent 68%) calc(100% - 9%) 80% / 44px 70px no-repeat,
    repeating-conic-gradient(from 180deg at 50% 100%, #ffc96f27 0deg 2deg, transparent 2.4deg 30deg) 22% 86% / 58px 40px no-repeat,
    radial-gradient(circle at 50% 100%, #ff9f3810 0 66%, #ffca7226 67% 71%, transparent 72%) 22% 86% / 58px 40px no-repeat;
}

@keyframes fsa-y2k-orbit-drift {
  0% { transform: perspective(1180px) rotateX(57deg) rotateZ(-5deg) translate3d(-.6%, 3%, 0) scale(1.13); }
  100% { transform: perspective(1180px) rotateX(59deg) rotateZ(-2deg) translate3d(.7%, 1%, 0) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-layer::after { animation: none; }
}

/* v0.38.4: mobile navigation compresses into a collapsible vertical rail. */
@media (width >= 721px) {
  .site-header .mobile-socials,
  .site-header .mobile-language-row { display: none !important; }
}

@media (width <= 720px) {
  :root { --fsa-header-height: 62px; }

  .site-header {
    height: 62px !important;
    overflow: visible !important;
  }

  .site-header .nav-shell {
    width: calc(100% - 20px);
    height: 62px;
    min-height: 62px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    position: relative;
  }

  .site-header .site-brand {
    width: calc(100% - 238px);
    max-width: calc(100% - 238px);
    min-width: 0;
  }

  .site-header .site-brand .brand-desktop { display: none !important; }
  .site-header .site-brand .brand-mobile {
    min-width: 0;
    display: block !important;
    overflow: hidden;
    font-size: 12px !important;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header .site-brand .brand-en { font-size: 9px !important; }
  .site-header .site-brand small {
    margin-top: 2px;
    font-size: 6px !important;
    white-space: nowrap;
  }

  .site-header .desktop-nav,
  .site-header .header-socials { display: none !important; }

  .site-header .mobile-socials {
    width: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    gap: 4px;
    position: absolute !important;
    top: 18px;
    right: 0;
    z-index: 4;
  }

  .site-header .mobile-socials .social-link {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  .site-header .mobile-socials .social-symbol { transform: scale(.72); }

  .site-header .mobile-language-row {
    width: 106px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: block !important;
    position: absolute !important;
    top: 16px;
    right: 118px;
    z-index: 4;
  }

  .site-header .mobile-language-row .language-switcher {
    width: 106px !important;
    min-width: 106px !important;
    min-height: 28px;
    gap: 1px;
    padding: 2px;
    border: 1px solid #ffb06f88;
    border-radius: 18px;
    background: #110c0cf2;
    box-shadow: 0 7px 16px #00000045;
  }

  .site-header .mobile-language-row .language-switcher a {
    min-height: 22px;
    border: 0;
    border-radius: 13px;
    font-size: 10px !important;
    font-weight: 850;
  }

  .site-header .menu-toggle {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid #ffb06f8f !important;
    border-radius: 50%;
    background: #090e13f2 !important;
    display: grid !important;
    gap: 4px;
    position: fixed !important;
    top: 72px;
    right: 10px;
    z-index: 1530;
    box-shadow: 0 8px 20px #0009;
  }

  .site-header .menu-toggle span {
    width: 100%;
    height: 1px;
    background: #ffd2a4;
    display: block;
  }

  .site-header .menu-toggle.open {
    background: #ff6500 !important;
    border-color: #ff9e58 !important;
  }

  .site-header .menu-toggle.open span { background: #080c10; }

  .site-header .mobile-menu {
    width: 118px !important;
    max-height: calc(100dvh - 120px);
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ff9a4a73 !important;
    border-radius: 4px;
    background: linear-gradient(145deg, #09131bf8, #03080df8) !important;
    display: block !important;
    overflow: hidden !important;
    visibility: hidden;
    opacity: 0;
    position: fixed !important;
    top: 114px;
    right: 8px;
    transform: translateX(calc(100% + 18px));
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    box-shadow: 0 18px 42px #000b;
  }

  .site-header .mobile-menu.open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  .site-header .mobile-menu nav {
    width: 100%;
    max-height: calc(100dvh - 128px);
    padding: 4px !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 2px;
    overflow-y: auto;
  }

  .site-header .mobile-menu nav a {
    min-width: 0;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid #4e7a8a45;
    background: #071018c9;
    display: grid !important;
    justify-items: start;
    align-content: center;
    gap: 2px;
    text-align: left;
  }

  .site-header .mobile-menu nav a span { font-size: 12px; line-height: 1; }
  .site-header .mobile-menu nav small { font-size: 7px; letter-spacing: .1em; }

  .site-header .mobile-socials .social-link[data-fsa-coming-soon]::after {
    top: 50%;
    right: calc(100% + 8px);
    bottom: auto;
    left: auto;
    min-width: 0;
    max-width: calc(100vw - 40px);
    white-space: nowrap;
    transform: translate(4px, -50%);
  }

  .site-header .mobile-socials .social-link[data-fsa-coming-soon]:hover::after,
  .site-header .mobile-socials .social-link[data-fsa-coming-soon]:focus-visible::after {
    opacity: 0;
    transform: translate(4px, -50%);
  }

  .site-header .mobile-socials .social-link[data-fsa-coming-soon][data-fsa-notice-open="true"]::after {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .pattern-layer::after {
    inset: -24% !important;
    opacity: .58;
    transform: perspective(900px) rotateX(53deg) rotateZ(-4deg) translate3d(0, 2%, 0) scale(1.2);
  }

  .pattern-layer::before { opacity: .48; }
}

/* v0.38.5: the global player uses a genuine drop-arrow; language stays compact but legible. */
.floating-music-list-toggle {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  color: #e9f5f6 !important;
  font-family: Inter, "Arial Unicode MS", sans-serif !important;
  font-size: 24px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.floating-music-list-toggle::after { content: none !important; }

.floating-music-list-toggle.active {
  color: #071018 !important;
  background: #ff6500 !important;
}

.floating-music-copy > strong { font-size: 14px; }
.floating-music-list button > b { font-size: 11px; }
.floating-music-list button > small { font-size: 9px; }

.language-switcher,
.site-header .header-socials .language-switcher,
.mobile-language-row .language-switcher {
  width: 156px !important;
  min-width: 156px !important;
  height: 42px;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.language-switcher a {
  min-width: 0 !important;
  min-height: 40px;
  height: 40px;
  padding: 0 2px !important;
  flex: 1 1 0;
  display: grid !important;
  place-items: center;
  position: relative;
  margin-left: -8px;
  color: #f1ddd3 !important;
  border: 1px solid #9f4b20 !important;
  border-radius: 0 !important;
  clip-path: polygon(18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%);
  background: linear-gradient(135deg, #241712f5, #111011f7) !important;
  box-shadow: inset 0 0 0 1px #ffffff0a, 0 5px 11px #0000003d;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  isolation: isolate;
}

.language-switcher a:first-child { margin-left: 0; }
.language-switcher a:nth-child(1) { z-index: 1; }
.language-switcher a:nth-child(2) { z-index: 2; }
.language-switcher a:nth-child(3) { z-index: 3; }
.language-switcher a:nth-child(4) { z-index: 4; }

.language-switcher a:hover,
.language-switcher a:focus-visible {
  color: #fff5ed !important;
  border-color: #ffaf70 !important;
  background: linear-gradient(135deg, #382117f7, #191315f9) !important;
}

.language-switcher a.active {
  z-index: 6 !important;
  color: #15100e !important;
  border-color: #ffd0a5 !important;
  background: #ff6500 !important;
  box-shadow: 0 0 0 1px #ffb06f70, 0 5px 13px #6d1f0070;
}

/* The thin play line is a true scrub control on both mouse and touch screens. */
.floating-music-progress {
  cursor: ew-resize;
  touch-action: none;
}

.floating-music-progress::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--fsa-progress-position, 0%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.7);
  background: #fff0df;
  box-shadow: 0 0 0 2px #ff6500, 0 0 10px #ff6500aa;
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
}

.floating-music-progress:hover::before,
.floating-music-progress:focus-visible::before,
.floating-music-progress.is-dragging::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.floating-music-progress.is-dragging {
  box-shadow: 0 0 0 1px #ff6500, 0 0 12px #ff650066;
}

/* Long, hairline Y2K paths: bright enough to read, but never heavier than the archive content. */
.pattern-layer::after {
  inset: -10% !important;
  opacity: .82;
  background:
    radial-gradient(148% 72% at -24% 13%, transparent 68.52%, #67e9f095 68.66%, #67e9f095 68.78%, transparent 68.94%),
    radial-gradient(134% 61% at 108% 18%, transparent 70.05%, #ff965f8a 70.18%, #ff965f8a 70.30%, transparent 70.48%),
    radial-gradient(164% 76% at 7% 56%, transparent 69.34%, #9af6df74 69.47%, #9af6df74 69.59%, transparent 69.76%),
    radial-gradient(146% 69% at 114% 62%, transparent 68.76%, #ffb46179 68.90%, #ffb46179 69.02%, transparent 69.19%),
    radial-gradient(122% 55% at -12% 82%, transparent 70.82%, #5bdfe984 70.95%, #5bdfe984 71.07%, transparent 71.24%),
    radial-gradient(116% 48% at 96% 91%, transparent 69.70%, #f6d07166 69.83%, #f6d07166 69.95%, transparent 70.13%);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 2px #79e9e144);
  mix-blend-mode: screen;
  transform: perspective(1400px) rotateX(50deg) rotateZ(-3deg) translate3d(0, 2%, 0) scale(1.08);
  transform-origin: 50% 50%;
  animation: fsa-y2k-orbit-drift 20s ease-in-out infinite alternate;
}

@keyframes fsa-y2k-orbit-drift {
  0% { transform: perspective(1400px) rotateX(50deg) rotateZ(-3deg) translate3d(-.45%, 2.5%, 0) scale(1.08); }
  100% { transform: perspective(1400px) rotateX(52deg) rotateZ(-1.2deg) translate3d(.55%, .5%, 0) scale(1.105); }
}

@media (width <= 720px) {
  .site-header .site-brand {
    width: calc(100% - 254px);
    max-width: calc(100% - 254px);
  }

  .site-header .mobile-language-row {
    width: 128px !important;
    right: 110px;
  }

  .site-header .mobile-language-row .language-switcher {
    width: 128px !important;
    min-width: 128px !important;
    height: 34px;
  }

  .site-header .mobile-language-row .language-switcher a {
    min-height: 32px;
    height: 32px;
    margin-left: -4px;
    font-size: 10.5px !important;
  }

  .site-header .mobile-language-row .language-switcher a:first-child { margin-left: 0; }
  .floating-music-copy > strong { font-size: 13px; }

  .pattern-layer::after {
    inset: -18% !important;
    opacity: .68;
    transform: perspective(940px) rotateX(44deg) rotateZ(-2deg) translate3d(0, 1%, 0) scale(1.13);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-layer::after { animation: none !important; }
}

/* v0.50: mobile navigation is a clear edge control; all menu routes land on homepage sections. */
.section[id] {
  scroll-margin-top: 92px;
}

@media (width <= 720px) {
  .section[id] {
    scroll-margin-top: 76px;
  }

  .site-header .menu-toggle {
    width: 58px !important;
    height: 42px !important;
    padding: 10px 29px 10px 10px !important;
    border: 2px solid #ff8a34 !important;
    border-radius: 24px 0 0 24px !important;
    background: #071018f5 !important;
    grid-template-rows: repeat(3, 2px);
    align-content: center;
    box-shadow: 0 0 0 1px #080c10, 0 10px 25px #000b, inset 0 0 16px #ff65001f;
  }

  .site-header .menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff2e7;
    box-shadow: 0 0 7px #ff8a34aa;
  }

  .site-header .menu-toggle::after {
    content: "‹";
    position: absolute;
    top: 50%;
    right: 7px;
    color: #ff7a1a;
    font-family: Arial, sans-serif;
    font-size: 29px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-53%);
    text-shadow: 0 0 9px #ff650099;
  }

  .site-header .menu-toggle.open {
    background: #ff6500 !important;
    border-color: #ffd0a5 !important;
  }

  .site-header .menu-toggle.open::after {
    content: "›";
    color: #071018;
    text-shadow: none;
  }

  .site-header .menu-toggle.open span {
    background: #071018;
    box-shadow: none;
  }

  .life-log-card {
    cursor: zoom-in;
  }
}

/* Archive image redraws: source art is consistently framed in wide 21:9. */
.case-card .case-media,
.case-row-media {
  aspect-ratio: 21 / 9 !important;
}
.case-row-media {
  align-self: start;
  height: auto;
  min-height: 0;
}
.case-row-media img {
  height: 100%;
  object-fit: cover;
}

/* The clean city concept sheet has no baked labels; live nodes remain the only labels. */
.subpage--city .map-stage {
  min-height: 0;
  aspect-ratio: 21 / 9;
}
.subpage--city .map-stage > img {
  filter: saturate(.72) brightness(.78) contrast(1.08);
}
@media (max-width: 720px) {
  .subpage--city .map-stage { aspect-ratio: 21 / 10; }
}

/* v0.41: an ultra-condensed archive ticker travels through the solid citrus team field. */
#team .team-marquee {
  position: absolute;
  z-index: 1 !important;
  top: 150px;
  right: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: clamp(300px, 29vw, 448px);
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
}

#team .team-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Half-speed loop: preserves the archive-ticker rhythm without rushing past the portraits. */
  animation: fsa-team-citrus-ticker 40s linear infinite;
}

#team .team-marquee-track span {
  display: inline-block;
  min-width: max-content;
  padding-right: 1.8em;
  color: #ffd57a;
  background: linear-gradient(90deg, #ffba6a 0%, #ffe28c 42%, #91ead0 72%, #ffc26f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Arial Narrow", "DIN Condensed", "Roboto Condensed", "Noto Sans SC", sans-serif;
  font-size: clamp(92px, 14vw, 248px);
  font-stretch: ultra-condensed;
  font-weight: 300;
  line-height: .78;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .93;
  text-shadow: 0 0 16px #ffd76c35;
}

@keyframes fsa-team-citrus-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (width <= 720px) {
  #team .team-marquee {
    top: 124px;
    height: min(76vw, 380px);
  }

  #team .team-marquee-track { animation-duration: 32s; }
  #team .team-marquee-track span {
    font-size: clamp(66px, 22vw, 130px);
    letter-spacing: .05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #team .team-marquee-track { animation: none; }
}

/* v0.45: quiet vector archive cartography — fruit-sector paths with a slow pseudo-3D drift. */
.pattern-layer::after {
  inset: -12% !important;
  opacity: .58;
  background:
    radial-gradient(132% 82% at 3% 53%, transparent 71.8%, #e66f2b62 72% 72.14%, transparent 72.33%),
    radial-gradient(122% 72% at 102% 48%, transparent 71.8%, #eb7d3361 72% 72.13%, transparent 72.31%),
    radial-gradient(165% 95% at 49% 119%, transparent 72.7%, #5bd0c05d 72.88% 73.02%, transparent 73.2%),
    radial-gradient(150% 86% at 51% -18%, transparent 76.2%, #eeb14b50 76.38% 76.5%, transparent 76.68%),
    radial-gradient(48px 48px at 8% 36%, transparent 70%, #e47b3654 71% 73%, transparent 74%),
    radial-gradient(68px 68px at 92% 69%, transparent 70%, #eaae4e4f 71% 72.6%, transparent 74%),
    radial-gradient(84px 84px at 82% 19%, transparent 67%, #e47b3650 68% 69.4%, transparent 70.7%),
    repeating-linear-gradient(90deg, transparent 0 42px, #e87a3520 42px 43px, transparent 43px 86px),
    linear-gradient(169deg, transparent 0 24.7%, #e98a3a48 24.82% 24.91%, transparent 25.04%),
    linear-gradient(7deg, transparent 0 71.6%, #66d8c451 71.72% 71.82%, transparent 71.96%),
    linear-gradient(111deg, transparent 0 48.6%, #dba45042 48.73% 48.82%, transparent 48.96%);
  background-repeat: no-repeat;
  filter: none;
  mix-blend-mode: normal;
  transform: perspective(1700px) rotateX(50deg) rotateZ(-2deg) translate3d(0, 2%, 0) scale(1.1);
  transform-origin: 50% 50%;
  animation: fsa-y2k-path-drift 28s ease-in-out infinite alternate;
}

@keyframes fsa-y2k-path-drift {
  0% { transform: perspective(1700px) rotateX(50deg) rotateZ(-2deg) translate3d(-.7%, 2.3%, 0) scale(1.1); }
  52% { transform: perspective(1700px) rotateX(47deg) rotateZ(.4deg) translate3d(.45%, 1.1%, 0) scale(1.115); }
  100% { transform: perspective(1700px) rotateX(52deg) rotateZ(-.35deg) translate3d(.7%, .25%, 0) scale(1.105); }
}

@media (width <= 720px) {
  .pattern-layer::after {
    inset: -30% !important;
    opacity: .46;
    transform: perspective(900px) rotateX(45deg) rotateZ(-2deg) translate3d(0, 1%, 0) scale(1.19);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-layer::after { animation: none !important; }
}