/* scope.: black and white, mono-first. A glass hero around a turning wireframe globe,
   hairline borders, square corners. Colour only where it carries meaning: green up, red down or fake. */
:root {
  --bg: #000; --bg-2: #000; --panel: #000; --panel-2: #000; --line: #222; --line-hi: #3a3a3a;
  --fg: #fafafa; --muted: #a3a3a3; --dim: #5c5c5c;
  --good: #4ade80; --good-soft: rgba(74, 222, 128, .1); --bad: #f87171; --bad-soft: rgba(248, 113, 113, .1); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .08);
  --f: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r: 6px; --wide: 1180px; --gut: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; -webkit-tap-highlight-color: transparent } /* no grey flash on tap */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip }
main { flex: 1; outline: none; padding-bottom: 72px }
a { color: var(--fg); text-underline-offset: 3px }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px }
[hidden] { display: none !important }
::selection { background: #fff; color: #000 }
html, .table-wrap, .ql-tape, .ql-code, .pm-seg, .subnav-tabs { scrollbar-color: var(--line-hi) #000 }
.wrap { width: min(var(--wide), 100% - 2 * var(--gut)); margin-inline: auto }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: #fff; color: #000 }
.skip:focus { left: 8px }
.muted { color: var(--muted) }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums }
.boot { padding-block: 120px; font-family: var(--mono) }
sub { font-size: .7em; vertical-align: -.2em }

/* ---------- header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: #000; border-bottom: 1px solid var(--line) }
.top-row { display: flex; align-items: center; gap: 18px; padding-block: 12px 10px }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 700 1.25rem/1 var(--mono); letter-spacing: -.04em; color: var(--fg); text-decoration: none }
.logo-mark { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--fg); stroke-width: 1.1; stroke-linecap: round }
.logo-mark .lm-back { stroke-opacity: .28 }
.logo-mark .lm-front { stroke-opacity: .8 }
.logo .cur { margin-left: 1px; animation: blink 1.1s steps(2) infinite }
@keyframes blink { 50% { opacity: 0 } }
.search { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 560px; height: 42px; margin-inline: auto; padding: 0 8px 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #000; color: var(--dim); transition: border-color .15s }
.search:focus-within { border-color: var(--line-hi); color: var(--muted) }
.search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2 }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; color: var(--fg); font: .9rem var(--f) }
.search input::placeholder { color: var(--dim) }
.search input::-webkit-search-cancel-button { filter: invert(1) }
.search kbd { flex: none; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-hi); font: .68rem var(--mono); color: var(--dim) }
.about-link { flex: none; font: 500 .84rem var(--f); color: var(--muted); text-decoration: none }
.about-link:hover, .about-link.on { color: var(--fg) }
.top-cta { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; color: #000; background: #fff; font: 700 .84rem var(--f); text-decoration: none }
.top-cta:hover, .top-cta.on { background: #fff; outline: 1px solid var(--fg); outline-offset: 2px }
.top-row .search { height: 38px; max-width: 520px; margin: 0 auto 0 24px } /* close to the logo, with room to breathe */
.top-ghost { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-hi); color: var(--fg); font: 600 .8rem var(--f); text-decoration: none; transition: border-color .15s }
.top-ghost:hover, .top-ghost.on { border-color: var(--fg) }
.subnav { display: flex; align-items: center; gap: 14px; padding-bottom: 10px }
.subnav-tabs { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none }
.subnav-tabs::-webkit-scrollbar { display: none }
.subnav a { flex: none; padding: 6px 12px; border-radius: 9px; font: 500 .84rem var(--f); color: var(--muted); text-decoration: none; transition: color .15s, background-color .15s }
.subnav a:hover { color: var(--fg) }
.subnav a.on { color: var(--fg); background: #000; box-shadow: inset 0 0 0 1px var(--fg) }
.subnav-div { flex: none; width: 1px; height: 18px; margin: 0 10px; background: var(--line-hi) }
@media (min-width: 641px) and (max-width: 1240px) { .subnav-tabs { flex-wrap: wrap; row-gap: 4px; overflow: visible } } /* tablets: a second line instead of hidden tabs */

/* ---------- shared bits ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: live 2s infinite }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5) } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0) } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0) } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font: 600 .84rem var(--mono); cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s }
.btn-blue { color: #000; background: #fff }
.btn-blue:hover { background: #fff; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fg) }
.btn-ghost { color: var(--fg); background: transparent; border-color: var(--line-hi) }
.btn-ghost:hover { border-color: var(--fg) }
.btn-sm { height: 30px; padding: 0 10px; font-size: .76rem }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 4px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: .78rem var(--mono); cursor: pointer; text-decoration: none; transition: color .15s, border-color .15s }
.chip::before { content: ">"; color: var(--dim) }
.chip:hover { color: var(--fg); border-color: var(--line-hi) }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--line-hi); font: 500 .68rem var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--muted) }
.tag.good { color: var(--good); border-color: rgba(74, 222, 128, .4) } .tag.bad { color: var(--bad); border-color: rgba(248, 113, 113, .45) } .tag.warn { color: var(--warn); border-color: rgba(251, 191, 36, .4) } .tag.blue { color: var(--fg) }
.up { color: var(--good) } .down { color: var(--bad) } .flat { color: var(--muted) }
.panel { position: relative; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); min-width: 0 }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line) }
.panel-head h3 { margin: 0; font: 600 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase }
.panel-body { padding: 10px 12px 14px }
.label { margin: 0 0 6px; font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.src { margin: 0; font: .74rem var(--mono); color: var(--dim) }
.src a { color: var(--muted) }
.skel { display: block; height: 12px; border-radius: 2px; background: #000; box-shadow: inset 0 0 0 1px var(--line-hi); animation: skel 1.4s ease-in-out infinite }
@keyframes skel { 50% { box-shadow: inset 0 0 0 1px var(--dim) } }
.copy { flex: none; height: 24px; padding: 0 8px; border-radius: 3px; border: 1px solid var(--line-hi); background: transparent; color: var(--muted); font: .7rem var(--mono); cursor: pointer }
.copy:hover { color: #000; background: #fff; border-color: #fff }
.addr { font: .8rem var(--mono); color: var(--fg); overflow-wrap: anywhere }
.page-head { display: grid; gap: 12px; padding-block: clamp(36px, 6vw, 68px) 22px; max-width: 780px }
.page-head h1 { margin: 0; font: 700 clamp(1.9rem, 4.6vw, 3rem)/1.08 var(--mono); letter-spacing: -.05em; text-wrap: balance }
.page-head p.lede { margin: 0; color: var(--muted); font-size: 1.02rem; max-width: 62ch }

/* ticker logos: company marks on a white tile, like an app icon; text tiles where there is none */
.tk { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; font: 700 .56rem var(--mono); letter-spacing: .01em; color: #000; background: #fff; border: 1px solid #fff; overflow: hidden }
img.tk { object-fit: contain; padding: 3px }
img.tk.fill { padding: 0 !important; object-fit: cover; background: #000; border-color: #000 } /* square icons with their own background fill the tile */
img.tk.dark { background: #000; border-color: #000 } /* white marks would vanish on the white tile */
.tk.alt { color: var(--fg); background: #000; border-color: var(--line-hi) }
.tk.bad { color: var(--bad); background: #1a0606; border-color: rgba(248, 113, 113, .5) }

/* ---------- ask box ---------- */
.askbox { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line-hi); transition: border-color .15s; max-width: 640px }
.askbox::before { content: "$"; font: 600 .95rem var(--mono); color: var(--good) }
.askbox:focus-within { border-color: var(--fg) }
.askbox input { flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; outline: none; font: .9rem var(--mono) }
.askbox input::placeholder { color: var(--dim) }
.chips { display: flex; flex-wrap: wrap; gap: 8px }

/* ---------- front page: a market board (hero card, official-token chip, a grid of token cards) ---------- */
.hz-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 45% at 50% 66%, rgba(255, 255, 255, .08), transparent 70%) }
.hz-pill { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font: .74rem var(--mono); color: var(--muted) }
.hz-pill i { font-style: normal; color: var(--dim) }
.hz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px }
.hz-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: var(--fg); font: 600 .92rem var(--f); text-decoration: none; transition: background-color .2s, border-color .2s, box-shadow .2s }
.hz-btn:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08) }
.hz-btn.on { color: #000; background: linear-gradient(180deg, #fff, #d6d6d6); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06), 0 10px 40px -8px rgba(255, 255, 255, .55) }
.hz-btn.on:hover { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 12px 48px -6px rgba(255, 255, 255, .7) }

.pm-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 24px; margin-top: 22px; padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 56px); border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(55% 90% at 78% 50%, rgba(255, 255, 255, .07), transparent 70%), #050505 }
.pm-hero-copy { display: grid; justify-items: start; gap: 18px }
.pm-hero h1 { margin: 0; padding-bottom: .06em; font: 600 clamp(2.3rem, 4.6vw, 3.8rem)/1.02 var(--f); letter-spacing: -.045em; background: linear-gradient(180deg, #fff 35%, #8a8a8a); -webkit-background-clip: text; background-clip: text; color: transparent }
.pm-lede { margin: 0; max-width: 50ch; color: var(--muted) }
.pm-more { color: var(--fg); font: 500 .92rem var(--f); text-decoration: none }
.pm-more:hover { text-decoration: underline; text-underline-offset: 4px }
.pm-hero-art { position: relative; justify-self: center; width: min(100%, 420px) }

.hz-orb { position: relative; z-index: 1 }
.hz-orb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 76.7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: #000; box-shadow: none }
.hz-orb svg { position: relative; z-index: 2; display: block; width: 100%; height: auto; overflow: visible }
.hz-orb canvas.globe-px { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; image-rendering: pixelated } /* drawn small, shown big: pixels stay square */
.hz-orb svg :is(path, circle, rect) { fill: none; stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke }
.hz-orb svg rect.box { fill: #000; stroke-opacity: .7 }
.hz-orb text { fill: var(--fg); font: 700 14px var(--mono); letter-spacing: .04em }
.hz-orb text.bad { fill: var(--bad) }
.pm-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 10, 10, .88); box-shadow: 0 18px 40px -20px rgba(255, 255, 255, .25); font: .74rem var(--mono); white-space: nowrap; animation: bob 6s ease-in-out infinite }
.pm-float .tk { width: 30px; height: 30px; border-radius: 8px }
.pm-float span:last-child { display: grid; gap: 1px }
.pm-float b { font-weight: 700 }
.pm-float small { font-size: .68rem; color: var(--muted) }
.pm-float.f1 { left: -6%; top: 10% }
.pm-float.f2 { right: -8%; top: 44%; animation-delay: -2s }
.pm-float.f3 { left: 2%; bottom: 6%; animation-delay: -4s }
@keyframes bob { 50% { transform: translateY(-6px) } }

.pm-explore { margin-top: clamp(30px, 4vw, 44px) }
.pm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 18px }
.pm-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0 }
.pm-title h2 { margin: 0; font: 600 1.35rem var(--f); letter-spacing: -.02em }
.pm-count { padding: 3px 10px; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px var(--line); font: 600 .74rem var(--mono); color: var(--muted) }
.pm-token { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: #000; color: var(--fg); text-decoration: none; transition: border-color .15s }
.pm-token:hover { border-color: rgba(255, 255, 255, .4) }
.pm-token-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #000; border: 1px solid rgba(255, 255, 255, .25) }
.pm-token-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--fg); stroke-width: 1.2 }
.pm-token-name { display: grid; gap: 1px }
.pm-token small { display: inline-flex; align-items: center; gap: 5px; font: 700 .6rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--good) }
.pm-token small i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good) }
.pm-token b { font: 700 .84rem var(--f) }
.pm-token em { font-style: normal; color: var(--muted) }
.pm-token-price { display: grid; justify-items: end; gap: 1px; padding-left: 10px }
.pm-token-price small { color: var(--dim) }
.pm-seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: #000 }
.pm-seg button { flex: none; padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 .8rem var(--f); cursor: pointer; transition: color .15s, background-color .15s }
.pm-seg button:hover { color: var(--fg) }
.pm-seg button.on { color: var(--fg); background: #000; box-shadow: inset 0 0 0 1px var(--fg) }

.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px }
.pm-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px 10px 14px; border-radius: 16px; border: 1px solid var(--line); background: #000; color: var(--fg); text-decoration: none; transition: border-color .15s, transform .15s }
a.pm-card:hover { border-color: rgba(255, 255, 255, .35); transform: translateY(-2px) }
.pm-art { position: relative; display: grid; place-items: center; height: 118px; margin-bottom: 4px; border-radius: 12px; background: var(--px-glow, none) no-repeat center / 240px 120px, #000; image-rendering: pixelated }
.pm-art img { image-rendering: auto } /* logos stay smooth over the dotted glow */
.pm-art .tk { width: 64px; height: 64px; border-radius: 16px; font-size: .9rem }
.pm-art img.tk { padding: 7px }
.pm-badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: #000; border: 1px solid rgba(74, 222, 128, .4); font: 700 .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--good) }
.pm-badge.bad { color: var(--bad); border-color: rgba(248, 113, 113, .45) }
.pm-meta { display: grid; gap: 1px; padding-inline: 4px; min-width: 0 }
.pm-meta b { font: 700 .95rem var(--mono) }
.pm-meta span { font-size: .78rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-inline: 4px; font: .86rem var(--mono); font-variant-numeric: tabular-nums }
.pm-price { font-weight: 700 }
.pm-sub { padding-inline: 4px; font: .7rem var(--mono); color: var(--dim) }
.pm-spark { height: 34px; padding-inline: 4px } /* the day's line; dotted rule = the price 24 hours ago */
.pm-spark svg { display: block; width: 100%; height: 100%; overflow: visible }
.pm-spark.none { background: linear-gradient(90deg, var(--line) 50%, transparent 0) repeat-x 4px 50% / 6px 1px } /* no market: a dashed rule keeps the cards level */
.pm-card.fake { border-color: rgba(248, 113, 113, .25) }
.pm-badge.warn { color: var(--warn); border-color: rgba(251, 191, 36, .4) }
.pm-sec { grid-column: 1 / -1; margin: 14px 0 0; font: 600 .95rem var(--f); color: var(--fg) }
.pm-sec.muted { margin-top: 0; font: .82rem var(--mono); color: var(--muted) }
.pm-note.bad { color: var(--bad) }
img.tk.launch { padding: 0 !important; object-fit: cover; background: #000; border-color: #000 } /* launchpad token images are pictures: they fill the tile */
.pm-note { grid-column: 1 / -1; margin: 0 0 4px; font: .78rem/1.5 var(--mono); color: var(--warn) }
.pm-more-wrap { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 6px }
.pm-more-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line-hi); background: #000; color: var(--fg); font: 600 .88rem var(--f); cursor: pointer; transition: border-color .15s, background-color .15s }
.pm-more-btn:hover { border-color: var(--fg); background: #000 }
.pm-more-btn span { font: 500 .76rem var(--mono); color: var(--dim) }
.pm-empty { grid-column: 1 / -1; padding: 48px 20px; border-radius: 16px; border: 1px dashed var(--line-hi); text-align: center }
.pm-empty p { margin: 0 0 6px }
@media (max-width: 860px) {
  .pm-hero { grid-template-columns: minmax(0, 1fr) }
  .pm-hero-art { width: min(100%, 340px); margin-top: 8px }
}
@media (max-width: 520px) {
  .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .pm-art { height: 96px }
  .pm-art .tk { width: 52px; height: 52px }
  .pm-float.f1 { left: -2% } .pm-float.f2 { right: -2% }
}

/* overview grid */
.section { padding-block: clamp(36px, 6vw, 56px) 0 }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px }
.section-head h2 { margin: 0; font: 700 clamp(1.1rem, 2.2vw, 1.4rem)/1.2 var(--mono); letter-spacing: -.03em }
.section-head h2::before { content: "## "; color: var(--dim) }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px }
.rows { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none }
.rows li > a, .rows li > div { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 4px; color: var(--fg); text-decoration: none }
.rows li > a:hover { background: #000; box-shadow: inset 2px 0 0 var(--fg) }
.rows .r-main { display: grid; min-width: 0 }
.rows .r-main b { font: 700 .86rem var(--mono) }
.rows .r-main span { font-size: .76rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rows .r-end { display: grid; justify-items: end; font: .8rem var(--mono); font-variant-numeric: tabular-nums }
.rows .r-end small { font-size: .7rem }
.feature { display: grid; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: border-color .15s, background-color .15s }
.feature:hover { border-color: var(--fg); background: var(--bg) }
.feature h3 { margin: 0; font: 700 .95rem var(--mono); letter-spacing: -.01em }
.feature p { margin: 0; color: var(--muted); font-size: .9rem }
.feature .go { font: .76rem var(--mono); color: var(--fg) }
.f-ico { width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center; background: #fff; color: #000; font: 700 .85rem var(--mono) }

/* ---------- answers ---------- */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; padding-bottom: 24px }
.answer { display: grid; gap: 14px; padding: 20px }
.answer-q { display: flex; align-items: center; gap: 10px; margin: 0; font: .82rem var(--mono); color: var(--muted) }
.answer-q .bubble { width: 22px; height: 22px; border-radius: 3px; display: grid; place-items: center; background: #fff; color: #000; font: 700 .74rem var(--mono) }
.answer-lead { margin: 0; font: 600 clamp(1.1rem, 2.2vw, 1.4rem)/1.35 var(--f); letter-spacing: -.02em; text-wrap: pretty }
.answer-lead em { font-style: normal; font-family: var(--mono); font-weight: 700; background: #fff; color: #000; padding: 0 5px; border-radius: 2px }
.answer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line) }
.table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums }
.table-wrap { overflow-x: auto; border-radius: 4px; border: 1px solid var(--line) }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap }
.table th { font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); background: var(--bg-2) }
.table tr:last-child td { border-bottom: 0 }
.table td.n { font-family: var(--mono); text-align: right }
.table th.n { text-align: right }
.table tbody tr:hover { background: #000 }
.table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--fg) }
.side-list { display: grid; gap: 8px; align-content: start }
.side-list .chip { justify-content: flex-start }
.r-inline { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none }
.r-inline .tk { width: 24px; height: 24px; border-radius: 4px; font-size: .5rem }
.r-inline b { font-family: var(--mono) }
.r-inline:hover b { text-decoration: underline }
.answer-lead .addr { font-size: .78em }

