:root {
  --rose-900: #84234a;
  --rose-700: #ca5f8f;
  --rose-500: #f29dbd;
  --rose-200: #ffe6f0;
  --blue-700: #75b7ef;
  --blue-500: #99d2ff;
  --blue-100: #edf7ff;
  --mint-600: #87c6aa;
  --mint-100: #eef8f2;
  --lavender-500: #b8a0ef;
  --lavender-100: #f2edff;
  --moon-gold: #f4d38a;
  --moon-ivory: #fff8de;
  --moon-indigo: #7d76bc;
  --bamboo-500: #83b39c;
  --bamboo-300: #b8dfca;
  --text-900: #5b4a56;
  --text-700: #7b6c76;
  --line: rgba(156, 131, 147, 0.15);
  --shadow: 0 24px 80px rgba(177, 143, 161, 0.16);
  --shadow-soft: 0 18px 54px rgba(177, 143, 161, 0.12);
  --shadow-strong:
    0 32px 110px rgba(177, 143, 161, 0.2),
    0 8px 24px rgba(255, 255, 255, 0.36) inset;
  --panel-shadow:
    0 28px 90px rgba(177, 143, 161, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -18px 34px rgba(255, 255, 255, 0.12) inset;
  --panel-fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(252, 246, 251, 0.78) 42%,
      rgba(246, 250, 255, 0.74) 100%
    );
  --panel-line: rgba(255, 255, 255, 0.78);
  --panel-deep-line: rgba(167, 138, 156, 0.16);
  --radius-xxl: 34px;
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --max-width: 1200px;
  --heading-font: "STZhongsong", "Source Han Serif SC", "Noto Serif SC",
    "Songti SC", serif;
  --body-font: "HarmonyOS Sans SC", "Source Han Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --page-accent: var(--rose-700);
  --page-accent-2: var(--blue-700);
  --page-soft: var(--rose-200);
  --page-tint: rgba(242, 157, 189, 0.14);
  --cursor-x: 50vw;
  --cursor-y: 18vh;
  --hero-parallax: 0px;
  --hero-parallax-soft: 0px;
  --scroll-progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text-900);
  font-family: var(--body-font);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--page-accent) 18%, white), transparent 24%),
    radial-gradient(circle at 86% 9%, color-mix(in srgb, var(--page-accent-2) 18%, white), transparent 24%),
    radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.92), transparent 38%),
    linear-gradient(180deg, #fffefc 0%, #fff8fc 22%, #fbf8ff 52%, #f7fbff 100%);
  transition:
    background 420ms ease,
    color 240ms ease;
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  filter: blur(48px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

body::before {
  top: 1rem;
  left: -10rem;
  background: var(--page-tint);
  animation: ambient-drift-left 20s ease-in-out infinite alternate;
}

body::after {
  top: 5rem;
  right: -10rem;
  background: color-mix(in srgb, var(--page-accent-2) 18%, white);
  animation: ambient-drift-right 24s ease-in-out infinite alternate;
}

body.theme-home {
  --page-accent: var(--rose-700);
  --page-accent-2: var(--blue-700);
  --page-soft: var(--rose-200);
  --page-tint: rgba(242, 157, 189, 0.14);
}

body.theme-escort {
  --page-accent: var(--blue-700);
  --page-accent-2: var(--mint-600);
  --page-soft: var(--blue-100);
  --page-tint: rgba(117, 183, 239, 0.15);
}

body.theme-playhouse {
  --page-accent: var(--mint-600);
  --page-accent-2: var(--rose-700);
  --page-soft: var(--mint-100);
  --page-tint: rgba(135, 198, 170, 0.16);
}

body.theme-lounge {
  --page-accent: var(--blue-700);
  --page-accent-2: var(--lavender-500);
  --page-soft: var(--blue-100);
  --page-tint: rgba(153, 210, 255, 0.16);
}

body.theme-faq {
  --page-accent: var(--lavender-500);
  --page-accent-2: var(--rose-700);
  --page-soft: var(--lavender-100);
  --page-tint: rgba(184, 160, 239, 0.16);
}

body.theme-contact {
  --page-accent: var(--blue-700);
  --page-accent-2: var(--rose-700);
  --page-soft: var(--blue-100);
  --page-tint: rgba(117, 183, 239, 0.15);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.site-shell {
  width: 100%;
  position: relative;
  isolation: isolate;
  transition:
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 420ms ease,
    filter 420ms ease;
}

.site-shell::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(
      420px circle at var(--cursor-x) var(--cursor-y),
      color-mix(in srgb, var(--page-accent) 14%, white) 0%,
      rgba(255, 255, 255, 0.16) 18%,
      transparent 68%
    ),
    radial-gradient(
      280px circle at calc(var(--cursor-x) - 8%) calc(var(--cursor-y) + 10%),
      color-mix(in srgb, var(--page-accent-2) 12%, white) 0%,
      transparent 72%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 18%,
      transparent 36%,
      rgba(255, 255, 255, 0.04) 58%,
      transparent 100%
    );
  opacity: 0.58;
}

.site-shell::after {
  content: "";
  position: fixed;
  top: 0.65rem;
  left: 50%;
  width: min(calc(100vw - 2.4rem), calc(var(--max-width) - 2.4rem));
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 40;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--page-accent) 74%, white),
      color-mix(in srgb, var(--page-accent-2) 74%, white)
    );
  box-shadow:
    0 0 18px color-mix(in srgb, var(--page-accent) 26%, transparent),
    0 0 32px color-mix(in srgb, var(--page-accent-2) 22%, transparent);
  opacity: 0.82;
  transform: translateX(-50%) scaleX(var(--scroll-progress));
  transform-origin: left center;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      60vw 60vw at 18% 16%,
      color-mix(in srgb, var(--page-accent) 12%, white) 0%,
      transparent 62%
    ),
    radial-gradient(
      56vw 56vw at 82% 18%,
      color-mix(in srgb, var(--page-accent-2) 12%, white) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(255, 250, 253, 0.28) 0%,
      rgba(255, 255, 255, 0.72) 38%,
      rgba(246, 250, 255, 0.96) 100%
    );
  transform: scale(1.04);
  filter: blur(2px);
  transition:
    opacity 360ms ease,
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 420ms ease;
}

.page-transition::before,
.page-transition::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-transition::before {
  top: 8%;
  right: 8%;
  width: min(34vw, 28rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 36% 34%,
      rgba(255, 255, 255, 0.98) 0%,
      var(--moon-ivory) 34%,
      rgba(244, 211, 138, 0.45) 54%,
      transparent 74%
    );
  box-shadow:
    0 0 48px rgba(255, 248, 222, 0.34),
    0 0 120px rgba(244, 211, 138, 0.16);
  transform: translate3d(18px, -12px, 0) scale(0.88);
  opacity: 0;
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-transition::after {
  inset: 0;
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px)
      0 0 / 90px 90px,
    radial-gradient(circle at 68% 38%, rgba(255, 248, 222, 0.22) 0 2px, transparent 3px)
      0 0 / 120px 120px,
    linear-gradient(
      120deg,
      transparent 12%,
      rgba(255, 255, 255, 0.16) 34%,
      transparent 56%
    );
  opacity: 0;
  transform: translateX(-2%);
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.is-navigating .page-transition {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

body.is-navigating .page-transition::before,
body.is-navigating .page-transition::after {
  opacity: 1;
}

body.is-navigating .page-transition::before {
  transform: translate3d(0, 0, 0) scale(1);
}

body.is-navigating .page-transition::after {
  transform: translateX(0);
}

body.is-navigating .site-shell {
  opacity: 0.84;
  transform: translate3d(0, 14px, 0) scale(0.992);
  filter: blur(3px);
}

.site-header,
.page-hero,
.page-section,
.cta-banner,
.site-footer {
  width: min(calc(100% - 2rem), var(--max-width));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.05rem;
  position: sticky;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(251, 246, 252, 0.58));
  backdrop-filter: blur(24px) saturate(1.12);
  box-shadow:
    0 22px 60px rgba(177, 143, 161, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 -12px 28px rgba(255, 255, 255, 0.12) inset;
  animation: header-settle 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition:
    padding 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease;
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.site-header::before {
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.42);
  opacity: 0.72;
}

.site-header::after {
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--page-accent) 34%, white) 24%,
    color-mix(in srgb, var(--page-accent-2) 34%, white) 76%,
    transparent
  );
  opacity: 0.78;
}

