/* <stdin> */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
img,
picture,
video,
canvas,
svg {
  display: inline-block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
ul,
ol {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}
:root {
  --hlc: light-dark(#ae4dff, #8652ff);
  --background: light-dark(#dedede, #212121);
  --color: light-dark(#121212, #ededed);
  background: var(--background);
  color: var(--color);
  color-scheme: light dark;
  scrollbar-color: var(--hlc) #0000;
}
body {
  display: grid;
  grid-template-columns: min(100%, 100em);
  grid-template-rows: minmax(3rem, min-content) auto auto;
  align-items: start;
  min-height: 100vh;
  font: clamp(.8em, .6em + 1vw, 1.2em) / 1.2 sans-serif;
  &:has(dialog[open]) {
    overflow: hidden;
  }
  & > header {
    margin: 1rem 1rem 0 .5rem;
    display: grid;
    align-items: start;
    grid-auto-flow: column;
    justify-content: space-between;
    gap: .2rem;
    & svg#site-icon {
      height: 30px;
      width: 30px;
      padding: 5px;
      vertical-align: middle;
    }
    & h1 {
      align-self: start;
      font-size: 1.1rem;
      grid-column: 1;
      grid-row: 1;
      margin: 0;
    }
    & search {
      grid-column: 2;
      grid-row: 1;
      margin: 0 .2rem;
      align-self: baseline;
      & input {
        font-size: .9rem;
        min-width: 30ch;
      }
      & ul li {
        list-style: none;
      }
      & dialog {
        display: none;
        border: none;
        overflow: scroll;
        margin: 0 auto;
        padding: 0;
        background: transparent;
        &[open] {
          display: unset;
        }
        &::backdrop {
          --c: lch(from var(--hlc) calc(l - 20) calc(c - 60) h);
          background: lch(from var(--c) l c h / .35);
          backdrop-filter: blur(15px);
        }
        & output {
          display: block;
          min-width: 32ch;
          background: transparent;
          & dl {
            & dd:nth-of-type(odd),
            & dt:nth-of-type(odd) {
              --c: lch(from var(--background) calc(l * 3) c h);
              background: lch(from var(--c) l c h / .65);
            }
            & dd:nth-of-type(even),
            & dt:nth-of-type(even) {
              --c: lch(from var(--background) calc(l * 1.2) c h);
              background: lch(from var(--c) l c h);
            }
            & dt {
              padding: .5rem 1rem 0 1rem;
              font-size: .8rem;
            }
            & dd {
              margin: 0;
              padding: 0 1rem .5rem 1rem;
              & a[href*="#"]::before {
                content: "\a7";
                font-weight: lighter;
                padding-right: .3rem;
                opacity: .5;
              }
            }
          }
        }
      }
    }
    & > nav {
      grid-column: 1/3;
      grid-row: 2;
      & ul li {
        list-style: none;
        display: inline-block;
        font-size: .8rem;
        margin-right: .5rem;
        &::before {
          content: "\bb";
          margin-right: .5rem;
        }
      }
    }
  }
  & > footer {
    margin: 0 .5rem;
    padding-bottom: .5rem;
    & {
      align-self: end;
      font-size: .9rem;
      & li {
        list-style: none;
        display: inline-block;
      }
    }
  }
  & > main {
    display: grid;
    grid-template-areas: "sidebar content";
    margin: .5rem;
    &#not-found {
      align-content: stretch;
      justify-content: center;
      align-items: center;
    }
    & > aside {
      font-size: .9rem;
      grid-area: sidebar;
      padding-right: .8rem;
      & > details {
        display: flex;
        height: 100%;
        margin: 0;
        & > summary {
          outline: currentColor solid 1px;
          border-radius: .3rem;
          padding: 1rem .3rem;
          list-style: none;
          font-size: .8rem;
          writing-mode: sideways-lr;
          text-align: end;
          &::after {
            content: "show sidebar";
          }
          [open] &::after {
            content: "hide sidebar";
          }
          & a {
            text-decoration: none;
            font-weight: bold;
            writing-mode: inherit;
            float: left;
          }
        }
      }
      & a[href*="#"]::after {
        font-size: .9rem;
      }
      & ul {
        margin-inline-start: 1rem;
      }
      & ul li:has(> a)::before {
        content: "\a7";
        padding-right: .3rem;
        font-size: .7rem;
        opacity: .5;
      }
      & ul li {
        margin-block-start: .5rem;
        list-style: none;
        max-width: 22rem;
      }
    }
    & article {
      grid-area: content;
      display: grid;
      grid-template-columns: min(100%, 72em);
      padding-right: 1rem;
      align-content: start;
      & pre {
        word-wrap: break-word;
        overflow: auto;
        font-size: .9rem;
        padding: .6rem;
      }
      & hr {
        width: 100%;
      }
      & h1 {
      }
      & img {
        max-width: 100%;
      }
      & h1 > a,
      & h2 > a,
      & h3 > a,
      & h4 > a,
      & h5 > a,
      & h6 > a {
        opacity: 0;
        margin-left: .3rem;
        text-decoration: none;
      }
      & h1:hover > a,
      & h2:hover > a,
      & h3:hover > a,
      & h4:hover > a,
      & h5:hover > a,
      & h6:hover > a {
        opacity: .5;
      }
      & .alert,
      & .info,
      & .notice,
      & .danger {
        display: flex;
        gap: 1em;
        padding: .5em;
        border: solid 1px var(--c);
        &::before {
          font-size: 1.875em;
        }
      }
      & .danger {
        --c: lch(from var(--hlc) l c calc(h + 80));
        background: lch(from var(--c) l c h/ .15);
        &::before {
          content: "\1f6ab";
          font-size: 1.4em;
        }
      }
      & .info {
        --c: lch(from var(--hlc) l c calc(h - 70));
        background: lch(from var(--c) l c h/ .15);
        &::before {
          content: "\270d";
          transform: rotateY(180deg);
        }
      }
      & .notice {
        --c: lch(from var(--hlc) l c calc(h + 205));
        background: lch(from var(--c) l c h/ .15);
        &::before {
          content: "\1f5d2";
        }
      }
      & .alert {
        --c: lch(from var(--hlc) l c calc(h + 105));
        background: lch(from var(--c) l c h/ .15);
        &::before {
          content: "\26a0\fe0f";
        }
      }
      & p {
        margin-block-start: .4rem;
        margin-block-end: .4rem;
      }
      & ul,
      & ol {
        margin-inline-start: 1rem;
      }
      & h1 a[href*="#"]::after,
      & h2 a[href*="#"]::after,
      & h3 a[href*="#"]::after,
      & h4 a[href*="#"]::after,
      & h5 a[href*="#"]::after,
      & h6 a[href*="#"]::after {
        content: "\a7";
        font-weight: lighter;
        padding-left: .2rem;
      }
    }
    & ul.tags {
      display: inline-block;
      justify-self: end;
      grid-area: content;
      margin-right: 1rem;
      & li {
        --c: lch(from var(--hlc) l c calc(h - 70));
        background: lch(from var(--c) l c h/ .15);
        border: solid 1px var(--c);
        font-size: .8rem;
        padding: .2em;
        display: inline-block;
        margin-left: .8rem;
      }
    }
  }
}
@media (max-width: 648px) {
  body {
    & > header {
      & search {
        grid-column: 1;
        grid-row: 3;
      }
    }
    & > main {
      display: flex;
      flex-direction: column;
      & > aside {
        & > details {
          display: unset;
          & > summary {
            writing-mode: revert;
            padding: .3rem;
            &::after {
              content: unset;
            }
            &::before {
              content: "show menu";
            }
            [open] &::after {
              content: unset;
            }
            [open] &::before {
              content: "hide menu";
            }
            [open] &::after {
              content: unset;
            }
          }
        }
      }
    }
  }
}
@media (scripting: enabled) {
  body {
    & > header {
      & search {
        display: unset;
      }
    }
  }
}