@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Pixel"; src: url("/fonts/geist-pixel.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* The face of titles, since 2026-10-11: Archivo at weight 800, drawn narrow. One file holds every width from 62 to
   125. It is asked for with "optional": a visitor whose connection is slow reads the titles in Geist on that visit,
   and no title changes its face, and so its number of lines, under a reader. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-800.woff2") format("woff2"); font-weight: 800; font-stretch: 62% 125%; font-style: normal; font-display: optional; }

/* ==========================================================================
   The design system. The rules are written out in docs/DESIGN.md and a test
   reads this file to hold them.
   1. Every colour is a token. The light theme only redefines tokens.
   2. Text has four steps: ink, text, dim, faint. Each one reads at 4.5 to 1
      or more on every surface of its theme.
   3. Type has one scale. Nothing is set under 11px, and 11px is only for tags
      and for text inside a mark of a chart.
   4. A number never stands alone. It carries a label and, when it measures
      time, its window.
   5. The size of a token, its market cap, is the first number wherever a
      token is shown.
   6. Motion reports a change in the data. Nothing moves to fake urgency.
   ========================================================================== */
:root {
  /* surfaces */
  --bg: #0a0a0a;
  --card: #131313;
  --card-2: #1a1a1a;
  --field: #141414;
  --glass: rgba(10, 10, 10, .92);
  /* lines */
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --line-3: rgba(255, 255, 255, .32);
  --hair: rgba(255, 255, 255, .07);
  --track: rgba(255, 255, 255, .12);
  --hover: rgba(255, 255, 255, .06);
  --sheen: rgba(255, 255, 255, .05);
  /* text, four steps */
  --ink: #ffffff;
  --on-ink: #0a0a0a;
  --text: #d6dae3;
  --dim: #a9adb6;
  --faint: #868a93;
  /* signal */
  --volt: #e5f43a;
  --volt-ink: #0a0a0a;
  --volt-ring: rgba(229, 244, 58, .55);
  --volt-ring-0: rgba(229, 244, 58, 0);
  --up: #e5f43a;
  --up-soft: rgba(229, 244, 58, .5);
  --up-wash: rgba(229, 244, 58, .14);
  --down: #ff6a55;
  --down-soft: rgba(255, 106, 85, .13);
  --down-mid: rgba(255, 106, 85, .5);
  --down-wash: rgba(255, 106, 85, .16);
  --warn: #f5b83d;
  --warn-soft: rgba(245, 184, 61, .12);
  /* flags: a filled tag and the ink on it */
  --flag-red: #ff6a55;
  --on-flag-red: #0a0a0a;
  --flag-amber: #f5b83d;
  --on-flag-amber: #0a0a0a;
  --flag-ink: #0a0a0a;
  --on-chain: #0a0a0a;
  --shade: rgba(0, 0, 0, .66);
  /* mood, from extreme fear to extreme greed */
  --z0: #ff6a55;
  --z1: #c04d3c;
  --z2: #8a8a8a;
  --z3: #a9bf26;
  --z4: #e5f43a;
  /* type scale */
  --t-tag: 11px;
  --t-label: 12px;
  --t-small: 13px;
  --t-body: 14px;
  --t-base: 15px;
  --t-lead: 16px;
  --t-num: 17px;
  --t-big: 22px;
  --t-title: clamp(24px, 6vw, 30px);
  --t-hero: clamp(34px, 9vw, 44px);
  /* shape and layout */
  --r: 16px;
  --r-sm: 12px;
  --pill: 999px;
  --bar: 64px;
  --stick: 0px;
  --strip: 0px;
  --face: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pixel: "Geist Pixel", "Geist Mono", ui-monospace, monospace;
  --display: "Archivo", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f5f1;
  --card: #ffffff;
  --card-2: #eef0e9;
  --field: #ffffff;
  --glass: rgba(244, 245, 241, .92);
  --line: rgba(10, 12, 0, .1);
  --line-2: rgba(10, 12, 0, .17);
  --line-3: rgba(10, 12, 0, .4);
  --hair: rgba(10, 12, 0, .09);
  --track: rgba(10, 12, 0, .1);
  --hover: rgba(10, 12, 0, .05);
  --sheen: rgba(10, 12, 0, .05);
  --ink: #0b0c0a;
  --on-ink: #ffffff;
  --text: #2b2d28;
  --dim: #50534a;
  --faint: #686b61;
  --volt: #e5f43a;
  --volt-ink: #0a0a0a;
  --volt-ring: rgba(31, 117, 84, .45);
  --volt-ring-0: rgba(31, 117, 84, 0);
  --up: #1f7554;
  --up-soft: rgba(31, 117, 84, .45);
  --up-wash: rgba(31, 117, 84, .12);
  --down: #d40c00;
  --down-soft: rgba(212, 12, 0, .1);
  --down-mid: rgba(212, 12, 0, .45);
  --down-wash: rgba(212, 12, 0, .1);
  --warn: #8a5600;
  --warn-soft: rgba(138, 86, 0, .12);
  --flag-red: #d40c00;
  --on-flag-red: #ffffff;
  --flag-amber: #f5b83d;
  --on-flag-amber: #0a0a0a;
  --flag-ink: #ffffff;
  --on-chain: #ffffff;
  --shade: rgba(20, 22, 10, .45);
  --z0: #d40c00;
  --z1: #e8705c;
  --z2: #8b8d86;
  --z3: #5fa98a;
  --z4: #1f7554;
  color-scheme: light;
}
/* While the theme changes, colours glide instead of snapping. The class is on for under half a second. */
:root.theming *, :root.theming *::before, :root.theming *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--face); font-size: var(--t-base); line-height: 1.4; font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--up); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.up { color: var(--up); }
.dn { color: var(--down); }

/* ---------- top bar ---------- */
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "brand live bell follow theme" "find find find find find"; gap: 12px 8px; align-items: center; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 0; }
.brandbox { grid-area: brand; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; min-width: 0; }
.brand { display: contents; color: var(--ink); text-decoration: none; }
.brand .logo { grid-row: 1 / span 2; }
.brand .name { font-weight: 600; font-size: var(--t-num); line-height: 1.15; letter-spacing: -.022em; color: var(--ink); white-space: nowrap; align-self: end; }
.studio { grid-column: 2; align-self: start; justify-self: start; display: block; max-width: 100%; height: 24px; line-height: 24px; font-size: var(--t-label); color: var(--dim); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio:hover { color: var(--ink); }
.follow { grid-area: follow; display: inline-flex; }
.followbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 36px; height: 36px; border-radius: var(--pill); background: var(--ink); color: var(--on-ink); font-size: var(--t-small); font-weight: 600; text-decoration: none; white-space: nowrap; transition: opacity .15s; }
.followbtn span { display: none; }
.followbtn:hover { opacity: .88; }
.followbtn svg { width: 14px; height: 14px; flex: none; }
.lost .brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 32px; height: 32px; flex: none; display: block; }
.nav { display: none; }
.live .when { display: none; }
.live { grid-area: live; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--dim); border: 1px solid var(--line); border-radius: var(--pill); padding: 6px 12px; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.on { background: var(--up); box-shadow: 0 0 0 0 var(--volt-ring); animation: ping 2s infinite; }
.dot.bad { background: var(--down); }
@keyframes ping { 70% { box-shadow: 0 0 0 8px var(--volt-ring-0); } 100% { box-shadow: 0 0 0 0 var(--volt-ring-0); } }
.themebtn { grid-area: theme; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; color: var(--dim); white-space: nowrap; transition: border-color .15s, color .15s; }
.themebtn:hover { border-color: var(--line-3); color: var(--ink); }
.themebtn svg { width: 15px; height: 15px; flex: none; }
.themebtn span { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: ease; }
.findrow { grid-area: find; display: flex; gap: 8px; min-width: 0; }
.search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--field); color: var(--faint); }
.search:focus-within { border-color: var(--up); }
.search svg { width: 17px; height: 17px; flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: var(--t-lead); color: var(--ink); }
.search input::placeholder { color: var(--faint); }
.pillbtn { height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--pill); font-weight: 500; font-size: var(--t-body); color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.pillbtn[aria-expanded="true"], .pillbtn[aria-pressed="true"] { border-color: var(--up); color: var(--up); }
.pillbtn .n { background: var(--volt); color: var(--volt-ink); border-radius: var(--pill); font-size: var(--t-tag); font-weight: 600; padding: 1px 7px; }
.pillbtn .n:empty { display: none; }

/* ---------- page ---------- */
.page { min-width: 0; padding: 0 16px calc(92px + env(safe-area-inset-bottom, 0px)); max-width: 1920px; width: 100%; margin: 0 auto; }
.titlerow { display: grid; gap: 8px; margin-top: 20px; }
.titlerow h1 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 62%; font-size: clamp(36px, 10vw, 56px); letter-spacing: 0; text-transform: uppercase; color: var(--ink); line-height: .94; }
.about { margin: 6px 0 0; font-size: var(--t-body); color: var(--dim); max-width: 74ch; }
/* The words that end the paragraph over the list open what it left unsaid. A control, so it is as tall as one. */
.textlink { display: inline-block; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; line-height: 24px; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; cursor: pointer; }
.textlink:hover { color: var(--ink); text-decoration-color: var(--ink); }
.textlink:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.listhow { margin-top: 12px; }
.listhow.shut { display: none; }
/* ---------- the wallet on the Watchlist screen ---------- */
/* What a visitor reads before connecting a wallet and after: what the page does with it, the buttons, and once it
   was read one line, three tiles and the time of the reading. The line and the tiles keep their height whatever
   they count, as the ones over the list of runners do. */
.walletbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; min-width: 0; }
.walletbox[hidden] { display: none; }
.wl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.wl-addr { font-family: var(--mono); font-size: var(--t-label); color: var(--text); }
.wl-say { margin: 0; max-width: 60ch; font-size: var(--t-base); color: var(--text); }
.wl-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.wl-paste { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; min-width: 0; }
/* The field of an address is set in the size a phone does not zoom into. */
.wl-input { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--field); color: var(--ink); font-family: var(--mono); font-size: var(--t-lead); }
.wl-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.wl-input::placeholder { color: var(--faint); font-family: var(--face); }
.wl-note, .wl-promise { margin: 0; max-width: 72ch; }
.wl-note a { color: var(--text); text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.wl-note a:hover { color: var(--ink); }
/* The line of the wallet says more than the line of the list, so it is set smaller: its longest words, "123
   tokens held, 45 not checked yet.", fit the narrowest phone on one line. Read in the face of the page on a slow
   line, where a letter is half as wide again, it may take a second line instead of leaving the screen. */
.walletbox .verdict.one { margin: 0; font-size: clamp(18px, 5.6vw, 44px); }
.walletbox .verdict.one.tight { font-size: clamp(18px, 5.6vw, 44px); white-space: normal; text-wrap: balance; }
.walletbox .kpis { margin-top: 2px; }
/* The three tiles of the wallet stand in sight at every width, with no row to slide: two side by side and the
   third under them on a phone. What was left out of the total is never behind the edge of the screen. */
.kpis.wl-tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
.kpis.wl-tiles > .kpi:last-child { grid-column: 1 / -1; }
/* What the wallet holds of a token, in the line under its name. */
.meta .hold { color: var(--ink); font-weight: 500; }
/* What the list has to say: a line over it, and one sentence that never takes a second line, so nothing under it
   moves when its count changes. The count that runs hot wears the colour the tile of that count wore. */
.listnow { display: grid; gap: 2px; margin-top: 18px; min-width: 0; }
.listnow:has(> .verdict:empty) { display: none; }
.kick { font-family: var(--mono); font-weight: 500; font-size: var(--t-label); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.verdict.one { margin: 2px 0 0; max-width: none; font-size: clamp(28px, 8.8vw, 60px); line-height: 1; white-space: nowrap; text-wrap: nowrap; overflow-wrap: normal; }
/* The face of titles is asked for once and never swapped in, so on a slow line a visit can be read in the face of
   the page, which is half as wide again. The line is then set a step smaller, and stays one line. */
.verdict.one.tight { font-size: clamp(18px, 5.6vw, 38px); }
.verdict.one > b { font-weight: inherit; color: var(--up); }
.sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--t-label); color: var(--faint); }
.sub b { color: var(--dim); font-weight: 500; }
.sub .err { color: var(--down); }

/* ---------- mood and large assets ---------- */
.majors { display: flex; gap: 18px; align-items: center; overflow-x: auto; scrollbar-width: none; margin-top: 14px; padding: 2px 0; font-size: var(--t-small); color: var(--dim); white-space: nowrap; min-height: 24px; }
.majors::-webkit-scrollbar, .kpis::-webkit-scrollbar, .seg::-webkit-scrollbar, .scrollx::-webkit-scrollbar { display: none; }
.majors:empty { display: none; }
.mj { display: inline-flex; align-items: center; gap: 6px; }
.mj > i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mj b { color: var(--ink); font-weight: 500; }
.mj em { font-style: normal; }
.mj .t { color: var(--dim); font-size: var(--t-label); font-weight: 500; letter-spacing: .01em; }
.mj .zn { color: var(--text); }
.mj .by { color: var(--faint); font-size: var(--t-label); }
.mj .by::before { content: "· "; }
.majors .sep { width: 1px; height: 14px; background: var(--line-2); flex: none; }
.majors .src { display: inline-flex; align-items: center; gap: 7px; color: var(--faint); font-size: var(--t-label); margin-left: auto; padding-left: 12px; }
.chartlead { margin-bottom: 12px; color: var(--dim); font-size: var(--t-small); }
/* On the Market screen the sentence under a title runs over the width of its card. */
.market .chartlead { max-width: none; }
.makerrow { display: flex; flex-wrap: wrap; gap: 8px; }
.makerrow .btn { height: 36px; font-size: var(--t-small); }
.btn.solid { height: 36px; background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 600; font-size: var(--t-small); }
.meter { position: relative; display: inline-block; width: 46px; height: 6px; border-radius: var(--pill); background: linear-gradient(90deg, var(--z0), var(--z2) 50%, var(--z4)); }
.meter i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg); }
.meter.big { display: block; width: 100%; height: 8px; margin-top: 14px; }
.meter.big i { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-color: var(--bg); }

