/* ⚠️ 2026-07-17 静音改造(站主:「看上去不是那么可信,像山寨」)。
   实地对照 ledger.com/academy 与 academy.binance.com:被信任的金融/教育站,标题全是**实心单色**
   (Ledger 纯黑 / 币安纯黄),版面全是正的,强调色只出现一两次。信任 = 克制。
   本站原来:杏金→品红双色渐变填充巨字 + 全站 skew + 悬浮装饰 —— **双色渐变填充的展示字是
   加密骗局落地页的标志性特征**,是「山寨感」的头号来源。
   🔴 黑板留着(实心黑板是印刷标签式的严肃器物,也是站群首用的记忆点);去掉的是渐变和斜。
      别把黑板一起删 —— 实测那样会掉进「干净但平庸」。 */
/* Kryoto · 设计系统
   平面海报「实心黑板报头」· 砂纸亮底 + 黑色书挡带(2026-07-17 静音:去渐变去斜去装饰)
   ------------------------------------------------------------------ */

/* ---------- 字体(全部自托管,不依赖 Google Fonts CDN) ---------- */
@font-face{
  font-family:"Kryo Display";           /* 站酷高端黑 · 子集 · 仅标题 */
  src:url("../fonts/kryo-display.woff2?v=20260831a") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Kryo Mark";              /* Michroma · wordmark / eyebrow */
  src:url("../fonts/michroma-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:"Kryo Mono";              /* Share Tech Mono · 码 / 参数 / 标注 */
  src:url("../fonts/share-tech-mono-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

:root{
  /* ---------- 配色(台账登记值 · 勿随意改) ---------- */
  --paper:#EFE7D8;        /* 砂纸主底 */
  --paper-2:#E6DCC9;      /* 深砂带(算账带/分隔区) */
  --card:#FDFBF6;         /* 卡面 */
  --ink:#121317;          /* 冷墨 · nav/CTA带/页脚三处黑书挡 */
  --ink-2:#1E2027;        /* 深色区面板 */
  --mg:#F5327D;           /* 品红 · 身份色(注册按钮已交给官方黑,品红退到封面/强调/下划线) */
  --ok-black:#000;        /* OKX 官方色 · 只用在注册按钮,不参与版式(版式用 --ink #121317) */
  --mg-d:#C41F5E;         /* 品红深阶(亮底小字用,保对比度) */
  --am:#FFB03A;           /* 杏金 · 次强调(渐变已废,见文件头静音改造) */
  --am-d:#9A6410;         /* 杏金深阶(亮底小字用) */

  /* 文字明度阶梯(不用纯黑纯白) */
  --t-1:#121317;          /* 主文字 */
  --t-2:#3B372F;          /* 次文字 */
  --t-3:#5F5B51;          /* 弱文字 · 对砂纸 5.51:1(原 #6E6A60 只有 4.39,踩线未过 4.5) */
  --t-4:#635F55;          /* 脚注 · 对砂纸 5.18:1 / 卡面 6.16:1 / 深砂带 4.68:1 —— 三种底全过 AA。
                             🔴 原为 #6E6A60(4.39:1),我当初批注「脚注非正文,可接受」是错的:
                             .disc 承载的是 affiliate 合规披露,披露要显眼是硬要求,
                             最不该省对比度的就是这一处(2026-08-18 无障碍复查修正)。 */
  --line:#D6CCB8;         /* 亮底细线 */
  --line-d:#2B2E36;       /* 深底细线 */

  /* ---------- 字阶(1.25 模块化) ---------- */
  --fs-xs:0.75rem;   /* 12 */
  --fs-sm:0.875rem;  /* 14 */
  --fs-b:1rem;       /* 16 正文 */
  --fs-lg:1.25rem;   /* 20 */
  --fs-xl:1.5625rem; /* 25 */
  --fs-2xl:1.953rem; /* 31 */
  --fs-3xl:2.441rem; /* 39 */
  --fs-4xl:3.05rem;  /* 49 */

  /* ---------- 8pt 间距网格 ---------- */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px;

  /* ---------- 圆角体系(一套,别乱用) ---------- */
  --r-s:4px;      /* 小标签 */
  --r-m:7px;      /* 卡片 */
  --r-pill:32px;  /* 胶囊(码/CTA) */

  /* ---------- 硬投影(平面海报语言 · 非柔和阴影) ---------- */
  --sh-1:2px 3px 0 var(--ink);
  --sh-2:3px 4px 0 rgba(18,19,23,.16);
  --sh-3:5px 6px 0 rgba(18,19,23,.20);

  --maxw:1120px;
  --nav-h:52px;
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--t-1);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:var(--fs-b); line-height:1.8;   /* CJK 行高 1.7-1.8 */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}

/* 噪点颗粒(《高档UI手法库》「哇」手法③ · 高档神器:破数字塑料感,给印刷/纸张触感)。
   ⚠️ 必须静态 —— 动 feTurbulence 的 baseFrequency 是手册点名的 GPU 杀手(性能红线④)。
   🔴 原来写的是 body::after{position:fixed; inset:0} = 铺满全屏,而手册明写
      「**只贴需要的容器,别铺满屏**」。铺满 + 网格 + 辉光三层叠 = 发脏。
      收到 hero 一处:它是唯一需要「纸感」的表面,别处干净反而更贵。 */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--mg-d); text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--mg); outline-offset:2px}

h1,h2,h3,h4{font-family:"Kryo Display","Noto Sans SC",sans-serif; font-weight:900;
  line-height:1.25; letter-spacing:-.01em; text-wrap:balance; margin:0}

