/* ===========================================================
   项目照片 · 影像集
   风格：大气 + 液态玻璃（Liquid Glass）
   - 背景是柔和光斑，玻璃面板在上面做模糊折射
   - 照片自动从左向右循环滚动

   想换主色：改 --ink 与三个光斑颜色 --blob-1/2/3
   =========================================================== */

:root{
  --bg:         #eef2f9;
  --bg-2:       #f7f5f2;
  --ink:        #10121a;          /* 主色 / 深色文字 */
  --text:       #1b1e28;
  --text-mid:   #565d6d;
  --text-dim:   #8b93a5;
  --line:       rgba(255,255,255,.72);
  --line-soft:  rgba(24,30,48,.08);

  /* 光斑颜色（液态玻璃的色彩来源） */
  --blob-1:     rgba(126,172,255,.42);
  --blob-2:     rgba(186,160,255,.30);
  --blob-3:     rgba(255,196,158,.32);

  --glass-bg:   rgba(255,255,255,.55);
  --glass-bg-2: rgba(255,255,255,.38);
  --glass-blur: 26px;
  --glass-shadow: 0 18px 50px rgba(23,32,60,.13), 0 2px 10px rgba(23,32,60,.06);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);

  --radius:     26px;
  --radius-md:  18px;
  --radius-sm:  13px;
  --wrap:       1240px;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC",
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100%;
  color:var(--text);
  font-family:var(--font);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 700px at 12% -8%,  rgba(232,240,255,.85) 0%, transparent 60%),
    radial-gradient(1000px 600px at 88% 4%,   rgba(243,237,255,.8) 0%, transparent 55%),
    linear-gradient(170deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment:fixed;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
figure, figcaption{ margin:0; }
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:rgba(255,255,255,.6);
  border:1px solid var(--line-soft);
  padding:.08em .4em; border-radius:5px; font-size:.9em;
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px; }

/* ---------- 背景光斑 ---------- */
.bg-decor{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{
  position:absolute; display:block;
  border-radius:50%;
  filter:blur(70px);
  will-change:transform;
}
.blob.b1{
  width:46vw; height:46vw; min-width:420px; min-height:420px;
  left:-8vw; top:-10vw; background:var(--blob-1);
  animation:float1 26s ease-in-out infinite;
}
.blob.b2{
  width:38vw; height:38vw; min-width:340px; min-height:340px;
  right:-6vw; top:6vh; background:var(--blob-2);
  animation:float2 32s ease-in-out infinite;
}
.blob.b3{
  width:42vw; height:42vw; min-width:360px; min-height:360px;
  left:32vw; bottom:-18vw; background:var(--blob-3);
  animation:float3 38s ease-in-out infinite;
}
@keyframes float1{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(6vw,4vh,0)} }
@keyframes float2{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-5vw,6vh,0)} }
@keyframes float3{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(4vw,-5vh,0)} }

/* 内容层要在光斑之上 */
.site-header, main, .site-footer{ position:relative; z-index:1; }

/* ---------- 液态玻璃基础 ---------- */
.glass{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  border:1px solid var(--line);
  box-shadow:var(--glass-shadow), var(--glass-inset);
  border-radius:var(--radius);
}
/* 玻璃表面的高光：上亮下暗的一层，模拟液体折射 */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 62%),
    radial-gradient(120% 80% at 12% -20%, rgba(255,255,255,.75), transparent 55%);
  opacity:.75;
}
.glass-pill{
  position:relative;
  background:var(--glass-bg-2);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(23,32,60,.10), var(--glass-inset);
  border-radius:999px;
}

/* ---------- 顶栏 ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  border-radius:0;
  border-left:none; border-right:none; border-top:none;
  box-shadow:0 6px 30px rgba(23,32,60,.06), inset 0 -1px 0 rgba(255,255,255,.6);
}
.site-header::after{ border-radius:0; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:16px; }
.brand{ display:flex; flex-direction:column; line-height:1.25; }
.brand-mark{ font-size:16px; font-weight:600; letter-spacing:.16em; }
.brand-sub{ font-size:10.5px; color:var(--text-dim); letter-spacing:.26em; }
.site-nav{ display:flex; gap:30px; font-size:14px; color:var(--text-mid); }
.site-nav a{ position:relative; padding:4px 0; transition:color .2s; }
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ink); transition:right .25s ease;
}
.site-nav a:hover{ color:var(--text); }
.site-nav a:hover::after{ right:0; }

/* ---------- 首屏 ---------- */
.hero{ padding:62px 0 48px; }
.hero-inner{ display:flex; flex-direction:column; align-items:flex-start; }
.hero-eyebrow{
  margin:0 0 22px; font-size:11px; letter-spacing:.46em;
  color:var(--text-dim); text-transform:uppercase;
}
.hero-title{
  margin:0 0 20px;
  /* 同时参考视口高度，矮屏幕（笔记本）上标题不会把照片挤下去 */
  font-size:clamp(30px, min(4.8vw, 6.2vh), 58px);
  line-height:1.12;
  font-weight:600;
  letter-spacing:.02em;
}
.hero-title em{
  font-style:normal;
  background:linear-gradient(96deg,#2b3550 0%, #4a5b86 45%, #7a6ea8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-text{ max-width:600px; margin:0 0 24px; color:var(--text-mid); font-size:14.5px; }
.hero-meta{
  display:inline-flex; align-items:center; gap:14px;
  padding:11px 22px;
  font-size:13.5px; color:var(--text-mid);
  font-variant-numeric:tabular-nums;
}
.hero-meta b{ color:var(--text); font-weight:600; font-size:14.5px; }
.hero-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--text-dim); opacity:.5; }

