/*
  TOKENS: the only file in this project that may hold colour literals.

  Palette provenance. Every hex below is a real pixel of a supplied asset.
  Method: k-means (k=8 on brand/LOGO NUSPAD PNG...png, opaque pixels only, deterministic
  seed; k=6 on the reference banners), each centroid snapped to the nearest real pixel.
  The "px" tag after each literal is "<file> @x,y"; the gate re-reads that pixel and
  fails the build when it no longer matches.
*/
:root {
  /* surfaces, from the banner art */
  --c-bg: #010f10;        /* px reference/SAMPUL NUSPAD JPG.jpg.jpeg @957,5 */
  --c-bg-deep: #00090c;   /* px reference/NUSPAD 1.jpg.jpeg @578,53 */
  --c-teal-dark: #023a2d; /* px reference/SAMPUL NUSPAD JPG.jpg.jpeg @133,45 */
  --c-teal-mid: #0e4047;  /* px reference/NUSPAD 1.jpg.jpeg @142,85 */
  /* ink */
  --c-ink: #defaeb;       /* px reference/NUSPAD 1.jpg.jpeg @1208,365 */
  --c-ink-glow: #ffffff;  /* px reference/NUSPAD 1.jpg.jpeg @1330,33 */
  /* brand hues, from the logo glass */
  --c-blue: #03c7f5;      /* px brand/LOGO NUSPAD PNG...png @891,954 */
  --c-mint: #0adcbd;      /* px brand/LOGO NUSPAD PNG...png @949,910 */
  --c-aqua: #4ef8e8;      /* px brand/LOGO NUSPAD PNG...png @1211,1044 */
  --c-green: #36ec88;     /* px brand/LOGO NUSPAD PNG...png @1296,1236 */
  --c-lime: #6ef150;      /* px brand/LOGO NUSPAD PNG...png @1407,1306 */
  --c-yellow: #bff221;    /* px brand/LOGO NUSPAD PNG...png @1326,694 */
  --c-pale: #bef97e;      /* px brand/LOGO NUSPAD PNG...png @1367,1227 */
}

:root {
  /* derived surfaces: mixes of the sampled colours, no new literals */
  --bg: var(--c-bg);
  --bg-deep: var(--c-bg-deep);
  --surface-1: color-mix(in oklab, var(--c-bg) 86%, var(--c-teal-mid));
  --surface-2: color-mix(in oklab, var(--c-bg) 72%, var(--c-teal-mid));
  --surface-3: color-mix(in oklab, var(--c-bg) 52%, var(--c-teal-mid));
  --border: color-mix(in oklab, var(--c-bg) 58%, var(--c-teal-mid) 42%);
  --border-strong: color-mix(in oklab, var(--c-teal-mid) 64%, var(--c-ink) 36%);
  --ink: var(--c-ink);
  --muted: color-mix(in oklab, var(--c-ink) 68%, var(--c-bg));
  --subtle: color-mix(in oklab, var(--c-ink) 54%, var(--c-bg));
  --brand: var(--c-lime);
  --brand-ink: var(--c-pale);
  --on-brand: var(--c-bg-deep);
  --aqua: var(--c-aqua);
  --blue: var(--c-blue);
  --up: var(--c-green);
  --down: var(--c-blue);
  --focus: var(--c-aqua);
  --tint-brand: color-mix(in oklab, var(--c-lime) 12%, transparent);
  --tint-aqua: color-mix(in oklab, var(--c-aqua) 13%, transparent);
  --tint-up: color-mix(in oklab, var(--c-green) 14%, transparent);
  --tint-down: color-mix(in oklab, var(--c-blue) 16%, transparent);
  --shade: color-mix(in oklab, var(--c-bg-deep) 72%, transparent);
  --overlay: color-mix(in oklab, var(--c-bg-deep) 70%, transparent);
  --grad-brand: linear-gradient(100deg, var(--c-yellow) 0%, var(--c-green) 38%, var(--c-aqua) 70%, var(--c-blue) 100%);
  --grad-soft: linear-gradient(100deg, color-mix(in oklab, var(--c-lime) 18%, transparent), color-mix(in oklab, var(--c-blue) 18%, transparent));
  --glow-brand: 0 0 0 1px color-mix(in oklab, var(--c-lime) 35%, transparent), 0 8px 32px -6px color-mix(in oklab, var(--c-lime) 35%, transparent);
  --glow-aqua: 0 0 0 1px color-mix(in oklab, var(--c-aqua) 40%, transparent), 0 10px 36px -8px color-mix(in oklab, var(--c-aqua) 45%, transparent);
  --shadow-pop: 0 18px 48px -12px var(--shade), 0 0 0 1px var(--border);

  /* measured from the reference: type, radii, layers, easing, timing */
  --font-display: "Bricolage Grotesque Variable", "Instrument Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Instrument Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-micro: 0.6875rem;
  --fs-label: 0.75rem;
  --fs-body: 0.875rem;
  --fs-stat: 1.0625rem;
  --fs-section: 1.125rem;
  --fs-title: 1.375rem;
  --fs-page: 1.875rem;
  --fs-display: 2.75rem;
  --r-control: 10px;
  --r-panel: 14px;
  --r-module: 20px;
  --appbar-h: 64px;
  --maxw: 1728px;
  --z-sticky: 20;
  --z-appbar: 30;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-toast: 70;
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-press: 0.14s;
  --dur-hover: 0.26s;
  --dur-route: 0.26s;
  --dur-panel: 0.32s;
  --dur-flash: 0.6s;
  --dur-skeleton: 1.6s;
  --dur-live: 1.8s;
  --dur-marquee: 60s;
}

