/* ============================================================
   Kevin Luo Film — 黑底白字 · 细线 · 微动效
   ============================================================ */

:root {
  --bg: #0b0b0c;
  --bg-soft: #101012;
  --ink: #f2f1ec;
  --ink-dim: rgba(242, 241, 236, 0.55);
  --ink-faint: rgba(242, 241, 236, 0.32);
  --line: rgba(242, 241, 236, 0.14);
  --line-strong: rgba(242, 241, 236, 0.32);
  --font: "SF Pro Display", -apple-system, "PingFang SC", "Noto Sans SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(242, 241, 236, 0.9); color: #111; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.dim { color: var(--ink-dim); }
.small { font-size: 12.5px; }

/* ---------- 进入动效 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .marquee-track, .bts-track, .scroll-cue i::after,
  .sec-head.in .sec-line { animation: none; }
  .hero-rule { animation: none; transform: scaleX(1); }
}

/* ---------- 导航 ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand {
  display: inline-flex; align-items: center;
}
.brand img { display: block; height: clamp(22px, 3vw, 28px); width: auto; }
.menu { display: flex; gap: clamp(20px, 3.5vw, 44px); }
.menu a {
  position: relative; font-size: 13.5px; letter-spacing: 0.14em;
  color: var(--ink-dim); padding: 6px 0; transition: color 0.2s ease;
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform 0.25s var(--ease);
}
.menu a:hover, .menu a.on { color: var(--ink); }
.menu a.on::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .menu a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.burger {
  display: none; background: rgba(242, 241, 236, 0.05); border: 1px solid var(--line-strong);
  border-radius: 10px; width: 42px; height: 42px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform 0.4s var(--ease), opacity 0.3s; }
.burger.open { border-color: rgba(242, 241, 236, 0.55); }
.burger.open span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.burger.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { min-height: calc(100svh - var(--nav-h)); padding-top: var(--nav-h); display: flex; flex-direction: column; justify-content: center; }
.hero-kicker {
  font-size: 12px; letter-spacing: 0.42em; color: var(--ink-faint);
  text-transform: uppercase; margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(46px, 8.6vw, 122px);
  font-weight: 250; letter-spacing: 0.015em; line-height: 1.04;
}
.hero h1 .cn {
  display: block; font-size: clamp(15px, 1.6vw, 20px); font-weight: 400;
  letter-spacing: 0.5em; color: var(--ink-dim); margin-top: 22px;
}
.hero-rule {
  height: 1px; background: var(--line-strong); margin: clamp(30px, 5vh, 54px) 0 0;
  transform: scaleX(0); transform-origin: left;
  animation: draw 1.4s var(--ease) 0.3s forwards;
}
@keyframes draw { to { transform: scaleX(1); } }

.hero-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: clamp(22px, 4vh, 40px) 0 clamp(28px, 5vh, 56px);
}
.hero-tags { font-size: 12.5px; letter-spacing: 0.28em; color: var(--ink-faint); }
.scroll-cue { font-size: 11.5px; letter-spacing: 0.3em; color: var(--ink-faint); display: flex; align-items: center; gap: 12px; }
.scroll-cue i { display: block; width: 44px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ---------- 区块 ---------- */
.sec { padding-top: clamp(64px, 10vh, 120px); padding-bottom: clamp(40px, 6vh, 72px); }
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(32px, 5vh, 56px); }
.sec-num { font-size: 12px; letter-spacing: 0.2em; color: var(--ink-faint); }
.sec-head h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 300; letter-spacing: 0.06em; white-space: nowrap; }
.sec-line { flex: 1; height: 1px; background: var(--line); align-self: center; transform-origin: left; }
.sec-head.in .sec-line { animation: draw 1.2s var(--ease) 0.15s forwards; }

/* ---------- 筛选 ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.chip {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); font-size: 13px; letter-spacing: 0.08em;
  padding: 8px 20px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s var(--ease), transform 0.16s var(--ease);
}
.chip:active { transform: scale(0.96); }
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #101010; }
.filters.tags { gap: 8px; margin-bottom: 46px; }
.chip.tag { font-size: 12px; padding: 5px 14px; color: var(--ink-faint); }
.chip.tag.on { background: none; color: var(--ink); border-color: var(--ink-strong, var(--ink)); }

/* ---------- 作品卡片 ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 52px 34px; }
.card {
  cursor: pointer;
  /* 同时承载 .reveal 入场（opacity/transform）与按压反馈（scale，独立属性互不干扰） */
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), scale 0.16s var(--ease);
}
.card:active { scale: 0.98; }
.card-cover {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line);
}
.card-cover .bg {
  position: absolute; inset: 0; background: var(--cv, #1a1a1a);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.card:hover .card-cover .bg { transform: scale(1.045); }
.card-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,0) 55%, rgba(11,11,12,0.55));
  pointer-events: none;
}
.card-dur {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: 11px; letter-spacing: 0.14em; color: rgba(242,241,236,0.75);
  border: 1px solid rgba(242,241,236,0.25); padding: 3px 9px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.card-lock {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(11, 11, 12, 0.45); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  color: var(--ink-dim); font-size: 12px; letter-spacing: 0.3em;
  transition: background 0.4s var(--ease);
}
.card:hover .card-lock { background: rgba(11, 11, 12, 0.3); color: var(--ink); }
.card-lock svg { width: 22px; height: 22px; opacity: 0.85; }
.card-row { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }
.card-row .idx { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.1em; }
.card-row h3 { font-size: 16.5px; font-weight: 400; letter-spacing: 0.04em; flex: 1; transition: color 0.3s; }
.card-row .arrow { color: var(--ink-faint); transform: translateX(-6px); opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-row .arrow,
  .album-card:hover .card-row .arrow { transform: none; opacity: 1; color: var(--ink); }
}
.card-meta { font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.1em; margin-top: 5px; }

/* ---------- 详情页 ---------- */
.detail { padding-top: calc(var(--nav-h) + clamp(30px, 6vh, 60px)); padding-bottom: 90px; }
.backlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: 0.22em; color: var(--ink-faint);
  margin-bottom: 30px; transition: color 0.3s;
}
button.backlink { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font); }

/* 异步加载占位 */
.view-loading {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 150px 0; color: var(--ink-faint); font-size: 11.5px; letter-spacing: 0.32em;
}
/* 显影加载：显影罐反复上下颠倒（模拟冲卷摇罐），文案「正在显影」 */
.dev-tank {
  position: relative; width: 46px; height: 58px;
  border-radius: 9px 9px 12px 12px;
  background: linear-gradient(180deg, #232326, #141417);
  border: 1px solid rgba(242, 241, 236, 0.3);
  animation: dev-flip 1.8s ease-in-out infinite;
}
.dev-tank::before {
  content: ""; position: absolute; top: 6px; left: 4px; right: 4px; height: 10px;
  border-radius: 4px; border: 1px solid rgba(242, 241, 236, 0.35); background: #1b1b1e;
}
.dev-tank::after {
  content: ""; position: absolute; top: 11px; left: 50%; width: 12px; height: 6px;
  transform: translateX(-50%); border-radius: 3px 3px 0 0;
  background: rgba(242, 241, 236, 0.4);
}
/* 摇罐节奏：正立停 → 翻 180° → 倒立停 → 沿原轨迹快速翻回 → 正立停（无缝循环） */
@keyframes dev-flip {
  0%, 12% { transform: rotate(0deg); }
  30%, 48% { transform: rotate(180deg); }
  60%, 100% { transform: rotate(0deg); }
}
.dev-words { font-size: 11.5px; letter-spacing: 0.32em; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) {
  .dev-tank { animation: none; }
}

/* 开场画面：会话首次访问显示一次 */
.brand-intro {
  position: fixed; inset: 0; z-index: 200;
  background: #0b0b0c;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  transition: opacity 0.55s var(--ease), visibility 0s linear 0s;
}
.brand-intro-dev {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; animation: intro-in 0.9s var(--ease) 0.3s forwards;
}
.brand-intro img {
  width: min(64vw, 560px);
  opacity: 0; transform: scale(0.94);
  animation: intro-in 0.9s var(--ease) 0.15s forwards;
}
.brand-intro.hide { opacity: 0; visibility: hidden; transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s; }
@keyframes intro-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .brand-intro img { animation: none; opacity: 1; transform: none; }
  .brand-intro.hide { transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
}

/* 页脚品牌 logo */
.footer-brand { display: block; height: 54px; width: auto; opacity: 0.95; margin-bottom: 22px; }
.backlink:hover { color: var(--ink); }
.detail-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 34px; }
.detail-title h1 { font-size: clamp(26px, 4vw, 46px); font-weight: 300; letter-spacing: 0.04em; }
.detail-title .cat { font-size: 12px; letter-spacing: 0.28em; color: var(--ink-faint); border: 1px solid var(--line); padding: 6px 16px; border-radius: 999px; white-space: nowrap; }

