/*
 * [INPUT]: 依赖 ds/simatrix.css、studio.css、public.css 的结构类名，liquid-glass.js 写入的 --lg-lens 与指针变量。
 * [OUTPUT]: 提供液态玻璃材质、主题绿流体光晕、排版系统、浅色配色、共生标语与手机居中轮播。
 * [POS]: 最后加载的视觉层；只覆盖材质、排版与布局细节，不改动模板结构。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

/* ---------- 1. 字体：标题使用自托管衬线子集，正文使用系统中文字体 ---------- */
:root {
  --sm-font-display: "SiMatrix Serif", "Noto Serif SC", "Songti SC", "STSong", serif;
  --sm-font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --sm-font-sans: var(--sm-font-body);
  --sm-font-mono: "SiMatrix Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sm-font-brand: "SiMatrix Brand", "Michroma", "Eurostile", Arial, sans-serif;
  --lg-ease: cubic-bezier(.2, .8, .2, 1);
  --lg-section-y: clamp(96px, 11vw, 168px);
  font-synthesis-weight: none;
}
body { font-family: var(--sm-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "palt" 1; }

/* ---------- 2. 材质令牌：控件层是液态玻璃，内容层是实体面 ----------
   参照 Apple Liquid Glass：玻璃只用于悬浮在内容之上的导航与控件；卡片与正文落在实体面上。
   玻璃本身几乎透明，靠斜边折射、镜面边缘光与按压回弹表达厚度，而不是靠厚模糊和灰色底。 */
@property --lg-px { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --lg-py { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

:root, :root[data-theme="dark"] {
  --lg-lip: rgba(255, 255, 255, .20);
  --lg-spec: rgba(255, 255, 255, .62);
  --lg-spec-low: rgba(255, 255, 255, .30);
  --lg-spring: linear(0, .107, .356, .648, .911, 1.101, 1.206, 1.233, 1.205, 1.145, 1.077, 1.017, .974, .951, .946, .953, .967, .983, .997, 1.007, 1.012, 1.013, 1.011, 1.007, 1.004, 1, .998, .997, 1);
  --lg-spring-soft: linear(0, .14, .422, .703, .914, 1.038, 1.089, 1.092, 1.07, 1.042, 1.018, 1.002, .993, .991, .992, .995, .997, .999, 1, 1.001, 1);
  /* 玻璃（Regular）：背景先被透镜弯折，再轻磨砂并压缩动态范围——亮内容压暗，白字在任何背景上都清楚 */
  --lg-tint: rgba(22, 25, 27, .06);
  --lg-tint-hover: rgba(60, 66, 70, .16);
  --lg-tint-bar: rgba(18, 21, 23, .1);
  --lg-tint-sheet: rgba(18, 21, 23, .62);
  --lg-range: saturate(1.35) brightness(.9) contrast(.98);
  --lg-blur: .5px;
  --lg-volume: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .02));
  --lg-spec-opacity: .9;
  --lg-edge: inset 0 0 0 .5px rgba(255, 255, 255, .09);
  --lg-press: rgba(255, 255, 255, .14);
  --lg-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -4px rgba(0, 0, 0, .42);
  /* 实体内容面 */
  --lg-surface: color-mix(in srgb, var(--sm-fg) 4.5%, var(--sm-bg));
  --lg-surface-hi: color-mix(in srgb, var(--sm-fg) 7%, var(--sm-bg));
  --lg-hairline: color-mix(in srgb, var(--sm-fg) 9%, transparent);
  --lg-surface-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -24px rgba(0, 0, 0, .6);
  --lg-ambient-a: rgba(74, 196, 160, .14);
  --lg-ambient-b: rgba(214, 185, 142, .07);
  --lg-ambient-c: rgba(120, 150, 190, .08);
}

:root[data-theme="light"] {
  --lg-lip: rgba(255, 255, 255, .85);
  --lg-spec: #fff;
  --lg-spec-low: rgba(255, 255, 255, .85);
  --sm-bg: #f3f4f1;
  --sm-bg-raise: #ffffff;
  --sm-bg-sunk: #e7eae6;
  --sm-fg: #0c1512;
  --sm-fg-2: #3f4c46;
  --sm-fg-3: #6f7c76;
  --sm-line: rgba(14, 44, 34, .09);
  --sm-line-strong: rgba(14, 44, 34, .15);
  --sm-accent: #0a7a62;
  --sm-accent-hover: #075f4c;
  --sm-accent-ink: #f4fffb;
  --sm-accent-soft: rgba(10, 122, 98, .09);
  --sm-human: #8a6430;
  --sm-cool: #4d6f68;
  --studio-glass: rgba(255, 255, 255, .5);
  --studio-glass-strong: rgba(255, 255, 255, .8);
  --studio-reflection: rgba(255, 255, 255, .7);
  --studio-rim: rgba(255, 255, 255, .95);
  --studio-shadow: 0 24px 60px -36px rgba(18, 52, 40, .32);
  --lg-tint: rgba(255, 255, 255, .05);
  --lg-tint-hover: rgba(255, 255, 255, .2);
  --lg-tint-bar: rgba(255, 255, 255, .08);
  --lg-tint-sheet: rgba(250, 251, 249, .72);
  --lg-range: saturate(1.3) brightness(1.02) contrast(.98);
  --lg-volume: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .08));
  --lg-spec-opacity: 1;
  --lg-edge: inset 0 0 0 .5px rgba(14, 44, 34, .08), inset 0 -1.5px 2px -1px rgba(14, 44, 34, .10);
  --lg-press: rgba(255, 255, 255, .7);
  --lg-shadow: 0 1px 3px rgba(14, 44, 34, .08), 0 12px 30px -6px rgba(14, 44, 34, .2);
  --lg-surface: #ffffff;
  --lg-surface-hi: #ffffff;
  --lg-hairline: rgba(14, 44, 34, .08);
  --lg-surface-shadow: 0 1px 2px rgba(14, 44, 34, .04), 0 18px 40px -26px rgba(14, 44, 34, .22);
  --lg-ambient-a: rgba(64, 190, 150, .14);
  --lg-ambient-b: rgba(232, 196, 140, .16);
  --lg-ambient-c: rgba(130, 170, 220, .12);
}

