/*! @dume/ds, my design system, the whole of it: for my projects' needs while in version 0 */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@font-face {
  font-display: swap;
  font-family: Bricolage Grotesque;
  font-style: normal;
  font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: Bricolage Grotesque;
  font-style: normal;
  font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: Instrument Sans;
  font-style: normal;
  font-weight: 400 700;
  src: url("fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: Instrument Sans;
  font-style: normal;
  font-weight: 400 700;
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer ds.normalize {
  *, :before, :after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    line-height: 1.15;
  }

  body {
    margin: 0;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    border-color: currentColor;
  }

  button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
  }

  button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
  }

  legend {
    padding: 0;
  }

  progress {
    vertical-align: baseline;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  summary {
    display: list-item;
  }
}

@layer ds.base {
  :root {
    accent-color: var(--ds-b-color-primary);
    background-color: var(--ds-b-color-background);
    color: var(--ds-b-color-text);
    font-family: var(--ds-b-font-family);
    scrollbar-gutter: stable;
    line-height: 1.6;
  }

  @view-transition {
    navigation: auto;
  }

  [hidden] {
    display: none !important;
  }

  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--ds-b-font-family-heading);
    text-wrap: balance;
    line-height: 1.2;

    @media print {
      break-after: avoid;
    }
  }

  h1 {
    font-size: var(--ds-b-size-32);
    margin-block: 0 var(--ds-b-size-16);
    font-weight: 800;
  }

  h2 {
    font-size: var(--ds-b-size-24);
    margin-block: var(--ds-b-size-40) var(--ds-b-size-16);
    font-weight: 700;
  }

  h3 {
    font-size: var(--ds-b-size-20);
    margin-block: var(--ds-b-size-32) var(--ds-b-size-8);
    font-weight: 800;
  }

  h4, h5, h6 {
    font-size: var(--ds-b-size-16);
    margin-block: var(--ds-b-size-24) var(--ds-b-size-8);
  }

  h4 {
    font-weight: 800;
  }

  h5 {
    font-weight: 700;
  }

  h6 {
    font-weight: 600;
  }

  p {
    text-wrap: pretty;
    max-inline-size: 65ch;

    @media print {
      max-inline-size: none;
    }
  }

  hgroup {
    flex-direction: column;
    display: flex;

    & > :is(h2, h3, h4, h5, h6) {
      margin-block-end: 0;
    }

    &:has( > :is(h2, h3, h4, h5, h6)) > :is(h2, h3, h4, h5, h6) {
      margin-block: 0;
    }

    & > p {
      margin-block: var(--ds-b-size-4) 0;
    }

    &:has( > h1) {
      margin-block-end: var(--ds-b-size-16);
    }

    &:has( > h2) {
      margin-block: var(--ds-b-size-40) var(--ds-b-size-16);
    }

    &:has( > h3) {
      margin-block: var(--ds-b-size-32) var(--ds-b-size-8);
    }

    &:has( > :is(h4, h5, h6)) {
      margin-block: var(--ds-b-size-24) var(--ds-b-size-8);
    }

    & > p:has( > small:only-child) {
      line-height: 1.2;
    }
  }

  :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6, hgroup) {
    margin-block-start: 0;
  }

  a[href] {
    color: inherit;
    -webkit-text-decoration-color: var(--ds-b-color-primary);
    text-decoration-color: var(--ds-b-color-primary);
    text-underline-offset: .25em;
    text-decoration-thickness: 1px;

    &:hover {
      color: var(--ds-b-color-primary);
      text-decoration-thickness: var(--ds-b-size-border-2);
    }

    &:active {
      color: var(--ds-b-color-primary-active);
      text-decoration-thickness: var(--ds-b-size-border-2);
    }
  }

  :focus-visible {
    border-radius: var(--ds-b-outline-radius-focus);
    outline: var(--ds-b-outline-focus);
    outline-offset: var(--ds-b-outline-offset-focus);
  }

  img {
    max-inline-size: 100%;
  }

  img[width][height] {
    block-size: auto;
  }

  img[src$=".svg"] {
    block-size: auto;
    inline-size: 100%;
    max-inline-size: none;
  }

  video, iframe {
    block-size: auto;
    inline-size: 100%;
  }

  iframe {
    aspect-ratio: 16 / 9;
  }

  table {
    border-collapse: collapse;
    inline-size: 100%;
    margin-block: 1em;
  }

  th, td {
    border-block-end: var(--ds-b-size-border-1) solid var(--ds-b-color-border);
    padding-block: var(--ds-b-size-8);
    padding-inline: 0 var(--ds-b-size-16);
    text-align: start;
    vertical-align: top;
  }

  tbody th {
    font-weight: 400;
  }

  blockquote {
    border-inline-start: var(--ds-b-size-border-4) solid var(--ds-b-color-primary);
    font-size: var(--ds-b-size-20);
    margin-block: var(--ds-b-size-40) 0;
    margin-inline: 0;
    padding-inline-start: var(--ds-b-size-16);
  }

  pre, code {
    font-family: var(--ds-b-font-family-monospace);
  }

  pre {
    hyphens: none;
    tab-size: 2;
    text-align: start;
    white-space: pre;
    word-break: normal;
    word-spacing: normal;
    direction: ltr;
    margin-block: .5em;
    line-height: 1.375;
    overflow-x: auto;
  }

  code {
    word-break: break-all;
  }
}

