/* The only file allowed to contain colour literals.
   Provenance: k-means (k=7, every 7th pixel) over reference/SAMPUL MINT JPG.png, k-means (k=8) over
   reference/MINT 1.jpg.jpeg, and k-means (k=4, opaque pixels) over brand/LOGO MINT PNG...png
   (scripts/palette.mjs). Each centroid is snapped to the nearest real pixel; (x,y) is that pixel. */
:root {
  --bg: #010912;        /* banner (719,1) */
  --panel: #011629;     /* banner (974,94) */
  --card: #01223e;      /* banner (1146,57) */
  --line: #063767;      /* banner (531,417) */
  --line-2: #0965b7;    /* banner (1105,466) */
  --accent: #46c4f9;    /* banner (1024,230) */
  --accent-hi: #aef8fb; /* MINT 1 (159,46) */
  --text: #effafc;      /* banner (743,220) */
  --muted: #6c949c;     /* MINT 1 (539,336) */
  --leaf: #94d9fb;      /* logo (801,852) */
  --leaf-dk: #3d7796;   /* logo (854,1330) */

  --ink: var(--bg);
  --soft: color-mix(in srgb, var(--text) 76%, var(--muted));
  --faint: color-mix(in srgb, var(--muted) 70%, var(--bg));
  --up: var(--accent-hi);
  --down: var(--muted);
  --glow: color-mix(in srgb, var(--accent) 34%, transparent);

  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --ui: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 16px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:500 14.5px/1.45 var(--ui);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-width:0}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 700px at 78% -10%,color-mix(in srgb,var(--line-2) 28%,transparent),transparent 70%),radial-gradient(900px 600px at -10% 40%,color-mix(in srgb,var(--line) 40%,transparent),transparent 70%)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:8px}
::selection{background:var(--accent);color:var(--ink)}

/* scroll progress */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:100;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--line-2),var(--accent),var(--accent-hi));box-shadow:0 0 12px var(--glow)}

