@charset "UTF-8";
:root {
  --color-bg: hsla(210deg, 100%, 10%);
  --color-bg-overlay: hsla(210deg, 100%, 20%);
  --color-bg-underlay: hsla(210deg, 100%, 5%);
  --color-text: hsla(210deg, 100%, 90%);
  --color-text-faded: hsla(210deg, 100%, 90%, 35%);
  --color-text-highlight: hsla(60deg, 100%, 50%);
  --color-link: hsla(200deg, 100%, 50%);
  --color-link-visited: hsla(270deg, 100%, 70%); }

html {
  background: var(--color-bg);
  color: var(--color-text); }

:link {
  color: var(--color-link); }

:visited {
  color: var(--color-link-visited); }

:root {
  --font-scale: 1.125;
  --font-size-h1: calc(
        var(--font-size-normal) * pow(
            var(--font-scale), 6
        )
    );
  --font-size-h2: calc(
        var(--font-size-normal) * pow(
            var(--font-scale), 5
        )
    );
  --font-size-h3: calc(
        var(--font-size-normal) * pow(
            var(--font-scale), 4
        )
    );
  --font-size-h4: calc(
        var(--font-size-normal) * pow(
            var(--font-scale), 3
        )
    );
  --font-size-h5: calc(
        var(--font-size-normal) * pow(
            var(--font-scale), 2
        )
    );
  --font-size-h6: calc(
        var(--font-size-normal) * pow(
            var(--font-scale), 1
        )
    );
  --font-size-normal: 1rem;
  --font-size-small: calc(
        var(--font-size-normal) * pow(
            var(--font-scale), -1
        )
    );
  font-family: sans-serif;
  font-size: var(--font-size-normal);
  line-height: 1.65; }

h1 {
  font-size: var(--font-size-h1); }

h2 {
  font-size: var(--font-size-h2); }

h3 {
  font-size: var(--font-size-h3); }

h4 {
  font-size: var(--font-size-h4); }

h5 {
  font-size: var(--font-size-h5); }

h6 {
  font-size: var(--font-size-h6); }

small {
  font-size: var(--font-size-small); }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  letter-spacing: -0.022em; }

small {
  line-height: 1.8; }

h1, h2, h3, h4, h5, h6 {
  margin-block-start: 4rem;
  margin-block-end: 1rem; }

p,
figure,
table,
blockquote,
hr,
form,
ol,
ul,
dl,
pre {
  margin-block: 1lh; }

/* control the scroll margin with a variable */
[id] {
  scroll-margin-block-start: var(--scroll-margin-block-start, 0rem); }

/* some things should be highlighted */
dt[id] {
  --scroll-margin-block-start: 0rem; }
  dt[id]:target {
    color: var(--color-text-highlight); }

/* other things should be outlined */
figure[id] {
  --scroll-margin-block-start: 1rem; }
  figure[id]:target {
    outline: 0.25rem dashed var(--color-text-highlight);
    outline-offset: 0.5rem; }

/* sections are stylized and include linked headings */
section[id] {
  --scroll-margin-block-start: 2rem;
  position: relative;
  scroll-margin-block-start: var(--scroll-margin-block-start);
  /* prepend the fragment id */
  /* highlight the prepended frag-id */ }
  section[id]::before {
    content: "#" attr(id);
    position: absolute;
    inset-block-start: calc(-1lh - 0.25rem);
    inset-inline-start: 0;
    color: var(--color-text-faded);
    font-weight: 900;
    font-size: 0.75rem; }
  section[id]:target::before {
    color: var(--color-text-highlight); }

:link {
  transition: all 250ms ease-in; }

:link:hover {
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.125em;
  text-decoration-skip-ink: none; }

@media (prefers-reduced-motion) {
  :link {
    transition: none; } }

.table-of-contents {
  font-size: 0.889rem; }
  .table-of-contents ol {
    list-style: none;
    margin-block: 0; }
  .table-of-contents li {
    margin-block: 1em; }
  .table-of-contents #TableOfContents-label {
    font-weight: 900;
    font-variant: small-caps; }
  .table-of-contents .headings {
    padding-inline-start: 1em; }

