/*
 * [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. 材质令牌：墨色与纸色两套玻璃 ---------- */
@property --liquid-x { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --liquid-y { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --rim-angle { syntax: "<angle>"; inherits: false; initial-value: 135deg; }

:root, :root[data-theme="dark"] {
  --lg-tint: rgba(30, 34, 38, .30);
  --lg-tint-clear: rgba(24, 28, 32, .24);
  --lg-tint-strong: rgba(22, 25, 28, .76);
  --lg-blur: 18px;
  --lg-sat: 1.9;
  --lg-sheen: rgba(255, 255, 255, .07);
  --lg-rim-hi: rgba(255, 255, 255, .62);
  --lg-rim-lo: rgba(255, 255, 255, .16);
  --lg-edge: rgba(255, 255, 255, .09);
  --lg-inner: rgba(255, 255, 255, .07);
  --lg-caustic: rgba(124, 236, 204, .09);
  --lg-shadow: 0 1px 1px rgba(0, 0, 0, .28), 0 10px 26px -12px rgba(0, 0, 0, .55), 0 38px 80px -40px rgba(0, 0, 0, .7);
  --lg-ambient-a: rgba(74, 196, 160, .15);
  --lg-ambient-b: rgba(214, 185, 142, .08);
  --lg-ambient-c: rgba(120, 150, 190, .09);
  --lg-aura-dark: 92 224 186;
  --lg-aura-light: 26 168 130;
}

:root[data-theme="light"] {
  --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, .44);
  --lg-tint-clear: rgba(255, 255, 255, .30);
  --lg-tint-strong: rgba(255, 255, 255, .84);
  --lg-blur: 20px;
  --lg-sat: 1.6;
  --lg-sheen: rgba(255, 255, 255, .5);
  --lg-rim-hi: rgba(255, 255, 255, 1);
  --lg-rim-lo: rgba(255, 255, 255, .7);
  --lg-edge: rgba(14, 44, 34, .10);
  --lg-inner: rgba(255, 255, 255, .65);
  --lg-caustic: rgba(10, 122, 98, .06);
  --lg-shadow: 0 1px 1px rgba(14, 44, 34, .05), 0 8px 22px -12px rgba(14, 44, 34, .18), 0 34px 70px -40px rgba(14, 44, 34, .26);
  --lg-ambient-a: rgba(64, 190, 150, .15);
  --lg-ambient-b: rgba(232, 196, 140, .17);
  --lg-ambient-c: rgba(130, 170, 220, .13);
}

/* ---------- 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 { display: none !important; }

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

/* ---------- 4. 液态玻璃 ----------
   控件（导航、按钮、标签、标志）是透明玻璃：轻微模糊，斜边强折射与色散。
   面板（卡片、标语板、Loop 节点）是磨砂玻璃：更厚的模糊，斜边同样折射。
   斜面高光由对角内阴影与随指针转动的边缘光组成。 */
.studio-site .sm-glass,
.studio-site .liquid-panel,
.studio-site .sm-nav__links,
.studio-site .sm-dock,
.studio-site .tablist,
.studio-site .loop-stages li,
.studio-site .sm-nav [data-sm-logo] {
  --lg-backdrop: blur(var(--lg-blur)) saturate(var(--lg-sat));
  background: linear-gradient(180deg, var(--lg-sheen), transparent 42%), var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-backdrop);
  backdrop-filter: var(--lg-backdrop);
  border-color: transparent;
  box-shadow:
    inset 1.5px 1.5px 1px -1px var(--lg-rim-hi),
    inset -1.5px -1.5px 1px -1px var(--lg-rim-lo),
    inset 0 0 0 .5px var(--lg-edge),
    inset 0 0 26px -10px var(--lg-inner),
    var(--lg-shadow);
}
.studio-site .sm-nav__links,
.studio-site .sm-dock,
.studio-site .tablist,
.studio-site .sm-btn--glass,
.studio-site .sm-nav [data-sm-logo] { --lg-tint: var(--lg-tint-clear); --lg-blur: 7px; }
.studio-site .sm-glass--strong,
.studio-site .contact-dialog,
.studio-site .dialog.liquid-panel { background: linear-gradient(180deg, var(--lg-sheen), transparent 30%), var(--lg-tint-strong); }

/* 折射透镜（Chromium）：先模糊再弯折，色散出现在斜边。 */
.lg-refract .lg-lensed {
  -webkit-backdrop-filter: var(--lg-backdrop, blur(18px) saturate(1.7)) var(--lg-lens);
  backdrop-filter: var(--lg-backdrop, blur(18px) saturate(1.7)) var(--lg-lens);
}
.lg-refract .lg-lensed--control { --lg-backdrop: blur(2px) saturate(1.8) brightness(1.06); }
:root[data-theme="light"].lg-refract .lg-lensed--control { --lg-backdrop: blur(2.5px) saturate(1.5) brightness(1.08); }

