html,body{
  margin:0; padding:0; height:100%;
  background:#0b0d10;
  color:#d7dde6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
#app{height:100%; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}
.dot{width:10px; height:10px; border-radius:50%;}
.red{background:#ff5f56;}
.yellow{background:#ffbd2e;}
.green{background:#27c93f;}
.title{flex:1; opacity:.9;}
.right{opacity:.6; font-size:12px;}

.terminal{
  flex:1;
  padding:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.output{
  flex:1;
  overflow:auto;
  padding-right:6px;
  line-height:1.35;
  font-size:14px;
  white-space:pre-wrap;
  word-break:break-word;
}
.output::-webkit-scrollbar{width:10px;}
.output::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08); border-radius:10px;}
.output::-webkit-scrollbar-track{background:transparent;}

.inputrow{
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:10px;
}
.prompt{opacity:.85; white-space:nowrap;}
.input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#d7dde6;
  font:inherit;
}
.hint{
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  font-size:12px;
  opacity:.8;
}
code{background:rgba(255,255,255,.06); padding:2px 5px; border-radius:6px;}

.line{margin:0 0 2px 0;}
.cmd{color:#cfd6e6;}
.dim{opacity:.65;}
.warn{color:#ffbd2e;}
.err{color:#ff5f56;}
.ok{color:#27c93f;}
.whisper{opacity:.55; letter-spacing:.06em;}
.glitch{
  animation:glitch .12s steps(2,end) infinite;
  text-shadow: 1px 0 rgba(255,0,0,.2), -1px 0 rgba(0,255,255,.2);
}
@keyframes glitch{
  0%{transform:translate(0,0);}
  33%{transform:translate(1px,0);}
  66%{transform:translate(-1px,0);}
  100%{transform:translate(0,0);}
}