*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:150px;-webkit-text-size-adjust:100%}
body{background:var(--c-void);color:var(--c-text);font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.4;min-height:100vh;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--c-green-hi);outline-offset:2px}
main,.foot,.top-row{max-width:1400px;margin-inline:auto}
main{padding:0 24px}

/* backdrop: 22px graph sheet, same step as the reference */
.backdrop{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--c-void)}
.backdrop-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--c-green-hi) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c-green-hi) 6%,transparent) 1px,transparent 1px);background-size:var(--grid-step) var(--grid-step);-webkit-mask-image:radial-gradient(circle at center,var(--c-void) 35%,transparent 100%);mask-image:radial-gradient(circle at center,var(--c-void) 35%,transparent 100%)}
.backdrop-wash{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--c-green-hi) 4%,transparent),color-mix(in srgb,var(--c-green-hi) 1%,transparent) 35%,transparent)}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:linear-gradient(90deg,var(--c-green-dim),var(--c-green-hi));transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--glow)}

/* sticky top: brand, socials, contract slot */
.top{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--c-void) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;padding:6px 24px;min-height:56px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand-name{color:var(--c-green-hi);letter-spacing:0.4em;font-size:1rem;font-weight:bold;text-shadow:0 0 10px var(--glow)}
.social{display:flex;gap:8px;margin-left:auto}
.soc{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-soft);color:var(--c-green);text-decoration:none;transition:background var(--t-hover) var(--ease-out-quad),color var(--t-hover) var(--ease-out-quad),transform var(--t-hover) var(--ease-out-quad)}
.soc svg{width:20px;height:20px;fill:currentColor}
a.soc:hover{background:var(--wash);color:var(--c-green-hi);transform:scale(1.03)}
.soc.inert{color:var(--c-muted);border-style:dashed;cursor:not-allowed;opacity:.7}