[hidden] { display: none !important; }
/* Components. No colour literals here: everything comes from tokens.css. */

@font-face { font-family: "Bricolage Grotesque Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("fonts/bricolage-grotesque-wght.woff2") format("woff2-variations"); }
@font-face { font-family: "Instrument Sans Variable"; font-style: normal; font-display: swap; font-weight: 400 700; src: url("fonts/instrument-sans-wght.woff2") format("woff2-variations"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 156px; overflow-x: clip; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.45 var(--font-sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
img { display: block; max-width: 100%; }
code { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: var(--z-toast); padding: 8px 12px; border-radius: var(--r-control); background: var(--brand); color: var(--on-brand); font-weight: 600; transform: translateY(-200%); }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1024px) { .wrap { padding-inline: 24px; } }
.num { font-variant-numeric: tabular-nums; }
.subtle { color: var(--subtle); }
.break { overflow-wrap: anywhere; word-break: break-all; }

/* ---------- motion primitives (timings measured off the reference) ---------- */
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes drift-a { to { transform: translate(14rem, 4rem) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-6rem, 3rem) scale(1.08); } }
@keyframes mesh-shift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%; } 100% { background-position: 18% 10%, 82% 14%, 40% 88%; } }
@keyframes sweep { to { transform: translateX(120%); } }
@keyframes tint-up { 0% { background-color: var(--tint-up); } 100% { background-color: transparent; } }
@keyframes tint-down { 0% { background-color: var(--tint-down); } 100% { background-color: transparent; } }
@keyframes digit-in { 0% { opacity: .35; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
@keyframes panel-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes fade-out { to { opacity: 0; } }
.press { transition: transform var(--dur-press) var(--ease-quart); }
.press:active:not(:disabled) { transition-duration: 90ms; transform: scale(.97); }
.skeleton { display: block; background: var(--surface-3); border-radius: 8px; animation: skeleton-pulse var(--dur-skeleton) ease-in-out infinite; }
.live-dot { animation: live-pulse var(--dur-live) ease-in-out infinite; }
.flash-up { animation: tint-up var(--dur-flash) var(--ease-quart); }
.flash-down { animation: tint-down var(--dur-flash) var(--ease-quart); }
.digit-in { display: inline-block; animation: digit-in .28s var(--ease-quart); }
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); will-change: transform, opacity; }
.js [data-reveal].revealed { opacity: 1; transform: none; will-change: auto; }

