/* ============================================================
   CEO AI Lab — Lab System（全站設計系統統一層 / v2）
   ------------------------------------------------------------
   這一層是全站唯一的 art direction 事實來源，永遠排在最後載入。

   為什麼需要它：
   在這之前，站上同時活著三套視覺語言——nk.studio 的霓虹綠 Hero、
   editorial pass 的襯線大標、chromatic echo 的琥珀金介面。每一層都
   只顧自己那幾個區塊，結果同一頁往下捲會經過三種主色、兩種標題字、
   四種卡片邊框。這一層把它們收斂成一套。

   設計基準（深海軍藍實驗室）：
     底色  Ink Navy #09101b × Midnight Blue #111829
     主色  Deep Slate #1b2438 × Frost White #e8e8f0
     點綴  Dusty Mauve #887c87 — 僅用於材質差與少量高光
     字型  Space Grotesk（display）× DM Sans（內文）× IBM Plex Mono（標註）
     形狀  直角。圓角只留在 pill 狀的狀態標籤
     質感  噪點 + 掃描線 + 十字準星游標
     動效  Alive but Quiet — 永遠在動，但不搶讀者的注意力

   維護原則：
     - 要改色票、字級、hover 手感，改這裡，不要回頭改前面幾層
     - 前面幾層負責「版面結構」，這一層負責「長相」
   ============================================================ */

/* ============================================================
   00 — Tokens
   ============================================================ */
:root {
  /* ---------- 底色 ---------- */
  --bg-dark:            #09101b;
  --bg-dark-secondary:  #111829;
  --bg-dark-surface:    #1b2438;
  --bg-dark-line:       #29334e;
  --bg-light:           #e8e8f0;
  --bg-light-secondary: #d8dae7;
  --bg-light-surface:   #c8cddc;
  --ink-blue:           #18213a;

  --lab-void:   var(--bg-dark);
  --lab-carbon: var(--bg-dark-secondary);
  --lab-slate:  var(--bg-dark-surface);
  --lab-steel:  var(--bg-dark-line);
  --lab-line:   var(--bg-dark-line);

  /* ---------- 文字 ---------- */
  --lab-white: var(--bg-light);
  --lab-mute:  rgba(216, 218, 231, 0.76);
  --lab-faint: rgba(200, 205, 220, 0.68);

  /* ---------- 品牌高光：金屬珍珠灰 ---------- */
  --neon:        #c8cddc;
  --neon-bright: #e8e8f0;
  --neon-deep:   #29334e;
  --neon-glow:   rgba(200, 205, 220, 0.42);
  --neon-dim:    rgba(200, 205, 220, 0.14);

  /* 色差用的洋紅。只出現在大字的 RGB split 與 Creative 分頻，
     不拿來做背景或按鈕——一旦鋪成面，整站就從單色系變雙色系。 */
  --magenta: #887c87;

  /* ---------- 四色分頻（規格書要求保留的功能色） ----------
     重新校過亮度，讓四支在同一片深底上看起來是同一組，
     而不是四個不同時期加上去的顏色。 */
  --ch-creative:  #887c87;
  --ch-marketing: #6b6d7f;
  --ch-growth:    #545b6e;
  --ch-ai:        #97909d;
  --ch-business:  #adabb9;

  --ch-creative-dim:  rgba(136, 124, 135, 0.16);
  --ch-marketing-dim: rgba(107, 109, 127, 0.16);
  --ch-growth-dim:    rgba(84, 91, 110, 0.18);
  --ch-ai-dim:        rgba(151, 144, 157, 0.16);
  --ch-business-dim:  rgba(173, 171, 185, 0.16);

  /* ---------- 漸層 ----------
     只在真正需要「發光的一道」時使用（footer rule、progress、
     page-rule）。注意：--lab-prism 是 gradient，不能拿來當
     color / border-color，那樣整條宣告會被丟掉。 */
  --lab-prism: linear-gradient(115deg, #303949, #6b6d7f 52%, #adabb9 82%, #f2f0f2);
  --lab-prism-soft: linear-gradient(115deg,
      rgba(48, 57, 73, 0.52), rgba(107, 109, 127, 0.48), rgba(151, 144, 157, 0.42));

  /* ---------- editorial 層沿用的別名 ---------- */
  --editorial-ink:  var(--lab-white);
  --editorial-soft: rgba(173, 171, 185, 0.78);
  --editorial-dim:  rgba(107, 109, 127, 0.72);
  --editorial-line: rgba(173, 171, 185, 0.12);
  --editorial-panel:        rgba(16, 22, 34, 0.7);
  --editorial-panel-strong: rgba(16, 22, 34, 0.9);

  --interface-rule:     rgba(173, 171, 185, 0.12);
  --interface-rule-hot: rgba(173, 171, 185, 0.46);
  --interface-panel:    rgba(16, 22, 34, 0.76);

  /* ---------- 語意 token ---------- */
  --surface:        var(--lab-void);
  --surface-raised: var(--lab-carbon);
  --surface-hover:  var(--lab-slate);
  --surface-active: var(--lab-steel);
  --text-primary:   var(--lab-white);
  --text-secondary: var(--lab-mute);
  --text-tertiary:  var(--lab-faint);
  --rule:           rgba(173, 171, 185, 0.1);
  --rule-strong:    rgba(173, 171, 185, 0.22);
  --accent:         var(--neon);
  --focus-ring:     var(--neon-bright);
  --control-bg:     rgba(16, 22, 34, 0.62);
  --control-line:   rgba(173, 171, 185, 0.2);

  /* ---------- 字型 ----------
     CJK 一律走系統字（PingFang TC / 微軟正黑）：載入 Noto Sans TC
     的完整 CJK 子集要好幾 MB，首屏會被拖垮。Latin 三支各司其職，
     不再有第四套襯線混進來。 */
  --font-display: 'Space Grotesk', 'PingFang TC', 'Microsoft JhengHei', -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'DM Sans', 'Space Grotesk', 'PingFang TC', 'Microsoft JhengHei', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;

  /* ---------- 統一手感 ----------
     卡片抬升與外框發光只定義一次，所有區塊共用同一組值。
     過去每個區塊各寫一套，hover 的距離與速度都不一樣，
     捲過去會覺得「這幾塊不是同一個網站做的」。 */
  --lift: -4px;
  --ring-hover: 0 0 30px rgba(173, 171, 185, 0.12), inset 0 0 40px rgba(84, 91, 110, 0.08);
  --shadow-card: 0 18px 60px rgba(0, 0, 0, 0.45);

  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emph: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 380ms;
  --dur-slow: 900ms;

  /* Hero 之外背景要壓多暗（由 lab-ux.js 依捲動更新） */
  --bg-veil: 1;
}

/* ============================================================
   01 — 基底
   ============================================================ */
html,
body {
  background: var(--lab-void);
}

body {
  color: var(--lab-white);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--neon);
  color: #04110e;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--lab-void); }
::-webkit-scrollbar-thumb { background: rgba(232, 241, 240, 0.14); }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 199, 0.35); }

/* 焦點環全站一致。之前每個元件各自為政，有的沒有，
   鍵盤使用者在人才池與週期表之間會完全跟丟。 */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 1px;
}

.mono { font-family: var(--font-mono); }

/* gradient 不能當 color。把 .prism-text 收成單色 + 微光，
   避免瀏覽器不支援 background-clip 時整段字消失。 */
.prism-text {
  background: var(--lab-prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .prism-text { background: none; color: var(--neon-bright); }
}

/* ============================================================
   02 — 質感覆層：噪點 / 掃描線 / 十字準星
   ------------------------------------------------------------
   三層都是 pointer-events: none 的固定層，不參與版面。
   噪點是整站「不是純數位平面」的來源，只有 5% 不透明度，
   但少了它，深色底會顯得像未上色的 wireframe。
   ============================================================ */
.lab-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: lab-grain-shift 0.9s steps(4) infinite;
}

@keyframes lab-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.5%); }
  50%  { transform: translate(1.5%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* 3px 週期：2px 在 2x 螢幕上會跟像素格打架長出摩爾紋 */
.lab-scanlines {
  position: fixed;
  inset: 0;
  z-index: 91;
  pointer-events: none;
  opacity: 0.3;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(0, 0, 0, 0.12) 3px 4px
  );
}

/* 十字準星：跟隨滑鼠的量測十字，滑到可互動元素上會撐大。
   刻意不設 cursor: none——原生游標仍要在，準星是疊上去的儀器刻度，
   不是游標的替身。少了原生游標，使用者會不確定自己點得到哪裡。 */
.lab-reticle {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  z-index: 95;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width var(--dur-fast) var(--ease-out),
              height var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) linear;
}
.lab-reticle.is-live { opacity: 0.55; }
.lab-reticle::before,
.lab-reticle::after {
  content: "";
  position: absolute;
  background: var(--neon);
}
.lab-reticle::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.lab-reticle::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.lab-reticle.is-hot {
  width: 44px;
  height: 44px;
  opacity: 0.9;
}

@media (hover: none), (pointer: coarse) {
  .lab-reticle { display: none; }
}

/* ============================================================
   03 — 背景：數字雨只留在 Hero
   ------------------------------------------------------------
   之前數字雨從 Hero 一路下到頁尾，人才池的角色卡、週期表的
   34 格全都疊在流動的綠色字元上。文字可讀性掉一截，而且整站
   看起來很吵。現在改成：Hero 是全開的主視覺，捲過第一屏之後
   降到只剩一層底紋，內容區自己有實底。
   ============================================================ */
.nk-bg {
  background: var(--lab-void);
}

#nk-webgl {
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.nk-bg.is-live #nk-webgl {
  /* --bg-veil 由 lab-ux.js 依捲動位置在 1 → 0.08 之間插值 */
  opacity: var(--bg-veil, 1);
}

.nk-bg-scan {
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, 0.14) 3px 4px),
    radial-gradient(ellipse 125% 85% at 50% 42%,
      transparent 26%,
      rgba(5, 7, 10, 0.5) 70%,
      rgba(5, 7, 10, 0.92) 100%);
}
.nk-bg-scan::before,
.nk-bg-scan::after { content: none; }

/* 內容層：Hero 透空，第一屏之後鋪實底 */
main.is-immersive {
  background: linear-gradient(
    180deg,
    transparent 0,
    transparent 82vh,
    rgba(5, 7, 10, 0.86) 104vh,
    var(--lab-void) 130vh,
    var(--lab-void) 100%
  );
}

main:not(.is-immersive) {
  background: var(--lab-void);
}

/* ============================================================
   04 — 排版
   ============================================================ */
h1, h2, h3, h4, h5,
.page-title,
.section-head h2,
.footer-cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--neon);
}

p { line-height: 1.8; }

/* ============================================================
   05 — Section 節奏與標題
   ------------------------------------------------------------
   統一成「編號 — 分隔線 — 標題 — 中文小標」的一條 baseline。
   標題刻意做小（不到 2.4rem）：視覺重量要留給區塊裡的大符號、
   大數字與影像。之前 section 標題 3rem 起跳，每一區都在喊，
   反而沒有一區突出。
   ============================================================ */
.section {
  border-top: 1px solid var(--rule);
  background: transparent;
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

/* 左右兩道進場的垂直刻度線改用主色，並收短一點 */
.section::before,
.section::after {
  background: var(--neon);
  opacity: 0.16;
}
.section[data-inview="true"]::before,
.section[data-inview="true"]::after {
  height: 4rem;
  opacity: 0.6;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.15rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 0;
  border-bottom: 0;
  font-family: var(--font-mono);
}
.section-head::after { content: none; }

.section-head .sec-no {
  display: inline;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--neon);
  opacity: 1;
  order: 0;
}

.section-head h2 {
  order: 2;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  font-weight: 500;
  /* 不套 text-transform: uppercase。區塊標題中英混用（「四大人才池」
     與「Capability」並存），大寫化只對其中一半有效，反而更不整齊；
     而 CJK 撐開字距會散掉，所以字距也收在 0.06em。 */
  letter-spacing: 0.06em;
  color: var(--lab-white);
  max-width: none;
  text-wrap: balance;
}

.section-head .sec-sub {
  order: 3;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lab-faint);
  padding-top: 0;
}

/* 56px 短橫線：夾在編號與標題之間。
   DOM 順序是 sec-no → h2 → sec-sub → sec-line（歷史遺留，
   改 HTML 會動到四個頁面的樣板），所以這裡用 order 重排，
   排出「04 —— 四大人才池  FOUR TALENT POOLS」。 */
.section-head .sec-line {
  display: block;
  flex: 0 0 56px;
  height: 1px;
  width: 56px;
  background: var(--rule-strong);
  align-self: center;
  order: 1;
}

/* 首頁章節不再各自鋪不同的底色與描邊，統一由 --lab-void 承接 */
#works,
#capability,
#talent,
#formula {
  background: transparent;
  border-block-color: var(--rule);
}
#works::before,
#capability::before {
  background: linear-gradient(90deg, transparent 5%, var(--rule-strong) 30%, var(--rule-strong) 70%, transparent 95%);
  opacity: 0.7;
}
#positioning::before,
#works::after,
#talent::before,
#capability::after,
#formula::before { content: none; }

.page-hero {
  border-bottom: 1px solid var(--rule);
}
.page-hero .page-title {
  font-weight: 500;
  letter-spacing: -0.01em;
}
.page-hero .page-rule {
  background: var(--lab-prism);
  width: 56px;
}

/* Hero 標題的行長：ch 是以 Latin 的「0」寬度計算的，
   CJK 字寬約是它的 1.7 倍，沿用英文版的 15ch 會讓中文在
   「可以親手實|驗的實驗室」這種地方硬斷。中文版另外放寬。 */
html[lang^="zh"] .nk-hero-title { max-width: 24ch; }

/* 區塊提示句（「點按・切換」這類）統一成 mono 標註，
   並且貼著標題下緣，不要孤零零浮在中間。 */
.pool-hint,
.periodic-hint,
.formula-intro {
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--lab-faint);
}
.formula-intro {
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--editorial-soft);
  max-width: 52ch;
}

/* 區塊 02 原本把 section-head 藏起來，靠右欄自己的 h2 當標題，
   結果整頁的編號序列變成 04 → 05 → 06，02 與 03 憑空消失。
   改成：標題交還給 section-head，右欄只留 eyebrow 與內文，
   標題不再出現兩次。 */
#positioning .section-head { display: flex; }
.positioning-copy > h2 { display: none; }

/* ============================================================
   06 — 表面與卡片
   ------------------------------------------------------------
   全站只有一種卡片手感：
     靜態  近黑底 + 1px 髮絲線
     hover 抬 4px + 主色外框 + 內側微光
   格線用 1px gap 露出底線（原型的元素表作法），
   比每張卡各畫一圈邊框乾淨得多。
   ============================================================ */
.work-card,
.pool,
.curation-card,
.game-wrap,
.formula-card,
.custom-formula-card,
.section-cta-banner,
.periodic-grid {
  border-color: var(--rule);
  border-radius: 0;
  background-color: var(--lab-carbon);
  /* 滑鼠位置的聚光改成主色，並收窄範圍讓它像是打在玻璃上的反光 */
  background-image: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(0, 229, 199, 0.055), transparent 46%);
  transition: border-color var(--dur-fast) ease,
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

.work-card:hover,
.work-card:focus-within,
.pool:hover,
.curation-card:hover,
.game-wrap:hover,
.formula-card:hover,
.custom-formula-card:hover {
  border-color: rgba(0, 229, 199, 0.42);
  background-color: var(--lab-slate);
  box-shadow: var(--ring-hover), var(--shadow-card);
}

.pool:hover,
.curation-card:hover,
.formula-card:hover {
  transform: translateY(var(--lift));
}

/* 標註文字（FIG. / CH.0x / EXP-00x 這類）全站同一個規格 */
.anno,
.work-kind,
.pool-count,
.periodic-period-no,
.formula-playbook > span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lab-faint);
}

/* ============================================================
   07 — 按鈕與控制項
   ------------------------------------------------------------
   直角、mono、寬字距、backdrop-blur。
   primary 是「反白填色」，其餘一律線框。
   ============================================================ */
.btn,
.nk-cta-pill,
.nk-lang-toggle,
.series-btn,
.formula-bar #fb-cta {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color var(--dur-fast), border-color var(--dur-fast),
              background var(--dur-fast), box-shadow var(--dur-fast),
              transform var(--dur-fast);
}

.btn {
  padding: 13px 26px;
  border: 1px solid var(--control-line);
  background: var(--control-bg);
  color: var(--lab-white);
}
.btn:hover {
  transform: none;
  color: var(--neon);
  border-color: var(--neon);
  background: var(--control-bg);
  box-shadow: 0 0 24px rgba(0, 229, 199, 0.15), inset 0 0 18px rgba(0, 229, 199, 0.05);
}

.btn-primary,
.section-cta-banner .btn-primary,
.footer-cta .btn-primary,
.custom-formula-actions .btn-primary {
  border: 1px solid var(--neon);
  background: transparent;
  color: var(--neon);
  font-weight: 600;
  padding: 13px 28px;
  box-shadow: none;
}
.btn-primary::before,
.section-cta-banner .btn-primary::before,
.footer-cta .btn-primary::before,
.custom-formula-actions .btn-primary::before { content: none; }

.btn-primary:hover,
.section-cta-banner .btn-primary:hover,
.footer-cta .btn-primary:hover,
.custom-formula-actions .btn-primary:hover {
  transform: none;
  filter: none;
  background: var(--neon);
  color: #04110e;
  box-shadow: 0 0 28px rgba(0, 229, 199, 0.28);
}
.btn-primary:disabled { opacity: 0.5; box-shadow: none; }
.btn-primary.is-muted {
  border-color: var(--control-line);
  background: transparent;
  color: var(--lab-mute);
}

.arrow-link { color: var(--lab-mute); }
.arrow-link:hover {
  color: var(--neon);
  border-bottom-color: var(--neon);
}

/* ============================================================
   08 — Header / 側邊 nav
   ============================================================ */
.site-header.nk-side-nav[data-state="pinned"],
.site-header.nk-side-nav.is-pinned {
  background: rgba(5, 7, 10, 0.82);
  border-color: var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nk-sidenav-logo .logo-mark,
.nk-slash,
.nk-hero-eyebrow::before {
  background: var(--neon);
  box-shadow: 0 0 14px var(--neon-glow);
}

.nk-sidenav-list a { color: var(--lab-mute); }
.nk-sidenav-list a:hover,
.nk-sidenav-list a.is-active { color: var(--lab-white); }

.nk-lang-toggle {
  border-color: var(--control-line);
  color: var(--lab-mute);
}
.nk-lang-toggle:hover {
  color: var(--neon);
  border-color: var(--neon);
}

.nk-cta-pill,
.formula-bar #fb-cta {
  border: 1px solid var(--neon);
  background: transparent;
  color: var(--neon);
  box-shadow: none;
}
.nk-cta-pill:hover,
.formula-bar #fb-cta:hover {
  background: var(--neon);
  color: #04110e;
  border-color: var(--neon);
  box-shadow: 0 0 24px rgba(0, 229, 199, 0.28);
}
.nk-cta-pill:hover .nk-cta-arrow,
.formula-bar #fb-cta:hover .nk-cta-arrow { color: #04110e; }

.nk-burger { border-radius: 0; }
.nk-menu-overlay { background: rgba(5, 7, 10, 0.96); }

/* ============================================================
   09 — Hero
   ------------------------------------------------------------
   標題改回無襯線：CJK 明體配數字雨會讀成「復古書封」，
   跟實驗室的量測感是反的。第三行保留主色與 RGB split，
   那是整頁唯一允許出現洋紅的地方。
   ============================================================ */
.nk-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--neon);
  background: none;
}

.nk-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.nk-hero-line { color: var(--lab-white); }

.nk-hero-line.is-accent {
  color: var(--lab-white);
  background: none;
  -webkit-text-fill-color: currentColor;
  /* RGB split：靜態時只有 1.5px，滑過 Hero 才張開。
     一開始就開太大，長句 CJK 會糊掉。 */
  text-shadow: -1.5px 0 rgba(255, 45, 120, 0.42), 1.5px 0 rgba(0, 229, 199, 0.42);
  transition: text-shadow var(--dur-base) var(--ease-out);
}
.nk-hero:hover .nk-hero-line.is-accent {
  text-shadow: -4px 0 rgba(255, 45, 120, 0.5), 4px 0 rgba(0, 229, 199, 0.5);
}

.nk-hero-line.is-accent::after {
  /* Hero 內容是置中版面，底線也要置中，否則會歪在左下角 */
  margin-inline: auto;
  background: var(--neon);
  box-shadow: 0 0 18px var(--neon-glow);
}

.nk-hero-subtitle {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--editorial-soft);
  background: none;
}

.nk-hero-cta {
  border-radius: 0;
  border: 1px solid var(--neon);
  background: rgba(5, 7, 10, 0.45);
  color: var(--neon);
  box-shadow: none;
}
.nk-hero-cta:hover {
  background: var(--neon);
  color: #04110e;
  box-shadow: 0 0 32px rgba(0, 229, 199, 0.3);
}
.nk-hero-cta:hover .nk-hero-cta-text,
.nk-hero-cta:hover .nk-hero-cta-sub { color: #04110e; }
.nk-hero-cta::after { color: inherit; border-color: currentColor; }
.nk-hero-cta-glow { display: none; }

/* 舊的偽元素角標由 .hero-hud 取代（見 src/pages/index.html） */
.nk-hero::after { content: none; }

.nk-hero-veil {
  background:
    linear-gradient(100deg, rgba(5, 7, 10, 0.9) 0%, rgba(5, 7, 10, 0.62) 42%, transparent 78%),
    linear-gradient(180deg, rgba(5, 7, 10, 0.55), transparent 22%, transparent 58%, rgba(5, 7, 10, 0.92));
}

/* ---------- Hero HUD 四角標註 ----------
   原型的四角 HUD 是「這是一台儀器」最省力的訊號。
   這裡只放下面兩角：上面兩角是 header 的地盤。 */
.hero-hud {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--lab-faint);
  pointer-events: none;
}
.hero-hud::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--rule-strong);
  border-style: solid;
}
.hero-hud-bl { left: clamp(1rem, 2vw, 2rem); bottom: 1.15rem; }
.hero-hud-bl::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.hero-hud-br {
  right: clamp(1rem, 2vw, 2rem);
  bottom: 1.15rem;
  align-items: flex-end;
  text-align: right;
}
.hero-hud-br::before { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

.hero-hud .hud-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--neon);
}
.hero-hud .hud-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: hud-blink 1.8s ease-in-out infinite;
}
@keyframes hud-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (max-width: 720px) {
  .hero-hud-br { display: none; }
  .hero-hud-bl .hud-optional { display: none; }
}

/* ============================================================
   10 — 實驗櫥窗 / 人才池
   ============================================================ */
/* Four Lab 協作系統：DOM 只保留名稱，玻璃器皿、藥劑液面、
   氣泡與櫥窗景深由 lab-glass-three.js 即時繪製。 */
.positioning-lab-system {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: clamp(19rem, 31vw, 25rem);
  margin-block: clamp(1.5rem, 3vw, 2.4rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(224, 255, 250, 0.36);
  border-radius: 1.25rem;
  background:
    radial-gradient(95% 70% at 20% 0%, rgba(229, 255, 251, 0.17), transparent 57%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(143, 226, 215, 0.015) 50%, rgba(3, 7, 10, 0.16)),
    rgba(5, 12, 16, 0.18);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(114, 203, 191, 0.16),
    inset 0 -70px 120px rgba(0, 0, 0, 0.12),
    0 28px 80px rgba(0, 0, 0, 0.24);
}
.positioning-lab-system::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 18%, rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0.018) 27%, transparent 37%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 10%, transparent 86%, rgba(180, 255, 242, 0.07));
  mix-blend-mode: screen;
  pointer-events: none;
}
.positioning-lab-system::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 21% 28%, rgba(255, 45, 120, 0.11), transparent 25%),
    radial-gradient(circle at 78% 29%, rgba(255, 180, 84, 0.1), transparent 24%),
    radial-gradient(circle at 22% 77%, rgba(167, 139, 255, 0.1), transparent 25%),
    radial-gradient(circle at 79% 77%, rgba(124, 242, 155, 0.1), transparent 25%);
  pointer-events: none;
}
.lab-glass-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  pointer-events: none;
}
.positioning-lab-system.is-three-ready .lab-glass-canvas { opacity: 1; }
.lab-glass-labels {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  pointer-events: none;
}
.lab-glass-labels span {
  display: flex;
  align-items: flex-end;
  padding: clamp(0.8rem, 2vw, 1.25rem);
  color: rgba(240, 255, 252, 0.92);
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 1.6vw, 1.05rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.92), 0 0 18px color-mix(in srgb, var(--node-ch) 32%, transparent);
}
.lab-glass-labels span:nth-child(-n + 2) { padding-bottom: 0.95rem; }
.lab-glass-labels span:nth-child(n + 3) { padding-top: 0.95rem; }
.positioning-lab-system.is-three-fallback .lab-glass-labels {
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 45, 120, 0.22), transparent 18%),
    radial-gradient(circle at 75% 25%, rgba(255, 180, 84, 0.2), transparent 18%),
    radial-gradient(circle at 25% 75%, rgba(167, 139, 255, 0.2), transparent 18%),
    radial-gradient(circle at 75% 75%, rgba(124, 242, 155, 0.2), transparent 18%);
}

/* 人才池變成單一影像櫥窗：影片鋪滿整個背景，標題、描述與角色
   疊在同一個景深裡，不再是「小圖 + 另一張資訊卡」兩個物件。 */
.pool-grid {
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 0;
}
.pool,
.pool:nth-child(even) {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: clamp(28rem, 50vw, 38rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pool-ch, var(--neon)) 34%, var(--rule));
  border-radius: 1rem;
  background: var(--lab-void);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  transform: none;
}
.pool:hover {
  border-color: color-mix(in srgb, var(--pool-ch, var(--neon)) 70%, white 8%);
  background-color: var(--lab-void);
  box-shadow: 0 30px 82px rgba(0, 0, 0, 0.42), 0 0 42px -24px var(--pool-ch, var(--neon));
  transform: translateY(-3px);
}

.pool-info .pool-name {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 6.8rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--lab-white);
  padding-bottom: 0;
  border-bottom: 0;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.72);
  transition: color var(--dur-base) var(--ease-out),
              text-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.pool:hover .pool-name {
  color: var(--lab-white);
  transform: translateX(4px);
  text-shadow: -2px 0 color-mix(in srgb, var(--pool-ch) 64%, transparent), 2px 0 rgba(0, 229, 199, 0.46), 0 14px 44px rgba(0, 0, 0, 0.78);
}

.pool-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
  border: 0;
  background: var(--lab-carbon);
  box-shadow: none;
  transform: scale(1.015);
  transition: transform 900ms var(--ease-out), filter 600ms ease;
}
.pool:hover .pool-visual {
  border-color: transparent;
  transform: scale(1.045);
}

/* 池的影音版視覺。這幾條原本住在已刪除的 chromatic-echo.css，
   沒有它們 <video> 會失去尺寸與裁切，池子會塌成一條線。 */
.pool-visual-media {
  background: var(--lab-void);
  border-color: var(--rule);
}
.pool-visual-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--lab-void);
  filter: saturate(1.05) contrast(1.08) brightness(0.7);
  transition: filter 700ms ease, transform 1000ms var(--ease-out);
}
.pool:hover .pool-visual-video { filter: saturate(1.18) contrast(1.08) brightness(0.82); }
.pool-visual-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  filter: saturate(1.04) contrast(1.08) brightness(0.82);
  transform: scale(1.015);
  transition: filter 700ms ease, transform 1200ms var(--ease-out);
}
.pool-visual-growth:not(.is-growth-three-ready) .pool-visual-image {
  animation: growth-fallback-drift 14s ease-in-out infinite alternate;
}
.pool:hover .pool-visual-image {
  filter: saturate(1.14) contrast(1.1) brightness(0.86);
  transform: scale(1.055);
}
.growth-network-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  pointer-events: none;
}
.pool-visual-growth.is-growth-three-ready .growth-network-canvas { opacity: 1; }
.pool-visual-growth.is-growth-three-ready .pool-visual-image { opacity: 0; }
@keyframes growth-fallback-drift {
  from { transform: scale(1.025) translate3d(-0.35%, 0.25%, 0); }
  to { transform: scale(1.075) translate3d(0.7%, -0.5%, 0); }
}
/* 影片載入失敗時的池色生成漸層（app.js 會移除 <video> 並加上 .is-fallback） */
.pool-visual-media.is-fallback {
  background:
    radial-gradient(120% 90% at 28% 18%, color-mix(in srgb, var(--pool-ch, var(--neon)) 30%, transparent), transparent 62%),
    radial-gradient(100% 80% at 76% 84%, color-mix(in srgb, var(--pool-ch, var(--neon)) 16%, transparent), transparent 58%),
    var(--lab-void);
}
.pool-visual-media.is-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--pool-ch, var(--neon)) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pool-ch, var(--neon)) 14%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
}

.pool .pool-visual-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(80% 68% at 82% 18%, color-mix(in srgb, var(--pool-ch) 24%, transparent), transparent 70%),
    linear-gradient(120deg, rgba(3, 7, 10, 0.93) 6%, rgba(3, 7, 10, 0.63) 48%, rgba(3, 7, 10, 0.2) 82%);
  pointer-events: none;
}
.pool .pool-visual-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.04) 0%, rgba(5, 8, 12, 0.24) 38%, rgba(5, 8, 12, 0.9) 100%),
    linear-gradient(rgba(220, 255, 250, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 255, 250, 0.035) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  opacity: 1;
  pointer-events: none;
}
.pool-info {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(28rem, 50vw, 38rem);
  padding: clamp(1.4rem, 4vw, 3.5rem);
}
.role-preview {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 68rem);
  margin: clamp(1.25rem, 2vw, 1.8rem) 0 0;
  padding: 1px;
  gap: 1px;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--pool-ch) 30%, rgba(220, 255, 250, 0.17));
  background: color-mix(in srgb, var(--pool-ch) 14%, rgba(220, 255, 250, 0.09));
  -webkit-backdrop-filter: blur(18px) saturate(128%);
  backdrop-filter: blur(18px) saturate(128%);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.3);
}
.role-preview li {
  display: grid;
  align-content: center;
  gap: 0.3rem;
  min-width: 0;
  min-height: 4.4rem;
  padding: 0.75rem 1rem;
  background: rgba(3, 8, 12, 0.66);
  transition: background 220ms ease, box-shadow 220ms ease;
}
.role-preview li:hover {
  background: color-mix(in srgb, var(--pool-ch) 11%, rgba(3, 8, 12, 0.8));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--pool-ch) 74%, white 8%);
}
.role-preview li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.role-preview span {
  overflow: hidden;
  color: rgba(244, 252, 251, 0.96);
  font-size: clamp(0.85rem, 1.35vw, 1rem);
  font-weight: 620;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78);
}
.role-preview small {
  color: color-mix(in srgb, var(--pool-ch) 62%, rgba(232, 241, 240, 0.7));
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1vw, 0.73rem);
  line-height: 1.35;
  letter-spacing: 0.035em;
}

