/* SIFT's website (landing /, /docs, /platform), served by the app's server (app/server.mjs sendWeb). Same palette as the app
   ("graphite + crystal", app/tools/recolour.mjs + app/client/style.css): a cool lifted graphite, a light ice accent with dark ink
   type on its fills, the spectrum only as hairlines. Its own frame: an optics bench (a live sift as the hero, rays out to real
   coins), Clash Display headings, Switzer text, Fira Mono numbers and labels. designreg: CLEAR (11-03). */
@font-face { font-family: "Clash Display"; src: url("/web/fonts/clash-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/web/fonts/clash-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/web/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/web/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/web/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fira Mono"; src: url("/web/fonts/firamono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Mono"; src: url("/web/fonts/firamono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #101217; --panel: #16181F; --raise: #1D2028; --line: #262A34; --line2: #363B48; --line3: #454B5A;
  --text: #F4F6FA; --text2: #B4B9C6; --text3: #7E8496;
  --crystal: #A8DEFF; --crystal2: #C4E9FF; --cr: 168, 222, 255; --ink: #0C0E13;
  --up: #2FE3AC; --down: #EC397A; --warn: #F2D28B;
  --spectrum: linear-gradient(90deg, #FF6B7A 0%, #FFB45C 17%, #FFE066 33%, #5FE3A1 50%, #5CD3F0 66%, #7CA8FF 83%, #A992FF 100%);
  --fd: "Clash Display", "Switzer", system-ui, sans-serif;
  --fb: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --w: 1280px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--fb);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 24px 24px; background-position: -12px -12px;
}
a { color: inherit; }
::selection { background: rgba(var(--cr), .35); color: #fff; }
.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.tri { display: inline-block; width: 9px; height: 8px; background: var(--crystal); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: 28px; padding: 0 28px;
  background: rgba(19, 21, 27, .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--spectrum); opacity: .55; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 21px/1 var(--fd); letter-spacing: -.01em; text-decoration: none; color: #fcfcfc; }
.brand svg { flex: none; }
.links { display: flex; gap: 4px; }
.links a { padding: 8px 12px; text-decoration: none; font: 500 12px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); border-radius: 6px; }
.links a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.links a.on { color: var(--text); }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 6px; text-decoration: none;
  font: 500 12.5px var(--fm); font-variant-numeric: tabular-nums; color: var(--text); background: rgba(255, 255, 255, .015); }
.chip:hover { border-color: var(--line3); }
.chip .k { color: var(--text3); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.chip b { font-weight: 500; min-width: 84px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(47, 227, 172, .14); flex: none; display: inline-block; }
.dot.down { background: var(--down); box-shadow: 0 0 0 3px rgba(236, 57, 122, .14); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid transparent;
  font: 600 14px/1 var(--fb); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, filter .15s ease; }
.btn.primary { color: var(--ink); background: var(--crystal) linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 26px -14px rgba(var(--cr), .95); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { color: var(--text); border-color: var(--line2); background: rgba(255, 255, 255, .015); }
.btn.ghost:hover { border-color: var(--line3); background: rgba(255, 255, 255, .04); }
.btn.lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn i { font-style: normal; }

/* ---------- labels ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--text3); }
.eyebrow b { color: var(--crystal); font-weight: 500; }
.tag { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(var(--cr), .28); background: rgba(var(--cr), .07);
  font: 500 10.5px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--crystal); }
.tag.warn { color: var(--warn); border-color: rgba(242, 210, 139, .35); background: rgba(242, 210, 139, .07); }

/* ---------- the hero: the bench ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: stretch; padding: 56px 0 28px; }
.hero h1 { margin: 22px 0 20px; font: 600 64px/1.0 var(--fd); letter-spacing: -.02em; text-wrap: balance; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #FFFFFF 0%, #DDEFFF 45%, var(--crystal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--text2); }
.cta { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 38px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.specs div { padding: 14px 16px; border-left: 1px solid var(--line); }
.specs div:first-child { border-left: 0; }
.specs dt { font: 500 10.5px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.specs dd { margin: 8px 0 0; font: 500 17px/1.2 var(--fm); color: var(--text); }

.bench { position: relative; min-height: 520px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: radial-gradient(70% 60% at 46% 50%, rgba(var(--cr), .07), transparent 70%), linear-gradient(180deg, #14161C, #121419); }
.bench::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 1px; background: var(--spectrum); z-index: 2; }
.bench canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bench .corner { position: absolute; z-index: 3; font: 500 10.5px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); display: flex; align-items: center; gap: 8px; }
.bench .tl { left: 16px; top: 16px; } .bench .tr { right: 16px; top: 16px; } .bench .bl { left: 16px; bottom: 16px; } .bench .br { right: 16px; bottom: 16px; }
.bench .corner b { color: var(--text); font-weight: 500; }
.rays { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ray-chip { position: absolute; right: 14px; display: flex; align-items: center; gap: 9px; width: 218px; height: 40px; padding: 0 10px 0 6px; transform: translateY(-50%);
  border: 1px solid var(--line2); border-left: 2px solid var(--c, var(--crystal)); border-radius: 6px; background: rgba(22, 24, 31, .92); pointer-events: auto; text-decoration: none;
  transition: top .6s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, background-color .3s ease; }
.ray-chip:hover { border-color: var(--line3); background: rgba(29, 32, 40, .96); }
.ray-chip.hit { background: rgba(var(--cr), .12); }
.ray-chip .pic { width: 28px; height: 28px; border-radius: 4px; overflow: hidden; flex: none; background: var(--raise); display: grid; place-items: center; font: 600 11px var(--fm); color: var(--text3); }
.ray-chip .pic img { width: 100%; height: 100%; object-fit: cover; }
.ray-chip .nm { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ray-chip .nm b { font: 600 13px/1 var(--fb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ray-chip .nm span { font: 400 11px/1 var(--fm); color: var(--text3); white-space: nowrap; }
.ray-chip .mc { text-align: right; font: 500 12.5px/1 var(--fm); color: var(--text); }
.ray-chip .mc small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--text3); }
.bench-empty { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 3; width: 236px; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 14px; border: 1px dashed rgba(var(--cr), .35); border-left: 2px solid #5FE3A1; border-radius: 8px; background: rgba(22, 24, 31, .9); }
.bench-empty .be-k { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.bench-empty b { font: 600 16px/1.25 var(--fd); color: var(--text); }
.bench-empty > span:not(.be-k) { font-size: 12.5px; line-height: 1.5; color: var(--text2); }
.bench-empty .btn { align-self: flex-start; height: 34px; margin-top: 4px; font-size: 13px; }
.empty.first { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px 28px; }
.empty.first b { font: 600 15px var(--fb); color: var(--text); }
.empty.first > span:not(.tri) { font-size: 12.5px; color: var(--text3); }
.empty.first .btn { margin-top: 6px; height: 34px; font-size: 13px; }
.nav-r .xlink { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line2); border-radius: 6px; color: var(--text2); text-decoration: none; }
.nav-r .xlink:hover { color: var(--text); border-color: var(--line3); }

/* ---------- the band of live numbers ---------- */
.band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; margin-top: 8px; }
.band > div { position: relative; padding: 20px 22px 18px; border-left: 1px solid var(--line); }
.band > div:first-child { border-left: 0; }
.band .k { display: flex; align-items: center; gap: 9px; font: 500 10.5px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.band .v { display: block; margin-top: 12px; font: 500 32px/1 var(--fm); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.band .s { display: block; margin-top: 8px; font-size: 13px; color: var(--text3); }

/* ---------- blocks ---------- */
.block { padding: 72px 0 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.head h2 { margin: 12px 0 0; font: 600 40px/1.05 var(--fd); letter-spacing: -.015em; }
.more { font: 500 12px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--crystal); text-decoration: none; white-space: nowrap; }
.more:hover { color: var(--crystal2); }

/* the three live columns */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.col { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.col-h { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; }
.col-h::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--spectrum) 0 0 / 96px 1px no-repeat, linear-gradient(90deg, rgba(var(--cr), .5), rgba(var(--cr), .12) 60%, transparent); }
.col-h .n { margin-left: auto; color: var(--text3); }
.row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid rgba(38, 42, 52, .6); text-decoration: none; transition: background-color .15s ease; }
.row:last-child { border-bottom: 0; }
.row:hover { background: rgba(var(--cr), .04); box-shadow: inset 2px 0 0 var(--crystal); }
.row .pic { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--raise); display: grid; place-items: center; font: 600 12px var(--fm); color: var(--text3); }
.row .pic img { width: 100%; height: 100%; object-fit: cover; }
.row .nm { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.row .nm b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .nm span { font: 400 12px var(--fm); color: var(--text3); }
.row .sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 400 11.5px var(--fm); color: var(--text3); }
.bar { position: relative; width: 64px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--spectrum); background-size: 64px 4px; }
.row .mc { text-align: right; font: 500 13.5px var(--fm); }
.row .mc .k { color: var(--text3); font-size: 10.5px; margin-right: 6px; }
.row .mc div { margin-top: 4px; font-size: 11.5px; color: var(--text3); }
.empty { padding: 34px 16px; text-align: center; font: 400 12.5px var(--fm); color: var(--text3); }

/* steps: a coin's life, left to right, along one beam */
.life { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.life::before { content: ""; position: absolute; left: 24px; right: 24px; top: 33px; height: 1px; background: var(--spectrum); opacity: .55; }
.st { position: relative; padding: 0 22px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.st .n { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 15px 0 18px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line2); font: 500 12px var(--fm); color: var(--crystal); }
.st h3 { margin: 0 0 10px; font: 600 22px/1.15 var(--fd); letter-spacing: -.01em; }
.st p { margin: 0; color: var(--text2); font-size: 15px; line-height: 1.6; }

/* features */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.feat { padding: 24px 24px 26px; background: var(--panel); }
.feat .k { display: flex; align-items: center; gap: 9px; font: 500 10.5px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.feat h3 { margin: 16px 0 8px; font: 600 20px/1.2 var(--fd); }
.feat p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text2); }

/* the fee table (filled only from the engine's config) */
.fees { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.fees table { width: 100%; border-collapse: collapse; }
.fees th, .fees td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.fees tr:last-child td { border-bottom: 0; }
.fees th { font: 500 10.5px var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); background: rgba(255, 255, 255, .01); }
.fees td.v { font-family: var(--fm); text-align: right; color: var(--text); white-space: nowrap; }
.fees td.d { color: var(--text2); }

/* final call */
.final { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 80px 0 0; padding: 36px 36px; border: 1px solid var(--line); border-radius: 12px;
  background: radial-gradient(60% 120% at 100% 50%, rgba(var(--cr), .1), transparent 70%), var(--panel); position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; left: 0; top: 0; width: 160px; height: 1px; background: var(--spectrum); }
.final h2 { margin: 0 0 8px; font: 600 34px/1.1 var(--fd); }
.final p { margin: 0; color: var(--text2); }

/* ---------- footer ---------- */
.foot { margin-top: 88px; border-top: 1px solid var(--line); background: #13151B; }
.foot .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; padding-top: 40px; padding-bottom: 36px; }
.foot p { margin: 12px 0 0; max-width: 360px; color: var(--text3); font-size: 14px; }
.foot h4 { margin: 4px 0 12px; font: 500 10.5px var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.foot .wrap > div > a:not(.brand) { display: block; margin: 0 0 8px; color: var(--text2); text-decoration: none; font-size: 14px; }
.foot .wrap > div > a:not(.brand):hover { color: var(--text); }
.legal { border-top: 1px solid var(--line); }
.legal .wrap { display: flex; justify-content: space-between; padding-top: 16px; padding-bottom: 18px; grid-template-columns: none; font: 400 12px var(--fm); color: var(--text3); }

/* ---------- docs ---------- */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding: 48px 0 0; }
.toc { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.toc a { padding: 7px 10px; border-radius: 6px; text-decoration: none; font: 500 12px var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.toc a:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.prose { max-width: 760px; }
.prose h1 { margin: 16px 0 14px; font: 600 52px/1.02 var(--fd); letter-spacing: -.02em; }
.prose h2 { margin: 52px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); font: 600 28px/1.15 var(--fd); scroll-margin-top: 90px; position: relative; }
.prose h2::before { content: ""; position: absolute; left: 0; top: -1px; width: 72px; height: 1px; background: var(--spectrum); }
.prose h3 { margin: 26px 0 8px; font: 600 18px var(--fb); }
.prose p, .prose li { color: var(--text2); font-size: 16px; line-height: 1.7; }
.prose li { margin: 4px 0; }
.prose b, .prose strong { color: var(--text); font-weight: 600; }
.prose code { font: 400 13.5px var(--fm); padding: 2px 6px; border-radius: 4px; background: var(--raise); border: 1px solid var(--line); color: var(--text); word-break: break-all; }
.prose a { color: var(--crystal); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.note { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--crystal); border-radius: 6px; background: var(--panel); color: var(--text2); font-size: 14.5px; }

/* ---------- the platform page ---------- */
.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 48px 0 22px; }
.pf-head h1 { margin: 14px 0 0; font: 600 48px/1.02 var(--fd); letter-spacing: -.02em; }
.pf-id { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font: 400 12.5px var(--fm); color: var(--text3); }
.pf-id a { color: var(--crystal); text-decoration: none; }
.pf-id a:hover { text-decoration: underline; }
.pf-tools { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; }
.seg button { height: 34px; padding: 0 14px; border: 0; border-left: 1px solid var(--line2); background: transparent; color: var(--text2); font: 500 11.5px var(--fm); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: rgba(var(--cr), .1); color: var(--crystal); }
.find { flex: 1; max-width: 340px; height: 34px; margin-left: auto; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: 400 13px var(--fm); outline: 0; }
.find:focus { border-color: var(--crystal); }
.tbl { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: clip; position: relative; }
.tbl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; background: var(--spectrum) 0 0 / 96px 1px no-repeat, linear-gradient(90deg, rgba(var(--cr), .5), rgba(var(--cr), .12) 60%, transparent); }
.tbl table { width: 100%; border-collapse: collapse; }
.tbl th { position: sticky; top: 64px; z-index: 1; padding: 12px 14px; background: #191B22; border-bottom: 1px solid var(--line); text-align: right;
  font: 500 10.5px var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid rgba(38, 42, 52, .7); text-align: right; font: 400 13px var(--fm); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr:hover td { background: rgba(var(--cr), .035); }
.tbl .coin { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.tbl .coin .pic { width: 30px; height: 30px; border-radius: 5px; overflow: hidden; background: var(--raise); flex: none; display: grid; place-items: center; font: 600 10px var(--fm); color: var(--text3); }
.tbl .coin .pic img { width: 100%; height: 100%; object-fit: cover; }
.tbl .coin b { font: 600 14px var(--fb); }
.tbl .coin span { color: var(--text3); margin-left: 6px; }
.tbl .st-g { color: var(--up); } .tbl .st-c { color: var(--text2); }
.tbl .lk a { color: var(--text3); text-decoration: none; margin-left: 10px; } .tbl .lk a:hover { color: var(--crystal); }

/* entrances: once, short */
.rise { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .bench { min-height: 440px; }
  .hero h1 { font-size: 52px; }
}
@media (max-width: 860px) {
  .wrap { padding: 0 18px; }
  .nav { padding: 0 16px; gap: 14px; }
  .links, .nav .chip { display: none; }
  .hero { padding-top: 34px; }
  .hero h1 { font-size: 40px; }
  .lead { font-size: 16px; }
  .specs div { padding: 12px 12px; }
  .specs dd { font-size: 14px; }
  .specs dt { font-size: 9.5px; letter-spacing: .1em; }
  .bench { min-height: 400px; }
  .ray-chip { width: 176px; }
  .bench-empty { width: 190px; padding: 11px; }
  .ey2 { display: none; }
  .bench .corner.tl { display: none; }
  .bench-empty > span:not(.be-k) { display: none; }
  .band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band > div:nth-child(3) { border-left: 0; }
  .band > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .band .v { font-size: 26px; }
  .cols, .life, .feats { grid-template-columns: minmax(0, 1fr); }
  .life::before { display: none; }
  .head h2 { font-size: 30px; }
  .final { flex-direction: column; align-items: flex-start; padding: 26px; }
  .foot .wrap { grid-template-columns: 1fr 1fr; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .prose h1 { font-size: 38px; }
  .pf-head { flex-direction: column; align-items: flex-start; }
  .pf-head h1 { font-size: 36px; }
  .pf-id { align-items: flex-start; }
  .tbl { overflow-x: auto; }
  .pf-tools { flex-wrap: wrap; }
  .seg button { padding: 0 10px; font-size: 10.5px; }
  .find { max-width: none; flex-basis: 100%; margin-left: 0; }
  .tbl th { position: static; }
}