/* ═══════════════════════════════════════════════════════════════════
   迭代 18 · 产品截图区改成「一台大图 + 四台可选」
   ───────────────────────────────────────────────────────────────────
   量出来的问题：这一段的标题说「不是效果图，是四台真的在跑的东西」，
   下面却是 2×2 等宽网格，每张截图只有约 380px 宽 —— 里面的界面全糊
   成一片。逐屏扫描给这两屏的亮点像素只有 0.50%，也就是读者拿到的是
   一堆字，没有能看的东西。一句很硬的主张，靠四张看不清的图撑着。

   改成：左边一张大图（约 880px，界面看得清），右边四条可选列表。
   切换用原生 radio + :has()，没有 JS，键盘能操作，不支持 :has() 的
   浏览器就停在第一张——不会白屏。

   顺带修的另一件事在 HTML 里：原来四张卡片**全都链到 /demo-center**
   这同一页，跟之前 15 个行业那个 bug 是同一类。四个 demo 页都实测
   跑通过，现在各指各的。
   ═══════════════════════════════════════════════════════════════════ */

html body .qshots__wrap{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:clamp(24px,3vw,52px);
  align-items:start}

/* ── 舞台：四张叠着，只显示选中的那张 ─────────────────────────────── */
html body .qshots__stage{
  position:relative;
  border:1px solid var(--xh-hair);
  background:var(--xh-bg3);
  overflow:hidden;
  aspect-ratio:1400 / 933}
/* 图注不属于画框，让它待在画框外面 */
html body .qshots__side{display:block}
html body .qshots__f{
  position:absolute;inset:0;margin:0!important;
  opacity:0;visibility:hidden;
  transform:scale(1.012);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1),
             visibility 0s linear .5s}
html body .qshots__f img{
  display:block;width:100%;height:100%;object-fit:cover}
/* 冷色截图贴在暖黑底上会打架，压一层极薄的暖罩把它拉回同一个色温 */
html body .qshots__f::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(58,44,22,.10) 0%, rgba(20,16,9,.04) 40%,
    rgba(10,9,6,.28) 100%)}
/* 图注原来是压在图上的，正好盖住截图自己最底下那行字。挪到图下面。 */
html body .qshots__cap{
  display:block;margin-top:12px;
  font-size:12px;letter-spacing:.06em;color:var(--xh-fg3)}

html body .qshots__wrap:has(#qshot1:checked) .qshots__f[data-i="1"],
html body .qshots__wrap:has(#qshot2:checked) .qshots__f[data-i="2"],
html body .qshots__wrap:has(#qshot3:checked) .qshots__f[data-i="3"],
html body .qshots__wrap:has(#qshot4:checked) .qshots__f[data-i="4"]{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1)}
/* 兜底：浏览器不认 :has() 时，第一张永远是可见的，不会四张全空 */
@supports not selector(:has(*)){
  html body .qshots__f[data-i="1"]{opacity:1;visibility:visible;transform:none}
}

/* ── 列表：四条可选 ───────────────────────────────────────────────── */
html body .qshots__list{
  display:flex;flex-direction:column;
  border-top:1px solid var(--xh-hair)}
html body .qshots__row{
  position:relative;
  border-bottom:1px solid var(--xh-hair);
  padding:clamp(16px,1.8vw,24px) 0 clamp(14px,1.6vw,20px)}
/* radio 本体收起来但仍可聚焦，键盘上下键就能换台 */
html body .qshots__r{
  position:absolute;width:1px;height:1px;
  margin:0;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
html body .qshots__lb{
  display:block;cursor:pointer;
  padding-inline-start:clamp(14px,1.6vw,20px);
  border-inline-start:2px solid transparent;
  transition:border-color .34s cubic-bezier(.16,1,.3,1)}
html body .qshots__n{
  display:block;margin-bottom:8px;
  font-family:var(--xh-mono,'JetBrains Mono','SF Mono',Menlo,monospace);
  font-size:10.5px;letter-spacing:.2em;
  color:var(--xh-fg3);
  transition:color .34s}
html body .qshots__t{
  display:block;margin-bottom:7px;
  font-family:var(--xh-serif);font-weight:400;
  font-size:clamp(17px,1.5vw,21px);line-height:1.4;
  color:var(--xh-fg1);
  transition:color .34s}
html body .qshots__d{
  display:block;
  font-size:13.5px;line-height:1.78;
  color:var(--xh-fg2);
  word-break:auto-phrase}
html body .qshots__go{
  display:inline-block;margin-top:10px;
  padding-inline-start:clamp(14px,1.6vw,20px);
  font-size:13px;color:var(--xh-fg3);text-decoration:none;
  opacity:0;transform:translateY(-4px);
  height:0;overflow:hidden;
  transition:opacity .34s ease,transform .34s cubic-bezier(.16,1,.3,1),
             color .24s}
html body .qshots__go:hover{color:var(--xh-gold-hi)}

/* 选中态：金色左边线 + 标题提亮 + 露出「打开这个 Demo」 */
html body .qshots__row:has(.qshots__r:checked) .qshots__lb{
  border-inline-start-color:var(--xh-gold)}
html body .qshots__row:has(.qshots__r:checked) .qshots__n{
  color:var(--xh-gold)}
html body .qshots__row:has(.qshots__r:checked) .qshots__t{
  color:var(--xh-fg0)}
html body .qshots__row:has(.qshots__r:checked) .qshots__go{
  opacity:1;transform:none;height:auto;color:var(--xh-gold)}
/* 没选中的鼠标划过也给点回应，让人知道能点 */
html body .qshots__row:not(:has(.qshots__r:checked)) .qshots__lb:hover{
  border-inline-start-color:var(--xh-hair)}
html body .qshots__row:not(:has(.qshots__r:checked)) .qshots__lb:hover .qshots__t{
  color:var(--xh-fg0)}
/* 键盘聚焦要看得见 */
html body .qshots__r:focus-visible + .qshots__lb{
  outline:1px solid var(--xh-gold);outline-offset:4px;border-radius:2px}

html body .qshots__all{
  align-self:flex-start;margin-top:clamp(16px,2vw,24px);
  font-size:13.5px;color:var(--xh-gold);text-decoration:none;
  position:relative;padding-bottom:3px}
html body .qshots__all::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--xh-gold);
  transition:right .42s cubic-bezier(.16,1,.3,1)}
html body .qshots__all:hover::after{right:0}

/* ── 窄屏：舞台在上，列表在下 ─────────────────────────────────────── */
@media (max-width:1000px){
  html body .qshots__wrap{grid-template-columns:1fr!important;
    gap:clamp(20px,4vw,30px)}
}
@media (max-width:560px){
  html body .qshots__t{font-size:17px}
  html body .qshots__d{font-size:13px}
}


/* 舞台比列表矮，底下会空出一块。把「四台并排看」放到那块空里，
   空白就成了呼吸，不是洞。 */
html body .qshots__all{
  align-self:flex-start;margin-top:clamp(16px,2vw,24px)}
@media (min-width:1001px){
  html body .qshots__wrap{align-items:stretch}
  html body .qshots__side{
    display:flex;flex-direction:column}
}


/* 链接现在在图这一列的下面，给它一点上边距，别贴着图注 */
html body .qshots__side .qshots__all{
  display:inline-block;margin-top:clamp(14px,1.8vw,22px)}