/* coinkiki 视觉规范 v2「夜间牌价屏」，见 docs/design/VISUAL.md。
   一条规则：实时数据在屏上，文字在纸上。
   屏（首屏通栏舞台、走势图、换算结果、文章里的实时价格）两套主题下都是黑底、琥珀色点阵数字，数字背后有一层没点亮的 8；
   纸（页面）跟随浅色或深色主题，排版靠字号、细线和留白分层，不靠卡片和底色。
   涨跌色按语种区分：中文站红涨绿跌，英文站对调。琥珀色只用于点阵数字、屏标题、溢价率和强调，不表示涨跌。 */

@font-face {
  font-family: "Kiki Mono";
  src: url("/static/fonts/kiki-mono.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A5, U+00B7, U+00D7, U+2013, U+2190-2193, U+2212, U+2248, U+25B2, U+25BC;
}
@font-face {
  font-family: "Kiki Mono";
  src: url("/static/fonts/kiki-mono-bold.woff") format("woff");
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A5, U+00B7, U+00D7, U+2013, U+2190-2193, U+2212, U+2248, U+25B2, U+25BC;
}

/* ── 纸面：跟随主题 ─────────────────────────────────── */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #0E0F11;
  --ink-2: #2E3035;
  --muted: #5D6066;
  --line: #E2E2DD;
  --rule: #0E0F11;
  --hover: #F2F2EF;
  --accent: #8A4600;
  --accent-soft: #F3E4CB;
  --red: #C42419;
  --green: #066B3A;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0F11;
  --surface: #17191C;
  --ink: #EDEDE9;
  --ink-2: #C9CACC;
  --muted: #9A9DA3;
  --line: #27292D;
  --rule: #EDEDE9;
  --hover: #17181B;
  --accent: #FFB300;
  --accent-soft: #2A2110;
  --red: #FF5A4D;
  --green: #2FD886;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E0F11;
    --surface: #17191C;
    --ink: #EDEDE9;
    --ink-2: #C9CACC;
    --muted: #9A9DA3;
    --line: #27292D;
    --rule: #EDEDE9;
    --hover: #17181B;
    --accent: #FFB300;
    --accent-soft: #2A2110;
    --red: #FF5A4D;
    --green: #2FD886;
  }
}

/* ── 屏：两套主题下都是黑的 ─────────────────────────── */
:root {
  --screen: #050506;
  --screen-2: #0A0B0C;
  --screen-edge: #23262A;
  --screen-line: #1A1C1F;
  --screen-label: #8C9097;
  --screen-ink: #ECECE8;
  --screen-hi: #F7F7F3;
  --led: #FFB000;
  --led-red: #FF4538;
  --led-green: #19D377;
  --dots: radial-gradient(circle, rgba(255, 255, 255, 0.032) 0 1px, transparent 1.4px);

  --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Kiki Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1240px;
  --gut: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --space-section: clamp(64px, 7.5vw, 116px);
}
@media (min-width: 720px) { :root { --gut: 28px; } }
@media (min-width: 1100px) { :root { --gut: 40px; } }

/* 涨跌色按语种区分：纸面和屏上各一组。 */
:root { --up: var(--red); --down: var(--green); --led-up: var(--led-red); --led-down: var(--led-green); }
:root[lang="en"] { --up: var(--green); --down: var(--red); --led-up: var(--led-green); --led-down: var(--led-red); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.75 var(--sans); overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: anywhere; font-kerning: normal; }
:root[lang="en"] body { line-height: 1.6; }
a { color: inherit; text-decoration-color: color-mix(in oklab, currentColor 30%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; }
figure { margin: 0; }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; text-wrap: balance; }
::selection { background: var(--accent-soft); color: var(--ink); }
.screen ::selection, .stage ::selection { background: #3A2A00; color: var(--led); }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--ink); color: var(--bg); padding: 6px 12px; z-index: 60; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.wide { display: none; }
.eyebrow, .block-head .aside, .board-head, .dates, .crumbs { font-family: var(--mono); font-weight: 500; letter-spacing: 0.06em; }

/* ── 页头 ─────────────────────────────────────────── */
.top { position: relative; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; min-height: 60px; }
.brand { order: 1; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); line-height: 1; padding: 8px 0; }
.brand:hover { color: var(--ink); }
/* 标志：两枚叠在一起的硬币，空心的是人民币、实心琥珀色的是 USDT，换来换去。
   空心圈用 currentColor，白色页头上是墨色，黑色页头上是浅色；实心圆两种主题都是琥珀色。 */
.brand .logo { flex: none; display: block; overflow: visible; margin-right: -4px; }
.brand .logo-coin { transform-box: fill-box; transform-origin: center; }
/* 字标：coin 用常规字重，kiki 用特粗字重、两个 i 的点是琥珀色圆点。前轻后重，一眼分成两个词，kiki 是记忆点。
   字是真实文字（无点的 ı 加 CSS 圆点），不用图片或字体文件。 */
.wm { font: 800 21px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; letter-spacing: -0.035em; white-space: nowrap; }
.wm-a { font-weight: 400; letter-spacing: -0.02em; }
.wm-b { font-weight: 800; }
.wm .dot { position: relative; display: inline-block; }
.wm .dot::before { content: ""; position: absolute; left: 50%; top: 0.03em; width: 0.21em; height: 0.21em; border-radius: 50%;
  background: var(--led); transform: translateX(-50%); }
.top .tools { order: 2; margin-left: auto; display: flex; align-items: center; gap: 8px; }
nav.main { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--gut)); }
/* 主导航五项：今日 U 价、行情（下拉）、换算、新手、知识（下拉）。手机上一行放得下，不再横向滚动。 */
nav.main .nav-top { list-style: none; margin: 0; padding: 0 var(--gut); display: flex; flex-wrap: wrap; gap: 2px; }
nav.main .nav-top > li > a, nav.main .navmenu summary { position: relative; display: flex; align-items: center; gap: 5px; padding: 10px 11px 12px; font-size: 14px;
  text-decoration: none; color: var(--muted); white-space: nowrap; cursor: pointer; }
nav.main .nav-top > li:first-child > a { padding-left: 0; }
nav.main .nav-top > li > a:hover, nav.main .navmenu summary:hover, nav.main .navmenu[open] summary { color: var(--ink); }
nav.main .nav-top > li > a[aria-current="page"], nav.main .navmenu.on summary { color: var(--ink); font-weight: 600; }
/* 当前栏目：文字下方一个琥珀色圆点，和点阵同一语言；下拉菜单里有当前页时，圆点标在菜单名下面 */
nav.main .nav-top > li > a[aria-current="page"]::after, nav.main .navmenu.on summary::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%; background: var(--accent); }
@media (max-width: 899px) {
  /* 手机上只留右边距：放不下换行时，第二行也从左边对齐 */
  nav.main .nav-top { column-gap: 0; }
  nav.main .nav-top > li > a, nav.main .nav-top > li:first-child > a, nav.main .navmenu summary { padding: 10px 18px 12px 0; }
  nav.main .nav-top > li > a[aria-current="page"]::after, nav.main .navmenu.on summary::after { left: calc(50% - 9px); }
  nav.main .navmenu.on summary::after { left: calc(50% - 14px); }
}
nav.main .navmenu summary { list-style: none; }
nav.main .navmenu summary::-webkit-details-marker { display: none; }
nav.main .navmenu .chev { transition: transform 0.2s ease; }
nav.main .navmenu[open] .chev { transform: rotate(180deg); }
/* 下拉面板：手机上铺满页头宽度，桌面上挂在菜单名下面 */
nav.main .navpanel { position: absolute; left: var(--gut); right: var(--gut); top: 100%; z-index: 40; display: grid; gap: 14px 22px; margin-top: -4px; padding: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.45); }
nav.main .navpanel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
nav.main .navpanel a { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; font-size: 15px; line-height: 1.35; text-decoration: none; color: var(--ink); }
nav.main .navpanel a.exn { flex-direction: row; align-items: center; gap: 9px; }
nav.main .navpanel a span:not(.exm) { font-size: 12px; color: var(--muted); }
nav.main .navpanel a:hover { background: var(--hover); }
nav.main .navpanel a[aria-current="page"] { background: var(--hover); font-weight: 600; }
nav.main .np-h { display: block; padding: 0 10px 6px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
@media (min-width: 560px) { nav.main .navpanel.np-cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
/* 屏幕顶的实时小价格：牌价屏滚出视野后出现在页头（只在桌面，由 site.js 生成） */
.mini { display: none; }

/* 主题切换：一个圆形图标按钮。两个都是普通链接，CSS 只显示当前适用的那个，所以不开 JavaScript 也对。 */
.theme-sw { display: inline-flex; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line);
  border-radius: 50%; color: var(--ink); background: transparent; text-decoration: none; }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn svg { display: block; }
.theme-sw .to-light { display: none; }
:root[data-theme="dark"] .theme-sw .to-dark { display: none; }
:root[data-theme="dark"] .theme-sw .to-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sw .to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-sw .to-light { display: inline-flex; }
}
/* 语言下拉：原生 details/summary，不靠脚本也能展开和点击；菜单浮在页头上方，右对齐 */
.langmenu { position: relative; flex: none; }
.langmenu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; border: 1px solid var(--line); border-radius: 999px;
  padding: 0 12px 0 14px; font: 500 13px/1 var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; user-select: none; }
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease); }
.langmenu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.langmenu summary:hover, .langmenu[open] summary { border-color: var(--ink); }
.langmenu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 156px; max-width: calc(100vw - 32px); margin: 0; padding: 6px;
  list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.28); }
