/* Basic layout and playful visuals */
:root{
  --bg:#0b0f1a; --ink:#e6f0ff; --muted:#a9b8d0; --brand:#5fe1ff; --accent:#7f5af0;
  --card:#121c2b; --good:#34d399; --bad:#f97316; --warn:#eab308;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 700px at -10% -10%, #14203a, transparent),
    radial-gradient(1400px 800px at 120% 10%, #241a43, transparent),
    var(--bg);
  color:var(--ink); line-height:1.7; font-size:16px;
}
.container{max-width:980px; margin:0 auto; padding:0 16px}
.site-header{position:sticky; top:0; z-index:10; background:rgba(11,15,26,.6); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px)}
h1{margin:10px 0 4px; font-size:26px}
.tagline{margin:0 0 12px; color:var(--muted)}
.tabs{display:flex; gap:8px; margin:16px 0 8px}
.tab{padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--ink); cursor:pointer}
.tab.active{background:linear-gradient(90deg, var(--brand), var(--accent)); color:#08121e; font-weight:700; border:none}
.panel{display:none; background:var(--card); padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,.08); margin-bottom:16px}
.panel.active{display:block}
.panel-head h2{margin:0 0 6px; font-size:20px}
.controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 8px}
.controls label{display:flex; align-items:center; gap:6px; background:#0f1a2b; padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08)}
.controls input[type=range]{width:160px}
button{padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--ink); cursor:pointer}
button.primary{background:linear-gradient(90deg, var(--brand), var(--accent)); color:#08121e; font-weight:700; border:none}
.miners,.validators,.nodes{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.card{background:#0e1a2a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px}
.miner,.validator{padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#0b1628}
.miner-head,.validator-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.badge{font-size:12px; color:#09121e; background:var(--brand); padding:2px 6px; border-radius:8px}
.hashrate,.stake{display:flex; align-items:center; gap:6px}
.progress{height:8px; background:#0b1321; border:1px solid rgba(255,255,255,.08); border-radius:99px; overflow:hidden}
.progress > div{height:100%; width:0%; background:linear-gradient(90deg, var(--brand), var(--accent)); transition:width .15s linear}
.win{outline:2px solid var(--good)}
.nodes .node{display:flex; gap:8px; align-items:center; background:#0b1628; border:1px solid rgba(255,255,255,.08); padding:8px 10px; border-radius:10px}
.node .dot{width:12px; height:12px; border-radius:50%; background:var(--good)}
.node.bad .dot{background:var(--bad)}
.node .vote{margin-left:auto; font-weight:700}
.result{margin:8px 0; padding:10px; border-radius:10px; background:#0b1628; border:1px solid rgba(255,255,255,.08)}
.site-footer{margin:24px 0 32px; color:var(--muted); text-align:center}
.explain details{margin-top:8px}
@media (max-width: 700px){
  .miners,.validators,.nodes{grid-template-columns:1fr}
}