/* Kruv — layout: sticky header, scrolling tape, 1200px column, cards only on tradeable objects */
:root {
  --bg: #080c1a; --bg-2: #0b1124; --surface: rgba(14,20,44,.66); --surface-2: rgba(30,40,74,.62); --surface-3: rgba(58,70,112,.55);
  --solid: #121a33;
  --ink: #eef1fb; --ink-2: #b2bad4; --ink-3: #7480a3; --rule: rgba(150,170,230,.13); --rule-2: rgba(150,170,230,.24);
  --accent: #ffb27a; --accent-deep: #f4925a; --accent-ink: #1d0f06; --accent-wash: rgba(255,178,122,.14);
  --teal: #8fb6ff; --teal-wash: rgba(143,182,255,.14);
  --up: #5ee0a6; --up-wash: rgba(94,224,166,.13); --down: #ff7a8a; --down-wash: rgba(255,122,138,.14);
  --shadow: 0 30px 70px -36px rgba(0,0,0,.9);
  --veil: linear-gradient(180deg, rgba(3,6,22,.5) 0%, rgba(4,7,24,.64) 40%, rgba(3,5,18,.86) 100%);
  --lift: 0 2px 18px rgba(4,6,20,.55);
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max: 1240px; --r: 16px; --r-sm: 10px; --head: 62px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #eef0f7; --bg-2: #e5e8f2; --surface: rgba(255,255,255,.78); --surface-2: rgba(244,246,252,.85); --surface-3: rgba(222,227,241,.9);
  --solid: #ffffff;
  --ink: #111631; --ink-2: #474f6e; --ink-3: #7a819c; --rule: rgba(40,50,100,.11); --rule-2: rgba(40,50,100,.2);
  --accent: #d9692b; --accent-deep: #b9541b; --accent-ink: #ffffff; --accent-wash: rgba(217,105,43,.11);
  --teal: #3a5fd0; --teal-wash: rgba(58,95,208,.10);
  --up: #0f8f5a; --up-wash: rgba(15,143,90,.10); --down: #d33d55; --down-wash: rgba(211,61,85,.10);
  --shadow: 0 30px 70px -40px rgba(30,40,90,.4);
  --veil: linear-gradient(180deg, rgba(238,240,247,.52) 0%, rgba(238,240,247,.72) 45%, rgba(238,240,247,.88) 100%);
  --lift: 0 1px 3px rgba(255,255,255,.55);
  color-scheme: light;
} }
:root[data-theme="light"] {
  --bg: #eef0f7; --bg-2: #e5e8f2; --surface: rgba(255,255,255,.78); --surface-2: rgba(244,246,252,.85); --surface-3: rgba(222,227,241,.9);
  --solid: #ffffff;
  --ink: #111631; --ink-2: #474f6e; --ink-3: #7a819c; --rule: rgba(40,50,100,.11); --rule-2: rgba(40,50,100,.2);
  --accent: #d9692b; --accent-deep: #b9541b; --accent-ink: #ffffff; --accent-wash: rgba(217,105,43,.11);
  --teal: #3a5fd0; --teal-wash: rgba(58,95,208,.10);
  --up: #0f8f5a; --up-wash: rgba(15,143,90,.10); --down: #d33d55; --down-wash: rgba(211,61,85,.10);
  --shadow: 0 30px 70px -40px rgba(30,40,90,.4);
  --veil: linear-gradient(180deg, rgba(238,240,247,.52) 0%, rgba(238,240,247,.72) 45%, rgba(238,240,247,.88) 100%);
  --lift: 0 1px 3px rgba(255,255,255,.55);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--ink-3); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.02; font-weight: 700; }
h2 { font-size: 24px; font-weight: 650; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0; }
.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.micro { font-size: 12px; color: var(--ink-3); }

/* header */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
header.top .wrap { display: flex; align-items: center; gap: 18px; height: var(--head); }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 700 19px/1 var(--display); letter-spacing: -.03em; flex: none; }
.brand b { color: var(--accent); font-weight: 700; }
.brand-logo { color: var(--accent); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-logo { transform: rotate(-35deg); }
nav.main { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
nav.main::-webkit-scrollbar { display: none; }
nav.main a { padding: 7px 8px; border-radius: 7px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; transition: color .15s, background .15s; }
nav.main a:hover { color: var(--ink); background: var(--surface-2); }
nav.main a.on { color: var(--ink); background: var(--surface-3); }
.spacer { flex: 1; }
.hdr-right { display: flex; align-items: center; gap: 8px; flex: none; }
.chip-btn, .icon-btn { height: 34px; border: 1px solid var(--rule-2); background: var(--surface); border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 13px; color: var(--ink-2); transition: border-color .15s, color .15s; }
.chip-btn:hover, .icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.icon-btn { width: 34px; padding: 0; justify-content: center; }
.icon-btn svg { width: 16px; height: 16px; }
kbd { font: 500 11px/1 var(--mono); padding: 3px 5px; border-radius: 4px; background: var(--surface-3); color: var(--ink-3); }
.ccy { position: relative; }
.ccy-menu { position: absolute; right: 0; top: 40px; background: var(--solid); border: 1px solid var(--rule-2); border-radius: 10px; padding: 4px; min-width: 130px; box-shadow: var(--shadow); animation: menuIn .16s ease-out; }
.ccy-menu button { display: flex; width: 100%; justify-content: space-between; padding: 7px 10px; border: 0; background: none; border-radius: 6px; font-size: 13px; }
.ccy-menu button:hover, .ccy-menu button[aria-selected="true"] { background: var(--surface-3); }
.theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: block; } :root[data-theme="light"] .theme-btn .i-moon { display: none; }
.btn { height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s, background .15s, border-color .15s, opacity .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-deep); }
.btn.ghost { background: var(--surface); border-color: var(--rule-2); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink-3); }
.btn.big { height: 46px; font-size: 15px; padding: 0 22px; border-radius: 11px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.connect .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-wash); }

