/* Palette provenance
   source: brand/LOGO SPHYNIX PNG.png (square raster, colourtype 6, alpha 255 everywhere)
   method: weighted k-means, k=8, seed=20260, stride=3, weights 1/sqrt(bin population),
           each centroid snapped to the nearest real pixel in the full image; coordinates listed per token.
   emitted by tools/assets.mjs. This is the only file in src/ allowed to hold colour literals. */
:root{
  --c0: #080808; /* pixel [x357 y0] */
  --c1: #1d1d1e; /* pixel [x564 y231] */
  --c2: #3c3c3f; /* pixel [x522 y230] */
  --c3: #5e5f63; /* pixel [x501 y193] */
  --c4: #888a8f; /* pixel [x1906 y197] */
  --c5: #a3a6aa; /* pixel [x1378 y230] */
  --c6: #c1c4c8; /* pixel [x861 y592] */
  --c7: #e4e5e9; /* pixel [x147 y191] */
  --bg: var(--c0);
  --panel: var(--c1);
  --panel-2: var(--c2);
  --ink: var(--c7);
  --ink-2: var(--c6);
  --mute: var(--c4);
  --dim: var(--c3);
  --line: color-mix(in srgb, var(--ink) 14%, var(--bg));
  --line-2: color-mix(in srgb, var(--ink) 24%, var(--bg));
  --accent: var(--c7);
}

/* Layout and motion for Sphynix. Colours come only from tokens.css variables.
   Structure values (252 / 52 / 28 / 1280 / 14px+1.6 / 12-col gap 14 / .2s) are measured off the reference shell. */
@font-face{font-family:"Plex Mono";font-weight:400;font-display:swap;src:url(fonts/plex-400.ttf) format("truetype")}
@font-face{font-family:"Plex Mono";font-weight:600;font-display:swap;src:url(fonts/plex-600.ttf) format("truetype")}
@font-face{font-family:"Plex Mono";font-weight:700;font-display:swap;src:url(fonts/plex-700.ttf) format("truetype")}
:root{
  --mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --side:252px;
  --topH:52px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topH) + var(--caH,72px) + 12px)}
body{margin:0;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 1.2%,transparent) 0 2px,transparent 2px 9px),var(--bg);color:var(--ink);font:14px/1.6 var(--mono);overflow-x:hidden;-webkit-text-size-adjust:100%}
a{color:var(--ink)}
::selection{background:var(--ink);color:var(--bg)}
button{font-family:var(--mono);color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
img{max-width:100%}
h1,h2,h3{font-family:var(--mono);margin:0}
.mono{font-family:var(--mono)}

/* grain overlay, same recipe as the reference shell */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}

/* ---------- progress bar ---------- */
#prog{position:fixed;left:0;top:0;right:0;height:3px;z-index:70;background:transparent;pointer-events:none}
#prog i{display:block;height:100%;background:linear-gradient(90deg,var(--mute),var(--ink));transform-origin:0 50%;transform:scaleX(0)}