body.is-scrolled .site-header {
  padding: 0.76rem 0.96rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 251, 255, 0.68));
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 24px 70px rgba(177, 143, 161, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 0 0 1px rgba(255, 255, 255, 0.26) inset;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: fit-content;
}

.brand-image {
  display: block;
  width: clamp(150px, 18vw, 220px);
  height: auto;
  transform-origin: center;
  filter:
    saturate(1.04)
    contrast(1.02)
    drop-shadow(0 12px 20px rgba(177, 143, 161, 0.16));
  transition:
    transform 420ms ease,
    filter 420ms ease;
  animation: brand-bob 9s ease-in-out infinite;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.35rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(246, 250, 255, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -10px 20px rgba(255, 255, 255, 0.08);
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-link,
.quick-group,
.button,
.copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.72rem 1.12rem;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  isolation: isolate;
  --button-shift-x: 0px;
  --button-shift-y: 0px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.site-link {
  color: var(--text-700);
  font-size: 0.92rem;
  white-space: nowrap;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.12);
  transform: translate3d(var(--button-shift-x), var(--button-shift-y), 0);
}

.site-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.38rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--page-accent), var(--page-accent-2));
  transform: scaleX(0.18);
  transform-origin: center;
  opacity: 0;
  transition:
    transform 260ms ease,
    opacity 260ms ease;
}

.site-link.is-active {
  color: var(--page-accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-soft) 78%, white), rgba(255, 255, 255, 0.82));
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 10px 20px rgba(177, 143, 161, 0.08);
}

.site-link:hover::after,
.site-link.is-active::after {
  transform: scaleX(1);
  opacity: 1;
}

.site-link:hover,
.quick-group:hover,
.button:hover,
.copy-button:hover {
  transform: translate3d(var(--button-shift-x), calc(var(--button-shift-y) - 2px), 0);
}

.site-link.is-pressed,
.quick-group.is-pressed,
.button.is-pressed,
.copy-button.is-pressed,
.site-link:active,
.quick-group:active,
.button:active,
.copy-button:active {
  transform:
    translate3d(var(--button-shift-x), calc(var(--button-shift-y) + 1px), 0)
    scale(0.982);
  transition-duration: 120ms;
}

.site-link:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(249, 251, 255, 0.42));
}

.quick-group,
.button-primary,
.copy-button {
  color: #fff;
  border: none;
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--page-accent) 30%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.34) inset;
  transform: translate3d(var(--button-shift-x), var(--button-shift-y), 0);
}

.button-soft {
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-soft) 82%, white), rgba(255, 255, 255, 0.78));
  box-shadow:
    0 14px 28px rgba(177, 143, 161, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  transform: translate3d(var(--button-shift-x), var(--button-shift-y), 0);
}

.button-outline {
  border: 1px solid color-mix(in srgb, var(--page-accent) 24%, white);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 251, 255, 0.54));
  box-shadow:
    0 14px 28px rgba(177, 143, 161, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  transform: translate3d(var(--button-shift-x), var(--button-shift-y), 0);
}

.quick-group.is-pressed,
.button-primary.is-pressed,
.copy-button.is-pressed,
.quick-group:active,
.button-primary:active,
.copy-button:active {
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--page-accent) 18%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

.button-soft.is-pressed,
.button-outline.is-pressed,
.button-soft:active,
.button-outline:active {
  box-shadow:
    0 10px 20px rgba(177, 143, 161, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.quick-group::before,
.button::before,
.copy-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgba(255, 255, 255, 0.24) 40%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.18) 60%,
      transparent 82%
    );
  transform: translateX(-140%);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.quick-group:hover::before,
.button:hover::before,
.copy-button:hover::before {
  transform: translateX(135%);
}

.page-hero {
  position: relative;
  overflow: clip;
  padding: 5.8rem 0 3rem;
  --hero-axis-x: 0px;
  --hero-axis-y: 0px;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: auto;
}

.page-hero::before {
  top: 2rem;
  left: -8%;
  width: 42%;
  height: 22rem;
  border-radius: 999px;
  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.4),
      color-mix(in srgb, var(--page-accent) 12%, white),
      transparent 72%
    );
  filter: blur(22px);
  opacity: 0.7;
  transform:
    translate3d(
      calc(var(--hero-parallax-soft) * -0.6 + var(--hero-axis-x) * -0.45),
      calc(var(--hero-axis-y) * 0.3),
      0
    )
    rotate(-8deg);
}

.page-hero::after {
  right: -4%;
  top: 5rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, transparent 60%),
    conic-gradient(
      from 180deg,
      transparent,
      color-mix(in srgb, var(--page-accent-2) 12%, white),
      transparent 65%
    );
  opacity: 0.48;
  transform:
    translate3d(
      calc(var(--hero-parallax) * 0.45 + var(--hero-axis-x) * 0.6),
      calc(var(--hero-parallax-soft) * -0.3 + var(--hero-axis-y) * -0.45),
      0
    );
  filter: blur(14px);
}

.hero-video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-video-stage::before,
.hero-video-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-video-stage::before {
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 252, 254, 0.98) 0%,
      rgba(255, 249, 253, 0.94) 22%,
      rgba(255, 249, 253, 0.7) 38%,
      rgba(255, 255, 255, 0.18) 58%,
      rgba(255, 255, 255, 0.04) 76%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--page-accent-2) 16%, white) 0%,
      transparent 24%
    );
  z-index: 2;
}

.hero-video-stage::after {
  top: 1rem;
  right: clamp(1rem, 6vw, 5rem);
  width: clamp(18rem, 42vw, 42rem);
  height: clamp(18rem, 62vh, 36rem);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--page-accent) 14%, white) 0%,
      transparent 70%
    );
  filter: blur(34px);
  opacity: 0.5;
  transform:
    translate3d(
      calc(var(--hero-parallax-soft) * 0.3 + var(--hero-axis-x) * 0.45),
      calc(var(--hero-axis-y) * -0.34),
      0
    );
}

.hero-video-shell {
  position: absolute;
  top: 1.25rem;
  right: clamp(0rem, 4vw, 3rem);
  width: clamp(22rem, 50vw, 50rem);
  height: clamp(24rem, 68vh, 42rem);
  overflow: hidden;
  border-radius: clamp(2rem, 3vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.76);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.26),
      rgba(255, 255, 255, 0.06)
    );
  box-shadow:
    0 38px 100px rgba(177, 143, 161, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 -24px 38px rgba(255, 255, 255, 0.08) inset;
  transform:
    translate3d(
      calc(var(--hero-parallax) * 0.38 + var(--hero-axis-x) * 0.55),
      calc(var(--hero-parallax-soft) * -0.36 + var(--hero-axis-y) * -0.42),
      0
    )
    rotate(-3.2deg);
}

.hero-video-shell::before,
.hero-video-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-video-shell::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      transparent 18%,
      transparent 64%,
      rgba(255, 255, 255, 0.18) 100%
    ),
    linear-gradient(
      130deg,
      transparent 0%,
      rgba(255, 255, 255, 0.16) 18%,
      transparent 34%,
      transparent 62%,
      rgba(255, 255, 255, 0.12) 84%,
      transparent 100%
    );
}

.hero-video-shell::after {
  inset: 1rem;
  border-radius: calc(clamp(2rem, 3vw, 3rem) - 0.8rem);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 18px 28px rgba(255, 255, 255, 0.04);
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter:
    saturate(1.04)
    contrast(1.03)
    brightness(0.9);
  transform: scale(1.04);
}

body.theme-home .page-hero {
  min-height: auto;
  padding-top: 4.9rem;
  padding-bottom: 1.6rem;
}