/* ---------- backdrop ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 9999px; will-change: transform; }
.b1 { width: 34rem; height: 26rem; top: 18rem; left: -10rem; filter: blur(90px); opacity: .55; background: color-mix(in oklab, var(--c-lime) 16%, transparent); animation: drift-a 26s ease-in-out infinite alternate; }
.b2 { width: 70rem; height: 30rem; top: -18rem; left: 50%; margin-left: -35rem; filter: blur(60px); opacity: .8; background: radial-gradient(closest-side, color-mix(in oklab, var(--c-blue) 55%, transparent), color-mix(in oklab, var(--c-teal-mid) 55%, transparent) 60%, transparent); animation: drift-b 32s ease-in-out infinite alternate; }
.b3 { width: 40rem; height: 30rem; top: 30rem; right: -14rem; filter: blur(90px); opacity: .55; background: color-mix(in oklab, var(--c-teal-dark) 70%, transparent); animation: drift-a 38s ease-in-out infinite alternate-reverse; }
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- app bar ---------- */
.appbar { position: sticky; top: 0; z-index: var(--z-appbar); background: color-mix(in oklab, var(--bg-deep) 85%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.bar { display: flex; align-items: center; gap: 12px; height: var(--appbar-h); }
@media (min-width: 1024px) { .bar { gap: 24px; } }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; border-radius: var(--r-control); }
.brand img { width: 32px; height: 32px; object-fit: contain; }
.brand-text { font: 700 var(--fs-stat)/1.4 var(--font-display); letter-spacing: -.01em; }
.brand-accent { color: var(--brand); }
.pillnav { display: none; }
.pillnav ul { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); border-radius: 9999px; background: color-mix(in oklab, var(--surface-1) 70%, transparent); }
.pillnav a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 9999px; color: var(--muted); font-weight: 500; transition: color .15s, background-color .15s; }
.pillnav a:hover { color: var(--ink); }
.pillnav a[aria-current] { color: var(--ink); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
@media (min-width: 768px) { .pillnav { display: block; } }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.socials { display: flex; gap: 8px; }
.icon-btn { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface-1); color: var(--ink); transition: border-color .2s var(--ease-quart), background-color .2s var(--ease-quart); }
a.icon-btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.icon-btn.is-inert { color: var(--muted); border-style: dashed; cursor: default; }
.status { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9999px; background: color-mix(in oklab, var(--surface-1) 80%, transparent); font-size: var(--fs-label); font-weight: 600; white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--up); flex-shrink: 0; }
.status[data-state="loading"] .dot { background: var(--aqua); }
.status[data-state="stale"] .dot, .status[data-state="error"] .dot { background: var(--c-yellow); }
.status[data-state="idle"] .dot, .status[data-state="paused"] .dot { background: var(--subtle); animation: none; }
.pending { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px dashed var(--border-strong); border-radius: 9999px; color: var(--subtle); font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em; }

/* ---------- contract slot ---------- */
.ca { border-top: 1px solid color-mix(in oklab, var(--border) 50%, transparent); background: color-mix(in oklab, var(--surface-1) 70%, transparent); }
.ca-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding-block: 8px; }
.ca-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-width: 0; flex: 1; }
.ca-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; background: var(--tint-brand); color: var(--brand); font: 700 var(--fs-micro)/1.3 var(--font-sans); letter-spacing: .14em; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 35%, transparent); }
.ca-value { min-width: 0; font: 500 clamp(.8125rem, 3.4vw, 1.375rem)/1.35 var(--font-mono); letter-spacing: .01em; overflow-wrap: anywhere; word-break: break-all; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ca-pending { font: 500 var(--fs-stat)/1.4 var(--font-display); color: var(--muted); }
.ca-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface-2); font-weight: 600; transition: border-color .2s var(--ease-quart), background-color .2s var(--ease-quart), box-shadow .2s var(--ease-quart); }
.ca-copy:hover:not(:disabled) { border-color: var(--aqua); box-shadow: var(--glow-aqua); }
.ca-copy:disabled { opacity: .45; border-style: dashed; }
.ca-copy .ico-done { display: none; }
.ca.is-copied .ico-copy { display: none; }
.ca.is-copied .ico-done { display: inline-flex; color: var(--up); }
.ca.is-copied .ca-copy { border-color: var(--up); }
@media (max-width: 479px) { .ca-copy-text { display: none; } .ca-copy { padding: 0; width: 44px; } }

