/* Octonoid — deep-sea glass. One dark theme on purpose: the brand lives in the abyss. */
:root{
  --bg:#03060c;--bg2:#071226;--fg:#e8f1ff;--muted:#8796b3;--faint:#55627d;
  --glass:rgba(140,190,255,.045);--glass2:rgba(140,190,255,.08);--line:rgba(120,190,255,.12);--line2:rgba(120,190,255,.22);
  --accent:#2ef2c8;--accent2:#7b5cff;--glow:rgba(46,242,200,.35);
  --up:#3ee6a0;--down:#ff5f7a;--warn:#ffc46b;
  --r:16px;--r-sm:10px;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--fg);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 600px at 70% -10%,rgba(46,242,200,.10),transparent 60%),
    radial-gradient(900px 600px at 0% 10%,rgba(123,92,255,.12),transparent 60%),
    linear-gradient(180deg,var(--bg2) 0%,var(--bg) 55%);
  background-attachment:fixed}
/* drifting particles, very light */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(1.5px 1.5px at 12% 22%,rgba(160,255,240,.6),transparent 60%),
    radial-gradient(1px 1px at 38% 68%,rgba(180,160,255,.6),transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 38%,rgba(160,255,240,.5),transparent 60%),
    radial-gradient(1px 1px at 84% 80%,rgba(160,255,240,.5),transparent 60%),
    radial-gradient(1px 1px at 22% 88%,rgba(180,160,255,.5),transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 14%,rgba(180,160,255,.5),transparent 60%);
  background-size:600px 600px;animation:drift 60s linear infinite}
@keyframes drift{to{background-position:0 -600px}}
@media (prefers-reduced-motion:reduce){body::before,.hero-art img,.dot{animation:none!important}}

a{color:var(--accent);text-decoration:none}a:hover{color:#8fffe6}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;line-height:1.15}
h1{font-size:clamp(26px,4vw,38px);margin:8px 0 12px}
h2{font-size:20px;margin:36px 0 12px}
code,.addr,.mono,td,.stats b{font-family:var(--mono);font-feature-settings:"tnum"}
code{font-size:13px;color:#bfeee3}
small{color:var(--muted)}
.up{color:var(--up)}.down{color:var(--down)}

/* --- header --- */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;
  padding:12px max(16px,calc((100vw - 1180px)/2));background:rgba(3,6,12,.72);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand:hover{color:var(--fg)}
.brand img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line2),0 0 18px var(--glow)}
nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}nav::-webkit-scrollbar{display:none}
nav a{color:var(--muted);padding:7px 12px;border-radius:999px;white-space:nowrap;font-size:14px;font-weight:500}
nav a:hover{color:var(--fg);background:var(--glass)}
nav a.on{color:var(--fg);background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line2)}
.price{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--muted);padding:6px 12px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);white-space:nowrap}
.price b{color:var(--fg);font-weight:600}
.cta,.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;
  color:#022019;background:linear-gradient(135deg,var(--accent),#6ff7ff);box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 6px 24px rgba(46,242,200,.25);
  border:0;cursor:pointer;white-space:nowrap}
.cta:hover,.btn:hover{color:#022019;filter:brightness(1.08);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 8px 32px rgba(46,242,200,.4)}
.btn.ghost{color:var(--fg);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{background:var(--glass2);color:var(--fg)}

main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:20px 16px 40px}
footer{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:28px 16px 40px;color:var(--faint);font-size:13px;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a{color:var(--muted)}

/* --- hero --- */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:24px 0 8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);padding:7px 12px;border-radius:999px;background:rgba(46,242,200,.08);border:1px solid rgba(46,242,200,.25)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
.hero h1{font-size:clamp(34px,6vw,64px);margin:18px 0 14px;letter-spacing:-.035em;line-height:1.02}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),#8fd8ff 45%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:17px;color:#b8c6de;max-width:540px;margin:0 0 22px}
.hero .actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art::before{content:"";position:absolute;inset:8% 10%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(46,242,200,.22),rgba(123,92,255,.12) 55%,transparent);filter:blur(20px)}
.hero-art img{position:relative;width:100%;max-width:520px;height:auto;filter:drop-shadow(0 20px 60px rgba(46,242,200,.25));animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(-1deg)}}

