/* hybnomic.com/insights (마켓 인사이트): copied from /feed, with the site header on top. Always light (data-theme="light" on <html>), whatever the phone uses. Grouped screen (cards on bg-grouped), Compact type (trading),
   Korean market colours (red up, blue down) where the user ruled them charts (2026-10-20): price moves,
   the fear & greed gauge, futures long/short, ETF flows, trader P&L and long/short, and the metric
   changes (stablecoin, DeFi, Korea premium). Tokens from design-system.css.
   Sections are 32 apart, not the 64 of CLAUDE.md §4: a dense market page; revisit as it develops. */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg-grouped);
}
body {
  margin: 0;
  background: var(--bg-grouped);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
:lang(ko) {
  word-break: keep-all;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Phone width even on a desktop browser */
.fd {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-16) var(--space-40);
  padding-top: max(var(--space-24), env(safe-area-inset-top));
  padding-bottom: max(var(--space-40), env(safe-area-inset-bottom));
}

.fd-head h1,
.fd-sec h2 {
  text-wrap: balance;
}
.fd-head h1 {
  font-size: var(--text-title-1-size);
  line-height: var(--text-title-1-line);
  font-weight: var(--text-title-1-weight);
  letter-spacing: var(--tracking-title);
}
.fd-updated {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
}

/* ---- freshness: a ring that empties toward the next refresh, then the data's time ---- */
.fd-fresh {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Ring and its seconds share one square box, centred on each other */
.fd-ring-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.fd-ring-box > * {
  grid-area: 1 / 1;
}
.fd-ring {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}
.fd-ring circle {
  fill: none;
  stroke-width: 2;
}
/* Centred on the ink, not the line box: Pretendard's ascent (10) and descent (3) are uneven, so a
   plain line box sat the digits 0.44 px high, and tracking added after the last digit pushed them
   0.28 px right. text-box trims the box to cap height and baseline (the digits' own height). */
.fd-ring-num {
  color: var(--text-primary);
  font-size: var(--text-caption-2-size);
  line-height: 1;
  font-weight: 600;
  /* Proportional, not tabular: a tabular "1" is padded 2 px wider than its stroke, which pulled
     11-19 off centre; proportional figures hug their ink (within 0.36 px for 1-30). The ring's
     box is fixed, so the width changing each second moves nothing around it. */
  font-variant-numeric: proportional-nums;
  text-box: trim-both cap alphabetic;
}
.fd-ring-track {
  stroke: var(--fill-default);
}
.fd-ring-left {
  stroke: var(--text-secondary);
  stroke-dasharray: 100;
  transition: stroke-dashoffset 1s linear;
}
/* Loading: a quarter arc turning */
.fd-ring.is-busy .fd-ring-left {
  stroke-dashoffset: 75 !important; /* beats the inline countdown offset while loading */
  transition: none;
}
.fd-ring.is-busy {
  animation: fd-ring-spin 0.9s linear infinite;
}
@keyframes fd-ring-spin {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fd-ring-left {
    transition: none;
  }
  .fd-ring.is-busy {
    animation: none;
  }
}
.fd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shown only when refreshing fails: the shared warning triangle + body text */
.fd-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-primary);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
  font-weight: 600;
  white-space: nowrap;
}
.fd-live:empty {
  display: none;
}

/* The bar that sticks once the head has scrolled away: material bar + bottom separator */
.fd-sticky {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: env(safe-area-inset-top) var(--space-16) 0;
  background: var(--material-bar);
  -webkit-backdrop-filter: var(--blur-bar);
  backdrop-filter: var(--blur-bar);
  border-bottom: var(--stroke-width-hairline) solid var(--stroke-separator);
  transform: translateY(-100%);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.fd-sticky.is-on {
  transform: none;
}
.fd-sticky-in {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: calc(480px - var(--space-32));
  min-height: 48px;
  font-size: var(--text-footnote-size);
}
.fd-sticky-sec {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-line);
  font-weight: 700;
}
.fd-sticky-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
}
@media (prefers-reduced-transparency: reduce) {
  .fd-sticky {
    background: var(--surface-card);
  }
}

.fd-sec {
  margin-top: var(--space-32);
}
.fd-sec h2 {
  font-size: var(--text-title-3-size);
  line-height: var(--text-title-3-line);
  font-weight: var(--text-title-3-weight);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-12);
}
.fd-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.fd-sec-head h2 {
  margin-bottom: 0;
}
.fd-lead {
  color: var(--text-secondary);
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-line);
  margin: calc(var(--space-4) * -1) 0 var(--space-12);
  text-wrap: pretty;
}
.fd-note {
  margin-top: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  text-wrap: pretty;
}
.fd-body {
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-line);
  text-wrap: pretty;
}

/* Cards sit on the grouped background and are told apart by colour alone */
.fd-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
}
.fd-stack {
  display: grid;
  gap: var(--space-16);
}
.fd-empty {
  padding: var(--space-20);
  color: var(--text-secondary);
  font-size: var(--text-subhead-size);
}

/* ---- rows ---- */
.fd-list {
  padding: var(--space-8) var(--space-20);
}
.fd-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 60px;
  padding: var(--space-8) 0;
}
.fd-row + .fd-row {
  border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
}
.fd-row.fd-empty {
  padding: var(--space-16) 0;
}
/* Price lists are one table: the rows share the list's columns (subgrid), so names start, prices end
   and charts start on the same line in every row. coin | name | price over change | 24h chart */
.fd-table {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 88px;
  column-gap: var(--space-12);
}
/* Head and body of the majors table sit on the card's columns too */
.fd-table > .fd-thead,
.fd-table > .fd-tbody,
.fd-tbody > .fd-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}
/* Column labels (the sort is the segmented control in the section head) */
.fd-thead {
  min-height: 36px;
  border-bottom: var(--stroke-width-hairline) solid var(--stroke-separator);
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  white-space: nowrap;
}
.fd-th-price {
  justify-self: end;
}
.fd-th-coin {
  grid-column: 1 / 3;
}
.fd-coin {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
}
.fd-coin.is-text {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--fill-subtle);
  font-weight: 600;
}
/* An image from the API sits in the letter's cell (hidden until it has loaded and been measured)
   and removes itself if it fails. Round badges fill the circle; bare marks sit at 62% on a filled
   disc (fill, never a stroke ring), so every coin reads as the same circle. */
