:root {
  color-scheme: light dark;

  --action-background: light-dark(#fff, #1d1d1d);
  --action-hover: light-dark(#f4f4f4, #2b2b2b);
  --border-color: light-dark(#ddd, #3a3a3a);
  --divider-color: light-dark(#eee, #303030);
  --page-background: light-dark(#fff, #111);
  --page-color: light-dark(#111, #f4f4f4);
  --pill-color: light-dark(#1d1d1f, #f4f4f4);
  --pill-hover-background: light-dark(#272729, #f4f4f4);
  --pill-hover-color: light-dark(#fff, #111);
  --rule-color: rgb(221, 221, 221);
  --soft-color: light-dark(#555, #b8b8b8);
  --support-background: light-dark(#fff, #ababab);
}

body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-width: 960px;
  min-height: calc(100vh - 96px);
  min-width: 240px;
  margin: 48px auto;
  padding: 0 16px;
  background: var(--page-background);
  color: var(--page-color);
  font:
    16px/1.6 system-ui,
    sans-serif;

  a {
    color: inherit;
  }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;

    h1 {
      margin: 0;
      color: var(--page-color);
      font-size: 21px;
      font-weight: 600;
      letter-spacing: 0.011em;
      line-height: 1.1904761905;

      a {
        text-decoration: none;
      }
    }

    nav {
      flex: 0 0 auto;
      display: flex;
      gap: 8px;

      .page-action {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--action-background);
        color: inherit;
        cursor: pointer;

        svg {
          width: 20px;
          height: 20px;
        }

        &:has(svg > use[href=""]) {
          display: none;
        }
      }

      .page-action:hover {
        background: var(--action-hover);
      }
    }
  }

  & > nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 20px 0 40px;

    &:not(:has(*)) {
      display: none;
    }

    button {
      box-sizing: content-box;
      min-width: 28px;
      padding: 8px 15px;
      border: 1px solid var(--pill-color);
      border-radius: 980px;
      background: #0000;
      color: var(--pill-color);
      cursor: pointer;
      font-family:
        "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
      font-size: 14px;
      font-style: normal;
      font-synthesis: none;
      font-weight: 400;
      letter-spacing: -0.016em;
      line-height: 1.4285914286;
      text-align: center;
      white-space: nowrap;
      -webkit-font-smoothing: antialiased;

      &:hover,
      &[aria-pressed="true"] {
        background: var(--pill-hover-background);
        color: var(--pill-hover-color);
      }
    }
  }

  main {
    min-width: 0;

    details:open {
      /* TODO this section is made quick-and-dirty, to be cleaned */
      border: 1px solid #0000006b;
      border-radius: 13px;
      padding: 8px 17px 17px 17px;
      margin-top: 28px;
      margin-left: -15px;

      summary {
        margin: -21px 0 0 -3px;
        background-color: white;
        width: fit-content;
      }
    }

    figure {
      margin: 0;

      figcaption {
        font-style: italic;
        font-size: 85%;
      }
    }

    video,
    iframe,
    canvas {
      max-width: 100%;
    }

    video,
    canvas {
      height: auto;
    }

    img[alt="center70"],
    img[alt="center50"] {
      display: block;
      margin-inline: auto;
      margin: 2.5rem auto; /* --base-size-40 in markdown.css */
    }

    img[alt="center70"] {
      max-width: 70%;
    }

    img[alt="center50"] {
      max-width: 50%;
    }

    svg:not([width]):not([height]) {
      display: block;
      width: min(100%, 45rem);
      height: auto;
      aspect-ratio: 2 / 1;
      margin: 2rem auto;
    }

    table {
      display: block;
      overflow-x: auto;
    }

    .markdown-body {
      blockquote:has(+ blockquote) {
        margin-bottom: 2.5rem; /* --base-size-40 in markdown.css */
      }
    }

    article {
      margin-top: 26px;

      > a {
        display: block;
        text-decoration: none;
      }

      > a > div {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.875rem;
        color: var(--soft-color);
        font-size: 14px;
        line-height: 1.4285714286;

        .tag {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          margin-right: 0;

          &::before {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--soft-color);
            content: "";
            opacity: 0.5;
          }
        }
      }

      h4 {
        margin: 0 0 0.875rem;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.3157894737;
      }

      p {
        margin: 0;
        color: var(--page-color);
        font-size: 14px;
        line-height: 1.5625;
      }
    }

    article + article {
      border-top: 1px solid var(--divider-color);
      padding-top: 26px;
    }
  }

  footer {
    display: flex;
    justify-content: center;
    margin-top: 56px;
    padding: 24px 0 8px;
    border-top: 1px solid var(--rule-color);

    a:has(img) {
      padding: 6px;
      border-radius: 6px;
      background: var(--support-background);

      img {
        display: block;
        width: 205px;
      }
    }
  }
}

@media (max-width: 520px) {
  body {
    min-height: calc(100vh - 48px);
    margin: 16px auto 32px;
  }

  header {
    gap: 12px;
  }

  footer {
    margin-top: 44px;
    padding-top: 20px;
  }
}