/* base: a "2 prompt (no alto)" aprovada — grafite, DM Mono, cursor verde-menta; realce da "terminal com cores" */
:root {
  --fundo:#1b1c1e; --tinta:#e6e6e3; --cursor:#4cc38a; --prompt:#8b8d90;
  --k:#b8a1f0; --s:#a8cfa0; --c:#878b91; --n:#e5a07a; --f:#8fbfe8;
  --glosa:#93bfa6; --linha:#2d2f33;
}
html, body { margin:0; min-height:100%; }
body {
  background:var(--fundo); color:var(--tinta);
  font-family:'DM Mono', ui-monospace, Consolas, monospace; font-weight:300;
}
#term {
  padding:max(16px, 3vh) max(16px, 2.2vw) 64px;
  font-size:clamp(15px, 1.5vw, 19px); letter-spacing:.04em; line-height:1.45;
  transition:opacity .45s;
}
#term.apaga { opacity:0; }
.linha { white-space:pre-wrap; min-height:1.45em; }
.prompt { color:var(--prompt); }
.l { opacity:0; filter:blur(4px); transition:opacity .35s ease, filter .5s ease; }
.l.v { opacity:1; filter:blur(0); }

.cursor { display:inline-block; position:relative; width:0; height:0; }
.cursor::after {
  content:''; position:absolute; left:.04em; bottom:-.2em;
  width:2px; height:1.05em; background:var(--cursor);
  animation:pisca 1.1s steps(1) infinite;
}
.cursor.digitando::after { animation:none; }
@keyframes pisca { 50% { opacity:0; } }

.dica { margin-left:2.5ch; color:var(--prompt); font-size:.8em; letter-spacing:.12em; animation:respira 2.4s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity:.25; } 50% { opacity:.8; } }

/* arquivo: código à esquerda, glosas na margem direita */
.cab { display:flex; align-items:center; gap:1.5ch; color:var(--prompt); font-size:.86em; margin-bottom:1.1em; }
.cab::after { content:''; flex:1; border-top:1px solid var(--linha); }
.cab span { color:var(--f); }
.arquivo { font-size:.86em; letter-spacing:.01em; line-height:1.55; margin-bottom:1.6em; }
.fl { display:grid; grid-template-columns:minmax(0, 66ch) minmax(0, 1fr); }
.cod { white-space:pre; }
.gl {
  padding-left:3ch; border-left:1px solid var(--linha);
  color:var(--glosa); font-size:.9em; letter-spacing:.02em;
}
.k { color:var(--k); } .s { color:var(--s); } .n { color:var(--n); } .f { color:var(--f); }
.c { color:var(--c); font-style:italic; }

/* menu, à moda do DOS */
.menu {
  display:inline-block; max-width:100%; box-sizing:border-box;
  border:3px double #4b4e54; padding:1em 2.4ch 1.1em; margin:.4em 0 .9em;
}
.mt { letter-spacing:.35em; padding-bottom:.7em; margin-bottom:.7em; border-bottom:1px solid var(--linha); }
.op {
  display:grid; grid-template-columns:3ch 18ch minmax(0, 1fr); gap:0 1.5ch;
  padding:.18em 1ch; margin:0 -1ch; cursor:pointer;
}
.op:hover { background:#25272a; }
.op .ok { color:var(--cursor); }
.op .nm { color:var(--f); }
.op .ds { color:var(--prompt); }
.op.lido .nm::after { content:' *'; color:var(--prompt); }
.op.lido .nm, .op.lido .ds { opacity:.55; }
.sep { height:.7em; }
.st { color:var(--prompt); font-size:.8em; letter-spacing:.08em; min-height:1.2em; margin-bottom:.6em; }
.esc { color:var(--tinta); }

/* desligar: a tela se recolhe numa linha e some, como um monitor de tubo */
body.desliga #term { animation:desliga 1.2s ease-in forwards; transform-origin:50% 30%; }
@keyframes desliga {
  0%   { transform:scale(1, 1); filter:brightness(1); }
  55%  { transform:scale(1, .006); filter:brightness(2.5); }
  100% { transform:scale(0, .006); filter:brightness(4); opacity:0; }
}
.fim {
  position:fixed; inset:0; display:grid; place-items:center; padding:0 16px; text-align:center;
  color:var(--prompt); font-size:clamp(13px, 1.2vw, 16px); letter-spacing:.14em;
  opacity:0; transition:opacity 2.5s ease;
}
body.desligado .fim { opacity:1; }

@media (max-width:760px) {
  .fl { display:block; }
  .cod { display:block; white-space:pre-wrap; padding-left:calc((var(--ind, 0) + 4) * 1ch); text-indent:calc((var(--ind, 0) + 4) * -1ch); }
  .gl:empty { display:none; }
  .gl { display:block; border:0; padding:0 0 .35em calc((var(--ind, 0) + 2) * 1.15ch); font-size:.85em; }
  .gl::before { content:'↳ '; color:var(--prompt); }
  .op { grid-template-columns:3ch minmax(0, 1fr); }
  .op .ds { grid-column:2; font-size:.85em; }
}