@keyframes scaleProgress {
  0% {
    scale: 0 1;
  }
  100% {
    scale: 1 1;
  }
}

a {
  color: var(--atw-accent-secondary);
}

blockquote {
  margin: var(--g12) var(--g6);

  & p {
    font-size: 180%;
    font-style: italic;
    line-height: 1.4;
    background-image: linear-gradient(
        34deg,
        oklch(from var(--atw-accent-primary) calc(l - 0.1) c h / 0.9) -10%,
        oklch(from var(--atw-accent-primary) calc(l - 0.1) c h / 0) 81%
      ),
      linear-gradient(
        -45deg,
        oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0.9) -5%,
        oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0) 108%
      );

    color: transparent;
    text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

aside.boxout {
  margin: var(--g12) var(--g6);
  padding: var(--g4);
  border-radius: var(--g8);
  border: 1px solid oklch(from var(--atw-neutral-900) l c h / 0.2);
  color: oklch(from var(--atw-neutral-900) l c h / 0.55);
  transition: color 0.2s cubic-bezier(0, 0, 0.3, 1);

  &:hover {
    color: var(--atw-neutral-900);
  }

  & h1 {
    margin: 0;
    font-size: 180%;
    line-height: 1.4;
    width: max-content;
    background-image: linear-gradient(
        34deg,
        oklch(from var(--atw-accent-primary) calc(l - 0.1) c h / 0.9) -10%,
        oklch(from var(--atw-accent-primary) calc(l - 0.1) c h / 0) 81%
      ),
      linear-gradient(
        -45deg,
        oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0.9) -5%,
        oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0) 108%
      );

    color: transparent;
    text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    & a.header-anchor {
      display: none;
    }
  }
}

#masthead {
  --masthead-background: var(
      --title-image,
      linear-gradient(var(--atw-neutral-0) 0%, var(--atw-neutral-0) 100%)
    )
    center center / cover no-repeat;
}

@media screen and (min-resolution: 2dppx) {
  #masthead {
    --masthead-background: var(
        --title-image-2x,
        linear-gradient(var(--atw-neutral-0) 0%, var(--atw-neutral-0) 100%)
      )
      center center / cover no-repeat;
  }
}

.tutorials-listing {
  background: linear-gradient(
      134deg in oklch,
      oklch(from var(--atw-accent-primary) l c h / 0.63) -400px,
      oklch(from var(--atw-accent-primary) l c h / 0) 500px
    ),
    linear-gradient(
      -165deg in oklch,
      oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0.4) -400px,
      oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0) 600px
    ),
    linear-gradient(
      123deg in oklch,
      oklch(from var(--atw-accent-primary) l c h / 0) 95%,
      oklch(from var(--atw-accent-primary) l c h / 0.83) 115%
    ),
    linear-gradient(
      165deg in oklch,
      oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0) 85%,
      oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0.74) 110%
    ),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzI1IiBoZWlnaHQ9IjEzMjUiIGZpbGw9Im5vbmUiPjxjaXJjbGUgY3g9IjY2Mi41IiBjeT0iNjYyLjUiIHI9IjY2MiIgc3Ryb2tlPSIjZmZmIiBvcGFjaXR5PSIuMSIvPjxjaXJjbGUgY3g9IjY2OCIgY3k9IjY2OCIgcj0iMzgyLjUiIHN0cm9rZT0iI0ZGRDcwNyIgb3BhY2l0eT0iLjUiLz48Y2lyY2xlIGN4PSI2NjgiIGN5PSI2NjgiIHI9IjUxOC41IiBzdHJva2U9IiM4MUZGRkYiIG9wYWNpdHk9Ii4yNSIvPjwvc3ZnPg==')
      top center / contain no-repeat;

  & #listing-masthead {
    min-height: 75svh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    & #listing-description {
      margin: 0 0 var(--g12) 0;
      text-align: center;
      font: var(--atw-body);
      color: oklch(
        from var(--atw-accent-secondary) calc(l + 0.14) calc(c - 0.08) h
      );
      font-size: 14px;
      line-height: 1.4;
      width: 80vw;
      max-width: 640px;
    }
  }

  h2 {
    display: flex;
    align-items: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
      content: '';
      height: 1px;
      flex: 1;
      background: oklch(from var(--atw-neutral-900) l c h / 0.35);
      margin: var(--g2);
    }
  }

  .posts {
    list-style: none;
    display: grid;
    padding: 0 var(--g4);
    margin: 0 auto var(--g32) auto;
    max-width: 860px;
    row-gap: var(--g12);

    &.older {
      row-gap: var(--g6);
    }

    & a {
      text-decoration: none;

      & .meta {
        transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
        opacity: 0.6;
      }

      & .title {
        display: flex;
        font: normal 800 18px/1.4 var(--atw-title-font);
        text-transform: uppercase;
        color: var(--atw-neutral-900);
        margin: var(--g5) 0 var(--g) 0;
        transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
        opacity: 0.6;
      }

      & .reading-time {
        margin-right: var(--g3);
      }

      & .date {
        position: relative;

        &::before {
          content: '';
          display: block;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: var(--atw-accent-secondary);
          position: absolute;
          top: 50%;
          left: calc(-1px + var(--g2) * -1);
          transform: translateY(-2px);
        }
      }

      & .post-head {
        position: relative;
        display: flex;
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: var(--g2);
        background: linear-gradient(
            123deg in oklch,
            oklch(from var(--atw-accent-primary) l c h / 0) 65%,
            oklch(from var(--atw-accent-primary) l c h / 0.43) 115%
          ),
          linear-gradient(
            165deg in oklch,
            oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0) 45%,
            oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0.4) 130%
          ),
          linear-gradient(
            oklch(from var(--atw-neutral-0) l c h / 0.85) 0%,
            oklch(from var(--atw-neutral-0) l c h / 0.85) 100%
          );

        &::before {
          content: '';
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 0;
          border-radius: var(--g2);
          box-shadow: 0 12px 96px
            oklch(from var(--atw-accent-primary) l c h / 0.3);
        }

        & img {
          transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
          opacity: 0.75;
          aspect-ratio: 16/9;
          width: 100%;
          object-fit: cover;
          border-radius: var(--g2);
          filter: grayscale(100%) contrast(1.3);
          position: relative;
          z-index: 1;
        }
      }

      &:hover {
        & .post-head img {
          opacity: 1;
        }

        & .title,
        & .meta {
          opacity: 1;
        }
      }
    }
  }
}

