/* Bento theme: neutral black glass cards, thin borders with an inner glow,
   neon green accents. Loaded after every other stylesheet. The home page is a
   two-column bento grid built from the existing home sections (no DOM moves,
   so every script keeps its elements). */
:root {
  --bt-bg: #0a0b0b;
  --bt-card: linear-gradient(160deg, #1f2121e6 0%, #141515f2 55%, #101111 100%);
  --bt-card-hover: linear-gradient(160deg, #262929 0%, #171919 60%, #111212 100%);
  --bt-border: #ffffff12;
  --bt-border-hi: #ffffff22;
  --bt-inner: inset 0 1px 0 #ffffff10, inset 0 0 0 1px #ffffff05;
  --bt-shadow: 0 18px 40px -26px #000;
  --bt-neon: #3ee58c;
  --bt-neon-soft: #3ee58c33;
  --bt-violet: #7a6cff;
  --bt-radius: 22px;
}

html, body { background: var(--bt-bg); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 15% 0%, #1d3a2b55, transparent 70%),
    radial-gradient(55% 40% at 100% 100%, #2a2152aa, transparent 70%),
    var(--bt-bg);
}

/* ---------------------------------------------------------------- cards */
.xstock-live .xs-collector,
.xstock-live .xs-team-card,
.xstock-live .asset-account,
.xstock-live .hud-pill,
.xstock-live .home-action-card,
.xstock-live .section-card,
.xstock-live .week-rail-card,
.xstock-live .task-card,
.xstock-live .progress-panel,
.xstock-live .withdraw-panel,
.xstock-live #withdraw-panel,
.xstock-live .profile-card,
.xstock-live .history-shortcuts button,
.xstock-live .invite-stats,
.xstock-live .network-card {
  background: var(--bt-card) !important;
  border: 1px solid var(--bt-border) !important;
  box-shadow: var(--bt-inner), var(--bt-shadow) !important;
  border-radius: var(--bt-radius) !important;
  transition: border-color .25s, box-shadow .25s, transform .2s, background .25s;
}
@media (hover: hover) {
  .xstock-live .asset-account:hover,
  .xstock-live .xs-team-card:hover,
  .xstock-live .hud-pill:hover,
  .xstock-live .home-action-card:hover,
  .xstock-live .section-card:hover,
  .xstock-live .bento-activate:hover {
    border-color: var(--bt-border-hi) !important;
    box-shadow: var(--bt-inner), 0 0 0 1px #3ee58c22, 0 0 28px -10px #3ee58c55, var(--bt-shadow) !important;
  }
}
.xstock-live .asset-account:active,
.xstock-live .xs-team-card:active,
.xstock-live .hud-pill:active,
.xstock-live .home-action-card:active { transform: scale(.98); }

/* Primary actions: neon green with a soft glow. */
.xstock-live .primary-button {
  background: linear-gradient(180deg, #46ef97, #27c06d) !important;
  border: 1px solid #8cf7bf !important;
  color: #062012 !important;
  box-shadow: 0 0 0 1px #0007, 0 8px 24px -10px #3ee58caa, inset 0 1px 0 #ffffff80 !important;
}

/* Bottom navigation: a floating glass bar. */
.xstock-live .bottom-nav {
  background: linear-gradient(180deg, #161818e8, #0d0e0ef5) !important;
  border-top: 1px solid var(--bt-border) !important;
  backdrop-filter: blur(14px);
}
.xstock-live .bottom-nav button.active, .xstock-live .bottom-nav [aria-current=page] { color: var(--bt-neon) !important; }

/* ---------------------------------------------------------------- home bento */
/* Airdrop explanation: one connected picture, then the user's own scenario. */
.ap-plan { color: #e5ede7; }
.ap-journey { position: relative; width: 100%; aspect-ratio: 360 / 126; margin-top: -4px; }
.ap-journey canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.ap-static { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; height: 100%; gap: 8px; direction: ltr; }
.ap-static>svg,.ap-static>img,.ap-static>span { display: block; width: 100%; max-width: 80px; height: 80px; margin: auto; stroke: none; }
.ap-static>img { width: 65%; height: auto; }
.ap-static>span { position: relative; }
.ap-static .xs-airdrop-static { width: 100%; height: 100%; stroke: none; }
.ap-journey[data-rive-ready=true] canvas { opacity: 1; }
.ap-journey[data-rive-ready=true] .ap-static { visibility: hidden; }
.ap-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); direction: ltr; gap: 6px; text-align: center; }
.ap-steps li { font-size: 13px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.ap-steps small { display: block; margin-top: 4px; color: #9aafa4; font-size: 10px; font-weight: 400; line-height: 1.4; }
.ap-replay-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 15px 0 12px; color: #b7cbbf; font-size: 11px; }
.ap-replay { border: 0; background: none; color: #9ee6bf; font: inherit; padding: 8px 0 8px 8px; cursor: pointer; }
.ap-replay[hidden] { display: none; }
.ap-replay span { display: inline-block; font-size: 18px; vertical-align: -1px; }
.ap-estimate { border: 1px solid #809f8e35; border-radius: 20px; padding: 17px; background: radial-gradient(ellipse at 90% 0,#35554450,transparent 70%),#15201b; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); column-gap: 10px; }
.ap-balance { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.ap-balance>img { width: 28px; height: 28px; }
.ap-balance span,.ap-value>span:first-child { color: #b8c9bf; display: block; font-size: 11px; line-height: 1.4; }
.ap-balance strong { display: block; margin-top: 5px; font-size: clamp(18px,5vw,24px); font-weight: 600; letter-spacing: -.03em; overflow-wrap: anywhere; }
.ap-balance strong small { font-size: 10px; font-weight: 400; letter-spacing: 0; }
.ap-value { align-self: center; text-align: end; }
.ap-value>strong { display: block; margin: 5px 0; font-size: clamp(27px,8vw,38px); font-weight: 600; line-height: 1.15; letter-spacing: -.045em; color: #b3f0c8; overflow-wrap: anywhere; }
.ap-formula { display: block; color: #93ac9e; font-size: 10px; overflow-wrap: anywhere; }
.ap-target { grid-column: 1/-1; margin: 15px 0 0; padding-top: 12px; border-top: 1px solid #9cb4a521; font-size: 12px; text-align: center; color: #d4e1d8; }
.ap-disclaimer { grid-column: 1/-1; font-size: 11px; line-height: 1.5; color: #a7b4ac; margin: 7px 0 0; text-align: center; }
.ap-snapshot { margin: 10px 2px 16px; color: #9eaaa2; font-size: 11px; line-height: 1.5; }
.ap-current { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; padding: 11px 0; border-block: 1px solid #8ca39425; }
.ap-current>span,.ap-current>small { font-size: 11px; color: #abb9b0; }
.ap-current>strong { font-size: 12px; font-weight: 500; color: #d7e4dc; }
.ap-current>small { grid-column: 1/-1; }
.ap-details { margin-top: 12px; }
.ap-details>summary { cursor: pointer; font-size: 12px; color: #b5c6ba; padding: 7px 0; }
.ap-details .xs-rules { font-size: 12px; line-height: 1.6; color: #aebbb2; }
.ap-replay:focus-visible,.ap-details>summary:focus-visible { outline: 2px solid #b4e2c9; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ap-journey[data-rive-ready=true] canvas { opacity: 0; }
  .ap-journey[data-rive-ready=true] .ap-static { visibility: visible; }
}
.xstock-live .page[data-page=home].active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-flow: row dense;
  gap: 10px;
  align-items: stretch;
}
.xstock-live .page[data-page=home] > * { margin: 0 !important; min-width: 0; }
.xstock-live .page[data-page=home] > .home-asset-dock,
.xstock-live .page[data-page=home] > .hud-strip,
.xstock-live .page[data-page=home] > .home-next-actions { display: contents !important; }

.xstock-live .xs-promo-row { grid-column: 1 / -1; order: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 8px; direction: ltr; }
.xstock-live .xs-promo-row .xs-home-tagline { flex: 1; min-width: 0; margin: 0; color: #e8f1e9; font-size: 15px; line-height: 1.35; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
.xstock-live .xs-token-info { display: flex; align-items: center; flex: 0 0 auto; gap: 3px; max-width: 49%; min-height: 56px; padding: 0 2px; color: #b4e2c9; font-size: 12px; line-height: 1.25; text-align: start; white-space: normal; border-radius: 12px; }
.xs-airdrop-art { position: relative; display: block; flex: 0 0 46px; width: 46px; height: 54px; pointer-events: none; }
.xs-airdrop-art canvas,.xs-token-info .xs-airdrop-static { position: absolute; inset: 0; width: 100%; height: 100%; }
.xs-token-info .xs-airdrop-static { stroke: none; }
.xs-airdrop-art canvas { opacity: 0; }
.xs-airdrop-art[data-rive-ready=true] canvas { opacity: 1; }
.xs-airdrop-art[data-rive-ready=true] .xs-airdrop-static { visibility: hidden; }
.xs-airdrop-label { min-width: 0; max-width: 72px; font-weight: 600; }
.xs-airdrop-chevron { font-size: 17px; opacity: .7; }
.xs-token-info:focus-visible { outline: 2px solid #b4e2c9; outline-offset: 2px; }
@media (max-width: 360px) {
  .xstock-live .xs-promo-row .xs-home-tagline { font-size: 13px; }
  .xs-airdrop-art { flex-basis: 40px; width: 40px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .xs-airdrop-art[data-rive-ready=true] canvas { opacity: 0; }
  .xs-airdrop-art[data-rive-ready=true] .xs-airdrop-static { visibility: visible; }
}
.xstock-live .asset-account-1a { order: 10 !important; }
.xstock-live .asset-account-spcxx { order: 11 !important; }
.xstock-live #xstock-collect { grid-column: 1 / -1; order: 20 !important; }
.xstock-live #home-team { order: 30 !important; }
.xstock-live .hud-streak { order: 31 !important; }
.xstock-live #home-spin-entry { order: 40 !important; }
.xstock-live .mission-preview { order: 41 !important; }
.xstock-live .bento-activate { grid-column: 1 / -1; order: 21 !important; }
.xstock-live .invite-action { order: 60 !important; }
.xstock-live .hud-level { order: 61 !important; }
.xstock-live .week-rail-card { grid-column: 1 / -1; order: 70 !important; }
.xstock-live #daily-quests { grid-column: 1 / -1; order: 80 !important; }

/* Balance tiles: the shared dock becomes two separate tiles. */
.xstock-live .home-asset-dock .asset-account {
  min-height: 132px !important; padding: 14px 14px 12px !important;
  display: flex !important; flex-direction: column; justify-content: space-between;
}
.xstock-live .home-asset-dock .asset-account + .asset-account { border-inline-start: 1px solid var(--bt-border) !important; }

/* Team, streak and level become square-ish tiles. */
.xstock-live #home-team { padding: 0 !important; }
.xstock-live #home-team .xs-team-open {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  width: 100%; height: 100%; min-height: 132px; padding: 14px; gap: 8px; text-align: start;
}
.xstock-live .hud-pill {
  display: flex !important; flex-direction: column; align-items: flex-start; justify-content: space-between;
  min-height: 132px; padding: 14px !important; gap: 8px; text-align: start;
}

/* Spin, today's task and invite tiles. */
.xstock-live .home-action-card { min-height: 132px; }
.xstock-live .mission-preview { padding: 14px !important; display: flex; flex-direction: column; gap: 8px; }
.xstock-live .mission-preview .mission-description { display: none; }

/* The wide glowing "Activate mining" tile. */
.bento-activate {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 0 20px; border-radius: 999px; border: 1px solid #ffffff1f;
  background: linear-gradient(180deg, #202323, #121414);
  box-shadow: inset 0 1px 0 #ffffff14, 0 14px 30px -20px #000;
  color: #f2fff8; font-size: 18px; font-weight: 700; letter-spacing: .01em; overflow: hidden;
}
.bento-activate::before {
  content: ""; position: absolute; inset: 6px; border-radius: inherit;
  background: linear-gradient(90deg, #2bd27a, #46ef97 50%, #2bd27a);
  box-shadow: 0 0 22px #3ee58c88, inset 0 1px 0 #ffffff99;
  z-index: 0;
}
.bento-activate > * { position: relative; z-index: 1; color: #062012; }
.bento-activate canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* Rive tile art sits in the tile's upper right corner. */
.bento-art { position: absolute; inset-inline-end: 8px; top: 8px; width: 64px; height: 64px; pointer-events: none; }
.bento-tile { position: relative; overflow: hidden; }

/* ---------------------------------------------------------------- tile insides */
.xstock-live .page[data-page=home] .tile-label,
.xstock-live #home-team .xs-team-title strong,
.xstock-live .hud-pill small,
.xstock-live .mission-preview h2,
.xstock-live .home-action-card strong { font-size: 15px !important; font-weight: 700 !important; color: #eef3f0 !important; letter-spacing: .01em; }

.xstock-live #home-team .xs-team-title { display: flex; align-items: center; gap: 8px; }
.xstock-live #home-team .xs-team-stats { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0 !important; }
.xstock-live #home-team .xs-team-stats > span { border: 0 !important; padding: 0 !important; }
.xstock-live #home-team .xs-team-stats > span:first-child b { font-size: 34px; line-height: 1; font-weight: 700; }
.xstock-live #home-team .xs-team-stats > span:first-child svg { width: 18px; height: 18px; opacity: .7; }
.xstock-live #home-team .xs-team-stats > span + span b { font-size: 13px; font-weight: 600; color: #9fb3a9; }
.xstock-live #home-team .xs-team-open > svg:last-child { position: absolute; inset-inline-end: 12px; bottom: 14px; opacity: .6; }

.xstock-live .hud-streak b { font-size: 40px !important; line-height: 1; font-weight: 800; }
.xstock-live .hud-streak small { font-size: 13px !important; font-weight: 600 !important; color: #9fb3a9 !important; order: 3; }
.xstock-live .hud-streak .hud-flame { width: 34px; height: 34px; display: grid; place-items: center; }
.xstock-live .hud-streak .hud-flame svg { width: 26px; height: 26px; }

.xstock-live .hud-level { justify-content: space-between !important; }
.xstock-live .hud-level .hud-xp { display: block; width: 100% !important; height: 8px !important; border-radius: 99px; background: #ffffff10; overflow: hidden; }
.xstock-live .hud-level .hud-xp i { display: block; height: 100% !important; border-radius: inherit; background: linear-gradient(90deg, #2bd27a, #b7f36b); }
.xstock-live .hud-level small { font-size: 13px !important; color: #9fb3a9 !important; font-weight: 600 !important; }

.xstock-live .mission-preview .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 !important; }
.xstock-live .mission-preview .section-heading .text-button { font-size: 12px !important; padding: 0 !important; white-space: nowrap; color: var(--bt-neon) !important; }
.xstock-live .mission-preview .mission-row { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important; text-align: start; }
.xstock-live .mission-preview .mission-icon { display: none; }
.xstock-live .mission-preview .mission-row strong { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xstock-live .mission-preview .mission-row small { font-size: 12px; line-height: 1.35; color: #9fb3a9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xstock-live .mission-preview .mission-row b { font-size: 15px; color: #c9f56b; display: flex; align-items: center; gap: 4px; }
.xstock-live .mission-preview .mission-row b img { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- remaining pages */
.xstock-live .chrome-panel,
.xstock-live .network-hero,
.xstock-live #invite-list > *,
.xstock-live .withdraw-totals,
.xstock-live .wallet-history-shortcut button {
  background: var(--bt-card) !important;
  border: 1px solid var(--bt-border) !important;
  box-shadow: var(--bt-inner), var(--bt-shadow) !important;
}
.xstock-live .profile-balance > * { background: linear-gradient(170deg, #161818, #0c0d0d) !important; border-color: var(--bt-border) !important; }
.xstock-live .task-art { background: #ffffff0a !important; border: 1px solid var(--bt-border) !important; color: #e8efe9 !important; }

/* Segmented controls (invite tabs, withdrawal steps): dark track, lit active segment. */
.xstock-live .net-tabs { background: #0f1010 !important; border: 1px solid var(--bt-border) !important; }
.xstock-live .net-tabs button[aria-selected=true], .xstock-live .net-tabs .active,
.xstock-live [data-wd-step][aria-selected=true] {
  background: linear-gradient(180deg, #232626, #171919) !important; border-color: #3ee58c55 !important;
  box-shadow: inset 0 1px 0 #ffffff14, 0 0 18px -8px #3ee58c88 !important; color: #f2fff8 !important;
}

/* Secondary actions: neon outline. */
.xstock-live .task-action, .xstock-live .share-button, .xstock-live #view-pending {
  background: #3ee58c14 !important; border: 1px solid #3ee58c88 !important; color: #8ff5bf !important;
  box-shadow: 0 0 16px -8px #3ee58c99 !important;
}

/* The Agent's Collect is the main action on home: solid neon. */
.xstock-live #collect-energy:not(:disabled) {
  background: linear-gradient(180deg, #46ef97, #27c06d) !important; border: 1px solid #8cf7bf !important; color: #062012 !important;
  box-shadow: 0 8px 24px -10px #3ee58caa, inset 0 1px 0 #ffffff80 !important;
}
.xstock-live #collect-energy:not(:disabled) svg { color: #062012 !important; stroke: currentColor; }

/* Home: the big Activate tile replaces the small header chip. */
.xstock-live #xstock-collect [data-xs-upgrade] { display: none !important; }

/* Team and level tile fixes. */
.xstock-live #home-team .xs-team-stats { margin: 0 !important; align-self: flex-start; }
.xstock-live .hud-level .hud-xp { flex: 0 0 8px !important; min-height: 0 !important; }

/* ---------------------------------------------------------------- Rive tile art */
.xstock-live .hud-streak .hud-flame { position: relative; width: 46px !important; height: 46px !important; }
.xstock-live .hud-streak .hud-flame canvas.bento-flame { position: absolute; inset: 0; width: 100%; height: 100%; }
.xstock-live .hud-streak .hud-flame.has-bento-art svg { visibility: hidden; }
.xstock-live #home-team .xs-team-open { position: relative; }
.xstock-live canvas.bento-team { position: absolute; bottom: auto; top: 46px; inset-inline-end: 8px; width: 78px; height: 52px; pointer-events: none; }
.xstock-live .mission-preview { position: relative; }
.xstock-live canvas.bento-scan { position: absolute; top: auto; bottom: 10px; inset-inline-end: 10px; width: 50px; height: 50px; pointer-events: none; opacity: .95; }
.xstock-live .bento-activate canvas.bento-sparkle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; border-radius: inherit; }

/* The whole task row already opens the task board; the small link only crowded the tile. */
.xstock-live .mission-preview .section-heading .text-button { display: none !important; }

/* Daily mining, at the top of the Agent tile beside the Agent's name: a compact neon pill. */
.xstock-live .xs-collector-head { flex-wrap: nowrap; gap: 8px; }
/* On narrow phones the grade badge gives way first; daily mining and help stay whole. */
.xstock-live .xs-collector-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.xstock-live .xs-collector-head .xs-level { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xstock-live .xs-collector-head > .xs-daily-rate, .xstock-live .xs-collector-head > .xs-collector-tools { flex: none; }
@media (max-width: 360px) {
  .xstock-live .xs-daily-rate { padding: 4px 8px 5px; }
  .xstock-live .xs-daily-rate strong { font-size: 14px; }
  .xstock-live .xs-daily-label { font-size: 10px; }
}
.xstock-live .xs-daily-rate {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-inline-start: auto;
  padding: 5px 11px 6px; border-radius: 13px; line-height: 1.15;
  background: linear-gradient(180deg, #3ee58c16, #3ee58c08); border: 1px solid #3ee58c44;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 0 18px -10px #3ee58c88;
}
.xstock-live .xs-daily-label { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #b9d9c8; letter-spacing: .02em; white-space: nowrap; }
.xstock-live .xs-daily-label .xp-icon, .xstock-live .xs-daily-label svg { width: 12px; height: 12px; color: var(--bt-neon); }
.xstock-live .xs-daily-rate strong { font-size: 16px; font-weight: 800; color: #eafff3; white-space: nowrap; }
.xstock-live .xs-daily-rate strong b { color: var(--bt-neon); text-shadow: 0 0 12px #3ee58c55; }
.xstock-live .xs-daily-rate strong small { font-size: 11px; font-weight: 600; color: #9fb3a9; }
.xstock-live .xs-collector-head > .xs-collector-tools { margin-inline-start: 0; }

/* ---------------------------------------------------------------- roadmap */
.xstock-live .bento-roadmap { order: 55 !important; grid-column: 1 / -1; }
.bento-roadmap {
  display: grid; gap: 6px; padding: 14px 16px 12px; text-align: start; color: #eef3f0;
  background: var(--bt-card); border: 1px solid var(--bt-border); border-radius: var(--bt-radius);
  box-shadow: var(--bt-inner), var(--bt-shadow); transition: border-color .25s, box-shadow .25s, transform .2s;
}
.bento-roadmap:active { transform: scale(.985); }
@media (hover: hover) { .bento-roadmap:hover { border-color: var(--bt-border-hi); box-shadow: var(--bt-inner), 0 0 0 1px #3ee58c22, 0 0 28px -10px #3ee58c55, var(--bt-shadow); } }
.roadmap-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roadmap-tile-head strong { font-size: 15px; font-weight: 700; }
.roadmap-tile-head em, .roadmap-chip {
  font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  color: #8ff5bf; background: #3ee58c14; border: 1px solid #3ee58c66;
}
.roadmap-tile-phase { font-size: 18px; font-weight: 800; line-height: 1.2; }
.roadmap-tile-phase small { display: block; font-size: 12px; font-weight: 600; color: #9fb3a9; margin-bottom: 2px; }
.roadmap-mini { position: relative; display: block; width: 100%; aspect-ratio: 330 / 44; margin-top: 2px; }
.roadmap-mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* CSS fallback track (reduced motion, or while the animation loads). */
.roadmap-css-track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 5.5%; }
.roadmap-css-track::before { content: ""; position: absolute; left: 7.5%; right: 7.5%; top: 50%; border-top: 2px dashed #ffffff26; }
.roadmap-css-track i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #111414; border: 1.5px dashed #ffffff44; }
.roadmap-css-track i.is-done { background: var(--bt-neon); border: 0; box-shadow: 0 0 10px #3ee58c88; }
.roadmap-css-track i.is-current { background: #fff; border: 3px solid var(--bt-neon); box-shadow: 0 0 12px #3ee58caa; }
.roadmap-mini.has-rive .roadmap-css-track { visibility: hidden; }

.roadmap-dialog {
  width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: 0;
  border: 0; background: radial-gradient(70% 40% at 20% 0%, #1d3a2b66, transparent 70%), radial-gradient(60% 40% at 100% 100%, #2a215288, transparent 70%), #0a0b0b;
  color: #eef3f0; overflow-y: auto;
}
.roadmap-dialog::backdrop { background: #000c; }
.roadmap-dialog header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; background: linear-gradient(#0a0b0bf2, #0a0b0b00); }
.roadmap-dialog header h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.roadmap-dialog header button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bt-border); background: #ffffff0a; color: #eef3f0; font-size: 24px; line-height: 1; }
.roadmap-list { position: relative; list-style: none; margin: 8px 16px 32px; padding: 0 0 0 96px; }
.roadmap-list > canvas { position: absolute; left: 0; top: 0; width: 96px; height: 600px; pointer-events: none; }
.roadmap-row {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 120px; padding: 0 8px; cursor: pointer;
  border-radius: 18px; outline: none; transition: background .25s, box-shadow .25s;
}
.roadmap-row small { font-size: 12px; font-weight: 700; color: #9fb3a9; letter-spacing: .03em; }
.roadmap-row strong { font-size: 20px; font-weight: 800; line-height: 1.2; }
.roadmap-row .roadmap-chip { align-self: flex-start; }
.roadmap-row.is-planned strong { color: #c8d3cd; }
.roadmap-row.is-planned .roadmap-chip { color: #b9c4be; background: #ffffff0a; border-color: #ffffff26; }
.roadmap-row.is-done .roadmap-chip { color: #062012; background: var(--bt-neon); border-color: var(--bt-neon); }
.roadmap-row.is-focus, .roadmap-row:focus-visible { background: #3ee58c0d; box-shadow: inset 0 0 0 1px #3ee58c44; }
/* CSS fallback track for the full view. */
.roadmap-list::before { content: ""; position: absolute; left: 47px; top: 60px; bottom: 60px; border-left: 2px dashed #ffffff26; }
.roadmap-row::before { content: ""; position: absolute; left: -63px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #111414; border: 1.5px dashed #ffffff44; }
.roadmap-row.is-done::before { background: var(--bt-neon); border: 0; box-shadow: 0 0 14px #3ee58c88; }
.roadmap-row.is-current::before { background: #fff; border: 5px solid var(--bt-neon); box-shadow: 0 0 16px #3ee58caa; }
.roadmap-list.has-rive::before, .roadmap-list.has-rive .roadmap-row::before { display: none; }
[dir=rtl] .roadmap-list { padding: 0 96px 0 0; }
[dir=rtl] .roadmap-list > canvas { left: auto; right: 0; }
[dir=rtl] .roadmap-list::before { left: auto; right: 47px; }
[dir=rtl] .roadmap-row::before { left: auto; right: -63px; }

/* ---------------------------------------------------------------- roadmap: cosmos */
/* CSS space for the fallback; the Rive cosmos covers it once loaded. */
.roadmap-dialog, .bento-roadmap {
  --space: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 12%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 38% 62%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 84%, #fff1d6 50%, transparent 51%), radial-gradient(1px 1px at 58% 36%, #fff 50%, transparent 51%),
    radial-gradient(60% 45% at 18% 12%, #533bd655, transparent 70%), radial-gradient(55% 40% at 88% 55%, #26a07b33, transparent 70%),
    radial-gradient(70% 50% at 30% 95%, #3a1e8c55, transparent 70%), linear-gradient(180deg, #0a0f2e, #110a28 55%, #04060e);
}
.roadmap-dialog { background: var(--space); background-attachment: fixed; }
.roadmap-dialog canvas.roadmap-cosmos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.roadmap-dialog > header, .roadmap-dialog > .roadmap-list, .roadmap-dialog > .roadmap-hint { position: relative; z-index: 1; }
.roadmap-dialog > header { position: sticky; background: linear-gradient(#0a0f2ee6, #0a0f2e00); }
.roadmap-hint { margin: -12px 20px 28px; text-align: center; font-size: 12px; color: #aab6e8; opacity: .8; }

.xstock-live .bento-roadmap, .bento-roadmap { position: relative; overflow: hidden; background: var(--space) !important; border-color: #8c7bff33 !important; }
.bento-roadmap canvas.roadmap-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bento-roadmap > span { position: relative; z-index: 1; }
@media (hover: hover) { .bento-roadmap:hover { border-color: #8c7bff66 !important; box-shadow: var(--bt-inner), 0 0 30px -10px #8c7bff77, var(--bt-shadow) !important; } }

/* Phase emblems on the right of each row. */
.roadmap-row { padding-inline-end: 76px; }
.roadmap-emblem { position: absolute; inset-inline-end: 6px; top: 50%; width: 64px; height: 64px; margin-top: -32px; pointer-events: none; }
.roadmap-emblem canvas { width: 100%; height: 100%; }
.roadmap-row.is-focus, .roadmap-row:focus-visible { background: #8c7bff14; box-shadow: inset 0 0 0 1px #8c7bff55, 0 0 24px -12px #8c7bff; }

/* Phase rewards: each phase's chest sits on the track between its node and the next one,
   so both nodes (green check, current pulse, dashed ring) stay fully visible. The node
   centre is at (-48px, 50%) of the row and nodes are 120px apart; the chest centre is
   52px below its node (above halfway, so its tag clears the next node's widest pulse).
   The last phase's chest hangs the same distance below the last node, joined by a short
   dashed line. The button is the 44px tap target; the Rive chest (RoadmapChest, middle
   at 48,58 of its 96x96 artboard) is drawn larger so the lid and coins can fly out. */
.roadmap-reward {
  position: absolute; inset-inline-start: -70px; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: 30px; padding: 0;
  display: block; border: 0; border-radius: 50%; background: none; color: #eef3f0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.roadmap-reward:active .roadmap-chest { transform: scale(.94); }
.roadmap-reward:focus-visible { outline: 2px solid #ffd36a; outline-offset: 1px; }
.roadmap-chest { position: absolute; inset: 0; border-radius: 50%; transition: transform .15s; }
/* Static chest (reduced motion, or until the Rive chest loads). */
.roadmap-chest-svg { position: absolute; left: 5px; top: 7px; width: 34px; height: 30px; overflow: visible; }
.roadmap-reward[data-state=claimable] .roadmap-chest-svg { filter: drop-shadow(0 0 5px #ffd36acc); }
.roadmap-chest canvas { position: absolute; left: -15px; top: -23px; width: 75px; height: 75px; pointer-events: none; }
.roadmap-chest.has-art .roadmap-chest-svg { visibility: hidden; }
/* The tag hangs centred under the chest, tucked up to its base. */
.roadmap-reward-tag {
  position: absolute; inset-inline-start: 50%; top: calc(100% - 4px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 99px; white-space: nowrap; font-size: 11px; font-weight: 800; line-height: 16px;
  color: #c8d3cd; background: #0b0e24e6; border: 1px solid #ffffff26;
}
.roadmap-reward-tag .token-icon { width: 13px; height: 13px; }
/* The track ends at the last node: a short dashed line leads on to its chest, and the list
   leaves room below for that chest and its tag. */
.roadmap-row:last-child .roadmap-reward::before { content: ""; position: absolute; inset-inline-start: 21px; bottom: 100%; height: 15px; margin-bottom: -4px; border-inline-start: 2px dashed #ffffff33; }
.roadmap-dialog .roadmap-list { margin-bottom: 76px; }
[dir=rtl] .roadmap-reward-tag { transform: translateX(50%); }
.roadmap-reward[data-state=claimable] .roadmap-reward-tag { color: #1d1300; background: linear-gradient(#ffe592, #ffb84d); border-color: #ffd36a; box-shadow: 0 0 12px -2px #ffd36acc; animation: roadmap-reward-glow 1.8s ease-in-out infinite; }
.roadmap-reward[data-state=claimed] .roadmap-reward-tag { color: #8ff5bf; border-color: #3ee58c55; }
.roadmap-reward.is-claiming { pointer-events: none; }
.roadmap-reward.is-claiming .roadmap-reward-tag { opacity: .6; }
.roadmap-reward.is-nudge .roadmap-chest { animation: roadmap-reward-nudge .32s ease-out; }
@keyframes roadmap-reward-glow { 50% { box-shadow: 0 0 18px 0 #ffd36a; } }
@keyframes roadmap-reward-nudge { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.roadmap-chest-svg .c-shadow { fill: #0006; }
.roadmap-chest-svg .c-box, .roadmap-chest-svg .c-dome { fill: #a8662e; stroke: #0005; stroke-width: 1.2; }
.roadmap-chest-svg .c-strap, .roadmap-chest-svg .c-clasp { fill: #8a929e; }
.roadmap-reward[data-tier="1"] .c-box, .roadmap-reward[data-tier="1"] .c-dome { fill: #6f60e8; }
.roadmap-reward[data-tier="1"] .c-strap, .roadmap-reward[data-tier="1"] .c-clasp { fill: #ffd36a; }
.roadmap-reward[data-tier="2"] .c-box, .roadmap-reward[data-tier="2"] .c-dome { fill: #f2c14e; }
.roadmap-reward[data-tier="2"] .c-strap, .roadmap-reward[data-tier="2"] .c-clasp { fill: #0f7c58; }
.roadmap-reward[data-state=locked] .roadmap-chest-svg { opacity: .45; filter: grayscale(.5); }
.roadmap-chest-svg .c-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.roadmap-reward[data-state=claimed] .c-lid { transform: translateY(-3px) rotate(-28deg); }
.roadmap-reward[data-state=claimable] .roadmap-chest-svg { animation: roadmap-chest-bob 1.6s ease-in-out infinite; }
.roadmap-reward.is-opening .roadmap-chest-svg { animation: roadmap-chest-pop .5s ease-out; }
@keyframes roadmap-chest-bob { 50% { transform: translateY(-2px); } }
@keyframes roadmap-chest-pop { 30% { transform: scale(1.18, .86); } 60% { transform: scale(.94, 1.1); } }
@media (prefers-reduced-motion: reduce) {
  .roadmap-reward-tag, .roadmap-chest, .roadmap-reward .roadmap-chest-svg, .roadmap-chest-svg .c-lid { animation: none !important; transition: none; }
}
/* Home tile: a reward waiting on the roadmap. */
.roadmap-tile-head em.roadmap-tile-reward { color: #1d1300; background: linear-gradient(#ffe592, #ffb84d); border-color: #ffd36a; box-shadow: 0 0 14px -2px #ffd36a99; }
.bento-roadmap.has-reward { border-color: #ffd36a66 !important; }

/* ---------------------------------------------------------------- invites: galaxy */
.invite-galaxy { position: relative; margin: 14px 0 10px; border: 1px solid #ffffff1a; border-radius: 22px; overflow: hidden;
  background: radial-gradient(70% 62% at 50% 50%, #2a2350, #15132a 70%, #0e0d1c); }
.galaxy-stage { position: relative; width: 100%; aspect-ratio: 360 / 280; }
.galaxy-rive { position: absolute; inset: 0; }
.galaxy-rive canvas { display: block; width: 100%; height: 100%; }
/* The avatar is a badge pinned on the home planet (centre 180,140, radius 42). */
.galaxy-avatar { position: absolute; z-index: 2; left: 59%; top: 62.5%; width: 10%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center;
  overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #ff6fae; color: #fff; font-weight: 800; font-size: clamp(10px, 3vw, 14px); box-shadow: 0 3px 0 #0005; }
.galaxy-avatar img { width: 100%; height: 100%; object-fit: cover; }
.galaxy-home { display: none; }
.galaxy-slots { position: absolute; inset: 0; z-index: 3; }
.galaxy-slot { position: absolute; width: 13%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.galaxy-slot:focus-visible { outline: 2px solid #ffd84d; outline-offset: 2px; }
.galaxy-more { position: absolute; z-index: 3; inset-inline-end: 12px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: #ffffff1f; color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.galaxy-bubble { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dot name status" "dot date status"; align-items: center; column-gap: 10px;
  margin: 0 12px 12px; padding: 9px 12px; border-radius: 14px; background: #ffffff12; animation: galaxy-bubble .2s cubic-bezier(.2, 1.6, .4, 1); }
.galaxy-bubble[hidden], .galaxy-more[hidden], .galaxy-slot[hidden] { display: none; }
.galaxy-bubble i { grid-area: dot; width: 12px; height: 12px; border-radius: 50%; background: #8a99a1; }
.galaxy-bubble i.is-qualified { background: #3ee58c; } .galaxy-bubble i.is-blocked { background: #ff4d5e; }
.galaxy-bubble strong { grid-area: name; overflow: hidden; color: #fff; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.galaxy-bubble span { grid-area: status; font-size: 12px; font-weight: 700; text-align: end; }
.galaxy-bubble span.is-qualified { color: #8ff5bf; } .galaxy-bubble span.is-blocked { color: #ff9da5; } .galaxy-bubble span.is-verifying { color: #c9cfd9; }
.galaxy-bubble small { grid-area: date; color: #a7a3c4; font-size: 11px; }
@keyframes galaxy-bubble { from { opacity: 0; transform: translateY(6px) scale(.96); } }
/* Without Rive (reduced motion or a failed load): flat CSS planets on CSS orbits. */
.invite-galaxy:not(.has-rive) .galaxy-stage::before, .invite-galaxy:not(.has-rive) .galaxy-stage::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid #ffffff1c; border-radius: 50%; transform: translate(-50%, -50%); }
.invite-galaxy:not(.has-rive) .galaxy-stage::before { width: 62.2%; height: 50%; }
.invite-galaxy:not(.has-rive) .galaxy-stage::after { width: 84.4%; height: 74.3%; }
.invite-galaxy:not(.has-rive) .galaxy-home { display: block; position: absolute; left: 50%; top: 50%; width: 23.3%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 70% 70%, #1b0f5c66 30%, transparent 31%), radial-gradient(40% 25% at 35% 40%, #00e5ff 60%, transparent 62%), #4a6cf0; box-shadow: 0 0 0 5px #2b3f9c55, 0 0 30px #4a3cf077; }
.invite-galaxy:not(.has-rive) .galaxy-slot::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--planet); box-shadow: inset -5px -5px 0 #140a3c40; transition: transform .2s; }
.galaxy-slot.k0 { --planet: #4a6cf0; } .galaxy-slot.k1 { --planet: #f2a65a; } .galaxy-slot.k2 { --planet: #a77bff; }
.galaxy-slot.k3 { --planet: #c9ced9; } .galaxy-slot.k4 { --planet: #ff6fae; } .galaxy-slot.k5 { --planet: #ff7a3c; }
.invite-galaxy:not(.has-rive) .galaxy-slot.is-s1::after { filter: grayscale(1) brightness(.75); }
.invite-galaxy:not(.has-rive) .galaxy-slot.is-s3::after { background: #b23a3a; }
.invite-galaxy:not(.has-rive) .galaxy-slot.is-s4::after { content: "+"; display: grid; place-items: center; background: #3ee58c3d; border: 2px dashed #3ee58c; color: #fff; font-weight: 800; font-size: 18px; box-shadow: none; }
.invite-galaxy:not(.has-rive) .galaxy-slot.is-focus::after { transform: scale(1.3); box-shadow: 0 0 0 3px #fff; }
/* The three numbers sit in one row under the galaxy. */
.xstock-live [data-page=network] .network-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 8px !important; }
.xstock-live [data-page=network] .network-stat, .xstock-live [data-page=network] .network-stat.wide { grid-column: auto; padding: 0 6px; border: 0; text-align: center; }
.xstock-live [data-page=network] .network-stat + .network-stat { border-inline-start: 1px solid #ffffff14; }
.xstock-live [data-page=network] .network-stat strong { font-size: 24px; }
.xstock-live [data-page=network] .network-stat span { margin-top: 4px; font-size: 11.5px; line-height: 1.3; }
.invite-row.is-focus { box-shadow: 0 0 0 1px #3ee58c, 0 0 22px -6px #3ee58c !important; transition: box-shadow .2s; }
@media (prefers-reduced-motion: reduce) { .galaxy-bubble { animation: none; } }
/* Each planet says who it is: avatar badge on it, name under it. */
.galaxy-slot { overflow: visible; }
.galaxy-face { position: absolute; left: 4%; top: 4%; width: 46%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 2px solid #fff; border-radius: 50%;
  background: #23302b; color: #fff; font-size: 9px; font-weight: 800; box-shadow: 0 2px 6px #000a; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.galaxy-face[hidden] { display: none; }
.galaxy-face img { width: 100%; height: 100%; object-fit: cover; }
.galaxy-tag { position: absolute; left: 50%; top: calc(100% - 2px); max-width: 76px; padding: 1px 7px; overflow: hidden; border-radius: 999px; background: #0b1210d9; color: #eef3f0;
  font-size: 10px; font-weight: 700; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.galaxy-tag:empty { display: none; }
.galaxy-slot.is-s1 .galaxy-face { filter: grayscale(1); opacity: .8; }
.galaxy-slot.is-s3 .galaxy-face { filter: grayscale(.6); border-color: #ff4d5e; }
.galaxy-slot.is-s4 .galaxy-tag { background: #3ee58c; color: #06130d; }
.galaxy-slot.is-focus .galaxy-face { transform: scale(1.25) translate(-6%, -6%); }
.galaxy-slot.is-focus .galaxy-tag { background: #fff; color: #06130d; }

/* ---------------------------------------------------------------- invites: milestone route */
.milestone-track:not(.is-routed) .milestone-route, .milestone-track:not(.is-routed) .milestone-nodes { display: contents; }
.milestone-track:not(.is-routed) .milestone-rive { display: none; }
.milestone-track.is-routed { display: block; margin-top: 14px; }
.milestone-route { position: relative; width: 100%; aspect-ratio: 360 / 170; overflow: hidden; border: 1px solid #ffffff14; border-radius: 18px;
  background: radial-gradient(60% 50% at 18% 20%, #3ee58c22, transparent 70%), radial-gradient(55% 50% at 86% 90%, #7b5cff22, transparent 70%), radial-gradient(70% 80% at 50% 50%, #10201a, #0a110f 65%, #050807); }
.milestone-rive, .milestone-nodes { position: absolute; inset: 0; }
.milestone-rive canvas { display: block; width: 100%; height: 100%; }
.is-routed .milestone-node { position: absolute; display: block; width: 15%; aspect-ratio: 1; padding: 0; transform: translate(-50%, -50%); cursor: default; -webkit-tap-highlight-color: transparent; }
.is-routed .milestone-node[data-state="claimable"], .is-routed .milestone-node[data-state="locked"] { cursor: pointer; }
.is-routed .milestone-node:focus-visible { outline: 2px solid #ffc94d; outline-offset: 2px; border-radius: 50%; }
.is-routed .milestone-logo { position: absolute; inset: 8%; width: auto; height: auto; }
.is-routed .milestone-logo img { width: 72%; height: 72%; }
.is-routed.has-rive .milestone-logo { visibility: hidden; }
.is-routed .milestone-label { position: absolute; left: 50%; display: flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: #0b1210cc;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.is-routed .milestone-node.is-low .milestone-label { top: 104%; }
.is-routed .milestone-node.is-high .milestone-label { bottom: 104%; }
.is-routed .milestone-label strong { color: #eef3f0; font-size: 11px; font-weight: 800; }
.is-routed .milestone-label small { display: inline-flex; align-items: center; gap: 2px; color: #a8b8b0; font-size: 10.5px; }
.is-routed .milestone-label small .token-icon, .is-routed .milestone-label small img { width: 11px; height: 11px; }
.is-routed .milestone-node[data-state="claimable"] .milestone-label strong { color: #ffc94d; }
.is-routed .milestone-node[data-state="claimed"] .milestone-label strong { color: #8ff5bf; }
.is-routed .milestone-claim { position: absolute; left: 50%; top: 80%; padding: 1px 8px; border-radius: 999px; background: #ffc94d; color: #2a1a00; font-size: 10.5px; font-style: normal;
  font-weight: 800; transform: translateX(-50%); box-shadow: 0 2px 0 #b07800, 0 0 12px #ffc94d44; pointer-events: none; }
.is-routed .milestone-node.is-low[data-state="claimable"] .milestone-label { top: 122%; }
@keyframes milestone-claim { to { transform: translateX(-50%) translateY(-2px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .is-routed .milestone-claim { animation: none; } }
.is-routed .milestone-claim { white-space: nowrap; }
.is-routed .milestone-node[data-index="0"] .milestone-label { transform: translateX(-35%); }
.is-routed .milestone-node[data-index="5"] .milestone-label { transform: translateX(-72%); }
[dir=rtl] .is-routed .milestone-node[data-index="0"] .milestone-label { transform: translateX(-35%); }
.milestone-node.claiming { cursor: progress !important; }
.milestone-track.is-routed .milestone-node:active { transform: translate(-50%, -50%); }
.milestone-track.is-routed .milestone-node { min-width:44px; min-height:44px; }
.is-routed .milestone-node.claiming .milestone-claim { background: #d7e9e0; color: #14271e; box-shadow: 0 2px 0 #728c7f; }
.milestone-node[aria-disabled="true"][data-state="claimable"]:not(.claiming) { opacity: .65; cursor: wait; }
.milestone-track:not(.has-rive) .milestone-node.claiming .milestone-logo::before { content: ""; position: absolute; inset: -5px; border: 2px solid transparent; border-top-color: #e2f3eb; border-radius: 50%; animation: milestone-pending .85s linear infinite; }
@keyframes milestone-pending { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .milestone-track .milestone-node.claiming .milestone-logo::before { animation: none; border-style: dotted; border-color: #e2f3eb; } }

/* ---------------------------------------------------------------- invites: commission rings */
.xstock-live .commission-hub { padding: 16px !important; }
.commission-head small { display: block; color: #a8b8b0; font-size: 12.5px; }
.commission-hub .xs-commission-total { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 10px; }
.commission-hub .xs-commission-total strong { color: #fff; font-size: 34px; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.commission-hub .xs-commission-total small { color: #8ff5bf; font-size: 13px; font-weight: 700; }
.commission-stage { position: relative; width: 100%; aspect-ratio: 360 / 300; overflow: hidden; border: 1px solid #ffffff14; border-radius: 18px;
  background: radial-gradient(60% 50% at 18% 16%, #3ee58c22, transparent 70%), radial-gradient(55% 50% at 86% 90%, #7b5cff22, transparent 70%), radial-gradient(70% 80% at 50% 50%, #10201a, #0a110f 65%, #050807); }
.commission-net { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* The 1A core sits on the network centre (180,150 of 360x300); it never takes the taps. */
.commission-core { position: absolute; left: 50%; top: 50%; width: 33.4%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.commission-core canvas { display: block; width: 100%; height: 100%; }
.commission-hub:not(.has-rive) .commission-core::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: url(/assets/oneagent-token-logo.png) center / 106% no-repeat, #0b1210;
  box-shadow: 0 0 0 2px #3ee58ccc, 0 0 24px #3ee58c66; }
.commission-hidden { position: absolute; inset-inline-end: 10px; bottom: 10px; padding: 2px 9px; border-radius: 999px; background: #ffffff1a; color: #fff; font-size: 11.5px; font-weight: 700; }
.commission-hidden[hidden] { display: none; }
.commission-levels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 10px 0 6px; }
.commission-level { display: grid; justify-items: center; gap: 1px; padding: 6px 0 5px; border: 1px solid #ffffff14; border-radius: 12px; background: #ffffff08; color: #c9d4ce; cursor: pointer; }
.commission-level b { color: var(--level); font-size: 12px; font-weight: 800; }
.commission-level span { color: #8da096; font-size: 10.5px; }
.commission-level.is-earning { border-color: color-mix(in srgb, var(--level) 45%, transparent); background: color-mix(in srgb, var(--level) 12%, transparent); }
.commission-level.is-focus { border-color: var(--level); box-shadow: 0 0 0 1px var(--level), 0 0 14px -4px var(--level); }
.commission-detail { min-height: 18px; margin: 4px 2px 12px; color: #c9d4ce; font-size: 12.5px; text-align: center; }
.commission-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; padding: 12px 6px; border: 1px solid #ffffff14; border-radius: 16px; background: #ffffff06; text-align: center; }
.commission-stats div + div { border-inline-start: 1px solid #ffffff14; }
.commission-stats b { display: block; color: #fff; font-size: 18px; font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.commission-stats span { display: block; margin-top: 3px; color: #8da096; font-size: 11px; line-height: 1.3; }
.commission-rule { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: #3ee58c10; color: #b9cfc4; font-size: 12px; line-height: 1.5; }
.commission-body h3 { margin: 6px 0 4px; font-size: 14px; }
.commission-body h4 { margin: 12px 0 6px; color: #8da096; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.commission-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.commission-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #ffffff12; border-radius: 14px; background: #ffffff07; }
.commission-list i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--level) 16%, #0b1210); color: var(--level); font-size: 12px; font-style: normal; font-weight: 800; line-height: 1.05; }
.commission-list i small { font-size: 9.5px; font-weight: 700; opacity: .85; }
.commission-list span { display: grid; color: #eef3f0; font-size: 13px; }
.commission-list span small { color: #8da096; font-size: 11px; }
.commission-list b { color: #8ff5bf; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.commission-list b small { color: #8da096; font-size: 11px; }
.commission-more { display: block; margin: 12px auto 0; }
.commission-empty { display: grid; justify-items: center; gap: 10px; padding: 14px 6px 4px; text-align: center; }
.commission-empty p { margin: 0; color: #a8b8b0; font-size: 13px; line-height: 1.5; }
.commission-empty .primary-button { min-width: 180px; }

/* ---------------------------------------------------------------- tasks: mission orbit and badges */
.progress-panel.has-rive { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.progress-panel.has-rive > :not(.mission-orbit) { grid-column: 2; }
.progress-panel.has-rive .progress-bar { display: none; }
.mission-orbit { display: none; }
.progress-panel.has-rive .mission-orbit { display: block; grid-row: 1 / span 3; width: 104px; aspect-ratio: 1; margin: -8px 0 -8px -6px; }
.mission-orbit canvas { display: block; width: 100%; height: 100%; }
.progress-panel > div:first-of-type { flex-wrap: wrap; }
.mission-earned { flex-basis: 100%; color: #8ff5bf; font-size: 12.5px; font-style: normal; font-weight: 700; }
.mission-earned[hidden] { display: none; }
.progress-panel.is-complete { border-color: #ffc94d55 !important; box-shadow: 0 0 26px -12px #ffc94d !important; }
.task-art { position: relative; }
.task-art.has-rive { overflow: visible; border-color: transparent !important; background: none !important; box-shadow: none !important; }
.task-art.has-rive .task-glyph { display: none; }
.task-art canvas { position: absolute; left: 50%; top: 50%; width: 160%; height: 160%; transform: translate(-50%, -50%); pointer-events: none; }
.task-fly-coin { position: fixed; z-index: 9999; width: 18px; height: 18px; pointer-events: none; filter: drop-shadow(0 0 6px #ffd84d); }
.mini-balance.is-bumped { animation: task-bump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes task-bump { 40% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .mini-balance.is-bumped { animation: none; } }
.progress-panel.has-rive > div:first-of-type { display: grid; gap: 2px; justify-content: start; }
.progress-panel.has-rive > div:first-of-type > span { color: #a8b8b0; font-size: 12.5px; }
.progress-panel.has-rive > div:first-of-type strong { color: #fff; font-size: 18px; font-weight: 500; text-align: start; }
.progress-panel.has-rive small { margin-top: 2px; font-size: 12px; }
.task-list.is-settled .task-card, .task-list.is-settled .task-card.done .task-art { animation: none; }
.task-art:has(.task-glyph img) { overflow: visible; border-color: transparent !important; background: none !important; box-shadow: none !important; }
.task-glyph img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.task-card.done .task-glyph img { filter: saturate(.4) brightness(.7); }

/* ---------------------------------------------------------------- withdraw: route */
.wd-route { position: relative; margin: 12px 0 14px; overflow: hidden; border: 1px solid #ffffff14; border-radius: 18px;
  background: radial-gradient(60% 70% at 15% 60%, #3ee58c1c, transparent 70%), radial-gradient(55% 70% at 85% 60%, #7b5cff1c, transparent 70%), radial-gradient(80% 90% at 50% 50%, #10201a, #0a110f 65%, #050807);
  transition: border-color .3s, box-shadow .3s; }
.wd-route.is-ready { border-color: #3ee58c55; box-shadow: 0 0 24px -12px #3ee58c; }
.wd-route.is-error { border-color: #ff5a4e66; }
.wd-route-rive { display: block; width: 100%; aspect-ratio: 360 / 120; }
.wd-route-rive canvas { display: block; width: 100%; height: 100%; }
.wd-route-fallback { display: none; }
.wd-route:not(.has-rive) .wd-route-rive { display: none; }
.wd-route:not(.has-rive) .wd-route-fallback { display: flex; align-items: center; justify-content: space-between; padding: 20px 36px 8px; }
.wd-route-fallback img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #3ee58c55; }
.wd-route-fallback i { flex: 1; margin: 0 14px; border-top: 2px dashed #3ee58c88; color: transparent; font-style: normal; }
.wd-route-labels { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 0 12px 10px; margin-top: -6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.wd-route-labels span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-route-labels [data-route-from] { color: #eef3f0; font-weight: 700; }
.wd-route-labels [data-route-mid] { color: #8ff5bf; font-weight: 800; text-align: center; }
.wd-route-labels [data-route-to] { color: #a8b8b0; text-align: end; }
.wd-route.is-ready .wd-route-labels [data-route-to] { color: #8ff5bf; }

/* ---------------------------------------------------------------- withdraw: identity check */
.kyc { position: relative; margin: 12px 0 14px; padding: 16px; border: 1px solid #3ee58c33; border-radius: 18px; color: #eef3f0;
  background: radial-gradient(70% 60% at 0% 0%, #3ee58c1f, transparent 70%), radial-gradient(60% 60% at 100% 100%, #7b5cff1a, transparent 70%), linear-gradient(160deg, #0f1c17, #070b0a); }
.kyc[hidden] { display: none; }
.kyc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kyc h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.kyc p { margin: 0; }
.kyc-hero { display: flex; gap: 12px; align-items: flex-start; }
.kyc-hero p { margin-top: 4px; color: #a8b8b0; font-size: 13px; line-height: 1.45; }
.kyc-hero-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #06120c; flex: none;
  background: linear-gradient(145deg, #8ff5bf, #3ee58c); box-shadow: 0 0 22px -6px #3ee58c; }
.kyc-hero-mark svg { width: 24px; height: 24px; stroke-width: 2; }
.kyc-checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.kyc-checklist li { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; background: #ffffff08; color: #c9d6cf; font-size: 11.5px; text-align: center; line-height: 1.25; }
.kyc-checklist svg { color: #8ff5bf; }
.kyc-cta { width: 100%; }
.kyc-privacy { margin-top: 10px !important; color: #6f8279; font-size: 11.5px; text-align: center; }
.kyc-state { display: flex; gap: 12px; align-items: center; }
.kyc-state > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.kyc-state p { margin-top: 2px; color: #a8b8b0; font-size: 12.5px; }
.kyc-state > div { flex: 1; min-width: 0; }
.kyc-state.is-pending > i { color: #ffd479; background: #ffd47918; box-shadow: inset 0 0 0 1px #ffd47944; }
.kyc-state.is-approved > i { color: #06120c; background: #3ee58c; box-shadow: 0 0 18px -4px #3ee58c; }
.kyc[data-state="pending"] { border-color: #ffd47933; background: linear-gradient(160deg, #1b1a10, #0a0a07); }
.kyc[data-state="approved"] { padding: 12px 14px; }
.kyc-steps { display: flex; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.kyc-steps li { flex: 1; height: 3px; border-radius: 3px; background: #ffffff14; }
.kyc-steps li.is-done { background: #3ee58c88; }
.kyc-steps li.is-active { background: #3ee58c; box-shadow: 0 0 10px #3ee58c; }
.kyc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; }
.kyc-title svg { color: #8ff5bf; }
.kyc-note { color: #a8b8b0; font-size: 12.5px; line-height: 1.45; margin: 8px 0 !important; }
.kyc-field { display: grid; gap: 6px; font-size: 12.5px; color: #a8b8b0; }
.kyc-field select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #ffffff1f; border-radius: 12px; color: #eef3f0; background: #0a110f; font-size: 15px; }
.kyc-attest { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; font-size: 12.5px; color: #c9d6cf; line-height: 1.45; }
.kyc-attest input { width: 18px; height: 18px; margin-top: 1px; accent-color: #3ee58c; flex: none; }
.kyc-error { min-height: 1em; margin-top: 6px !important; color: #ff8a80; font-size: 12.5px; }
.kyc-error:empty { min-height: 0; margin: 0 !important; }
.kyc-error.is-block { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #ff5a4e14; }
.kyc-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; }
.kyc-actions .primary-button { flex: 1; max-width: 220px; margin-inline-start: auto; }
.kyc-link { padding: 8px 4px; border: 0; background: none; color: #8ff5bf; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kyc-link:disabled { opacity: .4; }
.kyc-file-link { position: relative; display: inline-block; }
.kyc-file-link input, .kyc-shot input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.kyc-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kyc-shot { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; aspect-ratio: 1.58; overflow: hidden;
  border: 1.5px dashed #3ee58c55; border-radius: 14px; background: #ffffff06; color: #c9d6cf; font-size: 12.5px; }
.kyc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kyc-shot.has-file { border-style: solid; border-color: #3ee58c; }
.kyc-shot.has-file b, .kyc-shot.has-file small { position: relative; padding: 2px 8px; border-radius: 8px; background: #000a; }
.kyc-shot b { font-weight: 600; }
.kyc-shot small { color: #8ff5bf; }
.kyc-shot-empty svg { width: 28px; height: 28px; color: #8ff5bf; }
.kyc-stage { display: grid; place-items: center; margin: 4px 0 10px; }
.kyc-camera, .kyc-clip { position: relative; width: min(220px, 70%); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #050807;
  box-shadow: 0 0 0 2px #3ee58c55, 0 0 30px -8px #3ee58c; object-fit: cover; }
.kyc-camera.is-idle { display: grid; place-items: center; color: #3ee58c88; }
.kyc-camera.is-idle svg { width: 40px; height: 40px; }
.kyc-camera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.kyc-clip { transform: scaleX(-1); }
.kyc-guide { position: absolute; inset: 8%; border-radius: 50%; border: 1.5px dashed #ffffff40; pointer-events: none; }
.kyc-timer { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.kyc-camera.is-recording .kyc-timer { background: conic-gradient(#3ee58c var(--kyc-p, 0turn), transparent 0); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%);
  animation: kyc-record 2s linear forwards; }
@property --kyc-p { syntax: '<angle>'; inherits: false; initial-value: 0turn; }
@keyframes kyc-record { to { --kyc-p: 1turn; } }
.kyc-record-row { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kyc-record-row .primary-button { min-width: 180px; }
.kyc-progress { color: #8ff5bf; font-size: 12.5px; text-align: center; }
.kyc-alternatives { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; }
.kyc-telegram-link { display: inline-flex; align-items: center; gap: 6px; }
.kyc-telegram-link svg { width: 17px; height: 17px; }
.kyc-camera.is-telegram { display: grid; place-items: center; color: #06120c; background: radial-gradient(circle at 35% 30%, #8ff5bf, #3ee58c 70%); }
.kyc-camera.is-telegram svg, .kyc-camera.is-waiting svg { width: 46px; height: 46px; stroke-width: 1.5; }
.kyc-camera.is-waiting { color: #8ff5bf; animation: kyc-wait 1.6s ease-in-out infinite; }
@keyframes kyc-wait { 50% { box-shadow: 0 0 0 2px #3ee58c, 0 0 40px -4px #3ee58c; } }
.kyc-received { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0 0 8px !important; color: #8ff5bf; font-size: 13px; font-weight: 600; }
.kyc-received svg { width: 18px; height: 18px; stroke-width: 2.2; }
.kyc-waiting { text-align: center; }
@media (prefers-reduced-motion: reduce) { .kyc-camera.is-recording .kyc-timer { animation-duration: .01s; } .kyc-camera.is-waiting { animation: none; } }

/* Profile replaces the old streak tile beside Team. */
.xstock-live .bento-profile {
  position: relative; order: 31 !important; min-width: 0; min-height: 132px;
  display: flex; align-items: flex-end; padding: 14px; text-align: start;
  border: 1px solid var(--bt-border); border-radius: var(--bt-radius);
  background: var(--bt-card); box-shadow: var(--bt-inner), var(--bt-shadow);
  color: #edf5f0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bento-profile-art { position: absolute; width: 86px; height: 86px; top: 4px; inset-inline-end: 14px; pointer-events: none; }
.bento-profile-art svg, .bento-profile-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bento-profile-art.has-bento-art svg { visibility: hidden; }
.bento-profile-arrow { margin-inline-start: auto; color: #9fb3a9; font-size: 22px; line-height: 1; }
.bento-profile:focus-visible { outline: 2px solid #8cebc1; outline-offset: 3px; }
@media (hover: hover) { .xstock-live .bento-profile:hover { border-color: #3ee58c55; background: var(--bt-card-hover); } }

/* Two explicit lines keep the plan terms inside the mining action. */
.xstock-live .bento-activate { flex-direction: column; gap: 5px; min-height: 76px; padding: 13px 16px; letter-spacing: 0; }
.bento-activate-label { display: block; max-width: 100%; white-space: nowrap; font-size: 14px; line-height: 1.3; }
.bento-activate-terms { display: block; max-width: 100%; white-space: nowrap; font-size: 11px; line-height: 1.4; font-weight: 500; }
@media(max-width:360px) { .bento-activate-label { font-size: 12.5px; } .bento-activate-terms { font-size: 10.5px; } }

/* The entire SpaceX quote row is a keyboard-accessible chart shortcut. */
.xstock-live .xs-spcxx-market { width:100%; background:transparent; border:0; border-top:1px solid #ffffff12; border-radius:0; padding:10px 0 0; text-align:start; font:inherit; color:#c8d8ce; min-height:49px; }
.xstock-live .xs-spcxx-market .spcxx-name { flex:1; min-width:0; display:flex; gap:8px; align-items:center; }
.spcxx-name img { width:24px; height:24px; object-fit:contain; border-radius:50%; }
.spcxx-name small { display:block; font-size:9px; color:#97aca0; margin-top:2px; }
.xstock-live .xs-spcxx-market .spcxx-quote { display:flex; flex-direction:column; gap:3px; align-items:flex-end; font-size:13px; white-space:nowrap; }
.spcxx-quote small { font-size:10px; color:#97aca0; }
[data-direction=up] .spcxx-quote small { color:#9bd6bd; }
[data-direction=down] .spcxx-quote small { color:#df9d96; }
.xs-spcxx-market>.xp-icon { flex:none; width:16px; height:16px; }
.xs-spcxx-market:focus-visible { outline:2px solid #9bd6bd; outline-offset:3px; }
.spcxx-detail h3 small { font-size:12px; color:#9aafa4; font-weight:400; }
.spcxx-detail a { color:#9bd6bd; }

.spcxx-chart-title { display:flex; align-items:center; gap:9px; }
.spcxx-chart-title>img { width:32px; height:32px; flex:none; object-fit:contain; border-radius:50%; }
.spcxx-chart-title>span { min-width:0; }

.xs-tagline-brand { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; white-space:nowrap; }
.xs-tagline-brand img { width:20px; height:20px; flex:none; object-fit:contain; border-radius:50%; }

/* Planned dates stay readable without motion and never imply completed milestones. */
.ap-listing { margin:24px 0 4px; padding:18px 16px; border:1px solid #809f8e35; border-radius:22px; background:radial-gradient(ellipse at 82% 35%,#284a3738,transparent 65%),#111d16; min-width:0; }
.ap-listing-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ap-listing-head h3 { margin:0; font-size:12px; color:#d4e1d8; font-weight:600; }
.ap-listing-replay { font-size:10px; }
.ap-listing-art { position:relative; width:100%; aspect-ratio:360/178; margin-top:5px; }
.ap-listing-art canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.ap-listing-static { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; justify-items:center; height:100%; }
.ap-listing-static>* { width:66%; height:auto; max-height:76%; object-fit:contain; }
.ap-listing-art[data-rive-ready=true] canvas { opacity:1; }
.ap-listing-art[data-rive-ready=true] .ap-listing-static { visibility:hidden; }
.ap-listing-labels { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; text-align:center; }
.ap-listing-labels li { min-width:0; }
.ap-listing-labels strong { display:block; font-size:12px; line-height:1.4; font-weight:600; color:#d3e8da; }
.ap-listing-labels small { display:block; font-size:10px; line-height:1.45; margin-top:3px; color:#9eb5a7; overflow-wrap:anywhere; }
.ap-listing-labels li:last-child strong { color:#b3f0c8; font-size:19px; line-height:1; padding:2px 0; }
.ap-listing-note { font-size:10px; line-height:1.5; text-align:center; color:#9daf9f; margin:12px 0 0; }
@media(prefers-reduced-motion:reduce) { .ap-listing-art[data-rive-ready=true] canvas { opacity:0; } .ap-listing-art[data-rive-ready=true] .ap-listing-static { visibility:visible; } }