.langmenu li a, .langmenu li .current { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.langmenu li a { padding-left: 34px; }
.langmenu li a:hover { background: var(--hover); color: var(--ink); }
.langmenu li a:focus-visible { outline-offset: -2px; }
.langmenu li .current { font-weight: 600; }
.langmenu li .current::before { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-2px) rotate(-45deg); margin: 0 2px; }

/* 首屏是一块屏的页面：页头也变成屏的一部分 */
body:has(.stage) .top { --bg: var(--screen); --surface: #131417; --ink: var(--screen-ink); --muted: var(--screen-label); --line: var(--screen-edge);
  --hover: #1C1E21; --accent: var(--led); background: var(--screen); border-bottom-color: var(--screen-line); color: var(--screen-ink); }
body:has(.stage) .top .wm { color: var(--screen-hi); }

main { padding: 0 0 8px; }

/* ── 标题 ─────────────────────────────────────────── */
.page-title, .article-head h1 { word-break: keep-all; }
.page-title { font-size: clamp(38px, 5vw + 12px, 88px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; margin: 0; text-wrap: balance; }
:root[lang="en"] .page-title { letter-spacing: -0.035em; line-height: 0.98; }
.lede { color: var(--muted); margin: 0; max-width: 34em; font-size: 16px; line-height: 1.75; text-wrap: pretty; }
:root[lang="en"] .lede { max-width: 60ch; line-height: 1.6; }

/* 纸面页的报头：标题和导语左右分开，下面一条粗线 */
.masthead { display: grid; gap: 18px; padding: clamp(44px, 7vw, 112px) 0 clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--rule); margin-bottom: clamp(36px, 5vw, 64px); }
.masthead .status { margin: 0; }

/* ── 舞台：通栏黑色首屏 ──────────────────────────────── */
.stage { position: relative; width: 100vw; margin-left: calc(50% - 50vw); color: var(--screen-ink); isolation: isolate;
  background-color: var(--screen); background-image: var(--dots); background-size: 6px 6px;
  padding: clamp(36px, 6vw, 88px) 0 clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--screen-line); }
/* 点亮的数字把一点琥珀色的光洒在屏上 */
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 72% 62%, rgba(255, 176, 0, 0.075), transparent 70%); }
.stage-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.stage-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4.5vw, 64px); }
.stage .page-title { color: var(--screen-hi); }
.stage .lede { color: var(--screen-label); font-size: 15px; }
.stage a { color: var(--screen-ink); }
.stage a:hover { color: var(--led); }
main > .wrap > .stage:first-child { margin-top: 0; }

/* ── 屏的通用外壳（盒装的小屏：图表、换算结果、文章里的实时价） ── */
.screen { position: relative; background-color: var(--screen); background-image: var(--dots); background-size: 6px 6px; color: var(--screen-ink);
  border: 1px solid var(--screen-edge); border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 28px 56px -32px rgba(0, 0, 0, 0.45); }
.screen a { color: var(--screen-ink); text-decoration-color: var(--screen-edge); }
.screen a:hover { color: var(--led); }
/* 舞台上的屏不再装盒子：屏就是整块舞台 */
.stage .screen { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }

/* 牌价屏 */
.board-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 11px 16px;
  border-bottom: 1px solid var(--screen-line); font-size: 11px; text-transform: uppercase; color: var(--screen-label); background: var(--screen-2); position: relative; }
.board-head b { color: var(--led); font-weight: 700; letter-spacing: 0.1em; }
.stage .board-head { padding: 0 0 14px; background: none; }
.live { display: inline-flex; align-items: center; gap: 8px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--led-green); box-shadow: 0 0 8px var(--led-green); flex: none; }
.live.stale::before { background: var(--screen-label); box-shadow: none; }
.live .warn { color: var(--screen-hi); font-weight: 700; }
/* 距下一轮采集的进度：一条在屏标题下方慢慢走满的琥珀细线（site.js 生成） */
.cycle { position: relative; display: inline-block; width: 56px; height: 2px; border-radius: 2px; overflow: hidden; background: var(--screen-edge); vertical-align: middle; }
.cycle i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: var(--led); opacity: 0.75; }

table.rates { width: 100%; border-collapse: collapse; }
.rates th { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen-label); text-align: right; padding: 12px 16px 0; }
.rates th:first-child { text-align: left; }
.rates th small { display: block; font: 400 12px/1.5 var(--sans); letter-spacing: 0; text-transform: none; opacity: 0.85; }
.rates td { padding: 6px 16px 14px; text-align: right; border-bottom: 1px solid var(--screen-line); vertical-align: bottom; }
.rates tr:last-child td { border-bottom: 0; }
.rates td:first-child { text-align: left; }
.stage .rates th { padding: 18px 0 0; }
.stage .rates td { padding: 10px 0 20px; transition: background-color 0.25s; }
.stage .rates td + td, .stage .rates th + th { padding-left: clamp(24px, 4vw, 64px); }
.tier { font-size: 16px; font-weight: 600; color: var(--screen-hi); white-space: nowrap; }
.tier small { display: block; font: 400 12px/1.6 var(--mono); color: var(--screen-label); letter-spacing: 0.02em; }
.tier small.spread { display: none; margin-top: 14px; }

/* 点阵数字：5×7 灯珠字形（matrix.go 生成的 SVG，引用每页一份的点阵字库）。
   亮灯是 currentColor，暗灯是同一套格子上的暗琥珀色，两层永远对齐；真实文字留给读屏软件、复制和脚本。
   字号决定高度：点阵高 0.78em，也就是 7 行灯珠。 */