body.theme-home .hero-video-stage::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 22%,
      transparent 78%,
      rgba(255, 255, 255, 0.08) 100%
    ),
    radial-gradient(
      circle at 80% 18%,
      color-mix(in srgb, var(--page-accent-2) 14%, white) 0%,
      transparent 22%
    );
}

body.theme-home .hero-video-shell {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: clamp(2.2rem, 3vw, 3.2rem);
  transform:
    translate3d(
      calc(var(--hero-parallax) * 0.24 + var(--hero-axis-x) * 0.28),
      calc(var(--hero-parallax-soft) * -0.24 + var(--hero-axis-y) * -0.22),
      0
    )
    rotate(-1.2deg);
}

body.theme-home .hero-video {
  object-position: center 24%;
  filter:
    saturate(1.08)
    contrast(1.04)
    brightness(0.96);
  transform: scale(1.02);
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.hero-atmosphere::before,
.hero-atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.42;
}

.hero-atmosphere::before {
  top: 8%;
  left: 12%;
  width: 20rem;
  height: 9rem;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--page-accent) 12%, white) 0%,
      transparent 72%
    );
  animation: haze-shift 16s ease-in-out infinite alternate;
}

.hero-atmosphere::after {
  right: 8%;
  bottom: 10%;
  width: 16rem;
  height: 10rem;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--page-accent-2) 12%, white) 0%,
      transparent 74%
    );
  animation: haze-shift 18s ease-in-out infinite alternate-reverse;
}

.hero-speck,
.hero-petal {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  will-change: transform, opacity;
}

.hero-speck {
  width: var(--size, 10px);
  height: var(--size, 10px);
  border-radius: 50%;
  opacity: var(--opacity, 0.45);
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.96) 0%,
      color-mix(in srgb, var(--page-accent-2) 22%, white) 46%,
      transparent 76%
    );
  box-shadow:
    0 0 16px color-mix(in srgb, var(--page-accent) 18%, transparent),
    0 0 30px rgba(255, 255, 255, 0.38);
  filter: blur(var(--blur, 0px));
  animation: speck-drift var(--duration, 18s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.hero-petal {
  width: var(--size, 18px);
  height: calc(var(--size, 18px) * 1.42);
  border-radius: 72% 0 72% 0 / 92% 0 100% 0;
  opacity: var(--opacity, 0.54);
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.96) 0%,
      color-mix(in srgb, var(--page-accent) 34%, white) 38%,
      color-mix(in srgb, var(--page-accent-2) 28%, white) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    0 8px 24px color-mix(in srgb, var(--page-accent) 16%, transparent);
  filter: blur(var(--blur, 0px));
  transform: rotate(var(--rotate, 0deg));
  transform-origin: center;
  animation: petal-sway var(--duration, 20s) cubic-bezier(0.36, 0.07, 0.19, 0.97)
    infinite;
  animation-delay: var(--delay, 0s);
}

.hero-celestial {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.hero-celestial > * {
  position: absolute;
}

.hero-character-stage {
  position: absolute;
  right: clamp(0rem, 3vw, 3rem);
  bottom: -0.4rem;
  width: clamp(15rem, 29vw, 23rem);
  aspect-ratio: 0.74;
  pointer-events: none;
  z-index: 2;
  opacity: 0.82;
  transform:
    translate3d(
      calc(var(--hero-axis-x) * 0.24),
      calc(var(--hero-axis-y) * -0.24),
      0
    );
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 86%, transparent 100%);
}

.hero-character-stage::before {
  content: "";
  position: absolute;
  inset: 14% 8% 6%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.26) 0%,
      color-mix(in srgb, var(--moon-indigo) 14%, white) 36%,
      transparent 74%
    );
  filter: blur(18px);
  z-index: -1;
}

.hero-character-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    saturate(1.04)
    contrast(1.03)
    drop-shadow(0 24px 42px rgba(125, 118, 188, 0.16));
}

.hero-celestial[data-mode="kaguya"] {
  --moon-opacity: 0.92;
  --crest-opacity: 0.92;
  --bamboo-opacity: 0.3;
}

.hero-celestial[data-mode="kaguya-soft"] {
  --moon-opacity: 0.78;
  --crest-opacity: 0.78;
  --bamboo-opacity: 0.24;
}

.hero-celestial[data-mode="default"] {
  --moon-opacity: 0.56;
  --crest-opacity: 0.58;
  --bamboo-opacity: 0.18;
}

.hero-moon,
.hero-moon-ring,
.hero-orbit,
.hero-crest,
.kaguya-badge,
.hero-bamboo {
  will-change: transform, opacity;
}

.hero-moon {
  top: 1.6rem;
  right: clamp(1rem, 7vw, 7rem);
  width: clamp(14rem, 22vw, 21rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--moon-opacity, 0.82);
  background:
    radial-gradient(
      circle at 36% 34%,
      rgba(255, 255, 255, 1) 0%,
      var(--moon-ivory) 34%,
      rgba(244, 211, 138, 0.54) 54%,
      transparent 74%
    );
  box-shadow:
    0 0 40px rgba(255, 248, 222, 0.34),
    0 0 120px rgba(244, 211, 138, 0.16);
  transform:
    translate3d(
      calc(var(--hero-axis-x) * 0.72),
      calc(var(--hero-axis-y) * -0.52),
      0
    );
  animation: moon-breathe 12s ease-in-out infinite;
}

.hero-moon::before,
.hero-moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: auto;
}

.hero-moon::before {
  inset: 10%;
  border: 1px solid rgba(255, 255, 255, 0.34);
  opacity: 0.65;
}

.hero-moon::after {
  width: 52%;
  height: 52%;
  top: 8%;
  right: 10%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 72%);
  filter: blur(8px);
}

.hero-moon-ring {
  top: 0.6rem;
  right: clamp(0rem, 5vw, 5rem);
  width: clamp(19rem, 29vw, 28rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  opacity: 0.56;
  transform:
    translate3d(
      calc(var(--hero-axis-x) * 0.48),
      calc(var(--hero-axis-y) * -0.32),
      0
    )
    rotate(0deg);
  animation: orbit-turn 28s linear infinite;
}

.hero-orbit {
  top: 0.6rem;
  right: clamp(0rem, 5vw, 5rem);
  width: clamp(19rem, 29vw, 28rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform:
    translate3d(
      calc(var(--hero-axis-x) * 0.48),
      calc(var(--hero-axis-y) * -0.32),
      0
    );
}

.orbit-charm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 16px);
  height: var(--size, 16px);
  margin-left: calc(var(--size, 16px) * -0.5);
  margin-top: calc(var(--size, 16px) * -0.5);
  border-radius: 38% 62% 52% 48%;
  opacity: var(--opacity, 0.72);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96) 0%,
      color-mix(in srgb, var(--orb-color, var(--moon-gold)) 72%, white) 34%,
      rgba(255, 255, 255, 0.18) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.36),
    0 0 16px color-mix(in srgb, var(--orb-color, var(--moon-gold)) 32%, transparent);
  transform:
    rotate(var(--angle, 0deg))
    translateX(var(--radius, 160px))
    rotate(calc(var(--angle, 0deg) * -1));
  animation: charm-float var(--duration, 10s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.hero-crest {
  top: 3.4rem;
  left: clamp(0.6rem, 4vw, 3.2rem);
  width: clamp(4.8rem, 8vw, 6.3rem);
  aspect-ratio: 1;
  opacity: var(--crest-opacity, 0.82);
  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 14%, transparent 15%),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      color-mix(in srgb, var(--moon-indigo) 22%, white)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    0 18px 34px rgba(125, 118, 188, 0.12);
  transform:
    translate3d(
      calc(var(--hero-axis-x) * -0.3),
      calc(var(--hero-axis-y) * 0.3),
      0
    )
    rotate(45deg);
  animation: crest-glint 11s ease-in-out infinite;
}

.hero-crest::before,
.hero-crest::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.hero-crest::after {
  inset: 36%;
  background:
    radial-gradient(circle, var(--moon-gold) 0 28%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.82) 0 14%, transparent 16%);
}

.kaguya-badge {
  display: none;
}

