/* 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: 44rem;
  --page: 72rem;
  --gut: 16px;
}
/* Themes: light (above), dim and dark, the same three the app has. Chosen
   with the switcher in the header (theme.js), or left to the system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ground: #0f1217;
    --raised: #161a21;
    --ink: #e7e9ec;
    --ink-2: #c3c8d1;
    --slate: #8f98a8;
    --rule: #252a34;
    --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;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --ground: #0f1217;
  --raised: #161a21;
  --ink: #e7e9ec;
  --ink-2: #c3c8d1;
  --slate: #8f98a8;
  --rule: #252a34;
  --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;
  color-scheme: dark;
}
:root[data-theme="dim"] {
    --ground: #33373f;
  --raised: #3c414a;
  --ink: #eef0f3;
  --ink-2: #d4d8df;
  --slate: #aeb5c1;
  --rule: #4a505b;
  --blue: #9fb3ff;
  --blue-ink: #b8c7ff;
  --ring: #d8dce3;
  --grow: #a9bbff;
  --wash: #3a4262;
  --ins: #2b4a35; --ins-ink: #d2f3db;
  --del: #5a3431; --del-ink: #ffdad5;
  --hl-gold: #6b5f22; --hl-lime: #52632a; --hl-mint: #2a5a4a; --hl-sky: #2c5176;
  --hl-lilac: #4b4079; --hl-plum: #683558; --hl-rose: #6f343a; --hl-coral: #70492a;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
@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); }
.theme {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  font: 500 14px var(--sans); color: var(--slate); background: none; border: 1px solid var(--rule); cursor: pointer;
}
.theme[hidden] { display: none; }
.theme:hover { color: var(--ink); border-color: var(--slate); }
.theme svg { width: 14px; height: 14px; }
.theme circle { fill: none; stroke: currentColor; stroke-width: 1.4; }
.theme path { fill: currentColor; }
@media (max-width: 520px) { .theme span { display: none; } .theme { padding: 6px; } }
.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: 64px 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: 72px; right: calc(100% + 8px); width: 128px; 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;
}
@media (min-width: 1180px) { .post-head h1 { margin-right: -10rem; } .post-sub { max-width: 40rem; } }
.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; } }
/* On a wide screen, pictures and code step out of the text column a little:
   the text keeps its measure, and a diagram gets the room it wants. */
@media (min-width: 1180px) {
  .prose pre.code { margin-left: -48px; margin-right: -48px; padding: 22px 28px; }
  .prose figure { margin-left: -72px; margin-right: -72px; }
}
.prose pre.code code { background: none; padding: 0; font-size: inherit; border-radius: 0; }
/* The highlighter's palettes paint their own background; the page's raised
   surface wins in every theme, so a block sits in the page instead of
   punching a black hole in dim. */
html .prose pre.code.chroma, html[data-theme] .prose pre.code.chroma { background-color: var(--raised); }
/* 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; }

/* Readers: reactions, responses, their own page ---------------------------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand, .top-nav a { white-space: nowrap; }
@media (max-width: 520px) { .top { gap: 12px; } .top-nav { gap: 16px; } .top-nav .rss { display: none; } }
/* On a phone the header keeps the name, the theme and the reader's own link;
   "Write here" is in the foot of every page. */
@media (max-width: 440px) { .top-nav .write { display: none; } }
.top-nav .you { color: var(--ink); }

.post-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 40px; }
.to-responses { font-size: 15px; color: var(--slate); }
.to-responses:hover { color: var(--ink); }
.reactions { display: inline-flex; gap: 8px; margin: 0; }
.reactions button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 14px;
  font: 500 15px var(--sans); color: var(--ink-2); background: none;
  border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.reactions button:hover { color: var(--ink); border-color: var(--slate); }
