/* remainai posts.
   A reading site for writing that grew out of notes. One bold thing, the
   ring mark each post draws from itself; everything around it is type and
   space. Fonts are self-hosted (Newsreader, Schibsted Grotesk; both OFL), so
   a page asks nothing of anyone but us. */

@font-face {
  font-family: "Newsreader";
  src: url(/static/newsreader-roman.6e4f2958c3.woff2) format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url(/static/newsreader-italic.5dfcd10d24.woff2) format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url(/static/schibsted-grotesk.4c8b93f431.woff2) format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #f5f6f2;
  --raised: #fbfbf9;
  --ink: #17191e;
  --ink-2: #3d424c;
  --slate: #5c6370;
  --rule: #dfe1da;
  --blue: #3b5bdb;
  --blue-ink: #2d48b8;
  --ring: #17191e;
  --grow: #3b5bdb;
  --wash: #e9ecf6;
  --ins: #dcefdf; --ins-ink: #1c4a2a;
  --del: #f6dfdc; --del-ink: #6e231b;
  --hl-gold: #f6e9a6; --hl-lime: #e2efb3; --hl-mint: #cdeedd; --hl-sky: #d4e5f7;
  --hl-lilac: #e4dcf5; --hl-plum: #f2d8e8; --hl-rose: #f6d9d6; --hl-coral: #f8e0c9;

  --serif: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 38rem;
  --page: 72rem;
  --gut: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f1217;
    --raised: #151920;
    --ink: #e7e9ec;
    --ink-2: #c3c8d1;
    --slate: #8f98a8;
    --rule: #242933;
    --blue: #8fa6ff;
    --blue-ink: #a9baff;
    --ring: #c9cdd5;
    --grow: #8fa6ff;
    --wash: #19203a;
    --ins: #15321f; --ins-ink: #bfeccb;
    --del: #3b1a18; --del-ink: #ffcfc9;
    --hl-gold: #4f4613; --hl-lime: #3a4a15; --hl-mint: #143f31; --hl-sky: #173a5c;
    --hl-lilac: #342a5e; --hl-plum: #4f1f40; --hl-rose: #561f24; --hl-coral: #573318;
  }
}
@media (min-width: 720px) { :root { --gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px;
}
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--ink); color: var(--ground); padding: 8px 12px; }

/* The ring mark ------------------------------------------------------------ */
.ring { display: block; overflow: visible; }
.ring path { fill: none; stroke: var(--ring); stroke-width: 1.1; vector-effect: non-scaling-stroke; opacity: .55; }
.ring path.g { stroke: var(--grow); opacity: 1; stroke-width: 1.6; }
.ring .pith { fill: var(--ink); }
/* Rings a reader has read through, lit by read.js as they go. */
.ring path.lit { stroke: var(--grow); opacity: 1; }
.ring path { transition: stroke .6s ease, opacity .6s ease; }

/* The one orchestrated moment: the lead post's ring grows in, pith outwards. */
@media (prefers-reduced-motion: no-preference) {
  /* Scaling strokes here: Chrome ignores pathLength on a non-scaling stroke,
     and the dash would stop partway round. Widths are in the 200-unit box,
     about 1.1px and 1.6px at the hero's size. */
  .ring-draw path { vector-effect: none; stroke-width: .65; stroke-dasharray: 1; stroke-dashoffset: 1; animation: grow 1.4s cubic-bezier(.3,.6,.2,1) forwards; }
  .ring-draw path.g { stroke-width: .95; }
  .ring-draw path[data-i="1"] { animation-delay: .08s; } .ring-draw path[data-i="2"] { animation-delay: .16s; }
  .ring-draw path[data-i="3"] { animation-delay: .24s; } .ring-draw path[data-i="4"] { animation-delay: .32s; }
  .ring-draw path[data-i="5"] { animation-delay: .40s; } .ring-draw path[data-i="6"] { animation-delay: .48s; }
  .ring-draw path[data-i="7"] { animation-delay: .56s; } .ring-draw path[data-i="8"] { animation-delay: .64s; }
  .ring-draw path[data-i="9"] { animation-delay: .72s; } .ring-draw path[data-i="10"] { animation-delay: .80s; }
  .ring-draw path[data-i="11"] { animation-delay: .88s; } .ring-draw path[data-i="12"] { animation-delay: .96s; }
  .ring-draw path[data-i="13"] { animation-delay: 1.04s; } .ring-draw path[data-i="14"] { animation-delay: 1.12s; }
  .ring-draw path[data-i="15"] { animation-delay: 1.2s; }
}
@keyframes grow { to { stroke-dashoffset: 0; } }