/* ---------- verdicts and facts ---------- */
.verdict { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel) }
.verdict .v-ico { width: 48px; height: 48px; border-radius: 6px; display: grid; place-items: center; font: 700 1.3rem var(--mono) }
.verdict.good { border-color: rgba(74, 222, 128, .45) }
.verdict.good .v-ico { background: var(--good); color: #000 }
.verdict.bad { border-color: rgba(248, 113, 113, .5); background: linear-gradient(90deg, rgba(248, 113, 113, .07), transparent 50%), var(--panel) }
.verdict.bad .v-ico { background: var(--bad); color: #000 }
.verdict.warn { border-color: rgba(251, 191, 36, .4) }
.verdict.warn .v-ico { background: var(--warn); color: #000 }
.verdict h2 { margin: 0 0 6px; font: 700 1.2rem/1.25 var(--mono); letter-spacing: -.03em }
.verdict p { margin: 0 0 10px; color: var(--muted) }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 14px 0 0 }
.fact { padding: 10px 12px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line) }
.fact dt { font: 500 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim) }
.fact dd { margin: 4px 0 0; font: 700 1rem var(--mono); font-variant-numeric: tabular-nums }
.addr-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 9px 12px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line) }
.addr-line .addr { flex: 1; min-width: 0 }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }

/* ---------- compare ---------- */
.pickers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px }
.picker { display: flex; align-items: center; gap: 8px; padding: 3px 3px 3px 12px; border-radius: 4px; border: 1px solid var(--line-hi); background: var(--bg) }
.picker input { width: 100px; height: 32px; border: 0; background: transparent; outline: none; font: 700 .9rem var(--mono); text-transform: uppercase }
.cmp-card { display: grid; gap: 14px; padding: 18px }
.cmp-top { display: flex; align-items: center; gap: 12px }
.cmp-top .tk { width: 40px; height: 40px; border-radius: 8px }
.cmp-top h3 { margin: 0; font: 700 1.1rem var(--mono) }
.cmp-top p { margin: 0; font-size: .8rem; color: var(--dim) }
.cmp-price { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono) }
.cmp-price b { font-size: 1.8rem; font-weight: 700; letter-spacing: -.04em }
.spark { width: 100%; height: 70px; display: block }
.spark-cap { display: flex; justify-content: space-between; gap: 10px; font: .68rem var(--mono); color: var(--dim) }
svg.spark { overflow: visible } /* the end dot sits on the right edge */
.spark-cap > span:first-child, .spark-cap > span:last-child { flex: none; white-space: nowrap }
.spark-cap > span:nth-child(2) { min-width: 0; text-align: center }
.answer-chart { margin-top: 14px; padding: 12px; border-radius: var(--r); border: 1px solid var(--line) }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--line) }
.kv dt { font: .74rem var(--mono); color: var(--dim) }
.kv dd { margin: 0; font: 500 .84rem var(--mono); text-align: right }