/* 斜面边缘光：两道高光分居对角，随指针所在方位转动。 */
.studio-site .liquid-panel::before,
.studio-site .sm-glass::before,
.studio-site .loop-stages li::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; padding: 1px; opacity: 1;
  background: conic-gradient(from var(--rim-angle), var(--lg-rim-hi) 0deg, transparent 55deg, transparent 150deg, var(--lg-rim-lo) 180deg, transparent 220deg, transparent 305deg, var(--lg-rim-hi) 360deg);
  -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);
  transition: --rim-angle .6s var(--lg-ease);
}

/* 面板内只保留底部焦散；绿色光晕来自下方的流体层，经玻璃折射后出现。 */
.studio-site .liquid-panel::after,
.studio-site .liquid-panel:not(.rf-case)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(70% 45% at 50% 112%, var(--lg-caustic), transparent 70%);
  background-size: auto; opacity: 1; animation: none; transform: none; transition: none;
}

/* 选中透镜：像一滴更亮的玻璃落在导航上。 */
.studio-site .liquid-lens {
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
  box-shadow: inset 1.5px 1.5px 1px -1px rgba(255, 255, 255, .75), inset -1.5px -1.5px 1px -1px rgba(255, 255, 255, .25), inset 0 0 0 .5px var(--lg-edge), 0 6px 18px -8px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] .studio-site .liquid-lens {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .62));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(14, 44, 34, .08), 0 6px 16px -8px rgba(14, 44, 34, .3);
}

/* 主要按钮：实色但带玻璃斜面，与透明控件区分层级。 */
.studio-site .sm-btn--primary {
  box-shadow: inset 1.5px 1.5px 1px -1px rgba(255, 255, 255, .75), inset -1px -1px 1px -.5px rgba(0, 0, 0, .16), 0 10px 24px -12px color-mix(in srgb, var(--sm-accent) 80%, transparent);
}
: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::before, .studio-site .sm-nav::after { display: none; }
.studio-site .sm-nav__links { view-transition-name: sm-nav; }
.studio-site .sm-nav [data-sm-logo] { position: relative; 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 .45s var(--lg-ease); }
@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; }
}
/* 顶栏胶囊常压在滚动的标题上：加厚磨砂保证可读，斜边折射依旧保留。 */
.studio-site .sm-nav :is([data-sm-logo], .sm-nav__links, .sm-btn--glass) { --lg-tint: color-mix(in srgb, var(--sm-bg) 46%, transparent); }
.lg-refract .sm-nav .lg-lensed--control { --lg-backdrop: blur(9px) saturate(1.8) brightness(1.05); }

/* ---------- 5. 主题绿流体光晕：画在内容之下，玻璃从上方折射它 ---------- */
.lg-aura {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease; mix-blend-mode: screen;
}
:root[data-theme="light"] .lg-aura { mix-blend-mode: multiply; }

/* ---------- 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) *),
.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; }
.hero-slogan { display: grid; gap: 8px; margin: 30px 0 0; }
.hero-slogan > span { font: 500 11px var(--sm-font-mono); letter-spacing: .22em; color: var(--sm-fg-3); text-transform: uppercase; }
.hero-slogan > b { font-family: var(--sm-font-display); font-weight: 500; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: .08em; color: var(--sm-fg); }
.hero-slogan > b i { font-style: normal; color: var(--sm-accent); }
.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 .book-showcase,
.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 {
  background: linear-gradient(180deg, var(--lg-sheen), transparent 50%), var(--lg-tint-clear); border: 0; border-radius: 999px; padding: 10px 14px;
  -webkit-backdrop-filter: blur(8px) saturate(1.8); backdrop-filter: blur(8px) saturate(1.8);
  box-shadow: inset 1.5px 1.5px 1px -1px var(--lg-rim-hi), inset -1.5px -1.5px 1px -1px var(--lg-rim-lo), inset 0 0 0 .5px var(--lg-edge), var(--lg-shadow);
}

/* 联系区与页脚：更安静的收尾。 */
.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; }

