/* Generated from styles/style.css. Edit source modules, then run npm.cmd run build:css. */
/**
 * 主样式入口文件
 * 
 * @file style.css
 * @description 项目样式文件的统一入口，负责导入所有模块样式文件
 * @author JZY Twins City Team
 * @created 2026-06-02
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 * 
 * @overview
 * 本文件作为样式系统的入口点，按特定顺序导入各模块样式：
 * 1. base-layout.css       - 基础布局与全局样式
 * 2. hero-profile-social.css - 英雄区域与社交组件
 * 3. schedule-profile.css - 日程与资料页组件
 * 4. music-gallery.css     - 音乐画廊组件
 * 5. gallery-lightbox.css - 图册灯箱组件
 * 6. resonance-bgm.css     - BGM音频播放器
 * 7. theme-components.css - 全站主题与共享组件
 * 
 * @note 导入顺序决定样式优先级，后导入的文件会覆盖先导入的样式
 */

/* ============ 样式模块导入顺序 ============ */
/**
 * 基础布局与全局样式文件
 * 
 * @file base-layout.css
 * @description 项目核心样式文件，包含全局变量、基础布局、登录认证、导航组件等
 * @author JZY Twins City Team
 * @created 2026-06-02
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 * 
 * @overview
 * 本文件包含以下核心模块：
 * 1. CSS 自定义属性（设计令牌）定义
 * 2. 全局重置与基础样式
 * 3. 登录认证门控组件
 * 4. 背景视觉效果（网格线、氛围光晕、粒子画布）
 * 5. 站点导航头部
 * 6. 页面区块基础样式
 */
/* ============ CSS 自定义属性定义（设计令牌）=========== */
:root {
  /* 主色调 */
  --ink: #171a2a;
  /* 深色墨水 - 文字/背景 */
  --ink-soft: #2f344b;
  /* 柔和墨水色 */
  --paper: #fbf8f4;
  /* 纸张白 - 主文字颜色 */
  --paper-soft: rgba(251, 248, 244, 0.88);
  /* 半透明白 */
  /* 装饰色 */
  --mist: #e9edf5;
  /* 薄雾灰 */
  --rose: #d9a6ae;
  /* 玫瑰粉 - 主装饰色 */
  --rose-soft: #f3dce0;
  /* 柔和玫瑰粉 */
  --rose-glow: rgba(217, 166, 174, 0.4);
  /* 玫瑰光晕 */
  --gold: #b89758;
  /* 金色 - 强调色 */
  --gold-soft: rgba(200, 167, 104, 0.15);
  /* 柔和金色 */
  --gold-glow: rgba(200, 167, 104, 0.5);
  /* 金色光晕 */
  --aqua: #9fc5c7;
  /* 水蓝色 */
  --aqua-soft: rgba(159, 197, 199, 0.25);
  /* 柔和水蓝 */
  --aqua-glow: rgba(159, 197, 199, 0.4);
  /* 水蓝光晕 */
  --violet: #9b91c8;
  /* 紫罗兰色 */
  --violet-soft: rgba(155, 145, 200, 0.2);
  /* 柔和紫罗兰 */
  /* 玻璃拟态颜色 */
  --glass: rgba(255, 255, 255, 0.68);
  /* 基础玻璃 */
  --glass-light: rgba(255, 255, 255, 0.12);
  /* 浅色玻璃 */
  --glass-medium: rgba(255, 255, 255, 0.18);
  /* 中等玻璃 */
  --glass-strong: rgba(255, 255, 255, 0.86);
  /* 强玻璃效果 */
  /* 线条颜色 */
  --line: rgba(255, 255, 255, 0.24);
  /* 标准线条 */
  --line-soft: rgba(255, 255, 255, 0.12);
  /* 柔和线条 */
  /* 阴影效果 */
  --shadow: 0 24px 80px rgba(23, 26, 42, 0.18);
  /* 标准阴影 */
  --shadow-deep: 0 32px 100px rgba(23, 26, 42, 0.32);
  /* 深层阴影 */
  --shadow-glow-rose: 0 8px 40px rgba(217, 166, 174, 0.35);
  /* 玫瑰光晕阴影 */
  --shadow-glow-gold: 0 8px 40px rgba(200, 167, 104, 0.35);
  /* 金色光晕阴影 */
  --shadow-glow-aqua: 0 8px 40px rgba(159, 197, 199, 0.35);
  /* 水蓝光晕阴影 */
  /* 圆角系统 */
  --radius: 8px;
  /* 小圆角 */
  --radius-lg: 16px;
  /* 大圆角 */
  --radius-xl: 24px;
  /* 特大圆角 */
  /* 过渡动画 */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* 快速过渡 */
  --transition-medium: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  /* 中等过渡 */
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* 慢速过渡 */
  /* 模糊效果 */
  --blur-glass: blur(20px);
  /* 玻璃模糊 */
  --blur-soft: blur(12px);
  /* 柔和模糊 */
  --blur-deep: blur(40px);
  /* 深层模糊 */
}
/* ============ 全局重置样式 ============ */
* {
  box-sizing: border-box;
}
html {
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}
/* 全局覆盖输入框自动填充样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--paper) !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
/* 平滑滚动 */
/* ============ 页面主体样式 ============ */
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Times New Roman", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 多层渐变背景 - 创造深度感 */
  background-attachment: fixed;
  overflow-x: hidden;
}
body.mobile-nav-open {
  max-width: 100%;
  overflow-x: hidden;
  touch-action: pan-y;
}
/* 认证锁定状态 - 隐藏页面内容 */
body.auth-locked {
  overflow: hidden;
}
body.auth-locked .site-header,
body.auth-locked main,
body.auth-locked .lightbox,
body.auth-locked audio {
  visibility: hidden;
}
/* ============ 登录门控组件 ============ */
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 22% 20%, rgba(217, 166, 174, 0.34), transparent 34rem),
    radial-gradient(circle at 78% 76%, rgba(159, 197, 199, 0.26), transparent 32rem),
    rgba(12, 15, 26, 0.78);
  backdrop-filter: blur(20px);
}
body:not(.auth-locked) .login-gate {
  display: none;
}
/* 登录面板 */
.login-panel {
  width: min(460px, 100%);
  padding: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-xl);
  /* 多层背景叠加 */
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)),
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  /* 多层阴影效果 */
  box-shadow: 0 32px 120px rgba(0,0,0,0.38),
    0 0 100px rgba(217,166,174,0.28),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  backdrop-filter: blur(24px) saturate(1.3);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* 顶部渐变光带 */
.login-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  pointer-events: none;
}
/* 登录标记图标 */
.login-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 45%, var(--gold));
  font-size: 26px;
  font-weight: 900;
}
.login-panel h1 {
  margin-bottom: 12px;
  font-size: 34px;
  line-height: 1.15;
}
.login-panel p {
  color: rgba(251,248,244,0.74);
  line-height: 1.8;
}
/* 登录表单 */
.login-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  text-align: left;
}
.login-form label {
  display: grid;
  gap: 7px;
  color: rgba(251,248,244,0.72);
  font-size: 13px;
}
.login-form input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  outline: 0;
  background: rgba(255,255,255,0.1);
  color: var(--paper);
  font: inherit;
}
.login-form input:focus {
  border-color: rgba(200,167,104,0.72);
  box-shadow: 0 0 0 4px rgba(200,167,104,0.12);
}
.login-form button {
  height: 46px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 52%, var(--gold));
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.login-message {
  min-height: 24px;
  margin: 0;
  text-align: center;
  color: #ffd6dc !important;
  font-size: 13px;
}
/* ============ 背景网格纹理 ============ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
/* ============ 基础元素样式 ============ */
a {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
/* ============ 粒子画布 ============ */
#particleCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mix-blend-mode: screen;
}

.lightbox:not(.open):not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* ============ 光标光环效果 ============ */
.cursor-aura {
  position: fixed;
  left: 0;
  top: 0;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 18%),
    radial-gradient(circle, rgba(217,166,174,0.33), transparent 48%),
    radial-gradient(circle, rgba(159,197,199,0.22), transparent 66%);
  filter: blur(2px);
  mix-blend-mode: screen;
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease;
}
/* ============ 氛围浮动光球 ============ */
.ambient {
  position: fixed;
  z-index: 0;
  width: 34vw;
  aspect-ratio: 1;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(58px);
  opacity: 0.32;
  animation: floatBlob 18s ease-in-out infinite;
}
/* 玫瑰色光球 - 左上角 */
.ambient-one {
  left: -8vw;
  top: 14vh;
  background: linear-gradient(135deg, #d9a6ae, #e8c4c8 50%, #d9a6ae);
  box-shadow: 0 0 80px rgba(217, 166, 174, 0.5), 0 0 120px rgba(217, 166, 174, 0.3);
}
/* 水蓝色光球 - 右上角（延迟动画）*/
.ambient-two {
  right: -10vw;
  top: 35vh;
  background: linear-gradient(135deg, #9fc5c7, #b8d8da 50%, #9fc5c7);
  box-shadow: 0 0 80px rgba(159, 197, 199, 0.5), 0 0 120px rgba(159, 197, 199, 0.3);
  animation-delay: -6s;
}
/* 金色光球 - 底部（延迟动画）*/
.ambient-three {
  left: 34vw;
  bottom: -16vw;
  background: linear-gradient(135deg, #c8a768, #dbbf8e 50%, #c8a768);
  box-shadow: 0 0 80px rgba(200, 167, 104, 0.5), 0 0 120px rgba(200, 167, 104, 0.3);
  animation-delay: -12s;
}
@media (max-width: 760px), (pointer: coarse) {
  #particleCanvas,
  .cursor-aura,
  #topologyCanvas,
  .topology-toggle,
  .ambient {
    display: none !important;
  }
}
/* 浮动动画关键帧 */
@keyframes floatBlob {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate3d(20px, -15px, 0) scale(1.03) rotate(1deg);
  }
  50% {
    transform: translate3d(28px, -34px, 0) scale(1.08) rotate(2deg);
  }
  75% {
    transform: translate3d(10px, -20px, 0) scale(1.04) rotate(1deg);
  }
}
/* ============ 站点头部导航 ============ */
.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 30;
  width: min(1180px, calc(100% - 32px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  /* 玻璃拟态背景 */
}
/* 内联搜索框 */
.site-search-inline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: min(780px, 55vw);
  min-width: 320px;
  max-width: 780px;
  margin-right: auto;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
/* 品牌标记 */
.brand-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 45%, var(--gold));
  text-decoration: none;
  font-weight: 800;
}
/* 搜索输入框样式重置 */
.site-search-inline input,
.site-search-inline input:hover,
.site-search-inline input:focus,
.site-search-inline input:focus-visible,
.site-search-inline input:active,
.site-search-inline input:not(:placeholder-shown),
.site-search-inline input:-webkit-autofill,
.site-search-inline input:-webkit-autofill:hover,
.site-search-inline input:-webkit-autofill:focus,
.site-search-inline input:-webkit-autofill:active {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 34px;
  line-height: 34px;
  border: 0 !important;
  outline: 0 !important;
  color: var(--paper) !important;
  background: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--paper) !important;
  font: inherit;
  font-weight: 600;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease !important;
}
/* 搜索后状态 */
.site-search-inline input.searched,
.site-search-inline input.searched:hover,
.site-search-inline input.searched:focus,
.site-search-inline input.searched:focus-visible,
.site-search-inline input.searched:active {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.site-search-inline input::placeholder {
  color: rgba(251, 248, 244, 0.72);
  opacity: 1;
}
/* 搜索按钮 */
.site-search-inline button {
  flex: 0 0 auto;
  min-height: 34px;
  max-width: 180px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: rgba(251,248,244,0.96);
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-search-inline button:hover,
.site-search-inline:focus-within button {
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 52%, var(--gold));
  color: var(--ink);
  box-shadow: 0 0 22px rgba(200,167,104,0.34);
}
/* 搜索结果提示 */
.site-search-inline .search-result {
  position: absolute;
  right: 8px;
  top: calc(100% + 12px);
  width: max-content;
  max-width: min(420px, 82vw);
  min-height: 0;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(251,248,244,0.78);
  background: rgba(18,21,34,0.62);
  font-size: 13px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  backdrop-filter: blur(16px);
}
.site-search-inline .search-result.show {
  opacity: 1;
  transform: translateY(0);
}
/* ============ 站点导航菜单 ============ */
.site-nav {
  display: flex;
}
/* 导航链接、按钮基础样式 */
.site-nav a,
.nav-toggle,
.btn,
.gallery-filter button,
.quote-controls button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-nav a {
  padding: 9px 13px;
  font-size: 14px;
  text-decoration: none;
  color: rgba(251, 248, 244, 0.78);
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  min-width: auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 悬停/激活状态 */
.site-nav a:hover,
.site-nav a.active,
.btn:hover,
.gallery-filter button:hover,
.gallery-filter button.active,
.quote-controls button:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18),
    0 0 20px rgba(255, 255, 255, 0.08);
}
/* 导航链接特殊悬停效果 */
.site-nav a:hover,
.site-nav a.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 48%, var(--gold));
  box-shadow: 0 0 28px rgba(200, 167, 104, 0.45),
    0 16px 40px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* 移动端导航切换按钮 */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--paper);
}
/* ============ 页面区块基础样式 ============ */
.section {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 96px 0;
}

/**
 * 英雄区域与社交组件样式文件
 * 
 * @file hero-profile-social.css
 * @description 包含首屏英雄区域、个人资料展示、社交卡片、作品时间线等组件的样式
 * @author JZY Twins City Team
 * @created 2026-06-02
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 * 
 * @overview
 * 本文件包含以下核心模块：
 * 1. 英雄区域（Hero Section）- 首屏展示区，包含头像、标题、动作按钮
 * 2. 个人资料卡片（Profile Card）- 交互式3D翻转动画卡片
 * 3. 社交链接卡片（Social Card）- 社交媒体账号展示
 * 4. 作品时间线（Timeline）- 职业生涯时间线展示
 * 5. 引用面板（Quote Panel）- 名言/座右铭展示
 * 6. 动画效果（Animations）- 腮红、心跳、旋转等交互动画
 */
/* ============ 英雄区域样式 ============ */
.hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(340px, 1.15fr);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
}
#topologyCanvas {
  position: absolute;
  inset: 44px auto auto 50%;
  width: 95%;
  height: calc(100vh - 54px);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: auto;
  opacity: 0.86;
}
.hero-media {
  position: relative;
  z-index: 1;
  width: min(380px, 78vw);
  justify-self: end;
  padding: 16px;
  border-radius: 50%;
}
.hero-media img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.46);
  box-shadow: var(--shadow);
}
.blush-trigger {
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.blush-effect {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 53%;
  width: 47%;
  height: 12%;
  transform: translate(-50%, -50%) scale(0.9);
  display: flex;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  filter: blur(0.2px) drop-shadow(0 0 18px rgba(238,128,152,0.5));
}
.blush-effect span {
  width: 34%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,154,171,0.8) 0%, rgba(236,105,132,0.42) 45%, transparent 72%);
  transform: rotate(-6deg);
}
.blush-effect span:nth-child(2) {
  transform: rotate(6deg);
}
.blush-effect.show {
  animation: blushCheeks 1.55s ease forwards;
}
@keyframes blushCheeks {
  0% {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.62);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  74% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -52%) scale(0.9);
  }
}
.hero-ring {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 244, 0.25);
  background: linear-gradient(145deg, rgba(255,255,255,0.05), transparent);
  animation: spin 20s linear infinite;
}
@media (max-width: 760px), (pointer: coarse) {
  .hero-media {
    justify-self: center;
    max-width: calc(100vw - 64px);
  }
  .hero-ring {
    inset: -10px;
    overflow: hidden;
  }
}
.hero-ring::before,
.hero-ring::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 20px var(--gold),
    0 0 40px rgba(200, 167, 104, 0.5),
    0 0 60px rgba(200, 167, 104, 0.3);
}
.hero-ring::before {
  top: 18%;
  left: 4%;
}
.hero-ring::after {
  right: 13%;
  bottom: 7%;
  background: var(--rose);
  box-shadow: 0 0 20px var(--rose),
    0 0 40px rgba(217, 166, 174, 0.5),
    0 0 60px rgba(217, 166, 174, 0.3);
}
.hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: start;
  padding-left: 20px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  align-items: center;
}
.btn.primary span,
.journey-btn span {
  display: inline-block;
  margin-left: 8px;
  animation: arrowFloat 1.3s ease-in-out infinite;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(200, 167, 104, 0.4);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  letter-spacing: 0;
}
h1 span {
  display: block;
}
h2 {
  margin-bottom: 18px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: 0;
}
h3 {
  margin-bottom: 10px;
  font-size: 22px;
}
.lead,
.section-heading p,
.reference-grid p {
  color: rgba(251, 248, 244, 0.74);
  line-height: 1.9;
}
.hero-gift {
  margin: 0 0 16px;
  color: rgba(251, 248, 244, 0.88);
}
.hero .lead {
  margin-bottom: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  text-decoration: none;
}
.btn.primary {
  color: var(--ink);
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 52%, var(--gold));
  border-color: transparent;
}
.journey-btn span {
  display: inline-block;
  margin-left: 8px;
  animation: arrowFloat 1.3s ease-in-out infinite;
}
@keyframes arrowFloat {
  0%, 100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(5px);
  }
}
.scroll-cue {
  position: absolute;
  right: 0;
  bottom: 42px;
  color: rgba(251, 248, 244, 0.72);
  font-size: 13px;
  writing-mode: vertical-rl;
}
.scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 70px;
  margin: 14px auto 0;
  background: linear-gradient(var(--gold), transparent);
}
.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr);
  gap: 32px;
  align-items: center;
}
.profile-section {
  padding-top: 80px;
  padding-bottom: 80px;
}
.section-heading {
  padding: 24px 32px;
  position: relative;
}
.section-heading::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 999px;
}
.music-player,
.quote-panel,
.reference-grid article,
.social-card,
.schedule-card,
.life-card,
.video-card,
.work-card {
  position: relative;
  border: 1.5px solid rgba(200, 210, 230, 0.32) !important;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 50%);
  box-shadow: var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px) saturate(1.2);
  overflow: hidden;
  transition: transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium),
    background var(--transition-medium);
}
.music-player::before,
.quote-panel::before,
.reference-grid article::before,
.social-card::before,
.schedule-card::before,
.life-card::before,
.video-card::before,
.work-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  pointer-events: none;
}
.profile-stage {
  position: relative;
  display: grid;
  place-items: center;
}
.profile-stage::before {
  content: "";
  position: absolute;
  width: min(580px, 98%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 50%, rgba(217, 166, 174, 0.38), transparent 45%),
    radial-gradient(circle at 70% 25%, rgba(200, 167, 104, 0.26), transparent 38%),
    radial-gradient(circle at 25% 75%, rgba(159, 197, 199, 0.22), transparent 42%);
  filter: blur(20px);
  animation: glowPulse 10s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
.profile-stage::after {
  content: "";
  position: absolute;
  width: min(620px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: rotateBorder 32s linear infinite;
  pointer-events: none;
}
@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.profile-avatar-button {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(217, 166, 174, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.3);
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1500px;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-avatar-button:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(232, 185, 104, 0.6);
  box-shadow: 0 40px 96px rgba(0, 0, 0, 0.52),
    0 0 120px rgba(217, 166, 174, 0.4),
    0 0 160px rgba(200, 167, 104, 0.2),
    inset 0 0 0 1px rgba(232, 185, 104, 0.28);
}
.profile-avatar-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease;
}
.profile-avatar-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(217, 166, 174, 0.35), rgba(200, 167, 104, 0.28), rgba(159, 197, 199, 0.22));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.profile-avatar-button:hover::before {
  opacity: 1;
}
.profile-avatar-button::after {
  content: none;
}
.profile-back {
  transform: rotateY(180deg);
}
.like-burst {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 36px;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 35px;
  background: linear-gradient(135deg, #ec8fa0, #ffd6dc 48%, var(--gold));
  box-shadow: 0 0 52px rgba(217, 166, 174, 0.85), 0 0 78px rgba(232, 185, 104, 0.3);
  opacity: 0;
  transform: translate(-50%, 0) scale(0.5);
  pointer-events: none;
}
.like-burst.show {
  animation: likePop 0.95s ease forwards;
}
@keyframes likePop {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -25px) scale(1.2);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -45px) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -65px) scale(0.88);
  }
}
.profile-copy {
  align-self: center;
}
.profile-name {
  font-weight: 700;
}
.profile-name .name-cn {
  color: var(--paper);
}
.profile-name span:last-child {
  margin-left: 12px;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  color: rgba(251, 248, 244, 0.58);
  letter-spacing: 0.15em;
}
.profile-role {
  padding: 8px 0;
}
.profile-badges {
  display: grid;
}
.profile-badges span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 50% 0%, rgba(217, 166, 174, 0.06), transparent 70%);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-badges span:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    radial-gradient(circle at 30% 0%, rgba(217, 166, 174, 0.12), transparent 50%);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 40px rgba(217, 166, 174, 0.2),
    0 0 70px rgba(200, 167, 104, 0.12);
}
.profile-badges span b {
  text-shadow: 0 1px 8px rgba(200, 167, 104, 0.4);
}
.profile-badges span strong {
  color: rgba(251, 248, 244, 0.6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.profile-badges span em {
  color: rgba(251, 248, 244, 0.98);
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
  overflow: visible;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
.profile-badges .wide {
  grid-column: span 2;
}
.profile-text-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: radial-gradient(circle at 5% 5%, rgba(217, 166, 174, 0.1), transparent 45%),
    radial-gradient(circle at 95% 95%, rgba(159, 197, 199, 0.06), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(200, 167, 104, 0.04), transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(1.3);
  position: relative;
  overflow: hidden;
}
.profile-text-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 185, 104, 0.35) 20%,
    rgba(217, 166, 174, 0.4) 50%,
    rgba(232, 185, 104, 0.35) 80%,
    transparent 100%);
}
.profile-text-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent);
}
.profile-text-card p {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  letter-spacing: 0.015em;
}
/* 浅色主题适配 */
[data-theme="light"] .profile-name .name-cn {
  color: rgba(58, 48, 82, 0.55);
  text-shadow: none;
}
[data-theme="light"] .profile-name span:last-child {
  color: rgba(58, 48, 82, 0.55);
}
[data-theme="light"] .profile-role {
  color: rgba(58, 48, 82, 0.78);
}
[data-theme="light"] .profile-copy {
  position: relative;
  padding: 32px;
}
[data-theme="light"] .profile-badges span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px;
  box-sizing: border-box;
  box-shadow: none !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] .profile-badges span:hover {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 2px 10px rgba(58, 48, 82, 0.02) !important;
}
[data-theme="light"] .profile-badges span b {
  text-shadow: none;
}
[data-theme="light"] .profile-badges span em {
  color: var(--ink);
  text-shadow: none;
}
[data-theme="light"] .profile-text-card {
  border-color: rgba(58, 48, 82, 0.03);
  backdrop-filter: blur(8px) saturate(1);
}
[data-theme="light"] .profile-text-card p {
  color: rgba(58, 48, 82, 0.86);
  text-shadow: none;
}
[data-theme="light"] .profile-stage::before {
  background: radial-gradient(circle at 40% 50%, rgba(217, 166, 174, 0.2), transparent 45%),
    radial-gradient(circle at 70% 25%, rgba(200, 167, 104, 0.15), transparent 38%),
    radial-gradient(circle at 25% 75%, rgba(159, 197, 199, 0.12), transparent 42%);
}
[data-theme="light"] .profile-avatar-button {
  border-color: rgba(58, 48, 82, 0.2);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  box-shadow: 0 20px 56px rgba(58, 48, 82, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .profile-avatar-button:hover {
  border-color: rgba(188, 126, 160, 0.5);
  box-shadow: 0 32px 72px rgba(58, 48, 82, 0.18),
    0 0 80px rgba(217, 166, 174, 0.25);
}
[data-theme="light"] .profile-avatar-button::after {
  background: rgba(58, 48, 82, 0.8);
  box-shadow: 0 0 16px rgba(58, 48, 82, 0.5),
    0 0 32px rgba(58, 48, 82, 0.3);
}
[data-theme="light"] .like-burst {
  background: linear-gradient(135deg, #d68b9e, #ffc8d0 48%, #d4a86a);
  box-shadow: 0 0 40px rgba(217, 166, 174, 0.7), 0 0 60px rgba(232, 185, 104, 0.25);
}
.profile-pop-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  perspective: 1300px;
}
.profile-pop-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
}
.profile-pop-layer.active {
  pointer-events: auto;
}
.profile-pop-layer.active::before {
  opacity: 1;
}
.profile-pop-card {
  position: fixed;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255,255,255,0.4);
  transform-style: preserve-3d;
  overflow: hidden;
  will-change: transform, opacity;
  opacity: 0;
  transform: scale(0.9);
}
.profile-pop-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
}
.profile-pop-card .pop-back {
  transform: rotateY(180deg);
}
.pop-caption {
  position: fixed;
  top: calc(50% + min(650px, 112.5vw) / 2 + 40px);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  z-index: 9999;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7), 0 1px 5px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hello-hand {
  animation: helloBreath 2s ease-in-out infinite;
  display: inline-block;
}
@keyframes helloBreath {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
.profile-pop-card.pop-open {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-pop-card.pop-flip .pop-front {
  transform: rotateY(180deg);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-pop-card.pop-flip .pop-back {
  transform: rotateY(360deg);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-pop-card.pop-return {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes profilePopOpen {
  0% {
    left: var(--origin-left);
    top: var(--origin-top);
    width: var(--origin-width);
    transform: scale(1) rotateX(0deg) translateZ(0);
    opacity: 0.88;
  }
  65% {
    left: calc(50% - min(520px, 90vw) / 2);
    top: calc(50% - min(650px, 112.5vw) / 2);
    width: min(520px, 90vw);
    transform: scale(1.02) rotateX(2deg) translateZ(80px);
    opacity: 1;
  }
  100% {
    left: calc(50% - min(520px, 90vw) / 2);
    top: calc(50% - min(650px, 112.5vw) / 2);
    width: min(520px, 90vw);
    transform: scale(1) rotateX(0deg) translateZ(60px);
    opacity: 1;
  }
}
@keyframes profilePopReturn {
  0% {
    left: calc(50% - min(520px, 90vw) / 2);
    top: calc(50% - min(650px, 112.5vw) / 2);
    width: min(520px, 90vw);
    transform: scale(1) rotateX(0deg) translateZ(60px);
    opacity: 1;
  }
  100% {
    left: var(--origin-left);
    top: var(--origin-top);
    width: var(--origin-width);
    transform: scale(0.94) rotateX(-2deg) translateZ(0);
    opacity: 0;
  }
}
.pop-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 18, 0.8);
  z-index: 10;
}
.pop-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(232, 185, 104, 0.9);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,185,102,0.55) rgba(255,255,255,0.08);
}
#social .card-grid {
  max-height: none !important;
  overflow-y: visible !important;
  padding-right: 0 !important;
  scrollbar-width: none !important;
}
.social-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.social-card,
.schedule-card,
.life-card {
  position: relative;
  min-height: 170px;
  padding: 22px;
  overflow: hidden;
}
.schedule-card.has-poster {
  display: grid;
  grid-template-columns: minmax(220px, 36%) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
  grid-column: span 2;
  min-height: 400px;
  padding: clamp(24px, 2.8vw, 40px);
}
.schedule-card.has-thumb {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  grid-column: span 1;
  min-height: 320px;
  padding: clamp(6px, 0.8vw, 12px) clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 28px);
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035)),
    rgba(20,25,42,0.16) !important;
}
.schedule-card.status-ended {
  filter: saturate(0.86);
}
.schedule-card::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 0;
  bottom: 18px;
  z-index: 3;
  width: 5px;
  border-radius: 999px 0 0 999px;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 22px rgba(255,255,255,0.1);
  pointer-events: none;
}
.schedule-card.status-upcoming::before {
  background: linear-gradient(180deg, rgba(255,236,186,1), rgba(232,185,102,0.78));
  box-shadow: 0 0 30px rgba(232,185,102,0.42);
}
.schedule-card.status-live::before {
  background: linear-gradient(180deg, rgba(178,229,255,1), rgba(91,177,255,0.82));
  box-shadow: 0 0 30px rgba(91,177,255,0.46);
}

/**
 * 日程与个人资料样式覆盖文件
 * 
 * @file schedule-profile.css
 * @description 日程卡片、个人资料展示、社交组件的样式覆盖与优化
 * @author JZY Twins City Team
 * @created 2026-06-02
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 * 
 * @overview
 * 本文件包含以下核心模块：
 * 1. 抖音卡片特殊样式 - 横向布局、防遮挡设计
 * 2. 日程卡片样式覆盖 - 不同类型卡片的差异化样式
 * 3. 个人资料样式优化 - 徽章、文本卡片等组件
 * 4. 社交卡片样式 - 呼吸动画、点亮效果
 * 5. 工作时间线 - 可展开/折叠的时间线组件
 * 6. 模态对话框 - 日程详情弹窗
 */
/* ============ 抖音卡片特殊样式 ============ */
/* 1. 卡片整体：确保文本区位于顶部，且图片区完整显示人像 */
.schedule-card.is-douyin-card.has-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 内容从顶部开始 */
  min-height: 320px;
  /* 保证图片区域足够高 */
  padding: 16px 18px 18px;
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035)), rgba(20,25,42,0.16);
}
/* 2. 文本区容器：横向拉满 + 半透明毛玻璃 + 顶部定位 - 与schedule-core-info一致 */
.schedule-card.is-douyin-card.has-thumb .schedule-copy {
  width: 100% !important;
  max-width: 100% !important;
  /* 强制填满卡片宽度 */
  margin: 0 !important;
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.03);
  /* 与schedule-core-info一致 */
  backdrop-filter: none;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  z-index: 2;
  position: relative;
}
/* 3. 头部区域（标题+标签+进度）：强制一行，水平分布 */
.schedule-card.is-douyin-card.has-thumb .schedule-header {
  display: flex !important;
  flex-direction: row !important;
  /* 覆盖可能存在的 column */
  flex-wrap: nowrap !important;
  /* 禁止换行 */
  justify-content: space-between !important;
  /* 两端对齐 */
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 标题样式：不换行，适当缩放 - 与第26届西安ACC动漫展标题一致 */
.schedule-card.is-douyin-card.has-thumb .schedule-header h3 {
  flex-shrink: 1;
  white-space: nowrap;
  font-size: clamp(21px, 1.35vw, 26px);
  font-weight: 850;
  margin: 0;
  color: rgba(255, 255, 255, 0.98);
  line-height: 1.14;
}
/* 标签（周常更新）和进度（进行中）样式 */
.schedule-card.is-douyin-card.has-thumb .schedule-header .schedule-tag,
.schedule-card.is-douyin-card.has-thumb .schedule-header .schedule-progress {
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 40px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  line-height: 1.3;
}
/* 周常更新标签样式 - 与见面会保持一致（透明背景边框） */
.schedule-card.is-douyin-card.has-thumb .schedule-header .schedule-tag {
  background: transparent;
  border: none;
  color: rgba(255,253,248,0.82);
}
.schedule-card.is-douyin-card.has-thumb .schedule-header .schedule-progress.live {
  background: rgba(0, 204, 255, 0.25);
  border-color: #00ccff;
  color: #00ccff;
}
/* 4. 第二行（日期信息）独立，与头部拉开舒适间距 - 00CCFF颜色 */
.schedule-card.is-douyin-card.has-thumb .douyin-schedule-info {
  margin: 8px 0 0 0 !important;
  /* 头部与日期行间距18px */
  padding: 5px 10px;
  font-size: inherit;
  font-weight: 500;
  background: rgba(0, 204, 255, 0.15);
  backdrop-filter: none;
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(0, 204, 255, 0.4);
  color: #00CCFF;
  line-height: 1.45;
  text-align: center;
}
/* 5. 背景图片层：置于底层，且不会被文字遮挡关键部位 */
.schedule-card.is-douyin-card.has-thumb .schedule-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
}
.schedule-card.is-douyin-card.has-thumb .schedule-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* 焦点上移，让人物面部避开文字区 */
  filter: brightness(1.05) contrast(1.05);
}
/* 6. 移动端适配：防止内容溢出 */
@media (max-width: 640px) {
  .schedule-card.is-douyin-card.has-thumb {
    padding: 12px 14px 14px;
    min-height: 280px;
  }
  .schedule-card.is-douyin-card.has-thumb .schedule-header h3 {
    font-size: 18px;
  }
  .schedule-card.is-douyin-card.has-thumb .schedule-header .schedule-tag,
  .schedule-card.is-douyin-card.has-thumb .schedule-header .schedule-progress {
    padding: 4px 10px;
    font-size: 11px;
  }
  .schedule-card.is-douyin-card.has-thumb .douyin-schedule-info {
    margin-top: 12px;
    font-size: 13px;
    padding: 10px 14px;
  }
}
.schedule-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.schedule-header {
  flex-direction: column;
}
.schedule-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.schedule-header h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.98);
}
.schedule-copy p {
  margin: 0;
  color: rgba(251,248,244,0.78);
  font-size: 0.92rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.schedule-copy p strong {
  color: rgba(232, 185, 102, 0.95);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.schedule-core-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.schedule-core-info p {
  font-size: 0.96rem;
  font-weight: 500;
}
.schedule-core-info p strong {
  color: rgba(232, 185, 102, 1);
  font-weight: 700;
}
.schedule-secondary-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.schedule-secondary-info p {
  font-size: 0.96rem;
  font-weight: 500;
  color: rgba(251, 248, 244, 0.7);
}
.schedule-countdown-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid rgba(204, 255, 255, 0.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(204, 255, 255, 0.1), rgba(204, 255, 255, 0.05));
  box-shadow: 0 0 20px rgba(204, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.schedule-countdown-label {
  font-size: inherit;
  font-weight: 800;
  color: #00CCFF;
}
.schedule-countdown {
  font-size: inherit;
  font-weight: 600;
  font-family: inherit;
  color: #00CCFF;
  letter-spacing: normal;
  text-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
  animation: ccffPulse 2s ease-in-out infinite;
}
.schedule-countdown.is-expired {
  color: rgba(255, 100, 100, 0.8);
  text-shadow: 0 0 10px rgba(255, 100, 100, 0.4);
  animation: none;
}
@keyframes ccffPulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(204, 255, 255, 0.5);
  }
  50% {
    opacity: 0.8;
    text-shadow: 0 0 20px rgba(204, 255, 255, 0.8), 0 0 30px rgba(204, 255, 255, 0.4);
  }
}
.schedule-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0;
  min-height: 28px;
  min-width: 60px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.schedule-progress.upcoming {
  color: rgb(255, 239, 199);
  background: rgba(232,185,102,0.22);
  border: 1px solid rgba(232,185,102,0.56);
}
.schedule-progress.live {
  color: #00CCFF;
  background: rgba(0, 204, 255, 0.24);
  border: 1px solid rgba(0, 204, 255, 0.58);
}
.schedule-progress.ended {
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
}
.schedule-copy p.is-date,
.schedule-copy p.is-place {
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid rgba(232,185,102,0.34);
  border-radius: 999px;
  background: rgba(232,185,102,0.1);
  color: rgba(255,245,218,0.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.schedule-copy p.is-place {
  border-color: rgba(232,185,102,0.34);
  background: rgba(232,185,102,0.1);
}
.schedule-copy p.is-date strong,
.schedule-copy p.is-place strong {
  color: var(--gold);
}
.schedule-copy p.is-highlight-date {
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid rgba(0, 204, 255, 0.34);
  border-radius: 999px;
  background: rgba(0, 204, 255, 0.1);
  color: #00CCFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.schedule-copy p.is-highlight-date strong {
  color: #00CCFF;
}
.schedule-poster {
  position: relative;
  z-index: 2;
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 22px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
    0 24px 70px rgba(8,10,18,0.28);
  order: 1;
}
.schedule-poster img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.schedule-figcaption {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 16px;
  font-size: 14px;
  color: #00CCFF;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}
.schedule-thumb {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  opacity: 0.82;
  box-shadow: none;
}
.schedule-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,22,34,0.34), rgba(18,22,34,0.12) 38%, rgba(18,22,34,0.02) 68%),
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(10,14,24,0.08));
}
.schedule-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% center;
  filter: brightness(1.16) contrast(1.02) saturate(1.06);
  display: block;
}
.schedule-card.has-thumb .schedule-copy {
  align-self: flex-end !important;
  margin-top: auto !important;
  width: min(400px, 98%);
  padding: clamp(8px, 0.8vw, 12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    rgba(21,26,38,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
    0 14px 40px rgba(8,10,18,0.12);
  backdrop-filter: blur(7px) saturate(1.02);
  order: 0;
  margin-bottom: 15px;
}
.schedule-card.has-thumb .schedule-copy h3 {
  margin-bottom: 0;
  font-size: clamp(21px, 1.35vw, 26px);
  font-weight: 850;
  line-height: 1.14;
}
.schedule-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.schedule-header h3 {
  margin-bottom: 0;
  flex-shrink: 0;
}
.schedule-tag {
  margin-bottom: 0 !important;
  padding: 4px 12px !important;
  border-radius: 12px;
  flex-shrink: 0;
  white-space: nowrap;
  word-break: keep-all;
}
.schedule-card.has-thumb .schedule-header {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: start;
  gap: clamp(10px, 1.25vw, 18px);
  width: 100%;
}
.schedule-card.has-thumb .schedule-header h3 {
  max-width: none;
  white-space: nowrap;
}
.schedule-card.has-thumb .schedule-progress {
  min-width: max-content;
  padding: 7px 13px;
  font-size: clamp(12px, 0.86vw, 14px);
  white-space: nowrap;
  word-break: keep-all;
}
.schedule-card.has-thumb .schedule-copy p.is-date,
.schedule-card.has-thumb .schedule-copy p.is-highlight-date {
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: 16px;
  line-height: 1.45;
  font-size: clamp(17px, 1.18vw, 20px);
  white-space: nowrap;
}
.schedule-card.has-thumb .schedule-copy p.is-date {
  background: rgba(232,185,102,0.08);
}
.schedule-card.has-thumb .schedule-copy .tag {
  margin-bottom: 6px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: rgba(255,253,248,0.82);
}
.schedule-card.has-thumb::after {
  z-index: 2;
  right: 18px;
  bottom: 12px;
  color: rgba(255,255,255,0.26);
  font-size: clamp(52px, 7vw, 86px);
  letter-spacing: 0.04em;
}
.schedule-card.has-poster::after {
  z-index: 2;
  right: 18px;
  bottom: 12px;
  color: rgba(255,255,255,0.15);
  font-size: 72px;
}
.schedule-card.has-thumb .schedule-copy p.is-place,
.schedule-card.has-thumb .schedule-copy p:nth-of-type(n + 2) {
  display: none;
}
.social-card {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  text-align: left;
}
.social-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(9,12,24,0.1), rgba(9,12,24,0.28)),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none;
}
.social-app-mark {
  position: absolute;
  z-index: 0;
  object-fit: cover;
  transform: rotate(2deg);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.social-card:hover .social-app-mark {
  transform: rotate(0deg) scale(1.02);
}
.social-card h3 {
  position: relative;
  z-index: 1;
}
.social-card strong {
  position: relative;
  z-index: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.social-card p {
  position: relative;
  z-index: 1;
}
.schedule-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.schedule-modal.open {
  display: flex;
}
.schedule-modal-content {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.schedule-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s;
}
.schedule-modal-close:hover {
  background: rgba(255,255,255,0.2);
}
.schedule-modal-body {
  padding-right: 50px;
}
.schedule-modal-body .modal-header {
  text-align: center;
  margin-bottom: 30px;
}
.schedule-modal-body .modal-header h3 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 20px 0 20px;
  line-height: 1.3;
}
.schedule-modal-body .modal-header .schedule-badges {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
}
.schedule-modal-body .modal-header .tag,
.schedule-modal-body .modal-header .schedule-progress {
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 20px;
}
.schedule-modal-body .modal-header .tag {
  background: transparent;
  border: none;
  color: rgba(255,253,248,0.82);
}
.schedule-modal-body .modal-core {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.schedule-modal-body .modal-core p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin: 12px 0;
  line-height: 1.6;
}
.schedule-modal-body .modal-core p strong {
  color: #E8B966;
  font-weight: 700;
  margin-right: 8px;
}
.schedule-modal-body .modal-core p.is-date,
.schedule-modal-body .modal-core p.is-place {
  display: inline-block;
  padding: 10px 20px;
  margin: 8px 10px 8px 0;
  border-radius: 30px;
  background: rgba(232, 185, 102, 0.15);
  border: 1px solid rgba(232, 185, 102, 0.3);
  font-size: 16px;
}
.schedule-modal-body .modal-core p.is-highlight-date {
  display: inline-block;
  padding: 10px 20px;
  margin: 8px 10px 8px 0;
  border-radius: 30px;
  background: rgba(0, 204, 255, 0.15);
  border: 1px solid rgba(0, 204, 255, 0.4);
  font-size: 16px;
  color: #00CCFF;
}
.schedule-modal-body .modal-secondary {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.schedule-modal-body .modal-secondary p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin: 10px 0;
  line-height: 1.6;
}
.schedule-modal-body .modal-secondary p strong {
  color: #E8B966;
  font-weight: 600;
  min-width: 80px;
  display: inline-block;
}
.schedule-modal-body .modal-countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, rgba(0, 204, 255, 0.15), rgba(0, 204, 255, 0.05));
  border: 1px solid rgba(0, 204, 255, 0.3);
  border-radius: 16px;
}
.schedule-modal-body .modal-countdown .schedule-countdown-label {
  font-size: 18px;
  font-weight: 700;
  color: #00CCFF;
  margin-right: 12px;
}
.schedule-modal-body .modal-countdown .schedule-countdown {
  font-size: 24px;
  font-weight: 600;
  color: #00CCFF;
  text-shadow: 0 0 15px rgba(0, 204, 255, 0.6);
}
.schedule-modal-body .modal-header:has(.is-douyin-header) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.schedule-modal-body .modal-header:has(.is-douyin-header) h3 {
  margin: 0;
}
.schedule-card::after,
.life-card::after {
  content: attr(data-icon);
  position: absolute;
  right: 18px;
  bottom: -10px;
  color: rgba(255, 255, 255, 0.15);
  font-size: 72px;
  line-height: 1;
}
.social-card a {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: var(--gold);
  text-decoration: none;
}
.social-link-muted {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: 14px;
}
.source-direct-link {
  display: inline-flex;
  margin-left: 12px;
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.source-direct-link:hover {
  color: rgba(255,239,200,0.98);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.social-note {
  width: min(760px, 100%);
  margin: 24px auto 0;
  padding: 22px 26px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    rgba(16,18,30,0.58);
  box-shadow: 0 22px 70px rgba(0,0,0,0.18);
  text-align: center;
}
.social-note p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.9;
}
.social-note strong {
  display: block;
  margin: 12px 0 4px;
  color: rgba(255,255,255,0.94);
  font-size: 18px;
}
@keyframes breathe {
  0%, 100% {
    filter: saturate(0.9) contrast(1.05) brightness(1);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 20px rgba(217, 166, 174, 0.15);
  }
  50% {
    filter: saturate(1.15) contrast(1.15) brightness(1.35);
    box-shadow: 0 16px 50px rgba(0,0,0,0.3), 0 0 50px rgba(200, 167, 104, 0.5), 0 0 80px rgba(217, 166, 174, 0.35);
  }
}
@keyframes breatheSimultaneous {
  0%, 100% {
    opacity: 0.38;
    filter: saturate(0.9) contrast(1.05) brightness(1);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 15px rgba(159, 197, 199, 0.2);
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    filter: saturate(1.1) contrast(1.1) brightness(1.2);
    box-shadow: 0 14px 45px rgba(0,0,0,0.25), 0 0 35px rgba(159, 197, 199, 0.4), 0 0 60px rgba(159, 197, 199, 0.25);
    transform: scale(1.04);
  }
}
.social-card .social-app-mark {
  opacity: 0.4;
  filter: saturate(0.85) contrast(1.02) brightness(0.95);
  box-shadow: 0 10px 35px rgba(0,0,0,0.25), 0 0 15px rgba(159, 197, 199, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-card .social-app-mark.breathe-active {
  animation: breathe 2s ease-in-out infinite;
}
.social-card .social-app-mark.breathe-simultaneous {
  animation: breatheSimultaneous 2s ease-in-out infinite;
}
.social-card.breathe-active .social-action,
.social-card.breathe-simultaneous .social-action {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 15px rgba(159, 197, 199, 0.5), 0 0 30px rgba(159, 197, 199, 0.3);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.social-card.is-lit {
  border-color: rgba(200, 167, 104, 0.55);
  box-shadow: 0 0 0 2px rgba(200, 167, 104, 0.15) inset, 
    0 0 40px rgba(200, 167, 104, 0.22), 
    0 0 80px rgba(200, 167, 104, 0.12), 
    0 15px 40px rgba(0,0,0,0.28);
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}
.social-card.is-lit .social-action {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(200, 167, 104, 0.55), 0 0 24px rgba(200, 167, 104, 0.25);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.social-card.is-lit::before {
  background: linear-gradient(135deg, rgba(200, 167, 104, 0.1), rgba(217, 166, 174, 0.07), rgba(9,12,24,0.28));
}
.social-card.is-lit h3 {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(200, 167, 104, 0.5), 0 0 40px rgba(200, 167, 104, 0.25);
  letter-spacing: 0.02em;
}
.social-card.is-lit strong {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}
.year-tabs,
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.year-tabs button,
.gallery-filter button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.year-tabs button:hover,
.year-tabs button.active {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
}
.timeline {
  position: relative;
  display: grid;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(255,255,255,0.42), transparent);
}
.work-card {
  position: relative;
  margin-left: 54px;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
.work-card::before {
  content: "";
  position: absolute;
  left: -43px;
  top: 26px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 0 0 7px rgba(255,255,255,0.08);
}
.work-card:hover,
.work-card.open {
  transform: translateX(8px);
  background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09));
}
.work-meta {
  display: flex;
  flex-wrap: wrap;
}
.work-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.work-card.open .work-detail {
  grid-template-rows: 1fr;
}
.work-detail div {
  overflow: hidden;
}
.work-entry {
  border-top: 1px solid rgba(255,255,255,0.14);
}
.work-entry:first-child {
  border-top: 0;
}
.work-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.work-entry-meta span {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: rgba(251,248,244,0.82);
  line-height: 1.2;
}
.work-entry p {
  margin: 0;
  color: rgba(251,248,244,0.76);
  word-spacing: 0.12em;
}
h1 {
  max-width: 720px;
  font-size: clamp(46px, 5.7vw, 76px);
  line-height: 1.14;
  margin-bottom: 20px;
}
[data-theme="light"] .hero-title-en {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.25;
  font-weight: 700;
}
.hero-gift {
  margin-bottom: 18px;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.65;
}
.hero .lead {
  max-width: 660px;
  font-size: 17px;
  line-height: 2.05;
  color: rgba(251,248,244,0.78);
}
.section-heading {
  max-width: 860px;
  margin: 0 auto 36px;
  text-align: center;
}
.profile-badges span {
  font-size: 15px;
}
.social-grid {
  gap: 22px;
}
.social-card h3 {
  line-height: 1.18;
  margin: 0;
  padding: 0;
}
.social-card strong {
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
.social-card p {
  margin-top: auto;
}
.social-card a,
.social-link-muted {
  font-size: 16px;
}
.timeline {
  gap: 20px;
}
.work-card {
  padding: 26px 28px;
}
.work-card h3 {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1.35;
}
.work-meta {
  gap: 10px;
  margin: 14px 0;
}
.work-card .tag {
  min-height: 32px;
  font-size: 13px;
}
.work-entry {
  padding: 16px 0;
}
.work-entry-meta span {
  font-size: 13.5px;
}
.work-entry p {
  font-size: 15px;
  line-height: 1.95;
}
.work-card-lead {
  border-color: rgba(232,185,102,0.72);
  /* 取消填充色 */
  background: transparent;
  box-shadow: none;
}
.work-card-lead::before {
  background: var(--rose);
  box-shadow: 0 0 28px rgba(217,166,174,0.72);
}
.lead-role-tag {
  border-color: rgba(232,185,102,0.58);
  background: rgba(232,185,102,0.18);
  color: rgba(255,239,200,0.96);
}
.work-meta-separator {
  margin: 0 8px;
  color: rgba(255,239,200,0.5);
  font-weight: 300;
}
.works-expand-btn,
.works-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin: 24px auto 0;
  padding: 14px 24px;
  border: 1px solid rgba(200,167,104,0.5);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(200,167,104,0.22), rgba(200,167,104,0.1));
  color: rgba(255,239,200,0.96);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.works-expand-btn:hover,
.works-collapse-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(200,167,104,0.8);
  background: linear-gradient(145deg, rgba(200,167,104,0.32), rgba(200,167,104,0.18));
  box-shadow: 0 12px 34px rgba(200,167,104,0.24);
}
.works-expand-btn i,
.works-collapse-btn i {
  font-size: 13px;
  transition: transform 0.25s ease;
}
.works-collapse-btn i {
  transform: rotate(180deg);
}
.profile-copy .eyebrow {
  margin-bottom: 10px;
}
.profile-copy h2 {
  margin-bottom: 10px;
  font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1.08;
}
.profile-copy h3 {
  margin-bottom: 12px;
  color: rgba(251,248,244,0.94);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.28;
}
.profile-badges span,
.profile-badges span.wide {
  background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)),
    rgba(255,255,255,0.04);
}
.profile-text-card p {
  margin: 0;
  text-justify: inter-character;
}
.profile-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  color: var(--gold);
  line-height: 1.05;
  text-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
.profile-role {
  max-width: 680px;
  padding-left: 2px;
}
.profile-badges strong {
  font-weight: 800;
}
.profile-badges em {
  line-height: 1.2;
  font-weight: 800;
}
.profile-text-card {
  margin-top: 30px;
}
.profile-text-card p {
  max-width: none;
  text-indent: 2em;
  color: rgba(251,248,244,0.84);
}
.profile-text-card p + p {
  margin-top: 16px;
}
.profile-copy .profile-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--gold);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.profile-name .name-cn {
  font-size: clamp(48px, 5.2vw, 76px);
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(232, 185, 104, 0.35);
  letter-spacing: -0.02em;
}
.profile-name span {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.profile-badges span,
.profile-badges span.wide {
  flex-direction: column;
  gap: 6px;
}
.profile-badges span b {
  color: var(--gold);
  font-size: 14px;
}
.profile-badges strong,
.profile-badges em {
  font-weight: 800;
}
.profile-badges strong {
  color: rgba(251,248,244,0.68);
  font-size: 13px;
  line-height: 1.28;
}
.profile-badges em {
  color: rgba(251,248,244,0.98);
  overflow: visible;
}
.life-layout {
  display: flex;
  justify-content: center;
}
.quote-panel {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 600px;
  min-height: 330px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    radial-gradient(ellipse at 0% 0%, rgba(217, 166, 174, 0.15), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(200, 167, 104, 0.1), transparent 50%);
}
#quoteText {
  font-size: 26px;
  line-height: 1.75;
  color: rgba(251, 248, 244, 0.92);
}
#quoteFrom {
  color: var(--gold);
  text-shadow: 0 0 15px rgba(200, 167, 104, 0.4);
}
.life-heading-row {
  display: flex;
  align-items: center;
  gap: clamp(26px, 8vw, 180px);
}
.heart-popup-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 64px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,0.48), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)),
    rgba(217,166,174,0.12);
  color: rgba(255,238,244,0.98);
  cursor: pointer;
  box-shadow: 0 18px 54px rgba(31,42,72,0.18),
    0 0 30px rgba(255,255,255,0.16) inset,
    0 0 34px rgba(217,166,174,0.18);
  backdrop-filter: blur(18px) saturate(1.18);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
.heart-popup-trigger span {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(217,166,174,0.7));
}
.heart-popup-trigger:hover {
  transform: translateY(-3px) scale(1.04);
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,0.58), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.32), rgba(217,166,174,0.16)),
    rgba(217,166,174,0.18);
  box-shadow: 0 22px 64px rgba(31,42,72,0.22),
    0 0 34px rgba(255,255,255,0.2) inset,
    0 0 46px rgba(217,166,174,0.34);
}
.quote-controls {
  display: flex;
  gap: 10px;
}

/**
 * 音乐播放器与画廊样式文件
 * 
 * @file music-gallery.css
 * @description 包含黑胶唱片播放器、画廊图片展示、时间线布局等组件的样式
 * @author JZY Twins City Team
 * @created 2026-06-02
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 * 
 * @overview
 * 本文件包含以下核心模块：
 * 1. 黑胶唱片播放器 - 带唱臂动画的复古音乐播放器
 * 2. 画廊图片卡片 - 精致的图片展示卡片，含多层光效和悬停动画
 * 3. 画廊时间线 - 按月份组织的图片归档展示
 * 4. 视频卡片 - 视频内容展示组件
 * 5. 参考资料卡片 - 引用/参考信息展示
 */
/* ============ 黑胶唱片音乐播放器 ============ */
.music-player {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
  align-items: center;
  padding: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)),
    radial-gradient(ellipse at 0% 50%, rgba(200, 167, 104, 0.12), transparent 60%);
}
.control-btn.active {
  border: none;
}
.progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.14);
}
.progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rose), var(--gold), var(--aqua));
}
.masonry {
  columns: 4 220px;
  column-gap: 16px;
}
.gallery-item {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 20px;
  border-radius: 20px;
  overflow: hidden;
  cursor: zoom-in;
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* 精致边框 - 金属质感 */
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25),
    /* 内发光 - 边缘提亮 */
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 50px rgba(255,255,255,0.03) inset,
    /* 底部金色光晕 */
    0 0 60px rgba(200, 167, 104, 0.06);
  /* 多重滤镜背景 - 创造层次感 */
  background: linear-gradient(145deg, rgba(255,255,255,0.12), transparent 50%),
    /* 阴影层 */
    linear-gradient(315deg, rgba(0,0,0,0.08), transparent 40%),
    /* 中心光 */
    radial-gradient(ellipse at center, rgba(255,255,255,0.06), transparent 70%),
    /* 底部渐变 */
    linear-gradient(to top, rgba(0,0,0,0.15), transparent 30%);
  backdrop-filter: blur(16px) saturate(1.15);
}
/* 精致边框光效 - 摄影镜头效果 */
.gallery-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 40%),
    /* 右侧反光 */
    linear-gradient(270deg, rgba(255,255,255,0.15) 0%, transparent 30%),
    /* 底部阴影 */
    linear-gradient(0deg, rgba(0,0,0,0.2) 0%, transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* 精致内部光效 - 多层光晕 */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 25% 25%, rgba(255,255,255,0.2) 0%, transparent 40%),
    /* 右下角补光 */
    radial-gradient(ellipse at 80% 85%, rgba(200, 167, 104, 0.12) 0%, transparent 35%),
    /* 顶部紫罗兰光 */
    radial-gradient(ellipse at 70% 15%, rgba(155, 145, 200, 0.08) 0%, transparent 30%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  mix-blend-mode: screen;
}
.gallery-item:hover {
  transform: translateY(-8px) scale(1.025);
  border-color: rgba(255,255,255,0.32);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35),
    /* 内发光增强 */
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 0 80px rgba(255,255,255,0.06) inset,
    /* 金色光晕绽放 */
    0 0 100px rgba(200, 167, 104, 0.12),
    /* 玫瑰色微妙光 */
    0 0 40px rgba(201, 145, 157, 0.08);
}
.gallery-item:hover::before {
  opacity: 1;
}
.gallery-item:hover::after {
  opacity: 1;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  image-rendering: crisp-edges;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
:root:not([data-theme="light"]) .gallery-item img {
  filter: brightness(1.08);
}
/* 精致的暗角效果层 */
.gallery-item .vignette {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.5s ease;
  /* 多层暗角 - 模拟专业镜头 */
  background: radial-gradient(
      ellipse at center,
      transparent 30%,
      rgba(0, 0, 0, 0.02) 50%,
      rgba(0, 0, 0, 0.08) 65%,
      rgba(0, 0, 0, 0.18) 80%,
      rgba(0, 0, 0, 0.28) 100%
    );
  mix-blend-mode: multiply;
}
.gallery-item:hover .vignette {
  opacity: 0.45;
}
/* 精致的颗粒感层 */
.gallery-item .grain {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.06;
  transition: opacity 0.5s ease;
  /* SVG噪点滤镜 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(../../modules/%23noise)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
.gallery-item:hover .grain {
  opacity: 0.08;
}
/* 精致的色调层 */
.gallery-item .color-grade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.15;
  transition: all 0.5s ease;
  /* 精致的色彩映射 */
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 240, 200, 0.08), transparent 40%),
    /* 冷色阴影 */
    radial-gradient(ellipse at 75% 85%, rgba(200, 210, 230, 0.06), transparent 35%),
    /* 顶部蓝色调 */
    linear-gradient(to bottom, rgba(200, 210, 240, 0.05), transparent 30%),
    /* 底部暖色调 */
    linear-gradient(to top, rgba(255, 230, 200, 0.08), transparent 35%);
  mix-blend-mode: overlay;
}
.gallery-item:hover .color-grade {
  opacity: 0.22;
}
/* 精致的边缘光 */
.gallery-item .edge-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* 边缘高光 */
  background: linear-gradient(to bottom, rgba(200, 167, 104, 0.15), transparent 25%),
    /* 左上角强光 */
    radial-gradient(ellipse at 10% 10%, rgba(255, 255, 255, 0.12), transparent 30%),
    /* 右侧反光 */
    radial-gradient(ellipse at 95% 50%, rgba(255, 255, 255, 0.08), transparent 25%);
  mix-blend-mode: screen;
}
.gallery-item:hover .edge-light {
  opacity: 1;
}
/* 悬停时的增强效果 */
.gallery-item:hover img {
  transform: scale(1.1);
}
.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 50px 16px 18px;
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0.2) 60%,
      transparent 100%
    );
  opacity: 0.8;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-caption p {
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 0, 0, 0.3);
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
  padding-top: 60px;
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.5) 40%,
      rgba(0, 0, 0, 0.25) 65%,
      transparent 100%
    );
}
.gallery-caption strong {
  display: block;
  color: rgba(255,255,255,0.96);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.gallery-caption p {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.gallery-timeline {
  position: relative;
  display: grid;
  gap: 30px;
}
.gallery-timeline::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.08));
  transition: background 0.4s ease;
}
.category-self.gallery-timeline::before {
  background: linear-gradient(rgba(255, 182, 193, 0.64), rgba(255,255,255,0.08));
}
.category-life.gallery-timeline::before {
  background: linear-gradient(rgba(135, 206, 250, 0.64), rgba(255,255,255,0.08));
}
.category-moments.gallery-timeline::before {
  background: linear-gradient(rgba(255, 215, 0, 0.64), rgba(255,255,255,0.08));
}
.gallery-month-group {
  position: relative;
  padding-left: 46px;
}
.gallery-month-marker {
  position: absolute;
  left: 3px;
  top: 18px;
  z-index: 1;
  width: 24px;
  height: 24px;
  border: 4px solid rgba(15,18,32,0.92);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
  box-shadow: 0 0 0 8px rgba(255,255,255,0.08),
    0 0 30px rgba(255,255,255,0.3),
    inset 0 2px 6px rgba(255,255,255,0.5);
  transition: all 0.4s ease;
}
/* 精致的内光 */
.gallery-month-marker::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.5), transparent);
}
.gallery-month-heading {
  padding: 22px 26px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  /* 精致边框 */
  border: 1px solid rgba(255,255,255,0.15);
  /* 多层阴影 - 去除黄色调 */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  /* 精致的玻璃质感 - 去除黄色调 */
  background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
    rgba(18, 21, 34, 0.5);
  backdrop-filter: blur(20px) saturate(1.15);
}
/* 精致的顶部光 */
.gallery-month-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  border-radius: 50%;
}
/* 精致的装饰光 - 去除黄色调 */
.gallery-month-heading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 15% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 50%, rgba(159, 197, 199, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(201, 145, 157, 0.05) 0%, transparent 35%);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.gallery-month-heading:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255,255,255,0.1) inset;
}
.gallery-month-heading:hover::after {
  opacity: 1;
}
.gallery-month-heading {
  cursor: pointer;
}
.gallery-month-toggle {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all var(--transition-medium);
}
.gallery-month-toggle i {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  transition: transform var(--transition-medium);
}
.gallery-month-heading:hover .gallery-month-toggle {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.1);
}
.gallery-month-group.collapsed .gallery-month-toggle i {
  transform: rotate(-90deg);
}
.gallery-month-group.collapsed .gallery-month-marker {
  transform: scale(0.9);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08),
    0 0 20px rgba(255,255,255,0.2),
    inset 0 2px 4px rgba(255,255,255,0.3);
}
.gallery-month-heading span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.2em;
}
.gallery-month-heading h3 {
  margin: 6px 0 8px;
  font-size: clamp(32px, 3.5vw, 48px);
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.88));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gallery-month-heading p {
  margin: 0;
  color: rgba(251,248,244,0.72);
  line-height: 1.7;
  font-size: 15px;
}
.gallery-date-group {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* 精致边框 */
  border: 1px solid rgba(255,255,255,0.15);
  /* 多层阴影系统 */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 60px rgba(255,255,255,0.02) inset;
  /* 精致的玻璃质感背景 */
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)),
    /* 微妙的顶部金色光 */
    linear-gradient(to bottom, rgba(200, 167, 104, 0.04), transparent 30%),
    /* 底部渐变 */
    linear-gradient(to top, rgba(18, 21, 34, 0.7), rgba(18, 21, 34, 0.3));
  backdrop-filter: blur(20px) saturate(1.2);
}
/* 精致的装饰光效 */
.gallery-date-group::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 15% 25%, rgba(200, 167, 104, 0.1) 0%, transparent 45%),
    /* 右下角玫瑰光 */
    radial-gradient(ellipse at 85% 80%, rgba(201, 145, 157, 0.06) 0%, transparent 35%),
    /* 顶部水色光 */
    radial-gradient(ellipse at 75% 10%, rgba(159, 197, 199, 0.05) 0%, transparent 30%);
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.4s ease;
}
/* 精致的顶部边框光 */
.gallery-date-group::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  border-radius: 50%;
}
/* 悬停光效 */
.gallery-date-group:hover {
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 0 100px rgba(255,255,255,0.04) inset,
    0 0 80px rgba(200, 167, 104, 0.08);
}
.gallery-date-group:hover::before {
  opacity: 1;
}
.gallery-date-heading {
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  /* 精致边框 */
  border: 1px solid rgba(255,255,255,0.12);
  /* 多层阴影 - 去除黄色调 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  /* 精致的玻璃质感 - 去除黄色调 */
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)),
    rgba(18, 21, 34, 0.5);
  backdrop-filter: blur(16px) saturate(1.15);
}
/* 精致的顶部光 */
.gallery-date-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  border-radius: 50%;
}
/* 精致的装饰光 - 去除黄色调 */
.gallery-date-heading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(159, 197, 199, 0.05) 0%, transparent 40%);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.gallery-date-heading:hover {
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255,255,255,0.1) inset;
}
.gallery-date-heading:hover::after {
  opacity: 1;
}
.gallery-date-heading h4 {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 28px);
  color: rgba(251,248,244,0.96);
  font-weight: 700;
  letter-spacing: 0.02em;
  /* 精致的渐变文字 */
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.95) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gallery-date-heading p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(251,248,244,0.68);
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.gallery-date-grid {
  column-count: 4;
  column-gap: 16px;
}
.gallery-date-grid .gallery-item {
  break-inside: avoid;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.video-card {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
}
.video-card video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  object-fit: cover;
  background: rgba(0, 0, 0, 0.18);
  filter: brightness(1.06) saturate(1.04);
  transition: filter 0.4s ease;
}
.video-card:hover video {
  filter: brightness(1.1) saturate(1.08);
}
.video-card .fan-video-title {
  min-width: 0;
  margin: 16px 4px 6px;
  color: #fff;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .video-card .fan-video-title {
    font-size: 14px !important;
  }
}
.video-card .fan-video-title--segmented {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 16px;
}
.fan-video-title--segmented > span {
  white-space: nowrap;
}
.fan-video-title--segmented > span + span::before {
  content: "｜";
  margin-right: 6px;
  color: #fff;
  font-weight: 400;
}
.fan-video-title--segmented .fan-video-title-type {
  color: #fff;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
}
.video-card h3 .weibo-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.video-card h3 .weibo-link:hover {
  color: rgba(232, 185, 102, 0.85);
  border-bottom-color: var(--gold);
}
.video-card p {
  margin: 0 4px 6px;
  color: rgba(251, 248, 244, 0.72);
  line-height: 1.7;
}
.reference-section {
  padding-top: 24px;
  padding-bottom: 48px;
}
.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.reference-grid article {
  padding: 24px 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)),
    radial-gradient(ellipse at 0% 0%, rgba(155, 145, 200, 0.1), transparent 50%);
}
.reference-grid h2 {
  margin-bottom: 10px;
  font-size: clamp(18px, 2.2vw, 24px);
  color: rgba(251, 248, 244, 0.92);
}
.reference-grid p {
  margin: 6px 0;
  font-size: 13px;
  color: rgba(251, 248, 244, 0.72);
  line-height: 1.8;
}
/* =========================
   光影时光机 - 分类主题色适配
   ========================= */
/* 自我部分 - 粉色主题 */
.gallery-month-group.category-self .gallery-month-marker {
  background: linear-gradient(135deg, #ffb6c1, rgba(255, 182, 193, 0.7));
  box-shadow: 0 0 0 8px rgba(255, 182, 193, 0.1),
    0 0 36px rgba(255, 182, 193, 0.5),
    inset 0 2px 6px rgba(255,255,255,0.4);
}
.gallery-month-group.category-self .gallery-month-heading span {
  color: #ffb6c1;
}
.gallery-month-group.category-self .gallery-month-heading h3 {
  background: linear-gradient(135deg, rgba(251,248,244,0.98), rgba(255, 182, 193, 0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gallery-month-group.category-self .gallery-month-toggle {
  background: rgba(255, 182, 193, 0.15);
  border-color: rgba(255, 182, 193, 0.3);
}
.gallery-month-group.category-self .gallery-month-toggle i {
  color: #ffb6c1;
}
.gallery-month-group.category-self .gallery-month-heading:hover .gallery-month-toggle {
  background: rgba(255, 182, 193, 0.25);
  border-color: rgba(255, 182, 193, 0.5);
  box-shadow: 0 0 20px rgba(255, 182, 193, 0.3);
}
.gallery-month-group.category-self.collapsed .gallery-month-marker {
  box-shadow: 0 0 0 4px rgba(255, 182, 193, 0.08),
    0 0 20px rgba(255, 182, 193, 0.3),
    inset 0 2px 4px rgba(255,255,255,0.3);
}
/* 热爱生活 - 蓝色主题 */
.gallery-month-group.category-life .gallery-month-marker {
  background: linear-gradient(135deg, #87cefa, rgba(135, 206, 250, 0.7));
  box-shadow: 0 0 0 8px rgba(135, 206, 250, 0.1),
    0 0 36px rgba(135, 206, 250, 0.5),
    inset 0 2px 6px rgba(255,255,255,0.4);
}
.gallery-month-group.category-life .gallery-month-heading span {
  color: #87cefa;
}
.gallery-month-group.category-life .gallery-month-heading h3 {
  background: linear-gradient(135deg, rgba(251,248,244,0.98), rgba(135, 206, 250, 0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gallery-month-group.category-life .gallery-month-toggle {
  background: rgba(135, 206, 250, 0.15);
  border-color: rgba(135, 206, 250, 0.3);
}
.gallery-month-group.category-life .gallery-month-toggle i {
  color: #87cefa;
}
.gallery-month-group.category-life .gallery-month-heading:hover .gallery-month-toggle {
  background: rgba(135, 206, 250, 0.25);
  border-color: rgba(135, 206, 250, 0.5);
  box-shadow: 0 0 20px rgba(135, 206, 250, 0.3);
}
.gallery-month-group.category-life.collapsed .gallery-month-marker {
  box-shadow: 0 0 0 4px rgba(135, 206, 250, 0.08),
    0 0 20px rgba(135, 206, 250, 0.3),
    inset 0 2px 4px rgba(255,255,255,0.3);
}
/* 片刻动态 - 金色主题 */
.gallery-month-group.category-moments .gallery-month-marker {
  background: linear-gradient(135deg, #ffd700, rgba(255, 215, 0, 0.7));
  box-shadow: 0 0 0 8px rgba(255, 215, 0, 0.1),
    0 0 36px rgba(255, 215, 0, 0.5),
    inset 0 2px 6px rgba(255,255,255,0.4);
}
.gallery-month-group.category-moments .gallery-month-heading span {
  color: #ffd700;
}
.gallery-month-group.category-moments .gallery-month-heading h3 {
  background: linear-gradient(135deg, rgba(251,248,244,0.98), rgba(255, 215, 0, 0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gallery-month-group.category-moments .gallery-month-toggle {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.3);
}
.gallery-month-group.category-moments .gallery-month-toggle i {
  color: #ffd700;
}
.gallery-month-group.category-moments .gallery-month-heading:hover .gallery-month-toggle {
  background: rgba(255, 215, 0, 0.25);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.gallery-month-group.category-moments.collapsed .gallery-month-marker {
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.08),
    0 0 20px rgba(255, 215, 0, 0.3),
    inset 0 2px 4px rgba(255,255,255,0.3);
}
/* 日期分组 - 自我部分粉色 */
.gallery-date-group.category-self .gallery-date-heading {
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)),
    linear-gradient(to bottom, rgba(255, 182, 193, 0.08), transparent 50%),
    rgba(18, 21, 34, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 40px rgba(255, 182, 193, 0.04);
}
.gallery-date-group.category-self .gallery-date-heading::after {
  background: radial-gradient(ellipse at 20% 50%, rgba(255, 182, 193, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(159, 197, 199, 0.05) 0%, transparent 40%);
}
.gallery-date-group.category-self .gallery-date-heading:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 60px rgba(255, 182, 193, 0.08);
}
.gallery-date-group.category-self .gallery-date-heading h4 {
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255, 182, 193, 0.88) 50%, rgba(255,255,255,0.92) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(255, 182, 193, 0.2));
}
/* 日期分组 - 热爱生活蓝色 */
.gallery-date-group.category-life .gallery-date-heading {
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)),
    linear-gradient(to bottom, rgba(135, 206, 250, 0.08), transparent 50%),
    rgba(18, 21, 34, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 40px rgba(135, 206, 250, 0.04);
}
.gallery-date-group.category-life .gallery-date-heading::after {
  background: radial-gradient(ellipse at 20% 50%, rgba(135, 206, 250, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(159, 197, 199, 0.05) 0%, transparent 40%);
}
.gallery-date-group.category-life .gallery-date-heading:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 60px rgba(135, 206, 250, 0.08);
}
.gallery-date-group.category-life .gallery-date-heading h4 {
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(135, 206, 250, 0.88) 50%, rgba(255,255,255,0.92) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(135, 206, 250, 0.2));
}
/* 日期分组 - 片刻动态金色 */
.gallery-date-group.category-moments .gallery-date-heading {
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)),
    linear-gradient(to bottom, rgba(255, 215, 0, 0.08), transparent 50%),
    rgba(18, 21, 34, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 40px rgba(255, 215, 0, 0.04);
}
.gallery-date-group.category-moments .gallery-date-heading::after {
  background: radial-gradient(ellipse at 20% 50%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(159, 197, 199, 0.05) 0%, transparent 40%);
}
.gallery-date-group.category-moments .gallery-date-heading:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 60px rgba(255, 215, 0, 0.08);
}
.gallery-date-group.category-moments .gallery-date-heading h4 {
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255, 215, 0, 0.88) 50%, rgba(255,255,255,0.92) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.2));
}

.audio-gallery-section {
  padding-top: clamp(84px, 10vw, 140px);
}
/* Emotion Flow final: breathing glass exhibit */
.emotion-flow-active {
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--emotion-current), transparent 52%), transparent 34%),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--emotion-current-accent), transparent 76%), transparent 24%),
    radial-gradient(circle at 82% 82%, rgba(6, 13, 28, 0.72), transparent 38%),
    linear-gradient(180deg, #0b1021, #060b17 72%);
}
.emotion-flow-active main {
  min-height: 100vh;
}
/* Emotion Flow V2 absolute final override.
   This intentionally lives after the older radio-stage rules. */
body.emotion-flow-active .audio-cards-container.emotion-flow-stage,
body.emotion-flow-active .radio-emotion-stage {
  inset: 0 !important;
}
/* Break the legacy glass-stage shell so Emotion Flow starts as a new page. */
body.emotion-flow-active .radio-compass,
body.emotion-flow-active .radio-orbit {
  display: none !important;
  visibility: hidden !important;
}
body.emotion-flow-active .emotion-stage-count,
body.emotion-flow-active .emotion-stage-chapter,
body.emotion-flow-active .emotion-stage-title,
body.emotion-flow-active .emotion-stage-note,
body.emotion-flow-active .emotion-stage-line-wrap {
  position: static !important;
  transform: none !important;
}
/* Emotion Flow V2 final guard: keep the independent scene above legacy shells. */
body.emotion-flow-active .site-header,
body.emotion-flow-active .topology-toggle,
body.emotion-flow-active .theme-toggle,
body.emotion-flow-active #particleCanvas,
body.emotion-flow-active .cursor-aura,
body.emotion-flow-active .ambient,
body.emotion-flow-active .bgm-control {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@property --emotion-current {
  syntax: "<color>";
  inherits: true;
  initial-value: #e8b7c5;
}
@property --emotion-current-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff7ee;
}
@property --emotion-depth {
  syntax: "<color>";
  inherits: true;
  initial-value: #071126;
}
/* Emotion Flow V2: independent audio-emotion color system. */
html:has(body.emotion-flow-active),
body.emotion-flow-active {
  transition: background-color 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.emotion-flow-active {
  color: var(--emotion-ink, #fffaf2);
}
body.emotion-flow-active #particleCanvas,
body.emotion-flow-active .cursor-aura,
body.emotion-flow-active .ambient,
body.emotion-flow-active .site-header,
body.emotion-flow-active .theme-toggle,
body.emotion-flow-active .topology-toggle,
body.emotion-flow-active .bgm-control,
body.emotion-flow-active .site-footer {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body.emotion-flow-active main,
body.emotion-flow-active .audio-gallery-section,
body.emotion-flow-active .audio-cards-container.emotion-flow-stage,
body.emotion-flow-active .radio-emotion-stage {
  background: transparent !important;
}
body.emotion-flow-active .audio-gallery-section {
  display: block !important;
}
body.emotion-flow-active .audio-gallery-section::before,
body.emotion-flow-active .audio-gallery-section::after {
  z-index: -3;
  transition: background 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.emotion-flow-active .section-heading,
body.emotion-flow-active .audio-filters {
  display: none !important;
}
body.emotion-flow-active .emotion-stage-number,
body.emotion-flow-active .emotion-stage-title,
body.emotion-flow-active .emotion-stage-line {
  color: var(--emotion-ink, #fffaf2) !important;
}
body.emotion-flow-active .emotion-stage-count,
body.emotion-flow-active .emotion-stage-note,
body.emotion-flow-active .emotion-stage-line-wrap {
  color: var(--emotion-muted, rgba(255, 250, 242, 0.72)) !important;
}
body.emotion-flow-active .emotion-light-dot.active {
  color: var(--emotion-control-ink, #172135) !important;
  border-color: color-mix(in srgb, var(--emotion-current-accent) 70%, white 8%) !important;
}
body.emotion-flow-active .emotion-control {
  border-color: color-mix(in srgb, var(--emotion-current-accent) 32%, transparent) !important;
}
@media (max-width: 720px) {
  body.emotion-flow-active .emotion-stage-note {
    font-size: 12px !important;
  }
  body.emotion-flow-active .emotion-stage-line-wrap {
    max-width: 86vw !important;
  }
}
/* Emotion canvas final pass: remove site theme color, derive the whole viewport from the current emotion. */
html:has(body.emotion-flow-active) {
  background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--emotion-current-accent) 42%, transparent), transparent 30%),
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--emotion-current) 54%, transparent), transparent 52%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--emotion-current) 38%, black 62%),
      color-mix(in srgb, var(--emotion-current-accent) 20%, black 80%) 48%,
      color-mix(in srgb, var(--emotion-current) 18%, black 82%)
    ) !important;
}
body.emotion-flow-active,
body.emotion-flow-active main,
body.emotion-flow-active .audio-gallery-section,
body.emotion-flow-active .audio-cards-container.emotion-flow-stage,
body.emotion-flow-active .radio-emotion-stage {
  background: radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--emotion-current-accent) 36%, transparent), transparent 28%),
    radial-gradient(circle at 54% 44%, color-mix(in srgb, var(--emotion-current) 62%, transparent), transparent 46%),
    radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--emotion-current-accent) 18%, black 82%), transparent 42%),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--emotion-current-accent) 24%, black 76%) 0%,
      color-mix(in srgb, var(--emotion-current) 36%, black 64%) 42%,
      color-mix(in srgb, var(--emotion-current) 16%, black 84%) 100%
    ) !important;
  background-attachment: fixed !important;
}
body.emotion-flow-active::before {
  background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--emotion-current-accent) 28%, transparent), transparent 34rem),
    radial-gradient(circle at 78% 32%, color-mix(in srgb, var(--emotion-current) 30%, transparent), transparent 36rem),
    radial-gradient(circle at 52% 82%, color-mix(in srgb, var(--emotion-current-accent) 14%, transparent), transparent 42rem) !important;
  opacity: 0.72 !important;
  mix-blend-mode: screen;
}
body.emotion-flow-active::after {
  background: linear-gradient(color-mix(in srgb, var(--emotion-current-accent) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--emotion-current) 9%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--emotion-current-accent) 20%, transparent), transparent 36rem) !important;
  background-size: 96px 96px, 96px 96px, auto !important;
  opacity: 0.28 !important;
  mix-blend-mode: screen;
}
body.emotion-flow-active .radio-emotion-stage[data-shape="ridge"],
body.emotion-flow-active .radio-emotion-stage[data-shape="rain"],
body.emotion-flow-active .radio-emotion-stage[data-shape="ice"],
body.emotion-flow-active .radio-emotion-stage[data-shape="tear"],
body.emotion-flow-active .radio-emotion-stage[data-shape="noise"] {
  background: radial-gradient(circle at 46% 48%, color-mix(in srgb, var(--emotion-current) 46%, transparent), transparent 44%),
    radial-gradient(circle at 58% 36%, color-mix(in srgb, var(--emotion-current-accent) 18%, transparent), transparent 38%),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--emotion-current-accent) 16%, black 84%) 0%,
      color-mix(in srgb, var(--emotion-current) 30%, black 70%) 44%,
      color-mix(in srgb, var(--emotion-current) 10%, black 90%) 100%
    ) !important;
}
/* One-screen full-page scene override */
body.emotion-flow-active {
  background: radial-gradient(circle at 10% 14%, color-mix(in srgb, var(--emotion-current-accent), transparent 70%), transparent 26%),
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--emotion-current), transparent 50%), transparent 42%),
    radial-gradient(circle at 86% 76%, rgba(8, 16, 34, 0.8), transparent 40%),
    linear-gradient(180deg, #111827 0%, #071126 46%, #020712 100%) !important;
}
body.emotion-flow-active main {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}
body.emotion-flow-active .radio-emotion-stage {
  display: grid !important;
  place-items: stretch !important;
  background: radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--emotion-current-accent), transparent 70%), transparent 24%),
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--emotion-current), transparent 48%), transparent 44%),
    radial-gradient(circle at 86% 76%, rgba(6, 14, 32, 0.78), transparent 38%),
    linear-gradient(180deg, rgba(255, 250, 242, 0.045), rgba(5, 10, 22, 0.82) 55%, rgba(1, 5, 13, 0.98)) !important;
}
body.emotion-flow-active .emotion-stage-count {
  order: 1;
  margin-bottom: clamp(8px, 1.4vh, 14px);
  font-size: clamp(12px, 1.3vw, 16px);
}
body.emotion-flow-active .emotion-stage-number {
  letter-spacing: 0;
}
body.emotion-flow-active .emotion-stage-chapter {
  order: 2;
}
body.emotion-flow-active .emotion-stage-title {
  order: 3;
}
body.emotion-flow-active .emotion-stage-note {
  order: 5;
}
body.emotion-flow-active .emotion-stage-line-wrap {
  order: 6;
}
body.emotion-flow-active .emotion-stage-bottom {
  gap: clamp(8px, 1.4vh, 14px) !important;
}
body.emotion-flow-active .site-footer,
body.emotion-flow-active .theme-toggle,
body.emotion-flow-active .bgm-control {
  display: none !important;
}
@keyframes emotionSceneTextFlow {
  0% {
    opacity: 0.24;
    filter: blur(18px);
    transform: translate(-50%, -50%) translateY(18px) scale(0.985);
  }
  45% {
    opacity: 0.52;
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}
@keyframes emotionSceneLightFlow {
  0% {
    opacity: 0.08;
    filter: blur(80px);
    transform: scale(0.82);
  }
  100% {
    opacity: var(--echo-opacity, 0.58);
    filter: blur(var(--echo-blur, 30px));
    transform: scale(var(--echo-scale, 1.16));
  }
}
@media (max-width: 760px) {
  body.emotion-flow-active .emotion-stage-title {
    font-size: clamp(34px, 10vw, 56px);
  }
  body.emotion-flow-active .emotion-stage-line-wrap {
    font-size: clamp(17px, 5vw, 24px);
  }
  body.emotion-flow-active .emotion-stage-note {
    display: block;
  }
}
.radio-emotion-stage[data-shape="ridge"],
.radio-emotion-stage[data-shape="rain"],
.radio-emotion-stage[data-shape="ice"],
.radio-emotion-stage[data-shape="tear"] {
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--emotion-current), transparent 58%), transparent 32%),
    radial-gradient(circle at 46% 52%, rgba(112, 232, 228, 0.055), transparent 38%),
    linear-gradient(180deg, #081326, #050a16 70%, #02050c) !important;
}
.echo-sad .emotion-stage-title,
.echo-vanish .emotion-stage-title {
  color: color-mix(in srgb, var(--emotion-current-accent), #dcecff 62%);
  text-shadow: 0 0 24px color-mix(in srgb, var(--emotion-current-accent), transparent 64%),
    0 0 64px rgba(94, 211, 218, 0.08);
}
.echo-sad .emotion-stage-line-wrap,
.echo-vanish .emotion-stage-line-wrap {
  color: rgba(222, 239, 255, 0.76);
}
.emotion-stage-cue {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  color: color-mix(in srgb, var(--emotion-current-accent), white 28%);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(34px, 6vw, 82px);
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 26px color-mix(in srgb, var(--emotion-current), transparent 34%),
    0 0 80px rgba(138, 232, 236, 0.14);
  transform: translate(-50%, -50%) scale(0.88);
  white-space: nowrap;
}
.emotion-stage-cue.is-flashing {
  animation: emotionCueRipple 1.05s ease-out both;
}
.emotion-afterglow {
  position: relative;
  border-radius: 999px;
}
.emotion-afterglow::before,
.emotion-afterglow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(620px, 82vw);
  height: 54px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.emotion-afterglow::before {
  border-top: 1px solid color-mix(in srgb, var(--emotion-current-accent), transparent 66%);
  border-bottom: 1px solid color-mix(in srgb, var(--emotion-current), transparent 78%);
  filter: blur(1px);
  opacity: 0.62;
}
.emotion-afterglow::after {
  width: min(520px, 74vw);
  height: 24px;
  background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--emotion-current-accent), transparent 28%) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--emotion-current), transparent 24%) 0 1px, transparent 3px),
    radial-gradient(circle at 78% 52%, color-mix(in srgb, var(--emotion-current-accent), transparent 36%) 0 2px, transparent 4px);
  filter: blur(0.8px);
  opacity: 0.42;
  animation: emotionParticlesFall var(--echo-duration, 3.2s) ease-in-out infinite;
}
.emotion-afterglow-bar {
  position: relative;
  z-index: 1;
  min-height: 5px;
  filter: blur(2px);
}
.echo-sad .emotion-afterglow-bar {
  filter: blur(4px);
  opacity: 0.44;
  transform-origin: center;
}
.echo-vanish .emotion-afterglow-bar {
  opacity: 0.14;
  filter: blur(7px);
}
.radio-emotion-stage.is-playing .emotion-light-dot {
  animation: emotionDotPulse var(--echo-duration, 3.2s) ease-in-out infinite;
  animation-delay: var(--dot-delay);
}
@keyframes emotionCueRipple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
    filter: blur(8px);
  }
  32% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28);
    filter: blur(14px);
  }
}
@keyframes emotionParticlesFall {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(-2px) scaleX(0.96);
    opacity: 0.18;
  }
  42% {
    transform: translate(-50%, -50%) translateY(3px) scaleX(1.08);
    opacity: 0.56;
  }
}
@keyframes emotionDotPulse {
  0%, 100% {
    opacity: 0.58;
  }
  50% {
    opacity: 1;
  }
}
.radio-emotion-stage::before,
.radio-emotion-stage::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.radio-emotion-stage::before {
  width: min(78vw, 980px);
  height: min(78vw, 980px);
  left: 50%;
  top: 46%;
  background: radial-gradient(circle, color-mix(in srgb, var(--emotion-current), transparent 54%), transparent 68%);
  filter: blur(18px);
  opacity: 0.7;
  transform: translate(-50%, -50%);
  animation: emotionRoomBreath var(--emotion-breath, 6s) ease-in-out infinite;
}
.radio-emotion-stage::after {
  width: min(56vw, 720px);
  height: min(56vw, 720px);
  right: -12vw;
  bottom: -18vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--emotion-current-accent), transparent 72%), transparent 70%);
  filter: blur(46px);
  opacity: 0.44;
  animation: emotionRoomDrift 12s ease-in-out infinite alternate;
}
.emotion-stage-count {
  color: rgba(255, 250, 242, 0.52);
  font-size: 13px;
  font-weight: 800;
}
.emotion-stage-number {
  color: #fffaf2;
  font-size: clamp(34px, 5vw, 78px);
  line-height: 0.9;
}
.emotion-stage-chapter,
.emotion-stage-note {
  margin: 0;
}
.emotion-stage-chapter {
  margin-top: 12px;
  color: color-mix(in srgb, var(--emotion-current-accent), white 10%);
  font-size: 13px;
  font-weight: 900;
}
.emotion-stage-title {
  margin: 10px 0 12px;
  color: #fffaf2;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0 0 32px color-mix(in srgb, var(--emotion-current), transparent 48%);
}
.emotion-stage-note {
  margin-top: 8px;
  color: rgba(255, 250, 242, 0.58);
  font-size: 14px;
  line-height: 1.7;
}
.emotion-stage-line-wrap {
  margin: 18px auto 0;
  max-width: 92%;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 250, 242, 0.84);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.55;
}
.emotion-afterglow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: min(560px, 76vw);
  height: 62px;
  opacity: 0.74;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--emotion-current), transparent 52%));
}
.emotion-afterglow-bar {
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--emotion-current-accent), var(--emotion-current));
  opacity: 0.7;
  transform-origin: center;
}
.radio-emotion-stage.is-playing .emotion-afterglow-bar {
  animation: emotionBarBreath var(--echo-duration, 3.2s) ease-in-out infinite alternate;
  animation-delay: var(--bar-delay);
}
.emotion-stage-bottom {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(720px, 92vw);
}
.emotion-spectrum {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
}
.emotion-spectrum::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, #ffb8d2, #ffd55f, #7892a6, #0f1d33, #ffd057);
  opacity: 0.34;
}
.emotion-light-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  color: transparent;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.8), transparent 28%),
    var(--dot-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--dot-color), transparent 32%);
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease, opacity 0.24s ease;
}
.emotion-light-dot span {
  display: none;
}
.emotion-light-dot:hover,
.emotion-light-dot:focus-visible,
.emotion-light-dot.active {
  transform: scale(1.7);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--dot-color), transparent 82%),
    0 0 32px color-mix(in srgb, var(--dot-color), transparent 18%);
}
.emotion-stage-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.emotion-control {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 250, 242, 0.86);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 46px rgba(2, 6, 16, 0.22);
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.emotion-stage-play {
  width: 64px;
  height: 64px;
  color: #172135;
  background: linear-gradient(135deg, var(--emotion-current-accent), var(--emotion-current));
  box-shadow: 0 18px 52px color-mix(in srgb, var(--emotion-current), transparent 54%);
}
.emotion-control:hover,
.emotion-control:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--emotion-current-accent), transparent 42%);
}
@keyframes emotionRoomBreath {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0.58;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 0.82;
  }
}
@keyframes emotionRoomDrift {
  from {
    transform: translate3d(-2%, 2%, 0) scale(0.96);
  }
  to {
    transform: translate3d(4%, -3%, 0) scale(1.06);
  }
}
@keyframes emotionGlassFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.012);
  }
}
@keyframes emotionAfterglow {
  0%, 100% {
    transform: scale(0.92);
    opacity: calc(var(--echo-opacity, 0.58) * 0.72);
  }
  50% {
    transform: scale(var(--echo-scale, 1.16));
    opacity: var(--echo-opacity, 0.58);
  }
}
@keyframes emotionRingBreath {
  0%, 100% {
    transform: scale(0.94);
    opacity: 0.28;
  }
  50% {
    transform: scale(var(--echo-scale, 1.16));
    opacity: 0.62;
  }
}
@keyframes emotionRingContract {
  0%, 100% {
    transform: scale(1.08);
    opacity: 0.4;
  }
  50% {
    transform: scale(var(--echo-scale, 0.82));
    opacity: var(--echo-opacity, 0.36);
  }
}
@keyframes emotionAlmostGone {
  0%, 100% {
    transform: scale(0.72);
    opacity: 0.16;
  }
  50% {
    transform: scale(0.54);
    opacity: 0.06;
  }
}
@keyframes emotionBarBreath {
  from {
    transform: scaleY(0.42);
    opacity: 0.34;
  }
  to {
    transform: scaleY(1.05);
    opacity: 0.82;
  }
}
@media (max-width: 760px) {
  .radio-emotion-stage {
    padding: 14px 10px 24px !important;
  }
  .emotion-stage-note {
    display: none;
  }
  .emotion-stage-line-wrap {
    max-width: 100%;
    margin-top: 12px;
    font-size: 15px;
  }
  .emotion-afterglow {
    width: 88vw;
    height: 48px;
    gap: 3px;
  }
  .emotion-afterglow-bar {
    width: 4px;
  }
  .emotion-light-dot {
    width: 10px;
    height: 10px;
  }
  .emotion-control {
    width: 44px;
    height: 44px;
  }
  .emotion-stage-play {
    width: 58px;
    height: 58px;
  }
}
.audio-gallery-section .section-heading {
  max-width: 860px;
  margin: 0 auto 36px;
  text-align: center;
}
.audio-gallery-section .section-heading h2 {
  display: block;
  margin: 0 0 12px;
  color: #fffaf2;
  font-size: clamp(36px, 4.2vw, 64px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
  text-shadow: 0 24px 60px rgba(8, 10, 18, 0.28),
    0 0 28px rgba(232, 185, 102, 0.18);
}
.audio-filters {
  display: grid;
  gap: 22px;
  margin: 38px auto 42px;
  max-width: min(1500px, 94vw);
}
.audio-filters .filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.audio-filters .filter-btn {
  min-width: 96px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 250, 242, 0.86);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06)),
    rgba(25, 30, 50, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.audio-filters .filter-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.24);
}
.audio-filters .filter-btn.active {
  color: #fff;
  border-color: rgba(115, 205, 255, 0.5);
  background: linear-gradient(135deg, #58c2ff, #4e9df0);
  box-shadow: 0 18px 48px rgba(74, 144, 226, 0.24);
}
.audio-filters .emotion-flow-toggle {
  min-width: 118px;
}
.audio-filters .emotion-flow-toggle.active {
  color: #1b2537;
  border-color: rgba(255, 216, 126, 0.62);
  background: radial-gradient(circle at 32% 22%, rgba(255, 247, 215, 0.96), transparent 36%),
    linear-gradient(135deg, #ffd057, #7fc7ff 82%);
  box-shadow: 0 22px 58px rgba(255, 208, 87, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.26) inset;
}
.audio-cards-container {
  display: grid;
  gap: 24px;
  margin: 0 auto;
}
.emotion-flow-experience {
  --emotion-current: #e8b7c5;
  --emotion-current-accent: #fff7ee;
  overflow: hidden;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 247, 238, 0.12), rgba(9, 14, 28, 0.18)),
    rgba(16, 20, 36, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 36px 110px rgba(5, 9, 20, 0.34);
  isolation: isolate;
}
.flow-glow {
  animation: emotionGlowDrift 16s ease-in-out infinite alternate;
}
.flow-glow-warm {
  left: -10vw;
  background: #ffd057;
}
.flow-glow-cold {
  right: -14vw;
  background: #183c6d;
  animation-delay: -7s;
}
.flow-sea-line {
  top: 55%;
  box-shadow: 0 0 34px rgba(216, 220, 231, 0.3);
}
.emotion-flow-card {
  --emotion-color: #e8b7c5;
  --emotion-accent: #fff7ee;
  cursor: pointer;
}
.emotion-flow-card:hover,
.emotion-flow-card:focus-within {
  transform: translateY(calc(var(--emotion-y) - 8px)) scale(calc(var(--emotion-size) + 0.018));
  border-color: color-mix(in srgb, var(--emotion-accent), transparent 28%);
  filter: saturate(1.08);
}
.emotion-flow-card.is-current {
  outline: 2px solid color-mix(in srgb, var(--emotion-accent), white 18%);
  outline-offset: 7px;
}
.emotion-flow-card h3 {
  margin: 0 0 14px;
  color: #fffaf2;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(25px, 2.1vw, 34px);
  line-height: 1.14;
}
.emotion-flow-card.chapter-daylight h3 {
  font-family: "Noto Serif SC", "LXGW WenKai", "Songti SC", serif;
}
.emotion-card-play {
  flex: 0 0 auto;
  place-items: center;
}
.emotion-modal .audio-modal-overlay {
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--emotion-current), transparent 42%), transparent 42%),
    rgba(5, 9, 18, 0.78);
}
.emotion-modal .audio-waveform .waveform-bar,
.emotion-modal .audio-progress-bar .progress-fill,
.emotion-flow-active .audio-waveform .waveform-bar,
.emotion-flow-active .audio-progress-bar .progress-fill {
  background: linear-gradient(180deg, var(--emotion-current-accent), var(--emotion-current));
}
.emotion-modal-lines {
  display: block;
}
.emotion-modal-lines {
  color: rgba(255, 250, 242, 0.88);
}
.emotion-flow-petals::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background-image: radial-gradient(ellipse at center, rgba(255, 232, 209, 0.74) 0 32%, transparent 34%),
    radial-gradient(ellipse at center, rgba(255, 208, 180, 0.58) 0 30%, transparent 32%);
  background-size: 48px 80px, 64px 96px;
  animation: emotionPetals 9s linear infinite;
  opacity: 0.18;
}
.audio-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)),
    rgba(25, 30, 50, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 26px 70px rgba(8, 10, 18, 0.28);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.audio-card:hover {
  transform: translateY(-10px) scale(1.012);
  border-color: rgba(232, 185, 102, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 34px 88px rgba(8, 10, 18, 0.34);
  filter: saturate(1.05);
}
.audio-card.is-locating {
  animation: audioCardLocatePulse 1.4s ease-out 1;
  outline: 3px solid rgba(88, 194, 255, 0.72) !important;
  outline-offset: 8px !important;
}
@keyframes audioCardLocatePulse {
  0% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 0 0 rgba(88, 194, 255, 0.46),
      0 26px 70px rgba(8, 10, 18, 0.28);
  }
  45% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 0 0 10px rgba(88, 194, 255, 0.2),
      0 30px 82px rgba(8, 10, 18, 0.32);
  }
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 0 18px rgba(88, 194, 255, 0),
      0 26px 70px rgba(8, 10, 18, 0.28);
  }
}
.audio-card-header {
  display: flex;
  color: rgba(255, 250, 242, 0.76);
  font-weight: 800;
}
.audio-title {
  margin: 0 0 10px;
  color: #fffaf2;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  font-weight: 700;
}
.audio-card-meta {
  margin: 0 0 10px;
  color: rgba(255, 250, 242, 0.72);
  line-height: 1.6;
}
.audio-card-meta {
  max-width: 92%;
  font-size: 13px;
}
.audio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.audio-tag {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
.audio-play-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #e8b966, #d996a6);
  box-shadow: 0 18px 42px rgba(217, 150, 166, 0.28);
  cursor: pointer;
}
.audio-play-btn:hover,
.audio-play-btn:focus-visible {
  filter: brightness(1.04);
}
.audio-empty-state {
  grid-column: 1 / -1;
  padding: 52px 24px;
  text-align: center;
  color: rgba(255, 250, 242, 0.72);
}
.audio-player-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.audio-player-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.audio-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 18, 0.72);
  backdrop-filter: blur(18px);
}
.audio-modal-content {
  position: relative;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(24, 28, 46, 0.92);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42);
}
.audio-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.audio-modal-header {
  margin-bottom: 26px;
  text-align: center;
}
.audio-modal-header h3 {
  margin: 0 0 8px;
  color: #fffaf2;
  font-size: 30px;
}
.audio-modal-header p,
.audio-modal-info {
  color: rgba(255, 250, 242, 0.74);
}
.audio-modal-status {
  color: rgba(255, 250, 242, 0.72);
  font-size: 14px;
  line-height: 1.7;
}
.audio-modal-status {
  margin-top: 8px;
  font-weight: 800;
}
.audio-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 74px;
  margin-bottom: 22px;
}
.audio-waveform .waveform-bar {
  width: 6px;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, #58c2ff, #e8b966);
}
.audio-waveform.playing .waveform-bar {
  animation: voicePulse 0.85s ease-in-out infinite alternate;
}
.audio-waveform.playing .waveform-bar:nth-child(2n) {
  animation-delay: 0.14s;
}
.audio-waveform.playing .waveform-bar:nth-child(3n) {
  animation-delay: 0.26s;
}
.audio-progress-container {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.audio-time {
  color: rgba(255, 250, 242, 0.7);
  font-size: 13px;
}
.audio-progress-bar {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}
.audio-progress-bar:focus-visible {
  outline: 2px solid rgba(88, 194, 255, 0.72);
  outline-offset: 6px;
}
.audio-progress-bar .progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #58c2ff, #e8b966);
}
.audio-progress-bar .progress-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fffaf2;
  transform: translate(-50%, -50%);
}
.audio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.audio-controls .control-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.audio-controls .control-btn.play-btn {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #58c2ff, #e8b966);
}
.audio-controls .control-btn.active {
  color: #1a2034;
  background: #e8b966;
}
.info-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.audio-modal-info .info-row:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.audio-modal-info .info-row:last-child #modalDescription {
  margin: 0 !important;
  display: inline !important;
  flex: 1;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.audio-modal-info .highlightable-text {
  display: block;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 12px;
}
.info-label {
  color: rgba(232, 185, 102, 0.9);
  font-weight: 800;
}
@keyframes voicePulse {
  from {
    height: 26%;
  }
  to {
    height: 86%;
  }
}
@keyframes breatheIntense {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.95) translate(0, 0);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.12) translate(2%, 2%);
  }
}
@keyframes breatheWarm {
  0%, 100% {
    transform: scale(1) translateX(0);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.15) translateX(-3%);
    opacity: 0.6;
  }
}
@keyframes breatheCold {
  0%, 100% {
    transform: scale(1) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: scale(0.9) translateX(3%);
    opacity: 0.5;
  }
}
@keyframes seaLinePulse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.5;
    transform: scaleX(1.1);
  }
}
@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--emotion-color),
      0 0 40px var(--emotion-color),
      0 0 60px var(--emotion-color);
  }
  50% {
    box-shadow: 0 0 30px var(--emotion-color),
      0 0 60px var(--emotion-color),
      0 0 90px var(--emotion-color);
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.emotion-flow-active {
  --emotion-current: #e8b7c5;
  --emotion-current-accent: #fff7ee;
  --emotion-breath: 6s;
}
.emotion-flow-stage {
  max-width: min(1600px, 90vw);
  padding: 24px 0 48px;
}
.emotion-flow-experience {
  position: relative;
  min-height: 100vh;
}
.flow-glow {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  transition: all 2s ease;
}
.emotion-flow-active .flow-glow {
  opacity: 0.35;
}
.emotion-flow-playing .flow-glow-warm {
  animation: breatheWarm var(--emotion-breath, 6s) ease-in-out infinite;
}
.flow-glow-warm {
  top: -200px;
  right: -200px;
  transition: opacity 1.5s ease, width 1.5s ease, height 1.5s ease, background 1.5s ease;
}
.emotion-flow-playing .flow-glow-cold {
  animation: breatheCold calc(var(--emotion-breath, 6s) * 1.2) ease-in-out infinite;
}
.flow-glow-cold {
  bottom: -200px;
  left: -200px;
  transition: opacity 1.5s ease, width 1.5s ease, height 1.5s ease;
}
.emotion-flow-playing .flow-sea-line {
  animation: seaLinePulse 4s ease-in-out infinite;
}
.flow-sea-line {
  position: absolute;
  bottom: 30%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(119, 136, 153, 0.3), transparent);
  opacity: 0;
  transition: opacity 1.5s ease;
}
.emotion-flow-active .flow-sea-line {
  opacity: 1;
}
@keyframes bufferFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(20px) scale(0);
  }
  20% {
    opacity: 0.6;
    transform: translateY(0) scale(1);
  }
  80% {
    opacity: 0.6;
    transform: translateY(-20px) scale(1);
  }
}
.emotion-buffer-particle:nth-child(1) {
  left: 20%;
  animation-delay: 0s;
}
.emotion-buffer-particle:nth-child(2) {
  left: 35%;
  animation-delay: 0.5s;
}
.emotion-buffer-particle:nth-child(3) {
  left: 50%;
  animation-delay: 1s;
}
.emotion-buffer-particle:nth-child(4) {
  left: 65%;
  animation-delay: 1.5s;
}
.emotion-buffer-particle:nth-child(5) {
  left: 80%;
  animation-delay: 2s;
}
.single-track-mode {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  background: var(--emotion-current, rgba(20, 25, 42, 0.98));
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.single-track-mode.active {
  display: flex;
}
.single-track-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    var(--emotion-current-accent, rgba(232, 185, 102, 0.1)) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.single-track-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  position: relative;
  z-index: 1;
}
.single-track-header {
  text-align: center;
  margin-bottom: 32px;
}
.single-track-chapter {
  font-size: 11px;
  font-weight: 700;
  color: rgba(232, 185, 102, 0.7);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.single-track-title {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  color: rgba(255, 250, 242, 0.95);
  line-height: 1.2;
  margin-bottom: 16px;
}
.single-track-line {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 250, 242, 0.6);
  letter-spacing: 0.05em;
}
.single-track-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.single-track-waveform {
  width: 100%;
  max-width: 500px;
  height: 60px;
}
.single-track-controls {
  display: flex;
  align-items: center;
  gap: 24px;
}
.single-track-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 250, 242, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.single-track-btn:hover {
  border-color: rgba(232, 185, 102, 0.5);
  background: rgba(232, 185, 102, 0.1);
  transform: scale(1.05);
}
.single-track-btn.main {
  width: 72px;
  height: 72px;
  border-color: rgba(232, 185, 102, 0.4);
  background: rgba(232, 185, 102, 0.15);
}
.single-track-btn.main:hover {
  background: rgba(232, 185, 102, 0.25);
}
.single-track-timeline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 250, 242, 0.5);
}
.single-track-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
}
.single-track-progress-fill {
  height: 100%;
  background: var(--emotion-current, rgba(232, 185, 102, 0.8));
  border-radius: 999px;
  transition: width 0.1s linear;
}
.single-track-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 250, 242, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.single-track-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}
.single-track-thumbs {
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow-x: auto;
  overflow-y: hidden;
}
.single-track-thumbs-list {
  display: flex;
  gap: 12px;
  padding: 4px 0;
}
.single-track-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}
.single-track-thumb:hover {
  border-color: rgba(232, 185, 102, 0.4);
  background: rgba(232, 185, 102, 0.1);
}
.single-track-thumb.active {
  border-color: var(--emotion-current, rgba(232, 185, 102, 0.8));
  box-shadow: 0 0 20px rgba(232, 185, 102, 0.3);
}
.single-track-thumb-number {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 250, 242, 0.7);
}
.single-track-thumb.active .single-track-thumb-number {
  color: rgba(232, 185, 102, 0.9);
}
.single-track-thumb-playing::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  background: radial-gradient(circle at center, var(--emotion-current, rgba(232, 185, 102, 0.4)), transparent);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .single-track-content {
    padding: 40px 16px;
  }
  .single-track-title {
    font-size: clamp(24px, 7vw, 36px);
  }
  .single-track-line {
    font-size: clamp(16px, 4vw, 20px);
  }
  .single-track-controls {
    gap: 16px;
  }
  .single-track-btn {
    width: 48px;
    height: 48px;
  }
  .single-track-btn.main {
    width: 64px;
    height: 64px;
  }
  .single-track-thumb {
    width: 56px;
    height: 56px;
  }
}
.emotion-flow-card {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(25, 30, 50, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 20px 60px rgba(8, 10, 18, 0.3);
  transform: scale(var(--emotion-size, 1)) translateY(var(--emotion-y, 0));
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: fadeInUp 0.6s ease-out forwards;
  padding: var(--emotion-padding, 24px);
}
.emotion-flow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}
.emotion-flow-card:hover {
  transform: scale(calc(var(--emotion-size, 1) * 1.02)) translateY(-8px);
  border-color: rgba(232, 185, 102, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 30px 80px rgba(8, 10, 18, 0.4),
    0 0 40px rgba(232, 185, 102, 0.1);
}
.emotion-flow-card.is-current {
  border-color: rgba(88, 194, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 24px 70px rgba(8, 10, 18, 0.35),
    0 0 50px rgba(88, 194, 255, 0.2);
}
.emotion-flow-card.is-playing {
  animation: cardFloat var(--emotion-breath, 6s) ease-in-out infinite;
}
.emotion-flow-card.is-playing::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--emotion-color), 
    transparent);
  opacity: 0.4;
  animation: glowPulse var(--emotion-breath, 6s) ease-in-out infinite;
  pointer-events: none;
}
.emotion-card-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emotion-color, #e8b966), var(--emotion-accent, #d996a6));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}
.emotion-card-play:hover {
  transform: scale(1.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}
.emotion-card-play i {
  font-size: 18px;
  margin-left: 3px;
}
.emotion-card-play.playing i {
  margin-left: 0;
}
.emotion-modal .audio-modal-content {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(24, 28, 46, 0.95);
  border-color: rgba(232, 185, 102, 0.2);
}
.emotion-modal .audio-modal-header h3 {
  background: linear-gradient(135deg, var(--emotion-current), var(--emotion-current-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.emotion-modal .waveform-bar {
  background: linear-gradient(180deg, var(--emotion-current), var(--emotion-current-accent));
}
.emotion-modal .progress-fill {
  background: linear-gradient(90deg, var(--emotion-current), var(--emotion-current-accent));
}
.emotion-modal .emotion-modal-lines {
  display: block;
  font-size: 14px;
  color: rgba(255, 250, 242, 0.65);
  line-height: 1.7;
  white-space: pre-wrap;
}
.emotion-flow-card.chapter-daylight {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)),
    rgba(25, 30, 50, 0.35);
}
.emotion-flow-card.chapter-mist {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 20, 35, 0.5);
}
.emotion-flow-card.chapter-dawn {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(20, 25, 40, 0.4);
}
.emotion-flow-card.reveal {
  opacity: 0;
  transform: translateY(40px);
}
.emotion-flow-card.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 760px) {
  .audio-filters .filter-btn {
    min-width: auto;
    min-height: 46px;
    padding: 0 18px;
  }
  .emotion-flow-card {
    min-height: 200px;
  }
  .emotion-card-play {
    width: 44px;
    height: 44px;
  }
}
/* Emotion Flow: center-stage radio experience override */
.audio-cards-container.emotion-flow-stage {
  display: block !important;
}
.radio-emotion-stage {
  --emotion-current: #e8b7c5;
  --emotion-current-accent: #fff7ee;
  overflow: hidden !important;
  scroll-margin-top: 118px;
}
.radio-orbit {
  position: relative;
  width: min(590px, 58vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.radio-frequency {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(34px, 3.6vw, 48px);
  height: clamp(34px, 3.6vw, 48px);
  border: 1px solid color-mix(in srgb, var(--freq-color), white 22%);
  border-radius: 50%;
  color: rgba(255, 250, 242, 0.78);
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.46), transparent 30%),
    color-mix(in srgb, var(--freq-color), rgba(9, 14, 28, 0.72) 42%);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--freq-color), transparent 70%);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  pointer-events: auto;
  z-index: 5;
  transform: translate(-50%, -50%)
    rotate(var(--freq-angle))
    translateX(var(--freq-radius))
    rotate(calc(var(--freq-angle) * -1));
  transition: filter 0.26s ease, box-shadow 0.26s ease;
}
.radio-frequency:hover,
.radio-frequency:focus-visible,
.radio-frequency.active {
  color: #162033;
  filter: brightness(1.14) saturate(1.12);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--freq-color), transparent 56%),
    0 0 0 8px color-mix(in srgb, var(--freq-color), transparent 84%);
}
.radio-frequency.active {
  background: linear-gradient(135deg, var(--emotion-current-accent), var(--emotion-current));
}
.radio-orbit-number {
  color: #fffaf2;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.9;
}
.radio-stage-chapter {
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--emotion-current-accent), white 10%);
  font-size: 13px;
  font-weight: 900;
}
.radio-stage-title {
  margin: 0 0 12px;
  color: #fffaf2;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.08;
}
.radio-stage-summary {
  margin: 0 0 8px;
  color: rgba(255, 250, 242, 0.82);
  font-weight: 900;
  line-height: 1.55;
}
.radio-stage-note {
  margin: 0;
  color: rgba(255, 250, 242, 0.64);
  font-size: 14px;
  line-height: 1.7;
}
.radio-wave-bar {
  width: 6px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--emotion-current-accent), var(--emotion-current));
  opacity: 0.86;
  transform-origin: center;
}
.radio-emotion-stage.is-playing .radio-wave-bar {
  animation: radioWavePulse 0.9s ease-in-out infinite alternate;
  animation-delay: var(--bar-delay);
}
.radio-play-main {
  width: 66px;
  height: 66px;
  color: #172135;
  background: linear-gradient(135deg, var(--emotion-current-accent), var(--emotion-current));
  box-shadow: 0 18px 46px color-mix(in srgb, var(--emotion-current), transparent 62%);
}
.radio-compass {
  display: grid;
  gap: 14px;
  align-self: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: rgba(9, 14, 28, 0.64);
  box-shadow: 0 24px 80px rgba(3, 7, 18, 0.34);
  backdrop-filter: blur(18px);
}
.radio-compass button {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  color: rgba(255, 250, 242, 0.86);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}
.radio-compass button:hover,
.radio-compass button:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}
.radio-compass button i {
  color: var(--emotion-current-accent);
}
.radio-compass small {
  color: rgba(255, 250, 242, 0.56);
  font-size: 11px;
}
.radio-compass-hint {
  margin: 4px 2px 0;
  color: rgba(255, 250, 242, 0.62);
  font-size: 12px;
  line-height: 1.7;
}
.emotion-flow-active .audio-gallery-section {
  padding-top: clamp(70px, 8vw, 108px);
}
.emotion-flow-active .audio-gallery-section .section-heading {
  margin-bottom: 16px;
}
.emotion-flow-active .audio-gallery-section .section-heading h2 {
  font-size: clamp(34px, 3.6vw, 54px);
}
.emotion-flow-active .audio-filters {
  margin-top: 22px;
  margin-bottom: 24px;
}
@keyframes radioDiscBreath {
  0%, 100% {
    transform: scale(0.985);
    filter: saturate(0.96);
  }
  50% {
    transform: scale(1.018);
    filter: saturate(1.12);
  }
}
@keyframes radioOnAir {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--emotion-current-accent), transparent 62%);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--emotion-current-accent), transparent 90%);
  }
}
@keyframes radioWavePulse {
  from {
    transform: scaleY(0.42);
    opacity: 0.52;
  }
  to {
    transform: scaleY(1.08);
    opacity: 1;
  }
}
@media (max-width: 980px) {
  .radio-compass {
    grid-template-columns: repeat(3, 1fr);
  }
  .radio-compass-hint {
    grid-column: 1 / -1;
    text-align: center;
  }
  .radio-orbit {
    width: min(720px, 86vw);
  }
}
@media (max-width: 680px) {
  .radio-emotion-stage {
    padding: 22px 14px !important;
    scroll-margin-top: 96px;
  }
  .radio-orbit {
    width: min(520px, 92vw);
  }
  .radio-frequency {
    width: 32px;
    height: 32px;
    font-size: 10px;
  }
  .radio-stage-note,
  .radio-stage-summary {
    display: none;
  }
  .radio-wave-bar {
    width: 4px;
  }
  .radio-compass {
    grid-template-columns: 1fr;
  }
}
/* Final placement guard for the breathing emotion space. */
.emotion-flow-active .site-header,
.emotion-flow-active .section-heading,
.emotion-flow-active .audio-filters {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-18px) !important;
}
.emotion-flow-active .audio-gallery-section {
  min-height: 100vh !important;
  padding: clamp(18px, 3vw, 38px) 0 clamp(22px, 4vw, 52px) !important;
}
.audio-cards-container.emotion-flow-stage {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.radio-emotion-stage {
  min-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(18px, 3vw, 44px) clamp(16px, 3vw, 52px) !important;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--emotion-current), transparent 44%), transparent 30%),
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--emotion-current-accent), transparent 72%), transparent 24%),
    radial-gradient(circle at 82% 74%, rgba(15, 29, 51, 0.58), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 242, 0.08), rgba(6, 10, 22, 0.78) 52%, rgba(2, 6, 14, 0.94)) !important;
  box-shadow: none !important;
}
/* Emotion Flow V2 absolute final override.
   This intentionally lives after the older radio-stage rules. */
body.emotion-flow-active,
body.emotion-flow-active main {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--emotion-depth, #071126) !important;
}
body.emotion-flow-active::before,
body.emotion-flow-active::after,
body.emotion-flow-active main::before,
body.emotion-flow-active main::after,
body.emotion-flow-active .audio-cards-container.emotion-flow-stage::before,
body.emotion-flow-active .audio-cards-container.emotion-flow-stage::after,
body.emotion-flow-active .radio-emotion-stage::before,
body.emotion-flow-active .radio-emotion-stage::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
body.emotion-flow-active .site-header,
body.emotion-flow-active .section-heading,
body.emotion-flow-active .audio-filters,
body.emotion-flow-active .topology-toggle,
body.emotion-flow-active .theme-toggle,
body.emotion-flow-active #particleCanvas,
body.emotion-flow-active .cursor-aura,
body.emotion-flow-active .ambient,
body.emotion-flow-active .bgm-control,
body.emotion-flow-active .site-footer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
}
body.emotion-flow-active .audio-gallery-section {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  isolation: isolate !important;
}
body.emotion-flow-active .audio-gallery-section::after {
  mix-blend-mode: screen;
}
body.emotion-flow-active .audio-cards-container.emotion-flow-stage,
body.emotion-flow-active .radio-emotion-stage {
  position: relative !important;
  z-index: 1 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.audio-list-toolbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(1500px, 94vw);
  margin: -14px auto 22px;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(25, 30, 50, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.audio-list-toolbar.is-hidden {
  display: none;
}

.audio-list-count {
  margin: 0;
  color: rgba(255, 250, 242, 0.72);
  font-size: 13px;
  font-weight: 800;
}

.audio-list-actions {
  display: inline-flex;
  gap: 8px;
}

.audio-list-actions button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 250, 242, 0.86);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.audio-list-actions button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  body.page-audio {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  body.page-audio .audio-gallery-section {
    padding-top: 92px;
  }

  body.page-audio .audio-filters {
    position: sticky;
    top: 78px;
    z-index: 42;
    width: min(100%, 94vw);
    margin: 24px auto 18px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(8, 12, 24, 0.72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
  }

  body.page-audio .audio-filters .filter-group {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  body.page-audio .audio-filters .filter-group::-webkit-scrollbar {
    display: none;
  }

  body.page-audio .audio-filters .filter-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
  }

  body.page-audio .audio-list-toolbar {
    position: sticky;
    top: 140px;
    z-index: 39;
    display: flex;
    width: min(100%, 94vw);
    margin: 0 auto 16px;
    background: rgba(12, 16, 30, 0.68);
    backdrop-filter: blur(14px);
  }

  body.page-audio .audio-cards-container {
    gap: 18px;
  }
}

/**
 * 灯箱画廊优化样式文件
 * 
 * @file gallery-lightbox.css
 * @description 提供灯箱效果、画廊展示、社交卡片、个人资料等组件的优化样式
 * @author JZY Twins City Team
 * @created 2026-06-02
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 * 
 * @overview
 * 本文件包含以下核心模块：
 * 1. 灯箱组件样式（全屏图片展示）
 * 2. 滚动揭示动画效果
 * 3. 响应式媒体查询（移动端适配）
 * 4. 个人资料卡片与徽章布局
 * 5. 社交卡片与社交标签
 * 6. 作品展示与统计数据
 * 7. 画廊时间线与图片网格
 * 8. 视觉效果优化（光晕、阴影）
 */
/* ============ 灯箱组件样式 ============ */
/* 
 * 全屏图片查看器 - 支持键盘导航和手势操作
 * 采用多层背景叠加实现深度感：
 *   1. 基础半透明深色背景
 *   2. 径向渐变营造中心光晕效果
 *   3. backdrop-filter实现毛玻璃模糊
 *   4. inset阴影增强边缘暗化效果
 */
.lightbox {
  place-items: center;
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.15),
    inset 0 0 300px rgba(135, 206, 250, 0.03);
}

@media (max-width: 760px), (pointer: coarse) {
  #cameraParticleButton,
  #cameraGestureText,
  #gestureHints,
  #particleShapeControls,
  #particleBurstButton,
  #imageParticleCanvas,
  #particleCameraVideo {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
.lightbox.open {
  display: grid;
}
.lightbox img {
  max-width: min(900px, 92vw);
  max-height: 78vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}
.lightbox button {
  position: fixed;
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 30px;
  cursor: pointer;
}
#lightboxCaption {
  margin: 18px 0 0;
  color: rgba(255,255,255,0.78);
}
/* 
 * 滚动揭示动画效果
 * 初始状态：透明度为0，向下偏移24px
 * 当添加.visible类时：平滑过渡到完全可见状态
 * 使用ease缓动函数实现自然的动画效果
 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 
 * 3D倾斜卡片效果
 * preserve-3d 启用3D空间，配合JavaScript实现鼠标跟随的3D翻转效果
 * 短过渡时间(0.18s)实现快速响应的交互体验
 */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.18s ease;
}
/* ============ 响应式媒体查询 - 平板设备 (920px以下) ============ */
/* 
 * 适配策略：
 * 1. 导航切换为移动端抽屉菜单
 * 2. 所有多列网格布局切换为单列
 * 3. 卡片宽度调整为100%
 */
@media (max-width: 920px) {
  .nav-toggle {
    display: inline-flex;
  }
  /* 移动端导航抽屉 - 毛玻璃效果下拉菜单 */
  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(18, 21, 34, 0.86);
    backdrop-filter: blur(22px);
  }
  .site-nav.open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 所有多列布局切换为单列 */
  .hero,
  .split,
  .music-player,
  .profile-section {
    grid-template-columns: 1fr;
  }
  .card-grid,
  .video-grid,
  .reference-grid {
    grid-template-columns: 1fr;
  }
  .profile-section {
    gap: 84px;
  }
  .profile-stage {
    min-height: 450px;
  }
  .profile-badges span,
  .profile-badges span.wide {
    grid-column: auto;
  }
  #topologyCanvas {
    inset: 86px auto auto 50%;
    width: 110%;
    height: 64vh;
    transform: translateX(-50%);
    opacity: 0.42;
  }
  .site-search-inline {
    width: min(500px, 48vw);
    min-width: 310px;
  }
  .site-search-inline input {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .site-header {
    top: 10px;
    width: calc(100% - 20px);
  }
  .site-search-inline {
    width: 100%;
    min-width: 0;
  }
  .site-search-inline input {
    width: 100%;
  }
  .site-search-inline button {
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .section {
    width: min(100% - 24px, 1180px);
    padding: 72px 0;
  }
  .hero {
    padding-top: 110px;
  }
  h1 {
    font-size: 44px;
    line-height: 1.16;
  }
  .hero-title-en {
    margin-top: 8px;
    line-height: 1.4;
  }
  .hero .lead,
  .section-heading p,
  .profile-text-card p,
  .social-card p {
    font-size: 15.5px;
    line-height: 1.9;
  }
  .profile-text-card,
  .social-card,
  .work-card {
    padding: 22px;
  }
  .profile-copy h2 {
    font-size: 40px;
  }
  .profile-name {
    gap: 8px;
    font-size: 40px;
  }
  .profile-name span {
    font-size: 19px;
  }
  .profile-role {
    font-size: 17px;
    line-height: 1.85;
  }
  .profile-badges {
    gap: 12px;
  }
  .profile-badges span,
  .profile-badges span.wide {
    min-height: 70px;
    padding: 13px 15px;
  }
  .profile-badges strong {
    font-size: 17px;
  }
  .profile-badges em {
    font-size: 17px;
  }
  .profile-text-card p {
    font-size: 16.5px;
    line-height: 2;
  }
  .social-card h3,
  .work-card h3 {
    font-size: 23px;
  }
  .work-card {
    margin-left: 36px;
  }
  .work-card::before {
    left: -31px;
  }
  #quoteText {
    font-size: 21px;
  }
  .social-card h3 {
    max-width: calc(100% - 70px);
  }
}
/* ============ 个人资料弹出层样式 ============ */
/* 
 * 弹出层遮罩 - 多层径向渐变营造粉色光晕氛围
 * 三层渐变叠加实现深度感：
 *   1. 内层粉色高光 (52%透明度)
 *   2. 中层粉色扩散 (38%透明度)
 *   3. 基础深色背景 (54%透明度)
 */
.profile-pop-layer {
  pointer-events: auto;
}
.profile-pop-layer::before {
  opacity: 1;
  animation: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,203,213,0.52), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(217,166,174,0.38), transparent 48%),
    rgba(8, 10, 18, 0.54);
}
/* 
 * 弹出卡片 - 多层阴影营造发光效果
 * 阴影层级设计：
 *   1. 底层深色投影 (0 42px 150px)
 *   2. 粉色外发光 (0 0 170px)
 *   3. 粉色内发光 (0 0 78px)
 *   4. 白色内阴影 (inset 0 0 38px)
 */
.profile-pop-card {
  width: min(720px, 90vw);
  border-radius: 24px;
  box-shadow: 0 42px 150px rgba(0,0,0,0.54),
    0 0 170px rgba(255,203,213,0.82),
    0 0 78px rgba(217,166,174,0.68),
    0 0 38px rgba(255,255,255,0.18) inset;
}
.profile-pop-card img {
  border-radius: 24px;
}
.profile-pop-close {
  position: fixed;
  top: calc(50% - min(650px, 112.5vw) / 2 - 20px);
  right: calc(50% - min(520px, 90vw) / 2 - 20px);
  z-index: 82;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: rgba(8, 10, 18, 0.6);
  color: rgba(255,255,255,0.9);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-pop-layer.active .profile-pop-close {
  opacity: 1;
}
.profile-pop-close:hover {
  transform: rotate(90deg) scale(1.1);
  background: rgba(232, 185, 104, 0.25);
  border-color: rgba(232, 185, 104, 0.6);
}
.profile-pop-card.pop-return {
  animation: profilePopReturnLarge 0.72s cubic-bezier(.42,0,.2,1) forwards;
}
@keyframes profilePopReturnLarge {
  0% {
    left: calc(50% - min(720px, 90vw) / 2);
    top: calc(50% - min(900px, 112.5vw) / 2);
    width: min(720px, 90vw);
    transform: scale(1) rotateX(0deg) translateZ(96px);
    opacity: 1;
  }
  100% {
    left: var(--origin-left);
    top: var(--origin-top);
    width: var(--origin-width);
    transform: scale(1) rotateX(0deg) translateZ(0);
    opacity: 0.3;
  }
}
@media (max-width: 560px) {
  .profile-pop-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
}
.hero-copy {
  max-width: 760px;
}
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 760px;
  margin-bottom: 24px;
}
.hero-title-group {
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: 6px 0;
  justify-items: center;
}
.hero-title-cn {
  text-shadow: 0 0 22px rgba(232,185,102,0.36),
    0 18px 60px rgba(0,0,0,0.34);
}
.hero-title-en {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.25;
}
.hero-title-offset {
  transform: translateX(2.02em);
}
.hero-gift {
  text-indent: 2em;
  text-align: justify;
  text-align-last: left;
}
.hero .lead {
  text-indent: 2em;
  text-align: justify;
  text-align-last: left;
}
.profile-badges {
  margin-top: 28px;
}
.profile-badges span,
.profile-badges span.wide {
  display: grid;
  grid-column: auto;
  border-radius: 16px;
}
.profile-badges strong,
.profile-badges em {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
}
@media (max-width: 920px) {
  .profile-badges {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .hero-title {
    gap: 12px;
  }
  .hero-title-offset {
    transform: translateX(0.85em);
  }
  .hero-title-en {
    font-size: 17px;
  }
  .profile-badges strong,
  .profile-badges em {
    white-space: normal;
  }
}
.profile-stage {
  min-height: 540px;
}
.profile-avatar-button {
  width: min(450px, 88vw);
}
.profile-badges span,
.profile-badges span.wide {
  grid-template-rows: auto;
  align-items: center;
  min-height: 74px;
  padding: 13px 16px;
}
.profile-badges span b {
  grid-row: auto;
}
.profile-badges strong,
.profile-badges em {
  grid-column: auto;
  align-self: center;
  margin: 0;
  white-space: nowrap;
  line-height: 1.2;
}
.profile-badges strong {
  text-align: left;
}
.profile-badges em {
  text-align: right;
}
.profile-text-card {
  width: 100%;
}
.profile-name {
  font-size: clamp(36px, 3vw, 44px);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.profile-role {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.8;
  color: rgba(251,248,244,0.82);
  margin-bottom: 28px;
}
.profile-badges {
  margin-bottom: 28px;
  gap: 12px;
}
.profile-text-card {
  padding: 24px 28px;
}
.profile-text-card p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.9;
  margin-bottom: 18px;
  text-align: justify;
  text-align-last: left;
  word-break: break-word;
}
.profile-text-card p:last-child {
  margin-bottom: 0;
}
@media (max-width: 920px) {
  .profile-avatar-button {
    width: min(420px, 86vw);
  }
}
@media (max-width: 560px) {
  .profile-stage {
    min-height: 460px;
  }
  .profile-badges {
    grid-template-columns: 1fr 1fr;
  }
  .profile-badges span {
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
  }
  .profile-badges span em {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.profile-stage {
  justify-items: start;
}
.profile-avatar-button {
  justify-self: start;
  margin-left: clamp(-42px, -3vw, -18px);
}
.profile-badges,
.profile-text-card {
  width: 100%;
}
.profile-badges {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-badges span,
.profile-badges span.wide {
  min-width: 0;
  grid-template-columns: 34px minmax(92px, 0.72fr) minmax(180px, 1.28fr);
}
.profile-badges em {
  min-width: 0;
  font-size: clamp(18px, 1.45vw, 20px);
  letter-spacing: 0;
  white-space: nowrap;
}
.profile-badges span:nth-child(4),
.profile-badges span:nth-child(6) {
  grid-template-columns: 34px minmax(104px, 0.7fr) minmax(230px, 1.3fr);
}
.profile-text-card {
  box-sizing: border-box;
}
@media (max-width: 1180px) {
  .profile-section {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .profile-stage {
    justify-items: center;
  }
  .profile-avatar-button {
    justify-self: center;
    margin-left: 0;
  }
  .profile-copy {
    max-width: 820px;
    margin: 0 auto;
  }
}
@media (max-width: 760px) {
  .profile-badges {
    grid-template-columns: 1fr;
  }
  .profile-badges span,
  .profile-badges span.wide,
  .profile-badges span:nth-child(4),
  .profile-badges span:nth-child(6) {
    grid-template-columns: 34px minmax(88px, 0.75fr) minmax(0, 1.25fr);
  }
  .profile-badges em {
    white-space: normal;
  }
  .gallery-date-grid {
    column-count: 2;
  }
}
@media (max-width: 560px) {
  .gallery-month-group {
    padding-left: 34px;
    margin-bottom: 20px;
  }
  .gallery-month-marker {
    left: 5px;
    top: 14px;
    width: 18px;
    height: 18px;
    border-width: 3px;
    box-shadow: 0 0 0 6px rgba(232,185,102,0.08), 0 0 26px rgba(232,185,102,0.4);
  }
  .gallery-month-heading {
    padding: 16px 18px;
    margin-bottom: 14px;
  }
  .gallery-month-heading h3 {
    font-size: clamp(26px, 4vw, 34px);
  }
  .gallery-date-grid {
    column-count: 1;
  }
}
/* ============ 社交卡片组件样式 ============ */
/* 
 * 社交平台展示卡片 - 包含平台图标、名称、描述和操作按钮
 * 采用响应式设计，适配不同屏幕尺寸
 */
.social-card {
  min-height: 300px;
  padding: 32px 28px;
  gap: 10px;
}
/* 社交平台名称 */
.social-card h3 {
  max-width: calc(100% - 90px);
  /* 留出图标空间 */
  margin-top: 12px;
  font-size: clamp(22px, 2vw, 26px);
  letter-spacing: 0.04em;
}
/* 社交账号/用户名 */
.social-card strong {
  font-size: clamp(14px, 1.1vw, 15px);
  color: rgba(251,248,244,0.78);
}
/* 社交平台描述 */
.social-card p {
  max-width: 34em;
  margin: 12px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-indent: 2em;
  text-align: justify;
  text-align-last: left;
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 1.8;
}
.social-card .tag {
  width: fit-content;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
}
/* 
 * 社交平台图标标记 - 悬浮在卡片右上角
 * 使用滤镜调整色彩，内阴影模拟边框效果
 */
.social-app-mark {
  top: 16px;
  right: 20px;
  width: clamp(64px, 6vw, 86px);
  height: clamp(64px, 6vw, 86px);
  border-radius: 22px;
  opacity: 0.34;
  filter: saturate(0.96) contrast(1.04) brightness(1.02);
  box-shadow: 0 20px 58px rgba(0,0,0,0.2),
    0 0 0 1px rgba(255,255,255,0.16) inset;
  cursor: pointer;
  pointer-events: auto;
}
.social-card:hover .social-app-mark {
  opacity: 0.3;
}
/* 
 * 激活状态下的发光效果
 * .is-lit类触发金色光晕动画
 * 滤镜增强饱和度和亮度，配合阴影实现发光效果
 */
.social-card.is-lit .social-app-mark {
  opacity: 0.86;
  filter: saturate(1.18) contrast(1.08) brightness(1.18);
  transform: rotate(0deg) scale(1.08);
  box-shadow: 0 22px 68px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.36) inset,
    0 0 46px rgba(232,185,102,0.34);
  animation: socialMarkGlow 5s ease forwards;
}
/* 
 * 社交图标发光动画关键帧
 * 动画流程：
 *   0%: 初始状态，轻微旋转缩小
 *   12%: 快速点亮，恢复正常旋转并放大
 *   82%: 保持高亮状态
 *   100%: 逐渐恢复初始状态
 */
@keyframes socialMarkGlow {
  0% {
    opacity: 0.34;
    transform: rotate(3deg) scale(0.96);
  }
  12% {
    opacity: 0.92;
    transform: rotate(0deg) scale(1.08);
  }
  82% {
    opacity: 0.82;
    transform: rotate(0deg) scale(1.04);
  }
  100% {
    opacity: 0.34;
    transform: rotate(3deg) scale(1);
  }
}
.social-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 36px;
  margin-top: 0;
  padding: 0 16px;
  border: 1px solid rgba(232,185,102,0.58);
  border-radius: 999px;
  background: rgba(232,185,102,0.12);
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.social-action:hover {
  transform: translateY(-1px);
  border-color: rgba(255,239,200,0.86);
  background: rgba(232,185,102,0.2);
}
.social-link-muted {
  color: rgba(251,248,244,0.58);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
}
.social-card a.social-action,
.social-card span.social-action {
  position: relative;
  z-index: 1;
  margin-top: 0;
}
.social-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  margin-top: 0;
  padding-top: 0;
}
.social-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: 12px;
}
.social-card-footer .tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 140px !important;
  width: auto !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  color: rgba(251,248,244,0.72) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
@media (max-width: 560px) {
  .social-app-mark {
    top: 14px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    opacity: 0.3;
  }
  .social-card .tag,
  .social-card h3 {
    max-width: calc(100% - 78px);
  }
  .social-action {
    width: 100%;
  }
  .social-card-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .social-tags {
    flex-direction: column;
    margin-left: 0;
  }
  .social-card-footer .tag {
    width: 100%;
    min-width: 100%;
    justify-content: center;
  }
  .social-card {
    padding: 34px 22px 20px 22px;
    gap: 10px;
  }
}
/* Final profile badge layout: two aligned rows, one label/value pair per card. */
.profile-section {
  grid-template-columns: minmax(360px, 0.76fr) minmax(960px, 1.24fr);
  gap: clamp(38px, 4vw, 66px);
  align-items: center;
}
.profile-copy {
  width: 100%;
  max-width: 1160px;
}
.profile-copy .profile-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  align-items: stretch;
}
.profile-copy .profile-badges > span,
.profile-copy .profile-badges > span.wide {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 42px auto;
  grid-column: auto;
  align-items: center;
  column-gap: 13px;
  row-gap: 6px;
  min-width: 0;
  min-height: 108px;
  padding: 19px 20px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.06));
  box-shadow: 0 18px 46px rgba(0,0,0,0.1);
}
.profile-copy .profile-badges > span b {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(232,185,102,0.14);
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}
.profile-copy .profile-badges > span strong,
.profile-copy .profile-badges > span em {
  min-width: 0;
  margin: 0;
  overflow: visible;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
.profile-copy .profile-badges > span strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  color: rgba(251,248,244,0.68);
  font-size: 18px;
  font-weight: 800;
}
.profile-copy .profile-badges > span em {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: rgba(251,248,244,0.98);
  font-size: clamp(21px, 1.35vw, 23px);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}
.profile-copy .profile-badges > span:nth-child(4) em,
.profile-copy .profile-badges > span:nth-child(6) em {
  font-size: clamp(21px, 1.35vw, 23px);
}
@media (max-width: 1320px) {
  .profile-section {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .profile-copy {
    max-width: min(1160px, calc(100vw - 64px));
    margin: 0 auto;
  }
}
@media (max-width: 900px) {
  .profile-copy .profile-badges {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}
@media (max-width: 620px) {
  .profile-copy .profile-badges {
    grid-template-columns: 1fr;
  }
  .profile-copy .profile-badges > span,
  .profile-copy .profile-badges > span.wide {
    min-height: 104px;
    padding: 18px 20px;
  }
  .profile-copy .profile-badges > span em {
    white-space: normal;
  }
}
/* Special styles for social tags */
#social .social-card .social-card-footer .social-tags .tag {
  width: auto !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  color: rgba(251,248,244,0.72) !important;
  font-weight: 800 !important;
}
#social .social-card .social-card-footer .social-tags .tag.tag-special {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 160px !important;
  width: auto !important;
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  color: rgba(251,248,244,0.72) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin-left: 40px !important;
}
/* Final social footer alignment. */
#social .social-card-footer {
  display: grid !important;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center !important;
  gap: 14px !important;
  width: 100%;
}
#social .social-card a.social-action,
#social .social-card span.social-action,
#social .social-action {
  padding: 0 18px !important;
  white-space: nowrap !important;
  flex: 0 0 148px !important;
}
#social .social-tags {
  justify-self: end;
  justify-content: flex-end;
  min-width: 0;
  margin-left: 0 !important;
}
#social .social-card .social-card-footer .social-tags .tag {
  max-width: 100%;
  white-space: nowrap !important;
}
@media (max-width: 560px) {
  #social .social-card-footer {
    grid-template-columns: 1fr;
    gap: 10px !important;
  }
  #social .social-card a.social-action,
  #social .social-card span.social-action,
  #social .social-action {
    width: 100% !important;
    min-width: 0 !important;
  }
  #social .social-tags {
    justify-self: stretch;
  }
  #social .social-card .social-card-footer .social-tags .tag,
  #social .social-card:nth-child(3) .social-card-footer .social-tags .tag {
    width: 100% !important;
    min-width: 0 !important;
    transform: none;
  }
}
/* Final readability pass: profile + social. */
#profile.profile-section {
  grid-template-columns: minmax(340px, 0.68fr) minmax(900px, 1.32fr);
  gap: clamp(70px, 7vw, 118px);
  align-items: center;
}
#profile .profile-copy {
  max-width: 1080px;
}
#profile .profile-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  letter-spacing: 0;
  line-height: 1.08;
}
#profile .profile-name .name-cn,
#profile .profile-name span {
  color: var(--gold);
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 900;
}
#profile .profile-name span:not(.name-cn) {
  font-size: clamp(22px, 2vw, 30px);
  opacity: 0.88;
}
#profile .profile-role {
  max-width: 58em;
  margin: 0;
  color: rgba(251,248,244,0.78);
  font-size: clamp(16px, 1.05vw, 18px);
  font-weight: 650;
  line-height: 1.85;
  letter-spacing: 0;
}
#profile .profile-badges {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
}
#profile .profile-badges > span,
#profile .profile-badges > span.wide {
  min-height: 82px;
  padding: 13px 16px;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: 36px auto;
  column-gap: 10px;
  row-gap: 2px;
  border-radius: 18px;
}
#profile .profile-badges > span b {
  width: 36px;
  height: 36px;
  font-size: 17px;
}
#profile .profile-badges > span strong {
  font-size: 15px;
  line-height: 1.15;
}
#profile .profile-badges > span em,
#profile .profile-badges > span:nth-child(4) em,
#profile .profile-badges > span:nth-child(6) em {
  font-size: clamp(18px, 1.12vw, 20px);
  line-height: 1.2;
}
#profile .profile-text-card {
  width: 100%;
  margin-top: 26px;
  padding: clamp(24px, 2.4vw, 34px) clamp(28px, 3vw, 42px);
  border-radius: 22px;
}
#profile .profile-text-card p {
  margin: 0;
  color: rgba(251,248,244,0.86);
  font-size: clamp(17px, 1.18vw, 19px);
  font-weight: 650;
  line-height: 2.05;
  letter-spacing: 0;
  text-align: justify;
  text-indent: 2em;
}
#profile .profile-text-card p + p {
  margin-top: 18px;
}
#social .section-heading {
  max-width: 860px;
  margin: 0 auto 36px;
}
#social .section-heading h2 {
  margin-bottom: 12px;
  line-height: 1.04;
}
#social .section-heading p:not(.eyebrow) {
  max-width: 52em;
  margin: 16px auto 0;
  color: rgba(251,248,244,0.74);
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 2.0;
  letter-spacing: 0.015em;
}
#social .social-grid {
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 24px;
}
#social .social-card {
  gap: 8px;
  border-radius: 18px;
}
#social .social-card h3 {
  letter-spacing: 0;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(232,185,102,0.18);
}
#social .social-card strong {
  font-weight: 800;
}
#social .social-card p {
  font-size: clamp(16px, 1.05vw, 18px);
  font-weight: 650;
  letter-spacing: 0;
}
#social .social-card-footer {
  min-height: 44px;
}
#social .social-card p {
  margin-bottom: auto;
}
#social .social-tags {
  align-items: center !important;
}
#social .social-card a.social-action,
#social .social-card span.social-action,
#social .social-action {
  width: 150px !important;
  min-width: 150px !important;
  height: 44px !important;
  font-size: 16px !important;
}
#social .social-card .social-card-footer .social-tags .tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  min-width: 166px !important;
  padding-inline: 20px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
#social .social-card:nth-child(3) .social-card-footer .social-tags .tag {
  min-width: 196px !important;
  color: rgb(0, 204, 255) !important;
  transform: translateX(24px);
}
#social .social-note {
  max-width: 980px;
  margin-inline: auto;
  margin-top: 28px;
  padding: 26px 30px;
  text-align: center;
}
/* Section heading hierarchy: Chinese title first, English subtitle below. */
main > section:not(#home):not(#profile) > .section-heading,
#music .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
main > section:not(#home):not(#profile) > .section-heading h2,
#music .section-title,
#life .life-heading-row {
  order: 1;
}
main > section:not(#home):not(#profile) > .section-heading .eyebrow,
#music .section-subtitle {
  order: 2;
  width: fit-content;
  margin: 8px auto 0;
  color: rgba(232,185,102,0.82);
  font-size: clamp(13px, 0.9vw, 15px);
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-align: center;
}
main > section:not(#home):not(#profile) > .section-heading p:not(.eyebrow) {
  order: 3;
  margin-top: 18px;
  margin-inline: auto;
  text-align: center;
}
#music .section-copy {
  order: 3;
  max-width: min(720px, 92vw);
  margin: 18px auto 0;
  color: var(--text-soft);
  font-size: clamp(17px, 1.25vw, 22px);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0;
  text-align: center;
}
#music .section-title {
  margin-bottom: 0;
}
/* Social card alignment pass: keep long account lines clear of the app avatar. */
#social .social-app-mark {
  opacity: 0.34;
}
#social .social-card h3 {
  margin-top: 8px;
}
#social .social-card strong {
  margin-top: 12px;
}
#social .social-card p {
  padding-top: 24px;
  border-top-color: rgba(255,255,255,0.16);
}
#social .social-card:nth-child(5) strong,
#social .social-card:nth-child(3) strong {
  max-width: calc(100% - 168px);
}
#social .social-card:nth-child(5) p {
  margin-top: 28px;
  padding-top: 24px;
}
#social .social-card-footer {
  margin-top: 26px;
}
@media (max-width: 560px) {
  main > section:not(#home):not(#profile) > .section-heading p:not(.eyebrow) {
    text-align: justify;
    text-align-last: center;
  }
  #social .social-card h3,
  #social .social-card strong,
  #social .social-card:nth-child(5) strong,
  #social .social-card:nth-child(3) strong {
    max-width: calc(100% - 82px);
  }
}
#social .social-note strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(18px, 1.25vw, 21px);
}
#social .social-note p {
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.9;
  text-align: center;
  text-align-last: center;
}
/* Soft glow polish for imagery and key glass elements. */
.profile-avatar-button,
.profile-avatar-button img,
.social-app-mark,
.work-card,
.social-card,
.profile-badges > span,
.profile-text-card,
.social-note {
  filter: drop-shadow(0 0 12px rgba(217,166,174,0.12));
}
.social-card,
.profile-badges > span,
.profile-text-card,
.social-note {
  box-shadow: 0 18px 54px rgba(0,0,0,0.14),
    0 0 26px rgba(217,166,174,0.08);
}
.profile-avatar-button:hover,
.social-card:hover {
  filter: drop-shadow(0 0 18px rgba(217,166,174,0.2));
}
@media (max-width: 1320px) {
  #profile.profile-section {
    grid-template-columns: 1fr;
  }
  #social .social-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }
}
@media (max-width: 760px) {
  #profile .profile-name {
    flex-wrap: wrap;
  }
  #profile .profile-badges,
  #social .social-grid {
    grid-template-columns: 1fr;
  }
  #profile .profile-text-card,
  #social .social-card,
  #social .social-note {
    padding: 22px;
  }
  #social .social-card:nth-child(3) .social-card-footer .social-tags .tag {
    transform: none;
  }
}
/* Final works typography pass. */
#works .section-heading p:not(.eyebrow) {
  font-size: clamp(17px, 1.12vw, 19px);
  line-height: 1.85;
}
#works .works-stats {
  margin: 40px 0;
  border: 1px solid rgba(255,255,255,0.1);
}
#works .stat-item {
  text-align: center;
}
#works .stat-number {
  line-height: 1;
  margin-bottom: 8px;
}
#works .stat-number:hover {
  transform: scale(1.05);
}
#works .stat-label {
  font-weight: 600;
}
#life .life-stats {
  display: none;
}
#life .life-stat-number {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #ff69b4, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#works .year-tabs {
  gap: 12px;
  margin-bottom: 28px;
}
#works .year-tabs button {
  min-height: 42px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 800;
}
#works .year-tab-all {
  border-color: rgba(232, 185, 102, 0.42) !important;
  color: rgba(255, 239, 200, 0.98) !important;
  background: linear-gradient(145deg, rgba(232,185,102,0.22), rgba(255,255,255,0.08)) !important;
}
#works .work-card h3 {
  margin-bottom: 12px;
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 900;
  line-height: 1.28;
}
#works .work-meta {
  gap: 10px;
  margin: 14px 0 16px;
}
#works .work-card .tag {
  min-height: 36px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
#works .work-entry {
  padding: 18px 0;
}
#works .work-entry-meta {
  gap: 10px;
  margin-bottom: 10px;
}
#works .work-entry-meta span {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
}
#works .work-entry p {
  font-size: clamp(16px, 1.08vw, 18px);
  font-weight: 650;
  letter-spacing: 0;
  word-spacing: 0.14em;
}
#works .work-card-lead {
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07));
}
#works .lead-role-tag {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
  justify-content: flex-start !important;
}
#works .work-card:not(.work-card-lead) .work-meta .tag:first-child {
  padding-left: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
@media (max-width: 760px) {
  .schedule-card.has-poster {
    grid-template-columns: 1fr;
    grid-column: span 1;
    min-height: auto;
  }
  .schedule-poster {
    min-height: 220px;
  }
  .schedule-card.has-thumb {
    display: flex;
    grid-column: span 1;
    min-height: auto;
    padding: 22px;
  }
  .schedule-thumb {
    position: absolute;
  }
  .schedule-card.has-thumb .schedule-copy {
    width: 100%;
  }
  #works .work-card {
    padding: 22px;
  }
  #works .work-card h3 {
    font-size: 24px;
  }
  #works .work-card .tag,
  #works .work-entry-meta span {
    font-size: 14px;
  }
  #works .work-entry p {
    font-size: 16px;
  }
}
/* Gallery time machine: aligned with the JZY gallery/lightbox treatment. */
#gallery .section-heading {
  max-width: 860px;
  margin: 0 auto 36px;
  text-align: center;
}
#gallery .reveal,
#gallery .gallery-month-group,
#gallery .gallery-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
}
#gallery .gallery-filter {
  gap: 12px;
  margin-bottom: 32px;
}
#gallery .gallery-filter button {
  min-height: 42px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 800;
}
#gallery .gallery-month-heading {
  padding: 20px 24px;
}
#gallery .gallery-month-heading h3 {
  margin: 8px 0 10px;
  line-height: 1.08;
}
#gallery .gallery-month-heading p,
#gallery .gallery-date-heading p {
  max-width: 32em;
  color: rgba(251,248,244,0.68);
  font-weight: 700;
}
#gallery .gallery-date-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
}
#gallery .gallery-date-heading h4 {
  margin: 0;
}
#gallery .gallery-date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
  column-count: initial;
  perspective: 1000px;
}
#gallery .gallery-date-grid .gallery-item,
#gallery .gallery-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 15px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.45s ease,
    filter 0.45s ease;
  box-shadow: 0 5px 20px rgba(255,182,193,0.15);
}
#gallery .gallery-item:hover {
  z-index: 10;
  transform: rotateY(5deg) rotateX(5deg) scale(1.05);
}
#gallery .gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
:root:not([data-theme="light"]) #gallery .gallery-item img {
  filter: brightness(1.08);
}
#gallery .gallery-item:hover img {
  transform: scale(1.04);
}
#gallery .gallery-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 30px 20px 20px;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#gallery .gallery-item:hover .gallery-caption {
  transform: translateY(0);
}
#gallery .gallery-caption strong,
#gallery .gallery-caption p {
  display: block;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}
#gallery .gallery-caption strong {
  margin-bottom: 5px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}
#gallery .gallery-caption p {
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  line-height: 1.5;
  transition-delay: 0.1s;
}
#gallery .gallery-item:hover .gallery-caption strong,
#gallery .gallery-item:hover .gallery-caption p {
  transform: translateY(0);
  opacity: 1;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 7vh 5vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.lightbox.open,
.lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lightbox-content {
  position: relative;
  transform: scale(0.82);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lightbox.open .lightbox-content,
.lightbox.active .lightbox-content {
  transform: scale(1);
}
.lightbox img,
.lightbox-content img {
  width: auto;
  max-width: min(100%, 92vw);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 100px rgba(212,175,55,0.3);
}
.lightbox-close,
.lightbox button {
  position: absolute;
  top: -54px;
  right: 0;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}
.lightbox-close:hover,
.lightbox button:hover {
  color: var(--gold);
  transform: rotate(90deg) scale(1.16);
}
.lightbox-caption,
#lightboxCaption {
  margin-top: 20px;
  text-align: center;
}
.lightbox-caption strong {
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 850;
  line-height: 1.45;
}
.lightbox-caption span {
  color: rgba(255,255,255,0.82);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
}
:root {
  --pink: #ffb6c1;
  --pink-dark: #ff69b4;
  --accent-gradient: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 50%, #87ceeb 100%);
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
}
.container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.section-header {
  text-align: center;
  margin-bottom: 40px;
}
.section-title {
  font-size: 32px;
  color: var(--paper);
  margin-bottom: 10px;
}
.section-subtitle {
  font-size: 16px;
  color: rgba(251,248,244,0.62);
}
.music-player-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
}
.player-main {
  background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07));
  border: 1px solid var(--line);
  border-radius: 25px;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.vinyl-player {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 25px;
}
.tonearm-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.tonearm {
  position: absolute;
  top: 5px;
  right: 15px;
  width: 95px;
  height: 95px;
  transform-origin: top right;
  transform: rotate(28deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tonearm.playing {
  transform: rotate(-12deg);
}
.tonearm-arm {
  position: absolute;
  top: 15px;
  right: 8px;
  width: 78px;
  height: 3px;
  background: linear-gradient(90deg, #e0e0e0, #a0a0a0);
  transform: rotate(-45deg);
  border-radius: 2px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.tonearm-counterweight {
  position: absolute;
  top: 5px;
  right: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #666, #333);
  border-radius: 50%;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
.tonearm-headshell {
  position: absolute;
  bottom: 12px;
  left: 4px;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #f5f5f5, #d0d0d0);
  border-radius: 3px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.cartridge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 12px;
  background: linear-gradient(to bottom, #888, #444);
  border-radius: 0 0 2px 2px;
}
.cartridge::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 4px;
  background: #1a1a1a;
}
.vinyl-record {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: #1a1a1a;
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4),
    inset 0 0 25px rgba(255,255,255,0.05);
}
.vinyl-record.playing {
  animation: vinylSpin 3s linear infinite;
}
@keyframes vinylSpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.vinyl-grooves {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0,
    transparent 1px,
    rgba(255,255,255,0.03) 1px,
    rgba(255,255,255,0.03) 2px
  );
}
.vinyl-label {
  position: absolute;
  top: 28%;
  left: 28%;
  right: 28%;
  bottom: 28%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.vinyl-label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vinyl-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ffb6c1, #ff69b4);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 182, 193, 0.5);
}
.player-info h4 {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--paper);
}
.player-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.player-info p {
  color: rgba(251,248,244,0.62);
  font-size: 14px;
  margin: 0;
}
.like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(251,248,244,0.62);
  font-size: 14px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 5px 10px;
  border-radius: 20px;
}
.like-btn:hover {
  background: rgba(255, 182, 193, 0.2);
  transform: scale(1.05);
}
.like-btn i {
  font-size: 18px;
  transition: all 0.3s ease;
}
.like-btn.liked i {
  color: #ff4757;
  animation: likePulse 0.5s ease;
}
.like-btn.liked {
  color: #ff4757;
}
#music .player-info {
  position: static;
}
#music .player-info h4 {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
#music .player-info h4.track-title-gradient {
  background: linear-gradient(135deg, var(--rose), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
#music .player-meta p .artist-name-large {
  font-size: 18px;
  font-weight: 600;
  color: rgba(251, 248, 244, 0.85);
}
#music .player-meta {
  display: block;
  width: fit-content;
  margin: 0 auto;
}
#music .player-meta p {
  margin: 0;
}
#music .like-btn {
  position: absolute;
  left: calc(50% + 190px);
  bottom: 52px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 6;
}
#music .like-btn i {
  font-size: 24px;
}
#music .like-count {
  position: absolute;
  top: 2px;
  left: 56%;
  min-width: max-content;
  color: #ff4757;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 2px 8px rgba(255, 71, 87, 0.34);
  pointer-events: none;
}
#music .like-btn:hover {
  transform: translateX(-50%) scale(1.05);
}
@media (max-width: 560px) {
  #music .like-btn {
    left: calc(50% + 150px);
    bottom: 54px;
    width: 42px;
    height: 42px;
  }
  #music .like-count {
    top: 1px;
    left: 54%;
    font-size: 12px;
  }
}
@keyframes likePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.player-progress {
  margin: 30px 0;
}
.waveform-container {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 15px;
  overflow: hidden;
}
.waveform-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  justify-content: center;
}
.waveform-bar {
  width: 3px;
  background: rgba(255, 182, 193, 0.3);
  border-radius: 2px;
  transition: all 0.15s ease;
  animation: wavePulse 0.8s ease-in-out infinite;
}
.waveform-bar.active {
  background: var(--accent-gradient);
  box-shadow: 0 0 10px rgba(255, 182, 193, 0.8);
}
@keyframes wavePulse {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.3);
  }
}
.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 182, 193, 0.1);
}
.progress-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255, 182, 193, 0.1) 0%, 
    rgba(135, 206, 250, 0.1) 50%,
    rgba(255, 182, 193, 0.1) 100%);
  background-size: 200% 100%;
  animation: bgShimmer 3s linear infinite;
}
@keyframes bgShimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    #ffb6c1 0%, 
    #ff69b4 30%,
    #87ceeb 70%,
    #4169e1 100%);
  border-radius: 4px;
  width: 0%;
  transition: width 0.1s linear;
  position: relative;
  overflow: hidden;
}
.progress-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%);
  animation: glowMove 2s linear infinite;
}
@keyframes glowMove {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.progress-handle {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #fff 0%, #ffb6c1 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.3),
    0 0 20px rgba(255, 182, 193, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  opacity: 0;
}
.progress-bar:hover .progress-handle {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}
.progress-fill:hover .progress-handle {
  opacity: 1;
}
.time-display {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(251,248,244,0.62);
}
.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
.control-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255, 182, 193, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: var(--pink);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 16px;
  display: grid;
  place-items: center;
}
.control-btn:hover {
  background: rgba(255, 182, 193, 0.3);
  border-color: var(--pink);
  transform: scale(1.15);
  box-shadow: 0 0 30px rgba(255, 182, 193, 0.4);
}
.control-btn.active {
  background: var(--accent-gradient);
  color: white;
  border-color: transparent;
}
.control-btn.play-btn {
  width: 70px;
  height: 70px;
  background: var(--accent-gradient);
  color: white;
  border: none;
  font-size: 20px;
}
.control-btn.play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 40px rgba(255, 182, 193, 0.6);
}
.playlist {
  background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07));
  border: 1px solid var(--line);
  border-radius: 25px;
  padding: 25px;
  max-height: 500px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.playlist-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 8px;
}
.playlist-item:hover {
  background: rgba(255, 182, 193, 0.2);
  transform: translateX(5px);
}
.playlist-item.active {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(255, 105, 180, 0.2));
  border: 1px solid rgba(255, 182, 193, 0.4);
}
.playlist-item img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
}
.playlist-item-info h5 {
  font-size: 14px;
  margin-bottom: 3px;
  color: var(--paper);
}
.playlist-item-info p {
  font-size: 12px;
  color: rgba(251,248,244,0.62);
}
@media (max-width: 960px) {
  .music-player-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .lightbox {
    padding: 8vh 18px;
  }
  .lightbox img,
  .lightbox-content img {
    max-height: 72vh;
  }
}
/* Unified gallery lightbox viewport with navigation. */
.lightbox-media-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: min(92vw, calc(82vh * var(--lb-image-aspect, 1.45)));
  height: min(82vh, calc(92vw / var(--lb-image-aspect, 1.45)));
  max-width: 92vw;
  max-height: 82vh;
  overflow: visible;
}
.camera-particle-trigger {
  position: fixed;
  z-index: 200;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.48), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14)),
    rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.96) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 16px 42px rgba(76,91,125,0.22),
    0 0 28px rgba(255,255,255,0.24) inset,
    0 0 34px rgba(217,166,174,0.22) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.camera-particle-trigger.hidden {
  display: none !important;
}
.camera-particle-trigger:hover {
  transform: translateY(-2px) scale(1.05);
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.58), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,182,193,0.24)),
    rgba(255,255,255,0.2) !important;
}
.camera-particle-trigger.is-running {
  color: var(--gold) !important;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.74), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,0.68), rgba(217,166,174,0.32)),
    rgba(255,255,255,0.26) !important;
  box-shadow: 0 22px 66px rgba(217,166,174,0.4),
    0 0 42px rgba(255,255,255,0.42) inset,
    0 0 0 1px rgba(255,255,255,0.42) inset !important;
}
.camera-particle-trigger:disabled {
  cursor: progress;
  opacity: 0.74;
  transform: none !important;
}
.camera-gesture-text {
  position: fixed;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(900px, calc(100vw - 64px));
  min-height: auto;
  padding: 16px 32px;
  background: transparent;
  border-radius: 26px;
  border: none;
  z-index: 200;
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: none;
  display: none;
}
.camera-gesture-text.is-visible {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.camera-gesture-text.is-loading {
  border-color: rgba(0, 195, 255, 0.86);
  background: rgba(248, 251, 252, 0.86);
}
.camera-gesture-text.is-warning {
  border-color: rgba(232, 180, 82, 0.9);
  background: rgba(255, 250, 236, 0.9);
}
.camera-gesture-text.is-error {
  border-color: rgba(223, 91, 91, 0.92);
  background: rgba(255, 244, 244, 0.94);
  box-shadow: 0 0 28px rgba(223, 91, 91, 0.15),
    0 18px 46px rgba(78, 34, 34, 0.16);
}
.camera-gesture-text.is-warning .gesture-text-cn,
.camera-gesture-text.is-warning .gesture-text-en {
  color: #a66d12;
  text-shadow: none;
}
.camera-gesture-text.is-error .gesture-text-cn,
.camera-gesture-text.is-error .gesture-text-en {
  color: #b83232;
  text-shadow: none;
}
.gesture-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  margin-top: 4px;
}
.gesture-text-cn,
.gesture-text-en {
  color: #00bfff;
  font-family: "Times New Roman", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", serif;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.16);
}
.gesture-text-cn {
  font-size: clamp(16px, 2vw, 22px);
}
.gesture-text-en {
  font-size: clamp(16px, 1.8vw, 20px);
}
@media (max-width: 700px) {
  .camera-gesture-text {
    padding: 14px 20px;
    border-radius: 20px;
  }
}
.gesture-hints {
  position: fixed;
  left: max(24px, 3vw);
  top: 26px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gesture-hints.is-visible {
  opacity: 1;
}
.gesture-hint-item {
  color: #00CCFF;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}
body.particle-fullscreen-active .lightbox {
  background: radial-gradient(ellipse 80% 50% at 12% 8%, rgba(217, 166, 174, 0.38), transparent 50%),
    radial-gradient(ellipse 60% 40% at 82% 22%, rgba(159, 197, 199, 0.3), transparent 45%),
    radial-gradient(ellipse 70% 45% at 54% 92%, rgba(200, 167, 104, 0.22), transparent 40%),
    radial-gradient(ellipse 50% 30% at 30% 50%, rgba(155, 145, 200, 0.15), transparent 35%),
    linear-gradient(145deg, #151827 0%, #1e2438 40%, #2a3050 70%, #3d3a55 100%);
  backdrop-filter: none;
}
body.particle-fullscreen-active .lightbox-content {
  display: contents;
}
body.particle-fullscreen-active .lightbox-media-frame {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}
body.particle-fullscreen-active .camera-particle-trigger {
  display: none !important;
}
body.particle-fullscreen-active .lightbox-close {
  display: none !important;
}
body.particle-fullscreen-active .particle-shape-controls,
body.particle-fullscreen-active .particle-burst-trigger {
  position: fixed !important;
  z-index: 220 !important;
  pointer-events: auto;
}
.particle-shape-controls {
  position: fixed;
  z-index: 200;
  display: flex;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12)),
    rgba(255,255,255,0.12);
  box-shadow: 0 16px 42px rgba(76,91,125,0.18),
    0 0 30px rgba(255,255,255,0.18) inset;
  backdrop-filter: blur(18px) saturate(1.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.particle-burst-trigger {
  position: fixed;
  z-index: 200;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.58), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,0.48), rgba(140,205,232,0.2)),
    rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.96) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 18px 54px rgba(76,91,125,0.2),
    0 0 34px rgba(255,255,255,0.3) inset,
    0 0 36px rgba(140,205,232,0.18) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.25s ease;
}
.particle-burst-trigger:hover {
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.72), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(140,205,232,0.28)),
    rgba(255,255,255,0.22) !important;
}
.particle-running .particle-burst-trigger {
  opacity: 1;
  pointer-events: auto;
}
.particle-running + .lightbox-caption,
.lightbox-media-frame.particle-running ~ .lightbox-caption,
.lightbox-content:has(.particle-running) .lightbox-caption {
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  pointer-events: none;
}
.particle-running .particle-shape-controls,
.camera-particle-trigger.is-running + .particle-shape-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.particle-running .lightbox-nav {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.86) !important;
}
.lightbox .particle-shape-controls button,
.particle-shape-controls button {
  position: static !important;
  width: auto !important;
  height: 34px !important;
  min-width: 70px;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}
.lightbox .particle-shape-controls button:hover,
.lightbox .particle-shape-controls button.active {
  color: #f9fdff !important;
  border-color: rgba(140,205,232,0.68) !important;
  background: rgba(140,205,232,0.24) !important;
  text-shadow: 0 0 12px rgba(140,205,232,0.58);
}
#imageParticleCanvas {
  position: fixed !important;
  z-index: 100 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 !important;
  transition: opacity 0.42s ease;
  filter: drop-shadow(0 18px 58px rgba(140,205,232,0.18));
}
#imageParticleCanvas.show {
  opacity: 1;
}
#particleCameraVideo {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#lightboxImage.particle-source-hidden {
  opacity: 0;
}
.lightbox-media-frame.particle-running::before {
  opacity: 0.96;
  filter: blur(18px) saturate(1.2);
}
.lightbox-media-frame.particle-running::after {
  opacity: 0.36;
}
.lightbox .lightbox-media-frame img,
.lightbox-media-frame img,
#lightboxImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lightbox-media-frame.is-landscape #lightboxImage {
  width: 100%;
  height: auto;
  max-height: 82vh;
}
.lightbox-media-frame.is-portrait #lightboxImage {
  width: auto;
  height: 100%;
  max-width: 92vw;
}
.lightbox-media-frame.is-square #lightboxImage {
  width: 100%;
  height: 100%;
  max-height: 82vh;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  width: 58px;
  height: 58px;
  padding: 0 0 5px !important;
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.44), rgba(255,255,255,0.16)),
    rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.96);
  font-size: 48px;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 300;
  line-height: 1 !important;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 18px 48px rgba(76,91,125,0.22),
    0 0 28px rgba(255,255,255,0.26) inset,
    0 0 34px rgba(217,166,174,0.22);
  backdrop-filter: blur(18px) saturate(1.18);
  transform: translateY(-50%);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.lightbox-prev {
  right: auto;
}
.lightbox-next {
  left: auto;
}
.lightbox-nav:hover {
  transform: translateY(-50%) scale(1.08);
  background: linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,182,193,0.26)),
    rgba(255,255,255,0.24);
  color: var(--gold);
}
.lightbox-close {
  padding: 0 0 4px !important;
  font-family: Arial, "Helvetica Neue", sans-serif !important;
  font-weight: 300 !important;
  text-align: center !important;
}
.lightbox-close:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,182,193,0.26)),
    rgba(255,255,255,0.24) !important;
  color: var(--gold) !important;
}
@media (max-width: 900px) {
  .lightbox-content {
    width: auto;
  }
  .lightbox-media-frame {
    max-width: 92vw;
    max-height: 76vh;
  }
  .lightbox-nav {
    top: 50%;
    width: 48px;
    height: 48px;
    font-size: 40px;
  }
  .lightbox-prev {
    left: 12px;
  }
  .lightbox-next {
    right: 12px;
  }
  .camera-particle-trigger {
    top: auto;
    bottom: 82px;
    font-size: 22px !important;
  }
  .particle-shape-controls {
    top: auto;
    bottom: 24px;
  }
  .particle-burst-trigger {
    bottom: 24px;
  }
}
#prevLightbox,
#nextLightbox {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
#prevLightbox {
  left: max(-76px, -6vw) !important;
  right: auto !important;
}
#nextLightbox {
  right: max(-76px, -6vw) !important;
  left: auto !important;
}
#prevLightbox:hover,
#nextLightbox:hover {
  transform: translateY(-50%) scale(1.08) !important;
}
@media (max-width: 900px) {
  #prevLightbox {
    left: 12px !important;
  }
  #nextLightbox {
    right: 12px !important;
  }
}
@media (max-width: 560px) {
  .lightbox-media-frame {
    max-width: 94vw;
    max-height: 72vh;
  }
  .lightbox-caption,
  #lightboxCaption {
    max-width: 92vw;
    border-radius: 18px;
  }
}
.heart-pop-layer {
  position: fixed;
  inset: 0;
  z-index: 2600;
  overflow: hidden;
  pointer-events: auto;
  background: radial-gradient(circle at 50% 48%, rgba(217,166,174,0.16), transparent 30%),
    rgba(8,10,18,0.08);
  backdrop-filter: blur(2px);
}
.heart-pop-layer.closing {
  pointer-events: none;
  animation: heartLayerFade 0.42s ease forwards;
}
.heart-pop-card {
  position: fixed;
  width: 200px;
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 18px;
  color: rgba(40,40,52,0.92);
  font: 800 14px/1.35 "Microsoft YaHei", "PingFang SC", sans-serif;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.84) rotate(var(--rot));
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 42px rgba(31,42,72,0.22),
    0 0 22px rgba(255,255,255,0.2) inset,
    0 0 26px rgba(217,166,174,0.22);
  backdrop-filter: blur(12px) saturate(1.1);
  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(.2,.8,.2,1);
}
.heart-pop-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.28), transparent 34%),
    radial-gradient(circle at 26% 18%, rgba(255,255,255,0.26), transparent 26%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.heart-pop-card.show {
  opacity: 0.95;
  transform: translateY(0) scale(1) rotate(var(--rot));
}
.heart-pop-card.has-image span {
  position: relative;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.46);
  color: rgba(40,40,52,0.88);
  text-shadow: 0 1px 8px rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
}
.heart-pop-card:hover {
  transform: translateY(-4px) scale(1.04) rotate(var(--rot));
  box-shadow: 0 20px 54px rgba(31,42,72,0.25),
    0 0 28px rgba(255,255,255,0.24) inset,
    0 0 36px rgba(217,166,174,0.32);
}
@keyframes heartLayerFade {
  to {
    opacity: 0;
    filter: blur(6px);
  }
}
@media (max-width: 760px) {
  .life-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .heart-popup-trigger {
    width: 76px;
    height: 56px;
  }
  .heart-pop-card {
    width: 156px;
    height: 74px;
    font-size: 12px;
  }
}
/* Premium glass rendering pass for the time-machine gallery. */
#gallery .gallery-item {
  isolation: isolate;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px) saturate(1.12);
}
#gallery .gallery-item::before,
#gallery .gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}
#gallery .gallery-item::before {
  mix-blend-mode: screen;
}
#gallery .gallery-item::after {
  inset: 1px;
  border: 1px solid rgba(255,255,255,0.16);
}
#gallery .gallery-item:hover {
  box-shadow: 0 34px 76px rgba(255,182,193,0.34),
    0 0 96px rgba(135,206,235,0.24),
    0 0 40px rgba(255,255,255,0.18) inset;
}
#gallery .gallery-caption {
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(transparent, rgba(255,182,193,0.9)),
    rgba(255,255,255,0.08);
  backdrop-filter: blur(9px) saturate(1.1);
}
.lightbox-media-frame::before,
.lightbox-media-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 14px;
}
#lightboxImage {
  filter: brightness(1.09) contrast(1.04) saturate(1.065);
  box-shadow: 0 0 120px rgba(255,255,255,0.26),
    0 0 96px rgba(212,175,55,0.27),
    0 30px 96px rgba(76,91,125,0.22);
}
.site-footer {
  padding: 60px 0 40px;
  text-align: center;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}
.footer-content {
  margin-top: 30px;
}
/* Gallery final polish: let the photographs lead. */
body.page-gallery #gallery .gallery-item {
  border-color: rgba(236, 222, 198, 0.13) !important;
  background: rgba(6, 7, 10, 0.74) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: none !important;
}
body.page-gallery #gallery .gallery-item::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 30%),
    linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.2)) !important;
  opacity: 0.28 !important;
}
body.page-gallery #gallery .gallery-item::after {
  border-color: rgba(236, 222, 198, 0.08) !important;
  box-shadow: none !important;
}
body.page-gallery #gallery .gallery-item:hover {
  border-color: rgba(215, 176, 106, 0.42) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(215, 176, 106, 0.08) !important;
}
body.page-gallery #gallery .gallery-item img {
  filter: brightness(0.99) contrast(1.035) saturate(0.98) !important;
}
body.page-gallery #gallery .gallery-item:hover img {
  filter: brightness(1.04) contrast(1.045) saturate(1.02) !important;
}
body.page-gallery #gallery .gallery-caption {
  border-top-color: rgba(236, 222, 198, 0.12) !important;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 9, 0.78)) !important;
  backdrop-filter: blur(6px) saturate(0.96) !important;
}
body.page-gallery .lightbox {
  background: radial-gradient(ellipse at 18% 18%, rgba(116, 155, 181, 0.16), transparent 44%),
    radial-gradient(ellipse at 82% 18%, rgba(215, 176, 106, 0.1), transparent 40%),
    rgba(4, 5, 8, 0.76) !important;
  backdrop-filter: blur(26px) saturate(0.9) !important;
}
body.page-gallery .lightbox-media-frame::before {
  background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.16), transparent 24%),
    radial-gradient(circle at 72% 22%, rgba(215, 176, 106, 0.12), transparent 30%) !important;
  opacity: 0.46 !important;
}
body.page-gallery .lightbox-media-frame.is-landscape::before,
body.page-gallery .lightbox-media-frame.is-landscape::after {
  opacity: 0 !important;
}
body.page-gallery .lightbox-media-frame::after {
  border-color: rgba(236, 222, 198, 0.14) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%) !important;
  opacity: 0.28 !important;
}
body.page-gallery #lightboxImage {
  filter: brightness(1.025) contrast(1.035) saturate(1.01) !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48),
    0 0 52px rgba(215, 176, 106, 0.1) !important;
}
body.page-gallery .lightbox-caption,
body.page-gallery #lightboxCaption {
  border-color: rgba(236, 222, 198, 0.2) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(8, 9, 13, 0.62) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(0.94) !important;
}
body.page-gallery .lightbox-nav,
body.page-gallery .lightbox-close,
body.page-gallery .camera-particle-trigger,
body.page-gallery .particle-burst-trigger,
body.page-gallery .particle-shape-controls {
  border-color: rgba(236, 222, 198, 0.24) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(7, 8, 12, 0.48) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

.gallery-mobile-dock {
  display: none;
}

@media (max-width: 760px) {
  body.page-gallery {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .gallery-mobile-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 120;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 10px 8px 14px;
    border: 1px solid rgba(236, 222, 198, 0.22);
    border-radius: 999px;
    background: rgba(7, 8, 12, 0.78);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(0.94);
  }

  .gallery-mobile-count {
    margin: 0;
    color: rgba(251, 248, 244, 0.72);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .gallery-mobile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }

  .gallery-mobile-actions button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(236, 222, 198, 0.16);
    border-radius: 50%;
    color: rgba(251, 248, 244, 0.82);
    background: rgba(255, 255, 255, 0.07);
  }

  .gallery-mobile-actions button.active {
    color: #1a2034;
    border-color: rgba(232, 185, 102, 0.72);
    background: linear-gradient(135deg, #e8b966, #d996a6);
  }
}

/**
 * 共鸣系统与BGM播放器样式文件
 * 
 * @file resonance-bgm.css
 * @description 包含双生城市共鸣系统、中国地图交互、BGM背景音乐播放器等功能的样式
 * @author JZY Twins City Team
 * @created 2026-06-02
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 * 
 * @overview
 * 本文件包含以下核心模块：
 * 1. 共鸣系统容器与面板样式
 * 2. 中国地图交互组件（城市标记、声波动画）
 * 3. 广播面板与粉丝墙
 * 4. 模态对话框与通知提示
 * 5. BGM背景音乐播放器控制
 * 6. 响应式适配（移动端优化）
 */
/* ============ 共鸣系统容器样式 ============ */
.resonance-shell {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(22px) saturate(1.14);
}
.resonance-toolbar,
.resonance-actions,
.resonance-stats,
.panel-title {
  display: flex;
  align-items: center;
}
.resonance-toolbar {
  justify-content: space-between;
}
.resonance-login-state {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
}
.resonance-actions {
  flex-wrap: wrap;
  gap: 10px;
}
.resonance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.resonance-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.15);
  box-shadow: 0 18px 44px rgba(0,0,0,0.16);
}
.resonance-btn.primary {
  color: var(--ink);
  border-color: transparent;
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 48%, var(--gold));
}
/* ==================== 地图板块优化 ==================== */
.map-container {
  width: 100%;
  margin-top: 4px;
}
.map-wrapper {
  display: grid;
}
.map-panel {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.map-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,253,248,0.92);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.map-panel-header .header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.map-panel-header i {
  font-size: 18px;
  opacity: 0.9;
  flex-shrink: 0;
}
/* 城市计数标签优化 - 增加视觉分离感 */
.map-panel-header .city-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,253,248,0.8);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.25s ease;
}
.map-panel-header .city-count:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
}
/* 面板头部与地图内容增加间距 */
.map-panel-header {
  margin-bottom: 4px;
}
.her-map-panel .map-panel-header {
  border-bottom-color: rgba(232,185,102,0.2);
}
.her-map-panel .map-panel-header i {
  color: var(--gold);
}
.her-map-panel .city-count {
  background: rgba(232,185,102,0.2);
  color: var(--gold);
}
.fan-map-panel .map-panel-header {
  border-bottom-color: rgba(217,166,174,0.2);
}
.fan-map-panel .map-panel-header i {
  color: var(--rose);
}
.fan-map-panel .city-count {
  background: rgba(217,166,174,0.2);
  color: var(--rose-soft);
}
.map-view {
  position: relative;
  flex: 1;
  transition: background 0.3s ease;
}
.map-view:hover {
  background: rgba(11,15,28,0.5);
}
.cursor-crosshair {
  cursor: crosshair;
}
/* 城市标签列表优化 */
.map-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.map-tags::-webkit-scrollbar {
  width: 6px;
}
.map-tags::-webkit-scrollbar-track {
  background: transparent;
}
.map-tags::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
.map-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  color: rgba(255,253,248,0.88);
  background: rgba(255,255,255,0.08);
  font-size: 12px;
  cursor: pointer;
  font: inherit;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.map-tag:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}
.map-tag.star {
  border-color: rgba(232,185,102,0.5);
  color: var(--gold);
  background: linear-gradient(135deg, rgba(232,185,102,0.2), rgba(217,166,174,0.15));
  box-shadow: 0 2px 8px rgba(232,185,102,0.2);
}
.map-tag.star:hover {
  border-color: rgba(232,185,102,0.7);
  box-shadow: 0 4px 12px rgba(232,185,102,0.3);
  transform: translateY(-2px) scale(1.05);
}
.map-tag.is-selected,
.map-tag.star.is-selected {
  border-color: rgba(255, 193, 7, 0.95);
  color: #fff8dc;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.42), rgba(52, 122, 201, 0.32));
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.14), 0 8px 22px rgba(52, 122, 201, 0.24);
}
.latest-city {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid rgba(255,193,7,0.5);
  border-radius: 999px;
  color: #ffc107;
  background: linear-gradient(135deg, rgba(255,193,7,0.3), rgba(255,152,0,0.3));
  box-shadow: 0 0 20px rgba(255,193,7,0.4);
  font-weight: 700;
  animation: pulse-gold 2s ease-in-out infinite;
}
.latest-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #ffc107;
  font-size: 16px;
  cursor: pointer;
}
.latest-marker .marker-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255,193,7,0.3);
  animation: marker-pulse-animation 2s ease-out infinite;
}
.latest-marker i {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 10px rgba(255,193,7,0.8);
}
.her-footprint-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50% 50% 50% 4px;
  color: #fff8dc;
  background: linear-gradient(135deg, #c8a768, #9f7d3a);
  box-shadow: 0 5px 16px rgba(30, 24, 12, 0.34), 0 0 18px rgba(200, 167, 104, 0.48);
  cursor: pointer;
  transform: rotate(-45deg);
}
.her-footprint-marker i {
  transform: rotate(45deg);
  font-size: 15px;
}
.latest-marker.is-selected,
.fan-light-marker.is-selected {
  z-index: 5;
  animation: city-sync-pop 1.25s ease-in-out 2;
}
.her-footprint-marker.is-selected {
  z-index: 5;
  animation: city-pin-sync-pop 1.25s ease-in-out 2;
  box-shadow: 0 0 0 8px rgba(255, 193, 7, 0.18), 0 0 30px rgba(255, 193, 7, 0.78);
}
.fan-light-marker {
  display: grid;
  place-items: center;
  width: var(--marker-size, 24px);
  height: var(--marker-size, 24px);
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  color: #10131f;
  background: linear-gradient(135deg, #c8a768, #e8a832);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 
    0 0 24px rgba(232,185,102,0.42),
    inset 0 1px 2px rgba(255,255,255,0.3);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 200ms ease;
}
/* 标记点悬停效果 - 增加缩放和外发光 */
.fan-light-marker:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35),
    0 0 16px rgba(232,185,102,0.5),
    inset 0 1px 2px rgba(255,255,255,0.4);
  z-index: 10;
}
/* 标记点选中状态 - 单一金色光晕更突出 */
.fan-light-marker.is-selected {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--gold, #d8a853),
    0 0 28px rgba(232,185,102,0.65),
    0 0 48px rgba(232,185,102,0.35);
  animation: marker-selected-pulse 2s ease-in-out infinite;
}
/* 选中状态脉冲动画 */
@keyframes marker-selected-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--gold, #d8a853),
      0 0 28px rgba(232,185,102,0.65),
      0 0 48px rgba(232,185,102,0.35);
  }
  50% {
    box-shadow: 0 0 0 4px var(--gold, #d8a853),
      0 0 36px rgba(232,185,102,0.75),
      0 0 60px rgba(232,185,102,0.45);
  }
}
/* 未点亮城市标记 - 虚线边框表示未激活 */
.fan-light-marker[data-density="quiet"] {
  border-style: dashed;
  opacity: 0.6;
}
.fan-light-marker[data-density="quiet"]:hover {
  opacity: 0.85;
}
body[data-theme="light"] .resonance-section .fan-light-marker {
  color: transparent !important;
}
body[data-theme="dark"] .resonance-section .fan-light-marker {
  color: #10131f !important;
}
/* MapLibre Popup 样式优化 - 与整体设计语言一致 */
body[data-theme="dark"] .resonance-section .maplibregl-popup-content {
  padding: 14px 18px !important;
  border-radius: 12px !important;
  color: rgba(255, 253, 248, 0.92) !important;
  background: rgba(17, 23, 34, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body[data-theme="light"] .resonance-section .maplibregl-popup-content {
  padding: 14px 18px !important;
  border-radius: 12px !important;
  color: #1a1f2e !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 40px rgba(18, 32, 48, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
/* Popup 关闭按钮 */
body[data-theme="dark"] .resonance-section .maplibregl-popup-close-button,
body[data-theme="light"] .resonance-section .maplibregl-popup-close-button {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 253, 248, 0.7) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  font-size: 18px !important;
  line-height: 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
body[data-theme="dark"] .resonance-section .maplibregl-popup-close-button:hover,
body[data-theme="light"] .resonance-section .maplibregl-popup-close-button:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.1) !important;
}
/* Popup 箭头样式 */
body[data-theme="dark"] .resonance-section .maplibregl-popup-tip,
body[data-theme="light"] .resonance-section .maplibregl-popup-tip {
  border-top-color: rgba(17, 23, 34, 0.96) !important;
}
body[data-theme="light"] .resonance-section .maplibregl-popup-tip {
  border-top-color: rgba(255, 255, 255, 0.96) !important;
}
/* 地图容器内文本颜色 - 确保城市标签可见 */
body[data-theme="dark"] .resonance-section .map-container {
  color: #fff !important;
}
body[data-theme="dark"] .resonance-section .map-wrapper {
  color: #fff !important;
}
body[data-theme="dark"] .resonance-section .map-panel {
  color: #fff !important;
}
/* 确保地图内所有文本在深色主题下可见 */
body[data-theme="dark"] .resonance-section .map-container * {
  color: #000 !important;
  text-shadow: none !important;
}
body[data-theme="light"] .resonance-section .map-container * {
  color: #1a1f2e !important;
  text-shadow: none !important;
}
/* 搜索栏优化 - 增加视觉层次感 */
.map-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  /* 增加上边距与面板头部分离 */
  margin-top: 8px;
}
/* 搜索输入框容器 - 增强聚焦反馈 */
.search-input-wrapper {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  transition: all 0.3s ease;
  /* 增加内阴影增强立体感 */
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.search-input-wrapper:focus-within {
  border-color: rgba(232,185,102,0.5);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(232,185,102,0.1),
    inset 0 1px 3px rgba(0,0,0,0.1);
}
.search-input-wrapper i {
  color: rgba(255,253,248,0.5);
  font-size: 14px;
  transition: color 0.3s ease;
}
.search-input-wrapper:focus-within i {
  color: var(--gold);
}
.search-input-wrapper input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: rgba(255,253,248,0.92);
  background: transparent;
  font: inherit;
  font-size: 14px;
}
.search-input-wrapper input::placeholder,
.light-message-input::placeholder {
  color: rgba(255,253,248,0.4);
}
.search-btn,
.manual-btn,
.set-coord-btn {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: rgba(255,253,248,0.88);
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-btn,
.set-coord-btn {
  padding: 10px 16px;
}
.manual-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.manual-btn i {
  font-size: 14px;
}
.search-btn:hover,
.manual-btn:hover,
.set-coord-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
}
.search-btn:active,
.manual-btn:active,
.set-coord-btn:active {
  transform: translateY(0);
}
.manual-coord-panel {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.coord-inputs {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.coord-input-group {
  display: grid;
  flex: 1;
  gap: 6px;
}
.coord-input-group label,
.stat-box-header {
  color: rgba(255,253,248,0.55);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.coord-input-group input,
.light-message-input {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: rgba(255,253,248,0.92);
  background: rgba(255,255,255,0.08);
  outline: none;
  font: inherit;
}
.coord-input-group input {
  padding: 8px 10px;
  font-size: 13px;
}
.set-coord-btn {
  border-color: rgba(232,185,102,0.4);
  color: var(--gold);
  background: rgba(232,185,102,0.15);
}
.selected-location-info {
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(232,185,102,0.12), rgba(232,185,102,0.04));
  animation: slideDown 0.3s ease;
  /* 增加与其他元素的视觉分离 */
  margin: 8px 0;
  border-radius: 10px;
  margin-left: 8px;
  margin-right: 8px;
  width: auto;
}
.location-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: rgba(255,253,248,0.85);
  font-size: 13px;
  font-weight: 600;
}
.location-info-header i {
  color: var(--gold);
  font-size: 14px;
}
.clear-btn {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: rgba(255,253,248,0.6);
  background: rgba(255,255,255,0.05);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.clear-btn:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);
  color: rgba(255,253,248,0.9);
}
.location-details p {
  margin: 6px 0;
  color: rgba(255,253,248,0.75);
  font-size: 13px;
}
.match-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(232,185,102,0.5);
  border-radius: 20px;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(232,185,102,0.2), rgba(217,166,174,0.15));
  font-size: 12px;
  font-weight: 600;
}
.match-badge i {
  font-size: 10px;
}
.light-message-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  padding-right: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,253,248,0.92);
  font-size: 14px;
  transition: all 0.3s ease;
}
.light-message-input:focus {
  outline: none;
  border-color: rgba(232,185,102,0.5);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(232,185,102,0.1);
}
/* 留言输入包装器 */
.message-input-wrapper {
  position: relative;
  flex: 1;
}
/* 字符计数器 */
.char-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 11px;
  color: rgba(255,253,248,0.4);
  pointer-events: none;
  transition: color 0.2s ease;
}
.char-counter.warning {
  color: #f59e0b;
}
.char-counter.danger {
  color: #ef4444;
  font-weight: 600;
}
/* 操作按钮区域优化 - 增加视觉层次 */
.map-actions {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  /* 增加与上方元素的间距 */
  margin-top: 8px;
}
.light-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 130px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold), #e8a832);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 12px rgba(232, 185, 102, 0.25);
  overflow: hidden;
}
.light-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232,185,102,0.45);
}
.light-btn:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 185, 102, 0.25);
}
.light-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: linear-gradient(135deg, #888, #666);
  box-shadow: none;
}
/* 点亮按钮 Loading 状态 */
.light-btn.is-loading {
  pointer-events: none;
}
.light-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: btn-shimmer 1.2s infinite;
}
@keyframes btn-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.light-btn.is-loading .btn-text {
  opacity: 0;
}
.light-btn.is-loading .btn-icon {
  animation: spin 0.8s linear infinite;
}
/* 点亮按钮成功状态 */
.light-btn.is-success {
  background: linear-gradient(135deg, #4ade80, #22c55e) !important;
  pointer-events: none;
}
.light-btn.is-success::after {
  display: none;
}
.light-btn.is-success .btn-icon::before {
  content: "\f00c";
}
/* 点亮成功标记闪烁 */
@keyframes lit-flash {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.4);
    filter: brightness(1.6);
  }
  50% {
    transform: scale(0.95);
    filter: brightness(1.2);
  }
}
.map-stats {
  display: grid;
  gap: 1px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.06);
}
.stat-box {
  transition: background 0.3s ease;
}
.stat-box:hover {
  background: rgba(23,26,42,0.7);
}
.stat-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,253,248,0.6);
  font-size: 12px;
  font-weight: 600;
}
.stat-box-header i {
  color: var(--gold);
  font-size: 12px;
}
.stat-box-content {
  color: rgba(255,253,248,0.85);
  font-size: 13px;
  line-height: 1.6;
}
.resonance-notice {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  padding: 24px 36px;
  border: 1px solid rgba(232,185,102,0.4);
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.12));
  box-shadow: 0 24px 80px rgba(0,0,0,0.4), 0 0 60px rgba(232,185,102,0.2);
  backdrop-filter: blur(20px);
  transform: translate(-50%, -50%);
  animation: resonanceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.resonance-notice h3 {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 22px;
}
.resonance-notice p {
  margin: 0;
  color: rgba(255,253,248,0.88);
  font-size: 15px;
}
.map-toast {
  position: fixed;
  z-index: 2600;
  bottom: 40px;
  left: 50%;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(255,253,248,0.92);
  background: rgba(23,26,42,0.9);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
}
.map-toast.show {
  opacity: 1;
}
/* 脉冲金动画 */
@keyframes pulse-gold {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255,193,7,0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(255,193,7,0.7);
  }
}
/* 标记脉冲动画 */
@keyframes marker-pulse-animation {
  from {
    opacity: 0.8;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.5);
  }
}
@keyframes city-sync-pop {
  0%, 100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.22);
  }
}
@keyframes city-pin-sync-pop {
  0%, 100% {
    transform: rotate(-45deg) scale(1);
  }
  45% {
    transform: rotate(-45deg) scale(1.22);
  }
}
/* 共鸣入场动画 */
@keyframes resonanceIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* 星光闪烁动画 */
@keyframes twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}
/* 点亮动画 */
@keyframes lightUp {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* 涟漪扩散动画 */
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/* 弹跳动画 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.map-panel,
.broadcast-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
}
.panel-title h3 {
  margin: 0;
  color: rgba(251,248,244,0.96);
  font-weight: 900;
}
.panel-title span {
  color: rgba(251,248,244,0.58);
  font-size: 12px;
}
.map-city {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--size, 18px);
  height: var(--size, 18px);
  border: 0;
  border-radius: 999px;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.map-city::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot, var(--gold));
  box-shadow: 0 0 18px var(--glow, rgba(200,167,104,0.78)), 0 0 0 var(--halo, 10px) rgba(255,255,255,0.04);
}
.map-city::after {
  content: attr(data-city);
  position: absolute;
  left: 50%;
  top: 18px;
  width: max-content;
  padding: 3px 7px;
  border-radius: 999px;
  color: rgba(251,248,244,0.82);
  background: rgba(8,11,20,0.36);
  font-size: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.map-city.her-current::before,
.map-city.is-lit::before {
  animation: resonancePulse 1.8s ease-in-out infinite;
}
.map-city.is-selected {
  z-index: 5;
}
.map-city.is-selected::before {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 9px rgba(255, 193, 7, 0.18), 0 0 28px rgba(255, 193, 7, 0.82);
  animation: city-sync-pop 1.25s ease-in-out 2;
}
.map-city.is-selected::after {
  color: #fff8dc;
  background: rgba(22, 35, 58, 0.78);
}
.sound-line {
  position: absolute;
  z-index: 18;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(251,248,244,0.9), rgba(200,167,104,0.88), rgba(155,211,207,0.82), transparent);
  transform-origin: left center;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(200,167,104,0.34));
  animation: soundLineFly 1.2s ease-out forwards;
}
.resonance-section.is-static-map .map-view {
  position: relative;
  overflow: hidden;
}
.resonance-section.is-static-map .map-view::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.resonance-section :where(.map-tag, .her-footprint-marker, .latest-marker, .fan-light-marker, .map-city):focus-visible {
  outline: 3px solid rgba(255, 240, 201, 0.92);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(42, 111, 172, 0.22), 0 0 28px rgba(224, 189, 116, 0.28);
}
.resonance-stats {
  flex-wrap: wrap;
}
.resonance-stats span {
  flex: 1 1 190px;
  border: 1px solid rgba(255,255,255,0.14);
}
.resonance-stats b {
  display: block;
  transition: transform 0.3s ease;
}
/* 数字增加时的弹跳效果 */
.resonance-stats b.increment {
  animation: number-bounce 0.4s ease;
}
@keyframes number-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(232, 185, 102, 0.6));
  }
  75% {
    transform: scale(0.92);
  }
}
/* 统计数字变化动画 */
.stat-box b {
  display: inline-block;
  transition: transform 0.3s ease;
}
.stat-box b.increment {
  animation: number-bounce 0.4s ease;
}
.resonance-lower-grid {
  display: grid;
}
.broadcast-panel {
  padding: 18px;
}
.panel-title {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.broadcast-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}
.broadcast-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  padding: 12px 14px;
  color: rgba(251,248,244,0.78);
  font-size: 14px;
  animation: broadcastIn 0.35s ease both;
}
.broadcast-item strong {
  color: var(--gold);
}
.broadcast-item .b-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 12px;
}
.broadcast-item.light .b-icon {
  background: rgba(232,185,102,0.2);
  color: var(--gold);
}
.broadcast-item.light .b-icon::before {
  content: "✨";
}
.broadcast-item.footprint .b-icon {
  background: rgba(135,198,232,0.2);
  color: #87c6e8;
}
.broadcast-item.footprint .b-icon::before {
  content: "📍";
}
.broadcast-item.same-city .b-icon {
  background: rgba(74,222,128,0.2);
  color: #4ade80;
}
.broadcast-item.same-city .b-icon::before {
  content: "🔗";
}
.broadcast-item.tide .b-icon {
  background: rgba(168,85,247,0.2);
  color: #a855f7;
}
.broadcast-item.tide .b-icon::before {
  content: "🌊";
}
.broadcast-item.repeat .b-icon {
  background: rgba(245,158,11,0.2);
  color: #f59e0b;
}
.broadcast-item.repeat .b-icon::before {
  content: "⚠️";
}
.broadcast-item.notice .b-icon {
  background: rgba(255,255,255,0.1);
  color: rgba(255,253,248,0.5);
}
.broadcast-item.notice .b-icon::before {
  content: "ℹ";
}
.broadcast-item .b-text {
  flex: 1;
  min-width: 0;
}
.resonance-modal,
.tide-ripple {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(7,9,18,0.58);
  backdrop-filter: blur(16px);
}
.resonance-modal.show,
.tide-ripple.show {
  display: grid;
}
.resonance-dialog {
  position: relative;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 34px 120px rgba(0,0,0,0.38);
}
.resonance-close {
  position: absolute;
  right: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--paper);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
}
.nickname-login-form,
.nickname-register-form {
  display: none;
}
.nickname-login-form.active,
.nickname-register-form.active {
  display: grid;
}
.nickname-login-form label,
.nickname-register-form label {
  display: flex;
  flex-direction: column;
}
.nickname-login-form input,
.nickname-register-form input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: var(--paper);
  font-size: 16px;
}
.nickname-login-form input::placeholder,
.nickname-register-form input::placeholder {
  color: rgba(255,255,255,0.44);
}
.nickname-login-form input:focus,
.nickname-register-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.12);
}
.tide-ripple {
  text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(200,167,104,0.28), transparent 18%),
    rgba(7,9,18,0.7);
}
.tide-ripple::before,
.tide-ripple::after {
  content: "";
  position: absolute;
  width: 260px;
  aspect-ratio: 1;
  border: 1px solid rgba(251,248,244,0.42);
  border-radius: 50%;
  animation: tideWave 1.8s ease-out infinite;
}
.tide-ripple::after {
  animation-delay: 0.58s;
}
.tide-ripple div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}
.tide-ripple strong {
  color: var(--gold);
  font-size: clamp(42px, 8vw, 92px);
}
.tide-ripple span {
  color: var(--paper);
  font-size: clamp(18px, 2.6vw, 32px);
}
@keyframes resonancePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px var(--glow), 0 0 0 var(--halo) rgba(255,255,255,0.04);
  }
  50% {
    transform: scale(1.35);
    box-shadow: 0 0 26px var(--glow), 0 0 0 calc(var(--halo) + 10px) rgba(255,255,255,0.02);
  }
}
@keyframes soundLineFly {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  20% {
    opacity: 1;
  }
  to {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes broadcastIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tideWave {
  from {
    opacity: 0.8;
    transform: scale(0.2);
  }
  to {
    opacity: 0;
    transform: scale(4.2);
  }
}
@media (max-width: 980px) {
  .resonance-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .map-panel {
    border-radius: 16px;
  }
}
@media (max-width: 560px) {
  .map-wrapper {
    min-height: 0;
    gap: 16px;
    padding: 2px;
  }
  .map-panel {
    border-radius: 14px;
  }
  /* 移动端面板头部优化 - 更好视觉呼吸感 */
  .map-panel-header {
    padding: 14px 16px;
    min-height: 54px;
    font-size: 14px;
    gap: 12px;
  }
  .map-panel-header i {
    font-size: 16px;
  }
  .map-panel-header .city-count {
    padding: 5px 10px;
    font-size: 11px;
  }
  .map-tags {
    padding: 10px 12px;
    max-height: 90px;
  }
  /* 移动端搜索栏优化 - 增加间距和可用性 */
  .map-search-bar {
    padding: 12px;
    gap: 10px;
    margin-top: 6px;
  }
  .search-input-wrapper {
    padding: 10px 14px;
  }
  .search-btn,
  .manual-btn,
  .set-coord-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  .manual-btn,
  .light-btn {
    width: 100%;
  }
  .search-btn,
  .set-coord-btn {
    width: 100%;
  }
  .map-city::after {
    font-size: 11px;
  }
  .map-stats {
    grid-template-columns: 1fr;
  }
  .stat-box {
    padding: 14px;
  }
  .selected-location-info {
    padding: 12px;
  }
  .resonance-btn {
    width: 100%;
  }
}
/* ============ 共映 · 点亮最终设计优化 ============ */
.resonance-section {
  --res-ink: #101525;
  --res-panel: rgba(16, 21, 37, 0.74);
  --res-panel-strong: rgba(20, 27, 47, 0.92);
  --res-line: rgba(255, 255, 255, 0.15);
  --res-text: #fffaf2;
  --res-muted: rgba(255, 250, 242, 0.66);
  --res-faint: rgba(255, 250, 242, 0.44);
  --res-gold: #e0bd74;
  --res-coral: #ee9ca8;
  --res-aqua: #9bd3cf;
  --res-lilac: #b8b2ff;
  width: min(1280px, calc(100% - clamp(28px, 5vw, 72px)));
  color: var(--res-text);
}
.resonance-heading {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: clamp(24px, 4vw, 42px);
  text-align: center;
}
.resonance-heading h2 {
  margin: 0;
  font-family: "STSong", "Songti SC", "Noto Serif SC", "Microsoft YaHei", serif;
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 900;
  line-height: 1.05;
}
.resonance-heading p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 250, 242, 0.74);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.85;
}
.resonance-heading-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.resonance-heading-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: rgba(255, 250, 242, 0.78);
  background: rgba(255, 255, 255, 0.055);
  font-size: 13px;
}
.resonance-heading-metrics i {
  color: var(--res-gold);
}
.resonance-shell {
  padding: clamp(18px, 3vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(224, 189, 116, 0.12), transparent 28%, rgba(155, 211, 207, 0.12) 72%, transparent),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(10, 14, 27, 0.7);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.resonance-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.86fr) minmax(340px, 1.14fr);
  align-items: stretch;
  gap: 14px;
  margin-bottom: 18px;
}
.resonance-login-state,
.resonance-actions {
  border: 1px solid var(--res-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}
.resonance-login-state {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 16px;
  color: var(--res-muted);
  font-size: 14px;
  line-height: 1.45;
}
.resonance-login-state i {
  color: var(--res-aqua);
}
.resonance-actions {
  justify-content: flex-end;
  padding: 8px;
}
.resonance-btn,
.search-btn,
.manual-btn,
.set-coord-btn,
.light-btn {
  min-height: 42px;
  border-radius: 8px;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
.resonance-btn {
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 250, 242, 0.86);
  background: rgba(255, 255, 255, 0.07);
}
.resonance-btn.primary,
.light-btn {
  color: #111827;
  background: linear-gradient(135deg, #fff0c9 0%, var(--res-gold) 48%, var(--res-coral) 100%);
  box-shadow: 0 12px 30px rgba(224, 189, 116, 0.24);
}
.map-wrapper {
  grid-template-columns: minmax(320px, 0.92fr) minmax(380px, 1.08fr);
  gap: 18px;
  min-height: 0;
  padding: 0;
}
.map-panel,
.broadcast-panel {
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    var(--res-panel);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.map-panel:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}
.map-panel-header {
  min-height: 60px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
}
.map-panel-header .header-content {
  min-width: 0;
}
.map-panel-header .header-content span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.her-map-panel .map-panel-header {
  background: linear-gradient(135deg, rgba(224, 189, 116, 0.18), rgba(255, 255, 255, 0.035));
}
.fan-map-panel .map-panel-header {
  background: linear-gradient(135deg, rgba(155, 211, 207, 0.15), rgba(238, 156, 168, 0.09));
}
.fan-map-panel .map-panel-header i,
.fan-map-panel .city-count {
  color: var(--res-aqua);
}
.map-panel-header .city-count {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}
.map-view {
  min-height: clamp(360px, 38vw, 520px);
  background: radial-gradient(circle at 50% 46%, rgba(155, 211, 207, 0.13), transparent 32%),
    linear-gradient(145deg, rgba(8, 12, 24, 0.54), rgba(17, 22, 39, 0.86));
}
.map-search-bar,
.map-actions {
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.search-input-wrapper,
.light-message-input,
.coord-input-group input,
.nickname-login-form input,
.nickname-register-form input {
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}
.map-tags {
  max-height: 116px;
  padding: 12px;
}
.map-tag,
.latest-city,
.match-badge {
  border-radius: 8px;
}
.map-stats {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.stat-box {
  padding: 14px;
  background: rgba(16, 21, 37, 0.72);
}
.stat-box-header {
  margin-bottom: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.stat-box-content,
.broadcast-item {
  line-height: 1.75;
}
.resonance-section .map-tags {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(245, 250, 255, 0.58)),
    rgba(255, 255, 255, 0.18);
  scroll-snap-type: x proximity;
}
.resonance-section .map-tag {
  position: relative;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px 0 11px;
  border: 1px solid rgba(31, 97, 158, 0.16);
  border-radius: 999px;
  color: #245782 !important;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 750;
  scroll-snap-align: start;
}
.resonance-section .map-tag i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #2a6fac !important;
  background: rgba(42, 111, 172, 0.1);
  font-size: 10px;
}
.resonance-section .map-tag:hover {
  border-color: rgba(31, 97, 158, 0.28);
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}
.resonance-section .map-tag.is-selected,
.resonance-section .map-tag.star.is-selected {
  border-color: rgba(201, 156, 72, 0.52);
  color: #183a5a !important;
  background: linear-gradient(135deg, rgba(255, 248, 224, 0.94), rgba(235, 247, 255, 0.92));
  box-shadow: inset 4px 0 0 rgba(201, 156, 72, 0.72), 0 8px 22px rgba(42, 111, 172, 0.14);
}
.resonance-section .map-tag.is-selected i {
  color: #8a6420 !important;
  background: rgba(201, 156, 72, 0.16);
}
.resonance-section .latest-city {
  padding-right: 10px;
  border-color: rgba(201, 156, 72, 0.34);
  color: #183a5a !important;
  background: linear-gradient(135deg, rgba(255, 248, 224, 0.94), rgba(255, 255, 255, 0.76));
  box-shadow: 0 8px 18px rgba(201, 156, 72, 0.12);
  animation: none;
}
.resonance-section .latest-city span {
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #805f1a !important;
  background: rgba(201, 156, 72, 0.16);
  font-size: 10px;
}
.resonance-section .map-stats {
  grid-template-columns: minmax(0, 1.08fr) minmax(190px, 0.92fr);
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(31, 97, 158, 0.1);
  background: rgba(255, 255, 255, 0.2);
}
.resonance-section .stat-box {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(31, 97, 158, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}
.resonance-section .stat-box-content {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  max-height: 88px;
  overflow: auto;
  line-height: 1.45;
}
.resonance-section .her-footprint-marker {
  border: 2px solid rgba(255, 255, 255, 0.96);
  color: #fff7df !important;
  background: linear-gradient(135deg, #c59a48, #7f5c23);
  box-shadow: 0 7px 18px rgba(47, 38, 18, 0.28), 0 0 0 7px rgba(197, 154, 72, 0.16);
}
.resonance-section .her-footprint-marker i {
  color: #fff7df !important;
}
.resonance-section .latest-marker {
  color: #b98313 !important;
  filter: drop-shadow(0 4px 10px rgba(185, 131, 19, 0.32));
}
.resonance-section .latest-marker i {
  color: #b98313 !important;
}
.resonance-section .fan-light-marker {
  border: 2px solid rgba(255, 255, 255, 0.96);
  color: #17324d !important;
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.92) 0 17%, transparent 18%),
    linear-gradient(135deg, #d8eef7, #9bc6de 48%, #c79ab5);
  box-shadow: 0 7px 18px rgba(42, 111, 172, 0.2), 0 0 0 7px rgba(42, 111, 172, 0.1);
  font-size: 10px;
}
.resonance-section .fan-light-marker.is-selected {
  color: #183a5a !important;
  box-shadow: 0 0 0 9px rgba(201, 156, 72, 0.2), 0 0 30px rgba(42, 111, 172, 0.28);
}
body[data-theme="light"] .resonance-section .her-footprint-marker,
body[data-theme="dark"] .resonance-section .her-footprint-marker {
  color: #fff7df !important;
}
body[data-theme="light"] .resonance-section .her-footprint-marker i,
body[data-theme="dark"] .resonance-section .her-footprint-marker i {
  color: #fff7df !important;
}
body[data-theme="light"] .resonance-section .fan-light-marker,
body[data-theme="dark"] .resonance-section .fan-light-marker {
  color: #17324d !important;
}
body[data-theme="light"] .resonance-section .map-tag,
body[data-theme="dark"] .resonance-section .map-tag {
  color: #245782 !important;
}
body[data-theme="light"] .resonance-section .map-tag i,
body[data-theme="dark"] .resonance-section .map-tag i {
  color: #2a6fac !important;
}
body[data-theme="light"] .resonance-section .map-tag.is-selected,
body[data-theme="dark"] .resonance-section .map-tag.is-selected {
  color: #183a5a !important;
}
body[data-theme="light"] .resonance-section .map-tag.is-selected i,
body[data-theme="dark"] .resonance-section .map-tag.is-selected i {
  color: #8a6420 !important;
}
.resonance-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.resonance-stats span {
  min-height: 86px;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(16, 21, 37, 0.68);
  color: var(--res-muted);
  font-size: 13px;
  line-height: 1.45;
}
.resonance-stats b {
  margin-bottom: 4px;
  color: var(--res-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
}
.resonance-lower-grid {
  grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
  gap: 18px;
}
.panel-title h3 {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  letter-spacing: 0;
}
.panel-title span {
  letter-spacing: 0;
  text-transform: none;
}
.broadcast-list {
  max-height: 360px;
}
.resonance-modal {
  background: radial-gradient(circle at 50% 30%, rgba(224, 189, 116, 0.18), transparent 30%),
    rgba(5, 8, 16, 0.72);
}
.resonance-dialog {
  display: grid;
  gap: 18px;
  width: min(660px, 100%);
  padding: clamp(22px, 4vw, 34px);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045)),
    var(--res-panel-strong);
}
.resonance-close {
  border-radius: 8px;
}
.login-choice {
  padding-right: 42px;
}
.login-choice h3,
.nickname-login-form h3,
.nickname-register-form h3 {
  margin: 4px 0 2px;
  font-family: "STSong", "Songti SC", "Noto Serif SC", "Microsoft YaHei", serif;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.18;
}
.login-choice p {
  margin: 0;
  color: var(--res-muted);
  font-size: 14px;
  line-height: 1.8;
}
.nickname-login-form,
.nickname-register-form {
  gap: 13px;
}
.nickname-login-form label,
.nickname-register-form label {
  gap: 7px;
}
.nickname-login-form span,
.nickname-register-form span {
  color: rgba(255, 250, 242, 0.72);
  font-size: 13px;
}
.nickname-login-form input,
.nickname-register-form input {
  min-height: 48px;
}
.login-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.login-action-row .resonance-btn {
  width: 100%;
}
@media (max-width: 980px) {
  .resonance-toolbar,
  .map-wrapper,
  .resonance-lower-grid {
    grid-template-columns: 1fr;
  }
  .resonance-actions {
    justify-content: flex-start;
  }
  .resonance-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .resonance-section {
    width: min(100% - 20px, 1280px);
  }
  .resonance-shell {
    padding: 14px;
    border-radius: 12px;
  }
  .resonance-heading-metrics,
  .resonance-actions,
  .map-search-bar,
  .map-actions,
  .login-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .map-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .map-view {
    min-height: 300px;
  }
  .resonance-stats,
  .map-stats {
    grid-template-columns: 1fr;
  }
  .resonance-dialog {
    padding: 22px;
  }
}
.footer-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.footer-content p {
  margin: 8px 0;
  color: rgba(251,248,244,0.64);
  font-size: 14px;
  line-height: 1.6;
}
/* Final map-page polish: city atlas, tighter mobile rhythm, and clearer marker states. */
#resonance.resonance-section {
  --atlas-ink: #121927;
  --atlas-paper: #fff8ea;
  --atlas-gold: #d8ad58;
  --atlas-gold-deep: #8f641c;
  --atlas-blue: #346f9c;
  --atlas-aqua: #8ed5cf;
  --atlas-coral: #ec9c9b;
  --atlas-rose: #f5c1cc;
  --atlas-line: rgba(255, 244, 216, 0.18);
  width: min(1240px, calc(100% - clamp(24px, 4vw, 58px)));
}
#resonance .resonance-heading {
  gap: 10px;
  margin-bottom: clamp(18px, 3vw, 30px);
}
#resonance .resonance-heading h2 {
  color: rgba(255, 250, 242, 0.98);
  text-shadow: 0 8px 28px rgba(83, 57, 30, 0.32);
}
#resonance .resonance-heading::after {
  content: "";
  width: min(260px, 52vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 173, 88, 0.72), rgba(142, 213, 207, 0.5), transparent);
}
#resonance .resonance-heading-metrics {
  gap: 8px;
}
#resonance .resonance-heading-metrics span {
  min-height: 32px;
  border-color: rgba(255, 248, 232, 0.18);
  background: rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(12px) saturate(1.08);
}
#resonance .resonance-shell {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    linear-gradient(116deg, rgba(216, 173, 88, 0.14), transparent 34%, rgba(142, 213, 207, 0.12) 68%, rgba(236, 156, 155, 0.09)),
    rgba(12, 17, 31, 0.82);
  box-shadow: 0 28px 72px rgba(7, 10, 20, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
#resonance .resonance-toolbar {
  grid-template-columns: minmax(230px, 0.9fr) minmax(280px, 1.1fr);
  gap: 10px;
  margin-bottom: 14px;
}
#resonance .resonance-login-state,
#resonance .resonance-actions {
  min-height: 48px;
  border-color: rgba(255, 248, 232, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}
#resonance .resonance-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#resonance .resonance-btn.primary,
#resonance .light-btn {
  border: 0;
  color: #17202c;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), transparent 30%),
    linear-gradient(135deg, #fff1c9 0%, var(--atlas-gold) 46%, var(--atlas-coral) 100%);
  box-shadow: 0 12px 26px rgba(216, 173, 88, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
#resonance .map-wrapper {
  grid-template-columns: minmax(310px, 0.9fr) minmax(390px, 1.1fr);
  gap: 16px;
}
#resonance .map-panel,
#resonance .broadcast-panel {
  border-radius: 10px;
  border-color: rgba(255, 248, 232, 0.15);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(17, 23, 40, 0.78);
}
#resonance .map-panel:hover {
  transform: translateY(-1px);
}
#resonance .map-panel-header {
  min-height: 56px;
  border-bottom-color: rgba(255, 248, 232, 0.12);
}
#resonance .her-map-panel .map-panel-header {
  background: linear-gradient(135deg, rgba(216, 173, 88, 0.22), rgba(255, 255, 255, 0.035));
}
#resonance .fan-map-panel .map-panel-header {
  background: linear-gradient(135deg, rgba(142, 213, 207, 0.19), rgba(245, 193, 204, 0.11));
}
#resonance .map-view {
  isolation: isolate;
  min-height: clamp(350px, 36vw, 500px);
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.9), rgba(229, 244, 247, 0.7)),
    #eef5f3;
}
#resonance.is-libre-map .map-view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 246, 223, 0.14), rgba(226, 244, 244, 0.12)),
    radial-gradient(circle at 30% 20%, rgba(216, 173, 88, 0.1), transparent 38%),
    radial-gradient(circle at 76% 72%, rgba(142, 213, 207, 0.12), transparent 36%);
  mix-blend-mode: multiply;
}
#resonance .maplibregl-control-container,
#resonance .maplibregl-marker {
  position: relative;
  z-index: 4;
}
#resonance .map-search-bar,
#resonance .map-actions {
  padding: 10px;
  background: linear-gradient(90deg, rgba(255, 244, 218, 0.08), rgba(142, 213, 207, 0.07)),
    rgba(255, 255, 255, 0.04);
}
#resonance .search-input-wrapper,
#resonance .light-message-input,
#resonance .coord-input-group input {
  min-height: 42px;
  border-color: rgba(255, 248, 232, 0.16);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#resonance .search-btn,
#resonance .manual-btn,
#resonance .set-coord-btn {
  border-color: rgba(255, 248, 232, 0.16);
  background: rgba(255, 255, 255, 0.07);
}
#resonance .her-footprint-marker {
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 14%;
  transform: rotate(-45deg);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0 13%, transparent 14%),
    linear-gradient(135deg, #f0cd80, #a06e20);
  box-shadow: 0 10px 18px rgba(80, 54, 17, 0.28),
    0 0 0 7px rgba(216, 173, 88, 0.16);
}
#resonance .her-footprint-marker i {
  transform: rotate(45deg);
}
#resonance .latest-marker {
  color: var(--atlas-gold-deep) !important;
  filter: drop-shadow(0 9px 18px rgba(147, 101, 28, 0.3));
}
#resonance .fan-light-marker {
  border-color: rgba(255, 255, 255, 0.92);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.94) 0 16%, transparent 17%),
    linear-gradient(135deg, #e2f8f5 0%, var(--atlas-aqua) 42%, var(--atlas-rose) 100%);
  box-shadow: 0 8px 18px rgba(52, 111, 156, 0.18),
    0 0 0 6px rgba(142, 213, 207, 0.12);
}
#resonance .fan-light-marker.is-overlap {
  box-shadow: 0 0 0 4px rgba(216, 173, 88, 0.28),
    0 0 0 10px rgba(142, 213, 207, 0.14),
    0 12px 24px rgba(52, 111, 156, 0.22);
}
#resonance .fan-light-marker.is-owned {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.96) 0 16%, transparent 17%),
    linear-gradient(135deg, #fff0bf 0%, var(--atlas-gold) 48%, var(--atlas-coral) 100%);
}
#resonance .fan-light-marker.is-tide-hot {
  animation: fanTidePulse 1.7s ease-in-out infinite;
}
#resonance .fan-light-marker.is-selected,
#resonance .her-footprint-marker.is-selected {
  box-shadow: 0 0 0 5px rgba(255, 248, 232, 0.42),
    0 0 0 12px rgba(216, 173, 88, 0.22),
    0 16px 32px rgba(7, 12, 24, 0.24);
}
#resonance .resonance-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#resonance .resonance-stats span {
  min-height: 74px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(17, 23, 40, 0.7);
}
#resonance .broadcast-list {
  max-height: 220px;
}
body[data-theme="light"] #resonance.resonance-section {
  --atlas-ink: #102033;
  color: #102033;
}
body[data-theme="light"] #resonance .resonance-heading h2 {
  color: #1a3454 !important;
  text-shadow: none;
}
body[data-theme="light"] #resonance .resonance-shell,
body[data-theme="light"] #resonance .map-panel,
body[data-theme="light"] #resonance .broadcast-panel,
body[data-theme="light"] #resonance .resonance-stats span {
  border-color: rgba(44, 97, 143, 0.13) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(241, 248, 251, 0.64)),
    linear-gradient(116deg, rgba(216, 173, 88, 0.1), transparent 40%, rgba(142, 213, 207, 0.13));
}
body[data-theme="light"] #resonance .map-search-bar,
body[data-theme="light"] #resonance .map-actions,
body[data-theme="light"] #resonance .map-stats {
  background: rgba(246, 250, 252, 0.78) !important;
}
body[data-theme="light"] #resonance .search-input-wrapper,
body[data-theme="light"] #resonance .light-message-input,
body[data-theme="light"] #resonance .coord-input-group input {
  border-color: rgba(44, 97, 143, 0.16) !important;
  background: rgba(255, 255, 255, 0.86) !important;
}
@keyframes fanTidePulse {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.18) brightness(1.08);
  }
}
@media (max-width: 720px) {
  #resonance.resonance-section {
    width: min(100% - 16px, 1240px);
  }
  #resonance .resonance-heading {
    gap: 8px;
    margin-bottom: 16px;
  }
  #resonance .resonance-heading h2 {
    font-size: clamp(30px, 10vw, 42px);
  }
  #resonance .resonance-heading p {
    font-size: 14px;
    line-height: 1.68;
  }
  #resonance .resonance-heading-metrics {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: start;
    width: 100%;
    max-width: calc(100vw - 34px);
    overflow-x: auto;
    padding-bottom: 2px;
  }
  #resonance .resonance-shell {
    padding: 10px;
    border-radius: 12px;
  }
  #resonance .resonance-toolbar {
    gap: 8px;
    margin-bottom: 10px;
  }
  #resonance .resonance-login-state {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }
  #resonance .resonance-actions {
    padding: 6px;
  }
  #resonance .map-wrapper {
    gap: 12px;
  }
  #resonance .map-panel-header {
    min-height: 50px;
    padding: 11px 12px;
  }
  #resonance .map-view {
    min-height: 280px;
  }
  #resonance .map-tags {
    min-height: 48px;
    padding: 8px;
  }
  #resonance .map-search-bar,
  #resonance .map-actions {
    gap: 8px;
    padding: 8px;
  }
  #resonance .resonance-stats {
    grid-template-columns: 1fr;
    margin: 12px 0;
  }
  #resonance .resonance-stats span {
    min-height: 66px;
    padding: 13px;
  }
  #resonance .broadcast-list {
    max-height: 180px;
  }
}
/* Desktop fit pass: keep the twin-map dashboard inside the first viewport. */
@media (min-width: 981px) {
  #resonance.resonance-section {
    width: min(1760px, calc(100% - 48px));
  }
  #resonance .resonance-heading {
    display: none;
  }
  #resonance .resonance-shell {
    padding: 14px;
  }
  #resonance .resonance-toolbar {
    grid-template-columns: minmax(220px, 0.82fr) minmax(280px, 1.18fr);
    margin-bottom: 10px;
  }
  #resonance .map-wrapper {
    grid-template-columns: minmax(360px, 0.92fr) minmax(440px, 1.08fr);
    align-items: start;
    gap: 12px;
  }
  #resonance .map-panel-header {
    min-height: 48px;
    padding: 10px 12px;
  }
  #resonance .map-view {
    flex: 0 0 auto;
    min-height: 0;
    height: clamp(300px, 33vh, 410px);
  }
  #resonance .map-tags {
    min-height: 44px;
    padding: 7px 9px;
  }
  #resonance .map-tag {
    min-height: 30px;
    padding-inline: 9px 10px;
    font-size: 12px;
  }
  #resonance .map-search-bar,
  #resonance .map-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 8px;
  }
  #resonance .map-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  #resonance .search-input-wrapper,
  #resonance .light-message-input,
  #resonance .coord-input-group input,
  #resonance .resonance-btn,
  #resonance .search-btn,
  #resonance .manual-btn,
  #resonance .set-coord-btn,
  #resonance .light-btn {
    min-height: 38px;
  }
  #resonance .selected-location-info {
    padding: 9px 12px;
  }
  #resonance .location-details p {
    margin: 2px 0;
    line-height: 1.45;
  }
  #resonance .map-stats,
  #resonance .resonance-stats,
  #resonance .resonance-lower-grid {
    display: none;
  }
}
@media (min-width: 1280px) {
  #resonance .map-view {
    height: clamp(320px, 36vh, 460px);
  }
}
/* ==================== BGM 鑳屾櫙闊充箰鎺у埗鎸夐挳 ==================== */
.bgm-control {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  border: 1px solid rgba(217, 166, 174, 0.5);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(217, 166, 174, 0.2);
}
.bgm-control:hover {
  background: rgba(217, 166, 174, 0.3);
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(217, 166, 174, 0.4);
}
/* 闊崇鍥炬爣 */
.bgm-icon {
  color: var(--rose);
  font-size: 18px;
  /* 鏃嬭浆鍔ㄧ敾锛岄粯璁ゆ殏鍋? */
  animation: musicSpin 3s linear infinite;
  animation-play-state: paused;
}
/* 鎾斁鏃跺惎鐢ㄦ棆杞?*/
.bgm-control.playing .bgm-icon {
  animation-play-state: running;
}
@keyframes musicSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 澹版尝鏉″鍣?*/
.bgm-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
}
/* 澹版尝鏉?*/
.bgm-wave span {
  width: 3px;
  background: linear-gradient(135deg, var(--rose-soft) 0%, var(--aqua) 50%, var(--rose-soft) 100%);
  border-radius: 3px;
  animation: waveAnim 0.5s ease infinite alternate;
  animation-play-state: paused;
}
.bgm-control.playing .bgm-wave span {
  animation-play-state: running;
}
/* Final social-card text fitting: no clipped names or IDs. */
#social .social-card {
  padding-top: 34px;
}
#social .social-card h3 {
  width: calc(100% - 122px);
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all;
}
#social .social-card strong {
  letter-spacing: 0;
}
#social .social-card:nth-child(3) strong,
#social .social-card:nth-child(4) strong,
#social .social-card:nth-child(5) strong {
  width: 100%;
  margin-top: 34px;
}
#social .social-card:nth-child(3) p,
#social .social-card:nth-child(4) p,
#social .social-card:nth-child(5) p {
  margin-top: 20px;
}
#social .social-card:nth-child(6) h3 {
  font-size: clamp(27px, 1.55vw, 31px);
}
@media (max-width: 1320px) {
  #social .social-card h3,
  #social .social-card strong {
    width: calc(100% - 102px);
  }
  #social .social-card:nth-child(3) strong,
  #social .social-card:nth-child(4) strong,
  #social .social-card:nth-child(5) strong {
    width: 100%;
  }
}
@media (max-width: 560px) {
  #social .social-card h3,
  #social .social-card strong {
    width: calc(100% - 82px);
  }
  #social .social-card:nth-child(3) strong,
  #social .social-card:nth-child(4) strong,
  #social .social-card:nth-child(5) strong {
    width: 100%;
    white-space: normal !important;
  }
}
/* 涓嶅悓澹版尝鏉＄殑寤惰繜锛屽舰鎴愯捣浼忔晥鏋?*/
.bgm-wave span:nth-child(1) {
  height: 8px;
  animation-delay: 0s;
}
.bgm-wave span:nth-child(2) {
  height: 16px;
  animation-delay: 0.1s;
}
.bgm-wave span:nth-child(3) {
  height: 12px;
  animation-delay: 0.2s;
}
.bgm-wave span:nth-child(4) {
  height: 18px;
  animation-delay: 0.3s;
}
.bgm-wave span:nth-child(5) {
  height: 10px;
  animation-delay: 0.4s;
}
@keyframes waveAnim {
  0% {
    height: 5px;
  }
  100% {
    height: 20px;
  }
}

.resonance-coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 720px);
  margin: 28px auto 0;
  padding: 16px 24px;
  border: 1px solid rgba(224, 186, 105, 0.28);
  border-radius: 999px;
  color: rgba(255, 244, 216, 0.82);
  background: linear-gradient(90deg, rgba(19, 30, 48, 0.42), rgba(46, 57, 78, 0.68), rgba(19, 30, 48, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 48px rgba(4, 10, 22, 0.18);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.25vw, 18px);
  font-style: italic;
  letter-spacing: 0.045em;
  text-align: center;
}

.resonance-coming-soon i {
  color: #e1bd73;
  font-size: 0.88em;
  filter: drop-shadow(0 0 10px rgba(225, 189, 115, 0.36));
}

body[data-theme="light"] .resonance-coming-soon,
:root[data-theme="light"] .resonance-coming-soon {
  color: #30445e;
  border-color: rgba(154, 115, 43, 0.24);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.54), rgba(245, 238, 220, 0.82), rgba(255, 255, 255, 0.54));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 16px 38px rgba(35, 53, 77, 0.1);
}

.resonance-section[data-preview-only="true"] :is(
  #lightMineBtn,
  #lightCityBtn,
  .city-letter-submit,
  #recordVoiceBtn,
  #confirmLoginBtn,
  #confirmRegisterBtn
)[disabled] {
  cursor: not-allowed;
  filter: saturate(0.42);
  opacity: 0.52;
}

/* ============ 深色主题变量定义 ============ */
:root {
  /* ============ 背景色系统 (符合WCAG对比度标准) ============ */
  --aesthetic-bg-0: #05070b;
  /* 纯黑基底，增强层次感 */
  --aesthetic-bg-1: #0a0d14;
  /* 主内容区域背景 */
  --aesthetic-bg-2: #111620;
  /* 卡片/面板背景 */
  --aesthetic-bg-3: #1a202c;
  /* 悬停/高亮背景 */
  --aesthetic-bg-4: #242d3d;
  /* 深度背景（模态框） */
  --aesthetic-bg-5: #2d3748;
  /* 最浅背景（激活状态） */
  /* ============ 装饰色彩系统（极光配色方案）=========== */
  --aesthetic-rose: rgba(239, 159, 178, 0.52);
  --aesthetic-apricot: rgba(234, 179, 8, 0.42);
  --aesthetic-blue: rgba(147, 197, 253, 0.45);
  --aesthetic-lilac: rgba(192, 132, 252, 0.38);
  --aesthetic-cyan: rgba(34, 211, 238, 0.35);
  --aesthetic-pink: rgba(251, 113, 133, 0.4);
  --aesthetic-peach: rgba(251, 191, 36, 0.28);
  /* ============ 玻璃效果系统（多层级透明度控制）=========== */
  --glass-surface: rgba(255, 255, 255, 0.08);
  /* 基础玻璃表面 */
  --glass-surface-soft: rgba(255, 255, 255, 0.12);
  /* 柔和玻璃表面 */
  --glass-surface-medium: rgba(255, 255, 255, 0.16);
  /* 中等玻璃表面 */
  --glass-surface-strong: rgba(255, 255, 255, 0.24);
  /* 强玻璃表面 */
  --glass-edge: rgba(255, 255, 255, 0.42);
  /* 玻璃边框 */
  --glass-edge-soft: rgba(255, 255, 255, 0.22);
  /* 柔和玻璃边框 */
  --glass-edge-subtle: rgba(255, 255, 255, 0.14);
  /* 细微玻璃边框 */
  /* ============ 文字色彩系统 (确保WCAG AA对比度 ≥4.5:1) ============ */
  --text-main: #fefefe;
  /* 白色，对比度 15:1 */
  --text-soft: #f1f5f9;
  /* 浅灰色，对比度 12:1 */
  --text-muted: #cbd5e1;
  /* 中灰色，对比度 7:1 */
  --text-subtle: #94a3b8;
  /* 细微文字，对比度 5:1 */
  --text-disabled: #64748b;
  /* 禁用状态，对比度 4:1 */
  --text-accent: #f9a8d4;
  /* 玫瑰粉色，对比度 10:1 */
  /* ============ 强调色系统（专业级色彩搭配）=========== */
  --accent-gold: #fbbf24;
  /* 金色（品牌主色） */
  --accent-gold-light: #fcd34d;
  /* 亮金色 */
  --accent-gold-dark: #f59e0b;
  /* 深金色 */
  --accent-rose: #f472b6;
  /* 玫瑰色 */
  --accent-rose-light: #f9a8d4;
  /* 浅玫瑰色 */
  --accent-rose-dark: #ec4899;
  /* 深玫瑰色 */
  --accent-blue: #60a5fa;
  /* 蓝色 */
  --accent-cyan: #22d3ee;
  /* 青色（科技感） */
  --accent-purple: #a78bfa;
  /* 紫色（创意感） */
  /* ============ 间距系统 ============ */
  --section-space: clamp(96px, 10vw, 168px);
  /* ====================
     统一字体层级系统
     ==================== */
  --font-xs: clamp(10px, 0.75vw, 12px);
  --font-sm: clamp(12px, 0.9vw, 14px);
  --font-base: clamp(14px, 1.05vw, 16px);
  --font-md: clamp(15px, 1.15vw, 17px);
  --font-lg: clamp(16px, 1.25vw, 19px);
  --font-xl: clamp(18px, 1.4vw, 21px);
  --font-2xl: clamp(20px, 1.6vw, 24px);
  --font-3xl: clamp(24px, 2vw, 30px);
  --font-4xl: clamp(28px, 2.4vw, 36px);
  --font-5xl: clamp(34px, 3vw, 44px);
  --font-6xl: clamp(42px, 4vw, 56px);
  --font-7xl: clamp(52px, 5vw, 72px);
  --font-8xl: clamp(64px, 6vw, 90px);
  --font-9xl: clamp(80px, 8vw, 110px);
  /* 行高系统（根据字体大小优化） */
  --leading-tight: 1.08;
  --leading-snug: 1.18;
  --leading-normal: 1.45;
  --leading-relaxed: 1.65;
  --leading-loose: 1.85;
  /* 字间距系统（精细控制） */
  --tracking-tightest: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.045em;
  --tracking-wider: 0.085em;
  --tracking-widest: 0.2em;
  /* 字重系统 */
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  /* 段落间距 */
  --paragraph-spacing-tight: 0.5em;
  --paragraph-spacing-normal: 1em;
  --paragraph-spacing-relaxed: 1.5em;
  /* 首字母下沉 */
  --drop-cap-size: 3;
  --drop-cap-lines: 3;
  /* 主题模式 */
  --theme-mode: dark;
}
/* 浅色主题 - 蓝粉莫兰迪配色方案 */
:root[data-theme="light"] {
  /* ============ 背景色系统 (符合WCAG对比度标准) ============ */
  --aesthetic-bg-0: #fefefe;
  --aesthetic-bg-1: #faf9f7;
  --aesthetic-bg-2: #f5f3f0;
  --aesthetic-bg-3: #edebe7;
  --aesthetic-bg-4: #e5e2dd;
  --aesthetic-bg-5: #dbd8d3;
  /* ============ 莫兰迪色彩系统 ============ */
  --morandi-rose: rgba(230, 190, 200, 0.45);
  /* 柔和玫瑰粉 */
  --morandi-blush: rgba(235, 205, 215, 0.38);
  /* 淡腮红 */
  --morandi-sky: rgba(180, 210, 230, 0.42);
  /* 宁静天空蓝 */
  --morandi-blue: rgba(165, 195, 220, 0.35);
  /* 莫兰迪蓝 */
  --morandi-lavender: rgba(205, 185, 220, 0.32);
  /* 淡薰衣草紫 */
  --morandi-peach: rgba(245, 215, 195, 0.36);
  /* 柔桃色 */
  --morandi-cream: rgba(250, 240, 225, 0.85);
  /* 奶油米色 */
  --morandi-mint: rgba(200, 225, 215, 0.35);
  /* 薄荷绿 */
  --morandi-sage: rgba(185, 200, 185, 0.3);
  /* 鼠尾草绿 */
  /* ============ 强调色系统 ============ */
  --accent-gold: #c9a227;
  /* 温润金 */
  --accent-amber: #d4a017;
  /* 琥珀色 */
  --accent-rose-gold: #c9a0a5;
  /* 玫瑰金 */
  --accent-rose-warm: #d4a5ab;
  /* 暖玫瑰 */
  --accent-sand: #d4c4a8;
  /* 沙色 */
  /* ============ 渐变色彩 ============ */
  --aesthetic-rose: var(--morandi-rose);
  --aesthetic-apricot: var(--morandi-peach);
  --aesthetic-blue: var(--morandi-sky);
  --aesthetic-lilac: var(--morandi-lavender);
  /* ============ 玻璃效果系统 ============ */
  --glass-surface: rgba(255, 255, 255, 0.82);
  --glass-surface-soft: rgba(255, 255, 255, 0.65);
  --glass-surface-medium: rgba(255, 255, 255, 0.75);
  --glass-surface-strong: rgba(255, 255, 255, 0.92);
  --glass-edge: rgba(180, 175, 170, 0.4);
  --glass-edge-soft: rgba(180, 175, 170, 0.22);
  --glass-edge-subtle: rgba(180, 175, 170, 0.14);
  --glass-shadow: rgba(0, 0, 0, 0.08);
  --glass-shadow-light: rgba(0, 0, 0, 0.04);
  --glass-shadow-medium: rgba(0, 0, 0, 0.1);
  /* ============ 文字色彩系统 (确保WCAG AA对比度 ≥4.5:1) ============ */
  --text-main: #1e1b24;
  /* 深灰紫，对比度 15:1 */
  --text-soft: #3d3846;
  /* 中深灰紫，对比度 10:1 */
  --text-muted: #6b6675;
  /* 中灰紫，对比度 6:1 */
  --text-subtle: #8a8492;
  /* 细微文字，对比度 5:1 */
  --text-disabled: #9a94a2;
  /* 浅灰紫，对比度 4:1 */
  --text-accent: #9d6b7c;
  /* 玫瑰棕，对比度 8:1 */
  --text-accent-gold: #a68b3d;
  /* 金色强调文字 */
  /* ============ 边框色彩系统 ============ */
  --border-soft: rgba(180, 175, 170, 0.25);
  --border-medium: rgba(180, 175, 170, 0.35);
  --border-strong: rgba(180, 175, 170, 0.5);
  /* ============ 阴影系统 ============ */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 12px 36px rgba(0, 0, 0, 0.08);
  --shadow-glow-gold: 0 0 24px rgba(201, 162, 39, 0.15);
  --shadow-glow-rose: 0 0 24px rgba(201, 160, 165, 0.15);
  /* ============ 圆角系统 ============ */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  /* ============ 过渡动画系统 ============ */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* ============ 标题艺术字系统 ============ */
  --heading-gradient-primary: linear-gradient(135deg, #4a3f6b 0%, #6b5a9e 20%, #9b7fc9 45%, #b794d4 65%, #c8a5e0 85%, #d4b8e8 100%);
  --heading-gradient-secondary: linear-gradient(135deg, #5d4f80 0%, #7a6ba8 30%, #a089d1 55%, #c4a8e8 80%, #d8c2ef 100%);
  --heading-gradient-accent: linear-gradient(135deg, #6b4a8a 0%, #8b6ab9 35%, #b595d6 60%, #d4b8e8 85%, #e5d4f0 100%);
  --heading-shadow: 0 4px 20px rgba(155, 127, 201, 0.2);
  --heading-shadow-hover: 0 8px 30px rgba(155, 127, 201, 0.35);
  --heading-glow: 0 0 30px rgba(155, 127, 201, 0.25);
  /* ============ 主题模式 ============ */
  --theme-mode: light;
}
/* 根元素背景色 */
html {
  background: var(--aesthetic-bg-0);
}
/* 
 * 深色主题全局背景效果
 * 多层叠加实现深度感与极光效果：
 *   1. 左上角粉色光晕 (52%透明度)
 *   2. 右上角蓝色光晕 (45%透明度)
 *   3. 底部金色光晕 (32%透明度)
 *   4. 中心紫色光晕 (38%透明度)
 *   5. 青色点缀光晕 (35%透明度)
 *   6. 基础渐变背景
 */
body {
  color: var(--text-main);
  background: radial-gradient(ellipse at 12% 10%, rgba(239, 159, 178, 0.52), transparent 36rem),
    radial-gradient(ellipse at 88% 14%, rgba(147, 197, 253, 0.45), transparent 38rem),
    radial-gradient(ellipse at 46% 92%, rgba(251, 191, 36, 0.32), transparent 36rem),
    radial-gradient(ellipse at 52% 50%, rgba(192, 132, 252, 0.38), transparent 42rem),
    radial-gradient(ellipse at 28% 68%, rgba(34, 211, 238, 0.35), transparent 28rem),
    radial-gradient(ellipse at 76% 72%, rgba(251, 113, 133, 0.38), transparent 32rem),
    linear-gradient(145deg, var(--aesthetic-bg-0) 0%, var(--aesthetic-bg-1) 35%, var(--aesthetic-bg-2) 70%, var(--aesthetic-bg-1) 100%);
}
/* 
 * 背景装饰层容器
 * 使用 ::before 和 ::after 创建多层视觉效果
 * z-index: -3 确保在所有内容下方
 */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
/* 
 * 极光漂移动画层（第一层）
 * 多层彩色光晕叠加，配合模糊滤镜和缓慢漂移动画
 * 动画周期：24秒，无限循环，创造流动的极光效果
 */
body::before {
  background: radial-gradient(circle at 16% 22%, var(--aesthetic-rose), transparent 32rem),
    radial-gradient(circle at 78% 28%, var(--aesthetic-blue), transparent 36rem),
    radial-gradient(circle at 56% 74%, var(--aesthetic-apricot), transparent 34rem),
    radial-gradient(circle at 42% 40%, var(--aesthetic-lilac), transparent 30rem),
    radial-gradient(circle at 26% 66%, var(--aesthetic-cyan), transparent 26rem),
    radial-gradient(circle at 74% 70%, var(--aesthetic-pink), transparent 28rem);
  filter: blur(22px) saturate(1.12);
  opacity: 0.92;
  animation: auroraDrift 24s ease-in-out infinite alternate;
}
/* 
 * 网格纹理层（第二层）
 * 112px x 112px 的细微网格 + 顶部光晕
 * mask-image 实现上下暗化中间亮的效果
 */
body::after {
  z-index: -2;
  background: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px),
    radial-gradient(circle at 50% 8%, rgba(255,255,255,0.14), transparent 34rem);
  background-size: 112px 112px, 112px 112px, auto;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.78), rgba(0,0,0,0.4) 52%, rgba(0,0,0,0.78));
  opacity: 0.62;
}
/* 浅色主题 body 样式覆盖 */
[data-theme="light"] body::before {
  animation: auroraDriftLight 26s ease-in-out infinite alternate;
}
[data-theme="light"] body::after {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.62), rgba(0,0,0,0.25) 48%, rgba(0,0,0,0.62));
}
/* 浅色主题流动动画 */
@keyframes auroraDriftLight {
  0% {
    transform: translate3d(-1.8%, -1.2%, 0) scale(1);
    opacity: 0.68;
  }
  50% {
    transform: translate3d(1.5%, 1.4%, 0) scale(1.04);
    opacity: 0.76;
  }
  100% {
    transform: translate3d(-0.8%, 1.6%, 0) scale(1.02);
    opacity: 0.72;
  }
}
/* ============ 主题切换按钮组件 ============ */
/* 
 * 固定定位的圆形切换按钮
 * 功能：在深色/浅色主题之间切换
 * 通过 data-theme 属性控制主题状态
 * 
 * 设计特点：
 * - 毛玻璃背景效果 (backdrop-filter: blur)
 * - 悬停缩放动画
 * - 发光边框效果
 * - 可访问性支持 (focus-visible)
 */
.theme-toggle {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 100;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(199, 210, 254, 0.35);
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.7);
  color: rgba(224, 231, 254, 0.9);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3),
    0 0 20px rgba(199, 210, 254, 0.1);
}
.theme-toggle:hover {
  border-color: rgba(199, 210, 254, 0.6);
  background: rgba(51, 65, 85, 0.8);
  color: rgba(241, 245, 254, 1);
  transform: scale(1.08);
  box-shadow: 0 6px 30px rgba(0,0,0,0.4),
    0 0 30px rgba(199, 210, 254, 0.25);
}
/* 键盘焦点样式 - 可访问性 */
.theme-toggle:focus-visible {
  outline: 2px solid rgba(232, 185, 102, 0.6);
  outline-offset: 4px;
}
/* 深色主题 - 月亮图标月光发光效果 */
html:not([data-theme="light"]) .theme-toggle i {
  filter: drop-shadow(0 0 8px rgba(199, 210, 254, 0.7));
}
[data-theme="light"] .theme-toggle {
  border-color: rgba(253, 224, 71, 0.5);
  background: rgba(255,255,255,0.92);
  color: #f59e0b;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25),
    0 0 20px rgba(245, 158, 11, 0.15);
}
[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(253, 224, 71, 0.8);
  background: rgba(255,255,255,0.98);
  color: #d97706;
  box-shadow: 0 6px 30px rgba(245, 158, 11, 0.35),
    0 0 30px rgba(245, 158, 11, 0.25);
}
/* 太阳图标发光效果 */
[data-theme="light"] .theme-toggle i {
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}
/* ============ 浅色主题组件样式优化 ============ */
/* 浅色主题导航栏 */
[data-theme="light"] .site-nav a,
[data-theme="light"] .site-search-inline input,
[data-theme="light"] .site-search-inline button {
  color: var(--text-soft);
}
[data-theme="light"] .site-nav a.active,
[data-theme="light"] .site-nav a:hover {
  text-shadow: none;
}
/* 浅色主题搜索框 - 统一优化 */
[data-theme="light"] .site-search-inline {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.82));
  border-color: rgba(170, 160, 165, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: all 0.25s ease;
}
[data-theme="light"] .site-search-inline:hover {
  border-color: rgba(170, 160, 165, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86));
}
[data-theme="light"] .site-search-inline:focus-within {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
}
/* 浅色主题区块背景 */
[data-theme="light"] main > section:not(#home)::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.45)),
    radial-gradient(circle at 18% 12%, var(--morandi-rose), transparent 34%),
    radial-gradient(circle at 88% 38%, var(--morandi-sky), transparent 32%);
  border: 1px solid rgba(200, 190, 180, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
/* 浅色主题社交卡片 */
[data-theme="light"] .social-card {
  border-color: rgba(58, 48, 82, 0.04);
}
[data-theme="light"] .social-card h3 {
  color: var(--text-main);
}
[data-theme="light"] .social-card strong {
  color: var(--text-accent);
}
[data-theme="light"] .social-card p {
  color: var(--text-soft);
}
[data-theme="light"] .social-action {
  color: var(--accent-gold);
}
[data-theme="light"] .social-action:hover {
  color: rgba(210, 175, 120, 0.95);
}
/* 浅色主题标签 */
[data-theme="light"] .tag {
  background: rgba(230, 190, 200, 0.3);
  color: var(--text-accent);
}
[data-theme="light"] .tag-special {
  background: rgba(210, 175, 120, 0.25);
  color: rgba(160, 130, 90, 0.9);
}
/* 浅色主题标题 */
[data-theme="light"] .section-title {
  color: var(--text-main);
}
[data-theme="light"] .section-subtitle {
  color: var(--text-muted);
}
/* ============ 浅色主题标题艺术字样式 ============ */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
  background: var(--heading-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
[data-theme="light"] h1::before,
[data-theme="light"] h2::before,
[data-theme="light"] h3::before {
  content: none;
}
[data-theme="light"] h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: none;
  transition: all var(--transition-medium);
}
[data-theme="light"] h1:hover {
  filter: brightness(1.05);
  text-shadow: var(--heading-shadow-hover), var(--heading-glow);
}
[data-theme="light"] h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
[data-theme="light"] h3 {
  font-weight: 600;
  background: var(--heading-gradient-secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] h3::before {
  background: var(--heading-gradient-secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* 艺术字装饰线 */
/* 艺术字悬停上浮效果 */
/* 渐变色标题工具类 */
/* 浅色主题按钮 */
[data-theme="light"] button:not(.nav-toggle):not(.theme-toggle):not(.social-action) {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(200, 190, 180, 0.3);
  color: var(--text-main);
}
[data-theme="light"] button:not(.nav-toggle):not(.theme-toggle):not(.social-action):hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent-gold);
  color: var(--text-main);
}
/* 浅色主题输入框 - 统一优化的文本框组件 */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  border: 1.5px solid rgba(170, 160, 165, 0.35);
  transition: all 0.25s ease;
}
/* 禁用状态 */
/* 错误状态 */
/* 浅色主题分割线 */
[data-theme="light"] hr {
  border-color: rgba(200, 190, 180, 0.2);
}
/* 浅色主题链接 */
[data-theme="light"] a:not(.social-action):not(.brand-mark) {
  color: var(--text-accent);
}
[data-theme="light"] a:not(.social-action):not(.brand-mark):hover {
  color: rgba(145, 120, 130, 0.95);
  text-decoration: underline;
}
/* ============ 浅色主题卡片组件视觉优化 ============ */
/* 基础卡片样式 */
[data-theme="light"] .quote-panel,
[data-theme="light"] .reference-grid article,
[data-theme="light"] .schedule-card,
[data-theme="light"] .life-card,
[data-theme="light"] .video-card,
[data-theme="light"] .work-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, transparent 50%);
  border: 1px solid rgba(200, 190, 180, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(20px) saturate(1.15);
  transition: transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium),
    background var(--transition-medium);
}
/* ============ 浅色主题音乐播放器 - 图片提取背景色设计 ============ */
[data-theme="light"] .music-player {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(245, 240, 248, 0.95) 0%, rgba(238, 232, 245, 0.9) 30%, rgba(225, 235, 245, 0.88) 70%, rgba(235, 230, 242, 0.92) 100%),
    /* 左上角淡紫粉色光晕 - 提取自图片左上区域 */
    radial-gradient(ellipse at 12% 10%, rgba(232, 213, 242, 0.45) 0%, transparent 40%),
    /* 右上角淡蓝色光晕 - 提取自图片右上区域 */
    radial-gradient(ellipse at 88% 8%, rgba(205, 229, 245, 0.4) 0%, transparent 42%),
    /* 底部淡紫白色光晕 - 提取自图片底部区域 */
    radial-gradient(ellipse at 50% 92%, rgba(248, 244, 250, 0.6) 0%, transparent 45%),
    /* 中心柔和紫色光晕 */
    radial-gradient(ellipse at 45% 50%, rgba(225, 215, 240, 0.3) 0%, transparent 38%);
  border: 1px solid rgba(220, 210, 230, 0.35);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(180, 170, 190, 0.08),
    /* 内发光边缘 - 通透感 */
    0 0 0 1px rgba(255, 255, 255, 0.85) inset,
    /* 底部柔和阴影 */
    inset 0 -2px 12px rgba(180, 170, 190, 0.03),
    /* 顶部紫蓝色微妙光晕 */
    0 0 50px rgba(200, 190, 220, 0.08);
  backdrop-filter: blur(28px) saturate(1.15);
  transition: transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium);
}
/* 音乐播放器动态光效层 - 匹配图片色彩 */
[data-theme="light"] .music-player::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      135deg,
      transparent 0%,
      rgba(232, 213, 242, 0.35) 25%,
      rgba(210, 200, 230, 0.28) 50%,
      rgba(205, 229, 245, 0.32) 75%,
      transparent 100%
    );
  opacity: 0.75;
  animation: musicGlowFlow 8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* 音乐播放器边缘光效 - 匹配图片色彩 */
[data-theme="light"] .music-player::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 30%),
    /* 底部阴影边框 */
    linear-gradient(0deg, rgba(180, 170, 190, 0.05) 0%, transparent 30%),
    /* 左侧淡紫粉渐变 */
    linear-gradient(90deg, rgba(232, 213, 242, 0.25) 0%, transparent 25%),
    /* 右侧淡蓝渐变 */
    linear-gradient(270deg, rgba(205, 229, 245, 0.22) 0%, transparent 25%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* 音乐播放器悬停效果 */
[data-theme="light"] .music-player:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 160, 165, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08),
    /* 内发光增强 */
    0 0 0 1px rgba(201, 160, 165, 0.2) inset,
    /* 底部阴影 */
    inset 0 -2px 12px rgba(0, 0, 0, 0.03),
    /* 玫瑰金发光效果 */
    0 0 80px rgba(201, 160, 165, 0.12),
    /* 金色发光效果 */
    0 0 60px rgba(201, 162, 39, 0.08);
}
[data-theme="light"] .music-player:hover::before {
  opacity: 1;
}
/* 音乐流动光效动画 */
@keyframes musicGlowFlow {
  0%, 100% {
    opacity: 0.5;
    transform: translateX(-8%) translateY(-6%) scale(0.92) rotate(-2deg);
  }
  25% {
    opacity: 0.9;
    transform: translateX(4%) translateY(-3%) scale(1.01) rotate(1deg);
  }
  50% {
    opacity: 0.7;
    transform: translateX(6%) translateY(5%) scale(1.05) rotate(2deg);
  }
  75% {
    opacity: 0.95;
    transform: translateX(-2%) translateY(4%) scale(0.98) rotate(-1deg);
  }
}
/* 浅色主题下主役作品取消填充色 */
[data-theme="light"] .work-card-lead {
  background: transparent;
  box-shadow: none;
}
/* 卡片顶部高光条 */
[data-theme="light"] .quote-panel::before,
[data-theme="light"] .reference-grid article::before,
[data-theme="light"] .schedule-card::before,
[data-theme="light"] .life-card::before,
[data-theme="light"] .video-card::before,
[data-theme="light"] .work-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(201, 160, 165, 0.35),
    rgba(201, 162, 39, 0.25),
    transparent);
  pointer-events: none;
}
/* 卡片悬停效果 */
[data-theme="light"] .quote-panel:hover,
[data-theme="light"] .reference-grid article:hover,
[data-theme="light"] .schedule-card:hover,
[data-theme="light"] .life-card:hover,
[data-theme="light"] .video-card:hover,
[data-theme="light"] .work-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 160, 165, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 0 40px rgba(201, 160, 165, 0.1),
    0 0 60px rgba(201, 162, 39, 0.06);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, transparent 50%);
}
/* 浅色主题下主役作品hover时也取消填充色 */
[data-theme="light"] .work-card-lead:hover {
  background: transparent;
  box-shadow: none;
}
/* 社交卡片特殊优化 */
[data-theme="light"] .social-card {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(58, 48, 82, 0.04);
  border-radius: var(--radius-md);
  box-shadow: none;
  backdrop-filter: blur(8px) saturate(1);
}
[data-theme="light"] .social-card:hover {
  transform: translateY(-6px);
  border-color: rgba(188, 126, 160, 0.15);
  box-shadow: none;
}
/* 画廊图片卡片优化 */
[data-theme="light"] .gallery-item {
  border: 1px solid rgba(200, 190, 180, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
}
[data-theme="light"] .gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(201, 160, 165, 0.4);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.09),
    0 0 0 1px rgba(201, 160, 165, 0.25) inset,
    0 0 50px rgba(201, 160, 165, 0.1);
}
/* 画廊图片卡片边框光效 */
[data-theme="light"] .gallery-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
    linear-gradient(270deg, rgba(201, 160, 165, 0.15) 0%, transparent 30%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
[data-theme="light"] .gallery-item:hover::before {
  opacity: 1;
}
/* 画廊时间线卡片优化 - 浅色主题 */
[data-theme="light"] .gallery-month-heading:hover,
[data-theme="light"] .gallery-date-heading:hover {
  border-color: rgba(180, 170, 190, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(200, 195, 205, 0.2) inset !important;
}
/* 画廊日期分组卡片 */
[data-theme="light"] .gallery-date-group {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.75)),
    linear-gradient(to top, rgba(200, 195, 190, 0.08), transparent 30%);
  border: 1px solid rgba(200, 190, 180, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
[data-theme="light"] .gallery-date-group:hover {
  border-color: rgba(201, 160, 165, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(201, 160, 165, 0.2) inset,
    0 0 50px rgba(201, 160, 165, 0.08);
}
/* 视频卡片优化 */
[data-theme="light"] .video-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8));
  border: 1px solid rgba(200, 190, 180, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
[data-theme="light"] .video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(201, 162, 39, 0.15) inset,
    0 0 35px rgba(201, 162, 39, 0.08);
}
/* 参考资料卡片 */
[data-theme="light"] .reference-grid article {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78)),
    radial-gradient(ellipse at 0% 0%, rgba(205, 185, 220, 0.12), transparent 50%);
}
/* 资料徽章卡片 */
[data-theme="light"] .profile-badges span {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(58, 48, 82, 0.03);
  border-radius: var(--radius-md);
  box-shadow: none;
  backdrop-filter: blur(6px) saturate(1);
}
/* 简介模块容器 */
[data-theme="light"] .profile-copy {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(58, 48, 82, 0.03);
  border-radius: 24px;
  box-shadow: none;
  backdrop-filter: blur(10px) saturate(1);
}
[data-theme="light"] .profile-badges span:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(201, 162, 39, 0.15) inset,
    0 0 30px rgba(201, 162, 39, 0.08);
}
/* 资料文本卡片 */
[data-theme="light"] .profile-text-card {
  background: radial-gradient(circle at 0% 0%, rgba(230, 190, 200, 0.1), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(185, 210, 220, 0.08), transparent 50%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
  border: 1px solid rgba(200, 190, 180, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
/* 资料文本卡片顶部光效 */
[data-theme="light"] .profile-text-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(201, 162, 39, 0.35),
    transparent);
}
/* 时间表卡片特殊样式 */
[data-theme="light"] .schedule-card.has-poster {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8)),
    linear-gradient(to bottom, rgba(201, 162, 39, 0.04), transparent 30%);
}
[data-theme="light"] .schedule-card.has-thumb {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72)),
    rgba(245, 243, 240, 0.4) !important;
}
/* 时间表状态指示条 */
[data-theme="light"] .schedule-card::before {
  background: rgba(200, 190, 180, 0.3);
  box-shadow: 0 0 16px rgba(200, 190, 180, 0.15);
}
[data-theme="light"] .schedule-card.status-upcoming::before {
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.8), rgba(201, 162, 39, 0.5));
  box-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
}
[data-theme="light"] .schedule-card.status-live::before {
  background: linear-gradient(180deg, rgba(165, 195, 220, 0.8), rgba(165, 195, 220, 0.5));
  box-shadow: 0 0 20px rgba(165, 195, 220, 0.3);
}
/* 卡片装饰光效工具类 */
/* 浅色主题导航切换按钮 */
[data-theme="light"] .nav-toggle span {
  background: var(--text-soft);
}
[data-theme="light"] .nav-toggle:hover span {
  background: var(--text-main);
}
/* ============ 浅色主题文本框样式优化 ============ */
/* 基础输入框样式 */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  /* 背景渐变 - 营造层次感 */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 243, 240, 0.8) 100%);
  /* 边框样式 - 柔和的灰色边框 */
  border: 1.5px solid rgba(180, 175, 170, 0.35);
  border-radius: var(--radius-md);
  /* 内阴影 - 增强立体感 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  /* 文字样式 - 确保可读性 */
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-base);
  line-height: var(--leading-normal);
  /* 内边距 - 舒适的输入区域 */
  padding: 12px 16px;
  /* 过渡动画 - 平滑状态变化 */
  transition: all var(--transition-fast),
    box-shadow var(--transition-medium);
  /* 宽度 - 适应容器 */
  width: 100%;
  box-sizing: border-box;
  /* 光标 - 文本输入指示 */
  cursor: text;
}
/* 输入框悬停状态 */
[data-theme="light"] input[type="text"]:hover,
[data-theme="light"] input[type="email"]:hover,
[data-theme="light"] input[type="password"]:hover,
[data-theme="light"] input[type="number"]:hover,
[data-theme="light"] input[type="tel"]:hover,
[data-theme="light"] input[type="url"]:hover,
[data-theme="light"] textarea:hover,
[data-theme="light"] select:hover {
  border-color: rgba(180, 175, 170, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 243, 240, 0.85) 100%);
}
/* 输入框焦点状态 */
[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="number"]:focus,
[data-theme="light"] input[type="tel"]:focus,
[data-theme="light"] input[type="url"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  /* 边框颜色 - 品牌玫瑰金色 */
  border-color: var(--accent-rose-gold);
  /* 焦点光环效果 */
  box-shadow: 0 0 0 4px rgba(201, 160, 165, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  /* 背景增强 */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.95)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 243, 240, 0.9) 100%);
  /* 移除默认轮廓 */
  outline: none;
}
/* 占位符样式 */
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
  font-weight: 400;
}
/* 文本区域特殊处理 */
[data-theme="light"] textarea {
  /* 禁用可调整大小 */
  resize: vertical;
  min-height: 100px;
  /* 行高优化 */
  line-height: var(--leading-relaxed);
}
/* 选择框样式 */
[data-theme="light"] select {
  /* 自定义箭头 */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}
/* 复选框和单选框样式 */
[data-theme="light"] input[type="checkbox"],
[data-theme="light"] input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-rose-gold);
  cursor: pointer;
}
/* 禁用状态 */
[data-theme="light"] input:disabled::placeholder,
[data-theme="light"] textarea:disabled::placeholder {
  color: var(--text-disabled);
  opacity: 0.55;
}
/* 错误状态 */
[data-theme="light"] input:invalid:not(:placeholder-shown):focus,
[data-theme="light"] textarea:invalid:not(:placeholder-shown):focus,
[data-theme="light"] select:invalid:focus {
  border-color: rgba(180, 60, 75, 0.8);
  box-shadow: 0 0 0 4px rgba(180, 60, 75, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* 成功状态 */
/* 表单标签样式 */
[data-theme="light"] label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: var(--font-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* 表单帮助文本 */
/* 表单错误文本 */
/* 表单成功文本 */
/* 输入框组布局 */
[data-theme="light"] .input-group {
  position: relative;
}
/* 输入框前置图标容器 */
/* 输入框后置图标容器 */
/* 带图标的输入框内边距调整 */
/* 文本选择样式优化 */
[data-theme="light"] ::selection {
  background-color: rgba(201, 160, 165, 0.3);
  color: var(--text-main);
}
/* 输入框自动填充样式 */
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.95) inset;
  -webkit-text-fill-color: var(--text-main);
  transition: background-color 5000s ease-in-out 0s;
}
/* 搜索框特殊样式 */
[data-theme="light"] .search-input {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 243, 240, 0.82) 100%);
  border-radius: var(--radius-full);
  padding-left: 44px;
  padding-right: 44px;
}
[data-theme="light"] .search-input:focus {
  box-shadow: 0 0 0 4px rgba(201, 160, 165, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* 输入框大小变体 */
/* 文本区域大小变体 */
@media (max-width: 768px) {
  .theme-toggle {
    left: 16px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}
@keyframes auroraDrift {
  0% {
    transform: translate3d(-1.8%, -1.2%, 0) scale(1);
    opacity: 0.88;
  }
  20% {
    transform: translate3d(0.6%, 0.4%, 0) scale(1.015);
    opacity: 0.94;
  }
  40% {
    transform: translate3d(1.6%, 1.4%, 0) scale(1.03);
    opacity: 0.96;
  }
  60% {
    transform: translate3d(0.8%, 1.8%, 0) scale(1.045);
    opacity: 0.94;
  }
  80% {
    transform: translate3d(-0.6%, 1.2%, 0) scale(1.025);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(-1.2%, 0.8%, 0) scale(1.01);
    opacity: 0.88;
  }
}
/* ============ 新增动画关键帧 ============ */
/**
 * 淡入动画
 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/**
 * 淡入上滑动画
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * 淡入下滑动画
 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * 淡入左滑动画
 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/**
 * 淡入右滑动画
 */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/**
 * 缩放淡入动画
 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/**
 * 柔和脉冲动画
 */
@keyframes pulseSoft {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}
/**
 * 呼吸灯动画
 */
@keyframes breathe {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}
/**
 * 浮动动画
 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
/**
 * 轻微浮动动画
 */
@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
/**
 * 摇摆动画
 */
@keyframes sway {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}
/**
 * 文字光标闪烁动画
 */
@keyframes cursorBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/**
 * 边框流动动画
 */
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/**
 * 悬停缩放动画（用于按钮、链接）
 */
@keyframes hoverScale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}
/**
 * 光晕扩散动画
 */
@keyframes glowExpand {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
/**
 * 滚动条滚动动画
 */
@keyframes scrollIndicator {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}
/**
 * 数字递增动画辅助
 */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * 卡片进入动画
 */
@keyframes cardEnter {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/**
 * 元素抖动动画（用于错误提示）
 */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}
/* ============ 动画工具类 ============ */
/* 淡入动画 */
/* 淡入上滑动画 */
/* 淡入下滑动画 */
/* 淡入左滑动画 */
/* 淡入右滑动画 */
/* 缩放淡入动画 */
/* 柔和脉冲动画 */
/* 呼吸灯动画 */
/* 浮动动画 */
/* 轻微浮动动画 */
/* 摇摆动画 */
/* 光标闪烁动画 */
/* 边框流动动画 */
/* 光晕扩散动画 */
/* 滚动指示动画 */
/* 卡片进入动画 */
/* 抖动动画 */
/* 动画延迟类 */
/* 动画持续时间类 */
/* 动画填充模式 */
/* 悬停动画效果 */
/* 平滑过渡工具类 */
/* ============ 排版工具类 ============ */
/* 字体大小 */
/* 行高 */
/* 字间距 */
/* 字重 */
/* 文本对齐 */
/* 文本转换 */
/* 文本装饰 */
/* 段落间距 */
/* 首字母下沉 */
/* 文字溢出处理 */
/* 选择文本样式 */
::selection {
  background-color: rgba(249, 168, 212, 0.35);
  color: var(--text-main);
}
/* 段落首行缩进 */
/* 垂直对齐 */
/* 连字符 */
/* ============ 可读性与舒适性优化 ============ */
/* 背景层次工具类 */
/* 文字颜色层级 */
.text-muted {
  color: var(--text-muted);
}
/* 强调色文字 */
/* 留白工具类（基于8px网格系统）*/
/* 外边距工具类 */
/* 内边距工具类 */
/* 内容区域最大宽度（优化阅读体验）*/
/* 内容居中 */
/* 内容区域内边距（确保呼吸感）*/
/* 阅读友好容器 */
/* 内容分区背景 */
/* 视觉分隔线 */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-edge-soft), transparent);
  margin: clamp(1.5rem, 4vw, 3rem) 0;
}
/* 焦点样式优化（可访问性）*/
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
  border-radius: 4px;
}
/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  :root {
    --text-main: #ffffff;
    --text-soft: #f8fafc;
    --text-muted: #e2e8f0;
    --glass-edge: rgba(255, 255, 255, 0.6);
  }
}
/* 减少动画模式支持 */
/* 暗模式偏好检测 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --theme-mode: dark;
  }
}
/* ============ 响应式优化 ============ */
/* 断点定义 */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}
/* 隐藏/显示工具类 */
.hidden {
  display: none;
}
.visible {
  display: block;
}
/* 响应式显示类 */
/* 响应式布局类 */
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
/* 响应式方向类 */
/* 响应式对齐类 */
/* 响应式间距类 */
/* 响应式宽度类 */
.w-1/2 {
  width: 50%;
}
.w-1/3 {
  width: 33.333%;
}
.w-2/3 {
  width: 66.666%;
}
.w-1/4 {
  width: 25%;
}
.w-3/4 {
  width: 75%;
}
.w-1/5 {
  width: 20%;
}
.w-2/5 {
  width: 40%;
}
.w-3/5 {
  width: 60%;
}
.w-4/5 {
  width: 80%;
}
/* 响应式高度类 */
/* 响应式最大宽度类 */
/* 响应式字体大小类 */
/* 移动端媒体查询 (sm) */
@media (min-width: 640px) {
  .w-1/2-sm {
    width: 50%;
  }
  .w-1/3-sm {
    width: 33.333%;
  }
  .w-1/4-sm {
    width: 25%;
  }
}
/* 平板端媒体查询 (md) */
@media (min-width: 768px) {
  .w-1/2-md {
    width: 50%;
  }
  .w-1/3-md {
    width: 33.333%;
  }
  .w-1/4-md {
    width: 25%;
  }
  .w-2/3-md {
    width: 66.666%;
  }
}
/* 桌面端媒体查询 (lg) */
@media (min-width: 1024px) {
  .w-1/2-lg {
    width: 50%;
  }
  .w-1/3-lg {
    width: 33.333%;
  }
  .w-1/4-lg {
    width: 25%;
  }
  .w-1/5-lg {
    width: 20%;
  }
  .w-2/3-lg {
    width: 66.666%;
  }
  .w-3/4-lg {
    width: 75%;
  }
}
/* 大屏幕媒体查询 (xl) */
@media (min-width: 1280px) {
  .w-1/3-xl {
    width: 33.333%;
  }
  .w-1/4-xl {
    width: 25%;
  }
  .w-1/5-xl {
    width: 20%;
  }
}
/* 超大屏幕媒体查询 (2xl) */
/* 横屏模式优化 */
@media (orientation: landscape) and (max-width: 900px) {
  .section {
    padding-block: clamp(48px, 8vw, 80px);
  }
  :root {
    --section-space: clamp(48px, 8vw, 80px);
  }
}
/* 超宽屏幕优化 */
@media (min-width: 1920px) {
  :root {
    --section-space: clamp(120px, 8vw, 200px);
  }
  .container {
    max-width: 1800px;
  }
}
/* 触控设备优化 */
@media (hover: none) {
  .social-card:hover,
  .schedule-card:hover,
  .life-card:hover,
  .video-card:hover,
  .work-card:hover {
    transform: none;
  }
}
/* ============ 星形拓扑控制按钮样式 ============ */
.topology-toggle {
  position: fixed;
  top: 216px;
  right: 24px;
  z-index: 100;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 50%;
  background: var(--glass-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--accent-gold);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 8px 24px rgba(8, 10, 18, 0.25),
    0 0 20px rgba(251, 191, 36, 0.25);
}
.topology-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}
.topology-toggle:hover {
  transform: scale(1.12);
  border-color: rgba(251, 191, 36, 0.65);
  background: var(--glass-surface-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 12px 32px rgba(8, 10, 18, 0.3),
    0 0 30px rgba(251, 191, 36, 0.35);
}
.topology-toggle:active {
  transform: scale(0.95);
}
/* 收起状态样式 */
.topology-toggle.collapsed {
  color: var(--text-muted);
}
.topology-toggle.collapsed svg {
  transform: rotate(180deg) scale(0.9);
  filter: none;
}
.topology-toggle.collapsed:hover {
  color: var(--accent-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 24px rgba(8, 10, 18, 0.25),
    0 0 20px rgba(251, 191, 36, 0.25);
}
.topology-toggle.collapsed:hover svg {
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}
/* 响应式调整 */
@media (max-width: 1024px) {
  .topology-toggle {
    top: 200px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
  .topology-toggle svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 768px) {
  .topology-toggle {
    top: 180px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .topology-toggle svg {
    width: 16px;
    height: 16px;
  }
}
.section {
  padding-block: var(--section-space);
}
main > section:not(#home) {
  position: relative;
}
main > section:not(#home)::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 3vw, 44px) max(24px, 5vw);
  z-index: -1;
  border-radius: clamp(26px, 4vw, 54px);
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    radial-gradient(circle at 18% 12%, rgba(217,166,174,0.11), transparent 34%),
    radial-gradient(circle at 88% 38%, rgba(142,201,224,0.11), transparent 32%);
  border: 1px solid rgba(255,255,255,0.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0.72;
}
.site-header {
  background: linear-gradient(180deg, rgba(14,18,31,0.72), rgba(14,18,31,0.34)),
    rgba(255,255,255,0.035);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 18px 54px rgba(8,10,18,0.18);
}
.site-nav a,
.site-search-inline input,
.site-search-inline button {
  color: rgba(255,253,248,0.82);
}
.site-nav a.active,
.site-nav a:hover {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(232,185,102,0.26);
}
.hero {
  min-height: 100svh;
  padding-top: clamp(116px, 12vw, 176px);
  padding-bottom: clamp(96px, 10vw, 144px);
}
.hero-media {
  filter: drop-shadow(0 42px 80px rgba(8,10,18,0.34)) drop-shadow(0 0 36px rgba(217,166,174,0.18));
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.32), transparent 28%),
    linear-gradient(315deg, rgba(142,201,224,0.18), transparent 36%);
  mix-blend-mode: screen;
  opacity: 0.72;
}
.hero-title {
  text-shadow: 0 2px 0 rgba(255,255,255,0.04),
    0 22px 50px rgba(8,10,18,0.34),
    0 0 34px rgba(217,166,174,0.12);
}
.hero-title-cn,
.section-heading h2,
.section-title,
.profile-name {
  color: rgba(255,253,248,0.98);
  text-wrap: balance;
}
.hero-title-cn {
  font-family: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", "Georgia", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 1.1em;
  font-style: italic;
  line-height: 1.4;
  background: linear-gradient(100deg, #fffaf2 0%, #d8d2f0 25%, #a7ddd7 50%, #e8c77a 75%, #fffaf2 100%);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleColorShift 8s ease-in-out infinite;
}
@keyframes titleColorShift {
  0% {
    background-position: 0% 50%;
    text-shadow: 0 0 30px rgba(255,250,242,0.4), 0 0 60px rgba(216,210,240,0.2);
  }
  25% {
    background-position: 50% 50%;
    text-shadow: 0 0 30px rgba(216,210,240,0.4), 0 0 60px rgba(167,221,215,0.2);
  }
  50% {
    background-position: 100% 50%;
    text-shadow: 0 0 30px rgba(167,221,215,0.4), 0 0 60px rgba(232,199,122,0.2);
  }
  75% {
    background-position: 50% 50%;
    text-shadow: 0 0 30px rgba(232,199,122,0.4), 0 0 60px rgba(255,250,242,0.2);
  }
  100% {
    background-position: 0% 50%;
    text-shadow: 0 0 30px rgba(255,250,242,0.4), 0 0 60px rgba(216,210,240,0.2);
  }
}
@keyframes titleColorShiftLight {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/**
 * 统一的浅色主题标题渐变样式类
 * 使用 CSS 变量确保一致性，便于后续维护
 * 
 * @optimization 优化说明：
 *   - 将重复的渐变定义集中到单个类中
 *   - 使用 CSS 变量 `--heading-gradient-primary` 统一管理渐变色
 *   - 减少代码冗余，提高可维护性
 *   - 所有标题元素均可通过添加此类获得统一的紫色渐变效果
 */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes titleColorShiftLightAlt {
  0% {
    background-position: 100% 50%;
  }
  25% {
    background-position: 66% 50%;
  }
  50% {
    background-position: 33% 50%;
  }
  75% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.hero-title-en {
  color: rgba(222,229,236,0.76);
  font-style: italic;
  font-weight: 600;
}
.hero-gift,
.hero .lead,
.section-heading p:not(.eyebrow),
.section-subtitle {
  color: var(--text-soft);
}
.hero .lead,
.profile-text-card p,
#social .social-card p,
.work-card,
.gallery-month-heading p,
.gallery-date-heading p,
.video-card p {
  letter-spacing: 0;
}
.btn,
.social-action,
.gallery-filter button,
.particle-shape-controls button,
.year-tabs button {
  border: 1px solid rgba(255,255,255,0.26);
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07)),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.18), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
    0 18px 48px rgba(8,10,18,0.16);
  backdrop-filter: blur(16px) saturate(1.22);
}
.btn.primary,
.gallery-filter button.active,
.year-tabs button.active {
  background: linear-gradient(135deg, rgba(255,253,248,0.95), rgba(243,220,224,0.86) 52%, rgba(200,167,104,0.86)),
    rgba(255,255,255,0.16);
  color: #242433;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62),
    0 22px 58px rgba(200,167,104,0.18);
}
.music-player,
.quote-panel,
.reference-grid article,
.social-card,
.schedule-card,
.life-card,
.video-card,
.work-card,
.profile-text-card,
.profile-badges > span,
.gallery-month-group,
.gallery-date-group,
.music-player-container,
.social-note {
  border-color: var(--glass-edge-soft) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.14), transparent 36%),
    radial-gradient(circle at 80% 100%, rgba(255,255,255,0.06), transparent 30%),
    rgba(20, 25, 42, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 28px 82px rgba(8,10,18,0.26),
    0 0 50px rgba(217,166,174,0.09),
    0 0 80px rgba(200,167,104,0.05) !important;
  backdrop-filter: blur(28px) saturate(1.25);
}
.social-card,
.schedule-card,
.life-card,
.video-card,
.work-card,
.gallery-item,
.profile-badges > span {
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease,
    filter 0.35s ease;
}
.social-card:hover,
.schedule-card:hover,
.life-card:hover,
.video-card:hover,
.work-card:hover,
.profile-badges > span:hover {
  border-color: rgba(255,255,255,0.4) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08)),
    radial-gradient(circle at 22% 0%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 78% 100%, rgba(255,255,255,0.08), transparent 35%),
    rgba(25, 30, 50, 0.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),
    0 32px 90px rgba(8,10,18,0.35),
    0 0 60px rgba(217,166,174,0.18),
    0 0 100px rgba(200,167,104,0.1),
    0 0 140px rgba(147,197,253,0.06) !important;
  transform: translateY(-6px) scale(1.01);
}
.section-heading,
#music .section-header {
  max-width: min(980px, 92vw);
  margin-bottom: clamp(42px, 5vw, 72px);
}
.section-heading h2,
.section-title {
  margin: 0 0 12px;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.04;
  text-shadow: 0 24px 60px rgba(8,10,18,0.28);
}
.section-heading .eyebrow,
.section-subtitle {
  position: relative;
  padding-inline: 18px;
}
.section-heading .eyebrow::before,
.section-heading .eyebrow::after,
.section-subtitle::before,
.section-subtitle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,185,102,0.72));
}
.section-heading .eyebrow::before,
.section-subtitle::before {
  right: 100%;
}
.section-heading .eyebrow::after,
.section-subtitle::after {
  left: 100%;
  transform: rotate(180deg);
}
.section-heading p:not(.eyebrow) {
  max-width: 52em;
  margin: 16px auto 0;
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 2.0;
  letter-spacing: 0.015em;
}
#audio-gallery .section-heading h2 {
  color: #fffaf2;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 16px 45px rgba(8, 10, 18, 0.42),
    0 0 34px rgba(232, 185, 102, 0.18);
}
#social .social-grid,
.card-grid,
.video-grid {
  gap: clamp(22px, 2vw, 34px);
}
/* 取消最近行程的滑块，全展开显示 */
#schedule .card-grid {
  max-height: none !important;
  overflow-y: visible !important;
  padding-right: 0 !important;
  scrollbar-width: none !important;
}
#social .social-card {
  border: 1.5px solid rgba(200, 210, 230, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
#social .social-card h3 {
  font-size: clamp(29px, 1.8vw, 34px);
}
#social .social-card strong {
  color: rgba(255,253,248,0.84);
  font-size: var(--font-base);
}
#social .social-card p {
  color: rgba(255,253,248,0.88);
  line-height: 1.96;
}
#works .work-card {
  padding: clamp(26px, 2.4vw, 42px);
}
#works .work-card h3 {
  letter-spacing: 0;
}
.work-meta,
.work-detail,
.work-entry,
.gallery-date-heading,
.gallery-month-heading {
  color: rgba(255,253,248,0.82);
}
#gallery .gallery-item {
  border-radius: 18px;
}
#gallery .gallery-item img,
.video-card video,
.vinyl-record,
.profile-avatar-button img,
#lightboxImage {
  filter: brightness(1.08) contrast(1.035) saturate(1.06);
}
@media (max-width: 900px) {
  :root {
    --section-space: clamp(78px, 16vw, 112px);
  }
  main > section:not(#home)::before {
    inset: 10px 12px;
    border-radius: 28px;
  }
  .section-heading h2,
  .section-title {
    font-size: clamp(34px, 10vw, 50px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    animation-fill-mode: forwards !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* 禁用背景动画 */
  body::before {
    animation: none;
    opacity: 0.5 !important;
  }
  body::after {
    animation: none;
  }
  /* 禁用滚动揭示动画 */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* 禁用卡片倾斜效果 */
  .tilt-card {
    transform-style: flat;
    transform: none !important;
  }
  /* 禁用社交卡片呼吸动画 */
  .social-app-mark {
    animation-play-state: paused !important;
    animation: none !important;
  }
  .social-card {
    transform: none !important;
  }
  .social-card.is-lit {
    transform: none !important;
  }
  /* 禁用心形弹窗动画 */
  .heart-pop-layer {
    animation: none;
  }
  .heart-pop-card {
    transition: none !important;
    transform: none !important;
  }
  /* 禁用语录飞机动画 */
  .quote-flight-plane {
    display: none;
  }
  /* 禁用加载动画 */
  .loader-ring {
    animation: none;
  }
  .gallery-load-more .loader-ring {
    animation: none;
    border-color: rgba(232, 185, 102, 0.8);
    border-top-color: rgba(232, 185, 102, 0.8);
  }
  /* 禁用粒子特效 */
  #particleCanvas,
  #topologyCanvas {
    display: none;
  }
  /* 禁用图册相机手势粒子 */
  #cameraParticleButton,
  #cameraGestureText,
  #gestureHints,
  #particleShapeControls,
  #particleBurstButton,
  #imageParticleCanvas,
  #particleCameraVideo {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* 禁用光标光环效果 */
  .cursor-aura {
    display: none;
  }
  /* 禁用环境光效 */
  .ambient {
    display: none;
  }
  /* 禁用涟漪效果 */
  .tide-ripple {
    display: none;
  }
  /* 禁用害羞脸红效果 */
  .blush-effect {
    display: none;
  }
  /* 禁用点赞爆发效果 */
  .like-burst {
    display: none;
  }
  /* 禁用主题切换按钮悬停动画 */
  .theme-toggle:hover {
    transform: none !important;
  }
  /* 禁用导航栏滚动效果 */
  .site-header {
    background-position: fixed !important;
  }
  /* 禁用滚动时的背景变化 */
}
/* Music section polish: remove title icon and enlarge album imagery. */
#music .section-title i {
  display: none;
}
#music .section-title {
  display: block;
}
#music .vinyl-label {
  top: 20% !important;
  right: 20% !important;
  bottom: 20% !important;
  left: 20% !important;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.34),
    0 0 26px rgba(217,166,174,0.24);
}
#music .vinyl-center {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 7px rgba(255,255,255,0.1),
    0 0 18px rgba(217,166,174,0.28);
}
#music .player-info .vinyl-label,
#music .playlist-item img,
#music .player-info img {
  filter: brightness(1.08) contrast(1.04) saturate(1.08);
}
#music .playlist-item {
  min-height: 92px;
  gap: 20px;
  padding: 18px 20px;
}
#music .playlist-item img {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.26),
    0 0 24px rgba(217,166,174,0.16);
}
#music .playlist-item-info h5 {
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.25;
  margin-bottom: 6px;
}
#music .playlist-item-info p {
  font-size: clamp(13px, 0.9vw, 15px);
  line-height: 1.35;
}
@media (max-width: 560px) {
  #music .vinyl-label {
    inset: 22% !important;
  }
  #music .playlist-item {
    min-height: 82px;
    gap: 14px;
  }
  #music .playlist-item img {
    width: 62px;
    height: 62px;
  }
}
/* Lightbox control alignment: anchor every tool to the media frame edges. */
.lightbox-media-frame {
  --lb-tool-gap: clamp(24px, 2.8vw, 44px);
  --lb-tool-size: clamp(56px, 4.2vw, 68px);
  --lb-tool-height: clamp(48px, 3.4vw, 60px);
  --lb-tool-offset: calc(var(--lb-tool-size) + var(--lb-tool-gap));
  position: relative;
}
/* 左上角 - 照相机图标 */
.camera-particle-trigger {
  left: calc(-1 * var(--lb-tool-offset)) !important;
  top: 0 !important;
  width: var(--lb-tool-size) !important;
  height: var(--lb-tool-height) !important;
  transform-origin: center center;
}
/* 右上角 - 关闭图标 */
.lightbox-close {
  right: calc(-1 * var(--lb-tool-offset)) !important;
  top: 0 !important;
  width: var(--lb-tool-size) !important;
  height: var(--lb-tool-size) !important;
  padding-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  z-index: 10 !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.58), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,0.48), rgba(140,205,232,0.2)),
    rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.96) !important;
  font-size: 30px !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 16px 42px rgba(76,91,125,0.22),
    0 0 28px rgba(255,255,255,0.24) inset,
    0 0 34px rgba(217,166,174,0.22) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  transform-origin: center center;
}
/* 左下角 - 模式切换按钮 */
.particle-shape-controls {
  left: calc(-1 * var(--lb-tool-offset)) !important;
  bottom: 0 !important;
  top: auto !important;
  transform-origin: center center;
}
/* 右下角 - 星星图标（爆裂效果） */
.particle-burst-trigger {
  right: calc(-1 * var(--lb-tool-offset)) !important;
  bottom: 0 !important;
  top: auto !important;
  width: var(--lb-tool-size) !important;
  height: var(--lb-tool-height) !important;
  transform-origin: center center;
}
/* 左侧导航按钮 */
.lightbox-prev {
  left: calc(-1 * var(--lb-tool-offset)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
/* 右侧导航按钮 */
.lightbox-next {
  right: calc(-1 * var(--lb-tool-offset)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.particle-running .particle-burst-trigger {
  transform: none !important;
}
.particle-burst-trigger:hover {
  transform: translateY(-2px) scale(1.05) !important;
}
@media (max-width: 900px) {
  .lightbox-media-frame {
    --lb-tool-gap: clamp(14px, 2.2vw, 20px);
    --lb-tool-size: clamp(48px, 8vw, 56px);
    --lb-tool-offset: calc(var(--lb-tool-size) + var(--lb-tool-gap));
  }
  /* 顶部按钮组 */
  .camera-particle-trigger,
  .lightbox-close {
    top: calc(-1 * var(--lb-tool-offset) - 6px) !important;
  }
  /* 左上角 - 照相机图标 */
  .camera-particle-trigger {
    left: calc(-1 * var(--lb-tool-offset)) !important;
    width: var(--lb-tool-size) !important;
    height: calc(var(--lb-tool-size) * 0.85) !important;
  }
  /* 右上角 - 关闭图标 */
  .lightbox-close {
    right: calc(-1 * var(--lb-tool-offset)) !important;
    width: var(--lb-tool-size) !important;
    height: var(--lb-tool-size) !important;
  }
  /* 底部按钮组 */
  .particle-burst-trigger,
  .particle-shape-controls {
    bottom: calc(-1 * var(--lb-tool-offset) - 6px) !important;
    top: auto !important;
  }
  /* 左下角 - 模式切换按钮 */
  .particle-shape-controls {
    left: calc(-1 * var(--lb-tool-offset)) !important;
  }
  /* 右下角 - 星星图标 */
  .particle-burst-trigger {
    right: calc(-1 * var(--lb-tool-offset)) !important;
    width: var(--lb-tool-size) !important;
    height: calc(var(--lb-tool-size) * 0.85) !important;
  }
}
/* Life section heading alignment: centered title, composed heart action. */
#life .section-heading {
  position: relative;
  align-items: center !important;
  text-align: center !important;
}
#life .life-heading-row {
  position: relative;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  gap: 0 !important;
}
#life .life-heading-row h2 {
  margin: 0;
  text-align: center;
}
#life .heart-popup-trigger {
  position: absolute;
  left: calc(50% + clamp(160px, 17vw, 270px));
  top: 50%;
  width: 74px;
  height: 56px;
  transform: translateY(-50%);
}
#life .heart-popup-trigger:hover {
  transform: translateY(calc(-50% - 3px)) scale(1.04);
}
#life .section-heading .eyebrow {
  margin-top: 12px;
}
#life .section-heading p:not(.eyebrow) {
  margin-top: 18px;
  text-align: center;
}
@media (max-width: 760px) {
  #life .life-heading-row {
    flex-direction: column !important;
    gap: 14px !important;
  }
  #life .heart-popup-trigger {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
  #life .heart-popup-trigger:hover {
    transform: translateY(-3px) scale(1.04);
  }
}
/* Quote paper plane override */
#life .quote-panel {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(150px, 1fr) auto auto !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  overflow: visible !important;
}
#life .life-layout {
  overflow: visible !important;
}
#life {
  overflow: visible !important;
}
#life #quoteText {
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: start !important;
  width: min(100%, 26em) !important;
  margin: 0 !important;
  color: var(--gold) !important;
  text-align: left !important;
  text-align-last: left !important;
}
#life #quoteFrom {
  grid-row: 2 !important;
  justify-self: end !important;
  align-self: end !important;
  margin: 0 0 4px auto !important;
  color: rgba(255,253,248,0.92) !important;
  text-align: right !important;
}
#life .quote-controls {
  grid-row: 3 !important;
  justify-self: center !important;
  align-self: end !important;
  width: auto !important;
  margin: 0 auto !important;
}
#life .quote-panel.is-flying::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 1px;
  left: 18%;
  top: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
  opacity: 0.7;
  transform: rotate(-12deg);
  pointer-events: none;
}
.quote-flight-plane {
  position: absolute;
  left: clamp(82px, 18%, 170px);
  top: clamp(82px, 26%, 160px);
  z-index: 12;
  width: 96px;
  height: 62px;
  pointer-events: none;
  transform-origin: 72% 50%;
  filter: drop-shadow(0 18px 26px rgba(8,10,18,0.22))
    drop-shadow(0 0 18px rgba(255,255,255,0.52));
}
.quote-flight-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(225,234,242,0.72) 52%, rgba(214,176,101,0.58));
  clip-path: polygon(0 42%, 100% 0, 72% 52%, 100% 100%, 0 58%, 58% 52%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88),
    inset -12px -8px 18px rgba(125,148,168,0.2);
}
.quote-flight-plane::after {
  content: "";
  position: absolute;
  right: 70%;
  top: 50%;
  width: 230px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.58), rgba(214,176,101,0.24));
  filter: blur(1px);
}
/* =========================
   光影时光机 - 标签式分类
   ========================= */
.gallery-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.gallery-tab {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
  padding: clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(14px, 1.8vw, 18px);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.gallery-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.gallery-tab[data-category="self"]::before {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.2), transparent);
}
.gallery-tab[data-category="life"]::before {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), transparent);
}
.gallery-tab[data-category="moments"]::before {
  background: linear-gradient(135deg, rgba(135, 206, 250, 0.15), transparent);
}
.gallery-tab:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.08);
}
.gallery-tab:hover::before {
  opacity: 1;
}
.gallery-tab.active {
  transform: translateY(-3px);
}
.gallery-tab[data-category="self"].active {
  background: rgba(255, 182, 193, 0.12);
  border-color: rgba(255, 182, 193, 0.4);
  box-shadow: 0 8px 32px rgba(255, 182, 193, 0.15);
}
.gallery-tab[data-category="life"].active {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.12);
}
.gallery-tab[data-category="moments"].active {
  background: rgba(135, 206, 250, 0.1);
  border-color: rgba(135, 206, 250, 0.35);
  box-shadow: 0 8px 32px rgba(135, 206, 250, 0.12);
}
.gallery-tab.active::before {
  opacity: 1;
}
.gallery-tab-icon {
  width: clamp(40px, 5vw, 52px);
  height: clamp(40px, 5vw, 52px);
  border-radius: clamp(10px, 1.2vw, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 2.2vw, 22px);
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-tab[data-category="self"] .gallery-tab-icon {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(255, 182, 193, 0.1));
  color: rgba(255, 182, 193, 0.95);
}
.gallery-tab[data-category="life"] .gallery-tab-icon {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.08));
  color: rgba(255, 215, 0, 0.95);
}
.gallery-tab[data-category="moments"] .gallery-tab-icon {
  background: linear-gradient(135deg, rgba(135, 206, 250, 0.25), rgba(135, 206, 250, 0.08));
  color: rgba(135, 206, 250, 0.95);
}
.gallery-tab.active .gallery-tab-icon {
  transform: scale(1.1);
}
.gallery-tab-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gallery-tab-title {
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.03em;
}
.gallery-tab-subtitle {
  font-size: clamp(10px, 1.1vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.gallery-category-desc {
  text-align: center;
  padding: clamp(12px, 1.5vw, 16px);
  margin-bottom: clamp(20px, 2.5vw, 28px);
  border-radius: clamp(12px, 1.5vw, 16px);
  font-size: clamp(13px, 1.4vw, 16px);
  font-style: italic;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-category-desc[data-category="self"] {
  background: rgba(255, 182, 193, 0.08);
  color: rgba(255, 200, 210, 0.9);
  border: 1px solid rgba(255, 182, 193, 0.2);
}
.gallery-category-desc[data-category="life"] {
  background: rgba(255, 215, 0, 0.06);
  color: rgba(255, 225, 180, 0.9);
  border: 1px solid rgba(255, 215, 0, 0.18);
}
.gallery-category-desc[data-category="moments"] {
  background: rgba(135, 206, 250, 0.06);
  color: rgba(180, 230, 255, 0.9);
  border: 1px solid rgba(135, 206, 250, 0.18);
}
/* 响应式适配 */
@media (max-width: 900px) {
  .gallery-tabs {
    grid-template-columns: 1fr;
  }
}
/* =========================
   光影时光机 - 控制按钮
   ========================= */
.gallery-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 22px 46px;
}
.gallery-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.gallery-control-group.active {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 34px rgba(8, 10, 18, 0.16);
}
.gallery-control-label {
  min-width: 64px;
  padding: 0 8px 0 10px;
  color: rgba(251, 248, 244, 0.8);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.gallery-expand-btn,
.gallery-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 72px;
  height: 32px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  color: rgba(251, 248, 244, 0.78);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.gallery-expand-btn:hover,
.gallery-collapse-btn:hover {
  background: rgba(200, 167, 104, 0.15);
  border-color: rgba(200, 167, 104, 0.3);
  color: var(--gold);
}
.gallery-expand-btn:active,
.gallery-collapse-btn:active {
  transform: scale(0.98);
}
.gallery-control-group.is-collapsed .gallery-collapse-btn,
.gallery-control-group:not(.is-collapsed) .gallery-expand-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.94);
}
/* 分类颜色适配 */
.gallery-control-group[data-category="self"] .gallery-expand-btn:hover,
.gallery-control-group[data-category="self"] .gallery-collapse-btn:hover,
.gallery-control-group[data-category="self"].active {
  background: rgba(255, 182, 193, 0.15);
  border-color: rgba(255, 182, 193, 0.3);
  color: #ffb6c1;
}
.gallery-control-group[data-category="life"] .gallery-expand-btn:hover,
.gallery-control-group[data-category="life"] .gallery-collapse-btn:hover,
.gallery-control-group[data-category="life"].active {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.3);
  color: var(--gold);
}
.gallery-control-group[data-category="moments"] .gallery-expand-btn:hover,
.gallery-control-group[data-category="moments"] .gallery-collapse-btn:hover,
.gallery-control-group[data-category="moments"].active {
  background: rgba(135, 206, 250, 0.15);
  border-color: rgba(135, 206, 250, 0.3);
  color: #87cefa;
}
/* =========================
   光影时光机 - 月份卡片间距修复
   ========================= */
.gallery-month-group {
  margin-bottom: 28px !important;
  padding-bottom: 0 !important;
}
.gallery-month-group:last-child {
  margin-bottom: 0 !important;
}
.gallery-month-heading {
  margin-bottom: 20px !important;
}
.gallery-month-content {
  display: grid !important;
  gap: 24px !important;
  overflow: hidden !important;
  max-height: 5000px !important;
  opacity: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: all 0.4s ease !important;
}
.gallery-month-group.collapsed .gallery-month-content {
  display: grid !important;
  max-height: 0 !important;
  opacity: 0 !important;
  gap: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.gallery-date-group {
  margin-bottom: 0 !important;
}
/* 深色主题 - 图册时间卡片样式 - 去除黄色调，保持清爽 */
[data-theme="dark"] .gallery-month-heading,
[data-theme="dark"] .gallery-date-heading {
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)) !important,
    linear-gradient(to bottom, rgba(255,255,255,0.05), transparent 50%) !important,
    rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
/* 浅色主题 - 图册时间卡片样式 */
[data-theme="light"] .gallery-month-heading,
[data-theme="light"] .gallery-date-heading {
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.82)) !important,
    rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  border: 1px solid rgba(200, 195, 200, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255,255,255,0.8) inset !important;
}
@media (max-width: 720px) {
  .gallery-controls {
    margin-left: 0;
  }
  .gallery-control-group {
    width: 100%;
  }
  .gallery-control-label {
    flex: 1;
  }
}
/* Works section stats */
#works .works-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 28px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}
#works .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#works .stat-number {
  font-size: 42px;
  font-weight: 700;
  background: linear-gradient(135deg, #ffd700 0%, #ffb700 30%, #ff8c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
  transition: transform 0.3s ease;
}
#works .stat-number.counted {
  animation: statPulse 0.6s ease-out;
}
#works .stat-label {
  font-size: clamp(17px, 1.12vw, 19px);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
}
#works .stat-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}
#works .works-stats-search {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#works .works-stats-search:focus-within {
  border-color: rgba(200, 167, 104, 0.6);
  box-shadow: 0 0 0 3px rgba(200, 167, 104, 0.15);
}
#works .works-stats-search input {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  height: 38px;
  padding: 0 14px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 14px;
}
#works .works-stats-search input::placeholder {
  color: rgba(251, 248, 244, 0.5);
}
#works .works-stats-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(251, 248, 244, 0.7);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
#works .works-stats-search button:hover {
  background: rgba(200, 167, 104, 0.2);
  color: var(--gold);
}
#works .works-stats-search input.has-no-match {
  color: rgba(255, 205, 205, 0.96);
}
#works .works-stats-search:has(input.has-no-match) {
  border-color: rgba(255, 126, 126, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 126, 126, 0.12);
}
@keyframes statPulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* Works section redesign: collapsed cards, glass visual cards, refined hierarchy. */
#works .work-card {
  position: relative;
  cursor: pointer;
  border-color: rgba(255,255,255,0.18) !important;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.16), transparent 22rem),
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)),
    rgba(18,24,38,0.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
    0 22px 68px rgba(7,10,18,0.2);
  transition: transform 0.36s cubic-bezier(.2,.8,.2,1),
    border-color 0.36s ease,
    box-shadow 0.36s ease,
    background 0.36s ease;
}
#works .work-card:hover {
  transform: translateX(8px) translateY(-2px);
  border-color: rgba(255,255,255,0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.26),
    0 28px 82px rgba(7,10,18,0.26),
    0 0 38px rgba(217,166,174,0.08);
}
#works .work-card.open {
  border-color: rgba(232,185,102,0.4) !important;
  background: radial-gradient(circle at 0 0, rgba(232,185,102,0.18), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,0.17), rgba(255,255,255,0.065)),
    rgba(18,24,38,0.34) !important;
}
#works .work-card-focus {
  animation: workCardFocus 1.4s ease both;
}
#works .works-search-mark {
  display: inline;
  padding: 0.02em 0.18em;
  border-radius: 0.32em;
  color: #1a1407;
  background: linear-gradient(135deg, rgba(255, 232, 143, 0.98), rgba(255, 189, 111, 0.9));
  box-shadow: 0 0 0 1px rgba(255, 242, 180, 0.32), 0 0 18px rgba(255, 209, 116, 0.26);
}
[data-theme="light"] #works .works-search-mark {
  color: #56360f;
  background: linear-gradient(135deg, rgba(255, 229, 128, 0.96), rgba(255, 190, 111, 0.88));
  box-shadow: 0 0 0 1px rgba(178, 122, 36, 0.16), 0 8px 20px rgba(213, 150, 62, 0.16);
}
.site-search-landmark {
  display: inline;
  padding: 0.02em 0.2em;
  border-radius: 0.35em;
  color: #1c1307;
  background: linear-gradient(135deg, rgba(255, 225, 126, 0.98), rgba(255, 177, 120, 0.9));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 0 0 1px rgba(255, 232, 164, 0.36),
    0 0 0 rgba(255, 216, 136, 0);
  transition: opacity 0.7s ease, box-shadow 0.7s ease, filter 0.7s ease;
}
.site-search-landmark.is-active {
  animation: siteSearchLandmarkPulse 1.45s ease-in-out 2;
}
.site-search-landmark.is-fading {
  opacity: 0.38;
  filter: saturate(0.75);
  box-shadow: 0 0 0 1px rgba(255, 232, 164, 0.18),
    0 0 0 rgba(255, 216, 136, 0);
}
[data-theme="light"] .site-search-landmark,
body[data-theme="light"] .site-search-landmark {
  color: #5a3811;
  background: linear-gradient(135deg, rgba(255, 231, 140, 0.95), rgba(255, 200, 128, 0.82));
  box-shadow: 0 0 0 1px rgba(194, 133, 38, 0.18),
    0 10px 24px rgba(213, 150, 62, 0.16);
}
@keyframes siteSearchLandmarkPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 232, 164, 0.34),
      0 0 0 rgba(255, 216, 136, 0);
  }
  48% {
    box-shadow: 0 0 0 1px rgba(255, 232, 164, 0.62),
      0 0 28px rgba(255, 216, 136, 0.48);
  }
}
#works .work-summary {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: start;
  gap: 22px;
}
#works .work-card h3 {
  color: rgba(255,253,248,0.97) !important;
  text-shadow: none !important;
}
#works .work-card .tag {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,253,248,0.9);
  padding-inline: 0 !important;
  backdrop-filter: none;
}
#works .lead-role-tag {
  color: var(--gold) !important;
  text-shadow: none !important;
}
#works .work-toggle-mark {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.28), transparent 28%),
    rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
#works .work-toggle-mark::before,
#works .work-toggle-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,253,248,0.86);
  transform: translate(-50%, -50%);
  transition: transform 0.32s ease, background 0.32s ease;
}
#works .work-toggle-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
#works .work-card.open .work-toggle-mark::before,
#works .work-card.open .work-toggle-mark::after {
  background: var(--gold);
}
#works .work-card.open .work-toggle-mark::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
#works .work-detail {
  display: grid !important;
  grid-template-rows: 0fr !important;
  opacity: 0;
  margin-top: 0 !important;
  transition: grid-template-rows 0.48s cubic-bezier(.2,.8,.2,1),
    opacity 0.32s ease,
    margin-top 0.42s ease;
}
#works .work-detail > * {
  min-height: 0;
  overflow: hidden;
}
#works .work-card.open .work-detail {
  grid-template-rows: 1fr !important;
  opacity: 1;
  margin-top: clamp(20px, 2.4vw, 34px) !important;
}
#works .work-expanded-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
  gap: clamp(24px, 3.2vw, 56px);
  align-items: start;
}
#works .work-expanded-grid.no-visual {
  grid-template-columns: 1fr;
}
#works .work-entry {
  border-color: rgba(255,255,255,0.12);
}
#works .work-entry-meta span {
  color: rgba(255,253,248,0.74);
}
#works .work-entry p {
  color: rgba(255,253,248,0.88);
  line-height: 1.9;
}
#works .work-visual-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 44vw, 650px);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 24px;
  background: rgba(12,16,24,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
    0 28px 90px rgba(7,10,18,0.32);
  backdrop-filter: blur(18px) saturate(1.08);
  transform: translateZ(0);
  transition: transform 0.38s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.38s ease,
    border-color 0.38s ease;
}
#works .work-visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10,14,24,0.02) 0%, rgba(10,14,24,0.12) 58%, rgba(10,14,24,0.38) 100%);
  pointer-events: none;
}
#works .work-visual-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: brightness(1.08) contrast(1.04) saturate(0.96);
  transform: scale(1.02);
  transition: opacity 0.38s ease,
    transform 0.52s cubic-bezier(.2,.8,.2,1),
    filter 0.38s ease;
}
#works .work-visual-card:hover,
#works .work-visual-card:focus-visible {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(232,185,102,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24),
    0 34px 100px rgba(7,10,18,0.38);
  outline: none;
}
#works .work-visual-card:hover img,
#works .work-visual-card:focus-visible img,
#works .work-visual-card.is-pressed img {
  opacity: 0.88;
  filter: brightness(1.16) contrast(1.06) saturate(1.06);
  transform: scale(1.065);
}
#works .work-visual-card.is-pressed {
  animation: workImagePulse 0.62s cubic-bezier(.2,.8,.2,1);
}
#works .work-visual-card.is-image-only {
  cursor: zoom-out;
}
#works .work-visual-card.is-image-only::before {
  opacity: 0;
}
#works .work-visual-card.is-image-only img {
  opacity: 1;
  filter: brightness(1.08) contrast(1.05) saturate(1.04);
  transform: scale(1.01);
}
/* Works: persistent fan-shaped glow for lead-role cards only. */
#works .work-card-lead {
  position: relative;
  isolation: isolate;
}
#works .work-card-lead::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: clamp(120px, 14vw, 210px);
  height: clamp(120px, 14vw, 210px);
  z-index: -1;
  pointer-events: none;
  border-top-left-radius: inherit;
  background: radial-gradient(circle at 0 0,
      rgba(255,248,224,0.72) 0%,
      rgba(232,185,102,0.46) 24%,
      rgba(217,166,174,0.22) 46%,
      transparent 68%),
    conic-gradient(from 0deg at 0 0,
      rgba(255,245,214,0.62) 0deg,
      rgba(232,185,102,0.36) 30deg,
      rgba(217,166,174,0.14) 58deg,
      transparent 82deg);
  filter: blur(2px);
  opacity: 0.9;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 0 64%, transparent 72%);
  mask-image: radial-gradient(circle at 0 0, #000 0 64%, transparent 72%);
}
#works .work-card-lead h3,
#works .work-card-lead .work-meta,
#works .work-card-lead .work-detail {
  position: relative;
  z-index: 1;
}
#works .timeline::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255,255,255,0.34) 8%,
    rgba(255,255,255,0.34) 92%,
    transparent
  );
}
#works .work-card {
  overflow: visible;
}
#works .work-card::before {
  background: rgba(255,255,255,0.82);
  box-shadow: 0 0 0 7px rgba(255,255,255,0.08),
    0 0 20px rgba(255,255,255,0.16);
  z-index: 4;
}
#works .work-card-lead::before {
  background: var(--gold);
  box-shadow: 0 0 0 7px rgba(232,185,102,0.14),
    0 0 24px rgba(232,185,102,0.68);
  z-index: 4;
}
/* Works: all-years overview with compact grouped jump cards. */
#works .works-overview {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
}
#works .works-overview-year {
  display: grid;
  gap: 14px;
  margin-left: 54px;
}
#works .works-overview-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(255,253,248,0.95);
}
#works .works-overview-heading span {
  font-size: clamp(25px, 2.4vw, 36px);
  font-weight: 900;
  line-height: 1;
}
#works .works-overview-heading small {
  color: rgba(255,253,248,0.58);
  font-size: 14px;
  font-weight: 800;
}
#works .works-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
#works .works-overview-card {
  display: grid;
  gap: 9px;
  min-height: 132px;
  padding: 16px 17px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.12), transparent 120px),
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045));
  color: rgba(255,253,248,0.86);
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(7,10,18,0.16);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1),
    border-color 0.28s ease,
    background 0.28s ease;
}
#works .works-overview-card:hover,
#works .works-overview-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(232,185,102,0.46);
  background: radial-gradient(circle at 0 0, rgba(232,185,102,0.18), transparent 130px),
    linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
  outline: none;
}
#works .works-overview-card strong {
  color: rgba(255,253,248,0.98);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}
#works .works-overview-card span {
  color: rgba(255,253,248,0.68);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
#works .works-overview-card.is-lead {
  border-color: rgba(232,185,102,0.34);
  box-shadow: 0 16px 44px rgba(7,10,18,0.16),
    inset 0 0 0 1px rgba(232,185,102,0.08);
}
#works .works-overview-card.is-lead span:last-child {
  color: rgba(255,239,200,0.82);
}
@keyframes workCardFocus {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
      0 22px 68px rgba(7,10,18,0.2);
  }
  38% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32),
      0 30px 90px rgba(7,10,18,0.28),
      0 0 0 3px rgba(232,185,102,0.26),
      0 0 58px rgba(232,185,102,0.24);
  }
}
@keyframes workImagePulse {
  0% {
    transform: translateY(-4px) scale(1.015);
  }
  42% {
    transform: translateY(-7px) scale(1.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.58),
      0 42px 120px rgba(7,10,18,0.42),
      0 0 90px rgba(232,185,102,0.26);
  }
  100% {
    transform: translateY(-4px) scale(1.015);
  }
}
@media (max-width: 980px) {
  #works .work-expanded-grid {
    grid-template-columns: 1fr;
  }
  #works .work-visual-card {
    min-height: 420px;
  }
  #works .works-stats {
    flex-wrap: wrap;
    gap: 18px;
  }
  #works .stat-divider {
    display: none;
  }
}
@media (max-width: 760px) {
  #works .works-stats {
    align-items: stretch;
    justify-content: flex-start;
    padding: 18px;
  }
  #works .works-stats-search,
  #works .works-stats-search input {
    width: 100%;
    max-width: none;
  }
  #works .works-overview-year {
    margin-left: 32px;
  }
  #works .works-overview-grid {
    grid-template-columns: 1fr;
  }
  #works .works-overview-card {
    min-height: 112px;
  }
}
/* 美图安利区样式 */
.fans-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.fans-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 32px;
}
.fans-section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.fans-section-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.fans-section-header h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.fans-section-header p {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.gallery-section {
  margin-top: 0;
}
.fans-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.fans-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* 2026-06-19 audio gallery card and mini-player refinement */
/* Be Myself Orbit: keep the frame progress visible directly below the control deck. */
body.page-gallery #gallery .self-orbit-status {
  align-items: center !important;
}
body.page-gallery #gallery .self-orbit-progress {
  grid-column: 1;
  grid-row: 1;
}
body.page-gallery #gallery .self-orbit-progress-copy {
  grid-column: 2;
  grid-row: 1;
  min-height: 0 !important;
}
body.page-gallery #gallery .self-orbit-counter {
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
/* Match Speed and its multiplier to the neighboring control typography. */
body.page-gallery #gallery .speed-label,
body.page-gallery #gallery .speed-value {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
}
:root[data-theme="light"] body.page-gallery #gallery .speed-label,
:root[data-theme="light"] body.page-gallery #gallery .speed-value,
body[data-theme="light"].page-gallery #gallery .speed-label,
body[data-theme="light"].page-gallery #gallery .speed-value {
  color: #294e69 !important;
}
@media (max-width: 520px) {
  body.page-gallery #gallery .self-orbit-status {
    gap: 10px !important;
  }
}
/* Final music theme sync: make every track visibly change the player stage. */
body.page-music #music {
  --music-stage-ink: 255, 250, 244;
  --music-stage-muted: 222, 224, 232;
}
html[data-theme="light"] body.page-music #music,
body[data-theme="light"].page-music #music {
  --music-stage-ink: 36, 42, 64;
  --music-stage-muted: 92, 98, 124;
}
body.page-music #music .music-new-release {
  width: min(920px, calc(100% - 32px));
  margin: clamp(26px, 4vw, 42px) auto 0;
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(244, 251, 239, 0.4)),
    linear-gradient(90deg, rgba(247, 171, 194, 0.16), rgba(176, 219, 255, 0.18));
  box-shadow: 0 20px 58px rgba(91, 125, 157, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  color: rgba(42, 70, 55, 0.92);
  text-align: center;
  backdrop-filter: blur(18px) saturate(1.1);
}
body.page-music #music .music-new-release p {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.8;
  letter-spacing: 0;
}
body.page-music #music .music-new-release p + p {
  margin-top: 4px;
  font-size: clamp(14px, 1.2vw, 16px);
}
body.page-music #music .music-new-release strong {
  font-weight: 900;
}
body.page-music #music .music-new-release a {
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 96, 153, 0.34);
}
body.page-music #music .music-new-release a:hover {
  color: rgba(173, 73, 117, 0.96);
  border-bottom-color: rgba(173, 73, 117, 0.48);
}
html[data-theme="dark"] body.page-music #music .music-new-release,
body[data-theme="dark"].page-music #music .music-new-release,
html:not([data-theme]) body:not([data-theme]).page-music #music .music-new-release {
  border-color: rgba(255, 250, 236, 0.24);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055)),
    linear-gradient(90deg, rgba(247, 171, 194, 0.16), rgba(176, 219, 255, 0.14)),
    rgba(16, 24, 34, 0.52);
  color: rgba(251, 248, 244, 0.9);
  box-shadow: 0 22px 64px rgba(8, 14, 24, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.fans-filter-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(200, 167, 104, 0.4);
  color: var(--text-primary);
}
.fans-filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1a1a;
  font-weight: 600;
}
.fans-filter-btn.active span {
  background: rgba(26, 26, 26, 0.12);
}
.fans-filter-btn:disabled,
.fans-filter-btn.is-empty {
  cursor: not-allowed;
  opacity: 0.45;
}
.fans-video-grid,
.fans-gallery-masonry {
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.fans-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.fans-video-grid.is-filtering,
.fans-gallery-masonry.is-filtering {
  opacity: 0.42;
  transform: translateY(4px);
}
.fan-video-shell {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle at 28% 18%, rgba(200, 167, 104, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  aspect-ratio: 16 / 9;
}
.fan-video-shell video {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.28);
  object-fit: contain;
}
.fan-video-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(13, 15, 24, 0.18), rgba(13, 15, 24, 0.74)),
    radial-gradient(circle at 50% 42%, rgba(200, 167, 104, 0.26), transparent 42%);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.fan-video-cover:hover {
  transform: scale(1.015);
}
.video-card.is-video-loaded .fan-video-cover {
  pointer-events: none;
  opacity: 0;
}
.fan-video-play {
  width: 52px;
  height: 52px;
  margin: 0 auto 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}
.fan-video-play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 16px 0 0 20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid rgba(255, 255, 255, 0.92);
}
.fan-video-cover strong,
.fan-video-cover em {
  display: block;
  font-style: normal;
}
.fan-video-cover strong {
  font-size: 14px;
  letter-spacing: 0.08em;
}
.fan-video-cover em {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}
.fan-video-status {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 3;
  display: none;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}
.video-card.is-video-loading .fan-video-status.is-loading,
.video-card.is-video-error .fan-video-status.is-error {
  display: inline-flex;
}
.video-card.is-video-error .fan-video-cover {
  opacity: 1;
  pointer-events: auto;
}
.fans-gallery-masonry {
  margin-top: 20px;
}
.video-section,
.fans-gallery-group {
  scroll-margin-top: 126px;
}
.fans-gallery-group + .fans-gallery-group {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.fans-gallery-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 2px 14px;
}
.fans-gallery-group-heading span {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.fans-gallery-group-heading small {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.fans-gallery-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.fans-gallery-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}
.fans-gallery-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}
.fans-gallery-item:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(200, 167, 104, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 40px rgba(200, 167, 104, 0.1);
}
.fans-gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: all 0.4s ease;
  filter: brightness(1.08) saturate(1.05);
}
.fans-gallery-item img {
  cursor: pointer;
}
.fans-gallery-item:hover img {
  filter: brightness(1.12) saturate(1.1);
}
.fans-gallery-source {
  position: relative;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.fans-gallery-source strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  line-height: 1.2;
}
.fans-gallery-source a,
.fans-gallery-source span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fans-empty-state {
  display: block;
  grid-column: 1 / -1;
  column-span: all;
  margin: 0;
  padding: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 768px) {
  .fans-container {
    gap: 28px;
  }
  .fans-section {
    padding: 20px 18px;
    border-radius: 16px;
  }
  .fans-section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .fans-section-icon {
    font-size: 28px;
  }
  .fans-section-header h3 {
    font-size: 18px;
  }
  .fans-section-header p {
    font-size: 13px;
  }
  .fans-video-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .fans-gallery-masonry {
    margin-top: 16px;
  }
  .fans-gallery-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .fans-gallery-group-grid {
    grid-template-columns: 1fr;
  }
}
/* Fans material credits: a compact acknowledgement rail inspired by Works. */
.fans-credits-nav {
  position: fixed;
  top: 38vh;
  right: 0;
  z-index: 78;
  display: grid;
  grid-template-columns: 48px 0fr;
  align-items: start;
  width: 48px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px 0 0 12px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: width 0.32s ease, grid-template-columns 0.32s ease, background 0.32s ease;
}
.fans-credits-nav.is-open {
  grid-template-columns: 54px minmax(150px, 1fr);
  width: 244px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-right: 0;
  border-radius: 16px 0 0 16px;
  background: rgba(20, 27, 43, 0.82);
  box-shadow: 0 18px 50px rgba(8, 15, 30, 0.18);
  backdrop-filter: blur(20px) saturate(1.25);
}
.fans-credits-toggle {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 46px;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px solid rgba(248, 216, 144, 0.28);
  border-radius: 11px;
  color: #f3d899;
  background: rgba(248, 216, 144, 0.1);
  cursor: pointer;
}
.fans-credits-toggle i {
  font-size: 14px;
}
.fans-credits-toggle span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.fans-credits-list {
  display: none;
  min-width: 0;
  padding-left: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.2s ease 0.08s, transform 0.28s ease;
}
.fans-credits-nav.is-open .fans-credits-list {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.fans-credits-list p {
  margin: 1px 4px 7px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.fans-credits-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.fans-credits-list a:hover,
.fans-credits-list a:focus-visible {
  color: #f8d890;
  background: rgba(248, 216, 144, 0.12);
  transform: translateX(-2px);
}
[data-theme="light"] .fans-credits-nav.is-open {
  border-color: rgba(101, 145, 191, 0.22);
  background: rgba(248, 252, 255, 0.92);
  box-shadow: 0 16px 42px rgba(69, 122, 180, 0.13);
}
[data-theme="light"] .fans-credits-toggle {
  color: #5d83ad;
  border-color: rgba(111, 160, 208, 0.3);
  background: linear-gradient(145deg, rgba(214, 237, 251, 0.86), rgba(246, 220, 235, 0.72));
}
[data-theme="light"] .fans-credits-list p {
  color: rgba(34, 61, 91, 0.58);
}
[data-theme="light"] .fans-credits-list a {
  color: #294865;
}
[data-theme="light"] .fans-credits-list a:hover,
[data-theme="light"] .fans-credits-list a:focus-visible {
  color: #285f91;
  background: rgba(125, 181, 224, 0.14);
}
@media (max-width: 1280px) {
  .fans-credits-nav {
    display: none;
  }
}
/* Final photo-grade pass for the light time-machine gallery. */
#gallery .gallery-item {
  --photo-lift: rgba(255, 247, 235, 0.2);
  --photo-cool: rgba(142, 178, 199, 0.16);
  --photo-rose: rgba(216, 143, 137, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  background: linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0.055)),
    linear-gradient(180deg, rgba(239, 230, 214, 0.1), rgba(142, 178, 199, 0.08));
  box-shadow: 0 26px 64px rgba(38, 47, 67, 0.18),
    0 8px 28px rgba(217, 166, 174, 0.14),
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 0 38px rgba(255,255,255,0.12) inset;
}
#gallery .gallery-item img {
  image-rendering: auto;
  transform: translateZ(0) scale(1.012);
  backface-visibility: hidden;
  filter: brightness(1.075)
    contrast(1.045)
    saturate(1.075)
    sepia(0.018)
    drop-shadow(0 18px 32px rgba(38, 47, 67, 0.12));
}
#gallery .gallery-item::before {
  background: radial-gradient(circle at 28% 12%, rgba(255,255,255,0.3), transparent 22%),
    radial-gradient(circle at 78% 22%, var(--photo-cool), transparent 31%),
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 32%),
    linear-gradient(180deg, var(--photo-lift), transparent 46%, var(--photo-rose));
  opacity: 0.72;
}
#gallery .gallery-item::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 34%, rgba(24, 29, 38, 0.08)),
    radial-gradient(ellipse at center, transparent 42%, rgba(31, 42, 54, 0.2) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset,
    0 18px 46px rgba(255,255,255,0.14) inset;
  opacity: 0.58;
}
#gallery .gallery-item .color-grade {
  background: linear-gradient(135deg, rgba(255, 244, 224, 0.24), transparent 38%),
    radial-gradient(circle at 72% 20%, rgba(167, 197, 214, 0.18), transparent 34%),
    linear-gradient(180deg, transparent 48%, rgba(52, 58, 72, 0.14));
  mix-blend-mode: soft-light;
  opacity: 0.72;
}
#gallery .gallery-item .grain {
  opacity: 0.08;
  mix-blend-mode: overlay;
}
#gallery .gallery-item:hover img {
  filter: brightness(1.12)
    contrast(1.055)
    saturate(1.1)
    sepia(0.015)
    drop-shadow(0 24px 38px rgba(38, 47, 67, 0.16));
}
.lightbox {
  overflow: hidden;
  background-color: transparent;
  background: radial-gradient(ellipse at center,
      rgba(255,255,255,0.95) 0%,
      rgba(245,204,212,0.85) 40%,
      rgba(188,217,240,0.85) 70%,
      rgba(255,255,255,0.9) 100%);
  backdrop-filter: blur(15px);
}
.lightbox::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.lightbox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.lightbox-content {
  filter: drop-shadow(0 26px 90px rgba(76,91,125,0.2))
    drop-shadow(0 0 90px rgba(212,175,55,0.18));
}
.lightbox-media-frame {
  border-radius: 16px;
}
.lightbox-media-frame::before {
  border-radius: 14px;
}
.lightbox .lightbox-media-frame img,
.lightbox-media-frame img,
#lightboxImage {
  transform: translateZ(0);
  image-rendering: auto;
  backface-visibility: hidden;
}
.lightbox-caption,
#lightboxCaption {
  border-color: rgba(255,255,255,0.34);
  text-shadow: 0 2px 14px rgba(0,0,0,0.18);
}
.lightbox-nav,
.lightbox-close,
.camera-particle-trigger,
.particle-burst-trigger {
  border-color: rgba(255,255,255,0.62) !important;
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.48), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14)),
    rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.96) !important;
  box-shadow: 0 16px 42px rgba(76,91,125,0.22),
    0 0 28px rgba(255,255,255,0.24) inset,
    0 0 34px rgba(217,166,174,0.22) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}
.lightbox-nav:hover,
.lightbox-close:hover,
.camera-particle-trigger:hover,
.particle-burst-trigger:hover {
  border-color: rgba(255,255,255,0.72) !important;
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.58), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,182,193,0.24)),
    rgba(255,255,255,0.2) !important;
  color: var(--gold) !important;
  box-shadow: 0 18px 48px rgba(76,91,125,0.24),
    0 0 30px rgba(255,255,255,0.28) inset,
    0 0 36px rgba(217,166,174,0.24) !important;
}
.lightbox .particle-shape-controls button,
.particle-shape-controls button {
  border-color: rgba(255,255,255,0.26) !important;
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.86) !important;
}
.lightbox .particle-shape-controls button:hover,
.lightbox .particle-shape-controls button.active,
.particle-shape-controls button:hover,
.particle-shape-controls button.active {
  border-color: rgba(140,205,232,0.68) !important;
  background: rgba(140,205,232,0.24) !important;
  color: #f9fdff !important;
  text-shadow: 0 0 12px rgba(140,205,232,0.58);
}
/* 画廊无限滚动加载更多指示器 */
.gallery-load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gallery-load-more.loading {
  opacity: 1;
  visibility: visible;
}
.gallery-load-more .loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gallery-load-more .loader-ring {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  border-top-color: rgba(232, 185, 102, 0.8);
  animation: spin 1s linear infinite;
}
.gallery-load-more .loader span {
  font-size: 14px;
  color: rgba(255, 253, 248, 0.68);
  letter-spacing: 0.04em;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* 浅色主题加载指示器样式 */
[data-theme="light"] .gallery-load-more .loader-ring {
  border-color: rgba(0, 0, 0, 0.12);
  border-top-color: rgba(200, 167, 104, 0.75);
}
[data-theme="light"] .gallery-load-more .loader span {
  color: rgba(40, 42, 54, 0.64);
}
/* ============ Multi-page UX refinements ============ */
/* access-mode 已移至导航栏内部，与导航项保持视觉齐平 */
.access-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  flex-shrink: 0;
}
.access-chip {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255,255,255,0.78);
  background: transparent !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.access-chip.active {
  color: #1a2032;
  border-color: rgba(255,255,255,0.55);
  background: linear-gradient(135deg, rgba(255,248,250,0.95), rgba(218,190,130,0.9)) !important;
}
.site-header {
  gap: 12px;
}
.site-nav {
  gap: 6px;
  align-items: center;
}
.site-nav a {
  padding-inline: 14px;
}
/* access-mode 在导航栏内的样式适配 */
.site-nav .access-mode {
  margin-left: 80px;
}
body:not(.page-home) .topology-toggle {
  display: none;
}
/* 响应式：小屏幕下导航栏内的 access-mode 调整 */
@media (max-width: 1100px) {
  .site-nav .access-mode {
    margin-left: 4px;
    padding: 3px;
    gap: 4px;
  }
  .site-nav .access-chip {
    padding: 0 10px;
    min-height: 30px;
    font-size: 12px;
  }
  .site-nav .access-chip span {
    display: none;
  }
}
[data-theme="light"] .site-header {
  border-bottom-color: rgba(89,119,157,0.22);
}
[data-theme="light"] .access-mode {
  border-color: rgba(70, 96, 130, 0.18);
  background: rgba(255,255,255,0.7);
}
[data-theme="light"] .access-chip {
  color: var(--text-soft);
}
[data-theme="light"] .access-chip.active {
  color: #ffffff;
  background: linear-gradient(135deg, #486f9d, #c66d93) !important;
  border-color: rgba(255,255,255,0.72);
}
[data-theme="light"] main,
[data-theme="light"] .section-heading,
[data-theme="light"] .profile-copy,
[data-theme="light"] .profile-text-card,
[data-theme="light"] .reference-grid article,
[data-theme="light"] .social-note,
[data-theme="light"] .schedule-card,
[data-theme="light"] .work-card,
[data-theme="light"] .audio-card,
[data-theme="light"] .life-card {
  color: var(--text-main);
}
[data-theme="light"] .section-heading p,
[data-theme="light"] .lead,
[data-theme="light"] .profile-role,
[data-theme="light"] .profile-text-card p,
[data-theme="light"] .reference-grid p {
  background: rgba(255, 255, 255, 0.5) !important;
}
[data-theme="light"] .social-note {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(58, 48, 82, 0.04) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) saturate(1);
}
[data-theme="light"] .social-note p {
  color: rgba(58, 48, 82, 0.7);
  text-shadow: none;
}
[data-theme="light"] .profile-badges span,
[data-theme="light"] .profile-text-card,
[data-theme="light"] .reference-grid article {
  background: rgba(255,255,255,0.4);
  border-color: rgba(58,48,82,0.04);
}
[data-theme="light"] .profile-name,
[data-theme="light"] .profile-name span {
  color: rgba(58, 48, 82, 0.55) !important;
  text-shadow: none !important;
}
[data-theme="light"] .profile-role,
[data-theme="light"] .profile-badges strong,
[data-theme="light"] .profile-badges em,
[data-theme="light"] .profile-text-card,
[data-theme="light"] .profile-text-card p,
[data-theme="light"] .schedule-card,
[data-theme="light"] .schedule-card p,
[data-theme="light"] .work-card,
[data-theme="light"] .work-card p,
[data-theme="light"] .social-card,
[data-theme="light"] .social-card p {
  color: var(--text-main) !important;
  text-shadow: 0 1px 10px rgba(255,255,255,0.82) !important;
}
[data-theme="light"] .profile-badges b {
  color: #8f4267 !important;
}
@media (max-width: 1180px) {
  .access-mode {
    top: auto;
    right: 16px;
    bottom: 26px;
  }
}
@media (max-width: 768px) {
  .theme-toggle {
    bottom: 104px;
  }
  .access-chip span {
    display: none;
  }
}
/* Blue-pink frosted light theme inspired by the reference site. */
[data-theme="light"] {
  --aesthetic-bg-0: #f8fbff;
  --aesthetic-bg-1: #eef7ff;
  --aesthetic-bg-2: #fff1f8;
  --aesthetic-bg-3: #e4f2ff;
  --glass-surface: rgba(255, 255, 255, 0.52);
  --glass-surface-soft: rgba(255, 255, 255, 0.38);
  --glass-surface-medium: rgba(255, 255, 255, 0.64);
  --glass-surface-strong: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.68);
  --glass-edge-soft: rgba(125, 175, 232, 0.24);
  --glass-edge-subtle: rgba(26, 86, 160, 0.12);
  --glass-shadow: rgba(26, 86, 160, 0.14);
  --text-main: #121826;
  --text-soft: #263b59;
  --text-muted: #64758c;
  --text-subtle: #8b9aac;
  --text-accent: #b94e7b;
  --accent-blue: #7dafe8;
  --accent-blue-soft: #dceeff;
  --accent-blue-deep: #1f3f75;
  --accent-rose: #f4a7c5;
  --accent-rose-light: #fbe3ee;
  --accent-rose-dark: #c85f8f;
  --accent-purple: #c8a6ff;
  --accent-cyan: #8bd8f4;
  --accent-gold: #7dafe8;
  --accent-rose-gold: #f4a7c5;
  --paper: #121826;
  --paper-soft: rgba(18, 24, 38, 0.76);
  --ink: #121826;
  --ink-soft: #263b59;
  --rose: #f4a7c5;
  --rose-soft: #fbe3ee;
  --aqua: #7dafe8;
  --gold: #c8a6ff;
  --line: rgba(26, 86, 160, 0.16);
  --line-soft: rgba(26, 86, 160, 0.08);
  --shadow: 0 24px 70px rgba(26, 86, 160, 0.16);
  --shadow-deep: 0 34px 110px rgba(26, 86, 160, 0.22);
  --shadow-glow-rose: 0 18px 52px rgba(244, 167, 197, 0.32);
  --shadow-glow-aqua: 0 18px 52px rgba(125, 175, 232, 0.28);
  --blur-glass: blur(24px) saturate(1.35);
}
[data-theme="light"] body {
  color: var(--text-main);
  background: radial-gradient(circle at 13% 10%, rgba(244, 167, 197, 0.58), transparent 28rem),
    radial-gradient(circle at 88% 14%, rgba(125, 175, 232, 0.58), transparent 32rem),
    radial-gradient(circle at 64% 78%, rgba(200, 166, 255, 0.28), transparent 28rem),
    radial-gradient(circle at 20% 78%, rgba(139, 216, 244, 0.24), transparent 26rem),
    linear-gradient(135deg, #f8fbff 0%, #eef7ff 43%, #fff1f8 72%, #e4f2ff 100%) !important;
  background-attachment: fixed;
}
[data-theme="light"] body::before {
  background: radial-gradient(circle at 12% 18%, rgba(244, 167, 197, 0.42), transparent 28rem),
    radial-gradient(circle at 86% 22%, rgba(125, 175, 232, 0.46), transparent 34rem),
    radial-gradient(circle at 54% 74%, rgba(200, 166, 255, 0.24), transparent 30rem),
    radial-gradient(circle at 34% 54%, rgba(255, 255, 255, 0.55), transparent 22rem);
  filter: blur(28px) saturate(1.18);
  opacity: 0.84;
}
[data-theme="light"] body::after {
  background: linear-gradient(rgba(26, 86, 160, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 86, 160, 0.038) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.86), transparent 28rem);
  background-size: 128px 128px, 128px 128px, auto;
  opacity: 0.5;
}
[data-theme="light"] #particleCanvas,
[data-theme="light"] #topologyCanvas {
  opacity: 0.2;
  mix-blend-mode: multiply;
}
[data-theme="light"] .ambient {
  filter: blur(28px) saturate(1.2);
  opacity: 0.42;
}
[data-theme="light"] .site-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.46)),
    rgba(238, 247, 255, 0.58) !important;
  border-bottom: 1px solid rgba(255,255,255,0.62) !important;
  box-shadow: 0 18px 54px rgba(26, 86, 160, 0.12);
  backdrop-filter: blur(24px) saturate(1.45);
}
[data-theme="light"] .site-search-inline,
[data-theme="light"] .access-mode {
  border-color: rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.5) !important;
  box-shadow: 0 14px 38px rgba(26, 86, 160, 0.12), inset 0 1px 0 rgba(255,255,255,0.72);
  backdrop-filter: blur(22px) saturate(1.35);
}
[data-theme="light"] .brand-mark,
[data-theme="light"] .login-mark {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1f3f75 0%, #7dafe8 46%, #f4a7c5 100%) !important;
  box-shadow: 0 16px 34px rgba(125, 175, 232, 0.28);
}
[data-theme="light"] .site-nav a,
[data-theme="light"] .site-search-inline input,
[data-theme="light"] .site-search-inline button,
[data-theme="light"] .access-chip {
  color: var(--text-soft) !important;
  text-shadow: none !important;
}
[data-theme="light"] .site-nav a {
  border: 1px solid transparent;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
[data-theme="light"] .site-nav a.active,
[data-theme="light"] .site-nav a:hover {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.72) !important;
  background: linear-gradient(135deg, rgba(26, 86, 160, 0.94), rgba(125, 175, 232, 0.86) 48%, rgba(244, 167, 197, 0.92)) !important;
  box-shadow: 0 12px 28px rgba(125, 175, 232, 0.24);
}
[data-theme="light"] .site-search-inline input::placeholder {
  color: rgba(100, 117, 140, 0.82) !important;
}
[data-theme="light"] .site-search-inline:focus-within {
  border-color: rgba(125, 175, 232, 0.58) !important;
  box-shadow: 0 18px 48px rgba(125, 175, 232, 0.18), 0 0 0 4px rgba(244, 167, 197, 0.12);
}
[data-theme="light"] .theme-toggle,
[data-theme="light"] .topology-toggle,
[data-theme="light"] .bgm-control {
  color: var(--accent-blue-deep) !important;
  border-color: rgba(255,255,255,0.72) !important;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.88), transparent 34%),
    linear-gradient(135deg, rgba(220,238,255,0.78), rgba(251,227,238,0.7)) !important;
  box-shadow: 0 18px 42px rgba(26, 86, 160, 0.14), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(20px) saturate(1.32);
}
[data-theme="light"] .access-chip.active,
[data-theme="light"] .filter-btn.active,
[data-theme="light"] .fans-filter-btn.active {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.74) !important;
  background: linear-gradient(135deg, #1f3f75 0%, #7dafe8 52%, #f4a7c5 100%) !important;
  box-shadow: 0 14px 34px rgba(125, 175, 232, 0.26);
}
[data-theme="light"] .hero {
  isolation: isolate;
}
[data-theme="light"] .hero-copy {
  color: var(--text-main) !important;
}
[data-theme="light"] .hero-title-en,
[data-theme="light"] .section-heading h1,
[data-theme="light"] .section-heading h2,
[data-theme="light"] .section-title {
  color: #5a4a7c !important;
  letter-spacing: 0.045em;
}
[data-theme="light"] .hero-title-group {
  display: grid !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 6px 0 !important;
  justify-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
}
/**
 * 浅色主题中文标题样式
 * @optimization 使用统一的渐变类 `.heading-gradient-purple` 减少代码冗余
 */
[data-theme="light"] .hero-title-cn {
  font-family: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", "Georgia", "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  font-size: 1.1em !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  /* 使用统一的渐变类 */
  background: var(--heading-gradient-primary) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: titleColorShift 8s ease-in-out infinite !important;
}
[data-theme="light"] .hero-gift {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  color: var(--text-accent) !important;
  background: rgba(255,255,255,0.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
  backdrop-filter: blur(18px) saturate(1.35);
}
[data-theme="light"] .lead,
[data-theme="light"] .section-heading p,
[data-theme="light"] .section-subtitle,
[data-theme="light"] .scroll-cue {
  color: var(--text-muted) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75) !important;
}
[data-theme="light"] .hero-media {
  border: 1px solid rgba(255,255,255,0.72) !important;
  isolation: isolate;
  background: linear-gradient(145deg, rgba(255,255,255,0.34), rgba(220,238,255,0.12)),
    rgba(255,255,255,0.18) !important;
  box-shadow: 0 34px 90px rgba(26, 86, 160, 0.16),
    0 16px 56px rgba(244, 167, 197, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.58) !important;
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}
[data-theme="light"] .hero-media img {
  position: relative;
  z-index: 3;
  filter: saturate(1.16) contrast(1.08) brightness(0.98);
}
[data-theme="light"] .hero-media::after {
  z-index: 1;
  opacity: 0.16;
  mix-blend-mode: soft-light;
}
[data-theme="light"] .hero-ring {
  z-index: 2;
  border-color: rgba(125, 175, 232, 0.5) !important;
  box-shadow: 0 0 60px rgba(244, 167, 197, 0.28), inset 0 0 46px rgba(255,255,255,0.45);
}
[data-theme="light"] .hero-media .blush-trigger {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .btn,
[data-theme="light"] button:not(.nav-toggle):not(.theme-toggle):not(.topology-toggle):not(.bgm-control):not(.lightbox-nav):not(.lightbox-close) {
  border-color: rgba(255,255,255,0.68) !important;
  box-shadow: 0 16px 36px rgba(26, 86, 160, 0.14), inset 0 1px 0 rgba(255,255,255,0.7);
}
[data-theme="light"] .btn.primary,
[data-theme="light"] .login-form button {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1f3f75 0%, #7dafe8 48%, #f4a7c5 100%) !important;
}
[data-theme="light"] .btn.ghost,
[data-theme="light"] .filter-btn,
[data-theme="light"] .fans-filter-btn {
  color: var(--accent-blue-deep) !important;
  background: rgba(255,255,255,0.44) !important;
  border: 1px solid rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(18px) saturate(1.25);
}
[data-theme="light"] .btn:hover,
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .fans-filter-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 167, 197, 0.65) !important;
  box-shadow: 0 20px 52px rgba(244, 167, 197, 0.22), 0 14px 40px rgba(125, 175, 232, 0.16) !important;
}
[data-theme="light"] .section-heading,
[data-theme="light"] .profile-copy,
[data-theme="light"] .profile-text-card,
[data-theme="light"] .reference-grid article,
[data-theme="light"] .social-note,
[data-theme="light"] .social-card,
[data-theme="light"] .schedule-card,
[data-theme="light"] .work-card,
[data-theme="light"] .audio-card,
[data-theme="light"] .life-card,
[data-theme="light"] .fans-section,
[data-theme="light"] .fans-gallery-item,
[data-theme="light"] .audio-modal-content,
[data-theme="light"] .schedule-modal-content,
[data-theme="light"] .login-panel {
  color: var(--text-main) !important;
  border: 1px solid rgba(255,255,255,0.66) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.58), rgba(255,255,255,0.3)),
    linear-gradient(135deg, rgba(220,238,255,0.24), rgba(251,227,238,0.2)) !important;
  box-shadow: 0 24px 70px rgba(26, 86, 160, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(24px) saturate(1.38);
}
[data-theme="light"] .section-heading {
  background: linear-gradient(145deg, rgba(255,255,255,0.38), rgba(255,255,255,0.16)),
    linear-gradient(90deg, rgba(220,238,255,0.34), rgba(251,227,238,0.26)) !important;
}
[data-theme="light"] .social-card:hover,
[data-theme="light"] .schedule-card:hover,
[data-theme="light"] .work-card:hover,
[data-theme="light"] .audio-card:hover,
[data-theme="light"] .life-card:hover,
[data-theme="light"] .fans-gallery-item:hover {
  border-color: rgba(244, 167, 197, 0.68) !important;
  box-shadow: 0 32px 90px rgba(26, 86, 160, 0.18),
    0 0 48px rgba(244, 167, 197, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}
[data-theme="light"] .profile-text-card p,
[data-theme="light"] .reference-grid p,
[data-theme="light"] .social-card p,
[data-theme="light"] .schedule-card p,
[data-theme="light"] .work-card p,
[data-theme="light"] .audio-card p,
[data-theme="light"] .life-card p,
[data-theme="light"] .fans-section p {
  color: var(--text-soft) !important;
  text-shadow: none !important;
}
[data-theme="light"] .tag,
[data-theme="light"] .profile-badges span,
[data-theme="light"] .audio-tag {
  color: var(--accent-blue-deep) !important;
  border-color: rgba(125, 175, 232, 0.28) !important;
  background: rgba(220, 238, 255, 0.48) !important;
}
[data-theme="light"] .tag-special,
[data-theme="light"] .profile-badges b {
  color: var(--accent-rose-dark) !important;
  background: rgba(251, 227, 238, 0.64) !important;
}
/* 浅色主题输入框 - 统一优化的文本框组件（重复样式统一，确保一致性） */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  color: var(--text-main) !important;
  border-color: rgba(170, 160, 165, 0.35) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.85)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] input:hover,
[data-theme="light"] textarea:hover,
[data-theme="light"] select:hover {
  border-color: rgba(170, 160, 165, 0.55) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)) !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--accent-rose-gold) !important;
  box-shadow: 0 0 0 4px rgba(201, 160, 165, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92)) !important;
  outline: none;
}
/* 禁用状态 */
[data-theme="light"] input:disabled,
[data-theme="light"] textarea:disabled,
[data-theme="light"] select:disabled {
  border-color: rgba(170, 160, 165, 0.25) !important;
  background: linear-gradient(135deg, rgba(245, 243, 240, 0.85), rgba(237, 235, 231, 0.9)) !important;
  color: var(--text-disabled) !important;
  cursor: not-allowed !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
/* 错误状态 */
[data-theme="light"] input:invalid:not(:placeholder-shown),
[data-theme="light"] textarea:invalid:not(:placeholder-shown),
[data-theme="light"] select:invalid {
  border-color: rgba(200, 80, 95, 0.65) !important;
  background: linear-gradient(135deg, rgba(255, 245, 247, 0.95), rgba(255, 240, 243, 0.9)) !important;
  box-shadow: 0 0 0 4px rgba(200, 80, 95, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus,
[data-theme="light"] input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-main) !important;
}
[data-theme="light"] .login-gate {
  background: radial-gradient(circle at 18% 16%, rgba(244,167,197,0.48), transparent 30rem),
    radial-gradient(circle at 82% 74%, rgba(125,175,232,0.42), transparent 34rem),
    rgba(248,251,255,0.72) !important;
}
[data-theme="light"] .login-panel p,
[data-theme="light"] .login-form label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .login-message {
  color: var(--accent-rose-dark) !important;
}
[data-theme="light"] .site-footer {
  border-top: 1px solid rgba(255,255,255,0.58);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.36));
}
[data-theme="light"] .lightbox-content,
[data-theme="light"] .lightbox-media-frame {
  border-color: rgba(255,255,255,0.66) !important;
  background: rgba(255,255,255,0.48) !important;
  box-shadow: 0 32px 100px rgba(26, 86, 160, 0.24) !important;
  backdrop-filter: blur(26px) saturate(1.32);
}
[data-theme="light"] .lightbox-nav,
[data-theme="light"] .lightbox-close,
[data-theme="light"] .schedule-modal-close,
[data-theme="light"] .audio-modal-close {
  color: var(--accent-blue-deep) !important;
  border-color: rgba(255,255,255,0.72) !important;
  background: rgba(255,255,255,0.58) !important;
}
@media (max-width: 768px) {
  [data-theme="light"] .site-nav.open {
    border-color: rgba(255,255,255,0.7);
    background: rgba(248,251,255,0.78) !important;
    box-shadow: 0 24px 80px rgba(26, 86, 160, 0.18);
    backdrop-filter: blur(26px) saturate(1.4);
  }
  [data-theme="light"] .hero-gift {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* Final hotfix overrides: keep these at the end of the theme layer. */
.heart-pop-close {
  position: fixed;
  top: clamp(18px, 4vw, 34px);
  right: clamp(18px, 4vw, 34px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  color: rgba(40, 40, 52, 0.86);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(31, 42, 72, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font: 800 18px/1 "Microsoft YaHei", "PingFang SC", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(1.2);
}
.heart-pop-close:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.9);
}
/**
 * 浅色主题标题渐变样式（高优先级选择器）
 * @optimization 使用 CSS 变量统一管理渐变，减少重复定义
 */
[data-theme="light"] .hero-title-cn,
[data-theme="light"] body .hero-title-cn,
[data-theme="light"] html .hero-title-cn,
[data-theme="light"] #hero .hero-title-cn,
[data-theme="light"] #home .hero-title-cn {
  background-image: var(--heading-gradient-primary) !important;
  background-size: 400% 400% !important;
  animation: titleColorShift 8s ease-in-out infinite !important;
}
[data-theme="light"] .hero-title-en {
  color: rgba(222,229,236,0.76) !important;
}
[data-theme="light"] .hero-title {
  text-shadow: 0 2px 0 rgba(255,255,255,0.04),
    0 22px 50px rgba(8,10,18,0.34),
    0 0 34px rgba(217,166,174,0.12) !important;
}
[data-theme="light"] .heart-pop-card.has-image,
.heart-pop-card.has-image {
  background-size: cover !important;
  background-position: center !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
  backdrop-filter: none !important;
}
[data-theme="light"] .heart-pop-card.has-image::before {
  opacity: 0.18 !important;
}
[data-theme="light"] .heart-pop-card.has-image span {
  background: rgba(255, 255, 255, 0.34) !important;
}
/* Light theme content QA pass: preserve the existing background and excluded chrome. */
[data-theme="light"] {
  /* ============ 墨水色阶系统 - 进一步加深，确保文字清晰可见 ============ */
  --light-ink-900: #000000;
  /* 纯黑色 - 标题/重要文字 */
  --light-ink-800: #0a0a0a;
  /* 深黑色 - 正文主色 */
  --light-ink-700: #141414;
  /* 中黑色 - 正文辅助色 */
  --light-ink-600: #202020;
  /* 浅黑色 - 次要信息 */
  --light-muted-aa: #303030;
  /* 柔和黑色 - 辅助文字 */
  /* ============ 强调色系统 - 增强视觉权重 ============ */
  /* 优化说明：
   * - 蓝色：从 #174a86 增强至 #1a56a0，提高饱和度以增强按钮/链接的可识别性
   * - 玫瑰色：从 #a62f67 增强至 #b83476，增加亮度以改善悬停/聚焦状态
   * - 青色：从 #0f6b83 增强至 #0e7a94，优化与背景的对比度 */
  --light-accent-blue: #1a56a0;
  /* 品牌蓝 - 交互元素主色（对比度提升至8:1+） */
  --light-accent-blue-hover: #1e62b0;
  /* 品牌蓝悬停态 */
  --light-accent-blue-active: #154580;
  /* 品牌蓝激活态 */
  --light-accent-rose: #b83476;
  /* 玫瑰粉 - 强调色（对比度提升至7:1+） */
  --light-accent-rose-hover: #c43d82;
  /* 玫瑰粉悬停态 */
  --light-accent-rose-active: #a02d6a;
  /* 玫瑰粉激活态 */
  --light-accent-cyan: #0e7a94;
  /* 青色 - 辅助强调（对比度提升至6.5:1） */
  --light-accent-gold: #c9972f;
  /* 金色 - 高亮强调（新增） */
  --light-focus: rgba(26, 86, 160, 0.32);
  /* 焦点环 - 增强可见性 */
  /* ============ 渐变色彩系统 - 增强层次感 ============ */
  /* 优化说明：增加渐变饱和度以提升视觉深度 */
  --light-glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(248, 252, 255, 0.48)),
    linear-gradient(135deg, rgba(225, 240, 255, 0.38), rgba(252, 230, 240, 0.30));
  --light-glass-bg-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(248, 252, 255, 0.62)),
    linear-gradient(135deg, rgba(225, 240, 255, 0.42), rgba(252, 230, 240, 0.32));
  --light-glass-bg-accent: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(225, 240, 255, 0.55)),
    linear-gradient(135deg, rgba(200, 230, 255, 0.48), rgba(255, 220, 235, 0.38));
  /* ============ 边框与分割线系统 ============ */
  --light-glass-border: rgba(255, 255, 255, 0.85);
  --light-glass-border-strong: rgba(26, 86, 160, 0.28);
  --light-hairline: rgba(12, 20, 33, 0.08);
  /* ============ 阴影系统 - 优化层次与深度 ============ */
  /* 优化说明：增强阴影不透明度以提升卡片立体感 */
  --light-card-shadow: 0 24px 72px rgba(26, 86, 160, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --light-card-shadow-hover: 0 32px 88px rgba(26, 86, 160, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.76), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --light-glow-blue: 0 0 20px rgba(26, 86, 160, 0.18);
  --light-glow-rose: 0 0 20px rgba(184, 52, 118, 0.16);
  /* ============ 字体系统 ============ */
  --light-body-font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Source Han Sans CN", sans-serif;
  --light-display-font: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", serif;
}
[data-theme="light"] main {
  color: var(--light-ink-900);
  font-family: var(--light-body-font);
  font-size: var(--font-base);
  line-height: var(--leading-relaxed);
  letter-spacing: 0;
}
[data-theme="light"] main :where(p, li, dd, dt, span, small, figcaption, label, time, strong, em) {
  color: var(--light-ink-700);
  line-height: var(--leading-relaxed);
  letter-spacing: 0;
  text-shadow: none;
}
[data-theme="light"] main :where(h1, h2, h3, h4, h5, h6, .section-title):not(.hero-title-cn):not(.hero-title-en) {
  color: #5a4a7c !important;
  -webkit-text-fill-color: #5a4a7c !important;
  font-family: var(--light-display-font);
  line-height: var(--leading-snug);
  letter-spacing: 0.045em;
  text-shadow: none !important;
}
[data-theme="light"] main :where(.eyebrow, .section-subtitle, .section-heading p, .lead, .scroll-cue, .work-meta, .schedule-meta, .audio-meta, .quote-meta, .gallery-caption, .fans-meta) {
  color: var(--light-muted-aa) !important;
}
[data-theme="light"] #home .hero-copy,
[data-theme="light"] #home .hero-copy :where(p, span:not(.hero-title-cn):not(.hero-title-en)) {
  color: var(--light-ink-700) !important;
}
/**
 * 首页中文标题样式
 * @optimization 使用 CSS 变量统一管理渐变
 */
[data-theme="light"] main :where(.section-heading, .profile-copy, .profile-text-card, .reference-grid article, .social-note, .social-card, .schedule-card, .work-card, .audio-card, .life-card, .music-card, .quote-card, .quote-panel, .fans-section, .fans-gallery-item, .gallery-tab, .gallery-category-section, .gallery-item, .video-card, .resonance-panel, .resonance-card, .resonance-map-card, .resonance-side-card, .resonance-modal-content, .audio-modal-content, .schedule-modal-content) {
  color: var(--light-ink-900) !important;
  border: 1px solid var(--light-glass-border) !important;
  background: var(--light-glass-bg) !important;
  box-shadow: var(--light-card-shadow) !important;
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
}
[data-theme="light"] main :where(.section-heading, .quote-panel, .resonance-panel, .resonance-modal-content) {
  background: var(--light-glass-bg-strong) !important;
  border-color: rgba(255, 255, 255, 0.88) !important;
}
[data-theme="light"] main :where(.social-card, .schedule-card, .work-card, .audio-card, .life-card, .music-card, .quote-card, .fans-gallery-item, .gallery-tab, .gallery-item, .video-card, .profile-text-card, .reference-grid article, .resonance-card, .resonance-map-card, .resonance-side-card) {
  transition: transform var(--transition-medium),
    border-color var(--transition-medium),
    box-shadow var(--transition-medium),
    background var(--transition-medium),
    color var(--transition-fast);
}
[data-theme="light"] main :where(.social-card, .schedule-card, .work-card, .audio-card, .life-card, .music-card, .quote-card, .fans-gallery-item, .gallery-tab, .gallery-item, .video-card, .profile-text-card, .reference-grid article, .resonance-card, .resonance-map-card, .resonance-side-card):hover {
  transform: translateY(-3px);
  border-color: rgba(26, 86, 160, 0.24) !important;
  background: var(--light-glass-bg-strong) !important;
  box-shadow: var(--light-card-shadow-hover) !important;
}
[data-theme="light"] main :where(.section-heading p, .profile-text-card p, .social-card p, .schedule-card p, .work-card p, .audio-card p, .life-card p, .music-card p, .quote-card p, .quote-panel p, .fans-section p, .video-card p, .resonance-section p, .resonance-section label) {
  color: #000000 !important;
  line-height: 1.78;
}
[data-theme="light"] main :where(.social-card strong, .schedule-card strong, .work-card strong, .audio-card strong, .life-card strong, .music-card strong, .quote-card strong, .fans-section strong, .resonance-section strong) {
  color: var(--light-ink-900) !important;
  font-weight: 700;
}
[data-theme="light"] main :where(.tag, .profile-badges span, .gallery-category-link, .audio-tag, .work-tag, .schedule-tag, .filter-chip, .match-badge, .city-count) {
  color: var(--light-accent-blue) !important;
  border: 1px solid rgba(26, 86, 160, 0.18) !important;
  background: rgba(220, 238, 255, 0.66) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
[data-theme="light"] main :where(.tag-special, .profile-badges b, .quote-author, .text-accent) {
  color: var(--light-accent-rose) !important;
  border-color: rgba(184, 52, 118, 0.2) !important;
  background: rgba(251, 227, 238, 0.74) !important;
}
[data-theme="light"] main :where(a:not(.btn), .social-action, .weibo-link) {
  color: var(--light-accent-blue) !important;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}
[data-theme="light"] main :where(a:not(.btn), .social-action, .weibo-link):hover {
  color: var(--light-accent-rose) !important;
}
[data-theme="light"] main :where(i, .fa, .fas, .far, .fa-solid, .fa-regular, svg) {
  color: currentColor;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}
[data-theme="light"] main :where(.section-heading i, .gallery-tab-icon, .social-app-mark, .resonance-icon, .stat-icon) {
  color: var(--light-accent-blue) !important;
  border-color: rgba(255, 255, 255, 0.76) !important;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.86), transparent 38%),
    linear-gradient(135deg, rgba(220, 238, 255, 0.78), rgba(251, 227, 238, 0.62)) !important;
  box-shadow: 0 12px 30px rgba(26, 86, 160, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
[data-theme="light"] main :where(input, textarea, select, .light-message-input),
[data-theme="light"] main :where(.search-input-wrapper, .coord-input-group input, .nickname-login-form input, .nickname-register-form input) {
  color: var(--light-ink-900) !important;
  caret-color: var(--light-accent-blue);
  border: 1px solid rgba(26, 86, 160, 0.22) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(247, 251, 255, 0.56)),
    rgba(220, 238, 255, 0.2) !important;
  box-shadow: 0 12px 30px rgba(26, 86, 160, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(26, 86, 160, 0.04) !important;
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}
[data-theme="light"] main :where(input, textarea, select, .light-message-input)::placeholder {
  color: #5a6b84 !important;
  opacity: 1;
}
[data-theme="light"] main :where(input, textarea, select, .light-message-input):hover,
[data-theme="light"] main .search-input-wrapper:hover {
  border-color: rgba(26, 86, 160, 0.34) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(247, 251, 255, 0.64)),
    rgba(220, 238, 255, 0.24) !important;
}
[data-theme="light"] main :where(input, textarea, select, .light-message-input):focus,
[data-theme="light"] main :where(input, textarea, select, .light-message-input):focus-visible,
[data-theme="light"] main .search-input-wrapper:focus-within {
  border-color: rgba(26, 86, 160, 0.52) !important;
  outline: none;
  box-shadow: 0 0 0 4px var(--light-focus),
    0 18px 42px rgba(26, 86, 160, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
[data-theme="light"] main :where(input:disabled, textarea:disabled, select:disabled, button:disabled) {
  color: #68778f !important;
  border-color: rgba(16, 24, 39, 0.12) !important;
  background: rgba(240, 246, 253, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  cursor: not-allowed;
}
[data-theme="light"] main :where(.filter-btn, .fans-filter-btn, .gallery-tab, .gallery-expand-btn, .gallery-collapse-btn, .resonance-btn, .search-btn, .manual-btn, .set-coord-btn, .clear-btn, .light-btn, .control-btn, #worksSearchBtn) {
  color: var(--light-accent-blue) !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(220, 238, 255, 0.5)) !important;
  box-shadow: 0 14px 32px rgba(26, 86, 160, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  transition: transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
}
[data-theme="light"] main :where(.filter-btn.active, .fans-filter-btn.active, .gallery-tab.active, .resonance-btn.primary, .light-btn:not(:disabled), .control-btn.play-btn) {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  background: linear-gradient(135deg, #1a56a0 0%, #4f93d4 52%, #b83476 100%) !important;
  box-shadow: 0 18px 42px rgba(26, 86, 160, 0.22), 0 8px 26px rgba(184, 52, 118, 0.13) !important;
}
[data-theme="light"] main :where(.filter-btn, .fans-filter-btn, .gallery-tab, .gallery-expand-btn, .gallery-collapse-btn, .resonance-btn, .search-btn, .manual-btn, .set-coord-btn, .clear-btn, .light-btn, .control-btn, #worksSearchBtn):hover {
  transform: translateY(-2px);
  color: var(--light-accent-rose) !important;
  border-color: rgba(184, 52, 118, 0.28) !important;
  box-shadow: 0 20px 48px rgba(26, 86, 160, 0.17), 0 0 0 1px rgba(255, 255, 255, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
[data-theme="light"] main :where(.filter-btn, .fans-filter-btn, .gallery-tab, .gallery-expand-btn, .gallery-collapse-btn, .resonance-btn, .search-btn, .manual-btn, .set-coord-btn, .clear-btn, .light-btn, .control-btn, #worksSearchBtn):focus-visible,
[data-theme="light"] main :where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--light-focus);
  outline-offset: 3px;
}
[data-theme="light"] main :where(.gallery-item img, .fans-gallery-item img, .work-card img, .audio-card img, .video-card video) {
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 18px 46px rgba(26, 86, 160, 0.16);
}
[data-theme="light"] .site-footer {
  color: var(--light-muted-aa) !important;
}
@media (max-width: 768px) {
  [data-theme="light"] main {
    font-size: 15px;
  }
  [data-theme="light"] main :where(.section-heading, .profile-text-card, .reference-grid article, .social-note, .social-card, .schedule-card, .work-card, .audio-card, .life-card, .music-card, .quote-card, .quote-panel, .fans-section, .fans-gallery-item, .gallery-category-section, .resonance-panel, .resonance-card, .resonance-map-card, .resonance-side-card) {
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: 0 18px 48px rgba(26, 86, 160, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  }
}
[data-theme="light"] #resonance {
  --res-ink: var(--light-ink-900);
  --res-panel: rgba(255, 255, 255, 0.72);
  --res-panel-strong: rgba(255, 255, 255, 0.86);
  --res-line: rgba(26, 86, 160, 0.18);
  --res-text: var(--light-ink-900);
  --res-muted: var(--light-muted-aa);
  --res-gold: var(--light-accent-blue);
  --res-aqua: var(--light-accent-cyan);
  --res-rose: var(--light-accent-rose);
}
[data-theme="light"] #resonance :where(.resonance-heading, .resonance-shell, .resonance-login-state, .resonance-actions, .map-panel, .broadcast-panel, .fan-wall-panel, .map-search-bar, .manual-coord-panel, .selected-location-info, .map-actions, .map-stats, .stat-box, .resonance-stats span, .resonance-dialog, .login-choice, .nickname-login-form, .nickname-register-form) {
  color: var(--light-ink-900) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(247, 251, 255, 0.5)),
    linear-gradient(135deg, rgba(220, 238, 255, 0.34), rgba(251, 227, 238, 0.24)) !important;
  box-shadow: 0 22px 58px rgba(26, 86, 160, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(26px) saturate(1.42);
  -webkit-backdrop-filter: blur(26px) saturate(1.42);
}
[data-theme="light"] #resonance :where(.map-panel-header, .map-panel-head, .panel-title, .location-info-header, .stat-box-header) {
  color: var(--light-ink-900) !important;
  border-color: rgba(26, 86, 160, 0.14) !important;
  background: linear-gradient(135deg, rgba(220, 238, 255, 0.66), rgba(251, 227, 238, 0.42)) !important;
}
[data-theme="light"] #resonance :where(.resonance-heading p, .resonance-heading-metrics span, .resonance-login-state, .map-panel-head strong, .panel-title span, .location-details p, .stat-box-content, .broadcast-item, .login-choice p, .nickname-login-form label, .nickname-register-form label) {
  color: var(--light-muted-aa) !important;
  text-shadow: none !important;
}
[data-theme="light"] #resonance :where(.map-panel-header span, .map-panel-head span, .panel-title h3, .stat-box-header, .resonance-stats b, .nickname-login-form h3, .nickname-register-form h3) {
  color: var(--light-ink-900) !important;
}
[data-theme="light"] #resonance :where(.resonance-heading-metrics i, .map-panel-header i, .city-count i, .location-info-header i, .stat-box-header i, .resonance-btn i) {
  color: var(--light-accent-blue) !important;
}
[data-theme="light"] #resonance :where(.city-count, .map-tag, .match-badge) {
  color: var(--light-accent-blue) !important;
  border-color: rgba(26, 86, 160, 0.2) !important;
  background: rgba(220, 238, 255, 0.7) !important;
}
[data-theme="light"] #resonance :where(.map-view, .china-map, .fan-map) {
  background: linear-gradient(135deg, rgba(248, 251, 255, 0.88), rgba(238, 247, 255, 0.76)) !important;
}
[data-theme="light"] #resonance :where(.map-tags, .map-actions) {
  border-color: rgba(26, 86, 160, 0.12) !important;
  background: rgba(248, 251, 255, 0.52) !important;
}
[data-theme="light"] #resonance :where(.search-input-wrapper input, .coord-input-group input, .light-message-input, .nickname-login-form input, .nickname-register-form input) {
  color: var(--light-ink-900) !important;
  -webkit-text-fill-color: var(--light-ink-900) !important;
}
[data-theme="light"] #resonance :where(.resonance-modal) {
  background: rgba(248, 251, 255, 0.58) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
[data-theme="light"] #resonance :where(.resonance-close, .clear-btn) {
  color: var(--light-accent-blue) !important;
  border-color: rgba(26, 86, 160, 0.18) !important;
  background: rgba(255, 255, 255, 0.74) !important;
}
[data-theme="light"] #works :where(.works-stats, .works-stats-search, .year-nav, .works-note) {
  color: var(--light-ink-900) !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(247, 251, 255, 0.48)),
    linear-gradient(135deg, rgba(220, 238, 255, 0.32), rgba(251, 227, 238, 0.22)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(24px) saturate(1.36);
  -webkit-backdrop-filter: blur(24px) saturate(1.36);
}
[data-theme="light"] #works :where(.works-stats strong, .works-stats b, .works-stat-number, .stat-number) {
  color: var(--light-accent-blue) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
[data-theme="light"] #works :where(.works-stats span, .works-stats p, .works-note, .works-note p, .stat-label) {
  color: var(--light-muted-aa) !important;
  text-shadow: none !important;
}
[data-theme="light"] #works .work-card,
[data-theme="light"] #works .work-card.open,
[data-theme="light"] #works .work-card.work-card-lead {
  color: var(--light-ink-900) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(247, 251, 255, 0.52)),
    linear-gradient(135deg, rgba(220, 238, 255, 0.32), rgba(251, 227, 238, 0.24)) !important;
  box-shadow: 0 24px 64px rgba(26, 86, 160, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
}
[data-theme="light"] #works .work-card:hover {
  border-color: rgba(26, 86, 160, 0.24) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(247, 251, 255, 0.62)),
    linear-gradient(135deg, rgba(220, 238, 255, 0.38), rgba(251, 227, 238, 0.28)) !important;
  box-shadow: 0 30px 78px rgba(26, 86, 160, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
[data-theme="light"] #works .work-card h3 {
  color: var(--light-ink-900) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}
[data-theme="light"] #works :where(.work-meta, .work-detail, .work-entry, .work-entry-meta, .work-card p, .work-meta-separator) {
  color: var(--light-ink-700) !important;
  text-shadow: none !important;
}
/* ============ 参考资料、版权声明 - 黑色文字（高优先级） ============ */
[data-theme="light"] #reference .reference-grid,
[data-theme="light"] #reference .reference-grid article,
[data-theme="light"] #reference .reference-grid article h2,
[data-theme="light"] #reference .reference-grid article p,
[data-theme="light"] main #reference .reference-grid article,
[data-theme="light"] main #reference .reference-grid article h2,
[data-theme="light"] main #reference .reference-grid article p {
  color: #000000 !important;
}
/* ============ 页脚版权信息 - 黑色文字（高优先级） ============ */
[data-theme="light"] .site-footer,
[data-theme="light"] .site-footer p {
  color: #000000 !important;
}
/* ============ 浅色主题通用文字黑色强制覆盖 ============ */
[data-theme="light"] main p,
[data-theme="light"] main li,
[data-theme="light"] main .section-heading p,
[data-theme="light"] main .profile-text-card p,
[data-theme="light"] main .social-card p,
[data-theme="light"] main .schedule-card p,
[data-theme="light"] main .work-card p,
[data-theme="light"] main .audio-card p,
[data-theme="light"] main .life-card p,
[data-theme="light"] main .quote-panel p {
  color: #000000 !important;
}
/* ============ 浅色主题所有标题文字使用蓝粉渐变（最高优先级） ============ */
[data-theme="light"] main h1,
[data-theme="light"] main h2,
[data-theme="light"] main h3,
[data-theme="light"] main h4,
[data-theme="light"] main h5,
[data-theme="light"] main h6,
[data-theme="light"] main .section-title,
[data-theme="light"] main .section-heading h1,
[data-theme="light"] main .section-heading h2 {
  background-image: linear-gradient(90deg, #3a2a4a, #5a4a7c, #7a6a9c, #c878a8, #e88888, #c878a8, #7a6a9c, #5a4a7c, #3a2a4a) !important;
  background-size: 300% 100% !important;
  background-position: 0% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  animation: titleColorShiftLight 8s linear infinite !important;
}
[data-theme="light"] main:not(#home) .hero-title,
[data-theme="light"] main:not(#home) .hero-title-cn,
[data-theme="light"] main:not(#home) .hero-title-en,
[data-theme="light"] main .profile-name {
  color: #5a4a7c !important;
}
/* Works: audio drama storyline archive. */
#works .audio-drama-details {
  width: min(100%, 1780px);
  margin: clamp(30px, 5vw, 64px) auto 0;
}
#works .drama-detail-intro {
  max-width: 860px;
  margin: 0 auto 36px;
  padding: 24px 32px;
  text-align: center;
}
#works .drama-detail-intro h2 {
  margin: 0 0 12px;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.04;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 24px 60px rgba(8,10,18,0.28);
}
#works .drama-detail-intro p:not(.eyebrow) {
  margin: 16px auto 0;
  max-width: 52em;
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 2.0;
  letter-spacing: 0.015em;
  color: rgba(255, 255, 255, 0.78);
}
#works .drama-detail-intro .eyebrow {
  position: relative;
  padding-inline: 18px;
}
#works .drama-detail-intro .eyebrow::before,
#works .drama-detail-intro .eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,185,102,0.72));
}
#works .drama-detail-intro .eyebrow::before {
  right: 100%;
}
#works .drama-detail-intro .eyebrow::after {
  left: 100%;
  transform: rotate(180deg);
}
[data-theme="light"] #works .drama-detail-intro .eyebrow::before,
[data-theme="light"] #works .drama-detail-intro .eyebrow::after {
  background: linear-gradient(90deg, transparent, rgba(232,185,102,0.72)) !important;
}
[data-theme="light"] #works .drama-detail-intro h2 {
  color: #513d70 !important;
  -webkit-text-fill-color: #513d70 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: none !important;
}
#works .drama-detail-intro h2,
[data-theme="light"] #works .drama-detail-intro h2 {
  font-size: clamp(36px, 4.2vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}
#works .drama-detail-section {
  position: relative;
  margin-top: clamp(18px, 3vw, 36px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    linear-gradient(135deg, rgba(228, 175, 92, 0.12), rgba(96, 190, 210, 0.08), rgba(217, 122, 158, 0.1));
  box-shadow: 0 26px 78px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
#works .drama-detail-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(229, 182, 92, 0.34), transparent 22%, transparent 78%, rgba(96, 190, 210, 0.24)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 96px);
  opacity: 0.45;
}
#works .drama-detail-section.is-support-section::before {
  background: linear-gradient(90deg, rgba(96, 190, 210, 0.32), transparent 24%, transparent 76%, rgba(217, 122, 158, 0.22)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 96px);
}
#works .drama-detail-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(22px, 3vw, 34px);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
#works .drama-detail-heading h3 {
  margin: 6px 0 0;
  font-size: clamp(1.65rem, 3vw, 3rem);
  line-height: 1.08;
  color: rgba(255, 255, 255, 0.94);
}
#works .drama-heading-tools {
  display: flex;
  flex: 0 1 520px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 280px;
}
#works .drama-section-search {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(20, 22, 34, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 28px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(18px) saturate(1.26);
  -webkit-backdrop-filter: blur(18px) saturate(1.26);
}
#works .drama-section-search i {
  color: #f2cf88;
  font-size: 0.95rem;
}
#works .is-support-section .drama-section-search i {
  color: #9fe6ef;
}
#works .drama-section-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 800;
}
#works .drama-section-search input::placeholder {
  color: rgba(255, 255, 255, 0.52);
}
#works .drama-heading-tools > span {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid rgba(229, 182, 92, 0.34);
  border-radius: 999px;
  background: rgba(229, 182, 92, 0.12);
  color: #f2cf88;
  font-size: 0.92rem;
  font-weight: 800;
}
#works .is-support-section .drama-heading-tools > span {
  border-color: rgba(229, 182, 92, 0.34);
  background: rgba(229, 182, 92, 0.12);
  color: #f2cf88;
}
#works .drama-detail-grid {
  position: relative;
  z-index: 1;
  display: grid;
}
#works .drama-detail-card {
  display: grid;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(20, 22, 34, 0.64), rgba(32, 35, 54, 0.42)),
    radial-gradient(circle at 20% 18%, rgba(229, 182, 92, 0.16), transparent 38%),
    radial-gradient(circle at 86% 88%, rgba(217, 122, 158, 0.13), transparent 34%);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22);
}
#works .is-support-section .drama-detail-card {
  background: linear-gradient(140deg, rgba(18, 26, 38, 0.64), rgba(28, 42, 58, 0.42)),
    radial-gradient(circle at 18% 16%, rgba(96, 190, 210, 0.16), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(217, 122, 158, 0.12), transparent 34%);
}
#works .drama-poster {
  position: relative;
  display: grid;
  place-items: center;
  align-self: start;
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.22), transparent 32%),
    rgba(18, 20, 30, 0.42);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -26px 54px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.24);
  -webkit-backdrop-filter: blur(14px) saturate(1.24);
}
#works .drama-poster::before,
#works .drama-poster::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
#works .drama-poster::before {
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 22%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 30%, rgba(0, 0, 0, 0.16));
  mix-blend-mode: screen;
  opacity: 0.74;
}
#works .drama-poster::after {
  top: -42%;
  bottom: -42%;
  left: -72%;
  width: 44%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: rotate(12deg);
  animation: dramaPosterShine 7.5s ease-in-out infinite;
}
#works .drama-poster img {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
#works .drama-poster-placeholder {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.08);
}

#works .drama-poster.is-pending-image {
  cursor: pointer;
}

#works .drama-poster.is-pending-image::after {
  animation-duration: 10s;
  opacity: 0.5;
}
#works .drama-card-body {
  min-width: 0;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
}
#works .drama-card-topline,
#works .drama-card-meta,
#works .drama-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 12px);
}
#works .drama-card-topline span,
#works .drama-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px clamp(9px, 1vw, 12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.84rem, 1.08vw, 0.92rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
#works .drama-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
}
#works .drama-card-meta span {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.055);
}
#works .drama-card-topline span {
  color: #f2cf88;
  border-color: rgba(229, 182, 92, 0.32);
  background: rgba(229, 182, 92, 0.12);
}
#works .is-support-section .drama-card-topline span {
  color: #9fe6ef;
  border-color: rgba(96, 190, 210, 0.34);
  background: rgba(96, 190, 210, 0.12);
}
#works .drama-detail-card h4 {
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.015em;
}
#works .drama-synopsis {
  flex: 1;
  overflow: auto;
  text-align: justify;
  text-justify: inter-ideograph;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 182, 92, 0.44) rgba(255, 255, 255, 0.08);
}
#works .drama-synopsis p {
  color: rgba(255, 255, 255, 0.82);
}
#works .drama-cast {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#works .drama-cast dt {
  color: #f2cf88;
  font-size: clamp(0.88rem, 1.2vw, 0.94rem);
  font-weight: 900;
  letter-spacing: 0.02em;
}
#works .is-support-section .drama-cast dt {
  color: #9fe6ef;
}
#works .drama-cast dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.92rem, 1.3vw, 0.98rem);
  line-height: 1.65;
}
#works .drama-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 10px);
  min-height: 42px;
  padding: clamp(9px, 1.2vw, 12px) clamp(13px, 1.6vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.09);
  font-size: clamp(0.9rem, 1.2vw, 0.96rem);
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
#works .drama-link:not(.is-disabled):hover,
#works .drama-link:not(.is-disabled):focus-visible {
  transform: translateY(-2px);
  border-color: rgba(229, 182, 92, 0.52);
  background: rgba(229, 182, 92, 0.16);
}
#works .drama-link.is-manbo:not(.is-disabled):hover,
#works .drama-link.is-manbo:not(.is-disabled):focus-visible {
  border-color: rgba(96, 190, 210, 0.5);
  background: rgba(96, 190, 210, 0.16);
}
#works .drama-link.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
#works .drama-empty-result {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
}
#works .drama-empty-result[hidden],
#works .drama-detail-card[hidden] {
  display: none !important;
}
@keyframes dramaPosterShine {
  0%,
  42% {
    transform: translateX(0) rotate(12deg);
    opacity: 0;
  }
  52% {
    opacity: 0.8;
  }
  68%,
  100% {
    transform: translateX(430%) rotate(12deg);
    opacity: 0;
  }
}
[data-theme="light"] #works .drama-detail-intro p:not(.eyebrow),
[data-theme="light"] #works .drama-synopsis p,
[data-theme="light"] #works .drama-cast dd {
  color: var(--light-ink-700) !important;
}
[data-theme="light"] #works .drama-detail-section,
[data-theme="light"] #works .drama-detail-card {
  color: var(--light-ink-900) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(247, 251, 255, 0.52)),
    linear-gradient(135deg, rgba(220, 238, 255, 0.3), rgba(251, 227, 238, 0.22), rgba(255, 237, 196, 0.2)) !important;
  box-shadow: 0 24px 64px rgba(26, 86, 160, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
[data-theme="light"] #works .drama-card-topline span,
[data-theme="light"] #works .drama-card-meta span,
[data-theme="light"] #works .drama-link,
[data-theme="light"] #works .drama-section-search {
  color: var(--light-ink-700) !important;
  border-color: rgba(26, 86, 160, 0.18) !important;
  background: rgba(255, 255, 255, 0.58) !important;
}
[data-theme="light"] #works .drama-section-search input {
  color: var(--light-ink-900) !important;
  -webkit-text-fill-color: var(--light-ink-900) !important;
}
[data-theme="light"] #works .drama-section-search input::placeholder {
  color: rgba(20, 20, 20, 0.52) !important;
}
[data-theme="light"] #works .drama-cast dt,
[data-theme="light"] #works .drama-heading-tools > span,
[data-theme="light"] #works .drama-section-search i {
  color: var(--light-accent-rose) !important;
}
@media (max-width: 1180px) {
  #works .drama-detail-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  #works .audio-drama-details {
    margin-top: 34px;
  }
  #works .drama-detail-section {
    padding: 16px;
  }
  #works .drama-detail-heading {
    display: grid;
    align-items: start;
  }
  #works .drama-heading-tools {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: stretch;
  }
  #works .drama-section-search {
    min-width: 100%;
  }
  #works .drama-detail-card {
    grid-template-columns: 1fr;
  }
  #works .drama-poster,
  #works .drama-poster img {
    min-height: 0;
  }
  #works .drama-poster {
    width: min(100%, 360px);
    margin-inline: auto;
  }
  #works .drama-synopsis {
    max-height: 260px;
  }
}
/* Works: final drama reading layout pass. */
#works {
  scroll-margin-top: 120px;
}
#works #dramaLeadSection,
#works #dramaSupportSection {
  scroll-margin-top: 118px;
}
#works .drama-detail-grid {
  grid-template-columns: 1fr !important;
  gap: clamp(14px, 1.8vw, 22px);
}
#works .drama-detail-card {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
  align-items: stretch;
  min-height: 0;
  padding: clamp(20px, 2.2vw, 30px);
  gap: clamp(20px, 2.2vw, 30px);
}
#works .drama-detail-card.is-posterless {
  grid-template-columns: minmax(0, 1fr) !important;
}
#works .drama-poster {
  width: 100%;
  max-width: 340px;
  min-height: 0;
  cursor: zoom-in;
}
#works .drama-poster:focus-visible {
  outline: 3px solid rgba(229, 182, 92, 0.72);
  outline-offset: 4px;
}
#works .drama-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
  grid-template-areas: "title title"
    "top top"
    "meta meta"
    "synopsis cast"
    "links links";
  align-content: start;
  column-gap: clamp(18px, 2.2vw, 28px);
  row-gap: clamp(10px, 1.1vw, 16px);
}
#works .drama-card-topline {
  grid-area: top;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 0.9vw, 12px);
  min-width: 0;
}
#works .drama-detail-card h4 {
  grid-area: title;
  max-width: 18em;
  margin: 0 0 clamp(4px, 0.55vw, 8px);
  padding-bottom: clamp(12px, 1.2vw, 18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(1.9rem, 2.45vw, 2.8rem);
  line-height: 1.16;
  text-wrap: balance;
}
#works .drama-card-meta {
  grid-area: meta;
  margin-bottom: clamp(2px, 0.5vw, 6px);
}
#works .drama-synopsis {
  grid-area: synopsis;
  max-height: 320px;
  margin-top: clamp(4px, 0.6vw, 8px);
  padding-right: 12px;
}
#works .drama-synopsis p {
  text-indent: 2em;
  text-align: justify;
  text-align-last: left;
  margin: 0 0 0.86em;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.84;
  letter-spacing: 0.035em;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
#works .drama-synopsis p.has-latin {
  text-align: left;
  text-align-last: left;
  letter-spacing: 0.018em;
  word-spacing: 0;
}
#works .drama-cast {
  grid-area: cast;
  align-self: start;
  display: grid;
  gap: clamp(9px, 1vw, 13px);
  box-sizing: border-box;
  max-height: 340px;
  min-width: 0;
  width: 100%;
  padding: clamp(12px, 1.2vw, 16px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
  scrollbar-color: rgba(242, 207, 136, 0.42) rgba(255, 255, 255, 0.08);
}
#works .drama-cast div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  font-size: 1rem;
  line-height: 1.55;
}
#works .drama-cast dd {
  display: grid;
  gap: 6px;
  min-width: 0;
}
#works .drama-links {
  grid-area: links;
  align-self: end;
  padding-top: clamp(12px, 1.2vw, 18px);
  margin-top: clamp(8px, 1vw, 14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#works .jzy-name-highlight {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  color: #fbbf24;
  background: transparent;
  font-weight: 950;
  text-indent: 0;
  box-shadow: none;
}
#works .drama-detail-section:not(.is-expanded):not(.is-searching) .drama-detail-card:nth-child(n+3) {
  display: none;
}
#works .drama-section-toggle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  min-height: 46px;
  margin: clamp(22px, 3vw, 34px) auto 0;
  padding: 11px 18px;
  border: 1px solid rgba(229, 182, 92, 0.36);
  border-radius: 999px;
  color: #f2cf88;
  background: linear-gradient(135deg, rgba(229, 182, 92, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(20, 22, 34, 0.34);
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
#works .drama-section-toggle:hover,
#works .drama-section-toggle:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(229, 182, 92, 0.6);
}
#works .drama-cast-pair {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(3.25em, 0.92fr) 6px minmax(3.25em, 1fr);
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 7px 10px;
  color: inherit;
  overflow-wrap: break-word;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
}
#works .drama-cast-pair:last-child {
  margin-bottom: 0;
}
#works .drama-cast-role,
#works .drama-cast-actor {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
#works .drama-cast-role.is-short,
#works .drama-cast-actor.is-short {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
#works .drama-cast-role.is-long,
#works .drama-cast-actor.is-long {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
#works .drama-cast-role.is-four,
#works .drama-cast-actor.is-four {
  display: grid;
  gap: 2px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}
#works .drama-cast-line {
  display: block;
  white-space: nowrap;
  line-height: 1.18;
}
#works .drama-cast-role {
  color: rgba(255, 255, 255, 0.74);
  font-weight: 700;
}
#works .drama-cast-actor {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 900;
}
#works .drama-cast-separator {
  color: rgba(242, 207, 136, 0.58);
  font-weight: 900;
  text-align: center;
}
#works .is-searching .drama-section-toggle {
  display: none;
}
.drama-poster-viewer {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 54px);
  background: radial-gradient(circle at 50% 18%, rgba(255, 231, 188, 0.2), transparent 30%),
    radial-gradient(circle at 18% 78%, rgba(120, 166, 255, 0.18), transparent 34%),
    rgba(5, 8, 14, 0.72);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  transition: opacity 0.24s ease;
}
.drama-poster-viewer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.drama-poster-viewer figure {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: fit-content;
  max-width: min(94vw, 1360px);
  max-height: 94vh;
  margin: 0;
  padding: clamp(10px, 1.35vw, 18px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.14)),
    rgba(20, 23, 32, 0.46);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.48),
    0 0 80px rgba(229, 182, 92, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(18px) saturate(1.26);
  -webkit-backdrop-filter: blur(18px) saturate(1.26);
}
.drama-poster-viewer figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.34), transparent 26%),
    radial-gradient(circle at 74% 10%, rgba(255, 236, 198, 0.28), transparent 28%);
  mix-blend-mode: screen;
}
.drama-poster-viewer img {
  position: relative;
  z-index: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: min(90vw, 1320px);
  max-height: calc(92vh - 78px);
  object-fit: contain;
  border-radius: 6px;
  filter: brightness(1.08) contrast(1.04) saturate(1.05);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36),
    0 0 32px rgba(255, 238, 205, 0.12);
}
.drama-poster-viewer figcaption {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42);
}
.drama-poster-viewer-close {
  position: fixed;
  top: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
body.drama-viewer-open {
  overflow: hidden;
}
.works-side-jump {
  position: fixed;
  top: 34vh;
  right: 0;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: 64px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px 0 0 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(18, 22, 32, 0.28);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: width 0.24s ease, background 0.24s ease;
}
.works-side-jump.is-open {
  width: 206px;
}
.works-side-jump-toggle,
.works-side-jump a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 40px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s ease, color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.works-side-jump a {
  justify-content: center;
}
.works-side-jump-toggle i,
.works-side-jump a i {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
}
.works-side-jump a .part-label {
  flex: 1 1 auto;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(229, 182, 92, 0.9);
  white-space: nowrap;
  overflow: visible;
}
.works-side-jump a span {
  display: none;
  white-space: nowrap;
}
.works-side-jump.is-open a span {
  display: inline;
}
.works-side-jump a:hover,
.works-side-jump a:focus-visible,
.works-side-jump a.is-active,
.works-side-jump-toggle:hover,
.works-side-jump-toggle:focus-visible {
  transform: translateX(-3px);
  color: #f2cf88;
  border-color: rgba(229, 182, 92, 0.38);
  background: rgba(229, 182, 92, 0.12);
}
.works-side-jump a.is-active {
  box-shadow: inset 3px 0 0 rgba(229, 182, 92, 0.72);
}
.works-drama-menu {
  position: fixed;
  top: calc(34vh + 54px);
  right: 220px;
  z-index: 220;
  width: min(620px, calc(100vw - 300px));
  max-height: min(600px, 58vh);
  padding: 10px;
  border: 1px solid rgba(235, 190, 112, 0.26);
  border-radius: 8px;
  color: #f8efe2;
  background: linear-gradient(145deg, rgba(25, 30, 42, 0.96), rgba(34, 43, 58, 0.92)),
    rgba(18, 22, 32, 0.94);
  box-shadow: 0 22px 58px rgba(4, 9, 18, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  pointer-events: auto;
  user-select: none;
}
.works-drama-menu[hidden] {
  display: none !important;
}
.works-drama-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 4px 4px 10px 8px;
  border-bottom: 1px solid rgba(235, 190, 112, 0.18);
  cursor: grab;
  touch-action: none;
}
.works-drama-menu-head strong {
  min-width: 0;
  overflow: hidden;
  color: #fff7ec;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-drama-menu.is-dragging .works-drama-menu-head {
  cursor: grabbing;
}
.works-drama-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid rgba(235, 190, 112, 0.18);
  border-radius: 7px;
  color: #fff2dc;
  background: rgba(255, 255, 255, 0.075);
  cursor: pointer;
}
.works-drama-menu-list {
  display: grid;
  gap: 6px;
  max-height: calc(min(600px, 58vh) - 62px);
  padding: 10px 2px 3px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.works-drama-menu-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(86px, 132px);
  align-items: center;
  gap: 14px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(235, 190, 112, 0.14);
  border-radius: 7px;
  color: #f7efe6;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045)),
    rgba(20, 27, 38, 0.72);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.works-drama-menu-item:hover,
.works-drama-menu-item:focus-visible {
  transform: translateX(-2px);
  border-color: rgba(235, 190, 112, 0.38);
  background: linear-gradient(135deg, rgba(235, 190, 112, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(28, 36, 49, 0.86);
  outline: none;
}
.works-drama-menu-item span,
.works-drama-menu-item em {
  color: #f3bf63;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.works-drama-menu-item strong {
  min-width: 0;
  overflow: hidden;
  color: #fffaf2;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-side-jump.is-open a .part-label {
  display: none !important;
}
.works-side-jump.is-open a .jump-text {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.works-search-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: min(860px, 92vw);
  margin: 16px auto 0;
  color: rgba(255, 250, 242, 0.76);
  font-weight: 800;
}
.works-search-status[hidden] {
  display: none !important;
}
.works-search-status button,
.work-drama-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 250, 242, 0.9);
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.works-search-status button:hover,
.works-search-status button:focus-visible,
.work-drama-jump:hover,
.work-drama-jump:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(229, 182, 92, 0.38);
  background: rgba(229, 182, 92, 0.13);
  outline: none;
}
.works-search-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 42px 20px;
  color: rgba(255, 250, 242, 0.76);
  text-align: center;
  font-weight: 800;
}
.works-search-empty i {
  color: rgba(229, 182, 92, 0.86);
  font-size: 1.7rem;
}
.work-drama-jump {
  width: fit-content;
  margin-top: 14px;
}
.drama-card-focus {
  animation: workCardFocus 1.6s ease;
}
.drama-poster-viewer-error {
  margin: 12px 0 0;
  color: rgba(255, 250, 242, 0.76);
  text-align: center;
  font-weight: 800;
}
[data-theme="light"] #works .works-search-status,
[data-theme="light"] #works .works-search-empty,
[data-theme="light"] #works .drama-poster-viewer-error {
  color: var(--light-ink-700) !important;
}
[data-theme="light"] #works .works-search-status button,
[data-theme="light"] #works .work-drama-jump,
[data-theme="light"] #works .works-side-jump a.is-active {
  color: var(--light-ink-900) !important;
  border-color: rgba(26, 86, 160, 0.18) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] #works .jzy-name-highlight {
  color: #ec4899 !important;
  border: none;
  background: transparent;
}
[data-theme="light"] #works .drama-cast {
  border-color: rgba(26, 86, 160, 0.14);
  background: rgba(255, 255, 255, 0.42);
}
[data-theme="light"] #works .drama-cast-pair {
  border: 1px solid rgba(69, 103, 151, 0.12);
  color: #24314a !important;
  background: radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.82), transparent 34%),
    rgba(255, 255, 255, 0.5) !important;
}
[data-theme="light"] #works .drama-cast-role {
  color: rgba(54, 72, 105, 0.72) !important;
  -webkit-text-fill-color: rgba(54, 72, 105, 0.72) !important;
}
[data-theme="light"] #works .drama-cast-actor {
  color: #1f293f !important;
  -webkit-text-fill-color: #1f293f !important;
}
[data-theme="light"] #works .drama-cast-separator {
  color: rgba(184, 84, 129, 0.5) !important;
  -webkit-text-fill-color: rgba(184, 84, 129, 0.5) !important;
}
[data-theme="light"] #works .drama-section-toggle,
[data-theme="light"] .works-side-jump,
[data-theme="light"] .works-side-jump a,
[data-theme="light"] .works-side-jump-toggle {
  color: var(--light-ink-900) !important;
  border-color: rgba(26, 86, 160, 0.18) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
@media (max-width: 1500px) {
  .works-side-jump {
    right: 14px;
  }
  .works-drama-menu {
    right: 234px;
  }
}
@media (max-width: 1280px) {
  .works-side-jump {
    display: none;
  }
}
@media (max-width: 980px) {
  #works .drama-detail-card {
    grid-template-columns: 1fr !important;
  }
  #works .drama-poster {
    width: min(100%, 420px);
    margin-inline: auto;
  }
  #works .drama-card-body {
    grid-template-columns: 1fr;
    grid-template-areas: "title"
      "top"
      "meta"
      "synopsis"
      "cast"
      "links";
  }
  #works .drama-cast {
    max-height: none;
  }
  #works .drama-cast-pair {
    grid-template-columns: minmax(3.25em, 0.92fr) 6px minmax(3.25em, 1fr);
  }
}
/* Home avatar: keep the light theme portrait as clear as the dark theme. */
[data-theme="light"] #home .hero-media {
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 28px 70px rgba(30, 42, 66, 0.1),
    0 0 28px rgba(217, 166, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  filter: drop-shadow(0 34px 68px rgba(18, 25, 42, 0.18)) !important;
  backdrop-filter: blur(6px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.04) !important;
}
[data-theme="light"] #home .hero-media img {
  position: relative;
  z-index: 4;
  opacity: 1 !important;
  filter: saturate(1.26) contrast(1.14) brightness(1) !important;
}
[data-theme="light"] #home .hero-ring,
[data-theme="light"] #home .hero-media::after {
  z-index: 1;
  pointer-events: none;
}
[data-theme="light"] #home .hero-ring {
  border-color: rgba(38, 50, 78, 0.16) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.035), transparent 46%) !important;
  box-shadow: inset 0 0 34px rgba(38, 50, 78, 0.1),
    0 0 36px rgba(125, 175, 232, 0.08) !important;
  opacity: 0.78;
}
[data-theme="light"] #home .hero-media::after {
  opacity: 0.08 !important;
  mix-blend-mode: normal !important;
}
[data-theme="light"] #home .hero-media .blush-trigger,
[data-theme="light"] #home .hero-media .blush-trigger:hover,
[data-theme="light"] #home .hero-media .blush-trigger:focus-visible {
  z-index: 6;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] #home #topologyCanvas {
  opacity: 0.5 !important;
  mix-blend-mode: normal !important;
  filter: contrast(1.02)
    saturate(0.92)
    drop-shadow(0 0 14px rgba(125, 175, 232, 0.12));
}
[data-theme="light"] #home .hero-media,
[data-theme="light"] #home .hero-copy {
  position: relative;
  z-index: 2;
}
[data-theme="light"] #home .scroll-cue {
  color: rgba(26, 42, 58, 0.58) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] #home .scroll-cue::after {
  background: linear-gradient(rgba(184, 52, 118, 0.5), rgba(125, 175, 232, 0));
}
/* Light home title: reuse the dark theme title treatment exactly. */
[data-theme="light"] #home .hero-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  max-width: 760px !important;
  margin-bottom: 24px !important;
  font-size: clamp(42px, 5.4vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  text-shadow: 0 0 22px rgba(232,185,102,0.36) !important,
    0 18px 60px rgba(0,0,0,0.34) !important;
}
[data-theme="light"] #home .hero-title-group {
  display: grid !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 6px 0 !important;
  justify-items: center !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
[data-theme="light"] #home .hero-title-group::before,
[data-theme="light"] #home .hero-title-group::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
[data-theme="light"] #home .hero-title span {
  display: block;
}
[data-theme="light"] #home .hero-title-cn {
  font-family: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", "Georgia", "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  font-size: 1.1em !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  background: linear-gradient(100deg, #fffaf2 0%, #d8d2f0 25%, #a7ddd7 50%, #e8c77a 75%, #fffaf2 100%) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 22px rgba(232,185,102,0.36) !important,
    0 18px 60px rgba(0,0,0,0.34) !important;
  animation: titleColorShift 8s ease-in-out infinite !important;
}
[data-theme="light"] #home .hero-title-en {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  font-size: clamp(18px, 1.65vw, 25px) !important;
  line-height: 1.25 !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
[data-theme="light"] #home .hero-title-offset {
  transform: translateX(2.02em) !important;
}
/* Light home foreground: keep all readable UI above the misted background. */
[data-theme="light"] #home {
  position: relative;
  isolation: isolate;
}
[data-theme="light"] #home #topologyCanvas {
  z-index: 1 !important;
  pointer-events: auto;
}
[data-theme="light"] #home :where(.hero-media, .hero-copy, .hero-title, .hero-title-group, .hero-title-cn, .hero-title-en, .hero-gift, .lead, .hero-actions, .btn, .scroll-cue) {
  position: relative;
  z-index: 12;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
[data-theme="light"] #home .hero-copy {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] #home .hero-title-en {
  -webkit-text-fill-color: rgba(58, 48, 82, 0.78) !important;
  color: rgba(58, 48, 82, 0.78) !important;
}
[data-theme="light"] #home .hero-gift {
  color: #b83476 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 253, 0.58)) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 16px 36px rgba(184, 52, 118, 0.12),
    0 8px 28px rgba(26, 86, 160, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] #home .lead {
  color: rgba(12, 18, 30, 0.9) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}
[data-theme="light"] #home .hero-actions .btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] #home .hero-actions .btn.primary {
  color: #ffffff !important;
  box-shadow: 0 18px 38px rgba(26, 86, 160, 0.18),
    0 8px 24px rgba(184, 52, 118, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}
[data-theme="light"] #home .hero-actions .btn.ghost {
  color: #1a3f72 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 14px 30px rgba(26, 86, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}
[data-theme="light"] .site-header,
[data-theme="light"] .site-search-inline,
[data-theme="light"] .brand-mark,
[data-theme="light"] .site-nav a {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
[data-theme="light"] .site-header {
  z-index: 80;
}
[data-theme="light"] #home .scroll-cue {
  position: absolute !important;
  right: 0;
  bottom: 42px;
  z-index: 12;
}
/* ============ 标题热更新过渡动画（所有主题通用）======== */
/**
 * 标题热更新过渡效果
 * 当标题文字更新时，添加平滑的过渡动画
 */
.hero-title-group {
  position: relative;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.hero-title-group.title-transitioning {
  opacity: 0;
  transform: translateY(-8px);
}
.hero-title-cn,
.hero-title-en {
  position: relative;
  transition: all 0.3s ease-out;
  will-change: transform, opacity;
}
.hero-title-group.title-transitioning .hero-title-cn {
  opacity: 0;
  transform: translateY(8px);
}
.hero-title-group.title-transitioning .hero-title-en {
  opacity: 0;
  transform: translateY(6px);
}
/* 微光闪烁效果 - 仅在标题稳定后触发一次 */
.hero-title-cn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
}
[data-theme="dark"] .hero-title-cn::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(150, 150, 150, 0.2) 50%,
    transparent 100%);
}
/* 标题稳定后的微光效果 */
.hero-title-group.title-shimmer .hero-title-cn::after {
  animation: shimmerTitle 1.2s ease-out forwards;
}
@keyframes shimmerTitle {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
/* 2026-06-05 light clarity and audio archive polish */
[data-theme="light"] body.page-home #topologyCanvas,
[data-theme="light"] body.page-home .topology-toggle {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-theme="light"] body.page-home #home .hero-title-cn {
  opacity: 1 !important;
}
[data-theme="light"] body.page-home #home .hero-title-en {
  opacity: 1 !important;
}
[data-theme="light"] #social .social-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.9)),
    rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(83, 111, 157, 0.28) !important;
  box-shadow: 0 24px 58px rgba(47, 70, 110, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] #social .social-card:hover,
[data-theme="light"] #social .social-card.is-lit {
  border-color: rgba(184, 52, 118, 0.34) !important;
  box-shadow: 0 30px 70px rgba(47, 70, 110, 0.2),
    0 0 0 1px rgba(184, 52, 118, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] #social .social-card strong,
[data-theme="light"] #social .social-card p {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
[data-theme="light"] #social .social-app-mark {
  opacity: 1 !important;
  filter: saturate(1.1) contrast(1.08) !important;
}
[data-theme="light"] .audio-gallery-section .section-heading p {
  color: rgba(24, 27, 38, 0.86);
}
.audio-cards-container {
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  max-width: min(1040px, 92vw) !important;
}
.audio-card {
  min-height: 280px !important;
  padding: 28px !important;
  cursor: default !important;
}
.audio-card-header {
  justify-content: flex-end !important;
  padding: 0 0 28px !important;
}
.audio-type {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  color: #173f70;
  background: rgba(213, 235, 255, 0.86);
  border: 1px solid rgba(106, 166, 220, 0.42);
  font-size: 15px;
  font-weight: 900;
}
.audio-card-body {
  padding: 0 84px 0 0 !important;
}
[data-theme="light"] .audio-title {
  margin-bottom: 10px !important;
  color: #5a4778 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}
[data-theme="light"] .audio-card-meta,
[data-theme="light"] .audio-modal-status {
  color: rgba(20, 24, 36, 0.86) !important;
  line-height: 1.65;
}
[data-theme="light"] .audio-card-meta,
[data-theme="light"] .audio-modal-status {
  font-size: 14px;
}
.audio-tags {
  margin-top: 20px;
  padding-right: 0 !important;
}
.audio-tag {
  color: #174577 !important;
  background: rgba(221, 241, 255, 0.92) !important;
  border: 1px solid rgba(113, 174, 228, 0.38);
}
.audio-play-btn {
  right: 32px !important;
  bottom: 32px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
}
.audio-play-btn:hover,
.audio-play-btn:focus-visible {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 24px 54px rgba(58, 107, 161, 0.24) !important;
}
.audio-modal-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  gap: 10px;
}
.audio-modal-minimize,
.audio-modal-close {
  position: static !important;
  display: grid;
  place-items: center;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 999px !important;
  color: #183967 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 236, 249, 0.72)) !important;
  box-shadow: 0 14px 30px rgba(27, 45, 77, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.audio-modal-minimize:hover,
.audio-modal-close:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(214, 232, 255, 0.82)) !important;
  box-shadow: 0 18px 34px rgba(27, 45, 77, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.audio-modal-minimize i {
  transform: translateY(-2px);
}
.audio-controls .control-btn[data-mode="sequence"] {
  color: #21365f;
}
.audio-controls .control-btn[data-mode="loop"],
.audio-controls .control-btn[data-mode="shuffle"] {
  color: #173f70 !important;
  background: linear-gradient(135deg, #e9c7dc, #c8e5ff) !important;
}
.audio-mini-player {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100vw - 36px));
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #173f70;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 238, 255, 0.76));
  box-shadow: 0 20px 48px rgba(34, 55, 88, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.audio-mini-player:active {
  cursor: grabbing;
}
.audio-mini-player[hidden] {
  display: none !important;
}
.audio-mini-player.is-playing i {
  color: #b43174;
}
.audio-mini-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}
@media (max-width: 760px) {
  .audio-cards-container {
    grid-template-columns: 1fr !important;
  }
  .audio-card {
    min-height: 250px !important;
    padding: 22px !important;
  }
  .audio-card-body {
    padding-right: 64px !important;
  }
  .audio-title {
    font-size: 28px !important;
  }
}
/* 2026-06-05 works and music readability pass */
[data-theme="light"] #works .section-heading,
[data-theme="light"] #works .works-stats {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 248, 255, 0.9)),
    rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(82, 111, 157, 0.24) !important;
  box-shadow: 0 24px 64px rgba(48, 72, 112, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}
[data-theme="light"] #works .section-heading h2,
[data-theme="light"] #works .section-heading p,
[data-theme="light"] #works .works-stats,
[data-theme="light"] #works .stat-label {
  color: #151a27 !important;
  -webkit-text-fill-color: #151a27 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
[data-theme="light"] #works .work-card,
[data-theme="light"] #works .works-overview-card {
  background: radial-gradient(circle at 12% 0%, rgba(255, 240, 211, 0.24), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(242, 248, 255, 0.68)) !important;
  border: 1px solid rgba(82, 111, 157, 0.22) !important;
  color: #151a27 !important;
  box-shadow: 0 8px 24px rgba(48, 72, 112, 0.08) !important;
  opacity: 1 !important;
  backdrop-filter: blur(10px);
}
[data-theme="light"] #works .work-card:hover,
[data-theme="light"] #works .works-overview-card:hover,
[data-theme="light"] #works .works-overview-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(184, 52, 118, 0.28) !important;
  background: radial-gradient(circle at 12% 0%, rgba(255, 240, 211, 0.28), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(236, 246, 255, 0.72)) !important;
  box-shadow: 0 12px 32px rgba(48, 72, 112, 0.12), 0 0 0 1px rgba(184, 52, 118, 0.06) !important;
}
[data-theme="light"] #works .works-overview-heading,
[data-theme="light"] #works .works-overview-heading span,
[data-theme="light"] #works .work-summary h3 {
  color: #5a4778 !important;
  -webkit-text-fill-color: #5a4778 !important;
  text-shadow: none !important;
}
[data-theme="light"] #works .works-overview-heading small,
[data-theme="light"] #works .works-overview-card span,
[data-theme="light"] #works .work-entry p,
[data-theme="light"] #works .work-entry-meta {
  color: #263246 !important;
  -webkit-text-fill-color: #263246 !important;
}
[data-theme="light"] #works .year-tabs button {
  color: #172947 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(82, 111, 157, 0.2) !important;
  box-shadow: 0 16px 34px rgba(48, 72, 112, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] #works .works-expand-btn,
[data-theme="light"] #works .works-collapse-btn {
  color: rgba(0, 204, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(0, 204, 255, 0.2) !important;
  box-shadow: 0 6px 16px rgba(0, 204, 255, 0.08) !important;
}
[data-theme="light"] #works .year-tabs button.active,
[data-theme="light"] #works .year-tab-all.active {
  color: #fff !important;
  background: linear-gradient(135deg, #2f78c4, #cf7db0) !important;
  border-color: rgba(255, 255, 255, 0.74) !important;
}
[data-theme="light"] #works .tag,
[data-theme="light"] #works .work-entry-meta span,
[data-theme="light"] #works .drama-card-meta span {
  color: #173f70 !important;
  background: rgba(224, 241, 255, 0.9) !important;
  border: 1px solid rgba(107, 166, 220, 0.36) !important;
}
[data-theme="light"] #works .lead-role-tag {
  color: #a81f64 !important;
  background: rgba(255, 228, 242, 0.92) !important;
  border-color: rgba(199, 76, 138, 0.34) !important;
}
[data-theme="light"] #works :where(.is-platform-fanjiao, .is-fanjiao),
[data-theme="light"] #works .work-card .work-tags span:not(.lead-role-tag) {
  color: #6b7a8c !important;
  background: transparent !important;
  border-color: transparent !important;
}
[data-theme="light"] #works :where(.is-platform-manbo, .is-manbo) {
  color: #6b7a8c !important;
  background: transparent !important;
  border-color: transparent !important;
}
[data-theme="light"] #works .is-platform-netease {
  color: #6b7a8c !important;
  background: transparent !important;
  border-color: transparent !important;
}
[data-theme="light"] #works .is-platform-tingji {
  color: #6b7a8c !important;
  background: transparent !important;
  border-color: transparent !important;
}
[data-theme="light"] #works .is-platform-rela {
  color: #6b7a8c !important;
  background: transparent !important;
  border-color: transparent !important;
}
[data-theme="light"] #works .works-side-jump,
[data-theme="light"] #works .works-side-jump a,
[data-theme="light"] #works .works-side-jump-toggle {
  color: #172947 !important;
}
/* 浅色主题音乐容器 - 图片背景色提取设计 */
[data-theme="light"] #music .music-player-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(252, 248, 251, 0.88) 0%, rgba(245, 240, 248, 0.82) 35%, rgba(235, 242, 250, 0.78) 70%, rgba(240, 235, 245, 0.85) 100%),
    /* 左上角淡紫粉色光晕 - 提取自图片左上区域 */
    radial-gradient(ellipse at 12% 10%, rgba(232, 213, 242, 0.48) 0%, transparent 42%),
    /* 右上角淡蓝色光晕 - 提取自图片右上区域 */
    radial-gradient(ellipse at 88% 8%, rgba(205, 229, 245, 0.42) 0%, transparent 44%),
    /* 底部淡紫白色光晕 - 提取自图片底部区域 */
    radial-gradient(ellipse at 50% 92%, rgba(248, 244, 250, 0.65) 0%, transparent 48%),
    /* 中心柔和紫色光晕 */
    radial-gradient(ellipse at 45% 50%, rgba(225, 215, 240, 0.35) 0%, transparent 40%);
  border: 1px solid rgba(220, 210, 230, 0.4);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(180, 170, 190, 0.12),
    /* 内发光边缘 - 通透感 */
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    /* 底部柔和阴影 */
    inset 0 -2px 16px rgba(180, 170, 190, 0.04),
    /* 顶部紫蓝色微妙光晕 */
    0 0 60px rgba(200, 190, 220, 0.1);
  backdrop-filter: blur(32px) saturate(1.15);
}
/* 音乐容器动态光效层 - 匹配图片提取色彩 */
[data-theme="light"] #music .music-player-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      135deg,
      transparent 0%,
      /* 淡紫粉色光带 */
      rgba(232, 213, 242, 0.3) 20%,
      /* 柔和紫色过渡 */
      rgba(220, 210, 235, 0.25) 45%,
      /* 淡蓝色光带 */
      rgba(205, 229, 245, 0.28) 70%,
      transparent 100%
    );
  opacity: 0.55;
  animation: musicContainerGlow 10s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* 浅色主题播放器主体 - 图片背景色提取设计 */
[data-theme="light"] #music .player-main {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 12% 10%, rgba(232, 213, 242, 0.52) 0%, transparent 38%),
    /* 右上淡蓝色光晕 - 提取自专辑封面右上区域 */
    radial-gradient(ellipse at 88% 8%, rgba(205, 229, 245, 0.48) 0%, transparent 42%),
    /* 底部淡紫白色光晕 - 提取自专辑封面底部区域 */
    radial-gradient(ellipse at 50% 92%, rgba(248, 244, 250, 0.55) 0%, transparent 50%),
    /* 中心柔和紫色光晕 */
    radial-gradient(ellipse at 45% 55%, rgba(225, 215, 240, 0.32) 0%, transparent 40%),
    /* 主背景渐变 - 淡紫白到淡蓝紫 */
    linear-gradient(145deg, rgba(248, 244, 250, 0.95) 0%, rgba(240, 235, 245, 0.9) 35%, rgba(230, 240, 250, 0.88) 70%, rgba(238, 233, 245, 0.92) 100%) !important;
  border: 1px solid rgba(220, 210, 230, 0.45) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 14px 40px rgba(180, 170, 190, 0.1),
    /* 内发光边缘 - 通透感 */
    0 0 0 1px rgba(255, 255, 255, 0.92) inset,
    /* 底部柔和阴影 */
    inset 0 -2px 14px rgba(180, 170, 190, 0.03),
    /* 紫蓝色微妙光晕 */
    0 0 55px rgba(200, 190, 220, 0.08) !important;
  backdrop-filter: blur(28px) saturate(1.15);
  transition: transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium);
}
/* 播放器主体动态光效 - 匹配图片提取色彩 */
[data-theme="light"] #music .player-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      135deg,
      transparent 0%,
      /* 淡紫粉色光带 - 提取自专辑封面 */
      rgba(232, 213, 242, 0.38) 25%,
      /* 柔和紫色过渡 */
      rgba(220, 210, 235, 0.3) 50%,
      /* 淡蓝色光带 */
      rgba(205, 229, 245, 0.32) 75%,
      transparent 100%
    );
  opacity: 0.65;
  animation: musicPlayerGlow 8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* 播放器边缘光效 - 匹配图片提取色彩 */
[data-theme="light"] #music .player-main::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, transparent 35%),
    /* 底部阴影边框 */
    linear-gradient(0deg, rgba(180, 170, 190, 0.06) 0%, transparent 30%),
    /* 左侧淡紫粉渐变 */
    linear-gradient(90deg, rgba(232, 213, 242, 0.28) 0%, transparent 28%),
    /* 右侧淡蓝渐变 */
    linear-gradient(270deg, rgba(205, 229, 245, 0.24) 0%, transparent 28%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* 播放器悬停效果 - 增强光效 */
[data-theme="light"] #music .player-main:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 213, 242, 0.5) !important;
  box-shadow: 0 24px 56px rgba(180, 170, 190, 0.14),
    /* 内发光增强 */
    0 0 0 1px rgba(232, 213, 242, 0.25) inset,
    /* 底部阴影 */
    inset 0 -2px 14px rgba(180, 170, 190, 0.04),
    /* 紫粉色发光效果 */
    0 0 90px rgba(232, 213, 242, 0.15),
    /* 淡蓝色发光效果 */
    0 0 60px rgba(205, 229, 245, 0.1) !important;
}
[data-theme="light"] #music .player-main:hover::before {
  opacity: 0.85;
}
/* 浅色主题播放列表 - 匹配图片提取色彩 */
[data-theme="light"] #music .playlist {
  background: radial-gradient(ellipse at 15% 10%, rgba(232, 213, 242, 0.35) 0%, transparent 38%),
    /* 右上角淡蓝色光晕 */
    radial-gradient(ellipse at 85% 8%, rgba(205, 229, 245, 0.32) 0%, transparent 40%),
    /* 主背景渐变 */
    linear-gradient(145deg, rgba(248, 244, 250, 0.94) 0%, rgba(240, 235, 245, 0.88) 50%, rgba(235, 240, 250, 0.86) 100%) !important;
  border: 1px solid rgba(220, 210, 230, 0.38) !important;
  border-radius: var(--radius-xl);
  box-shadow: 0 14px 40px rgba(180, 170, 190, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    inset 0 -2px 12px rgba(180, 170, 190, 0.03) !important;
  backdrop-filter: blur(24px) saturate(1.15);
}
/* 音乐容器流动光效动画 */
@keyframes musicContainerGlow {
  0%, 100% {
    opacity: 0.45;
    transform: translateX(-6%) translateY(-4%) scale(0.96) rotate(-1.5deg);
  }
  25% {
    opacity: 0.85;
    transform: translateX(3%) translateY(-2%) scale(1) rotate(0.5deg);
  }
  50% {
    opacity: 0.65;
    transform: translateX(5%) translateY(4%) scale(1.04) rotate(1.5deg);
  }
  75% {
    opacity: 0.9;
    transform: translateX(-1%) translateY(3%) scale(0.98) rotate(-0.5deg);
  }
}
/* 播放器主体呼吸光效动画 */
@keyframes musicPlayerGlow {
  0%, 100% {
    opacity: 0.4;
    transform: translateX(-5%) translateY(-5%) scale(0.95);
  }
  50% {
    opacity: 0.85;
    transform: translateX(5%) translateY(5%) scale(1.05);
  }
}
[data-theme="light"] #music .track-title-gradient,
[data-theme="light"] #music .playlist-item-info h5 {
  color: #5a4778 !important;
  -webkit-text-fill-color: #5a4778 !important;
  background: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
[data-theme="light"] #music .player-meta p .artist-name-large,
[data-theme="light"] #music .playlist-item-info p,
[data-theme="light"] #music .time-display {
  color: #151a27 !important;
  -webkit-text-fill-color: #151a27 !important;
}
/* 浅色主题播放列表项 */
[data-theme="light"] #music .playlist-item {
  border-radius: var(--radius-md);
  transition: all var(--transition-medium);
}
/* 浅色主题播放列表项悬停与激活状态 */
[data-theme="light"] #music .playlist-item:hover,
[data-theme="light"] #music .playlist-item.active {
  background: linear-gradient(135deg, rgba(232, 213, 242, 0.85) 0%, rgba(205, 229, 245, 0.8) 100%) !important;
  border-color: rgba(232, 213, 242, 0.5) !important;
  box-shadow: 0 12px 32px rgba(180, 170, 190, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
#music .player-controls .mode-btn {
  width: 50px;
  height: 50px;
}
#music .player-controls .mode-btn[data-mode="loop"],
#music .player-controls .mode-btn[data-mode="shuffle"] {
  color: #fff;
  background: linear-gradient(135deg, #2f78c4, #cf7db0);
  border-color: rgba(255, 255, 255, 0.52);
}
/* 2026-06-06 final light-theme legibility system */
[data-theme="light"] {
  --jzy-light-ink: #121722;
  --jzy-light-muted: #35445b;
  --jzy-light-blue: #225f9f;
  --jzy-light-rose: #ad2f72;
  --jzy-light-gold: #a66b18;
  --jzy-glass-bg: rgba(255, 255, 255, 0.94);
  --jzy-glass-bg-strong: rgba(255, 255, 255, 0.98);
  --jzy-glass-border: rgba(77, 108, 154, 0.28);
  --jzy-glass-shadow: 0 24px 58px rgba(44, 66, 104, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
[data-theme="light"] main :where(.section-heading, .profile-copy, .profile-text-card, .social-note, .social-card, .schedule-card, .work-card, .works-stats, .works-overview-card, .drama-detail-card, .drama-detail-intro, .audio-card, .audio-modal-content, .music-player-container, .player-main, .playlist, .quote-card, .quote-panel, .life-card, .gallery-item, .fans-gallery-item, .resonance-card) {
  background: radial-gradient(circle at 16% 0%, rgba(255, 241, 213, 0.28), transparent 34%),
    radial-gradient(circle at 100% 8%, rgba(219, 238, 255, 0.42), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(242, 248, 255, 0.68)) !important;
  border: 1px solid var(--jzy-glass-border) !important;
  color: var(--jzy-light-ink) !important;
  box-shadow: 0 8px 24px rgba(44, 66, 104, 0.08) !important;
  opacity: 1 !important;
  backdrop-filter: blur(12px);
}
[data-theme="light"] main :where(.section-heading p, .profile-copy p, .profile-text-card p, .social-card p, .schedule-card p, .work-card p, .works-overview-card span:not(.lead-role-text), .drama-synopsis p, .audio-card p, .playlist-item-info p, .music-card p, .quote-card p, .quote-panel p, .life-card p) {
  color: var(--jzy-light-muted) !important;
  -webkit-text-fill-color: var(--jzy-light-muted) !important;
}
[data-theme="light"] #works .works-overview-card span.lead-role-text {
  color: #00CCFF !important;
  -webkit-text-fill-color: #00CCFF !important;
}
/**
 * 浅色主题通用标题样式
 * @optimization 使用 CSS 变量统一管理渐变
 */
[data-theme="light"] main :where(h1, h2, h3, h4, .section-title, .work-summary h3, .audio-title, .track-title-gradient, .playlist-item-info h5) {
  background-image: var(--heading-gradient-primary) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  animation: titleColorShiftLight 8s linear infinite !important;
}
[data-theme="light"] #works .works-overview-card strong {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}
[data-theme="light"] #social .social-card {
  padding: clamp(24px, 2.4vw, 34px) !important;
}
[data-theme="light"] #social .social-card h3 {
  color: #47335f !important;
  -webkit-text-fill-color: #47335f !important;
}
[data-theme="light"] #social .social-card-footer .tag,
[data-theme="light"] #social .social-tags .tag,
[data-theme="light"] #social .tag {
  color: #174d86 !important;
  -webkit-text-fill-color: #174d86 !important;
  background: linear-gradient(135deg, rgba(226, 242, 255, 0.96), rgba(255, 255, 255, 0.9)) !important;
  border: 1px solid rgba(72, 139, 198, 0.36) !important;
  box-shadow: 0 10px 24px rgba(44, 66, 104, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] #social .social-tags {
  flex-wrap: nowrap !important;
}
[data-theme="light"] #social .social-card-footer .tag-special,
[data-theme="light"] #social .social-tags .tag-special {
  color: #a12766 !important;
  -webkit-text-fill-color: #a12766 !important;
  background: linear-gradient(135deg, rgba(255, 228, 242, 0.98), rgba(255, 247, 252, 0.92)) !important;
  border-color: rgba(195, 70, 134, 0.38) !important;
}
/* Light social footer: keep chips separated like the dark theme. */
[data-theme="light"] #social .social-card-footer {
  gap: 18px !important;
  min-height: 44px !important;
}
[data-theme="light"] #social .social-tags {
  flex: 0 1 auto !important;
  margin-left: 0 !important;
}
@media (max-width: 560px) {
  [data-theme="light"] #social .social-card-footer {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  [data-theme="light"] #social .social-card a.social-action,
  [data-theme="light"] #social .social-card span.social-action,
  [data-theme="light"] #social .social-action,
  [data-theme="light"] #social .social-card .social-card-footer .social-tags .tag,
  [data-theme="light"] #social .social-card:nth-child(3) .social-card-footer .social-tags .tag {
    width: 100% !important;
    min-width: 0 !important;
  }
  [data-theme="light"] #social .social-tags {
    width: 100% !important;
  }
}
[data-theme="light"] #works #worksSummary,
[data-theme="light"] #works .works-stats,
[data-theme="light"] #works .work-card,
[data-theme="light"] #works .works-overview-card,
[data-theme="light"] #works .drama-detail-card,
[data-theme="light"] #works .drama-cast {
  background: radial-gradient(circle at 12% 0%, rgba(255, 240, 211, 0.24), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(242, 248, 255, 0.68)) !important;
  border-color: rgba(69, 103, 151, 0.22) !important;
  color: #111722 !important;
  box-shadow: 0 8px 24px rgba(44, 66, 104, 0.08) !important;
  backdrop-filter: blur(10px);
}
[data-theme="light"] #works .work-summary h3,
[data-theme="light"] #works .drama-detail-card h4 {
  color: #251f36 !important;
  -webkit-text-fill-color: #251f36 !important;
}
[data-theme="light"] #works .works-overview-heading span {
  color: #111722 !important;
  -webkit-text-fill-color: #111722 !important;
}
[data-theme="light"] #works .works-overview-heading small {
  color: #58667a !important;
  -webkit-text-fill-color: #58667a !important;
}
[data-theme="light"] #works .works-side-jump {
  width: 86px;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 8px 24px rgba(44, 66, 104, 0.08) !important;
  backdrop-filter: blur(8px);
}
[data-theme="light"] #works .works-side-jump.is-open {
  width: 206px;
}
[data-theme="light"] #works .works-overview-card.is-lead {
  border-color: rgba(0, 204, 255, 0.34) !important;
  box-shadow: 0 12px 32px rgba(0, 204, 255, 0.12),
    inset 0 0 24px rgba(0, 204, 255, 0.06) !important;
  background: radial-gradient(circle at 0% 0%, rgba(0, 204, 255, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(242, 248, 255, 0.72)) !important;
}
[data-theme="light"] #works .works-overview-card.is-lead strong {
  color: #00CCFF !important;
  -webkit-text-fill-color: #00CCFF !important;
}
#worksSummary {
  scroll-margin-top: 128px;
}
[data-theme="light"] #audio-gallery .audio-filters {
  margin-bottom: 28px;
}
[data-theme="light"] #audio-gallery .audio-cards-container {
  min-height: 0 !important;
}
[data-theme="light"] #audio-gallery .audio-card {
  background: radial-gradient(circle at 0% 0%, rgba(255, 232, 242, 0.42), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 247, 255, 0.94)) !important;
  border-color: rgba(69, 103, 151, 0.3) !important;
}
[data-theme="light"] #audio-gallery .audio-title {
  color: #513d70 !important;
  -webkit-text-fill-color: #513d70 !important;
}
.control-btn,
.audio-controls .control-btn {
  position: relative;
}
.mode-one {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  color: #fff;
  background: #b52e72;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.86);
}
.mode-one[hidden] {
  display: none !important;
}
#music .player-controls .mode-btn,
.audio-controls #repeatBtn {
  color: #1d4775 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(224, 239, 255, 0.82)) !important;
  border: 1px solid rgba(76, 126, 179, 0.28) !important;
  box-shadow: 0 14px 30px rgba(44, 66, 104, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
#music .player-controls .mode-btn[data-mode="loop"],
.audio-controls #repeatBtn[data-mode="loop"] {
  color: #a12766 !important;
  background: linear-gradient(135deg, rgba(255, 229, 242, 0.98), rgba(230, 242, 255, 0.92)) !important;
  border-color: rgba(195, 70, 134, 0.34) !important;
}
#music .player-controls .mode-btn[data-mode="shuffle"],
.audio-controls #repeatBtn[data-mode="shuffle"] {
  color: #fff !important;
  background: linear-gradient(135deg, #2c72bb, #c86fa6) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
}
/* 浅色主题音乐板块统一背景色 - 图片提取色彩优化 */
[data-theme="light"] #music .music-player-container,
[data-theme="light"] #music .player-main,
[data-theme="light"] #music .playlist {
  background: radial-gradient(ellipse at 12% 10%, rgba(232, 213, 242, 0.4) 0%, transparent 40%),
    radial-gradient(ellipse at 88% 8%, rgba(205, 229, 245, 0.35) 0%, transparent 42%),
    linear-gradient(145deg, rgba(248, 244, 250, 0.96) 0%, rgba(240, 235, 245, 0.9) 50%, rgba(235, 240, 250, 0.88) 100%) !important;
  border-color: rgba(220, 210, 230, 0.4) !important;
  box-shadow: 0 14px 40px rgba(180, 170, 190, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    inset 0 -2px 14px rgba(180, 170, 190, 0.03) !important;
}
[data-theme="light"] #music .playlist-item {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(220, 210, 230, 0.3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
[data-theme="light"] #music .playlist-item.active {
  background: linear-gradient(135deg, rgba(232, 213, 242, 0.9) 0%, rgba(205, 229, 245, 0.85) 100%) !important;
  border-color: rgba(232, 213, 242, 0.5) !important;
}
[data-theme="light"] #music .progress-bar {
  background: rgba(62, 78, 99, 0.28) !important;
  box-shadow: inset 0 1px 3px rgba(27, 38, 56, 0.22), 0 10px 24px rgba(44, 66, 104, 0.1) !important;
}
/* Music page playback clarity and seeking polish */
#music .playlist-now {
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  letter-spacing: 0;
}
@keyframes musicStatusSpin {
  to {
    transform: rotate(360deg);
  }
}
#music .progress-bar {
  overflow: visible;
  touch-action: none;
}
#music .progress-bar:focus-visible {
  outline: 2px solid rgba(255, 213, 148, 0.82);
  outline-offset: 7px;
}
#music .progress-bar.is-seeking .progress-handle,
#music .progress-bar:focus-visible .progress-handle {
  opacity: 1;
  transform: translateY(-50%) scale(1.14);
}
#music .playlist-item {
  position: relative;
}
#music .playlist-item-info {
  min-width: 0;
  flex: 1 1 auto;
}
#music .playlist-item-info h5,
#music .playlist-item-info p {
  overflow: hidden;
  text-overflow: ellipsis;
}
#music .playlist-now {
  flex: 0 0 auto;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#music .playlist-item.active .playlist-now {
  transform: translateX(0);
}
#music .playlist-item:focus-visible {
  outline: 2px solid rgba(255, 213, 148, 0.82);
  outline-offset: 3px;
}
@media (max-width: 720px) {
  #music .playlist-now {
    right: 12px;
    bottom: 12px;
  }
}
/* Schedule detail polish: single-card filters and Douyin card refinement. */
body.page-schedule #scheduleGrid.is-single-result {
  display: grid !important;
  grid-template-columns: minmax(0, min(100%, 940px)) !important;
  justify-content: center !important;
  justify-items: stretch !important;
}
body.page-schedule #scheduleGrid.is-single-result .schedule-card {
  width: 100% !important;
  max-width: 940px !important;
  margin-inline: auto !important;
}
body.page-schedule #schedule .schedule-header h3,
body.page-schedule .schedule-modal-body .modal-header h3 {
  color: #f7f8ff !important;
  -webkit-text-fill-color: #f7f8ff !important;
  text-shadow: 0 12px 28px rgba(5, 8, 16, 0.28);
}
[data-theme="light"] body.page-schedule #schedule .schedule-header h3,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-header h3 {
  color: #141b2b !important;
  -webkit-text-fill-color: #141b2b !important;
  text-shadow: 0 10px 24px rgba(84, 104, 132, 0.1);
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header h3,
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster .schedule-header h3 {
  color: #141b2b !important;
  -webkit-text-fill-color: #141b2b !important;
  font-family: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", Georgia, serif !important;
  font-weight: 880 !important;
}
body.page-schedule #schedule .schedule-card.is-douyin-card {
  min-height: 430px !important;
  padding: 0 !important;
  isolation: isolate;
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  z-index: 0 !important;
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.26), rgba(10, 18, 32, 0.06) 38%, rgba(10, 18, 32, 0.1)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 48%);
  pointer-events: none;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-thumb::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0.08)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 42%);
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-copy {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr;
  align-content: start !important;
  min-height: inherit !important;
  width: 100% !important;
  padding: 30px 30px 78px !important;
  gap: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header.is-douyin-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
  text-align: left !important;
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header h3 {
  grid-column: 1 !important;
  justify-self: start !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: clamp(28px, 2.1vw, 38px) !important;
  color: #f8f7ff !important;
  -webkit-text-fill-color: #f8f7ff !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header h3 {
  text-shadow: 0 8px 20px rgba(106, 74, 142, 0.12);
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster .schedule-header h3 {
  color: #5f3b8e !important;
  -webkit-text-fill-color: #5f3b8e !important;
  text-shadow: 0 8px 20px rgba(106, 74, 142, 0.1);
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-badges {
  grid-column: 2 !important;
  justify-self: end !important;
  width: auto !important;
  gap: 8px !important;
}
body.page-schedule #schedule .schedule-card.is-douyin-card .douyin-schedule-info {
  justify-self: start !important;
  width: auto !important;
  max-width: min(78%, 360px) !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(15, 23, 42, 0.2) !important;
  font-size: 15px !important;
  font-weight: 720 !important;
  line-height: 36px !important;
  white-space: nowrap !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .douyin-schedule-info {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.42) !important;
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-core-info,
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-secondary-info {
  display: none !important;
}
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-figcaption {
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
}
body.page-schedule #schedule .schedule-card.has-poster .schedule-poster .schedule-figcaption {
  bottom: 22px !important;
}
body.page-schedule .schedule-modal-body .modal-secondary:empty,
body.page-schedule #schedule .schedule-secondary-info:empty {
  display: none !important;
}
@media (max-width: 980px) {
  body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header.is-douyin-header {
    grid-template-columns: 1fr !important;
  }
  body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-badges {
    grid-column: 1 !important;
    justify-self: start !important;
    order: -1;
  }
}
/* Schedule final detail alignment and dark-theme reliability. */
body.page-schedule #schedule .schedule-card.reveal {
  opacity: 1 !important;
  visibility: visible !important;
}
body.page-schedule #schedule .schedule-card.reveal:not(:hover):not(:focus-visible) {
  transform: none;
}
body.page-schedule .schedule-modal-content {
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}
body.page-schedule .schedule-modal-body {
  justify-items: center !important;
}
body.page-schedule .schedule-modal-body .modal-header {
  width: 100% !important;
  justify-items: center !important;
  text-align: center !important;
}
body.page-schedule .schedule-modal-body .modal-header h3 {
  width: max-content !important;
  justify-self: center !important;
  margin-inline: auto !important;
  color: #f7f8ff !important;
  -webkit-text-fill-color: #f7f8ff !important;
}
body.page-schedule .schedule-modal-body .modal-core,
body.page-schedule .schedule-modal-body .modal-secondary,
body.page-schedule .schedule-modal-body .modal-countdown {
  width: min(100%, 720px) !important;
  margin-inline: auto !important;
}
body.page-schedule .schedule-modal-body .modal-core {
  justify-content: center !important;
  gap: 12px !important;
}
body.page-schedule .schedule-modal-body .modal-core p {
  padding-inline: 18px !important;
  text-align: center !important;
  justify-content: center !important;
}
body.page-schedule .schedule-modal-body .modal-secondary {
  align-content: center !important;
}
body.page-schedule .schedule-modal-action {
  margin-top: 2px !important;
}
html[data-theme="light"] body.page-schedule .schedule-modal-body .modal-header h3,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-header h3,
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster .schedule-header h3,
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header h3 {
  background: linear-gradient(105deg, #49306f 0%, #7d4fa3 42%, #b45f96 72%, #574989 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
body.page-schedule #schedule .schedule-figcaption,
body.page-schedule .schedule-modal-action {
  min-width: 108px !important;
  min-height: 34px !important;
  padding-inline: 18px !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-figcaption,
[data-theme="light"] body.page-schedule .schedule-modal-action {
  color: #0f5f8d !important;
  -webkit-text-fill-color: #0f5f8d !important;
}
@media (max-width: 980px) {
  body.page-schedule .schedule-modal-body .modal-header h3 {
    width: auto !important;
    max-width: 100% !important;
  }
}
/* Schedule title restraint: reduce contrast and visual weight. */
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster .schedule-header h3,
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header h3,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-header h3 {
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #4b3c66 !important;
  -webkit-text-fill-color: #4b3c66 !important;
  font-weight: 820 !important;
  text-shadow: 0 8px 18px rgba(75, 60, 102, 0.055) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster .schedule-header h3 {
  font-size: clamp(26px, 1.8vw, 34px) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header h3 {
  color: #5b4a72 !important;
  -webkit-text-fill-color: #5b4a72 !important;
  font-size: clamp(25px, 1.75vw, 32px) !important;
}
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-header h3 {
  color: #443955 !important;
  -webkit-text-fill-color: #443955 !important;
  font-size: clamp(32px, 2.7vw, 46px) !important;
}
/* Schedule final alignment pass: optical centering for capsules and modal titles. */
body.page-schedule #schedule :where(.schedule-tag, .schedule-progress),
body.page-schedule .schedule-modal-body :where(.schedule-tag, .schedule-progress),
body.page-schedule #schedule .schedule-filter-btn,
body.page-schedule #schedule .schedule-figcaption,
body.page-schedule .schedule-modal-action {
  display: inline-grid !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  place-items: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
body.page-schedule #schedule :where(.schedule-tag, .schedule-progress),
body.page-schedule .schedule-modal-body :where(.schedule-tag, .schedule-progress) {
  height: 30px !important;
  min-height: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 1px !important;
}
body.page-schedule #schedule .schedule-core-info,
body.page-schedule .schedule-modal-body .modal-core {
  justify-items: center !important;
}
body.page-schedule #schedule .schedule-core-info p,
body.page-schedule .schedule-modal-body .modal-core p {
  grid-auto-flow: column !important;
  justify-items: center !important;
  place-items: center !important;
  padding-block: 0 !important;
  vertical-align: middle !important;
}
body.page-schedule #schedule .schedule-core-info p strong,
body.page-schedule .schedule-modal-body .modal-core p strong,
body.page-schedule .schedule-modal-body .modal-secondary p strong {
  display: inline-grid !important;
  align-items: center !important;
  height: 1em !important;
  line-height: 1 !important;
}
body.page-schedule .schedule-modal-body .modal-secondary {
  justify-items: center !important;
}
body.page-schedule .schedule-modal-body .modal-secondary p {
  grid-auto-flow: column !important;
  justify-items: center !important;
  column-gap: 10px !important;
}
body.page-schedule .schedule-modal-body .modal-countdown {
  grid-auto-flow: column !important;
  justify-items: center !important;
  column-gap: 18px !important;
  padding-block: 0 !important;
}
body.page-schedule .schedule-modal-body .modal-header h3 {
  white-space: normal !important;
  text-wrap: balance !important;
}
body.page-schedule .schedule-modal-body .modal-header h3:only-child,
body.page-schedule .schedule-modal-body .modal-header h3 {
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  body.page-schedule #schedule .schedule-core-info p,
  body.page-schedule .schedule-modal-body .modal-core p,
  body.page-schedule .schedule-modal-body .modal-secondary p {
    grid-auto-flow: row !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 44px !important;
    padding-block: 8px !important;
  }
  body.page-schedule .schedule-modal-body .modal-header h3 {
    font-size: clamp(26px, 7vw, 34px) !important;
  }
}
/* Schedule optical center fix: align text group, pill, and panel centerlines. */
body.page-schedule #schedule .schedule-core-info,
body.page-schedule .schedule-modal-body .modal-core {
  align-content: center !important;
  text-align: center !important;
}
body.page-schedule #schedule .schedule-core-info p,
body.page-schedule .schedule-modal-body .modal-core p {
  flex: 0 0 auto !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
body.page-schedule #schedule .schedule-core-info p strong,
body.page-schedule .schedule-modal-body .modal-core p strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.page-schedule #schedule .schedule-core-info p strong + *,
body.page-schedule .schedule-modal-body .modal-core p strong + * {
  line-height: 1 !important;
}
body.page-schedule .schedule-modal-body .modal-core {
  width: min(100%, 690px) !important;
  min-height: 90px !important;
  padding: 22px 24px !important;
}
body.page-schedule .schedule-modal-body .modal-secondary {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 690px) !important;
  min-height: 120px !important;
  text-align: center !important;
}
body.page-schedule .schedule-modal-body .modal-secondary p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
body.page-schedule .schedule-modal-body .modal-secondary p strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  line-height: 1.2 !important;
}
body.page-schedule .schedule-modal-body .modal-countdown {
  width: min(100%, 690px) !important;
  text-align: center !important;
}
body.page-schedule .schedule-modal-body .modal-countdown :where(.schedule-countdown-label, .schedule-countdown) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
}
body.page-schedule .schedule-modal-body .modal-header h3 {
  max-width: min(720px, 100%) !important;
  line-height: 1.16 !important;
  text-align: center !important;
}
html[data-theme="light"] body.page-schedule .schedule-modal-body .modal-header h3,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-header h3 {
  font-size: clamp(28px, 2.05vw, 36px) !important;
}
body.page-schedule .schedule-modal-body .modal-header {
  margin-bottom: 2px !important;
}
@media (min-width: 721px) {
  body.page-schedule #schedule .schedule-core-info p.is-place,
  body.page-schedule .schedule-modal-body .modal-core p.is-place {
    min-width: 0 !important;
  }
}
/* Schedule modal countdown: center text vertically inside the box. */
body.page-schedule .schedule-modal-body .modal-countdown {
  position: relative !important;
  flex-direction: row !important;
  align-content: center !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 24px !important;
  line-height: 58px !important;
  box-sizing: border-box !important;
}
body.page-schedule .schedule-modal-body .modal-countdown .schedule-countdown-label,
body.page-schedule .schedule-modal-body .modal-countdown .schedule-countdown {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 58px !important;
  transform: none !important;
  vertical-align: middle !important;
}
body.page-schedule .schedule-modal-body .modal-countdown .schedule-countdown {
  font-size: inherit !important;
}
/* Schedule text-box optical centering: move only text, not the boxes. */
body.page-schedule :where(.schedule-label, .schedule-value),
body.page-schedule :where(.schedule-countdown-label, .schedule-countdown),
body.page-schedule #schedule .douyin-schedule-info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 1em !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(0.14em) !important;
  vertical-align: middle !important;
}
body.page-schedule .schedule-modal-body .modal-core :where(.schedule-label, .schedule-value),
body.page-schedule .schedule-modal-body .modal-secondary :where(.schedule-label, .schedule-value),
body.page-schedule .schedule-modal-body .modal-countdown :where(.schedule-countdown-label, .schedule-countdown) {
  transform: translateY(0.16em) !important;
}
body.page-schedule #schedule .schedule-core-info p,
body.page-schedule .schedule-modal-body .modal-core p,
body.page-schedule .schedule-modal-body .modal-secondary p,
body.page-schedule .schedule-modal-body .modal-countdown,
body.page-schedule #schedule .schedule-countdown-wrapper {
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
}
body.page-schedule .schedule-modal-body .modal-core p {
  height: 44px !important;
  min-height: 44px !important;
}
body.page-schedule .schedule-modal-body .modal-secondary p {
  min-height: 32px !important;
}
/* Schedule final pass: data-driven filters, consistent hierarchy, glass modal. */
body.page-schedule #schedule .section-heading {
  margin-bottom: clamp(28px, 4vw, 52px) !important;
}
body.page-schedule .schedule-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: min(760px, calc(100vw - 36px));
  margin: -18px auto clamp(28px, 4vw, 44px);
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)),
    rgba(20, 28, 44, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 18px 48px rgba(8, 16, 28, 0.12);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
[data-theme="light"] body.page-schedule .schedule-filter {
  border-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(243, 251, 255, 0.46)),
    rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 18px 52px rgba(99, 130, 160, 0.12);
}
body.page-schedule .schedule-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 110px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 780;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body.page-schedule .schedule-filter-btn strong {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  color: inherit;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}
body.page-schedule .schedule-filter-btn:hover,
body.page-schedule .schedule-filter-btn:focus-visible,
body.page-schedule .schedule-filter-btn.is-active {
  transform: translateY(-1px);
  color: #7a4e12;
  border-color: rgba(231, 205, 160, 0.62);
  background: linear-gradient(135deg, rgba(255, 244, 225, 0.95), rgba(255, 255, 255, 0.72));
  box-shadow: 0 10px 26px rgba(229, 192, 138, 0.2);
  outline: none;
}
[data-theme="light"] body.page-schedule .schedule-filter-btn {
  color: #475569;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.56);
}
[data-theme="light"] body.page-schedule .schedule-filter-btn.is-active,
[data-theme="light"] body.page-schedule .schedule-filter-btn:hover,
[data-theme="light"] body.page-schedule .schedule-filter-btn:focus-visible {
  color: #8a5a10;
  border-color: rgba(217, 185, 130, 0.72);
  background: linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(232, 248, 255, 0.72));
  box-shadow: 0 12px 30px rgba(138, 90, 16, 0.1);
}
body.page-schedule #schedule .schedule-card {
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}
body.page-schedule #schedule .schedule-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 34%, rgba(125, 211, 252, 0.08));
  opacity: 0;
  transition: opacity 220ms ease;
}
body.page-schedule #schedule .schedule-card:hover,
body.page-schedule #schedule .schedule-card:focus-visible {
  transform: translateY(-6px) scale(1.004);
  border-color: rgba(199, 218, 235, 0.46) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 28px 68px rgba(7, 15, 28, 0.22) !important;
  outline: none;
}
body.page-schedule #schedule .schedule-card:hover::after,
body.page-schedule #schedule .schedule-card:focus-visible::after {
  opacity: 1;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card:hover,
[data-theme="light"] body.page-schedule #schedule .schedule-card:focus-visible {
  border-color: rgba(190, 212, 230, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 30px 74px rgba(91, 126, 156, 0.16) !important;
}
body.page-schedule #schedule .schedule-header,
body.page-schedule .schedule-modal-body .modal-header {
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}
body.page-schedule #schedule .schedule-badges,
body.page-schedule .schedule-modal-body .schedule-badges {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100%;
  margin: 0 !important;
}
body.page-schedule #schedule .schedule-header h3,
body.page-schedule .schedule-modal-body .modal-header h3 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto !important;
  font-family: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", Georgia, serif !important;
  font-weight: 880 !important;
  letter-spacing: 0 !important;
  line-height: 1.14 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
}
body.page-schedule #schedule .schedule-card.has-poster .schedule-header h3 {
  font-size: clamp(28px, 2vw, 38px) !important;
}
body.page-schedule #schedule .schedule-card.has-thumb .schedule-header h3,
body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header h3 {
  font-size: clamp(24px, 1.65vw, 32px) !important;
}
body.page-schedule .schedule-modal-body .modal-header h3 {
  max-width: min(820px, 100%);
  font-size: clamp(34px, 3.1vw, 54px) !important;
}
body.page-schedule #schedule .schedule-tag,
body.page-schedule #schedule .schedule-progress,
body.page-schedule .schedule-modal-body .schedule-tag,
body.page-schedule .schedule-modal-body .schedule-progress {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
body.page-schedule #schedule .schedule-core-info,
body.page-schedule .schedule-modal-body .modal-core {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}
body.page-schedule #schedule .schedule-core-info p,
body.page-schedule .schedule-modal-body .modal-core p {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
body.page-schedule #schedule .schedule-secondary-info {
  display: grid !important;
  gap: 10px !important;
}
body.page-schedule #schedule .schedule-secondary-info p,
body.page-schedule .schedule-modal-body .modal-secondary p {
  margin: 0 !important;
  letter-spacing: 0 !important;
}
body.page-schedule .schedule-empty {
  grid-column: 1 / -1;
  margin: 28px auto;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 720;
  text-align: center;
}
[data-theme="light"] body.page-schedule .schedule-empty {
  color: #64748b;
}
body.page-schedule.schedule-modal-glass-open .schedule-modal.open {
  background: radial-gradient(circle at 24% 18%, rgba(244, 213, 232, 0.18), transparent 34%),
    radial-gradient(circle at 72% 26%, rgba(191, 224, 238, 0.16), transparent 36%),
    rgba(7, 12, 20, 0.48) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
html[data-theme="light"] body.page-schedule.schedule-modal-glass-open .schedule-modal.open,
[data-theme="light"] body.page-schedule.schedule-modal-glass-open .schedule-modal.open {
  background: radial-gradient(circle at 18% 22%, rgba(255, 224, 240, 0.18), transparent 36%),
    radial-gradient(circle at 78% 28%, rgba(202, 235, 248, 0.18), transparent 38%),
    rgba(246, 250, 255, 0.34) !important;
  backdrop-filter: blur(14px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
}
body.page-schedule .schedule-modal-content {
  width: min(940px, calc(100vw - 44px)) !important;
  max-height: min(78vh, 760px) !important;
  padding: clamp(34px, 4vw, 58px) clamp(28px, 5vw, 66px) !important;
  border-radius: 24px !important;
  overflow: auto !important;
}
body.page-schedule .schedule-modal-body {
  display: grid !important;
  gap: clamp(22px, 2.6vw, 34px) !important;
}
body.page-schedule .schedule-modal-body .modal-header {
  display: grid !important;
  gap: 18px !important;
  margin: 0 0 4px !important;
  padding-top: 8px !important;
}
body.page-schedule .schedule-modal-body .modal-core,
body.page-schedule .schedule-modal-body .modal-secondary,
body.page-schedule .schedule-modal-body .modal-countdown {
  border-radius: 18px !important;
}
body.page-schedule .schedule-modal-body .modal-secondary {
  display: grid !important;
  gap: 14px !important;
  min-height: 116px;
  padding: clamp(24px, 2.8vw, 36px) !important;
}
body.page-schedule .schedule-modal-body .modal-secondary:empty {
  display: none !important;
}
body.page-schedule .schedule-modal-body .modal-countdown {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 18px !important;
  min-height: 72px;
}
body.page-schedule .schedule-source-action,
body.page-schedule .schedule-figcaption,
body.page-schedule .schedule-modal-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid rgba(125, 211, 252, 0.44);
  border-radius: 999px;
  color: #075985;
  background: rgba(224, 247, 255, 0.72);
  font-size: 14px;
  font-weight: 820;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.12);
}
body.page-schedule .schedule-poster .schedule-figcaption,
body.page-schedule .schedule-thumb .schedule-figcaption {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
}
body.page-schedule .schedule-modal-action {
  justify-self: center;
  min-width: 128px;
  min-height: 42px;
}
body.page-schedule .schedule-modal-close {
  z-index: 3;
}
@media (max-width: 980px) {
  body.page-schedule #schedule .schedule-header h3,
  body.page-schedule .schedule-modal-body .modal-header h3 {
    white-space: normal !important;
    text-wrap: balance !important;
  }
}
@media (max-width: 720px) {
  body.page-schedule .schedule-filter {
    width: min(420px, calc(100vw - 28px));
    border-radius: 22px;
  }
  body.page-schedule .schedule-filter-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  body.page-schedule .schedule-modal-content {
    width: min(100vw - 24px, 520px) !important;
    max-height: 82vh !important;
    padding: 30px 18px !important;
  }
  body.page-schedule #schedule .schedule-core-info,
  body.page-schedule .schedule-modal-body .modal-core {
    justify-content: stretch !important;
  }
  body.page-schedule #schedule .schedule-core-info p,
  body.page-schedule .schedule-modal-body .modal-core p {
    width: 100%;
    white-space: normal !important;
  }
}
/* Music status final layout: remove framed pills and let states breathe as text. */
#music .playlist-item {
  align-items: center !important;
  padding-right: 18px !important;
}
#music .playlist-now {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 219, 160, 0.78) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  opacity: 0 !important;
  transform: translateX(2px) !important;
}
#music .playlist-item.active .playlist-now {
  opacity: 1 !important;
}
#music .playlist-now i {
  font-size: 10px !important;
}
[data-theme="light"] #music .playlist-now {
  color: rgba(42, 118, 152, 0.68) !important;
  background: transparent !important;
  border-color: transparent !important;
}
@media (max-width: 720px) {
  #music .playlist-now {
    position: static !important;
    margin-left: auto !important;
  }
}
/* Music final request: remove visible playback/mode/status wording. */
#music .playlist-now {
  display: none !important;
}
/* Music player premium deck: black in dark theme, white in light theme. */
body.page-music #music .music-player-container {
  margin: 0 auto !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 28px !important;
}
body.page-music #music .player-main,
body.page-music #music .playlist {
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  border-radius: 24px !important;
}
body.page-music #music .player-main {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  justify-items: center !important;
  overflow: hidden !important;
}
body.page-music #music .vinyl-player {
  margin: 0 auto 28px !important;
}
body.page-music #music .player-info h4.track-title-gradient {
  color: #f8f4ef !important;
  -webkit-text-fill-color: #f8f4ef !important;
  background: none !important;
  text-shadow: 0 18px 34px rgba(0, 0, 0, 0.42) !important;
}
body.page-music #music .player-meta {
  display: block !important;
  width: auto !important;
}
body.page-music #music .player-meta p .artist-name-large {
  color: rgba(248, 244, 239, 0.66) !important;
  -webkit-text-fill-color: rgba(248, 244, 239, 0.66) !important;
  font-weight: 650 !important;
}
body.page-music #music .player-progress {
  align-self: end !important;
}
body.page-music #music .waveform-container {
  height: 22px !important;
  margin-bottom: 18px !important;
  opacity: 0.78 !important;
}
body.page-music #music .progress-bar {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.56),
    0 12px 24px rgba(0, 0, 0, 0.18) !important;
}
body.page-music #music .progress-fill {
  border-radius: inherit !important;
}
body.page-music #music .time-display {
  margin-top: 14px !important;
  color: rgba(248, 244, 239, 0.58) !important;
}
body.page-music #music .player-controls {
  align-self: end !important;
}
body.page-music #music .playlist {
  display: grid !important;
  align-content: start !important;
  scrollbar-gutter: stable !important;
}
body.page-music #music .playlist-item {
  transform: none !important;
}
body.page-music #music .playlist-item:hover,
body.page-music #music .playlist-item:focus-visible {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}
body.page-music #music .playlist-item-info h5 {
  margin: 0 0 9px !important;
  color: #f8f4ef !important;
  -webkit-text-fill-color: #f8f4ef !important;
  background: none !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}
body.page-music #music .playlist-item-info p {
  color: rgba(248, 244, 239, 0.56) !important;
  -webkit-text-fill-color: rgba(248, 244, 239, 0.56) !important;
  font-weight: 650 !important;
}
html[data-theme="light"] body.page-music #music .progress-bar,
body[data-theme="light"].page-music #music .progress-bar {
  background: rgba(16, 18, 22, 0.12) !important;
  box-shadow: inset 0 1px 2px rgba(16, 18, 22, 0.12),
    0 12px 22px rgba(55, 72, 96, 0.08) !important;
}
html[data-theme="light"] body.page-music #music .time-display,
body[data-theme="light"].page-music #music .time-display {
  color: rgba(16, 18, 22, 0.48) !important;
}
html[data-theme="light"] body.page-music #music .playlist-item:hover,
html[data-theme="light"] body.page-music #music .playlist-item:focus-visible,
body[data-theme="light"].page-music #music .playlist-item:hover,
body[data-theme="light"].page-music #music .playlist-item:focus-visible {
  background: rgba(16, 18, 22, 0.035) !important;
  border-color: rgba(16, 18, 22, 0.07) !important;
}
@media (max-width: 1080px) {
  body.page-music #music .music-player-container {
    grid-template-columns: 1fr !important;
  }
  body.page-music #music .playlist {
    max-height: 520px !important;
  }
}
@media (max-width: 640px) {
  body.page-music #music .music-player-container {
    width: calc(100vw - 24px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }
  body.page-music #music .player-main {
    padding: 30px 18px !important;
  }
  body.page-music #music .player-controls {
    gap: 14px !important;
  }
  body.page-music #music .control-btn {
    width: 48px !important;
    height: 48px !important;
  }
  body.page-music #music .control-btn.play-btn {
    width: 66px !important;
    height: 66px !important;
  }
  body.page-music #music .playlist-item {
    min-height: 104px !important;
    gap: 14px !important;
    padding: 16px !important;
  }
  body.page-music #music .playlist-item img {
    width: 68px !important;
    height: 68px !important;
  }
}
/* Music correction: black/white belongs to the record, not the whole player shell. */
body.page-music #music .vinyl-center {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.9), rgba(228, 218, 202, 0.76) 46%, rgba(105, 98, 88, 0.5) 100%) !important;
}
body.page-music #music .player-info h4.track-title-gradient,
body.page-music #music .playlist-item-info h5 {
  font-size: clamp(28px, 2.35vw, 42px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
}
body.page-music #music .player-meta p .artist-name-large,
body.page-music #music .playlist-item-info p {
  font-size: clamp(15px, 1.08vw, 19px) !important;
}
html[data-theme="light"] body.page-music #music .vinyl-center,
body[data-theme="light"].page-music #music .vinyl-center {
  background: radial-gradient(circle at 35% 28%, #ffffff, #d9dde4 54%, #727b8c 100%) !important;
  box-shadow: 0 0 0 7px rgba(20, 30, 45, 0.04),
    0 8px 16px rgba(75, 93, 125, 0.12) !important;
}
html[data-theme="light"] body.page-music #music .player-info h4.track-title-gradient,
body[data-theme="light"].page-music #music .player-info h4.track-title-gradient,
html[data-theme="light"] body.page-music #music .playlist-item-info h5,
body[data-theme="light"].page-music #music .playlist-item-info h5 {
  background: none !important;
}
/* Music player final refinement: calmer scale, centered deck, cleaner icons. */
body.page-music #music .music-player-container {
  grid-template-columns: minmax(500px, 1fr) minmax(320px, 0.62fr) !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: min(1080px, 100%) !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
  padding: 22px !important;
  gap: 26px !important;
}
body.page-music #music .player-main {
  min-height: 590px !important;
  padding: clamp(28px, 3vw, 42px) clamp(28px, 3.4vw, 50px) 32px !important;
}
body.page-music #music .playlist {
  gap: 12px !important;
}
body.page-music #music .vinyl-player {
  width: clamp(220px, 18vw, 270px) !important;
  height: clamp(220px, 18vw, 270px) !important;
  margin-bottom: 24px !important;
}
body.page-music #music .vinyl-record {
  width: 86% !important;
  height: 86% !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.page-music #music .vinyl-label {
  inset: 26% !important;
  border-radius: 18px !important;
}
body.page-music #music .vinyl-center {
  width: 11px !important;
  height: 11px !important;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.04),
    0 7px 12px rgba(0, 0, 0, 0.24) !important;
}
body.page-music #music .tonearm {
  top: 0 !important;
  right: 22px !important;
  width: 104px !important;
  height: 104px !important;
  opacity: 0.78 !important;
}
body.page-music #music .tonearm-arm {
  height: 2px !important;
}
body.page-music #music .tonearm-counterweight {
  width: 16px !important;
  height: 16px !important;
  background: linear-gradient(135deg, #4b4b4b, #181818) !important;
}
body.page-music #music .tonearm-headshell {
  width: 12px !important;
  height: 12px !important;
  background: linear-gradient(135deg, #f5f2ef, #c6c3bf) !important;
}
body.page-music #music .player-info {
  margin-bottom: 26px !important;
}
body.page-music #music .player-info h4.track-title-gradient {
  margin-bottom: 10px !important;
}
body.page-music #music .player-meta p .artist-name-large {
  font-size: clamp(14px, 1vw, 17px) !important;
  line-height: 1.38 !important;
}
body.page-music #music .player-progress {
  width: min(620px, 100%) !important;
  margin: 12px 0 28px !important;
}
body.page-music #music .waveform-container {
  display: none !important;
}
body.page-music #music .progress-bar {
  height: 5px !important;
}
body.page-music #music .time-display {
  font-size: 12px !important;
  font-weight: 780 !important;
}
body.page-music #music .player-controls {
  gap: 18px !important;
}
body.page-music #music .control-btn {
  border-width: 1px !important;
  font-size: 14px !important;
}
body.page-music #music .control-btn i {
  transform: translateY(0) !important;
}
body.page-music #music .control-btn.play-btn {
  font-size: 18px !important;
}
html[data-theme="light"] body.page-music #music .vinyl-record,
body[data-theme="light"].page-music #music .vinyl-record {
  border-color: rgba(23, 35, 52, 0.07) !important;
}
@media (max-width: 1080px) {
  body.page-music #music .music-player-container {
    width: min(820px, calc(100vw - 40px)) !important;
  }
}
@media (max-width: 640px) {
  body.page-music #music .player-main {
    min-height: 520px !important;
  }
  body.page-music #music .vinyl-player {
    width: clamp(190px, 58vw, 230px) !important;
    height: clamp(190px, 58vw, 230px) !important;
  }
  body.page-music #music .player-info h4.track-title-gradient {
    font-size: clamp(23px, 8vw, 30px) !important;
  }
  body.page-music #music .like-btn {
    left: calc(50% + 132px) !important;
  }
}
/* Music adaptive cover palette and final control color pass. */
body.page-music #music {
  --music-cover-rgb: 136, 118, 142;
  --music-cover-soft-rgb: 202, 193, 210;
  --music-cover-deep-rgb: 74, 65, 82;
}
body.page-music #music .vinyl-center {
  display: none !important;
}
body.page-music #music .control-btn:hover,
body.page-music #music .control-btn:focus-visible {
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(var(--music-cover-rgb), 0.38), rgba(var(--music-cover-deep-rgb), 0.76)) !important;
}
html[data-theme="light"] body.page-music #music .control-btn:hover,
html[data-theme="light"] body.page-music #music .control-btn:focus-visible,
body[data-theme="light"].page-music #music .control-btn:hover,
body[data-theme="light"].page-music #music .control-btn:focus-visible {
  color: rgba(16, 20, 28, 0.86) !important;
  border-color: rgba(var(--music-cover-rgb), 0.18) !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.96), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(var(--music-cover-soft-rgb), 0.28)) !important;
}
/* Music luxury clarity pass: quieter adaptive color, lighter shadows, scalable playlist. */
body.page-music #music .playlist {
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}
body.page-music #music .vinyl-player {
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.14)) !important;
}
body.page-music #music .tonearm,
body.page-music #music .tonearm::before,
body.page-music #music .tonearm::after {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12) !important;
}
body.page-music #music .playlist-item {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.page-music #music .playlist-item.active {
  border-color: rgba(var(--music-cover-soft-rgb), 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.08) !important;
}
body.page-music #music .control-btn {
  border-color: rgba(255, 255, 255, 0.12) !important;
}
body.page-music #music .control-btn:hover,
body.page-music #music .control-btn:focus-visible {
  color: rgba(255, 255, 255, 0.92) !important;
}
body.page-music #music .like-btn {
  filter: none !important;
}
html[data-theme="light"] body.page-music #music .vinyl-player,
body[data-theme="light"].page-music #music .vinyl-player {
  filter: drop-shadow(0 14px 22px rgba(70, 88, 118, 0.075)) !important;
}
html[data-theme="light"] body.page-music #music .player-meta p .artist-name-large,
html[data-theme="light"] body.page-music #music .playlist-item-info p,
body[data-theme="light"].page-music #music .player-meta p .artist-name-large,
body[data-theme="light"].page-music #music .playlist-item-info p {
  text-shadow: none !important;
}
html[data-theme="light"] body.page-music #music .playlist-item,
body[data-theme="light"].page-music #music .playlist-item {
  box-shadow: none !important;
}
html[data-theme="light"] body.page-music #music .playlist-item img,
body[data-theme="light"].page-music #music .playlist-item img {
  box-shadow: 0 10px 18px rgba(70, 88, 118, 0.085) !important;
}
html[data-theme="light"] body.page-music #music .playlist-item.active,
body[data-theme="light"].page-music #music .playlist-item.active {
  border-color: rgba(var(--music-cover-rgb), 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 22px rgba(67, 88, 120, 0.045) !important;
}
@media (max-width: 900px) {
  body.page-music #music .playlist {
    max-height: none !important;
  }
}
/* Music final adaptive theme suite: seven calm cover-derived palettes. */
body.page-music #music {
  --music-theme-a: 222, 241, 252;
  --music-theme-b: 237, 233, 252;
  --music-theme-c: 255, 228, 243;
  --music-theme-accent: 77, 142, 232;
  --music-theme-ink: 45, 54, 86;
  --music-theme-muted: 92, 95, 118;
  --music-theme-record: 134, 160, 181;
  --music-module-surface: rgba(255, 255, 255, 0.6);
  --music-module-line: rgba(255, 255, 255, 0.42);
}
body.page-music #music .music-player-container {
  isolation: isolate;
  overflow: hidden !important;
}
body.page-music #music .music-player-container::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  opacity: 0.5;
  background: linear-gradient(115deg, transparent 0%, rgba(var(--music-theme-a), 0.2) 24%, rgba(var(--music-theme-c), 0.18) 54%, rgba(var(--music-theme-b), 0.16) 78%, transparent 100%);
  filter: blur(24px);
  transform: rotate(-3deg);
  transition: background 0.65s ease, opacity 0.65s ease !important;
  pointer-events: none;
}
body.page-music #music .music-player-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(90deg, rgba(var(--music-theme-a), 0.08), transparent 28%, transparent 72%, rgba(var(--music-theme-c), 0.08));
  pointer-events: none;
}
body.page-music #music .playlist {
  padding: clamp(18px, 2vw, 28px) !important;
  max-height: min(610px, 66vh) !important;
  scrollbar-width: thin !important;
}
body.page-music #music .playlist::-webkit-scrollbar-track {
  margin: 16px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
body.page-music #music .playlist::-webkit-scrollbar-thumb {
  border-radius: 999px;
}
body.page-music #music .playlist-item {
  min-height: 94px !important;
  padding: 16px 20px !important;
  gap: 20px !important;
  border-radius: 20px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
body.page-music #music .playlist-item img {
  width: 74px !important;
  height: 74px !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 22px rgba(12, 18, 30, 0.12) !important;
}
body.page-music #music .player-info {
  margin-top: clamp(24px, 4vh, 42px) !important;
}
body.page-music #music .player-info h4.track-title-gradient,
body.page-music #music .playlist-item-info h5 {
  color: rgba(255, 250, 244, 0.94) !important;
  -webkit-text-fill-color: rgba(255, 250, 244, 0.94) !important;
  background: none !important;
  text-shadow: 0 8px 18px rgba(20, 18, 28, 0.14) !important;
}
body.page-music #music .player-meta p .artist-name-large,
body.page-music #music .playlist-item-info p {
  color: rgba(255, 250, 244, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 250, 244, 0.62) !important;
  font-weight: 760 !important;
  text-shadow: none !important;
}
body.page-music #music .playlist-item-info h5 {
  margin-bottom: 7px !important;
}
body.page-music #music .vinyl-record {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0 5%, transparent 5.4%),
    radial-gradient(circle at 50% 50%, rgba(var(--music-theme-record), 0.22) 0 31%, transparent 31.4%),
    repeating-radial-gradient(circle at 50% 50%, rgba(18, 18, 20, 0.96) 0 4px, rgba(34, 34, 36, 0.95) 5px 6px, rgba(16, 16, 18, 0.96) 7px 9px),
    conic-gradient(from 18deg, rgba(12, 12, 13, 0.96), rgba(42, 42, 44, 0.95), rgba(14, 14, 16, 0.96), rgba(var(--music-theme-record), 0.34), rgba(13, 13, 15, 0.96)) !important;
  box-shadow: 0 12px 24px rgba(10, 14, 22, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 30px rgba(0, 0, 0, 0.24) !important;
}
body.page-music #music .vinyl-label {
  box-shadow: 0 0 0 10px rgba(var(--music-theme-record), 0.12),
    0 12px 24px rgba(9, 12, 18, 0.14) !important;
}
body.page-music #music .control-btn {
  width: 54px !important;
  height: 54px !important;
  color: rgba(255, 246, 238, 0.82) !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.13), transparent 40%),
    rgba(18, 20, 26, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 8px 16px rgba(13, 18, 28, 0.1) !important;
  transition: transform 0.22s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}
body.page-music #music .control-btn:hover,
body.page-music #music .control-btn:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 20px rgba(13, 18, 28, 0.13) !important;
}
body.page-music #music .control-btn.play-btn {
  width: 74px !important;
  height: 74px !important;
  color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
body.page-music #music .like-btn i,
body.page-music #music .like-count {
  color: rgba(255, 78, 104, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 78, 104, 0.9) !important;
}
body.page-music #music .progress-bg {
  background: rgba(20, 22, 30, 0.2) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] body.page-music #music .playlist,
body[data-theme="light"].page-music #music .playlist {
  scrollbar-color: rgba(var(--music-theme-accent), 0.46) rgba(255, 255, 255, 0.34) !important;
}
html[data-theme="light"] body.page-music #music .playlist::-webkit-scrollbar-track,
body[data-theme="light"].page-music #music .playlist::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.36);
}
html[data-theme="light"] body.page-music #music .playlist::-webkit-scrollbar-thumb,
body[data-theme="light"].page-music #music .playlist::-webkit-scrollbar-thumb {
  border-color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(180deg, rgba(var(--music-theme-accent), 0.5), rgba(var(--music-theme-record), 0.38));
}
html[data-theme="light"] body.page-music #music .playlist-item,
body[data-theme="light"].page-music #music .playlist-item {
  color: rgba(var(--music-theme-ink), 0.94) !important;
}
html[data-theme="light"] body.page-music #music .player-info h4.track-title-gradient,
html[data-theme="light"] body.page-music #music .playlist-item-info h5,
body[data-theme="light"].page-music #music .player-info h4.track-title-gradient,
body[data-theme="light"].page-music #music .playlist-item-info h5 {
  color: rgba(var(--music-theme-ink), 0.98) !important;
  -webkit-text-fill-color: rgba(var(--music-theme-ink), 0.98) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="light"] body.page-music #music .player-meta p .artist-name-large,
html[data-theme="light"] body.page-music #music .playlist-item-info p,
body[data-theme="light"].page-music #music .player-meta p .artist-name-large,
body[data-theme="light"].page-music #music .playlist-item-info p {
  color: rgba(var(--music-theme-muted), 0.86) !important;
  -webkit-text-fill-color: rgba(var(--music-theme-muted), 0.86) !important;
}
html[data-theme="light"] body.page-music #music .vinyl-record,
body[data-theme="light"].page-music #music .vinyl-record {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92) 0 5%, transparent 5.4%),
    radial-gradient(circle at 50% 50%, rgba(var(--music-theme-record), 0.3) 0 31%, transparent 31.4%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 4px, rgba(var(--music-theme-record), 0.18) 5px 6px, rgba(255, 255, 255, 0.98) 7px 9px),
    conic-gradient(from 18deg, rgba(255, 255, 255, 0.98), rgba(var(--music-theme-record), 0.32), rgba(255, 255, 255, 0.98), rgba(var(--music-theme-record), 0.18), rgba(255, 255, 255, 0.98)) !important;
  box-shadow: 0 12px 24px rgba(70, 88, 118, 0.065),
    inset 0 0 0 1px rgba(150, 166, 190, 0.07),
    inset 0 -18px 34px rgba(var(--music-theme-record), 0.08) !important;
}
html[data-theme="light"] body.page-music #music .control-btn,
body[data-theme="light"].page-music #music .control-btn {
  color: rgba(var(--music-theme-ink), 0.72) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.96), transparent 40%),
    rgba(255, 255, 255, 0.48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 16px rgba(67, 88, 120, 0.045) !important;
}
html[data-theme="light"] body.page-music #music .control-btn.play-btn,
body[data-theme="light"].page-music #music .control-btn.play-btn {
  color: rgba(255, 255, 255, 0.98) !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, rgba(var(--music-theme-accent), 0.92), rgba(var(--music-theme-c), 0.82)) !important;
  box-shadow: 0 12px 24px rgba(var(--music-theme-accent), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}
html[data-theme="light"] body.page-music #music .player-controls .mode-btn,
body[data-theme="light"].page-music #music .player-controls .mode-btn {
  color: rgba(var(--music-theme-ink), 0.78) !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.96), transparent 40%),
    rgba(255, 255, 255, 0.52) !important;
}
html[data-theme="light"] body.page-music #music .progress-bg,
body[data-theme="light"].page-music #music .progress-bg {
  background: rgba(var(--music-theme-muted), 0.18) !important;
}
html[data-theme="light"] body.page-music #music .progress-fill,
body[data-theme="light"].page-music #music .progress-fill {
  background: linear-gradient(90deg, rgba(var(--music-theme-c), 0.9), rgba(var(--music-theme-accent), 0.78)) !important;
}
@media (max-width: 760px) {
  body.page-music #music .control-btn {
    width: 48px !important;
    height: 48px !important;
  }
  body.page-music #music .control-btn.play-btn {
    width: 64px !important;
    height: 64px !important;
  }
  body.page-music #music .playlist-item {
    min-height: 82px !important;
    padding: 12px 14px !important;
    gap: 14px !important;
  }
  body.page-music #music .playlist-item img {
    width: 60px !important;
    height: 60px !important;
  }
}
/* Music final micro-tuning: reference controls, cleaner needle and lighter shadows. */
body.page-music #music .tonearm-headshell,
body.page-music #music .cartridge {
  display: none !important;
}
body.page-music #music .mode-one {
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  pointer-events: none;
  transform: translate(-50%, -50%) !important;
}
body.page-music #music .mode-one[hidden] {
  display: none !important;
}
body.page-music #music .player-controls .mode-btn {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
  color: #1d4775 !important;
  border: 1px solid rgba(76, 126, 179, 0.28) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(224, 239, 255, 0.82)) !important;
  box-shadow: 0 14px 30px rgba(44, 66, 104, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
body.page-music #music .player-controls .mode-btn[data-mode="loop"] {
  color: #a12766 !important;
  border-color: rgba(195, 70, 134, 0.34) !important;
  background: linear-gradient(135deg, rgba(255, 229, 242, 0.98), rgba(230, 242, 255, 0.92)) !important;
}
body.page-music #music .player-controls .mode-btn[data-mode="shuffle"] {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  background: linear-gradient(135deg, #2c72bb, #c86fa6) !important;
}
body.page-music #music .like-btn {
  position: absolute !important;
  left: calc(50% + 190px) !important;
  bottom: 52px !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  color: #ff4757 !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 12px 24px rgba(255, 71, 87, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
body.page-music #music .like-btn:hover {
  transform: translateX(-50%) scale(1.05) !important;
}
body.page-music #music .like-btn i {
  font-size: 24px !important;
  color: #ff4757 !important;
  -webkit-text-fill-color: #ff4757 !important;
}
body.page-music #music .like-count {
  position: absolute !important;
  top: 2px !important;
  left: 56% !important;
  min-width: max-content !important;
  color: #ff4757 !important;
  -webkit-text-fill-color: #ff4757 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 10px rgba(255, 71, 87, 0.26) !important;
}
html[data-theme="dark"] body.page-music #music #prevBtn,
html[data-theme="dark"] body.page-music #music #nextBtn,
html:not([data-theme]) body:not([data-theme="light"]).page-music #music #prevBtn,
html:not([data-theme]) body:not([data-theme="light"]).page-music #music #nextBtn,
body[data-theme="dark"].page-music #music #prevBtn,
body[data-theme="dark"].page-music #music #nextBtn {
  color: rgba(255, 250, 242, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.page-music #music #prevBtn:hover,
html[data-theme="dark"] body.page-music #music #nextBtn:hover,
html[data-theme="dark"] body.page-music #music #prevBtn:focus-visible,
html[data-theme="dark"] body.page-music #music #nextBtn:focus-visible,
html:not([data-theme]) body:not([data-theme="light"]).page-music #music #prevBtn:hover,
html:not([data-theme]) body:not([data-theme="light"]).page-music #music #nextBtn:hover,
html:not([data-theme]) body:not([data-theme="light"]).page-music #music #prevBtn:focus-visible,
html:not([data-theme]) body:not([data-theme="light"]).page-music #music #nextBtn:focus-visible,
body[data-theme="dark"].page-music #music #prevBtn:hover,
body[data-theme="dark"].page-music #music #nextBtn:hover,
body[data-theme="dark"].page-music #music #prevBtn:focus-visible,
body[data-theme="dark"].page-music #music #nextBtn:focus-visible {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}
body.page-music #music .playlist {
  scrollbar-color: rgba(var(--music-theme-muted), 0.46) rgba(255, 255, 255, 0.12) !important;
}
body.page-music #music .playlist::-webkit-scrollbar {
  width: 8px;
}
body.page-music #music .playlist::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(var(--music-theme-muted), 0.54);
}
body.page-music #music .playlist-item.active {
  background: linear-gradient(135deg, rgba(var(--music-theme-c), 0.26), rgba(var(--music-theme-a), 0.18)),
    rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="light"] body.page-music #music .playlist-item.active,
body[data-theme="light"].page-music #music .playlist-item.active {
  background: linear-gradient(135deg, rgba(var(--music-theme-c), 0.38), rgba(var(--music-theme-a), 0.3)),
    rgba(255, 255, 255, 0.42) !important;
}
body.page-music #music .music-player-container,
body.page-music #music .player-main,
body.page-music #music .playlist,
body.page-music #music .playlist-item,
body.page-music #music .control-btn,
body.page-music #music .progress-fill {
  transition: background 0.55s ease,
    border-color 0.55s ease,
    box-shadow 0.55s ease,
    color 0.35s ease !important;
}
html[data-theme="light"] body.page-music #music .music-player-container,
body[data-theme="light"].page-music #music .music-player-container {
  border-color: rgba(var(--music-theme-accent), 0.22) !important;
}
html[data-theme="light"] body.page-music #music .player-main,
html[data-theme="light"] body.page-music #music .playlist,
body[data-theme="light"].page-music #music .player-main,
body[data-theme="light"].page-music #music .playlist {
  border-color: rgba(var(--music-theme-accent), 0.2) !important;
  box-shadow: 0 18px 48px rgba(var(--music-theme-record), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34) !important;
}
html[data-theme="light"] body.page-music #music .playlist-item,
body[data-theme="light"].page-music #music .playlist-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(var(--music-theme-b), 0.22)) !important;
  border-color: rgba(var(--music-theme-accent), 0.12) !important;
}
html[data-theme="light"] body.page-music #music .playlist-item:hover,
html[data-theme="light"] body.page-music #music .playlist-item.active,
body[data-theme="light"].page-music #music .playlist-item:hover,
body[data-theme="light"].page-music #music .playlist-item.active {
  background: radial-gradient(ellipse at 16% 20%, rgba(255, 255, 255, 0.72) 0%, transparent 46%),
    linear-gradient(135deg, rgba(var(--music-theme-c), 0.54), rgba(var(--music-theme-a), 0.5)),
    rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(var(--music-theme-accent), 0.26) !important;
  box-shadow: 0 14px 32px rgba(var(--music-theme-record), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
@media (max-width: 560px) {
  body.page-music #music .like-btn {
    left: calc(50% + 150px) !important;
    bottom: 54px !important;
    width: 42px !important;
    height: 42px !important;
  }
  body.page-music #music .like-count {
    top: 1px !important;
    left: 54% !important;
    font-size: 12px !important;
  }
}
/* 2026-06-08 homepage and profile light-theme refinement */
[data-theme="light"] body.page-home #home .hero-title-cn {
  background: linear-gradient(102deg, #0b3970 0%, #b62e72 34%, #493179 66%, #08708c 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78),
    0 -1px 0 rgba(255, 255, 255, 0.34),
    0 12px 26px rgba(20, 42, 82, 0.2) !important;
}
[data-theme="light"] body.page-home #home .hero-title-en {
  color: #4e456f !important;
  -webkit-text-fill-color: #4e456f !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 18px rgba(78, 69, 111, 0.14) !important;
}
[data-theme="light"] body.page-home #home .hero-gift {
  max-width: 640px;
  margin: 2px 0 18px;
  color: rgba(12, 18, 30, 0.9) !important;
  -webkit-text-fill-color: rgba(12, 18, 30, 0.9) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 760;
  line-height: 1.72;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-home #home .lead {
  max-width: 640px;
  margin-top: 0;
  margin-bottom: 8px;
  color: rgba(12, 18, 30, 0.9) !important;
  -webkit-text-fill-color: rgba(12, 18, 30, 0.9) !important;
  font-weight: 760;
  line-height: 1.86;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] body.page-home #home .hero-copy > p:not(.hero-gift):not(.lead) {
  max-width: 640px;
  color: rgba(12, 18, 30, 0.82) !important;
  -webkit-text-fill-color: rgba(12, 18, 30, 0.82) !important;
  line-height: 1.9;
}
[data-theme="light"] #profile .profile-name,
[data-theme="light"] #profile .profile-name .name-cn {
  color: rgba(58, 48, 82, 0.55) !important;
  -webkit-text-fill-color: rgba(58, 48, 82, 0.55) !important;
  text-shadow: none !important;
}
[data-theme="light"] #profile .profile-name span:not(.name-cn) {
  text-shadow: none !important;
}
/* Keep the light-theme profile title visually unified. */
[data-theme="light"] #profile .profile-name,
[data-theme="light"] #profile .profile-name .name-cn,
[data-theme="light"] #profile .profile-name span {
  color: #47365f !important;
  -webkit-text-fill-color: #47365f !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  opacity: 1 !important;
  animation: none !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgba(71, 54, 95, 0.18) !important;
}
[data-theme="light"] #profile .profile-name span:not(.name-cn) {
  color: #47365f !important;
  -webkit-text-fill-color: #47365f !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  opacity: 1 !important;
}
/* 2026-06-08 gallery lightbox glass cleanup */
.lightbox.open {
  padding: clamp(18px, 3vw, 34px) !important;
}
.lightbox-content {
  display: inline-grid !important;
  justify-items: center !important;
  width: fit-content !important;
  max-width: min(94vw, 1220px) !important;
  max-height: 92vh !important;
  gap: 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.lightbox-media-frame {
  isolation: isolate !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.lightbox-media-frame::before {
  inset: 0 !important;
  z-index: -1 !important;
  border: 0 !important;
  background: radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.5), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(172, 216, 242, 0.32), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(217, 166, 174, 0.28), transparent 34%) !important;
  filter: blur(22px) saturate(1.12) !important;
  opacity: 0.56 !important;
  transform: scale(1.018) !important;
}
.lightbox-media-frame::after {
  inset: 0 !important;
  z-index: 2 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 18%, transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%, rgba(255, 255, 255, 0.08)),
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.24), transparent 24%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
  mix-blend-mode: screen !important;
  opacity: 0.54 !important;
}
.lightbox .lightbox-media-frame img,
.lightbox-media-frame img,
#lightboxImage {
  max-width: min(92vw, 1180px) !important;
  max-height: 82vh !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  filter: brightness(1.08) contrast(1.045) saturate(1.06) !important;
  box-shadow: 0 30px 96px rgba(33, 48, 78, 0.28),
    0 0 74px rgba(255, 255, 255, 0.2),
    0 0 52px rgba(170, 213, 236, 0.14) !important;
}
.lightbox-media-frame.is-landscape #lightboxImage {
  width: min(88vw, 1180px) !important;
  height: auto !important;
}
.lightbox-media-frame.is-portrait #lightboxImage {
  width: auto !important;
  height: min(82vh, 980px) !important;
}
.lightbox-media-frame.is-square #lightboxImage {
  width: min(78vh, 86vw, 920px) !important;
  height: auto !important;
}
.lightbox-caption,
#lightboxCaption {
  width: fit-content !important;
  margin: 0 !important;
  padding: 12px 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.74), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(229, 240, 248, 0.2)),
    rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 16px 42px rgba(54, 76, 112, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
}
@media (max-width: 900px) {
  .lightbox-content {
    max-width: 94vw !important;
  }
  .lightbox-media-frame.is-landscape #lightboxImage {
    width: 92vw !important;
    max-height: 74vh !important;
  }
  .lightbox-media-frame.is-portrait #lightboxImage {
    height: 74vh !important;
    max-width: 92vw !important;
  }
}
/* 2026-06-08 gallery lightbox no-frame follow-up */
.lightbox.open .lightbox-content {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  height: fit-content !important;
  max-width: 92vw !important;
  max-height: 82vh !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.lightbox.open .lightbox-media-frame {
  display: block !important;
  width: fit-content !important;
  height: fit-content !important;
  max-width: 92vw !important;
  max-height: 82vh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.lightbox.open .lightbox-media-frame:not(.particle-running)::before,
.lightbox.open .lightbox-media-frame:not(.particle-running)::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}
.lightbox.open #lightboxImage {
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}
.lightbox.open .lightbox-caption,
.lightbox.open #lightboxCaption {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: clamp(12px, 2.2vh, 24px) !important;
  top: auto !important;
  z-index: 8 !important;
  width: max-content !important;
  max-width: min(70vw, 520px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  line-height: 1.35 !important;
  pointer-events: none !important;
}
/* 2026-06-08 lightbox airy color and intrinsic photo sizing */
.lightbox.open {
  background: radial-gradient(ellipse 62% 58% at 16% 38%, rgba(255, 229, 242, 0.48), transparent 62%),
    radial-gradient(ellipse 58% 54% at 84% 38%, rgba(214, 240, 255, 0.62), transparent 64%),
    radial-gradient(ellipse 48% 40% at 52% 18%, rgba(255, 255, 255, 0.44), transparent 58%),
    radial-gradient(ellipse 54% 36% at 50% 86%, rgba(210, 235, 255, 0.5), transparent 62%),
    linear-gradient(135deg, rgba(252, 247, 255, 0.94), rgba(232, 247, 255, 0.92) 46%, rgba(255, 238, 246, 0.88)) !important;
  backdrop-filter: blur(18px) saturate(1.28) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.28) brightness(1.08) !important;
  box-shadow: inset 0 0 120px rgba(255, 255, 255, 0.32),
    inset 0 0 220px rgba(160, 210, 244, 0.14) !important;
}
.lightbox.open #lightboxImage,
.lightbox.open .lightbox-media-frame.is-landscape #lightboxImage,
.lightbox.open .lightbox-media-frame.is-portrait #lightboxImage,
.lightbox.open .lightbox-media-frame.is-square #lightboxImage {
  width: auto !important;
  height: auto !important;
  max-width: min(86vw, 1260px) !important;
  max-height: 82vh !important;
  object-fit: contain !important;
  background-color: transparent !important;
}
.lightbox.open .lightbox-media-frame,
.lightbox.open .lightbox-content {
  min-width: 0 !important;
  min-height: 0 !important;
}
.lightbox.open #lightboxImage {
  border-radius: 6px !important;
  box-shadow: 0 30px 86px rgba(62, 88, 128, 0.18),
    0 0 46px rgba(255, 255, 255, 0.22) !important;
}
.lightbox.open .lightbox-caption,
.lightbox.open #lightboxCaption {
  background: radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.78), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(239, 247, 255, 0.24)),
    rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 14px 34px rgba(80, 104, 138, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2) !important;
}
/* 2026-06-08 restore particle fullscreen after no-frame lightbox pass */
body.particle-fullscreen-active .lightbox.open {
  padding: 0 !important;
  place-items: stretch !important;
  background: radial-gradient(ellipse 80% 50% at 12% 8%, rgba(217, 166, 174, 0.38), transparent 50%),
    radial-gradient(ellipse 60% 40% at 82% 22%, rgba(159, 197, 199, 0.3), transparent 45%),
    radial-gradient(ellipse 70% 45% at 54% 92%, rgba(200, 167, 104, 0.22), transparent 40%),
    radial-gradient(ellipse 50% 30% at 30% 50%, rgba(155, 145, 200, 0.15), transparent 35%),
    linear-gradient(145deg, #151827 0%, #1e2438 40%, #2a3050 70%, #3d3a55 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.particle-fullscreen-active .lightbox.open .lightbox-content {
  display: contents !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.particle-fullscreen-active .lightbox.open .lightbox-media-frame {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
body.particle-fullscreen-active .lightbox.open .lightbox-media-frame::before,
body.particle-fullscreen-active .lightbox.open .lightbox-media-frame::after {
  content: none !important;
  display: none !important;
}
body.particle-fullscreen-active #imageParticleCanvas,
body.particle-fullscreen-active #imageParticleCanvas.show {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  opacity: 1;
  pointer-events: none !important;
}
body.particle-fullscreen-active #lightboxImage,
body.particle-fullscreen-active #lightboxImage.particle-source-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.particle-fullscreen-active .camera-gesture-text {
  position: fixed !important;
  left: 50% !important;
  top: 30px !important;
  bottom: auto !important;
  z-index: 220 !important;
  width: auto !important;
  max-width: min(86vw, 980px) !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: none !important;
}
body.particle-fullscreen-active .gesture-hints {
  position: fixed !important;
  left: max(24px, 3vw) !important;
  top: 26px !important;
  z-index: 230 !important;
}
body.particle-fullscreen-active .particle-shape-controls {
  position: fixed !important;
  left: 50% !important;
  bottom: 96px !important;
  top: auto !important;
  z-index: 230 !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}
body.particle-fullscreen-active .particle-burst-trigger {
  position: fixed !important;
  right: max(24px, 3vw) !important;
  top: 24px !important;
  bottom: auto !important;
  z-index: 230 !important;
  pointer-events: auto !important;
}
body.particle-fullscreen-active .lightbox-nav,
body.particle-fullscreen-active .lightbox-close,
body.particle-fullscreen-active .lightbox-caption,
body.particle-fullscreen-active #lightboxCaption,
body.particle-fullscreen-active .camera-particle-trigger {
  display: none !important;
}
/* 2026-06-08 particle HUD polish */
body.particle-fullscreen-active .gesture-hints,
body.particle-fullscreen-active .gesture-hints.is-visible {
  position: fixed !important;
  left: clamp(22px, 2.4vw, 42px) !important;
  top: clamp(18px, 2.4vh, 34px) !important;
  z-index: 260 !important;
  display: grid !important;
  gap: 6px !important;
  max-width: min(360px, 34vw) !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(149, 210, 246, 0.22) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(18, 24, 42, 0.66), rgba(16, 20, 34, 0.36)),
    rgba(12, 16, 30, 0.42) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(16px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
  opacity: 0.92 !important;
  pointer-events: none !important;
}
body.particle-fullscreen-active .gesture-hint-item {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(122, 222, 255, 0.94) !important;
  font-size: clamp(11px, 0.78vw, 13px) !important;
  font-weight: 750 !important;
  line-height: 1.28 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 0 12px rgba(0, 204, 255, 0.42) !important;
}
body.particle-fullscreen-active .camera-gesture-text,
body.particle-fullscreen-active .camera-gesture-text.is-visible {
  left: 50% !important;
  top: clamp(76px, 10vh, 112px) !important;
  bottom: auto !important;
  z-index: 250 !important;
  display: grid !important;
  gap: 3px !important;
  width: max-content !important;
  max-width: min(760px, 72vw) !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(122, 222, 255, 0.2) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(19, 26, 44, 0.5), rgba(18, 22, 36, 0.22)),
    rgba(10, 14, 26, 0.28) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.16) !important;
  transform: translateX(-50%) !important;
  opacity: 0.86 !important;
}
body.particle-fullscreen-active .camera-gesture-text .gesture-text-cn,
body.particle-fullscreen-active .camera-gesture-text .gesture-text-en {
  margin: 0 !important;
  color: rgba(74, 213, 255, 0.95) !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-shadow: 0 0 14px rgba(0, 204, 255, 0.44) !important;
}
body.particle-fullscreen-active .camera-gesture-text .gesture-text-cn {
  font-size: clamp(15px, 1.22vw, 22px) !important;
  font-weight: 900 !important;
}
body.particle-fullscreen-active .camera-gesture-text .gesture-text-en {
  font-size: clamp(12px, 0.94vw, 17px) !important;
  font-weight: 760 !important;
  opacity: 0.9 !important;
}
body.particle-fullscreen-active .particle-shape-controls,
body.particle-fullscreen-active .particle-shape-controls.is-visible {
  left: 50% !important;
  bottom: clamp(30px, 5.2vh, 64px) !important;
  z-index: 260 !important;
  gap: 6px !important;
  padding: 6px !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)),
    rgba(18, 24, 42, 0.28) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateX(-50%) !important;
}
body.particle-fullscreen-active .lightbox .particle-shape-controls button,
body.particle-fullscreen-active .particle-shape-controls button {
  min-width: 74px !important;
  height: 32px !important;
  padding: 0 14px !important;
  color: rgba(245, 252, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}
/* 点亮板块：城市索引与同步 marker 的最终覆盖 */
[data-theme="light"] #resonance .map-tags,
[data-theme="dark"] #resonance .map-tags {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(245, 250, 255, 0.62)),
    rgba(255, 255, 255, 0.18);
  scroll-snap-type: x proximity;
}
[data-theme="light"] #resonance .map-tag,
[data-theme="dark"] #resonance .map-tag {
  position: relative;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px 0 11px;
  border: 1px solid rgba(31, 97, 158, 0.16);
  border-radius: 999px;
  color: #245782 !important;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 750;
  scroll-snap-align: start;
}
[data-theme="light"] #resonance .map-tag i,
[data-theme="dark"] #resonance .map-tag i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #2a6fac !important;
  background: rgba(42, 111, 172, 0.1);
  font-size: 10px;
}
[data-theme="light"] #resonance .map-tag:hover,
[data-theme="dark"] #resonance .map-tag:hover {
  border-color: rgba(31, 97, 158, 0.28);
  background: rgba(255, 255, 255, 0.94);
  transform: translateY(-1px);
}
[data-theme="light"] #resonance .map-tag.is-selected,
[data-theme="dark"] #resonance .map-tag.is-selected {
  border-color: rgba(201, 156, 72, 0.52);
  color: #183a5a !important;
  background: linear-gradient(135deg, rgba(255, 248, 224, 0.96), rgba(235, 247, 255, 0.94));
  box-shadow: inset 4px 0 0 rgba(201, 156, 72, 0.72), 0 8px 22px rgba(42, 111, 172, 0.14);
}
[data-theme="light"] #resonance .map-tag.is-selected i,
[data-theme="dark"] #resonance .map-tag.is-selected i {
  color: #8a6420 !important;
  background: rgba(201, 156, 72, 0.16);
}
[data-theme="light"] #resonance .latest-city,
[data-theme="dark"] #resonance .latest-city {
  padding-right: 10px;
  border-color: rgba(201, 156, 72, 0.34);
  color: #183a5a !important;
  background: linear-gradient(135deg, rgba(255, 248, 224, 0.96), rgba(255, 255, 255, 0.78));
  box-shadow: 0 8px 18px rgba(201, 156, 72, 0.12);
  animation: none;
}
[data-theme="light"] #resonance .latest-city span,
[data-theme="dark"] #resonance .latest-city span {
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #805f1a !important;
  background: rgba(201, 156, 72, 0.16);
  font-size: 10px;
}
[data-theme="light"] #resonance .map-stats,
[data-theme="dark"] #resonance .map-stats {
  grid-template-columns: minmax(0, 1.08fr) minmax(190px, 0.92fr);
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(31, 97, 158, 0.1);
  background: rgba(255, 255, 255, 0.2);
}
[data-theme="light"] #resonance .stat-box,
[data-theme="dark"] #resonance .stat-box {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(31, 97, 158, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.52);
}
[data-theme="light"] #resonance .stat-box-content,
[data-theme="dark"] #resonance .stat-box-content {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  max-height: 88px;
  overflow: auto;
  line-height: 1.45;
}
[data-theme="light"] #resonance .her-footprint-marker,
[data-theme="dark"] #resonance .her-footprint-marker {
  border: 2px solid rgba(255, 255, 255, 0.96);
  color: #fff7df !important;
  background: linear-gradient(135deg, #c59a48, #7f5c23);
  box-shadow: 0 7px 18px rgba(47, 38, 18, 0.28), 0 0 0 7px rgba(197, 154, 72, 0.16);
}
[data-theme="light"] #resonance .her-footprint-marker i,
[data-theme="dark"] #resonance .her-footprint-marker i {
  color: #fff7df !important;
}
[data-theme="light"] #resonance .latest-marker,
[data-theme="dark"] #resonance .latest-marker {
  color: #b98313 !important;
  filter: drop-shadow(0 4px 10px rgba(185, 131, 19, 0.32));
}
[data-theme="light"] #resonance .latest-marker i,
[data-theme="dark"] #resonance .latest-marker i {
  color: #b98313 !important;
}
[data-theme="light"] #resonance .fan-light-marker,
[data-theme="dark"] #resonance .fan-light-marker {
  border: 2px solid rgba(255, 255, 255, 0.96);
  color: #17324d !important;
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.92) 0 17%, transparent 18%),
    linear-gradient(135deg, #d8eef7, #9bc6de 48%, #c79ab5);
  box-shadow: 0 7px 18px rgba(42, 111, 172, 0.2), 0 0 0 7px rgba(42, 111, 172, 0.1);
  font-size: 10px;
}
[data-theme="light"] #resonance .fan-light-marker.is-selected,
[data-theme="dark"] #resonance .fan-light-marker.is-selected {
  color: #183a5a !important;
  box-shadow: 0 0 0 9px rgba(201, 156, 72, 0.2), 0 0 30px rgba(42, 111, 172, 0.28);
}
/* 首页星形拓扑：默认显示，轻盈化控制按钮 */
[data-theme="light"] body.page-home #topologyCanvas,
[data-theme="dark"] body.page-home #topologyCanvas {
  display: block !important;
  opacity: 0.38 !important;
  pointer-events: auto !important;
  filter: contrast(1.02)
    saturate(0.9)
    drop-shadow(0 0 10px rgba(125, 175, 232, 0.08)) !important;
}
[data-theme="dark"] body.page-home #topologyCanvas {
  opacity: 0.52 !important;
}
body.page-home #topologyCanvas[hidden] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.page-home .topology-toggle {
  width: 42px;
  height: 42px;
  border-color: rgba(201, 156, 72, 0.28);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 22px rgba(35, 48, 72, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
body.page-home .topology-toggle svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 4px rgba(201, 156, 72, 0.38));
  transition: transform 0.18s ease, filter 0.18s ease;
}
body.page-home .topology-toggle:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(201, 156, 72, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 26px rgba(35, 48, 72, 0.16);
}
body.page-home .topology-toggle:active {
  transform: translateY(0) scale(0.98);
}
/* 2026-06-08 final light social chip separation: no overlap on narrow cards. */
[data-theme="light"] #social .social-card-footer {
  display: grid !important;
  grid-template-columns: minmax(112px, 128px) minmax(0, 1fr) !important;
  column-gap: 22px !important;
  row-gap: 12px !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: 100% !important;
  overflow: visible !important;
}
[data-theme="light"] #social .social-card a.social-action,
[data-theme="light"] #social .social-card span.social-action,
[data-theme="light"] #social .social-action {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 128px !important;
  flex: none !important;
  margin: 0 !important;
  padding-inline: 14px !important;
  transform: none !important;
}
[data-theme="light"] #social .social-tags {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}
[data-theme="light"] #social .social-card .social-card-footer .social-tags .tag,
[data-theme="light"] #social .social-card:nth-child(3) .social-card-footer .social-tags .tag {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-inline: 18px !important;
  transform: none !important;
}
@media (max-width: 560px) {
  [data-theme="light"] #social .social-card-footer {
    grid-template-columns: 1fr !important;
  }
  [data-theme="light"] #social .social-card a.social-action,
  [data-theme="light"] #social .social-card span.social-action,
  [data-theme="light"] #social .social-action,
  [data-theme="light"] #social .social-tags {
    grid-column: 1 !important;
    max-width: none !important;
  }
  [data-theme="light"] #social .social-tags {
    justify-content: stretch !important;
  }
  [data-theme="light"] #social .social-card .social-card-footer .social-tags .tag {
    width: 100% !important;
  }
}
/* 2026-06-08 final social-card header alignment. */
#social .social-card {
  position: relative !important;
  padding: 34px 30px 30px !important;
}
#social .social-app-mark {
  top: 24px !important;
  right: 24px !important;
  width: clamp(78px, 6.4vw, 96px) !important;
  height: clamp(78px, 6.4vw, 96px) !important;
}
#social .social-card h3 {
  display: block !important;
  max-width: calc(100% - 136px) !important;
  margin: 0 0 10px !important;
  line-height: 1.12 !important;
}
#social .social-card strong {
  display: block !important;
  width: fit-content !important;
  max-width: calc(100% - 136px) !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#social .social-card p {
  clear: both !important;
  margin-top: 0 !important;
}
[data-theme="light"] #social .social-card strong {
  color: #121722 !important;
  -webkit-text-fill-color: #121722 !important;
}
@media (max-width: 900px) {
  #social .social-card h3,
  #social .social-card strong {
    max-width: calc(100% - 112px) !important;
  }
  #social .social-app-mark {
    width: 78px !important;
    height: 78px !important;
  }
}
@media (max-width: 560px) {
  #social .social-card h3,
  #social .social-card strong {
    max-width: calc(100% - 90px) !important;
  }
  #social .social-card strong {
    margin-bottom: 24px !important;
  }
  #social .social-app-mark {
    top: 18px !important;
    right: 18px !important;
    width: 62px !important;
    height: 62px !important;
  }
}
/* 2026-06-08 final social-card rhythm: align account, divider, body, and chips. */
#social .social-card {
  display: grid !important;
  grid-template-rows: 48px 58px minmax(136px, 1fr) 48px !important;
  row-gap: 0 !important;
  min-height: 410px !important;
}
#social .social-card h3 {
  grid-row: 1 !important;
  align-self: start !important;
}
#social .social-card strong {
  grid-row: 2 !important;
  align-self: start !important;
  margin: 0 !important;
  min-height: 0 !important;
}
#social .social-card p {
  grid-row: 3 !important;
  align-self: start !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  text-indent: 2em !important;
  text-align: justify !important;
  text-align-last: left !important;
}
#social .social-card-footer {
  grid-row: 4 !important;
  align-self: end !important;
  margin: 0 !important;
}
[data-theme="light"] #social .social-card p {
  border-top-color: rgba(76, 111, 150, 0.16) !important;
}
@media (max-width: 900px) {
  #social .social-card {
    grid-template-rows: 44px 64px minmax(132px, 1fr) 48px !important;
    min-height: 410px !important;
  }
}
@media (max-width: 560px) {
  #social .social-card {
    grid-template-rows: auto auto auto auto !important;
    row-gap: 18px !important;
    min-height: auto !important;
  }
  #social .social-card p {
    padding-top: 18px !important;
  }
}
/* 2026-06-08 light social lit state: make the action react with the avatar. */
[data-theme="light"] #social .social-card.is-lit .social-app-mark,
[data-theme="light"] #social .social-card.breathe-active .social-app-mark,
[data-theme="light"] #social .social-card.breathe-simultaneous .social-app-mark {
  filter: saturate(1.04) contrast(1.01) drop-shadow(0 0 12px rgba(0, 204, 255, 0.25)) drop-shadow(0 0 24px rgba(0, 204, 255, 0.1)) !important;
}
[data-theme="light"] #social .social-card.is-lit .social-action,
[data-theme="light"] #social .social-card.breathe-active .social-action,
[data-theme="light"] #social .social-card.breathe-simultaneous .social-action {
  color: #0088aa !important;
  -webkit-text-fill-color: #0088aa !important;
  border-color: rgba(0, 204, 255, 0.4) !important;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), transparent 45%),
    linear-gradient(135deg, rgba(200, 240, 255, 0.85), rgba(220, 248, 255, 0.75)) !important;
  box-shadow: 0 8px 20px rgba(0, 204, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.85) inset,
    0 0 18px rgba(0, 204, 255, 0.1) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-shadow: none !important;
}
[data-theme="light"] #social .social-card.is-lit .social-action:hover {
  border-color: rgba(184, 52, 118, 0.44) !important;
  color: #a12766 !important;
  -webkit-text-fill-color: #a12766 !important;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98), transparent 38%),
    linear-gradient(135deg, rgba(255, 228, 242, 0.96), rgba(255, 247, 252, 0.92)) !important;
}
/* 2026-06-08 default dark social chips: match light-theme border visibility. */
html:not([data-theme="light"]) #social .social-card-footer {
  display: grid !important;
  grid-template-columns: minmax(112px, 128px) minmax(0, 1fr) !important;
  column-gap: 22px !important;
  row-gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  overflow: hidden !important;
}
html:not([data-theme="light"]) #social .social-card a.social-action,
html:not([data-theme="light"]) #social .social-card span.social-action,
html:not([data-theme="light"]) #social .social-action {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 128px !important;
  padding-inline: 14px !important;
  transform: none !important;
  border: 1px solid rgba(255, 239, 200, 0.52) !important;
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
}
html:not([data-theme="light"]) #social .social-card a.social-action:hover {
  border-color: rgba(255, 239, 200, 0.82) !important;
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.22), transparent 45%),
    linear-gradient(135deg, rgba(232, 185, 102, 0.22), rgba(255, 255, 255, 0.08)) !important;
}
html:not([data-theme="light"]) #social .social-tags {
  grid-column: 2 !important;
  justify-self: start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}
html:not([data-theme="light"]) #social .social-card .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) #social .social-card:nth-child(3) .social-card-footer .social-tags .tag {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-inline: 18px !important;
  transform: none !important;
  border: 1px solid rgba(0, 204, 255, 0.48) !important;
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.14), transparent 45%),
    linear-gradient(135deg, rgba(0, 204, 255, 0.13), rgba(255, 255, 255, 0.05)) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 8px 18px rgba(0, 204, 255, 0.08) !important;
}
html:not([data-theme="light"]) #social .social-card:nth-child(3) .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) #social .social-card:nth-child(6) .social-card-footer .social-tags .tag {
  padding-inline: 18px !important;
  font-size: 16px !important;
}
@media (max-width: 560px) {
  html:not([data-theme="light"]) #social .social-card-footer {
    grid-template-columns: 1fr !important;
  }
  html:not([data-theme="light"]) #social .social-card a.social-action,
  html:not([data-theme="light"]) #social .social-card span.social-action,
  html:not([data-theme="light"]) #social .social-action,
  html:not([data-theme="light"]) #social .social-tags {
    grid-column: 1 !important;
    max-width: none !important;
  }
}
/* 2026-06-08 works light final polish. */
[data-theme="light"] #works #worksSummary h2 {
  color: #513d70 !important;
  -webkit-text-fill-color: #513d70 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-size: clamp(36px, 4.2vw, 64px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 14px 34px rgba(81, 61, 112, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] #works #worksSummary .eyebrow {
  color: #513d70 !important;
  -webkit-text-fill-color: #513d70 !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}
[data-theme="light"] #works #worksSummary .eyebrow::before,
[data-theme="light"] #works #worksSummary .eyebrow::after {
  background: linear-gradient(90deg, transparent, rgba(232,185,102,0.72)) !important;
}
[data-theme="light"] #works .source-direct-link {
  color: #00CCFF !important;
  -webkit-text-fill-color: #00CCFF !important;
  font-weight: 900 !important;
  text-shadow: 0 0 18px rgba(0, 204, 255, 0.18) !important;
}
[data-theme="light"] #works .stat-number {
  color: #00CCFF !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #00CCFF 0%, #1697ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 12px rgba(0, 204, 255, 0.3)) !important;
  text-shadow: none !important;
}
[data-theme="light"] #works .stat-label {
  color: #111722 !important;
  -webkit-text-fill-color: #111722 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
[data-theme="light"] #works .stat-divider {
  background: linear-gradient(to bottom, transparent, rgba(0, 204, 255, 0.72), transparent) !important;
  box-shadow: 0 0 18px rgba(0, 204, 255, 0.22) !important;
}
[data-theme="light"] #works .work-card,
[data-theme="light"] #works .work-card.work-card-lead {
  min-height: 0 !important;
  padding: 28px 32px 26px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(247, 251, 255, 0.58)),
    linear-gradient(135deg, rgba(220, 238, 255, 0.28), rgba(251, 227, 238, 0.2)) !important;
}
[data-theme="light"] #works .work-summary {
  align-items: center !important;
}
[data-theme="light"] #works .work-card h3 {
  margin-bottom: 10px !important;
}
[data-theme="light"] #works .work-meta {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  gap: 8px !important;
  align-items: center !important;
}
[data-theme="light"] #works .work-card .tag,
[data-theme="light"] #works .work-entry-meta span {
  min-height: 0 !important;
  padding: 3px 6px !important;
  color: #0c65ad !important;
  -webkit-text-fill-color: #0c65ad !important;
  border-color: rgba(0, 204, 255, 0.34) !important;
  background: rgba(220, 245, 255, 0.7) !important;
  line-height: 1.35 !important;
}
[data-theme="light"] #works .work-card .lead-role-tag {
  color: #d2297d !important;
  -webkit-text-fill-color: #d2297d !important;
  border-color: rgba(210, 41, 125, 0.24) !important;
  background: rgba(255, 228, 242, 0.78) !important;
}
[data-theme="light"] #works .work-meta-separator {
  color: #00CCFF !important;
  -webkit-text-fill-color: #00CCFF !important;
  margin: 0 8px !important;
  font-weight: 800 !important;
}
[data-theme="light"] #works .work-toggle-mark {
  border-color: rgba(255, 255, 255, 0.52) !important;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.52), transparent 32%),
    rgba(0, 204, 255, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 0 14px rgba(0, 204, 255, 0.1) !important;
}
[data-theme="light"] #works .work-toggle-mark::before,
[data-theme="light"] #works .work-toggle-mark::after,
[data-theme="light"] #works .work-card.open .work-toggle-mark::before,
[data-theme="light"] #works .work-card.open .work-toggle-mark::after {
  background: rgba(0, 204, 255, 0.68) !important;
}
[data-theme="light"] #works .timeline::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.48) 8%,
    rgba(255, 255, 255, 0.48) 92%,
    transparent
  ) !important;
}
[data-theme="light"] #works .work-card::before {
  background: rgba(255,255,255,0.54) !important;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.06),
    0 0 12px rgba(255,255,255,0.08) !important;
}
[data-theme="light"] #works .work-card-lead::after {
  background: radial-gradient(circle at 0 0,
      rgba(224, 249, 255, 0.78) 0%,
      rgba(0, 204, 255, 0.42) 24%,
      rgba(0, 151, 255, 0.18) 46%,
      transparent 68%),
    conic-gradient(from 0deg at 0 0,
      rgba(224, 249, 255, 0.62) 0deg,
      rgba(0, 204, 255, 0.34) 30deg,
      rgba(0, 151, 255, 0.12) 58deg,
      transparent 82deg) !important;
}
/* 2026-06-08 align works light cards with audio gallery cards. */
[data-theme="light"] #works #worksSummary,
[data-theme="light"] #works .works-stats,
[data-theme="light"] #works .work-card,
[data-theme="light"] #works .work-card.work-card-lead,
[data-theme="light"] #works .works-overview-card {
  background: radial-gradient(circle at 0% 0%, rgba(255, 232, 242, 0.42), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 247, 255, 0.94)) !important;
  border-color: rgba(69, 103, 151, 0.3) !important;
  box-shadow: 0 24px 70px rgba(26, 86, 160, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(24px) saturate(1.34);
  -webkit-backdrop-filter: blur(24px) saturate(1.34);
}
[data-theme="light"] #works .work-card:hover,
[data-theme="light"] #works .work-card.open,
[data-theme="light"] #works .works-overview-card:hover,
[data-theme="light"] #works .works-overview-card:focus-visible {
  background: radial-gradient(circle at 0% 0%, rgba(255, 232, 242, 0.46), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(236, 247, 255, 0.98)) !important;
  border-color: rgba(69, 103, 151, 0.36) !important;
  box-shadow: 0 30px 78px rgba(26, 86, 160, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] #works .work-entry {
  border-color: rgba(69, 103, 151, 0.2) !important;
}
/* 2026-06-08 soften lead-work dots and toggles to match the lead badge. */
[data-theme="light"] #works .work-card-lead::before {
  background: rgba(244, 167, 197, 0.72) !important;
  box-shadow: 0 0 0 7px rgba(244, 167, 197, 0.12),
    0 0 18px rgba(244, 167, 197, 0.22) !important;
}
[data-theme="light"] #works .work-toggle-mark,
[data-theme="light"] #works .work-card-lead .work-toggle-mark {
  color: #d2297d !important;
  border-color: rgba(244, 167, 197, 0.34) !important;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.72), transparent 34%),
    rgba(255, 228, 242, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 18px rgba(244, 167, 197, 0.14) !important;
}
[data-theme="light"] #works .work-toggle-mark::before,
[data-theme="light"] #works .work-toggle-mark::after,
[data-theme="light"] #works .work-card.open .work-toggle-mark::before,
[data-theme="light"] #works .work-card.open .work-toggle-mark::after,
[data-theme="light"] #works .work-card-lead .work-toggle-mark::before,
[data-theme="light"] #works .work-card-lead .work-toggle-mark::after,
[data-theme="light"] #works .work-card-lead.open .work-toggle-mark::before,
[data-theme="light"] #works .work-card-lead.open .work-toggle-mark::after {
  background: rgba(210, 41, 125, 0.74) !important;
  box-shadow: 0 0 10px rgba(244, 167, 197, 0.18) !important;
}
/* 2026-06-08 keep dates boxed like the other work meta chips. */
[data-theme="light"] #works .work-card:not(.work-card-lead) .work-meta .tag:first-child {
  min-height: 0 !important;
  padding: 3px 6px !important;
  color: #0c65ad !important;
  -webkit-text-fill-color: #0c65ad !important;
  border: 1px solid rgba(0, 204, 255, 0.34) !important;
  background: rgba(220, 245, 255, 0.7) !important;
  box-shadow: none !important;
  justify-content: center !important;
  line-height: 1.35 !important;
}
/* 2026-06-08 soften expanded work entries for better reading. */
[data-theme="light"] #works .work-detail {
  background: transparent !important;
}
[data-theme="light"] #works .work-entry {
  padding: 16px 18px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(248, 252, 255, 0.34)) !important;
  border: 1px solid rgba(69, 103, 151, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}
[data-theme="light"] #works .work-entry + .work-entry {
  margin-top: 10px !important;
}
[data-theme="light"] #works .work-entry-meta {
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(69, 103, 151, 0.12) !important;
}
/* 2026-06-08 works final clarity, side jump color, and type parity. */
#works #worksSummary,
#works .works-stats,
#works .work-card,
#works .work-card:hover,
#works .work-card.open,
#works .work-card.work-card-lead,
#works .work-entry,
#works .works-overview-card,
#works .works-overview-card:hover,
#works .drama-detail-card,
#works .drama-cast,
#works .works-side-jump,
#works .works-side-jump a,
#works .works-side-jump-toggle {
  box-shadow: none !important;
}
[data-theme="light"] #works #worksSummary,
[data-theme="light"] #works .works-stats,
[data-theme="light"] #works .work-card,
[data-theme="light"] #works .work-card.open,
[data-theme="light"] #works .work-card.work-card-lead,
[data-theme="light"] #works .works-overview-card,
[data-theme="light"] #works .drama-detail-card,
[data-theme="light"] #works .drama-cast {
  background: radial-gradient(circle at 0% 0%, rgba(255, 232, 242, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(236, 247, 255, 0.66)) !important;
  border-color: rgba(69, 103, 151, 0.2) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
[data-theme="light"] #works .work-card:hover,
[data-theme="light"] #works .works-overview-card:hover,
[data-theme="light"] #works .works-overview-card:focus-visible,
[data-theme="light"] #works .drama-detail-card:hover {
  background: radial-gradient(circle at 0% 0%, rgba(255, 232, 242, 0.38), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(236, 247, 255, 0.72)) !important;
  border-color: rgba(69, 103, 151, 0.26) !important;
}
#works #worksSummary h2,
[data-theme="light"] #works #worksSummary h2 {
  font-size: clamp(36px, 4.2vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}
#works #worksSummary p:not(.eyebrow),
[data-theme="light"] #works #worksSummary p:not(.eyebrow) {
  font-size: clamp(16px, 1.08vw, 18px) !important;
  line-height: 2.0 !important;
  letter-spacing: 0.015em !important;
}
#works .stat-number,
[data-theme="light"] #works .stat-number {
  font-size: clamp(36px, 4vw, 42px) !important;
  line-height: 1 !important;
}
#works .stat-label,
[data-theme="light"] #works .stat-label {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
}
#works .work-card h3,
[data-theme="light"] #works .work-card h3 {
  font-size: clamp(27px, 2vw, 34px) !important;
  line-height: 1.28 !important;
  margin-bottom: 12px !important;
}
#works .work-card .tag,
#works .work-entry-meta span,
[data-theme="light"] #works .work-card .tag,
[data-theme="light"] #works .work-entry-meta span {
  font-size: 15px !important;
  font-weight: 800 !important;
}
#works .work-entry p,
[data-theme="light"] #works .work-entry p {
  font-size: clamp(16px, 1.08vw, 18px) !important;
  line-height: 1.95 !important;
  font-weight: 650 !important;
}
#works .works-stats-search input,
[data-theme="light"] #works .works-stats-search input {
  font-size: 14px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
[data-theme="light"] #works .works-stats-search input:focus {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
[data-theme="light"] #works .works-side-jump,
[data-theme="light"] #works .works-side-jump a,
[data-theme="light"] #works .works-side-jump-toggle {
  border-color: rgba(0, 204, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}
[data-theme="light"] #works .works-side-jump a,
[data-theme="light"] #works .works-side-jump a span,
[data-theme="light"] #works .works-side-jump a .part-label,
[data-theme="light"] #works .works-side-jump-toggle {
  color: #00CCFF !important;
  -webkit-text-fill-color: #00CCFF !important;
  text-shadow: none !important;
}
[data-theme="light"] #works .works-side-jump a:hover,
[data-theme="light"] #works .works-side-jump a:focus-visible,
[data-theme="light"] #works .works-side-jump-toggle:hover,
[data-theme="light"] #works .works-side-jump-toggle:focus-visible {
  color: #00a9d4 !important;
  -webkit-text-fill-color: #00a9d4 !important;
  border-color: rgba(0, 204, 255, 0.28) !important;
  background: rgba(232, 249, 255, 0.68) !important;
}
[data-theme="light"] .works-drama-menu {
  color: #172947 !important;
  border-color: rgba(74, 117, 168, 0.18) !important;
  background: radial-gradient(circle at 10% 6%, rgba(255, 228, 242, 0.9), transparent 38%),
    radial-gradient(circle at 96% 100%, rgba(205, 241, 255, 0.92), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.9)) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 22px 56px rgba(55, 84, 124, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}
[data-theme="light"] .works-drama-menu-head {
  border-bottom-color: rgba(74, 117, 168, 0.14) !important;
}
[data-theme="light"] .works-drama-menu-head strong,
[data-theme="light"] .works-drama-menu-item strong {
  color: #172947 !important;
  -webkit-text-fill-color: #172947 !important;
}
[data-theme="light"] .works-drama-menu-close,
[data-theme="light"] .works-drama-menu-item {
  color: #172947 !important;
  border-color: rgba(74, 117, 168, 0.16) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(232, 246, 255, 0.66)) !important;
}
[data-theme="light"] .works-drama-menu-item span,
[data-theme="light"] .works-drama-menu-item em {
  color: #c04f91 !important;
  -webkit-text-fill-color: #c04f91 !important;
}
[data-theme="light"] .works-drama-menu-item:hover,
[data-theme="light"] .works-drama-menu-item:focus-visible {
  border-color: rgba(34, 153, 205, 0.28) !important;
  background: linear-gradient(135deg, rgba(255, 245, 250, 0.94), rgba(220, 244, 255, 0.84)) !important;
}
[data-theme="light"] .works-drama-menu-close:hover,
[data-theme="light"] .works-drama-menu-close:focus-visible {
  border-color: rgba(192, 79, 145, 0.24) !important;
  background: rgba(255, 245, 250, 0.92) !important;
}
html:not([data-theme="light"]) #works .works-side-jump a,
html:not([data-theme="light"]) #works .works-side-jump a span,
html:not([data-theme="light"]) #works .works-side-jump a .part-label,
html:not([data-theme="light"]) #works .works-side-jump-toggle {
  color: rgba(229, 182, 92, 0.95) !important;
  -webkit-text-fill-color: rgba(229, 182, 92, 0.95) !important;
  text-shadow: none !important;
}
html:not([data-theme="light"]) #works .works-side-jump a:hover,
html:not([data-theme="light"]) #works .works-side-jump a:focus-visible,
html:not([data-theme="light"]) #works .works-side-jump-toggle:hover,
html:not([data-theme="light"]) #works .works-side-jump-toggle:focus-visible {
  color: #f2cf88 !important;
  -webkit-text-fill-color: #f2cf88 !important;
}
@media (max-width: 760px) {
  #works .work-card h3,
  [data-theme="light"] #works .work-card h3 {
    font-size: 24px !important;
  }
  #works .work-card .tag,
  #works .work-entry-meta span,
  [data-theme="light"] #works .work-card .tag,
  [data-theme="light"] #works .work-entry-meta span {
    font-size: 14px !important;
  }
  #works .work-entry p,
  [data-theme="light"] #works .work-entry p {
    font-size: 16px !important;
  }
}
/* Unified section heading system */
main .section > :where(.section-heading, .section-header),
main .section > .container > :where(.section-heading, .section-header),
.drama-detail-intro.section-heading {
  width: min(920px, calc(100% - 32px)) !important;
  max-width: 920px !important;
  margin: 0 auto clamp(38px, 5vw, 68px) !important;
  padding: clamp(24px, 3.2vw, 38px) clamp(22px, 4vw, 52px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  border-radius: 28px !important;
  border: 1px solid rgba(232, 185, 102, 0.22) !important;
  background: radial-gradient(circle at 18% 0%, rgba(232, 185, 102, 0.17), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(104, 156, 214, 0.13), transparent 36%),
    linear-gradient(145deg, rgba(17, 21, 36, 0.78), rgba(12, 15, 27, 0.66)) !important;
  box-shadow: 0 26px 70px rgba(4, 7, 18, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}
main .section > :where(.section-heading, .section-header)::before,
main .section > .container > :where(.section-heading, .section-header)::before,
.drama-detail-intro.section-heading::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 11px) !important;
  opacity: 0.62 !important;
}
main .section > :where(.section-heading, .section-header)::after,
main .section > .container > :where(.section-heading, .section-header)::after,
.drama-detail-intro.section-heading::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  width: min(160px, 34%) !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.86), rgba(154, 201, 255, 0.62), transparent) !important;
  box-shadow: 0 0 22px rgba(232, 185, 102, 0.28) !important;
}
main .section > :where(.section-heading, .section-header) > *,
main .section > .container > :where(.section-heading, .section-header) > *,
.drama-detail-intro.section-heading > * {
  position: relative !important;
  z-index: 1 !important;
}
main .section > :where(.section-heading, .section-header) :where(h1, h2, .section-title),
main .section > .container > :where(.section-heading, .section-header) :where(h1, h2, .section-title),
.drama-detail-intro.section-heading :where(h1, h2, .section-title) {
  order: 1 !important;
  max-width: 12em !important;
  margin: 0 !important;
  color: #fff8ed !important;
  font-size: clamp(34px, 4.4vw, 62px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(232, 185, 102, 0.16) !important;
  -webkit-text-fill-color: currentColor !important;
}
main .section > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle),
main .section > .container > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle),
.drama-detail-intro.section-heading :where(.eyebrow, .section-subtitle) {
  order: 2 !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: clamp(10px, 1.6vw, 14px) auto 0 !important;
  padding: 0 22px !important;
  color: rgba(240, 198, 122, 0.9) !important;
  background: transparent !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-wrap: balance;
  -webkit-text-fill-color: currentColor !important;
}
main .section > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle)::before,
main .section > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle)::after,
main .section > .container > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle)::before,
main .section > .container > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle)::after,
.drama-detail-intro.section-heading :where(.eyebrow, .section-subtitle)::before,
.drama-detail-intro.section-heading :where(.eyebrow, .section-subtitle)::after {
  width: 28px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.72)) !important;
}
main .section > :where(.section-heading, .section-header) p:not(.eyebrow):not(.section-subtitle),
main .section > .container > :where(.section-heading, .section-header) p:not(.eyebrow):not(.section-subtitle),
.drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle) {
  order: 3 !important;
  max-width: 58em !important;
  margin: clamp(16px, 2vw, 22px) auto 0 !important;
  padding: 0 !important;
  color: rgba(245, 239, 226, 0.78) !important;
  background: transparent !important;
  font-size: clamp(16px, 1.1vw, 18px) !important;
  font-weight: 520 !important;
  line-height: 1.9 !important;
  letter-spacing: 0.015em !important;
  text-wrap: pretty;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
main .section > :where(.section-heading, .section-header) p:not(.eyebrow):not(.section-subtitle) a,
main .section > .container > :where(.section-heading, .section-header) p:not(.eyebrow):not(.section-subtitle) a {
  color: #f0c67a !important;
  -webkit-text-fill-color: currentColor !important;
}
main .section > .section-heading :where(.resonance-heading-metrics, .works-heading-actions),
main .section > .container > .section-heading :where(.resonance-heading-metrics, .works-heading-actions) {
  order: 4 !important;
  margin-top: clamp(18px, 2.5vw, 26px) !important;
}
[data-theme="light"] main .section > :where(.section-heading, .section-header),
[data-theme="light"] main .section > .container > :where(.section-heading, .section-header),
[data-theme="light"] .drama-detail-intro.section-heading {
  border-color: rgba(97, 124, 161, 0.24) !important;
  background: radial-gradient(circle at 16% 0%, rgba(255, 236, 197, 0.56), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(218, 238, 255, 0.7), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.82)) !important;
  box-shadow: 0 22px 56px rgba(50, 73, 110, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] main .section > :where(.section-heading, .section-header)::before,
[data-theme="light"] main .section > .container > :where(.section-heading, .section-header)::before,
[data-theme="light"] .drama-detail-intro.section-heading::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent),
    repeating-linear-gradient(135deg, rgba(84, 111, 150, 0.035) 0 1px, transparent 1px 12px) !important;
  opacity: 0.74 !important;
}
/**
 * 浅色主题区块标题样式
 * @optimization 使用 CSS 变量统一管理渐变
 */
[data-theme="light"] main .section > :where(.section-heading, .section-header) :where(h1, h2, .section-title),
[data-theme="light"] main .section > .container > :where(.section-heading, .section-header) :where(h1, h2, .section-title),
[data-theme="light"] .drama-detail-intro.section-heading :where(h1, h2, .section-title) {
  background-image: var(--heading-gradient-primary) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  animation: titleColorShiftLight 8s linear infinite !important;
}
[data-theme="light"] main .section > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle),
[data-theme="light"] main .section > .container > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle),
[data-theme="light"] .drama-detail-intro.section-heading :where(.eyebrow, .section-subtitle) {
  color: #a36d1f !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
}
[data-theme="light"] main .section > :where(.section-heading, .section-header) p:not(.eyebrow):not(.section-subtitle),
[data-theme="light"] main .section > .container > :where(.section-heading, .section-header) p:not(.eyebrow):not(.section-subtitle),
[data-theme="light"] .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle) {
  color: #526174 !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
}
#works #worksSummary h1,
#works #worksSummary h2,
#works #worksSummary .section-title,
#works .drama-detail-intro.section-heading :where(h1, h2, .section-title),
[data-theme="light"] #works #worksSummary h1,
[data-theme="light"] #works #worksSummary h2,
[data-theme="light"] #works #worksSummary .section-title,
[data-theme="light"] #works .drama-detail-intro.section-heading :where(h1, h2, .section-title) {
  font-size: clamp(34px, 4.4vw, 62px) !important;
  line-height: 1.08 !important;
}
#works #worksSummary p:not(.eyebrow):not(.section-subtitle),
#works .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle),
[data-theme="light"] #works #worksSummary p:not(.eyebrow):not(.section-subtitle),
[data-theme="light"] #works .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle) {
  max-width: 58em !important;
  line-height: 1.9 !important;
}
@media (max-width: 760px) {
  main .section > :where(.section-heading, .section-header),
  main .section > .container > :where(.section-heading, .section-header),
  .drama-detail-intro.section-heading {
    width: min(100%, calc(100% - 24px)) !important;
    margin-bottom: 34px !important;
    padding: 24px 18px 30px !important;
    border-radius: 22px !important;
  }
  main .section > .container > :where(.section-heading, .section-header) {
    width: min(100%, calc(100vw - 48px)) !important;
  }
  main .section > :where(.section-heading, .section-header)::after,
  main .section > .container > :where(.section-heading, .section-header)::after,
  .drama-detail-intro.section-heading::after {
    bottom: 14px !important;
    width: 128px !important;
  }
  main .section > :where(.section-heading, .section-header) :where(h1, h2, .section-title),
  main .section > .container > :where(.section-heading, .section-header) :where(h1, h2, .section-title),
  .drama-detail-intro.section-heading :where(h1, h2, .section-title) {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.12 !important;
  }
  #works #worksSummary h1,
  #works #worksSummary h2,
  #works #worksSummary .section-title,
  [data-theme="light"] #works #worksSummary h1,
  [data-theme="light"] #works #worksSummary h2,
  [data-theme="light"] #works #worksSummary .section-title {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.12 !important;
  }
  main .section > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle),
  main .section > .container > :where(.section-heading, .section-header) :where(.eyebrow, .section-subtitle),
  .drama-detail-intro.section-heading :where(.eyebrow, .section-subtitle) {
    padding-inline: 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }
  main .section > :where(.section-heading, .section-header) p:not(.eyebrow):not(.section-subtitle),
  main .section > .container > :where(.section-heading, .section-header) p:not(.eyebrow):not(.section-subtitle),
  .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle) {
    font-size: 15.5px !important;
    line-height: 1.8 !important;
  }
  #works #worksSummary p:not(.eyebrow):not(.section-subtitle),
  [data-theme="light"] #works #worksSummary p:not(.eyebrow):not(.section-subtitle) {
    font-size: 15.5px !important;
    line-height: 1.8 !important;
  }
}
/* Social and later pages: frameless section heading treatment */
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading,
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading,
.drama-detail-intro.section-heading {
  width: min(920px, calc(100% - 32px)) !important;
  max-width: 920px !important;
  margin: 0 auto clamp(42px, 5.2vw, 76px) !important;
  padding: 0 clamp(12px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading,
[data-theme="light"] main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading,
[data-theme="light"] #works #worksSummary,
[data-theme="light"] .drama-detail-intro.section-heading {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading::before,
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading::before,
.drama-detail-intro.section-heading::before {
  content: none !important;
}
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading::after,
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading::after,
.drama-detail-intro.section-heading::after {
  left: 50% !important;
  bottom: 0 !important;
  width: min(176px, 42%) !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.86), rgba(139, 193, 255, 0.66), transparent) !important;
  box-shadow: 0 0 20px rgba(232, 185, 102, 0.22) !important;
}
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading :where(h1, h2, .section-title),
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading :where(h1, h2, .section-title),
.drama-detail-intro.section-heading :where(h1, h2, .section-title),
#works #worksSummary h1,
#works #worksSummary h2,
#works #worksSummary .section-title {
  color: #fff8ed !important;
  font-size: clamp(34px, 4.4vw, 62px) !important;
  line-height: 1.08 !important;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(232, 185, 102, 0.16) !important;
  -webkit-text-fill-color: currentColor !important;
}
[data-theme="light"] main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading :where(h1, h2, .section-title),
/**
 * 浅色主题特定区块标题样式（最高优先级）
 * @optimization 使用 CSS 变量统一管理渐变
 */
[data-theme="light"] main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading :where(h1, h2, .section-title),
[data-theme="light"] .drama-detail-intro.section-heading :where(h1, h2, .section-title),
[data-theme="light"] #works #worksSummary h1,
[data-theme="light"] #works #worksSummary h2,
[data-theme="light"] #works #worksSummary .section-title {
  background-image: var(--heading-gradient-primary) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  animation: titleColorShiftLight 8s linear infinite !important;
}
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading :where(.eyebrow, .section-subtitle),
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading :where(.eyebrow, .section-subtitle),
.drama-detail-intro.section-heading :where(.eyebrow, .section-subtitle) {
  color: rgba(240, 198, 122, 0.9) !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
}
[data-theme="light"] main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading :where(.eyebrow, .section-subtitle),
[data-theme="light"] main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading :where(.eyebrow, .section-subtitle),
[data-theme="light"] .drama-detail-intro.section-heading :where(.eyebrow, .section-subtitle) {
  color: #a36d1f !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
}
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading p:not(.eyebrow):not(.section-subtitle),
main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading p:not(.eyebrow):not(.section-subtitle),
.drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle),
#works #worksSummary p:not(.eyebrow):not(.section-subtitle) {
  max-width: 58em !important;
  margin: clamp(16px, 2vw, 22px) auto 0 !important;
  padding: 0 !important;
  color: rgba(245, 239, 226, 0.78) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.9 !important;
  -webkit-text-fill-color: currentColor !important;
}
[data-theme="light"] main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading p:not(.eyebrow):not(.section-subtitle),
[data-theme="light"] main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading p:not(.eyebrow):not(.section-subtitle),
[data-theme="light"] .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle),
[data-theme="light"] #works #worksSummary p:not(.eyebrow):not(.section-subtitle) {
  color: #526174 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-text-fill-color: currentColor !important;
}
@media (max-width: 760px) {
  main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading,
  main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading,
  .drama-detail-intro.section-heading {
    width: min(100%, calc(100vw - 48px)) !important;
    margin-bottom: 38px !important;
    padding: 0 0 20px !important;
  }
  main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading :where(h1, h2, .section-title),
  main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading :where(h1, h2, .section-title),
  .drama-detail-intro.section-heading :where(h1, h2, .section-title),
  #works #worksSummary h1,
  #works #worksSummary h2,
  #works #worksSummary .section-title {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.12 !important;
  }
  main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .section-heading p:not(.eyebrow):not(.section-subtitle),
  main .section:is(#social, #audio-gallery, #works, #schedule, #music, #life, #gallery, #fans, #resonance, #reference) > .container > .section-heading p:not(.eyebrow):not(.section-subtitle),
  .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle),
  #works #worksSummary p:not(.eyebrow):not(.section-subtitle) {
    font-size: 15.5px !important;
    line-height: 1.8 !important;
  }
}
/* Keep the dynamically rendered drama intro identical to the works section heading. */
#works .drama-detail-intro.section-heading,
[data-theme="light"] #works .drama-detail-intro.section-heading {
  width: min(920px, calc(100% - 32px)) !important;
  max-width: 920px !important;
  margin: 0 auto clamp(42px, 5.2vw, 76px) !important;
  padding: 0 clamp(12px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#works .drama-detail-intro.section-heading::before,
[data-theme="light"] #works .drama-detail-intro.section-heading::before {
  content: none !important;
}
#works .drama-detail-intro.section-heading::after,
[data-theme="light"] #works .drama-detail-intro.section-heading::after {
  left: 50% !important;
  bottom: 0 !important;
  width: min(176px, 42%) !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.86), rgba(139, 193, 255, 0.66), transparent) !important;
  box-shadow: 0 0 20px rgba(232, 185, 102, 0.22) !important;
}
/* Light theme: give the drama role groups a refined pink-to-blue gallery field. */
[data-theme="light"] #works .drama-detail-section {
  border-color: rgba(255, 255, 255, 0.86) !important;
  background: radial-gradient(ellipse at 18% 18%, rgba(255, 225, 241, 0.88) 0, rgba(255, 225, 241, 0.48) 28%, transparent 58%),
    radial-gradient(ellipse at 82% 82%, rgba(207, 239, 255, 0.88) 0, rgba(207, 239, 255, 0.5) 28%, transparent 58%),
    linear-gradient(135deg, rgba(255, 236, 246, 0.92) 0%, rgba(255, 248, 252, 0.88) 44%, rgba(249, 252, 255, 0.88) 56%, rgba(225, 246, 255, 0.92) 100%) !important;
  box-shadow: 0 30px 82px rgba(67, 102, 148, 0.11),
    0 14px 38px rgba(219, 126, 170, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(120, 185, 225, 0.16) !important;
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
}
[data-theme="light"] #works .drama-detail-section::before {
  background: linear-gradient(90deg, rgba(244, 173, 207, 0.28), transparent 45%, transparent 55%, rgba(117, 196, 232, 0.28)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent 30%, rgba(255, 255, 255, 0.34)),
    repeating-linear-gradient(90deg, rgba(70, 106, 148, 0.035) 0 1px, transparent 1px 112px) !important;
  opacity: 0.78 !important;
}
[data-theme="light"] #works .drama-detail-section::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.34) 52%, transparent 100%);
  opacity: 0.62;
}
[data-theme="light"] #works .drama-detail-section.is-support-section {
  background: radial-gradient(ellipse at 18% 18%, rgba(255, 228, 243, 0.84) 0, rgba(255, 228, 243, 0.46) 28%, transparent 58%),
    radial-gradient(ellipse at 82% 82%, rgba(202, 241, 255, 0.9) 0, rgba(202, 241, 255, 0.5) 28%, transparent 58%),
    linear-gradient(135deg, rgba(255, 238, 247, 0.9) 0%, rgba(255, 249, 253, 0.86) 44%, rgba(247, 252, 255, 0.86) 56%, rgba(222, 249, 255, 0.92) 100%) !important;
}
@media (max-width: 720px) {
  [data-theme="light"] #works .drama-detail-section {
    background: radial-gradient(ellipse at 18% 16%, rgba(255, 226, 241, 0.78) 0, transparent 54%),
      radial-gradient(ellipse at 82% 86%, rgba(212, 239, 255, 0.78) 0, transparent 54%),
      linear-gradient(135deg, rgba(255, 240, 248, 0.94) 0%, rgba(255, 249, 253, 0.9) 46%, rgba(246, 251, 255, 0.88) 54%, rgba(229, 246, 255, 0.94) 100%) !important;
  }
}
/* Dark theme: keep drama cards dark, but a little less heavy inside the showcase. */
html:not([data-theme="light"]) #works .drama-detail-card {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(140deg, rgba(54, 58, 76, 0.46), rgba(66, 72, 94, 0.32)),
    radial-gradient(circle at 20% 18%, rgba(229, 182, 92, 0.1), transparent 40%),
    radial-gradient(circle at 86% 88%, rgba(217, 122, 158, 0.075), transparent 36%) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
html:not([data-theme="light"]) #works .is-support-section .drama-detail-card {
  background: linear-gradient(140deg, rgba(48, 62, 78, 0.46), rgba(62, 78, 98, 0.32)),
    radial-gradient(circle at 18% 16%, rgba(96, 190, 210, 0.1), transparent 40%),
    radial-gradient(circle at 88% 86%, rgba(217, 122, 158, 0.07), transparent 36%) !important;
}
/* Drama detail role color unification. */
[data-theme="light"] #works .drama-section-search,
[data-theme="light"] #works .drama-heading-tools > span {
  color: var(--light-accent-rose) !important;
  border-color: rgba(236, 72, 153, 0.22) !important;
  background: radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.72), transparent 36%),
    linear-gradient(135deg, rgba(255, 225, 241, 0.74), rgba(255, 239, 247, 0.52)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 24px rgba(236, 72, 153, 0.08) !important;
}
[data-theme="light"] #works .drama-section-search i,
[data-theme="light"] #works .drama-cast dt,
[data-theme="light"] #works .jzy-name-highlight {
  color: var(--light-accent-rose) !important;
  -webkit-text-fill-color: var(--light-accent-rose) !important;
}
[data-theme="light"] #works .drama-synopsis {
  scrollbar-color: rgba(236, 72, 153, 0.44) rgba(255, 229, 243, 0.44) !important;
}
[data-theme="light"] #works .drama-synopsis::-webkit-scrollbar {
  width: 8px;
}
[data-theme="light"] #works .drama-synopsis::-webkit-scrollbar-track {
  background: rgba(255, 229, 243, 0.44);
  border-radius: 999px;
}
[data-theme="light"] #works .drama-synopsis::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 246, 251, 0.86);
  border-radius: 999px;
  background: rgba(236, 72, 153, 0.48);
}
[data-theme="light"] #works .drama-card-body {
  grid-template-areas: "title title"
    "top top"
    "meta meta"
    "synopsis cast"
    "links links" !important;
  row-gap: clamp(10px, 1.1vw, 16px) !important;
}
[data-theme="light"] #works .drama-card-topline {
  align-items: center;
  flex-wrap: wrap !important;
  gap: clamp(8px, 0.9vw, 12px) !important;
  margin-bottom: 0;
}
[data-theme="light"] #works .drama-card-topline span:not(:last-child) {
  margin-right: 0 !important;
}
[data-theme="light"] #works .drama-card-topline span,
[data-theme="light"] #works .drama-card-meta span {
  color: var(--light-accent-rose) !important;
  -webkit-text-fill-color: var(--light-accent-rose) !important;
  border-color: rgba(236, 72, 153, 0.28) !important;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.78), transparent 36%),
    rgba(255, 229, 243, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 6px 14px rgba(236, 72, 153, 0.08) !important;
}
[data-theme="light"] #works .drama-card-meta {
  gap: 9px 12px !important;
}
[data-theme="light"] #works .drama-card-meta small {
  color: rgba(140, 41, 93, 0.62) !important;
  -webkit-text-fill-color: rgba(140, 41, 93, 0.62) !important;
}
[data-theme="light"] #works .drama-card-meta .is-total,
[data-theme="light"] #works .drama-card-meta .is-update {
  color: #9b2f65 !important;
  -webkit-text-fill-color: #9b2f65 !important;
  border-color: rgba(184, 84, 129, 0.32) !important;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.78), transparent 36%),
    rgba(255, 218, 236, 0.82) !important;
}
[data-theme="light"] #works .drama-detail-card h4 {
  max-width: 14em;
  margin: 0 0 clamp(4px, 0.55vw, 8px) !important;
  padding-bottom: clamp(12px, 1.2vw, 18px) !important;
  border-bottom: 1px solid rgba(54, 72, 105, 0.14) !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}
[data-theme="light"] #works .drama-synopsis {
  max-width: 42em;
  max-height: 320px !important;
  margin-top: clamp(4px, 0.6vw, 8px);
  padding-right: 12px !important;
}
[data-theme="light"] #works .drama-synopsis p {
  margin-bottom: 0.86em !important;
  font-size: clamp(1.02rem, 1.08vw, 1.12rem) !important;
  line-height: 1.84 !important;
  letter-spacing: 0.035em !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
}
[data-theme="light"] #works .drama-synopsis p.has-latin {
  text-align: left !important;
  text-align-last: left !important;
  letter-spacing: 0.018em !important;
  word-spacing: 0 !important;
}
#works .drama-links {
  align-items: center;
}
#works .drama-link {
  will-change: transform, box-shadow, border-color, background;
}
#works .drama-link:not(.is-disabled) {
  animation: dramaLinkBreath 2.8s ease-in-out infinite;
}
#works .drama-link.is-manbo:not(.is-disabled) {
  animation-delay: 0.42s;
}
#works .drama-link.is-disabled {
  animation: dramaLinkDisabledBreath 3.8s ease-in-out infinite;
}
[data-theme="light"] #works .drama-link:not(.is-disabled) {
  color: var(--light-accent-rose) !important;
  -webkit-text-fill-color: var(--light-accent-rose) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, rgba(255, 229, 243, 0.76), rgba(255, 241, 248, 0.54)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 0 0 rgba(236, 72, 153, 0) !important;
}
@keyframes dramaLinkBreath {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 0 rgba(229, 182, 92, 0);
  }
  50% {
    transform: translateY(-2px) scale(1.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 0 24px rgba(229, 182, 92, 0.28);
  }
}
@keyframes dramaLinkDisabledBreath {
  0%,
  100% {
    opacity: 0.46;
  }
  50% {
    opacity: 0.72;
  }
}
[data-theme="light"] #works .drama-link:not(.is-disabled) {
  animation-name: dramaLinkBreathLight;
}
@keyframes dramaLinkBreathLight {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 0 0 rgba(236, 72, 153, 0) !important;
  }
  50% {
    transform: translateY(-2px) scale(1.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 0 26px rgba(236, 72, 153, 0.28),
      0 8px 18px rgba(236, 72, 153, 0.1) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #works .drama-link,
  #works .drama-link:not(.is-disabled),
  #works .drama-link.is-disabled {
    animation: none !important;
  }
}
html:not([data-theme="light"]) #works .drama-cast dt,
html:not([data-theme="light"]) #works .is-support-section .drama-cast dt,
html:not([data-theme="light"]) #works .jzy-name-highlight {
  color: #f2cf88 !important;
  -webkit-text-fill-color: #f2cf88 !important;
}
html:not([data-theme="light"]) #works .drama-card-topline span,
html:not([data-theme="light"]) #works .drama-card-topline .drama-platform-badge,
html:not([data-theme="light"]) #works .is-support-section .drama-card-topline span,
html:not([data-theme="light"]) #works .is-support-section .drama-card-topline .drama-platform-badge {
  color: #f2cf88 !important;
  -webkit-text-fill-color: #f2cf88 !important;
  border-color: rgba(229, 182, 92, 0.42) !important;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.24), transparent 36%),
    linear-gradient(135deg, rgba(229, 182, 92, 0.22), rgba(229, 182, 92, 0.1)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 16px rgba(229, 182, 92, 0.1) !important;
}
@media (max-width: 760px) {
  #works .drama-card-meta span {
    max-width: 100%;
    white-space: normal;
  }
}
html:not([data-theme="light"]) #works .drama-link:not(.is-disabled) {
  color: #fff3d6 !important;
  -webkit-text-fill-color: #fff3d6 !important;
  border-color: rgba(229, 182, 92, 0.44) !important;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(229, 182, 92, 0.28), rgba(229, 182, 92, 0.13)) !important;
  animation-name: dramaLinkBreathDark;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 12px rgba(229, 182, 92, 0.12) !important;
}
html:not([data-theme="light"]) #works .drama-link.is-disabled {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.08) !important;
}
html:not([data-theme="light"]) #works .drama-section-search i,
html:not([data-theme="light"]) #works .is-support-section .drama-section-search i {
  color: #f2cf88 !important;
  -webkit-text-fill-color: #f2cf88 !important;
}
html:not([data-theme="light"]) #works .is-support-section .drama-section-search {
  border-color: rgba(229, 182, 92, 0.24) !important;
}
html:not([data-theme="light"]) #works .is-support-section .drama-section-search:focus-within {
  border-color: rgba(229, 182, 92, 0.46) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 24px rgba(229, 182, 92, 0.14) !important;
}
@keyframes dramaLinkBreathDark {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 12px rgba(229, 182, 92, 0.12);
  }
  50% {
    transform: translateY(-3px) scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 0 30px rgba(229, 182, 92, 0.38),
      0 10px 22px rgba(0, 0, 0, 0.18);
  }
}
/* Works summary search: soft #00CCFF treatment for light theme. */
[data-theme="light"] #works .works-stats-search {
  border-color: rgba(0, 204, 255, 0.32) !important;
  background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.76), transparent 34%),
    rgba(245, 252, 255, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 24px rgba(0, 204, 255, 0.07) !important;
}
[data-theme="light"] #works .works-stats-search:focus-within {
  border-color: rgba(0, 204, 255, 0.48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(0, 204, 255, 0.08),
    0 14px 30px rgba(0, 204, 255, 0.1) !important;
}
[data-theme="light"] #works .works-stats-search input {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}
[data-theme="light"] #works .works-stats-search button,
[data-theme="light"] #works .works-stats-search button i {
  color: #00CCFF !important;
  -webkit-text-fill-color: #00CCFF !important;
}
/* Works summary search: warm gold treatment for dark theme. */
html:not([data-theme="light"]) #works .works-stats-search {
  border-color: rgba(229, 182, 92, 0.34) !important;
  background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.14), transparent 34%),
    rgba(229, 182, 92, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(229, 182, 92, 0.08) !important;
}
html:not([data-theme="light"]) #works .works-stats-search:focus-within {
  border-color: rgba(229, 182, 92, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 4px rgba(229, 182, 92, 0.08),
    0 14px 30px rgba(229, 182, 92, 0.12) !important;
}
html:not([data-theme="light"]) #works .works-stats-search button,
html:not([data-theme="light"]) #works .works-stats-search button i {
  color: #f2cf88 !important;
  -webkit-text-fill-color: #f2cf88 !important;
}
/* Schedule light theme: matte, shadowless cards with high-contrast details. */
[data-theme="light"] body.page-schedule #schedule,
[data-theme="light"] #schedule {
  --schedule-light-ink: #111827;
  --schedule-light-soft: #334155;
  --schedule-light-muted: #526174;
  --schedule-light-blue: #006b9a;
  --schedule-light-rose: #a83268;
  --schedule-light-gold: #8a5a10;
  --schedule-light-paper: rgba(255, 255, 255, 0.7);
  --schedule-light-paper-strong: rgba(255, 255, 255, 0.9);
  --schedule-light-line: rgba(72, 93, 124, 0.2);
  --schedule-light-blue-line: rgba(0, 107, 154, 0.28);
  --schedule-light-rose-line: rgba(168, 50, 104, 0.24);
}
[data-theme="light"] body.page-schedule #schedule .card-grid,
[data-theme="light"] #schedule .card-grid {
  gap: clamp(18px, 2.2vw, 30px);
}
[data-theme="light"] body.page-schedule #schedule .schedule-card,
[data-theme="light"] #schedule .schedule-card {
  color: var(--schedule-light-ink) !important;
  border: 1px solid var(--schedule-light-line) !important;
  opacity: 1 !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card:hover,
[data-theme="light"] #schedule .schedule-card:hover {
  transform: translateY(-2px);
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb,
[data-theme="light"] #schedule .schedule-card.has-thumb,
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster,
[data-theme="light"] #schedule .schedule-card.has-poster {
  box-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-thumb,
[data-theme="light"] #schedule .schedule-thumb,
[data-theme="light"] body.page-schedule #schedule .schedule-poster,
[data-theme="light"] #schedule .schedule-poster {
  border-color: rgba(255, 255, 255, 0.74) !important;
  background: rgba(255, 255, 255, 0.34) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-thumb::after,
[data-theme="light"] #schedule .schedule-thumb::after {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.06)),
    linear-gradient(90deg, rgba(248, 251, 255, 0.72), rgba(248, 251, 255, 0.28) 42%, rgba(248, 251, 255, 0.06) 72%) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-thumb img,
[data-theme="light"] #schedule .schedule-thumb img,
[data-theme="light"] body.page-schedule #schedule .schedule-poster img,
[data-theme="light"] #schedule .schedule-poster img {
  filter: brightness(1.04) contrast(1.03) saturate(1.04) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-copy,
[data-theme="light"] #schedule .schedule-copy,
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-copy,
[data-theme="light"] #schedule .schedule-card.has-thumb .schedule-copy,
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card.has-thumb .schedule-copy,
[data-theme="light"] #schedule .schedule-card.is-douyin-card.has-thumb .schedule-copy {
  color: var(--schedule-light-ink) !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-header h3,
[data-theme="light"] #schedule .schedule-header h3,
[data-theme="light"] .schedule-modal-body .modal-header h3 {
  background: none !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-copy p,
[data-theme="light"] #schedule .schedule-copy p,
[data-theme="light"] body.page-schedule #schedule .schedule-secondary-info p,
[data-theme="light"] #schedule .schedule-secondary-info p {
  color: var(--schedule-light-soft) !important;
  -webkit-text-fill-color: var(--schedule-light-soft) !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-copy strong,
[data-theme="light"] #schedule .schedule-copy strong,
[data-theme="light"] .schedule-modal-body strong {
  color: var(--schedule-light-gold, #8a5a10) !important;
  -webkit-text-fill-color: var(--schedule-light-gold, #8a5a10) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-core-info,
[data-theme="light"] #schedule .schedule-core-info,
[data-theme="light"] .schedule-modal-body .modal-core,
[data-theme="light"] .schedule-modal-body .modal-secondary {
  border: 1px solid rgba(72, 93, 124, 0.16) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-core-info p,
[data-theme="light"] #schedule .schedule-card.has-thumb .schedule-core-info p,
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-copy p.is-place,
[data-theme="light"] #schedule .schedule-card.has-thumb .schedule-copy p.is-place {
  display: inline-flex !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-date,
[data-theme="light"] #schedule .schedule-copy p.is-date,
[data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-place,
[data-theme="light"] #schedule .schedule-copy p.is-place,
[data-theme="light"] .schedule-modal-body .modal-core p.is-date,
[data-theme="light"] .schedule-modal-body .modal-core p.is-place {
  align-items: center;
  width: fit-content;
  max-width: 100%;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  border: 1px solid rgba(138, 90, 16, 0.28) !important;
  background: radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(135deg, rgba(255, 246, 225, 0.82), rgba(255, 252, 244, 0.62)) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-highlight-date,
[data-theme="light"] #schedule .schedule-copy p.is-highlight-date,
[data-theme="light"] body.page-schedule #schedule .douyin-schedule-info,
[data-theme="light"] #schedule .douyin-schedule-info,
[data-theme="light"] .schedule-modal-body .modal-core p.is-highlight-date {
  color: var(--schedule-light-blue, #006b9a) !important;
  -webkit-text-fill-color: var(--schedule-light-blue, #006b9a) !important;
  border: 1px solid var(--schedule-light-blue-line, rgba(0, 107, 154, 0.28)) !important;
  background: radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.8), transparent 42%),
    linear-gradient(135deg, rgba(224, 246, 255, 0.86), rgba(246, 252, 255, 0.66)) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-tag,
[data-theme="light"] #schedule .schedule-tag,
[data-theme="light"] .schedule-modal-body .modal-header .tag {
  border: 1px solid var(--schedule-light-rose-line, rgba(168, 50, 104, 0.24)) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-progress,
[data-theme="light"] #schedule .schedule-progress,
[data-theme="light"] .schedule-modal-body .schedule-progress {
  border: 1px solid rgba(0, 107, 154, 0.28) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-progress.ended,
[data-theme="light"] #schedule .schedule-progress.ended {
  color: #596579 !important;
  -webkit-text-fill-color: #596579 !important;
  border-color: rgba(89, 101, 121, 0.24) !important;
  background: rgba(241, 245, 249, 0.82) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-countdown-wrapper,
[data-theme="light"] #schedule .schedule-countdown-wrapper,
[data-theme="light"] .schedule-modal-body .modal-countdown {
  color: var(--schedule-light-blue, #006b9a) !important;
  border: 1px solid rgba(0, 107, 154, 0.28) !important;
  background: linear-gradient(135deg, rgba(226, 247, 255, 0.84), rgba(255, 255, 255, 0.68)),
    rgba(255, 255, 255, 0.46) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-countdown-label,
[data-theme="light"] #schedule .schedule-countdown-label,
[data-theme="light"] body.page-schedule #schedule .schedule-countdown,
[data-theme="light"] #schedule .schedule-countdown,
[data-theme="light"] .schedule-modal-body .modal-countdown .schedule-countdown-label,
[data-theme="light"] .schedule-modal-body .modal-countdown .schedule-countdown {
  color: var(--schedule-light-blue, #006b9a) !important;
  -webkit-text-fill-color: var(--schedule-light-blue, #006b9a) !important;
  text-shadow: none !important;
}
[data-theme="light"] .schedule-modal-content {
  color: #111827 !important;
  border: 1px solid rgba(72, 93, 124, 0.22) !important;
  background: radial-gradient(circle at 12% 0%, rgba(255, 232, 242, 0.62), transparent 34%),
    radial-gradient(circle at 100% 86%, rgba(218, 243, 255, 0.72), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 255, 0.88)) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
[data-theme="light"] .schedule-modal-body,
[data-theme="light"] .schedule-modal-body p {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  text-shadow: none !important;
}
[data-theme="light"] .schedule-modal-close {
  color: #0f172a !important;
  border: 1px solid rgba(72, 93, 124, 0.2) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: none !important;
}
[data-theme="light"] .schedule-modal-close:hover {
  color: var(--schedule-light-rose, #a83268) !important;
  border-color: rgba(168, 50, 104, 0.28) !important;
  background: rgba(255, 232, 242, 0.84) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card::before,
[data-theme="light"] #schedule .schedule-card::before {
  box-shadow: none !important;
}
@media (max-width: 720px) {
  [data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-copy,
  [data-theme="light"] #schedule .schedule-card.has-thumb .schedule-copy {
    width: min(100%, 520px);
  }
  [data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-core-info p,
  [data-theme="light"] #schedule .schedule-card.has-thumb .schedule-core-info p {
    white-space: normal;
  }
  [data-theme="light"] .schedule-modal-content {
    padding: 24px 18px !important;
  }
  [data-theme="light"] .schedule-modal-body {
    padding-right: 0 !important;
  }
}
/* Schedule light theme: second-pass finesse from visual QA. */
[data-theme="light"] body.page-schedule #schedule .schedule-card:focus,
[data-theme="light"] body.page-schedule #schedule .schedule-card:focus-visible,
[data-theme="light"] #schedule .schedule-card:focus,
[data-theme="light"] #schedule .schedule-card:focus-visible,
[data-theme="light"] body.page-schedule #schedule .schedule-copy:focus,
[data-theme="light"] body.page-schedule #schedule .schedule-copy:focus-visible,
[data-theme="light"] #schedule .schedule-copy:focus,
[data-theme="light"] #schedule .schedule-copy:focus-visible {
  outline: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card:focus-visible,
[data-theme="light"] #schedule .schedule-card:focus-visible {
  border-color: rgba(0, 107, 154, 0.34) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-copy,
[data-theme="light"] #schedule .schedule-copy,
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-copy,
[data-theme="light"] #schedule .schedule-card.has-thumb .schedule-copy,
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card.has-thumb .schedule-copy,
[data-theme="light"] #schedule .schedule-card.is-douyin-card.has-thumb .schedule-copy {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-core-info,
[data-theme="light"] #schedule .schedule-core-info {
  border-color: rgba(72, 93, 124, 0.12) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(246, 251, 255, 0.32)),
    rgba(255, 255, 255, 0.2) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-figcaption,
[data-theme="light"] #schedule .schedule-figcaption {
  background: rgba(255, 255, 255, 0.34) !important;
  border: 1px solid rgba(29, 59, 95, 0.14);
  box-shadow: none !important;
  backdrop-filter: blur(4px) saturate(1.01);
  -webkit-backdrop-filter: blur(4px) saturate(1.01);
}
[data-theme="light"] body.page-schedule #schedule .schedule-figcaption a,
[data-theme="light"] #schedule .schedule-figcaption a {
  color: rgba(29, 59, 95, 0.76) !important;
  -webkit-text-fill-color: rgba(29, 59, 95, 0.76) !important;
  text-shadow: none !important;
  text-decoration: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-figcaption:focus,
[data-theme="light"] body.page-schedule #schedule .schedule-figcaption:focus-visible,
[data-theme="light"] body.page-schedule #schedule .schedule-figcaption a:focus,
[data-theme="light"] body.page-schedule #schedule .schedule-figcaption a:focus-visible,
[data-theme="light"] #schedule .schedule-figcaption:focus,
[data-theme="light"] #schedule .schedule-figcaption:focus-visible,
[data-theme="light"] #schedule .schedule-figcaption a:focus,
[data-theme="light"] #schedule .schedule-figcaption a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-thumb,
[data-theme="light"] #schedule .schedule-card.is-douyin-card .schedule-thumb {
  opacity: 0.94 !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-thumb::after,
[data-theme="light"] #schedule .schedule-card.is-douyin-card .schedule-thumb::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18)),
    linear-gradient(90deg, rgba(248, 251, 255, 0.16), rgba(248, 251, 255, 0.03) 58%) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-thumb img,
[data-theme="light"] #schedule .schedule-card.is-douyin-card .schedule-thumb img {
  filter: brightness(1.06) contrast(1.08) saturate(1.08) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-countdown-wrapper,
[data-theme="light"] #schedule .schedule-countdown-wrapper {
  border-color: rgba(0, 107, 154, 0.22) !important;
  background: linear-gradient(135deg, rgba(226, 247, 255, 0.68), rgba(255, 255, 255, 0.46)),
    rgba(255, 255, 255, 0.2) !important;
}
/* Schedule light theme: clean watermark and refined Douyin title. */
[data-theme="light"] body.page-schedule #schedule,
[data-theme="light"] #schedule,
[data-theme="light"] body.page-schedule #schedule *,
[data-theme="light"] #schedule *,
[data-theme="light"] .schedule-modal,
[data-theme="light"] .schedule-modal * {
  text-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule :where(.schedule-card, .schedule-copy, .schedule-core-info, .schedule-secondary-info, .schedule-countdown-wrapper, .schedule-thumb, .schedule-poster, .schedule-figcaption, .schedule-tag, .schedule-progress),
[data-theme="light"] #schedule :where(.schedule-card, .schedule-copy, .schedule-core-info, .schedule-secondary-info, .schedule-countdown-wrapper, .schedule-thumb, .schedule-poster, .schedule-figcaption, .schedule-tag, .schedule-progress),
[data-theme="light"] :where(.schedule-modal, .schedule-modal-content, .schedule-modal-close, .schedule-modal-body .modal-core, .schedule-modal-body .modal-secondary, .schedule-modal-body .modal-countdown) {
  box-shadow: none !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.is-douyin-card .schedule-header h3,
[data-theme="light"] #schedule .schedule-card.is-douyin-card .schedule-header h3 {
  background: linear-gradient(105deg, #49306f 0%, #7d4fa3 42%, #b45f96 72%, #574989 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card::after,
[data-theme="light"] #schedule .schedule-card::after {
  right: 18px !important;
  bottom: -10px !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb::after,
[data-theme="light"] #schedule .schedule-card.has-thumb::after {
  right: 18px !important;
  color: rgba(126, 94, 150, 0.13) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster::after,
[data-theme="light"] #schedule .schedule-card.has-poster::after {
  right: 18px !important;
  color: rgba(126, 94, 150, 0.11) !important;
}
/* Schedule light theme: clearer watermark without heavy shadow. */
[data-theme="light"] body.page-schedule #schedule .schedule-card::after,
[data-theme="light"] #schedule .schedule-card::after {
  z-index: 1 !important;
  opacity: 1 !important;
  background: linear-gradient(105deg, rgba(91, 62, 132, 0.34), rgba(194, 103, 163, 0.3) 52%, rgba(42, 139, 184, 0.28)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 transparent !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  filter: none !important;
  font-family: Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  font-style: normal !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb::after,
[data-theme="light"] #schedule .schedule-card.has-thumb::after {
  bottom: 12px !important;
  font-size: clamp(44px, 5.8vw, 70px) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster::after,
[data-theme="light"] #schedule .schedule-card.has-poster::after {
  bottom: 12px !important;
  font-size: clamp(48px, 5.4vw, 66px) !important;
}
/* Gallery light theme: soften the date containers and remove the heavy smoked glass. */
[data-theme="light"] body.page-gallery #gallery .gallery-date-group,
[data-theme="light"] #gallery .gallery-date-group {
  border-color: rgba(255, 255, 255, 0.66) !important;
  box-shadow: 0 12px 32px rgba(64, 90, 123, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.86) inset,
    0 0 0 1px rgba(147, 175, 203, 0.08) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group:hover,
[data-theme="light"] #gallery .gallery-date-group:hover {
  box-shadow: 0 16px 36px rgba(64, 90, 123, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(198, 118, 164, 0.1) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] #gallery .gallery-date-heading {
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 8px 20px rgba(58, 83, 113, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.88) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading:hover,
[data-theme="light"] #gallery .gallery-date-heading:hover {
  border-color: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 10px 24px rgba(58, 83, 113, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading::before,
[data-theme="light"] #gallery .gallery-date-heading::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading::after,
[data-theme="light"] #gallery .gallery-date-heading::after {
  background: radial-gradient(ellipse at 18% 50%, rgba(235, 142, 181, 0.12), transparent 46%),
    radial-gradient(ellipse at 86% 52%, rgba(88, 157, 214, 0.1), transparent 44%) !important;
  opacity: 0.62 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading h4,
[data-theme="light"] #gallery .gallery-date-heading h4 {
  filter: none !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] #gallery .gallery-date-heading p {
  text-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item,
[data-theme="light"] #gallery .gallery-item {
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 14px 30px rgba(63, 86, 116, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item img,
[data-theme="light"] #gallery .gallery-item img {
  box-shadow: 0 10px 22px rgba(63, 86, 116, 0.1) !important;
}
/* Gallery light theme: Morandi aurora system with shadowless motion. */
[data-theme="light"] body.page-gallery #gallery,
[data-theme="light"] #gallery {
  --gallery-morandi-rose: rgba(219, 146, 171, 0.34);
  --gallery-morandi-sky: rgba(127, 182, 214, 0.3);
  --gallery-morandi-peach: rgba(232, 176, 142, 0.28);
  --gallery-morandi-lavender: rgba(168, 145, 196, 0.24);
  --gallery-morandi-gold: rgba(196, 151, 82, 0.32);
  --gallery-ink: #172033;
  --gallery-muted: #536174;
  --gallery-line: rgba(255, 255, 255, 0.72);
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}
[data-theme="light"] body.page-gallery #gallery::before,
[data-theme="light"] #gallery::before {
  content: "" !important;
  position: absolute !important;
  inset: -9% -6% -4% !important;
  z-index: -2 !important;
  background: radial-gradient(circle at 14% 20%, var(--gallery-morandi-rose), transparent 34%),
    radial-gradient(circle at 84% 18%, var(--gallery-morandi-sky), transparent 34%),
    radial-gradient(circle at 44% 82%, var(--gallery-morandi-peach), transparent 42%),
    radial-gradient(circle at 62% 48%, var(--gallery-morandi-lavender), transparent 36%) !important;
  filter: blur(28px) saturate(1.08);
  opacity: 0.78 !important;
  pointer-events: none;
  animation: galleryMorandiDrift 18s ease-in-out infinite alternate;
}
[data-theme="light"] body.page-gallery #gallery::after,
[data-theme="light"] #gallery::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.12) 44%, rgba(255, 255, 255, 0.3)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 92px) !important;
  opacity: 0.46 !important;
  pointer-events: none;
}
[data-theme="light"] body.page-gallery #gallery :where(
  .section-heading,
  .gallery-tabs,
  .gallery-tab,
  .gallery-tab-icon,
  .gallery-category-desc,
  .gallery-controls,
  .gallery-control-group,
  .gallery-expand-btn,
  .gallery-collapse-btn,
  .gallery-month-group,
  .gallery-month-heading,
  .gallery-month-toggle,
  .gallery-date-group,
  .gallery-date-heading,
  .gallery-date-grid,
  .gallery-item,
  .gallery-item img,
  .gallery-caption
),
[data-theme="light"] #gallery :where(
  .section-heading,
  .gallery-tabs,
  .gallery-tab,
  .gallery-tab-icon,
  .gallery-category-desc,
  .gallery-controls,
  .gallery-control-group,
  .gallery-expand-btn,
  .gallery-collapse-btn,
  .gallery-month-group,
  .gallery-month-heading,
  .gallery-month-toggle,
  .gallery-date-group,
  .gallery-date-heading,
  .gallery-date-grid,
  .gallery-item,
  .gallery-item img,
  .gallery-caption
) {
  box-shadow: none !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery > .section-heading,
[data-theme="light"] #gallery > .section-heading {
  position: relative !important;
  width: min(980px, calc(100% - 32px)) !important;
  padding: clamp(10px, 2vw, 22px) clamp(16px, 3vw, 38px) clamp(24px, 2.8vw, 34px) !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery > .section-heading h2,
[data-theme="light"] #gallery > .section-heading h2 {
  letter-spacing: 0;
}
[data-theme="light"] body.page-gallery #gallery > .section-heading::after,
[data-theme="light"] #gallery > .section-heading::after {
  width: min(210px, 44%) !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #d793aa, #c49a52, #6aaed6, transparent) !important;
  filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tabs,
[data-theme="light"] #gallery .gallery-tabs {
  gap: clamp(14px, 2vw, 24px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab,
[data-theme="light"] #gallery .gallery-tab {
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(246, 251, 255, 0.38)),
    rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
  color: var(--gallery-ink) !important;
  transform: translateZ(0);
  transition: transform 0.48s cubic-bezier(0.2, 0.85, 0.2, 1),
    border-color 0.3s ease,
    background 0.3s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab::before,
[data-theme="light"] #gallery .gallery-tab::before {
  opacity: 0.72 !important;
  background: radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.76), transparent 36%),
    linear-gradient(125deg, transparent, rgba(255, 255, 255, 0.28), transparent) !important;
  animation: galleryPanelSheen 8s ease-in-out infinite;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab::after,
[data-theme="light"] #gallery .gallery-tab::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  background: transparent !important;
  pointer-events: none;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab:hover,
[data-theme="light"] #gallery .gallery-tab:hover {
  transform: translateY(-6px) scale(1.02) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active,
[data-theme="light"] #gallery .gallery-tab.active {
  transform: translateY(-4px) scale(1.01) !important;
  border-color: rgba(255, 255, 255, 0.88) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab[data-category="self"],
[data-theme="light"] #gallery .gallery-tab[data-category="self"] {
  background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.78), transparent 38%),
    linear-gradient(135deg, rgba(224, 148, 174, 0.42), rgba(255, 246, 250, 0.54)) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab[data-category="life"],
[data-theme="light"] #gallery .gallery-tab[data-category="life"] {
  background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.78), transparent 38%),
    linear-gradient(135deg, rgba(232, 176, 142, 0.38), rgba(255, 251, 245, 0.56)) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab[data-category="moments"],
[data-theme="light"] #gallery .gallery-tab[data-category="moments"] {
  background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.78), transparent 38%),
    linear-gradient(135deg, rgba(127, 182, 214, 0.4), rgba(246, 252, 255, 0.56)) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-icon,
[data-theme="light"] #gallery .gallery-tab-icon {
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.38) !important;
  color: #1f5f9d !important;
  transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.2, 1), background 0.3s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab:hover .gallery-tab-icon,
[data-theme="light"] #gallery .gallery-tab:hover .gallery-tab-icon,
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active .gallery-tab-icon,
[data-theme="light"] #gallery .gallery-tab.active .gallery-tab-icon {
  transform: scale(1.1) rotate(-3deg) !important;
  background: rgba(255, 255, 255, 0.58) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-title,
[data-theme="light"] #gallery .gallery-tab-title {
  color: var(--gallery-ink) !important;
  -webkit-text-fill-color: var(--gallery-ink) !important;
  font-weight: 900 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-subtitle,
[data-theme="light"] #gallery .gallery-tab-subtitle {
  color: rgba(38, 52, 75, 0.72) !important;
  -webkit-text-fill-color: rgba(38, 52, 75, 0.72) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc,
[data-theme="light"] #gallery .gallery-category-desc {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  background: linear-gradient(90deg, rgba(224, 148, 174, 0.16), rgba(246, 251, 255, 0.36), rgba(127, 182, 214, 0.14)),
    rgba(255, 255, 255, 0.26) !important;
  color: #b35674 !important;
  -webkit-text-fill-color: #b35674 !important;
  backdrop-filter: blur(16px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-controls,
[data-theme="light"] #gallery .gallery-controls {
  margin-top: clamp(18px, 2.5vw, 30px) !important;
  gap: 12px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group,
[data-theme="light"] #gallery .gallery-control-group {
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(246, 251, 255, 0.34)),
    rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(12px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.04) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-label,
[data-theme="light"] #gallery .gallery-control-label {
  color: var(--gallery-ink) !important;
  -webkit-text-fill-color: var(--gallery-ink) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn,
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn,
[data-theme="light"] #gallery .gallery-expand-btn,
[data-theme="light"] #gallery .gallery-collapse-btn {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  background: rgba(255, 255, 255, 0.38) !important;
  color: #1c5f9a !important;
  -webkit-text-fill-color: #1c5f9a !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
  transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn:hover,
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn:hover,
[data-theme="light"] #gallery .gallery-expand-btn:hover,
[data-theme="light"] #gallery .gallery-collapse-btn:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(150, 99, 167, 0.28) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group,
[data-theme="light"] #gallery .gallery-month-group {
  position: relative !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
[data-theme="light"] #gallery .gallery-month-heading {
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(248, 252, 255, 0.52)),
    radial-gradient(circle at 18% 18%, rgba(196, 151, 82, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
  transform: translateZ(0);
  transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.2, 1), border-color 0.28s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading:hover,
[data-theme="light"] #gallery .gallery-month-heading:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(196, 151, 82, 0.42) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading h3,
[data-theme="light"] #gallery .gallery-month-heading h3 {
  background: linear-gradient(105deg, #55386c, #b17b34 48%, #2e83b4) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading span,
[data-theme="light"] #gallery .gallery-month-heading span {
  color: #d67991 !important;
  -webkit-text-fill-color: #d67991 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading p,
[data-theme="light"] #gallery .gallery-month-heading p {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle,
[data-theme="light"] #gallery .gallery-month-toggle {
  border: 1px solid rgba(255, 199, 214, 0.58) !important;
  background: rgba(255, 236, 243, 0.52) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker,
[data-theme="light"] #gallery .gallery-month-marker {
  background: #f2a5b9 !important;
  border-color: #1f2734 !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group,
[data-theme="light"] #gallery .gallery-date-group {
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(245, 250, 255, 0.44)),
    radial-gradient(circle at 14% 12%, rgba(219, 146, 171, 0.24), transparent 36%),
    radial-gradient(circle at 92% 78%, rgba(127, 182, 214, 0.22), transparent 40%),
    radial-gradient(circle at 50% 95%, rgba(232, 176, 142, 0.14), transparent 36%) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
  animation: galleryDateBreath 9s ease-in-out infinite;
  transform: translateZ(0);
  transition: transform 0.46s cubic-bezier(0.2, 0.85, 0.2, 1), border-color 0.28s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group:hover,
[data-theme="light"] #gallery .gallery-date-group:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group::before,
[data-theme="light"] #gallery .gallery-date-group::before {
  background: radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.72), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(127, 182, 214, 0.28), transparent 36%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 42%, rgba(255, 255, 255, 0.16)) !important;
  opacity: 0.86 !important;
  animation: galleryPanelSheen 9s ease-in-out infinite reverse;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group::after,
[data-theme="light"] #gallery .gallery-date-group::after {
  left: 18px !important;
  right: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] #gallery .gallery-date-heading {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(246, 251, 255, 0.34)),
    linear-gradient(90deg, rgba(219, 146, 171, 0.18), rgba(127, 182, 214, 0.16)) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading h4,
[data-theme="light"] #gallery .gallery-date-heading h4 {
  background: linear-gradient(105deg, #56366d 0%, #ba7b33 48%, #2e83b4 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] #gallery .gallery-date-heading p {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid,
[data-theme="light"] #gallery .gallery-date-grid {
  gap: clamp(16px, 2vw, 24px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item,
[data-theme="light"] #gallery .gallery-item {
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(248, 252, 255, 0.28)),
    rgba(255, 255, 255, 0.22) !important;
  overflow: hidden !important;
  transform: translateZ(0);
  transition: transform 0.54s cubic-bezier(0.2, 0.85, 0.2, 1),
    border-color 0.28s ease,
    background 0.28s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item::before,
[data-theme="light"] #gallery .gallery-item::before {
  background: radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.62), transparent 30%),
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.3) 42%, transparent 64%) !important;
  opacity: 0.72 !important;
  mix-blend-mode: screen !important;
  animation: galleryImageAura 7s ease-in-out infinite;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item::after,
[data-theme="light"] #gallery .gallery-item::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%, rgba(127, 182, 214, 0.08)),
    radial-gradient(ellipse at center, transparent 54%, rgba(255, 255, 255, 0.34) 100%) !important;
  opacity: 0.64 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item:hover,
[data-theme="light"] #gallery .gallery-item:hover {
  transform: translateY(-12px) scale(1.03) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item img,
[data-theme="light"] #gallery .gallery-item img {
  border-radius: 16px !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  transform: translateZ(0) scale(1.01) !important;
  filter: brightness(1.07) contrast(1.035) saturate(1.075) sepia(0.01) !important;
  transition: transform 0.58s cubic-bezier(0.2, 0.85, 0.2, 1), filter 0.35s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item:hover img,
[data-theme="light"] #gallery .gallery-item:hover img {
  transform: scale(1.05) !important;
  filter: brightness(1.1) contrast(1.045) saturate(1.1) sepia(0.008) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item .color-grade,
[data-theme="light"] #gallery .gallery-item .color-grade {
  background: radial-gradient(circle at 22% 16%, rgba(255, 232, 240, 0.28), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(207, 234, 250, 0.2), transparent 38%),
    linear-gradient(180deg, transparent 48%, rgba(255, 255, 255, 0.18)) !important;
  mix-blend-mode: soft-light !important;
  opacity: 0.78 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item .edge-light,
[data-theme="light"] #gallery .gallery-item .edge-light {
  opacity: 0.72 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.34)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.22)) !important;
}
@keyframes galleryMorandiDrift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  50% {
    transform: translate3d(1.2%, 1.4%, 0) scale(1.035);
  }
  100% {
    transform: translate3d(-0.4%, 0.8%, 0) scale(1.015);
  }
}
@keyframes galleryPanelSheen {
  0%,
  100% {
    transform: translate3d(-2%, -1%, 0) scale(1);
    opacity: 0.58;
  }
  50% {
    transform: translate3d(2%, 1%, 0) scale(1.02);
    opacity: 0.9;
  }
}
@keyframes galleryDateBreath {
  0%,
  100% {
    background-position: 0% 0%, 0% 0%, 100% 100%, 50% 100%;
  }
  28% {
    background-position: 0% 0%, 8% 4%, 92% 96%, 48% 92%;
  }
  62% {
    background-position: 0% 0%, 14% 8%, 86% 90%, 54% 88%;
  }
  82% {
    background-position: 0% 0%, 5% 10%, 96% 88%, 44% 94%;
  }
}
@keyframes galleryImageAura {
  0%,
  100% {
    transform: translateX(-8%) skewX(-6deg);
    opacity: 0.5;
  }
  50% {
    transform: translateX(8%) skewX(-6deg);
    opacity: 0.86;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] body.page-gallery #gallery::before,
  [data-theme="light"] #gallery::before,
  [data-theme="light"] body.page-gallery #gallery .gallery-tab::before,
  [data-theme="light"] #gallery .gallery-tab::before,
  [data-theme="light"] body.page-gallery #gallery .gallery-date-group,
  [data-theme="light"] #gallery .gallery-date-group,
  [data-theme="light"] body.page-gallery #gallery .gallery-date-group::before,
  [data-theme="light"] #gallery .gallery-date-group::before,
  [data-theme="light"] body.page-gallery #gallery .gallery-item::before,
  [data-theme="light"] #gallery .gallery-item::before {
    animation: none !important;
  }
}
[data-theme="light"] body.page-gallery #gallery,
[data-theme="light"] body.page-gallery #gallery *,
[data-theme="light"] body.page-gallery #gallery *::before,
[data-theme="light"] body.page-gallery #gallery *::after,
[data-theme="light"] #gallery,
[data-theme="light"] #gallery *,
[data-theme="light"] #gallery *::before,
[data-theme="light"] #gallery *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery > .section-heading h2,
[data-theme="light"] #gallery > .section-heading h2 {
  opacity: 1 !important;
  background: linear-gradient(105deg, #372358 0%, #8c5a22 46%, #126f9f 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group,
[data-theme="light"] #gallery .gallery-month-group {
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group::before,
[data-theme="light"] body.page-gallery #gallery .gallery-month-group::after,
[data-theme="light"] #gallery .gallery-month-group::before,
[data-theme="light"] #gallery .gallery-month-group::after {
  background: transparent !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc,
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc[data-category],
[data-theme="light"] #gallery .gallery-category-desc,
[data-theme="light"] #gallery .gallery-category-desc[data-category] {
  color: #a74966 !important;
  -webkit-text-fill-color: #a74966 !important;
}
/* Gallery dark theme: align with the Morandi aurora gallery, without shadows. */
html:not([data-theme="light"]) body.page-gallery #gallery,
html:not([data-theme="light"]) #gallery {
  --gallery-dark-rose: rgba(214, 121, 161, 0.24);
  --gallery-dark-sky: rgba(88, 163, 208, 0.22);
  --gallery-dark-peach: rgba(221, 158, 111, 0.18);
  --gallery-dark-lavender: rgba(154, 122, 202, 0.22);
  --gallery-dark-gold: rgba(210, 164, 86, 0.24);
  --gallery-dark-ink: #f8f4ee;
  --gallery-dark-muted: rgba(248, 244, 238, 0.68);
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}
html:not([data-theme="light"]) body.page-gallery #gallery::before,
html:not([data-theme="light"]) #gallery::before {
  content: "" !important;
  position: absolute !important;
  inset: -10% -7% -6% !important;
  z-index: -2 !important;
  background: radial-gradient(circle at 15% 20%, var(--gallery-dark-rose), transparent 34%),
    radial-gradient(circle at 82% 16%, var(--gallery-dark-sky), transparent 34%),
    radial-gradient(circle at 46% 82%, var(--gallery-dark-peach), transparent 42%),
    radial-gradient(circle at 62% 46%, var(--gallery-dark-lavender), transparent 36%) !important;
  filter: blur(30px) saturate(1.08);
  opacity: 0.9 !important;
  pointer-events: none;
  animation: galleryMorandiDrift 18s ease-in-out infinite alternate;
}
html:not([data-theme="light"]) body.page-gallery #gallery::after,
html:not([data-theme="light"]) #gallery::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015) 46%, rgba(255, 255, 255, 0.04)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 92px) !important;
  opacity: 0.72 !important;
  pointer-events: none;
}
html:not([data-theme="light"]) body.page-gallery #gallery :where(
  .section-heading,
  .gallery-tabs,
  .gallery-tab,
  .gallery-tab-icon,
  .gallery-category-desc,
  .gallery-controls,
  .gallery-control-group,
  .gallery-expand-btn,
  .gallery-collapse-btn,
  .gallery-month-group,
  .gallery-month-heading,
  .gallery-month-toggle,
  .gallery-date-group,
  .gallery-date-heading,
  .gallery-date-grid,
  .gallery-item,
  .gallery-item img,
  .gallery-caption
),
html:not([data-theme="light"]) #gallery :where(
  .section-heading,
  .gallery-tabs,
  .gallery-tab,
  .gallery-tab-icon,
  .gallery-category-desc,
  .gallery-controls,
  .gallery-control-group,
  .gallery-expand-btn,
  .gallery-collapse-btn,
  .gallery-month-group,
  .gallery-month-heading,
  .gallery-month-toggle,
  .gallery-date-group,
  .gallery-date-heading,
  .gallery-date-grid,
  .gallery-item,
  .gallery-item img,
  .gallery-caption
) {
  box-shadow: none !important;
  text-shadow: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading,
html:not([data-theme="light"]) #gallery > .section-heading {
  position: relative !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading h2,
html:not([data-theme="light"]) #gallery > .section-heading h2 {
  opacity: 1 !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading::after,
html:not([data-theme="light"]) #gallery > .section-heading::after {
  filter: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab::before,
html:not([data-theme="light"]) #gallery .gallery-tab::before {
  background: radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(125deg, transparent, rgba(255, 255, 255, 0.08), transparent) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab::after,
html:not([data-theme="light"]) #gallery .gallery-tab::after {
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  pointer-events: none;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab:hover,
html:not([data-theme="light"]) #gallery .gallery-tab:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab.active,
html:not([data-theme="light"]) #gallery .gallery-tab.active {
  border-color: rgba(255, 255, 255, 0.32) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="life"],
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="life"] {
  background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(221, 158, 111, 0.2), rgba(255, 255, 255, 0.035)) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="moments"],
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="moments"] {
  background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(88, 163, 208, 0.22), rgba(255, 255, 255, 0.035)) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab-icon,
html:not([data-theme="light"]) #gallery .gallery-tab-icon {
  background: rgba(255, 255, 255, 0.075) !important;
  color: #8bd4ff !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab:hover .gallery-tab-icon,
html:not([data-theme="light"]) #gallery .gallery-tab:hover .gallery-tab-icon,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab.active .gallery-tab-icon,
html:not([data-theme="light"]) #gallery .gallery-tab.active .gallery-tab-icon {
  transform: scale(1.1) rotate(-3deg) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-category-desc,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-category-desc[data-category],
html:not([data-theme="light"]) #gallery .gallery-category-desc,
html:not([data-theme="light"]) #gallery .gallery-category-desc[data-category] {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(90deg, rgba(214, 121, 161, 0.12), rgba(255, 255, 255, 0.045), rgba(88, 163, 208, 0.11)),
    rgba(255, 255, 255, 0.035) !important;
  color: #f1a3be !important;
  -webkit-text-fill-color: #f1a3be !important;
  backdrop-filter: blur(16px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.06) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-expand-btn,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-collapse-btn,
html:not([data-theme="light"]) #gallery .gallery-expand-btn,
html:not([data-theme="light"]) #gallery .gallery-collapse-btn {
  transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-group,
html:not([data-theme="light"]) #gallery .gallery-month-group {
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-group::before,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-group::after,
html:not([data-theme="light"]) #gallery .gallery-month-group::before,
html:not([data-theme="light"]) #gallery .gallery-month-group::after {
  background: transparent !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading,
html:not([data-theme="light"]) #gallery .gallery-month-heading {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    radial-gradient(circle at 18% 18%, rgba(210, 164, 86, 0.14), transparent 38%),
    rgba(255, 255, 255, 0.028) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
  transform: translateZ(0);
  transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.2, 1), border-color 0.28s ease !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading:hover,
html:not([data-theme="light"]) #gallery .gallery-month-heading:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(210, 164, 86, 0.34) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading h3,
html:not([data-theme="light"]) #gallery .gallery-month-heading h3,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading h4,
html:not([data-theme="light"]) #gallery .gallery-date-heading h4 {
  background: linear-gradient(105deg, #f3a7c1 0%, #d7aa63 48%, #8bd4ff 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading span,
html:not([data-theme="light"]) #gallery .gallery-month-heading span {
  color: #f1a3be !important;
  -webkit-text-fill-color: #f1a3be !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading p,
html:not([data-theme="light"]) #gallery .gallery-month-heading p,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading p,
html:not([data-theme="light"]) #gallery .gallery-date-heading p {
  color: var(--gallery-dark-ink) !important;
  -webkit-text-fill-color: var(--gallery-dark-ink) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-toggle,
html:not([data-theme="light"]) #gallery .gallery-month-toggle {
  border: 1px solid rgba(241, 163, 190, 0.26) !important;
  background: rgba(241, 163, 190, 0.08) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-marker,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-marker,
html:not([data-theme="light"]) #gallery .gallery-month-marker,
html:not([data-theme="light"]) #gallery .gallery-date-marker {
  background: #f1a3be !important;
  border-color: #101827 !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group,
html:not([data-theme="light"]) #gallery .gallery-date-group {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.028)),
    radial-gradient(circle at 14% 12%, rgba(214, 121, 161, 0.18), transparent 36%),
    radial-gradient(circle at 92% 78%, rgba(88, 163, 208, 0.16), transparent 40%),
    radial-gradient(circle at 50% 95%, rgba(221, 158, 111, 0.1), transparent 36%) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
  animation: galleryDateBreath 9s ease-in-out infinite;
  transform: translateZ(0);
  transition: transform 0.46s cubic-bezier(0.2, 0.85, 0.2, 1), border-color 0.28s ease !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group:hover,
html:not([data-theme="light"]) #gallery .gallery-date-group:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group::before,
html:not([data-theme="light"]) #gallery .gallery-date-group::before {
  background: radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.14), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(88, 163, 208, 0.18), transparent 36%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(255, 255, 255, 0.06)) !important;
  opacity: 0.86 !important;
  animation: galleryPanelSheen 9s ease-in-out infinite reverse;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group::after,
html:not([data-theme="light"]) #gallery .gallery-date-group::after {
  left: 18px !important;
  right: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading,
html:not([data-theme="light"]) #gallery .gallery-date-heading {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    linear-gradient(90deg, rgba(214, 121, 161, 0.12), rgba(88, 163, 208, 0.1)) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-grid,
html:not([data-theme="light"]) #gallery .gallery-date-grid {
  gap: clamp(16px, 2vw, 24px) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item,
html:not([data-theme="light"]) #gallery .gallery-item {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.025) !important;
  overflow: hidden !important;
  transform: translateZ(0);
  transition: transform 0.54s cubic-bezier(0.2, 0.85, 0.2, 1),
    border-color 0.28s ease,
    background 0.28s ease !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item::before,
html:not([data-theme="light"]) #gallery .gallery-item::before {
  background: radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 42%, transparent 64%) !important;
  opacity: 0.72 !important;
  mix-blend-mode: screen !important;
  animation: galleryImageAura 7s ease-in-out infinite;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item::after,
html:not([data-theme="light"]) #gallery .gallery-item::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 36%, rgba(88, 163, 208, 0.08)),
    radial-gradient(ellipse at center, transparent 54%, rgba(255, 255, 255, 0.08) 100%) !important;
  opacity: 0.68 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item:hover,
html:not([data-theme="light"]) #gallery .gallery-item:hover {
  transform: translateY(-12px) scale(1.03) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item img,
html:not([data-theme="light"]) #gallery .gallery-item img {
  border-radius: 16px !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateZ(0) scale(1.01) !important;
  filter: brightness(1.06) contrast(1.04) saturate(1.08) sepia(0.012) !important;
  transition: transform 0.58s cubic-bezier(0.2, 0.85, 0.2, 1), filter 0.35s ease !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item:hover img,
html:not([data-theme="light"]) #gallery .gallery-item:hover img {
  transform: scale(1.05) !important;
  filter: brightness(1.1) contrast(1.05) saturate(1.12) sepia(0.01) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item .color-grade,
html:not([data-theme="light"]) #gallery .gallery-item .color-grade {
  background: radial-gradient(circle at 22% 16%, rgba(214, 121, 161, 0.18), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(88, 163, 208, 0.16), transparent 38%),
    linear-gradient(180deg, transparent 48%, rgba(255, 255, 255, 0.06)) !important;
  mix-blend-mode: soft-light !important;
  opacity: 0.82 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item .edge-light,
html:not([data-theme="light"]) #gallery .gallery-item .edge-light {
  opacity: 0.62 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.1)) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery,
html:not([data-theme="light"]) body.page-gallery #gallery *,
html:not([data-theme="light"]) body.page-gallery #gallery *::before,
html:not([data-theme="light"]) body.page-gallery #gallery *::after,
html:not([data-theme="light"]) #gallery,
html:not([data-theme="light"]) #gallery *,
html:not([data-theme="light"]) #gallery *::before,
html:not([data-theme="light"]) #gallery *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"]) body.page-gallery #gallery::before,
  html:not([data-theme="light"]) #gallery::before,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab::before,
  html:not([data-theme="light"]) #gallery .gallery-tab::before,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group,
  html:not([data-theme="light"]) #gallery .gallery-date-group,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group::before,
  html:not([data-theme="light"]) #gallery .gallery-date-group::before,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item::before,
  html:not([data-theme="light"]) #gallery .gallery-item::before {
    animation: none !important;
  }
}
/* Gallery dark theme: keep the upper controls exactly on the existing dark treatment. */
html:not([data-theme="light"]) body.page-gallery #gallery::before,
html:not([data-theme="light"]) body.page-gallery #gallery::after,
html:not([data-theme="light"]) #gallery::before,
html:not([data-theme="light"]) #gallery::after {
  content: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading,
html:not([data-theme="light"]) #gallery > .section-heading {
  width: min(920px, calc(100% - 32px)) !important;
  max-width: 920px !important;
  margin: 0 auto clamp(42px, 5.2vw, 76px) !important;
  padding: 0 clamp(12px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading::before,
html:not([data-theme="light"]) #gallery > .section-heading::before {
  content: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading::after,
html:not([data-theme="light"]) #gallery > .section-heading::after {
  content: "" !important;
  left: 50% !important;
  bottom: 0 !important;
  width: min(176px, 42%) !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.86), rgba(139, 193, 255, 0.66), transparent) !important;
  box-shadow: 0 0 20px rgba(232, 185, 102, 0.22) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading h2,
html:not([data-theme="light"]) #gallery > .section-heading h2 {
  margin: 0 !important;
  color: #fff8ed !important;
  background: none !important;
  font-size: clamp(34px, 4.4vw, 62px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(232, 185, 102, 0.16) !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading .eyebrow,
html:not([data-theme="light"]) #gallery > .section-heading .eyebrow {
  color: rgba(240, 198, 122, 0.9) !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery > .section-heading p:not(.eyebrow),
html:not([data-theme="light"]) #gallery > .section-heading p:not(.eyebrow) {
  color: rgba(245, 239, 226, 0.78) !important;
  background: transparent !important;
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.9 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tabs,
html:not([data-theme="light"]) #gallery .gallery-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(12px, 2vw, 20px) !important;
  margin-top: clamp(24px, 3vw, 36px) !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab,
html:not([data-theme="light"]) #gallery .gallery-tab {
  display: flex !important;
  align-items: center !important;
  gap: clamp(12px, 1.5vw, 16px) !important;
  min-height: initial !important;
  padding: clamp(16px, 2vw, 24px) !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: clamp(14px, 1.8vw, 18px) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: inherit !important;
  text-align: left !important;
  transform: none !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab:hover,
html:not([data-theme="light"]) #gallery .gallery-tab:hover {
  transform: translateY(-3px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab.active,
html:not([data-theme="light"]) #gallery .gallery-tab.active {
  transform: translateY(-3px) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab::before,
html:not([data-theme="light"]) #gallery .gallery-tab::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab:hover::before,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab.active::before,
html:not([data-theme="light"]) #gallery .gallery-tab:hover::before,
html:not([data-theme="light"]) #gallery .gallery-tab.active::before {
  opacity: 1 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab::after,
html:not([data-theme="light"]) #gallery .gallery-tab::after {
  content: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="self"],
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="self"] {
  background: rgba(255, 255, 255, 0.04) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="self"]::before,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="self"]::before {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.2), transparent) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="self"].active,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="self"].active {
  background: rgba(255, 182, 193, 0.12) !important;
  border-color: rgba(255, 182, 193, 0.4) !important;
  box-shadow: 0 8px 32px rgba(255, 182, 193, 0.15) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="life"]::before,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="life"]::before {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), transparent) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="life"].active,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="life"].active {
  background: rgba(255, 215, 0, 0.1) !important;
  border-color: rgba(255, 215, 0, 0.35) !important;
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.12) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="moments"]::before,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="moments"]::before {
  background: linear-gradient(135deg, rgba(135, 206, 250, 0.15), transparent) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="moments"].active,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="moments"].active {
  background: rgba(135, 206, 250, 0.1) !important;
  border-color: rgba(135, 206, 250, 0.35) !important;
  box-shadow: 0 8px 32px rgba(135, 206, 250, 0.12) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab-icon,
html:not([data-theme="light"]) #gallery .gallery-tab-icon {
  width: clamp(40px, 5vw, 52px) !important;
  height: clamp(40px, 5vw, 52px) !important;
  border: 0 !important;
  border-radius: clamp(10px, 1.2vw, 14px) !important;
  transform: none !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab.active .gallery-tab-icon,
html:not([data-theme="light"]) #gallery .gallery-tab.active .gallery-tab-icon {
  transform: scale(1.1) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="self"] .gallery-tab-icon,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="self"] .gallery-tab-icon {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(255, 182, 193, 0.1)) !important;
  color: rgba(255, 182, 193, 0.95) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="life"] .gallery-tab-icon,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="life"] .gallery-tab-icon {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.08)) !important;
  color: rgba(255, 215, 0, 0.95) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab[data-category="moments"] .gallery-tab-icon,
html:not([data-theme="light"]) #gallery .gallery-tab[data-category="moments"] .gallery-tab-icon {
  background: linear-gradient(135deg, rgba(135, 206, 250, 0.25), rgba(135, 206, 250, 0.08)) !important;
  color: rgba(135, 206, 250, 0.95) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab-title,
html:not([data-theme="light"]) #gallery .gallery-tab-title {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 700 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab-subtitle,
html:not([data-theme="light"]) #gallery .gallery-tab-subtitle {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: currentColor !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-category-desc,
html:not([data-theme="light"]) #gallery .gallery-category-desc {
  padding: clamp(12px, 1.5vw, 16px) !important;
  margin-bottom: clamp(20px, 2.5vw, 28px) !important;
  border-radius: clamp(12px, 1.5vw, 16px) !important;
  font-size: clamp(13px, 1.4vw, 16px) !important;
  font-style: italic !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-category-desc[data-category="self"],
html:not([data-theme="light"]) #gallery .gallery-category-desc[data-category="self"] {
  background: rgba(255, 182, 193, 0.08) !important;
  color: rgba(255, 200, 210, 0.9) !important;
  border: 1px solid rgba(255, 182, 193, 0.2) !important;
  -webkit-text-fill-color: currentColor !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-category-desc[data-category="life"],
html:not([data-theme="light"]) #gallery .gallery-category-desc[data-category="life"] {
  background: rgba(255, 215, 0, 0.06) !important;
  color: rgba(255, 225, 180, 0.9) !important;
  border: 1px solid rgba(255, 215, 0, 0.18) !important;
  -webkit-text-fill-color: currentColor !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-category-desc[data-category="moments"],
html:not([data-theme="light"]) #gallery .gallery-category-desc[data-category="moments"] {
  background: rgba(135, 206, 250, 0.06) !important;
  color: rgba(180, 230, 255, 0.9) !important;
  border: 1px solid rgba(135, 206, 250, 0.18) !important;
  -webkit-text-fill-color: currentColor !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-controls,
html:not([data-theme="light"]) #gallery .gallery-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 22px !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-control-group,
html:not([data-theme="light"]) #gallery .gallery-control-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 42px !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-control-group.active,
html:not([data-theme="light"]) #gallery .gallery-control-group.active {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 12px 34px rgba(8, 10, 18, 0.16) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-control-label,
html:not([data-theme="light"]) #gallery .gallery-control-label {
  min-width: 64px !important;
  padding: 0 8px 0 10px !important;
  color: rgba(251, 248, 244, 0.8) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-expand-btn,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-collapse-btn,
html:not([data-theme="light"]) #gallery .gallery-expand-btn,
html:not([data-theme="light"]) #gallery .gallery-collapse-btn {
  min-width: 72px !important;
  height: 32px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(251, 248, 244, 0.78) !important;
  -webkit-text-fill-color: currentColor !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-expand-btn:hover,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-collapse-btn:hover,
html:not([data-theme="light"]) #gallery .gallery-expand-btn:hover,
html:not([data-theme="light"]) #gallery .gallery-collapse-btn:hover {
  background: rgba(200, 167, 104, 0.15) !important;
  border-color: rgba(200, 167, 104, 0.3) !important;
  color: var(--gold) !important;
  transform: none !important;
}
/* Morandi Gallery Glass System - light theme. */
[data-theme="light"] body.page-gallery {
  --gallery-rose: #c98f9b;
  --gallery-rose-soft: rgba(201, 143, 155, 0.2);
  --gallery-sky: #7faeca;
  --gallery-sky-soft: rgba(127, 174, 202, 0.2);
  --gallery-peach: #ddb29d;
  --gallery-peach-soft: rgba(221, 178, 157, 0.18);
  --gallery-lavender: #afa3c7;
  --gallery-lavender-soft: rgba(175, 163, 199, 0.18);
  --gallery-gold: #b89a58;
  --gallery-gold-soft: rgba(184, 154, 88, 0.2);
  --gallery-muted: #6f7a84;
  --gallery-line: rgba(109, 142, 167, 0.24);
  --gallery-glass: rgba(255, 255, 255, 0.58);
  --gallery-glass-strong: rgba(255, 255, 255, 0.76);
}
[data-theme="light"] body.page-gallery #gallery {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: var(--gallery-ink) !important;
}
[data-theme="light"] body.page-gallery #gallery::before {
  position: absolute !important;
  inset: 18px clamp(10px, 4vw, 52px) 0 !important;
  z-index: -1 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
[data-theme="light"] body.page-gallery #gallery .section-heading h2,
[data-theme="light"] body.page-gallery #gallery .section-heading p,
[data-theme="light"] body.page-gallery #gallery .section-heading .eyebrow {
  color: var(--gallery-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery .section-heading .eyebrow {
  color: var(--gallery-rose) !important;
  letter-spacing: 0 !important;
}
[data-theme="light"] body.page-gallery #gallery .section-heading h2 {
  background: linear-gradient(115deg, #9f6f78, #607f98 48%, #9b8aaa) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: clamp(26px, 4vw, 42px) auto clamp(18px, 3vw, 28px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab,
[data-theme="light"] body.page-gallery #gallery .gallery-control-group,
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc,
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group,
[data-theme="light"] body.page-gallery #gallery .gallery-item,
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn,
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn {
  box-shadow: none !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 18px !important;
  color: var(--gallery-ink) !important;
  transform: none !important;
  transition: transform 0.45s ease, border-color 0.45s ease, background 0.45s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 16px !important;
  pointer-events: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 18px 12px 18px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: scaleX(0.24) !important;
  transform-origin: left center !important;
  transition: transform 0.45s ease, opacity 0.45s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab:hover::after,
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active::after {
  opacity: 0.46 !important;
  transform: scaleX(1) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab[data-category="self"] {
  color: var(--gallery-rose) !important;
  border-color: rgba(201, 143, 155, 0.28) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab[data-category="life"] {
  color: var(--gallery-gold) !important;
  border-color: rgba(184, 154, 88, 0.3) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab[data-category="moments"] {
  color: var(--gallery-sky) !important;
  border-color: rgba(127, 174, 202, 0.3) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-icon {
  position: relative !important;
  z-index: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: currentColor !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-title,
[data-theme="light"] body.page-gallery #gallery .gallery-tab-subtitle,
[data-theme="light"] body.page-gallery #gallery .gallery-control-label {
  position: relative !important;
  z-index: 1 !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-title {
  font-weight: 800 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-subtitle {
  color: rgba(82, 96, 108, 0.62) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc {
  margin: 0 auto clamp(18px, 3vw, 28px) !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  border-radius: 16px !important;
  color: var(--gallery-muted) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc[data-category="self"] {
  color: #986772 !important;
  border-color: rgba(201, 143, 155, 0.28) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 42px !important;
  padding: 5px !important;
  border-radius: 14px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group[data-category="self"] {
  color: var(--gallery-rose) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group[data-category="life"] {
  color: var(--gallery-gold) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group[data-category="moments"] {
  color: var(--gallery-sky) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn,
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn {
  height: 32px !important;
  min-width: 68px !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 10px !important;
  -webkit-text-fill-color: currentColor !important;
  transform: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn:hover,
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn:hover {
  border-color: color-mix(in srgb, currentColor 42%, white) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  transform: translateY(-1px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-timeline.category-self::before {
  background: linear-gradient(180deg, rgba(201, 143, 155, 0.5), rgba(201, 143, 155, 0.1)) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-timeline.category-life::before {
  background: linear-gradient(180deg, rgba(184, 154, 88, 0.52), rgba(184, 154, 88, 0.12)) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-timeline.category-moments::before {
  background: linear-gradient(180deg, rgba(127, 174, 202, 0.56), rgba(127, 174, 202, 0.12)) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.category-self {
  color: var(--gallery-rose) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.category-life {
  color: var(--gallery-gold) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.category-moments {
  color: var(--gallery-sky) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::before,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading::before,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading span,
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading h3,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading h4 {
  color: currentColor !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  letter-spacing: 0 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading p,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] body.page-gallery #gallery .gallery-caption p {
  color: var(--gallery-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group {
  border: 1px solid rgba(213, 229, 239, 0.86) !important;
  border-radius: 22px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group::before {
  background: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.64), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(127, 174, 202, 0.14), transparent 36%) !important;
  opacity: 1 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading {
  border: 1px solid rgba(219, 235, 245, 0.9) !important;
  border-radius: 16px !important;
  color: currentColor !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading::after {
  background: radial-gradient(circle at 88% 20%, color-mix(in srgb, currentColor 10%, transparent), transparent 42%) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.category-self {
  color: var(--gallery-rose) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.category-life {
  color: var(--gallery-gold) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.category-moments {
  color: var(--gallery-sky) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item,
[data-theme="light"] body.page-gallery #gallery .gallery-item {
  isolation: isolate !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  transform: translateX(-42%) !important;
  transition: opacity 0.45s ease !important;
  animation: galleryGlazeFlow 7s ease-in-out infinite !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
  image-rendering: auto !important;
  transform: none !important;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item:hover img {
  filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item .vignette,
[data-theme="light"] body.page-gallery #gallery .gallery-item .grain,
[data-theme="light"] body.page-gallery #gallery .gallery-item .color-grade,
[data-theme="light"] body.page-gallery #gallery .gallery-item .edge-light {
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .category-self .gallery-caption p,
[data-theme="light"] body.page-gallery #gallery .gallery-timeline.category-self .gallery-caption p {
  color: #986772 !important;
}
[data-theme="light"] body.page-gallery #gallery .category-life .gallery-caption p,
[data-theme="light"] body.page-gallery #gallery .gallery-timeline.category-life .gallery-caption p {
  color: #88713c !important;
}
[data-theme="light"] body.page-gallery #gallery .category-moments .gallery-caption p,
[data-theme="light"] body.page-gallery #gallery .gallery-timeline.category-moments .gallery-caption p {
  color: #587f99 !important;
}
[data-theme="light"] body.page-gallery .lightbox {
  background: radial-gradient(circle at 18% 18%, rgba(201, 143, 155, 0.26), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(127, 174, 202, 0.24), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(221, 178, 157, 0.22), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(175, 163, 199, 0.2), transparent 34%),
    rgba(248, 252, 255, 0.86) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
[data-theme="light"] body.page-gallery .lightbox-media-frame::after {
  border-color: rgba(255, 255, 255, 0.46) !important;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(255, 255, 255, 0.08) 58%, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-gallery #lightboxImage,
[data-theme="light"] body.page-gallery .lightbox img,
[data-theme="light"] body.page-gallery .lightbox-content img {
  filter: none !important;
  box-shadow: none !important;
}
@keyframes galleryMorandiBreath {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.92;
  }
  100% {
    transform: translate3d(0, -10px, 0) scale(1.015);
    opacity: 1;
  }
}
@keyframes galleryGlazeFlow {
  0%, 30% {
    transform: translateX(-48%) skewX(-8deg);
  }
  58%, 100% {
    transform: translateX(52%) skewX(-8deg);
  }
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery .gallery-tabs {
    grid-template-columns: 1fr !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-controls {
    margin-left: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] body.page-gallery #gallery::before,
  [data-theme="light"] body.page-gallery #gallery .gallery-item::before {
    animation: none !important;
  }
}
/* Gallery visual quieting pass - match the quote page light background. */
[data-theme="light"] body.page-gallery main {
  background: transparent !important;
}
[data-theme="light"] body.page-gallery #gallery {
  max-width: min(1500px, calc(100vw - clamp(28px, 7vw, 120px))) !important;
  margin-inline: auto !important;
  padding-top: clamp(118px, 14vh, 170px) !important;
  background: transparent !important;
}
[data-theme="light"] body.page-gallery #gallery::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  filter: none !important;
  animation: none !important;
}
[data-theme="light"] body.page-gallery #gallery .section-heading {
  max-width: 780px !important;
  margin-bottom: clamp(32px, 5vw, 58px) !important;
  padding: clamp(18px, 2.6vw, 30px) clamp(16px, 4vw, 34px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery .section-heading h2 {
  font-size: clamp(46px, 6.5vw, 78px) !important;
  line-height: 1.04 !important;
  opacity: 0.9 !important;
}
[data-theme="light"] body.page-gallery #gallery .section-heading p:not(.eyebrow) {
  max-width: 36em !important;
  margin-inline: auto !important;
  color: rgba(64, 78, 94, 0.74) !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.86 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tabs {
  max-width: 1180px !important;
  margin-inline: auto !important;
  margin-bottom: clamp(18px, 3vw, 28px) !important;
  gap: clamp(12px, 1.8vw, 18px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab {
  padding: clamp(13px, 1.6vw, 18px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.34), transparent 42%) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab::after {
  height: 1px !important;
  opacity: 0.22 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab:hover,
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active {
  transform: translateY(-2px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-icon {
  width: 42px !important;
  height: 42px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-title {
  font-size: clamp(18px, 1.8vw, 24px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc {
  max-width: 1180px !important;
  padding: 12px 18px !important;
  border-color: rgba(124, 145, 164, 0.13) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(10px) saturate(1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-controls {
  max-width: 1180px !important;
  margin: 0 auto clamp(18px, 3vw, 34px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group {
  background: rgba(255, 255, 255, 0.32) !important;
  border-color: rgba(124, 145, 164, 0.14) !important;
  backdrop-filter: blur(10px) saturate(1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn,
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn {
  border-color: rgba(124, 145, 164, 0.12) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-timeline {
  margin-inline: auto !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker {
  border-color: rgba(255, 255, 255, 0.7) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading {
  border-color: rgba(124, 145, 164, 0.13) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::before,
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::after {
  opacity: 0.28 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle {
  border-color: rgba(124, 145, 164, 0.12) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-content {
  gap: clamp(18px, 2.6vw, 28px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group {
  padding: clamp(20px, 3vw, 28px) !important;
  border-color: rgba(186, 212, 229, 0.48) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(241, 248, 253, 0.3)),
    radial-gradient(circle at 94% 0%, rgba(127, 174, 202, 0.07), transparent 34%) !important;
  backdrop-filter: blur(10px) saturate(1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group::before,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group::after {
  opacity: 0.22 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading {
  margin-bottom: clamp(16px, 2.4vw, 24px) !important;
  padding: 12px 16px !important;
  border-color: rgba(186, 212, 229, 0.46) !important;
  background: rgba(247, 252, 255, 0.42) !important;
  backdrop-filter: blur(8px) saturate(1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading h4 {
  font-size: clamp(24px, 3.2vw, 38px) !important;
  opacity: 0.78 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading p {
  color: rgba(64, 78, 94, 0.72) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item,
[data-theme="light"] body.page-gallery #gallery .gallery-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item::before {
  opacity: 0.12 !important;
  background: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, 0.24) 42%, transparent 56%) !important;
  animation-duration: 12s !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item::after {
  inset: 0 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: transparent !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item:hover::before {
  opacity: 0.22 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item:hover {
  transform: translateY(-3px) scale(1.006) !important;
  border-color: rgba(100, 116, 139, 0.2) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-item:hover img {
  transform: scale(1.012) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-caption {
  border-top-color: rgba(255, 255, 255, 0.28) !important;
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery {
    max-width: calc(100vw - 22px) !important;
    padding-top: 104px !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-date-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
}
/* Gallery month cards - calm editorial redesign. */
[data-theme="light"] body.page-gallery #gallery .gallery-month-group {
  --month-accent: #7faeca;
  --month-accent-soft: rgba(127, 174, 202, 0.12);
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.category-self {
  --month-accent: #b98591;
  --month-accent-soft: rgba(185, 133, 145, 0.1);
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.category-life {
  --month-accent: #a78a4b;
  --month-accent-soft: rgba(167, 138, 75, 0.1);
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.category-moments {
  --month-accent: #6f9db9;
  --month-accent-soft: rgba(111, 157, 185, 0.12);
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "label toggle"
    "title toggle"
    "meta toggle" !important;
  align-items: center !important;
  min-height: 132px !important;
  padding: clamp(22px, 2.8vw, 32px) clamp(22px, 3.2vw, 38px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(172, 195, 211, 0.34) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(245, 250, 253, 0.34)),
    linear-gradient(90deg, var(--month-accent-soft), transparent 42%) !important;
  color: #48596a !important;
  box-shadow: none !important;
  backdrop-filter: blur(9px) saturate(1) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1) !important;
  transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px auto 18px 0 !important;
  width: 4px !important;
  height: auto !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--month-accent) !important;
  opacity: 0.46 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%),
    radial-gradient(circle at 100% 0%, rgba(127, 174, 202, 0.08), transparent 34%) !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--month-accent) 34%, rgba(172, 195, 211, 0.34)) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(245, 250, 253, 0.42)),
    linear-gradient(90deg, var(--month-accent-soft), transparent 44%) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading span {
  grid-area: label !important;
  position: relative !important;
  z-index: 1 !important;
  width: fit-content !important;
  margin: 0 0 7px !important;
  padding: 4px 9px !important;
  border: 1px solid color-mix(in srgb, var(--month-accent) 18%, rgba(255, 255, 255, 0.7)) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.38) !important;
  color: var(--month-accent) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  opacity: 0.9 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading h3 {
  grid-area: title !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: #526375 !important;
  font-family: "Noto Serif SC", "Songti SC", serif !important;
  font-size: clamp(34px, 3.9vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading p {
  grid-area: meta !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 8px 0 0 !important;
  color: rgba(72, 89, 106, 0.76) !important;
  font-size: clamp(14px, 1.2vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle {
  grid-area: toggle !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: 1 !important;
  width: 40px !important;
  height: 40px !important;
  transform: none !important;
  border: 1px solid rgba(172, 195, 211, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  color: var(--month-accent) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading:hover .gallery-month-toggle {
  border-color: color-mix(in srgb, var(--month-accent) 28%, rgba(172, 195, 211, 0.32)) !important;
  background: rgba(255, 255, 255, 0.56) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle i {
  font-size: 15px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-toggle i {
  transform: rotate(-90deg) !important;
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery .gallery-month-heading {
    min-height: 118px !important;
    padding: 18px 18px 18px 20px !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-month-heading h3 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }
}
/* Gallery expanded state - one calm rose-to-blue field. */
[data-theme="light"] body.page-gallery.gallery-has-expanded {
  background: linear-gradient(115deg, #f9e4eb 0%, #f8fbff 46%, #dff2f8 100%) !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  filter: none !important;
  opacity: 0 !important;
  animation: none !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded main {
  background: transparent !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery {
  border-radius: 30px !important;
  background: transparent !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery::before {
  content: none !important;
  display: none !important;
  position: absolute !important;
  inset: auto !important;
  z-index: -1 !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-timeline::before {
  background: linear-gradient(180deg, rgba(188, 134, 148, 0.24), rgba(111, 157, 185, 0.18)) !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading {
  border-color: rgba(140, 164, 184, 0.18) !important;
  background: rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(7px) saturate(1) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1) !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading::before {
  width: 3px !important;
  opacity: 0.32 !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading::after {
  opacity: 0.16 !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading h3 {
  color: #4e6072 !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading span,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-toggle {
  background: rgba(255, 255, 255, 0.28) !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group {
  border-color: rgba(140, 164, 184, 0.16) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group::after {
  content: none !important;
  display: none !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading {
  border-color: rgba(140, 164, 184, 0.16) !important;
  background: rgba(255, 255, 255, 0.26) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading h4 {
  color: #bf8793 !important;
  opacity: 0.86 !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-item {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-item::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-item::after {
  opacity: 0.08 !important;
}
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-caption {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3)) !important;
}
/* Gallery page fixed canvas - same background in every state and scroll position. */
:root[data-theme="light"]:has(body.page-gallery) {
  background: radial-gradient(circle at 13% 10%, rgba(244, 167, 197, 0.58), transparent 448px),
    radial-gradient(circle at 88% 14%, rgba(125, 175, 232, 0.58), transparent 512px),
    radial-gradient(circle at 64% 78%, rgba(200, 166, 255, 0.28), transparent 448px),
    radial-gradient(circle at 20% 78%, rgba(139, 216, 244, 0.24), transparent 416px),
    linear-gradient(135deg, rgb(248, 251, 255) 0%, rgb(238, 247, 255) 43%, rgb(255, 241, 248) 72%, rgb(228, 242, 255) 100%) fixed !important;
}
[data-theme="light"] body.page-gallery,
[data-theme="light"] body.page-gallery.gallery-has-expanded {
  background: radial-gradient(circle at 13% 10%, rgba(244, 167, 197, 0.58), transparent 448px),
    radial-gradient(circle at 88% 14%, rgba(125, 175, 232, 0.58), transparent 512px),
    radial-gradient(circle at 64% 78%, rgba(200, 166, 255, 0.28), transparent 448px),
    radial-gradient(circle at 20% 78%, rgba(139, 216, 244, 0.24), transparent 416px),
    linear-gradient(135deg, rgb(248, 251, 255) 0%, rgb(238, 247, 255) 43%, rgb(255, 241, 248) 72%, rgb(228, 242, 255) 100%) fixed !important;
  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  background-repeat: no-repeat !important;
}
[data-theme="light"] body.page-gallery::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded::before {
  content: "" !important;
  display: block !important;
  background: radial-gradient(circle at 12% 18%, rgba(244, 167, 197, 0.42), transparent 448px),
    radial-gradient(circle at 86% 22%, rgba(125, 175, 232, 0.46), transparent 544px),
    radial-gradient(circle at 54% 74%, rgba(200, 166, 255, 0.24), transparent 480px),
    radial-gradient(circle at 34% 54%, rgba(255, 255, 255, 0.55), transparent 352px) !important;
  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  opacity: 1 !important;
  filter: blur(22px) saturate(1.12) !important;
  animation: none !important;
}
[data-theme="light"] body.page-gallery::after,
[data-theme="light"] body.page-gallery.gallery-has-expanded::after {
  content: "" !important;
  display: block !important;
  background: linear-gradient(rgba(26, 86, 160, 0.043) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 86, 160, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.86), transparent 448px) !important;
  background-attachment: fixed !important;
  background-size: 120px 120px, 120px 120px, 100vw 100vh !important;
  opacity: 0.58 !important;
  filter: none !important;
  animation: none !important;
}
[data-theme="light"] body.page-gallery main,
[data-theme="light"] body.page-gallery.gallery-has-expanded main,
[data-theme="light"] body.page-gallery #gallery,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery,
[data-theme="light"] body.page-gallery #gallery::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery::before {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}
[data-theme="light"] body.page-gallery #gallery::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery::before {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  z-index: -1 !important;
  border: 1px solid rgba(200, 190, 180, 0.25) !important;
  border-radius: 32px !important;
  background-attachment: fixed !important;
  pointer-events: none !important;
}
/* Gallery timeline final pass - inspired by the audio drama detail cards. */
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading {
  display: grid !important;
  transform: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: linear-gradient(180deg, #d99aaa, #9abfce) !important;
  opacity: 0.7 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-toggle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  border-radius: 999px !important;
  transform: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle i {
  color: currentColor !important;
}
/* Image groups become a quiet horizontal film strip. */
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: clamp(16px, 2vw, 22px) !important;
  overflow: visible !important;
  padding: 4px !important;
  scroll-snap-type: none !important;
  mask-image: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: clamp(18px, 2.2vw, 24px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 4px 18px !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  scroll-padding-inline: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(151, 174, 194, 0.42) rgba(255, 255, 255, 0.22) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 46px), transparent 100%) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid::-webkit-scrollbar {
  height: 8px;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 154, 170, 0.48), rgba(139, 183, 203, 0.52));
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item,
[data-theme="light"] body.page-gallery #gallery .gallery-item {
  flex: initial !important;
  width: auto !important;
  max-width: 310px !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
  border-radius: 16px !important;
  transition: transform 0.34s ease, border-color 0.34s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid .gallery-item {
  flex: 0 0 clamp(248px, 31.5%, 340px) !important;
  max-width: 340px !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item:hover {
  border-color: rgba(255, 255, 255, 0.62) !important;
}
/* Gallery lightbox: refined blue-pink canvas for photo viewing. */
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active {
  background: linear-gradient(
      135deg,
      #f6dce8 0%,
      #f8eef5 19%,
      #f7fbff 43%,
      #e3f2fb 67%,
      #cbe6f1 100%
    ) fixed !important;
  background-size: 100vw 100vh !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.04) !important;
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery .gallery-timeline {
    max-width: calc(100vw - 28px) !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
  [data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading {
    min-height: 104px !important;
    padding: 16px 16px 16px 18px !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item,
  [data-theme="light"] body.page-gallery #gallery .gallery-item {
    flex-basis: min(72vw, 260px) !important;
  }
}
/* Gallery light theme final refinement: clean, image-led glass. */
[data-theme="light"] body.page-gallery {
  --gallery-ink: #415568;
  --gallery-ink-soft: #637589;
  --gallery-ink-muted: #8795a4;
  --gallery-rose-ink: #b06f82;
  --gallery-sky-ink: #5d91ae;
  --gallery-card-glass: radial-gradient(circle at 9% 6%, rgba(255, 226, 236, 0.44), transparent 34%),
    radial-gradient(circle at 96% 14%, rgba(210, 235, 249, 0.52), transparent 38%),
    linear-gradient(138deg, rgba(255, 255, 255, 0.7), rgba(250, 253, 255, 0.46) 52%, rgba(246, 251, 255, 0.36));
  --gallery-card-line: rgba(255, 255, 255, 0.78);
}
[data-theme="light"] body.page-gallery #gallery::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery::before {
  inset: 36px clamp(18px, 4.5vw, 64px) !important;
  border-color: rgba(255, 255, 255, 0.54) !important;
  background: radial-gradient(circle at 20% 10%, rgba(255, 225, 236, 0.36), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(214, 235, 248, 0.42), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(249, 253, 255, 0.32)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tabs,
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc,
[data-theme="light"] body.page-gallery #gallery .gallery-controls {
  max-width: min(1180px, calc(100vw - 72px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab {
  min-height: 98px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab::before {
  opacity: 0 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active,
[data-theme="light"] body.page-gallery #gallery .gallery-tab:hover {
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: radial-gradient(circle at 14% 12%, rgba(255, 231, 240, 0.58), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(215, 238, 250, 0.64), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(248, 252, 255, 0.48)) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-title {
  color: var(--gallery-rose-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab[data-category="life"] .gallery-tab-title {
  color: #aa7a32 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab[data-category="moments"] .gallery-tab-title {
  color: var(--gallery-sky-ink) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab-subtitle,
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc,
[data-theme="light"] body.page-gallery #gallery .gallery-control-label {
  color: var(--gallery-ink-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-timeline {
  max-width: min(1180px, calc(100vw - 72px)) !important;
  gap: clamp(24px, 3.2vw, 44px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-timeline::before,
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker {
  display: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group {
  margin-bottom: clamp(24px, 3vw, 44px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading {
  border-color: var(--gallery-card-line) !important;
  color: var(--gallery-ink) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading::before {
  display: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading span,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading span {
  border-color: rgba(176, 111, 130, 0.18) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading p,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading p {
  border-color: rgba(99, 117, 137, 0.12) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-toggle {
  border-color: rgba(99, 117, 137, 0.12) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.34), transparent 34%, rgba(210, 235, 249, 0.18)),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.5), transparent 30%) !important;
  opacity: 0.68 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group::after,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group::after {
  content: "" !important;
  position: absolute !important;
  top: -52% !important;
  bottom: -52% !important;
  left: -74% !important;
  right: auto !important;
  width: 46% !important;
  height: auto !important;
  border-radius: 0 !important;
  background: linear-gradient(
      104deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 24%,
      rgba(255, 255, 255, 0.72) 48%,
      rgba(202, 232, 250, 0.42) 58%,
      transparent 78%
    ) !important;
  opacity: 0;
  transform: translateX(0) rotate(13deg);
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact::after,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group.is-compact::after {
  animation: galleryCompactDateShine 5.8s cubic-bezier(0.45, 0, 0.2, 1) infinite !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid {
  position: relative !important;
  z-index: 2 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading {
  margin-bottom: 18px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading::before,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading::after {
  display: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading p {
  border-color: rgba(99, 117, 137, 0.12) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item,
[data-theme="light"] body.page-gallery #gallery .gallery-item {
  border-color: rgba(255, 255, 255, 0.82) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item:hover {
  transform: translateY(-5px) scale(1.012) !important;
  box-shadow: 0 18px 34px rgba(65, 85, 104, 0.16) !important;
}
@keyframes galleryCompactDateShine {
  0%,
  34% {
    opacity: 0;
    transform: translateX(0) rotate(13deg);
  }
  46% {
    opacity: 0.82;
  }
  64% {
    opacity: 0;
    transform: translateX(430%) rotate(13deg);
  }
  100% {
    opacity: 0;
    transform: translateX(430%) rotate(13deg);
  }
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery .gallery-tabs,
  [data-theme="light"] body.page-gallery #gallery .gallery-category-desc,
  [data-theme="light"] body.page-gallery #gallery .gallery-controls,
  [data-theme="light"] body.page-gallery #gallery .gallery-timeline {
    max-width: calc(100vw - 28px) !important;
  }
}
/* Keep the gallery month timeline visible in the final light-theme pass. */
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: inherit !important;
  opacity: 0.72 !important;
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery .gallery-month-marker {
    left: 0 !important;
  }
}
/* Visible shine for compact photo groups: apply the glass sweep to each image. */
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group.is-compact .gallery-item::before {
  content: "" !important;
  position: absolute !important;
  top: -52% !important;
  bottom: -52% !important;
  left: -86% !important;
  right: auto !important;
  width: 58% !important;
  height: auto !important;
  inset-inline-start: -86% !important;
  border-radius: 0 !important;
  background: linear-gradient(
      106deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 22%,
      rgba(255, 255, 255, 0.78) 48%,
      rgba(206, 235, 250, 0.48) 60%,
      transparent 82%
    ) !important;
  opacity: 0;
  mix-blend-mode: screen !important;
  transform: translateX(0) rotate(13deg);
  animation: galleryCompactPhotoShine 4.2s cubic-bezier(0.42, 0, 0.18, 1) infinite !important;
  pointer-events: none !important;
  z-index: 8 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item:nth-child(2)::before {
  animation-delay: 0.35s !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item:nth-child(3)::before {
  animation-delay: 0.7s !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item .vignette,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item .grain,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item .color-grade,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item .edge-light {
  pointer-events: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item .edge-light,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group.is-compact .gallery-item .edge-light {
  position: absolute !important;
  top: -42% !important;
  bottom: -42% !important;
  left: -72% !important;
  right: auto !important;
  width: 44% !important;
  height: auto !important;
  opacity: 1 !important;
  z-index: 9 !important;
  border-radius: 0 !important;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.46), transparent) !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  transform: rotate(12deg);
  animation: dramaPosterShine 7.5s ease-in-out infinite !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item:nth-child(2) .edge-light {
  animation-delay: 0.45s !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-compact .gallery-item:nth-child(3) .edge-light {
  animation-delay: 0.9s !important;
}
@keyframes galleryCompactPhotoShine {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(13deg);
  }
  12%,
  42% {
    opacity: 0.9;
  }
  58% {
    opacity: 0;
    transform: translateX(360%) rotate(13deg);
  }
  100% {
    opacity: 0;
    transform: translateX(360%) rotate(13deg);
  }
}
/* Light gallery timeline should keep the same line-and-dot form as dark mode. */
[data-theme="light"] body.page-gallery #gallery .gallery-timeline::before {
  display: block !important;
  left: 10px !important;
  width: 2px !important;
  opacity: 1 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group {
  padding-left: 38px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker {
  box-sizing: border-box !important;
  display: block !important;
  left: 1px !important;
  top: 42px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background-clip: content-box !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker::after {
  display: none !important;
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery .gallery-timeline::before {
    left: 9px !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-month-group {
    padding-left: 32px !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-month-marker {
    top: 34px !important;
    width: 18px !important;
    height: 18px !important;
    border-width: 4px !important;
  }
}
/* Gallery lightbox final pass: quieter controls, transparent depth, image-first layout. */
[data-theme="light"] body.page-gallery .lightbox.open,
[data-theme="light"] body.page-gallery .lightbox.active {
  padding: clamp(22px, 4vh, 42px) clamp(18px, 4vw, 54px) !important;
}
[data-theme="light"] body.page-gallery .lightbox.open::before,
[data-theme="light"] body.page-gallery .lightbox.active::before {
  border: 1px solid rgba(255, 255, 255, 0.46) !important;
  border-radius: clamp(24px, 3vw, 38px) !important;
}
[data-theme="light"] body.page-gallery .lightbox-content {
  position: relative !important;
  z-index: 2 !important;
  width: min-content !important;
  max-width: min(92vw, 1240px) !important;
  filter: none !important;
}
[data-theme="light"] body.page-gallery .lightbox-media-frame {
  --lb-tool-size: 44px;
  --lb-tool-gap: clamp(18px, 2.2vw, 34px);
  --lb-side-offset: clamp(58px, 5.2vw, 88px);
  position: relative !important;
  overflow: visible !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
[data-theme="light"] body.page-gallery .lightbox-media-frame::before {
  inset: -10px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 26px 80px rgba(48, 67, 91, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.32),
    0 0 120px rgba(172, 207, 228, 0.18) !important;
  filter: none !important;
  opacity: 1 !important;
}
[data-theme="light"] body.page-gallery .lightbox-media-frame::after {
  display: none !important;
}
[data-theme="light"] body.page-gallery #lightboxImage {
  max-width: min(74vw, 1040px) !important;
  max-height: min(82vh, 980px) !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 72px rgba(38, 54, 76, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.46) !important;
  filter: saturate(1.02) contrast(1.01) brightness(1.01) !important;
}
[data-theme="light"] body.page-gallery .lightbox-media-frame.is-portrait #lightboxImage {
  height: min(82vh, 980px) !important;
  width: auto !important;
  max-width: min(74vw, 1040px) !important;
}
[data-theme="light"] body.page-gallery .lightbox-media-frame.is-landscape #lightboxImage,
[data-theme="light"] body.page-gallery .lightbox-media-frame.is-square #lightboxImage {
  width: auto !important;
  height: auto !important;
  max-width: min(82vw, 1120px) !important;
  max-height: min(80vh, 920px) !important;
}
[data-theme="light"] body.page-gallery .lightbox-nav,
[data-theme="light"] body.page-gallery .lightbox-close,
[data-theme="light"] body.page-gallery .camera-particle-trigger,
[data-theme="light"] body.page-gallery .particle-burst-trigger {
  width: var(--lb-tool-size) !important;
  height: var(--lb-tool-size) !important;
  min-width: var(--lb-tool-size) !important;
  min-height: var(--lb-tool-size) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.78), transparent 34%),
    rgba(255, 255, 255, 0.34) !important;
  color: #284a74 !important;
  box-shadow: 0 12px 28px rgba(48, 67, 91, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
[data-theme="light"] body.page-gallery .lightbox-nav:hover,
[data-theme="light"] body.page-gallery .lightbox-close:hover,
[data-theme="light"] body.page-gallery .camera-particle-trigger:hover,
[data-theme="light"] body.page-gallery .particle-burst-trigger:hover {
  border-color: rgba(255, 255, 255, 0.82) !important;
  background: radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.9), transparent 34%),
    rgba(255, 255, 255, 0.48) !important;
  color: #9e6b78 !important;
  box-shadow: 0 16px 34px rgba(48, 67, 91, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
[data-theme="light"] body.page-gallery .camera-particle-trigger {
  left: calc(-1 * var(--lb-side-offset)) !important;
  top: 10px !important;
  right: auto !important;
  font-size: 18px !important;
  transform: none !important;
}
[data-theme="light"] body.page-gallery .lightbox-close {
  right: calc(-1 * var(--lb-side-offset)) !important;
  top: 10px !important;
  left: auto !important;
  font-size: 28px !important;
  transform: none !important;
}
[data-theme="light"] body.page-gallery .lightbox-prev {
  left: calc(-1 * var(--lb-side-offset)) !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
[data-theme="light"] body.page-gallery .lightbox-next {
  right: calc(-1 * var(--lb-side-offset)) !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
[data-theme="light"] body.page-gallery .lightbox-prev:hover,
[data-theme="light"] body.page-gallery .lightbox-next:hover {
  transform: translateY(-50%) scale(1.04) !important;
}
[data-theme="light"] body.page-gallery .particle-burst-trigger {
  right: calc(-1 * var(--lb-side-offset)) !important;
  bottom: 10px !important;
  top: auto !important;
  left: auto !important;
}
[data-theme="light"] body.page-gallery .particle-shape-controls {
  left: calc(-1 * var(--lb-side-offset)) !important;
  bottom: 8px !important;
  top: auto !important;
  display: inline-flex !important;
  gap: 6px !important;
  padding: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 12px 26px rgba(48, 67, 91, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(16px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.06) !important;
}
[data-theme="light"] body.page-gallery .particle-shape-controls button {
  height: 30px !important;
  min-width: 56px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(48, 67, 91, 0.72) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
[data-theme="light"] body.page-gallery .particle-shape-controls button:hover,
[data-theme="light"] body.page-gallery .particle-shape-controls button.active {
  background: rgba(255, 255, 255, 0.64) !important;
  color: #9e6b78 !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-gallery .lightbox-caption,
[data-theme="light"] body.page-gallery #lightboxCaption {
  bottom: clamp(14px, 2.2vh, 24px) !important;
  max-width: min(68vw, 460px) !important;
  padding: 9px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.46) !important;
  color: #42586d !important;
  box-shadow: 0 12px 28px rgba(48, 67, 91, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
@media (max-width: 900px) {
  [data-theme="light"] body.page-gallery .lightbox-media-frame {
    --lb-tool-size: 40px;
    --lb-side-offset: 0px;
  }
  [data-theme="light"] body.page-gallery #lightboxImage,
  [data-theme="light"] body.page-gallery .lightbox-media-frame.is-portrait #lightboxImage,
  [data-theme="light"] body.page-gallery .lightbox-media-frame.is-landscape #lightboxImage,
  [data-theme="light"] body.page-gallery .lightbox-media-frame.is-square #lightboxImage {
    max-width: 88vw !important;
    max-height: 76vh !important;
  }
  [data-theme="light"] body.page-gallery .camera-particle-trigger {
    left: 10px !important;
    top: 10px !important;
  }
  [data-theme="light"] body.page-gallery .lightbox-close {
    right: 10px !important;
    top: 10px !important;
  }
  [data-theme="light"] body.page-gallery .lightbox-prev {
    left: 10px !important;
  }
  [data-theme="light"] body.page-gallery .lightbox-next {
    right: 10px !important;
  }
  [data-theme="light"] body.page-gallery .particle-shape-controls {
    left: 10px !important;
    bottom: 10px !important;
  }
  [data-theme="light"] body.page-gallery .particle-burst-trigger {
    right: 10px !important;
    bottom: 10px !important;
  }
}
/* Gallery lightbox: remove the large tinted/frosted backdrop panels. */
[data-theme="light"] body.page-gallery .lightbox.open,
[data-theme="light"] body.page-gallery .lightbox.active {
  background-image: none !important;
}
[data-theme="light"] body.page-gallery .lightbox.open::before,
[data-theme="light"] body.page-gallery .lightbox.active::before,
[data-theme="light"] body.page-gallery .lightbox.open::after,
[data-theme="light"] body.page-gallery .lightbox.active::after,
[data-theme="light"] body.page-gallery .lightbox-media-frame::before,
[data-theme="light"] body.page-gallery .lightbox-media-frame::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Gallery lightbox backdrop: unified premium dark viewing scrim for both themes. */
body.page-gallery .lightbox.open,
body.page-gallery .lightbox.active {
  background: radial-gradient(ellipse at 16% 18%, rgba(196, 126, 150, 0.24), transparent 36%),
    radial-gradient(ellipse at 86% 20%, rgba(92, 132, 162, 0.28), transparent 40%),
    radial-gradient(ellipse at 50% 108%, rgba(22, 42, 55, 0.52), transparent 46%),
    linear-gradient(135deg, rgba(30, 28, 36, 0.72), rgba(20, 29, 39, 0.78)) !important;
  background-color: rgba(18, 24, 32, 0.78) !important;
  backdrop-filter: blur(18px) saturate(0.9) brightness(0.78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(0.9) brightness(0.78) !important;
}
body.page-gallery .lightbox.open::before,
body.page-gallery .lightbox.active::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  border: 0 !important;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(4, 10, 16, 0.36) 100%),
    linear-gradient(90deg, rgba(11, 14, 22, 0.36), transparent 18%, transparent 82%, rgba(11, 14, 22, 0.34)) !important;
  box-shadow: inset 0 0 120px rgba(3, 7, 12, 0.32) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.page-gallery .lightbox.open::after,
body.page-gallery .lightbox.active::after,
body.page-gallery .lightbox-media-frame::before,
body.page-gallery .lightbox-media-frame::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
/* While the gallery lightbox is open, let the dark scrim control the viewing stage. */
html.lightbox-viewer-open,
html:has(body.page-gallery.lightbox-viewer-open),
body.page-gallery.lightbox-viewer-open {
  background: #111a24 !important;
  background-color: #111a24 !important;
}
body.page-gallery.lightbox-viewer-open::before,
body.page-gallery.lightbox-viewer-open::after,
body.page-gallery.lightbox-viewer-open main,
body.page-gallery.lightbox-viewer-open #gallery,
body.page-gallery.lightbox-viewer-open #gallery::before,
body.page-gallery.lightbox-viewer-open #gallery::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
/* Gallery lightbox final color and particle-control tuning. */
[data-theme="light"] body.page-gallery .lightbox.open::before,
[data-theme="light"] body.page-gallery .lightbox.active::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.page-gallery .lightbox-media-frame {
  --lb-tool-size: 38px !important;
  --lb-side-offset: clamp(52px, 4.8vw, 78px) !important;
}
body.page-gallery .lightbox-nav,
body.page-gallery .lightbox-close,
body.page-gallery .camera-particle-trigger,
body.page-gallery .particle-burst-trigger {
  width: var(--lb-tool-size) !important;
  height: var(--lb-tool-size) !important;
  min-width: var(--lb-tool-size) !important;
  min-height: var(--lb-tool-size) !important;
  font-size: 21px !important;
  box-shadow: 0 8px 20px rgba(12, 18, 28, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
body.page-gallery .lightbox-close {
  font-size: 24px !important;
}
body.page-gallery #lightboxCaption strong {
  white-space: nowrap !important;
}
body.page-gallery .lightbox-caption span,
body.page-gallery #lightboxCaption span {
  display: none !important;
}
body.page-gallery.particle-fullscreen-active .camera-gesture-text,
body.particle-fullscreen-active.page-gallery .camera-gesture-text {
  top: clamp(28px, 4vh, 52px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(640px, calc(100vw - 56px)) !important;
  max-width: min(640px, calc(100vw - 56px)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #18c9ff !important;
  text-align: center !important;
  text-shadow: 0 0 18px rgba(24, 201, 255, 0.45) !important;
}
body.page-gallery.particle-fullscreen-active .gesture-text-cn,
body.page-gallery.particle-fullscreen-active .gesture-text-en {
  color: #18c9ff !important;
  -webkit-text-fill-color: #18c9ff !important;
  text-shadow: 0 0 18px rgba(24, 201, 255, 0.42) !important;
}
body.page-gallery.particle-fullscreen-active .particle-shape-controls,
body.particle-fullscreen-active.page-gallery .particle-shape-controls {
  left: clamp(34px, 4vw, 54px) !important;
  right: auto !important;
  bottom: clamp(30px, 4vh, 52px) !important;
  top: auto !important;
  transform: none !important;
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
body.page-gallery.particle-fullscreen-active .particle-shape-controls button,
body.particle-fullscreen-active.page-gallery .particle-shape-controls button {
  height: 32px !important;
  min-width: 70px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: rgba(245, 250, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
body.page-gallery.particle-fullscreen-active .particle-shape-controls button.active,
body.particle-fullscreen-active.page-gallery .particle-shape-controls button.active {
  background: rgba(178, 218, 232, 0.48) !important;
  color: #ffffff !important;
}
/* Gallery lightbox fixed controls: shared geometry for light and dark themes. */
body.page-gallery .lightbox.open,
body.page-gallery .lightbox.active {
  --lb-fixed-control-size: clamp(38px, 2.45vw, 46px);
  --lb-fixed-side: clamp(42px, 8.5vw, 168px);
  --lb-fixed-top: clamp(64px, 9.2vh, 108px);
}
body.page-gallery .lightbox.open .camera-particle-trigger,
body.page-gallery .lightbox.open .lightbox-close,
body.page-gallery .lightbox.open .lightbox-nav,
body.page-gallery .lightbox.open .particle-burst-trigger,
body.page-gallery .lightbox.active .camera-particle-trigger,
body.page-gallery .lightbox.active .lightbox-close,
body.page-gallery .lightbox.active .lightbox-nav,
body.page-gallery .lightbox.active .particle-burst-trigger {
  position: fixed !important;
  width: var(--lb-fixed-control-size) !important;
  height: var(--lb-fixed-control-size) !important;
  min-width: var(--lb-fixed-control-size) !important;
  min-height: var(--lb-fixed-control-size) !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.5), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)) !important;
  color: rgba(248, 252, 255, 0.94) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -10px 20px rgba(8, 14, 22, 0.1) !important;
  backdrop-filter: blur(14px) saturate(0.98) !important;
  -webkit-backdrop-filter: blur(14px) saturate(0.98) !important;
  font-size: clamp(17px, 1.18vw, 21px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 8px rgba(9, 16, 26, 0.32) !important;
  opacity: 0.92 !important;
  z-index: 280 !important;
}
body.page-gallery .lightbox.open .camera-particle-trigger,
body.page-gallery .lightbox.active .camera-particle-trigger {
  left: var(--lb-fixed-side) !important;
  right: auto !important;
  top: var(--lb-fixed-top) !important;
  bottom: auto !important;
  transform: none !important;
  font-size: clamp(15px, 1vw, 18px) !important;
}
body.page-gallery .lightbox.open .lightbox-close,
body.page-gallery .lightbox.active .lightbox-close {
  right: var(--lb-fixed-side) !important;
  left: auto !important;
  top: var(--lb-fixed-top) !important;
  bottom: auto !important;
  transform: none !important;
  font-size: clamp(20px, 1.5vw, 26px) !important;
}
body.page-gallery .lightbox.open .lightbox-prev,
body.page-gallery .lightbox.active .lightbox-prev {
  left: var(--lb-fixed-side) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.page-gallery .lightbox.open .lightbox-next,
body.page-gallery .lightbox.active .lightbox-next {
  right: var(--lb-fixed-side) !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.page-gallery .lightbox.open .particle-burst-trigger,
body.page-gallery .lightbox.active .particle-burst-trigger {
  right: var(--lb-fixed-side) !important;
  left: auto !important;
  bottom: var(--lb-fixed-top) !important;
  top: auto !important;
  transform: none !important;
}
body.page-gallery .lightbox.open .particle-shape-controls,
body.page-gallery .lightbox.active .particle-shape-controls {
  position: fixed !important;
  left: var(--lb-fixed-side) !important;
  right: auto !important;
  bottom: var(--lb-fixed-top) !important;
  top: auto !important;
  transform: none !important;
  z-index: 280 !important;
}
body.page-gallery .lightbox.open .lightbox-nav:hover,
body.page-gallery .lightbox.open .lightbox-close:hover,
body.page-gallery .lightbox.open .camera-particle-trigger:hover,
body.page-gallery .lightbox.open .particle-burst-trigger:hover,
body.page-gallery .lightbox.active .lightbox-nav:hover,
body.page-gallery .lightbox.active .lightbox-close:hover,
body.page-gallery .lightbox.active .camera-particle-trigger:hover,
body.page-gallery .lightbox.active .particle-burst-trigger:hover {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.68), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14)) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -10px 20px rgba(8, 14, 22, 0.1) !important;
  opacity: 1 !important;
}
body.page-gallery .lightbox.open .lightbox-prev:hover,
body.page-gallery .lightbox.active .lightbox-prev:hover,
body.page-gallery .lightbox.open .lightbox-next:hover,
body.page-gallery .lightbox.active .lightbox-next:hover {
  transform: translateY(-50%) scale(1.05) !important;
}
@media (max-width: 900px) {
  body.page-gallery .lightbox.open,
  body.page-gallery .lightbox.active {
    --lb-fixed-control-size: 40px;
    --lb-fixed-side: 16px;
    --lb-fixed-top: 18px;
  }
}
/* Gallery lightbox viewport controls: pin only the four core viewer buttons. */
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active {
  --lb-viewport-control-size: clamp(40px, 2.7vw, 48px);
  --lb-viewport-edge: clamp(18px, 2.6vw, 48px);
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-content,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-content,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-prev,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-next,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-prev,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-next {
  position: fixed !important;
  width: var(--lb-viewport-control-size) !important;
  height: var(--lb-viewport-control-size) !important;
  min-width: var(--lb-viewport-control-size) !important;
  min-height: var(--lb-viewport-control-size) !important;
  z-index: 320 !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-particle-trigger {
  left: var(--lb-viewport-edge) !important;
  right: auto !important;
  top: var(--lb-viewport-edge) !important;
  bottom: auto !important;
  transform: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-close {
  right: var(--lb-viewport-edge) !important;
  left: auto !important;
  top: var(--lb-viewport-edge) !important;
  bottom: auto !important;
  transform: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-prev:hover,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-prev:hover,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-next:hover,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-next:hover {
  transform: translateY(-50%) scale(1.05) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .particle-burst-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .particle-burst-trigger {
  position: fixed !important;
  right: max(24px, 3vw) !important;
  top: 24px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .particle-shape-controls,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .particle-shape-controls {
  position: fixed !important;
  left: max(24px, 3vw) !important;
  bottom: 96px !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}
@media (max-width: 760px) {
  body.page-gallery:not(.particle-fullscreen-active) .lightbox.open,
  body.page-gallery:not(.particle-fullscreen-active) .lightbox.active {
    --lb-viewport-control-size: 40px;
    --lb-viewport-edge: 14px;
  }
}
/* Gallery lightbox viewport controls hotfix: do not treat particle controls as close/nav. */
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .particle-burst-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .particle-burst-trigger {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame.particle-running .particle-burst-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame.particle-running .particle-burst-trigger {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  position: fixed !important;
  right: max(24px, 3vw) !important;
  top: 24px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-nav,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.94 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  color: rgba(248, 252, 255, 0.96) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-close {
  display: inline-flex !important;
  opacity: 0.94 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
/* Gallery lightbox final visual system: gold controls, readable arrows, outside caption. */
body.page-gallery .lightbox.open,
body.page-gallery .lightbox.active {
  --lb-gold-rgb: 208, 169, 93;
  --lb-gold-deep: #7b5a28;
  --lb-gold-ink: #5d421c;
}
html:not([data-theme="light"]) body.page-gallery .lightbox.open::before,
html:not([data-theme="light"]) body.page-gallery .lightbox.active::before {
  background: radial-gradient(ellipse at center, transparent 56%, rgba(3, 8, 13, 0.12) 100%) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-content,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min-content !important;
  max-width: min(88vw, 1240px) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame.is-landscape,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame.is-landscape {
  width: var(--lb-display-width, min(78vw, 1120px)) !important;
  height: var(--lb-display-height, auto) !important;
  min-height: var(--lb-display-height, 0) !important;
  max-width: var(--lb-display-width, min(78vw, 1120px)) !important;
  max-height: var(--lb-display-height, min(74vh, 860px)) !important;
  overflow: visible !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame.is-landscape + .lightbox-caption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame.is-landscape + .lightbox-caption {
  margin-top: clamp(18px, 2.8vh, 34px) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxImage {
  max-width: min(78vw, 1120px) !important;
  max-height: min(74vh, 860px) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxImage.is-lightbox-stable,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxImage.is-lightbox-stable {
  aspect-ratio: var(--lb-image-aspect) !important;
  object-fit: contain !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame.is-landscape #lightboxImage.is-lightbox-stable,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame.is-landscape #lightboxImage.is-lightbox-stable,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame.is-square #lightboxImage.is-lightbox-stable,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame.is-square #lightboxImage.is-lightbox-stable {
  width: min(78vw, 1120px) !important;
  height: auto !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame.is-landscape #lightboxImage.is-lightbox-stable,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame.is-landscape #lightboxImage.is-lightbox-stable {
  width: var(--lb-display-width, min(78vw, 1120px)) !important;
  height: var(--lb-display-height, auto) !important;
  max-width: var(--lb-display-width, min(78vw, 1120px)) !important;
  max-height: var(--lb-display-height, min(74vh, 860px)) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame.is-portrait #lightboxImage,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame.is-portrait #lightboxImage {
  height: min(74vh, 860px) !important;
  width: auto !important;
  max-width: min(78vw, 1120px) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-caption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-caption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: fit-content !important;
  max-width: min(62vw, 360px) !important;
  margin: 0 auto !important;
  border: 1px solid rgba(var(--lb-gold-rgb), 0.46) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption strong,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption strong {
  font-weight: 850 !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-nav,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-nav,
body.page-gallery.particle-fullscreen-active .particle-burst-trigger,
body.particle-fullscreen-active.page-gallery .particle-burst-trigger {
  border: 1px solid rgba(var(--lb-gold-rgb), 0.42) !important;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.64), transparent 34%),
    linear-gradient(145deg, rgba(239, 215, 164, 0.52), rgba(155, 118, 54, 0.28)),
    rgba(195, 158, 89, 0.2) !important;
  color: var(--lb-gold-deep) !important;
  box-shadow: 0 10px 24px rgba(81, 61, 24, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  text-shadow: 0 1px 8px rgba(255, 250, 230, 0.28) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-prev::before,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-prev::before {
  content: "‹" !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-next::before,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-next::before {
  content: "›" !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-prev::before,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-next::before,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-prev::before,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-next::before {
  color: var(--lb-gold-deep) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(27px, 2vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 0.82 !important;
  transform: translateY(-1px) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-gesture-text.is-error,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-gesture-text.is-error {
  width: min(760px, calc(100vw - 96px)) !important;
  max-width: calc(100vw - 96px) !important;
  box-sizing: border-box !important;
  padding: 12px 20px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-gesture-text.is-error .gesture-text-cn,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-gesture-text.is-error .gesture-text-en,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-gesture-text.is-error .gesture-text-cn,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-gesture-text.is-error .gesture-text-en {
  white-space: normal !important;
  line-height: 1.26 !important;
}
/* Gallery lightbox final correction: champagne glass controls and visible nav. */
body.page-gallery .lightbox.open,
body.page-gallery .lightbox.active {
  --lb-champagne-glow: rgba(219, 182, 106, 0.16);
}
html:not([data-theme="light"]) body.page-gallery .lightbox.open,
html:not([data-theme="light"]) body.page-gallery .lightbox.active {
  background: radial-gradient(ellipse at 18% 20%, rgba(199, 143, 132, 0.045), transparent 34%),
    radial-gradient(ellipse at 86% 26%, rgba(88, 128, 146, 0.05), transparent 38%),
    linear-gradient(135deg, rgba(23, 25, 32, 0.46), rgba(15, 23, 30, 0.5)) !important;
  background-color: rgba(17, 23, 30, 0.5) !important;
  backdrop-filter: blur(7px) saturate(0.9) brightness(0.94) !important;
  -webkit-backdrop-filter: blur(7px) saturate(0.9) brightness(0.94) !important;
}
html:not([data-theme="light"]) body.page-gallery .lightbox.open::before,
html:not([data-theme="light"]) body.page-gallery .lightbox.active::before {
  box-shadow: inset 0 0 28px rgba(3, 7, 12, 0.08) !important;
  opacity: 0.7 !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-nav,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-nav,
body.page-gallery.particle-fullscreen-active .particle-burst-trigger,
body.particle-fullscreen-active.page-gallery .particle-burst-trigger,
body.page-gallery .lightbox.open .lightbox-media-frame.particle-running .particle-burst-trigger,
body.page-gallery .lightbox.active .lightbox-media-frame.particle-running .particle-burst-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--lb-viewport-control-size) !important;
  height: var(--lb-viewport-control-size) !important;
  min-width: var(--lb-viewport-control-size) !important;
  min-height: var(--lb-viewport-control-size) !important;
  border: 1px solid var(--lb-champagne-line) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.78), transparent 32%),
    linear-gradient(145deg, rgba(255, 250, 237, 0.46), rgba(211, 175, 102, 0.2)),
    var(--lb-champagne-fill) !important;
  color: var(--lb-champagne-ink) !important;
  box-shadow: 0 10px 24px rgba(43, 36, 22, 0.1),
    0 0 28px var(--lb-champagne-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 -10px 18px rgba(146, 105, 44, 0.08) !important;
  backdrop-filter: blur(16px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-nav,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-nav {
  position: fixed !important;
  padding: 0 !important;
  overflow: visible !important;
  text-indent: 0 !important;
  font-size: clamp(30px, 2.1vw, 38px) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 800 !important;
  line-height: 0.78 !important;
  text-align: center !important;
  text-shadow: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-prev,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-prev {
  left: var(--lb-viewport-edge) !important;
  right: auto !important;
  top: 50vh !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-next,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-next {
  right: var(--lb-viewport-edge) !important;
  left: auto !important;
  top: 50vh !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-prev::before,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-prev::before,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-next::before,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-next::before {
  display: none !important;
  content: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-content,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-content {
  gap: clamp(22px, 3.2vh, 36px) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-caption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-caption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption {
  border-color: rgba(232, 202, 137, 0.52) !important;
  color: var(--lb-champagne-ink) !important;
  box-shadow: 0 9px 20px rgba(43, 36, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption strong,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption strong {
  color: var(--lb-champagne-ink) !important;
  -webkit-text-fill-color: var(--lb-champagne-ink) !important;
  font-size: inherit !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-gesture-text.is-error,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-gesture-text.is-error {
  top: clamp(96px, 12vh, 144px) !important;
}
/* Camera permission copy: Chinese and English each occupy a single row. */
body.page-gallery .lightbox.open .camera-gesture-text.is-error,
body.page-gallery .lightbox.active .camera-gesture-text.is-error {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: min(980px, calc(100vw - 180px)) !important;
  max-width: calc(100vw - 180px) !important;
  min-width: min(760px, calc(100vw - 180px)) !important;
  box-sizing: border-box !important;
  padding: 12px 28px !important;
}
body.page-gallery .lightbox.open .camera-gesture-text.is-error .gesture-text-cn,
body.page-gallery .lightbox.open .camera-gesture-text.is-error .gesture-text-en,
body.page-gallery .lightbox.active .camera-gesture-text.is-error .gesture-text-cn,
body.page-gallery .lightbox.active .camera-gesture-text.is-error .gesture-text-en {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-align: center !important;
  line-height: 1.22 !important;
}
@media (max-width: 860px) {
  body.page-gallery .lightbox.open .camera-gesture-text.is-error,
  body.page-gallery .lightbox.active .camera-gesture-text.is-error {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    padding: 10px 16px !important;
  }
  body.page-gallery .lightbox.open .camera-gesture-text.is-error .gesture-text-cn,
body.page-gallery .lightbox.open .camera-gesture-text.is-error .gesture-text-en,
body.page-gallery .lightbox.active .camera-gesture-text.is-error .gesture-text-cn,
body.page-gallery .lightbox.active .camera-gesture-text.is-error .gesture-text-en {
    white-space: normal !important;
  }
}
/* Gallery lightbox hard fix: visible nav buttons and lighter champagne controls. */
body.page-gallery .lightbox.open,
body.page-gallery .lightbox.active {
  --lb-champagne-ink: #6d5730;
  --lb-champagne-line: rgba(238, 218, 168, 0.58);
  --lb-champagne-fill: rgba(255, 250, 238, 0.2);
  --lb-champagne-hover: rgba(255, 250, 238, 0.3);
  --lb-champagne-shadow: rgba(74, 58, 30, 0.1);
  --lb-viewport-control-size: clamp(42px, 2.6vw, 48px);
  --lb-viewport-edge: clamp(22px, 3vw, 56px);
}
body.page-gallery .lightbox.open #prevLightbox,
body.page-gallery .lightbox.open #nextLightbox,
body.page-gallery .lightbox.active #prevLightbox,
body.page-gallery .lightbox.active #nextLightbox {
  position: fixed !important;
  top: 50vh !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--lb-viewport-control-size) !important;
  height: var(--lb-viewport-control-size) !important;
  min-width: var(--lb-viewport-control-size) !important;
  min-height: var(--lb-viewport-control-size) !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--lb-champagne-line) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(145deg, rgba(255, 252, 241, 0.24), rgba(214, 181, 111, 0.12)),
    var(--lb-champagne-fill) !important;
  color: transparent !important;
  box-shadow: 0 8px 20px var(--lb-champagne-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.04) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  z-index: 9999 !important;
}
body.page-gallery .lightbox.open #prevLightbox,
body.page-gallery .lightbox.active #prevLightbox {
  left: var(--lb-viewport-edge) !important;
  right: auto !important;
}
body.page-gallery .lightbox.open #nextLightbox,
body.page-gallery .lightbox.active #nextLightbox {
  right: var(--lb-viewport-edge) !important;
  left: auto !important;
}
body.page-gallery .lightbox.open #prevLightbox::before,
body.page-gallery .lightbox.active #prevLightbox::before {
  content: "‹" !important;
}
body.page-gallery .lightbox.open #nextLightbox::before,
body.page-gallery .lightbox.active #nextLightbox::before {
  content: "›" !important;
}
body.page-gallery .lightbox.open #prevLightbox::before,
body.page-gallery .lightbox.open #nextLightbox::before,
body.page-gallery .lightbox.active #prevLightbox::before,
body.page-gallery .lightbox.active #nextLightbox::before {
  display: block !important;
  color: var(--lb-champagne-ink) !important;
  -webkit-text-fill-color: var(--lb-champagne-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(31px, 2.2vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 0.76 !important;
  transform: translateY(-2px) !important;
  text-shadow: 0 1px 8px rgba(255, 252, 236, 0.32) !important;
}
body.page-gallery .lightbox.open #prevLightbox:hover,
body.page-gallery .lightbox.open #nextLightbox:hover,
body.page-gallery .lightbox.active #prevLightbox:hover,
body.page-gallery .lightbox.active #nextLightbox:hover {
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(145deg, rgba(255, 252, 241, 0.32), rgba(214, 181, 111, 0.16)),
    var(--lb-champagne-hover) !important;
  transform: translateY(-50%) scale(1.04) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-particle-trigger,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-gallery.particle-fullscreen-active .particle-burst-trigger,
body.particle-fullscreen-active.page-gallery .particle-burst-trigger {
  border-color: var(--lb-champagne-line) !important;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(145deg, rgba(255, 252, 241, 0.24), rgba(214, 181, 111, 0.12)),
    var(--lb-champagne-fill) !important;
  color: var(--lb-champagne-ink) !important;
  box-shadow: 0 8px 20px var(--lb-champagne-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-caption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-caption,
body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption {
  padding: 8px 20px !important;
  min-width: 190px !important;
  margin-top: clamp(10px, 1.4vh, 18px) !important;
  font-size: clamp(12px, 0.92vw, 14px) !important;
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 235, 0.52), rgba(216, 181, 109, 0.18)),
    rgba(250, 241, 217, 0.24) !important;
}
/* Light theme gallery viewer: clean pink-to-cyan stage and soft #00CCFF controls. */
[data-theme="light"] body.page-gallery .lightbox.open,
[data-theme="light"] body.page-gallery .lightbox.active {
  --lb-cyan-ink: #16779a;
  --lb-cyan-line: rgba(0, 204, 255, 0.34);
  --lb-cyan-line-strong: rgba(0, 204, 255, 0.46);
  --lb-cyan-fill: rgba(236, 251, 255, 0.42);
  --lb-cyan-fill-hover: rgba(222, 248, 255, 0.56);
  --lb-cyan-glow: rgba(0, 204, 255, 0.13);
  background: linear-gradient(
      135deg,
      #fde8f3 0%,
      #fff5fb 22%,
      #f8fcff 48%,
      #e5f8ff 74%,
      #c9f1fb 100%
    ) !important;
  background-color: #edfaff !important;
  backdrop-filter: blur(7px) saturate(1.04) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.04) brightness(1.02) !important;
}
[data-theme="light"] body.page-gallery .lightbox.open::before,
[data-theme="light"] body.page-gallery .lightbox.active::before {
  background: radial-gradient(ellipse at 9% 11%, rgba(244, 178, 210, 0.24), transparent 35%),
    radial-gradient(ellipse at 88% 86%, rgba(0, 204, 255, 0.14), transparent 42%) !important;
  box-shadow: inset 0 0 36px rgba(65, 151, 185, 0.045) !important;
  opacity: 1 !important;
}
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-particle-trigger,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-particle-trigger,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #nextLightbox {
  border-color: var(--lb-cyan-line) !important;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(145deg, rgba(245, 253, 255, 0.52), rgba(0, 204, 255, 0.12)),
    var(--lb-cyan-fill) !important;
  color: var(--lb-cyan-ink) !important;
  box-shadow: 0 9px 22px rgba(31, 112, 147, 0.1),
    0 0 24px var(--lb-cyan-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #prevLightbox::before,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #nextLightbox::before,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #prevLightbox::before,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #nextLightbox::before {
  color: var(--lb-cyan-ink) !important;
  -webkit-text-fill-color: var(--lb-cyan-ink) !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.46) !important;
}
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .camera-particle-trigger:hover,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-close:hover,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #prevLightbox:hover,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #nextLightbox:hover,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .camera-particle-trigger:hover,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-close:hover,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #prevLightbox:hover,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #nextLightbox:hover {
  border-color: var(--lb-cyan-line-strong) !important;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(145deg, rgba(249, 254, 255, 0.64), rgba(0, 204, 255, 0.16)),
    var(--lb-cyan-fill-hover) !important;
}
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open .lightbox-caption,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active .lightbox-caption,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption {
  border-color: rgba(0, 204, 255, 0.3) !important;
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.86), transparent 34%),
    linear-gradient(135deg, rgba(246, 253, 255, 0.58), rgba(0, 204, 255, 0.1)),
    rgba(236, 251, 255, 0.36) !important;
  color: var(--lb-cyan-ink) !important;
  box-shadow: 0 8px 18px rgba(31, 112, 147, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption strong,
[data-theme="light"] body.page-gallery:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption strong {
  color: var(--lb-cyan-ink) !important;
  -webkit-text-fill-color: var(--lb-cyan-ink) !important;
}
/* Particle mode is a separate control system: no gallery nav, white translucent burst close. */
body.page-gallery.particle-fullscreen-active .lightbox.open #prevLightbox,
body.page-gallery.particle-fullscreen-active .lightbox.open #nextLightbox,
body.page-gallery.particle-fullscreen-active .lightbox.active #prevLightbox,
body.page-gallery.particle-fullscreen-active .lightbox.active #nextLightbox,
body.particle-fullscreen-active.page-gallery .lightbox.open #prevLightbox,
body.particle-fullscreen-active.page-gallery .lightbox.open #nextLightbox,
body.particle-fullscreen-active.page-gallery .lightbox.active #prevLightbox,
body.particle-fullscreen-active.page-gallery .lightbox.active #nextLightbox {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.page-gallery.particle-fullscreen-active .particle-burst-trigger,
body.particle-fullscreen-active.page-gallery .particle-burst-trigger,
body.page-gallery .lightbox.open .lightbox-media-frame.particle-running .particle-burst-trigger,
body.page-gallery .lightbox.active .lightbox-media-frame.particle-running .particle-burst-trigger {
  position: fixed !important;
  right: max(24px, 3vw) !important;
  top: 24px !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(44px, 3vw, 56px) !important;
  height: clamp(44px, 3vw, 56px) !important;
  min-width: clamp(44px, 3vw, 56px) !important;
  min-height: clamp(44px, 3vw, 56px) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)),
    rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}
/* Readability and mobile regression guardrails */
:root {
  --text-title-1: 2.35rem;
  --text-title-2: 1.72rem;
  --text-title-3: 1.18rem;
  --text-body-readable: 1rem;
  --text-caption-readable: 0.9rem;
  --tap-target: 44px;
}
.section h2,
.section-title,
#gallery .section-heading h2,
#works .section-heading h2,
#music .section-title,
#resonance .section-heading h2 {
  max-width: 12em;
  font-size: var(--text-title-1) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}
.section h3,
.profile-name,
.gallery-month-heading h3,
.resonance-section h3 {
  font-size: var(--text-title-2) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
.section h4,
.section h5,
.gallery-date-heading h4,
.work-card h3 {
  font-size: var(--text-title-3) !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}
.lead,
.section-copy,
.section-subtitle,
.gallery-category-desc,
.gallery-caption p,
.work-card p,
.resonance-section p,
.login-panel p {
  max-width: 68ch;
  font-size: var(--text-body-readable) !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
}
.site-nav a,
.gallery-tab,
.gallery-controls button,
.gallery-filter button,
.lightbox button,
.camera-particle-trigger,
.particle-burst-trigger,
.map-tag,
.her-footprint-marker,
.latest-marker {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
}
.site-nav a,
.gallery-tab-title,
.gallery-control-label,
.work-card .tag,
.lightbox-caption,
#lightboxCaption {
  letter-spacing: 0 !important;
}
#gallery .gallery-tab {
  align-items: center;
  gap: 0.72rem;
}
#gallery .gallery-tab-title,
#gallery .gallery-control-label,
#gallery .gallery-month-heading h3,
#gallery .gallery-date-heading h4 {
  overflow-wrap: anywhere;
}
.lightbox-caption,
#lightboxCaption {
  max-width: min(760px, calc(100vw - 32px)) !important;
  font-size: var(--text-caption-readable) !important;
  line-height: 1.62 !important;
}
@media (max-width: 760px) {
  :root {
    --text-title-1: 1.78rem;
    --text-title-2: 1.34rem;
    --text-title-3: 1.06rem;
    --text-body-readable: 0.96rem;
    --text-caption-readable: 0.86rem;
  }
  .site-header {
    display: grid !important;
    left: 10px !important;
    right: auto !important;
    width: calc(100vw - 20px) !important;
    transform: none !important;
    align-items: center;
    gap: 0.56rem;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    pointer-events: none;
    z-index: 260 !important;
    padding-right: calc(var(--tap-target) + 22px) !important;
  }
  .site-header .site-search-inline,
  .site-header .nav-toggle,
  .site-header .site-nav,
  .site-header .site-nav a {
    pointer-events: auto;
  }
  .site-search-inline {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: calc(100vw - 132px);
    overflow: hidden;
  }
  .site-search-inline input {
    width: 100%;
    min-width: 0;
  }
  .site-search-inline button {
    max-width: 5.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 40;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--tap-target);
    width: var(--tap-target);
    height: var(--tap-target);
    margin-left: 0;
    transform: translateY(-50%);
  }
  .site-nav {
    grid-column: 1 / -1;
  }
  .site-nav.open {
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 0.72rem;
  }
  .site-nav a {
    justify-content: center;
    padding: 0.72rem 0.86rem !important;
    line-height: 1.2;
    white-space: normal;
  }
  .hero-copy,
  .section-heading,
  .section-header,
  #gallery .section-heading,
  #music .section-header {
    text-align: left;
  }
  .hero-title-cn,
  .hero-title-en,
  .welcome-shell h1 span {
    letter-spacing: 0 !important;
  }
  #gallery .gallery-tabs,
  #gallery .gallery-controls {
    grid-template-columns: 1fr !important;
  }
  #gallery .gallery-tab,
  #gallery .gallery-control-group {
    width: 100%;
  }
  #gallery .gallery-date-grid {
    grid-template-columns: 1fr !important;
    gap: 0.95rem !important;
  }
  #gallery .gallery-month-group,
  #gallery .gallery-date-grid,
  #gallery .gallery-item {
    position: relative;
    transform: none !important;
  }
  #gallery .gallery-month-heading,
  #gallery .gallery-date-heading {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }
  #gallery .gallery-date-grid,
  #gallery .gallery-item {
    z-index: 2;
    pointer-events: auto;
  }
  #gallery .gallery-item {
    display: block !important;
    width: 100% !important;
    min-height: 220px;
    margin: 0 !important;
    overflow: hidden;
  }
  #gallery .gallery-item img {
    display: block !important;
    width: 100% !important;
    min-height: 220px;
    object-fit: cover;
  }
  #gallery .gallery-item,
  .work-card {
    border-radius: 8px !important;
  }
  .lightbox-content {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 22px) !important;
  }
  .lightbox-close,
  .camera-particle-trigger,
  .particle-burst-trigger {
    top: 12px !important;
  }
  .lightbox-nav,
  #prevLightbox,
  #nextLightbox {
    width: var(--tap-target) !important;
    height: var(--tap-target) !important;
  }
  .map-tag,
  .her-footprint-marker,
  .latest-marker {
    font-size: 0.85rem !important;
  }
}
@media (max-width: 430px) {
  :root {
    --text-title-1: 1.58rem;
    --text-title-2: 1.22rem;
    --text-title-3: 1rem;
  }
  .site-search-inline {
    min-width: 0;
  }
  .site-search-inline button {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hero-actions,
  .welcome-actions,
  .gallery-controls {
    align-items: stretch;
  }
  .hero-actions .btn,
  .welcome-actions button,
  .gallery-controls button {
    width: 100%;
  }
}
/* 2026-06-11 home light theme clean-depth pass. */
:root[data-theme="light"] body.page-home,
body[data-theme="light"].page-home {
  --home-clean-ink: #172033;
  --home-clean-soft: #46546b;
  --home-clean-blue: rgba(89, 151, 213, 0.16);
  --home-clean-rose: rgba(221, 126, 174, 0.14);
  --home-clean-shadow: rgba(63, 87, 122, 0.12);
}
:root[data-theme="light"] body.page-home .site-header,
body[data-theme="light"].page-home .site-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 252, 255, 0.66)),
    rgba(246, 250, 255, 0.52) !important;
  border-bottom-color: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 16px 42px rgba(75, 111, 155, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
}
:root[data-theme="light"] body.page-home .site-search-inline,
body[data-theme="light"].page-home .site-search-inline {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(249, 252, 255, 0.68)) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 10px 26px rgba(72, 101, 139, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
:root[data-theme="light"] body.page-home #home .hero-media,
body[data-theme="light"].page-home #home .hero-media {
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.22) 62%, transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(229, 242, 255, 0.18)) !important;
  border-color: rgba(255, 255, 255, 0.84) !important;
  filter: drop-shadow(0 24px 46px rgba(75, 103, 136, 0.12))
    drop-shadow(0 8px 22px rgba(215, 139, 176, 0.1)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -18px 36px rgba(132, 172, 209, 0.08) !important;
}
:root[data-theme="light"] body.page-home #home .hero-media img,
body[data-theme="light"].page-home #home .hero-media img {
  filter: saturate(1.08) contrast(1.04) brightness(1.01) !important;
  box-shadow: 0 18px 38px rgba(64, 88, 116, 0.13),
    0 0 0 10px rgba(255, 255, 255, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}
:root[data-theme="light"] body.page-home #home .hero-ring,
body[data-theme="light"].page-home #home .hero-ring {
  border-color: rgba(255, 255, 255, 0.58) !important;
  background: radial-gradient(circle at 38% 22%, rgba(255, 255, 255, 0.7), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(124, 178, 226, 0.08)) !important;
  box-shadow: 0 0 0 1px rgba(124, 178, 226, 0.18),
    0 22px 54px rgba(77, 103, 132, 0.1),
    inset 0 0 42px rgba(255, 255, 255, 0.42) !important;
}
:root[data-theme="light"] body.page-home #home .hero-title-cn,
body[data-theme="light"].page-home #home .hero-title-cn {
  background: linear-gradient(102deg, #2c5d8c 0%, #d56f9f 34%, #8a73a7 64%, #62a6c6 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: 0.35px;
  -webkit-text-stroke-color: rgba(65, 83, 116, 0.2);
  color: transparent !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94),
    0 7px 16px rgba(77, 102, 132, 0.09) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.82))
    drop-shadow(0 10px 18px rgba(103, 126, 158, 0.08)) !important;
  animation: none !important;
}
:root[data-theme="light"] body.page-home #home .hero-title-cn::after,
body[data-theme="light"].page-home #home .hero-title-cn::after {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(126, 175, 232, 0) 22%,
      rgba(126, 175, 232, 0.28) 42%,
      rgba(244, 167, 197, 0.34) 53%,
      rgba(255, 255, 255, 0.38) 62%,
      transparent 80%) !important;
  mix-blend-mode: screen;
  filter: blur(0.2px);
}
:root[data-theme="light"] body.page-home #home .hero-title-en,
body[data-theme="light"].page-home #home .hero-title-en {
  color: #463b64 !important;
  -webkit-text-fill-color: #463b64 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88),
    0 6px 13px rgba(70, 59, 100, 0.08) !important;
}
:root[data-theme="light"] body.page-home #home .hero-gift,
body[data-theme="light"].page-home #home .hero-gift {
  color: var(--home-clean-ink) !important;
  -webkit-text-fill-color: var(--home-clean-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
:root[data-theme="light"] body.page-home #home .lead,
body[data-theme="light"].page-home #home .lead {
  width: fit-content;
  max-width: min(640px, 100%);
  padding: 2px 18px 3px;
  color: rgba(18, 26, 42, 0.9) !important;
  -webkit-text-fill-color: rgba(18, 26, 42, 0.9) !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.46)) !important;
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 7px 18px rgba(73, 96, 124, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
:root[data-theme="light"] body.page-home #home .hero-actions .btn,
body[data-theme="light"].page-home #home .hero-actions .btn {
  border-color: rgba(255, 255, 255, 0.82) !important;
  transition: transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}
:root[data-theme="light"] body.page-home #home .hero-actions .btn.primary,
body[data-theme="light"].page-home #home .hero-actions .btn.primary {
  background: linear-gradient(135deg, rgba(41, 104, 168, 0.94) 0%, rgba(103, 166, 218, 0.9) 48%, rgba(222, 130, 178, 0.86) 100%) !important;
  box-shadow: 0 12px 26px rgba(55, 112, 176, 0.13),
    0 5px 14px rgba(207, 116, 168, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
:root[data-theme="light"] body.page-home #home .hero-actions .btn.ghost,
body[data-theme="light"].page-home #home .hero-actions .btn.ghost {
  color: #24496f !important;
  -webkit-text-fill-color: #24496f !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 10px 22px rgba(70, 99, 132, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
:root[data-theme="light"] body.page-home #home .hero-actions .btn:hover,
body[data-theme="light"].page-home #home .hero-actions .btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 38px rgba(66, 107, 158, 0.16),
    0 8px 20px rgba(215, 126, 174, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}
:root[data-theme="light"] body.page-home #home .scroll-cue,
body[data-theme="light"].page-home #home .scroll-cue {
  color: rgba(80, 95, 118, 0.58) !important;
  -webkit-text-fill-color: rgba(80, 95, 118, 0.58) !important;
  text-shadow: none !important;
}
/* 2026-06-11 home dark theme clean-depth pass. */
:root:not([data-theme="light"]) body.page-home,
body[data-theme="dark"].page-home {
  --home-dark-ink: rgba(255, 250, 246, 0.94);
  --home-dark-soft: rgba(245, 235, 232, 0.76);
  --home-dark-muted: rgba(245, 235, 232, 0.68);
  --home-dark-gold: rgba(232, 197, 141, 0.82);
  --home-dark-blue: rgba(126, 184, 206, 0.32);
  --home-dark-rose: rgba(220, 134, 157, 0.24);
}
:root:not([data-theme="light"]) body.page-home .site-header,
body[data-theme="dark"].page-home .site-header {
  background: linear-gradient(180deg, rgba(35, 36, 50, 0.64), rgba(18, 25, 40, 0.48)),
    rgba(255, 255, 255, 0.035) !important;
  border-bottom-color: rgba(255, 246, 236, 0.12) !important;
  box-shadow: 0 16px 38px rgba(3, 6, 14, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
:root:not([data-theme="light"]) body.page-home .site-nav a,
body[data-theme="dark"].page-home .site-nav a {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)) !important;
  color: rgba(255, 250, 246, 0.83) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 18px rgba(4, 8, 16, 0.1) !important;
}
:root:not([data-theme="light"]) body.page-home .site-nav a.active,
:root:not([data-theme="light"]) body.page-home .site-nav a:hover,
body[data-theme="dark"].page-home .site-nav a.active,
body[data-theme="dark"].page-home .site-nav a:hover {
  background: linear-gradient(135deg, rgb(251, 248, 244), rgb(243, 220, 224) 48%, rgb(184, 151, 88)) !important;
  color: rgb(184, 151, 88) !important;
  border-color: transparent !important;
  box-shadow: 0 0 28px rgba(200, 167, 104, 0.45),
    0 16px 40px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
:root:not([data-theme="light"]) body.page-home .site-search-inline,
body[data-theme="dark"].page-home .site-search-inline {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 12px 30px rgba(3, 6, 13, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-media,
body[data-theme="dark"].page-home #home .hero-media {
  filter: drop-shadow(0 30px 58px rgba(0, 0, 0, 0.26))
    drop-shadow(0 0 28px rgba(220, 134, 157, 0.12)) !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-media img,
body[data-theme="dark"].page-home #home .hero-media img {
  filter: saturate(1.07) contrast(1.03) brightness(1.02) !important;
  box-shadow: 0 24px 50px rgba(2, 6, 14, 0.28),
    0 0 0 10px rgba(255, 255, 255, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-ring,
body[data-theme="dark"].page-home #home .hero-ring {
  border-color: rgba(255, 239, 220, 0.18) !important;
  box-shadow: 0 0 0 1px rgba(126, 184, 206, 0.08),
    0 24px 58px rgba(0, 0, 0, 0.16),
    inset 0 0 42px rgba(255, 238, 220, 0.06) !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-title,
body[data-theme="dark"].page-home #home .hero-title {
  text-shadow: none !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-title-cn,
body[data-theme="dark"].page-home #home .hero-title-cn {
  background-image: linear-gradient(100deg, #fffaf2 0%, #e8c77a 18%, #d8d2f0 38%, #a7ddd7 58%, #f0c5d5 76%, #fffaf2 100%) !important;
  background-size: 360% 360% !important;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 28px rgba(126, 184, 206, 0.12) !important;
  animation: homeDarkTitleColorShift 8s ease-in-out infinite !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-title-group.title-transitioning .hero-title-cn,
body[data-theme="dark"].page-home #home .hero-title-group.title-transitioning .hero-title-cn {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.985);
}
:root:not([data-theme="light"]) body.page-home #home .hero-title-group.title-shimmer .hero-title-cn,
body[data-theme="dark"].page-home #home .hero-title-group.title-shimmer .hero-title-cn {
  animation: homeDarkTitleColorShift 8s ease-in-out infinite,
    homeDarkTitleHotPulse 1200ms cubic-bezier(0.16, 0.84, 0.26, 1) both !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-title-cn::after,
body[data-theme="dark"].page-home #home .hero-title-cn::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.24) 50%, transparent 100%) !important;
  mix-blend-mode: screen;
}
:root:not([data-theme="light"]) body.page-home #home .hero-title-en,
body[data-theme="dark"].page-home #home .hero-title-en {
  color: var(--home-dark-soft) !important;
  -webkit-text-fill-color: var(--home-dark-soft) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-gift,
body[data-theme="dark"].page-home #home .hero-gift {
  color: var(--home-dark-ink) !important;
  -webkit-text-fill-color: var(--home-dark-ink) !important;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}
:root:not([data-theme="light"]) body.page-home #home .lead,
body[data-theme="dark"].page-home #home .lead {
  color: var(--home-dark-soft) !important;
  -webkit-text-fill-color: var(--home-dark-soft) !important;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-actions .btn,
body[data-theme="dark"].page-home #home .hero-actions .btn {
  border-color: rgba(255, 236, 218, 0.28) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-actions .btn.primary,
body[data-theme="dark"].page-home #home .hero-actions .btn.primary {
  color: rgba(54, 42, 42, 0.94) !important;
  -webkit-text-fill-color: rgba(54, 42, 42, 0.94) !important;
  background: linear-gradient(135deg, rgba(255, 247, 234, 0.94), rgba(225, 191, 136, 0.84)) !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-actions .btn.ghost,
body[data-theme="dark"].page-home #home .hero-actions .btn.ghost {
  color: rgba(255, 243, 235, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 243, 235, 0.9) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(215, 134, 157, 0.2)) !important;
}
:root:not([data-theme="light"]) body.page-home #home .hero-actions .btn:hover,
body[data-theme="dark"].page-home #home .hero-actions .btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 243, 220, 0.42) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.25),
    0 0 22px rgba(232, 197, 141, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}
@keyframes homeDarkTitleColorShift {
  0% {
    background-position: 0% 50%;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1),
      0 12px 28px rgba(216, 210, 240, 0.1);
  }
  25% {
    background-position: 50% 50%;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1),
      0 12px 28px rgba(232, 199, 122, 0.12);
  }
  50% {
    background-position: 100% 50%;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1),
      0 12px 28px rgba(167, 221, 215, 0.12);
  }
  75% {
    background-position: 50% 50%;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1),
      0 12px 28px rgba(240, 197, 213, 0.1);
  }
  100% {
    background-position: 0% 50%;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1),
      0 12px 28px rgba(216, 210, 240, 0.1);
  }
}
@keyframes homeDarkTitleHotPulse {
  0% {
    filter: saturate(0.9) brightness(0.94);
  }
  35% {
    filter: saturate(1.22) brightness(1.08);
  }
  100% {
    filter: saturate(1) brightness(1);
  }
}
/* 2026-06-12 profile clean container pass. */
body.page-profile {
  --clean-page-ink: rgba(255, 250, 246, 0.94);
  --clean-page-soft: rgba(245, 236, 232, 0.76);
  --clean-page-muted: rgba(245, 236, 232, 0.62);
  --clean-page-line: rgba(255, 255, 255, 0.14);
  --clean-page-panel: rgba(255, 255, 255, 0.055);
  --clean-page-panel-strong: rgba(255, 255, 255, 0.085);
  --clean-page-accent: rgba(232, 185, 104, 0.82);
  --clean-page-radius: 18px;
}
[data-theme="light"] body.page-profile,
body[data-theme="light"].page-profile {
  --clean-page-ink: #182235;
  --clean-page-soft: rgba(32, 44, 64, 0.76);
  --clean-page-muted: rgba(68, 82, 106, 0.64);
  --clean-page-line: rgba(80, 106, 140, 0.14);
  --clean-page-panel: rgba(255, 255, 255, 0.72);
  --clean-page-panel-strong: rgba(255, 255, 255, 0.9);
  --clean-page-accent: #a86d86;
}
body.page-profile #profile {
  max-width: min(1240px, calc(100% - 40px));
  margin-inline: auto;
}
body.page-profile .section-heading {
  max-width: 760px !important;
  margin: 0 auto clamp(34px, 4vw, 56px) !important;
  padding: 0 0 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-profile .section-heading::before {
  content: none !important;
}
body.page-profile .section-heading::after {
  left: 50% !important;
  bottom: 0 !important;
  width: min(150px, 34%) !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, transparent, var(--clean-page-accent), transparent) !important;
  box-shadow: none !important;
}
body.page-profile .profile-section {
  grid-template-columns: minmax(320px, 0.9fr) minmax(480px, 1.1fr) !important;
  gap: clamp(44px, 6vw, 92px) !important;
  align-items: center !important;
}
body.page-profile .profile-copy,
[data-theme="light"] body.page-profile .profile-copy,
body[data-theme="light"].page-profile .profile-copy {
  max-width: 720px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-profile .profile-name {
  margin: 0 0 10px !important;
  color: var(--clean-page-ink) !important;
  text-shadow: none !important;
}
body.page-profile .profile-name .name-cn,
body.page-profile .profile-name span:last-child,
[data-theme="light"] body.page-profile .profile-name .name-cn,
[data-theme="light"] body.page-profile .profile-name span:last-child {
  color: var(--clean-page-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
body.page-profile .profile-name span:last-child {
  color: var(--clean-page-muted) !important;
  letter-spacing: 0.12em !important;
}
body.page-profile .profile-role,
[data-theme="light"] body.page-profile .profile-role {
  max-width: 38em;
  padding: 0 !important;
  color: var(--clean-page-soft) !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1.72 !important;
  text-shadow: none !important;
}
body.page-profile .profile-badges {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 26px !important;
}
body.page-profile .profile-badges span,
body.page-profile .profile-badges span.wide,
[data-theme="light"] body.page-profile .profile-badges span,
[data-theme="light"] body.page-profile .profile-badges span.wide {
  display: grid !important;
  grid-column: auto !important;
  grid-template-rows: auto auto !important;
  gap: 3px 12px !important;
  min-height: 72px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--clean-page-line) !important;
  border-radius: var(--clean-page-radius) !important;
  background: var(--clean-page-panel) !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-profile .profile-badges span:hover,
[data-theme="light"] body.page-profile .profile-badges span:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--clean-page-accent) 34%, var(--clean-page-line)) !important;
  background: var(--clean-page-panel-strong) !important;
  box-shadow: none !important;
}
body.page-profile .profile-badges span b {
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  color: var(--clean-page-accent) !important;
  font-size: 16px !important;
  text-shadow: none !important;
}
body.page-profile .profile-badges span strong,
body.page-profile .profile-badges span em,
[data-theme="light"] body.page-profile .profile-badges span strong,
[data-theme="light"] body.page-profile .profile-badges span em {
  min-width: 0 !important;
  color: var(--clean-page-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body.page-profile .profile-badges span em,
[data-theme="light"] body.page-profile .profile-badges span em {
  color: var(--clean-page-ink) !important;
  font-size: clamp(16px, 1.1vw, 18px) !important;
}
body.page-profile .profile-text-card,
[data-theme="light"] body.page-profile .profile-text-card,
body[data-theme="light"].page-profile .profile-text-card {
  margin-top: 28px !important;
  padding: 4px 0 4px 24px !important;
  border: 0 !important;
  border-left: 1px solid var(--clean-page-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-profile .profile-text-card::before,
body.page-profile .profile-text-card::after {
  content: none !important;
}
body.page-profile .profile-text-card p,
[data-theme="light"] body.page-profile .profile-text-card p {
  max-width: 43em !important;
  margin-bottom: 14px !important;
  color: var(--clean-page-soft) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
}
@media (max-width: 1080px) {
  body.page-profile .profile-section {
    grid-template-columns: 1fr !important;
  }
  body.page-profile .profile-stage {
    min-height: min(480px, 70vw) !important;
  }
}
@media (max-width: 640px) {
  body.page-profile #profile {
    max-width: min(100% - 28px, 1240px);
  }
  body.page-profile .profile-badges {
    grid-template-columns: 1fr !important;
  }
  body.page-profile .profile-text-card {
    padding-left: 16px !important;
  }
}
:root[data-theme="light"] body.page-profile {
  --clean-page-ink: #182235;
  --clean-page-soft: rgba(32, 44, 64, 0.76);
  --clean-page-muted: rgba(68, 82, 106, 0.64);
  --clean-page-line: rgba(80, 106, 140, 0.14);
  --clean-page-panel: rgba(255, 255, 255, 0.72);
  --clean-page-panel-strong: rgba(255, 255, 255, 0.9);
  --clean-page-accent: #a86d86;
}
body.page-profile .profile-role,
body.page-profile .profile-text-card p,
:root[data-theme="light"] body.page-profile .profile-role,
:root[data-theme="light"] body.page-profile .profile-text-card p,
[data-theme="light"] body.page-profile .profile-role,
[data-theme="light"] body.page-profile .profile-text-card p,
body[data-theme="light"].page-profile .profile-role,
body[data-theme="light"].page-profile .profile-text-card p {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
/* 2026-06-12 social OCD alignment and refined dark palette. */
body.page-social {
  --social-polish-ink: #174d86;
  --social-polish-muted: rgba(38, 74, 114, 0.7);
  --social-polish-line: rgba(76, 111, 150, 0.18);
  --social-polish-action-bg: rgba(255, 255, 255, 0.62);
  --social-polish-tag-bg: rgba(225, 244, 252, 0.58);
  --social-polish-accent: #8a6f8f;
}
body.page-social:not([data-theme="light"]),
:root:not([data-theme="light"]) body.page-social {
  --social-polish-ink: rgba(249, 247, 255, 0.93);
  --social-polish-muted: rgba(207, 216, 233, 0.68);
  --social-polish-line: rgba(220, 229, 245, 0.17);
  --social-polish-action-bg: rgba(255, 255, 255, 0.035);
  --social-polish-tag-bg: rgba(156, 195, 211, 0.07);
  --social-polish-accent: #b9adc9;
}
body.page-social #social .section-heading::after {
  background: linear-gradient(90deg, transparent, rgba(185, 173, 201, 0.78), rgba(156, 195, 211, 0.58), transparent) !important;
}
body.page-social #social .social-card h3,
html:not([data-theme="light"]) body.page-social #social .social-card h3 {
  color: var(--social-polish-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  text-shadow: none !important;
}
body.page-social #social .social-card,
body.page-social #social .social-card:hover,
body.page-social #social .social-card.is-lit,
body.page-social #social .social-card.breathe-active,
body.page-social #social .social-card.breathe-simultaneous {
  box-shadow: none !important;
}
body.page-social #social .social-card::before,
body.page-social #social .social-card::after {
  box-shadow: none !important;
}
body.page-social #social .social-action,
body.page-social #social .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-action,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-action,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
body.page-social #social .social-action,
html:not([data-theme="light"]) body.page-social #social .social-action {
  color: var(--social-polish-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: var(--social-polish-line) !important;
  background: var(--social-polish-action-bg) !important;
}
body.page-social #social .social-tags {
  align-items: center !important;
}
body.page-social #social .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag {
  color: var(--social-polish-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: var(--social-polish-line) !important;
  background: var(--social-polish-tag-bg) !important;
}
body.page-social #social .social-card .social-app-mark,
body.page-social #social .social-card.is-lit .social-app-mark,
body.page-social #social .social-card.breathe-active .social-app-mark,
body.page-social #social .social-card.breathe-simultaneous .social-app-mark,
[data-theme="light"] body.page-social #social .social-card .social-app-mark,
[data-theme="light"] body.page-social #social .social-card.is-lit .social-app-mark,
[data-theme="light"] body.page-social #social .social-card.breathe-active .social-app-mark,
[data-theme="light"] body.page-social #social .social-card.breathe-simultaneous .social-app-mark {
  box-shadow: none !important;
  filter: saturate(1.01) contrast(1.02) !important;
}
body.page-social #social .social-card:hover .social-app-mark,
body.page-social #social .social-card:hover .social-action,
body.page-social #social .social-card:hover .social-tags .tag,
body.page-social #social .social-card.is-lit .social-action,
body.page-social #social .social-card.breathe-active .social-action,
body.page-social #social .social-card.breathe-simultaneous .social-action {
  box-shadow: none !important;
  filter: none !important;
}
html:not([data-theme="light"]) body.page-social #social .social-card:hover,
html:not([data-theme="light"]) body.page-social #social .social-card.is-lit,
html:not([data-theme="light"]) body.page-social #social .social-card.breathe-active,
html:not([data-theme="light"]) body.page-social #social .social-card.breathe-simultaneous {
  border-color: color-mix(in srgb, var(--social-polish-accent) 38%, var(--social-polish-line)) !important;
  background: rgba(246, 248, 255, 0.075) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-social #social .social-card a.social-action:hover {
  color: rgba(249, 247, 255, 0.96) !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: color-mix(in srgb, var(--social-polish-accent) 52%, var(--social-polish-line)) !important;
  background: color-mix(in srgb, var(--social-polish-accent) 12%, transparent) !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  body.page-social #social .social-card-footer,
  [data-theme="light"] body.page-social #social .social-card-footer,
  html:not([data-theme="light"]) body.page-social #social .social-card-footer {
    grid-template-columns: 1fr !important;
  }
  body.page-social #social .social-action,
  body.page-social #social .social-tags .tag {
    width: 100% !important;
  }
}
/* 2026-06-12 final social theme states: default color, breathing white-glass. */
[data-theme="light"] body.page-social #social .social-card h3,
body[data-theme="light"].page-social #social .social-card h3 {
  color: #47335f !important;
  -webkit-text-fill-color: #47335f !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] body.page-social #social .social-card .social-action,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag,
body[data-theme="light"].page-social #social .social-card .social-action,
body[data-theme="light"].page-social #social .social-card .social-card-footer .social-tags .tag {
  opacity: 1 !important;
  color: #08799a !important;
  -webkit-text-fill-color: #08799a !important;
  border-color: rgba(0, 204, 255, 0.44) !important;
  background: linear-gradient(135deg, rgba(224, 249, 255, 0.82), rgba(255, 255, 255, 0.9)) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-social #social .social-card .social-action {
  opacity: 1 !important;
  color: rgba(244, 220, 169, 0.96) !important;
  -webkit-text-fill-color: rgba(244, 220, 169, 0.96) !important;
  border-color: rgba(213, 178, 106, 0.58) !important;
  background: linear-gradient(135deg, rgba(213, 178, 106, 0.17), rgba(255, 255, 255, 0.055)) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag {
  opacity: 1 !important;
  color: rgba(0, 204, 255, 0.86) !important;
  -webkit-text-fill-color: rgba(0, 204, 255, 0.86) !important;
  border-color: rgba(0, 204, 255, 0.42) !important;
  background: linear-gradient(135deg, rgba(0, 204, 255, 0.12), rgba(255, 255, 255, 0.045)) !important;
  box-shadow: none !important;
}
body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-action,
body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-action,
[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-tags .tag {
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.36) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-action,
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-action,
html:not([data-theme="light"]) body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-tags .tag {
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.36) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
  filter: none !important;
}
/* 2026-06-14 social light lit-state readability polish. */
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .tag-special,
body[data-theme="light"].page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .tag-special {
  color: #7d5f91 !important;
  -webkit-text-fill-color: #7d5f91 !important;
  border-color: rgba(172, 134, 192, 0.3) !important;
  background: linear-gradient(135deg, rgba(248, 235, 255, 0.88), rgba(231, 249, 255, 0.7)) !important;
}
/* 2026-06-14 social light lit-state: clearer rose-violet highlight. */
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous),
body[data-theme="light"].page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) {
  border-color: rgba(190, 126, 180, 0.32) !important;
  background: radial-gradient(circle at 78% 12%, rgba(255, 218, 239, 0.54), transparent 36%),
    radial-gradient(circle at 18% 86%, rgba(221, 231, 255, 0.48), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(252, 240, 250, 0.62) 56%, rgba(239, 246, 255, 0.58)) !important;
}
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-action,
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-tags .tag,
body[data-theme="light"].page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-action,
body[data-theme="light"].page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-tags .tag {
  color: #7b3f84 !important;
  -webkit-text-fill-color: #7b3f84 !important;
  border-color: rgba(207, 132, 190, 0.48) !important;
  background: linear-gradient(135deg, rgba(255, 234, 247, 0.95), rgba(241, 232, 255, 0.86)) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer a.social-action:hover,
body[data-theme="light"].page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer a.social-action:hover {
  color: #693178 !important;
  -webkit-text-fill-color: #693178 !important;
  border-color: rgba(190, 91, 168, 0.58) !important;
  background: linear-gradient(135deg, rgba(255, 223, 243, 0.98), rgba(232, 225, 255, 0.94)) !important;
}
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-link-muted,
body[data-theme="light"].page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-card-footer .social-link-muted {
  color: #8a738f !important;
  -webkit-text-fill-color: #8a738f !important;
  border-color: rgba(176, 150, 187, 0.32) !important;
  background: linear-gradient(135deg, rgba(246, 239, 249, 0.94), rgba(238, 242, 252, 0.82)) !important;
}
html[data-theme="light"] body.page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-app-mark,
body[data-theme="light"].page-social #social .social-card:is(.is-lit, .breathe-active, .breathe-simultaneous) .social-app-mark {
  filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
}
/* 2026-06-14 social footer pill spacing: keep labels centered and single-line. */
body.page-social #social .social-action,
body.page-social #social .social-card .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-action,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-action,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag {
  min-width: 136px !important;
  max-width: 100% !important;
  padding-inline: 24px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.page-social #social .social-card .social-card-footer .social-tags .tag-special,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag-special,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag-special {
  min-width: min(190px, 100%) !important;
  padding-inline: 26px !important;
}
body.page-social #social .social-tags {
  min-width: 0 !important;
  justify-content: flex-end !important;
}
@media (max-width: 720px) {
  body.page-social #social .social-card-footer,
  [data-theme="light"] body.page-social #social .social-card-footer,
  html:not([data-theme="light"]) body.page-social #social .social-card-footer {
    row-gap: 12px !important;
  }
  body.page-social #social .social-tags {
    justify-content: stretch !important;
  }
}
/* 2026-06-14 final social footer chip sizing: content-fit, aligned, no stretched dark chips. */
body.page-social #social .social-card-footer,
[data-theme="light"] body.page-social #social .social-card-footer,
html:not([data-theme="light"]) body.page-social #social .social-card-footer {
  grid-template-columns: minmax(132px, 150px) minmax(0, 1fr) !important;
  column-gap: 20px !important;
}
body.page-social #social .social-action,
[data-theme="light"] body.page-social #social .social-action,
html:not([data-theme="light"]) body.page-social #social .social-action {
  grid-column: 1 !important;
  justify-self: start !important;
}
body.page-social #social .social-tags,
[data-theme="light"] body.page-social #social .social-tags,
html:not([data-theme="light"]) body.page-social #social .social-tags {
  grid-column: 2 !important;
  justify-self: end !important;
}
body.page-social #social .social-card .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag {
  justify-self: end !important;
}
body.page-social #social .social-card .social-card-footer .social-tags .tag-special,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag-special,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag-special,
body.page-social #social .social-card:nth-child(3) .social-card-footer .social-tags .tag,
body.page-social #social .social-card:nth-child(6) .social-card-footer .social-tags .tag {
  width: auto !important;
  min-width: 188px !important;
  max-width: min(214px, 100%) !important;
  padding-inline: 24px !important;
}
@media (max-width: 720px) {
  body.page-social #social .social-card-footer,
  [data-theme="light"] body.page-social #social .social-card-footer,
  html:not([data-theme="light"]) body.page-social #social .social-card-footer {
    grid-template-columns: 1fr !important;
  }
  body.page-social #social .social-action,
  body.page-social #social .social-card .social-card-footer .social-tags .tag {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/* 2026-06-14 social footer chips: softer centered group rhythm. */
body.page-social #social .social-card .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* 2026-06-14 social footer chips: content-fit medium sizing without overlap. */
body.page-social #social .social-card-footer,
[data-theme="light"] body.page-social #social .social-card-footer,
html:not([data-theme="light"]) body.page-social #social .social-card-footer {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-social #social .social-action,
[data-theme="light"] body.page-social #social .social-action,
html:not([data-theme="light"]) body.page-social #social .social-action {
  height: 44px !important;
}
body.page-social #social .social-tags,
[data-theme="light"] body.page-social #social .social-tags,
html:not([data-theme="light"]) body.page-social #social .social-tags {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  width: auto !important;
}
body.page-social #social .social-card .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag,
body.page-social #social .social-card:nth-child(3) .social-card-footer .social-tags .tag,
body.page-social #social .social-card:nth-child(6) .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card:nth-child(3) .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card:nth-child(6) .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card:nth-child(3) .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card:nth-child(6) .social-card-footer .social-tags .tag {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 128px !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 720px) {
  body.page-social #social .social-card-footer,
  [data-theme="light"] body.page-social #social .social-card-footer,
  html:not([data-theme="light"]) body.page-social #social .social-card-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  body.page-social #social .social-action,
  body.page-social #social .social-tags,
  body.page-social #social .social-card .social-card-footer .social-tags .tag {
    flex-basis: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/* 2026-06-14 social footer chips: balanced breathing room without stretching. */
body.page-social #social .social-card-footer,
[data-theme="light"] body.page-social #social .social-card-footer,
html:not([data-theme="light"]) body.page-social #social .social-card-footer {
  justify-content: center !important;
  gap: 26px !important;
  padding-inline: 6px !important;
  box-sizing: border-box !important;
}
body.page-social #social .social-action,
[data-theme="light"] body.page-social #social .social-action,
html:not([data-theme="light"]) body.page-social #social .social-action {
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  padding-inline: 17px !important;
  box-sizing: border-box !important;
}
body.page-social #social .social-tags,
[data-theme="light"] body.page-social #social .social-tags,
html:not([data-theme="light"]) body.page-social #social .social-tags {
  flex: 0 1 auto !important;
  justify-content: center !important;
  max-width: calc(100% - 138px) !important;
}
body.page-social #social .social-card .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card .social-card-footer .social-tags .tag {
  min-width: 124px !important;
  padding-inline: 19px !important;
  box-sizing: border-box !important;
}
body.page-social #social .social-card:nth-child(3) .social-card-footer .social-tags .tag,
body.page-social #social .social-card:nth-child(6) .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card:nth-child(3) .social-card-footer .social-tags .tag,
[data-theme="light"] body.page-social #social .social-card:nth-child(6) .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card:nth-child(3) .social-card-footer .social-tags .tag,
html:not([data-theme="light"]) body.page-social #social .social-card:nth-child(6) .social-card-footer .social-tags .tag {
  min-width: min(150px, 100%) !important;
  padding-inline: 11px !important;
  font-size: 14.8px !important;
}
/* 2026-06-12 requested profile-only interaction refinements. */
body.page-profile .profile-avatar-button {
  position: relative !important;
}
body.page-profile .like-burst,
[data-theme="light"] body.page-profile .like-burst {
  left: 50% !important;
  right: auto !important;
  bottom: clamp(28px, 7%, 40px) !important;
  width: 70px !important;
  height: 70px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 35px !important;
  background: linear-gradient(135deg, #ec8fa0, #ffd6dc 48%, var(--gold)) !important;
  box-shadow: 0 0 52px rgba(217, 166, 174, 0.85),
    0 0 78px rgba(232, 185, 104, 0.3) !important;
}
body.page-profile .like-burst.show {
  animation: likePop 0.95s ease forwards !important;
}
body.page-profile .profile-pop-layer::before {
  background: radial-gradient(circle at 50% 50%, rgba(255, 205, 218, 0.34), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(232, 158, 180, 0.25), transparent 48%),
    rgba(8, 10, 18, 0.54) !important;
  backdrop-filter: blur(12px) saturate(1.04) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.04) brightness(1.02) !important;
}
body.page-profile .profile-pop-card {
  box-shadow: 0 42px 150px rgba(0, 0, 0, 0.42),
    0 0 150px rgba(255, 197, 214, 0.62),
    0 0 64px rgba(244, 158, 184, 0.42),
    0 0 30px rgba(255, 255, 255, 0.16) inset !important;
}
body.page-profile .profile-pop-close {
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(8, 10, 18, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  outline: 0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}
body.page-profile .profile-pop-close:hover {
  border-color: rgba(232, 185, 104, 0.6) !important;
  background: rgba(232, 185, 104, 0.25) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(232, 185, 104, 0.48) !important;
}
:root[data-theme="light"] body.page-profile .profile-pop-close,
[data-theme="light"] body.page-profile .profile-pop-close,
body[data-theme="light"].page-profile .profile-pop-close {
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.38) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 14px 34px rgba(72, 92, 118, 0.14) !important;
}
:root[data-theme="light"] body.page-profile .profile-pop-close:hover,
[data-theme="light"] body.page-profile .profile-pop-close:hover,
body[data-theme="light"].page-profile .profile-pop-close:hover {
  border-color: rgba(0, 204, 255, 0.5) !important;
  border-top-color: rgba(0, 204, 255, 0.5) !important;
  border-right-color: rgba(0, 204, 255, 0.5) !important;
  border-bottom-color: rgba(0, 204, 255, 0.5) !important;
  border-left-color: rgba(0, 204, 255, 0.5) !important;
  background: linear-gradient(rgba(0, 204, 255, 0.14), rgba(0, 204, 255, 0.14)),
    rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 0 0 2px rgba(0, 204, 255, 0.26) !important;
}
:root[data-theme="light"] body.page-profile .profile-pop-layer.active > .profile-pop-close:hover,
[data-theme="light"] body.page-profile .profile-pop-layer.active > .profile-pop-close:hover,
body[data-theme="light"].page-profile .profile-pop-layer.active > .profile-pop-close:hover {
  border-color: rgba(0, 204, 255, 0.5) !important;
  background: linear-gradient(rgba(0, 204, 255, 0.14), rgba(0, 204, 255, 0.14)),
    rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 0 0 2px rgba(0, 204, 255, 0.26) !important;
}
body.page-profile .pop-caption {
  color: rgba(255, 252, 252, 0.98) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 26px rgba(130, 55, 78, 0.42),
    0 0 18px rgba(255, 226, 235, 0.34) !important;
}
body.page-profile .hello-hand {
  filter: drop-shadow(0 0 8px rgba(255, 232, 184, 0.72))
    drop-shadow(0 0 16px rgba(255, 186, 207, 0.42));
}
body.page-profile .profile-badges span,
body.page-profile .profile-badges span.wide,
[data-theme="light"] body.page-profile .profile-badges span,
[data-theme="light"] body.page-profile .profile-badges span.wide {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  column-gap: 16px !important;
}
body.page-profile .profile-badges span b {
  justify-self: center !important;
}
/* Final works jump hints: hidden until hover/focus, with a framed label. */
body.page-works #works .works-side-jump a {
  position: relative !important;
}
body.page-works #works .works-side-jump:not(.is-open) a::after {
  content: attr(data-jump-title) !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 12px) !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 54px !important;
  min-height: 28px !important;
  padding: 4px 13px !important;
  border: 1px solid rgba(229, 182, 92, 0.38) !important;
  border-radius: 999px !important;
  color: rgba(229, 182, 92, 0.98) !important;
  -webkit-text-fill-color: rgba(229, 182, 92, 0.98) !important;
  background: rgba(102, 124, 141, 0.62) !important;
  box-shadow: 0 12px 28px rgba(10, 18, 28, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(8px, -50%) scale(0.96) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}
body.page-works #works .works-side-jump:not(.is-open) a:hover::after,
body.page-works #works .works-side-jump:not(.is-open) a:focus-visible::after {
  opacity: 1 !important;
  transform: translate(0, -50%) scale(1) !important;
}
[data-theme="light"] body.page-works #works .works-side-jump:not(.is-open) a::after,
[data-theme="light"] #works .works-side-jump:not(.is-open) a::after {
  color: #00a9d4 !important;
  -webkit-text-fill-color: #00a9d4 !important;
  border-color: rgba(0, 204, 255, 0.28) !important;
  background: rgba(232, 249, 255, 0.82) !important;
}
body.page-works #works .work-drama-jump.is-compact {
  align-self: center !important;
  min-height: 30px !important;
  margin: 0 0 0 6px !important;
  padding: 0 12px !important;
  font-size: 0.82rem !important;
  line-height: 1 !important;
  transform: translateY(0) !important;
}
html:not([data-theme="light"]) body.page-works #works .work-meta:has(.work-drama-jump.is-compact),
body.page-works:not([data-theme="light"]) #works .work-meta:has(.work-drama-jump.is-compact) {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  gap: 12px !important;
  align-items: center !important;
}
html:not([data-theme="light"]) body.page-works #works .work-drama-jump.is-compact,
body.page-works:not([data-theme="light"]) #works .work-drama-jump.is-compact {
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 0 0 4px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: none !important;
}
/* 2026-06-12 align collapsed work metadata and the compact drama jump. */
body.page-works #works .work-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
}
body.page-works #works .work-meta:has(.work-drama-jump.is-compact) {
  display: grid !important;
  grid-template-columns: minmax(0, max-content) max-content !important;
  justify-content: start !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
}
body.page-works #works .work-meta-main {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body.page-works #works .work-meta-main .tag,
body.page-works #works .work-meta-main .work-meta-separator {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.page-works #works .work-meta-main .work-source-tag {
  min-width: 0 !important;
  max-width: 16em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.page-works #works .work-meta > .work-drama-jump.is-compact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  body.page-works #works .work-meta:has(.work-drama-jump.is-compact) {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  body.page-works #works .work-meta > .work-drama-jump.is-compact {
    justify-self: start !important;
  }
}
/* 2026-06-12 voice archive detail polish */
body.page-audio .audio-cards-container {
  gap: 26px !important;
  align-items: stretch;
}
body.page-audio .audio-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 22px !important;
  isolation: isolate;
}
body.page-audio .audio-card::before {
  content: "";
  position: absolute;
  inset: -28% auto auto -22%;
  z-index: -1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 167, 197, 0.28), transparent 68%);
  opacity: 0.34;
  pointer-events: none;
}
body.page-audio .audio-card-header {
  display: block !important;
  line-height: 1;
}
body.page-audio .audio-type {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 54px !important;
  max-width: 96px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}
body.page-audio .audio-card-body {
  align-content: start;
  min-height: 0;
}
body.page-audio .audio-title {
  margin-bottom: 8px !important;
}
body.page-audio .audio-card-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  color: rgba(245, 248, 255, 0.78);
}
body.page-audio .audio-card-meta div {
  min-width: 0;
}
body.page-audio .audio-card-meta dt,
body.page-audio .audio-card-meta dd {
  margin: 0;
}
body.page-audio .audio-card-meta dt {
  color: rgba(125, 175, 232, 0.94);
  font-weight: 900;
}
body.page-audio .audio-card-meta dd {
  color: inherit;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.page-audio .audio-tags {
  margin-top: 0;
}
body.page-audio .audio-play-btn {
  position: static !important;
  width: 62px !important;
  height: 62px !important;
  color: #172033 !important;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.92), transparent 38%),
    linear-gradient(135deg, #fffaf2 0%, #d9edff 48%, #f8c4de 100%) !important;
}
body.page-audio .audio-card.is-current {
  border-color: rgba(125, 175, 232, 0.54) !important;
}
body.page-audio .audio-card.is-playing {
  animation: voiceCardBreath 2.8s ease-in-out infinite;
}
body.page-audio .audio-card.is-playing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 82% 82%, rgba(244, 167, 197, 0.34), transparent 32%),
    radial-gradient(circle at 10% 8%, rgba(125, 175, 232, 0.3), transparent 34%);
  opacity: 0.78;
  pointer-events: none;
}
body.page-audio .audio-player-modal {
  padding: clamp(120px, 14vh, 150px) 24px clamp(42px, 7vh, 78px);
  place-items: center;
}
body.page-audio .audio-modal-overlay {
  background: radial-gradient(circle at 76% 78%, rgba(232, 185, 102, 0.18), transparent 22rem),
    radial-gradient(circle at 8% 12%, rgba(244, 167, 197, 0.1), transparent 28rem),
    rgba(8, 10, 18, 0.72);
  backdrop-filter: blur(20px) saturate(1.05);
}
body.page-audio .audio-modal-content {
  width: min(640px, 92vw) !important;
  max-height: min(690px, calc(100vh - 210px));
  padding: clamp(28px, 3.4vw, 40px) clamp(28px, 4vw, 50px) !important;
  border-radius: 22px !important;
  background: linear-gradient(150deg, rgba(64, 72, 88, 0.94), rgba(36, 43, 61, 0.95)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
body.page-audio .audio-modal-header h3 {
  color: #fffaf2 !important;
  font-size: clamp(28px, 3.3vw, 38px);
}
body.page-audio .audio-modal-header p {
  color: rgba(255, 250, 242, 0.78) !important;
}
body.page-audio .audio-modal-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-top: 18px !important;
  padding: 0 16px;
  border: 1px solid rgba(88, 194, 255, 0.26);
  border-radius: 999px;
  color: rgba(231, 241, 255, 0.9) !important;
  background: rgba(88, 194, 255, 0.12);
}
body.page-audio .audio-waveform {
  margin: 6px 0 22px;
}
body.page-audio .audio-progress-container {
  margin-bottom: 22px;
}
body.page-audio .audio-controls {
  margin-bottom: 26px;
}
body.page-audio .audio-modal-info {
  display: grid;
  gap: 12px;
  color: rgba(255, 250, 242, 0.78) !important;
  font-size: 18px;
  line-height: 1.55;
}
body.page-audio .audio-modal-info .info-row {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}
body.page-audio .audio-modal-info .info-label {
  color: #e8b966;
}
body.page-audio .audio-modal-info #modalDescription {
  display: block !important;
}
body.page-audio .audio-mini-player {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}
body.page-audio .audio-mini-expand,
body.page-audio .audio-mini-control {
  display: inline-grid;
  align-items: center;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
body.page-audio .audio-mini-expand {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  max-width: min(460px, 62vw);
  padding: 6px 8px 6px 10px;
  font: inherit;
}
body.page-audio .audio-mini-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
body.page-audio .audio-mini-control {
  position: relative;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
body.page-audio .audio-mini-control:hover,
body.page-audio .audio-mini-expand:hover {
  color: #b43174;
}
body.page-audio .audio-mini-mode[data-mode="shuffle"] {
  color: #ffffff;
  background: linear-gradient(135deg, #1f3f75, #7dafe8 48%, #f4a7c5);
}
body.page-audio .audio-mini-title {
  max-width: min(250px, 42vw);
}
body.page-audio .audio-mini-caption {
  max-width: min(360px, 52vw);
  overflow: hidden;
  color: rgba(23, 63, 112, 0.74);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="light"] body.page-audio .audio-card-meta dt {
  color: #1f3f75 !important;
}
[data-theme="light"] body.page-audio .audio-card.is-current {
  border-color: rgba(125, 175, 232, 0.64) !important;
}
[data-theme="light"] body.page-audio .audio-card.is-playing {
  box-shadow: 0 30px 90px rgba(67, 98, 151, 0.22),
    0 0 0 2px rgba(180, 49, 116, 0.18),
    0 0 58px rgba(244, 167, 197, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] body.page-audio .audio-card.is-playing::before {
  opacity: 0.34;
}
[data-theme="light"] body.page-audio .audio-card.is-playing .audio-title {
  color: #3f275f !important;
  -webkit-text-fill-color: #3f275f !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76), 0 16px 34px rgba(94, 42, 110, 0.18);
}
[data-theme="light"] body.page-audio .audio-card.is-playing .audio-card-meta {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}
[data-theme="light"] body.page-audio .audio-card.is-playing .audio-card-meta dt {
  color: #a51f63 !important;
}
[data-theme="light"] body.page-audio .audio-card.is-playing .audio-type,
[data-theme="light"] body.page-audio .audio-card.is-playing .audio-tag {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.74) !important;
  background: linear-gradient(135deg, #1f3f75 0%, #7dafe8 46%, #d94690 100%) !important;
  box-shadow: 0 12px 28px rgba(180, 49, 116, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
[data-theme="light"] body.page-audio .audio-card.is-playing .audio-play-btn {
  color: #ffffff !important;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.7), transparent 34%),
    linear-gradient(135deg, #1f3f75 0%, #4ea4e9 44%, #d94690 100%) !important;
  box-shadow: 0 18px 44px rgba(180, 49, 116, 0.32),
    0 0 0 8px rgba(255, 255, 255, 0.36) !important;
}
[data-theme="light"] body.page-audio .audio-modal-overlay {
  background: radial-gradient(circle at 55% 92%, rgba(255, 224, 188, 0.36), transparent 24rem),
    rgba(34, 40, 52, 0.72);
  backdrop-filter: blur(18px) saturate(1.02);
}
[data-theme="light"] body.page-audio .audio-modal-content {
  color: #151a27 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 245, 250, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 34px 100px rgba(34, 50, 78, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}
[data-theme="light"] body.page-audio .audio-modal-header h3 {
  color: #5a4778 !important;
  -webkit-text-fill-color: #5a4778 !important;
}
[data-theme="light"] body.page-audio .audio-modal-header p,
[data-theme="light"] body.page-audio .audio-modal-info {
  color: #151a27 !important;
}
[data-theme="light"] body.page-audio .audio-modal-status {
  color: #496078 !important;
  border-color: rgba(125, 175, 232, 0.28);
  background: rgba(220, 238, 255, 0.72);
}
[data-theme="light"] body.page-audio .audio-modal-info .info-label {
  color: #111827 !important;
}
@keyframes voiceCardBreath {
  0%,
  100% {
    box-shadow: 0 24px 70px rgba(26, 86, 160, 0.14),
      0 0 0 1px rgba(125, 175, 232, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }
  50% {
    box-shadow: 0 32px 92px rgba(26, 86, 160, 0.2),
      0 0 0 3px rgba(244, 167, 197, 0.18),
      0 0 52px rgba(125, 175, 232, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.84);
  }
}
@keyframes voicePlayingEdge {
  from {
    background-position: 220% 0;
  }
  to {
    background-position: -220% 0;
  }
}
@keyframes voiceCardBreathLight {
  0%,
  100% {
    box-shadow: 0 30px 90px rgba(67, 98, 151, 0.22),
      0 0 0 2px rgba(180, 49, 116, 0.18),
      0 0 58px rgba(244, 167, 197, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }
  50% {
    box-shadow: 0 36px 108px rgba(67, 98, 151, 0.28),
      0 0 0 3px rgba(180, 49, 116, 0.3),
      0 0 72px rgba(125, 175, 232, 0.38),
      0 0 56px rgba(244, 95, 161, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.98);
  }
}
@media (max-width: 760px) {
  body.page-audio .audio-card-header {
    top: 20px;
    right: 20px;
  }
  body.page-audio .audio-type {
    min-width: 48px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  body.page-audio .audio-card-meta {
    grid-template-columns: 1fr;
    margin-bottom: 10px !important;
  }
  body.page-audio .audio-card-meta dd {
    white-space: normal;
  }
  body.page-audio .audio-play-btn {
    width: 54px !important;
    height: 54px !important;
  }
  body.page-audio .audio-modal-header h3 {
    padding: 0 68px 0 0;
    text-align: left;
  }
  body.page-audio .audio-modal-info .info-row {
    grid-template-columns: 56px minmax(0, 1fr);
    font-size: 15px;
  }
  body.page-audio .audio-mini-title {
    max-width: 46vw;
  }
  body.page-audio .audio-mini-expand {
    max-width: 58vw;
  }
  body.page-audio .audio-mini-caption {
    max-width: 50vw;
    font-size: 11px;
  }
}
/* Final voice playing state: keep the card surface unchanged, only breathe the full border. */
[data-theme="light"] body.page-audio .audio-card.is-playing {
  animation: voiceCardBorderBreathLight 2.8s ease-in-out infinite !important;
  border-color: rgba(126, 165, 220, 0.46) !important;
  transform: translateY(-2px);
}
[data-theme="light"] body.page-audio .audio-card.is-playing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(203, 112, 166, 0.28);
  border-radius: inherit;
  background: transparent !important;
  box-shadow: 0 0 0 1px rgba(125, 175, 232, 0.18),
    0 0 18px rgba(203, 112, 166, 0.18);
  opacity: 1;
  pointer-events: none;
  animation: voiceFullBorderBreath 2.8s ease-in-out infinite !important;
}
@keyframes voiceCardBorderBreathLight {
  0%,
  100% {
    box-shadow: 0 24px 70px rgba(26, 86, 160, 0.14),
      0 0 0 1px rgba(125, 175, 232, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }
  50% {
    box-shadow: 0 28px 78px rgba(26, 86, 160, 0.17),
      0 0 0 2px rgba(203, 112, 166, 0.16),
      0 0 28px rgba(125, 175, 232, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}
@keyframes voiceFullBorderBreath {
  0%,
  100% {
    border-color: rgba(203, 112, 166, 0.24);
    box-shadow: 0 0 0 1px rgba(125, 175, 232, 0.14),
      0 0 14px rgba(203, 112, 166, 0.12);
  }
  50% {
    border-color: rgba(125, 175, 232, 0.38);
    box-shadow: 0 0 0 2px rgba(125, 175, 232, 0.16),
      0 0 24px rgba(203, 112, 166, 0.16);
  }
}
/* Final floating drama menu theme guard. */
html[data-theme="light"] body .works-drama-menu,
body[data-theme="light"] .works-drama-menu {
  color: #172947 !important;
  border-color: rgba(74, 117, 168, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  background: radial-gradient(circle at 10% 6%, rgba(255, 228, 242, 0.9), transparent 38%),
    radial-gradient(circle at 96% 100%, rgba(205, 241, 255, 0.92), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.9)) !important;
  box-shadow: 0 22px 56px rgba(55, 84, 124, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}
html[data-theme="light"] body .works-drama-menu-head,
body[data-theme="light"] .works-drama-menu-head {
  border-bottom-color: rgba(74, 117, 168, 0.14) !important;
}
html[data-theme="light"] body .works-drama-menu-head strong,
html[data-theme="light"] body .works-drama-menu-item strong,
body[data-theme="light"] .works-drama-menu-head strong,
body[data-theme="light"] .works-drama-menu-item strong {
  color: #172947 !important;
  -webkit-text-fill-color: #172947 !important;
}
html[data-theme="light"] body .works-drama-menu-close,
html[data-theme="light"] body .works-drama-menu-item,
body[data-theme="light"] .works-drama-menu-close,
body[data-theme="light"] .works-drama-menu-item {
  color: #172947 !important;
  border-color: rgba(74, 117, 168, 0.16) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(232, 246, 255, 0.68)) !important;
  background-color: rgba(247, 252, 255, 0.94) !important;
}
html[data-theme="light"] body .works-drama-menu-item span,
html[data-theme="light"] body .works-drama-menu-item em,
body[data-theme="light"] .works-drama-menu-item span,
body[data-theme="light"] .works-drama-menu-item em {
  color: #c04f91 !important;
  -webkit-text-fill-color: #c04f91 !important;
}
html[data-theme="light"] body .works-drama-menu-item:hover,
html[data-theme="light"] body .works-drama-menu-item:focus-visible,
body[data-theme="light"] .works-drama-menu-item:hover,
body[data-theme="light"] .works-drama-menu-item:focus-visible {
  border-color: rgba(34, 153, 205, 0.28) !important;
  background: linear-gradient(135deg, rgba(255, 245, 250, 0.94), rgba(220, 244, 255, 0.84)) !important;
}
/* Works jump split: rows navigate, compact buttons open drama directories. */
body.page-works #works .works-side-jump-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}
body.page-works #works .works-side-jump-row a {
  min-width: 0 !important;
}
body.page-works #works .works-side-menu-btn {
  display: none;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: rgba(229, 182, 92, 0.86);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 0.22s ease, color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
body.page-works #works .works-side-jump.is-open .works-side-menu-btn {
  display: grid;
}
body.page-works #works .works-side-menu-btn:hover,
body.page-works #works .works-side-menu-btn:focus-visible,
body.page-works #works .works-side-menu-btn[aria-expanded="true"] {
  transform: translateX(-2px);
  color: #f2cf88;
  border-color: rgba(229, 182, 92, 0.42);
  background: rgba(229, 182, 92, 0.13);
}
body.page-works #works .works-side-jump.is-open a {
  justify-content: flex-start !important;
}
body.page-works #works .works-side-jump:not(.is-open) .works-side-jump-row {
  grid-template-columns: 1fr !important;
}
body.page-works #works .works-context-action {
  position: fixed;
  top: calc(34vh + 238px);
  z-index: 81;
  display: inline-grid;
  align-items: center;
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}
body.page-works #works .works-context-action[hidden] {
  display: none !important;
}
html[data-theme="light"] body.page-works #works .works-side-menu-btn,
body[data-theme="light"].page-works #works .works-side-menu-btn {
  color: #00a9d4 !important;
  border-color: rgba(82, 111, 157, 0.2) !important;
  background: rgba(255, 255, 255, 0.68) !important;
}
@media (max-width: 980px) {
  body.page-works #works .works-context-action {
    right: 18px;
    bottom: 22px;
    top: auto;
  }
}
@media (max-width: 760px) {
  body.page-works #works .works-context-action {
    display: none !important;
  }
}
/* Works light-theme final alignment: lead badge and compact section action. */
html[data-theme="light"] body.page-works #works .work-card .lead-role-tag,
body[data-theme="light"].page-works #works .work-card .lead-role-tag {
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(244, 122, 179, 0.42) !important;
  border-radius: 0 !important;
  color: #d2297d !important;
  -webkit-text-fill-color: #d2297d !important;
  background: rgba(255, 235, 246, 0.72) !important;
  box-shadow: none !important;
}
body.page-works #works .works-context-action {
  text-align: center !important;
}
/* Works floating action final polish: keep it independent from the side rail. */
body.page-works #works .works-context-action {
  right: clamp(72px, 8vw, 82px) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 138px !important;
  min-height: 54px !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  grid-template-rows: 1fr !important;
  justify-items: stretch !important;
  gap: 10px !important;
  padding: 8px 9px 8px 18px !important;
  border-radius: 999px !important;
  border-color: rgba(248, 216, 144, 0.38) !important;
}
body.page-works #works .works-context-action::before {
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 54%);
  pointer-events: none;
}
body.page-works #works .works-context-action:hover,
body.page-works #works .works-context-action:focus-visible {
  border-color: rgba(248, 216, 144, 0.58) !important;
  background: radial-gradient(circle at 22% 18%, rgba(255, 236, 190, 0.22), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(22, 27, 36, 0.52) !important;
}
body.page-works #works .works-context-action-label {
  align-self: center !important;
  letter-spacing: 0 !important;
}
html[data-theme="light"] body.page-works #works .works-context-action,
body[data-theme="light"].page-works #works .works-context-action {
  right: clamp(18px, 2vw, 28px) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 138px !important;
  min-height: 54px !important;
  border-radius: 999px !important;
  border-color: rgba(125, 175, 232, 0.34) !important;
}
/* Final works action button: fixed lower-right command with icon-first wording. */
body.page-works #works .works-context-action,
html[data-theme="light"] body.page-works #works .works-context-action,
body[data-theme="light"].page-works #works .works-context-action {
  position: fixed !important;
  right: clamp(80px, 8vw, 90px) !important;
  bottom: 24px !important;
  top: auto !important;
  z-index: 92 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 124px !important;
  max-width: min(220px, calc(100vw - 44px)) !important;
  min-height: 44px !important;
  padding: 6px 14px 6px 7px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}
body.page-works #works .works-context-action {
  color: #f8d890 !important;
  border: 1px solid rgba(248, 216, 144, 0.36) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.055)),
    rgba(20, 25, 34, 0.62) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
html[data-theme="light"] body.page-works #works .works-context-action,
body[data-theme="light"].page-works #works .works-context-action {
  color: #162742 !important;
  border: 1px solid rgba(122, 173, 218, 0.28) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(232, 247, 255, 0.82)),
    rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 16px 38px rgba(55, 84, 124, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.64),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
body.page-works #works .works-context-action::before {
  content: none !important;
}
body.page-works #works .works-context-action:hover,
body.page-works #works .works-context-action:focus-visible {
  transform: translateY(-2px) !important;
}
body.page-works #works .works-context-action-icon {
  display: grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  color: #fff8e5 !important;
  border: 1px solid rgba(248, 216, 144, 0.2) !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.2), transparent 40%),
    rgba(248, 216, 144, 0.13) !important;
}
html[data-theme="light"] body.page-works #works .works-context-action-icon,
body[data-theme="light"].page-works #works .works-context-action-icon {
  color: #0b9fd1 !important;
  border-color: rgba(88, 184, 225, 0.22) !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.96), transparent 40%),
    rgba(225, 247, 255, 0.92) !important;
}
body.page-works #works .works-context-action-label {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  word-spacing: 2px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* Final light lead badge: match the flat pink outlined tag, not the gold pill. */
html[data-theme="light"] body.page-works #works .work-card .work-meta-main .tag.lead-role-tag,
html[data-theme="light"] body.page-works #works .work-card .lead-role-tag,
body[data-theme="light"].page-works #works .work-card .work-meta-main .tag.lead-role-tag,
body[data-theme="light"].page-works #works .work-card .lead-role-tag {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(244, 122, 179, 0.46) !important;
  border-radius: 0 !important;
  color: #d2297d !important;
  -webkit-text-fill-color: #d2297d !important;
  background: rgba(255, 235, 246, 0.74) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Works side rail: make the current Part unmistakable after click/scroll. */
body.page-works #works .works-side-jump a.is-active {
  color: #f8d890 !important;
  border-color: rgba(248, 216, 144, 0.56) !important;
  background: linear-gradient(135deg, rgba(248, 216, 144, 0.22), rgba(255, 255, 255, 0.08)),
    rgba(248, 216, 144, 0.08) !important;
  box-shadow: inset 3px 0 0 rgba(248, 216, 144, 0.82),
    0 10px 24px rgba(0, 0, 0, 0.14) !important;
}
body.page-works #works .works-side-jump a.is-active .part-label,
body.page-works #works .works-side-jump a.is-active .jump-text {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme="light"] body.page-works #works .works-side-jump a.is-active,
body[data-theme="light"].page-works #works .works-side-jump a.is-active {
  color: #2b5f8f !important;
  -webkit-text-fill-color: #2b5f8f !important;
  border-color: rgba(125, 175, 232, 0.34) !important;
  background: linear-gradient(135deg, rgba(210, 236, 250, 0.92) 0%, rgba(198, 225, 246, 0.88) 58%, rgba(242, 213, 231, 0.82) 100%) !important;
  box-shadow: inset 3px 0 0 rgba(105, 174, 224, 0.64),
    0 10px 22px rgba(69, 139, 210, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
html[data-theme="light"] body.page-works #works .works-side-jump a.is-active span,
html[data-theme="light"] body.page-works #works .works-side-jump a.is-active .part-label,
html[data-theme="light"] body.page-works #works .works-side-jump a.is-active .jump-text,
body[data-theme="light"].page-works #works .works-side-jump a.is-active span,
body[data-theme="light"].page-works #works .works-side-jump a.is-active .part-label,
body[data-theme="light"].page-works #works .works-side-jump a.is-active .jump-text {
  color: #2b5f8f !important;
  -webkit-text-fill-color: #2b5f8f !important;
}
/* Drama menu final layout: keep long platform names away from the scrollbar. */
body .works-drama-menu {
  width: min(560px, calc(100vw - 44px)) !important;
  max-width: calc(100vw - 44px) !important;
  overflow: hidden !important;
}
body .works-drama-menu-list {
  padding: 10px 14px 6px 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}
body .works-drama-menu-item {
  grid-template-columns: 64px minmax(0, 1fr) 48px !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: start !important;
  padding-right: 12px !important;
}
body .works-drama-menu-item strong,
body .works-drama-menu-item em {
  min-width: 0 !important;
  max-width: 100% !important;
}
body .works-drama-menu-item strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
}
body .works-drama-menu-item em {
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  line-height: 1.35 !important;
}
@media (max-width: 720px) {
  body .works-drama-menu-item {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }
  body .works-drama-menu-item em {
    grid-column: 2;
    justify-self: start !important;
    text-align: left !important;
  }
}
/* Music player final alignment and hierarchy pass. */
body.page-music #music .tonearm {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
body.page-music #music .tonearm::before,
body.page-music #music .tonearm::after,
body.page-music #music .tonearm-container::before,
body.page-music #music .tonearm-container::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.page-music #music .tonearm-arm {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(78, 82, 90, 0.48)) !important;
  box-shadow: none !important;
  opacity: 0.76 !important;
}
body.page-music #music .tonearm-counterweight {
  box-shadow: none !important;
  opacity: 0.8 !important;
}
body.page-music #music .playlist-item-info h5 {
  font-size: clamp(21px, 1.35vw, 28px) !important;
  line-height: 1.18 !important;
}
body.page-music #music .playlist-item-info p {
  font-size: clamp(15px, 0.95vw, 18px) !important;
  line-height: 1.38 !important;
}
body.page-music #music .player-controls {
  align-items: center !important;
}
body.page-music #music .player-controls .mode-btn,
body.page-music #music .player-controls .mode-btn.active,
body.page-music #music .player-controls .mode-btn[data-mode="shuffle"],
body.page-music #music .player-controls .mode-btn[data-mode="shuffle"].active {
  color: rgba(var(--music-theme-ink), 0.78) !important;
  border-color: rgba(var(--music-theme-ink), 0.14) !important;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.9), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(245, 248, 252, 0.72)) !important;
  box-shadow: 0 12px 24px rgba(var(--music-theme-ink), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
html[data-theme="dark"] body.page-music #music .player-controls .mode-btn,
html[data-theme="dark"] body.page-music #music .player-controls .mode-btn.active,
html[data-theme="dark"] body.page-music #music .player-controls .mode-btn[data-mode="shuffle"],
html[data-theme="dark"] body.page-music #music .player-controls .mode-btn[data-mode="shuffle"].active,
body[data-theme="dark"].page-music #music .player-controls .mode-btn,
body[data-theme="dark"].page-music #music .player-controls .mode-btn.active,
body[data-theme="dark"].page-music #music .player-controls .mode-btn[data-mode="shuffle"],
body[data-theme="dark"].page-music #music .player-controls .mode-btn[data-mode="shuffle"].active {
  color: rgba(255, 250, 242, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}
body.page-music #music .player-controls .like-btn {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  transform: none !important;
  align-self: center !important;
}
body.page-music #music .player-controls .like-btn:hover {
  transform: translateY(-1px) !important;
}
body.page-music #music .player-controls .like-count {
  top: 1px !important;
  left: 58% !important;
}
@media (max-width: 560px) {
  body.page-music #music .player-meta p .artist-name-large {
    font-size: clamp(16px, 4.3vw, 19px) !important;
  }
  body.page-music #music .player-controls .like-btn {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}
/* Music player title block: airier editorial typography. */
body.page-music #music .player-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(520px, 92%) !important;
  margin: clamp(28px, 3.6vh, 46px) auto clamp(44px, 5vh, 66px) !important;
  text-align: center !important;
}
body.page-music #music .player-info h4.track-title-gradient {
  max-width: 100% !important;
  margin: 0 auto 16px !important;
  font-family: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", Georgia, "Times New Roman", serif !important;
  font-size: clamp(26px, 1.85vw, 33px) !important;
  font-weight: 860 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}
body.page-music #music .player-meta {
  margin: 0 auto !important;
}
body.page-music #music .player-meta p,
body.page-music #music .player-meta p .artist-name-large {
  margin: 0 !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", serif !important;
  font-size: clamp(18px, 1.16vw, 21px) !important;
  font-weight: 720 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}
html[data-theme="light"] body.page-music #music .player-info h4.track-title-gradient,
body[data-theme="light"].page-music #music .player-info h4.track-title-gradient {
  color: rgba(var(--music-theme-ink), 0.88) !important;
  -webkit-text-fill-color: rgba(var(--music-theme-ink), 0.88) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}
html[data-theme="light"] body.page-music #music .player-meta p,
html[data-theme="light"] body.page-music #music .player-meta p .artist-name-large,
body[data-theme="light"].page-music #music .player-meta p,
body[data-theme="light"].page-music #music .player-meta p .artist-name-large {
  color: rgba(var(--music-theme-muted), 0.9) !important;
  -webkit-text-fill-color: rgba(var(--music-theme-muted), 0.9) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="dark"] body.page-music #music .player-info h4.track-title-gradient,
body[data-theme="dark"].page-music #music .player-info h4.track-title-gradient {
  color: rgba(255, 250, 244, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 250, 244, 0.9) !important;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.14) !important;
}
html[data-theme="dark"] body.page-music #music .player-meta p,
html[data-theme="dark"] body.page-music #music .player-meta p .artist-name-large,
body[data-theme="dark"].page-music #music .player-meta p,
body[data-theme="dark"].page-music #music .player-meta p .artist-name-large {
  color: rgba(255, 250, 244, 0.66) !important;
  -webkit-text-fill-color: rgba(255, 250, 244, 0.66) !important;
}
@media (max-width: 560px) {
  body.page-music #music .player-info {
    margin: 24px auto 38px !important;
  }
  body.page-music #music .player-info h4.track-title-gradient {
    margin-bottom: 12px !important;
    font-size: clamp(24px, 6.8vw, 30px) !important;
  }
  body.page-music #music .player-meta p,
  body.page-music #music .player-meta p .artist-name-large {
    font-size: clamp(16px, 4.5vw, 19px) !important;
  }
}
/* Schedule light theme: clearer crystal cards and transparent modal stage. */
[data-theme="light"] body.page-schedule #schedule .schedule-card,
[data-theme="light"] #schedule .schedule-card {
  border-color: rgba(88, 112, 140, 0.18) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(248, 252, 255, 0.22)),
    radial-gradient(circle at 14% 10%, rgba(255, 225, 239, 0.34), transparent 32%),
    radial-gradient(circle at 92% 88%, rgba(197, 238, 255, 0.4), transparent 40%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(148, 163, 184, 0.08),
    0 22px 56px rgba(80, 102, 126, 0.07) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card:hover,
[data-theme="light"] #schedule .schedule-card:hover {
  border-color: rgba(0, 107, 154, 0.28) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(248, 252, 255, 0.3)),
    radial-gradient(circle at 14% 10%, rgba(255, 225, 239, 0.42), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(197, 238, 255, 0.48), transparent 42%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 26px 64px rgba(72, 92, 116, 0.1) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster,
[data-theme="light"] #schedule .schedule-card.has-poster {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(248, 252, 255, 0.18)),
    radial-gradient(circle at 18% 16%, rgba(255, 229, 241, 0.32), transparent 32%),
    radial-gradient(circle at 88% 88%, rgba(206, 242, 255, 0.38), transparent 42%) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-core-info,
[data-theme="light"] #schedule .schedule-core-info,
[data-theme="light"] .schedule-modal-body .modal-core,
[data-theme="light"] .schedule-modal-body .modal-secondary {
  border-color: rgba(84, 105, 132, 0.14) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(249, 252, 255, 0.32)),
    rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 12px 32px rgba(74, 94, 119, 0.035) !important;
}
[data-theme="light"] .schedule-modal {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] body.page-schedule.schedule-modal-open,
[data-theme="light"] body.page-schedule.schedule-modal-open {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="light"] body.page-schedule.schedule-modal-open::before,
html[data-theme="light"] body.page-schedule.schedule-modal-open::after,
[data-theme="light"] body.page-schedule.schedule-modal-open::before,
[data-theme="light"] body.page-schedule.schedule-modal-open::after,
html[data-theme="light"] body.page-schedule.schedule-modal-open main > section::before,
html[data-theme="light"] body.page-schedule.schedule-modal-open main > section::after,
[data-theme="light"] body.page-schedule.schedule-modal-open main > section::before,
[data-theme="light"] body.page-schedule.schedule-modal-open main > section::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-theme="light"] body.page-schedule.schedule-modal-open :where(.ambient, .cursor-aura, #particleCanvas),
[data-theme="light"] body.page-schedule.schedule-modal-open :where(.ambient, .cursor-aura, #particleCanvas) {
  opacity: 0 !important;
  visibility: hidden !important;
}
html[data-theme="light"] body.page-schedule.schedule-modal-open .schedule-modal,
[data-theme="light"] body.page-schedule.schedule-modal-open .schedule-modal {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] body.page-schedule.schedule-modal-open .schedule-modal::before,
html[data-theme="light"] body.page-schedule.schedule-modal-open .schedule-modal::after,
[data-theme="light"] body.page-schedule.schedule-modal-open .schedule-modal::before,
[data-theme="light"] body.page-schedule.schedule-modal-open .schedule-modal::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}
/* Schedule light theme: stronger information hierarchy. */
[data-theme="light"] body.page-schedule #schedule .schedule-header,
[data-theme="light"] #schedule .schedule-header {
  gap: 14px !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-badges,
[data-theme="light"] #schedule .schedule-badges,
[data-theme="light"] .schedule-modal-body .modal-header .schedule-badges {
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  margin: 0 !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-header h3,
[data-theme="light"] #schedule .schedule-header h3,
[data-theme="light"] .schedule-modal-body .modal-header h3 {
  max-width: min(100%, 760px) !important;
  margin: 0 auto !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-family: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", Georgia, serif !important;
  font-size: clamp(28px, 2.2vw, 42px) !important;
  font-weight: 880 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-wrap: balance;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-header h3,
[data-theme="light"] #schedule .schedule-card.has-thumb .schedule-header h3 {
  font-size: clamp(22px, 1.65vw, 31px) !important;
  text-align: left !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-tag,
[data-theme="light"] #schedule .schedule-tag,
[data-theme="light"] body.page-schedule #schedule .schedule-progress,
[data-theme="light"] #schedule .schedule-progress,
[data-theme="light"] .schedule-modal-body .modal-header .tag,
[data-theme="light"] .schedule-modal-body .schedule-progress {
  min-height: 30px !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-tag,
[data-theme="light"] #schedule .schedule-tag,
[data-theme="light"] .schedule-modal-body .modal-header .tag {
  color: #a83268 !important;
  -webkit-text-fill-color: #a83268 !important;
  border-color: rgba(168, 50, 104, 0.2) !important;
  background: linear-gradient(135deg, rgba(255, 236, 246, 0.78), rgba(255, 255, 255, 0.5)),
    rgba(255, 246, 250, 0.44) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-progress,
[data-theme="light"] #schedule .schedule-progress,
[data-theme="light"] .schedule-modal-body .schedule-progress {
  color: #006b9a !important;
  -webkit-text-fill-color: #006b9a !important;
  border-color: rgba(0, 107, 154, 0.22) !important;
  background: linear-gradient(135deg, rgba(224, 247, 255, 0.82), rgba(255, 255, 255, 0.54)),
    rgba(233, 248, 255, 0.48) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-progress.upcoming,
[data-theme="light"] #schedule .schedule-progress.upcoming {
  color: #8a5a10 !important;
  -webkit-text-fill-color: #8a5a10 !important;
  border-color: rgba(138, 90, 16, 0.24) !important;
  background: linear-gradient(135deg, rgba(255, 246, 224, 0.86), rgba(255, 255, 255, 0.58)),
    rgba(255, 248, 232, 0.48) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-core-info,
[data-theme="light"] #schedule .schedule-core-info,
[data-theme="light"] .schedule-modal-body .modal-core {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px 14px !important;
  padding: clamp(18px, 1.5vw, 24px) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-date,
[data-theme="light"] #schedule .schedule-copy p.is-date,
[data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-place,
[data-theme="light"] #schedule .schedule-copy p.is-place,
[data-theme="light"] .schedule-modal-body .modal-core p.is-date,
[data-theme="light"] .schedule-modal-body .modal-core p.is-place,
[data-theme="light"] .schedule-modal-body .modal-core p.is-highlight-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  border: 1px solid rgba(158, 119, 46, 0.24) !important;
  background: linear-gradient(135deg, rgba(255, 251, 243, 0.8), rgba(255, 255, 255, 0.46)),
    rgba(255, 248, 232, 0.32) !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  font-weight: 640 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-date strong,
[data-theme="light"] #schedule .schedule-copy p.is-date strong,
[data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-place strong,
[data-theme="light"] #schedule .schedule-copy p.is-place strong,
[data-theme="light"] .schedule-modal-body .modal-core p.is-date strong,
[data-theme="light"] .schedule-modal-body .modal-core p.is-place strong,
[data-theme="light"] .schedule-modal-body .modal-core p.is-highlight-date strong {
  color: #8a5a10 !important;
  -webkit-text-fill-color: #8a5a10 !important;
  font-size: 0.94em !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-secondary-info,
[data-theme="light"] #schedule .schedule-secondary-info,
[data-theme="light"] .schedule-modal-body .modal-secondary {
  color: #475569 !important;
  font-size: clamp(15px, 0.98vw, 17px) !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-secondary-info p,
[data-theme="light"] #schedule .schedule-secondary-info p,
[data-theme="light"] .schedule-modal-body .modal-secondary p {
  font-weight: 520 !important;
  line-height: 1.72 !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-secondary-info strong,
[data-theme="light"] #schedule .schedule-secondary-info strong,
[data-theme="light"] .schedule-modal-body .modal-secondary strong {
  color: #8a5a10 !important;
  -webkit-text-fill-color: #8a5a10 !important;
  font-weight: 820 !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-poster .schedule-copy,
[data-theme="light"] #schedule .schedule-card.has-poster .schedule-copy {
  gap: 22px !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-header,
[data-theme="light"] #schedule .schedule-card.has-thumb .schedule-header {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
}
[data-theme="light"] body.page-schedule #schedule .schedule-card.has-thumb .schedule-core-info,
[data-theme="light"] #schedule .schedule-card.has-thumb .schedule-core-info {
  justify-content: flex-start !important;
  padding: 12px !important;
}
@media (max-width: 720px) {
  [data-theme="light"] body.page-schedule #schedule .schedule-header h3,
  [data-theme="light"] #schedule .schedule-header h3,
  [data-theme="light"] .schedule-modal-body .modal-header h3 {
    font-size: clamp(24px, 7vw, 34px) !important;
  }
  [data-theme="light"] body.page-schedule #schedule .schedule-core-info,
  [data-theme="light"] #schedule .schedule-core-info,
  [data-theme="light"] .schedule-modal-body .modal-core {
    justify-content: flex-start !important;
  }
  [data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-date,
  [data-theme="light"] #schedule .schedule-copy p.is-date,
  [data-theme="light"] body.page-schedule #schedule .schedule-copy p.is-place,
  [data-theme="light"] #schedule .schedule-copy p.is-place,
  [data-theme="light"] .schedule-modal-body .modal-core p.is-date,
  [data-theme="light"] .schedule-modal-body .modal-core p.is-place,
  [data-theme="light"] .schedule-modal-body .modal-core p.is-highlight-date {
    width: 100% !important;
    white-space: normal !important;
  }
}
/* FINAL schedule centering patch: text must sit in the vertical center of its box. */
body.page-schedule #schedule .schedule-core-info,
body.page-schedule .schedule-modal-body .modal-core,
[data-theme="light"] body.page-schedule #schedule .schedule-core-info,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-core {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 12px 16px !important;
  text-align: center !important;
}
body.page-schedule .schedule-modal-body .modal-core,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-core {
  min-height: 104px !important;
  padding: 0 24px !important;
}
body.page-schedule #schedule .schedule-core-info p,
body.page-schedule .schedule-modal-body .modal-core p,
[data-theme="light"] body.page-schedule #schedule .schedule-core-info p,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-core p {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  line-height: 44px !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
body.page-schedule .schedule-modal-body .modal-secondary,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-secondary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 16px !important;
  min-height: 132px !important;
  padding: 0 28px !important;
  text-align: center !important;
}
body.page-schedule .schedule-modal-body .modal-secondary p,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-secondary p {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 34px !important;
  text-align: center !important;
}
body.page-schedule .schedule-modal-body .modal-countdown,
[data-theme="light"] body.page-schedule .schedule-modal-body .modal-countdown {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 18px !important;
  min-height: 62px !important;
  height: 62px !important;
  padding: 0 24px !important;
  line-height: 62px !important;
  text-align: center !important;
}
body.page-schedule :where(.schedule-label, .schedule-value, .schedule-countdown-label, .schedule-countdown),
[data-theme="light"] body.page-schedule :where(.schedule-label, .schedule-value, .schedule-countdown-label, .schedule-countdown) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  vertical-align: middle !important;
}
body.page-schedule .schedule-modal-body :where(.schedule-label, .schedule-value, .schedule-countdown-label, .schedule-countdown),
[data-theme="light"] body.page-schedule .schedule-modal-body :where(.schedule-label, .schedule-value, .schedule-countdown-label, .schedule-countdown) {
  transform: translateY(1px) !important;
}
/* FINAL gallery timeline polish: neutral glass month/date cards. */
body.page-gallery #gallery {
  --gallery-timeline-radius: 24px;
  --gallery-date-radius: 22px;
  --gallery-glass-highlight: rgba(255, 255, 255, 0.76);
  --gallery-glass-line: rgba(255, 255, 255, 0.34);
  --gallery-dark-ink: #f8edf5;
  --gallery-dark-soft: rgba(255, 239, 247, 0.76);
  --gallery-dark-muted: rgba(222, 235, 248, 0.66);
}
[data-theme="light"] body.page-gallery #gallery {
  --gallery-light-ink: #182338;
  --gallery-light-soft: #536275;
  --gallery-light-muted: #758398;
  --gallery-light-rose: #9c6477;
  --gallery-light-sky: #477d9f;
  --gallery-light-glass: radial-gradient(circle at 13% 10%, rgba(255, 255, 255, 0.82), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(214, 236, 250, 0.42), transparent 34%),
    linear-gradient(138deg, rgba(255, 255, 255, 0.68), rgba(248, 252, 255, 0.48) 56%, rgba(239, 249, 255, 0.34));
  --gallery-light-glass-quiet: radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.68), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(212, 237, 251, 0.36), transparent 36%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.56), rgba(248, 252, 255, 0.34) 58%, rgba(241, 249, 255, 0.24));
}
body.page-gallery #gallery .gallery-month-heading,
body.page-gallery #gallery .gallery-date-heading,
body.page-gallery #gallery .gallery-date-group {
  position: relative !important;
  isolation: isolate !important;
}
body.page-gallery #gallery .gallery-month-heading,
body.page-gallery #gallery .gallery-date-heading {
  overflow: hidden !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "label toggle"
    "title toggle"
    "meta toggle" !important;
  align-items: center !important;
  row-gap: 8px !important;
  min-height: clamp(118px, 11vw, 148px) !important;
  padding: clamp(22px, 2.8vw, 34px) clamp(22px, 3.2vw, 42px) !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: var(--gallery-timeline-radius) !important;
  background: var(--gallery-light-glass) !important;
  box-shadow: 0 18px 52px rgba(62, 84, 111, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 0 0 1px rgba(118, 158, 190, 0.08) inset !important;
  backdrop-filter: blur(24px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading::before,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading::before,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.7), transparent 30%, rgba(217, 237, 251, 0.22) 72%, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 48%) !important;
  opacity: 0.82 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading::after,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 0 !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(116, 157, 190, 0.3), rgba(255, 255, 255, 0.64), transparent) !important;
  opacity: 1 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading:hover,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.94) !important;
  background: radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.9), transparent 30%),
    radial-gradient(circle at 91% 16%, rgba(207, 235, 250, 0.5), transparent 36%),
    linear-gradient(138deg, rgba(255, 255, 255, 0.76), rgba(248, 252, 255, 0.54) 56%, rgba(239, 249, 255, 0.38)) !important;
  box-shadow: 0 24px 64px rgba(62, 84, 111, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 0 0 1px rgba(118, 158, 190, 0.1) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading span,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading span {
  grid-area: label !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(118, 145, 174, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.54) !important;
  color: var(--gallery-light-rose) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading h3,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading h3 {
  grid-area: title !important;
  margin: 0 !important;
  color: var(--gallery-light-ink) !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  opacity: 0.96 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  font-family: "Noto Serif SC", "Songti SC", serif !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading p,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading p {
  grid-area: meta !important;
  width: fit-content !important;
  margin: 2px 0 0 !important;
  padding: 6px 13px !important;
  border: 1px solid rgba(118, 145, 174, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.48) !important;
  color: var(--gallery-light-soft) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(13px, 1.02vw, 15px) !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-toggle {
  grid-area: toggle !important;
  align-self: center !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(118, 145, 174, 0.14) !important;
  background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.9), transparent 40%),
    rgba(255, 255, 255, 0.48) !important;
  color: var(--gallery-light-rose) !important;
  box-shadow: 0 10px 24px rgba(73, 95, 120, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group {
  padding: clamp(22px, 2.8vw, 34px) !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: calc(var(--gallery-date-radius) + 2px) !important;
  background: var(--gallery-light-glass-quiet) !important;
  box-shadow: 0 18px 48px rgba(62, 84, 111, 0.11),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(118, 158, 190, 0.08) inset !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 58px !important;
  margin: 0 0 22px !important;
  padding: 12px 14px 12px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: var(--gallery-date-radius) !important;
  background: radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(239, 249, 255, 0.3)) !important;
  box-shadow: 0 10px 28px rgba(62, 84, 111, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
  backdrop-filter: blur(16px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.14) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading::after,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading::after {
  display: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading h4,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading h4 {
  margin: 0 !important;
  color: var(--gallery-light-rose) !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 0.92 !important;
  font-family: "Noto Serif SC", "Songti SC", serif !important;
  font-size: clamp(28px, 2.55vw, 42px) !important;
  font-weight: 520 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.54) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading p {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(118, 145, 174, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.54) !important;
  color: var(--gallery-light-soft) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(13px, 0.95vw, 15px) !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "label toggle"
    "title toggle"
    "meta toggle" !important;
  align-items: center !important;
  row-gap: 8px !important;
  min-height: clamp(116px, 10vw, 142px) !important;
  padding: clamp(22px, 2.8vw, 34px) clamp(22px, 3.2vw, 42px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--gallery-timeline-radius) !important;
  background: radial-gradient(circle at 10% 14%, rgba(255, 177, 207, 0.22), transparent 32%),
    radial-gradient(circle at 94% 20%, rgba(116, 190, 236, 0.2), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.065) 58%, rgba(116, 190, 236, 0.08)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  backdrop-filter: blur(28px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.22) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group {
  padding: clamp(22px, 2.8vw, 34px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: calc(var(--gallery-date-radius) + 2px) !important;
  background: radial-gradient(circle at 12% 12%, rgba(255, 177, 207, 0.18), transparent 34%),
    radial-gradient(circle at 92% 24%, rgba(116, 190, 236, 0.2), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055) 58%, rgba(116, 190, 236, 0.07)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(255, 255, 255, 0.055) inset !important;
  backdrop-filter: blur(26px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.2) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 58px !important;
  margin: 0 0 22px !important;
  padding: 12px 14px 12px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--gallery-date-radius) !important;
  background: radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(210, 235, 250, 0.065)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading span,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading span {
  grid-area: label !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(255, 180, 211, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: #ffabc8 !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading h3,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading h4,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading h3,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading h4 {
  background: transparent !important;
  color: var(--gallery-dark-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  opacity: 0.94 !important;
  text-shadow: 0 1px 18px rgba(255, 168, 203, 0.12) !important;
  font-family: "Noto Serif SC", "Songti SC", serif !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading h3,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading h3 {
  grid-area: title !important;
  margin: 0 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading h4,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading h4 {
  margin: 0 !important;
  font-size: clamp(28px, 2.55vw, 42px) !important;
  line-height: 1.1 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading p,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading p,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading p,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading p {
  width: fit-content !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(221, 236, 249, 0.13) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.078) !important;
  color: var(--gallery-dark-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(13px, 0.95vw, 15px) !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading p,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading p {
  grid-area: meta !important;
  margin-top: 2px !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-toggle,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-toggle {
  grid-area: toggle !important;
  align-self: center !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(255, 180, 211, 0.16) !important;
  background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.075) !important;
  color: #ffabc8 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.16) inset !important;
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
  [data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading,
  [data-theme="dark"] body.page-gallery #gallery .gallery-month-heading {
    min-height: 108px !important;
    padding: 18px !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
  [data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading,
  [data-theme="dark"] body.page-gallery #gallery .gallery-date-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
}
/* FINAL gallery album pass: refined filters, jeweled timeline, and curated photo layouts. */
body.page-gallery #gallery {
  --gallery-album-width: min(1120px, calc(100vw - 84px));
  --gallery-tab-radius: 18px;
  --gallery-jewel-size: 18px;
  --gallery-photo-radius: 16px;
}
body.page-gallery #gallery .gallery-tabs,
body.page-gallery #gallery .gallery-category-desc,
body.page-gallery #gallery .gallery-controls,
body.page-gallery #gallery .gallery-timeline {
  max-width: var(--gallery-album-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
body.page-gallery #gallery .gallery-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.25vw, 16px) !important;
  align-items: stretch !important;
}
body.page-gallery #gallery .gallery-tab {
  min-height: 66px !important;
  padding: 10px 15px !important;
  border-radius: var(--gallery-tab-radius) !important;
  transform: translateY(0) !important;
  transition: transform 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease,
    opacity 0.28s ease !important;
}
body.page-gallery #gallery .gallery-tab-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  font-size: 14px !important;
}
body.page-gallery #gallery .gallery-tab-text {
  gap: 2px !important;
  min-width: 0 !important;
}
body.page-gallery #gallery .gallery-tab-title {
  font-size: clamp(15px, 1.02vw, 17px) !important;
  font-weight: 820 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}
body.page-gallery #gallery .gallery-tab-subtitle {
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab {
  opacity: 0.78 !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(244, 250, 255, 0.24)) !important;
  box-shadow: 0 8px 22px rgba(62, 84, 111, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active,
[data-theme="light"] body.page-gallery #gallery .gallery-tab:hover,
[data-theme="light"] body.page-gallery #gallery .gallery-tab:focus-visible {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(239, 249, 255, 0.36)) !important;
  box-shadow: 0 14px 30px rgba(62, 84, 111, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(115, 157, 190, 0.08) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab,
[data-theme="dark"] body.page-gallery #gallery .gallery-tab {
  opacity: 0.76 !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab.active,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab:hover,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab:focus-visible,
[data-theme="dark"] body.page-gallery #gallery .gallery-tab.active,
[data-theme="dark"] body.page-gallery #gallery .gallery-tab:hover,
[data-theme="dark"] body.page-gallery #gallery .gallery-tab:focus-visible {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255, 180, 211, 0.24) !important;
  background: radial-gradient(circle at 14% 10%, rgba(255, 185, 213, 0.16), transparent 32%),
    radial-gradient(circle at 92% 22%, rgba(116, 190, 236, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055)) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.17) inset !important;
}
body.page-gallery #gallery .gallery-timeline {
  position: relative !important;
  display: grid !important;
  gap: clamp(24px, 2.8vw, 38px) !important;
  padding-left: 0 !important;
}
body.page-gallery #gallery .gallery-timeline::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 28px !important;
  bottom: 22px !important;
  left: 9px !important;
  width: 1px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-timeline::before {
  background: linear-gradient(180deg, transparent, rgba(150, 174, 196, 0.34) 8%, rgba(178, 125, 144, 0.24) 56%, rgba(102, 155, 188, 0.24) 92%, transparent) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-timeline::before,
[data-theme="dark"] body.page-gallery #gallery .gallery-timeline::before {
  background: linear-gradient(180deg, transparent, rgba(255, 180, 211, 0.34) 10%, rgba(116, 190, 236, 0.28) 52%, rgba(255, 180, 211, 0.18) 92%, transparent) !important;
  box-shadow: 0 0 18px rgba(116, 190, 236, 0.16) !important;
}
body.page-gallery #gallery .gallery-month-group {
  position: relative !important;
  padding-left: 42px !important;
}
body.page-gallery #gallery .gallery-month-marker {
  box-sizing: border-box !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  width: var(--gallery-jewel-size) !important;
  height: var(--gallery-jewel-size) !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 3 !important;
}
body.page-gallery #gallery .gallery-month-marker::before,
body.page-gallery #gallery .gallery-month-marker::after {
  content: "" !important;
  position: absolute !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
body.page-gallery #gallery .gallery-month-marker::before {
  inset: -7px !important;
  opacity: 0.46 !important;
}
body.page-gallery #gallery .gallery-month-marker::after {
  inset: 5px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker {
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.98), rgba(226, 241, 250, 0.64) 46%, rgba(162, 188, 211, 0.46)) !important;
  box-shadow: 0 8px 20px rgba(72, 96, 121, 0.16),
    0 0 0 4px rgba(255, 255, 255, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker::before {
  background: radial-gradient(circle, rgba(141, 177, 205, 0.2), transparent 64%) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-marker::after {
  background: rgba(159, 104, 126, 0.74) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-marker,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-marker {
  border: 1px solid rgba(255, 203, 224, 0.34) !important;
  background: radial-gradient(circle at 35% 28%, rgba(255, 223, 237, 0.92), rgba(255, 160, 200, 0.54) 48%, rgba(116, 190, 236, 0.32)) !important;
  box-shadow: 0 0 0 4px rgba(255, 180, 211, 0.08),
    0 0 24px rgba(255, 180, 211, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.24) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-marker::before,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-marker::before {
  background: radial-gradient(circle, rgba(116, 190, 236, 0.22), transparent 64%) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-marker::after,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-marker::after {
  background: rgba(255, 180, 211, 0.92) !important;
}
body.page-gallery #gallery .gallery-month-content {
  display: grid !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
  transform-origin: top center !important;
  transition: max-height 0.42s ease,
    opacity 0.32s ease,
    transform 0.42s ease,
    gap 0.32s ease !important;
}
body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-content {
  transform: translateY(-8px) scaleY(0.985) !important;
}
body.page-gallery #gallery .gallery-date-heading {
  overflow: hidden !important;
}
body.page-gallery #gallery .gallery-date-heading h4 {
  font-family: "Noto Serif SC", "Songti SC", serif !important;
  font-weight: 480 !important;
}
body.page-gallery #gallery .gallery-date-heading p,
body.page-gallery #gallery .gallery-month-heading p,
body.page-gallery #gallery .gallery-tab-subtitle {
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
}
body.page-gallery #gallery .gallery-date-grid {
  position: relative !important;
  display: grid !important;
  gap: clamp(16px, 1.8vw, 24px) !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 4px !important;
}
body.page-gallery #gallery .gallery-date-group[data-image-count="2"] .gallery-date-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 760px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
body.page-gallery #gallery .gallery-date-group[data-image-count="3"] .gallery-date-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: clamp(16px, 1.8vw, 22px) !important;
  overflow-x: auto !important;
  padding: 6px 6px 18px !important;
  scroll-padding-inline: 8px !important;
  scroll-snap-type: x proximity !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 42px), transparent 100%) !important;
}
body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-item,
body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-item {
  flex: 0 0 clamp(218px, 27vw, 310px) !important;
  scroll-snap-align: start !important;
}
body.page-gallery #gallery .gallery-date-group.is-scrollable::after {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  bottom: 20px !important;
  width: 76px !important;
  height: 2px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group.is-scrollable::after,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group.is-scrollable::after {
  background: linear-gradient(90deg, transparent, rgba(255, 180, 211, 0.28), rgba(116, 190, 236, 0.28), transparent) !important;
}
body.page-gallery #gallery .gallery-date-grid .gallery-item,
body.page-gallery #gallery .gallery-item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--gallery-photo-radius) !important;
  transform: translateY(0) scale(1) !important;
  transition: transform 0.34s ease,
    box-shadow 0.34s ease,
    border-color 0.34s ease,
    filter 0.34s ease !important;
}
body.page-gallery #gallery .gallery-date-grid .gallery-item::after,
body.page-gallery #gallery .gallery-item::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
body.page-gallery #gallery .gallery-item img {
  display: block !important;
  width: 100% !important;
  transition: transform 0.42s ease,
    filter 0.42s ease !important;
}
body.page-gallery #gallery .gallery-date-grid .gallery-item:hover,
body.page-gallery #gallery .gallery-date-grid .gallery-item:focus-visible {
  transform: translateY(-5px) scale(1.012) !important;
  outline: none !important;
}
body.page-gallery #gallery .gallery-date-grid .gallery-item:hover img,
body.page-gallery #gallery .gallery-date-grid .gallery-item:focus-visible img {
  transform: scale(1.025) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item,
[data-theme="light"] body.page-gallery #gallery .gallery-item {
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(239, 249, 255, 0.22)) !important;
  box-shadow: 0 16px 34px rgba(62, 84, 111, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item::after,
[data-theme="light"] body.page-gallery #gallery .gallery-item::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    inset 0 -22px 42px rgba(44, 68, 92, 0.08) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item:hover,
[data-theme="light"] body.page-gallery #gallery .gallery-date-grid .gallery-item:focus-visible {
  border-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 22px 46px rgba(62, 84, 111, 0.17),
    0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-grid .gallery-item,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-grid .gallery-item,
[data-theme="dark"] body.page-gallery #gallery .gallery-item {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)) !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.14) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-grid .gallery-item::after,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-item::after,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-grid .gallery-item::after,
[data-theme="dark"] body.page-gallery #gallery .gallery-item::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 -26px 48px rgba(0, 0, 0, 0.18) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-grid .gallery-item:hover,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-grid .gallery-item:focus-visible,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-grid .gallery-item:hover,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-grid .gallery-item:focus-visible {
  border-color: rgba(255, 204, 226, 0.32) !important;
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.34),
    0 0 32px rgba(116, 190, 236, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.17) inset !important;
}
@media (max-width: 900px) {
  body.page-gallery #gallery {
    --gallery-album-width: calc(100vw - 32px);
  }
  body.page-gallery #gallery .gallery-tabs {
    grid-template-columns: 1fr !important;
  }
  body.page-gallery #gallery .gallery-month-group {
    padding-left: 30px !important;
  }
  body.page-gallery #gallery .gallery-timeline::before {
    left: 8px !important;
  }
  body.page-gallery #gallery .gallery-month-marker {
    top: 38px !important;
    width: 17px !important;
    height: 17px !important;
  }
  body.page-gallery #gallery .gallery-date-group[data-image-count="2"] .gallery-date-grid,
  body.page-gallery #gallery .gallery-date-group[data-image-count="3"] .gallery-date-grid {
    grid-template-columns: 1fr !important;
    max-width: min(420px, 100%) !important;
  }
}
/* FINAL gallery scale trim: make month/date cards just a little calmer. */
body.page-gallery #gallery .gallery-month-heading span,
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading span,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading span,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading span,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading span {
  font-size: 11px !important;
}
body.page-gallery #gallery .gallery-month-heading p,
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading p,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading p,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading p,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading p {
  font-size: clamp(12px, 0.92vw, 14px) !important;
}
body.page-gallery #gallery .gallery-month-toggle,
[data-theme="light"] body.page-gallery #gallery .gallery-month-toggle,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-toggle,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-toggle,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-toggle {
  width: 44px !important;
  height: 44px !important;
}
body.page-gallery #gallery .gallery-month-marker {
  top: 39px !important;
}
body.page-gallery #gallery .gallery-date-group,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-group,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group {
  padding: clamp(20px, 2.35vw, 30px) !important;
}
body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading {
  margin-bottom: 18px !important;
}
body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading p,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading p,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading p {
  font-size: clamp(12px, 0.9vw, 14px) !important;
}
@media (max-width: 760px) {
  body.page-gallery #gallery .gallery-month-heading,
  [data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
  [data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading,
  [data-theme="dark"] body.page-gallery #gallery .gallery-month-heading {
    min-height: 98px !important;
    padding: 16px !important;
  }
}
/* FINAL gallery readability trim: smaller titles with more breathing room. */
body.page-gallery #gallery .gallery-month-heading,
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading {
  min-height: clamp(100px, 8.1vw, 118px) !important;
  padding: clamp(18px, 2.1vw, 26px) clamp(22px, 2.8vw, 36px) !important;
  row-gap: 9px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading h3,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading h3 {
  font-size: clamp(29px, 3vw, 45px) !important;
  line-height: 1.08 !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading h3,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading h3 {
  font-size: clamp(29px, 2.95vw, 44px) !important;
  line-height: 1.08 !important;
}
body.page-gallery #gallery .gallery-month-heading span,
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading span,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading span,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading span,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading span {
  margin-bottom: 2px !important;
  padding: 5px 13px !important;
  line-height: 1.25 !important;
}
body.page-gallery #gallery .gallery-month-heading p,
[data-theme="light"] body.page-gallery #gallery .gallery-month-heading p,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading p,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading p,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-heading p {
  margin-top: 1px !important;
  padding: 6px 13px !important;
  line-height: 1.25 !important;
}
body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading {
  min-height: 50px !important;
  padding: 10px 14px 10px 18px !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading h4,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading h4,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading h4,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading h4 {
  font-size: clamp(20px, 1.78vw, 30px) !important;
  line-height: 1.12 !important;
}
body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] body.page-gallery #gallery .gallery-date-heading p,
[data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading p,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading p,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-heading p {
  padding: 6px 13px !important;
  line-height: 1.22 !important;
}
@media (max-width: 760px) {
  [data-theme="light"] body.page-gallery #gallery .gallery-month-heading h3,
  [data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-month-heading h3,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-heading h3,
  [data-theme="dark"] body.page-gallery #gallery .gallery-month-heading h3 {
    font-size: clamp(26px, 7.2vw, 34px) !important;
  }
  [data-theme="light"] body.page-gallery #gallery .gallery-date-heading h4,
  [data-theme="light"] body.page-gallery.gallery-has-expanded #gallery .gallery-date-heading h4,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-heading h4,
  [data-theme="dark"] body.page-gallery #gallery .gallery-date-heading h4 {
    font-size: clamp(20px, 5.4vw, 28px) !important;
  }
}
/* FINAL gallery single-photo trim: keep one-image dates the same scale as multi-image thumbnails. */
body.page-gallery #gallery .gallery-date-group[data-image-count="1"] .gallery-date-grid {
  display: flex !important;
  justify-content: center !important;
  padding: 6px 6px 18px !important;
}
body.page-gallery #gallery .gallery-date-group[data-image-count="1"] .gallery-item {
  flex: 0 0 clamp(218px, 27vw, 310px) !important;
  width: clamp(218px, 27vw, 310px) !important;
  max-width: 310px !important;
  transform: translateY(0) scale(1) !important;
}
body.page-gallery #gallery .gallery-date-group[data-image-count="1"] .gallery-item:hover,
body.page-gallery #gallery .gallery-date-group[data-image-count="1"] .gallery-item:focus-visible {
  transform: translateY(-5px) scale(1.012) !important;
}
@media (max-width: 900px) {
  body.page-gallery #gallery .gallery-date-group[data-image-count="1"] .gallery-item {
    flex-basis: min(72vw, 300px) !important;
    width: min(72vw, 300px) !important;
    max-width: 300px !important;
  }
}
/* FINAL gallery theme split: light keeps natural film-strip scroll, dark expands all photos. */
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: clamp(18px, 2.2vw, 24px) !important;
  scroll-behavior: auto !important;
  scroll-padding-inline: 4px !important;
  scroll-snap-type: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(151, 174, 194, 0.42) rgba(255, 255, 255, 0.22) !important;
  overscroll-behavior-inline: contain !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid::-webkit-scrollbar,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid::-webkit-scrollbar {
  height: 8px;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid::-webkit-scrollbar-track,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid::-webkit-scrollbar-thumb,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 154, 170, 0.48), rgba(139, 183, 203, 0.52));
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid .gallery-item,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-item {
  width: auto !important;
  max-width: 340px !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid {
  display: grid !important;
  gap: clamp(16px, 1.8vw, 22px) !important;
  overflow: visible !important;
  padding: 6px !important;
  scroll-padding-inline: 0 !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
  overscroll-behavior-inline: auto !important;
  mask-image: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid::-webkit-scrollbar,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid::-webkit-scrollbar,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid::-webkit-scrollbar,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid::-webkit-scrollbar {
  display: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-item,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-item,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-item,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-item {
  flex: initial !important;
  scroll-snap-align: none !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group.is-scrollable::after,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group.is-scrollable::after {
  display: none !important;
}
@media (max-width: 760px) {
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
  html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid,
  [data-theme="dark"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
  [data-theme="dark"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid {
    grid-template-columns: 1fr !important;
  }
}
/* FINAL gallery thumbnail normalization: every date uses the same photo size and ratio. */
body.page-gallery #gallery {
  --gallery-thumb-size: clamp(218px, 24vw, 300px);
  --gallery-thumb-ratio: 3 / 4;
  --gallery-thumb-height: calc(var(--gallery-thumb-size) / 3 * 4);
}
body.page-gallery #gallery .gallery-date-group[data-image-count="1"] .gallery-date-grid,
body.page-gallery #gallery .gallery-date-group[data-image-count="2"] .gallery-date-grid,
body.page-gallery #gallery .gallery-date-group[data-image-count="3"] .gallery-date-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, var(--gallery-thumb-size)) !important;
  justify-content: center !important;
  gap: clamp(16px, 1.8vw, 22px) !important;
  max-width: none !important;
  padding: 6px 6px 18px !important;
}
body.page-gallery #gallery .gallery-date-grid .gallery-item,
body.page-gallery #gallery .gallery-item,
body.page-gallery #gallery .gallery-date-group[data-image-count="1"] .gallery-item,
body.page-gallery #gallery .gallery-date-group[data-image-count="2"] .gallery-item,
body.page-gallery #gallery .gallery-date-group[data-image-count="3"] .gallery-item,
body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-item,
body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-item {
  width: var(--gallery-thumb-size) !important;
  height: var(--gallery-thumb-height) !important;
  min-width: 0 !important;
  max-width: var(--gallery-thumb-size) !important;
  aspect-ratio: var(--gallery-thumb-ratio) !important;
}
body.page-gallery #gallery .gallery-date-grid .gallery-item img,
body.page-gallery #gallery .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid {
  align-items: stretch !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid .gallery-item,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-item {
  flex: 0 0 var(--gallery-thumb-size) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid {
  grid-template-columns: repeat(auto-fit, var(--gallery-thumb-size)) !important;
  justify-content: center !important;
  align-items: stretch !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-item,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-item,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-item,
[data-theme="dark"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-item {
  width: var(--gallery-thumb-size) !important;
  max-width: var(--gallery-thumb-size) !important;
}
@media (max-width: 760px) {
  body.page-gallery #gallery {
    --gallery-thumb-size: min(72vw, 300px);
  }
}
/* FINAL gallery light film-strip clarity: keep photos uncropped and date labels readable. */
[data-theme="light"] body.page-gallery #gallery .gallery-date-group {
  overflow: visible !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) {
  padding-bottom: clamp(26px, 2.8vw, 38px) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
[data-theme="light"] body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid {
  min-height: calc(var(--gallery-thumb-size) / 3 * 4 + 28px) !important;
  padding: 6px 6px 30px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-gutter: stable !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-date-group.is-scrollable::after {
  right: clamp(26px, 3vw, 42px) !important;
  bottom: 13px !important;
  width: min(160px, 18vw) !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, rgba(118, 156, 186, 0.26), rgba(255, 255, 255, 0.78), rgba(118, 156, 186, 0.22), transparent) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  opacity: 0.9 !important;
}
/* FINAL gallery crop fix: make date cards reserve the full thumbnail height. */
body.page-gallery #gallery .gallery-month-group,
body.page-gallery #gallery .gallery-month-content {
  overflow: hidden !important;
}
body.page-gallery #gallery .gallery-month-group:not(.collapsed) .gallery-month-content {
  max-height: none !important;
  opacity: 1 !important;
}
body.page-gallery #gallery .gallery-date-group {
  overflow: hidden !important;
}
body.page-gallery #gallery .gallery-date-grid {
  align-items: start !important;
  grid-auto-rows: var(--gallery-thumb-height) !important;
}
body.page-gallery #gallery .gallery-date-group[data-image-count="1"] .gallery-date-grid,
body.page-gallery #gallery .gallery-date-group[data-image-count="2"] .gallery-date-grid,
body.page-gallery #gallery .gallery-date-group[data-image-count="3"] .gallery-date-grid {
  min-height: calc(var(--gallery-thumb-height) + 24px) !important;
}
body.page-gallery #gallery .gallery-date-group.is-scrollable,
body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) {
  padding-bottom: clamp(28px, 3vw, 42px) !important;
}
body.page-gallery #gallery .gallery-date-group.is-scrollable .gallery-date-grid,
body.page-gallery #gallery .gallery-date-group[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]) .gallery-date-grid {
  min-height: calc(var(--gallery-thumb-height) + 34px) !important;
  overflow-y: visible !important;
  padding-bottom: 34px !important;
}
body.page-gallery #gallery .gallery-month-group.collapsed,
body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-content {
  overflow: hidden !important;
  max-height: 0 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-caption {
  z-index: 6 !important;
  min-height: 58px !important;
  padding: 18px 18px 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.68) inset,
    0 -18px 38px rgba(36, 58, 82, 0.1) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-caption p {
  width: fit-content !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
}
/* FINAL gallery filter states: make selected category, expand, and collapse distinct. */
body.page-gallery #gallery {
  --gallery-self-rgb: 194, 113, 139;
  --gallery-life-rgb: 176, 137, 71;
  --gallery-moments-rgb: 83, 145, 184;
  --gallery-expand-rgb: 89, 145, 190;
  --gallery-collapse-rgb: 192, 107, 138;
}
body.page-gallery #gallery .gallery-tab[data-category="self"] {
  --gallery-category-rgb: var(--gallery-self-rgb);
}
body.page-gallery #gallery .gallery-tab[data-category="life"] {
  --gallery-category-rgb: var(--gallery-life-rgb);
}
body.page-gallery #gallery .gallery-tab[data-category="moments"] {
  --gallery-category-rgb: var(--gallery-moments-rgb);
}
body.page-gallery #gallery .gallery-control-group[data-category="self"] {
  --gallery-category-rgb: var(--gallery-self-rgb);
}
body.page-gallery #gallery .gallery-control-group[data-category="life"] {
  --gallery-category-rgb: var(--gallery-life-rgb);
}
body.page-gallery #gallery .gallery-control-group[data-category="moments"] {
  --gallery-category-rgb: var(--gallery-moments-rgb);
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active {
  color: rgb(var(--gallery-category-rgb)) !important;
  border-color: rgba(var(--gallery-category-rgb), 0.36) !important;
  background: radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.92), transparent 34%),
    linear-gradient(135deg, rgba(var(--gallery-category-rgb), 0.18), rgba(255, 255, 255, 0.56) 48%, rgba(235, 247, 255, 0.42)) !important;
  box-shadow: 0 16px 34px rgba(var(--gallery-category-rgb), 0.16),
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 0 0 1px rgba(var(--gallery-category-rgb), 0.12) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active .gallery-tab-icon {
  color: rgb(var(--gallery-category-rgb)) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(var(--gallery-category-rgb), 0.2)) !important;
  box-shadow: 0 8px 18px rgba(var(--gallery-category-rgb), 0.18),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active .gallery-tab-title {
  color: rgb(var(--gallery-category-rgb)) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active .gallery-tab-subtitle {
  color: rgba(65, 85, 108, 0.72) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group {
  opacity: 0.72 !important;
  border: 1px solid transparent !important;
  transition: opacity 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group.active {
  opacity: 1 !important;
  border-color: rgba(var(--gallery-category-rgb), 0.24) !important;
  background: linear-gradient(135deg, rgba(var(--gallery-category-rgb), 0.12), rgba(255, 255, 255, 0.54)) !important;
  box-shadow: 0 10px 24px rgba(var(--gallery-category-rgb), 0.12),
    0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group.active .gallery-control-label {
  color: rgb(var(--gallery-category-rgb)) !important;
  font-weight: 880 !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn,
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn {
  color: rgba(76, 93, 113, 0.74) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn {
  --gallery-action-rgb: var(--gallery-expand-rgb);
}
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn {
  --gallery-action-rgb: var(--gallery-collapse-rgb);
}
[data-theme="light"] body.page-gallery #gallery .gallery-control-group.is-collapsed.active .gallery-expand-btn,
[data-theme="light"] body.page-gallery #gallery .gallery-control-group:not(.is-collapsed).active .gallery-collapse-btn {
  color: rgb(var(--gallery-action-rgb)) !important;
  border-color: rgba(var(--gallery-action-rgb), 0.34) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(var(--gallery-action-rgb), 0.16)) !important;
  box-shadow: 0 8px 18px rgba(var(--gallery-action-rgb), 0.16),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab.active,
[data-theme="dark"] body.page-gallery #gallery .gallery-tab.active {
  color: rgb(var(--gallery-category-rgb)) !important;
  border-color: rgba(var(--gallery-category-rgb), 0.34) !important;
  background: radial-gradient(circle at 14% 10%, rgba(var(--gallery-category-rgb), 0.24), transparent 34%),
    radial-gradient(circle at 92% 22%, rgba(116, 190, 236, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(var(--gallery-category-rgb), 0.16),
    0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-tab.active .gallery-tab-title,
[data-theme="dark"] body.page-gallery #gallery .gallery-tab.active .gallery-tab-title {
  color: rgb(var(--gallery-category-rgb)) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-control-group,
[data-theme="dark"] body.page-gallery #gallery .gallery-control-group {
  opacity: 0.7 !important;
  border: 1px solid transparent !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-control-group.active,
[data-theme="dark"] body.page-gallery #gallery .gallery-control-group.active {
  opacity: 1 !important;
  border-color: rgba(var(--gallery-category-rgb), 0.24) !important;
  background: linear-gradient(135deg, rgba(var(--gallery-category-rgb), 0.16), rgba(255, 255, 255, 0.055)) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(var(--gallery-category-rgb), 0.12) !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-control-group.is-collapsed.active .gallery-expand-btn,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-control-group:not(.is-collapsed).active .gallery-collapse-btn,
[data-theme="dark"] body.page-gallery #gallery .gallery-control-group.is-collapsed.active .gallery-expand-btn,
[data-theme="dark"] body.page-gallery #gallery .gallery-control-group:not(.is-collapsed).active .gallery-collapse-btn {
  color: rgba(255, 246, 250, 0.94) !important;
  border-color: rgba(var(--gallery-action-rgb), 0.42) !important;
  background: linear-gradient(135deg, rgba(var(--gallery-action-rgb), 0.28), rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 0 18px rgba(var(--gallery-action-rgb), 0.18),
    0 1px 0 rgba(255, 255, 255, 0.16) inset !important;
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-expand-btn,
[data-theme="dark"] body.page-gallery #gallery .gallery-expand-btn {
  --gallery-action-rgb: var(--gallery-expand-rgb);
}
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-collapse-btn,
[data-theme="dark"] body.page-gallery #gallery .gallery-collapse-btn {
  --gallery-action-rgb: var(--gallery-collapse-rgb);
}
/* Gallery collapsed months: soften the archived card edge in light theme. */
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.collapsed {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-heading {
  overflow: hidden !important;
  border-radius: 28px !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  background: radial-gradient(ellipse at 18% 18%, rgba(255, 225, 236, 0.42), transparent 34%),
    radial-gradient(ellipse at 88% 20%, rgba(213, 235, 248, 0.52), transparent 42%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.78), rgba(247, 252, 255, 0.46) 68%, rgba(255, 255, 255, 0.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset -34px 0 60px rgba(255, 255, 255, 0.34),
    0 24px 68px rgba(82, 102, 126, 0.1) !important;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), rgba(0, 0, 0, 0.68) calc(100% - 12px), transparent 100%) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-heading::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 32%, rgba(207, 232, 247, 0.18)),
    radial-gradient(ellipse at 100% 50%, rgba(255, 255, 255, 0.7), transparent 46%) !important;
  pointer-events: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-heading::after {
  left: 28px !important;
  right: 58px !important;
  bottom: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(90deg, transparent, rgba(176, 111, 130, 0.18), rgba(93, 145, 174, 0.12), transparent) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-heading > * {
  position: relative !important;
  z-index: 2 !important;
}
/* FINAL gallery overlap guard: collapsed months must never expose hidden photos. */
body.page-gallery #gallery .gallery-month-group.collapsed,
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.collapsed,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-group.collapsed,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-group.collapsed {
  overflow: hidden !important;
}
body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-content,
[data-theme="light"] body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-content,
html:not([data-theme="light"]) body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-content,
[data-theme="dark"] body.page-gallery #gallery .gallery-month-group.collapsed .gallery-month-content {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}
/* FINAL gallery light polish: remove heavy dark tab shadows and tint active descriptions. */
[data-theme="light"] body.page-gallery #gallery .gallery-tabs {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-tab,
[data-theme="light"] body.page-gallery #gallery .gallery-tab.active,
[data-theme="light"] body.page-gallery #gallery .gallery-tab:hover,
[data-theme="light"] body.page-gallery #gallery .gallery-tab:focus-visible {
  box-shadow: none !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc[data-category="life"] {
  color: #aa7a32 !important;
  -webkit-text-fill-color: #aa7a32 !important;
  border-color: rgba(184, 154, 88, 0.3) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-category-desc[data-category="moments"] {
  color: var(--gallery-sky-ink) !important;
  -webkit-text-fill-color: var(--gallery-sky-ink) !important;
  border-color: rgba(127, 174, 202, 0.32) !important;
}
/* FINAL gallery lightbox controls: keep tools fixed from first paint. */
body.page-gallery .lightbox .camera-particle-trigger,
body.page-gallery .lightbox .lightbox-close,
body.page-gallery .lightbox .lightbox-prev,
body.page-gallery .lightbox .lightbox-next {
  position: fixed !important;
  z-index: 2105 !important;
}
body.page-gallery .lightbox .camera-particle-trigger {
  top: clamp(30px, 6vh, 72px) !important;
  left: clamp(28px, 4vw, 68px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
body.page-gallery .lightbox .lightbox-close {
  top: clamp(30px, 6vh, 72px) !important;
  right: clamp(28px, 4vw, 68px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}
body.page-gallery .lightbox .lightbox-prev {
  top: 50% !important;
  left: clamp(28px, 4vw, 68px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.page-gallery .lightbox .lightbox-next {
  top: 50% !important;
  right: clamp(28px, 4vw, 68px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.page-gallery .lightbox .lightbox-prev:hover,
body.page-gallery .lightbox .lightbox-next:hover {
  transform: translateY(-50%) scale(1.04) !important;
}
/* FINAL gallery lightbox viewport controls: these buttons are hoisted to #lightbox in JS. */
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #cameraParticleButton,
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #closeLightbox,
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #prevLightbox,
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #nextLightbox {
  position: fixed !important;
  z-index: 2140 !important;
  margin: 0 !important;
  transition: color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #cameraParticleButton {
  top: clamp(32px, 6vh, 72px) !important;
  left: clamp(28px, 4vw, 68px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #closeLightbox {
  top: clamp(32px, 6vh, 72px) !important;
  right: clamp(28px, 4vw, 68px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #prevLightbox {
  top: 50vh !important;
  left: clamp(28px, 4vw, 68px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #nextLightbox {
  top: 50vh !important;
  right: clamp(28px, 4vw, 68px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #prevLightbox:hover,
body.page-gallery:not(.particle-fullscreen-active) .lightbox > #nextLightbox:hover {
  transform: translateY(-50%) scale(1.04) !important;
}
/* FINAL gallery light caption: keep date chips readable on dark photos in the light theme. */
[data-theme="light"] body.page-gallery #gallery .gallery-caption {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(19, 31, 46, 0.18) 34%, rgba(12, 20, 32, 0.46) 100%),
    linear-gradient(90deg, rgba(255, 223, 235, 0.16), rgba(202, 229, 246, 0.18)) !important;
  backdrop-filter: blur(5px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.04) !important;
}
[data-theme="light"] body.page-gallery #gallery .gallery-caption p {
  color: #163554 !important;
  -webkit-text-fill-color: #163554 !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 24px rgba(8, 24, 42, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
}
/* FINAL gallery self modules: Self Portrait and Be Myself Orbit are parallel, both open by default. */
body.page-gallery #gallery .self-orbit-carousel {
  max-width: var(--gallery-album-width) !important;
  margin-top: clamp(30px, 4.6vw, 62px) !important;
  margin-bottom: clamp(30px, 4.4vw, 58px) !important;
}
/* FINAL light Be Myself Orbit: transparent glass, no heavy black plate. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: radial-gradient(ellipse at 20% 12%, rgba(255, 213, 228, 0.3), transparent 38%),
    radial-gradient(ellipse at 86% 18%, rgba(192, 228, 248, 0.34), transparent 42%),
    radial-gradient(ellipse at 50% 84%, rgba(255, 236, 204, 0.22), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(245, 251, 255, 0.16) 58%, rgba(255, 255, 255, 0.24)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 0 0 1px rgba(143, 178, 205, 0.08) inset,
    0 22px 60px rgba(116, 151, 184, 0.12) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel::before,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel::before {
  background: radial-gradient(ellipse at 48% 58%, rgba(255, 255, 255, 0.38), transparent 52%),
    radial-gradient(circle at 22% 28%, rgba(255, 197, 218, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 22%, rgba(143, 199, 234, 0.14) 0 1px, transparent 2px) !important;
  opacity: 0.72 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel::after,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel::after {
  background: linear-gradient(90deg, transparent, rgba(116, 160, 190, 0.16), rgba(214, 156, 174, 0.14), transparent) !important;
  opacity: 0.42 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-shell::before,
body[data-theme="light"].page-gallery #gallery .self-orbit-shell::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.62), transparent 62%),
    radial-gradient(ellipse at 50% 56%, rgba(162, 205, 230, 0.18), transparent 70%) !important;
  filter: blur(20px) !important;
  opacity: 0.64 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card:hover,
body[data-theme="light"].page-gallery #gallery .self-orbit-card:hover {
  box-shadow: 0 20px 50px rgba(82, 119, 152, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}
/* FINAL light Be Myself Orbit: clearer photo texture and slightly larger controls. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card.active::before,
body[data-theme="light"].page-gallery #gallery .self-orbit-card.active::before {
  opacity: 0.055 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-nav,
body[data-theme="light"].page-gallery #gallery .self-orbit-nav {
  width: 54px !important;
  height: 54px !important;
  font-size: 18px !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 12px 30px rgba(91, 128, 158, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode {
  width: min(350px, 100%) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode {
  width: min(340px, 100%) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode {
  width: min(380px, 100%) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode button,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode button,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode button {
  min-height: 42px !important;
  padding: 0 18px !important;
  gap: 9px !important;
  font-size: 12.5px !important;
  letter-spacing: 0.065em !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode button i,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode button i,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode button i,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode button i,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode button i,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode button i {
  font-size: 14px !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-meta > span,
body[data-theme="light"].page-gallery #gallery .self-orbit-meta > span {
  padding: 10px 16px !important;
  font-size: 13px !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-progress,
body[data-theme="light"].page-gallery #gallery .self-orbit-progress {
  height: 3px !important;
}
/* FINAL light Be Myself Orbit: editorial photo finish. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-shell,
body[data-theme="light"].page-gallery #gallery .self-orbit-shell {
  min-height: clamp(390px, 38vw, 510px) !important;
  margin-top: clamp(18px, 2.4vw, 34px) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-card {
  top: 49% !important;
  outline: 1px solid rgba(255, 255, 255, 0.42) !important;
  outline-offset: -1px !important;
  box-shadow: 0 10px 26px rgba(82, 117, 148, calc(0.09 - var(--abs) * 0.012)),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card {
  top: 49% !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card img,
body[data-theme="light"].page-gallery #gallery .self-orbit-card img {
  backface-visibility: hidden !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card::before,
body[data-theme="light"].page-gallery #gallery .self-orbit-card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%, rgba(18, 34, 52, 0.028)),
    linear-gradient(112deg, transparent 24%, rgba(255, 255, 255, 0.07), transparent 55%) !important;
  opacity: calc(0.045 + var(--abs) * 0.018) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card::after,
body[data-theme="light"].page-gallery #gallery .self-orbit-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card-shine,
body[data-theme="light"].page-gallery #gallery .self-orbit-card-shine {
  opacity: 0.1 !important;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.26) 50%, transparent 60% 100%) !important;
}
/* FINAL light Be Myself Orbit: softer distance fade and smoother manual glides. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card.active,
body[data-theme="light"].page-gallery #gallery .self-orbit-card.active {
  opacity: 1 !important;
}
/* FINAL light Be Myself Orbit: crop out gray headroom and move glass to the edges. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-card {
  border-color: rgba(255, 255, 255, calc(0.88 - var(--abs) * 0.11)) !important;
  opacity: clamp(0.76, calc(1.02 - var(--abs) * 0.12), 1) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card img,
body[data-theme="light"].page-gallery #gallery .self-orbit-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card::after,
body[data-theme="light"].page-gallery #gallery .self-orbit-card::after {
  opacity: 1 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card.active,
body[data-theme="light"].page-gallery #gallery .self-orbit-card.active {
  box-shadow: 0 18px 42px rgba(73, 111, 143, 0.12),
    0 7px 18px rgba(204, 160, 176, 0.05),
    0 0 24px rgba(255, 255, 255, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
}
/* FINAL light Be Myself Orbit: clean transparent photo finish, no gray veil. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-card {
  background: transparent !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card img,
body[data-theme="light"].page-gallery #gallery .self-orbit-card img {
  object-position: 50% 64% !important;
  filter: brightness(1.055) contrast(1.095) saturate(1.08) !important;
  transform: translateZ(0) scale(1.105) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card.active img,
body[data-theme="light"].page-gallery #gallery .self-orbit-card.active img {
  object-position: 50% 66% !important;
  filter: brightness(1.06) contrast(1.1) saturate(1.085) !important;
  transform: translateZ(0) scale(1.12) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card::after,
body[data-theme="light"].page-gallery #gallery .self-orbit-card::after {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 0 1px rgba(133, 180, 212, 0.08) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card.active::after,
body[data-theme="light"].page-gallery #gallery .self-orbit-card.active::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 0 1px rgba(133, 180, 212, 0.12) !important;
}
/* FINAL light Be Myself Orbit controls: porcelain blue glass system. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-waveform,
body[data-theme="light"].page-gallery #gallery .self-orbit-waveform {
  opacity: 0.9 !important;
  filter: none !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-waveform::before,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-waveform::after,
body[data-theme="light"].page-gallery #gallery .self-orbit-waveform::before,
body[data-theme="light"].page-gallery #gallery .self-orbit-waveform::after {
  background: linear-gradient(90deg, transparent, rgba(69, 117, 155, 0.18), transparent) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-waveform span,
body[data-theme="light"].page-gallery #gallery .self-orbit-waveform span {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(94, 151, 192, 0.62) 48%, rgba(183, 209, 224, 0.56)) !important;
  box-shadow: 0 0 calc(10px + var(--sync, 0) * 12px) rgba(86, 145, 188, calc(0.07 + var(--wave) * 0.12 + var(--sync, 0) * 0.1)),
    0 0 calc(var(--orbit-cohesion, 0) * 18px) rgba(224, 191, 142, calc(var(--orbit-cohesion, 0) * 0.12)),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode {
  padding: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode button,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode button,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode button {
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode button:hover,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode button:hover,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode button:hover,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode button:hover,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode button:hover,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode button:hover {
  color: #214f72 !important;
  background: rgba(255, 255, 255, 0.44) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-meta > span,
body[data-theme="light"].page-gallery #gallery .self-orbit-meta > span {
  color: #244a67 !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(225, 240, 248, 0.36)),
    rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0 12px 28px rgba(73, 112, 145, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.94) inset !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-progress span,
body[data-theme="light"].page-gallery #gallery .self-orbit-progress span {
  background: linear-gradient(90deg, #77a9c8, #d7c398, #7ab7d5) !important;
  box-shadow: 0 0 14px rgba(103, 161, 199, 0.22) !important;
}
/* FINAL light Be Myself Orbit: photo-first transparent frames, like the timeline gallery. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-card,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card {
  border-color: transparent !important;
  outline: 0 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card img,
body[data-theme="light"].page-gallery #gallery .self-orbit-card img {
  border-radius: inherit !important;
  box-shadow: none !important;
}
/* FINAL light Be Myself Orbit: reuse the Light & Shutter photo-card finish. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-card,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(248, 252, 255, 0.28)),
    rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 14px 30px rgba(63, 86, 116, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
  opacity: clamp(0.78, calc(1.02 - var(--abs) * 0.12), 1) !important;
  filter: none !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card.active,
body[data-theme="light"].page-gallery #gallery .self-orbit-card.active,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card.active,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card.active {
  border-color: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 14px 30px rgba(63, 86, 116, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card img,
body[data-theme="light"].page-gallery #gallery .self-orbit-card img,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card.active img,
body[data-theme="light"].page-gallery #gallery .self-orbit-card.active img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) scale(1.012) !important;
  filter: brightness(1.055)
    contrast(1.035)
    saturate(1.06) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card::before,
body[data-theme="light"].page-gallery #gallery .self-orbit-card::before,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card::before,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  background: radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.62), transparent 30%),
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.3) 42%, transparent 64%) !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card::after,
body[data-theme="light"].page-gallery #gallery .self-orbit-card::after,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card.active::after,
body[data-theme="light"].page-gallery #gallery .self-orbit-card.active::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%, rgba(127, 182, 214, 0.08)),
    radial-gradient(ellipse at center, transparent 54%, rgba(255, 255, 255, 0.34) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    inset 0 18px 28px rgba(255, 255, 255, 0.08) !important;
  opacity: 0.64 !important;
  pointer-events: none !important;
}
/* FINAL light Be Myself Orbit: keep Classic auto-play liquid, glide only on manual jumps. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-card,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card {
  transition: opacity 0.22s ease,
    filter 0.22s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-gliding .self-orbit-card,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-gliding .self-orbit-card {
  transition: transform 0.64s cubic-bezier(0.18, 0.88, 0.18, 1),
    opacity 0.48s cubic-bezier(0.18, 0.88, 0.18, 1),
    filter 0.48s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease !important;
}
/* FINAL light Be Myself Orbit: Sound Sync keeps the centered photo fully resolved. */
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card.active,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card.active {
  opacity: 1 !important;
  filter: none !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card.active img,
body[data-theme="light"].page-gallery #gallery .self-orbit-carousel.is-sound-sync .self-orbit-card.active img {
  filter: brightness(1.055)
    contrast(1.035)
    saturate(1.06) !important;
}
/* FINAL Be Myself Orbit control deck: one readable hierarchy for playback, rhythm, sound and order. */
body.page-gallery #gallery .self-orbit-meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: none !important;
  color: rgba(244, 248, 252, 0.82) !important;
  font-family: "Montserrat", "Avenir Next", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
body.page-gallery #gallery .self-orbit-status {
  align-items: center;
}
body.page-gallery #gallery .self-orbit-counter {
  border-radius: 999px;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1;
  text-align: center;
}
body.page-gallery #gallery .self-orbit-control-deck {
  display: grid;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(12, 23, 37, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
}
body.page-gallery #gallery .self-orbit-control-group {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
body.page-gallery #gallery .self-orbit-sync-mode,
body.page-gallery #gallery .self-orbit-audio-mode,
body.page-gallery #gallery .self-orbit-play-mode {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  padding: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 11px !important;
  background: rgba(0, 0, 0, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-gallery #gallery .self-orbit-sync-mode button,
body.page-gallery #gallery .self-orbit-audio-mode button,
body.page-gallery #gallery .self-orbit-play-mode button {
  min-height: 37px !important;
  padding: 0 8px !important;
  gap: 7px !important;
  border-radius: 8px !important;
  font-family: "Montserrat", "Avenir Next", sans-serif !important;
  letter-spacing: 0.01em !important;
}
body.page-gallery #gallery .self-orbit-playback-controls {
  display: grid;
}
body.page-gallery #gallery .self-orbit-autoplay-toggle,
body.page-gallery #gallery .self-orbit-speed-control {
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background: rgba(0, 0, 0, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.page-gallery #gallery .self-orbit-autoplay-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px !important;
  font-family: "Montserrat", "Avenir Next", sans-serif;
  cursor: pointer;
}
body.page-gallery #gallery .speed-value {
  min-width: 0 !important;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-meta,
body[data-theme="light"].page-gallery #gallery .self-orbit-meta {
  color: #28475f !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-counter,
body[data-theme="light"].page-gallery #gallery .self-orbit-counter {
  border-color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 8px 20px rgba(73, 112, 145, 0.08);
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-control-deck,
body[data-theme="light"].page-gallery #gallery .self-orbit-control-deck {
  border-color: rgba(255, 255, 255, 0.76) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(225, 240, 249, 0.26)),
    rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 18px 42px rgba(76, 113, 144, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-control-group,
body[data-theme="light"].page-gallery #gallery .self-orbit-control-group {
  border-color: rgba(127, 166, 194, 0.11) !important;
  background: rgba(255, 255, 255, 0.38) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-playback-group,
body[data-theme="light"].page-gallery #gallery .self-orbit-playback-group {
  background: radial-gradient(circle at 8% 0%, rgba(244, 205, 161, 0.2), transparent 42%),
    rgba(255, 255, 255, 0.42) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode {
  border-color: rgba(118, 156, 184, 0.12) !important;
  background: rgba(224, 239, 248, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-autoplay-toggle,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-speed-control,
body[data-theme="light"].page-gallery #gallery .self-orbit-autoplay-toggle,
body[data-theme="light"].page-gallery #gallery .self-orbit-speed-control {
  border-color: rgba(118, 156, 184, 0.12) !important;
  background: rgba(224, 239, 248, 0.38) !important;
  color: #244b68 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-autoplay-toggle i,
body[data-theme="light"].page-gallery #gallery .self-orbit-autoplay-toggle i {
  color: #b78655 !important;
}
@media (max-width: 1180px) {
  body.page-gallery #gallery .self-orbit-control-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  body.page-gallery #gallery .self-orbit-status {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.page-gallery #gallery .self-orbit-counter {
    justify-self: start;
  }
  body.page-gallery #gallery .self-orbit-control-deck {
    grid-template-columns: 1fr;
    padding: 8px;
    border-radius: 17px;
  }
  body.page-gallery #gallery .self-orbit-control-group {
    padding: 10px;
  }
  body.page-gallery #gallery .self-orbit-playback-controls {
    grid-template-columns: minmax(92px, 0.8fr) minmax(160px, 1.2fr);
  }
}
@media (max-width: 390px) {
  body.page-gallery #gallery .self-orbit-playback-controls {
    grid-template-columns: 1fr;
  }
}
/* FINAL Be Myself Orbit controls v2: order above, spacious three-part deck, progress below. */
body.page-gallery #gallery .self-orbit-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 84px);
}
body.page-gallery #gallery .self-orbit-header .self-orbit-copy {
  flex: 1 1 auto;
}
body.page-gallery #gallery .self-orbit-order-control {
  flex: 0 0 auto;
  width: min(286px, 31%);
}
body.page-gallery #gallery .self-orbit-order-control .self-orbit-play-mode {
  width: 100% !important;
  padding: 4px !important;
  border-radius: 13px !important;
  background: rgba(10, 22, 35, 0.11) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.page-gallery #gallery .self-orbit-meta {
  gap: clamp(22px, 2.6vw, 34px) !important;
  margin-top: clamp(14px, 2vw, 24px) !important;
}
body.page-gallery #gallery .self-orbit-control-deck {
  grid-template-columns: minmax(280px, 1.08fr) minmax(245px, 0.96fr) minmax(245px, 0.96fr) !important;
  border-radius: 24px !important;
}
body.page-gallery #gallery .self-orbit-control-group {
  display: flex;
  flex-direction: column;
  border-radius: 17px !important;
}
body.page-gallery #gallery .self-orbit-sync-mode,
body.page-gallery #gallery .self-orbit-audio-mode {
  padding: 4px !important;
  border-radius: 13px !important;
}
body.page-gallery #gallery .self-orbit-sync-mode button,
body.page-gallery #gallery .self-orbit-audio-mode button,
body.page-gallery #gallery .self-orbit-order-control .self-orbit-play-mode button {
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}
body.page-gallery #gallery .self-orbit-playback-controls {
  grid-template-columns: minmax(112px, 0.82fr) minmax(176px, 1.18fr) !important;
  gap: 8px !important;
}
body.page-gallery #gallery .self-orbit-autoplay-toggle,
body.page-gallery #gallery .self-orbit-speed-control {
  min-height: 52px !important;
  border-radius: 13px !important;
}
body.page-gallery #gallery .self-orbit-autoplay-toggle {
  letter-spacing: 0.01em;
}
body.page-gallery #gallery .self-orbit-speed-control {
  display: grid !important;
  grid-template-columns: 34px minmax(72px, 1fr) 34px !important;
  align-items: center;
  gap: 5px !important;
  padding: 5px !important;
  overflow: hidden;
  transition: opacity 180ms ease,
    transform 180ms ease;
}
body.page-gallery #gallery .self-orbit-speed-control > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  cursor: pointer;
}
body.page-gallery #gallery .speed-readout {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}
body.page-gallery #gallery .speed-label {
  font-family: "Montserrat", "Avenir Next", sans-serif !important;
}
body.page-gallery #gallery .speed-value {
  font-family: "Montserrat", "Avenir Next", sans-serif !important;
}
body.page-gallery #gallery .is-sound-sync .self-orbit-playback-controls {
  grid-template-columns: 1fr !important;
}
body.page-gallery #gallery .is-sound-sync .self-orbit-speed-control {
  display: none !important;
}
body.page-gallery #gallery .self-orbit-status {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
body.page-gallery #gallery .self-orbit-progress-copy {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.page-gallery #gallery .self-orbit-counter {
  min-width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.74) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-gallery #gallery .self-orbit-progress {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
}
body.page-gallery #gallery .self-orbit-progress span {
  border-radius: inherit;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-order-control .self-orbit-play-mode,
body[data-theme="light"].page-gallery #gallery .self-orbit-order-control .self-orbit-play-mode {
  border-color: rgba(118, 156, 184, 0.14) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 12px 28px rgba(74, 113, 144, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-speed-control > button,
body[data-theme="light"].page-gallery #gallery .self-orbit-speed-control > button {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #4b6b82 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-counter,
body[data-theme="light"].page-gallery #gallery .self-orbit-counter {
  color: #315874 !important;
}
@media (max-width: 1100px) {
  body.page-gallery #gallery .self-orbit-control-deck {
    grid-template-columns: 1fr 1fr !important;
  }
  body.page-gallery #gallery .self-orbit-playback-group {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  body.page-gallery #gallery .self-orbit-header {
    flex-direction: column;
    gap: 22px;
  }
  body.page-gallery #gallery .self-orbit-order-control {
    width: min(100%, 330px);
    margin-top: 0;
  }
  body.page-gallery #gallery .self-orbit-control-deck {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.page-gallery #gallery .self-orbit-playback-group {
    grid-column: auto;
  }
}
@media (max-width: 430px) {
  body.page-gallery #gallery .self-orbit-playback-controls {
    grid-template-columns: 1fr !important;
  }
}
/* FINAL Be Myself Orbit controls v3: quiet chrome, stronger state, restored full-width progress. */
body.page-gallery #gallery .self-orbit-order-control {
  margin-top: 0 !important;
}
body.page-gallery #gallery .self-orbit-order-control .self-orbit-play-mode {
  margin-top: 0 !important;
}
body.page-gallery #gallery .self-orbit-control-deck {
  gap: clamp(18px, 2vw, 30px) !important;
  padding: clamp(16px, 1.8vw, 22px) !important;
}
body.page-gallery #gallery .self-orbit-control-group {
  min-height: auto !important;
  padding: 10px !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.025) !important;
}
body.page-gallery #gallery .self-orbit-playback-group {
  background: rgba(255, 255, 255, 0.025) !important;
}
body.page-gallery #gallery .self-orbit-play-mode,
body.page-gallery #gallery .self-orbit-sync-mode,
body.page-gallery #gallery .self-orbit-audio-mode,
body.page-gallery #gallery .self-orbit-autoplay-toggle,
body.page-gallery #gallery .self-orbit-speed-control {
  font-family: "Montserrat", "Avenir Next", sans-serif !important;
}
body.page-gallery #gallery .self-orbit-play-mode button,
body.page-gallery #gallery .self-orbit-sync-mode button,
body.page-gallery #gallery .self-orbit-audio-mode button {
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
body.page-gallery #gallery .self-orbit-play-mode button.active,
body.page-gallery #gallery .self-orbit-sync-mode button.active,
body.page-gallery #gallery .self-orbit-audio-mode button.active {
  color: rgba(255, 255, 255, 0.98) !important;
  background: rgba(255, 255, 255, 0.17) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
body.page-gallery #gallery .self-orbit-play-mode button.active i,
body.page-gallery #gallery .self-orbit-sync-mode button.active i,
body.page-gallery #gallery .self-orbit-audio-mode button.active i {
  color: inherit !important;
}
body.page-gallery #gallery .self-orbit-autoplay-toggle {
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(0, 0, 0, 0.1) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
body.page-gallery #gallery .self-orbit-autoplay-toggle i {
  color: inherit !important;
}
body.page-gallery #gallery .speed-label {
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
body.page-gallery #gallery .speed-value {
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
body.page-gallery #gallery .self-orbit-status {
  gap: 9px !important;
  padding: 0 clamp(2px, 0.6vw, 8px) 5px !important;
}
body.page-gallery #gallery .self-orbit-progress-copy {
  justify-content: flex-end !important;
  min-height: 18px;
}
body.page-gallery #gallery .self-orbit-progress {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  min-height: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.page-gallery #gallery .self-orbit-progress span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform-origin: left center !important;
  background: linear-gradient(90deg, #79aaca, #e1c89b 58%, #78b8d7) !important;
  box-shadow: 0 0 12px rgba(103, 161, 199, 0.24) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-control-group,
body[data-theme="light"].page-gallery #gallery .self-orbit-control-group,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-playback-group,
body[data-theme="light"].page-gallery #gallery .self-orbit-playback-group {
  background: rgba(255, 255, 255, 0.3) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode button,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode button,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode button,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode button {
  color: #688196 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-play-mode button.active,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-sync-mode button.active,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-audio-mode button.active,
body[data-theme="light"].page-gallery #gallery .self-orbit-play-mode button.active,
body[data-theme="light"].page-gallery #gallery .self-orbit-sync-mode button.active,
body[data-theme="light"].page-gallery #gallery .self-orbit-audio-mode button.active {
  color: #153b58 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 9px 21px rgba(70, 110, 143, 0.15),
    inset 0 0 0 1px rgba(83, 134, 171, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-autoplay-toggle,
body[data-theme="light"].page-gallery #gallery .self-orbit-autoplay-toggle {
  color: #294e69 !important;
  background: rgba(224, 239, 248, 0.38) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .speed-label,
body[data-theme="light"].page-gallery #gallery .speed-label {
  color: #153b58 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .speed-value,
body[data-theme="light"].page-gallery #gallery .speed-value {
  color: #153b58 !important;
}
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-progress,
body[data-theme="light"].page-gallery #gallery .self-orbit-progress {
  border-color: rgba(93, 139, 172, 0.15) !important;
  background: rgba(104, 151, 184, 0.13) !important;
}
/* FINAL quotes refinement: larger centered glass card with quiet controls. */
body.page-quotes #life .quote-meta-row {
  gap: 0 !important;
}
/* Final desktop map layout lock: keep the two visible map components balanced. */
/* True final audio lock: this file contains later repeated theme blocks. */
/* 2026-06-19 final audio gallery card and mini-player lock */
body.page-audio .audio-card.is-current {
  cursor: pointer !important;
}
body.page-audio .audio-card-header {
  position: absolute !important;
  top: 26px !important;
  right: 28px !important;
  z-index: 4;
  padding: 0 !important;
}
body.page-audio .audio-card-body {
  display: grid !important;
  padding: 0 !important;
  column-gap: 20px;
}
body.page-audio .audio-title {
  grid-area: title;
  max-width: calc(100% - 104px);
  margin: 0 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}
body.page-audio .audio-card-meta {
  font-size: 14px;
  line-height: 1.35;
}
body.page-audio .audio-card-meta div {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
body.page-audio .audio-card-meta div:first-child::before {
  color: rgba(125, 175, 232, 0.94);
  font-weight: 900;
}
body.page-audio .audio-tags {
  align-self: end;
  display: flex;
  padding-right: 0 !important;
}
body.page-audio .audio-tag {
  color: #153d68 !important;
  border: 1px solid rgba(113, 174, 228, 0.38);
  background: rgba(221, 241, 255, 0.92) !important;
}
body.page-audio .audio-play-btn {
  grid-area: play;
  align-self: end;
  justify-self: end;
}
body.page-audio .audio-modal-header {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
  text-align: left;
}
body.page-audio .audio-modal-header h3 {
  padding: 0 96px 0 0 !important;
  margin: 0 !important;
  line-height: 1.22 !important;
  text-align: left !important;
}
body.page-audio .audio-modal-header #modalSubtitle {
  margin: 0;
  font-weight: 900;
  line-height: 1.45;
}
body.page-audio .audio-modal-info .info-label {
  text-align: left;
}
body.page-audio .audio-modal-info #modalDescription {
  max-width: none;
  line-height: 1.78 !important;
}
body.page-audio .audio-mini-player {
  max-width: min(520px, calc(100vw - 36px));
  padding: 7px 9px;
}
body.page-audio .audio-mini-title,
body.page-audio .audio-mini-caption {
  max-width: min(320px, 46vw);
}
body.page-audio .audio-mini-title {
  font-size: 15px;
  line-height: 1.25;
}
body.page-audio .audio-mini-caption {
  font-size: 12px;
  line-height: 1.35;
}
[data-theme="light"] body.page-audio .audio-card-meta {
  color: #283a56 !important;
  -webkit-text-fill-color: #283a56 !important;
}
[data-theme="light"] body.page-audio .audio-card-meta div:first-child::before,
[data-theme="light"] body.page-audio .audio-card-meta dt {
  color: #1f3f75 !important;
}
@media (max-width: 760px) {
  body.page-audio .audio-card {
    height: 250px !important;
    min-height: 250px !important;
    padding: 22px !important;
  }
  body.page-audio .audio-card-body {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    grid-template-areas: "title title"
      "artist artist"
      "summary summary"
      "meta meta"
      "tags play" !important;
    column-gap: 14px;
    row-gap: 6px;
  }
  body.page-audio .audio-title {
    max-width: calc(100% - 76px);
  }
  body.page-audio .audio-card-meta {
    max-width: 100% !important;
    gap: 5px 12px;
    font-size: 13px;
  }
  body.page-audio .audio-tags {
    max-height: 34px;
  }
  body.page-audio .audio-modal-header h3 {
    padding-right: 70px !important;
  }
  body.page-audio .audio-mini-player {
    max-width: calc(100vw - 24px);
    gap: 6px;
  }
  body.page-audio .audio-mini-title,
  body.page-audio .audio-mini-caption {
    max-width: 42vw;
  }
}
/* Long-page scroll toggle: mirrors the theme switch on the opposite side. */
.page-scroll-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(199, 210, 254, 0.35);
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.72);
  color: rgba(224, 231, 254, 0.94);
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(199, 210, 254, 0.12);
  transition: opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}
.page-scroll-toggle:hover {
  border-color: rgba(199, 210, 254, 0.64);
  background: rgba(51, 65, 85, 0.82);
  color: rgba(241, 245, 254, 1);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(199, 210, 254, 0.24);
}
.page-scroll-toggle:active {
  transform: translateY(0) scale(0.96);
}
.page-scroll-toggle:focus-visible {
  outline: 2px solid rgba(232, 185, 102, 0.6);
  outline-offset: 4px;
}
.page-scroll-toggle i {
  filter: drop-shadow(0 0 8px rgba(199, 210, 254, 0.64));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.page-scroll-toggle[data-scroll-target="top"] i {
  transform: translateY(-1px);
}
.page-scroll-toggle.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.9);
}
[data-theme="light"] .page-scroll-toggle {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), transparent 36%),
    rgba(255, 255, 255, 0.92) !important;
  color: var(--accent-blue-deep, #315f93) !important;
  box-shadow: 0 4px 20px rgba(53, 112, 172, 0.2),
    0 0 20px rgba(151, 198, 236, 0.22);
}
[data-theme="light"] .page-scroll-toggle:hover {
  border-color: rgba(145, 194, 236, 0.78) !important;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.96), transparent 38%),
    rgba(255, 255, 255, 0.98) !important;
  color: #18466f !important;
  box-shadow: 0 8px 28px rgba(53, 112, 172, 0.24),
    0 0 28px rgba(151, 198, 236, 0.3);
}
[data-theme="light"] .page-scroll-toggle i {
  filter: drop-shadow(0 0 7px rgba(116, 172, 218, 0.55));
}
@media (max-width: 768px) {
  .page-scroll-toggle {
    right: 16px;
    bottom: 104px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  body.page-audio .page-scroll-toggle {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }

  body.page-gallery .page-scroll-toggle {
    right: 18px;
    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  body.page-audio .audio-mini-player {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 62px;
    padding: 8px 10px !important;
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(9, 13, 24, 0.86) !important;
    color: rgba(255, 250, 242, 0.92) !important;
    cursor: default;
    touch-action: manipulation;
  }

  body.page-audio .audio-mini-player[data-drag-disabled="true"] {
    cursor: default;
  }

  body.page-audio .audio-mini-expand {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.page-audio .audio-mini-copy {
    min-width: 0;
  }

  body.page-audio .audio-mini-title,
  body.page-audio .audio-mini-caption {
    max-width: none !important;
    color: rgba(255, 250, 242, 0.86) !important;
  }

  body.page-audio .audio-mini-volume {
    display: none !important;
  }

  body.page-audio .audio-mini-control {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }
}
/* TRUE FINAL fans lightbox: transparent page overlay, gallery-like controls, single-line credit. */
body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-content,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-content,
body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-content,
body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame,
body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame,
body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-close {
  position: fixed !important;
  top: clamp(24px, 4.5vh, 54px) !important;
  right: clamp(28px, 4vw, 68px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 2140 !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #nextLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #nextLightbox {
  position: fixed !important;
  top: 50vh !important;
  z-index: 2140 !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption {
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption strong,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption strong,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption strong,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption strong {
  font-size: clamp(13px, 0.92vw, 16px) !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption br,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption br,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption br,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption br,
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption span,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption span,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption span,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption span {
  display: none !important;
}
@media (max-width: 760px) {
  body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
  body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
  body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
  body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-close {
    top: 14px !important;
    right: 14px !important;
  }
  body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
  body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption,
  body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
  body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption {
    max-width: calc(100vw - 44px) !important;
    padding-inline: 14px !important;
  }
}
/* TRUE FINAL fans lightbox theme split: blurred page mapping, not a flat transparent layer. */
body.page-fans:not(.particle-fullscreen-active) .lightbox.open,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active,
body.page-light:not(.particle-fullscreen-active) .lightbox.open,
body.page-light:not(.particle-fullscreen-active) .lightbox.active {
  background: radial-gradient(ellipse at 48% 44%, rgba(255, 255, 255, 0.08), transparent 34%),
    radial-gradient(ellipse at 50% 100%, rgba(72, 96, 110, 0.22), transparent 44%),
    rgba(7, 11, 16, 0.66) !important;
  backdrop-filter: blur(22px) saturate(0.72) brightness(0.72) !important;
  -webkit-backdrop-filter: blur(22px) saturate(0.72) brightness(0.72) !important;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.38),
    inset 0 0 260px rgba(0, 0, 0, 0.28) !important;
}
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.open,
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.active,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.open,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.active,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.open,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.active,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.open,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.active {
  background: radial-gradient(ellipse at 18% 24%, rgba(255, 205, 222, 0.22), transparent 48%),
    radial-gradient(ellipse at 84% 26%, rgba(163, 220, 246, 0.28), transparent 48%),
    radial-gradient(ellipse at 50% 92%, rgba(255, 255, 255, 0.42), transparent 46%),
    rgba(245, 250, 254, 0.46) !important;
  backdrop-filter: blur(24px) saturate(1.12) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.12) brightness(1.02) !important;
  box-shadow: inset 0 0 110px rgba(255, 255, 255, 0.34),
    inset 0 0 240px rgba(145, 197, 230, 0.14) !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxImage,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxImage {
  box-shadow: 0 34px 108px rgba(0, 0, 0, 0.42),
    0 0 80px rgba(150, 190, 216, 0.16) !important;
}
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxImage,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxImage,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxImage,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxImage {
  box-shadow: 0 30px 96px rgba(62, 105, 145, 0.2),
    0 0 76px rgba(255, 255, 255, 0.22) !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #nextLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #nextLightbox {
  border-color: rgba(231, 209, 162, 0.48) !important;
}
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
[data-theme="light"] body.page-fans:not(.particle-fullscreen-active) .lightbox.active #nextLightbox,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
[data-theme="light"] body.page-light:not(.particle-fullscreen-active) .lightbox.active #nextLightbox,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body[data-theme="light"].page-fans:not(.particle-fullscreen-active) .lightbox.active #nextLightbox,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body[data-theme="light"].page-light:not(.particle-fullscreen-active) .lightbox.active #nextLightbox {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(215, 239, 252, 0.52)) !important;
  color: #17345f !important;
  -webkit-text-fill-color: #17345f !important;
  box-shadow: 0 18px 38px rgba(43, 86, 130, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
/* Fans page final details: clearer light cards and readable fan lightbox. */
body.page-fans .fans-gallery-source,
body.page-light #fans .fans-gallery-source {
  justify-content: center;
  min-height: 46px;
  padding: 12px 14px;
  text-align: center;
}
body.page-fans .fans-gallery-source a,
body.page-fans .fans-gallery-source span,
body.page-light #fans .fans-gallery-source a,
body.page-light #fans .fans-gallery-source span {
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
[data-theme="light"] body.page-fans .fans-gallery-source,
[data-theme="light"] body.page-light #fans .fans-gallery-source,
body[data-theme="light"].page-fans .fans-gallery-source,
body[data-theme="light"].page-light #fans .fans-gallery-source {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(235, 243, 250, 0.66)) !important;
  color: #29405f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}
[data-theme="light"] body.page-fans .fans-gallery-source a,
[data-theme="light"] body.page-fans .fans-gallery-source span,
[data-theme="light"] body.page-light #fans .fans-gallery-source a,
[data-theme="light"] body.page-light #fans .fans-gallery-source span,
body[data-theme="light"].page-fans .fans-gallery-source a,
body[data-theme="light"].page-fans .fans-gallery-source span,
body[data-theme="light"].page-light #fans .fans-gallery-source a,
body[data-theme="light"].page-light #fans .fans-gallery-source span {
  color: #22395b !important;
  -webkit-text-fill-color: #22395b !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-content,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-content,
body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-content,
body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2vh, 24px) !important;
  width: min(92vw, 1320px) !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame,
body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-media-frame,
body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-media-frame {
  overflow: visible !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxImage,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxImage,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxImage {
  max-width: min(76vw, 1080px) !important;
  max-height: min(70vh, 820px) !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  gap: 4px !important;
  width: fit-content !important;
  max-width: min(560px, calc(100vw - 48px)) !important;
  margin: 0 auto !important;
  padding: 10px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: #20365a !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: 0 16px 34px rgba(59, 94, 133, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption strong,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption strong,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption strong,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption strong {
  color: #17345f !important;
  -webkit-text-fill-color: #17345f !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption span,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption span,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #lightboxCaption span,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #lightboxCaption span {
  color: #5e6f86 !important;
  -webkit-text-fill-color: #5e6f86 !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #nextLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.open .lightbox-close,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.active .lightbox-close,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #nextLightbox {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(48px, 3.2vw, 60px) !important;
  height: clamp(48px, 3.2vw, 60px) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(216, 238, 252, 0.54)) !important;
  color: #17345f !important;
  -webkit-text-fill-color: #17345f !important;
  box-shadow: 0 18px 38px rgba(43, 86, 130, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #prevLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #prevLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #prevLightbox {
  left: clamp(18px, 4vw, 72px) !important;
  right: auto !important;
  top: 50vh !important;
  transform: translateY(-50%) !important;
}
body.page-fans:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body.page-fans:not(.particle-fullscreen-active) .lightbox.active #nextLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.open #nextLightbox,
body.page-light:not(.particle-fullscreen-active) .lightbox.active #nextLightbox {
  right: clamp(18px, 4vw, 72px) !important;
  left: auto !important;
  top: 50vh !important;
  transform: translateY(-50%) !important;
}
/* TRUE FINAL quotes unification: uniform line size, centered lines, visible source rail. */
/* TRUE FINAL quotes layout guard: balanced text lines and visible source on button rail. */
/* FINAL quotes line breaking: balanced phrase lines, no orphan single-character tails. */
body.page-quotes #life #quoteText {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.18em !important;
}
/* FINAL quotes source alignment: place source on the same rail as the switch buttons. */
/* FINAL quotes premium glass pass: refraction edges, light sweep, length-aware typesetting. */
body.page-quotes #life .quote-panel {
  --quote-cold-edge: rgba(176, 222, 255, 0.46);
  --quote-warm-edge: rgba(248, 203, 126, 0.56);
  border-color: rgba(255, 248, 236, 0.24) !important;
}
body.page-quotes #life .quote-panel::after {
  transform: translateX(-38%) rotate(2deg) !important;
  mix-blend-mode: screen !important;
}
body.page-quotes #life .quote-panel.is-sweeping::after {
  animation: quoteGlassSweep 1.16s cubic-bezier(0.18, 0.78, 0.2, 1) both !important;
}
body.page-quotes #life .quote-panel.quote-is-short #quoteText {
  width: min(100%, 17em) !important;
  font-size: clamp(36px, 3.7vw, 50px) !important;
  line-height: 1.48 !important;
}
body.page-quotes #life .quote-panel.quote-is-medium #quoteText {
  width: min(100%, 21em) !important;
  font-size: clamp(31px, 3.05vw, 40px) !important;
  line-height: 1.68 !important;
}
body.page-quotes #life .quote-panel.quote-is-long #quoteText {
  width: min(100%, 24em) !important;
  font-size: clamp(25px, 2.45vw, 33px) !important;
  line-height: 1.84 !important;
}
[data-theme="light"] body.page-quotes #life .quote-panel,
body[data-theme="light"].page-quotes #life .quote-panel {
  --quote-cold-edge: rgba(185, 225, 255, 0.88);
  --quote-warm-edge: rgba(234, 184, 93, 0.74);
}
[data-theme="light"] body.page-quotes #life .quote-panel::before,
body[data-theme="light"].page-quotes #life .quote-panel::before {
  background: linear-gradient(180deg, rgba(181, 222, 255, 0.56) 0, rgba(181, 222, 255, 0.22) 1px, transparent 30px),
    linear-gradient(0deg, rgba(226, 177, 91, 0.48) 0, rgba(226, 177, 91, 0.2) 1px, transparent 34px),
    linear-gradient(118deg, rgba(255, 255, 255, 0.42), transparent 23%, transparent 69%, rgba(255, 255, 255, 0.26)),
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.64), transparent 44%) !important;
}
[data-theme="light"] body.page-quotes #life .quote-panel::after,
body[data-theme="light"].page-quotes #life .quote-panel::after {
  background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, 0.08) 43%, rgba(169, 214, 246, 0.42) 49%, rgba(234, 187, 105, 0.2) 54%, transparent 62%) !important;
  mix-blend-mode: soft-light !important;
}
@keyframes quoteGlassSweep {
  0% {
    opacity: 0;
    transform: translateX(-42%) rotate(2deg);
  }
  18% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translateX(42%) rotate(2deg);
  }
}
@media (max-width: 760px) {
  body.page-quotes #life .quote-panel.quote-is-short #quoteText {
    font-size: clamp(28px, 7.5vw, 36px) !important;
  }
  body.page-quotes #life .quote-panel.quote-is-medium #quoteText,
  body.page-quotes #life .quote-panel.quote-is-long #quoteText {
    width: min(100%, 16em) !important;
    font-size: clamp(23px, 6.6vw, 30px) !important;
    line-height: 1.72 !important;
  }
}
/* FINAL quotes typography and source placement: editorial serif, source to the right rail. */
body.page-quotes #life .quote-panel {
  --quote-display-font: "Songti SC", "Source Han Serif CN", "Noto Serif SC", "STSong", Georgia, "Times New Roman", serif;
  --quote-ui-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body.page-quotes #life #quoteText {
  font-family: var(--quote-display-font) !important;
  -webkit-text-fill-color: rgba(255, 246, 225, 0.96) !important;
}
body.page-quotes #life .quote-footer::before {
  display: inline-block !important;
  margin-right: 12px !important;
  transform: translateY(-1px) !important;
}
body.page-quotes #life .quote-index,
body.page-quotes #life .quote-controls button {
  font-family: var(--quote-ui-font) !important;
}
@media (max-width: 760px) {
  body.page-quotes #life .quote-footer {
    right: 24px !important;
  }
}
/* FINAL quotes page: warm note card, readable content, and calmer popup load. */
body.page-quotes #life .quote-panel::before {
  right: 34px !important;
  top: 10px !important;
  color: rgba(255, 244, 222, 0.08) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 142px !important;
  line-height: 1 !important;
}
body.page-quotes #life .quote-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 24px 70px 24px !important;
  height: 1px !important;
  z-index: -1 !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.46), rgba(156, 197, 222, 0.36), transparent) !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}
body.page-quotes #life .quote-meta-row,
body.page-quotes #life .quote-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
body.page-quotes #life .quote-index {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
body.page-quotes #life .quote-controls {
  grid-row: 4 !important;
  justify-self: center !important;
}
body.page-quotes #life .quote-controls button {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease !important;
}
body.page-quotes #life .quote-controls button:hover,
body.page-quotes #life .quote-controls button:focus-visible {
  transform: translateY(-2px) !important;
  background: rgba(255, 244, 222, 0.2) !important;
  border-color: rgba(255, 244, 222, 0.48) !important;
}
body.page-quotes #life .quote-controls button:disabled {
  opacity: 0.52 !important;
  cursor: wait !important;
}
body.page-quotes #life .quote-progress {
  justify-self: center !important;
}
body.page-quotes #life .quote-progress span {
  width: 0;
}
body.page-quotes #life .heart-popup-trigger {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 18px 52px rgba(18, 25, 44, 0.24) !important;
}
body.page-quotes #life .heart-popup-trigger::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 10px) !important;
  transform: translate(-50%, -4px) !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(20, 24, 36, 0.86) !important;
  color: #fff8ed !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
body.page-quotes #life .heart-popup-trigger:hover::after,
body.page-quotes #life .heart-popup-trigger:focus-visible::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}
[data-theme="light"] body.page-quotes #life .quote-panel::before,
body[data-theme="light"].page-quotes #life .quote-panel::before {
  color: rgba(94, 76, 126, 0.08) !important;
}
@media (max-width: 760px) {
  body.page-quotes #life .quote-panel {
    gap: 14px !important;
  }
  body.page-quotes #life .quote-meta-row,
  body.page-quotes #life .quote-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}
/* FINAL quotes correction: supersedes earlier quote-card experiments. */
body.page-quotes #life .life-layout {
  width: min(100%, 920px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(18px, 3vw, 32px) !important;
}
body.page-quotes #life .quote-panel {
  position: relative !important;
  isolation: isolate !important;
  width: min(100%, 860px) !important;
  max-width: 860px !important;
  min-height: clamp(420px, 42vw, 520px) !important;
  padding: clamp(42px, 5vw, 68px) clamp(42px, 6vw, 82px) clamp(92px, 7vw, 112px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(22px, 3vw, 34px) !important;
  border: 1px solid rgba(255, 248, 236, 0.28) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055) 34%, rgba(255, 255, 255, 0.11)),
    radial-gradient(circle at 14% 0%, rgba(255, 233, 185, 0.22), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(151, 197, 222, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(66, 58, 84, 0.68), rgba(46, 57, 75, 0.5) 56%, rgba(98, 72, 78, 0.42)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 38px 92px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(26px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.28) !important;
  overflow: hidden !important;
}
body.page-quotes #life .quote-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.24), transparent 24%, transparent 70%, rgba(255, 255, 255, 0.12)),
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.2), transparent 42%) !important;
  opacity: 0.86 !important;
  pointer-events: none !important;
}
body.page-quotes #life .quote-panel::after,
body.page-quotes #life .quote-panel.is-flying::after {
  content: none !important;
}
body.page-quotes #life .quote-meta-row {
  position: absolute !important;
  left: clamp(22px, 3vw, 36px) !important;
  top: clamp(22px, 3vw, 34px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
}
body.page-quotes #life .quote-index {
  min-height: 34px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 248, 236, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 248, 236, 0.8) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 28px rgba(0, 0, 0, 0.12) !important;
}
body.page-quotes #life #quoteText {
  grid-row: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  width: min(100%, 25em) !important;
  margin: 0 auto !important;
  color: #fff4df !important;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  line-height: 1.62 !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-align-last: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}
body.page-quotes #life .quote-footer {
  grid-row: 3 !important;
}
body.page-quotes #life #quoteFrom {
  justify-self: center !important;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}
body.page-quotes #life .quote-controls {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(36px, 4vw, 48px) !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: 42px 42px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  width: max-content !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}
body.page-quotes #life .quote-controls button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 248, 236, 0.24) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
  color: rgba(255, 248, 236, 0.94) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 34px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}
body.page-quotes #life .quote-progress {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  grid-row: auto !important;
  width: 100% !important;
  height: 5px !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
}
body.page-quotes #life .quote-progress span {
  display: block !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #e7b965 0%, #f2d698 38%, #a8d4ee 68%, #e9a9bc 100%) !important;
  box-shadow: 0 0 22px rgba(232, 185, 102, 0.32) !important;
  transition: width 0.42s ease !important;
}
[data-theme="light"] body.page-quotes #life .quote-panel,
body[data-theme="light"].page-quotes #life .quote-panel {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34) 34%, rgba(255, 255, 255, 0.56)),
    radial-gradient(circle at 12% 0%, rgba(255, 230, 186, 0.46), transparent 36%),
    radial-gradient(circle at 92% 10%, rgba(197, 229, 255, 0.48), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(239, 247, 255, 0.56)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.48),
    0 36px 96px rgba(68, 97, 132, 0.18),
    0 0 0 1px rgba(121, 150, 180, 0.05) !important;
  backdrop-filter: blur(28px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.35) !important;
}
[data-theme="light"] body.page-quotes #life #quoteText,
body[data-theme="light"].page-quotes #life #quoteText {
  color: #3d315b !important;
  -webkit-text-fill-color: #3d315b !important;
  text-shadow: none !important;
}
[data-theme="light"] body.page-quotes #life .quote-index,
body[data-theme="light"].page-quotes #life .quote-index {
  border-color: rgba(122, 137, 162, 0.18) !important;
  background: rgba(255, 255, 255, 0.56) !important;
  color: #626b80 !important;
  -webkit-text-fill-color: #626b80 !important;
}
[data-theme="light"] body.page-quotes #life .quote-controls button,
body[data-theme="light"].page-quotes #life .quote-controls button {
  border-color: rgba(122, 137, 162, 0.18) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(247, 251, 255, 0.46)) !important;
  color: #46516a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 34px rgba(75, 105, 140, 0.14) !important;
}
@media (max-width: 760px) {
  body.page-quotes #life .life-layout {
    padding-inline: 16px !important;
  }
  body.page-quotes #life .quote-panel {
    min-height: 390px !important;
    padding: 58px 24px 94px !important;
    border-radius: 18px !important;
  }
  body.page-quotes #life #quoteText {
    width: min(100%, 16em) !important;
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.7 !important;
  }
  body.page-quotes #life .quote-meta-row {
    left: 22px !important;
    top: 22px !important;
  }
}
/* Final desktop map layout lock: keep the two visible map components balanced. */
@media (min-width: 981px) {
  body.page-light #resonance .map-panel {
    align-self: stretch !important;
  }
  body.page-light #resonance .map-search-bar,
  body.page-light #resonance .manual-coord-panel,
  body.page-light #resonance .selected-location-info,
  body.page-light #resonance .map-actions {
    grid-column: 1 !important;
  }
}
/* True EOF audio lock: appended after repeated theme blocks. */
body.page-audio .audio-card {
  height: 294px !important;
  min-height: 294px !important;
  padding: 24px 26px 26px !important;
  box-sizing: border-box !important;
}
body.page-audio .audio-card-body {
  grid-template-areas: "title title"
    "artist artist"
    "summary summary"
    "meta meta"
    "tags play" !important;
  grid-template-columns: minmax(0, 1fr) 74px !important;
  grid-template-rows: auto auto minmax(2.8em, auto) auto 1fr !important;
  height: 100% !important;
  row-gap: 8px !important;
}
body.page-audio .audio-card-meta {
  grid-area: meta;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 18px !important;
  max-width: calc(100% - 80px) !important;
  margin: 0 !important;
}
body.page-audio .audio-card-meta div:first-child::before {
  content: none !important;
}
body.page-audio .audio-card-meta div:first-child dt {
  display: inline !important;
}
body.page-audio .audio-tags {
  grid-area: tags;
  max-height: 72px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.page-audio .audio-tag.tone-rose {
  color: #8e2f62 !important;
  border-color: rgba(218, 118, 166, 0.36) !important;
  background: rgba(255, 226, 241, 0.92) !important;
}
body.page-audio .audio-tag.tone-gold {
  color: #77531a !important;
  border-color: rgba(222, 176, 86, 0.38) !important;
  background: rgba(255, 241, 208, 0.9) !important;
}
body.page-audio .audio-tag.tone-mint {
  color: #1d625b !important;
  border-color: rgba(102, 184, 169, 0.34) !important;
  background: rgba(219, 249, 244, 0.9) !important;
}
body.page-audio .audio-mini-expand > i {
  display: none !important;
}
body.page-audio .audio-mini-volume {
  position: relative;
  display: grid;
  place-items: center;
}
body.page-audio .audio-mini-volume-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #b43174;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  cursor: pointer;
}
body.page-audio .audio-mini-volume-range {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: 112px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(125, 175, 232, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(44, 70, 104, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
body.page-audio .audio-mini-volume.is-open .audio-mini-volume-range,
body.page-audio .audio-mini-volume:focus-within .audio-mini-volume-range {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* FINAL Be Myself Orbit typography: equal size and weight across framed labels. */
body.page-gallery #gallery .self-orbit-play-mode button,
body.page-gallery #gallery .self-orbit-sync-mode button,
body.page-gallery #gallery .self-orbit-audio-mode button,
body.page-gallery #gallery .self-orbit-autoplay-toggle,
body.page-gallery #gallery .speed-label,
body.page-gallery #gallery .speed-value {
  font-family: "Montserrat", "Avenir Next", sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
body.page-gallery #gallery .self-orbit-play-mode button.active,
body.page-gallery #gallery .self-orbit-sync-mode button.active,
body.page-gallery #gallery .self-orbit-audio-mode button.active {
  font-weight: 700 !important;
}
/* Be Myself Orbit: use the interface blue for the play/pause glyph. */
body.page-gallery #gallery .self-orbit-autoplay-toggle i,
:root[data-theme="light"] body.page-gallery #gallery .self-orbit-autoplay-toggle i,
body[data-theme="light"].page-gallery #gallery .self-orbit-autoplay-toggle i {
  color: #3488bc !important;
}

@media (max-width: 760px), (pointer: coarse) {
  body.page-home #topologyCanvas,
  body.page-home .topology-toggle,
  body.page-home #home .hero-ring::before,
  body.page-home #home .hero-ring::after,
  body.page-gallery #cameraParticleButton,
  body.page-gallery #cameraGestureText,
  body.page-gallery #gestureHints,
  body.page-gallery #particleShapeControls,
  body.page-gallery #particleBurstButton,
  body.page-gallery #imageParticleCanvas,
  body.page-gallery #particleCameraVideo {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.page-home #home .hero-media {
    justify-self: center !important;
    width: min(320px, calc(100vw - 72px)) !important;
    max-width: calc(100vw - 72px) !important;
  }
  body.page-home #home .hero-ring {
    inset: 0 !important;
    overflow: hidden !important;
    animation: none !important;
    transform: none !important;
  }
}

.welcome-screen {
  --welcome-ink: #3b2633;
  --welcome-muted: rgba(59, 38, 51, 0.78);
  --welcome-panel: rgba(255, 250, 248, 0.22);
  --welcome-edge: rgba(255, 252, 248, 0.46);
  --welcome-line: rgba(237, 184, 178, 0.58);
  --welcome-glow: rgba(233, 174, 160, 0.54);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--welcome-ink);
  background: #f8edf4;
  isolation: isolate;
  transition: opacity 680ms ease,
    visibility 680ms ease,
    transform 680ms ease,
    background-color 420ms ease,
    color 420ms ease;
}
.welcome-screen,
.welcome-screen * {
  box-sizing: border-box;
}
:root:not([data-theme="light"]) .welcome-screen {
  --welcome-ink: #fff8f0;
  --welcome-muted: rgba(255, 248, 240, 0.78);
  --welcome-panel: rgba(10, 8, 18, 0.3);
  --welcome-edge: rgba(255, 236, 218, 0.28);
  --welcome-line: rgba(238, 196, 168, 0.48);
  --welcome-glow: rgba(238, 196, 168, 0.4);
  background: #03030a;
}
body.welcome-active {
  overflow: hidden;
}
body.welcome-complete .welcome-screen {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.018);
  pointer-events: none;
}
.welcome-screen[hidden] {
  display: none !important;
}
.welcome-backdrop,
.welcome-backdrop img,
.welcome-vignette {
  position: absolute;
  inset: 0;
}
.welcome-backdrop {
  z-index: -4;
}
.welcome-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: saturate(1.05) contrast(1.02) brightness(0.98);
  opacity: 1;
  transition: opacity 420ms ease, filter 420ms ease;
  animation: welcomeImageSurge 5200ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.welcome-backdrop img.is-swapping {
  opacity: 0;
}
:root:not([data-theme="light"]) .welcome-backdrop img {
  object-position: 50% 38%;
  filter: saturate(1.05) contrast(1.05) brightness(0.9);
  animation: welcomeImageRecede 5200ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.welcome-vignette {
  z-index: -3;
  background: linear-gradient(90deg, rgba(255, 246, 242, 0.66) 0%, rgba(255, 246, 242, 0.32) 38%, rgba(255, 246, 242, 0.06) 72%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 48%, rgba(255,255,255,0.08));
  transition: background 420ms ease;
}
:root:not([data-theme="light"]) .welcome-vignette {
  background: linear-gradient(90deg, rgba(4, 3, 10, 0.82) 0%, rgba(4, 3, 10, 0.54) 36%, rgba(4, 3, 10, 0.16) 74%),
    linear-gradient(180deg, rgba(0, 0, 8, 0.34), rgba(0, 0, 8, 0.12) 48%, rgba(0, 0, 8, 0.4));
}
.welcome-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.12) 48%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 96px);
  mix-blend-mode: screen;
  opacity: 0.12;
  animation: welcomeSheen 4200ms ease-in-out infinite alternate;
  transition: opacity 420ms ease, background 420ms ease;
}
:root:not([data-theme="light"]) .welcome-screen::before {
  opacity: 0.28;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 224, 190, 0.2) 48%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(255, 224, 190, 0.12) 0 1px, transparent 1px 96px);
}
:root:not([data-theme="light"]) .welcome-orbit {
  border-color: rgba(255, 224, 190, 0.54);
  box-shadow: 0 0 34px rgba(238, 196, 168, 0.22),
    inset 0 0 24px rgba(255, 236, 218, 0.08);
}
:root:not([data-theme="light"]) .welcome-orbit span {
  border-color: rgba(255, 218, 194, 0.42);
  box-shadow: 0 0 20px rgba(255, 218, 194, 0.18),
    inset 0 0 18px rgba(255, 218, 194, 0.08);
}
:root:not([data-theme="light"]) .welcome-orbit span:nth-child(2) {
  border-color: rgba(247, 170, 161, 0.46);
  box-shadow: 0 0 22px rgba(247, 170, 161, 0.18),
    inset 0 0 18px rgba(247, 170, 161, 0.08);
}
:root:not([data-theme="light"]) .welcome-orbit span:nth-child(3) {
  border-color: rgba(255, 244, 220, 0.5);
  box-shadow: 0 0 18px rgba(255, 244, 220, 0.14),
    inset 0 0 14px rgba(255, 244, 220, 0.08);
}
.welcome-orbit {
  position: absolute;
  inset: 1% 1% auto auto;
  width: clamp(180px, 20vw, 320px);
  aspect-ratio: 1;
  border: 1px solid rgba(213, 154, 143, 0.42);
  border-radius: 50%;
  opacity: 0.88;
  transform: rotate(-18deg);
  animation: welcomeFloat 5600ms ease-in-out infinite alternate;
  transition: border-color 420ms ease, opacity 420ms ease;
  box-shadow: 0 0 28px rgba(213, 154, 143, 0.18),
    inset 0 0 24px rgba(255, 250, 245, 0.1);
}
.welcome-orbit::before,
.welcome-orbit::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  pointer-events: none;
}
.welcome-orbit::before {
  background: conic-gradient(from 14deg, transparent 0 18deg, rgba(255,255,255,0.55) 18deg 19deg, transparent 19deg 42deg),
    conic-gradient(from 74deg, transparent 0 62deg, rgba(221, 145, 137, 0.4) 62deg 66deg, transparent 66deg 100deg);
  -webkit-mask: radial-gradient(circle, transparent 0 66%, #000 67% 69%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 66%, #000 67% 69%, transparent 70%);
  opacity: 0.75;
}
.welcome-orbit::after {
  inset: 22%;
  border: 1px dashed rgba(255, 249, 242, 0.5);
  transform: rotate(32deg) scaleX(0.72);
  opacity: 0.62;
}
.welcome-orbit span {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(213, 154, 143, 0.42);
  border-radius: 50%;
  transform: rotate(28deg) scaleX(0.68);
  box-shadow: 0 0 18px rgba(213, 154, 143, 0.15),
    inset 0 0 16px rgba(255, 250, 245, 0.08);
}
.welcome-orbit span:nth-child(2) {
  inset: 20%;
  border: 1px solid rgba(232, 166, 152, 0.46);
  border-radius: 40% 60% 50% 50%;
  transform: rotate(-38deg) scaleX(0.74);
  box-shadow: 0 0 18px rgba(232, 166, 152, 0.16),
    inset 0 0 14px rgba(232, 166, 152, 0.08);
}
.welcome-orbit span:nth-child(3) {
  inset: 32%;
  border: 1px solid rgba(255, 238, 202, 0.54);
  border-radius: 60% 40% 50% 50%;
  transform: rotate(62deg) scaleX(0.62);
  box-shadow: 0 0 16px rgba(255, 238, 202, 0.15),
    inset 0 0 12px rgba(255, 238, 202, 0.08);
}
.welcome-shell {
  width: min(560px, calc(100% - 44px));
  justify-self: start;
  align-self: end;
  margin-left: clamp(0px, 2vw, 30px);
  margin-bottom: clamp(34px, 6vh, 74px);
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--welcome-edge);
  border-radius: 18px;
  backdrop-filter: blur(22px) saturate(1.12);
  transform: translateY(18px);
  opacity: 0;
  animation: welcomeCopyIn 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 160ms both;
  transition: background-color 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease;
}
.welcome-kicker {
  margin: 0 0 16px;
  font-size: 0.76rem;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--welcome-muted);
}
.welcome-shell h1 {
  display: grid;
  gap: 10px;
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
  font-size: clamp(3.6rem, 7vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
  background: linear-gradient(
    135deg,
    var(--welcome-ink) 0%,
    #8f4a49 36%,
    #c17869 68%,
    #f0d5ae 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.welcome-shell h1 span:last-child {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(2.2rem, 4.8vw, 2.9rem);
  font-weight: 500;
}
.welcome-copy {
  max-width: 520px;
  margin: 24px 0 0;
  font-size: 1.08rem;
  line-height: 1.76;
  color: var(--welcome-muted);
  white-space: normal;
  overflow-wrap: anywhere;
}
.welcome-copy-en {
  margin-top: 6px;
  font-size: 0.94rem;
  line-height: 1.66;
}
.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.welcome-theme,
.welcome-skip,
.welcome-replay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--welcome-edge);
  border-radius: 999px;
  color: var(--welcome-ink);
  background: rgba(255, 251, 246, 0.2);
  box-shadow: 0 12px 30px rgba(15, 9, 16, 0.16);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.welcome-theme:hover,
.welcome-skip:hover,
.welcome-replay:hover {
  transform: translateY(-2px);
  background: rgba(255, 251, 246, 0.32);
  border-color: rgba(255, 251, 246, 0.68);
}
.welcome-progress {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.26);
}
.welcome-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f2b4a2, #fff7ea, #c17869);
  box-shadow: 0 0 24px var(--welcome-glow);
  transition: width 120ms linear, background 420ms ease, box-shadow 420ms ease;
}
@media (max-width: 860px) {
  .welcome-vignette,
  :root:not([data-theme="light"]) .welcome-vignette {
    background: linear-gradient(180deg, rgba(5, 4, 12, 0.08), rgba(5, 4, 12, 0.35)), rgba(255,255,255,0.04);
  }
  [data-theme="light"] .welcome-vignette {
    background: linear-gradient(180deg, rgba(255, 247, 251, 0.1), rgba(255, 247, 251, 0.38));
  }
  .welcome-backdrop img,
  :root:not([data-theme="light"]) .welcome-backdrop img {
    object-position: 50% 34%;
  }
  .welcome-shell {
    justify-self: center;
    align-self: end;
    margin: 0 0 42px;
    width: min(520px, calc(100% - 28px));
    background: linear-gradient(135deg, var(--welcome-panel), rgba(255, 249, 244, 0.1));
  }
  .welcome-shell h1 {
    font-size: 3rem;
  }
  .welcome-shell h1 span:last-child {
    font-size: 2rem;
  }
  .welcome-orbit {
    width: 180px;
    inset: 2% -4% auto auto;
  }
}
@media (max-width: 520px) {
  .welcome-backdrop img,
  :root:not([data-theme="light"]) .welcome-backdrop img {
    object-position: 50% 30%;
  }
  .welcome-shell {
    margin-bottom: 34px;
    padding: 22px;
  }
  .welcome-shell h1 {
    font-size: 2.42rem;
  }
  .welcome-shell h1 span:last-child {
    font-size: 1.58rem;
  }
  .welcome-copy {
    font-size: 1rem;
    line-height: 1.62;
  }
  .welcome-copy-en {
    max-width: 29ch;
    font-size: 0.86rem;
  }
  .welcome-actions {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-screen,
  .welcome-backdrop img,
  .welcome-screen::before,
  .welcome-orbit,
  .welcome-shell {
    animation: none;
    transition: none;
  }
  .welcome-shell {
    opacity: 1;
    transform: none;
  }
}
@keyframes welcomeImageSurge {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes welcomeImageRecede {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1.045);
  }
}
@keyframes welcomeCopyIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes welcomeSheen {
  from {
    transform: translateX(-3%);
  }
  to {
    transform: translateX(3%);
  }
}
@keyframes welcomeFloat {
  from {
    transform: translateY(0) rotate(-18deg);
  }
  to {
    transform: translateY(18px) rotate(-10deg);
  }
}
.welcome-screen.welcome-replaying .welcome-shell {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 220ms ease, transform 220ms ease;
}
/* 2026-06-11 welcome entrance refinement: layered copy and gentle depth cue. */
.welcome-screen:not(.welcome-replaying) .welcome-orbit {
  transform-origin: 64% 36%;
  animation: welcomeOrbitPush 1280ms cubic-bezier(0.16, 0.9, 0.22, 1) 120ms both,
    welcomeFloat 5600ms ease-in-out 1500ms infinite alternate;
  will-change: transform, opacity, filter;
}
.welcome-screen:not(.welcome-replaying) .welcome-orbit span:nth-child(1) {
  animation: welcomeOrbitInnerPush 980ms cubic-bezier(0.16, 0.9, 0.22, 1) 260ms both;
}
.welcome-screen:not(.welcome-replaying) .welcome-orbit span:nth-child(2) {
  animation: welcomeOrbitInnerPush 980ms cubic-bezier(0.16, 0.9, 0.22, 1) 360ms both;
}
.welcome-screen:not(.welcome-replaying) .welcome-orbit span:nth-child(3) {
  animation: welcomeOrbitInnerPush 980ms cubic-bezier(0.16, 0.9, 0.22, 1) 460ms both;
}
.welcome-screen:not(.welcome-replaying) .welcome-kicker,
.welcome-screen:not(.welcome-replaying) .welcome-shell h1 span,
.welcome-screen:not(.welcome-replaying) .welcome-copy,
.welcome-screen:not(.welcome-replaying) .welcome-actions {
  opacity: 0;
  transform: translateY(14px);
  animation: welcomeTextRise 720ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}
.welcome-screen:not(.welcome-replaying) .welcome-kicker {
  animation-delay: 420ms;
}
.welcome-screen:not(.welcome-replaying) .welcome-shell h1 span:first-child {
  animation-delay: 560ms;
}
.welcome-screen:not(.welcome-replaying) .welcome-shell h1 span:last-child {
  animation-delay: 680ms;
}
.welcome-screen .welcome-shell h1 span {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.2px;
  -webkit-text-stroke-color: rgba(58, 38, 48, 0.16);
  color: transparent;
  text-shadow: none;
}
:root:not([data-theme="light"]) .welcome-screen .welcome-shell h1 span,
body[data-theme="dark"] .welcome-screen .welcome-shell h1 span {
  -webkit-text-stroke-color: rgba(255, 232, 220, 0.16);
}
.welcome-screen:not(.welcome-replaying) .welcome-copy:not(.welcome-copy-en) {
  animation-delay: 820ms;
}
.welcome-screen:not(.welcome-replaying) .welcome-copy-en {
  animation-delay: 930ms;
}
.welcome-screen:not(.welcome-replaying) .welcome-actions {
  animation-delay: 1080ms;
}
.welcome-screen {
  --welcome-panel-shadow-clean: rgba(55, 34, 42, 0.16);
}
.welcome-shell {
  background: linear-gradient(135deg, rgba(255, 250, 245, 0.28), rgba(255, 246, 239, 0.12) 48%, rgba(221, 151, 143, 0.1)),
    var(--welcome-panel);
  box-shadow: 0 20px 54px var(--welcome-panel-shadow-clean),
    0 0 38px rgba(233, 174, 160, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
:root[data-theme="light"] .welcome-screen,
body[data-theme="light"] .welcome-screen {
  --welcome-panel-shadow-clean: rgba(66, 82, 76, 0.14);
}
:root[data-theme="light"] .welcome-shell,
body[data-theme="light"] .welcome-shell {
  background: linear-gradient(135deg, rgba(255, 255, 252, 0.42), rgba(235, 248, 225, 0.2) 46%, rgba(198, 214, 196, 0.18)),
    rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.58);
}
:root:not([data-theme="light"]) .welcome-shell,
body:not([data-theme="light"]) .welcome-shell {
  background: linear-gradient(135deg, rgba(30, 31, 42, 0.56), rgba(72, 60, 65, 0.32) 50%, rgba(179, 109, 94, 0.16)),
    rgba(9, 8, 16, 0.22);
  border-color: rgba(255, 232, 218, 0.25);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28),
    0 0 46px rgba(238, 196, 168, 0.1),
    inset 0 1px 0 rgba(255, 238, 224, 0.14);
}
@keyframes welcomeTextRise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes welcomeOrbitPush {
  0% {
    opacity: 0;
    transform: translate3d(58px, -34px, 0) rotate(-28deg) scale(0.74);
    filter: blur(8px);
  }
  68% {
    opacity: 0.96;
    transform: translate3d(-6px, 5px, 0) rotate(-14deg) scale(1.035);
    filter: blur(0);
  }
  100% {
    opacity: 0.88;
    transform: translate3d(0, 0, 0) rotate(-18deg) scale(1);
    filter: blur(0);
  }
}
@keyframes welcomeOrbitInnerPush {
  from {
    opacity: 0;
    transform: rotate(var(--orbit-rotate, 28deg)) scaleX(var(--orbit-scale-x, 0.68)) scale(0.82);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
.welcome-orbit span:nth-child(1) {
  --orbit-rotate: 28deg;
  --orbit-scale-x: 0.68;
}
.welcome-orbit span:nth-child(2) {
  --orbit-rotate: -38deg;
  --orbit-scale-x: 0.74;
}
.welcome-orbit span:nth-child(3) {
  --orbit-rotate: 62deg;
  --orbit-scale-x: 0.62;
}
@media (prefers-reduced-motion: reduce) {
  .welcome-screen:not(.welcome-replaying) .welcome-orbit,
  .welcome-screen:not(.welcome-replaying) .welcome-orbit span,
  .welcome-screen:not(.welcome-replaying) .welcome-kicker,
  .welcome-screen:not(.welcome-replaying) .welcome-shell h1 span,
  .welcome-screen:not(.welcome-replaying) .welcome-copy,
  .welcome-screen:not(.welcome-replaying) .welcome-actions {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* ============ 图册伪立体精选板块 ============ */
.gallery-depth-showcase {
  --depth-x: 0px;
  --depth-y: 0px;
  position: relative;
  margin: 42px auto 46px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: linear-gradient(115deg, rgba(16, 20, 31, 0.92), rgba(41, 31, 43, 0.76)),
    rgba(13, 16, 24, 0.92);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
  isolation: isolate;
}
.gallery-depth-showcase::before,
.gallery-depth-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.gallery-depth-showcase::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%, rgba(0, 0, 0, 0.18));
  background-size: calc(100% / 6) 100%, 100% 100%;
  mix-blend-mode: soft-light;
  opacity: 0.42;
}
.gallery-depth-showcase::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.32));
}
.depth-showcase-column:nth-child(2) {
  --panel: rgba(190, 172, 104, 0.66);
  --panel-soft: rgba(255, 239, 178, 0.27);
}
.depth-showcase-column:nth-child(3) {
  --panel: rgba(210, 119, 132, 0.62);
  --panel-soft: rgba(255, 213, 222, 0.27);
}
.depth-showcase-column:nth-child(4) {
  --panel: rgba(182, 105, 78, 0.65);
  --panel-soft: rgba(255, 196, 149, 0.23);
}
.depth-showcase-column:nth-child(5) {
  --panel: rgba(112, 160, 172, 0.62);
  --panel-soft: rgba(204, 239, 240, 0.25);
}
.depth-showcase-column:nth-child(6) {
  --panel: rgba(103, 111, 132, 0.7);
  --panel-soft: rgba(213, 220, 236, 0.2);
}
.depth-showcase-column:nth-child(1) .depth-showcase-front {
  width: 114%;
  height: 54%;
  object-position: center bottom;
  clip-path: polygon(26% 0%, 74% 0%, 84% 100%, 16% 100%);
}
.depth-showcase-column:nth-child(2) .depth-showcase-front,
.depth-showcase-column:nth-child(3) .depth-showcase-front {
  width: 114%;
  height: 56%;
  clip-path: polygon(22% 0%, 78% 0%, 88% 100%, 12% 100%);
}
.depth-showcase-column:nth-child(4) .depth-showcase-front,
.depth-showcase-column:nth-child(5) .depth-showcase-front,
.depth-showcase-column:nth-child(6) .depth-showcase-front {
  width: 112%;
  height: 58%;
  clip-path: polygon(25% 0%, 75% 0%, 84% 100%, 16% 100%);
}
.depth-showcase-column:nth-child(2) .depth-showcase-front {
  object-position: center 82%;
}
.depth-showcase-column:nth-child(3) .depth-showcase-front {
  object-position: center 82%;
}
.depth-showcase-column:nth-child(4) .depth-showcase-front,
.depth-showcase-column:nth-child(5) .depth-showcase-front,
.depth-showcase-column:nth-child(6) .depth-showcase-front {
  object-position: center bottom;
}
body[data-theme="light"] .gallery-depth-showcase,
:root[data-theme="light"] .gallery-depth-showcase {
  border-color: rgba(27, 35, 54, 0.14);
  background: linear-gradient(115deg, rgba(244, 247, 252, 0.96), rgba(239, 231, 226, 0.86)),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 80px rgba(61, 71, 91, 0.18);
}
@media (max-width: 860px) {
  .gallery-depth-showcase {
    margin: 34px auto 38px;
  }
}
@media (max-width: 560px) {
  .gallery-depth-showcase {
    border-radius: 8px;
  }
  .depth-showcase-column:nth-child(1) .depth-showcase-front,
  .depth-showcase-column:nth-child(2) .depth-showcase-front,
  .depth-showcase-column:nth-child(3) .depth-showcase-front,
  .depth-showcase-column:nth-child(4) .depth-showcase-front,
  .depth-showcase-column:nth-child(5) .depth-showcase-front,
  .depth-showcase-column:nth-child(6) .depth-showcase-front {
    width: 112%;
    height: 54%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-depth-showcase {
    --depth-x: 0px !important;
    --depth-y: 0px !important;
  }
}
/* ============ 图册分类控制台 ============ */
body.page-gallery #gallery .gallery-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 12px;
  align-items: center;
  width: min(980px, 100%);
  margin: 0 auto clamp(24px, 3.4vw, 40px);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(16, 20, 31, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 54px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px) saturate(1.08);
}
body.page-gallery #gallery .gallery-control-group {
  display: grid;
  grid-template-columns: minmax(66px, auto) repeat(2, minmax(72px, 1fr));
  gap: 6px;
  align-items: center;
  min-height: 44px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}
body.page-gallery #gallery .gallery-control-group.active {
  border-color: rgba(255, 220, 176, 0.32);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
body.page-gallery #gallery .gallery-control-label {
  min-width: 0;
  padding-inline: 12px 8px;
  color: rgba(255, 250, 244, 0.78);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
body.page-gallery #gallery .gallery-expand-btn,
body.page-gallery #gallery .gallery-collapse-btn {
  justify-content: center;
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}
body.page-gallery #gallery .gallery-expand-btn:hover,
body.page-gallery #gallery .gallery-collapse-btn:hover {
  background: rgba(255, 226, 190, 0.16);
  border-color: rgba(255, 226, 190, 0.3);
  color: rgba(255, 250, 244, 0.96);
}
:root[data-theme="light"] body.page-gallery #gallery .gallery-controls,
[data-theme="light"] body.page-gallery #gallery .gallery-controls {
  background: rgba(255, 255, 255, 0.44) !important;
  border-color: rgba(124, 145, 164, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 38px rgba(78, 98, 126, 0.12) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .gallery-control-group,
[data-theme="light"] body.page-gallery #gallery .gallery-control-group {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(124, 145, 164, 0.16) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .gallery-control-label,
[data-theme="light"] body.page-gallery #gallery .gallery-control-label {
  color: rgba(54, 66, 86, 0.72) !important;
}
:root[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn,
:root[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn,
[data-theme="light"] body.page-gallery #gallery .gallery-expand-btn,
[data-theme="light"] body.page-gallery #gallery .gallery-collapse-btn {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(124, 145, 164, 0.14) !important;
  color: rgba(58, 70, 90, 0.72) !important;
}
@media (max-width: 900px) {
  body.page-gallery #gallery .gallery-controls {
    grid-template-columns: 1fr;
    width: min(520px, 100%);
    border-radius: 22px;
  }
}
/* ============ 自我图册 3D 轮播 ============ */
.self-orbit-carousel {
  --orbit-energy: 0;
  --orbit-beat: 0;
  --orbit-bass: 0;
  --orbit-vocal: 0;
  --orbit-air: 0;
  --orbit-flux: 0;
  --orbit-cohesion: 0;
  position: relative;
  margin: clamp(32px, 5vw, 66px) auto 0;
  padding: clamp(22px, 3vw, 38px) clamp(18px, 3.4vw, 42px) clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  isolation: isolate;
}
.self-orbit-carousel.is-hidden {
  display: none;
}
/* Voice archive active card marker: keep card, tag, and button surfaces unchanged. */
@property --voice-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
body.page-audio main #audio-gallery .audio-card.is-playing,
body.page-audio main #audio-gallery .audio-card.is-active.is-playing,
html[data-theme="light"] body.page-audio main #audio-gallery .audio-card.is-playing {
  animation: voiceCardSoftLift 2.8s ease-in-out infinite !important;
  border-color: rgba(126, 165, 220, 0.42) !important;
  transform: translateY(-2px) !important;
}
body.page-audio main #audio-gallery .audio-card.is-playing::after,
body.page-audio main #audio-gallery .audio-card.is-active.is-playing::after,
html[data-theme="light"] body.page-audio main #audio-gallery .audio-card.is-playing::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
      from var(--voice-border-angle),
      rgba(125, 175, 232, 0) 0deg,
      rgba(125, 175, 232, 0.18) 72deg,
      rgba(203, 112, 166, 0.36) 112deg,
      rgba(125, 175, 232, 0.22) 154deg,
      rgba(125, 175, 232, 0) 220deg,
      rgba(125, 175, 232, 0) 360deg
    ) !important;
  box-shadow: none !important;
  opacity: 0.9 !important;
  pointer-events: none;
  animation: voiceBorderFlow 3.8s linear infinite !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
body.page-audio main #audio-gallery .audio-card.is-playing .audio-type,
body.page-audio main #audio-gallery .audio-card.is-playing .audio-tag,
body.page-audio main #audio-gallery .audio-card.is-active.is-playing .audio-type,
body.page-audio main #audio-gallery .audio-card.is-active.is-playing .audio-tag,
html[data-theme="light"] body.page-audio main #audio-gallery .audio-card.is-playing .audio-type,
html[data-theme="light"] body.page-audio main #audio-gallery .audio-card.is-playing .audio-tag {
  color: #174577 !important;
  background: rgba(221, 241, 255, 0.92) !important;
  border-color: rgba(113, 174, 228, 0.38) !important;
  box-shadow: none !important;
}
body.page-audio main #audio-gallery .audio-card.is-playing .audio-play-btn,
body.page-audio main #audio-gallery .audio-card.is-active.is-playing .audio-play-btn,
html[data-theme="light"] body.page-audio main #audio-gallery .audio-card.is-playing .audio-play-btn {
  color: #172033 !important;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.92), transparent 38%),
    linear-gradient(135deg, #fffaf2 0%, #d9edff 48%, #f8c4de 100%) !important;
  box-shadow: 0 18px 42px rgba(217, 150, 166, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}
@keyframes voiceBorderFlow {
  to {
    --voice-border-angle: 360deg;
  }
}
@keyframes voiceCardSoftLift {
  0%,
  100% {
    box-shadow: 0 24px 70px rgba(26, 86, 160, 0.13),
      0 0 0 1px rgba(125, 175, 232, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }
  50% {
    box-shadow: 0 28px 78px rgba(26, 86, 160, 0.16),
      0 0 0 2px rgba(203, 112, 166, 0.12),
      0 0 22px rgba(125, 175, 232, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }
}
/* Voice archive card layout: follow the reference spacing only, keep original surfaces. */
body.page-audio main #audio-gallery .audio-card {
  display: block !important;
}
body.page-audio main #audio-gallery .audio-card-header {
  position: absolute !important;
  top: 32px !important;
  right: 32px !important;
  z-index: 3;
  display: block !important;
  padding: 0 !important;
}
body.page-audio main #audio-gallery .audio-type {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 56px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.page-audio main #audio-gallery .audio-card-body {
  min-height: 0 !important;
}
body.page-audio main #audio-gallery .audio-title {
  grid-area: title;
}
body.page-audio main #audio-gallery .audio-card-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-audio main #audio-gallery .audio-card-meta dt,
body.page-audio main #audio-gallery .audio-card-meta dd {
  margin: 0;
}
body.page-audio main #audio-gallery .audio-card-meta dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-audio main #audio-gallery .audio-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}
body.page-audio main #audio-gallery .audio-play-action {
  right: 30px;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
body.page-audio main #audio-gallery .audio-play-btn {
  width: 62px !important;
  height: 62px !important;
}
body.page-audio main #audio-gallery .audio-card.is-playing::after {
  inset: -1px !important;
  padding: 2px !important;
}
@media (max-width: 760px) {
  body.page-audio main #audio-gallery .audio-card {
    min-height: 286px !important;
    padding: 28px 24px 26px !important;
  }
  body.page-audio main #audio-gallery .audio-card-body {
    max-width: 100%;
    padding-right: 0 !important;
  }
  body.page-audio main #audio-gallery .audio-title {
    margin-right: 86px !important;
    margin-bottom: 10px !important;
  }
  body.page-audio main #audio-gallery .audio-card-meta {
    grid-template-columns: 1fr;
    margin-bottom: 10px !important;
  }
  body.page-audio main #audio-gallery .audio-play-action {
    right: 24px;
    bottom: 26px;
  }
}
:root:not([data-theme="light"]) .self-orbit-carousel,
:root:not([data-theme="light"]) body.page-gallery .self-orbit-carousel {
  display: none !important;
}
.self-orbit-carousel::before,
.self-orbit-carousel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.self-orbit-carousel::before {
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 48% 56%, rgba(94, 163, 196, 0.16), transparent 42%),
    radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 28%, rgba(178, 218, 255, 0.2) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 72%, rgba(150, 206, 229, 0.15) 0 1px, transparent 1.7px),
    linear-gradient(100deg, transparent 16%, rgba(255, 255, 255, 0.09), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 78px);
  animation: selfOrbitAura 9s ease-in-out infinite;
}
.self-orbit-carousel::after {
  content: "";
  position: absolute;
  left: clamp(22px, 4vw, 58px);
  right: clamp(22px, 4vw, 58px);
  top: clamp(78px, 8.5vw, 118px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), rgba(139, 183, 218, 0.34), transparent);
  pointer-events: none;
}
.self-orbit-copy {
  position: relative;
  z-index: 3;
  display: block;
  padding-inline: clamp(4px, 1.2vw, 14px);
}
.self-orbit-copy::before {
  content: "EDITORIAL VIEW / BE MYSELF";
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 238, 218, 0.62);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}
.self-orbit-kicker {
  margin: 0;
  color: rgba(255, 235, 210, 0.94);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(22px, 3.1vw, 42px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(255, 203, 164, 0.1);
}
.self-orbit-line {
  max-width: 32rem;
  margin: 10px 0 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(255, 203, 164, 0.12);
}
.self-orbit-shell {
  position: relative;
  z-index: 2;
  min-height: clamp(430px, 43vw, 560px);
  margin-top: clamp(10px, 2vw, 24px);
  perspective: 1600px;
}
.self-orbit-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: min(760px, 78vw);
  height: 32%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.3), transparent 62%),
    radial-gradient(ellipse at 50% 54%, rgba(128, 176, 210, 0.14), transparent 68%);
  filter: blur(22px);
  opacity: 0.52;
  transform: translateX(-50%);
  pointer-events: none;
}
.self-orbit-stage {
  position: absolute;
  inset: 0 clamp(28px, 5vw, 72px);
  isolation: isolate;
  transform-style: preserve-3d;
  transform: scale(var(--orbit-scale, 1));
  transition: transform 0.1s ease-out;
}
.self-orbit-stage::before {
  content: none;
}
.self-orbit-stage::after {
  content: none;
}
.self-orbit-waveform {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: min(430px, 56vw);
  height: 38px;
  margin: clamp(-18px, -1.4vw, -8px) auto clamp(10px, 1.8vw, 20px);
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}
.self-orbit-carousel.is-sound-sync .self-orbit-waveform {
  opacity: 1;
  transform: translateY(0);
}
.self-orbit-waveform::before,
.self-orbit-waveform::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 151, 184, 0.22));
}
.self-orbit-waveform::after {
  background: linear-gradient(90deg, rgba(218, 164, 169, 0.22), transparent);
}
.self-orbit-waveform span {
  --wave: 0.18;
  --sync: 0.18;
  --phase: 0.5;
  width: 4px;
  height: calc(5px + var(--wave) * 21px + var(--sync) * 9px + var(--orbit-beat) * 7px);
  border-radius: 999px;
  background: linear-gradient(180deg,
      rgba(135, 188, 221, calc(0.56 + var(--sync) * 0.24)),
      rgba(255, 202, 180, calc(0.48 + var(--phase) * 0.2)));
  box-shadow: 0 0 calc(6px + var(--wave) * 10px + var(--sync) * 16px + var(--orbit-beat) * 12px) rgba(126, 180, 214, calc(0.07 + var(--wave) * 0.1 + var(--sync) * 0.12 + var(--orbit-beat) * 0.08)),
    0 0 calc(var(--orbit-cohesion) * 18px) rgba(255, 214, 170, calc(var(--orbit-cohesion) * 0.1));
  transform: translateY(calc((0.5 - var(--phase)) * 3px))
    scaleY(calc(0.76 + var(--wave) * 0.28 + var(--sync) * 0.2 + var(--orbit-beat) * 0.12));
  transform-origin: center;
  transition: height 90ms linear, transform 90ms linear, box-shadow 90ms linear;
}
.self-orbit-card {
  --x-step: clamp(138px, 14vw, 218px);
  --z-step: 78px;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  width: clamp(178px, 20vw, 310px);
  aspect-ratio: 0.72;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, calc(0.38 - var(--abs) * 0.075));
  border-radius: 8px;
  cursor: pointer;
  opacity: calc(1 - var(--abs) * 0.22);
  filter: blur(calc(var(--abs) * 0.06px))
    saturate(calc(1.02 - var(--abs) * 0.06));
  will-change: transform, opacity, filter;
  transform: translate(-50%, -50%)
    translateX(calc(var(--offset) * var(--x-step)))
    translateY(calc(var(--abs) * 18px))
    translateZ(calc(260px - var(--abs) * var(--z-step)))
    rotateY(calc(var(--offset) * -12deg))
    rotateZ(calc(var(--offset) * -0.7deg))
    scale(calc(1 - var(--abs) * 0.095 + var(--orbit-energy) * 0.026));
}
.self-orbit-card[data-slot="-2"],
.self-orbit-card[data-slot="2"] {
  z-index: 1;
}
.self-orbit-card[data-slot="-1"],
.self-orbit-card[data-slot="1"] {
  z-index: 3;
}
.self-orbit-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.self-orbit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%, rgba(0, 0, 0, 0.18)),
    radial-gradient(ellipse at 50% 5%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.16), transparent 52%);
  opacity: calc(0.24 + var(--abs) * 0.1);
  pointer-events: none;
}
.self-orbit-card-shine {
  position: absolute;
  inset: -1px;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.34) 48%, transparent 58% 100%);
  transform: translateX(-60%);
  pointer-events: none;
}
.self-orbit-card.active {
  z-index: 5;
  opacity: 1;
  filter: blur(0);
}
.self-orbit-carousel.is-sound-sync .self-orbit-card.active {
  border-color: rgba(190, 225, 242, calc(0.48 + var(--orbit-card-glow, 0) * 0.26 + var(--orbit-cohesion) * 0.12));
  box-shadow: 0 48px 128px rgba(0, 0, 0, 0.48),
    0 18px 52px rgba(74, 114, 151, calc(0.16 + var(--orbit-vocal) * 0.08 + var(--orbit-card-glow, 0) * 0.08)),
    0 0 calc(26px + var(--orbit-card-glow, 0) * 38px + var(--orbit-flux) * 22px) rgba(126, 205, 238, calc(0.08 + var(--orbit-card-glow, 0) * 0.16 + var(--orbit-cohesion) * 0.08)),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.self-orbit-carousel.is-sound-sync .self-orbit-stage {
  inset-inline: clamp(22px, 4vw, 56px);
}
.self-orbit-carousel.is-sound-sync .self-orbit-card {
  --x-step: clamp(182px, 17vw, 278px);
  --z-step: 34px;
  top: 51%;
  width: clamp(172px, 18vw, 282px);
  opacity: calc(0.96 - var(--abs) * 0.16);
  filter: blur(calc(var(--abs) * 0.04px))
    brightness(calc(1 + var(--orbit-card-pulse, 0) * 0.022 + var(--orbit-air) * 0.018))
    saturate(calc(1.04 - var(--abs) * 0.035 + var(--orbit-vocal) * 0.04));
  transform: translate(-50%, -50%)
    translateX(calc(var(--offset) * var(--x-step)))
    translateY(calc(var(--abs) * 7px + var(--orbit-card-pulse, 0) * -7px + var(--orbit-beat) * -5px + var(--orbit-card-drift, 0) * 4px))
    translateZ(calc(120px - var(--abs) * var(--z-step) + var(--orbit-card-pulse, 0) * 18px + var(--orbit-cohesion) * 8px))
    rotateY(calc(var(--offset) * -3.2deg + var(--orbit-card-tilt, 0) * 0.62deg))
    rotateZ(calc(var(--offset) * -0.16deg + var(--orbit-card-drift, 0) * 0.28deg))
    scale(calc(1 - var(--abs) * 0.04 + var(--orbit-card-pulse, 0) * 0.022 + var(--orbit-beat) * 0.012));
}
.self-orbit-carousel.is-sound-sync .self-orbit-card::before {
  opacity: calc(0.12 + var(--abs) * 0.04 + var(--orbit-card-glow, 0) * 0.16);
}
.self-orbit-carousel.is-sound-sync .self-orbit-card.active {
  transform: translate(-50%, -50%)
    translateX(calc(var(--offset) * var(--x-step)))
    translateY(calc(var(--abs) * 7px + var(--orbit-card-pulse, 0) * -9px + var(--orbit-beat) * -6px + var(--orbit-card-drift, 0) * 3px))
    translateZ(calc(130px - var(--abs) * var(--z-step) + var(--orbit-card-pulse, 0) * 22px + var(--orbit-cohesion) * 10px))
    rotateY(calc(var(--offset) * -3.2deg + var(--orbit-card-tilt, 0) * 0.42deg))
    rotateZ(calc(var(--orbit-card-drift, 0) * 0.2deg))
    scale(calc(1.02 + var(--orbit-card-pulse, 0) * 0.026 + var(--orbit-beat) * 0.014));
}
.self-orbit-carousel.is-orbit-audio-playing .self-orbit-sync-mode button[data-orbit-sync-mode="sound"]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-radius: 50%;
  background: rgba(114, 169, 204, 0.86);
  box-shadow: 0 0 12px rgba(114, 169, 204, 0.48);
}
.self-orbit-card.active::before {
  opacity: 0.14;
}
.self-orbit-card:hover {
  border-color: rgba(255, 255, 255, 0.74);
  box-shadow: 0 48px 124px rgba(0, 0, 0, 0.5),
    0 18px 48px rgba(83, 124, 158, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.self-orbit-card.active .self-orbit-card-shine {
  animation: selfOrbitShine 4.2s ease-in-out infinite;
}
.self-orbit-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.self-orbit-prev {
  left: 8px;
}
.self-orbit-next {
  right: 8px;
}
.self-orbit-nav:hover {
  transform: translateY(-50%) scale(1.08);
  border-color: rgba(255, 218, 178, 0.48);
  background: rgba(255, 210, 180, 0.14);
}
.self-orbit-meta {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(270px, auto) minmax(300px, auto) minmax(320px, auto);
  grid-template-areas: "counter sync audio play"
    "progress progress progress progress";
  align-items: center;
  gap: 14px 16px;
  color: rgba(255, 255, 255, 0.68);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.self-orbit-meta > span {
  grid-area: counter;
  justify-self: start;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  line-height: 1;
  backdrop-filter: blur(14px);
}
.self-orbit-play-mode,
.self-orbit-audio-mode,
.self-orbit-sync-mode {
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(360px, 100%);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(14px);
}
.self-orbit-sync-mode {
  grid-area: sync;
}
.self-orbit-audio-mode {
  grid-area: audio;
}
.self-orbit-play-mode {
  grid-area: play;
}
.self-orbit-sync-mode {
  width: min(300px, 100%);
}
.self-orbit-audio-mode {
  width: min(310px, 100%);
}
.self-orbit-play-mode button,
.self-orbit-audio-mode button,
.self-orbit-sync-mode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.self-orbit-play-mode button i,
.self-orbit-audio-mode button i,
.self-orbit-sync-mode button i {
  font-size: 12px;
}
.self-orbit-play-mode button.active,
.self-orbit-audio-mode button.active,
.self-orbit-sync-mode button.active {
  background: linear-gradient(135deg, rgba(255, 223, 184, 0.26), rgba(126, 205, 238, 0.18)),
    rgba(255, 255, 255, 0.12);
  color: rgba(255, 250, 244, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.16);
}
/* 节拍可视化指示器 */
.self-orbit-sync-mode button[data-orbit-sync-mode="sound"].active::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(114, 169, 204, 0.86);
  box-shadow: 0 0 12px rgba(114, 169, 204, 0.48);
  animation: selfOrbitBeatPulse 0.54s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.self-orbit-sync-mode button[data-orbit-sync-mode="sound"]:not(.active)::after {
  opacity: 0;
}
@keyframes selfOrbitBeatPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}
/* 节拍闪烁反馈 */
.self-orbit-sync-mode button.is-beat-flash::after {
  animation: selfOrbitBeatFlash 0.12s ease-out;
  background: rgba(255, 200, 100, 0.95);
  box-shadow: 0 0 16px rgba(255, 180, 100, 0.8);
}
@keyframes selfOrbitBeatFlash {
  0% {
    transform: scale(1.6);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}
.self-orbit-play-mode button:focus-visible,
.self-orbit-audio-mode button:focus-visible,
.self-orbit-sync-mode button:focus-visible {
  outline: 2px solid rgba(255, 220, 176, 0.8);
  outline-offset: 2px;
}
.self-orbit-progress {
  grid-area: progress;
  justify-self: stretch;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.self-orbit-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(255, 168, 198, 0.9), rgba(255, 224, 160, 0.9), rgba(124, 202, 236, 0.9));
  transition: transform 0.72s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="light"] .self-orbit-carousel,
:root[data-theme="light"] .self-orbit-carousel {
  border-color: rgba(27, 35, 54, 0.14);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.46), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.36)),
    radial-gradient(ellipse at 50% 78%, rgba(255, 221, 185, 0.18), transparent 44%),
    radial-gradient(ellipse at 18% 18%, rgba(255, 200, 216, 0.24), transparent 34%),
    radial-gradient(ellipse at 86% 14%, rgba(177, 216, 236, 0.26), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(237, 244, 250, 0.78));
  box-shadow: 0 30px 80px rgba(61, 71, 91, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
body[data-theme="light"] .self-orbit-carousel::after,
:root[data-theme="light"] .self-orbit-carousel::after {
  background: linear-gradient(90deg, transparent, rgba(104, 126, 150, 0.18), rgba(205, 155, 162, 0.2), transparent);
  opacity: 0.72;
}
body[data-theme="light"] .self-orbit-copy::before,
:root[data-theme="light"] .self-orbit-copy::before {
  border-color: rgba(75, 89, 116, 0.12);
  background: rgba(255, 255, 255, 0.58);
  color: rgba(83, 72, 100, 0.58);
  box-shadow: 0 12px 28px rgba(91, 109, 137, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
body[data-theme="light"] .self-orbit-shell::before,
:root[data-theme="light"] .self-orbit-shell::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.82), transparent 60%),
    radial-gradient(ellipse at 50% 54%, rgba(163, 196, 220, 0.22), transparent 68%),
    radial-gradient(ellipse at 46% 58%, rgba(228, 170, 162, 0.14), transparent 62%);
  opacity: 0.68;
}
body[data-theme="light"] .self-orbit-card,
:root[data-theme="light"] .self-orbit-card {
  border-color: rgba(255, 255, 255, calc(0.76 - var(--abs) * 0.13));
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2)),
    rgba(244, 249, 253, 0.4);
  box-shadow: 0 32px 76px rgba(65, 82, 112, calc(0.22 - var(--abs) * 0.035)),
    0 10px 28px rgba(191, 158, 151, calc(0.14 - var(--abs) * 0.025)),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
body[data-theme="light"] .self-orbit-card::before,
:root[data-theme="light"] .self-orbit-card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 32%, rgba(50, 58, 72, 0.12)),
    linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, 0.22), transparent 56%);
}
body[data-theme="light"] .self-orbit-card.active,
:root[data-theme="light"] .self-orbit-card.active {
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 44px 108px rgba(67, 83, 112, 0.28),
    0 18px 42px rgba(207, 166, 154, 0.16),
    0 0 0 1px rgba(112, 151, 190, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body[data-theme="light"] .self-orbit-meta,
:root[data-theme="light"] .self-orbit-meta {
  color: rgba(31, 39, 52, 0.68);
}
body[data-theme="light"] .self-orbit-meta > span,
:root[data-theme="light"] .self-orbit-meta > span {
  border-color: rgba(42, 55, 80, 0.1);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
body[data-theme="light"] .self-orbit-kicker,
:root[data-theme="light"] .self-orbit-kicker {
  color: rgba(81, 60, 116, 0.88);
  text-shadow: 0 18px 46px rgba(255, 255, 255, 0.54),
    0 0 20px rgba(117, 165, 205, 0.1);
}
body[data-theme="light"] .self-orbit-play-mode,
body[data-theme="light"] .self-orbit-audio-mode,
body[data-theme="light"] .self-orbit-sync-mode,
:root[data-theme="light"] .self-orbit-play-mode,
:root[data-theme="light"] .self-orbit-audio-mode,
:root[data-theme="light"] .self-orbit-sync-mode {
  border-color: rgba(42, 55, 80, 0.13);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgba(72, 91, 118, 0.12);
}
body[data-theme="light"] .self-orbit-play-mode button,
body[data-theme="light"] .self-orbit-audio-mode button,
body[data-theme="light"] .self-orbit-sync-mode button,
:root[data-theme="light"] .self-orbit-play-mode button,
:root[data-theme="light"] .self-orbit-audio-mode button,
:root[data-theme="light"] .self-orbit-sync-mode button {
  color: rgba(62, 72, 92, 0.58);
}
body[data-theme="light"] .self-orbit-play-mode button.active,
body[data-theme="light"] .self-orbit-audio-mode button.active,
body[data-theme="light"] .self-orbit-sync-mode button.active,
:root[data-theme="light"] .self-orbit-play-mode button.active,
:root[data-theme="light"] .self-orbit-audio-mode button.active,
:root[data-theme="light"] .self-orbit-sync-mode button.active {
  background: linear-gradient(135deg, rgba(255, 216, 178, 0.5), rgba(155, 204, 235, 0.36)),
    rgba(255, 255, 255, 0.82);
  color: rgba(38, 49, 70, 0.86);
  box-shadow: 0 10px 22px rgba(77, 98, 126, 0.14);
}
body[data-theme="light"] .self-orbit-carousel.is-sound-sync .self-orbit-card.active,
:root[data-theme="light"] .self-orbit-carousel.is-sound-sync .self-orbit-card.active {
  box-shadow: 0 34px 84px rgba(67, 83, 112, calc(0.2 + var(--orbit-energy) * 0.06 + var(--orbit-beat) * 0.06)),
    0 14px 34px rgba(207, 166, 154, 0.12),
    0 0 calc(14px + var(--orbit-energy) * 18px + var(--orbit-beat) * 18px) rgba(116, 172, 208, calc(0.06 + var(--orbit-energy) * 0.1 + var(--orbit-beat) * 0.08)),
    0 0 0 1px rgba(112, 151, 190, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body[data-theme="light"] .self-orbit-carousel.is-sound-sync .self-orbit-card,
:root[data-theme="light"] .self-orbit-carousel.is-sound-sync .self-orbit-card {
  box-shadow: 0 24px 62px rgba(65, 82, 112, calc(0.16 - var(--abs) * 0.022)),
    0 8px 22px rgba(191, 158, 151, calc(0.1 - var(--abs) * 0.018)),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
@keyframes selfOrbitShine {
  0%, 58% {
    opacity: 0;
    transform: translateX(-65%);
  }
  72% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(65%);
  }
}
@keyframes selfOrbitAura {
  0%, 100% {
    opacity: 0.28;
    transform: translateX(-1.4%) scale(1);
  }
  50% {
    opacity: 0.44;
    transform: translateX(1.4%) scale(1.025);
  }
}
@keyframes selfOrbitBreath {
  0%, 100% {
    opacity: 0.56;
    transform: translateX(-50%) scaleX(0.94);
  }
  50% {
    opacity: 0.86;
    transform: translateX(-50%) scaleX(1.04);
  }
}
@keyframes selfOrbitRailBreath {
  0%, 100% {
    opacity: 0.54;
    transform: scaleX(0.94);
  }
  50% {
    opacity: 0.82;
    transform: scaleX(1.03);
  }
}
@keyframes selfOrbitTrackDrift {
  0%,
  100% {
    opacity: 0.52;
    transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-1.4deg) scaleX(0.96);
  }
  50% {
    opacity: 0.82;
    transform: translate(-50%, -50%) rotateX(66deg) rotateZ(1.4deg) scaleX(1.02);
  }
}
/* ============ ALL SELF PORTRAITS 全屏影像墙 ============ */
.gallery-optimized-picture {
  display: contents;
}

.all-self-portraits-stage {
  position: relative;
  width: 100vw;
  min-height: 100svh;
  margin: clamp(34px, 6vw, 78px) calc(50% - 50vw) 0;
  padding: clamp(58px, 7.4vw, 106px) clamp(16px, 4vw, 64px) clamp(64px, 8vw, 112px);
  overflow: hidden;
  color: rgba(255, 245, 232, 0.92);
  background: radial-gradient(ellipse at 72% 0%, rgba(111, 154, 193, 0.18), transparent 38%),
    radial-gradient(ellipse at 18% 18%, rgba(151, 82, 112, 0.18), transparent 34%),
    linear-gradient(112deg, rgba(6, 9, 18, 0.96), rgba(33, 25, 37, 0.9) 46%, rgba(11, 23, 34, 0.94)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 86px);
  isolation: isolate;
}
.all-self-portraits-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%, rgba(255, 218, 160, 0.08) 68%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 92px);
  transform: skewY(-2.2deg);
  transform-origin: top left;
}
.all-self-portraits-stage::after {
  content: attr(data-count);
  position: absolute;
  right: clamp(18px, 4vw, 72px);
  top: clamp(52px, 7vw, 98px);
  z-index: -1;
  color: rgba(255, 255, 255, 0.035);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(140px, 19vw, 320px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 0.72;
  pointer-events: none;
}
.all-self-portraits-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto clamp(28px, 4vw, 56px);
  padding-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.all-self-portraits-head::before {
  content: "DARK ARCHIVE / SELF INDEX";
  position: absolute;
  left: 0;
  top: -24px;
  color: rgba(255, 232, 208, 0.46);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.all-self-portraits-head p {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(34px, 5.2vw, 78px);
  font-weight: 650;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
}
.all-self-portraits-title {
  display: grid;
  gap: 9px;
}
.all-self-portraits-title span {
  color: rgba(255, 237, 214, 0.64);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 750;
  letter-spacing: 0.18em;
  line-height: 1;
}
.all-self-portraits-actions {
  display: grid;
  justify-items: end;
  min-width: min(380px, 42vw);
}
.all-self-portraits-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(360px, 100%);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}
.all-self-portraits-mode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.all-self-portraits-mode button.active {
  background: linear-gradient(135deg, rgba(255, 223, 184, 0.28), rgba(126, 205, 238, 0.2)),
    rgba(255, 255, 255, 0.12);
  color: rgba(255, 250, 244, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 9px 20px rgba(0, 0, 0, 0.18);
}
.all-self-portraits-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: dense;
  max-width: 1680px;
  margin: 0 auto;
  perspective: 1500px;
}
.all-self-portrait-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transform-origin: 50% 0;
  grid-column: span 1;
  grid-row: span 1;
  transition: border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}
.all-self-portrait-tile.is-landscape {
  grid-column: span 2;
  grid-row: span 2;
}
.all-self-portrait-tile.is-panorama {
  grid-column: span 3;
  grid-row: span 2;
}
.all-self-portrait-tile.is-portrait {
  grid-row: span 2;
}
.all-self-portrait-tile.is-square {
  grid-column: span 1;
  grid-row: span 1;
}
.all-self-portrait-tile.is-cover {
  grid-column: span 4;
  grid-row: span 3;
}
.all-self-portrait-tile.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}
.all-self-portrait-tile.is-medium {
  grid-row: span 2;
}
.all-self-portrait-tile.is-cover,
.all-self-portrait-tile.is-featured {
  border-color: rgba(255, 233, 205, 0.22);
}
.all-self-portrait-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 320ms ease, filter 320ms ease;
}
.all-self-portrait-tile.is-landscape img,
.all-self-portrait-tile.is-panorama img {
  object-fit: contain;
}
.all-self-portrait-tile.is-cover img,
.all-self-portrait-tile.is-featured img,
.all-self-portrait-tile.is-medium img {
  object-fit: contain;
}
.all-self-portrait-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 26%, rgba(0, 0, 0, 0.36)),
    linear-gradient(115deg, transparent 28%, rgba(255, 229, 194, 0.11), transparent 58%);
  pointer-events: none;
}
.all-self-portrait-tile:hover {
  z-index: 3;
  filter: saturate(1.1);
}
:root[data-theme="light"] .all-self-portraits-stage,
:root[data-theme="light"] body.page-gallery .all-self-portraits-stage,
body[data-theme="light"] .all-self-portraits-stage {
  display: none !important;
}
body[data-theme="light"] .all-self-portraits-stage,
:root[data-theme="light"] .all-self-portraits-stage {
  color: rgba(38, 43, 56, 0.9);
  background: radial-gradient(ellipse at 18% 8%, rgba(255, 205, 214, 0.42), transparent 36%),
    radial-gradient(ellipse at 86% 14%, rgba(185, 217, 236, 0.42), transparent 38%),
    linear-gradient(112deg, rgba(255, 252, 246, 0.96), rgba(236, 244, 250, 0.9) 48%, rgba(255, 246, 239, 0.94)),
    repeating-linear-gradient(90deg, rgba(97, 115, 135, 0.08) 0 1px, transparent 1px 86px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 80px 120px rgba(255, 255, 255, 0.26);
}
body[data-theme="light"] .all-self-portraits-stage::before,
:root[data-theme="light"] .all-self-portraits-stage::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), transparent 24%, rgba(221, 166, 151, 0.1) 68%, transparent),
    repeating-linear-gradient(0deg, rgba(92, 112, 136, 0.055) 0 1px, transparent 1px 92px);
  opacity: 0.82;
}
body[data-theme="light"] .all-self-portraits-head p,
:root[data-theme="light"] .all-self-portraits-head p {
  color: rgba(42, 48, 62, 0.92);
  text-shadow: 0 18px 46px rgba(255, 255, 255, 0.62),
    0 8px 24px rgba(120, 139, 162, 0.12);
}
body[data-theme="light"] .all-self-portraits-title span,
:root[data-theme="light"] .all-self-portraits-title span {
  color: rgba(70, 82, 102, 0.54);
}
body[data-theme="light"] .all-self-portraits-mode,
:root[data-theme="light"] .all-self-portraits-mode {
  border-color: rgba(85, 102, 126, 0.14);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 18px 42px rgba(76, 92, 120, 0.12);
}
body[data-theme="light"] .all-self-portraits-mode button,
:root[data-theme="light"] .all-self-portraits-mode button {
  color: rgba(54, 65, 84, 0.62);
}
body[data-theme="light"] .all-self-portraits-mode button.active,
:root[data-theme="light"] .all-self-portraits-mode button.active {
  background: linear-gradient(135deg, rgba(255, 232, 202, 0.76), rgba(204, 228, 241, 0.72)),
    rgba(255, 255, 255, 0.86);
  color: rgba(37, 47, 66, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(91, 112, 142, 0.14);
}
body[data-theme="light"] .all-self-portrait-tile,
:root[data-theme="light"] .all-self-portrait-tile {
  border-color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(244, 248, 252, 0.46)),
    rgba(255, 255, 255, 0.58);
  box-shadow: 0 22px 52px rgba(66, 82, 108, 0.16),
    0 8px 24px rgba(210, 153, 165, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body[data-theme="light"] .all-self-portrait-tile img,
:root[data-theme="light"] .all-self-portrait-tile img {
  filter: brightness(1.045) contrast(1.035) saturate(1.055);
}
body[data-theme="light"] .all-self-portrait-tile.is-landscape img,
body[data-theme="light"] .all-self-portrait-tile.is-panorama img,
:root[data-theme="light"] .all-self-portrait-tile.is-landscape img,
:root[data-theme="light"] .all-self-portrait-tile.is-panorama img {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.72), transparent 62%),
    rgba(238, 244, 249, 0.72);
}
body[data-theme="light"] .all-self-portrait-tile::after,
:root[data-theme="light"] .all-self-portrait-tile::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 30%, rgba(55, 68, 88, 0.08)),
    linear-gradient(115deg, transparent 28%, rgba(255, 238, 216, 0.34), transparent 58%);
  opacity: 0.5;
}
body[data-theme="light"] .all-self-portrait-tile:hover,
:root[data-theme="light"] .all-self-portrait-tile:hover {
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 76px rgba(66, 82, 108, 0.2),
    0 0 38px rgba(255, 216, 188, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
@keyframes allSelfTileFall {
  0% {
    opacity: 0;
    transform: translate3d(var(--fall-drift), -150px, 120px) rotateZ(calc(var(--fall-rotate) * -1.8)) rotateX(22deg) scale(0.92);
  }
  48% {
    opacity: 1;
    transform: translate3d(calc(var(--fall-drift) * -0.34), 22px, 0) rotateZ(calc(var(--fall-rotate) * 0.72)) rotateX(-8deg) scale(1.035);
  }
  68% {
    opacity: 1;
    transform: translate3d(calc(var(--fall-drift) * 0.12), -10px, 0) rotateZ(calc(var(--fall-rotate) * -0.28)) rotateX(4deg) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateZ(0) rotateX(0);
  }
}
@keyframes allSelfTileHeartbeat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1);
  }
  18% {
    transform: translate3d(0, 0, 0) scale(1.026);
    filter: saturate(1.08);
  }
  32% {
    transform: translate3d(0, 0, 0) scale(0.992);
  }
  48% {
    transform: translate3d(0, 0, 0) scale(1.018);
  }
  64% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@media (max-width: 1180px) {
  .self-orbit-meta {
    grid-template-columns: auto minmax(88px, 1fr);
    grid-template-areas: "counter counter"
      "sync audio"
      "play play"
      "progress progress";
  }
  .self-orbit-play-mode,
  .self-orbit-audio-mode,
  .self-orbit-sync-mode {
    width: min(360px, 100%);
  }
}
@media (max-width: 760px) {
  .self-orbit-carousel {
    padding: 22px 16px 24px;
  }
  .self-orbit-shell {
    min-height: 360px;
  }
  .self-orbit-stage {
    inset: 0 18px;
  }
  .self-orbit-waveform {
    width: min(300px, 76vw);
    gap: 5px;
    height: 30px;
    margin-top: -8px;
  }
  .self-orbit-waveform span {
    width: 3px;
    height: calc(4px + var(--wave) * 18px + var(--orbit-beat) * 6px);
  }
  .self-orbit-card {
    --x-step: clamp(52px, 19vw, 78px);
    width: clamp(118px, 42vw, 172px);
    transform: translate(-50%, -50%)
      translateX(calc(var(--offset) * var(--x-step)))
      translateY(calc(var(--abs) * 8px))
      translateZ(calc(120px - var(--abs) * 46px))
      rotateY(calc(var(--offset) * -6deg))
      scale(calc(1 - var(--abs) * 0.065));
  }
  .self-orbit-carousel.is-sound-sync .self-orbit-card {
    --x-step: clamp(82px, 28vw, 128px);
    width: clamp(124px, 39vw, 176px);
    transform: translate(-50%, -50%)
      translateX(calc(var(--offset) * var(--x-step)))
      translateY(calc(var(--abs) * 7px + var(--orbit-energy) * -4px + var(--orbit-beat) * -5px))
      translateZ(calc(96px - var(--abs) * 32px))
      rotateY(calc(var(--offset) * -2.4deg))
      scale(calc(1 - var(--abs) * 0.052 + var(--orbit-energy) * 0.012 + var(--orbit-beat) * 0.014));
  }
  .self-orbit-card[style*="--abs:4"],
  .self-orbit-card[style*="--abs:3"] {
    opacity: 0;
    pointer-events: none;
  }
  .self-orbit-meta {
    grid-template-columns: 1fr;
    grid-template-areas: "counter"
      "sync"
      "audio"
      "play"
      "progress";
    gap: 10px;
  }
  .self-orbit-play-mode,
  .self-orbit-audio-mode,
  .self-orbit-sync-mode {
    width: min(320px, 100%);
  }
  .self-orbit-play-mode button,
  .self-orbit-audio-mode button,
  .self-orbit-sync-mode button {
    min-height: 36px;
    padding: 0 9px;
    font-size: 10px;
  }
  .self-orbit-copy {
    max-width: 100%;
  }
  .self-orbit-line {
    max-width: 18rem;
    font-size: 14px;
  }
  .all-self-portraits-stage {
    padding: 38px 14px 52px;
  }
  .all-self-portraits-head {
    display: block;
  }
  .all-self-portraits-actions {
    justify-items: start;
    min-width: 0;
    margin-top: 12px;
  }
  .all-self-portraits-actions > span {
    display: block;
    max-width: none;
    text-align: left;
  }
  .all-self-portraits-mode {
    width: min(320px, 100%);
  }
  .all-self-portraits-grid {
    gap: 10px;
  }
  .all-self-portrait-tile.is-cover {
    grid-column: span 2;
    grid-row: span 3;
  }
  .all-self-portrait-tile.is-featured,
  .all-self-portrait-tile.is-medium {
    grid-column: span 1;
    grid-row: span 2;
  }
  .all-self-portrait-tile.is-landscape,
  .all-self-portrait-tile.is-panorama {
    grid-column: span 2;
  }
  .all-self-portrait-tile.is-portrait {
    grid-row: span 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .self-orbit-card,
  .self-orbit-progress span,
  .self-orbit-carousel::before,
  .self-orbit-carousel::after,
  .self-orbit-stage::before,
  .all-self-portrait-tile {
    transition: none;
    animation: none;
  }
  .self-orbit-card.active .self-orbit-card-shine {
    animation: none;
  }
  .all-self-portrait-tile {
    opacity: 1;
    transform: none;
  }
}
/* Audio page final playing marker: subtle full-border flow only. */
body.page-audio main #audio-gallery .audio-card.is-playing,
body.page-audio main #audio-gallery .audio-card.is-current.is-playing,
body.page-audio main #audio-gallery .audio-card.is-active.is-playing {
  --voice-flow-angle: 0deg;
  position: relative;
  animation: audioPlayingCardLift 3.2s ease-in-out infinite !important;
  transform: translateY(-2px) !important;
}
body.page-audio main #audio-gallery .audio-card.is-playing::after,
body.page-audio main #audio-gallery .audio-card.is-current.is-playing::after,
body.page-audio main #audio-gallery .audio-card.is-active.is-playing::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 5 !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: conic-gradient(
      from var(--voice-flow-angle),
      rgba(125, 175, 232, 0) 0deg,
      rgba(125, 175, 232, 0.2) 62deg,
      rgba(226, 176, 104, 0.28) 108deg,
      rgba(213, 145, 188, 0.24) 154deg,
      rgba(125, 175, 232, 0) 222deg,
      rgba(125, 175, 232, 0) 360deg
    ) !important;
  box-shadow: none !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  animation: audioPlayingBorderFlow 4.2s linear infinite !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
}
@keyframes audioPlayingBorderFlow {
  to {
    --voice-flow-angle: 360deg;
  }
}
@keyframes audioPlayingCardLift {
  0%,
  100% {
    box-shadow: 0 26px 72px rgba(8, 10, 18, 0.3),
      0 0 0 1px rgba(125, 175, 232, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  }
  50% {
    box-shadow: 0 30px 82px rgba(8, 10, 18, 0.34),
      0 0 0 2px rgba(125, 175, 232, 0.14),
      0 0 22px rgba(213, 145, 188, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  }
}
/* Dark-theme voice cards use their own playing marker; light theme stays unchanged. */
@property --audio-dark-flow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
body.page-audio main #audio-gallery .audio-playing-border {
  display: none;
}
html:not([data-theme="light"]) body.page-audio main #audio-gallery .audio-card.is-playing,
html:not([data-theme="light"]) body.page-audio main #audio-gallery .audio-card.is-current.is-playing,
html:not([data-theme="light"]) body.page-audio main #audio-gallery .audio-card.is-active.is-playing,
body.page-audio:not([data-theme="light"]) main #audio-gallery .audio-card.is-playing,
body.page-audio:not([data-theme="light"]) main #audio-gallery .audio-card.is-current.is-playing,
body.page-audio:not([data-theme="light"]) main #audio-gallery .audio-card.is-active.is-playing {
  animation: audioDarkPlayingCardGlow 3.2s ease-in-out infinite !important;
  transform: translateY(-2px) !important;
}
html:not([data-theme="light"]) body.page-audio main #audio-gallery .audio-card.is-playing .audio-playing-border,
html:not([data-theme="light"]) body.page-audio main #audio-gallery .audio-card.is-current.is-playing .audio-playing-border,
html:not([data-theme="light"]) body.page-audio main #audio-gallery .audio-card.is-active.is-playing .audio-playing-border,
body.page-audio:not([data-theme="light"]) main #audio-gallery .audio-card.is-playing .audio-playing-border,
body.page-audio:not([data-theme="light"]) main #audio-gallery .audio-card.is-current.is-playing .audio-playing-border,
body.page-audio:not([data-theme="light"]) main #audio-gallery .audio-card.is-active.is-playing .audio-playing-border {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
      from var(--audio-dark-flow-angle),
      rgba(126, 189, 255, 0) 0deg,
      rgba(126, 189, 255, 0.34) 56deg,
      rgba(232, 185, 102, 0.42) 104deg,
      rgba(217, 150, 166, 0.36) 154deg,
      rgba(126, 189, 255, 0) 226deg,
      rgba(126, 189, 255, 0) 360deg
    );
  filter: drop-shadow(0 0 10px rgba(126, 189, 255, 0.16));
  pointer-events: none;
  animation: audioDarkBorderFlow 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
html[data-theme="light"] body.page-audio main #audio-gallery .audio-playing-border,
body.page-audio[data-theme="light"] main #audio-gallery .audio-playing-border {
  display: none !important;
}
@keyframes audioDarkBorderFlow {
  to {
    --audio-dark-flow-angle: 360deg;
  }
}
@keyframes audioDarkPlayingCardGlow {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 26px 72px rgba(8, 10, 18, 0.32),
      0 0 0 1px rgba(126, 189, 255, 0.16) !important;
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 30px 84px rgba(8, 10, 18, 0.36),
      0 0 0 2px rgba(126, 189, 255, 0.2),
      0 0 24px rgba(217, 150, 166, 0.16) !important;
  }
}
/* Works dark theme: lead-role badge matches the warm outlined pill style. */
html:not([data-theme="light"]) body.page-works main #works .work-card .lead-role-tag,
body.page-works:not([data-theme="light"]) main #works .work-card .lead-role-tag,
html:not([data-theme="light"]) #works .work-card .lead-role-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(232, 185, 102, 0.46) !important;
  border-radius: 999px !important;
  color: #f2c86d !important;
  background: linear-gradient(135deg, rgba(232, 185, 102, 0.18), rgba(232, 185, 102, 0.07)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.18),
    0 10px 26px rgba(232, 185, 102, 0.1) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
}
html:not([data-theme="light"]) body.page-works main #works .work-meta-separator,
body.page-works:not([data-theme="light"]) main #works .work-meta-separator,
html:not([data-theme="light"]) #works .work-meta-separator {
  color: rgba(255, 239, 200, 0.46) !important;
}
/* Gallery art-direction pass: darkroom archive, calmer hierarchy. */
body.page-gallery {
  --gallery-ink: #08090d;
  --gallery-charcoal: #11131a;
  --gallery-panel: rgba(13, 15, 21, 0.72);
  --gallery-line: rgba(236, 222, 198, 0.16);
  --gallery-line-strong: rgba(236, 222, 198, 0.28);
  --gallery-paper: rgba(249, 242, 230, 0.92);
  --gallery-muted: rgba(249, 242, 230, 0.58);
  --gallery-accent: #d7b06a;
  --gallery-blue: rgba(116, 155, 181, 0.22);
}
body.page-gallery #gallery.section {
  width: min(100% - clamp(28px, 6vw, 96px), 1440px);
  padding-top: clamp(112px, 12vw, 170px);
}
body.page-gallery #gallery .section-heading {
  max-width: 940px;
  margin-inline: 0 auto;
  text-align: left;
}
body.page-gallery #gallery .section-heading .eyebrow,
.self-orbit-kicker,
.all-self-portraits-title span {
  color: var(--gallery-accent) !important;
  letter-spacing: 0.22em !important;
}
body.page-gallery #gallery .section-heading h2,
.all-self-portraits-head p {
  color: var(--gallery-paper) !important;
  font-family: "Cormorant Garamond", "Times New Roman", "Noto Serif SC", serif;
  font-weight: 650;
  letter-spacing: 0 !important;
}
body.page-gallery #gallery .section-heading p {
  max-width: 44rem;
  color: var(--gallery-muted) !important;
}
body.page-gallery #gallery .gallery-tabs,
body.page-gallery #gallery .gallery-controls {
  border-color: var(--gallery-line) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(7, 8, 12, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 60px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) saturate(0.98) !important;
}
body.page-gallery #gallery .gallery-tab,
body.page-gallery #gallery .gallery-control-group,
body.page-gallery #gallery .gallery-expand-btn,
body.page-gallery #gallery .gallery-collapse-btn {
  border-color: rgba(236, 222, 198, 0.12) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}
body.page-gallery #gallery .gallery-tab.active,
body.page-gallery #gallery .gallery-control-group.active {
  border-color: var(--gallery-line-strong) !important;
  background: linear-gradient(135deg, rgba(215, 176, 106, 0.14), rgba(116, 155, 181, 0.08)),
    rgba(255, 255, 255, 0.045) !important;
}
body.page-gallery #gallery .gallery-category-desc {
  width: min(760px, 100%);
  margin: 18px auto 28px 0;
  color: rgba(249, 242, 230, 0.68) !important;
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.65;
  text-align: left;
}
body.page-gallery #gallery .gallery-month-group {
  margin-block: clamp(28px, 5vw, 74px);
  border-color: rgba(236, 222, 198, 0.13) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    rgba(8, 9, 13, 0.28) !important;
  box-shadow: none !important;
}
body.page-gallery #gallery .gallery-month-heading {
  border-color: rgba(236, 222, 198, 0.12) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.page-gallery #gallery .gallery-month-heading h3 {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0 !important;
}
body.page-gallery #gallery .gallery-date-heading {
  border-color: rgba(236, 222, 198, 0.11) !important;
  background: rgba(255, 255, 255, 0.025) !important;
}
.self-orbit-carousel {
  margin-top: clamp(60px, 8vw, 110px) !important;
  border-color: rgba(236, 222, 198, 0.16) !important;
  background: radial-gradient(ellipse at 50% 74%, rgba(215, 176, 106, 0.12), transparent 42%),
    radial-gradient(ellipse at 18% 16%, rgba(116, 155, 181, 0.13), transparent 36%),
    linear-gradient(145deg, rgba(6, 7, 11, 0.96), rgba(14, 16, 24, 0.94) 54%, rgba(7, 11, 16, 0.96)) !important;
  box-shadow: 0 42px 120px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.self-orbit-carousel::before {
  opacity: 0.18 !important;
}
.self-orbit-carousel::after {
  opacity: 0.34 !important;
}
.self-orbit-copy {
  max-width: 620px !important;
}
.self-orbit-line {
  color: rgba(249, 242, 230, 0.66) !important;
  font-size: clamp(15px, 1.22vw, 18px) !important;
}
.self-orbit-waveform {
  opacity: 0.52;
  filter: saturate(0.82);
}
.self-orbit-card {
  border-color: rgba(236, 222, 198, 0.14) !important;
  background: rgba(5, 6, 9, 0.74) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1),
    opacity 260ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease !important;
}
.self-orbit-card img {
  filter: brightness(0.96) contrast(1.035) saturate(0.98) !important;
}
.self-orbit-card.active {
  border-color: rgba(215, 176, 106, 0.44) !important;
  box-shadow: 0 32px 86px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(215, 176, 106, 0.14),
    0 0 54px rgba(215, 176, 106, 0.12) !important;
}
.self-orbit-card.active img {
  filter: brightness(1.025) contrast(1.045) saturate(1.02) !important;
}
.self-orbit-card-shine {
  opacity: 0.22 !important;
}
.self-orbit-play-mode,
.self-orbit-sync-mode,
.all-self-portraits-mode {
  border-color: rgba(236, 222, 198, 0.14) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}
.self-orbit-play-mode button.active,
.self-orbit-sync-mode button.active,
.all-self-portraits-mode button.active {
  background: linear-gradient(135deg, rgba(215, 176, 106, 0.2), rgba(116, 155, 181, 0.12)),
    rgba(255, 255, 255, 0.06) !important;
  color: rgba(249, 242, 230, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}
.all-self-portraits-stage,
:root[data-theme="light"] .all-self-portraits-stage,
:root[data-theme="light"] body.page-gallery .all-self-portraits-stage,
body[data-theme="light"] .all-self-portraits-stage {
  display: block !important;
  margin-top: clamp(72px, 9vw, 132px) !important;
  padding: clamp(52px, 6vw, 92px) clamp(18px, 4vw, 64px) clamp(64px, 7vw, 108px) !important;
  color: var(--gallery-paper) !important;
  background: radial-gradient(ellipse at 18% 10%, rgba(116, 155, 181, 0.12), transparent 34%),
    radial-gradient(ellipse at 86% 16%, rgba(215, 176, 106, 0.1), transparent 36%),
    linear-gradient(180deg, #08090d 0%, #0d0f15 48%, #08090d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(236, 222, 198, 0.08),
    inset 0 80px 160px rgba(255, 255, 255, 0.02) !important;
}
.all-self-portraits-stage::before {
  opacity: 0.34 !important;
}
.all-self-portraits-head {
  max-width: 1680px;
  margin-bottom: clamp(28px, 4vw, 56px) !important;
}
.all-self-portraits-grid {
  grid-template-columns: repeat(auto-fit, minmax(clamp(132px, 11.6vw, 198px), 1fr)) !important;
  grid-auto-rows: clamp(116px, 9.8vw, 168px) !important;
  gap: clamp(10px, 1vw, 16px) !important;
}
.all-self-portrait-tile {
  border-color: rgba(236, 222, 198, 0.12) !important;
  background: rgba(7, 8, 12, 0.72) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transform: translateY(18px) scale(0.982) !important;
}
.all-self-portraits-stage.is-falling .all-self-portrait-tile {
  animation: allSelfArchiveReveal 740ms cubic-bezier(.2,.8,.2,1) forwards !important;
  animation-delay: min(var(--fall-delay), 0.62s) !important;
}
.all-self-portrait-tile img {
  padding: clamp(3px, 0.42vw, 6px) !important;
  background: rgba(4, 5, 8, 0.72) !important;
  filter: brightness(0.98) contrast(1.035) saturate(0.96) !important;
  transform: scale(1.005) !important;
}
.all-self-portrait-tile::after {
  opacity: 0.2 !important;
}
.all-self-portrait-tile:hover {
  border-color: rgba(215, 176, 106, 0.42) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(215, 176, 106, 0.1) !important;
  transform: translateY(-3px) scale(1.018) !important;
}
.all-self-portrait-tile:hover img {
  filter: brightness(1.035) contrast(1.045) saturate(1.02) !important;
  transform: scale(1.045) !important;
}
@keyframes allSelfArchiveReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.982);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 760px) {
  body.page-gallery #gallery.section {
    width: min(100% - 28px, 1440px);
    padding-top: 96px;
  }
  body.page-gallery #gallery .gallery-tabs,
  body.page-gallery #gallery .gallery-controls {
    border-radius: 18px !important;
  }
  .all-self-portraits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 124px !important;
  }
}
/* FINAL dark ALL SELF PORTRAITS: keep the archive mood, reduce heaviness. */
:root[data-theme="light"] body.page-gallery .all-self-portraits-stage,
body[data-theme="light"].page-gallery .all-self-portraits-stage {
  display: none !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portraits-stage,
body[data-theme="dark"].page-gallery .all-self-portraits-stage,
body.page-gallery .all-self-portraits-stage {
  display: block !important;
  margin-top: clamp(44px, 6vw, 86px) !important;
  padding: clamp(42px, 5vw, 74px)
    clamp(18px, 4vw, 64px)
    clamp(58px, 7vw, 104px) !important;
  background: radial-gradient(ellipse at 16% 16%, rgba(95, 129, 154, 0.12), transparent 38%),
    radial-gradient(ellipse at 82% 6%, rgba(215, 176, 106, 0.13), transparent 34%),
    linear-gradient(112deg, rgba(8, 12, 17, 0.95), rgba(17, 18, 20, 0.9) 52%, rgba(29, 23, 19, 0.9)) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portraits-stage::before,
body[data-theme="dark"].page-gallery .all-self-portraits-stage::before,
body.page-gallery .all-self-portraits-stage::before {
  opacity: 0.24 !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portraits-stage::after,
body[data-theme="dark"].page-gallery .all-self-portraits-stage::after,
body.page-gallery .all-self-portraits-stage::after {
  opacity: 0.045 !important;
  top: clamp(34px, 5.2vw, 74px) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portraits-head,
body[data-theme="dark"].page-gallery .all-self-portraits-head,
body.page-gallery .all-self-portraits-head {
  margin-bottom: clamp(22px, 3vw, 42px) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portraits-head::before,
body[data-theme="dark"].page-gallery .all-self-portraits-head::before,
body.page-gallery .all-self-portraits-head::before {
  top: -18px !important;
  color: rgba(255, 232, 208, 0.5) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portraits-mode,
body[data-theme="dark"].page-gallery .all-self-portraits-mode,
body.page-gallery .all-self-portraits-mode {
  border-color: rgba(215, 176, 106, 0.2) !important;
  background: linear-gradient(135deg, rgba(215, 176, 106, 0.1), rgba(116, 155, 181, 0.05)),
    rgba(11, 10, 9, 0.46) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portraits-mode button,
body[data-theme="dark"].page-gallery .all-self-portraits-mode button,
body.page-gallery .all-self-portraits-mode button {
  color: rgba(244, 232, 214, 0.72) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portraits-mode button.active,
body[data-theme="dark"].page-gallery .all-self-portraits-mode button.active,
body.page-gallery .all-self-portraits-mode button.active {
  background: linear-gradient(135deg, rgba(215, 176, 106, 0.26), rgba(116, 155, 181, 0.14)),
    rgba(255, 255, 255, 0.075) !important;
  color: rgba(255, 250, 242, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 22px rgba(0, 0, 0, 0.2) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portrait-tile,
body[data-theme="dark"].page-gallery .all-self-portrait-tile,
body.page-gallery .all-self-portrait-tile {
  border-color: rgba(236, 222, 198, 0.16) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(7, 8, 12, 0.46) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portrait-tile img,
body[data-theme="dark"].page-gallery .all-self-portrait-tile img,
body.page-gallery .all-self-portrait-tile img {
  padding: clamp(2px, 0.28vw, 4px) !important;
  background: rgba(4, 5, 8, 0.28) !important;
  filter: brightness(1.01) contrast(1.035) saturate(1.01) !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portrait-tile::after,
body[data-theme="dark"].page-gallery .all-self-portrait-tile::after,
body.page-gallery .all-self-portrait-tile::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%, rgba(0, 0, 0, 0.12)),
    linear-gradient(115deg, transparent 30%, rgba(255, 226, 188, 0.08), transparent 58%) !important;
  opacity: 0.16 !important;
}
:root[data-theme="dark"] body.page-gallery .all-self-portrait-tile:hover,
body[data-theme="dark"].page-gallery .all-self-portrait-tile:hover,
body.page-gallery .all-self-portrait-tile:hover {
  border-color: rgba(215, 176, 106, 0.48) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(215, 176, 106, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
/* 自动播放控制按钮 */
.self-orbit-autoplay-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.self-orbit-autoplay-toggle:hover {
  background: rgba(255, 226, 190, 0.16);
  border-color: rgba(255, 226, 190, 0.3);
  color: rgba(255, 250, 244, 0.96);
  transform: translateY(-1px);
}
.self-orbit-autoplay-toggle:active {
  transform: translateY(0);
}
/* 浅色主题自动播放按钮 */
:root[data-theme="light"] .self-orbit-autoplay-toggle,
body[data-theme="light"] .self-orbit-autoplay-toggle {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(124, 145, 164, 0.2);
  color: rgba(58, 70, 90, 0.8);
}
:root[data-theme="light"] .self-orbit-autoplay-toggle:hover,
body[data-theme="light"] .self-orbit-autoplay-toggle:hover {
  background: rgba(128, 75, 57, 0.12);
  border-color: rgba(128, 75, 57, 0.25);
  color: rgba(54, 66, 86, 0.96);
}
/* 速度控制面板 */
.self-orbit-speed-control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.speed-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
}
.speed-value {
  min-width: 36px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 700;
}
/* 浅色主题速度控制 */
:root[data-theme="light"] .self-orbit-speed-control,
body[data-theme="light"] .self-orbit-speed-control {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(124, 145, 164, 0.2);
}
:root[data-theme="light"] .speed-label,
body[data-theme="light"] .speed-label {
  color: rgba(58, 70, 90, 0.7);
}
:root[data-theme="light"] .speed-value,
body[data-theme="light"] .speed-value {
  color: rgba(54, 66, 86, 0.9);
}
/* 响应式设计 */
@media (max-width: 768px) {
  .self-orbit-autoplay-toggle {
    padding: 6px 12px;
    font-size: 13px;
  }
  .self-orbit-speed-control {
    padding: 6px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .speed-label {
    font-size: 12px;
    width: 100%;
    text-align: center;
  }
  .speed-value {
    min-width: 32px;
    font-size: 13px;
  }
}
/* 无障碍设计 */
@media (prefers-reduced-motion: reduce) {
  .self-orbit-autoplay-toggle {
    transition: none;
  }
}
/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .self-orbit-autoplay-toggle {
    border-width: 2px;
  }
}
/* Audio gallery 2026-06-19 final layout repair. */
body.page-audio main #audio-gallery .audio-card {
  height: 294px !important;
  min-height: 294px !important;
  padding: 24px 26px 26px !important;
  box-sizing: border-box !important;
}
body.page-audio main #audio-gallery .audio-card-body {
  grid-template-columns: minmax(0, 1fr) 74px !important;
  grid-template-rows: auto auto minmax(2.8em, auto) auto 1fr !important;
  grid-template-areas: "title title"
    "artist artist"
    "summary summary"
    "meta meta"
    "tags play" !important;
  padding: 0 !important;
  column-gap: 20px !important;
  row-gap: 8px !important;
}
body.page-audio main #audio-gallery .audio-card-meta {
  grid-area: meta;
}
body.page-audio main #audio-gallery .audio-tags {
  grid-area: tags;
  margin: 0 !important;
  overflow: hidden !important;
}
body.page-audio main #audio-gallery .audio-tag.tone-rose {
  color: #8e2f62 !important;
  border-color: rgba(218, 118, 166, 0.36) !important;
  background: rgba(255, 226, 241, 0.92) !important;
}
body.page-audio main #audio-gallery .audio-tag.tone-gold {
  color: #77531a !important;
  border-color: rgba(222, 176, 86, 0.38) !important;
  background: rgba(255, 241, 208, 0.9) !important;
}
body.page-audio main #audio-gallery .audio-tag.tone-mint {
  color: #1d625b !important;
  border-color: rgba(102, 184, 169, 0.34) !important;
  background: rgba(219, 249, 244, 0.9) !important;
}

/* Quotes page final layout guard. Imported last on purpose. */
body.page-quotes #life .quote-panel {
  --quote-main-size: clamp(25px, 2.18vw, 31px);
  --quote-line-gap: 0.14em;
}
body.page-quotes #life #quoteText,
body.page-quotes #life .quote-panel.quote-is-short #quoteText,
body.page-quotes #life .quote-panel.quote-is-medium #quoteText,
body.page-quotes #life .quote-panel.quote-is-long #quoteText {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  inset-inline-start: 50% !important;
  inset-block-start: 50% !important;
  inset-inline-end: auto !important;
  inset-block-end: auto !important;
  z-index: 6 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  grid-area: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  gap: var(--quote-line-gap) !important;
  box-sizing: border-box !important;
  width: min(calc(100% - 160px), 980px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 clamp(80px, 8vw, 140px) !important;
  font-size: var(--quote-main-size) !important;
  line-height: 1.34 !important;
  text-align: center !important;
  text-align-last: center !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}
body.page-quotes #life #quoteText .quote-line {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  text-align: center !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}
body.page-quotes #life .quote-footer {
  position: absolute !important;
  left: calc(50% + 126px) !important;
  right: auto !important;
  bottom: clamp(36px, 4vw, 48px) !important;
  z-index: 60 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 142px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  text-align: left !important;
  pointer-events: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.page-quotes #life .quote-footer::before {
  content: "" !important;
  flex: 0 0 clamp(28px, 3.2vw, 46px) !important;
  width: clamp(28px, 3.2vw, 46px) !important;
  height: 1px !important;
  margin: 0 12px 0 0 !important;
  background: linear-gradient(90deg, rgba(255, 236, 194, 0.06), rgba(255, 236, 194, 0.52)) !important;
}
body.page-quotes #life #quoteFrom {
  display: inline-block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: max-content !important;
  color: rgba(255, 248, 236, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 248, 236, 0.88) !important;
  font-family: var(--quote-ui-font, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif) !important;
  font-size: clamp(14px, 1.06vw, 16px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}
[data-theme="light"] body.page-quotes #life .quote-footer::before,
body[data-theme="light"].page-quotes #life .quote-footer::before {
  background: linear-gradient(90deg, rgba(143, 103, 42, 0.04), rgba(143, 103, 42, 0.42)) !important;
}
[data-theme="light"] body.page-quotes #life #quoteFrom,
body[data-theme="light"].page-quotes #life #quoteFrom {
  color: #7f612c !important;
  -webkit-text-fill-color: #7f612c !important;
  text-shadow: none !important;
}
@media (max-width: 760px) {
  body.page-quotes #life .quote-panel {
    --quote-main-size: clamp(20px, 5.2vw, 25px);
  }
  body.page-quotes #life #quoteText .quote-line {
    white-space: normal !important;
  }
  body.page-quotes #life #quoteText,
  body.page-quotes #life .quote-panel.quote-is-short #quoteText,
  body.page-quotes #life .quote-panel.quote-is-medium #quoteText,
  body.page-quotes #life .quote-panel.quote-is-long #quoteText {
    width: min(calc(100% - 48px), 17em) !important;
    max-width: none !important;
    padding: 0 24px !important;
  }
  body.page-quotes #life .quote-footer {
    left: 50% !important;
    bottom: 48px !important;
    min-width: 96px !important;
    min-height: 28px !important;
    transform: translateX(54px) !important;
  }
  body.page-quotes #life .quote-footer::before {
    flex-basis: 22px !important;
    width: 22px !important;
    margin-right: 8px !important;
  }
  body.page-quotes #life #quoteFrom {
    font-size: 13px !important;
  }
}

/* Resonance map redesign: compact atlas controls and zoom-aware density. */
body.page-light #resonance .map-wrapper {
  min-height: 0 !important;
  padding: 0 !important;
}
body.page-light #resonance .map-panel {
  position: relative !important;
  border: 1px solid var(--atlas-panel-line) !important;
  box-shadow: none !important;
}
body.page-light #resonance .map-panel:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: none !important;
}
body.page-light #resonance .map-panel-header {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  gap: 12px !important;
}
body.page-light #resonance .map-panel-header .city-count {
  padding: 4px 10px !important;
  border: 1px solid rgba(26, 86, 160, 0.2) !important;
  font-size: 11px !important;
  border-radius: 20px !important;
  transition: all 0.25s ease !important;
}
body.page-light #resonance.is-libre-map .map-view::after {
  mix-blend-mode: normal !important;
}
/* 缩放控件优化 - 更大尺寸更好点击体验 */
body.page-light #resonance .maplibregl-ctrl-group {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 6px 20px rgba(18, 32, 48, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}
body.page-light #resonance .maplibregl-ctrl-group button {
  width: 32px !important;
  height: 32px !important;
  color: #183044 !important;
  background-color: transparent !important;
  transition: background 200ms ease, transform 200ms ease !important;
  /* 按钮之间增加分隔线 */
  border-bottom: 1px solid rgba(24, 38, 58, 0.08) !important;
}
body.page-light #resonance .maplibregl-ctrl-group button:last-child {
  border-bottom: none !important;
}
body.page-light #resonance .maplibregl-ctrl-group button:hover {
  background: rgba(52, 111, 156, 0.15) !important;
}
body.page-light #resonance .maplibregl-ctrl-group button:active {
  transform: scale(0.92) !important;
  background: rgba(52, 111, 156, 0.22) !important;
}
body.page-light #resonance .map-search-bar,
body.page-light #resonance .manual-coord-panel,
body.page-light #resonance .selected-location-info {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: var(--atlas-control-text) !important;
  background: var(--atlas-glass) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
/* 浅色主题搜索栏优化 */
body.page-light #resonance .map-search-bar {
  padding: 12px 14px !important;
  margin-top: 6px !important;
}
body.page-light #resonance .search-input-wrapper {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  transition: all 0.3s ease !important;
}
body.page-light #resonance .search-input-wrapper:focus-within {
  border-color: rgba(232,185,102,0.5) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 0 0 3px rgba(232,185,102,0.1),
    inset 0 1px 3px rgba(0,0,0,0.1) !important;
}
body.page-light #resonance .search-btn,
body.page-light #resonance .manual-btn,
body.page-light #resonance .set-coord-btn,
body.page-light #resonance .clear-btn {
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--atlas-control-text) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  min-height: 44px !important;
}
body.page-light #resonance .search-btn:hover,
body.page-light #resonance .manual-btn:hover,
body.page-light #resonance .set-coord-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
body.page-light #resonance .map-actions {
  padding: 14px !important;
  margin-top: 8px !important;
  gap: 12px !important;
}
body.page-light #resonance .selected-location-info {
  padding: 14px !important;
  margin: 8px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(232,185,102,0.14), rgba(232,185,102,0.06)) !important;
}
body.page-light #resonance .clear-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
body.page-light #resonance .location-info-header,
body.page-light #resonance .location-details p,
body.page-light #resonance .coord-input-group label,
body.page-light #resonance .stat-box-header,
body.page-light #resonance .stat-box-content {
  color: var(--atlas-soft-text) !important;
}
body.page-light #resonance .light-btn {
  color: #15100a !important;
  background: linear-gradient(135deg, #ffe3a3, #87c6e8 48%, #f0a6b4) !important;
}
body.page-light #resonance .map-tag {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}
body.page-light #resonance .fan-light-marker {
  width: var(--marker-size, 20px) !important;
  height: var(--marker-size, 20px) !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9) 0 14%, transparent 15%),
    linear-gradient(135deg, #d8f1f4, #87c6e8 56%, #dca6b2) !important;
  box-shadow: 0 3px 8px rgba(18, 38, 56, 0.16),
    0 0 0 4px rgba(135, 198, 232, 0.12) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease !important;
}
body.page-light #resonance .fan-light-marker[data-density="quiet"],
body.page-light #resonance .fan-light-marker[data-density="active"],
body.page-light #resonance .map-panel[data-zoom-level="wide"] .fan-light-marker:not(.is-selected) {
  color: transparent !important;
}
body.page-light #resonance .fan-light-marker[data-density="high"],
body.page-light #resonance .fan-light-marker[data-density="hot"],
body.page-light #resonance .map-panel[data-zoom-level="street"] .fan-light-marker {
  color: #102033 !important;
}
body.page-light #resonance .map-panel[data-zoom-level="wide"] .fan-light-marker:not(.is-selected) {
  opacity: 0.62 !important;
  transform: scale(0.82) !important;
}
body.page-light #resonance .map-panel[data-zoom-level="wide"] .fan-light-marker[data-density="quiet"] {
  opacity: 0.22 !important;
}
body.page-light #resonance .fan-light-marker.is-overlap,
body.page-light #resonance .fan-light-marker.is-owned {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92) 0 14%, transparent 15%),
    linear-gradient(135deg, #fff0bd, #d6a94e 58%, #e7a3af) !important;
}
body.page-light #resonance .her-footprint-marker,
body.page-light #resonance .latest-marker {
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(135deg, #f1d487, #a47422) !important;
  box-shadow: 0 4px 10px rgba(62, 44, 16, 0.2),
    0 0 0 5px rgba(214, 169, 78, 0.13) !important;
}
/* 浅色主题标记点选中状态优化 - 单一金色光晕更突出 */
body.page-light #resonance .fan-light-marker.is-selected,
body.page-light #resonance .her-footprint-marker.is-selected,
body.page-light #resonance .latest-marker.is-selected,
body.page-light #resonance .map-city.is-selected {
  opacity: 1 !important;
}
@keyframes marker-selected-pulse-light {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--gold, #d8a853),
      0 0 24px rgba(216, 169, 78, 0.6),
      0 0 48px rgba(216, 169, 78, 0.3) !important;
  }
  50% {
    box-shadow: 0 0 0 4px var(--gold, #d8a853),
      0 0 32px rgba(216, 169, 78, 0.7),
      0 0 56px rgba(216, 169, 78, 0.4) !important;
  }
}
/* 浅色主题标记点悬停效果 */
body.page-light #resonance .fan-light-marker:hover,
body.page-light #resonance .her-footprint-marker:hover,
body.page-light #resonance .latest-marker:hover {
  box-shadow: 0 6px 20px rgba(18, 38, 56, 0.2),
    0 0 16px rgba(135, 198, 232, 0.4) !important;
  z-index: 10 !important;
}
/* 浅色主题未点亮标记 */
body.page-light #resonance .fan-light-marker[data-density="quiet"] {
  border-style: dashed !important;
  opacity: 0.5 !important;
}
body.page-light #resonance .fan-light-marker[data-density="quiet"]:hover {
  opacity: 0.8 !important;
}
@media (min-width: 981px) {
  body.page-light #resonance {
    --resonance-desktop-map-height: clamp(300px, 35vh, 420px) !important;
    --resonance-desktop-panel-height: auto !important;
  }
  body.page-light #resonance .resonance-shell {
    border-radius: 12px !important;
  }
  body.page-light #resonance .map-wrapper {
    align-items: start !important;
  }
  body.page-light #resonance .fan-map-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.page-light #resonance #fanMap {
    grid-column: 1 !important;
    border-left: 0 !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar {
    position: absolute !important;
    z-index: 6 !important;
    top: 48px !important;
    left: 8px !important;
    right: 44px !important;
    border-radius: 8px !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar::before {
    padding: 0 6px !important;
    font-size: 10px !important;
  }
  body.page-light #resonance .fan-map-panel .search-input-wrapper input {
    font-size: 12px !important;
  }
  body.page-light #resonance .fan-map-panel .search-btn::before {
    font-family: "Font Awesome 6 Free" !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }
  body.page-light #resonance .fan-map-panel .manual-coord-panel,
  body.page-light #resonance .fan-map-panel .selected-location-info,
  body.page-light #resonance .fan-map-panel .map-actions {
    position: absolute !important;
    z-index: 6 !important;
    left: 8px !important;
    right: 8px !important;
    grid-column: auto !important;
    border-radius: 8px !important;
  }
  body.page-light #resonance .fan-map-panel .manual-coord-panel {
    top: 96px !important;
    padding: 8px !important;
  }
  body.page-light #resonance .fan-map-panel .selected-location-info {
    bottom: 58px !important;
    max-width: 310px !important;
    padding: 9px 10px !important;
  }
  body.page-light #resonance .fan-map-panel .map-actions {
    bottom: 8px !important;
  }
  body.page-light #resonance .fan-map-panel .light-message-input,
  body.page-light #resonance .fan-map-panel .light-btn {
    padding: 0 11px !important;
  }
  body.page-light #resonance .map-tags {
    z-index: 6 !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  body.page-light #resonance .resonance-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: 10px !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(17, 23, 34, 0.44) !important;
  }
  body.page-light #resonance .resonance-stats span {
    min-height: 42px !important;
    color: var(--atlas-soft-text) !important;
    background: transparent !important;
  }
  body.page-light #resonance .resonance-stats b {
    color: rgba(255, 226, 166, 0.94) !important;
    font-size: 22px !important;
  }
  body.page-light #resonance .resonance-stats b.increment {
    animation: number-bounce-light 0.4s ease;
  }
  @keyframes number-bounce-light {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.25);
      color: var(--gold);
      filter: drop-shadow(0 0 8px rgba(232, 185, 102, 0.6));
    }
    75% {
      transform: scale(0.92);
    }
  }
}
@media (max-width: 720px) {
  body.page-light #resonance .map-panel {
    border-radius: 10px !important;
  }
  body.page-light #resonance .map-search-bar,
  body.page-light #resonance .map-actions {
    padding: 8px !important;
  }
  body.page-light #resonance .map-tags {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: 44px !important;
    padding: 6px !important;
  }
}
/* ============ 平板断点 (720px - 980px) ============ */
@media (min-width: 720px) and (max-width: 980px) {
  body.page-light #resonance.resonance-section {
    width: min(100%, calc(100% - 32px)) !important;
    padding-top: 72px !important;
  }
  body.page-light #resonance {
    --resonance-desktop-map-height: clamp(260px, 32vh, 360px) !important;
  }
  body.page-light #resonance .resonance-shell {
    padding: 10px !important;
    border-radius: 10px !important;
  }
  body.page-light #resonance .map-wrapper {
    grid-template-columns: minmax(300px, 0.55fr) minmax(340px, 0.45fr) !important;
    gap: 10px !important;
  }
  body.page-light #resonance .map-panel {
    height: auto !important;
    min-height: 0 !important;
  }
  body.page-light #resonance .map-view,
  body.page-light #resonance .maplibregl-map,
  body.page-light #resonance .maplibregl-canvas-container,
  body.page-light #resonance .maplibregl-canvas {
    height: var(--resonance-desktop-map-height) !important;
  }
  /* 浅色主题广播消息样式 */
  body.page-light #resonance .broadcast-panel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  body.page-light #resonance .broadcast-list {
    gap: 8px;
  }
  body.page-light #resonance .broadcast-item {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 253, 248, 0.8) !important;
  }
  body.page-light #resonance .broadcast-item .b-icon {
    background: rgba(255, 255, 255, 0.08) !important;
  }
  body.page-light #resonance .broadcast-item.light .b-icon {
    background: rgba(232, 185, 102, 0.2) !important;
    color: var(--gold) !important;
  }
  body.page-light #resonance .broadcast-item.footprint .b-icon {
    background: rgba(135, 198, 232, 0.2) !important;
    color: #87c6e8 !important;
  }
  body.page-light #resonance .broadcast-item.same-city .b-icon {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
  }
  body.page-light #resonance .broadcast-item.tide .b-icon {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #a855f7 !important;
  }
  body.page-light #resonance .broadcast-item.repeat .b-icon {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
  }
  body.page-light #resonance .broadcast-item.notice .b-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 253, 248, 0.5) !important;
  }
  /* 浅色主题字符计数器 */
  body.page-light #resonance .char-counter {
    color: rgba(255, 253, 248, 0.4) !important;
  }
  body.page-light #resonance .char-counter.warning {
    color: #f59e0b !important;
  }
  body.page-light #resonance .char-counter.danger {
    color: #ef4444 !important;
  }
  body.page-light #resonance .map-panel-header {
    padding: 8px 12px !important;
    min-height: 44px !important;
    font-size: 12px !important;
  }
  body.page-light #resonance .resonance-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.page-light #resonance .stat-box {
    padding: 12px !important;
  }
}
/* ============ 超宽屏断点 (1400px+) ============ */
@media (min-width: 1400px) {
  body.page-light #resonance.resonance-section {
    width: min(1320px, calc(100% - 48px)) !important;
    padding-top: 100px !important;
  }
  body.page-light #resonance .resonance-shell {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  body.page-light #resonance .map-wrapper {
    gap: 16px !important;
  }
  body.page-light #resonance {
    --resonance-desktop-map-height: clamp(360px, 38vh, 480px) !important;
  }
}
/* ============ 地图主题切换过渡动画 ============ */
body.page-light #resonance .map-view,
body.page-light #resonance .maplibregl-canvas {
  transition: filter 0.5s ease, background 0.5s ease !important;
}
/* 浅色主题地图底图优化 - 不再偏灰暗 */
/* Final map workspace: keep controls outside the map tiles. */
body.page-light #resonance .map-container {
  overflow: visible !important;
}
body.page-light #resonance .map-panel {
  isolation: isolate !important;
}
body.page-light #resonance .map-panel-header {
  position: relative !important;
  z-index: 4 !important;
}
body.page-light #resonance .map-panel-header::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 199, 125, 0.42), rgba(143, 208, 236, 0.34), transparent);
  pointer-events: none;
}
body.page-light #resonance .map-view {
  overflow: hidden !important;
  border-radius: 0 !important;
}
body.page-light #resonance .her-map-panel #herMap {
  grid-row: 2 !important;
  min-height: 300px !important;
}
body.page-light #resonance .map-tags {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  align-items: center !important;
  gap: 8px !important;
  max-height: none !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-width: 1px 0 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(12, 18, 29, 0.94), rgba(28, 34, 48, 0.82)) !important;
  scrollbar-width: thin;
}
body.page-light #resonance .map-tag {
  border-radius: 999px !important;
  transition: transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease !important;
}
body.page-light #resonance .map-tag:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(232, 199, 125, 0.42) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}
body.page-light #resonance .fan-map-panel {
  align-items: stretch !important;
  gap: 0 !important;
}
body.page-light #resonance .fan-map-panel .map-panel-header {
  grid-column: 1 / -1 !important;
}
body.page-light #resonance .fan-map-panel #fanMap {
  grid-column: 1 !important;
  height: var(--atlas-map-height) !important;
  min-height: var(--atlas-map-height) !important;
  max-height: none !important;
}
body.page-light #resonance .fan-map-panel .map-search-bar,
body.page-light #resonance .fan-map-panel .manual-coord-panel,
body.page-light #resonance .fan-map-panel .selected-location-info,
body.page-light #resonance .fan-map-panel .map-actions,
body.page-light #resonance .fan-map-panel .map-stats,
body.page-light #resonance .fan-map-panel .resonance-notice {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  grid-column: 2 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  background: var(--atlas-rail) !important;
  box-shadow: none !important;
}
body.page-light #resonance .fan-map-panel .map-search-bar {
  display: grid !important;
  gap: 8px !important;
}
body.page-light #resonance .fan-map-panel .search-input-wrapper {
  min-height: 42px !important;
  padding: 0 12px !important;
}
body.page-light #resonance .fan-map-panel .search-btn,
body.page-light #resonance .fan-map-panel .manual-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  font-size: 0 !important;
}
body.page-light #resonance .fan-map-panel .search-btn::before {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
}
body.page-light #resonance .fan-map-panel .manual-btn i {
  font-size: 15px !important;
}
body.page-light #resonance .fan-map-panel .manual-coord-panel {
  display: none !important;
  padding: 12px !important;
}
body.page-light #resonance .fan-map-panel .manual-coord-panel.is-open {
  display: block !important;
  animation: atlasPanelReveal 0.28s ease both;
}
body.page-light #resonance .fan-map-panel .coord-inputs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
body.page-light #resonance .fan-map-panel .set-coord-btn {
  grid-column: 1 / -1 !important;
}
body.page-light #resonance .fan-map-panel .selected-location-info[style*="display:none"],
body.page-light #resonance .fan-map-panel .selected-location-info[style*="display: none"] {
  opacity: 0.48 !important;
}
body.page-light #resonance .fan-map-panel .selected-location-info[style*="display:none"] .location-details,
body.page-light #resonance .fan-map-panel .selected-location-info[style*="display: none"] .location-details {
  visibility: hidden !important;
}
body.page-light #resonance .fan-map-panel .map-actions {
  display: grid !important;
  gap: 10px !important;
}
body.page-light #resonance .fan-map-panel .message-input-wrapper {
  min-width: 0 !important;
}
body.page-light #resonance .fan-map-panel .light-message-input,
body.page-light #resonance .fan-map-panel .light-btn {
  min-height: 42px !important;
  height: 42px !important;
}
body.page-light #resonance .fan-map-panel .stat-box {
  padding: 13px 14px !important;
  border-radius: 0 !important;
}
body.page-light #resonance .fan-map-panel .stat-box:last-child {
  border-bottom: 0 !important;
}
body.page-light #resonance .fan-map-panel .resonance-notice {
  grid-row: 7 !important;
  padding: 12px 14px !important;
}
body.page-light #resonance .search-input-wrapper,
body.page-light #resonance .message-input-wrapper,
body.page-light #resonance .coord-input-group input {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.075) !important;
}
body.page-light #resonance .light-btn:not(:disabled) {
  transform-origin: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 10px 28px rgba(232, 199, 125, 0.16) !important;
}
body.page-light #resonance .light-btn:not(:disabled):hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.06) brightness(1.03) !important;
}
@keyframes atlasPanelReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 981px) {
  body.page-light #resonance .map-wrapper {
    gap: 16px !important;
  }
  body.page-light #resonance .map-panel {
    height: auto !important;
    min-height: 0 !important;
  }
  body.page-light #resonance .map-view,
  body.page-light #resonance .maplibregl-map,
  body.page-light #resonance .maplibregl-canvas-container,
  body.page-light #resonance .maplibregl-canvas {
    height: var(--atlas-map-height) !important;
    min-height: var(--atlas-map-height) !important;
    max-height: none !important;
  }
}
@media (min-width: 721px) and (max-width: 1180px) {
  body.page-light #resonance {
    --atlas-map-height: clamp(320px, 38vh, 410px);
  }
  body.page-light #resonance .map-wrapper {
    grid-template-columns: 1fr !important;
  }
  body.page-light #resonance .fan-map-panel {
    grid-template-columns: minmax(360px, 1fr) minmax(260px, 300px) !important;
  }
}
@media (max-width: 720px) {
  body.page-light #resonance {
    --atlas-map-height: clamp(320px, 68vw, 400px);
  }
  body.page-light #resonance .map-wrapper {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.page-light #resonance .fan-map-panel {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto auto auto !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar,
  body.page-light #resonance .fan-map-panel .manual-coord-panel,
  body.page-light #resonance .fan-map-panel .selected-location-info,
  body.page-light #resonance .fan-map-panel .map-actions,
  body.page-light #resonance .fan-map-panel .map-stats,
  body.page-light #resonance .fan-map-panel .resonance-notice,
  body.page-light #resonance .fan-map-panel #fanMap {
    grid-column: 1 !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar {
    grid-row: 2 !important;
  }
  body.page-light #resonance .fan-map-panel .manual-coord-panel {
    grid-row: 3 !important;
  }
  body.page-light #resonance .fan-map-panel #fanMap {
    grid-row: 4 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--atlas-line) !important;
    border-bottom: 1px solid var(--atlas-line) !important;
  }
  body.page-light #resonance .fan-map-panel .selected-location-info {
    grid-row: 5 !important;
    min-height: 104px !important;
  }
  body.page-light #resonance .fan-map-panel .map-actions {
    grid-row: 6 !important;
    grid-template-columns: 1fr !important;
  }
  body.page-light #resonance .fan-map-panel .map-stats {
    grid-row: 7 !important;
  }
  body.page-light #resonance .map-tags {
    min-height: 54px !important;
  }
}
/* Final correction: atlas below-map controls, full city lists, and star markers. */
body.page-light #resonance {
  --atlas-left: minmax(420px, 0.98fr);
  --atlas-right: minmax(520px, 1.02fr);
  --atlas-gap: 16px;
  --atlas-map-height: clamp(360px, 40vh, 460px);
}
body.page-light #resonance .resonance-toolbar,
body.page-light #resonance .map-wrapper {
  display: grid !important;
  grid-template-columns: var(--atlas-left) var(--atlas-right) !important;
  gap: var(--atlas-gap) !important;
}
body.page-light #resonance .resonance-toolbar {
  align-items: stretch !important;
}
body.page-light #resonance .resonance-login-state,
body.page-light #resonance .resonance-actions {
  min-height: 62px !important;
  margin: 0 !important;
}
body.page-light #resonance .resonance-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
body.page-light #resonance .map-panel {
  align-self: start !important;
  height: auto !important;
}
body.page-light #resonance .map-view,
body.page-light #resonance .maplibregl-map,
body.page-light #resonance .maplibregl-canvas-container,
body.page-light #resonance .maplibregl-canvas {
  max-height: var(--atlas-map-height) !important;
}
body.page-light #resonance .fan-map-panel .map-panel-header,
body.page-light #resonance .fan-map-panel #fanMap,
body.page-light #resonance .fan-map-panel .map-search-bar,
body.page-light #resonance .fan-map-panel .manual-coord-panel,
body.page-light #resonance .fan-map-panel .selected-location-info,
body.page-light #resonance .fan-map-panel .map-actions,
body.page-light #resonance .fan-map-panel .map-stats,
body.page-light #resonance .fan-map-panel .resonance-notice {
  grid-column: 1 !important;
}
body.page-light #resonance .fan-map-panel .map-panel-header {
  grid-row: 1 !important;
}
body.page-light #resonance .fan-map-panel #fanMap {
  border-right: 0 !important;
  border-bottom: 1px solid var(--atlas-line) !important;
}
body.page-light #resonance .fan-map-panel .map-search-bar,
body.page-light #resonance .fan-map-panel .manual-coord-panel,
body.page-light #resonance .fan-map-panel .selected-location-info,
body.page-light #resonance .fan-map-panel .map-actions,
body.page-light #resonance .fan-map-panel .map-stats {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  background: rgba(18, 25, 38, 0.84) !important;
}
body.page-light #resonance .fan-map-panel .map-search-bar {
  padding: 12px !important;
}
body.page-light #resonance .fan-map-panel .manual-coord-panel:not(.is-open) {
  display: none !important;
}
body.page-light #resonance .fan-map-panel .selected-location-info {
  grid-row: 5 !important;
  min-height: auto !important;
  padding: 12px !important;
}
body.page-light #resonance .fan-map-panel .selected-location-info[style*="display:none"],
body.page-light #resonance .fan-map-panel .selected-location-info[style*="display: none"] {
  display: none !important;
}
body.page-light #resonance .fan-map-panel .selected-location-info:not([style*="display:none"]):not([style*="display: none"]) {
  display: grid !important;
}
body.page-light #resonance .fan-map-panel .map-actions {
  grid-row: 6 !important;
  grid-template-columns: minmax(0, 1fr) minmax(132px, max-content) !important;
  padding: 12px !important;
}
body.page-light #resonance .fan-map-panel .map-stats {
  grid-row: 7 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.74fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
body.page-light #resonance .fan-map-panel .stat-box {
  min-height: 92px !important;
  border-width: 0 1px 0 0 !important;
}
body.page-light #resonance .fan-map-panel .stat-box:last-child {
  border-right: 0 !important;
}
body.page-light #resonance .map-tags,
body.page-light #resonance .stat-box-content {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-auto-flow: unset !important;
  grid-auto-columns: unset !important;
  gap: 9px !important;
  overflow: visible !important;
  max-height: none !important;
  scrollbar-width: none !important;
}
body.page-light #resonance .map-tags::-webkit-scrollbar,
body.page-light #resonance .stat-box-content::-webkit-scrollbar {
  display: none !important;
}
body.page-light #resonance .map-tags {
  min-height: 72px !important;
  padding: 12px !important;
}
body.page-light #resonance .map-tag {
  min-height: 34px !important;
  min-width: 0 !important;
  padding: 0 13px !important;
}
body.page-light #resonance .her-map-panel .map-tag i {
  color: var(--atlas-accent) !important;
}
body.page-light #resonance .her-footprint-marker,
body.page-light #resonance .latest-marker,
body.page-light #resonance .fan-light-marker {
  display: inline-grid !important;
  place-items: center !important;
  color: var(--atlas-accent) !important;
  font-size: 0 !important;
  filter: drop-shadow(0 6px 14px rgba(146, 101, 25, 0.28)) !important;
}
body.page-light #resonance .fan-light-marker {
  filter: drop-shadow(0 6px 14px rgba(50, 137, 196, 0.32)) !important;
}
body.page-light #resonance .her-footprint-marker i,
body.page-light #resonance .latest-marker i,
body.page-light #resonance .fan-light-marker i {
  transform: none !important;
}
body.page-light #resonance .fan-light-marker span {
  position: absolute;
  right: -8px;
  top: -8px;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(12, 20, 32, 0.86);
  color: #eaf7ff;
  font-size: 10px;
  font-weight: 800;
}
body.page-light #resonance .fan-light-marker.is-overlap,
body.page-light #resonance .fan-light-marker.is-owned {
  color: var(--atlas-blue) !important;
}
body.page-light #resonance .map-city.is-selected {
  color: var(--atlas-accent) !important;
  transform: scale(1.14) !important;
  box-shadow: none !important;
  animation: atlasStarBreathe 1.9s ease-in-out infinite !important;
}
body.page-light #resonance .fan-light-marker.is-selected {
  color: var(--atlas-blue) !important;
}
body.page-light #resonance .latest-marker .marker-pulse {
  inset: -8px !important;
  border-radius: 50% !important;
  background: rgba(232, 199, 125, 0.22) !important;
}
@keyframes atlasStarBreathe {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(232, 199, 125, 0.28));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(143, 208, 236, 0.48));
  }
}
body.page-light #resonance .city-letter-panel {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: radial-gradient(circle at 4% 0%, rgba(232, 199, 125, 0.12), transparent 26%),
    linear-gradient(135deg, rgba(13, 20, 33, 0.88), rgba(28, 34, 49, 0.72)) !important;
}
body.page-light #resonance .city-letter-copy,
body.page-light #resonance .city-letter-form,
body.page-light #resonance .city-letter-list {
  min-width: 0 !important;
}
body.page-light #resonance .city-letter-copy h3 {
  color: var(--atlas-ink) !important;
}
body.page-light #resonance .city-letter-copy p {
  margin: 0 !important;
  color: var(--atlas-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}
body.page-light #resonance .city-letter-copy .tide-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  border: 1px solid rgba(143, 208, 236, 0.18) !important;
  border-radius: 10px !important;
}
body.page-light #resonance .city-letter-copy .tide-note i {
  margin-top: 3px !important;
  color: var(--atlas-blue) !important;
}
body.page-light #resonance .city-letter-form label {
  display: grid !important;
  gap: 6px !important;
  color: var(--atlas-muted) !important;
  font-size: 12px !important;
}
body.page-light #resonance .city-letter-form select,
body.page-light #resonance .city-letter-form input {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: var(--atlas-ink) !important;
  padding: 0 12px !important;
}
body.page-light #resonance .city-letter-submit {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #f4d792, #8fd0ec) !important;
  color: #111a26 !important;
  font-weight: 900 !important;
}
body.page-light #resonance .city-letter-item {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--atlas-ink) !important;
  text-align: left !important;
}
body.page-light #resonance .city-letter-item span {
  color: var(--atlas-accent) !important;
  font-weight: 800 !important;
}
body.page-light #resonance .city-letter-item em {
  overflow: hidden !important;
  color: var(--atlas-muted) !important;
  font-style: normal !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media (max-width: 1180px) {
  body.page-light #resonance {
    --atlas-left: minmax(0, 1fr);
    --atlas-right: minmax(0, 1fr);
  }
  body.page-light #resonance .resonance-toolbar,
  body.page-light #resonance .map-wrapper,
  body.page-light #resonance .city-letter-panel {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 720px) {
  body.page-light #resonance .resonance-toolbar {
    gap: 10px !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar,
  body.page-light #resonance .fan-map-panel .map-actions,
  body.page-light #resonance .fan-map-panel .map-stats,
  body.page-light #resonance .city-letter-form {
    grid-template-columns: 1fr !important;
  }
  body.page-light #resonance .city-letter-panel {
    padding: 12px !important;
  }
}
/* Final resonance polish: precise stars, quieter surfaces, and readable letters. */
body.page-light #resonance .map-panel,
body.page-light #resonance .fan-map-panel .map-search-bar,
body.page-light #resonance .fan-map-panel .selected-location-info,
body.page-light #resonance .fan-map-panel .map-actions,
body.page-light #resonance .fan-map-panel .map-stats,
body.page-light #resonance .city-letter-panel,
body.page-light #resonance .resonance-stats,
body.page-light #resonance .broadcast-panel {
  box-shadow: none !important;
}
[data-theme="light"] body.page-light #resonance,
body[data-theme="light"].page-light #resonance {
  --atlas-ink: rgba(28, 39, 55, 0.92);
  --atlas-muted: rgba(55, 70, 90, 0.72);
  --atlas-line: rgba(64, 92, 124, 0.14);
}
[data-theme="light"] body.page-light #resonance .resonance-shell,
body[data-theme="light"].page-light #resonance .resonance-shell {
  border-color: rgba(64, 92, 124, 0.14) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(226, 240, 251, 0.58)),
    radial-gradient(circle at 8% 8%, rgba(255, 202, 218, 0.22), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(120, 207, 255, 0.18), transparent 34%) !important;
  box-shadow: 0 18px 50px rgba(82, 112, 146, 0.14) !important;
}
[data-theme="light"] body.page-light #resonance .map-panel,
body[data-theme="light"].page-light #resonance .map-panel,
[data-theme="light"] body.page-light #resonance .city-letter-panel,
body[data-theme="light"].page-light #resonance .city-letter-panel {
  border-color: rgba(64, 92, 124, 0.14) !important;
  background: rgba(255, 255, 255, 0.66) !important;
}
body.page-light #resonance .her-footprint-marker,
body.page-light #resonance .latest-marker,
body.page-light #resonance .fan-light-marker {
  position: absolute !important;
  width: var(--marker-size, 30px) !important;
  height: var(--marker-size, 30px) !important;
  min-width: var(--marker-size, 30px) !important;
  min-height: var(--marker-size, 30px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.page-light #resonance .her-footprint-marker i,
body.page-light #resonance .latest-marker i,
body.page-light #resonance .fan-light-marker i {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  color: currentColor !important;
  font-size: calc(var(--marker-size, 30px) * 0.92) !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 3px rgba(14, 23, 34, 0.22)) drop-shadow(0 0 12px color-mix(in srgb, currentColor 42%, transparent)) !important;
  text-shadow: none !important;
}
body.page-light #resonance .fan-light-marker {
  color: var(--atlas-blue) !important;
}
body.page-light #resonance .her-footprint-marker,
body.page-light #resonance .latest-marker {
  color: var(--atlas-accent) !important;
}
body.page-light #resonance .fan-light-marker span {
  display: none !important;
}
body.page-light #resonance .fan-light-marker.is-selected,
body.page-light #resonance .her-footprint-marker.is-selected,
body.page-light #resonance .latest-marker.is-selected {
  animation: atlasStarBreathe 2.1s ease-in-out infinite !important;
}
body.page-light #resonance .city-letter-copy .tide-note {
  margin-top: 14px !important;
  padding: 13px 14px !important;
  border-color: rgba(120, 207, 255, 0.24) !important;
  background: linear-gradient(135deg, rgba(120, 207, 255, 0.14), rgba(241, 203, 113, 0.08)) !important;
  color: var(--atlas-muted) !important;
}
body.page-light #resonance .city-letter-form select,
body.page-light #resonance .city-letter-form input,
body.page-light #resonance .search-input-wrapper input,
body.page-light #resonance .light-message-input {
  color: var(--atlas-ink) !important;
  text-shadow: none !important;
}
body.page-light #resonance .city-letter-form select option {
  background: #f8fbff !important;
  color: #172336 !important;
}
body.page-light #resonance .map-toast {
  border: 1px solid rgba(120, 207, 255, 0.22) !important;
  background: rgba(17, 24, 38, 0.9) !important;
  color: rgba(246, 250, 255, 0.94) !important;
  box-shadow: 0 12px 30px rgba(8, 14, 24, 0.2) !important;
}
@media (max-width: 1180px) {
  body.page-light #resonance .city-letter-panel {
    grid-template-columns: 1fr !important;
  }
}
/* Resonance atlas final theme pass: quieter dark glass and fully adapted light surfaces. */
html:not([data-theme="light"]) body.page-light #resonance,
body.page-light:not([data-theme="light"]) #resonance {
  --atlas-accent: #e8c77d;
  --atlas-surface: rgba(18, 25, 37, 0.58);
  --atlas-surface-strong: rgba(14, 20, 32, 0.72);
}
html:not([data-theme="light"]) body.page-light #resonance .resonance-shell,
body.page-light:not([data-theme="light"]) #resonance .resonance-shell {
  border-color: rgba(255, 255, 255, 0.13) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .map-panel,
html:not([data-theme="light"]) body.page-light #resonance .city-letter-panel,
html:not([data-theme="light"]) body.page-light #resonance .resonance-stats,
html:not([data-theme="light"]) body.page-light #resonance .broadcast-panel,
body.page-light:not([data-theme="light"]) #resonance .map-panel,
body.page-light:not([data-theme="light"]) #resonance .city-letter-panel,
body.page-light:not([data-theme="light"]) #resonance .resonance-stats,
body.page-light:not([data-theme="light"]) #resonance .broadcast-panel {
  border-color: var(--atlas-line) !important;
  box-shadow: 0 8px 24px rgba(5, 10, 18, 0.08) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .map-panel-header,
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .map-search-bar,
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .manual-coord-panel,
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .selected-location-info,
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .map-actions,
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .map-stats,
body.page-light:not([data-theme="light"]) #resonance .map-panel-header,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .map-search-bar,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .manual-coord-panel,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .selected-location-info,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .map-actions,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .map-stats {
  border-color: var(--atlas-line) !important;
  background: var(--atlas-surface-strong) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.page-light #resonance,
body[data-theme="light"].page-light #resonance {
  --atlas-blue: #2778a8;
  --atlas-accent: #9a6822;
  --atlas-line: rgba(81, 103, 132, 0.18);
  --atlas-surface: rgba(255, 255, 255, 0.78);
  --atlas-surface-strong: rgba(247, 251, 255, 0.88);
}
html[data-theme="light"] body.page-light #resonance .map-panel-header,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .map-search-bar,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .manual-coord-panel,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .selected-location-info,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .map-actions,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .map-stats,
body[data-theme="light"].page-light #resonance .map-panel-header,
body[data-theme="light"].page-light #resonance .fan-map-panel .map-search-bar,
body[data-theme="light"].page-light #resonance .fan-map-panel .manual-coord-panel,
body[data-theme="light"].page-light #resonance .fan-map-panel .selected-location-info,
body[data-theme="light"].page-light #resonance .fan-map-panel .map-actions,
body[data-theme="light"].page-light #resonance .fan-map-panel .map-stats {
  border-color: rgba(81, 103, 132, 0.16) !important;
  background: var(--atlas-surface-strong) !important;
  color: var(--atlas-ink) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.page-light #resonance .map-view,
body[data-theme="light"].page-light #resonance .map-view {
  filter: saturate(0.9) contrast(0.98) brightness(1.02) !important;
}
html[data-theme="light"] body.page-light #resonance .map-search-bar,
html[data-theme="light"] body.page-light #resonance .manual-coord-panel,
html[data-theme="light"] body.page-light #resonance .selected-location-info,
html[data-theme="light"] body.page-light #resonance .map-actions,
html[data-theme="light"] body.page-light #resonance .map-tags,
body[data-theme="light"].page-light #resonance .map-search-bar,
body[data-theme="light"].page-light #resonance .manual-coord-panel,
body[data-theme="light"].page-light #resonance .selected-location-info,
body[data-theme="light"].page-light #resonance .map-actions,
body[data-theme="light"].page-light #resonance .map-tags {
  color: var(--atlas-ink) !important;
  background: rgba(250, 253, 255, 0.84) !important;
}
html[data-theme="light"] body.page-light #resonance .search-input-wrapper,
html[data-theme="light"] body.page-light #resonance .message-input-wrapper,
html[data-theme="light"] body.page-light #resonance .city-letter-form select,
html[data-theme="light"] body.page-light #resonance .city-letter-form input,
body[data-theme="light"].page-light #resonance .search-input-wrapper,
body[data-theme="light"].page-light #resonance .message-input-wrapper,
body[data-theme="light"].page-light #resonance .city-letter-form select,
body[data-theme="light"].page-light #resonance .city-letter-form input {
  border-color: rgba(75, 100, 130, 0.18) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="light"] body.page-light #resonance .search-input-wrapper input::placeholder,
html[data-theme="light"] body.page-light #resonance .light-message-input::placeholder,
body[data-theme="light"].page-light #resonance .search-input-wrapper input::placeholder,
body[data-theme="light"].page-light #resonance .light-message-input::placeholder {
  color: rgba(55, 72, 95, 0.5) !important;
}
html[data-theme="light"] body.page-light #resonance .location-info-header,
html[data-theme="light"] body.page-light #resonance .location-details p,
html[data-theme="light"] body.page-light #resonance .coord-input-group label,
html[data-theme="light"] body.page-light #resonance .stat-box-header,
html[data-theme="light"] body.page-light #resonance .stat-box-content,
html[data-theme="light"] body.page-light #resonance .city-letter-copy p,
body[data-theme="light"].page-light #resonance .location-info-header,
body[data-theme="light"].page-light #resonance .location-details p,
body[data-theme="light"].page-light #resonance .coord-input-group label,
body[data-theme="light"].page-light #resonance .stat-box-header,
body[data-theme="light"].page-light #resonance .stat-box-content,
body[data-theme="light"].page-light #resonance .city-letter-copy p {
  color: var(--atlas-muted) !important;
}
body.page-light #resonance .map-panel,
body.page-light #resonance .city-letter-panel,
body.page-light #resonance .broadcast-panel {
  transition: border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease !important;
}
body.page-light #resonance .map-tag,
body.page-light #resonance .city-letter-item,
body.page-light #resonance .search-btn,
body.page-light #resonance .manual-btn,
body.page-light #resonance .set-coord-btn,
body.page-light #resonance .clear-btn,
body.page-light #resonance .city-letter-submit {
  transition: transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    filter 180ms ease !important;
}
body.page-light #resonance .map-tag:hover,
body.page-light #resonance .city-letter-item:hover,
body.page-light #resonance .search-btn:hover,
body.page-light #resonance .manual-btn:hover,
body.page-light #resonance .set-coord-btn:hover,
body.page-light #resonance .city-letter-submit:hover {
  transform: translateY(-1px) !important;
}
body.page-light #resonance .map-tag:focus-visible,
body.page-light #resonance .city-letter-item:focus-visible,
body.page-light #resonance .search-btn:focus-visible,
body.page-light #resonance .manual-btn:focus-visible,
body.page-light #resonance .set-coord-btn:focus-visible,
body.page-light #resonance .clear-btn:focus-visible,
body.page-light #resonance .city-letter-submit:focus-visible,
body.page-light #resonance .light-btn:focus-visible {
  outline: 2px solid var(--atlas-blue) !important;
  outline-offset: 3px !important;
}
@media (prefers-reduced-motion: reduce) {
  body.page-light #resonance *,
  body.page-light #resonance *::before,
  body.page-light #resonance *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* Good atlas surface match: softer porcelain cards with clear map hierarchy. */
body.page-light #resonance {
  --atlas-porcelain: rgba(255, 255, 255, 0.82);
  --atlas-porcelain-strong: rgba(251, 254, 255, 0.9);
  --atlas-porcelain-soft: rgba(243, 249, 252, 0.74);
  --atlas-warm-wash: rgba(216, 173, 88, 0.1);
  --atlas-cool-wash: rgba(142, 213, 207, 0.12);
  --atlas-rose-wash: rgba(236, 156, 155, 0.08);
  --atlas-map-border: rgba(44, 97, 143, 0.14);
  --atlas-map-shadow: rgba(72, 103, 132, 0.1);
}
html[data-theme="light"] body.page-light #resonance .map-panel,
html[data-theme="light"] body.page-light #resonance .city-letter-panel,
html[data-theme="light"] body.page-light #resonance .broadcast-panel,
html[data-theme="light"] body.page-light #resonance .resonance-stats,
body[data-theme="light"].page-light #resonance .map-panel,
body[data-theme="light"].page-light #resonance .city-letter-panel,
body[data-theme="light"].page-light #resonance .broadcast-panel,
body[data-theme="light"].page-light #resonance .resonance-stats {
  border-color: var(--atlas-map-border) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(245, 250, 252, 0.5)),
    rgba(250, 253, 255, 0.68) !important;
  box-shadow: 0 10px 28px var(--atlas-map-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}
html[data-theme="light"] body.page-light #resonance .map-panel-header,
body[data-theme="light"].page-light #resonance .map-panel-header {
  border-bottom-color: rgba(44, 97, 143, 0.13) !important;
  background: linear-gradient(90deg, rgba(255, 250, 238, 0.76), rgba(239, 249, 251, 0.72)),
    rgba(255, 255, 255, 0.58) !important;
  color: var(--atlas-ink) !important;
}
html[data-theme="light"] body.page-light #resonance .her-map-panel .map-panel-header,
body[data-theme="light"].page-light #resonance .her-map-panel .map-panel-header {
  background: linear-gradient(135deg, rgba(216, 173, 88, 0.16), rgba(255, 255, 255, 0.58)),
    rgba(255, 251, 241, 0.7) !important;
}
html[data-theme="light"] body.page-light #resonance .fan-map-panel .map-panel-header,
body[data-theme="light"].page-light #resonance .fan-map-panel .map-panel-header {
  background: linear-gradient(135deg, rgba(142, 213, 207, 0.17), rgba(245, 193, 204, 0.12)),
    rgba(247, 253, 254, 0.68) !important;
}
html[data-theme="light"] body.page-light #resonance .map-search-bar,
html[data-theme="light"] body.page-light #resonance .manual-coord-panel,
html[data-theme="light"] body.page-light #resonance .selected-location-info,
html[data-theme="light"] body.page-light #resonance .map-actions,
html[data-theme="light"] body.page-light #resonance .map-tags,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .map-stats,
body[data-theme="light"].page-light #resonance .map-search-bar,
body[data-theme="light"].page-light #resonance .manual-coord-panel,
body[data-theme="light"].page-light #resonance .selected-location-info,
body[data-theme="light"].page-light #resonance .map-actions,
body[data-theme="light"].page-light #resonance .map-tags,
body[data-theme="light"].page-light #resonance .fan-map-panel .map-stats {
  border-color: rgba(44, 97, 143, 0.12) !important;
  background: linear-gradient(90deg, rgba(255, 244, 218, 0.18), rgba(142, 213, 207, 0.11)),
    var(--atlas-porcelain-soft) !important;
  color: var(--atlas-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
}
html[data-theme="light"] body.page-light #resonance .map-tag,
html[data-theme="light"] body.page-light #resonance .city-letter-item,
body[data-theme="light"].page-light #resonance .map-tag,
body[data-theme="light"].page-light #resonance .city-letter-item {
  border-color: rgba(44, 97, 143, 0.13) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(241, 249, 252, 0.58)) !important;
  box-shadow: 0 4px 12px rgba(72, 103, 132, 0.06) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .map-panel,
html:not([data-theme="light"]) body.page-light #resonance .city-letter-panel,
html:not([data-theme="light"]) body.page-light #resonance .broadcast-panel,
html:not([data-theme="light"]) body.page-light #resonance .resonance-stats,
body.page-light:not([data-theme="light"]) #resonance .map-panel,
body.page-light:not([data-theme="light"]) #resonance .city-letter-panel,
body.page-light:not([data-theme="light"]) #resonance .broadcast-panel,
body.page-light:not([data-theme="light"]) #resonance .resonance-stats {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(17, 23, 40, 0.72) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-login-state,
html[data-theme="light"] body.page-light #resonance .resonance-actions,
body[data-theme="light"].page-light #resonance .resonance-login-state,
body[data-theme="light"].page-light #resonance .resonance-actions {
  border-color: rgba(44, 97, 143, 0.11) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(239, 249, 251, 0.52)),
    rgba(250, 253, 255, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}
html[data-theme="light"] body.page-light #resonance .fan-map-panel .map-search-bar,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .manual-coord-panel,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .selected-location-info,
html[data-theme="light"] body.page-light #resonance .fan-map-panel .map-actions,
body[data-theme="light"].page-light #resonance .fan-map-panel .map-search-bar,  
body[data-theme="light"].page-light #resonance .fan-map-panel .manual-coord-panel,
body[data-theme="light"].page-light #resonance .fan-map-panel .selected-location-info,
body[data-theme="light"].page-light #resonance .fan-map-panel .map-actions {
  border-color: rgba(44, 97, 143, 0.12) !important;
  background: linear-gradient(90deg, rgba(255, 244, 218, 0.18), rgba(142, 213, 207, 0.11)),
    var(--atlas-porcelain-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
}
body.page-light #resonance .resonance-modal {
  background: rgba(248, 251, 255, 0.58) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.page-light #resonance .resonance-dialog {
  background: var(--light-glass-bg-strong) !important;
  border-color: rgba(255, 255, 255, 0.88) !important;
}
/* Final atlas composition: airy glass layout with unobstructed maps. */
body.page-light {
  background: radial-gradient(circle at 8% 12%, rgba(238, 169, 178, 0.2), transparent 28rem),
    radial-gradient(circle at 92% 4%, rgba(121, 184, 222, 0.24), transparent 30rem),
    linear-gradient(135deg, #f5f8fb 0%, #edf6f5 42%, #f8f4ef 100%) !important;
}
html:not([data-theme="light"]) body.page-light,
body.page-light:not([data-theme="light"]) {
  background: radial-gradient(circle at 7% 8%, rgba(185, 111, 122, 0.26), transparent 30rem),
    radial-gradient(circle at 94% 4%, rgba(76, 130, 174, 0.24), transparent 34rem),
    linear-gradient(135deg, #161927 0%, #202b35 52%, #2c2931 100%) !important;
}
body.page-light #resonance {
  --atlas-teal: #4b9f9a;
  --atlas-gold: #b7832f;
  --atlas-rose: #c87878;
  --atlas-glass-panel: rgba(255, 255, 255, 0.68);
  --atlas-glass-strong: rgba(252, 254, 255, 0.84);
  --atlas-glass-soft: rgba(244, 250, 252, 0.72);
  --atlas-shadow: rgba(63, 92, 118, 0.14);
}
html:not([data-theme="light"]) body.page-light #resonance,
body.page-light:not([data-theme="light"]) #resonance {
  --atlas-blue: #91c9e7;
  --atlas-teal: #9ad7d1;
  --atlas-gold: #e2bd74;
  --atlas-rose: #df9aa0;
  --atlas-ink: #f3f7fb;
  --atlas-muted: rgba(230, 238, 244, 0.68);
  --atlas-line: rgba(255, 255, 255, 0.16);
  --atlas-glass-panel: rgba(18, 25, 37, 0.66);
  --atlas-glass-strong: rgba(23, 31, 45, 0.78);
  --atlas-glass-soft: rgba(27, 36, 52, 0.68);
  --atlas-shadow: rgba(2, 8, 16, 0.24);
}
body.page-light #resonance.resonance-section {
  max-width: none !important;
}
body.page-light #resonance .section-heading {
  max-width: 920px !important;
  margin-inline: auto !important;
}
body.page-light #resonance .resonance-shell {
  border: 1px solid var(--atlas-line) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .resonance-shell,
body.page-light:not([data-theme="light"]) #resonance .resonance-shell {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    linear-gradient(120deg, rgba(226, 189, 116, 0.12), transparent 38%, rgba(154, 215, 209, 0.1) 74%, rgba(223, 154, 160, 0.08)),
    var(--atlas-glass-panel) !important;
  box-shadow: 0 24px 70px rgba(2, 8, 16, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.page-light #resonance .resonance-toolbar {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
body.page-light #resonance .resonance-login-state,
body.page-light #resonance .resonance-actions,
body.page-light #resonance .map-panel,
body.page-light #resonance .city-letter-panel,
body.page-light #resonance .broadcast-panel,
body.page-light #resonance .resonance-stats {
  border: 1px solid var(--atlas-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.16)),
    var(--atlas-glass-panel) !important;
  box-shadow: 0 12px 30px var(--atlas-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  color: var(--atlas-ink) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .resonance-login-state,
html:not([data-theme="light"]) body.page-light #resonance .resonance-actions,
html:not([data-theme="light"]) body.page-light #resonance .map-panel,
html:not([data-theme="light"]) body.page-light #resonance .city-letter-panel,
html:not([data-theme="light"]) body.page-light #resonance .broadcast-panel,
html:not([data-theme="light"]) body.page-light #resonance .resonance-stats,
body.page-light:not([data-theme="light"]) #resonance .resonance-login-state,
body.page-light:not([data-theme="light"]) #resonance .resonance-actions,
body.page-light:not([data-theme="light"]) #resonance .map-panel,
body.page-light:not([data-theme="light"]) #resonance .city-letter-panel,
body.page-light:not([data-theme="light"]) #resonance .broadcast-panel,
body.page-light:not([data-theme="light"]) #resonance .resonance-stats {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    var(--atlas-glass-panel) !important;
  box-shadow: 0 14px 38px rgba(2, 8, 16, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.page-light #resonance .map-wrapper {
  display: grid !important;
}
body.page-light #resonance .map-panel {
  min-width: 0 !important;
}
body.page-light #resonance .map-panel:hover {
  transform: none !important;
}
body.page-light #resonance .map-panel-header {
  min-height: 54px !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--atlas-line) !important;
}
body.page-light #resonance .fan-map-panel .map-panel-header {
  background: linear-gradient(90deg, rgba(225, 248, 245, 0.56), rgba(255, 240, 242, 0.46)),
    var(--atlas-glass-strong) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .map-panel-header,
body.page-light:not([data-theme="light"]) #resonance .map-panel-header {
  background: linear-gradient(90deg, rgba(226, 189, 116, 0.12), rgba(154, 215, 209, 0.08)),
    var(--atlas-glass-strong) !important;
}
body.page-light #resonance .map-panel-header .header-content {
  min-width: 0 !important;
}
body.page-light #resonance .map-panel-header .header-content i {
  color: var(--atlas-gold) !important;
}
body.page-light #resonance .city-count {
  flex-shrink: 0 !important;
  border-color: var(--atlas-line) !important;
  color: var(--atlas-blue) !important;
  background: rgba(255, 255, 255, 0.58) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .city-count,
body.page-light:not([data-theme="light"]) #resonance .city-count {
  background: rgba(255, 255, 255, 0.1) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .her-map-panel .city-count,
body.page-light:not([data-theme="light"]) #resonance .her-map-panel .city-count {
  color: var(--atlas-accent) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .city-count,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .city-count {
  color: var(--atlas-blue) !important;
}
body.page-light #resonance .map-view,
body.page-light #resonance .maplibregl-map,
body.page-light #resonance .maplibregl-canvas-container,
body.page-light #resonance .maplibregl-canvas {
  height: var(--resonance-desktop-map-height) !important;
  min-height: var(--resonance-desktop-map-height) !important;
}
body.page-light #resonance .map-view {
  border: 0 !important;
}
html:not([data-theme="light"]) body.page-light #resonance .map-view,
body.page-light:not([data-theme="light"]) #resonance .map-view {
  background: #e9f1f2 !important;
  filter: saturate(0.86) contrast(0.96) brightness(0.98) !important;
}
body.page-light #resonance.is-libre-map .map-view::after {
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(19, 45, 64, 0.05)),
    radial-gradient(circle at 72% 14%, rgba(226, 189, 116, 0.11), transparent 24%),
    radial-gradient(circle at 18% 82%, rgba(75, 159, 154, 0.1), transparent 26%) !important;
}
body.page-light #resonance .maplibregl-ctrl-bottom-right {
  bottom: 10px !important;
  right: 10px !important;
}
body.page-light #resonance .maplibregl-ctrl-top-right {
  top: 10px !important;
  right: 10px !important;
}
body.page-light #resonance .map-tags,
body.page-light #resonance .map-search-bar,
body.page-light #resonance .manual-coord-panel,
body.page-light #resonance .selected-location-info,
body.page-light #resonance .map-actions,
body.page-light #resonance .fan-map-panel .map-stats {
  border: 1px solid var(--atlas-line) !important;
  color: var(--atlas-ink) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.14)),
    var(--atlas-glass-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .map-tags,
html:not([data-theme="light"]) body.page-light #resonance .map-search-bar,
html:not([data-theme="light"]) body.page-light #resonance .manual-coord-panel,
html:not([data-theme="light"]) body.page-light #resonance .selected-location-info,
html:not([data-theme="light"]) body.page-light #resonance .map-actions,
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .map-stats,
body.page-light:not([data-theme="light"]) #resonance .map-tags,
body.page-light:not([data-theme="light"]) #resonance .map-search-bar,
body.page-light:not([data-theme="light"]) #resonance .manual-coord-panel,
body.page-light:not([data-theme="light"]) #resonance .selected-location-info,
body.page-light:not([data-theme="light"]) #resonance .map-actions,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .map-stats {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    var(--atlas-glass-soft) !important;
}
body.page-light #resonance .search-input-wrapper,
body.page-light #resonance .message-input-wrapper,
body.page-light #resonance .coord-input-group input,
body.page-light #resonance .light-message-input,
body.page-light #resonance .city-letter-form select,
body.page-light #resonance .city-letter-form input {
  min-width: 0 !important;
  border: 1px solid var(--atlas-line) !important;
  border-radius: 8px !important;
  color: var(--atlas-ink) !important;
  background: rgba(255, 255, 255, 0.68) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .search-input-wrapper,
html:not([data-theme="light"]) body.page-light #resonance .message-input-wrapper,
html:not([data-theme="light"]) body.page-light #resonance .coord-input-group input,
html:not([data-theme="light"]) body.page-light #resonance .light-message-input,
html:not([data-theme="light"]) body.page-light #resonance .city-letter-form select,
html:not([data-theme="light"]) body.page-light #resonance .city-letter-form input,
body.page-light:not([data-theme="light"]) #resonance .search-input-wrapper,
body.page-light:not([data-theme="light"]) #resonance .message-input-wrapper,
body.page-light:not([data-theme="light"]) #resonance .coord-input-group input,
body.page-light:not([data-theme="light"]) #resonance .light-message-input,
body.page-light:not([data-theme="light"]) #resonance .city-letter-form select,
body.page-light:not([data-theme="light"]) #resonance .city-letter-form input {
  background: rgba(255, 255, 255, 0.08) !important;
}
body.page-light #resonance .search-input-wrapper input,
body.page-light #resonance .light-message-input,
body.page-light #resonance .coord-input-group input,
body.page-light #resonance .city-letter-form select,
body.page-light #resonance .city-letter-form input {
  color: var(--atlas-ink) !important;
}
body.page-light #resonance .search-input-wrapper input::placeholder,
body.page-light #resonance .light-message-input::placeholder,
body.page-light #resonance .city-letter-form input::placeholder {
  color: var(--atlas-muted) !important;
}
body.page-light #resonance .search-btn,
body.page-light #resonance .manual-btn,
body.page-light #resonance .set-coord-btn,
body.page-light #resonance .clear-btn,
body.page-light #resonance .city-letter-submit {
  border: 1px solid var(--atlas-line) !important;
  border-radius: 8px !important;
  color: var(--atlas-ink) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .search-btn,
html:not([data-theme="light"]) body.page-light #resonance .manual-btn,
html:not([data-theme="light"]) body.page-light #resonance .set-coord-btn,
html:not([data-theme="light"]) body.page-light #resonance .clear-btn,
html:not([data-theme="light"]) body.page-light #resonance .city-letter-submit,
body.page-light:not([data-theme="light"]) #resonance .search-btn,
body.page-light:not([data-theme="light"]) #resonance .manual-btn,
body.page-light:not([data-theme="light"]) #resonance .set-coord-btn,
body.page-light:not([data-theme="light"]) #resonance .clear-btn,
body.page-light:not([data-theme="light"]) #resonance .city-letter-submit {
  background: rgba(255, 255, 255, 0.1) !important;
}
body.page-light #resonance .light-btn,
body.page-light #resonance .resonance-btn.primary,
body.page-light #resonance .city-letter-submit {
  border: 0 !important;
  color: #17202c !important;
  background: linear-gradient(135deg, #f5d792 0%, #8fd4d0 52%, #eba2a6 100%) !important;
  box-shadow: 0 10px 22px rgba(77, 120, 136, 0.14) !important;
}
body.page-light #resonance .map-tag,
body.page-light #resonance .city-letter-item {
  border: 1px solid var(--atlas-line) !important;
  border-radius: 999px !important;
  color: var(--atlas-ink) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.page-light #resonance .map-tag,
html:not([data-theme="light"]) body.page-light #resonance .city-letter-item,
body.page-light:not([data-theme="light"]) #resonance .map-tag,
body.page-light:not([data-theme="light"]) #resonance .city-letter-item {
  background: rgba(255, 255, 255, 0.09) !important;
}
body.page-light #resonance .stat-box-header,
body.page-light #resonance .stat-box-content,
body.page-light #resonance .location-info-header,
body.page-light #resonance .location-details p,
body.page-light #resonance .city-letter-copy p,
body.page-light #resonance .coord-input-group label {
  color: var(--atlas-muted) !important;
}
body.page-light #resonance .map-stats {
  overflow: hidden !important;
}
body.page-light #resonance .stat-box + .stat-box {
  border-left-color: var(--atlas-line) !important;
}
body.page-light #resonance .city-letter-list {
  grid-column: 1 / -1 !important;
}
@media (min-width: 981px) {
  body.page-light #resonance.resonance-section {
    width: min(1520px, calc(100% - 64px)) !important;
    padding-top: 100px !important;
  }
  body.page-light #resonance .resonance-shell {
    padding: 18px !important;
  }
  body.page-light #resonance .map-wrapper {
    grid-template-columns: minmax(460px, 0.96fr) minmax(520px, 1.04fr) !important;
  }
  body.page-light #resonance .her-map-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, var(--resonance-desktop-map-height)) auto !important;
  }
  body.page-light #resonance .fan-map-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, var(--resonance-desktop-map-height)) auto auto auto auto !important;
  }
  body.page-light #resonance #fanMap {
    grid-row: 2 !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar,
  body.page-light #resonance .fan-map-panel .manual-coord-panel,
  body.page-light #resonance .fan-map-panel .selected-location-info,
  body.page-light #resonance .fan-map-panel .map-actions {
    position: static !important;
    z-index: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    max-width: none !important;
    margin: 10px 12px 0 !important;
    border-radius: 8px !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 86px 46px !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar::before {
    display: none !important;
  }
  body.page-light #resonance .fan-map-panel .search-input-wrapper {
    min-height: 42px !important;
    padding: 0 12px !important;
  }
  body.page-light #resonance .fan-map-panel .search-btn,
  body.page-light #resonance .fan-map-panel .manual-btn {
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  body.page-light #resonance .fan-map-panel .search-btn::before {
    content: none !important;
  }
  body.page-light #resonance .fan-map-panel .map-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 130px !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  body.page-light #resonance .fan-map-panel .light-message-input,
  body.page-light #resonance .fan-map-panel .light-btn {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13px !important;
  }
  body.page-light #resonance .fan-map-panel .map-stats {
    margin: 10px 12px 12px !important;
  }
  body.page-light #resonance .map-tags {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 12px !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
  }
  body.page-light #resonance .map-tag {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 980px) {
  body.page-light #resonance {
    --resonance-desktop-map-height: clamp(340px, 58vh, 500px) !important;
  }
  body.page-light #resonance.resonance-section {
    padding-top: 86px !important;
  }
  body.page-light #resonance .resonance-shell {
    padding: 12px !important;
  }
  body.page-light #resonance .resonance-toolbar,
  body.page-light #resonance .map-wrapper,
  body.page-light #resonance .city-letter-panel,
  body.page-light #resonance .city-letter-form,
  body.page-light #resonance .city-letter-list {
    grid-template-columns: 1fr !important;
  }
  body.page-light #resonance .resonance-actions {
    justify-content: stretch !important;
  }
  body.page-light #resonance .resonance-btn.primary,
  body.page-light #resonance .light-btn,
  body.page-light #resonance .city-letter-submit {
    width: 100% !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar,
  body.page-light #resonance .fan-map-panel .map-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 10px !important;
    padding: 10px !important;
  }
  body.page-light #resonance .map-tags {
    margin: 0 !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 560px) {
  body.page-light #resonance {
    --resonance-desktop-map-height: clamp(300px, 56vh, 420px) !important;
  }
  body.page-light #resonance.resonance-section {
    width: calc(100% - 16px) !important;
  }
  body.page-light #resonance .map-panel-header {
    min-height: 50px !important;
    padding: 10px 12px !important;
  }
  body.page-light #resonance .map-panel-header .header-content span {
    white-space: normal !important;
  }
  body.page-light #resonance .city-count {
    padding-inline: 8px !important;
  }
}
/* Restore the light-up page atlas backdrop without changing its layout locks. */
body.page-light #resonance {
  --atlas-control-text: rgba(255, 250, 237, 0.92) !important;
  --atlas-soft-text: rgba(255, 250, 237, 0.64) !important;
  --atlas-panel-line: rgba(255, 255, 255, 0.16) !important;
  --atlas-glass: rgba(15, 21, 33, 0.6) !important;
}
body.page-light #resonance .resonance-shell {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, rgba(23, 28, 38, 0.78), rgba(28, 34, 48, 0.56)),
    radial-gradient(circle at 16% 8%, rgba(216, 169, 78, 0.14), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(135, 198, 232, 0.12), transparent 34%) !important;
  box-shadow: 0 24px 80px rgba(11, 16, 26, 0.28) !important;
}
body.page-light #resonance .map-panel {
  border-color: var(--atlas-panel-line) !important;
  background: rgba(16, 22, 34, 0.74) !important;
}
body.page-light #resonance .map-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--atlas-control-text) !important;
  background: rgba(17, 23, 34, 0.48) !important;
}
body.page-light #resonance .map-panel-header .city-count {
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--atlas-control-text) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
body.page-light #resonance .map-panel-header .city-count:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}
body.page-light #resonance .map-view {
  background: #eaf4f7 !important;
  filter: saturate(0.82) contrast(0.94) brightness(1.04) !important;
}
body.page-light #resonance .map-tags,
body.page-light #resonance .map-actions {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: var(--atlas-control-text) !important;
  background: var(--atlas-glass) !important;
}
body.page-light #resonance .match-badge {
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--atlas-control-text) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
/* Light module detail pass: personal lights, tide hint, and letter composition. */
body.page-light #resonance .resonance-tide-note {
  border: 1px solid rgba(143, 208, 236, 0.2) !important;
  color: var(--atlas-soft-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.page-light #resonance .resonance-tide-note i {
  color: #8fd0ec !important;
}
body.page-light #resonance .resonance-stats b {
  margin-bottom: 2px !important;
}
body.page-light #resonance .city-letter-panel {
  margin-top: 12px !important;
  border-radius: 8px !important;
}
body.page-light #resonance .city-letter-copy {
  grid-area: copy !important;
}
body.page-light #resonance .city-letter-copy h3 {
  margin: 8px 0 6px !important;
  font-size: clamp(20px, 1.5vw, 26px) !important;
}
body.page-light #resonance .city-letter-form {
  grid-area: form !important;
  display: grid !important;
  align-items: end !important;
}
body.page-light #resonance .city-letter-lists {
  grid-area: lists !important;
}
body.page-light #resonance .city-letter-list-group {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}
body.page-light #resonance .city-letter-list-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: var(--atlas-soft-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
body.page-light #resonance .city-letter-list-title em {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 28px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  color: #102033 !important;
  background: linear-gradient(135deg, #fff4d4, #8fd0ec) !important;
  font-style: normal !important;
}
body.page-light #resonance .city-letter-empty {
  min-height: 46px !important;
  display: grid !important;
  place-items: center start !important;
  padding: 0 12px !important;
  border: 1px dashed rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  color: var(--atlas-soft-text) !important;
  font-size: 13px !important;
}
body.page-light #resonance .city-letter-item {
  min-height: 46px !important;
  border-radius: 8px !important;
}
body.page-light #resonance .stat-box-header {
  font-size: 13px !important;
  color: var(--atlas-soft-text) !important;
}
body.page-light #resonance .latest-city {
  color: #102033 !important;
  background: linear-gradient(135deg, #fff4d4, #f1d487) !important;
}
@media (min-width: 981px) {
  body.page-light #resonance .resonance-tide-note {
    margin-left: 0 !important;
  }
}
@media (max-width: 980px) {
  body.page-light #resonance .resonance-stats,
  body.page-light #resonance .city-letter-panel,
  body.page-light #resonance .city-letter-form,
  body.page-light #resonance .city-letter-lists,
  body.page-light #resonance .city-letter-list {
    grid-template-columns: 1fr !important;
  }
}
/* Two-board light page refactor: star map and city letters are independent surfaces. */
body.page-light #resonance {
  --light-card-bg: linear-gradient(145deg, rgba(24, 32, 48, 0.88), rgba(35, 48, 68, 0.78)) !important;
  --light-card-border: rgba(194, 217, 238, 0.16) !important;
}
body.page-light #resonance .resonance-shell {
  display: grid !important;
}
body.page-light #resonance .resonance-board {
  border: 1px solid var(--light-card-border) !important;
  border-radius: 10px !important;
  background: var(--light-card-bg) !important;
  box-shadow: 0 24px 60px rgba(5, 12, 24, 0.26) !important;
}
body.page-light #resonance .resonance-board-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 18px !important;
}
body.page-light #resonance .resonance-board-heading h2 {
  color: rgba(244, 248, 255, 0.96) !important;
}
body.page-light #resonance .resonance-board-heading p {
  margin: 0 !important;
  color: rgba(215, 224, 238, 0.78) !important;
}
body.page-light #resonance .letter-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #f0d184 !important;
  font-weight: 700 !important;
}
body.page-light #resonance .map-container,
body.page-light #resonance .map-wrapper {
  min-height: 0 !important;
}
body.page-light #resonance .map-wrapper {
  align-items: stretch !important;
}
body.page-light #resonance .map-panel {
  min-height: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
body.page-light #resonance .fan-map-panel {
  grid-template-columns: 1fr !important;
}
body.page-light #resonance .map-view,
body.page-light #resonance .maplibregl-canvas-container,
body.page-light #resonance .maplibregl-canvas {
  min-height: var(--resonance-desktop-map-height) !important;
  height: var(--resonance-desktop-map-height) !important;
  max-height: var(--resonance-desktop-map-height) !important;
}
body.page-light #resonance .fan-map-panel #fanMap {
  grid-row: 2 !important;
}
body.page-light #resonance .fan-map-panel .map-search-bar {
  grid-row: 3 !important;
  margin: 14px 14px 0 !important;
}
body.page-light #resonance .fan-map-panel .manual-coord-panel {
  grid-row: 3 !important;
}
body.page-light #resonance .fan-control-stack {
  grid-row: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 0 !important;
  margin: 12px 14px 14px !important;
}
body.page-light #resonance .fan-control-stack .map-actions,
body.page-light #resonance .fan-control-stack .map-stats {
  margin: 0 !important;
}
body.page-light #resonance .fan-control-stack .map-stats {
  flex: 1 1 auto !important;
  min-height: 140px !important;
  overflow: auto !important;
}
body.page-light #resonance .trace-module {
  display: grid !important;
  gap: 10px !important;
  margin: 14px 14px 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(17, 26, 42, 0.48) !important;
}
body.page-light #resonance .trace-module-title,
body.page-light #resonance .tide-copy h3 {
  color: #f1d487 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
body.page-light #resonance .her-map-panel .map-tags {
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}
body.page-light #resonance .map-tag,
body.page-light #resonance .voice-city-chip {
  min-height: 36px !important;
  border-radius: 999px !important;
}
body.page-light #resonance .resonance-tide-note {
  grid-template-columns: minmax(0, 0.88fr) minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  background: linear-gradient(135deg, rgba(31, 56, 73, 0.78), rgba(32, 39, 61, 0.74)) !important;
}
body.page-light #resonance .resonance-tide-note p {
  margin: 8px 0 0 !important;
  color: rgba(229, 237, 246, 0.82) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}
body.page-light #resonance .resonance-stats {
  margin-top: 16px !important;
}
body.page-light #resonance .resonance-emotion-divider {
  color: rgba(235, 229, 214, 0.82) !important;
  font-weight: 700 !important;
}
body.page-light #resonance .resonance-emotion-divider span {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(18, 27, 43, 0.58) !important;
}
body.page-light #resonance .letter-board-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body.page-light #resonance .letter-board-stats span {
  border-radius: 8px !important;
  background: rgba(14, 22, 36, 0.56) !important;
}
body.page-light #resonance .letter-board-stats b {
  color: #f1d487 !important;
  font-size: 22px !important;
  margin-right: 5px !important;
}
body.page-light #resonance .letter-map-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
  gap: 18px !important;
}
body.page-light #resonance .voice-map-panel,
body.page-light #resonance .postcard-preview-panel,
body.page-light #resonance .city-letter-list-group {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(13, 21, 34, 0.48) !important;
}
body.page-light #resonance .voice-map-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body.page-light #resonance .voice-map-head h3 {
  margin: 0 !important;
}
body.page-light #resonance .voice-map-head span {
  color: #9bdedb !important;
  font-weight: 700 !important;
}
body.page-light #resonance .voice-city-grid {
  flex-wrap: wrap !important;
}
body.page-light #resonance .voice-city-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.page-light #resonance .voice-city-chip em {
  min-width: 22px !important;
  min-height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #1a2434 !important;
  background: #dff4ef !important;
  font-style: normal !important;
  font-size: 12px !important;
}
body.page-light #resonance .postcard-preview {
  display: grid !important;
  align-content: end !important;
  gap: 8px !important;
  padding: 20px !important;
  border-radius: 8px !important;
  color: white !important;
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.08), rgba(10, 16, 28, 0.82)),
    var(--postcard-bg, linear-gradient(135deg, #263c58, #65435c)) !important;
  background-size: cover !important;
  background-position: center !important;
}
body.page-light #resonance .postcard-preview span {
  color: #f1d487 !important;
  font-weight: 900 !important;
  font-size: 24px !important;
}
body.page-light #resonance .postcard-preview strong {
  font-size: 19px !important;
}
body.page-light #resonance .postcard-preview em {
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
body.page-light #resonance .city-letter-lists {
  display: grid !important;
}
body.page-light #resonance .city-letter-list {
  display: grid !important;
}
body.page-light #resonance .letter-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: none !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(5, 9, 17, 0.58) !important;
  backdrop-filter: blur(12px) !important;
}
body.page-light #resonance .letter-modal.show {
  display: grid !important;
}
body.page-light #resonance .letter-dialog {
  position: relative !important;
  width: min(760px, 100%) !important;
  display: grid !important;
  gap: 18px !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(24, 32, 48, 0.96), rgba(37, 52, 73, 0.94)) !important;
}
body.page-light #resonance .letter-dialog .city-letter-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
body.page-light #resonance .letter-message-label,
body.page-light #resonance .voice-record-row,
body.page-light #resonance .city-letter-submit {
  grid-column: 1 / -1 !important;
}
body.page-light #resonance .voice-record-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
body.page-light #resonance .voice-record-btn.is-recording {
  color: #1a2434 !important;
  background: #f2aec1 !important;
}
@media (max-width: 1100px) {
  body.page-light #resonance .map-wrapper,
  body.page-light #resonance .letter-map-layout,
  body.page-light #resonance .city-letter-lists,
  body.page-light #resonance .city-letter-list {
    grid-template-columns: 1fr !important;
  }
  body.page-light #resonance .resonance-board-heading {
    display: grid !important;
    align-items: start !important;
  }
  body.page-light #resonance .resonance-tide-note {
    grid-template-columns: 1fr !important;
  }
}

/* True EOF theme lock: keep high-specificity legacy map rules from flattening contrast. */
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .stat-box,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .stat-box {
  border-color: rgba(156, 194, 224, 0.22) !important;
  color: var(--res-night-text) !important;
  background: linear-gradient(145deg, #20344d, #17283e) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(2, 8, 18, 0.22) !important;
}

html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel :is(.stat-box-header, .stat-box-content),
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel :is(.stat-box-header, .stat-box-content) {
  color: var(--res-night-muted) !important;
  -webkit-text-fill-color: var(--res-night-muted) !important;
  background: transparent !important;
}

html[data-theme="light"] body.page-light #resonance .resonance-heading-metrics button,
body[data-theme="light"].page-light #resonance .resonance-heading-metrics button {
  border-color: rgba(43, 82, 116, 0.25) !important;
  color: #244664 !important;
  -webkit-text-fill-color: #244664 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 238, 244, 0.92)) !important;
  box-shadow: 0 10px 24px rgba(48, 80, 108, 0.12), inset 0 1px 0 #fff !important;
  font-weight: 800 !important;
}

html[data-theme="light"] body.page-light #resonance .resonance-heading-metrics button i,
body[data-theme="light"].page-light #resonance .resonance-heading-metrics button i {
  color: #177f91 !important;
  -webkit-text-fill-color: #177f91 !important;
}

html[data-theme="light"] body.page-light #resonance .resonance-heading-metrics button:hover,
html[data-theme="light"] body.page-light #resonance .resonance-heading-metrics button:focus-visible,
body[data-theme="light"].page-light #resonance .resonance-heading-metrics button:hover,
body[data-theme="light"].page-light #resonance .resonance-heading-metrics button:focus-visible {
  border-color: rgba(177, 124, 43, 0.38) !important;
  color: #183a58 !important;
  background: linear-gradient(145deg, #fffdf7, #dceef2) !important;
  box-shadow: 0 14px 30px rgba(48, 80, 108, 0.16), 0 0 0 4px rgba(220, 177, 91, 0.1) !important;
}

html[data-theme="light"] body.page-light #resonance .fan-map-panel .stat-box,
body[data-theme="light"].page-light #resonance .fan-map-panel .stat-box {
  border-color: rgba(49, 84, 116, 0.24) !important;
  color: #233f5d !important;
  background: linear-gradient(145deg, #ffffff, #e8f1f5) !important;
  box-shadow: 0 10px 26px rgba(54, 84, 111, 0.13), inset 0 1px 0 #fff !important;
}

html[data-theme="light"] body.page-light #resonance .fan-map-panel :is(.stat-box-header, .stat-box-content),
body[data-theme="light"].page-light #resonance .fan-map-panel :is(.stat-box-header, .stat-box-content) {
  color: #385772 !important;
  -webkit-text-fill-color: #385772 !important;
  background: transparent !important;
}

html[data-theme="light"] body.page-light #resonance :is(.search-input-wrapper, .message-input-wrapper),
body[data-theme="light"].page-light #resonance :is(.search-input-wrapper, .message-input-wrapper) {
  border: 1px solid rgba(47, 83, 116, 0.24) !important;
  color: #203e5a !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(35, 66, 94, 0.06), 0 6px 16px rgba(45, 76, 104, 0.08) !important;
}

html[data-theme="light"] body.page-light #resonance :is(input, select)::placeholder,
body[data-theme="light"].page-light #resonance :is(input, select)::placeholder {
  color: #657b90 !important;
  -webkit-text-fill-color: #657b90 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.page-light #resonance .city-letter-empty,
body[data-theme="light"].page-light #resonance .city-letter-empty {
  border-color: rgba(52, 86, 118, 0.24) !important;
  color: #526b82 !important;
  -webkit-text-fill-color: #526b82 !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] body.page-light #resonance :is(#lightMineBtn, #lightCityBtn, .city-letter-submit)[disabled],
body[data-theme="light"].page-light #resonance :is(#lightMineBtn, #lightCityBtn, .city-letter-submit)[disabled] {
  border-color: rgba(48, 82, 113, 0.22) !important;
  color: #506b82 !important;
  -webkit-text-fill-color: #506b82 !important;
  background: linear-gradient(145deg, #eef4f7, #dfe9ee) !important;
  opacity: 0.72 !important;
}
@media (max-width: 680px) {
  body.page-light #resonance {
    --resonance-desktop-map-height: 360px !important;
  }
  body.page-light #resonance .resonance-board {
    padding: 14px !important;
  }
  body.page-light #resonance .letter-dialog .city-letter-form {
    grid-template-columns: 1fr !important;
  }
}
/* Layout lock: neutralize legacy city-letter grid areas that can force vertical text. */
body.page-light #resonance .city-letter-panel {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-items: stretch !important;
  width: 100% !important;
}
body.page-light #resonance .city-letter-panel > .city-letter-heading {
  grid-area: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-light #resonance .city-letter-copy {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 760px !important;
  writing-mode: horizontal-tb !important;
}
body.page-light #resonance .city-letter-copy > *,
body.page-light #resonance .letter-board-stats,
body.page-light #resonance .letter-board-stats span {
  writing-mode: horizontal-tb !important;
  word-break: keep-all !important;
}
body.page-light #resonance .city-letter-panel > .letter-map-layout {
  grid-area: auto !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-light #resonance .city-letter-panel > .city-letter-lists {
  grid-area: auto !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-light #resonance .voice-city-chip span {
  white-space: nowrap !important;
  word-break: keep-all !important;
}
@media (min-width: 1101px) {
  body.page-light #resonance .voice-map-panel,
  body.page-light #resonance .postcard-preview-panel {
    width: auto !important;
    min-width: 0 !important;
  }
  body.page-light #resonance .her-map-panel {
    padding-bottom: 0 !important;
  }
  body.page-light #resonance .fan-control-stack {
    min-height: 0 !important;
  }
}
@media (max-width: 1100px) {
  body.page-light #resonance .city-letter-panel > .letter-map-layout,
  body.page-light #resonance .city-letter-panel > .city-letter-lists {
    grid-template-columns: 1fr !important;
  }
}
/* Comfort pass: city labels drive the maps; remove decorative map stars. */
body.page-light #resonance {
  --resonance-desktop-map-height: clamp(420px, 42vh, 560px) !important;
}
body.page-light #resonance.resonance-section {
  width: min(1780px, calc(100% - 44px)) !important;
}
body.page-light #resonance .map-wrapper {
  grid-template-columns: minmax(520px, 1fr) minmax(560px, 1fr) !important;
  gap: 20px !important;
}
body.page-light #resonance .her-footprint-marker,
body.page-light #resonance .latest-marker,
body.page-light #resonance .fan-light-marker,
body.page-light #resonance .map-city {
  display: none !important;
}
body.page-light #resonance .her-map-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, var(--resonance-desktop-map-height)) auto auto !important;
}
body.page-light #resonance .fan-map-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, var(--resonance-desktop-map-height)) auto auto auto !important;
}
body.page-light #resonance .her-map-panel .map-tags,
body.page-light #resonance .fan-map-panel .map-search-bar,
body.page-light #resonance .fan-map-panel .map-actions,
body.page-light #resonance .fan-map-panel .map-stats,
body.page-light #resonance .resonance-tide-note {
  margin-inline: 12px !important;
}
body.page-light #resonance .her-map-panel .map-panel-header,
body.page-light #resonance .her-map-panel .map-view {
  grid-column: 1 !important;
}
body.page-light #resonance .her-map-panel .map-tags {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-content: center !important;
  min-height: 74px !important;
  max-height: 74px !important;
  margin: 12px 12px 0 !important;
  padding: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
body.page-light #resonance .resonance-tide-note {
  grid-column: 1 !important;
  grid-row: 4 !important;
  width: calc(100% - 24px) !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 10px 12px 12px !important;
  border-radius: 8px !important;
  font-size: clamp(16px, 1vw, 18px) !important;
  line-height: 1.7 !important;
}
body.page-light #resonance .resonance-tide-note i {
  margin-top: 5px !important;
  font-size: 18px !important;
}
body.page-light #resonance .map-tag.city-tag {
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
body.page-light #resonance .map-tag.city-tag i {
  display: none !important;
}
body.page-light #resonance .map-tag.city-tag.is-selected {
  border-color: rgba(245, 215, 146, 0.64) !important;
  background: linear-gradient(135deg, rgba(255, 244, 212, 0.96), rgba(143, 212, 208, 0.72)) !important;
  box-shadow: 0 0 0 4px rgba(245, 215, 146, 0.12) !important;
  animation: atlasTagBreathe 1.8s ease-in-out infinite !important;
}
body.page-light #resonance #latestLights,
body.page-light #resonance #matchedCities {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
body.page-light #resonance #latestLights {
  max-width: 100% !important;
}
body.page-light #resonance .map-stats {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
}
body.page-light #resonance .stat-box {
  min-width: 0 !important;
  padding: 18px !important;
}
body.page-light #resonance .city-letter-copy {
  align-self: center !important;
}
body.page-light #resonance .city-letter-form {
  grid-template-columns: minmax(170px, 0.42fr) minmax(360px, 1fr) 88px !important;
  gap: 12px !important;
}
body.page-light #resonance .city-letter-lists {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
body.page-light #resonance .city-letter-list {
  grid-template-columns: 1fr !important;
  gap: 9px !important;
}
body.page-light #resonance .city-letter-list-group {
  min-height: 138px !important;
  padding: 14px !important;
}
@keyframes atlasTagBreathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.04);
  }
}
@media (min-width: 1500px) {
  body.page-light #resonance {
    --resonance-desktop-map-height: clamp(440px, 43vh, 590px) !important;
  }
}
@media (max-width: 980px) {
  body.page-light #resonance.resonance-section {
    width: min(100% - 20px, 820px) !important;
  }
  body.page-light #resonance .map-wrapper,
  body.page-light #resonance .her-map-panel,
  body.page-light #resonance .city-letter-panel,
  body.page-light #resonance .city-letter-form,
  body.page-light #resonance .city-letter-lists {
    grid-template-columns: 1fr !important;
  }
  body.page-light #resonance .her-map-panel .map-panel-header,
  body.page-light #resonance .her-map-panel .map-view,
  body.page-light #resonance .her-map-panel .map-tags,
  body.page-light #resonance .resonance-tide-note {
    grid-column: 1 !important;
  }
  body.page-light #resonance .city-letter-panel {
    grid-template-areas: "copy"
      "form"
      "lists" !important;
  }
}
/* ================ 城市来信审核机制样式 ================ */
/* 审核状态标签 */
body.page-light #resonance .letter-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 72px !important;
  min-height: 26px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
body.page-light #resonance .letter-status.pending {
  border: 1px solid rgba(245, 192, 102, 0.48) !important;
  color: #f5c066 !important;
  background: rgba(245, 192, 102, 0.12) !important;
}
body.page-light #resonance .letter-status.approved {
  border: 1px solid rgba(74, 222, 128, 0.48) !important;
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.12) !important;
}
body.page-light #resonance .letter-status.rejected {
  border: 1px solid rgba(239, 68, 68, 0.48) !important;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}
body.page-light #resonance .letter-status i {
  font-size: 9px !important;
}
/* 审核操作按钮 */
body.page-light #resonance .review-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
body.page-light #resonance .review-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--atlas-panel-line) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.22s ease !important;
}
body.page-light #resonance .review-btn.approve {
  border-color: rgba(74, 222, 128, 0.4) !important;
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.1) !important;
}
body.page-light #resonance .review-btn.approve:hover {
  border-color: rgba(74, 222, 128, 0.6) !important;
  background: rgba(74, 222, 128, 0.18) !important;
}
body.page-light #resonance .review-btn.reject {
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}
body.page-light #resonance .review-btn.reject:hover {
  border-color: rgba(239, 68, 68, 0.6) !important;
  background: rgba(239, 68, 68, 0.18) !important;
}
body.page-light #resonance .review-btn.detail {
  border-color: rgba(135, 198, 232, 0.4) !important;
  color: #87c6e8 !important;
  background: rgba(135, 198, 232, 0.1) !important;
}
body.page-light #resonance .review-btn.detail:hover {
  border-color: rgba(135, 198, 232, 0.6) !important;
  background: rgba(135, 198, 232, 0.18) !important;
}
/* 审核模态框 */
/* 审核内容区域 */
/* 审核意见输入 */
/* 审核操作区域 */
body.page-light #resonance .review-actions-bar {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 审核记录列表 */
/* 批量操作栏 */
body.page-light #resonance .batch-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  color: rgba(244, 248, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}
body.page-light #resonance .batch-btn:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
body.page-light #resonance .batch-btn.approve {
  border-color: rgba(74, 222, 128, 0.36) !important;
  color: #4ade80 !important;
}
body.page-light #resonance .batch-btn.reject {
  border-color: rgba(239, 68, 68, 0.36) !important;
  color: #ef4444 !important;
}
/* 信件列表项复选框 */
body.page-light #resonance .letter-checkbox {
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  accent-color: #87c6e8 !important;
  cursor: pointer !important;
}
/* 我的来信标签页 */
body.page-light #resonance .letter-tabs {
  display: flex !important;
  gap: 8px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.page-light #resonance .letter-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  color: rgba(215, 224, 238, 0.72) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}
body.page-light #resonance .letter-tab:hover {
  color: rgba(244, 248, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
body.page-light #resonance .letter-tab.active {
  color: #1a2434 !important;
  background: linear-gradient(135deg, #f1d487, #8fd0ec) !important;
}
body.page-light #resonance .letter-tab em {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-style: normal !important;
  font-size: 11px !important;
}
body.page-light #resonance .letter-tab.active em {
  background: rgba(255, 255, 255, 0.32) !important;
}
body.page-light #resonance .letter-tab:not(.active) em {
  background: rgba(255, 255, 255, 0.1) !important;
}
/* 审核员标识 */
/* 权限提示 */
/* 深色主题适配 */
html:not([data-theme="light"]) body.page-light #resonance .letter-status,
body.page-light:not([data-theme="light"]) #resonance .letter-status {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .letter-status.pending,
body.page-light:not([data-theme="light"]) #resonance .letter-status.pending {
  border-color: rgba(245, 192, 102, 0.32) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .letter-status.approved,
body.page-light:not([data-theme="light"]) #resonance .letter-status.approved {
  border-color: rgba(74, 222, 128, 0.32) !important;
}
html:not([data-theme="light"]) body.page-light #resonance .letter-status.rejected,
body.page-light:not([data-theme="light"]) #resonance .letter-status.rejected {
  border-color: rgba(239, 68, 68, 0.32) !important;
}
/* 浅色主题审核样式 */
html[data-theme="light"] body.page-light #resonance .letter-tab,
body[data-theme="light"].page-light #resonance .letter-tab {
  color: #557090 !important;
}
html[data-theme="light"] body.page-light #resonance .letter-tab.active,
body[data-theme="light"].page-light #resonance .letter-tab.active {
  color: #243348 !important;
}
html[data-theme="light"] body.page-light #resonance .city-letter-item,
body[data-theme="light"].page-light #resonance .city-letter-item {
  border-color: rgba(64, 92, 124, 0.14) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}
/* 响应式适配 */
@media (max-width: 720px) {
  body.page-light #resonance .review-actions-bar {
    flex-direction: column !important;
  }
}
/* Final light-theme pass: keep the atlas airy instead of dark glass. */
html[data-theme="light"] body.page-light #resonance,
body[data-theme="light"].page-light #resonance {
  --atlas-ink: #17283d;
  --atlas-muted: #5f7188;
  --atlas-soft-text: #6c7e92;
  --atlas-control-text: #213954;
  --atlas-panel-line: rgba(65, 95, 128, 0.16);
  --atlas-glass: rgba(255, 255, 255, 0.78);
  --atlas-wash: rgba(245, 250, 253, 0.86);
  --atlas-gold-soft: rgba(232, 185, 102, 0.2);
  color: var(--atlas-ink) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-shell,
body[data-theme="light"].page-light #resonance .resonance-shell {
  border-color: rgba(76, 111, 148, 0.16) !important;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(246, 251, 253, 0.76)),
    radial-gradient(circle at 15% 0%, rgba(255, 222, 235, 0.28), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(188, 224, 250, 0.34), transparent 36%),
    linear-gradient(116deg, rgba(232, 185, 102, 0.12), transparent 44%, rgba(142, 213, 207, 0.14)) !important;
  box-shadow: 0 26px 78px rgba(74, 101, 132, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-board,
html[data-theme="light"] body.page-light #resonance .map-panel,
html[data-theme="light"] body.page-light #resonance .city-letter-panel,
html[data-theme="light"] body.page-light #resonance .broadcast-panel,
html[data-theme="light"] body.page-light #resonance .voice-map-panel,
html[data-theme="light"] body.page-light #resonance .postcard-preview-panel,
html[data-theme="light"] body.page-light #resonance .city-letter-list-group,
body[data-theme="light"].page-light #resonance .resonance-board,
body[data-theme="light"].page-light #resonance .map-panel,
body[data-theme="light"].page-light #resonance .city-letter-panel,
body[data-theme="light"].page-light #resonance .broadcast-panel,
body[data-theme="light"].page-light #resonance .voice-map-panel,
body[data-theme="light"].page-light #resonance .postcard-preview-panel,
body[data-theme="light"].page-light #resonance .city-letter-list-group {
  border-color: var(--atlas-panel-line) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(244, 250, 252, 0.72)),
    linear-gradient(118deg, rgba(232, 185, 102, 0.08), transparent 42%, rgba(151, 208, 226, 0.12)) !important;
  box-shadow: 0 18px 44px rgba(79, 107, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="light"] body.page-light #resonance .map-panel:hover,
html[data-theme="light"] body.page-light #resonance .city-letter-list-group:hover,
body[data-theme="light"].page-light #resonance .map-panel:hover,
body[data-theme="light"].page-light #resonance .city-letter-list-group:hover {
  border-color: rgba(68, 111, 152, 0.24) !important;
  box-shadow: 0 22px 52px rgba(79, 107, 138, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-board-heading,
html[data-theme="light"] body.page-light #resonance .map-panel-header,
html[data-theme="light"] body.page-light #resonance .voice-map-head,
html[data-theme="light"] body.page-light #resonance .city-letter-list-title,
html[data-theme="light"] body.page-light #resonance .panel-title,
body[data-theme="light"].page-light #resonance .resonance-board-heading,
body[data-theme="light"].page-light #resonance .map-panel-header,
body[data-theme="light"].page-light #resonance .voice-map-head,
body[data-theme="light"].page-light #resonance .city-letter-list-title,
body[data-theme="light"].page-light #resonance .panel-title {
  border-color: rgba(75, 106, 138, 0.14) !important;
  color: var(--atlas-ink) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(236, 247, 252, 0.54)),
    linear-gradient(90deg, rgba(255, 229, 168, 0.18), rgba(255, 226, 238, 0.12), rgba(181, 228, 232, 0.16)) !important;
}
html[data-theme="light"] body.page-light #resonance .map-view,
body[data-theme="light"].page-light #resonance .map-view {
  background: linear-gradient(135deg, rgba(250, 253, 255, 0.72), rgba(238, 248, 252, 0.52)) !important;
}
html[data-theme="light"] body.page-light #resonance.is-libre-map .map-view::after,
body[data-theme="light"].page-light #resonance.is-libre-map .map-view::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(64, 96, 128, 0.035)),
    radial-gradient(circle at 76% 20%, rgba(255, 226, 166, 0.1), transparent 30%) !important;
  mix-blend-mode: normal !important;
  opacity: 0.5 !important;
}
html[data-theme="light"] body.page-light #resonance .map-search-bar,
html[data-theme="light"] body.page-light #resonance .manual-coord-panel,
html[data-theme="light"] body.page-light #resonance .selected-location-info,
html[data-theme="light"] body.page-light #resonance .map-tags,
html[data-theme="light"] body.page-light #resonance .map-actions,
html[data-theme="light"] body.page-light #resonance .map-stats,
html[data-theme="light"] body.page-light #resonance .resonance-stats,
html[data-theme="light"] body.page-light #resonance .resonance-stats span,
html[data-theme="light"] body.page-light #resonance .letter-board-stats span,
body[data-theme="light"].page-light #resonance .map-search-bar,
body[data-theme="light"].page-light #resonance .manual-coord-panel,
body[data-theme="light"].page-light #resonance .selected-location-info,
body[data-theme="light"].page-light #resonance .map-tags,
body[data-theme="light"].page-light #resonance .map-actions,
body[data-theme="light"].page-light #resonance .map-stats,
body[data-theme="light"].page-light #resonance .resonance-stats,
body[data-theme="light"].page-light #resonance .resonance-stats span,
body[data-theme="light"].page-light #resonance .letter-board-stats span {
  border-color: rgba(75, 100, 130, 0.15) !important;
  color: var(--atlas-control-text) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="light"] body.page-light #resonance .search-input-wrapper,
html[data-theme="light"] body.page-light #resonance .message-input-wrapper,
html[data-theme="light"] body.page-light #resonance .coord-input-group input,
html[data-theme="light"] body.page-light #resonance .city-letter-form select,
html[data-theme="light"] body.page-light #resonance .city-letter-form input,
html[data-theme="light"] body.page-light #resonance .light-message-input,
body[data-theme="light"].page-light #resonance .search-input-wrapper,
body[data-theme="light"].page-light #resonance .message-input-wrapper,
body[data-theme="light"].page-light #resonance .coord-input-group input,
body[data-theme="light"].page-light #resonance .city-letter-form select,
body[data-theme="light"].page-light #resonance .city-letter-form input,
body[data-theme="light"].page-light #resonance .light-message-input {
  border-color: rgba(68, 104, 142, 0.18) !important;
  color: var(--atlas-ink) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 1px 2px rgba(50, 73, 100, 0.06) !important;
}
html[data-theme="light"] body.page-light #resonance .search-input-wrapper input,
html[data-theme="light"] body.page-light #resonance .light-message-input,
html[data-theme="light"] body.page-light #resonance .coord-input-group input,
html[data-theme="light"] body.page-light #resonance .city-letter-form select,
html[data-theme="light"] body.page-light #resonance .city-letter-form input,
body[data-theme="light"].page-light #resonance .search-input-wrapper input,
body[data-theme="light"].page-light #resonance .light-message-input,
body[data-theme="light"].page-light #resonance .coord-input-group input,
body[data-theme="light"].page-light #resonance .city-letter-form select,
body[data-theme="light"].page-light #resonance .city-letter-form input {
  color: var(--atlas-ink) !important;
}
html[data-theme="light"] body.page-light #resonance .search-input-wrapper input::placeholder,
html[data-theme="light"] body.page-light #resonance .light-message-input::placeholder,
html[data-theme="light"] body.page-light #resonance .city-letter-form input::placeholder,
body[data-theme="light"].page-light #resonance .search-input-wrapper input::placeholder,
body[data-theme="light"].page-light #resonance .light-message-input::placeholder,
body[data-theme="light"].page-light #resonance .city-letter-form input::placeholder {
  color: rgba(58, 78, 102, 0.48) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-login-state,
html[data-theme="light"] body.page-light #resonance .resonance-btn,
html[data-theme="light"] body.page-light #resonance .search-btn,
html[data-theme="light"] body.page-light #resonance .manual-btn,
html[data-theme="light"] body.page-light #resonance .set-coord-btn,
html[data-theme="light"] body.page-light #resonance .clear-btn,
html[data-theme="light"] body.page-light #resonance .map-tag,
html[data-theme="light"] body.page-light #resonance .voice-city-chip,
body[data-theme="light"].page-light #resonance .resonance-login-state,
body[data-theme="light"].page-light #resonance .resonance-btn,
body[data-theme="light"].page-light #resonance .search-btn,
body[data-theme="light"].page-light #resonance .manual-btn,
body[data-theme="light"].page-light #resonance .set-coord-btn,
body[data-theme="light"].page-light #resonance .clear-btn,
body[data-theme="light"].page-light #resonance .map-tag,
body[data-theme="light"].page-light #resonance .voice-city-chip {
  border-color: rgba(72, 104, 138, 0.2) !important;
  color: var(--atlas-control-text) !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 8px 20px rgba(75, 105, 136, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-btn:hover,
html[data-theme="light"] body.page-light #resonance .search-btn:hover,
html[data-theme="light"] body.page-light #resonance .manual-btn:hover,
html[data-theme="light"] body.page-light #resonance .set-coord-btn:hover,
html[data-theme="light"] body.page-light #resonance .map-tag:hover,
html[data-theme="light"] body.page-light #resonance .voice-city-chip:hover,
body[data-theme="light"].page-light #resonance .resonance-btn:hover,
body[data-theme="light"].page-light #resonance .search-btn:hover,
body[data-theme="light"].page-light #resonance .manual-btn:hover,
body[data-theme="light"].page-light #resonance .set-coord-btn:hover,
body[data-theme="light"].page-light #resonance .map-tag:hover,
body[data-theme="light"].page-light #resonance .voice-city-chip:hover {
  border-color: rgba(61, 111, 159, 0.28) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 12px 26px rgba(75, 105, 136, 0.13) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-btn.primary,
html[data-theme="light"] body.page-light #resonance .light-btn,
html[data-theme="light"] body.page-light #resonance .city-letter-submit,
body[data-theme="light"].page-light #resonance .resonance-btn.primary,
body[data-theme="light"].page-light #resonance .light-btn,
body[data-theme="light"].page-light #resonance .city-letter-submit {
  border-color: rgba(216, 173, 88, 0.22) !important;
  color: #19314a !important;
  background: linear-gradient(135deg, #fff2c3, #cdebf4 52%, #f7c7d4) !important;
  box-shadow: 0 14px 30px rgba(82, 117, 150, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
html[data-theme="light"] body.page-light #resonance .map-tag.star,
body[data-theme="light"].page-light #resonance .map-tag.star {
  border-color: rgba(216, 173, 88, 0.38) !important;
  color: #9b6b1f !important;
  background: linear-gradient(135deg, rgba(255, 240, 194, 0.84), rgba(255, 246, 224, 0.72)) !important;
}
html[data-theme="light"] body.page-light #resonance .map-tag.is-selected,
html[data-theme="light"] body.page-light #resonance .map-tag.star.is-selected,
body[data-theme="light"].page-light #resonance .map-tag.is-selected,
body[data-theme="light"].page-light #resonance .map-tag.star.is-selected {
  border-color: rgba(216, 173, 88, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(216, 173, 88, 0.16), 0 12px 24px rgba(83, 116, 145, 0.14) !important;
}
html[data-theme="light"] body.page-light #resonance .letter-kicker,
html[data-theme="light"] body.page-light #resonance .voice-map-head span,
body[data-theme="light"].page-light #resonance .letter-kicker,
body[data-theme="light"].page-light #resonance .voice-map-head span {
  color: #2f8f9a !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-board-heading h2,
html[data-theme="light"] body.page-light #resonance .city-letter-copy h2,
html[data-theme="light"] body.page-light #resonance .city-letter-copy h3,
html[data-theme="light"] body.page-light #resonance .voice-map-head h3,
body[data-theme="light"].page-light #resonance .resonance-board-heading h2,
body[data-theme="light"].page-light #resonance .city-letter-copy h2,
body[data-theme="light"].page-light #resonance .city-letter-copy h3,
body[data-theme="light"].page-light #resonance .voice-map-head h3 {
  color: #432f67 !important;
  text-shadow: none !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-board-heading p,
html[data-theme="light"] body.page-light #resonance .city-letter-copy p,
html[data-theme="light"] body.page-light #resonance .location-info-header,
html[data-theme="light"] body.page-light #resonance .location-details p,
html[data-theme="light"] body.page-light #resonance .coord-input-group label,
html[data-theme="light"] body.page-light #resonance .stat-box-header,
html[data-theme="light"] body.page-light #resonance .stat-box-content,
body[data-theme="light"].page-light #resonance .resonance-board-heading p,
body[data-theme="light"].page-light #resonance .city-letter-copy p,
body[data-theme="light"].page-light #resonance .location-info-header,
body[data-theme="light"].page-light #resonance .location-details p,
body[data-theme="light"].page-light #resonance .coord-input-group label,
body[data-theme="light"].page-light #resonance .stat-box-header,
body[data-theme="light"].page-light #resonance .stat-box-content {
  color: var(--atlas-muted) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-stats b,
html[data-theme="light"] body.page-light #resonance .letter-board-stats b,
html[data-theme="light"] body.page-light #resonance .city-letter-list-title em,
html[data-theme="light"] body.page-light #resonance .voice-city-chip em,
body[data-theme="light"].page-light #resonance .resonance-stats b,
body[data-theme="light"].page-light #resonance .letter-board-stats b,
body[data-theme="light"].page-light #resonance .city-letter-list-title em,
body[data-theme="light"].page-light #resonance .voice-city-chip em {
  color: #b47a23 !important;
}
html[data-theme="light"] body.page-light #resonance .city-letter-item,
html[data-theme="light"] body.page-light #resonance .city-letter-empty,
html[data-theme="light"] body.page-light #resonance .broadcast-item,
body[data-theme="light"].page-light #resonance .city-letter-item,
body[data-theme="light"].page-light #resonance .city-letter-empty,
body[data-theme="light"].page-light #resonance .broadcast-item {
  border-color: rgba(76, 106, 138, 0.14) !important;
  color: var(--atlas-control-text) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
html[data-theme="light"] body.page-light #resonance .city-letter-item span,
body[data-theme="light"].page-light #resonance .city-letter-item span {
  color: #9a6a22 !important;
}
html[data-theme="light"] body.page-light #resonance .city-letter-item em,
html[data-theme="light"] body.page-light #resonance .city-letter-empty,
body[data-theme="light"].page-light #resonance .city-letter-item em,
body[data-theme="light"].page-light #resonance .city-letter-empty {
  color: #64758b !important;
}
html[data-theme="light"] body.page-light #resonance .postcard-preview,
body[data-theme="light"].page-light #resonance .postcard-preview {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 12px 28px rgba(63, 84, 108, 0.16) !important;
}
html[data-theme="light"] body.page-light #resonance .resonance-emotion-divider span,
body[data-theme="light"].page-light #resonance .resonance-emotion-divider span {
  color: #2b3e55 !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: 0 10px 26px rgba(74, 101, 132, 0.12) !important;
}
/* Light board correction: keep the lighting controls readable on pale glass. */
body.page-light #resonance {
  --atlas-blue: #286f9d;
  --atlas-accent: #9d6e22;
  --atlas-ink: #1e3048;
  --atlas-muted: #51647b;
  --atlas-control-text: #21344d;
  --atlas-soft-text: #5c6e83;
  --atlas-line: rgba(76, 101, 130, 0.18);
  --atlas-panel-line: rgba(76, 101, 130, 0.18);
  --atlas-rail: rgba(249, 253, 255, 0.88);
  --atlas-rail-strong: rgba(255, 255, 255, 0.94);
}
body.page-light #resonance .map-panel,
body.page-light #resonance .city-letter-panel,
body.page-light #resonance .broadcast-panel,
body.page-light #resonance .resonance-stats {
  border-color: var(--atlas-panel-line) !important;
  color: var(--atlas-ink) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(239, 249, 252, 0.76)),
    linear-gradient(118deg, rgba(255, 226, 168, 0.1), transparent 44%, rgba(181, 228, 232, 0.14)) !important;
  box-shadow: 0 18px 44px rgba(78, 103, 132, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
body.page-light #resonance .map-panel-header,
body.page-light #resonance .voice-map-head,
body.page-light #resonance .panel-title {
  border-color: rgba(76, 101, 130, 0.14) !important;
  color: var(--atlas-ink) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(232, 246, 252, 0.64)),
    linear-gradient(90deg, rgba(255, 228, 166, 0.2), rgba(255, 226, 238, 0.14), rgba(181, 228, 232, 0.18)) !important;
}
body.page-light #resonance .map-panel-header span,
body.page-light #resonance .map-panel-header .header-content span,
body.page-light #resonance .location-info-header,
body.page-light #resonance .stat-box-header {
  color: var(--atlas-ink) !important;
}
body.page-light #resonance .map-panel-header i,
body.page-light #resonance .location-info-header i,
body.page-light #resonance .stat-box-header i,
body.page-light #resonance .search-input-wrapper i {
  color: var(--atlas-blue) !important;
}
body.page-light #resonance .her-map-panel .map-panel-header i,
body.page-light #resonance .her-map-panel .stat-box-header i {
  color: var(--atlas-accent) !important;
}
body.page-light #resonance .map-panel-header .city-count,
body.page-light #resonance .match-badge {
  border-color: rgba(40, 111, 157, 0.22) !important;
  color: var(--atlas-blue) !important;
  background: rgba(232, 246, 252, 0.82) !important;
}
body.page-light #resonance .fan-map-panel .map-search-bar,
body.page-light #resonance .fan-map-panel .manual-coord-panel,
body.page-light #resonance .fan-map-panel .selected-location-info,
body.page-light #resonance .fan-map-panel .map-actions,
body.page-light #resonance .fan-map-panel .map-stats,
body.page-light #resonance .map-tags {
  border-color: var(--atlas-line) !important;
  color: var(--atlas-control-text) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(243, 251, 253, 0.84)),
    linear-gradient(90deg, rgba(255, 232, 174, 0.11), rgba(209, 237, 246, 0.16)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
body.page-light #resonance .fan-map-panel .selected-location-info {
  background: linear-gradient(135deg, rgba(255, 241, 205, 0.78), rgba(234, 248, 252, 0.82)),
    rgba(255, 255, 255, 0.9) !important;
}
body.page-light #resonance .location-details p,
body.page-light #resonance .coord-input-group label,
body.page-light #resonance .stat-box-content,
body.page-light #resonance .char-counter,
body.page-light #resonance .resonance-stats span {
  color: var(--atlas-muted) !important;
}
body.page-light #resonance .search-input-wrapper,
body.page-light #resonance .message-input-wrapper,
body.page-light #resonance .coord-input-group input,
body.page-light #resonance .light-message-input {
  border-color: rgba(67, 101, 137, 0.2) !important;
  color: var(--atlas-ink) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: inset 0 1px 2px rgba(47, 70, 96, 0.07) !important;
}
body.page-light #resonance .search-input-wrapper input,
body.page-light #resonance .light-message-input,
body.page-light #resonance .coord-input-group input {
  color: var(--atlas-ink) !important;
  -webkit-text-fill-color: var(--atlas-ink) !important;
}
body.page-light #resonance .search-input-wrapper input::placeholder,
body.page-light #resonance .light-message-input::placeholder {
  color: rgba(72, 89, 112, 0.58) !important;
  opacity: 1 !important;
}
body.page-light #resonance .search-input-wrapper:focus-within,
body.page-light #resonance .message-input-wrapper:focus-within,
body.page-light #resonance .light-message-input:focus {
  border-color: rgba(40, 111, 157, 0.44) !important;
  box-shadow: 0 0 0 3px rgba(40, 111, 157, 0.12), inset 0 1px 2px rgba(47, 70, 96, 0.07) !important;
}
body.page-light #resonance .resonance-login-state,
body.page-light #resonance .resonance-btn,
body.page-light #resonance .search-btn,
body.page-light #resonance .manual-btn,
body.page-light #resonance .set-coord-btn,
body.page-light #resonance .clear-btn,
body.page-light #resonance .map-tag,
body.page-light #resonance .voice-city-chip {
  border-color: rgba(69, 101, 136, 0.22) !important;
  color: var(--atlas-control-text) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 8px 20px rgba(75, 103, 132, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}
body.page-light #resonance .resonance-btn:hover,
body.page-light #resonance .search-btn:hover,
body.page-light #resonance .manual-btn:hover,
body.page-light #resonance .set-coord-btn:hover,
body.page-light #resonance .clear-btn:hover,
body.page-light #resonance .map-tag:hover,
body.page-light #resonance .voice-city-chip:hover {
  border-color: rgba(40, 111, 157, 0.32) !important;
  color: #15304a !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(75, 103, 132, 0.14) !important;
}
body.page-light #resonance .resonance-btn.primary,
body.page-light #resonance .light-btn:not(:disabled),
body.page-light #resonance .city-letter-submit {
  border: 1px solid rgba(157, 110, 34, 0.2) !important;
  color: #17304a !important;
  background: linear-gradient(135deg, #fff1be, #caebf3 52%, #f6c4d0) !important;
  box-shadow: 0 14px 30px rgba(83, 113, 144, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}
body.page-light #resonance .light-btn:disabled {
  border: 1px solid rgba(76, 101, 130, 0.14) !important;
  color: rgba(77, 94, 116, 0.72) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  opacity: 1 !important;
}
body.page-light #resonance .map-tag {
  color: #265c88 !important;
  font-weight: 800 !important;
}
body.page-light #resonance .map-tag i,
body.page-light #resonance .stat-box-content .map-tag i {
  color: var(--atlas-blue) !important;
  background: rgba(40, 111, 157, 0.1) !important;
}
body.page-light #resonance .map-tag.star {
  border-color: rgba(157, 110, 34, 0.34) !important;
  color: #8b621c !important;
  background: linear-gradient(135deg, rgba(255, 240, 194, 0.9), rgba(255, 250, 236, 0.82)) !important;
}
body.page-light #resonance .map-tag.star i,
body.page-light #resonance .her-map-panel .map-tag i {
  color: var(--atlas-accent) !important;
  background: rgba(157, 110, 34, 0.12) !important;
}
body.page-light #resonance .map-tag.is-selected,
body.page-light #resonance .map-tag.star.is-selected {
  border-color: rgba(157, 110, 34, 0.56) !important;
  color: #17314d !important;
  background: linear-gradient(135deg, rgba(255, 226, 157, 0.94), rgba(202, 235, 243, 0.84)) !important;
  box-shadow: inset 4px 0 0 rgba(157, 110, 34, 0.54), 0 12px 24px rgba(83, 116, 145, 0.14) !important;
}
body.page-light #resonance .latest-city span {
  color: #785417 !important;
  background: rgba(157, 110, 34, 0.16) !important;
}
body.page-light #resonance .fan-map-panel .stat-box {
  border-color: rgba(76, 101, 130, 0.14) !important;
  color: var(--atlas-ink) !important;
  background: rgba(255, 255, 255, 0.56) !important;
}
body.page-light #resonance .fan-map-panel .stat-box:first-child {
  background: linear-gradient(135deg, rgba(235, 249, 252, 0.72), rgba(255, 255, 255, 0.56)) !important;
}
body.page-light #resonance .fan-map-panel .stat-box:last-child {
  background: linear-gradient(135deg, rgba(255, 249, 231, 0.7), rgba(255, 255, 255, 0.56)) !important;
}
html[data-theme="light"] body.page-light #resonance .search-btn,
html[data-theme="light"] body.page-light #resonance .manual-btn,
html[data-theme="light"] body.page-light #resonance .set-coord-btn,
html[data-theme="light"] body.page-light #resonance .clear-btn,
html[data-theme="light"] body.page-light #resonance .map-tag,
html[data-theme="light"] body.page-light #resonance .voice-city-chip,
body[data-theme="light"].page-light #resonance .search-btn,
body[data-theme="light"].page-light #resonance .manual-btn,
body[data-theme="light"].page-light #resonance .set-coord-btn,
body[data-theme="light"].page-light #resonance .clear-btn,
body[data-theme="light"].page-light #resonance .map-tag,
body[data-theme="light"].page-light #resonance .voice-city-chip {
  color: #21344d !important;
  -webkit-text-fill-color: #21344d !important;
}
html[data-theme="light"] body.page-light #resonance .search-btn::before,
html[data-theme="light"] body.page-light #resonance .manual-btn i,
html[data-theme="light"] body.page-light #resonance .set-coord-btn i,
html[data-theme="light"] body.page-light #resonance .clear-btn i,
body[data-theme="light"].page-light #resonance .search-btn::before,
body[data-theme="light"].page-light #resonance .manual-btn i,
body[data-theme="light"].page-light #resonance .set-coord-btn i,
body[data-theme="light"].page-light #resonance .clear-btn i {
  color: #286f9d !important;
  -webkit-text-fill-color: #286f9d !important;
}
html[data-theme="light"] body.page-light #resonance .location-info-header,
html[data-theme="light"] body.page-light #resonance .stat-box-header,
html[data-theme="light"] body.page-light #resonance .map-panel-header span,
body[data-theme="light"].page-light #resonance .location-info-header,
body[data-theme="light"].page-light #resonance .stat-box-header,
body[data-theme="light"].page-light #resonance .map-panel-header span {
  color: var(--atlas-ink) !important;
}
html[data-theme="light"] body.page-light #resonance .map-tag.is-selected,
html[data-theme="light"] body.page-light #resonance .map-tag.star.is-selected,
body[data-theme="light"].page-light #resonance .map-tag.is-selected,
body[data-theme="light"].page-light #resonance .map-tag.star.is-selected {
  color: #17314d !important;
  -webkit-text-fill-color: #17314d !important;
  background: linear-gradient(135deg, rgba(255, 226, 157, 0.94), rgba(202, 235, 243, 0.84)) !important;
}
body.page-light #resonance .resonance-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 16px 0 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(72, 101, 132, 0.16) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 251, 253, 0.82)),
    linear-gradient(90deg, rgba(255, 232, 174, 0.12), transparent 46%, rgba(203, 236, 242, 0.16)) !important;
  box-shadow: 0 14px 32px rgba(79, 105, 136, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}
body.page-light #resonance .resonance-stats span {
  padding: 16px 18px !important;
  border: 1px solid rgba(72, 101, 132, 0.14) !important;
  border-radius: 10px !important;
  color: #435873 !important;
  -webkit-text-fill-color: #435873 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 248, 252, 0.82)) !important;
  box-shadow: inset 4px 0 0 rgba(40, 111, 157, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
  text-shadow: none !important;
}
body.page-light #resonance .resonance-stats span:nth-child(2) {
  box-shadow: inset 4px 0 0 rgba(157, 110, 34, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
body.page-light #resonance .resonance-stats b {
  color: #9a6a22 !important;
  -webkit-text-fill-color: #9a6a22 !important;
  font-size: clamp(26px, 2.4vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
@media (max-width: 980px) {
  body.page-light #resonance .resonance-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* 2026-06-22: navigation, breathing room, wind audio, and letter-map composition. */
html {
  scroll-behavior: smooth;
}
body.page-light #resonance #herFootprintPanel,
body.page-light #resonance #fanStarlightPanel,
body.page-light #resonance #cityLetterBoard {
  scroll-margin-top: 118px;
}
body.page-light #resonance .resonance-heading-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
}
body.page-light #resonance .resonance-heading-metrics button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  color: rgba(241, 239, 239, 0.84) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  text-decoration: none !important;
  font: inherit !important;
  cursor: pointer !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}
body.page-light #resonance .resonance-heading-metrics button:hover,
body.page-light #resonance .resonance-heading-metrics button:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(244, 210, 133, 0.58) !important;
  color: #fff6de !important;
  background: rgba(255, 255, 255, 0.13) !important;
  outline: none !important;
}
body.page-light #resonance .resonance-shell {
  gap: clamp(54px, 6vw, 92px) !important;
}
body.page-light #resonance .resonance-board {
  padding: clamp(22px, 2vw, 34px) !important;
}
body.page-light #resonance .resonance-board-heading {
  min-height: 116px !important;
  margin-bottom: 26px !important;
  padding: 8px 4px 22px !important;
  border-bottom: 1px solid rgba(236, 213, 161, 0.18) !important;
}
body.page-light #resonance .resonance-board-heading h2 {
  margin: 8px 0 8px !important;
  font-size: clamp(38px, 3.2vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.035em !important;
}
body.page-light #resonance .resonance-board-heading p {
  max-width: 620px !important;
  font-size: clamp(16px, 1.15vw, 19px) !important;
  line-height: 1.75 !important;
}
body.page-light #resonance .letter-kicker {
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
}
body.page-light #resonance .resonance-tide-note {
  display: block !important;
  min-height: 0 !important;
  padding: 22px 24px !important;
}
body.page-light #resonance .resonance-tide-note .tide-copy {
  max-width: 720px !important;
}
body.page-light #resonance .resonance-emotion-divider {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(72px, 1fr) auto auto minmax(72px, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
}
body.page-light #resonance .resonance-emotion-divider::before,
body.page-light #resonance .resonance-emotion-divider::after {
  content: "" !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(237, 214, 160, 0.52), transparent) !important;
}
body.page-light #resonance .resonance-divider-copy {
  display: grid !important;
  gap: 8px !important;
  text-align: center !important;
}
body.page-light #resonance .resonance-divider-copy span {
  padding: 8px 18px !important;
  border-radius: 999px !important;
  color: rgba(245, 239, 224, 0.94) !important;
  background: rgba(18, 27, 43, 0.62) !important;
  font-size: clamp(17px, 1.35vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}
body.page-light #resonance .resonance-divider-copy small {
  color: rgba(216, 225, 237, 0.62) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}
body.page-light #resonance .divider-wind-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 112px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(255, 235, 190, 0.62) !important;
  border-radius: 999px !important;
  color: #19263a !important;
  background: linear-gradient(135deg, #fff1c8, #a9e2df 52%, #f1b6c6) !important;
  box-shadow: 0 14px 34px rgba(126, 194, 211, 0.2) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}
body.page-light #resonance .divider-wind-btn:hover,
body.page-light #resonance .divider-wind-btn:focus-visible,
body.page-light #resonance .divider-wind-btn.is-playing {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 18px 38px rgba(126, 194, 211, 0.3), 0 0 0 5px rgba(244, 210, 133, 0.1) !important;
  outline: none !important;
}
body.page-light #resonance .divider-wind-btn.is-playing i {
  animation: windPulse 1.15s ease-in-out infinite !important;
}
@keyframes windPulse {
  50% {
    transform: translateX(4px);
    opacity: 0.62;
  }
}
@media (min-width: 1101px) {
  body.page-light #resonance {
    --resonance-desktop-map-height: clamp(460px, 43vh, 590px) !important;
  }
  body.page-light #resonance #herMap,
  body.page-light #resonance #fanMap,
  body.page-light #resonance .maplibregl-map,
  body.page-light #resonance .maplibregl-canvas-container,
  body.page-light #resonance .maplibregl-canvas {
    min-height: var(--resonance-desktop-map-height) !important;
    height: var(--resonance-desktop-map-height) !important;
    max-height: var(--resonance-desktop-map-height) !important;
  }
  body.page-light #resonance .her-map-panel,
  body.page-light #resonance .fan-map-panel {
    align-self: stretch !important;
  }
  body.page-light #resonance .letter-map-layout {
    grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr) !important;
    align-items: stretch !important;
    gap: 22px !important;
  }
}
body.page-light #resonance .city-letter-panel {
  grid-template-columns: 1fr !important;
  grid-template-areas: none !important;
}
body.page-light #resonance .city-letter-heading {
  grid-column: 1 / -1 !important;
}
body.page-light #resonance .letter-board-stats span {
  min-height: 58px !important;
  padding: 12px 16px !important;
}
body.page-light #resonance .voice-map-panel {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 390px !important;
  background: linear-gradient(rgba(15, 28, 44, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 28, 44, 0.14) 1px, transparent 1px),
    radial-gradient(ellipse at 68% 34%, rgba(180, 220, 226, 0.5), transparent 18%),
    radial-gradient(ellipse at 46% 57%, rgba(238, 211, 157, 0.42), transparent 24%),
    linear-gradient(145deg, rgba(236, 246, 249, 0.93), rgba(202, 220, 229, 0.84)) !important;
  background-size: 68px 68px, 68px 68px, auto, auto, auto !important;
}
body.page-light #resonance .voice-map-panel::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  border: 1px solid rgba(56, 101, 128, 0.17) !important;
  border-radius: 48% 52% 44% 56% / 54% 38% 62% 46% !important;
  background: radial-gradient(circle at 18% 34%, rgba(255, 245, 213, 0.94) 0 4px, transparent 5px),
    radial-gradient(circle at 38% 68%, rgba(255, 245, 213, 0.94) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 47%, rgba(255, 245, 213, 0.94) 0 4px, transparent 5px),
    radial-gradient(circle at 79% 30%, rgba(255, 245, 213, 0.94) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(111, 166, 184, 0.13)) !important;
  box-shadow: 0 18px 50px rgba(30, 70, 96, 0.12) !important;
  transform: rotate(-2deg) !important;
}
body.page-light #resonance .voice-map-head {
  position: relative !important;
  z-index: 2 !important;
  border-bottom: 1px solid rgba(53, 90, 116, 0.18) !important;
}
body.page-light #resonance .voice-map-head h3 {
  color: #243b55 !important;
  font-size: 21px !important;
}
body.page-light #resonance .voice-city-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(82px, 1fr)) !important;
}
body.page-light #resonance .voice-city-chip {
  justify-content: space-between !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  border-color: rgba(69, 103, 132, 0.2) !important;
  color: #274b68 !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: 0 8px 20px rgba(52, 87, 111, 0.08) !important;
  backdrop-filter: blur(8px) !important;
}
body.page-light #resonance .postcard-preview-panel {
  min-height: 390px !important;
}
@media (max-width: 1100px) {
  body.page-light #resonance .resonance-emotion-divider {
    grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr) !important;
  }
  body.page-light #resonance .resonance-emotion-divider .divider-wind-btn {
    grid-column: 2 !important;
  }
  body.page-light #resonance .resonance-emotion-divider::after {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  body.page-light #resonance .resonance-divider-copy {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  body.page-light #resonance .voice-city-grid {
    grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
  }
}
/* Final composition lock: remove legacy offsets and keep both map systems aligned. */
body.page-light #resonance .resonance-emotion-divider {
  min-height: 132px !important;
  margin: 0 !important;
}
body.page-light #resonance .city-letter-panel {
  margin: 0 !important;
  padding: clamp(24px, 2.2vw, 38px) !important;
}
body.page-light #resonance .city-letter-panel > .city-letter-heading {
  position: static !important;
  margin: 0 0 26px !important;
  padding: 8px 4px 22px !important;
  transform: none !important;
}
body.page-light #resonance .city-letter-heading .city-letter-copy {
  align-self: auto !important;
  max-width: 720px !important;
}
body.page-light #resonance .city-letter-heading .city-letter-copy h2 {
  margin: 8px 0 8px !important;
  font-size: clamp(38px, 3.2vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.035em !important;
}
body.page-light #resonance .city-letter-heading .city-letter-copy p {
  margin: 0 !important;
  max-width: 620px !important;
  font-size: clamp(16px, 1.15vw, 19px) !important;
  line-height: 1.75 !important;
}
body.page-light #resonance .city-letter-heading .letter-board-stats {
  align-self: center !important;
  justify-content: flex-end !important;
}
body.page-light #resonance .city-letter-panel > .letter-map-layout {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}
body.page-light #resonance .city-letter-panel > .city-letter-lists {
  position: static !important;
  margin: 24px 0 0 !important;
  transform: none !important;
}
body.page-light #resonance .voice-map-panel,
body.page-light #resonance .postcard-preview-panel {
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body.page-light #resonance .postcard-preview {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
}
@media (min-width: 1101px) {
  body.page-light #resonance .her-map-panel,
  body.page-light #resonance .fan-map-panel {
    grid-template-rows: auto var(--resonance-desktop-map-height) auto 1fr !important;
    height: auto !important;
  }
  body.page-light #resonance .her-map-panel #herMap,
  body.page-light #resonance .fan-map-panel #fanMap {
    grid-row: 2 !important;
    min-height: var(--resonance-desktop-map-height) !important;
    height: var(--resonance-desktop-map-height) !important;
    max-height: var(--resonance-desktop-map-height) !important;
  }
  body.page-light #resonance .her-map-panel #herMap .maplibregl-map,
  body.page-light #resonance .fan-map-panel #fanMap .maplibregl-map,
  body.page-light #resonance .her-map-panel #herMap .maplibregl-canvas-container,
  body.page-light #resonance .fan-map-panel #fanMap .maplibregl-canvas-container,
  body.page-light #resonance .her-map-panel #herMap .maplibregl-canvas,
  body.page-light #resonance .fan-map-panel #fanMap .maplibregl-canvas {
    min-height: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  body.page-light #resonance .fan-map-panel .map-search-bar {
    grid-row: 3 !important;
    align-self: start !important;
  }
  body.page-light #resonance .fan-map-panel .fan-control-stack {
    grid-row: 4 !important;
    align-self: stretch !important;
  }
  body.page-light #resonance .city-letter-panel > .letter-map-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    min-height: 470px !important;
  }
  body.page-light #resonance .voice-map-panel,
  body.page-light #resonance .postcard-preview-panel {
    min-height: 470px !important;
    height: 470px !important;
  }
}
@media (max-width: 680px) {
  body.page-light #resonance .resonance-shell {
    gap: 42px !important;
  }
  body.page-light #resonance .resonance-board-heading h2 {
    font-size: 36px !important;
  }
  body.page-light #resonance .resonance-emotion-divider {
    min-height: 190px !important;
  }
  body.page-light #resonance .voice-city-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* 2026-06-22: simplify city search and let footprint cities expand naturally. */
body.page-light #resonance .fan-map-panel .map-search-bar {
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto) !important;
}
body.page-light #resonance .her-map-panel .trace-module {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.page-light #resonance .her-map-panel .trace-module .map-tags {
  display: flex !important;
  flex-flow: row wrap !important;
  align-content: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-width: none !important;
}
body.page-light #resonance .her-map-panel .trace-module .map-tag {
  flex: 0 0 auto !important;
}
@media (max-width: 680px) {
  body.page-light #resonance .fan-map-panel .map-search-bar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}
/* Keep the default layout compact; only share added search height when a location is selected. */
@media (min-width: 1101px) {
  body.page-light #resonance .map-wrapper {
    align-items: start !important;
  }
  body.page-light #resonance .her-map-panel {
    grid-template-rows: auto
      var(--resonance-desktop-map-height)
      auto
      auto !important;
    align-self: start !important;
  }
  body.page-light #resonance .fan-map-panel {
    align-self: start !important;
  }
  body.page-light #resonance.has-map-selection .map-wrapper {
    align-items: stretch !important;
  }
  body.page-light #resonance.has-map-selection .her-map-panel,
  body.page-light #resonance.has-map-selection .fan-map-panel {
    align-self: stretch !important;
  }
  body.page-light #resonance.has-map-selection .her-map-panel {
    grid-template-rows: auto
      var(--resonance-desktop-map-height)
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }
  body.page-light #resonance .her-map-panel .trace-module,
  body.page-light #resonance .her-map-panel .resonance-tide-note {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.page-light #resonance .her-map-panel .trace-module {
    grid-template-rows: auto auto !important;
    align-content: start !important;
    margin-top: 8px !important;
  }
  body.page-light #resonance .her-map-panel .trace-module .map-tags {
    align-content: flex-start !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
  }
  body.page-light #resonance .her-map-panel .resonance-tide-note {
    margin: 4px 12px !important;
  }
  body.page-light #resonance.has-map-selection .her-map-panel .trace-module .map-tags {
    align-content: center !important;
  }
}
/* 2026-06-22: compact cards, aligned metrics, and province-level postcards. */
body.page-light #resonance .resonance-toolbar {
  display: flex !important;
  justify-content: flex-end !important;
  width: auto !important;
  margin: 0 !important;
}
body.page-light #resonance .resonance-actions {
  min-height: 0 !important;
}
body.page-light #resonance .resonance-stats {
  align-items: stretch !important;
}
body.page-light #resonance .resonance-stats span {
  display: grid !important;
  grid-template-rows: 38px 22px !important;
  align-content: center !important;
  min-height: 86px !important;
}
body.page-light #resonance .resonance-stats b {
  display: flex !important;
  align-items: flex-end !important;
  min-height: 38px !important;
  margin: 0 !important;
}
body.page-light #resonance .resonance-stats small {
  display: flex !important;
  align-items: flex-start !important;
  min-height: 22px !important;
  color: inherit !important;
  font: inherit !important;
}
body.page-light #resonance .city-letter-panel {
  gap: 18px !important;
}
body.page-light #resonance .city-letter-panel > .city-letter-heading {
  min-height: 0 !important;
  margin-bottom: 8px !important;
  padding-bottom: 18px !important;
}
body.page-light #resonance .city-letter-panel > .letter-map-layout {
  min-height: 0 !important;
}
body.page-light #resonance .voice-map-panel,
body.page-light #resonance .postcard-preview-panel {
  min-height: 0 !important;
  height: auto !important;
}
body.page-light #resonance .voice-map-panel {
  padding: 18px !important;
}
body.page-light #resonance .voice-map-panel::before {
  inset: 64px 7% 24px !important;
}
body.page-light #resonance .voice-map-head {
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
}
body.page-light #resonance .voice-city-grid {
  align-content: start !important;
  gap: 10px !important;
}
body.page-light #resonance .voice-city-chip {
  min-height: 38px !important;
}
body.page-light #resonance .postcard-preview-panel {
  display: flex !important;
  padding: 12px !important;
}
body.page-light #resonance .postcard-preview {
  flex: 1 1 auto !important;
  min-height: 100% !important;
}
@media (min-width: 1101px) {
  body.page-light #resonance .city-letter-panel > .letter-map-layout {
    align-items: stretch !important;
  }
  body.page-light #resonance .voice-city-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* 2026-06-22 final contrast pass: night atlas / morning letter. */
body.page-light #resonance {
  --res-night-0: #0c1524;
  --res-night-1: #111e31;
  --res-night-2: #18283e;
  --res-night-3: #20344d;
  --res-night-line: rgba(151, 190, 221, 0.2);
  --res-night-text: #f4f7fb;
  --res-night-muted: #b8c6d8;
  --res-night-soft: #91a5bc;
}

html:not([data-theme="light"]) body.page-light #resonance .resonance-shell,
body.page-light:not([data-theme="light"]) #resonance .resonance-shell {
  border-color: rgba(145, 184, 218, 0.2) !important;
  background: linear-gradient(145deg, rgba(11, 21, 36, 0.97), rgba(18, 33, 52, 0.95)) !important;
  box-shadow: 0 30px 86px rgba(2, 7, 16, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(.resonance-board, .city-letter-panel),
body.page-light:not([data-theme="light"]) #resonance :is(.resonance-board, .city-letter-panel) {
  border-color: var(--res-night-line) !important;
  background: linear-gradient(145deg, rgba(23, 39, 61, 0.96), rgba(15, 28, 46, 0.98)) !important;
  box-shadow: 0 24px 60px rgba(2, 8, 18, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html:not([data-theme="light"]) body.page-light #resonance .map-panel,
body.page-light:not([data-theme="light"]) #resonance .map-panel {
  border-color: rgba(151, 190, 221, 0.22) !important;
  background: linear-gradient(180deg, var(--res-night-2), var(--res-night-1)) !important;
  box-shadow: 0 16px 38px rgba(1, 7, 15, 0.28) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(.map-panel-header, .resonance-board-heading, .city-letter-heading),
body.page-light:not([data-theme="light"]) #resonance :is(.map-panel-header, .resonance-board-heading, .city-letter-heading) {
  border-color: rgba(237, 205, 135, 0.2) !important;
  color: var(--res-night-text) !important;
  background: linear-gradient(135deg, rgba(38, 55, 77, 0.96), rgba(25, 40, 61, 0.92)) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(.map-search-bar, .map-actions, .selected-location-info, .resonance-tide-note, .city-letter-list-group, .broadcast-panel),
body.page-light:not([data-theme="light"]) #resonance :is(.map-search-bar, .map-actions, .selected-location-info, .resonance-tide-note, .city-letter-list-group, .broadcast-panel) {
  border-color: rgba(145, 184, 218, 0.18) !important;
  background: rgba(10, 20, 35, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(.search-input-wrapper, .message-input-wrapper),
body.page-light:not([data-theme="light"]) #resonance :is(.search-input-wrapper, .message-input-wrapper) {
  border-color: rgba(151, 190, 221, 0.22) !important;
  color: var(--res-night-text) !important;
  background: rgba(34, 50, 73, 0.92) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(input, select),
body.page-light:not([data-theme="light"]) #resonance :is(input, select) {
  color: var(--res-night-text) !important;
  -webkit-text-fill-color: var(--res-night-text) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(input, select)::placeholder,
body.page-light:not([data-theme="light"]) #resonance :is(input, select)::placeholder {
  color: #aebed1 !important;
  -webkit-text-fill-color: #aebed1 !important;
  opacity: 1 !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(.stat-box, .resonance-stats span, .letter-board-stats span),
body.page-light:not([data-theme="light"]) #resonance :is(.stat-box, .resonance-stats span, .letter-board-stats span) {
  border-color: rgba(156, 194, 224, 0.22) !important;
  color: var(--res-night-text) !important;
  background: linear-gradient(145deg, #20344d, #17283e) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(2, 8, 18, 0.22) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(.stat-box-header, .stat-box-content, .city-letter-list-title, .city-letter-empty),
body.page-light:not([data-theme="light"]) #resonance :is(.stat-box-header, .stat-box-content, .city-letter-list-title, .city-letter-empty) {
  color: var(--res-night-muted) !important;
  -webkit-text-fill-color: var(--res-night-muted) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(.resonance-board-heading h2, .city-letter-copy h2, .map-panel-header, .voice-map-head h3, .panel-title h3),
body.page-light:not([data-theme="light"]) #resonance :is(.resonance-board-heading h2, .city-letter-copy h2, .map-panel-header, .voice-map-head h3, .panel-title h3) {
  color: var(--res-night-text) !important;
  -webkit-text-fill-color: var(--res-night-text) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28) !important;
}

html:not([data-theme="light"]) body.page-light #resonance :is(.resonance-board-heading p, .city-letter-copy p, .resonance-tide-note p),
body.page-light:not([data-theme="light"]) #resonance :is(.resonance-board-heading p, .city-letter-copy p, .resonance-tide-note p) {
  color: var(--res-night-muted) !important;
  -webkit-text-fill-color: var(--res-night-muted) !important;
}

html:not([data-theme="light"]) body.page-light #resonance .voice-map-panel,
body.page-light:not([data-theme="light"]) #resonance .voice-map-panel {
  border-color: rgba(147, 184, 211, 0.32) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 18px 38px rgba(2, 8, 18, 0.25) !important;
}

body.page-light #resonance .postcard-preview strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72) !important;
}

body.page-light #resonance .postcard-preview em {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.74) !important;
}

html[data-theme="light"] body.page-light #resonance .resonance-shell,
body[data-theme="light"].page-light #resonance .resonance-shell {
  border-color: rgba(47, 83, 116, 0.24) !important;
  background: linear-gradient(145deg, #edf5f8, #dfeaf0) !important;
  box-shadow: 0 28px 72px rgba(44, 74, 104, 0.2), inset 0 1px 0 #fff !important;
}

html[data-theme="light"] body.page-light #resonance :is(.resonance-board, .city-letter-panel),
body[data-theme="light"].page-light #resonance :is(.resonance-board, .city-letter-panel) {
  border-color: rgba(51, 86, 119, 0.22) !important;
  background: linear-gradient(145deg, #ffffff, #f3f8fa) !important;
  box-shadow: 0 18px 42px rgba(53, 84, 112, 0.14), inset 0 1px 0 #fff !important;
}

html[data-theme="light"] body.page-light #resonance .map-panel,
body[data-theme="light"].page-light #resonance .map-panel {
  border-color: rgba(49, 84, 116, 0.24) !important;
  background: #f8fbfc !important;
  box-shadow: 0 14px 32px rgba(52, 82, 108, 0.13) !important;
}

html[data-theme="light"] body.page-light #resonance :is(.map-panel-header, .resonance-board-heading, .city-letter-heading),
body[data-theme="light"].page-light #resonance :is(.map-panel-header, .resonance-board-heading, .city-letter-heading) {
  border-color: rgba(51, 86, 119, 0.2) !important;
  color: #19334d !important;
  background: linear-gradient(135deg, #e8f2f6, #f8f2e6) !important;
}

html[data-theme="light"] body.page-light #resonance :is(.resonance-board-heading h2, .city-letter-copy h2, .map-panel-header, .voice-map-head h3, .panel-title h3),
body[data-theme="light"].page-light #resonance :is(.resonance-board-heading h2, .city-letter-copy h2, .map-panel-header, .voice-map-head h3, .panel-title h3) {
  color: #1a3550 !important;
  -webkit-text-fill-color: #1a3550 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.page-light #resonance :is(.resonance-board-heading p, .city-letter-copy p, .resonance-tide-note p, .stat-box-content, .city-letter-empty),
body[data-theme="light"].page-light #resonance :is(.resonance-board-heading p, .city-letter-copy p, .resonance-tide-note p, .stat-box-content, .city-letter-empty) {
  color: #526a82 !important;
  -webkit-text-fill-color: #526a82 !important;
}

html[data-theme="light"] body.page-light #resonance :is(.map-search-bar, .map-actions, .selected-location-info, .resonance-tide-note, .city-letter-list-group),
body[data-theme="light"].page-light #resonance :is(.map-search-bar, .map-actions, .selected-location-info, .resonance-tide-note, .city-letter-list-group) {
  border-color: rgba(56, 91, 123, 0.2) !important;
  background: #edf4f7 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

html[data-theme="light"] body.page-light #resonance :is(.stat-box, .resonance-stats span, .letter-board-stats span),
body[data-theme="light"].page-light #resonance :is(.stat-box, .resonance-stats span, .letter-board-stats span) {
  border-color: rgba(49, 84, 116, 0.22) !important;
  color: #233f5d !important;
  background: linear-gradient(145deg, #ffffff, #e9f1f5) !important;
  box-shadow: 0 10px 26px rgba(54, 84, 111, 0.12), inset 0 1px 0 #fff !important;
}

html[data-theme="light"] body.page-light #resonance :is(.stat-box-header, .city-letter-list-title),
body[data-theme="light"].page-light #resonance :is(.stat-box-header, .city-letter-list-title) {
  color: #294764 !important;
  -webkit-text-fill-color: #294764 !important;
}

body.page-light #resonance .divider-wind-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  min-width: 126px !important;
  min-height: 52px !important;
  gap: 10px !important;
  border: 1px solid rgba(255, 242, 208, 0.84) !important;
  color: #173047 !important;
  background: linear-gradient(120deg, #fff0bd 0%, #b8ece5 48%, #f3bfd0 100%) !important;
  box-shadow: 0 14px 34px rgba(86, 168, 180, 0.28), 0 0 0 0 rgba(233, 196, 115, 0) !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  animation: dividerWindBreathe 3.2s ease-in-out infinite !important;
  will-change: transform, box-shadow;
}

body.page-light #resonance .divider-wind-btn::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border: 1px solid rgba(178, 231, 226, 0.4);
  border-radius: inherit;
  opacity: 0;
  animation: dividerWindHalo 3.2s ease-in-out infinite;
  pointer-events: none;
}

body.page-light #resonance .divider-wind-btn::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(108deg, transparent 20%, rgba(255, 255, 255, 0.5) 46%, transparent 68%);
  opacity: 0.5;
  transform: translateX(-42%);
  transition: transform 420ms ease;
  pointer-events: none;
}

body.page-light #resonance .divider-wind-btn span,
body.page-light #resonance .divider-wind-btn i {
  position: relative;
  z-index: 1;
}

body.page-light #resonance .divider-wind-btn:hover,
body.page-light #resonance .divider-wind-btn:focus-visible {
  animation-play-state: paused !important;
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 20px 42px rgba(86, 168, 180, 0.38), 0 0 0 6px rgba(233, 196, 115, 0.13) !important;
}

body.page-light #resonance .divider-wind-btn:hover::after,
body.page-light #resonance .divider-wind-btn:focus-visible::after {
  transform: translateX(42%);
}

@keyframes dividerWindBreathe {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 34px rgba(86, 168, 180, 0.24), 0 0 0 0 rgba(233, 196, 115, 0);
  }
  50% {
    transform: translateY(-5px) scale(1.025);
    box-shadow: 0 22px 46px rgba(86, 168, 180, 0.36), 0 0 0 7px rgba(233, 196, 115, 0.12);
  }
}

@keyframes dividerWindHalo {
  0%, 100% {
    opacity: 0;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-light #resonance .divider-wind-btn,
  body.page-light #resonance .divider-wind-btn::before {
    animation: none !important;
  }
}
@media (max-width: 1100px) {
  body.page-light #resonance .city-letter-panel > .city-letter-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
  body.page-light #resonance .city-letter-heading .city-letter-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }
  body.page-light #resonance .city-letter-heading .letter-board-stats {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
  }
}

/**
 * 贡献者展示模块样式
 * 
 * 本文件包含贡献者板块的所有样式，包括：
 * - 贡献者卡片布局
 * - 排序和筛选控件
 * - 响应式布局
 * - 深浅主题适配
 * 
 * @file contributors.css
 * @description 贡献者展示模块样式文件
 * @author JZY Twins City Team
 * @created 2026-06-17
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 */
/* ============ 贡献者板块容器 ============ */
/* ============ 贡献者头部 ============ */
/* ============ 控制区域 ============ */
/* ============ 贡献者卡片网格 ============ */
/* ============ 贡献者卡片 ============ */
.contributor-card {
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-edge-subtle);
  border-radius: var(--radius-md);
  padding: clamp(20px, 3vw, 28px);
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contributor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-rose));
  opacity: 0;
  transition: opacity var(--transition-medium);
}
.contributor-card:hover {
  transform: translateY(-8px);
  border-color: var(--glass-edge);
  box-shadow: var(--shadow-card-hover);
  background: var(--glass-surface-medium);
}
.contributor-card:hover::before {
  opacity: 1;
}
/* ============ 贡献者头像 ============ */
.contributor-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--glass-edge);
  margin-bottom: 16px;
  transition: all var(--transition-medium);
  background: var(--aesthetic-bg-3);
}
.contributor-card:hover .contributor-avatar {
  border-color: var(--accent-gold);
  transform: scale(1.05);
}
/* 头像占位符（当没有头像图片时） */
.contributor-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-rose));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: 16px;
  border: 3px solid var(--glass-edge);
  transition: all var(--transition-medium);
}
.contributor-card:hover .contributor-avatar-placeholder {
  border-color: var(--accent-gold);
  transform: scale(1.05);
}
/* ============ 贡献者信息 ============ */
.contributor-name {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  margin-bottom: 4px;
  transition: color var(--transition-fast);
}
.contributor-card:hover .contributor-name {
  color: var(--accent-gold);
}
.contributor-role {
  font-size: var(--font-sm);
  color: var(--text-accent);
  margin-bottom: 12px;
  font-weight: var(--font-weight-medium);
}
.contributor-bio {
  font-size: var(--font-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: 16px;
  flex-grow: 1;
}
/* ============ 贡献类型标签 ============ */
.contributor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.contributor-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--font-xs);
  color: var(--text-soft);
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge-subtle);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.contributor-tag i {
  font-size: var(--font-xs);
  color: var(--accent-gold);
}
.contributor-card:hover .contributor-tag {
  background: var(--glass-surface-medium);
  border-color: var(--glass-edge);
}
/* ============ 贡献者链接 ============ */
.contributor-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: auto;
}
.contributor-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge-subtle);
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-size: var(--font-sm);
}
.contributor-link:hover {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: white;
  transform: translateY(-2px);
}
/* ============ 加入时间 ============ */
.contributor-join-date {
  font-size: var(--font-xs);
  color: var(--text-subtle);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-edge-subtle);
  width: 100%;
}
/* ============ 活跃状态标识 ============ */
.contributor-status {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 2px solid var(--glass-surface-soft);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
.contributor-status.inactive {
  background: var(--text-disabled);
  box-shadow: none;
}
/* ============ 空状态 ============ */
/* ============ 浅色主题适配 ============ */
[data-theme="light"] .contributor-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(180, 175, 170, 0.2);
}
[data-theme="light"] .contributor-card:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(188, 126, 160, 0.15);
}
[data-theme="light"] .contributor-avatar {
  border-color: rgba(180, 175, 170, 0.3);
}
[data-theme="light"] .contributor-card:hover .contributor-avatar {
  border-color: var(--accent-rose-gold);
}
[data-theme="light"] .contributor-avatar-placeholder {
  background: linear-gradient(135deg, var(--accent-rose-gold), var(--accent-sand));
  border-color: rgba(180, 175, 170, 0.3);
}
[data-theme="light"] .contributor-card:hover .contributor-avatar-placeholder {
  border-color: var(--accent-rose-gold);
}
[data-theme="light"] .contributor-name {
  color: var(--text-main);
}
[data-theme="light"] .contributor-card:hover .contributor-name {
  color: var(--text-accent);
}
[data-theme="light"] .contributor-role {
  color: var(--text-accent);
}
[data-theme="light"] .contributor-bio {
  color: var(--text-soft);
}
[data-theme="light"] .contributor-tag {
  background: rgba(230, 190, 200, 0.2);
  border-color: rgba(180, 175, 170, 0.2);
  color: var(--text-accent);
}
[data-theme="light"] .contributor-tag i {
  color: var(--accent-rose-gold);
}
[data-theme="light"] .contributor-card:hover .contributor-tag {
  background: rgba(230, 190, 200, 0.3);
  border-color: rgba(188, 126, 160, 0.15);
}
[data-theme="light"] .contributor-link {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(180, 175, 170, 0.25);
  color: var(--text-muted);
}
[data-theme="light"] .contributor-link:hover {
  background: var(--accent-rose-gold);
  border-color: var(--accent-rose-gold);
  color: white;
}
[data-theme="light"] .contributor-join-date {
  color: var(--text-subtle);
  border-top-color: rgba(180, 175, 170, 0.2);
}
[data-theme="light"] .contributor-status {
  background: var(--accent-rose-gold);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 8px rgba(201, 160, 165, 0.4);
}
[data-theme="light"] .contributor-status.inactive {
  background: var(--text-disabled);
  box-shadow: none;
}
/* ============ 响应式布局 ============ */
/* 平板设备 */
/* 手机设备 */
@media (max-width: 480px) {
  .contributor-card {
    padding: 20px;
  }
  .contributor-avatar,
  .contributor-avatar-placeholder {
    width: 64px;
    height: 64px;
  }
  .contributor-name {
    font-size: var(--font-base);
  }
  .contributor-role {
    font-size: var(--font-xs);
  }
  .contributor-bio {
    font-size: var(--font-xs);
  }
  .contributor-tags {
    gap: 6px;
  }
  .contributor-tag {
    padding: 4px 8px;
    font-size: 10px;
  }
  .contributor-link {
    width: 32px;
    height: 32px;
    font-size: var(--font-xs);
  }
}
/* ============ 运动偏好适配 ============ */
@media (prefers-reduced-motion: reduce) {
  .contributor-card,
  .contributor-avatar,
  .contributor-avatar-placeholder,
  .contributor-link,
  .contributor-tag {
    transition: none;
  }
  .contributor-card:hover {
    transform: none;
  }
  .contributor-card:hover .contributor-avatar,
  .contributor-card:hover .contributor-avatar-placeholder {
    transform: none;
  }
}
/* ============ 打印样式 ============ */
@media print {
  .contributor-card {
    break-inside: avoid;
    border: 1px solid #ddd;
  }
  .contributor-link {
    display: none;
  }
}

/**
 * 粉丝投稿模块样式文件
 * 
 * @file fans-submission.css
 * @description 粉丝投稿功能的样式定义，包含投稿按钮、模态框、表单等组件
 * @author JZY Twins City Team
 * @created 2026-06-17
 * 
 * @maintainer JZY Twins City Team
 * @version 1.0.0
 */
/* ============ 投稿入口按钮 ============ */
.fans-submission-section {
  margin-top: 48px;
  text-align: center;
}
.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid rgba(200, 167, 104, 0.5);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(200, 167, 104, 0.15), rgba(217, 166, 174, 0.12)),
    rgba(255, 255, 255, 0.06);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
}
.submit-btn:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(200, 167, 104, 0.8);
  background: linear-gradient(145deg, rgba(200, 167, 104, 0.25), rgba(217, 166, 174, 0.2)),
    rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22),
    0 0 30px rgba(200, 167, 104, 0.35);
}
.submit-btn i {
  font-size: 18px;
}
/* ============ 投稿模态框 ============ */
.submission-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  isolation: isolate;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 14, 24, 0.65);
  backdrop-filter: blur(20px);
}
.submission-modal.open {
  display: flex;
  animation: modalFadeIn 0.35s ease;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.submission-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
}
.submission-modal-content {
  position: relative;
  z-index: 1;
  width: min(680px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(18, 21, 34, 0.86);
  box-shadow: 0 32px 120px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(217, 166, 174, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(1.2);
  animation: modalSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.submission-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  font-size: 24px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.submission-modal-close:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}
.submission-modal-header {
  margin-bottom: 28px;
  text-align: center;
}
.submission-modal-header h2 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 50%, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.submission-modal-header p {
  margin: 0;
  color: rgba(251, 248, 244, 0.68);
  font-size: 14px;
}
/* ============ 投稿类型切换标签 ============ */
.submission-type-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
}
.type-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) - 4px);
  background: transparent;
  color: rgba(251, 248, 244, 0.7);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.type-tab:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.08);
}
.type-tab.active {
  border-color: rgba(200, 167, 104, 0.5);
  background: linear-gradient(145deg, rgba(200, 167, 104, 0.18), rgba(217, 166, 174, 0.12));
  color: var(--paper);
  box-shadow: 0 0 20px rgba(200, 167, 104, 0.2);
}
.type-tab i {
  font-size: 16px;
}
/* ============ 表单样式 ============ */
.submission-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  color: rgba(251, 248, 244, 0.82);
  font-size: 13px;
  font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(200, 167, 104, 0.6);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(200, 167, 104, 0.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(251, 248, 244, 0.45);
}
.form-group textarea {
  resize: vertical;
  min-height: 100px;
}
.form-hint {
  margin: 4px 0 0;
  color: rgba(251, 248, 244, 0.5);
  font-size: 12px;
}
/* ============ 文件上传区域 ============ */
.upload-area {
  position: relative;
  min-height: 140px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.35s ease;
  overflow: hidden;
}
.upload-area:hover {
  border-color: rgba(200, 167, 104, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.upload-area.dragover {
  border-color: rgba(200, 167, 104, 0.8);
  background: rgba(200, 167, 104, 0.1);
  transform: scale(1.02);
}
.upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  gap: 8px;
  color: rgba(251, 248, 244, 0.6);
}
.upload-hint i {
  font-size: 32px;
  color: rgba(200, 167, 104, 0.6);
}
.upload-hint span {
  font-size: 14px;
  font-weight: 500;
}
.upload-hint p {
  margin: 0;
  font-size: 12px;
  color: rgba(251, 248, 244, 0.45);
}
/* ============ 预览区域 ============ */
.preview-container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(251, 248, 244, 0.4);
  gap: 8px;
}
.preview-placeholder i {
  font-size: 40px;
}
.preview-placeholder span {
  font-size: 13px;
}
.preview-container iframe {
  width: 100%;
  height: 100%;
}
.preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-remove:hover {
  background: rgba(255, 0, 0, 0.7);
  transform: scale(1.1);
}
/* ============ 表单消息 ============ */
.form-message {
  min-height: 24px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  text-align: center;
  transition: all 0.25s ease;
}
.form-message.error {
  background: rgba(255, 100, 100, 0.15);
  color: #ff9999;
  border: 1px solid rgba(255, 100, 100, 0.3);
}
.form-message.warning {
  background: rgba(255, 180, 80, 0.15);
  color: #ffc880;
  border: 1px solid rgba(255, 180, 80, 0.3);
}
.form-message.success {
  background: rgba(100, 200, 100, 0.15);
  color: #99ff99;
  border: 1px solid rgba(100, 200, 100, 0.3);
}
/* ============ 表单按钮组 ============ */
.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.btn-cancel,
.btn-submit {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.35s ease;
}
.btn-cancel {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(251, 248, 244, 0.8);
}
.btn-cancel:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
}
.btn-submit {
  border: 0;
  background: linear-gradient(135deg, var(--paper), var(--rose-soft) 52%, var(--gold));
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(200, 167, 104, 0.3);
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(200, 167, 104, 0.4),
    0 0 20px rgba(200, 167, 104, 0.3);
}
.btn-submit:active {
  transform: translateY(0);
}
/* ============ 成功提示 Toast ============ */
.success-toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(100, 200, 100, 0.3);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(100, 200, 100, 0.15), rgba(159, 197, 199, 0.12)),
    rgba(18, 21, 34, 0.92);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(100, 200, 100, 0.2);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}
.success-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #66ff66, #88ffaa);
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}
.success-content {
  flex: 1;
}
.success-content h3 {
  margin: 0 0 4px;
  color: #88ffaa;
  font-size: 16px;
}
.success-content p {
  margin: 0;
  color: rgba(251, 248, 244, 0.7);
  font-size: 13px;
}
.success-close {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-close:hover {
  background: rgba(255, 255, 255, 0.15);
}
/* ============ 响应式设计 ============ */
@media (max-width: 720px) {
  .submission-modal-content {
    padding: 24px;
    border-radius: var(--radius-lg);
  }
  .submission-modal-header h2 {
    font-size: 22px;
  }
  .form-actions {
    flex-direction: column;
  }
  .success-toast {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
  .submit-btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .submission-modal {
    padding: 16px;
  }
  .submission-type-tabs {
    flex-direction: column;
  }
  .preview-container {
    aspect-ratio: 4 / 3;
  }
}

/* Emotion Flow V2
   Independent visual system for the audio emotion page.
   This file is imported last and intentionally overrides all legacy shells. */
html:has(body.emotion-flow-active),
body.emotion-flow-active {
  width: 100vw !important;
  min-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--emotion-depth, #071126) !important;
  color: var(--emotion-ink, #fffaf2) !important;
}
/* 2026-06-21: voice card hierarchy, source semantics and playback emphasis */
body.page-audio main #audio-gallery .audio-card-body {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  width: 100%;
  max-width: 100% !important;
  height: 100% !important;
}
body.page-audio main #audio-gallery .audio-card-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0 0 13px;
}
body.page-audio main #audio-gallery .audio-title {
  max-width: calc(100% - 82px) !important;
  margin: 0 !important;
  font-size: clamp(24px, 1.75vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.015em !important;
}
body.page-audio main #audio-gallery .audio-card-line {
  display: -webkit-box;
  max-width: min(100%, 42em);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(238, 243, 252, 0.82);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  overflow-wrap: normal;
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
  transition: color 0.32s ease, text-shadow 0.32s ease, transform 0.32s ease;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.page-audio main #audio-gallery .audio-card.is-current .audio-card-line {
  color: #ead3a0 !important;
  -webkit-text-fill-color: #ead3a0 !important;
  text-shadow: 0 0 11px rgba(234, 211, 160, 0.16);
}
body.page-audio main #audio-gallery .audio-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline;
  gap: 7px 20px !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}
body.page-audio main #audio-gallery .audio-card-meta div {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  gap: 5px;
}
body.page-audio main #audio-gallery .audio-card-meta dt {
  color: rgba(230, 235, 246, 0.58);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.page-audio main #audio-gallery .audio-card-meta dd {
  margin: 0;
  font-weight: 700;
}
body.page-audio main #audio-gallery .audio-source-link {
  text-underline-offset: 3px;
}
body.page-audio main #audio-gallery .audio-card.is-announcement .audio-type {
  color: #6e3f91 !important;
  border-color: rgba(151, 91, 190, 0.38) !important;
  background: linear-gradient(135deg, rgba(239, 222, 255, 0.96), rgba(218, 190, 245, 0.92)) !important;
  box-shadow: 0 8px 22px rgba(113, 66, 149, 0.14) !important;
}
[data-theme="light"] body.page-audio main #audio-gallery .audio-card-line {
  color: #263b59;
}
[data-theme="light"] body.page-audio main #audio-gallery .audio-card.is-current .audio-card-line {
  color: #8fc7f2 !important;
  -webkit-text-fill-color: #8fc7f2 !important;
  text-shadow: 0 0 8px rgba(221, 241, 255, 0.32);
}
[data-theme="light"] body.page-audio main #audio-gallery .audio-card-meta dt {
  color: #71809a;
}
body.page-audio main #audio-gallery .audio-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 72px;
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(220, 229, 244, 0.16);
}
[data-theme="light"] body.page-audio main #audio-gallery .audio-card-footer {
  border-top-color: rgba(82, 111, 151, 0.16);
}
body.page-audio main #audio-gallery .audio-tags {
  align-self: auto !important;
  max-width: calc(100% - 78px);
  max-height: none !important;
  padding: 0 !important;
}
body.page-audio main #audio-gallery .audio-play-action {
  position: static !important;
  flex: 0 0 auto;
  align-self: auto;
}
body.page-audio main #audio-gallery .audio-play-btn {
  position: static !important;
}
@media (max-width: 760px) {
  body.page-audio main #audio-gallery .audio-card-body {
    display: flex !important;
  }
  body.page-audio main #audio-gallery .audio-card-copy {
    gap: 0;
    padding: 0 0 10px;
  }
  body.page-audio main #audio-gallery .audio-title {
    max-width: calc(100% - 68px) !important;
    font-size: clamp(21px, 6vw, 25px) !important;
  }
  body.page-audio main #audio-gallery .audio-card-line {
    min-height: 0;
    font-size: 17px;
    line-height: 1.4;
  }
  body.page-audio main #audio-gallery .audio-card-meta {
    gap: 5px 14px !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }
  body.page-audio main #audio-gallery .audio-card-meta dt {
    font-size: 12px;
  }
  body.page-audio main #audio-gallery .audio-card-footer {
    gap: 12px;
    min-height: 66px;
    padding-top: 13px;
  }
  body.page-audio main #audio-gallery .audio-tags {
    max-width: calc(100% - 66px);
  }
}
body.emotion-flow-active,
body.emotion-flow-active * {
  box-sizing: border-box;
}
body.emotion-flow-active::before,
body.emotion-flow-active::after,
body.emotion-flow-active main::before,
body.emotion-flow-active main::after,
body.emotion-flow-active .page-shell,
body.emotion-flow-active .site-header,
body.emotion-flow-active .section-heading,
body.emotion-flow-active .audio-filters,
body.emotion-flow-active .topology-toggle,
body.emotion-flow-active .theme-toggle,
body.emotion-flow-active #particleCanvas,
body.emotion-flow-active .cursor-aura,
body.emotion-flow-active .ambient,
body.emotion-flow-active .bgm-control,
body.emotion-flow-active .site-footer,
body.emotion-flow-active .radio-compass {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  transform: none !important;
}
body.emotion-flow-active main,
body.emotion-flow-active .audio-gallery-section,
body.emotion-flow-active .audio-cards-container.emotion-flow-stage,
body.emotion-flow-active .radio-emotion-stage.emotion-new-page {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.emotion-flow-active .audio-gallery-section {
  z-index: 1000 !important;
  isolation: isolate;
}
body.emotion-flow-active .audio-gallery-section::before,
body.emotion-flow-active .audio-gallery-section::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.emotion-flow-active .audio-gallery-section::before {
  z-index: -3;
  background: radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 46%, transparent), transparent 30%),
    radial-gradient(circle at 52% 46%, color-mix(in srgb, var(--emotion-current, #e8b7c5) 78%, transparent), transparent 44%),
    radial-gradient(circle at 86% 84%, color-mix(in srgb, var(--emotion-depth, #071126) 88%, transparent), transparent 46%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--emotion-current, #e8b7c5) 42%, var(--emotion-depth, #071126)),
      color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 18%, var(--emotion-depth, #071126)) 46%,
      var(--emotion-depth, #071126) 100%
    ) !important;
  transition: background 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.emotion-flow-active .audio-gallery-section::after {
  z-index: -2;
  background: radial-gradient(circle at 50% 48%, transparent 34%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--emotion-current, #e8b7c5) 6%, transparent) 1px, transparent 1px) !important;
  background-size: auto, 96px 96px, 96px 96px !important;
  opacity: 0.3 !important;
  transform: translateX(var(--emotion-pan-reverse, 0px));
  transition: background 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms ease;
}
body.emotion-flow-active .emotion-new-page {
  z-index: 1 !important;
  display: block !important;
  color: var(--emotion-ink, #fffaf2) !important;
}
body.emotion-flow-active .emotion-new-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
body.emotion-flow-active .emotion-new-aura .flow-glow {
  position: absolute;
  display: block !important;
  width: 48vmax;
  height: 48vmax;
  border-radius: 50%;
  filter: blur(58px);
  transition: background 900ms ease, opacity 900ms ease, transform 900ms ease;
}
body.emotion-flow-active .flow-glow-warm {
  left: -10vmax;
  top: -14vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--emotion-current-accent) 58%, transparent), transparent 66%);
  opacity: 0.54;
}
body.emotion-flow-active .flow-glow-cold {
  right: -12vmax;
  bottom: -16vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--emotion-current) 42%, transparent), transparent 68%);
  opacity: 0.34;
}
body.emotion-flow-active .flow-sea-line {
  position: absolute;
  left: 10vw;
  right: 10vw;
  bottom: 18vh;
  display: block !important;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--emotion-current-accent) 38%, transparent), transparent);
  opacity: 0.38;
}
body.emotion-flow-active .emotion-new-page-shell {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  place-items: center !important;
  gap: clamp(14px, 2.4vh, 30px) !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: clamp(34px, 5.8vh, 72px) clamp(22px, 6vw, 104px) clamp(28px, 5vh, 58px) !important;
}
body.emotion-flow-active .emotion-new-page-panel {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(900px, 82vw);
  min-height: clamp(340px, 48vh, 520px);
  margin: 0 !important;
  padding: clamp(78px, 10vh, 118px) clamp(30px, 6.6vw, 88px) clamp(48px, 7vh, 82px);
  color: var(--emotion-ink, #fffaf2);
  text-align: center;
  border: 0;
  transition: color 800ms ease, background 900ms cubic-bezier(0.22, 1, 0.36, 1), border-color 900ms ease, box-shadow 900ms ease;
}
body.emotion-flow-active .emotion-new-page-panel::before {
  content: "";
  position: absolute;
  inset: -18% -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 14%, transparent) 0%, transparent 56%),
    radial-gradient(ellipse at 54% 66%, color-mix(in srgb, var(--emotion-current, #e8b7c5) 20%, transparent) 0%, transparent 68%);
  filter: blur(24px);
  opacity: 0.82;
  pointer-events: none;
  transition: background 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease;
}
body.emotion-flow-active .emotion-stage-count {
  position: absolute;
  top: clamp(22px, 4vh, 38px);
  left: clamp(24px, 4.8vw, 68px);
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: color-mix(in srgb, var(--emotion-ink, #fffaf2) 70%, transparent) !important;
  opacity: 0.72;
}
body.emotion-flow-active .emotion-stage-number {
  display: inline-block;
  color: var(--emotion-ink, #fffaf2) !important;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(18px, 1.9vw, 30px) !important;
  font-weight: 800;
  line-height: 1;
  opacity: 1;
}
body.emotion-flow-active .emotion-stage-total {
  color: color-mix(in srgb, var(--emotion-ink, #fffaf2) 54%, transparent);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
}
body.emotion-flow-active .emotion-stage-chapter {
  position: absolute;
  top: clamp(22px, 4vh, 38px);
  right: clamp(24px, 4.8vw, 68px);
  margin: 0;
  color: color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 64%, var(--emotion-ink, #fffaf2)) !important;
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  line-height: 1;
  opacity: 0.76;
}
body.emotion-flow-active .emotion-stage-title {
  max-width: min(760px, 76vw);
  margin: 0 auto;
  color: var(--emotion-ink, #fffaf2) !important;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 800;
}
body.emotion-flow-active .emotion-stage-note {
  max-width: min(700px, 74vw);
  margin: clamp(18px, 2.8vh, 30px) auto 0;
  color: color-mix(in srgb, var(--emotion-ink, #fffaf2) 76%, transparent) !important;
  font-weight: 700;
  line-height: 1.62;
}
body.emotion-flow-active .emotion-stage-line-wrap {
  max-width: min(680px, 72vw);
  margin-top: clamp(22px, 3.4vh, 40px);
  padding-top: clamp(18px, 2.8vh, 30px);
  border-top: 1px solid color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 11%, transparent);
  color: color-mix(in srgb, var(--emotion-ink, #fffaf2) 78%, transparent) !important;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(18px, 1.9vw, 28px) !important;
  font-weight: 600;
  line-height: 1.56;
  white-space: pre-line;
}
body.emotion-flow-active .emotion-stage-line {
  white-space: pre-line;
}
body.emotion-flow-active .emotion-afterglow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(600px, 66vw) !important;
  height: clamp(32px, 5vh, 58px) !important;
  opacity: 0.36;
}
body.emotion-flow-active .emotion-afterglow-bar {
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--emotion-current-accent), var(--emotion-current)) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--emotion-current) 28%, transparent);
  transform: scaleX(calc(0.78 + var(--audio-level, 0.12) * 0.34));
  transition: height 90ms linear, opacity 120ms ease, background 850ms ease, box-shadow 850ms ease, transform 120ms ease;
}
body.emotion-flow-active .emotion-stage-bottom {
  display: grid !important;
  justify-items: center;
  gap: clamp(18px, 2.8vh, 30px);
  width: min(780px, 78vw) !important;
  pointer-events: none;
}
body.emotion-flow-active .emotion-spectrum {
  display: flex !important;
  justify-content: center;
  width: 100%;
  pointer-events: auto;
}
body.emotion-flow-active .emotion-light-dot {
  display: grid !important;
  place-items: center;
  width: clamp(9px, 0.8vw, 13px);
  height: clamp(9px, 0.8vw, 13px);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--dot-color, var(--emotion-current)) 46%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--dot-color, var(--emotion-current)) 28%, transparent);
  color: transparent;
  cursor: pointer;
  opacity: 0.48;
  transition: transform 180ms ease, opacity 180ms ease, background 800ms ease, border-color 800ms ease;
}
body.emotion-flow-active .emotion-light-dot span {
  display: none;
}
body.emotion-flow-active .emotion-light-dot.active {
  transform: scale(2.15);
  opacity: 1;
  background: linear-gradient(135deg, var(--emotion-current-accent), var(--emotion-current)) !important;
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--emotion-current) 16%, transparent);
}
/* Chaptered spectrum: 29 points read as three emotional acts instead of one flat row. */
body.emotion-flow-active .emotion-spectrum {
  align-items: end;
  gap: clamp(14px, 2vw, 28px);
  opacity: 0.72;
}
body.emotion-flow-active .emotion-spectrum-chapter {
  position: relative;
  display: grid;
  align-items: end;
  gap: 10px;
  min-width: 0;
  padding-top: 25px;
}
body.emotion-flow-active .emotion-spectrum-chapter::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 24%, transparent), transparent);
}
body.emotion-flow-active .emotion-spectrum-chapter.chapter-daylight {
  flex: 15 1 0;
}
body.emotion-flow-active .emotion-spectrum-chapter.chapter-mist {
  flex: 11 1 0;
}
body.emotion-flow-active .emotion-spectrum-chapter.chapter-dawn {
  flex: 3 1 0;
}
body.emotion-flow-active .emotion-spectrum-label {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: color-mix(in srgb, var(--emotion-ink, #fffaf2) 76%, transparent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--emotion-depth, #071126) 38%, transparent);
  transform: translateX(-50%);
}
body.emotion-flow-active .emotion-spectrum-label small {
  color: color-mix(in srgb, var(--emotion-ink, #fffaf2) 52%, transparent);
  font-size: 9px;
  font-weight: 800;
}
body.emotion-flow-active .emotion-spectrum-dots {
  display: flex;
  justify-content: center;
  gap: clamp(5px, 0.62vw, 9px);
}
body.emotion-flow-active .emotion-spectrum-chapter.chapter-daylight .emotion-light-dot {
  box-shadow: 0 0 18px color-mix(in srgb, #ffd057 10%, transparent);
}
body.emotion-flow-active .emotion-spectrum-chapter.chapter-mist .emotion-light-dot {
  border-radius: 45% 55% 52% 48%;
  filter: saturate(0.86);
}
body.emotion-flow-active .emotion-spectrum-chapter.chapter-dawn .emotion-light-dot {
  box-shadow: 0 0 22px color-mix(in srgb, #7fc7ff 18%, transparent);
}
body.emotion-flow-active.emotion-flow-playing .emotion-afterglow {
  opacity: calc(0.42 + var(--emotion-pulse, 0) * 0.28);
  transform: translateY(calc(var(--emotion-pulse, 0) * -3px)) scaleX(calc(1 + var(--emotion-pulse, 0) * 0.035));
  transition: opacity 260ms ease, transform 260ms ease;
}
body.emotion-flow-active.emotion-flow-playing .emotion-afterglow-bar {
  box-shadow: 0 0 calc(14px + var(--emotion-pulse, 0) * 24px) color-mix(in srgb, var(--emotion-current) calc(28% + var(--emotion-pulse, 0) * 22%), transparent),
    0 0 calc(4px + var(--emotion-pulse, 0) * 12px) color-mix(in srgb, var(--emotion-current-accent) 34%, transparent);
}
@keyframes emotionProgressBreath {
  0%,
  100% {
    transform: scaleY(0.78);
    opacity: 0.42;
  }
  48% {
    transform: scaleY(1.18);
    opacity: 0.92;
  }
}
body.emotion-flow-active .emotion-stage-controls {
  position: relative;
  z-index: 4;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0;
}
body.emotion-flow-active .emotion-control {
  display: grid !important;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--emotion-current-accent) 16%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--emotion-ink, #fffaf2) 74%, transparent) !important;
  background: color-mix(in srgb, var(--emotion-depth, #071126) 18%, transparent) !important;
  cursor: pointer;
  backdrop-filter: blur(18px);
  transition: transform 180ms ease, background 220ms ease, border-color 220ms ease;
}
body.emotion-flow-active .emotion-stage-play {
  width: 64px;
  height: 64px;
  color: color-mix(in srgb, var(--emotion-control-ink, #172135) 78%, transparent) !important;
  background: color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 34%, transparent) !important;
  box-shadow: 0 14px 46px color-mix(in srgb, var(--emotion-current) 22%, transparent);
  opacity: 0.78;
  pointer-events: auto;
}
body.emotion-flow-active .emotion-control:hover,
body.emotion-flow-active .emotion-control:focus-visible {
  border-color: color-mix(in srgb, var(--emotion-current-accent) 52%, transparent);
  background: color-mix(in srgb, var(--emotion-depth, #071126) 52%, transparent) !important;
  transform: translateY(-2px);
  outline: none;
}
@media (max-width: 720px) {
  body.emotion-flow-active .emotion-new-page-shell {
    gap: 16px !important;
    padding: 30px 16px 22px !important;
  }
  body.emotion-flow-active .emotion-new-page-panel {
    width: min(92vw, 620px);
    min-height: min(58vh, 540px);
    padding: 72px 20px 42px;
  }
  body.emotion-flow-active .emotion-stage-number {
    font-size: 20px !important;
  }
  body.emotion-flow-active .emotion-stage-count {
    top: 22px;
    left: 20px;
  }
  body.emotion-flow-active .emotion-stage-chapter {
    top: 25px;
    right: 20px;
    max-width: 46vw;
    text-align: right;
  }
  body.emotion-flow-active .emotion-stage-title {
    max-width: 84vw;
    font-size: clamp(34px, 10vw, 48px) !important;
  }
  body.emotion-flow-active .emotion-stage-note {
    max-width: 82vw;
    font-size: 17px;
  }
  body.emotion-flow-active .emotion-stage-line-wrap {
    max-width: 82vw;
    font-size: clamp(16px, 5.2vw, 22px) !important;
  }
  body.emotion-flow-active .emotion-afterglow {
    width: min(78vw, 420px) !important;
  }
  body.emotion-flow-active .emotion-stage-bottom {
    width: min(86vw, 520px) !important;
  }
  body.emotion-flow-active .emotion-stage-controls {
    gap: 0;
  }
  body.emotion-flow-active .emotion-control {
    width: 46px;
    height: 46px;
  }
  body.emotion-flow-active .emotion-stage-play {
    width: 64px;
    height: 64px;
  }
}
/* Final emotion-canvas lock: the immersive stage must not inherit light/dark theme shells. */
html:has(body.emotion-flow-active),
[data-theme="light"] body.emotion-flow-active,
[data-theme="dark"] body.emotion-flow-active,
body.emotion-flow-active,
body.emotion-flow-active main,
body.emotion-flow-active #audio-gallery,
body.emotion-flow-active .audio-gallery-section,
body.emotion-flow-active .audio-cards-container.emotion-flow-stage,
body.emotion-flow-active .radio-emotion-stage.emotion-new-page {
  --emotion-canvas: radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 58%, transparent), transparent 30%),
    radial-gradient(circle at 54% 42%, color-mix(in srgb, var(--emotion-current, #e8b7c5) 68%, transparent), transparent 44%),
    radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--emotion-current, #e8b7c5) 22%, var(--emotion-depth, #071126)), transparent 46%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 20%, var(--emotion-depth, #071126)) 0%,
      color-mix(in srgb, var(--emotion-current, #e8b7c5) 34%, var(--emotion-depth, #071126)) 48%,
      var(--emotion-depth, #071126) 100%
    );
  background: var(--emotion-canvas) !important;
  background-color: var(--emotion-depth, #071126) !important;
}
body.emotion-flow-active .audio-gallery-section,
body.emotion-flow-active .audio-cards-container.emotion-flow-stage,
body.emotion-flow-active .radio-emotion-stage.emotion-new-page {
  border: 0 !important;
  box-shadow: none !important;
}
body.emotion-flow-active .audio-gallery-section::before,
body.emotion-flow-active .audio-gallery-section::after {
  content: none !important;
  display: none !important;
}
body.emotion-flow-active .emotion-new-aura {
  background: radial-gradient(circle at calc(50% + var(--emotion-pan, 0px)) 42%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) calc(24% + var(--emotion-pulse, 0) * 18%), transparent), transparent calc(40% + var(--emotion-pulse, 0) * 8%)),
    radial-gradient(circle at calc(52% + var(--emotion-pan-reverse, 0px)) 72%, color-mix(in srgb, var(--emotion-current, #e8b7c5) calc(28% + var(--emotion-pulse, 0) * 16%), transparent), transparent calc(46% + var(--emotion-pulse, 0) * 7%)) !important;
  filter: saturate(calc(0.98 + var(--emotion-pulse, 0) * 0.28));
  transform: scale(calc(1 + var(--emotion-pulse, 0) * 0.018));
  transition: background 820ms ease, filter 420ms ease, transform 420ms ease;
}
body.emotion-flow-active .emotion-new-page-panel {
  background: transparent !important;
  box-shadow: none !important;
}
body.emotion-flow-active .emotion-new-aura::after {
  content: "";
  position: absolute;
  inset: -8%;
  display: block;
  background: radial-gradient(circle at 34% 38%, color-mix(in srgb, var(--emotion-previous-accent, transparent) 52%, transparent), transparent 32%),
    radial-gradient(circle at 68% 62%, color-mix(in srgb, var(--emotion-previous, transparent) 46%, transparent), transparent 40%);
  opacity: 0;
  filter: blur(32px) saturate(1.08);
  pointer-events: none;
}
body.emotion-flow-active .is-color-echoing .emotion-new-aura::after {
  animation: emotionColorEcho 1.25s cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}
@keyframes emotionColorEcho {
  0% {
    opacity: 0.48;
    transform: scale(0.98) translateX(-1.2%);
  }
  55% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: scale(1.08) translateX(2.4%);
  }
}
body.emotion-flow-active .emotion-new-page-panel > .emotion-stage-count {
  position: absolute !important;
  top: clamp(22px, 4vh, 38px) !important;
  left: clamp(24px, 4.8vw, 68px) !important;
  right: auto !important;
  order: 0 !important;
  margin: 0 !important;
  transform: none !important;
}
body.emotion-flow-active .emotion-new-page-panel > .emotion-stage-chapter {
  position: absolute !important;
  top: clamp(25px, 4.3vh, 42px) !important;
  right: clamp(24px, 4.8vw, 68px) !important;
  left: auto !important;
  order: 0 !important;
  margin: 0 !important;
  transform: none !important;
}
body.emotion-flow-active .emotion-new-page-panel .emotion-stage-line-wrap {
  font-size: clamp(14px, 1.22vw, 18px) !important;
}
/* Main-stage controls wake on entry or intentful input, never from hover alone. */
body.emotion-flow-active .emotion-stage-controls {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.emotion-flow-active .is-controls-visible .emotion-stage-controls,
body.emotion-flow-active .emotion-stage-controls:focus-within {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
body.emotion-flow-active .emotion-stage-play {
  position: relative;
  overflow: visible;
}
body.emotion-flow-active .emotion-flow-exit {
  position: fixed;
  top: clamp(14px, 2.2vw, 28px);
  left: clamp(14px, 2.2vw, 28px);
  z-index: 20;
  display: inline-grid;
  grid-template-columns: 34px 0fr;
  align-items: center;
  gap: 0;
  min-width: 46px;
  height: 46px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 38%, transparent);
  border-radius: 999px;
  color: var(--emotion-ink, #fffaf2);
  background: color-mix(in srgb, var(--emotion-depth, #071126) 42%, transparent) !important;
  box-shadow: 0 18px 54px color-mix(in srgb, var(--emotion-depth, #071126) 34%, transparent);
  cursor: pointer;
  backdrop-filter: blur(18px);
  transition: grid-template-columns 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
body.emotion-flow-active .emotion-flow-exit i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--emotion-control-ink, #172135);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emotion-current-accent, #fff7ee), var(--emotion-current, #e8b7c5));
}
body.emotion-flow-active .emotion-flow-exit span {
  min-width: 0;
  overflow: hidden;
  color: var(--emotion-ink, #fffaf2);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease 60ms;
}
body.emotion-flow-active .emotion-flow-exit:hover,
body.emotion-flow-active .emotion-flow-exit:focus-visible {
  grid-template-columns: 34px 5.5em;
  gap: 8px;
  border-color: color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 62%, transparent);
  background: color-mix(in srgb, var(--emotion-depth, #071126) 62%, transparent) !important;
  transform: translateY(-1px);
  outline: none;
}
body.emotion-flow-active .emotion-flow-exit:hover span,
body.emotion-flow-active .emotion-flow-exit:focus-visible span {
  opacity: 1;
}
@media (max-width: 720px) {
  body.emotion-flow-active .emotion-flow-exit {
    top: 12px;
    left: 12px;
    grid-template-columns: 32px;
    min-width: 42px;
    height: 42px;
    padding: 5px;
  }
  body.emotion-flow-active .emotion-flow-exit i {
    width: 32px;
    height: 32px;
  }
  body.emotion-flow-active .emotion-flow-exit span {
    display: none;
  }
}
/* Editorial tide prologue / epilogue. Clear, luminous, and independent from theme. */
body.emotion-flow-active .emotion-entry-sequence,
body.emotion-flow-active .emotion-ending-sequence {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: grid;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}
body.emotion-flow-active .emotion-entry-sequence {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(1.01);
  transition: opacity 620ms ease, visibility 620ms ease, transform 620ms ease;
}
body.emotion-flow-active .is-intro-playing .emotion-entry-sequence {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
body.emotion-flow-active .is-intro-complete .emotion-entry-sequence {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px) scale(0.99);
}
body.emotion-flow-active .is-intro-playing .emotion-new-page-shell,
body.emotion-flow-active .is-intro-playing .emotion-new-aura,
body.emotion-flow-active .is-ending-visible .emotion-new-page-shell,
body.emotion-flow-active .is-ending-visible .emotion-new-aura {
  opacity: 0;
  pointer-events: none !important;
}
body.emotion-flow-active .emotion-entry-sequence::before,
body.emotion-flow-active .emotion-ending-sequence::before {
  content: "";
  position: absolute;
  pointer-events: none;
}
body.emotion-flow-active .emotion-entry-sequence::after,
body.emotion-flow-active .emotion-ending-sequence::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
body.emotion-flow-active .emotion-entry-seed {
  position: relative;
  z-index: 1;
  display: block;
  justify-self: center;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.86;
}
body.emotion-flow-active .is-intro-playing .emotion-entry-seed {
  animation: tideOrbDrift 7.2s cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
}
body.emotion-flow-active .emotion-entry-copy,
body.emotion-flow-active .emotion-ending-copy {
  position: relative;
  z-index: 2;
  display: grid;
}
body.emotion-flow-active .emotion-entry-copy::before,
body.emotion-flow-active .emotion-ending-copy::before {
  width: fit-content;
  border-bottom: 1px solid color-mix(in srgb, var(--emotion-current, #e8b7c5) 58%, transparent);
  font-family: "Helvetica Neue", "Plus Jakarta Sans", "Avenir Next", sans-serif;
  font-weight: 300;
}
body.emotion-flow-active .emotion-entry-skip,
body.emotion-flow-active .emotion-replay {
  position: relative;
  z-index: 2;
  cursor: pointer;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 14px;
  font-weight: 900;
  backdrop-filter: blur(18px);
}
body.emotion-flow-active .emotion-entry-skip {
  opacity: 0;
  transform: translateY(12px);
}
body.emotion-flow-active .emotion-ending-sequence {
  z-index: 17;
  opacity: 0;
  visibility: hidden;
  transition: opacity 720ms ease, visibility 720ms ease;
}
body.emotion-flow-active .is-ending-visible .emotion-ending-sequence {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.emotion-flow-active .emotion-ending-sequence::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(circle at 78% 46%, rgba(255, 255, 255, 0.54), transparent 26%);
}
body.emotion-flow-active .emotion-ending-sequence::after {
  bottom: auto;
  top: clamp(54px, 10vh, 120px);
  background: linear-gradient(90deg, transparent, rgba(116, 90, 40, 0.22), transparent);
}
body.emotion-flow-active .emotion-replay {
  opacity: 0;
  transform: translateY(12px);
}
body.emotion-flow-active .is-overbright .emotion-new-page-shell {
  animation: shoreLightWash 1.15s ease forwards;
}
body.emotion-flow-active .is-rewinding .emotion-new-page-shell,
body.emotion-flow-active .is-rewinding .emotion-new-aura {
  animation: tideRewind 560ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
body.emotion-flow-active .is-rewinding .emotion-ending-sequence {
  opacity: 0;
  visibility: hidden;
}
@keyframes tideOrbDrift {
  0% {
    transform: translateX(-3vw) scale(0.84);
    opacity: 0.46;
    filter: blur(8px) saturate(0.7);
  }
  48% {
    transform: translateX(0) scale(1);
    opacity: 0.82;
    filter: blur(1px) saturate(0.96);
  }
  100% {
    transform: translateX(2vw) scale(1.08);
    opacity: 0.92;
    filter: blur(0) saturate(1.02);
  }
}
@keyframes tideTypeIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes tideButtonIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes shoreLightWash {
  0% {
    filter: brightness(1) blur(0);
    opacity: 1;
  }
  42% {
    filter: brightness(2.3) blur(1px);
    opacity: 1;
  }
  100% {
    filter: brightness(1.08) blur(4px);
    opacity: 0;
  }
}
@keyframes tideRewind {
  0% {
    filter: blur(0) contrast(1);
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  42% {
    filter: blur(12px) contrast(1.6);
    transform: translateX(-3vw) scale(1.04);
    opacity: 0.62;
  }
  100% {
    filter: blur(0) contrast(1);
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}
@media (max-width: 820px) {
  body.emotion-flow-active .emotion-entry-seed {
    order: -1;
  }
}
/* Tide entrance/ending redesign: keep the pages oceanic, spacious, and less literal. */
body.emotion-flow-active .emotion-stage-title {
  font-size: clamp(34px, 3.8vw, 56px) !important;
  line-height: 1.1;
}
body.emotion-flow-active .emotion-stage-note {
  font-size: clamp(17px, 1.45vw, 22px) !important;
}
body.emotion-flow-active .emotion-entry-sequence,
body.emotion-flow-active .emotion-ending-sequence {
  grid-template-columns: minmax(320px, 0.9fr) minmax(340px, 0.72fr);
  gap: clamp(34px, 7vw, 116px);
  padding: clamp(44px, 6.4vw, 108px) clamp(46px, 8vw, 132px);
  color: var(--emotion-ink, #fffaf2);
  background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 46%, transparent), transparent 28%),
    radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--emotion-current, #e8b7c5) 44%, transparent), transparent 36%),
    radial-gradient(circle at 32% 82%, color-mix(in srgb, var(--emotion-depth, #071126) 72%, transparent), transparent 44%),
    linear-gradient(
      132deg,
      color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 34%, var(--emotion-depth, #071126)) 0%,
      color-mix(in srgb, var(--emotion-current, #e8b7c5) 42%, var(--emotion-depth, #071126)) 48%,
      color-mix(in srgb, var(--emotion-depth, #071126) 88%, var(--emotion-current, #e8b7c5)) 100%
    );
}
body.emotion-flow-active .emotion-ending-sequence {
  grid-template-columns: minmax(340px, 0.76fr) minmax(320px, 0.92fr);
  background: radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 54%, transparent), transparent 26%),
    radial-gradient(circle at 22% 72%, color-mix(in srgb, var(--emotion-current, #e8b7c5) 36%, transparent), transparent 38%),
    radial-gradient(circle at 62% 62%, color-mix(in srgb, var(--emotion-depth, #071126) 58%, transparent), transparent 42%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 46%, var(--emotion-depth, #071126)) 0%,
      color-mix(in srgb, var(--emotion-current, #e8b7c5) 46%, var(--emotion-depth, #071126)) 42%,
      color-mix(in srgb, var(--emotion-depth, #071126) 86%, var(--emotion-current-accent, #fff7ee)) 100%
    );
}
body.emotion-flow-active .emotion-entry-sequence::before,
body.emotion-flow-active .emotion-ending-sequence::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(100deg, transparent 0 28%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 16%, transparent) 44%, transparent 64%),
    repeating-linear-gradient(
      176deg,
      transparent 0 32px,
      color-mix(in srgb, var(--emotion-ink, #fffaf2) 7%, transparent) 33px,
      transparent 34px 68px
    );
  opacity: 0.72;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
body.emotion-flow-active .emotion-entry-sequence::after,
body.emotion-flow-active .emotion-ending-sequence::after {
  left: clamp(44px, 8vw, 132px);
  right: clamp(44px, 8vw, 132px);
  bottom: clamp(50px, 8vh, 110px);
  height: 54px;
  background: radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 24%, transparent), transparent 62%),
    repeating-radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--emotion-current, #e8b7c5) 20%, transparent) 0 1px, transparent 2px 15px);
  opacity: 0.42;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
body.emotion-flow-active .emotion-entry-seed {
  width: min(40vw, 520px);
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 86%, white) 0 8%, transparent 19%),
    radial-gradient(circle at 52% 54%, color-mix(in srgb, var(--emotion-current, #e8b7c5) 42%, transparent), transparent 35%),
    conic-gradient(from 210deg, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 74%, transparent), color-mix(in srgb, var(--emotion-current, #e8b7c5) 44%, transparent), color-mix(in srgb, var(--emotion-depth, #071126) 16%, transparent), color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 62%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 30%, transparent),
    0 42px 150px color-mix(in srgb, var(--emotion-current, #e8b7c5) 24%, transparent);
  filter: blur(0) saturate(0.9);
}
body.emotion-flow-active .emotion-entry-seed::before,
body.emotion-flow-active .emotion-entry-seed::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.34);
  transform: rotate(-14deg) scaleX(1.12);
}
body.emotion-flow-active .emotion-entry-seed::after {
  inset: 26%;
  border-color: rgba(56, 76, 104, 0.1);
  transform: rotate(22deg) scaleX(1.22);
}
body.emotion-flow-active .emotion-entry-copy,
body.emotion-flow-active .emotion-ending-copy {
  gap: clamp(12px, 1.7vh, 20px);
  width: min(560px, 88vw);
  text-align: left;
}
body.emotion-flow-active .emotion-entry-copy::before,
body.emotion-flow-active .emotion-ending-copy::before {
  content: "JZY EMOTION TIDE";
  padding-bottom: 10px;
  color: color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 72%, var(--emotion-ink, #fffaf2));
  border-bottom-color: color-mix(in srgb, var(--emotion-current, #e8b7c5) 46%, transparent);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-shadow: 0 0 20px color-mix(in srgb, var(--emotion-current, #e8b7c5) 18%, transparent);
}
body.emotion-flow-active .emotion-entry-pair:nth-of-type(2),
body.emotion-flow-active .emotion-ending-pair:nth-of-type(2),
body.emotion-flow-active .emotion-entry-pair:nth-of-type(4),
body.emotion-flow-active .emotion-ending-pair:nth-of-type(4) {
  margin-left: clamp(18px, 3vw, 46px);
}
body.emotion-flow-active .emotion-entry-pair:nth-of-type(3),
body.emotion-flow-active .emotion-ending-pair:nth-of-type(3) {
  margin-left: clamp(4px, 1vw, 14px);
}
body.emotion-flow-active .emotion-entry-skip,
body.emotion-flow-active .emotion-replay {
  display: grid;
  place-items: center;
  justify-self: start;
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  margin-top: clamp(18px, 3vh, 34px);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 28%, transparent);
  border-radius: 50%;
  color: transparent;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 72%, white), transparent 30%),
    radial-gradient(circle at 62% 66%, color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 58%, transparent), transparent 58%),
    color-mix(in srgb, var(--emotion-current, #e8b7c5) 20%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--emotion-current, #e8b7c5) 8%, transparent),
    0 18px 54px color-mix(in srgb, var(--emotion-depth, #071126) 22%, transparent);
  overflow: hidden;
}
body.emotion-flow-active .is-intro-playing .emotion-entry-skip {
  animation: tideButtonIn 560ms ease 1.38s forwards;
}
body.emotion-flow-active .is-ending-visible .emotion-replay {
  animation: tideButtonIn 560ms ease 1.62s forwards;
}
body.emotion-flow-active .emotion-entry-skip span,
body.emotion-flow-active .emotion-replay span {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--emotion-control-ink, #172135) 34%, transparent);
}
body.emotion-flow-active .emotion-entry-skip span::before,
body.emotion-flow-active .emotion-replay span::before {
  content: "";
  position: absolute;
  inset: 5px 3px 5px 7px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: color-mix(in srgb, var(--emotion-control-ink, #172135) 68%, transparent);
}
body.emotion-flow-active .emotion-replay span::before {
  inset: 4px;
  clip-path: none;
  border: 2px solid color-mix(in srgb, var(--emotion-control-ink, #172135) 68%, transparent);
  border-left-color: transparent;
  border-radius: 50%;
  background: transparent;
}
@keyframes tideLineRise {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (max-width: 820px) {
  body.emotion-flow-active .emotion-stage-title {
    font-size: clamp(28px, 8.4vw, 38px) !important;
    max-width: 82vw;
  }
  body.emotion-flow-active .emotion-stage-note {
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }
  body.emotion-flow-active .emotion-stage-line-wrap {
    font-size: clamp(13px, 3.7vw, 16px) !important;
  }
  body.emotion-flow-active .emotion-entry-sequence,
  body.emotion-flow-active .emotion-ending-sequence {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 24px;
    padding: 72px 26px 34px;
  }
  body.emotion-flow-active .emotion-entry-seed {
    width: min(62vw, 280px);
    opacity: 0.68;
  }
  body.emotion-flow-active .emotion-entry-copy,
  body.emotion-flow-active .emotion-ending-copy {
    width: min(520px, 88vw);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.emotion-flow-active .emotion-entry-seed,
  body.emotion-flow-active .emotion-entry-skip,
  body.emotion-flow-active .emotion-replay,
  body.emotion-flow-active .is-overbright .emotion-new-page-shell,
  body.emotion-flow-active .is-rewinding .emotion-new-page-shell,
  body.emotion-flow-active .is-rewinding .emotion-new-aura {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}
/* Re-entry choice: restores only Emotion Flow progress, never the standard voice player. */
.emotion-resume-choice {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--emotion-depth, #071126) 78%, transparent);
  backdrop-filter: blur(20px) saturate(118%);
}
.emotion-resume-card {
  width: min(520px, 100%);
  padding: clamp(28px, 5vw, 52px);
  text-align: center;
  color: var(--emotion-ink, #fffaf2);
  border: 1px solid color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 30%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--emotion-depth, #071126) 84%, transparent);
  box-shadow: 0 30px 100px rgb(0 0 0 / 28%);
}
.emotion-resume-kicker {
  margin: 0 0 14px;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  opacity: 0.62;
}
.emotion-resume-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
}
.emotion-resume-card > p:not(.emotion-resume-kicker) {
  margin: 16px 0 30px;
  opacity: 0.66;
}
.emotion-resume-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.emotion-resume-actions button {
  min-height: 50px;
  padding: 12px 18px;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 38%, transparent);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.emotion-resume-actions button:hover,
.emotion-resume-actions button:focus-visible {
  color: var(--emotion-depth, #071126);
  outline: none;
  background: var(--emotion-current-accent, #fff7ee);
  transform: translateY(-2px);
}
@media (max-width: 560px) {
  .emotion-resume-actions {
    grid-template-columns: 1fr;
  }
}
/* Emotion cue bloom, restored from the 13_JZY "余音" interaction. */
body.emotion-flow-active .emotion-new-page-shell > .emotion-stage-cue {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 8 !important;
  display: block !important;
  visibility: visible !important;
  color: color-mix(in srgb, var(--emotion-current-accent, #fff7ee), white 28%) !important;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: clamp(38px, 6vw, 84px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none !important;
  text-shadow: 0 0 26px color-mix(in srgb, var(--emotion-current, #e8b7c5), transparent 34%),
    0 0 80px color-mix(in srgb, var(--emotion-current-accent, #fff7ee), transparent 82%);
  transform: translate(-50%, -50%) scale(0.82);
  filter: blur(8px);
  animation: none;
  will-change: opacity, transform, filter;
}
body.emotion-flow-active .emotion-new-page-shell > .emotion-stage-cue.is-flashing {
  animation: emotionCueRipple 1.05s ease-out both !important;
}
@media (max-width: 720px) {
  body.emotion-flow-active .emotion-new-page-shell > .emotion-stage-cue {
    top: 47% !important;
    max-width: 88vw;
    font-size: clamp(34px, 13vw, 62px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.emotion-flow-active .emotion-new-page-shell > .emotion-stage-cue.is-flashing {
    animation-duration: 240ms !important;
  }
}

/*
 * Final page title rhythm.
 * Keeps top-level navigation pages aligned across light and dark themes.
 */
:root {
  --page-hero-top: clamp(112px, 12vw, 170px);
  --page-hero-top-mobile: 96px;
  --page-title-width: min(920px, calc(100% - 32px));
  --page-title-gap: clamp(42px, 5.2vw, 76px);
  --page-title-gap-mobile: 38px;
  --page-title-pad-x: clamp(12px, 2.4vw, 28px);
  --page-title-pad-bottom: clamp(18px, 2.2vw, 26px);
  --page-title-font: "Songti SC", "Noto Serif SC", "STSong", "Times New Roman", serif;
  --page-copy-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
/* About page: reference and copyright layout after removing the intro title block. */
body.page-about main > #reference.reference-section {
  --about-card-border: rgba(228, 218, 255, 0.22);
  --about-card-ink: rgba(255, 250, 240, 0.9);
  --about-card-muted: rgba(255, 250, 242, 0.84);
  --about-card-line: rgba(232, 185, 102, 0.46);
  --about-copy-size: clamp(16px, 1.04vw, 17.25px);
  display: grid !important;
  align-content: start !important;
  width: min(1360px, calc(100% - 32px)) !important;
  min-height: calc(100svh - 96px) !important;
  padding: clamp(148px, 15vh, 198px) clamp(18px, 4vw, 56px) clamp(72px, 8vw, 118px) !important;
}
body.page-about main > #reference.reference-section::before {
  opacity: 0.2 !important;
}
body.page-about #reference .reference-grid {
  position: relative !important;
  display: grid !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}
body.page-about #reference .reference-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: -28px clamp(12px, 4vw, 80px) auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.72), rgba(139, 193, 255, 0.58), transparent) !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}
body.page-about #reference .reference-grid article {
  display: flex !important;
  flex-direction: column !important;
  min-height: clamp(230px, 24vw, 330px) !important;
  padding: clamp(28px, 3.6vw, 48px) clamp(24px, 3.6vw, 52px) !important;
  overflow: hidden !important;
  border: 1px solid var(--about-card-border) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055) 58%, rgba(255, 255, 255, 0.09)),
    radial-gradient(circle at 8% 0%, rgba(232, 185, 102, 0.16), transparent 32%),
    radial-gradient(circle at 100% 8%, rgba(139, 193, 255, 0.18), transparent 36%) !important;
  box-shadow: 0 28px 72px rgba(8, 12, 28, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}
body.page-about #reference .reference-grid article::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  height: auto !important;
  background: linear-gradient(180deg, rgba(232, 185, 102, 0.9), rgba(139, 193, 255, 0.56), rgba(232, 145, 174, 0.62)) !important;
  opacity: 0.78 !important;
}
body.page-about #reference .reference-grid article:nth-child(2) {
  min-height: clamp(260px, 27vw, 360px) !important;
}
body.page-about #reference .reference-grid h2 {
  color: var(--about-card-ink) !important;
  font-family: var(--page-title-font) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
body.page-about #reference .reference-grid h2::after {
  content: "" !important;
  display: block !important;
  width: clamp(58px, 8vw, 108px) !important;
  height: 2px !important;
  margin-top: clamp(12px, 1.8vw, 18px) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--about-card-line), rgba(139, 193, 255, 0.38), transparent) !important;
}
body.page-about #reference .reference-grid p {
  max-width: 68ch !important;
  margin: 0 !important;
  color: var(--about-card-muted) !important;
  font-family: var(--page-copy-font) !important;
  font-size: clamp(15px, 1.05vw, 17px) !important;
  font-weight: 560 !important;
  line-height: 2 !important;
  text-align: left !important;
  -webkit-text-fill-color: currentColor !important;
}
body.page-about #reference .reference-grid p + p {
  margin-top: clamp(10px, 1.2vw, 16px) !important;
}
:root[data-theme="light"] body.page-about main > #reference.reference-section,
body[data-theme="light"].page-about main > #reference.reference-section {
  --about-card-border: rgba(126, 151, 190, 0.26);
  --about-card-ink: #46375f;
  --about-card-muted: #4e5b6b;
  --about-card-line: rgba(177, 118, 39, 0.62);
}
:root[data-theme="light"] body.page-about #reference .reference-grid article,
body[data-theme="light"].page-about #reference .reference-grid article {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(246, 250, 255, 0.54) 58%, rgba(255, 246, 250, 0.66)),
    radial-gradient(circle at 4% 0%, rgba(255, 204, 156, 0.22), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(155, 203, 255, 0.24), transparent 38%) !important;
  box-shadow: 0 24px 58px rgba(94, 121, 156, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
:root[data-theme="light"] body.page-about #reference .reference-grid h2,
body[data-theme="light"].page-about #reference .reference-grid h2 {
  color: var(--about-card-ink) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  animation: none !important;
}
:root[data-theme="light"] body.page-about #reference .reference-grid p,
body[data-theme="light"].page-about #reference .reference-grid p {
  color: var(--about-card-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
@media (max-width: 900px) {
  body.page-about main > #reference.reference-section {
    min-height: auto !important;
    padding-top: clamp(116px, 18vh, 150px) !important;
    padding-inline: clamp(16px, 5vw, 28px) !important;
  }
  body.page-about #reference .reference-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body.page-about #reference .reference-grid::before {
    inset-inline: 20px !important;
  }
  body.page-about #reference .reference-grid article,
  body.page-about #reference .reference-grid article:nth-child(2) {
    min-height: auto !important;
    padding: clamp(24px, 7vw, 34px) clamp(20px, 6vw, 30px) !important;
  }
  body.page-about #reference .reference-grid p {
    font-size: clamp(14.5px, 4vw, 16px) !important;
    line-height: 1.88 !important;
  }
}
@media (max-width: 520px) {
  body.page-about main > #reference.reference-section {
    padding-top: 108px !important;
    padding-bottom: 56px !important;
  }
  body.page-about #reference .reference-grid {
    width: 100% !important;
  }
  body.page-about #reference .reference-grid::before {
    inset-top: -18px !important;
  }
  body.page-about #reference .reference-grid article {
    border-radius: 8px !important;
  }
}
:root:not([data-theme="light"]) body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) {
  background: radial-gradient(ellipse at 12% 10%, rgba(239, 159, 178, 0.48), transparent 36rem),
    radial-gradient(ellipse at 88% 14%, rgba(147, 197, 253, 0.4), transparent 38rem),
    radial-gradient(ellipse at 46% 92%, rgba(251, 191, 36, 0.24), transparent 36rem),
    radial-gradient(ellipse at 52% 50%, rgba(192, 132, 252, 0.28), transparent 42rem),
    radial-gradient(ellipse at 28% 68%, rgba(34, 211, 238, 0.24), transparent 28rem),
    linear-gradient(145deg, #151827 0%, #1e2438 42%, #2a3050 72%, #3d3a55 100%) !important;
  background-attachment: fixed !important;
}
:root[data-theme="light"] body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
),
body[data-theme="light"]:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) {
  background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.96), transparent 31rem),
    radial-gradient(circle at 15% 10%, rgba(255, 188, 218, 0.56), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(143, 196, 255, 0.62), transparent 38rem),
    radial-gradient(circle at 54% 86%, rgba(255, 221, 177, 0.36), transparent 34rem),
    radial-gradient(circle at 21% 78%, rgba(169, 229, 245, 0.34), transparent 30rem),
    linear-gradient(135deg, #fffafd 0%, #f8fcff 35%, #eef8ff 68%, #fbfdff 100%) !important;
  background-attachment: fixed !important;
}
:root:not([data-theme="light"]) body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
)::before {
  opacity: 0.72 !important;
  filter: blur(24px) saturate(1.04) !important;
}
:root[data-theme="light"] body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
)::before,
body[data-theme="light"]:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
)::before {
  opacity: 0.48 !important;
  filter: blur(32px) saturate(1.12) brightness(1.05) !important;
}
:root[data-theme="light"] body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
)::after,
body[data-theme="light"]:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
)::after {
  opacity: 0.18 !important;
  mix-blend-mode: screen !important;
}
:root[data-theme="light"] body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child::before,
body[data-theme="light"]:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child::before {
  background: radial-gradient(circle at 20% 12%, rgba(255, 205, 225, 0.2), transparent 36%),
    radial-gradient(circle at 88% 28%, rgba(154, 208, 255, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.12)) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 18px 56px rgba(88, 126, 166, 0.06) !important;
  opacity: 0.34 !important;
  backdrop-filter: blur(16px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.04) !important;
}
body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child {
  padding-top: var(--page-hero-top) !important;
}
body.page-about main > #reference.section:first-child,
body.page-audio main > #audio-gallery.section:first-child,
body.page-fans main > #fans.section:first-child,
body.page-gallery main > #gallery.section:first-child,
body.page-light main > #fans.section:first-child,
body.page-light main > #resonance.resonance-section:first-child,
body.page-music main > #music.section:first-child,
body.page-quotes main > #life.section:first-child,
body.page-schedule main > #schedule.section:first-child,
body.page-social main > #social.section:first-child,
body.page-works main > #works.section:first-child {
  padding-top: var(--page-hero-top) !important;
}
body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) {
  display: grid !important;
  justify-items: center !important;
  width: var(--page-title-width) !important;
  max-width: 920px !important;
  min-height: 0 !important;
  margin: 0 auto var(--page-title-gap) !important;
  padding: 0 var(--page-title-pad-x) var(--page-title-pad-bottom) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-about main > #reference.section:first-child > .section-heading,
body.page-audio main > #audio-gallery.section:first-child > .section-heading,
body.page-fans main > #fans.section:first-child > .section-heading,
body.page-gallery main > #gallery.section:first-child > .section-heading,
body.page-light main > #fans.section:first-child > .section-heading,
body.page-light main > #resonance.resonance-section:first-child > .section-heading,
body.page-music main > #music.section:first-child > .container > .section-heading,
body.page-quotes main > #life.section:first-child > .section-heading,
body.page-schedule main > #schedule.section:first-child > .section-heading,
body.page-social main > #social.section:first-child > .section-heading,
body.page-works main > #works.section:first-child > .section-heading {
  display: grid !important;
  justify-items: center !important;
  width: var(--page-title-width) !important;
  max-width: 920px !important;
  min-height: 0 !important;
  margin: 0 auto var(--page-title-gap) !important;
  padding: 0 var(--page-title-pad-x) var(--page-title-pad-bottom) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading)::before {
  content: none !important;
}
body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading)::after {
  left: 50% !important;
  bottom: 0 !important;
  width: min(176px, 42%) !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.82), rgba(139, 193, 255, 0.58), transparent) !important;
  box-shadow: none !important;
  filter: none !important;
}
body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) :where(h1, h2, .section-title) {
  margin: 0 !important;
  color: #fff8ed !important;
  font-family: var(--page-title-font) !important;
  font-size: clamp(34px, 4.4vw, 62px) !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  animation: none !important;
}
body.page-about main > #reference.section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-audio main > #audio-gallery.section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-fans main > #fans.section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-gallery main > #gallery.section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-light main > #fans.section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-light main > #resonance.resonance-section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-music main > #music.section:first-child > .container > .section-heading :where(h1, h2, .section-title),
body.page-quotes main > #life.section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-schedule main > #schedule.section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-social main > #social.section:first-child > .section-heading :where(h1, h2, .section-title),
body.page-works main > #works.section:first-child > .section-heading :where(h1, h2, .section-title) {
  margin: 0 !important;
  color: #fff8ed !important;
  font-family: var(--page-title-font) !important;
  font-size: clamp(34px, 4.4vw, 62px) !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  animation: none !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-theme="light"] body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) :where(h1, h2, .section-title),
body[data-theme="light"]:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) :where(h1, h2, .section-title) {
  color: #5d4a86 !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  animation: none !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-theme="light"] body.page-about main > #reference.section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-audio main > #audio-gallery.section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-fans main > #fans.section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-gallery main > #gallery.section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-light main > #fans.section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-light main > #resonance.resonance-section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-music main > #music.section:first-child > .container > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-quotes main > #life.section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-schedule main > #schedule.section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-social main > #social.section:first-child > .section-heading :where(h1, h2, .section-title),
:root[data-theme="light"] body.page-works main > #works.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-about main > #reference.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-audio main > #audio-gallery.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-fans main > #fans.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-gallery main > #gallery.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-light main > #fans.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-light main > #resonance.resonance-section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-music main > #music.section:first-child > .container > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-quotes main > #life.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-schedule main > #schedule.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-social main > #social.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-works main > #works.section:first-child > .section-heading :where(h1, h2, .section-title) {
  color: #5d4a86 !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  animation: none !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-theme="light"] body.page-works #works #worksSummary :where(h1, h2, .section-title),
body[data-theme="light"].page-works #works #worksSummary :where(h1, h2, .section-title) {
  color: #5d4a86 !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  animation: none !important;
  -webkit-text-fill-color: currentColor !important;
}
body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) :where(.eyebrow, .section-subtitle) {
  order: 2 !important;
  width: fit-content !important;
  margin: 8px auto 0 !important;
  color: rgba(232, 185, 102, 0.88) !important;
  font-family: var(--page-copy-font) !important;
  font-size: clamp(13px, 0.9vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-theme="light"] body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) :where(.eyebrow, .section-subtitle),
body[data-theme="light"]:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) :where(.eyebrow, .section-subtitle) {
  color: #a36d1f !important;
  -webkit-text-fill-color: currentColor !important;
}
body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) p:not(.eyebrow):not(.section-subtitle) {
  order: 3 !important;
  max-width: 58em !important;
  margin: clamp(16px, 2vw, 22px) auto 0 !important;
  padding: 0 !important;
  color: rgba(245, 239, 226, 0.76) !important;
  font-family: var(--page-copy-font) !important;
  font-size: clamp(16px, 1.1vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.9 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-theme="light"] body:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) p:not(.eyebrow):not(.section-subtitle),
body[data-theme="light"]:is(
  .page-about,
  .page-audio,
  .page-fans,
  .page-gallery,
  .page-light,
  .page-music,
  .page-quotes,
  .page-schedule,
  .page-social,
  .page-works
) main > .section:first-child > :is(.section-heading, .container > .section-heading) p:not(.eyebrow):not(.section-subtitle) {
  color: #526174 !important;
  -webkit-text-fill-color: currentColor !important;
}
@media (max-width: 760px) {
  body:is(
    .page-about,
    .page-audio,
    .page-fans,
    .page-gallery,
    .page-light,
    .page-music,
    .page-quotes,
    .page-schedule,
    .page-social,
    .page-works
  ) main > .section:first-child {
    padding-top: var(--page-hero-top-mobile) !important;
  }
  body.page-about main > #reference.section:first-child,
  body.page-audio main > #audio-gallery.section:first-child,
  body.page-fans main > #fans.section:first-child,
  body.page-gallery main > #gallery.section:first-child,
  body.page-light main > #fans.section:first-child,
  body.page-light main > #resonance.resonance-section:first-child,
  body.page-music main > #music.section:first-child,
  body.page-quotes main > #life.section:first-child,
  body.page-schedule main > #schedule.section:first-child,
  body.page-social main > #social.section:first-child,
  body.page-works main > #works.section:first-child {
    padding-top: var(--page-hero-top-mobile) !important;
  }
  body:is(
    .page-about,
    .page-audio,
    .page-fans,
    .page-gallery,
    .page-light,
    .page-music,
    .page-quotes,
    .page-schedule,
    .page-social,
    .page-works
  ) main > .section:first-child > :is(.section-heading, .container > .section-heading) {
    width: min(100%, calc(100vw - 48px)) !important;
    margin-bottom: var(--page-title-gap-mobile) !important;
    padding: 0 0 20px !important;
  }
  body.page-about main > #reference.section:first-child > .section-heading,
  body.page-audio main > #audio-gallery.section:first-child > .section-heading,
  body.page-fans main > #fans.section:first-child > .section-heading,
  body.page-gallery main > #gallery.section:first-child > .section-heading,
  body.page-light main > #fans.section:first-child > .section-heading,
  body.page-light main > #resonance.resonance-section:first-child > .section-heading,
  body.page-music main > #music.section:first-child > .container > .section-heading,
  body.page-quotes main > #life.section:first-child > .section-heading,
  body.page-schedule main > #schedule.section:first-child > .section-heading,
  body.page-social main > #social.section:first-child > .section-heading,
  body.page-works main > #works.section:first-child > .section-heading {
    width: min(100%, calc(100vw - 48px)) !important;
    margin-bottom: var(--page-title-gap-mobile) !important;
    padding: 0 0 20px !important;
  }
  body:is(
    .page-about,
    .page-audio,
    .page-fans,
    .page-gallery,
    .page-light,
    .page-music,
    .page-quotes,
    .page-schedule,
    .page-social,
    .page-works
  ) main > .section:first-child > :is(.section-heading, .container > .section-heading) :where(h1, h2, .section-title) {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.12 !important;
  }
  body:is(
    .page-about,
    .page-audio,
    .page-fans,
    .page-gallery,
    .page-light,
    .page-music,
    .page-quotes,
    .page-schedule,
    .page-social,
    .page-works
  ) main > .section:first-child > :is(.section-heading, .container > .section-heading) p:not(.eyebrow):not(.section-subtitle) {
    font-size: 15.5px !important;
    line-height: 1.8 !important;
  }
}
/* Gallery boundary: expanded-state styling starts below the category controls. */
body.page-gallery main > #gallery.section:first-child > .section-heading,
html[data-theme="light"] body.page-gallery.gallery-has-expanded main > #gallery.section:first-child > .section-heading,
body[data-theme="light"].page-gallery.gallery-has-expanded main > #gallery.section:first-child > .section-heading {
  display: grid !important;
  justify-items: center !important;
  width: var(--page-title-width) !important;
  max-width: 920px !important;
  margin: 0 auto var(--page-title-gap) !important;
  padding: 0 var(--page-title-pad-x) var(--page-title-pad-bottom) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-gallery main > #gallery.section:first-child > .section-heading :where(h1, h2, .section-title) {
  margin: 0 !important;
  font-family: var(--page-title-font) !important;
  font-size: clamp(34px, 4.4vw, 62px) !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
@media (max-width: 760px) {
  body.page-gallery main > #gallery.section:first-child > .section-heading,
  html[data-theme="light"] body.page-gallery.gallery-has-expanded main > #gallery.section:first-child > .section-heading,
  body[data-theme="light"].page-gallery.gallery-has-expanded main > #gallery.section:first-child > .section-heading {
    width: min(100%, calc(100vw - 48px)) !important;
    margin-bottom: var(--page-title-gap-mobile) !important;
    padding: 0 0 20px !important;
  }
  body.page-gallery main > #gallery.section:first-child > .section-heading :where(h1, h2, .section-title) {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.12 !important;
  }
}
/* Final parity pass: keep these historically page-specific headings identical to Recent Moments. */
html[data-theme="light"] body.page-works main > #works.section:first-child > #worksSummary.section-heading .eyebrow,
html[data-theme="light"] body.page-gallery main > #gallery.section:first-child > .section-heading .eyebrow,
body[data-theme="light"].page-works main > #works.section:first-child > #worksSummary.section-heading .eyebrow,
body[data-theme="light"].page-gallery main > #gallery.section:first-child > .section-heading .eyebrow {
  color: #a36d1f !important;
  -webkit-text-fill-color: currentColor !important;
}
html:not([data-theme="light"]) body.page-works main > #works.section:first-child > #worksSummary.section-heading .eyebrow,
html:not([data-theme="light"]) body.page-gallery main > #gallery.section:first-child > .section-heading .eyebrow {
  color: rgba(232, 185, 102, 0.88) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme="light"] body.page-gallery main > #gallery.section:first-child > .section-heading :where(h1, h2, .section-title),
body[data-theme="light"].page-gallery main > #gallery.section:first-child > .section-heading :where(h1, h2, .section-title) {
  color: #5d4a86 !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html:not([data-theme="light"]) body.page-gallery main > #gallery.section:first-child > .section-heading :where(h1, h2, .section-title) {
  color: #fff8ed !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}
body.page-gallery main > #gallery.section:first-child > .section-heading::after,
body.page-social main > #social.section:first-child > .section-heading::after {
  width: min(176px, 42%) !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 185, 102, 0.86), rgba(139, 193, 255, 0.66), transparent) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
body.page-music main > #music.section:first-child > .container > .section-heading .section-copy,
body.page-gallery main > #gallery.section:first-child > .section-heading p:not(.eyebrow):not(.section-subtitle) {
  color: rgba(245, 239, 226, 0.76) !important;
  font-size: clamp(16px, 1.1vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.9 !important;
}
html[data-theme="light"] body.page-music main > #music.section:first-child > .container > .section-heading .section-copy,
html[data-theme="light"] body.page-gallery main > #gallery.section:first-child > .section-heading p:not(.eyebrow):not(.section-subtitle),
body[data-theme="light"].page-music main > #music.section:first-child > .container > .section-heading .section-copy,
body[data-theme="light"].page-gallery main > #gallery.section:first-child > .section-heading p:not(.eyebrow):not(.section-subtitle) {
  color: #526174 !important;
  -webkit-text-fill-color: currentColor !important;
}
/* About page final placement: keep the deleted intro block from leaving hero-sized whitespace. */
body.page-about main > #reference.reference-section:first-child {
  padding-top: clamp(248px, 24vh, 320px) !important;
}
@media (max-width: 900px) {
  body.page-about main > #reference.reference-section:first-child {
    padding-top: clamp(168px, 22vh, 212px) !important;
  }
}
@media (max-width: 520px) {
  body.page-about main > #reference.reference-section:first-child {
    padding-top: 148px !important;
  }
}
/* About copyright card: single-column editorial layout. */
body.page-about #reference .reference-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(28px, 3vw, 42px) !important;
  width: min(100%, 1240px) !important;
}
body.page-about #reference .reference-grid article,
body.page-about #reference .reference-grid article:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  align-items: start;
  min-height: 0 !important;
  padding: clamp(46px, 5vw, 68px) clamp(38px, 5.4vw, 72px) !important;
}
body.page-about #reference .reference-grid h2 {
  width: 100%;
  margin: 0 0 clamp(30px, 3.2vw, 42px) !important;
  font-size: clamp(38px, 3.5vw, 52px) !important;
  line-height: 1.12 !important;
}
body.page-about #reference .copyright-copy {
  display: grid;
  gap: clamp(14px, 1.25vw, 18px);
  width: 100%;
  max-width: none;
}
body.page-about #reference .reference-grid .copyright-copy p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: var(--about-copy-size) !important;
  font-weight: 460 !important;
  line-height: 1.82 !important;
  letter-spacing: 0.012em;
}
body.page-about #reference .copyright-contact {
  color: inherit !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--about-card-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
body.page-about #reference .copyright-contact:hover,
body.page-about #reference .copyright-contact:focus-visible {
  color: rgba(232, 185, 102, 0.96) !important;
  text-decoration-color: currentColor;
}
body.page-about #reference .reference-grid .browser-notice {
  position: relative;
  width: 100%;
  max-width: none !important;
  margin: clamp(46px, 3.6vw, 58px) 0 0 !important;
  padding: 8px 0 8px 18px !important;
  border-left: 2px solid var(--about-card-line);
  background: transparent !important;
  font-size: var(--about-copy-size) !important;
  font-style: italic;
  font-weight: 430 !important;
  line-height: 1.75 !important;
  opacity: 0.82;
}
body.page-about #reference .reference-grid .browser-notice strong {
  font-weight: 750;
}
body.page-about #reference .site-notes-card {
  gap: 0;
}
body.page-about #reference .reference-grid .site-notes-card h2 {
  margin-bottom: clamp(22px, 2.4vw, 32px) !important;
  font-size: clamp(38px, 3.5vw, 52px) !important;
}
body.page-about #reference .site-notes-card h2 span {
  color: inherit;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
}
body.page-about #reference .reference-grid .site-notes-card p {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--about-card-muted) !important;
  font-family: var(--page-copy-font) !important;
  font-size: clamp(14.5px, 0.98vw, 16px) !important;
  font-weight: 440 !important;
  line-height: 1.82 !important;
  -webkit-text-fill-color: currentColor !important;
}
body.page-about #reference .reference-grid .site-notes-card .site-notes-lead {
  width: min(100%, 84ch);
  font-size: var(--about-copy-size) !important;
}
body.page-about #reference .site-notes-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.35fr 1fr;
  gap: clamp(20px, 2.4vw, 34px);
  width: 100%;
  margin-top: clamp(34px, 3.4vw, 48px);
}
body.page-about #reference .site-note-block {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(228, 218, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}
body.page-about #reference .site-note-index {
  margin-bottom: 12px !important;
  color: var(--about-card-line) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  opacity: 0.88;
}
body.page-about #reference .site-note-block h3 {
  margin: 0 0 14px;
  color: var(--about-card-ink);
  font-family: var(--page-title-font);
  font-size: clamp(21px, 1.65vw, 26px);
  font-weight: 760;
  line-height: 1.25;
}
body.page-about #reference .site-note-intro {
  margin-bottom: 12px !important;
}
body.page-about #reference .site-plan-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.page-about #reference .site-plan-list li {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  color: var(--about-card-muted);
  font-family: var(--page-copy-font);
  font-size: clamp(13.5px, 0.9vw, 15px);
  line-height: 1.65;
}
body.page-about #reference .site-plan-list strong {
  color: var(--about-card-ink);
  font-weight: 720;
}
body.page-about #reference .site-plan-list span {
  min-width: 0;
}
body.page-about #reference .reference-grid .site-notes-card .site-notes-closing {
  width: 100%;
  margin-top: clamp(52px, 4.5vw, 68px) !important;
  padding-top: clamp(24px, 2.2vw, 32px) !important;
  border-top: 1px solid rgba(232, 185, 102, 0.2);
  color: var(--about-card-ink) !important;
  font-family: var(--page-title-font) !important;
  font-size: var(--about-copy-size) !important;
  font-weight: 650 !important;
  letter-spacing: 0.03em;
}
:root[data-theme="light"] body.page-about #reference .site-note-block,
body[data-theme="light"].page-about #reference .site-note-block {
  border-color: rgba(126, 151, 190, 0.18);
  background: rgba(255, 255, 255, 0.34);
}
:root[data-theme="light"] body.page-about #reference .copyright-contact,
body[data-theme="light"].page-about #reference .copyright-contact {
  color: var(--about-card-muted) !important;
}
:root[data-theme="light"] body.page-about #reference .copyright-contact:hover,
:root[data-theme="light"] body.page-about #reference .copyright-contact:focus-visible,
body[data-theme="light"].page-about #reference .copyright-contact:hover,
body[data-theme="light"].page-about #reference .copyright-contact:focus-visible {
  color: #7f5525 !important;
}
@media (max-width: 900px) {
  body.page-about #reference .reference-grid article {
    display: flex !important;
    padding: 32px clamp(22px, 6vw, 40px) !important;
  }
  body.page-about #reference .reference-grid h2 {
    margin-bottom: 26px !important;
    font-size: clamp(32px, 8vw, 42px) !important;
  }
  body.page-about #reference .reference-grid .browser-notice {
    margin-top: 30px !important;
  }
  body.page-about #reference .site-notes-grid {
    grid-template-columns: 1fr;
  }
  body.page-about #reference .site-plan-list li {
    grid-template-columns: minmax(4.8em, auto) minmax(0, 1fr);
  }
}
/* Canonical title rhythm for repeated title blocks beyond the first section. */
body.page-music main > #music.section:first-child > .container > .section-heading .section-subtitle,
#works .drama-detail-intro.section-heading .eyebrow,
body:is(.page-fans, .page-light) main > #resonance.section > .section-heading .eyebrow {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 8px auto 0 !important;
  padding: 0 22px !important;
  font-family: var(--page-copy-font) !important;
  font-size: clamp(13px, 0.9vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.2em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
body.page-gallery main > #gallery.section:first-child > .section-heading p:not(.eyebrow):not(.section-subtitle),
#works .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle),
body:is(.page-fans, .page-light) main > #resonance.section > .section-heading p:not(.eyebrow):not(.section-subtitle) {
  margin: clamp(16px, 2vw, 22px) auto 0 !important;
  font-family: var(--page-copy-font) !important;
  font-size: clamp(16px, 1.1vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.9 !important;
  text-align: center !important;
}
/* Keep the dynamically rendered Plot Guide heading aligned with every
   canonical light-theme page title. */
:root[data-theme="light"] body.page-works #works .drama-detail-intro.section-heading h2,
body[data-theme="light"].page-works #works .drama-detail-intro.section-heading h2 {
  color: #5d4a86 !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  animation: none !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-theme="light"] body.page-works #works .drama-detail-intro.section-heading .eyebrow,
body[data-theme="light"].page-works #works .drama-detail-intro.section-heading .eyebrow {
  color: #a36d1f !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-theme="light"] body.page-works #works .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle),
body[data-theme="light"].page-works #works .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle) {
  color: #526174 !important;
  -webkit-text-fill-color: currentColor !important;
}
@media (max-width: 760px) {
  body.page-music main > #music.section:first-child > .container > .section-heading {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
  }
  body.page-works main > #works.section:first-child > .section-heading h2 {
    font-size: clamp(30px, 8.72vw, 42px) !important;
  }
  body.page-music main > #music.section:first-child > .container > .section-heading .section-subtitle,
  #works .drama-detail-intro.section-heading .eyebrow,
  body:is(.page-fans, .page-light) main > #resonance.section > .section-heading .eyebrow {
    padding-inline: 16px !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
  }
  body.page-gallery main > #gallery.section:first-child > .section-heading p:not(.eyebrow):not(.section-subtitle),
  #works .drama-detail-intro.section-heading p:not(.eyebrow):not(.section-subtitle),
  body:is(.page-fans, .page-light) main > #resonance.section > .section-heading p:not(.eyebrow):not(.section-subtitle) {
    font-size: 15.5px !important;
    line-height: 1.8 !important;
  }
}

/* Music page track palette sync. Loaded last on purpose. */
body.page-music #music {
  --music-stage-a: 64, 90, 120;
  --music-stage-b: 112, 86, 120;
  --music-stage-c: 46, 56, 78;
  --music-stage-accent: 142, 170, 255;
}
body.page-music #music[data-music-track="1"],
body.page-music #music[data-music-palette="rose"] {
  --music-stage-a: 122, 42, 118;
  --music-stage-b: 42, 66, 154;
  --music-stage-c: 72, 38, 94;
  --music-stage-accent: 255, 82, 172;
}
body.page-music #music[data-music-track="2"],
body.page-music #music[data-music-palette="aqua"] {
  --music-stage-a: 24, 150, 186;
  --music-stage-b: 62, 205, 226;
  --music-stage-c: 28, 80, 126;
  --music-stage-accent: 74, 220, 238;
}
body.page-music #music[data-music-track="3"],
body.page-music #music[data-music-palette="lavender"] {
  --music-stage-a: 92, 72, 184;
  --music-stage-b: 176, 96, 212;
  --music-stage-c: 58, 58, 132;
  --music-stage-accent: 184, 128, 255;
}
body.page-music #music[data-music-track="4"],
body.page-music #music[data-music-palette="pearl"] {
  --music-stage-a: 92, 160, 172;
  --music-stage-b: 190, 222, 232;
  --music-stage-c: 66, 106, 128;
  --music-stage-accent: 122, 232, 218;
}
body.page-music #music[data-music-track="5"],
body.page-music #music[data-music-palette="aurora"] {
  --music-stage-a: 18, 132, 218;
  --music-stage-b: 246, 106, 70;
  --music-stage-c: 24, 76, 142;
  --music-stage-accent: 255, 126, 86;
}
body.page-music #music[data-music-track="6"],
body.page-music #music[data-music-palette="peach"] {
  --music-stage-a: 246, 112, 74;
  --music-stage-b: 255, 184, 78;
  --music-stage-c: 146, 66, 68;
  --music-stage-accent: 255, 146, 76;
}
body.page-music #music .music-player-container::before,
body.page-music #music .music-player-container::after,
body.page-music #music .player-main::before,
body.page-music #music .player-main::after {
  content: none !important;
}
body.page-music #music .music-player-container {
  transition: background 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease !important;
}
body.page-music #music .player-main,
body.page-music #music .playlist {
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  transition: background 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease !important;
}
body.page-music #music .progress-fill {
  background: linear-gradient(90deg, rgba(var(--music-stage-accent), 0.98), rgba(var(--music-stage-b), 0.9)) !important;
}
body.page-music #music .control-btn.play-btn {
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, rgba(var(--music-stage-accent), 0.96), rgba(var(--music-stage-a), 0.88)) !important;
  box-shadow: 0 16px 34px rgba(var(--music-stage-accent), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}
body.page-music #music .music-player-container {
  background: radial-gradient(ellipse at 12% 8%, rgba(var(--music-stage-a), 0.48) 0%, transparent 44%),
    radial-gradient(ellipse at 86% 14%, rgba(var(--music-stage-b), 0.4) 0%, transparent 46%),
    radial-gradient(ellipse at 54% 104%, rgba(var(--music-stage-accent), 0.22) 0%, transparent 54%),
    linear-gradient(135deg, rgba(var(--music-stage-c), 0.54), rgba(var(--music-stage-a), 0.34) 48%, rgba(var(--music-stage-b), 0.28)),
    rgba(20, 25, 38, 0.68) !important;
  border-color: rgba(var(--music-stage-accent), 0.24) !important;
  box-shadow: 0 30px 82px rgba(var(--music-stage-c), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
body.page-music #music .player-main,
body.page-music #music .playlist {
  background: radial-gradient(ellipse at 16% 12%, rgba(var(--music-stage-a), 0.36) 0%, transparent 44%),
    radial-gradient(ellipse at 86% 18%, rgba(var(--music-stage-b), 0.28) 0%, transparent 46%),
    linear-gradient(145deg, rgba(var(--music-stage-c), 0.46), rgba(20, 24, 36, 0.36)),
    rgba(30, 35, 50, 0.5) !important;
  border-color: rgba(var(--music-stage-accent), 0.22) !important;
  box-shadow: 0 20px 54px rgba(var(--music-stage-c), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
body.page-music #music .playlist-item:hover,
body.page-music #music .playlist-item.active {
  background: radial-gradient(ellipse at 16% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, rgba(var(--music-stage-b), 0.12), rgba(var(--music-stage-a), 0.09)),
    rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(var(--music-stage-accent), 0.13) !important;
  box-shadow: 0 8px 18px rgba(var(--music-stage-c), 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
body.page-music #music .playlist-item-info h5 {
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all;
  overflow-wrap: normal;
}
body.page-music #music .playlist-title-line {
  display: block;
  white-space: nowrap;
}
body.page-music #music .music-new-release strong {
  color: rgba(220, 86, 142, 0.98) !important;
  -webkit-text-fill-color: rgba(220, 86, 142, 0.98) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}
body.page-music #music .music-new-release a {
  color: rgba(104, 91, 166, 0.96) !important;
  -webkit-text-fill-color: rgba(104, 91, 166, 0.96) !important;
  border-bottom-color: rgba(176, 132, 206, 0.34) !important;
}
body.page-music #music .music-new-release p + p {
  color: rgba(78, 70, 88, 0.82) !important;
  -webkit-text-fill-color: rgba(78, 70, 88, 0.82) !important;
}
html[data-theme="light"] body.page-music #music .music-new-release,
body[data-theme="light"].page-music #music .music-new-release {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(251, 242, 247, 0.46)),
    linear-gradient(90deg, rgba(247, 170, 196, 0.12), rgba(180, 209, 255, 0.12)) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
}
html[data-theme="dark"] body.page-music #music .music-new-release strong,
body[data-theme="dark"].page-music #music .music-new-release strong,
html:not([data-theme]) body:not([data-theme]).page-music #music .music-new-release strong {
  color: rgba(255, 139, 190, 0.98) !important;
  -webkit-text-fill-color: rgba(255, 139, 190, 0.98) !important;
  text-shadow: 0 10px 24px rgba(166, 62, 118, 0.28) !important;
}
html[data-theme="dark"] body.page-music #music .music-new-release a,
body[data-theme="dark"].page-music #music .music-new-release a,
html:not([data-theme]) body:not([data-theme]).page-music #music .music-new-release a {
  color: rgba(215, 198, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(215, 198, 255, 0.96) !important;
  border-bottom-color: rgba(215, 198, 255, 0.34) !important;
}
html[data-theme="dark"] body.page-music #music .music-new-release p + p,
body[data-theme="dark"].page-music #music .music-new-release p + p,
html:not([data-theme]) body:not([data-theme]).page-music #music .music-new-release p + p {
  color: rgba(250, 240, 247, 0.72) !important;
  -webkit-text-fill-color: rgba(250, 240, 247, 0.72) !important;
}
html[data-theme="light"] body.page-music #music .music-player-container,
body[data-theme="light"].page-music #music .music-player-container {
  background: radial-gradient(ellipse at 10% 6%, rgba(var(--music-stage-a), 0.44) 0%, transparent 44%),
    radial-gradient(ellipse at 88% 12%, rgba(var(--music-stage-b), 0.38) 0%, transparent 46%),
    radial-gradient(ellipse at 50% 100%, rgba(var(--music-stage-accent), 0.26) 0%, transparent 52%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(var(--music-stage-a), 0.22) 48%, rgba(var(--music-stage-b), 0.24)),
    rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 28px 78px rgba(var(--music-stage-c), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="light"] body.page-music #music .player-main,
html[data-theme="light"] body.page-music #music .playlist,
body[data-theme="light"].page-music #music .player-main,
body[data-theme="light"].page-music #music .playlist {
  background: radial-gradient(ellipse at 14% 12%, rgba(var(--music-stage-a), 0.36) 0%, transparent 42%),
    radial-gradient(ellipse at 86% 14%, rgba(var(--music-stage-b), 0.3) 0%, transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(var(--music-stage-accent), 0.14)),
    rgba(255, 255, 255, 0.58) !important;
}
html[data-theme="dark"] body.page-music #music .music-player-container,
body[data-theme="dark"].page-music #music .music-player-container,
html:not([data-theme]) body:not([data-theme]).page-music #music .music-player-container {
  background: radial-gradient(ellipse at 12% 10%, rgba(var(--music-stage-a), 0.26) 0%, transparent 48%),
    radial-gradient(ellipse at 86% 14%, rgba(var(--music-stage-b), 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 52% 102%, rgba(var(--music-stage-accent), 0.12) 0%, transparent 56%),
    linear-gradient(135deg, rgba(var(--music-stage-c), 0.28), rgba(var(--music-stage-a), 0.18) 48%, rgba(var(--music-stage-b), 0.14)),
    rgba(25, 30, 44, 0.52) !important;
  border-color: rgba(var(--music-stage-accent), 0.14) !important;
  box-shadow: 0 22px 64px rgba(var(--music-stage-c), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] body.page-music #music .player-main,
html[data-theme="dark"] body.page-music #music .playlist,
body[data-theme="dark"].page-music #music .player-main,
body[data-theme="dark"].page-music #music .playlist,
html:not([data-theme]) body:not([data-theme]).page-music #music .player-main,
html:not([data-theme]) body:not([data-theme]).page-music #music .playlist {
  background: radial-gradient(ellipse at 16% 12%, rgba(var(--music-stage-a), 0.18) 0%, transparent 48%),
    radial-gradient(ellipse at 86% 18%, rgba(var(--music-stage-b), 0.13) 0%, transparent 50%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(var(--music-stage-c), 0.1)),
    rgba(25, 29, 43, 0.38) !important;
  border-color: rgba(var(--music-stage-accent), 0.12) !important;
  box-shadow: 0 16px 46px rgba(var(--music-stage-c), 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.095) !important;
  backdrop-filter: blur(14px) saturate(0.96) !important;
  -webkit-backdrop-filter: blur(14px) saturate(0.96) !important;
}
html[data-theme="dark"] body.page-music #music .playlist-item:hover,
html[data-theme="dark"] body.page-music #music .playlist-item.active,
body[data-theme="dark"].page-music #music .playlist-item:hover,
body[data-theme="dark"].page-music #music .playlist-item.active,
html:not([data-theme]) body:not([data-theme]).page-music #music .playlist-item:hover,
html:not([data-theme]) body:not([data-theme]).page-music #music .playlist-item.active {
  background: radial-gradient(ellipse at 16% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, rgba(var(--music-stage-b), 0.12), rgba(var(--music-stage-a), 0.09)),
    rgba(255, 255, 255, 0.032) !important;
  background-color: rgba(255, 255, 255, 0.032) !important;
  border-color: rgba(var(--music-stage-accent), 0.15) !important;
  box-shadow: 0 8px 20px rgba(var(--music-stage-c), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] body.page-music #music .playlist::-webkit-scrollbar-thumb,
body[data-theme="dark"].page-music #music .playlist::-webkit-scrollbar-thumb,
html:not([data-theme]) body:not([data-theme]).page-music #music .playlist::-webkit-scrollbar-thumb {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(var(--music-stage-accent), 0.3) !important;
}
html[data-theme="dark"] body.page-music #music .control-btn.play-btn,
body[data-theme="dark"].page-music #music .control-btn.play-btn,
html:not([data-theme]) body:not([data-theme]).page-music #music .control-btn.play-btn {
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 36%),
    linear-gradient(135deg, rgba(var(--music-stage-accent), 0.66), rgba(var(--music-stage-a), 0.46)) !important;
  box-shadow: 0 10px 22px rgba(var(--music-stage-accent), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}
html[data-theme="dark"] body.page-music #music .playlist .playlist-item.active,
html[data-theme="dark"] body.page-music #music .playlist .playlist-item:hover,
body[data-theme="dark"].page-music #music .playlist .playlist-item.active,
body[data-theme="dark"].page-music #music .playlist .playlist-item:hover,
html:not([data-theme]) body:not([data-theme]).page-music #music .playlist .playlist-item.active,
html:not([data-theme]) body:not([data-theme]).page-music #music .playlist .playlist-item:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
  background-image: radial-gradient(ellipse at 16% 20%, rgba(255, 255, 255, 0.085) 0%, transparent 50%),
    linear-gradient(135deg, rgba(var(--music-stage-b), 0.1), rgba(var(--music-stage-a), 0.075)) !important;
  border-color: rgba(var(--music-stage-accent), 0.13) !important;
  box-shadow: 0 8px 18px rgba(var(--music-stage-c), 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
/* Emotion Flow is rendered inside the audio section; keep its stage title out of the global page-title light/dark split. */
html[data-theme="light"] body.emotion-flow-active .emotion-stage-title,
html[data-theme="dark"] body.emotion-flow-active .emotion-stage-title,
body[data-theme="light"].emotion-flow-active .emotion-stage-title,
body[data-theme="dark"].emotion-flow-active .emotion-stage-title,
body.emotion-flow-active .emotion-stage-title {
  color: color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 82%, #fffaf2) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--emotion-current-accent, #fff7ee) 82%, #fffaf2) !important;
  background: none !important;
  background-image: none !important;
  text-shadow: 0 0 26px color-mix(in srgb, var(--emotion-current, #e8b7c5) 24%, transparent),
    0 2px 18px color-mix(in srgb, var(--emotion-depth, #071126) 34%, transparent) !important;
}

/* Final page-scoped contrast lock for the resonance experience. */
html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel .stat-box,
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel .stat-box {
  border-color: rgba(156, 194, 224, 0.22) !important;
  color: #f4f7fb !important;
  background: linear-gradient(145deg, #20344d, #17283e) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(2, 8, 18, 0.22) !important;
}

html:not([data-theme="light"]) body.page-light #resonance .fan-map-panel :is(.stat-box-header, .stat-box-content),
body.page-light:not([data-theme="light"]) #resonance .fan-map-panel :is(.stat-box-header, .stat-box-content) {
  color: #b8c6d8 !important;
  -webkit-text-fill-color: #b8c6d8 !important;
  background: transparent !important;
}

html[data-theme="light"] body.page-light #resonance .resonance-heading-metrics button,
body[data-theme="light"].page-light #resonance .resonance-heading-metrics button {
  border-color: rgba(43, 82, 116, 0.25) !important;
  color: #244664 !important;
  -webkit-text-fill-color: #244664 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 238, 244, 0.92)) !important;
  box-shadow: 0 10px 24px rgba(48, 80, 108, 0.12), inset 0 1px 0 #fff !important;
  font-weight: 800 !important;
}

html[data-theme="light"] body.page-light #resonance .resonance-heading-metrics button i,
body[data-theme="light"].page-light #resonance .resonance-heading-metrics button i {
  color: #177f91 !important;
  -webkit-text-fill-color: #177f91 !important;
}

html[data-theme="light"] body.page-light #resonance .resonance-heading-metrics button:hover,
html[data-theme="light"] body.page-light #resonance .resonance-heading-metrics button:focus-visible,
body[data-theme="light"].page-light #resonance .resonance-heading-metrics button:hover,
body[data-theme="light"].page-light #resonance .resonance-heading-metrics button:focus-visible {
  border-color: rgba(177, 124, 43, 0.38) !important;
  color: #183a58 !important;
  background: linear-gradient(145deg, #fffdf7, #dceef2) !important;
  box-shadow: 0 14px 30px rgba(48, 80, 108, 0.16), 0 0 0 4px rgba(220, 177, 91, 0.1) !important;
}

html[data-theme="light"] body.page-light #resonance .fan-map-panel .stat-box,
body[data-theme="light"].page-light #resonance .fan-map-panel .stat-box {
  border-color: rgba(49, 84, 116, 0.24) !important;
  color: #233f5d !important;
  background: linear-gradient(145deg, #ffffff, #e8f1f5) !important;
  box-shadow: 0 10px 26px rgba(54, 84, 111, 0.13), inset 0 1px 0 #fff !important;
}

html[data-theme="light"] body.page-light #resonance .fan-map-panel :is(.stat-box-header, .stat-box-content),
body[data-theme="light"].page-light #resonance .fan-map-panel :is(.stat-box-header, .stat-box-content) {
  color: #385772 !important;
  -webkit-text-fill-color: #385772 !important;
  background: transparent !important;
}

html[data-theme="light"] body.page-light #resonance :is(.search-input-wrapper, .message-input-wrapper),
body[data-theme="light"].page-light #resonance :is(.search-input-wrapper, .message-input-wrapper) {
  border: 1px solid rgba(47, 83, 116, 0.24) !important;
  color: #203e5a !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(35, 66, 94, 0.06), 0 6px 16px rgba(45, 76, 104, 0.08) !important;
}

html[data-theme="light"] body.page-light #resonance :is(input, select)::placeholder,
body[data-theme="light"].page-light #resonance :is(input, select)::placeholder {
  color: #657b90 !important;
  -webkit-text-fill-color: #657b90 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.page-light #resonance .city-letter-empty,
body[data-theme="light"].page-light #resonance .city-letter-empty {
  border-color: rgba(52, 86, 118, 0.24) !important;
  color: #526b82 !important;
  -webkit-text-fill-color: #526b82 !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] body.page-light #resonance :is(#lightMineBtn, #lightCityBtn, .city-letter-submit)[disabled],
body[data-theme="light"].page-light #resonance :is(#lightMineBtn, #lightCityBtn, .city-letter-submit)[disabled] {
  border-color: rgba(48, 82, 113, 0.22) !important;
  color: #506b82 !important;
  -webkit-text-fill-color: #506b82 !important;
  background: linear-gradient(145deg, #eef4f7, #dfe9ee) !important;
  opacity: 0.72 !important;
}

body.page-light #resonance .resonance-emotion-divider .divider-wind-btn span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

body.page-light #resonance .resonance-shell {
  gap: clamp(22px, 2.8vw, 38px) !important;
}

body.page-light #resonance .resonance-emotion-divider {
  min-height: 72px !important;
  gap: 14px !important;
}

body.page-light #resonance .divider-wind-btn {
  width: 76px !important;
  min-width: 76px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  gap: 0 !important;
}

@media (max-width: 680px) {
  body.page-light #resonance .resonance-shell {
    gap: 22px !important;
  }

  body.page-light #resonance .resonance-emotion-divider {
    min-height: 78px !important;
  }
}

/* Selected map position: pin for her footprint, star for fan starlight. */
body.page-light #resonance :is(.her-footprint-marker, .latest-marker).is-selected {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 52px !important;
  min-width: 42px !important;
  min-height: 52px !important;
  overflow: visible !important;
  color: #c89b43 !important;
  background: transparent !important;
  filter: none !important;
  transform-origin: 50% 100% !important;
  animation: none !important;
}

body.page-light #resonance :is(.her-footprint-marker, .latest-marker).is-selected i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  color: #c89b43 !important;
  font-size: 46px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 3px 0 #5f4319) drop-shadow(0 9px 8px rgba(38, 28, 12, 0.38)) !important;
  text-shadow: 0 1px 0 rgba(255, 244, 207, 0.72) !important;
  animation: none !important;
}

body.page-light #resonance .latest-marker.is-selected .marker-pulse {
  position: absolute !important;
  inset: auto 7px 0 !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(211, 170, 83, 0.32) !important;
  animation: selectedMarkerGround 1.9s ease-in-out infinite !important;
}

body.page-light #resonance .fan-light-marker.is-selected {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 52px !important;
  min-width: 42px !important;
  min-height: 52px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px 999px 999px 8px !important;
  color: #f0bd49 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

body.page-light #resonance :is(.her-footprint-marker, .latest-marker, .fan-light-marker).maplibregl-marker.is-selected {
  animation: none !important;
  transition: opacity 160ms ease, filter 160ms ease !important;
}

body.page-light #resonance .fan-light-marker.is-selected::before {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  bottom: 0 !important;
  width: 24px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(91, 66, 28, 0.26) !important;
  box-shadow: 0 0 16px rgba(36, 81, 112, 0.18) !important;
  transform: none !important;
  animation: selectedMarkerGround 2.1s ease-in-out infinite !important;
}

body.page-light #resonance .fan-light-marker.is-selected::after {
  content: none !important;
}

body.page-light #resonance .fan-light-marker .fan-pin-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
}

body.page-light #resonance .fan-light-marker.is-selected .fan-pin-svg {
  position: relative !important;
  z-index: 1 !important;
  width: 48px !important;
  height: 58px !important;
  margin-top: -2px !important;
  animation: none !important;
}

body.page-light #resonance .fan-light-marker :is(.fan-pin-tail, .fan-pin-ring, .fan-pin-core, .fan-pin-star) {
  transform-box: fill-box !important;
  transform-origin: center !important;
}

body.page-light #resonance .fan-light-marker.is-lighting::before {
  animation: selectedMarkerGround 2.1s ease-in-out infinite, selectedLightBloom 1.25s ease-out both !important;
}

body.page-light #resonance .fan-light-marker.is-lighting .fan-pin-core {
  animation: selectedPinCoreGlow 1.25s ease-out both !important;
}

body.page-light #resonance .fan-light-marker.is-lighting .fan-pin-star {
  animation: selectedPinStarFlash 1.25s ease-out both !important;
}

body.page-light #resonance .map-city.is-selected {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  color: #c89b43 !important;
  transform: translate(-50%, -100%) !important;
}

body.page-light #resonance .map-city.is-selected::before,
body.page-light #resonance .map-city.is-selected::after {
  content: none !important;
}

body.page-light #resonance .map-city.is-selected.is-footprint i {
  font-size: 46px !important;
  filter: drop-shadow(0 3px 0 #5f4319) drop-shadow(0 9px 8px rgba(38, 28, 12, 0.38)) !important;
}

body.page-light #resonance .map-city.is-selected.is-fan {
  border: 0 !important;
  border-radius: 0 !important;
  color: #173b5b !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -100%) !important;
}

body.page-light #resonance .map-city.is-selected.is-fan .fan-pin-svg {
  width: 48px !important;
  height: 58px !important;
  overflow: visible !important;
  transform: none !important;
}

body.page-light #resonance .map-city.is-fan.is-lighting {
  animation: none !important;
}

body.page-light #resonance .map-city.is-fan.is-lighting .fan-pin-core {
  animation: selectedPinCoreGlow 1.25s ease-out both !important;
}

body.page-light #resonance .map-city.is-fan.is-lighting .fan-pin-star {
  animation: selectedPinStarFlash 1.25s ease-out both !important;
}

@keyframes selectedMapPinArrive {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.72);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes selectedMarkerGround {
  50% {
    opacity: 0.78;
    box-shadow: 0 0 0 9px rgba(239, 190, 75, 0.09), 0 0 20px rgba(36, 81, 112, 0.24);
  }
}

@keyframes selectedLightBloom {
  0% {
    opacity: 0.95;
    box-shadow: 0 0 0 0 rgba(255, 224, 132, 0.5), 0 0 12px rgba(36, 81, 112, 0.18);
  }
  45% {
    opacity: 1;
    box-shadow: 0 0 0 14px rgba(255, 224, 132, 0.27), 0 0 28px rgba(255, 225, 146, 0.74);
  }
  100% {
    opacity: 0.88;
    box-shadow: 0 0 0 22px rgba(255, 224, 132, 0), 0 0 0 28px rgba(135, 216, 230, 0);
  }
}

@keyframes selectedPinCoreGlow {
  45% {
    fill: rgba(255, 248, 204, 0.98);
    stroke: rgba(255, 225, 136, 0.86);
  }
}

@keyframes selectedPinStarFlash {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255, 234, 158, 0));
  }
  42% {
    filter: drop-shadow(0 0 8px rgba(255, 234, 158, 0.95));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-light #resonance :is(.her-footprint-marker, .latest-marker, .fan-light-marker).is-selected,
  body.page-light #resonance :is(.her-footprint-marker, .latest-marker, .fan-light-marker).is-selected i {
    animation: none !important;
  }
}

/* Good-version marker convergence: star dots, glow density, selected breathing. */
body.page-light #resonance .fan-light-marker {
  display: inline-grid !important;
  place-items: center !important;
  width: var(--marker-size, 30px) !important;
  height: var(--marker-size, 30px) !important;
  min-width: 24px !important;
  min-height: 24px !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 50% !important;
  color: #183955 !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92) 0 14%, transparent 15%),
    linear-gradient(135deg, #d8f1f4, #87c6e8 56%, #dca6b2) !important;
  box-shadow:
    0 3px 8px rgba(18, 38, 56, 0.16),
    0 0 0 4px rgba(135, 198, 232, 0.12) !important;
  filter: drop-shadow(0 6px 14px rgba(50, 137, 196, 0.24)) !important;
  transition: opacity 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

body.page-light #resonance .fan-light-marker i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  color: currentColor !important;
  font-size: clamp(13px, calc(var(--marker-size, 30px) * 0.48), 19px) !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(14, 23, 34, 0.24)) !important;
  text-shadow: none !important;
  transform: none !important;
}

body.page-light #resonance .fan-light-marker::before,
body.page-light #resonance .fan-light-marker::after {
  content: none !important;
}

body.page-light #resonance .fan-light-marker[data-density="quiet"] {
  opacity: 0.5 !important;
  box-shadow:
    0 2px 6px rgba(18, 38, 56, 0.12),
    0 0 0 3px rgba(135, 198, 232, 0.08) !important;
}

body.page-light #resonance .fan-light-marker[data-density="active"],
body.page-light #resonance .fan-light-marker[data-density="high"] {
  opacity: 0.82 !important;
}

body.page-light #resonance .fan-light-marker[data-density="hot"],
body.page-light #resonance .fan-light-marker.is-owned,
body.page-light #resonance .fan-light-marker.is-overlap {
  color: #143251 !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.94) 0 14%, transparent 15%),
    linear-gradient(135deg, #fff0bd, #d6a94e 58%, #e7a3af) !important;
  box-shadow:
    0 5px 14px rgba(82, 57, 16, 0.2),
    0 0 0 5px rgba(214, 169, 78, 0.15) !important;
}

body.page-light #resonance :is(.her-footprint-marker, .latest-marker).is-selected {
  width: 42px !important;
  height: 52px !important;
  min-width: 42px !important;
  min-height: 52px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: resonanceMarkerBreath 1.9s ease-in-out infinite !important;
}

body.page-light #resonance .fan-light-marker.is-selected {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  opacity: 1 !important;
  color: #102033 !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.96) 0 14%, transparent 15%),
    linear-gradient(135deg, #fff3c2, #d9aa4e 54%, #87c6e8 100%) !important;
  box-shadow:
    0 0 0 3px #d8a853,
    0 0 24px rgba(216, 169, 78, 0.58),
    0 0 48px rgba(216, 169, 78, 0.28) !important;
  filter: drop-shadow(0 8px 18px rgba(50, 137, 196, 0.28)) !important;
  animation: resonanceMarkerBreath 1.9s ease-in-out infinite !important;
}

body.page-light #resonance .fan-light-marker.is-selected i {
  font-size: 19px !important;
}

body.page-light #resonance :is(.her-footprint-marker, .latest-marker).is-lighting i,
body.page-light #resonance .map-city.is-footprint.is-lighting i {
  animation: resonanceIconIgnite 1.25s ease-out both !important;
}

body.page-light #resonance .fan-light-marker.is-lighting,
body.page-light #resonance .map-city.is-fan.is-lighting {
  animation: resonanceMarkerBreath 1.9s ease-in-out infinite, resonanceLightBloom 1.25s ease-out both !important;
}

body.page-light #resonance .fan-light-marker.is-lighting i,
body.page-light #resonance .map-city.is-fan.is-lighting i {
  animation: resonanceIconIgnite 1.25s ease-out both !important;
}

body.page-light #resonance .map-city.is-selected.is-fan {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 50% !important;
  color: #102033 !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.96) 0 14%, transparent 15%),
    linear-gradient(135deg, #fff3c2, #d9aa4e 54%, #87c6e8 100%) !important;
  box-shadow:
    0 0 0 3px #d8a853,
    0 0 24px rgba(216, 169, 78, 0.58),
    0 0 48px rgba(216, 169, 78, 0.28) !important;
  transform: translate(-50%, -50%) !important;
}

body.page-light #resonance :is(.her-footprint-marker, .latest-marker, .fan-light-marker).maplibregl-marker.is-selected {
  animation: resonanceMarkerBreath 1.9s ease-in-out infinite !important;
}

body.page-light #resonance :is(.her-footprint-marker, .latest-marker, .fan-light-marker).maplibregl-marker.is-lighting {
  animation: resonanceMarkerBreath 1.9s ease-in-out infinite, resonanceLightBloom 1.25s ease-out both !important;
}

@keyframes resonanceMarkerBreath {
  0%,
  100% {
    filter: drop-shadow(0 0 10px rgba(232, 199, 125, 0.28));
  }

  50% {
    filter: drop-shadow(0 0 24px rgba(143, 208, 236, 0.5));
  }
}

@keyframes resonanceLightBloom {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 224, 132, 0.48),
      0 0 14px rgba(36, 81, 112, 0.18);
  }

  45% {
    box-shadow:
      0 0 0 12px rgba(255, 224, 132, 0.26),
      0 0 32px rgba(255, 225, 146, 0.78);
  }

  100% {
    box-shadow:
      0 0 0 22px rgba(255, 224, 132, 0),
      0 0 0 28px rgba(135, 216, 230, 0);
  }
}

@keyframes resonanceIconIgnite {
  0%,
  100% {
    text-shadow: none;
    filter: drop-shadow(0 2px 3px rgba(14, 23, 34, 0.22));
  }

  42% {
    text-shadow: 0 0 16px rgba(255, 234, 158, 0.95);
    filter: drop-shadow(0 0 10px rgba(255, 234, 158, 0.9));
  }
}

/**
 * Accessibility and public-launch hardening.
 *
 * Keeps tap targets aligned with the acceptance baseline without changing the
 * visual language of individual modules.
 */

:where(button, [role="button"], input, select, textarea, summary) {
  touch-action: manipulation;
}

:where(button, [role="button"], a[href], summary, input[type="button"], input[type="submit"]) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, [role="button"], a[href], summary, input[type="button"], input[type="submit"]).is-pressing {
  transform: translateY(0) scale(0.985);
  filter: brightness(1.04);
}

:where(button, [role="button"], a[href], summary, input[type="button"], input[type="submit"]):is(.is-loading, [aria-busy="true"]) {
  cursor: wait;
}

:where(button, [role="button"], a[href], summary, input[type="button"], input[type="submit"]):is(.is-loading, [aria-busy="true"])::after {
  content: "";
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: jzyButtonBusy 720ms linear infinite;
}

@keyframes jzyButtonBusy {
  to {
    transform: rotate(1turn);
  }
}

:where(button, [role="button"]) {
  min-width: 44px;
  min-height: 44px;
}

body.emotion-flow-active .emotion-light-dot {
  min-width: 0;
  min-height: 0;
}

:where(.site-nav a, .brand-link, .brand-mark, .site-search-toggle, .search-toggle, .theme-toggle, .bgm-control) {
  min-width: 44px;
  min-height: 44px;
}

:where(.gallery-month-heading, .gallery-tab, .gallery-controls button, .gallery-item, .all-self-portrait-tile) {
  min-height: 44px;
}

:where(.lightbox-prev, .lightbox-next, .lightbox-close, .profile-pop-close, .drama-poster-viewer-close) {
  min-width: 44px;
  min-height: 44px;
}

:where(.works-expand-btn, .works-collapse-btn, .works-overview-card, .work-drama-jump, .drama-section-toggle) {
  min-height: 44px;
}

:where(.maplibregl-ctrl button, .mapboxgl-ctrl button) {
  min-width: 44px;
  min-height: 44px;
}

body.page-light #resonance .maplibregl-ctrl-logo {
  display: none !important;
}

body.page-light #resonance .maplibregl-ctrl-attrib {
  max-width: min(150px, 42vw) !important;
  padding: 2px 6px !important;
  border-radius: 10px 0 0 0 !important;
  color: #16324b !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 4px 14px rgba(37, 74, 105, 0.14) !important;
}

body.page-light #resonance .maplibregl-canvas-container,
body.page-light #resonance .maplibregl-canvas {
  background: #d9edf6 !important;
}

@media (pointer: coarse), (max-width: 768px) {
  :where(a, button, [role="button"], input, select, textarea) {
    scroll-margin-top: 96px;
  }

  :where(.site-nav a, .social-link, .music-link, .schedule-link, .about-link, .work-entry a) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  :where(.site-search-toggle, .brand-link, .theme-toggle, .bgm-control, .gallery-control-btn) {
    min-width: 48px;
    min-height: 48px;
  }
}

html body :is(.brand-link, .site-search-inline button, .site-search-inline input, .gallery-month-toggle, .gallery-control-group button, .self-orbit-play-mode button, .self-orbit-audio-mode button, .self-orbit-sync-mode button, .self-orbit-nav, .self-orbit-speed button, [data-all-self-mode], [data-particle-shape], .particle-shape-btn, #cameraParticleButton, #particleBurstButton, .lightbox-close, .source-direct-link, .work-drama-jump, #worksSearchInput, .drama-section-search input, .drama-section-search, .works-search-button, .works-search-input) {
  min-width: 44px !important;
  min-height: 44px !important;
  height: auto !important;
}

html body :is(.brand-link, .site-search-inline button, .gallery-month-toggle, .gallery-control-group button, .self-orbit-play-mode button, .self-orbit-audio-mode button, .self-orbit-sync-mode button, .self-orbit-nav, [data-all-self-mode], [data-particle-shape], .particle-shape-btn, #cameraParticleButton, #particleBurstButton, .source-direct-link, .work-drama-jump) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html body :is(#particleBurstButton, .work-drama-jump.is-compact, #worksSearchInput, .source-direct-link) {
  min-height: 44px !important;
}

html body :is([data-particle-shape], #particleBurstButton, .work-drama-jump.is-compact) {
  height: 44px !important;
}

html body.page-gallery :is([data-particle-shape], #particleBurstButton) {
  transform: none !important;
}

html body.page-gallery .lightbox:not(.open) {
  display: none !important;
}

html body.page-works .work-drama-jump.is-compact {
  min-height: 44px !important;
  height: 44px !important;
}

html:not([data-theme="light"]) body.page-works #works .work-drama-jump.is-compact,
body.page-works:not([data-theme="light"]) #works .work-drama-jump.is-compact {
  min-height: 44px !important;
  height: 44px !important;
}
/* Privacy control follows the existing footer rhythm and does not affect page geometry. */
.local-data-control {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  background: transparent;
  font: inherit;
  opacity: 0.72;
  cursor: pointer;
}

.local-data-control:hover,
.local-data-control:focus-visible {
  opacity: 1;
}

.local-data-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(34rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(86vh, 42rem);
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 1.25rem;
  color: var(--text, #f5f0e8);
  background: var(--surface, #17151b);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 35%);
  transform: translate(-50%, -50%);
}

.local-data-dialog:not([open]) {
  display: none;
}

.local-data-dialog::backdrop {
  background: rgb(5 5 8 / 70%);
  backdrop-filter: blur(8px);
}

.local-data-dialog__panel {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

.local-data-dialog__panel h2,
.local-data-dialog__panel p {
  margin: 0;
}

.local-data-dialog__panel p {
  line-height: 1.75;
}

.local-data-dialog__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  opacity: 0.62;
}

.local-data-dialog__close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

.local-data-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}