.hero-bamboo {
  bottom: -1.6rem;
  width: clamp(8rem, 12vw, 10rem);
  height: 21rem;
  opacity: var(--bamboo-opacity, 0.24);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 14px,
      color-mix(in srgb, var(--bamboo-500) 72%, white) 14px 24px,
      rgba(255, 255, 255, 0.18) 24px 27px,
      transparent 27px 34px
    );
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 100%);
  filter: blur(0.2px);
  animation: bamboo-sway 14s ease-in-out infinite;
}

.hero-bamboo::before,
.hero-bamboo::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero-bamboo::before {
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 28px,
      rgba(255, 255, 255, 0.16) 28px 31px,
      transparent 31px 62px
    );
}

.hero-bamboo::after {
  inset: 12% -14% auto -14%;
  height: 70%;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--bamboo-300) 68%, white) 0 6px, transparent 7px)
      0 0 / 50px 72px;
  transform: rotate(-10deg);
  opacity: 0.28;
}

.hero-bamboo-left {
  left: -0.6rem;
}

.hero-bamboo-right {
  right: -1rem;
  transform: scaleX(-1);
  animation-delay: -3s;
}

body.theme-home .hero-character-stage {
  right: clamp(0rem, 7vw, 6rem);
  width: clamp(16rem, 31vw, 25rem);
}

body.theme-playhouse .hero-character-stage,
body.theme-lounge .hero-character-stage {
  right: clamp(-1rem, 4vw, 3rem);
  opacity: 0.72;
}

.hero-grid,
.contact-grid,
.faq-grid,
.contact-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.1rem;
}

.hero-grid,
.contact-panel {
  position: relative;
  z-index: 3;
}

.hero-grid {
  padding: 1rem;
  border-radius: calc(var(--radius-xxl) + 10px);
  border: 1px solid rgba(255, 255, 255, 0.56);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(249, 252, 255, 0.14)),
    radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--page-accent) 10%, white), transparent 22%),
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--page-accent-2) 10%, white), transparent 24%);
  box-shadow:
    0 24px 70px rgba(177, 143, 161, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
  backdrop-filter: blur(16px);
}

body.theme-home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  grid-template-rows: auto;
  align-items: start;
  gap: 0;
  min-height: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: calc(var(--radius-xxl) + 2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(247, 251, 255, 0.36)),
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--page-accent) 10%, white), transparent 22%),
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--page-accent-2) 10%, white), transparent 24%);
  box-shadow:
    0 28px 74px rgba(177, 143, 161, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.82) inset;
  backdrop-filter: blur(18px);
}

body.theme-home .hero-grid::before {
  content: none;
  display: none;
}

body.theme-home .kaguya-badge {
  display: none !important;
}

body.theme-home .hero-right {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  align-self: start;
}

.hero-copy,
.hero-panel,
.feature-card,
.service-card,
.guide-card,
.placeholder-card,
.content-card,
.timeline-step,
.poster-card,
.faq-side,
.contact-card,
.contact-panel,
.info-panel,
.cta-banner,
.group-card {
  border: 1px solid var(--panel-line);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.56) 0%,
      rgba(255, 255, 255, 0.14) 22%,
      transparent 38%
    ),
    radial-gradient(
      180px circle at 84% 0%,
      rgba(255, 255, 255, 0.34) 0%,
      transparent 62%
    ),
    var(--panel-fill);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(20px) saturate(1.08);
}

.hero-copy,
.hero-panel,
.contact-panel,
.cta-banner,
.group-card {
  border-radius: var(--radius-xxl);
}

.hero-copy,
.hero-panel,
.contact-panel {
  padding: 2.75rem;
}

body.theme-home .hero-copy {
  position: relative;
  z-index: 4;
  grid-column: 1;
  grid-row: 1;
  width: auto;
  margin: 0;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  border: none;
  border-right: 1px solid rgba(167, 138, 156, 0.12);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92),
      rgba(251, 246, 251, 0.84) 46%,
      rgba(246, 250, 255, 0.8) 100%
    );
  padding: 1.2rem 1.2rem 0.9rem;
}

body.theme-home .hero-media {
  position: relative;
  z-index: 3;
  grid-column: auto;
  grid-row: auto;
  display: block;
  min-height: 0;
  height: auto;
  padding: 0;
  border-bottom: 1px solid rgba(167, 138, 156, 0.12);
}

body.theme-home .hero-media::before {
  content: "";
  position: absolute;
  inset: 3% 2% 8% 8%;
  border-radius: clamp(2.2rem, 3vw, 3.2rem);
  background:
    radial-gradient(circle at 68% 16%, color-mix(in srgb, var(--page-accent-2) 12%, white) 0%, transparent 28%),
    radial-gradient(circle at 22% 82%, color-mix(in srgb, var(--page-accent) 12%, white) 0%, transparent 26%);
  filter: blur(26px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

body.theme-home .hero-media .hero-video-stage {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 30 / 17;
  margin-left: 0;
  overflow: hidden;
}

body.theme-home .hero-media-badge {
  display: none;
}

body.theme-home .hero-panel {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 4;
  width: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82),
      rgba(248, 251, 255, 0.72)
    );
  backdrop-filter: blur(24px) saturate(1.06);
}

body.theme-home .hero-panel-home {
  grid-column: auto;
  grid-row: auto;
  display: grid;
  grid-template-columns: minmax(15rem, 1.1fr) minmax(0, 2.45fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(244, 248, 255, 0.82) 34%,
      rgba(253, 243, 249, 0.8) 100%
    );
}

body.theme-home .hero-panel-home .stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

body.theme-home .hero-panel-home .panel-highlight {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  border: none;
  border-right: 1px solid rgba(167, 138, 156, 0.14);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.72), transparent 36%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.68) 0%,
      rgba(245, 245, 255, 0.52) 52%,
      rgba(251, 240, 248, 0.6) 100%
    );
}

body.theme-home .hero-panel-home .panel-highlight::after {
  content: "";
  position: absolute;
  top: 0.95rem;
  right: 0;
  width: 1px;
  height: calc(100% - 1.9rem);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(167, 138, 156, 0.06) 12%,
      rgba(167, 138, 156, 0.2) 50%,
      rgba(167, 138, 156, 0.06) 88%,
      transparent 100%
    );
}

body.theme-home .hero-logo {
  width: min(100%, 9.4rem);
  margin-bottom: 0.12rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
  filter: drop-shadow(0 10px 22px rgba(177, 143, 161, 0.12));
}

body.theme-home .hero-copy .eyebrow {
  width: fit-content;
  padding: 0.44rem 0.9rem 0.44rem 0.8rem;
  border-color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(248, 251, 255, 0.82) 74%,
      rgba(245, 236, 248, 0.88) 100%
    );
  color: var(--moon-indigo);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  box-shadow:
    0 14px 30px rgba(177, 143, 161, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body.theme-home .hero-copy .eyebrow::before {
  width: 0.36rem;
  height: 0.36rem;
  background: linear-gradient(135deg, var(--moon-indigo), var(--page-accent));
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.42),
    0 0 14px color-mix(in srgb, var(--page-accent) 24%, transparent);
}

body.theme-home .hero-copy h1 {
  max-width: 11.4ch;
  margin-top: 0.38rem;
  font-size: clamp(1.72rem, 2.7vw, 2.58rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.64),
    0 16px 34px rgba(177, 143, 161, 0.08);
}

body.theme-home .hero-copy h1::after {
  content: "";
  display: block;
  width: 4.8rem;
  height: 1px;
  margin-top: 0.56rem;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--moon-indigo) 78%, white),
      color-mix(in srgb, var(--page-accent) 72%, white),
      transparent
    );
  box-shadow: 0 0 14px color-mix(in srgb, var(--page-accent) 20%, transparent);
}

body.theme-home .hero-copy h1 span {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--page-accent) 92%, white) 0%,
      color-mix(in srgb, var(--moon-indigo) 40%, var(--page-accent)) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