.player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); background: var(--cv, #151517);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: grid; place-items: center;
}
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* 竖版/非 16:9 视频：grid 里 height:100% 会失效退化成按比例撑高（被裁剪），必须绝对定位参照播放器盒子 */
.player .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.player .ph .play { width: 74px; height: 74px; border-radius: 50%; border: 2px solid rgba(242, 241, 236, 0.9); display: grid; place-items: center; color: var(--ink); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .player .ph:hover .play { border-color: var(--ink); transform: scale(1.06); }
}
.player .ph p { font-size: 11.5px; letter-spacing: 0.3em; color: var(--ink-faint); }
.player.playing { background-image: none; background-color: #000; }
/* 自托管视频自绘控制条（原生控件在内嵌浏览器会触发整页黑屏渲染） */
.player video::-webkit-media-controls { display: none !important; }
.player video::-webkit-media-controls-enclosure { display: none !important; }
.player .vctrl {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(11, 11, 12, 0.6); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.player:hover .vctrl, .player.vshow .vctrl, .player.vpaused .vctrl { opacity: 1; }
.player .vctrl .v-logo { height: 20px; width: auto; border-radius: 4px; flex: none; }
.player .vctrl button { background: none; border: 0; padding: 2px; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: color 0.2s var(--ease); }
.player .vctrl button:hover { color: #ffd9a0; }
.player .v-time { font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-dim); white-space: nowrap; }
.player .v-seek { flex: 1; appearance: none; -webkit-appearance: none; height: 3px; border-radius: 2px; background: rgba(242, 241, 236, 0.28); outline: none; cursor: pointer; }
.player .v-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.player .v-seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--ink); }
.player .v-rate { font-size: 11px; letter-spacing: 0.06em; min-width: 30px; padding: 2px 4px; }
.player .v-rate.slow { color: #ffd9a0; }
.player .v-frame {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: none; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font-family: var(--font);
}
.player.vpaused .v-frame { display: flex; }
.player .v-frame i {
  font-style: normal; width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid rgba(242, 241, 236, 0.85); background: rgba(11, 11, 12, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), scale 0.16s var(--ease);
}
.player .v-frame:hover i {
  border-color: var(--ink);
  box-shadow: 0 0 26px -6px rgba(255, 190, 110, 0.5);
}
.player .v-frame:active i { scale: 0.94; }
.player .v-frame span {
  font-size: 11px; letter-spacing: 0.16em; color: var(--ink); white-space: nowrap;
  background: rgba(11, 11, 12, 0.55); border: 1px solid rgba(242, 241, 236, 0.25);
  padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.player .v-frame-back { left: clamp(12px, 4vw, 48px); }
.player .v-frame-fwd { right: clamp(12px, 4vw, 48px); }
@media (hover: hover) and (pointer: fine) {
  .player.vpaused .v-frame i { animation: vframe-pulse 2.6s var(--ease) infinite; }
  @keyframes vframe-pulse { 0%, 100% { box-shadow: 0 0 0 -4px rgba(255, 205, 140, 0); } 50% { box-shadow: 0 0 22px -2px rgba(255, 205, 140, 0.35); } }
}
.player .v-copy { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint); white-space: nowrap; }
@media (max-width: 720px) { .player .v-copy { display: none; } }
/* 手机端播放器：示波器卡默认关（JS 控）、无逐帧箭头、控制条紧凑单行 */
@media (max-width: 720px), (pointer: coarse) {
  .player .v-frame { display: none !important; }
}
@media (max-width: 720px) {
  .player .vctrl {
    left: 10px; right: 10px; bottom: 10px;
    padding: 4px 8px; gap: 8px; border-radius: 8px;
  }
  .player .v-logo, .player .v-time { display: none; }
  .player .vctrl > * { flex: none; }
  .player .v-seek { flex: 1 1 auto; min-width: 40px; }
  .player .v-toggle svg, .player .v-fs svg, .player .v-mute svg { width: 13px; height: 13px; }
  .player .v-rate { font-size: 10px; min-width: 26px; padding: 2px 2px; }
  .player .v-steal, .player .v-scope, .player .v-rate { white-space: nowrap; }
  .player .v-steal, .player .v-scope { font-size: 10px; padding: 2px 6px; }
}
.player .v-vol {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 64px; height: 3px; border-radius: 2px;
  background: rgba(242, 241, 236, 0.28); outline: none; cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
.player .v-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.player .v-vol::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--ink); }
.player .v-fs svg { display: block; }
/* 全屏态：解除 16:9 限制，铺满屏幕（视频 contain 不裁切） */
.player:fullscreen, .player:-webkit-full-screen {
  aspect-ratio: auto; width: 100%; height: 100%; border: 0; border-radius: 0;
}
.player:fullscreen video, .player:-webkit-full-screen video { width: 100%; height: 100%; }
/* 触屏环境（iOS 禁 JS 调音量）与窄屏隐藏音量滑杆，只留静音键 */
@media (pointer: coarse), (max-width: 720px) {
  .player .v-vol { display: none; }
}

/* 同类作品（详情页底部，复用首页 .card 卡片样式；单行滚动 + 覆盖式左右箭头，两端渐隐，无滚动条） */
.related { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); }
.rel-wrap { position: relative; }
.rel-row {
  display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none;
  --fade-l: 76px; --fade-r: 76px;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.rel-row::-webkit-scrollbar { display: none; }
.rel-row:not(.can-left) { --fade-l: 0px; }
.rel-row:not(.can-right) { --fade-r: 0px; }
.rel-row .card { flex: none; width: min(300px, 78vw); }
.rel-arrow {
  position: absolute; top: calc(min(300px, 78vw) * 0.28125); transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 2px solid rgba(242, 241, 236, 0.85); background: rgba(11, 11, 12, 0.55);
  color: var(--ink); font-size: 17px; cursor: pointer; font-family: var(--font);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.25s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), scale 0.16s var(--ease);
}
.rel-arrow.left { left: 14px; }
.rel-arrow.right { right: 14px; }
.rel-arrow.off { opacity: 0; pointer-events: none; }
.rel-arrow:hover { border-color: var(--ink); box-shadow: 0 0 26px -6px rgba(255, 190, 110, 0.5); }
.rel-arrow:active { scale: 0.94; }

.detail-desc { max-width: 720px; margin: 36px 0 10px; color: var(--ink-dim); }
.meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 34px 0 54px;
}
.meta-grid > div { padding: 20px 18px 20px 0; border-right: 1px solid var(--line); }
.meta-grid > div:last-child { border-right: 0; }
.meta-grid dt { font-size: 11px; letter-spacing: 0.28em; color: var(--ink-faint); margin-bottom: 8px; }
.meta-grid dd { font-size: 14.5px; letter-spacing: 0.03em; }

.stills { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.stills .still { margin: 0; border: 1px solid var(--line); background: #141416; overflow: hidden; cursor: zoom-in; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.stills .still img { display: block; height: clamp(150px, 24vw, 240px); width: auto; }
.stills .still:not(:has(img)) { height: clamp(150px, 24vw, 240px); aspect-ratio: 16 / 9; background: var(--cv); background-size: cover; background-position: center; background-repeat: no-repeat; }
.stills-label { font-size: 11.5px; letter-spacing: 0.3em; color: var(--ink-faint); margin: 44px 0 18px; }

.pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 26px; border-top: 1px solid var(--line); }
.pager a { font-size: 13px; letter-spacing: 0.14em; color: var(--ink-dim); transition: color 0.3s; max-width: 46%; }
.pager a:hover { color: var(--ink); }
.pager a.next { text-align: right; }

/* 锁定详情 */
.locked-view {
  aspect-ratio: 16 / 9; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  margin-top: 30px; text-align: center; padding: 20px;
}
.locked-view svg { width: 30px; height: 30px; color: var(--ink-faint); }
.locked-view p { font-size: 13px; letter-spacing: 0.2em; color: var(--ink-dim); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: #101010; border: 1px solid var(--ink);
  font-size: 13px; letter-spacing: 0.18em; padding: 13px 34px; border-radius: 999px;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.16s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--ink); }

