/* FLOATED styles. No colour literals here: every colour is a token from tokens.css.
   Layout and motion values were measured from the reference build: header 60px / radius 20 / max 1240,
   hero 100svh with 600px floor, card radius 16, panel radius 30, tile 44px, ease-tide, 40s marquee, 2s pulse. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 168px; background: var(--c-abyss); }
body { font-family: var(--font-sans); background: var(--c-abyss); color: var(--c-ink); line-height: 1.5; min-height: 100svh; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
ol, ul { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--c-float-2); outline-offset: 2px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
.mono, .ca-value, .mono-s, .rows .c, .tk-p { font-family: var(--font-mono); }
.wrapany { overflow-wrap: anywhere; }

/* progress */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--c-float), var(--c-foam)); box-shadow: 0 0 12px rgb(var(--c-float-rgb) / .7); }

/* header */
.head { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 12px 12px 0; pointer-events: none; display: flex; justify-content: center; }
@media (min-width: 640px) { .head { padding-top: 16px; } }
.head-in { width: 100%; max-width: 1240px; pointer-events: auto; display: grid; gap: 8px; }
.bar { height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; border-radius: 20px; background: rgb(var(--c-deep-rgb) / .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(var(--c-line-rgb) / .6); transition: background-color var(--t-head) var(--ease-in-out), box-shadow var(--t-head) var(--ease-in-out); }
.brand { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; min-height: 44px; font-size: 19px; font-weight: 800; letter-spacing: -.04em; font-stretch: 118%; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav { display: none; flex: 1; gap: 2px; }
.nav a { height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--c-mist); transition: color var(--t-fast) var(--ease-in-out), background-color var(--t-fast) var(--ease-in-out); }
.nav a:hover { color: var(--c-ink); background: rgb(var(--c-hull-rgb) / .7); }
@media (min-width: 768px) { .nav { display: flex; } }
.socials { margin-left: auto; display: flex; gap: 4px; }
.social { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--c-mist); transition: color var(--t-fast) var(--ease-in-out), background-color var(--t-fast) var(--ease-in-out), transform var(--t-btn) var(--ease-tide); }
a.social:hover { color: var(--c-ink); background: rgb(var(--c-hull-rgb) / .8); }
a.social:active { transform: scale(.94); }
.social.inert { color: var(--c-fog); opacity: .7; cursor: default; }

/* CA slot */
.ca-wrap { display: block; }
.ca { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 16px; min-height: 56px; padding: 10px 18px; border-radius: 16px; text-align: left; background: rgb(var(--c-deep-rgb) / .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(var(--c-line-rgb) / .6); transition: box-shadow var(--t-btn) var(--ease-tide), background-color var(--t-btn) var(--ease-tide), transform var(--t-btn) var(--ease-tide); }
button.ca:hover { background: rgb(var(--c-hull-rgb) / .75); box-shadow: inset 0 0 0 1px rgb(var(--c-float-2-rgb) / .7), 0 0 30px -10px rgb(var(--c-float-rgb) / .7); }
button.ca:active { transform: scale(.995); }
.ca-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-mist); }
.ca-value { font-size: clamp(15px, 2.1vw, 24px); line-height: 1.3; letter-spacing: -.01em; color: var(--c-foam); overflow-wrap: anywhere; word-break: break-all; }
.ca-pending, .ca.inert .ca-value { color: var(--c-fog); }
.ca-hint { font-size: 12px; font-weight: 500; color: var(--c-mist); white-space: nowrap; }
button.ca.copied { box-shadow: inset 0 0 0 1px var(--color-mint), 0 0 34px -8px rgb(var(--c-foam-rgb) / .6); }
button.ca.copied .ca-hint { color: var(--color-mint); }
@media (max-width: 639px) { .ca { grid-template-columns: 1fr auto; padding: 10px 14px; } .ca-label { grid-column: 1 / -1; } .ca-value { grid-column: 1; } .ca-hint { grid-column: 2; } }

