/* Drawing infographics (/infographics/): built by builder/minerals/build_infographics.py on top of minerals.css + guides.css. */
.ig-page { max-width: 920px; }
.ig-poster { margin: 36px auto 0; max-width: 820px; position: relative; }
.ig-poster svg { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9); background: #05080a; }
.ig-poster figcaption { font-size: 12.5px; color: var(--faint); margin-top: 12px; line-height: 1.5; text-align: center; }
.ig-poster.ig-live .ig-draw { will-change: stroke-dashoffset; }
.ig-download { margin: 36px auto 0; max-width: 820px; padding: 28px 28px 22px; border-radius: var(--r); position: relative; overflow: hidden; }
.ig-download::before { content: ""; position: absolute; inset: -40% auto auto -10%; width: 60%; height: 180%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220, 255, 60, .12), transparent 70%); }
.guide .ig-download h2 { margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 24px); }
.ig-download p { color: #c9d4d0; font-size: 15px; }
.ig-dl-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ig-dl-btns .btn { border: 0; cursor: pointer; font-family: inherit; }
.ig-dl-btns .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.ig-dl-note { margin-top: 14px; }
.ig-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 16px; }
.ig-facts > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(255, 255, 255, .025); }
.ig-facts dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ig-facts dd { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.ig-facts dd .src { display: block; margin-top: 4px; font-size: 12.5px; }
.ig-facts dd .src a, .ig-sources a { color: var(--muted); text-decoration-color: rgba(220, 255, 60, .4); text-underline-offset: 3px; }
.ig-facts dd .src a:hover, .ig-sources a:hover { color: var(--text); text-decoration-color: var(--lime); }
.guide p.ig-sources { font-size: 14px; color: var(--muted); }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.ig-card { display: grid; gap: 4px; padding: 18px 18px 16px; border-radius: 16px; text-decoration: none; color: var(--text); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.ig-card:hover { border-color: var(--lime); transform: translateY(-2px); }
.ig-card-sym { font-family: var(--head); font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--lime); line-height: 1; }
.ig-card-name { font-weight: 600; font-size: 16px; margin-top: 6px; }
.ig-card-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.ig-card-nums b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: var(--muted); }
.ig-grid + h2 { margin-top: 48px; }
@media (max-width: 640px) {
  .ig-poster { margin: 24px -16px 0; max-width: none; }
  .ig-poster svg { border-radius: 0; border-left: 0; border-right: 0; }
  .ig-download { padding: 22px 18px 18px; }
  .ig-dl-btns .btn { flex: 1 1 140px; justify-content: center; }
}