/* tape */
.tape { border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--bg-2) 70%, transparent); overflow: hidden; height: 34px; position: relative; }
.tape::before, .tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.tape::before { left: 0; background: linear-gradient(90deg, var(--bg-2), transparent); }
.tape::after { right: 0; background: linear-gradient(-90deg, var(--bg-2), transparent); }
.tape-track { display: flex; width: max-content; animation: tapeRoll 70s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 34px; font: 12px/1 var(--mono); color: var(--ink-2); border-right: 1px solid var(--rule); white-space: nowrap; }
.tape-item b { color: var(--ink); font-weight: 600; }
@keyframes tapeRoll { to { transform: translateX(-50%); } }

main { padding-block: 24px 80px; min-height: 70vh; }
#view > * { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: .001; transform: translateY(10px); } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* page background: a photo of Marina Bay at dusk, fixed behind every section */
.page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #1c2a63, #3c4f8f 55%, #1a2347); pointer-events: none; }
.page-bg img { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); max-width: none; object-fit: cover; object-position: 60% 55%; scale: 1.04; filter: blur(16px); transition: filter 1.2s ease, opacity 1.2s ease; animation: drift 40s ease-in-out infinite alternate; }
.page-bg.loaded img { filter: brightness(.66) contrast(1.12) saturate(1.15); }
.page-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 70% at 50% 0%, rgba(20,30,90,.45), transparent 70%); mix-blend-mode: multiply; }
.page-bg.noimg img { opacity: 0; }
.page-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--veil); transition: background .4s; }
@keyframes drift { from { scale: 1.04; object-position: 56% 55%; } to { scale: 1.12; object-position: 66% 60%; } }

/* hero: no frame, the content sits straight on the photo */
.dusk { position: relative; min-height: clamp(460px, 52vw, 600px); margin-bottom: 18px; display: flex; flex-direction: column; }
.dusk-top { position: relative; padding-block: clamp(8px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; max-width: 540px; }
.dusk-top .eyebrow { color: var(--ink-2); text-shadow: var(--lift); }
.dusk-top .lede { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.5; color: var(--ink); text-wrap: pretty; text-shadow: var(--lift); }
.dusk-top .lede em { font-style: normal; color: var(--accent); }
.dusk-top .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.btn.glass { background: var(--surface); color: var(--ink); border-color: var(--rule-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn.glass:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.white { background: var(--ink); color: var(--bg); }
.btn.white:hover { background: var(--accent); color: var(--accent-ink); }
.dusk-word { margin-top: auto; font: 250 clamp(60px, 11.4vw, 156px)/.8 var(--display); letter-spacing: -.055em; color: var(--ink); white-space: nowrap; text-shadow: var(--lift); pointer-events: none; user-select: none; padding-bottom: 6px; }
.dusk-word span { display: inline-block; animation: wordIn 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(40%); filter: blur(8px); } }
.dusk-card { position: absolute; right: 0; bottom: 18px; width: min(280px, 100%); background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--rule-2); color: var(--ink); border-radius: 14px; padding: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; box-shadow: var(--shadow); transition: transform .2s; }
.dusk-card:hover { transform: translateY(-3px); }
.dusk-card .lbl { grid-column: 1 / -1; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dusk-card b { font-size: 14px; display: block; }
.dusk-card .mono { font-size: 12px; }
.dusk-card .go { width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.dusk-pair { display: inline-flex; gap: 8px; align-items: center; font: 12px var(--mono); color: var(--ink-2); flex-wrap: wrap; }
.dusk-pair .pd { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); backdrop-filter: blur(8px); }
.dusk-pair .pd b { color: var(--ink); } .dusk-pair .pd i { font-style: normal; color: var(--accent); }
.dusk-pair .pd.swap { animation: pop .4s ease; }
@keyframes pop { 40% { transform: scale(1.06); } }
.foot-credit { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.foot-credit:hover { color: var(--ink); }
/* text that sits straight on the photo gets a soft lift */
.page-head h1, .shead h2, .prose h1, .prose h2 { text-shadow: var(--lift); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 16px 18px; }
.stat .v { font: 600 24px/1.1 var(--mono); font-variant-numeric: tabular-nums; margin-top: 8px; }
/* live feed of trades across the board */
.feed { display: flex; gap: 8px; overflow: hidden; margin: 18px 0 30px; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.feed a { flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px 6px 6px; border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; font-size: 12px; animation: feedIn .5s cubic-bezier(.2,.8,.2,1) both; }
.feed a .logo { width: 22px; height: 22px; border-radius: 50%; font-size: 9px; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-16px) scale(.95); } }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up); margin-right: 6px; animation: pulseLive 1.8s infinite; vertical-align: 1px; }
@keyframes pulseLive { 0% { box-shadow: 0 0 0 0 var(--up-wash); } 70% { box-shadow: 0 0 0 8px transparent; } }


/* toolbar */
.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--ink-2); }
.seg button.on { background: var(--surface-3); color: var(--ink); }
.search { height: 36px; border: 1px solid var(--rule); background: var(--surface); border-radius: 9px; padding: 0 12px; min-width: 0; flex: 1 1 200px; max-width: 320px; }
.search:focus { outline: none; border-color: var(--accent); }

/* coin cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.card { background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rule); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; position: relative; transition: border-color .18s, transform .18s, box-shadow .18s; min-width: 0; }
.card:hover { border-color: var(--rule-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.card .row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.card .nm { min-width: 0; flex: 1; }
.card .nm h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .px { text-align: right; }
.card .px .p { font: 600 15px var(--mono); }
.card canvas { width: 100%; height: 46px; display: block; }
.card .foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); gap: 8px; }
.star { position: absolute; top: 12px; right: 12px; }
.logo { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; font: 700 15px/1 var(--display); color: #fff; overflow: hidden; position: relative; }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.logo.sm { width: 28px; height: 28px; border-radius: 7px; font-size: 11px; }
.logo.lg { width: 58px; height: 58px; border-radius: 14px; font-size: 22px; }
.pairtag { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--teal-wash); color: var(--teal); white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.pill.grad { background: var(--accent-wash); color: var(--accent); }
.pill.up { background: var(--up-wash); color: var(--up); } .pill.down { background: var(--down-wash); color: var(--down); }
.prog { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--accent)); border-radius: inherit; transition: width .6s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden; }
.prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: sheen 2.4s infinite; transform: translateX(-100%); }
@keyframes sheen { to { transform: translateX(100%); } }
.flash-up { animation: flashUp .9s; } .flash-down { animation: flashDown .9s; }
@keyframes flashUp { 0% { background: var(--up-wash); } } @keyframes flashDown { 0% { background: var(--down-wash); } }
.starbtn { border: 0; background: none; color: var(--ink-3); padding: 4px; border-radius: 6px; line-height: 0; }
.starbtn:hover { color: var(--ink); } .starbtn.on { color: var(--accent); }
.starbtn svg { width: 16px; height: 16px; }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr.link:hover { background: var(--surface-2); cursor: pointer; }
td.r, th.r { text-align: right; }
.cell-co { display: flex; align-items: center; gap: 10px; }

/* section heads */
.shead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 38px 0 14px; flex-wrap: wrap; }
.shead:first-child { margin-top: 0; }
.page-head { margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.page-head p { color: var(--ink-2); max-width: 64ch; }

/* coin page */
.coin-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.coin-top .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.coin-top .t .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.coin-top .price { text-align: right; }
.coin-top .price .p { font: 600 30px/1 var(--mono); }
.coin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.panel { background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rule); border-radius: var(--r); padding: 16px; min-width: 0; }
.panel + .panel { margin-top: 14px; }
.chart-box { height: 380px; position: relative; }
.tf { display: flex; gap: 4px; margin-bottom: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.trade .seg { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.trade .seg button.on.buy { background: var(--up-wash); color: var(--up); }
.trade .seg button.on.sell { background: var(--down-wash); color: var(--down); }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.field label { font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; }
.inp { display: flex; align-items: center; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--bg-2); padding: 0 12px; height: 46px; transition: border-color .15s; }
.inp:focus-within { border-color: var(--accent); }
.inp input, .inp select { border: 0; background: none; outline: none; flex: 1; min-width: 0; font: 500 17px var(--mono); height: 100%; }
.inp span { font: 500 13px var(--mono); color: var(--ink-3); }
.quick { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.quick button { flex: 1; border: 1px solid var(--rule); background: var(--surface-2); border-radius: 7px; padding: 5px 0; font: 12px var(--mono); color: var(--ink-2); }
.quick button:hover { color: var(--ink); border-color: var(--rule-2); }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; }
.kv span:first-child { color: var(--ink-3); }
.kv span:last-child { font-family: var(--mono); text-align: right; }
.quote { margin: 14px 0; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.trades td { font-size: 13px; }
textarea.ta, input.tx, select.tx { width: 100%; border: 1px solid var(--rule-2); background: var(--bg-2); border-radius: 10px; padding: 11px 12px; outline: none; }
textarea.ta:focus, input.tx:focus, select.tx:focus { border-color: var(--accent); }
textarea.ta { min-height: 84px; resize: vertical; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.drop { border: 1.5px dashed var(--rule-2); border-radius: 12px; padding: 18px; display: flex; gap: 14px; align-items: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop.over, .drop:hover { border-color: var(--accent); background: var(--accent-wash); }
.err { color: var(--down); font-size: 12px; min-height: 16px; }
.hint { font-size: 12px; color: var(--ink-3); }
input[type=range] { width: 100%; accent-color: var(--accent); }

.tabs { display: flex; gap: 4px; }
.tabs button { border: 0; background: none; padding: 6px 10px; border-radius: 7px; font-weight: 600; font-size: 15px; color: var(--ink-3); }
.tabs button.on { color: var(--ink); background: var(--surface-3); }
.hbar { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; }
.hbar .track { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 5px; }
.hbar .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--accent)); border-radius: inherit; }
.slip { display: flex; gap: 6px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.slip .seg button { padding: 4px 8px; font: 12px var(--mono); }
.share-btn { margin-left: 4px; }

/* docs */
.docs { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; }
.docs aside { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--head) + 20px); align-self: start; }
.docs aside a { padding: 7px 10px; border-radius: 7px; color: var(--ink-2); font-size: 14px; }
.docs aside a.on, .docs aside a:hover { background: var(--surface-2); color: var(--ink); }
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 14px; color: var(--ink-2); }
.prose h1 { font-size: 36px; color: var(--ink); } .prose h2 { color: var(--ink); margin-top: 16px; }
.prose strong { color: var(--ink); }
.prose code { font: 13px var(--mono); background: var(--surface-3); padding: 2px 5px; border-radius: 5px; color: var(--ink); }
.prose pre { font: 13px/1.6 var(--mono); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; overflow-x: auto; color: var(--ink); margin: 0; }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.curve-fig { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 12px; }
.curve-fig canvas { width: 100%; height: 220px; display: block; }

/* modal + find */
.scrim { position: fixed; inset: 0; background: rgba(5,8,12,.6); backdrop-filter: blur(4px); z-index: 80; display: grid; place-items: start center; padding: 12vh 16px 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; max-width: 560px; background: var(--solid); border: 1px solid var(--rule-2); border-radius: 14px; box-shadow: var(--shadow); animation: menuIn .18s ease-out; max-height: 76vh; display: flex; flex-direction: column; overflow: hidden; }
.modal .mh { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rule); gap: 10px; }
.modal .mb { padding: 16px; overflow-y: auto; }
.modal pre { white-space: pre-wrap; font: 12.5px/1.6 var(--mono); margin: 0; color: var(--ink-2); }
.find-in { width: 100%; border: 0; background: none; outline: none; font-size: 17px; padding: 16px; border-bottom: 1px solid var(--rule); }
.find-list { overflow-y: auto; padding: 6px; }
.find-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.find-row.on { background: var(--surface-3); }
.find-row .grow { flex: 1; min-width: 0; }
.wallets { display: flex; flex-direction: column; gap: 8px; }
.wallets button { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--rule-2); background: var(--surface-2); padding: 12px; border-radius: 10px; }
.wallets button:hover, .wallets a:hover { border-color: var(--accent); }
.wallets a { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px dashed var(--rule-2); background: transparent; padding: 12px; border-radius: 10px; }
.wallets .grow { flex: 1; min-width: 0; }
.wallets button[disabled] { opacity: .7; cursor: progress; }
.btn.connect .logo.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* empty */
.empty { border: 1px dashed var(--rule-2); border-radius: var(--r); padding: 40px 20px; text-align: center; color: var(--ink-3); display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* footer */
footer { border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--bg-2) 80%, transparent); padding-block: 44px 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
.foot-tag { color: var(--ink-3); font-size: 14px; margin-top: 12px; max-width: 38ch; }
.foot-col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.foot-col a, .foot-link { color: var(--ink-2); border: 0; background: none; padding: 0; text-align: left; font-size: 14px; }
.foot-col a:hover, .foot-link:hover { color: var(--ink); }
.foot-head { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.foot-bar { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--rule); flex-wrap: wrap; }

@media (max-width: 1180px) {
  nav.main { display: none; }
  .menu-btn { display: inline-flex !important; }
  .find-lbl { display: none; }
}
.menu-btn { display: none !important; }
.mobile-nav { position: fixed; inset: var(--head) 0 auto 0; background: var(--solid); border-bottom: 1px solid var(--rule); z-index: 39; padding: 10px 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; animation: menuIn .16s; }
.mobile-nav a { padding: 10px; border-radius: 8px; color: var(--ink-2); }
.mobile-nav a.on { background: var(--surface-3); color: var(--ink); }
@media (max-width: 900px) {
  .coin-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .docs aside { position: static; flex-direction: row; overflow-x: auto; }
  .docs aside a { white-space: nowrap; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .dusk { min-height: 0; }
  .dusk-card { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 12px; }
  .dusk-word { margin-top: 40px; }
  .ccy, .x-btn, #findBtn kbd { display: none; }
  header.top .wrap { gap: 10px; }
  .hdr-right { gap: 6px; }
  .btn.connect { padding: 0 12px; }
  .chart-box { height: 300px; }
  .coin-top .price { text-align: left; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- wallet dialog ---------- */
.wm { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal:has(.wm) { max-height: 86vh; }
.wm .mh { flex: none; }
.wm-title { display: flex; align-items: center; gap: 8px; }
.wm-back { width: 30px; height: 30px; }
.wm-body { overflow-y: auto; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.wm-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wm-tools .search { max-width: none; flex: 1 1 150px; }
.wm-tools .seg button { font-size: 12px; padding: 6px 10px; }
.wm-sec { display: flex; flex-direction: column; gap: 8px; }
.wm-sec:empty { display: none; }
.wm-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); position: relative; overflow: hidden; transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, background .18s, box-shadow .18s; animation: wmIn .38s cubic-bezier(.2,.8,.2,1) both; }
.wm-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%); transform: translateX(-100%); transition: transform .6s; pointer-events: none; }
.wm-row:hover, .wm-row:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); outline: none; }
.wm-row:hover::after, .wm-row:focus-visible::after { transform: translateX(100%); }
.wm-row:active, .wm-row.pressed { transform: scale(.98); }
.wm-row:hover .wart { transform: rotate(-6deg) scale(1.06); }
.wm-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wm-row .grow b { font-size: 15px; }
.wm-row.is-in { border-color: color-mix(in srgb, var(--up) 40%, var(--rule)); }
.wm-row.is-in .wm-go { background: var(--up-wash); color: var(--up); }
.wm-demo { border-style: dashed; }
.wm-go { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--mono); padding: 6px 9px; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); flex: none; transition: gap .18s; }
.wm-row:hover .wm-go { gap: 8px; }
.wm-chips { display: flex; gap: 4px; flex: none; }
.wm-chip { font: 500 10px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: var(--teal-wash); color: var(--teal); }
.wm-chip.sol { background: var(--accent-wash); color: var(--accent); }
.wm-last { display: inline-block; margin-left: 8px; font: 500 10px/1 var(--mono); padding: 3px 6px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); vertical-align: 2px; }
.wart { display: inline-grid; place-items: center; flex: none; border-radius: 28%; overflow: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1); box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.wart img, .wart svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.wart.sm { box-shadow: none; border-radius: 6px; }
.wm-note { font-size: 13px; color: var(--ink-2); padding: 12px; border-radius: 12px; background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.wm-note b { color: var(--ink); }
.wm-foot { flex: none; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--rule); }
.wm-foot .foot-link { color: var(--accent); font-weight: 600; }
.wm-detail { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 14px 4px 10px; animation: wmIn .35s cubic-bezier(.2,.8,.2,1) both; }
.wm-detail p { color: var(--ink-2); max-width: 40ch; }
.wm-ring { position: relative; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; }
.wm-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), var(--teal), transparent 70%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 1.1s linear infinite; }
.wm-ring.done::before { background: var(--up); animation: none; }
.wm-ring.off::before { background: var(--down); animation: none; }
.wm-ring .wart { animation: breathe 1.6s ease-in-out infinite; }
.wm-ring.done .wart, .wm-ring.off .wart { animation: none; }
.wm-badge { position: absolute; right: 2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--up); color: #fff; font-weight: 700; box-shadow: 0 0 0 3px var(--solid); animation: pop .4s cubic-bezier(.2,.8,.2,1.4) both; }
.wm-badge.bad { background: var(--down); }
.wm-badge svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .4s .15s ease forwards; }
.wm-fail .wm-ring { animation: shake .45s; }
.wm-steps { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.wm-steps span { font: 500 11px/1 var(--mono); padding: 5px 8px; border-radius: 99px; background: var(--surface-3); color: var(--ink-3); }
.wm-steps span.on { background: var(--teal-wash); color: var(--teal); }
#wmS2 { background: var(--accent-wash); color: var(--accent); animation: blink 1.4s ease-in-out infinite; }
.wm-choices { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wm-howto { list-style: none; counter-reset: s; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; }
.wm-howto li { counter-increment: s; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--ink-2); font-size: 14px; }
.wm-howto li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink); font: 600 12px var(--mono); }
.wm-qr { display: flex; gap: 14px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--rule); width: 100%; }
.wm-qrbox { flex: none; width: 128px; height: 128px; padding: 6px; background: #fff; border-radius: 10px; }
.wm-qrbox img, .wm-qrbox canvas { width: 116px !important; height: 116px !important; display: block; }
.wm-help details { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.wm-help summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.wm-help details p { margin-top: 8px; }
.spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; animation: spark .8s cubic-bezier(.2,.8,.2,1) forwards; pointer-events: none; }
.shake { animation: shake .45s; }
@keyframes wmIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.06); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes blink { 50% { opacity: .55; } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }
@media (max-width: 560px) {
  .wm-chips { display: none; }
  .wm-qr { flex-direction: column; text-align: center; }
  .scrim { padding: 8vh 10px 10px; }
}

/* ---------- live tokens ---------- */
.live-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-status { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.live-status b { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.snap-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.lstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lstats span { display: flex; flex-direction: column; gap: 2px; font: 500 12px var(--mono); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lstats i { font: 400 10px/1 var(--mono); font-style: normal; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.bsbar { height: 6px; border-radius: 99px; background: var(--down); opacity: .9; overflow: hidden; }
.bsbar i { display: block; height: 100%; background: var(--up); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.hot { color: var(--accent); }
.skel { min-height: 250px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.addr-chip { align-self: flex-start; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2); font-size: 12px; padding: 4px 8px; border-radius: 7px; }
.addr-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.logo .tok-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .nm .micro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo.art { background: var(--surface-3); }
.logo.art svg { width: 100%; height: 100%; display: block; }

/* ---------- quick view sheet ---------- */
.logo.xl { width: 76px; height: 76px; border-radius: 20px; font-size: 26px; }
.peek-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(4,6,18,0); backdrop-filter: blur(0); transition: background .3s, backdrop-filter .3s; }
.peek-scrim.open { background: rgba(4,6,18,.5); backdrop-filter: blur(3px); }
.peek { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--solid); border-left: 1px solid var(--rule-2); box-shadow: -30px 0 80px -30px rgba(0,0,0,.7); transform: translateX(104%); transition: transform .36s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.peek-scrim.open .peek { transform: none; }
.peek-scrim.closing .peek { transform: translateX(104%); transition-duration: .28s; }
.peek-grab { display: none; }
.peek-body { overflow-y: auto; overflow-x: hidden; flex: 1; padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
.peek-in { display: flex; flex-direction: column; gap: 16px; animation: peekFade .32s cubic-bezier(.2,.8,.2,1) both; }
.peek-in.from-r { animation-name: peekR; } .peek-in.from-l { animation-name: peekL; }
@keyframes peekR { from { opacity: 0; transform: translateX(40px); } }
@keyframes peekL { from { opacity: 0; transform: translateX(-40px); } }
@keyframes peekFade { from { opacity: 0; transform: translateY(10px); } }
.peek-top { display: flex; align-items: center; gap: 6px; }
.peek-top .icon-btn { width: 32px; height: 32px; font-size: 18px; }
.peek-top .icon-btn[disabled] { opacity: .35; cursor: default; }
.peek-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo name" "px px"; gap: 12px 14px; align-items: center; }
.peek-logo { grid-area: logo; animation: logoPop .5s cubic-bezier(.2,.8,.2,1.3) both; }
@keyframes logoPop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }
.peek-name { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.peek-name .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.peek-name h2 { font-size: 26px; line-height: 1.05; overflow-wrap: anywhere; }
.peek-px { grid-area: px; display: flex; align-items: baseline; gap: 10px; }
.peek-px .p { font-size: 30px; font-weight: 600; }
.peek-spark { width: 100%; height: 110px; display: block; }
.peek-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.peek-stats div { background: var(--surface-2); padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.peek-stats > div > span { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.peek-stats b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-desc { color: var(--ink-2); font-size: 14px; }
.peek-buy { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--rule); }
.peek-chips { display: flex; gap: 8px; }
.chip { flex: 1; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2); border-radius: 10px; padding: 9px 0; font: 600 14px var(--mono); text-align: center; transition: transform .15s, background .15s, color .15s, border-color .15s; }
.chip:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: scale(1.04); }
.peek-go { width: 100%; position: relative; overflow: visible; transition: background .2s, transform .15s; }
.peek-go.done { background: var(--up); color: #fff; }
.peek-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.peek-actions .btn { flex: 1; }
body.peeking { overflow: hidden; }
@media (max-width: 700px) {
  .peek { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--rule-2); border-radius: 22px 22px 0 0; transform: translateY(104%); box-shadow: 0 -30px 80px -30px rgba(0,0,0,.7); }
  .peek-scrim.closing .peek { transform: translateY(104%); }
  .peek-grab { display: block; width: 44px; height: 5px; border-radius: 99px; background: var(--rule-2); margin: 10px auto 0; flex: none; touch-action: none; }
  .peek-top { touch-action: none; }
  .peek-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- page transitions ---------- */
.vt-logo { view-transition-name: hero-logo; display: inline-block; }
::view-transition-old(root) { animation: vtOut .22s ease both; }
::view-transition-new(root) { animation: vtIn .32s cubic-bezier(.2,.8,.2,1) both; }
::view-transition-group(hero-logo) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- how it works ---------- */
.how { margin-top: 44px; }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: stretch; }
.how-steps { display: flex; flex-direction: column; gap: 8px; }
.how-step { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface); backdrop-filter: blur(14px); color: var(--ink); position: relative; overflow: hidden; transition: border-color .2s, background .2s, transform .2s; }
.how-step:hover { transform: translateX(3px); }
.how-step.on { border-color: var(--accent); background: var(--surface-2); }
.how-n { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-3); font-weight: 600; transition: background .2s, color .2s; }
.how-step.on .how-n { background: var(--accent); color: var(--accent-ink); }
.how-step .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.how-txt { color: var(--ink-2); font-size: 14px; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1), opacity .3s; opacity: 0; }
.how-step.on .how-txt { grid-template-rows: 1fr; opacity: 1; }
.how-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: transparent; }
.how-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.how-step.on .how-bar i { animation: howFill 5s linear forwards; }
.how.paused .how-bar i, .how.hover .how-bar i { animation-play-state: paused; }
.how.paused .how-step.on .how-bar i { width: 100%; animation: none; }
@keyframes howFill { to { width: 100%; } }
.how-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 260px; }
.how-stage svg { width: 100%; max-width: 420px; height: auto; }
.how-stage svg.swap > * { animation: sceneIn .55s cubic-bezier(.2,.8,.2,1) both; }
.how-stage svg.swap > *:nth-child(2) { animation-delay: .08s; } .how-stage svg.swap > *:nth-child(3) { animation-delay: .16s; } .how-stage svg.swap > *:nth-child(4) { animation-delay: .24s; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(14px); } }
.sc-coin { transform-origin: 160px 85px; animation: coinSpin 3s ease-in-out infinite; }
@keyframes coinSpin { 50% { transform: scaleX(.15); } }
.sc-sparks circle { animation: twinkle 1.6s ease-in-out infinite; } .sc-sparks circle:nth-child(2) { animation-delay: .4s; } .sc-sparks circle:nth-child(3) { animation-delay: .8s; }
@keyframes twinkle { 50% { opacity: .2; } }
.sc-curve { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawCurve 1.4s ease forwards; }
@keyframes drawCurve { to { stroke-dashoffset: 0; } }
.sc-lock { animation: lockDrop .7s cubic-bezier(.2,.8,.2,1.4) both; }
@keyframes lockDrop { from { transform: translateY(-40px); opacity: 0; } }
.sc-arrow { animation: dash 1s linear infinite; } @keyframes dash { to { stroke-dashoffset: -12; } }
@media (max-width: 900px) { .how-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- pairs: rows that open ---------- */
tr.xrow td:first-child .cell-co::before { content: "›"; display: inline-block; width: 12px; color: var(--ink-3); transition: transform .25s; }
tr.xrow[aria-expanded="true"] td:first-child .cell-co::before { transform: rotate(90deg); color: var(--accent); }
tr.xrow[aria-expanded="true"] { background: var(--surface-2); }
tr.xdetail td { padding: 0; border-bottom: 0; white-space: normal; }
tr.xdetail.open td { border-bottom: 1px solid var(--rule); }
.xwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.8,.2,1); }
tr.xdetail.open .xwrap { grid-template-rows: 1fr; }
.xin { overflow: hidden; display: grid; grid-template-columns: 1.2fr 1.2fr auto; gap: 18px; padding: 0 14px; opacity: 0; transition: opacity .3s, padding .38s; }
tr.xdetail.open .xin { opacity: 1; padding: 14px; }
.xcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.xapps { display: flex; flex-wrap: wrap; gap: 6px; }
.xapps .chip { flex: none; padding: 6px 10px; font-size: 12px; }
.xcoin { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; border: 0; background: none; padding: 4px 6px; border-radius: 8px; text-align: left; font-size: 13px; }
.xcoin:hover { background: var(--surface-3); }
.xgo { justify-content: center; }
@media (max-width: 700px) { .xin { grid-template-columns: minmax(0, 1fr); } }