.glow { display: inline-block; filter: drop-shadow(0 0 0.06em rgba(255, 176, 0, 0.55)); }
.led { position: relative; display: inline-block; vertical-align: bottom; font-size: clamp(30px, 9.5vw, 54px); line-height: 1; color: var(--led); }
.led .mx { display: block; height: 0.78em; width: auto; overflow: visible; }
.led-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.led-none { font-size: 13px; color: var(--screen-label); }
/* 手机：两列价格各占约一半宽，点阵 26 列宽，按宽度算字号，两列之间留出至少 20px */
.stage .rates .led { font-size: clamp(36px, 12.4vw, 56px); }
.led.led-sm { font-size: clamp(30px, 6.4vw, 42px); }
.led.led-md { font-size: clamp(44px, 9vw, 96px); }
.by { display: block; font: 400 12px/1.6 var(--sans); color: var(--screen-label); margin-top: 4px; white-space: nowrap; }
.by.wrap { white-space: normal; }
.chg { font-family: var(--mono); font-size: 12px; margin-left: 8px; }
.chg.up { color: var(--led-up); }
.chg.down { color: var(--led-down); }
.screen .thin-tag, .stage .thin-tag { border-color: var(--screen-edge); color: var(--screen-label); margin-left: 6px; }
.board-foot { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--screen-line); background: var(--screen-2); }
.board-foot > div { padding: 12px 16px 14px; border-left: 1px solid var(--screen-line); }
.board-foot > div:first-child { border-left: 0; }
.board-foot dt { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen-label); }
.board-foot dt a { text-decoration-color: var(--screen-edge); }
.board-foot dd { margin: 4px 0 0; font: 700 18px/1.2 var(--mono); color: var(--screen-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-foot dd.hot { color: var(--led); }
.stage .board-foot { background: none; border-top-color: var(--screen-edge); }
.stage .board-foot > div { padding: 16px 0 0 20px; }
.stage .board-foot > div:first-child { padding-left: 0; }

/* 数字屏（溢价页）：一个主数字加两个均值 */
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.stats > div { padding: 16px 16px 18px; border-left: 1px solid var(--screen-line); border-top: 1px solid var(--screen-line); }
.stats > div:nth-child(2) { border-left: 0; }
.stats > .hero { grid-column: 1 / -1; border-left: 0; border-top: 0; padding-top: 20px; }
.stats dt { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen-label); margin-bottom: 8px; }
.stats dd { margin: 0; }
.stats .hero .led { font-size: clamp(64px, 19vw, 210px); line-height: 0.95; }
.stage .stats > div { padding-left: 0; padding-right: 0; }
.stage .stats > div + div:not(.hero) { padding-left: 20px; }
.stage .stats > div:nth-child(2) { padding-left: 0; }

/* 走势屏：窄版和宽版两张图，按容器宽度二选一，坐标轴文字始终约 11px */
.scope { padding: 14px 14px 8px; container-type: inline-size; }
.scope svg { display: block; width: 100%; height: auto; overflow: visible; }
.scope .sv-w { display: none; }
@container (min-width: 700px) { .scope .sv-n { display: none; } .scope .sv-w { display: block; } }
.scope .grid line { stroke: var(--screen-line); stroke-width: 1; }
.scope .axis text { fill: var(--screen-label); font: 11px var(--mono); }
.scope .s-buy, .scope .s-prem { stroke: var(--led); fill: none; stroke-width: 2.25; stroke-dasharray: 0.5 5; stroke-linecap: round; }
.scope .s-sell { stroke: var(--screen-ink); fill: none; stroke-width: 2.25; stroke-dasharray: 0.5 5; stroke-linecap: round; opacity: 0.7; }
.scope .s-ref { stroke: var(--screen-label); fill: none; stroke-width: 1; stroke-dasharray: 4 4; }
.scope .s-zero { stroke: var(--screen-label); stroke-width: 1; opacity: 0.6; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--screen-ink); padding: 2px 4px 10px; }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.legend .l-buy i { background: var(--led); box-shadow: 0 0 6px rgba(255, 176, 0, 0.6); }
.legend .l-sell i { background: var(--screen-ink); }
.legend .l-ref i { background: var(--screen-label); }
/* 悬停读数（site.js）：一条竖线、每条线上一个点、一张小读数卡 */
.scope .xh line { stroke: var(--screen-label); stroke-width: 1; stroke-dasharray: 2 3; }
.scope .xh circle { stroke: var(--screen); stroke-width: 2; }
.scope .xh .c-buy, .scope .xh .c-prem { fill: var(--led); }
.scope .xh .c-sell { fill: var(--screen-ink); }
.scope .xh .c-ref { fill: var(--screen-label); }
.sv { position: relative; }
.tip { position: absolute; top: 0; z-index: 2; pointer-events: none; min-width: 112px; padding: 8px 10px; border: 1px solid var(--screen-edge); border-radius: 10px;
  background: rgba(10, 11, 12, 0.94); font: 500 12px/1.55 var(--mono); color: var(--screen-ink); white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.tip b { display: block; color: var(--screen-label); font-weight: 500; letter-spacing: 0.04em; }
.tip i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.screen .empty { color: var(--screen-label); border: 0; }

/* 文章里的实时价格：字号小于 28px，不用点阵，用纯色琥珀数字 */
.live-box { margin: 1.6em 0 2em; }
.live-box table.rates td { padding: 10px 16px; }
.live-box .px { font-family: var(--mono); font-weight: 700; font-size: 21px; color: var(--led); }
.live-box .foot { font-size: 12px; color: var(--screen-label); padding: 10px 16px; border-top: 1px solid var(--screen-line); background: var(--screen-2); margin: 0; }
.prose .live-box table { display: table; margin: 0; font-size: 14px; }
.prose .live-box th, .prose .live-box td { border: 0; border-bottom: 1px solid var(--screen-line); background: none; min-width: 0; }
.prose .live-box th { font-weight: 500; }
.prose .live-box a { color: var(--screen-ink); }

/* ── 纸面：分节 ─────────────────────────────────────── */
section.block { margin-top: var(--space-section); }
.stage + section.block, .stage + .note-line + section.block, .masthead + section.block { margin-top: clamp(48px, 6vw, 88px); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  border-top: 1px solid var(--rule); padding-top: 18px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.block-head h2 { font-size: clamp(23px, 1.3vw + 17px, 36px); letter-spacing: -0.025em; font-weight: 700; line-height: 1.2; }
.block-head .aside { font-size: 11px; text-transform: uppercase; color: var(--muted); text-decoration: none; }
a.aside:hover { color: var(--accent); }
a.aside::after { content: " →"; }
.cols { display: grid; gap: 0 clamp(32px, 5vw, 72px); }
.cols > *, .cards > * { min-width: 0; }
.cols.two > section.block:first-child + section.block { margin-top: var(--space-section); }

.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.seg a { padding: 5px 14px; font-size: 13px; text-decoration: none; color: var(--muted); border-radius: 999px; transition: background-color 0.2s, color 0.2s; }
.seg a:hover { color: var(--ink); }
.seg a[aria-current="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }

/* 数据表：没有外框，细线分行，表头用等宽小字，数字右对齐 */
.tbl-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); scrollbar-width: thin; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { padding: 15px 0 15px 20px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.data thead th { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 0; padding-bottom: 12px; border-bottom-color: var(--rule); }
table.data td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data td.txt { font-family: var(--sans); text-align: left; }
table.data tr > :first-child { padding-left: 0; text-align: left; font-weight: 600; font-family: var(--sans); }
table.data thead tr > :first-child { font-weight: 500; font-family: var(--mono); }
table.data th a { text-decoration: none; }
table.data th a:hover { text-decoration: underline; }
table.data .stale-row, table.data .stale-row th { color: var(--muted); }
table.data tbody tr > * { transition: background-color 0.15s; }
table.data tbody tr:hover > * { background: var(--hover); }
/* 表格横向滚动时，首列钉在左边，读者不会丢掉这一行是谁 */
.tbl-wrap table.data tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); padding-right: 12px; }
/* 表格紧跟在带阴影的黑屏下面时，整张表铺上底色，盖住阴影；否则只有第一列（固定列）盖住，表头会出现一块白。 */
.screen + .tbl-wrap { position: relative; background: var(--bg); }
.tbl-wrap table.data tbody tr:hover > :first-child { background: var(--hover); }
table.data .muted { font-family: var(--sans); }
.best-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1.4 var(--sans); color: var(--accent); margin-left: 8px; vertical-align: 1px; }
.best-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.thin-tag { display: inline-block; font: 400 11px/1.5 var(--sans); padding: 0 5px; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; vertical-align: 1px; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
p.note-line { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 16px 0 0; max-width: 62em; }
.stage + p.note-line { margin-top: 18px; }

svg.bar { display: block; width: 100%; min-width: 64px; height: 4px; }
svg.bar .track { fill: var(--line); }
svg.bar .fill { fill: var(--ink); }

/* 数字格 */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.kv > div { padding: 18px 16px 20px 0; border-bottom: 1px solid var(--line); }
.kv > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.kv dt { font: 500 11px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.kv dd { margin: 6px 0 0; font: 700 clamp(26px, 1.6vw + 18px, 40px)/1.1 var(--mono); white-space: nowrap; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kv dd small { font: 400 13px var(--sans); color: var(--muted); margin-left: 6px; letter-spacing: 0; white-space: normal; }

/* 结论：大号陈述，左边一条琥珀线 */
.key { max-width: 42em; margin: 0 0 clamp(36px, 5vw, 56px); padding: 2px 0 2px 22px; border-left: 2px solid var(--accent);
  font-size: clamp(18px, 0.7vw + 14px, 22px); line-height: 1.7; color: var(--ink); }
:root[lang="en"] .key { line-height: 1.55; }
.key p:last-child, .note p:last-child { margin-bottom: 0; }
.key b.k { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.note { margin: 24px 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--line); font-size: 15px; color: var(--ink-2); }
/* 要点：琥珀色圆点，不用默认的黑点 */
.points { margin: 0; padding: 0; list-style: none; max-width: 40em; }
:root[lang="en"] .points { max-width: 68ch; }
.points li { position: relative; padding-left: 22px; margin: 0 0 12px; }
.points li::before { content: ""; position: absolute; left: 3px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.points.small li { margin-bottom: 8px; }

/* 文章目录：索引式列表，细线分行，右侧一个会滑动的箭头 */
.cards { display: grid; grid-template-columns: 1fr; column-gap: clamp(32px, 5vw, 72px); list-style: none; margin: 0; padding: 0; }
.cards > li { border-top: 1px solid var(--line); }
.cards > li:last-child { border-bottom: 1px solid var(--line); }
.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; height: 100%; padding: 22px 0 24px; text-decoration: none; color: var(--ink); }
.card > * { grid-column: 1; }
.card::after { content: "→"; grid-column: 2; grid-row: 1 / span 4; align-self: center; font: 400 20px/1 var(--mono); color: var(--muted); opacity: 0.45;
  transform: translateX(-6px); transition: transform 0.35s var(--ease), opacity 0.35s, color 0.2s; }
.card:hover { color: var(--ink); }
.card:hover::after { opacity: 1; transform: none; color: var(--accent); }
.card .k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.card h3 { font-size: clamp(17px, 0.5vw + 15px, 21px); line-height: 1.45; letter-spacing: -0.01em; margin: 8px 0 6px; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: text-decoration-color 0.25s; }
.card:hover h3 { text-decoration-color: currentColor; }
.card p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .date { display: block; font: 400 12px/1.4 var(--mono); color: var(--muted); margin-top: 10px; }

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list li { border-bottom: 1px solid var(--line); }
.list a { display: block; padding: 12px 2px; text-decoration: none; }
.list b { font-weight: 600; }

/* Telegram：一条通栏横幅，上下两条线 */
.tg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.tg b { display: block; font-size: clamp(20px, 1vw + 15px, 28px); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 6px; }
.tg span { font-size: 14px; color: var(--muted); }
.tg .small.muted { font: 500 12px var(--mono); letter-spacing: 0.06em; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--ink); color: var(--ink);
  text-decoration: none; font: 600 14px/1.3 var(--sans); background: transparent; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease); }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn:active { transform: scale(0.98); }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn.solid:hover { color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.solid:hover { color: #111; } }
.btn + .btn { margin-left: 8px; }

/* 换算器、电汇计算器：表单不装盒子，金额是一行大号等宽数字，只有下划线 */
.calc { display: grid; gap: 28px; margin: 0; }
.calc label:not(.radio), .calc legend { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; padding: 0; }
.calc input[type=text] { width: 100%; font: 700 clamp(34px, 3.6vw + 16px, 68px)/1.1 var(--mono); letter-spacing: -0.02em; color: var(--ink); background: transparent;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: 2px 0 10px; caret-color: var(--accent); transition: border-color 0.2s; }
.calc input[type=text]:focus { outline: none; border-bottom-color: var(--accent); }
.calc input[type=text]:focus-visible { box-shadow: 0 2px 0 var(--accent); }
.calc fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.calc fieldset legend { width: 100%; }
.radio { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px;
  cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.radio:hover { border-color: var(--ink); }
.radio:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.calc.wire { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 24px; margin: 28px 0 32px; }
.calc.wire input[type=text] { font-size: clamp(24px, 1.2vw + 18px, 32px); }
.calc.wire > div:last-child { align-self: end; }
.result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 22px 20px 24px; }
.result .lbl { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen-label); width: 100%; }
.result .ex { font-size: 13px; color: var(--screen-label); }
.result .unit { font: 700 18px var(--mono); color: var(--led); }
#calc-result > .screen { margin-bottom: 28px; }
.calc + .block, .calc + section.block { margin-top: clamp(48px, 6vw, 80px); }

.status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 400 12px/1.5 var(--mono); letter-spacing: 0.03em; color: var(--muted); margin: 18px 0 0; }
.status .dot { display: inline-flex; align-items: center; gap: 8px; }
.status .dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.status .dot.stale::before { background: var(--muted); }
.stale-note { color: var(--ink); font-weight: 600; font-family: var(--sans); }

/* ── 文章 ─────────────────────────────────────────── */
.crumbs { font-size: 11px; text-transform: uppercase; color: var(--muted); margin: clamp(36px, 6vw, 88px) 0 18px; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a::before { content: "← "; }
.article { min-width: 0; }
.article-head { padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--rule); margin-bottom: clamp(28px, 4vw, 48px); }
.article-head h1 { font-size: clamp(30px, 2.6vw + 20px, 60px); line-height: 1.14; letter-spacing: -0.035em; max-width: 19em; }
:root[lang="en"] .article-head h1 { max-width: 22em; line-height: 1.06; }
.article-head .dates { font-size: 12px; color: var(--muted); margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; letter-spacing: 0.03em; }
.prose { max-width: 36em; font-size: 17px; line-height: 1.95; color: var(--ink); }
:root[lang="en"] .prose { max-width: 66ch; font-size: 18px; line-height: 1.7; }
.prose > p:first-child { font-size: 1.12em; line-height: 1.85; color: var(--ink); }
.prose h2 { font-size: clamp(22px, 0.9vw + 17px, 28px); letter-spacing: -0.02em; line-height: 1.3; margin: 2.2em 0 0.75em; }
.prose h3 { font-size: 18px; margin: 1.7em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 700; }
/* 引用块是文章开头的「不是法律意见」等提示 */
.prose blockquote { margin: 28px 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--accent); font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.prose blockquote p:last-child { margin-bottom: 0; }
/* 清单：GFM 任务列表画成方框 */
.prose li:has(> input[type=checkbox]) { list-style: none; position: relative; padding: 10px 0 10px 34px; margin: 0 0 0 -1.3em; border-bottom: 1px solid var(--line); }
.prose li > input[type=checkbox] { appearance: none; -webkit-appearance: none; position: absolute; left: 2px; top: 0.85em; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--ink); border-radius: 5px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.65; margin: 1.6em 0; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 14px 10px 0; text-align: left; vertical-align: top; min-width: 7em; }
.prose tr > :first-child { min-width: 4.5em; }
.prose thead th { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--rule); }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--hover); padding: 2px 5px; border-radius: 4px; }
.prose a { color: var(--accent); text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
/* 数据页下方的介绍正文：分节标题下面是一栏文章排版 */
section.intro .prose > :first-child { margin-top: 0; }
/* 第三方网页截图：细边圆角，图注写来源和截图日期；点图看原图 */
.prose figure.shot { margin: 2em 0 2.2em; }
.prose figure.shot a.shot-link { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--hover); cursor: zoom-in; }
.prose figure.shot img { display: block; width: 100%; height: auto; }
.prose figure.shot figcaption { margin-top: 10px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.prose figure.shot figcaption a { color: var(--muted); text-decoration-color: var(--line); }
.prose figure.shot figcaption a:hover { color: var(--accent); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 88px; }
.article-layout { display: grid; gap: 28px; }
.article-layout > * { min-width: 0; }
.toc { display: none; }
.toc-m { margin: 0 0 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc-m summary { cursor: pointer; padding: 14px 0; font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after { content: "+"; font-family: var(--mono); color: var(--muted); font-size: 16px; line-height: 1; }
.toc-m[open] summary::after { content: "−"; }
.toc-m ol, .toc ol { margin: 0; padding: 0 0 14px; list-style: none; font-size: 14px; line-height: 1.5; }
.toc-m li, .toc li { margin: 0; }
.toc-m a, .toc a { display: block; padding: 6px 0; text-decoration: none; color: var(--muted); }
.toc-m a:hover, .toc a:hover { color: var(--ink); }
.related { margin-top: var(--space-section); }
/* 阅读进度：页面最顶上一条琥珀细线（滚动驱动动画；不支持时由 site.js 补） */
.readbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); pointer-events: none; }

/* ── 页脚 ─────────────────────────────────────────── */
footer.foot { margin-top: var(--space-section); border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); padding: 44px 0 28px; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.foot-grid > div:first-child { grid-column: 1 / -1; }
.foot h3 { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.foot-grid > div:first-child h3 { font: 700 18px/1.35 var(--sans); letter-spacing: -0.01em; text-transform: none; margin-bottom: 10px; }
.foot h3.gap { margin-top: 22px; }
.foot p { max-width: 30em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.theme-opts a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.theme-opts a[aria-current="true"]::before { content: "● "; color: var(--accent); font-size: 0.7em; vertical-align: 2px; }
.foot .disclaimer { border-top: 1px solid var(--line); margin: 24px 0 0; padding-top: 18px; font-size: 12px; line-height: 1.75; max-width: none; }

/* 404：一块大屏，熄灭的 888 后面亮着 404 */
.stage-nf .board-head { padding-bottom: 14px; }
.nf-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 40px; padding: clamp(28px, 5vw, 64px) 0 8px; }
.nf-body .led { font-size: clamp(120px, 34vw, 380px); line-height: 0.9; }
.nf-body p { margin: 0 0 0.6em; color: var(--screen-ink); max-width: 20em; font-size: clamp(17px, 0.6vw + 14px, 21px); }
.nf-links { margin-top: clamp(40px, 6vw, 80px); }

/* ── 窄屏（≤400px）：三列放不下「金额档 + 两个点阵价格」，金额档改成每行上方一行横排的标签 ── */
@media (max-width: 400px) {
  .rates thead tr, .rates tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .rates thead th:first-child { display: none; }
  .rates tbody tr { border-bottom: 1px solid var(--screen-line); }
  .rates tbody tr:last-child { border-bottom: 0; }
  .rates td { border-bottom: 0; padding-left: 12px; padding-right: 12px; }
  .rates th { padding-left: 12px; padding-right: 12px; }
  .rates tbody td:first-child { grid-column: 1 / -1; padding-top: 12px; padding-bottom: 0; }
  .stage .rates tbody td:first-child { padding-top: 16px; }
  .stage .rates td + td, .stage .rates th + th { padding-left: 12px; }
  .tier { display: flex; align-items: baseline; gap: 8px; }
  .tier small { display: inline; white-space: nowrap; }
  .board-foot > div, .stage .board-foot > div { padding: 12px 8px 0 10px; }
  .board-foot dd { font-size: 15px; }
}
@media (min-width: 720px) {
  .wide { display: inline; }
  .tier small.spread { display: block; }
  /* 标题通栏，导语落在右半边：标题再长也不会被挤成窄条 */
  .stage-head, .masthead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); row-gap: 22px; }
  .stage-head .page-title, .masthead .page-title { grid-column: 1 / -1; max-width: 13em; }
  :root[lang="en"] .stage-head .page-title, :root[lang="en"] .masthead .page-title { max-width: 15em; }
  .stage-head .lede, .masthead .lede { grid-column: 2; }
  .masthead .status { grid-column: 2; }
  .stage .rates .led { font-size: clamp(56px, 8.2vw, 128px); }
  .stage .rates td:first-child, .stage .rates th:first-child { width: 22%; }
  .rates td:first-child, .rates th:first-child { width: 30%; }
  .stage .board-foot dd { font-size: clamp(20px, 1vw + 12px, 28px); }
  .stats { grid-template-columns: 2.2fr 1fr 1fr; }
  .stats > .hero { grid-column: auto; border-top: 0; padding-top: 16px; }
  .stats > div { border-top: 0; }
  .stats > div:nth-child(2) { border-left: 1px solid var(--screen-line); }
  .stage .stats > div:nth-child(2), .stage .stats > div + div:not(.hero) { padding-left: 28px; }
  .stage .stats > div { align-self: end; }
  .stats .hero .led { font-size: clamp(96px, 10.6vw, 172px); }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards > li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .cols.two { grid-template-columns: 1fr 1fr; }
  .cols.two > section.block:first-child + section.block { margin-top: var(--space-section); }
  .kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kv > div { padding-left: 20px; border-left: 1px solid var(--line); }
  .kv > div:first-child { padding-left: 0; border-left: 0; }
  .tg { grid-template-columns: minmax(0, 1fr) auto; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
  .foot-grid > div:first-child { grid-column: auto; }
  .calc { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; column-gap: clamp(28px, 4vw, 56px); }
  .calc > div:last-child .btn { padding: 15px 26px; font-size: 15px; }
  .calc.wire { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc.wire > div:last-child .btn { padding: 11px 20px; font-size: 14px; }
  .result { padding: 28px 28px 30px; }
}
@media (min-width: 900px) {
  /* 桌面：导航和品牌、工具在同一行，页头钉在顶上 */
  .top { position: sticky; top: 0; }
  .top .wrap { flex-wrap: nowrap; min-height: 64px; column-gap: 36px; }
  nav.main { order: 2; flex: 1 1 auto; margin: 0; min-width: 0; }
  nav.main .nav-top { padding: 0; flex-wrap: nowrap; }
  nav.main .nav-top > li > a, nav.main .nav-top > li:first-child > a, nav.main .navmenu summary { padding: 20px 12px; }
  nav.main .nav-top > li > a[aria-current="page"]::after, nav.main .nav-top > li:first-child > a[aria-current="page"]::after, nav.main .navmenu.on summary::after { left: 50%; bottom: 11px; }
  nav.main .nm { position: relative; }
  nav.main .navpanel { left: -2px; right: auto; top: calc(100% - 8px); width: max-content; min-width: 250px; max-width: 640px; }
  nav.main .navpanel.np-cols { grid-template-columns: repeat(3, minmax(150px, auto)); }
  .top .tools { order: 3; margin-left: 0; }
  .js .mini { display: inline-flex; order: 3; align-items: baseline; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;
    max-width: 0; overflow: hidden; margin-left: -36px; opacity: 0; transform: translateY(6px); pointer-events: none; }
  .top.mini-on .mini { max-width: 320px; margin-left: 0; }
  .mini b { font-weight: 700; font-size: 15px; color: var(--led); letter-spacing: 0; }
  .top.mini-on .mini { opacity: 1; transform: none; }
  .mini b + span { margin-left: 6px; }
  .cols.two > section.block:first-child + section.block { margin-top: var(--space-section); }
}
@media (min-width: 1020px) {
  .article-layout.has-toc { grid-template-columns: minmax(0, 36em) minmax(200px, 260px); justify-content: space-between; align-items: start; gap: 64px; }
  :root[lang="en"] .article-layout.has-toc { grid-template-columns: minmax(0, 66ch) minmax(200px, 260px); }
  .has-toc .toc { display: block; position: sticky; top: 96px; }
  .toc b { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
  .toc ol { padding: 0; }
  .toc a { position: relative; padding: 7px 0 7px 16px; border-left: 1px solid var(--line); transition: color 0.2s, border-color 0.2s; }
  .toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }
  .toc a[aria-current="true"]::before { content: ""; position: absolute; left: -3.5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
  .toc-top { display: inline-block; font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 16px 0 0; }
  .has-toc .toc-m { display: none; }
}
@media (min-width: 1100px) {
  .stage .rates .led { font-size: clamp(96px, 8.6vw, 132px); }
}


/* 纸面页的报头：左边一栏标题和导语，右边一块小屏（大号点阵图标、两行数字、今日 U 价） */
.mh-main { display: grid; gap: 18px; min-width: 0; }
.mh-main .lede, .mh-main .status { grid-column: auto; justify-self: start; padding-bottom: 0; }
.mh-main .page-title { grid-column: auto; }
.masthead::before { display: none; }
.mh-screen { position: relative; display: grid; align-content: space-between; gap: 18px; padding: 20px 20px 16px; border-radius: 18px; min-width: 0; }
.mh-screen .scan { height: 70px; }
.mh-icon { display: flex; align-items: center; gap: 16px; }
.mh-icon .pi { width: 76px; height: 76px; border-radius: 18px; background: var(--screen-2); }
.mh-icon .pi svg { width: 46px; height: 46px; filter: drop-shadow(0 0 4px rgba(255, 176, 0, 0.55)); }
.mh-label { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--led); }
.mh-stats { margin: 0; display: grid; }
.mh-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--screen-line); }
.mh-stats dt { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen-label); }
.mh-stats dt a { text-decoration: none; color: inherit; }
.mh-stats dt a:hover { color: var(--led); }
.mh-stats dd { margin: 0; font: 600 14px/1.3 var(--mono); color: var(--screen-ink); text-align: right; white-space: nowrap; }
.mh-stats .q dd { font-size: 20px; font-weight: 700; }
.mh-stats .q .hot { color: var(--led); }
.mh-stats .q .sl { margin: 0 6px; color: var(--screen-edge); }
.mh-stats .q small { display: block; margin-top: 2px; font: 400 10px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--screen-label); }
@media (min-width: 720px) {
  .masthead { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: end; }
  .masthead .mh-main .page-title { grid-column: auto; max-width: 12em; }
  .masthead .mh-main .lede { grid-column: auto; justify-self: start; max-width: 36em; }
  .masthead .mh-main .status { grid-column: auto; }
}