/* ---------- 自动滚动照片墙 ---------- */
.marquee{
  position:relative;
  overflow:hidden;
  margin-top:32px;
  padding:6px 0;
  /* 照片墙高度固定：每张照片高度一致，宽度由它自己的比例决定 → 不裁剪、不拉伸 */
  height:clamp(300px, min(46vh, 34vw), 560px);
  cursor:grab;
  outline:none;
  /* 两端轻微渐隐，照片像从玻璃边缘流进流出 */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  touch-action:pan-y;
}
/* 照片少到一屏就能看完时，不需要渐隐，也不滚动 */
.marquee.is-static{
  -webkit-mask-image:none;
  mask-image:none;
  cursor:default;
}
.marquee.is-static .card{ cursor:zoom-in; }
.marquee.is-dragging{ cursor:grabbing; }
.marquee.is-dragging .card{ pointer-events:none; }
.marquee:focus-visible{ outline:none; }
.marquee-track{
  display:flex;
  height:100%;
  gap:26px;
  width:max-content;
  /* 左右留白与页面正文对齐（用 100% 而不是 100vw，不受滚动条宽度影响） */
  padding:0 max(32px, calc((100% - var(--wrap)) / 2 + 32px));
  will-change:transform;
}
.marquee .card{ width:max-content; }
.rail-loading{ color:var(--text-dim); font-size:14px; padding:60px 36px; }

/* 手动控制条 */
.hero-controls{ display:flex; justify-content:center; margin-top:10px; }
.controls{
  display:inline-flex; align-items:center; gap:18px;
  padding:9px 12px 9px 14px;
}
.rail-hint{ font-size:12.5px; color:var(--text-mid); letter-spacing:.02em; }
.rail-btn{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 6px 18px rgba(23,32,60,.10), inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--text-mid);
  font-size:17px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:transform .2s, color .2s, border-color .2s, box-shadow .2s;
}
.rail-btn:hover{ color:var(--ink); transform:translateY(-1px); box-shadow:0 10px 22px rgba(23,32,60,.16), inset 0 1px 0 rgba(255,255,255,.95); }
.rail-btn:active{ transform:translateY(0); }

/* ---------- 照片卡片 ---------- */
.card{
  /* --ratio 会被脚本替换成这张照片的真实比例（例如 1600 / 900） */
  --ratio: 3 / 4;
  display:flex; flex-direction:column;
  /* 关键：不要把画框横向拉伸，否则 aspect-ratio 算出来的宽度会被覆盖 */
  align-items:flex-start;
  height:100%; width:max-content; min-width:0;
  cursor:zoom-in;
}
.card-frame{
  position:relative; overflow:hidden;
  flex:0 0 auto;
  height:calc(100% - 33px);      /* 33px = 下方日期说明那一行 */
  width:auto;
  aspect-ratio:var(--ratio);
  max-width:86vw;                /* 极端全景图也不会宽到离谱 */
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.35);
  border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(23,32,60,.14), inset 0 1px 0 rgba(255,255,255,.8);
  transition:box-shadow .35s, transform .35s;
}
.card-frame img{
  /* contain：任何时候都不裁剪照片内容（比例算好后正好铺满） */
  width:100%; height:100%; object-fit:contain;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-frame{
  transform:translateY(-4px);
  box-shadow:0 26px 60px rgba(23,32,60,.20), inset 0 1px 0 rgba(255,255,255,.9);
}
.card:hover .card-frame img{ transform:scale(1.03); }
.card:focus-visible{ outline:none; }
.card:focus-visible .card-frame{ outline:2px solid var(--ink); outline-offset:3px; }

.card-cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  align-self:stretch;            /* 说明文字与照片同宽 */
  margin-top:13px; padding:0 2px;
  height:20px; overflow:hidden;
  font-size:12px; color:var(--text-mid);
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.card-cap .cap-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-cap .cap-index{ flex:0 0 auto; color:var(--text-dim); }

/* ---------- 区块 ---------- */
.section{ padding:80px 0; }
.section-head{ margin-bottom:36px; }
.section-head h2{ margin:0 0 10px; font-size:22px; font-weight:600; letter-spacing:.04em; }
.section-head p{ margin:0; color:var(--text-mid); font-size:14px; }

/* ---------- 图片征收 ---------- */
.collect-card{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr);
  gap:26px;
  align-items:start;
}
.collect-form, .collect-side{ padding:28px; }
.collect-side h3{ margin:0 0 14px; font-size:14px; letter-spacing:.08em; }
.collect-side ul{ margin:0 0 18px; padding-left:18px; color:var(--text-mid); font-size:13.5px; }
.collect-side li{ margin-bottom:9px; }
.collect-side li::marker{ color:var(--text-dim); }
.collect-alt{
  margin:0; font-size:13px; color:var(--text-mid);
  border-top:1px solid var(--line-soft); padding-top:14px;
}
.collect-alt + .collect-alt{ margin-top:10px; border-top:none; padding-top:0; }