.ca{display:flex;align-items:center;gap:16px;width:100%;max-width:1400px;margin:0 auto;padding:8px 24px 10px;text-align:left}
.ca-label{color:var(--c-muted);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;flex-shrink:0}
.ca-value{flex:1;min-width:0;color:var(--c-green-hi);font-weight:bold;font-size:clamp(1rem,4.4vw,1.6rem);letter-spacing:.02em;overflow-wrap:anywhere;word-break:break-all;line-height:1.2;text-shadow:0 0 12px var(--glow)}
.ca-fb{flex-shrink:0;border:1px solid var(--line);padding:0 14px;min-height:44px;min-width:88px;display:grid;place-items:center;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--c-green);transition:background var(--t-hover) var(--ease-out-quad),color var(--t-hover) var(--ease-out-quad)}
button.ca{cursor:pointer;transition:background var(--t-hover) var(--ease-out-quad)}
button.ca:hover{background:var(--wash)}
button.ca.copied .ca-fb{background:var(--c-green-hi);color:var(--c-void)}
.ca.inert{min-height:60px}
.ca-pending{color:var(--c-muted);font-size:clamp(.95rem,3.4vw,1.5rem);letter-spacing:.3em;text-transform:uppercase;border:1px dashed var(--line-soft);padding:6px 14px}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.1fr 0.9fr;align-items:center;gap:24px;min-height:620px;padding:56px 0 40px;isolation:isolate}
.layer{will-change:transform}
.layer-mesh,.layer-grid,.layer-glyphs{position:absolute;inset:-40px -24px;pointer-events:none;z-index:-1}
.layer-mesh i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.layer-mesh i:nth-child(1){width:46%;height:60%;left:4%;top:6%;background:radial-gradient(circle,var(--c-green-dim),transparent 70%)}
.layer-mesh i:nth-child(2){width:40%;height:56%;right:2%;top:12%;background:radial-gradient(circle,var(--c-green-deep),transparent 70%);animation-duration:28s;animation-delay:-8s}
.layer-mesh i:nth-child(3){width:34%;height:40%;left:36%;bottom:0;background:radial-gradient(circle,color-mix(in srgb,var(--c-green-hi) 55%,transparent),transparent 70%);opacity:.22;animation-duration:19s;animation-delay:-4s}
@keyframes drift{0%{transform:translate3d(-4%,2%,0) scale(1)}50%{transform:translate3d(5%,-4%,0) scale(1.12)}100%{transform:translate3d(-2%,5%,0) scale(.95)}}
.layer-grid{background-image:linear-gradient(var(--c-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--c-grid-line) 1px,transparent 1px);background-size:88px 88px;opacity:.45;-webkit-mask-image:radial-gradient(ellipse at 60% 50%,var(--c-void) 20%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 50%,var(--c-void) 20%,transparent 75%)}
.layer-glyphs b{position:absolute;width:10px;height:10px;background:var(--c-green);box-shadow:0 0 14px var(--glow);opacity:.55;animation:bob 6s ease-in-out infinite alternate}
.layer-glyphs b:nth-child(1){left:8%;top:18%}.layer-glyphs b:nth-child(2){left:44%;top:10%;width:6px;height:6px;animation-delay:-2s}
.layer-glyphs b:nth-child(3){left:90%;top:30%;animation-delay:-4s}.layer-glyphs b:nth-child(4){left:70%;top:84%;width:6px;height:6px;animation-delay:-1s}
.layer-glyphs b:nth-child(5){left:22%;top:78%;animation-delay:-3s}.layer-glyphs b:nth-child(6){left:56%;top:52%;width:4px;height:4px;animation-delay:-5s}
@keyframes bob{from{transform:translateY(-8px)}to{transform:translateY(10px)}}
.hero-copy{position:relative;z-index:1}
.hero-art{display:grid;place-items:center;position:relative}
.skull{width:min(100%,560px);height:auto;aspect-ratio:1;filter:drop-shadow(0 0 28px var(--glow));animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{filter:drop-shadow(0 0 14px var(--glow))}to{filter:drop-shadow(0 0 36px var(--glow))}}
h1{font-size:clamp(2.6rem,9vw,5.6rem);line-height:1;letter-spacing:.14em;color:var(--c-green-hi);text-shadow:0 0 22px var(--glow);margin:18px 0 12px}
.tagline{font-size:clamp(1rem,2.4vw,1.35rem);color:var(--c-text);letter-spacing:.04em;margin-bottom:12px}
.lead{max-width:560px;color:var(--c-muted);font-size:1rem;margin-bottom:22px}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:0 16px;min-height:44px;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--c-green);background:var(--wash)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--c-green-hi);box-shadow:0 0 0 0 var(--glow);animation:pulse 1.6s ease-out infinite}
.pill[data-state="sync"] .dot{background:var(--c-green-dim)}
.pill[data-state="stale"] .dot,.pill[data-state="down"] .dot{background:var(--c-muted);animation:none;box-shadow:none}
.pill[data-state="stale"],.pill[data-state="down"]{color:var(--c-muted);border-color:var(--line-soft)}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}80%,100%{box-shadow:0 0 0 12px transparent}}

.nav{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:4px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);max-width:560px}
.prompt{color:var(--c-green)}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;text-decoration:none;font-weight:bold;color:var(--c-text);transition:color var(--t-hover) var(--ease-out-quad),background var(--t-hover) var(--ease-out-quad),transform var(--t-hover) var(--ease-out-quad)}
.nav-link:hover{color:var(--c-green-hi);background:var(--wash);transform:scale(1.03)}

/* ticker */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);margin:0 0 24px;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--c-bg),transparent)}.ticker::after{right:0;background:linear-gradient(270deg,var(--c-bg),transparent)}
.ticker-track{display:flex;width:max-content;animation:marquee var(--tick-dur,60s) linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:10px;padding:0 22px;min-height:44px;border-right:1px solid var(--line-soft);white-space:nowrap;font-size:.9rem}
.tick .sym{color:var(--c-green-hi);font-weight:bold}.tick .chg.up{color:var(--c-green)}.tick .chg.dn{color:var(--c-muted)}
.tick.sk{width:180px}

