html, body {
  width: 100vw;
  max-width: 100vw;
}

#page {
  width: 100%;
  max-width: 80rem;
  margin: auto;
  --nav-width: 13em;
  @media (min-width: 64rem) {
    --nav-width: 10em;
    padding: var(--dashi-space-l);
    gap: var(--dashi-space-l);
  }
  > header {
      @media (max-width: calc(64rem - 1px)) {
        padding: var(--dashi-space-s) var(--dashi-space-m);
      }
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      img {
        --logo-width: 2em;
        @media (min-width: 64rem) {
          --logo-width: 4em;
        }
        width: var(--logo-width);
        height: 4em;
        object-fit: contain;
        margin: 0 var(--dashi-space-s);
        @media (min-width: 64rem) {
            margin: 0 calc(var(--nav-width) + var(--dashi-space-l) - var(--logo-width)) 0 0;
        }
      }
      h1 {
          flex: 1;
          @media (max-width: calc(64rem - 1px)) {
            font-size: var(--dashi-font-size-l);
          }
      }
      select {
          width: auto;
      }
  }

  > nav {
    width: var(--nav-width);
    @media (max-width: calc(64rem - 1px)) {
      height: 100%;
      background: #000;
      z-index: 1;
      padding: var(--dashi-space-m);
      background-color: light-dark(oklch(0.98 0.004 256), oklch(0.3 0.011 264));
      box-shadow: 0 8px 9pt #1e1f2126,0 0 1px #1e1f214f;
      &:has(> [hidden]) {
        display: none;
      }
    }
    ul, li {
      display: flex;
      flex-direction: column;
      gap: var(--dashi-space-xs);
      list-style-type: none;
      width: 100%;
    }
    ul {
      ul {
        margin-left: var(--dashi-space-s);
      }
      li {
        font-weight: 500;
        &:has(ul) {
          margin-top: var(--dashi-space-xs);
        }
        a {
          display: block;
          width: 100%;
        }
        &:not([aria-current]) a {
          color: var(--dashi-text-subtle);
        }
        &[aria-current] a {
          color: inherit;
          font-weight: 700;
        }
      }
    }
  }

  > main {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
}

@media (min-width: 64rem) {
#nav-toggle {
  display: none;
}
#page > nav [hidden] {
  display: initial;
}
}

.grid {
  display: grid;
  gap: var(--dashi-space-xs);
}

#components-avatar .grid {
  grid-template-columns: repeat(3, auto);
}

#components-button .grid {
  grid-template-columns: repeat(2, min-content);
  max-width: 100%;
  overflow: auto;
  padding: var(--dashi-outline-width);
}

#components-icon .grid {
  grid-template-columns: repeat(auto-fill, minmax(1.5em, 1fr));
  grid-template-rows: masonry;
}

#components-plot .controls {
  display: flex;
  margin-top: var(--dashi-space-s);

  @media (max-width: calc(32rem - 1px)) {
    flex-direction: column;
    gap: var(--dashi-space-s);
  }
  @media (min-width: 32rem) {
    flex-direction: row;
    gap: var(--dashi-space-m);
  }

  div {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: var(--dashi-space-s);
  }
  input[type=range] {
    flex: 1;
  }
}

section {
  display: flex;
  flex-direction: column;
  gap: var(--dashi-space-s);
  background-color: light-dark(oklch(0.98 0.004 256), oklch(0.17 0.011 264));
  padding: var(--dashi-space-l);
  border-radius: var(--dashi-radius-m);
}

main div:has(> canvas) {
  max-width: 100%;
  overflow: auto;
}

form, .section.message {
  max-width: 50em;
}

section h3 {
  margin-top: var(--dashi-space-s);
}