/* ---------- 摄影栅格 ---------- */
.photo-grid { columns: 3 280px; column-gap: 18px; }
.photo { position: relative; break-inside: avoid; margin-bottom: 18px; cursor: zoom-in; }
/* 相册卡片（摄影页） */
/* 相册瀑布流（摄影页） */
.masonry { columns: 3 300px; column-gap: 24px; }
.album-card {
  cursor: pointer; break-inside: avoid; margin: 0 0 24px;
  transition: scale 0.16s var(--ease), opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.album-card:active { scale: 0.98; }
.album-cover {
  position: relative; overflow: hidden;
  aspect-ratio: var(--r, 4 / 3);
  border: 1px solid var(--line); background: #141416;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.album-cover .bg {
  position: absolute; inset: 0; background: var(--cv, #151517);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 1.1s var(--ease);
}
.album-count {
  position: absolute; top: 12px; right: 12px; font-size: 11px; letter-spacing: 0.12em;
  color: rgba(242, 241, 236, 0.78); border: 1px solid rgba(242, 241, 236, 0.25);
  padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.album-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 13px;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, 0.5) 52%, rgba(11, 11, 12, 0.88) 100%);
}
.album-overlay h3 { margin: 0 0 4px; font-size: 15.5px; letter-spacing: 0.04em; color: var(--ink); }
.album-overlay p { margin: 0; font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-dim); }
.photo .frame { width: 100%; aspect-ratio: var(--r, 3/4); border: 1px solid var(--line); background: var(--cv); background-size: cover; background-position: center; background-repeat: no-repeat; transition: filter 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(11,11,12,0.7));
  font-size: 12px; letter-spacing: 0.2em; color: var(--ink-dim);
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .photo:hover figcaption { opacity: 1; transform: none; }
}

/* 灯箱 */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(8, 8, 9, 0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
.lightbox .canvas {
  /* 宽度随比例自适应：竖图完整显示不被裁切，横图也不超过 1100px；底部留出缩略图条空间 */
  width: min(86vw, calc((100vh - 220px) * var(--rn, 1.5)), 1100px); aspect-ratio: var(--r, 3/2); max-height: calc(100vh - 220px);
  border: 1px solid var(--line); background: var(--cv);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(0.96); transition: transform 0.2s var(--ease);
}
.lightbox.open .canvas { transform: none; }
.lightbox .lb-meta { position: absolute; bottom: 84px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: 0.24em; color: var(--ink-dim); }
.lightbox:not(.has-thumbs) .lb-meta { bottom: 34px; }
.lightbox .lb-thumbs {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  max-width: 86vw; display: flex; gap: 8px; overflow-x: auto;
  padding: 6px; background: rgba(11, 11, 12, 0.65); border: 1px solid var(--line); border-radius: 10px;
  scrollbar-width: none;
}
.lightbox .lb-thumbs::-webkit-scrollbar { display: none; }
.lightbox .lb-thumb {
  flex: none; height: 48px; padding: 0; border: 1px solid var(--line); background: #141416;
  cursor: pointer; opacity: 0.55;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox .lb-thumb img { display: block; height: 100%; width: auto; }
.lightbox .lb-thumb.on { opacity: 1; border-color: var(--ink); }
.lightbox .lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(11, 11, 12, 0.55); border: 2px solid rgba(242, 241, 236, 0.85); border-radius: 50%;
  width: 54px; height: 54px; color: var(--ink); font-size: 20px;
  cursor: pointer; font-family: var(--font);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), scale 0.16s var(--ease);
}
.lightbox .lb-btn:hover { border-color: var(--ink); box-shadow: 0 0 26px -6px rgba(255, 190, 110, 0.5); }
.lightbox .lb-btn:active { scale: 0.94; }
.lightbox .lb-prev { left: clamp(12px, 4vw, 48px); }
.lightbox .lb-next { right: clamp(12px, 4vw, 48px); }
.lightbox .lb-close {
  position: absolute; top: 26px; right: clamp(12px, 4vw, 48px);
  background: none; border: 0; color: var(--ink-dim); font-size: 15px; letter-spacing: 0.2em;
}
.lightbox .lb-close:hover { color: var(--ink); }

/* ---------- 影棚 ---------- */
.studio-hero { padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 80px)); }
.studio-hero h1 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 250; letter-spacing: 0.04em; }
.studio-hero .sub { color: var(--ink-dim); max-width: 640px; margin-top: 22px; }
/* 品牌锁定:三苹米 × 化工厂影棚 */
.studio-brandlock { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(12px, 3vw, 30px); }
@media (hover: none), (pointer: coarse) {
  .only-fine { display: none; }
}
.studio-brandlock .sb-spm { height: clamp(30px, 7.5vw, 68px); width: auto; }
.studio-brandlock .sb-x { font-size: clamp(14px, 3vw, 32px); font-weight: 200; color: var(--ink-faint); }
.studio-brandlock .sb-hgc { height: clamp(22px, 5.2vw, 48px); width: auto; }