/* 手机导航：页头只留品牌、语言、主题和一个菜单按钮，点开后整块面板列出全部栏目。
   开关是一个隐藏的复选框（label 控制），所以首屏就是收起的、没有脚本也能用；脚本只补键盘操作和自动展开两组。 */
.nav-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle { display: none; position: relative; cursor: pointer; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
.nav-toggle span:nth-child(1) { top: 11.5px; }
.nav-toggle span:nth-child(2) { top: 16.25px; }
.nav-toggle span:nth-child(3) { top: 21px; }
.nav-cb:checked ~ .tools .nav-toggle span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.nav-cb:checked ~ .tools .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-cb:checked ~ .tools .nav-toggle span:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); }
@media (max-width: 899px) {
  .nav-toggle { display: inline-block; }
  nav.main { display: none; }
  .nav-cb:checked ~ nav.main { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; max-height: calc(100dvh - 60px); overflow-y: auto;
    margin: 0; padding: 4px 0 24px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 28px 40px -28px rgba(0, 0, 0, 0.5); }
  html:has(.nav-cb:checked) { overflow: hidden; }
  .nav-cb:checked ~ nav.main .nav-top { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 var(--gut); }
  .nav-cb:checked ~ nav.main .nav-top > li { border-bottom: 1px solid var(--line); }
  .nav-cb:checked ~ nav.main .nav-top > li:not(.nm) { order: 1; }
  .nav-cb:checked ~ nav.main .nav-top > li.nm { order: 2; }
  .nav-cb:checked ~ nav.main .nav-top > li > a, .nav-cb:checked ~ nav.main .navmenu summary { justify-content: space-between; padding: 16px 0; font-size: 17px; color: var(--ink); }
  .nav-cb:checked ~ nav.main .nav-top > li > a[aria-current="page"]::after, .nav-cb:checked ~ nav.main .navmenu.on summary::after { left: auto; right: 2px; bottom: auto; top: 50%; margin: -2.5px 0 0; }
  .nav-cb:checked ~ nav.main .navmenu.on summary::after { right: 26px; }
  .nav-cb:checked ~ nav.main .navpanel { position: static; margin: -4px 0 12px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; gap: 10px; }
  .nav-cb:checked ~ nav.main .navpanel.np-cols { grid-template-columns: 1fr 1fr; }
  .nav-cb:checked ~ nav.main .navpanel.np-cols > div:first-child { grid-column: 1 / -1; }
  .nav-cb:checked ~ nav.main .navpanel a { padding: 9px 10px; }
  .nav-cb:checked ~ nav.main .np-h { padding: 4px 10px 4px; }
}