/* ---------- 3. 环境光：给玻璃可折射的色彩，静态渐变不占动画预算 ---------- */
.studio-site .ambient-scene {
  display: block; position: fixed; inset: 0; z-index: -1; opacity: 1; pointer-events: none;
  background:
    radial-gradient(48vw 38vw at 82% 6%, var(--lg-ambient-a), transparent 70%),
    radial-gradient(42vw 34vw at 4% 58%, var(--lg-ambient-b), transparent 72%),
    radial-gradient(46vw 30vw at 70% 104%, var(--lg-ambient-c), transparent 70%);
}
.studio-site .ambient-scene i { display: none; }
.cursor-atmosphere, .lg-cursor, .lg-aura { display: none !important; }

/* 鲨鱼在内容之下：降低不透明度，像更深一层的水。 */
.pixel-ocean { opacity: .5; }
:root[data-theme="light"] .pixel-ocean { opacity: .36; }

/* ---------- 4. 内容层：实体面 ----------
   卡片、作品、工作台不再是玻璃：不透明底、发丝边、柔和投影；没有 backdrop-filter，滚动零合成成本。 */
.studio-site .liquid-panel:not(.lg-plate):not(dialog),
.studio-site .loop-stages li {
  background: linear-gradient(180deg, var(--lg-surface-hi), var(--lg-surface) 60%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--lg-hairline), var(--lg-surface-shadow);
}
.studio-site .liquid-panel:not(.lg-plate):not(dialog)::before,
.studio-site .liquid-panel:not(.lg-plate):not(dialog)::after,
.studio-site .loop-stages li::before { content: none; }
.studio-site :is(.lg-pillar, .project-tile, .contact-option).liquid-panel { transition: transform .7s var(--lg-spring-soft), box-shadow .4s ease; }
.studio-site :is(.lg-pillar, .project-tile, .contact-option).liquid-panel:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sm-accent) 26%, var(--lg-hairline)), var(--lg-surface-shadow); }

/* ---------- 5. 控件层：液态玻璃 ----------
   一层很薄的凸面玻璃，只用于悬浮在内容之上的导航与控件：
   backdrop-filter = 折射透镜（Chromium，liquid-glass.js 生成）→ 轻磨砂 → 动态范围压缩；
   ::before 是按表面法线生成的镜面边缘光（全浏览器）；::after 是按压时从指尖亮起的光。两者都在文字之下。 */
/* :where 不加权重，fixed / absolute 的玻璃保留原定位。 */
:where(.sm-glass, .sm-nav [data-sm-logo], .loop-center, .fw-stage) { position: relative; }
.studio-site :is(.sm-glass, .sm-nav [data-sm-logo], .loop-center, .fw-stage) {
  isolation: isolate;
  background: var(--lg-volume), var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) var(--lg-range); backdrop-filter: blur(var(--lg-blur)) var(--lg-range);
  border-color: transparent;
  box-shadow: var(--lg-edge), var(--lg-shadow);
  transition: background-color .3s ease, scale .55s var(--lg-spring), box-shadow .3s ease;
}
.studio-site :is(.sm-glass, .sm-nav [data-sm-logo], .loop-center, .fw-stage)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  /* 脚本生成高光前的近似：左上亮、右下弱的一圈发丝光 */
  padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .12) 30%, transparent 50%, rgba(255, 255, 255, .1) 75%, rgba(255, 255, 255, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--lg-spec-opacity); transition: opacity .3s ease;
}
.studio-site [data-lg-spec]::before { padding: 0; background: var(--lg-spec-img) 0 0 / 100% 100% no-repeat; -webkit-mask: none; mask: none; }
.studio-site :is(.sm-glass:not(dialog), .sm-nav [data-sm-logo], .loop-center, .fw-stage)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--lg-px) var(--lg-py), var(--lg-press), transparent 70%);
  opacity: 0; transition: opacity .45s ease;
}
/* 悬停：玻璃略亮，高光满格；按压：放大、从指尖亮起，松开后弹簧回弹。 */
.studio-site :is(button.sm-glass, a.sm-glass, .sm-nav [data-sm-logo]):hover { --lg-tint: var(--lg-tint-hover); --lg-spec-opacity: 1; }
.studio-site .lg-pressed { scale: 1.06; transition: background-color .3s ease, scale .32s var(--lg-spring-soft), box-shadow .3s ease; }
.studio-site .sm-nav__links.lg-pressed, .studio-site .sm-dock.lg-pressed, .studio-site .tablist.lg-pressed { scale: 1.02; }
.studio-site .lg-pressed::after { opacity: 1; transition: opacity .12s ease; }
.studio-site .lg-pressed::before { --lg-spec-opacity: 1; }