/* Masthead ------------------------------------------------------------------
   Stays at the top while reading, over a blur of the page; on a post it
   carries a hairline of reading progress (read.js), except on wide screens
   where the ring in the margin already shows it. */
.top-bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.top { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); height: 60px; display: flex; align-items: center; gap: 20px; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.progress span { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
@media (min-width: 1180px) { .progress { display: none; } }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand .ring path { opacity: .8; }
.top-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; color: var(--slate); }
.top-nav a:hover { color: var(--ink); }
.write {
  color: var(--ink); font-weight: 600;
  border-bottom: 1.5px solid var(--blue); padding-bottom: 1px;
}
.write:hover { color: var(--blue-ink); }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); }

/* Front page: headline beside the week's most-read post --------------------- */
.hero {
  display: grid; gap: 40px; align-items: center;
  padding: 56px 0 48px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 88px 0 72px; gap: 64px; } }
.hero h1 {
  font-family: var(--serif); font-weight: 350; font-variation-settings: "opsz" 72;
  font-size: clamp(46px, 8.2vw, 104px); line-height: .96; letter-spacing: -0.035em;
  margin: 0 0 28px; text-wrap: balance;
}
.hero p { font-family: var(--serif); font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 32rem; }

.lead { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; }
.lead .ring { width: min(100%, 340px); height: auto; }
.lead-label { font-size: 14px; color: var(--slate); }
.lead-title {
  display: block; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 36;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance;
}
.lead:hover .lead-title { color: var(--blue-ink); }
.lead-by { font-size: 15px; color: var(--ink-2); }

/* The line of sections ---------------------------------------------------- */
.sections { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sections-inner {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--gut);
  display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none;
}
.sections-inner::-webkit-scrollbar { display: none; }
.sections a { flex: none; padding: 15px 0 14px; font-size: 15px; color: var(--slate); }
.sections a:hover { color: var(--ink); }
.sections a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }

/* Reading lists ------------------------------------------------------------- */
/* padding-block only: .wrap owns the side gutters on the same element. */
.board { display: grid; gap: 56px; padding-block: 48px 96px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .board { grid-template-columns: minmax(0, 1fr) 18rem; gap: 88px; } }
.shelf-h { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 0 0 30px; color: var(--ink); }
.shelf + .shelf { margin-top: 64px; }

.entries { display: grid; gap: 44px; }
.entry { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 720px) { .entry { grid-template-columns: 76px minmax(0, 1fr); gap: 30px; } }
.entry .ring { width: 100%; height: auto; margin-top: 4px; }
.entry-where { font-size: 14px; color: var(--slate); margin: 0 0 8px; }
.entry-where a { color: var(--ink-2); }
.entry-where a:hover { color: var(--blue-ink); }
.entry h3 {
  font-family: var(--serif); font-weight: 520; font-variation-settings: "opsz" 30;
  font-size: clamp(23px, 2.4vw, 28px); line-height: 1.16; letter-spacing: -0.014em;
  margin: 0 0 8px; text-wrap: balance;
}
.entry h3 a:hover { color: var(--blue-ink); }
.entry-sub { font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink-2); margin: 0 0 12px; max-width: 36rem; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--slate); margin: 0; }
.facts .grew { color: var(--blue-ink); }