[data-pullquote]::before {
  content: attr(data-pullquote);
  display: block;
  margin-block: 1lh;
  color: var(--color-text);
  padding-block: 1em;
  padding-inline: 1em;
  text-align: right;
  padding-inline-end: 0;
  font-size: 1.2em;
  line-height: 1.2;
  letter-spacing: 0.14em;
  padding-left: 7%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='hsla(210deg, 50%, 20%)' d='M18.07 10.07c-.42 0-.83.07-1.22.17c.09-.3.17-.61.32-.88c.11-.31.29-.58.47-.84c.15-.29.41-.49.6-.74c.2-.24.47-.4.69-.6c.21-.21.49-.32.71-.46c.23-.13.43-.28.65-.35c.21-.09.39-.16.54-.22c.3-.12.47-.2.47-.2l-.48-1.94s-.22.05-.6.14c-.19.05-.42.1-.69.17c-.27.05-.56.19-.88.31c-.32.14-.69.24-1.03.47c-.34.22-.74.4-1.09.69c-.34.3-.75.56-1.05.94c-.33.36-.66.73-.91 1.16c-.29.41-.49.86-.7 1.3c-.19.44-.34.9-.47 1.34c-.24.88-.34 1.72-.38 2.44c-.03.72-.01 1.32.03 1.75c.02.2.04.4.06.54l.03.17c.2 2.56 2.31 4.58 4.93 4.58c2.74 0 4.96-2.22 4.96-4.96s-2.22-4.96-4.96-4.96Zm-11.98 0c-.42 0-.83.07-1.22.17c.09-.3.17-.61.32-.88c.11-.31.29-.58.47-.84c.15-.29.41-.49.6-.74c.2-.24.47-.4.69-.6c.21-.21.49-.32.71-.46c.23-.13.43-.28.65-.35c.21-.09.39-.16.54-.22c.3-.12.47-.2.47-.2l-.48-1.94s-.22.05-.6.14c-.19.05-.42.1-.69.17c-.27.05-.56.19-.88.31c-.32.14-.69.24-1.03.47c-.34.22-.74.4-1.09.69c-.34.3-.75.56-1.05.94c-.33.36-.66.73-.91 1.16c-.29.41-.49.86-.7 1.3c-.19.44-.34.9-.47 1.34c-.24.88-.34 1.72-.38 2.44c-.03.72-.01 1.32.03 1.75c.02.2.04.4.06.54l.03.17c.2 2.56 2.31 4.58 4.93 4.58c2.74 0 4.96-2.22 4.96-4.96s-2.22-4.96-4.96-4.96Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0; }

body {
  counter-reset: h2 figure table; }

h2 {
  counter-reset: h3; }

h3 {
  counter-reset: h4; }

h4 {
  counter-reset: h5; }

h5 {
  counter-reset: h6; }

*[autonumbering] h2::before {
  counter-increment: h2;
  content: counter(h2) " "; }

*[autonumbering] h3::before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3) " "; }

*[autonumbering] h4::before {
  counter-increment: h4;
  content: counter(h2) "." counter(h3) "." counter(h4) " "; }