/* ---------- the market in four numbers ---------- */
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr); gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.kpi { display: grid; gap: 3px; align-content: start; text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--card); min-width: 0; scroll-snap-align: start; }
.kpi .k { font-size: var(--t-label); font-weight: 500; color: var(--dim); text-wrap: balance; }
.kpi .v { font-weight: 500; font-size: clamp(24px, 6vw, 30px); letter-spacing: -.03em; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.kpi .v.volt { color: var(--up); }
.kpi .v.fall { color: var(--down); }
.kpi .s { font-size: var(--t-label); color: var(--faint); }
.kpi.tap { transition: border-color .15s, background .15s; }
.kpi.tap:hover { border-color: var(--line-3); background: var(--card-2); }
.kpi.tap[aria-pressed="true"] { border-color: var(--up); }
/* The room this tile takes is the same whatever it holds, a mover or none: the row of links, the name and the two
   lines under it. Any less and the list under it would move when the mover changes. */
.kpi.mover { min-width: 290px; gap: 10px; min-height: 136px; }
.kpi.mover.none { gap: 3px; }
.kpi.mover .k { display: flex; align-items: center; justify-content: space-between; gap: 10px; overflow: visible; }
.ils { display: inline-flex; gap: 6px; flex: none; }
.il { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--dim); transition: color .15s, border-color .15s; }
.il:hover { color: var(--ink); border-color: var(--line-3); }
.il svg { width: 13px; height: 13px; }
.mover-main { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; width: 100%; border-radius: var(--r-sm); }
.mover-main .ico { width: 40px; height: 40px; }
.mover-id { display: grid; gap: 1px; min-width: 0; }
.mover-id b { font-weight: 600; font-size: var(--t-lead); letter-spacing: -.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover-id > .bits { min-height: 1.4em; font-size: var(--t-label); color: var(--dim); }
.mover-main:hover .mover-id b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- filters ---------- */
/* The filters. Every control is in sight at every width: a group that has no room goes to the next line, whole. */
.toolbar { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.toolbar > * { flex: 1 1 100%; min-width: 0; }
.chipsrow { display: flex; flex-wrap: wrap; gap: 6px; }
.chipset { display: contents; }
.chip.picked { border-color: var(--up); color: var(--ink); background: var(--up-wash); }
.chip.picked b { font-weight: 600; }
.chip.picked span { font-size: var(--t-lead); line-height: 1; color: var(--dim); }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; color: var(--dim); transition: background .15s, color .15s, border-color .15s; }
.chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; opacity: .45; }
.chip:hover { border-color: var(--line-3); color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--line-3); color: var(--ink); background: var(--hover); }
.chip[aria-pressed="true"] i { opacity: 1; }
.tools { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tools.open { display: grid; }
.pick { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: var(--t-small); color: var(--dim); background: var(--field); min-width: 0; white-space: nowrap; transition: border-color .15s; }
.pick:hover, .pick:focus-within { border-color: var(--line-3); }
.pick select { appearance: none; -webkit-appearance: none; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-weight: 500; padding: 0 18px 0 0; min-width: 0; flex: 1; cursor: pointer; text-overflow: ellipsis; }
.pick select option { background: var(--card); color: var(--ink); }
.pick:has(select)::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; border-right: 1.6px solid var(--dim); border-bottom: 1.6px solid var(--dim); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pick.toggle { color: var(--dim); font-weight: 500; justify-content: center; }
.pick.toggle svg { width: 16px; height: 16px; flex: none; }
.pick.toggle[aria-pressed="true"] { border-color: var(--up); color: var(--up); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--pill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { flex: none; height: 30px; padding: 0 12px; border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; color: var(--dim); white-space: nowrap; transition: color .15s, background .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.seg.ages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-color: var(--line-2); }
.seg.ages button { padding: 0 6px; }

/* ---------- the list: a card on a phone, a table from 680px ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
.list { container-type: inline-size; container-name: list; min-width: 0; }
.colhead { display: none; }
/* No browser holds the window to a box of this page. One that does follows a row of the list to its new rank, by
   thousands of pixels, and loses its hold whenever the box it held is written again. The page keeps the reader's
   place itself (public/js/hold.js), the same way in every browser. */
.bar, .page, .detail, .alerts { overflow-anchor: none; }
#list { display: grid; gap: 8px; }
/* The word that the ranking moved while the list was read. It takes the visitor to the top, where it is ranked again. */
.relist { position: fixed; left: 50%; top: calc(var(--stick) + 12px + env(safe-area-inset-top, 0px)); z-index: 19; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--ink); color: var(--on-ink); font-size: var(--t-small); font-weight: 600; white-space: nowrap; box-shadow: 0 6px 24px var(--shade); }
.relist[hidden] { display: none; }
.relist svg { width: 16px; height: 16px; flex: none; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); transition: background .15s, border-color .15s; }
.row:hover { background: var(--card-2); border-color: var(--line-2); }
.row.sel { border-color: var(--line-3); background: var(--card-2); }
.row.justin { border-color: var(--up-soft); }
/* The line over the first row of a later part of the list: what waits for a check, what carries a red flag. The words stand in the gap above it. */
.rowcut { display: none; }
/* The room over the row is the height of what stands in it: a line, the title on one line and the sentence on one. */
.row.cut { position: relative; margin-top: 98px; }
.row.cut > .rowcut { display: block; position: absolute; left: 2px; right: 2px; bottom: calc(100% + 12px); padding-top: 18px; border-top: 1px solid var(--line-2); }
.cut-t { display: block; font-family: var(--display); font-weight: 800; font-stretch: 68%; font-size: var(--t-title); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.cut-s { display: block; margin-top: 5px; font-size: var(--t-label); line-height: 1.3; color: var(--dim); letter-spacing: .01em; }
/* On a narrow list the sentence takes two lines. */
@container list (max-width: 420px) { .row.cut { margin-top: 114px; } }
.row.moved { transition: transform .38s cubic-bezier(.2, .7, .2, 1), background .15s, border-color .15s; }
.row.fresh { animation: arrive .45s ease both; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.skel { height: 74px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(100deg, var(--card) 30%, var(--card-2) 50%, var(--card) 70%); background-size: 300% 100%; animation: sweep 1.6s linear infinite; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.main { text-align: left; display: grid; min-width: 0; border-radius: var(--r); padding: 14px 0 14px 14px; gap: 12px 10px;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  grid-template-areas: "token token token heat" "tags tags tags tags" "cap c5 c1 c24" "vol liq spark spark"; }
.c-token { grid-area: token; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 14px; align-items: center; min-width: 0; padding-left: 3px; }
.c-name { display: grid; gap: 1px; min-width: 0; }
/* The ring around a logo is the colour of the chain, the same colour the chain wears in every chart. */
.ico { --c: var(--line-2); width: 38px; height: 38px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; font-weight: 600; font-size: var(--t-base); color: var(--dim); overflow: hidden; flex: none; outline: 2px solid var(--c); outline-offset: 2px; }
.ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sym { font-weight: 600; font-size: var(--t-num); letter-spacing: -.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.meta { font-size: var(--t-small); color: var(--dim); white-space: nowrap; }
/* A line of parts: chain, age, venue. Each part is written whole or not at all. A part
   with no room left goes to a second line, and the line shows the first one only. The
   parts are in the order they matter, so what is left out is what matters least. */
/* A line of parts that may take more than one line: "Robinhood · $53.2K mcap · 14m old".
   It breaks between parts. The dot of a part sits in a margin to its left, and the first
   margin of every line is cut away, so no line starts or ends with a dot. */
.dotline { display: flex; flex-wrap: wrap; align-content: flex-start; align-self: start; margin-left: -1.1em; clip-path: inset(0 0 0 1.1em); min-width: 0; line-height: 1.4; }
.dotline > span { position: relative; padding-left: 1.1em; white-space: nowrap; }
.dotline > span::before { content: '·'; position: absolute; left: 0; width: 1.1em; text-align: center; }
.bits { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; line-height: 1.4; max-height: 1.4em; overflow: hidden; }
.bits > span { flex: none; white-space: nowrap; }
.bits > span + span::before { content: '·'; margin: 0 .38em; }
.ch { color: var(--text); font-weight: 500; }
.ch i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tags:empty { display: none; }
.cell { display: grid; gap: 2px; align-content: start; min-width: 0; }
.cell:empty, .c-spark:empty { visibility: hidden; }
.cell .k { font-size: var(--t-label); font-weight: 500; color: var(--dim); white-space: nowrap; }
.cell .v { font-weight: 500; font-size: var(--t-base); letter-spacing: -.01em; line-height: 1.25; color: var(--ink); white-space: nowrap; border-radius: 6px; }
.cell .v.cap { font-weight: 600; font-size: var(--t-lead); transition: color .6s, background-color .6s; }
.cell .v.up { color: var(--up); }
.cell .v.dn { color: var(--down); }
/* A price that just changed flashes once, in the colour of its direction. */
.cell .v.tick-up { color: var(--up); background: var(--up-wash); box-shadow: 0 0 0 4px var(--up-wash); transition: none; }
.cell .v.tick-down { color: var(--down); background: var(--down-wash); box-shadow: 0 0 0 4px var(--down-wash); transition: none; }
.cell .s { display: none; font-size: var(--t-label); color: var(--dim); white-space: nowrap; }
.c-cap { grid-area: cap; }
.c-c5 { grid-area: c5; }
.c-c1 { grid-area: c1; }
.c-c24 { grid-area: c24; }
.c-vol { grid-area: vol; }
.c-liq { grid-area: liq; }
.c-flow { grid-area: flow; display: none; }
.c-heat { grid-area: heat; justify-items: end; text-align: right; align-self: center; }
.heat { font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -.03em; color: var(--dim); }
.heat.hot { color: var(--up); }
.heat.mid { color: var(--ink); }
.c-spark { grid-area: spark; align-self: end; min-width: 0; }
.spark { width: 100%; height: 36px; display: block; color: var(--dim); overflow: visible; }
.spark.up { color: var(--up); }
.spark.down { color: var(--down); }
.flow { height: 6px; background: var(--track); display: block; border-radius: var(--pill); overflow: hidden; }
.flow i { display: block; height: 100%; background: var(--up); border-radius: var(--pill); transition: width .5s ease; }
.star { display: grid; place-items: start center; padding-top: 20px; color: var(--faint); border-radius: var(--r); }
/* The narrowest phones: the card gives its margins to the numbers. */
@container list (max-width: 330px) {
  .main { padding-left: 10px; gap: 12px 8px; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
  .row { grid-template-columns: minmax(0, 1fr) 36px; }
  .cell .v { font-size: var(--t-body); }
  .cell .v.cap { font-size: var(--t-base); }
  .c-token { gap: 0 12px; padding-left: 2px; }
}
.star:hover { color: var(--ink); }
.star svg { width: 20px; height: 20px; }
.star[aria-pressed="true"] { color: var(--up); }
.star[aria-pressed="true"] svg path { fill: var(--up); }
.empty { padding: 30px 18px; color: var(--dim); font-size: var(--t-base); border: 1px dashed var(--line-2); border-radius: var(--r); max-width: 64ch; }
.empty b { color: var(--ink); font-weight: 500; }
.chg { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-body); color: var(--dim); }
.chg b { font-weight: 500; }
.chg:empty { display: none; }

/* ---------- tags and flags ---------- */
.tag { display: inline-flex; align-items: center; font-size: var(--t-tag); font-weight: 600; letter-spacing: .03em; padding: 3px 9px; border-radius: var(--pill); line-height: 1.35; white-space: nowrap; }
.tag svg { width: 10px; height: 10px; margin-right: 4px; flex: none; }
.tag.solid { background: var(--ink); color: var(--on-ink); }
.tag.volt { background: var(--volt); color: var(--volt-ink); }
.tag.line { border: 1px solid var(--line-2); color: var(--dim); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.down { background: var(--down-soft); color: var(--down); }
.tag.risk-danger { background: var(--flag-red); color: var(--on-flag-red); }
.tag.risk-warn { background: var(--flag-amber); color: var(--on-flag-amber); }

/* ---------- the table ---------- */
@container list (min-width: 680px) {
  .colhead { display: grid; gap: 0 12px; align-items: center; height: 42px; padding: 0 41px 0 17px; margin-bottom: 8px; position: sticky; top: var(--stick); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); font-size: var(--t-label); font-weight: 500; color: var(--dim); }
  .colhead > * { justify-self: end; text-align: right; white-space: nowrap; }
  .colhead > .c-token { justify-self: start; display: flex; align-items: center; gap: 12px; padding-left: 0; grid-template-columns: none; }
  .colhead > .c-heat { align-self: center; }
  .colhead > .c-flow, .colhead > .c-spark { justify-self: start; text-align: left; }
  .colhead button { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; margin: 0 -8px; border-radius: 8px; font-weight: 500; transition: color .15s, background .15s; }
  .colhead button:hover { color: var(--ink); background: var(--hover); }
  .colhead button[aria-pressed="true"] { color: var(--ink); }
  .colhead button svg { width: 11px; height: 11px; color: var(--up); flex: none; }
  .colhead .by-age { margin: 0; border: 1px solid var(--line-2); border-radius: var(--pill); height: 24px; padding: 0 9px; color: var(--faint); }
  .colhead .by-age[aria-pressed="true"] { border-color: var(--line-3); }
  #list { gap: 6px; }
  .colhead, .main { grid-template-columns: minmax(170px, 1.5fr) 100px 62px 62px minmax(104px, 1fr) 46px; }
  .colhead { grid-template-areas: "token cap c5 c1 vol heat"; }
  .main { grid-template-areas: "token cap c5 c1 vol heat" "tags tags tags tags tags tags"; align-items: center; gap: 6px 12px; padding: 11px 0 11px 16px; }
  .main:has(.tags:empty) { grid-template-areas: "token cap c5 c1 vol heat"; }
  .c-token { grid-template-columns: 34px minmax(0, 1fr); }
  .ico { width: 34px; height: 34px; }
  .sym { font-size: var(--t-base); }
  .meta { font-size: var(--t-label); }
  /* A flag is never hidden: tags that have no room go to the next line. */
  .tags { padding-left: 51px; }
  .cell { justify-items: end; text-align: right; }
  .cell .k { display: none; }
  .cell .s { display: block; max-width: 100%; }
  .cell .v { font-size: var(--t-body); max-width: 100%; }
  .cell .v.cap { font-size: var(--t-lead); }
  .heat { font-size: var(--t-big); }
  .c-c24, .c-liq, .c-flow, .c-spark, .colhead > .c-c24, .colhead > .c-liq, .colhead > .c-flow, .colhead > .c-spark { display: none; }
  .star { place-items: center; padding-top: 0; }
}
@container list (min-width: 920px) {
  .colhead, .main { grid-template-columns: minmax(190px, 1.6fr) 104px 62px 62px 74px minmax(112px, 1fr) 100px 48px; }
  .colhead { grid-template-areas: "token cap c5 c1 c24 vol liq heat"; }
  .main { grid-template-areas: "token cap c5 c1 c24 vol liq heat" "tags tags tags tags tags tags tags tags"; }
  .main:has(.tags:empty) { grid-template-areas: "token cap c5 c1 c24 vol liq heat"; }
  .c-c24, .c-liq { display: grid; }
  .colhead > .c-c24, .colhead > .c-liq { display: inline-flex; }
}
@container list (min-width: 1040px) {
  .colhead, .main { grid-template-columns: minmax(190px, 1.6fr) 104px 62px 62px 74px minmax(112px, 1fr) 100px 96px 48px; }
  .colhead { grid-template-areas: "token cap c5 c1 c24 vol liq spark heat"; }
  .main { grid-template-areas: "token cap c5 c1 c24 vol liq spark heat" "tags tags tags tags tags tags tags tags tags"; }
  .main:has(.tags:empty) { grid-template-areas: "token cap c5 c1 c24 vol liq spark heat"; }
  .c-spark, .colhead > .c-spark { display: block; align-self: center; }
  .spark { height: 32px; }
}
@container list (min-width: 1160px) {
  .colhead, .main { grid-template-columns: minmax(200px, 1.6fr) 108px 64px 64px 76px minmax(116px, 1fr) 104px 132px 96px 48px; }
  .colhead { grid-template-areas: "token cap c5 c1 c24 vol liq flow spark heat"; }
  .main { grid-template-areas: "token cap c5 c1 c24 vol liq flow spark heat" "tags tags tags tags tags tags tags tags tags tags"; }
  .main:has(.tags:empty) { grid-template-areas: "token cap c5 c1 c24 vol liq flow spark heat"; }
  .c-flow { display: grid; gap: 6px; justify-items: stretch; text-align: left; align-content: center; }
  .colhead > .c-flow { display: block; }
  .c-flow .s { display: flex; justify-content: space-between; gap: 8px; }
}

/* ---------- token screen ---------- */
.detail { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.dbar { position: sticky; top: 0; z-index: 2; background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dnums { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 16px 18px; }
.dnum { display: grid; gap: 2px; align-content: start; min-width: 0; }
.dnum .k { font-size: var(--t-label); font-weight: 500; color: var(--dim); }
.dnum b { font-weight: 500; font-size: var(--t-big); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.dnum .s { font-size: var(--t-label); color: var(--faint); }
.dnum.lead { grid-column: 1 / -1; }
.dnum.lead b { font-size: var(--t-hero); letter-spacing: -.03em; line-height: 1.05; }
.chg.wide { font-size: var(--t-base); gap: 4px 18px; }
.dbar .sp { flex: 1; }
.btn { border: 1px solid var(--line-2); border-radius: var(--pill); padding: 0 16px; height: 40px; font-weight: 500; font-size: var(--t-body); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 600; }
.btn[aria-pressed="true"] { border-color: var(--up); color: var(--up); }
.dbody { padding: 18px 16px 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 820px; margin: 0 auto; }
.dbody > * { min-width: 0; }
/* ---------- the screen of a token as a report ---------- */
/* What the checks found, said before anything is drawn. Smaller than the sentence of a screen: this column is narrow. */
.verdict.tok { margin: -4px 0 0; max-width: none; font-size: clamp(26px, 7.4vw, 34px); line-height: 1; }
.verdict.tok:empty { display: none; }
.dbody > .toc { padding: 0; }
.dbody > .toc:empty { display: none; }
/* A section of the screen stands on it under a line, its place in the order and its title, as on the Market. The
   count is made by the box and written by the title, and a box that is not drawn counts for nothing. */
.dsecs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; counter-reset: dsec; }
.dsecs > .sec { counter-increment: dsec; min-width: 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; padding: 20px 0 26px; scroll-margin-top: 62px; }
.dsecs > .sec:last-child { padding-bottom: 6px; }
.dsecs > .sec > h3 { flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 8px 10px; margin-bottom: 14px; }
.dsecs > .sec > h3::before { content: counter(dsec, decimal-leading-zero); font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: .08em; color: var(--up); }
.dsecs > .sec > h3 > span:first-child { flex: 1 1 auto; min-width: 0; color: var(--ink); font-family: var(--display); font-weight: 800; font-stretch: 68%; font-size: var(--t-title); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; }
.dsecs > .sec > h3 > .seg { align-self: center; }
/* What a title is about, said beside it in the small type of a label. */
.qual { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.qual b { color: var(--ink); font-weight: 500; }
.dtitle { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; align-items: center; }
.dtitle .ico { width: 52px; height: 52px; font-size: 20px; grid-row: 1 / span 2; }
.dtitle h2 { margin: 0; font-weight: 500; font-size: clamp(26px, 7vw, 34px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); overflow-wrap: anywhere; }
.dtitle .meta { white-space: normal; }
.actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.addr { font-size: var(--t-small); color: var(--faint); overflow-wrap: anywhere; }
.sec { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 16px; }
.sec h3 { margin: 0 0 12px; font-size: var(--t-small); color: var(--dim); font-weight: 400; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sec h3 b { color: var(--ink); font-weight: 500; }
.chartbox { overflow-x: auto; scrollbar-width: none; }
.sec h3 .seg button { height: 26px; padding: 0 10px; font-size: var(--t-label); }
.chart { width: 100%; height: auto; display: block; }
.chart .cl { fill: none; stroke: var(--up); stroke-width: 2; stroke-linejoin: round; }
.chart.down .cl { stroke: var(--down); }
.chart .cl.tail { stroke-dasharray: 6 6; stroke-linecap: round; }
.chart .wick { stroke-width: 1.2; }
.chart .wick.up { stroke: var(--up); }
.chart .wick.down { stroke: var(--down); }
.chart .body.up { fill: var(--up); }
.chart .body.down { fill: var(--down); }
.chart .now { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 2 5; }
.chart .tagbox { fill: var(--ink); }
.chart .tagtext { fill: var(--on-ink); font-size: var(--t-label); font-weight: 600; font-family: var(--face); }
.chartnote { margin-top: 8px; }
/* Notes that follow each other stand together and take the width of their card: two columns
   where two fit, one on a phone and in the screen of a token. A note that stands alone runs
   over the width of the card, up to the length of a line a reader can follow. */
.notes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); columns: 2 380px; column-gap: 48px; }
.notes > .fine { max-width: none; margin: 0 0 8px; break-inside: avoid; }
.notes > .fine:last-child { margin-bottom: 0; }
.notes.one { columns: auto; }
.notes.one > .fine { max-width: 120ch; }
.chart .cd { fill: var(--up); }
.chart.down .cd { fill: var(--down); }
.chart .cg { stroke: var(--hair); stroke-width: 1; }
.chart .ct { fill: var(--dim); font-size: var(--t-label); font-family: var(--face); }
.chart .ct.strong { fill: var(--ink); font-weight: 500; }
.chart .vb.up { fill: var(--up-soft); }
.chart .vb.down { fill: var(--down-mid); }
.tablebox { overflow-x: auto; scrollbar-width: none; margin: -4px -6px; }
table { border-collapse: collapse; width: 100%; min-width: 470px; font-size: var(--t-body); }
th, td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: var(--t-label); color: var(--faint); font-weight: 400; }
td { color: var(--text); }
th:first-child, td:first-child { text-align: left; color: var(--dim); }
tr:last-child td { border-bottom: 0; }
.parts { display: grid; gap: 12px; }
.part { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: var(--t-body); color: var(--text); }
.part > span:first-child { white-space: nowrap; }
.part .bar2 { flex: 0 0 100%; margin-top: 2px; height: 6px; background: var(--track); border-radius: var(--pill); overflow: hidden; }
.part .bar2 i { display: block; height: 100%; background: var(--up); border-radius: var(--pill); }
.part > span:nth-child(2) { min-width: 0; color: var(--dim); }
.facts { display: grid; gap: 10px; }
.fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: var(--t-body); color: var(--dim); }
.trade { display: grid; grid-template-columns: 46px 52px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); align-items: center; }
.trade:last-child { border-bottom: 0; }
.trade .w { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.trade .t { color: var(--faint); }
.trade b { color: var(--ink); font-weight: 500; }
.fine { font-size: var(--t-small); color: var(--faint); max-width: 70ch; }

/* ---------- risk ---------- */
.risk { display: grid; gap: 2px; }
.rf { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--text); }
.rf:last-child { border-bottom: 0; }
.rf .mk { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; justify-self: center; background: var(--faint); }
.rf.danger .mk { background: var(--down); }
.rf.warn .mk { background: var(--warn); }
.rf.good .mk { background: var(--up); }
.rf.danger .tx { color: var(--ink); }
/* A scanner may write an address inside a fact, a word of forty letters: it breaks where it must. */
.tx { min-width: 0; overflow-wrap: anywhere; }
.rf .more { display: block; color: var(--faint); font-size: var(--t-small); margin-top: 2px; }
.rf .by { color: var(--faint); font-size: var(--t-label); white-space: nowrap; padding-top: 2px; }
.risksum { display: flex; flex-wrap: wrap; gap: 6px; }
/* The six questions of a trader. The mark of a question says what was found by its form and by its colour,
   and the words next to it say the same. */
.cks { display: grid; gap: 8px; }
.ck { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); padding: 2px 14px; }
.ck-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 44px; padding: 6px 0; }
.ck-h b { font-weight: 600; font-size: var(--t-base); letter-spacing: -.01em; color: var(--ink); }
.ck-s { margin-left: auto; font-size: var(--t-small); color: var(--dim); white-space: nowrap; }
.ck-mk { flex: none; width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; background: var(--up); }
.ck.danger { border-color: var(--flag-red); }
.ck.danger .ck-mk { background: var(--down); border-radius: 2px; }
.ck.danger .ck-s { color: var(--down); font-weight: 500; }
.ck.warn .ck-mk { background: var(--warn); border-radius: 2px; transform: rotate(45deg); }
.ck.warn .ck-s { color: var(--warn); font-weight: 500; }
.ck.unchecked .ck-mk { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.ck .risk { border-top: 1px solid var(--line); }
/* A question that read and found nothing keeps what it read behind itself. The mark at its end says it opens. */
details.ck > summary { cursor: pointer; list-style: none; }
details.ck > summary::-webkit-details-marker { display: none; }
details.ck > summary::after { content: ""; flex: none; width: 6px; height: 6px; margin: -3px 2px 0 6px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: rotate(45deg); }
details.ck[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
details.ck > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

/* ---------- market ---------- */
/* A section of the Market and of the Trenches stands on the page itself: a line over it, its place in the order of
   the screen, and a title a reader finds at a glance. Only a drawing keeps a frame. Until 2026-10-11 every section
   was a box and its title was set in the size of running text, so a screen fifteen and twenty-three lengths of a
   phone long had nothing to say which part was which. The section counts and its title writes the count: a count
   made inside a title would start again in every section. */
.market { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; container-type: inline-size; counter-reset: sec; }
.market .sec { min-width: 0; }
.market > .sec { counter-increment: sec; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; padding: 22px 0 28px; }
.market > .sec:first-child { border-top: 0; padding-top: 2px; }
.market .sec h3 { flex-wrap: wrap; }
.market > .sec > h3 { justify-content: flex-start; align-items: baseline; margin-bottom: 6px; }
.market > .sec > h3::before { content: counter(sec, decimal-leading-zero); font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: .08em; color: var(--up); }
/* The title takes the room beside its number and wraps inside it. What a section lets a visitor choose stands after it, or under it where there is no room. */
.market .sec h3 > span:first-child { flex: 1 1 60%; min-width: 0; color: var(--ink); font-family: var(--display); font-weight: 800; font-stretch: 68%; font-size: var(--t-title); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; }
.market .ctl { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
/* ---------- the pieces a screen opens with ---------- */
/* The head of a screen is no numbered section: its title is the line over the sentence the screen opens with. */
.market > .sec.opens { counter-increment: none; }
.market > .sec.opens > h3::before { content: none; }
.market > .sec.opens > h3 > span:first-child { font-family: var(--mono); font-weight: 500; font-size: var(--t-label); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
/* What a screen has to say, in one measured sentence, in the largest type of the page. */
.verdict { margin: 6px 0 12px; max-width: 20ch; font-family: var(--display); font-weight: 800; font-stretch: 62%; font-size: clamp(40px, 11vw, 68px); line-height: .96; letter-spacing: 0; text-transform: uppercase; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
/* The way to each section: every one in sight, on as many lines as it takes. */
.toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; padding: 0 0 26px; }
.tock { flex: 1 0 100%; font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
/* A way to a section is a filled chip, so it is not taken for the outlined button that opens a detail. */
.toc button { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); font: inherit; font-size: var(--t-small); font-weight: 500; color: var(--ink); white-space: nowrap; cursor: pointer; }
.toc button:hover { border-color: var(--line-3); background: var(--card-2); }
.toc button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* What a section found, said over its drawings. */
.said { margin: 2px 0 16px; max-width: 72ch; font-size: var(--t-base); line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
/* A title a way leads to stops under the bar of the page. */
.sec h3[id] { scroll-margin-top: calc(var(--bar, 56px) + 16px); }
/* ---------- a drawing of a chapter ---------- */
/* A chapter of the Market holds several drawings. Each stands under a title of its own, one step smaller than the
   title of the chapter, with what it lets a visitor choose beside it. A line parts it from the drawing before. */
.fig { min-width: 0; }
.fig + .fig, .moodgrid + .fig { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.fig > h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; font-size: var(--t-lead); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.fig > h4 > span:first-child { flex: 1 1 40%; min-width: 0; }
.fig > h4 .seg button { height: 26px; padding: 0 10px; font-size: var(--t-label); }
.hm { position: relative; width: 100%; border-radius: var(--r-sm); overflow: hidden; background: var(--bg); }
.hm.wide { aspect-ratio: 1000 / 520; }
.hm.tall { aspect-ratio: 1000 / 1250; }
.hm-chain { position: absolute; pointer-events: none; border: 2px solid var(--card); border-radius: 8px; z-index: 2; }
.hm-name { position: absolute; left: 0; top: 0; right: 0; height: 22px; padding: 0 8px; display: flex; align-items: center; gap: 6px; font-size: var(--t-label); color: var(--dim); background: var(--card); white-space: nowrap; overflow: hidden; border-radius: 6px 6px 0 0; }
.hm-name i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hm-name b { color: var(--text); font-weight: 500; }
.hm-tile { position: absolute; border: 1px solid var(--card); overflow: hidden; display: grid; align-content: center; justify-items: center; gap: 1px; padding: 2px; text-align: center; line-height: 1.15; transition: filter .12s; min-width: 0; }
.hm-tile > span { max-width: 100%; white-space: nowrap; }
.hm-tile:hover, .hm-tile:focus-visible { filter: brightness(1.18); z-index: 3; }
.hm-sym { font-weight: 600; font-size: var(--t-small); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-val { font-size: var(--t-label); font-weight: 500; opacity: .9; }
.hm-sub { font-size: var(--t-tag); opacity: .7; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 12px; font-size: var(--t-label); color: var(--dim); }
/* A label of a legend stays on one line while the legend has room for it, and breaks between words when it has not. */
.lg { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.lg > :first-child { flex: none; }
.lg i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.lg i.round { border-radius: 50%; width: 9px; height: 9px; }
.ramp { display: inline-flex; border-radius: 3px; overflow: hidden; }
.ramp i { width: 18px; height: 12px; display: block; }
.chains { display: grid; gap: 4px; }
.chainrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name name top" "bar bar bar" "n1 n3 n4"; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.chainrow:last-child { border-bottom: 0; }
.cr-name { grid-area: name; display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 0 8px; align-items: center; min-width: 0; }
.cr-name i { width: 9px; height: 9px; border-radius: 50%; }
.cr-name b { color: var(--ink); font-weight: 500; font-size: var(--t-base); }
.cr-name > .dotline { grid-column: 2; font-size: var(--t-label); color: var(--dim); }
.cr-bar { grid-area: bar; height: 10px; background: var(--hair); border-radius: var(--pill); overflow: hidden; }
.cr-bar i { display: block; height: 100%; border-radius: var(--pill); }
.cr-num { display: grid; gap: 1px; min-width: 0; }
.cr-num b { color: var(--ink); font-weight: 500; font-size: var(--t-base); }
.cr-num span { font-size: var(--t-label); color: var(--faint); white-space: nowrap; }
.chainrow .cr-num:nth-of-type(3) { grid-area: n1; }
.chainrow .cr-num:nth-of-type(4) { display: none; }
.chainrow .cr-num:nth-of-type(5) { grid-area: n3; }
.chainrow .cr-num:nth-of-type(6) { grid-area: n4; }
.chainrow .cr-num:nth-of-type(7) { display: none; }
.cr-top { grid-area: top; display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: baseline; justify-content: end; text-align: right; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 12px; min-width: 0; }
span.cr-top { border: 0; }
.cr-top span { grid-column: 1 / -1; font-size: var(--t-label); color: var(--faint); }
.cr-top b { color: var(--ink); font-weight: 600; font-size: var(--t-body); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-top em { font-style: normal; color: var(--up); font-weight: 500; font-size: var(--t-body); }
.pulse { display: grid; gap: 4px; }
.pr { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: center; }
.pr-name { font-size: var(--t-small); color: var(--text); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; }
.pr-name i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pr-cells { display: grid; gap: 2px; }
.pc { display: block; height: 26px; border-radius: 3px; min-width: 0; }
.pc.none { background: repeating-linear-gradient(135deg, var(--sheen) 0 3px, transparent 3px 6px); }
.pr-ticks { display: flex; justify-content: space-between; font-size: var(--t-label); color: var(--faint); }
.bubbles { width: 100%; height: auto; display: block; }
.bubbles .bg { stroke: var(--hair); stroke-width: 1; }
.bubbles .bt { fill: var(--dim); font-size: var(--t-label); font-family: var(--face); }
.bubbles .bub { cursor: pointer; }
.bubbles .bub circle { fill-opacity: .78; stroke: var(--card); stroke-width: 2; transition: fill-opacity .12s; }
.bubbles .bub:hover circle, .bubbles .bub:focus-visible circle { fill-opacity: 1; stroke: var(--ink); }
.bubbles .bub:focus { outline: none; }
.bubbles .bn { fill: var(--on-chain); font-size: var(--t-tag); font-weight: 600; font-family: var(--face); pointer-events: none; }
.scrollx { overflow-x: auto; scrollbar-width: none; }
.scrollx::-webkit-scrollbar { display: none; }
details.alt { margin-top: 12px; }
/* A table and the notes of a section wait behind two buttons that stand side by side. What is
   opened takes a line of its own, over the width of the card. */
.market details.beside, .market details.howto, .market .mv-alt { display: inline-block; vertical-align: top; margin: 12px 8px 0 0; }
.market details.beside[open], .market details.howto[open], .market .mv-alt.open { display: block; margin-right: 0; }
details.howto summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--pill); padding: 5px 12px; font-size: var(--t-small); color: var(--dim); }
details.howto summary::-webkit-details-marker { display: none; }
details.howto summary:hover { color: var(--ink); }
details.howto summary .src { color: var(--faint); font-size: var(--t-label); }
details.howto summary .src::before { content: "· "; }
details.howto[open] summary { margin-bottom: 12px; color: var(--ink); }
.notes-in { columns: 2 380px; column-gap: 48px; }
.notes-in > .fine { max-width: none; margin: 0 0 8px; break-inside: avoid; }
.notes-in > .fine:last-child { margin-bottom: 0; }
.notes-in.one { columns: auto; }
.notes-in.one > .fine { max-width: 120ch; }
details.alt summary { cursor: pointer; font-size: var(--t-small); color: var(--dim); list-style: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: var(--pill); padding: 5px 12px; }
details.alt summary::-webkit-details-marker { display: none; }
details.alt[open] summary { margin-bottom: 12px; color: var(--ink); }
/* What holds a drawing of its own waits behind a row over the width of its section: a line, what it is, and a mark
   that turns when it opens. A pill is a table, the notes or the rest of a list. A row is another drawing. */
details.drawn { margin-top: 0; border-top: 1px solid var(--line); }
:not(details.drawn) + details.drawn { margin-top: 18px; }
details.drawn:last-child { border-bottom: 1px solid var(--line); }
details.drawn > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 8px 2px; border: 0; border-radius: 0; font-size: var(--t-base); font-weight: 500; line-height: 1.3; color: var(--ink); }
details.drawn > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 6px 0 0; border-right: 1.6px solid var(--dim); border-bottom: 1.6px solid var(--dim); transform: rotate(45deg); }
details.drawn[open] > summary { margin-bottom: 6px; }
details.drawn[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
details.drawn[open] { padding-bottom: 20px; }
details.drawn > summary:hover::after { border-color: var(--ink); }
details.drawn > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- mood of the wider market ---------- */
.moodgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.moodgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.moodcard { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.moodcard .k { font-size: var(--t-label); font-weight: 500; color: var(--dim); }
.moodcard .mood-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.moodcard .mood-now > b { font-weight: 500; font-size: var(--t-hero); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.moodcard .zone { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-base); font-weight: 500; color: var(--ink); }
.moodcard .zone i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.moodcard .s { font-size: var(--t-small); color: var(--dim); }
.moodcard .s b { font-weight: 500; color: var(--ink); }
.moodcard .s b.up { color: var(--up); }
.moodcard .s b.dn { color: var(--down); }
.moodcard .ends { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-label); color: var(--faint); margin-top: 6px; }
.moodcard .fine { margin-top: 10px; }
.moodcard .wait { padding: 26px 0; }
.moodchart { width: 100%; height: auto; display: block; margin-top: 14px; }
.moodchart .tg { stroke: var(--hair); stroke-width: 1; }
.moodchart .tt { fill: var(--dim); font-size: var(--t-label); font-family: var(--face); }
.moodchart .fb { opacity: .78; transition: opacity .12s; }
.moodchart .fb.now, .moodchart .fb:hover { opacity: 1; }
.moodchart .ml { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.moodchart .me { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.moodchart .hit { fill: transparent; }
.moodchart .hit:hover { fill: var(--hover); }
.z0 { background: var(--z0); fill: var(--z0); }
.z1 { background: var(--z1); fill: var(--z1); }
.z2 { background: var(--z2); fill: var(--z2); }
.z3 { background: var(--z3); fill: var(--z3); }
.z4 { background: var(--z4); fill: var(--z4); }
.meter i.z0, .meter i.z1, .meter i.z2, .meter i.z3, .meter i.z4 { background: var(--ink); }

/* ---------- maker, tip ---------- */
.maker { display: grid; gap: 8px; font-size: var(--t-small); color: var(--dim); }
.maker a { color: var(--text); text-decoration: none; }
.maker a:hover { color: var(--ink); }
.makermark { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--t-base); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.makermark img { display: block; flex: none; }
.tipbtn { justify-self: start; border: 1px solid var(--line-2); border-radius: var(--pill); height: 32px; padding: 0 13px; font-size: var(--t-small); font-weight: 500; color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.tipbtn:hover { border-color: var(--up); color: var(--up); }
.tipbtn svg { width: 14px; height: 14px; }
dialog.sheet { border: 1px solid var(--line-2); border-radius: 20px; background: var(--card); color: var(--text); padding: 0; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 40px); }
dialog.sheet::backdrop { background: var(--shade); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet-in { padding: 22px; display: grid; gap: 16px; }
.sheet h2 { margin: 0; font-weight: 500; font-size: var(--t-big); letter-spacing: -.02em; color: var(--ink); }
.sheet p { margin: 0; font-size: var(--t-body); color: var(--dim); }
.tipline { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; background: var(--bg); }
.tipline b { color: var(--ink); font-weight: 500; font-size: var(--t-body); }
.tipline span { font-size: var(--t-label); color: var(--faint); }
.tipline code { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--t-label); color: var(--text); overflow-wrap: anywhere; line-height: 1.45; }
.tipline .btn { grid-row: 1 / span 2; grid-column: 2; height: 34px; padding: 0 14px; font-size: var(--t-small); }

/* ---------- small pieces ---------- */
.fine.padded { padding: 26px 2px; }
.lost { display: grid; gap: 18px; align-content: start; justify-items: start; padding-top: 12vh; max-width: 620px; }
.lost h1 { margin: 0; font-weight: 500; font-size: clamp(28px, 7vw, 40px); letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.lost p { margin: 0; }

/* ---------- token screen: actions, links, activity ---------- */
.actions #d-share { display: contents; }
.btn.grow { flex: 1 1 auto; justify-content: center; height: 46px; font-size: var(--t-base); }
.actions .btn { height: 46px; }
.btn.icon { width: 46px; padding: 0; justify-content: center; flex: none; }
/* Four actions do not fit in one line on the narrowest phones: the first one takes a line of its own. */
@media (max-width: 359px) {
  .actions { flex-wrap: wrap; }
  .actions .btn.grow { flex: 1 1 100%; }
}
.btn svg { width: 16px; height: 16px; flex: none; }
button.addr { text-align: left; font-family: var(--mono); font-size: var(--t-label); color: var(--faint); overflow-wrap: anywhere; line-height: 1.4; }
button.addr:hover { color: var(--dim); }
.linkrow { display: flex; flex-wrap: wrap; gap: 6px; }
.linkrow:empty { display: none; }
.lk { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; color: var(--dim); text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.lk:hover { color: var(--ink); border-color: var(--line-2); }
.lk svg { width: 12px; height: 12px; flex: none; }
/* The windows of a token stand side by side. Four of them need 74px each: a narrow phone shows them two by two. */
.wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wins[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.wins[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wins[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.win { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); transition: border-color .15s, background .15s; }
.win span { font-size: var(--t-label); color: var(--faint); }
.win b { font-weight: 500; font-size: var(--t-body); color: var(--text); }
.win b.up { color: var(--up); }
.win b.dn { color: var(--down); }
.win:hover { border-color: var(--line-2); }
.win[aria-pressed="true"] { border-color: var(--line-3); background: var(--card-2); }
.win[aria-pressed="true"] span { color: var(--text); }
.act { display: grid; gap: 14px; margin-top: 16px; }
.act-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--t-body); color: var(--dim); }
.act-line b { color: var(--ink); font-weight: 500; font-size: var(--t-num); letter-spacing: -.01em; }
.split { display: grid; gap: 6px; }
.split-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; font-size: var(--t-small); color: var(--dim); }
.split-head b { color: var(--ink); font-weight: 500; }
.split-head span:last-child { text-align: right; }
.split-head .pc { font-size: var(--t-label); color: var(--faint); }
.split-bar { display: flex; gap: 3px; height: 8px; }
.split-bar i { display: block; height: 100%; border-radius: var(--pill); min-width: 3px; }
.split-bar .l { background: var(--up); }
.split-bar .r { background: var(--down); }
.chartbox.wait { height: 300px; display: grid; place-items: center; border-radius: var(--r-sm); }
.chartbox.busy { background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%); background-size: 300% 100%; animation: sweep 1.6s linear infinite; }

/* ---------- trends ---------- */
.trendbox { min-width: 0; }
.trend { width: 100%; height: auto; display: block; touch-action: pan-y; }
.trend .tg { stroke: var(--hair); stroke-width: 1; }
.trend .tt { fill: var(--dim); font-size: var(--t-label); font-family: var(--face); }
.trend .tl { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend .te { stroke: var(--card); stroke-width: 2; }
.trend .tc { stroke: var(--line-3); stroke-width: 1; }
.trend .td { stroke: var(--card); stroke-width: 2; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-small); color: var(--dim); margin-bottom: 10px; }
.tk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tk i { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.tk b { color: var(--ink); font-weight: 500; min-width: 3ch; }
.tk.when { margin-left: auto; color: var(--faint); }
.sub-h { margin: 20px 0 10px; font-size: var(--t-small); font-weight: 400; color: var(--dim); }

/* ---------- numbers ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tile { display: grid; gap: 3px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); min-width: 0; }
.tile .k { font-size: var(--t-label); color: var(--dim); }
.tile b { font-weight: 500; font-size: var(--t-big); letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.tile.warn b { color: var(--warn); }
.tile.down b { color: var(--down); }
.tile .n { font-size: var(--t-label); color: var(--faint); line-height: 1.35; }

/* ---------- footer, toast, tab bar ---------- */
.foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: var(--t-small); color: var(--faint); max-width: 90ch; }
.foot a { color: var(--text); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--on-ink); font-weight: 500; padding: 10px 16px; font-size: var(--t-body); z-index: 50; max-width: calc(100vw - 32px); text-align: center; border-radius: var(--pill); }
.toast.down { background: var(--flag-red); color: var(--on-flag-red); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
.tabbar button, .tabbar a { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 7px 2px; font-size: var(--t-label); font-weight: 500; color: var(--dim); border-radius: 12px; text-decoration: none; white-space: nowrap; }
.tabbar button svg, .tabbar a svg { width: 23px; height: 23px; }
.tabbar button[aria-selected="true"], .tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar button[aria-selected="true"] svg, .tabbar a[aria-current="page"] svg { color: var(--up); }
.tabbar .n { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 17px; padding: 0 5px; border-radius: var(--pill); background: var(--volt); color: var(--volt-ink); font-size: var(--t-tag); font-weight: 600; line-height: 17px; text-align: center; }

/* ---------- wider screens ---------- */
@media (min-width: 712px) {
  /* The heads of the table sort the list, so the sort menu is only for the card layout. */
  .sortpick { display: none; }
  .tools, .tools.open { display: flex; gap: 8px; }
  #filtersbtn { display: none; }
  .toolbar > * { flex: 0 1 auto; }
  .toolbar > .tools { margin-left: auto; }
  .seg.ages { display: inline-flex; }
  .seg.ages button { padding: 0 12px; }
  .pick { height: 36px; padding: 0 12px; }
  .pick:has(select)::after { right: 12px; }
  .kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(310px, 1.5fr); overflow: visible; }
  /* On a wider screen the three tiles of the wallet share one row evenly. */
  .kpis.wl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.wl-tiles > .kpi:last-child { grid-column: auto; }
}
@media (min-width: 1000px) {
  :root { --stick: var(--bar); --strip: 36px; }
  .bar { position: sticky; top: 0; z-index: 20; height: var(--bar); padding: 0 28px; grid-template-columns: auto auto minmax(180px, 1fr) auto auto auto auto; grid-template-areas: "brand nav find live bell follow theme"; gap: 14px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .nav { grid-area: nav; display: flex; gap: 2px; }
  .nav button, .nav a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--pill); font-size: var(--t-body); font-weight: 500; color: var(--dim); white-space: nowrap; text-decoration: none; transition: color .15s, background .15s; }
  .nav button:hover, .nav a:hover { color: var(--ink); background: var(--hover); }
  .nav button svg, .nav a svg { width: 18px; height: 18px; flex: none; }
  .nav button[aria-selected="true"], .nav a[aria-current="page"] { color: var(--ink); background: var(--hover); }
  .nav button[aria-selected="true"] svg, .nav a[aria-current="page"] svg { color: var(--up); }
  .nav .n { min-width: 18px; padding: 0 6px; border-radius: var(--pill); background: var(--volt); color: var(--volt-ink); font-size: var(--t-tag); font-weight: 600; line-height: 18px; text-align: center; }
  .findrow { width: 100%; max-width: 520px; justify-self: center; }
  .search { height: 40px; }
  .search input { font-size: var(--t-body); }
  .themebtn span { display: none; }
  .live .when { display: inline; margin-left: -4px; }
  .page { padding: 0 28px calc(60px + var(--strip)); }
  .tabbar { display: none; }
  .toast { bottom: calc(24px + var(--strip)); }
  .titlerow { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-top: 26px; }
  .sub { text-align: right; }
  .kpis { margin-top: 16px; }
  .kpi { padding: 16px 18px; }
  .majors { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0; height: var(--strip); padding: 0 28px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .majors:empty { display: flex; }
}
@media (min-width: 1280px) {
  .cols.open { grid-template-columns: minmax(0, 1fr) 470px; }
  .detail { position: sticky; top: calc(var(--bar) + 14px); inset: auto; height: calc(100vh - var(--bar) - 28px - var(--strip)); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); padding: 0; z-index: 1; }
  .dbar { background: var(--bg); border-radius: var(--r) var(--r) 0 0; }
}
/* The table of the chains needs 852px of card: its eight columns at their least, and seven gaps.
   The container is the screen of the market, 34px wider than what a card holds. */
@container (min-width: 890px) {
  .chainrow { grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 1.6fr) repeat(5, minmax(70px, auto)) minmax(120px, auto); grid-template-areas: none; gap: 16px; padding: 12px 0; }
  .chainrow > * { grid-area: auto !important; }
  .chainrow .cr-num:nth-of-type(4), .chainrow .cr-num:nth-of-type(7) { display: grid; }
  .cr-num { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- room to breathe on large screens ---------- */
@container list (min-width: 1360px) {
  .colhead, .main { grid-template-columns: minmax(220px, 1.5fr) 116px 72px 72px 84px minmax(130px, 1fr) 112px 144px 112px 52px; gap: 6px 18px; }
  .colhead { gap: 0 18px; }
  .main { padding: 13px 0 13px 20px; }
  .colhead { padding-left: 21px; }
  .tags { padding-left: 51px; }
  .cell .v { font-size: var(--t-base); }
  .cell .v.cap { font-size: var(--t-num); }
  .sym { font-size: var(--t-lead); }
}
@media (min-width: 1280px) {
  .cols.open { grid-template-columns: minmax(0, 1fr) clamp(440px, 31vw, 600px); }
}
@media (min-width: 1440px) {
  .page { padding-left: 36px; padding-right: 36px; }
  .bar { padding: 0 36px; }
  .majors { padding: 0 36px; }
}

/* ---------- things a finger has to hit ---------- */
@media (max-width: 999px) {
  .seg button, .sec h3 .seg button, .fig > h4 .seg button { height: 34px; padding: 0 12px; }
  .trade .w { padding: 6px 0; }
  .maker a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; }
  .lk { height: 36px; }
  .il { width: 36px; height: 36px; }
}
button.addr { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--dim); }
button.addr:hover { color: var(--ink); border-color: var(--line-2); }

/* ---------- alerts ---------- */
.bellbtn { grid-area: bell; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; color: var(--dim); white-space: nowrap; transition: border-color .15s, color .15s; }
.bellbtn:hover, .bellbtn[aria-expanded="true"] { border-color: var(--line-3); color: var(--ink); }
.bellbtn svg { width: 16px; height: 16px; flex: none; }
.bellbtn > span:not(.n) { display: none; }
.bellbtn .n { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 0 5px; border-radius: var(--pill); background: var(--volt); color: var(--volt-ink); font-size: var(--t-tag); font-weight: 600; line-height: 18px; text-align: center; }
.alerts { position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; }
.alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alerts-head h2 { margin: 0; font-weight: 500; font-size: var(--t-big); letter-spacing: -.02em; color: var(--ink); }
.alerts-tabs { justify-self: start; min-height: 38px; }
.alerts-list { display: grid; gap: 6px; }
.al { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); transition: background .15s, border-color .15s; }
.al:hover { background: var(--card-2); border-color: var(--line-2); }
.al .ico { width: 34px; height: 34px; outline: 0; }
.al.fresh { border-color: var(--up-soft); }
.al.down.fresh { border-color: var(--down-mid); }
.al-body { display: grid; gap: 2px; min-width: 0; }
.al-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.al-top b { font-weight: 600; font-size: var(--t-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-kind { flex: none; font-size: var(--t-tag); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--pill); background: var(--up-wash); color: var(--up); }
.al.down .al-kind { background: var(--down-soft); color: var(--down); }
.al.warn .al-kind { background: var(--warn-soft); color: var(--warn); }
.al-text { font-size: var(--t-small); color: var(--dim); line-height: 1.35; }
.al-when { font-size: var(--t-label); color: var(--faint); white-space: nowrap; }
/* The bar holds four sections. With their icons and with the words of the two buttons it needs 1440px. */
@media (min-width: 1440px) {
  .bellbtn { width: auto; padding: 0 12px; }
  .bellbtn > span:not(.n) { display: inline; }
  .bellbtn .n { position: static; }
  .followbtn { width: auto; padding: 0 14px; }
  .followbtn span { display: inline; }
}
/* Five tabs with their drawings need the room of a wide screen. Under 1536px the tabs are words alone. */
@media (min-width: 1000px) and (max-width: 1535px) {
  .nav button, .nav a { padding: 0 11px; }
  .nav button svg, .nav a svg { display: none; }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  .live .when { display: none; }
  .bar { gap: 10px; grid-template-columns: auto auto minmax(150px, 1fr) auto auto auto auto; }
}
@media (max-width: 399px) {
  .live { padding: 6px 9px; }
  .live [data-live] { display: none; }
}
/* Under 375px the top row has no room for the name on one line beside the four
   controls. The name takes two lines, as tall as the mark, and the line of the
   maker leaves whole: it stays in the foot of the page. */
@media (max-width: 374px) {
  .wins[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand .name { grid-row: 1 / span 2; align-self: center; white-space: normal; font-size: var(--t-base); line-height: 1.07; }
  .studio { display: none; }
}
@media (min-width: 1000px) {
  .alerts { inset: var(--bar) 0 var(--strip) auto; width: min(420px, 100vw); border-left: 1px solid var(--line); padding: 18px 20px 24px; box-shadow: -24px 0 60px var(--shade); animation: slide .22s ease both; }
}
@keyframes slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- how the metas moved ---------- */
.mt-head { margin: 22px 0 4px; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.mt-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 8px; }
.mt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "line line"; gap: 10px 12px; align-items: start; padding: 12px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: transparent; }
.mt-name { grid-area: name; display: grid; gap: 1px; justify-items: start; min-width: 0; }
.mt-name span { font-size: var(--t-label); color: var(--dim); white-space: nowrap; }
.mt-word { max-width: 100%; min-height: 24px; padding: 0 6px; margin-left: -6px; border-radius: 8px; font-weight: 600; font-size: var(--t-base); letter-spacing: -.015em; color: var(--ink); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .15s; }
.mt-word:hover { background: var(--hover); }
.mt-word[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.mt-num { grid-area: num; display: grid; gap: 1px; justify-items: end; text-align: right; min-width: 0; }
.mt-num > b { color: var(--ink); font-weight: 500; font-size: var(--t-base); white-space: nowrap; }
.mt-num span { font-size: var(--t-label); color: var(--faint); white-space: nowrap; }
.mt-num span b { font-weight: 500; color: var(--text); }
.mt-num span b.up { color: var(--up); }
.mt-num span b.dn { color: var(--down); }
/* The past of a word: one bar per reading over a line that marks zero. The line runs the whole
   width, so a place without a bar reads as a reading that is missing, and not as a drawing cut short. */
.mt-line { grid-area: line; width: 100%; height: 40px; color: var(--faint); }
.mt-line svg { display: block; width: 100%; height: 100%; }
.mt-line .mt-zero { fill: var(--line-2); }
.mt-line .mt-now { fill: var(--ink); }

/* ---------- the filter of red flags ---------- */
.flagtoggle svg { width: 13px; height: 13px; }
.flagtoggle[aria-pressed="true"] { border-color: var(--flag-red); color: var(--down); }
/* The question about an account names the account whole, and a handle may be fifteen letters long: on the narrowest
   phone the chip takes two lines. Until 2026-10-11 it was held to one, and "Did @Quantum_Inu_RH post this address?"
   ran 2 px out of its box at 320 px, which the check of the layout caught on the day that token led the list. */
.lk.check { border-style: dashed; border-color: var(--line-2); max-width: 100%; height: auto; min-height: 32px; padding: 6px 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }

/* ---------- the past of the chains ---------- */
.volchart, .shift { width: 100%; height: auto; display: block; touch-action: pan-y; }
.volchart .tg { stroke: var(--hair); stroke-width: 1; }
.volchart .tt, .shift .tt { fill: var(--dim); font-size: var(--t-label); font-family: var(--face); }
.volchart .fa { fill-opacity: .78; }
.volchart .fl { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke: var(--card); stroke-opacity: .9; }
.volchart .fc { stroke: var(--line-3); stroke-width: 1; }
.shift .band { fill-opacity: .32; transition: fill-opacity .15s; }
.shift .band:hover { fill-opacity: .6; }
.shift .name { fill: var(--ink); font-weight: 500; font-size: var(--t-small); }
.shift .head { fill: var(--faint); }
.shift .gain { fill: var(--up); font-weight: 500; }
.shift .loss { fill: var(--down); font-weight: 500; }
.moves { display: grid; gap: 4px; container-type: inline-size; }
.move { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) minmax(0, 1fr) minmax(120px, auto); gap: 0 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.move:last-child { border-bottom: 0; }
.sm-name { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-body); font-weight: 500; color: var(--ink); white-space: nowrap; }
.sm-name i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sm-neg, .sm-pos { display: flex; height: 14px; background: var(--hair); }
.sm-neg { justify-content: flex-end; border-radius: var(--pill) 0 0 var(--pill); border-right: 1px solid var(--line-3); margin-right: -10px; }
.sm-pos { border-radius: 0 var(--pill) var(--pill) 0; }
.sm-neg i { display: block; height: 100%; background: var(--down); border-radius: 4px 0 0 4px; }
.sm-pos i { display: block; height: 100%; background: var(--up); border-radius: 0 4px 4px 0; }
.sm-val { display: grid; gap: 1px; justify-items: end; text-align: right; }
.sm-val b { font-weight: 500; font-size: var(--t-base); color: var(--ink); white-space: nowrap; }
.sm-val b.up { color: var(--up); }
.sm-val b.dn { color: var(--down); }
.sm-val span { font-size: var(--t-label); color: var(--faint); white-space: nowrap; }
@container (max-width: 560px) {
  .move { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name val" "neg pos"; gap: 8px 0; }
  .sm-name { grid-area: name; }
  .sm-val { grid-area: val; }
  .sm-neg { grid-area: neg; margin-right: 0; }
  .sm-pos { grid-area: pos; }
}

/* ---------- metas ---------- */
.cloud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 18px; padding: 18px 6px 10px; line-height: 1.05; }
.cw { font-weight: 600; letter-spacing: -.02em; color: var(--text); border-radius: 8px; padding: 6px 6px; min-height: 28px; transition: color .15s, background .15s; max-width: 100%; overflow-wrap: anywhere; }
.cw sup { font-size: var(--t-tag); font-weight: 500; letter-spacing: 0; color: var(--faint); margin-left: 3px; vertical-align: super; }
.cw.up { color: var(--up); }
.cw.dn { color: var(--down); }
.cw:hover { background: var(--hover); }
.cw[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.cw[aria-pressed="true"] sup { color: var(--on-ink); }
.cwlink { display: inline-block; min-width: 28px; padding: 5px 0; text-align: left; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.legend .cw-up, .legend .cw-flat, .legend .cw-dn { border-radius: 50%; width: 9px; height: 9px; }
.legend .cw-up { background: var(--up); }
.legend .cw-flat { background: var(--text); }
.legend .cw-dn { background: var(--down); }

/* ---------- the picture of the numbers, next to the status line ---------- */
.sharenum { display: inline-flex; }
.sharenum:empty { display: none; }
@media (min-width: 1000px) { .sub { justify-content: flex-end; } }