/* 中文标点悬挂 + 避头尾 */
p{margin:0; hanging-punctuation:allow-end; line-break:strict}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-3)}
.mono{font-family:"Kryo Mono",ui-monospace,monospace}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ================= 黑 nav 书挡 ================= */
.nav{background:var(--ink); position:sticky; top:0; z-index:50}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-3);
  min-height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:var(--s-2)}
.brand{font-family:"Kryo Mark",sans-serif; font-size:.9rem; color:#fff; letter-spacing:1.5px;
  text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:44px}
.nav-links{display:flex; align-items:center; gap:var(--s-2); list-style:none; margin:0; padding:0; flex-wrap:wrap}
.nav-links a{color:#B9BBC0; text-decoration:none; font-size:.8125rem; display:inline-flex; align-items:center;
  min-height:44px; padding:0 2px}
.nav-links a:hover{color:#fff}
.nav-links a[aria-current="page"]{color:#fff; box-shadow:inset 0 -2px 0 var(--mg)}
/* 黑 nav 上按 OKX 的规则走白胶囊(他们自己的 nav「注册」就是这个) */
.nav-cta{background:#fff; color:var(--ok-black) !important; font-weight:700; padding:0 14px !important;
  border-radius:var(--r-pill); min-height:44px !important}
.nav-cta:hover{background:#E4E4E4}
.nav-toggle{display:none; background:none; border:0; padding:10px; cursor:pointer; min-width:44px; min-height:44px}
.nav-toggle span{display:block; width:19px; height:2px; background:#E9E9E4; margin:4px 0}

/* ================= hero ================= */
/* 背景(2026-07-17 站主:「背景图感觉不好看,你研究一下」→ 实地量了 anthropic.com / ledger.com):
   两家的 body 都是 background-image:none —— **顶级浅色站的背景上什么都不铺**,靠字和色块撑。
   我们原来是 20px 网格铺满整个 hero + 噪点又铺满全屏 = 两层纹理叠加,发灰发脏,像廉价坐标纸。
   🔴 网格不是删掉,是**收回到插画自己那张纸里**(见 make_hero.py 的 sheet 网格):
      图纸该是桌上的一张纸,不是桌子本身。网格一旦当墙纸就不再有意义,只剩噪声。
   🔴 补上《高档UI手法库》第 1 条(🏆 性价比最高·首选·「每个新站首屏至少上这一条」)——
      单点静态径向辉光。之前整个漏了。光位放在图纸那侧,和插画里「左上斜射光」呼应。
   ⚠️ background-size 必须一起解开:留着 20px 20px 会把这道辉光**平铺成波点**(实测踩过)。 */
.hero{position:relative; overflow:hidden; padding:var(--s-5) 0 var(--s-4);
  background-image:radial-gradient(58% 64% at 66% 44%, rgba(255,176,58,.22), transparent 68%);
  background-size:auto; background-repeat:no-repeat}
.hero .wrap{position:relative; z-index:3}

/* ---------- A2 两栏 hero:左字右图(站主 2026-07-17 选定) ----------
   ledger.com/academy 与 academy.binance.com 都是这个结构。为什么非改不可:
   实测居中 hero 里,黑板占 x338~1102、披露占 184~1256,两侧只剩 180px —— 主插画放不下,
   硬塞只能塞到文字背后当低对比度底纹,那不是「精品图」。
   ⚠️ 作用域限定在 .hero-2col:404 页也用 .hero > .wrap,但它没有图,不能被一起改成两栏。 */
.hero-2col .wrap{display:grid; grid-template-columns:1fr .78fr;
  gap:var(--s-4); align-items:center; max-width:1240px}
.hero-2col .hero-col{min-width:0; position:relative; z-index:2}   /* min-width:0 → 轨道能缩到 min-content 以下,长词才不顶宽 */
.hero-2col .slab-wrap{text-align:left; padding-top:0}
.hero-2col .hero-sub{margin-top:var(--s-3)}
.hero-2col .convert{justify-content:flex-start}
.hero-2col .disc{text-align:left}
/* 重叠(《高档UI手法库》破平庸版式②:大标题压在图边缘)。
   黑板报头咬进图纸左沿 = 一块贴在图纸上的标签牌,和「工程图纸」基因同源,不是为错落而错落。
   🔴 -56px 不够:实测 h1 右沿离图还差 22px = 根本没咬上,只是把图推歪了。
      改成负 margin 吃掉整条 gap 再多咬 64px,并让图撑出容器右侧(图纸本来就该跑出画面)。
   ⚠️ 必须 max-width:none —— 基础样式有 img{max-width:100%},不解开的话 width 的 calc 会被顶掉
      (实测:重叠只做出 18px,图宽纹丝不动还是 508)。 */
.hero-art{width:calc(100% + 120px); max-width:none; height:auto;
  margin-left:calc(-1 * var(--s-4) - 64px); position:relative; z-index:1}

/* 首页标题容器。404 仍沿用下方的简洁黑板，首页则使用独立的精密铭牌组件。 */
.slab-wrap{position:relative; text-align:center; padding:var(--s-2) 0}

/* 404 等非首页 hero 的简洁黑板标题。 */
.hero:not(.hero-2col) h1{display:inline-block; background:var(--ink); color:var(--paper);
  padding:.14em .26em; border-radius:2px; box-shadow:9px 10px 0 var(--am);
  font-size:clamp(2.5rem,7.6vw,6rem); line-height:1.02; letter-spacing:-.035em}

/* 首页 C 版「精密铭牌」：切角外壳、双层 hairline、工程编号与一次性色彩标定。 */
.hero-nameplate{position:relative; width:min(610px,100%); padding:22px 25px 24px;
  color:var(--paper); background:var(--ink);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:inset 0 0 0 1px rgba(239,231,216,.15)}
.hero-nameplate::before{content:""; position:absolute; inset:8px; pointer-events:none;
  border:1px solid rgba(239,231,216,.1);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.hero-nameplate::after{content:""; position:absolute; left:25px; right:25px; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--am) 0 34%,var(--mg) 34% 72%,transparent 72%)}
.hero-plate-top,.hero-plate-bottom{position:relative; display:flex; align-items:center;
  justify-content:space-between; gap:14px; font-family:"Kryo Mono",ui-monospace,monospace;
  text-transform:uppercase; white-space:nowrap}
.hero-plate-top{padding-bottom:12px; border-bottom:1px solid rgba(239,231,216,.21);
  color:#D3CBBB; font-size:.625rem; letter-spacing:.14em}
.hero-signal{display:inline-flex; align-items:center; gap:7px; color:var(--mg)}
.hero-signal::before{content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%;
  background:currentColor; box-shadow:0 0 0 4px rgba(245,50,125,.14)}
.hero-nameplate h1{display:block; margin:16px 0 0; padding:0; color:var(--paper); background:none;
  border-radius:0; box-shadow:none; font-size:clamp(3.25rem,5.4vw,5.125rem);
  line-height:1; letter-spacing:-.055em; text-align:left}
.hero-title-accent{color:var(--mg); white-space:nowrap}
.hero-plate-bottom{margin-top:18px; color:#8F8A80; font-size:.5625rem; letter-spacing:.1em}
.hero-sub{font-size:clamp(.875rem,1.15vw,1rem); color:var(--t-2);
  margin:var(--s-2) 0 0; max-width:38em; line-height:1.85}

/* ---------- 三件套胶囊行(铁律 §9) ---------- */
.convert{display:flex; align-items:center; justify-content:center; gap:var(--s-1);
  margin-top:var(--s-3); flex-wrap:wrap}
.code-chip{display:inline-flex; align-items:center; gap:var(--s-1);
  background:var(--card); border:2px solid var(--ink); border-radius:var(--r-pill);
  padding:3px 3px 3px 16px; box-shadow:var(--sh-1)}
.code-chip .code{font-family:"Kryo Mono",monospace; font-size:1.0625rem; color:var(--ink); letter-spacing:1.4px}
.copy-btn{font-family:"Kryo Mono",monospace; font-size:.75rem; color:#fff; background:var(--ink);
  border:0; border-radius:var(--r-pill); padding:0 14px; min-height:44px; min-width:44px; cursor:pointer}
.copy-btn:hover{background:#2C2F38}
/* 注册按钮走 OKX 官方色(站主 2026-07-17 定)。
   实地去 okx.com 取过:官方色只有黑 #000 + 白,2022 改名时定的黑白极简,没有彩色 accent。
   ⚠️ 他们的按钮是白的,因为他们整站是黑底 —— 照抄「白按钮」扣到我们的砂纸底上等于消失。
   照搬的是他们的规则,不是那一个色值:亮底用黑按钮白字,暗底用白按钮黑字(见 .cta-band)。
   --ok-black 独立于 --ink(#121317):--ink 是版式用的冷墨,这个是品牌黑,别合并。 */
.cta-btn{display:inline-flex; align-items:center; min-height:44px; padding:0 22px;
  background:var(--ok-black); color:#fff; font-weight:700; font-size:.9375rem; text-decoration:none;
  border:2px solid var(--ink); border-radius:var(--r-pill); box-shadow:var(--sh-1)}
.cta-btn:hover{background:#2A2D35}
.disc{text-align:center; font-size:.75rem; color:var(--t-4); margin-top:var(--s-1); line-height:1.6}

/* ================= 版块 ================= */
.sec{padding:var(--s-5) 0}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-2); margin-bottom:var(--s-3)}
.sec-h h2{font-size:var(--fs-xl)}
.sec-h .idx{font-family:"Kryo Mono",monospace; font-size:.6875rem; color:var(--t-3)}

/* 错落马赛克(非等宽卡堆) */
/* 🔴 别把 6 个卡塞进一排:1120 容器 3 列装 mos-4 + 两张大卡,缩略图只剩 152px = 邮票。
   拆两行:基石大卡一行、速览四张一行,每张图都涨到 2~3 倍。 */
.mosaic{display:grid; gap:var(--s-3)}
/* 不等宽 1.35:1 —— 等宽并排就是「一行两个等宽卡」那个模子。
   但封面若各自锁 1.9:1,左卡就比右卡高一大截(实测 557 vs 350 = 右下角一个 200px 的洞)。
   改成两张封面定高 300、宽度照样不等:卡片自然等高、洞没了、错落还在。 */
.mos-feat{display:grid; grid-template-columns:1.35fr 1fr; gap:var(--s-2)}
.mos-feat .feat-card img{height:300px; aspect-ratio:auto}
/* 四张等高不等宽(justified 排法):宽度各不相同,所以不是「一行四个等宽卡」 */
.mos-4{display:grid; grid-template-columns:1.2fr .88fr 1.06fr .86fr; gap:var(--s-2)}
.thumb{border:2px solid var(--ink); border-radius:var(--r-s); overflow:hidden;
  background:var(--paper-2); display:block; position:relative}
/* 定高不锁 aspect-ratio:锁了图就只有 78px、格子却被拉到 161px,
   底下那 83px 露的是 --paper-2 卡底 = 一条死掉的米色空带。
   定高居中裁,最窄那张(220×200)只看得到源图 x∈[253,947],
   所以这 4 篇的封面主体都收在中间(见 make_covers.py 的裁切窗注释)。*/
.thumb img{width:100%; height:200px; object-fit:cover; display:block;
  transition:transform .25s ease}
.thumb:hover img{transform:scale(1.03)}
.thumb .cap{position:absolute; left:0; right:0; bottom:0; background:var(--ink);
  color:#EDE7D8; font-size:.6875rem; padding:5px 7px; line-height:1.35}

.feat-card{background:var(--card); border:2px solid var(--ink); border-radius:var(--r-m);
  overflow:hidden; box-shadow:var(--sh-2); display:flex; flex-direction:column;
  text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease}
.feat-card:hover{transform:translate(-2px,-2px); box-shadow:var(--sh-3)}
.feat-card img{width:100%; aspect-ratio:1200/630; object-fit:cover; display:block;
  border-bottom:2px solid var(--ink)}
.feat-card .body{padding:var(--s-3)}
/* .ic 删掉了。它写的是 34×34 的杏金方块,但标签是 <span> —— inline 元素的 width/height 不生效,
   实测渲染成 4×28 的一根竖线(左右各 2px 边框),既是个坏掉的artifact,又白占 28px 把标题顶下去。
   而且它本来就是个空盒子(aria-hidden、无内容),修好也只是个没有意义的空方块,不如删。 */
.feat-card h3{font-size:1.375rem; line-height:1.35}
.feat-card p{font-size:.9375rem; color:var(--t-3); line-height:1.75; margin-top:8px}

/* 三条学习线 —— 刻意不做「一行三个等宽圆角卡 + 图标 + 一句话」(§6 一眼 AI 特征第②条)。
   改成编号横条:宽度不等、无卡片容器、靠编号块和 hairline 分隔,和上面的马赛克一脉相承。

   🔴 2026-07-17 翻成冷墨底(设计复审 P1-1)。实测:hero+三节 = 1953px 连续同一个米色,
   期间零明度变化;唯一那条 .band 是 #E6DCC9 对 #EFE7D8 = 1.08:1,肉眼等于没变。
   黑色是这个站的招牌语言(斜黑板/黑书挡),却只当了封面封底,中段 2000px 没有锚。
   这一节只有 254px 高、正好卡在中段:翻黑后黑色出现节奏 = nav → 这里 → cta-band/foot,
   书挡从「两端」变成「贯穿」;而且它短,不会变成第二个 hero。 */
.trk-sec{background:var(--ink); padding:var(--s-5) 0; margin-top:var(--s-2)}
.trk-sec .sec-h h2{color:var(--paper)}
/* #6E727C 扣在 #121317 上只有 3.86:1,11px 小字要 4.5 —— 翻黑时顺手把亮底的灰搬过来会踩线 */
.trk-sec .sec-h .idx{color:#828791}   /* 5.15:1 */
.tracks{display:grid; grid-template-columns:1.15fr .95fr .9fr; gap:0;
  border-top:2px solid var(--am); border-bottom:2px solid var(--am)}
.track{display:flex; gap:var(--s-2); align-items:flex-start; padding:var(--s-3) var(--s-2);
  text-decoration:none; color:inherit; border-right:1px solid #2E323B;
  transition:background .18s ease}
.track:last-child{border-right:0}
.track:hover{background:var(--ink-2)}
/* 底翻黑后编号块要反相:黑块扣黑底会整个消失 */
.track .gem{font-family:"Kryo Mono",monospace; font-size:.8125rem; line-height:1;
  color:var(--ink); background:var(--am); padding:6px 8px; flex:none;
  display:inline-block}
.track h3{font-size:1.0625rem; color:var(--paper)}
.track p{font-size:.8125rem; color:#9AA0AB; line-height:1.7; margin-top:6px}
.track .go{font-family:"Kryo Mono",monospace; font-size:.6875rem; color:var(--mg); margin-top:8px;
  display:inline-flex; align-items:center; min-height:44px}

/* 算账带 */
.band{background:var(--paper-2); padding:var(--s-4) 0}
.band-nums{display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap}
.bnum{padding-right:var(--s-4); border-right:1.5px solid #C3B79E}
.bnum:last-child{border:0; padding-right:0}
.bnum b{display:block; font-family:"Kryo Display",sans-serif; font-size:clamp(1.5rem,3.4vw,2.6rem);
  font-weight:900; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
/* 渐变字必须压在黑衬底上 —— 直接扣在浅色底上对比度只有 1.34:1(WCAG 大字要 3:1),
   垫一块小黑板既修对比度(10.19:1 / 4.98:1),又复用本站的招牌视觉装置 */
.bnum b em{font-style:normal; display:inline-block; background:var(--ink);
  padding:.12em .3em; border-radius:2px}
.bnum b em i{font-style:normal; display:inline-block; color:var(--am)}
.bnum span{display:block; font-size:.6875rem; color:var(--t-3); margin-top:6px}
.band-note{font-size:.6875rem; color:var(--t-4); margin-top:var(--s-2); line-height:1.6}

/* 两栏 */
.two-col{display:grid; grid-template-columns:1fr 1.1fr; gap:var(--s-4)}
.faq-q{background:var(--card); border:2px solid var(--ink); border-radius:var(--r-m);
  padding:var(--s-2); margin-bottom:var(--s-1); box-shadow:var(--sh-2)}
.faq-q h3{font-size:.875rem}
.faq-q p{font-size:.8125rem; color:var(--t-3); line-height:1.7; margin-top:5px}

/* ================= 黑 CTA 带 ================= */
.cta-band{background:var(--ink); padding:var(--s-5) 0; text-align:center}
.cta-band h2{font-size:clamp(1.5rem,3.2vw,2.5rem); color:#fff; display:inline-block}
.cta-band h2 em{font-style:normal; color:var(--am)}
.cta-band .code-chip{background:var(--ink-2); border-color:#3A3E47; box-shadow:none}
.cta-band .code-chip .code{color:#fff}
.cta-band .copy-btn{background:var(--am); color:var(--ink)}
/* 暗底带:黑按钮扣在 --ink 底上会整个消失 → 反过来白底黑字,和 okx.com 自己的主 CTA 一致 */
.cta-band .cta-btn{background:#fff; color:var(--ok-black); border-color:#fff; box-shadow:none}
.cta-band .cta-btn:hover{background:#E4E4E4}
.cta-band .disc{color:#75787F}

/* ================= 黑页脚宽内链 ================= */
.foot{background:#0C0D10; padding:var(--s-4) 0 var(--s-3); color:#83868C}
.foot-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3)}
/* 页脚栏目标题原为 h4,紧跟正文最后一个 h2 = h2→h4 跳级,读屏标题导航结构不完整
   (Codex S29-REAUD-P2-005)。页脚各栏与正文各节是同级,用 h2 才对;字号样式不变。 */
.foot h2{font-family:"Kryo Mono",monospace; font-size:.6875rem; color:var(--am); letter-spacing:1.2px;
  margin-bottom:var(--s-1); font-weight:400}
.foot ul{list-style:none; margin:0; padding:0}
.foot a{color:#83868C; text-decoration:none; font-size:.8125rem; display:flex; align-items:center; min-height:44px}
/* 页脚底部一行里的句内链接:按 WCAG 2.5.8 内联例外,保持行内不撑高 */
.foot-btm a{display:inline; min-height:0}
.foot a:hover{color:#fff}
.foot-btm{border-top:1px solid var(--line-d); margin-top:var(--s-3); padding-top:var(--s-2);
  font-size:.75rem; line-height:1.8}

/* ================= 文章 ================= */
.entry{max-width:44rem; margin:0 auto; padding:var(--s-5) 0; min-width:0}

/* 🔴 把 hero 那套「斜置黑板」语言带进全部内页 ——
   之前只有 index/404 有黑板,其余 39 页是纯墨色标题,而搜索落地页恰恰是内页。
   纯 CSS 实现(::before 垫一块微旋黑板),不动任何页面的 HTML 结构。 */
.entry > h1{
  position:relative; z-index:1; font-size:var(--fs-3xl); line-height:1.28;
  color:var(--paper); margin:var(--s-3) 0 var(--s-2);
  padding:var(--s-3) var(--s-3) calc(var(--s-3) + 2px);
}
.entry > h1::before{
  content:""; position:absolute; inset:0 -14px; z-index:-1;
  background:var(--ink); border-radius:2px;
  box-shadow:3px 4px 0 rgba(18,19,23,.18);
}
/* 标题牌上的点睛条。原来是 --grad 双色渐变 —— 静音改造把 --grad 整个废了,
   这里是最后一个引用点,漏掉就是 background 失效、条子消失。改实心杏金。 */
.entry > h1::after{
  content:""; position:absolute; left:var(--s-3); bottom:calc(var(--s-2) - 4px);
  width:56px; height:5px; background:var(--am); border-radius:2px;
}
.entry > h1 em{font-style:normal; color:var(--am)}
.crumb + h1{margin-top:var(--s-2)}
.entry h2{font-size:var(--fs-xl); margin:var(--s-5) 0 var(--s-2); padding-left:12px;
  border-left:5px solid var(--mg)}
.entry h3{font-size:var(--fs-lg); margin:var(--s-4) 0 var(--s-1)}
.entry p{margin:var(--s-2) 0; overflow-wrap:break-word}
.entry ul,.entry ol{margin:var(--s-2) 0; padding-left:1.5em}
.entry li{margin:6px 0}
.crumb{font-size:.75rem; color:var(--t-3); padding-top:var(--s-2)}
.crumb a{color:var(--t-3)}
.meta-row{font-size:.75rem; color:var(--t-3); margin-top:var(--s-1)}
.article-cover{margin:var(--s-3) 0}
.article-cover img{border:2px solid var(--ink); border-radius:var(--r-m)}
.toc{background:var(--card); border:2px solid var(--ink); border-radius:var(--r-m);
  padding:var(--s-2); margin:var(--s-3) 0; box-shadow:var(--sh-2)}
.toc h2{font-size:.875rem; margin:0 0 var(--s-1); padding:0; border:0}
.toc ol{margin:0; padding-left:1.2em; font-size:.875rem}
.table-wrap{overflow-x:auto; margin:var(--s-3) 0}
.entry table{border-collapse:collapse; width:100%; font-size:.875rem; background:var(--card)}
.entry th,.entry td{border:1px solid var(--line); padding:10px 12px; text-align:left}
.entry th{background:var(--paper-2); font-weight:700}
blockquote{border-left:5px solid var(--am); background:var(--card); margin:var(--s-3) 0;
  padding:var(--s-2) var(--s-3); font-size:.9375rem}
.callout{border:2px solid var(--ink); border-radius:var(--r-m); background:var(--card);
  padding:var(--s-2) var(--s-3); margin:var(--s-3) 0; box-shadow:var(--sh-2)}
.callout.warn{border-color:var(--mg-d)}

/* 文中转化条 */
.inline-cta{border:2px solid var(--ink); border-radius:var(--r-m); background:var(--card);
  padding:var(--s-2) var(--s-3); margin:var(--s-4) 0; box-shadow:var(--sh-2)}
.inline-cta .convert{margin-top:var(--s-1); justify-content:flex-start}
.inline-cta .disc{text-align:left}

/* ===== 文章解剖档案系统 ===== */
.entry.article-dossier{max-width:74rem}
.article-dossier .dossier-grid{
  display:grid;
  grid-template-columns:96px minmax(0,44rem) minmax(216px,248px);
  column-gap:24px;
  counter-reset:dossier-section;
}
.dossier-grid > *{min-width:0}
.dossier-grid > .dossier-head{grid-column:2; grid-row:1; align-self:start}
.dossier-grid > .dossier-index{grid-column:1; grid-row:1 / span 2; align-self:stretch}
.dossier-grid > .dossier-rail{grid-column:3; grid-row:1 / span 2; align-self:stretch}
.dossier-grid > .dossier-content{grid-column:2; grid-row:2}

.dossier-head{
  position:relative;
  color:var(--paper);
  background:var(--ink);
  margin:var(--s-2) 0 var(--s-3);
  padding:18px 22px 20px;
  border:1px solid var(--ink);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:7px 8px 0 var(--am);
}
.dossier-head::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(239,231,216,.34);
  pointer-events:none;
  clip-path:inherit;
}
.dossier-head::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:0;
  width:72px;
  height:5px;
  background:linear-gradient(90deg,var(--am) 0 72%,var(--mg) 72%);
}
.dossier-kicker,.dossier-disclosure{
  position:relative;
  z-index:1;
  font-family:"Kryo Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.dossier-kicker{margin:0; font-size:.6875rem; color:var(--am)}
.dossier-head h1{
  position:relative;
  z-index:1;
  margin:10px 0 8px;
  padding:0;
  color:var(--paper);
  font-size:clamp(2rem,4vw,var(--fs-3xl));
  line-height:1.16;
}
.dossier-head .meta-row{position:relative; z-index:1; color:rgba(239,231,216,.72)}
.dossier-disclosure{margin:10px 0 0; font-size:.6875rem; color:var(--paper)}

.dossier-index,.dossier-rail{font-size:.75rem; color:var(--t-3)}
.dossier-stick{position:sticky; top:calc(var(--nav-h) + 16px)}
.dossier-index{padding-top:20px; font-family:"Kryo Mono",ui-monospace,monospace}
.dossier-index-label{margin:0 0 10px; color:var(--mg); letter-spacing:.08em}
.dossier-index ol{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.dossier-index li{margin:0; border-bottom:1px solid var(--line)}
.dossier-index a,.dossier-index span{
  display:flex;
  min-height:44px;
  align-items:center;
  gap:7px;
  color:var(--t-2);
  text-decoration:none;
}
.dossier-index a::before,.dossier-index span::before{color:var(--mg); font-variant-numeric:tabular-nums}

.dossier-card,.dossier-preflight{
  background:var(--card);
  border:1px solid var(--ink);
  padding:14px;
  margin:0 0 14px;
  box-shadow:4px 4px 0 var(--paper-2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.dossier-card h2,.dossier-preflight h2,.dossier-rail .toc h2{
  margin:0 0 8px;
  padding:0;
  border:0;
  font-size:.8125rem;
  font-family:"Kryo Mono",ui-monospace,monospace;
  letter-spacing:.05em;
}
.dossier-card p,.dossier-preflight p{margin:6px 0; font-size:.75rem; line-height:1.55}
.dossier-preflight ul{margin:0; padding-left:1.15rem}
.dossier-preflight li{margin:7px 0; line-height:1.5}
.dossier-rail .toc{margin:0 0 14px; padding:14px; border-width:1px; box-shadow:none}
.dossier-rail .toc ol{font-size:.75rem; line-height:1.45}
.dossier-rail .toc a{display:inline-flex; min-height:44px; align-items:center}

.dossier-content > h2{counter-increment:dossier-section}
.dossier-content > h2::before{
  content:counter(dossier-section,decimal-leading-zero) " / ";
  color:var(--mg);
  font-family:"Kryo Mono",ui-monospace,monospace;
  font-size:.75em;
}
.article-dossier .article-cover img,.article-dossier .callout,
.article-dossier .inline-cta,.article-dossier .toc{border-radius:0}
.article-dossier .callout,.article-dossier .inline-cta{box-shadow:5px 5px 0 var(--paper-2)}
.article-dossier .table-wrap{max-width:100%; overscroll-behavior-inline:contain}

.safety-cta{
  border:2px solid var(--mg-d);
  background:var(--card);
  margin:var(--s-3) 0;
  padding:var(--s-2) var(--s-3);
  box-shadow:5px 5px 0 rgba(245,50,125,.16);
}
.safety-cta p{margin:0 0 var(--s-1)}
.safety-cta a{display:inline-flex; min-height:44px; align-items:center; font-weight:900}

/* ================= 工具页 ================= */
.tool-panel{background:var(--card); border:2px solid var(--ink); border-radius:var(--r-m);
  padding:var(--s-3); box-shadow:var(--sh-3); margin:var(--s-3) 0}
.field{margin-bottom:var(--s-2)}
.field label{display:block; font-size:.8125rem; color:var(--t-2); margin-bottom:6px; font-weight:700}
.field input,.field select{width:100%; min-height:44px; padding:0 12px; font-size:1rem;
  border:2px solid var(--ink); border-radius:var(--r-s); background:#fff; color:var(--t-1);
  font-family:inherit}
.tool-out{background:var(--paper-2); border-radius:var(--r-s); padding:var(--s-2); margin-top:var(--s-2)}
.tool-out .big-num{font-family:"Kryo Display",sans-serif; font-size:var(--fs-2xl); font-weight:900;
  font-variant-numeric:tabular-nums}

/* ================= 动效(《高档UI手法库》手法⑩) =================
   🔴 初始态挂在 .js-rise 下面 —— 那个 class 由 main.js 加。
      要是直接写 .sec{opacity:0},JS 挂了/被拦了 = 全站内容永远不显示。渐进增强,不是渐进消失。
   🔴 只动 transform / opacity(合成层);hero 不参与 —— 它是 LCP,不能让它淡入。 */
.js-rise .sec, .js-rise .trk-sec, .js-rise .band, .js-rise .cta-band{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1)}
.js-rise .sec.in, .js-rise .trk-sec.in, .js-rise .band.in, .js-rise .cta-band.in{
  opacity:1; transform:none}

/* 全站群统一底座(手册要求) */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .js-rise .sec, .js-rise .trk-sec, .js-rise .band, .js-rise .cta-band{opacity:1; transform:none}
}

/* 「全部内容」索引:列宽原来写死在 HTML 内联样式 repeat(4,1fr),媒体查询覆盖不了,
   360px 下四列各 64px,「什么是 Web3 钱包」被压成每行两三个汉字(Codex S29-REAUD-P2-001)。
   改成 class 后在这里按断点收列。 */
.allc{grid-template-columns:repeat(4,1fr); align-items:start}
@media(max-width:900px){ .allc{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .allc{grid-template-columns:1fr} }

/* ================= 响应式 ================= */
@media(max-width:1179px){
  .entry.article-dossier{max-width:54rem}
  .article-dossier .dossier-grid{
    grid-template-columns:72px minmax(0,1fr);
    column-gap:20px;
  }
  .dossier-grid > .dossier-head{grid-column:2; grid-row:1}
  .dossier-grid > .dossier-index{grid-column:1; grid-row:1 / span 3}
  .dossier-grid > .dossier-rail{grid-column:2; grid-row:2}
  .dossier-grid > .dossier-content{grid-column:2; grid-row:3}
  .dossier-rail .dossier-stick{position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .dossier-rail .dossier-stick > *{margin:0}
}
@media(max-width:767px){
  .entry.article-dossier{max-width:44rem}
  .article-dossier .dossier-grid{display:block}
  .dossier-head{margin-top:var(--s-2); padding:16px 18px 18px; box-shadow:5px 6px 0 var(--am)}
  .dossier-head h1{font-size:clamp(1.75rem,8.6vw,2.35rem)}
  .dossier-index{padding-top:8px}
  .dossier-index .dossier-stick{position:static}
  .dossier-index ol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  .dossier-index li:nth-child(odd){border-right:1px solid var(--line)}
  .dossier-index a,.dossier-index span{padding:0 8px}
  .dossier-rail{margin:var(--s-2) 0 var(--s-3)}
  .dossier-rail .dossier-stick{display:block}
  .dossier-rail .dossier-stick > *{margin:0 0 12px}
  .dossier-card,.dossier-preflight,.dossier-rail .toc{padding:12px}
  .dossier-card a{display:inline-flex; min-height:44px; align-items:center}
  .article-dossier .table-wrap{overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){
  .article-dossier *{scroll-behavior:auto !important}
}
@media(max-width:900px){
  /* 两栏 hero 收单列:图落到文字下方(ledger/币安 手机版也是这么收的) */
  .hero-2col .wrap{grid-template-columns:1fr; gap:var(--s-3)}
  /* 🔴 桌面那条负 margin + width:calc(100%+120px) 是给「重叠」用的,单列下必须整个解开:
     实测 360 宽时图被撑到 448、右沿 464,靠 .hero{overflow:hidden} 硬裁掉 —— scrollWidth 看着正常,
     图其实被切了。这种「静默切掉」比横滚更难发现。 */
  .hero-art{width:100%; max-width:min(460px,100%); margin:0 auto}
  /* mosaic 已经是「上下两行」,不再有横向 3 列;这里只收窄各自的内部列 */
  .mos-4{grid-template-columns:1fr 1fr; gap:var(--s-1)}
  .thumb img{height:150px}
  .two-col{grid-template-columns:1fr}
  .tracks{grid-template-columns:1fr; border-bottom:0}
  /* 这一节翻黑之后:分隔线要跟桌面竖线同一个值(--line 是亮底用的,扣黑底上太抢);
     收口线原来是 var(--ink) —— 黑线扣黑底 = 整节底下没有边,顶上有杏金线、底下豁着。 */
  .track{border-right:0; border-bottom:1px solid #2E323B; padding:var(--s-2)}
  .track:last-child{border-bottom:2px solid var(--am)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  :root{--fs-xl:1.375rem; --fs-2xl:1.625rem; --fs-3xl:1.875rem}
  /* 单列后卡片只有 312 宽,封面再定高 300 就成方图了(裁切窗只剩源图中间 655px,主体贴边)→ 压到 190 */
  .mos-feat{grid-template-columns:1fr}
  .mos-feat .feat-card img{height:190px}
  .nav-in > nav{order:2}
  .nav-toggle{display:block; order:3; margin-left:auto}
  .nav-links{display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--ink); flex-direction:column; align-items:stretch; gap:0;
    padding:var(--s-1) var(--s-3) var(--s-2); border-top:1px solid var(--line-d)}
  .nav-links.open{display:flex}
  .nav-links a{min-height:44px; width:100%}
  .nav-cta{justify-content:center; margin-top:var(--s-1)}
  .hero{padding:var(--s-4) 0 var(--s-3)}
  .hero-nameplate{padding:18px 20px 20px}
  .hero-nameplate::after{left:20px; right:20px}
  .hero-nameplate h1{margin-top:14px; font-size:clamp(2.5rem,11vw,3.25rem); line-height:1.03}
  .hero-plate-bottom{margin-top:14px}
  .sec{padding:var(--s-4) 0}
  .bnum{padding-right:var(--s-2); border:0}
  .band-nums{gap:var(--s-2)}
  .entry h2{font-size:1.25rem}
}
@media(max-width:400px){
  .wrap{padding:0 var(--s-2)}
  .hero:not(.hero-2col) h1{font-size:2.5rem}
  .hero-nameplate{padding:16px 17px 18px;
    clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
  .hero-nameplate::before{inset:7px;
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
  .hero-nameplate::after{left:17px; right:17px}
  .hero-plate-top{padding-bottom:9px; font-size:.46875rem; letter-spacing:.11em}
  .hero-signal{gap:5px}
  .hero-signal::before{width:6px; height:6px; flex-basis:6px; box-shadow:0 0 0 3px rgba(245,50,125,.14)}
  .hero-nameplate h1{margin-top:12px; font-size:2.375rem; line-height:1.06}
  .hero-plate-bottom{margin-top:12px; font-size:.4375rem}
  .code-chip .code{font-size:.9375rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* 首页图纸批注式教程入口(公共铁律 §2 首页教程入口·只此一处·非促销腔) */
.anno-pick{position:relative;margin:2px 0 22px;padding:10px 0 10px 14px;
  border-left:1px dashed var(--line);font-size:15px;line-height:1.75;color:var(--t-2);max-width:70ch}
.anno-tag{display:inline-block;margin-right:9px;padding:1px 6px;border:1px solid var(--line);
  border-radius:2px;font-size:10.5px;letter-spacing:.14em;color:var(--t-3);vertical-align:1px}
.anno-pick a{color:var(--mg-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.anno-pick a:hover{color:var(--am-d)}
@media(max-width:720px){.anno-pick{font-size:14.5px;padding-left:11px;margin-bottom:18px}}

/* 首页邀请码卡（公共铁律 §2 模式 A：可见码 + 复制控件 + 0 外部 affiliate 链接） */

.codetitleblk { margin: 24px auto 0; }
.codetitleblk-box { background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 0; overflow: hidden; }
.codetitleblk-label { margin: 0; padding: 7px 16px; border-bottom: 1px solid var(--line);
  font-family: "Kryo Mark", ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--t-3); background: var(--paper-2); }
.codetitleblk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px 0; }
.codetitleblk-code { font-family: "Kryo Mark", ui-monospace, monospace; font-size: 26px; font-weight: 700;
  letter-spacing: .09em; color: var(--mg-d); }
.codetitleblk-copy { font: inherit; font-size: 13.5px; cursor: pointer; padding: 9px 18px; min-height: 44px;
  border-radius: 2px; border: 1px solid var(--line); background: transparent; color: var(--t-1); }
.codetitleblk-copy:hover { background: var(--mg); color: #fff; border-color: var(--mg); }
.codetitleblk-status { font-size: 13px; color: var(--am-d); min-width: 4.5em; }
.codetitleblk-note { margin: 0; padding: 11px 16px 15px; font-size: 13.5px; line-height: 1.8;
  color: var(--t-2); max-width: 72ch; }
.codetitleblk-note b { color: var(--mg-d); }
@media (max-width: 640px) { .codetitleblk-code { font-size: 21px; } }


/* 2026-09-04 设计复审：窄屏下超长 placeholder 会被硬切成半个词（站群 15 个站命中，此前无一处有保护）。改为优雅省略，不改任何文案与版式。 */
input, textarea { text-overflow: ellipsis; }
input::placeholder, textarea::placeholder { text-overflow: ellipsis; }

/* 分类页 / 编辑说明 / 署名行(2026-09-08 结构补件) */
.route-list{list-style:none;padding:0;margin:0;counter-reset:rt}
.route-list li{padding:14px 0;border-top:1px solid rgba(127,127,127,.35);counter-increment:rt}
.route-list li::before{content:counter(rt,decimal-leading-zero);font-size:.78rem;opacity:.6;font-variant-numeric:tabular-nums;display:block;margin-bottom:4px}
.route-list a{font-weight:700}
.route-list .when{font-size:.8rem;opacity:.65;margin-left:8px;font-variant-numeric:tabular-nums}
.route-list p{margin:6px 0 0;font-size:.95rem;opacity:.85}
.route-intro{opacity:.85;margin:0 0 18px}
.creditline{font-size:.85rem;opacity:.75;margin:28px 0 0;padding-top:12px;border-top:1px solid rgba(127,127,127,.35);line-height:1.7}
.routes-foot{font-size:.85rem;margin:0 0 14px;line-height:1.8}.routes-foot a{display:inline;margin-right:12px;text-decoration:underline;color:inherit}

/* 转化文装置:站主的判断 / 条件答案 / 核对来源(2026-09-08 结构补件第二步) */
.decision-line{margin:22px 0 30px;padding:18px 20px;border:1px solid currentColor;border-radius:4px}
.decision-line strong{display:block;margin-bottom:6px;font-size:.8rem;letter-spacing:.08em;opacity:.7}
.decision-line p{margin:0;font-size:1.05rem;line-height:1.75}
.cond-answer{margin:20px 0;padding:14px 18px;border-left:4px solid currentColor;background:rgba(127,127,127,.08);line-height:1.7}
.cond-answer strong{display:block;margin-bottom:4px}
.sources-check{margin:34px 0 0;padding-top:14px;border-top:1px solid rgba(127,127,127,.35);font-size:.95rem;line-height:1.75}
.sources-check h2{font-size:1.05rem;margin:0 0 10px}
.sources-check p{margin:0 0 10px}

/* 界面截图 figure.shot(自采/官方引用,2026-09-09 第三步) */
figure.shot{margin:22px 0 26px}
figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--card)}
figure.shot figcaption{margin-top:8px;padding-left:10px;border-left:2px solid var(--am);font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:var(--fs-xs);line-height:1.62;color:var(--t-3)}
figure.shot figcaption a{color:var(--t-1)}

/* 第三步配图:窄屏横滚 —— 费率表是宽图,手机上按容器缩到看不清,改成图保持最小可读宽度、由 figure 自己横向滚动 */
@media (max-width:640px){
  figure.shot{overflow-x:auto;-webkit-overflow-scrolling:touch}
  figure.shot img{width:auto;max-width:none;min-width:600px}
  figure.shot figcaption{position:sticky;left:0;max-width:92vw}
}