.fd-coin.is-text > * {
  grid-area: 1 / 1;
}
.fd-coin.is-text img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}
.fd-coin.has-img img {
  visibility: visible;
}
.fd-coin.has-img > span {
  visibility: hidden;
}
.fd-coin.is-badge {
  background: none;
}
.fd-coin.is-mark {
  background: var(--fill-subtle);
}
.fd-coin.is-mark img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}
.fd-coin.is-s {
  width: 28px;
  height: 28px;
  font-size: var(--text-footnote-size);
}
.fd-coin.is-l {
  width: 40px;
  height: 40px;
}
.fd-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.fd-name b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-name small,
.fd-price small,
.fd-weight small {
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  white-space: nowrap;
}
.fd-price,
.fd-weight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fd-price b,
.fd-weight b {
  font-weight: 600;
}
.fd-move {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fd-move.is-up {
  color: var(--market-up);
}
.fd-move.is-down {
  color: var(--market-down);
}
.fd-move.is-flat {
  color: var(--text-secondary);
}
/* Signed market numbers in the metric cards (user ruled them market moves, 2026-10-20) */
.fd-mk.is-up {
  color: var(--market-up);
}
.fd-mk.is-down {
  color: var(--market-down);
}
.fd-price b.is-up {
  color: var(--market-up);
}
.fd-price b.is-down {
  color: var(--market-down);
}
/* 24h line, the previous close dotted, a soft area under the line */
.fd-spark {
  --spark: var(--text-secondary);
  display: block;
  width: 100%;
  height: 32px;
  overflow: visible;
}
.fd-spark.is-up {
  --spark: var(--market-up);
}
.fd-spark.is-down {
  --spark: var(--market-down);
}
.fd-spark polyline {
  fill: none;
  stroke: var(--spark);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fd-spark-base {
  stroke: var(--stroke-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
.fd-spark-top {
  stop-color: var(--spark);
  stop-opacity: 0.16;
}
.fd-spark-end {
  stop-color: var(--spark);
  stop-opacity: 0;
}
.fd-rank {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  font-size: var(--text-footnote-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fd-rank.is-big {
  width: 32px;
  height: 32px;
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  font-size: var(--text-subhead-size);
}

.fd-skel {
  background: linear-gradient(90deg, var(--fill-faint), var(--fill-subtle), var(--fill-faint));
  background-size: 200% 100%;
  border-radius: var(--radius-s);
  margin: var(--space-8) 0;
  min-height: 44px;
  animation: fd-skel 1.2s linear infinite;
}
.fd-row.fd-skel + .fd-row.fd-skel {
  border-top: 0;
}
@keyframes fd-skel {
  to {
    background-position: -200% 0;
  }
}

/* ---- movers: rank · mark · name over symbol · change over price ---- */
.fd-mv {
  padding: var(--space-8) var(--space-20);
}
.fd-mv li {
  display: grid;
  grid-template-columns: 16px 32px minmax(0, 1fr) auto;
  column-gap: var(--space-12);
  align-items: center;
  min-height: 64px;
  padding: var(--space-8) 0;
}
.fd-mv li + li {
  border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
}
.fd-mv li.fd-skel {
  display: block;
}
.fd-mv-rank {
  color: var(--text-secondary);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fd-mv-name,
.fd-mv-num {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fd-mv-num {
  align-items: flex-end;
  text-align: right;
}
.fd-mv-name b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-mv-name small,
.fd-mv-num small {
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fd-mv-pct {
  font-size: var(--text-title-3-size);
  line-height: var(--text-title-3-line);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fd-mv-pct.is-up {
  color: var(--market-up);
}
.fd-mv-pct.is-down {
  color: var(--market-down);
}

/* ---- reveal: a card's first time on screen (.is-pre until then) ----
   Headline numbers rise in, sell/buy bars fill from the outer ends, the 24-hour line draws and
   its area fades in after it, ETF bars grow from the zero line one after another (30 ms apart).
   Longer than UI motion on purpose: it explains the chart once per card. */
.fd-metric-value,
.fd-ls-num b {
  transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard);
}
.is-pre .fd-metric-value,
.is-pre .fd-ls-num b {
  opacity: 0;
  transform: translateY(6px);
}
.fd-split i {
  transition: transform 700ms var(--ease-standard) 100ms;
}
.fd-split .is-short {
  transform-origin: left;
}
.fd-split .is-long {
  transform-origin: right;
}
.is-pre .fd-split i {
  transform: scaleX(0);
}
.fd-area polyline {
  stroke-dasharray: 100;
  transition: stroke-dashoffset 600ms var(--ease-standard) 200ms;
}
.is-pre .fd-area polyline {
  stroke-dashoffset: 100;
}
.fd-area .fd-spark-area {
  transition: opacity 300ms var(--ease-standard) 450ms;
}
.is-pre .fd-area .fd-spark-area {
  opacity: 0;
}
.fd-flow-bar i {
  transition: transform 400ms var(--ease-standard) calc(150ms + var(--i, 0) * 30ms);
}
.fd-flow-bar .is-in {
  transform-origin: bottom;
}
.fd-flow-bar .is-out {
  transform-origin: top;
}
.is-pre .fd-flow-bar i {
  transform: scaleY(0);
}

/* A value that changed since the last refresh: a short wash of its market colour behind it */
/* Prices and changes carry a little inline room for the wash at all times, so nothing shifts */
.fd-table .fd-price b,
.fd-mv-pct {
  padding-inline: var(--space-4);
  margin-inline: calc(var(--space-4) * -1);
}
.is-tick-up,
.is-tick-down {
  border-radius: var(--radius-xs);
  animation: fd-tick 800ms var(--ease-standard);
}
.is-tick-up {
  --tick: var(--market-up);
}
.is-tick-down {
  --tick: var(--market-down);
}
@keyframes fd-tick {
  from {
    background-color: color-mix(in oklab, var(--tick) 18%, transparent);
  }
  to {
    background-color: transparent;
  }
}

/* ---- segmented control ---- */
.fd-seg {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-s);
  background: var(--fill-subtle);
}
.fd-seg button {
  min-width: 56px;
  height: 28px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-xs);
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
/* The pill stays 28 high (Compact S); the touch area reaches 44 above and below it */
.fd-seg button {
  position: relative;
}
.fd-seg button::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-8) * -1) 0;
}
.fd-seg button[aria-selected="true"] {
  background: var(--surface-card);
  color: var(--text-primary);
}

/* ---- Fear & greed index (alternative.me) ----
   One scale from cold to hot built from tokens: market-down blue -> chart violet -> market-up red.
   The colour lives on the gauge, the band behind the value and the small legend dots (chart marks);
   labels and numbers stay in text colours. */
.fd-fx .fd-metric-top {
  margin-bottom: calc(var(--space-4) * -1);
}
.fd-fx {
  --fx-xfear: var(--market-down);
  --fx-fear: color-mix(in oklch, var(--market-down) 50%, var(--chart-3));
  --fx-neutral: var(--chart-3);
  --fx-greed: color-mix(in oklch, var(--chart-3) 50%, var(--market-up));
  --fx-xgreed: var(--market-up);
  padding: var(--space-20);
  display: grid;
  gap: var(--space-16);
}
.fd-fx .is-xfear { --fx: var(--fx-xfear); }
.fd-fx .is-fear { --fx: var(--fx-fear); }
.fd-fx .is-neutral { --fx: var(--fx-neutral); }
.fd-fx .is-greed { --fx: var(--fx-greed); }
.fd-fx .is-xgreed { --fx: var(--fx-xgreed); }
/* gauge: gradient arc, tick dots, a ring marker that sweeps to the value */
.fd-fx-gauge {
  position: relative;
}
.fd-fx-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.fd-fx-arc {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms var(--ease-standard);
}
.fd-fx-tick {
  fill: var(--fill-strong);
}
.fd-fx-marker {
  transform-box: view-box;
  transform: rotate(var(--deg));
  transition: transform 700ms var(--ease-standard) 100ms;
}
.fd-fx-marker circle {
  fill: var(--surface-card);
  stroke: var(--text-primary);
  stroke-width: 3;
}
.fd-fx.is-pre .fd-fx-arc {
  stroke-dashoffset: 100;
  transition: none;
}
.fd-fx.is-pre .fd-fx-marker {
  transform: rotate(0deg);
  transition: none;
}
.fd-fx-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-title);
}
.fd-fx-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--fx);
}
.fd-fx-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
  font-weight: 600;
  white-space: nowrap;
}

/* Five bands behind a large gauge, period rows below */
.fd-fx-gauge.is-large {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.fd-fx-band {
  fill: var(--fill-faint);
  transition: fill var(--motion-release) var(--ease-standard);
}
.fd-fx-band.is-on {
  fill: color-mix(in oklab, var(--fx) 14%, transparent);
}
/* Band names and 0 / 100: HTML centred on a point of the gauge */
.fd-fx-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  text-align: center;
  white-space: nowrap;
}
.fd-fx-tag.is-on {
  color: var(--text-primary);
  font-weight: 700;
}
.fd-fx-tag.is-axis {
  font-size: var(--text-caption-2-size);
  line-height: var(--text-caption-2-line);
  font-variant-numeric: tabular-nums;
}
.fd-fx-center {
  position: absolute;
  inset: auto 0 var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.fd-fx-gauge.is-large .fd-fx-num {
  font-size: var(--text-large-title-size);
  line-height: var(--text-large-title-line);
}
/* Past values in one row of three: period and number, then the same band badge as the centre */
.fd-fx-past {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: var(--space-16);
  border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
}
.fd-fx-past li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.fd-fx-past p {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
  white-space: nowrap;
}
.fd-fx-past p span {
  color: var(--text-secondary);
}
.fd-fx-past b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fd-center {
  text-align: center;
}
.fd-bars-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
}

/* ---- long/short ---- */
.fd-ls {
  display: grid;
  gap: var(--space-8);
}
.fd-ls-num {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.fd-ls-num > span {
  display: flex;
  flex-direction: column;
}
.fd-ls-num .is-long {
  align-items: flex-end;
}
.fd-ls-num small {
  font-size: var(--text-footnote-size);
  font-weight: 600;
}
.fd-ls-num b {
  font-size: var(--text-title-2-size);
  line-height: var(--text-title-2-line);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fd-ls-num .is-long {
  color: var(--market-up);
}
.fd-ls-num .is-short {
  color: var(--market-down);
}
.fd-split.is-large {
  height: 16px;
}
.fd-split.is-large i {
  border-radius: var(--radius-xs);
}
.fd-ls-chart {
  margin-top: var(--space-8);
}
.fd-area {
  height: 48px;
}

/* ---- ETF flows ---- */
.fd-flow-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-4);
}
.fd-flow-bars li {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}
.fd-flow-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 72px;
}
/* Zero line in the middle: inflows grow up from it, outflows down */
.fd-flow-bar::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  border-top: var(--stroke-width-hairline) solid var(--stroke-default);
}
.fd-flow-bar i {
  position: absolute;
  left: 15%;
  right: 15%;
  max-height: 50%;
  border-radius: var(--space-2);
}
.fd-flow-bar .is-in {
  bottom: 50%;
  background: var(--market-up);
}
.fd-flow-bar .is-out {
  top: 50%;
  background: var(--market-down);
}
.fd-flow-bars small {
  color: var(--text-secondary);
  font-size: var(--text-caption-2-size);
  line-height: var(--text-caption-2-line);
  font-variant-numeric: tabular-nums;
}
.fd-flow-legend {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
}
.fd-flow-legend .is-in {
  color: var(--market-up);
  font-weight: 600;
}
.fd-flow-legend .is-out {
  color: var(--market-down);
  font-weight: 600;
}

/* ---- onchain metrics ---- */
.fd-metric {
  padding: var(--space-20);
  display: grid;
  gap: var(--space-8);
}
.fd-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.fd-metric h3,
.fd-fx h3 {
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-line);
  font-weight: 600;
  color: var(--text-secondary);
}
.fd-metric-value {
  font-size: var(--text-title-2-size);
  line-height: var(--text-title-2-line);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
}
.fd-metric-sub {
  margin-top: calc(var(--space-8) * -1);
  color: var(--text-secondary);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
}
.fd-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  font-weight: 600;
  white-space: nowrap;
  background: var(--fill-subtle);
}
.fd-chip.is-caution {
  background: var(--warning-bg);
  color: var(--text-primary);
}
.fd-why summary {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-4);
  min-height: 32px;
  color: var(--text-secondary);
  font-size: var(--text-footnote-size);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.fd-why:not([open]) summary {
  margin-bottom: calc(var(--space-8) * -1);
}
.fd-why summary::-webkit-details-marker {
  display: none;
}
.fd-why p {
  padding: var(--space-12);
  border-radius: var(--radius-m);
  background: var(--fill-faint);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
}