/* ---------- shell ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--bg);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:30;transition:transform .2s}
.logo{display:flex;align-items:center;justify-content:space-between;height:var(--topH);padding:0 14px;border-bottom:1px solid var(--line)}
.logo a{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:17px;font-weight:700;letter-spacing:.02em;min-height:44px}
.logo img{width:22px;height:22px;display:block}
.collapse{border:1px solid var(--line-2);background:none;color:var(--mute);font-size:11px;min-width:44px;min-height:44px;cursor:pointer}
.nav{flex:1;overflow-y:auto;padding:12px 8px}
.nav .grp{color:var(--dim);font-size:12px;padding:14px 8px 6px}
.nav a{display:flex;align-items:center;gap:6px;padding:6px 8px;min-height:44px;color:var(--ink-2);text-decoration:none;font-size:12.5px;white-space:nowrap;border:1px solid transparent}
.nav a .ic{color:var(--ink);width:28px;flex:none}
.nav a .st{margin-left:auto;font-size:11px;color:var(--mute)}
.nav a:hover{color:var(--ink);background:var(--panel-2)}
.nav a.on{color:var(--ink);background:var(--panel-2);border-color:var(--line-2)}
.side .foot{border-top:1px solid var(--line);padding:12px 14px;font-size:12px;color:var(--mute);display:flex;justify-content:space-between;gap:8px}
.main{margin-left:var(--side);min-height:100vh}
body.collapsed{--side:0px}
body.collapsed .side{transform:translateX(-100%)}

.top{position:sticky;top:0;z-index:40;height:var(--topH);display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
.burger{display:none;border:1px solid var(--line-2);background:none;min-width:44px;min-height:44px;cursor:pointer;font-size:18px}
body.collapsed .burger{display:inline-block}
.crumb{color:var(--mute);font-size:13px;white-space:nowrap}
.crumb b{color:var(--ink);font-weight:600}
.top .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.stat{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:6px;white-space:nowrap}
.soc{display:flex;align-items:center;gap:6px}
.ico{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);color:var(--ink);background:var(--bg);text-decoration:none;transition:border-color .2s,background .2s}
.ico svg{width:18px;height:18px;fill:currentColor;display:block}
a.ico:hover{border-color:var(--ink);background:var(--panel-2)}
.ico.inert{color:var(--dim);cursor:not-allowed}

/* status pill with pulsing dot */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);padding:3px 10px;font-size:12px;color:var(--ink-2);white-space:nowrap;min-height:28px}
.dot{position:relative;width:8px;height:8px;background:var(--ink);flex:none}
.dot::after{content:"";position:absolute;inset:-4px;border:1px solid var(--ink);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
.pill[data-s="loading"] .dot,.pill[data-s="retry"] .dot,.pill[data-s="stale"] .dot{background:var(--mute)}
.pill[data-s="loading"] .dot::after,.pill[data-s="retry"] .dot::after,.pill[data-s="stale"] .dot::after{border-color:var(--mute)}
.pill[data-s="offline"] .dot{background:var(--dim)}
.pill[data-s="offline"] .dot::after{animation:none;opacity:0}

/* ---------- contract address bar ---------- */
.cabar{position:sticky;top:var(--topH);z-index:35;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2);padding:10px 16px}
.cainner{display:flex;align-items:stretch;border:1px solid var(--line-2);background:var(--panel);max-width:1224px}
.cainner .k{display:flex;align-items:center;padding:0 14px;background:var(--panel-2);color:var(--ink);font-weight:700;font-size:clamp(14px,1.4vw,18px);border-right:1px solid var(--line-2)}
.cavalue{flex:1;min-width:0;display:flex;align-items:center;padding:8px 14px;font:600 clamp(13px,2vw,24px)/1.25 var(--mono);letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere;word-break:break-all;text-align:left;background:none;border:0;min-height:44px}
button.cavalue{cursor:copy}
button.cavalue:hover{background:var(--panel-2)}
.cavalue.inert{color:var(--dim);font-weight:500;letter-spacing:.06em;text-transform:lowercase}
.cacopy{display:flex;align-items:center;gap:8px;border:0;border-left:1px solid var(--line-2);background:none;padding:0 16px;min-width:44px;min-height:44px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.cacopy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.cacopy:disabled{cursor:not-allowed;opacity:.45}
.cacopy:not(:disabled):hover{background:var(--panel-2);color:var(--ink)}
.cabar.copied .cainner{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;animation:capop .5s var(--ease)}
@keyframes capop{0%{transform:scale(1)}30%{transform:scale(1.01)}100%{transform:scale(1)}}

/* ---------- primitives ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:600 13px var(--mono);padding:10px 16px;min-height:44px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.btn:hover{border-color:var(--ink)}
.btn.y{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.y:hover{background:var(--ink-2)}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.pane{border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden}
.ph{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.ph b{color:var(--ink)}
.ph .rt{margin-left:auto;color:var(--mute);font-size:12px;display:flex;align-items:center;gap:8px}
.pb{padding:14px}
.pf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.pf a{color:var(--mute);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pf a:hover{color:var(--ink)}
.pf .t::before{content:"■ ";color:var(--ink-2)}
.cursor::after{content:"";display:inline-block;width:8px;height:14px;background:var(--ink);margin-left:4px;vertical-align:-2px;animation:cur 1.1s steps(1) infinite}
@keyframes cur{50%{opacity:0}}
.wrap{padding:0 28px;max-width:1280px}
.kick{font-size:12px;color:var(--mute);margin-bottom:10px}
.kick::before{content:"// ";color:var(--ink)}
.sec{padding:34px 0;border-bottom:1px solid var(--line)}
.sech{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px;flex-wrap:wrap}
.sech h2{font-size:24px;font-weight:700}
.sech p{color:var(--ink-2);font-size:12.5px;max-width:420px;margin:0}
.dash{height:3px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 10px);margin:0 0 18px;position:relative}
.dash::before{content:"";position:absolute;left:0;top:0;height:3px;width:120px;background:linear-gradient(90deg,var(--ink),transparent)}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tiles>*{min-width:0}
.t7{grid-column:span 7}.t5{grid-column:span 5}.t4{grid-column:span 4}.t8{grid-column:span 8}.t3{grid-column:span 3}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mute);font-weight:500;font-size:12px}
.tablewrap{overflow-x:auto}
.num{text-align:right;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.5px;margin:0}
.kv dt{color:var(--mute)}.kv dd{margin:0;text-align:right;color:var(--ink)}
.chip{display:inline-block;border:1px solid var(--line-2);padding:1px 8px;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.chip.on{border-color:var(--ink);color:var(--ink)}
.chip.off{border-style:dashed;color:var(--dim)}

/* spotlight */
.spot{--mx:50%;--my:50%}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(240px circle at var(--mx) var(--my),color-mix(in srgb,var(--ink) 11%,transparent),transparent 70%);z-index:0}
.spot:hover::before{opacity:1}
.spot>*{position:relative;z-index:1}
tr.spot::before{display:none}
tr.spot>*{position:static}
tbody tr.row:hover{background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--ink) 12%,transparent),transparent 70%)}