/* ---------- ticker ---------- */
.ticker { position: relative; z-index: 1; height: 40px; overflow: hidden; border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent); background: color-mix(in oklab, var(--surface-1) 70%, transparent); }
.ticker-track { display: flex; align-items: center; width: max-content; height: 100%; animation: marquee var(--dur-marquee) linear infinite; }
.marquee-host:hover .marquee, .marquee-host:focus-within .marquee { animation-play-state: paused; }
.tick { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; white-space: nowrap; font-size: var(--fs-label); }
.tick .t-sym { font-weight: 700; color: var(--ink); }
.tick .t-px { color: var(--muted); font-variant-numeric: tabular-nums; }
.tick .av { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.skel-tick .skeleton { width: 150px; height: 14px; }
.chg { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chg.up { color: var(--up); background: var(--tint-up); }
.chg.down { color: var(--down); background: var(--tint-down); }
.chg.flat { color: var(--muted); background: var(--surface-2); }
.ticker-src { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 16px 0 40px; background: linear-gradient(90deg, transparent, var(--surface-1) 45%); font-size: var(--fs-micro); letter-spacing: .03em; color: var(--muted); pointer-events: none; }

/* ---------- hero ---------- */
.main { position: relative; z-index: 1; flex: 1; padding-top: 24px; padding-bottom: 40px; }
.hero { position: relative; isolation: isolate; }
.hero-layers { position: absolute; z-index: -1; inset: -24px calc(50% - 50vw) 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, var(--c-bg-deep) 62%, transparent); mask-image: linear-gradient(to bottom, var(--c-bg-deep) 62%, transparent); }
.layer { position: absolute; inset: -24px -24px -40px; will-change: transform; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); }
.l-banner { inset: 0; }
.l-banner::before, .l-banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: min(36vw, 520px); background-repeat: no-repeat; background-size: auto 100%; opacity: .55; }
.l-banner::before { left: 0; background-image: url("img/ribbon-left.webp"); background-position: left top; -webkit-mask-image: linear-gradient(to right, var(--c-bg-deep) 40%, transparent); mask-image: linear-gradient(to right, var(--c-bg-deep) 40%, transparent); }
.l-banner::after { right: 0; background-image: url("img/ribbon-right.webp"); background-position: right top; -webkit-mask-image: linear-gradient(to left, var(--c-bg-deep) 40%, transparent); mask-image: linear-gradient(to left, var(--c-bg-deep) 40%, transparent); }
.l-mesh { background: radial-gradient(60% 70% at 18% 20%, color-mix(in oklab, var(--c-blue) 26%, transparent), transparent 70%), radial-gradient(55% 65% at 84% 12%, color-mix(in oklab, var(--c-green) 20%, transparent), transparent 70%), radial-gradient(50% 55% at 50% 100%, color-mix(in oklab, var(--c-lime) 10%, transparent), transparent 70%); background-size: 140% 140%; animation: mesh-shift 22s ease-in-out infinite alternate; }
.l-lines { width: calc(100% + 48px); height: calc(100% + 64px); color: color-mix(in oklab, var(--c-aqua) 38%, transparent); inset: auto; top: -24px; left: -24px; }
.titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.h-page { font: 600 var(--fs-page)/1.15 var(--font-display); letter-spacing: -.03em; }
.sub { max-width: 42rem; margin-top: 4px; color: var(--muted); }
.vol-tile { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.tile-label { font-size: var(--fs-label); color: var(--muted); letter-spacing: .012em; }
.tile-value { font: 700 var(--fs-stat)/1.4 var(--font-display); letter-spacing: -.01em; border-radius: 6px; }
@media (max-width: 639px) { .vol-tile { text-align: left; } }
.hero-grid { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.337fr) minmax(0, 1fr); } }
.surface-feature { background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--c-lime) 9%, transparent), transparent 55%), radial-gradient(120% 140% at 100% 100%, color-mix(in oklab, var(--c-blue) 12%, transparent), transparent 55%), var(--surface-1); }
.feature { display: flex; flex-direction: column; justify-content: center; min-height: 260px; padding: 24px; border: 1px solid var(--border); border-radius: var(--r-module); overflow: hidden; }
.feature-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-ink); font-size: var(--fs-label); font-weight: 600; letter-spacing: .012em; }
.spark { width: 8px; height: 8px; border-radius: 2px; background: var(--grad-brand); transform: rotate(45deg); }
.feature-body { margin-top: 14px; }
.f-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.f-head .av { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
.f-name { font: 700 clamp(1.375rem, 4vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.f-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; color: var(--muted); font-weight: 500; }
.addr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; margin-block: -8px; border-radius: var(--r-control); color: var(--muted); font: 400 var(--fs-label)/1 var(--font-mono); transition: color .15s, background-color .15s; }
.addr-chip:hover { color: var(--ink); background: var(--surface-2); }
.f-stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 12px 32px; margin-top: 20px; }
.f-stat .tile-label { display: block; }
.f-stat .tile-value { display: inline-block; font-size: var(--fs-section); margin-top: 2px; }
.f-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.f-skel { display: grid; gap: 12px; }
.f-skel .s1 { width: 60%; height: 28px; } .f-skel .s2 { width: 40%; height: 16px; } .f-skel .s3 { width: 80%; height: 40px; } .f-skel .s4 { width: 140px; height: 44px; border-radius: var(--r-control); }
.panel { border: 1px solid var(--border); border-radius: var(--r-module); background: color-mix(in oklab, var(--surface-1) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 8px; }
.panel-title { display: flex; align-items: center; gap: 8px; font: 600 var(--fs-section)/1.35 var(--font-display); letter-spacing: -.012em; }
.panel-title svg { color: var(--aqua); }
.mini-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--muted); }
.movers-list { padding: 0 8px 8px; }
.m { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px; border-radius: var(--r-control); }
.m .av { width: 36px; height: 36px; border-radius: 10px; font-size: 14px; }
.m-nm { min-width: 0; flex: 1; }
.m-nm b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-nm span { display: block; font-size: var(--fs-label); color: var(--muted); }
.m-skel { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px; }
.m-skel .av { width: 36px; height: 36px; border-radius: 10px; }
.m-skel .l1 { flex: 1; height: 14px; } .m-skel .l2 { width: 64px; height: 14px; }