@layer ds.layout {
  .ds-l-cluster {
    align-items: center;
    gap: var(--ds-b-size-8) var(--ds-b-size-24);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .ds-l-cluster:has( > .ds-c-card) {
    gap: var(--ds-b-size-16);
  }

  .ds-l-cluster > p {
    margin: 0;
  }

  .ds-l-cluster--between {
    justify-content: space-between;
  }

  .ds-l-cluster--center {
    justify-content: center;
  }

  .ds-l-cluster--equal {
    & > * {
      flex: 1 1 0;
      min-inline-size: 0;
    }

    & > :is(img, svg) {
      flex: none;
    }
  }

  .ds-l-grid {
    --ds-l-grid-size-min: 18rem;
    gap: var(--ds-b-size-16);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ds-l-grid-size-min)), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .ds-l-page {
    max-inline-size: 44rem;
    padding-inline: var(--ds-b-size-16);
    margin-inline: auto;

    @media print {
      max-inline-size: none;
    }
  }

  .ds-l-page__main {
    padding-block: var(--ds-b-size-32);

    @media print {
      padding-block: 0;
    }

    &:focus {
      outline: none;
    }
  }

  .ds-l-page--large {
    max-inline-size: 64rem;
  }

  .ds-l-page--fluid {
    max-inline-size: none;
  }

  .ds-l-page--full-height, .ds-l-page--centered {
    flex-direction: column;
    min-block-size: 100svh;
    display: flex;

    & .ds-l-page__main {
      flex-grow: 1;
    }

    @media print {
      min-block-size: auto;
    }
  }

  .ds-l-page--centered .ds-l-page__main {
    flex-direction: column;
    justify-content: center;
    display: flex;
  }

  :root:has(.ds-l-page--tinted) {
    background-image: radial-gradient(ellipse 80% 75% at 20% 0, var(--ds-b-color-background-tinted), transparent);
    background-repeat: no-repeat;
    background-size: 100vw 100svh;

    @media print {
      background-image: none;
    }
  }

  .ds-l-stack {
    gap: var(--ds-b-size-8);
    margin-block: var(--ds-b-size-16);
    flex-direction: column;
    padding: 0;
    list-style: none;
    display: flex;

    & > * {
      margin-block: 0;
    }
  }
}