/* hero */
.hero { position: relative; isolation: isolate; min-height: max(600px, 100svh); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: clamp(176px, 24svh, 220px) 20px clamp(120px, 20svh, 200px); text-align: center; }
.mesh { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, var(--c-hull) 0%, var(--c-deep) 45%, var(--c-abyss) 100%); }
.mesh i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: mesh 18s var(--ease-in-out) infinite alternate; }
.mesh i:nth-child(1) { width: 52vmax; height: 52vmax; left: -12vmax; top: -10vmax; background: radial-gradient(closest-side, rgb(var(--c-line-rgb) / .8), transparent); }
.mesh i:nth-child(2) { width: 46vmax; height: 46vmax; right: -14vmax; top: 6vmax; background: radial-gradient(closest-side, rgb(var(--c-float-rgb) / .45), transparent); animation-duration: 23s; animation-delay: -6s; }
.mesh i:nth-child(3) { width: 40vmax; height: 40vmax; left: 28%; bottom: -18vmax; background: radial-gradient(closest-side, rgb(var(--c-foam-rgb) / .22), transparent); animation-duration: 29s; animation-delay: -11s; }
@keyframes mesh { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vmax, 4vmax, 0) scale(1.18); } }
.beams { position: absolute; inset: -2% -4% 30% -4%; z-index: -2; background: url(assets/hero-beams.jpg) center top / cover no-repeat; opacity: .8; mix-blend-mode: screen; mask-image: linear-gradient(180deg, rgb(var(--c-black-rgb)) 30%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, rgb(var(--c-black-rgb)) 30%, transparent 100%); will-change: transform; }
.water { position: absolute; inset: auto 0 0 0; width: 100%; height: 34%; z-index: -1; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 26%; z-index: 0; background: linear-gradient(180deg, transparent, rgb(var(--c-abyss-rgb) / .9)); pointer-events: none; }
.hero-in { position: relative; z-index: 2; max-width: 1240px; display: flex; flex-direction: column; align-items: center; }
.hero-in::before { content: ""; position: absolute; z-index: -1; inset: -8% 4% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--c-abyss-rgb) / .55), rgb(var(--c-abyss-rgb) / .2) 60%, transparent); filter: blur(40px); }
.display { font-size: clamp(44px, min(11vw, 12.6svh), 136px); font-weight: 800; line-height: .98; letter-spacing: -.045em; font-stretch: 118%; color: var(--c-ink); text-wrap: balance; }
.clip { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .12em; margin-bottom: -.12em; }
.word { display: inline-block; }
.js .word { opacity: 0; transform: translateY(105%); filter: blur(12px); animation: revealWord var(--t-reveal) var(--ease-tide) var(--reveal-delay, .1s) forwards; }
@keyframes revealWord { to { opacity: 1; transform: none; filter: blur(0); } }
.lede { margin-top: clamp(18px, 3.2svh, 30px); max-width: 660px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: var(--c-mist); text-wrap: pretty; }
.cta { margin-top: clamp(22px, 4svh, 40px); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; transition: transform var(--t-btn) var(--ease-tide), background-color var(--t-btn) var(--ease-tide), box-shadow var(--t-btn) var(--ease-tide), color var(--t-btn) var(--ease-tide); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--c-float); color: var(--c-abyss); box-shadow: inset 0 1px 0 rgb(var(--c-foam-rgb) / .5), 0 10px 30px -8px rgb(var(--c-float-rgb) / .65); }
.btn-primary:hover { background: var(--c-float-2); box-shadow: inset 0 1px 0 rgb(var(--c-foam-rgb) / .6), 0 14px 40px -8px rgb(var(--c-float-rgb) / .85); }
.btn-ghost { box-shadow: inset 0 0 0 1px var(--c-line-2); color: var(--c-ink); }
.btn-ghost:hover { background: rgb(var(--c-hull-rgb) / .9); }
.shine { position: absolute; inset: 0 auto 0 -50%; width: 33%; transform: translateX(-100%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgb(var(--c-foam-rgb) / .55), transparent); opacity: 0; }
.btn-primary:hover .shine { opacity: 1; animation: shimmer 2.4s var(--ease-tide) infinite; }
@keyframes shimmer { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(520%) skewX(-20deg); } }