/* header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:10px 24px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;flex:none;min-height:44px}
.mark{width:34px;height:34px;transition:rotate .5s var(--spring),scale .5s var(--spring)}
.brand:hover .mark{rotate:-12deg;scale:1.1}
.wordmark{font:800 21px/1 var(--display);letter-spacing:-.02em}
.tabs{display:flex;gap:4px;flex:1;min-width:0}
.tabs a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font-weight:600;font-size:14px;color:var(--muted);transition:background .15s,color .15s}
.tabs a:hover{color:var(--text);background:color-mix(in srgb,var(--card) 70%,transparent)}
.tabs a.on{color:var(--text);background:var(--card)}
.top-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.socials{display:flex;gap:4px}
.social{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--text);transition:background .15s,color .15s,rotate .2s var(--spring)}
a.social:hover{background:var(--card);color:var(--accent-hi);rotate:-6deg}
.social.is-inert{color:var(--faint);cursor:default}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);font-size:12px;font-weight:700;letter-spacing:.02em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent-hi);position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ping 1.8s var(--out) infinite}
.pill[data-state=loading] .dot{background:var(--leaf-dk)}
.pill[data-state=stale] .dot,.pill[data-state=error] .dot{background:var(--muted)}
.pill[data-state=stale] .dot::after,.pill[data-state=error] .dot::after{animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-hi) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}

main{display:grid;gap:34px;max-width:1240px;margin:0 auto;padding:22px 24px 40px}
main>*{min-width:0}

/* contract address slot */
.ca-in{display:flex;align-items:center;gap:18px;width:100%;min-height:76px;padding:14px 20px;border-radius:20px;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--card),var(--panel));text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s,translate .15s var(--out),box-shadow .2s}
button.ca-in:hover{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);translate:0 -1px}
button.ca-in:active{translate:0 1px}
.ca-in.is-inert{cursor:default;border-style:dashed;border-color:var(--line)}
.ca-lab{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ca-val{flex:1;min-width:0;font:700 clamp(15px,2.1vw,24px)/1.25 var(--mono);letter-spacing:-.01em;color:var(--accent-hi);overflow-wrap:anywhere;word-break:break-all}
.ca-val.is-pending{color:var(--faint);font-family:var(--ui);letter-spacing:.04em}
.ca-btn{flex:none;display:grid;place-items:center;min-width:76px;height:44px;padding:0 16px;border-radius:10px;border:2px solid var(--ink);background:var(--accent);color:var(--ink);font-weight:800;font-size:13.5px;box-shadow:0 3px 0 var(--leaf-dk)}
.is-inert .ca-btn{background:var(--card);color:var(--faint);border-color:var(--line);box-shadow:none}
.ca-in.is-copied{border-color:var(--accent-hi)}
.ca-in.is-copied .ca-btn{background:var(--accent-hi)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:28px;padding:34px 0 16px;isolation:isolate}
.mesh{position:absolute;inset:-40px -24px -20px;z-index:-1;overflow:hidden;border-radius:36px;-webkit-mask-image:radial-gradient(closest-side,black 70%,transparent);mask-image:radial-gradient(closest-side,black 70%,transparent)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.7;will-change:transform}
.b1{width:46%;aspect-ratio:1;left:-6%;top:-10%;background:color-mix(in srgb,var(--line-2) 55%,transparent);animation:drift1 16s ease-in-out infinite alternate}
.b2{width:40%;aspect-ratio:1;right:2%;top:8%;background:color-mix(in srgb,var(--accent) 34%,transparent);animation:drift2 19s ease-in-out infinite alternate}
.b3{width:36%;aspect-ratio:1;left:34%;bottom:-18%;background:color-mix(in srgb,var(--leaf-dk) 50%,transparent);animation:drift3 22s ease-in-out infinite alternate}
.grid-lines{position:absolute;inset:0;background:linear-gradient(color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px) 0 0/44px 44px;opacity:.35}
@keyframes drift1{to{translate:12% 18%;scale:1.18}}
@keyframes drift2{to{translate:-14% 10%;scale:.86}}
@keyframes drift3{to{translate:-18% -14%;scale:1.2}}
.hero-copy{display:grid;gap:18px;justify-items:start}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow-dot{width:22px;height:2px;background:var(--accent);border-radius:2px}
h1{font:800 clamp(40px,6.2vw,66px)/1.02 var(--display);letter-spacing:-.035em}
.h-line{display:block}
.h-acc{color:var(--accent-hi);text-shadow:0 0 32px var(--glow)}
.lede{max-width:600px;font-size:17px;line-height:1.6;color:var(--soft)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:8px;border:2.5px solid var(--ink);background:var(--accent);color:var(--ink);font-weight:800;font-size:14.5px;cursor:pointer;box-shadow:0 4px 0 var(--leaf-dk);transition:translate .12s var(--out),box-shadow .12s,background .15s,rotate .2s var(--spring)}
.btn:hover{translate:0 -2px;box-shadow:0 6px 0 var(--leaf-dk);background:var(--accent-hi)}
.btn:active{translate:0 3px;box-shadow:0 1px 0 var(--leaf-dk)}
.btn-ghost{background:var(--card);color:var(--text);border-color:var(--line-2);box-shadow:0 4px 0 var(--line)}
.btn-ghost:hover{background:var(--panel);color:var(--accent-hi)}
.btn-big{position:relative;overflow:hidden;min-height:54px;padding:0 26px;font:800 20px var(--display);background:var(--text);box-shadow:0 4px 0 var(--leaf-dk)}
.btn-big::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--accent) 55%,transparent) 50%,transparent 65%);translate:-120%;animation:shine 3.4s ease-in-out infinite}
@keyframes shine{55%,100%{translate:120%}}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-top:6px}
.tile{display:grid;gap:6px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--card);min-width:0}
.tile-k{font-size:11.5px;font-weight:600;color:var(--muted)}
.tile-v{font:700 22px/1.15 var(--mono);letter-spacing:-.02em;min-height:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-v .up{color:var(--up)}

.hero-art{position:relative;display:grid;place-items:center;min-height:360px}
.art-logo{position:relative;width:min(100%,400px);height:auto;filter:drop-shadow(0 18px 30px color-mix(in srgb,var(--bg) 70%,transparent)) drop-shadow(0 0 34px var(--glow));animation:float 4.6s ease-in-out infinite;will-change:transform}
.art-glow{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 38%,transparent),transparent)}
.art-floor{position:absolute;bottom:2%;width:64%;height:26px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 45%,transparent),transparent);filter:blur(6px);animation:floor 4.6s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -12px;rotate:2deg}}
@keyframes floor{50%{opacity:.55;scale:.78}}