/* countdown */
.launch{margin:26px 0 6px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px 20px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(46,242,200,.08),rgba(123,92,255,.08));border:1px solid var(--line2)}
.launch .t{font:600 clamp(26px,4vw,40px)/1 var(--mono);letter-spacing:-.02em;white-space:nowrap}
.launch .t span{color:var(--muted);font-size:.5em;margin:0 6px 0 2px}
.launch p{margin:0;color:#b8c6de}

/* --- glass blocks --- */
.panel,table.list,.stats>div,.card,form.swap,.step,canvas#chart,.chart{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.panel{padding:18px 20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0}
.stats>div{padding:14px 16px;min-width:0}
.stats span{display:block;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.stats b{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.ticker{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ticker b{font-size:20px}

/* tabs */
.tabs{display:flex;gap:6px;margin:10px 0 14px;flex-wrap:wrap}
.tabs a{padding:7px 14px;border-radius:999px;color:var(--muted);background:var(--glass);border:1px solid var(--line);font-size:14px}
.tabs a.on,.tabs a:hover{color:var(--fg);border-color:var(--line2);background:var(--glass2)}
.note a.on{color:var(--fg);font-weight:600}

/* tables */
[hidden]{display:none!important}
table.list{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}
table.list th,table.list td{padding:11px 16px;text-align:left;white-space:nowrap;border-bottom:1px solid rgba(120,190,255,.07)}
table.list th{color:var(--faint);font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding-top:14px}
table.list td{font-size:13.5px}
table.list tbody tr:last-child td{border-bottom:0}
table.list tbody tr{transition:background .15s}
table.list tbody tr:hover{background:rgba(140,190,255,.05)}
table.list td a{color:var(--fg)}table.list td a:hover{color:var(--accent)}
tr.buy td:nth-child(2){color:var(--up)}tr.sell td:nth-child(2){color:var(--down)}

.img{border-radius:50%;vertical-align:middle;object-fit:cover;box-shadow:0 0 0 1px var(--line2)}
.ph{display:inline-block;background:linear-gradient(135deg,rgba(46,242,200,.2),rgba(123,92,255,.25))}
.bar{display:inline-block;width:90px;height:6px;background:rgba(255,255,255,.07);border-radius:4px;vertical-align:middle;overflow:hidden;margin-right:6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 10px var(--glow)}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font:600 11px/1.2 var(--mono);letter-spacing:.06em}
.badge.dex{color:#022019;background:var(--accent)}

/* token page */
.token-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.token-head h1{margin:0 0 4px}.token-head p{margin:0;color:#b8c6de}
.ca{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;color:var(--muted)}
.ca code{word-break:break-all;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
button{font:500 13px var(--sans);color:var(--fg);background:var(--glass2);border:1px solid var(--line2);border-radius:8px;padding:6px 12px;cursor:pointer}
button:hover{border-color:var(--accent);color:var(--accent)}
canvas#chart{width:100%;display:block}
.chart{display:block;width:100%;height:auto;padding:8px}

/* NFT */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:14px 0}
.card{padding:10px;color:var(--fg);display:flex;flex-direction:column;gap:6px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--line2);color:var(--fg)}
.nftimg{width:100%;height:auto;aspect-ratio:1;border-radius:12px;object-fit:cover}
.card span{color:var(--muted);font-size:13px}
.nft{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.nftbig{max-width:100%;height:auto;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* swap */
form.swap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:18px 20px;margin:16px 0}
form.swap label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
input,select{font:500 15px var(--sans);color:var(--fg);background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;outline:0;min-width:0}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,242,200,.15)}
.step{padding:16px 20px;margin:12px 0}
.step h3{margin:0 0 6px}
.field{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(120,190,255,.07)}
.field span{min-width:220px;color:var(--muted);font:500 12px var(--mono)}
.field code{font-size:15px;color:var(--fg)}
.copyall{margin-top:10px}

.note,.howto{color:var(--muted)}
.addr{font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin-top:36px}
.section-head h2{margin:0}

/* feature cards on home */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:22px 0 4px}
.features a{display:block;padding:18px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);color:var(--fg);transition:border-color .2s,transform .2s}
.features a:hover{border-color:var(--line2);transform:translateY(-2px);color:var(--fg)}
.features b{display:block;font-size:16px;margin:8px 0 4px}
.features span{color:var(--muted);font-size:14px}
.features i{font-style:normal;font-size:22px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-art{order:-1}
  .hero-art img{max-width:340px}
}
@media (max-width:640px){
  header{gap:10px 12px}
  nav{order:3;width:100%}
  .price{margin-left:auto}
  header .cta{display:none}
  .launch{grid-template-columns:1fr}
  .field span{min-width:0;width:100%}
  table.list th,table.list td{padding:10px 12px}
}
@media (max-width:900px){table.list{display:block;overflow-x:auto}}

/* Eight services, one watchful octopus. */
main:has(.hub){max-width:1440px;padding-top:26px}
.hub{position:relative;padding:0}
.hub-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px 48px}
.hub-text{grid-column:1;position:relative;z-index:2;max-width:760px}
.hub-text .kicker{display:flex;align-items:center;gap:9px;margin:4px 0 13px;font-size:10px;letter-spacing:.15em;color:#9baec7}
.network-dot{display:inline-block;flex:none;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px #2ef2c870}
.hub h1{font-size:clamp(42px,4.3vw,62px);font-weight:600;letter-spacing:-.055em;line-height:1.02;margin:0 0 18px}
.hub h1 em{font-style:normal;background:linear-gradient(100deg,#2ef2c8 0%,#37d6ef 45%,#9774ff 94%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hub .lead{max-width:540px;font-size:15px;color:#9daec7;line-height:1.65;margin:0 0 12px}
.hub-network{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font:10px var(--mono);letter-spacing:.04em;color:#92a3bd}
.hub-network a{color:#b9cadf}.hub-network a:hover{color:var(--accent)}
.hub-network>span:not(.network-dot){color:#46536d}
.hub-art{grid-column:2;grid-row:1 / span 2;position:relative;z-index:1;align-self:center;display:flex;align-items:center;flex-direction:column;justify-content:center;margin-top:30px;pointer-events:none}
.hub-art::before{content:"";position:absolute;inset:4% -5% 0;background:radial-gradient(ellipse,rgba(46,242,200,.08),transparent 62%);filter:blur(12px);z-index:-1}
.octopus{width:100%;height:auto;overflow:visible;mix-blend-mode:screen;filter:drop-shadow(0 0 20px #2ef2c811)}
.octo-caption{margin-top:26px;text-align:center;color:#5f7790;font:9px/1.9 var(--mono);letter-spacing:.16em}
.octo-caption b{color:#93a6bd;font:400 11px var(--sans);letter-spacing:0}
.eye-lids{display:none}
.is-awakening .eye-lids{display:block}
.is-awakening .eye-upper{animation:eye-upper 1.65s .16s cubic-bezier(.22,.72,.23,1) both}
.is-awakening .eye-lower{animation:eye-lower 1.65s .16s cubic-bezier(.22,.72,.23,1) both}
.is-awakening .eye-seam{animation:eye-seam 1.65s .16s ease both}
@keyframes eye-upper{0%,12%{transform:translateY(0)}100%{transform:translateY(-135px)}}
@keyframes eye-lower{0%,12%{transform:translateY(0)}100%{transform:translateY(135px)}}
@keyframes eye-seam{0%,12%{opacity:.8}45%,100%{opacity:0}}
svg.arms{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.arm-line{fill:none;stroke:var(--arm-color,#2ef2c8);stroke-width:1.15;opacity:.21;transition:opacity .25s,stroke-width .25s;stroke-linecap:round}
.arm-line.trace{stroke-dasharray:1;stroke-dashoffset:1;animation:arm-reveal 1.6s var(--arm-delay,.2s) cubic-bezier(.2,.65,.3,1) forwards}
.arm-line.active{opacity:.85;stroke-width:1.8;filter:drop-shadow(0 0 4px #2ef2c866)}
@keyframes arm-reveal{to{stroke-dashoffset:0}}
.tiles{grid-column:1;position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px;text-align:left}
.tile{--tile-tone:#2ef2c8;position:relative;min-width:0;display:flex;flex-direction:column;min-height:148px;padding:15px 15px 12px;border-radius:14px;background:linear-gradient(145deg,rgba(20,37,53,.92),rgba(8,15,29,.98));border:1px solid #203547;color:var(--fg);transition:transform .22s,border-color .22s,box-shadow .22s}
.tile:nth-child(n+4){--tile-tone:#a18bff}
.tile b{font-size:16px;line-height:1.3;font-weight:500;letter-spacing:-.02em;margin:10px 0 4px}
.tile-top{display:flex;justify-content:space-between;gap:6px;align-items:center}
.tile-icon{display:flex;color:var(--tile-tone)}
.service-icon{width:21px;height:21px;flex:none}
.tile-state{font:9px var(--mono);color:#8aa7ac;letter-spacing:.02em;white-space:nowrap}
.tile.live .tile-state::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:middle}
.tile-desc{color:#a3b1c7;font-size:12px;line-height:1.45;min-height:35px;max-width:175px}
.tile-foot{display:flex;align-items:end;justify-content:space-between;gap:4px;margin-top:auto;padding-top:12px}
.tile i{font:400 11px/1.4 var(--mono);color:var(--tile-tone);font-style:normal}
.tile-arrow{font:16px/1 var(--sans);color:#73859e;transition:transform .2s,color .2s}
.tile-port{position:absolute;top:-3px;left:calc(75% - 3px);width:5px;height:5px;background:#0b1b27;border:1px solid #427978;border-radius:50%;transition:background .2s,box-shadow .2s}
.arm-number{position:absolute;right:14px;bottom:40px;color:#42536d;font:9px var(--mono);opacity:.6}
a.tile:hover,a.tile:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tile-tone) 65%,transparent);box-shadow:0 8px 30px #02060f66,0 0 24px #2ef2c80a;color:var(--fg)}
a.tile:hover .tile-port,a.tile:focus-visible .tile-port{background:var(--tile-tone);box-shadow:0 0 12px var(--tile-tone)}
a.tile:hover .tile-arrow,a.tile:focus-visible .tile-arrow{color:var(--tile-tone);transform:translate(2px,-2px)}
.tile.pending{border-color:#393852}.tile.pending .tile-state{color:#c3adf0}
.tile.soon,.tile.classified,.tile.cooking{background:linear-gradient(145deg,rgba(20,24,43,.9),rgba(8,15,29,.96));border-style:dashed;border-color:#2b3049}
.tile.soon .tile-icon,.tile.classified .tile-icon,.tile.cooking .tile-icon{color:#8c82b5}
.tile.soon i,.tile.classified i,.tile.cooking i{color:#8d8ba7}
.tile.soon .tile-arrow,.tile.classified .tile-arrow,.tile.cooking .tile-arrow{display:none}
.hub-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:24px;padding:16px 0;border-bottom:1px solid var(--line);color:#778aa5;font-size:11px}
.hub-bottom a{color:#a1b2cb}.hub-bottom a span{display:inline-block;color:var(--accent);margin-left:9px}
.follow{margin:34px 0 0;padding:22px;border-radius:var(--r);text-align:center;background:linear-gradient(135deg,rgba(46,242,200,.06),rgba(123,92,255,.06));border:1px solid var(--line2)}
.follow div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px}
@media(min-width:1500px){.hub-scene{grid-template-columns:minmax(0,1fr) 310px;gap:34px 66px}.tile{min-height:166px;padding:17px}.tile b{font-size:18px}.tile-desc{font-size:12px}.tile i{font-size:11px}}
@media(max-width:1100px) and (min-width:901px){.hub-scene{grid-template-columns:minmax(0,1fr) 210px;gap:28px}.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 9px}.tile{padding:12px 10px;min-height:164px}.tile-state{font-size:8px}.tile b{font-size:15px}.tile-desc{font-size:10px}.tile i{font-size:9px}.hub h1{font-size:50px}.octo-caption{font-size:8px}}
@media(max-width:900px){
 main:has(.hub){padding-top:22px}
 .hub-scene{grid-template-columns:minmax(0,1fr) 120px;gap:28px 4px}
 .hub-text{grid-column:1 / -1;grid-row:1;padding-right:100px}
 .hub-text .kicker{font-size:8px;line-height:1.6;letter-spacing:.08em;max-width:220px;margin:0 0 13px}
 .hub-text .kicker .network-dot{display:none}
 .hub h1{font-size:clamp(30px,6.9vw,49px);line-height:1.06;margin:0 0 13px;letter-spacing:-.045em}
 .hub h1 em{display:inline-block;white-space:nowrap}
 .hub .lead{font-size:12px;line-height:1.7;max-width:310px;margin:0 0 14px}
 .hub-network{font-size:8px;gap:6px}
 .hub-art{grid-row:1;grid-column:2;align-self:start;margin:40px -4px 0 0;z-index:0}
 .octo-caption{display:none}
 .tiles{grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px}
 .tile{min-height:145px;padding:14px}.tile b{font-size:17px}.tile-desc{font-size:11px}.tile i{font-size:10px}
 .tile-state{font-size:9px}.hub-bottom{font-size:10px;margin-top:18px}
 .arm-number{bottom:39px}.tile-port{left:calc(82% - 3px)}
}
@media(max-width:360px){.hub-scene{grid-template-columns:minmax(0,1fr) 90px}.hub-text{padding-right:68px}.hub h1{font-size:27px}.hub-art{margin-top:48px}.tile{padding:12px;min-height:154px}.tile-desc{font-size:10px}.tile b{font-size:15px}.tile-state{font-size:8px}.tile i{font-size:9px}.hub-network{font-size:7px}}


/* scan */
form.search{display:flex;gap:8px;margin:6px 0 16px}
form.search input{flex:1;min-width:0;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line2);background:rgba(0,0,0,.3);color:var(--fg);font:14px var(--mono)}
form.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,242,200,.15)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cols>div{min-width:0}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.tag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--glass2);border:1px solid var(--line);color:var(--muted);font-size:11px}
.pager{display:flex;gap:16px;justify-content:space-between;margin:12px 0}
.features>div{padding:18px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn.off{opacity:.5;cursor:default}
ol.steps{color:#b8c6de;line-height:1.9}
p.lead{color:#b8c6de;font-size:17px;max-width:640px}

/* address labels by kind; a pool can bring its own colour (--tone) */
.tag{--tone:var(--muted)}
.tag.k-pool,.tag.k-miner,.tag.k-devfee{color:var(--tone);border-color:color-mix(in srgb,var(--tone) 45%,transparent);background:color-mix(in srgb,var(--tone) 12%,transparent)}
.tag.k-pool{--tone:#9fb3c8}
.tag.k-exchange,.tag.k-deposit{--tone:#f5b942;color:var(--tone);border-color:color-mix(in srgb,var(--tone) 45%,transparent)}
.tag.k-deposit{opacity:.8}
.tag.k-fund,.tag.k-team{--tone:#2ef2c8;color:var(--tone);border-color:color-mix(in srgb,var(--tone) 45%,transparent)}
.tag.k-protocol{--tone:#c792ea;color:var(--tone);border-color:color-mix(in srgb,var(--tone) 45%,transparent)}
.tag[title]{cursor:help}

/* tokens market */
.kicker{margin:22px 0 10px;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.trend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:168px;padding:14px;border-radius:var(--r);
  background:linear-gradient(160deg,rgba(46,242,200,.07),rgba(123,92,255,.05) 60%,transparent),var(--glass);border:1px solid var(--line);color:var(--fg);overflow:hidden}
a.tcard:hover{border-color:var(--line2);color:var(--fg);transform:translateY(-2px)}
.tcard{transition:transform .15s,border-color .15s}
.tcard>i{position:absolute;left:14px;top:12px;font:600 12px var(--mono);color:var(--muted);font-style:normal}
.tcard>em{align-self:flex-end;font:700 18px var(--mono);font-style:normal}
.tcard svg.spark{position:absolute;inset:auto 0 46px 0;width:100%;height:60px;opacity:.9}
.tcard .foot{display:flex;gap:10px;align-items:center;position:relative}
.tcard .foot span,.srow span{display:flex;flex-direction:column;min-width:0}
.tcard .foot small,.srow small{color:var(--muted);font-size:12px}
.tcard.empty{align-items:center;justify-content:center;text-align:center;border-style:dashed;background:transparent;color:var(--muted)}
.tcard.empty b{color:#b8c6de}.tcard.empty span{font-size:12px}
.mkt{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;gap:18px;margin-top:8px;align-items:start}
.mkt .kicker{margin-top:14px}
.srow{display:flex;gap:10px;align-items:center;padding:10px;margin-bottom:8px;border-radius:12px;background:var(--glass);border:1px solid var(--line);color:var(--fg)}
a.srow:hover{border-color:var(--line2);color:var(--fg)}
.srow b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow>i{margin-left:auto;font:700 13px var(--mono);font-style:normal;color:var(--accent)}
.srow.empty{border-style:dashed;background:transparent}
.srow .bar{width:44px}
.small{font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 12px}
.chips a{padding:7px 14px;border-radius:999px;color:var(--muted);background:var(--glass);border:1px solid var(--line);font-size:14px}
.chips a.on{color:#022019;background:var(--accent);border-color:var(--accent);font-weight:600}
.chips a:not(.on):hover{color:var(--fg);border-color:var(--line2)}
.tablewrap{overflow-x:auto}
.mkt-table th a{color:var(--muted)}.mkt-table th a.on{color:var(--fg)}
.mkt-table .tk{display:flex;gap:10px;align-items:center}
.mkt-table .tk span{display:flex;flex-direction:column}
.mkt-table .tk small{color:var(--muted);font-size:12px}
.mkt-table .img,.tcard .img,.srow .img{border-radius:10px;flex:none}
svg.spark polyline{fill:none;stroke-width:1.6;stroke-linejoin:round}
svg.spark.up polyline{stroke:var(--up)}svg.spark.down polyline{stroke:var(--down)}
.pager b{font:600 13px var(--mono);color:var(--muted)}
.pager span{color:var(--line2)}
@media (max-width:1300px){
  .mkt{grid-template-columns:minmax(0,1fr)}
  .mkt .side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mkt .side .kicker{grid-column:1/-1;margin-bottom:0}
  .mkt .side .srow{margin:0}
  .mkt>aside:last-child{order:3}
}
@media (max-width:760px){
  .trend{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .tcard{flex:0 0 72%;scroll-snap-align:start}
  .mkt .side{grid-template-columns:minmax(0,1fr)}
  .mkt-table .hide-s{display:none}
}
.mkt .pager{justify-content:center}
main:has(.mkt){max-width:1440px}
.mkt-table .bar{width:56px}

/* homepage: short sections previewing each menu page */
.peeks{display:grid;gap:18px;margin-top:34px}
.peek{padding:18px 20px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.peek .section-head{margin:0}
.peek h2{margin:0;font-size:22px}
.peek>p.muted{margin:4px 0 14px}
.peek .stats{margin:0 0 12px}
.peek .features{margin:0 0 12px}
.peek .launch{margin:0}
@media (max-width:760px){
  .peek{padding:14px}
}
.peeks{grid-template-columns:minmax(0,1fr)}
.peek{min-width:0;overflow-x:auto}
@media (max-width:760px){.peek .features{grid-template-columns:minmax(0,1fr)}.peek table.list .tag{display:none}}
@media (max-width:760px){.peek .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* Service wayfinding and shared interaction details. */
:root{--faint:#7d8da8}
.muted{color:var(--muted)}
main{min-width:0}main>*{min-width:0}
header{gap:12px 20px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.skip-link{position:fixed;top:8px;left:16px;z-index:100;padding:10px 18px;background:var(--accent);color:#022019;border-radius:8px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.service-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:0 0 17px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.breadcrumbs{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--faint)}
.breadcrumbs>a{display:flex;align-items:center;gap:8px;color:var(--muted)}
.breadcrumbs>a:last-child{color:var(--fg)}.breadcrumbs .service-icon{width:17px;height:17px;color:var(--accent)}
.service-bar nav{gap:6px;flex-wrap:wrap}.service-bar nav a{font-size:11px;padding:6px 10px}
.service-bar nav a[aria-current="page"]{background:var(--glass2);color:var(--accent)}
main>h1{margin-bottom:12px;font-size:clamp(30px,4vw,43px);letter-spacing:-.04em}
main>p.lead{margin-top:0;color:#9eafc8;font-size:15px;line-height:1.75}
.stats>div{background:linear-gradient(140deg,#111e2b99,#0a102099);border-radius:12px}
.stats b{font-weight:500}
.list a:focus-visible{outline-offset:2px}
.token-head{padding:6px 0 10px}.token-head>div{min-width:0}.token-head p{max-width:720px;overflow-wrap:anywhere}
.ca{max-width:100%;overflow-wrap:anywhere}.ca code{min-width:0;white-space:normal}.ca a{min-width:0;overflow-wrap:anywhere}
.nft>div{min-width:0;flex:1 1 280px}.nftbig{flex:0 1 360px;width:360px;object-fit:contain}
.sale{padding:16px;border:1px solid #2ef2c83b;background:#2ef2c809;border-radius:12px}
.empty-state{padding:30px 16px;text-align:center;color:var(--muted)}
.empty-state b{display:block;color:var(--fg);font:500 15px var(--sans);margin-bottom:5px}
.copy-ok{color:var(--accent);border-color:var(--accent)}
#network-overview{scroll-margin-top:100px}
footer{color:#8293ab;line-height:1.8}
@media(max-width:640px){
 header{padding:10px 16px;gap:8px 10px}.brand{font-size:17px}.brand img{width:28px;height:28px}
 header>nav{order:3;width:100%;gap:2px;flex-wrap:nowrap}header>nav a{padding:6px 10px;font-size:12px}
 .price{font-size:10px;padding:5px 8px}.price b{font-size:11px}
 main{padding-top:18px}.service-bar{margin-bottom:20px;gap:10px;padding-bottom:12px}.service-bar nav{width:100%;order:2}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stats>div{padding:12px}.stats b{font-size:14px}.stats span{font-size:10px}
 .field code{max-width:100%;overflow-wrap:anywhere}.step{padding:16px}form.search{gap:6px}form.search input{font-size:11px;padding:11px 10px}form.search button{font-size:12px;padding:8px 12px}
 footer{font-size:11px}.token-head .img{width:56px;height:56px}.peeks{margin-top:24px}.peek h2{font-size:20px}.peek .section-head>a{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .eye-lids{display:none!important}.arm-line.trace{stroke-dashoffset:0}
}
body:has(.hub)>header{padding-inline:max(16px,calc((100vw - 1408px)/2))}
@media(max-width:900px){.hub h1{font-size:clamp(26px,6.5vw,43px)}.hub-art{width:clamp(100px,20vw,160px);justify-self:end}}
:root{color-scheme:dark}
*{scrollbar-width:thin;scrollbar-color:#35445b transparent}
::-webkit-scrollbar{width:6px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#35445b;border-radius:9px}
.is-waiting .eye-lids{display:block}
@media(max-width:360px){.hub-art{margin-top:92px;width:86px}.hub .lead{padding-right:24px}}
.feed{margin-top:28px}

/* hero: light pulses travelling from the octopus along each arm into its tile */
svg.arms .arm-pulse{fill:none;stroke:var(--arm-color);stroke-width:3;stroke-linecap:round;stroke-dasharray:.035 .965;
  stroke-dashoffset:1;opacity:.85;filter:drop-shadow(0 0 5px var(--arm-color));
  animation:arm-run var(--pulse-dur,3s) linear infinite;animation-delay:var(--pulse-delay,0s)}
svg.arms .arm-pulse.live{stroke-width:3.5;opacity:1}
svg.arms .arm-pulse.far{opacity:.35;stroke-width:2}
@keyframes arm-run{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){svg.arms .arm-pulse{display:none}}

/* two tables side by side (Scan): each column keeps its share, long address labels shorten */
.cols{grid-template-columns:minmax(0,1fr);gap:28px}
.cols>div{min-width:0;overflow-x:auto}
table.list .tag{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
@media (max-width:1240px){.cols{grid-template-columns:minmax(0,1fr)}}