/* Metric rows: name over change line, value over chip, a caret; the row opens in place */
.fd-mrows {
  padding: var(--space-4) var(--space-20);
}
.fd-mrow + .fd-mrow {
  border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
}
.fd-mrow summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  column-gap: var(--space-12);
  align-items: center;
  min-height: 64px;
  padding: var(--space-8) 0;
  list-style: none;
  cursor: pointer;
}
.fd-mrow summary::-webkit-details-marker {
  display: none;
}
.fd-mrow-name,
.fd-mrow-val {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fd-mrow-val {
  align-items: flex-end;
  gap: var(--space-4);
}
.fd-mrow-name b {
  font-weight: 600;
}
.fd-mrow-name small {
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  font-variant-numeric: tabular-nums;
}
.fd-mrow-val b {
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-line);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fd-mrow-caret {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: transform var(--motion-release) var(--ease-standard);
}
.fd-mrow details[open] .fd-mrow-caret {
  transform: rotate(180deg);
}
.fd-mrow-more {
  display: grid;
  gap: var(--space-12);
  padding-bottom: var(--space-16);
}
/* Only the explanation sits on a panel; the reading and the source stay plain lines */
.fd-mrow-more > p:not(.fd-body) {
  padding: var(--space-12);
  border-radius: var(--radius-m);
  background: var(--fill-faint);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
}

/* Icons sit in a square box the size of the icon */
.fd-ibox {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}
.fd-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ---- traders ---- */
/* The summary is information, not a page-head highlight: info status (tint + Fill icon + body text).
   The tint is mixed onto the card colour, not laid over the grey page, which turned it dusky navy. */
.fd-callout {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-l);
  background: color-mix(in oklab, var(--info-fill) 8%, var(--surface-card));
  color: var(--text-primary);
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-line);
  font-weight: 600;
}
.fd-callout .fd-ibox {
  width: 16px;
  height: 16px;
  color: var(--info-fill);
}
.fd-trader {
  padding: var(--space-20);
  display: grid;
  gap: var(--space-16);
}
.fd-trader-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
/* On a narrow phone the profile name wraps instead of pushing the P&L off the card */
.fd-trader-head .fd-name b {
  white-space: normal;
}
.fd-trader-head .fd-price b.is-up {
  color: var(--market-up);
}
.fd-trader-head .fd-price b.is-down {
  color: var(--market-down);
}
.fd-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* The three figures as rows in one faint panel: name left, value right, one line each */
.fd-facts {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-m);
  background: var(--fill-faint);
}
.fd-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
}
.fd-facts dt {
  color: var(--text-secondary);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
}
.fd-facts dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-line);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fd-facts dd small {
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  font-weight: 400;
}
.fd-split {
  display: flex;
  gap: var(--space-2);
  height: 8px;
}
.fd-split i {
  flex-basis: 0;
  min-width: 2px;
  border-radius: var(--radius-full);
}
.fd-split .is-long {
  background: var(--market-up);
}
.fd-split .is-short {
  background: var(--market-down);
}
.fd-split-legend {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--space-8) * -1);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  font-weight: 600;
}
.fd-split-legend .is-long {
  color: var(--market-up);
}
.fd-split-legend .is-short {
  color: var(--market-down);
}
.fd-positions {
  border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
}
.fd-pos {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 52px;
  padding: var(--space-8) 0;
}
.fd-pos + .fd-pos {
  border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
}
.fd-side {
  flex: none;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
  font-weight: 600;
}
.fd-side.is-long {
  color: var(--market-up);
  background: color-mix(in oklab, var(--market-up) 10%, transparent);
}
.fd-side.is-short {
  color: var(--market-down);
  background: color-mix(in oklab, var(--market-down) 10%, transparent);
}
.fd-weight {
  min-width: 72px;
}
/* Column head of an opened position list: the same three columns, in caption type */
.fd-pos.is-head {
  min-height: 0;
  padding: var(--space-8) 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
}
.fd-pos.is-head .fd-side {
  font-weight: 400;
}
.fd-pos.is-head + .fd-pos {
  border-top: 0;
}
/* Folded: the first rows show and the list fades out over the third, so there is visibly more */
.fd-positions.is-peek {
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
  mask-image: linear-gradient(to bottom, black 55%, transparent);
}
.fd-positions.is-peek + .fd-more {
  margin-top: calc(var(--space-12) * -1);
}
.fd-more {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: var(--control-m);
  border-radius: var(--radius-m);
  background: var(--fill-subtle);
  font-size: var(--text-subhead-size);
  font-weight: 600;
}
.fd-more .fd-ibox {
  width: 16px;
  height: 16px;
  transition: transform var(--motion-release) var(--ease-standard);
}
.fd-more .fd-ibox.is-open {
  transform: rotate(180deg);
}
.fd-more:active {
  transform: scale(var(--state-press-scale));
}

/* ---- footer: one "데이터 출처" link that opens every source, then the notice and © ---- */
html:root body .fd-sources summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--control-s);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
html:root body .fd-sources summary::-webkit-details-marker {
  display: none;
}
html:root body .fd-sources summary .fd-ibox {
  transition: transform 0.2s var(--ease-standard);
}
html:root body .fd-sources[open] summary .fd-ibox {
  transform: rotate(180deg);
}
html:root body .fd-sources ul {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
/* The ETF tracker is CC BY: its link stays visible */
html:root body .fd-sources a {
  color: inherit;
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  html:root body .fd-sources summary .fd-ibox {
    transition: none;
  }
}
.fd-foot {
  margin-top: var(--space-40);
  display: grid;
  gap: var(--space-16);
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
}

/* Phones 340-374 (most Android, 360): the eight-digit bitcoin price needs the room, so the
   mark, the line and the gaps get smaller and the names keep their width */
@media (max-width: 374px) {
  .fd-table {
    grid-template-columns: 28px minmax(0, 1fr) auto 56px;
    column-gap: var(--space-8);
  }
  .fd-table img.fd-coin,
  .fd-table .fd-coin {
    width: 28px;
    height: 28px;
  }
}
/* The narrowest phones (320): the 24-hour line gives way to the names; price and change stay */
@media (max-width: 339px) {
  .fd-table {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }
  .fd-table .fd-spark,
  .fd-thead > span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Movement goes; the colour wash on a changed value stays (it is not motion) */
  .fd-skel {
    animation: none;
  }
  .fd-sticky {
    transition: none;
  }
  .fd-fx-arc,
  .fd-fx-marker,
  .fd-fx-band,
  .fd-split i,
  .fd-metric-value,
  .fd-ls-num b,
  .fd-area polyline,
  .fd-area .fd-spark-area,
  .fd-flow-bar i {
    transition: none;
  }
  .fd-more,
  .fd-more .fd-ibox,
  .fd-mrow-caret {
    transition: none;
  }
}

/* Site header, as the credit engine's: logo = home, then the page links. It scrolls away with the
   page so the market bar (.fd-sticky) can take the top once the head has left the screen. */
.skip {
  position: fixed;
  left: var(--space-12);
  top: -100px;
  z-index: 100;
  padding: var(--space-12);
  background: var(--surface-card);
}
.skip:focus {
  top: var(--space-12);
}
html:root body .site-header {
  background: var(--surface-card);
  border-bottom: var(--stroke-width-hairline) solid var(--stroke-separator);
  padding-top: env(safe-area-inset-top);
}
html:root body .site-header-in {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: calc(80px - var(--stroke-width-hairline)); /* 80 with the hairline, as the landing and engine */
  padding: 0 max(clamp(20px, 4vw, 48px), calc((100% - 1200px) / 2));
}
html:root body .site-brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}
html:root body .site-brand img {
  display: block;
  width: auto;
  height: 26px;
}
html:root body .site-nav {
  display: flex;
  gap: var(--space-4);
}
html:root body .site-nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--control-m);
  padding: 0 var(--space-12);
  border-radius: var(--radius-m);
  color: var(--text-secondary);
  font-size: var(--text-subhead-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
html:root body .site-nav-link:hover {
  color: var(--text-primary);
  background-color: var(--fill-faint);
}
html:root body .site-nav-link[aria-current="page"] {
  color: var(--text-primary);
  background-color: var(--fill-subtle);
}
/* Language switch: the page links' style, a hairline before it (as the landing and credit engine) */
html:root body .site-lang {
  position: relative;
  gap: var(--space-4);
  margin-left: var(--space-12);
  border: 0;
  background-color: transparent;
  font-family: inherit;
  cursor: pointer;
}
html:root body .site-lang::before {
  content: "";
  position: absolute;
  left: calc(var(--space-8) * -1);
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--stroke-default);
}
html:root body .site-lang-icon {
  width: 16px;
  height: 16px;
}
html:root body .site-brand:focus-visible,
html:root body .site-nav-link:focus-visible {
  outline: var(--stroke-width-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-m);
}
/* Phones: two rows, as the landing and the credit engine. Row 1 the logo, row 2 the page links,
   their text on the logo's left edge.
   Row 2 is a tab bar: text links, the current page underlined on the header's hairline (no pills,
   which read heavy under the logo). 52 + 44 = 96 (+1 hairline). */
@media (max-width: 700px) {
  html:root body .site-header-in {
    flex-wrap: wrap;
    row-gap: 0;
    height: auto;
    padding: 0 var(--space-16);
  }
  html:root body .site-brand {
    height: 52px;
  }
  html:root body .site-brand img {
    height: 22px;
  }
  html:root body .site-nav {
    order: 3;
    width: 100%;
    gap: var(--space-24);
  }
  html:root body .site-nav .site-nav-link {
    position: relative;
    padding: 0;
    border-radius: 0;
  }
  html:root body .site-nav .site-nav-link:hover,
  html:root body .site-nav .site-nav-link[aria-current="page"] {
    background: none;
  }
  html:root body .site-nav .site-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset: auto 0 calc(var(--stroke-width-hairline) * -1);
    height: var(--stroke-width-focus);
    background: var(--text-primary);
  }
  html:root body .site-lang {
    margin-left: 0;
  }
  html:root body .site-lang::before {
    display: none;
  }
}

