/* Cores e fonte do Prompt de Comando do Windows. */
:root {
  --fundo: #0c0c0c;
  --texto: #cccccc;
  --claro: #ffffff;
  --apagado: #767676;
  --barra: #1f1f1f;
  --borda: #3a3a3a;
  --realce: #2d2d2d;
  --mono: Consolas, "Cascadia Mono", "Lucida Console", Menlo, "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; background: #000; }

body { padding: 12px; font: 16px/1.25 var(--mono); color: var(--texto); }

a { color: var(--texto); }
a:hover { color: var(--claro); }

svg { width: 20px; height: 20px; }

.janela {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--fundo);
  border: 1px solid var(--borda);
}

.barra-de-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding-left: 10px;
  background: var(--barra);
  color: var(--claro);
  font: 12px system-ui, "Segoe UI", sans-serif;
  user-select: none;
}

.icone-janela { font: 700 11px var(--mono); padding: 1px 3px; background: var(--fundo); border: 1px solid var(--apagado); }
.titulo { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.botao-janela {
  display: grid;
  place-items: center;
  width: 46px;
  height: 32px;
  color: var(--claro);
  background: none;
  border: 0;
  cursor: pointer;
}

.botao-janela svg { width: 16px; height: 16px; }
.botao-janela:hover { background: var(--realce); }
.botao-janela.fechar:hover { background: #c42b1c; }

#palco {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#palco.arrastando { outline: 1px dashed var(--texto); outline-offset: -8px; }
#palco:fullscreen { background: var(--fundo); }

.console { grid-area: 1 / 1; place-self: start; width: 100%; padding: 8px 10px; }
.console p { margin: 0 0 16px; white-space: pre-wrap; }

.comando {
  font: inherit;
  color: var(--claro);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.comando:hover, .comando:focus-visible { color: var(--fundo); background: var(--texto); outline: none; }

.cursor { animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }

canvas { display: block; cursor: pointer; }

#controles { padding: 6px 12px 10px; border-top: 1px solid var(--borda); font-size: 13px; }

.linha-tempo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
#tempo, #duracao { min-width: 7ch; text-align: center; }
#posicao { flex: 1; }

.botoes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.grupo { display: flex; align-items: center; gap: 2px; }
.grupo:last-child { justify-content: flex-end; }

.icone {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.icone.grande { width: 46px; height: 46px; }

.icone svg { width: 22px; height: 22px; color: var(--texto); }
.icone.grande svg { width: 28px; height: 28px; }
.rotulo svg { width: 20px; height: 20px; color: var(--texto); }
.icone:hover { background: var(--realce); }
.icone:hover svg { color: var(--claro); }
.icone.ativo { border-color: var(--apagado); }
.icone.ativo svg { color: var(--claro); }
.icone:focus-visible, .comando:focus-visible, .barra:focus-visible { outline: 1px solid var(--claro); outline-offset: 1px; }

.rotulo { display: inline-grid; }

.barra { height: 14px; cursor: pointer; touch-action: none; }
.barra canvas { display: block; }
#posicao { flex: 1; min-width: 60px; }
.barra.curta { width: 120px; }

output { min-width: 3ch; color: var(--claro); }

#quadro { display: grid; place-items: center; }

#credito { margin: 6px 0 0; font-size: 12px; color: var(--apagado); }
#credito a { color: var(--apagado); }

@media (max-width: 700px) {
  body { padding: 0; }
  .janela { border: 0; }
  .botoes { grid-template-columns: 1fr; justify-items: center; }
  .grupo:last-child { justify-content: center; }
  .barra.curta { width: 90px; }
}