body.theme-home .hero-text {
  max-width: 22.5rem;
  font-size: 0.77rem;
  line-height: 1.58;
  margin-top: 0.34rem;
  padding-left: 0.92rem;
  border-left: 1px solid rgba(167, 138, 156, 0.16);
  color: var(--text-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.theme-home .hero-actions {
  margin: 0.84rem 0 0.42rem;
  gap: 0.5rem;
  align-items: center;
}

body.theme-home .hero-actions .button {
  min-width: 9.2rem;
  min-height: 3.12rem;
  padding: 0.86rem 1.26rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  backdrop-filter: blur(12px);
  box-shadow:
    0 18px 34px rgba(130, 117, 178, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

body.theme-home .hero-actions .button::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

body.theme-home .hero-actions .button-primary {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--moon-indigo) 74%, white) 0%,
      color-mix(in srgb, var(--page-accent) 72%, white) 100%
    );
  box-shadow:
    0 22px 42px rgba(125, 118, 188, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.34) inset;
}

body.theme-home .hero-actions .button-soft {
  color: var(--moon-indigo);
  border-color: rgba(201, 185, 218, 0.78);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(246, 245, 255, 0.88) 54%,
      rgba(252, 242, 248, 0.82) 100%
    );
  box-shadow:
    0 18px 34px rgba(177, 143, 161, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.96) inset;
}

body.theme-home .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  margin-top: 0.22rem;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-top: none;
  background: none;
}

body.theme-home .tag-row li {
  min-height: auto;
  padding: 0.26rem 0.52rem;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 0.18rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 255, 0.8));
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--text-800);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 8px 18px rgba(177, 143, 161, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body.theme-home .tag-row li:nth-child(odd) {
  border-right: none;
}

body.theme-home .tag-row li:nth-child(-n + 2) {
  border-bottom: none;
}

body.theme-home .tag-row li::after {
  font-size: 0.54rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-600);
  letter-spacing: 0.02em;
}

body.theme-home .tag-row li:nth-child(1)::after {
  content: "\7A33\5B9A\63A8\8FDB";
}

body.theme-home .tag-row li:nth-child(2)::after {
  content: "\4E3B\9898\73A9\6CD5";
}

body.theme-home .tag-row li:nth-child(3)::after {
  content: "\719F\56FE\966A\73A9";
}

body.theme-home .tag-row li:nth-child(4)::after {
  content: "QQ \7FA4\5165\53E3";
}
body.theme-home .panel-highlight {
  padding: 0.88rem 1.06rem 0.9rem;
}

body.theme-home .panel-highlight p {
  margin-bottom: 0.28rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--moon-indigo) 72%, var(--text-700));
  text-transform: uppercase;
}

body.theme-home .panel-highlight strong {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 1rem;
  line-height: 1.08;
  color: var(--text-900);
}

body.theme-home .panel-highlight strong small {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--moon-indigo) 82%, white);
  text-transform: uppercase;
}

body.theme-home .panel-highlight strong em {
  font-style: normal;
  font-size: 1.34rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 12px 22px rgba(125, 118, 188, 0.12);
}

body.theme-home .panel-highlight span {
  margin-top: 0.34rem;
  max-width: 13.8rem;
  line-height: 1.5;
  font-size: 0.7rem;
  color: var(--text-600);
}

body.theme-home .hero-panel-home .stat-card {
  position: relative;
  padding: 0.86rem 0.86rem 0.8rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.1) 100%
    );
}

body.theme-home .hero-panel-home .stat-card span {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.56rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--moon-indigo) 68%, white) 0%,
      color-mix(in srgb, var(--page-accent) 64%, white) 100%
    );
  box-shadow:
    0 10px 20px rgba(125, 118, 188, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.theme-home .hero-panel-home .stat-card h2 {
  margin-top: 0.4rem;
  margin-bottom: 0.18rem;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  color: var(--text-900);
}

body.theme-home .hero-panel-home .stat-card p {
  font-size: 0.68rem;
  line-height: 1.48;
  color: var(--text-600);
}

body.theme-home .page-hero + .page-section {
  padding-top: 0.8rem;
}

body.theme-home .hero-panel-home .stat-card + .stat-card {
  border-left: 1px solid rgba(167, 138, 156, 0.12);
}

body.theme-home .page-section {
  padding: 2.35rem 0;
}

body.theme-home .page-section::after {
  top: 0;
  width: 12rem;
  height: 5rem;
  opacity: 0.22;
}

body.theme-home .section-head {
  max-width: 48rem;
  margin-bottom: 1rem;
  padding-top: 0.55rem;
}

body.theme-home .section-head::before {
  width: 4rem;
}

body.theme-home .section-head h2 {
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
}

body.theme-home .section-head p {
  max-width: 40rem;
  margin-top: 0.38rem;
  line-height: 1.68;
  font-size: 0.9rem;
}

body.theme-home .card-grid,
body.theme-home .timeline,
body.theme-home .poster-grid,
body.theme-home .info-strip {
  gap: 0.78rem;
  padding: 0.78rem;
}

body.theme-home .feature-card,
body.theme-home .service-card,
body.theme-home .guide-card,
body.theme-home .content-card,
body.theme-home .poster-card,
body.theme-home .info-panel {
  padding: 1.08rem;
}

body.theme-home .feature-card h3,
body.theme-home .service-card strong,
body.theme-home .guide-card h3,
body.theme-home .content-card h3,
body.theme-home .poster-card h3,
body.theme-home .info-panel h3 {
  margin-top: 0.72rem;
  margin-bottom: 0.32rem;
}

body.theme-home .service-top {
  gap: 0.72rem;
}

body.theme-home .service-top strong {
  font-size: 1.12rem;
}

body.theme-home .service-card b {
  margin-top: 0.72rem;
  font-size: 0.84rem;
}

body.theme-home .timeline-step {
  padding: 1.1rem;
  min-height: 12.6rem;
}

body.theme-home .hero-media .hero-video-stage::after {
  z-index: 0;
}

body.theme-home .hero-video-shell {
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 30 / 17;
  background:
    url("./assets/poster-galgame.jpg") center 28% / cover no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
}

body.theme-home .hero-video-shell::before {
  background:
    linear-gradient(
      180deg,
      rgba(10, 18, 36, 0.08) 0%,
      rgba(10, 18, 36, 0.16) 100%
    ),
    url("./assets/poster-galgame.jpg") center 24% / cover no-repeat;
  filter: blur(18px) saturate(1.08);
  opacity: 0.9;
}

body.theme-home .hero-video-shell::after {
  inset: 1rem;
  border-radius: calc(clamp(2.2rem, 3vw, 3.2rem) - 0.8rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.08), transparent 54%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 18px 28px rgba(255, 255, 255, 0.04);
}

body.theme-home .hero-video {
  width: 100%;
  height: 100%;
  aspect-ratio: 30 / 17;
  position: relative;
  z-index: 2;
  object-fit: contain;
  object-position: center center;
  padding: 0;
  transform: none;
  filter:
    drop-shadow(0 22px 34px rgba(20, 26, 48, 0.18))
    saturate(1.06)
    contrast(1.02);
}

.hero-copy {
  animation: hero-panel-rise 980ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-panel {
  animation: hero-panel-rise 1080ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.82rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 251, 255, 0.68));
  color: var(--page-accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow:
    0 10px 24px rgba(177, 143, 161, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.eyebrow::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
  box-shadow: 0 0 14px color-mix(in srgb, var(--page-accent) 20%, transparent);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--heading-font);
}

.hero-copy h1,
.section-head h2,
.cta-banner h2,
.contact-panel h2 {
  margin-top: 0.8rem;
  line-height: 1.16;
}

.hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(2.6rem, 4.7vw, 4.9rem);
  letter-spacing: -0.03em;
  text-shadow: 0 10px 28px rgba(255, 255, 255, 0.38);
}

.hero-copy h1 span {
  display: block;
  color: var(--page-accent);
  text-shadow: 0 12px 28px color-mix(in srgb, var(--page-accent) 14%, transparent);
}

.hero-logo {
  display: block;
  width: min(100%, 26rem);
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 255, 0.8));
  box-shadow:
    0 18px 42px rgba(177, 143, 161, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
  animation: hero-logo-float 12s ease-in-out infinite;
}