/* 首页标题右侧的小黑屏：上面是溢价率刻度尺，下面是一行快速换算（提交到换算页，没有脚本也能用）。 */
.hero-card { position: relative; display: grid; gap: 16px; padding: 20px; border-radius: 18px; min-width: 0; background: #0B0C0F;
  box-shadow: inset 0 0 0 1px var(--screen-edge), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.hero-card .scan { height: 70px; }
.hc-prem { display: grid; gap: 8px; text-decoration: none; color: var(--screen-ink); }
.hc-prem:hover .hc-k { color: var(--led); }
.hc-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--screen-label); transition: color 0.2s ease; }
.hc-v { display: flex; align-items: baseline; gap: 10px; }
.hc-v b { font: 700 clamp(30px, 3vw, 40px)/1 var(--mono); letter-spacing: 0.01em; color: var(--led); text-shadow: 0 0 18px rgba(255, 176, 0, 0.45); }
.hc-tag { font: 500 12px/1 var(--sans); color: var(--screen-label); padding: 4px 8px; border: 1px solid var(--screen-edge); border-radius: 999px; }
.hc-g { display: grid; gap: 2px; }
.hc-g .gauge { max-width: none; width: 100%; }
/* 刻度尺左右各留 6 个单位（共 168）：标签按同样的比例对齐到 −2%、0、+2% 三根刻度 */
.hc-g .scale { display: flex; justify-content: space-between; padding: 0 calc(100% * 6 / 168); font: 400 10px/1 var(--mono); color: var(--screen-label); letter-spacing: 0.04em; }
.hc-g .scale span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.hc-sub { font: 400 12px/1.4 var(--mono); color: var(--screen-label); }
.hc-calc { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--screen-edge); }
.hc-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.hc-calc select, .hc-calc input { height: 42px; min-width: 0; padding: 0 12px; border-radius: 10px; border: 1px solid var(--screen-edge); background: #111316; color: var(--screen-ink);
  font: 400 14px/1 var(--sans); }
