:root {
      --bg-color: #fce8e4;
      --text-color: #122820;
      --accent-color: #c84422;
      --card-border: rgba(18, 40, 32, 0.12);
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
      --theme-duration-card: 420ms;
      --theme-duration-card-scroll: 0ms;
      --theme-duration-section: 600ms;
      --theme-transition-duration: var(--theme-duration-section);
    }

    :root[data-theme-source="card"] {
      --theme-transition-duration: var(--theme-duration-card);
    }

    :root[data-theme-source="card"][data-theme-motion="scroll"] {
      --theme-transition-duration: var(--theme-duration-card-scroll);
    }

    :root[data-theme-source="section"][data-theme-motion="scroll"] {
      --theme-transition-duration: 0ms;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      overflow-x: hidden;
      transition: background-color var(--theme-transition-duration) var(--ease-out), color var(--theme-transition-duration) var(--ease-out);
      -webkit-font-smoothing: antialiased;
    }

    .skip-link {
      position: fixed;
      top: 8px;
      left: 8px;
      z-index: 1000;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--text-color);
      color: var(--bg-color);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transform: translateY(-160%);
      transition: transform 160ms var(--ease-out);
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    body.menu-is-open {
      overflow: hidden;
      overscroll-behavior: contain;
    }

    .serif-zh {
      font-family: 'Noto Serif SC', serif;
      font-weight: 600;
    }

    .italic-en {
      font-family: 'Faculty Glyphic', 'Space Grotesk', sans-serif;
      font-style: normal;
      font-weight: 400;
    }

    /* 顶部固定导航 */
    /* 顶部固定导航：紧凑轻盈设计，高度收窄至约 50px */
    header.site-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 10px 5vw; /* 高度调矮：上下仅 10px */
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;
      pointer-events: auto;
      /* 核心：自适应当前章节背景色的毛玻璃，绝不写死白色导致文字消失！ */
      background-color: color-mix(in srgb, var(--bg-color) 94%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
      box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.08);
      transition: background-color var(--theme-transition-duration) var(--ease-out), border-color var(--theme-transition-duration) var(--ease-out), box-shadow 0.3s;
      box-sizing: border-box;
      height: 52px;
    }

    .nav-brand {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: auto;
      text-decoration: none;
      color: var(--text-color); /* 严格跟随当前主题文字色，确保高对比 */
      transition: color var(--theme-transition-duration) var(--ease-out);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .brand-symbol {
      width: 20px;
      height: 20px;
      display: block;
      flex: 0 0 auto;
      object-fit: contain;
      border-radius: 3px;
      transform-origin: center;
      animation: rotateBadge 20s linear infinite;
    }

    /* 胶囊按钮：高度从 36px 优化为 30px，背景自适应，确保无论暗色还是亮色均清晰可见 */
    .nav-pill {
      position: relative;
      background-color: color-mix(in srgb, var(--text-color) 10%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
      color: var(--text-color);
      padding: 4px 16px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      height: 30px; /* 紧凑高度 */
      box-sizing: border-box;
      transition: transform 150ms var(--ease-out), background-color var(--theme-transition-duration), color var(--theme-transition-duration), border-color var(--theme-transition-duration);
      cursor: pointer;
      flex: 0 0 auto;
    }

    .nav-text-track {
      position: relative;
      display: grid;
      align-items: center;
      justify-content: center;
      width: max-content;
      min-height: 1em;
    }

    /* 中英文占用同一网格单元，尺寸由较长的标签决定，hover 时不再改写布局宽度 */
    .nav-text-en,
    .nav-text-zh {
      grid-area: 1 / 1;
      justify-self: center;
      text-align: center;
      white-space: nowrap;
      transform: translateY(0);
      line-height: 1;
      transition: opacity 150ms ease, transform 150ms var(--ease-out), visibility 0s linear 150ms;
    }

    .nav-text-en {
      opacity: 1;
      visibility: visible;
    }

    .nav-text-zh {
      opacity: 0;
      visibility: hidden;
      font-weight: 700;
      letter-spacing: 1px;
      pointer-events: none;
    }

    /* 悬停高亮反色 + 瞬间由英文切换为中文 */
    .nav-pill:hover {
      transform: translateY(-1px);
      background-color: var(--text-color);
      color: var(--bg-color);
      border-color: var(--text-color);
    }

    /* 悬停时：隐藏英文，显现中文 */
    .nav-pill:hover .nav-text-en {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-2px);
    }

    .nav-pill:hover .nav-text-zh {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition-delay: 0s, 0s, 0s;
    }

    /* 移动端汉堡菜单按钮：同样调矮为 30px 高度 */
    .mobile-menu-btn {
      display: none;
      pointer-events: auto;
      background-color: #122820;
      backdrop-filter: blur(10px);
      border: 1px solid #122820;
      border-radius: 999px;
      padding: 5px 14px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #f3ede2;
      cursor: pointer;
      align-items: center;
      gap: 6px;
      height: 30px;
      box-sizing: border-box;
      transition: background-color var(--theme-transition-duration), color var(--theme-transition-duration), border-color var(--theme-transition-duration);
    }

    .mobile-menu-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      flex: 0 0 6px;
      border-radius: 50%;
      background: #62d391;
      box-shadow: 0 0 0 0 rgba(98, 211, 145, 0.18);
      animation: mobile-menu-pulse 2.2s ease-in-out infinite;
    }

    @keyframes mobile-menu-pulse {
      0%,
      100% {
        opacity: 0.68;
        box-shadow: 0 0 0 0 rgba(98, 211, 145, 0.16), 0 0 5px rgba(98, 211, 145, 0.18);
      }

      50% {
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(98, 211, 145, 0.14), 0 0 12px rgba(98, 211, 145, 0.42);
      }
    }

    .mobile-drawer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #122820;
      color: #f3ede2;
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      z-index: 200;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 30px 6vw 40px;
      box-sizing: border-box;
      transform: translateY(-100%);
      opacity: 1;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
      pointer-events: none;
      overscroll-behavior: contain;
    }

    .mobile-drawer[hidden] {
      display: none;
    }

    .mobile-drawer.is-open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .drawer-close-btn {
      background: rgba(243, 237, 226, 0.12);
      border: 1px solid rgba(243, 237, 226, 0.32);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 18px;
      font-weight: 700;
      color: #f3ede2;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .drawer-nav {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 40px 0;
    }

    .drawer-link {
      font-size: 32px;
      font-weight: 700;
      letter-spacing: -1px;
      text-decoration: none;
      color: inherit;
      display: flex;
      align-items: baseline;
      gap: 16px;
    }

    .drawer-link-disabled {
      font-size: 16px;
      font-weight: 600;
      opacity: 0.6;
      letter-spacing: 1px;
    }

    .drawer-link.is-active {
      color: #efb3a4;
    }

    /* 标题空位中的动态微表情胶囊 */
    .hero-emoji-slot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: clamp(6px, 1.2vw, 12px);
      padding: clamp(3px, 0.6vw, 6px) clamp(12px, 1.6vw, 18px);
      margin: 0 clamp(6px, 1vw, 14px);
      background: rgba(255, 255, 255, 0.62);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1.5px solid var(--card-border);
      border-radius: 999px;
      vertical-align: middle;
      box-shadow: 0 6px 16px -4px rgba(18, 40, 32, 0.12);
      transform: translateY(-5px);
      opacity: 1;
      visibility: visible;
      pointer-events: none;
      user-select: none;
      line-height: 1;
      animation: slotEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes slotEntrance {
      0% { transform: translateY(18px) scale(0); opacity: 1; }
      100% { transform: translateY(-5px) scale(1); opacity: 1; }
    }

    @keyframes slotEntranceTouch {
      0% { transform: translate3d(0, 14px, 0); }
      100% { transform: translate3d(0, -5px, 0); }
    }

    .inline-emoji {
      width: clamp(20px, 3vw, 32px);
      height: clamp(20px, 3vw, 32px);
      line-height: 1;
      display: inline-block;
      flex: 0 0 auto;
      object-fit: contain;
      user-select: none;
      pointer-events: none;
      -webkit-user-drag: none;
    }

    .bubble-emoji {
      width: 1.15em;
      height: 1.15em;
      display: inline-block;
      flex: 0 0 auto;
      object-fit: contain;
      vertical-align: -0.22em;
      user-select: none;
      pointer-events: none;
      -webkit-user-drag: none;
    }

    /* 3 组各具性格的独立微动效 */
    @keyframes sparkFlicker {
      0%, 100% { transform: scale(1) rotate(-6deg); }
      25% { transform: scale(1.2) rotate(12deg); }
      50% { transform: scale(0.92) rotate(-10deg); }
      75% { transform: scale(1.14) rotate(8deg); }
    }

    @keyframes brainPulse {
      0%, 100% { transform: scale(1) translateY(0); }
      40% { transform: scale(1.15) translateY(-3px); }
      80% { transform: scale(0.96) translateY(1px); }
    }

    @keyframes bulbSwing {
      0%, 100% { transform: rotate(-12deg) scale(1); filter: drop-shadow(0 0 2px rgba(255,200,0,0.2)); }
      50% { transform: rotate(12deg) scale(1.12); filter: drop-shadow(0 0 10px rgba(255,210,0,0.7)); }
    }

    @keyframes bulbSwingLite {
      0%, 100% { transform: rotate(-10deg) scale(1); }
      50% { transform: rotate(10deg) scale(1.08); }
    }

    .emoji-spark {
      animation: sparkFlicker 2.2s ease-in-out infinite;
      transform-origin: center center;
    }

    .emoji-brain {
      animation: brainPulse 3s ease-in-out infinite;
      transform-origin: center bottom;
    }

    .emoji-bulb {
      animation: bulbSwing 2.6s ease-in-out infinite;
      transform-origin: center top;
    }

    /* 通用章节 */
    section {
      position: relative;
      width: 100%;
      padding: 60px 6vw 50px; /* 紧凑呼吸节奏，告别漫长空旷等待 */
    }

    :where(#about, #thought, #works-container, #system-qa, #ticker, #contact) {
      scroll-margin-top: 68px;
    }

    .section-badge {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 24px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      opacity: 0.75;
    }

    .section-badge::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 7px;
      background: currentColor;
      border-radius: 50%;
    }

    /* 1. HERO SECTION */
    #about {
      min-height: auto; /* 移除死板撑满，按内容自然流式排列 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 95px 4vw 36px; /* 底部留白大幅缩短至 36px */
      position: relative;
      overflow: hidden;
    }

    .hero-container {
      width: 100%;
      max-width: 1300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .hero-big-header {
      text-align: center;
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hero-en {
      font-family: 'Faculty Glyphic', 'Space Grotesk', sans-serif;
      font-size: clamp(38px, 7.5vw, 105px);
      line-height: 0.95;
      font-weight: 400;
      letter-spacing: -2px;
      margin-bottom: 16px;
      text-transform: uppercase;
    }

    .hero-en em {
      font-family: inherit;
      font-style: normal;
      font-weight: 400;
      text-transform: none;
    }

    .hero-manifesto-zh {
      font-size: clamp(16px, 2.2vw, 26px);
      line-height: 1.4;
      max-width: 780px;
      letter-spacing: -0.5px;
      opacity: 0.9;
    }

    /* Hero 3 张卡片扇形舞台 */
    .hero-cards-stage {
      position: relative;
      width: 100%;
      max-width: 900px;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px auto 40px;
      perspective: 1600px;
    }

    .hero-trio-deck {
      position: relative;
      width: 340px;
      height: 490px;
      transform-style: preserve-3d;
    }

    .hero-trio-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 28px;
      overflow: visible;
      transform-origin: 50% 90%;
      will-change: transform, opacity;
      box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
      cursor: pointer;
      transition: box-shadow 0.3s;
    }

    .hero-card-inner {
      width: 100%;
      height: 100%;
      border-radius: 28px;
      overflow: hidden;
      position: relative;
      background: #111;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .hero-card-media {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 8%;
      opacity: 0.6;
      transition: transform 0.6s var(--ease-out), opacity 0.5s;
    }

    .hero-card-video {
      display: block;
      background: #180306;
    }

    .hero-card-bubble {
      position: absolute;
      z-index: 10;
      pointer-events: none;
      animation: floatBubble 5s ease-in-out infinite alternate;
    }

    .bubble-pill {
      background: rgba(255, 255, 255, 0.95);
      color: #122820;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transform: scale(0);
      transition: transform 0.5s var(--ease-elastic);
      white-space: nowrap;
    }

    .hero-card-left { z-index: 4; }
    .hero-card-center { z-index: 10; }
    .hero-card-right { z-index: 5; }
    .hero-card-left .hero-card-bubble { top: -16px; left: -12px; }
    .hero-card-center .hero-card-bubble { top: 14%; right: -20px; }
    .hero-card-right .hero-card-bubble { bottom: 24%; right: -24px; }

    .hero-trio-card:hover .hero-card-media {
      transform: scale(1.08);
      opacity: 0.8;
    }

    .hero-media-controls {
      position: absolute;
      inset: auto 18px 18px;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transform: none;
      color: #fff;
      pointer-events: none;
    }

    .hero-media-control {
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.66);
      border-radius: 50%;
      background: rgba(10, 8, 8, 0.48);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: auto;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: background-color 180ms ease, transform 180ms var(--ease-out), border-color 180ms ease;
    }

    .hero-media-control:hover {
      background: rgba(10, 8, 8, 0.78);
      border-color: #fff;
      transform: scale(1.08);
    }

    .hero-media-control:focus-visible {
      background: rgba(10, 8, 8, 0.78);
      border-color: #fff;
      transform: scale(1.08);
      outline: 3px solid #fff;
      outline-offset: 4px;
      box-shadow: 0 0 0 7px rgba(18, 40, 32, 0.72);
    }

    .hero-media-control:disabled {
      opacity: 0.42;
      cursor: not-allowed;
      transform: none;
    }

    .hero-media-control:disabled:hover,
    .hero-media-control:disabled:focus-visible {
      background: rgba(10, 8, 8, 0.48);
      border-color: rgba(255, 255, 255, 0.66);
      transform: none;
    }

    .hero-control-icon {
      width: 20px;
      height: 20px;
      display: block;
    }

    .hero-media-play .icon-pause,
    .hero-media-mute .icon-volume-on {
      display: none;
    }

    .hero-media-card.is-playing .hero-media-play .icon-play,
    .hero-media-card.is-unmuted .hero-media-mute .icon-volume-muted {
      display: none;
    }

    .hero-media-card.is-playing .hero-media-play .icon-pause,
    .hero-media-card.is-unmuted .hero-media-mute .icon-volume-on {
      display: block;
    }

    .hero-media-card.is-playing .hero-media-controls {
      opacity: 0.72;
    }

    .hero-media-card.is-playing:hover .hero-media-controls,
    .hero-media-card.is-playing:focus-within .hero-media-controls {
      opacity: 1;
    }

    .hero-card-left .hero-media-controls,
    .hero-card-right .hero-media-controls {
      opacity: 1;
    }

    /* 图片与视频承担主体视觉，保留轻量的 emoji 胶囊作为状态提示 */
    .hero-card-inner {
      isolation: isolate;
    }

    .hero-media-control {
      font: inherit;
      line-height: 1;
    }

    .hero-card-center .hero-card-media {
      opacity: 0.72;
    }

    .hero-card-left { z-index: 4; }
    .hero-card-center { z-index: 10; }
    .hero-card-right { z-index: 5; }

    /* 先锋系统控制台 (Plan A: System Console) */
    .energy-stage {
      width: 100%;
      max-width: 820px;
      margin: 10px auto 0;
    }

    .system-console-widget {
      width: 100%;
      max-width: 820px;
      margin: 0;
      background: rgba(255, 255, 255, 0.48);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border: 1.5px solid var(--card-border);
      border-radius: 24px;
      padding: 22px 28px;
      box-sizing: border-box;
      box-shadow: 0 16px 36px -10px rgba(18, 40, 32, 0.08);
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: transform 0.3s var(--ease-out), box-shadow 0.3s, background-color 0.3s;
    }

    .system-console-widget:hover {
      background: rgba(255, 255, 255, 0.7);
      box-shadow: 0 20px 45px -10px rgba(18, 40, 32, 0.14);
      transform: translateY(-2px);
    }

    .console-top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .console-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 0, 0, 0.06);
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--text-color);
    }

    .console-pulse-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px #10b981;
      animation: pulseDot 2s infinite;
    }

    .console-algo-code {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      opacity: 0.55;
      font-family: 'Space Grotesk', monospace;
    }

    .console-main-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
    }

    .console-text-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-align: left;
    }

    .console-core-title {
      font-size: clamp(17px, 2.2vw, 23px);
      font-family: 'Noto Serif SC', 'Songti SC', serif;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.35;
      color: var(--text-color);
      margin: 0;
      text-wrap: balance;
    }

    .console-core-title em {
      font-family: inherit;
      font-style: normal;
      font-weight: inherit;
      font-size: inherit;
      letter-spacing: inherit;
      color: var(--accent-color);
    }

    .console-sub-manifesto {
      font-size: clamp(13px, 1.4vw, 15px);
      line-height: 1.5;
      opacity: 0.82;
      margin: 0;
      color: var(--text-color);
    }

    .console-loop-symbol {
      width: 156px;
      height: 156px;
      flex-shrink: 0;
      color: var(--text-color);
      opacity: 0.85;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .console-loop-symbol-image {
      width: 100%;
      height: 100%;
      display: block;
    }

    @keyframes pulseDot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.4); opacity: 0.6; }
    }

    /* 2. THOUGHT / PHILOSOPHY */
    #thought {
      min-height: auto;
      padding: 44px 6vw 56px; /* 顶部留白大幅缩短至 44px，与上个板块衔接自然 */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /*
       Hero → 01 的桌面节奏：Energy 只做轻量上浮，01 的内容在入口处
       短暂停留。停留由内容吸附承担，不额外留下空白画布。
    */
    @media (min-width: 1025px) and (pointer: fine) {
      .energy-stage {
        margin-top: 72px;
        will-change: transform;
      }

      #thought {
        padding-bottom: 0;
      }

      #thought::after {
        content: '';
        display: block;
        height: clamp(126px, 16vh, 160px);
      }

      .session-stage--thought {
        position: sticky;
        top: 92px;
        padding-bottom: 56px;
        z-index: 1;
        will-change: transform;
      }

      .session-stage--system-qa {
        will-change: transform;
      }
    }

    @media (prefers-reduced-motion: reduce) and (min-width: 1025px) and (pointer: fine) {
      #thought {
        padding-bottom: 56px;
      }

      #thought::after {
        display: none;
      }

      .session-stage--thought {
        position: relative;
        top: auto;
        padding-bottom: 0;
        will-change: auto;
      }

      .session-stage--system-qa {
        will-change: auto;
      }
    }

    .thought-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(400px, 0.8fr);
      gap: clamp(32px, 4vw, 60px);
      align-items: center;
      max-width: 1360px;
      margin: 0 auto;
      width: 100%;
    }

    .thought-headline {
      font-size: clamp(34px, 4.8vw, 68px);
      line-height: 1.18;
      font-weight: 700;
      letter-spacing: -1.5px;
    }

    .thought-card {
      background: #fff8f4;
      color: #122820;
      border: 1px solid rgba(18, 40, 32, 0.2);
      padding: 40px;
      border-radius: 28px;
      transform: translateY(30px);
    }

    .thought-en-quote {
      font-size: 20px;
      line-height: 1.5;
      margin-bottom: 24px;
      opacity: 0.95;
    }

    .system-layers {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding-top: 20px;
      border-top: 1px solid color-mix(in srgb, var(--text-color) 24%, transparent);
      font-size: 14px;
    }

    .system-layer-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
      column-gap: clamp(16px, 2vw, 28px);
      align-items: start;
    }

    .system-layer-label {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 2px;
    }

    .system-layer-title {
      line-height: 1.25;
    }

    .system-layer-subtitle {
      color: currentColor;
      font-size: 11px;
      letter-spacing: 0.02em;
      line-height: 1.25;
      opacity: 0.68;
      white-space: nowrap;
    }

    .system-layer-detail {
      min-width: 0;
      line-height: 1.45;
    }

    /* ========================================================
       3. WORKS / 桌面端 PIN 洗牌 + 移动端原生水平手势滑轨
       ======================================================== */
    #works-container {
      position: relative;
      width: 100%;
      height: 875vh; /* 80vh 首卡 + 7 × (45vh 转场 + 50vh 停留) + 30vh 尾停 + 100vh sticky */
      padding: 0;
    }

        .works-stage {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 0 40px; /* 固定靠左 40px，绝不多层叠加漂移 */
      box-sizing: border-box;
    }

    .works-layout {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 36px;
      margin: 0;
      padding: 0;
    }

    /* 左侧控制台：固定在左边！永远齐左！绝不向右漂移 */
    .works-controller {
      flex-shrink: 0;
      width: 320px;
      z-index: 20;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      text-align: left;
      height: 100%;
      margin: 0;
      padding: 0; /* 彻底清空内部 padding，避免和 stage 边距叠加导致漂移！ */
    }

    .chat-bubble-foudre {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 7px 15px;
      border-radius: 999px;
      font-size: 13px;
      margin: 0 0 16px 0;
      width: fit-content;
      transform-origin: left bottom;
      transition: transform 0.6s var(--ease-elastic);
    }

    .works-controller h2 {
      font-family: 'Faculty Glyphic', 'Space Grotesk', sans-serif;
      font-size: clamp(34px, 3.8vw, 52px);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -2px;
      margin: 0 0 14px 0;
      padding: 0;
      overflow: hidden;
      text-align: left;
    }

    .works-controller h2 span {
      display: block;
      transform: translateY(100%);
      transition: transform 0.8s var(--ease-out);
    }

    .works-controller.is-inview h2 span {
      transform: translateY(0%);
    }

    .works-controller p {
      font-size: 14.5px;
      line-height: 1.55;
      opacity: 0.85;
      margin: 0 0 20px 0;
      padding: 0;
      max-width: 310px;
      opacity: 1;
      transform: translateY(20px);
      transition: opacity 0.8s var(--ease-out) 0.2s, transform 0.8s var(--ease-out) 0.2s;
      text-align: left;
    }

    .works-controller.is-inview p {
      opacity: 0.85;
      transform: translateY(0);
    }

    /* 缩略图导航：允许优雅自然折行，彻底禁用任何滚动条！ */
    .thumbnails-nav {
      display: grid;
      grid-template-columns: repeat(4, 38px); /* 核心：转行严格采用 4 × 2 对称小方阵！ */
      gap: 8px;
      margin: 0 0 20px 0;
      padding: 0;
      width: fit-content;
      overflow: visible;
    }

    .thumb-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 2px solid transparent;
      overflow: hidden;
      cursor: pointer;
      padding: 0;
      margin: 0;
      background: rgba(255, 255, 255, 0.2);
      position: relative;
      transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    }

    .works-controller.is-inview .thumb-btn {
      transform: scale(1);
    }

    .thumb-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.45;
      transition: opacity 0.3s;
    }

    .thumb-btn.is-active {
      border-color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 6px 16px rgba(0, 0, 0, 0.35);
    }

    .thumb-btn.is-active img {
      opacity: 1;
    }

    /* 超大宽屏下舒展为单行 8 × 1 */
    @media (min-width: 1400px) {
      .thumbnails-nav {
        grid-template-columns: repeat(8, 34px);
        gap: 6px;
      }
      .thumb-btn {
        width: 34px;
        height: 34px;
      }
    }

    .counter-tag {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 5px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.25);
      margin: 0;
      width: fit-content;
      opacity: 1;
      transform: translateY(15px);
      transition: opacity 0.6s var(--ease-out) 0.3s, transform 0.6s var(--ease-out) 0.3s;
    }

    .works-controller.is-inview .counter-tag {
      opacity: 1;
      transform: translateY(0);
    }

    /* 右侧卡片舞台：紧贴控制台，尺寸自适应，绝对不出屏幕 */
    .deck-viewport {
      position: relative;
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      overflow: visible;
      perspective: 1600px;
      perspective-origin: 25% 50%;
    }

    .deck-track {
      position: relative;
      width: 100%;
      height: 520px;
      display: flex;
      align-items: center;
      transform-style: preserve-3d;
    }

    /* 卡片尺寸与起始位置：自适应，永远紧跟在左侧控制台右方，绝不被推飞！ */
    /* 卡组每帧改写该变量；声明为不继承，避免牵动卡内全部元素重算样式。 */
    @property --deck-transform {
      syntax: '*';
      inherits: false;
    }

    .deck-card-wrapper {
      position: absolute;
      top: 50%;
      left: 10px; /* 紧贴舞台起点 */
      /* 卡片按 Figma 画板固定 2:3：各断点只改卡宽，高度与居中偏移随之推导。 */
      --card-w: clamp(280px, 26vw, 360px);
      width: var(--card-w);
      /* 触屏端阴影挂在外层，圆角需与卡面一致，否则底部会露出方角。 */
      border-radius: calc(var(--card-w) * 24 / 450);
      height: calc(var(--card-w) * 1.5);
      margin-top: calc(var(--card-w) * -0.75);
      cursor: pointer;
      transform-style: preserve-3d;
      --deck-transform: none;
      transform: var(--deck-transform);
      will-change: transform, opacity;
      opacity: 1;
      transition: box-shadow 0.4s;
    }

    .works-stage.stage-ready .deck-card-wrapper {
      opacity: 1;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform-origin: center center;
      transition: transform 0.72s cubic-bezier(0.2, 0, 0, 1);
    }

    .deck-card-wrapper.is-flipped .flip-card-inner {
      transform: rotateY(180deg);
    }

    /* 翻面完成后还原为二维文字层，避免文字停留在 3D 合成面上发虚。 */
    .deck-card-wrapper.is-flipped.is-flip-settled {
      transform: none;
      transform-style: flat;
      will-change: auto;
    }

    .deck-card-wrapper.is-flipped.is-flip-settled .flip-card-inner {
      transform: none;
      transform-style: flat;
    }

    .deck-card-wrapper.is-flipped.is-flip-settled .face-front {
      visibility: hidden;
    }

    .deck-card-wrapper.is-flipped.is-flip-settled .face-back {
      transform: none;
      backface-visibility: visible;
      -webkit-backface-visibility: visible;
    }

    .card-face {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 28px;
      padding: 36px 32px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      box-shadow: -15px 25px 60px -10px rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.18);
      pointer-events: none;
    }

    .deck-card-wrapper:not(.is-flipped) .face-front,
    .deck-card-wrapper.is-flipped .face-back {
      pointer-events: auto;
    }

    .deck-card-wrapper.is-hit-disabled,
    .deck-card-wrapper.is-hit-disabled .face-front,
    .deck-card-wrapper.is-hit-disabled .face-back,
    .deck-card-wrapper.is-hit-disabled .face-front *,
    .deck-card-wrapper.is-hit-disabled .face-back * {
      pointer-events: none;
    }

    .face-front {
      background: #0f1614;
      color: #ffffff;
    }

    /* 图片保持原始冲击力，只在底部轮播按钮区域加入局部渐变。 */
    .face-front::after {
      content: '';
      position: absolute;
      inset: 68% 0 0;
      z-index: 2;
      background: linear-gradient(180deg, rgba(15, 22, 20, 0) 0%, rgba(15, 22, 20, 0.72) 100%);
      pointer-events: none;
    }

    .card-media {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      background: #0f1614;
    }

    .card-media-fade {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: #000000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 520ms linear;
    }

    .deck-card-wrapper.is-carousel-fading .card-media-fade {
      opacity: 0.9;
    }

    .face-front .card-bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.035);
      transition: opacity 0.55s cubic-bezier(0.2, 0, 0, 1), transform 0.75s cubic-bezier(0.2, 0, 0, 1);
      pointer-events: none;
    }

    .face-front .card-bg-img.is-active {
      opacity: 1;
      transform: scale(1);
    }

    .case-card--coming-soon .face-front::after {
      display: none;
    }

    .card-coming-soon {
      background: #070707;
    }

    .coming-soon-fallback,
    .coming-soon-iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .coming-soon-fallback {
      object-fit: cover;
      object-position: center;
    }

    .coming-soon-iframe {
      display: block;
      border: 0;
      background: #070707;
      pointer-events: none;
    }

    .deck-card-wrapper:hover .face-front .card-bg-img.is-active {
      transform: scale(1.06);
      opacity: 1;
    }

    .deck-card-wrapper.is-card-paused {
      cursor: default;
    }

    .deck-card-wrapper.is-card-paused .story-dots,
    .deck-card-wrapper.is-card-paused .card-carousel-controls {
      display: none;
    }

    .deck-card-wrapper.is-card-paused:hover .face-front .card-bg-img.is-active {
      transform: scale(1);
    }

    .face-front-content {
      position: relative;
      z-index: 3;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      pointer-events: none;
    }

    .story-dots {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
    }

    .story-dot {
      position: relative;
      height: 3px;
      flex: 1;
      background: rgba(255, 255, 255, 0.35);
      border-radius: 99px;
      overflow: hidden;
      pointer-events: none;
    }

    .story-dot::after {
      content: '';
      position: absolute;
      inset: 0;
      background: #ffffff;
      transform: scaleX(0);
      transform-origin: left center;
    }

    .story-dot.is-active::after {
      transform: scaleX(1);
    }

    .deck-card-wrapper.is-carousel-playing .story-dot.is-active::after {
      animation: storyProgress var(--carousel-duration, 4.2s) linear both;
    }

    @keyframes storyProgress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    .card-carousel-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
      pointer-events: none;
    }

    .deck-card-wrapper.is-active-card .card-carousel-controls {
      opacity: 1;
      transform: translateY(0);
    }

    .card-carousel-control {
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 50%;
      background: rgba(12, 18, 16, 0.42);
      color: #ffffff;
      display: grid;
      place-items: center;
      cursor: pointer;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
      pointer-events: auto;
    }

    .card-carousel-control:disabled {
      opacity: 0;
      pointer-events: none;
    }

    .card-carousel-control svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .card-carousel-control--toggle .icon-play {
      display: none;
    }

    .deck-card-wrapper.is-carousel-user-paused .card-carousel-control--toggle .icon-pause {
      display: none;
    }

    .deck-card-wrapper.is-carousel-user-paused .card-carousel-control--toggle .icon-play {
      display: block;
    }

    .card-carousel-control:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: #ffffff;
      transform: scale(1.06);
    }

    .card-carousel-control:focus-visible {
      outline: 2px solid #ffffff;
      outline-offset: 3px;
    }

    .card-top-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .face-front .card-top-meta {
      justify-content: space-between;
    }

    .card-cat-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      background: rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(10px);
      padding: 5px 12px;
      border-radius: 999px;
    }

    /* 4. Q&A + SYSTEM */
    #system-qa {
      min-height: auto;
      padding: 0;
      display: block;
    }

    .session-stage--system-qa {
      width: 100%;
      padding: 60px 6vw 50px;
    }

    .qa-container {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
    }

    .qa-item {
      border-top: 1px solid var(--card-border);
      padding: 24px 0;
      cursor: pointer;
    }

    .qa-item:last-child {
      border-bottom: 1px solid var(--card-border);
    }

    .qa-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }

    .qa-title {
      font-size: clamp(18px, 2.4vw, 30px);
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .qa-display-en {
      font-family: 'Faculty Glyphic', 'Space Grotesk', sans-serif;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
    }

    .qa-icon-toggle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s;
    }

    .qa-item.is-open .qa-icon-toggle {
      transform: rotate(45deg);
      background: var(--text-color);
      color: var(--bg-color);
    }

    .qa-content-grid {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.38s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .qa-item.is-open .qa-content-grid {
      grid-template-rows: 1fr;
    }

    .qa-content-overflow {
      overflow: hidden;
    }

    .qa-content-body {
      opacity: 1;
      transform: translateY(-6px);
      transition: opacity 0.32s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
      padding-top: 16px;
    }

    .qa-item.is-open .qa-content-body {
      opacity: 0.88;
      transform: translateY(0);
    }

    .qa-content-body p {
      font-size: 15px;
      line-height: 1.7;
      max-width: 760px;
    }

    /* 5. TICKER */
    #ticker {
      min-height: 35vh;
      overflow: hidden;
      padding: 30px 0;
      display: flex;
      align-items: center;
      background-color: var(--bg-color);
      color: var(--text-color);
      isolation: isolate;
    }

    .ticker-wrapper {
      font-family: 'Faculty Glyphic', 'Space Grotesk', sans-serif;
      display: flex;
      white-space: nowrap;
      gap: 40px;
      font-size: clamp(48px, 7.5vw, 100px);
      font-weight: 400;
      letter-spacing: -2px;
      text-transform: uppercase;
      will-change: transform;
    }

    @keyframes ticker-marquee-touch {
      to { transform: translate3d(-50%, 0, 0); }
    }

    /* 6. CONTACT / FOOTER */
    footer.site-footer {
      padding: 20px 5vw 32px;
      min-height: 60vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    .site-footer .section-badge {
      opacity: 1;
    }

    .footer-contact-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(36px, 8vw, 120px);
      flex: 1;
      min-height: 340px;
      padding: clamp(38px, 7vh, 78px) 0 clamp(76px, 12vh, 110px);
    }

    .footer-big-title {
      font-family: 'Faculty Glyphic', 'Space Grotesk', sans-serif;
      font-size: clamp(44px, 8.5vw, 96px);
      font-weight: 400;
      letter-spacing: -2.5px;
      line-height: 0.98;
    }

    .footer-socials {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(18px, 2.6vw, 36px);
      padding-right: 0;
    }

    .footer-social-link {
      position: relative;
      display: grid;
      width: 60px;
      height: 60px;
      place-items: center;
      flex: 0 0 60px;
      color: #ffffff;
      text-decoration: none;
      isolation: isolate;
      cursor: pointer;
      transition: color 150ms var(--ease-out);
    }

    .footer-social-link::before {
      position: absolute;
      z-index: 0;
      inset: 0;
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: 16px;
      background-color: rgba(255, 255, 255, 0.28);
      content: '';
      opacity: 0;
      pointer-events: none;
      -webkit-backdrop-filter: blur(12px) saturate(145%);
      backdrop-filter: blur(12px) saturate(145%);
      box-shadow: 0 8px 18px rgba(13, 36, 28, 0.12);
      transition: opacity 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
    }

    .footer-social-link:hover::before,
    .footer-social-link:focus-visible::before {
      opacity: 1;
      background-color: #ffffff;
      border-color: #ffffff;
      box-shadow: 0 10px 22px rgba(13, 36, 28, 0.2);
    }

    @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
      .footer-social-link[data-tooltip]::after {
        position: absolute;
        z-index: 2;
        bottom: calc(100% + 10px);
        left: 50%;
        padding: 8px 11px;
        border-radius: 999px;
        background: #f3ede2;
        box-shadow: 0 6px 18px rgba(13, 36, 28, 0.2);
        color: #122820;
        content: attr(data-tooltip);
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 4px);
        visibility: hidden;
        transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 150ms;
      }

      .footer-social-link[data-tooltip]:hover::after,
      .footer-social-link[data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(-50%, 0);
        visibility: visible;
      }
    }

    .footer-social-link:active {
      transform: scale(0.96);
    }

    .footer-social-glyph {
      position: relative;
      z-index: 1;
      display: block;
      width: 54px;
      height: 54px;
      object-fit: contain;
      background: transparent;
    }

    .footer-social-image {
      filter: brightness(0) invert(1);
      background: transparent;
      border-radius: 0;
      transition: filter 150ms var(--ease-out);
    }

    .footer-social-image--xiaohongshu {
      width: 54px;
      height: 54px;
      border-radius: 0;
    }

    .footer-social-envelope {
      width: 54px;
      height: 54px;
      color: #ffffff;
      transition: color 150ms var(--ease-out);
    }

    .footer-social-envelope-detail {
      stroke: var(--bg-color);
    }

    .footer-social-link:hover .footer-social-envelope-detail,
    .footer-social-link:focus-visible .footer-social-envelope-detail {
      stroke: #ffffff;
    }

    .footer-social-link:hover .footer-social-image,
    .footer-social-link:focus-visible .footer-social-image {
      filter: none;
    }

    .footer-social-link:hover .footer-social-envelope,
    .footer-social-link:focus-visible .footer-social-envelope {
      color: #2f6fe4;
    }

    html[data-layout="touch"] .footer-social-link {
      transform: none;
    }

    html[data-layout="touch"] .footer-social-link:active {
      transform: scale(0.96);
    }

    html[data-layout="touch"] .footer-social-glyph {
      transform: none;
    }

    .footer-meta-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      padding-top: 20px;
    }

    .footer-meta-copy p {
      margin: 0;
    }

    .footer-meta-name {
      font-weight: 700;
      font-size: 16px;
    }

    .footer-meta-note {
      margin-top: 4px;
      font-size: 13px;
    }

    .footer-back-to-top {
      appearance: none;
      -webkit-appearance: none;
      display: inline-flex;
      width: 48px;
      height: 48px;
      align-items: center;
      justify-content: center;
      flex: 0 0 48px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #ffffff;
      cursor: pointer;
      transition-property: background-color, border-color, color, transform;
      transition-duration: 150ms;
      transition-timing-function: var(--ease-out);
    }

    .footer-back-to-top:hover,
    .footer-back-to-top:focus-visible {
      border-color: #ffffff;
      background: #ffffff;
      color: #d94e28;
    }

    .footer-back-to-top:active {
      transform: scale(0.96);
    }

    .footer-back-to-top .back-to-top-icon {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
    }

    .qr-dialog {
      width: min(440px, calc(100vw - 32px));
      max-width: none;
      max-height: calc(100vh - 32px);
      margin: auto;
      overflow: auto;
      border: 1px solid rgba(18, 40, 32, 0.18);
      border-radius: 24px;
      padding: 0;
      background: #fff9f3;
      color: #122820;
      box-shadow: 0 28px 80px rgba(13, 36, 28, 0.28);
    }

    .qr-dialog::backdrop {
      background: rgba(13, 36, 28, 0.72);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    .qr-dialog-panel {
      padding: 24px;
    }

    .qr-dialog-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .qr-dialog-kicker {
      margin: 0 0 6px;
      color: rgba(18, 40, 32, 0.58);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    .qr-dialog h2 {
      margin: 0;
      font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
      font-size: 25px;
      font-weight: 600;
      line-height: 1.2;
    }

    .qr-dialog-close {
      display: inline-grid;
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      place-items: center;
      border: 1px solid rgba(18, 40, 32, 0.2);
      border-radius: 50%;
      background: transparent;
      color: #122820;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }

    .qr-dialog-media {
      display: grid;
      min-height: 260px;
      margin: 20px 0 16px;
      place-items: center;
      border: 1px solid rgba(18, 40, 32, 0.12);
      border-radius: 16px;
      background: #ffffff;
      overflow: hidden;
    }

    .qr-dialog-image {
      display: block;
      width: min(100%, 340px);
      height: auto;
      aspect-ratio: 1;
      object-fit: contain;
    }

    .qr-dialog-help {
      margin: 0;
      color: rgba(18, 40, 32, 0.72);
      font-size: 14px;
      line-height: 1.6;
    }

    /* 悬浮胶囊 (仅桌面端) */
    .capsule-widget {
      position: fixed;
      bottom: 36px;
      right: 36px;
      width: 280px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(16px);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      padding: 14px 16px;
      box-shadow: 0 24px 45px -12px rgba(0, 0, 0, 0.22);
      z-index: 99;
      display: flex;
      flex-direction: column;
      gap: 10px;
      cursor: pointer;
      color: #122820;
      transition: transform 0.4s var(--ease-out);
    }

    .capsule-widget[data-capsule-visible="false"] {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(120px);
    }

    .capsule-widget:hover {
      transform: translateY(-4px);
    }

    .capsule-top {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .capsule-img {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      object-fit: cover;
    }

    .capsule-text h4 {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
    }

    .capsule-text p {
      font-size: 11px;
      opacity: 0.65;
      margin-top: 2px;
    }

    .capsule-progress-track {
      width: 100%;
      height: 4px;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }

    .capsule-progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: #c84422;
      border-radius: 999px;
    }

    @keyframes rotateBadge {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes pulseSystem {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    @keyframes floatBubble {
      0% { transform: translateY(0px) rotate(0deg); }
      100% { transform: translateY(-8px) rotate(3deg); }
    }

    /* ========================================================
       7. 移动端专门响应式规则 (max-width: 1023px)
       ======================================================== */
    
    /* 宽屏大显示器专属舒展适配 (min-width: 1200px)：卡片放大 + 舞台充分充实，彻底告别右侧过空 */
    @media (min-width: 1200px) {
      .works-stage {
        padding: 0 5vw;
      }
      .works-layout {
        gap: 60px;
      }
      .deck-card-wrapper {
        --card-w: clamp(380px, 24vw, 460px);
        left: 30px;
      }
    }

    /* 超宽 2K / 4K 大显示器扩展 (min-width: 1600px) */
    @media (min-width: 1600px) {
      .deck-card-wrapper {
        --card-w: 460px;
        /* 仅在超宽视口中把卡片组向可用舞台中心拉开；中/窄视口保持原锚点。 */
        left: clamp(30px, calc(50vw - 785px), 180px);
      }
    }

    /* 中视口下左右卡片会伸出舞台边缘，胶囊向卡片内部收拢以保持完整可见。 */
    @media (min-width: 768px) and (max-width: 900px) {
      .hero-card-left .hero-card-bubble {
        left: 72px;
      }
      .hero-card-right .hero-card-bubble {
        right: 76px;
      }
      .bubble-pill {
        padding: 6px 12px;
        font-size: 12px;
      }
    }

    @media (max-width: 767px) {
      /* 隐藏桌面端平铺导航，呼出移动端汉堡菜单 */
      .nav-links {
        display: none;
      }
      .mobile-menu-btn {
        display: inline-flex;
      }

      /* 隐藏桌面端右下角常驻胶囊，把宝贵屏幕让给内容 */
      .capsule-widget {
        display: none;
      }

      /* 统一移动端间距 */
      section {
        padding: 50px 6vw 40px;
      }

      /* Engine 在窄屏上使用明确的两列网格，避免顶部标签和正文依赖 flex 挤压。 */
      .energy-stage {
        max-width: none;
        margin-top: 22px;
      }

      .system-console-widget {
        padding: 22px 24px 24px;
        gap: 18px;
      }

      .system-console-widget:hover {
        background: rgba(255, 255, 255, 0.48);
        box-shadow: 0 16px 36px -10px rgba(18, 40, 32, 0.08);
        transform: none;
      }

      .console-top-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(78px, 92px);
        align-items: start;
        gap: 12px;
      }

      .console-status-pill {
        min-width: 0;
        max-width: 100%;
        align-items: flex-start;
        padding: 7px 12px;
        line-height: 1.15;
      }

      .console-status-text {
        min-width: 0;
        line-height: 1.15;
      }

      .console-algo-code {
        min-width: 0;
        max-width: 92px;
        align-self: center;
        line-height: 1.25;
        text-align: left;
        overflow-wrap: anywhere;
      }

      .console-main-body {
        min-width: 0;
        gap: 14px;
      }

      .console-text-group {
        min-width: 0;
        flex: 1 1 auto;
      }

      .console-core-title {
        font-size: clamp(17px, 4.7vw, 20px);
        line-height: 1.34;
      }

      .console-sub-manifesto {
        font-size: 13px;
        line-height: 1.55;
      }

      .console-loop-symbol {
        width: 112px;
        height: 112px;
      }

      /* 触摸端卡片胶囊只淡入淡出，不做 scale 或父层浮动，避免 Safari 重绘抖动。 */
      .hero-card-bubble {
        animation: none;
      }

      .hero-card-bubble .bubble-pill {
        transform: none;
        transition: none;
        opacity: 0;
      }

      /* iPhone 上避免 backdrop-filter 与连续 SVG 滤镜同时触发重绘。 */
      .hero-emoji-slot {
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 4px 12px -4px rgba(18, 40, 32, 0.1);
        animation: slotEntranceTouch 0.55s cubic-bezier(0.2, 0, 0, 1) both;
        will-change: transform;
      }

      .hero-emoji-slot .inline-emoji {
        will-change: transform;
      }

      .hero-emoji-slot .emoji-bulb {
        animation: bulbSwingLite 2.8s ease-in-out infinite;
      }

      /* iPhone Safari 仍会对行内标题中的连续 emoji 变换产生抖动，直接冻结该胶囊。 */
      .hero-emoji-slot {
        animation: none;
        transform: translateY(-5px);
        will-change: auto;
      }

      .hero-emoji-slot .inline-emoji {
        animation: none;
        transform: none;
        will-change: auto;
      }

      /* Hero 3 张卡片在移动端饱满大跨度扇形展开 (Full Fan-out & Animation) */
      .hero-cards-stage {
        width: 100%;
        height: 380px;
        margin: 15px auto 25px;
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .hero-trio-deck {
        width: 210px;
        height: 315px;
        position: relative;
        transform-style: preserve-3d;
      }
      .hero-trio-card {
        border-radius: 20px;
        transform-origin: 50% 90%;
        box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.38);
      }
      .hero-card-inner {
        border-radius: 20px;
      }
      .hero-media-control {
        width: 38px;
        height: 38px;
      }
      .hero-card-left .hero-card-bubble {
        left: 24px;
      }
      .hero-card-center .hero-card-bubble {
        right: 12px;
      }
      .hero-card-right .hero-card-bubble {
        right: 24px;
      }
      .bubble-pill {
        padding: 4px 10px;
        font-size: 10px;
      }

      .hero-card-left .hero-card-bubble {
        /* 左卡大半在屏幕外：胶囊跨在它露出部分的上沿（与桌面版压卡片顶角一致），
           iPhone 上胶囊约 82px 宽，恰好落在左卡露出的约 99px 之内。 */
        left: 76px;
        top: -14px;
      }

      .hero-card-right .hero-card-bubble {
        right: 48px;
      }

      @media (max-width: 380px) {
        /* 375 宽时左卡露出更窄，胶囊略抬高，让右端越过中卡顶角。 */
        .hero-card-left .hero-card-bubble {
          top: -24px;
        }

        .system-console-widget {
          padding-inline: 20px;
        }

        .console-algo-code {
          max-width: 84px;
          font-size: 10px;
        }

        .console-loop-symbol {
          width: 96px;
          height: 96px;
        }
      }

      /* Thought 布局转为单列 */
      .thought-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .thought-card {
        padding: 26px;
        transform: translateY(0);
      }

      /* 核心重构：Case Deck 在移动端彻底取消 PIN 劫持，转为原生水平惯性触摸滑轨 */
      #works-container {
        height: auto;
        padding: 50px 0;
      }

      .works-stage {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        padding: 0 24px; /* 窄屏/移动端严格固定靠左 24px，绝不产生巨大空白漂移！ */
        overflow: visible;
      }

      .works-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .works-controller {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
      }

      .works-controller h2 {
        font-size: 34px;
        margin-bottom: 12px;
      }
      .works-controller h2 span {
        transform: translateY(0%);
      }

      .works-controller p {
        opacity: 0.85;
        transform: translateY(0);
        max-width: 100%;
        margin-bottom: 20px;
      }

      .thumbnails-nav {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
      }

      .thumb-btn {
        width: 38px;
        height: 38px;
        transform: scale(1);
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        pointer-events: auto;
      }

      .counter-tag {
        opacity: 1;
        transform: translateY(0);
      }

      /* 移动端水平原生触屏滑轨 */
      .deck-viewport {
        width: 100vw;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* 顶部留出插画越出卡片的高度（原型最高越出卡宽的 20%）。 */
        padding: calc(min(80vw, 320px) * 0.21) max(6vw, calc((100vw - min(80vw, 320px)) / 2)) 30px;
        box-sizing: border-box;
        display: flex;
        perspective: none;
      }

      .deck-viewport::-webkit-scrollbar {
        display: none; /* 隐藏原生滚动条，更加沉浸洁净 */
      }

      .deck-track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: max-content;
        height: auto;
        transform: none;
      }

      /* 移动端单卡：80vw 宽度，右侧自然露头，提示滑动 */
      .deck-card-wrapper {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 0;
        --card-w: min(80vw, 320px);
        flex-shrink: 0;
        scroll-snap-align: center;
        opacity: 1;
        transform: none;
        box-shadow: 0 16px 35px -8px rgba(0, 0, 0, 0.35);
      }

      .deck-card-wrapper.case-card--coming-soon {
        transform: none;
      }

      .card-face {
        padding: 26px 22px;
      }

      .card-carousel-control {
        width: 40px;
        height: 40px;
      }

      footer.site-footer {
        padding: 28px 6vw 28px;
        min-height: 70vh;
      }

      .footer-contact-main {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 42px;
        min-height: 0;
        padding: 44px 0 58px;
      }

      .footer-socials {
        justify-content: flex-start;
        gap: 18px;
        padding-right: 0;
      }

      .footer-social-link::before {
        inset: 0;
      }

      .footer-meta-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
      }

    }

    /* 平板触摸布局：取消桌面端堆叠与滚动驱动，保证单卡媒体完整可见。 */
    @media (min-width: 768px) and (max-width: 1024px),
      (pointer: coarse) and (min-width: 768px) {
      /* iPad 与触摸平板共享低成本胶囊动效，保留 transform，去掉高成本滤镜。 */
      .hero-card-bubble {
        animation: none;
      }

      .hero-card-bubble .bubble-pill {
        transform: none;
        transition: none;
        opacity: 0;
      }

      .hero-emoji-slot {
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 4px 12px -4px rgba(18, 40, 32, 0.1);
        animation: slotEntranceTouch 0.55s cubic-bezier(0.2, 0, 0, 1) both;
        will-change: transform;
      }

      .hero-emoji-slot .inline-emoji {
        will-change: transform;
      }

      .hero-emoji-slot .emoji-bulb {
        animation: bulbSwingLite 2.8s ease-in-out infinite;
      }

      .nav-links {
        display: none;
      }

      .mobile-menu-btn {
        display: inline-flex;
      }

      .capsule-widget {
        display: none;
      }

      /* 触摸端保留扇形叠放；中心静帧不拦截视频卡的点击。 */
      .hero-card-center {
        pointer-events: none;
      }

      .hero-media-card.is-hero-card-priority {
        z-index: 20;
      }

      #works-container {
        height: auto;
        padding: 50px 0;
      }

      .works-stage {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        padding: 0 32px;
        overflow: visible;
      }

      .works-layout {
        display: flex;
        flex-direction: column;
        gap: 28px;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .works-controller {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
      }

      .works-controller h2 {
        font-size: clamp(38px, 6vw, 52px);
        margin-bottom: 12px;
      }

      .works-controller h2 span,
      .works-controller p {
        transform: translateY(0);
      }

      .works-controller p {
        max-width: 100%;
        margin-bottom: 20px;
      }

      .thumbnails-nav {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 8px;
        margin-bottom: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
      }

      .thumb-btn {
        flex: 0 0 38px;
        transform: scale(1);
        position: relative;
        z-index: 2;
        pointer-events: auto;
      }

      .counter-tag {
        opacity: 1;
        transform: translateY(0);
      }

      .deck-viewport {
        width: 100vw;
        height: auto;
        /* 外层为居中排列，满屏宽的滑轨会自动居中；额外负边距会让卡片偏左。 */
        margin-left: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: calc(min(68vw, 400px) * 0.21) max(10vw, calc((100vw - min(68vw, 400px)) / 2)) 34px;
        perspective: none;
      }

      .deck-track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: max-content;
        height: auto;
        transform: none;
      }

      .deck-card-wrapper {
        position: relative;
        top: auto;
        left: auto;
        --card-w: min(68vw, 400px);
        margin-top: 0;
        flex: 0 0 var(--card-w);
        scroll-snap-align: center;
        opacity: 1;
        transform: none;
        box-shadow: 0 16px 35px -8px rgba(0, 0, 0, 0.35);
      }

      .deck-card-wrapper.case-card--coming-soon {
        transform: none;
      }

      .face-front .card-bg-img,
      .face-front .card-bg-img.is-active,
      .deck-card-wrapper:hover .face-front .card-bg-img.is-active {
        object-fit: cover;
        transform: none;
        transition: opacity 280ms ease;
      }
    }

    /* 触摸端 Hero 卡片保留扇形运动，但使用二维合成，减少视频层的 3D 重绘。 */
    @media (max-width: 1024px), (pointer: coarse) {
      .hero-cards-stage {
        perspective: none;
      }

      .hero-trio-deck,
      .hero-trio-card {
        transform-style: flat;
      }

      .hero-trio-card {
        will-change: transform;
        box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.34);
      }

      .hero-media-control {
        background: rgba(10, 8, 8, 0.62);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    }

    
    /* Keyboard-visible focus for every primary interactive control. */
    :where(a, button, [tabindex]):focus-visible {
      outline: 3px solid currentColor;
      outline-offset: 4px;
    }

    .qa-header {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .qa-header .qa-title {
      flex: 1;
    }

    .capsule-widget {
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      text-align: left;
    }

    @media (prefers-reduced-motion: reduce) {
      html[data-motion="reduced"] {
        scroll-behavior: auto;
      }

      html[data-motion="reduced"] *,
      html[data-motion="reduced"] *::before,
      html[data-motion="reduced"] *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
      }

      html[data-motion="reduced"] .ticker-wrapper {
        animation: none;
        transform: none;
      }

      html[data-motion="reduced"] .deck-card-wrapper,
      html[data-motion="reduced"] .hero-trio-card,
      html[data-motion="reduced"] .hero-card-bubble .bubble-pill,
      html[data-motion="reduced"] .hero-media-control,
      html[data-motion="reduced"] #systemConsoleWidget,
      html[data-motion="reduced"] .footer-social-link,
      html[data-motion="reduced"] .footer-social-glyph {
        transition: none;
        transform: none;
      }
    }

    /* Reduced-motion desktop keeps the case deck as a real horizontal,
       keyboard-scrollable track instead of an overlapping 3D stack. */
    @media (prefers-reduced-motion: reduce) and (min-width: 768px) {
      html[data-motion="reduced"] #works-container {
        height: auto;
      }

      html[data-motion="reduced"] #works-container .works-stage {
        position: relative;
        height: auto;
        min-height: 100vh;
        overflow: visible;
      }

      html[data-motion="reduced"] #works-container .works-layout {
        align-items: flex-start;
        min-height: 100vh;
      }

      html[data-motion="reduced"] #works-container .deck-viewport {
        align-self: stretch;
        height: auto;
        min-height: 100vh;
        overflow-x: auto;
        overflow-y: hidden;
        perspective: none;
        scroll-behavior: auto;
        padding: 10vh 4vw;
      }

      html[data-motion="reduced"] #works-container .deck-track {
        display: flex;
        width: max-content;
        height: auto;
        gap: 24px;
        transform: none;
      }

      html[data-motion="reduced"] #works-container .deck-card-wrapper {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 0;
        --card-w: clamp(280px, 30vw, 420px);
        flex: 0 0 var(--card-w);
        transform: none;
        opacity: 1;
        pointer-events: auto;
      }
    }

    /* 768–1199px 窄桌面：总结字号放大后，给背面内容保留可读的呼吸空间。 */
    @media (min-width: 768px) and (max-width: 1199px) {
      html[data-layout="desktop"] .deck-card-wrapper {
        --card-w: clamp(300px, 30vw, 360px);
      }
    }

    /*
     * 项目卡背面：按 Figma「project-card-back」450 × 675 画板统一还原。
     * 七张卡共用同一版式；--u 为画板 1px 在当前卡宽下的尺寸，
     * 所以任何卡宽都保持同一比例。每张卡只声明配色、插画与涂鸦位置。
     */
    .deck-card-wrapper {
      container-type: inline-size;
    }

    .card-face {
      border-radius: calc(100cqw * 24 / 450);
    }

    .face-back {
      --u: calc(100cqw / 450);
      --cb-bg: var(--case-back-bg, #264b5a);
      --cb-fg: #f5f5f5;
      --cb-rule: #9f9f9f;
      --cb-accent: #ffd166;
      --cb-panel: #f5f5f5;
      --cb-number: var(--cb-bg);
      --cb-label: #000000;
      --cb-button: var(--cb-bg);
      --cb-button-fg: #ffffff;
      --cb-rule1-w: 220;
      --cb-statement-size: 24;
      --cb-n1: 497.2;
      --cb-l1: 539;
      --cb-n2: 580;
      --cb-l2: 629.2;
      --cb-metric-x: 38;
      display: block;
      padding: 0;
      overflow: hidden;
      color: var(--cb-fg);
      background: var(--cb-bg);
      border: 0;
      transform: rotateY(180deg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .back-poster-content {
      position: absolute;
      inset: 0;
    }

    .back-case-head {
      display: contents;
    }

    .back-period,
    .back-kicker,
    .back-period-rule,
    .back-highlights,
    .back-poster-rule,
    .back-statement {
      position: absolute;
      left: calc(var(--u) * 38);
      margin: 0;
    }

    .back-period {
      top: calc(var(--u) * 45.6);
      font-family: 'Faculty Glyphic', 'Space Grotesk', sans-serif;
      font-size: calc(var(--u) * 20);
      font-weight: 400;
      line-height: calc(var(--u) * 26);
      letter-spacing: 0;
      white-space: nowrap;
    }

    .back-period-rule {
      top: calc(var(--u) * 81.2);
      width: calc(var(--u) * var(--cb-rule1-w));
      height: 1px;
      background: var(--cb-rule);
    }

    .back-kicker {
      top: calc(var(--u) * 93.2);
      font-size: calc(var(--u) * 16);
      font-weight: 500;
      line-height: calc(var(--u) * 20);
      letter-spacing: 0;
      white-space: nowrap;
    }

    .back-highlights {
      top: calc(var(--u) * 133.3);
      padding: 0;
      list-style: none;
      font-size: calc(var(--u) * 16);
      font-weight: 500;
      line-height: calc(var(--u) * 27);
      white-space: nowrap;
    }

    .back-highlights li {
      position: relative;
      padding-left: calc(var(--u) * 21.5);
    }

    .back-highlights li::before {
      position: absolute;
      top: 50%;
      left: calc(var(--u) * 7);
      width: calc(var(--u) * 4);
      height: calc(var(--u) * 4);
      border-radius: 50%;
      background: currentColor;
      content: '';
      transform: translateY(-50%);
    }

    .back-poster-rule {
      top: calc(var(--u) * 276.5);
      width: calc(var(--u) * 376.5);
      height: 1px;
      background: var(--cb-rule);
    }

    .back-statement {
      top: calc(var(--u) * 314.1);
      color: var(--cb-accent);
      font-size: calc(var(--u) * var(--cb-statement-size));
      font-weight: 400;
      line-height: calc(var(--u) * 42.2);
      letter-spacing: 0;
      white-space: nowrap;
    }

    .back-statement-line {
      display: block;
    }

    /* 数据面板：左右下各内收 10，顶边与卡片同宽处为直角，底部 16 圆角。 */
    .back-entry-block {
      position: absolute;
      top: calc(var(--u) * 455.7);
      left: calc(var(--u) * 10);
      width: calc(var(--u) * 430);
      height: calc(var(--u) * 210);
    }

    .back-metrics-panel {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      color: var(--cb-label);
      background: var(--cb-panel);
      border-radius: 0 0 calc(var(--u) * 16) calc(var(--u) * 16);
    }

    .back-metrics-grid,
    .back-metric-cell {
      display: contents;
    }

    .metric-number-bold,
    .metric-title-small {
      position: absolute;
      z-index: 1;
      left: calc(var(--u) * (var(--cb-metric-x) - 10));
      margin: 0;
      white-space: nowrap;
    }

    .metric-number-bold {
      color: var(--cb-number);
      font-size: calc(var(--u) * 40);
      font-weight: 500;
      line-height: calc(var(--u) * 40);
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
    }

    .metric-title-small {
      color: var(--cb-label);
      font-size: calc(var(--u) * 16);
      font-weight: 600;
      line-height: calc(var(--u) * 20);
      letter-spacing: 0;
    }

    .back-metric-cell:nth-child(1) .metric-number-bold {
      top: calc(var(--u) * (var(--cb-n1) - 455.7 - 4.6));
    }

    .back-metric-cell:nth-child(1) .metric-title-small {
      top: calc(var(--u) * (var(--cb-l1) - 455.7 - 1.6));
    }

    .back-metric-cell:nth-child(2) .metric-number-bold {
      top: calc(var(--u) * (var(--cb-n2) - 455.7 - 4.6));
    }

    .back-metric-cell:nth-child(2) .metric-title-small {
      top: calc(var(--u) * (var(--cb-l2) - 455.7 - 1.6));
    }

    .metric-number-bold.is-counting {
      opacity: 0.86;
    }

    .back-entry-hint {
      position: absolute;
      z-index: 1;
      top: calc(var(--u) * 146);
      left: calc(var(--u) * 284.4);
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--u) * 120.2);
      height: calc(var(--u) * 42.3);
      margin: 0;
      color: var(--cb-button-fg);
      background: var(--cb-button);
      border-radius: 999px;
      /* 小卡上按钮字至少放大到 10px，但不超过按钮宽度能容纳的 15 单位。 */
      font-size: clamp(calc(var(--u) * 12), 10px, calc(var(--u) * 15));
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
      transition-property: transform, filter, background-color, box-shadow;
      transition-duration: 140ms;
      transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }

    @media (hover: hover) and (pointer: fine) {
      .deck-card-wrapper.is-flipped:hover .back-entry-hint {
        transform: translateY(-2px);
        filter: brightness(0.88);
        box-shadow: 0 7px 16px rgba(17, 23, 22, 0.18);
      }

      .deck-card-wrapper.is-flipped:active .back-entry-hint {
        transform: translateY(0) scale(0.96);
        filter: brightness(0.82);
        box-shadow: 0 3px 8px rgba(17, 23, 22, 0.14);
      }
    }

    .deck-card-wrapper.is-flipped:focus-visible .back-entry-hint {
      outline: 2px solid #f5c94b;
      outline-offset: 3px;
    }

    /* 涂鸦：原型为 25% 黑；深色面板（Thai-SPA）反相为 25% 白。坐标相对数据面板。 */
    .back-texture {
      position: absolute;
      z-index: 0;
      top: calc(var(--u) * var(--cb-scribble-y, 0));
      left: calc(var(--u) * var(--cb-scribble-x, 0));
      width: calc(var(--u) * var(--cb-scribble-w, 120));
      height: auto;
      max-width: none;
      opacity: 0.25;
      pointer-events: none;
      user-select: none;
    }

    /* 插画挂在卡片外层，可越出卡片边框；坐标相对卡片左上角。 */
    .back-art-layer {
      --u: calc(100cqw / 450);
      position: absolute;
      z-index: 4;
      top: calc(var(--u) * var(--cb-art-y, 0));
      left: calc(var(--u) * var(--cb-art-x, 270));
      width: calc(var(--u) * var(--cb-art-w, 180));
      height: auto;
      max-width: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(0, -8px, 0);
      transition: opacity 0.32s var(--ease-out), transform 0.52s var(--ease-out), visibility 0s linear 0.52s;
      user-select: none;
    }

    .deck-card-wrapper.is-flipped.is-flip-settled .back-art-layer {
      opacity: 1;
      visibility: visible;
      transform: translate3d(0, 0, 0);
      transition-delay: 0s;
    }

    /* ---- 每张卡的配色与装饰位置（数值均为 450 画板坐标） ---- */
    .case-card--infinitus {
      --cb-art-x: 266.9; --cb-art-y: -66; --cb-art-w: 247.8;
    }

    .face-back--infinitus {
      --cb-number: #000000;
      --cb-metric-x: 41.7;
      --cb-scribble-x: 11.3; --cb-scribble-y: 10.3; --cb-scribble-w: 129.7;
    }

    .case-card--beautrio {
      --cb-art-x: 258.1; --cb-art-y: -82.3; --cb-art-w: 290.9;
    }

    .face-back--beautrio {
      --cb-accent: #f3c969;
      --cb-number: #bba675;
      --cb-metric-x: 41.2;
      --cb-scribble-x: 108.2; --cb-scribble-y: 33.4; --cb-scribble-w: 158.9;
    }

    .case-card--ajian {
      --cb-art-x: 274; --cb-art-y: -10.5; --cb-art-w: 154.2;
    }

    .face-back--ajian {
      --cb-accent: #90f7cc;
      --cb-metric-x: 41.4;
      --cb-scribble-x: 283.5; --cb-scribble-y: 0.7; --cb-scribble-w: 130;
    }

    .case-card--thaispa {
      --cb-art-x: 214.8; --cb-art-y: -97.8; --cb-art-w: 337.4;
    }

    .case-card--thaispa .back-art-layer {
      rotate: 18deg;
    }

    .face-back--thaispa {
      --cb-fg: #000000;
      --cb-accent: #9b7d42;
      --cb-panel: #353032;
      --cb-number: #bba675;
      --cb-label: #ffffff;
      --cb-button: #bba675;
      --cb-button-fg: #353032;
      --cb-n1: 491;
      --cb-l1: 533.4;
      --cb-n2: 579.2;
      --cb-l2: 624.2;
      --cb-metric-x: 35.2;
      --cb-scribble-x: 199.9; --cb-scribble-y: 86.9; --cb-scribble-w: 117.7;
    }

    .face-back--thaispa .back-texture {
      filter: invert(1);
    }

    .case-card--pet {
      --cb-art-x: 164; --cb-art-y: -168.5; --cb-art-w: 351.5;
    }

    .face-back--pet {
      --cb-accent: #d5ea1e;
      --cb-n2: 586.2;
      --cb-metric-x: 34.6;
      --cb-scribble-x: 285.5; --cb-scribble-y: 44.8; --cb-scribble-w: 130.2;
    }

    .case-card--newub {
      --cb-art-x: 261.7; --cb-art-y: -71.4; --cb-art-w: 236.8;
    }

    .face-back--newub {
      --cb-accent: #f3c969;
      --cb-metric-x: 35.1;
      --cb-scribble-x: 211.6; --cb-scribble-y: 41; --cb-scribble-w: 137.8;
    }

    .case-card--glin {
      --cb-art-x: 294.3; --cb-art-y: -63.7; --cb-art-w: 180.5;
    }

    .face-back--glin {
      --cb-accent: #efb58b;
      --cb-number: #d7b46a;
      --cb-rule1-w: 250;
      --cb-statement-size: 21;
      --cb-n1: 501.6;
      --cb-l1: 540.4;
      --cb-n2: 585.6;
      --cb-l2: 624.8;
      --cb-metric-x: 38.9;
      --cb-scribble-x: 170.6; --cb-scribble-y: 35.2; --cb-scribble-w: 117.8;
    }

    /* 触屏滑轨：翻开的当前卡盖在相邻卡之上，插画越出右边框时不被下一张卡遮住。 */
    html[data-layout="touch"] .deck-card-wrapper.is-flipped.is-active-card {
      z-index: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      .back-entry-hint {
        transition: none;
      }

      .deck-card-wrapper.is-flipped:hover .back-entry-hint,
      .deck-card-wrapper.is-flipped:active .back-entry-hint {
        transform: none;
      }

      .back-art-layer {
        transition: none;
        transform: none;
      }
    }

    /* 触屏布局（手机与 iPad）不启用桌面滚动视差，跑马灯改为自动播放。 */
    html[data-layout="touch"] .ticker-wrapper {
      animation: ticker-marquee-touch 42s linear infinite alternate;
    }

    @media (max-width: 767px) {
      .deck-card-wrapper.case-card--coming-soon {
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html[data-layout="touch"] .ticker-wrapper {
        animation: none;
        transform: none;
      }
    }

    /*
       iOS WebKit 在 rotateY 中间帧会透出正面的镜像（手机与 iPad 同样）。
       翻面时先淡出正面媒体，卡片本身仍完整经过 3D 翻转。
    */
    html[data-layout="touch"] .deck-card-wrapper .face-front .card-media,
    html[data-layout="touch"] .deck-card-wrapper .face-front .face-front-content {
      transition: opacity 100ms var(--ease-out);
    }

    html[data-layout="touch"] .deck-card-wrapper.is-flipped .face-front .card-media,
    html[data-layout="touch"] .deck-card-wrapper.is-flipped .face-front .face-front-content,
    html[data-layout="touch"] .deck-card-wrapper.is-flipped .face-front::after {
      opacity: 0;
    }

    html[data-layout="touch"] .deck-card-wrapper .face-front::after {
      transition: opacity 100ms var(--ease-out);
    }