/* ===========================================================================================
   Tablet and desktop (768+): .dk, a market dashboard on the header's 1200 column. The phone
   column (.fd) hides. Tablet (768-1023) adjustments follow the desktop block. 12-column grid, cards 16 apart, sections 48 apart (a dense market page). Card inset 24.
   Tables carry the inset in their rows: 64-high rows, hairlines between them.
   =========================================================================================== */
.dk {
  display: none;
}
@media (min-width: 768px) {
  html:root body .fd {
    display: none;
  }
  html:root body .dk {
    display: block;
    padding: var(--space-40) max(clamp(20px, 4vw, 48px), calc((100% - 1200px) / 2)) var(--space-64);
  }
  /* The sticky bar lines up with the column */
  html:root body .fd-sticky {
    padding-left: max(clamp(20px, 4vw, 48px), calc((100% - 1200px) / 2));
    padding-right: max(clamp(20px, 4vw, 48px), calc((100% - 1200px) / 2));
  }
  html:root body .fd-sticky-in {
    max-width: none;
  }

  /* ---- head ---- */
  html:root body .dk-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-24);
  }
  html:root body .dk-head h1 {
    font-size: var(--text-large-title-size);
    line-height: var(--text-large-title-line);
    font-weight: var(--text-large-title-weight);
    letter-spacing: var(--tracking-title);
  }
  html:root body .dk-sub {
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-callout-size);
    line-height: var(--text-callout-line);
  }
  html:root body .dk-status {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--text-footnote-size);
    line-height: var(--text-footnote-line);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ---- summary strip: one card, five zones ---- */
  html:root body .dk-pulse {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: var(--space-24);
    padding: var(--space-4) 0;
  }
  html:root body .dk-pulse.is-sparse {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
  }
  html:root body .dk-kpi {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-20) var(--space-24);
  }
  html:root body .dk-kpi + .dk-kpi {
    border-left: var(--stroke-width-hairline) solid var(--stroke-separator);
  }
  html:root body .dk-kpi-label {
    color: var(--text-secondary);
    font-size: var(--text-footnote-size);
    line-height: var(--text-footnote-line);
    font-weight: 600;
  }
  html:root body .dk-kpi-value {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--text-title-2-size);
    line-height: var(--text-title-2-line);
    font-weight: 700;
    letter-spacing: var(--tracking-title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  html:root body .dk-kpi-value small {
    margin-left: 0;
    font-size: var(--text-subhead-size);
    font-weight: 600;
  }
  html:root body .dk-kpi-value .is-up {
    color: var(--market-up);
  }
  html:root body .dk-kpi-value .is-down {
    color: var(--market-down);
  }
  html:root body .dk-kpi-value .fd-fx-pill {
    letter-spacing: 0;
  }
  html:root body .dk-kpi-sub {
    color: var(--text-secondary);
    font-size: var(--text-footnote-size);
    line-height: var(--text-footnote-line);
  }
  html:root body .dk-kpi-spark {
    position: absolute;
    top: var(--space-20);
    right: var(--space-24);
    width: 64px;
  }
  html:root body .dk-kpi-spark .fd-spark {
    height: 20px;
  }
  /* The pill's dot colours come from the fear & greed scale */
  html:root body .dk-pulse {
    --fx-xfear: var(--market-down);
    --fx-fear: color-mix(in oklch, var(--market-down) 50%, var(--chart-3));
    --fx-neutral: var(--chart-3);
    --fx-greed: color-mix(in oklch, var(--chart-3) 50%, var(--market-up));
    --fx-xgreed: var(--market-up);
  }
  html:root body .dk-pulse .is-xfear { --fx: var(--fx-xfear); }
  html:root body .dk-pulse .is-fear { --fx: var(--fx-fear); }
  html:root body .dk-pulse .is-neutral { --fx: var(--fx-neutral); }
  html:root body .dk-pulse .is-greed { --fx: var(--fx-greed); }
  html:root body .dk-pulse .is-xgreed { --fx: var(--fx-xgreed); }

  /* ---- grid and sections ---- */
  html:root body .dk-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-16);
  }
  html:root body .dk-pulse + .dk-grid {
    margin-top: var(--space-48);
  }
  html:root body .dk-span-3 { grid-column: span 3; }
  html:root body .dk-span-4 { grid-column: span 4; }
  html:root body .dk-span-5 { grid-column: span 5; }
  html:root body .dk-span-6 { grid-column: span 6; }
  html:root body .dk-span-8 { grid-column: span 8; }
  html:root body .dk-span-12 { grid-column: span 12; }
  html:root body .dk-sec {
    margin-top: var(--space-48);
    min-width: 0;
  }
  html:root body .dk-grid > .dk-sec {
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }
  html:root body .dk-grid > .dk-sec > .fd-card {
    flex: 1;
  }
  html:root body .dk-sec-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-12);
    min-height: 32px;
    margin-bottom: var(--space-12);
  }
  html:root body .dk-sec h2 {
    font-size: var(--text-title-2-size);
    line-height: var(--text-title-2-line);
    font-weight: var(--text-title-2-weight);
    letter-spacing: var(--tracking-title);
  }
  html:root body .dk-hint {
    color: var(--text-secondary);
    font-size: var(--text-subhead-size);
    line-height: var(--text-subhead-line);
  }
  html:root body .dk-sec-head .fd-seg {
    margin-left: auto;
    align-self: center;
  }

  /* ---- tables ---- */
  html:root body .dk-table {
    padding: var(--space-4) var(--space-24) var(--space-8);
  }
  html:root body .dk-tr {
    display: grid;
    align-items: center;
    column-gap: var(--space-16);
    min-height: 64px;
  }
  html:root body .dk-tr.is-head {
    min-height: 40px;
    color: var(--text-secondary);
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
    font-weight: 600;
    border-bottom: var(--stroke-width-hairline) solid var(--stroke-separator);
  }
  html:root body .dk-table li + li,
  html:root body .dk-pos li + li {
    border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
  }
  html:root body .dk-tr.fd-skel {
    display: block;
    min-height: 48px;
  }
  html:root body .dk-coin {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-width: 0;
  }
  html:root body .dk-num {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  html:root body .dk-num b {
    font-weight: 600;
  }
  html:root body .dk-num b.is-up {
    color: var(--market-up);
  }
  html:root body .dk-num b.is-down {
    color: var(--market-down);
  }
  html:root body .dk-num small {
    color: var(--text-secondary);
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
  }
  html:root body .dk-num .fd-move {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
  }

  /* prices: coin · price · change · amount · 24h line */
  html:root body .dk-majors .dk-tr {
    grid-template-columns: minmax(160px, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr) 176px;
  }
  html:root body .dk-majors .dk-tr.is-head > :nth-child(n + 2):not(:last-child) {
    text-align: right;
  }
  html:root body .dk-majors .dk-num b {
    font-size: var(--text-headline-size);
    line-height: var(--text-headline-line);
  }
  html:root body .dk-chart .fd-spark {
    height: 36px;
  }

  /* movers: two zones in one card */
  html:root body .dk-movers {
    padding: var(--space-4) var(--space-24) var(--space-8);
  }
  html:root body .dk-mv-zone + .dk-mv-zone {
    border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
  }
  html:root body .dk-mv-zone h3 {
    padding: var(--space-12) 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
    font-weight: 600;
  }
  html:root body .dk-mv-zone li {
    display: grid;
    grid-template-columns: 16px 32px minmax(0, 1fr) auto;
    column-gap: var(--space-12);
    align-items: center;
    min-height: 60px;
  }
  html:root body .dk-mv-zone li + li {
    border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
  }
  html:root body .dk-mv-pct {
    font-size: var(--text-headline-size);
    line-height: var(--text-headline-line);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  html:root body .dk-mv-pct.is-up {
    color: var(--market-up);
  }
  html:root body .dk-mv-pct.is-down {
    color: var(--market-down);
  }

  /* ---- metric cards ---- */
  html:root body .dk .fd-metric,
  html:root body .dk .fd-fx {
    align-content: start;
    gap: var(--space-12);
    padding: var(--space-24);
  }
  html:root body .dk .fd-metric-sub {
    margin-top: calc(var(--space-8) * -1);
  }
  html:root body .dk-big {
    font-size: var(--text-title-1-size);
    line-height: var(--text-title-1-line);
  }
  html:root body .dk-mini-title {
    margin-top: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
    font-weight: 600;
  }
  html:root body .dk-line .fd-area {
    height: 80px;
  }
  html:root body .dk-fng .fd-fx-gauge.is-large {
    max-width: 320px;
  }
  /* fear & greed, last 30 days: one bar per day in its band's colour, today solid */
  html:root body .dk-hist-bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-2);
    height: 56px;
  }
  html:root body .dk-hist-bars li {
    display: flex;
    align-items: flex-end;
  }
  html:root body .dk-hist-bars i {
    width: 100%;
    border-radius: var(--space-2);
    background: var(--fx);
    opacity: 0.45;
  }
  html:root body .dk-hist-bars li:last-child i {
    opacity: 1;
  }
  html:root body .dk-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-16);
    border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
  }
  html:root body .dk-facts dt,
  html:root body .dk-compare dt {
    color: var(--text-secondary);
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
  }
  html:root body .dk-facts dd,
  html:root body .dk-compare dd {
    margin: 0;
    font-size: var(--text-headline-size);
    line-height: var(--text-headline-line);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  /* Korea premium: the two prices as bars on one scale */
  html:root body .dk-compare {
    display: grid;
    gap: var(--space-12);
    margin: var(--space-4) 0 0;
  }
  html:root body .dk-compare > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    row-gap: var(--space-4);
  }
  html:root body .dk-cbar {
    grid-column: 1 / -1;
    display: flex;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--fill-faint);
  }
  html:root body .dk-cbar i {
    border-radius: var(--radius-full);
    background: var(--chart-1);
  }
  html:root body .dk-cbar.is-ref i {
    background: var(--chart-5);
  }

  /* ETF: taller bars with each day's amount over its bar */
  html:root body .dk-flow .fd-flow-bars {
    grid-auto-columns: minmax(0, 1fr);
  }
  html:root body .dk-flow .fd-flow-bars li {
    min-width: 0;
  }
  html:root body .dk-flow .fd-flow-bar {
    height: 120px;
  }
  html:root body .dk-bar-val {
    font-size: var(--text-caption-2-size);
    line-height: var(--text-caption-2-line);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  html:root body .dk-bar-val.is-in {
    color: var(--market-up);
  }
  html:root body .dk-bar-val.is-out {
    color: var(--market-down);
  }

  /* ---- traders: one row per account, opening to its positions ---- */
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr {
    grid-template-columns: minmax(176px, 1.4fr) minmax(96px, 0.9fr) minmax(96px, 0.9fr) minmax(88px, 0.8fr) minmax(184px, 1.3fr) minmax(112px, 1.4fr) 112px;
    min-height: 80px;
  }
  html:root body .dk-traders > .dk-tr.is-head {
    min-height: 40px;
  }
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(n + 2):nth-child(-n + 4) {
    text-align: right;
  }
  html:root body .dk-pnl {
    font-size: var(--text-headline-size);
    line-height: var(--text-headline-line);
  }
  html:root body .dk-ls {
    display: grid;
    gap: var(--space-4);
  }
  html:root body .dk-ls .fd-split-legend {
    margin-top: 0;
    gap: var(--space-8);
    white-space: nowrap;
  }
  html:root body .dk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  html:root body .dk-pos-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--fill-faint);
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  html:root body .dk-pos-chip b {
    padding-left: var(--space-4);
    font-weight: 700;
  }
  html:root body .dk-pos-chip .fd-side {
    padding: 0 var(--space-4);
  }
  html:root body .dk-open {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--control-s);
    padding: 0 var(--space-12);
    border-radius: var(--radius-m);
    background: var(--fill-subtle);
    color: var(--text-primary);
    font-size: var(--text-footnote-size);
    font-weight: 600;
    white-space: nowrap;
  }
  html:root body .dk-open:hover {
    background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--state-hover-soft) * 100%), transparent) 0 0);
  }
  html:root body .dk-open:focus-visible {
    outline: var(--stroke-width-focus) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
  html:root body .dk-open .fd-ibox {
    transition: transform 200ms var(--ease-standard);
  }
  html:root body .dk-open .fd-ibox.is-open {
    transform: rotate(180deg);
  }
  html:root body .dk-trader > .dk-tr > :last-child {
    display: flex;
    justify-content: flex-end;
  }
  html:root body .dk-pos {
    margin-bottom: var(--space-16);
    padding: 0 var(--space-16) var(--space-8);
    border-radius: var(--radius-m);
    background: var(--fill-faint);
  }
  html:root body .dk-pos .dk-tr {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.6fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    min-height: 48px;
  }
  html:root body .dk-pos .dk-tr.is-head > :nth-child(n + 3) {
    text-align: right;
  }
  html:root body .dk-pos .fd-name small {
    color: var(--text-secondary);
    font-size: var(--text-caption-1-size);
  }
  html:root body .dk-weight {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
  }
  html:root body .dk-wbar {
    display: flex;
    width: 80px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--fill-subtle);
  }
  html:root body .dk-wbar i {
    border-radius: var(--radius-full);
    background: var(--chart-1);
  }

  html:root body .dk-foot {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-64);
    color: var(--text-secondary);
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html:root body .dk-open .fd-ibox {
    transition: none;
  }
}
@media (min-width: 768px) {
  html:root body .fd-mk.is-flat {
    color: var(--text-secondary);
  }
}
/* 1024-1199: the trader table keeps its columns; the open button drops its words for its icon */
@media (min-width: 1024px) and (max-width: 1199px) {
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr {
    grid-template-columns: minmax(160px, 1.4fr) minmax(96px, 0.9fr) minmax(96px, 0.9fr) minmax(80px, 0.8fr) minmax(168px, 1.3fr) minmax(104px, 1.4fr) 44px;
  }
  html:root body .dk-open {
    width: var(--control-m);
    padding: 0;
    justify-content: center;
  }
  html:root body .dk-open-label {
    display: none;
  }
}
/* Tablet (768-1023): the same dashboard in fewer columns. Summary 3 + 2, prices and movers full
   width (the two mover lists side by side), metric cards two by two, and the trader table without
   the unrealised P&L and top-position columns (both are in the opened position list). */
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body .dk-pulse {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  html:root body .dk-kpi {
    grid-column: span 2;
  }
  html:root body .dk-kpi:nth-child(n + 4) {
    grid-column: span 3;
    border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
  }
  html:root body .dk-kpi:nth-child(4) {
    border-left: 0;
  }
  html:root body .dk-grid > .dk-span-8,
  html:root body .dk-grid > .dk-span-4,
  html:root body .dk-grid > .dk-span-3:nth-child(3),
  html:root body #dk-flow > .dk-span-6 {
    grid-column: span 12;
  }
  html:root body .dk-grid > .dk-span-5,
  html:root body #dk-mood > .dk-span-4,
  html:root body #dk-flow > .dk-span-3 {
    grid-column: span 6;
  }
  html:root body .dk-grid > .dk-sec + .dk-sec {
    margin-top: var(--space-32);
  }
  html:root body .dk-movers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-24);
  }
  html:root body .dk-mv-zone + .dk-mv-zone {
    border-top: 0;
  }
  html:root body .dk-majors .dk-tr {
    grid-template-columns: minmax(144px, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr) 120px;
  }
  html:root body .dk-compare {
    max-width: 480px;
  }
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr {
    grid-template-columns: minmax(160px, 1.4fr) minmax(96px, 1fr) minmax(96px, 1fr) minmax(160px, 1.3fr) 44px;
  }
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr > :nth-child(4),
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr > :nth-child(6) {
    display: none;
  }
  html:root body .dk-open {
    width: var(--control-m);
    padding: 0;
    justify-content: center;
  }
  html:root body .dk-open-label {
    display: none;
  }
  html:root body .dk-wbar {
    display: none;
  }
}
/* A long English coin name under its ticker ends in an ellipsis instead of running into the price */
html:root body .fd-name small {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* English segment labels are longer: they never break inside a word, and on the narrowest phones
   the pills tighten instead */
html:root body .fd-seg button {
  white-space: nowrap;
}
@media (max-width: 374px) {
  html[lang="en"]:root body .fd-seg button {
    min-width: 0;
    padding: 0 var(--space-8);
  }
}
/* In the bar the ring steps down to sit with the 13 px time */
html:root body .fd-sticky .fd-ring-box,
html:root body .fd-sticky .fd-ring {
  width: 20px;
  height: 20px;
}
/* Phone: the button that opens traders 4-10 under the first three cards */
.fd-more-traders {
  width: 100%;
  margin-top: var(--space-16);
  background: var(--surface-card);
}
.fd-more-traders[hidden] {
  display: none;
}
.fd-more-traders .fd-ibox.is-open {
  transform: rotate(180deg);
}

/* ===========================================================================================
   Dashboard pass 2 (2026-10-21)
   =========================================================================================== */
@media (min-width: 768px) {
  /* Prices and movers: one row of three tracks (head, card, note) shared through subgrid, so the
     two cards start and end on the same lines whatever their notes' lengths */
  html:root body .dk-top {
    grid-template-rows: auto 1fr auto;
    row-gap: 0;
  }
  html:root body .dk-top > .dk-sec {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
  /* Movers fill their card: the six rows share its height instead of bunching at the top */
  html:root body .dk-movers {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-24) var(--space-12);
  }
  html:root body .dk-mv-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  html:root body .dk-mv-zone h3 {
    padding: var(--space-12) 0 var(--space-4);
  }
  html:root body .dk-mv-zone ol {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  html:root body .dk-mv-zone li {
    flex: 1;
    min-height: 64px;
  }

  /* Metric cards: a column whose footer sits at the foot, level across the row */
  html:root body .dk .fd-metric,
  html:root body .dk .fd-fx {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* Two lines, both left: the explanation's button, then the source on the card's last line, so
     sources sit level across a row even when one card has no explanation or a long source */
  html:root body .dk-foot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-8);
  }
  html:root body .dk-why-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--control-s);
    color: var(--text-secondary);
    font-size: var(--text-footnote-size);
    font-weight: 600;
    white-space: nowrap;
  }
  html:root body .dk-why-btn:hover,
  html:root body .dk-why-btn[aria-expanded="true"] {
    color: var(--text-primary);
  }
  html:root body .dk-why-btn:focus-visible {
    outline: var(--stroke-width-focus) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-xs);
  }
  /* The explanation floats over the card, just above its footer (a floating sheet: the one place
     a shadow belongs), so the card and its row keep their height */
  html:root body .dk-why-popover {
    position: absolute;
    left: calc(var(--space-12) * -1);
    right: calc(var(--space-12) * -1);
    bottom: calc(100% + var(--space-4));
    z-index: 5;
    max-height: 320px;
    overflow: auto;
    padding: var(--space-16);
    border-radius: var(--radius-m);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-md);
    font-size: var(--text-footnote-size);
    line-height: var(--text-footnote-line);
    text-wrap: pretty;
  }
  html:root body .dk-why-popover[hidden] {
    display: none;
  }

  /* Summary: the first cell turns through the majors; dots under the line pick one */
  html:root body .dk-kpi.is-coin {
    padding-bottom: var(--space-24);
  }
  html:root body .dk-dots {
    position: absolute;
    left: var(--space-24);
    bottom: var(--space-8);
    display: flex;
    gap: var(--space-2);
  }
  html:root body .dk-dot {
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    padding: 0;
  }
  html:root body .dk-dot::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--fill-strong);
    transition: width 200ms var(--ease-standard), background-color 200ms var(--ease-standard);
  }
  html:root body .dk-dot.is-on::before {
    width: 12px;
    background: var(--text-secondary);
  }
  html:root body .dk-dot:focus-visible {
    outline: var(--stroke-width-focus) solid var(--focus-ring);
    border-radius: var(--radius-xs);
  }
  html:root body .dk-kpi.is-turn :is(.dk-kpi-label, .dk-kpi-value, .dk-kpi-sub, .dk-kpi-spark) {
    animation: dk-turn 320ms var(--ease-standard) both;
  }
  @keyframes dk-turn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  /* Traders: the whole row opens; the "+21" chip and the count at the end say what opens */
  html:root body .dk-trader.is-openable > .dk-tr {
    cursor: pointer;
    margin: 0 calc(var(--space-12) * -1);
    padding: 0 var(--space-12);
    border-radius: var(--radius-m);
  }
  html:root body .dk-trader.is-openable > .dk-tr:hover {
    background: var(--fill-faint);
  }
  html:root body .dk-pos-chip.is-more {
    padding: var(--space-2) var(--space-8);
    color: var(--text-secondary);
    font-weight: 600;
  }
  html:root body .dk-traders > .dk-tr.is-head > :last-child {
    text-align: right;
  }
  html:root body .dk-open {
    min-width: 64px;
    justify-content: center;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr {
    grid-template-columns: minmax(160px, 1.4fr) minmax(96px, 0.9fr) minmax(96px, 0.9fr) minmax(80px, 0.8fr) minmax(160px, 1.3fr) minmax(104px, 1.4fr) 72px;
  }
  html:root body .dk-open {
    width: auto;
    padding: 0 var(--space-12);
  }
  html:root body .dk-open-label {
    display: inline;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr {
    grid-template-columns: minmax(160px, 1.4fr) minmax(96px, 1fr) minmax(96px, 1fr) minmax(160px, 1.3fr) 72px;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html:root body .dk-kpi.is-turn :is(.dk-kpi-label, .dk-kpi-value, .dk-kpi-sub, .dk-kpi-spark) {
    animation: none;
  }
  html:root body .dk-dot::before {
    transition: none;
  }
}
/* Trader names wrap to a second line rather than lose their end (the rows are 80 high) */
@media (min-width: 768px) {
  html:root body .dk-trader .fd-name b {
    white-space: normal;
    overflow: visible;
    text-wrap: balance;
  }
}

/* ===========================================================================================
   Dashboard pass 3 (2026-10-21): fewer grey fills; the trader table rebuilt
   =========================================================================================== */
/* Phone head: the title, freshness on its right (as on the feed); a long English title lets the
   freshness drop under it rather than squeeze */
.fd-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-12);
  row-gap: var(--space-4);
}
.fd-head-top .fd-updated {
  margin-top: 0;
}
/* Marks at 16 and 20 (the positions), the letter scaled with them */
.fd-coin.is-16 {
  width: 16px;
  height: 16px;
  font-size: var(--text-caption-2-size);
}
.fd-coin.is-20 {
  width: 20px;
  height: 20px;
  font-size: var(--text-caption-2-size);
}