/* ---------- avatars (letter tile fallback) ---------- */
.av { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--surface-3); font: 700 16px/1 var(--font-display); color: var(--ink); text-transform: uppercase; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s var(--ease-quart); }
.av img.ok { opacity: 1; }
.av.tile-a { background: color-mix(in oklab, var(--c-blue) 40%, var(--surface-3)); }
.av.tile-b { background: color-mix(in oklab, var(--c-green) 36%, var(--surface-3)); }
.av.tile-c { background: color-mix(in oklab, var(--c-mint) 38%, var(--surface-3)); }
.av.tile-d { background: color-mix(in oklab, var(--c-lime) 30%, var(--surface-3)); }

/* ---------- spotlight + lift ---------- */
.spot { position: relative; }
.spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-quart); }
.spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--c-aqua) 12%, transparent), transparent 60%); }
.spot::after { padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--c-aqua) 70%, transparent), transparent 60%); -webkit-mask: linear-gradient(var(--c-bg-deep) 0 0) content-box, linear-gradient(var(--c-bg-deep) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--c-bg-deep) 0 0) content-box exclude, linear-gradient(var(--c-bg-deep) 0 0); }
.spot:hover::before, .spot:hover::after, .spot:focus-within::before, .spot:focus-within::after { opacity: 1; }
.lift { transition: transform var(--dur-hover) var(--ease-quint), box-shadow var(--dur-hover) var(--ease-quint), border-color .2s var(--ease-quart); }
.lift:hover, .lift:focus-within { border-color: color-mix(in oklab, var(--c-aqua) 55%, transparent); transform: translateY(-3px); box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--c-blue) 55%, transparent), 0 0 0 1px color-mix(in oklab, var(--c-lime) 18%, transparent); }