/* 栏（顶栏胶囊、手机底栏）：压在滚动的正文上，磨砂略厚。 */
.studio-site :is(.sm-nav__links, .sm-dock, .sm-nav [data-sm-logo], .sm-nav .sm-btn--glass) { --lg-tint: var(--lg-tint-bar); --lg-blur: 1px; }
.studio-site .sm-nav :is(.sm-btn--glass, [data-sm-logo]):hover { --lg-tint: color-mix(in srgb, var(--lg-tint-bar) 60%, var(--lg-tint-hover)); }

/* 自适应明暗（liquid-glass.js 写 data-lg-tone）：栏下是亮画面时变浅色玻璃+深色字，暗画面时变深色玻璃+浅色字。
   只给小控件（顶栏胶囊、底栏、图标按钮）用，大面板不翻转——与 iOS 一致。 */
.studio-site [data-lg-tone="light"] {
  --sm-fg: #0c1512; --sm-fg-2: #33403a; --sm-fg-3: #5d6a64; --sm-accent: #0a7a62; --sm-line: rgba(14, 44, 34, .09);
  --lg-tint: rgba(255, 255, 255, .24); --lg-tint-bar: rgba(255, 255, 255, .24); --lg-tint-hover: rgba(255, 255, 255, .38);
  --lg-range: saturate(1.4) brightness(1.1) contrast(.82); --lg-spec-opacity: 1; --lg-press: rgba(255, 255, 255, .7);
  --lg-volume: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .08));
  --lg-edge: inset 0 0 0 .5px rgba(14, 44, 34, .08), inset 0 -1.5px 2px -1px rgba(14, 44, 34, .10);
  --lg-shadow: 0 1px 3px rgba(14, 44, 34, .08), 0 12px 30px -6px rgba(14, 44, 34, .2);
  color: var(--sm-fg);
}
.studio-site [data-lg-tone="dark"] {
  --sm-fg: #eef2f0; --sm-fg-2: #c3cbc7; --sm-fg-3: #8d9692; --sm-accent: #66d6bc; --sm-line: rgba(255, 255, 255, .10);
  --lg-tint: rgba(18, 21, 23, .18); --lg-tint-bar: rgba(18, 21, 23, .18); --lg-tint-hover: rgba(46, 52, 56, .3);
  --lg-range: saturate(1.4) brightness(.74) contrast(.96); --lg-spec-opacity: .9; --lg-press: rgba(255, 255, 255, .14);
  --lg-volume: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .02));
  --lg-edge: inset 0 0 0 .5px rgba(255, 255, 255, .09);
  --lg-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -4px rgba(0, 0, 0, .42);
  color: var(--sm-fg);
}
.studio-site :is(.sm-nav__links, .sm-dock, .sm-nav .sm-btn--glass) { transition: background-color .45s ease, color .45s ease, box-shadow .45s ease, scale .55s var(--lg-spring); }
.studio-site :is(.sm-nav__links, .sm-dock) a { transition: color .45s ease; }

/* 滚动边缘：正文滑到顶栏下时先柔和淡出，玻璃浮在淡出层之上（iOS 的 soft scroll edge）。 */
.studio-site .sm-nav::before {
  content: ""; display: block; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--sm-bg) 0%, color-mix(in srgb, var(--sm-bg) 72%, transparent) 45%, transparent 100%);
}

/* 折射透镜（Chromium）：先弯折清晰的背景，再磨砂与压缩。
   选择器必须比上面的玻璃基础规则更具体（:is 取最具体的参数 .sm-nav [data-sm-logo]），否则透镜被覆盖、看不到折射。 */
.lg-refract .studio-site :is(.sm-glass, .sm-nav [data-sm-logo], .loop-center, .fw-stage).lg-lensed {
  -webkit-backdrop-filter: var(--lg-lens) blur(var(--lg-blur)) var(--lg-range);
  backdrop-filter: var(--lg-lens) blur(var(--lg-blur)) var(--lg-range);
}

/* 厚玻璃 sheet：对话框。更厚的磨砂、更深的投影、更宽的斜边。 */
.studio-site dialog:is(.sm-glass, .liquid-panel) {
  --lg-blur: 28px; background: var(--lg-tint-sheet); border: 0;
  box-shadow: var(--lg-edge), 0 40px 120px -40px rgba(0, 0, 0, .55);
}
.studio-site dialog:is(.sm-glass, .liquid-panel)::after { content: none; }

/* 系统设置：降低透明度时更“磨砂”，增强对比时加深边线。 */
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-tint: color-mix(in srgb, var(--sm-bg) 88%, transparent); --lg-tint-bar: var(--lg-tint); --lg-tint-sheet: color-mix(in srgb, var(--sm-bg) 96%, transparent); --lg-blur: 18px; }
}
@media (prefers-contrast: more) {
  :root { --lg-edge: inset 0 0 0 1px color-mix(in srgb, var(--sm-fg) 45%, transparent); }
}

/* 选中指示（iOS 标签栏的做法）：不是白色按钮，而是玻璃里一枚淡淡的强调色胶囊，文字变强调色；
   颜色全部取自当前令牌，所以在明暗主题与 data-lg-tone 翻转时自动跟随。
   选择器要压过 studio.css 的 :root[data-theme] .liquid-lens[data-state] 规则。 */
html:root body.studio-site .liquid-lens.liquid-lens[class] {
  border-color: color-mix(in srgb, var(--sm-accent) 18%, transparent);
  background: color-mix(in srgb, var(--sm-accent) 13%, color-mix(in srgb, var(--sm-fg) 5%, transparent));
  box-shadow: inset 0 1px 1px -.5px rgba(255, 255, 255, .28), inset 0 -1px 1px -.5px color-mix(in srgb, var(--sm-fg) 8%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* 移动与按压时：胶囊变成一滴更亮的透明玻璃，略带边缘光。 */
html:root body.studio-site .liquid-lens.liquid-lens:is([data-state="settling"], [data-state="pressed"]) {
  background: color-mix(in srgb, var(--sm-accent) 9%, rgba(255, 255, 255, .14));
  box-shadow: inset 1px 1px 1px -.5px rgba(255, 255, 255, .7), inset -1px -1px 1px -.5px rgba(255, 255, 255, .35), 0 6px 18px -8px rgba(0, 0, 0, .3);
}
.studio-site :is(.sm-nav__links, .sm-dock) a[aria-current="page"] { color: var(--sm-accent); }

/* 主要按钮：实色药丸，带玻璃唇边；按压同样回弹。 */
.studio-site .sm-btn--primary {
  box-shadow: inset 0 1px 1px -.5px rgba(255, 255, 255, .7), inset 0 -1px 2px -1px rgba(0, 0, 0, .2), 0 10px 24px -12px color-mix(in srgb, var(--sm-accent) 80%, transparent);
  transition: scale .55s var(--lg-spring), background-color .3s ease;
}
.studio-site .sm-btn--primary.lg-pressed { scale: 1.05; }
:root[data-theme="light"] .studio-site .sm-btn--primary { color: #f4fffb; }

/* 顶栏：标志、导航与操作都是悬浮玻璃胶囊，页面从它们下方流过。 */
.studio-site .sm-nav { view-transition-name: none; background: transparent; border: 0; box-shadow: none; }
.studio-site .sm-nav::after { display: none; }
.studio-site .sm-nav__links { view-transition-name: sm-nav; }
.studio-site .sm-nav [data-sm-logo] { display: inline-flex; align-items: center; padding: 9px 18px 9px 12px; border-radius: 999px; }
/* 窄屏滚动后标志文字淡出（原设计系统行为），胶囊随之收拢成一枚圆形玻璃。 */
.studio-site .sm-nav [data-sm-logo] .sm-logo__text { max-width: 140px; overflow: hidden; transition: max-width .45s var(--lg-ease), opacity .3s ease; }
.studio-site .sm-nav [data-sm-logo] { transition: padding .55s var(--lg-spring-soft), scale .55s var(--lg-spring); }
@media (max-width: 760px) {
  .studio-site .sm-nav.is-scrolled [data-sm-logo] { padding: 8px; gap: 0; }
  .studio-site .sm-nav.is-scrolled [data-sm-logo] .sm-logo__text { max-width: 0; }
}

/* ---------- 6. 排版系统 ----------
   一个标签样式、一个标题节奏、一个正文尺度；第二行强调统一用主题绿。 */
.studio-site .rf-kicker,
.studio-site .rf-section-index,
.studio-site .section-note,
.studio-site .page-index {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 11px/1.4 var(--sm-font-mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--sm-fg-3);
}
.studio-site .rf-section-index::before,
.studio-site .page-index::before,
.studio-site .loop-intro .rf-section-index::before {
  content: ""; width: 22px; height: 1px; background: var(--sm-accent); opacity: .8;
}
.studio-site .rf-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--sm-accent); box-shadow: 0 0 12px var(--sm-accent); }

.studio-site .sm-h1,
.studio-site .page-heading h1,
.studio-site .rf-directions-title h2,
.studio-site .contact-band h2 {
  font-family: var(--sm-font-display); font-weight: 500; letter-spacing: .015em; line-height: 1.16;
}
/* 中文标题只在标点与空格处换行，避免“彼 / 此”“也实 / 践”这样的断词。 */
.studio-site main :is(h1, h2, h3),
.studio-site .contact-band h2 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }

.studio-site .sm-h1 em,
.studio-site .page-heading h1 em,
.studio-site .rf-section-head h2 em { font-style: normal; color: var(--sm-accent); }
.studio-site .rf-hero .sm-mega { letter-spacing: .01em; line-height: 1.08; }

/* 正文最小 14px；演示界面、示意图与模拟窗口保留各自的小字号。 */
.studio-site main p:not(:is(.sm-screen, .capability-workbench, .project-demo, .knowledge-map, .rf-case-media, .cap-learning, .dialog, .lg-pillar) *):not(.hero-lede),
.studio-site .contact-band p { font-size: max(14px, 1em); line-height: 1.85; }

/* 首屏：标语成为副标题，循环轨迹退到注脚。 */
.studio-site .rf-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.studio-site .hero-lede { margin: 26px 0 0; max-width: 30em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.75; color: var(--sm-fg-2); text-wrap: pretty; }
.studio-site .hero-lede b { font-weight: 600; color: var(--sm-fg); }
.studio-site .hero-loop-trail { margin-top: 18px; font-size: 12px; letter-spacing: .08em; color: var(--sm-fg-3); }
.studio-site .rf-hero-actions { margin-top: 36px; }
.studio-site .hero-fab-caption { margin-top: 14px; font: 12px var(--sm-font-body); color: var(--sm-fg-3); }
.studio-site .hero-fab-caption > a,
.studio-site .hero-fab-caption > button { font-size: 12px; }
.studio-site .rf-hero-bottom .sm-mono { letter-spacing: .24em; }

/* 区块节奏：统一上下留白，标题与内容间距一致。 */
.studio-site .rf-directions,
.studio-site .public-loop { padding-block: var(--lg-section-y); }
.studio-site .public-loop { border-top: 0; }
.studio-site .rf-section-head { margin-bottom: clamp(40px, 5vw, 72px); align-items: end; }
.studio-site .rf-section-aside > p { font-size: 15px; color: var(--sm-fg-2); }

/* 方向列表：每一行是一条可触的玻璃轨道。 */
.studio-site .rf-direction-list a { position: relative; border-radius: 22px; padding: 26px 26px; transition: background .4s var(--lg-ease), transform .5s var(--lg-ease); }
.studio-site .rf-direction-list a:hover { background: var(--lg-tint); transform: translateX(6px); }
.studio-site .rf-direction-list h3 { font-family: var(--sm-font-display); font-weight: 500; font-size: clamp(22px, 2vw, 28px); letter-spacing: .02em; }
.studio-site .rf-direction-list p { font-size: 14px; color: var(--sm-fg-2); }

/* Loop：节点是实体面，中心是透明玻璃胶囊。 */
.studio-site .loop-stages li { border: 0; border-radius: 26px; }
.studio-site .loop-stages h3 { font-family: var(--sm-font-display); font-weight: 500; font-size: 22px; letter-spacing: .03em; }
.studio-site .loop-stages p { font-size: 13px; }
.studio-site .loop-center {
  border: 0; border-radius: 999px; padding: 10px 14px;
}

/* 联系区与页脚：更安静的收尾。 */
.studio-site .contact-band { background: transparent; border-top: 1px solid var(--sm-line); }
.studio-site .contact-band h2 { font-size: clamp(40px, 5vw, 72px); }
.studio-site .rf-footer { background: transparent; }

/* 浮动联系按钮与顶栏“联系合作”重复，移除以减少噪声。 */
.studio-site .contact-float { display: none !important; }

@media (max-width: 640px) {
  /* 手机少说话：让画面和位置表达含义。 */
  .studio-site .rf-kicker,
  .rf-hero-bottom,
  .rf-section-aside > p,
  .rf-direction-list p,
  .loop-intro > p,
  .loop-stages p,
  .loop-stages small,
  .loop-boundary,
  .contact-band p,
  .capability-principle,
  .capability-copy > p,
  .cap-source,
  .cap-window-sub,
  .cap-demo-notice,
  .company-section-head > p,
  .exhibit-note,
  .engineering-overview figcaption { display: none !important; }
  body:not([data-page=careers]):not([data-page=contact]) .page-heading > p { display: none; }
  :root { --lg-section-y: 64px; }
  .studio-site main p { font-size: 14px; }
  .studio-site .rf-hero-actions { margin-top: 24px; }
  .studio-site .sm-nav [data-sm-logo] { padding: 7px 12px 7px 9px; }
  .loop-stages li { min-height: 92px; border-radius: 20px; }
  .studio-site .loop-stages h3 { font-size: 17px; }
  .studio-site .rf-direction-list a { padding: 18px 8px; }
  .studio-site .rf-direction-list a:hover { transform: none; }
  .studio-site .contact-band h2 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-site .lg-pressed, .studio-site .sm-glass, .studio-site .fw-stage { transition: none; scale: 1; }
}