/* 首页影棚模块:3D线框模型(自动旋转·无交互·暗化覆盖) */
/* viewBox 与影棚页同源,已扩到容纳整圈旋转;模型主体中心锚定在模块(60%,29.5%) */
.home-iso {
  position: absolute; left: 60%; top: 29.5%;
  transform: translate(-50%, -50%);
  width: min(28vw, 392px); aspect-ratio: 655 / 544;
  pointer-events: none; user-select: none;
}
.home-iso svg { display: block; width: 100%; height: 100%; }
.home-iso .g-plate { fill: rgba(242,241,236,0.05); stroke: rgba(242,241,236,0.4); stroke-width: 1.4; }
.home-iso .shell { stroke: rgba(242,241,236,0.62); stroke-width: 1.5; }
.home-iso .eave, .home-iso .gable { fill: none; stroke: rgba(242,241,236,0.45); stroke-width: 1.2; }
.home-iso .ridge { stroke: rgba(242,241,236,0.68); stroke-width: 1.5; }
.home-iso .roof { fill: rgba(242,241,236,0.03); stroke: rgba(242,241,236,0.32); stroke-width: 1.1; }
.home-iso .cyc-floor { fill: none; stroke: rgba(255,249,235,0.6); stroke-width: 1.5; }
.home-iso .dline { stroke: rgba(242,241,236,0.28); stroke-width: 1; }
.home-iso .iso-dimtext { fill: rgba(242,241,236,0.5); font-size: 17px; letter-spacing: 0.1em; }
.home-iso .rail { stroke: rgba(242,241,236,0.5); stroke-width: 1.1; opacity: 0.6; }
/* 分区点亮轮播:与影棚页(iso-stage)同款高亮,无 hover/点击 */
.home-iso .iso-zone {
  fill: rgba(255,205,140,0.03); stroke: rgba(255,205,140,0.35); stroke-width: 1;
  transition: fill 0.35s var(--ease), stroke 0.35s var(--ease);
}
.home-iso .iso-zone.on {
  fill: rgba(255,205,140,0.2); stroke: rgba(255,206,140,0.95);
  filter: drop-shadow(0 0 5px rgba(255,205,140,0.55)) drop-shadow(0 0 16px rgba(255,205,140,0.3));
}
.home-iso .iso-zone.f2 { fill: none; stroke: rgba(242,241,236,0.25); stroke-dasharray: 5 4; }
.home-iso .iso-zone.f2.on { fill: rgba(255,205,140,0.1); stroke: rgba(255,206,140,0.9); stroke-dasharray: 0; }
.home-iso.act-shooting .cyc-floor { fill: rgba(255,250,240,0.10); }
.home-iso::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11, 11, 12, 0.45);
}
@media (max-width: 1100px) {
  .home-iso { opacity: 0.55; left: auto; right: -4vw; top: 30%; transform: none; width: 36.4vw; }
}
@media (max-width: 860px) {
  .home-iso { display: none; }
}
/* 立体导览:全宽舞台 + 右下角信息窗 */
.iso-sec { margin-top: clamp(48px, 8vh, 84px); }
.iso-head { margin-bottom: 20px; }
.iso-stage {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden; cursor: default; touch-action: pan-y;
}
#studio-iso { display: block; width: 100%; height: clamp(400px, 62vh, 640px); margin: 0 auto; padding: 10px 0 0; }
@media (prefers-reduced-motion: reduce) {
  #studio-iso, .iso-halo, .iso-stage .shell, .iso-stage .ridge, .iso-stage .eave, .iso-stage .gable, .iso-stage .cyc-floor { animation: none; filter: none; } }
.iso-stage .g-plate { fill: rgba(242,241,236,0.05); stroke: rgba(242,241,236,0.4); stroke-width: 1.4; }
.iso-stage .shell { stroke: rgba(242,241,236,0.62); stroke-width: 1.5; }
.iso-stage .eave, .iso-stage .gable { fill: none; stroke: rgba(242,241,236,0.45); stroke-width: 1.2; }
.iso-stage .ridge { stroke: rgba(242,241,236,0.68); stroke-width: 1.5; }
.iso-stage .roof { fill: rgba(242,241,236,0.03); stroke: rgba(242,241,236,0.32); stroke-width: 1.1; }
.iso-stage .cyc-floor { fill: none; stroke: rgba(255,249,235,0.6); stroke-width: 1.5; transition: fill 0.4s var(--ease); }
.iso-stage.act-shooting .cyc-floor { fill: rgba(255,250,240,0.10); }
.iso-stage .rail { stroke: rgba(242,241,236,0.5); stroke-width: 1.1; }
.iso-stage .dline { stroke: rgba(242,241,236,0.28); stroke-width: 1; }
.iso-stage .iso-zone {
  fill: rgba(255,205,140,0.03); stroke: rgba(255,205,140,0.35); stroke-width: 1;
  cursor: pointer; outline: none;
  transition: fill 0.35s var(--ease), stroke 0.35s var(--ease);
}
.iso-stage .iso-zone:hover, .iso-stage .iso-zone.on {
  fill: rgba(255,205,140,0.2); stroke: rgba(255,206,140,0.95);
  filter: drop-shadow(0 0 5px rgba(255,205,140,0.55)) drop-shadow(0 0 16px rgba(255,205,140,0.3));
}
.iso-stage.has-active .shell { stroke: rgba(242,241,236,0.6); }
.iso-stage.has-active .ridge { stroke: rgba(242,241,236,0.65); }
.iso-stage.has-active .eave, .iso-stage.has-active .gable { stroke: rgba(242,241,236,0.45); }
.iso-stage.has-active .cyc-floor { stroke: rgba(255,249,235,0.55); }
.iso-stage .iso-zone.f2 { fill: none; stroke: rgba(242,241,236,0.25); stroke-dasharray: 5 4; }
.iso-stage .iso-zone.f2:hover, .iso-stage .iso-zone.f2.on { fill: rgba(255,205,140,0.1); stroke: rgba(255,206,140,0.9); stroke-dasharray: 0; }
.iso-stage .rail { opacity: 0.6; }
.iso-stage .callout { pointer-events: none; opacity: 0; transition: opacity 0.45s var(--ease); }
.iso-stage .callout.on { opacity: 1; }

/* 立体图发光氛围 */
.iso-stage .iso-halo { animation: halo-breathe 7s ease-in-out infinite alternate; }
@keyframes halo-breathe {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
.iso-stage .shell, .iso-stage .ridge, .iso-stage .eave, .iso-stage .gable {
  animation: line-glow 7s ease-in-out infinite alternate;
}
@keyframes line-glow {
  from { filter: drop-shadow(0 0 2px rgba(242, 241, 236, 0.12)); }
  to { filter: drop-shadow(0 0 6px rgba(255, 249, 235, 0.4)); }
}
.iso-stage .cyc-floor { filter: drop-shadow(0 0 6px rgba(255, 249, 235, 0.28)); }
.iso-stage .co-dot { fill: rgba(255, 205, 140, 0.9); transition: fill 0.3s var(--ease); }
.iso-stage .co-line { fill: none; stroke: rgba(242, 241, 236, 0.35); stroke-width: 1; stroke-dasharray: 4 3; transition: stroke 0.3s var(--ease); }
.iso-stage .co-name {
  fill: var(--ink-dim); font-size: 13px; letter-spacing: 0.12em; font-family: var(--font);
  transition: fill 0.3s var(--ease);
}
.iso-stage .co-area { fill: var(--ink-faint); font-size: 11px; letter-spacing: 0.1em; font-family: var(--font); }
.iso-stage .co-bg { fill: rgba(24, 23, 20, 0.78); stroke: rgba(242, 241, 236, 0.14); }
.iso-stage .callout.on .co-name { fill: var(--ink); }
.iso-stage .callout.on .co-line { stroke: rgba(255, 206, 140, 0.8); }
.iso-stage .callout.on .co-dot { fill: var(--ink); }
.studio-gal { mask-image: none; }
.gal-more { margin-top: 16px; }
.map-addr .addr-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.copy-mini {
  font-family: var(--font); font-size: 11.5px; letter-spacing: 0.14em;
  color: var(--ink-dim); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 14px; cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.copy-mini:hover { border-color: var(--line-strong); color: var(--ink); }



.iso-stage .iso-dimtext { fill: var(--ink-faint); font-size: 10px; letter-spacing: 0.08em; font-family: var(--font); pointer-events: none; }
.p-dim { stroke: rgba(242, 241, 236, 0.3); stroke-width: 1; }
.p-dimtext { fill: var(--ink-faint); font-size: 13px; letter-spacing: 0.08em; font-family: var(--font); }
.p-dimgroup { opacity: 0; transition: opacity 0.45s var(--ease); pointer-events: none; }
.p-dimgroup.on { opacity: 1; }
.panel-gal {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line); scrollbar-width: none;
}
.panel-gal::-webkit-scrollbar { display: none; }
.panel-gal .pg-item { flex: 0 0 auto; padding: 0; border: 0; background: none; }
.panel-gal .pg-item img {
  height: 52px; width: auto; display: block; border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.spec-panel .panel-gal { margin-top: 18px; }
.spec-panel .panel-gal .pg-item img { height: 60px; }

/* 平面导览 */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.6vw, 28px); align-items: start; margin-top: clamp(24px, 3.2vw, 40px); }
.plan-wrap2 { border: 1px solid var(--line); background: var(--bg-soft); padding: 0; overflow: hidden; width: min(100%, 960px); margin: 0 auto; }
.plan-wrap2 svg { width: 100%; height: auto; display: block; max-height: 56vh; }
.spec-panel.plain { position: static; }
/* 平面图面板:左文右图 */
#plan-panel { display: flex; gap: clamp(20px, 2.6vw, 34px); align-items: stretch; width: min(100%, 960px); margin: 0 auto; }
#plan-panel .fp-left { flex: 1 1 auto; min-width: 0; min-height: 292px; }
#plan-panel .panel-gal {
  flex: 0 0 clamp(240px, 34%, 430px);
  flex-direction: row; overflow-x: auto; overflow-y: hidden;
  margin-top: 18px; align-self: center; align-items: center;
}
#plan-panel .panel-gal .pg-item { flex: 0 0 auto; width: auto; }
#plan-panel .panel-gal .pg-item img { height: 112px; width: auto; }
.p-wall { fill: none; stroke: rgba(242, 241, 236, 0.55); stroke-width: 2.4; }
.p-wall-i { stroke: rgba(242, 241, 236, 0.28); stroke-width: 1.4; }
.p-gate { stroke: rgba(255, 205, 140, 0.9); stroke-width: 3; }
.plan-zone { cursor: pointer; outline: none; transition: fill 0.3s var(--ease), stroke 0.3s var(--ease); }
.plan-zone:focus-visible { stroke: rgba(255, 249, 235, 0.9); stroke-width: 1.8; }
.plan-zone { fill: rgba(242, 241, 236, 0.025); stroke: rgba(242, 241, 236, 0.2); stroke-width: 1; }
.pz-static { fill: rgba(242, 241, 236, 0.012); stroke: rgba(242, 241, 236, 0.14); stroke-width: 1; }
.cyc-line { fill: none; stroke: none; }
.p-cyc, .p-cyc-labels, .p-bar-items {
  opacity: 0; transition: opacity 0.45s var(--ease); pointer-events: none;
}
#studio-plan.act-shooting .p-cyc,
#studio-plan.act-shooting .p-cyc-labels { opacity: 1; }
#studio-plan.act-bar .p-bar-items { opacity: 1; }
.p-cyc { fill: rgba(255, 250, 240, 0.16); stroke: rgba(255, 250, 240, 0.55); stroke-width: 1.1; }
.p-cyc-labels text { fill: var(--ink); font-size: 12px; letter-spacing: 0.12em; }
.p-bar-items text { fill: var(--ink-dim); }
.p-furn-line { fill: none; stroke: rgba(255, 205, 140, 0.7); stroke-width: 1.2; stroke-dasharray: 4 3; }
.p-furn { fill: rgba(242, 241, 236, 0.08); stroke: rgba(242, 241, 236, 0.28); stroke-width: 1; }
.p-furn2 { fill: none; stroke: rgba(242, 241, 236, 0.2); stroke-width: 1; }
.p-dash { fill: none; stroke: rgba(242, 241, 236, 0.22); stroke-width: 1; stroke-dasharray: 4 4; }
.p-step { stroke: rgba(242, 241, 236, 0.3); stroke-width: 1; }
.p-cut { stroke: rgba(242, 241, 236, 0.25); stroke-width: 1; stroke-dasharray: 3 3; }
.p-f2 { fill: none; stroke: rgba(242, 241, 236, 0.16); stroke-width: 1; stroke-dasharray: 5 5; }
.p-rail { stroke: rgba(255, 205, 140, 0.55); stroke-width: 1.6; }
.plan-label { fill: var(--ink-dim); font-size: 12.5px; letter-spacing: 0.14em; font-family: var(--font); pointer-events: none; }
.plan-label.small { font-size: 11.5px; fill: var(--ink-faint); }
.plan-label.tiny { font-size: 10.5px; fill: var(--ink-faint); }
.plan-label.dim3 { fill: var(--ink-faint); }
.plan-dimtext { fill: var(--ink-faint); font-size: 10px; letter-spacing: 0.08em; font-family: var(--font); }
.plan-dimtext { transition: opacity 0.4s var(--ease); }

