:root{ --bg:#050607; --fg:#bdfcc9; --muted:#6ea380; --accent:#98ffb3; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#050607; color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
  overflow:hidden;
}
#viewport{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(1200px 700px at 18% 0%, #0b0e10 0%, #07090b 40%, #050607 100%);
}

/* terminal */
#terminal{
  width:100%; max-width:900px; max-height:80vh; overflow:auto;
  text-align:center; padding:0 6px;
  filter: drop-shadow(0 0 16px rgba(152,255,179,.07));
}
.line{white-space:pre-wrap; line-height:1.55; margin:0 0 .3rem 0;
  text-shadow:0 0 6px rgba(152,255,179,.18), 0 0 24px rgba(152,255,179,.06);
}
.line.cmd{color:var(--accent)}
.line.log{color:var(--muted)}
.line.err{color:#ff7481}

/* single global inline cursor */
.cursor{
  display:inline-block;
  width:0.75ch; height:1.15em;
  background:var(--accent);
  opacity:.9;
  animation: blink .9s steps(1,end) infinite;
  box-shadow:0 0 6px rgba(152,255,179,.55);
  vertical-align:-0.15em;
}
@keyframes blink{ 50%{ opacity:.15 }}

/* HUD */
#hud{
  position:fixed; left:16px; bottom:16px; pointer-events:auto;
  color:var(--muted); font-size:.95rem; opacity:.9;
}
.brand{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.x-link{
  color: var(--fg); text-decoration:none; font-weight:700; opacity:.8;
  border:1px solid rgba(189,252,201,.25); padding:.1rem .35rem; border-radius:6px;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.x-link:hover{ opacity:1; transform: translateY(-1px);
  box-shadow:0 0 10px rgba(152,255,179,.35); border-color: rgba(152,255,179,.45);
}
.dot{ opacity:.6; }
.addr{
  font-family: ui-monospace, Menlo, Monaco, "Courier New", monospace;
  font-size:.9rem; color:#f1ffd6;
  background: rgba(152,255,179,.06);
  border:1px solid rgba(152,255,179,.20);
  padding:.05rem .35rem; border-radius:6px;
  user-select:all;
}
.copy-btn{
  font: inherit;
  font-weight:700;
  padding:.1rem .45rem;
  border-radius:6px;
  border:1px solid rgba(189,252,201,.25);
  background: transparent;
  color:#f1ffd6;
  opacity:.85;
  cursor:pointer;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.copy-btn:hover{
  opacity:1; transform: translateY(-1px);
  box-shadow:0 0 10px rgba(152,255,179,.35);
  border-color: rgba(152,255,179,.45);
}

/* whispers (text) */
#whispers{ position:absolute; inset:0; pointer-events:none; overflow:hidden; mix-blend-mode:screen; }
.whisper{ position:absolute; color:rgba(152,255,179,.18); font-size:.9rem; text-shadow:0 0 8px rgba(152,255,179,.12); animation: fadeUp 6s ease forwards; }
@keyframes fadeUp{ 0%{opacity:0; transform:translateY(8px)} 10%{opacity:.5} 80%{opacity:.35} 100%{opacity:0; transform:translateY(-8px)} }

/* CAT sprites */
#cats{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cat{
  position:absolute; opacity:0; pointer-events:none;
  animation: catFade 3s ease forwards;
  filter: drop-shadow(0 0 18px rgba(152,255,179,.3));
}
@keyframes catFade{
  0%{ opacity:0; transform: translateY(6px) scale(.98); }
  20%{ opacity:.95; transform: translateY(0) scale(1); }
  70%{ opacity:.85; }
  100%{ opacity:0; transform: translateY(-4px) scale(1.01); }
}

/* CRT FX */
.scanlines{ position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,.0) 0px, rgba(0,0,0,.0) 2px,
    rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px);
  mix-blend-mode: multiply; opacity:.35; }
.grain{ position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 2px 2px; animation: grain 12s steps(10,end) infinite; opacity:.35; }
@keyframes grain{
  0%{ transform: translate(0,0) } 20%{ transform: translate(-10px, 6px) }
  40%{ transform: translate(12px, -8px) } 60%{ transform: translate(6px, 12px) }
  80%{ transform: translate(-8px, -6px) } 100%{ transform: translate(0,0) }
}
.vignette{ position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 180px rgba(0,0,0,.65); }


.comment{
  color: var(--muted);
  opacity: .8;
  font-weight: 600;
}
.title{
  color: var(--fg);
  font-weight: 700;
  letter-spacing: .5px;
}
.bnb-icon{
  height: 20px;
  width: auto;
  vertical-align: middle;
  margin: 0 4px;
  filter: drop-shadow(0 0 6px rgba(152,255,179,.35));
}