.hero-text,
.section-head p,
.feature-card p,
.service-card p,
.guide-card p,
.placeholder-card p,
.content-card p,
.timeline-step p,
.poster-card p,
.faq-answer,
.contact-card p,
.contact-panel p,
.stat-card p,
.footer-grid p,
.footer-grid a,
.panel-highlight span,
.group-head p,
.group-note,
.qr-note {
  color: var(--text-700);
  line-height: 1.82;
}

.hero-text,
.contact-panel p {
  max-width: 36rem;
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 2.15rem 0 1.55rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list,
.link-list {
  display: grid;
  gap: 0.72rem;
  margin: 0;
  padding-left: 1.15rem;
}

.check-list li,
.link-list li {
  color: var(--text-700);
  line-height: 1.72;
}

.tag-row li,
.card-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.82rem;
  border-radius: 999px;
  color: var(--page-accent);
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-soft) 78%, white), rgba(255, 255, 255, 0.76));
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow:
    0 10px 24px rgba(177, 143, 161, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.tag-row li::before,
.card-chip::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--page-accent) 20%, transparent);
}

.panel-highlight {
  padding: 1.25rem 1.3rem;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.84) 0%,
      color-mix(in srgb, var(--page-soft) 76%, white) 52%,
      rgba(248, 251, 255, 0.8) 100%
    );
  border: 1px solid color-mix(in srgb, var(--page-accent) 14%, white);
  transition:
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 420ms ease,
    box-shadow 420ms ease;
  transform:
    translate3d(
      calc(var(--hero-axis-x) * -0.2),
      calc(var(--hero-axis-y) * -0.24),
      0
    );
  box-shadow:
    0 18px 42px rgba(177, 143, 161, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.panel-highlight p {
  margin: 0 0 0.4rem;
  color: var(--page-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.panel-highlight strong {
  display: block;
  font-size: 1.28rem;
  line-height: 1.45;
}

.interactive-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  --mx: 50%;
  --my: 50%;
  --surface-lift: 0px;
  --surface-rotate-x: 0deg;
  --surface-rotate-y: 0deg;
  --surface-spin: 0deg;
  --surface-scale: 1;
  transform:
    perspective(1400px)
    translate3d(0, var(--surface-lift), 0)
    rotateX(var(--surface-rotate-x))
    rotateY(var(--surface-rotate-y))
    rotateZ(var(--surface-spin))
    scale(var(--surface-scale));
  transition:
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 420ms ease,
    border-color 420ms ease,
    background 420ms ease,
    filter 420ms ease;
}

.interactive-surface > * {
  position: relative;
  z-index: 1;
}

.interactive-surface::before,
.interactive-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.interactive-surface::before {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.14) 14%,
      transparent 30%,
      transparent 68%,
      rgba(255, 255, 255, 0.18) 100%
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.06) 24%,
      transparent 42%,
      rgba(255, 255, 255, 0.04) 68%,
      transparent
    );
  opacity: 0.82;
}

.interactive-surface::after {
  inset: -1px;
  z-index: 0;
  background:
    radial-gradient(
      240px circle at var(--mx) var(--my),
      color-mix(in srgb, var(--page-accent) 16%, white) 0%,
      rgba(255, 255, 255, 0.22) 20%,
      rgba(255, 255, 255, 0.08) 36%,
      transparent 70%
    ),
    radial-gradient(
      200px circle at calc(var(--mx) + 12%) calc(var(--my) - 10%),
      color-mix(in srgb, var(--page-accent-2) 12%, white) 0%,
      transparent 68%
    );
  opacity: 0;
  transition: opacity 260ms ease;
}

.interactive-surface:hover {
  --surface-lift: -7px;
  border-color: color-mix(in srgb, var(--page-accent) 28%, white);
  box-shadow:
    0 34px 92px rgba(177, 143, 161, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.34) inset;
  filter: saturate(1.04);
}

.interactive-surface:hover::after {
  opacity: 1;
}

.interactive-surface.is-pressed,
.interactive-surface:active {
  --surface-lift: -2px;
  --surface-scale: 0.992;
  box-shadow:
    0 20px 56px rgba(177, 143, 161, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  transition-duration: 140ms;
}

.interactive-surface.is-pressed::after,
.interactive-surface:active::after {
  opacity: 0.72;
}

.stat-grid,
.card-grid,
.timeline,
.faq-list,
.info-strip,
.poster-grid {
  display: grid;
  gap: 1rem;
}

.stat-grid {
  margin-top: 1rem;
  padding: 0.55rem;
  border-radius: calc(var(--radius-xl) + 2px);
  border: 1px solid rgba(255, 255, 255, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(248, 251, 255, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 16px 34px rgba(177, 143, 161, 0.08);
}

.card-grid,
.timeline,
.poster-grid,
.faq-grid,
.contact-grid,
.info-strip {
  position: relative;
  padding: 1rem;
  border-radius: calc(var(--radius-xxl) + 4px);
  border: 1px solid rgba(255, 255, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(249, 252, 255, 0.12)),
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.28), transparent 32%);
  box-shadow:
    0 20px 54px rgba(177, 143, 161, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
}

.stat-card,
.feature-card,
.guide-card,
.placeholder-card,
.content-card,
.poster-card,
.faq-side,
.contact-card,
.info-panel {
  border-radius: var(--radius-xl);
  padding: 1.4rem;
  box-shadow:
    0 18px 40px rgba(177, 143, 161, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

.stat-card span,
.service-top span,
.timeline-step span {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
  font-size: 0.82rem;
  font-weight: 800;
}

.stat-card h2,
.feature-card h3,
.service-card strong,
.guide-card h3,
.placeholder-card h3,
.content-card h3,
.timeline-step h3,
.poster-card h3,
.contact-card h3,
.info-panel h3 {
  margin-top: 0.95rem;
  margin-bottom: 0.55rem;
}

.card-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-section {
  position: relative;
  overflow: clip;
  padding: 3.4rem 0;
}

.page-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 58rem);
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--page-accent) 22%, white) 18%,
      color-mix(in srgb, var(--page-accent-2) 24%, white) 78%,
      transparent
    );
  opacity: 0.72;
}

.page-section::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  right: -4rem;
  width: 16rem;
  height: 7rem;
  border-radius: 999px;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--page-accent) 14%, white) 0%,
      transparent 72%
    );
  filter: blur(18px);
  opacity: 0.32;
  pointer-events: none;
}

.page-section:nth-of-type(even)::after {
  right: auto;
  left: -4rem;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--page-accent-2) 14%, white) 0%,
      transparent 72%
    );
}

.section-head {
  max-width: 58rem;
  margin-bottom: 1.55rem;
  padding-top: 0.8rem;
  position: relative;
}

.section-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--page-accent) 80%, white),
      color-mix(in srgb, var(--page-accent-2) 80%, white)
    );
  box-shadow: 0 0 14px color-mix(in srgb, var(--page-accent) 18%, transparent);
}

.section-head h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.02em;
}

.service-card {
  display: block;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
}

.service-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.service-top strong {
  margin: 0;
  font-size: 1.28rem;
}

.service-card b {
  display: block;
  margin-top: 0.9rem;
  color: var(--page-accent);
  font-size: 0.92rem;
}

.service-card,
.feature-card,
.guide-card,
.content-card,
.contact-card,
.info-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.76));
}

.guide-card {
  min-height: 9.5rem;
}

.cta-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  padding: 1.65rem 1.8rem;
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--page-accent) 10%, white), transparent 24%),
    radial-gradient(circle at 100% 10%, color-mix(in srgb, var(--page-accent-2) 10%, white), transparent 26%),
    var(--panel-fill);
}

.cta-side {
  display: grid;
  justify-items: end;
  gap: 0.8rem;
}

.cta-side strong {
  font-size: clamp(1.6rem, 2vw, 2rem);
  color: var(--page-accent);
}

.timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.timeline-step {
  border-radius: var(--radius-xl);
  padding: 1.45rem;
  min-height: 15rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.78));
}

.timeline-step span {
  margin-bottom: 1rem;
}