@media (min-width: 768px) {
  /* State chips and band pills keep their chip: they are the card's one-word reading, and as bare
     text they read as a second title (tried and reverted, 2026-10-21) */

  /* ---- traders ---- */
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr {
    grid-template-columns: 20px minmax(140px, 1.3fr) minmax(96px, 0.9fr) minmax(96px, 0.9fr) minmax(88px, 0.8fr) minmax(140px, 1.1fr) minmax(176px, 1.3fr) 72px;
    column-gap: var(--space-16);
  }
  html:root body .dk-traders > .dk-tr.is-head > * {
    text-align: left;
  }
  html:root body .dk-traders > .dk-tr.is-head > :is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(8)) {
    text-align: right;
  }
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(1) {
    text-align: center;
  }
  html:root body .dk-rank {
    color: var(--text-secondary);
    font-size: var(--text-subhead-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  html:root body .dk-traders .dk-num b {
    font-size: var(--text-headline-size);
    line-height: var(--text-headline-line);
    font-weight: 600;
  }
  /* The whole row opens; no grey on hover, the count at its end darkens instead */
  html:root body .dk-trader.is-openable > .dk-tr {
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
  html:root body .dk-trader.is-openable > .dk-tr:hover {
    background: none;
  }
  html:root body .dk-trader.is-openable > .dk-tr:hover .dk-open {
    color: var(--text-primary);
  }
  /* Largest positions: three lines on one set of columns, mark · ticker · side · share */
  html:root body .dk-tops {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
    font-variant-numeric: tabular-nums;
  }
  html:root body .dk-tops li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 32px 36px;
    align-items: center;
    column-gap: var(--space-8);
  }
  html:root body .dk-tops b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }
  html:root body .dk-tops li > span:last-child {
    text-align: right;
    color: var(--text-secondary);
  }
  /* A side is a word in its market colour; no pill behind it */
  html:root body .dk-side {
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
    font-weight: 600;
    white-space: nowrap;
  }
  html:root body .dk-side.is-long {
    color: var(--market-up);
  }
  html:root body .dk-side.is-short {
    color: var(--market-down);
  }
  html:root body .dk-open-cell {
    display: flex;
    justify-content: flex-end;
  }
  html:root body .dk-open {
    width: auto;
    min-width: 0;
    gap: var(--space-4);
    padding: 0;
    background: none;
    color: var(--text-secondary);
  }
  /* Opened: the positions on the card itself, indented under the account, no fill and no hover */
  html:root body .dk-pos {
    margin: 0 0 var(--space-16) calc(20px + var(--space-16));
    padding: 0;
    background: none;
    border-radius: 0;
  }
  html:root body .dk-pos .dk-tr {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.5fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    min-height: 48px;
  }
  html:root body .dk-pos .dk-coin {
    gap: var(--space-8);
  }
  html:root body .dk-pos .dk-num b {
    font-size: var(--text-subhead-size);
    line-height: var(--text-subhead-line);
  }
  html:root body .dk-weight > span:last-child {
    min-width: 36px;
  }

  html:root body .dk-compare > div {
    row-gap: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr {
    grid-template-columns: 20px minmax(128px, 1.3fr) minmax(88px, 0.9fr) minmax(88px, 0.9fr) minmax(80px, 0.8fr) minmax(120px, 1fr) minmax(160px, 1.3fr) 56px;
    column-gap: var(--space-12);
  }
}
/* Tablet: unrealised P&L and the largest positions give way (both are in the opened list) */
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr {
    grid-template-columns: 20px minmax(140px, 1.4fr) minmax(96px, 1fr) minmax(96px, 1fr) minmax(140px, 1.3fr) 56px;
    column-gap: var(--space-12);
  }
  /* Shown again on the tablet, each in its own layout ("revert" dropped them to inline text, which
     ran the account and its leverage together into the next column) */
  html:root body .dk-trader > .dk-tr > :nth-child(4) {
    display: flex;
  }
  html:root body .dk-trader > .dk-tr > :nth-child(6) {
    display: grid;
  }
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(4),
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(6) {
    display: block;
  }
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr > :nth-child(5),
  html:root body :is(.dk-traders, .dk-trader) > .dk-tr > :nth-child(7) {
    display: none;
  }
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(5) {
    text-align: right;
  }
  html:root body .dk-pos {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  /* Column heads follow their columns (an earlier rule right-aligned 2-4) */
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(2),
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(6),
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(7) {
    text-align: left;
  }
  html:root body .dk-traders > .dk-tr.is-head > :is(:nth-child(3), :nth-child(4), :nth-child(5)) {
    text-align: right;
  }
  /* The three largest are one block, no rules between them; ticker, side and share sit close */
  html:root body .dk-table .dk-tops li + li {
    border-top: 0;
  }
  html:root body .dk-tops li {
    grid-template-columns: 16px 48px 32px 36px;
    justify-content: start;
  }
  /* Short / long legend: one line in caption 2, so "99% 초과 · 1% 미만" fits the column */
  html:root body .dk-ls .fd-split-legend {
    font-size: var(--text-caption-2-size);
    line-height: var(--text-caption-2-line);
  }
}
@media (min-width: 768px) {
  /* (doubled pseudo-class: outranks the older 2-4 right-align rule) */
  html:root body .dk-traders > .dk-tr.is-head > :nth-child(2):not(:nth-child(1)) {
    text-align: left;
  }
}

/* ===========================================================================================
   Pass 4 (2026-10-21): the trader table's chips, hover and opened list, reconsidered
   =========================================================================================== */
@media (min-width: 768px) {
  /* Largest positions: chips again (they group a position's four facts), all one width, so the
     side and share sit on the same line in every row; the lightest fill */
  html:root body .dk-tops {
    gap: var(--space-4);
  }
  html:root body .dk-tops .dk-pos-chip {
    display: grid;
    grid-template-columns: 16px 44px 28px 32px;
    align-items: center;
    column-gap: var(--space-4);
    width: fit-content;
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--fill-faint);
  }
  /* Hover: a soft fill that reaches 12 px past the content on each side, rounded, so nothing
     touches its edge; the row's count darkens with it */
  html:root body .dk-trader.is-openable > .dk-tr {
    margin: 0 calc(var(--space-12) * -1);
    padding: 0 var(--space-12);
    border-radius: var(--radius-m);
  }
  html:root body .dk-trader.is-openable > .dk-tr:hover {
    background: var(--fill-faint);
  }
  /* Opened: its own area on the full row width (no indent, so it does not draw a second set of
     column lines), a light fill with 16 inside; no hover inside it */
  html:root body .dk-pos {
    margin: var(--space-4) calc(var(--space-12) * -1) var(--space-16);
    padding: var(--space-4) var(--space-16) var(--space-8);
    border-radius: var(--radius-m);
    background: var(--fill-faint);
  }
  html:root body .dk-trader.is-open > .dk-tr:hover {
    background: none;
  }
}

