/* UI：设计令牌；集中控制深黑、纸白、玫红、尺度与可读性。 */
:root {
  --ink: #0b0a0d;
  --ink-soft: #17151a;
  --paper: #f4f0e8;
  --muted: #bab3b9;
  --quiet: #8e858d;
  --rule: rgb(242 240 234 / 18%);
  --rule-strong: rgb(242 240 234 / 44%);
  --accent: #e70444;
  --pink: #ff4a8c;
  --font-display: "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-meta: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: clamp(2.75rem, 6vw, 5.5rem);
  --space-6: clamp(3.5rem, 9vw, 8rem);
  --content-width: 78rem;
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: var(--ink);
  color: var(--paper);
  scroll-behavior: smooth;
}

/* UI：基础排版与选择反馈；保证长页面的阅读节奏。 */
* { box-sizing: border-box; }
html { background: var(--ink); }
body { min-width: 0; margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); }
body::selection { background: var(--accent); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* UI：可访问焦点；用玫红描边在深色背景中保留明确的键盘路径。 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* UI：背景信号场；纯 CSS 的竖向字符/扫描线质感，避免外部图片依赖。 */
.signal-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(90deg, transparent 0 8%, rgb(242 240 234 / 3%) 8.1% 8.22%, transparent 8.32% 17%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgb(242 240 234 / 2%) 73px 74px, transparent 75px 148px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgb(242 240 234 / 2%) 8px 9px, transparent 10px 17px);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 74%) 40%, transparent 90%);
}

/* UI：左侧 HUD 进度轨；仅作为页面方位感装饰。 */
.hud-rail {
  position: fixed;
  z-index: 3;
  top: 13rem;
  bottom: 2.5rem;
  left: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 1px;
  border-left: 1px solid var(--rule-strong);
  color: var(--quiet);
  font-size: 0.56rem;
}
.hud-rail i { display: block; width: 7px; height: 7px; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--ink); }
.hud-rail span { writing-mode: vertical-rl; transform: rotate(180deg); }

/* UI：固定导航；半透明深色底保证滚动时导航清晰。 */
.site-header {
  position: sticky;
  z-index: 5;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.5rem;
  padding: 0 4vw;
  border-bottom: 1px solid var(--rule);
  background: rgb(8 9 9 / 87%);
  backdrop-filter: blur(14px);
}
.wordmark { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; }
.site-header nav { display: flex; justify-content: flex-end; gap: clamp(0.8rem, 2vw, 1.75rem); color: var(--muted); font-size: 0.67rem; letter-spacing: 0.04em; text-transform: uppercase; }
.site-header nav a { position: relative; padding: 0.4rem 0; }
.site-header nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--paper); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--paper); }
.site-header nav a:hover::after,
.site-header nav a[aria-current="page"]::after { transform: scaleX(1); }
/* UI：音乐入口延续导航的轻量终端按钮语言；状态文字始终可读，便于区分播放、暂停与待添加。 */
.site-header nav .music-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 0 0 auto; padding: 0.42rem 0.58rem; border: 1px solid var(--rule-strong); background: transparent; color: var(--paper); cursor: pointer; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.site-header nav .music-toggle[aria-pressed="true"] { border-color: var(--pink); background: var(--pink); color: var(--ink); }
.site-header nav .music-toggle:disabled { opacity: 0.56; cursor: not-allowed; }
.site-header nav .music-toggle:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.menu-toggle { display: none; border: 1px solid var(--rule-strong); border-radius: 0; background: transparent; color: var(--paper); cursor: pointer; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* UI：主内容容器；以稳定边距包裹不同密度的模块。 */
main { position: relative; z-index: 1; max-width: var(--content-width); margin: 0 auto; padding: 0 5vw; }
.hero { display: grid; align-content: center; min-height: calc(100svh - 4.5rem); padding: var(--space-5) 0 var(--space-6); }
.eyebrow { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr); align-items: end; gap: var(--space-5); margin: clamp(3.5rem, 12vh, 8rem) 0 var(--space-5); }
.terminal-prompt { margin-bottom: var(--space-3); color: var(--muted); font-size: clamp(0.75rem, 1.1vw, 0.95rem); }
.terminal-prompt::first-letter { color: var(--accent); }
h1 { max-width: 11ch; font-size: clamp(3.25rem, 8.5vw, 8.5rem); font-weight: 500; letter-spacing: -0.08em; line-height: 0.87; }
.hero-copy { max-width: 29rem; color: var(--muted); font-size: clamp(0.88rem, 1.2vw, 1.06rem); line-height: 1.75; }
.capability-triad { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.capability-triad li { padding: 1rem 0; color: var(--muted); font-size: clamp(0.64rem, 1.1vw, 0.8rem); letter-spacing: 0.06em; text-transform: uppercase; }
.capability-triad li + li { padding-left: var(--space-3); border-left: 1px solid var(--rule); }
.scroll-cue { justify-self: start; margin-top: var(--space-5); color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 180ms ease; }
.scroll-cue:hover { color: var(--accent); }
.scroll-cue span { display: inline-block; margin-left: 0.5rem; color: var(--accent); }

/* UI：章节标题；用小标签和大标题建立内容层级。 */
.content-section { padding: var(--space-6) 0; border-top: 1px solid var(--rule); scroll-margin-top: 4.5rem; }
.section-heading { display: grid; grid-template-columns: 0.8fr 1.5fr 0.8fr; gap: var(--space-4); align-items: start; margin-bottom: var(--space-5); }
.section-heading h2,
.about-grid h2 { font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -0.065em; line-height: 0.95; }
.section-heading > p:last-child { color: var(--muted); font-size: 0.8rem; line-height: 1.7; }

/* UI：项目卡片；方角、细边、悬浮位移和能力标签突出系统型案例。 */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); }
.project-card { display: flex; min-height: 27rem; flex-direction: column; padding: var(--space-3); background: rgb(16 18 18 / 62%); transition: background 180ms ease, transform 180ms ease; }
.project-card + .project-card { border-left: 1px solid var(--rule); }
.project-card:hover { background: var(--ink-soft); transform: translateY(-0.3rem); }
.project-card--featured { background: rgb(242 240 234 / 7%); }
.project-index { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.09em; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--space-4) 0 auto; }
.tags li { border: 1px solid var(--rule); padding: 0.34rem 0.42rem; color: var(--muted); font-size: 0.58rem; letter-spacing: 0.035em; text-transform: uppercase; }
.project-card h3 { max-width: 12ch; margin: var(--space-4) 0 var(--space-2); font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 500; letter-spacing: -0.055em; line-height: 1; }
.project-card > p:not(.project-index) { color: var(--muted); font-size: 0.78rem; line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; margin-top: var(--space-4); color: var(--paper); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.text-link span { color: var(--accent); transition: transform 180ms ease; }
.text-link:hover span { transform: translate(0.2rem, -0.2rem); }
/* UI：AI Lab 列表；以行级元信息模拟研究记录。 */
.split-section { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-5); }
.split-section .section-heading { display: block; margin: 0; }
.lab-list { border-top: 1px solid var(--rule); }
.lab-entry { display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.lab-entry > span:first-child { color: var(--accent); font-size: 0.7rem; }
.lab-entry h3 { margin-bottom: 0.5rem; font-size: 1rem; font-weight: 500; }
.lab-entry p { max-width: 37rem; color: var(--muted); font-size: 0.75rem; line-height: 1.65; }
.status { color: var(--muted); font-size: 0.58rem; letter-spacing: 0.08em; }

/* UI：Craft 原则卡；低噪声网格体现基本功与方法论。 */
.craft-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.craft-grid article { min-height: 15rem; padding: var(--space-3); border-bottom: 1px solid var(--rule); }
.craft-grid article + article { border-left: 1px solid var(--rule); }
.craft-grid span { color: var(--accent); font-size: 0.68rem; }
.craft-grid h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.04em; }
.craft-grid p { color: var(--muted); font-size: 0.76rem; line-height: 1.7; }

/* UI：关于与页脚；以更大的文字作为叙事收尾。 */
.about-section { padding-bottom: var(--space-6); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 0.65fr); gap: var(--space-5); margin-top: var(--space-4); }
.about-grid > div { padding-top: 0.4rem; color: var(--muted); font-size: 0.83rem; line-height: 1.75; }
.contact-placeholder { margin-top: var(--space-4); color: var(--paper); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: var(--space-2); max-width: var(--content-width); margin: 0 auto; padding: 1.25rem 5vw 2rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* UI：窄屏布局；保持内容单列、无横向溢出，并为渐进式菜单预留状态。 */
@media (max-width: 720px) {
  .hud-rail { display: none; }
  .site-header { grid-template-columns: 1fr auto; gap: var(--space-2); padding: 0 1.25rem; }
  /* 无脚本时导航保持展开，因此隐藏无法工作的菜单控件。 */
  html.js-enabled .menu-toggle { display: block; padding: 0.48rem 0.65rem; }
  .site-header nav { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; gap: 0.8rem 1.25rem; padding-bottom: 0.8rem; }
  html.js-enabled .site-header nav { display: none; }
  html.js-enabled .site-header[data-menu-open="true"] nav { display: flex; }
  main { padding: 0 1.25rem; }
  .hero { min-height: calc(100svh - 4.5rem); }
  .hero-grid,
  .section-heading,
  .split-section,
  .about-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero-grid { margin: 4.5rem 0 var(--space-5); }
  .section-heading { margin-bottom: var(--space-4); }
  .section-heading > p:last-child { max-width: 34rem; }
  .project-grid,
  .craft-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 21rem; }
  .project-card + .project-card,
  .craft-grid article + article { border-top: 1px solid var(--rule); border-left: 0; }
  .capability-triad { grid-template-columns: 1fr; }
  .capability-triad li + li { padding-left: 0; border-top: 1px solid var(--rule); border-left: 0; }
  .lab-entry { grid-template-columns: 1.5rem 1fr; }
  .status { grid-column: 2; }
  .site-footer { flex-direction: column; padding-right: 1.25rem; padding-left: 1.25rem; }
}

/* UI：极窄屏标题保护；保证 “Interaction” 在 320px 环境仍有安全余量。 */
@media (max-width: 360px) {
  .hero h1 { font-size: 3rem; }
}

/* UI：减弱动效；用户声明减少动态时保留所有内容与状态。 */
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* UI：首页项目封面；用同一尺寸的视觉窗口把案例卡从文字清单升级为编辑化入口。 */
.project-card .tags { margin: var(--space-3) 0; }
.project-card__cover { display: block; width: 100%; aspect-ratio: 1.25 / 0.78; margin-top: auto; border: 1px solid var(--rule); background: var(--ink); object-fit: cover; object-position: center; filter: saturate(0.9) contrast(1.04); transition: filter 180ms ease, transform 180ms ease; }
.project-card:hover .project-card__cover { filter: saturate(1.05) contrast(1.08); transform: scale(1.012); }
.project-card--featured .project-card__cover { background: var(--paper); }
.project-evidence { display: block; margin: calc(var(--space-2) * -0.25) 0 var(--space-2); color: var(--muted); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; }
.project-evidence--real { color: var(--accent); }

/* UI：案例页主体；较窄阅读列让长篇叙事和高密度视觉形成清晰节奏。 */
.case-page,
.about-page { position: relative; z-index: 1; max-width: 88rem; margin: 0 auto; padding: 0 5vw; }
.case-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 1.05fr); gap: clamp(2rem, 5vw, 5rem); min-height: calc(100svh - 4.5rem); padding: clamp(3rem, 8vw, 7rem) 0 var(--space-5); }
.case-hero__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.evidence-badge { border: 1px solid var(--rule-strong); padding: 0.25rem 0.45rem; color: var(--paper); background: rgb(16 18 18 / 72%); }
.evidence-badge--real { border-color: var(--accent); color: var(--accent); }
.case-hero__content { align-self: end; }
.case-hero h1,
.about-hero h1 { max-width: 11ch; margin: var(--space-3) 0 var(--space-4); font-size: clamp(2.85rem, 6vw, 6.5rem); font-weight: 500; letter-spacing: -0.075em; line-height: 0.9; }
.case-hero__lead { max-width: 39rem; color: var(--muted); font-size: clamp(0.88rem, 1.2vw, 1.03rem); line-height: 1.8; }
.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-5); }
.case-facts div { min-width: 0; border-top: 1px solid var(--rule); padding-top: 0.65rem; }
.case-facts dt { margin-bottom: 0.4rem; color: var(--muted); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; }
.case-facts dd { margin: 0; color: var(--paper); font-size: 0.66rem; line-height: 1.55; }
.case-hero__visual { position: relative; align-self: end; min-width: 0; min-height: min(48vw, 41rem); margin: 0; overflow: hidden; border: 1px solid var(--rule); background: var(--ink-soft); }
.case-hero__visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-hero--creative .case-hero__visual { background: var(--paper); }
.case-hero--creative .case-hero__visual > img { filter: saturate(0.82); }

/* UI：CastLoop 页头拼贴；真实界面通过大小与层级建立案例的首屏张力。 */
.case-hero__collage { padding: 7% 7% 13%; background: linear-gradient(135deg, rgb(231 4 68 / 14%), transparent 43%), var(--ink-soft); }
.case-hero__collage-main { height: auto !important; border: 1px solid var(--rule-strong); box-shadow: 1.2rem 1.2rem 0 rgb(0 0 0 / 32%); object-fit: contain !important; }
.case-hero__collage-float { position: absolute; right: 4%; bottom: 5%; width: 42% !important; height: auto !important; border: 1px solid var(--rule-strong); box-shadow: 0.8rem 0.8rem 0 rgb(0 0 0 / 32%); }

/* UI：案例目录；粘性小导航让长案例保持当前位置与阅读方向。 */
.case-toc { position: sticky; z-index: 4; top: 4.5rem; display: flex; gap: 0; overflow-x: auto; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: rgb(8 9 9 / 92%); backdrop-filter: blur(14px); }
.case-toc a { flex: 1 0 auto; padding: 0.9rem 1rem; color: var(--muted); font-size: 0.62rem; letter-spacing: 0.07em; text-align: center; text-transform: uppercase; transition: color 180ms ease, background 180ms ease; }
.case-toc a + a { border-left: 1px solid var(--rule); }
.case-toc a:hover { color: var(--ink); background: var(--accent); }
.case-toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; color: var(--paper); background: rgb(231 4 68 / 12%); }

/* UI：案例叙事章节；每一段遵循“标签—判断—证据”的统一阅读节奏。 */
.case-chapter { padding: clamp(4rem, 9vw, 8rem) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 8rem; }
.case-chapter--surface { margin: 0 calc(50% - 50vw); padding-right: calc(50vw - 50% + 5vw); padding-left: calc(50vw - 50% + 5vw); background: rgb(242 240 234 / 4%); }
.case-chapter__intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr); gap: var(--space-5); align-items: start; margin-top: var(--space-3); }
.case-chapter__intro h2 { max-width: 17ch; font-size: clamp(2rem, 4.6vw, 4.7rem); font-weight: 500; letter-spacing: -0.07em; line-height: 0.94; }
.case-chapter__intro > p { max-width: 31rem; color: var(--muted); font-size: 0.86rem; line-height: 1.85; }
.case-stat-grid,
.contrast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-5); border: 1px solid var(--rule); }
.case-stat-grid article,
.contrast-grid article { min-height: 10rem; padding: var(--space-3); }
.case-stat-grid article + article,
.contrast-grid article + article { border-left: 1px solid var(--rule); }
.case-stat-grid strong { display: block; margin-bottom: var(--space-3); font-size: 1rem; font-weight: 500; }
.case-stat-grid span,
.contrast-grid p { color: var(--muted); font-size: 0.75rem; line-height: 1.65; }
.contrast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contrast-grid span { color: var(--accent); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; }
.contrast-grid h3 { margin: var(--space-3) 0 var(--space-2); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }

/* UI：系统关系图；不依赖脚本，用稳定的对象链路呈现核心设计判断。 */
.system-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0.6rem; align-items: center; margin-top: var(--space-5); padding: clamp(1rem, 4vw, 3rem); border: 1px solid var(--rule); background: radial-gradient(circle at 23% 70%, rgb(231 4 68 / 13%), transparent 28%), var(--ink-soft); }
.system-map__node { display: grid; min-height: 8rem; align-content: center; gap: 0.65rem; border: 1px solid var(--rule-strong); padding: 1rem; color: var(--paper); font-size: clamp(0.82rem, 1.4vw, 1.05rem); line-height: 1.15; }
.system-map__node small { color: var(--muted); font-size: 0.58rem; letter-spacing: 0.05em; }
.system-map__node--input { background: rgb(242 240 234 / 6%); }
.system-map__node--action { border-color: var(--accent); background: rgb(231 4 68 / 9%); }
.system-map__arrow { color: var(--accent); font-size: 1.4rem; }
.system-map--creative { background: radial-gradient(circle at 75% 32%, rgb(231 4 68 / 20%), transparent 27%), var(--ink-soft); }
.system-map--castloop { background: radial-gradient(circle at 34% 48%, rgb(255 109 75 / 16%), transparent 29%), var(--ink-soft); }