.dropzone{
  border:1px dashed rgba(24,30,48,.18);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.34);
  padding:44px 20px;
  text-align:center;
  cursor:pointer;
  outline:none;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.dropzone:hover, .dropzone:focus-visible{
  border-color:rgba(24,30,48,.4);
  background:rgba(255,255,255,.55);
  box-shadow:0 12px 30px rgba(23,32,60,.08);
}
.dropzone.is-drag{ border-color:var(--ink); background:rgba(255,255,255,.7); }
.dz-icon{ width:30px; height:30px; color:var(--text-mid); margin:0 auto 14px; }
.dz-title{ margin:0 0 9px; font-size:14.5px; color:var(--text); }
.dz-hint{ margin:0; font-size:12.5px; color:var(--text-dim); }

.preview-list{
  list-style:none; margin:20px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:10px;
}
.preview-item{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.5);
  box-shadow:0 8px 20px rgba(23,32,60,.10);
}
.preview-item img{ width:100%; height:100%; object-fit:cover; }
.preview-item .p-remove{
  position:absolute; top:5px; right:5px;
  width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.7);
  background:rgba(16,18,26,.55);
  backdrop-filter:blur(6px);
  color:#fff; font-size:11px; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:background .2s;
}
.preview-item .p-remove:hover{ background:rgba(16,18,26,.85); }
.preview-item .p-size{
  position:absolute; left:0; right:0; bottom:0; padding:3px 7px;
  font-size:10.5px; color:#fff; text-align:right;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
}
.preview-item.is-bad{ border-color:#c0392b; }
.preview-item.is-bad::after{
  content:"×"; position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(120,20,20,.42); font-size:24px; color:#fff;
}

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.field{ display:flex; flex-direction:column; gap:8px; font-size:13px; }
.field > span{ color:var(--text-mid); }
.field i{ font-style:normal; color:var(--text-dim); }
.field input{
  width:100%; padding:12px 15px; font-size:14px; font-family:inherit;
  color:var(--text);
  background:rgba(255,255,255,.5);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{ color:var(--text-dim); }
.field input:focus{
  outline:none; background:rgba(255,255,255,.78);
  border-color:rgba(24,30,48,.45);
  box-shadow:0 0 0 4px rgba(120,150,220,.14);
}

.form-actions{ display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap; }
.btn{
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:.05em;
  padding:13px 34px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .2s, opacity .2s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn-primary{
  background:linear-gradient(180deg, #22283a 0%, #10121a 100%);
  color:#fff;
  box-shadow:0 14px 30px rgba(16,18,26,.26), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 20px 40px rgba(16,18,26,.32), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary:disabled{ background:rgba(255,255,255,.5); color:var(--text-dim); box-shadow:none; cursor:not-allowed; border-color:var(--line); }
.btn-ghost{
  background:rgba(255,255,255,.42); border-color:var(--line); color:var(--text-mid);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{ color:var(--text); background:rgba(255,255,255,.7); }

.form-status{ margin:0; font-size:13px; min-height:20px; color:var(--text-mid); }
.form-status.ok{ color:#1c7f4a; }
.form-status.err{ color:#c0392b; }

.progress{ margin-top:18px; height:4px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.55); border:1px solid var(--line); }
.progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,#3d4a6b,#10121a); transition:width .25s ease; }

/* ---------- 放大查看 ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(238,242,249,.55);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  display:flex; align-items:center; justify-content:center;
  padding:70px 84px;
  animation:fade .25s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lb-figure{ display:flex; flex-direction:column; align-items:center; gap:20px; max-width:100%; max-height:100%; }
.lb-figure img{
  max-width:min(100%, 1120px); max-height:calc(100vh - 210px);
  width:auto; height:auto; object-fit:contain;
  border-radius:var(--radius-md);
  box-shadow:0 30px 80px rgba(23,32,60,.28);
  border:1px solid var(--line);
}
.lb-figure figcaption{
  display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center;
  padding:10px 22px;
  font-size:13px; color:var(--text-mid); font-variant-numeric:tabular-nums;
}
.lb-count{ color:var(--text); font-weight:600; }
.lb-download{ border-bottom:1px solid rgba(24,30,48,.25); padding-bottom:2px; transition:border-color .2s, color .2s; }
.lb-download:hover{ color:var(--text); border-color:var(--ink); }
.lb-close, .lb-nav{
  position:absolute; width:48px; height:48px; border-radius:50%;
  color:var(--text-mid); font-size:16px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
  transition:transform .2s, color .2s, box-shadow .2s;
}
.lb-close{ top:26px; right:26px; }
.lb-nav{ top:50%; transform:translateY(-50%); font-size:26px; }
.lb-prev{ left:26px; }
.lb-next{ right:26px; }
.lb-close:hover, .lb-nav:hover{ color:var(--ink); box-shadow:0 16px 36px rgba(23,32,60,.2), var(--glass-inset); }
.lb-nav:hover{ transform:translateY(-50%) scale(1.05); }

/* ---------- 页脚 ---------- */
.site-footer{ padding:40px 0 56px; color:var(--text-dim); font-size:12.5px; letter-spacing:.06em; }
.site-footer p{ margin:0; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
/* 小小的「神秘点」跳转按钮 */
.mystery-link{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px;
  font-size:11.5px; letter-spacing:.14em; color:var(--text-dim);
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 6px 16px rgba(23,32,60,.09), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  transition:color .22s, box-shadow .3s, transform .3s, border-color .3s;
}
.mystery-link:hover{
  color:var(--text); transform:translateY(-1px);
  border-color:rgba(255,255,255,.95);
  box-shadow:0 10px 24px rgba(23,32,60,.15), inset 0 1px 0 rgba(255,255,255,1);
}
/* 掠过的一道光，精致感来自这里 */
.mystery-link::after{
  content:""; position:absolute; top:0; bottom:0; width:38%;
  left:-45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform:skewX(-18deg);
  transition:left .55s cubic-bezier(.3,.7,.4,1);
  pointer-events:none;
}
.mystery-link:hover::after{ left:120%; }
.mystery-dot{
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #b9aef0, #5b5088 70%);
  box-shadow:0 0 0 2px rgba(122,110,168,.14);
  animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:.85; box-shadow:0 0 0 2px rgba(122,110,168,.14); }
  50%{ transform:scale(1.12); opacity:1; box-shadow:0 0 0 4px rgba(122,110,168,.10); }
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px){
  .wrap{ padding:0 22px; }
  .hero{ padding:54px 0 44px; }
  .marquee{ margin-top:34px; height:min(58vw, 380px); }
  .marquee-track{ gap:18px; }
  .collect-card{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .section{ padding:62px 0; }
  /* 手机端：玻璃模糊和光斑最吃性能，统一降一档 */
  .blob{ filter:blur(38px); }
  .glass{ backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%); }
  .glass-pill{ backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); }
  .lightbox{ backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); }
}
@media (max-width: 560px){
  .wrap{ padding:0 18px; }
  .header-inner{ height:64px; }
  .site-nav{ gap:20px; }
  .hero{ padding:40px 0 36px; }
  .marquee{ height:min(64vw, 300px); }
  .blob.b1{ width:74vw; min-width:300px; filter:blur(28px); }
  .blob.b2{ width:68vw; min-width:260px; filter:blur(26px); }
  .blob.b3{ width:80vw; min-width:300px; filter:blur(26px); opacity:.72; }
  .hero-text{ font-size:13.5px; }
  .hero-meta{ padding:9px 16px; font-size:12.5px; }
  .marquee .card-frame{ max-width:78vw; }
  .marquee-track{ gap:14px; }
  .controls{ padding:8px 10px; gap:12px; }
  .rail-hint{ font-size:11.5px; }
  .collect-form, .collect-side{ padding:20px; }
  .lightbox{ padding:60px 14px; }
  .lb-figure img{ max-height:calc(100vh - 190px); }
  .lb-close{ top:14px; right:14px; width:40px; height:40px; }
  .lb-nav{ width:40px; height:40px; }
  .lb-prev{ left:6px; } .lb-next{ right:6px; }
  .btn{ flex:1 1 auto; }
}

/* 苹果手机 / 支持新语法的浏览器：更真实的液态玻璃（折射感） */
@supports (backdrop-filter: url(#x)){
  .glass{ background:var(--glass-bg-2); }
}

@media (prefers-reduced-motion: reduce){
  .blob{ animation:none; }
  *{ transition-duration:.01ms !important; }
}