:root{
  --void:#050b08;
  --slime:#3dff8f;
  --slime-dim:#149250;
  --ink:#d9f0e3;
  --ink-dim:#7fa290;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
  border-bottom:1px solid #173026;
}
header h1{margin:0;font-size:18px;}
.brand-logo{
  width:34px;
  height:34px;
  filter:drop-shadow(0 0 6px rgba(61,255,143,.65)) drop-shadow(0 0 16px rgba(61,255,143,.4));
}
.chain-tag{
  font-size:11px;
  color:var(--slime);
  border:1px solid var(--slime-dim);
  border-radius:6px;
  padding:3px 8px;
}
.nav-link{
  margin-left:auto;
  font-size:12px;
  color:var(--ink-dim);
  text-decoration:none;
}
.nav-link:hover{ color:var(--slime); }
main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 20px;
  gap:28px;
}
#blob-wrap{width:180px;height:180px;position:relative;}
#blob{
  position:absolute;inset:0;
  background:radial-gradient(circle at 35% 30%, #7dffb8, var(--slime) 45%, var(--slime-dim) 100%);
  border-radius:45% 55% 60% 40% / 50% 45% 55% 50%;
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.eye{position:absolute;width:14px;height:18px;background:#04140a;border-radius:50%;top:38%;}
.eye.l{left:36%;} .eye.r{left:56%;}

#state-panel{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;}
.stat{
  border:1px solid #173026;border-radius:8px;padding:12px 18px;
  display:flex;flex-direction:column;gap:4px;min-width:140px;text-align:center;
}
.stat span{font-size:10px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:1px;}
.stat b{font-size:16px;color:var(--slime);}

#thought-feed{max-width:560px;text-align:center;}
#thought-feed h3{font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:1px;}
#thought{font-size:14px;line-height:1.6;}
.view-coin-link{
  display:inline-block;
  margin-top:12px;
  font-size:12px;
  color:var(--slime);
  text-decoration:none;
  border:1px solid var(--slime-dim);
  border-radius:6px;
  padding:5px 12px;
}
.view-coin-link:hover{
  background:var(--slime-dim);
  color:var(--void);
}

footer{
  text-align:center;font-size:10.5px;color:#4d6459;padding:16px;
  border-top:1px solid #173026;
}