/* status pill */
.status { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--c-mist); background: rgb(var(--c-deep-rgb) / .6); box-shadow: inset 0 0 0 1px rgb(var(--c-line-rgb) / .7); backdrop-filter: blur(8px); }
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-fog); }
.status[data-state="live"] .dot { background: var(--color-mint); box-shadow: 0 0 10px var(--color-mint); }
.status[data-state="live"] .dot::after, .status[data-state="loading"] .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-mint); animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.status[data-state="loading"] .dot { background: var(--c-float); }
.status[data-state="loading"] .dot::after { background: var(--c-float); }
.status[data-state="error"] .dot, .status[data-state="stale"] .dot { background: var(--c-float-2); }
.status[data-state="paused"] .dot { background: var(--c-fog); }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* marquee */
.marquee { position: relative; overflow: hidden; border-block: 1px solid rgb(var(--c-line-rgb) / .55); background: rgb(var(--c-deep-rgb) / .7); mask-image: linear-gradient(90deg, transparent, rgb(var(--c-black-rgb)) 6%, rgb(var(--c-black-rgb)) 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, rgb(var(--c-black-rgb)) 6%, rgb(var(--c-black-rgb)) 94%, transparent); }
.tk-track { display: flex; width: max-content; padding: 14px 0; }
.tk-track.ready { animation: marquee var(--marquee-duration) linear infinite; }
.marquee:hover .tk-track.ready { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }
.tk-set { display: flex; flex: none; }
.tk { display: inline-flex; align-items: center; gap: 10px; margin-right: 36px; font-size: 14px; white-space: nowrap; }
.tk b { font-weight: 700; color: var(--c-ink); }
.tk-p { color: var(--c-mist); }
.tk-c { font-family: var(--font-mono); font-size: 13px; }
.up { color: var(--color-mint); }
.down { color: var(--c-float-2); }
.sk-tk { width: 150px; height: 28px; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--c-hull-rgb) / .8), rgb(var(--c-line-rgb) / .5), rgb(var(--c-hull-rgb) / .8)); background-size: 220% 100%; animation: skel 2.4s var(--ease-tide) infinite; }

/* skeleton */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, rgb(var(--c-hull-rgb) / .9), rgb(var(--c-line-rgb) / .55), rgb(var(--c-hull-rgb) / .9)); background-size: 220% 100%; animation: skel 2.4s var(--ease-tide) infinite; }
@keyframes skel { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.sk-a { width: 64px; height: 12px; } .sk-b { width: 100px; height: 10px; margin-top: 6px; } .sk-c1 { width: 72px; height: 14px; }
.tile.sk { border-radius: 50%; }

/* stat tiles */
.pulse { margin-top: 40px; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile-stat { display: flex; flex-direction: column; gap: 8px; min-height: 96px; padding: 16px; border-radius: 16px; background: rgb(var(--c-deep-rgb) / .8); box-shadow: inset 0 0 0 1px rgb(var(--c-line-rgb) / .7); }
.tile-stat .k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-mist); }
.tile-stat .v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--c-ink); overflow-wrap: anywhere; }
.tile-stat .v.mono-s { font-size: 14px; font-weight: 400; color: var(--c-fog); line-height: 1.4; }
.tile-stat .v.mono-s.on { color: var(--c-foam); }

/* spotlight */
.spot { position: relative; --mx: -300px; --my: -300px; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-btn) var(--ease-in-out); background: radial-gradient(260px circle at var(--mx) var(--my), rgb(var(--c-float-rgb) / .2), transparent 70%); }
.spot:hover::before { opacity: 1; }