.hc-calc input { font-family: var(--mono); }
.hc-calc input::placeholder { color: var(--screen-label); }
.hc-calc select:focus-visible, .hc-calc input:focus-visible { outline: 2px solid var(--led); outline-offset: 1px; }
.hc-go { height: 42px; border: 0; border-radius: 999px; background: var(--led); color: #0E0F11; font: 600 14px/1 var(--sans); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.15s ease; }
.hc-go:hover { box-shadow: 0 6px 22px -8px rgba(255, 176, 0, 0.8); }
.hc-go:active { transform: scale(0.98); }
@media (min-width: 1000px) {
  .stage-head.has-side { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
  .stage-head.has-side > .eyebrow, .stage-head.has-side > .page-title, .stage-head.has-side > .lede { grid-column: 1; }
  .stage-head.has-side > .hero-card { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}

/* 文章目录下面的一块小牌价屏：只显示价格，链到首页的三家对比，文章里不放交易所按钮。 */
.toc-quote { display: grid; gap: 6px; margin-top: 28px; padding: 16px 18px; border-radius: 14px; background: var(--screen); color: var(--screen-ink);
  text-decoration: none; box-shadow: inset 0 0 0 1px var(--screen-edge), 0 18px 40px -24px rgba(0, 0, 0, 0.55); transition: transform 0.2s ease; }
/* .toc a 会把它变成 display: block，这里写成 a.toc-quote 把网格要回来。 */
.toc a.toc-quote, .toc a.toc-quote:hover { display: grid; color: var(--screen-ink); padding: 16px 18px; }
.toc-quote:hover { transform: translateY(-2px); }
.tq-h { display: flex; align-items: center; gap: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--screen-label); }
.tq-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--led-green); box-shadow: 0 0 8px var(--led-green); }
.tq-p { font: 700 26px/1.1 var(--mono); letter-spacing: 0.02em; color: var(--screen-ink); }
.tq-p .hot { color: var(--led); text-shadow: 0 0 14px rgba(255, 176, 0, 0.45); }
.tq-p .sl { margin: 0 6px; color: var(--screen-label); font-weight: 400; }
.tq-l { font: 400 11px/1.4 var(--mono); color: var(--screen-label); }
.tq-go { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--screen-edge); font: 500 13px/1.4 var(--sans); color: var(--led); }
.toc-quote:hover .tq-go { text-decoration: underline; }
/* 同一块牌价屏也放在文章末尾：手机上目录收起看不到侧栏，桌面上有侧栏时这块隐藏。 */
.end-quote { margin-top: 48px; max-width: 360px; }
@media (min-width: 1020px) { .has-toc .end-quote { display: none; } }

/* 首页的新手入口：四步阅读顺序，每步一张卡片。 */
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.start-steps a { display: grid; gap: 8px; align-content: start; height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease; }
.start-steps a:hover { border-color: var(--ink); transform: translateY(-2px); }
.start-steps .step-n { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
.start-steps b { font-size: 18px; line-height: 1.3; }
.start-steps .t { font-size: 15px; line-height: 1.5; }
.start-steps .m { font: 400 12px/1.5 var(--sans); color: var(--muted); }

/* 手机上步骤标题旁边放不下说明，换到下一行。 */
@media (max-width: 719px) { .step .block-head .aside { flex-basis: 100%; } }

/* 交易所官方标志：名字前面一个小圆角方块，图在 static/ex/。 */
.exn { display: inline-flex; align-items: center; gap: 7px; }
.by.exn { display: flex; }
.exm { flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 5px; background: var(--hover) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.by .exm, .muted .exm { width: 14px; height: 14px; border-radius: 4px; }
.screen .exm { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.exm[data-ex="binance"] { background-image: url(/static/ex/binance.png); }
.exm[data-ex="okx"] { background-image: url(/static/ex/okx.png); }
.exm[data-ex="htx"] { background-image: url(/static/ex/htx.png); }
.page-title .exm-lg { width: 0.82em; height: 0.82em; border-radius: 0.2em; margin-right: 0.26em; vertical-align: -0.04em; }

/* 交易所注册按钮和说明。按钮只在交易所页和首页对比表出现，文章里没有。 */
.join-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.btn-join { display: inline-flex; align-items: center; gap: 4px; padding: 10px 20px; border-radius: 999px; background: var(--led); color: #0E0F11;
  font: 600 14px/1.2 var(--sans); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease; }
/* 写成 a.btn-join 并带上 .stage：黑屏里的链接悬停会变琥珀色（.stage a:hover），和按钮底色一样，文字就看不见了。 */
.stage a.btn-join, .stage a.btn-join:hover, a.btn-join:hover { color: #0E0F11; }
.btn-join:hover { box-shadow: 0 6px 22px -8px rgba(255, 176, 0, 0.8); }
.btn-join:active { transform: scale(0.98); }
.contact { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.th-sub { display: block; margin-top: 2px; font-weight: 400; font-size: 10px; letter-spacing: 0.04em; color: var(--muted); }
.join-note { font: 400 12px/1.6 var(--sans); color: var(--muted); max-width: 44ch; }
.join-link { font-size: 13px; white-space: nowrap; color: var(--accent); text-decoration: none; }
.join-link:hover { text-decoration: underline; }

/* 新手栏目的阅读顺序：每一步前面一个小黑屏上的琥珀色步数（这是阅读顺序，不是编号分节） */
.step .block-head h2 { display: flex; align-items: center; gap: 14px; }
.step-n { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--screen); color: var(--led);
  font: 700 15px/1 var(--mono); letter-spacing: 0.04em; box-shadow: inset 0 0 0 1px var(--screen-edge), 0 0 18px -6px rgba(255, 176, 0, 0.6); }
section.block.step { margin-top: clamp(48px, 6vw, 80px); }

/* 页脚收尾：一块通栏的 LED 招牌。灯珠格子和牌价数字是同一套画法：亮灯是字母，暗灯铺满整块屏。
   coin 暗一些、kiki 亮一些，kiki 两个 i 上的点是琥珀色，和页头字标一致。 */
footer.foot { padding-bottom: 0; }
.foot-sign { width: 100vw; margin: clamp(40px, 6vw, 72px) 0 0 calc(50% - 50vw); background: var(--screen); border-top: 1px solid var(--screen-line);
  padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 4.5vw, 64px); }
.foot-sign .wrap { display: grid; gap: 18px; justify-items: center; }
.foot-sign .sign { display: block; width: 100%; max-width: 920px; height: auto; }
.sign-off { stroke: #16181B; }
.sign-a { stroke: #8C9097; }
.sign-b { stroke: var(--screen-hi); }
.sign-amber { stroke: var(--led); }
.sign-lit .halo { opacity: 0.14; }
.sign-lit .sign-amber.halo { opacity: 0.3; }

/* ══ v3 装饰与图形层：行情滚动条、点阵图标、仪表、屏幕装饰 ══════════════════
   放在基础样式之后、动效之前。动画一律写在最后的「不减少动态效果」区块里。 */

/* 行情滚动条：页头下面一条黑色的行情带，两套主题下都是屏的颜色 */
.ticker { position: relative; background: var(--screen); color: var(--screen-label); border-bottom: 1px solid var(--screen-line); overflow: hidden;
  font: 500 12px/1 var(--mono); letter-spacing: 0.04em; }
/* 两端渐隐：用和屏同色的遮片盖住，不用遮罩（遮罩会把后面的页面底色透出来） */
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--screen), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--screen), transparent); }
.ticker-track { display: inline-flex; white-space: nowrap; padding: 10px 0; will-change: transform; }
.ti { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 20px; border-right: 1px solid var(--screen-line); }
.ti b { color: var(--screen-ink); font-weight: 700; font-size: 13px; letter-spacing: 0; }
.ti.hot b { color: var(--led); }
body:has(.stage) .ticker { border-bottom-color: transparent; }

/* 首屏眉标：LIVE · USDT / CNY · C2C */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--led); }
.eyebrow .cn { font: 500 12px/1 var(--sans); letter-spacing: 0.02em; text-transform: none; color: var(--screen-label); }
.eyebrow .sep { width: 14px; height: 1px; background: var(--screen-edge); }
.eyebrow .pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--led-green); box-shadow: 0 0 8px var(--led-green); }
.eyebrow .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--led-green); opacity: 0; }