@media (max-width: 720px) {
  .positioning-lab-system { min-height: 25rem; }
  .lab-glass-labels span { padding: 0.9rem; font-size: 0.84rem; }

  .pool,
  .pool:nth-child(even),
  .pool-info { min-height: 31rem; }
  .pool-info { padding: 1.25rem; }
  .pool-info .pool-name { font-size: clamp(2.7rem, 14vw, 4.5rem); }
  .role-preview { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
  .role-preview li { min-height: 3.8rem; padding: 0.65rem 0.75rem; }
  .role-preview span { font-size: 0.82rem; }
  .role-preview small { font-size: 0.62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pool-visual-growth .pool-visual-image { animation: none; }
}

/* ============================================================
   11 — 能力週期表
   ============================================================ */
.periodic-grid {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
}
.periodic-scroll { border-block-color: var(--rule); }

.element-cell {
  border-radius: 0;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--el-ch) 14%, transparent), transparent 60%),
    var(--lab-carbon);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.element-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--el-ch) 55%, transparent),
              0 0 22px color-mix(in srgb, var(--el-ch) 26%, transparent);
}
.element-cell .el-symbol {
  font-family: var(--font-display);
  font-weight: 700;
}

.periodic-callout { --cal-dim: var(--neon-dim); }
.periodic-callout .p-callout-sample { border-radius: 0; }
.p-selected-state { border-radius: 999px; }

/* ============================================================
   12 — 公式 / 配方
   ============================================================ */
.custom-formula-card,
.formula-card {
  border-radius: 0;
  border-color: var(--rule);
  background-color: var(--lab-carbon);
}
.custom-formula-card.has-selection {
  border-color: rgba(0, 229, 199, 0.42);
  box-shadow: inset 3px 0 0 var(--neon);
}
.custom-formula-eyebrow { color: var(--neon); }
.custom-formula-diagram,
.formula-figure {
  border-radius: 0;
  background: var(--lab-void);
  border-color: var(--rule);
}
.formula-score {
  border-radius: 0;
  border-color: var(--rule);
  background: rgba(232, 241, 240, 0.035);
}
.formula-score::after { background: var(--lab-void); }
.formula-score span { color: var(--neon); }
.custom-molecule-svg .formula-axis-label { fill: var(--neon); }

/* 公式清單的 hover：往右推一格，是原型的 formula-list 手感 */
.formula-playbook li,
.formula-equation span {
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
.formula-playbook li:hover {
  color: var(--neon);
  padding-left: 0.75rem;
}

/* ============================================================
   13 — Works
   ============================================================ */
.work-card {
  border: 0;
  border-radius: 0;
  background: var(--lab-void);
  box-shadow: 0 0 0 1px var(--rule);
}
#works .work-card:hover,
#works .work-card:focus-visible {
  box-shadow: 0 0 0 1px rgba(0, 229, 199, 0.4), var(--shadow-card);
}
.work-kind,
.work-play { border-radius: 0; background: rgba(5, 7, 10, 0.78); }
.work-meta h3 { font-family: var(--font-display); font-weight: 500; }

.series-btn {
  border-radius: 0;
  color: var(--lab-mute);
  border: 1px solid transparent;
}
.series-btn:hover { color: var(--neon); border-color: var(--neon); }
.series-btn.is-active {
  background: var(--neon);
  color: #04110e;
  border-color: var(--neon);
}

.curation-card {
  border-radius: 0;
  border-color: var(--rule);
  background-color: var(--lab-carbon);
}
.curation-card-title { font-family: var(--font-display); font-weight: 500; }

/* ============================================================
   14 — CTA banner / Footer
   ============================================================ */
.section-cta-banner {
  border-radius: 0;
  border-color: var(--rule);
  background-color: var(--lab-carbon);
}
.section-cta-banner::before { background: var(--neon); }
.cta-banner-content h3 { font-family: var(--font-display); font-weight: 500; }

.footer-cta::before {
  background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(0, 229, 199, 0.06) 0%, transparent 70%);
}
.footer-cta h2 { font-weight: 500; letter-spacing: -0.01em; }
.footer-rule { background: var(--lab-prism); opacity: 0.4; }

.site-footer {
  background: var(--lab-void);
  border-top: 1px solid var(--rule);
}
.footer-links a:hover,
.footer-mail:hover { color: var(--neon); border-bottom-color: var(--neon); }
.footer-bottom { border-top-color: var(--rule); }

.formula-bar {
  background: rgba(5, 7, 10, 0.9);
  border-color: var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.toast {
  border-radius: 0;
  background: var(--lab-slate);
  border-color: var(--rule-strong);
}

/* ============================================================
   15 — 捲動指示器 / 內容顯示
   ============================================================ */
.nk-scroll-circle #nk-scroll-progress { stroke: var(--neon); }
.nk-scroll-pct { color: var(--neon); }

/* 進場統一成「上浮 + 淡入」。原本額外的 blur(6px) 在長頁面上
   每一塊都要重繪一次高斯模糊，中階筆電捲起來會掉幀，
   而且視覺上跟主色的發光互相打架。 */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ============================================================
   16 — 沿用：Director 人像版面
   ------------------------------------------------------------
   （來自前一版 art direction，純版面修正，與色票無關，
     所以整段留著。）
   ============================================================ */
.director-specimen {
  grid-template-columns: minmax(360px, 0.94fr) minmax(0, 1.28fr);
  gap: clamp(2.25rem, 6vw, 6.5rem);
}
.director-specimen .director-photo {
  min-height: clamp(470px, 45vw, 650px);
  aspect-ratio: 4 / 5;
}
.director-specimen .director-photo img {
  inset: 0;
  width: 100%;
  height: 125%;
  object-fit: contain;
  object-position: center top;
}
.director-specimen .director-meta { min-width: 0; }
.director-specimen .director-meta h2 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 4.6vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .director-specimen {
    grid-template-columns: minmax(250px, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(1.25rem, 3vw, 2rem);
  }
  .director-specimen .director-photo { min-height: 0; max-height: 520px; }
  .director-specimen .director-meta h2 {
    max-width: 14ch;
    font-size: clamp(2.3rem, 5.6vw, 3.9rem);
  }
}

@media (max-width: 720px) {
  .director-specimen { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .director-specimen .director-photo {
    width: min(100%, 420px);
    max-height: none;
    margin-inline: auto;
  }
  .director-specimen .director-meta h2 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 11vw, 4rem);
  }
}

/* ============================================================
   17 — 行動版
   ============================================================ */
@media (max-width: 720px) {
  /* 前面幾層在這個斷點把 hero 標題鎖在 3rem、區塊標題放大到 2.45rem，
     兩者都是舊版面的設定，會把新的節奏推翻，所以在這裡重新宣告。 */
  .nk-hero-title { max-width: 100%; }
  html[lang^="zh"] .nk-hero-title {
    /* 品牌主標題是短行的拉丁品牌名＋「AI 實驗室」，
       3rem 會讓兩行都顯得侷促，略收字級保持置中節奏。 */
    font-size: clamp(2rem, 8.4vw, 2.6rem);
    max-width: 100%;
  }

  .section-head {
    gap: 0.35rem 0.85rem;
    margin-bottom: 2.25rem;
  }
  .section-head h2 { font-size: 1.35rem; }
  .section-head .sec-line { display: none; }

  .btn,
  .btn-primary { padding: 12px 20px; font-size: 0.72rem; }
  .nk-hero-cta-text { white-space: nowrap; }
}

/* ============================================================
   18 — 減少動態偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lab-grain,
  .hero-hud .hud-dot { animation: none; }
  .lab-reticle { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .nk-hero-line.is-accent { text-shadow: none; }
}

/* ============================================================
   19 — Liquid Glass CTA
   ------------------------------------------------------------
   參考 Spline Liquid Glass：半透明膠囊、獨立圓形光學元件、
   游標跟隨高光與輕微 3D 傾斜。文字保持常駐，兼顧可辨識性。
   ============================================================ */
.btn-primary,
.section-cta-banner .btn-primary,
.footer-cta .btn-primary,
.custom-formula-actions .btn-primary {
  --glass-x: 50%;
  --glass-y: 18%;
  --glass-rx: 0deg;
  --glass-ry: 0deg;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 15.5rem;
  min-height: 3.7rem;
  padding: 0.95rem 1.55rem 0.95rem 4.75rem;
  overflow: hidden;
  border: 1px solid rgba(232, 255, 251, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035) 42%, rgba(0, 229, 199, 0.045)),
    rgba(10, 20, 22, 0.34);
  color: rgba(241, 255, 252, 0.96);
  -webkit-backdrop-filter: blur(22px) saturate(175%) brightness(1.08);
  backdrop-filter: blur(22px) saturate(175%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 -1px 0 rgba(0, 229, 199, 0.16),
    inset 12px 0 30px rgba(255, 255, 255, 0.035),
    0 16px 34px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 229, 199, 0.06);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.72);
  transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry));
  transform-origin: center;
  transition:
    transform 360ms cubic-bezier(.2,.8,.2,1),
    border-color 320ms ease,
    background 320ms ease,
    box-shadow 420ms ease,
    color 260ms ease;
}

.btn-primary::before,
.section-cta-banner .btn-primary::before,
.footer-cta .btn-primary::before,
.custom-formula-actions .btn-primary::before {
  content: "↗";
  position: absolute;
  z-index: 2;
  left: 0.38rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.95rem;
  height: 2.95rem;
  border: 1px solid rgba(244, 255, 253, 0.46);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 23%, rgba(255, 255, 255, 0.72), transparent 18%),
    radial-gradient(circle at 65% 72%, rgba(0, 229, 199, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.025));
  color: rgba(239, 255, 252, 0.96);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  -webkit-backdrop-filter: blur(15px) saturate(190%);
  backdrop-filter: blur(15px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -8px 18px rgba(0, 229, 199, 0.08),
    0 7px 18px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(127, 251, 230, 0.08);
  transform: translateY(-50%);
  transition: transform 520ms cubic-bezier(.18,.9,.25,1.35), border-color 300ms ease, box-shadow 400ms ease;
}

.btn-primary::after,
.section-cta-banner .btn-primary::after,
.footer-cta .btn-primary::after,
.custom-formula-actions .btn-primary::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(108deg, transparent 12%, rgba(255, 255, 255, 0.1) 35%, transparent 54%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.btn-primary:hover,
.section-cta-banner .btn-primary:hover,
.footer-cta .btn-primary:hover,
.custom-formula-actions .btn-primary:hover {
  border-color: rgba(224, 255, 250, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.055) 46%, rgba(0, 229, 199, 0.08)),
    rgba(12, 28, 29, 0.42);
  color: #f1fffc;
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    inset 0 -1px 0 rgba(127, 251, 230, 0.25),
    inset 18px 0 38px rgba(255, 255, 255, 0.045),
    0 22px 44px rgba(0, 0, 0, 0.36),
    0 0 30px rgba(0, 229, 199, 0.12);
  transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(-2px) scale(1.018);
}
.btn-primary:hover::before,
.section-cta-banner .btn-primary:hover::before,
.footer-cta .btn-primary:hover::before,
.custom-formula-actions .btn-primary:hover::before {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -10px 20px rgba(0, 229, 199, 0.13),
    0 9px 22px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(127, 251, 230, 0.18);
  transform: translateY(-50%) rotate(45deg) scale(1.07);
}
.btn-primary.is-glass-pressed,
.btn-primary:active {
  transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(1px) scale(0.985);
}
.btn-primary.is-muted { color: rgba(232, 241, 240, 0.72); }

.nk-hero .nk-hero-cta {
  --glass-x: 50%;
  --glass-y: 18%;
  --glass-rx: 0deg;
  --glass-ry: 0deg;
  position: relative;
  isolation: isolate;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.8rem 4.6rem 0.8rem 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(232, 255, 251, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03) 48%, rgba(0, 229, 199, 0.04)),
    rgba(7, 18, 20, 0.3);
  color: rgba(242, 255, 252, 0.98);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.08);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 229, 199, 0.16),
    0 20px 46px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(0, 229, 199, 0.07);
  transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry));
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), border-color 320ms ease, background 320ms ease, box-shadow 420ms ease;
}
.nk-hero-cta::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.3), transparent 25%),
    linear-gradient(110deg, transparent 14%, rgba(255, 255, 255, 0.1) 36%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.nk-hero-cta::after {
  content: "↗";
  position: absolute;
  z-index: 3;
  right: 0.38rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  margin: 0;
  border: 1px solid rgba(244, 255, 253, 0.5);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 23%, rgba(255, 255, 255, 0.74), transparent 18%),
    radial-gradient(circle at 65% 72%, rgba(0, 229, 199, 0.2), transparent 48%),
    rgba(255, 255, 255, 0.07);
  color: rgba(239, 255, 252, 0.98);
  -webkit-backdrop-filter: blur(15px) saturate(190%);
  backdrop-filter: blur(15px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 20px rgba(0, 0, 0, 0.34);
  transform: translateY(-50%);
  transition: transform 520ms cubic-bezier(.18,.9,.25,1.35), box-shadow 400ms ease;
}
.nk-hero .nk-hero-cta:hover {
  border-color: rgba(232, 255, 251, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 48%, rgba(0, 229, 199, 0.08)),
    rgba(8, 24, 24, 0.38);
  color: #f1fffc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 24px 52px rgba(0, 0, 0, 0.4), 0 0 34px rgba(0, 229, 199, 0.12);
  transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(-2px) scale(1.018);
}
.nk-hero-cta:hover::after { transform: translateY(-50%) rotate(45deg) scale(1.07); background: rgba(255, 255, 255, 0.11); }
.nk-hero-cta:hover .nk-hero-cta-text,
.nk-hero-cta:hover .nk-hero-cta-sub { color: inherit; }
.nk-hero-cta.is-glass-pressed,
.nk-hero-cta:active { transform: perspective(700px) translateY(1px) scale(0.985); }
.nk-hero-cta-glow { display: none; }

@media (max-width: 720px) {
  .btn-primary,
  .section-cta-banner .btn-primary,
  .footer-cta .btn-primary,
  .custom-formula-actions .btn-primary {
    min-width: 0;
    min-height: 3.45rem;
    padding: 0.82rem 1.15rem 0.82rem 4.15rem;
    font-size: 0.69rem;
    letter-spacing: 0.09em;
  }
  .btn-primary::before,
  .section-cta-banner .btn-primary::before,
  .footer-cta .btn-primary::before,
  .custom-formula-actions .btn-primary::before {
    width: 2.7rem;
    height: 2.7rem;
  }
  .nk-hero .nk-hero-cta { padding: 0.72rem 4rem 0.72rem 1.25rem; }
  .nk-hero-cta::after { width: 2.85rem; height: 2.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .nk-hero-cta,
  .btn-primary::before,
  .nk-hero-cta::after { transition-duration: 0.01ms; transform: none; }
}

/* ============================================================
   20 — UI polish / no entrance transitions
   ============================================================ */
/* 內容應直接出現；只保留元件本身有意義的循環動畫與 hover 回饋。 */
.reveal,
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  transition-delay: 0ms;
}

/* Compact optical control: a thin glass edge and a small action lens replace
   the oversized bubble control. */
.btn-primary,
.section-cta-banner .btn-primary,
.footer-cta .btn-primary,
.custom-formula-actions .btn-primary {
  min-width: 0;
  min-height: 3.05rem;
  width: fit-content;
  padding: 0.78rem 3.45rem 0.78rem 1.2rem;
  border-color: rgba(204, 255, 247, 0.34);
  border-radius: 0.8rem;
  background:
    radial-gradient(150% 170% at var(--glass-x) var(--glass-y), rgba(255,255,255,.13), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(7, 16, 19, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 10px 28px rgba(0,0,0,.22);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-shadow: none;
}
.btn-primary::before,
.section-cta-banner .btn-primary::before,
.footer-cta .btn-primary::before,
.custom-formula-actions .btn-primary::before {
  content: "↗";
  left: auto;
  right: 0.42rem;
  width: 2.15rem;
  height: 2.15rem;
  border-color: rgba(213,255,248,.34);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(0,229,199,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.32), 0 0 18px rgba(0,229,199,.08);
  font-size: .8rem;
}
.btn-primary::after,
.section-cta-banner .btn-primary::after,
.footer-cta .btn-primary::after,
.custom-formula-actions .btn-primary::after {
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.08) 45%, transparent 62%);
  opacity: .7;
}
.btn-primary:hover,
.section-cta-banner .btn-primary:hover,
.footer-cta .btn-primary:hover,
.custom-formula-actions .btn-primary:hover {
  border-color: rgba(0,229,199,.68);
  background: linear-gradient(180deg, rgba(0,229,199,.13), rgba(0,229,199,.045)), rgba(7,18,20,.82);
  box-shadow: inset 0 1px rgba(255,255,255,.26), 0 12px 30px rgba(0,0,0,.28), 0 0 24px rgba(0,229,199,.09);
  transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(-1px);
}
.btn-primary:hover::before,
.section-cta-banner .btn-primary:hover::before,
.footer-cta .btn-primary:hover::before,
.custom-formula-actions .btn-primary:hover::before {
  transform: translateY(-50%) rotate(45deg);
}

.nk-hero .nk-hero-cta {
  gap: .65rem;
  min-height: 3.35rem;
  padding: .72rem 3.65rem .72rem 1.15rem;
  border-radius: .9rem;
  border-color: rgba(204,255,247,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.018)), rgba(7,16,19,.68);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 12px 30px rgba(0,0,0,.26);
}
.nk-hero-cta::after {
  right: .45rem;
  width: 2.35rem;
  height: 2.35rem;
  border-color: rgba(213,255,248,.34);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(0,229,199,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.32), 0 0 18px rgba(0,229,199,.08);
  font-size: .82rem;
}
.nk-hero-cta-text { font-size: .78rem; letter-spacing: .08em; }
.nk-hero-cta-sub { font-size: .72rem; letter-spacing: .02em; color: rgba(232,241,240,.5); }
.nk-hero .nk-hero-cta:hover {
  border-color: rgba(0,229,199,.68);
  background: linear-gradient(180deg, rgba(0,229,199,.13), rgba(0,229,199,.045)), rgba(7,18,20,.82);
  box-shadow: inset 0 1px rgba(255,255,255,.26), 0 14px 34px rgba(0,0,0,.3), 0 0 24px rgba(0,229,199,.09);
  transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(-1px);
}

/* CTA banners use a clear copy column and a compact action column. */
.section-cta-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  border: 1px solid rgba(232,241,240,.13);
  border-radius: 1rem;
  background:
    radial-gradient(70% 130% at 0 50%, rgba(0,229,199,.08), transparent 70%),
    linear-gradient(110deg, rgba(255,255,255,.035), transparent 55%),
    rgba(7,11,15,.78);
  overflow: hidden;
}
.section-cta-banner::before {
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 2px;
  height: auto;
  background: linear-gradient(180deg, transparent, var(--neon), transparent);
}
.cta-banner-content { max-width: 43rem; }
.cta-banner-content h3 {
  margin: 0 0 .6rem;
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.cta-banner-content p { max-width: 56ch; font-size: .95rem; line-height: 1.7; }
.footer-cta-actions { justify-content: center; }
.footer-cta .btn-primary { min-width: 0; }

/* The first periodic column must clear the fixed side navigation. */
.periodic-scroll {
  box-sizing: border-box;
  padding-left: clamp(3.5rem, 6vw, 5rem);
  scroll-padding-left: clamp(3.5rem, 6vw, 5rem);
}
.periodic-grid { min-width: calc(1080px + 5rem); }
.periodic-period-no {
  position: relative;
  left: auto;
  z-index: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Formula is a live result of the periodic table, not a separate reading section. */
.capability-formula-live {
  max-height: 0;
  margin: 0;
  overflow: clip;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition:
    max-height .7s cubic-bezier(.16, 1, .3, 1),
    margin .45s ease,
    opacity .3s ease,
    transform .55s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .7s;
}
.capability-formula-live.is-live {
  max-height: 90rem;
  margin-top: clamp(1rem, 2.5vw, 2rem);
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.capability-formula-live .custom-formula-card {
  margin: 0;
  border-color: rgba(173, 171, 185, .24);
  background:
    linear-gradient(135deg, rgba(48, 57, 73, .3), rgba(16, 22, 34, .72) 48%, rgba(2, 2, 3, .96));
}

.formula-equation-names {
  max-width: 52ch;
  margin: .85rem 0 0;
  color: rgba(232,241,240,.68);
  font-size: clamp(.82rem, 1.1vw, .96rem);
  line-height: 1.65;
}
.formula-bar #fb-cta {
  min-height: 2.65rem;
  padding: .65rem 1rem;
  border-radius: .65rem;
  background: rgba(0,229,199,.08);
  color: var(--neon);
  letter-spacing: .08em;
}

/* A darker, more dimensional specimen cabinet for the Three.js lab models. */
.positioning-lab-system {
  min-height: clamp(22rem, 35vw, 29rem);
  border-color: rgba(214,255,248,.28);
  border-radius: 1rem;
  background:
    radial-gradient(110% 80% at 50% -10%, rgba(219,255,249,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 20%, rgba(0,0,0,.18)),
    rgba(3,8,12,.5);
  box-shadow: inset 0 1px rgba(255,255,255,.22), inset 0 -80px 120px rgba(0,0,0,.2), 0 28px 70px rgba(0,0,0,.26);
}
.lab-glass-labels { padding: .55rem; gap: .55rem; }
.lab-glass-labels span {
  align-items: flex-end;
  width: fit-content;
  align-self: end;
  margin: .7rem;
  padding: .42rem .65rem;
  border: 1px solid color-mix(in srgb, var(--node-ch) 32%, rgba(255,255,255,.12));
  border-radius: .45rem;
  background: rgba(3,8,12,.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: clamp(.68rem, 1.2vw, .82rem);
  letter-spacing: .04em;
}

/* About narrative: readable editorial measure instead of billboard copy. */
.about-narrative .lede {
  grid-column: 2 / 10;
  max-width: 31ch;
  font-size: clamp(1.55rem, 2.5vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: -.025em;
}

/* One animated output per specimen: the generated source is refracted inside
   this canvas instead of being stacked with the retired model layer. */
.lab-specimen-motion {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .9;
  filter: saturate(.9) contrast(1.08) brightness(.82);
  transition: filter .5s ease, opacity .5s ease;
}
.lab-specimen:hover .lab-specimen-motion {
  opacity: 1;
  filter: saturate(1.05) contrast(1.1) brightness(.93);
}

/* Keep the specimen grid geometrically stable. Interaction is expressed by
   light and focus only, so hovering never moves the second or fourth card. */
.about-lab-specimens {
  grid-auto-rows: auto;
}
.lab-specimen,
.lab-specimen:nth-child(even),
.lab-specimen:hover,
.lab-specimen:nth-child(even):hover {
  transform: none;
}
.lab-specimen-visual {
  contain: layout paint;
}

/* The group map reads as one illuminated system, with a continuous flow rail. */
.about-ecosystem-section .group-map {
  position: relative;
  gap: .8rem;
  padding: clamp(1.25rem, 3vw, 2.4rem);
  border: 1px solid rgba(232,241,240,.12);
  border-radius: 1rem;
  background:
    linear-gradient(90deg, rgba(0,229,199,.035) 1px, transparent 1px),
    linear-gradient(rgba(0,229,199,.03) 1px, transparent 1px),
    radial-gradient(80% 80% at 35% 50%, rgba(0,229,199,.06), transparent 70%),
    rgba(5,9,13,.72);
  background-size: 32px 32px, 32px 32px, auto, auto;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.25);
}
.about-ecosystem-section .group-map::before {
  content: "";
  position: absolute;
  left: clamp(4.8rem, 9vw, 7.8rem);
  top: 3.5rem;
  bottom: 3.5rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0,229,199,.75) 14% 86%, transparent);
  box-shadow: 0 0 14px rgba(0,229,199,.32);
}
.about-ecosystem-section .gm-tier { position: relative; gap: 1rem; }
.about-ecosystem-section .gm-key { z-index: 1; }
.about-ecosystem-section .gm-key::after {
  display: block;
  left: auto;
  right: -.55rem;
  width: 1.1rem;
  background: rgba(0,229,199,.55);
}
.about-ecosystem-section .gm-node {
  min-height: 6.8rem;
  border: 1px solid rgba(232,241,240,.1);
  border-radius: .65rem;
  background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 65%), rgba(7,12,17,.76);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.about-ecosystem-section .gm-node > i {
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  height: auto;
  background: var(--node-ch);
  box-shadow: 0 0 14px var(--node-ch);
}
.about-ecosystem-section .gm-node.is-self {
  background: linear-gradient(135deg, rgba(0,229,199,.13), rgba(0,229,199,.025) 58%), rgba(7,14,17,.86);
  box-shadow: inset 0 0 0 1px rgba(0,229,199,.25), 0 0 30px rgba(0,229,199,.06);
}

@media (max-width: 720px) {
  .section-cta-banner { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.35rem; }
  .section-cta-banner .btn-primary { width: 100%; justify-content: flex-start; }
  .about-narrative .lede { max-width: 28ch; font-size: clamp(1.45rem, 6.8vw, 2.15rem); line-height: 1.38; }
  .periodic-scroll { padding-left: 3.5rem; scroll-padding-left: 3.5rem; }
  .periodic-grid { min-width: calc(1080px + 3.5rem); }
  .periodic-callout.is-detached { display: none; }
  .capability-formula-live.is-live { margin-top: .85rem; }
  .capability-formula-live .custom-formula-content { display: flex; flex-direction: column; gap: 1rem; }
  .capability-formula-live .formula-output { order: -1; }
  .capability-formula-live .custom-formula-diagram { min-height: 15rem; }
  .lab-glass-labels span { margin: .35rem; padding: .35rem .5rem; }
  .about-ecosystem-section .group-map { padding: 1rem; }
  .about-ecosystem-section .group-map::before { display: none; }
}

/* ============================================================
   21 — About hero / original particle-built humanoid
   ============================================================ */
html { overflow-x: hidden; }
.about-lab-hero {
  --particle-scrub: .16;
  min-height: clamp(680px, 88svh, 940px);
  display: block;
  isolation: isolate;
  background:
    radial-gradient(55% 75% at 78% 54%, rgba(27,73,154,.18), transparent 72%),
    radial-gradient(40% 52% at 60% 70%, rgba(0,229,199,.075), transparent 76%),
    #05070a;
}
.about-hero-grid {
  z-index: 1;
  opacity: .14;
  -webkit-mask-image: linear-gradient(90deg, #000 0 44%, rgba(0,0,0,.3) 64%, transparent 82%);
  mask-image: linear-gradient(90deg, #000 0 44%, rgba(0,0,0,.3) 64%, transparent 82%);
}
.about-robot-stage {
  position: absolute;
  z-index: 1;
  top: 5%;
  right: -2%;
  width: min(76vw, 1120px);
  height: 94%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.22) 12%, #000 31% 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.22) 12%, #000 31% 88%, transparent 100%);
}
#about-robot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(1.02) contrast(1.14) brightness(1.18);
}
.about-robot-aura {
  position: absolute;
  inset: 8% 2% 2% 22%;
  border: 1px solid rgba(99,155,255,.08);
  background: linear-gradient(115deg, transparent 42%, rgba(100,147,255,.035) 55%, transparent 68%);
  transform: perspective(900px) rotateY(-10deg);
  box-shadow: inset 0 0 80px rgba(32,107,221,.035);
}
.about-hero-inner {
  z-index: 2;
  min-height: clamp(680px, 88svh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(7rem, 13vh, 10rem);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}
.about-lab-hero .page-title {
  width: min(35rem, 44vw);
  font-size: clamp(3.1rem, 5vw, 6.1rem);
  line-height: .9;
  text-shadow: 0 3px 35px rgba(0,0,0,.76);
}
.about-hero-manifesto {
  width: min(31rem, 37vw);
  color: rgba(232,241,240,.72);
  text-shadow: 0 2px 18px rgba(0,0,0,.78);
}
.about-hero-interaction {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: clamp(2.2rem, 5vh, 4rem) 0 0;
  color: rgba(232,241,240,.42);
  font-size: .6rem;
  letter-spacing: .16em;
}
.about-hero-interaction span {
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, var(--neon), transparent);
}
.about-hero-interaction i {
  position: relative;
  display: block;
  width: 5.4rem;
  height: 2px;
  margin-left: .4rem;
  overflow: hidden;
  background: rgba(232,241,240,.12);
}
.about-hero-interaction i b {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--particle-scrub) * 100%);
  background: linear-gradient(90deg, #4d8cff, var(--neon));
  box-shadow: 0 0 10px rgba(0,229,199,.55);
}

@media (max-width: 1023px) {
  .about-lab-hero {
    min-height: 760px !important;
  }
  .about-hero-inner {
    min-height: 760px;
    justify-content: flex-start;
    padding: 7.2rem 1.5rem 4rem;
  }
  .about-robot-stage {
    top: 27%;
    right: -26%;
    width: 130%;
    height: 72%;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16% 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16% 88%, transparent 100%);
  }
  .about-lab-hero .page-title,
  .about-hero-manifesto { width: min(100%, 34rem); }
  .about-lab-hero .page-title { font-size: clamp(3.1rem, 10vw, 5rem); }
  .about-hero-interaction { display: none; }
}

