:root {
  font-size: 2.19512vw;

  --log-surface: #ffffff;
  --log-ink: #1f2328;
  --log-dim: #6b7280;
  --log-edge: #e4e7ec;
  --log-ok: #0f9d58;
  --log-warn: #a1670a;
  --log-file: #4f46e5;
}

:root.dark {
  --log-surface: #262130;
  --log-ink: #d7d2e0;
  --log-dim: #948da3;
  --log-edge: rgb(255 255 255 / 8%);
  --log-ok: #4ec97a;
  --log-warn: #e3c645;
  --log-file: #8b83ff;
}

html,
body {
  height: 100%;
}

.log-scene {
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 2.2rem 1.7rem;
  border: 1px solid var(--log-edge);
  background: var(--log-surface);
  color: var(--log-ink);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.16;
}

.log {
  width: fit-content;
}

.log-line {
  margin: 0;
  white-space: pre;
}

.log-block + .log-block {
  margin-top: 1.16em;
}

.log-block + .log-block--wide {
  margin-top: 2.32em;
}

.tok-prompt {
  color: var(--log-dim);
}

.tok-run,
.tok-ok {
  color: var(--log-ok);
}

.tok-warn {
  color: var(--log-warn);
}

.tok-file {
  color: var(--log-file);
}

.tok-check {
  color: inherit;
}