body {
    font-family: var(--kendo-font-family);
    margin: 0;
    padding: 0;
    background: var(--kendo-color-app-surface);
    color: var(--kendo-color-on-base);
  }

  header,
  main {
    width: min(100vw - 2rem, 800px);
    margin-inline: auto;
  }

  .icon {
    --icon: url(svg/form/visibility.svg);
    text-decoration: none;
    border: 1px solid var(--kendo-color-border-alt);
    border-radius: .25em;
    height: 1.25rem;
    width: 1.25rem;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--kendo-color-app-surface);

    &:hover {
      border-color: var(--kendo-color-primary-hover);
      background: var(--kendo-color-base-hover);
    }

    &::before {
      content: var(--icon);
      transform: scale(.7) translateY(.05em);
    }

    &.-view {
      --icon: url(svg/form/visibility.svg);
    }

    &.-download {
      --icon: url(svg/content/save_alt.svg);
    }

    &.-link {
      --icon: url(svg/content/link.svg);
    }

    &.-copied {
      --icon: url(svg/alert/done.svg);
    }
  }

  a {
    color: var(--kendo-color-primary);
    text-decoration: underline;
    text-underline-offset: .25em;
    text-decoration-color: var(--kendo-color-on-app-surface);

    &:hover {
      color: var(--kendo-color-primary-hover);
      text-decoration-color: currentcolor;
    }
  }
  em {
    font-weight: 600;
    font-style: normal;
  }

  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;

    &::before {
      content: '';
      width: 100vw;
      position: absolute;
      left: 0;
      top: 80px;
      height: 1px;
      background: var(--kendo-color-border);
    }

    img {
      width: 80px;
      display: block;
      border: none;
      outline: none;
    }

    h1 {
      margin: 0;
      font-size: clamp(28px, 4vw, 48px);
    }
  }

  ul {
    list-style: none;
    padding-left: 0;

    &:not(:last-of-type) {
      border-bottom: 1px solid var(--kendo-color-border-alt);
      padding-bottom: 1rem;
    }
  }

  li {
    padding-block: .5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;

    &.divider {
      background: var(--studs-studs-border);
      padding: 0;
      height: 1px;
      margin-block: 1rem;
    }

    &.depricated {
      & i {
        color: #c11;
        font-style: normal;
      }
    }
  }


  .legend ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1rem;
    background: rgba(0,0,0,.05);
    padding-inline: 1rem;
  }
  @media (max-width: 600px) {
    .legend ul {
      flex-direction: column;
    }
  }

  #versions,
  #versions25 {
    & li:nth-child(2) {
      /* border-bottom: 1px solid var(--kendo-color-border-alt); */
      margin-bottom: 1.5rem;
    }

  }