@media (max-width: 560px) {
  .about-lab-hero { min-height: 760px !important; }
  .about-hero-inner { min-height: 760px; padding: 6.6rem 1.25rem 3.2rem; }
  .about-robot-stage { top: 31%; right: -51%; width: 165%; height: 66%; }
  .about-lab-hero .page-title { font-size: clamp(2.4rem, 11vw, 3rem); line-height: .94; }
  .about-hero-manifesto { font-size: .96rem; line-height: 1.72; }
}

/* ============================================================
   HOME HERO — cinematic studio landing
   ============================================================ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

html[data-page="home"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-page="home"] .nk-scroll-indicator,
html[data-page="home"] .nk-bg,
html[data-page="home"] .lab-grain,
html[data-page="home"] .lab-scanlines,
html[data-page="home"] .lab-reticle {
  display: none !important;
}
body.studio-menu-lock { overflow: hidden; }

.studio-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Geist", "DM Sans", sans-serif;
  isolation: isolate;
}
.studio-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
.studio-hero-shade {
  display: none;
}

.studio-nav {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
}
.studio-nav-left,
.studio-nav-actions,
.studio-nav-links {
  display: flex;
  align-items: center;
}
.studio-nav-left { gap: clamp(2.5rem, 5vw, 5.5rem); }
.studio-nav-actions { gap: 1.25rem; }
.studio-nav-links { gap: clamp(1.4rem, 2.5vw, 2.6rem); }
.studio-wordmark {
  color: #fff;
  font-size: clamp(1.1rem, 1.65vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.studio-nav-links a,
.studio-lang {
  color: rgba(255,255,255,.8);
  font-size: .875rem;
  transition: color .25s ease, opacity .25s ease;
}
.studio-nav-links a:hover,
.studio-lang:hover { color: #fff; }
.studio-lang {
  padding: .4rem .2rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.studio-talk,
.studio-explore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  background: #fff;
  color: #080808;
  font-size: .875rem;
  font-weight: 500;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .25s ease;
}
.studio-talk { padding: .65rem 1.25rem; }
.studio-talk:hover,
.studio-explore:hover { color: #080808; transform: scale(1.05); }

.studio-menu-toggle {
  position: relative;
  z-index: 50;
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  color: #fff;
  transition: transform .2s ease;
}
.studio-menu-toggle:active { transform: scale(.9); }
.studio-menu-icon {
  position: absolute;
  inset: .5rem;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: opacity .3s ease, transform .3s ease;
}
.studio-menu-icon.is-close { opacity: 0; transform: rotate(-90deg) scale(.72); }
.studio-hero.is-menu-open .studio-menu-icon.is-menu { opacity: 0; transform: rotate(90deg) scale(.72); }
.studio-hero.is-menu-open .studio-menu-icon.is-close { opacity: 1; transform: rotate(0) scale(1); }

.studio-mobile-menu {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(0,0,0,.98);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transition: height .5s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1);
}
.studio-hero.is-menu-open .studio-mobile-menu {
  height: 100vh;
  height: 100svh;
  opacity: 1;
  pointer-events: auto;
}
.studio-mobile-links {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  padding: 6rem 2rem 2rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .4s ease .1s, transform .4s cubic-bezier(.16,1,.3,1) .1s;
}
.studio-hero.is-menu-open .studio-mobile-links { opacity: 1; transform: translateY(0); }
.studio-mobile-links > a:not(.studio-mobile-talk) {
  width: fit-content;
  color: rgba(255,255,255,.9);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.studio-mobile-links > a:hover { color: #fff; }
.studio-mobile-talk {
  width: fit-content;
  margin-top: .4rem;
  padding: .85rem 2rem;
  border-radius: 999px;
  background: #fff;
  color: #080808;
  font-size: 1rem;
  font-weight: 500;
}

.studio-hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(7rem, 15vh, 10rem) 1.5rem 2.5rem;
  pointer-events: none;
}
.studio-hero-top,
.studio-hero-bottom { pointer-events: auto; }
.studio-hero-top { max-width: 56rem; }
.studio-hero-badge {
  margin-bottom: 1.5rem;
  color: rgba(255,255,255,.9);
  font-size: clamp(.75rem, 1.3vw, .875rem);
  animation: fadeSlideUp .8s ease .2s both;
}
.studio-hero-title {
  position: relative;
  isolation: isolate;
  max-width: 15ch;
  color: #fff;
  font-family: "Geist", "DM Sans", sans-serif;
  font-size: clamp(2.5rem, 6.2vw, 5.1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.05em;
  text-wrap: balance;
  animation: fadeSlideUp .8s ease .4s both;
}
.studio-hero-title span { display: block; }
.studio-hero-title.is-fluid-ready > span {
  color: transparent;
  background-image:
    radial-gradient(circle at var(--fluid-x, 32%) var(--fluid-y, 42%),
      #ffffff 0%,
      #e4f0ff 8%,
      rgba(174, 202, 255, .96) 20%,
      rgba(200, 175, 224, .5) 38%,
      transparent 58%),
    linear-gradient(110deg,
      #ffffff 0%,
      #cfe4ff 24%,
      #8fb0ec 50%,
      #c6a9e0 74%,
      #ffffff 100%);
  background-size: 100% 100%, 260% 100%;
  background-position: center, 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: fluidTextFlow 2.6s cubic-bezier(.45, 0, .2, 1) infinite alternate;
}
@keyframes fluidTextFlow {
  from { background-position: center, 0% 50%; }
  to { background-position: center, 100% 50%; }
}
.studio-hero-bottom { max-width: 40rem; }

/* ---------- Hero 導言：Crystal Glow 文字特效 ----------
   移植自 Originkit 的 SparkleButton（原本是 React/framer-motion 的
   按鈕元件），改用純 CSS `@property` 讓 --hero-lede-hover / --pos
   兩個自訂屬性可以被 transition 補間，不需要任何 JS 或框架。
   `.hero-lede-text` 本身必須維持沒有巢狀標籤（build.mjs 的
   data-i18n 規則不允許），視覺上的「兩層文字」改成單層文字疊
   多層 drop-shadow 達成，取代原本兩個 <span> 疊字的做法。 */
@property --hero-lede-hover { syntax: '<number>'; inherits: true; initial-value: .4; }
@property --hero-lede-pos { syntax: '<number>'; inherits: true; initial-value: 0; }

.hero-lede-fx {
  width: max-content;
  max-width: 100%;
  position: relative;
  isolation: isolate;
  --hero-lede-hover: .4;
  --hero-lede-pos: 0;
  --hero-lede-font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  --hero-lede-shadow: #a5a5a5;
  --hero-lede-glare: #ffd300bf;
  transition: --hero-lede-hover .4s ease;
}
.hero-lede-fx:hover {
  --hero-lede-hover: 1;
  --hero-lede-pos: 1;
  transition: --hero-lede-hover .4s ease, --hero-lede-pos 1s linear;
}

.hero-lede-text {
  max-width: 40rem;
  margin-bottom: 1.5rem;
  padding: 0;
  font-size: var(--hero-lede-font-size);
  line-height: 1.7;
  white-space: pre-line;
  animation: fadeSlideUp .8s ease .7s both;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: none;
}

/* ============================================================
   24. SEO content surfaces — visible editorial content
   ============================================================ */
.lab-summary-grid,
.join-path-grid,
.series-grid,
.formula-static-grid,
.capability-index-grid,
.lab-detail-grid,
.about-method-grid,
.insights-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(24px, 4vw, 48px);
}
.lab-summary-grid article,
.join-path-grid article,
.series-card,
.formula-static-card,
.section-cta,
.join-faq-list article,
.capability-index section,
.lab-detail-panel {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--interface-rule);
  border-radius: 12px;
  background: rgba(8, 12, 16, .74);
}
.about-method-grid,
.insights-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.about-method-grid article,
.insights-method-grid article { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--interface-rule); background: rgba(8, 12, 16, .58); }
.about-method-grid p,
.insights-method-grid p { color: var(--lab-mute); line-height: 1.75; }
.lab-summary-grid h3,
.join-path-grid h3,
.series-card h3,
.formula-static-card h3 { margin: 0 0 12px; color: var(--lab-white); }
.lab-summary-grid p,
.join-path-grid p,
.series-card p,
.formula-static-card p,
.join-faq-list p { color: var(--lab-mute); line-height: 1.75; }
.section-sub { max-width: 70ch; color: var(--lab-mute); }
.section-cta { margin-top: 32px; }
.section-cta .arrow-link { margin-top: 12px; }
.series-label { display: block; margin-top: 20px; color: var(--neon-bright); font: 600 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.work-card figure { margin: 0; }
.work-cap { padding: 14px 2px 4px; opacity: 0; transition: opacity .3s ease; }
.work-card:hover .work-cap,
.work-card:focus-within .work-cap { opacity: 1; }
.work-cap-title { margin: 0; font-size: 1rem; }
.work-cap-meta { margin: 4px 0 0; color: var(--lab-mute); font: .72rem/1.5 var(--font-mono); }
.pool-language { color: var(--lab-mute); font: .68rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.capability-index { margin-top: 28px; border-top: 1px solid var(--interface-rule); padding-top: 18px; }
/* #capability 是淺底區塊（文字色 #1b1e24），而 --neon-bright 實際是 #e8e8f0 近白，
   直接套會變成白字壓白底。改成繼承區塊自身的文字色，深淺底都成立。 */
.capability-index summary { cursor: pointer; color: inherit; font-family: var(--font-mono); }
.capability-index h3 { font-size: .9rem; }
.capability-index ul,
.lab-detail-list,
.lab-role-list,
.lab-sibling-list { list-style: none; margin: 0; padding: 0; }
.capability-index li { padding: 7px 0; border-bottom: 1px solid var(--interface-rule); color: var(--lab-mute); }
.capability-index b { display: inline-block; min-width: 2.6em; color: var(--neon-bright); }
.formula-static-head { margin-top: 44px; }
.formula-static-card .f-no { color: var(--neon-bright); font-family: var(--font-mono); }
.about-group-ladder { list-style: none; margin: 32px 0 0; padding: 0; }
.about-group-ladder li { display: grid; grid-template-columns: minmax(80px, .5fr) 1fr 1fr auto; gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--interface-rule); }
.about-group-ladder span,
.about-group-ladder small { color: var(--lab-mute); }
.about-group-ladder em { color: var(--neon-bright); font: normal .7rem/1 var(--font-mono); }
.join-faq-list { display: grid; gap: 12px; margin-top: 24px; }
.join-faq-list h3 { margin: 0 0 8px; font-size: 1.05rem; }
.draft-note { margin-top: 20px; color: var(--lab-mute); font: .68rem/1.6 var(--font-mono); }
.insight-cap h3 { margin: 0; font-size: 1rem; }
.insight-desc { color: var(--lab-mute); line-height: 1.65; }
.lab-detail-prose { max-width: 78ch; display: grid; gap: 20px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.8; }
.lab-detail-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.lab-detail-list li,
.lab-role-list li { padding: 18px; border: 1px solid var(--interface-rule); background: var(--interface-panel); }
.lab-detail-list b { display: block; color: var(--neon-bright); font: 700 1.4rem/1 var(--font-mono); }
.lab-detail-list span,
.lab-detail-list small,
.lab-role-list b,
.lab-role-list span { display: block; margin-top: 8px; }
.lab-detail-list small,
.lab-role-list span { color: var(--lab-mute); }
.lab-role-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }

/* 其他三座實驗室：Lab 頁互連。沿用 .lab-role-list 的卡片語彙，只是內容是連結。 */
.lab-siblings { margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--interface-rule); }
.lab-siblings h3 { margin: 0; color: var(--lab-mute); font: 600 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.lab-sibling-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.lab-sibling-list li { padding: 18px; border: 1px solid var(--interface-rule); background: var(--interface-panel); transition: border-color var(--dur-fast, .2s) ease, transform var(--dur-fast, .2s) ease; }
.lab-sibling-list li:hover { border-color: var(--neon-bright); transform: translateY(-4px); }
.lab-sibling-list a { color: var(--lab-white); font-weight: 600; text-decoration: none; }
.lab-sibling-list a::after { content: ' →'; color: var(--neon-bright); }
.lab-sibling-list span { display: block; margin-top: 8px; color: var(--lab-mute); line-height: 1.7; }
.nk-sidenav-list a[data-page^="lab-"] { font-size: .62rem; opacity: .72; }
.error-bilingual { display: grid; gap: 36px; }
.error-bilingual hr { width: 100%; border: 0; border-top: 1px solid var(--interface-rule); }
@media (max-width: 768px) {
  .lab-summary-grid,
  .join-path-grid,
  .series-grid,
  .formula-static-grid,
  .capability-index-grid,
  .lab-detail-grid,
  .about-method-grid,
  .insights-method-grid { grid-template-columns: 1fr; }
  .work-cap { opacity: 1; }
  .about-group-ladder li { grid-template-columns: 1fr; gap: 5px; }
  .lab-detail-list,
  .lab-role-list,
  .lab-sibling-list { grid-template-columns: 1fr; }
}

/* ============================================================
   56 — 2026-09-01 review pass
   Static hero flow, 6-bit game language, exact 32-element system,
   interactive About portrait and higher-contrast Join form.
   ============================================================ */

/* Hero copy is present immediately; no canvas, mask or CTA entrance pass. */
.studio-hero-title,
.studio-hero-title > span,
.hero-lede-fx,
.hero-lede-fx .hero-lede-text,
.studio-hero .studio-explore {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

.hero-lede-spark,
.hero-dust-text-canvas { display: none !important; }

/* The Hero and game are normal document-flow sections. This removes the
   fixed/absolute overlap that covered the four-film grid on wide screens. */
.hero-pin-stage,
.hero-pin-stage.is-pinning,
.hero-pin-stage.is-pinned-end {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
}

.hero-pin-stage .studio-hero,
.hero-pin-stage.is-pinning .studio-hero,
.hero-pin-stage.is-pinned-end .studio-hero,
.hero-pin-stage .hero-game-reveal,
.hero-pin-stage.is-pinning .hero-game-reveal,
.hero-pin-stage.is-pinned-end .hero-game-reveal {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
  will-change: auto !important;
}

.hero-pin-stage .hero-game-reveal {
  display: flex !important;
  min-height: min(78rem, 100svh) !important;
  padding: clamp(1rem, 4vw, 3rem) !important;
}

.hero-pin-stage .hero-game-reveal .game-wrap {
  width: min(100%, 82rem) !important;
}

/* 6-bit game: six-color display palette, hard pixels and stepped states. */
#positioning-game {
  --px-ink: #172036;
  --px-blue: #3478f6;
  --px-cyan: #48c9d8;
  --px-yellow: #f2b51d;
  --px-pink: #ef476f;
  --px-paper: #eef3f9;
  background: var(--px-paper) !important;
}

#positioning-game .game-wrap {
  position: relative;
  padding: clamp(.75rem, 1.6vw, 1.25rem) !important;
  overflow: hidden !important;
  border: 4px solid var(--px-ink) !important;
  border-radius: 0 !important;
  background: var(--px-paper) !important;
  box-shadow: 8px 8px 0 var(--px-blue) !important;
}

#positioning-game .game-wrap::before {
  content: "6-BIT // LAB VECTOR" !important;
  display: block !important;
  position: absolute;
  z-index: 5;
  top: .45rem;
  left: .75rem;
  color: var(--px-ink);
  background: var(--px-yellow);
  padding: .28rem .48rem;
  font: 700 clamp(.58rem, .8vw, .72rem)/1 var(--font-mono);
  letter-spacing: .1em;
  box-shadow: 3px 3px 0 var(--px-ink);
  pointer-events: none;
}

#positioning-game .game-score {
  position: relative;
  z-index: 6;
  min-height: 3.15rem;
  padding: .8rem .4rem .55rem !important;
  color: var(--px-ink) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#positioning-game .game-score strong {
  display: inline-block;
  min-width: 2.4ch;
  padding: .13em .22em;
  color: #fff !important;
  background: var(--px-ink);
  box-shadow: 3px 3px 0 var(--px-cyan);
  font-family: var(--font-mono) !important;
}

#positioning-game .game-stage,
#positioning-game .game-stage[data-game="lab-vector"] {
  min-height: clamp(30rem, 65vw, 49rem);
  overflow: hidden;
  border: 3px solid var(--px-ink) !important;
  border-radius: 0 !important;
  background: var(--px-paper) !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}

#positioning-game #game-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#positioning-game .game-overlay {
  font-family: var(--font-mono) !important;
  background: rgba(238, 243, 249, .82) !important;
  animation: pixel-wipe 420ms steps(6, end) both !important;
}

#positioning-game .game-overlay-copy {
  max-width: min(90%, 38rem);
  padding: clamp(1rem, 3vw, 2rem);
  border: 4px solid var(--px-ink);
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 8px 8px 0 var(--px-pink) !important;
}

#positioning-game .game-overlay .big,
#positioning-game .game-overlay.is-vector-over .big {
  color: var(--px-ink) !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(1.65rem, 5vw, 4rem) !important;
  font-weight: 700;
  letter-spacing: .08em !important;
  text-shadow: 3px 3px 0 var(--px-cyan) !important;
}

#positioning-game .game-overlay p:not(.big),
#positioning-game .game-overlay.is-vector-over .game-overlay-copy > p:not(.big) {
  color: #39445b !important;
  font-family: var(--font-mono) !important;
  font-weight: 600;
  letter-spacing: .04em !important;
  text-shadow: none !important;
}

#positioning-game .game-overlay .again-btn {
  border: 3px solid var(--px-ink) !important;
  border-radius: 0 !important;
  background: var(--px-yellow) !important;
  color: var(--px-ink) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--px-ink) !important;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end) !important;
}

#positioning-game .game-overlay .again-btn:hover,
#positioning-game .game-overlay .again-btn:focus-visible {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--px-ink) !important;
}

#positioning-game .game-overlay.is-vector-over {
  justify-content: center !important;
  padding: clamp(1rem, 3vw, 2rem) !important;
  background: rgba(23, 32, 54, .76) !important;
}

#positioning-game .game-overlay.is-vector-over .game-overlay-visual { display: none !important; }

@keyframes pixel-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
  #positioning-game .game-overlay { animation: none !important; }
}

/* Works behaves as one rounded visual field without changing column breakpoints. */
#works .works-columns {
  overflow: hidden;
  border-radius: clamp(1rem, 2vw, 1.75rem);
  isolation: isolate;
}

/* Capability heading and exact four-category color identity. */
#capability .section-head { align-items: flex-end; }
#capability .capability-intro {
  max-width: 34rem;
  margin: .65rem 0 0;
  color: #4b5362;
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.6;
}

.periodic-callout,
.periodic-callout-inner,
.periodic-callout .p-callout-sample,
.periodic-callout .p-selected-state {
  border-color: color-mix(in srgb, var(--cal-ch) 58%, #c7ccd5) !important;
}

.periodic-callout .p-selected-title,
.periodic-callout .p-sample-symbol,
.periodic-callout .p-group-dot,
.periodic-callout .p-state-mark {
  color: color-mix(in srgb, var(--cal-ch) 78%, #172036) !important;
}

.periodic-callout-inner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cal-ch) 12%, #fff), #fff 62%) !important;
  box-shadow: inset 5px 0 0 var(--cal-ch) !important;
}

/* Interactive particle portrait is the About hero artwork again. */
html[data-page="about"] .about-robot-stage {
  display: block !important;
  z-index: 1;
  opacity: 1 !important;
}

html[data-page="about"] #about-robot-canvas {
  display: block !important;
  width: 100%;
  height: 100%;
  filter: saturate(.7) contrast(1.12) brightness(1.04) !important;
}

html[data-page="about"] .about-lab-hero .page-title {
  width: max-content;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2.35rem, 5.25vw, 6.7rem);
}

.about-narrative .about-story p:first-child::first-letter {
  font-family: var(--font-display) !important;
  font-weight: 650 !important;
}

/* Join is already the destination, so its duplicate top-right CTA is hidden. */
html[data-page="join"] .nk-sidenav-actions > .nk-cta-pill[data-page="join"] {
  display: none !important;
}

html[data-page="join"] .apply-form,
html[data-page="join"] .apply-form label,
html[data-page="join"] .consent-row label,
html[data-page="join"] .join-fallback,
html[data-page="join"] .join-fallback a,
html[data-page="join"] .form-status {
  color: #343a48 !important;
}

html[data-page="join"] .apply-form .opt,
html[data-page="join"] .apply-form input::placeholder,
html[data-page="join"] .apply-form textarea::placeholder {
  color: #697181 !important;
  opacity: 1;
}

html[data-page="join"] .apply-form input,
html[data-page="join"] .apply-form select,
html[data-page="join"] .apply-form textarea {
  color: #1b1e24 !important;
  border-color: #c5cbd5 !important;
  background-color: #f7f9fc !important;
}

@media (max-width: 680px) {
  .hero-pin-stage .hero-game-reveal { min-height: auto !important; padding: .75rem !important; }
  #positioning-game .game-wrap { border-width: 3px !important; box-shadow: 5px 5px 0 var(--px-blue) !important; }
  #positioning-game .game-stage,
  #positioning-game .game-stage[data-game="lab-vector"] { min-height: 31rem; }
  #positioning-game .game-wrap::before { content: "6-BIT" !important; }
  html[data-page="about"] .about-lab-hero .page-title {
    font-size: clamp(1.75rem, 8.4vw, 3rem);
    letter-spacing: -.045em;
  }
}

/* Home uses the cinematic navigation at the top. Once the page has moved,
   the shared header takes over and follows the existing scroll-direction
   state machine: down hides it, any deliberate upward scroll reveals it. */
html[data-page="home"] .site-header.nk-side-nav {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base),
    background var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

html[data-page="home"] .site-header.nk-side-nav[data-state="pinned"],
html[data-page="home"] .site-header.nk-side-nav.is-pinned {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

html[data-page="home"] #nk-menu-overlay {
  display: flex !important;
}
.hero-lede-spark {
  position: absolute;
  z-index: 3;
  width: calc(var(--hero-lede-font-size) * 1.05);
  aspect-ratio: 1;
  pointer-events: none;
  top: calc(var(--y, 50) * 1%);
  left: calc(var(--x, 0) * 1%);
  transform: translate(-50%, -50%) scale(0);
}
.hero-lede-spark path { fill: var(--hero-lede-glare); }
.hero-lede-fx:hover .hero-lede-spark {
  animation: hero-lede-sparkle var(--spark-duration, 1.45s) var(--spark-delay, 0s) infinite both;
}
@keyframes hero-lede-sparkle {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
  26% { opacity: 1; transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(42deg); }
  52% { opacity: .55; transform: translate(-50%, -50%) scale(calc(var(--s, 1) * .56)) rotate(82deg); }
  70% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(118deg); }
}
.hero-lede-spark:nth-of-type(1) { --x: 2; --y: 15; --s: 1.45; --spark-duration: 1.35s; --spark-delay: 0s; }
.hero-lede-spark:nth-of-type(2) { --x: 22; --y: 82; --s: 1.55; --spark-duration: 1.7s; --spark-delay: .18s; }
.hero-lede-spark:nth-of-type(3) { --x: 48; --y: 25; --s: 1.35; --spark-duration: 1.5s; --spark-delay: .4s; }
.hero-lede-spark:nth-of-type(4) { --x: 72; --y: 78; --s: 1.25; --spark-duration: 1.85s; --spark-delay: .1s; }
.hero-lede-spark:nth-of-type(5) { --x: 96; --y: 30; --s: 1.2; --spark-duration: 1.6s; --spark-delay: .62s; }
.studio-explore {
  gap: .55rem;
  padding: .72rem 1.25rem;
  animation: fadeSlideUp .8s ease .9s both;
}
.studio-explore svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .studio-nav { padding: 1.25rem 3rem; }
  .studio-hero-content { padding: clamp(8rem, 16vh, 11rem) 3rem 4rem; }
}
@media (min-width: 1024px) {
  .studio-nav { padding-inline: 4rem; }
  .studio-hero-content { padding-inline: 4rem; }
}
@media (max-width: 767px) {
  .studio-hero { min-height: 620px; }
  .studio-nav-links,
  .studio-talk { display: none; }
  .studio-menu-toggle { display: block; }
  .studio-nav-actions { gap: .5rem; }
  .studio-hero-shade {
    background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.06) 38%, rgba(0,0,0,.68));
  }
  .studio-hero-content { padding-top: 7.25rem; padding-bottom: 2.25rem; }
  .studio-hero-title { max-width: 12ch; font-size: clamp(2.45rem, 11.6vw, 4.25rem); }
  html[lang^="zh"] .studio-hero-title {
    max-width: none;
    font-size: clamp(2.15rem, 9.6vw, 3.4rem);
    white-space: nowrap;
  }
  .studio-hero-bottom { max-width: min(90%, 30rem); }
}

@media (prefers-reduced-motion: reduce) {
  .studio-hero-badge,
  .studio-hero-title,
  .hero-lede-text,
  .studio-explore { animation: none; }
  .studio-hero-title.is-fluid-ready > span { animation: none; }
  .hero-lede-fx,
  .hero-lede-fx:hover { transition: none; }
  .hero-lede-fx:hover .hero-lede-spark { animation: none; }
  .studio-talk,
  .studio-explore,
  .studio-menu-icon,
  .studio-mobile-menu,
  .studio-mobile-links { transition-duration: .01ms; }
}

/* ============================================================
   Hero → Game 沉浸式滾動轉場
   ------------------------------------------------------------
   桌面：#hero 在 .hero-pin-stage 裡 sticky 住，hero-transition.js
   把 scrollY 換算成 0-1 進度寫進下面這幾個 CSS var，影片放大、
   文案淡出、黑層蓋入，交接給 #positioning 的 game-wrap 背景影片
   （跟 Hero 同一支素材，見 index.html）。
   手機／prefers-reduced-motion：整段停用，維持原本堆疊捲動；
   JS 也不會掛 scroll listener（見 hero-transition.js 的 matchMedia 判斷）。
   ============================================================ */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* 站上 html/body 都寫死 overflow-x:hidden（防止滿版裝飾物撐出水平捲軸），
     瀏覽器會因此把 overflow-y 自動升級成 auto，导致 position:sticky 完全失效
     （sticky 的「最近有捲動的祖先」變成 body，而不是 viewport）。
     所以這裡改用 JS（hero-transition.js）手動切換 fixed／absolute 兩態，
     效果等同 sticky，但不受這個站級 overflow 設定影響。 */
  .hero-pin-stage { position: relative; height: 190vh; }
  .hero-pin-stage.is-pinning .studio-hero { position: fixed; top: 0; left: 0; width: 100%; }
  .hero-pin-stage.is-pinned-end .studio-hero { position: absolute; top: var(--hero-pin-travel, 0px); left: 0; width: 100%; }
  .studio-hero-video { transform: scale(var(--hero-zoom, 1)); transform-origin: center; opacity: var(--hero-film-opacity, 1); }
  .studio-hero-content { opacity: var(--hero-fade, 1); }
  .hero-crossfade {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(180deg, transparent 32%, rgba(2, 2, 3, .42) 100%);
    opacity: var(--hero-crossfade, 0);
    pointer-events: none;
  }

  .hero-pin-stage.is-pinning .hero-game-reveal,
  .hero-pin-stage.is-pinned-end .hero-game-reveal {
    position: absolute;
    inset: auto 0 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(2.5rem, 7vh, 5rem) clamp(1.5rem, 5vw, 6rem);
    background: transparent;
    opacity: var(--game-reveal-opacity, 0);
    transform: translateY(var(--game-reveal-y, 16vh)) scale(var(--game-reveal-scale, .88));
    filter: blur(var(--game-reveal-blur, 16px));
    transform-origin: center bottom;
    pointer-events: none;
    will-change: opacity, transform, filter;
  }
  .hero-pin-stage.is-pinning .hero-game-reveal { position: fixed; inset: 0; }
  .hero-pin-stage.is-pinned-end .hero-game-reveal { top: var(--hero-pin-travel, 0px); bottom: auto; }
  .hero-game-reveal .game-wrap { width: min(100%, 72rem); pointer-events: auto; }
}

#positioning .game-ambient-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--game-ambient, .5);
  filter: saturate(.9) brightness(.85) blur(1px);
  pointer-events: none;
}
#positioning .game-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#positioning .game-score { position: relative; z-index: 1; }
#positioning .game-stage { position: relative; z-index: 1; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  #positioning .game-ambient-video { transition: opacity .6s ease; }
}

/* ---------- Game HUD 四角標註（沿用 .hero-hud 的角括號語彙） ---------- */
.game-hud {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  color: var(--lab-faint);
  pointer-events: none;
}
.game-hud::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--rule-strong);
  border-style: solid;
}
.game-hud-tl { left: .75rem; top: .75rem; }
.game-hud-tl::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.game-hud-tr { right: .75rem; top: .75rem; }
.game-hud-tr::before { top: 0; right: 0; border-width: 1px 1px 0 0; }
.game-hud .hud-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--neon);
}
.game-hud .hud-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: hud-blink 1.8s ease-in-out infinite;
}

@media (max-width: 640px) {
  .game-hud { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .game-hud .hud-dot { animation: none; }
}

/* ============================================================
   22 — 2026 cool-spectrum palette pass
   Midnight Black / Slate Blue / Dusty Mauve / Pearl White
   ============================================================ */
body {
  background:
    radial-gradient(70rem 45rem at 82% 12%, rgba(48, 57, 73, .16), transparent 64%),
    radial-gradient(48rem 36rem at 8% 62%, rgba(136, 124, 135, .055), transparent 66%),
    var(--lab-void);
}

::selection {
  background: var(--lab-white);
  color: var(--lab-void);
}
::-webkit-scrollbar-thumb { background: rgba(107, 109, 127, .42); }
::-webkit-scrollbar-thumb:hover { background: rgba(173, 171, 185, .62); }

/* Surfaces use light transmission rather than neon colour blocks. */
.positioning-lab-system,
.section-cta-banner,
.custom-formula-card,
.formula-card,
.periodic-shell,
.group-map,
.join-panel,
.insight-card {
  border-color: rgba(173, 171, 185, .16);
  background:
    linear-gradient(135deg, rgba(84, 91, 110, .12), transparent 46%),
    rgba(16, 22, 34, .74);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 242, .055),
    0 22px 64px rgba(2, 2, 3, .34);
}
.positioning-lab-system:hover,
.section-cta-banner:hover,
.custom-formula-card:hover,
.formula-card:hover,
.insight-card:hover {
  border-color: rgba(173, 171, 185, .34);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 242, .08),
    0 24px 72px rgba(2, 2, 3, .44),
    0 0 34px rgba(84, 91, 110, .12);
}