/* terminal window (measured off reference: 1px dim border, dark header strip) */
.term,.panel,.explorer{border:1px solid var(--line);background:var(--panel);margin-bottom:24px}
.term-head,.panel-head,.side-head,.content-head{background:var(--panel-2);color:var(--c-green);padding:4px 10px;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.term-body{padding:10px;font-size:.85rem}
.log{margin-bottom:2px}.mark{color:var(--c-green)}
.log .v{color:var(--c-green-hi)}.log .pending{color:var(--c-muted)}
.cursor{margin-left:5px;color:var(--c-green-hi);animation:blink .8s linear infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:0}}

/* spotlight */
.spot{position:relative;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t-hover) var(--ease-out-quad);background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 70%)}
.spot:hover::before{opacity:1}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:32px}
.tile{border:1px solid var(--line);background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tile-k{color:var(--c-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em}
.tile-v{color:var(--c-green-hi);font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:bold;text-shadow:0 0 12px var(--glow);overflow-wrap:anywhere}
.tile-s{color:var(--c-muted);font-size:.8rem}

section{margin-bottom:40px}
h2{color:var(--c-text);font-size:1.1rem;margin-bottom:12px;border-left:3px solid var(--c-green-hi);padding-left:8px;text-transform:uppercase;letter-spacing:.12em}
h3{color:var(--c-green-hi);font-size:1.05rem;margin-bottom:8px}
p{margin-bottom:.8rem}
.section-desc{color:var(--c-muted);font-size:.9rem;max-width:760px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);background:var(--panel);padding:18px}
.card p{margin:0;color:var(--c-text)}
.phase{display:inline-block;color:var(--c-muted);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}

/* market board */
.panel-head{padding:6px 10px;gap:12px;flex-wrap:wrap}
.tabs{display:flex;gap:4px}
.tab{min-height:44px;min-width:44px;padding:0 16px;border:1px solid transparent;color:var(--c-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;transition:color var(--t-hover) var(--ease-out-quad),background var(--t-hover) var(--ease-out-quad)}
.tab:hover{color:var(--c-green-hi);background:var(--wash)}
.tab[aria-selected="true"]{color:var(--c-green-hi);border-color:var(--line);background:var(--wash)}
.panel-note{color:var(--c-muted);font-size:.8rem}
.thead,.row{display:grid;grid-template-columns:44px minmax(180px,2.2fr) 1.2fr 1fr 1.3fr 1.3fr 52px;gap:12px;align-items:center;padding:0 14px}
.thead{color:var(--c-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;padding-top:10px;padding-bottom:6px;border-bottom:1px dotted var(--line-soft)}
.rows{list-style:none}
.row{min-height:64px;border-bottom:1px dotted var(--line-soft);position:relative;overflow:hidden}
.row.sk .bar{height:14px;background:linear-gradient(90deg,var(--panel-2),color-mix(in srgb,var(--c-green-dim) 35%,var(--panel-2)),var(--panel-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.row.sk .tile-logo{border-color:var(--line-soft)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.row.in{animation:rowin 520ms var(--ease-out-quad) both;animation-delay:calc(var(--i,0)*60ms)}
@keyframes rowin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.row::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t-hover) var(--ease-out-quad);background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 70%)}
.row:hover::before{opacity:1}
.c{min-width:0;position:relative}
.c-rank{color:var(--c-muted)}
.tok{display:flex;align-items:center;gap:12px;min-width:0}
.tile-logo{width:36px;height:36px;flex-shrink:0;border:1px solid var(--line);background:var(--panel-2);display:grid;place-items:center;color:var(--c-green-hi);font-weight:bold;overflow:hidden}
.tile-logo img{width:100%;height:100%;object-fit:cover}
.tok-t{min-width:0}.tok-sym{color:var(--c-green-hi);font-weight:bold;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok-name{color:var(--c-muted);font-size:.78rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num{font-variant-numeric:tabular-nums;transition:background 600ms var(--ease-out-quad)}
.num.fu{background:var(--flash)}.num.fd{background:var(--flash-dn)}
.chg.up{color:var(--c-green)}.chg.dn{color:var(--c-muted)}
.copy{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-soft);color:var(--c-green);transition:background var(--t-hover) var(--ease-out-quad),color var(--t-hover) var(--ease-out-quad)}
.copy:hover{background:var(--wash);color:var(--c-green-hi)}
.copy.copied{background:var(--c-green-hi);color:var(--c-void)}
.copy svg{width:18px;height:18px;fill:currentColor}
.feed-err{padding:12px 14px;color:var(--c-muted);border-top:1px dotted var(--line-soft)}.feed-err .dash{color:var(--c-green)}

/* explorer (sidebar tree + content, as on the reference) */
.explorer{display:flex;min-height:300px}
.side{width:280px;min-width:240px;flex-shrink:0;border-right:1px solid var(--line);background:var(--c-bg)}
.tree{list-style:none;padding:8px 0}
.tree-item{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px;text-align:left;white-space:nowrap;transition:background var(--t-hover) var(--ease-out-quad),color var(--t-hover) var(--ease-out-quad)}
.tree-item:hover{background:var(--c-grid-faint);color:var(--c-green-hi)}
.tree-item[aria-selected="true"]{background:var(--c-grid);color:var(--c-green-hi)}
.tree-item .ic{color:var(--c-green-dim);width:14px;text-align:center}
.tree-item .st{margin-left:auto;font-size:.7rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.1em}
.tree-item[data-state="stated"] .st{color:var(--c-green)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.content-head .path{color:var(--c-text)}
.content-body{padding:20px;flex:1}
.rec h3{margin-bottom:12px}
.rec dl{display:grid;grid-template-columns:120px 1fr;gap:8px 16px}
.rec dt{color:var(--c-muted);text-transform:uppercase;font-size:.75rem;letter-spacing:.12em}
.rec dd{overflow-wrap:anywhere;color:var(--c-text)}
.rec .pend{color:var(--c-muted);letter-spacing:.2em;text-transform:uppercase}
.rec[hidden]{display:none}

.foot{padding:24px;border-top:1px dashed var(--line-soft);color:var(--c-muted);font-size:.8rem;margin-top:24px}
.foot-row{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-bottom:8px}
.foot-brand{color:var(--c-green);letter-spacing:.3em}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--c-green-hi);color:var(--c-void);padding:12px 18px;font-weight:bold;opacity:0;pointer-events:none;transition:opacity var(--t-hover) var(--ease-out-quad),transform var(--t-hover) var(--ease-out-quad);z-index:130;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* reveal: only hidden when JS is alive and motion is allowed */
html.js:not(.rm) [data-reveal]:not(.shown){opacity:0;transform:translateY(24px)}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0;padding:32px 0}
  .hero-art{order:-1}.skull{width:min(70%,360px)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .cards,.cards.four{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  main{padding:0 16px}
  .top-row{padding:6px 16px}.ca{padding:6px 16px 10px;flex-wrap:wrap;gap:8px 12px}
  .ca-label{width:100%}.ca-value{flex:1 1 60%}
  .thead{display:none}
  .row{grid-template-columns:1fr 44px;grid-template-areas:"t cp" "p ch" "v l";gap:6px 12px;padding:10px 14px;min-height:0}
  .c-rank{display:none}.c-tok{grid-area:t}.c-copy{grid-area:cp}.c-price{grid-area:p}.c-chg{grid-area:ch;text-align:right}.c-vol{grid-area:v}.c-liq{grid-area:l;text-align:right}
  .c-price::before,.c-vol::before,.c-liq::before,.c-chg::before{content:attr(data-l);color:var(--c-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-right:8px}
  .explorer{flex-direction:column}.side{width:100%;border-right:0;border-bottom:1px solid var(--line)}
  .rec dl{grid-template-columns:1fr}
  .cards,.cards.four{grid-template-columns:1fr}
  .brand-name{letter-spacing:.25em;font-size:.9rem}
}

/* reduced motion: everything lands instantly, nothing moves */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .ticker{overflow-x:auto}.ticker-track{transform:none!important}
}
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}