/* ---------- hero ---------- */
.opener{position:relative;padding:38px 0 34px;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.mesh{position:absolute;inset:-20% -10%;z-index:-2;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.b1{width:46%;height:60%;left:4%;top:8%;background:radial-gradient(closest-side,var(--c4),transparent);animation:drift1 22s ease-in-out infinite alternate}
.b2{width:40%;height:56%;right:2%;top:20%;background:radial-gradient(closest-side,var(--c3),transparent);animation:drift2 28s ease-in-out infinite alternate}
.b3{width:36%;height:44%;left:34%;bottom:0;background:radial-gradient(closest-side,var(--c5),transparent);opacity:.28;animation:drift3 34s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14%,10%,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-16%,-8%,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(-10%,-14%,0) scale(1.25)}}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px;align-items:center}
.hero h1{font-size:clamp(30px,4.4vw,60px);line-height:1.04;font-weight:700;letter-spacing:-.01em;margin-bottom:16px}
.hero h1 .g{color:var(--ink);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--ink) 18%,transparent) 62%)}
.hero .lede{color:var(--ink-2);max-width:560px;margin:0 0 20px;font-size:14.5px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.badges .chip{display:inline-flex;align-items:center;gap:6px;min-height:28px}
.badges .chip b{color:var(--ink);font-weight:600}
.stage{position:relative;height:460px;perspective:900px}
.layer{position:absolute;inset:0;display:grid;place-items:center;--d:0;transform:translate3d(calc(var(--px,0) * var(--d) * 26px),calc(var(--py,0) * var(--d) * 22px + var(--sy,0) * var(--d) * -.06px),0);will-change:transform;pointer-events:none}
.layer img{display:block}
.l-art img{width:130%;max-width:none;opacity:.55;mix-blend-mode:screen;mask-image:radial-gradient(closest-side,var(--ink) 55%,transparent);-webkit-mask-image:radial-gradient(closest-side,var(--ink) 55%,transparent)}
.l-mark img{width:min(78%,380px);height:auto;filter:drop-shadow(0 18px 40px color-mix(in srgb,var(--bg) 80%,transparent))}
.l-lines{display:block}
.l-lines i{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--ink-2),transparent);opacity:.7;animation:slide 7s linear infinite}
.l-lines i:nth-child(1){top:18%;left:-10%;width:46%}
.l-lines i:nth-child(2){top:34%;right:-8%;width:40%;animation-duration:9s;animation-direction:reverse}
.l-lines i:nth-child(3){top:62%;left:-6%;width:36%;animation-duration:11s}
.l-lines i:nth-child(4){top:80%;right:-10%;width:50%;animation-duration:8s;animation-direction:reverse}
@keyframes slide{0%{transform:translateX(-30%);opacity:0}30%{opacity:.8}100%{transform:translateX(30%);opacity:0}}

