/* IRIS Music 宣传页样式。

   两条硬规则（上一版「整页都糊」就是踩了这两条）：
   1. 不用 backdrop-filter、不用 filter:blur —— 一旦某层被这两个属性栅格化，
      里面的文字就会整体发软。玻璃质感改用「半透明白 + 亮内缘」叠在平滑渐变上，
      观感一致但每个像素都是直接绘制的。
   2. 不给含文字的元素加 transform 缩放/旋转 —— 会走一次二次采样。

   页面里所有界面示意图都是 DOM + SVG 手绘，没有位图截图，
   因此任何分辨率下都锐利。尺寸按应用里的 dp 值近似 1:1 换算成 px。

   配色对应应用的 IrisPalette：
   --a / --b 是主题 primary / secondary 原色（画色块、指示条、进度条），
   --a-ink 是它在白底上的可读版本（画文字），--a-on 是落在主色实底上的前景色，
   都由 script.js 用与 Color.readableOn / readableTextOn 相同的算法算出。 */

:root{
  /* 页面 */
  --bg:#f1eff2;
  --card:#ffffff;
  --ink:#131316;
  --body:#44444d;
  --sub:#6e6e78;
  --line:#e3e1e6;
  --line-2:#eeecf0;
  --shadow:0 1px 2px rgba(20,18,24,.05),0 10px 28px rgba(20,18,24,.07);

  /* 主题色（默认＝黑白，与应用默认 IrisTheme.MONO 一致） */
  --a:#111111;
  --b:#ffffff;
  --a-ink:#111111;
  --b-ink:#6e6e78;
  --a-on:#fafafa;

  /* 圆角：对应 IrisCorners，base 38dp 那一档 */
  --r-card:22px;
  --r-item:12px;
  --r-chip:8px;

  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 15px/1.75 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
/* SVG 默认是 inline，会带一段基线下沉的空隙：
   同一行里 inline 的图标被顶高、grid 居中的图标看着就偏下。统一 blockify。 */
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* 顶部一层平缓渐变，代替原来的大半径模糊光斑 */
body::before{content:'';position:fixed;left:0;right:0;top:0;height:560px;z-index:-1;
  background:linear-gradient(180deg,#e6eef3 0%,#efe9f0 48%,var(--bg) 100%)}

.wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto}

/* ===================== 页面骨架 ===================== */
.nav{position:sticky;top:0;z-index:40;background:rgba(241,239,242,.95);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:800;letter-spacing:.08em}
.brand svg{width:23px;height:23px;flex:none}
.brand b{color:var(--ink)}
.brand span{color:var(--sub)}
.links{display:flex;gap:24px;margin-left:auto;font-size:13px;color:var(--sub)}
.links a:hover{color:var(--ink)}
.ver{font:500 11px var(--mono);padding:5px 9px;border-radius:var(--r-chip);
  background:var(--card);border:1px solid var(--line);color:var(--sub)}

.kicker{font:500 11px/1 var(--mono);letter-spacing:.15em;color:var(--sub);text-transform:uppercase}
h1{font-size:clamp(34px,4.4vw,54px);line-height:1.14;letter-spacing:-.03em;font-weight:800;margin:18px 0 20px}
h2{font-size:clamp(25px,2.8vw,36px);line-height:1.22;letter-spacing:-.025em;font-weight:800;margin:12px 0}
h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
em{font-style:normal;color:var(--a-ink)}
.lead{max-width:500px;color:var(--body)}
.sub{color:var(--sub);font-size:14px;max-width:660px}
.meta{margin-top:20px;font:400 11.5px/1.9 var(--mono);color:var(--sub)}

.btns{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:12px 20px;border-radius:99px;
  font-size:13.5px;font-weight:700;border:1px solid transparent}
.btn.solid{background:var(--a-ink);color:#fff}
.btn.solid:hover{opacity:.88}
.btn.ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--a-ink);color:var(--a-ink)}

.hero{display:grid;grid-template-columns:1fr auto;gap:52px;align-items:center;padding:60px 0 72px}
.band{padding:62px 0;border-top:1px solid var(--line)}

.card{padding:22px;border-radius:var(--r-card);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.card p{font-size:13.5px;line-height:1.8;color:var(--body)}
.card p b{color:var(--a-ink);font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.mt{margin-top:22px}
code{font:500 12.5px var(--mono);padding:1px 5px;border-radius:4px;background:#f2f0f4}

.cta{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  padding:42px 36px;border-radius:var(--r-card);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);margin:60px 0 52px}
.cta h2{margin-bottom:0}
/* 版权/正版提醒：CTA 下方一条低调的话 */
.respect{text-align:center;font-size:13px;line-height:1.8;color:var(--sub);
  max-width:640px;margin:0 auto 40px}
.respect b{color:var(--body);font-weight:600}
footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:24px 0 40px;font:400 11.5px var(--mono);color:var(--sub);border-top:1px solid var(--line)}

.reveal{opacity:0;transition:opacity .55s ease}
.reveal.in{opacity:1}
.d1{transition-delay:.1s}
.d2{transition-delay:.2s}

/* ===================== 手绘界面示意图 ===================== */
/* 机身：深色窄边框 + 内屏圆角。尺寸固定，不缩放。 */
.mock{width:300px;flex:none;padding:7px;border-radius:30px;background:#1a1a1f;
  box-shadow:0 2px 4px rgba(20,18,24,.18),0 18px 40px rgba(20,18,24,.2)}
/* 真实截图机身：内屏直接放图，高度随图自适应 */
.mock.photo{padding:6px}
.mock.photo .shot{display:block;width:100%;height:auto;border-radius:24px}
.screen{position:relative;height:600px;border-radius:24px;overflow:hidden;
  /* 模拟 AuroraBackground：封面被高斯模糊后剩下的柔和色场 */
  background:linear-gradient(160deg,#cfe2ea 0%,#e2dced 42%,#f0d9e2 72%,#e9e6ef 100%);
  font-size:12px;color:#16161a}
.screen.alt{background:linear-gradient(150deg,#d9dff0 0%,#e8dfe9 40%,#f2dfd6 78%,#eae7f0 100%)}
.screen.alt2{background:linear-gradient(165deg,#cfe7dd 0%,#dfe4ee 45%,#eedfe8 100%)}
.screen-in{position:absolute;inset:0;padding:0 12px;display:flex;flex-direction:column}

/* 状态栏 */
.status{display:flex;justify-content:space-between;align-items:center;
  height:22px;padding:0 6px;font:500 9.5px var(--mono);color:#4a4a52;flex:none}
.status em{font-style:normal}
.status i{display:inline-block;width:3px;height:7px;margin-left:2px;border-radius:1px;
  background:#4a4a52;vertical-align:middle}
.status i:nth-of-type(2){height:9px}
.status i:nth-of-type(3){height:11px}

/* 玻璃层：半透明白 + 亮内缘，叠在上面的渐变色场上。不用模糊。 */
.g{background:rgba(255,255,255,.60);border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(60,50,70,.05),0 6px 16px rgba(60,50,70,.08),
             inset 0 1px 0 rgba(255,255,255,.7)}

/* ---- 顶栏 ---- */
.topbar{margin-top:14px;padding:8px 10px 9px;border-radius:var(--r-item);flex:none}
.tb-row{display:flex;align-items:center;justify-content:space-between}
.wordmark{font-size:15px;font-weight:900;letter-spacing:-.01em}
.wordmark b{color:var(--a-ink)}
.wordmark i{font-style:normal;color:var(--b-ink);margin-left:3px}
.tb-chips{display:flex;gap:5px}
.chip{width:25px;height:25px;border-radius:var(--r-chip);display:grid;place-items:center;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9)}
.chip svg{width:13px;height:13px;fill:var(--a-ink);color:var(--a-ink)}
.search{display:flex;align-items:center;gap:7px;margin-top:8px;padding:8px 10px;
  border-radius:var(--r-item);background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.8);font-size:10.5px;color:#6c6c76;line-height:1}
.search svg{width:11px;height:11px;color:#6c6c76;flex:none}
.count{margin-top:7px;text-align:center;font-size:9.5px;font-weight:500;color:#6c6c76}

/* ---- 为你推荐 ---- */
.rec{margin-top:14px;flex:none}
.rec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;padding:0 2px}
.rec-head b{font-size:12.5px;font-weight:900}
.rec-head span{font-size:9.5px;font-weight:500;color:#6c6c76}
.rec-row{display:flex;gap:8px;overflow:hidden}
.rec-card{width:88px;flex:none;padding:7px;border-radius:var(--r-item)}
.rec-card .cover{width:100%;height:74px;border-radius:var(--r-chip)}
.rec-card b{display:block;margin-top:6px;font-size:9.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-card span{display:block;margin-top:2px;font-size:8.5px;color:#6c6c76;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 歌单行 ---- */
.rows{margin-top:14px;display:grid;gap:5px}
.row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-item)}
.row .bar{width:3px;height:0;border-radius:2px;background:var(--a);flex:none}
.row.on{background:rgba(255,255,255,.74);border-color:var(--b)}
.row.on .bar{height:18px}
.row .cover{width:32px;height:32px;border-radius:var(--r-chip);flex:none}
.row .txt{flex:1;min-width:0}
.row .txt b{display:block;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.on .txt b{color:var(--a-ink)}
.row .txt span{display:block;font-size:9px;color:#6c6c76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .end{text-align:right;flex:none}
.row .end span{display:block;font:500 9.5px var(--mono);color:#6c6c76}
/* svg 被全局 blockify 了，这里要靠 margin-left:auto 回到右缘 */
.row .end svg{width:9px;height:9px;margin:2px 0 0 auto;fill:var(--a)}

/* ---- 右缘快速滚动条 ---- */
.fast{position:absolute;right:5px;top:34%;width:4px;height:39%;border-radius:2px;
  background:rgba(30,26,36,.10)}
.fast i{display:block;width:4px;height:48px;border-radius:2px;background:rgba(30,26,36,.34)}
.fast.drag{width:9px;border-radius:5px}
.fast.drag i{width:9px;border-radius:5px;background:var(--a)}
.bubble{position:absolute;right:26px;top:calc(34% + 6px);width:44px;height:44px;
  border-radius:var(--r-item);display:grid;place-items:center;align-content:center;
  text-align:center;background:#fff;border:1.5px solid var(--a)}
.bubble b{display:block;font-size:16px;font-weight:900;line-height:1}
.bubble span{display:block;font:700 8.5px var(--mono);color:var(--a-ink)}

/* 无封面时应用画的是 Color.hsv(hue=路径散列, sat .35, value .92) 占位色块。
   这里按 --h 派生一张抽象封面：高光 + 斜向色带，各行色相不同。

   两个坑：
   - <i> 默认是 inline，宽高与 aspect-ratio 都不生效，封面会塌成 0 高（卡片看着就是"扁的"）。
   - 正方形不用 aspect-ratio，用 height:0 + padding-top:100%，任何内核都是同一个结果。 */
.cover,.art{display:block}
.cover{background:hsl(var(--h,210) 67% 76%)}
.pcard .art{width:100%;height:0;padding-top:100%;border-radius:var(--r-item);
  background:
    radial-gradient(circle at 70% 22%,rgba(255,255,255,.5),transparent 46%),
    linear-gradient(152deg,hsl(var(--h,210) 72% 80%) 0%,
      hsl(calc(var(--h,210) + 44) 60% 63%) 58%,
      hsl(calc(var(--h,210) + 80) 52% 46%) 100%)}
.rec-card .cover{background:
  radial-gradient(circle at 68% 26%,rgba(255,255,255,.42),transparent 50%),
  linear-gradient(150deg,hsl(var(--h,210) 68% 82%),hsl(calc(var(--h,210) + 38) 58% 66%))}
.row .cover{background:
  linear-gradient(150deg,hsl(var(--h,210) 68% 82%),hsl(calc(var(--h,210) + 40) 56% 64%))}

/* ---- 播放卡片 ---- */
.player-wrap{position:relative;flex:1;display:grid;place-items:center;padding:8px 2px 16px}
.deck .player-wrap{padding:6px 2px 16px}
.pcard{width:100%;padding:14px;border-radius:var(--r-card);
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 2px 3px rgba(60,50,70,.06),0 14px 30px rgba(60,50,70,.12),
             inset 0 1px 0 rgba(255,255,255,.8)}
.pinfo{height:42px;display:grid;place-items:center;align-content:center;margin-top:14px;text-align:center}
.pinfo b{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.pinfo span{margin-top:3px;font-size:10px;font-weight:500;color:var(--a-ink)}
.prog{position:relative;height:9px;margin-top:12px;border-radius:5px;background:rgba(30,26,36,.14)}
.prog i{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:5px;background:var(--a)}
.ptime{display:flex;justify-content:space-between;margin-top:5px;font:500 9.5px var(--mono);color:#5c5c66}
.pmain{display:flex;align-items:center;justify-content:space-evenly;margin-top:12px}
.pbtn{display:grid;place-items:center}
.pbtn svg{width:22px;height:22px;fill:#16161a}
.pbtn.mid svg{width:26px;height:26px;fill:var(--a-ink)}
.pbtn.prev svg{transform:scaleX(-1)}
.psub{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.psub-l{display:flex;align-items:center;gap:9px}
/* 五枚副控制统一成同尺寸的居中盒子。
   之前普通 span 是 inline（图标坐在基线上，视觉偏高），而 .rep / .ring 是 grid 居中，
   两套对齐方式混在同一行里，看上去就是第 2、第 4 枚"掉下去了"。 */
.psub-l>span{position:relative;width:20px;height:20px;display:grid;place-items:center}
.psub svg{width:15px;height:15px;fill:rgba(22,22,26,.32)}
.psub .on svg{fill:var(--a-ink)}
.psub .rep .dot{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--a-ink)}
.badge{font:800 9px var(--mono);letter-spacing:.06em;padding:3px 6px;border-radius:6px;
  background:rgba(22,22,26,.10);color:var(--a-ink)}
.badge.on{background:var(--a);color:var(--a-on)}

/* 频谱：可视化开启时顶掉标题/艺术家那一格（应用里是同一个 52dp 容器交叉淡变） */
.spectrum{height:42px;display:flex;align-items:center;justify-content:center;gap:2px;margin-top:14px}
.spectrum i{width:2.5px;border-radius:2px;background:var(--a)}

/* 睡眠定时器：激活时按钮变成进度环 + 剩余分钟。
   盒子尺寸与居中已由 .psub-l>span 统一，这里只管环和数字。 */
.ring svg{width:20px;height:20px;fill:none;stroke:var(--a-ink)}
.ring b{position:absolute;font:800 8px var(--mono);color:var(--a-ink)}

/* 卡片模式（横向 / 堆叠）示意 */
.deck-top{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:0 4px;flex:none}
/* 排布卡顶栏：显式钉死 grid 居中，特异性高于移动端媒体查询里对 .chip 的重定义，
   否则窄屏下 .chip 被改回 block，图标会贴顶偏移。 */
.deck-top .chip{display:grid;place-items:center}
.deck-top b{display:block;font-size:12px;font-weight:900;color:var(--a-ink);line-height:1.3}
.deck-top span{display:block;font-size:9px;color:#6c6c76}
.peek{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:60%;
  border-radius:var(--r-card);background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.7)}
.peek.l{left:-14px}
.peek.r{right:-14px}
/* 堆叠：后面两张是完整卡片，只被前一张压住下半部分。
   对应 STACK_STEP_Y 16dp / STACK_SCALE_STEP 0.02——每往后一档上移并两侧内缩，
   所以要用 top/bottom 同时给值撑成整张卡的形状，不能只画一条上边缘的小横条。 */
.stack{position:relative;width:100%}
.stack-back{position:absolute;border-radius:var(--r-card);
  background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.74);
  box-shadow:0 8px 18px rgba(60,50,70,.08)}
.stack-back.b1{left:9px;right:9px;top:-15px;bottom:15px}
.stack-back.b2{left:18px;right:18px;top:-30px;bottom:30px}


/* ===================== 「为什么是它」三张卡 ===================== */
/* 三张封面色卡：示意背景氛围跟着封面走 */
.moods{display:flex;gap:8px;margin:14px 0 16px}
.moods i{flex:1;height:64px;border-radius:var(--r-item);border:1px solid var(--line-2)}
.moods .m1{background:linear-gradient(150deg,#bcd9e6,#d9cfe6 55%,#efd4dd)}
.moods .m2{background:linear-gradient(150deg,#c9d2ee,#e4d4e2 45%,#f3d6c6)}
.moods .m3{background:linear-gradient(150deg,#bfe3d4,#d5dcea 50%,#ebd6e4)}

/* 权限清单：直接把 AndroidManifest 里那几行摆出来 */
.perms{display:flex;flex-wrap:wrap;gap:5px;margin:14px 0 16px}
.perms span{font:500 10px var(--mono);letter-spacing:.02em;padding:4px 7px;
  border-radius:6px;background:#f4f3f6;border:1px solid var(--line);color:var(--sub)}
.perms .opt{background:#fff4f0;border-color:#f5d5c8;color:#c25a34;position:relative}
.perms .opt::after{content:"可选";font-size:8px;margin-left:5px;opacity:.7}
/* 缘起引言：#why 三卡上方的一段叙述 */
.why-lead{max-width:760px;font-size:14.5px;line-height:1.85;color:var(--body);margin:16px 0 4px}
.why-lead em{font-style:normal;color:var(--ink);font-weight:600}

/* 排布小图：三档同时点亮，不再做交互切换 */
.demo{display:flex;justify-content:center;align-items:center;gap:26px;padding:38px 20px;
  border-radius:var(--r-card);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.demo.mini{gap:14px;padding:16px 4px 18px;background:transparent;border:0;box-shadow:none}
.lay{width:88px;height:auto;color:var(--sub);opacity:.32}
.demo.mini .lay{width:60px}
.lay.on{color:var(--a-ink);opacity:1}

/* ===================== 均衡器曲线 ===================== */
.eq{width:100%;height:auto;border-radius:var(--r-item);background:#fbfafc;border:1px solid var(--line)}
.eq .grid{stroke:var(--line);stroke-width:1}
.eq .zero{stroke:#c9c7ce;stroke-width:1;stroke-dasharray:3 3}
.eq .fill{fill:var(--a);opacity:.14}
.eq .curve{fill:none;stroke:var(--a-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.eq .anchor{fill:#fff;stroke:var(--a-ink);stroke-width:2}
.eq text{font:9px var(--mono);fill:var(--sub)}
.presets{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.presets span{padding:6px 11px;border-radius:var(--r-chip);font-size:11.5px;
  background:#f4f3f6;border:1px solid var(--line);color:var(--sub)}
.presets span.on{background:var(--a);color:var(--a-on);border-color:var(--a)}

/* ===================== 听歌报告 ===================== */
.big{display:flex;align-items:baseline;gap:6px;margin:4px 0 14px}
.big b{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--a-ink);line-height:1}
.big span{font-size:12px;color:var(--sub)}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,10px);
  gap:3px;margin:6px 0 8px;overflow:hidden}
.heat i{width:10px;height:10px;border-radius:2px;background:var(--a)}
.heat i.l0{background:rgba(30,26,36,.07)}
.heat i.l1{opacity:.28}
.heat i.l2{opacity:.48}
.heat i.l3{opacity:.72}
.heat i.l4{opacity:1}
.legend{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--sub)}
.legend i{width:9px;height:9px;border-radius:2px;background:var(--a)}
.ranks{display:grid;gap:8px;margin-top:14px}
.rank{display:flex;align-items:center;gap:9px;font-size:12px}
.rank em{width:16px;font:700 10px var(--mono);color:var(--sub);font-style:normal}
.rank .rt{width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .rb{flex:1;height:7px;border-radius:4px;background:#f0eef2;overflow:hidden}
.rank .rb i{display:block;height:100%;border-radius:4px;background:var(--a)}
.rank .rv{font:500 10px var(--mono);color:var(--sub)}

/* ===================== 个性化 ===================== */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.sw{padding:10px 6px;border-radius:var(--r-chip);cursor:pointer;background:#f5f4f7;
  border:1px solid var(--line);font:700 11.5px inherit;color:var(--sub)}
.sw .dots{display:flex;justify-content:center;gap:3px;margin-bottom:6px}
.sw i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.16)}
.sw.on{color:var(--ink);border-color:var(--a-ink);background:var(--card)}


.hero-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-shots .mock{width:100%}
/* 界面板块两张示意图：强制两列，永远并排。
   用 zoom 缩放整台机身（会重新布局绘制，文字仍矢量锐利，不二次采样发糊），
   桌面缩到 .82，手机进一步缩小以保证两张仍并排、不换行成一排一个。 */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;justify-items:center;
  margin-top:26px;align-items:start}
.gallery figure{margin:0;display:flex;flex-direction:column;align-items:center}
.gallery .mock{zoom:.82}
.gallery figcaption{margin-top:12px;font-size:12.5px;line-height:1.75;color:var(--sub);
  max-width:min(246px,100%);text-align:center}
.gallery figcaption b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px}

/* ---- 海报墙示意（紧凑排布） ---- */
.posterwall{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:54px;gap:6px;
  align-content:center;padding:6px 0 10px}
.pw{border-radius:var(--r-item);overflow:hidden}
.pw{grid-row:span 2;background:hsl(var(--h,210) 62% 74%)}
.pw[style*="--p:1 1"]{grid-row:span 2;grid-column:span 2;
  background:radial-gradient(circle at 70% 22%,rgba(255,255,255,.5),transparent 46%),
    linear-gradient(152deg,hsl(var(--h,210) 72% 80%) 0%,hsl(calc(var(--h,210) + 44) 60% 63%) 58%,
      hsl(calc(var(--h,210) + 80) 52% 46%) 100%)}

@media(max-width:1080px){
  .hero{grid-template-columns:1fr;gap:38px;padding:44px 0 56px}
  .hero-shots{justify-content:center;flex-wrap:wrap}
  .two{grid-template-columns:1fr}
}
@media(max-width:720px){
  .wrap{width:calc(100% - 26px)}
  .links{display:none}
  .two,.three{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .band{padding:48px 0}
  .cta{flex-direction:column;align-items:flex-start;padding:28px 22px}
  .demo{gap:14px;padding:28px 12px}
  .lay{width:72px}
  /* 手机窄屏：两台机身仍并排，机身进一步缩小避免溢出换行 */
  .gallery{gap:10px}
  .gallery .mock{zoom:.52}
  .gallery figcaption{font-size:11.5px}
}
@media(max-width:380px){
  .gallery .mock{zoom:.44}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1}
}