/* UI：体验步骤；让界面背后的交互因果成为可快速扫描的内容。 */
.experience-steps,
.method-list { margin: var(--space-5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.experience-steps li,
.method-list li { display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.experience-steps span,
.method-list span { color: var(--accent); font-size: 0.72rem; }
.experience-steps h3,
.method-list h3 { margin: 0 0 0.45rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.04em; }
.experience-steps p,
.method-list p { max-width: 43rem; color: var(--muted); font-size: 0.8rem; line-height: 1.75; }

/* UI：真实项目证据画廊；图片保持原比例，文字说明它证明的工作视图。 */
.case-evidence-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.case-evidence-gallery figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--rule); background: var(--ink-soft); }
.case-evidence-gallery__wide { grid-column: 1 / -1; }
.case-evidence-gallery img { display: block; width: 100%; height: auto; transition: transform 220ms ease; }
.case-evidence-gallery figure:hover img { transform: scale(1.012); }
.case-evidence-gallery figcaption { padding: 0.9rem 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.72rem; line-height: 1.65; }
.case-evidence-gallery figcaption b { color: var(--paper); font-weight: 500; }
.reflection-note { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-3); margin-top: var(--space-5); border-left: 2px solid var(--accent); padding: 1rem 1.25rem; background: rgb(231 4 68 / 6%); }
.reflection-note span { color: var(--accent); font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; }
.reflection-note p { max-width: 43rem; color: var(--muted); font-size: 0.8rem; line-height: 1.75; }

/* UI：案例前后翻页；视觉上形成明确的阅读出口与下一步。 */
.case-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-5) 0 var(--space-6); border: 1px solid var(--rule); }
.case-pagination a { min-height: 8rem; display: grid; align-content: end; padding: var(--space-3); color: var(--muted); font-size: clamp(0.75rem, 1.2vw, 0.95rem); line-height: 1.5; transition: color 180ms ease, background 180ms ease; }
.case-pagination a + a { border-left: 1px solid var(--rule); text-align: right; }
.case-pagination a:hover { color: var(--ink); background: var(--accent); }