/* Korea premium, last 30 days: one navy line (it crosses 0, so no single market colour fits),
   0% dotted */
@media (min-width: 768px) {
  html:root body .dk-kimchi-line .fd-spark {
    --spark: var(--chart-1);
  }
}
/* The 0 / 100 labels hang 8 below the gauge's box (they sit under the arc's round ends), so the
   gauge keeps that much room before the sentence under it */
.fd-fx-gauge.is-large {
  margin-bottom: var(--space-8);
}
/* Tablet: the third sentiment card (Korea premium) takes the full row under the two halves */
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body #dk-mood > :nth-child(3) {
    grid-column: span 12;
  }
}

/* Chart read-outs (pointer): a dark label above the point; lines draw a guide and a dot; bars
   dim all but the one under the pointer */
.dk-tooltip {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-s);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  box-shadow: var(--shadow-md);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
  white-space: nowrap;
  pointer-events: none;
}
.dk-tooltip[hidden] {
  display: none;
}
.dk-tooltip small {
  color: color-mix(in srgb, var(--text-on-inverse) 68%, transparent);
  font-size: var(--text-caption-1-size);
  line-height: var(--text-caption-1-line);
}
.dk-tooltip b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  html:root body .dk-line,
  html:root body .dk-chart {
    position: relative;
    display: block;
  }
  html:root body .dk-guide {
    position: absolute;
    width: 1px;
    background: var(--stroke-strong);
    pointer-events: none;
  }
  html:root body .dk-guide i {
    position: absolute;
    left: 0;
    width: 8px;
    height: 8px;
    border: 2px solid var(--surface-card);
    border-radius: var(--radius-full);
    background: var(--text-primary);
    transform: translate(-50%, -50%); /* the dot's centre on the point */
  }
  html:root body .is-reading > li {
    opacity: 0.4;
    transition: opacity 120ms var(--ease-standard);
  }
  html:root body .is-reading > li.is-on {
    opacity: 1;
  }
}