.reactions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reactions .n { font-variant-numeric: tabular-nums; min-width: 1ch; }
.reactions button[aria-pressed="true"] { color: var(--blue-ink); border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: var(--wash); }
.reactions button[aria-pressed="true"] svg { fill: color-mix(in srgb, var(--blue) 22%, transparent); }
.reactions.small { gap: 2px; }
.reactions.small button { min-height: 30px; padding: 0 9px 0 7px; gap: 6px; font-size: 14px; border-color: transparent; color: var(--slate); }
.reactions.small button:hover { color: var(--ink); border-color: transparent; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.reactions.small button[aria-pressed="true"] { color: var(--blue-ink); background: var(--wash); border-color: transparent; }
.reactions.small svg { width: 15px; height: 15px; }
.reactions.small .n:empty { display: none; }
.reactions button:disabled { opacity: .6; cursor: progress; }

.responses { padding: 48px 0 16px; }
/* Links to a response land below the sticky header, not under it. */
.response, #responses, #react { scroll-margin-top: 84px; }
.responses-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 24px; }
.responses h2 {
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 36;
  font-size: 30px; letter-spacing: -0.015em; margin: 0;
}
.responses h2 span { color: var(--slate); font-weight: 400; }
.order { display: flex; gap: 18px; font-size: 15px; }
.order a { color: var(--slate); padding-bottom: 2px; }
.order a:hover { color: var(--ink); }
.order a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--blue); }

.respond { display: grid; gap: 12px; margin: 0 0 40px; }
.respond textarea {
  width: 100%; font: 400 18px/1.5 var(--serif); color: var(--ink); background: var(--raised);
  border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; resize: vertical; min-height: 96px;
}
.respond textarea::placeholder { color: var(--slate); }
.respond textarea:focus { border-color: color-mix(in srgb, var(--blue) 60%, var(--rule)); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.respond-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.respond-foot .button { border: 0; cursor: pointer; font-family: var(--sans); margin-left: auto; }
.respond .as { font-size: 14px; color: var(--slate); margin: 0; }
.respond .as strong { color: var(--ink); font-weight: 600; }
.respond .as a { color: var(--blue-ink); }
.signed-out { background: var(--raised); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; justify-items: start; }
.signed-out p { font-family: var(--serif); font-size: 18px; color: var(--ink-2); margin: 0; }
.quiet-note { font-size: 15px; color: var(--slate); margin: 0 0 24px; }

.thread, .replies { list-style: none; margin: 0; padding: 0; }
.thread > .response { padding: 26px 0; border-top: 1px solid var(--rule); }
.thread > .response:last-child { border-bottom: 1px solid var(--rule); }
.replies { margin: 18px 0 0 6px; padding-left: 22px; border-left: 1.5px solid var(--rule); display: grid; gap: 22px; }
@media (min-width: 720px) { .replies { margin-left: 10px; padding-left: 28px; } }
.response:target > .response-body { animation: found 2.4s ease-out; }
@keyframes found { from { background: var(--wash); } to { background: transparent; } }
.response-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; color: var(--slate); margin: 0 0 8px; }
.response-head .who { color: var(--ink); font-weight: 600; font-size: 15px; }
.response-head .who:hover { color: var(--blue-ink); }
.response-head .when:hover { color: var(--ink); }
.badge { font-size: 12px; font-weight: 600; color: var(--blue-ink); background: var(--wash); border-radius: 999px; padding: 1px 8px; }
.response-body { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; border-radius: 6px; }
.response-body p { margin: 0 0 .7em; }
.response-body p:last-child { margin-bottom: 0; }
.response-body a { color: var(--blue-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gone { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--slate); margin: 0; }
.response-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 10px 0 0 -7px; font-size: 14px; color: var(--slate); }
.response-acts .act { margin: 0; }
.response-acts summary, .response-acts .act button, .linkish {
  cursor: pointer; font: 500 14px var(--sans); color: var(--slate); background: none; border: 0; padding: 4px 0; list-style: none;
}
.response-acts summary::-webkit-details-marker { display: none; }
.response-acts summary:hover, .response-acts .act button:hover, .linkish:hover { color: var(--ink); }
.response-acts details[open] { flex-basis: 100%; order: 2; }
.response-acts details[open] > summary { color: var(--ink); }
.response-acts details .respond { margin: 10px 0 8px; }
.response-acts details .respond textarea { min-height: 72px; font-size: 17px; }
.response-acts .thanks { margin: 6px 0; }
.pager { display: flex; gap: 28px; margin: 28px 0 0; }
.pager a { font-weight: 600; border-bottom: 1.5px solid var(--rule); padding-bottom: 2px; }
.pager a:hover { border-color: var(--blue); }