/* ---------- buttons ---------- */
.btn-brand { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r-control); background-image: var(--grad-brand); color: var(--on-brand); font-weight: 600; white-space: nowrap; box-shadow: 0 6px 22px -8px color-mix(in oklab, var(--c-lime) 55%, transparent), inset 0 1px color-mix(in oklab, var(--c-ink-glow) 35%, transparent); transition: box-shadow .22s var(--ease-quart), transform var(--dur-press) var(--ease-quart), filter .22s var(--ease-quart); }
.btn-brand::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, color-mix(in oklab, var(--c-ink-glow) 55%, transparent) 50%, transparent 70%); transform: translateX(-120%); }
.btn-brand:hover { filter: saturate(1.08) brightness(1.03); box-shadow: 0 10px 34px -8px color-mix(in oklab, var(--c-green) 70%, transparent), inset 0 1px color-mix(in oklab, var(--c-ink-glow) 40%, transparent); }
.btn-brand:hover::after { animation: sweep .7s var(--ease-quart); }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--r-control); font-weight: 600; transition: background-color .2s var(--ease-quart); }
.btn-ghost:hover { background: var(--surface-2); }

/* ---------- board ---------- */
.board { margin-top: 28px; }
.board-top { border-bottom: 1px solid var(--border); }
.tabs { display: flex; align-items: stretch; gap: 4px; margin-inline: -4px; padding-inline: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 44px; margin-bottom: -1px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; white-space: nowrap; transition: color .15s, border-color .2s var(--ease-quart); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.count { min-width: 22px; padding: 0 6px; border-radius: 9999px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-micro); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] .count { background: var(--tint-brand); color: var(--brand); }
.tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.search { position: relative; display: block; flex: 1; max-width: 360px; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { width: 100%; height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg); color: var(--ink); outline-offset: 0; }
.search input::placeholder { color: var(--subtle); }
.search input:focus-visible { border-color: var(--aqua); outline: 2px solid var(--focus); outline-offset: 1px; }
.view { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.vbtn { display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); transition: color .15s, background-color .15s; }
.vbtn:hover { color: var(--ink); }
.vbtn[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }
.vbtn + .vbtn { border-left: 1px solid var(--border); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.chips-label { margin-right: 4px; font-size: var(--fs-label); color: var(--muted); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-control); font-size: var(--fs-label); font-weight: 600; color: var(--ink); transition: border-color .2s var(--ease-quart), background-color .2s var(--ease-quart); }
.chip:hover { border-color: var(--border-strong); }
.chip[aria-pressed="true"] { border-color: color-mix(in oklab, var(--brand) 60%, transparent); background: var(--tint-brand); color: var(--brand-ink); }
.board-note { margin-top: 12px; font-size: var(--fs-label); color: var(--muted); }
.board-body { position: relative; margin-top: 12px; }

.head-row, .row { display: grid; align-items: center; gap: 12px; grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 44px; }
.head-row { padding: 0 16px 8px; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.head-row span:nth-child(n+3):nth-child(-n+7) { text-align: right; }
.rows { display: grid; gap: 8px; }
.row { position: relative; min-height: 64px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); }
.r-head, .r-price, .r-stats { display: contents; }
.row .av, .c-tok, .c-px, .c-chg, .c-vol, .c-liq, .c-cap, .cp { grid-row: 1; }
.row .av { grid-column: 1; }
.c-tok { grid-column: 2; min-width: 0; }
.c-px { grid-column: 3; } .c-chg { grid-column: 4; } .c-vol { grid-column: 5; } .c-liq { grid-column: 6; } .c-cap { grid-column: 7; }
.cp { grid-column: 8; }
.c-px, .c-chg, .c-vol, .c-liq, .c-cap { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; }
.c .lbl { display: none; font-size: var(--fs-micro); font-weight: 500; letter-spacing: .03em; color: var(--subtle); }
.nm { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy { display: inline; color: var(--muted); font-size: var(--fs-label); font-weight: 500; }
.ad { margin-left: 8px; color: var(--subtle); font: 400 var(--fs-micro)/1 var(--font-mono); }
.c-tok .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.cp { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-control); color: var(--muted); transition: color .15s, background-color .15s; }
.cp:hover { color: var(--ink); background: var(--surface-2); }
.cp.done { color: var(--up); }
.cp .ico-done { display: none; }
.cp.done .ico-copy { display: none; }
.cp.done .ico-done { display: inline-flex; }
.num-cell { display: inline-block; border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
.row.skel { min-height: 64px; pointer-events: none; }
.row.skel .av { width: 40px; height: 40px; }
.skel-lines { display: grid; gap: 6px; } .skel-lines .l1 { width: 55%; height: 14px; } .skel-lines .l2 { width: 30%; height: 10px; }
.row.skel .l3, .row.skel .l4, .row.skel .l5 { height: 14px; justify-self: end; } .row.skel .l3 { width: 70%; } .row.skel .l4 { width: 45%; } .row.skel .l5 { width: 60%; }
.rows.is-ready .skel { animation: fade-out .24s var(--ease-quart) forwards; }
.board-error { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-module); text-align: center; }
.board-error[hidden], .board-empty[hidden] { display: none; }
.board-error strong { font: 700 var(--fs-display)/1 var(--font-display); color: var(--subtle); }
.board-error span { color: var(--muted); }
.board-empty { padding: 32px 16px; text-align: center; color: var(--muted); }

