html {
  color-scheme: light dark;
  background: light-dark(white, #121212);
  font-family: system-ui;
  margin: 8px;
}


body {
  max-width: 700px;
  padding: 32px 24px;
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  gap: 8px;

  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 32px;
  }

  a {
    color: light-dark(darkslategray, #89a);
    text-decoration: none;
    font-size: large;
    font-weight: bold;
  }

  h1 {
    color: light-dark(darkslategray, #89a);
    font-size: large;
    margin: 0;
  }
}

article {
  padding: 48px 0;

  h1 {
    font-size: xx-large;
    margin-top: 0;
    margin-bottom: 8px;
  }

  time {
    font-size: small;
    color: light-dark(darkslategray, lightslategray);
    display: block;
    margin-bottom: 2rem;
  }

  p, li {
    line-height: 1.75;
    @media (resolution >=  200dpi) {
      font-size: 1.125rem;
    }

    code {
      background: light-dark(#f6f6f6, #222);
      border: 1px solid light-dark(#ddd, #333);
      border-radius: 6px;
      padding: 2px;
      &:first-child {
        margin-left: -2px;
      }
    }
  }

  p {
    margin: 1.5em 0;
  }

  li {
    margin: 0.2lh 0;
  }
}

pre {
  background: light-dark(#f6f6f6, #1a1a1a);
  border-radius: 10px;
  line-height: 1.5;
  overflow: auto;
  padding: 24px;
  margin: 12px -24px;
  font-size: 0.85rem;

  .comment {
    color: light-dark(#5e656e, #9198a1);
  }

  .punctuation {
    color: light-dark(#24292f, #f0f6fc);
  }

  .property,
  .tag,
  .boolean,
  .constructor,
  .constant,
  .label,
  .link_uri,
  .number,
  .string.special,
  .text.literal,
  .title {
    color: light-dark(#0550ae, #79c0ff);
  }

  .title {
    font-weight: 700;
  }

  .string,
  .string.regex,
  .link_text {
    color: light-dark(#0a3069, #a5d6ff);
  }

  .function {
    color: light-dark(#8250df, #d2a8ff);
  }

  .variable,
  .operator,
  .primary {
    color: light-dark(#0a3069, #a5d6ff);
  }

  .keyword,
  .embedded,
  .preproc {
    color: light-dark(#cf222e, #ff7b72);
  }

  .emphasis,
  .link_text {
    font-style: italic;
  }
  .emphasis.strong {
    font-weight: 700;
  }
}

.dot {
  background: light-dark(#f6f6f6, #1a1a1a);
  border-radius: 10px;
  padding: 24px;
  margin: 12px -24px;

  svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;

    text {
      font-family: system-ui;
      font-size: 12px;
      fill: light-dark(black, white);
    }

    .node {
      ellipse, path {
        fill: light-dark(white, #333);
        stroke: light-dark(black, #aaa);
      }
    }

    .edge {
      path {
        stroke: light-dark(black, white);
      }

      polygon {
        fill: light-dark(black, white);
        stroke: light-dark(black, white);
      }
    }

    .cluster path {
      fill: light-dark(white, #121212);
      stroke: light-dark(black, #aaa);
    }
  }
}