/* ticker */
.a-board{display:flex;align-items:stretch;margin:0 0 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.a-tag{display:flex;align-items:center;gap:8px;flex:none;padding:0 16px;background:var(--accent);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.a-tag .dot{background:var(--ink)}
.a-tag .dot::after{animation-name:blink;box-shadow:none;background:var(--ink)}
@keyframes blink{50%{opacity:.15}}
.a-rail{flex:1;min-width:0;overflow:hidden}
.a-in{display:flex;width:max-content;animation:ticker var(--dur,50s) linear infinite}
.a-rail:hover .a-in{animation-play-state:paused}
.a-dep{display:flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-right:1px solid var(--line);white-space:nowrap;font-size:12.5px;color:var(--soft)}
.a-dep b{font:700 12.5px var(--mono);color:var(--text)}
.a-dep .tk{width:24px;height:24px;font-size:11px}
.a-skel{width:180px}
@keyframes ticker{to{transform:translateX(-50%)}}

/* panels */
.panel{border-radius:26px;border:1px solid var(--line);background:var(--card);padding:26px;position:relative;overflow:hidden}
.panel-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
h2{font:800 28px/1.1 var(--display);letter-spacing:-.025em}
.sub{margin-top:6px;max-width:520px;color:var(--muted);font-size:13.5px}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{display:flex;align-items:center;gap:9px;height:44px;min-width:190px;padding:0 14px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--bg);color:var(--muted);transition:border-color .15s,background .15s}
.search:focus-within{box-shadow:inset 0 0 0 1px var(--accent);background:var(--panel)}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit}
.sorts{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.sort{min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700;font-size:12.5px;cursor:pointer;transition:background .15s,color .15s}
.sort.on{background:var(--accent);color:var(--ink)}
.sort:not(.on):hover{color:var(--text);background:var(--card)}

/* board rows */
.cols,.row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) 44px;align-items:center;column-gap:14px}
.cols{padding:0 14px 8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.r{text-align:right}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.row{position:relative;min-height:62px;padding:9px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:border-color .2s,translate .3s var(--spring)}
.row:hover{border-color:var(--line-2);translate:0 -2px}
.row.is-hidden{display:none}
.cell{min-width:0;font:600 13.5px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.r{text-align:right}
.tok{display:flex;align-items:center;gap:12px;min-width:0}
.tk{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--line-2);background:var(--card);display:grid;place-items:center;font:800 14px var(--display);color:var(--accent-hi);overflow:hidden}
.tk-img{width:100%;height:100%;object-fit:cover}
.tok-t{display:grid;min-width:0}
.tok-s{font:800 14.5px var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok-n{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk{font:700 11px var(--mono);color:var(--faint);margin-right:2px}
.chg{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;font-weight:700}
.chg.up{color:var(--up)}.chg.down{color:var(--down)}
.flash-up{animation:flashUp .9s var(--out)}
.flash-down{animation:flashDown .9s var(--out)}
@keyframes flashUp{0%{background:color-mix(in srgb,var(--accent-hi) 38%,transparent);color:var(--text)}100%{background:transparent}}
@keyframes flashDown{0%{background:color-mix(in srgb,var(--muted) 38%,transparent);color:var(--text)}100%{background:transparent}}
.cp{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);color:var(--accent);cursor:pointer;transition:background .15s,color .15s,scale .15s var(--spring)}
.cp:hover{background:var(--accent);color:var(--ink);scale:1.06}
.cp svg{width:18px;height:18px}
.cp.is-done{background:var(--accent-hi);color:var(--ink)}
.row.sk-row{pointer-events:none}
.sk{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--card),var(--line),var(--card)) 0 0/200% 100%;animation:skel 1.3s linear infinite}
.sk.w60{width:60%}.sk.w80{width:80%}.sk.circle{width:36px;height:36px;border-radius:50%}
.tile-v .sk{width:70%;height:22px}
@keyframes skel{to{background-position:-200% 0}}
.fade-in{animation:fadeUp .5s var(--out) backwards;animation-delay:calc(var(--i,0)*55ms)}
@keyframes fadeUp{0%{opacity:0;translate:0 12px}}
.feed-msg{margin-top:14px;padding:12px 16px;border-radius:12px;border:1px dashed var(--line-2);color:var(--muted);font-size:13px}

/* spotlight */
.spot{position:relative}
.spot::before,.row::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%)}
.spot:hover::before,.row:hover::before{opacity:1}

