/* ══════════════════════════════════════════════════════════════════
   figart-r39.css — 市场页插图精细化重做(2026-09-27)

   只服务 markets.html / en/markets.html 的 #read、#trust、#start 三处图。
   图形语言直接接首页 home-v6.css 的 .fig-plate 与 fx-*;这里仅补 r39
   的版位、窄屏切换、#start 运行时图版，以及少量首页没有的语义件。

   配色零新增:只用 var(--c-*) + color-mix(),不占用问责专用强调色。
   ══════════════════════════════════════════════════════════════════ */

.page-markets #read,
.page-markets #trust,
.page-markets #start { position: relative; }

.page-markets #read {
  background-image:
    radial-gradient(54% 24% at 18% 28%, color-mix(in srgb, var(--c-primary-500) 14%, transparent), transparent 70%),
    radial-gradient(52% 40% at 92% 84%, color-mix(in srgb, var(--c-primary-600) 8%, transparent), transparent 72%);
}
.page-markets #trust {
  background-image:
    radial-gradient(56% 34% at 80% 47%, color-mix(in srgb, var(--c-primary-500) 13%, transparent), transparent 70%),
    radial-gradient(50% 38% at 6% 10%, color-mix(in srgb, var(--c-primary-600) 8%, transparent), transparent 74%);
}
.page-markets #start {
  background-image:
    radial-gradient(58% 36% at 22% 42%, color-mix(in srgb, var(--c-primary-500) 13%, transparent), transparent 72%),
    radial-gradient(48% 34% at 88% 22%, color-mix(in srgb, var(--c-primary-600) 8%, transparent), transparent 74%);
}

.page-markets #read .fg39,
.page-markets #trust .fg39 {
  margin-block: var(--s-8);
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: 924px;
}
@media (max-width: 1023.98px) {
  .page-markets #read .fg39,
  .page-markets #trust .fg39 { max-inline-size: none; padding: var(--s-5); }
}
@media (max-width: 767.98px) {
  .page-markets #read .fg39,
  .page-markets #trust .fg39 { padding: var(--s-4); margin-block: var(--s-7); }
}

.page-markets #read .fig-plate svg.fg39__tall,
.page-markets #trust .fig-plate svg.fg39__tall,
.page-markets #start .fig-plate svg.fg39__tall { display: none; }
@media (max-width: 767.98px) {
  .page-markets #read .fig-plate svg.fg39__wide,
  .page-markets #trust .fig-plate svg.fg39__wide,
  .page-markets #start .fig-plate svg.fg39__wide { display: none; }
  .page-markets #read .fig-plate svg.fg39__tall,
  .page-markets #trust .fig-plate svg.fg39__tall,
  .page-markets #start .fig-plate svg.fg39__tall { display: block; }
}

.page-markets #start .figmark.figmark--r14-wide { inline-size: 100%; }
.page-markets #start .figmark.figmark--r39-plate {
  margin-block: var(--s-7);
  margin-inline: auto;
  max-inline-size: 924px;
  padding: var(--s-6);
}
@media (max-width: 1023.98px) {
  .page-markets #start .figmark.figmark--r39-plate { max-inline-size: none; padding: var(--s-5); }
}
@media (max-width: 767.98px) {
  .page-markets #start .figmark.figmark--r39-plate { padding: var(--s-4); margin-block: var(--s-7); }
}

.page-markets #read .fx-filed,
.page-markets #trust .fx-filed,
.page-markets #start .fx-filed {
  fill: color-mix(in srgb, var(--c-border-strong) 20%, transparent);
  stroke: color-mix(in srgb, var(--c-border-strong) 48%, transparent);
  stroke-width: 1;
}
.page-markets #read .fx-slot,
.page-markets #trust .fx-slot,
.page-markets #start .fx-slot {
  fill: none;
  stroke: color-mix(in srgb, var(--c-border-strong) 44%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.page-markets #read .fx-divide,
.page-markets #trust .fx-divide,
.page-markets #start .fx-divide {
  stroke: color-mix(in srgb, var(--c-text) 34%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}
.page-markets #read .fx-wall,
.page-markets #trust .fx-wall,
.page-markets #start .fx-wall {
  fill: color-mix(in srgb, var(--c-text) 26%, transparent);
  stroke: none;
}
.page-markets #read .fg39-pill,
.page-markets #trust .fg39-pill,
.page-markets #start .fg39-pill {
  fill: color-mix(in srgb, var(--c-primary-500) 24%, transparent);
  stroke: color-mix(in srgb, var(--c-primary-600) 52%, transparent);
  stroke-width: 1;
}
.page-markets #read .fg39-human-panel,
.page-markets #trust .fg39-human-panel,
.page-markets #start .fg39-human-panel {
  fill: color-mix(in srgb, var(--c-surface) 82%, transparent);
  stroke: color-mix(in srgb, var(--c-border-strong) 56%, transparent);
  stroke-width: 1.1;
}
.page-markets #read .fg39-wave,
.page-markets #trust .fg39-wave,
.page-markets #start .fg39-wave {
  fill: none;
  stroke: color-mix(in srgb, var(--c-primary-600) 72%, transparent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-markets #read .fg39-grid,
.page-markets #trust .fg39-grid,
.page-markets #start .fg39-grid { opacity: .86; }

.page-markets #start .figmark .fx-shadow { fill: var(--c-canvas); opacity: .5; stroke: none; }
.page-markets #start .figmark .fx-panel {
  fill: color-mix(in srgb, var(--c-surface) 92%, transparent);
  stroke: color-mix(in srgb, var(--c-border-strong) 46%, transparent);
  stroke-width: 1.15;
}
.page-markets #start .figmark .fx-panel--key {
  stroke: color-mix(in srgb, var(--c-primary-600) 58%, transparent);
  stroke-width: 1.4;
}
.page-markets #start .figmark .fx-grid { stroke: var(--c-border-strong); stroke-width: 1; opacity: .14; }
.page-markets #start .figmark .fx-hair {
  stroke: var(--c-border-strong);
  stroke-width: 1;
  fill: none;
  opacity: .45;
  stroke-linecap: round;
}
.page-markets #start .figmark .fx-line-soft {
  stroke: var(--c-border-strong);
  stroke-width: 1.15;
  fill: none;
  opacity: .52;
  stroke-linecap: round;
}
.page-markets #start .figmark .fx-key-g {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-markets #start .figmark .fx-ring { fill: none; stroke: var(--c-primary-600); stroke-width: 1.5; }
.page-markets #start .figmark .fx-dot { fill: var(--c-primary-600); stroke: none; }
.page-markets #start .figmark .fx-coin {
  fill: color-mix(in srgb, var(--c-surface) 88%, transparent);
  stroke: color-mix(in srgb, var(--c-border-strong) 52%, transparent);
  stroke-width: 1.1;
}
.page-markets #start .figmark .fx-coin-rim {
  fill: none;
  stroke: color-mix(in srgb, var(--c-border-strong) 46%, transparent);
  stroke-width: 1;
}
.page-markets #start .figmark .fx-ring-track { stroke: color-mix(in srgb, var(--c-border-strong) 24%, transparent); }
.page-markets #start .figmark .fx-ring-seg { stroke: color-mix(in srgb, var(--c-border-strong) 58%, transparent); }