*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  font-family:'SF Mono','Fira Code','Cascadia Code','JetBrains Mono',Consolas,monospace;
  background:#0a0a0f;
  color:#c0c0c8;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

main{
  width:100%;
  max-width:720px;
  padding:2rem;
}

/* ── terminal window ── */
.terminal{
  background:#12121a;
  border:1px solid #1e1e2e;
  border-radius:10px;
  box-shadow:
    0 0 60px rgba(80,60,200,0.08),
    0 20px 50px rgba(0,0,0,0.5);
  overflow:hidden;
}

.terminal-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:12px 16px;
  background:#16161e;
  border-bottom:1px solid #1e1e2e;
  user-select:none;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
}
.dot--red{background:#ff5f57}
.dot--yellow{background:#febc2e}
.dot--green{background:#28c840}

.terminal-title{
  flex:1;
  text-align:center;
  font-size:0.75rem;
  color:#555;
  letter-spacing:0.05em;
}

.terminal-body{
  padding:1.25rem 1.5rem 1.5rem;
  line-height:1.7;
  font-size:0.95rem;
  max-height:60vh;
  overflow-y:auto;
}

/* ── zsh prompt colours ── */
.prompt-user{color:#7dcfff}
.prompt-at{color:#565670}
.prompt-host{color:#bb9af7}
.prompt-path{color:#73daca}
.prompt-branch{color:#e0af68}
.prompt-symbol{color:#9ece6a}
.typed{color:#c0caf5}
.output{color:#a9b1d6}
.cursor{
  display:inline-block;
  width:8px;
  height:1.1em;
  background:#c0caf5;
  vertical-align:text-bottom;
  animation:blink 1s step-end infinite;
}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

/* ── lines ── */
.line{white-space:nowrap}
.line+.line{margin-top:0.15em}

/* ── responsive ── */
@media(max-width:500px){
  .terminal-body{
    font-size:0.78rem;
    padding:1rem;
    overflow-x:auto;
  }
}