:root{
  --bg:#050706;
  --panel:#07100b;
  --fg:#b7ffcf;
  --muted:#58d48c;
  --accent:#00ff66;
  --border: rgba(0,255,102,.35);
  --glow: rgba(0,255,102,.12);
  --shadow: rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  background: radial-gradient(1200px 600px at 50% 10%, rgba(0,255,102,.06), transparent 60%),
              radial-gradient(900px 500px at 50% 90%, rgba(0,255,102,.04), transparent 65%),
              #000;
  color:var(--fg);
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.terminal{
  width:min(980px, 100%);
  background: linear-gradient(180deg, rgba(0,255,102,.03), transparent 40%), var(--panel);
  border:1px solid var(--border);
  box-shadow: 0 20px 60px var(--shadow), 0 0 0 6px rgba(0,255,102,.03), 0 0 60px var(--glow);
  border-radius:14px;
  overflow:hidden;
  position:relative;
}

/* CRT-lite overlay */
.terminal::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px);
  opacity:.08;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.terminal::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

.term-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,255,102,.18);
  background: rgba(0,0,0,.35);
}
.dots{display:flex; gap:7px}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.title{flex:1; opacity:.9}
.status{color:var(--muted); font-size:12px; letter-spacing:.12em}

.screen{
  padding:18px 16px 6px;
  height: min(62vh, 520px);
  overflow:auto;
  white-space:pre-wrap;
  line-height:1.45;
}

.line{margin:0 0 6px}
.dim{color:var(--muted)}
.accent{color:var(--accent)}
.block{display:block}

.prompt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px 16px;
}
.ps1{color:var(--muted); white-space:nowrap}
#cmd{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--fg);
  font:inherit;
  padding:0;
}
.cursor{
  width:10px;height:18px;
  background:var(--accent);
  opacity:.9;
  animation: blink 1s steps(1,end) infinite;
}
@keyframes blink{ 50%{opacity:0} }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* mobile */
@media (max-width:560px){
  .screen{height: min(68vh, 520px)}
  .ps1{font-size:12px}
}
/* Cyberpunk toggles */
.cyberpunk .terminal { box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 6px rgba(0,255,255,.03), 0 0 70px rgba(0,255,255,.14); }

.glitchy .title { position: relative; }
.glitchy .title::before,
.glitchy .title::after{
  content: attr(data-title);
  position:absolute; left:0; top:0;
  opacity:.55;
  pointer-events:none;
}
.glitchy .title::before{ transform: translate(-1px, 0); filter: blur(.2px); }
.glitchy .title::after{ transform: translate(1px, 0); filter: blur(.2px); }

.scanlines-off .terminal::before { display:none; }