.source {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28px clamp(16px, 4vw, 48px);
  overflow: auto;
  background: #151a17;
  color: #e8ebe6;
  font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-overflow-scrolling: touch;
}

.source code {
  display: block;
  min-width: 0;
  user-select: text;
}

.source .token-comment { color: #89958a; }
.source .token-doctype { color: #c6a0f6; }
.source .token-tag { color: #ff8769; }
.source .token-punctuation { color: #aeb9ae; }
.source .token-attribute { color: #e7d77a; }
.source .token-string { color: #b8d995; }
.source .token-css-selector { color: #ffb58d; }
.source .token-css-property { color: #83b9ff; }
.source .token-css-color { color: #d8a5f3; }
.source .token-css-number { color: #f2c66d; }
.source .token-css-at-rule { color: #d8a5f3; }
.source .token-css-comment { color: #89958a; font-style: italic; }