/* ---------- after hours ---------- */
.ah-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); font: .8rem/1.5 var(--mono) }
.ah-pill { padding: 3px 8px; border-radius: 3px; border: 1px solid var(--line-hi); font: 700 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.ah-pill.open { color: #000; background: var(--good); border-color: var(--good) }
.ah .facts { margin-top: 12px }
.ah .table .spark { width: 120px; height: 28px }


/* ---------- watch ---------- */
.form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line) }
.field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--line-hi); background: var(--bg) }
.field input, .field select { height: 100%; border: 0; background: transparent; outline: none; font-family: var(--mono) }
.field input { width: 100px }
.field select option { background: #000 }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #000 inset; box-shadow: 0 0 0 100px #000 inset; -webkit-text-fill-color: var(--fg); caret-color: var(--fg) }
input:autofill { box-shadow: 0 0 0 100px #000 inset; caret-color: var(--fg) } /* separate rules: a browser that knows only one still applies it */
.field input[type=number] { -moz-appearance: textfield; appearance: textfield }
.field input::-webkit-inner-spin-button, .field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.rule { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel) }
.rule .r-main b { font-family: var(--mono) }
.rule .r-main span { display: block; font: .74rem var(--mono); color: var(--dim) }
.icon-x { width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer }
.icon-x:hover { color: var(--bad); border-color: var(--bad) }
.empty-state { padding: 26px; border-radius: var(--r); border: 1px dashed var(--line-hi); color: var(--muted); text-align: center; font: .84rem var(--mono) }

/* ---------- $SCOPE ---------- */
.tp-wrap { position: relative; isolation: isolate; overflow: hidden }
.tp-wrap .hz-bg { display: none; /* no glow behind the token card */ -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 20%, transparent 75%) }
.tp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 7vw, 88px) 24px }
.tp-copy { display: grid; gap: 18px; align-content: center }
.tp-copy h1 { margin: 0; padding-bottom: .06em; font: 600 clamp(2.5rem, 5.6vw, 4.4rem)/1.02 var(--f); letter-spacing: -.045em; background: linear-gradient(180deg, #fff 35%, #8a8a8a); -webkit-background-clip: text; background-clip: text; color: transparent }
.tp-lede { margin: 0; max-width: 52ch; font-size: 1.1rem; line-height: 1.6; color: #d4d4d4 }
.tp-note { margin: 0; max-width: 56ch; font-size: .86rem; line-height: 1.65; color: var(--dim) }
.tp-card { display: grid; gap: 22px; padding: clamp(20px, 3vw, 30px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: #000 }
.tp-label { margin: 0 0 10px; font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.tp-addr { display: flex; flex-wrap: wrap; gap: 10px }
.tp-addr code { flex: 1 1 300px; min-width: 0; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: #000; font: 700 .8rem/1.4 var(--mono); letter-spacing: -.01em; color: var(--fg); overflow-wrap: anywhere }
.tp-addr code.off { color: var(--dim); font-weight: 500 }
.tp-copy-btn { flex: none; padding: 0 18px; min-height: 46px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: #000; color: var(--fg); font: 600 .88rem var(--f); cursor: pointer; transition: background-color .15s, border-color .15s }
.tp-copy-btn:hover:not(:disabled) { background: #000; border-color: var(--fg) }
.tp-copy-btn:disabled { opacity: .4; cursor: default }
.tp-warn { margin: 10px 0 0; font: .78rem/1.5 var(--mono); color: var(--warn) }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line) }
.tp-grid div { padding: 14px 0; border-bottom: 1px solid var(--line) }
.tp-grid dt { font: 500 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.tp-grid dd { margin: 6px 0 0; font: 700 .95rem var(--mono); color: var(--fg) }
.tp-card .facts { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.tp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px }
.tp-buy { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px; color: #000; background: #fff; font: 700 .95rem var(--f); text-decoration: none; transition: outline-color .2s }
a.tp-buy:hover { background: #fff; outline: 1px solid var(--fg); outline-offset: 3px }
.tp-link { color: var(--fg); font: 500 .92rem var(--f); text-underline-offset: 5px }
.tp-buy.off { background: #000; color: var(--dim); border: 1px dashed var(--line-hi); cursor: default }
.tp-link.off { opacity: .4; cursor: default }
.tp-link.off { text-decoration: none }
@media (max-width: 900px) { .tp { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 600px) { .tp-card { -webkit-backdrop-filter: none; backdrop-filter: none } .tp-grid { grid-template-columns: minmax(0, 1fr) } .tp-card .facts { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* ---------- docs: the manual ---------- */
.dx { width: min(980px, 100% - 2 * var(--gut)); margin-inline: auto; padding: clamp(36px, 6vw, 64px) 0 24px }
.dx-kick { margin: 0; font: 500 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim) }
.dx-head { display: grid; gap: 14px; padding-left: 132px }
.dx-head h1 { margin: 0; font: 600 clamp(2.5rem, 6vw, 4rem)/1.02 var(--f); letter-spacing: -.045em; color: var(--fg) }
.dx-lede { margin: 0; max-width: 58ch; font: 1rem/1.7 var(--mono); color: var(--muted) }
/* the spec row under the title */
.dx-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 0; border: 1px solid var(--line-hi); border-radius: 6px }
.dx-meta div { display: grid; gap: 4px; padding: 12px 14px; min-width: 0 }
.dx-meta div + div { border-left: 1px solid var(--line-hi) }
.dx-meta dt { font: 500 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }
.dx-meta dd { margin: 0; font: 600 .86rem var(--mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* contents: a book's contents page, dots leading to the reading time */
.dx-toc { margin: 48px 0 0 132px }
.dx-toc ol { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-hi) }
.dx-toc a { display: flex; align-items: baseline; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; font: .9rem var(--mono); transition: padding-left .15s }
.dx-toc a:hover { padding-left: 10px }
.dx-tn { flex: none; width: 24px; color: var(--dim) }
.dx-tt { flex: none; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dx-toc i { flex: 1 1 auto; min-width: 16px; border-bottom: 2px dotted var(--line-hi); transform: translateY(-4px) }
.dx-tm { flex: none; font-size: .74rem; color: var(--muted) }
/* sections: a dot-matrix number in the margin, the text beside it */
.dx-sec { display: grid; grid-template-columns: 132px minmax(0, 1fr); margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line-hi); scroll-margin-top: 110px }
.dx-n { margin: 0; font: 800 2.8rem/1 'Doto', var(--mono); color: var(--fg) }
.dx-main { min-width: 0; max-width: 760px }
.dx-main h2 { margin: 0; font: 600 clamp(1.7rem, 3.4vw, 2.3rem)/1.1 var(--f); letter-spacing: -.035em; color: var(--fg) }
.dx-body { display: grid; gap: 16px; margin-top: 22px; font: .92rem/1.75 var(--mono); color: var(--muted) }
.dx-body p { margin: 0 }
.dx-body b, .dx-body i { font-style: normal; font-weight: 600; color: var(--fg) }
.dx-body h3 { margin: 14px 0 0; font: 700 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg) }
.dx-body ul { margin: 0; padding-left: 1.1em }
.dx-body ul li + li { margin-top: 6px }
.dx-body a { color: var(--fg); text-underline-offset: 3px }
/* steps across, in ruled cells */
.dx-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0; padding: 0; list-style: none; border: 1px solid var(--line-hi); border-radius: 6px }
.dx-flow li { display: grid; align-content: start; gap: 6px; padding: 16px 14px; min-width: 0 }
.dx-flow li + li { border-left: 1px solid var(--line-hi) }
.dx-flow small { font: 800 1.3rem/1 'Doto', var(--mono); color: var(--fg) }
.dx-flow b { font: 700 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg) }
.dx-flow p { font-size: .78rem; line-height: 1.6 }
/* tables and reference boxes */
.dx-table { overflow-x: auto; border: 1px solid var(--line-hi); border-radius: 6px }
.dx-table table { width: 100%; border-collapse: collapse; font: .82rem/1.55 var(--mono) }
.dx-table th { padding: 11px 14px; border-bottom: 1px solid var(--line-hi); text-align: left; font: 500 .64rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }
.dx-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted) }
.dx-table tr:last-child td { border-bottom: 0 }
.dx-table td:first-child { color: var(--fg); white-space: nowrap }
.dx-table td:nth-child(3) { white-space: nowrap } /* the short refresh column of the sources table */
.dx-ref { display: grid; margin: 0; padding: 4px 16px; border: 1px solid var(--line-hi); border-radius: 6px }
.dx-ref div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font: .8rem var(--mono) }
.dx-ref div:last-child { border-bottom: 0 }
.dx-ref dt { letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.dx-ref dd { margin: 0; color: var(--fg); text-align: right }
.dx-alert p:not(.ql-alert-h) { margin: 0; font: .8rem/1.65 var(--mono); color: var(--muted) }
@media (max-width: 860px) {
  .dx-head, .dx-toc { padding-left: 0; margin-left: 0 }
  .dx-sec { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .dx-n { font-size: 2rem }
  .dx-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dx-flow li:nth-child(3) { border-left: 0 }
  .dx-flow li:nth-child(n + 3) { border-top: 1px solid var(--line-hi) }
}
@media (max-width: 520px) {
  .dx-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dx-meta div:nth-child(3) { border-left: 0 }
  .dx-meta div:nth-child(n + 3) { border-top: 1px solid var(--line-hi) }
  .dx-flow { grid-template-columns: minmax(0, 1fr) }
  .dx-flow li + li { border-left: 0; border-top: 1px solid var(--line-hi) }
  .dx-tt { max-width: 62% }
  .dx-ref div { flex-wrap: wrap; gap: 2px 16px }
}

/* ---------- prose ---------- */
.prose { max-width: 720px; padding-bottom: 32px; color: #d4d4d4 }
.prose h2 { margin: 2em 0 .5em; font: 700 1.1rem var(--mono); letter-spacing: -.02em; color: var(--fg) }
.prose h2::before { content: "## "; color: var(--dim) }
.prose li { margin: .35em 0 }
.prose a { color: var(--fg) }

/* ---------- footer: the desk's map, the fine print, X ---------- */
.foot { border-top: 1px solid var(--line) }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 40px 28px }
.foot-brand { display: grid; align-content: start; gap: 14px }
.foot-brand p { margin: 0; max-width: 38ch; font: .78rem/1.6 var(--mono); color: var(--muted) }
.foot-act { display: flex; align-items: center; gap: 16px }
.foot-col { display: grid; align-content: start; gap: 9px }
.foot-col h4 { margin: 0 0 4px; font: 700 .66rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }
.foot-col a { font: .8rem var(--mono); color: var(--muted); text-decoration: none; transition: color .15s }
.foot-col a:hover { color: var(--fg) }
.foot-x { display: grid; place-items: center; padding: 4px; color: var(--muted); transition: color .15s } /* just the mark, no box */
.foot-x:hover { color: var(--fg) }
.foot-x svg { width: 20px; height: 20px; fill: currentColor }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 16px 26px; border-top: 1px solid var(--line); font: .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .foot-brand { grid-column: 1 / -1 } }

/* ---------- landing: a spec sheet in black and white (ruled panels, mono labels, one dot-matrix figure) ---------- */
.ql { --qline: #262626; padding-top: 14px }
.ql-k { margin: 0; font: 500 .66rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
.ql-k b { color: var(--fg) }
.ql-top { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr; border: 1px solid var(--qline); border-radius: 14px; overflow: hidden }
.ql-top > * { border-left: 1px solid var(--qline); border-bottom: 1px solid var(--qline); min-width: 0 }
.ql-hero { grid-row: 1 / 3; display: grid; align-content: start; gap: 14px; padding: 22px; border-left: 0; border-bottom: 0 }
.ql-id { margin: 0; font: 700 .86rem var(--mono); letter-spacing: .02em }
.ql-tag { margin: 0; font: 700 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg) }
.ql-tag span { display: block; margin-top: 4px; font-weight: 500; color: var(--dim) } /* the network on its own line */
.ql-desc { margin: 0; max-width: 46ch; font: .86rem/1.6 var(--mono); color: var(--fg) }
.ql-feat { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font: .78rem var(--mono); color: var(--muted) }
.ql-feat li::before { content: "+ "; color: var(--dim) } /* a spec list, no commas */
.ql-btns { display: flex; flex-wrap: wrap; gap: 10px }
.ql-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border: 1px solid var(--line-hi); border-radius: 4px; background: transparent; color: var(--fg); font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: border-color .15s, background-color .15s }
.ql-btn:hover { border-color: var(--fg) }
.ql-btn.on { color: #000; background: #fff; border-color: #fff }
.ql-btn.on:hover { background: #fff; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fg) }
.ql-btn-wide { justify-self: start }
.ql-ca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--qline); border-radius: 6px; background: #000 }
.ql-ca > div { display: grid; gap: 6px; min-width: 0 }
.ql-ca code { font: 600 .74rem var(--mono); color: var(--fg); overflow-wrap: anywhere }
.ql-copy { flex: none; padding: 8px 14px; border: 1px solid var(--line-hi); border-radius: 4px; background: transparent; color: var(--fg); font: 600 .72rem var(--mono); text-decoration: none; cursor: pointer }
.ql-copy:hover { border-color: var(--fg) }
.ql-links { display: flex; flex-wrap: wrap; gap: 10px }
.ql-links a { padding: 8px 12px; border: 1px solid var(--qline); border-radius: 4px; color: var(--muted); font: 600 .72rem var(--mono); text-decoration: none }
.ql-links a:hover { color: var(--fg); border-color: var(--line-hi) }
.ql-meta { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--qline) }
.ql-meta span { font: 500 .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
.ql-meta b { font: 700 .8rem var(--mono); color: var(--fg) }
.ql-meta small { font: .7rem var(--mono); color: var(--muted) }
.ql-net .logo-mark { position: absolute; right: 14px; top: 14px; width: 26px; height: 26px }
.ql-headline { grid-column: 2 / 6; position: relative; min-height: 260px; border-bottom: 0 } /* the dot sentence, centred in the box */
.ql-headline canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 } /* read aloud, not shown */

.ql-main { display: grid; grid-template-columns: 270px minmax(0, 1fr) 270px; margin-top: 14px; border: 1px solid var(--qline); border-radius: 14px; overflow: hidden }
.ql-col { display: flex; flex-direction: column; min-width: 0 }
.ql-col > .ql-box:last-child { flex: 1 0 auto; align-content: start } /* fills the column; its rows keep their height */
.ql-col:first-child { border-right: 1px solid var(--qline) }
.ql-col:last-child { border-left: 1px solid var(--qline) }
.ql-box { display: grid; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--qline) }
.ql-box:last-child { border-bottom: 0 }
.ql-box h3, .ql-record h4, .ql-diag h4 { margin: 0; font: 700 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg) }
.ql-box p { margin: 0; font: .76rem/1.6 var(--mono); color: var(--muted) }
.ql-kv { display: grid; margin: 0 }
.ql-kv div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #161616; font: .72rem var(--mono) }
.ql-kv div:last-child { border-bottom: 0 }
.ql-kv dt { letter-spacing: .08em; text-transform: uppercase; color: var(--dim) }
.ql-kv dd { margin: 0; color: var(--fg); text-align: right }
.ql-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none }
.ql-list a { font: .76rem var(--mono); color: var(--muted); text-decoration: none }
.ql-list a::before { content: "– "; color: var(--dim) }
.ql-list a:hover { color: var(--fg) }
.ql-legend { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font: .74rem var(--mono); color: var(--muted) }
.ql-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; vertical-align: -1px }
.ql-legend .ok { background: var(--good) } .ql-legend .warn { background: var(--warn) } .ql-legend .bad { background: var(--bad) }
.ql-notes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none }
.ql-notes li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline }
.ql-notes b { font: 700 .66rem var(--mono); letter-spacing: .08em; color: var(--dim) }
/* the warning: a hazard band over one short block, in the warning yellow */
.ql-alert { display: grid; gap: 8px; padding: 16px 14px 14px; border: 1px solid rgba(251, 191, 36, .4); border-radius: 6px; background: repeating-linear-gradient(-45deg, var(--warn) 0 5px, #000 5px 10px) no-repeat 0 0 / 100% 5px }
.ql-alert-h { display: flex; align-items: center; gap: 8px; margin: 0 }
.ql-alert-h svg { width: 16px; height: 16px; fill: none; stroke: var(--warn); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round }
.ql-alert-h b { font: 700 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--warn) }
.ql-alert-h span { margin-left: auto; font: .6rem var(--mono); letter-spacing: .12em; color: var(--dim) }
/* feeds: one row per source, a dot for its state */
.ql-feed { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: .72rem var(--mono) }
.ql-feed li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 8px }
.ql-feed i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-hi) }
.ql-feed i.ok { background: var(--good) } .ql-feed i.warn { background: var(--warn) } .ql-feed i.bad { background: var(--bad) }
.ql-feed span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ql-feed b { font-weight: 500; color: var(--fg); white-space: nowrap }
/* the dot word: fills the centre column below the path */
.ql-dots { position: relative; flex: 1 1 auto; min-height: 200px; border: 1px solid var(--qline); border-radius: 8px; overflow: hidden }
.ql-dots canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated }
.ql-fig { position: absolute; z-index: 1; left: 10px; top: 8px; padding: 2px 4px; background: #000; font: 600 .6rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim) }
.ql-diag svg { width: 22px; height: 22px; fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linejoin: round }

.ql-center { display: flex; flex-direction: column; gap: 18px; padding: 18px; min-width: 0 }
.ql-ribbon { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--qline); font: 600 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center }
.ql-core { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 20px; border: 1px solid var(--line-hi); border-radius: 10px; background: #000 }
.ql-core-l { display: grid; align-content: start; gap: 6px; min-width: 0 }
.ql-core h3 { margin: 0 0 4px; font: 700 1.2rem var(--mono); letter-spacing: -.02em }
.ql-big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; font: 800 clamp(3.6rem, 7vw, 5.6rem)/1 'Doto', var(--mono); color: var(--fg); text-shadow: 0 0 24px rgba(255, 255, 255, .35) }
.ql-big small { font: 700 1rem var(--mono); color: var(--muted); text-shadow: none }
.ql-gap { margin-top: 10px }
.ql-state { margin: 0; font: 800 1.6rem 'Doto', var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--fg) }
.ql-record { display: grid; gap: 6px; margin-top: 12px; padding: 12px; border: 1px solid var(--qline); border-radius: 6px }
.ql-core-r { display: grid; align-content: center; justify-items: center; gap: 8px; min-width: 0 }
.ql-core-r .hz-orb { width: 100%; max-width: 300px }
.ql-diag { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line-hi); border-radius: 8px }
.ql-diag p { margin: 6px 0 0; font: .78rem/1.6 var(--mono); color: var(--muted) }
.ql-path ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--qline); border-radius: 8px; overflow: hidden }
.ql-path li + li { border-left: 1px solid var(--qline) }
.ql-path a { display: grid; justify-items: center; gap: 6px; padding: 16px 6px; color: var(--muted); text-decoration: none; transition: background-color .15s }
.ql-path a:hover { background: #000; color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg) }
.ql-path svg { width: 22px; height: 22px; fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.ql-path span { font: 600 .64rem var(--mono); letter-spacing: .14em; text-transform: uppercase }
.ql-path b { font: 700 .72rem var(--mono); color: var(--fg); text-align: center }

.ql-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px }
.ql-wall a, .ql-wall .skel { display: block; aspect-ratio: 1 }
.ql-wall .skel { height: auto; border-radius: 5px }
.ql-wall .tk { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; font-size: .38rem }
.ql-wall img.tk { padding: 2px }
.ql-tape, .ql-code { margin: 0; padding: 12px; border: 1px solid var(--qline); border-radius: 6px; background: #000; font: .7rem/1.7 var(--mono); color: var(--muted); white-space: pre; overflow-x: auto }
.ql-code .dim { color: var(--dim) }

.ql-manifesto { display: grid; justify-items: center; gap: 4px; margin: 56px 0 10px; padding: 34px 16px; background: var(--px-band, none) repeat-x 0 0, var(--px-band, none) repeat-x 0 100%; image-rendering: pixelated; text-align: center }
.ql-manifesto p { margin: 0; font: 700 clamp(1rem, 2.4vw, 1.6rem)/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg) }
.ql-manifesto p:nth-child(2), .ql-manifesto p:nth-child(3) { color: var(--muted) }

.ql-sec { display: grid; gap: 14px; padding-top: clamp(48px, 7vw, 76px) }
.ql-kick { margin: 0; font: 600 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim) }
.ql-sec h2 { margin: 0; font: 700 clamp(1.9rem, 4.4vw, 3.2rem)/1.05 var(--mono); letter-spacing: -.05em; text-wrap: balance }
.ql-lede { margin: 0; max-width: 64ch; font: .84rem/1.7 var(--mono); color: var(--muted) }
.ql-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 14px 0 0; padding: 0; list-style: none; border-block: 1px solid var(--qline) }
.ql-steps li { display: grid; align-content: start; gap: 8px; padding: 20px 18px 24px }
.ql-steps li + li { border-left: 1px solid var(--qline) }
.ql-steps b { font: 800 2rem/1 'Doto', var(--mono); color: var(--fg) }
.ql-steps h3, .ql-cols h3 { margin: 0; font: 700 .8rem var(--mono); letter-spacing: .12em; text-transform: uppercase }
.ql-steps p, .ql-cols p { margin: 0; font: .76rem/1.65 var(--mono); color: var(--muted) }
.ql-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding: 22px 26px; border-radius: 6px; background: #fff; color: #000 }
.ql-band h3 { margin: 0; font: 800 1.5rem 'Doto', var(--mono) }
.ql-band p { margin: 0; max-width: 72ch; font: .8rem/1.6 var(--mono) }
.ql-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 10px; border: 1px solid var(--qline); border-radius: 10px; overflow: hidden }
.ql-card { display: grid; align-content: start; gap: 10px; min-height: 190px; padding: 20px; border-right: 1px solid var(--qline); border-bottom: 1px solid var(--qline); color: var(--fg); text-decoration: none; transition: background-color .15s }
.ql-card:nth-child(4n) { border-right: 0 }
.ql-card:nth-last-child(-n + 4) { border-bottom: 0 }
.ql-card:hover { background: #000; box-shadow: inset 0 0 0 1px var(--fg) }
.ql-chip { justify-self: start; padding: 2px 8px; border: 1px solid var(--line-hi); border-radius: 3px; font: 600 .6rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.ql-card h3 { margin: 0; font: 700 1.05rem var(--mono); letter-spacing: -.02em }
.ql-card p { margin: 0; font: .76rem/1.6 var(--mono); color: var(--muted) }
.ql-go { align-self: end; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg) }
.ql-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; border-block: 1px solid var(--qline) }
.ql-cols > div { display: grid; align-content: start; gap: 8px; padding: 20px 18px 24px }
.ql-cols > div + div { border-left: 1px solid var(--qline) }
.ql-table { margin-top: 10px }
.ql-table td:first-child { color: var(--fg); font-family: var(--mono) }
.ql-table td { white-space: normal }
.ql-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px }
.ql-phases > div { display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--qline); border-radius: 10px }
.ql-phases > div.done { border-color: var(--fg) }
.ql-phases span { font: 600 .64rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }
.ql-phases .done span { color: var(--good) }
.ql-phases h3 { margin: 0; font: 700 1rem var(--mono) }
.ql-phases p { margin: 0; font: .76rem/1.6 var(--mono); color: var(--muted) }
.ql-faq { display: grid; margin-top: 10px; border-top: 1px solid var(--qline) }
.ql-faq details { border-bottom: 1px solid var(--qline) }
.ql-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 4px; font: 600 .86rem var(--mono); cursor: pointer; list-style: none }
.ql-faq summary::-webkit-details-marker { display: none }
.ql-faq summary::after { content: "+"; color: var(--muted) }
.ql-faq details[open] summary::after { content: "–" }
.ql-faq p { margin: 0 0 18px; padding: 0 4px; max-width: 70ch; font: .8rem/1.7 var(--mono); color: var(--muted) }
.ql-cta { display: grid; justify-items: center; gap: 14px; margin-top: clamp(56px, 8vw, 88px); padding: clamp(36px, 6vw, 60px) 20px; border: 1px solid var(--line-hi); border-radius: 14px; text-align: center; background: var(--px-rise, none) no-repeat 50% 100%; image-rendering: pixelated }
.ql-cta h2 { margin: 0; font: 700 clamp(1.7rem, 4vw, 2.8rem)/1.05 var(--mono); letter-spacing: -.05em; text-shadow: 0 0 8px #000, 0 0 18px #000 }
.ql-cta p { margin: 0; font: .82rem var(--mono); color: #d4d4d4; text-shadow: 0 0 6px #000, 0 0 12px #000 }
.ql-cta .ql-btn:not(.on) { background: #000 } /* a solid face over the dotted light */

@media (max-width: 1100px) {
  .ql-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .ql-center { grid-column: 1 / -1; order: -1; border-bottom: 1px solid var(--qline) }
  .ql-col:first-child { border-right: 1px solid var(--qline) }
  .ql-col:last-child { border-left: 0 }
  .ql-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ql-card:nth-child(4n) { border-right: 1px solid var(--qline) }
  .ql-card:nth-child(2n) { border-right: 0 }
  .ql-card:nth-last-child(-n + 4) { border-bottom: 1px solid var(--qline) }
  .ql-card:nth-last-child(-n + 2) { border-bottom: 0 }
}
@media (max-width: 900px) {
  .ql-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .ql-hero { grid-column: 1 / -1; grid-row: auto; border-bottom: 1px solid var(--qline) }
  .ql-meta:nth-of-type(odd) { border-left: 0 }
  .ql-headline { grid-column: 1 / -1; border-left: 0 }
  .ql-steps, .ql-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ql-steps li + li, .ql-cols > div + div { border-left: 0 }
  .ql-steps li, .ql-cols > div { border-bottom: 1px solid var(--qline) }
  .ql-phases { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .ql-main { grid-template-columns: minmax(0, 1fr) }
  .ql-col:first-child { border-right: 0; border-bottom: 1px solid var(--qline) }
  .ql-core { grid-template-columns: minmax(0, 1fr) }
  .ql-core-r { order: -1 }
  .ql-path ol { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .ql-path li + li { border-left: 0 }
  .ql-path li { border-bottom: 1px solid var(--qline) }
  .ql-cards, .ql-steps, .ql-cols { grid-template-columns: minmax(0, 1fr) }
  .ql-card { border-right: 0 !important; border-bottom: 1px solid var(--qline) !important }
  .ql-card:last-child { border-bottom: 0 !important }
}

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)) }
.toast { padding: 10px 14px; border-radius: 4px; background: #fff; color: #000; font: .82rem var(--mono); animation: pop .2s ease-out }
@keyframes pop { from { transform: translateY(6px); opacity: 0 } }

.fade-in { animation: fadein .35s ease-out both }
@keyframes fadein { from { opacity: .001; transform: translateY(6px) } }

@media (max-width: 960px) {
  .desk { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .top-row { flex-wrap: wrap; gap: 10px 14px }
  .top-row .search { order: 5; flex: 1 1 100%; max-width: none; margin: 0 } /* its own line under the logo */
  .top-row .top-ghost:not(.docs-btn) { margin-left: auto }
  .docs-btn { display: none }
  .about-link { margin-left: auto }
  .rule { grid-template-columns: 32px minmax(0, 1fr) auto }
  .rule .r-state { grid-column: 2 / -1 }
  .verdict { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .tape { overflow-x: auto }
}