@layer base, components, utilities;
@import "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" layer(base);
@layer base{
  *,
  :before,
  :after{
    box-sizing:border-box;
    margin:0;
    padding:0;
    border:0 solid #000000;
  }

  html{
    text-size-adjust:100%;
    tab-size:2;
    font-family:var(--font-sans);
    font-feature-settings:normal;
    line-height:normal;
  }

  body{
    margin:0;
    line-height:inherit;
  }

  hr{
    height:0;
    color:inherit;
    border-top-width:1px;
  }

  abbr:where([title]){
    text-decoration:underline dotted;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6{
    font-size:inherit;
    font-weight:inherit;
    line-height:normal;
  }

  a{
    color:inherit;
    text-decoration:inherit;
  }

  b,
  strong{
    font-weight:bolder;
  }

  code,
  kbd,
  samp,
  pre{
    font-family:var(--font-monospace);
  }

  small{
    font-size:80%;
  }

  sub,
  sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
  }

  sub{
    bottom:-0.25em;
  }

  sup{
    top:-0.5em;
  }

  table{
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse;
  }

  button,
  input,
  optgroup,
  select,
  textarea{
    font-family:inherit;
    font-size:100%;
    font-weight:inherit;
    line-height:inherit;
    color:inherit;
    margin:0;
    padding:0;
  }

  button,
  select{
    text-transform:none;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"]{
    appearance:button;
    background-color:transparent;
    background-image:none;
  }

  :-moz-focusring{
    outline:auto;
  }

  :-moz-ui-invalid{
    box-shadow:none;
  }

  progress{
    vertical-align:baseline;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button{
    height:auto;
  }

  [type="search"]{
    appearance:textfield;
    outline-offset:-2px;
  }

  ::-webkit-search-decoration{
    appearance:none;
  }

  ::-webkit-file-upload-button{
    appearance:button;
    font:inherit;
  }

  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre{
    margin:0;
  }

  fieldset{
    margin:0;
    padding:0;
  }

  legend{
    padding:0;
  }

  ol,
  ul,
  menu{
    list-style:none;
    margin:0;
    padding:0;
  }

  textarea{
    resize:vertical;
  }

  input::placeholder,
  textarea::placeholder{
    opacity:1;
    color:#9ca3af;
  }

  button,
  [role="button"]{
    cursor:pointer;
  }

  :disabled{
    cursor:default;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object{
    display:block;
  }

  img,
  video{
    width:auto;
    height:auto;
    max-width:100%;
  }

  [hidden]{
    display:none;
  }

  ::marker{
    color:currentColor;
  }
}
@layer components{
  .java-annotations-bg,
  .static-assert-bg{
    display:flex;
    flex:1;
    align-items:center;
    justify-content:start;
    color:var(--color-gray-500);

    code{
      font-size:var(--text-2xl);
    }
  }

  .ecs-bg{
    display:flex;
    flex:1;
    align-items:stretch;
    justify-content:center;

    svg{
      g:first-child{
        stroke:var(--color-gray-500);
      }

      g:nth-child(2){
        fill:var(--color-blue-300);
        stroke:var(--color-blue-600);
      }
    }
  }

  .chunk-access-bg{
    display:flex;
    flex:1;
    align-items:stretch;
    justify-content:center;

    svg{
      stroke:var(--color-gray-500);
      stroke-width:2;
      fill:none;
    }
  }

  .big-o-bg{
    font-family:var(--font-math);
    font-size:var(--text-9xl);
    color:var(--color-gray-500);

    display:flex;
    flex:1;
    align-items:center;
    justify-content:center;

    span{
      font-style:italic;
    }
  }
}
@layer components{
  main.about > article{
    font-size:var(--text-lg);
    margin-block-start:calc(4 * var(--spacing));

    & > [data-icon]{
      float:inline-end;
      margin-inline-start:calc(4 * var(--spacing));
    }

    & > p{
      margin-block-end:calc(4 * var(--spacing));
    }
  }
}
@layer components{
  main.by-tag{
    h1{
      text-align:center;
      margin-block-end:calc(4 * var(--spacing));
    }
  }
}
@layer components{
  main.games{
    padding:calc(4 * var(--spacing));
  }
}
@layer components{
  body{
    height:100%;
    grid-template-rows:auto 1fr auto;

    > main{
      margin-inline:auto;

      > article{
        max-width:var(--recommended-main-width);
        padding-inline:calc(4 * var(--spacing));
        margin-inline:auto;
      }
    }
  }
}
@layer components{
  main.manifesto > article{
    display:flex;
    flex-direction:column;
    row-gap:calc(2 * var(--spacing));
    margin-block-start:calc(4 * var(--spacing));

    & > *{
      margin-block:0;
    }

    & > h2{
      margin-block-start:calc(2 * var(--spacing));
    }
  }
}
@layer components{
  main.portfolio > article{
    display:flex;
    flex-direction:column;
    margin-block-start:calc(4 * var(--spacing));

    & > .portfolio-item{
      position:relative;
      overflow:hidden;
      padding-inline:calc(2 * var(--spacing));

      & + .portfolio-item{
        border-top:2px solid var(--color-primary-50);
      }

      & > img[role="presentation"][aria-hidden="true"]{
        position:absolute;
        width:calc(100% - 1em);
        height:100%;
        object-fit:cover;
        opacity:5%;
        pointer-events:none;
        z-index:-10000;
      }

      & > .portfolio-item-content{
        min-height:calc(32 * var(--spacing));
        padding-inline:calc(4 * var(--spacing));

        @media only screen and (min-width: 768px){
          padding-inline:calc(8 * var(--spacing));
        }

        .image-grid{
          display:grid;
          grid-template-columns:repeat(1, minmax(0, 1fr));
          margin-block:calc(4 * var(--spacing));
          padding-inline:calc(4 * var(--spacing));

          @media only screen and (min-width: 640px){
            grid-template-columns:repeat(2, minmax(0, 1fr));
          }
        }
      }

      & > .list{
        font-size:var(--text-sm);
        padding-inline:calc(4 * var(--spacing));

        a{
          color:inherit;
          text-decoration:none;

          padding-inline:calc(4 * var(--spacing));
          padding-block:calc(1 * var(--spacing));
          border-start-start-radius:var(--radius-lg);
          border-start-end-radius:var(--radius-lg);

          transition-property:background-color;
          transition-duration:300ms;
          transition-timing-function:ease-out;

          background-color:var(--color-primary-50);

          &:hover{
            background-color:var(--color-primary-100);
          }
        }
      }
    }
  }
}
@layer components{
  main.post{
    @media only screen and (min-width: 768px){
      .float-start{
        float:inline-start;
        margin-inline-end:calc(6 * var(--spacing));
        max-width:50%;
      }

      .float-end{
        float:inline-end;
        margin-inline-start:calc(6 * var(--spacing));
        max-width:50%;
      }
    }

    aside{
      z-index:50;

      > div{
        padding-inline:calc(4 * var(--spacing));
        padding-block:calc(2 * var(--spacing));
        border-radius:var(--radius-md);

        background:var(--color-primary-50);
        border:1px solid var(--color-primary-100);

        > *{
          margin-block:calc(4 * var(--spacing));
        }

        > :first-child{
          margin-block-start:0;
        }

        > :last-child{
          margin-block-end:0;
        }
      }
    }

    h1{
      text-align:center;
    }

    & > article.with-margins{
      width:100%;
      max-width:100vw;
      margin-block:calc(4 * var(--spacing));
      padding-inline:unset;
      --margin-width:calc(0.5 * (100vw - var(--recommended-content-width) - 8 * var(--spacing)) + 4 * var(--spacing));

      display:grid;
      column-gap:calc(4 * var(--spacing));
      row-gap:calc(4 * var(--spacing));
      justify-items:stretch;
      align-items:start;

      grid-template-columns:[left-margin] minmax(0, 1fr) [content] calc(var(--recommended-content-width) - 8 * var(--spacing)) [right-margin] minmax(0, 1fr);

      h2,
      h3,
      h4,
      h5,
      h6{
        margin-block-start:calc(4 * var(--spacing));
      }

      & > *{
        grid-column:content;
        margin-block:0;
      }

      & > .full-width{
        grid-column:left-margin / -1;
      }
    }

    & > article:not(.with-margins){
      display:block;
      margin-inline:auto;
      padding-inline:calc(4 * var(--spacing));
      max-width:var(--recommended-content-width);
    }

    & > nav.new-old{
      margin-inline:auto;
      margin-block-start:calc(4 * var(--spacing));
      padding-inline:calc(4 * var(--spacing));
      padding-block-start:calc(4 * var(--spacing));
      display:flex;
      gap:calc(4 * var(--spacing));
      border-top:1px solid var(--color-primary-100);

      width:var(--recommended-content-width);

      & > *{
        flex:1;
      }

      & > *:last-child{
        text-align:right;
      }

      & > div > a{
        color:inherit;
        text-decoration:none;

        &:hover{
          text-decoration:underline;
        }

        & > span{
          font-weight:var(--font-weight-light);
        }
      }
    }
  }
}
@layer utilities{
  main.post{
    margin:0;
    max-width:unset;

    .highlighted-code{
      padding-inline:calc(4 * var(--spacing));
      padding-block:calc(2 * var(--spacing));
      border-radius:var(--radius-md);

      background:var(--color-white);
      border:1px solid var(--color-gray-200);

      font-size:0.75em;
      max-width:120ex;
    }

    .katex{
      font-size:var(--text-sm);

      @media only screen and (min-width: 640px){
        font-size:var(--text-lg);
      }
    }

    & > article{
      aside .highlighted-code{
        padding:calc(2 * var(--spacing));
      }

      & > span.katex-display{
        overflow-x:auto;
        overflow-y:hidden;
        grid-column:left-margin / -1;
      }

      @media only screen and (min-width: 1600px){
        .left-margin,
        .right-margin{
          grid-row:auto;
          height:0;
        }

        .left-margin{
          grid-column:left-margin;
        }

        .right-margin{
          grid-column:right-margin;
        }
        pre.highlighted-code{
          grid-column:left-margin / -1;
          width:100ch;
          max-width:100ch;
          margin-inline:auto;
        }

        aside{
          grid-row:auto;
          grid-column:right-margin;

          > div{
            font-size:var(--text-sm);

            .highlighted-code{
              padding:calc(2 * var(--spacing));
              font-size:var(--text-xs);
            }
          }
        }
      }
    }
  }
}
@layer components{
  main.resume{
    display:flex;
    flex-direction:column;
    font-size:var(--text-lg);

    time{
      white-space:nowrap;
    }

    section.header{
      display:none;
    }

    article{
      display:flex;
      min-height:100vh;

      ul,
      ol{
        margin-inline-start:0;
        padding-inline-start:calc(6 * var(--spacing));
        padding-inline-end:calc(4 * var(--spacing));
      }

      h2,
      h3,
      h4{
        margin-block:calc(4 * var(--spacing));
        line-height:1;
      }

      .timeline{
        display:flex;
        flex-direction:column;
        column-gap:calc(4 * var(--spacing));
        padding-inline-start:calc(4 * var(--spacing));

        flex:2 1 fit-content;

        h2{
          background-color:var(--color-primary-50);
          color:var(--color-primary-600);

          grid-column:span 3;
          padding:calc(4 * var(--spacing));
          text-align:right;
          margin-block:calc(4 * var(--spacing));

          border:1px solid var(--color-primary-100);
          border-start-start-radius:var(--radius-full);
          border-end-start-radius:var(--radius-full);
        }

        div.description{
          margin-block-start:calc(2 * var(--spacing));
          margin-block-end:calc(4 * var(--spacing));

          > ul{
            margin-block:0;
          }
        }

        .heading{
          margin-block-start:calc(4 * var(--spacing));
          margin-block-end:calc(2 * var(--spacing));
          display:flex;
          align-items:center;

          img{
            width:auto;
            height:calc(8 * var(--spacing));
          }
        }

        .subheading{
          break-inside:avoid;

          h4{
            margin:0;
          }

          .when{
            line-height:1;
            font-weight:bold;
            white-space:nowrap;
          }

          .interval{
            font-size:var(--text-sm);
            font-weight:200;
            font-style:italic;
          }
        }

        .bullet{
          background-color:var(--color-primary-100);

          width:calc(4 * var(--spacing));
          height:calc(4 * var(--spacing));
          transform:translateX(-50%);
          z-index:50;

          border-width:1px;
          border-radius:calc(infinity * 1px);
          border-color:var(--color-primary-200);
        }
      }

      .side{
        flex:1 1 fit-content;
        flex-shrink:1;
        flex-basis:calc(100% / 3);

        border-inline-start:1px dashed var(--color-primary-200);

        hr{
          margin-block:calc(2 * var(--spacing));
          border-top:1px dashed var(--color-primary-200);
        }

        hr + *{
          font-style:italic;
          font-size:var(--text-sm);
        }

        .rating-list{
          display:grid;
          align-items:center;
          column-gap:calc(1 * var(--spacing));

          grid-template-columns:3fr 1fr;

          &:first-child{
            > h3{
              margin-top:0;
            }
          }

          h3{
            grid-column:span 2;
          }

          meter{
            height:calc(2 * var(--spacing));
            min-width:calc(8 * var(--spacing));
            background:transparent;
            box-shadow:inset 0 2px 4px 0 oklab(from var(--color-secondary-800) l a b / 10%);
            border-radius:var(--radius-full);

            &:-moz-meter-optimum::-moz-meter-bar{
              background:linear-gradient(
                var(--color-secondary-300) 0%,
                var(--color-secondary-200) 20%,
                var(--color-secondary-400) 65%
              );
            }
          }
        }
      }
    }

    .break-before-page{
      page-break-before:always;
    }
  }

  @media only screen and (max-width: 1024px){
    main.resume{
      article{
        flex-direction:column;
        overflow-x:hidden;

        .timeline{
          padding-inline:0;
          margin-inline:0;

          h2{
            text-align:center;
            margin-inline:0;
            padding-block:calc(2 * var(--spacing));
            padding-inline:calc(4 * var(--spacing));
            border-radius:var(--radius-full);
          }

          .subheading{
            margin-block-end:calc(4 * var(--spacing));
            display:flex;
            flex-direction:column;
            row-gap:calc(2 * var(--spacing));

            hr{
              display:none;
            }

            .bullet{
              display:none;
            }

            .when{
              display:flex;
              flex-direction:column;
              justify-content:start;
            }
          }
        }

        .side{
          border-inline-start:none;
          padding-inline:calc(4 * var(--spacing));
          padding-block-end:calc(4 * var(--spacing));

          .rating-list{
            &:first-child{
              > h3{
                margin-block-start:0;
              }
            }
          }
        }
      }

      h2.skills{
        display:block;
      }
    }
  }

  @media print,only screen and (min-width: 1024px){
    main.resume{
      article{
        flex-direction:row;

        .timeline{
          padding-inline-start:calc(8 * var(--spacing));
          padding-block-end:calc(8 * var(--spacing));

          .subheading{
            display:grid;
            grid-template-columns:auto minmax(calc(4 * var(--spacing)), 1fr) max-content minmax(calc(4 * var(--spacing)), calc(8 * var(--spacing))) 0;
            align-items:center;
            column-gap:calc(2 * var(--spacing));
          }

          .bullet{
            display:block;
          }

          .when{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
          }

          time.interval{
            grid-column-start:3;
            text-align:center;
          }
        }

        .side{
          padding-inline:calc(6 * var(--spacing));
          padding-block:calc(4 * var(--spacing));
        }
      }

      h2.skills{
        display:none;
      }
    }
  }

  @media print{
    main.resume{
      section.header{
        color:var(--color-primary-500);
        border-color:var(--color-primary-200);
        border-style:dotted;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:around;
        gap:calc(4 * var(--spacing));
        white-space:nowrap;

        padding-block-end:calc(8 * var(--spacing));

        & > h1{
          margin:0;
          padding-inline-start:calc(12 * var(--spacing));
          padding-inline-end:calc(4 * var(--spacing));
        }

        & > div{
          display:flex;
          flex-direction:row;
          flex-wrap:wrap;
          justify-content:around;
          column-gap:calc(8 * var(--spacing));
        }
      }

      article{
        .timeline{
          padding-inline-start:calc(12 * var(--spacing));

          h2{
            margin-block-start:0;
          }
        }
      }

      ul{
        orphans:0;
        widows:0;
      }
    }

    footer{
      display:none;
    }
  }
}
@layer utilities{
  main.resume > article{
    max-width:min(var(--current-breakpoint), var(--breakpoint-xl));
  }
}
@layer components{
  main.tags{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:calc(4 * var(--spacing));
    row-gap:calc(12 * var(--spacing));
    text-align:center;
  }
}
@layer components{
  .backgrounded-list{
    display:grid;
    grid-template-columns:repeat(1, minmax(0, 1fr));
    align-items:stretch;
    justify-content:stretch;
    gap:calc(4 * var(--spacing));

    @media only screen and (min-width: 1024px){
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    & > .backgrounded-list-item{
      position:relative;
      border:1px solid var(--color-primary-100);
      border-radius:var(--radius-md);
      overflow:clip;
      & > div[role="presentation"][aria-hidden="true"]{
        position:absolute;
        width:100%;
        height:100%;
        display:flex;
        align-items:stretch;
        justify-content:stretch;
        & > div[role="presentation"]{
          display:flex;
          align-items:center;
          justify-content:center;
          flex:1;
          font-size:var(--text-9xl);
        }

        > img{
          width:100%;
          height:100%;
          object-fit:cover;
        }
      }

      & > div:not([role="presentation"][aria-hidden="true"]){
        position:relative;
        width:100%;
        height:100%;
        min-height:calc(64 * var(--spacing));

        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:stretch;
        gap:calc(2 * var(--spacing));

        padding:calc(2 * var(--spacing));

        background-color:color-mix(in oklch, var(--color-primary-0) 95%, transparent);
        backdrop-filter:blur(2px);

        & > .background-list-item-title{
          display:block;
          padding-left:calc(2 * var(--spacing));
          padding-right:calc(2 * var(--spacing));
          line-height:1.5;
          text-decoration:none;

          &:hover{
            text-decoration:underline;
          }

          h3{
            margin:0;
            overflow-x:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }

          .readable-metadata{
            font-size:var(--text-sm);
          }
        }

        & > .background-list-item-content{
          flex:1;
          overflow:hidden;
          padding-left:calc(2 * var(--spacing));
          padding-right:calc(2 * var(--spacing));
          font-size:var(--text-lg);

          display:-webkit-box;
          line-clamp:8;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:8;
        }

        & > .background-list-item-tags{
          display:block;

          .list{
            margin-top:calc(2 * var(--spacing));
            flex:0 auto;
            flex-wrap:wrap;
            font-size:var(--text-sm);
          }
        }
      }
    }
  }
}
@layer components{
  .box{
    background-color:color-mix(in oklab, var(--color-primary-50) 50%, transparent);
    border:1px solid var(--color-primary-100);
    border-radius:var(--radius-md);
    padding-inline:calc(4 * var(--spacing));
    padding-block:calc(2 * var(--spacing));

    > :first-child{
      margin-block-start:0;
    }

    > :last-child{
      margin-block-end:0;
    }
  }
}
@layer components{
  .copyable{
    position:relative;

    > button.copy-button{
      position:absolute;
      top:0;
      right:0;
      margin:calc(2 * var(--spacing));

      cursor:pointer;
      opacity:0;
      border:1px solid var(--color-primary-100);
      background-color:var(--color-primary-0);
      border-radius:var(--radius-full);

      font-size:80%;
      line-height:1;

      &:hover{
        color:var(--color-blue-500);
        background-color:var(--color-white);
        border-color:var(--color-blue-500);
      }

      > div{
        display:inline-flex;
        width:fit-content;
        align-items:center;
        gap:0.25em;
        padding-inline:0.5em;
        padding-block:0.2em;
        > div{
          width:1em;
          height:1em;
          background-color:currentColor;
          mask-image:url(/img/icons/copy.svg);
          mask-repeat:no-repeat;
          mask-position:center;
          mask-size:95%;
        }

        &:before{
          content:"Copy";
        }
      }

      &:active > div{
        transform:translate(1px, 1px);
      }

      &.copied > div:before{
        content:"Copied";
      }
    }

    &:hover > button.copy-button{
      opacity:1;
    }
  }
}
@layer components{
  dialog{
    padding:0;
    border:none;
    background:transparent;
    max-width:none;
    max-height:none;
    width:100%;
    height:100%;

    &.active::backdrop{
      background:rgba(from var(--color-white) r g b / 80%);
      backdrop-filter:blur(3px);
    }

    &::backdrop{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(from var(--color-white) r g b / 0%);
      backdrop-filter:none;
      transition:background 0.2s ease-in-out, backdrop-filter 0.3s ease-in-out;
      z-index:-1;
    }
  }
}
@layer components{
  figure{
    margin-block:calc(2 * var(--spacing));

    img{
      width:auto;
      height:auto;
      max-width:100%;
      max-height:100%;
      object-fit:contain;
    }

    & > div{
      display:grid;
      grid-auto-rows:minmax(0, 1fr);
      justify-content:center;
      align-items:center;
      gap:calc(2 * var(--spacing));
      overflow-x:auto;

      grid-template-columns:repeat(1, minmax(0, 1fr));

      @media only screen and (min-width: 768px){
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }
  }
}
@layer components{
  footer{
    color:var(--color-primary-600);
    background-color:var(--color-primary-50);
    font-size:var(--text-sm);
    text-align:center;

    padding-block-start:calc(4 * var(--spacing));
    padding-block-end:calc(4 * var(--spacing));
    margin-block-start:calc(4 * var(--spacing));

    & > .list{
      margin-block-end:calc(2 * var(--spacing));
      font-size:var(--text-2xl);

      & > a{
        opacity:0.6;
        transition:opacity 250ms ease-in-out;

        &:hover{
          opacity:1;
        }
      }
    }
  }
}
@layer components{
  .fun-name{
    position:relative;
    translate:0 1rem;
    rotate:-4deg;
    margin-inline:auto;
    width:fit-content;
    margin-block-end:calc(4 * var(--spacing));

    & > h1{
      margin:0 auto;
      padding-block-end:calc(2 * var(--spacing));
      font-size:var(--text-5xl);
      line-height:1;
      text-align:center;
      white-space:nowrap;

      & > a{
        color:inherit;
        text-decoration:none;
      }

      & > span{
        position:absolute;
        color:var(--color-black);
        font-size:var(--text-xs);
        font-weight:var(--font-weight-light);
        translate:3.5em -0.25em;
      }

      @media only screen and (min-width: 640px){
        font-size:var(--text-6xl);

        & > span{
          font-size:var(--text-xs);
          translate:4em 0;
        }
      }

      @media only screen and (min-width: 768px){
        font-size:var(--text-7xl);

        & > span{
          font-size:var(--text-sm);
          translate:4.5em 0;
        }
      }

      @media only screen and (min-width: 1024px){
        font-size:var(--text-8xl);

        & > span{
          font-size:var(--text-base);
          translate:5em 0;
        }
      }
    }

    & > p{
      rotate:2deg;
      display:flex;
      flex-direction:column;
      gap:calc(2 * var(--spacing));
      text-align:center;
      margin-block-end:calc(2 * var(--spacing));
    }
  }
}
@layer utilities{
  .fun-name{
    & > h1{
      @property --header-name-gradient-angle{
        syntax:"<angle>";
        initial-value:0deg;
        inherits:false;
      }

      @keyframes header-name-animation{
        from{
          --header-name-gradient-angle:0deg;
        }

        to{
          --header-name-gradient-angle:360deg;
        }
      }

      background-image:conic-gradient(
        from var(--header-name-gradient-angle) at 50% 10%,
        oklch(70% 0.15 30) 0%,
        oklch(65% 0.15 30) 12.5%,
        oklch(60% 0.15 30) 25%,
        oklch(55% 0.12 30) 37.5%,
        oklch(50% 0.1 30) 50%,
        oklch(45% 0.08 30) 62.5%,
        oklch(40% 0.05 30) 75%,
        oklch(55% 0.12 30) 87.5%,
        oklch(70% 0.15 30) 100%
      );
      background-repeat:no-repeat;
      background-clip:text;
      color:transparent;
      animation:header-name-animation 2s ease-in-out infinite paused;

      &:hover{
        animation-play-state:running;
      }
    }
  }
}
@layer components{
  header{
    background-color:var(--color-primary-50);

    @media print{
      display:none;
    }

    nav{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:center;
      row-gap:calc(2 * var(--spacing));
      column-gap:calc(8 * var(--spacing));
      padding-top:0.5rem;
      padding-bottom:0.5rem;

      > a{
        text-decoration:none;
        color:inherit;
        border-bottom:2px solid transparent;
      }
    }
  }
}
@layer utilities{
  header > nav > a{
    &:hover{
      border-bottom-color:var(--color-primary-300);
    }

    &.active{
      border-bottom-color:var(--color-primary-500);
    }
  }
}
@layer components{
  .icon{
    display:inline-block;
    width:1em;
    height:1em;
    vertical-align:middle;

    color:currentColor;
    background:currentColor;
    mask-image:var(--icon-url);
    mask-position:center;
    mask-size:contain;
    mask-repeat:no-repeat;
    -webkit-mask-image:var(--icon-url);
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    -webkit-mask-repeat:no-repeat;
  }
}
@layer utilities{
  .image-viewer-target{
    cursor:zoom-in;
  }

  dialog.image-viewer{
    &.active{
      cursor:zoom-out;
    }

    & > .clone{
      position:fixed;
      margin:0;
      z-index:1000;
      transition-duration:0.2s;
      transition-property:transform;
      transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);
      cursor:zoom-out;
      will-change:transform;
      backface-visibility:hidden;
      transform:translateZ(0);
    }

    & > figure.clone{
      figcaption{
        color:var(--color-gray-600);
        text-align:center;
        text-wrap:balance;
      }
    }
  }
}
@layer components{
  .list{
    --gap:calc(4 * var(--spacing));

    display:flex;
    margin-left:0;
    margin-right:0;
    gap:var(--gap);

    &.horizontal{
      flex-direction:row;
    }

    &.vertical{
      flex-direction:column;
    }

    &.spacing-0{
      --gap:0;
    }

    &.spacing-1{
      --gap:calc(2 * var(--spacing));
    }

    &.spacing-2{
      --gap:calc(3 * var(--spacing));
    }

    &.border.horizontal{
      > * + *{
        padding-left:calc(0.5 * var(--gap));
        border-left:1px solid var(--color-primary-200);
      }
    }

    &.border.vertical{
      > * + *{
        padding-top:calc(0.5 * var(--gap));
        border-top:1px solid var(--color-primary-200);
      }
    }
  }
}
@layer components{
  .pill{
    border-radius:var(--radius-sm);
    padding-left:calc(2 * var(--spacing));
    padding-right:calc(2 * var(--spacing));

    &.yellow{
      color:var(--color-yellow-700);
      background-color:var(--color-yellow-100);
    }
  }
}
@layer components{
  .post-list{
    display:flex;
    flex-direction:column;
    width:100%;
    padding:calc(4 * var(--spacing));
    border-radius:var(--radius-md);

    @media only screen and (min-width: 640px){
      flex-direction:row;
    }

    &:hover{
      background-color:var(--color-primary-50);
    }

    & > a{
      flex:auto;
      text-decoration:none;

      h2{
        font-size:var(--text-xl);
        font-weight:normal;
        margin:0;
        padding:0;
      }

      & > .readable-metadata{
        font-size:var(--text-sm);
      }
    }
    & > .list{
      margin-top:calc(2 * var(--spacing));
      flex-wrap:wrap;
    }
  }
}
@layer components{
  .prose{
    line-height:1.75;
    font-weight:var(--font-weight-normal);

    article{
      max-width:var(--recommended-content-width);
    }

    iframe{
      margin-inline:auto;

      &[src*="youtube"]{
        width:100%;
        aspect-ratio:16 / 9;
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
      line-height:1.4;

      & + *{
        margin-block-start:calc(2 * var(--spacing));
      }
    }

    h2,
    h3,
    h4,
    h5,
    h6{
      margin-block-start:calc(6 * var(--spacing));
    }

    p{
      margin-block:calc(4 * var(--spacing));
    }

    img:not([role="presentation"][aria-hidden="true"]){
      color:var(--color-primary-500);
      margin-inline:auto;
      text-align:center;
      font-style:italic;
      border-radius:var(--radius-md);
    }

    figure{
      > img{
        margin:0;
        object-fit:contain;
      }

      > figcaption{
        margin-block-start:calc(2 * var(--spacing));
        font-size:0.8em;
        color:var(--color-gray-600);
        font-style:italic;
        text-wrap:balance;
        text-align:center;
        line-height:1.25;
      }
    }

    img,
    video{
      width:auto;
      height:auto;
      max-width:100%;
      max-height:50vh;
    }

    dl{
      margin-inline-start:calc(8 * var(--spacing));
      margin-inline-end:calc(16 * var(--spacing));

      display:grid;
      grid-template-columns:8em minmax(0, 1fr);
      gap:calc(4 * var(--spacing));

      dt{
        font-weight:bold;
        text-align:right;
      }
    }

    table{
      border:1px solid var(--color-primary-100);
      margin-inline:auto;

      thead{
        th{
          font-weight:bold;
          background-color:var(--color-primary-100);
          padding-inline:calc(4 * var(--spacing));
          padding-block:calc(2 * var(--spacing));
        }
      }

      tbody{
        tr{
          &:nth-child(even){
            background-color:var(--color-primary-50);
          }
        }

        td{
          padding-inline:calc(4 * var(--spacing));
          padding-block:calc(2 * var(--spacing));
        }
      }
    }

    ul,
    ol{
      margin-inline-start:calc(8 * var(--spacing));
      margin-block:calc(2 * var(--spacing));
    }

    blockquote{
      padding-inline:calc(4 * var(--spacing));
      margin-inline:calc(2 * var(--spacing));

      color:var(--color-primary-700);
      font-style:italic;

      border-color:var(--color-primary-100);
      border-inline-start-width:calc(2 * var(--spacing));
      border-start-end-radius:var(--radius-md);
      border-end-end-radius:var(--radius-md);

      @media only screen and (min-width: 768px){
        margin-inline:calc(4 * var(--spacing));
      }

      & > blockquote{
        padding-block:calc(2 * var(--spacing));
        margin-block:calc(2 * var(--spacing));
        border-inline-end-width:1px;
        border-block-width:1px;
      }

      & > p{
        margin:0;
      }
    }

    hr{
      margin-block:calc(4 * var(--spacing));
      border-top:1px dotted var(--color-primary-400);
    }
  }
}
@layer components{
  blockquote.quote{
    display:flex;
    flex-direction:column;
    gap:calc(2 * var(--spacing));
    padding-block-start:calc(6 * var(--spacing));
    padding-block-end:calc(2 * var(--spacing));

    > q{
      quotes:none;

      &:before{
        content:"“";
        color:var(--color-primary-200);
        font-family:var(--font-serif);
        font-size:6em;
        line-height:0;
        margin-inline-end:calc(2 * var(--spacing));
        vertical-align:-0.35em;
      }
    }

    > cite{
      text-align:right;
      font-style:normal;

      &:before{
        content:emdash;
      }
    }
  }
}
@layer components{
  dialog.search{
    > div{
      width:50vw;
      margin-inline:25vw;
      margin-block:10vh;
      max-height:80vh;
      overflow-x:hidden;
      overflow-y:auto;
      padding:0;

      box-shadow:0 0 10px 5px oklch(from var(--color-black) l c h / 10%);

      display:grid;
      grid-template-columns:1fr;
      grid-template-rows:auto 1fr;

      input{
        position:sticky;
        top:0;
        padding-inline:calc(4 * var(--spacing));
        padding-block:calc(2 * var(--spacing));

        &:focus{
          outline:2px solid var(--color-blue-500);
        }
      }

      ul{
        list-style:none;
        margin:0;
        padding:0;
        background-color:var(--color-white);

        &.no-results > li:first-child{
          text-align:center;
          font-size:var(--text-lg);
          padding:calc(4 * var(--spacing));
          color:var(--color-gray-600);
        }

        li{
          display:grid;
          grid-template-columns:2rem 1fr;
          column-gap:calc(4 * var(--spacing));
          justify-items:stretch;
          align-items:stretch;

          margin:0;
          padding-block:calc(2 * var(--spacing));
          padding-inline:calc(4 * var(--spacing));
          scroll-margin-block-start:calc(4 * var(--spacing) + 1.5em);

          &[data-selected]{
            background-color:var(--color-primary-100);
          }

          &:hover{
            background-color:var(--color-primary-50);
          }

          &::before{
            content:"";
            margin-top:calc(2 * var(--spacing));
            background-repeat:no-repeat;
            background-position:center top;
            background-size:100% auto;
            text-align:center;
            font-size:var(--text-3xl);
            line-height:1;
          }

          &[data-type="post"]::before{
            background-image:url(/img/icons/web.svg);
          }

          &[data-type="presentation"]::before{
            background-image:url(/img/icons/presentation.svg);
          }

          &[data-type="about"]::before{
            content:"🙋🏼‍♂️";
          }

          &[data-type="manifesto"]::before{
            content:"🌳";
          }

          &[data-type="resume"]::before{
            background-image:url(/img/icons/resume.svg);
          }

          a{
            display:block;
            text-decoration:none;
            color:inherit;

            mark{
              --skew-size:0.25em;
              --mark-color:#ffff00;

              margin-inline:calc(-1 * var(--skew-size));
              padding-inline:calc(1 * var(--skew-size));
              border-radius:var(--radius-sm);

              background-color:transparent;
              background-image:linear-gradient(to bottom right, transparent 50%, var(--mark-color) 50% 100%), linear-gradient(to bottom right, var(--mark-color) 50%, var(--mark-color) 50% 100%), linear-gradient(to bottom right, var(--mark-color) 50%, transparent 50% 100%);
              background-size:var(--skew-size) 0.4em, calc(100% - 2 * var(--skew-size)) 0.4em, var(--skew-size) 0.4em;
              background-position:left 60%, center 60%, right 60%;
              background-repeat:no-repeat;
            }

            > h2{
              font-size:1em;
            }

            > p{
              display:-webkit-box;
              -webkit-box-orient:vertical;
              overflow:hidden;
              margin:0;
              max-width:100%;
              word-break:normal;
              line-break:anywhere;

              &.description{
                line-clamp:1;
                -webkit-line-clamp:1;
              }

              &.content{
                font-size:0.8em;
                margin-top:calc(1 * var(--spacing));
                padding-top:calc(1 * var(--spacing));
                border-top:1px dotted var(--color-primary-200);
                word-break:break-all;
                line-clamp:2;
                -webkit-line-clamp:2;
              }
            }
          }
        }
      }
    }
  }
}
@layer components{
  .stroked{
    color:var(--color-orange-600);
    padding:calc(4 * var(--spacing));

    &::before{
      background-color:var(--color-orange-200);
      content:"";
      position:absolute;
      display:block;
      z-index:-1000;

      mask:url(/img/brush.svg);
      mask-repeat:no-repeat;
      mask-size:100% 100%;
      top:calc(1 * var(--spacing));
      left:calc(-1 * var(--spacing));
      width:calc(100% + 2 * var(--spacing));
      height:calc(100% - 1 * var(--spacing));
    }
  }
}
@layer components{
  .summary{
    padding:calc(2 * var(--spacing));

    & > h2:first-child{
      color:var(--color-primary-600);
      text-align:center;
      font-size:var(--text-2xl);
      font-weight:bold;
    }

    ul,
    ol{
      list-style-type:"✏️️";
      margin-inline-start:calc(6 * var(--spacing));
    }
  }
}
@layer utilities{
  .summary{
    & > :first-child{
      margin-block-start:0;
    }

    & > :last-child{
      margin-block-end:0;
    }
  }
}
:root{
  --color-prettylights-syntax-brackethighlighter-angle:#59636e;
  --color-prettylights-syntax-brackethighlighter-unmatched:#82071e;
  --color-prettylights-syntax-carriage-return-bg:#cf222e;
  --color-prettylights-syntax-carriage-return-text:#f6f8fa;
  --color-prettylights-syntax-comment:#59636e;
  --color-prettylights-syntax-constant:#0550ae;
  --color-prettylights-syntax-constant-other-reference-link:#0a3069;
  --color-prettylights-syntax-entity:#6639ba;
  --color-prettylights-syntax-entity-tag:#0550ae;
  --color-prettylights-syntax-invalid-illegal-bg:#82071e;
  --color-prettylights-syntax-invalid-illegal-text:#f6f8fa;
  --color-prettylights-syntax-keyword:#cf222e;
  --color-prettylights-syntax-markup-changed-bg:#ffd8b5;
  --color-prettylights-syntax-markup-changed-text:#953800;
  --color-prettylights-syntax-markup-deleted-bg:#ffebe9;
  --color-prettylights-syntax-markup-deleted-text:#82071e;
  --color-prettylights-syntax-markup-heading:#0550ae;
  --color-prettylights-syntax-markup-ignored-bg:#0550ae;
  --color-prettylights-syntax-markup-ignored-text:#d1d9e0;
  --color-prettylights-syntax-markup-inserted-bg:#dafbe1;
  --color-prettylights-syntax-markup-inserted-text:#116329;
  --color-prettylights-syntax-markup-list:#3b2300;
  --color-prettylights-syntax-meta-diff-range:#8250df;
  --color-prettylights-syntax-string:#0a3069;
  --color-prettylights-syntax-string-regexp:#116329;
  --color-prettylights-syntax-sublimelinter-gutter-mark:#818b98;
  --color-prettylights-syntax-variable:#953800;
  --color-prettylights-syntax-markup-bold:#1f2328;
  --color-prettylights-syntax-markup-italic:#1f2328;
  --color-prettylights-syntax-storage-modifier-import:#1f2328;
}
@media (prefers-color-scheme: dark){
  :root{
    --color-prettylights-syntax-brackethighlighter-angle:#9198a1;
    --color-prettylights-syntax-brackethighlighter-unmatched:#f85149;
    --color-prettylights-syntax-carriage-return-bg:#b62324;
    --color-prettylights-syntax-carriage-return-text:#f0f6fc;
    --color-prettylights-syntax-comment:#9198a1;
    --color-prettylights-syntax-constant:#79c0ff;
    --color-prettylights-syntax-constant-other-reference-link:#a5d6ff;
    --color-prettylights-syntax-entity:#d2a8ff;
    --color-prettylights-syntax-entity-tag:#7ee787;
    --color-prettylights-syntax-invalid-illegal-bg:#8e1519;
    --color-prettylights-syntax-invalid-illegal-text:#f0f6fc;
    --color-prettylights-syntax-keyword:#ff7b72;
    --color-prettylights-syntax-markup-bold:#f0f6fc;
    --color-prettylights-syntax-markup-changed-bg:#5a1e02;
    --color-prettylights-syntax-markup-changed-text:#ffdfb6;
    --color-prettylights-syntax-markup-deleted-bg:#67060c;
    --color-prettylights-syntax-markup-deleted-text:#ffdcd7;
    --color-prettylights-syntax-markup-heading:#1f6feb;
    --color-prettylights-syntax-markup-ignored-bg:#1158c7;
    --color-prettylights-syntax-markup-ignored-text:#f0f6fc;
    --color-prettylights-syntax-markup-inserted-bg:#033a16;
    --color-prettylights-syntax-markup-inserted-text:#aff5b4;
    --color-prettylights-syntax-markup-italic:#f0f6fc;
    --color-prettylights-syntax-markup-list:#f2cc60;
    --color-prettylights-syntax-meta-diff-range:#d2a8ff;
    --color-prettylights-syntax-storage-modifier-import:#f0f6fc;
    --color-prettylights-syntax-string:#a5d6ff;
    --color-prettylights-syntax-string-regexp:#7ee787;
    --color-prettylights-syntax-sublimelinter-gutter-mark:#3d444d;
    --color-prettylights-syntax-variable:#ffa657;
  }
}
.pl-c{
  color:var(--color-prettylights-syntax-comment);
}
.pl-c1,
.pl-s .pl-v{
  color:var(--color-prettylights-syntax-constant);
}
.pl-e,
.pl-en{
  color:var(--color-prettylights-syntax-entity);
}
.pl-smi,
.pl-s .pl-s1{
  color:var(--color-prettylights-syntax-storage-modifier-import);
}
.pl-ent{
  color:var(--color-prettylights-syntax-entity-tag);
}
.pl-k{
  color:var(--color-prettylights-syntax-keyword);
}
.pl-s,
.pl-pds,
.pl-s .pl-pse .pl-s1,
.pl-sr,
.pl-sr .pl-cce,
.pl-sr .pl-sre,
.pl-sr .pl-sra{
  color:var(--color-prettylights-syntax-string);
}
.pl-v,
.pl-smw{
  color:var(--color-prettylights-syntax-variable);
}
.pl-bu{
  color:var(--color-prettylights-syntax-brackethighlighter-unmatched);
}
.pl-ii{
  color:var(--color-prettylights-syntax-invalid-illegal-text);
  background-color:var(--color-prettylights-syntax-invalid-illegal-bg);
}
.pl-c2{
  color:var(--color-prettylights-syntax-carriage-return-text);
  background-color:var(--color-prettylights-syntax-carriage-return-bg);
}
.pl-sr .pl-cce{
  font-weight:bold;
  color:var(--color-prettylights-syntax-string-regexp);
}
.pl-ml{
  color:var(--color-prettylights-syntax-markup-list);
}
.pl-mh,
.pl-mh .pl-en,
.pl-ms{
  font-weight:bold;
  color:var(--color-prettylights-syntax-markup-heading);
}
.pl-mi{
  font-style:italic;
  color:var(--color-prettylights-syntax-markup-italic);
}
.pl-mb{
  font-weight:bold;
  color:var(--color-prettylights-syntax-markup-bold);
}
.pl-md{
  color:var(--color-prettylights-syntax-markup-deleted-text);
  background-color:var(--color-prettylights-syntax-markup-deleted-bg);
}
.pl-mi1{
  color:var(--color-prettylights-syntax-markup-inserted-text);
  background-color:var(--color-prettylights-syntax-markup-inserted-bg);
}
.pl-mc{
  color:var(--color-prettylights-syntax-markup-changed-text);
  background-color:var(--color-prettylights-syntax-markup-changed-bg);
}
.pl-mi2{
  color:var(--color-prettylights-syntax-markup-ignored-text);
  background-color:var(--color-prettylights-syntax-markup-ignored-bg);
}
.pl-mdr{
  font-weight:bold;
  color:var(--color-prettylights-syntax-meta-diff-range);
}
.pl-ba{
  color:var(--color-prettylights-syntax-brackethighlighter-angle);
}
.pl-sg{
  color:var(--color-prettylights-syntax-sublimelinter-gutter-mark);
}
.pl-corl{
  text-decoration:underline;
  color:var(--color-prettylights-syntax-constant-other-reference-link);
}
@layer utilities{
  .highlighted-code{
    display:block;
    overflow-x:hidden;
    overflow-y:auto;

    white-space:pre-wrap;
    word-spacing:normal;
    word-break:break-all;
    line-break:anywhere;
    overflow-wrap:anywhere;
    hyphens:none;

    &.numbered{
      &.box{
        padding-inline:0;
      }

      .line::before{
        content:attr(data-line-number);
        display:inline-block;
        width:1em;
        margin-inline-end:1em;
        color:var(--color-prettylights-syntax-sublimelinter-gutter-mark);

        text-align:right;
        user-select:none;
        -webkit-user-select:none;
      }
    }

    &.with-highlights{
      --mark-padding-x:6px;
      --mark-padding-y:4px;
      padding-block:var(--mark-padding-y);
      padding-inline:var(--mark-padding-x);

      &:not(.opaque) .line:not(:has(mark)){
        opacity:0.25;
      }

      & > .line mark{
        position:relative;
        font-weight:inherit;
        color:inherit;
        padding:0;
      }

      &:not(.no-marker-background){
        & > .line mark::before{
          content:"";
          position:absolute;
          top:calc(0px - var(--mark-padding-y));
          left:calc(0px - var(--mark-padding-x));
          width:calc(100% + 2 * var(--mark-padding-x));
          height:calc(100% + 2 * var(--mark-padding-y));
          background-color:color-mix(in srgb, var(--color-prettylights-syntax-markup-changed-bg), white 50%);
          border-radius:var(--mark-padding-x);
          z-index:-1;
        }
      }
    }
  }
}
@layer components{
  .tag{
    display:inline-flex;
    align-items:center;
    gap:var(--spacing);

    line-height:1;
    padding-block:0.5em;
    padding-inline:0.75em;
    border-radius:var(--radius-full);

    --hover-brightness:1.05;
    --background-color:var(--color-primary-100);
    --foreground-color:var(--color-primary-700);

    background-color:var(--background-color);
    color:var(--foreground-color);

    &:hover{
      background-color:color-mix(in oklab, var(--background-color) 80%, var(--color-primary-0));
      color:color-mix(in oklab, var(--foreground-color) 80%, var(--color-primary-0));
    }

    transition-property:background-color, color;
    transition-duration:100ms;
    transition-timing-function:ease-out;
  }

  .tag[data-icon="c++"]{
    --background-color:#1a437e;
    --foreground-color:#ffffff;
  }
  .tag[data-icon="java"],
  .tag[data-icon="jni"]{
    --background-color:#3b5c72;
    --foreground-color:#ffffff;
  }

  .tag[data-icon="javascript"]{
    --background-color:#f0db4f;
    --foreground-color:#323330;
  }

  .tag[data-icon="jekyll"]{
    --background-color:#333333;
    --foreground-color:#ffffff;
  }

  .tag[data-icon="opengl"]{
    --background-color:#3c5467;
    --foreground-color:#ffffff;
  }

  .tag[data-icon="python"]{
    --background-color:#4584b6;
    --foreground-color:#ffde57;
  }

  .tag[data-icon="qt"]{
    --background-color:#184049;
    --foreground-color:#6cdb8d;
  }

  .tag[data-icon="react"]{
    --background-color:#387ca0;
    --foreground-color:#fff;
  }

  .tag[data-icon="rust"]{
    --background-color:#b7410e;
    --foreground-color:#fff;
  }

  .tag[data-icon="typescript"]{
    --background-color:#4476c0;
    --foreground-color:#fff;
  }

  .tag[data-icon="security"]{
    --background-color:#111111;
    --foreground-color:#eeee00;
  }
}
@layer components{
  .unpublished{
    background-color:var(--color-yellow-100);
  }

  .unpublished.box{
    color:var(--color-yellow-700);
    background-color:var(--color-yellow-100);
    border:1px solid var(--color-yellow-200);
    border-radius:var(--radius-md);
    margin-block:calc(8 * var(--spacing));
    padding:calc(4 * var(--spacing));
    font-weight:var(--font-weight-bold);
    text-align:center;
  }
}
@layer components{
  .wave{
    display:block;
    width:100%;

    & > div:first-child{
      display:flex;
      flex-direction:column;
      align-items:center;
      background-color:var(--color-primary-50);
    }

    &::after{
      content:"";
      display:block;
      position:relative;
      background-color:var(--color-primary-50);
      mask:url(/img/wave.svg);
      mask-repeat:no-repeat;
      mask-size:100% 100%;
      height:2rem;
      z-index:-10000;
    }
  }
}
@layer components{
  .slides > .slide.centered{
    &:not(.blank) > .content{
      padding:calc(8 * var(--spacing));
    }

    &.text-centered{
      > .content{
        text-align:center;
        text-wrap:balance;
      }
    }

    > .content{
      display:flex;
      align-items:center;
      justify-content:center;
      place-self:center;
      align-self:center;
    }
  }
}
@layer components{
  .slides .slide.points > .content{
    padding:calc(8 * var(--spacing));

    display:grid;
    align-items:stretch;
    justify-items:stretch;
    row-gap:calc(8 * var(--spacing));
    column-gap:calc(16 * var(--spacing));

    font-size:var(--text-xl);
    grid-template-rows:min-content calc(100% - var(--text-4xl) - 8 * var(--spacing));

    h1{
      font-size:var(--text-4xl);
      margin:0;
      padding:0;
      line-height:1;
    }

    img{
      object-fit:contain;
      width:100%;
      height:100%;
    }

    p,
    ul,
    ol{
      margin:0;
      padding-inline:calc(8 * var(--spacing));
    }

    ul,
    ol{
      line-height:2.5;

      > li{
        line-height:1.5;
      }

      ul > li,
      ol > li{
        margin:0;
        line-height:1.25;
      }
    }
  }
}
@layer components{
  .slides .slide.quote{
    blockquote{
      margin-block-start:calc(8 * var(--spacing));
      margin-inline-start:calc(4 * var(--spacing));
      display:flex;
      flex:1;
      flex-direction:column;
      justify-content:center;
      gap:calc(4 * var(--spacing));
      border-left-width:calc(12 * var(--spacing));
      border-color:var(--color-gray-200);

      p{
        margin:unset;
        border:unset;
        background:unset;
        padding-inline:calc(8 * var(--spacing));

        text-align:justify;
        font-size:var(--text-3xl);
        font-style:normal;
        font-weight:var(--font-weight-extralight);
        letter-spacing:0.05em;
        line-height:1.5;
        hyphens:auto;
      }

      strong{
        font-weight:var(--font-weight-extrabold);
      }

      cite{
        margin-block-start:calc(4 * var(--spacing));
        display:block;
        width:100%;
        border-top-color:var(--color-gray-200);
        border-top-width:0.1rem;
        padding-block-start:calc(8 * var(--spacing));
        padding-inline-end:calc(20 * var(--spacing));
        text-align:right;
        font-size:var(--text-xl);
        font-style:normal;
        font-weight:var(--font-weight-bold);
      }
    }
  }
}
@layer components{
  .slides > .slide.thank-you > .content{
    & > div{
      display:flex;
      width:100%;
      height:100%;
      flex-direction:column;
      align-items:stretch;
      justify-content:space-around;
      gap:calc(8 * var(--spacing));
      font-size:var(--text-2xl);

      > *{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:center;
        text-align:center;
      }

      > :first-child{
        flex:3;
        gap:calc(8 * var(--spacing));
        font-weight:var(--font-weight-bold);
        > p:first-child{
          font-size:var(--text-6xl);
        }
        > p:last-child{
          font-size:var(--text-4xl);
          letter-spacing:0.1em;
        }
      }

      > :not(:first-child):not(:last-child){
        justify-content:space-around;
      }
      > :last-child{
        gap:calc(4 * var(--spacing));
        > nav{
          display:flex;
          align-items:stretch;
          justify-content:space-around;

          a{
            color:var(--color-primary-600);
          }
        }
      }
    }
  }
}
@layer components{
  .slides .slide.title{
    > .content{
      display:grid;
      grid-template-columns:1fr;
      align-items:stretch;

      h1{
        align-self:end;
        padding-inline:calc(8 * var(--spacing));
        padding-block-end:calc(4 * var(--spacing));
        font-size:var(--text-5xl);
        grid-row:1;
        text-wrap:balance;
      }

      h2{
        align-self:start;
        padding-inline:calc(16 * var(--spacing));
        padding-block-start:calc(4 * var(--spacing));
        font-size:var(--text-3xl);
        font-weight:var(--font-weight-normal);
        grid-row:2;
        text-wrap:balance;
      }
    }

    &:not([data-slide-number="1"]) > .content{
      grid-template-rows:1fr 1fr;
    }

    &[data-slide-number="1"] > .content{
      grid-template-rows:2fr 1fr min-content;

      .my-title{
        display:flex;
        padding:2rem;
        grid-row:3;

        flex-direction:column;
        gap:calc(1 * var(--spacing));
        align-items:end;

        font-size:var(--text-base);
        line-height:1.5;
        vertical-align:middle;

        .name{
          font-size:var(--text-xl);
          font-weight:var(--font-weight-extrabold);
        }

        .company{
          img{
            margin-block-start:calc(0.25 * var(--text-base));
            width:auto;
            height:calc(1.5 * var(--text-base));
            max-height:calc(1.5 * var(--text-base));
          }
        }
      }
    }
  }
}
@layer components{
  .slides > .slide.title-with-points > .content{
    display:grid;
    grid-template-rows:min-content 1fr;
    justify-content:stretch;
    row-gap:calc(8 * var(--spacing));

    > h1{
      grid-row:1;
      line-height:1;
      margin:0;
      padding-block:calc(8 * var(--spacing));
      padding-inline:calc(8 * var(--spacing));
    }

    > :not(h1){
      grid-row:2;
      padding-inline:calc(8 * var(--spacing));
      position:initial;
    }
  }
}
@layer components{
  .slides .slide.two-column{
    > .content{
      display:grid;
      align-items:center;
      justify-items:stretch;
      justify-content:center;
      gap:calc(8 * var(--spacing));
      grid-template-columns:repeat(2, auto);
    }

    &.padded{
      > .content{
        padding:calc(8 * var(--spacing));
      }
    }

    &.with-description{
      &.reversed > .content{
        grid-template-areas:"image description";
        grid-template-columns:1fr 2fr;

        > div{
          text-align:right;

          > :first-child{
            margin-inline-start:calc(4 * var(--spacing));
            padding-inline-end:calc(6 * var(--spacing));
          }
        }
      }

      &:not(.reversed) > .content{
        grid-template-areas:"description image";
        grid-template-columns:2fr 1fr;

        > div > :first-child{
          margin-inline-end:calc(4 * var(--spacing));
          padding-inline-start:calc(6 * var(--spacing));
        }
      }

      > .content{
        gap:0;
        > :first-child{
          grid-area:description;
          text-wrap:balance;
        }

        > div:first-child{
          margin-block-end:calc(8 * var(--spacing));
          display:flex;
          flex:1;
          flex-direction:column;
          justify-content:center;

          > :first-child{
            margin-block-end:calc(4 * var(--spacing));
            font-size:var(--text-5xl);
          }

          > :not(:first-child){
            margin-block-start:calc(3 * var(--spacing));
            border-top-width:1px;
            border-color:var(--color-gray-300);
            padding-inline:calc(12 * var(--spacing));
            padding-block-start:calc(3 * var(--spacing));
            font-size:var(--text-3xl);
            font-weight:var(--font-weight-extralight);
            letter-spacing:0.05em;
          }
        }

        > :not(:first-child){
          grid-area:image;
          width:100%;
          height:100%;
        }

        > img{
          &:not(.object-contain){
            object-fit:cover;
          }
        }
      }
    }
  }
}
@layer utilities{
  .slides{
    .slide{
      > .content{
        code{
          &.inline{
            background:unset;
          }
        }

        .highlighted-code{
          margin-block:unset;
          overflow:hidden;

          &:not(.w-full){
            width:fit-content;
          }

          &.background{
            border-radius:var(--radius-lg);
            background-color:var(--color-primary-50);
            padding:calc(8 * var(--spacing));
          }
        }
      }
    }
  }
}
@layer components{
  :root{
    --slide-zoom:0.25;
    --slide-aspect-ratio-width:16;
    --slide-aspect-ratio-height:9;
  }

  @media only screen and (min-width: 1024px){
    :root{
      --slide-zoom:0.4;
    }
  }

  @media only screen and (min-width: 1280px){
    :root{
      --slide-zoom:0.5;
    }
  }

  @media (aspect-ratio: 16/10){
    :root{
      --slide-aspect-ratio-width:16;
      --slide-aspect-ratio-height:10;
    }
  }

  @media (aspect-ratio: 4/3){
    :root{
      --slide-aspect-ratio-width:4;
      --slide-aspect-ratio-height:3;
    }
  }

  @media (aspect-ratio: 1/1){
    :root{
      --slide-aspect-ratio-width:1;
      --slide-aspect-ratio-height:1;
    }
  }

  html.presentation[data-mode="presenting"]{
    --slide-zoom:1;

    header,
    footer{
      display:none;
    }

    body{
      margin:0;
      padding:0;
      overflow:hidden;
    }

    .slides{
      display:flex;
      flex-direction:column;
      gap:0;

      & > .slide{
        border:none;
        border-radius:0;
        width:100vw;
        height:100vh;
        max-width:100vw;
        max-height:100vh;
        overflow:hidden;

        > .content{
          width:100vw;
          height:100vh;
          max-width:100vw;
          max-height:100vh;
          overflow:hidden;
        }
      }

      aside{
        display:none;
      }
    }
  }

  html.presentation[data-mode="speaker-notes"]{
    --slide-zoom:0.5;

    header,
    footer{
      display:none;
    }

    body{
      margin:0;
      padding:0;
      overflow:hidden;
    }

    .slides{
      grid-template-areas:"slide speaker-notes";
      grid-template-columns:auto 1fr;
      column-gap:2rem;
      padding-inline:2rem;

      .slide,
      aside{
        margin:0;
        padding:0;
        scroll-margin-top:2rem;
      }

      aside{
        height:100vh;
        font-size:1em;
        line-height:1.4;

        > ul,
        > ol{
          list-style-type:unset;
        }
      }
    }
  }

  html.presentation[data-mode="overview"]{
    --slide-zoom:0.2;

    .slides{
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
      gap:calc(4 * var(--spacing));

      & > .slide.active{
        outline:2px solid var(--color-blue-500);
      }

      & > aside{
        display:none;
      }
    }
  }

  .slides{
    display:grid;
    grid-template-columns:[slide] auto [speaker-notes] auto;
    align-items:start;
    justify-items:center;
    row-gap:calc(4 * var(--spacing));
    padding:calc(4 * var(--spacing));
    max-width:100%;

    @media only screen and (max-width: 768px){
      display:flex;
      flex-direction:column;
      align-items:center;
    }

    h1,
    h2,
    h3,
    h4,
    h5{
      margin:0;
      color:var(--color-primary-700);
    }

    h1{
      font-size:var(--text-4xl);
      font-weight:var(--font-weight-extrabold);
    }

    h2{
      font-size:var(--text-3xl);
    }

    h3{
      font-size:var(--text-2xl);
    }

    mark{
      background:unset;
      font-weight:600;
      color:var(--color-red-400);
    }

    a{
      text-decoration:none;
      color:var(--color-blue-500);
    }

    .timer{
      position:fixed;
      z-index:50;
      left:0;
      bottom:0;
      height:fit-content;
      width:fit-content;
      padding:calc(8 * var(--spacing));
      font-family:var(--font-monospace);
      font-size:var(--text-4xl);
    }

    .slide{
      --font-size:36px;
      --text-4xs:calc(4 / 16 * var(--font-size));
      --text-3xs:calc(8 / 16 * var(--font-size));
      --text-2xs:calc(10 / 16 * var(--font-size));
      --text-xs:calc(12 / 16 * var(--font-size));
      --text-sm:calc(14 / 16 * var(--font-size));
      --text-base:calc(16 / 16 * var(--font-size));
      --text-lg:calc(18 / 16 * var(--font-size));
      --text-xl:calc(20 / 16 * var(--font-size));
      --text-2xl:calc(24 / 16 * var(--font-size));
      --text-3xl:calc(30 / 16 * var(--font-size));
      --text-4xl:calc(36 / 16 * var(--font-size));
      --text-5xl:calc(48 / 16 * var(--font-size));
      --text-6xl:calc(64 / 16 * var(--font-size));
      --text-7xl:calc(72 / 16 * var(--font-size));
      --text-8xl:calc(96 / 16 * var(--font-size));
      --text-9xl:calc(128 / 16 * var(--font-size));

      grid-area:slide;

      font-size:var(--font-size);
      background-color:var(--color-white);
      border:1px solid var(--color-gray-200);
      border-radius:var(--radius-md);
      position:relative;
      overflow:clip;

      width:calc(var(--slide-zoom) * var(--slide-aspect-ratio-width));
      height:calc(var(--slide-zoom) * var(--slide-aspect-ratio-height));
      max-width:calc(var(--slide-zoom) * var(--slide-aspect-ratio-width));
      max-height:calc(var(--slide-zoom) * var(--slide-aspect-ratio-height));

      > .content{
        display:flex;
        flex-direction:column;

        width:var(--slide-aspect-ratio-width);
        height:calc(var(--slide-aspect-ratio-height));
        max-width:var(--slide-aspect-ratio-width);
        max-height:calc(var(--slide-aspect-ratio-height));

        transform:scale(var(--slide-zoom));
        transform-origin:top left;
        > p{
          margin:0;
        }
      }
      > div{
        position:relative;
        z-index:50;
      }

      .overlay{
        position:absolute;
        top:0;
        left:0;
        z-index:0;
        aspect-ratio:auto;
        height:100%;
        width:100%;

        &.contain{
          object-fit:contain;
        }

        &:not(.contain){
          object-fit:cover;
          object-position:center;
        }

        &:not(.opaque){
          opacity:10%;
        }
      }
    }
    aside{
      grid-area:speaker-notes;

      display:flex;
      flex-direction:column;
      row-gap:calc(2 * var(--spacing));
      padding-inline:calc(4 * var(--spacing));
      font-size:var(--text-sm);
      min-width:10vw;
      & > :has(+ cite:last-child){
        flex:1;
      }

      > ul,
      > ol{
        margin-inline-start:calc(8 * var(--spacing));

        li{
          padding-inline-start:0;

          &:not(:last-child){
            margin-block-end:calc(1 * var(--spacing));
          }
        }
      }

      cite{
        font-size:var(--text-xs);
        font-weight:var(--font-weight-extralight);
        letter-spacing:0.05em;
      }
    }
  }
}
@layer utilities{
  @property --header-name-gradient-angle{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
  }

  @keyframes header-name-animation{
    from{
      --header-name-gradient-angle:0deg;
    }

    to{
      --header-name-gradient-angle:360deg;
    }
  }

  .header-name > a{
    background-image:conic-gradient(
      from var(--header-name-gradient-angle) at 50% 10%,
      oklch(70% 0.15 30) 0%,
      oklch(65% 0.15 30) 12.5%,
      oklch(60% 0.15 30) 25%,
      oklch(55% 0.12 30) 37.5%,
      oklch(50% 0.1 30) 50%,
      oklch(45% 0.08 30) 62.5%,
      oklch(40% 0.05 30) 75%,
      oklch(55% 0.12 30) 87.5%,
      oklch(70% 0.15 30) 100%
    );
    background-repeat:no-repeat;
    background-clip:text;
    color:transparent;

    animation:header-name-animation 2s ease-in-out infinite paused;

    &:hover{
      animation-play-state:running;
    }
  }
}
:root{
  --font-math:"Times New Roman", Times, serif;
  --font-serif:ui-serif, serif;
  --font-monospace:ui-monospace, monospace;
  --font-sans:ui-sans-serif, system-ui, sans-serif;

  --breakpoint-sm:640px;
  --breakpoint-md:768px;
  --breakpoint-lg:1024px;
  --breakpoint-xl:1280px;
  --breakpoint-2xl:1600px;

  --color-black:oklch(0% 0 0);
  --color-white:oklch(100% 0 0);

  --color-primary-0:oklch(100% 0.01 30);
  --color-primary-50:oklch(98% 0.02 30);
  --color-primary-100:oklch(95% 0.03 30);
  --color-primary-200:oklch(90% 0.05 30);
  --color-primary-300:oklch(80% 0.06 30);
  --color-primary-400:oklch(70% 0.08 30);
  --color-primary-500:oklch(60% 0.1 30);
  --color-primary-600:oklch(50% 0.08 30);
  --color-primary-700:oklch(40% 0.06 30);
  --color-primary-800:oklch(30% 0.05 30);
  --color-primary-900:oklch(20% 0.03 30);
  --color-primary-950:oklch(10% 0.01 30);

  --color-secondary-0:oklch(100% 0.01 145);
  --color-secondary-50:oklch(98% 0.02 145);
  --color-secondary-100:oklch(95% 0.03 145);
  --color-secondary-200:oklch(90% 0.05 145);
  --color-secondary-300:oklch(80% 0.06 145);
  --color-secondary-400:oklch(70% 0.08 145);
  --color-secondary-500:oklch(60% 0.1 145);
  --color-secondary-600:oklch(50% 0.08 145);
  --color-secondary-700:oklch(40% 0.06 145);
  --color-secondary-800:oklch(30% 0.05 145);
  --color-secondary-900:oklch(20% 0.03 145);
  --color-secondary-950:oklch(10% 0.01 145);

  --color-blue-300:oklch(80% 0.2 260);
  --color-blue-400:oklch(70% 0.2 260);
  --color-blue-500:oklch(60% 0.2 260);
  --color-blue-600:oklch(50% 0.2 260);

  --color-gray-100:oklch(95% 0.01 240);
  --color-gray-200:oklch(90% 0.01 240);
  --color-gray-300:oklch(80% 0.01 240);
  --color-gray-600:oklch(60% 0.01 240);
  --color-gray-800:oklch(30% 0.01 240);

  --color-green-500:oklch(60% 0.2 145);

  --color-orange-100:oklch(95% 0.1 80);
  --color-orange-200:oklch(90% 0.1 80);
  --color-orange-600:oklch(40% 0.15 80);

  --color-red-400:oklch(70% 0.15 30);
  --color-red-500:oklch(60% 0.2 30);

  --color-yellow-100:oklch(95% 0.07 95);
  --color-yellow-200:oklch(90% 0.15 95);
  --color-yellow-300:oklch(80% 0.15 95);
  --color-yellow-400:oklch(70% 0.15 95);
  --color-yellow-500:oklch(60% 0.15 95);
  --color-yellow-700:oklch(40% 0.13 95);

  --radius-sm:0.25rem;
  --radius-md:0.375rem;
  --radius-lg:0.5rem;
  --radius-full:calc(infinity * 1px);

  --spacing:0.25rem;

  --font-size:22px;
  --text-4xs:calc(4 / 16 * var(--font-size));
  --text-3xs:calc(8 / 16 * var(--font-size));
  --text-2xs:calc(10 / 16 * var(--font-size));
  --text-xs:calc(12 / 16 * var(--font-size));
  --text-sm:calc(14 / 16 * var(--font-size));
  --text-base:calc(16 / 16 * var(--font-size));
  --text-lg:calc(18 / 16 * var(--font-size));
  --text-xl:calc(20 / 16 * var(--font-size));
  --text-2xl:calc(24 / 16 * var(--font-size));
  --text-3xl:calc(30 / 16 * var(--font-size));
  --text-4xl:calc(36 / 16 * var(--font-size));
  --text-5xl:calc(48 / 16 * var(--font-size));
  --text-6xl:calc(64 / 16 * var(--font-size));
  --text-7xl:calc(72 / 16 * var(--font-size));
  --text-8xl:calc(96 / 16 * var(--font-size));
  --text-9xl:calc(128 / 16 * var(--font-size));

  --font-weight-thin:100;
  --font-weight-extralight:200;
  --font-weight-light:300;
  --font-weight-normal:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-extrabold:800;
  --current-breakpoint:calc(100vw - 8 * var(--spacing));
  --recommended-main-width:min(var(--current-breakpoint), var(--breakpoint-lg));
  --recommended-content-width:min(var(--current-breakpoint), var(--breakpoint-md));
}
@media only screen and (min-width: 640px){
  :root{
    --current-breakpoint:var(--breakpoint-sm);
  }
}
@media only screen and (min-width: 768px){
  :root{
    --current-breakpoint:var(--breakpoint-md);
  }
}
@media only screen and (min-width: 1024px){
  :root{
    --current-breakpoint:var(--breakpoint-lg);
  }
}
@media only screen and (min-width: 1280px){
  :root{
    --current-breakpoint:var(--breakpoint-xl);
  }
}
@media only screen and (min-width: 1600px){
  :root{
    --current-breakpoint:var(--breakpoint-2xl);
  }
}
@layer base{
  html{
    background-color:var(--color-primary-0);
    overflow-y:auto;
    font-size:var(--font-size);
  }

  html,
  body{
    line-height:1.5;
    min-height:100vh;
    font-family:var(--font-sans);
    max-width:100vw;
    overflow-x:hidden;
  }

  @media print{
    html{
      --font-size:10px;
      background:none;
    }

    header{
      display:none;
    }
  }

  h1{
    font-size:var(--text-4xl);
    font-weight:bold;
  }

  h2{
    font-size:var(--text-3xl);
    font-weight:bold;
  }

  h3{
    font-size:var(--text-2xl);
    font-weight:bold;
  }

  h4{
    font-size:var(--text-xl);
    font-weight:bold;
  }

  h5{
    font-size:var(--text-lg);
    font-weight:bold;
  }

  h6{
    font-size:var(--text-lg);
    font-weight:var(--font-weight-normal);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6{
    color:var(--color-primary-700);
    text-wrap:balance;
  }

  ul{
    list-style-type:disc;
  }

  ol{
    list-style-type:decimal;
  }

  li{
    padding-left:calc(2 * var(--spacing));

    > p{
      margin-top:calc(2 * var(--spacing));
      margin-bottom:calc(2 * var(--spacing));
    }
  }

  a{
    color:var(--color-primary-600);
    text-decoration:underline;
    text-decoration-thickness:2px;

    &:hover{
      color:var(--color-primary-500);
    }

    .link-icon{
      display:inline-flex;
      padding-left:0.2em;
      justify-content:center;
      align-items:center;
    }
  }

  @page{
    size:letter;
    margin-top:calc(8 * var(--spacing));
    margin-left:0;
    margin-right:0;
    margin-bottom:calc(8 * var(--spacing));
  }

  code.inline{
    background-color:var(--color-primary-50);
    border-radius:var(--radius-lg);
    padding:calc(0.5 * var(--spacing)) calc(1 * var(--spacing));
  }

  a > code.inline{
    background-color:unset;
    border-radius:unset;
  }
  .mermaid-diagram{
    width:100%;
    height:100%;
    overflow:hidden;
    font-size:18px;
    font-family:"Source Code Pro", "Menlo", "Monaco", "Consolas", "monospace";

    > svg{
      max-width:unset !important;
      width:100% !important;
      height:100% !important;
    }
    div.labelBkg span.edgeLabel p{
      display:inline;
      background:#ffffff;
    }
  }
}
@layer components{
  img{
    &.full{
      width:100%;
      height:100%;
    }

    &.contain{
      object-fit:contain;
    }

    &.cover{
      object-fit:cover;
    }
  }

  ul.no-bullets,
  ol.no-bullets{
    list-style-type:none;
  }

  .centered-content{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
  }

  .hidden{
    display:none;
  }

  .invisible{
    visibility:hidden;
  }

  .no-print{
    @media print{
      display:none;
    }
  }

  .readable-metadata{
    width:fit-content;
    color:var(--color-primary-700);

    @media (prefers-contrast: more){
      color:var(--color-primary-800);
    }

    & > div{
      display:flex;
      align-items:center;
      gap:var(--spacing);
    }
  }
}
@layer utilities{
  .text-3xs{
    font-size:var(--text-3xs);
  }

  .text-2xs{
    font-size:var(--text-2xs);
  }

  .text-xs{
    font-size:var(--text-xs);
  }

  .text-sm{
    font-size:var(--text-sm);
  }

  .text-base{
    font-size:var(--text-base);
  }

  .text-lg{
    font-size:var(--text-lg);
  }

  .text-xl{
    font-size:var(--text-xl);
  }

  .text-2xl{
    font-size:var(--text-2xl);
  }

  .text-3xl{
    font-size:var(--text-3xl);
  }

  .text-4xl{
    font-size:var(--text-4xl);
  }

  .text-5xl{
    font-size:var(--text-5xl);
  }

  .text-6xl{
    font-size:var(--text-6xl);
  }

  .text-7xl{
    font-size:var(--text-7xl);
  }

  .text-8xl{
    font-size:var(--text-8xl);
  }

  .text-9xl{
    font-size:var(--text-9xl);
  }
}