/* ---------- 11. Loop 飞轮：螺旋、加速光点、阶段点亮与冲击环 ---------- */
.lg-flywheel-section { position: relative; overflow: clip; }
.lg-flywheel-section > .sm-container { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: 40px; }
.lg-flywheel-section .loop-intro { display: grid; gap: 22px; justify-items: start; max-width: 460px; }
.lg-flywheel-section .loop-intro h2 { margin: 0; }
.lg-flywheel { position: relative; margin: 0; width: min(640px, 100%); justify-self: center; aspect-ratio: 1; }
.lg-flywheel::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--sm-accent) 22%, transparent), transparent 66%);
  filter: blur(30px); opacity: calc(.45 + var(--fw-turn, 0) * .22); transition: opacity .8s ease;
}
.lg-flywheel svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.fw-stop-a { stop-color: var(--sm-accent); }
.fw-stop-b { stop-color: #5fd4f0; }
:root[data-theme="light"] .fw-stop-b { stop-color: #1590b0; }
.fw-rim { fill: none; stroke: var(--sm-line-strong); stroke-width: 1; }
.fw-ticks line { stroke: var(--sm-line-strong); stroke-width: 1.2; }
.fw-track { fill: none; stroke: color-mix(in srgb, var(--sm-accent) 22%, var(--sm-line-strong)); stroke-width: 1.4; }
.fw-lit { fill: none; stroke: url(#fw-grad); stroke-width: 5; stroke-linecap: round; }
.fw-sparks circle { fill: var(--sm-accent); opacity: 0; }
:root:not([data-theme="light"]) .fw-sparks circle { fill: #b8fff0; }
/* 雷达式扫光：扇形光束跟随光点方位旋转。 */
.lg-flywheel::after {
  content: ""; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -70deg, transparent 0deg, color-mix(in srgb, var(--sm-accent) 28%, transparent) 66deg, color-mix(in srgb, var(--sm-accent) 55%, transparent) 70deg, transparent 72deg);
  transform: rotate(var(--fw-angle, 0deg)); will-change: transform;
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, #000 64%, transparent 72%);
  mask: radial-gradient(circle, transparent 18%, #000 30%, #000 64%, transparent 72%);
  opacity: calc(.35 + var(--fw-turn, 0) * .2); mix-blend-mode: screen;
}
:root[data-theme="light"] .lg-flywheel::after { mix-blend-mode: multiply; opacity: calc(.22 + var(--fw-turn, 0) * .12); }
/* 满一轮：整条螺旋闪亮，中心数字放大回弹。 */
.lg-flywheel.is-burst .fw-lit { animation: fw-lit-flash 1.1s ease-out; }
.lg-flywheel.is-burst .fw-core b { animation: fw-count 0.9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fw-lit-flash { 0% { stroke-dashoffset: 0; stroke-width: 9; opacity: 1; } 100% { stroke-width: 5; } }
@keyframes fw-count { 0% { transform: scale(1.5); color: var(--sm-accent); } 100% { transform: scale(1); } }
.fw-nodes circle { fill: var(--sm-bg); stroke: var(--sm-line-strong); stroke-width: 1.5; transition: fill .4s ease, stroke .4s ease; }
.fw-nodes circle.is-on { fill: var(--sm-accent); stroke: var(--sm-accent); }
.fw-comet { fill: #fff; }
:root[data-theme="light"] .fw-comet { fill: var(--sm-accent); }
.fw-shock { fill: none; stroke: var(--sm-accent); stroke-width: 3; opacity: 0; transform-origin: 0 0; }
.lg-flywheel.is-burst .fw-shock { animation: fw-shock 1.1s cubic-bezier(.1, .7, .2, 1); }
.lg-flywheel.is-burst::before { animation: fw-flare 1.1s ease-out; }
@keyframes fw-shock { 0% { opacity: .9; transform: scale(.3); stroke-width: 10; } 100% { opacity: 0; transform: scale(1.32); stroke-width: 1; } }
@keyframes fw-flare { 0% { opacity: 1.4; transform: scale(1.15); } 100% { transform: scale(1); } }

/* 阶段标签：四个方向的玻璃胶囊，光点经过时点亮。 */
.fw-stages { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.fw-stage {
  position: absolute; display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 20px; border-radius: 999px;
  font-family: var(--sm-font-display); font-size: clamp(20px, 2vw, 28px); letter-spacing: .14em; color: var(--sm-fg-2);
}
.studio-site .fw-stage { transition: color .35s ease, transform .6s var(--lg-spring-soft), box-shadow .35s ease; }
.fw-stage span { font: 500 11px var(--sm-font-mono); letter-spacing: .14em; color: var(--sm-fg-3); }
.studio-site .fw-stage.is-on { color: var(--sm-fg); transform: translate(var(--tx), var(--ty)) scale(1.08); box-shadow: inset 0 1px 1px -.5px var(--lg-lip), inset 0 0 0 1px color-mix(in srgb, var(--sm-accent) 70%, transparent), 0 0 32px -4px color-mix(in srgb, var(--sm-accent) 55%, transparent); }
.fw-stage.is-on span { color: var(--sm-accent); }
.fw-stage { transform: translate(var(--tx), var(--ty)); }
.fw-stage--0 { left: 50%; top: 0; --tx: -50%; --ty: -40%; }
.fw-stage--1 { right: 0; top: 50%; --tx: 35%; --ty: -50%; }
.fw-stage--2 { left: 50%; bottom: 0; --tx: -50%; --ty: 40%; }
.fw-stage--3 { left: 0; top: 50%; --tx: -35%; --ty: -50%; }

/* 中心：迭代计数，每转一圈加一。 */
.fw-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.fw-core b { font: 500 clamp(30px, 3.4vw, 46px)/1 var(--sm-font-mono); color: var(--sm-fg); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.fw-core small { font: 500 9px var(--sm-font-mono); letter-spacing: .3em; color: var(--sm-accent); }

@media (max-width: 900px) {
  .lg-flywheel-section > .sm-container { grid-template-columns: 1fr; gap: 28px; }
  .lg-flywheel { width: min(520px, 84vw); margin-block: 24px; }
}
@media (max-width: 640px) {
  .fw-stage { padding: 8px 13px; font-size: 17px; gap: 6px; letter-spacing: .08em; }
  .fw-stage span { font-size: 9px; }
  .lg-flywheel { width: 74vw; }
  .fw-stage--1 { --tx: 8%; }
  .fw-stage--3 { --tx: -8%; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-flywheel.is-burst .fw-shock, .lg-flywheel.is-burst::before { animation: none; }
  .fw-stage { transition: none; }
}

/* ---------- 12. 评审采纳：领域标签、关于页事实表、能力流程链、更大的飞轮阶段 ---------- */
.studio-site .rf-kicker.hero-domain { margin-bottom: 22px; font: 500 14px var(--sm-font-body); letter-spacing: .3em; color: var(--sm-fg-2); }
.about-facts { margin: 30px 0 0; padding: 0; }
.about-facts div { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--sm-line); }
.about-facts div:first-child { border-top: 1px solid var(--sm-line); }
.about-facts dt { font: 500 12px var(--sm-font-body); letter-spacing: .14em; color: var(--sm-fg-3); }
.about-facts dd { margin: 0; font-size: 17px; color: var(--sm-fg); }
.studio-site .cap-chain { margin: 18px 0 26px; }
@media (min-width: 901px) {
  .fw-stage { padding: 16px 26px; font-size: clamp(24px, 2.3vw, 34px); }
  .fw-stage span { font-size: 12px; }
}
@media (max-width: 640px) {
  .studio-site .rf-kicker.hero-domain { display: inline-flex !important; margin-bottom: 14px; font-size: 10px; letter-spacing: .22em; }
  .about-facts div { grid-template-columns: 48px 1fr; padding: 12px 0; }
  .about-facts dd { font-size: 15px; }
  .studio-site .cap-chain { margin: 12px 0 18px; }
}

/* 能力工作台去掉资料栏后：示意图占主列，定位按钮在右。 */
@media (min-width: 641px) {
  .studio-site .cap-workspace { grid-template-columns: minmax(0, 1fr) 128px; }
}
.studio-site .loop-stages li { min-height: 0; padding: 26px 26px 30px; display: grid; gap: 22px; align-content: start; }
.studio-site .loop-stages h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: .12em; margin: 0; }
.studio-site .loop-footer { margin-top: 8px; }

@media (max-width: 640px) {
  .lg-pillars { padding-top: 8px; }
  .lg-pillar-grid { grid-template-columns: 1fr; gap: 10px; }
  .lg-pillar { grid-template-columns: 116px 1fr; grid-template-rows: auto; align-items: center; border-radius: 22px; }
  .lg-pillar figure { margin: 8px; aspect-ratio: 1.15; border-radius: 16px; }
  .lg-pillar-body { padding: 10px 16px 10px 4px; align-items: center; }
  .studio-site .lg-pillar h2 { font-size: 22px; margin: 2px 0 4px; }
  .lg-pillar p { font-size: 11px; letter-spacing: .06em; }
  .studio-site .loop-stages li { padding: 16px; gap: 12px; }
  .studio-site .loop-stages h3 { font-size: 20px; letter-spacing: .08em; }
}

/* 内容卡片按下时向内收一点，与玻璃控件的外扩回弹区分。 */
.studio-site :is(.lg-pillar, .project-tile).lg-pressed { scale: .985; }

/* ---------- 10. 首页：我们做什么（三张卡）与一行 Loop ----------
   每张卡：画面 + 业务名 + 一句话 + 作品入口。卡片是实体面，不用玻璃。 */
.lg-pillars { position: relative; z-index: 1; padding: clamp(24px, 4vw, 56px) 0 0; }
.lg-pillars-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.lg-pillars-head > * { margin: 0; }
.lg-pillars-head .rf-text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sm-accent); text-decoration: none; }
.lg-pillars-head .rf-text-link svg { width: 16px; height: 16px; }
.lg-pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lg-pillar { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 30px; color: var(--sm-fg); contain: layout paint; }
.lg-pillar-visual { position: relative; margin: 10px 10px 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px; background: var(--sm-bg-sunk); }
.lg-pillar-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg-pillar-body { display: grid; align-content: start; gap: 8px; padding: 20px 24px 24px; }
.lg-pillar-index { font: 500 11px var(--sm-font-mono); color: var(--sm-accent); letter-spacing: .2em; }
.studio-site .lg-pillar h2 { margin: 0; font-family: var(--sm-font-display); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: .03em; line-height: 1.2; }
.lg-pillar h2 a { color: inherit; text-decoration: none; }
/* 标题链接撑满整张卡；作品标签和画面里的链接浮在它上面，各自可点。 */
.lg-pillar h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.studio-site .lg-pillar p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--sm-fg-2); }
.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.lg-chips a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13px; color: var(--sm-fg-2); text-decoration: none; background: color-mix(in srgb, var(--sm-fg) 5%, transparent); box-shadow: inset 0 0 0 .5px var(--lg-hairline); transition: color .2s ease, background-color .2s ease; }
.lg-chips a:hover { color: var(--sm-accent); background: var(--sm-accent-soft); }
.lg-pillar:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sm-accent) 30%, var(--lg-hairline)), var(--lg-surface-shadow); }
/* 工程软件卡：三项工具合在一个画框里，一大两小。 */
.lg-pillar .engineering-overview { position: absolute; inset: 0; z-index: 2; }
.lg-pillar .engineering-overview figcaption { display: none; }
.lg-pillar .engineering-panels { height: 100%; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.lg-pillar .engineering-panel { position: relative; overflow: hidden; }
.lg-pillar .engineering-panel:first-child { grid-row: 1 / 3; }
.lg-pillar .engineering-panel:last-child { grid-column: auto; }
.lg-pillar .engineering-panel img,
.lg-pillar .engineering-panel:last-child img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; border-radius: 0; }
.lg-pillar .engineering-label { position: absolute; left: 8px; bottom: 8px; z-index: 1; min-height: 0; padding: 5px 10px; gap: 6px; border-radius: 999px; font-size: 11px; color: #f1f5f3; background: rgba(10, 14, 13, .62); }
.lg-pillar .engineering-label i { display: none; }
/* AI 教育卡：可见时播放实时刻蚀形貌，静帧先占位。 */
.lg-live > img, .lg-live > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.lg-live > iframe { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.lg-live[data-loaded="true"] > iframe { opacity: 1; }
.lg-live-play { position: absolute; right: 10px; bottom: 10px; z-index: 3; min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; font: 12px var(--sm-font-body); color: #f1f5f3; background: rgba(10, 14, 13, .62); cursor: pointer; }
.lg-live { position: absolute; inset: 0; }
.deck-notice { display: block; margin-top: 16px; font-size: 12px; color: var(--sm-fg-3); text-align: right; }

@media (max-width: 900px) {
  .lg-pillar-grid { grid-template-columns: 1fr; gap: 12px; }
  .lg-pillar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto; align-items: stretch; }
  .lg-pillar-visual { margin: 10px; aspect-ratio: auto; min-height: 168px; }
}
@media (max-width: 640px) {
  .studio-site .hero-lede { margin-top: 16px; font-size: 15px; }
  .lg-pillars-head { margin-bottom: 14px; }
  .lg-pillar { grid-template-columns: 1fr; border-radius: 24px; }
  .lg-pillar-visual { margin: 8px 8px 0; aspect-ratio: 16 / 10; min-height: 0; border-radius: 18px; }
  .lg-pillar-body { padding: 14px 16px 18px; gap: 6px; }
  .studio-site .lg-pillar h2 { font-size: 24px; }
  .studio-site .lg-pillar p { font-size: 14px; }
  .lg-chips a { min-height: 36px; font-size: 12px; }
  .deck-notice { text-align: center; font-size: 10px; margin-top: 10px; }
}
}

/* 业务页：能力在上，作品目录在下。 */
.work-catalog-head { margin-top: clamp(88px, 11vw, 150px); scroll-margin-top: 110px; }