/* how */
.how,.reg{display:grid;gap:22px}
.sec-head{display:grid;gap:12px;padding:10px 0 6px;justify-items:start}
.big{font:800 clamp(36px,5vw,56px)/1.04 var(--display);letter-spacing:-.035em}
.rule{display:grid;grid-template-columns:auto minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:26px;padding:28px;border-radius:26px;border:1px solid var(--line);background:var(--card)}
.rule-n{display:grid;place-items:center;min-width:48px;height:41px;padding:6px 12px;border-radius:8px;border:2px solid var(--ink);background:var(--accent-hi);color:var(--ink);font:800 15px var(--mono);box-shadow:0 3px 0 var(--leaf-dk)}
.rule-n.alt{background:var(--leaf)}
.rule-copy{display:grid;gap:12px}
h3{font:800 26px/1.1 var(--display);letter-spacing:-.025em}
.rule-copy p{color:var(--soft);font-size:15px;line-height:1.6}
.rule-demo{display:grid;align-content:center;justify-items:center;gap:14px;min-height:170px;padding:20px;border-radius:20px;border:1px dashed var(--line-2);background:var(--bg)}
.d-cap{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.d-bars{display:flex;align-items:flex-end;gap:8px;height:84px;width:100%;justify-content:center}
.d-bars i{width:22px;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(var(--accent-hi),var(--line-2));transform-origin:50% 100%;animation:bar 3.2s var(--spring) infinite;animation-delay:calc(var(--n,0)*.12s)}
.d-bars i:nth-child(2){--n:1}.d-bars i:nth-child(3){--n:2}.d-bars i:nth-child(4){--n:3}.d-bars i:nth-child(5){--n:4}.d-bars i:nth-child(6){--n:5}.d-bars i:nth-child(7){--n:6}
@keyframes bar{0%,100%{scale:1 .7}50%{scale:1 1}}
.d-copy{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel)}
.d-copy code{font:700 14px var(--mono);color:var(--accent-hi)}
.d-copybtn{position:relative;display:grid;place-items:center;min-width:76px;height:36px;border-radius:8px;background:var(--accent);color:var(--ink);font-weight:800;font-size:13px;overflow:hidden}
.d-idle,.d-done{grid-area:1/1;transition:none}
.d-idle{animation:idle 3.6s var(--out) infinite}
.d-done{animation:done 3.6s var(--out) infinite}
@keyframes idle{0%,40%{opacity:1;translate:0}48%,92%{opacity:0;translate:0 -10px}100%{opacity:1;translate:0}}
@keyframes done{0%,40%{opacity:0;translate:0 10px}48%,92%{opacity:1;translate:0}100%{opacity:0}}
.d-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.chip-on{background:var(--accent);color:var(--ink)}
.chip-off{background:transparent;color:var(--faint);border:1px dashed var(--line-2)}
.d-line{width:100%;height:70px;color:var(--accent);overflow:visible}
.d-line path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 3.6s var(--out) infinite;filter:drop-shadow(0 0 8px var(--glow))}
@keyframes draw{0%{stroke-dashoffset:420}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}
.end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:30px;border-radius:26px;border:3px solid var(--ink);background:var(--accent);color:var(--ink);box-shadow:0 6px 0 var(--leaf-dk)}
.end h2{font-size:clamp(32px,5vw,56px);line-height:1;color:var(--ink)}
.end::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent-hi) 70%,transparent),transparent 70%)}

/* register */
.recs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rec{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.rec.is-inert{border-style:dashed;opacity:.8}
.rec-name{font-weight:700;flex:1;min-width:0}
.rec-val,.rec-link{font:600 13.5px var(--mono);color:var(--accent-hi)}
.rec-link{text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}

.foot{border-top:1px solid var(--line);padding:26px 24px 36px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.foot-in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;color:var(--muted);font-size:13px}
.foot-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--text)}
.foot-brand img{width:28px;height:28px}

/* reveal (JS drives transform via spring; this is only the pre-state) */
.js [data-reveal]{opacity:0}
.js [data-reveal].is-in{opacity:1}

/* responsive */
@media (max-width:1100px){.rule{grid-template-columns:auto minmax(0,1fr)}.rule-demo{grid-column:1/-1}}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:12px}
  .hero-art{order:-1;min-height:240px}
  .art-logo{width:min(62%,260px)}
  .top{flex-wrap:wrap;gap:6px 12px;padding:8px 16px}
  .tabs{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none}
  main{padding:16px 16px 32px}
  .panel{padding:18px;border-radius:22px}
  .rule{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px}
  .cols{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto 44px;grid-template-areas:"tok price cp" "chg vol cp" "liq liq cp";row-gap:2px;padding:12px 12px}
  .row .tok{grid-area:tok}.row .c-price{grid-area:price}.row .c-chg{grid-area:chg;text-align:left;justify-content:flex-start}.row .c-vol{grid-area:vol}.row .c-liq{grid-area:liq;text-align:left;color:var(--muted)}.row .cp{grid-area:cp;align-self:center}
  .row .c-vol::before{content:"vol ";color:var(--faint)}
  .row .c-liq::before{content:"depth ";color:var(--faint)}
  .ca-in{flex-wrap:wrap;gap:8px 12px;padding:14px 16px}
  .ca-val{flex:1 0 100%;order:3}
}
@media (max-width:560px){
  .wordmark{font-size:19px}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{grid-template-columns:1fr auto;align-items:center}
  .controls{width:100%}
  .search{flex:1 0 100%}
  .sorts{width:100%}
  .sort{flex:1}
  .end{padding:22px}
  h3{font-size:23px}
}

/* motion off */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1}
  .a-in{width:auto;overflow-x:auto}
  .progress{transition:none}
}