@layer reset, settings, defaults, overrides;

@keyframes slide-up-and-in-animation {
  0% {
    transform: translateY(1rem);
    opacity: 0.5;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-down-and-in-animation {
  0% {
    transform: translateY(-1rem);
    opacity: 0.5;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@view-transition {
  navigation: auto;
}

@layer reset {
  html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  small {
    font-size: smaller;
  }

  fieldset {
    padding: 0;
    margin: 0;
    border: none;
  }

  * {
    box-sizing: border-box;
  }
}

@layer settings {

  :root {
    --phi: 1.6185;
    --base: 1rem;
    --scale-0: calc(var(--base) * pow(var(--phi), -5));
    --scale-1: calc(var(--base) * pow(var(--phi), -4));
    --scale-2: calc(var(--base) * pow(var(--phi), -3));
    --scale-3: calc(var(--base) * pow(var(--phi), -2));
    --scale-4: calc(var(--base) * pow(var(--phi), -1));
    --scale-5: calc(var(--base) * pow(var(--phi), 0));
    --scale-6: calc(var(--base) * pow(var(--phi), 1));
    --scale-7: calc(var(--base) * pow(var(--phi), 2));
    --scale-8: calc(var(--base) * pow(var(--phi), 3));
    --scale-9: calc(var(--base) * pow(var(--phi), 4));
    --scale-10: calc(var(--base) * pow(var(--phi), 5));
    --scale-11: calc(var(--base) * pow(var(--phi), 6));
    --scale-12: calc(var(--base) * pow(var(--phi), 7));
    --scale-13: calc(var(--base) * pow(var(--phi), 8));

    --font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
    --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-family: var(--font-family-sans-serif);
    --font-weight: 500;
    --line-height: var(--phi);
    --font-size: var(--base);

    --heading-step: 0.36;
    --heading-font-weight: 500;

    --border-width: calc(round(nearest, var(--scale-0), 1px));
    --focus-outline-width: calc(4*var(--border-width));
    --focus-outline-offset: 0;

    --form-element-height: calc(var(--scale-6) + 2 * var(--scale-3) + 2 * var(--border-width));

    --lightness-0: 100.0%;
    --lightness-1: 96.8%;
    --lightness-2: 90.5%;
    --lightness-3: 82.5%;
    --lightness-4: 74.2%;
    --lightness-5: 65.8%;
    --lightness-6: 57.5%;
    --lightness-7: 49.2%;
    --lightness-8: 40.8%;
    --lightness-9: 32.5%;
    --lightness-10: 23.8%;
    --lightness-11: 13.5%;
    --lightness-12: 0.0%;

    --accent-hue: 210;
    --accent-saturation: 70%;

    --neutral-hue: 0;
    --neutral-saturation: 0%;

    --error-hue: 0;
    --error-saturation: 60%;

    --success-hue: 160;
    --success-saturation: 30%;

    --foreground-lightness: var(--lightness-12);
    --background-lightness: var(--lightness-0);
    --focus-lightness: var(--lightness-3);
    --shadow-color: hsl(var(--neutral-hue) 0 50%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --accent-saturation: 80%;
      --neutral-hue: 200;
      --neutral-saturation: 40%;

      --lightness-0: 4.00%;
      --lightness-1: 10.89%;
      --lightness-2: 16.34%;
      --lightness-3: 20.99%;
      --lightness-4: 25.50%;
      --lightness-5: 30.00%;
      --lightness-6: 34.50%;
      --lightness-7: 39.00%;
      --lightness-8: 43.50%;
      --lightness-9: 47.99%;
      --lightness-10: 52.34%;
      --lightness-11: 55.89%;
      --lightness-12: 58.00%;

      --foreground-lightness: 100%;
      --background-lightness: 7%;
      --focus-lightness: var(--lightness-12);
      --shadow-color: hsl(var(--neutral-hue) 0 0%);
      --focus-outline-width: calc(2*var(--border-width));
      --focus-outline-offset: calc(2*var(--border-width));
    }
  }
}

@layer defaults {
  body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
    box-sizing: border-box;
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));
  }

  h1 {
    --font-size: calc(var(--base) * pow(var(--phi), var(--heading-step) * 6));
  }

  h2 {
    --font-size: calc(var(--base) * pow(var(--phi), var(--heading-step) * 5));
  }

  h3 {
    --font-size: calc(var(--base) * pow(var(--phi), var(--heading-step) * 4));
  }

  h4 {
    --font-size: calc(var(--base) * pow(var(--phi), var(--heading-step) * 3));
  }

  h5 {
    --font-size: calc(var(--base) * pow(var(--phi), var(--heading-step) * 2));
  }

  h6 {
    --font-size: calc(var(--base) * pow(var(--phi), var(--heading-step) * 1));
  }

  hgroup {
    &>p {
      color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-9));
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    --font-weight: var(--heading-font-weight);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  address,
  blockquote,
  dl,
  ol,
  p,
  pre,
  table,
  fieldset legend,
  ul {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
    margin-block: var(--scale-4);

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

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

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;

    &+p {
      margin-block-start: var(--scale-2);
    }
  }

  hr {
    height: 0;
    border: none;
    border-block-start: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
    background: none;
    margin-block: var(--scale-5);
  }

  a {
    color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
    transition: color 0.25s ease-in-out, outline-color 0.1s ease-in-out;
    outline: none;
    text-decoration: none;

    &:focus-visible {
      text-decoration: underline;
    }

    &:hover,
    &:active {
      color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
      text-decoration: underline;
    }

    &[aria-current="page"] {
      color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));

      &:hover,
      &:active {
        color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-12));
      }
    }
  }

  abbr {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
  }

  mark {
    background: hsl(50 100% var(--lightness-5));
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
  }

  ins {
    color: hsl(var(--success-hue) var(--success-saturation) var(--lightness-9));
    text-decoration: none;
  }

  del {
    color: hsl(var(--error-hue) var(--error-saturation) var(--lightness-9));
    text-decoration: Strikethrough;
  }

  samp {
    font-weight: bold;
    font-family: monospace;
  }

  code,
  kbd {
    display: inline-block;
    border-radius: var(--scale-2);
    padding: 0 var(--scale-3);
    font-size: calc(var(--scale-5) - 2 * var(--border-width));
  }

  code {
    background: light-dark(hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-2)),
        hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4)));
    font-family: monospace;
  }

  kbd {
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-11));
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-0));
    font-weight: bold;
    font-family: monospace;
  }

  pre>code {
    display: block;
    outline: none;
    padding: var(--scale-5) var(--scale-6);
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-1));
    border: var(--border-width) solid hsl(var(--accent-hue) 0% var(--lightness-4));
    border-radius: var(--scale-3);
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    font-weight: normal;
    text-align: start;
    padding: var(--scale-4) var(--scale-5);
  }

  :is(thead, tfoot) :is(th, td) {
    font-weight: bold;
  }

  tr {
    border-block-end: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
  }

  tbody>tr:last-child {
    border-block-end: none;
  }

  thead {
    border-block-end: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-5));

    &>tr:last-child {
      border-block-end: none;
    }
  }

  tfoot {
    border-block-start: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-5));

    &>tr:last-child {
      border-block-end: none;
    }
  }

  table.striped tbody tr:nth-child(odd) {
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-1));
  }

  blockquote {
    border-inline-start: var(--scale-2) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-3));
    margin: var(--scale-5) 0;
    padding: var(--scale-5) var(--scale-6);

    &>footer {
      margin-block-start: var(--scale-4);
    }
  }

  ul,
  ol {
    margin-inline-start: var(--scale-6);

    & :is(ul, ol) {
      margin-inline: 0;
    }

    padding-inline-start: var(--scale-5);

    li {
      padding-inline-start: var(--scale-2);
    }
  }

  dl {
    display: grid;
    grid-gap: var(--scale-2) var(--scale-6);
    grid-template-columns: max-content;
    margin-block: var(--scale-5);
    margin-inline-start: var(--scale-6);
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin: 0;
    grid-column-start: 2;
  }

  button,
  input[type=submit],
  input[type=reset],
  input[type=button] {
    font-size: inherit;

    &.solid,
    &.outline,
    &.ghost {
      cursor: pointer;
      padding: 0 var(--scale-5);
      height: var(--form-element-height);
      user-select: none;
      border-radius: var(--scale-3);
      outline: var(--focus-outline-width) solid transparent;
      transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out, color 0.25s ease-in-out, outline-color 0.2s ease-in-out;
      display: flex;
      align-items: center;
      column-gap: var(--scale-4);
      justify-content: center;
      white-space: nowrap;
      outline-offset: var(--focus-outline-offset);

      & * {
        pointer-events: none;
      }

      &:focus-visible {
        outline: var(--focus-outline-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--focus-lightness));
      }
    }

    &.icon {
      width: var(--button-height);
      padding: var(--scale-4);
    }

    &.solid {
      color: light-dark(hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness)),
          hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness)));
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));

      &:focus,
      &:hover {
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
        border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
      }

      &:active {
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
        border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-11));
      }

      &:disabled {
        background: hsl(var(--accent-hue) 0% var(--lightness-3));
        border: var(--border-width) solid hsl(var(--accent-hue) 0% var(--lightness-3));
        color: hsl(var(--accent-hue) 0% var(--lightness-8));
        cursor: default;
      }
    }

    &.outline {
      color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
      background: transparent;
      border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));

      &:hover {
        color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 10%);
      }

      &:active {
        color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-11));
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 20%);
      }

      &:disabled {
        background: hsl(var(--accent-hue) 0% var(--lightness-1));
        border: var(--border-width) solid hsl(var(--accent-hue) 0% var(--lightness-4));
        color: hsl(var(--accent-hue) 0% var(--lightness-7));
        cursor: default;
      }
    }


    &.ghost {
      color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
      background: transparent;
      border: transparent;

      &:hover {
        color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 10%);
      }

      &:active {
        color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-11));
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 20%);
      }

      &:disabled {
        background: hsl(var(--accent-hue) 0% var(--lightness-1));
        border: none;
        color: hsl(var(--accent-hue) 0% var(--lightness-7));
        cursor: default;
      }
    }
  }

  input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=submit], [type=reset], [type=image]),
  textarea,
  select {
    accent-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
    font-size: inherit;
    width: 100%;
    height: var(--form-element-height);
    transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out, color 0.25s ease-in-out, outline-color 0.2s ease-in-out;
    padding: 0 var(--scale-5);
    border-radius: var(--scale-3);
    border: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));
    outline: var(--focus-outline-width) solid transparent;
    background: transparent;
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));

    &::placeholder {
      color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
    }

    &:hover {
      border-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
    }

    &:active,
    &:focus,
    &:focus-within {
      border-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      outline: var(--focus-outline-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--focus-lightness));
    }

    &:disabled {
      background: hsl(var(--accent-hue) 0% var(--lightness-1));
      border-color: hsl(var(--accent-hue) 0% var(--lightness-4));
      color: hsl(var(--accent-hue) 0% var(--lightness-7));
      outline: none;

      &::placeholder {
        color: hsl(var(--accent-hue) 0% var(--lightness-7));
      }
    }

    &:read-only {
      background: hsl(var(--accent-hue) 0% var(--lightness-1));
      border-color: hsl(var(--accent-hue) 0% var(--lightness-4));
      outline: none;
    }

    &[aria-invalid=true] {
      border-color: hsl(var(--error-hue) var(--error-saturation) var(--lightness-8));

      &:active,
      &:focus {
        outline-color: hsl(var(--error-hue) var(--error-saturation) var(--lightness-5) / 70%);
      }

      &+small {
        color: hsl(var(--error-hue) var(--error-saturation) var(--lightness-8));
      }
    }

    &[aria-invalid=false] {
      border-color: hsl(var(--success-hue) var(--success-saturation) var(--lightness-8));

      &:active,
      &:focus {
        outline-color: hsl(var(--success-hue) var(--success-saturation) var(--lightness-5) / 70%);
      }

      &+small {
        color: hsl(var(--success-hue) var(--success-saturation) var(--lightness-8));
      }
    }

    &+small {
      display: block;
      color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
      margin-block-start: var(--scale-2);
    }

    &:is(textarea) {
      height: auto;
      padding: var(--scale-4) var(--scale-5);
      min-height: calc(3.5rem*var(--line-height));
      display: block;
      resize: vertical;
    }
  }

  input[type=range] {
    --track-size: var(--scale-3);
    --thumb-size: calc(3* var(--scale-3));

    font-size: var(--font-size);
    appearance: none;
    height: var(--track-size);
    width: 100%;
    border-radius: calc(var(--track-size) / 2);
    background: hsl(var(--neutral-hue) 0% var(--lightness-3));

    &:focus {
      outline: none;
    }

    &::-webkit-slider-runnable-track {
      appearance: none;
    }

    &::-webkit-slider-thumb {
      height: var(--thumb-size);
      width: var(--thumb-size);
      border-radius: 50%;
      appearance: none;
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      border: var(--scale-1) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-0));
      outline: var(--focus-outline-width) solid transparent;
      cursor: grab;
      transition: background 0.1s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, outline 0.2s ease-in-out;
    }

    &:disabled {
      &::-moz-range-thumb {
        cursor: default;
        background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
      }

      &::-webkit-slider-thumb {
        cursor: default;
        background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-5));
      }
    }

    &:not(:disabled)::-webkit-slider-thumb:hover {
      height: calc(var(--thumb-size) * 1.2);
      width: calc(var(--thumb-size) * 1.2);
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
      transition: background 0.1s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out;
    }

    &:not(:disabled)::-webkit-slider-thumb:active {
      height: calc(var(--thumb-size) * 1.2);
      width: calc(var(--thumb-size) * 1.2);
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
      transition: background 0.1s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out;
    }

    &:focus-visible::-webkit-slider-thumb {
      outline: var(--scale-1) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      transition: background 0.1s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, outline 0.2s ease-in-out;
    }

    &::-moz-range-thumb {
      height: var(--thumb-size);
      width: var(--thumb-size);
      border-radius: 50%;
      appearance: none;
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      border: var(--scale-1) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-0));
      outline: var(--scale-1) solid transparent;
      cursor: grab;
      transition: background 0.1s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, outline 0.2s ease-in-out;
    }

    &:not(:disabled)::-moz-range-thumb:hover {
      height: calc(var(--thumb-size) * 1.2);
      width: calc(var(--thumb-size) * 1.2);
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
      transition: background 0.1s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out;
    }

    &:not(:disabled)::-moz-range-thumb:active {
      height: calc(var(--thumb-size) * 1.2);
      width: calc(var(--thumb-size) * 1.2);
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
      transition: background 0.1s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out;
    }

    &:focus-visible::-moz-range-thumb {
      outline: var(--scale-1) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      transition: background 0.1s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, outline 0.2s ease-in-out;
    }

    &+small {
      display: block;
      color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
    }
  }

  @keyframes progress-indeterminate {
    0% {
      background-position-x: 200%;
    }

    100% {
      background-position-x: -200%;
    }
  }

  progress {
    appearance: none;
    width: 100%;
    display: block;
    border: 0;
    height: var(--scale-4);
    margin-block-start: var(--scale-2);
    border-radius: var(--scale-4);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100%;

    --progress-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
    --progress-background-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));

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

    &:indeterminate {
      background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
      animation: progress-indeterminate 2s linear infinite;
    }

    &::-webkit-progress-bar {
      background: none;
    }

    &:indeterminate::-moz-progress-bar {
      background: none;
    }

    &::-webkit-progress-value {
      background-color: var(--progress-color);
      transition: inline-size 0.2s ease-in-out;
    }
  }

  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]) {
    display: flex;
    gap: var(--scale-3);
    align-items: center;
    font-weight: normal;
    user-select: none;
  }


  input:is([type=checkbox], [type=radio])[aria-invalid=true] {
    --accent-hue: var(--error-hue);
    --accent-saturation: var(--error-saturation);

    border-color: hsl(var(--error-hue) var(--error-saturation) var(--lightness-8));
  }

  label:has(input:is([type=checkbox], [type=radio])[aria-invalid=true])+small {
    color: hsl(var(--error-hue) var(--error-saturation) var(--lightness-8));
  }

  input:is([type=checkbox], [type=radio])[aria-invalid=false] {
    --accent-hue: var(--success-hue);
    --accent-saturation: var(--success-saturation);

    border-color: hsl(var(--success-hue) var(--success-saturation) var(--lightness-8));
  }

  label:has(input:is([type=checkbox], [type=radio])[aria-invalid=false])+small {
    color: hsl(var(--success-hue) var(--success-saturation) var(--lightness-9));
  }

  input[type=checkbox],
  input[type=radio] {
    appearance: none;
    accent-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
    margin: 0;
    border-radius: var(--scale-2);
    height: var(--scale-5);
    width: var(--scale-5);
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-0));
    border: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
    outline: var(--focus-outline-width) solid transparent;
    outline-offset: 0;
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out, outline 0.2s ease-in-out;
    font-size: var(--font-size);
    aspect-ratio: 1;

    &:focus-visible {
      border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      outline: var(--focus-outline-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--focus-lightness));
    }

    &:disabled {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));
      border: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));

      &:checked {
        border-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));
      }
    }
  }

  input[type=checkbox][role=switch] {
    padding: var(--scale-0);
    width: calc(2 * var(--scale-4) + var(--scale-5));
    height: calc(2* var(--scale-4));
    border-radius: var(--scale-5);
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-5));
    margin-inline-start: 0;
    transition: background 0.2s ease-in-out, outline 0.2s ease-in-out;
    cursor: pointer;

    &:not([aria-invalid]) {
      border-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-5));
    }

    &::after {
      content: "";
      display: block;
      background: hsl(var(--neutral-hue) var(--neutral-saturation) 100%);
      border-radius: 50%;
      aspect-ratio: 1;
      height: 100%;
      transition: margin 0.1s ease-in-out;
    }

    &:checked {
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      border-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      transition: background 0.2s ease-in-out, outline 0.2s ease-in-out;
    }

    &:checked::after {
      margin-inline-start: var(--base);
      transition: margin 0.1s ease-in-out;
    }

    &:disabled {
      cursor: default;
    }

    &:disabled:not(:checked) {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));
    }

    &:disabled:not(:checked)::after {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-2));
    }

    &:disabled:is(:checked) {
      --disabled-checked-color: hsl(var(--accent-hue) calc(var(--accent-saturation) - 20%) var(--lightness-6));
      background: var(--disabled-checked-color);
      border-color: var(--disabled-checked-color);
    }

    &:disabled:is(:checked)::after {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
    }
  }

  input[type=checkbox]:not([role=switch]) {
    &:is(:indeterminate, :checked):not(:disabled) {
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      position: relative;
      transition: background 0.2s ease-in-out, border 0.2s ease-in-out, outline 0.2s ease-in-out;
    }

    &:disabled:is(:indeterminate, :checked) {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-5));
      border: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-5));
    }

    &:is(:indeterminate, :checked)::before {
      content: "";
      background: hsl(var(--neutral-hue) var(--neutral-saturation) 100%);
      position: absolute;
      height: calc(var(--scale-5) - 2 * var(--border-width));
      width: calc(var(--scale-5) - 2 * var(--border-width));
      display: inline-block;
    }

    &:checked::before {
      mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="%23000" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12l5 5l10 -10"/></svg>');
    }

    &:indeterminate::before {
      mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 12l11 0"/></svg>');
    }
  }

  input[type=radio] {
    border-radius: 50%;

    &:checked {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-0));
      border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
      transition: background 0.2s ease-in-out, border 0.2s ease-in-out, outline 0.2s ease-in-out;
      position: relative;

      &::before {
        --dot-size: calc(var(--scale-5) - 6 * var(--border-width));
        content: "";
        border-radius: 50%;
        box-sizing: border-box;
        position: absolute;
        border: var(--border-width) solid transparent;
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
        height: var(--dot-size);
        width: var(--dot-size);
        display: inline-block;
        margin-block-start: calc(2* var(--border-width));
        margin-inline-start: calc(2*var(--border-width));
      }

      &:disabled::before {
        background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));

        border: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));
      }
    }
  }

  label:hover>input:is([type=checkbox], [type=radio]):not(:checked, :indeterminate, :disabled, [role=switch]) {
    background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-2));
    border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out, outline 0.2s ease-in-out;
  }

  label:hover>input[type=checkbox][role=switch]:not(:checked, :disabled) {
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-6));
    border-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-6));
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
  }

  label:hover>input[type=checkbox][role=switch]:is(:checked):not(:disabled) {
    background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
    border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
  }

  label:hover>input[type=checkbox]:is(:checked, :indeterminate):not(:disabled, [role=switch]) {
    background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
    border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out, outline 0.2s ease-in-out;
  }

  label:hover>input[type=radio]:is(:checked, :indeterminate):not(:disabled) {
    border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
    transition: border 0.2s ease-in-out;

    &::before {
      background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
      transition: background 0.2s ease-in-out;
    }
  }

  input[type=color] {
    appearance: none;
    padding: var(--scale-2) var(--scale-4);
  }

  input[type=file] {
    padding-inline-start: 0;
  }

  input[type=file]::file-selector-button {
    margin-inline-end: var(--scale-5);
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-2));
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
    border: none;
    padding: var(--scale-4) var(--scale-5);
    cursor: pointer;
    user-select: none;
    border-radius: var(--scale-3);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));
    outline: none;
    transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out, color 0.25s ease-in-out, outline-color 0.2s ease-in-out;
    white-space: nowrap;
  }

  label>:is(input, textarea, select) {
    margin-block-start: var(--scale-2);
  }

  label:has(input, textarea, select) {
    display: block;
  }

  label+label,
  small+input,
  small+textarea,
  small+select,
  small+label {
    display: block;
    margin-block-start: var(--scale-4);
  }

  label:has([type=checkbox]:disabled) {
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-8));
  }

  label:has([type=checkbox], [type=radio])+small {
    margin-block-start: 0;
  }

  label:has([type=checkbox]:not([role=switch]))+label:has([type=checkbox]:not([role=switch])),
  label:has([type=checkbox]:not([role=switch]))+small+label:has([type=checkbox]:not([role=switch])),
  label:has([type=radio])+label:has([type=radio]),
  label:has([type=radio])+small+label:has([type=radio]) {
    margin-block-start: 0;
  }

  label+small {
    display: block;
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
    margin-block-start: var(--scale-2);
  }

  form>.actions {
    display: flex;
    margin-block-start: var(--scale-5);
    gap: var(--scale-4);
    justify-content: end;
  }

  select:not([multiple]) {
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
    background-position: center right .75rem;
    background-size: calc(var(--base) * 0.8) auto;
    background-repeat: no-repeat;
  }

  select[multiple] {
    appearance: base-select;
    height: var(--scale-10);
    padding: 0;
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));

    &>option {
      appearance: none;
      padding: var(--scale-4) var(--scale-5);

      &:checked,
      &:checked:hover {
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-2));
      }

      &:hover {
        background: transparent;
      }
    }

    &:focus,
    &:focus-within {
      &>option:checked {
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-2));
      }
    }
  }

  .card {
    margin-block: var(--scale-5);
    border: var(--border-width) solid var(--border-color, hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3)));
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));
    border-radius: var(--scale-3);
    overflow: hidden;


    &.raised {
      box-shadow: var(--scale-3) var(--scale-3) var(--scale-5) 0 hsl(from var(--shadow-color) h s l / 0.1),
        calc(var(--scale-3) * -1) var(--scale-3) var(--scale-5) 0 hsl(from var(--shadow-color) h s l / 0.1);
    }

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

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

    &>header,
    &>footer {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-1));
      padding: var(--scale-5) var(--scale-6);
    }

    &>header {
      border-block-end: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));

      &:not(:first-child) {
        border-block-start: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
      }
    }

    &>section {
      padding: var(--scale-6);
    }

    &>footer {
      border-block-start: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));

      &:not(:last-child) {
        border-block-end: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
      }

      &.actions {
        display: flex;
        gap: var(--scale-4);
        justify-content: end;
      }
    }
  }

  .accordion {
    margin-block: var(--scale-5);
    border: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
    border-radius: var(--scale-3);
    overflow: hidden;

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

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

    --mc-padding-block: var(--padding-block, var(--scale-5));
    --mc-padding-inline: var(--padding-inline, var(--scale-6));

    &>details {
      padding: var(--mc-padding-block) var(--mc-padding-inline);

      &>summary {
        list-style-type: none;
        padding: var(--mc-padding-block) var(--mc-padding-inline);
        margin: calc(-1 * var(--mc-padding-block)) calc(-1 * var(--mc-padding-inline));
        background-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-1));
        color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
        outline: none;
        user-select: none;
        cursor: pointer;
        transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
        position: relative;

        &:focus-visible {
          color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
          background-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-1));
          transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
          outline: none;
        }
      }

      &>summary::after {
        content: "";
        background-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-8));
        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');
        position: absolute;
        display: block;
        inset-inline-end: var(--mc-padding-block);
        inset-block-start: calc(var(--mc-padding-block) + (var(--line-height) * 1em - 16px) /2);
        height: 16px;
        width: 16px;
        transition: transform 0.2s ease-in-out;
      }

      &[open]>summary {
        border-block-end: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
        margin-block-end: var(--mc-padding-block);

        &::after {
          transform: rotate(90deg);
        }
      }
    }

    &>details+details {
      border-block-start: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
    }
  }

  @keyframes backdrop-fade-animation {
    from {
      background: transparent;
    }

    to {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7) / 0.8);
    }
  }

  dialog {
    border: var(--border-width) solid var(--border-color, hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3)));
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));
    border-radius: var(--scale-3);
    box-shadow: var(--scale-3) var(--scale-3) var(--scale-5) 0 hsl(from var(--shadow-color) h s l / 0.4),
      calc(var(--scale-3) * -1) var(--scale-3) var(--scale-5) 0 hsl(from var(--shadow-color) h s l / 0.4);
    padding: 0;
    width: var(--scale-13);
    --close-button-size: calc(var(--scale-6) + var(--scale-3));
    overflow: hidden;

    &[open] {
      display: grid;
      grid-template-rows: auto 1fr auto;
    }

    &.small {
      width: var(--scale-12);
    }

    animation: slide-down-and-in-animation 100ms ease-out;

    &>header {
      position: relative;

      border-block-end: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
      line-height: var(--close-button-size);
    }

    &>section {
      overflow: auto;
    }

    &>header>button[command=close],
    &>header>button[rel=prev] {
      position: absolute;
      inset-block-start: var(--scale-5);
      inset-inline-end: var(--scale-5);
      border: none;
      border-radius: 50%;
      display: block;
      height: var(--close-button-size);
      width: var(--close-button-size);
      background-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-0));
      cursor: pointer;

      &::after {
        content: "";
        background-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>');
        background-position: center center;
        background-repeat: no-repeat;
        position: absolute;
        display: block;
        inset-inline-start: calc(var(--close-button-size)/2 - 16px/2);
        inset-block-start: calc(var(--close-button-size)/2 - 16px/2);
        height: 16px;
        width: 16px;
      }

      &:focus-visible {
        outline: var(--focus-outline-width) solid var(--force-color);
      }

      &:hover {
        background-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 10%);

        &::after {
          background-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
        }
      }

      &:active {
        background-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 20%);

        &::after {
          background-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
        }
      }
    }

    &>header,
    &>footer,
    &>section {
      padding: var(--scale-5) var(--scale-6);
    }

    &>footer.actions {
      display: flex;
      gap: var(--scale-4);
      justify-content: end;
    }

    &::backdrop {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7) / 0.8);
      animation: backdrop-fade-animation 100ms ease-in-out;
    }
  }

  body:has(dialog[open]) {
    overflow: hidden;
  }

  nav.navlist {
    &>details {
      margin-block-end: var(--scale-4);
      user-select: none;

      &>summary {
        list-style-type: none;
        cursor: pointer;
        outline: none;

        &:focus-visible {
          text-decoration: underline;
        }
      }

      &>ul {
        margin: var(--scale-4) 0;
        padding: 0;

        &>li {
          margin: 0;
          padding: var(--scale-1) var(--scale-5);
          list-style-type: none;
          border-inline-start: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));

          &:focus-within,
          &:hover {
            border-inline-start: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
          }

          &:has([aria-current="page"]) {
            border-inline-start: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
          }
        }
      }
    }
  }
}