/* sections */
.sec { padding-top: 96px; }
@media (max-width: 639px) { .sec { padding-top: 64px; } }
.sec-head { max-width: 720px; margin-bottom: 28px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-float-2); }
.sec-head h2 { margin-top: 8px; font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; font-stretch: 112%; }
.sub { margin-top: 14px; font-size: clamp(15px, 1.3vw, 18px); color: var(--c-mist); text-wrap: pretty; }
.panel { border-radius: 30px; background: linear-gradient(160deg, rgb(var(--c-hull-rgb) / .9), rgb(var(--c-deep-rgb) / .96) 45%, rgb(var(--c-abyss-rgb) / .98)); box-shadow: inset 0 0 0 1px rgb(var(--c-float-2-rgb) / .18), inset 0 1px 0 rgb(var(--c-foam-rgb) / .07), 0 40px 120px -30px rgb(var(--c-black-rgb) / .95); overflow: hidden; }
.panel-top { display: flex; padding: 16px 16px 8px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgb(var(--c-abyss-rgb) / .6); box-shadow: inset 0 0 0 1px rgb(var(--c-line-rgb) / .6); }
.tabs button { min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--c-mist); transition: color var(--t-fast) var(--ease-in-out), background-color var(--t-btn) var(--ease-tide); }
.tabs button:hover { color: var(--c-ink); }
.tabs button[aria-selected="true"] { background: var(--c-hull-2); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line-2); }

/* board rows */
.thead, .row { display: grid; grid-template-columns: 36px minmax(160px, 1.7fr) repeat(4, minmax(80px, 1fr)) 44px; align-items: center; gap: 12px; padding: 0 16px; }
.thead { height: 36px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-fog); }
.row { position: relative; min-height: 64px; border-top: 1px solid rgb(var(--c-line-rgb) / .4); transition: background-color var(--t-fast) var(--ease-in-out); }
.row.spot::before { border-radius: 0; }
.row:hover { background: rgb(var(--c-hull-rgb) / .5); }
.rk { font-family: var(--font-mono); font-size: 13px; color: var(--c-fog); }
.tok { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tile { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c-hull-2); box-shadow: inset 0 0 0 1px rgb(var(--c-float-2-rgb) / .3); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-letter { font-size: 14px; font-weight: 700; color: var(--c-ink); background: linear-gradient(160deg, var(--c-line), var(--c-hull-2)); }
.tile-s { width: 28px; height: 28px; font-size: 11px; }
.tn { min-width: 0; display: flex; flex-direction: column; }
.sym { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm { font-size: 12px; color: var(--c-fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .c { font-size: 14px; color: var(--c-ink); font-variant-numeric: tabular-nums; min-width: 0; }
.rows .c.na { color: var(--c-fog); }
.cpy-slot { display: grid; place-items: center; width: 44px; height: 44px; }
.cpy { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--c-mist); transition: color var(--t-fast) var(--ease-in-out), background-color var(--t-fast) var(--ease-in-out); }
.cpy:hover { color: var(--c-ink); background: rgb(var(--c-hull-rgb) / .9); }
.cpy .i-ok { display: none; } .cpy.copied { color: var(--color-mint); } .cpy.copied .i-copy { display: none; } .cpy.copied .i-ok { display: block; }
.flash-up { animation: flashUp .9s var(--ease-out); } .flash-down { animation: flashDown .9s var(--ease-out); }
@keyframes flashUp { from { background: rgb(var(--c-foam-rgb) / .28); } to { background: transparent; } }
@keyframes flashDown { from { background: rgb(var(--c-line-rgb) / .4); } to { background: transparent; } }
.fade-in { animation: rowIn .7s var(--ease-tide) var(--d, 0ms) backwards; }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.board-error { padding: 16px; font-size: 14px; color: var(--c-float-2); border-top: 1px solid rgb(var(--c-line-rgb) / .4); }

/* own token row: pinned, mint edge, low-opacity pulse */
.row.own { border-left: 2px solid var(--color-mint); animation: ownPulse 2s ease-in-out infinite; }
@keyframes ownPulse { 0%, 100% { background: rgb(var(--c-foam-rgb) / .03); } 50% { background: rgb(var(--c-foam-rgb) / .10); } }
.row.placeholder { pointer-events: none; cursor: default; }
.row.placeholder .tile { background: transparent; box-shadow: none; }
.row.placeholder .c { color: var(--c-fog); }

/* method */
.steps { padding: 20px; }
.step-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .step-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step-tabs button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 14px; text-align: left; font-size: 14px; font-weight: 600; color: var(--c-mist); background: rgb(var(--c-abyss-rgb) / .55); box-shadow: inset 0 0 0 1px rgb(var(--c-line-rgb) / .6); transition: color var(--t-fast) var(--ease-in-out), box-shadow var(--t-btn) var(--ease-tide), background-color var(--t-btn) var(--ease-tide); }
.step-tabs button .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-mono); font-size: 13px; background: var(--c-hull-2); color: var(--c-ink); }
.step-tabs button[aria-selected="true"] { color: var(--c-ink); background: rgb(var(--c-hull-rgb) / .9); box-shadow: inset 0 0 0 1px var(--c-float); }
.step-tabs button.done .n { background: var(--c-float); color: var(--c-abyss); }
.meter { margin-top: 16px; height: 2px; border-radius: 2px; overflow: hidden; background: rgb(var(--c-line-rgb) / .8); }
.fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-float), var(--c-foam)); }
@keyframes stepfill { from { width: 0; } to { width: 100%; } }
.step-body { padding: 28px 8px 12px; min-height: 160px; }
.step-body h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.025em; }
.step-body p { margin-top: 12px; max-width: 640px; font-size: 17px; color: var(--c-mist); }
.step-body [role="tabpanel"]:not([hidden]) { animation: rowIn .6s var(--ease-tide); }