.poster-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.poster-card {
  min-height: 19rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.8));
}

.poster-card:nth-child(3n + 1) {
  --surface-spin: -0.75deg;
}

.poster-card:nth-child(3n + 2) {
  --surface-spin: 0.7deg;
}

.poster-card:nth-child(3n) {
  --surface-spin: -0.3deg;
}

.poster-card:hover {
  --surface-spin: 0deg;
}

.poster-card.media-card {
  padding: 1rem;
}

.poster-image {
  display: block;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: var(--radius-lg);
  box-shadow:
    0 20px 48px rgba(177, 143, 161, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  transition:
    transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 650ms ease,
    box-shadow 650ms ease;
}

.media-card:nth-child(odd) .poster-image {
  transform: scale(1.01);
}

.media-card:hover .poster-image,
.group-card:hover .qr-image {
  transform: scale(1.03) translateY(-4px);
  filter: saturate(1.04) contrast(1.02);
  box-shadow: 0 28px 70px rgba(177, 143, 161, 0.24);
}

.poster-frame,
.qr-frame {
  display: grid;
  place-items: center;
  min-height: 14rem;
  margin-bottom: 1rem;
  border: 1px dashed color-mix(in srgb, var(--page-accent) 32%, white);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--page-soft) 80%, white),
    rgba(255, 255, 255, 0.88));
  color: var(--page-accent);
  text-align: center;
  font-weight: 800;
}

.poster-frame small,
.qr-note small {
  display: block;
  margin-top: 0.3rem;
  color: var(--text-700);
  font-weight: 500;
}

.info-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.faq-grid {
  grid-template-columns: 1.2fr 0.8fr;
}

.faq-list {
  gap: 0.9rem;
}

.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 250, 255, 0.78));
  box-shadow:
    0 18px 42px rgba(177, 143, 161, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.2rem;
  color: var(--text-900);
  font-weight: 700;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--page-accent);
  font-size: 1.1rem;
  font-weight: 800;
  transition: transform 220ms ease;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--page-accent) 24%, white);
  box-shadow:
    0 24px 54px rgba(177, 143, 161, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.faq-answer {
  padding: 0 1.2rem 1.2rem;
}

.contact-panel {
  align-items: stretch;
}

.group-card {
  padding: 1.5rem;
  animation: group-pulse 10s ease-in-out infinite;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--page-accent-2) 10%, white), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 250, 255, 0.8));
}

.group-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.group-head h2 {
  margin-bottom: 0.3rem;
}

.group-avatar {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
  font-size: 1.25rem;
  font-weight: 800;
}

.group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1rem 0 1.2rem;
}

.copy-button {
  cursor: pointer;
}

.qr-frame {
  position: relative;
  overflow: hidden;
}

.qr-frame.has-image {
  padding: 0.75rem;
  border-style: solid;
}

.qr-frame.has-image::before {
  display: none;
}

.qr-frame.has-image::after {
  content: "";
  position: absolute;
  inset: -25% auto -25% -35%;
  width: 42%;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgba(255, 255, 255, 0.08) 34%,
      rgba(255, 255, 255, 0.46) 50%,
      rgba(255, 255, 255, 0.14) 62%,
      transparent 84%
    );
  transform: translateX(-180%) skewX(-18deg);
  transition: transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.group-card:hover .qr-frame.has-image::after {
  transform: translateX(380%) skewX(-18deg);
}

.qr-frame::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 16%, rgba(117, 183, 239, 0.6) 0 8px, transparent 9px) 0
      0 / 34px 34px,
    radial-gradient(circle at 55% 38%, rgba(153, 210, 255, 0.56) 0 7px, transparent 8px)
      0 0 / 34px 34px,
    radial-gradient(circle at 80% 82%, rgba(184, 160, 239, 0.56) 0 7px, transparent 8px)
      0 0 / 34px 34px;
  opacity: 0.95;
}

.qr-center {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--page-accent) 28%, transparent);
}

.qr-image {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transform-origin: center;
}

.contact-grid {
  margin-top: 1rem;
}

.contact-line {
  margin-top: 0.7rem;
  color: var(--text-700);
}

.contact-line strong {
  color: var(--page-accent);
}

.site-footer {
  padding: 0 0 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 1rem;
  padding: 1.65rem;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: var(--radius-xxl);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--page-accent) 10%, white), transparent 24%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--page-accent-2) 10%, white), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 251, 255, 0.78));
  box-shadow:
    0 24px 64px rgba(177, 143, 161, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  backdrop-filter: blur(16px);
}

.footer-grid h3 {
  margin-bottom: 0.7rem;
}

.footer-grid a,
.footer-grid p {
  display: block;
  margin: 0.45rem 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0 0;
  color: var(--text-700);
  font-size: 0.84rem;
}

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  animation: rise-in 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes ambient-drift-left {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(3rem, -1.2rem, 0) scale(1.12);
  }
}

@keyframes ambient-drift-right {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-3.6rem, 1.3rem, 0) scale(1.08);
  }
}

@keyframes header-settle {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-panel-rise {
  from {
    opacity: 0.96;
    transform: translateY(16px) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes brand-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes hero-logo-float {
  0%,
  100% {
    transform:
      translate3d(
        calc(var(--hero-axis-x) * 0.18),
        calc(var(--hero-parallax-soft) * -0.35 + var(--hero-axis-y) * -0.18),
        0
      )
      rotate(0deg);
  }

  50% {
    transform:
      translate3d(
        calc(var(--hero-axis-x) * 0.18),
        calc(var(--hero-parallax-soft) * -0.35 + var(--hero-axis-y) * -0.18 - 6px),
        0
      )
      rotate(-0.5deg);
  }
}

@keyframes moon-breathe {
  0%,
  100% {
    transform:
      translate3d(
        calc(var(--hero-axis-x) * 0.72),
        calc(var(--hero-axis-y) * -0.52),
        0
      )
      scale(1);
    filter: saturate(1);
  }

  50% {
    transform:
      translate3d(
        calc(var(--hero-axis-x) * 0.72),
        calc(var(--hero-axis-y) * -0.52 - 6px),
        0
      )
      scale(1.04);
    filter: saturate(1.06);
  }
}

@keyframes orbit-turn {
  from {
    transform:
      translate3d(
        calc(var(--hero-axis-x) * 0.48),
        calc(var(--hero-axis-y) * -0.32),
        0
      )
      rotate(0deg);
  }

  to {
    transform:
      translate3d(
        calc(var(--hero-axis-x) * 0.48),
        calc(var(--hero-axis-y) * -0.32),
        0
      )
      rotate(360deg);
  }
}

@keyframes charm-float {
  0%,
  100% {
    opacity: calc(var(--opacity, 0.72) * 0.82);
    filter: brightness(1);
  }

  50% {
    opacity: var(--opacity, 0.72);
    filter: brightness(1.08);
  }
}

@keyframes crest-glint {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      0 18px 34px rgba(125, 118, 188, 0.12);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.3),
      0 20px 42px rgba(125, 118, 188, 0.18),
      0 0 22px rgba(244, 211, 138, 0.18);
  }
}

@keyframes bamboo-sway {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(6px, -4px, 0) rotate(1.6deg);
  }
}

@keyframes haze-shift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(18px, -10px, 0) scale(1.08);
  }
}

@keyframes speck-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.94);
    opacity: calc(var(--opacity, 0.45) * 0.84);
  }

  50% {
    transform: translate3d(var(--drift-x, 18px), var(--drift-y, -16px), 0) scale(1.08);
    opacity: var(--opacity, 0.45);
  }
}

@keyframes petal-sway {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
  }

  35% {
    transform:
      translate3d(calc(var(--drift-x, 24px) * 0.48), calc(var(--drift-y, 48px) * 0.4), 0)
      rotate(calc(var(--rotate, 0deg) + 10deg));
  }

  70% {
    transform: translate3d(var(--drift-x, 24px), var(--drift-y, 48px), 0)
      rotate(calc(var(--rotate, 0deg) - 8deg));
  }

  100% {
    transform:
      translate3d(calc(var(--drift-x, 24px) * 1.12), calc(var(--drift-y, 48px) * 1.18), 0)
      rotate(calc(var(--rotate, 0deg) + 12deg));
    opacity: calc(var(--opacity, 0.54) * 0.75);
  }
}

