a.home {
  text-decoration: none;
  color: hsl(var(--accent-hue) var(--accent-saturation) var(--foreground-lightness));

}

.anchors-row {
  display: flex;
  gap: var(--scale-6);
  margin-block: var(--scale-6);

  &:first-child {
    margin-block-start: 0
  }

  &:last-child {
    margin-block-end: 0
  }
}

.spacing-row {
  display: flex;
  margin-block: var(--scale-4);
}

.spacing-label {
  padding: var(--scale-4) var(--scale-5);
  width: 8rem;
  text-align: end;
}

.spacing-box {
  background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-2));
  border: thin solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-4));
  display: inline-block;
  height: var(--scale-5);
}

.buttons-row {
  display: flex;
  gap: var(--scale-6);
  margin-block: var(--scale-6);

  &:first-child {
    margin-block-start: 0
  }

  &:last-child {
    margin-block-end: 0
  }
}

.color-grid {
  display: inline-grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-auto-rows: calc(var(--scale-13) / 12 - var(--scale-3));
  gap: var(--scale-3);
  width: 100%;
  margin-block: var(--scale-4) var(--scale-7);
}

.color-grid+.color-grid {
  margin-block-start: var(--scale-7)
}

.color-grid-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-sample {
  background: hsl(var(--hue) var(--saturation) var(--lightness));
  border: none;
  display: block;
  border-radius: var(--scale-2);
}

#color-range,
#saturation-range {
  width: 100%;
}

label:has(#saturation-range, #color-range) {
  position: relative;

  &::after {
    content: attr(data-value);
    display: block;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
  }
}

#color-range {
  background: linear-gradient(to right,
      hsl(0 var(--accent-saturation) 50%),
      hsl(20 var(--accent-saturation) 50%),
      hsl(30 var(--accent-saturation) 50%),
      hsl(40 var(--accent-saturation) 50%),
      hsl(50 var(--accent-saturation) 50%),
      hsl(60 var(--accent-saturation) 50%),
      hsl(70 var(--accent-saturation) 50%),
      hsl(80 var(--accent-saturation) 50%),
      hsl(90 var(--accent-saturation) 50%),
      hsl(100 var(--accent-saturation) 50%),
      hsl(110 var(--accent-saturation) 50%),
      hsl(120 var(--accent-saturation) 50%),
      hsl(130 var(--accent-saturation) 50%),
      hsl(140 var(--accent-saturation) 50%),
      hsl(150 var(--accent-saturation) 50%),
      hsl(160 var(--accent-saturation) 50%),
      hsl(170 var(--accent-saturation) 50%),
      hsl(180 var(--accent-saturation) 50%),
      hsl(190 var(--accent-saturation) 50%),
      hsl(200 var(--accent-saturation) 50%),
      hsl(210 var(--accent-saturation) 50%),
      hsl(220 var(--accent-saturation) 50%),
      hsl(230 var(--accent-saturation) 50%),
      hsl(240 var(--accent-saturation) 50%),
      hsl(250 var(--accent-saturation) 50%),
      hsl(260 var(--accent-saturation) 50%),
      hsl(270 var(--accent-saturation) 50%),
      hsl(280 var(--accent-saturation) 50%),
      hsl(290 var(--accent-saturation) 50%),
      hsl(300 var(--accent-saturation) 50%),
      hsl(310 var(--accent-saturation) 50%),
      hsl(320 var(--accent-saturation) 50%),
      hsl(330 var(--accent-saturation) 50%),
      hsl(340 var(--accent-saturation) 50%),
      hsl(350 var(--accent-saturation) 50%),
      hsl(360 var(--accent-saturation) 50%));
}

.example {
  margin-block: var(--scale-7);

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

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

.example .card>section {
  overflow-x: auto;
}

.example .card+.accordion {
  margin-block-start: var(--scale-3);
}

.example .card:has(+.accordion) {
  margin-block-end: var(--scale-3);
}

.example .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  gap: var(--scale-4);
  justify-items: center;
  align-items: center;
}

.example .grid.stretch {
  justify-items: stretch;
}

.example .rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--scale-4);
  justify-items: stretch;
}

.example .rows:has(.grid) {
  gap: var(--scale-5);
}

details.source pre {
  padding: var(--scale-2) var(--scale-3);
  margin: 0;
  overflow-x: auto;
  scrollbar-color: hsl(var(--neutral-hue) var(--neutral-saturation) 70% / 50%) transparent;
  scrollbar-width: thin;

  &:focus-within {
    scrollbar-color: hsl(var(--neutral-hue) var(--neutral-saturation) 100% / 70%) transparent;
  }

  &>code {
    transition: scrollbar-color 0.2s ease-in-out;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow-x: visible;

  }
}

