*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


:root {
  --bg-inner: blue;
  --bg-outer: navy;
  --c-body: #d0d0ff;
  --c-linenum: #aaaaff;
  --c-kw: #c792ea;
  --c-st: #d0ff00;
  --c-tg: #f07178;
  --c-at: #ffcb6b;
  --c-cm: #546e7a;
  --c-nu: #f78c6c;
  --font-size: 0.875rem;
  --font-face: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

html, body {
  overflow: hidden;
  background: var(--bg-outer);
  padding: 0;
  color: var(--c-body);
  font-size: var(--font-size);
}

pre {
  margin: 0;
  padding: 0;
  background: var(--bg-inner);
  tab-size: 4;

  &::before {
    content: ' ';
    z-index: 0;
    background: var(--bg-outer);
    position: absolute;
    width: calc(3ch + 22px);
    top: 0;
    bottom: 0;
    left: 0;
    mix-blend-mode: color;
  }
}

.code-container {
  z-index: 1;
  display: block;
  padding: 0.75rem 0.75rem 0.75rem 0;
  font-family: var(--font-face);
  line-height: 1.6;
  counter-reset: line var(--start-line, 0);
}

.code-line {
  display: block;
  counter-increment: line;
  padding: 0 0.75rem;
  white-space: pre;

  &::before {
    content: counter(line);
    display: inline-block;
    width: 3ch;
    margin-right: 3ch;
    text-align: right;
    color: var(--c-linenum);
    user-select: none;
  }
}

.code-classification-kw {
  color: var(--c-kw);
}

.code-classification-st {
  color: var(--c-st);
  font-weight: 900;
}

.code-classification-cm {
  color: var(--c-cm);
  font-style: italic;
}

.code-classification-nu { color: var(--c-nu); }
.code-classification-tg { color: var(--c-tg); }
.code-classification-at { color: var(--c-at); }