/* No colour literals here: every colour comes from tokens.css. Measured layout values mirror the reference
   (page 1340px, gutter clamp(.75rem,1.5vw,1.5rem), header 70px, hero radius 18px, grid 24px, transition .15s). */
:root {
  --color-accent: var(--color-mint);
  --page-max: 1340px;
  --gutter: clamp(.75rem, 1.5vw, 1.5rem);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
  --hair: color-mix(in srgb, var(--color-line) 45%, transparent);
  --hair-strong: color-mix(in srgb, var(--color-line) 80%, transparent);
  --lift: color-mix(in srgb, var(--color-mint) 7%, var(--color-panel));
  --ease: ease;
  --t: .15s;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--color-bg); color: var(--color-ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
p { color: var(--color-muted); line-height: 1.5; margin: 0; }
h1, h2 { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: .5rem; top: -4rem; z-index: 100; background: var(--color-mint); color: var(--color-bg); padding: .6rem .9rem; border-radius: 8px; }
.skip:focus { top: .5rem; text-decoration: none; }

/* scroll progress */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-soft), var(--color-mint)); transform-origin: 0 50%; transform: scaleX(0); }

/* header */
.site-header { min-height: 70px; padding: .7rem max(var(--gutter), calc((100% - var(--page-max)) / 2)); display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 1rem; background: var(--color-bg); border-bottom: 1px solid var(--hair); }
.brand { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; color: var(--color-ink); font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.brand:hover { text-decoration: none; color: var(--color-mint); }
.tabs { display: flex; gap: .25rem; padding: .22rem; background: var(--color-deep); border: 1px solid var(--hair); border-radius: 11px; }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: .45rem .85rem; border-radius: 6px; color: var(--color-muted); font-size: .9rem; transition: color var(--t) var(--ease), background var(--t) var(--ease); }
.tabs a:hover { color: var(--color-ink); text-decoration: none; }
.tabs a[aria-current] { color: var(--color-mint); background: var(--color-panel); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.socials { justify-self: end; display: flex; gap: .4rem; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--hair); background: var(--color-panel); color: var(--color-ink); transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.icon-btn svg { width: 20px; height: 20px; }
a.icon-btn:hover { border-color: var(--color-mint); color: var(--color-mint); text-decoration: none; }
span.icon-btn { color: var(--color-muted); opacity: .6; cursor: default; }

/* contract bar */
.ca-bar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.ca-inner { max-width: var(--page-max); margin: 0 auto; padding: .55rem var(--gutter); }
.ca-slot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.ca-label { font: 700 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-mint); }
.ca-value { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; min-height: 44px; padding: .35rem .8rem; border-radius: 10px; border: 1px solid var(--hair); background: var(--color-panel); text-align: left; color: var(--color-ink); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.ca-value code { font: 600 clamp(.95rem, 2.2vw, 1.5rem) var(--mono); overflow-wrap: anywhere; word-break: break-all; letter-spacing: .01em; }
button.ca-value:hover { border-color: var(--color-mint); background: var(--lift); }
.ca-slot[data-ca-state=inert] .ca-value { cursor: default; color: var(--color-muted); border-style: dashed; }
.ca-hint { margin-left: auto; flex: none; font: 700 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-mint); }
.ca-value.copied { border-color: var(--color-mint); background: var(--lift); }
.ca-value.copy-failed { border-color: var(--color-soft); }