/* ===========================================================================================
   Summary strip, pass 5 (2026-10-21): four rows shared across the strip through subgrid
   (label · number + status · picture · one line), so no cell's number or line sits lower
   =========================================================================================== */
@media (min-width: 768px) {
  html:root body .dk-pulse {
    grid-template-rows: auto auto 32px auto;
    row-gap: 0;
  }
  html:root body .dk-kpi {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
    padding: var(--space-20) var(--space-24);
  }
  html:root body .dk-kpi.is-coin {
    padding-bottom: var(--space-20);
  }
  html:root body .dk-kpi-label {
    margin-bottom: var(--space-4);
  }
  /* One fixed height for the number row: a smaller unit (원, %) or a chip cannot grow it */
  html:root body .dk-kpi-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    height: var(--text-title-2-line);
    margin-bottom: var(--space-12);
    white-space: nowrap;
  }
  html:root body .dk-kpi-num {
    font-size: var(--text-title-2-size);
    line-height: var(--text-title-2-line);
    font-weight: 700;
    letter-spacing: var(--tracking-title);
    font-variant-numeric: tabular-nums;
  }
  html:root body .dk-kpi-num small {
    margin-left: var(--space-2);
    font-size: var(--text-subhead-size);
    line-height: 1;
    font-weight: 600;
  }
  html:root body .dk-kpi-num.is-up {
    color: var(--market-up);
  }
  html:root body .dk-kpi-num.is-down {
    color: var(--market-down);
  }
  html:root body .dk-kpi-viz {
    display: flex;
    align-items: center;
    height: 32px;
    margin-bottom: var(--space-8);
  }
  html:root body .dk-kpi-viz > * {
    width: 100%;
  }
  html:root body .dk-kpi-viz .fd-spark {
    height: 32px;
  }
  html:root body .dk-kpi-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-width: 0;
    color: var(--text-secondary);
    font-size: var(--text-footnote-size);
    line-height: var(--text-footnote-line);
    white-space: nowrap;
  }
  html:root body .dk-kpi-sub > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Coin dots sit at the end of the coin's last line now */
  html:root body .dk-dots {
    position: static;
    flex: none;
  }
  html:root body .dk-kpi.is-turn :is(.dk-kpi-label, .dk-kpi-value, .dk-kpi-viz, .dk-kpi-sub > span:first-child) {
    animation: dk-turn 320ms var(--ease-standard) both;
  }
  /* Fear & greed: the five bands at their widths, today's band in its colour, a mark at the value */
  html:root body .dk-kpi-fx {
    position: relative;
    height: 16px;
  }
  html:root body .dk-kpi-fx-bands {
    position: absolute;
    inset: 0;
    display: flex;
    gap: var(--space-2);
    height: 8px;
    margin: auto 0;
  }
  html:root body .dk-kpi-fx-bands i {
    flex-basis: 0;
    border-radius: var(--space-2);
    background: color-mix(in oklab, var(--fx) 22%, transparent);
  }
  html:root body .dk-kpi-fx-bands i.is-on {
    background: var(--fx);
  }
  html:root body .dk-kpi-fx-mark {
    position: absolute;
    top: 0;
    width: 2px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--text-primary);
    transform: translateX(-50%); /* centred on the value */
  }
  /* ETF: ten days around a zero line, in up, out down */
  html:root body .dk-kpi-bars {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-2);
    height: 32px;
  }
  html:root body .dk-kpi-bars::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 1px;
    margin: auto 0;
    background: var(--stroke-default);
  }
  html:root body .dk-kpi-bars li {
    position: relative;
  }
  html:root body .dk-kpi-bars i {
    position: absolute;
    left: 0;
    right: 0;
    max-height: 50%;
    border-radius: 1px;
  }
  html:root body .dk-kpi-bars i.is-in {
    bottom: 50%;
    background: var(--market-up);
  }
  html:root body .dk-kpi-bars i.is-out {
    top: 50%;
    background: var(--market-down);
  }
  /* Futures: both sides' shares, bar over the two figures */
  html:root body .dk-kpi-ls {
    display: grid;
    gap: var(--space-4);
  }
  html:root body .dk-kpi-ls-legend {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-caption-1-size);
    line-height: var(--text-caption-1-line);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  html:root body .dk-kpi-ls-legend .is-short {
    color: var(--market-down);
  }
  html:root body .dk-kpi-ls-legend .is-long {
    color: var(--market-up);
  }
  /* Premium: its 30 days in navy (the line crosses 0), 0 dotted */
  html:root body .dk-kpi.is-kimchi .fd-spark {
    --spark: var(--chart-1);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body .dk-pulse {
    grid-template-rows: repeat(2, auto auto 32px auto);
  }
}

/* Summary strip, pass 6: one picture language. Lines are 1.5 navy (the coin's in its market
   colour), no area fill; the ETF bars and the long/short bar sit at the same 8 px weight band;
   coin dots move up beside the coin's name. */
@media (min-width: 768px) {
  html:root body .dk-kpi-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }
  html:root body .dk-kpi-line .fd-spark {
    --spark: var(--chart-1);
    height: 32px;
  }
  html:root body .dk-kpi-line.is-up .fd-spark {
    --spark: var(--market-up);
  }
  html:root body .dk-kpi-line.is-down .fd-spark {
    --spark: var(--market-down);
  }
  html:root body .dk-kpi-line .fd-spark-area {
    display: none;
  }
  html:root body .dk-kpi-split {
    height: 8px;
  }
  html:root body .dk-kpi-band {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-primary);
    font-weight: 600;
  }
  html:root body .dk-kpi-band.is-xfear { --fx: var(--fx-xfear); }
  html:root body .dk-kpi-band.is-fear { --fx: var(--fx-fear); }
  html:root body .dk-kpi-band.is-neutral { --fx: var(--fx-neutral); }
  html:root body .dk-kpi-band.is-greed { --fx: var(--fx-greed); }
  html:root body .dk-kpi-band.is-xgreed { --fx: var(--fx-xgreed); }
  html:root body .dk-kpi-sub .fd-mk {
    font-weight: 600;
  }
}

/* Summary strip, pass 7: number and reading side by side; the fear & greed band and the premium's
   two prices */
@media (min-width: 768px) {
  html:root body .dk-kpi-value {
    justify-content: flex-start;
  }
  html:root body .dk-kpi-value .fd-chip {
    margin-left: auto;
  }
  html:root body .dk-kpi-band.fd-chip {
    color: var(--text-primary);
    font-weight: 600;
  }
  html:root body .dk-kpi-fx-bands {
    height: 8px;
  }
  html:root body .dk-kpi-fx-bands i {
    background: var(--fill-default);
  }
  html:root body .dk-kpi-fx-bands i.is-on {
    background: var(--fx);
  }
  html:root body .dk-kpi-fx-mark {
    top: 2px;
    height: 12px;
  }
  /* Two lines of 16 fill the 32 picture row exactly */
  html:root body .dk-kpi-pair {
    display: grid;
    gap: 0;
    margin: 0;
    font-size: var(--text-caption-1-size);
    line-height: 16px;
    font-variant-numeric: tabular-nums;
  }
  html:root body .dk-kpi-pair div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
  }
  html:root body .dk-kpi-pair dt {
    color: var(--text-secondary);
  }
  html:root body .dk-kpi-pair dd {
    margin: 0;
    font-weight: 600;
  }
}