#masthead {
  overflow: hidden;
  height: 100svh;
  background: linear-gradient(
      -20deg in oklch,
      oklch(from var(--atw-accent-primary) l c h / 0.65) -15%,
      oklch(from var(--atw-accent-primary) l c h / 0) 48%
    ),
    linear-gradient(
      24deg in oklch,
      oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0.65) -10%,
      oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0) 45%
    ),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzI1IiBoZWlnaHQ9IjEzMjUiIGZpbGw9Im5vbmUiPjxjaXJjbGUgY3g9IjY2Mi41IiBjeT0iNjYyLjUiIHI9IjY2MiIgc3Ryb2tlPSIjZmZmIiBvcGFjaXR5PSIuMSIvPjxjaXJjbGUgY3g9IjY2OCIgY3k9IjY2OCIgcj0iMzgyLjUiIHN0cm9rZT0iI0ZGRDcwNyIgb3BhY2l0eT0iLjUiLz48Y2lyY2xlIGN4PSI2NjgiIGN5PSI2NjgiIHI9IjUxOC41IiBzdHJva2U9IiM4MUZGRkYiIG9wYWNpdHk9Ii4yNSIvPjwvc3ZnPg==')
      center center / contain no-repeat,
    linear-gradient(
      oklch(from var(--atw-accent-secondary) calc(l - 0.6) c h / 0.2) 0%,
      oklch(from var(--atw-accent-secondary) calc(l - 0.6) c h / 0.2) 100%
    ),
    var(--masthead-background);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0 0 0 1px
    oklch(from var(--atw-accent-secondary) calc(l + 0.1) c h / 0.65);
  margin-bottom: var(--g8);

  & canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }

  & .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 var(--g2) 20svh var(--g2);

    & h1 {
      margin: 0;
      text-align: center;
      hyphens: auto;
      width: 80vw;
      max-width: 800px;
      font-size: var(--title-font-size, 44px);
      line-height: 1.2;
      margin-bottom: var(--g3);
    }

    & #blog-date {
      margin: 0 0 var(--g3) 0;
      text-align: center;
      font: var(--atw-body);
      text-transform: capitalize;
      color: var(--atw-accent-primary);
      display: flex;
      align-items: center;
      width: 80vw;
      max-width: 960px;

      &:before,
      &:after {
        content: '';
        height: 1px;
        flex: 1;
        background: oklch(from var(--atw-neutral-900) l c h / 0.35);
        margin: var(--g2);
      }
    }

    & #blog-description {
      margin: 0 0 var(--g12) 0;
      text-align: center;
      font: var(--atw-body);
      color: oklch(
        from var(--atw-accent-secondary) calc(l + 0.14) calc(c - 0.08) h
      );
      font-size: 14px;
      line-height: 1.4;
      width: 80vw;
      max-width: 640px;
    }

    & .meta {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr;
      row-gap: var(--g);
      align-items: center;
      justify-content: center;
      font: normal 800 13px/1 var(--atw-title-font);
      text-transform: uppercase;
      color: var(--atw-accent-secondary);
      margin: 0;
      padding: 0;

      & li {
        padding: 0 0 0 var(--g3);
        position: relative;
        text-align: center;

        &:first-of-type {
          padding-left: 0;
        }

        & a {
          text-decoration: none;
          color: var(--atw-accent-secondary);
        }
      }
    }
  }
}

