/* COOLANT: frosted-glass navy interface. Royal-blue accent taken from the COOL coin, sky blue for holders. One dark theme. */
:root {
  --ink-0: #050d26; --ink-1: #081334; --ink-2: #0c1c47; --ink-3: #12306f;
  --glass: rgba(140, 180, 255, .06); --glass-2: rgba(140, 180, 255, .095); --glass-hi: rgba(170, 200, 255, .18);
  --line: rgba(150, 185, 255, .14); --line-2: rgba(150, 185, 255, .28);
  --ice: #6aa6ff; --ice-2: #cfe0ff; --ice-deep: #2a68e8; --ice-ink: #04122e;
  --ember: #8cc2ff; --ember-2: #5aa8ff;
  --up: #4fe3b0; --down: #ff7a8c;
  --txt: #e8f0ff; --mute: #8ea5d6; --dim: #5a6fa0;
  --f-display: 'Anybody', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --r: 18px; --r-sm: 11px; --ease: cubic-bezier(.2, .8, .2, 1);
  --tab-h: 0px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--txt); font: 400 15px/1.5 var(--f-body); background: var(--ink-0);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(42, 104, 232, .26), transparent 60%),
    radial-gradient(900px 560px at 100% 4%, rgba(106, 166, 255, .10), transparent 62%),
    radial-gradient(800px 600px at 60% 108%, rgba(30, 70, 170, .22), transparent 60%);
  background-attachment: fixed; overflow-x: hidden;
}
body::before {   /* frost grain */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .95  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
@media (max-width: 760px) { :root { --tab-h: 66px; } body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); } }
img, svg { max-width: 100%; }
a { color: var(--ice); text-decoration: none; }
a:hover { color: var(--ice-2); }
h1, h2, h3, h4 { font-family: var(--f-display); font-stretch: 112%; margin: 0; line-height: 1.1; letter-spacing: -.01em; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 10px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ice); color: var(--ice-ink); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 22px; padding-bottom: 40px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .mute { color: var(--mute); } .ember { color: var(--ember); }
.hint { color: var(--mute); font-size: 13px; }
.err { color: var(--down); font-size: 13px; min-height: 0; margin-top: 6px; overflow-wrap: anywhere; }
.err:empty { display: none; }
.n { text-align: right; }
[hidden] { display: none !important; }

/* ---------- glass card ---------- */
.card {
  position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0;
  background: linear-gradient(160deg, var(--glass-2), var(--glass) 55%, rgba(120, 190, 230, .025));
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -26px rgba(0, 0, 0, .8);
}
.card > h3 { margin-bottom: 4px; }
.sheen { overflow: hidden; }
.sheen::after {   /* animated frost sheen */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .9;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .075) 48%, rgba(190, 245, 255, .11) 52%, transparent 62%);
  background-size: 260% 100%; background-position: 140% 0; animation: sheen 9s linear infinite;
}
@keyframes sheen { 0% { background-position: 140% 0; } 55%, 100% { background-position: -60% 0; } }
.empty-card { text-align: center; padding: 34px 20px; }
.empty-card p { color: var(--mute); max-width: 52ch; margin: 8px auto 14px; }

