@charset "UTF-8";
@layer reset, base, components, layout, utilities;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  html:focus-within {
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    min-height: 100svh;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1 {
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }
  img,
  picture {
    /* partially based on https://twitter.com/csswizardry/status/1717841334462005661 */
    display: block;
    max-width: 100%;
    height: auto;
    font-style: italic;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }
  svg {
    width: 50px;
  }
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer base {
  :root {
    --font-serif: Gloock, "Georgia Pro", Georgia, Superclarendon,
      "Bookman Old Style", "URW Bookman", "URW Bookman L", serif;
    --font-sans-serif: "Source Sans 3", Bahnschrift, "DIN Alternate",
      "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed,
      sans-serif;
    --font-monospace: Fira Mono, Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
      monospace;
    --font-size--sm: 0.9em;
    --blue-1: hsl(211deg 95% 10%);
    --blue-2: hsl(211deg 89% 22%);
    --blue-3: hsl(211deg 89% 30%);
    --blue-4: hsl(211deg 90% 40%);
    --blue-5: hsl(211deg 90% 50%);
    --blue-6: hsl(211deg 90% 63%);
    --blue-7: hsl(211deg 90% 70%);
    --blue-8: hsl(211deg 100% 80%);
    --blue-9: hsl(211deg 100% 90%);
    --blue-sub-8: hsl(211deg 70% 80%);
    --red-4: hsl(344deg 100% 40%);
    --red-5: hsl(344deg, 96%, 48%);
    --red-7: hsl(344deg 100% 65%);
    --white: hsl(211deg 10% 96%);
    --black: hsl(211deg 10% 15%);
    /* deprecated colors */
    --bg-color--main: var(--black);
    --bg-color--sub: hsl(211deg 10% 30%);
    --bg-color--sup: hsl(211deg 10% 10%);
    --font-color--main: var(--white);
    --font-color--sub: hsl(211deg 10% 70%);
    --font-color--mid: hsl(211deg 10% 50%);
    /* end deprecated */
    --link-color: var(--blue-6);
    --bg-mask-transparent: hsl(211deg 10% 96% / 0.1);
    --foreground-1: hsl(211deg 10% 96%);
    --foreground-2: hsl(211deg 10% 90%);
    --foreground-3: hsl(211deg 10% 65%);
    --foreground-4: hsl(211deg 10% 55%);
    --background-4: hsl(211deg 10% 40%);
    --background-3: hsl(211deg 10% 30%);
    --background-2: hsl(211deg 10% 21%);
    --background-1: hsl(211deg 10% 15%);
    --background-0: hsl(211deg 13% 14%);
    --background-neutral: hsl(211deg 10% 15%);
    --accent-hue: 211deg;
    --accent-bg-1: hsl(var(--accent-hue) 95% 10%);
    --accent-bg-2: hsl(var(--accent-hue) 89% 22%);
    --accent-bg-3: hsl(var(--accent-hue) 89% 30%);
    --accent-bg-4: hsl(var(--accent-hue) 90% 40%);
    --accent-mid: hsl(var(--accent-hue) 90% 50%);
    --accent-fg-4: hsl(var(--accent-hue) 90% 63%);
    --accent-fg-3: hsl(var(--accent-hue) 90% 70%);
    --accent-fg-2: hsl(var(--accent-hue) 100% 80%);
    --accent-fg-1: hsl(var(--accent-hue) 100% 90%);
    --purple: #862254;
    --content-width: 45rem;
    --spacer-sm: 0.6rem;
    --spacer-md: 1rem;
    --spacer-lg: 2rem;
    --spacer-xl: 4rem;
    --bleed-size: 1.5rem;
    --ease-out: cubic-bezier(0.245, 0.21, 0.265, 1.02);
    --ease-in: cubic-bezier(0.49, 0.15, 0.66, 0.925);
    --accent-color-1: hsl(179deg 100% 38%);
    --accent-color-2: hsl(344deg 100% 65%);
    --accent-color-3: hsl(31deg 100% 60%);
    --accent-color-4: hsl(211deg 95% 60%);
    --accent-color-active: var(--accent-color-4);
  }
  @supports (color: oklch(73% 0.17 192.64)) {
    :root {
      --accent-color-1: oklch(73.54% 0.169 192.64);
      --accent-color-2: oklch(68.15% 0.272 9.2);
      --accent-color-3: oklch(77.94% 0.203 62.136);
      --accent-color-4: oklch(66.67% 0.193 253.17);
    }
  }
  .theme--light,
  .theme--yellow {
    --bg-color--main: var(--white);
    --bg-color--sub: hsl(211deg 10% 84%);
    --bg-color--sup: hsl(211deg 10% 90%);
    --font-color--main: hsl(211deg 10% 20%);
    --font-color--sub: hsl(211deg 10% 30%);
    --background-0: hsl(211deg 10% 100%);
    --background-1: hsl(211deg 10% 96%);
    --background-2: hsl(211deg 10% 90%);
    --background-3: hsl(211deg 10% 65%);
    --background-4: hsl(211deg 10% 55%);
    --background-neutral: hsl(211deg 10% 96%);
    --foreground-4: hsl(211deg 10% 40%);
    --foreground-3: hsl(211deg 10% 30%);
    --foreground-2: hsl(211deg 10% 21%);
    --foreground-1: hsl(211deg 10% 15%);
    --foreground-0: hsl(211deg 10% 10%);
    --accent-fg-1: hsl(var(--accent-hue) 95% 10%);
    --accent-fg-2: hsl(var(--accent-hue) 89% 22%);
    --accent-fg-3: hsl(var(--accent-hue) 89% 30%);
    --accent-fg-4: hsl(var(--accent-hue) 90% 40%);
    --accent-mid: hsl(var(--accent-hue) 90% 50%);
    --accent-bg-4: hsl(var(--accent-hue) 90% 63%);
    --accent-bg-3: hsl(var(--accent-hue) 90% 70%);
    --accent-bg-2: hsl(var(--accent-hue) 100% 80%);
    --accent-bg-1: hsl(var(--accent-hue) 100% 90%);
    --bg-mask-transparent: hsl(211deg 10% 4% / 0.1);
    --accent-color-1: hsl(179deg 100% 28%);
    --accent-color-2: hsl(344deg 100% 45%);
    --accent-color-3: hsl(31deg 100% 50%);
    --link-color: var(--blue-2);
  }
  .theme--blue {
    --accent-hue: 211deg;
    --theme-color: hsl(211deg 100% 30%);
    --accent-color-active: var(--accent-color-4);
  }
  .theme--green {
    --accent-hue: 179;
    --theme-color: hsl(179deg 60% 30%);
    --accent-color-active: var(--accent-color-1);
    --link-color: var(--blue-8);
  }
  .theme--red {
    --accent-hue: 344deg;
    --theme-color: hsl(344deg 46% 35%);
    --accent-color-active: var(--accent-color-2);
  }
  .theme--yellow {
    --accent-hue: 31deg;
    --theme-color: hsl(31deg 54% 67%);
    --accent-color-active: var(--accent-color-3);
  }
  :root:is(.theme--blue, .theme--green, .theme--red, .theme--yellow) {
    --bg-color--main: var(--theme-color);
    --font-color--sub: var(--font-color--main);
    --font-color--mid: var(--font-color--main);
  }
  /*
  $blue-1: hsl(211, 100%, 10%);
  $blue-2: hsl(211, 65%, 18%);
  $blue-3: hsl(211, 57%, 25%);
  $blue-4: hsl(211, 39%, 44%);
  $blue-5: hsl(211, 51%, 65%);
  $blue-6: hsl(211, 65%, 85%);
  $blue-7: hsl(211, 90%, 93%);
  $blue-8: hsl(211, 80%, 95%);
  $blue-9: hsl(211, 50%, 96%);
  $blue-rich-1: hsl(211, 100%, 15%);
  $blue-rich-2: hsl(211, 100%, 22%);
  $blue-rich-3: hsl(211, 85%, 35%);
  $blue-rich-4: hsl(211, 65%, 48%);
  $blue-rich-5: hsl(211, 85%, 55%);
  $blue-rich-6: hsl(211, 95%, 65%);
  $blue-rich-7: hsl(211, 100%, 72%);

  $red-1: hsl(344, 100%, 15%);
  $red-2: hsl(344, 99%, 20%);
  $red-3: hsl(344, 98%, 27%);
  $red-4: hsl(344, 96%, 48%);
  $red-5: hsl(344, 98%, 65%);
  $red-6: hsl(344, 99%, 85%);
  $red-7: hsl(344, 100%, 93%);
  $red-sub-5: hsl(344, 66%, 65%);

  $green-1: hsl(179, 100%, 10%);
  $green-2: hsl(179, 100%, 14%);
  $green-3: hsl(179, 100%, 19%);
  $green-4: hsl(179, 100%, 24%);
  $green-5: hsl(179, 93%, 34%);
  $green-6: hsl(179, 73%, 50%);
  $green-7: hsl(179, 80%, 70%);
  $green-8: hsl(179, 90%, 80%);

  $yellow-1: hsl(31, 40%, 10%);
  $yellow-4: hsl(31, 80%, 60%);
  $yellow-5: hsl(31, 81%, 72%);
  $yellow-9: hsl(31, 90%, 97%);
  $yellow-sub-5: hsl(31, 50%, 72%);

  $purple: #862254;

  $black: $blue-1;
  $white: #fff;

  $gray-1: hsl(211, 13%, 10%);
  $gray-2: hsl(211, 11%, 14%);
  $gray-3: hsl(211, 9%, 22%);
  $gray-4: hsl(211, 7%, 34%);
  $gray-5: hsl(211, 7%, 48%);
  $gray-6: hsl(211, 9%, 63%);
  $gray-7: hsl(211, 9%, 74%);
  $gray-8: hsl(211, 11%, 85%);
  $gray-9: hsl(211, 14%, 93%);

  $container-wide: 62.5rem;

  */
  @font-face {
    font-family: "Gloock";
    font-style: normal;
    font-weight: 400 700;
    font-display: fallback;
    src: url("/fonts/gloock.woff2") format("woff2");
  }
  @font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: fallback;
    src: url("/fonts/source-sans-3.woff2") format("woff2");
  }
  :root {
    font-size: 1rem;
    font-size: clamp(1rem, 0.4rem + 0.8svw, 1.2rem);
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--bg-color--main);
    color: var(--font-color--main);
    font-family: var(--font-sans-serif);
    line-height: 1.4;
    font-weight: 350;
    transition: background-color 0.3s linear;
  }
  body.theme--light {
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  h1 {
    font-family: var(--font-serif);
    font-weight: normal;
    font-size: 2.4rem;
    text-wrap: balance;
    line-height: 1.2;
  }
  h2 {
    font-size: 1.25rem;
  }
  @media (min-width: 48em) {
    h1 {
      font-size: 4rem;
    }
    h2 {
      font-size: 2rem;
    }
  }
  a:any-link {
    color: var(--link-color);
  }
  :is(.post__body, .interactions, .footer, .recent-posts) a:any-link {
    color: var(--font-color--main);
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
    text-underline-offset: 0.3em;
    transition: all 0.1s var(--ease-out);
  }
  :is(.post__body, .interactions, .footer, .recent-posts) a:hover {
    text-decoration-color: var(--accent-color-active);
    text-underline-offset: 0.5em;
  }
  ::selection {
    background-color: hsl(211, 10%, 96%);
    color: hsl(211, 90%, 50%);
    background-color: hsl(211, 50%, 45%);
    color: hsl(211, 50%, 80%);
  }
  :root:has(.theme--light) ::selection,
  :root:has(.theme--yellow) ::selection {
    background-color: hsl(211, 60%, 64%);
    color: hsl(211, 50%, 20%);
  }
  code {
    font-family: var(--font-monospace);
    font-size: 0.9em;
  }
  blockquote {
    margin-inline: 0;
    padding-inline: var(--spacer-md);
    font-weight: 375;
    font-style: italic;
    letter-spacing: 0.01em;
    border-inline-start: 3px solid var(--accent-color-active);
  }
  .theme--dark blockquote {
    font-weight: 250;
  }
}
@layer components {
  .heading-clipped {
    margin-block: 0;
    font-family: var(--font-serif);
    font-size: 4rem;
    margin-block-start: -0.35em;
    text-align: end;
    opacity: 0.2;
  }
  @media (min-width: 62.5em) {
    .heading-clipped {
      font-size: 8rem;
      overflow-x: hidden;
    }
    .heading-clipped div {
      margin-inline-end: -0.1em;
    }
  }
  .page-header {
    --header-bg: var(--bg-color--main);
    --header-link-color: var(--font-color--main);
    --header-link-hover-color: var(--blue-7);
    --header-transition-in: color 0.1s linear;
    --header-transition-out: color 0.4s linear;
  }
  .theme--light .page-header, .theme--yellow .page-header {
    --header-link-hover-color: var(--blue-5);
  }
  body:has(.page-header.is-open) {
    overflow: hidden;
  }
  .page-header {
    display: flex;
    gap: var(--spacer-sm);
    align-items: baseline;
  }
  .page-header__menu {
    display: flex;
    gap: var(--spacer-sm);
    flex: 1;
  }
  .page-header__menu__title {
    display: none;
  }
  .page-header__toggle {
    display: none;
  }
  .page-header__name {
    margin-inline-start: calc(70px + var(--spacer-sm));
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 2.4;
    color: var(--font-color--main);
    opacity: 0.4;
  }
  @media (min-width: calc(45em + 1px)) and (max-width: calc(62.5em - 1px)) {
    .page-header.is-homepage .page-header__name {
      display: none;
    }
    .page-header.is-homepage .page-header__menu {
      margin-inline-start: calc(70px + var(--spacer-lg));
      line-height: 3;
    }
  }
  @media (max-width: 45em) {
    .page-header {
      display: block;
      position: relative;
      z-index: 2;
    }
    .page-header__logo,
    .page-header__name,
    .page-header__toggle {
      position: relative;
      z-index: 1;
    }
    .page-header__toggle {
      display: block;
      position: fixed;
      top: 2px;
      right: 2px;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      border: 0;
      background-color: var(--bg-color--main);
      opacity: 0.9;
      z-index: 2;
    }
    .page-header__toggle:active {
      opacity: 1;
    }
    .page-header__toggle::before, .page-header__toggle::after {
      content: "";
      position: absolute;
      right: 30%;
      left: 30%;
      height: 3px;
      top: 23px;
      border-radius: 2px;
      background-color: var(--font-color--main);
      cursor: pointer;
      transform: none;
      rotate: 0deg;
      transition: rotate 0.15s var(--ease-out), translate 0.15s var(--ease-out);
      transition-delay: 0s, 0.1s;
    }
    .page-header__toggle::before {
      translate: 0 -5px;
    }
    .page-header__toggle::after {
      translate: 0 5px;
    }
    .page-header__menu {
      display: flex;
      flex-direction: column;
      transform: scaleX(0);
      opacity: 0;
      overflow: auto;
      position: fixed;
      inset: 0;
      padding: 0 var(--spacer-md) var(--spacer-md) calc(70px + var(--spacer-sm));
      background: var(--bg-color--main);
      transition: opacity 0.3s linear, transform 0s linear;
      transition-delay: 0.2s, 0.5s;
      z-index: 1;
    }
    .page-header__menu__title {
      display: block;
      opacity: 0;
      transition: opacity 0.1s linear;
      transition-delay: 0s;
    }
    .page-header.is-docked .page-header__menu__title {
      transition: none;
      opacity: 1;
    }
    .page-header__menu__title .page-header__name {
      margin-inline-start: 0;
      margin-block: 0 var(--spacer-lg);
    }
    .page-header:is(.is-open) .page-header__toggle {
      cursor: pointer;
    }
    .page-header:is(.is-open) .page-header__toggle::before, .page-header:is(.is-open) .page-header__toggle::after {
      translate: 0;
      transition-delay: 0.1s, 0s;
    }
    .page-header:is(.is-open) .page-header__toggle::before {
      rotate: 45deg;
    }
    .page-header:is(.is-open) .page-header__toggle::after {
      rotate: -45deg;
    }
    .page-header:is(.is-open) .page-header__menu {
      transform: none;
      opacity: 1;
      transition-delay: 0s, 0s;
    }
    .page-header:is(.is-open) .page-header__menu__title {
      opacity: 1;
      transition-delay: 0.1s;
    }
    .page-header.is-homepage > .page-header__name {
      display: none;
    }
  }
  @media (min-width: 62.5em) {
    .page-header {
      display: block;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      max-width: 8rem;
    }
    .page-header__logo {
      position: absolute;
    }
    .page-header__name {
      margin-inline-start: 0;
      padding-block-start: 0.5rem;
      padding-inline-start: calc(70px + var(--spacer-lg));
      font-size: 2rem;
      line-height: 1.8;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.2s linear;
    }
    .page-header.is-docked:not(.is-homepage) .page-header__name {
      opacity: 0.4;
    }
    .page-header__menu {
      margin-inline-start: 0;
      margin-block-start: 2rem;
      flex-direction: column;
    }
  }
  .logo {
    --offset: 20px;
    --size: 80px;
    position: absolute;
    top: calc(var(--offset) * -1);
    left: calc(var(--offset) * -1);
    height: calc(var(--size) + var(--offset));
    width: calc(var(--size) + var(--offset));
    transition: color 0.2s linear;
    z-index: 1;
  }
  .logo a {
    color: var(--blue-7);
  }
  .theme--light .logo a, .theme--yellow .logo a {
    color: var(--blue-5);
  }
  .logo__inner {
    display: block;
    border-radius: 50%;
    background-color: var(--header-bg);
    line-height: 0;
    aspect-ratio: 1/1;
    transition: var(--header-transition-out);
  }
  .is-homepage > .page-header__logo .logo__inner {
    border: 1px solid currentColor;
  }
  .logo__inner:hover {
    color: var(--blue-7);
    transition: var(--header-transition-in);
  }
  .logo svg {
    width: var(--size);
    height: var(--size);
    margin-top: var(--offset);
    margin-left: var(--offset);
    padding: 8px 20px 20px 8px;
  }
  @media (max-width: 28em) {
    .logo {
      --size: 70px;
    }
  }
  @media (min-width: 62.5em) {
    .logo__inner {
      background-color: transparent;
      border: 1px solid currentColor;
    }
  }
  .page-nav {
    margin-block: unset;
    padding-inline-start: unset;
    list-style-type: none;
  }
  .page-nav a:any-link {
    text-decoration: none;
  }
  @media (max-width: 45em) {
    .page-nav {
      --max-width: 8rem;
      min-inline-size: 60svw;
      padding-inline-start: 5px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      font-size: 1.2rem;
    }
    .page-nav > li {
      --effect-color: var(--blue-7);
      position: relative;
      translate: calc(var(--max-width) * -1) 0;
      opacity: 0;
      transition: opacity 0.2s linear, translate 0.3s var(--ease-out);
      transition-delay: 0s;
    }
    .page-nav > li::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: var(--effect-color);
      transition: transform 0.5s var(--ease-out);
    }
    .page-nav > li:hover::before, .page-nav > li:focus-within::before, .page-nav > li:has(a:active)::before {
      transform: translateX(var(--max-width));
    }
    .page-nav > li:hover a, .page-nav > li:focus-within a, .page-nav > li:has(a:active) a {
      background-size: 100%;
    }
    .page-nav > li:nth-child(2) {
      transition-delay: 0.05s;
      --effect-color: var(--accent-color-2);
    }
    .page-nav > li:nth-child(3) {
      transition-delay: 0.1s;
      --effect-color: var(--accent-color-3);
    }
    .page-nav > li:nth-child(4) {
      transition-delay: 0.15s;
      --effect-color: var(--accent-color-1);
    }
    .page-nav > li:nth-child(5) {
      transition-delay: 0.2s;
      --effect-color: var(--accent-color-4);
    }
    .page-header:is(.is-open) .page-nav > li {
      translate: 0 0;
      opacity: 1;
      transition-delay: 0s;
    }
    .page-header:is(.is-open) .page-nav > li:nth-child(2) {
      transition-delay: 0.05s;
    }
    .page-header:is(.is-open) .page-nav > li:nth-child(3) {
      transition-delay: 0.1s;
    }
    .page-header:is(.is-open) .page-nav > li:nth-child(4) {
      transition-delay: 0.15s;
    }
    .page-header:is(.is-open) .page-nav > li:nth-child(5) {
      transition-delay: 0.2s;
    }
    .page-nav > li > a {
      display: block;
      padding: 0.5rem 1rem;
      position: relative;
      background: linear-gradient(var(--effect-color) 0 100%) left/0 no-repeat;
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      transition: background-size 0.45s 0.04s;
    }
    .page-nav > li > a::before {
      position: absolute;
      content: attr(data-text);
      z-index: -1;
      color: var(--font-color--sub);
    }
    .theme--light .page-nav > li > a::before {
      color: hsl(211, 10%, 40%);
    }
  }
  @media (min-width: calc(45em + 1px)) and (max-width: calc(62.5em - 1px)) {
    .page-nav {
      display: flex;
      gap: var(--spacer-md);
    }
    .page-nav > li > a {
      text-decoration: none;
      color: var(--header-link-color);
    }
    .page-nav > li > a:hover {
      color: var(--header-link-hover-color);
    }
  }
  @media (min-width: 62.5em) {
    .page-nav {
      --max-width: 8rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding-inline-start: 5px;
    }
    .page-nav > li {
      --effect-color: var(--blue-7);
      position: relative;
      translate: calc(var(--max-width) * -1) 0;
      opacity: 0;
      transition: opacity 0.2s linear, translate 0.3s var(--ease-out);
      transition-delay: 0.5s;
    }
    .page-nav > li::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: var(--effect-color);
      transition: transform 0.5s var(--ease-out);
    }
    .page-nav > li:hover::before, .page-nav > li:focus-within::before {
      transform: translateX(var(--max-width));
    }
    .page-nav > li:hover a, .page-nav > li:focus-within a {
      background-size: 100%;
    }
    .page-nav > li:nth-child(2) {
      transition-delay: 0.55s;
      --effect-color: var(--accent-color-2);
    }
    .page-nav > li:nth-child(3) {
      transition-delay: 0.6s;
      --effect-color: var(--accent-color-3);
    }
    .page-nav > li:nth-child(4) {
      transition-delay: 0.65s;
      --effect-color: var(--accent-color-1);
    }
    .page-nav > li:nth-child(5) {
      transition-delay: 0.7s;
      --effect-color: var(--accent-color-4);
    }
    .page-header:is(.is-docked, :hover, :focus-within) .page-nav > li {
      translate: 0 0;
      opacity: 1;
      transition-delay: 0s;
    }
    .page-header:is(.is-docked, :hover, :focus-within) .page-nav > li:nth-child(2) {
      transition-delay: 0.05s;
    }
    .page-header:is(.is-docked, :hover, :focus-within) .page-nav > li:nth-child(3) {
      transition-delay: 0.1s;
    }
    .page-header:is(.is-docked, :hover, :focus-within) .page-nav > li:nth-child(4) {
      transition-delay: 0.15s;
    }
    .page-header:is(.is-docked, :hover, :focus-within) .page-nav > li:nth-child(5) {
      transition-delay: 0.2s;
    }
    .page-nav > li > a {
      display: block;
      padding: 0.5rem 1rem;
      position: relative;
      background: linear-gradient(var(--effect-color) 0 100%) left/0 no-repeat;
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      transition: background-size 0.45s 0.04s;
    }
    .page-nav > li > a::before {
      position: absolute;
      content: attr(data-text);
      z-index: -1;
      color: var(--font-color--sub);
    }
    .theme--light .page-nav > li > a::before {
      color: hsl(211, 10%, 40%);
    }
  }
  .banner-image {
    clip-path: circle(300svmin at 50vw -250svmin);
    view-transition-name: spotlight;
  }
  .banner-image img {
    max-height: 50svmin;
    width: 100vw;
    object-fit: cover;
  }
  @media (min-width: 62.5em) {
    .banner-image {
      --radius: min(35vw, 750px);
      --offset: 10vw;
      --circle: circle(var(--radius) at var(--radius) var(--offset));
      position: relative;
      z-index: 1;
      clip-path: var(--circle);
      shape-outside: var(--circle);
      float: right;
      width: calc(var(--radius) + var(--offset));
      shape-margin: 0.5rem;
    }
    .banner-image img {
      max-height: initial;
      height: auto;
      object-fit: cover;
      aspect-ratio: 1/1;
    }
  }
  .spotlight {
    position: relative;
    display: flex;
    flex-direction: column;
    --width: 850px;
  }
  .spotlight-image {
    position: relative;
    justify-content: center;
    margin-inline: auto;
  }
  .spotlight-image a {
    display: block;
    border-radius: 50%;
    background: var(--bg-color--main);
    view-transition-name: spotlight;
  }
  .spotlight-border {
    padding: 5px;
    border-radius: 50%;
    --angle: 0rad;
    background-image: conic-gradient(from var(--angle), var(--blue-7), var(--accent-color-1), var(--accent-color-3), var(--accent-color-2), var(--blue-7));
    box-shadow: inset 0 0 3px 0px black;
  }
  @supports (background-image: linear-gradient(in oklch, green, red)) {
    .spotlight-border {
      background-image: conic-gradient(from var(--angle) in oklch, var(--blue-7), var(--accent-color-1), var(--accent-color-3), var(--accent-color-2), var(--blue-7));
    }
  }
  .spotlight-border img {
    width: calc(var(--center-size) - 10px);
    height: calc(var(--center-size) - 10px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 3px 2px white;
    transition: box-shadow 0.5s linear;
  }
  .spotlight-border:has(a:hover) img {
    box-shadow: none;
  }
  .theme--light .spotlight-border {
    box-shadow: inset 0 0 3px 0px white;
  }
  .theme--light .spotlight-border > img {
    box-shadow: inset 0 0 3px 0px white;
  }
  .theme-switcher {
    --radius: 0.3rem;
    margin-inline: auto 0.5rem;
    align-self: center;
    display: flex;
    gap: 2px;
    padding-left: 0.5rem;
  }
  .theme-switcher button {
    flex: 0 0 2em;
    border: 0;
    background-color: var(--font-color--sub);
    color: var(--bg-color--main);
    font-size: var(--font-size--sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
  }
  .theme-switcher button > div {
    line-height: 0.7em;
  }
  .theme-switcher button:hover:not(.is-selected) {
    opacity: 1;
  }
  .theme-switcher button:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
  }
  .theme-switcher button:last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
  .theme-switcher button.is-selected:not(.theme-random) {
    background-color: var(--blue-6);
    cursor: default;
  }
  .theme-switcher button.theme-random:is(.is-selected, :hover) {
    background-image: conic-gradient(from -45deg, var(--blue-7), var(--accent-color-1), var(--accent-color-3), var(--accent-color-2), var(--blue-7));
  }
  @supports (background-image: linear-gradient(in oklch, green, red)) {
    .theme-switcher button.theme-random:is(.is-selected, :hover) {
      background-image: conic-gradient(from -45deg in oklch, var(--blue-7), var(--accent-color-1), var(--accent-color-3), var(--accent-color-2), var(--blue-7));
    }
  }
  .theme-switcher button.theme-random:is(.is-selected, :hover) svg {
    fill: var(--font-color--main);
  }
  .theme-switcher button.theme-random.spin > div {
    animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .theme-switcher svg {
    fill: currentColor;
    height: 1.2rem;
    width: 1.2rem;
  }
  @media (max-width: 45em) {
    .theme-switcher {
      margin-block-start: auto;
      justify-content: end;
      gap: 0.5rem;
    }
    .theme-switcher > button {
      --radius: 50%;
      flex: 0 0 50px;
      height: 50px;
      border-radius: 50%;
    }
    .theme-switcher svg {
      width: 1.7rem;
      height: 1.7rem;
    }
  }
  @media (min-width: 28em) {
    .theme-switcher {
      margin-inline: auto 1rem;
    }
  }
  @media (min-width: 62.5em) {
    .theme-switcher {
      opacity: 0;
      margin-top: 1rem;
      margin-left: initial;
      padding-left: 1rem;
      transition: opacity 0.5s var(--ease-out);
      transition-delay: 0.5s;
    }
    .page-header:is(:hover, :focus-within, .is-docked) .theme-switcher {
      opacity: 1;
      transition-delay: 0.3s;
    }
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
      scale: 1;
    }
    50% {
      scale: 1.4;
    }
    to {
      transform: rotate(360deg);
      scale: 1;
    }
  }
  .post h1 {
    margin-block-start: 1em;
  }
  .post h1 > a {
    color: var(--font-color--main);
    text-decoration: none;
    text-underline-offset: initial;
    transition: unset;
  }
  .post h1 > a:hover {
    text-decoration: underline;
    text-decoration-color: var(--blue-4);
  }
  .post sup a:any-link {
    text-decoration: none;
    color: var(--accent-color-active);
  }
  .post__content {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--accent-color-4);
  }
  .post__body {
    position: relative;
  }
  .post__body h2 {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid currentColor;
    line-height: 1.1;
  }
  .post__body h2:nth-of-type(3n + 1) {
    border-color: var(--accent-color-1);
  }
  .post__body h2:nth-of-type(3n + 2) {
    border-color: var(--accent-color-2);
  }
  .post__body h2:nth-of-type(3n) {
    border-color: var(--accent-color-3);
  }
  .post__body pre[class*=language-] {
    margin-inline: calc(var(--spacer-md) * -1);
    padding: 1rem var(--spacer-md);
    border-block: 2px solid var(--bg-color--sub);
    overflow: auto;
    background-color: var(--background-0);
    clear: both;
  }
  :is(.theme--light, .theme--yellow) .post__body pre[class*=language-] {
    background-color: var(--background-2);
  }
  .post__date {
    position: relative;
    float: right;
    background-color: hsla(211, 30%, 80%, 0.5);
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    color: var(--bg-color--main);
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: -4rem;
    z-index: 1;
  }
  .theme--light .post__date, .theme--yellow .post__date {
    background-color: hsla(211, 30%, 20%, 0.5);
  }
  .post__body h2 {
    opacity: 1;
    transition: opacity 0.3s var(--ease-out);
  }
  .post__body h2.is-visibility-pending {
    opacity: 0;
  }
  @media (min-width: 48em) {
    .post__date {
      margin-top: -6rem;
    }
  }
  @media (min-width: 62.5em) {
    .post__date {
      float: right;
      clear: right;
      margin-right: -15vw;
      margin-top: -2rem;
    }
    .post h1 {
      margin-block-start: revert;
    }
  }
  @media (min-width: 80em) {
    .post__date {
      margin-right: -20vw;
    }
  }
  @media (min-width: 2200px) {
    .post__date {
      clear: none;
      margin-right: -1rem;
      margin-top: 0;
      margin-left: var(--spacer-md);
    }
  }
  .section-heading {
    font-family: var(--font-serif);
    font-size: 2rem;
  }
  @media (min-width: 62.5em) {
    .section-heading {
      font-size: 3rem;
    }
  }
  .header-anchor {
    position: absolute;
    display: inline-block;
    font-weight: normal;
    color: inherit;
    padding: 0.5em;
    font-size: 1.2rem;
    font-family: Helvetica, sans-serif;
    vertical-align: 0.3em;
    text-decoration: none;
    opacity: 0;
    transform: translateX(-1em);
    transition: opacity linear 0.2s, transform var(--ease-out) 0.2s;
  }
  :is(h2, h3, h4):hover > .header-anchor {
    opacity: 0.2;
    transform: translateX(0);
  }
  :is(h2, h3, h4):focus-within > .header-anchor {
    opacity: 0.5;
    transform: translateX(0);
  }
  .interactions {
    max-width: var(--content-width);
    margin-inline: auto;
  }
  .interactions h3 {
    font-family: var(--font-serif);
  }
  .tabs {
    text-align: right;
  }
  .tabs > button {
    border: 0;
    background-color: transparent;
    color: var(--font-color--sub);
    font-size: 0.9rem;
    cursor: pointer;
  }
  .tabs > button:hover {
    text-decoration: underline;
  }
  .tabs > button > .tabs__count.has-items {
    color: var(--font-color--main);
    font-weight: bold;
  }
  .tabs > button svg {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.3em;
  }
  .tabs__content {
    position: relative;
    transition: height 0.2s var(--ease-in);
    overflow: hidden;
    --inset: 1rem;
  }
  @media (min-width: 62.5em) {
    .tabs__content {
      margin-inline: calc(var(--inset) * -1);
    }
  }
  .tab-pane {
    opacity: 0;
    transition: opacity 0.1s linear;
    position: absolute;
    left: var(--inset, 0);
    right: var(--inset, 0);
  }
  .tab-pane.is-active {
    opacity: 1;
    transition-delay: 0.1s;
    z-index: 1;
  }
  .tabs > button {
    transform: initial;
    transform-origin: 100% 100%;
    opacity: 1;
    transition: transform 0.2s var(--ease-in), opacity 0.2s linear;
    transition-delay: calc(0.15s * var(--index));
    --index: 1;
  }
  .tabs > button:nth-child(2) {
    --index: 2;
  }
  .tabs > button:nth-child(3) {
    --index: 3;
  }
  .tabs.is-visibility-pending:not(:has(button.is-active)) > button {
    transform: scale(0.7) translateY(2em);
    opacity: 0;
  }
  .recent-posts {
    margin-top: var(--spacer-xl);
    padding: 2rem 0 1rem 2rem;
    clip-path: circle(300vmin at 50vw 300vmin);
    background-color: var(--bg-mask-transparent);
  }
  .recent-posts > ul {
    list-style: none;
    padding-inline-start: 0;
    margin-inline: -1rem 0;
    margin-bottom: 2rem;
  }
  .recent-posts li > a {
    display: block;
    background-color: var(--bg-mask-transparent);
    border-radius: 2rem 0 0 2rem;
    margin-block: 1em;
    margin-right: -1px;
    padding: 1em;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--font-color--main);
  }
  .theme--light .recent-posts li > a {
    color: var(--font-color--sub);
  }
  .recent-posts li > a:hover, .recent-posts li > a:focus-visible {
    translate: -1px -2px;
    box-shadow: hsla(211, 15%, 15%, 0.3) 3px 10px 7px;
  }
  @media (min-width: 62.5em) {
    .recent-posts {
      --box-size: 50vw;
      --radius: 35vw;
      width: var(--box-size);
      min-height: var(--box-size);
      margin-top: var(--spacer-xl);
      clip-path: circle(var(--radius) at calc(var(--box-size) - var(--radius)) var(--radius));
      display: flex;
      flex-direction: column;
    }
    .recent-posts > h3 {
      margin-bottom: 0;
    }
    .recent-posts ul {
      position: relative;
      flex-grow: 1;
    }
    .recent-posts ul {
      margin-inline: initial;
    }
    .recent-posts ul > li {
      position: absolute;
    }
    .recent-posts ul > li:nth-child(1) {
      top: 0;
      left: 23%;
    }
    .recent-posts ul > li:nth-child(2) {
      top: 58%;
      left: 5%;
    }
    .recent-posts ul > li:nth-child(3) {
      top: 45%;
      left: 50%;
    }
    .recent-posts ul > li > a {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1em;
      margin-block: 0;
      border-radius: 50%;
      width: 13rem;
      width: min(13rem, 15vw);
      aspect-ratio: 1/1;
    }
  }
  .latest-post p {
    margin-block: 0;
    opacity: 0.7;
  }
  .latest-post h2 {
    margin-block: 0;
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1em;
    text-wrap: balance;
  }
  .latest-post h2 a {
    color: inherit;
    text-decoration: none;
  }
  .latest-post h2 a:hover {
    text-decoration: underline;
  }
  .l-homepage:has(.spotlight a:hover) .latest-post a {
    text-decoration: underline;
  }
  @media (min-width: 48em) {
    .latest-post h2 {
      font-size: 3rem;
    }
  }
  @media (min-width: 48em) and (min-width: 62.5em) {
    .latest-post h2 {
      font-size: 4rem;
    }
  }
  .to-about {
    text-decoration: none;
  }
  .to-about .arrow {
    position: relative;
    top: 0.5em;
  }
  .to-about:hover {
    color: var(--font-color--main);
  }
  .inline-form {
    margin-bottom: var(--spacer-xl);
    padding-inline-start: var(--spacer-md);
    color: var(--font-color--sub);
  }
  .inline-form > label {
    display: block;
    margin-block: var(--spacer-sm);
  }
  .inline-form__inputs input {
    width: 100%;
  }
  .inline-form__inputs button {
    margin-block-start: 0.3em;
    margin-inline-start: auto;
  }
  .inline-form__inputs input, .inline-form__inputs button {
    display: block;
    padding: 0.2em 1.1em;
    border: var(--color);
    color: var(--color);
    border-radius: 1em;
    cursor: pointer;
    --color: var(--blue-4);
  }
  .theme--light .inline-form__inputs input, .theme--light .inline-form__inputs button {
    --color: var(--blue-6);
  }
  .inline-form__inputs button {
    background-color: hsl(211, 15%, 90%);
  }
  .inline-form__inputs button:active {
    box-shadow: inset hsla(0, 0%, 0%, 0.15) 3px 3px 3px;
  }
  .inline-form__inputs :is(input, button):focus-visible {
    outline: 3px solid var(--blue-6);
  }
  .inline-form__inputs input {
    flex: 1;
  }
  @media (min-width: 33em) {
    .inline-form {
      margin-inline-start: var(--spacer-xl);
    }
    .inline-form__inputs {
      display: flex;
      gap: var(--spacer-sm);
    }
    .inline-form__inputs input {
      display: unset;
      width: unset;
    }
    .inline-form__inputs button {
      margin-block-start: unset;
      margin-inline-start: unset;
    }
  }
  .replies {
    list-style: none;
    padding-inline-start: 0;
  }
  .replies > :not(:last-child) {
    margin-bottom: var(--spacer-md);
  }
  .comment {
    display: flex;
    gap: var(--spacer-md);
  }
  .comment__avatar {
    flex-shrink: 0;
  }
  .comment__avatar img {
    width: var(--spacer-xl);
    height: var(--spacer-xl);
    border-radius: 50%;
    transition: scale 0.2s ease-out;
  }
  .comment__avatar a:hover img {
    scale: 1.1;
  }
  .comment__body {
    flex-grow: 1;
  }
  .comment__content {
    background-color: var(--bg-color--sub);
    border-radius: 2px 1rem 1rem 1rem;
    padding: var(--spacer-md);
    margin-block: var(--spacer-lg) var(--spacer-sm);
  }
  .comment__content > :first-child {
    margin-top: 0;
  }
  .comment__content > :last-child {
    margin-bottom: 0;
  }
  .comment__cite {
    margin-inline-start: var(--spacer-md);
    color: var(--font-color--sub);
  }
  .comment__cite > .p-author {
    font-weight: bold;
  }
  .comment__cite > .p-author::after {
    content: "•";
    font-weight: normal;
    color: var(--font-color--sub);
    margin-inline: var(--spacer-sm);
  }
  .comment__cite > .u-url {
    color: var(--font-color--mid);
    font-size: 0.85rem;
  }
  .comment__cite > .u-url:hover {
    color: var(--font-color--main);
  }
  .avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--size) var(--size));
    justify-content: center;
    padding-inline-start: initial;
    padding-bottom: 1.6rem;
    list-style: none;
    --size: var(--spacer-xl);
  }
  .avatar-grid > li:nth-child(2n) {
    margin-top: 2.1rem;
    margin-bottom: -1.6rem;
  }
  .avatar-grid img {
    border-radius: 50%;
    height: var(--size);
    width: var(--size);
    object-fit: cover;
    transition: scale 0.2s var(--ease-out);
  }
  .avatar-grid a:hover img {
    scale: 1.1;
  }
  .loading-indicator {
    position: relative;
    border-radius: 0.8rem;
    font-size: 1rem;
    color: var(--font-color--sub);
    text-align: center;
    box-shadow: 0 1px 2px hsla(311, 55%, 65%, 0.02);
  }
  .loading-indicator::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 1em;
    border-radius: 50%;
    background-color: hsl(211, 85%, 76%);
    vertical-align: -0.1em;
    animation: pulse 1s ease-in-out infinite;
  }
  .loading-indicator--standalone {
    padding: 1rem 0;
  }
  .loading-indicator--standalone::before {
    position: static;
  }
  @keyframes pulse {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }
  .post-list {
    list-style-type: none;
    padding-inline-start: 0;
  }
  .post-list > li {
    --accent-color: currentColor;
  }
  .post-list > li:not(:first-child) a {
    border-block-start: 1px solid var(--font-color--sub);
  }
  .post-list > li a {
    --padding: 1.5rem;
    display: block;
    margin-inline-start: 1em;
    text-decoration: none;
    color: inherit;
  }
  .post-list > li:where(:nth-child(4n+1)), .post-list > li.post-type-tutorial {
    --accent-color: var(--accent-color-1);
  }
  .post-list > li:where(:nth-child(4n+2)) {
    --accent-color: var(--accent-color-2);
  }
  .post-list > li:where(:nth-child(4n+3)), .post-list > li.post-type-article {
    --accent-color: var(--accent-color-3);
  }
  .post-list > li:where(:nth-child(4n+4)), .post-list > li.post-type-blog {
    --accent-color: var(--accent-color-4);
  }
  .post-list__title {
    position: relative;
    padding-block: var(--padding);
    margin-block-end: -1rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1;
  }
  .post-list a:where(:hover, :focus-visible) .post-list__title::before {
    content: "";
    position: absolute;
    inset-block-start: var(--padding);
    inset-inline-start: -0.5em;
    inset-block-end: var(--padding);
    width: 3px;
    background-color: var(--accent-color);
  }
  .post-list__category {
    padding-block-start: var(--padding);
    margin-block-end: -2rem;
    color: var(--accent-color);
    text-transform: capitalize;
    opacity: 0.8;
    transition: opacity 0.3s linear;
  }
  .post-list__category + .post-list__title::before {
    inset-block-start: 0;
  }
  .post-list__date {
    display: block;
    font-size: 1rem;
    text-align: end;
    font-family: var(--font-sans-serif);
    color: var(--font-color--sub);
    transition: color 0.4s linear, opacity 0.4s linear;
  }
  a:is(:hover, :focus-visible) > .post-list__date {
    color: var(--accent-color);
    opacity: 0.7;
    transition-duration: 4s;
  }
  @media (min-width: 28em) {
    .post-list__title {
      --padding: 2rem;
      font-size: 2rem;
    }
  }
  @media (min-width: 50em) {
    .post-list > li a {
      margin-inline-start: unset;
    }
    .post-list__title {
      font-size: 3rem;
    }
    .post-list__title:hover::before {
      inset-inline-start: -1em;
    }
  }
  .pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: s;
    margin-block-end: var(--spacer-xl);
    gap: var(--spacer-md);
  }
  .pagination > a {
    padding: 0.2em var(--spacer-sm);
    border: 1px solid currentColor;
    border-radius: 3px;
    text-decoration: none;
  }
  .pagination-prev {
    grid-column: 1/2;
    justify-self: start;
  }
  .pagination-next {
    grid-column: 2/3;
    justify-self: end;
  }
  .footer {
    color: var(--font-color--main);
    border-block-start: 10px solid var(--blue-1);
    background-color: var(--blue-2);
    overflow-x: hidden;
  }
  .theme--light .footer {
    border-color: hsl(211, 15%, 75%);
    background-color: hsl(211, 10%, 60%);
  }
  .theme--yellow .footer {
    border-color: hsl(179, 15%, 75%);
    background-color: hsl(179, 30%, 60%);
  }
  @media (min-width: 48em) {
    .footer__inner {
      padding: 5rem var(--spacer-lg);
    }
  }
  .footer__inner {
    max-inline-size: 1400px;
    padding: 3rem var(--spacer-md);
    margin-inline: auto;
  }
  .footer__copyright {
    padding-block: 1em;
    padding-inline: 2rem;
    text-align: center;
    background-color: hsl(211, 20%, 25%);
    color: hsl(211, 10%, 80%);
    font-size: 0.875rem;
  }
  .footer__copyright p {
    margin-block: 0;
  }
  .footer__copyright a {
    color: inherit;
    text-decoration: revert;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 1px;
  }
  :where(.theme--light, .theme--yellow) .footer__copyright {
    background-color: hsl(211, 10%, 65%);
    color: hsl(211, 10%, 25%);
  }
  p.masthead-credit {
    margin-block-start: 1em;
  }
  .alert {
    margin-inline: calc(var(--bleed-size) * -1);
    padding-block: 1rem;
    padding-inline: var(--bleed-size);
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.7;
    background-color: hsl(211, 49%, 32%);
    background-image: linear-gradient(to right, var(--accent-color-active) 5px, transparent 5px);
    border-radius: 1rem;
  }
  body.theme--light .alert {
    opacity: 0.8;
    background-color: hsl(211, 49%, 68%);
  }
  body:where(:not(.theme--light, .theme--dark)) .alert {
    opacity: 0.8;
    background-color: hsla(211, 0%, 68%, 0.4);
  }
  .footnotes {
    margin-block-start: 2rem;
    margin-inline: calc(var(--bleed-size) * -1);
    padding-block: 1rem;
    padding-inline: var(--bleed-size);
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.7;
    background-color: hsl(211, 49%, 32%);
    background-image: linear-gradient(to right, var(--accent-color-active) 5px, transparent 5px);
    border-radius: 1rem;
  }
  .footnotes a:any-link {
    color: var(--blue-9);
  }
  body.theme--light .footnotes, body.theme--yellow .footnotes {
    opacity: 0.8;
    background-color: hsl(211, 49%, 68%);
  }
  body.theme--light .footnotes a:any-link, body.theme--yellow .footnotes a:any-link {
    color: var(--blue-2);
  }
  body:where(:not(.theme--light, .theme--dark)) .footnotes {
    opacity: 0.8;
    background-color: hsla(211, 0%, 68%, 0.4);
  }
  .footnotes::before {
    display: block;
    content: "Footnotes";
    margin-block-start: -0.6rem;
    margin-block-end: 0.5rem;
    font-weight: bold;
  }
  .bio {
    --bio-top: 20px;
    --img-radius: 50px;
  }
  .bio img {
    position: relative;
    float: inline-end;
    height: calc(var(--img-radius) * 2);
    width: calc(var(--img-radius) * 2);
    border-radius: 50%;
    margin-block-start: calc(var(--bio-top) * -1);
    margin-inline-start: var(--spacer-sm);
    overflow: hidden;
    z-index: 1;
  }
  .bio__content {
    margin-block: var(--bio-top);
    max-inline-size: 50rem;
    padding: var(--spacer-sm) var(--spacer-md);
    background-color: rgba(0, 0, 0, 0.2);
  }
  :where(.theme--light, .theme--yellow) .bio__content {
    background-color: rgba(255, 255, 255, 0.2);
  }
  .bio__content a {
    color: inherit;
  }
  .bio img {
    opacity: 1;
    transform: initial;
    transform-origin: 100% 100%;
    transition: transform 0.5s var(--ease-in), opacity 0.3s linear;
  }
  .bio__content {
    opacity: 1;
    translate: 0;
    transition: opacity 0.4s linear, translate 0.3s var(--ease-in);
  }
  .bio.is-visibility-pending img {
    opacity: 0;
    transform: scale(0.7) rotate(20deg);
  }
  .bio.is-visibility-pending .bio__content {
    opacity: 0;
    translate: 20px 0;
  }
  @media (min-width: 28em) {
    .bio img {
      margin-inline-start: var(--spacer-lg);
    }
    .bio__content {
      margin-inline: auto var(--img-radius);
    }
  }
  @media (min-width: 48em) {
    .bio {
      --bio-top: 100px;
      --img-radius: 150px;
    }
    .bio__content {
      padding: var(--spacer-sm) var(--spacer-xl);
    }
  }
  .social-links {
    display: flex;
    margin-inline: auto;
    padding-inline: 1rem;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-md);
  }
  .social-links svg {
    height: 1.2rem;
    width: 1.2rem;
    margin-inline: 0.5rem;
    vertical-align: -0.2em;
  }
  .social-links a {
    color: var(--link-color);
    text-decoration: none;
  }
  .social-links a:hover {
    color: var(--blue-4);
  }
  .social-links__icon svg {
    height: 2rem;
    width: 2rem;
  }
  .demo-container {
    position: relative;
    margin-inline: calc(var(--spacer-md) * -1);
    border: 2px solid var(--accent-bg-4);
    border-radius: 1em;
    padding: 2rem var(--spacer-md);
    background-color: var(--background-neutral);
  }
  .demo-container::after {
    display: block;
    content: "Demo";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    min-height: 4em;
    min-width: 4em;
    padding: 0.2em 0.4em 0.2em 1em;
    padding: 0.7em 0.1em 0.5em 1.2em;
    border-end-start-radius: 1em;
    border-start-end-radius: 1em;
    color: var(--blue-7);
    background-color: rgba(128, 128, 128, 0.2);
    font-size: 0.8em;
    clip-path: circle(3em at 3.3em 0.4em);
    mix-blend-mode: luminosity;
  }
  :where(.theme--light, .theme--yellow) .demo-container::after {
    color: var(--blue-4);
  }
}
@layer layout {
  .l-homepage {
    display: grid;
    --center-size: 80svmin;
    --nav-height: 2.4rem;
    grid-template-columns: 1fr var(--center-size) 1fr;
    grid-template-rows: max-content var(--center-size) max-content;
    grid-template-rows: max-content 1fr max-content;
    min-height: calc(100svh - var(--nav-height));
    padding: 2rem;
  }
  .l-homepage__name {
    grid-row: 1/2;
    grid-column: 1/4;
    align-self: start;
    justify-self: end;
  }
  .l-homepage__name h1 {
    margin-block: 0 0.5em;
    line-height: 0.8em;
  }
  .l-homepage__center {
    grid-row: 2/3;
    grid-column: 2/3;
    align-self: center;
    justify-self: center;
  }
  .l-homepage__recent {
    grid-row: 3/4;
    grid-column: 1/4;
    align-self: end;
  }
  .l-homepage__about {
    display: none;
    grid-row: 3/4;
    grid-column: 3/4;
    align-self: end;
    justify-self: end;
  }
  @media (max-width: 48em) {
    .l-homepage {
      min-height: 100svh;
    }
    .l-homepage .l-homepage__name {
      margin-block-start: 1.2em;
    }
  }
  @media (min-width: 875px) {
    .l-homepage {
      --center-size: 650px;
    }
  }
  @media (min-width: 48em) {
    .l-homepage {
      padding: 3rem;
    }
  }
  @media (min-width: 62.5em) {
    .l-homepage {
      min-height: 100svh;
    }
    .l-homepage .l-homepage__name h1 {
      margin-block-end: 0.5rem;
    }
    .l-homepage .l-homepage__recent {
      grid-column: 1/3;
    }
    .l-homepage .l-homepage__about {
      display: revert;
    }
  }
  .l-article {
    padding-top: 0.05px;
    max-width: 100vw;
    overflow: hidden;
  }
  .l-article__body {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--spacer-sm);
  }
  @media (min-width: 62.5em) {
    .l-article__body {
      padding-inline: 0;
      margin-top: 10em;
    }
  }
  .l-archive {
    padding-top: 0.05px;
    max-width: 100vw;
    overflow: hidden;
  }
  .l-archive__body {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--spacer-sm);
  }
  @media (min-width: 62.5em) {
    .l-archive__body {
      padding-inline: 0;
      margin-top: 7em;
    }
  }
  .l-split {
    display: flex;
    gap: var(--spacer-xl);
    justify-content: space-between;
  }
  .l-split__right {
    text-align: right;
  }
  .l-split__end {
    align-items: end;
  }
}
@layer utilities {
  pre[class*=language-] {
    --blue-sub-5: hsl(211, 51%, 65%);
    --blue-sub-6: hsl(211, 65%, 85%);
    --red-5: hsl(344, 98%, 65%);
    --red-sub-5: hsl(344, 66%, 65%);
    --yellow-5: hsl(31, 81%, 72%);
    --yellow-sub-5: hsl(31, 50%, 72%);
    --gray-1: hsl(211, 13%, 10%);
    --gray-2: hsl(211, 11%, 14%);
    --gray-3: hsl(211, 9%, 22%);
    --gray-4: hsl(211, 7%, 34%);
    --gray-5: hsl(211, 7%, 48%);
    --gray-6: hsl(211, 9%, 63%);
    --gray-7: hsl(211, 9%, 74%);
    --gray-8: hsl(211, 11%, 85%);
    --gray-9: hsl(211, 14%, 93%);
  }
  :is(.theme--light, .theme--yellow) pre[class*=language-] {
    --blue-sub-5: hsl(211, 51%, 35%);
    --blue-sub-6: hsl(211, 65%, 15%);
    --red-5: hsl(344, 98%, 35%);
    --red-sub-5: hsl(344, 53%, 45%);
    --yellow-5: hsl(31, 81%, 43%);
    --yellow-sub-5: hsl(31, 50%, 41%);
    --gray-9: hsl(211, 13%, 10%);
    --gray-8: hsl(211, 11%, 14%);
    --gray-7: hsl(211, 9%, 22%);
    --gray-6: hsl(211, 7%, 34%);
    --gray-5: hsl(211, 7%, 48%);
    --gray-4: hsl(211, 9%, 68%);
    --gray-3: hsl(211, 9%, 84%);
    --gray-2: hsl(211, 11%, 90%);
    --gray-1: hsl(211, 14%, 95%);
  }
  /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
  /**
   * okaidia theme for JavaScript, CSS and HTML
   * Loosely based on Monokai textmate theme by http://www.monokai.nl/
   * @author ocodia
   */
  code[class*=language-],
  pre[class*=language-] {
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
  /* Code blocks */
  pre[class*=language-] {
    overflow: auto;
    position: relative;
  }
  pre.language-html {
    --lang: "html";
  }
  pre.language-css {
    --lang: "css";
  }
  pre.language-js {
    --lang: "js";
  }
  pre.language-ts {
    --lang: "ts";
  }
  pre[class*=language-]::after {
    display: block;
    content: var(--lang);
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0.2em;
    padding: 0.2em 0.4em;
    border-end-start-radius: 0.2em;
    border-end-end-radius: 0.2em;
    font-family: var(--font-sans-serif);
    color: var(--font-color--sub);
    background-color: rgba(128, 128, 128, 0.2);
    font-size: 0.8em;
    text-transform: uppercase;
  }
  :not(pre) > code[class*=language-],
  pre[class*=language-] {
    background: var(--gray-2);
  }
  /* Inline code */
  :not(pre) > code[class*=language-] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
  }
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata,
  .token.punctuation {
    color: var(--gray-6);
  }
  .namespace {
    opacity: 0.7;
  }
  .token.property,
  .token.tag,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: var(--yellow-5);
  }
  .token.boolean,
  .token.number,
  .token.variable {
    color: var(--blue-sub-5);
  }
  .token.selector,
  .token.attr-name,
  .token.char,
  .token.builtin,
  .token.inserted {
    color: var(--blue-sub-6);
  }
  .token.string {
    color: var(--yellow-sub-5);
  }
  .token.operator,
  .token.entity,
  .token.url,
  .token.important {
    color: var(--gray-5);
  }
  .token.atrule,
  .token.attr-value,
  .token.regex {
    color: var(--red-sub-5);
  }
  .token.function {
    color: var(--blue-sub-6);
  }
  .token.keyword {
    color: var(--blue-sub-5);
  }
  .token.bold {
    font-weight: bold;
  }
  .token.italic {
    font-style: italic;
  }
  .token.entity {
    cursor: help;
  }
  .token.pseudo-element,
  .token.keyword-this {
    color: var(--red-5);
  }
  .token.keyword-try,
  .token.keyword-catch,
  .token.keyword-await {
    color: var(--gray-5);
  }
  .token.class-name {
    color: var(--blue-sub-6);
  }
  code[class*=language-css],
  pre[class*=language-css] {
    color: var(--blue-sub-5);
  }
  code[class*=language-css] .token.function,
  pre[class*=language-css] .token.function {
    color: var(--red-sub-) 5;
  }
  code[class*=language-js],
  pre[class*=language-js] {
    color: var(--blue-sub-5);
  }
  code[class*=language-js] .token.keyword,
  pre[class*=language-js] .token.keyword {
    color: var(--gray-5);
  }
  /* fix collision with Comment module */
  .token.comment {
    display: inline;
  }
  .is-hidden {
    display: none;
  }
  .text-center {
    text-align: center;
  }
  @media (max-width: 450px) {
    .hide-xs {
      display: none;
    }
  }
  .sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

/*# sourceMappingURL=style.css.map */