#content {
  padding: var(--g4) var(--g2) var(--g32) var(--g2);
  max-width: 800px;
  margin: 0 auto;

  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: var(--g);
    width: 100svw;
    background: oklch(from var(--atw-accent-secondary) calc(l - 0.4) c h);
    transform-origin: 0 0;
    z-index: 100;

    animation-timeline: scroll(root block);
    animation-name: scaleProgress;
    animation-duration: auto;
    animation-timing-function: linear;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: oklch(from var(--atw-neutral-900) l c h / 0.6);
    transition: color 0.2s cubic-bezier(0, 0, 0.3, 1);

    &:hover {
      color: var(--atw-neutral-900);
    }
  }

  .series {
    padding-bottom: var(--g6);
    margin-bottom: var(--g12);
    border-bottom: 1px solid oklch(from var(--atw-neutral-900) l c h / 0.3);

    & h1 {
      font-size: 14px;
      margin-top: 0;
    }

    & ul li {
      padding-bottom: var(--g2);
      margin-bottom: 0;
    }
  }

  & h2 {
    position: relative;

    & a {
      opacity: 0.4;
      top: var(--g5);
      left: calc(-24px - var(--g2));
      position: absolute;
      font-size: 0;
      width: 24px;
      height: 24px;
      background: var(--icon-link-alt) center center / 24px 24px no-repeat;
      transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);

      &:hover,
      &:focus {
        opacity: 1;
      }
    }
  }

  & table {
    width: 100%;
    padding: 0;
    border: 1px solid oklch(from var(--atw-neutral-900) l c h / 0.3);
    border-radius: var(--g);

    thead {
      text-transform: uppercase;
      font-family: var(--atw-title-font);
      font-size: 18px;
      text-align: left;
    }

    tbody td:first-of-type {
      color: oklch(from var(--atw-neutral-900) l c h / 0.6);
    }

    thead th {
      padding: var(--g2);
    }

    tbody {
      td {
        padding: var(--g2);
      }

      tr:nth-child(2n + 1) td {
        background: oklch(from var(--atw-accent-secondary) l c h / 0.1);
      }
    }
  }

  & h3 {
    font-size: 20px;

    & a {
      display: none;
    }
  }

  & h4 {
    font-size: 14px;

    & a {
      display: none;
    }
  }

  & .youtube-embed,
  & figure {
    width: 100%;
    margin: 0;
    padding: var(--g3) var(--g5);
    text-align: center;
    color: var(--atw-accent-secondary);

    & img {
      margin: 0 auto;
      max-width: 100%;
      background-color: var(--atw-neutral-900);
      border-radius: var(--g);
    }
  }

  strong {
    font-weight: 700;
  }

  li {
    margin: 0 0 var(--g3) 0;
  }

  & ol {
    margin: var(--g3) 0 var(--g4) 0;
    padding: 0 0 0 var(--g12);
    list-style-type: upper-roman;

    & li::marker {
      color: oklch(from var(--atw-neutral-900) l c h / 0.5);
    }
  }

  & ul {
    margin: var(--g3) 0 var(--g4) 0;
    list-style: none;
    padding: 0 0 0 var(--g12);

    & li {
      position: relative;

      &::before {
        content: '';
        width: 10px;
        height: 10px;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjQuNSIgc3Ryb2tlPSIjZmZmZmZmIi8+PC9zdmc+')
          center center / 10px 10px no-repeat;
        border-radius: 50%;
        position: absolute;
        left: -18px;
        top: 8px;
      }
    }
  }
}

footer {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--g8) var(--g3) var(--g3) var(--g14);
  background: var(--atw-neutral-0);

  &::before {
    height: 90px;
    content: '';
    width: 100%;
    position: absolute;
    background: linear-gradient(
        3deg in oklch,
        oklch(from var(--atw-accent-primary) l c h / 0.3) -10%,
        oklch(from var(--atw-accent-primary) l c h / 0) 68%
      ),
      linear-gradient(
        -4deg in oklch,
        oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0.3) -10%,
        oklch(from var(--atw-accent-secondary) calc(l - 0.1) c h / 0) 35%
      );
    top: -90px;
    left: 0;
  }

  & .disclaimer {
    flex: 1;
    max-width: 860px;
    text-align: center;
    font-size: 12px;
  }

  & .links {
    display: flex;
    margin-left: var(--g8);
    width: 60px;
  }

  #github,
  #bluesky {
    display: block;
    width: 24px;
    height: 24px;
    font-size: 0;
    opacity: 0.4;
    transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
  }

  #github {
    margin-right: var(--g4);
    background: var(--icon-github) center center / contain no-repeat;
  }

  #bluesky {
    background: var(--icon-bluesky) center center / contain no-repeat;
  }

  #github:hover,
  #github:focus,
  #bluesky:hover,
  #bluesky:focus {
    opacity: 1;
  }
}

@media screen and (min-width: 460px) {
  .tutorials-listing {
    & .posts.older {
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--g8);
    }

    #listing-masthead #listing-description {
      font-size: 16px;
      line-height: 1.6;
    }
  }

  #masthead .container {
    & #blog-date {
      font-size: 16px;
    }

    & #blog-description {
      font-size: 16px;
      line-height: 1.6;
    }

    & h1 {
      font-size: var(--title-font-size-2, 60px);
    }
  }
}

@media screen and (min-width: 640px) {
  .tutorials-listing {
    & #listing-masthead #listing-description {
      font-size: 18px;
    }
  }

  #masthead .container {
    & #blog-date {
      font-size: 18px;
    }

    & #blog-description {
      font-size: 18px;
    }

    & h1 {
      font-size: 60px;
    }

    & .meta {
      display: flex;

      & li {
        &:not(:first-of-type)::before {
          content: '';
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: var(--atw-accent-secondary);
          position: absolute;
          top: 50%;
          left: var(--g);
          transform: translateY(-2px);
        }
      }
    }
  }
}

@media screen and (min-width: 960px) {
  .tutorials-listing {
    & .posts.older {
      grid-template-columns: repeat(3, 1fr);
      column-gap: var(--g8);
    }

    #listing-masthead #listing-description {
      font-size: 20px;
      line-height: 1.6;
    }
  }

  #masthead {
    margin-bottom: var(--g14);

    & .container {
      & #blog-date {
        font-size: 20px;
      }

      & #blog-description {
        font-size: 20px;
        line-height: 1.6;
      }
    }
  }
}

@media screen and (min-width: 1320px) {
  #masthead {
    margin-bottom: var(--g18);
  }

  #content {
    width: 660px;
    position: relative;

    & .series,
    & blockquote,
    & aside.boxout {
      float: right;
      margin: var(--g6) -200px var(--g6) var(--g12);
      max-width: 400px;
      border-bottom: 0;
    }

    & h2 {
      position: sticky;
      top: 0;
      max-width: 310px;
      font-size: 32px;
      transform: translateX(-100%) translateX(-16px);
      height: 0;
      z-index: 0;
      padding-left: 30px;

      &::before {
        content: '';
        background: linear-gradient(
          to top,
          var(--atw-neutral-0),
          oklch(from var(--atw-neutral-0) l c h / 0)
        );
        position: absolute;
        width: 100%;
        height: 40px;
        left: 0;
        top: -40px;
        z-index: -1;
      }

      &::after {
        content: '';
        background: var(--atw-neutral-0);
        position: absolute;
        width: 100%;
        height: 50svh;
        left: 0;
        top: 0;
        z-index: -1;
      }

      &:last-of-type::before {
        height: 100px;
      }

      & a {
        top: var(--g3);
        left: 0;
      }
    }
  }

  footer {
    padding: var(--g8) var(--g12) var(--g12) var(--g24);
  }
}

@media screen and (min-width: 1440px) {
  #masthead .container {
    & #blog-date {
      font-size: 22px;
    }

    & h1 {
      max-width: 1260px;
    }

    & #blog-date {
      max-width: 1160px;
    }
  }
}

@media print {
  #masthead {
    height: auto;
  }

  canvas {
    display: none;
  }
}