.section-head::after,
.footer-rule,
.page-rule,
.director-scan,
.about-hero-interaction span {
  background: linear-gradient(90deg, transparent, #545b6e 22%, #887c87 64%, #adabb9 88%, transparent);
}

/* Buttons: pearl glass, with depth carried by material and not saturation. */
.btn-primary,
.nk-hero-cta,
.formula-bar #fb-cta {
  border-color: rgba(173, 171, 185, .52);
  background:
    radial-gradient(circle at 18% 4%, rgba(242, 240, 242, .22), transparent 30%),
    linear-gradient(145deg, rgba(84, 91, 110, .56), rgba(32, 41, 55, .82));
  color: var(--lab-white);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 242, .34),
    inset 0 -10px 22px rgba(2, 2, 3, .24),
    0 16px 42px rgba(2, 2, 3, .36),
    0 0 24px rgba(107, 109, 127, .12);
}
.btn-primary:hover,
.nk-hero-cta:hover,
.formula-bar #fb-cta:hover {
  border-color: rgba(242, 240, 242, .72);
  background:
    radial-gradient(circle at 18% 4%, rgba(242, 240, 242, .32), transparent 32%),
    linear-gradient(145deg, rgba(107, 109, 127, .72), rgba(48, 57, 73, .9));
  color: var(--lab-white);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 242, .46),
    0 18px 48px rgba(2, 2, 3, .44),
    0 0 34px rgba(151, 144, 157, .16);
}
.btn-primary:hover .nk-cta-arrow,
.nk-hero-cta:hover .nk-hero-cta-sub,
.formula-bar #fb-cta:hover .nk-cta-arrow { color: var(--lab-white); }

/* Talent pools and research specimens preserve four identities through
   temperature and luminance, while sharing one restrained spectrum. */
.pool,
.lab-specimen {
  border-color: color-mix(in srgb, var(--pool-ch, var(--spec-ch, #6b6d7f)) 44%, transparent);
  background: linear-gradient(180deg, rgba(16, 22, 34, .86), rgba(2, 2, 3, .95));
  box-shadow: inset 0 1px rgba(242, 240, 242, .035);
}
.pool::after,
.lab-specimen::after {
  background: linear-gradient(180deg, transparent 54%, color-mix(in srgb, var(--pool-ch, var(--spec-ch, #6b6d7f)) 11%, #020203));
}
.pool:hover,
.lab-specimen:hover {
  border-color: color-mix(in srgb, var(--pool-ch, var(--spec-ch, #adabb9)) 72%, #adabb9);
  box-shadow: 0 0 34px color-mix(in srgb, var(--pool-ch, var(--spec-ch, #6b6d7f)) 14%, transparent);
}
.pool canvas,
.pool-visual-image,
.lab-specimen canvas,
.lab-specimen video {
  filter: saturate(.26) contrast(1.08) brightness(.84);
}

/* About uses a colder optical field and softer mauve highlight. */
.about-lab-hero {
  background:
    radial-gradient(52% 72% at 78% 48%, rgba(48, 57, 73, .32), transparent 70%),
    radial-gradient(40% 54% at 61% 72%, rgba(136, 124, 135, .1), transparent 74%),
    var(--lab-void);
}
.about-robot-aura {
  border-color: rgba(107, 109, 127, .12);
  background: linear-gradient(115deg, transparent 42%, rgba(151, 144, 157, .055) 55%, transparent 68%);
  box-shadow: inset 0 0 90px rgba(48, 57, 73, .1);
}
#about-robot-canvas { filter: saturate(.52) contrast(1.12) brightness(1.04); }
.about-ecosystem-section .group-map::before,
.about-ecosystem-section .gm-key::after {
  background: linear-gradient(180deg, transparent, rgba(173, 171, 185, .7) 14% 86%, transparent);
  box-shadow: 0 0 14px rgba(107, 109, 127, .28);
}
.about-ecosystem-section .gm-node.is-self {
  background: linear-gradient(135deg, rgba(84, 91, 110, .3), rgba(16, 22, 34, .88));
  box-shadow: inset 0 0 0 1px rgba(173, 171, 185, .24), 0 0 34px rgba(84, 91, 110, .1);
}

/* Keep the supplied hero film's original color and contrast. */
.studio-hero {
  background: var(--lab-void);
  color: var(--lab-white);
}
.studio-hero-video {
  filter: none;
}
.studio-hero-shade {
  display: none;
}
.studio-wordmark,
.studio-nav-links a:hover,
.studio-lang:hover,
.studio-hero-title { color: var(--lab-white); }
.studio-nav-links a,
.studio-lang,
.studio-hero-badge { color: rgba(242, 240, 242, .78); }
.studio-talk,
.studio-explore,
.studio-mobile-talk {
  background: var(--lab-white);
  color: var(--lab-void);
  box-shadow: 0 12px 34px rgba(2, 2, 3, .32);
}
.studio-talk:hover,
.studio-explore:hover,
.studio-mobile-talk:hover {
  background: #adabb9;
  color: #020203;
}
.studio-mobile-menu { background: rgba(2, 2, 3, .97); }

@media (max-width: 767px) {
  .studio-hero-shade {
    display: none;
  }
}

/* Positioning title hierarchy: network first, proposition second. */
#positioning .positioning-network .positioning-copy {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

#positioning .positioning-network .positioning-copy .positioning-title {
  display: block;
  max-width: none;
  margin: 0;
  color: #f2f0f2;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 560;
  line-height: .92;
  letter-spacing: -.052em;
  text-wrap: balance;
}

#positioning .positioning-network .positioning-copy .positioning-subtitle {
  display: block;
  max-width: 32ch;
  margin: 0;
  color: rgba(173, 171, 185, .86);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.25vw, 2rem);
  font-weight: 430;
  line-height: 1.35;
  letter-spacing: -.025em;
  text-wrap: balance;
}

html[lang^="zh"] #positioning .positioning-network .positioning-copy .positioning-subtitle {
  max-width: 26em;
}

@media (max-width: 560px) {
  #positioning .positioning-network .positioning-copy .positioning-title {
    font-size: clamp(2.25rem, 11vw, 3.15rem);
    line-height: .98;
  }

  #positioning .positioning-network .positioning-copy .positioning-subtitle {
    max-width: 18em;
    font-size: 1.05rem;
  }
}

/* ============================================================
   25 — Borderless spatial system
   Separate content with atmosphere, spacing and luminance instead of boxes.
   Functional focus rings and selected states remain explicit.
   ============================================================ */
.section,
.site-footer,
.footer-bottom,
.footer-rule,
.page-rule,
.section-head::after {
  border: 0;
}

.positioning-lab-system,
.section-cta-banner,
.custom-formula-card,
.formula-card,
.periodic-shell,
.group-map,
.join-panel,
.insight-card,
.game-wrap,
.game-progress,
.game-rules,
.game-rules-logic {
  border: 0;
  box-shadow: none;
}

.positioning-lab-system,
.section-cta-banner,
.custom-formula-card,
.formula-card,
.periodic-shell,
.group-map,
.join-panel,
.insight-card {
  background:
    radial-gradient(80% 110% at 14% 0%, rgba(84, 91, 110, .12), transparent 66%),
    linear-gradient(135deg, rgba(16, 22, 34, .52), rgba(2, 2, 3, .14) 74%);
}

.positioning-lab-system:hover,
.section-cta-banner:hover,
.custom-formula-card:hover,
.formula-card:hover,
.insight-card:hover {
  border: 0;
  box-shadow: 0 28px 80px rgba(2, 2, 3, .2);
}

.pool,
.pool:nth-child(even),
.lab-specimen {
  border: 0;
  box-shadow: 0 30px 90px rgba(2, 2, 3, .28);
}

.pool:hover,
.lab-specimen:hover {
  border: 0;
  box-shadow: 0 38px 110px rgba(2, 2, 3, .38),
              0 0 54px color-mix(in srgb, var(--pool-ch, var(--spec-ch, #6b6d7f)) 10%, transparent);
}

.role-preview {
  gap: .5rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.role-preview li {
  border: 0;
  border-radius: .7rem;
  background: linear-gradient(120deg, rgba(16, 22, 34, .78), rgba(16, 22, 34, .42));
  box-shadow: inset 0 1px rgba(242, 240, 242, .035);
}

.role-preview li:hover {
  background: color-mix(in srgb, var(--pool-ch) 10%, rgba(16, 22, 34, .8));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--pool-ch) 58%, transparent);
}

.periodic-scroll,
.periodic-grid,
.periodic-callout,
.p-callout-sample,
.custom-formula-empty,
.custom-formula-diagram,
.formula-figure,
.formula-score,
.formula-bar {
  border: 0;
}

.periodic-grid {
  column-gap: .35rem;
  row-gap: .35rem;
}

.element-cell {
  border: 0;
  border-radius: .45rem;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--el-ch) 13%, rgba(32, 41, 55, .82)), rgba(16, 22, 34, .58) 70%);
  box-shadow: inset 0 1px rgba(242, 240, 242, .025);
}

.element-cell:hover {
  box-shadow: 0 14px 34px rgba(2, 2, 3, .32),
              0 0 24px color-mix(in srgb, var(--el-ch) 17%, transparent);
}

.element-cell.is-selected,
.element-cell[aria-pressed="true"] {
  box-shadow: inset 0 -3px color-mix(in srgb, var(--el-ch) 68%, var(--lab-white)),
              0 18px 42px rgba(2, 2, 3, .36),
              0 0 28px color-mix(in srgb, var(--el-ch) 20%, transparent);
}

.custom-formula-card.has-selection {
  border: 0;
  box-shadow: inset 4px 0 rgba(173, 171, 185, .38), 0 30px 80px rgba(2, 2, 3, .22);
}

.btn,
.btn-primary,
.nk-hero-cta,
.formula-bar #fb-cta,
.fb-clear,
.series-btn,
.arrow-link,
.footer-mail,
.site-footer a {
  border: 0;
}

.btn-primary,
.nk-hero-cta,
.formula-bar #fb-cta {
  box-shadow: inset 0 1px rgba(242, 240, 242, .16), 0 18px 48px rgba(2, 2, 3, .3);
}

.btn-primary:hover,
.nk-hero-cta:hover,
.formula-bar #fb-cta:hover {
  border: 0;
  box-shadow: inset 0 1px rgba(242, 240, 242, .24), 0 22px 56px rgba(2, 2, 3, .38);
}

@media (max-width: 720px) {
  .pool,
  .pool:nth-child(even),
  .positioning-lab-system,
  .section-cta-banner,
  .custom-formula-card,
  .formula-card {
    border-radius: .8rem;
  }

  .role-preview { gap: .4rem; }
}

/* Higher-specificity cleanup for legacy structural rules. */
#works.section,
#capability.section,
.lab-glass-labels span,
.periodic-callout .p-callout-sample,
p.p-selected-state,
a.btn.btn-primary {
  border: 0;
}

/* Minimal Snake — the game borrows the hero film's midnight / pearl palette. */
.game-wrap {
  width: min(100%, 34rem);
  padding: clamp(.75rem, 1.5vw, 1rem);
  border: 0;
  border-radius: 1.2rem;
  background:
    radial-gradient(90% 70% at 72% 8%, rgba(48, 57, 73, .2), transparent 70%),
    rgba(2, 2, 3, .3);
  box-shadow: 0 32px 90px rgba(2, 2, 3, .32);
}

.game-score {
  margin: 0 0 .7rem;
  padding-inline: .25rem;
  color: rgba(173, 171, 185, .7);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
}

.game-score strong {
  margin-left: .35rem;
  color: var(--lab-white);
  font-family: var(--font-display);
  font-size: 1rem;
}

.game-score > span:nth-child(2) strong { color: var(--lab-white); }

.game-stage {
  aspect-ratio: 1;
  border: 0;
  border-radius: 1rem;
  background: #020203;
  box-shadow: 0 24px 68px rgba(2, 2, 3, .42);
  touch-action: none;
}

.game-stage::before {
  box-shadow: inset 0 0 90px rgba(2, 2, 3, .28);
}

.game-stage::after {
  opacity: .13;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(173, 171, 185, .035) 3px 4px);
  animation: none;
  mix-blend-mode: screen;
}

.game-overlay {
  gap: .8rem;
  padding: 1rem;
  background: rgba(2, 2, 3, .3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: rgba(173, 171, 185, .72);
}

.game-overlay p:empty { display: none; }
.game-overlay .big {
  color: var(--lab-white);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  font-weight: 600;
  letter-spacing: .16em;
}

.game-overlay .again-btn {
  margin: 0;
  padding: .7rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--lab-white);
  color: var(--lab-void);
  font-family: var(--font-sans);
  font-weight: 600;
  box-shadow: 0 14px 34px rgba(2, 2, 3, .34);
}

.game-overlay .again-btn:hover {
  background: #adabb9;
  transform: translateY(-2px);
}

.game-stage.snake-over canvas { animation: snake-soft-hit 360ms ease-out; }
@keyframes snake-soft-hit {
  0%, 100% { transform: scale(1); filter: none; }
  45% { transform: scale(.985); filter: brightness(1.24) saturate(.72); }
}

@media (max-width: 720px) {
  .game-wrap { max-width: 30rem; padding: .6rem; }
  .game-score { font-size: .66rem; }
  .game-score > span:nth-child(2) { display: inline-flex; }
}

/* ============================================================
   26 — Focused section cleanup + vivid warm/cool spectrum
   ============================================================ */
#positioning::before,
#positioning::after {
  content: none;
  display: none;
}

#works .section-head,
#capability .section-head {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

#works .section-head h2,
#capability .section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 6vw, 5.4rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.045em;
}

/* Snake: expose the palette directly; no dimming veil over the canvas. */
.game-wrap {
  background:
    radial-gradient(100% 90% at 82% 2%, rgba(84, 91, 110, .48), transparent 58%),
    linear-gradient(145deg, #202937, #101622 64%, #020203);
  box-shadow: 0 34px 100px rgba(2, 2, 3, .36), 0 0 48px rgba(48, 57, 73, .2);
}

.game-stage {
  background: #101622;
  box-shadow: 0 28px 78px rgba(2, 2, 3, .38), 0 0 34px rgba(84, 91, 110, .24);
}

.game-stage::before { box-shadow: none; }
.game-stage::after { opacity: .055; }
.game-overlay {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.game-overlay .big:empty { display: none; }

/* Growth inherits Creative's warm orange-red spectrum. */
.pool-growth .pool-visual-media::before {
  background:
    radial-gradient(90% 76% at 76% 16%, rgba(255, 118, 88, .34), transparent 68%),
    linear-gradient(120deg, rgba(39, 7, 8, .5) 4%, rgba(44, 10, 8, .14) 58%, transparent 88%);
}
.pool-growth .pool-visual-media::after {
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(21, 4, 5, .66) 100%),
    linear-gradient(rgba(255, 118, 88, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 118, 88, .045) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

/* AI uses Marketing's clear electric-blue temperature. */
.pool-ai .pool-visual-video {
  filter: saturate(1.75) contrast(1.08) brightness(1.08) hue-rotate(188deg);
}
.pool-ai:hover .pool-visual-video {
  filter: saturate(1.95) contrast(1.1) brightness(1.16) hue-rotate(188deg);
}
.pool-ai .pool-visual-media::before {
  background:
    radial-gradient(90% 76% at 78% 14%, rgba(79, 140, 255, .38), transparent 68%),
    linear-gradient(120deg, rgba(4, 15, 44, .52) 4%, rgba(7, 24, 58, .12) 58%, transparent 88%);
}
.pool-ai .pool-visual-media::after {
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(3, 9, 27, .66) 100%),
    linear-gradient(rgba(108, 167, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 167, 255, .05) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

/* Periodic table: warm and cool fields stay visible instead of being veiled. */
.periodic-scroll {
  padding-block: clamp(1rem, 2vw, 1.5rem);
  background:
    radial-gradient(48rem 24rem at 10% 45%, rgba(233, 105, 76, .14), transparent 66%),
    radial-gradient(52rem 26rem at 88% 42%, rgba(79, 140, 255, .16), transparent 68%);
}

.element-cell {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--el-ch) 30%, #303949),
      color-mix(in srgb, var(--el-ch) 12%, #101622) 72%);
  box-shadow: inset 0 1px rgba(242, 240, 242, .09),
              0 8px 22px color-mix(in srgb, var(--el-ch) 12%, transparent);
}
.element-cell:hover {
  filter: brightness(1.18) saturate(1.18);
  box-shadow: 0 18px 40px rgba(2, 2, 3, .34),
              0 0 30px color-mix(in srgb, var(--el-ch) 34%, transparent);
}
.element-cell.is-selected,
.element-cell[aria-pressed="true"] {
  filter: brightness(1.24) saturate(1.22);
  box-shadow: inset 0 -4px color-mix(in srgb, var(--el-ch) 78%, white),
              0 20px 46px rgba(2, 2, 3, .36),
              0 0 36px color-mix(in srgb, var(--el-ch) 42%, transparent);
}

@media (max-width: 720px) {
  #works .section-head h2,
  #capability .section-head h2 { font-size: clamp(2.5rem, 13vw, 4rem); }
}

/* Lock media temperature regardless of each source asset's original hue. */
.pool-growth .pool-visual-image {
  filter: grayscale(1) contrast(1.2) brightness(1.08);
}
.pool-growth .pool-visual-media::before {
  background: #ff7658;
  opacity: .82;
  mix-blend-mode: color;
}
.pool-growth:hover .pool-visual-image {
  filter: grayscale(1) contrast(1.24) brightness(1.16);
}

.pool-ai .pool-visual-video,
.pool-ai:hover .pool-visual-video {
  filter: grayscale(1) contrast(1.2) brightness(1.12);
}
.pool-ai .pool-visual-media::before {
  background: #4f8cff;
  opacity: .86;
  mix-blend-mode: color;
}

/* Growth / AI use a pearl-white film base, matching the first two pools. */
.pool-growth,
.pool-ai,
.pool-growth .pool-visual,
.pool-ai .pool-visual {
  background: #f2f0f2;
}

.pool-growth .pool-visual-image,
.pool-growth .growth-network-canvas,
.pool-growth:hover .pool-visual-image {
  filter: grayscale(1) invert(1) contrast(1.16) brightness(1.1);
}

.pool-ai .pool-visual-video,
.pool-ai:hover .pool-visual-video {
  filter: grayscale(1) invert(1) contrast(1.14) brightness(1.08);
}

.pool-growth .pool-visual-media::before {
  background: #ff7658;
  opacity: .94;
  mix-blend-mode: color;
}

.pool-ai .pool-visual-media::before {
  background: #4f8cff;
  opacity: .94;
  mix-blend-mode: color;
}

.pool-growth .pool-visual-media::after,
.pool-ai .pool-visual-media::after {
  background:
    linear-gradient(180deg, rgba(242, 240, 242, .08), transparent 58%, rgba(242, 240, 242, .16) 100%),
    linear-gradient(rgba(48, 57, 73, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 57, 73, .045) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

.pool-growth .pool-info .pool-name,
.pool-ai .pool-info .pool-name,
.pool-growth:hover .pool-name,
.pool-ai:hover .pool-name {
  color: #101622;
  text-shadow: 0 2px 18px rgba(242, 240, 242, .82);
}

.pool-growth .role-preview li,
.pool-ai .role-preview li {
  background: linear-gradient(120deg, rgba(16, 22, 34, .9), rgba(32, 41, 55, .78));
  box-shadow: 0 12px 30px rgba(16, 22, 34, .14), inset 0 1px rgba(242, 240, 242, .07);
}

/* All four talent pools share one glass-mask template. */
.pool .role-preview {
  gap: .5rem;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pool .role-preview li,
.pool-growth .role-preview li,
.pool-ai .role-preview li {
  border-radius: .7rem;
  background: linear-gradient(120deg, rgba(16, 22, 34, .86), rgba(16, 22, 34, .7));
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
  box-shadow: 0 12px 30px rgba(2, 2, 3, .16), inset 0 1px rgba(242, 240, 242, .055);
}

.pool .role-preview li:hover,
.pool-growth .role-preview li:hover,
.pool-ai .role-preview li:hover {
  background: linear-gradient(120deg, rgba(32, 41, 55, .92), rgba(16, 22, 34, .78));
  box-shadow: 0 16px 36px rgba(2, 2, 3, .22), inset 3px 0 color-mix(in srgb, var(--pool-ch) 64%, transparent);
}

/* Pull back the white film exposure while preserving the warm/cool ink. */
.pool-growth .pool-visual-image,
.pool-growth .growth-network-canvas,
.pool-growth:hover .pool-visual-image {
  opacity: .92;
  filter: grayscale(1) invert(1) contrast(1.06) brightness(.9);
}

.pool-ai .pool-visual-video,
.pool-ai:hover .pool-visual-video {
  opacity: .92;
  filter: grayscale(1) invert(1) contrast(1.06) brightness(.9);
}

.pool-growth .pool-visual-media::before,
.pool-ai .pool-visual-media::before {
  opacity: .8;
}

/* Visible motion fallback when the Growth WebGL texture is unavailable. */
.pool-visual-growth:not(.is-growth-three-ready) .pool-visual-image {
  animation: growth-white-drift 8s cubic-bezier(.45, 0, .2, 1) infinite alternate;
  transform-origin: 52% 72%;
}

@keyframes growth-white-drift {
  0% {
    transform: scale(1.02) translate3d(-.8%, .6%, 0);
    filter: grayscale(1) invert(1) contrast(1.04) brightness(.86);
  }
  48% {
    transform: scale(1.065) translate3d(.5%, -.5%, 0);
    filter: grayscale(1) invert(1) contrast(1.08) brightness(.94);
  }
  100% {
    transform: scale(1.1) translate3d(1.1%, -1%, 0);
    filter: grayscale(1) invert(1) contrast(1.06) brightness(.89);
  }
}

/* ============================================================
   40 — Ink Navy palette foundation
   Component-specific refinements below inherit these semantic colours.
   ============================================================ */
html,
body {
  background-color: var(--bg-dark);
}

body {
  background:
    radial-gradient(circle at 70% 20%, rgba(41, 51, 78, .82) 0%, transparent 42%),
    linear-gradient(145deg, var(--bg-dark-secondary) 0%, var(--bg-dark) 58%, #070b14 100%);
  background-attachment: fixed;
}

main,
.section,
.site-main {
  background-color: transparent;
}

.periodic-scroll {
  background:
    radial-gradient(36rem 26rem at 4% 50%, rgba(255, 120, 92, .12), transparent 68%),
    radial-gradient(44rem 30rem at 96% 48%, rgba(111, 158, 255, .14), transparent 70%),
    linear-gradient(145deg, var(--bg-dark-secondary), var(--bg-dark) 64%, #070b14);
  box-shadow:
    inset 0 1px rgba(232, 232, 240, .08),
    0 28px 80px rgba(7, 11, 20, .28);
}

.pool .role-preview li,
.pool-growth .role-preview li,
.pool-ai .role-preview li {
  background: linear-gradient(128deg, rgba(27, 36, 56, .92), rgba(17, 24, 41, .82));
  border-color: rgba(200, 205, 220, .08);
  box-shadow:
    inset 0 1px rgba(232, 232, 240, .07),
    0 14px 34px rgba(7, 11, 20, .22);
}

.pool .role-preview li:hover,
.pool-growth .role-preview li:hover,
.pool-ai .role-preview li:hover {
  background: linear-gradient(128deg, rgba(41, 51, 78, .95), rgba(27, 36, 56, .86));
}

.site-footer {
  background: var(--bg-dark);
}

.footer-vortex::after {
  background:
    radial-gradient(circle at 50% 58%, transparent 0 9%, rgba(9, 16, 27, .12) 24%, rgba(9, 16, 27, .48) 68%, var(--bg-dark) 100%),
    linear-gradient(180deg, transparent, rgba(9, 16, 27, .3));
}

.site-footer .footer-grid,
.site-footer .footer-bottom {
  text-shadow: 0 2px 18px rgba(7, 11, 20, .9);
}

.hero-game-reveal .game-overlay.is-vector-over,
#positioning .game-overlay.is-vector-over {
  background: rgba(9, 16, 27, .72);
}

.hero-game-reveal .game-overlay.is-vector-over::before,
#positioning .game-overlay.is-vector-over::before {
  background:
    radial-gradient(circle at 50% 49%, rgba(174, 188, 255, .14), transparent 31%),
    linear-gradient(180deg, rgba(9, 16, 27, .36), rgba(7, 11, 20, .8));
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

/* ============================================================
   39 — Ink Navy atmospheric background
   Deep navy replaces absolute black while the existing pink, ice-blue and
   coral emissions remain the visual energy. Surfaces separate by luminance,
   not by adding more borders.
   ============================================================ */
html,
body {
  background-color: var(--bg-dark);
}

body {
  background:
    radial-gradient(circle at 70% 20%, rgba(41, 51, 78, .82) 0%, transparent 42%),
    linear-gradient(145deg, var(--bg-dark-secondary) 0%, var(--bg-dark) 58%, #070b14 100%);
  background-attachment: fixed;
}

main,
.section {
  background-color: transparent;
}

.positioning-lab-system,
.section-cta-banner,
.custom-formula-card,
.formula-card,
.periodic-shell,
.group-map,
.join-panel,
.insight-card {
  background:
    radial-gradient(80% 115% at 16% 0%, rgba(41, 51, 78, .32), transparent 64%),
    linear-gradient(138deg, rgba(27, 36, 56, .82), rgba(17, 24, 41, .66) 72%);
  border-color: rgba(200, 205, 220, .12);
  box-shadow:
    inset 0 1px rgba(232, 232, 240, .055),
    0 28px 76px rgba(7, 11, 20, .24);
}

.periodic-scroll {
  background:
    radial-gradient(34rem 24rem at 7% 52%, rgba(136, 124, 135, .12), transparent 68%),
    radial-gradient(42rem 28rem at 94% 48%, rgba(79, 140, 255, .13), transparent 70%),
    linear-gradient(145deg, var(--bg-dark-secondary), var(--bg-dark) 68%, #070b14);
  box-shadow:
    inset 0 1px rgba(232, 232, 240, .07),
    0 28px 80px rgba(7, 11, 20, .28);
}

.pool .role-preview li,
.pool-growth .role-preview li,
.pool-ai .role-preview li {
  background: linear-gradient(128deg, rgba(27, 36, 56, .92), rgba(17, 24, 41, .8));
  border-color: rgba(200, 205, 220, .07);
  box-shadow:
    inset 0 1px rgba(232, 232, 240, .065),
    0 14px 34px rgba(7, 11, 20, .22);
}

.pool .role-preview li:hover,
.pool-growth .role-preview li:hover,
.pool-ai .role-preview li:hover {
  background: linear-gradient(128deg, rgba(41, 51, 78, .94), rgba(27, 36, 56, .84));
}

.element-cell {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--el-ch) 38%, rgba(200, 205, 220, .15)) 0%,
      color-mix(in srgb, var(--el-ch) 20%, rgba(41, 51, 78, .52)) 44%,
      rgba(17, 24, 41, .7) 100%);
}

.site-footer {
  background: var(--bg-dark);
}

.footer-vortex::after {
  background:
    radial-gradient(circle at 50% 58%, transparent 0 9%, rgba(9, 16, 27, .12) 24%, rgba(9, 16, 27, .48) 68%, var(--bg-dark) 100%),
    linear-gradient(180deg, transparent, rgba(9, 16, 27, .3));
}

.site-footer .footer-grid,
.site-footer .footer-bottom {
  text-shadow: 0 2px 18px rgba(7, 11, 20, .9);
}

.hero-game-reveal .game-overlay.is-vector-over,
#positioning .game-overlay.is-vector-over {
  background: rgba(9, 16, 27, .72);
}

.hero-game-reveal .game-overlay.is-vector-over::before,
#positioning .game-overlay.is-vector-over::before {
  background:
    radial-gradient(circle at 50% 49%, rgba(174, 188, 255, .14), transparent 31%),
    linear-gradient(180deg, rgba(9, 16, 27, .36), rgba(7, 11, 20, .8));
}

::-webkit-scrollbar-track { background: var(--bg-dark); }

/* ============================================================
   2026-08-26 — Talent / capability / CTA refinement pass
   ============================================================ */

/* Match the large editorial treatment used by the Works heading. */
#talent .section-head {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

#talent .section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 6vw, 5.4rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.045em;
}

/* Let every title inherit the luminous frequency of its own film. */
.pool-grid > .pool:nth-child(1),
.pool-grid > .pool:nth-child(3) { --pool-title-live: #ff6647; }

.pool-grid > .pool:nth-child(2),
.pool-grid > .pool:nth-child(4) { --pool-title-live: #4f91ff; }

.pool-grid > .pool .pool-info .pool-name,
.pool-grid > .pool:hover .pool-info .pool-name,
.pool-grid > .pool .talent-flip-front,
.pool-grid > .pool .talent-flip-next {
  color: var(--pool-title-live);
  text-shadow:
    0 1px 0 rgba(242, 240, 242, .34),
    0 0 18px color-mix(in srgb, var(--pool-title-live) 34%, transparent),
    0 12px 34px rgba(2, 2, 3, .34);
}

/* At phone/tablet widths, use the unused right side for the role definition. */
@media (max-width: 720px) {
  #talent .section-head h2 {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .pool .role-preview,
  .pool-growth .role-preview,
  .pool-ai .role-preview {
    grid-template-columns: minmax(0, 1fr);
    gap: .48rem;
  }

  .pool .role-preview li,
  .pool-growth .role-preview li,
  .pool-ai .role-preview li,
  .pool .role-preview li:last-child:nth-child(odd) {
    display: grid;
    grid-template-columns: minmax(8.5rem, .92fr) minmax(0, 1.08fr);
    grid-column: auto;
    align-items: center;
    column-gap: .85rem;
    min-height: 3.35rem;
    padding: .65rem .85rem;
  }

  .pool .role-preview span,
  .pool .role-preview small {
    min-width: 0;
    margin: 0;
    line-height: 1.28;
  }

  .pool .role-preview small {
    padding-left: .85rem;
    border-left: 1px solid rgba(173, 171, 185, .18);
  }
}

@media (max-width: 430px) {
  .pool .role-preview li,
  .pool-growth .role-preview li,
  .pool-ai .role-preview li,
  .pool .role-preview li:last-child:nth-child(odd) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .2rem;
  }

  .pool .role-preview small {
    padding-left: 0;
    border-left: 0;
  }
}

/* Refractive capability field: vivid glass, still grounded in the hero palette. */
.periodic-scroll {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .08), transparent 18% 72%, rgba(255, 255, 255, .055)),
    radial-gradient(42rem 28rem at 3% 50%, rgba(255, 102, 71, .38), transparent 66%),
    radial-gradient(46rem 31rem at 94% 48%, rgba(79, 145, 255, .42), transparent 67%),
    linear-gradient(110deg, rgba(16, 22, 34, .86), rgba(32, 41, 55, .56) 52%, rgba(16, 22, 34, .82));
  -webkit-backdrop-filter: blur(28px) saturate(188%) brightness(1.12);
  backdrop-filter: blur(28px) saturate(188%) brightness(1.12);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .18),
    inset 0 -1px rgba(173, 171, 185, .18),
    inset 18px 0 58px rgba(255, 102, 71, .09),
    inset -18px 0 64px rgba(79, 145, 255, .11),
    0 32px 90px rgba(2, 2, 3, .34);
}

.periodic-scroll .element-cell {
  border-color: color-mix(in srgb, var(--el-ch) 72%, rgba(242, 240, 242, .34));
  background:
    radial-gradient(120% 86% at 8% 0%, rgba(255, 255, 255, .25), transparent 46%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--el-ch) 51%, rgba(242, 240, 242, .16)),
      color-mix(in srgb, var(--el-ch) 29%, rgba(48, 57, 73, .64)) 46%,
      rgba(16, 22, 34, .66));
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  backdrop-filter: blur(20px) saturate(190%);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, .4),
    inset -1px -1px rgba(2, 2, 3, .18),
    0 12px 26px rgba(2, 2, 3, .3),
    0 0 24px color-mix(in srgb, var(--el-ch) 22%, transparent);
}