/* ticker */
.ticker { overflow: hidden; border-bottom: 1px solid var(--hair); background: var(--color-deep); }
.ticker-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tick-set { display: flex; flex: none; }
.tick { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.4rem; font: .8rem var(--mono); color: var(--color-muted); white-space: nowrap; }
.tick b { color: var(--color-ink); }
.tick i { font-style: normal; font-weight: 700; }
.tick[data-dir=up] i { color: var(--color-mint); }
.tick[data-dir=down] i { color: var(--color-soft); }
.skel-tick { width: 9rem; height: 1rem; margin: .7rem 1.4rem; padding: 0; }
.is-skel .skel-tick, .skel { background: linear-gradient(100deg, var(--hair) 30%, var(--hair-strong) 50%, var(--hair) 70%) 0 0 / 220% 100%; border-radius: 6px; animation: shimmer 1.4s linear infinite; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes shimmer { to { background-position: -220% 0; } }

main { width: calc(100% - 2 * var(--gutter)); max-width: var(--page-max); margin: 0 auto; padding-bottom: 3rem; }

/* hero */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); margin-top: 1rem; padding: clamp(1.25rem, 4vw, 2.75rem); border: 1px solid var(--hair); border-radius: 18px; background: linear-gradient(110deg, var(--color-panel), var(--color-bg) 62%, var(--lift)); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg > * { position: absolute; will-change: transform; }
.grid-layer { inset: -40px; background-image: linear-gradient(color-mix(in srgb, var(--color-mint) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-mint) 5%, transparent) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(110deg, transparent 48%, var(--color-bg)); -webkit-mask-image: linear-gradient(110deg, transparent 48%, var(--color-bg)); }
.blob { border-radius: 50%; filter: blur(70px); opacity: .5; }
.b1 { width: 46%; aspect-ratio: 1; left: -8%; top: -18%; background: radial-gradient(circle, var(--color-soft), transparent 68%); animation: drift 16s ease-in-out infinite alternate; }
.b2 { width: 52%; aspect-ratio: 1; right: -12%; bottom: -30%; background: radial-gradient(circle, var(--color-mint), transparent 66%); animation: drift 20s ease-in-out -6s infinite alternate-reverse; opacity: .32; }
.ring { border-radius: 50%; border: 1px solid var(--hair); }
.r1 { width: 28rem; height: 28rem; right: 6%; top: -9rem; }
.r2 { width: 44rem; height: 44rem; right: -8%; top: -16rem; opacity: .6; }
@keyframes drift { from { translate: 0 0; scale: 1; } to { translate: 7% 9%; scale: 1.16; } }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--color-mint); font: 700 .72rem var(--mono); letter-spacing: .08em; }
.hero h1 { margin: .9rem 0 .8rem; font-size: clamp(2.35rem, 5vw, 4.5rem); font-weight: 650; line-height: 1.08; letter-spacing: -.038em; text-wrap: balance; }
.hero-copy p { max-width: 28rem; font-size: 1.04rem; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .6rem 1.2rem; border-radius: 999px; border: 1px solid var(--hair-strong); font-weight: 700; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease); }
.btn:hover { text-decoration: none; border-color: var(--color-mint); transform: translateY(-1px); }
.btn.primary { background: var(--color-mint); color: var(--color-bg); border-color: transparent; }
.btn.ghost { color: var(--color-ink); background: var(--color-deep); }

/* status pill */
.status { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--color-deep); color: var(--color-ink); font: 700 .72rem var(--mono); letter-spacing: .04em; }
.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-mint) 60%, transparent); animation: ping 2s ease-out infinite; }
.status[data-state=off] .live-dot, .status[data-state=stale] .live-dot { background: var(--color-soft); animation: none; }
.status[data-state=sync] .live-dot { animation-duration: 1s; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-mint) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 .55rem transparent; } }

/* panels and spotlight */
.panel { position: relative; min-width: 0; border: 1px solid var(--hair); border-radius: 14px; background: linear-gradient(150deg, var(--color-panel), var(--color-deep) 72%); padding: clamp(1rem, 2.8vw, 1.6rem); }
[data-spot] { --mx: -300px; --my: -300px; }
[data-spot]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t) var(--ease); background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--color-mint) 13%, transparent), transparent 70%); }
[data-spot]:hover::after { opacity: 1; }