/* ---------- ticker ---------- */
.ticker{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel);margin-bottom:14px;mask-image:linear-gradient(90deg,transparent,var(--ink) 6%,var(--ink) 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 6%,var(--ink) 94%,transparent)}
.tk-track.skel{animation:none}
.tk-track{display:flex;width:max-content;animation:tk var(--dur,60s) linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-50%)}}
.tk-item{display:flex;align-items:center;gap:10px;padding:0 18px;min-height:44px;border-right:1px solid var(--line);white-space:nowrap;font-size:12.5px}
.tk-item .s{font-weight:600}
.tk-item .p{color:var(--ink-2)}
.up{color:var(--ink)}
.down{color:var(--mute)}

/* ---------- market table ---------- */
.tile{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;background:var(--panel-2);border:1px solid var(--line-2);font-weight:700;font-size:13px;overflow:hidden;color:var(--ink)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tk-item .tile{width:24px;height:24px;font-size:11px}
.tkn{display:flex;align-items:center;gap:10px;min-width:0}
.tkn .nm{min-width:0}
.tkn .nm b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.tkn .nm small{display:block;color:var(--mute);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.msub{display:none;color:var(--mute);font-size:11.5px}
.m-vol{display:none}
.cp{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);background:var(--bg);cursor:pointer;color:var(--ink-2);transition:border-color .2s,color .2s}
.cp:hover{border-color:var(--ink);color:var(--ink)}
.cp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.cp.ok{border-color:var(--ink);color:var(--ink)}
.cp:disabled{opacity:.35;cursor:default}
.flash-up{animation:fup .9s ease-out}
.flash-down{animation:fdn .9s ease-out}
@keyframes fup{0%{background:color-mix(in srgb,var(--ink) 34%,transparent);color:var(--ink)}100%{background:transparent}}
@keyframes fdn{0%{background:color-mix(in srgb,var(--dim) 55%,transparent)}100%{background:transparent}}
.sk{display:inline-block;height:12px;min-width:48px;background:var(--panel-2);position:relative;overflow:hidden;vertical-align:middle}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 14%,transparent),transparent);transform:translateX(-100%);animation:shimmer 1.1s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.sk.tl{width:32px;height:32px}
.sk.w1{width:120px}.sk.w2{width:64px}.sk.w3{width:52px}.sk.w4{width:72px}
.row.fade{opacity:0;transform:translateY(8px)}
.row.fade.in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
.empty{color:var(--dim);font-size:13px;border:1px dashed var(--line-2);padding:20px;text-align:center;margin:14px}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.stile{padding:14px;border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden;min-height:96px}
.stile small{display:block;color:var(--mute);font-size:12px}
.stile .big{display:block;font-size:24px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stile .big.dim{color:var(--dim);font-weight:500;font-size:18px;text-transform:lowercase}

/* ---------- narratives (tabs) ---------- */
.tabs{display:flex;gap:0;flex-wrap:wrap;margin-bottom:10px}
.tabs button{border:1px solid var(--line-2);background:var(--bg);color:var(--mute);padding:6px 14px;font-size:12px;cursor:pointer;min-height:44px;transition:background .2s,color .2s}
.tabs button+button{border-left:0}
.tabs button[aria-selected="true"]{background:var(--panel-2);color:var(--ink)}
.slide{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0}
.slide img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.slide .cap{padding:18px;display:flex;flex-direction:column;justify-content:center;gap:10px;border-left:1px solid var(--line)}
.slide .cap p{margin:0;color:var(--ink-2)}
.slide .cap .n{color:var(--mute);font-size:12px}
[hidden]{display:none!important}

/* ---------- plan ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{border:1px solid var(--line);background:var(--panel);padding:16px;position:relative;overflow:hidden;min-width:0}
.step .n{color:var(--ink);font-weight:700;font-size:13px}
.step h3{font-size:16px;margin:6px 0 8px}
.step p{margin:0;color:var(--ink-2);font-size:13px}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:0}
summary{cursor:pointer;list-style:none;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:10px 0}
summary::-webkit-details-marker{display:none}
summary::after{content:"[+]";color:var(--ink)}
details[open] summary::after{content:"[-]"}
details p{color:var(--ink-2);margin:0 0 14px;max-width:820px}

footer{padding:30px 0 50px;color:var(--dim);font-size:12px;border-top:1px solid var(--line);margin-top:40px;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--mute)}

/* ---------- reveal ---------- */
html.anim [data-reveal]:not(.revealed){opacity:0}

/* ---------- breakpoints ---------- */
@media(max-width:1100px){.hero{grid-template-columns:1fr}.stage{height:300px}}
@media(max-width:1000px){.t7,.t5,.t4,.t8,.t3{grid-column:span 12}.steps{grid-template-columns:1fr 1fr}.statrow{grid-template-columns:1fr 1fr}.slide{grid-template-columns:1fr}.slide .cap{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:900px){
  :root{--side:0px}
  .side{width:250px;transform:translateX(-100%)}
  body.navopen .side{transform:none;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--bg) 70%,transparent)}
  .burger{display:inline-block}
  .stat.hide-m{display:none}
  .crumb{display:none}
}
@media(max-width:700px){
  .col-rank,.col-liq{display:none}
  .msub{display:block}
  .tkn .nm small{display:none}
  .tkn .nm b{max-width:96px}
  .tile{width:28px;height:28px;font-size:12px}
  table{font-size:12px}
  th,td{padding:8px 6px}
}
@media(max-width:480px){.col-vol{display:none}.m-vol,.m-liq{display:block;white-space:nowrap}.msub{font-size:11px}td.up>span::before,td.down>span::before{display:none}th,td{padding:8px 4px}.tkn{gap:6px}}
@media(max-width:600px){
  .wrap{padding:0 16px}
  .top{padding:0 12px;gap:8px}
  .cabar{padding:8px 12px}
  .cainner .k{padding:0 10px}
  .cavalue{padding:6px 10px}
  .cacopy .lbl{display:none}
  .steps{grid-template-columns:1fr}
  .sech h2{font-size:20px}
}
@media(max-width:480px){.statrow{grid-template-columns:1fr}.stage{height:240px}}

td.up>span::before{content:"▲ "}
td.down>span::before{content:"▼ "}
.cp .i-ok{opacity:0;stroke-linecap:square}
.cp.ok .i-ok{opacity:1}
.cp.ok .i-copy{opacity:0}

/* ---------- reduced motion: no motion at all ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.anim [data-reveal]:not(.revealed){opacity:1}
  .row.fade{opacity:1;transform:none}
  .tk-track{width:auto}
  .ticker{overflow-x:auto}
  .layer{transform:none}
}