.periodic-scroll .element-cell .el-symbol {
  color: color-mix(in srgb, var(--el-ch) 68%, #f2f0f2);
  text-shadow: 0 0 22px color-mix(in srgb, var(--el-ch) 58%, transparent);
}

.periodic-scroll .element-cell .el-no,
.periodic-scroll .element-cell .el-weight,
.periodic-scroll .element-cell .el-name,
.periodic-scroll .element-cell .el-zh {
  color: rgba(242, 240, 242, .72);
}

/* Selected capability becomes a luminous instrument readout. */
.periodic-callout .periodic-callout-inner.periodic-detail {
  background:
    radial-gradient(18rem 12rem at 12% 50%, color-mix(in srgb, var(--cal-ch) 34%, transparent), transparent 72%),
    linear-gradient(105deg, rgba(32, 41, 55, .86), rgba(2, 2, 3, .72) 62%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .16),
    inset 4px 0 color-mix(in srgb, var(--cal-ch) 84%, #f2f0f2),
    0 20px 54px rgba(2, 2, 3, .34),
    0 0 42px color-mix(in srgb, var(--cal-ch) 22%, transparent);
}

.periodic-callout .p-callout-sample {
  border: 1px solid color-mix(in srgb, var(--cal-ch) 76%, #f2f0f2);
  border-radius: .55rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--cal-ch) 30%, rgba(255, 255, 255, .12)), rgba(16, 22, 34, .78));
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, .28),
    0 0 30px color-mix(in srgb, var(--cal-ch) 38%, transparent);
}

.periodic-callout .p-ghost {
  color: color-mix(in srgb, var(--cal-ch) 22%, transparent);
  text-shadow: 0 0 34px color-mix(in srgb, var(--cal-ch) 38%, transparent);
}

.periodic-callout .p-selected-title,
.periodic-callout .p-selected-sub { color: #f2f0f2; }

.periodic-callout p.p-selected-state {
  border: 1px solid color-mix(in srgb, var(--cal-ch) 58%, rgba(242, 240, 242, .28));
  background: color-mix(in srgb, var(--cal-ch) 22%, rgba(16, 22, 34, .7));
  box-shadow: 0 0 24px color-mix(in srgb, var(--cal-ch) 30%, transparent);
}

/* Formula chips use the site's midnight glass; lab color is a small signal only. */
.custom-formula-chips .custom-chip {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(173, 171, 185, .34);
  border-radius: 999px;
  background:
    linear-gradient(125deg, rgba(64, 74, 93, .72), rgba(16, 22, 34, .9));
  color: #f2f0f2;
  padding: .5rem .85rem;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .13),
    0 10px 28px rgba(2, 2, 3, .24);
}

.custom-formula-chips .custom-chip b {
  color: color-mix(in srgb, var(--chip-ch) 72%, #f2f0f2);
  text-shadow: 0 0 14px color-mix(in srgb, var(--chip-ch) 42%, transparent);
}

/* Originkit moving-gradient language, implemented without React. */
@property --moving-ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.moving-gradient-btn,
.footer-cta .moving-gradient-btn,
.formula-bar #fb-cta.moving-gradient-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: #f2f0f2 !important;
  box-shadow: 0 16px 42px rgba(2, 2, 3, .3) !important;
  transform: translateZ(0);
}

.moving-gradient-btn::before,
.footer-cta .moving-gradient-btn::before,
.formula-bar #fb-cta.moving-gradient-btn::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -180%;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: conic-gradient(
    from var(--moving-ring-angle),
    #7da2ff 0deg,
    #ffa24d 90deg,
    #7da2ff 180deg,
    #ffa24d 270deg,
    #7da2ff 360deg
  );
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
  animation: moving-gradient-ring 4.8s linear infinite;
  transform: none;
}

.moving-gradient-btn::after,
.footer-cta .moving-gradient-btn::after,
.formula-bar #fb-cta.moving-gradient-btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, #101622, #020203 72%);
  opacity: 1;
  mix-blend-mode: normal;
  pointer-events: none;
  transform: none;
}

.moving-gradient-btn:hover,
.footer-cta .moving-gradient-btn:hover,
.formula-bar #fb-cta.moving-gradient-btn:hover {
  color: #ffa24d !important;
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 20px 52px rgba(2, 2, 3, .4),
    0 0 28px rgba(125, 162, 255, .16) !important;
}

@keyframes moving-gradient-ring {
  to { --moving-ring-angle: 360deg; }
}

/* Originkit liquid-carve language for the hero CTA. */
@property --carve-r {
  syntax: '<length>';
  inherits: false;
  initial-value: -12px;
}

.studio-explore.liquid-carve-btn {
  --carve-x: 50%;
  --carve-y: 50%;
  --carve-r: -12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: .85rem;
  background: #6d35e0;
  color: #020203;
  box-shadow: 0 16px 42px rgba(2, 2, 3, .3);
  transition:
    --carve-r 760ms cubic-bezier(.44, 0, .56, 1),
    transform 260ms var(--ease-out),
    box-shadow 260ms ease;
}

.studio-explore.liquid-carve-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: #f2f0f2;
  -webkit-mask: radial-gradient(circle at var(--carve-x) var(--carve-y), transparent 0 var(--carve-r), #000 calc(var(--carve-r) + 11px));
  mask: radial-gradient(circle at var(--carve-x) var(--carve-y), transparent 0 var(--carve-r), #000 calc(var(--carve-r) + 11px));
}

.studio-explore.liquid-carve-btn:hover {
  --carve-r: 64px;
  color: #f2f0f2;
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 22px 58px rgba(2, 2, 3, .42), 0 0 30px rgba(109, 53, 224, .24);
}

.studio-explore.liquid-carve-btn > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .moving-gradient-btn::before,
  .footer-cta .moving-gradient-btn::before,
  .formula-bar #fb-cta.moving-gradient-btn::before { animation: none; }

  .studio-explore.liquid-carve-btn { transition: none; }
}

/* ============================================================
   LAB VECTOR — immersive scientific space shooter
   ============================================================ */
.hero-game-reveal .game-stage[data-game="lab-vector"] {
  overflow: hidden;
  cursor: crosshair;
  background: #020203;
  isolation: isolate;
}

.hero-game-reveal .game-stage[data-game="lab-vector"]::before {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 72%, rgba(255, 211, 0, .045), transparent 18%),
    linear-gradient(180deg, rgba(242, 240, 242, .025), transparent 24%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-game-reveal .game-stage[data-game="lab-vector"]::after {
  z-index: 3;
  opacity: .12;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(173, 171, 185, .035) 3px 4px);
  pointer-events: none;
}

.hero-game-reveal .game-stage[data-game="lab-vector"] canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-game-reveal .game-stage[data-game="lab-vector"] + .game-overlay,
.hero-game-reveal .game-stage[data-game="lab-vector"] .game-overlay {
  z-index: 6;
}

.hero-game-reveal .game-overlay.is-vector-intro {
  gap: .7rem;
  background: radial-gradient(circle at center, rgba(32, 41, 55, .22), transparent 58%);
}

.hero-game-reveal .game-overlay.is-vector-intro .big {
  position: relative;
  color: #f2f0f2;
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
  letter-spacing: .2em;
  text-shadow: 0 0 34px rgba(173, 171, 185, .34);
}

.hero-game-reveal .game-overlay.is-vector-intro .big::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: -.58rem;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 211, 0, .75), transparent);
}

.hero-game-reveal .game-overlay p:not(.big) {
  max-width: 28rem;
  color: rgba(242, 240, 242, .68);
  font-family: var(--font-mono);
  font-size: clamp(.67rem, 1vw, .82rem);
  letter-spacing: .08em;
  line-height: 1.7;
}

.hero-game-reveal .game-overlay .again-btn {
  border: 1px solid rgba(242, 240, 242, .22);
  background: rgba(242, 240, 242, .94);
  box-shadow: 0 16px 44px rgba(2, 2, 3, .42), 0 0 28px rgba(255, 211, 0, .07);
}

.hero-game-reveal .game-score {
  letter-spacing: .18em;
}

.hero-game-reveal .game-score strong {
  color: #f2f0f2;
  text-shadow: 0 0 20px rgba(173, 171, 185, .34);
}

.hero-game-reveal .game-ambient-video {
  opacity: .12;
  filter: saturate(.85) brightness(.72);
}

.hero-game-reveal .vector-over canvas {
  animation: vector-core-hit 420ms cubic-bezier(.2, .8, .2, 1);
}

.hero-game-reveal .game-overlay.is-vector-over {
  background: radial-gradient(circle at 50% 48%, rgba(136, 124, 135, .14), transparent 36%);
  backdrop-filter: none;
}

.hero-game-reveal .game-overlay.is-vector-over .big {
  color: #f2f0f2;
  text-shadow: 0 0 26px rgba(173, 171, 185, .34);
}

.hero-game-reveal .game-stage[data-phase="boss"]::before {
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 211, 0, .09), transparent 26%),
    linear-gradient(180deg, rgba(242, 240, 242, .025), transparent 24%);
}

@keyframes vector-core-hit {
  0%, 100% { transform: scale(1); filter: none; }
  36% { transform: scale(.988); filter: brightness(1.4) saturate(.7); }
}

@media (max-width: 640px) {
  .hero-game-reveal .game-overlay.is-vector-intro .big { letter-spacing: .12em; }
  .hero-game-reveal .game-overlay p:not(.big) { max-width: 18rem; }
}

/* ---------- Hero scroll portal: game rises into focus before Hero releases ---------- */
.hero-game-reveal {
  position: relative;
  padding: 3rem 1.25rem;
  background: #020203;
}

.hero-game-reveal .game-ambient-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--game-ambient, .72);
  filter: saturate(1.08) brightness(.94);
  pointer-events: none;
}

.hero-game-reveal .game-wrap,
.hero-game-reveal .game-wrap:hover {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.hero-game-reveal .game-wrap::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #020203 0%, transparent 9%, transparent 91%, #020203 100%),
    linear-gradient(90deg, #020203 0%, transparent 6%, transparent 94%, #020203 100%);
}

.hero-game-reveal .game-score {
  position: absolute;
  z-index: 5;
  top: clamp(1rem, 2.2vw, 1.8rem);
  right: clamp(1.15rem, 3vw, 2.5rem);
  left: clamp(1.15rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  color: rgba(242, 240, 242, .78);
  text-shadow: 0 2px 18px rgba(2, 2, 3, .8);
  pointer-events: none;
}

.hero-game-reveal .game-stage,
.hero-game-reveal .game-wrap:hover .game-stage {
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 54% 38%, rgba(136, 124, 159, .72), transparent 38%),
    radial-gradient(ellipse at 78% 74%, rgba(64, 74, 112, .72), transparent 42%),
    linear-gradient(135deg, rgba(32, 41, 64, .68) 0%, rgba(16, 22, 34, .74) 72%, rgba(2, 2, 3, .8) 100%);
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.hero-game-reveal .game-stage::before {
  background:
    linear-gradient(90deg, rgba(242, 240, 242, .52), transparent) left 3.5% top 3.5% / 12% 1px no-repeat,
    linear-gradient(180deg, rgba(242, 240, 242, .52), transparent) left 3.5% top 3.5% / 1px 12% no-repeat,
    linear-gradient(270deg, rgba(255, 211, 0, .48), transparent) right 3.5% top 3.5% / 12% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 211, 0, .48), transparent) right 3.5% top 3.5% / 1px 12% no-repeat,
    linear-gradient(90deg, rgba(174, 188, 255, .42), transparent) left 3.5% bottom 3.5% / 12% 1px no-repeat,
    linear-gradient(0deg, rgba(174, 188, 255, .42), transparent) left 3.5% bottom 3.5% / 1px 12% no-repeat,
    linear-gradient(270deg, rgba(217, 181, 211, .42), transparent) right 3.5% bottom 3.5% / 12% 1px no-repeat,
    linear-gradient(0deg, rgba(217, 181, 211, .42), transparent) right 3.5% bottom 3.5% / 1px 12% no-repeat,
    radial-gradient(circle at 52% 42%, rgba(242, 240, 242, .08), transparent 32%);
  box-shadow: none;
  animation: vector-corner-breathe 4.2s ease-in-out infinite alternate;
}

@keyframes vector-corner-breathe {
  0% { opacity: .36; filter: brightness(.82); }
  55% { opacity: .72; filter: brightness(1.14); }
  100% { opacity: .5; filter: brightness(.94); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-game-reveal .game-stage::before { animation: none; opacity: .5; }
}

.hero-game-reveal .game-stage::after {
  opacity: .08;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(173, 171, 185, .04) 3px 4px);
}

.hero-game-reveal .game-overlay { background: transparent; }

@media (max-width: 560px) {
  .hero-game-reveal { padding: 2rem .65rem; }
  .hero-game-reveal .game-wrap { padding: .65rem; }
}

/* ============================================================
   47 — Originkit Label Slide Button (Vanilla port)
   Shared only by the selected navigation, formula and footer CTAs.
   ============================================================ */
.label-slide-btn.is-label-slide-ready,
.site-footer .footer-cta-actions > .label-slide-btn.is-label-slide-ready,
.formula-bar #fb-cta.label-slide-btn.is-label-slide-ready {
  --label-slide-fill: #fff;
  --label-slide-ink: #000;
  --label-slide-hover: #7813ff;
  --label-slide-hover-ink: #fff;
  --label-slide-badge: #222;
  --label-slide-badge-ink: #fff;
  --label-slide-hover-badge: #fff;
  --label-slide-hover-badge-ink: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 1.25vw, 1.15rem);
  min-width: max-content;
  min-height: 3.2rem;
  padding: .45rem .55rem .45rem 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(27, 30, 36, .16) !important;
  border-radius: 999px !important;
  background: var(--label-slide-fill) !important;
  color: var(--label-slide-ink) !important;
  box-shadow: 0 14px 34px rgba(27, 30, 36, .12) !important;
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 1vw, .86rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: .045em;
  text-decoration: none;
  transform: translateY(0) scale(1);
  transition:
    background-color .35s cubic-bezier(.16, 1, .3, 1),
    border-color .35s cubic-bezier(.16, 1, .3, 1),
    color .35s cubic-bezier(.16, 1, .3, 1),
    box-shadow .35s cubic-bezier(.16, 1, .3, 1),
    transform .2s ease !important;
  -webkit-tap-highlight-color: transparent;
}

.label-slide-btn.is-label-slide-ready::before,
.label-slide-btn.is-label-slide-ready::after {
  content: none !important;
  display: none !important;
}

.label-slide-label-shell {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.label-slide-label-spacer { visibility: hidden; }

.label-slide-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.label-slide-label--rest { transform: translateY(0); }
.label-slide-label--hover { transform: translateY(105%); }

.label-slide-badge {
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--label-slide-badge);
  color: var(--label-slide-badge-ink);
  transition:
    background-color .35s cubic-bezier(.16, 1, .3, 1),
    color .35s cubic-bezier(.16, 1, .3, 1);
}

.label-slide-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform .25s ease-in-out, opacity .25s ease-in-out;
}

.label-slide-icon--out { transform: translate(0, 0); opacity: 1; }
.label-slide-icon--in { transform: translate(-1.35rem, 1.35rem); opacity: 0; }

.label-slide-btn.is-label-slide-ready:hover,
.label-slide-btn.is-label-slide-ready:focus-visible,
.site-footer .footer-cta-actions > .label-slide-btn.is-label-slide-ready:hover,
.site-footer .footer-cta-actions > .label-slide-btn.is-label-slide-ready:focus-visible,
.formula-bar #fb-cta.label-slide-btn.is-label-slide-ready:hover,
.formula-bar #fb-cta.label-slide-btn.is-label-slide-ready:focus-visible {
  border-color: #111 !important;
  background: var(--label-slide-hover) !important;
  color: var(--label-slide-hover-ink) !important;
  box-shadow: 0 18px 42px rgba(120, 19, 255, .22) !important;
  transform: translateY(-2px) scale(1) !important;
}

.label-slide-btn.is-label-slide-ready:hover .label-slide-label--rest,
.label-slide-btn.is-label-slide-ready:focus-visible .label-slide-label--rest {
  transform: translateY(-105%);
}

.label-slide-btn.is-label-slide-ready:hover .label-slide-label--hover,
.label-slide-btn.is-label-slide-ready:focus-visible .label-slide-label--hover {
  transform: translateY(0);
}

.label-slide-btn.is-label-slide-ready:hover .label-slide-badge,
.label-slide-btn.is-label-slide-ready:focus-visible .label-slide-badge {
  background: var(--label-slide-hover-badge);
  color: var(--label-slide-hover-badge-ink);
}

.label-slide-btn.is-label-slide-ready:hover .label-slide-icon--out,
.label-slide-btn.is-label-slide-ready:focus-visible .label-slide-icon--out {
  transform: translate(1.35rem, -1.35rem);
  opacity: 0;
}

.label-slide-btn.is-label-slide-ready:hover .label-slide-icon--in,
.label-slide-btn.is-label-slide-ready:focus-visible .label-slide-icon--in {
  transform: translate(0, 0);
  opacity: 1;
}

.label-slide-btn.is-label-slide-ready:active {
  transform: translateY(0) scale(.97) !important;
}

.nk-cta-pill.label-slide-btn--compact.is-label-slide-ready {
  min-height: 2.65rem;
  padding: .3rem .38rem .3rem .9rem;
  gap: .65rem;
  box-shadow: none !important;
}

.nk-cta-pill.label-slide-btn--compact .label-slide-badge {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
}

.formula-bar #fb-cta.label-slide-btn--formula.is-label-slide-ready {
  min-height: 3rem;
  padding-left: 1.1rem;
}

@media (max-width: 640px) {
  .label-slide-btn.is-label-slide-ready,
  .site-footer .footer-cta-actions > .label-slide-btn.is-label-slide-ready,
  .formula-bar #fb-cta.label-slide-btn.is-label-slide-ready {
    min-height: 2.85rem;
    padding: .35rem .42rem .35rem .9rem;
    gap: .58rem;
    font-size: .68rem;
  }

  .label-slide-badge {
    width: 2.1rem;
    height: 2.1rem;
    flex-basis: 2.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .label-slide-btn.is-label-slide-ready,
  .label-slide-label,
  .label-slide-badge,
  .label-slide-icon {
    transition-duration: 0s !important;
  }
}

/* ============================================================
   30 — Positioning: responsive game + split-flap Lab films
   ============================================================ */
#positioning {
  padding-block: clamp(5rem, 10vw, 9rem);
  background:
    radial-gradient(70% 38% at 50% 17%, rgba(84, 91, 110, .16), transparent 72%),
    #020203;
}

#positioning .positioning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(5rem, 10vw, 9rem);
  align-items: stretch;
}

#positioning .game-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(.8rem, 1.7vw, 1.25rem);
  border-radius: clamp(1rem, 2vw, 1.6rem);
  background:
    radial-gradient(90% 120% at 80% -10%, rgba(151, 144, 157, .62), transparent 46%),
    radial-gradient(70% 90% at 8% 100%, rgba(48, 57, 73, .92), transparent 66%),
    linear-gradient(135deg, #303949 0%, #202937 46%, #101622 100%);
  box-shadow:
    0 40px 120px rgba(2, 2, 3, .46),
    0 0 72px rgba(136, 124, 135, .18),
    inset 0 1px rgba(242, 240, 242, .18);
}

#positioning .game-score {
  margin-bottom: clamp(.65rem, 1.2vw, 1rem);
  padding-inline: clamp(.2rem, .8vw, .65rem);
  color: rgba(242, 240, 242, .72);
}

#positioning .game-stage {
  width: 100%;
  min-height: min(68vh, 42rem);
  aspect-ratio: 16 / 8.25;
  border-radius: clamp(.75rem, 1.6vw, 1.25rem);
  background:
    radial-gradient(circle at 50% 42%, #404a5d 0%, #202937 48%, #101622 78%, #020203 100%);
  box-shadow:
    inset 0 0 100px rgba(2, 2, 3, .24),
    0 24px 70px rgba(2, 2, 3, .36);
}

#positioning .game-stage::after { opacity: .035; }

.positioning-network {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.positioning-network .positioning-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  gap: 1.25rem clamp(2rem, 7vw, 7rem);
  align-items: end;
  max-width: none;
}

.positioning-network .positioning-copy .eyebrow {
  margin-bottom: 1.15rem;
  grid-column: 1 / -1;
  color: rgba(173, 171, 185, .7);
  font-size: .73rem;
  letter-spacing: .24em;
}

#positioning .positioning-network .positioning-copy h2 {
  display: block;
  max-width: 15ch;
  margin: 0;
  color: #f2f0f2;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4.8vw, 5rem);
  font-weight: 520;
  line-height: .98;
  letter-spacing: -.048em;
  text-wrap: balance;
}

html[lang^="zh"] #positioning .positioning-network .positioning-copy h2 { max-width: 12em; }

.positioning-network .positioning-copy > p:not(.eyebrow) {
  max-width: 31rem;
  margin: 0;
  color: rgba(173, 171, 185, .84);
  font-size: clamp(.98rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.positioning-network .section-more {
  margin: -.75rem 0 0;
}

.lab-video-flipper {
  --flipper-accent: #97909d;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 8.8;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lab-video-flipper[data-active-lab="1"] { --flipper-accent: #d5ad70; }
.lab-video-flipper[data-active-lab="2"] { --flipper-accent: #7eaed1; }
.lab-video-flipper[data-active-lab="3"] { --flipper-accent: #8ebf82; }

.lab-video-flipper::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 2, 3, .4), transparent 9%, transparent 91%, rgba(2, 2, 3, .4)),
    linear-gradient(180deg, rgba(2, 2, 3, .04) 54%, rgba(2, 2, 3, .68) 100%);
  mix-blend-mode: normal;
}

.lab-video-flipper::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(242, 240, 242, .025) 3px 4px);
}

.lab-video-flipper-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.lab-video-sources {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.lab-video-labels {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lab-video-flipper-status {
  position: absolute;
  z-index: 4;
  left: clamp(4.2rem, 8vw, 6.5rem);
  bottom: clamp(1.4rem, 3.4vw, 2.8rem);
  display: grid;
  gap: .45rem;
  color: #f2f0f2;
  text-shadow: 0 3px 20px #020203;
}

.lab-video-flipper-status strong {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.8rem);
  font-weight: 560;
  letter-spacing: -.03em;
}

.lab-video-flipper-arrow {
  position: absolute;
  z-index: 6;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(2.7rem, 4.5vw, 3.6rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(2, 2, 3, .34);
  color: #f2f0f2;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.lab-video-flipper-arrow.is-prev { left: clamp(.65rem, 1.8vw, 1.4rem); }
.lab-video-flipper-arrow.is-next { right: clamp(.65rem, 1.8vw, 1.4rem); }

.lab-video-flipper-arrow:hover,
.lab-video-flipper-arrow:focus-visible {
  background: rgba(242, 240, 242, .88);
  color: #020203;
  transform: translateY(-50%) scale(1.06);
}

.lab-video-flipper-nav {
  position: absolute;
  z-index: 5;
  right: clamp(.75rem, 2vw, 1.35rem);
  bottom: clamp(.75rem, 2vw, 1.35rem);
  left: clamp(.75rem, 2vw, 1.35rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
}

.lab-video-flipper-nav button {
  min-width: 0;
  padding: .72rem .65rem;
  overflow: hidden;
  border: 0;
  border-radius: .65rem;
  background: rgba(16, 22, 34, .76);
  color: rgba(173, 171, 185, .74);
  font-family: var(--font-mono);
  font-size: clamp(.6rem, .85vw, .72rem);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.lab-video-flipper-nav button:hover,
.lab-video-flipper-nav button:focus-visible {
  color: #f2f0f2;
  background: rgba(48, 57, 73, .88);
}

.lab-video-flipper-nav button.is-active {
  color: #020203;
  background: var(--flipper-accent);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  #positioning .game-stage {
    min-height: 0;
    aspect-ratio: 1;
  }

  .positioning-network {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .positioning-network .positioning-copy {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .positioning-network .section-more {
    grid-column: 1;
    margin: 0;
    order: 3;
  }

  .lab-video-flipper { aspect-ratio: 4 / 5; }
  .lab-video-flipper-status {
    right: 3.8rem;
    bottom: 1.4rem;
    left: 3.8rem;
    text-align: center;
  }
}

@media (max-width: 560px) {
  #positioning { padding-block: 4.5rem; }
  #positioning .positioning-grid { gap: 4.5rem; }
  #positioning .game-wrap { padding: .65rem; }
  .positioning-network .positioning-copy h2 { font-size: clamp(2.25rem, 12vw, 3.65rem); }
  .lab-video-flipper { aspect-ratio: 3 / 4; }
  .lab-video-flipper-status strong { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-video-flipper-nav button { transition: none; }
}

/* ============================================================
   31 — Borderless positioning game + four-film Lab matrix
   ============================================================ */
#positioning .game-wrap,
#positioning .game-wrap:hover {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

#positioning .game-wrap::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #020203 0%, transparent 9%, transparent 91%, #020203 100%),
    linear-gradient(90deg, #020203 0%, transparent 6%, transparent 94%, #020203 100%);
}

#positioning .game-score {
  position: absolute;
  z-index: 5;
  top: clamp(1rem, 2.2vw, 1.8rem);
  right: clamp(1.15rem, 3vw, 2.5rem);
  left: clamp(1.15rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  color: rgba(242, 240, 242, .78);
  text-shadow: 0 2px 18px rgba(2, 2, 3, .8);
  pointer-events: none;
}

#positioning .game-stage,
#positioning .game-wrap:hover .game-stage {
  border: 0;
  border-radius: 0;
  /* 底層改成半透明，讓 .game-ambient-video（同一支 Hero 分子影片）
     的質感能從下面透出來，而不是被這層完全蓋住。 */
  background:
    radial-gradient(ellipse at 54% 38%, rgba(136, 124, 159, .72), transparent 38%),
    radial-gradient(ellipse at 78% 74%, rgba(64, 74, 112, .72), transparent 42%),
    linear-gradient(135deg, rgba(32, 41, 64, .68) 0%, rgba(16, 22, 34, .74) 72%, rgba(2, 2, 3, .8) 100%);
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}

#positioning .game-stage::before {
  background:
    radial-gradient(circle at 52% 42%, rgba(242, 240, 242, .11), transparent 32%),
    radial-gradient(circle at 35% 55%, rgba(151, 144, 157, .12), transparent 34%);
  box-shadow: none;
}

#positioning .game-stage::after {
  opacity: .08;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(173, 171, 185, .04) 3px 4px);
}

#positioning .game-overlay { background: transparent; }

.lab-film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2px, .45vw, 6px);
  width: 100%;
  overflow: hidden;
  background: #020203;
}

.lab-film {
  --film-accent: 136, 124, 135;
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #080a10;
}

.lab-film-business { --film-accent: 216, 173, 112; }
.lab-film-ai { --film-accent: 100, 200, 255; }
.lab-film-growth { --film-accent: 121, 201, 138; }

.lab-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.04) brightness(1.07);
  transform: scale(1.018);
  transition: filter 500ms ease, transform 900ms var(--ease-out);
}

.lab-film::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 22%, rgba(var(--film-accent), .16), transparent 42%),
    linear-gradient(180deg, transparent 45%, rgba(2, 2, 3, .68) 100%);
}

.lab-film::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(242, 240, 242, .025) 3px 4px);
}

.lab-film:hover video {
  filter: saturate(1.28) contrast(1.05) brightness(1.12);
  transform: scale(1.045);
}

.lab-film figcaption {
  position: absolute;
  z-index: 2;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.65rem, 1.7vw, 1.25rem);
  left: clamp(.75rem, 2vw, 1.5rem);
  color: #f2f0f2;
  font-family: var(--font-display);
  font-size: clamp(.9rem, 1.8vw, 1.45rem);
  font-weight: 560;
  letter-spacing: -.02em;
  text-shadow: 0 3px 20px rgba(2, 2, 3, .86);
}