.me-head { padding-bottom: 8px; }
.me-head .handle a { color: var(--blue-ink); }
.me-head .handle a:not(:first-child) { margin-left: .25em; }
.tally { display: flex; flex-wrap: wrap; gap: 20px 44px; margin: 12px 0 0; }
.tally div { display: flex; flex-direction: column-reverse; }
.tally dt { font-size: 14px; color: var(--slate); }
.tally dd { margin: 0; font-family: var(--serif); font-size: 36px; font-weight: 400; font-variation-settings: "opsz" 48; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mine, .said { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.mine-title { font-family: var(--serif); font-size: 23px; font-weight: 520; font-variation-settings: "opsz" 30; line-height: 1.2; letter-spacing: -0.012em; margin: 0 0 6px; }
.mine-title a:hover { color: var(--blue-ink); }
.mine .facts a { color: var(--ink-2); }
.mine .facts a:hover { color: var(--blue-ink); }
.flag { color: var(--ink); font-weight: 600; }
.said-link { display: grid; gap: 6px; }
.said-body { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink); }
.said-link:hover .said-body { color: var(--blue-ink); }
.side form { margin: 4px 0 0; }
.linkish { color: var(--ink); border-bottom: 1.5px solid var(--rule); padding: 0 0 2px; font-weight: 600; font-size: 15px; }

@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 }
/* Background */ :root[data-theme="dark"] .bg, :root[data-theme="dim"] .bg { color: #e6edf3; background-color: #0d1117; }
/* PreWrapper */ :root[data-theme="dark"] .chroma, :root[data-theme="dim"] .chroma { color: #e6edf3; background-color: #0d1117; -webkit-text-size-adjust: none; }
/* Error */ :root[data-theme="dark"] .chroma .err, :root[data-theme="dim"] .chroma .err { color: #f85149 }
/* LineLink */ :root[data-theme="dark"] .chroma .lnlinks, :root[data-theme="dim"] .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ :root[data-theme="dark"] .chroma .lntd, :root[data-theme="dim"] .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ :root[data-theme="dark"] .chroma .lntable, :root[data-theme="dim"] .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ :root[data-theme="dark"] .chroma .hl, :root[data-theme="dim"] .chroma .hl { background-color: #6e7681 }
/* LineNumbersTable */ :root[data-theme="dark"] .chroma .lnt, :root[data-theme="dim"] .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 */ :root[data-theme="dark"] .chroma .ln, :root[data-theme="dim"] .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 */ :root[data-theme="dark"] .chroma .line, :root[data-theme="dim"] .chroma .line { display: flex; }
/* Keyword */ :root[data-theme="dark"] .chroma .k, :root[data-theme="dim"] .chroma .k { color: #ff7b72 }
/* KeywordConstant */ :root[data-theme="dark"] .chroma .kc, :root[data-theme="dim"] .chroma .kc { color: #79c0ff }
/* KeywordDeclaration */ :root[data-theme="dark"] .chroma .kd, :root[data-theme="dim"] .chroma .kd { color: #ff7b72 }
/* KeywordNamespace */ :root[data-theme="dark"] .chroma .kn, :root[data-theme="dim"] .chroma .kn { color: #ff7b72 }
/* KeywordPseudo */ :root[data-theme="dark"] .chroma .kp, :root[data-theme="dim"] .chroma .kp { color: #79c0ff }
/* KeywordReserved */ :root[data-theme="dark"] .chroma .kr, :root[data-theme="dim"] .chroma .kr { color: #ff7b72 }
/* KeywordType */ :root[data-theme="dark"] .chroma .kt, :root[data-theme="dim"] .chroma .kt { color: #ff7b72 }
/* NameClass */ :root[data-theme="dark"] .chroma .nc, :root[data-theme="dim"] .chroma .nc { color: #f0883e; font-weight: bold }
/* NameConstant */ :root[data-theme="dark"] .chroma .no, :root[data-theme="dim"] .chroma .no { color: #79c0ff; font-weight: bold }
/* NameDecorator */ :root[data-theme="dark"] .chroma .nd, :root[data-theme="dim"] .chroma .nd { color: #d2a8ff; font-weight: bold }
/* NameEntity */ :root[data-theme="dark"] .chroma .ni, :root[data-theme="dim"] .chroma .ni { color: #ffa657 }
/* NameException */ :root[data-theme="dark"] .chroma .ne, :root[data-theme="dim"] .chroma .ne { color: #f0883e; font-weight: bold }
/* NameLabel */ :root[data-theme="dark"] .chroma .nl, :root[data-theme="dim"] .chroma .nl { color: #79c0ff; font-weight: bold }
/* NameNamespace */ :root[data-theme="dark"] .chroma .nn, :root[data-theme="dim"] .chroma .nn { color: #ff7b72 }
/* NameProperty */ :root[data-theme="dark"] .chroma .py, :root[data-theme="dim"] .chroma .py { color: #79c0ff }
/* NameTag */ :root[data-theme="dark"] .chroma .nt, :root[data-theme="dim"] .chroma .nt { color: #7ee787 }
/* NameVariable */ :root[data-theme="dark"] .chroma .nv, :root[data-theme="dim"] .chroma .nv { color: #79c0ff }
/* NameVariableClass */ :root[data-theme="dark"] .chroma .vc, :root[data-theme="dim"] .chroma .vc { color: #79c0ff }
/* NameVariableGlobal */ :root[data-theme="dark"] .chroma .vg, :root[data-theme="dim"] .chroma .vg { color: #79c0ff }
/* NameVariableInstance */ :root[data-theme="dark"] .chroma .vi, :root[data-theme="dim"] .chroma .vi { color: #79c0ff }
/* NameVariableMagic */ :root[data-theme="dark"] .chroma .vm, :root[data-theme="dim"] .chroma .vm { color: #79c0ff }
/* NameFunction */ :root[data-theme="dark"] .chroma .nf, :root[data-theme="dim"] .chroma .nf { color: #d2a8ff; font-weight: bold }
/* NameFunctionMagic */ :root[data-theme="dark"] .chroma .fm, :root[data-theme="dim"] .chroma .fm { color: #d2a8ff; font-weight: bold }
/* Literal */ :root[data-theme="dark"] .chroma .l, :root[data-theme="dim"] .chroma .l { color: #a5d6ff }
/* LiteralDate */ :root[data-theme="dark"] .chroma .ld, :root[data-theme="dim"] .chroma .ld { color: #79c0ff }
/* LiteralString */ :root[data-theme="dark"] .chroma .s, :root[data-theme="dim"] .chroma .s { color: #a5d6ff }
/* LiteralStringAffix */ :root[data-theme="dark"] .chroma .sa, :root[data-theme="dim"] .chroma .sa { color: #79c0ff }
/* LiteralStringBacktick */ :root[data-theme="dark"] .chroma .sb, :root[data-theme="dim"] .chroma .sb { color: #a5d6ff }
/* LiteralStringChar */ :root[data-theme="dark"] .chroma .sc, :root[data-theme="dim"] .chroma .sc { color: #a5d6ff }
/* LiteralStringDelimiter */ :root[data-theme="dark"] .chroma .dl, :root[data-theme="dim"] .chroma .dl { color: #79c0ff }
/* LiteralStringDoc */ :root[data-theme="dark"] .chroma .sd, :root[data-theme="dim"] .chroma .sd { color: #a5d6ff }
/* LiteralStringDouble */ :root[data-theme="dark"] .chroma .s2, :root[data-theme="dim"] .chroma .s2 { color: #a5d6ff }
/* LiteralStringEscape */ :root[data-theme="dark"] .chroma .se, :root[data-theme="dim"] .chroma .se { color: #79c0ff }
/* LiteralStringHeredoc */ :root[data-theme="dark"] .chroma .sh, :root[data-theme="dim"] .chroma .sh { color: #79c0ff }
/* LiteralStringInterpol */ :root[data-theme="dark"] .chroma .si, :root[data-theme="dim"] .chroma .si { color: #a5d6ff }
/* LiteralStringOther */ :root[data-theme="dark"] .chroma .sx, :root[data-theme="dim"] .chroma .sx { color: #a5d6ff }
/* LiteralStringRegex */ :root[data-theme="dark"] .chroma .sr, :root[data-theme="dim"] .chroma .sr { color: #79c0ff }
/* LiteralStringSingle */ :root[data-theme="dark"] .chroma .s1, :root[data-theme="dim"] .chroma .s1 { color: #a5d6ff }
/* LiteralStringSymbol */ :root[data-theme="dark"] .chroma .ss, :root[data-theme="dim"] .chroma .ss { color: #a5d6ff }
/* LiteralNumber */ :root[data-theme="dark"] .chroma .m, :root[data-theme="dim"] .chroma .m { color: #a5d6ff }
/* LiteralNumberBin */ :root[data-theme="dark"] .chroma .mb, :root[data-theme="dim"] .chroma .mb { color: #a5d6ff }
/* LiteralNumberFloat */ :root[data-theme="dark"] .chroma .mf, :root[data-theme="dim"] .chroma .mf { color: #a5d6ff }
/* LiteralNumberHex */ :root[data-theme="dark"] .chroma .mh, :root[data-theme="dim"] .chroma .mh { color: #a5d6ff }
/* LiteralNumberInteger */ :root[data-theme="dark"] .chroma .mi, :root[data-theme="dim"] .chroma .mi { color: #a5d6ff }
/* LiteralNumberIntegerLong */ :root[data-theme="dark"] .chroma .il, :root[data-theme="dim"] .chroma .il { color: #a5d6ff }
/* LiteralNumberOct */ :root[data-theme="dark"] .chroma .mo, :root[data-theme="dim"] .chroma .mo { color: #a5d6ff }
/* Operator */ :root[data-theme="dark"] .chroma .o, :root[data-theme="dim"] .chroma .o { color: #ff7b72; font-weight: bold }
/* OperatorWord */ :root[data-theme="dark"] .chroma .ow, :root[data-theme="dim"] .chroma .ow { color: #ff7b72; font-weight: bold }
/* OperatorReserved */ :root[data-theme="dark"] .chroma .or, :root[data-theme="dim"] .chroma .or { color: #ff7b72; font-weight: bold }
/* Comment */ :root[data-theme="dark"] .chroma .c, :root[data-theme="dim"] .chroma .c { color: #8b949e; font-style: italic }
/* CommentHashbang */ :root[data-theme="dark"] .chroma .ch, :root[data-theme="dim"] .chroma .ch { color: #8b949e; font-style: italic }
/* CommentMultiline */ :root[data-theme="dark"] .chroma .cm, :root[data-theme="dim"] .chroma .cm { color: #8b949e; font-style: italic }
/* CommentSingle */ :root[data-theme="dark"] .chroma .c1, :root[data-theme="dim"] .chroma .c1 { color: #8b949e; font-style: italic }
/* CommentSpecial */ :root[data-theme="dark"] .chroma .cs, :root[data-theme="dim"] .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreproc */ :root[data-theme="dark"] .chroma .cp, :root[data-theme="dim"] .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ :root[data-theme="dark"] .chroma .cpf, :root[data-theme="dim"] .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
/* GenericDeleted */ :root[data-theme="dark"] .chroma .gd, :root[data-theme="dim"] .chroma .gd { color: #ffa198; background-color: #490202 }
/* GenericEmph */ :root[data-theme="dark"] .chroma .ge, :root[data-theme="dim"] .chroma .ge { font-style: italic }
/* GenericError */ :root[data-theme="dark"] .chroma .gr, :root[data-theme="dim"] .chroma .gr { color: #ffa198 }
/* GenericHeading */ :root[data-theme="dark"] .chroma .gh, :root[data-theme="dim"] .chroma .gh { color: #79c0ff; font-weight: bold }
/* GenericInserted */ :root[data-theme="dark"] .chroma .gi, :root[data-theme="dim"] .chroma .gi { color: #56d364; background-color: #0f5323 }
/* GenericOutput */ :root[data-theme="dark"] .chroma .go, :root[data-theme="dim"] .chroma .go { color: #8b949e }
/* GenericPrompt */ :root[data-theme="dark"] .chroma .gp, :root[data-theme="dim"] .chroma .gp { color: #8b949e }
/* GenericStrong */ :root[data-theme="dark"] .chroma .gs, :root[data-theme="dim"] .chroma .gs { font-weight: bold }
/* GenericSubheading */ :root[data-theme="dark"] .chroma .gu, :root[data-theme="dim"] .chroma .gu { color: #79c0ff }
/* GenericTraceback */ :root[data-theme="dark"] .chroma .gt, :root[data-theme="dim"] .chroma .gt { color: #ff7b72 }
/* GenericUnderline */ :root[data-theme="dark"] .chroma .gl, :root[data-theme="dim"] .chroma .gl { text-decoration: underline }
/* TextWhitespace */ :root[data-theme="dark"] .chroma .w, :root[data-theme="dim"] .chroma .w { color: #6e7681 }
@media (prefers-color-scheme: dark) {
/* Background */ :root:not([data-theme]) .bg { color: #e6edf3; background-color: #0d1117; }
/* PreWrapper */ :root:not([data-theme]) .chroma { color: #e6edf3; background-color: #0d1117; -webkit-text-size-adjust: none; }
/* Error */ :root:not([data-theme]) .chroma .err { color: #f85149 }
/* LineLink */ :root:not([data-theme]) .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ :root:not([data-theme]) .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ :root:not([data-theme]) .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ :root:not([data-theme]) .chroma .hl { background-color: #6e7681 }
/* LineNumbersTable */ :root:not([data-theme]) .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 */ :root:not([data-theme]) .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 */ :root:not([data-theme]) .chroma .line { display: flex; }
/* Keyword */ :root:not([data-theme]) .chroma .k { color: #ff7b72 }
/* KeywordConstant */ :root:not([data-theme]) .chroma .kc { color: #79c0ff }
/* KeywordDeclaration */ :root:not([data-theme]) .chroma .kd { color: #ff7b72 }
/* KeywordNamespace */ :root:not([data-theme]) .chroma .kn { color: #ff7b72 }
/* KeywordPseudo */ :root:not([data-theme]) .chroma .kp { color: #79c0ff }
/* KeywordReserved */ :root:not([data-theme]) .chroma .kr { color: #ff7b72 }
/* KeywordType */ :root:not([data-theme]) .chroma .kt { color: #ff7b72 }
/* NameClass */ :root:not([data-theme]) .chroma .nc { color: #f0883e; font-weight: bold }
/* NameConstant */ :root:not([data-theme]) .chroma .no { color: #79c0ff; font-weight: bold }
/* NameDecorator */ :root:not([data-theme]) .chroma .nd { color: #d2a8ff; font-weight: bold }
/* NameEntity */ :root:not([data-theme]) .chroma .ni { color: #ffa657 }
/* NameException */ :root:not([data-theme]) .chroma .ne { color: #f0883e; font-weight: bold }
/* NameLabel */ :root:not([data-theme]) .chroma .nl { color: #79c0ff; font-weight: bold }
/* NameNamespace */ :root:not([data-theme]) .chroma .nn { color: #ff7b72 }
/* NameProperty */ :root:not([data-theme]) .chroma .py { color: #79c0ff }
/* NameTag */ :root:not([data-theme]) .chroma .nt { color: #7ee787 }
/* NameVariable */ :root:not([data-theme]) .chroma .nv { color: #79c0ff }
/* NameVariableClass */ :root:not([data-theme]) .chroma .vc { color: #79c0ff }
/* NameVariableGlobal */ :root:not([data-theme]) .chroma .vg { color: #79c0ff }
/* NameVariableInstance */ :root:not([data-theme]) .chroma .vi { color: #79c0ff }
/* NameVariableMagic */ :root:not([data-theme]) .chroma .vm { color: #79c0ff }
/* NameFunction */ :root:not([data-theme]) .chroma .nf { color: #d2a8ff; font-weight: bold }
/* NameFunctionMagic */ :root:not([data-theme]) .chroma .fm { color: #d2a8ff; font-weight: bold }
/* Literal */ :root:not([data-theme]) .chroma .l { color: #a5d6ff }
/* LiteralDate */ :root:not([data-theme]) .chroma .ld { color: #79c0ff }
/* LiteralString */ :root:not([data-theme]) .chroma .s { color: #a5d6ff }
/* LiteralStringAffix */ :root:not([data-theme]) .chroma .sa { color: #79c0ff }
/* LiteralStringBacktick */ :root:not([data-theme]) .chroma .sb { color: #a5d6ff }
/* LiteralStringChar */ :root:not([data-theme]) .chroma .sc { color: #a5d6ff }
/* LiteralStringDelimiter */ :root:not([data-theme]) .chroma .dl { color: #79c0ff }
/* LiteralStringDoc */ :root:not([data-theme]) .chroma .sd { color: #a5d6ff }
/* LiteralStringDouble */ :root:not([data-theme]) .chroma .s2 { color: #a5d6ff }
/* LiteralStringEscape */ :root:not([data-theme]) .chroma .se { color: #79c0ff }
/* LiteralStringHeredoc */ :root:not([data-theme]) .chroma .sh { color: #79c0ff }
/* LiteralStringInterpol */ :root:not([data-theme]) .chroma .si { color: #a5d6ff }
/* LiteralStringOther */ :root:not([data-theme]) .chroma .sx { color: #a5d6ff }
/* LiteralStringRegex */ :root:not([data-theme]) .chroma .sr { color: #79c0ff }
/* LiteralStringSingle */ :root:not([data-theme]) .chroma .s1 { color: #a5d6ff }
/* LiteralStringSymbol */ :root:not([data-theme]) .chroma .ss { color: #a5d6ff }
/* LiteralNumber */ :root:not([data-theme]) .chroma .m { color: #a5d6ff }
/* LiteralNumberBin */ :root:not([data-theme]) .chroma .mb { color: #a5d6ff }
/* LiteralNumberFloat */ :root:not([data-theme]) .chroma .mf { color: #a5d6ff }
/* LiteralNumberHex */ :root:not([data-theme]) .chroma .mh { color: #a5d6ff }
/* LiteralNumberInteger */ :root:not([data-theme]) .chroma .mi { color: #a5d6ff }
/* LiteralNumberIntegerLong */ :root:not([data-theme]) .chroma .il { color: #a5d6ff }
/* LiteralNumberOct */ :root:not([data-theme]) .chroma .mo { color: #a5d6ff }
/* Operator */ :root:not([data-theme]) .chroma .o { color: #ff7b72; font-weight: bold }
/* OperatorWord */ :root:not([data-theme]) .chroma .ow { color: #ff7b72; font-weight: bold }
/* OperatorReserved */ :root:not([data-theme]) .chroma .or { color: #ff7b72; font-weight: bold }
/* Comment */ :root:not([data-theme]) .chroma .c { color: #8b949e; font-style: italic }
/* CommentHashbang */ :root:not([data-theme]) .chroma .ch { color: #8b949e; font-style: italic }
/* CommentMultiline */ :root:not([data-theme]) .chroma .cm { color: #8b949e; font-style: italic }
/* CommentSingle */ :root:not([data-theme]) .chroma .c1 { color: #8b949e; font-style: italic }
/* CommentSpecial */ :root:not([data-theme]) .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreproc */ :root:not([data-theme]) .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ :root:not([data-theme]) .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
/* GenericDeleted */ :root:not([data-theme]) .chroma .gd { color: #ffa198; background-color: #490202 }
/* GenericEmph */ :root:not([data-theme]) .chroma .ge { font-style: italic }
/* GenericError */ :root:not([data-theme]) .chroma .gr { color: #ffa198 }
/* GenericHeading */ :root:not([data-theme]) .chroma .gh { color: #79c0ff; font-weight: bold }
/* GenericInserted */ :root:not([data-theme]) .chroma .gi { color: #56d364; background-color: #0f5323 }
/* GenericOutput */ :root:not([data-theme]) .chroma .go { color: #8b949e }
/* GenericPrompt */ :root:not([data-theme]) .chroma .gp { color: #8b949e }
/* GenericStrong */ :root:not([data-theme]) .chroma .gs { font-weight: bold }
/* GenericSubheading */ :root:not([data-theme]) .chroma .gu { color: #79c0ff }
/* GenericTraceback */ :root:not([data-theme]) .chroma .gt { color: #ff7b72 }
/* GenericUnderline */ :root:not([data-theme]) .chroma .gl { text-decoration: underline }
/* TextWhitespace */ :root:not([data-theme]) .chroma .w { color: #6e7681 }
}