@media (max-width: 1023px) {
  .head-row, .row { grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) 44px; }
  .c-liq, .c-cap, .head-row span:nth-child(6), .head-row span:nth-child(7) { display: none; }
  .cp { grid-column: 6; }
  .head-row span:nth-child(7) { display: none; }
}
@media (max-width: 767px) {
  .head-row { display: none; }
  .row { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); grid-template-areas: "av tok tok px" "av tok tok chg" "cp vol liq cap"; gap: 4px 12px; padding: 12px; }
  .row .av { grid-area: av; align-self: start; }
  .c-tok { grid-area: tok; }
  .c-px { grid-area: px; } .c-chg { grid-area: chg; }
  .c-vol { grid-area: vol; } .c-liq { grid-area: liq; display: block; } .c-cap { grid-area: cap; display: block; }
  .cp { grid-area: cp; }
  .c-vol, .c-liq, .c-cap { text-align: left; padding-top: 6px; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
  .c-vol .lbl, .c-liq .lbl, .c-cap .lbl { display: block; }
  .row.skel { display: flex; align-items: center; gap: 12px; }
  .row.skel .l4, .row.skel .l5 { display: none; } .row.skel .l3 { width: 56px; }
  .skel-lines { flex: 1; }
}
/* card layout */
.board-body[data-view="grid"] .head-row { display: none; }
.board-body[data-view="grid"] .rows { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .board-body[data-view="grid"] .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .board-body[data-view="grid"] .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .board-body[data-view="grid"] .rows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.board-body[data-view="grid"] .row { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; border-radius: var(--r-module); }
.board-body[data-view="grid"] .r-head { display: flex; align-items: center; gap: 12px; }
.board-body[data-view="grid"] .r-head .av { width: 48px; height: 48px; }
.board-body[data-view="grid"] .c-tok { flex: 1; }
.board-body[data-view="grid"] .r-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.board-body[data-view="grid"] .c-px { font: 700 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; text-align: left; }
.board-body[data-view="grid"] .r-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.board-body[data-view="grid"] .c-vol, .board-body[data-view="grid"] .c-liq, .board-body[data-view="grid"] .c-cap { display: block; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--r-control); background: color-mix(in oklab, var(--surface-2) 70%, transparent); font-size: var(--fs-body); }
.board-body[data-view="grid"] .c .lbl { display: block; }
.board-body[data-view="grid"] .c-chg .lbl { display: none; }
.board-body[data-view="grid"] .row.skel { display: flex; min-height: 150px; }