@media (max-width: 560px) {
  #positioning .game-score {
    top: .85rem;
    right: .9rem;
    left: .9rem;
  }

  .lab-film-grid { gap: 2px; }
  .lab-film figcaption {
    right: .55rem;
    bottom: .5rem;
    left: .55rem;
    font-size: clamp(.68rem, 3.5vw, .82rem);
  }
}

/* ============================================================
   36 — Aura cursor / game hierarchy / footer vortex
   ============================================================ */
.aura-cursor {
  position: fixed;
  z-index: 9998;
  inset: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  mix-blend-mode: screen;
}

.aura-cursor.is-live { opacity: .92; }

.hero-pin-stage.is-pinning:not(.is-game-interactive) .hero-game-reveal .game-wrap {
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html.has-aura-cursor,
  html.has-aura-cursor body,
  html.has-aura-cursor a,
  html.has-aura-cursor button,
  html.has-aura-cursor [role="button"] { cursor: none !important; }
}

/* Keep the DOM score clear of the canvas boss HUD and scale both corners
   without introducing another visible panel. */
#positioning .game-score,
.hero-game-reveal .game-score {
  top: clamp(1.15rem, 2.4vw, 2rem);
  right: clamp(1.4rem, 3.5vw, 3.25rem);
  left: clamp(1.4rem, 3.5vw, 3.25rem);
  align-items: flex-start;
  gap: 2rem;
  font-size: clamp(.78rem, 1.25vw, 1.05rem);
  font-weight: 650;
  letter-spacing: .2em;
}

#positioning .game-score > span,
.hero-game-reveal .game-score > span {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  min-width: 0;
  white-space: nowrap;
}

#positioning .game-score > span:last-child,
.hero-game-reveal .game-score > span:last-child { justify-content: flex-end; text-align: right; }

#positioning .game-score strong,
.hero-game-reveal .game-score strong {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: .03em;
  text-shadow: 0 0 16px rgba(174,188,255,.65), 0 0 30px rgba(217,181,211,.22);
}

.game-overlay-visual {
  position: absolute;
  z-index: 1;
  top: 48%;
  left: 50%;
  width: clamp(13rem, 37vw, 30rem);
  max-width: 64%;
  height: auto;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0;
  filter: saturate(1.55) contrast(1.14) brightness(1.28)
          drop-shadow(0 0 26px rgba(174,188,255,.62))
          drop-shadow(0 0 60px rgba(217,181,211,.34));
  animation: core-offline-arrive 700ms cubic-bezier(.16,1,.3,1) 80ms forwards;
  pointer-events: none;
}

.game-overlay-visual[hidden] { display: none; }

.hero-game-reveal .game-overlay.is-vector-over,
#positioning .game-overlay.is-vector-over {
  z-index: 8;
  gap: clamp(.55rem, 1.4vw, 1rem);
  background: rgba(9, 16, 27, .72);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-game-reveal .game-overlay.is-vector-over::before,
#positioning .game-overlay.is-vector-over::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 50% 49%, rgba(174,188,255,.12), transparent 31%),
    linear-gradient(180deg, rgba(9, 16, 27, .38), rgba(7, 11, 20, .8));
  pointer-events: none;
}

.hero-game-reveal .game-overlay.is-vector-over .big,
#positioning .game-overlay.is-vector-over .big,
.hero-game-reveal .game-overlay.is-vector-over p:not(.big),
#positioning .game-overlay.is-vector-over p:not(.big),
.hero-game-reveal .game-overlay.is-vector-over .again-btn,
#positioning .game-overlay.is-vector-over .again-btn {
  position: relative;
  z-index: 2;
}

.hero-game-reveal .game-overlay.is-vector-over .big,
#positioning .game-overlay.is-vector-over .big {
  margin-top: clamp(8rem, 24vw, 18rem);
  color: #fff;
  font-size: clamp(2.25rem, 5.5vw, 4.7rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-shadow: 0 0 18px rgba(174,188,255,.8), 0 0 46px rgba(217,181,211,.46);
}

.hero-game-reveal .game-overlay.is-vector-over p:not(.big),
#positioning .game-overlay.is-vector-over p:not(.big) {
  color: #ffd36a;
  font-size: clamp(.88rem, 1.65vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-shadow: 0 0 16px rgba(255,211,0,.32);
}

.hero-game-reveal .game-overlay.is-vector-over .again-btn,
#positioning .game-overlay.is-vector-over .again-btn {
  font-size: clamp(.9rem, 1.45vw, 1.1rem);
  box-shadow: 0 18px 56px rgba(2,2,3,.52), 0 0 32px rgba(174,188,255,.18);
}

@keyframes core-offline-arrive {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.76) rotate(-4deg); }
  to { opacity: .98; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

/* The footer remains fully interactive; the canvas only supplies depth behind it. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-dark);
}

.footer-content-layer {
  position: relative;
  z-index: 2;
}

.footer-vortex {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -3rem;
  left: 0;
  height: min(72%, 46rem);
  min-height: 28rem;
  opacity: .9;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
}

.footer-vortex::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 58%, transparent 0 9%, rgba(9,16,27,.14) 24%, rgba(9,16,27,.5) 68%, var(--bg-dark) 100%),
    linear-gradient(180deg, transparent, rgba(9,16,27,.3));
  pointer-events: none;
}

.footer-vortex canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(1.08) contrast(1.08);
}

.site-footer .footer-grid,
.site-footer .footer-bottom {
  text-shadow: 0 2px 18px rgba(2,2,3,.9);
}

@media (max-width: 640px) {
  #positioning .game-score,
  .hero-game-reveal .game-score {
    top: .8rem;
    right: .9rem;
    left: .9rem;
    gap: .75rem;
    font-size: .66rem;
  }

  #positioning .game-score strong,
  .hero-game-reveal .game-score strong { font-size: 1.15rem; }

  .game-overlay-visual { width: min(64vw, 17rem); }
  .hero-game-reveal .game-overlay.is-vector-over .big,
  #positioning .game-overlay.is-vector-over .big { margin-top: 7rem; }
  .footer-vortex { height: 58%; min-height: 25rem; opacity: .78; }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .aura-cursor { display: none; }
  .footer-vortex { opacity: .48; }
}

/* Talent pools: one neutral type and mask system across all four films. */
.pool .pool-visual-media::before,
.pool .pool-visual-media::after,
.pool-growth .pool-visual-media::before,
.pool-ai .pool-visual-media::before {
  opacity: 0;
}

.pool .pool-info .pool-name,
.pool-growth .pool-info .pool-name,
.pool-ai .pool-info .pool-name,
.pool:hover .pool-name,
.pool-growth:hover .pool-name,
.pool-ai:hover .pool-name {
  color: #f2f0f2;
  text-shadow:
    0 1px 0 rgba(2, 2, 3, .92),
    0 5px 18px rgba(2, 2, 3, .72),
    0 16px 42px rgba(2, 2, 3, .42);
}

.talent-flip-front {
  color: #f2f0f2;
}

.pool .talent-flip-next,
.pool-growth .talent-flip-next,
.pool-ai .talent-flip-next {
  color: #adabb9;
  text-shadow: 0 4px 18px rgba(2, 2, 3, .7);
}

.pool.pool-growth .pool-visual-native::before,
.pool.pool-growth .pool-visual-native::after,
.pool.pool-ai .pool-visual-native::before,
.pool.pool-ai .pool-visual-native::after {
  opacity: 0;
}

.pool .role-preview li,
.pool-growth .role-preview li,
.pool-ai .role-preview li {
  border: 1px solid rgba(242, 240, 242, .07);
  background: linear-gradient(128deg, rgba(27, 36, 56, .92), rgba(17, 24, 41, .82));
  -webkit-backdrop-filter: blur(18px) saturate(72%);
  backdrop-filter: blur(18px) saturate(72%);
  box-shadow:
    inset 0 1px rgba(242, 240, 242, .07),
    0 14px 34px rgba(2, 2, 3, .2);
}

.pool .role-preview li:hover,
.pool-growth .role-preview li:hover,
.pool-ai .role-preview li:hover {
  background: linear-gradient(128deg, rgba(41, 51, 78, .95), rgba(27, 36, 56, .86));
  box-shadow:
    inset 0 1px rgba(242, 240, 242, .1),
    inset 3px 0 rgba(173, 171, 185, .62),
    0 18px 40px rgba(2, 2, 3, .28);
}

.pool .role-preview span,
.pool .role-preview small {
  text-shadow: none;
}

.pool .role-preview span { color: #f2f0f2; }
.pool .role-preview small { color: #adabb9; }

/* Capability table: vivid refractive glass with real depth cues. */
.periodic-scroll {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(42rem 28rem at 5% 48%, rgba(255, 93, 61, .3), transparent 67%),
    radial-gradient(46rem 30rem at 92% 48%, rgba(64, 132, 255, .32), transparent 68%),
    linear-gradient(112deg, rgba(16, 22, 34, .68), rgba(32, 41, 55, .4) 52%, rgba(16, 22, 34, .68));
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
  box-shadow:
    inset 0 1px rgba(242, 240, 242, .11),
    inset 0 -1px rgba(107, 109, 127, .22),
    0 28px 80px rgba(2, 2, 3, .28);
}

.element-cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--el-ch) 58%, rgba(242, 240, 242, .2));
  border-radius: .7rem;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--el-ch) 42%, rgba(242, 240, 242, .18)) 0%,
      color-mix(in srgb, var(--el-ch) 22%, rgba(48, 57, 73, .48)) 42%,
      rgba(16, 22, 34, .46) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(168%);
  backdrop-filter: blur(18px) saturate(168%);
  box-shadow:
    inset 1px 1px rgba(242, 240, 242, .32),
    inset -1px -1px rgba(2, 2, 3, .2),
    inset 0 -14px 24px color-mix(in srgb, var(--el-ch) 16%, transparent),
    0 12px 28px rgba(2, 2, 3, .3),
    0 0 20px color-mix(in srgb, var(--el-ch) 16%, transparent);
  transform: perspective(720px) translateZ(0);
  transform-origin: 50% 72%;
  transition:
    transform 320ms cubic-bezier(.16, 1, .3, 1),
    filter 260ms ease,
    box-shadow 320ms ease,
    border-color 260ms ease;
}

.element-cell::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 74% at 8% 0%, rgba(255, 255, 255, .38), transparent 42%),
    linear-gradient(102deg, transparent 18%, rgba(255, 255, 255, .14) 43%, transparent 62%);
  transform: translateX(-22%);
  opacity: .78;
  transition: transform 520ms var(--ease-out), opacity 260ms ease;
}

.element-cell::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto 12% -18% 12%;
  height: 42%;
  border-radius: 50%;
  pointer-events: none;
  background: var(--el-ch);
  filter: blur(18px);
  opacity: .3;
}

.element-cell:hover {
  border-color: color-mix(in srgb, var(--el-ch) 82%, #f2f0f2);
  filter: brightness(1.15) saturate(1.3);
  transform: perspective(720px) translateY(-6px) translateZ(14px) rotateX(3deg);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, .42),
    inset -1px -1px rgba(2, 2, 3, .18),
    inset 0 -16px 28px color-mix(in srgb, var(--el-ch) 24%, transparent),
    0 22px 42px rgba(2, 2, 3, .38),
    0 0 34px color-mix(in srgb, var(--el-ch) 42%, transparent);
}

.element-cell:hover::before {
  opacity: 1;
  transform: translateX(22%);
}

.element-cell.is-selected,
.element-cell[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--el-ch) 88%, #f2f0f2);
  filter: brightness(1.2) saturate(1.38);
  box-shadow:
    inset 0 0 0 1px rgba(242, 240, 242, .2),
    inset 0 -4px color-mix(in srgb, var(--el-ch) 86%, #f2f0f2),
    0 22px 48px rgba(2, 2, 3, .4),
    0 0 38px color-mix(in srgb, var(--el-ch) 48%, transparent);
}

.element-cell .el-symbol {
  color: color-mix(in srgb, var(--el-ch) 82%, #f2f0f2);
  text-shadow: 0 0 18px color-mix(in srgb, var(--el-ch) 42%, transparent);
}

.element-cell .el-no,
.element-cell .el-weight,
.element-cell .el-name,
.element-cell .el-zh {
  color: #adabb9;
}

/* Final palette: navy table field and a deeper neutral flip face. */
.periodic-scroll {
  background:
    radial-gradient(36rem 26rem at 4% 50%, rgba(255, 120, 92, .12), transparent 68%),
    radial-gradient(44rem 30rem at 96% 48%, rgba(111, 158, 255, .14), transparent 70%),
    linear-gradient(145deg, var(--bg-dark-secondary), var(--bg-dark) 64%, #070b14);
}

.pool .talent-flip-next,
.pool-growth .talent-flip-next,
.pool-ai .talent-flip-next {
  color: #545b6e;
  text-shadow: 0 4px 18px rgba(2, 2, 3, .78);
}

/* Talent headings — Originkit-inspired 3D stagger flip. */
.pool-name[data-flip-ready="true"] {
  display: flex;
  align-items: baseline;
  perspective: 1100px;
  perspective-origin: 50% 45%;
  white-space: nowrap;
}

.talent-flip-char,
.talent-flip-space {
  display: inline-block;
  flex: 0 0 auto;
}

.talent-flip-space {
  width: .28em;
}

.talent-flip-char {
  opacity: 0;
  transform: translateY(.38em) rotateX(-88deg);
  transform-origin: 50% 55%;
  transition:
    opacity 520ms var(--ease-out) calc(var(--flip-i) * 50ms),
    transform 760ms cubic-bezier(.16, 1, .3, 1) calc(var(--flip-i) * 50ms);
}

.pool-name.is-flip-in .talent-flip-char {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

.talent-flip-cube {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 680ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--flip-i) * 42ms);
  will-change: transform;
}

.talent-flip-face {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.talent-flip-front {
  position: relative;
  transform: translateZ(.44em);
}

.talent-flip-next {
  position: absolute;
  inset: 0;
  color: color-mix(in srgb, var(--pool-ch, var(--lab-white)) 74%, var(--lab-white));
  text-shadow: 0 0 26px color-mix(in srgb, var(--pool-ch, var(--neon)) 48%, transparent);
  transform: rotateX(-90deg) translateZ(.44em);
}

.pool:hover .pool-name.is-flip-in .talent-flip-cube {
  transform: rotateX(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .talent-flip-char {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .talent-flip-cube { transition: none; }
  .pool:hover .pool-name.is-flip-in .talent-flip-cube { transform: none; }
}

/* Native white-background talent films: preserve the delivered grade. */
.pool-growth .pool-visual-native .pool-visual-video,
.pool-ai .pool-visual-native .pool-visual-video,
.pool-growth:hover .pool-visual-native .pool-visual-video,
.pool-ai:hover .pool-visual-native .pool-visual-video {
  opacity: 1;
  filter: none;
}

.pool-visual-native::before,
.pool-visual-native::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pool-visual-growth:not(.is-growth-three-ready) .pool-visual-image { animation: none; }
}

/* Balance the white-film treatments against the first two talent pools. */
.pool-growth,
.pool-ai,
.pool-growth .pool-visual,
.pool-ai .pool-visual {
  background-color: #e7e5e8;
}

.pool-growth .pool-visual-image,
.pool-growth:hover .pool-visual-image {
  opacity: .88;
}

.pool-ai .pool-visual-video,
.pool-ai:hover .pool-visual-video {
  opacity: .9;
  filter: grayscale(1) invert(1) contrast(1.1) brightness(.82);
}

.pool-growth .pool-visual-media::before,
.pool-ai .pool-visual-media::before {
  opacity: .62;
}

.pool-visual-growth.is-growth-three-ready .growth-network-canvas {
  opacity: .96;
  filter: none;
}

.pool-visual-growth.is-growth-three-ready::before {
  opacity: .16;
}

.pool-visual-growth:not(.is-growth-three-ready) .pool-visual-image {
  animation-duration: 5.8s;
}

@keyframes growth-white-drift {
  0% {
    transform: scale(1.015) translate3d(-1.8%, 1%, 0);
    filter: grayscale(1) invert(1) contrast(1.08) brightness(.78);
  }
  48% {
    transform: scale(1.08) translate3d(.7%, -.9%, 0);
    filter: grayscale(1) invert(1) contrast(1.12) brightness(.84);
  }
  100% {
    transform: scale(1.13) translate3d(2.1%, -1.5%, 0);
    filter: grayscale(1) invert(1) contrast(1.1) brightness(.8);
  }
}

/* ============================================================
   41 — Porcelain light theme
   Pure white and grey-white replace every atmospheric dark surface. Media
   remains content; interface hierarchy comes from paper tone and typography.
   ============================================================ */
:root {
  --paper: #ffffff;
  --paper-soft: #f6f7f9;
  --paper-mist: #eceef2;
  --paper-deep: #dde0e6;
  --paper-line: #cfd3da;
  --paper-ink: #1b1e24;
  --paper-muted: #626873;
  --paper-faint: #8a909b;
}

html,
body {
  background-color: var(--paper);
  color: var(--paper-ink);
}

body {
  background:
    radial-gradient(circle at 78% 12%, rgba(221, 224, 230, .72), transparent 34%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 46%, var(--paper-mist) 100%);
  background-attachment: fixed;
}

main,
main:not(.is-immersive),
.section,
.site-main {
  background: transparent;
  color: var(--paper-ink);
}

.section {
  border-color: rgba(27, 30, 36, .1);
}

.section::before,
.section::after {
  background: #aeb3bc;
  box-shadow: none;
}

.section-head h2,
.section-head .sec-no,
.section-head .sec-sub,
.section-head .sec-line,
.eyebrow,
.arrow-link,
.section-more {
  color: var(--paper-ink);
}

.section-head .sec-no,
.section-head .sec-sub,
.eyebrow {
  color: var(--paper-muted);
}

.section-head .sec-line {
  background: var(--paper-line);
}

.site-header.nk-side-nav[data-state="pinned"],
.site-header.nk-side-nav.is-pinned {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(27, 30, 36, .1);
  box-shadow: 0 10px 34px rgba(27, 30, 36, .06);
}

.nk-sidenav-logo-text,
.nk-sidenav-list a,
.nk-sidenav-list a:hover,
.nk-sidenav-list a.is-active,
.nk-lang-toggle,
.nk-burger {
  color: var(--paper-ink);
}

.nk-sidenav-logo .logo-mark,
.nk-slash,
.logo-mark {
  background: #8f949d;
  box-shadow: none;
}

.nk-cta-pill {
  border-color: var(--paper-ink);
  background: var(--paper-ink);
  color: var(--paper);
}

.nk-cta-pill:hover {
  border-color: #3a3f48;
  background: #3a3f48;
  color: var(--paper);
  box-shadow: none;
}

.nk-menu-overlay,
.studio-mobile-menu {
  background: rgba(255, 255, 255, .97);
  color: var(--paper-ink);
}

.nk-menu-overlay a,
.studio-mobile-links > a:not(.studio-mobile-talk) {
  color: var(--paper-ink);
}

/* Hero becomes a bright photographic field instead of a dark exception. */
.studio-hero {
  background: var(--paper-soft);
  color: var(--paper-ink);
}

.studio-hero-video {
  opacity: .48;
  filter: grayscale(1) brightness(1.42) contrast(.68);
}

.studio-hero-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.42) 70%, rgba(255,255,255,.68) 100%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(246,247,249,.34));
  pointer-events: none;
}

.studio-wordmark,
.studio-nav-links a,
.studio-nav-links a:hover,
.studio-lang,
.studio-lang:hover,
.studio-hero-title,
.studio-hero-badge,
.hero-lede-text,
.studio-menu-toggle {
  color: var(--paper-ink);
}

.studio-hero-title.is-fluid-ready > span {
  color: var(--paper-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
  animation: none;
}

.hero-lede-text {
  text-shadow: none;
}

.hero-lede-fx {
  --hero-lede-glare: #747a84;
  --hero-lede-shadow: transparent;
}

.studio-talk,
.studio-explore,
.studio-mobile-talk {
  background: var(--paper-ink);
  color: var(--paper);
  box-shadow: 0 12px 30px rgba(27, 30, 36, .12);
}

.studio-talk:hover,
.studio-explore:hover,
.studio-mobile-talk:hover {
  background: #3d424b;
  color: var(--paper);
}

/* Light paper surfaces. */
.positioning-lab-system,
.section-cta-banner,
.custom-formula-card,
.formula-card,
.periodic-shell,
.group-map,
.join-panel,
.insight-card,
.positioning-network {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(27, 30, 36, .08);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .9),
    0 24px 70px rgba(27, 30, 36, .07);
}

#positioning .positioning-network .positioning-copy .positioning-title,
#positioning .positioning-network .positioning-copy .positioning-subtitle,
.positioning-network .positioning-copy,
.positioning-network .positioning-copy p {
  color: var(--paper-ink);
}

#positioning .positioning-network .positioning-copy .positioning-subtitle,
.positioning-network .positioning-copy p {
  color: var(--paper-muted);
}

.game-wrap,
#positioning .game-wrap,
.hero-game-reveal .game-wrap {
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(236,238,242,.88));
  box-shadow: 0 28px 80px rgba(27, 30, 36, .1);
}

/* Talent media is neutralised; information sits on translucent white cards. */
.pool,
.pool:nth-child(even),
.pool-growth,
.pool-ai,
.pool-growth .pool-visual,
.pool-ai .pool-visual {
  background-color: var(--paper-mist);
  box-shadow: 0 24px 72px rgba(27, 30, 36, .1);
}

.pool .pool-visual-video,
.pool .pool-visual-image,
.pool-growth .pool-visual-video,
.pool-growth .pool-visual-image,
.pool-ai .pool-visual-video,
.pool-ai .pool-visual-image {
  filter: grayscale(1) brightness(1.08) contrast(.82);
}

.pool .pool-info .pool-name,
.pool-growth .pool-info .pool-name,
.pool-ai .pool-info .pool-name,
.pool:hover .pool-name,
.pool-growth:hover .pool-name,
.pool-ai:hover .pool-name,
.talent-flip-front,
.pool .talent-flip-next,
.pool-growth .talent-flip-next,
.pool-ai .talent-flip-next {
  color: var(--paper-ink);
  text-shadow: 0 1px rgba(255,255,255,.72);
}

.pool .role-preview li,
.pool-growth .role-preview li,
.pool-ai .role-preview li,
.pool .role-preview li:hover,
.pool-growth .role-preview li:hover,
.pool-ai .role-preview li:hover {
  border-color: rgba(27, 30, 36, .07);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(18px) saturate(40%);
  backdrop-filter: blur(18px) saturate(40%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.9),
    0 10px 26px rgba(27, 30, 36, .07);
}

.pool .role-preview span,
.pool .role-preview small {
  color: var(--paper-ink);
  text-shadow: none;
}

.pool .role-preview small {
  color: var(--paper-muted);
}

/* Porcelain capability table. */
.periodic-scroll {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(24px) saturate(35%);
  backdrop-filter: blur(24px) saturate(35%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.95),
    0 28px 80px rgba(27, 30, 36, .08);
}

.periodic-grid,
.periodic-grid .group-label,
.periodic-grid .period-label {
  color: var(--paper-muted);
}

.element-cell,
.element-cell:hover,
.element-cell.is-selected,
.element-cell[aria-pressed="true"] {
  border: 1px solid rgba(27, 30, 36, .12);
  background: rgba(246, 247, 249, .88);
  filter: none;
  box-shadow:
    inset 0 1px rgba(255,255,255,.98),
    0 10px 24px rgba(27, 30, 36, .07);
}

.element-cell:hover,
.element-cell.is-selected,
.element-cell[aria-pressed="true"] {
  background: var(--paper-mist);
  border-color: rgba(27, 30, 36, .28);
}

.element-cell::before,
.element-cell::after {
  opacity: 0;
}

.element-cell .el-symbol,
.element-cell .el-no,
.element-cell .el-weight,
.element-cell .el-name,
.element-cell .el-zh {
  color: var(--paper-ink);
  text-shadow: none;
}

.element-cell .el-no,
.element-cell .el-weight,
.element-cell .el-name,
.element-cell .el-zh {
  color: var(--paper-muted);
}

.periodic-callout,
.periodic-callout .periodic-callout-inner,
.p-callout-sample,
.custom-formula-empty,
.custom-formula-diagram,
.formula-figure,
.formula-score,
.formula-bar {
  background: rgba(255,255,255,.9);
  color: var(--paper-ink);
  border-color: rgba(27,30,36,.1);
  box-shadow: 0 20px 56px rgba(27,30,36,.08);
}

.periodic-callout .p-selected-title,
.periodic-callout .p-selected-sub,
.periodic-callout p,
.custom-formula-card h3,
.custom-formula-card p,
.custom-formula-meta,
.custom-formula-meta p {
  color: var(--paper-ink);
}

.custom-formula-chips .custom-chip {
  border-color: rgba(27,30,36,.16);
  background: var(--paper-soft);
  color: var(--paper-ink);
}

/* Buttons use graphite motion instead of coloured neon. */
.footer-cta .moving-gradient-btn,
.formula-bar #fb-cta.moving-gradient-btn,
.btn,
.btn-primary {
  border-color: rgba(27,30,36,.18);
  background: var(--paper-ink);
  color: var(--paper);
  box-shadow: 0 14px 34px rgba(27,30,36,.12);
}

.footer-cta .moving-gradient-btn::before,
.formula-bar #fb-cta.moving-gradient-btn::before {
  background: repeating-conic-gradient(from 0deg, transparent 0 125deg, #7f858f 154deg, #d2d5db 180deg);
}

.footer-cta .moving-gradient-btn:hover,
.formula-bar #fb-cta.moving-gradient-btn:hover,
.btn:hover,
.btn-primary:hover {
  background: #3a3f48;
  color: var(--paper);
}

/* Footer is white paper with a very faint silver vortex. */
.site-footer {
  background: var(--paper-soft);
  color: var(--paper-ink);
}

.footer-vortex {
  opacity: .16;
  filter: grayscale(1);
}

.footer-vortex::after {
  background:
    radial-gradient(circle at 50% 58%, transparent 0 8%, rgba(246,247,249,.12) 22%, rgba(246,247,249,.72) 62%, var(--paper-soft) 100%),
    linear-gradient(180deg, transparent, rgba(246,247,249,.7));
}

.footer-cta h2,
.footer-cta-sub,
.site-footer p,
.site-footer a,
.site-footer .eyebrow,
.site-footer .footer-logo,
.site-footer .footer-bottom,
.site-footer .footer-group {
  color: var(--paper-ink);
  text-shadow: none;
}

.site-footer .footer-cta-sub,
.site-footer .footer-bottom,
.site-footer .footer-group,
.site-footer .footer-links a {
  color: var(--paper-muted);
}

.footer-rule {
  background: var(--paper-line);
}

::-webkit-scrollbar-track { background: var(--paper-soft); }
::-webkit-scrollbar-thumb { background: #aeb3bc; }

/* Close the immersive dark canvas: every interface layer is porcelain. */
main.is-immersive,
main#main.is-immersive {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 52%, var(--paper-mist) 100%) !important;
}

#positioning,
#works,
#talent,
#capability,
#formula,
.footer-cta,
.footer-contact,
.footer-bottom {
  background-color: transparent !important;
  color: var(--paper-ink) !important;
}

#positioning {
  background: var(--paper-soft) !important;
}

.section::before,
#positioning::before,
#works::before,
#talent::before,
#capability::before,
#formula::before {
  background: none !important;
  opacity: 0 !important;
}

.footer-cta {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%) !important;
}

.studio-hero-video {
  opacity: .42;
  filter: grayscale(1) brightness(1.23) contrast(.78);
}

.studio-hero-shade {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.24) 72%, rgba(255,255,255,.48) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(246,247,249,.2));
}

.studio-hero .hero-lede-text {
  color: #30343b !important;
  font-weight: 500;
}

.studio-hero .hero-lede-text,
.studio-hero .hero-lede-text * {
  color: #30343b !important;
  -webkit-text-fill-color: #30343b !important;
}

.studio-hero .studio-explore {
  background: var(--paper-ink) !important;
  color: var(--paper) !important;
  box-shadow: 0 14px 34px rgba(27,30,36,.14) !important;
  filter: grayscale(1) !important;
}

.studio-hero .studio-explore > svg {
  opacity: 0 !important;
}

.studio-hero .studio-explore:hover {
  background: #3a3f48 !important;
  transform: translateY(-2px);
}

.pool,
.pool:nth-child(even),
.pool-creative,
.pool-marketing,
.pool-growth,
.pool-ai {
  background: var(--paper-mist) !important;
  border-color: rgba(27,30,36,.08) !important;
}

.pool-creative .pool-name,
.pool-marketing .pool-name,
.pool-growth .pool-name,
.pool-ai .pool-name,
.pool-creative:hover .pool-name,
.pool-marketing:hover .pool-name,
.pool-growth:hover .pool-name,
.pool-ai:hover .pool-name,
.pool .talent-flip-front,
.pool .talent-flip-next {
  color: var(--paper-ink) !important;
  -webkit-text-fill-color: var(--paper-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.76) !important;
  filter: none !important;
}

.custom-formula-card,
.custom-formula-card.is-active,
.custom-formula-content,
.custom-formula-empty {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(27,30,36,.1) !important;
  color: var(--paper-ink) !important;
  box-shadow: 0 24px 64px rgba(27,30,36,.08) !important;
}

.periodic-scroll,
.periodic-grid,
.periodic-callout,
.periodic-callout-inner {
  background-color: rgba(255,255,255,.92) !important;
  color: var(--paper-ink) !important;
}

.element-cell,
.element-cell[data-lab],
.element-cell:hover,
.element-cell.is-selected,
.element-cell[aria-pressed="true"] {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(221,224,230,.9)) !important;
  border-color: rgba(27,30,36,.16) !important;
  color: var(--paper-ink) !important;
  box-shadow: inset 0 1px rgba(255,255,255,1), 0 9px 20px rgba(27,30,36,.08) !important;
}

.element-cell .el-symbol,
.element-cell[data-lab] .el-symbol {
  color: var(--paper-ink) !important;
  -webkit-text-fill-color: var(--paper-ink) !important;
}