/* ---------- unclaimed: cards that flip ---------- */
.flip { perspective: 1000px; cursor: pointer; min-height: 230px; border-radius: var(--r); }
.flip-in { position: relative; height: 100%; min-height: 230px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.flip.flipped .flip-in { transform: rotateY(180deg); }
.flip:hover:not(.flipped) .flip-in { transform: rotateY(-8deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); justify-content: center; }
.face.back p { color: var(--ink-2); font-size: 14px; }
.flip .card:hover { transform: none; }
.flip-art { display: grid; place-items: center; flex: 1; }
.flip-hint { color: var(--ink-3); font-size: 18px; transition: transform .4s; }
.flip:hover .flip-hint { transform: rotate(180deg); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }

/* semantic colour wins over the muted caption colour */
.micro.up, .up .micro, .micro .up { color: var(--up); }
.micro.down, .down .micro, .micro .down { color: var(--down); }
/* collapsed or turned-away content can't take focus */
.xin { visibility: hidden; transition: opacity .3s, padding .38s, visibility 0s .38s; }
tr.xdetail.open .xin { visibility: visible; transition: opacity .3s, padding .38s, visibility 0s; }
.face.back { visibility: hidden; transition: visibility 0s .3s; }
.flip.flipped .face.back { visibility: visible; transition-delay: 0s; }
.flip.flipped .face.front { visibility: hidden; transition: visibility 0s .3s; }
.wart.wlogo { background: #fff; padding: 0; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(20,26,51,.08); }
.wart.wlogo svg { width: 70%; height: 70%; }
.wart.sm.wlogo svg { width: 80%; height: 80%; }

/* ---------- Zcash ---------- */
.zlogo { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: #1d1d1b; box-shadow: 0 0 0 1px rgba(236,178,68,.35), 0 10px 26px -12px rgba(236,178,68,.6); }
.zlogo svg { width: 78%; height: 78%; }
.zban { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(80px, 200px) auto auto; gap: 16px; align-items: center; margin: 18px 0 0; padding: 14px 18px; border-radius: var(--r); border: 1px solid color-mix(in srgb, #ecb244 45%, var(--rule)); background: var(--surface); backdrop-filter: blur(14px); transition: transform .2s, box-shadow .2s, border-color .2s; }
.zban:hover { transform: translateY(-2px); border-color: #ecb244; box-shadow: 0 20px 50px -28px rgba(236,178,68,.6); }
.zban-glow { position: absolute; inset: -40% -10%; background: radial-gradient(40% 60% at 10% 50%, rgba(236,178,68,.18), transparent 70%); pointer-events: none; animation: zglow 6s ease-in-out infinite alternate; }
@keyframes zglow { to { transform: translateX(20%); } }
.zban .zlogo { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.zban:hover .zlogo { transform: rotate(-12deg) scale(1.06); }
.zban-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zban-t b { font: 650 18px var(--display); }
.zban-spark { width: 100%; height: 40px; }
.zban-px { display: flex; flex-direction: column; align-items: flex-end; }
.zban-px b { font-size: 18px; }
.zban-go { font-weight: 600; color: #ecb244; transition: transform .2s; }
.zban:hover .zban-go { transform: translateX(4px); }
@media (max-width: 700px) { .zban { grid-template-columns: auto minmax(0, 1fr) auto; } .zban-spark, .zban-go { display: none; } }
.zstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .zstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ztx { display: flex; flex-direction: column; gap: 6px; }
.zrow { display: grid; grid-template-columns: 80px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); text-align: left; transition: border-color .2s, background .2s, transform .15s; }
.zrow:hover { transform: translateX(3px); }
.zrow.on { border-color: #ecb244; }
.zk { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.zv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zlock { opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1.4); }
.ztx.shielded .zlock { opacity: 1; transform: none; }
.ztx.shielded .zrow { background: color-mix(in srgb, #ecb244 8%, var(--surface-2)); }
.ztx.shielded .zrow:nth-child(2) .zlock { transition-delay: .08s; } .ztx.shielded .zrow:nth-child(3) .zlock { transition-delay: .16s; } .ztx.shielded .zrow:nth-child(4) .zlock { transition-delay: .24s; }
.zexplain { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.zexplain.pop { animation: peekFade .3s cubic-bezier(.2,.8,.2,1); }
.zproof { margin-top: 10px; display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--up) 40%, transparent); background: var(--up-wash); color: var(--ink-2); font-size: 14px; }
.zproof svg { color: var(--up); flex: none; }
.zproof b { color: var(--ink); }
.zproof.in { animation: peekFade .4s cubic-bezier(.2,.8,.2,1); }
.zproof.in .zcheck { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s .25s ease forwards; }
.zpools { display: flex; flex-direction: column; gap: 6px; }
.zpool { text-align: left; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.zpool-h { display: flex; align-items: center; gap: 10px; }
.zpool-h b { flex: 1; }
.zpool-arrow { transition: transform .25s; color: var(--ink-3); }
.zpool[aria-expanded="true"] { border-color: #ecb244; }
.zpool[aria-expanded="true"] .zpool-arrow { transform: rotate(90deg); color: #ecb244; }
.zpool-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.2,.8,.2,1); color: var(--ink-2); font-size: 14px; }
.zpool-b > span { overflow: hidden; }
.zpool[aria-expanded="true"] .zpool-b { grid-template-rows: 1fr; }
.zpool[aria-expanded="true"] .zpool-b > span { padding-top: 6px; }
.zaddr { margin-top: 10px; min-height: 40px; }
.zres { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface-2); animation: peekFade .3s cubic-bezier(.2,.8,.2,1); }
.zres.shielded { border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.zres.transparent { border-color: color-mix(in srgb, #ecb244 45%, transparent); }
.zres.bad { border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.zres-ic { font-size: 20px; line-height: 1; }
#zAddr { font-family: var(--mono); font-size: 13px; }
.zsup i { background: linear-gradient(90deg, #ecb244, #f4b728) !important; }
.ztl { position: relative; height: 64px; margin: 18px 6px 6px; border-top: 2px solid var(--rule-2); }
.ztl-m { position: absolute; top: -7px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--ink-3); text-align: center; white-space: nowrap; }
.ztl-m::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--rule-2); }
.ztl-m.past::before { background: #ecb244; border-color: #ecb244; }
.ztl-m b { font: 600 11px var(--mono); color: var(--ink); }
.ztl-m:first-of-type { transform: none; align-items: flex-start; text-align: left; }
.ztl-m:last-of-type { transform: translateX(-100%); align-items: flex-end; text-align: right; }
.ztl-now { position: absolute; top: -9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px var(--up-wash); animation: pulseLive 1.8s infinite; z-index: 1; }

/* ---------- Kruv mark ---------- */
:root { --kruv-mark: url("data:image/png;base64,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"); }
.brand-mark { display: inline-block; width: 30px; height: 30px; flex: none; background: currentColor; -webkit-mask: var(--kruv-mark) center / contain no-repeat; mask: var(--kruv-mark) center / contain no-repeat; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mark { transform: translate(2px, -2px) rotate(-8deg); }
footer .brand-mark { width: 24px; height: 24px; }
.brand b { color: var(--accent); }
.dusk-word { font-size: clamp(88px, 19vw, 250px); display: flex; align-items: center; gap: .08em; }
.dusk-word .dusk-mark { display: inline-block; width: .82em; height: .82em; background: currentColor; -webkit-mask: var(--kruv-mark) center / contain no-repeat; mask: var(--kruv-mark) center / contain no-repeat; animation: markIn 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes markIn { from { opacity: 0; transform: translate(-40%, 40%) scale(.6) rotate(-20deg); } }