@layer ds.components {
  .ds-c-button {
    border: var(--ds-b-size-border-2) solid var(--ds-b-color-primary);
    border-radius: var(--ds-b-size-radius);
    background-color: var(--ds-b-color-primary);
    color: var(--ds-b-color-text-on-primary);
    cursor: pointer;
    font-family: var(--ds-b-font-family);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding-block: var(--ds-b-size-4);
    padding-inline: var(--ds-b-size-12);
    text-decoration: none;
    display: inline-block;

    &:hover:not(:disabled, [aria-disabled="true"]) {
      border-color: var(--ds-b-color-primary-hover);
      background-color: var(--ds-b-color-primary-hover);
    }

    &:active:not(:disabled, [aria-disabled="true"]) {
      border-color: var(--ds-b-color-primary-active);
      background-color: var(--ds-b-color-primary-active);
    }

    &:disabled, &[aria-disabled="true"] {
      border-color: var(--ds-b-color-background-disabled);
      background-color: var(--ds-b-color-background-disabled);
      color: var(--ds-b-color-text-disabled);
      cursor: not-allowed;
    }
  }

  .ds-c-button--outline {
    color: inherit;
    background-color: #0000;

    &:hover:not(:disabled, [aria-disabled="true"]) {
      border-color: var(--ds-b-color-primary);
      background-color: var(--ds-b-color-background-hover);
    }

    &:active:not(:disabled, [aria-disabled="true"]) {
      border-color: var(--ds-b-color-primary);
      background-color: var(--ds-b-color-background-active);
    }

    &:disabled, &[aria-disabled="true"] {
      border-color: var(--ds-b-color-text-disabled);
      background-color: #0000;
    }
  }

  .ds-c-button--ghost {
    color: inherit;
    background-color: #0000;
    border-color: #0000;

    &:hover:not(:disabled, [aria-disabled="true"]) {
      background-color: var(--ds-b-color-background-hover);
      border-color: #0000;
    }

    &:active:not(:disabled, [aria-disabled="true"]) {
      background-color: var(--ds-b-color-background-active);
      border-color: #0000;
    }

    &:disabled, &[aria-disabled="true"] {
      background-color: #0000;
      border-color: #0000;
    }
  }

  @media (forced-colors: active) {
    .ds-c-button:disabled, .ds-c-button[aria-disabled="true"] {
      color: graytext;
      border-color: graytext;
    }
  }

  .ds-c-card {
    border: var(--ds-b-size-border-1) solid transparent;
    border-radius: var(--ds-b-size-radius);
    background-color: var(--ds-b-color-background-surface);
    padding-block: var(--ds-b-size-12);
    padding-inline: var(--ds-b-size-16);

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

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

  .ds-c-card--horizontal {
    align-items: center;
    gap: var(--ds-b-size-12);
    text-align: start;
    display: flex;

    & > img {
      border-radius: var(--ds-b-size-radius);
      flex: none;
    }

    & > :not(img) {
      min-inline-size: 0;
      margin-block: 0;
      line-height: 1.2;
    }

    & > :not(img) p {
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-block: 0;
      overflow: hidden;
    }

    & > :not(img) p + p {
      margin-block-start: var(--ds-b-size-8);
    }
  }

  .ds-c-alert {
    --ds-c-alert-size-max-inline: 42.5rem;
    --ds-c-alert-size-icon: var(--ds-b-size-24);
    --ds-c-alert-size-button: var(--ds-b-size-32);
    padding: var(--ds-b-size-8) var(--ds-b-size-8) var(--ds-b-size-8) var(--ds-b-size-16);
    border: var(--ds-b-size-border-1) solid var(--ds-b-color-border);
    border-radius: var(--ds-b-size-radius);
    background-color: var(--ds-b-color-background);
    color: var(--ds-b-color-text);
    font-family: var(--ds-b-font-family);
    font-size: var(--ds-b-size-16);
    align-items: center;
    gap: var(--ds-b-size-12);
    inline-size: fit-content;
    max-inline-size: var(--ds-c-alert-size-max-inline);
    line-height: 1.4;
    display: flex;
  }

  .ds-c-alert__icon {
    block-size: var(--ds-c-alert-size-icon);
    inline-size: var(--ds-c-alert-size-icon);
    flex: none;
  }

  .ds-c-alert__text {
    margin: 0;
  }

  .ds-c-alert__close {
    block-size: var(--ds-c-alert-size-button);
    cursor: pointer;
    font-size: var(--ds-b-size-20);
    inline-size: var(--ds-c-alert-size-button);
    flex: none;
    place-content: center;
    padding: 0;
    line-height: 1;
    display: grid;
  }

  .ds-c-checkbox {
    align-items: center;
    column-gap: var(--ds-b-size-12);
    grid-template-columns: auto 1fr;
    display: grid;
  }

  .ds-c-checkbox__control {
    block-size: 1.25rem;
    inline-size: 1.25rem;
    margin: 0;

    &:disabled {
      cursor: not-allowed;
    }

    &:disabled + .ds-c-checkbox__label {
      color: var(--ds-b-color-text-disabled);
    }
  }

  .ds-c-checkbox__label {
    font-weight: 500;
  }

  .ds-c-checkbox__description {
    color: var(--ds-b-color-text-muted);
    margin-block: var(--ds-b-size-4) 0;
    grid-column: 2;
  }

  @media (forced-colors: active) {
    .ds-c-checkbox__control:disabled + .ds-c-checkbox__label {
      color: graytext;
    }
  }

  code[class*="language-"], pre[class*="language-"] {
    color: #f8f8f2;
    text-shadow: 0 1px #0000004d;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    tab-size: 4;
    hyphens: none;
    background: none;
    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
    font-size: 1em;
    line-height: 1.5;
  }

  pre[class*="language-"] {
    border-radius: .3em;
    margin: .5em 0;
    padding: 1em;
    overflow: auto;
  }

  :not(pre) > code[class*="language-"], pre[class*="language-"] {
    background: #272822;
  }

  :not(pre) > code[class*="language-"] {
    white-space: normal;
    border-radius: .3em;
    padding: .1em;
  }

  .token.comment, .token.prolog, .token.doctype, .token.cdata {
    color: #8292a2;
  }

  .token.punctuation {
    color: #f8f8f2;
  }

  .token.namespace {
    opacity: .7;
  }

  .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
    color: #f92672;
  }

  .token.boolean, .token.number {
    color: #ae81ff;
  }

  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
    color: #a6e22e;
  }

  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
    color: #f8f8f2;
  }

  .token.atrule, .token.attr-value, .token.function, .token.class-name {
    color: #e6db74;
  }

  .token.keyword {
    color: #66d9ef;
  }

  .token.regex, .token.important {
    color: #fd971f;
  }

  .token.important, .token.bold {
    font-weight: bold;
  }

  .token.italic {
    font-style: italic;
  }

  .token.entity {
    cursor: help;
  }

  .token.property, .token.tag, .token.constant, .token.symbol {
    color: #fb5a8f;
  }

  pre[class*="language-diff-"] {
    --eleventy-code-padding: 1.25em;
    padding-inline: var(--eleventy-code-padding);
  }

  .token.deleted {
    color: inherit;
    background-color: #8e2e2e;
  }

  .token.inserted {
    color: inherit;
    background-color: #45824b;
  }

  .token.prefix.unchanged, .token.prefix.inserted, .token.prefix.deleted {
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    padding-block: .125em;
    display: inline-flex;
  }

  .token.prefix.inserted, .token.prefix.deleted {
    inline-size: var(--eleventy-code-padding);
    background-color: #0003;
  }

  .token.inserted:not(.prefix), .token.deleted:not(.prefix) {
    color: inherit;
    margin-inline: calc(-1 * var(--eleventy-code-padding));
    text-decoration: none;
    display: block;
  }

  .ds-c-field__label {
    margin-block: 0 var(--ds-b-size-8);
    font-weight: 700;
    display: block;
  }

  .ds-c-field__control {
    border: var(--ds-b-size-border-1) solid var(--ds-b-color-border-control);
    border-radius: var(--ds-b-size-radius);
    background-color: var(--ds-b-color-background);
    color: var(--ds-b-color-text);
    inline-size: 100%;
    padding-block: var(--ds-b-size-12);
    padding-inline: var(--ds-b-size-16);

    &:empty:before {
      color: var(--ds-b-color-text-muted);
      content: attr(data-placeholder);
    }

    &:hover:not(:disabled) {
      border-color: var(--ds-b-color-text);
    }

    &[aria-invalid="true"] {
      border-color: var(--ds-b-color-danger);
      box-shadow: inset 0 0 0 var(--ds-b-size-border-1) var(--ds-b-color-danger);
    }

    &:disabled {
      border-color: var(--ds-b-color-background-disabled);
      background-color: var(--ds-b-color-background-disabled);
      color: var(--ds-b-color-text-disabled);
      cursor: not-allowed;
    }
  }

  .ds-c-field__control--multiline {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    min-block-size: 9rem;
  }

  .ds-c-field__control[type="file"] {
    max-inline-size: 100%;

    &:not(:disabled) {
      cursor: pointer;
    }

    &:active:not(:disabled) {
      border-color: var(--ds-b-color-text);
    }

    &::file-selector-button {
      border: var(--ds-b-size-border-2) solid var(--ds-b-color-primary);
      border-radius: var(--ds-b-size-radius);
      color: inherit;
      cursor: inherit;
      font: inherit;
      padding-block: var(--ds-b-size-4);
      padding-inline: var(--ds-b-size-12);
      background-color: #0000;
      margin-inline-end: var(--ds-b-size-12);
    }

    &:hover:not(:disabled)::file-selector-button {
      background-color: var(--ds-b-color-background-hover);
    }

    &:active:not(:disabled)::file-selector-button {
      background-color: var(--ds-b-color-background-active);
    }

    &:disabled::file-selector-button {
      border-color: var(--ds-b-color-text-disabled);
    }
  }

  .ds-c-field__message {
    min-block-size: 1lh;
  }

  .ds-c-field__message--danger {
    color: var(--ds-b-color-danger);
  }

  @media (forced-colors: active) {
    .ds-c-field__control[type="file"]:disabled::file-selector-button {
      color: graytext;
      border-color: graytext;
    }

    .ds-c-field__control:disabled {
      color: graytext;
      border-color: graytext;
    }
  }

  .ds-c-footer {
    border-block-start: var(--ds-b-size-border-1) solid var(--ds-b-color-border);
    padding-block: var(--ds-b-size-16);

    @media print {
      display: none;
    }
  }

  .ds-c-header {
    border-block-end: var(--ds-b-size-border-1) solid var(--ds-b-color-border);
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-b-size-8) var(--ds-b-size-24);
    padding-block: var(--ds-b-size-16);
    flex-wrap: wrap;
    display: flex;

    @media print {
      display: none;
    }
  }

  .ds-c-header__brand {
    font-family: var(--ds-b-font-family-heading);
    font-weight: 700;
  }

  .ds-c-header__brand, .ds-c-header__link {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      -webkit-text-decoration-color: var(--ds-b-color-primary);
      text-decoration-color: var(--ds-b-color-primary);
    }
  }

  .ds-c-header__link[aria-current] {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--ds-b-color-primary);
    text-decoration-color: var(--ds-b-color-primary);
    text-decoration-thickness: var(--ds-b-size-border-2);
    font-weight: 700;
  }

  .ds-c-hero {
    padding-block: var(--ds-b-size-40);

    & :is(h1, h2, h3, h4, h5, h6) {
      font-size: var(--ds-c-hero-size-heading, var(--ds-b-size-display));
      margin-block-end: var(--ds-b-size-8);
      line-height: 1;
    }

    & hgroup {
      margin-block-end: var(--ds-b-size-24);
    }

    & p {
      font-size: var(--ds-c-hero-size-text, var(--ds-b-size-24));
      line-height: calc(.3em + var(--ds-b-size-24));
    }

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

  .ds-c-hero--media {
    align-items: center;
    gap: var(--ds-b-size-32);
    flex-wrap: wrap;
    display: flex;

    & > :not(.ds-c-hero__media) {
      flex: 18rem;
    }
  }

  .ds-c-hero__media {
    flex: none;
    block-size: auto;
    inline-size: 10rem;
  }

  .ds-c-links {
    font-size: var(--ds-b-size-20);
    margin-block-start: var(--ds-b-size-24);
    font-weight: 700;
  }

  .ds-c-pagination {
    padding: var(--ds-b-size-24) 0 0;
    margin: var(--ds-b-size-48) 0 0;
    border-block-start: var(--ds-b-size-border-1) solid var(--ds-b-color-border);
    justify-content: space-between;
    gap: var(--ds-b-size-8) var(--ds-b-size-16);
    list-style: none;
    display: flex;
  }

  .ds-c-pagination__item {
    flex: 1 1 0;
  }

  .ds-c-pagination__item--next {
    text-align: end;
  }

  .ds-c-process-list {
    --ds-l-grid-size-min: 12rem;
    counter-reset: ds-c-process-list;
    padding: 0;
    list-style: none;
  }

  .ds-c-process-list > li {
    counter-increment: ds-c-process-list;

    &:before {
      color: var(--ds-b-color-primary);
      content: counter(ds-c-process-list) / "";
      font-family: var(--ds-b-font-family-heading);
      font-size: var(--ds-b-size-32);
      margin-block-end: var(--ds-b-size-8);
      font-weight: 700;
      line-height: 1.2;
      display: block;
    }
  }

  .ds-c-skip-link {
    z-index: 999;
    border: var(--ds-b-size-border-2) solid var(--ds-b-color-text);
    background: var(--ds-b-color-background);
    color: var(--ds-b-color-text);
    padding-block: var(--ds-b-size-8);
    padding-inline: var(--ds-b-size-16);
    position: absolute;
    inset-block-start: var(--ds-b-size-16);
    inset-inline-start: var(--ds-b-size-16);

    @media print {
      display: none;
    }

    &:not(:focus) {
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
      block-size: 1px;
      inline-size: 1px;
      padding: 0;
      overflow: hidden;
    }
  }
}

