:root{
  --bg:#0b1020;
  --panel:#141a30;
  --panel2:#1b2240;
  --ink:#e6e9f5;
  --mute:#9aa3c7;
  --accent:#6ee7b7;
  --accent2:#7c9cff;
  --warn:#ffb86b;
  --err:#ff7777;
  --ok:#6ee7b7;
  --line:#27305a;
  --code:#0c1228;
  --tile:#1a213f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
code,pre,.digest{font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:var(--accent2)}
h1{margin:0;font-size:22px}
h2{margin:0 0 12px;font-size:20px;color:var(--accent)}
h3{margin:0 0 8px;font-size:16px}

/* topbar */
.topbar{
  position:sticky;top:0;z-index:30;background:linear-gradient(180deg,#0b1020,#0b1020dd);
  border-bottom:1px solid var(--line);padding:14px 24px;display:flex;flex-direction:column;gap:10px
}
.brand{display:flex;align-items:center;gap:14px}
.brand .logo{font-size:32px}
.subtitle{margin:2px 0 0;color:var(--mute);font-size:13px}
.sessions{display:flex;flex-wrap:wrap;gap:6px}
.sessions a{
  text-decoration:none;background:var(--panel2);padding:6px 10px;border-radius:999px;
  color:var(--ink);font-size:12px;border:1px solid var(--line)
}
.sessions a:hover{background:#27315e;color:var(--accent)}

main{max-width:1200px;margin:24px auto;padding:0 20px;display:flex;flex-direction:column;gap:24px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.hero h2{font-size:22px}
.hero p{color:var(--mute)}
.grid.roadmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.tile{
  background:var(--tile);border:1px solid var(--line);border-radius:12px;
  padding:14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px;
  transition:transform .15s,border-color .15s
}
.tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.tile b{color:var(--accent)}
.tile span{color:var(--mute);font-size:13px}

.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.row{grid-template-columns:1fr}}

.col{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
label.mt{margin-top:10px}
textarea,input,select{
  background:var(--code);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font:13px ui-monospace,monospace;width:100%;
}
input[type=range]{padding:0}
button{
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:8px 14px;cursor:pointer;font-size:13px
}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:#062019;border-color:var(--accent);font-weight:600}
button.primary:hover{filter:brightness(1.05)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.controls label{display:flex;align-items:center;gap:8px;text-transform:none;color:var(--ink);font-size:13px}
.controls input[type=number]{width:80px}

.digest{
  display:block;background:var(--code);padding:10px 12px;border-radius:8px;
  border:1px solid var(--line);word-break:break-all;color:#aef0c8;min-height:38px
}
.digest.small{font-size:12px;min-height:30px}
.meta{color:var(--mute);font-size:12px}
.note{color:var(--mute);font-size:13px;font-style:italic;margin-top:10px}
.result{margin-top:8px;font-size:13px}
.result.ok{color:var(--ok)}
.result.bad{color:var(--err)}
.warn{color:var(--warn);font-size:11px}

/* hash bit diff */
.bitstrip{display:flex;flex-wrap:wrap;gap:1px;padding:6px;background:var(--code);border-radius:6px;border:1px solid var(--line)}
.bitstrip .bit{width:9px;height:14px;background:#2b3360;border-radius:1px}
.bitstrip .bit.diff{background:var(--warn)}

/* merkle tree */
.tree{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;max-height:340px}
.tree .level{display:flex;justify-content:center;gap:8px;margin:6px 0}
.tree .node{
  font:11px ui-monospace,monospace;background:var(--panel2);padding:6px 8px;border-radius:6px;
  border:1px solid var(--line);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aef0c8
}
.tree .node.root{border-color:var(--accent);color:var(--accent);font-weight:600}
.tree .node.leaf{border-color:var(--accent2);color:#cdd9ff}

/* chain */
.chain{display:flex;gap:10px;overflow-x:auto;padding:8px 2px}
.block{
  min-width:240px;max-width:240px;background:var(--code);border:1px solid var(--line);
  border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;position:relative
}
.block.invalid{border-color:var(--err);background:#3a1822}
.block.valid{border-left:4px solid var(--ok)}
.block::after{
  content:"⛓";position:absolute;right:-15px;top:50%;transform:translateY(-50%);
  color:var(--mute);font-size:18px;pointer-events:none
}
.block:last-child::after{display:none}
.block label{font-size:10px}
.block textarea{font-size:11px;min-height:50px}
.block .digest{font-size:10px;min-height:30px;padding:6px 8px}
.block .hdr{display:flex;justify-content:space-between;align-items:center}
.block .badge{font-size:10px;padding:2px 6px;border-radius:10px;background:var(--panel2);color:var(--mute)}
.block.invalid .badge{background:var(--err);color:#fff}
.block.valid .badge{background:var(--ok);color:#062019}
.block .mine{font-size:11px;padding:4px 8px;align-self:flex-start}

/* mining */
.stats{display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:13px}
.stats b{color:var(--accent)}

/* UTXO */
.utxo-set{display:flex;gap:8px;flex-wrap:wrap;background:var(--code);border:1px solid var(--line);padding:10px;border-radius:8px;min-height:60px}
.utxo{
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  cursor:pointer;font-size:12px;color:var(--ink);min-width:90px;text-align:center
}
.utxo.selected{border-color:var(--accent);background:#1a3a30;color:var(--accent)}
.utxo .amt{font-weight:600;display:block;font-size:14px}
.utxo .id{font-family:monospace;color:var(--mute);font-size:10px}
.tx-builder{background:var(--code);border:1px solid var(--line);padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.log{
  background:var(--code);border:1px solid var(--line);border-radius:8px;padding:10px;
  font:11px ui-monospace,monospace;max-height:200px;overflow:auto;color:#aef0c8;white-space:pre-wrap
}

/* forks */
.timeline{display:flex;gap:0;overflow-x:auto;padding:18px 0 10px;border-bottom:2px solid var(--line);position:relative;margin-bottom:16px}
.fork{
  display:flex;flex-direction:column;align-items:center;min-width:160px;cursor:pointer;text-align:center;
  padding:8px;border-radius:8px;transition:background .15s
}
.fork:hover{background:var(--panel2)}
.fork.active{background:var(--panel2);outline:1px solid var(--accent)}
.fork .dot{width:14px;height:14px;border-radius:50%;background:var(--accent2);border:2px solid var(--bg);margin-bottom:4px}
.fork.hard .dot{background:var(--err)}
.fork.soft .dot{background:var(--accent)}
.fork .yr{font-weight:600;color:var(--ink)}
.fork .name{font-size:11px;color:var(--mute)}
.detail{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:14px;min-height:80px;color:var(--ink)}
.detail h4{margin:0 0 6px;color:var(--accent)}
.detail .tag{display:inline-block;padding:2px 8px;border-radius:10px;background:var(--panel2);font-size:11px;margin-right:6px}
.detail .tag.hard{background:var(--err);color:#fff}
.detail .tag.soft{background:var(--ok);color:#062019}

/* accounts */
.accounts{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.account{flex:1;min-width:240px;background:var(--code);border:1px solid var(--line);border-radius:10px;padding:12px}
.account.eoa{border-left:4px solid var(--accent2)}
.account.contract{border-left:4px solid var(--accent)}
.account h4{margin:0 0 6px;color:var(--accent)}
.account .row2{display:flex;justify-content:space-between;font-size:12px;padding:2px 0}
.account .row2 b{color:var(--mute);font-weight:500}

/* gas */
.kpi{margin:4px 0;font-size:14px}
.kpi b{color:var(--mute);font-weight:500}
.kpi.big{font-size:20px;color:var(--accent);margin-top:8px}
.split{display:flex;gap:10px;margin-top:10px;font-size:12px;color:var(--mute)}
.split div{flex:1;background:var(--code);border:1px solid var(--line);border-radius:6px;padding:8px}

/* evm */
pre.evm{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:12px;overflow:auto;max-height:320px;margin:0}
pre.evm .pc{background:var(--accent);color:#062019;border-radius:3px;padding:0 4px}
.stack{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:10px;min-height:120px;display:flex;flex-direction:column-reverse;gap:4px}
.stack .frame{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font:12px ui-monospace,monospace;text-align:right}
.stack .frame.new{border-color:var(--accent);color:var(--accent)}

/* solidity */
pre.sol{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:12px;overflow:auto;max-height:340px;margin:0}
pre.sol code{display:block}

/* consensus bar */
.bar{background:var(--code);border:1px solid var(--line);border-radius:999px;height:14px;overflow:hidden;margin:8px 0 4px}
.bar div{background:linear-gradient(90deg,var(--accent),var(--warn));height:100%}

/* NFTs */
.nft-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}
.nft{background:var(--code);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.nft-art{height:140px;display:flex;align-items:center;justify-content:center;color:#062019;font-weight:700;font-size:28px;
  background-image:linear-gradient(135deg,rgba(255,255,255,.25),rgba(0,0,0,.25))}
.nft-meta{padding:10px;font-size:12px}
.nft .btnrow{padding:0 10px 10px}
.nft .btnrow select,.nft .btnrow button{font-size:12px;padding:4px 8px}

/* rollups */
.rollup-pending,.rollup-batches{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:10px;min-height:120px;display:flex;flex-direction:column;gap:6px}
.pendtx{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font:11px ui-monospace,monospace;color:#cdd9ff}
.batch{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12px}
.batch.zk{border-left:4px solid var(--accent)}
.batch.op{border-left:4px solid var(--warn)}
.batch .meta{font-size:10px;margin-top:4px}

/* halving */
.halving-table{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:8px;font:12px ui-monospace,monospace}
.halving-table .row2{display:grid;grid-template-columns:1fr 2fr 2fr 2fr;gap:6px;padding:3px 4px}
.halving-table .row2.head{color:var(--accent);border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:6px}

footer{max-width:1200px;margin:30px auto;padding:20px;color:var(--mute);font-size:12px;border-top:1px solid var(--line);text-align:center}