/* board */
.board { container: board / inline-size; padding: .25rem 1.1rem 1rem; border-radius: 10px; background: var(--color-panel); }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 1rem 0 .6rem; }
.board-head h2 { font-size: 1rem; letter-spacing: -.025em; }
.counter { font: .72rem var(--mono); letter-spacing: .06em; color: var(--color-muted); }
.counter b { color: var(--color-mint); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem; margin-bottom: .4rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--color-deep); }
.tool-title { padding: .45rem .65rem; border-radius: 7px; background: var(--color-panel); color: var(--color-mint); font-size: .84rem; font-weight: 650; white-space: nowrap; }
.segmented { display: flex; gap: .4rem; flex: 1; justify-content: flex-end; }
.segmented button { min-height: 44px; flex: 1; max-width: 8rem; padding: .4rem .75rem; border-radius: 7px; border: 1px solid var(--hair); background: var(--color-bg); transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); }
.segmented button:hover { border-color: var(--color-mint); }
.segmented button[aria-pressed=true] { color: var(--color-mint); background: var(--color-panel); border-color: var(--hair-strong); }
.cols, .row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(5rem, .8fr) minmax(4.5rem, .6fr) minmax(4.5rem, .7fr) minmax(4.5rem, .7fr) 44px; align-items: center; gap: .75rem; }
.cols { padding: .5rem .2rem; color: var(--color-muted); font: .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { position: relative; padding: .7rem .2rem; border-top: 1px solid var(--hair); border-radius: 0; transition: background var(--t) var(--ease), border-left-color var(--t) var(--ease); }
.row:hover { background: var(--lift); }
.row-main { min-height: 44px; display: flex; align-items: center; gap: .75rem; min-width: 0; color: inherit; }
a.row-main:hover { text-decoration: none; }
.row-name { display: grid; gap: .2rem; min-width: 0; }
.row-name strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-name small { font: .72rem var(--mono); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-wrap { flex: none; }
.tile { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; overflow: hidden; background: var(--color-deep); border: 1px solid var(--hair); font: 700 .8rem var(--mono); color: var(--color-mint); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell { font: .85rem var(--mono); text-align: right; white-space: nowrap; border-radius: 6px; padding: .15rem .3rem; }
.cell.chg { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; }
.chg[data-dir=up] { color: var(--color-mint); }
.chg[data-dir=down] { color: var(--color-soft); }
.chg[data-dir=none], .chg[data-dir=flat] { color: var(--color-muted); }
.arrow { font-size: .6rem; }
.dots { color: var(--color-muted); letter-spacing: .12em; }
.copy { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--color-muted); transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease); }
.copy svg { width: 16px; height: 16px; }
.copy:hover { color: var(--color-mint); border-color: var(--hair-strong); }
.copy-off { pointer-events: none; }
.copy-done { position: absolute; right: 0; top: -.2rem; padding: .15rem .4rem; border-radius: 6px; background: var(--color-mint); color: var(--color-bg); font: 700 .65rem var(--mono); opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.copy.copied .copy-done { opacity: 1; transform: none; }
.copy.copied { color: var(--color-mint); border-color: var(--color-mint); }
.note { margin-top: .8rem; padding: .75rem; border: 1px dashed var(--hair-strong); border-radius: 10px; background: var(--color-deep); font-size: .85rem; }

/* own token row */
.row-own, .row-ph { border-left: 2px solid var(--color-mint); padding-left: .6rem; animation: ownPulse 2s ease-in-out infinite; }
@keyframes ownPulse { 0%, 100% { background: transparent; } 50% { background: color-mix(in srgb, var(--color-mint) 8%, transparent); } }
.row-ph .row-main { cursor: default; }
.row-ph .tile { background: transparent; border-color: var(--color-mint); }
.row-ph .tile img { object-fit: contain; padding: 3px; }

/* skeleton to data */
.row-skel { pointer-events: none; }
.row-skel .bar { display: block; height: .7rem; width: 80%; margin-left: auto; }
.row-skel .bar-a, .row-skel .row-name .bar { margin-left: 0; }
.row-skel .bar-a { width: 4.5rem; } .row-skel .bar-b { width: 7rem; }
.row-skel .tile { border: 0; }
.row-enter { animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.row-own.row-enter, .row-ph.row-enter { animation: rowIn .5s var(--ease) both, ownPulse 2s ease-in-out infinite; animation-delay: 0s, 0s; }
.flash-up { animation: flashUp 1s ease-out; }
.flash-down { animation: flashDown 1s ease-out; }
@keyframes flashUp { from { background: color-mix(in srgb, var(--color-mint) 26%, transparent); } to { background: transparent; } }
@keyframes flashDown { from { background: color-mix(in srgb, var(--color-soft) 22%, transparent); } to { background: transparent; } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.stat { display: grid; gap: .35rem; padding: 1.1rem 1.25rem; overflow: hidden; }
.stat-k { font: .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.stat-v { font: 650 clamp(1.6rem, 2.6vw, 2.3rem) var(--sans); letter-spacing: -.03em; color: var(--color-ink); }
.stat-sub { font: .75rem var(--mono); color: var(--color-mint); min-height: 1em; }
.stat.is-skel .stat-v { color: var(--color-muted); }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .75rem; border: 1px solid var(--hair); border-radius: 10px; background: var(--color-panel); }
.pillar { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.25rem; border: 0; border-radius: 0; background: transparent; }
.pillar + .pillar { border-left: 1px solid var(--hair); }
.pillar h2 { font-size: 1.2rem; letter-spacing: -.025em; }
.pillar p { margin: 0 0 .35rem; }
.pillar a { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; font-weight: 650; }
.pillar-no { font: .72rem var(--mono); letter-spacing: .08em; color: var(--color-muted); }

/* register */
.register { margin-top: .75rem; }
.reg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: .75rem; }
.reg-row, .reg-row a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.reg-row { min-height: 56px; padding: .9rem; border: 1px solid var(--hair); border-radius: 13px; background: linear-gradient(145deg, var(--color-panel), var(--color-deep) 75%); }
.reg-row a { width: 100%; min-height: 44px; color: inherit; }
.reg-label { font-weight: 650; }
.reg-detail { font: 700 .75rem var(--mono); color: var(--color-mint); overflow-wrap: anywhere; text-align: right; }
.reg-row[data-state=inert] .reg-detail { color: var(--color-muted); }
.reg-row[data-state=inert] .reg-label { color: var(--color-muted); }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; max-width: var(--page-max); margin: 0 auto; padding: .9rem var(--gutter) 2rem; color: var(--color-muted); font: .75rem var(--mono); border-top: 1px solid var(--hair); }

/* motion gating: content stays visible without script */
[data-motion=on] [data-reveal]:not([data-revealed]) { opacity: 0; }

@container board (max-width: 620px) {
  .cols { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "main price copy" "main chg copy" "vol liq copy"; gap: .15rem .6rem; padding: .75rem .2rem; }
  .row-main { grid-area: main; grid-row: 1 / 3; }
  .cell.price { grid-area: price; } .cell.chg { grid-area: chg; }
  .cell.vol { grid-area: vol; text-align: left; } .cell.liq { grid-area: liq; text-align: left; }
  .cell.vol::before { content: "Vol "; color: var(--color-muted); }
  .cell.liq::before { content: "Liq "; color: var(--color-muted); }
  .copy { grid-area: copy; grid-row: 1 / 4; align-self: center; }
  .row-skel { grid-template-areas: "main price copy" "main chg copy" "vol liq copy"; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .tool-title { align-self: flex-start; }
  .segmented { justify-content: stretch; }
  .segmented button { max-width: none; }
}

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy p { max-width: 36rem; }
}
@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--hair); }
}
@media (max-width: 720px) {
  .site-header { grid-template-columns: 1fr auto; row-gap: .5rem; }
  .tabs { grid-area: 2 / 1 / auto / -1; }
  .tabs a { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .ca-slot { gap: .3rem; }
  .ca-label { flex: 0 0 100%; }
  .ca-value { padding: .35rem .6rem; }
  .ca-hint { display: none; }
  .brand { font-size: .85rem; }
}

/* reduced motion: final state, instantly, everywhere */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ticker-track { width: auto; flex-wrap: wrap; }
  .ticker { overflow-x: auto; }
  .tick-set + .tick-set { display: none; }
  .is-skel .skel-tick, .skel { background: var(--hair); }
  .blob { opacity: .3; }
}