.side { font-size: 15px; color: var(--ink-2); }
@media (min-width: 980px) { .side { position: sticky; top: 92px; align-self: start; } }
.side h2 { font-size: 15px; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
.side section + section { margin-top: 44px; }
.topic-cloud { font-family: var(--serif); font-size: 20px; line-height: 1.6; margin: 0; }
.topic-cloud a { color: var(--ink-2); margin-right: .45em; }
.topic-cloud a:hover { color: var(--blue-ink); }
.side p { margin: 0 0 12px; line-height: 1.55; }
.side .write { font-size: 15px; }
.legend-ring { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.legend-ring .ring { width: 54px; height: 54px; flex: none; }

.more { margin-top: 56px; }
.more a { font-weight: 600; border-bottom: 1.5px solid var(--rule); padding-bottom: 2px; }
.more a:hover { border-color: var(--blue); }
.empty { font-family: var(--serif); font-size: 20px; color: var(--ink-2); }

/* Section and author headers ------------------------------------------------ */
.page-head { padding: 64px 0 8px; max-width: 46rem; }
.page-head h1 {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 72;
  font-size: clamp(40px, 6.5vw, 76px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 16px;
}
.page-head h1 a:hover { color: var(--blue-ink); }
.page-head p { font-family: var(--serif); font-size: 20px; color: var(--ink-2); margin: 0 0 16px; }
.page-head .feed { font-size: 14px; color: var(--slate); }
.page-head .feed:hover { color: var(--ink); }

.author-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 72px 0 12px; max-width: 46rem; }
.author-head h1 {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 72;
  font-size: clamp(42px, 7vw, 80px); line-height: 1; letter-spacing: -0.03em; margin: 0;
}
.author-head .handle { color: var(--slate); margin: 6px 0 0; }
.author-head .bio { font-family: var(--serif); font-size: 21px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.follow { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; font-size: 15px; margin: 4px 0 0; }
.follow .quiet { color: var(--slate); }
.follow .quiet:hover { color: var(--ink); }
.button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--ink); color: var(--ground); font-weight: 600; font-size: 15px;
}
.button:hover { background: var(--blue); color: #fff; }

/* The post ------------------------------------------------------------------ */
.post { position: relative; max-width: calc(var(--measure) + 2 * var(--gut)); margin: 0 auto; padding: 56px var(--gut) 40px; }
.post-mark { width: 88px; margin: 0 0 28px; }
.post-mark .ring { width: 100%; height: auto; }
@media (min-width: 1180px) {
  /* The mark moves into the margin and stays beside the text as it scrolls;
     read.js lights its rings as the reader goes through the piece. */
  .post-mark { position: absolute; top: 64px; right: calc(100% + 16px); width: 132px; height: 100%; margin: 0; }
  .post-mark .ring { position: sticky; top: 96px; }
}
.post-where { font-size: 15px; margin: 0 0 18px; }
.post-where a { color: var(--blue-ink); }
.post-head h1 {
  font-family: var(--serif); font-weight: 450; font-variation-settings: "opsz" 72;
  font-size: clamp(38px, 6.6vw, 64px); line-height: 1.02; letter-spacing: -0.028em;
  margin: 0 0 18px; text-wrap: balance;
}
.post-sub {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 24;
  font-size: clamp(21px, 2.6vw, 25px); line-height: 1.35; color: var(--ink-2); margin: 0 0 30px;
}
.byline { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: var(--slate); padding-bottom: 36px; }
.byline .who { color: var(--ink); font-weight: 600; }
.byline .who:hover { color: var(--blue-ink); }
.byline .grew { color: var(--blue-ink); border-bottom: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); }
.byline .grew:hover { border-color: var(--blue); }

.prose {
  font-family: var(--serif); font-variation-settings: "opsz" 16;
  font-size: 20px; line-height: 1.68; color: var(--ink);
  overflow-wrap: break-word; hanging-punctuation: first;
}
@media (min-width: 720px) { .prose { font-size: 21px; } }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--serif); font-weight: 560; font-variation-settings: "opsz" 36;
  letter-spacing: -0.015em; line-height: 1.2; margin: 1.9em 0 .55em;
}
.prose h2 { font-size: 1.45em; }
.prose h3 { font-size: 1.2em; }
.prose h4 { font-size: 1.02em; }
.prose a { color: var(--blue-ink); background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
.prose a:hover { color: var(--ink); }
.prose strong { font-weight: 640; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin: .35em 0; padding-left: .2em; }
.prose li::marker { color: var(--slate); }
.prose blockquote {
  margin: 1.6em 0; padding: 0; border: 0;
  font-style: italic; font-size: 1.12em; line-height: 1.5; color: var(--ink-2);
}
.prose blockquote p { margin: 0 0 .6em; }
@media (min-width: 900px) { .prose blockquote { margin-left: -1.6em; padding-left: 1.6em; box-shadow: inset 2px 0 0 var(--blue); } }
.prose hr { border: 0; height: 1px; background: var(--rule); width: 30%; margin: 2.4em auto; }
.prose code { font-family: var(--mono); font-size: .8em; padding: .1em .32em; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.prose pre.code {
  font-family: var(--mono); font-size: 14.5px; line-height: 1.65; margin: 1.7em 0; padding: 18px 20px;
  overflow-x: auto; background: var(--raised); border: 1px solid var(--rule); border-radius: 10px;
}
@media (min-width: 900px) { .prose pre.code { margin-left: -20px; margin-right: -20px; } }
.prose pre.code code { background: none; padding: 0; font-size: inherit; border-radius: 0; }
/* Punctuation and plain text take the page's ink, so a highlighter theme can
   never leave brackets and commas the colour of the background. */
.prose pre.code .p, .prose pre.code .w, .prose pre.code .n { color: var(--ink-2); }
.prose mark { background: var(--hl-gold); color: inherit; padding: .04em .1em; border-radius: 2px; }
.prose mark[data-color="lime"] { background: var(--hl-lime); }
.prose mark[data-color="mint"] { background: var(--hl-mint); }
.prose mark[data-color="sky"] { background: var(--hl-sky); }
.prose mark[data-color="lilac"] { background: var(--hl-lilac); }
.prose mark[data-color="plum"] { background: var(--hl-plum); }
.prose mark[data-color="rose"] { background: var(--hl-rose); }
.prose mark[data-color="coral"] { background: var(--hl-coral); }
.prose figure { margin: 2em 0; }
.prose figure img { display: block; margin: 0 auto; border-radius: 6px; }
.prose figcaption { font-family: var(--sans); font-size: 14px; color: var(--slate); text-align: center; margin-top: 12px; }
.prose figure.drawing img { background: #fff; padding: 12px; }
.prose figure.drawing.ink-light img { background: #151920; }
.prose ul.tasks { list-style: none; padding-left: 0; }
.prose li.task { display: flex; gap: .65em; align-items: baseline; padding: 0; }
.prose li.task input { margin: 0; accent-color: var(--blue); transform: translateY(.12em); }
.prose li.task.done > div { color: var(--slate); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--slate) 55%, transparent); }

.post-end { margin-top: 64px; }
.topics { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; margin: 0 0 56px; }
.topics a { color: var(--slate); }
.topics a:hover { color: var(--blue-ink); }
.author-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.author-card .ring { width: 72px; height: 72px; }
.author-card .who { font-family: var(--serif); font-size: 26px; font-weight: 500; font-variation-settings: "opsz" 36; letter-spacing: -0.01em; }
.author-card .who:hover { color: var(--blue-ink); }
.author-card .bio { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink-2); margin: 6px 0 16px; }
.origin { font-size: 15px; color: var(--slate); margin: 32px 0 20px; max-width: 34rem; }
.origin a { color: var(--ink); border-bottom: 1.5px solid var(--blue); }
.report { font-size: 14px; color: var(--slate); }
.report summary { cursor: pointer; width: max-content; }
.report summary:hover { color: var(--ink); }
.report form { display: grid; gap: 10px; margin-top: 14px; max-width: 30rem; }
.report textarea { font: inherit; color: var(--ink); background: var(--raised); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.report button { justify-self: start; font: 600 14px var(--sans); color: var(--ground); background: var(--ink); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }

/* A version that is not the current one says so before anything else. */
.notice { font-size: 15px; color: var(--ink-2); background: var(--wash); border-radius: 10px; padding: 14px 18px; margin: 0 0 40px; }
.notice a { color: var(--blue-ink); font-weight: 600; margin-left: 12px; white-space: nowrap; }
.version-note { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-2); margin: -12px 0 32px; }

/* History: the ring, version by version --------------------------------- */
.history { list-style: none; margin: 48px 0 96px; padding: 0; display: grid; gap: 0; }
.stage { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 28px; padding: 0 0 44px; position: relative; }
.stage::before { content: ""; position: absolute; left: 43px; top: 96px; bottom: 8px; width: 1px; background: var(--rule); }
.stage:last-child::before { display: none; }
.stage .ring { width: 88px; height: 88px; }
.stage-when { font-size: 14px; color: var(--slate); margin: 6px 0 6px; }
.stage-title { font-family: var(--serif); font-size: 24px; font-weight: 500; font-variation-settings: "opsz" 30; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.012em; }
.stage-title a:hover { color: var(--blue-ink); }
.stage-note { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-2); margin: 0 0 10px; }
.stage .facts a { color: var(--blue-ink); }