.periodic-callout,
.periodic-callout-inner,
.periodic-detail,
.periodic-detail[data-lab] {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,238,242,.94)) !important;
  border-color: rgba(27,30,36,.12) !important;
  color: var(--paper-ink) !important;
  box-shadow: 0 20px 50px rgba(27,30,36,.08) !important;
}

.custom-formula-chips .custom-chip,
.custom-formula-chips .custom-chip[data-lab] {
  background: var(--paper-mist) !important;
  border-color: rgba(27,30,36,.16) !important;
  color: var(--paper-ink) !important;
}

.footer-cta h2,
.footer-cta p,
.footer-contact,
.footer-contact p,
.footer-contact a,
.footer-bottom,
.footer-bottom span {
  color: var(--paper-ink) !important;
}

/* Subpages share the same white/grey surface language. */
.site-header.nk-side-nav {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(27,30,36,.09) !important;
  color: var(--paper-ink) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.page-hero,
.about-lab-hero {
  background:
    radial-gradient(48% 68% at 78% 46%, rgba(207,211,218,.72), transparent 72%),
    linear-gradient(145deg, var(--paper) 0%, var(--paper-soft) 58%, var(--paper-mist) 100%) !important;
  color: var(--paper-ink) !important;
}

.page-hero::before,
.page-hero::after,
.about-lab-hero::before,
.about-lab-hero::after {
  opacity: .14 !important;
  filter: grayscale(1) !important;
}

.page-hero .page-title,
.page-hero .eyebrow,
.page-hero p,
.about-lab-hero .page-title,
.about-lab-hero .eyebrow,
.about-hero-manifesto,
.about-hero-interaction {
  color: var(--paper-ink) !important;
  text-shadow: none !important;
}

#about-robot-canvas {
  opacity: .44 !important;
  filter: grayscale(1) invert(1) contrast(1.18) !important;
}

.about-robot-aura {
  opacity: .22 !important;
  filter: grayscale(1) !important;
}

.about-hero-grid {
  opacity: .16 !important;
  filter: grayscale(1) invert(1) !important;
}

/* About hero film — full-bleed loop with a still-frame fallback. */
.about-lab-hero .about-hero-film {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: var(--paper) url('/images/about/about-talent-network-loop-poster-435251525673356.webp') center / cover no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}

.about-lab-hero .about-hero-film::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.12) 34%, transparent 62%);
  pointer-events: none;
}

.about-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .about-lab-hero .about-hero-film {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  .about-hero-video {
    object-position: 68% center;
    opacity: .72;
  }

  .about-lab-hero .about-hero-film::after {
    background: linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.08) 78%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-video { display: none; }
}

.periodic-callout .p-ghost,
.periodic-callout .p-sample-symbol,
.periodic-callout .p-sample-no,
.periodic-callout .p-sample-weight,
.periodic-callout .p-sample-name,
.periodic-callout .p-sample-zh,
.periodic-callout .p-group-name,
.periodic-callout .p-group-count,
.periodic-callout .p-selected-title,
.periodic-callout .p-selected-sub {
  color: var(--paper-ink) !important;
  -webkit-text-fill-color: var(--paper-ink) !important;
  text-shadow: none !important;
}

.periodic-callout .p-callout-sample {
  background: linear-gradient(145deg, #fff, var(--paper-mist)) !important;
  border-color: rgba(27,30,36,.18) !important;
  box-shadow: inset 0 1px #fff, 0 10px 24px rgba(27,30,36,.08) !important;
}

.periodic-callout .p-group-dot,
.periodic-callout .p-state-mark {
  background: var(--paper-ink) !important;
  color: var(--paper) !important;
  box-shadow: none !important;
}

.periodic-callout .p-selected-state {
  background: var(--paper-mist) !important;
  border-color: rgba(27,30,36,.14) !important;
  color: var(--paper-ink) !important;
  box-shadow: none !important;
}

.periodic-callout::before,
.periodic-callout::after,
.periodic-detail::before,
.periodic-detail::after {
  background: var(--paper-line) !important;
  box-shadow: none !important;
}

/* ============================================================
   42 — Clean interaction pass
   Native cursor, flat CTA/footer, reliable game input, brand titles.
   ============================================================ */
.aura-cursor {
  display: none !important;
}

html.has-aura-cursor,
html.has-aura-cursor body,
html.has-aura-cursor a,
html.has-aura-cursor button,
html.has-aura-cursor [role="button"] {
  cursor: revert !important;
}

.studio-hero .studio-explore {
  isolation: auto;
  overflow: visible;
  border: 1px solid rgba(27, 30, 36, .14) !important;
  border-radius: .75rem;
  background: #ffffff !important;
  color: var(--paper-ink) !important;
  box-shadow: 0 10px 26px rgba(27, 30, 36, .09) !important;
  filter: none !important;
}

.studio-hero .studio-explore::before {
  content: none !important;
}

.studio-hero .studio-explore > svg {
  opacity: 1 !important;
}

.studio-hero .studio-explore:hover {
  background: var(--paper-mist) !important;
  color: var(--paper-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(27, 30, 36, .12) !important;
}

.hero-game-reveal .game-wrap,
.hero-pin-stage.is-pinned-end .hero-game-reveal .game-wrap,
#positioning-game .game-stage,
#positioning-game #game-canvas {
  pointer-events: auto;
}

#positioning-game .game-stage {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.pool-grid > .pool:nth-child(1),
.pool-grid > .pool:nth-child(3) {
  --pool-title-live: #ff6647;
}

.pool-grid > .pool:nth-child(2),
.pool-grid > .pool:nth-child(4) {
  --pool-title-live: #4f91ff;
}

.pool-grid > .pool .pool-info .pool-name,
.pool-grid > .pool:hover .pool-info .pool-name,
.pool-grid > .pool .talent-flip-front,
.pool-grid > .pool .talent-flip-next {
  color: var(--pool-title-live) !important;
  -webkit-text-fill-color: var(--pool-title-live) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.74) !important;
  filter: none !important;
}

.site-footer,
.site-footer .footer-cta,
.site-footer .footer-content-layer {
  background-image: none !important;
  background-color: var(--paper-soft) !important;
}

.site-footer::before,
.site-footer::after,
.footer-cta::before,
.footer-cta::after,
.footer-vortex {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* ============================================================
   43 — White field / borderless systems
   The interface rests on paper; colour appears only as feedback.
   ============================================================ */
#positioning-game,
.hero-game-reveal {
  background: #fff !important;
}

.hero-game-reveal .game-wrap,
.hero-pin-stage.is-pinned-end .hero-game-reveal .game-wrap {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hero-game-reveal .game-ambient-video {
  opacity: 0 !important;
}

#positioning-game .game-score {
  color: #454b55 !important;
  text-shadow: none !important;
}

#positioning-game .game-score strong {
  color: #1b1e24 !important;
}

#positioning-game .game-stage,
#positioning-game .game-stage[data-game="lab-vector"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: #f7f8fa !important;
  box-shadow: none !important;
}

#positioning-game .game-stage::before,
#positioning-game .game-stage::after,
.hero-game-reveal .game-wrap::before {
  content: none !important;
  display: none !important;
}

#positioning-game .game-overlay.is-vector-intro {
  background: radial-gradient(circle at 50% 48%, rgba(174, 188, 214, .2), transparent 56%) !important;
}

#positioning-game .game-overlay.is-vector-intro .big,
#positioning-game .game-overlay.is-vector-over .big {
  color: #1b1e24 !important;
  text-shadow: none !important;
}

#positioning-game .game-overlay p:not(.big) {
  color: #626975 !important;
  text-shadow: none !important;
}

#positioning-game .game-overlay .again-btn {
  border: 1px solid rgba(27, 30, 36, .12) !important;
  background: #fff !important;
  color: #1b1e24 !important;
  box-shadow: 0 10px 28px rgba(27, 30, 36, .1) !important;
}

#positioning .positioning-network {
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#positioning .positioning-network .positioning-copy {
  padding-inline: 0;
}

#positioning .lab-film-grid {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* All four films start neutral, then reveal their delivered colour on hover. */
#talent .pool-grid > .pool {
  background-color: #eef0f3 !important;
  border: 0 !important;
  box-shadow: 0 20px 58px rgba(27, 30, 36, .07) !important;
}

#talent .pool-grid > .pool .pool-visual-video,
#talent .pool-grid > .pool .pool-visual-image,
#talent .pool-grid > .pool .growth-network-canvas {
  opacity: 1 !important;
  filter: grayscale(1) brightness(1.06) contrast(.86) !important;
  transition: filter 520ms cubic-bezier(.16, 1, .3, 1), transform 700ms cubic-bezier(.16, 1, .3, 1) !important;
}

#talent .pool-grid > .pool:hover .pool-visual-video,
#talent .pool-grid > .pool:hover .pool-visual-image,
#talent .pool-grid > .pool:hover .growth-network-canvas {
  filter: none !important;
  transform: scale(1.015);
}

#talent .pool-grid > .pool .pool-visual-media::before,
#talent .pool-grid > .pool .pool-visual-media::after {
  opacity: 0 !important;
}

#talent .pool-grid > .pool .pool-info .pool-name,
#talent .pool-grid > .pool .talent-flip-front {
  color: var(--pool-title-live) !important;
  -webkit-text-fill-color: var(--pool-title-live) !important;
}

#talent .pool-grid > .pool .talent-flip-next,
#talent .pool-grid > .pool:hover .pool-info .pool-name,
#talent .pool-grid > .pool:hover .talent-flip-front,
#talent .pool-grid > .pool:hover .talent-flip-next {
  color: #3f4650 !important;
  -webkit-text-fill-color: #3f4650 !important;
  text-shadow: 0 1px rgba(255,255,255,.82) !important;
}

/* Restore the coloured capability tiles; only the table field stays white. */
.periodic-scroll {
  background: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.periodic-scroll .element-cell,
.periodic-scroll .element-cell[data-lab] {
  border: 1px solid color-mix(in srgb, var(--el-ch) 46%, #cfd3da) !important;
  border-radius: .65rem !important;
  background:
    radial-gradient(110% 80% at 8% 0%, rgba(255,255,255,.86), transparent 48%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--el-ch) 24%, #fff),
      color-mix(in srgb, var(--el-ch) 9%, #e9ebef) 72%) !important;
  color: #1b1e24 !important;
  filter: none !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.95),
    0 8px 18px color-mix(in srgb, var(--el-ch) 11%, transparent) !important;
}

.periodic-scroll .element-cell::before {
  opacity: .55 !important;
}

.periodic-scroll .element-cell::after {
  opacity: .1 !important;
}

.periodic-scroll .element-cell:hover,
.periodic-scroll .element-cell.is-selected,
.periodic-scroll .element-cell[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--el-ch) 76%, #8d949f) !important;
  filter: saturate(1.15) brightness(1.02) !important;
  box-shadow:
    inset 0 -3px color-mix(in srgb, var(--el-ch) 70%, #fff),
    0 16px 30px color-mix(in srgb, var(--el-ch) 18%, transparent) !important;
}

.periodic-scroll .element-cell .el-symbol,
.periodic-scroll .element-cell[data-lab] .el-symbol {
  color: color-mix(in srgb, var(--el-ch) 76%, #1b1e24) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.periodic-scroll .element-cell .el-no,
.periodic-scroll .element-cell .el-weight,
.periodic-scroll .element-cell .el-name,
.periodic-scroll .element-cell .el-zh {
  color: #5f6671 !important;
}

/* 2026-08-26 — bright laboratory film.
   This final layer intentionally overrides the earlier grayscale paper pass. */
#hero .studio-hero-video {
  opacity: 1 !important;
  filter: none !important;
  object-position: 50% center;
}

#hero .studio-hero-shade {
  display: none !important;
  background: none !important;
}

.studio-hero-title {
  position: relative;
  isolation: isolate;
}

/* 2026-08-26 — CEO AI Lab brand mark rollout. */
.brand-mark-img {
  display: block;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 4px 10px rgba(123, 130, 204, .2));
}

.studio-wordmark,
.nk-sidenav-logo,
.footer-logo {
  display: inline-flex;
  align-items: center;
}

.studio-wordmark { gap: .65rem; }
.studio-brand-mark { height: 2.35rem; }
.nk-sidenav-logo { gap: .52rem; }
.nk-brand-mark { height: 2.1rem; }
.nk-sidenav-logo-text { font-weight: 700; white-space: nowrap; }
.footer-logo { gap: .7rem; }
.footer-brand-mark { height: 3.25rem; }

@media (max-width: 767px) {
  .studio-wordmark { gap: .5rem; }
  .studio-brand-mark { height: 2rem; }
  .nk-brand-mark { height: 1.9rem; }
  .footer-brand-mark { height: 2.75rem; }
}

/* The lede keeps running while hovered; all sparks share one warm yellow. */
.hero-lede-spark path { fill: currentColor !important; }
.hero-lede-spark {
  color: #ffd300 !important;
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 11px currentColor);
}

/* 2026-08-26 — one-shot Dust Text Reveal.
   Canvas particles form each line, then hand off to the real DOM text. */
.studio-hero-title[data-dust-text] {
  position: relative;
  isolation: isolate;
  color: #343852;
}

.studio-hero-title[data-dust-text] > span {
  position: relative;
  z-index: 1;
  color: #343852 !important;
  background: none !important;
  -webkit-text-fill-color: #343852 !important;
  text-shadow: none !important;
  animation: none !important;
  transition: opacity 180ms linear;
}

.studio-hero-title[data-dust-text].is-dust-mounted > span {
  opacity: 0;
}

.studio-hero-title[data-dust-text].is-dust-complete > span {
  opacity: 1;
}

.hero-dust-text-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  overflow: visible;
  pointer-events: none;
  transition: opacity 560ms cubic-bezier(.16, 1, .3, 1);
}

.studio-hero-title.is-dust-complete .hero-dust-text-canvas {
  opacity: 0;
}

/* One left-to-right mask pass for the supporting statement. */
.hero-lede-fx[data-mask-reveal] .hero-lede-text {
  animation: none !important;
  will-change: clip-path, opacity, transform;
}

.hero-lede-fx[data-mask-reveal].is-mask-mounted .hero-lede-text {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-12px);
}

.hero-lede-fx[data-mask-reveal].is-mask-revealed .hero-lede-text {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateX(0);
  transition:
    clip-path 700ms cubic-bezier(.16, 1, .3, 1),
    transform 700ms cubic-bezier(.16, 1, .3, 1),
    opacity 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .studio-hero-title[data-dust-text] > span {
    opacity: 1 !important;
    transition: none;
  }

  .hero-dust-text-canvas { display: none; }

  .hero-lede-fx[data-mask-reveal] .hero-lede-text {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }
}

/* Game-over artwork and copy occupy separate vertical zones. */
.game-overlay-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.55rem, 1.3vw, .9rem);
  text-align: center;
}

#positioning-game .game-overlay.is-vector-over {
  justify-content: flex-end !important;
  padding: clamp(1rem, 3vw, 2.25rem) !important;
  background: rgba(9, 16, 27, .78) !important;
}

#positioning-game .game-overlay.is-vector-over::before {
  background:
    radial-gradient(circle at 50% 35%, rgba(174, 188, 255, .16), transparent 30%),
    linear-gradient(180deg, rgba(9, 16, 27, .5), rgba(7, 11, 20, .9)) !important;
}

#positioning-game .game-overlay.is-vector-over .game-overlay-visual {
  top: 36%;
  width: clamp(12rem, 31vw, 25rem);
  max-width: 58%;
  max-height: 49%;
  object-fit: contain;
}

#positioning-game .game-overlay.is-vector-over .game-overlay-copy {
  width: min(92%, 42rem);
  margin: 0 auto;
  padding: clamp(.8rem, 1.7vw, 1.2rem) clamp(1rem, 3vw, 2.25rem);
  border: 0;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(9, 16, 27, .2), rgba(9, 16, 27, .68));
  box-shadow: 0 -20px 42px rgba(9, 16, 27, .18);
}

#positioning-game .game-overlay.is-vector-over .big {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 4.2rem) !important;
  line-height: 1.05;
  letter-spacing: .11em;
  text-shadow: 0 0 16px rgba(174, 188, 255, .88), 0 0 42px rgba(169, 139, 239, .52) !important;
}

#positioning-game .game-overlay.is-vector-over .game-overlay-copy > p:not(.big) {
  margin: 0;
  color: #fff !important;
  font-size: clamp(1rem, 1.8vw, 1.35rem) !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-shadow: 0 0 14px rgba(174, 188, 255, .75) !important;
}

#positioning-game .game-overlay.is-vector-over .again-btn {
  margin-top: .2rem;
}

@media (max-width: 600px) {
  #positioning-game .game-overlay.is-vector-over .game-overlay-visual {
    top: 34%;
    width: min(58vw, 15rem);
    max-height: 45%;
  }

  #positioning-game .game-overlay.is-vector-over .game-overlay-copy {
    padding: .75rem 1rem;
  }
}

/* ============================================================
   45 — Navigation / editorial About / requested foreground colours
   ============================================================ */
.formula-bar #fb-count,
.formula-bar #fb-clear {
  color: #000 !important;
}

.site-footer .footer-cta-actions > .btn:nth-child(2):not(.label-slide-btn),
.site-footer .footer-cta-actions > .btn:nth-child(2):not(.label-slide-btn):hover,
.site-footer .footer-cta-actions > .btn:nth-child(2):not(.label-slide-btn):focus-visible {
  color: #fff !important;
}

.about-narrative {
  align-items: start;
  column-gap: clamp(2rem, 6vw, 7rem);
  row-gap: clamp(3rem, 8vw, 7rem);
}

.about-story {
  display: grid;
  gap: clamp(1.1rem, 2.1vw, 1.9rem);
}

.about-story-lead {
  grid-column: 1 / 8;
}

.about-story-secondary {
  grid-column: 6 / -1;
  padding-top: clamp(2rem, 7vw, 7rem);
}

.about-narrative .about-story p,
.about-narrative .about-story .lede {
  grid-column: auto;
  max-width: 34ch;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  font-weight: 400;
  line-height: 1.82;
  letter-spacing: 0;
}

.about-narrative .about-story .lede {
  max-width: 25ch;
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.35vw, 2.55rem);
  font-weight: 520;
  line-height: 1.28;
  letter-spacing: -.025em;
}

.about-dropcap::first-letter {
  float: left;
  margin: .07em .16em 0 0;
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: 3.45em;
  font-weight: 620;
  line-height: .72;
  letter-spacing: -.06em;
}

.about-narrative .about-equation {
  grid-column: 2 / -1;
}

.about-narrative .about-closing,
.about-narrative p.about-closing:last-child {
  grid-column: 7 / -1;
  max-width: 45ch;
  color: var(--paper-muted);
}

@media (max-width: 760px) {
  .about-narrative {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 3.25rem;
  }

  .about-story-lead,
  .about-story-secondary,
  .about-narrative .about-equation,
  .about-narrative .about-closing,
  .about-narrative p.about-closing:last-child {
    grid-column: 1;
  }

  .about-story-secondary { padding-top: 0; }

  .about-narrative .about-story p,
  .about-narrative .about-story .lede,
  .about-narrative .about-closing {
    max-width: none;
  }

  .about-dropcap::first-letter {
    font-size: 3em;
  }
}

/* ============================================================
   57 — Browser review follow-up: hierarchy, framing and runtime UX
   ============================================================ */
#positioning-game .game-wrap::before {
  inset: .45rem auto auto .75rem !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  height: max-content !important;
  max-width: calc(100% - 1.5rem);
}

#capability .section-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .7rem;
}

#capability .section-head h2 {
  order: 0;
  margin: 0 !important;
}

#capability .capability-intro {
  order: 1;
  margin: 0 !important;
}

#works .works-columns {
  align-items: stretch;
  padding: clamp(.55rem, 1.2vw, 1rem);
  border: 1px solid rgba(27, 30, 36, .1);
  border-radius: clamp(1rem, 2vw, 1.75rem) !important;
  background: linear-gradient(180deg, rgba(232, 236, 243, .96), rgba(242, 244, 248, .98));
  box-shadow: 0 24px 58px rgba(27, 30, 36, .07);
}

#works .works-col {
  min-width: 0;
  padding-bottom: clamp(.15rem, .45vw, .4rem);
}

.periodic-callout .periodic-callout-inner.periodic-detail {
  border: 2px solid color-mix(in srgb, var(--cal-ch) 62%, #c7ccd5) !important;
  background:
    radial-gradient(32rem 18rem at 8% 50%, color-mix(in srgb, var(--cal-ch) 31%, transparent), transparent 72%),
    linear-gradient(120deg,
      color-mix(in srgb, var(--cal-ch) 22%, #fff),
      color-mix(in srgb, var(--cal-ch) 9%, #f5f7fa) 72%) !important;
  box-shadow:
    inset 7px 0 0 var(--cal-ch),
    0 20px 48px color-mix(in srgb, var(--cal-ch) 16%, transparent) !important;
}

.periodic-callout .periodic-detail .p-callout-sample,
.periodic-callout .periodic-detail .p-selected-state {
  border-color: color-mix(in srgb, var(--cal-ch) 64%, #c7ccd5) !important;
  background: color-mix(in srgb, var(--cal-ch) 18%, #fff) !important;
}

.periodic-callout .periodic-detail .p-ghost {
  color: color-mix(in srgb, var(--cal-ch) 72%, #fff) !important;
  opacity: .22 !important;
}


/* ============================================================
   50 — Colour talent films / transparent capability systems
   Keeps the white site field visible through the interactive UI.
   ============================================================ */
#talent .pool-grid > .pool {
  background: transparent !important;
  box-shadow: 0 18px 50px rgba(70, 75, 92, .08) !important;
}

#talent .pool-grid > .pool .pool-visual-video,
#talent .pool-grid > .pool .pool-visual-image,
#talent .pool-grid > .pool .growth-network-canvas,
#talent .pool-grid > .pool:hover .pool-visual-video,
#talent .pool-grid > .pool:hover .pool-visual-image,
#talent .pool-grid > .pool:hover .growth-network-canvas {
  filter: none !important;
  opacity: 1 !important;
}

#talent .pool-info {
  justify-content: flex-start;
  min-height: clamp(32rem, 50vw, 40rem);
  background: transparent !important;
}

#talent .pool-grid > .pool .pool-name,
#talent .pool-grid > .pool:hover .pool-name {
  color: var(--pool-title-live) !important;
  -webkit-text-fill-color: var(--pool-title-live) !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

#talent .role-preview,
#talent .pool-growth .role-preview,
#talent .pool-ai .role-preview {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  grid-auto-rows: minmax(0, 1fr);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#talent .role-preview li,
#talent .pool-growth .role-preview li,
#talent .pool-ai .role-preview li {
  min-height: 5.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 9px 28px rgba(31, 37, 51, .1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  backdrop-filter: blur(14px) saturate(118%);
}

#talent .role-preview span {
  color: #1b1e24 !important;
  font-size: clamp(1rem, 1.45vw, 1.24rem) !important;
  line-height: 1.18;
  text-shadow: none !important;
}

#talent .role-preview small {
  color: #646b79 !important;
  font-size: clamp(.78rem, 1.05vw, .94rem) !important;
  line-height: 1.3;
  text-shadow: none !important;
}

.periodic-scroll,
.periodic-grid,
.periodic-callout,
.periodic-callout-inner {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.capability-formula-live,
.capability-formula-live .custom-formula-card,
.capability-formula-live .custom-formula-card.has-selection,
.capability-formula-live .custom-formula-content,
.capability-formula-live .custom-formula-meta,
.capability-formula-live .formula-output,
.capability-formula-live .custom-formula-diagram {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.capability-formula-live .custom-formula-card.has-selection {
  padding: clamp(1.25rem, 2.5vw, 2.25rem) !important;
  -webkit-backdrop-filter: blur(18px) saturate(110%);
  backdrop-filter: blur(18px) saturate(110%);
}

.capability-formula-live .custom-formula-title {
  color: #1b1e24 !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.capability-formula-live .formula-compact-line {
  color: #4d5360 !important;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  font-weight: 600;
}

.capability-formula-live .custom-formula-chips .custom-chip,
.formula-bar .fb-chip {
  border: 1px solid color-mix(in srgb, var(--chip-ch, #7b82cc) 46%, #cfd3df) !important;
  border-radius: .72rem !important;
  background:
    radial-gradient(120% 95% at 8% 0%, rgba(255,255,255,.94), transparent 54%),
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(226,229,239,.52)) !important;
  color: #252a35 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 10px 26px rgba(61,67,88,.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}

.formula-bar .fb-chip {
  --chip-ch: #7b82cc;
  min-height: 2.8rem;
  padding-inline: .9rem .5rem;
}

.formula-bar .fb-chip > span,
.capability-formula-live .custom-chip b {
  color: var(--chip-ch, #6f77c5) !important;
  font-size: 1.08em;
  font-weight: 750;
}

.custom-molecule-svg .formula-grid-bg {
  fill: transparent !important;
}

.custom-molecule-svg .bond-under {
  stroke: rgba(111, 119, 197, .16) !important;
  stroke-width: 9 !important;
}

.custom-molecule-svg .bond,
.custom-molecule-svg .custom-orbit-bond {
  stroke: #767ed0 !important;
  stroke-width: 2.5 !important;
  stroke-opacity: .82 !important;
  stroke-dasharray: none !important;
}

.custom-molecule-svg .custom-orbit-bond {
  stroke-width: 1.35 !important;
  stroke-opacity: .34 !important;
}

.custom-molecule-svg .node-shell {
  fill: rgba(248,249,255,.9) !important;
  stroke-width: 2.2 !important;
  filter: drop-shadow(0 9px 16px rgba(60,67,92,.16));
}

.custom-molecule-svg .product-shell {
  fill: rgba(238,240,251,.9) !important;
  stroke: #8e7edc !important;
  stroke-width: 2.4 !important;
  filter: drop-shadow(0 12px 22px rgba(111,101,178,.2));
}

.custom-molecule-svg .node-halo,
.custom-molecule-svg .product-glow {
  opacity: .2 !important;
}

.custom-molecule-svg .f-orbit {
  stroke: rgba(123,130,204,.28) !important;
}

.about-section-head {
  grid-template-columns: 1fr !important;
}

.about-section-head h2 {
  font-size: clamp(2rem, 4vw, 4rem) !important;
}

.director-specimen .director-signals i {
  font-style: normal;
}

@media (max-width: 720px) {
  #talent .pool-info,
  #talent .pool-grid > .pool {
    min-height: 43rem !important;
  }

  #talent .role-preview li {
    min-height: 4.45rem;
  }

  #talent .role-preview span { font-size: 1rem !important; }
  #talent .role-preview small { font-size: .78rem !important; }

  .capability-formula-live .custom-formula-title {
    font-size: clamp(2rem, 10vw, 3.2rem) !important;
  }
}

/* ============================================================
   46 — White subpages / refreshed Lab film labels
   About, Insights and Join follow the homepage's paper field without
   leaking these overrides into the media-led homepage sections.
   ============================================================ */
html[data-page="about"],
html[data-page="insights"],
html[data-page="join"],
html[data-page="about"] body,
html[data-page="insights"] body,
html[data-page="join"] body {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--paper-ink);
}

html[data-page="about"] .nk-bg,
html[data-page="insights"] .nk-bg,
html[data-page="join"] .nk-bg,
html[data-page="about"] .lab-grain,
html[data-page="insights"] .lab-grain,
html[data-page="join"] .lab-grain,
html[data-page="about"] .lab-scanlines,
html[data-page="insights"] .lab-scanlines,
html[data-page="join"] .lab-scanlines {
  display: none !important;
}

html[data-page="about"] main,
html[data-page="insights"] main,
html[data-page="join"] main,
html[data-page="about"] .section,
html[data-page="insights"] .section,
html[data-page="join"] .section,
html[data-page="about"] .page-hero,
html[data-page="insights"] .page-hero,
html[data-page="join"] .page-hero {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--paper-ink) !important;
}

html[data-page="about"] .page-hero::before,
html[data-page="about"] .page-hero::after,
html[data-page="insights"] .page-hero::before,
html[data-page="insights"] .page-hero::after,
html[data-page="join"] .page-hero::before,
html[data-page="join"] .page-hero::after {
  opacity: 0 !important;
}

html[data-page="about"] .about-narrative-section,
html[data-page="about"] .about-director-section,
html[data-page="insights"] .section-last,
html[data-page="join"] .section-last {
  box-shadow: none !important;
}

html[data-page="insights"] .insight-card {
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 20px 58px rgba(27, 30, 36, .08) !important;
}

html[data-page="insights"] .insight-cap,
html[data-page="insights"] .insights-note {
  color: var(--paper-muted) !important;
}

html[data-page="join"] .apply-form,
html[data-page="join"] .formula-note {
  background: #fff !important;
  border: 0 !important;
  color: var(--paper-ink) !important;
  box-shadow: 0 24px 68px rgba(27, 30, 36, .08) !important;
}

html[data-page="join"] .form-field label,
html[data-page="join"] .consent-row,
html[data-page="join"] .join-alt,
html[data-page="join"] .join-fallback {
  color: var(--paper-muted) !important;
}

html[data-page="join"] .form-field input,
html[data-page="join"] .form-field select,
html[data-page="join"] .form-field textarea {
  background-color: var(--paper-soft) !important;
  border-color: transparent !important;
  color: var(--paper-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(27, 30, 36, .055);
}

html[data-page="join"] .form-field input:focus,
html[data-page="join"] .form-field select:focus,
html[data-page="join"] .form-field textarea:focus {
  background-color: #fff !important;
  box-shadow: inset 0 0 0 2px rgba(123, 130, 204, .5), 0 12px 30px rgba(27, 30, 36, .08);
}

#positioning .lab-film {
  border-radius: clamp(.55rem, 1vw, .9rem);
}

#positioning .lab-film figcaption {
  right: auto;
  bottom: clamp(.8rem, 1.8vw, 1.35rem);
  left: clamp(.8rem, 1.8vw, 1.35rem);
  display: inline-flex;
  align-items: center;
  min-height: 2.55rem;
  max-width: calc(100% - clamp(1.6rem, 3.6vw, 2.7rem));
  padding: .58rem .88rem;
  border-radius: 999px;
  background: rgba(5, 7, 10, .72);
  color: #fff;
  font-size: clamp(.82rem, 1.45vw, 1.12rem);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .68);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 560px) {
  #positioning .lab-film figcaption {
    bottom: .55rem;
    left: .55rem;
    min-height: 2rem;
    max-width: calc(100% - 1.1rem);
    padding: .42rem .62rem;
    font-size: clamp(.66rem, 3vw, .78rem);
  }
}