/* Summary strip, pass 8: three rows (label · number + reading · picture); no detail line */
@media (min-width: 768px) {
  html:root body .dk-pulse {
    grid-template-rows: auto auto 32px;
  }
  html:root body .dk-kpi {
    grid-row: span 3;
  }
  html:root body .dk-kpi-viz {
    margin-bottom: 0;
  }
  html:root body .dk-kpi-read {
    margin-left: auto;
  }
  html:root body .dk-kpi-read .fd-move {
    font-size: var(--text-subhead-size);
    line-height: var(--text-subhead-line);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body .dk-pulse {
    grid-template-rows: repeat(2, auto auto 32px);
  }
}

/* Summary strip, pass 9: label · number + reading · one line (the split's line is its bar). The
   coin's 24 h line is small beside its name, as at first. */
@media (min-width: 768px) {
  html:root body .dk-pulse {
    grid-template-rows: auto auto auto;
  }
  html:root body .dk-kpi {
    grid-row: span 3;
  }
  html:root body .dk-kpi-value {
    margin-bottom: var(--space-8);
  }
  html:root body .dk-kpi-sub {
    min-height: var(--text-footnote-line);
  }
  html:root body .dk-kpi.is-split .dk-kpi-sub {
    align-items: center;
  }
  html:root body .dk-kpi-sub > .dk-kpi-split {
    flex: 1;
    overflow: visible;
  }
  html:root body .dk-kpi-label .dk-kpi-spark {
    flex: none;
    width: 64px;
    inset: auto; /* clears the first version's absolute top/right offsets */
  }
  html:root body .dk-kpi-label .dk-kpi-spark .fd-spark {
    height: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body .dk-pulse {
    grid-template-rows: repeat(2, auto auto auto);
  }
}
/* The coin cell turns by itself (it holds under the pointer); no dots, so its line keeps its words */
@media (min-width: 768px) {
  html:root body .dk-kpi.is-coin {
    padding-bottom: var(--space-20);
  }
}
/* Summary: a reading badge sits right beside its number (탐욕, 차이 작음) */
@media (min-width: 768px) {
  html:root body .dk-kpi-value .fd-chip {
    margin-left: 0;
  }
}
/* Trader rows: the short/long bar is labelled once, with the main side, under its own end */
@media (min-width: 768px) {
  html:root body .dk-ls .fd-split-legend.is-long {
    justify-content: flex-end;
  }
  html:root body .dk-ls .fd-split-legend.is-short {
    justify-content: flex-start;
  }
}
/* Largest positions: chip = mark · ticker · share at one width; an opposite-side word follows it */
@media (min-width: 768px) {
  html:root body .dk-tops li {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }
  html:root body .dk-tops .dk-pos-chip {
    grid-template-columns: 16px 44px 32px;
  }
}
@media (min-width: 768px) {
  /* The share's right-aligned grey is for the % inside the chip only (an older rule reached the
     chip and the side word once they became the li's children) */
  html:root body .dk-tops li > span.dk-pos-chip:last-child,
  html:root body .dk-tops li > span.dk-pos-chip:first-child {
    text-align: left;
    color: var(--text-primary);
  }
  html:root body .dk-tops li > span.dk-side.is-long:last-child {
    text-align: left;
    color: var(--market-up);
  }
  html:root body .dk-tops li > span.dk-side.is-short:last-child {
    text-align: left;
    color: var(--market-down);
  }
  html:root body .dk-tops .dk-pos-chip > span:last-child {
    text-align: right;
    color: var(--text-secondary);
  }
}
/* The row is the one thing to press: its hover fill is the only one. The count button inside has
   no fill of its own on hover (a fill inside a fill read as two targets); it darkens with the row,
   and keeps its focus ring for the keyboard. */
@media (min-width: 768px) {
  html:root body .dk-traders .dk-open:hover,
  html:root body .dk-traders .dk-open:active {
    background: none;
    background-image: none;
  }
  html:root body .dk-trader.is-openable > .dk-tr:hover .dk-open,
  html:root body .dk-traders .dk-open:hover {
    color: var(--text-primary);
  }
}
/* Traders' takeaway on the desktop: a plain line, no tinted box */
@media (min-width: 768px) {
  html:root body .dk-sum {
    margin: calc(var(--space-4) * -1) 0 var(--space-16);
    color: var(--text-primary);
    font-size: var(--text-callout-size);
    line-height: var(--text-callout-line);
    font-weight: 600;
  }
  html:root body .dk-sum[hidden] {
    display: none;
  }
}
/* Largest positions: the side is back in every chip, in a fixed column */
@media (min-width: 768px) {
  html:root body .dk-tops .dk-pos-chip {
    grid-template-columns: 16px 44px 28px 32px;
  }
  html:root body .dk-tops .dk-pos-chip > .dk-side.is-long {
    color: var(--market-up);
  }
  html:root body .dk-tops .dk-pos-chip > .dk-side.is-short {
    color: var(--market-down);
  }
}

/* A coin mark on a white ground (Uniswap, Google, Apple) or with no ground (NEAR, Worldcoin) sits
   on a white disc everywhere, the brand's own white, with a hairline drawn inside the disc so it
   holds its edge on a white surface without changing size (CLAUDE.md §4, the one exception to
   "fill, never stroke", 2026-10-22). Badges with a coloured ground cover their disc; a letter with
   no image keeps the grey fill. */
.fd-coin.is-mark,
.dk-pos-chip .fd-coin.is-mark,
.dk-pos .fd-coin.is-mark {
  background: var(--surface-card);
  /* lint-ok shadow/floating: an inset hairline only, no shadow (CLAUDE.md §4 white-mark exception) */
  box-shadow: inset 0 0 0 var(--stroke-width-hairline) var(--stroke-subtle);
}
.dk-pos-chip .fd-coin.is-text:not(.has-img),
.dk-pos .fd-coin.is-text:not(.has-img) {
  background: var(--surface-card);
}

/* A section's conclusion under its title (phone): body colour, semibold, no box */
.fd-takeaway {
  margin: calc(var(--space-4) * -1) 0 var(--space-12);
  color: var(--text-primary);
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-line);
  font-weight: 600;
  text-wrap: pretty;
}
.fd-takeaway[hidden] {
  display: none;
}

/* The day's one line: the page's headline fact under its title, in the body colour */
.fd-headline {
  margin-top: var(--space-8);
  color: var(--text-primary);
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-line);
  font-weight: 600;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  html:root body .dk-sub.is-line {
    margin-top: var(--space-8);
    color: var(--text-primary);
    font-size: var(--text-title-3-size);
    line-height: var(--text-title-3-line);
    font-weight: 600;
    letter-spacing: var(--tracking-title);
  }
}
/* Ranks 1-3 as medals, toned: a pale tint of gold, silver and bronze with the number in the same
   hue, deep (solid primaries read as a toy: #FFCC00, pale blue and brown did not belong together) */
:root {
  --medal-gold-bg: var(--amber-100);
  --medal-gold-ink: var(--amber-700);
  --medal-silver-bg: var(--navy-100);
  --medal-silver-ink: var(--navy-600);
  --medal-bronze-bg: var(--red-100);
  --medal-bronze-ink: var(--amber-800);
}
/* Dark: the same three hues, a deep tint on the navy card with a light number (the light tints
   would glare as bright discs) */
:root[data-theme="dark"] {
  --medal-gold-bg: var(--amber-900);
  --medal-gold-ink: var(--amber-300);
  --medal-silver-bg: var(--navy-800);
  --medal-silver-ink: var(--navy-200);
  --medal-bronze-bg: var(--red-900);
  --medal-bronze-ink: var(--red-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --medal-gold-bg: var(--amber-900);
    --medal-gold-ink: var(--amber-300);
    --medal-silver-bg: var(--navy-800);
    --medal-silver-ink: var(--navy-200);
    --medal-bronze-bg: var(--red-900);
    --medal-bronze-ink: var(--red-300);
  }
}
.fd-rank.is-medal,
.dk-rank.is-medal {
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  font-weight: 700;
}
.fd-rank.is-medal.is-m1,
.dk-rank.is-medal.is-m1 {
  background: var(--medal-gold-bg);
  color: var(--medal-gold-ink);
}
.fd-rank.is-medal.is-m2,
.dk-rank.is-medal.is-m2 {
  background: var(--medal-silver-bg);
  color: var(--medal-silver-ink);
}
.fd-rank.is-medal.is-m3,
.dk-rank.is-medal.is-m3 {
  background: var(--medal-bronze-bg);
  color: var(--medal-bronze-ink);
}
@media (min-width: 768px) {
  html:root body .dk-rank.is-medal {
    width: 24px;
    height: 24px;
    font-size: var(--text-footnote-size);
    justify-self: center;
  }
}
/* A mark's disc is its own grid of one cell the disc's size: the hidden fallback letter kept its
   line height (18 in a 16 chip), which made the cell taller than the disc and set the image 1 px
   low and 2 px tall */
.fd-coin.is-text {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  line-height: 1;
}
/* The opened account's one-line read sits above its column heads, as far from the box's top as
   the rows sit from its sides */
@media (min-width: 768px) {
  html:root body .dk-pos-line {
    margin: 0;
    padding: var(--space-12) 0 var(--space-4);
    color: var(--text-primary);
  }
}
/* The phone card's line reads under the account's name, in body colour */
.fd-trader-line {
  margin: 0;
  color: var(--text-primary);
}
/* Traders four to ten on the phone: one-line rows under the three cards, always shown (no "show
   all" step). A row opens in place into the card body with every position: one level, not two.
   Built like the metric rows (fd-mrows): the card's side padding, a hairline between rows. */
.fd-trows {
  padding: var(--space-4) var(--space-20);
}
.fd-trow + .fd-trow {
  border-top: var(--stroke-width-hairline) solid var(--stroke-separator);
}
.fd-trow-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  min-height: 64px;
  padding: var(--space-8) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fd-trow-head .fd-name b {
  white-space: normal;
}
.fd-trow-caret {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: transform var(--motion-release) var(--ease-standard);
}
.fd-trow-caret.is-open {
  transform: rotate(180deg);
}
.fd-trow-body {
  display: grid;
  gap: var(--space-16);
  padding-bottom: var(--space-20);
}