@media (max-width: 600px) {
  .example .grid:not(.small) {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
}

@media (max-width: 1200px) {
  .color-grid {
    gap: 0;
  }

  .color-sample {
    border-radius: 0;
  }
}

.page-layout {
  --layout-header-height: var(--scale-8);

  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr var(--scale-11) var(--scale-13) var(--scale-11) 1fr;
  grid-template-areas: "navbar navbar navbar navbar navbar"
    "start menu header toc end"
    "start menu body toc end";
  gap: 0 var(--scale-8);
  min-height: 100%;

  & .menu-toggle {
    display: none;
  }

  &>header {
    view-transition-name: header;
    grid-area: navbar;
    height: var(--layout-header-height);
    position: sticky;
    top: 0;
    container-type: scroll-state;
    z-index: 2;
    backdrop-filter: blur(var(--scale-4));
    transition: background-color 0.25s ease-in-out;
    background-color: hsl(from hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness)) h s l / 85%);

    &>nav {
      view-transition-name: header-nav;
      display: flex;
      align-items: center;
      padding-inline: var(--scale-7);
      column-gap: var(--scale-5);
      height: 100%;

      transition: box-shadow 0.25s ease-in-out;

      @container scroll-state(stuck: top) {
        box-shadow: 0 var(--scale-1) var(--scale-5) hsl(from var(--shadow-color) h s l / 0.3);
      }

      @supports not (container-type: scroll-state) {
        box-shadow: 0 var(--scale-1) var(--scale-5) hsl(from var(--shadow-color) h s l / 0.2);
      }

    }
  }

  &>aside.menu {
    grid-area: menu;
  }

  &>aside.toc {
    grid-area: toc;
  }

  &>aside.menu,
  &>aside.toc {
    padding: 0;

    &>nav {
      margin-block-start: var(--scale-7);
      padding-block: var(--scale-4);
      position: sticky;
      --layout-sticky-start: calc(var(--layout-header-height));
      top: var(--layout-sticky-start);
      max-height: calc(100vh - var(--layout-sticky-start));
      overflow-y: auto;
    }
  }

  &>hgroup {
    grid-area: header;
    margin-block-start: var(--scale-6);
  }

  &>[role=document] {
    &>[id] {
      scroll-margin-block-start: calc(var(--scale-5) + var(--layout-header-height));
    }

    grid-area: body;
    margin-block-end: var(--scale-7);
  }
}

@media (max-width: 1600px) {
  html {
    font-size: 15px;
  }

}

@media (max-width: 1500px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 1400px) {
  html {
    font-size: 13px;
  }
}

@media (max-width: 1300px) {
  html {
    font-size: 13px;
  }

  .page-layout {
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: 1fr var(--scale-11) var(--scale-13) 3fr;
    grid-template-areas: "navbar navbar navbar navbar"
      "start menu header end"
      "start menu toc end"
      "start menu body end";

    gap: 0 var(--scale-6);

    &>aside.toc {
      &>nav {
        padding: 0;
        margin-block: var(--scale-6);
      }
    }
  }
}

@media (max-width: 950px) {
  html {
    font-size: 14px;
  }

  .page-layout {
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-columns: var(--scale-6) minmax(90vw, 1fr) var(--scale-6);
    grid-template-areas: "navbar navbar navbar"
      "start header end"
      "start toc end"
      "start body end";

    gap: 0 var(--scale-6);

    &>aside.menu {
      display: none;
      padding: var(--scale-6) var(--scale-7);
      background: linear-gradient(225deg,
          hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-1)),
          hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-0)) 50%);
      overflow-y: auto;
    }

    &>aside.menu>nav,
    &>aside.toc>nav {
      overflow: visible;
      position: static;
      max-height: max-content;
    }

    &:has(>aside.menu) .menu-toggle {
      display: inline-block;
    }

    &>[role=document] {
      margin-block-end: 0;
    }
  }

  body.show-menu {
    .page-layout>aside.menu {
      display: block;
      position: fixed;
      z-index: 3;
      inset: 0;
      inset-block-start: var(--scale-8);
      border-start-end-radius: var(--scale-5);
      border-start-start-radius: var(--scale-5);
      border: var(--border-width) solid hsl(var(--accent-hue) 0% var(--lightness-2));
      border-block-end: none;

      animation: slide-up-and-in-animation 80ms ease-out;
    }

    & header>nav {
      box-shadow: none;
    }
  }

  body.show-menu {
    overflow: hidden;
  }

  html,
  body {
    scrollbar-gutter: initial;
  }
}

@media (max-width: 600px) {

  .page-layout {

    &>header>nav {
      padding-inline: var(--scale-6);
      column-gap: var(--scale-4);
    }

    grid-template-columns: 0 minmax(90vw, 1fr) 0;
  }
}