/* ============================================================
   48 — Logo-lavender controls + diagonal editorial About
   A quiet white field carries oversized classical initials while the
   readable copy stays modern, dark and deliberately offset.
   ============================================================ */
:root {
  --logo-lavender: #9c8ee7;
  --logo-lavender-soft: #c8c0ff;
  --logo-ice: #b9c8ff;
  --logo-ink: #252238;
}

.label-slide-btn.is-label-slide-ready,
.site-footer .footer-cta-actions > .label-slide-btn.is-label-slide-ready,
.formula-bar #fb-cta.label-slide-btn.is-label-slide-ready {
  --label-slide-hover: #b3a8f2;
  --label-slide-hover-ink: #211e34;
  --label-slide-badge: #9688dc;
  --label-slide-badge-ink: #fff;
  --label-slide-hover-badge: #fff;
  --label-slide-hover-badge-ink: #554b91;
  justify-content: center;
  padding-inline: 1.05rem !important;
  border-color: rgba(136, 119, 220, .3) !important;
  box-shadow: 0 14px 36px rgba(128, 115, 190, .16) !important;
}

.label-slide-btn.is-label-slide-ready > .label-slide-badge,
.label-slide-btn.is-label-slide-ready > .label-slide-label-shell {
  transform: translateX(-.12rem);
}

.label-slide-badge {
  background: linear-gradient(145deg, var(--logo-ice), var(--logo-lavender)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .72), 0 5px 16px rgba(118, 103, 186, .22);
}

.label-slide-btn.is-label-slide-ready:hover,
.label-slide-btn.is-label-slide-ready:focus-visible,
.site-footer .footer-cta-actions > .label-slide-btn.is-label-slide-ready:hover,
.site-footer .footer-cta-actions > .label-slide-btn.is-label-slide-ready:focus-visible,
.formula-bar #fb-cta.label-slide-btn.is-label-slide-ready:hover,
.formula-bar #fb-cta.label-slide-btn.is-label-slide-ready:focus-visible {
  border-color: rgba(126, 108, 211, .5) !important;
  background: linear-gradient(135deg, #eceaff 0%, #cfc8ff 54%, #b6a9f3 100%) !important;
  color: var(--logo-ink) !important;
  box-shadow: 0 17px 42px rgba(128, 111, 207, .24) !important;
}

.label-slide-btn.is-label-slide-ready:hover .label-slide-badge,
.label-slide-btn.is-label-slide-ready:focus-visible .label-slide-badge {
  background: #fff !important;
}

.nk-cta-pill.label-slide-btn--compact.is-label-slide-ready {
  padding-inline: .72rem !important;
}

.formula-bar #fb-cta.label-slide-btn--formula.is-label-slide-ready {
  padding-inline: 1.05rem !important;
}

html[data-page="about"] .about-narrative-section {
  padding-block: clamp(4.5rem, 10vw, 8rem) !important;
  background: #fff !important;
}

.about-narrative {
  position: relative;
  isolation: isolate;
  min-height: clamp(38rem, 62vw, 52rem);
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1rem, 3vw, 3rem);
  overflow: hidden;
  column-gap: clamp(2rem, 7vw, 8rem);
  row-gap: clamp(2.5rem, 6vw, 5rem);
}

.about-narrative::before,
.about-narrative::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: .72;
  letter-spacing: -.08em;
}

.about-narrative::before {
  content: "C";
  top: .18em;
  left: -.02em;
  color: rgba(142, 126, 220, .22);
  font-size: clamp(11rem, 25vw, 25rem);
}

.about-narrative::after {
  content: "LAB";
  right: .02em;
  bottom: .05em;
  color: rgba(119, 143, 224, .14);
  font-family: var(--font-display);
  font-size: clamp(6.5rem, 16vw, 16rem);
}

.about-narrative > * {
  position: relative;
  z-index: 1;
}

.about-story-lead {
  grid-column: 2 / 8;
  align-self: start;
}

.about-story-secondary {
  grid-column: 7 / -1;
  align-self: end;
  padding: clamp(2rem, 4vw, 4rem) 0 0 clamp(1.5rem, 3vw, 3.25rem);
  border-left: 1px solid rgba(142, 126, 220, .5);
}

.about-narrative .about-story p,
.about-narrative .about-story .lede,
.about-narrative .about-closing,
.about-narrative p.about-closing:last-child {
  color: #555b69 !important;
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.82;
}

.about-narrative .about-story .lede {
  color: #191c23 !important;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.15vw, 2.35rem);
  font-weight: 560;
  line-height: 1.3;
}

.about-narrative .about-dropcap::first-letter {
  float: none;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.about-narrative .about-story p:first-child::first-letter {
  float: left;
  margin: .02em .16em 0 0;
  color: var(--logo-lavender);
  font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
  font-size: 4.7em;
  font-weight: 700;
  line-height: .72;
  letter-spacing: -.08em;
}

.about-narrative .about-equation {
  grid-column: 3 / 11;
  color: #4f4a68 !important;
}

.about-narrative .about-equation i {
  color: rgba(93, 80, 160, .42) !important;
}

.about-narrative .about-closing,
.about-narrative p.about-closing:last-child {
  grid-column: 7 / -1;
  max-width: 34ch;
  padding-right: clamp(2rem, 7vw, 8rem);
}

html[lang^="en"] .about-narrative::before { content: "C"; }
html[lang^="en"] .about-narrative::after { content: "LAB"; }

.director-specimen .director-photo,
.director-specimen .director-photo.is-tilting {
  background: #fff !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.director-specimen .director-photo::before,
.director-specimen .director-photo::after,
.director-specimen .director-grid,
.director-specimen .director-scan {
  display: none !important;
  content: none !important;
}

.director-specimen .director-photo img,
.director-specimen .director-photo.is-tilting img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: none !important;
  transform: none !important;
}

.director-coordinate,
.director-coordinate.top,
.director-coordinate.bottom {
  color: #504967 !important;
  background: rgba(255, 255, 255, .88);
  padding: .32rem .48rem;
  border-radius: .2rem;
  text-shadow: none !important;
}

.director-specimen .director-meta {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 4vw, 4rem) clamp(5rem, 8vw, 8rem) !important;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #f8f7ff 54%, #f1f4ff 100%);
}

.director-specimen .director-meta::before,
.director-specimen .director-meta::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: .72;
}

.director-specimen .director-meta::before {
  content: "M";
  top: .08em;
  left: -.04em;
  color: rgba(142, 126, 220, .21);
  font-size: clamp(10rem, 22vw, 22rem);
}

.director-specimen .director-meta::after {
  content: "P";
  right: -.02em;
  bottom: -.02em;
  color: rgba(118, 145, 225, .16);
  font-size: clamp(10rem, 22vw, 22rem);
}

.director-specimen .director-meta > * {
  position: relative;
  z-index: 1;
}

.director-specimen .director-meta .d-title {
  color: #7165b2 !important;
  font-weight: 650;
}

.director-specimen .director-meta h2 {
  color: #171a22 !important;
  text-shadow: none !important;
}

.director-specimen .director-meta .d-quote {
  max-width: 39ch;
  color: #454b59 !important;
  font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
  font-size: clamp(1rem, 1.3vw, 1.24rem);
  font-weight: 400;
  line-height: 1.9;
  text-shadow: none !important;
}

.director-specimen .director-signals {
  background: #181b22 !important;
  color: #f5f4ff !important;
}

.site-footer {
  padding-block: 0 clamp(1.4rem, 3vw, 2.5rem) !important;
}

.site-footer .footer-cta {
  padding-block: clamp(3.25rem, 6vw, 5.25rem) !important;
}

.site-footer .footer-cta .eyebrow { margin-bottom: 1.1rem; }
.site-footer .footer-cta h2 { margin-bottom: 1rem; }
.site-footer .footer-cta-sub { margin-bottom: 1.75rem; }

.site-footer .footer-grid {
  padding-top: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.site-footer .footer-bottom {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 760px) {
  .about-narrative {
    min-height: 0;
    padding: 4.5rem .25rem 5.5rem;
    row-gap: 3.5rem;
  }

  .about-narrative::before {
    top: .12em;
    left: -.08em;
    font-size: clamp(10rem, 45vw, 17rem);
  }

  .about-narrative::after {
    right: 0;
    bottom: .04em;
    font-size: clamp(6rem, 28vw, 10rem);
  }

  .about-story-lead,
  .about-story-secondary,
  .about-narrative .about-equation,
  .about-narrative .about-closing,
  .about-narrative p.about-closing:last-child {
    grid-column: 1;
  }

  .about-story-secondary {
    padding: 1.5rem 0 0 1.25rem;
  }

  .about-narrative .about-closing,
  .about-narrative p.about-closing:last-child {
    max-width: 29ch;
    margin-left: auto;
    padding-right: 1.25rem;
  }

  .director-specimen .director-meta {
    min-height: 34rem;
    padding: 4.25rem 1.25rem 5.5rem !important;
  }

  .director-specimen .director-meta::before,
  .director-specimen .director-meta::after {
    font-size: clamp(9rem, 42vw, 15rem);
  }

  .director-specimen .d-quote {
    display: block !important;
    font-size: .98rem !important;
    line-height: 1.75 !important;
  }

  .site-footer .footer-cta {
    padding-block: 2.8rem !important;
  }

  .site-footer .footer-grid {
    padding-top: 1.75rem;
    margin-bottom: 1.25rem;
  }
}

/* ============================================================
   59 — Works: one large-radius portfolio field
   ============================================================ */
#works .works-columns {
  gap: clamp(.65rem, 1.1vw, 1rem) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(27, 30, 36, .1) !important;
  border-radius: clamp(1.75rem, 3.2vw, 3.25rem) !important;
  background: #e8ebf1 !important;
  box-shadow: 0 22px 54px rgba(27, 30, 36, .08) !important;
  isolation: isolate;
  contain: paint;
}

#works .works-col {
  gap: clamp(.65rem, 1.1vw, 1rem) !important;
  padding-bottom: 0 !important;
}

#works .work-card {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#works .work-cover,
#works .work-still,
#works .work-preview {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#works .work-still,
#works .work-preview {
  clip-path: none !important;
}

/* Keep the still image visible until an in-view preview has decoded a frame.
   This also prevents off-screen autoplay downloads from competing with Hero. */
#works .work-preview {
  opacity: 0 !important;
  transition: opacity 320ms ease !important;
}

#works .work-preview.is-preview-ready {
  opacity: 1 !important;
}

@media (max-width: 720px) {
  #works .works-columns {
    border-radius: 1.5rem !important;
  }
}

/* ============================================================
   49 — About narrative rhythm / portrait crop refinement
   Keeps the editorial initials while restoring useful line length,
   stronger paper contrast and the logo's cool lavender spectrum.
   ============================================================ */
@media (min-width: 761px) {
  .about-story-lead {
    grid-column: 1 / -1;
  }

  .about-story-secondary {
    grid-column: 3 / -1;
    padding-top: clamp(1.25rem, 4vw, 4rem);
    padding-left: clamp(1rem, 2vw, 2.25rem);
  }

  .about-narrative .about-story p,
  .about-narrative .about-story .lede {
    max-width: 46ch;
    font-size: clamp(1.12rem, 1.45vw, 1.38rem);
    line-height: 1.72;
  }

  .about-narrative .about-story .lede {
    max-width: none;
    font-size: clamp(1.45rem, 2vw, 2rem);
    white-space: nowrap;
  }

  .about-story-secondary p:first-child {
    max-width: none;
    white-space: nowrap;
  }
}

.about-narrative .about-closing,
.about-narrative p.about-closing:last-child {
  max-width: 43ch;
  padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.1rem, 2vw, 1.6rem);
  border-left: 4px solid var(--logo-lavender);
  background: linear-gradient(90deg, rgba(142, 126, 220, .12), rgba(119, 143, 224, .035) 72%, transparent);
  color: #272b36 !important;
  font-size: clamp(1.18rem, 1.58vw, 1.5rem) !important;
  font-weight: 620;
  line-height: 1.58;
}

.director-specimen .director-photo {
  overflow: hidden !important;
}

.director-specimen .director-photo img,
.director-specimen .director-photo.is-tilting img {
  object-fit: cover !important;
  object-position: center 8% !important;
  transform: scale(1.1) !important;
  transform-origin: center 22% !important;
}

.director-specimen .director-signals {
  gap: 1px;
  background: rgba(142, 126, 220, .28) !important;
  box-shadow: 0 14px 34px rgba(100, 91, 163, .12);
}

.director-specimen .director-signals span {
  background: linear-gradient(135deg, #fbfaff, #eeeffb) !important;
  color: #40395f !important;
  font-size: clamp(.72rem, .82vw, .86rem);
  font-weight: 600;
  letter-spacing: .045em;
}

.director-specimen .director-signals b {
  color: #8e7edc !important;
  font-weight: 750;
}

@media (max-width: 760px) {
  .about-narrative .about-story p,
  .about-narrative .about-story .lede {
    font-size: clamp(1.08rem, 4.8vw, 1.3rem);
    line-height: 1.72;
  }

  .about-narrative .about-story .lede {
    font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  }

  .about-narrative .about-closing,
  .about-narrative p.about-closing:last-child {
    max-width: none;
    margin-left: 0;
    padding: 1rem 1.05rem;
  }

  .director-specimen .director-photo img,
  .director-specimen .director-photo.is-tilting img {
    object-position: center 6% !important;
    transform: scale(1.14) !important;
  }
}

/* ============================================================
   58 — About robot clarity + clean narrative lead
   ============================================================ */
html[data-page="about"] #about-robot-canvas {
  opacity: .9 !important;
  filter: contrast(1.16) saturate(.92) !important;
}

.about-narrative .about-story p:first-child::first-letter,
.about-narrative .about-dropcap::first-letter {
  float: none !important;
  margin: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* ============================================================
   59 — LAB VECTOR minimal pixel interface
   ============================================================ */
#positioning-game .game-score > span {
  min-width: 0;
  min-height: 0;
  padding: .45rem .6rem !important;
  align-items: center !important;
  color: #172036 !important;
  background: #EEF3F9 !important;
  border: 2px solid #172036 !important;
  box-shadow: 3px 3px 0 #3478F6 !important;
}

#positioning-game .game-score strong {
  min-width: 2ch;
  padding: 0 0 0 .35rem !important;
  color: #172036 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#positioning-game .game-stage {
  background: #EEF3F9 !important;
  border: 3px solid #172036 !important;
  box-shadow: 6px 6px 0 #3478F6 !important;
}

#positioning-game .game-overlay.is-vector-over .game-overlay-copy {
  position: relative;
  z-index: 2;
  margin: auto;
  padding: 1rem 1.25rem;
  background: #EEF3F9;
  border: 3px solid #172036;
  box-shadow: 5px 5px 0 #EF476F;
}

#positioning-game .game-overlay.is-vector-over::before {
  display: none !important;
}

@media (max-width: 600px) {
  #positioning-game .game-score > span {
    padding: .35rem .45rem !important;
  }
}

/* ============================================================
   60 — LAB VECTOR HUD review
   ============================================================ */
#positioning-game .game-wrap::before {
  content: none !important;
  display: none !important;
}

#positioning-game .game-score {
  position: absolute !important;
  z-index: 8 !important;
  top: clamp(1.1rem, 2.4vw, 1.8rem) !important;
  right: clamp(1.15rem, 3vw, 2.5rem) !important;
  left: clamp(1.15rem, 3vw, 2.5rem) !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box;
  overflow: visible !important;
  pointer-events: none;
}

#positioning-game .game-score > span {
  position: relative;
  flex: 0 0 auto;
  max-width: calc(50% - .75rem);
  min-height: 3rem;
  padding: .62rem .8rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem;
  overflow: visible !important;
  border: 3px solid #101725 !important;
  border-radius: 0 !important;
  background: #eef3f9 !important;
  color: #101725 !important;
  box-shadow: 5px 5px 0 #3478f6 !important;
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  text-shadow: none !important;
  image-rendering: pixelated;
}

#positioning-game .game-score > span:last-child {
  margin-left: auto;
}

#positioning-game .game-score strong {
  min-width: 2.4ch;
  padding: 0 !important;
  color: #101725 !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: right;
  text-shadow: none !important;
}

#positioning-game .game-overlay.is-vector-over .big,
#positioning-game .game-overlay.is-vector-over .game-overlay-copy > p:not(.big) {
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

@media (max-width: 600px) {
  #positioning-game .game-score {
    right: .75rem !important;
    left: .75rem !important;
  }

  #positioning-game .game-score > span {
    min-height: 2.5rem;
    padding: .48rem .55rem !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #3478f6 !important;
    font-size: .65rem !important;
    letter-spacing: .12em !important;
  }

  #positioning-game .game-score strong {
    font-size: 1.05rem !important;
  }
}

/* ============================================================
   61 — Wide-screen game centering + complete portfolio corners
   ============================================================ */
#positioning-game.hero-game-reveal {
  width: 100%;
  padding-inline: clamp(1rem, 3vw, 3rem) !important;
  display: flex !important;
  justify-content: center !important;
  box-sizing: border-box;
}

#positioning-game.hero-game-reveal > .game-wrap {
  flex: 0 1 90rem;
  width: min(100%, 90rem) !important;
  max-width: 90rem !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

#works .works-columns {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
}

#works .works-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: clamp(.65rem, 1.1vw, 1rem);
}

#works .works-row > .work-card {
  flex: var(--work-aspect, 1) 1 0;
  min-width: 0;
}

#works .works-row .work-cover {
  width: 100%;
  height: auto !important;
}

@media (max-width: 720px) {
  #positioning-game.hero-game-reveal {
    padding-inline: .65rem !important;
  }
}

/* ============================================================
   62 — About hero robot restoration + Director signature
   ============================================================ */
html[data-page="about"] .about-robot-stage {
  top: 4%;
  right: -9vw;
  width: min(61vw, 880px);
  height: 96%;
  overflow: visible;
  opacity: 1 !important;
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-page="about"] .about-robot-stage::before {
  inset: 8% 2% 4% 8%;
  background: radial-gradient(ellipse at 45% 48%, rgba(86, 125, 240, .18), transparent 66%);
  filter: blur(34px);
}

html[data-page="about"] .about-robot-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 -1px;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(247, 248, 250, .72) 34%, transparent 100%);
}

.about-robot-figure {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center right;
  filter: drop-shadow(0 24px 54px rgba(52, 88, 180, .2));
  transform: translateZ(0);
}

html[data-page="about"] #about-robot-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block !important;
  opacity: 0 !important;
  filter: none !important;
  transform: translateZ(0);
  transition: opacity 520ms ease;
}

.about-robot-fallback {
  transition: opacity 520ms ease, filter 520ms ease;
}

html[data-page="about"] .about-robot-stage.is-particle-ready #about-robot-canvas {
  opacity: 1 !important;
}

html[data-page="about"] .about-robot-stage.is-particle-ready .about-robot-fallback {
  opacity: 0;
  filter: blur(2px) drop-shadow(0 24px 54px rgba(52, 88, 180, .14));
}

@media (prefers-reduced-motion: reduce) {
  html[data-page="about"] #about-robot-canvas,
  .about-robot-fallback {
    transition: none;
  }
}

.director-specimen .director-meta::before {
  content: "Monster";
  top: .12em;
  left: -.06em;
  font-family: var(--font-display);
  font-size: clamp(5.2rem, 11vw, 11.5rem);
  font-weight: 650;
  letter-spacing: -.08em;
  line-height: .75;
  white-space: nowrap;
}

.director-specimen .director-meta::after {
  content: "PaPa";
  right: -.04em;
  bottom: -.04em;
  font-family: var(--font-display);
  font-size: clamp(6rem, 13vw, 13rem);
  font-weight: 650;
  letter-spacing: -.08em;
  line-height: .72;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  html[data-page="about"] .about-robot-stage {
    top: 29%;
    right: -18%;
    width: 112%;
    height: 71%;
  }

  html[data-page="about"] .about-robot-stage::after {
    inset: -1px 0 auto;
    width: 100%;
    height: 24%;
    background: linear-gradient(180deg, var(--paper) 0%, rgba(247, 248, 250, .66) 35%, transparent 100%);
  }
}

@media (max-width: 560px) {
  html[data-page="about"] .about-robot-stage {
    top: 33%;
    right: -27%;
    width: 126%;
    height: 67%;
  }

  .director-specimen .director-meta::before {
    font-size: clamp(4.8rem, 25vw, 8rem);
  }

  .director-specimen .director-meta::after {
    font-size: clamp(5.4rem, 29vw, 9rem);
  }
}

/* ============================================================
   63 — Feedback pass: image-only works + editorial Insights
   ============================================================ */
#works .work-card > figure {
  margin: 0;
}

/* Do not paint a stale still while the current Hero film is decoding. */
.studio-hero-video {
  opacity: 0 !important;
  transition: opacity 220ms ease;
}

.studio-hero-video.is-frame-ready {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .studio-hero-video { transition: none; }
}

#works .work-card,
#works .work-cover {
  overflow: hidden;
}

html[data-page="insights"] .page-hero {
  min-height: clamp(240px, 34svh, 380px) !important;
}

html[data-page="insights"] .page-hero > .container {
  min-height: inherit;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

html[data-page="insights"] .page-hero .page-title {
  margin: 0;
}

html[data-page="insights"] .page-hero .page-rule {
  display: none;
}

html[data-page="insights"] .section-last {
  padding-top: clamp(2.5rem, 6vw, 5rem);
}

html[data-page="insights"] .insights-grid {
  gap: clamp(3.5rem, 8vw, 7.5rem);
}

html[data-page="insights"] .insights-grid > section > h2 {
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

html[data-page="insights"] #insight-wide-slot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

html[data-page="insights"] .insights-shorts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.25rem);
}

html[data-page="insights"] .insight-card {
  box-shadow: none !important;
}

html[data-page="insights"] .insight-cap {
  padding: 1rem .2rem .25rem;
}

html[data-page="insights"] .insight-cap h2,
html[data-page="insights"] .insight-cap h3 {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.35;
}

html[data-page="insights"] .insight-desc {
  margin-top: .55rem;
  font-size: .9rem;
  line-height: 1.7;
}

@media (max-width: 900px) {
  html[data-page="insights"] #insight-wide-slot {
    grid-template-columns: 1fr;
  }

  html[data-page="insights"] .insights-shorts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  html[data-page="insights"] .page-hero {
    min-height: 230px !important;
  }

  html[data-page="insights"] .page-hero > .container {
    padding-top: 6.5rem;
    padding-bottom: 2rem;
  }

  html[data-page="insights"] .insights-shorts {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   64 — Supervisor film + second feedback pass
   The supplied film is portrait and already has a black canvas.
   Keep the whole composition visible and let its black field merge
   into the Hero instead of cropping it into a desktop ratio.
   ============================================================ */
#hero.studio-hero {
  background:
    radial-gradient(ellipse at 76% 70%, rgba(52, 78, 128, .22), transparent 44%),
    #000 !important;
  color: #fff !important;
}

#hero .studio-hero-video {
  object-fit: contain !important;
  object-position: right bottom !important;
  filter: brightness(.93) contrast(1.04) saturate(.9) !important;
}

#hero .studio-hero-video.is-frame-ready {
  opacity: .96 !important;
}

#hero .studio-hero-shade {
  display: block !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.68) 36%, rgba(0,0,0,.12) 69%, rgba(0,0,0,.08) 100%),
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, transparent 58%, rgba(0,0,0,.32) 100%) !important;
}

#hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(4rem, 11vh, 8rem);
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(247,248,250,.2) 72%, #f7f8fa 100%);
}

#hero .studio-wordmark,
#hero .studio-nav-links a,
#hero .studio-nav-links a:hover,
#hero .studio-lang,
#hero .studio-lang:hover,
#hero .studio-hero-title,
#hero .hero-lede-text,
#hero .studio-menu-toggle {
  color: #fff !important;
  text-shadow: 0 2px 22px rgba(0,0,0,.46);
}

#hero .hero-lede-text,
#hero .hero-lede-text * {
  -webkit-text-fill-color: rgba(255,255,255,.84) !important;
}

#hero .studio-talk,
#hero .studio-explore {
  border-color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.94) !important;
  color: #0b0d12 !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.3) !important;
}

#hero .studio-talk:hover,
#hero .studio-explore:hover {
  background: #dfe6ff !important;
}

html[data-page="insights"] .insight-cap h2,
html[data-page="insights"] .insight-cap h3 {
  color: #1b1e24 !important;
}

html[data-page="insights"] .insight-desc,
html[data-page="insights"] .insight-cap {
  color: #4f5664 !important;
}

html[data-page="join"] .join-faq-section {
  padding-block: clamp(3.5rem, 7vw, 6rem) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(165,177,255,.2), transparent 32%),
    linear-gradient(145deg, #eef2fb 0%, #f5f3fb 54%, #edf4f7 100%) !important;
}

html[data-page="join"] .join-faq-section .section-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

html[data-page="join"] .join-faq-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  margin-top: 0;
}

html[data-page="join"] .join-faq-list article {
  min-height: 100%;
  padding: clamp(1.4rem, 2.7vw, 2.25rem);
  border: 1px solid rgba(92,101,126,.14) !important;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 16px 40px rgba(68,76,102,.08);
}

html[data-page="join"] .join-faq-list h3 {
  color: #1b1e24 !important;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.45;
}

html[data-page="join"] .join-faq-list p {
  color: #505866 !important;
  font-size: .95rem;
  line-height: 1.8;
}

html[data-page="about"] .about-narrative-section {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem) !important;
}

html[data-page="about"] .about-narrative {
  min-height: 0;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

html[data-page="about"] .about-director-section {
  padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.site-footer .footer-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .8fr) !important;
}

.site-footer .footer-email-label {
  margin-top: 1.25rem;
}

@media (max-width: 900px) {
  #hero .studio-hero-video {
    object-position: center bottom !important;
  }

  html[data-page="join"] .join-faq-list {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #hero .studio-hero-video {
    object-position: center bottom !important;
    filter: brightness(.8) contrast(1.08) saturate(.84) !important;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   65 — Insights masthead removal + continuous Hero/game field
   ============================================================ */
html[data-page="insights"] .section-last {
  padding-top: clamp(4.5rem, 9vw, 8rem) !important;
}

html[data-page="insights"] .insights-grid > section:first-child > h1 {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

html[data-page="insights"] .insights-grid > section:not(:first-child) > h2 {
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-transform: none;
}

html[data-page="insights"] .insight-card .thumb {
  overflow: hidden;
  border-radius: clamp(.8rem, 1.4vw, 1.15rem);
  isolation: isolate;
}

html[data-page="insights"] .insight-card .thumb img,
html[data-page="insights"] .insight-card .iframe-wrap,
html[data-page="insights"] .insight-card .iframe-wrap iframe {
  border-radius: inherit;
}

/* The Hero now ends in black; the game field carries that black down into
   paper white so the two scenes read as one continuous transition. */
#hero::after {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.42) 70%, #000 100%) !important;
}

#positioning-game.hero-game-reveal {
  background: linear-gradient(180deg, #000 0%, #111722 20%, #aeb9c9 58%, #fff 100%) !important;
}

#positioning-game.hero-game-reveal > .game-wrap {
  background: #fff !important;
}

#positioning-game .game-stage,
#positioning-game .game-stage[data-game="lab-vector"],
#positioning-game #game-canvas {
  background: #fff !important;
}

#positioning-game.hero-game-reveal > .game-wrap,
#positioning-game .game-stage,
#positioning-game .game-stage[data-game="lab-vector"] {
  box-shadow: none !important;
}

@media (max-width: 560px) {
  html[data-page="insights"] .section-last {
    padding-top: 3.25rem !important;
  }
}

/* ============================================================
   66 — 語言提示橫幅（不自動跳轉）

   行為在 app.js 的 initLangHint()。刻意做成右下角的小條，
   不放頁首：頁首的 data-state 三態機由 initHeader() 單一掌控，
   在上面插東西會擠掉 top / hidden / pinned 的量測基準。
   z-index 壓在 header（91）之下、lightbox（9998）之下，
   只蓋內容不蓋任何互動層。
   ============================================================ */
.lang-hint {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.7rem 0.75rem 0.7rem 1rem;
  border: 1px solid var(--lab-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lab-carbon) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.lang-hint.is-in { opacity: 1; transform: none; }

.lang-hint-text { color: var(--lab-mute); }

.lang-hint-go {
  flex: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--neon-deep);
  border-radius: 999px;
  color: var(--neon-bright);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-hint-go:hover { border-color: var(--neon); background: var(--neon-dim); }

.lang-hint-close {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lab-faint);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.lang-hint-close:hover { color: var(--neon-bright); background: var(--neon-dim); }

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

/* Insights 影片：原生 modal 保持置中，關閉時由 app.js 移除 iframe。 */
.insight-player-dialog {
  position: fixed;
  margin: auto;
  padding: 0;
  width: min(960px, calc(100vw - 32px));
  width: min(960px, calc(100vw - 32px), calc((100dvh - 112px) * 1.7778));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: #08090c;
  color: #e8f1f0;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .55);
}

.insight-player-dialog::backdrop { background: rgba(5, 7, 10, .82); }

.insight-player-dialog.is-short {
  width: min(420px, calc(100vw - 32px));
  width: min(420px, calc(100vw - 32px), calc((100dvh - 112px) * .5625));
}

.insight-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 10px 16px;
}

.insight-player-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  line-height: 1.35;
}

.insight-player-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(232, 241, 240, .35);
  border-radius: 50%;
  background: rgba(232, 241, 240, .08);
  color: #e8f1f0;
  font: 1.7rem/1 Arial, sans-serif;
  cursor: pointer;
}

.insight-player-close:hover,
.insight-player-close:focus-visible {
  background: rgba(232, 241, 240, .2);
  outline: 2px solid #00e5c7;
  outline-offset: 2px;
}

.insight-player-frame { aspect-ratio: 16 / 9; background: #000; }
.insight-player-dialog.is-short .insight-player-frame { aspect-ratio: 9 / 16; }
.insight-player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }