:root{
  --bg:#0B0D10;
  --panel:#0F1318;
  --text:#E6EAEA;
  --muted:#9AA3AB;
  --green:#41D392;
  --yellow:#E3C567;
  --red:#F07178;
  --border:#1B2128;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  --radius:12px;
  --max:960px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);
  color:var(--text);
  font:16px/1.7 var(--mono);
  -webkit-font-smoothing:antialiased
}

.wrap{
  max-width:var(--max);
  margin:3.5rem auto;
  padding:0 1rem
}
.window{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden
}

.titlebar{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .7rem;
  border-bottom:1px solid var(--border);
  background:#0D1116
}
.dots{
  display:flex;
  gap:.4rem
}
.dot{
  inline-size:.8rem;
  block-size:.8rem;
  border-radius:50%
}
.red{
  background:var(--red)
}
.yellow{
  background:var(--yellow)
}
.green{
  background:var(--green)
}
.title{
  margin-left:.4rem;
  color:var(--muted)
}

.screen{
  padding:1rem 1rem 0 1rem;
  min-height:420px
}
pre{
  margin:0;white-space:pre-wrap;word-break:break-word
}
.prompt{color:var(--green)}
.path{color:var(--yellow)}
.muted{color:var(--muted)}
.link{color:var(--green);
  text-decoration:none;
  border-bottom:1px dotted rgba(65,211,146,.5)}
.link:hover{border-bottom-color:var(--green)}

.statusline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.6rem .8rem;
  border-top:1px solid var(--border);
  background:#0D1116;
  color:var(--muted)
}
.tabs{
  display:flex;
  gap:1rem
}
.tabs a{
  color:var(--muted);
  text-decoration:none
}
.tabs a[aria-current="page"],
.tabs a:hover{
  color:var(--text)
}

/* blog body inside Term window */
.md{
  white-space:normal;
  font:16px/1.7 var(--mono)
}
.md p{
  margin:.6rem 0
}
.md code{
  background:#0b0f13;
  border:1px solid var(--border);
  padding:.1rem .25rem;
  border-radius:6px
}
.md pre{
  background:#0b0f13;
  border:1px solid var(--border);
  padding:1rem;
  border-radius:8px;
  overflow:auto
}
.md h1,.md h2,.md h3{
  margin:1rem 0 .4rem
}