@layer ds.utilities {
  .ds-u-visually-hidden {
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
    position: absolute;
    overflow: hidden;
  }

  .ds-u-print-hidden {
    @media print {
      display: none;
    }
  }

  .ds-u-text-muted {
    color: var(--ds-b-color-text-muted);
  }

  .ds-u-text-primary {
    color: var(--ds-b-color-primary);
  }

  .ds-u-text-center {
    text-align: center;
    max-inline-size: none;
  }
}

@layer ds.base.tokens {
  :root {
    --ds-b-color-text: light-dark(#222, #fafafa);
    --ds-b-color-text-muted: light-dark(#555, #bbb);
    --ds-b-color-background: light-dark(#fafafa, #222);
    --ds-b-color-background-surface: light-dark(color-mix(in srgb, var(--ds-b-color-primary) 5%, #fafafa), color-mix(in srgb, var(--ds-b-color-primary) 6%, #222));
    --ds-b-color-background-tinted: light-dark(color-mix(in srgb, var(--ds-b-color-primary) 14%, #fafafa), color-mix(in srgb, var(--ds-b-color-primary) 14%, #222));
    --ds-b-color-border: light-dark(#ccc, #555);
    --ds-b-color-border-control: #8a8a8a;
    --ds-b-color-primary: light-dark(#4b0195, #c9a2ff);
    --ds-b-color-text-on-primary: light-dark(#fff, #222);
    --ds-b-color-primary-hover: light-dark(color-mix(in srgb, var(--ds-b-color-primary) 80%, #000), color-mix(in srgb, var(--ds-b-color-primary) 70%, #fff));
    --ds-b-color-primary-active: light-dark(color-mix(in srgb, var(--ds-b-color-primary) 60%, #000), color-mix(in srgb, var(--ds-b-color-primary) 40%, #fff));
    --ds-b-color-background-hover: light-dark(color-mix(in srgb, var(--ds-b-color-primary) 8%, transparent), color-mix(in srgb, var(--ds-b-color-primary) 14%, transparent));
    --ds-b-color-background-active: light-dark(color-mix(in srgb, var(--ds-b-color-primary) 16%, transparent), color-mix(in srgb, var(--ds-b-color-primary) 26%, transparent));
    --ds-b-color-text-disabled: light-dark(#767676, #949494);
    --ds-b-color-background-disabled: light-dark(#e8e8e8, #333);
    --ds-b-color-danger: light-dark(#a30d31, #ffabba);
    --ds-b-font-family: system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --ds-b-font-family-heading: "Bricolage Grotesque", var(--ds-b-font-family);
    --ds-b-font-family-monospace: ui-monospace, consolas, menlo, monaco, "Liberation Mono", "Courier New", monospace;
    --ds-b-size-4: .25rem;
    --ds-b-size-8: .5rem;
    --ds-b-size-12: .75rem;
    --ds-b-size-16: 1rem;
    --ds-b-size-20: 1.25rem;
    --ds-b-size-24: 1.5rem;
    --ds-b-size-32: 2rem;
    --ds-b-size-40: 2.5rem;
    --ds-b-size-48: 3rem;
    --ds-b-size-display: clamp(2.5rem, 8vw, 4rem);
    --ds-b-size-radius: .5rem;
    --ds-b-size-border-1: 1px;
    --ds-b-size-border-2: 2px;
    --ds-b-size-border-4: 4px;
    --ds-b-outline-focus: 3px solid var(--ds-b-color-primary);
    --ds-b-outline-offset-focus: 2px;
    --ds-b-outline-radius-focus: 2px;
    color-scheme: light dark;

    @media print {
      --ds-b-font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      color-scheme: light;
    }
  }
}