/* 棚内实拍胶片条 */
.studio-gal {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.studio-gal::-webkit-scrollbar { display: none; }
.studio-gal .g-item { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: zoom-in; }
.studio-gal .g-item img {
  height: clamp(130px, 15vw, 170px); width: auto; border: 1px solid var(--line);
  transition: filter 0.3s var(--ease), border-color 0.3s var(--ease), scale 0.3s var(--ease);
}

.studio-fee, .studio-map { margin-top: clamp(48px, 8vh, 84px); }
.studio-map { margin-bottom: clamp(56px, 10vh, 96px); }
.fee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 26px; border-top: 1px solid var(--line); }
.fee-card { padding: 26px 4px 26px 0; border-bottom: 1px solid var(--line); }
.fee-card em { display: block; font-style: normal; font-size: 12px; letter-spacing: 0.24em; color: var(--ink-faint); margin-bottom: 12px; }
.fee-card strong { font-size: clamp(30px, 3.4vw, 44px); font-weight: 250; letter-spacing: 0.02em; }
.fee-card strong span { font-size: 17px; color: var(--ink-faint); margin-left: 8px; letter-spacing: 0.1em; }
.hero-facts { border-top: 0; margin-top: 36px; }
.hero-facts .fee-card strong { font-size: clamp(22px, 2.2vw, 30px); white-space: nowrap; }
.hero-facts .fee-card small { font-size: 13px; }
.fee-card small { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); }
.fee-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); margin-top: clamp(36px, 6vh, 56px); }
.fee-rules > div { padding: 22px 4px 22px 0; border-bottom: 1px solid var(--line); }
.fee-rules h4 { font-size: 15.5px; font-weight: 400; letter-spacing: 0.08em; margin-bottom: 8px; }
.fee-rules p { font-size: 14px; line-height: 1.75; color: var(--ink-dim); }
.map-card {
  display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap;
  border: 1px solid var(--line); padding: clamp(18px, 2.4vw, 28px);
}
.map-addr em { display: block; font-style: normal; font-size: 11px; letter-spacing: 0.3em; color: var(--ink-faint); margin-bottom: 12px; }
.map-addr strong { display: block; font-size: clamp(17px, 2vw, 22px); font-weight: 300; letter-spacing: 0.04em; }
.map-addr span { display: block; margin-top: 10px; font-size: 13.5px; }
.map-dists { display: flex; gap: clamp(18px, 2.6vw, 34px); }
.map-dists em { display: block; font-style: normal; font-size: 12.5px; letter-spacing: 0.08em; color: var(--ink-faint); }
.map-dists strong { display: block; font-size: 19px; font-weight: 350; letter-spacing: 0.02em; margin-top: 4px; }
.map-dists span { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.map-links { display: flex; gap: 12px; flex-wrap: wrap; }

.spec-panel { border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); position: sticky; top: calc(var(--nav-h) + 24px); }
.spec-panel .spec-tag { font-size: 11px; letter-spacing: 0.3em; color: var(--ink-faint); margin-bottom: 10px; }
.spec-panel h3 { font-size: 21px; font-weight: 400; letter-spacing: 0.06em; margin-bottom: 20px; }
.spec-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; font-size: 13.5px; }
.spec-panel dt { color: var(--ink-faint); letter-spacing: 0.1em; }
.spec-panel dd { color: var(--ink-dim); }

.facility-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--line); margin-top: clamp(40px, 7vh, 72px); }
.facility-list > div { padding: 24px 22px 24px 0; border-bottom: 1px solid var(--line); }
.facility-list h4 { font-size: 14.5px; font-weight: 400; letter-spacing: 0.08em; margin-bottom: 6px; }
.facility-list p { font-size: 13px; color: var(--ink-faint); }

/* ---------- 关于 ---------- */
.about-hero { padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 80px)); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 72px); }
.about-hero > div { min-width: 0; display: flex; flex-direction: column; }
.about-hero h1 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 250; letter-spacing: 0.04em; line-height: 1.25; }
.about-portrait { aspect-ratio: 3/4; border: 1px solid var(--line); background: #141416 url("/assets/img/about-portrait.jpg") center/cover no-repeat; }
.about-body { max-width: 700px; margin-top: clamp(36px, 6vh, 60px); color: var(--ink-dim); display: grid; gap: 18px; }
.about-lead { margin-top: auto; padding-top: clamp(28px, 5vh, 48px); margin-left: calc((min(1280px, 100vw) - 796px) / 2 + 48px); }
.lead-name .cn { display: block; font-size: clamp(36px, 4vw, 52px); font-weight: 250; letter-spacing: 0.2em; line-height: 1.15; }
.lead-name .en {
  display: block; margin-top: clamp(6px, 1vh, 10px);
  font-size: clamp(15px, 1.6vw, 20px); font-weight: 300;
  letter-spacing: 0.34em; color: var(--ink-faint);
}
.lead-role { margin-top: clamp(14px, 2.2vh, 20px); font-size: 14.5px; line-height: 1.9; color: var(--ink-dim); max-width: min(34em, 100%); }
.studio-head { display: flex; align-items: flex-start; gap: clamp(22px, 3.2vw, 36px); }
.studio-badge { width: clamp(96px, 11vw, 140px); height: auto; flex: none; }
.studio-text { flex: 1; display: grid; gap: 14px; min-width: 0; }
.about-cv { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.about-cv li { border-top: 1px solid var(--line); padding: 18px 0 20px; }
.about-cv li:last-child { padding-bottom: 4px; }
.about-cv h4 { font-size: 14.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink); }
.about-cv p { margin-top: 7px; font-size: 14px; line-height: 1.9; color: var(--ink-dim); }
/* ---------- 社交账号 ---------- */
.about-social { margin-top: clamp(36px, 6vh, 60px); }
.social-label { font-size: 11.5px; letter-spacing: 0.3em; color: var(--ink-faint); margin-bottom: 12px; margin-left: calc((min(1280px, 100vw) - 796px) / 2 + 48px); }
.social-grid { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 10px; margin-left: calc((min(1280px, 100vw) - 796px) / 2 + 48px); padding-right: clamp(20px, 4vw, 48px); }
.social-item {
  display: inline-flex; align-items: baseline; gap: 9px; padding: 2px 0; min-width: 0;
  background: transparent; border: 0; color: inherit; font-family: inherit;
  text-align: left; text-decoration: none; cursor: pointer;
}
.social-item + .social-item { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--line); }
.social-item strong { flex: none; font-size: 13.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink); }
.social-item span { font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-faint); white-space: nowrap; transition: color 0.25s var(--ease); }
.social-item:active strong { color: var(--ink-dim); }
@media (hover: hover) and (pointer: fine) {
  .social-item:hover span { color: var(--ink); }
}
@media (max-width: 720px) {
  .social-grid { flex-direction: column; align-items: flex-start; row-gap: 11px; }
  .social-item + .social-item { margin-left: 0; padding-left: 0; border-left: 0; }
}

.about-studio {
  max-width: 700px; margin-top: clamp(44px, 8vh, 76px);
  border-top: 1px solid var(--line); padding-top: clamp(26px, 4.5vh, 40px);
  display: grid; gap: 14px;
}
.about-studio h3 { font-size: clamp(20px, 2.6vw, 27px); font-weight: 300; letter-spacing: 0.05em; }
.about-studio h3 span { font-size: 13px; font-weight: 400; letter-spacing: 0.16em; color: var(--ink-faint); margin-left: 10px; white-space: nowrap; }
.about-studio p { font-size: 14.5px; line-height: 1.9; color: var(--ink-dim); }
.about-studio p.motto { margin-top: 8px; font-size: 17px; letter-spacing: 0.08em; color: var(--ink); }
.about-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.about-tags span {
  font-size: 12px; letter-spacing: 0.1em; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin: clamp(36px, 6vh, 56px) 0 0 calc((min(1280px, 100vw) - 796px) / 2 + 48px); }

/* ---------- 微信弹层 ---------- */
button.btn { font-family: inherit; -webkit-appearance: none; }
.wx-overlay {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px;
  background: rgba(8, 8, 9, 0.74); opacity: 0; transition: opacity 0.26s var(--ease);
}
.wx-overlay[hidden] { display: none; }
.wx-overlay.show { opacity: 1; }
.wx-card {
  position: relative; width: min(330px, 88vw); background: #ffffff; color: #1c1c1e;
  border-radius: 16px; padding: 20px 20px 18px; text-align: center;
  transform: translateY(10px) scale(0.96); transition: transform 0.26s var(--ease);
}
.wx-overlay.show .wx-card { transform: none; }
.wx-qr { width: 100%; display: block; border-radius: 8px; }
.wx-tip { margin-top: 13px; font-size: 12.5px; line-height: 1.7; color: #6b6b70; }
.wx-id { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14.5px; color: #1c1c1e; }
.wx-id strong { font-weight: 600; letter-spacing: 0.05em; }
.wx-copy { font-family: inherit; border: 1px solid #dcdce0; background: #f4f4f6; border-radius: 999px; padding: 5px 14px; font-size: 12.5px; color: #1c1c1e; cursor: pointer; }
.wx-close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: #f0f0f3; color: #7a7a80; font-size: 15px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .wx-copy:hover { background: #eaeaee; }
  .wx-close:hover { background: #e6e6ea; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-overlay, .wx-card { transition: none; }
}

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--line); margin-top: clamp(60px, 10vh, 110px); padding: clamp(40px, 6vh, 64px) 0 34px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.footer h5 { font-size: 13px; letter-spacing: 0.22em; font-weight: 600; margin-bottom: 14px; }
.footer p { font-size: 13px; color: var(--ink-dim); line-height: 2; }
.footer .fine { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- 密码弹层 ---------- */
.pw-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(8, 8, 9, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pw-overlay.open { display: flex; animation: fadein 0.3s var(--ease); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.pw-box { width: min(420px, 100%); border: 1px solid var(--line); background: var(--bg-soft); padding: clamp(28px, 5vw, 44px); }
.pw-box.shake { animation: shake 0.4s; }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pw-box .pw-icon { width: 26px; height: 26px; color: var(--ink-faint); margin-bottom: 18px; }
.pw-box h3 { font-size: 17px; font-weight: 400; letter-spacing: 0.14em; margin-bottom: 8px; }
.pw-box .pw-tip { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 24px; }
.pw-box input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  color: var(--ink); font-size: 16px; letter-spacing: 0.28em; padding: 10px 2px; outline: none;
  transition: border-color 0.3s; font-family: var(--font);
}
.pw-box input:focus { border-color: var(--ink); }
.pw-err { min-height: 20px; font-size: 12px; color: #c98a7a; letter-spacing: 0.08em; margin-top: 10px; }
.pw-actions { display: flex; gap: 12px; margin-top: 16px; }
.pw-actions .btn { flex: 1; justify-content: center; padding: 12px 10px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px);
  background: var(--ink); color: #101010; font-size: 13px; letter-spacing: 0.12em;
  padding: 12px 26px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); z-index: 110;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; gap: 44px; }
  .plan-grid { grid-template-columns: 1fr; }
  .spec-panel { position: static; }
  #plan-panel { flex-direction: column; }
  #plan-panel .fp-left { min-height: 0; }
  #plan-panel .panel-gal { flex-direction: row; flex-basis: auto; overflow-x: auto; overflow-y: hidden; max-height: none; }
  #plan-panel .panel-gal .pg-item { width: auto; }
  #plan-panel .panel-gal .pg-item img { height: 64px; width: auto; }
  .fee-grid { grid-template-columns: repeat(2, 1fr); }
  .about-hero { grid-template-columns: 1fr; }
  .about-portrait { max-width: 320px; }
  .studio-head { flex-direction: column; gap: 20px; }
  .studio-badge { width: 76px; }
  .about-lead { margin-left: 0; }
  .cta-row { margin-left: 0; }
  .social-label { margin-left: 0; }
  .social-grid { margin-left: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .meta-grid > div:nth-child(2n) { border-right: 0; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 640px) {
  .menu {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49;
    flex-direction: column; gap: 0;
    background: rgba(11, 11, 12, 0.97); border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); padding: 10px 0;
  }
  .menu.open { transform: none; opacity: 1; pointer-events: auto; }
  .menu a { padding: 16px clamp(20px, 4vw, 48px); font-size: 15px; }
  .menu a::after { display: none; }
  .burger { display: flex; }
  .fee-grid { grid-template-columns: 1fr; }
  .map-card { flex-direction: column; align-items: flex-start; }
  .photo-grid { columns: 2 150px; column-gap: 10px; }
  .photo { margin-bottom: 10px; }
  .reel { aspect-ratio: 16 / 10; }
  .pager { flex-direction: column; }
  .pager a { max-width: 100%; }
  .pager a.next { text-align: left; }
}

/* ---------- 元素暖光光效（hover 边缘晕染，仅桌面精确指针） ---------- */
:root {
  --glow: rgba(255, 196, 120, 0.3);
  --glow-soft: rgba(255, 196, 120, 0.16);
}

.card-cover, .adm-form, .pw-box {
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* 这三个同时是 .reveal 元素：transition 里必须包含入场的 opacity/transform，
   否则会覆盖 .reveal 的过渡导致入场闪烁 */
.spec-panel, .player {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease),
    border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  /* 视频封面：边缘晕染暖光 */
  .card:hover .card-cover,
  .album-card:hover .album-cover {
    border-color: rgba(255, 200, 130, 0.5);
    box-shadow:
      0 0 54px -10px rgba(255, 190, 110, 0.42),
      0 0 120px -28px rgba(255, 180, 90, 0.25),
      inset 0 0 30px -16px rgba(255, 190, 110, 0.14);
  }
  .album-card:hover .album-cover .bg { transform: scale(1.045); }
  /* 标签 / 筛选项 */
  .chip:hover {
    border-color: rgba(255, 200, 130, 0.45);
    box-shadow: 0 0 30px -8px rgba(255, 190, 110, 0.42);
  }
  /* 照片 */
  .photo:hover .frame {
    border-color: rgba(255, 200, 130, 0.45);
    box-shadow: 0 0 46px -12px rgba(255, 190, 110, 0.4);
    filter: brightness(1.15);
  }
  /* 拍摄幕后 */
  .stills .still:hover {
    border-color: rgba(255, 200, 130, 0.45);
    box-shadow: 0 0 46px -12px rgba(255, 190, 110, 0.4);
  }
  /* 详情页播放器 */
  .player:hover {
    border-color: rgba(255, 200, 130, 0.45);
    box-shadow: 0 0 50px -12px rgba(255, 190, 110, 0.4);
  }
  /* 面板 / 弹窗 / 平面图：激活时边缘亮起 */
  .spec-panel:hover, .adm-form:hover, .pw-box:hover, .plan-wrap2:hover {
    border-color: rgba(255, 200, 130, 0.38);
    box-shadow: 0 0 56px -14px rgba(255, 190, 110, 0.38);
  }
  .btn:hover { box-shadow: 0 0 42px -8px rgba(255, 190, 110, 0.42); }
  /* 平面图分区 */
  .plan-wrap2 .plan-zone:hover {
    fill: rgba(242, 241, 236, 0.07);
    stroke: rgba(255, 206, 140, 0.6);
  }
  .plan-wrap2 .plan-zone.on {
    stroke: rgba(255, 206, 140, 0.85);
  }
  .studio-gal .g-item:hover img {
    filter: brightness(1.1);
    border-color: rgba(255, 200, 130, 0.45);
    box-shadow: 0 0 46px -12px rgba(255, 190, 110, 0.4);
  }
}
.iso-stage .iso-zone.on { stroke: rgba(255, 206, 140, 0.85); }
.plan-zone.on { stroke: rgba(255, 206, 140, 0.85) !important; fill: rgba(255, 205, 140, 0.12); }

/* 平面图门洞(墙线断开) */
.p-door { stroke: var(--bg-soft); stroke-width: 4; }

/* ---------- 灯箱影像面板（EXIF · 亮度直方图 · 亮度波形） ---------- */
.lb-scope-toggle {
  position: absolute; bottom: 26px; right: clamp(12px, 4vw, 48px); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(14, 14, 16, 0.42); border: 1px solid rgba(242, 241, 236, 0.26); border-radius: 999px;
  color: var(--ink-dim); font-size: 12px; letter-spacing: 0.22em; padding: 7px 16px 7px 14px;
  backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--font); cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.lb-scope-toggle svg { width: 13px; height: 13px; flex: none; }
.lb-scope-toggle:hover {
  color: var(--ink); border-color: rgba(255, 200, 130, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 26px -8px rgba(255, 190, 110, 0.4);
}
.lb-scope-toggle.on { color: var(--ink); border-color: rgba(255, 206, 140, 0.7); }
#lb-scope {
  position: absolute; bottom: 78px; right: clamp(12px, 4vw, 48px); z-index: 3;
  width: min(416px, calc(100vw - 40px));
  background: rgba(15, 15, 17, 0.55); border: 1px solid rgba(242, 241, 236, 0.16); border-radius: 16px;
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 14px 14px 12px;
  opacity: 0; visibility: hidden; transform: translateX(12px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
}
#lb-scope.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
@media (prefers-reduced-motion: reduce) { #lb-scope { transition: none; } }
#lb-scope .sp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#lb-scope .sp-head span { font-size: 10.5px; letter-spacing: 0.3em; color: var(--ink-faint); }
#lb-scope .sp-close {
  background: none; border: 0; color: var(--ink-faint); font-size: 16px; line-height: 1;
  padding: 2px 4px; cursor: pointer; transition: color 0.2s var(--ease);
}
#lb-scope .sp-close:hover { color: var(--ink); }
#lb-scope .sp-exif { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
#lb-scope .sp-cam { font-size: 13.5px; letter-spacing: 0.04em; color: var(--ink); }
#lb-scope .sp-lens { font-size: 11.5px; letter-spacing: 0.03em; color: var(--ink-dim); margin-top: 2px; }
#lb-scope .sp-params {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.02em; color: #ffd9a0; margin-top: 7px;
}
#lb-scope .sp-date { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 4px; }
#lb-scope .sp-none { font-size: 11.5px; letter-spacing: 0.1em; color: var(--ink-faint); }
#lb-scope .sp-loading { font-size: 11px; letter-spacing: 0.24em; color: var(--ink-faint); padding: 4px 0; }
#lb-scope .sp-scope { margin-bottom: 10px; }
#lb-scope .sp-scope:last-child { margin-bottom: 0; }
#lb-scope .sp-cap { display: block; font-size: 10px; line-height: 1; letter-spacing: 0.26em; color: var(--ink-faint); margin-bottom: 6px; }
#lb-scope .sp-scope[data-scope="hist"] .sp-cap, #lb-scope .sp-scope[data-scope="wave"] .sp-cap { white-space: nowrap; overflow: hidden; }
#lb-scope .sp-cap i { font-style: normal; }
#lb-scope .sp-scope canvas {
  display: block; width: 100%; height: 64px;
  border: 1px solid rgba(242, 241, 236, 0.1); border-radius: 6px; background: rgba(8, 8, 10, 0.45);
}
/* 左列直方图+波形上下叠，右列矢量盘大正方形 */
#lb-scope .sp-scopes {
  display: grid; grid-template-columns: 1fr auto; gap: 0 14px; align-items: end;
}
#lb-scope .sp-scope[data-scope="hist"] { grid-column: 1; grid-row: 1; margin-bottom: 10px; }
#lb-scope .sp-scope[data-scope="wave"] { grid-column: 1; grid-row: 2; }
#lb-scope .sp-scope:last-child {
  grid-column: 2; grid-row: 1 / span 2; align-self: end;
  width: 164px; height: 180px; margin-bottom: 10px;   /* 含 10px 底边距与波形一致，底边对齐 */
  display: flex; flex-direction: column;
}
#lb-scope .sp-scope:last-child .sp-cap i { display: none; }
#lb-scope .sp-scope:last-child .sp-cap { white-space: nowrap; overflow: hidden; }
#lb-scope .sp-scope canvas.sp-vec { width: 164px; height: 164px; flex: none; margin-top: auto; }
/* 点测光读数条（跟随光标） */
.lb-probe {
  position: fixed; z-index: 97; pointer-events: none;
  background: rgba(13, 13, 15, 0.85); border: 1px solid rgba(242, 241, 236, 0.2); border-radius: 8px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 5px 9px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; line-height: 1.7; letter-spacing: 0.02em; color: var(--ink-dim);
}
.lb-probe b { color: #ffd9a0; font-weight: 400; }
#lb-scope .sp-copy {
  margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line);
  text-align: right; font-size: 9.5px; letter-spacing: 0.2em; color: var(--ink-faint);
}
@media (max-width: 720px) {
  /* 手机端：横条三模块（参数 | 直方图 | 波形），减少对画面的遮挡 */
  .lb-scope-toggle { bottom: 18px; right: 16px; }
  #lb-scope {
    left: 12px; right: 12px; bottom: 66px; width: auto;
    padding: 10px 12px 9px;
    /* 整体等比缩小（字体/画布/间距一起），锚定右下角与 EXIF 按钮对齐 */
    transform-origin: 100% 100%;
  }
  #lb-scope { transform: scale(0.75) translateX(10px); }
  #lb-scope.open { transform: scale(0.75); }
  #lb-scope .sp-head { margin-bottom: 6px; }
  #lb-scope .sp-head span { letter-spacing: 0.22em; }
  #lb-scope .sp-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
  #lb-scope .sp-copy { flex: 1 0 100%; margin: 2px 0 0; padding-top: 7px; }
  #lb-scope .sp-exif {
    flex: 0 0 37%; border-bottom: 0; border-right: 1px solid var(--line);
    padding-bottom: 0; padding-right: 10px; margin-bottom: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  #lb-scope .sp-cam { font-size: 12.5px; }
  #lb-scope .sp-lens { font-size: 10.5px; }
  #lb-scope .sp-params { font-size: 10px; margin-top: 5px; }
  #lb-scope .sp-date { font-size: 10px; margin-top: 3px; }
  #lb-scope .sp-none { align-self: center; }
  #lb-scope .sp-loading { align-self: center; }
  #lb-scope .sp-scopes {
    flex: 1 1 0; min-width: 0;
    display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: start;
  }
  #lb-scope .sp-scope { margin-bottom: 0; }
  #lb-scope .sp-cap { margin-bottom: 4px; letter-spacing: 0.1em; white-space: nowrap; }
  #lb-scope .sp-cap i { display: none; }
  #lb-scope .sp-scope canvas { height: 46px; }
  #lb-scope .sp-scope:last-child { width: 96px; height: auto; align-self: center; margin-bottom: 0; }
  #lb-scope .sp-scope canvas.sp-vec { width: 96px; height: 96px; margin-top: 0; }
}