/* 首屏的动态点阵（site.js 画在 canvas 上），压在静态点阵纹理上面 */
.stage { overflow: clip; }
.stage-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 60% at 8% 0%, rgba(64, 120, 255, 0.07), transparent 70%); }

/* 牌价屏的取景角标和扫描线 */
.stage .board::before, .stage .board::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; border: 0 solid var(--led); opacity: 0.7; }
.stage .board::before { left: -12px; top: -14px; border-left-width: 1px; border-top-width: 1px; }
.stage .board::after { right: -12px; bottom: -12px; border-right-width: 1px; border-bottom-width: 1px; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 110px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 176, 0, 0.035) 60%, rgba(255, 176, 0, 0.1)); border-bottom: 1px solid rgba(255, 176, 0, 0.4); }

/* 屏底的四格仪表：两个参考汇率、溢价刻度尺、三家报价位置 */
.board-foot.inst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-foot.inst > div:nth-child(3), .board-foot.inst > div:nth-child(4) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--screen-line); }
.stage .board-foot.inst > div:nth-child(3), .stage .board-foot.inst > div:nth-child(4) { padding-left: 0; margin-top: 16px; }
.board-foot.inst dt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.board-foot .scale { font-size: 10px; opacity: 0.7; }
.board-foot .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.04em; text-transform: none; }
.board-foot .lg i { width: 6px; height: 6px; border-radius: 50%; background: var(--screen-ink); margin-left: 6px; }
.board-foot .lg i.b { background: var(--led); }
.i-gauge dd { display: flex; align-items: center; gap: 16px; }
.gauge { flex: 1 1 auto; display: block; min-width: 0; max-width: 260px; height: auto; overflow: visible; }
.gauge .t { stroke: var(--screen-edge); stroke-width: 1; }
.gauge .t.major { stroke: #4B5057; }
.gauge .t.zero { stroke: var(--screen-label); stroke-width: 1.5; }
.gauge .dot { fill: var(--led); }
.gauge .halo { fill: var(--led); opacity: 0.22; transform-box: fill-box; transform-origin: center; }
.i-plot dd { white-space: normal; margin-top: 8px; }
.dotplot { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.dotplot text { fill: var(--screen-label); font: 500 9.5px var(--sans); letter-spacing: 0; }
.dotplot .track { stroke: var(--screen-line); stroke-width: 1; }
.dotplot .span { stroke: var(--led); stroke-width: 2; opacity: 0.35; }
.dotplot .s { fill: var(--screen-ink); }
.dotplot .b { fill: var(--led); }

/* 点阵小图标：一块小黑屏上的 7×7 灯珠 */
.pi { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--screen); color: var(--led);
  box-shadow: inset 0 0 0 1px var(--screen-edge); }
.pi svg { display: block; width: 24px; height: 24px; filter: drop-shadow(0 0 2px rgba(255, 176, 0, 0.45)); }

/* 文章条目：左边一块点阵图标，悬停时一团琥珀色的光跟着指针走 */
.card { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; }
.card > .pi { grid-column: 1; grid-row: 1 / span 4; align-self: start; margin-top: 2px; }
.card > :not(.pi) { grid-column: 2; }
.card::after { grid-column: 3; }
.card::before { content: ""; position: absolute; inset: 0 -14px; z-index: -1; border-radius: 14px; opacity: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%); }
.card:hover::before { opacity: 1; }

/* 要点格子：图标、一句标题、一句解释 */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.tiles > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.tiles .pi { grid-row: 1 / span 2; }
.tiles b { font-size: 17px; letter-spacing: -0.01em; line-height: 1.4; }
.tiles li > span:not(.pi) { grid-column: 2; font-size: 14px; line-height: 1.65; color: var(--muted); }
.tiles a { color: var(--accent); white-space: nowrap; }

/* 折叠的说明：默认只露一行，点开才是长文字 */
details.more { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 62em; }
details.more summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; font-size: 14px; line-height: 1; color: var(--accent); }
details.more[open] summary::before { content: "−"; }
details.more summary:hover { color: var(--ink); border-color: var(--ink); }
details.more p { margin: 12px 0 0; }

/* Telegram：一条深色的屏 */
.tg.screen { grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; padding: 24px 22px; border: 1px solid var(--screen-edge); }
.tg.screen b { color: var(--screen-hi); }
.tg.screen span, .tg.screen .small.muted { color: var(--screen-label); }
.tg.screen .pi { width: 52px; height: 52px; border-radius: 14px; background: var(--screen-2); position: relative; }
.tg.screen .pi svg { width: 30px; height: 30px; }
.tg.screen > .btn, .tg.screen > .small { grid-column: 1 / -1; justify-self: start; }
.tg.screen .btn { border-color: var(--led); color: var(--led); }
.tg.screen .btn:hover { background: var(--led); color: #111; }
.tg.screen .small.muted { padding: 7px 14px; border: 1px dashed var(--screen-edge); border-radius: 999px; }

/* 纸面的装饰：分节粗线左端一小段琥珀色；报头和文章标题右上角一片渐隐的点阵 */
.block-head { position: relative; }
.block-head::before { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 3px; background: var(--accent); }
.masthead, .article-head { position: relative; isolation: isolate; }
.masthead::before, .article-head::before { content: ""; position: absolute; z-index: -1; right: calc(-1 * var(--gut)); top: 0; width: min(56%, 620px); height: 100%; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in oklab, var(--ink) 26%, transparent) 0 1.1px, transparent 1.5px); background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000, transparent 68%); mask-image: radial-gradient(120% 110% at 100% 0%, #000, transparent 68%); }


.wide-cell { display: none; }
@media (min-width: 720px) {
  .stage-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .stage-head .page-title { max-width: 14em; }
  .stage-head .lede { grid-column: 1; justify-self: start; max-width: 38em; padding-bottom: 0; font-size: 16px; }
  .stage-head .eyebrow { grid-column: 1; margin-bottom: -4px; }
  .tiles { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); }
  .tg.screen { grid-template-columns: auto minmax(0, 1fr) auto; padding: 28px 32px; }
  .tg.screen > .btn, .tg.screen > .small { grid-column: auto; justify-self: end; }
  table.data .wide-cell { display: table-cell; }
}
@media (min-width: 1000px) {
  .board-foot.inst { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.7fr); }
  .board-foot.inst > div:nth-child(3), .board-foot.inst > div:nth-child(4) { grid-column: auto; border-top: 0; border-left: 1px solid var(--screen-line); }
  .stage .board-foot.inst > div:nth-child(3), .stage .board-foot.inst > div:nth-child(4) { padding-left: 20px; margin-top: 0; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-bottom: 1px solid var(--line); }
  .tiles > li { grid-template-columns: 1fr; padding: 26px 24px 28px 0; border-bottom: 0; }
  .tiles > li + li { padding-left: 24px; border-left: 1px solid var(--line); }
  .tiles .pi { grid-row: auto; margin-bottom: 14px; }
  .tiles li > span:not(.pi) { grid-column: 1; }
}