/* ledger cards */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { padding: 18px; border-radius: 16px; background: rgb(var(--c-deep-rgb) / .8); box-shadow: inset 0 0 0 1px rgb(var(--c-line-rgb) / .7); min-height: 120px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card h3 { font-size: 15px; font-weight: 600; color: var(--c-mist); }
.card .big { margin-top: 14px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.card .big.dim { color: var(--c-fog); font-weight: 600; font-size: 20px; }
.card .muted { margin-top: 6px; font-size: 13px; color: var(--c-fog); }
.card .mono { margin-top: 14px; font-size: 13px; color: var(--c-foam); }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chip-on { color: var(--c-abyss); background: var(--color-mint); }
.chip-off { color: var(--c-fog); box-shadow: inset 0 0 0 1px var(--c-line); }

/* reveal */
.js .reveal:not(.is-in) { opacity: 0; }

/* footer */
.foot { margin-top: 112px; padding: 36px 0 56px; border-top: 1px solid rgb(var(--c-line-rgb) / .5); background: linear-gradient(180deg, transparent, rgb(var(--c-deep-rgb) / .8)); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; justify-content: space-between; }
.brand-s { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -.03em; }
.brand-s img { border-radius: 6px; }
.foot p { max-width: 560px; font-size: 13px; color: var(--c-fog); }

/* narrow board layout */
@media (max-width: 799px) {
  .thead { display: none; }
  .row { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "rk tok price cpy" "rk tok chg cpy" ". vol liq liq"; row-gap: 4px; padding: 10px 12px; }
  .rk { grid-area: rk; } .tok { grid-area: tok; } .price { grid-area: price; text-align: right; } .chg { grid-area: chg; text-align: right; }
  .vol { grid-area: vol; } .liq { grid-area: liq; } .cpy-slot { grid-area: cpy; }
  .rows .vol::before, .rows .liq::before { content: attr(data-label); display: block; font-family: var(--font-sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-fog); }
  .rows .price, .rows .chg { font-size: 14px; }
}

/* reduced motion: instant, zero motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal:not(.is-in) { opacity: 1; }
  .js .word { opacity: 1; transform: none; filter: none; }
  .row.own { background: rgb(var(--c-foam-rgb) / .06); }
  .mesh i { opacity: .4; }
  .tk-track.ready { transform: none; }
  .row.own { animation: none; }
}

.tile-img { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease-tide); }
.tile-img.ok { opacity: 1; }