/* 影棚页片尾署名 */
.studio-credit { text-align: center; padding-top: clamp(10px, 1.6vw, 18px); padding-bottom: clamp(36px, 5vw, 56px); }
.studio-credit p { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.14em; color: var(--ink-faint); }
.studio-credit .credit-mini { display: inline-block; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.studio-credit .credit-mini:hover { color: var(--ink); border-color: var(--ink); }


/* ---------- 视频示波器（Stats for nerds + 实时波形，仅自托管视频） ---------- */
.video-scope-card {
  position: absolute; right: 14px; bottom: 56px; z-index: 3; width: 178px;
  background: rgba(13, 13, 15, 0.72); border: 1px solid rgba(242, 241, 236, 0.14); border-radius: 10px;
  backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 7px 9px 8px;
}
.video-scope-card .vsc-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;
}
.video-scope-card .vsc-head span { font-size: 9px; letter-spacing: 0.24em; color: var(--ink-faint); }
.video-scope-card .vsc-x {
  background: none; border: 0; color: var(--ink-faint); font-size: 13px; line-height: 1;
  padding: 0 2px; cursor: pointer; transition: color 0.2s var(--ease);
}
.video-scope-card .vsc-x:hover { color: var(--ink); }
.video-scope-card .vsc-info {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; line-height: 1.75; color: var(--ink-dim);
  margin-bottom: 7px; white-space: nowrap; overflow: hidden;
}
.video-scope-card .vsc-l4 { color: var(--ink-faint); }
.vsc-wavebox canvas {
  display: block; width: 100%; height: 44px;
  border: 1px solid rgba(242, 241, 236, 0.1); border-radius: 5px; background: rgba(8, 8, 10, 0.45);
}
.video-scope-card .vsc-wavebox { cursor: zoom-in; }
.video-scope-dock {
  width: min(var(--vsc-w, 100%), 100%); margin: 12px auto 0;
  background: rgba(13, 13, 15, 0.72); border: 1px solid rgba(242, 241, 236, 0.14); border-radius: 12px;
  backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 9px 12px 11px;
}
.video-scope-dock .vsc-dock-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px;
}
.video-scope-dock .vsc-mode { font-size: 9.5px; letter-spacing: 0.2em; color: var(--ink-faint); }
.video-scope-dock .vsc-shrink {
  background: none; border: 0; color: var(--ink-dim); font-size: 11px; letter-spacing: 0.14em;
  cursor: pointer; padding: 1px 4px; font-family: var(--font); transition: color 0.2s var(--ease);
}
.video-scope-dock .vsc-shrink:hover { color: var(--ink); }
.video-scope-dock .vsc-dock-stats {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--ink-dim); margin-bottom: 7px; letter-spacing: 0.02em;
}
.video-scope-dock canvas { width: 100%; height: 96px; }
.player .vctrl .v-scope { font-size: 11px; letter-spacing: 0.12em; }
.player .vctrl .v-steal { font-size: 11px; letter-spacing: 0.12em; }
.player .vctrl .v-scope.on { color: #ffd9a0; }
@media (max-width: 720px) {
  /* 手机端控制条更高（换行），卡片抬高避免压到 */
  .video-scope-card { right: 12px; bottom: 94px; width: 168px; }
}

/* ---------- 取景器模式（连按 S-P-M 触发的全站彩蛋） ---------- */
.vf-layer {
  position: fixed; inset: 0; z-index: 120; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
}
.vf-layer.on {
  opacity: 1; visibility: visible;
  transition: opacity 0.25s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .vf-layer { transition: none; } }
body.vf-on { cursor: crosshair; }
.vf-line { position: absolute; background: rgba(242, 241, 236, 0.12); }
.vf-line.v { width: 1px; top: 0; bottom: 0; }
.vf-line.h { height: 1px; left: 0; right: 0; }
.vf-corner { position: absolute; width: 30px; height: 30px; border: 0 solid rgba(242, 241, 236, 0.75); }
.vf-corner.tl { top: 16px; left: 16px; border-top-width: 2px; border-left-width: 2px; }
.vf-corner.tr { top: 16px; right: 16px; border-top-width: 2px; border-right-width: 2px; }
.vf-corner.bl { bottom: 16px; left: 16px; border-bottom-width: 2px; border-left-width: 2px; }
.vf-corner.br { bottom: 16px; right: 16px; border-bottom-width: 2px; border-right-width: 2px; }
.vf-focus {
  position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border: 1px solid rgba(242, 241, 236, 0.55);
  transition: border-color 0.15s var(--ease);
}
.vf-focus::before, .vf-focus::after {
  content: ""; position: absolute; background: rgba(242, 241, 236, 0.75);
}
.vf-focus::before { left: 50%; top: -7px; width: 1px; height: 10px; margin-left: -0.5px; box-shadow: 0 68px 0 rgba(242, 241, 236, 0.75); }
.vf-focus::after { top: 50%; left: -7px; height: 1px; width: 10px; margin-top: -0.5px; box-shadow: 68px 0 0 rgba(242, 241, 236, 0.75); }
.vf-focus.lock {
  border-color: rgba(124, 255, 158, 0.9);
}
.vf-focus.lock::before { background: rgba(124, 255, 158, 0.95); box-shadow: 0 68px 0 rgba(124, 255, 158, 0.95); }
.vf-focus.lock::after { background: rgba(124, 255, 158, 0.95); box-shadow: 68px 0 0 rgba(124, 255, 158, 0.95); }
/* ALEXA 35 机内 OSD：白框取景区 + 顶部参数行 + 左侧格式 chips + 旋转俯仰 + 底部行 */
.vf-framebox {
  position: absolute; inset: calc(var(--nav-h) + 26px) 88px 76px 88px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  /* 取景框外轻微灰度（模拟传感器框外区域） */
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.45);
}
.vf-top {
  position: absolute; top: calc(var(--nav-h) + 8px); left: 20px; right: 20px;
  display: flex; justify-content: space-between; gap: 18px;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.68);
}
.vf-top b { color: #fff; font-weight: 600; }
.vf-left {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
.vf-chip { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; padding: 2px 8px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; color: rgba(255, 255, 255, 0.94); }
.vf-label { font-size: 11.5px; color: rgba(255, 255, 255, 0.65); margin: 8px 0 2px; }
.vf-rotate {
  position: absolute; left: 0; right: 0; bottom: 48px;
  display: flex; justify-content: center; gap: 30px;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.68);
}
.vf-rotate b { color: #fff; font-weight: 600; }
.vf-bottom {
  position: absolute; bottom: 14px; left: 20px; right: 20px;
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.68);
}
.vf-bottom b { color: #fff; font-weight: 600; }
.vf-recstate { color: #ff453a; display: inline-flex; align-items: center; gap: 7px; }
.vf-recstate .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; }
.vf-center { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); }
.vf-center::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: rgba(255, 255, 255, 0.85); }
.vf-center::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; margin-top: -0.5px; background: rgba(255, 255, 255, 0.85); }
@media (max-width: 720px) {
  .vf-left, .vf-mode { display: none; }
  .vf-framebox { inset: 40px 14px 58px; }
}

/* ---------- 显影波蒙版：整站灰度负像 → 闪回正像 ---------- */
/* 显影：整站负像停一拍 → 叠化回正像（中间态即负像与正像的叠加） */
.dev-veil {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  backdrop-filter: invert(1) grayscale(1) brightness(0.82) contrast(0.92);
  -webkit-backdrop-filter: invert(1) grayscale(1) brightness(0.82) contrast(0.92);
  transition: backdrop-filter 2.4s var(--ease), -webkit-backdrop-filter 2.4s var(--ease);
}
.dev-veil.positive {
  backdrop-filter: invert(0) grayscale(0) brightness(1) contrast(1);
  -webkit-backdrop-filter: invert(0) grayscale(0) brightness(1) contrast(1);
}