@keyframes group-pulse {
  0%,
  100% {
    box-shadow: var(--shadow);
  }

  50% {
    box-shadow:
      0 28px 86px rgba(177, 143, 161, 0.22),
      0 0 0 1px rgba(255, 255, 255, 0.28) inset;
  }
}

@keyframes rise-in {
  from {
    opacity: 0.92;
    transform: translateY(8px) scale(0.996);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .page-transition,
  .hero-atmosphere {
    display: none !important;
  }

  .hero-video {
    animation: none !important;
  }
}

@media (max-width: 1100px) {
  .site-header {
    border-radius: 1.4rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .hero-grid,
  .card-grid,
  .timeline,
  .poster-grid,
  .faq-grid,
  .contact-grid,
  .info-strip {
    padding: 0.85rem;
  }

  .quick-group {
    margin-left: auto;
  }

  .hero-grid,
  .contact-grid,
  .faq-grid,
  .contact-panel,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-moon,
  .hero-moon-ring,
  .hero-orbit,
  .kaguya-badge,
  .hero-character-stage {
    right: 1.2rem;
  }

  .hero-video-shell {
    top: 1.5rem;
    right: 0;
    width: min(72vw, 38rem);
    height: clamp(21rem, 56vw, 31rem);
    opacity: 0.9;
  }

  body.theme-home .page-hero {
    min-height: auto;
  }

  body.theme-home .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  body.theme-home .hero-grid::before {
    top: 0.54rem;
    left: 50%;
    font-size: 0.76rem;
    padding: 0.46rem 0.96rem 0.4rem;
    transform: translateX(-50%);
  }

  body.theme-home .hero-right {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    gap: 0.8rem;
  }

  body.theme-home .hero-copy {
    width: auto;
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
    min-height: 0;
    display: block;
    border-right: none;
    border-radius: var(--radius-xxl);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(20px) saturate(1.08);
    padding: 1.5rem;
  }

  body.theme-home .tag-row {
    margin-top: 1rem;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid rgba(167, 138, 156, 0.12);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }

  body.theme-home .hero-media {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    padding: 0;
    border-bottom: none;
  }

  body.theme-home .hero-media-badge {
    top: 0.9rem;
    left: 0.9rem;
  }

  body.theme-home .hero-panel-home {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr;
    margin-top: 0;
    gap: 0.8rem;
    padding: 0;
    border-radius: var(--radius-xxl);
    box-shadow: var(--panel-shadow);
  }

  body.theme-home .hero-panel-home .stat-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  body.theme-home .hero-panel-home .panel-highlight,
  body.theme-home .hero-panel-home .stat-card {
    border-right: none;
    border-left: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--panel-shadow);
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.56) 0%,
        rgba(255, 255, 255, 0.14) 22%,
        transparent 38%
      ),
      radial-gradient(
        180px circle at 84% 0%,
        rgba(255, 255, 255, 0.34) 0%,
        transparent 62%
      ),
      var(--panel-fill);
  }

  body.theme-home .hero-panel-home .stat-card + .stat-card {
    border-left: none;
  }

  .card-grid.cols-3,
  .card-grid.cols-4,
  .poster-grid,
  .info-strip,
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .site-header,
  .page-hero,
  .page-section,
  .cta-banner,
  .site-footer {
    width: min(calc(100% - 1.2rem), var(--max-width));
  }

  .site-header {
    top: 0.55rem;
    padding: 0.85rem;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .page-hero {
    padding-top: 4.8rem;
  }

  .hero-video-stage::before {
    background:
      linear-gradient(
        180deg,
        rgba(255, 251, 254, 0.88) 0%,
        rgba(255, 250, 253, 0.72) 22%,
        rgba(255, 255, 255, 0.34) 54%,
        rgba(255, 255, 255, 0.1) 100%
      ),
      linear-gradient(
        90deg,
        rgba(255, 251, 254, 0.94) 0%,
        rgba(255, 250, 253, 0.82) 26%,
        rgba(255, 255, 255, 0.18) 100%
      );
  }

  .hero-video-shell {
    top: 2.4rem;
    right: -2.2rem;
    width: 88vw;
    height: 24rem;
    opacity: 0.68;
    transform:
      translate3d(
        calc(var(--hero-axis-x) * 0.22),
        calc(var(--hero-axis-y) * -0.18),
        0
      )
      rotate(-2.2deg);
  }

  .hero-atmosphere {
    opacity: 0.74;
  }

  .hero-moon {
    width: 13rem;
    top: 2.2rem;
    right: -0.8rem;
  }

  .hero-moon-ring,
  .hero-orbit {
    width: 18rem;
    right: -2.4rem;
    top: 0.8rem;
  }

  .kaguya-badge {
    top: 0.58rem;
    left: 50%;
    right: auto;
    min-height: 1.9rem;
    padding: 0.42rem 0.88rem 0.38rem;
    transform: translateX(-50%);
  }

  .kaguya-badge strong {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  .hero-crest {
    left: auto;
    right: 1.1rem;
    top: 1.4rem;
    width: 4.4rem;
  }

  .hero-bamboo {
    width: 6.5rem;
    height: 15rem;
    bottom: -2rem;
  }

  .hero-character-stage {
    width: 13rem;
    right: -0.6rem;
    bottom: -1rem;
    opacity: 0.54;
  }

  .hero-copy,
  .hero-panel,
  .contact-panel,
  .group-card,
  .cta-banner {
    padding: 1.25rem;
  }

  body.theme-home .hero-media {
    min-height: 0;
  }

  body.theme-home .hero-media .hero-video-stage::before {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 24%,
        transparent 76%,
        rgba(255, 255, 255, 0.08) 100%
      );
  }

  body.theme-home .hero-video-shell {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.96;
    transform:
      translate3d(
        calc(var(--hero-axis-x) * 0.16),
        calc(var(--hero-axis-y) * -0.12),
        0
      )
      rotate(-0.8deg);
  }

  body.theme-home .hero-media-badge {
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.65rem 0.78rem;
  }

  body.theme-home .hero-panel {
    width: 100%;
    margin-top: 0.9rem;
  }

  body.theme-home .hero-copy {
    padding: 1.2rem;
  }

  body.theme-home .hero-right {
    gap: 0.72rem;
  }

  body.theme-home .tag-row {
    margin-top: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.theme-home .tag-row li {
    min-height: 4rem;
    padding: 0.72rem 0.78rem 0.68rem;
  }

  body.theme-home .tag-row li::after {
    font-size: 0.6rem;
  }

  body.theme-home .hero-logo {
    width: min(100%, 9.2rem);
  }

  body.theme-home .hero-copy h1 {
    max-width: none;
    font-size: clamp(1.9rem, 9.8vw, 2.7rem);
  }

  body.theme-home .hero-text {
    max-width: none;
    font-size: 0.88rem;
  }

  body.theme-home .hero-grid::before {
    min-height: 1.88rem;
    top: 0.48rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    padding: 0.4rem 0.82rem 0.36rem;
  }

  body.theme-home .hero-panel-home .panel-highlight,
  body.theme-home .hero-panel-home .stat-card {
    padding: 0.9rem;
  }

  .hero-grid,
  .card-grid,
  .timeline,
  .poster-grid,
  .faq-grid,
  .contact-grid,
  .info-strip {
    padding: 0.72rem;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: clamp(2.05rem, 11vw, 3.4rem);
  }

  .brand-image {
    width: 160px;
  }

  .card-grid.cols-2,
  .card-grid.cols-3,
  .card-grid.cols-4,
  .poster-grid,
  .info-strip,
  .timeline {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .group-actions {
    flex-direction: column;
  }

  .button,
  .button-primary,
  .button-soft,
  .button-outline,
  .copy-button {
    width: 100%;
  }

  .cta-banner {
    grid-template-columns: 1fr;
  }

  .cta-side {
    justify-items: start;
  }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr;
  }
}