/* ---------- 7. 共生标语板：彩色流体在玻璃下缓慢流动，折射与色散在这里最明显 ---------- */
.symbiosis-band { position: relative; z-index: 1; padding: clamp(80px, 10vw, 150px) 0; overflow: clip; }
.symbiosis-band .sm-container { position: relative; display: grid; place-items: center; }
.symbiosis-band .sm-container::before,
.symbiosis-band .sm-container::after {
  content: ""; position: absolute; z-index: 0; width: min(420px, 48vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  filter: blur(36px); opacity: .9; animation: lg-drift 16s ease-in-out infinite alternate;
}
.symbiosis-band .sm-container::before { left: 12%; top: 4%; background: radial-gradient(circle, rgba(70, 214, 170, .55), transparent 66%); }
.symbiosis-band .sm-container::after { right: 10%; bottom: 0; background: radial-gradient(circle, rgba(232, 182, 104, .38), transparent 66%); animation-duration: 21s; animation-direction: alternate-reverse; }
:root[data-theme="light"] .symbiosis-band .sm-container::before { background: radial-gradient(circle, rgba(40, 190, 148, .42), transparent 66%); }
:root[data-theme="light"] .symbiosis-band .sm-container::after { background: radial-gradient(circle, rgba(236, 180, 96, .4), transparent 66%); }
@keyframes lg-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14vw, 6vw, 0) scale(1.15, .9); }
  100% { transform: translate3d(26vw, -3vw, 0) scale(.92, 1.08); }
}
.lg-plate {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 24px; text-align: center;
  width: min(940px, 100%); padding: clamp(44px, 6vw, 84px) clamp(22px, 5vw, 64px); border-radius: 44px;
}
.studio-site .lg-plate { --lg-blur: 10px; --lg-tint: rgba(26, 30, 34, .16); }
:root[data-theme="light"] .studio-site .lg-plate { --lg-tint: rgba(255, 255, 255, .28); }
.lg-plate h2 { margin: 0; font-family: var(--sm-font-display); font-weight: 500; font-size: clamp(46px, 7.6vw, 108px); line-height: 1.1; letter-spacing: .05em; }
.lg-plate h2 em { font-style: normal; color: var(--sm-accent); }
.lg-plate-pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.lg-plate-pairs li { padding: 9px 16px; border-radius: 999px; font-size: 13px; color: var(--sm-fg-2); background: color-mix(in srgb, var(--sm-fg) 5%, transparent); box-shadow: inset 0 0 0 .5px var(--lg-edge); }
.lg-plate-pairs b { color: var(--sm-fg); font-weight: 600; margin-right: 6px; }

/* ---------- 8. 统一提示：每张卡不再各自重复说明 ---------- */
.book-deck .rf-case > .demo-notice { display: none; }
.deck-notice { display: block; margin-top: 18px; font-size: 12px; color: var(--sm-fg-3); text-align: right; }

/* ---------- 9. 手机：居中滑动轮播，当前作品自动播放 ---------- */
.book-deck.is-snap .rf-case-viewport { width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; perspective: none; }
.book-deck.is-snap .rf-case-track {
  --snap-pad: 10vw;
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--snap-pad);
  padding: 8px var(--snap-pad) 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  transform: none !important;
}
.book-deck.is-snap .rf-case-track::-webkit-scrollbar { display: none; }
.book-deck.is-snap .rf-case {
  flex: 0 0 calc(100vw - 2 * var(--snap-pad, 10vw)); width: auto; min-height: 0;
  display: flex !important; visibility: visible !important; pointer-events: auto !important;
  transform: none !important; opacity: 1 !important; filter: none !important;
  scroll-snap-align: center; scroll-snap-stop: always;
  padding: 18px 16px 18px; border-radius: 28px;
  scale: .96; transition: scale .45s var(--lg-ease), opacity .45s ease;
}
.book-deck.is-snap .rf-case.is-current { scale: 1; }
.book-deck.is-snap .rf-case:not(.is-current) { opacity: .6 !important; }
.book-deck.is-snap .rf-case .rf-case-copy,
.book-deck.is-snap .rf-case .rf-case-media { visibility: visible !important; }
.book-deck.is-snap .case-side,
.book-deck.is-snap .case-media-controls,
.book-deck.is-snap .rf-carousel-controls { display: none; }
.book-deck.is-snap .rf-carousel-bottom { margin: 4px 0 0; justify-content: center; }
.book-deck.is-snap .rf-case-tabs { max-width: 100%; justify-content: flex-start; }
.book-deck.is-snap .rf-case h3 { margin-bottom: 14px; }

@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; }
  .hero-slogan { margin-top: 18px; gap: 6px; }
  .hero-slogan > b { font-size: 21px; }
  .studio-site .rf-hero-actions { margin-top: 24px; }
  .studio-site .sm-nav [data-sm-logo] { padding: 7px 12px 7px 9px; }
  .deck-notice { text-align: center; font-size: 10px; margin-top: 8px; }
  .lg-plate { border-radius: 32px; gap: 18px; }
  .lg-plate-pairs li { font-size: 11px; padding: 7px 11px; }
  .symbiosis-band { padding: 48px 0 64px; }
  .symbiosis-band .sm-container::before, .symbiosis-band .sm-container::after { width: 62vw; }
  .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) {
  .book-deck.is-snap .rf-case { transition: none; }
  .symbiosis-band .sm-container::before, .symbiosis-band .sm-container::after { animation: none; }
  .studio-site .liquid-panel::before, .studio-site .sm-glass::before { transition: none; }
}

/* 首页的共生标语板已列出三方角色，Loop 不再重复。 */
body[data-page=index] .loop-roles { display: none; }