.diff {
  font-family: var(--serif); font-size: 19px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: break-word;
  margin: 40px 0 96px; max-width: var(--measure);
}
.diff ins, .legend ins { background: var(--ins); color: var(--ins-ink); text-decoration: none; border-radius: 2px; padding: 0 .08em; }
.diff del, .legend del { background: var(--del); color: var(--del-ink); text-decoration-thickness: 1px; border-radius: 2px; padding: 0 .08em; }
.legend { display: inline-flex; gap: 12px; font-size: 14px; margin-left: 8px; }

.lost { padding: 96px 0 128px; max-width: 34rem; }
.lost .ring { width: 96px; height: 96px; margin-bottom: 28px; }
.lost h1 { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 72; font-size: 52px; line-height: 1; letter-spacing: -0.03em; margin: 0 0 14px; }
.lost p { font-family: var(--serif); font-size: 20px; color: var(--ink-2); margin: 0 0 24px; }

/* Foot -------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--rule); }
.foot-inner { max-width: var(--page); margin: 0 auto; padding: 36px var(--gut) 48px; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: 14px; color: var(--slate); }
.foot-inner p { margin: 0; max-width: 30rem; }
.foot-inner a { color: var(--ink-2); }
.foot-inner a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 22px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (min-width: 980px) { .board.single { grid-template-columns: minmax(0, 46rem); } }

/* code */
/* Background */ .bg { background-color: #f7f7f7; }
/* PreWrapper */ .chroma { background-color: #f7f7f7; -webkit-text-size-adjust: none; }
/* Error */ .chroma .err { color: #f6f8fa; background-color: #82071e }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #dedede }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #cf222e }
/* KeywordConstant */ .chroma .kc { color: #cf222e }
/* KeywordDeclaration */ .chroma .kd { color: #cf222e }
/* KeywordNamespace */ .chroma .kn { color: #cf222e }
/* KeywordPseudo */ .chroma .kp { color: #cf222e }
/* KeywordReserved */ .chroma .kr { color: #cf222e }
/* KeywordType */ .chroma .kt { color: #cf222e }
/* NameAttribute */ .chroma .na { color: #1f2328 }
/* NameClass */ .chroma .nc { color: #1f2328 }
/* NameConstant */ .chroma .no { color: #0550ae }
/* NameDecorator */ .chroma .nd { color: #0550ae }
/* NameEntity */ .chroma .ni { color: #6639ba }
/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #24292e }
/* NameOther */ .chroma .nx { color: #1f2328 }
/* NameTag */ .chroma .nt { color: #0550ae }
/* NameBuiltin */ .chroma .nb { color: #6639ba }
/* NameBuiltinPseudo */ .chroma .bp { color: #6a737d }
/* NameVariable */ .chroma .nv { color: #953800 }
/* NameVariableClass */ .chroma .vc { color: #953800 }
/* NameVariableGlobal */ .chroma .vg { color: #953800 }
/* NameVariableInstance */ .chroma .vi { color: #953800 }
/* NameVariableMagic */ .chroma .vm { color: #953800 }
/* NameFunction */ .chroma .nf { color: #6639ba }
/* NameFunctionMagic */ .chroma .fm { color: #6639ba }
/* LiteralString */ .chroma .s { color: #0a3069 }
/* LiteralStringAffix */ .chroma .sa { color: #0a3069 }
/* LiteralStringBacktick */ .chroma .sb { color: #0a3069 }
/* LiteralStringChar */ .chroma .sc { color: #0a3069 }
/* LiteralStringDelimiter */ .chroma .dl { color: #0a3069 }
/* LiteralStringDoc */ .chroma .sd { color: #0a3069 }
/* LiteralStringDouble */ .chroma .s2 { color: #0a3069 }
/* LiteralStringEscape */ .chroma .se { color: #0a3069 }
/* LiteralStringHeredoc */ .chroma .sh { color: #0a3069 }
/* LiteralStringInterpol */ .chroma .si { color: #0a3069 }
/* LiteralStringOther */ .chroma .sx { color: #0a3069 }
/* LiteralStringRegex */ .chroma .sr { color: #0a3069 }
/* LiteralStringSingle */ .chroma .s1 { color: #0a3069 }
/* LiteralStringSymbol */ .chroma .ss { color: #032f62 }
/* LiteralNumber */ .chroma .m { color: #0550ae }
/* LiteralNumberBin */ .chroma .mb { color: #0550ae }
/* LiteralNumberFloat */ .chroma .mf { color: #0550ae }
/* LiteralNumberHex */ .chroma .mh { color: #0550ae }
/* LiteralNumberInteger */ .chroma .mi { color: #0550ae }
/* LiteralNumberIntegerLong */ .chroma .il { color: #0550ae }
/* LiteralNumberOct */ .chroma .mo { color: #0550ae }
/* Operator */ .chroma .o { color: #0550ae }
/* OperatorWord */ .chroma .ow { color: #0550ae }
/* OperatorReserved */ .chroma .or { color: #0550ae }
/* Punctuation */ .chroma .p { color: #1f2328 }
/* Comment */ .chroma .c { color: #57606a }
/* CommentHashbang */ .chroma .ch { color: #57606a }
/* CommentMultiline */ .chroma .cm { color: #57606a }
/* CommentSingle */ .chroma .c1 { color: #57606a }
/* CommentSpecial */ .chroma .cs { color: #57606a }
/* CommentPreproc */ .chroma .cp { color: #57606a }
/* CommentPreprocFile */ .chroma .cpf { color: #57606a }
/* GenericDeleted */ .chroma .gd { color: #82071e; background-color: #ffebe9 }
/* GenericEmph */ .chroma .ge { color: #1f2328 }
/* GenericInserted */ .chroma .gi { color: #116329; background-color: #dafbe1 }
/* GenericOutput */ .chroma .go { color: #1f2328 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #ffffff }
@media (prefers-color-scheme: dark) {
/* Background */ .bg { color: #e6edf3; background-color: #0d1117; }
/* PreWrapper */ .chroma { color: #e6edf3; background-color: #0d1117; -webkit-text-size-adjust: none; }
/* Error */ .chroma .err { color: #f85149 }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #6e7681 }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #737679 }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #ff7b72 }
/* KeywordConstant */ .chroma .kc { color: #79c0ff }
/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
/* KeywordType */ .chroma .kt { color: #ff7b72 }
/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #ffa657 }
/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #ff7b72 }
/* NameProperty */ .chroma .py { color: #79c0ff }
/* NameTag */ .chroma .nt { color: #7ee787 }
/* NameVariable */ .chroma .nv { color: #79c0ff }
/* NameVariableClass */ .chroma .vc { color: #79c0ff }
/* NameVariableGlobal */ .chroma .vg { color: #79c0ff }
/* NameVariableInstance */ .chroma .vi { color: #79c0ff }
/* NameVariableMagic */ .chroma .vm { color: #79c0ff }
/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
/* NameFunctionMagic */ .chroma .fm { color: #d2a8ff; font-weight: bold }
/* Literal */ .chroma .l { color: #a5d6ff }
/* LiteralDate */ .chroma .ld { color: #79c0ff }
/* LiteralString */ .chroma .s { color: #a5d6ff }
/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
/* LiteralNumber */ .chroma .m { color: #a5d6ff }
/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
/* OperatorReserved */ .chroma .or { color: #ff7b72; font-weight: bold }
/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #ffa198 }
/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
/* GenericOutput */ .chroma .go { color: #8b949e }
/* GenericPrompt */ .chroma .gp { color: #8b949e }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #79c0ff }
/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #6e7681 }
}