:root {
  color-scheme: dark;
  --background: #151516;
  --foreground: #e9e9eb;
  --muted: #8d8d93;
  --syntax-default: #c9d1d9;
  --syntax-keyword: #ff7b72;
  --syntax-title: #d2a8ff;
  --syntax-constant: #79c0ff;
  --syntax-string: #a5d6ff;
  --syntax-built-in: #ffa657;
  --syntax-comment: #8b949e;
  --syntax-tag: #7ee787;
  --syntax-section: #1f6feb;
  --syntax-bullet: #f2cc60;
  --syntax-addition: #aff5b4;
  --syntax-addition-background: #033a16;
  --syntax-deletion: #ffdcd7;
  --syntax-deletion-background: #67060c;
  --selection: #f3ef6d;
  --selection-foreground: #151516;
  --page-gutter: 40px;
  --content-width: 560px;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco,
    Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100%;
  margin: 0;
  padding-block: var(--page-gutter);
  padding-inline: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
}

main {
  width: 100%;
  max-width: none;
}

article > :not(.md-code-block) {
  width: min(
    var(--content-width),
    calc(100% - var(--page-gutter) - var(--page-gutter))
  );
  margin-inline-start: var(--page-gutter);
  margin-inline-end: auto;
}

article > :first-child {
  margin-top: 0;
}

article > :last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 40px 0 20px;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
ul > li::before,
ol > li::before,
blockquote::before,
.md-link::before,
.md-link::after,
.md-image::before,
.md-autolink::before,
.md-autolink::after,
.md-em::before,
.md-em::after,
.md-strong::before,
.md-strong::after,
.md-strike::before,
.md-strike::after,
.md-inline-code::before,
.md-inline-code::after,
.md-code-block::before,
.md-code-block::after {
  color: var(--muted);
  cursor: default;
  user-select: none;
}

h1::before {
  content: "# " / "";
}

h2::before {
  content: "## " / "";
}

h3::before {
  content: "### " / "";
}

h4::before {
  content: "#### " / "";
}

h5::before {
  content: "##### " / "";
}

h6::before {
  content: "###### " / "";
}

p,
ul,
ol,
blockquote,
pre,
hr {
  margin: 0 0 20px;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  padding-left: 2ch;
}

ul > li::before {
  position: absolute;
  left: 0;
  content: "- " / "";
}

ul[data-marker="+"] > li::before {
  content: "+ " / "";
}

ul[data-marker="*"] > li::before {
  content: "* " / "";
}

ol {
  counter-reset: markdown-list var(--markdown-list-start, 0);
}

ol > li {
  padding-left: 4ch;
  counter-increment: markdown-list;
}

ol[data-delimiter="."] > li::before {
  position: absolute;
  left: 0;
  content: counter(markdown-list) ". " / "";
}

ol[data-delimiter=")"] > li::before {
  position: absolute;
  left: 0;
  content: counter(markdown-list) ") " / "";
}

li > ul,
li > ol {
  margin-bottom: 0;
}

blockquote {
  position: relative;
  padding-left: 2ch;
}

blockquote::before {
  position: absolute;
  left: 0;
  content: "> " / "";
}

.md-em {
  font-style: italic;
}

.md-strong {
  font-weight: 700;
}

.md-strike {
  text-decoration: line-through;
}

.md-em::before,
.md-em::after,
.md-strong::before,
.md-strong::after,
.md-strike::before,
.md-strike::after,
.md-inline-code::before,
.md-inline-code::after {
  content: attr(data-marker) / "";
}

.md-inline-code,
.md-code-block,
.md-code-block code {
  font: inherit;
}

.md-inline-code {
  white-space: break-spaces;
}

.md-code-block {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: 0;
  padding-inline-start: var(--page-gutter);
  padding-inline-end: 0;
  border-radius: 0;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-wrap: normal;
  overscroll-behavior-inline: contain;
  tab-size: 2;
}

.md-code-block code {
  display: block;
  box-sizing: content-box;
  width: max-content;
  min-width: calc(100% - var(--page-gutter));
  padding-inline-end: var(--page-gutter);
  color: var(--syntax-default);
}

.md-code-block::before,
.md-code-block::after {
  display: block;
}

.md-code-block::before {
  content: attr(data-open) / "";
}

.md-code-block::after {
  content: attr(data-close) / "";
}

/* Highlight.js GitHub Dark token palette; layout remains site-specific. */
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: var(--syntax-keyword);
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: var(--syntax-title);
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  color: var(--syntax-constant);
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  color: var(--syntax-string);
}

.hljs-built_in,
.hljs-symbol {
  color: var(--syntax-built-in);
}

.hljs-comment,
.hljs-code,
.hljs-formula {
  color: var(--syntax-comment);
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  color: var(--syntax-tag);
}

.hljs-subst {
  color: var(--syntax-default);
}

.hljs-section {
  color: var(--syntax-section);
  font-weight: 700;
}

.hljs-bullet {
  color: var(--syntax-bullet);
}

.hljs-emphasis {
  color: var(--syntax-default);
  font-style: italic;
}

.hljs-strong {
  color: var(--syntax-default);
  font-weight: 700;
}

.hljs-addition {
  color: var(--syntax-addition);
  background-color: var(--syntax-addition-background);
}

.hljs-deletion {
  color: var(--syntax-deletion);
  background-color: var(--syntax-deletion-background);
}

.md-indented-code {
  padding-left: 4ch;
  font: inherit;
  white-space: pre-wrap;
}

.md-link::before {
  content: "[" / "";
}

.md-link::after {
  content: "](" attr(data-href) ")" / "";
}

.md-link[data-title]::after {
  content: "](" attr(data-href) " \"" attr(data-title) "\")" / "";
}

.md-image {
  display: block;
}

.md-image::before {
  display: block;
  content: "![" attr(data-alt) "](" attr(data-src) ")" / "";
}

.md-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}

.md-autolink::before {
  content: "<" / "";
}

.md-autolink::after {
  content: ">" / "";
}

.md-link,
.md-autolink {
  overflow-wrap: anywhere;
}

a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 3px;
}

hr {
  border: 0;
  border-top: 1px solid var(--muted);
}

::selection {
  background: var(--selection);
  color: var(--selection-foreground);
}

@media (max-width: 600px) {
  :root {
    --page-gutter: 24px;
  }
}