*[autonumbering] h5::before {
  counter-increment: h5;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "; }

*[autonumbering] h6::before {
  counter-increment: h6;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "; }

*[autonumbering] :is(h2, h3, h4, h5, h6)::before {
  margin-inline-end: 1rem;
  display: inline-block;
  width: 3rem;
  font-variant-numeric: tabular-nums; }

*[autonumbering] .table-of-contents {
  counter-reset: d2; }
  *[autonumbering] .table-of-contents .headings ol {
    padding-inline-start: 0; }
  *[autonumbering] .table-of-contents li {
    display: flex;
    gap: 1rem; }
  *[autonumbering] .table-of-contents li[data-depth="2"] {
    counter-reset: d3; }
    *[autonumbering] .table-of-contents li[data-depth="2"]::before {
      counter-increment: d2;
      content: counter(d2) " "; }
  *[autonumbering] .table-of-contents li[data-depth="3"] {
    counter-reset: d4; }
    *[autonumbering] .table-of-contents li[data-depth="3"]::before {
      counter-increment: d3;
      content: counter(d2) "." counter(d3) " "; }
  *[autonumbering] .table-of-contents li[data-depth="4"] {
    counter-reset: d5; }
    *[autonumbering] .table-of-contents li[data-depth="4"]::before {
      counter-increment: d4;
      content: counter(d2) "." counter(d3) "." counter(d4) " "; }
  *[autonumbering] .table-of-contents li[data-depth="5"] {
    counter-reset: d6; }
    *[autonumbering] .table-of-contents li[data-depth="5"]::before {
      counter-increment: d5;
      content: counter(d2) "." counter(d3) "." counter(d4) "." counter(d5) " "; }
  *[autonumbering] .table-of-contents li[data-depth="6"]::before {
    counter-increment: d6;
    content: counter(d2) "." counter(d3) "." counter(d4) "." counter(d5) "." counter(d6) " "; }
  *[autonumbering] .table-of-contents li[data-depth]::before {
    font-weight: bold;
    font-variant-numeric: tabular-nums; }

*[autonumbering] caption {
  counter-increment: table; }
  *[autonumbering] caption::before {
    content: "Table " counter(table) ": "; }

*[autonumbering] figcaption {
  counter-increment: figure; }
  *[autonumbering] figcaption::before {
    content: "Figure " counter(figure) ": "; }

.site-header {
  --color-bg: hsl(210deg, 100%, 10%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000d1a; }

.site-masthead {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  text-decoration: none;
  color: inherit;
  padding-block: 1rem; }

.site-icon {
  height: 3rem;
  width: 3rem;
  margin-inline-end: 1.5rem;
  border-radius: 100rem;
  padding: 0.5rem; }

.bubble-left {
  grid-column: 2;
  place-self: center start;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: relative;
  background-color: var(--color-bg); }
  .bubble-left::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0.125rem;
    left: -0.75rem;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
    border-right: 1rem solid var(--color-bg); }

.site-footer {
  background-color: #000d1a; }

blockquote {
  margin-inline: 0;
  padding-inline: 1em;
  border-inline-start: 0.25rem solid var(--color-text); }

dl ul {
  padding-inline-start: 0; }

dt {
  font-weight: bold; }

dd {
  margin-inline-start: 1em; }

ol, ul, dl, menu {
  max-inline-size: 100%; }

ol, ul, menu {
  padding-inline-start: 1em; }

:is(ol, ul, dl) :is(ol, ul, dl) {
  margin-block: 0;
  margin-inline-start: 0.25em; }

img, video, audio, object {
  max-inline-size: 100%;
  display: block;
  margin-block: 1lh; }

p {
  overflow-wrap: break-word; }

p img {
  display: inline;
  margin-block: unset; }

figure {
  background: #00264d;
  margin-inline: 0; }

figure figcaption {
  padding: 1rem;
  background: #000d1a; }

figure img,
figure video,
figure audio {
  display: block;
  width: 100%;
  margin-block: 0; }

figure blockquote {
  padding-block: 1lh; }

figure blockquote p:first-child {
  margin-block-start: 0; }

figure blockquote, figure blockquote p {
  margin-block-end: 0; }

hr {
  color: var(--color-text-faded);
  max-inline-size: 40%;
  margin-inline: auto;
  border: none;
  height: 1lh;
  position: relative; }
  hr::before {
    content: '∗ ∗ ∗';
    display: grid;
    place-items: center;
    color: var(--color-text);
    background: var(--color-bg);
    inline-size: max-content;
    margin-inline: auto;
    padding-inline: 1rem; }
  hr::after {
    --height: 0.125rem;
    content: '';
    position: absolute;
    inline-size: 100%;
    block-size: var(--height);
    inset-block-start: 0.5lh;
    inset-inline-start: 0;
    background: var(--color-text-faded);
    z-index: -1; }

.footnotes hr {
  max-inline-size: 100%; }
  .footnotes hr::before {
    content: 'Footnotes';
    margin-inline: unset;
    font-variant: small-caps;
    font-weight: bolder;
    padding-inline-start: 0; }
  .footnotes hr::after {
    inline-size: 100%; }

ins {
  background: green; }

del {
  background: red; }

mark {
  background: yellow;
  color: black; }

kbd:not(:has(kbd)) {
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-bg-underlay);
  border-inline-width: 0.25em;
  border-block-end-width: 0.5em;
  border-radius: 0.25em;
  padding-inline: 0.5em;
  padding-block: 0.25em; }

samp {
  background: black;
  color: green; }

b {
  font-weight: normal;
  font-size: 1.5em; }

i {
  font-family: serif; }

u[title] {
  text-decoration-style: wavy;
  text-decoration-thickness: 0.125em;
  text-decoration-color: red;
  text-underline-offset: 0.25em; }

s {
  text-decoration-color: red;
  text-decoration-thickness: 0.25em;
  text-decoration-style: solid; }

time {
  display: inline-grid;
  grid-template-columns: 1em 1fr;
  place-items: center;
  gap: 0.25em;
  background: var(--color-bg-overlay);
  padding-inline: 0.5em;
  border-radius: 100rem;
  font-size: var(--font-size-small);
  box-sizing: border-box;
  transform: translateY(0.125em); }
  time::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4.44.44A1.5 1.5 0 0 1 5.5 0h3A1.5 1.5 0 0 1 10 1.5v1.344A5.12 5.12 0 0 1 12.125 7A5.12 5.12 0 0 1 10 11.156V12.5A1.5 1.5 0 0 1 8.5 14h-3A1.5 1.5 0 0 1 4 12.5v-1.344A5.12 5.12 0 0 1 1.875 7A5.12 5.12 0 0 1 4 2.844V1.5c0-.398.158-.78.44-1.06M7 4.25c.345 0 .625.28.625.625v1.866l1.067 1.067a.625.625 0 1 1-.884.884l-1.25-1.25A.63.63 0 0 1 6.375 7V4.875c0-.345.28-.625.625-.625M3.125 7a3.875 3.875 0 1 1 7.75 0a3.875 3.875 0 0 1-7.75 0' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%; }

ruby {
  ruby-position: under; }

small {
  color: var(--color-text-faded); }

pre {
  max-inline-size: 100%;
  overflow-inline: scroll;
  padding-inline: 1em;
  padding-block: 0.5em; }

pre:has(code) {
  background: var(--color-bg-underlay);
  color: var(--color-text); }

pre code {
  display: contents; }

pre:has(samp) {
  background: black;
  color: #00ff00; }
  pre:has(samp) samp {
    color: inherit; }
  pre:has(samp) kbd {
    background: unset;
    padding: unset; }

table {
  display: block;
  max-inline-size: 100%;
  overflow-inline: scroll; }

:root {
  --inline-start-space: 1rem;
  --inline-end-space: 1rem;
  --block-start-space: 4rem; }

/* === utility classes === */
/* semantic elements shouldn't affect the presentation */
.hidden {
  display: none; }

.wrapper {
  display: contents; }

.inline {
  display: inline; }

/* === resets and common alignment === */
body {
  margin: 0; }

main,
.site-header,
.site-footer {
  padding-inline-start: var(--inline-start-space);
  padding-inline-end: var(--inline-end-space); }

/* add more whitespace when the viewport has enough space */
@media (min-width: 22.5rem) {
  :root {
    --inline-start-space: 2rem;
    --inline-end-space: 2rem; } }

@media (min-width: 25rem) {
  :root {
    --inline-start-space: 4rem; } }

/* === headings === */
h1 a,
h2 a {
  text-decoration: none; }

h2 {
  background: var(--color-bg-overlay);
  padding-block: 1rem;
  padding-inline-end: 1rem;
  padding-inline-start: var(--inline-start-space);
  margin-inline-start: calc(-1 * var(--inline-start-space)); }

h3 {
  max-width: 80%; }

h3, h3 a {
  text-decoration-style: solid;
  text-decoration-color: var(--color-bg-overlay);
  text-decoration-line: underline;
  text-decoration-thickness: 0.25em;
  text-decoration-skip-ink: none;
  text-underline-offset: 0em;
  transition: all 250ms ease-in; }

h3 a:hover {
  text-underline-offset: 0.25em; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit !important; }

/* === home.html === */
main.home {
  max-width: 80ch; }

/* === page.html, article.html === */
main.page, main.article {
  max-inline-size: 80ch; }

.frontmatter {
  border-block-end: 0.25rem dotted var(--color-text-faded);
  margin-bottom: 4rem; }
  .frontmatter .description {
    font-style: italic; }
  .frontmatter .authors {
    font-style: normal; }
    .frontmatter .authors a {
      color: inherit;
      text-decoration: none; }
    .frontmatter .authors .h-card {
      display: inline-grid;
      grid-template-columns: auto 1fr;
      gap: 1rem;
      place-items: center; }
    .frontmatter .authors .u-logo, .frontmatter .authors .u-photo {
      margin-block: 0;
      border-radius: 100rem; }
    .frontmatter .authors .p-name {
      font-weight: bold;
      place-self: center start; }
  .frontmatter .date {
    margin-block-end: 0; }
  .frontmatter .metrics {
    margin-block: 0; }
  .frontmatter .syndication-hint {
    margin-block-end: 0; }
  .frontmatter .syndication-list {
    margin-block-start: 0; }

@media (min-width: 66rem) {
  :is(main.article, main.page):has(.table-of-contents) {
    --sidebar-inline-size: 20rem;
    position: relative;
    max-inline-size: 80ch;
    padding-inline-end: calc(var(--sidebar-inline-size) + var(--inline-start-space));
    /* sticky elements need a container with known height */ }
    :is(main.article, main.page):has(.table-of-contents) .table-of-contents-wrapper {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 0;
      block-size: 100%;
      /* match content height */ }
    :is(main.article, main.page):has(.table-of-contents) .table-of-contents {
      inline-size: var(--sidebar-inline-size);
      /* stick to the top */
      position: sticky;
      inset-block-start: 2rem;
      overflow-block: scroll;
      padding-inline-end: var(--inline-end-space);
      block-size: 80dvh;
      overflow-block: scroll;
      scrollbar-width: auto;
      scrollbar-gutter: stable;
      padding-block-start: 0.4em; }
    :is(main.article, main.page):has(.table-of-contents) :is(main.article, main.page):not(:has(.table-of-contents)) {
      max-inline-size: 80ch; } }