/* UI：个人页首屏；以用户提供的人物形象和能力信号共同呈现身份。 */
.about-hero { min-height: calc(100svh - 4.5rem); display: grid; align-content: center; padding: var(--space-5) 0 var(--space-6); }
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr); gap: var(--space-5); align-items: end; margin: clamp(3.5rem, 12vh, 8rem) 0 var(--space-4); }
.about-hero h1 { max-width: 13ch; margin: 0; }
.about-hero__signal { display: grid; gap: 0.75rem; border: 1px solid var(--rule); padding: var(--space-3); background: linear-gradient(140deg, rgb(231 4 68 / 12%), transparent 58%); }
.about-hero__signal span { border-bottom: 1px solid var(--rule); padding-bottom: 0.65rem; color: var(--paper); font-size: clamp(0.75rem, 1.4vw, 1.05rem); letter-spacing: 0.08em; }
.about-hero__signal span:last-child { border-bottom: 0; padding-bottom: 0; color: var(--accent); }
.about-hero__lead { max-width: 43rem; color: var(--muted); font-size: clamp(0.9rem, 1.25vw, 1.08rem); line-height: 1.8; }
.about-module { padding: var(--space-6) 0; border-top: 1px solid var(--rule); }
.about-module--surface { margin: 0 calc(50% - 50vw); padding-right: calc(50vw - 50% + 5vw); padding-left: calc(50vw - 50% + 5vw); background: rgb(242 240 234 / 4%); }
.about-module__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr); gap: var(--space-5); margin-top: var(--space-3); }
.about-module h2 { max-width: 16ch; font-size: clamp(2rem, 4.6vw, 4.7rem); font-weight: 500; letter-spacing: -0.07em; line-height: 0.94; }
.about-module__grid > p,
.about-module__grid > div > p { color: var(--muted); font-size: 0.86rem; line-height: 1.85; }
.skill-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.skill-map article { min-height: 11rem; padding: var(--space-3); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.skill-map span { color: var(--accent); font-size: 0.64rem; letter-spacing: 0.08em; }
.skill-map p { margin-top: var(--space-3); color: var(--muted); font-size: 0.75rem; line-height: 1.7; }

/* UI：二级页窄屏适配；将复杂封面、目录和叙事模块压缩为安全的单列阅读。 */
@media (max-width: 720px) {
  .project-card__cover { margin-top: var(--space-3); }
  .case-page,
  .about-page { padding: 0 1.25rem; }
  .case-hero,
  .case-chapter__intro,
  .about-hero__grid,
  .about-module__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .case-hero { min-height: auto; padding-top: var(--space-5); }
  .case-hero__visual { min-height: 0; aspect-ratio: 1 / 0.78; }
  .case-facts,
  .case-stat-grid,
  .contrast-grid { grid-template-columns: 1fr; }
  .case-facts div + div,
  .case-stat-grid article + article,
  .contrast-grid article + article { border-top: 1px solid var(--rule); border-left: 0; }
  .case-chapter--surface,
  .about-module--surface { margin-right: -1.25rem; margin-left: -1.25rem; padding-right: 1.25rem; padding-left: 1.25rem; }
  .system-map { grid-template-columns: 1fr; }
  .system-map__arrow { justify-self: center; transform: rotate(90deg); }
  .case-evidence-gallery,
  .skill-map { grid-template-columns: 1fr; }
  .case-evidence-gallery__wide { grid-column: auto; }
  .case-pagination { grid-template-columns: 1fr; }
  .case-pagination a + a { border-top: 1px solid var(--rule); border-left: 0; }
  .reflection-note { grid-template-columns: 1fr; }
  .case-toc { margin-right: -1.25rem; margin-left: -1.25rem; }
  .case-toc a { min-width: 6rem; }
}

/* UI：街头拼贴主题；用自有项目画面、纸张、网点与玫红建立视觉识别。 */
.site-header { background: rgb(11 10 13 / 91%); }
.wordmark { font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.04em; }
.site-header nav,
.eyebrow,
.project-index,
.project-evidence,
.case-hero__meta,
.case-toc { font-family: var(--font-meta); }
.site-header nav a[aria-current="page"]::after { background: var(--pink); height: 3px; }
.signal-field {
  opacity: 0.32;
  overflow: hidden;
  background-image: radial-gradient(rgb(244 240 232 / 13%) 0.8px, transparent 0.8px),
    repeating-linear-gradient(0deg, transparent 0 28px, rgb(244 240 232 / 2%) 29px 30px);
  background-size: 9px 9px, auto;
}
/* UI：背景远近两层只绘制光晕与细线；保留透明度，让正文与项目截图始终成为视觉重点。 */
.signal-field::before,
.signal-field::after { position: absolute; inset: -6rem; content: ""; }
.signal-field::before {
  background-image:
    radial-gradient(ellipse 38% 30% at 77% 24%, rgb(231 4 68 / 48%), transparent 72%),
    radial-gradient(ellipse 28% 24% at 14% 75%, rgb(255 74 140 / 28%), transparent 74%);
}
.signal-field::after {
  background-image:
    radial-gradient(circle at 80% 53%, transparent 0 11rem, rgb(244 240 232 / 18%) 11.08rem 11.14rem, transparent 11.2rem),
    repeating-linear-gradient(110deg, transparent 0 23rem, rgb(255 74 140 / 13%) 23.04rem 23.1rem, transparent 23.16rem 35rem);
}
.hud-rail { border-color: var(--pink); }

/* UI：首屏纸片；粗标题与右侧三张项目图形成一个可读的电影海报。 */
.hero { width: calc(100% + 5vw); min-height: calc(100svh - 4.5rem); padding-top: clamp(2rem, 5vw, 4rem); overflow: clip; scroll-margin-top: 4.5rem; }
.hero-story { position: relative; isolation: isolate; }
.hero-story::before {
  position: absolute; z-index: -2; top: 1.2rem; right: 0; width: 42%; height: 82%;
  background: var(--accent); content: "";
  clip-path: polygon(8% 0, 100% 3%, 96% 93%, 20% 100%, 0 82%);
  transform: rotate(5deg);
}
.hero-story::after {
  position: absolute; z-index: -1; top: 0; right: 0; width: 38%; height: 82%;
  background-image: radial-gradient(rgb(11 10 13 / 44%) 1px, transparent 1px);
  background-size: 7px 7px; content: ""; transform: rotate(5deg);
}
.hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(1rem, 4vw, 4rem); margin: clamp(2.2rem, 5vh, 4.5rem) 0 clamp(2rem, 5vh, 4rem); }
.hero-grid__copy { position: relative; z-index: 2; }
.terminal-prompt { width: fit-content; padding: 0.4rem 0.65rem; color: var(--ink); background: var(--paper); font-family: var(--font-meta); font-size: 0.72rem; font-weight: 700; transform: rotate(-2deg); }
.terminal-prompt::first-letter { color: var(--accent); }
.hero h1 { max-width: none; font-family: var(--font-display); font-size: clamp(4rem, 8.5vw, 8.5rem); font-weight: 900; letter-spacing: -0.09em; line-height: 0.94; text-shadow: 0.055em 0.055em 0 var(--ink); }
.hero-copy { max-width: 33rem; margin-top: 1.75rem; color: var(--paper); font-size: clamp(0.94rem, 1.35vw, 1.12rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-actions a { display: inline-flex; justify-content: space-between; gap: 1.5rem; min-width: 11rem; padding: 0.9rem 1.1rem; border: 2px solid var(--accent); background: var(--accent); color: #fff; font-family: var(--font-meta); font-size: 0.75rem; font-weight: 700; transition: transform 180ms ease, background 180ms ease; }
.hero-actions a + a { border-color: var(--paper); background: var(--ink); color: var(--paper); }
.hero-actions a:hover { transform: translateY(-4px) rotate(-1deg); }
.hero-actions a + a:hover { background: var(--ink-soft); }
.hero-actions span { font-size: 1rem; line-height: 1; }
.hero-art { position: relative; min-height: clamp(24rem, 38vw, 34rem); transform: translateX(-1.5rem); }
.hero-art__frame { position: absolute; margin: 0; padding: 0.45rem 0.45rem 1.7rem; border: 1px solid rgb(11 10 13 / 22%); background: var(--paper); box-shadow: 0.8rem 1rem 0 rgb(11 10 13 / 35%); }
.hero-art__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-art__frame--story { top: 7%; left: 3%; width: 62%; height: 52%; transform: rotate(-10deg); }
.hero-art__frame--castloop { z-index: 1; top: 25%; right: 0; width: 66%; height: 53%; transform: rotate(7deg); }
.hero-art__frame--creative { z-index: 2; bottom: 0; left: 8%; width: 58%; height: 38%; transform: rotate(-4deg); }
.hero-art__tape { position: absolute; z-index: 3; top: 5%; left: 23%; width: 7rem; height: 1.8rem; background: rgb(244 240 232 / 73%); transform: rotate(-15deg); }
.hero-art__stamp { position: absolute; z-index: 4; right: 0; bottom: 0; padding: 0.55rem 0.8rem; border: 3px solid var(--ink); background: var(--pink); color: var(--ink); font-family: var(--font-meta); font-size: 0.8rem; font-weight: 700; transform: rotate(9deg); }
/* UI：用户提供的人物透明抠图是首屏主角；原项目纸片后退，仍能提示作品内容。 */
.hero-art__frame--story { z-index: 1; top: 5%; left: -2%; width: 54%; height: 40%; }
.hero-art__frame--castloop { z-index: 1; top: 48%; right: -2%; width: 55%; height: 35%; }
.hero-art__frame--creative { z-index: 1; bottom: 0; left: 0; width: 47%; height: 27%; }
.hero-art__character {
  position: absolute; z-index: 3; bottom: 0; left: 7%; display: block; width: 86%; height: 96%;
  /* UI：比原首屏缩小约一成，完整保留头肩，并让背景项目纸片重新露出边缘。 */
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0.7rem 0.7rem 0 rgb(11 10 13 / 48%)); pointer-events: none;
}
/* UI：简短操作提示放在拼贴边缘；各方向静帧共用人物尺寸，不遮挡文案。 */
.hero-art__hint { position: absolute; z-index: 6; top: 0; right: 0; padding: 0.4rem 0.55rem; border: 1px solid var(--paper); background: var(--ink); color: var(--paper); font-family: var(--font-meta); font-size: 0.62rem; letter-spacing: 0.04em; pointer-events: none; transform: rotate(4deg); }
.hero-art__hint::before { display: inline-block; width: 0.35rem; height: 0.35rem; margin-right: 0.4rem; border-radius: 50%; background: var(--pink); content: ""; vertical-align: middle; }
/* UI：胶带粘在项目纸片上，层级低于人物头发，不遮挡面部。 */
.hero-art__tape { z-index: 2; }
.hero-art__stamp { z-index: 5; }
.capability-triad { border-color: var(--paper); }
.capability-triad li { color: var(--paper); font-family: var(--font-meta); font-weight: 700; }
.capability-triad li + li { border-color: var(--paper); }
.scroll-cue { color: var(--paper); font-family: var(--font-meta); }
.scroll-cue span { color: var(--pink); }

/* UI：项目纸片；项目名称、证据标签与入口始终在封面之外可读。 */
.section-heading h2,
.about-grid h2,
.case-chapter__intro h2,
.about-module h2 { font-family: var(--font-display); font-weight: 900; }
.project-grid { gap: clamp(1rem, 2vw, 1.7rem); border: 0; }
.project-card { position: relative; min-height: 33rem; padding: clamp(1rem, 2vw, 1.5rem); border: 2px solid var(--paper); background: var(--paper); color: var(--ink); box-shadow: 0.5rem 0.7rem 0 rgb(231 4 68 / 30%); transform: rotate(-1.5deg); transition: transform 220ms ease, box-shadow 220ms ease; }
.project-card:nth-child(2) { transform: rotate(1.2deg); }
.project-card:nth-child(3) { transform: rotate(-0.8deg); }
.project-card::before { position: absolute; z-index: 2; top: -0.9rem; left: calc(50% - 2.5rem); width: 5rem; height: 1.5rem; background: rgb(255 74 140 / 72%); content: ""; transform: rotate(-7deg); }
.project-card + .project-card { border-left: 2px solid var(--paper); }
.project-card:hover,
.project-card:nth-child(2):hover,
.project-card:nth-child(3):hover { background: var(--paper); box-shadow: 0.7rem 0.9rem 0 var(--accent); transform: translateY(-0.5rem) rotate(0); }
.project-card--featured { background: var(--paper); }
.project-index { color: #55515a; font-weight: 700; }
.project-card .tags { margin: 1rem 0; }
.project-card .tags li { border-color: rgb(11 10 13 / 25%); color: #4b4149; font-family: var(--font-meta); font-weight: 700; }
.project-card__cover { margin-top: 0; border: 1px solid rgb(11 10 13 / 24%); }
.project-card h3 { max-width: none; margin: 1rem 0 0.4rem; font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 900; letter-spacing: -0.055em; }
.project-evidence { width: fit-content; margin: 0 0 0.75rem; padding: 0.28rem 0.42rem; background: #242026; color: #fff; font-weight: 700; }
.project-evidence--real { background: var(--accent); color: #fff; }
.project-card > p:not(.project-index) { color: #3c363d; }
.project-card .text-link { color: var(--ink); font-family: var(--font-meta); font-weight: 700; }
.project-card .text-link span { color: var(--accent); }

/* UI：案例和个人页共享拼贴色块；真实界面仍按原比例放在图片元素内。 */
.case-hero,
.about-hero { position: relative; isolation: isolate; }
.case-hero::before,
.about-hero::before { position: absolute; z-index: -1; top: 18%; right: -3vw; width: 36%; height: 58%; background: var(--accent); content: ""; clip-path: polygon(0 5%, 93% 0, 100% 90%, 11% 100%); transform: rotate(5deg); }
.case-hero h1,
.about-hero h1 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.07em; }
.case-hero__visual { border: 0.5rem solid var(--paper); box-shadow: 1rem 1rem 0 rgb(11 10 13 / 48%); transform: rotate(2deg); }
.case-hero__collage { background: linear-gradient(135deg, rgb(231 4 68 / 22%), transparent 55%), var(--ink-soft); }
.evidence-badge--real { border-color: var(--pink); color: var(--pink); }
.about-hero__signal { position: relative; border: 0.5rem solid var(--paper); background: var(--ink-soft); box-shadow: 0.8rem 0.8rem 0 rgb(11 10 13 / 45%); transform: rotate(3deg); }
.about-hero__signal::before { position: absolute; top: -1.2rem; left: 40%; width: 5rem; height: 1.4rem; background: rgb(255 74 140 / 72%); content: ""; transform: rotate(-12deg); }
.about-hero__signal span:last-child { color: var(--pink); }
/* UI：个人页将同一人物放进玫红纸片；保留原有三个能力词作为底部识别条。 */
.about-hero__identity { position: relative; isolation: isolate; min-height: clamp(24rem, 38vw, 34rem); overflow: hidden; border: 0.45rem solid var(--paper); background: var(--ink-soft); box-shadow: 0.8rem 0.8rem 0 rgb(11 10 13 / 45%); transform: rotate(3deg); }
.about-hero__identity::before { position: absolute; z-index: -1; top: 10%; left: -8%; width: 118%; height: 92%; background: var(--accent); content: ""; clip-path: polygon(8% 0, 100% 9%, 90% 100%, 0 91%); transform: rotate(-6deg); }
.about-hero__identity::after { position: absolute; z-index: 3; top: -0.2rem; left: calc(50% - 2.5rem); width: 5rem; height: 1.5rem; background: rgb(244 240 232 / 72%); content: ""; transform: rotate(-8deg); }
.about-hero__portrait { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; filter: drop-shadow(0.5rem 0.5rem 0 rgb(11 10 13 / 38%)); }
/* UI：方向标记和提示采用站点的等宽字与玫红色，不改变拼贴的指针区域。 */
.about-hero__direction { position: absolute; z-index: 3; color: rgb(244 240 232 / 76%); font-family: var(--font-meta); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; pointer-events: none; text-shadow: 0 1px 4px var(--ink); }
.about-hero__direction--up { top: 2.4rem; left: 50%; transform: translateX(-50%); }
.about-hero__direction--left { top: 48%; left: 0.7rem; }
.about-hero__direction--right { top: 48%; right: 0.7rem; }
.about-hero__direction--down { right: 0.7rem; bottom: 4.2rem; }
.about-hero__hint { position: absolute; z-index: 3; top: 0.7rem; left: 0.7rem; margin: 0; padding: 0.35rem 0.5rem; background: rgb(11 10 13 / 74%); color: var(--paper); font-family: var(--font-meta); font-size: 0.62rem; letter-spacing: 0.04em; pointer-events: none; }
.about-hero__hint::before { display: inline-block; width: 0.36rem; height: 0.36rem; margin-right: 0.4rem; border-radius: 50%; background: var(--pink); content: ""; vertical-align: middle; }
.about-hero__identity .about-hero__signal { position: absolute; z-index: 4; right: 0.5rem; bottom: 0.5rem; left: 0.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 0.7rem; border: 1px solid var(--paper); background: rgb(11 10 13 / 90%); box-shadow: none; transform: none; pointer-events: none; }
.about-hero__identity .about-hero__signal::before { display: none; }
.about-hero__identity .about-hero__signal span { padding: 0; border: 0; font-family: var(--font-meta); font-size: clamp(0.6rem, 1vw, 0.75rem); }

/* UI：支持滚动时间线时只移动装饰线与图片，不隐藏正文内容。 */
@supports (animation-timeline: scroll()) {
  body::before { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 3px; background: var(--pink); content: ""; transform: scaleX(0); transform-origin: left; animation: reading-progress linear both; animation-timeline: scroll(root); pointer-events: none; }
  @keyframes reading-progress { to { transform: scaleX(1); } }
  /* UI：两层背景反向缓慢漂移，整个长页面最多分别移动 4rem 与 6rem。 */
  .signal-field::before { animation: ambient-far linear both; animation-timeline: scroll(root); }
  .signal-field::after { animation: ambient-near linear both; animation-timeline: scroll(root); }
  @keyframes ambient-far { from { transform: translate3d(0, -2rem, 0); } to { transform: translate3d(0, 2rem, 0); } }
  @keyframes ambient-near { from { transform: translate3d(0, 3rem, 0); } to { transform: translate3d(0, -3rem, 0); } }
}
@supports (animation-timeline: view()) {
  .project-card__cover { animation: cover-enter linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes cover-enter { from { filter: grayscale(0.7) contrast(1.1); } to { filter: grayscale(0) contrast(1); } }
}

/* UI：手机改为纵向海报；纸片不参与布局宽度，所有文字与操作留在安全区。 */
@media (max-width: 720px) {
  .hero { width: 100%; padding-top: 2.5rem; }
  .hero-story::before { top: 39%; right: -1.5rem; width: 80%; height: 36%; }
  .hero-story::after { top: 39%; right: -1.5rem; width: 80%; height: 36%; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; margin: 2rem 0 1.5rem; }
  .hero h1 { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .hero-copy { margin-top: 1.3rem; }
  .hero-actions { gap: 0.55rem; margin-top: 1.4rem; }
  .hero-actions a { min-width: 0; }
  .hero-art { min-height: clamp(22rem, 93vw, 28rem); margin: 0 0.5rem; transform: none; }
  .hero-art__character { bottom: 0; left: 6%; width: 88%; height: 98%; }
  .capability-triad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability-triad li { font-size: 0.65rem; text-align: center; }
  .capability-triad li + li { padding-left: 0; border-top: 0; border-left: 1px solid var(--paper); }
  .project-card,
  .project-card:nth-child(2),
  .project-card:nth-child(3) { min-height: 0; transform: none; }
  .project-card + .project-card { border-top: 2px solid var(--paper); }
  .case-hero { overflow: clip; }
  .case-hero::before { top: auto; right: -1.25rem; bottom: 1rem; width: 80%; height: 34%; }
  .about-hero { overflow: clip; }
  .about-hero::before { top: 24%; right: -1.25rem; width: 70%; height: 50%; }
  .case-hero__visual,
  .about-hero__signal { transform: none; }
  .about-hero__identity { min-height: clamp(22rem, 94vw, 29rem); transform: none; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 3.15rem; }
  .hero-actions { flex-direction: column; }
  .hero-art { min-height: 22rem; }
}

/* UI：减少动态偏好下停止滚动装饰，保留静态画面与全部链接。 */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; transform: none; }
  .project-card__cover { animation: none !important; filter: none; }
  /* UI：减少动态时保留同一背景纹理，但停止两层视差位移。 */
  .signal-field::before,
  .signal-field::after { animation: none !important; transform: none !important; }
}

/* UI：三个案例共用连续画面系统。仅作用于二级页，不改首页与 About 的玫红拼贴。 */
.case-deck {
  --deck-accent: #7ec9ff;
  --deck-strong: #35a4ee;
  --deck-glow: rgb(56 142 216 / 27%);
  --deck-panel: #111821;
  max-width: none;
  padding: 0;
  background: #070a0f;
}
.case-deck--creative-intelligence { --deck-accent: #8aa9ff; --deck-strong: #6d86ee; --deck-glow: rgb(80 96 215 / 28%); --deck-panel: #151622; }
.case-deck--castloop-studio { --deck-accent: #62ddcb; --deck-strong: #2aaf9e; --deck-glow: rgb(33 172 148 / 26%); --deck-panel: #101b1b; }
.case-deck .case-hero::before { display: none; }
.case-deck .case-toc { top: 4.5rem; justify-content: center; border-color: rgb(255 255 255 / 11%); background: rgb(7 10 15 / 94%); }
.case-deck .case-toc a { flex: 0 0 auto; min-width: 7rem; color: #c1cbd4; }
.case-deck .case-toc a:hover { background: var(--deck-accent); color: #071018; }
.case-deck .case-toc a:focus-visible { outline-color: var(--deck-accent); }

/* UI：每个画面有独立顶栏、内容区和页码栏，模仿连续作品集画幅的阅读节奏。 */
.case-deck .case-slide {
  display: block;
  min-height: calc(100svh - 4.5rem);
  margin: 0;
  padding: 0;
  border: 0;
  scroll-margin-top: 8rem;
  background: radial-gradient(ellipse at 87% 77%, var(--deck-glow), transparent 35%), #080b10;
}
.case-deck .case-slide:nth-of-type(3n) { background: radial-gradient(ellipse at 12% 84%, var(--deck-glow), transparent 38%), #0b0d13; }
.case-deck .case-slide:nth-of-type(4n) { background: linear-gradient(145deg, #111720, #080b10 61%); }
.case-deck .case-slide--cover { background: radial-gradient(ellipse at 55% 75%, var(--deck-glow), transparent 39%), linear-gradient(180deg, #07090d 12%, #172738 62%, #70afe2 115%); }
.case-deck--creative-intelligence .case-slide--cover { background: radial-gradient(ellipse at 64% 76%, var(--deck-glow), transparent 42%), linear-gradient(180deg, #08090e, #1a1e42 70%, #626ca9 125%); }
.case-deck--castloop-studio .case-slide--cover { background: radial-gradient(ellipse at 65% 75%, var(--deck-glow), transparent 40%), linear-gradient(180deg, #070c0d, #122b2a 70%, #307d72 125%); }
.case-deck .case-slide__inner { width: min(100%, 90rem); min-height: calc(100svh - 4.5rem); display: flex; flex-direction: column; margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.4rem, 5.3vw, 5.7rem); }
.case-deck .case-slide__top,
.case-deck .case-slide__bottom { display: flex; justify-content: space-between; gap: 1rem; color: #aab4bf; font-family: var(--font-meta); font-size: clamp(0.6rem, 0.8vw, 0.75rem); letter-spacing: 0.08em; text-transform: uppercase; }
.case-deck .case-slide__top { padding-bottom: 1rem; border-bottom: 1px solid rgb(255 255 255 / 16%); }
.case-deck .case-slide__bottom { align-items: end; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 11%); }
.case-deck .case-slide__bottom a { color: #e3f1fa; }
.case-deck .case-slide__bottom a:hover { color: var(--deck-accent); }
.case-deck .case-slide__content { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: clamp(1.5rem, 3vh, 2.5rem); padding: clamp(1.8rem, 4vh, 3rem) 0; }
/* UI：左上角标题区只承担定位；简短说明并排阅读，主体面积交给下方图文。 */
.case-deck .case-slide__copy { display: grid; grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 1fr); align-items: start; gap: 0.35rem clamp(1.5rem, 4vw, 4rem); width: 100%; min-width: 0; }
.case-deck .deck-kicker { grid-column: 1 / -1; margin-bottom: 0.35rem; color: var(--deck-accent); font-family: var(--font-meta); font-size: clamp(0.62rem, 0.8vw, 0.72rem); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.case-deck .case-slide__copy h2 { max-width: 21ch; font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.3; overflow-wrap: anywhere; }
.case-deck .deck-lead { max-width: 65rem; margin-top: 0; color: #d0d7de; font-size: clamp(0.86rem, 1vw, 0.98rem); line-height: 1.75; }
.case-deck .deck-note { grid-column: 2; width: fit-content; margin-top: 0.3rem; padding: 0.45rem 0.65rem; border: 1px solid rgb(255 255 255 / 30%); color: #d9e0e5; font-size: 0.7rem; }
.case-deck .case-slide__visual { display: flex; flex: 1; align-items: stretch; justify-content: center; width: 100%; min-width: 0; min-height: clamp(21rem, 50vh, 40rem); }
.case-deck .case-slide__visual > * { width: 100%; }

/* UI：封面与内页采用同样的左上角小标题，原项目主视觉占据主要画面。 */
.case-deck .case-hero { box-shadow: none; transform: none; }
.case-deck .case-cover__grid { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: clamp(1.5rem, 3vh, 2.5rem); padding: clamp(1.8rem, 4vh, 3rem) 0; }
.case-deck .case-cover__copy { display: grid; grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 1fr); gap: 0.4rem clamp(1.5rem, 4vw, 4rem); align-items: start; }
.case-deck .case-cover__copy h1 { grid-column: 1; grid-row: 2 / span 2; max-width: 24rem; margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.2; overflow-wrap: anywhere; }
.case-deck .case-cover__copy h1 em { display: block; max-width: none; margin-top: 0.45rem; color: var(--deck-accent); font-family: inherit; font-size: 0.5em; font-style: normal; letter-spacing: -0.02em; line-height: 1.3; }
.case-deck .case-cover__lead { grid-column: 2; grid-row: 2; max-width: 65rem; margin: 0; color: #e1e7ed; font-size: clamp(0.86rem, 1vw, 0.98rem); line-height: 1.75; }
.case-deck .evidence-badge { grid-column: 2; grid-row: 3; justify-self: start; display: inline-block; border-color: var(--deck-accent); color: var(--deck-accent); background: rgb(0 0 0 / 28%); font-size: 0.7rem; letter-spacing: 0.08em; }
.case-deck .case-cover__grid .deck-image { flex: 1; width: 100%; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 25%); transform: none; }

/* UI：卡片、步骤与示意面板是可阅读的 HTML 内容；概念面板始终标注示意属性。 */
.case-deck .deck-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; min-height: clamp(21rem, 50vh, 40rem); }
.case-deck .deck-cards article { min-height: 15rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid rgb(255 255 255 / 16%); border-radius: 1rem; background: linear-gradient(135deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%)); }
.case-deck .deck-cards article:first-child { background: linear-gradient(135deg, var(--deck-glow), rgb(255 255 255 / 3%) 78%); }
.case-deck .deck-cards span,
.case-deck .deck-flow span { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border: 1px solid var(--deck-accent); border-radius: 50%; color: var(--deck-accent); font-family: var(--font-meta); font-size: 0.66rem; }
.case-deck .deck-cards h3 { margin: 1.4rem 0 0.55rem; font-size: clamp(1rem, 1.7vw, 1.4rem); line-height: 1.35; }
.case-deck .deck-cards p { color: #b9c4cd; font-size: 0.78rem; line-height: 1.7; }
.case-deck .deck-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; min-height: clamp(21rem, 50vh, 40rem); margin: 0; padding: 0; list-style: none; }
.case-deck .deck-flow li { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-height: 15rem; padding: clamp(1rem, 2vw, 1.7rem); border: 1px solid rgb(255 255 255 / 17%); border-radius: 1rem; background: linear-gradient(145deg, var(--deck-glow), rgb(255 255 255 / 2%) 68%); }
.case-deck .deck-flow li:first-child { border-top: 1px solid rgb(255 255 255 / 17%); }
.case-deck .deck-flow strong { font-size: clamp(0.95rem, 1.5vw, 1.3rem); font-weight: 700; }
.case-deck .deck-flow small { margin-top: auto; color: #aebbc6; font-size: 0.77rem; line-height: 1.55; }
.case-deck .deck-statement { min-height: clamp(21rem, 50vh, 40rem); display: flex; flex-direction: column; justify-content: center; gap: 2.8rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgb(255 255 255 / 20%); border-radius: 1.5rem; background: radial-gradient(circle at 70% 70%, var(--deck-glow), transparent 45%), var(--deck-panel); }
.case-deck .deck-statement span { color: var(--deck-accent); font-family: var(--font-meta); font-size: 0.74rem; letter-spacing: 0.1em; }
.case-deck .deck-statement strong { max-width: 32ch; font-size: clamp(1.5rem, 2.4vw, 2.5rem); letter-spacing: -0.04em; line-height: 1.4; }
.case-deck .deck-concept { margin: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.35rem; background: #101723; box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 20%); }
.case-deck .deck-concept__chrome { display: flex; align-items: center; gap: 0.35rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid rgb(255 255 255 / 13%); background: rgb(255 255 255 / 5%); }
.case-deck .deck-concept__chrome i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #536273; }
.case-deck .deck-concept__chrome span { margin-left: auto; color: #aeb8c6; font-family: var(--font-meta); font-size: 0.58rem; letter-spacing: 0.06em; }
.case-deck .deck-concept__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; min-height: clamp(20rem, 46vh, 37rem); padding: clamp(1rem, 2vw, 1.7rem); }
.case-deck .deck-concept__body > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.8rem; min-height: 12rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid rgb(255 255 255 / 13%); border-radius: 0.7rem; background: linear-gradient(145deg, var(--deck-glow), rgb(255 255 255 / 2%) 80%); }
.case-deck .deck-concept__body span { color: var(--deck-accent); font-family: var(--font-meta); font-size: 0.75rem; }
.case-deck .deck-concept__body strong { font-size: 0.95rem; }
.case-deck .deck-concept__body small { color: #b5bec9; font-size: 0.73rem; }
.case-deck .deck-concept figcaption { padding: 0.75rem 1.1rem; border-top: 1px solid rgb(255 255 255 / 13%); color: #bdc7d0; font-size: 0.7rem; }

/* UI：界面证据始终保留原始长宽比和说明，不裁切为装饰背景。 */
.case-deck .deck-image { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 19%); border-radius: 1.25rem; background: var(--deck-panel); }
.case-deck .deck-image img { display: block; width: 100%; max-height: 67vh; object-fit: contain; }
.case-deck .deck-image figcaption { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.8rem 1rem; border-top: 1px solid rgb(255 255 255 / 13%); color: #c9d3dd; font-size: 0.72rem; line-height: 1.55; }
.case-deck .deck-image figcaption span { flex: 0 0 auto; color: var(--deck-accent); font-weight: 700; }
.case-deck .case-slide--gallery .case-slide__copy h2 { max-width: 21ch; }
.case-deck .case-slide--gallery .deck-lead { max-width: 65rem; }
.case-deck .deck-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.case-deck .deck-gallery img { height: clamp(12rem, 26vw, 21rem); }
.case-deck .deck-gallery figcaption { flex-direction: column; gap: 0.2rem; }
.case-deck .case-pagination { width: min(100%, 90rem); margin: 0 auto; border-color: rgb(255 255 255 / 16%); }
.case-deck .case-pagination a { color: #d6e1e7; }
.case-deck .case-pagination a:hover { background: var(--deck-strong); color: #061010; }

/* UI：窄屏取消整屏高度，图文按阅读顺序纵向展开，长标题允许自然换行。 */
@media (max-width: 720px) {
  .case-deck .case-slide,
  .case-deck .case-slide__inner { min-height: auto; }
  .case-deck .case-slide__inner { padding: 1.25rem 1.25rem 2rem; }
  .case-deck .case-cover__grid,
  .case-deck .case-slide__content { gap: 1.5rem; padding: 2rem 0; }
  .case-deck .case-cover__copy,
  .case-deck .case-slide__copy { display: block; }
  .case-deck .deck-kicker { margin-bottom: 0.5rem; }
  .case-deck .case-cover__copy h1 { max-width: none; font-size: clamp(1.7rem, 7vw, 2.25rem); }
  .case-deck .case-slide__copy h2 { max-width: none; font-size: clamp(1.35rem, 5.5vw, 1.7rem); }
  .case-deck .case-cover__lead,
  .case-deck .deck-lead { margin-top: 0.8rem; }
  .case-deck .evidence-badge { margin-top: 0.8rem; }
  .case-deck .case-slide__visual { min-height: 0; }
  .case-deck .case-cover__grid .deck-image { transform: none; }
  .case-deck .case-toc { justify-content: flex-start; margin: 0; }
  .case-deck .case-toc a { min-width: 5rem; padding: 0.78rem 0.7rem; }
  .case-deck .deck-cards,
  .case-deck .deck-flow,
  .case-deck .deck-concept__body { grid-template-columns: 1fr; min-height: 0; }
  .case-deck .deck-cards article,
  .case-deck .deck-flow li,
  .case-deck .deck-concept__body > div { min-height: 0; }
  .case-deck .deck-gallery { grid-template-columns: 1fr; }
  .case-deck .deck-gallery img { height: auto; max-height: none; }
  .case-deck .deck-image img { max-height: none; }
  .case-deck .deck-statement { min-height: 16rem; }
  .case-deck .case-pagination { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .case-deck .case-slide__inner { padding-inline: 1rem; }
  .case-deck .case-slide__top,
  .case-deck .case-slide__bottom { font-size: 0.55rem; }
  .case-deck .deck-flow li { gap: 0.7rem; }
}

/* UI：Saylo 专用视觉令牌；只影响新案例，继续使用统一的连续画面骨架。 */
.case-deck--saylo { --deck-accent: #ff97cf; --deck-strong: #df5d9d; --deck-glow: rgb(163 80 190 / 25%); --deck-panel: #15121f; }
.case-deck--saylo .case-slide--cover { background: radial-gradient(ellipse at 65% 75%, #733a80 0, transparent 48%), linear-gradient(150deg, #0d0a18 10%, #1a1936 62%, #433a75 120%); }
/* UI：Saylo 各屏的短标题统一保持单行；控制字数与字号，窄屏不靠裁切或省略号隐藏文字。 */
.case-deck--saylo .case-slide__top span,
.case-deck--saylo .deck-kicker,
.case-deck--saylo .case-slide__copy h1,
.case-deck--saylo .case-slide__copy h2,
.case-deck--saylo h3 { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.case-deck--saylo .case-slide__copy h1 { max-width: none; margin: 0; font: 800 clamp(1.3rem, 1.85vw, 1.65rem)/1.3 var(--font-display); letter-spacing: -.04em; }
.case-deck--saylo .case-slide__copy h2 { max-width: none; font-size: clamp(1.2rem, 1.65vw, 1.55rem); }
.case-deck--saylo .case-slide__visual { min-height: clamp(25rem, 57vh, 46rem); }
/* UI：所有视觉示意保留可读图注；图片未到位时也能理解结构和替换位置。 */
.saylo-figure { display: flex; flex-direction: column; justify-content: center; gap: 1rem; min-width: 0; min-height: clamp(25rem, 57vh, 46rem); margin: 0; padding: clamp(1.1rem, 2vw, 2rem); overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.35rem; background: radial-gradient(circle at 82% 24%, rgb(175 92 191 / 18%), transparent 42%), #11121d; }
.saylo-figure figcaption { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid rgb(255 255 255 / 16%); color: #c9c4d5; font-size: .72rem; line-height: 1.55; }
.saylo-figure figcaption span { color: #ffacd5; font-weight: 700; }
.saylo-inline-note { padding: .85rem 1rem; border: 1px dashed rgb(255 255 255 / 25%); border-radius: .65rem; color: #c9cad7; font-size: .78rem; line-height: 1.65; }
.saylo-three, .saylo-local, .saylo-results__metrics, .saylo-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.saylo-three article, .saylo-local article, .saylo-results__metrics article, .saylo-summary article { display: flex; flex-direction: column; gap: .8rem; min-width: 0; padding: clamp(1rem, 2vw, 1.8rem); border: 1px solid rgb(255 255 255 / 18%); border-radius: 1rem; background: rgb(255 255 255 / 5%); }
.saylo-three span, .saylo-local article > span, .saylo-results__metrics span, .saylo-summary span { color: #ffacd5; font: 700 .68rem var(--font-meta); letter-spacing: .09em; }
.saylo-three strong, .saylo-local strong, .saylo-summary strong { font-size: clamp(1.15rem, 1.8vw, 1.65rem); }
.saylo-three p, .saylo-local p, .saylo-summary p { margin: 0; color: #bfc1d0; font-size: .8rem; line-height: 1.7; }
/* UI：封面和链路界面均为结构化 Mock，不暗示真实产品截图。 */
.saylo-device-row, .saylo-five { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); width: min(100%, 68rem); margin: auto; }
.saylo-device-row .saylo-phone:nth-child(2) { transform: translateY(-1.1rem); }
.saylo-phone { display: flex; flex-direction: column; min-width: 0; min-height: clamp(18rem, 37vw, 26rem); padding: .65rem; border: .45rem solid #29283b; border-radius: 1.7rem; background: #0e0d19; box-shadow: 0 1rem 2rem rgb(0 0 0 / 27%); }
.saylo-phone__top, .saylo-phone__nav { display: flex; justify-content: space-between; gap: .4rem; padding: .4rem .5rem; color: #c4bad2; font: 700 .58rem var(--font-meta); }
.saylo-phone__art { display: flex; flex: 1; flex-direction: column; justify-content: end; gap: .5rem; min-height: 10rem; padding: 1rem; border-radius: 1rem; background: radial-gradient(circle at 72% 29%, #e69bdc 0, #7c4ca8 30%, #26254f 66%, #17172c 100%); }
.saylo-phone--pink .saylo-phone__art { background: radial-gradient(circle at 66% 25%, #ffc6d8, #a84b91 35%, #281b3d 78%); }
.saylo-phone--blue .saylo-phone__art { background: radial-gradient(circle at 66% 25%, #95a9ff, #504baf 36%, #191d3f 78%); }
.saylo-phone__art span { font: 700 .62rem var(--font-meta); letter-spacing: .14em; }
.saylo-phone__art strong { max-width: 9ch; font-size: clamp(1.25rem, 2.4vw, 2.1rem); line-height: 1.2; }
.saylo-phone__body { min-height: 3.7rem; padding: .8rem .35rem; color: #ded9e6; font-size: .73rem; }
.saylo-phone__nav { margin-top: auto; border-top: 1px solid rgb(255 255 255 / 14%); }
.saylo-phone__nav span { color: #ffacd5; }
.saylo-five { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
.saylo-five .saylo-phone { min-height: clamp(15rem, 27vw, 22rem); }
.saylo-five .saylo-phone__art { min-height: 7rem; }
.saylo-five .saylo-phone__art strong { font-size: clamp(.95rem, 1.5vw, 1.4rem); }
/* UI：策略、成长和生态模型使用可换文案的 HTML 图表。 */
.saylo-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; margin-bottom: 1.3rem; }
.saylo-timeline > div { display: flex; flex-direction: column; gap: .55rem; min-height: 9rem; padding: 1rem; border-top: 2px solid #e990c8; background: rgb(255 255 255 / 5%); }
.saylo-timeline b, .saylo-ladder b { color: #ffacd5; font: 700 .7rem var(--font-meta); }
.saylo-timeline strong { font-size: clamp(.82rem, 1.5vw, 1.2rem); }
.saylo-timeline small, .saylo-ladder small { color: #bfc1d0; font-size: .7rem; }
.saylo-position { position: relative; display: grid; grid-template: 2rem minmax(17rem, 1fr) 2rem / 8rem minmax(0, 1fr) 8rem; width: min(100%, 62rem); min-height: 25rem; margin: auto; align-items: center; text-align: center; color: #c9cbd6; font-size: .72rem; }
.saylo-position__top { grid-area: 1 / 2; }.saylo-position__left { grid-area: 2 / 1; overflow-wrap: anywhere; }.saylo-position__right { grid-area: 2 / 3; overflow-wrap: anywhere; }.saylo-position__bottom { grid-area: 3 / 2; }
.saylo-position__grid { grid-area: 2 / 2; display: grid; place-items: center; height: 100%; border: 1px solid rgb(255 255 255 / 25%); background: linear-gradient(90deg, transparent 49.8%, rgb(255 255 255 / 20%) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgb(255 255 255 / 20%) 50%, transparent 50.2%), radial-gradient(circle at center, #3b2c60, #151626 75%); }
.saylo-position__question { padding: 1.1rem; border: 1px solid #f39bcc; border-radius: .8rem; background: #191325; color: #fff; font-size: 1.1rem; font-weight: 700; }
.saylo-position__question small { color: #efb9d3; font-size: .7rem; }
.saylo-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: .55rem; min-height: 20rem; }
.saylo-ladder article { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: calc(9rem + var(--step) * 2.3rem); padding: 1rem; border: 1px solid rgb(255 255 255 / 20%); border-radius: .7rem; background: linear-gradient(150deg, #633e7b, #1b1c33 76%); }
.saylo-ladder article:nth-child(1) { --step: 0; }.saylo-ladder article:nth-child(2) { --step: 1; }.saylo-ladder article:nth-child(3) { --step: 2; }.saylo-ladder article:nth-child(4) { --step: 3; }.saylo-ladder article:nth-child(5) { --step: 4; }
.saylo-ladder strong { font-size: clamp(.9rem, 1.5vw, 1.25rem); overflow-wrap: anywhere; }
.saylo-wheel { display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(0, 2.5fr); align-items: center; gap: 2rem; }
.saylo-wheel__core { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; aspect-ratio: 1; border: 2px solid #ef9acb; border-radius: 50%; background: radial-gradient(circle, #774e9b, #251a3b 75%); text-align: center; }
.saylo-wheel__core span, .saylo-wheel__core small { color: #ffacd5; font: 700 .7rem var(--font-meta); }
.saylo-wheel__core strong { max-width: 6ch; font-size: clamp(1.5rem, 2.4vw, 2.7rem); line-height: 1.2; }
.saylo-wheel__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.saylo-wheel__steps article { display: flex; flex-direction: column; gap: .8rem; min-height: 9rem; padding: 1rem; border: 1px solid rgb(255 255 255 / 20%); border-radius: .8rem; background: #262039; }
.saylo-wheel__steps b { color: #ffacd5; font: 700 .7rem var(--font-meta); }.saylo-wheel__steps strong { font-size: 1.1rem; }.saylo-wheel__steps small { color: #bfc1d0; }
/* UI：P07 保留原飞轮，五项判断置于其下；章节标题可换行，不受案例短标题单行规则限制。 */
.saylo-ecosystem { display: grid; gap: 1rem; padding-top: clamp(1.3rem, 3vw, 2.3rem); border-top: 1px solid rgb(255 255 255 / 16%); }
.saylo-ecosystem__heading { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; }
.saylo-ecosystem__heading span { color: #ffacd5; font: 700 .64rem var(--font-meta); letter-spacing: .09em; }
.case-deck--saylo .saylo-ecosystem__heading h3 { margin: .4rem 0 0; color: #f9f3fb; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.saylo-ecosystem__heading p { max-width: 27rem; margin: 0; color: #c9c4d5; font-size: .73rem; line-height: 1.6; }
/* UI：卡片按“路径 → 判断 → 策略 → 面试提示”阅读，最后一项铺满两列以收束整段。 */
.saylo-ecosystem__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.saylo-ecosystem__point { display: flex; flex-direction: column; gap: .7rem; min-width: 0; padding: clamp(1rem, 1.6vw, 1.45rem); border: 1px solid rgb(255 255 255 / 18%); border-radius: .8rem; background: linear-gradient(140deg, rgb(132 70 151 / 19%), rgb(255 255 255 / 3%) 68%), #1b1727; }
.saylo-ecosystem__point:last-child { grid-column: 1 / -1; }
.saylo-ecosystem__point header { display: flex; gap: .8rem; align-items: start; min-width: 0; }
.saylo-ecosystem__point header > span { flex: 0 0 auto; color: #ffd27f; font: 700 .72rem var(--font-meta); }
.saylo-ecosystem__point header > div { min-width: 0; }
.saylo-ecosystem__point h4 { margin: 0 0 .3rem; color: #f9f3fb; font-size: clamp(.98rem, 1.25vw, 1.15rem); line-height: 1.35; }
.saylo-ecosystem__point small { display: block; color: #ffacd5; font: 700 .64rem/1.55 var(--font-meta); overflow-wrap: anywhere; }
.saylo-ecosystem__point p { margin: 0; color: #d2cada; font-size: .76rem; line-height: 1.7; }
.saylo-ecosystem__point .saylo-ecosystem__judgment { color: #f1eaf4; font-weight: 650; }
.saylo-ecosystem__talk { margin-top: auto !important; padding-top: .7rem; border-top: 1px solid rgb(255 255 255 / 13%); }
.saylo-ecosystem__talk b { display: block; margin-bottom: .25rem; color: #ffd27f; font: 700 .65rem var(--font-meta); }
.saylo-contrast, .saylo-mode-grid, .saylo-local, .saylo-value { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.saylo-contrast { grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1fr); }
.saylo-contrast article, .saylo-form, .saylo-value article { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.1rem, 2.5vw, 2rem); border: 1px solid rgb(255 255 255 / 19%); border-radius: 1rem; background: #201d31; }
.saylo-contrast article > span, .saylo-mode-label, .saylo-value article > span { color: #ffacd5; font: 700 .7rem var(--font-meta); letter-spacing: .08em; }
.saylo-contrast strong, .saylo-form strong, .saylo-value strong { font-size: clamp(1.2rem, 1.8vw, 1.8rem); }
.saylo-contrast ul { margin: 0; padding-left: 1.1rem; color: #d7d4de; line-height: 2; font-size: .82rem; }
.saylo-contrast small, .saylo-form small, .saylo-value p { margin-top: auto; color: #bfc1d0; line-height: 1.65; }
.saylo-contrast__bridge { display: grid; place-items: center; color: #ffacd5; font-size: .75rem; text-align: center; }
.saylo-mode-grid > div { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }.saylo-form { flex: 1; min-height: 19rem; }
.saylo-form p { margin: 0; color: #c7c5d1; font-size: .82rem; line-height: 1.6; }.saylo-form--before { background: #25212b; }
.saylo-field { padding: .75rem 1rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: .5rem; color: #d8d3df; font-size: .78rem; }
.saylo-field--accent { border-color: #ee94c8; color: #ffc1df; }
.saylo-local article { min-height: 20rem; }.saylo-swatches { display: flex; gap: .55rem; margin-top: auto; }.saylo-swatches i { width: 3rem; height: 3rem; border-radius: 50%; background: #a762bc; }.saylo-swatches i:nth-child(2) { background: #ef9acb; }.saylo-swatches i:nth-child(3) { background: #7877c9; }.saylo-swatches i:nth-child(4) { background: #27283a; }
.saylo-region { display: grid; gap: .2rem; padding: .5rem 0; border-top: 1px solid rgb(255 255 255 / 18%); }.saylo-region b { font: 700 .72rem var(--font-meta); }.saylo-region small { color: #c7c5d1; font-size: .72rem; }
.saylo-value { grid-template-columns: minmax(0, 1fr) minmax(8rem, .6fr) minmax(0, 1fr); align-items: center; }.saylo-value article { min-height: 17rem; }
.saylo-bar { height: 4rem; border-radius: .5rem; background: linear-gradient(90deg, #7858a4, #bc77b9); }.saylo-bar--two { background: linear-gradient(90deg, #626cc2, #ec9bc8); }
.saylo-value__gap { display: grid; gap: .45rem; text-align: center; }.saylo-value__gap span { color: #ffacd5; font: 700 .72rem var(--font-meta); }.saylo-value__gap strong { font-size: 1.25rem; }.saylo-value__gap small { color: #bfc1d0; }
.saylo-commerce { display: grid; gap: 1.3rem; }.saylo-commerce__model { display: flex; align-items: center; justify-content: center; gap: 1rem; }.saylo-commerce__model article { display: grid; gap: .6rem; flex: 1; max-width: 22rem; padding: 1.3rem; border: 1px solid #c685bc; border-radius: .8rem; background: #28203c; }.saylo-commerce__model span { color: #ffacd5; font: 700 .7rem var(--font-meta); }.saylo-commerce__model strong { font-size: 1.3rem; }.saylo-commerce__model small { color: #c8c5d2; }.saylo-commerce__model > b { color: #ffacd5; font-size: 2rem; }
.saylo-commerce__screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }.saylo-commerce__screens div { display: flex; flex-direction: column; justify-content: end; gap: .5rem; min-height: 10rem; padding: 1rem; border: .35rem solid #2d2a42; border-radius: 1rem; background: radial-gradient(circle at 70% 25%, #9b5eaa, #26203c 66%); font-weight: 700; }.saylo-commerce__screens small { color: #d0cadb; font-weight: 400; }
.saylo-results { display: grid; gap: 1rem; }.saylo-results__metrics strong { margin: auto 0; color: #fff; font-size: clamp(.95rem, 1.5vw, 1.4rem); }.saylo-results__metrics small { color: #c0bfce; font-size: .7rem; }
.saylo-results__review { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; padding: 1rem; border: 1px dashed #bc86b6; border-radius: .8rem; }.saylo-results__review > span { grid-column: 1 / -1; color: #ffacd5; font: 700 .7rem var(--font-meta); }.saylo-results__review div { display: grid; gap: .4rem; }.saylo-results__review small { color: #bfc1d0; font-size: .7rem; }
.saylo-summary article { min-height: 14rem; }.saylo-summary__loop { padding: 1rem; border: 1px solid #c989bc; border-radius: .8rem; color: #ffd0e9; font: 700 clamp(.73rem, 1.3vw, 1rem) var(--font-meta); text-align: center; overflow-wrap: anywhere; }
/* UI：总结页完整展示同源拼贴，说明图内数字属于设计稿文字而非成果数据。 */
.saylo-summary-visual { display: grid; gap: .55rem; width: 100%; min-width: 0; }
.saylo-summary-visual img { display: block; width: 100%; height: auto; border: 1px solid rgb(255 255 255 / 18%); border-radius: .8rem; object-fit: contain; }
.saylo-summary-visual p { display: flex; flex-wrap: wrap; gap: .35rem .65rem; margin: 0; color: #c9c4d5; font-size: .72rem; line-height: 1.6; }
.saylo-summary-visual strong { color: var(--deck-accent); }
/* UI：390px 与 320px 均改为单列或双列阅读，移除视觉位移，禁止整页横向溢出。 */
@media (max-width: 720px) {
  .case-deck--saylo .case-slide__visual, .saylo-figure { min-height: 0; }
  .saylo-device-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saylo-device-row .saylo-phone:nth-child(2) { transform: none; }
  .saylo-device-row .saylo-phone:last-child { grid-column: 1 / -1; width: min(100%, 15rem); justify-self: center; }
  .saylo-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saylo-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saylo-three, .saylo-results__metrics, .saylo-summary, .saylo-local, .saylo-mode-grid, .saylo-value, .saylo-wheel { grid-template-columns: 1fr; }
  .saylo-ladder { grid-template-columns: 1fr; min-height: 0; }.saylo-ladder article { min-height: 5rem; }
  .saylo-contrast { grid-template-columns: 1fr; }.saylo-contrast__bridge { min-height: 2rem; }
  .saylo-position { grid-template-columns: 3.6rem minmax(0, 1fr) 3.6rem; font-size: .53rem; }
  .saylo-wheel__core { width: min(100%, 15rem); margin: auto; }.saylo-wheel__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* UI：平板及手机让提示跟随标题、五点单列阅读，避免英文路径挤压正文。 */
  .saylo-ecosystem__heading { display: grid; gap: .6rem; }
  .saylo-ecosystem__grid { grid-template-columns: 1fr; }
  .saylo-ecosystem__point:last-child { grid-column: auto; }
  .saylo-results__review, .saylo-commerce__screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .saylo-device-row, .saylo-five, .saylo-commerce__screens, .saylo-wheel__steps { grid-template-columns: 1fr; }
  .saylo-device-row .saylo-phone:last-child { grid-column: auto; width: auto; }
  .saylo-phone { width: min(100%, 16rem); margin-inline: auto; }
  .saylo-commerce__model { flex-direction: column; }.saylo-commerce__model article { width: 100%; }
  .saylo-commerce__screens div { min-height: 6rem; }
  .saylo-position { grid-template-columns: 3rem minmax(0, 1fr) 3rem; }
}

/* UI：CastLoop 沿用 Saylo 的十三屏版心与标题比例，但用青绿区分项目身份。 */
.case-deck--castloop-studio .case-slide__copy h1 { max-width: 25ch; margin: 0; font: 800 clamp(1.7rem, 2.7vw, 2.7rem)/1.2 var(--font-display); letter-spacing: -.04em; }
.case-deck--castloop-studio .case-slide__visual { min-height: clamp(25rem, 57vh, 46rem); }
/* UI：抽象流程和关系图始终带示意标签；不会与三张真实截图混用。 */
.castloop-diagram { display: flex; flex-direction: column; justify-content: center; gap: 1rem; min-width: 0; min-height: clamp(25rem, 57vh, 46rem); margin: 0; padding: clamp(1.1rem, 2vw, 2rem); border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.35rem; background: radial-gradient(circle at 78% 25%, rgb(46 171 152 / 19%), transparent 42%), #101b1b; }
.castloop-diagram figcaption { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid rgb(255 255 255 / 16%); color: #c3d4d0; font-size: .72rem; line-height: 1.55; }
.castloop-diagram figcaption span { color: #91e6d8; font-weight: 700; }
.castloop-cards, .castloop-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .85rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.castloop-cards article, .castloop-flow li { display: flex; flex-direction: column; gap: 1rem; min-height: 15rem; padding: clamp(1rem, 2vw, 1.7rem); border: 1px solid rgb(255 255 255 / 18%); border-radius: .9rem; background: linear-gradient(145deg, rgb(75 175 160 / 20%), rgb(255 255 255 / 3%) 70%); }
.castloop-cards span, .castloop-flow span { color: #8ae2d4; font: 700 .73rem var(--font-meta); letter-spacing: .08em; }
.castloop-cards strong, .castloop-flow strong { font-size: clamp(1.1rem, 1.8vw, 1.55rem); line-height: 1.3; }
.castloop-cards p, .castloop-flow small { margin: auto 0 0; color: #bdcfca; font-size: .8rem; line-height: 1.7; }
.castloop-hub { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, 2rem); width: 100%; }
.castloop-hub > div { display: flex; flex: 1; flex-direction: column; gap: .8rem; max-width: 18rem; min-height: 15rem; padding: clamp(1rem, 2vw, 1.8rem); border: 1px solid #79cdbf; border-radius: 1rem; background: #1c3030; }
.castloop-hub > b { color: #8ae2d4; font-size: 1.8rem; }.castloop-hub span { color: #8ae2d4; font: 700 .7rem var(--font-meta); }.castloop-hub strong { margin: auto 0; font-size: clamp(1.1rem, 1.7vw, 1.6rem); }.castloop-hub small { color: #bdcfca; }
.castloop-context { display: grid; gap: 2rem; width: 100%; padding: clamp(1.2rem, 3vw, 2.7rem); border: 1px solid #79cdbf; border-radius: 1rem; background: #19302f; text-align: center; }.castloop-context > strong { font-size: clamp(1.3rem, 2.4vw, 2.2rem); }
.castloop-context > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }.castloop-context span { padding: 1.3rem .7rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: .7rem; background: #24504b; font-size: .85rem; }.castloop-context small { color: #bdcfca; }
.castloop-evidence-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; align-items: start; }.castloop-evidence-gallery .deck-image img { max-height: 40vh; }.castloop-evidence-gallery .deck-image figcaption { flex-direction: column; }
/* UI：手机端让流程、证据图和图注纵向展开；不给卡片设置会溢出的固定宽度。 */
@media (max-width: 720px) {
  .case-deck--castloop-studio .case-slide__visual, .castloop-diagram { min-height: 0; }
  .castloop-cards, .castloop-flow, .castloop-context > div, .castloop-evidence-gallery { grid-template-columns: 1fr; }
  .castloop-cards article, .castloop-flow li { min-height: 0; }
  .castloop-hub { flex-direction: column; }.castloop-hub > div { width: 100%; max-width: none; min-height: 8rem; }.castloop-hub > b { transform: rotate(90deg); }
  .castloop-evidence-gallery .deck-image img { max-height: none; }
}

/* UI：P04/P05 使用案例自身的渐变、强调色和面板色；Saylo 紫粉，CastLoop 青绿。 */
.case-deck--saylo { --diagram-face-dark: #655573; --diagram-face-light: #b2a4c4; --diagram-face-top: #372d48; }
.case-deck--castloop-studio { --diagram-face-dark: #4c625d; --diagram-face-light: #9caea9; --diagram-face-top: #293d39; }

/* UI：项目 01 / 02 共用研究结构；颜色和面板格式继承各自案例页。 */
.case-deck .case-slide--research { background: radial-gradient(ellipse at 82% 76%, var(--deck-glow), transparent 40%), #0b0d13; }
.case-deck .case-slide--research .case-slide__visual { min-height: 0; }
.research-panel { position: relative; display: flex; flex-direction: column; gap: clamp(1.2rem, 2.2vw, 2rem); min-width: 0; min-height: clamp(32rem, 57vh, 43rem); margin: 0; padding: clamp(1.1rem, 2.5vw, 2.4rem); overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.35rem; background: radial-gradient(circle at 82% 24%, var(--deck-glow), transparent 42%), var(--deck-panel); box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 20%); }
/* UI：低对比网格暗示参考画面中的室内纵深，保持纯 CSS 且不遮挡研究文字。 */
.research-panel::before { position: absolute; inset: 0 0 auto; height: 40%; content: ""; pointer-events: none; opacity: .13; background: repeating-linear-gradient(90deg, transparent 0 14%, #b4c1c0 14.1% 14.35%, transparent 14.5% 28%), linear-gradient(90deg, transparent 0 55%, #72817f 55% 58%, transparent 58%), repeating-linear-gradient(0deg, transparent 0 25%, #aebbb9 25.2% 25.6%, transparent 25.8% 50%); }
.research-panel > * { position: relative; z-index: 1; }
.research-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-bottom: .4rem; }
.research-meta > div { display: grid; align-content: start; gap: .35rem; min-width: 0; }
.research-meta span { color: #aeb8c6; font: 500 .67rem var(--font-meta); }
.research-meta strong { color: #e1e7ed; font-size: clamp(.7rem, .9vw, .82rem); font-weight: 500; overflow-wrap: anywhere; }
/* UI：流程药丸和连接箭头先讲清方法，再进入下方四张证据卡。 */
.research-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: .2rem 0 0; padding: 1rem clamp(.2rem, 3vw, 2.5rem); border: 1px solid rgb(255 255 255 / 9%); }
.research-step { position: relative; display: grid; place-items: center; align-content: center; gap: .35rem; min-width: 0; min-height: 4.3rem; padding: .65rem .35rem; border: 1px solid var(--deck-strong); border-radius: 5rem; background: linear-gradient(110deg, var(--deck-glow), rgb(255 255 255 / 2%) 80%), var(--deck-panel); text-align: center; }
.research-step:not(:last-child)::after { position: absolute; left: calc(100% + .1rem); top: 50%; width: 1.3rem; content: "➜"; color: var(--deck-accent); font-size: 1.15rem; line-height: 0; text-align: center; }
.research-step strong { color: #f1f4f7; font-size: clamp(.67rem, 1vw, .88rem); font-weight: 650; line-height: 1.3; }
.research-step small { color: #aeb8c6; font-size: clamp(.55rem, .7vw, .69rem); line-height: 1.25; }
/* UI：桌面按参考图呈现上 02/03、下 01/04；阅读顺序仍按 DOM 的 01→04。 */
.research-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(13rem, 1fr)); gap: .8rem; flex: 1; min-height: 28rem; }
.research-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .7rem; min-width: 0; min-height: 0; padding: clamp(.95rem, 1.7vw, 1.6rem); overflow: hidden; border: 1px solid rgb(255 255 255 / 17%); border-radius: 1rem; background: linear-gradient(145deg, var(--deck-glow), rgb(255 255 255 / 3%) 75%), var(--deck-panel); }
.research-card--one { grid-column: 1; grid-row: 2; }.research-card--two { grid-column: 1; grid-row: 1; }.research-card--three { grid-column: 2; grid-row: 1; }.research-card--four { grid-column: 2; grid-row: 2; }
.research-card header { display: flex; align-items: center; gap: .75rem; }
.research-card__number { display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center; border: 2px solid var(--deck-accent); border-radius: 50%; background: var(--deck-panel); color: var(--deck-accent); font: 700 1rem var(--font-meta); }
.research-card h3 { margin: 0; font-size: clamp(.92rem, 1.35vw, 1.2rem); line-height: 1.25; }.research-card header small { display: block; margin-top: .18rem; color: #aeb8c6; font-size: .66rem; }
.research-card p { max-width: 50ch; margin: 0; color: #b9c4cd; font-size: .72rem; line-height: 1.6; }
.research-sources { display: flex; justify-content: space-around; align-items: center; gap: .5rem; margin: auto 0 0; padding: .5rem; border-bottom: 1px solid var(--deck-strong); }
.research-sources span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid var(--deck-strong); border-radius: .7rem; background: var(--deck-panel); color: var(--deck-accent); font: 700 .7rem var(--font-meta); }
.research-card__detail { padding-top: .4rem; color: #c9d3dd; font-size: .69rem; text-align: center; }
.research-chips, .research-opportunities { display: flex; flex-wrap: wrap; align-content: center; gap: .5rem; margin-top: auto; }
.research-chips span, .research-opportunities span { padding: .44rem .7rem; border: 1px solid var(--deck-strong); border-radius: 3rem; background: rgb(255 255 255 / 5%); color: #e1e7ed; font-size: .69rem; white-space: normal; }
.research-opportunities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.research-opportunities span { display: grid; align-content: center; min-height: 3rem; border-radius: .6rem; text-align: center; }
.research-compare { display: grid; gap: .25rem; margin-top: auto; }
.research-compare > div { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .4rem; align-items: center; padding: .33rem .5rem; border-top: 1px solid rgb(255 255 255 / 11%); font-size: .66rem; }
.research-compare b { color: var(--deck-accent); font: 700 .64rem var(--font-meta); }.research-compare small { color: #899e98; font-size: .6rem; }
.research-curve { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.research-curve path { fill: none; stroke: var(--deck-accent); stroke-width: 2; opacity: .42; filter: drop-shadow(0 0 5px var(--deck-glow)); }
.research-panel figcaption { display: flex; flex-wrap: wrap; gap: .45rem 1rem; padding-top: .75rem; border-top: 1px solid rgb(255 255 255 / 14%); color: #b8c5c1; font-size: .7rem; line-height: 1.55; }
.research-panel figcaption span { color: var(--deck-accent); font-weight: 700; }
/* UI：窄屏保持自然阅读顺序；流程与卡片按列展开，曲线不盖住正文。 */
@media (max-width: 720px) {
  .research-panel { min-height: 0; }
  .research-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .8rem; }
  .research-step::after, .research-curve { display: none; }
  .research-grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .research-card--one, .research-card--two, .research-card--three, .research-card--four { grid-column: auto; grid-row: auto; }
  .research-card { min-height: 12rem; }
}
@media (max-width: 360px) {
  .research-meta, .research-pipeline, .research-opportunities { grid-template-columns: 1fr; }
  .research-meta { gap: .7rem; }.research-meta > div { gap: .1rem; }
  .research-card { min-height: 0; }.research-step { min-height: 3.4rem; }
}

/* UI：两项目共用机会页结构；深色背景与强调色继承当前案例页。 */
.case-deck .case-slide--opportunity { background: radial-gradient(ellipse at 82% 76%, var(--deck-glow), transparent 40%), #0b0d13; }
.case-deck .case-slide--opportunity .case-slide__visual { min-height: 0; }
.opportunity-panel { display: flex; flex-direction: column; gap: clamp(1.2rem, 2vw, 2rem); min-width: 0; min-height: clamp(32rem, 57vh, 43rem); margin: 0; padding: clamp(1.2rem, 2.5vw, 2.4rem); overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.35rem; background: radial-gradient(circle at 82% 24%, var(--deck-glow), transparent 42%), var(--deck-panel); }
.opportunity-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }.opportunity-meta div { display: grid; align-content: start; gap: .3rem; min-width: 0; }.opportunity-meta span { color: #aeb8c6; font: 500 .66rem var(--font-meta); }.opportunity-meta strong { color: #e1e7ed; font-size: clamp(.7rem, .9vw, .82rem); font-weight: 500; overflow-wrap: anywhere; }
.opportunity-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1rem, 3vw, 3rem); flex: 1; min-height: 34rem; }
/* UI：左侧线图只表达路径方向；无刻度、百分比或实测增长暗示。 */
.opportunity-left { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-width: 0; padding: clamp(.4rem, 2vw, 1.8rem) 0; }
.opportunity-left > div:first-child { display: grid; gap: 1rem; }.opportunity-left > div:first-child span { color: var(--deck-accent); font: 700 .68rem var(--font-meta); letter-spacing: .12em; }.opportunity-left > div:first-child strong { max-width: 22ch; color: #f1f4f7; font-size: clamp(1.2rem, 1.8vw, 1.75rem); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }.opportunity-left > div:first-child p { color: #b9c4cd; font-size: .86rem; }
/* UI：趋势线的原始颜色只作降级备用，正常呈现时跟随项目强调色。 */
.opportunity-trend svg path:nth-of-type(2) { stroke: var(--deck-accent); }
.opportunity-trend svg path:nth-of-type(3) { stroke: var(--deck-strong); }
.opportunity-trend svg path:nth-of-type(4) { fill: var(--deck-accent); }
.opportunity-trend { padding-top: 1.5rem; }.opportunity-trend svg { display: block; width: 100%; max-width: 33rem; height: auto; }.opportunity-trend svg text { fill: #aeb8c6; font: 13px var(--font-meta); }.opportunity-trend small { display: block; margin-top: .35rem; color: #aeb8c6; font-size: .66rem; line-height: 1.55; }
/* UI：三层方锥各有四个独立斜面；本体绕 Y 轴转动时，侧面仍有宽度，标签固定在前景。 */
.opportunity-right { display: grid; grid-template: repeat(3, minmax(0, 1fr)) / minmax(7rem, 1fr) minmax(12rem, 1.5fr) minmax(7rem, 1fr); align-items: center; gap: .35rem; min-width: 0; }
.opportunity-pyramid { --pyramid-scale: .58; position: relative; grid-area: 1 / 2 / 4 / 3; width: 100%; aspect-ratio: 1; min-width: 0; perspective: 900px; }
.opportunity-pyramid::before { position: absolute; inset: 25%; content: ""; border-radius: 50%; background: var(--deck-glow); filter: blur(2.5rem); pointer-events: none; }
.opportunity-pyramid__shape { position: absolute; top: 50%; left: 50%; width: 320px; height: 490px; margin: -245px 0 0 -160px; transform: scale(var(--pyramid-scale)) rotateY(0deg); transform-style: preserve-3d; transform-origin: center center; animation: opportunity-pyramid-spin 8s linear infinite; will-change: transform; pointer-events: none; }
/* UI：顶层为四个三角面；中、底层是四个梯形面，上一层底边对应下一层顶边。 */
.opportunity-pyramid__tier { position: absolute; left: 50%; width: var(--tier-width); height: var(--tier-height); transform: translateX(-50%) rotateY(-25deg); transform-style: preserve-3d; }
.opportunity-pyramid__tier[data-tier="trend"] { top: 0; --tier-width: 160px; --tier-height: 140px; --tier-half: 80px; --tier-top-inset: 50%; --tier-slant: 161.25px; --tier-pitch: 29.75deg; }
.opportunity-pyramid__tier[data-tier="barrier"] { top: 150px; --tier-width: 245px; --tier-height: 160px; --tier-half: 122.5px; --tier-top-inset: 17.35%; --tier-slant: 165.55px; --tier-pitch: 14.88deg; }
.opportunity-pyramid__tier[data-tier="opportunity"] { top: 320px; --tier-width: 320px; --tier-height: 170px; --tier-half: 160px; --tier-top-inset: 11.72%; --tier-slant: 174.09px; --tier-pitch: 12.44deg; }
.opportunity-pyramid__face { position: absolute; top: calc(var(--tier-height) - var(--tier-slant)); left: 0; width: var(--tier-width); height: var(--tier-slant); transform-origin: 50% 100%; backface-visibility: hidden; clip-path: polygon(var(--tier-top-inset) 0, calc(100% - var(--tier-top-inset)) 0, 100% 100%, 0 100%); }
.opportunity-pyramid__face--front { transform: translateZ(var(--tier-half)) rotateX(var(--tier-pitch)); background: linear-gradient(125deg, var(--diagram-face-light), var(--diagram-face-dark)); }
.opportunity-pyramid__face--back { transform: rotateY(180deg) translateZ(var(--tier-half)) rotateX(var(--tier-pitch)); background: linear-gradient(125deg, var(--diagram-face-dark), var(--diagram-face-top)); }
.opportunity-pyramid__face--left { transform: rotateY(-90deg) translateZ(var(--tier-half)) rotateX(var(--tier-pitch)); background: linear-gradient(125deg, var(--diagram-face-top), var(--diagram-face-dark)); }
.opportunity-pyramid__face--right { transform: rotateY(90deg) translateZ(var(--tier-half)) rotateX(var(--tier-pitch)); background: linear-gradient(125deg, var(--diagram-face-light), var(--diagram-face-top)); }
@keyframes opportunity-pyramid-spin { from { transform: scale(var(--pyramid-scale)) rotateY(0deg); } to { transform: scale(var(--pyramid-scale)) rotateY(360deg); } }
.opportunity-pyramid__labels { position: absolute; inset: 17% 0 16%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; pointer-events: none; }
.opportunity-pyramid__labels::before { position: absolute; z-index: 0; top: 8%; bottom: 8%; left: 50%; width: 1px; content: ""; background: linear-gradient(#d9e0e5, var(--deck-accent)); }
.opportunity-pyramid__labels span { position: relative; z-index: 1; padding: .28rem .6rem; border: 1px solid rgb(255 255 255 / 35%); border-radius: .55rem; background: var(--deck-panel); color: #e1e7ed; font-size: clamp(.69rem, 1vw, .9rem); line-height: 1.25; }
.opportunity-pyramid__labels span:last-child { border-color: var(--deck-accent); }
.opportunity-note { min-width: 0; color: #d6e1e7; }.opportunity-note--barrier { grid-area: 2 / 1; }.opportunity-note--trend { grid-area: 1 / 3; }.opportunity-note--opportunity { grid-area: 3 / 3; }
.opportunity-note > span { color: var(--deck-accent); font: 700 .63rem var(--font-meta); letter-spacing: .07em; }.opportunity-note h3 { margin: .45rem 0 .7rem; font-size: clamp(.84rem, 1.2vw, 1.05rem); line-height: 1.4; overflow-wrap: anywhere; }.opportunity-note ul { display: grid; gap: .32rem; margin: 0; padding: 0; list-style: none; }.opportunity-note li { color: #b9c4cd; font-size: clamp(.67rem, .9vw, .77rem); line-height: 1.45; }.opportunity-note li::before { content: "– "; color: var(--deck-accent); }
.opportunity-panel figcaption { display: flex; flex-wrap: wrap; gap: .45rem 1rem; padding-top: .8rem; border-top: 1px solid rgb(255 255 255 / 12%); color: #afc0b5; font-size: .7rem; line-height: 1.55; }.opportunity-panel figcaption span { color: var(--deck-accent); font-weight: 700; }
/* UI：小屏保持可读顺序；说明和图形纵向铺开，不让旋转体触碰文本。 */
@media (max-width: 720px) {
  .opportunity-panel { min-height: 0; }.opportunity-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opportunity-layout { grid-template-columns: 1fr; min-height: 0; }.opportunity-left { gap: .6rem; }.opportunity-left > div:first-child strong { max-width: none; }
  .opportunity-trend svg { max-width: none; }.opportunity-right { display: flex; flex-direction: column; gap: 1rem; }.opportunity-pyramid { --pyramid-scale: .78; order: -1; width: min(100%, 27rem); margin-inline: auto; }.opportunity-note { width: 100%; padding: .8rem 1rem; border: 1px solid rgb(255 255 255 / 13%); border-radius: .7rem; }
}
@media (max-width: 360px) { .opportunity-meta { grid-template-columns: 1fr; gap: .7rem; }.opportunity-meta div { gap: .1rem; }.opportunity-pyramid { --pyramid-scale: .56; width: 100%; } }
/* UI：遵循系统减少动态偏好；静止图保留完整三层结构和标签。 */
@media (prefers-reduced-motion: reduce) { .opportunity-pyramid__shape { animation: none; } }

/* UI：案例补全使用各项目已有的 deck 颜色令牌；虚线证据位与真实截图卡明显区分。 */
.case-deck .case-slide__copy > .case-accountability,
.case-deck .case-slide__copy > .case-quick-route { grid-column: 1 / -1; }
.case-quick-route { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .7rem; }
.case-quick-route > span { width: 100%; color: var(--deck-accent); font: 700 .66rem var(--font-meta); letter-spacing: .08em; }
.case-quick-route a { display: inline-flex; align-items: center; min-height: 2rem; padding: .35rem .65rem; border: 1px solid var(--deck-strong); border-radius: 2rem; background: var(--deck-panel); color: #e8edf0; font-size: .7rem; line-height: 1.3; }
.case-quick-route a:hover, .case-quick-route a:focus-visible { border-color: var(--deck-accent); color: #fff; }

/* UI：职责卡分开个人设计、协作与团队结果，避免把产品成果隐含归给单人。 */
.case-accountability { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; width: 100%; margin: .7rem 0; }
.case-accountability article { display: grid; align-content: start; gap: .45rem; min-width: 0; padding: .85rem 1rem; border: 1px solid var(--deck-strong); border-radius: .75rem; background: var(--deck-panel); }
.case-accountability strong { color: var(--deck-accent); font: 700 .7rem var(--font-meta); }
.case-accountability p { margin: 0; color: #ccd6dc; font-size: .73rem; line-height: 1.55; overflow-wrap: anywhere; }
.case-evidence-slot { display: grid; gap: .35rem; width: 100%; padding: .9rem 1rem; border: 1px dashed var(--deck-strong); border-radius: .75rem; background: var(--deck-panel); }
.case-evidence-slot strong { color: var(--deck-accent); font: 700 .72rem var(--font-meta); }
.case-evidence-slot p, .case-evidence-slot small { margin: 0; color: #d0d9df; font-size: .72rem; line-height: 1.55; overflow-wrap: anywhere; }
.case-evidence-slot small { color: #aebdc7; }

/* UI：方案比较、生成状态与付费理解路径都是可替换交互说明，不绘制成真实产品截图。 */
.case-choice, .case-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; width: 100%; }
.case-choice article, .case-state-grid article { display: grid; align-content: start; gap: .5rem; min-width: 0; min-height: 7rem; padding: .8rem; border: 1px solid var(--deck-strong); border-radius: .7rem; background: var(--deck-panel); }
.case-choice b, .case-state-grid b { color: var(--deck-accent); font: 700 .65rem var(--font-meta); }
.case-choice strong { color: #edf2f4; font-size: .9rem; line-height: 1.35; }
.case-choice small, .case-state-grid span { color: #bfccd2; font-size: .7rem; line-height: 1.5; }
.case-payment-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.case-payment-flow li { display: grid; gap: .35rem; min-width: 0; padding: .7rem; border-top: 2px solid var(--deck-accent); background: var(--deck-panel); }
.case-payment-flow b { color: var(--deck-accent); font: 700 .65rem var(--font-meta); }
.case-payment-flow span { color: #e0e7ea; font-size: .75rem; }
.case-deck .saylo-local-case { min-height: 16rem; }
.saylo-local-case small { margin-top: auto; color: #c7c5d1; font-size: .72rem; line-height: 1.6; }
.case-task-return { width: 100%; padding: .8rem 1rem; border-left: 2px solid var(--deck-accent); background: var(--deck-panel); color: #d6e4e5; font-size: .76rem; line-height: 1.55; }

/* UI：CastLoop 关键界面保留完整原图作为证据。 */
.case-screenshot-pair { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(13rem, .75fr); gap: .8rem; align-items: stretch; padding: .9rem; }
.case-screenshot-full { display: flex; flex-direction: column; min-width: 0; gap: .5rem; }
.case-screenshot-full > span { color: var(--deck-accent); font: 700 .64rem var(--font-meta); letter-spacing: .06em; }
.case-deck .case-screenshot-full img { width: 100%; height: 28rem; max-height: none; object-fit: contain; border: 1px solid rgb(255 255 255 / 12%); border-radius: .65rem; background: #101518; }

/* UI：窄屏按证据与讲述路径纵向排列，避免截图与文案相互挤压。 */
@media (max-width: 720px) {
  .case-accountability, .case-choice, .case-state-grid, .case-screenshot-pair { grid-template-columns: 1fr; }
  .case-payment-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-screenshot-pair { padding: .65rem; }
  .case-deck .case-screenshot-full img { height: auto; max-height: 26rem; }
}
@media (max-width: 360px) {
  .case-payment-flow { grid-template-columns: 1fr; }
  .case-quick-route a { font-size: .67rem; }
}

/* UI：Saylo 首页封面直接使用 16:9 参考图，保持原图比例，不用裁切或重复叠字。 */
.project-card__cover--saylo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1672 / 941;
  background: #0b0914;
}
.saylo-card-art__reference,
.saylo-hero-scene__reference { display: block; width: 100%; height: 100%; object-fit: contain; }
/* UI：参考图左上内嵌 logo 与用户之前的去 logo 要求冲突；只遮盖该局部，不改人物、手机或标题。 */
.project-card__cover--saylo::before,
.saylo-hero-scene::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 2%;
  width: 15%;
  height: 23%;
  pointer-events: none;
  background: #100b0e;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 87%);
  mask-image: radial-gradient(ellipse at center, #000 62%, transparent 87%);
}
/* UI：P01 头图与首页封面使用同一原图；四张 Figma 卡仍在图片下方。 */
.saylo-figure--hero { padding: clamp(.65rem, 1.25vw, 1rem); }
.saylo-hero-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: .65rem;
  background: #0b0914;
}
.saylo-hero-scene__cards { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: clamp(.5rem, 1.3vw, 1rem); width: min(100%, 34rem); margin: clamp(1rem, 2vw, 1.5rem) auto 0; }
/* UI：四张展示卡沿用各自的原图比例，不再以固定比例裁切。 */
.saylo-hero-scene__cards img { display: block; width: 100%; height: auto; border: 1px solid rgb(255 255 255 / 21%); border-radius: .45rem; object-fit: contain; box-shadow: .4rem .6rem .8rem rgb(0 0 0 / 25%); scroll-snap-align: start; }

/* UI：P02 按触点展示产品范围，卡片顺序仅服务阅读，不代表上线时间。 */
.saylo-experience-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.55rem, 1.5vw, 1rem); }
/* UI：四列及间距不变；透明卡片仅承载排版，边框紧贴图片原始比例。 */
.saylo-experience-strip article { min-width: 0; overflow: visible; border: 1px solid transparent; border-radius: .9rem; background: transparent; }
.saylo-experience-strip__image { display: grid; place-items: end center; min-height: calc(clamp(13rem, 27vw, 23rem) + .55rem); overflow: visible; padding: .55rem .55rem 0; background: transparent; }
.saylo-experience-strip__image img { display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(13rem, 27vw, 23rem); border: 1px solid rgb(255 255 255 / 25%); border-radius: .65rem; object-fit: contain; }
.saylo-experience-strip__text { display: grid; gap: .25rem; padding: .85rem; }
.saylo-experience-strip__text span { color: var(--deck-accent); font: 700 .62rem var(--font-meta); letter-spacing: .1em; }
.saylo-experience-strip__text strong { font-size: 1rem; }
.saylo-experience-strip__text small { color: #c9c2d1; font-size: .72rem; line-height: 1.5; }
.saylo-figure--experience .saylo-three article { min-height: 0; }

/* UI：方案说明与画板证据并置；未取得原图的流程节点仍显示文字占位。 */
.saylo-evidence-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.saylo-evidence-gallery figure { display: grid; justify-items: center; gap: .5rem; min-width: 0; margin: 0; padding: .8rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: .8rem; background: #17131f; }
.saylo-evidence-gallery img { display: block; width: 100%; height: 15rem; object-fit: contain; }
.saylo-evidence-gallery figcaption { display: block; width: 100%; margin: 0; padding: 0; border: 0; color: #e7d8e4; text-align: center; }
.saylo-evidence-gallery > p { grid-column: 1 / -1; margin: 0; color: #c7c1d0; font-size: .77rem; line-height: 1.6; }
.saylo-flow-proof { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.saylo-flow-proof article { display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .55rem; border: 1px solid rgb(255 255 255 / 17%); border-radius: .8rem; background: #1b1623; }
.saylo-flow-proof article > span { color: var(--deck-accent); font: 700 .62rem var(--font-meta); letter-spacing: .08em; }
.saylo-flow-proof img,
.saylo-flow-proof__placeholder { display: grid; place-items: center; width: 100%; height: clamp(12rem, 25vw, 20rem); border-radius: .45rem; object-fit: contain; background: #0d0c16; }
.saylo-flow-proof__placeholder { padding: 1rem; border: 1px dashed #af80a7; color: #d9c7d8; font-size: .84rem; line-height: 1.7; text-align: center; }
.saylo-flow-proof strong { font-size: .9rem; }
.saylo-flow-proof small { margin-top: auto; color: #bfb8ca; font-size: .65rem; }
.saylo-commerce-proof { display: grid; grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr); align-items: center; gap: 1.4rem; padding: 1rem; border: 1px solid rgb(255 255 255 / 17%); border-radius: .8rem; background: radial-gradient(circle at 20% 35%, #3b2c2e, #191521 70%); }
.saylo-commerce-proof img { display: block; width: 100%; max-height: 20rem; object-fit: contain; }
.saylo-commerce-proof div { display: grid; gap: .7rem; }
.saylo-commerce-proof span { color: var(--deck-accent); font: 700 .67rem var(--font-meta); letter-spacing: .1em; }
.saylo-commerce-proof strong { font-size: clamp(1.05rem, 1.8vw, 1.65rem); }
.saylo-commerce-proof p { max-width: 45ch; margin: 0; color: #cec4d1; font-size: .8rem; line-height: 1.7; }

@media (max-width: 720px) {
  /* UI：窄屏仍完整显示原图；下方 Figma 展示卡继续自然排列。 */
  .saylo-hero-scene__cards { width: 100%; }
  .saylo-experience-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saylo-experience-strip__image { min-height: calc(17rem + .55rem); }
  .saylo-experience-strip__image img { max-height: 17rem; }
  .saylo-flow-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saylo-flow-proof img, .saylo-flow-proof__placeholder { height: 17rem; }
}
/* UI：小屏仅封面卡区域横向滑动，页面和角色原图不产生横向溢出。 */
@media (max-width: 480px) {
  .saylo-hero-scene__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(6.5rem, 30%); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-block: 1rem; }
}
@media (max-width: 360px) {
  .saylo-experience-strip__image { min-height: calc(13rem + .55rem); }
  .saylo-experience-strip__image img { max-height: 13rem; }
  .saylo-experience-strip__text { padding: .6rem; }
  .saylo-evidence-gallery, .saylo-flow-proof, .saylo-commerce-proof { grid-template-columns: 1fr; }
  .saylo-flow-proof img, .saylo-flow-proof__placeholder { height: 22rem; }
}
@media (prefers-reduced-motion: reduce) {
}

/* UI：案例二级页的主图只在边缘呈现柔和流光；图片、图注和研究内容保持原位。 */
@property --case-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes case-border-flow {
  to { --case-border-angle: 360deg; }
}
.case-deck :is(.saylo-figure, .castloop-diagram, .research-panel, .opportunity-panel, .deck-image, .deck-concept, .deck-statement) {
  position: relative;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
/* UI：遮罩只露出 1px 边缘，装饰层不接收鼠标事件，也不会盖住实际界面素材。 */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .case-deck :is(.saylo-figure, .castloop-diagram, .research-panel, .opportunity-panel, .deck-image, .deck-concept, .deck-statement)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: .12;
    background: conic-gradient(from var(--case-border-angle), transparent 0deg 250deg, var(--deck-accent) 310deg, transparent 350deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: opacity 260ms ease;
  }
}
/* UI：共用边框流光仅用于其余案例；Saylo 的非链接图片与模型节点不回应悬停。 */
@media (hover: hover) and (pointer: fine) {
  .case-deck:not(.case-deck--saylo) :is(.saylo-figure, .castloop-diagram, .research-panel, .opportunity-panel, .deck-image, .deck-concept, .deck-statement):is(:hover, :focus-within) {
    border-color: color-mix(in srgb, var(--deck-accent) 45%, transparent);
    box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 20%), 0 0 1.5rem var(--deck-glow);
  }
  @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .case-deck:not(.case-deck--saylo) :is(.saylo-figure, .castloop-diagram, .research-panel, .opportunity-panel, .deck-image, .deck-concept, .deck-statement):is(:hover, :focus-within)::after {
      opacity: .28;
      animation: case-border-flow 16s linear infinite;
    }
  }
  .case-deck:not(.case-deck--saylo) :is(.deck-cards > article, .deck-flow > li, .deck-concept__body > div, .research-card, .saylo-three > article, .saylo-flow-proof > article, .castloop-cards > article, .case-choice > article, .case-state-grid > article, .case-accountability > article, .case-payment-flow > li, .case-evidence-slot) {
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  }
  .case-deck:not(.case-deck--saylo) :is(.deck-cards > article, .deck-flow > li, .deck-concept__body > div, .research-card, .saylo-three > article, .saylo-flow-proof > article, .castloop-cards > article, .case-choice > article, .case-state-grid > article, .case-accountability > article, .case-payment-flow > li, .case-evidence-slot):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--deck-accent) 42%, transparent);
    box-shadow: 0 .5rem 1.2rem rgb(0 0 0 / 16%);
  }
}
/* UI：减少动态时停止边框流动与卡片位移；触屏也不会触发桌面悬停效果。 */
@media (prefers-reduced-motion: reduce) {
  .case-deck :is(.saylo-figure, .castloop-diagram, .research-panel, .opportunity-panel, .deck-image, .deck-concept, .deck-statement),
  .case-deck :is(.deck-cards > article, .deck-flow > li, .deck-concept__body > div, .research-card, .saylo-three > article, .saylo-flow-proof > article, .castloop-cards > article, .case-choice > article, .case-state-grid > article, .case-accountability > article, .case-payment-flow > li, .case-evidence-slot) {
    transition: none;
  }
  .case-deck :is(.saylo-figure, .castloop-diagram, .research-panel, .opportunity-panel, .deck-image, .deck-concept, .deck-statement)::after {
    animation: none !important;
    transition: none;
  }
  .case-deck:not(.case-deck--saylo) :is(.deck-cards > article, .deck-flow > li, .deck-concept__body > div, .research-card, .saylo-three > article, .saylo-flow-proof > article, .castloop-cards > article, .case-choice > article, .case-state-grid > article, .case-accountability > article, .case-payment-flow > li, .case-evidence-slot):hover {
    transform: none;
  }
}

/* UI：Saylo 展示卡与体验画板只有阅读作用，静态呈现；实际链接另有独立 hover。 */

/* UI：定位坐标由两条可生长的轴线构成；中央文字永远位于轴线上方。 */
.saylo-position__grid { position: relative; isolation: isolate; background: radial-gradient(circle at center, #3b2c60, #151626 75%); }
.saylo-position__grid::before, .saylo-position__grid::after { position: absolute; z-index: 0; content: ""; background: linear-gradient(90deg, transparent, #e6a9d6, transparent); pointer-events: none; }
.saylo-position__grid::before { top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, #e6a9d6, transparent); }
.saylo-position__grid::after { top: 50%; right: 0; left: 0; height: 1px; }
.saylo-position__question { position: relative; z-index: 1; box-shadow: 0 .6rem 1.6rem rgb(0 0 0 / 26%); }
.saylo-wheel__core { position: relative; isolation: isolate; }
.saylo-wheel__core::before { position: absolute; inset: .55rem; z-index: 0; border: 1px dashed rgb(255 204 112 / 50%); border-radius: 50%; content: ""; pointer-events: none; animation: saylo-orbit 24s linear infinite; }
.saylo-wheel__core > * { position: relative; z-index: 1; }

/* UI：曲线只描绘既有示意路径，不变更坐标、数据或证据标签；离开视口后保持终态。 */
.has-saylo-motion .research-curve path,
.has-saylo-motion .opportunity-trend svg path:nth-of-type(2),
.has-saylo-motion .opportunity-trend svg path:nth-of-type(3) { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.has-saylo-motion .research-panel[data-diagram-visible="true"] .research-curve path,
.has-saylo-motion .opportunity-panel[data-diagram-visible="true"] .opportunity-trend svg path:nth-of-type(2),
.has-saylo-motion .opportunity-panel[data-diagram-visible="true"] .opportunity-trend svg path:nth-of-type(3) { animation: saylo-line-grow 1.15s cubic-bezier(.22, 1, .36, 1) forwards; }
.has-saylo-motion .opportunity-panel[data-diagram-visible="true"] .opportunity-trend svg path:nth-of-type(3) { animation-delay: .12s; }
.has-saylo-motion .saylo-position__grid::before { transform: scaleY(0); }
.has-saylo-motion .saylo-position__grid::after { transform: scaleX(0); }
.has-saylo-motion .saylo-position[data-diagram-visible="true"] .saylo-position__grid::before { animation: saylo-axis-grow-y .8s ease forwards; }
.has-saylo-motion .saylo-position[data-diagram-visible="true"] .saylo-position__grid::after { animation: saylo-axis-grow-x .8s ease .15s forwards; }
.has-saylo-motion .saylo-ladder[data-diagram-visible="true"] article,
.has-saylo-motion .saylo-wheel[data-diagram-visible="true"] .saylo-wheel__steps article,
.has-saylo-motion .saylo-flow-proof[data-diagram-visible="true"] article { animation: saylo-node-rise .5s ease backwards; }
.has-saylo-motion .saylo-ladder article:nth-child(2), .has-saylo-motion .saylo-wheel__steps article:nth-child(2), .has-saylo-motion .saylo-flow-proof article:nth-child(2) { animation-delay: .08s; }
.has-saylo-motion .saylo-ladder article:nth-child(3), .has-saylo-motion .saylo-wheel__steps article:nth-child(3), .has-saylo-motion .saylo-flow-proof article:nth-child(3) { animation-delay: .16s; }
.has-saylo-motion .saylo-ladder article:nth-child(4), .has-saylo-motion .saylo-wheel__steps article:nth-child(4), .has-saylo-motion .saylo-flow-proof article:nth-child(4) { animation-delay: .24s; }
.has-saylo-motion .saylo-ladder article:nth-child(5), .has-saylo-motion .saylo-wheel__steps article:nth-child(5), .has-saylo-motion .saylo-flow-proof article:nth-child(5) { animation-delay: .32s; }
.has-saylo-motion .saylo-wheel__steps article:nth-child(6) { animation-delay: .4s; }
.has-saylo-motion .saylo-wheel__steps article:nth-child(7) { animation-delay: .48s; }
@keyframes saylo-line-grow { to { stroke-dashoffset: 0; } }
@keyframes saylo-axis-grow-x { to { transform: scaleX(1); } }
@keyframes saylo-axis-grow-y { to { transform: scaleY(1); } }
@keyframes saylo-node-rise { from { opacity: .72; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes saylo-orbit { to { transform: rotate(360deg); } }

/* UI：研究卡与流程节点是说明内容，不提供跳转或操作反馈；其他案例保留金字塔的悬停暂停。 */
@media (hover: hover) and (pointer: fine) {
  .case-deck:not(.case-deck--saylo) .opportunity-pyramid:hover .opportunity-pyramid__shape { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .saylo-wheel__core::before,
  .has-saylo-motion .research-curve path,
  .has-saylo-motion .opportunity-trend svg path,
  .has-saylo-motion .saylo-position__grid::before,
  .has-saylo-motion .saylo-position__grid::after,
  .has-saylo-motion .saylo-ladder article,
  .has-saylo-motion .saylo-wheel__steps article,
  .has-saylo-motion .saylo-flow-proof article { animation: none !important; transition: none !important; }
  .has-saylo-motion .research-curve path,
  .has-saylo-motion .opportunity-trend svg path:nth-of-type(2),
  .has-saylo-motion .opportunity-trend svg path:nth-of-type(3) { stroke-dashoffset: 0; }
  .has-saylo-motion .saylo-position__grid::before,
  .has-saylo-motion .saylo-position__grid::after { transform: none; }
}

/* UI：Saylo 四能力案例只扩展现有紫粉主题；主屏保留原版心、卡片圆角、边框与图像动效。 */
.case-deck--saylo .case-slide__copy > .saylo-detail-link { grid-column: 2; justify-self: start; }
.saylo-detail-link { display: inline-flex; align-items: center; gap: .65rem; width: fit-content; min-height: 2.35rem; padding: .5rem .85rem; border: 1px solid var(--deck-accent); border-radius: 2rem; color: #ffe3f2; font: 700 .72rem var(--font-meta); text-decoration: none; }
.saylo-detail-link:hover, .saylo-detail-link:focus-visible { background: rgb(255 151 207 / 14%); outline-color: #ffd27f; }
.saylo-facts, .saylo-step-line { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.saylo-facts span, .saylo-step-line span { padding: .5rem .75rem; border: 1px solid rgb(255 255 255 / 20%); border-radius: 2rem; background: rgb(255 255 255 / 5%); color: #f5deed; font: 700 .69rem/1.35 var(--font-meta); }
.saylo-story-grid { display: grid; gap: .85rem; width: 100%; }
.saylo-story-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.saylo-story-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.saylo-story-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.saylo-story-card { position: relative; display: flex; flex-direction: column; gap: .85rem; min-width: 0; min-height: 12rem; padding: clamp(1rem, 1.8vw, 1.5rem); border: 1px solid rgb(255 255 255 / 19%); border-radius: 1rem; background: linear-gradient(145deg, rgb(132 70 151 / 16%), rgb(255 255 255 / 4%) 70%), #1b1727; color: #f9f3fb; text-decoration: none; }
.saylo-story-card span, .saylo-story-grid--five b { color: #ffacd5; font: 700 .67rem/1.5 var(--font-meta); overflow-wrap: anywhere; }
.saylo-story-card strong { font-size: clamp(1.02rem, 1.5vw, 1.35rem); line-height: 1.35; }
.saylo-story-card p, .saylo-story-grid--five small { margin: auto 0 0; color: #cbc5d4; font-size: .78rem; line-height: 1.55; }
.saylo-story-card > b { position: absolute; right: 1rem; bottom: .8rem; color: #ffd27f; }
.saylo-story-grid a.saylo-story-card:hover, .saylo-story-grid a.saylo-story-card:focus-visible { border-color: var(--deck-accent); background-color: #30223c; outline: 2px solid transparent; }
.saylo-loop-caption { padding: .85rem 1rem; border: 1px solid rgb(255 151 207 / 35%); border-radius: .75rem; color: #ffd5ec; font: 700 clamp(.73rem, 1.2vw, .92rem)/1.55 var(--font-meta); text-align: center; overflow-wrap: anywhere; }
/* UI：真实 Figma 画面保持原比例；流程步骤只在画面下方提供阅读线索。 */
.saylo-proof-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.saylo-proof-pair figure { display: grid; gap: .5rem; min-width: 0; margin: 0; }
.saylo-proof-pair img { display: block; width: 100%; max-height: 42vh; object-fit: contain; border: 1px solid rgb(255 255 255 / 20%); border-radius: .75rem; background: #11121d; }
.saylo-proof-pair figure figcaption { padding: 0; border: 0; color: #e4bfd7; font: 700 .7rem var(--font-meta); }
.saylo-global-map { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; width: 100%; }
.saylo-global-map article { display: grid; gap: 1rem; min-height: 13rem; padding: clamp(1rem, 2vw, 1.6rem); border: 1px solid rgb(255 255 255 / 20%); border-radius: 1rem; background: #251f36; }
.saylo-global-map article span { color: #ffacd5; font: 700 .7rem var(--font-meta); }
.saylo-global-map article strong { font-size: clamp(1.2rem, 1.7vw, 1.6rem); }
.saylo-global-map article p { margin: auto 0 0; color: #ccc5d7; font-size: .82rem; line-height: 1.6; }
.saylo-global-map > b { color: #ffd27f; font-size: 1.6rem; }
.saylo-region-matrix { display: grid; gap: .25rem; width: 100%; overflow-x: auto; }
.saylo-region-matrix > div { display: grid; grid-template-columns: minmax(7rem, 1.3fr) repeat(3, minmax(5.5rem, 1fr)); gap: .25rem; min-width: 26rem; }
.saylo-region-matrix :is(b, span) { padding: .85rem .65rem; background: #241f34; color: #ddd3e6; font-size: .76rem; text-align: center; }
.saylo-region-matrix b { background: #49304f; color: #ffe4f1; }
.saylo-region-matrix > div :first-child { text-align: left; }
.saylo-evidence-min { margin: 0; padding: .8rem 1rem; border: 1px dashed rgb(255 255 255 / 25%); border-radius: .7rem; color: #d5cbd9; font-size: .75rem; }
.saylo-immersion-layout, .saylo-commerce-focus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: center; width: 100%; }
.saylo-immersion-layout > img, .saylo-commerce-focus > img { display: block; width: 100%; max-height: 46vh; object-fit: contain; border: 1px solid rgb(255 255 255 / 18%); border-radius: .8rem; background: #12121f; }
.saylo-immersion-list { display: grid; gap: .6rem; min-width: 0; }
.saylo-immersion-list .saylo-story-card { min-height: 0; gap: .35rem; padding: .85rem 1rem; }
.saylo-immersion-list .saylo-story-card p { margin: 0; }
.saylo-results-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.saylo-results-compact article { display: grid; gap: 1rem; min-height: 12rem; padding: 1.4rem; border: 1px dashed rgb(255 151 207 / 38%); border-radius: 1rem; background: rgb(255 255 255 / 4%); }
.saylo-results-compact span { color: #ffacd5; font: 700 .7rem var(--font-meta); }
.saylo-results-compact strong { font-size: 1.3rem; }
.saylo-results-compact small { margin-top: auto; color: #c9c3d0; line-height: 1.5; }
/* UI：深读页承载图示、来源和待补材料；锚点与返回主屏始终是普通链接。 */
.saylo-detail-page { color: #f4eef7; }
.saylo-detail-intro, .saylo-detail { width: min(100%, 90rem); margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.4rem, 5.3vw, 5.7rem); }
.saylo-detail-intro { display: grid; gap: .8rem; padding-block: clamp(3rem, 7vw, 6rem); background: radial-gradient(circle at 80% 75%, rgb(163 80 190 / 19%), transparent 50%); }
.saylo-detail-intro span, .saylo-detail__head > span { color: var(--deck-accent); font: 700 .7rem var(--font-meta); letter-spacing: .1em; }
.saylo-detail-intro h1, .saylo-detail__head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.8rem); }
.saylo-detail-intro p, .saylo-detail__head p { max-width: 45rem; margin: 0; color: #d0c9d8; line-height: 1.7; }
.saylo-detail { display: grid; gap: 1.5rem; border-top: 1px solid rgb(255 255 255 / 16%); scroll-margin-top: 8rem; }
.saylo-detail__head { display: grid; gap: .65rem; }
.saylo-detail__head a { width: fit-content; color: #ffc8e2; font: 700 .72rem var(--font-meta); }
.saylo-detail__visual { display: grid; gap: 1rem; }
.saylo-detail h3 { margin: 0; font-size: 1.2rem; }
.saylo-detail__note { margin: 0; padding: 1rem; border-left: 2px solid var(--deck-accent); background: rgb(255 255 255 / 5%); color: #d8d0df; font-size: .78rem; line-height: 1.6; }
.saylo-source-detail { min-width: 0; padding: 1rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 1rem; }
.saylo-source-detail summary { color: #ffd9ed; font-weight: 700; cursor: pointer; }
.saylo-source-detail > p { color: #cbc4d3; font-size: .78rem; }
.saylo-source-detail figure { margin: 1.5rem 0 0; }
@media (max-width: 900px) {
  .saylo-story-grid--four, .saylo-story-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saylo-story-grid--three, .saylo-results-compact { grid-template-columns: 1fr; }
  .saylo-story-card { min-height: 9rem; }
}
@media (max-width: 720px) {
  .case-deck--saylo .case-slide__copy > .saylo-detail-link { grid-column: 1; }
  .saylo-proof-pair, .saylo-global-map, .saylo-immersion-layout, .saylo-commerce-focus { grid-template-columns: 1fr; }
  .saylo-global-map > b { text-align: center; }
  .saylo-immersion-layout > img, .saylo-commerce-focus > img { max-height: 30rem; }
  .saylo-region-matrix > div { min-width: 24rem; }
}
@media (max-width: 360px) {
  .saylo-story-grid--four, .saylo-story-grid--five { grid-template-columns: 1fr; }
  .saylo-detail-intro, .saylo-detail { padding-inline: 1.1rem; }
}

/* UI：全站案例截图直接占据版面，来源说明独立排在图下；结构图和假设卡沿用原设计。 */
.case-deck .deck-image { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.case-deck .deck-image img { height: auto; max-height: none; }
.case-deck .deck-image figcaption { flex-wrap: wrap; padding: .7rem 0 0; border: 0; }
.case-deck .deck-gallery img,
.castloop-evidence-gallery .deck-image img { height: auto; max-height: none; }
.case-deck .deck-image::after,
.case-deck--saylo .saylo-figure--media::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .case-deck:not(.case-deck--saylo) .deck-image:is(:hover, :focus-within) { border-color: transparent; box-shadow: none; }
}

/* UI：Saylo 媒体屏只保留图片本身的视觉形状，去掉图片外侧的大画布与留白。 */
.case-deck--saylo .saylo-figure--media { min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.case-deck--saylo .saylo-figure--media > figcaption { margin-top: 0; padding-top: .7rem; border: 0; }
.case-deck--saylo .saylo-experience-strip__image { min-height: 0; padding: 0; }
.case-deck--saylo .saylo-experience-strip__image img { width: 100%; max-height: none; border: 0; border-radius: 0; }
.case-deck--saylo .saylo-experience-strip article { border: 0; }
.case-deck--saylo .saylo-experience-strip__text { padding-inline: 0; }
.case-deck--saylo .saylo-summary-visual img { border: 0; border-radius: 0; }
/* UI：总结拼贴的白边属于源图片；仅这张图轻微放大，裁去四周画布与阴影。 */
.case-deck--saylo .saylo-summary-visual__crop { width: 100%; aspect-ratio: 2880 / 1651; overflow: hidden; }
.case-deck--saylo .saylo-summary-visual__crop img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.055); transform-origin: center; }

/* UI：关键手机画板按原比例放大；说明列和图表保持原有紫粉信息层级。 */
.saylo-evidence-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: start; width: 100%; }
.saylo-evidence-split > img { display: block; width: min(100%, 27rem); height: auto; justify-self: center; border: 0; border-radius: 0; background: transparent; }
.saylo-evidence-split__copy { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.saylo-evidence-split__copy > span { color: #ffacd5; font: 700 .68rem var(--font-meta); letter-spacing: .08em; }
.case-deck--saylo .saylo-evidence-split__copy h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.saylo-evidence-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.saylo-evidence-steps li { display: grid; grid-template-columns: minmax(6rem, .6fr) minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid rgb(255 255 255 / 18%); }
.saylo-evidence-steps b { color: #ffd5ec; font: 700 .84rem var(--font-meta); }
.saylo-evidence-steps small { color: #c9c3d0; font-size: .75rem; line-height: 1.5; }
.saylo-evidence-split .saylo-immersion-list { align-content: start; }

/* UI：CastLoop 原始截图只出现一次，旁列说明所见内容与待验证的交互。 */
.case-screenshot-pair { grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding: 0; }
.castloop-focus--portrait .case-screenshot-pair { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.case-deck .castloop-focus--portrait .case-screenshot-full img { width: min(100%, 30rem); }
.case-screenshot-full { gap: .65rem; }
.case-screenshot-full > span { color: var(--deck-accent); }
.case-deck .case-screenshot-full img { width: 100%; height: auto; max-height: none; border: 0; border-radius: 0; background: transparent; }
.case-screenshot-story { display: grid; gap: 1rem; min-width: 0; }
.case-screenshot-story > span { color: var(--deck-accent); font: 700 .66rem var(--font-meta); letter-spacing: .08em; }
.case-screenshot-story h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 2rem); }
.case-screenshot-story dl { display: grid; gap: 0; margin: 0; }
.case-screenshot-story dl > div { display: grid; gap: .4rem; padding: 1rem 0; border-top: 1px solid rgb(255 255 255 / 18%); }
.case-screenshot-story dt { color: var(--deck-accent); font: 700 .7rem var(--font-meta); }
.case-screenshot-story dd { margin: 0; color: #c9d6d6; font-size: .8rem; line-height: 1.6; }

/* UI：深读页同样展示无外框的完整画板；缺图占位仍保留虚线提示。 */
.saylo-detail-page .saylo-proof-pair img,
.saylo-detail-page .saylo-immersion-layout > img,
.saylo-detail-page .saylo-commerce-focus > img { width: 100%; height: auto; max-height: none; border: 0; border-radius: 0; background: transparent; }
.saylo-detail-page .saylo-proof-pair img { width: min(100%, 26rem); justify-self: center; }
.saylo-detail-page .saylo-flow-proof article:not(.saylo-flow-proof__mock) { padding-inline: 0; border: 0; background: transparent; }
.saylo-detail-page .saylo-flow-proof img { width: 100%; height: auto; border-radius: 0; background: transparent; }

@media (max-width: 720px) {
  /* UI：手机端按主图、解释、来源顺序阅读；原图不裁切也不缩进画框。 */
  .saylo-evidence-split,
  .case-screenshot-pair { grid-template-columns: 1fr; }
  .castloop-focus--portrait .case-screenshot-pair { grid-template-columns: 1fr; }
  .saylo-evidence-split > img { width: min(100%, 25rem); }
  .case-deck .case-screenshot-full img { max-height: none; }
  .case-deck--saylo .saylo-experience-strip__image img { width: 100%; max-height: none; }
}

/* UI：选定章节去掉固定整屏高度与上下框线，使设计判断顺着下一张画板继续阅读。 */
.case-deck .case-slide:is(.case-slide--bridge, .case-slide--editorial) { min-height: 0; }
.case-deck--saylo .case-slide:is(.case-slide--bridge, .case-slide--editorial) { background: #0d0c17; }
.case-deck--castloop-studio .case-slide--editorial { background: #0b1213; }
.case-deck .case-slide:is(.case-slide--bridge, .case-slide--editorial) .case-slide__inner { min-height: 0; padding-block: clamp(1.5rem, 3vw, 3rem); }
.case-deck .case-slide--bridge .case-slide__inner { padding-bottom: clamp(.8rem, 2vw, 1.8rem); }
.case-deck .case-slide--bridge + .case-slide--editorial .case-slide__inner { padding-top: clamp(.8rem, 2vw, 1.8rem); }
.case-deck .case-slide:is(.case-slide--bridge, .case-slide--editorial) :is(.case-slide__top, .case-slide__bottom) { border: 0; }
.case-deck .case-slide:is(.case-slide--bridge, .case-slide--editorial) .case-slide__top { padding-bottom: .5rem; }
.case-deck .case-slide:is(.case-slide--bridge, .case-slide--editorial) .case-slide__bottom { margin-top: 0; padding-top: .8rem; }
.case-deck .case-slide:is(.case-slide--bridge, .case-slide--editorial) .case-slide__content { flex: none; gap: clamp(1rem, 2vw, 1.8rem); padding-block: clamp(1rem, 2vw, 1.8rem); }
.case-deck .case-slide:is(.case-slide--bridge, .case-slide--editorial) .case-slide__visual { flex: none; min-height: 0; }

/* UI：示意段落保留内部结构，却不再额外套一整张大卡片。图注仍与判断同行。 */
.case-deck--saylo .case-slide--bridge .saylo-figure { min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.case-deck--saylo .case-slide--bridge .saylo-figure::after { display: none; }
.case-deck--saylo .case-slide--bridge .saylo-figure > figcaption { margin-top: 0; padding-top: .6rem; border: 0; }
/* UI：洞察与商业判断卡片形成轻微阶梯，视线依次落到下一段真实画板。 */
.case-deck--saylo .case-slide--bridge .saylo-story-grid--three { align-items: start; }
.case-deck--saylo .case-slide--bridge .saylo-story-grid--three .saylo-story-card:nth-child(2) { margin-top: clamp(1rem, 2vw, 2rem); }
.case-deck--saylo .case-slide--bridge .saylo-story-grid--three .saylo-story-card:nth-child(3) { margin-top: clamp(2rem, 4vw, 4rem); }
.case-deck--saylo .case-slide--bridge-reverse .saylo-story-grid--three .saylo-story-card:nth-child(1) { margin-top: clamp(2rem, 4vw, 4rem); }
.case-deck--saylo .case-slide--bridge-reverse .saylo-story-grid--three .saylo-story-card:nth-child(3) { margin-top: 0; }

/* UI：大字只作为章节层次，置于原始截图和解释背后，不遮盖任何可读内容。 */
.case-deck .case-slide--editorial { position: relative; isolation: isolate; overflow: hidden; }
.case-deck .case-slide--editorial::before { content: attr(data-editorial-word); position: absolute; z-index: 0; top: clamp(9rem, 17vw, 16rem); inset-inline: 0; color: var(--deck-accent); opacity: .085; font: 900 clamp(11rem, 34vw, 35rem)/1 var(--font-display); letter-spacing: -.1em; text-align: center; white-space: nowrap; pointer-events: none; }
.case-deck .case-slide--editorial .case-slide__inner { position: relative; z-index: 1; }
.case-deck .case-slide--editorial .case-slide__visual { position: relative; }

/* UI：Saylo 的创作、沉浸、付费画板左右错列；DOM 中图片始终在说明之前。 */
.case-deck--saylo .case-slide--editorial .saylo-evidence-split > img { justify-self: start; }
.case-deck--saylo .case-slide--editorial-reverse .saylo-evidence-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.case-deck--saylo .case-slide--editorial-reverse .saylo-evidence-split > img { grid-column: 2; grid-row: 1; justify-self: end; }
.case-deck--saylo .case-slide--editorial-reverse .saylo-immersion-list { grid-column: 1; grid-row: 1; }

/* UI：CastLoop 三张真实界面交替出现，来源标签与待验证内容仍在原图旁。 */
.case-deck--castloop-studio .case-slide--editorial-reverse .case-screenshot-pair { grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.55fr); }
.case-deck--castloop-studio .case-slide--editorial-reverse .case-screenshot-full { grid-column: 2; grid-row: 1; }
.case-deck--castloop-studio .case-slide--editorial-reverse .case-screenshot-story { grid-column: 1; grid-row: 1; }

@media (max-width: 900px) {
  /* UI：平板和手机恢复原始图片→解释→图注的顺序，避免视觉错列造成阅读跳跃。 */
  .case-deck .case-slide--editorial::before { display: none; }
  .case-deck--saylo .case-slide--editorial-reverse .saylo-evidence-split,
  .case-deck--castloop-studio .case-slide--editorial-reverse .case-screenshot-pair { grid-template-columns: 1fr; }
  .case-deck--saylo .case-slide--editorial-reverse .saylo-evidence-split > img,
  .case-deck--saylo .case-slide--editorial-reverse .saylo-immersion-list,
  .case-deck--castloop-studio .case-slide--editorial-reverse .case-screenshot-full,
  .case-deck--castloop-studio .case-slide--editorial-reverse .case-screenshot-story { grid-column: auto; grid-row: auto; }
  .case-deck--saylo .case-slide--bridge .saylo-story-grid--three .saylo-story-card { margin-top: 0; }
}

/* UI：Saylo 产品背景改为开放式四步体验路径。画板直接占据页面，保留原图比例与证据图注。 */
.case-deck--saylo .case-slide--context-flow { min-height: 0; background: radial-gradient(ellipse at 57% 57%, rgb(105 54 112 / 11%), transparent 64%), #0d0c17; }
.case-deck--saylo .case-slide--context-flow .case-slide__inner { min-height: 0; padding-block: clamp(1.5rem, 3vw, 3rem); }
.case-deck--saylo .case-slide--context-flow .case-slide__content { flex: none; gap: clamp(1.7rem, 3vw, 3rem); }
.case-deck--saylo .case-slide--context-flow .case-slide__visual { flex: none; min-height: 0; }
.case-deck--saylo .case-slide--context-flow .saylo-figure--experience { gap: 0; }
/* UI：首张画板略宽，底部文字对齐；更大的原图自然形成参考图中的高低错列。 */
.case-deck--saylo .case-slide--context-flow .saylo-experience-strip {
  position: relative;
  grid-template-columns: minmax(0, 1.16fr) repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(1rem, 2.3vw, 2.3rem);
  padding-bottom: 2.25rem;
}
.case-deck--saylo .case-slide--context-flow .saylo-experience-strip article { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.case-deck--saylo .case-slide--context-flow .saylo-experience-strip__image img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
.case-deck--saylo .case-slide--context-flow .saylo-experience-strip__text { gap: .2rem; padding: .9rem 0 0; }
/* UI：细虚线和圆点只引导阅读，不表示已经验证的用户旅程或功能上线次序。 */
.case-deck--saylo .case-slide--context-flow .saylo-experience-strip::after { content: ""; position: absolute; right: .5rem; bottom: .75rem; left: .5rem; border-top: 1px dashed rgb(255 172 213 / 55%); pointer-events: none; }
.case-deck--saylo .case-slide--context-flow .saylo-experience-strip article::after { content: ""; position: absolute; z-index: 1; bottom: -1.67rem; left: .35rem; width: .38rem; height: .38rem; border: 1px solid #ffacd5; border-radius: 50%; background: #0d0c17; pointer-events: none; }
.case-deck--saylo .case-slide--context-flow .saylo-figure--experience > figcaption { margin-top: .1rem; padding-top: .7rem; }

@media (max-width: 900px) {
  /* UI：画板在平板与手机改成两列，路径线随断行隐藏，保持原图和图注可读。 */
  .case-deck--saylo .case-slide--context-flow .saylo-experience-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(1.3rem, 4vw, 2.5rem) clamp(.8rem, 3vw, 1.5rem); padding-bottom: 0; }
  .case-deck--saylo .case-slide--context-flow .saylo-experience-strip::after,
  .case-deck--saylo .case-slide--context-flow .saylo-experience-strip article::after { display: none; }
  .case-deck--saylo .case-slide--context-flow .saylo-experience-strip__text { padding-top: .5rem; }
}

/* UI：项目 03 介绍屏借用「上方主视觉、下方左标题右简介」的阅读框架；只作用于 Creative Intelligence 第 02 屏。 */
.case-deck--creative-intelligence .case-slide--intro { background: #e9edf8; color: #19213a; }
.case-deck--creative-intelligence .case-slide--intro .case-slide__inner { padding-bottom: 0; }
.case-deck--creative-intelligence .case-slide--intro .case-slide__top { color: #52627d; border-color: rgb(28 39 69 / 22%); }
.case-deck--creative-intelligence .case-slide--intro .case-slide__bottom { color: #52627d; border-color: rgb(28 39 69 / 20%); }
.case-intro { display: flex; flex: 1; flex-direction: column; min-width: 0; padding-top: clamp(1rem, 2vw, 1.8rem); }
/* UI：现有协作回路图是概念底图；浮层面板保持真实文字，图像加载失败时信息仍完整。 */
.case-intro__visual { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: clamp(25rem, 49vh, 40rem); margin: 0; overflow: hidden; border: 1px solid rgb(28 39 69 / 17%); background: #e6e7dc; }
.case-intro__visual > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.case-intro__visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 10%, rgb(37 54 103 / 45%) 100%); content: ""; pointer-events: none; }
.case-intro__panels { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(0.6rem, 1.7vw, 1.5rem); width: 100%; padding: clamp(1.3rem, 3vw, 2.8rem); }
.case-intro__panel { min-width: 0; min-height: clamp(10rem, 17vw, 14rem); padding: clamp(1rem, 1.6vw, 1.5rem); border: 1px solid rgb(175 192 255 / 42%); border-radius: 0.8rem; background: rgb(14 20 44 / 94%); box-shadow: 0 1.2rem 2.2rem rgb(15 22 50 / 24%); color: #f2f4ff; }
.case-intro__panel:nth-child(1) { transform: rotate(-2deg) translateY(-0.4rem); }
.case-intro__panel:nth-child(2) { transform: translateY(0.35rem); }
.case-intro__panel:nth-child(3) { transform: rotate(2deg) translateY(-0.6rem); }
.case-intro__panel-index { color: #a9baff; font-family: var(--font-meta); font-size: clamp(0.58rem, 0.7vw, 0.7rem); letter-spacing: 0.12em; }
.case-intro__panel h3 { margin-top: clamp(1.2rem, 2vw, 2.3rem); font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.55rem); line-height: 1.25; }
.case-intro__panel p { max-width: 24ch; margin-top: 0.55rem; color: #d4ddf4; font-size: clamp(0.73rem, 0.9vw, 0.88rem); line-height: 1.55; }
.case-intro__visual figcaption { position: absolute; z-index: 2; top: 1rem; right: 1rem; padding: 0.45rem 0.65rem; border: 1px solid rgb(26 38 70 / 24%); background: rgb(247 248 255 / 89%); color: #38435f; font-family: var(--font-meta); font-size: 0.65rem; }
/* UI：信息带把标题与简介分到两列，证据标记紧贴正文，不让概念画面被误读为上线界面。 */
.case-intro__details { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: end; min-width: 0; padding: clamp(1.5rem, 2.8vw, 2.8rem) clamp(1.25rem, 3vw, 3rem); background: #f4f5fb; }
.case-intro__heading span { display: block; margin-bottom: 0.45rem; color: #6479bd; font-family: var(--font-meta); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.13em; }
.case-intro__heading h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3.7rem); letter-spacing: -0.06em; line-height: 1.1; }
.case-intro__description p { max-width: 52ch; color: #343c53; font-size: clamp(0.9rem, 1.05vw, 1.08rem); line-height: 1.8; }
.case-intro__description .evidence-badge { display: inline-block; margin-top: 1rem; border-color: #586db7; color: #40549a; background: transparent; font-size: 0.7rem; }

@media (max-width: 720px) {
  /* UI：手机先看三个概念环节，再读项目标题与说明；面板取消倾斜以保证窄屏易读。 */
  .case-intro__visual { min-height: 0; }
  .case-intro__visual > img { object-fit: cover; }
  .case-intro__panels { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; padding: 5rem 1rem 1.2rem; }
  .case-intro__panel { min-height: 0; padding: 0.85rem 1rem; transform: none !important; }
  .case-intro__panel h3 { margin-top: 0.5rem; font-size: 1.1rem; }
  .case-intro__panel p { max-width: none; margin-top: 0.3rem; font-size: 0.78rem; }
  .case-intro__visual figcaption { top: 0.7rem; right: 0.7rem; font-size: 0.58rem; }
  .case-intro__details { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 1.5rem 1rem; }
  .case-intro__heading h2 { font-size: clamp(2rem, 8vw, 2.7rem); }
}