/* ---------- sections ---------- */
.sect { margin-top: 72px; }
.sect-head { max-width: 44rem; margin-bottom: 24px; }
.eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.h-title { margin-top: 6px; font: 600 var(--fs-title)/1.25 var(--font-display); letter-spacing: -.02em; }
@media (min-width: 768px) { .h-title { font-size: var(--fs-page); line-height: 1.15; letter-spacing: -.03em; } }
.lead { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.cards4, .steps, .road { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cards4, .steps, .road { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards4, .steps, .road { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card, .step, .stage { padding: 20px; border: 1px solid var(--border); border-radius: var(--r-module); background: color-mix(in oklab, var(--surface-1) 82%, transparent); }
.card h3, .step h3, .stage h3 { margin-top: 14px; font: 600 var(--fs-stat)/1.4 var(--font-display); letter-spacing: -.01em; }
.card p, .step p, .stage p { margin-top: 6px; color: var(--muted); }
.card-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--tint-brand); color: var(--brand); }
.step-n { display: block; font: 700 1.75rem/1 var(--font-display); letter-spacing: -.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stage-badge { display: inline-flex; padding: 2px 10px; border-radius: 9999px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.stage.is-now { border-color: color-mix(in oklab, var(--brand) 45%, transparent); box-shadow: var(--glow-brand); }
.stage.is-now .stage-badge { background: var(--tint-brand); color: var(--brand); }
.facts { padding: 8px 20px; }
.fact-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
@media (min-width: 1024px) { .fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-block: 10px; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.fact dt { color: var(--muted); }
.fact dd { min-width: 0; text-align: right; font-weight: 600; }
.fact dd code { font-size: var(--fs-label); font-weight: 400; }
.fact dd a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.faq { display: grid; gap: 10px; max-width: 56rem; }
.qa { border: 1px solid var(--border); border-radius: var(--r-panel); background: color-mix(in oklab, var(--surface-1) 82%, transparent); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.qa-plus::before, .qa-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--brand); transition: transform var(--dur-hover) var(--ease-quint); }
.qa-plus::after { transform: rotate(90deg); }
.qa[open] .qa-plus::after { transform: rotate(0deg); }
.qa-body { padding: 0 20px 18px; color: var(--muted); }

/* ---------- footer, tab bar, toast ---------- */
.foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 88px; padding-block: 20px; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); font-size: var(--fs-label); color: var(--muted); }
.foot-chain { display: inline-flex; align-items: center; gap: 8px; }
.foot-chain strong { color: var(--ink); font-weight: 600; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-control); color: var(--ink); transition: border-color .2s var(--ease-quart), background-color .2s var(--ease-quart); }
a.chip-link:hover { border-color: var(--border-strong); background: var(--surface-2); }
.chip-link.is-inert { border-style: dashed; color: var(--muted); }
.chip-link svg { width: 16px; height: 16px; }
.chip-sub { color: var(--muted); }
.foot-top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; color: var(--muted); }
.foot-top:hover { color: var(--ink); }
@media (min-width: 768px) { .foot { margin-bottom: 0; } }
.tabbar { position: fixed; inset: auto 0 0 0; z-index: var(--z-appbar); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--bg-deep) 92%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.tabbar ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabbar li a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; color: var(--muted); font-size: var(--fs-micro); font-weight: 500; transition: color .15s; }
.tabbar li a:hover { color: var(--ink); }
.tabbar .mid { display: flex; justify-content: center; }
.tabbar .mid a.btn-brand { width: 56px; height: 56px; min-height: 56px; margin-top: -20px; padding: 0; border-radius: 16px; color: var(--on-brand); box-shadow: var(--glow-brand); }
@media (min-width: 768px) { .tabbar { display: none; } }
.toast-host { position: fixed; inset: auto 0 96px 0; z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: 8px; padding-inline: 16px; pointer-events: none; }
@media (min-width: 768px) { .toast-host { bottom: 24px; } }
.toast { padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 9999px; background: var(--surface-3); box-shadow: var(--shadow-pop); font-weight: 600; animation: panel-in var(--dur-panel) var(--ease-quint) both; }

/* ---------- reduced motion: instant everything ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .layer { transform: none; }
  .press:active:not(:disabled), .lift:hover, .lift:focus-within { transform: none; }
  .spot::before, .spot::after { display: none; }
  .marquee-host { overflow-x: auto; }
  .ticker-track { transform: none; }
  .progress span { transition: none; }
}