/* ── 动效：全部在「不减少动态效果」时才开 ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* 跨页面过渡：页面之间淡入淡出，页头不动 */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.18s ease-out both vt-out; }
  ::view-transition-new(root) { animation: 0.32s var(--ease) both vt-in; }
  .top { view-transition-name: top; }
  html.vt-theme .top { view-transition-name: none; }
  html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  html.vt-theme::view-transition-new(root) { z-index: 2; }

  /* 开屏：先看到熄灭的 8，数字一格一格点亮，像牌价屏通电 */
  .stage .led, .stage-nf .led, .result .led { animation: boot 1s linear both; }
  .stage .rates tbody tr:nth-child(1) td:nth-child(2) .led { animation-delay: 0.15s; }
  .stage .rates tbody tr:nth-child(1) td:nth-child(3) .led { animation-delay: 0.24s; }
  .stage .rates tbody tr:nth-child(2) td:nth-child(2) .led { animation-delay: 0.33s; }
  .stage .rates tbody tr:nth-child(2) td:nth-child(3) .led { animation-delay: 0.42s; }
  .stage .rates tbody tr:nth-child(3) td:nth-child(2) .led { animation-delay: 0.51s; }
  .stage .rates tbody tr:nth-child(3) td:nth-child(3) .led { animation-delay: 0.6s; }
  .stage .stats > div:nth-child(2) .led { animation-delay: 0.3s; }
  .stage .stats > div:nth-child(3) .led { animation-delay: 0.42s; }
  .stage-head > * { animation: rise 0.8s var(--ease) both; }
  .stage-head > :nth-child(2) { animation-delay: 0.08s; }
  .masthead > * { animation: rise 0.8s var(--ease) both; }
  .masthead > :nth-child(2) { animation-delay: 0.08s; }
  .masthead > :nth-child(3) { animation-delay: 0.14s; }
  .stage .board-foot > div { animation: fade 0.8s ease-out 0.7s both; }
  /* 采集到新一轮：变了的数字熄一下再亮（site.js 加 .tick） */
  .led.tick { animation: tick 0.7s linear both; }
  .stage .rates td.moved { background: rgba(255, 176, 0, 0.045); }
  .cycle i { transition: transform 1s linear; }
  .js .mini { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), max-width 0.45s var(--ease), margin-left 0.45s var(--ease); }
  .cycle.wait i { animation: wait 1.4s ease-in-out infinite; }
  /* 状态灯慢慢呼吸 */
  .live:not(.stale)::before, .status .dot:not(.stale)::before { animation: breathe 2.6s ease-in-out infinite; }

  /* 走势线从左往右画出来 */
  .scope svg { animation: draw 1.4s var(--ease) 0.2s both; }
  .brand .logo-coin { transition: transform 0.45s var(--ease); }
  .brand:hover .logo-coin { transform: translateX(-5px); }
  .brand:hover .wm-b .dot::before { animation: hop 0.5s var(--ease); }
  .brand:hover .wm-b .dot + .dot::before { animation-delay: 0.08s; }
  .prose figure.shot img { transition: transform 0.6s var(--ease); }
  .prose figure.shot a.shot-link:hover img { transform: scale(1.012); }
  .icon-btn svg { transition: transform 0.4s var(--ease); }
  .icon-btn:hover svg { transform: rotate(-20deg) scale(1.06); }
  .langmenu[open] ul { animation: drop 0.18s var(--ease); }

  /* 滚动进入视野时浮上来（浏览器支持滚动驱动动画时才有，不支持就直接显示） */
  @supports (animation-timeline: view()) {
    section.block, .cards > li, .tg, .related { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
    .scope svg { animation: draw linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  }
  @supports (animation-timeline: scroll()) {
    .readbar { animation: read linear both; animation-timeline: scroll(root); }
  }
}
@keyframes boot { 0%, 34% { color: transparent; } 35% { color: var(--led); } 41% { color: transparent; } 47%, 100% { color: var(--led); } }
@keyframes tick { 0%, 45% { color: transparent; } 46%, 100% { color: var(--led); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes hop { 0%, 100% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, -0.22em); } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes wait { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* v3 的动效：行情带、扫描线、脉冲、图标 */
@media (prefers-reduced-motion: no-preference) {
  .mh-icon .pi svg { animation: glowpulse 3.2s ease-in-out infinite; }
  .mh-screen .scan { animation: scan 7s cubic-bezier(0.45, 0, 0.55, 1) 0.8s infinite; }
  .foot-sign.arm .ch { opacity: 0; }
  .foot-sign.arm.on .ch { animation: chon 0.55s linear both; }
  .foot-sign.arm.on .ch:nth-child(2) { animation-delay: 0.1s; }
  .foot-sign.arm.on .ch:nth-child(3) { animation-delay: 0.2s; }
  .foot-sign.arm.on .ch:nth-child(4) { animation-delay: 0.3s; }
  .foot-sign.arm.on .ch:nth-child(5) { animation-delay: 0.4s; }
  .foot-sign.arm.on .ch:nth-child(6) { animation-delay: 0.5s; }
  .foot-sign.arm.on .ch:nth-child(7) { animation-delay: 0.6s; }
  .foot-sign.arm.on .ch:nth-child(8) { animation-delay: 0.7s; }
  .foot-sign.arm.on .sign-amber { animation: blink 0.9s steps(2, jump-none) 1.3s 2; }
  .ticker-track { animation: tick-x 70s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  .eyebrow .pulse::after { animation: ping-soft 2.4s ease-out infinite; }
  .scan { animation: scan 8s cubic-bezier(0.45, 0, 0.55, 1) 1.6s infinite; }
  .stage::before { animation: drift 18s ease-in-out infinite alternate; }
  .gauge .halo { animation: halo 2.4s ease-in-out infinite; }
  .card::before { transition: opacity 0.35s; }
  .card .pi, .tiles .pi { transition: transform 0.4s var(--ease), box-shadow 0.4s; }
  .card:hover .pi, .tiles li:hover .pi { transform: translateY(-2px) scale(1.06); box-shadow: inset 0 0 0 1px var(--led), 0 8px 20px -8px rgba(255, 176, 0, 0.55); }
  .block-head::before { transition: width 0.6s var(--ease); }
  section.block:hover > .block-head::before { width: 96px; }
  .tg.screen .pi::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--led); opacity: 0; animation: ping 2.6s ease-out infinite; }
  details.more[open] p { animation: rise 0.35s var(--ease) both; }
}
@keyframes glowpulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 176, 0, 0.4)); } 50% { filter: drop-shadow(0 0 9px rgba(255, 176, 0, 0.85)); } }
@keyframes chon { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0.15; } 60%, 100% { opacity: 1; } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.15; } 100% { opacity: 1; } }
@keyframes tick-x { to { transform: translateX(-50%); } }
@keyframes ping-soft { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes ping { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 55% { opacity: 1; } 62%, 100% { top: calc(100% - 110px); opacity: 0; } }
@keyframes drift { from { transform: translate3d(-4%, 2%, 0) scale(1); } to { transform: translate3d(5%, -3%, 0) scale(1.15); } }
@keyframes halo { 0%, 100% { transform: scale(0.8); opacity: 0.28; } 50% { transform: scale(1.35); opacity: 0.1; } }

/* 打印：只印内容，屏改成白底黑字的细框，省墨也看得清 */
@media print {
  .top .tools, nav.main, .mini, .ticker, .scan, .stage-fx, footer.foot .foot-grid > div:not(:first-child), .foot-sign, .toc, .toc-m, .theme-sw, .langmenu, .seg, .calc, .tg, .readbar { display: none !important; }
  .top { position: static; }
  body, .article, .card, .kv > div, .stage { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .stage { width: auto; margin: 0; padding: 0 0 16px; }
  .stage .page-title, .stage .lede { color: #000 !important; }
  .screen { background: #fff !important; background-image: none !important; color: #000 !important; border: 1px solid #000; box-shadow: none !important; }
  .screen *, .stage *, .led { color: #000 !important; -webkit-mask-image: none !important; mask-image: none !important; filter: none !important; animation: none !important; }
  .led .mx { display: none; }
  .led-t { position: static; width: auto; height: auto; clip-path: none; font: 700 1em/1.1 var(--mono); }
  .board-head, .board-foot, .result { background: #fff !important; }
  a { text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}