/* ---------- buttons, chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; font: 700 14px/1 var(--f-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap; user-select: none;
  color: var(--ice-ink); background: linear-gradient(180deg, #b9d1ff, #5b93ff 60%, #29b9e3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 8px 26px -10px rgba(91, 147, 255, .75);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s, background .18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 12px 30px -10px rgba(106, 166, 255, .9); color: var(--ice-ink); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; filter: saturate(.5); }
.btn.ghost { background: var(--glass); color: var(--txt); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { background: var(--glass-2); border-color: var(--ice); color: var(--ice-2); }
.btn.hot { background: linear-gradient(180deg, #ffd9a8, #8cc2ff 60%, #5aa8ff); color: #3a1a04; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 8px 26px -10px rgba(255, 138, 76, .75); }
.btn.sell { background: linear-gradient(180deg, #ffc0c9, #ff7a8c 60%, #f25c72); color: #3a0a14; box-shadow: 0 8px 26px -10px rgba(255, 122, 140, .7); }
.btn.sm { min-height: 32px; padding: 6px 13px; font-size: 13px; }
.btn.lg { min-height: 50px; padding: 13px 26px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn svg { width: 16px; height: 16px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.chip, .chips button, .seg button.sg {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass);
  color: var(--txt); font: 600 13px/1.1 var(--f-body); cursor: pointer; text-decoration: none; transition: .16s var(--ease);
}
.chips button:hover, a.chip:hover, button.chip:hover { border-color: var(--ice); color: var(--ice-2); transform: translateY(-1px); }
.chips button[aria-pressed="true"], .chip.on { background: rgba(106, 166, 255, .16); border-color: var(--ice); color: var(--ice-2); }
span.chip { cursor: default; }
span.chip:hover { transform: none; border-color: var(--line); color: var(--txt); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.2 var(--f-mono); background: rgba(255, 255, 255, .06); }
.pill.up { background: rgba(85, 239, 192, .13); color: var(--up); }
.pill.down { background: rgba(255, 122, 140, .13); color: var(--down); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font: 700 10px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(106, 166, 255, .14); color: var(--ice); }
.badge.hot { background: rgba(140, 194, 255, .16); color: var(--ember); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 6px 0 2px; vertical-align: baseline; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(85, 239, 192, .6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(85, 239, 192, 0); } 100% { box-shadow: 0 0 0 0 rgba(85, 239, 192, 0); } }

/* ---------- forms ---------- */
label { display: block; margin: 14px 0 6px; font: 600 12px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
label.plain { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--txt); }
input[type=text], input:not([type]), input[type=search], input[type=url], input[type=number], input[inputmode], textarea, select {
  width: 100%; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: rgba(3, 8, 26, .55); color: var(--txt); transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(106, 166, 255, .18); }
input.bad { border-color: var(--down); }
textarea { resize: vertical; min-height: 78px; }
.field-note { color: var(--mute); font-size: 12.5px; margin-top: 6px; }
.swapin { position: relative; display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(3, 8, 26, .6); padding: 4px 6px 4px 4px; transition: .15s; }
.swapin:focus-within { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(106, 166, 255, .18); }
.swapin input { border: 0; background: transparent; font: 600 22px/1.2 var(--f-mono); padding: 10px 10px; box-shadow: none !important; min-width: 0; flex: 1; }
.swapin .unit { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line); font-weight: 700; font-size: 14px; white-space: nowrap; }
.kvrow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; color: var(--mute); }
.kvrow b, .kvrow .v { color: var(--txt); font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(3, 8, 26, .6); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; color: var(--mute); padding: 9px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: .18s var(--ease); }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, #b9d1ff, #5b93ff); color: var(--ice-ink); box-shadow: 0 6px 18px -8px rgba(106, 166, 255, .9); }
.seg button.s[aria-pressed="true"] { background: linear-gradient(180deg, #ffc0c9, #ff7a8c); color: #3a0a14; box-shadow: 0 6px 18px -8px rgba(255, 122, 140, .9); }
details.more { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
details.more summary { cursor: pointer; font-weight: 600; color: var(--ice); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: '+'; display: inline-block; width: 18px; font-family: var(--f-mono); }
details.more[open] summary::before { content: '–'; }
.signbox { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-2); background: rgba(3, 8, 26, .55); font: 12px/1.5 var(--f-mono); color: var(--mute); white-space: pre-wrap; overflow-wrap: anywhere; }

/* sliders */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; padding: 0; border: 0; margin: 6px 0; cursor: pointer; --p: 50%; --c1: var(--ice); --c2: rgba(150, 185, 255, .18); }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--c1) var(--p), var(--c2) var(--p)); border: 1px solid var(--line); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--c1) var(--p), var(--c2) var(--p)); border: 1px solid var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfe0ff 45%, #5b93ff); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(106, 166, 255, .22), 0 6px 16px rgba(0, 0, 0, .5); transition: transform .15s; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfe0ff 45%, #5b93ff); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(106, 166, 255, .22); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range].split { --c1: var(--ice); --c2: var(--ember); }
input[type=range].split::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ice), #b9c9ee 50%, var(--ember)); }
input[type=range].split::-moz-range-track { background: linear-gradient(90deg, var(--ice), #b9c9ee 50%, var(--ember)); }

/* ---------- header ---------- */
header.top { position: sticky; top: 0; z-index: 40; background: rgba(4, 9, 28, .66); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 800 22px/1 var(--f-display); letter-spacing: -.02em; color: var(--txt); text-decoration: none; }
.logo:hover { color: var(--ice-2); }
.logo img { filter: drop-shadow(0 4px 12px rgba(91, 147, 255, .45)); transition: transform .5s var(--ease); }
.logo:hover img { transform: rotate(-8deg) scale(1.06); }
nav.main { display: flex; gap: 2px; margin-left: 6px; }
nav.main a { padding: 8px 13px; border-radius: 999px; color: var(--mute); font-weight: 600; font-size: 14px; transition: .16s; }
nav.main a:hover { color: var(--txt); background: var(--glass); }
nav.main a[aria-current="page"] { color: var(--ice-2); background: rgba(106, 166, 255, .12); }
form.search { margin-left: auto; position: relative; width: 240px; }
form.search input { padding: 8px 14px 8px 36px; border-radius: 999px; font-size: 14px; margin: 0; }
form.search svg { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--mute); pointer-events: none; }
.netchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font: 600 12px var(--f-mono); color: var(--mute); }
.xlink { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--mute); border: 1px solid var(--line); }
.xlink:hover { color: var(--ice-2); border-color: var(--ice); }
.acct { position: relative; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; padding: 8px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(6, 15, 42, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 24px 60px -20px #000; z-index: 60; }
.acct-menu a, .acct-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: transparent; color: var(--txt); border-radius: 10px; cursor: pointer; font-size: 14px; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--glass-2); color: var(--ice-2); }
.acct-menu .who-l { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; color: var(--mute); font: 12px var(--f-mono); }
.acct-menu .who-l b { display: block; font: 700 14px var(--f-body); color: var(--txt); }
.acct-menu .bal { display: flex; justify-content: space-between; padding: 5px 12px; font: 13px var(--f-mono); color: var(--mute); }
.acct-menu .bal b { color: var(--txt); font-weight: 600; }
.notlive { background: linear-gradient(90deg, rgba(140, 194, 255, .13), rgba(140, 194, 255, .05)); border-bottom: 1px solid rgba(140, 194, 255, .25); color: #ffd9b0; font-size: 13px; }
.notlive .wrap { padding-top: 8px; padding-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.notlive b { color: var(--ember); }

/* tab bar (phones) */
.tabbar { display: none; }
@media (max-width: 900px) { form.search { display: none; } }
@media (max-width: 760px) {
  nav.main, .xlink, .netchip.hide-sm { display: none; }
  header.top .wrap { gap: 10px; height: 56px; justify-content: space-between; }
  header.top .acct { margin-left: auto; }
  .logo { font-size: 20px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 58px; padding: 6px;
    border: 1px solid var(--line-2); border-radius: 22px; background: rgba(5, 13, 38, .82); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 18px 40px -12px #000;
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 16px; color: var(--mute); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a[aria-current="page"] { color: var(--ice-2); background: rgba(106, 166, 255, .13); }
  .tabbar a.mid { color: var(--ice-ink); background: linear-gradient(180deg, #b9d1ff, #5b93ff); margin-top: -16px; height: 62px; border-radius: 20px; box-shadow: 0 10px 24px -8px rgba(91, 147, 255, .9); }
  .tabbar a.mid[aria-current="page"] { color: var(--ice-ink); }
}
footer.site { border-top: 1px solid var(--line); margin-top: 20px; padding: 26px 16px 34px; text-align: center; color: var(--dim); font-size: 13px; max-width: 1200px; margin-inline: auto; }
footer.site .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 12px; }
footer.site .links a { color: var(--mute); }

/* ---------- sections ---------- */
.sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; flex-wrap: wrap; }
.sec h2 { font-size: 24px; font-weight: 800; }
.pagehd { margin-top: 4px; }
h1.big { font-size: clamp(28px, 5vw, 44px); font-weight: 800; letter-spacing: -.025em; }
.eyebrow { font: 600 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.stack { display: grid; gap: 14px; min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.optrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rowhd { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rowhd > span { min-width: 0; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 600 11px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 10px 8px; white-space: nowrap; }
th.n { text-align: right; }
td { padding: 11px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
td.n { text-align: right; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(106, 166, 255, .04); }
a.who { color: var(--txt); font-weight: 700; }
a.who:hover { color: var(--ice-2); }

/* ---------- token logos ---------- */
img.tl { border-radius: 28%; object-fit: cover; background: var(--ink-3); flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 18px -6px rgba(0, 0, 0, .7); display: block; }
.cool-ic { vertical-align: -0.28em; }

/* ---------- token cards ---------- */
.tc {
  position: relative; display: block; padding: 15px; border-radius: var(--r); border: 1px solid var(--line); color: var(--txt); text-decoration: none; overflow: hidden;
  background: linear-gradient(165deg, var(--glass-2), var(--glass) 60%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.tc::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px 120px at var(--mx, 50%) -10%, rgba(106, 166, 255, .22), transparent 70%); }
.tc::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .09) 50%, transparent 60%); background-size: 260% 100%; background-position: 140% 0; }
.tc:hover { transform: translateY(-4px); border-color: var(--ice); box-shadow: 0 22px 44px -22px rgba(91, 147, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .1); color: var(--txt); }
.tc:hover::before { opacity: 1; }
.tc:hover::after { background-position: -60% 0; transition: background-position .9s var(--ease); }
.tc .top { display: flex; gap: 12px; align-items: center; min-width: 0; position: relative; }
.tc .top > div { min-width: 0; flex: 1; }
.tc .top b { display: block; font: 700 16px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc .top small { color: var(--mute); font-size: 12px; }
.tc .px { margin-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; position: relative; }
.tc .px .big { font: 600 17px var(--f-mono); letter-spacing: -.03em; }
.tc .px small { display: block; color: var(--mute); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tc .spark { width: 86px; height: 32px; flex: none; }
.tc .meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); position: relative; }
.tc .meta div { min-width: 0; }
.tc .meta small { display: block; color: var(--dim); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; }
.tc .meta b { font: 600 13px var(--f-mono); letter-spacing: -.03em; white-space: nowrap; }
.tc .tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; position: relative; }
.tc .tag { padding: 2px 8px; border-radius: 6px; font: 600 11px var(--f-mono); background: rgba(255, 255, 255, .05); color: var(--mute); }
.tc .tag.h { color: var(--ember); background: rgba(140, 194, 255, .1); }
.tc .tag.f { color: var(--ice); background: rgba(106, 166, 255, .1); }
.tc.mini { padding: 12px; width: 230px; flex: none; scroll-snap-align: start; }
.tc.mini .top b { font-size: 15px; }
/* list rows */
.lrow { display: grid; grid-template-columns: minmax(180px, 2.2fr) 1.2fr .9fr 1fr 1fr .8fr .7fr .8fr 96px; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--txt); text-decoration: none; transition: background .15s; }
.lrow:hover { background: rgba(106, 166, 255, .06); color: var(--txt); }
.lrow.hd { font: 600 11px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-block: 10px; }
.lrow.hd:hover { background: transparent; }
.lrow .nm { display: flex; gap: 11px; align-items: center; min-width: 0; }
.lrow .nm b { display: block; font: 700 15px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .nm small { color: var(--mute); font-size: 12px; }
.lrow .c { font: 600 13px var(--f-mono); letter-spacing: -.03em; white-space: nowrap; }
.lrow .spark { width: 90px; height: 28px; }
.rows { padding: 0; overflow: hidden; }
@media (max-width: 900px) {
  .lrow { grid-template-columns: minmax(0, 1.8fr) 1fr .8fr 1fr; }
  .lrow .hide-m { display: none; }
  .lrow.hd .hide-m { display: none; }
}
/* scroller rows */
.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.hscroll::-webkit-scrollbar { height: 6px; } .hscroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; }

/* ---------- skeleton ---------- */
.skel { position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); background: var(--glass); min-height: 64px; }
.skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(160, 230, 255, .12) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- spotlight ---------- */
.hero-line { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-line h1 { font-size: clamp(26px, 4.6vw, 46px); font-weight: 800; letter-spacing: -.03em; max-width: 18ch; }
.hero-line h1 em { font-style: normal; background: linear-gradient(90deg, var(--ice-2), var(--ice) 55%, #3cc3ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spotgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
@media (max-width: 960px) { .spotgrid { grid-template-columns: 1fr; } }
.spot { padding: 0; min-height: 330px; }
.spot .in { position: relative; z-index: 1; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; animation: fadeUp .5s var(--ease); }
@media (max-width: 700px) { .spot .in { grid-template-columns: 1fr; padding: 18px; gap: 14px; } }
.spot::before { content: ''; position: absolute; width: 520px; height: 520px; right: -140px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(106, 166, 255, .26), transparent 65%); pointer-events: none; }
.spot .lg { position: relative; width: 92px; height: 92px; flex: none; }
.spot .lg::before { content: ''; position: absolute; inset: -6px; border-radius: 34%; background: conic-gradient(from 0deg, var(--ice), transparent 30%, var(--ember) 55%, transparent 75%, var(--ice)); animation: spin 6s linear infinite; opacity: .85; filter: blur(.4px); }
.spot .lg img { position: relative; border-radius: 28%; box-shadow: 0 0 0 3px var(--ink-1); }
@keyframes spin { to { transform: rotate(360deg); } }
.spot .nm { display: flex; align-items: center; gap: 18px; }
.spot .nm h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; overflow-wrap: anywhere; }
.spot .tick { font: 600 13px var(--f-mono); color: var(--mute); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.spot .price { margin-top: 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.spot .price .big { font: 600 clamp(28px, 4.5vw, 40px) var(--f-mono); letter-spacing: -.04em; }
.spot .price .usd { color: var(--mute); font: 500 15px var(--f-mono); }
.spot .stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
@media (max-width: 520px) { .spot .stats4 { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 10px 12px; border-radius: 12px; background: rgba(3, 8, 26, .4); border: 1px solid var(--line); min-width: 0; }
.stat small { display: block; color: var(--mute); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.stat b { display: block; font: 600 15px var(--f-mono); letter-spacing: -.03em; margin-top: 2px; overflow-wrap: anywhere; }
.spot .cta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.spot .chartbox { position: relative; height: 230px; border-radius: 14px; border: 1px solid var(--line); background: rgba(3, 8, 26, .38); overflow: hidden; }
@media (max-width: 700px) { .spot .chartbox { height: 150px; } }
.spot .chartbox svg { width: 100%; height: 100%; display: block; }
.queue { padding: 10px; display: grid; gap: 4px; align-content: start; }
.queue h3 { padding: 8px 10px 6px; font-size: 12px; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.qi { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; width: 100%; text-align: left; cursor: pointer; transition: .18s var(--ease); overflow: hidden; }
.qi:hover { background: var(--glass-2); }
.qi[aria-pressed="true"] { background: rgba(106, 166, 255, .1); border-color: rgba(106, 166, 255, .35); }
.qi b { display: block; font: 700 14px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi small { color: var(--mute); font: 12px var(--f-mono); }
.qi .pill { margin-left: auto; }
.qi .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ice); }
.qi[aria-pressed="true"] .prog { animation: prog 7s linear forwards; }
.paused .qi[aria-pressed="true"] .prog { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
@media (max-width: 960px) { .queue { display: flex; overflow-x: auto; padding: 8px; gap: 8px; } .queue h3 { display: none; } .qi { width: auto; min-width: 190px; flex: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rv { animation: fadeUp .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* strip */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 760px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.strip .card { padding: 16px 18px; }
.strip small { display: flex; align-items: center; gap: 7px; color: var(--mute); font: 600 11px var(--f-body); letter-spacing: .09em; text-transform: uppercase; }
.strip b { display: block; margin-top: 6px; font: 700 clamp(22px, 3.2vw, 30px) var(--f-mono); letter-spacing: -.04em; }
.strip .sub { color: var(--dim); font-size: 12px; margin-top: 2px; }
.strip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); display: inline-block; }
.strip .e i { background: var(--ember); }

/* fee visual */
.feeviz { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
@media (max-width: 860px) { .feeviz { grid-template-columns: 1fr; } }
.flowsvg { width: 100%; height: auto; display: block; }
.flowsvg .pipe { fill: none; stroke-linecap: round; transition: stroke-width .35s var(--ease); }
.flowsvg .drop { animation: drip 2.6s linear infinite; }
@keyframes drip { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.cuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.cut { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(3, 8, 26, .4); text-align: center; position: relative; overflow: hidden; }
.cut::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c, var(--ice)); }
.cut small { display: block; color: var(--mute); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.cut b { display: block; font: 700 26px var(--f-mono); letter-spacing: -.04em; margin-top: 4px; }
.cut b span { font-size: 14px; color: var(--mute); }
.cut.p { --c: #7a8fc0; } .cut.c { --c: var(--ice); } .cut.h { --c: var(--ember); }
.segbar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.segbar i { display: block; height: 100%; transition: width .4s var(--ease); }
.legend { display: grid; gap: 4px; margin-top: 12px; }
.legend > div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--mute); }
.legend b { color: var(--txt); font-family: var(--f-mono); font-weight: 600; }
.cta-band { position: relative; margin-top: 36px; padding: 34px 26px; border-radius: 24px; text-align: center; overflow: hidden; border: 1px solid var(--line-2);
  background: radial-gradient(600px 240px at 50% 0, rgba(106, 166, 255, .22), transparent 70%), linear-gradient(160deg, rgba(42, 104, 232, .22), rgba(6, 15, 42, .6)); }
.cta-band h2 { font-size: clamp(24px, 4vw, 38px); font-weight: 800; letter-spacing: -.025em; }
.cta-band p { color: var(--mute); max-width: 52ch; margin: 10px auto 18px; }

/* ---------- explore ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 16px; }
.toolbar .sbox { position: relative; flex: 1 1 260px; }
.toolbar .sbox input { padding-left: 40px; border-radius: 999px; min-height: 44px; }
.toolbar .sbox svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; color: var(--mute); }
.vt { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); }
.vt button { width: 38px; height: 34px; border: 0; background: transparent; color: var(--mute); border-radius: 999px; cursor: pointer; display: grid; place-items: center; }
.vt button svg { width: 17px; height: 17px; }
.vt button[aria-pressed="true"] { background: rgba(106, 166, 255, .18); color: var(--ice-2); }

/* ---------- launch ---------- */
.step { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.step .no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--f-mono); color: var(--ice-ink); background: linear-gradient(180deg, #b9d1ff, #5b93ff); flex: none; }
.step h3 { font-size: 18px; }
.dual { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: start; margin-top: 12px; }
@media (max-width: 480px) { .dual { grid-template-columns: 1fr; } }
.drop { position: relative; width: 130px; height: 130px; border-radius: 30px; border: 1.5px dashed var(--line-2); background: rgba(3, 8, 26, .45); display: grid; place-items: center; text-align: center; cursor: pointer; overflow: hidden; transition: .2s var(--ease); color: var(--mute); }
.drop:hover, .drop.drag { border-color: var(--ice); background: rgba(106, 166, 255, .08); transform: scale(1.02); }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; }
.drop svg { width: 30px; height: 30px; margin: 0 auto 6px; display: block; color: var(--ice); }
.pairfixed { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; border: 1px solid rgba(106, 166, 255, .35); background: rgba(106, 166, 255, .07); margin-top: 12px; }
.pairfixed b { font: 800 20px var(--f-display); }
.pairfixed .lock { margin-left: auto; font: 600 11px var(--f-mono); letter-spacing: .1em; color: var(--ice); text-transform: uppercase; }
.feebig { font: 700 44px/1 var(--f-mono); letter-spacing: -.05em; }
.feebig small { font-size: 20px; color: var(--mute); }
.calc { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(3, 8, 26, .45); border: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.calc b { color: var(--txt); font-family: var(--f-mono); }
.sticky { position: sticky; top: 78px; }
.checks { display: grid; gap: 4px; margin: 14px 0 6px; font-size: 13.5px; color: var(--mute); }
.prog-steps { display: grid; gap: 8px; margin: 14px 0 4px; }
.ps { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 8, 26, .4); font-size: 14px; color: var(--mute); }
.ps .ic { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; font: 700 11px var(--f-mono); }
.ps.active { border-color: var(--ice); color: var(--txt); background: rgba(106, 166, 255, .08); }
.ps.active .ic { border-color: var(--ice); border-top-color: transparent; animation: spin .9s linear infinite; }
.ps.done { color: var(--txt); } .ps.done .ic { background: var(--up); border-color: var(--up); color: #032a1d; }
.ps.fail { border-color: var(--down); } .ps.fail .ic { background: var(--down); border-color: var(--down); color: #3a0a14; }
.ps.skip { opacity: .5; }
.done-card { text-align: center; padding: 34px 18px; overflow: hidden; }
.done-card .burst { position: relative; width: 110px; height: 110px; margin: 0 auto 10px; }
.done-card .burst::before, .done-card .burst::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ice); animation: burst 2.2s var(--ease) infinite; }
.done-card .burst::after { animation-delay: 1.1s; border-color: var(--ember); }
@keyframes burst { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.done-card .burst img { position: relative; z-index: 1; margin: 12px; }

/* ---------- token page ---------- */
.tokhd { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tokhd h1 { font-size: clamp(24px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tokhd .rt { text-align: right; }
.tokhd .rt .pxn { font: 600 clamp(26px, 4vw, 34px) var(--f-mono); letter-spacing: -.04em; }
.tkgrid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; align-items: start; }
.tkgrid .a-side { display: grid; gap: 14px; position: sticky; top: 76px; }
@media (max-width: 960px) { .tkgrid { grid-template-columns: 1fr; } .tkgrid .a-side { position: static; order: -1; } }
.tkmain { display: grid; gap: 14px; min-width: 0; }
.chartwrap { position: relative; height: 300px; }
@media (max-width: 600px) { .chartwrap { height: 220px; } }
.chartwrap svg.chart { width: 100%; height: 100%; display: block; overflow: visible; }
.chartwrap .tip { position: absolute; left: 10px; top: 6px; font: 600 13px var(--f-mono); color: var(--ice-2); pointer-events: none; }
.chartwrap .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-size: 14px; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.areafade { opacity: 0; animation: fadeIn 1s .5s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button { background: transparent; border: 0; padding: 10px 14px; color: var(--mute); font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--ice-2); border-bottom-color: var(--ice); }
.trow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.trow:last-child { border-bottom: 0; }
.holder .tp { display: flex; justify-content: space-between; font-size: 14px; }
.track { height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .06); margin: 5px 0 11px; overflow: hidden; }
.track i { display: block; height: 100%; background: linear-gradient(90deg, var(--ice-deep), var(--ice)); border-radius: 9px; }
.pager { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pager button { min-width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--glass); color: var(--mute); cursor: pointer; }
.pager button.cur { border-color: var(--ice); color: var(--ice-2); }
.claimbox { margin-top: 12px; padding: 13px; border-radius: 14px; border: 1px solid var(--line); background: rgba(3, 8, 26, .42); }
.claimbox.h { border-color: rgba(140, 194, 255, .3); }
.claimbox .lbl { display: flex; justify-content: space-between; color: var(--mute); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.claimbox .val { font: 700 20px var(--f-mono); letter-spacing: -.04em; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.stepper { display: flex; gap: 6px; margin: 12px 0 2px; }
.stepper i { flex: 1; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
.stepper i.on { background: var(--ice); }
.addr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.addr code { font: 12.5px var(--f-mono); color: var(--mute); overflow-wrap: anywhere; }

/* ---------- docs ---------- */
.docgrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: start; }
.toc { position: sticky; top: 80px; display: grid; gap: 2px; }
.toc a { padding: 7px 12px; color: var(--mute); border-left: 2px solid var(--line); font-size: 14px; }
.toc a:hover, .toc a.on { color: var(--ice-2); border-left-color: var(--ice); background: rgba(106, 166, 255, .05); }
@media (max-width: 860px) { .docgrid { grid-template-columns: 1fr; } .toc { position: static; display: flex; flex-wrap: wrap; gap: 6px; } .toc a { border: 1px solid var(--line); border-radius: 99px; } }
.doc h2 { font-size: 28px; margin: 40px 0 12px; scroll-margin-top: 84px; } .doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: #b9c9ee; max-width: 72ch; }
.doc ul { padding-left: 20px; }
.doc code { font-family: var(--f-mono); font-size: .9em; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); }
.risk { border-color: rgba(255, 122, 140, .35); background: linear-gradient(160deg, rgba(255, 122, 140, .1), rgba(255, 122, 140, .02)); }

/* ---------- toast + modal ---------- */
.toasts { position: fixed; z-index: 90; right: 16px; bottom: calc(var(--tab-h) + 24px); display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(6, 15, 42, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 40px -10px #000; animation: fadeUp .3s var(--ease); font-size: 14px; }
.toast.ok { border-color: rgba(85, 239, 192, .5); } .toast.bad { border-color: rgba(255, 122, 140, .55); }
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(2, 5, 18, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.modal .card { width: min(440px, 100%); max-height: 90vh; overflow: auto; background: rgba(9, 22, 58, .96); }
.modal .mh { display: flex; justify-content: space-between; align-items: center; }
.modal .x { border: 0; background: transparent; color: var(--mute); font-size: 24px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .draw { stroke-dashoffset: 0; } .areafade { opacity: 1; }
}

/* ---------- home hero, ticker, feed, calculator, teaser ---------- */
.page-anim { animation: pg .3s ease both; } @keyframes pg { from { opacity: 0; transform: translateY(8px); } }
.hero2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; padding: 30px; position: relative; overflow: hidden; margin-top: 18px; background-image: radial-gradient(600px 300px at 0% 0%, rgba(42, 104, 232, .28), transparent 70%); }
.hcopy { min-width: 0; align-self: center; }
.h1big { font-size: clamp(44px, 8vw, 92px); line-height: .95; color: var(--ice); font-stretch: 122%; font-weight: 800; }
.rot { font: 800 clamp(24px, 4vw, 40px)/1.1 var(--f-display); font-stretch: 112%; margin-top: 10px; }
.rot b { display: inline-block; color: var(--ember); transition: transform .26s, opacity .26s; } .rot b.out { transform: translateY(-60%); opacity: 0; }
.hero2 .sub { max-width: 50ch; margin: 14px 0 20px; color: var(--mute); font-size: 16.5px; }
kbd { font: 500 11px var(--f-mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; margin-left: 6px; color: var(--mute); }
.stage { position: relative; display: grid; gap: 14px; align-content: center; justify-items: center; min-width: 0; border-radius: 22px; padding: 18px; background: radial-gradient(circle at 50% 38%, rgba(60, 110, 230, .25), rgba(20, 50, 130, .18)); border: 1px solid var(--line); --m1: #9cc0f5; --m2: #5b8fe0; --m3: #2c58b8; --fr: .5; }
.mbtn { background: none; border: 0; padding: 0; width: min(260px, 64%); cursor: pointer; touch-action: manipulation; filter: drop-shadow(0 16px 24px rgba(20, 60, 160, calc(.25 + var(--fr) * .35))); }
.mbtn svg { width: 100%; height: auto; display: block; } .mbtn.sq { animation: sq .4s ease; } @keyframes sq { 30% { transform: scale(.88, 1.1); } 60% { transform: scale(1.08, .94); } }
.frost i { position: absolute; left: var(--x); top: var(--y); color: var(--ember); font-style: normal; font-size: 20px; opacity: calc(var(--fr) * var(--fr) * 1.1); animation: fl 3.2s var(--d) ease-in-out infinite alternate; } @keyframes fl { to { transform: translateY(-10px) rotate(40deg); } }
.dial { width: 100%; }
.rip { position: absolute; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2px solid var(--ice); animation: rp .8s ease-out forwards; pointer-events: none; } @keyframes rp { to { transform: scale(9); opacity: 0; } }
.spl { position: absolute; width: 9px; height: 12px; border-radius: 50% 50% 50% 50%/65% 65% 35% 35%; background: var(--ember); pointer-events: none; animation: sp .75s ease-out forwards; } @keyframes sp { to { transform: translate(var(--tx), calc(var(--ty) + 40px)); opacity: 0; } }
.ticker { overflow: hidden; margin-top: 14px; border-block: 1px solid var(--line); background: var(--glass); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tkr { display: flex; width: max-content; animation: mq 50s linear infinite; } .ticker:hover .tkr { animation-play-state: paused; } @keyframes mq { to { transform: translateX(-50%); } }
.tki { display: flex; gap: 8px; align-items: center; padding: 10px 20px; font-size: 13px; white-space: nowrap; color: var(--txt); } .tki:hover { background: var(--glass-2); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hd2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .hd2 h2 { font-size: 22px; }
.livedot { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--up); font-weight: 650; } .livedot i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: pd 1.2s infinite; } @keyframes pd { 50% { opacity: .3; } }
.feed { display: grid; gap: 2px; } .frow { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; font-size: 14px; color: var(--txt); } .frow:hover { background: var(--glass-2); }
.calc3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .calc3 > div { background: rgba(3, 8, 26, .45); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.calc3 small { color: var(--mute); font-size: 12px; display: block; } .calc3 b { display: grid; font: 500 14px var(--f-mono); } .calc3 em { font-style: normal; color: var(--mute); font-size: 12px; }
.tease { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; align-items: center; padding: 22px; } .tprev { max-width: 320px; width: 100%; justify-self: center; }
#cmd { position: fixed; inset: 0; z-index: 95; background: rgba(3, 8, 26, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; } #cmd[hidden] { display: none; }
.cbox { width: 100%; max-width: 560px; overflow: hidden; padding: 0; background: rgba(9, 22, 58, .97); } .cbox input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 18px; font-size: 17px; background: transparent; width: 100%; box-shadow: none; } .cbox input:focus { outline: none; }
.cres { max-height: 48vh; overflow: auto; padding: 6px; } .ci { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 11px; padding: 10px 12px; cursor: pointer; } .ci.on, .ci:hover { background: var(--glass-2); }
.chint { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); }
@media (max-width: 820px) { .hero2, .cols2, .tease { grid-template-columns: 1fr; } .hero2 { padding: 20px; } .calc3 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tkr, .frost i, .livedot i { animation: none; } }

/* token page, phone/tablet: token info first, then trade, chart, fee flow, activity */
@media (max-width: 960px) {
  .tkgrid .tkmain, .tkgrid .a-side { display: contents; }
  .tkgrid #infoCard { order: 0; } .tkgrid #trade { order: 1; } .tkgrid #chartCard { order: 2; } .tkgrid #feeflow { order: 3; } .tkgrid #actCard { order: 4; }
}