/* EVAN STUDIO — Apple 风格覆盖层
   加载在 styles.css 之后，配合 index-apple.html 与 app-apple.js；基础版文件不变。
   回退：在 index-apple.html 里去掉本文件即可。 */

:root {
  --ink: #000;
  --paper: #f5f5f7;
  --muted: #86868b;
  --accent: #2997ff;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link-dark: #2997ff;
  --link-light: #0066cc;
  --text-dark: #1d1d1f;
  --text-gray: #6e6e73;
  --card: #1d1d1f;
  --column: max(22px, calc((100vw - 1080px) / 2));
}

html { background: #000; }
body {
  background: #000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- 通用：小标签 / 按钮 / 文字链 ---------- */
.eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: .06em; color: #a1a1a6;
}
.btn-blue, .project-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border-radius: 980px;
  font-size: 17px; font-weight: 400; letter-spacing: -.01em;
  color: #fff; background: var(--blue); border: 0;
  transition: background .25s ease;
}
.btn-blue:hover, .project-button:hover, .btn-blue:focus-visible, .project-button:focus-visible {
  background: var(--blue-hover); transform: none;
}
.text-link {
  gap: 4px; font-size: 19px; color: var(--link-dark); letter-spacing: -.01em;
}
.text-link span { color: inherit; font-size: inherit; }
.text-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 导航：固定毛玻璃 ---------- */
.site-header {
  position: fixed; height: 48px; padding: 0 var(--column);
  background: rgba(22, 22, 23, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px; letter-spacing: 0;
}
.brand { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.brand span { font-weight: 400; opacity: .6; }
.site-nav { margin-left: auto; margin-right: 28px; gap: 30px; }
.site-nav a { font-size: 12px; letter-spacing: 0; opacity: .8; }
.site-nav a:hover, .site-nav a:focus-visible { opacity: 1; }
.nav-buy {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 980px; font-size: 12px; color: #fff; background: var(--blue);
  transition: background .25s ease;
}
.nav-buy:hover { background: var(--blue-hover); }

/* ---------- Hero：文字保持原位（左下），动画播完后再浮现 ---------- */
.hero-flash {
  background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .92), rgba(41, 151, 255, .22) 24%, transparent 62%);
}
/* 首屏文字：完全沿用原版（位置、字号、字重、字距、颜色），不做苹果化 */
.hero .eyebrow { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .14em; color: #a5a5a5; opacity: 1; }
.hero h1 { margin: 20px 0 24px; font-size: clamp(2.85rem, 5.6vw, 5.8rem); font-weight: 620; line-height: 1.04; letter-spacing: -.065em; }
.hero-intro { margin: 0 0 26px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #d4d4d4; font-weight: 400; letter-spacing: normal; }
.hero .text-link { gap: 12px; font-size: 14px; color: #f0efec; letter-spacing: normal; }
.hero .text-link span { color: var(--accent); font-size: 18px; }
.hero .text-link:hover { opacity: .66; text-decoration: none; }
.scroll-cue { display: none; }

/* 动画播放期间：文字隐藏，暗角减轻，让画面本身完整呈现 */
.js .hero-content > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.js .hero-vignette { opacity: .35; transition: opacity 1.4s ease; }
/* 动画结束后：依次浮现 */
.js .hero.is-revealed .hero-content > * { opacity: 1; transform: none; pointer-events: auto; }
.js .hero.is-revealed .hero-content > :nth-child(2) { transition-delay: .12s; }
.js .hero.is-revealed .hero-content > :nth-child(3) { transition-delay: .28s; }
.js .hero.is-revealed .hero-content > :nth-child(4) { transition-delay: .44s; }
.js .hero.is-revealed .hero-vignette { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-content > * { opacity: 1; transform: none; transition: none; pointer-events: auto; }
  .js .hero-vignette { opacity: 1; transition: none; }
}

/* ---------- 宣言：纯黑 + 渐变文字 ---------- */
.manifesto { background: #000; }
.manifesto-line {
  font-size: clamp(2.6rem, 6.6vw, 6.4rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em;
  text-align: center; filter: blur(8px);
  color: #f5f5f7;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .manifesto-line {
    color: transparent;
    background: linear-gradient(180deg, #f5f5f7 20%, #86868b 130%);
    -webkit-background-clip: text; background-clip: text;
  }
}
.manifesto-line.is-active { filter: blur(0); }

/* ---------- 案例引言：深色绿光衔接 ---------- */
.case-intro {
  padding: 11vh 8vw 2vh; text-align: center; color: #f5f5f7; background: transparent;
}
.case-intro .eyebrow { color: #86868b; }
.case-intro h2 {
  color: #f5f5f7;
  margin: 10px 0 16px;
  font-size: clamp(2.8rem, 7vw, 6.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em;
}
.case-intro > p:last-child {
  font-size: clamp(1.3rem, 2.6vw, 2.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: #c7d9cf;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .case-intro > p:last-child { background: linear-gradient(180deg, #f5f5f7 10%, var(--tint) 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* ---------- 案例舞台 ---------- */
.case-story { background: #000; }
.case-media { overflow: hidden; }
.case-copy .eyebrow { color: #a1a1a6; }
.case-description { font-size: clamp(17px, 1.6vw, 21px); color: #d2d2d7; letter-spacing: -.01em; }
.media-control {
  background: rgba(42, 42, 45, .72); border: 0; border-radius: 980px;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.media-control:hover, .media-control:focus-visible { background: rgba(66, 66, 69, .8); }

/* 时间轴：去掉绿色，改白色磨砂 */
.case-timeline {
  --timeline-accent: #f5f5f7;
  background: rgba(29, 29, 31, .72);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  bottom: 22px; /* 原版 -28px 会被舞台裁掉下半部分 */
}
.timeline-chapter-current { color: #f5f5f7; font-weight: 600; }
.timeline-track { background: rgba(255, 255, 255, .22); }
.timeline-progress { background: #f5f5f7; box-shadow: none; }
.timeline-playhead { border: 0; background: #f5f5f7; box-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.timeline-range::-webkit-slider-thumb { border: 0; background: #f5f5f7; box-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.timeline-range::-moz-range-thumb { border: 0; background: #f5f5f7; box-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.timeline-chapter { border-left-color: rgba(255, 255, 255, .22); }
.timeline-chapter.is-active { background: rgba(255, 255, 255, .1); }
.timeline-chapter.is-passed .chapter-dot { border-color: #f5f5f7; background: #f5f5f7; }
.timeline-chapter.is-active .chapter-dot { background: #f5f5f7; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }

/* ---------- 项目画廊：纯黑底 + #1d1d1f 卡片 ---------- */
.project-gallery-section { background: #000; color: #f5f5f7; padding: 16vh 0 16vh; }
.project-gallery-heading { padding: 0 var(--column) 7vh; }
.project-gallery-heading .eyebrow { color: #a1a1a6; }
.project-gallery-heading h2 {
  font-size: clamp(2.8rem, 6.6vw, 6rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em;
}
.project-gallery-lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; color: #a1a1a6; letter-spacing: -.01em; }
.project-gallery { padding-left: var(--column); padding-right: var(--column); }
.project-card-button {
  background: var(--card); border: 0; border-radius: 28px; box-shadow: none;
  transition: background .3s ease;
}
.project-card-button:hover, .project-card-button:focus-visible, .project-card.is-selected .project-card-button {
  transform: none; border-color: transparent; background: #262628; box-shadow: none;
}
.project-card-media { background: #000; }
.project-card-media::after { background: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 45%); }
.project-card-play { color: #1d1d1f; background: rgba(245, 245, 247, .92); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.project-card-index { font: 600 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif; letter-spacing: .06em; color: #86868b; }
.project-card-title { font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.project-card-summary { font-size: 15px; line-height: 1.5; color: #a1a1a6; letter-spacing: -.005em; }
.project-card-action { font-size: 15px; color: var(--link-dark); }

.project-detail { background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); }
.project-detail-panel { background: var(--card); border: 0; border-radius: 28px; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
.project-detail-copy .eyebrow { color: #86868b; }
.project-detail-copy h2 { font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
.project-detail-copy > p:last-child { color: #a1a1a6; font-size: 15px; line-height: 1.5; }
.project-detail-media { border-radius: 16px; box-shadow: none; }
.project-detail-play { color: #1d1d1f; background: rgba(245, 245, 247, .94); }
.project-detail-close { background: rgba(255, 255, 255, .1); border: 0; }
.project-card-button:focus-visible, .project-detail-close:focus-visible, .project-detail-play:focus-visible { outline-color: var(--accent); }

/* ---------- 联系：浅灰章节 ---------- */
.contact {
  align-items: center; justify-content: center; min-height: 86vh; padding: 14vh 8vw 12vh;
  text-align: center; color: #f5f5f7; background: radial-gradient(70% 55% at 50% 100%, rgba(52, 199, 120, .16), transparent 70%), linear-gradient(180deg, #000 0%, #050b08 60%, #000 100%);
}
.contact .eyebrow { color: var(--text-gray); }
.contact h2 {
  margin: 14px 0 34px;
  font-size: clamp(2.8rem, 7vw, 6.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em;
}
.contact-orb { display: none; }
.email-link {
  margin-top: 22px; font-size: 17px; color: var(--link-light); border-bottom: 0; letter-spacing: -.01em;
}
.email-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 页脚 ---------- */
footer {
  padding: 20px var(--column); font-size: 12px; letter-spacing: 0;
  color: var(--text-gray); background: var(--paper); border-top: 1px solid #d2d2d7;
}

/* ---------- 玻璃质感（visionOS 风格）：卡片 / 时间轴 / 弹窗 ---------- */
/* 画廊区唯一的一处柔光：给玻璃提供可透出的背景 */
.project-gallery-section {
  background:
    radial-gradient(48vw 42vh at calc(18% + var(--pin, 0) * 55%) 72%, rgba(40,150,170,.08), transparent 70%),
    radial-gradient(42vw 40vh at calc(84% - var(--pin, 0) * 50%) 38%, rgba(120,130,150,.07), transparent 70%),
    #000;
}
.project-card-button {
  position: relative; padding: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 40px rgba(255, 255, 255, .03), 0 24px 60px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* 斜向高光 */
.project-card-button::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 28%, transparent 46%);
}
.project-card-button:hover, .project-card-button:focus-visible, .project-card.is-selected .project-card-button {
  background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 40px rgba(255, 255, 255, .05), 0 28px 70px rgba(0, 0, 0, .42);
}
.project-card-button { overflow: hidden; isolation: isolate; }
/* 把本卡片的海报放大、虚化、提亮，铺在玻璃下面：玻璃会带上每张卡自己的颜色 */
.project-card-button::after {
  content: ""; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  background: var(--poster) center / cover no-repeat;
  filter: blur(38px) saturate(1.8) brightness(1.25);
  opacity: .62; transform: scale(1.25);
  transition: opacity .35s ease;
}
.project-card-button:hover::after, .project-card-button:focus-visible::after, .project-card.is-selected .project-card-button::after { opacity: .85; }
.project-card-media { border-radius: 20px; }
.project-card-meta { position: relative; z-index: 3; padding: 26px 24px 22px; }
.project-card-summary { color: rgba(235, 235, 245, .66); }

.case-timeline {
  background: rgba(60, 60, 66, .38);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 14px 44px rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
}
.media-control {
  background: rgba(60, 60, 66, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
}
.project-detail { background: rgba(0, 0, 0, .55); }
.project-detail-panel {
  background: rgba(50, 50, 56, .5);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 36px 100px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(44px) saturate(180%); backdrop-filter: blur(44px) saturate(180%);
}
.project-detail-close { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }

/* 不支持 backdrop-filter 的浏览器：退回实色，保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .project-card-button { background: #1d1d1f; }
  .case-timeline, .media-control { background: rgba(29, 29, 31, .92); }
  .project-detail-panel { background: #1d1d1f; }
}

/* ---------- 滚动驱动 ---------- */
/* 案例舞台：圆角随滚动进度收成直角（--case-progress 由脚本写入） */
.case-media { border-radius: calc(30px * (1 - var(--case-progress, 0))); }

/* 画廊：随横移进度漂移的光晕 */
.project-gallery-section {
  background:
    radial-gradient(48vw 42vh at calc(18% + var(--pin, 0) * 55%) 72%, rgba(40,150,170,.08), transparent 70%),
    radial-gradient(42vw 40vh at calc(84% - var(--pin, 0) * 50%) 38%, rgba(120,130,150,.07), transparent 70%),
    #000;
}
/* 卡片展开：弹窗遮罩淡出稍慢，配合收拢动画 */
.project-detail { transition: opacity .45s ease; }

/* ---------- 移动端 ---------- */
@media (max-width: 700px) {
  .site-header { height: 48px; padding: 0 16px; }
  .nav-buy { display: none; }
  .site-nav { margin: 0; background: rgba(22, 22, 23, .96); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .manifesto-line { font-size: clamp(2.4rem, 11.5vw, 4rem); }
  .case-intro { padding: 10svh 22px 2svh; }
  .case-intro h2 { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .case-media { border-radius: 0; }
  .case-timeline { bottom: 16px; }
  .project-gallery-heading { padding: 0 22px 40px; }
  .project-gallery-heading h2 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .project-gallery { padding-left: 22px; padding-right: 22px; }
  .project-card-button { border-radius: 22px; padding: 8px; }
  .project-card-media { border-radius: 15px; }
  .project-card-meta { padding: 20px 16px 16px; }
  .contact { padding: 14svh 22px 10svh; }
  .contact h2 { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  footer { padding: 18px 22px; }
}

/* v5 首屏等待层 */
.hero-media img { position: absolute; inset: 0; z-index: 1; transition: opacity .4s ease; object-position: center; }
.hero-media video { opacity: 0; transition: opacity .4s ease; }
.hero-playing .hero-media video { opacity: 1; }
.hero-playing .hero-media img { opacity: 0; }
.hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 1; transition: opacity .4s; }
.hero-glow::before { content: ""; position: absolute; left: 50%; top: 21%; width: 160px; height: 65px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(255,237,206,.38), transparent 68%); filter: blur(12px); animation: lamp-breathe 1.6s ease-in-out infinite; }
@keyframes lamp-breathe { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.hero-playing .hero-glow, .hero-fallback .hero-glow { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-glow { display: none; } }

@media (max-width: 700px) { .hero h1 { font-size: clamp(2.3rem, 10.4vw, 3.6rem); } }
@media (prefers-reduced-motion: reduce) { .manifesto-line { filter: none; } }
.project-detail-panel { max-height: calc(100dvh - 36px); overflow-y: auto; transform: none; transition: none; transform-origin: top left; }
.project-detail.is-open .project-detail-panel { transform: none; }

/* v5：同一份卡片 DOM，分段开关只切换容器视图。 */
.gallery-view-switch { grid-column: 2; justify-self: end; display: inline-flex; gap: 3px; height: 32px; padding: 3px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; background: rgba(255,255,255,.07); backdrop-filter: blur(20px); }
.gallery-view-switch button { padding: 0 15px; color: #a1a1a6; border: 0; border-radius: 99px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.gallery-view-switch button[aria-pressed="true"] { color: #f5f5f7; background: rgba(255,255,255,.16); }
.project-gallery { opacity: 1; transition: opacity .24s ease; }
.project-gallery.is-switching { opacity: 0; transition-duration: .18s; }
.rp-stage, .project-card-tab { display: none; }
.project-gallery[data-view="folder"] { position: relative; overflow: visible; margin: 0 var(--column); padding: 0; }
.project-gallery[data-view="folder"] .project-gallery-track { position: relative; display: block; width: 100%; padding: 0; }
.project-gallery[data-view="folder"] .project-card { position: absolute; width: 100%; margin: 0; scroll-snap-align: none; }
.project-gallery[data-view="folder"] .project-card-button { display: flex; flex-direction: column; width: 100%; min-height: 0; height: 420px; padding: 0; border-radius: 22px; }
.project-gallery[data-view="folder"] .project-card-tab { display: flex; align-items: center; gap: 8px; flex: 0 0 72px; width: 100%; padding: 0 18px; font-size: 16px; font-weight: 600; }
.project-card-tab i { flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--tag-accent, #fff); }
.project-card-tab > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-card-tab small { margin-left: auto; font-size: 11px; color: #a1a1a6; }
.project-gallery[data-view="folder"] .project-card-media { display: block; flex: 0 0 176px; width: 100%; height: 176px; min-height: 0; max-height: none; border-radius: 0; }
.project-gallery[data-view="folder"] .project-card-media img { display: block; }
.project-gallery[data-view="folder"] .project-card-meta { display: flex; width: 100%; min-height: 0; padding: 18px; }
.project-gallery[data-view="folder"] .project-card-index { display: none; }
.project-gallery[data-view="folder"] .project-card-title { margin: 0; font-size: 21px; }
.project-gallery[data-view="folder"] .project-card-summary { margin-top: 10px; font-size: 14px; line-height: 1.45; }
.project-gallery[data-view="folder"] .project-card-action { margin-top: 12px; font-size: 14px; }
.project-gallery[data-view="folder"] .project-card-play { width: 36px; height: 36px; bottom: 12px; right: 12px; }
/* 触屏卡包：所有位置由 transform 更新，容器始终预留完整展开高度。 */
@media (max-width: 860px), (hover: none), (pointer: coarse) {
  .gallery-view-switch { margin-top: 18px; }
  .project-gallery[data-view="folder"] .project-gallery-track { height: calc(var(--project-count) * 72px + 348px); overflow: hidden; }
  .project-gallery[data-view="folder"] .project-card { top: 0; left: 0; transform: translateY(var(--wallet-y, 0px)); z-index: calc(var(--card-order) + 1); transition: transform .45s cubic-bezier(.16,1,.3,1); }
  .project-gallery[data-view="folder"] .project-card:not(.is-expanded) .project-card-media,
  .project-gallery[data-view="folder"] .project-card:not(.is-expanded) .project-card-meta { visibility: hidden; }
  .project-gallery[data-view="folder"] .project-card-button { background: #25262b; }
  .project-gallery[data-view="folder"] .project-card:not(.is-expanded) .project-card-button { clip-path: inset(0 0 348px round 22px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media img, .hero-media video, .hero-glow, .project-gallery, .project-gallery.is-switching, .project-detail { transition: none; }
  .project-gallery[data-view="folder"] { height: auto; min-height: 0; margin-top: 0; }
  .project-gallery[data-view="folder"] .project-gallery-track { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; height: auto; }
  .project-gallery[data-view="folder"] .project-card { position: relative; inset: auto; width: auto; transform: none; transition: none; }
  .project-gallery[data-view="folder"] .project-card-button { height: auto; min-height: 420px; }
  .project-gallery[data-view="folder"] .project-card:not(.is-expanded) .project-card-button { clip-path: none; }
  .project-gallery[data-view="folder"] .project-card:not(.is-expanded) .project-card-media,
  .project-gallery[data-view="folder"] .project-card:not(.is-expanded) .project-card-meta { visibility: visible; }
  .project-gallery[data-view="folder"] .project-card-tab { padding: 10px; font-size: 14px; }
  .project-gallery[data-view="folder"] .project-card-tab .tab-title { display: inline; white-space: normal; }
  .project-gallery[data-view="folder"] .project-card-tab small { display: none; }
  .project-gallery[data-view="folder"] .project-card-meta { padding: 12px; }
  .project-gallery[data-view="folder"] .project-card-title { font-size: 18px; }
}


/* 原生横向画廊：纵向手势保持页面滚动。 */
.project-gallery[data-view="gallery"] { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--column); padding-inline: var(--column); }
.project-gallery[data-view="gallery"]::-webkit-scrollbar { display: none; }
.project-gallery[data-view="gallery"] .project-gallery-track { align-items: stretch; padding-right: 0; }
.project-gallery[data-view="gallery"] .project-card { flex: 0 0 min(760px, 70vw); scroll-snap-align: start; }
.project-gallery[data-view="gallery"] .project-card-button { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.project-gallery[data-view="gallery"] .project-card-media { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 1280 / 656; border-radius: 20px; }
.project-gallery[data-view="gallery"] .project-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; }
.project-gallery[data-view="gallery"] .project-card-meta { flex: 1; width: 100%; min-height: 0; padding: 22px 24px 24px; }
.project-gallery[data-view="gallery"] .project-card-title { margin-top: 14px; font-size: clamp(24px, 2.2vw, 32px); text-wrap: balance; word-break: keep-all; overflow-wrap: normal; }
.project-gallery[data-view="gallery"] .project-card-summary { display: -webkit-box; max-width: none; margin-top: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.project-gallery[data-view="gallery"] .project-card-action { margin-top: 18px; }
.gallery-heading-actions { display: contents; }
.gallery-controls { display: none; }
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .gallery-heading-actions { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 12px; }
  .gallery-pin-stage:has(> .project-gallery[data-view="folder"]) .gallery-heading-actions { grid-row: 1; align-self: start; }
  .gallery-controls:not([hidden]) { display: flex; align-items: center; gap: 12px; padding: 0; }
  .gallery-controls button { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid #ffffff30; background: #ffffff14; backdrop-filter: blur(20px); color: #f5f5f7; font: 28px/1 sans-serif; cursor: pointer; }
  .gallery-controls button:disabled { opacity: .3; cursor: default; }
}
@media (max-width: 860px) {
  .project-gallery[data-view="gallery"] .project-card { flex-basis: 84vw; }
  .project-gallery[data-view="gallery"] .project-card-media { border-radius: 15px; }
  .project-gallery[data-view="gallery"] .project-card-meta { padding: 18px 16px 18px; }
}

/* v7：整组标题、卡片和箭头固定在同一个视口内。 */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-gallery-heading { padding-bottom: 40px; }
  .project-gallery-section.is-pinned { padding: 0; overflow: clip; }
  .is-pinned .gallery-pin-stage { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding-top: 8vh; }
  .is-pinned .project-gallery[data-view="gallery"] { overflow: hidden; scroll-snap-type: none; }
  .is-pinned .project-gallery-track { will-change: transform; }
}

/* v8：连续色彩旅程；固定层由 body 的独立层叠上下文承载。 */
:root { --base: #000; --g1: rgba(0,0,0,0); --g1x: 50%; --g1y: 8%; --g2: rgba(0,0,0,0); --g2x: 50%; --g2y: 110%; --g2w: 75vw; --g2h: 55vh; --tint: #f5f5f7; --ambient: rgba(52,199,120,.30); }
body { background: transparent; isolation: isolate; }
.scene-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60vw 55vh at var(--g1x) var(--g1y), var(--g1), transparent 70%), radial-gradient(var(--g2w, 45vw) var(--g2h, 40vh) at var(--g2x, 80%) var(--g2y, 20%), var(--g2), transparent 70%), var(--base); }
.scene-bg::after { content: ""; position: absolute; inset: 0; opacity: .035; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAAAAABWESUoAAAEK0lEQVR4nAEgBN/7AIK3Du5/GlA5vvB+wjR/Bm7Qj13HUSRH40BDAAJrblRVAJSgZWhdZMSYC7jUVEqHIamaAa0hnrWc9qFe9vFaHYMLALfOCda7wATnF1xkPH3ssLWA7De8lxLdLmquuUuujS+fAKKcWihMnvdSGCnPEHmwgOnXShwQ/KtqQkPTNlbevkweANeWSOhW6Pmi9YyV8M5LOcFb/61cLfuLuCC2EZy6j/iHAJauWwXygKaM7ZO2soyw0bNY5rqrSFVlufSQKNVX15qKAA5kUeFccFwV8XNUG0Q4olz3YxLU7rPCJGh5vwCzz47RADq/Epowl62WtELW0b3vSFDD9GVELrMAwzemSKbA291zAPyV9cLEUYWa/oDUCqOd+5JJ9Aw+432WFEXIBvWMfPISAH36iU+SlvzzPAhAmZCslw3ts7hDEgGB6TdhB9va9sXzAMhkl+4hmwHdkvGfSVT0/qlO2RgjdYgrIA2q2yPP+Rk/AD5wOESV4ExdXtNSIm0WN8Ikjx08zEQF3S6h+vq0vxxGAJZNlHCGIHiCkUR4vujHW0MJrisSLj/oesfs9aU3D8QbAE3bcjsq+2xHwLV4lKqyxcFFt5fduRJuXMogMRIQX2dkABT69rIA2vCZ26Xu7DNiT1Ekv8XwTYI4jlKSeBD2ELC8AKEeC+nxTzymleh6UxFmDHYozbqfXu+5kCLvU3tZahbcAIoD7B/n0lYXEbMwJHn7L/EbfBn+yx4YgtDknBoTY1vOAGB3K6A3LFImbQjht/nYwEMGneVyO0ef9yyGzqBDQinxAH0r232NH/x/GGaSvzIk16DCAJJDDuJJCRjaiTbDQqQhAJxWRob+pZIRIA4OPhlCtt+ECHbbQLlnqbcGU1MwiVdJAOTe2zyqouR07N5X4hhS8vsANUDWGmoAEHj2tcntbmeNAGabtnu7tH8f/c2ySUl6+sMTMFbLMpBmpfTwLmXABTVeAMcLog2fxPPM5h9L1bkKaZGSJw0sttOdB4x4JBMtmbNqAPcvPXqv2MkBx8FbaqTFpTe/fzNslpyJJ1Un015zINDVAHbZ932a1o8rqV/XD0w7l17eYaY0qScf+EYlo2DvxHX0ADMAY1A5L6tNvDXhpV00uzQhZGmlv1jqKn3O7sACPL9DAAH9w68k+5cIO/W1ZK/DSJT/LTiX0Kwg3Rlw13mKJUqKADH03VzFfS/ntkIqAki4CAqA6sQoG29j4gbxK47wCxtRAMneEm4M19PdwQdVrUubYdgnvW7J12GKR/C6kgE/VuonACXDEtFMZAn8oupF73knug8HXtsriEO+q21Nli6RODbMAL+bvPTje0eGCAbFRHn2HAQHbNZ3eJ0cehPFsQqY4eY0AD+9jcfBmlUn5RxsxzKZv9FG6bMg/QFq6BUeLTuvSb+uNL79rovDliwAAAAASUVORK5CYII="); }
.manifesto, .case-intro, .case-story, .project-gallery-section { background: transparent; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .manifesto-line { background-image: linear-gradient(180deg, #f5f5f7 25%, var(--tint) 135%); }
}
.case-media { box-shadow: 0 70px 120px -50px var(--ambient); }
.scene-handoff { height: 40vh; background: linear-gradient(180deg, transparent, #f5f5f7); }
.contact { background: #f5f5f7; color: #1d1d1f; }
@media (max-width: 700px) {
  .scene-bg { bottom: auto; height: 100vh; height: 100lvh;
    background: radial-gradient(90vw 50vh at var(--g1x) var(--g1y), var(--g1), transparent 70%), radial-gradient(90vw 50vh at var(--g2x, 80%) var(--g2y, 20%), var(--g2), transparent 70%), var(--base); }
}
@media (prefers-reduced-motion: reduce) {
  /* 引言保持透明，由固定层提供方案 E 的静态墨绿背景。 */
  .scene-bg { --base: rgb(7,17,13); --g1: rgba(255,255,255,.05); --g1x: 50%; --g1y: 8%; --g2: rgba(52,199,120,.34); --g2x: 50%; --g2y: 100%; --g2w: 75vw; --g2h: 55vh; }
  .manifesto { --tint: rgb(208,210,214); background: radial-gradient(60vw 55vh at 50% 6%, rgba(255,255,255,.11), transparent 70%), radial-gradient(60vw 55vh at 50% 50%, rgba(255,255,255,.12), transparent 70%), radial-gradient(60vw 55vh at 50% 84%, rgba(255,246,232,.10), transparent 70%), radial-gradient(75vw 55vh at 50% 108%, rgba(52,190,125,.05), transparent 70%), radial-gradient(75vw 55vh at 50% 102%, rgba(52,190,125,.11), transparent 70%), radial-gradient(75vw 55vh at 50% 96%, rgba(52,195,125,.20), transparent 70%), linear-gradient(180deg, rgb(9,9,10), rgb(11,12,12) 50%, rgb(11,15,13)); }
  .manifesto-line:nth-child(2) { --tint: rgb(192,206,199); }
  .manifesto-line:nth-child(3) { --tint: rgb(162,214,188); }
  .case-intro { --tint: rgb(130,220,176); background: transparent; }
  .case-story { background: #000; }
  .project-gallery-section { background: radial-gradient(60vw 55vh at 30% 70%, rgba(255,255,255,.05), transparent 70%), radial-gradient(45vw 40vh at 75% 30%, rgba(40,150,170,.09), transparent 70%), rgb(7,8,9); }
  .scene-handoff { background: linear-gradient(180deg, rgb(7,8,9), #f5f5f7); }
}

.case-shade {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

@media (min-width: 701px) {
  .manifesto-line { width: min(1240px, 90vw); font-size: clamp(2.6rem, 5.4vw, 5.8rem); }
}

/* v14：桌面唱片架与唱片机；数值来自已确认的预览。 */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  /* 标题位于画廊的兄弟节点，使用 :has 仅限定桌面 folder 布局。 */
  .project-gallery-section:has(.project-gallery[data-view="folder"]) { padding-top: 9vh; padding-bottom: 14vh; }
  .gallery-pin-stage:has(> .project-gallery[data-view="folder"]) > .project-gallery-heading { gap: 0 24px; padding-bottom: 44px; }
  .gallery-pin-stage:has(> .project-gallery[data-view="folder"]) > .project-gallery-heading .eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 14px; }
  .gallery-pin-stage:has(> .project-gallery[data-view="folder"]) > .project-gallery-heading h2 { grid-column: 1; grid-row: 2; }
  .gallery-pin-stage:has(> .project-gallery[data-view="folder"]) > .project-gallery-heading .project-gallery-lede { grid-column: 2; grid-row: 2; max-width: 30ch; margin: 0 0 14px; }
  .gallery-pin-stage:has(> .project-gallery[data-view="folder"]) > .project-gallery-heading .gallery-view-switch { grid-column: 2; grid-row: 1; align-self: start; }
  .project-gallery[data-view="folder"] { height: auto; margin-top: 0; isolation: isolate; }
  .project-gallery[data-view="folder"] .project-gallery-track { display: none; }
  .project-gallery[data-view="folder"] .rp-stage { display: block; --rp-acc: #7fe0b0; }

  .project-gallery[data-view="folder"] .rp-stage { position: relative; }
  .project-gallery[data-view="folder"] .rp-shelf { position: relative; display: flex; gap: 22px; padding: 40px 24px 64px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 24px; overscroll-behavior-x: contain; scrollbar-width: none; perspective: 900px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
  .project-gallery[data-view="folder"] .rp-shelf::-webkit-scrollbar { display: none; }
  .project-gallery[data-view="folder"] .rp-shelf > .rp-sleeve { flex: 0 0 148px; width: 148px; scroll-snap-align: start; }
  .project-gallery[data-view="folder"] .rp-shelf-wrap { position: relative; }
  .project-gallery[data-view="folder"] .rp-sleeve { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 6px; cursor: pointer; background: #111 center / cover no-repeat; transform-origin: 50% 100%;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 26px rgba(0,0,0,.5); transition: transform .5s cubic-bezier(.16,1,.3,1), filter .4s ease; }
  .project-gallery[data-view="folder"] .rp-sleeve::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%, rgba(0,0,0,.45)); }
  .project-gallery[data-view="folder"] .rp-sleeve .rp-peek { position: absolute; left: 8%; right: 8%; top: 0; aspect-ratio: 1; border-radius: 50%; z-index: -1; transform: translateY(-9%); transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    background: repeating-radial-gradient(circle, #0c0c0d 0 1px, #19191c 1px 2.4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
  .project-gallery[data-view="folder"] .rp-sleeve .rp-no { position: absolute; left: 10px; bottom: 9px; z-index: 1; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: rgba(255,255,255,.85); }
  .project-gallery[data-view="folder"] .rp-sleeve .rp-name { position: absolute; left: 0; right: 0; top: calc(100% + 26px); font-size: 12px; color: #6e6e73; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; }
  .project-gallery[data-view="folder"] .rp-sleeve:hover, .project-gallery[data-view="folder"] .rp-sleeve:focus-visible { transform: translateY(-10px) rotateX(-8deg); }
  .project-gallery[data-view="folder"] .rp-sleeve:hover .rp-peek, .project-gallery[data-view="folder"] .rp-sleeve:focus-visible .rp-peek { transform: translateY(-22%); }
  .project-gallery[data-view="folder"] .rp-sleeve:hover .rp-name, .project-gallery[data-view="folder"] .rp-sleeve.rp-playing .rp-name { color: #f5f5f7; }
  .project-gallery[data-view="folder"] .rp-sleeve.rp-playing .rp-peek { opacity: 0; }
  .project-gallery[data-view="folder"] .rp-sleeve.rp-playing { filter: brightness(.55); }
  .project-gallery[data-view="folder"] .rp-sleeve:focus-visible { outline: 2px solid #2997ff; outline-offset: 4px; }
  .project-gallery[data-view="folder"] .rp-ledge { position: absolute; left: 0; right: 0; top: 188px; height: 10px; border-radius: 3px; background: linear-gradient(180deg, #5a5d63, #2a2b2f 60%, #18191b); box-shadow: 0 10px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3); pointer-events: none; }
  .project-gallery[data-view="folder"] .rp-shelf-nav { position: absolute; top: 96px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(40,42,46,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #f5f5f7; font: 24px/1 -apple-system, sans-serif; cursor: pointer; opacity: 0; transition: opacity .25s ease; }
  .project-gallery[data-view="folder"] .rp-shelf-prev { left: -18px; }
  .project-gallery[data-view="folder"] .rp-shelf-next { right: -18px; }
  .project-gallery[data-view="folder"] .rp-shelf-wrap:hover .rp-shelf-nav,
  .project-gallery[data-view="folder"] .rp-shelf-nav:focus-visible { opacity: 1; }
  .project-gallery[data-view="folder"] .rp-shelf-nav:disabled { opacity: 0 !important; pointer-events: none; }
  .project-gallery[data-view="folder"] .rp-deck { position: relative; height: 430px; margin-top: 20px; }
  .project-gallery[data-view="folder"] .rp-screen { position: absolute; right: 0; top: 0; width: 54%; aspect-ratio: 1280 / 656; padding: 8px; border-radius: 16px; background: #0d0e10; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.5); }
  .project-gallery[data-view="folder"] .rp-screen .rp-glass { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #020303; }
  .project-gallery[data-view="folder"] .rp-screen video, .project-gallery[data-view="folder"] .rp-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
  .project-gallery[data-view="folder"] .rp-screen .rp-on { opacity: 1; }
  .project-gallery[data-view="folder"] .rp-screen .rp-idle { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .2em; color: #2f4a3d; transition: opacity .4s ease; }
  .project-gallery[data-view="folder"] .rp-screen .rp-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 48px 18px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); opacity: 0; transition: opacity .5s ease .2s; }
  .project-gallery[data-view="folder"] .rp-screen-ready .rp-screen .rp-info { opacity: 1; }
  .project-gallery[data-view="folder"] .rp-screen-ready .rp-screen .rp-idle { opacity: 0; }
  .project-gallery[data-view="folder"] .rp-info h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; }
  .project-gallery[data-view="folder"] .rp-info p { margin: 0; font-size: 13px; color: #a1a1a6; max-width: 40ch; }
  .project-gallery[data-view="folder"] .rp-info button { flex: 0 0 auto; height: 34px; padding: 0 16px; border: 0; border-radius: 99px; font: inherit; font-size: 14px; color: #fff; background: #0071e3; cursor: pointer; }
  .project-gallery[data-view="folder"] .rp-top { position: absolute; left: 0; right: 0; top: 306px; height: 64px; clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #2c2e32, #1c1d20 70%, #151619); }
  .project-gallery[data-view="folder"] .rp-top::after { content: ""; position: absolute; left: 1.5%; right: 1.5%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); }
  .project-gallery[data-view="folder"] .rp-front { position: absolute; left: 0; right: 0; top: 370px; bottom: 0; border-radius: 0 0 24px 24px; background: linear-gradient(180deg, #1e1f23, #121315); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 34px 70px rgba(0,0,0,.6); }
  .project-gallery[data-view="folder"] .rp-display { position: absolute; left: 24px; top: 15px; width: 300px; height: 30px; border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #050807; box-shadow: inset 0 0 0 1px rgba(127,224,176,.12), inset 0 6px 16px rgba(0,0,0,.6); font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: #4d6b5d; white-space: nowrap; overflow: hidden; }
  .project-gallery[data-view="folder"] .rp-display .rp-dot { flex: 0 0 6px; height: 6px; border-radius: 50%; background: #23332b; }
  .project-gallery[data-view="folder"] .rp-playing-state .rp-display { color: #7fe0b0; text-shadow: 0 0 10px rgba(127,224,176,.45); }
  .project-gallery[data-view="folder"] .rp-playing-state .rp-display .rp-dot { background: #7fe0b0; box-shadow: 0 0 8px #7fe0b0; animation: rp-blink 1.2s ease-in-out infinite; }
  .project-gallery[data-view="folder"] .rp-leds { position: absolute; left: 50%; top: 22px; display: flex; gap: 16px; transform: translateX(-50%); }
  .project-gallery[data-view="folder"] .rp-leds i { width: 6px; height: 6px; border-radius: 50%; background: #2a2c30; transition: background .3s ease, box-shadow .3s ease; }
  .project-gallery[data-view="folder"] .rp-leds i.rp-on { background: var(--rp-acc); box-shadow: 0 0 10px var(--rp-acc); }
  .project-gallery[data-view="folder"] .rp-knob { position: absolute; top: 17px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4d53, #1b1c1f 70%); box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15); }
  .project-gallery[data-view="folder"] .rp-platter-wrap { position: absolute; left: calc(22% - 170px); top: 168px; width: 340px; height: 340px; transform: perspective(1000px) rotateX(68deg); }
  .project-gallery[data-view="folder"] .rp-platter { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #3a3c41 0 60%, #6c6f75 66%, #2a2b2f 70%); box-shadow: 0 0 0 4px #17181b, 0 40px 50px rgba(0,0,0,.65); }
  .project-gallery[data-view="folder"] .rp-record { position: absolute; inset: 5%; border-radius: 50%; opacity: 0; transition: opacity .25s ease; }
  .project-gallery[data-view="folder"] .rp-record.rp-on { opacity: 1; }
  .project-gallery[data-view="folder"] .rp-disc { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, #0c0c0d 0 1.2px, #18181b 1.2px 2.6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
  .project-gallery[data-view="folder"] .rp-disc .rp-lbl { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, #07080a 0 6%, var(--rp-acc) 7%); }
  .project-gallery[data-view="folder"] .rp-disc .rp-lbl::after { content: ""; position: absolute; left: 46%; top: 8%; width: 8%; height: 22%; border-radius: 2px; background: rgba(0,0,0,.35); }
  .project-gallery[data-view="folder"] .rp-record .rp-disc { animation: rp-spin 1.8s linear infinite; animation-play-state: paused; }
  .project-gallery[data-view="folder"] .rp-playing-state .rp-record .rp-disc { animation-play-state: running; }
  .project-gallery[data-view="folder"] .rp-record::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 200deg, transparent 0 18%, rgba(255,255,255,.10) 25%, transparent 33% 66%, rgba(255,255,255,.07) 74%, transparent 82%); }
  .project-gallery[data-view="folder"] .rp-arm { position: absolute; z-index: 4; left: calc(22% + 128px); top: 196px; width: 8px; height: 150px; transform-origin: 4px 6px; transform: rotate(-6deg); transition: transform .8s cubic-bezier(.16,1,.3,1); }
  .project-gallery[data-view="folder"] .rp-arm::before { content: ""; position: absolute; left: -8px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7a7d84, #2a2b2f); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
  .project-gallery[data-view="folder"] .rp-arm i { position: absolute; left: 3px; top: 6px; width: 2px; height: 132px; border-radius: 1px; background: linear-gradient(180deg, #c9ccd1, #6c6f75); }
  .project-gallery[data-view="folder"] .rp-arm b { position: absolute; left: -4px; bottom: 0; width: 14px; height: 18px; border-radius: 3px; background: #c9ccd1; transform: rotate(18deg); }
  .project-gallery[data-view="folder"] .rp-playing-state .rp-arm { transform: rotate(30deg); }
  .project-gallery[data-view="folder"] .rp-fly { position: absolute; z-index: 20; border-radius: 50%; pointer-events: none; transform-origin: 50% 50%; }
  .project-gallery[data-view="folder"] .rp-fly .rp-disc .rp-lbl { background: radial-gradient(circle, #07080a 0 6%, var(--rp-facc) 7%); }


  .project-gallery[data-view="folder"] .rp-info { visibility: hidden; pointer-events: none; }
  .project-gallery[data-view="folder"] .rp-screen-ready .rp-info { visibility: visible; pointer-events: auto; }
  .project-gallery[data-view="folder"] .rp-playing-state .rp-display { color: var(--rp-acc); text-shadow: 0 0 10px var(--rp-acc); }
  .project-gallery[data-view="folder"] .rp-playing-state .rp-display .rp-dot { background: var(--rp-acc); box-shadow: 0 0 8px var(--rp-acc); }
  .project-gallery[data-view="folder"] .rp-stage.rp-paused .rp-record .rp-disc,
  .project-gallery[data-view="folder"] .rp-stage.rp-paused .rp-display .rp-dot { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .project-gallery[data-view="folder"] .project-gallery-track { display: none; }
    .project-gallery[data-view="folder"] .rp-stage * { animation: none !important; transition: none !important; }
    .project-gallery[data-view="folder"] .rp-sleeve:hover,
    .project-gallery[data-view="folder"] .rp-sleeve:focus-visible { transform: none; }
  }
}
@keyframes rp-spin { to { transform: rotate(360deg); } }
@keyframes rp-blink { 50% { opacity: .35; } }

/* v19：弱网播放保护（media-resilience.js） */
.em-spinner { position: absolute; left: 50%; top: 50%; z-index: 20; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.88); opacity: 0; pointer-events: none; transition: opacity .25s ease; animation: em-spin .9s linear infinite; }
.em-spinner.em-on { opacity: 1; }
.em-retry { position: absolute; left: 50%; top: 50%; z-index: 21; transform: translate(-50%, -50%); height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(255,255,255,.22); background: rgba(30,32,36,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #f5f5f7; font: inherit; font-size: 14px; cursor: pointer; }
.em-retry[hidden] { display: none; }
@keyframes em-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .em-spinner { animation-duration: 2.4s; } }