@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/nunito-latin-400-normal-a5906e15.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/nunito-latin-ext-400-normal-67250a41.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/nunito-latin-500-normal-23ae3083.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/nunito-latin-ext-500-normal-343e7adc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/nunito-latin-600-normal-45f437de.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/nunito-latin-ext-600-normal-a7ba5f4f.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/nunito-latin-700-normal-fa89300b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/nunito-latin-ext-700-normal-0a4e4a02.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fredoka-latin-600-normal-b62f2898.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fredoka-latin-ext-600-normal-d7d22ddf.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fredoka-latin-700-normal-ee61b48a.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fredoka-latin-ext-700-normal-e5272989.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

@layer wa-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  wa-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  wa-page[view='mobile'] .wa-desktop-only,
  wa-page[view='desktop'] .wa-mobile-only {
    display: none !important;
  }
}



/* Required utilities */
@layer wa-utilities {
  .wa-size-xs {
    font-size: var(--wa-font-size-xs);
  }

  .wa-size-s {
    font-size: var(--wa-font-size-s);
  }

  .wa-size-m {
    font-size: var(--wa-font-size-m);
  }

  .wa-size-l {
    font-size: var(--wa-font-size-l);
  }

  .wa-size-xl {
    font-size: var(--wa-font-size-xl);
  }
}

@layer wa-utilities {
  :where(:root),
  .wa-neutral,
  .wa-invert {
    --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
    --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
    --wa-color-border-loud: var(--wa-color-neutral-border-loud);
    --wa-color-border-normal: var(--wa-color-neutral-border-normal);
    --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
    --wa-color-on-loud: var(--wa-color-neutral-on-loud);
    --wa-color-on-normal: var(--wa-color-neutral-on-normal);
    --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
  }

  .wa-brand {
    --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
    --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
    --wa-color-border-loud: var(--wa-color-brand-border-loud);
    --wa-color-border-normal: var(--wa-color-brand-border-normal);
    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
    --wa-color-on-loud: var(--wa-color-brand-on-loud);
    --wa-color-on-normal: var(--wa-color-brand-on-normal);
    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
  }

  .wa-success {
    --wa-color-fill-loud: var(--wa-color-success-fill-loud);
    --wa-color-fill-normal: var(--wa-color-success-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
    --wa-color-border-loud: var(--wa-color-success-border-loud);
    --wa-color-border-normal: var(--wa-color-success-border-normal);
    --wa-color-border-quiet: var(--wa-color-success-border-quiet);
    --wa-color-on-loud: var(--wa-color-success-on-loud);
    --wa-color-on-normal: var(--wa-color-success-on-normal);
    --wa-color-on-quiet: var(--wa-color-success-on-quiet);
  }

  .wa-warning {
    --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
    --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
    --wa-color-border-loud: var(--wa-color-warning-border-loud);
    --wa-color-border-normal: var(--wa-color-warning-border-normal);
    --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
    --wa-color-on-loud: var(--wa-color-warning-on-loud);
    --wa-color-on-normal: var(--wa-color-warning-on-normal);
    --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
  }

  .wa-danger {
    --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
    --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
    --wa-color-border-loud: var(--wa-color-danger-border-loud);
    --wa-color-border-normal: var(--wa-color-danger-border-normal);
    --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
    --wa-color-on-loud: var(--wa-color-danger-on-loud);
    --wa-color-on-normal: var(--wa-color-danger-on-normal);
    --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
  }
}


@layer wa-native {
  /* #region General ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    tab-size: 4;

    background-color: var(--wa-color-surface-default);
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  body {
    min-height: 100vh;
    margin: 0;
    padding: 0;

    color: var(--wa-color-text-normal);
    font-family: var(--wa-font-family-body);
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }
  /* #endregion */

  /* #region Content Flow ~~~~~~~~~~~~~~~~~~~~ */
  address,
  audio,
  blockquote,
  dd,
  details,
  dl,
  fieldset,
  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  iframe,
  ol,
  p,
  pre,
  table,
  ul,
  video {
    margin: 0;

    &:has(+ *) {
      margin-block-end: var(--wa-content-spacing);
    }
  }
  /* #endregion */

  /* #region Block Text ~~~~~~~~~~~~~~~~~~~~~~ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--wa-font-size-3xl);
  }

  h2 {
    font-size: var(--wa-font-size-2xl);
  }

  h3 {
    font-size: var(--wa-font-size-xl);
  }

  h4 {
    font-size: var(--wa-font-size-l);
  }

  h5 {
    font-size: var(--wa-font-size-m);
  }

  h6 {
    font-size: var(--wa-font-size-xs);
  }

  p {
    text-wrap: wrap;
  }
  @supports (text-wrap: pretty) {
    p {
      text-wrap: pretty;
    }
  }
  blockquote {
    padding: var(--wa-space-xl);

    color: var(--wa-color-text-quiet);
    font-family: var(--wa-font-family-longform);
    font-size: var(--wa-font-size-larger);

    border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
  }

  hr {
    margin: var(--wa-content-spacing) 0;

    border: none;
    border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
  }

  figcaption {
    margin-block-start: var(--wa-space-xs);

    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-smaller);
    line-height: var(--wa-line-height-condensed);
  }
  /* #endregion */

  /* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  ul,
  ol {
    padding: 0;
  }

  li > ul,
  li > ol {
    margin-inline-start: 0.25em;
  }

  ul {
    list-style: disc;
  }

  li {
    margin-inline-start: 1.125em;
    padding: 0;
  }

  /* `ul` markers are graphical (3:1 contrast threshold); `ol` markers are text
     (4.5:1). Numerals also wear transparency more than discs, so they keep more
     contrast. `currentColor` lets markers ride along when text color changes. */
  ul > li::marker {
    color: color-mix(in oklch, currentColor 40%, transparent);
  }

  ol > li::marker {
    color: color-mix(in oklch, currentColor 60%, transparent);
  }

  dt {
    font-weight: var(--wa-font-weight-bold);
  }

  menu {
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
      margin: 0;
    }
  }
  /* #endregion */

  /* #region Inline Text ~~~~~~~~~~~~~~~~~~~~~ */
  strong,
  b {
    font-weight: var(--wa-font-weight-bold);
  }

  em,
  i {
    font-style: italic;
  }

  u {
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  s {
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  ins {
    text-decoration-color: var(--wa-color-success-on-quiet);
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  del {
    color: color-mix(in oklab, currentColor, transparent 10%);
    text-decoration-color: var(--wa-color-danger-on-quiet);
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  mark {
    padding: 0.125em 0.25em;

    color: var(--wa-color-warning-on-quiet);

    background-color: var(--wa-color-warning-fill-quiet);
    border-radius: var(--wa-border-radius-s);
  }

  small {
    font-size: var(--wa-font-size-smaller);
  }

  sub,
  sup {
    font-size: var(--wa-font-size-smaller);
    line-height: 0;
  }

  sub {
    vertical-align: sub;
  }

  sup {
    vertical-align: super;
  }

  abbr[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;

    cursor: help;
  }

  kbd {
    padding: 0.125em 0.25em;

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);

    border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
    border-radius: var(--wa-border-radius-s);
    box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);

    wa-icon {
      vertical-align: -2px;
    }
  }
  /* #endregion */

  /* #region Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  a {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  *:is([appearance~='accent'], .wa-accent) {
    a,
    a:hover {
      color: currentColor;
    }
  }

  a:hover {
    color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
    text-decoration: var(--wa-link-decoration-hover);
    -webkit-text-decoration: var(--wa-link-decoration-hover);
  }

  a:focus,
  button:focus {
    outline: none;
  }

  a:focus-visible,
  button:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
  }
  /* #endregion */

  /* #region Code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  code,
  samp,
  var {
    padding: 0.125em 0.25em;

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);

    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-border-radius-s);
  }

  pre {
    padding: var(--wa-space-m);

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);
    white-space: pre;

    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-panel-border-radius);
    overflow-x: auto;

    /* Remove overlapping styles for child code elements */
    & code,
    & samp,
    & var {
      padding: 0;

      font-size: 1em;

      background-color: transparent;
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
    }
  }
  /* #endregion */

  /* #region Media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  img,
  svg,
  picture,
  video {
    max-width: 100%;
    height: auto;
  }

  img,
  picture,
  video {
    border-radius: var(--wa-border-radius-m);
  }

  embed,
  iframe,
  object {
    max-width: 100%;
  }

  iframe {
    border: none;
  }
  /* #endregion */

  /* #region Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  table {
    width: 100%;

    border: none;
    border-collapse: collapse;

    &.wa-tabular-nums,
    & .wa-tabular-nums {
      font-variant-numeric: tabular-nums;
    }
  }

  caption {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-smaller);

    &:has(+ *) {
      margin-block-end: 0.75em;
    }
  }

  tbody {
    tr {
      border-block-start: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-quiet);

      :where(table.wa-zebra-rows) &:nth-child(odd) {
        background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
      }

      :where(table.wa-hover-rows) & {
        @media (hover: hover) {
          &:hover {
            background-color: var(--wa-color-fill-quiet);

            &,
            + tr {
              border-block-start-color: var(--wa-color-border-normal);
            }
          }
        }
      }
    }
  }

  td,
  th {
    padding: 0.75em;

    text-align: start;
    vertical-align: top;
  }

  th {
    font-weight: var(--wa-font-weight-bold);

    /* Column headers only, ruled out by [scope="row"] or by a following non-header cell.
     * Row headers keep the body font size because padding here is em-relative, so smaller
     * type would pull their text out of alignment with the cells beside them. */
    &:not([scope='row']):not(:has(+ td)) {
      font-size: var(--wa-font-size-smaller);
      border-block-end: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-normal);
    }
  }
  /* #endregion */

  /* #region Details ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  details {
    padding: 0;

    background-color: var(--wa-color-surface-default);
    border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
    border-radius: var(--wa-panel-border-radius);

    overflow-anchor: none;

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: var(--wa-space-m);

      border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      > * {
        margin: 0;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: var(--wa-focus-ring);
        outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
      }
    }

    &[open] {
      padding: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);

      summary {
        margin-inline: calc(-1 * var(--wa-space-m));

        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }

    &::details-content {
      box-sizing: border-box; /* Ensure contents don't overflow */
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);

      summary {
        list-style: none;
      }
    }
  }

  /* Replace the summary marker */
  details summary {
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: '';
      background-color: var(--wa-color-text-quiet);
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
        center no-repeat;
      width: 1rem;
      height: 1rem;
      rotate: 0deg;
    }

    &:dir(rtl)::after {
      rotate: 180deg;
    }
  }

  details[open] summary::after {
    rotate: 90deg;
  }
  /* #endregion */

  /* #region Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  dialog {
    flex-direction: column;
    align-items: start;

    width: 32rem;
    max-width: calc(100% - var(--wa-space-l));
    padding: var(--wa-space-l);

    background-color: var(--wa-color-surface-raised);
    border-radius: var(--wa-panel-border-radius);
    border: none;
    box-shadow: var(--wa-shadow-l);

    transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);

    /* Center the dialog */
    margin: auto;
    inset: 0;

    &[open] {
      display: flex;
    }

    &:focus {
      outline: none;
    }
  }

  dialog::backdrop {
    background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
  }
  /* #endregion */

  /* #region Form Labels ~~~~~~~~~~~~~~~~~~~~~ */
  label {
    display: inline-block;
    position: relative;

    color: var(--wa-form-control-label-color);
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: var(--wa-form-control-label-line-height);

    &:has(
        input:not(
            [type='button'],
            [type='checkbox'],
            [type='color'],
            [type='file'],
            [type='hidden'],
            [type='image'],
            [type='radio'],
            [type='reset'],
            [type='submit']
          ),
        textarea,
        select
      ) {
      width: 100%;
    }

    & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
    & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
      margin-block-start: 0.5em;
    }
  }
  /* #endregion */

  /* #region Fieldsets ~~~~~~~~~~~~~~~~~~~~~~~ */
  fieldset {
    padding: var(--wa-space-l);
    padding-block-start: calc(var(--wa-space-l) - 0.5em);

    border: solid 1px var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
  }

  legend {
    padding: 0;
    padding-inline: var(--wa-space-xs);

    font-weight: var(--wa-form-control-label-font-weight);
  }
  /* #endregion */

  /* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'],
  input[type='file'],
  a.wa-button {
    /* We allow modifier classes on <input type="file">,
     * but these selectors ensure the styles only apply to
     * the file selector button in the user agent's shadow root */
    &:not(input[type='file']),
    &::file-selector-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      height: var(--wa-form-control-height);
      padding: 0 var(--wa-form-control-padding-inline);

      font-family: inherit;
      font-size: var(--wa-form-control-value-font-size);
      font-weight: var(--wa-font-weight-action);
      text-decoration: none;
      vertical-align: middle;
      white-space: nowrap;

      border-style: var(--wa-border-style);
      border-width: max(1px, var(--wa-form-control-border-width));

      /* These read the button group's internal custom properties so native buttons can be grouped */
      border-start-start-radius: var(--_button-start-start-radius, var(--wa-form-control-border-radius));
      border-start-end-radius: var(--_button-start-end-radius, var(--wa-form-control-border-radius));
      border-end-start-radius: var(--_button-end-start-radius, var(--wa-form-control-border-radius));
      border-end-end-radius: var(--_button-end-end-radius, var(--wa-form-control-border-radius));

      transition-property: background, border, box-shadow, color;
      transition-duration: var(--wa-transition-fast);
      transition-timing-function: var(--wa-transition-easing);

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      /* Collapse adjacent borders */
      margin-inline-start: var(--_button-horizontal-indent);
      margin-block-start: var(--_button-vertical-indent);
    }

    /* Outlined variants use a negative indent so adjacent borders overlap */
    &.wa-outlined {
      &:not(input[type='file']),
      &::file-selector-button {
        margin-inline-start: var(--_button-horizontal-indent-outlined);
        margin-block-start: var(--_button-vertical-indent-outlined);
      }
    }

    /* Default styles for standard buttons */
    &:not(input[type='file']) {
      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
      background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
      border-color: transparent;

      &:not(:disabled) {
        @media (hover: hover) {
          &:hover {
            background-color: color-mix(
              in oklab,
              var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
              var(--wa-color-mix-hover)
            );
            transform: var(--wa-button-transform-hover);
          }
        }

        &:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-active)
          );
          transform: var(--wa-button-transform-active);
        }

        @media (prefers-reduced-motion: reduce) {
          &:hover,
          &:active {
            transform: none;
          }
        }
      }
    }

    /* Default styles for file selector buttons */
    &:is(input[type='file']) {
      &::file-selector-button {
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
        border-color: transparent;
      }

      &:not(:disabled) {
        &::file-selector-button:hover {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-hover)
          );
        }

        &::file-selector-button:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    /* Modifier classes */
    &.wa-plain {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: transparent;
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-outlined {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: transparent;
        border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-filled {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-hover)
          );
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-active)
          );
        }
      }

      &.wa-outlined {
        &:not(input[type='file']),
        &::file-selector-button {
          border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
        }
      }
    }

    &.wa-accent {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
        background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-hover)
          );
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-pill {
      &:not(input[type='file']),
      &::file-selector-button {
        border-start-start-radius: var(--_button-start-start-radius, var(--wa-border-radius-pill));
        border-start-end-radius: var(--_button-start-end-radius, var(--wa-border-radius-pill));
        border-end-start-radius: var(--_button-end-start-radius, var(--wa-border-radius-pill));
        border-end-end-radius: var(--_button-end-end-radius, var(--wa-border-radius-pill));
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }

    /* Wrap in :is() so that Safari doesn't stop parsing this block */
    &:is(::-moz-focus-inner) {
      border: 0;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      /* When disabled, prevent mouse events from bubbling up from children */
      * {
        pointer-events: none;
      }
    }

    /* Adds space between icons and adjacent elements
     * Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
    & > wa-icon:has(+ *) {
      margin-inline-end: 0.75em;
    }

    & > * + wa-icon {
      margin-inline-start: 0.75em;
    }
  }
  /* #endregion */

  /* #region File Inputs ~~~~~~~~~~~~~~~~~~~~~ */
  input[type='file'] {
    display: block;

    max-inline-size: 100%;

    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;

    border-radius: var(--wa-border-radius-m);

    cursor: pointer;
  }
  /* #endregion */

  /* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
  input[type='checkbox'],
  label:has(input[type='checkbox']),
  input[type='radio'],
  label:has(input[type='radio']) {
    display: inline-flex;

    width: fit-content;

    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);

    user-select: none;
    -webkit-user-select: none;

    &,
    + label {
      cursor: pointer;
    }

    &:disabled,
    &:has(:disabled) {
      opacity: 0.5;

      cursor: not-allowed;
    }
  }

  input[type='checkbox'],
  input[type='radio'] {
    appearance: none;

    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: var(--wa-form-control-toggle-size);
    height: var(--wa-form-control-toggle-size);
    margin: 0;
    margin-inline-end: 0.5em;

    background-color: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
    border-style: var(--wa-border-style);
    border-width: var(--wa-form-control-border-width);

    transition:
      background var(--wa-transition-normal),
      border-color var(--wa-transition-fast),
      box-shadow var(--wa-transition-fast),
      color var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }
  }

  /* Checkbox */
  input[type='checkbox'] {
    --checked-icon-color: var(--wa-color-brand-on-loud);
    --checked-icon-scale: 0.8;

    border-radius: min(
      calc(var(--wa-form-control-toggle-size) * 0.375),
      var(--wa-border-radius-s)
    ); /* min prevents entirely circular checkbox */

    &:checked,
    &:indeterminate {
      color: var(--checked-icon-color);

      background-color: var(--wa-form-control-activated-color);
      border-color: var(--wa-form-control-activated-color);
    }

    &:checked::after,
    &:indeterminate::after {
      content: '';

      width: var(--wa-form-control-toggle-size);
      height: var(--wa-form-control-toggle-size);
      scale: var(--checked-icon-scale);

      background-color: currentColor;
    }

    &:checked::after {
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
        center / 1em 1em no-repeat;
    }

    &:indeterminate::after {
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>')
        center no-repeat;
    }
  }

  /* Radio */
  input[type='radio'] {
    --checked-icon-color: var(--wa-form-control-activated-color);
    --checked-icon-scale: 0.7;

    color: transparent;

    border-radius: 50%;

    &:checked {
      color: var(--checked-icon-color);

      border-color: var(--wa-form-control-activated-color);
    }

    &:checked::after {
      content: '';

      aspect-ratio: 1;
      width: 100%;
      scale: var(--checked-icon-scale);

      background-color: currentColor;
      border-radius: 50%;
    }
  }
  /* #endregion */

  /* #region Text Fields + Textareas + Selects */
  input:not(
    /* Exclude inputs that don't accept text */
    [type='button'],
    [type='checkbox'],
    [type='color'],
    [type='file'],
    [type='hidden'],
    [type='image'],
    [type='radio'],
    [type='range'],
    [type='reset'],
    [type='submit']
  ), textarea, select {
    width: 100%;
    height: var(--wa-form-control-height);
    padding: 0 var(--wa-form-control-padding-inline);

    color: var(--wa-form-control-value-color);
    font-size: var(--wa-form-control-value-size);
    font-family: inherit;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;

    background-color: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
    border-style: var(--wa-form-control-border-style);
    border-width: var(--wa-form-control-border-width);
    border-radius: var(--wa-form-control-border-radius);

    transition:
      background-color var(--wa-transition-normal),
      border-color var(--wa-transition-normal),
      outline-color var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);
    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
    outline-offset: var(--wa-focus-ring-offset);

    cursor: text;

    &::placeholder {
      color: var(--wa-form-control-placeholder-color);

      user-select: none;
      -webkit-user-select: none;
    }

    &:focus-visible {
      outline-color: var(--wa-color-focus);
    }

    &:disabled {
      opacity: 0.5;

      cursor: not-allowed;
    }

    &.wa-outlined {
      background-color: var(--wa-form-control-background-color);
      border-color: var(--wa-form-control-border-color);
    }

    &.wa-filled {
      background-color: var(--wa-color-neutral-fill-quiet);
      border-color: var(--wa-color-neutral-fill-quiet);

      &.wa-outlined {
        border-color: var(--wa-form-control-border-color);
      }
    }

    &.wa-pill {
      border-radius: var(--wa-border-radius-pill);
    }
  }

  /* Textarea */
  textarea {
    height: auto;
    min-height: var(--wa-form-control-height);
    scroll-padding-block: var(--wa-form-control-padding-block);
    padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */

    line-height: var(--wa-line-height-normal);

    resize: vertical;
  }

  /* Select */
  select {
    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');

    appearance: none;

    position: relative;

    min-width: 0;
    background-image: var(--icon-caret), var(--icon-caret);
    background-repeat: no-repeat;
    background-position: center right var(--wa-form-control-padding-inline);
    background-blend-mode: hue, difference;
    background-size: 1rem 1rem;
    text-overflow: ellipsis;
    padding-inline-end: calc(var(--wa-form-control-padding-inline) + 1rem + var(--wa-space-xs));
    overflow: hidden;

    cursor: pointer;

    &[multiple] {
      height: auto;
      background-image: none;
      padding-inline: var(--wa-form-control-padding-inline);
    }
  }
  /* #endregion */

  /* #region Color Pickers ~~~~~~~~~~~~~~~~~~~ */
  input[type='color'] {
    display: block;

    block-size: var(--wa-form-control-height);
    inline-size: var(--wa-form-control-height);
    padding: calc(var(--wa-form-control-border-width) * 2);

    font-size: 1em;

    background: transparent;
    border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
    border-radius: var(--wa-form-control-border-radius);

    cursor: pointer;
    forced-color-adjust: none;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: inherit;
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }

    &::-moz-color-swatch {
      border: none;
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }
  }
  /* #endregion */

  /* #region Sliders ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  input[type='range'] {
    --thumb-width: 1.4em;
    --thumb-height: 1.4em;
    --track-size: 0.5em;

    -webkit-appearance: none;

    display: flex;
    flex-direction: column;
    position: relative;

    width: 100%;
    height: var(--track-size);
    margin: 0;

    font-size: inherit;
    line-height: var(--wa-form-control-height);
    vertical-align: middle;

    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: calc(var(--track-size) / 2);

    &::-webkit-slider-runnable-track {
      width: 100%;
      height: var(--track-size);

      border: none;
      border-radius: 999px;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;

      width: var(--thumb-width);
      height: var(--thumb-height);
      margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);

      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: var(--wa-transition-easing);
    }

    &:enabled {
      &:focus-visible::-webkit-slider-thumb {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }

      &::-webkit-slider-thumb {
        cursor: pointer;
      }

      &::-webkit-slider-thumb:active {
        cursor: grabbing;
      }
    }

    &::-moz-focus-outer {
      border: 0;
    }

    &::-moz-range-progress {
      height: var(--track-size);

      background-color: var(--wa-color-neutral-fill-normal);
      border-radius: 3px;
    }

    &::-moz-range-track {
      width: 100%;
      height: var(--track-size);

      background-color: var(--wa-color-neutral-fill-normal);
      border: none;
      border-radius: 999px;
    }

    &::-moz-range-thumb {
      width: var(--thumb-width);
      height: var(--thumb-height);

      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: var(--wa-transition-easing);
    }

    &:enabled {
      &:focus-visible::-moz-range-thumb {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }

      &::-moz-range-thumb {
        cursor: pointer;
      }

      &::-moz-range-thumb:active {
        cursor: grabbing;
      }
    }
  }

  label > input[type='range'] {
    margin-block-start: 1em;
  }

  input[type='range']:focus {
    outline: none;
  }

  input[type='range']:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    &::-webkit-slider-thumb {
      cursor: not-allowed;
    }

    &::-moz-range-thumb {
      cursor: not-allowed;
    }
  }
  /* #endregion */

  /* #region Progress ~~~~~~~~~~~~~~~~~~~~~~~~ */
  progress {
    --indicator-color: var(--wa-color-brand-fill-loud);

    width: 100%;
    height: 1rem;
    overflow: hidden;

    color: var(--wa-color-brand-on-loud);

    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: var(--wa-border-radius-pill);

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

    &[value]::-webkit-progress-value {
      background-color: var(--indicator-color);
    }

    &::-moz-progress-bar {
      background-color: var(--indicator-color);
    }
  }

  /* Indeterminate */
  progress:not([value]) {
    padding-left: var(--inset-inline-start);

    animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);

    &::-webkit-progress-bar {
      background-color: var(
        --indicator-color
      ); /* Chrome does not render a ::-webkit-progress-value for indeterminate progress */
    }
  }

  @keyframes wa-fade-in {
    from {
      opacity: 0;
    }
  }

  /* For some reason Chrome fiercely resists animations on this pseudo
	  so we had to do it with padding on <progress> */
  @keyframes wa-progress-indeterminate {
    0% {
      padding-inline-end: 100%;
    }

    25%,
    100% {
      padding-inline-end: 0%;
    }

    75%,
    100% {
      padding-inline-start: 100%;
    }
  }
  /* #endregion */

  /* #region Validation ~~~~~~~~~~~~~~~~~~~~~~ */
  .wa-invalid {
    --wa-form-control-border-color: var(--wa-color-danger-border-loud);
    --wa-form-control-activated-color: var(--wa-color-danger-fill-loud);
    --wa-form-control-value-color: var(--wa-color-danger-on-quiet);

    /* Focus ring */
    --wa-color-focus: var(--wa-color-danger-border-loud);

    /* Help text */
    --wa-color-text-quiet: var(--wa-color-danger-on-quiet);
  }

  .wa-valid {
    --wa-form-control-border-color: var(--wa-color-success-border-loud);
    --wa-form-control-activated-color: var(--wa-color-success-fill-loud);
    --wa-form-control-value-color: var(--wa-color-success-on-quiet);

    /* Focus ring */
    --wa-color-focus: var(--wa-color-success-border-loud);

    /* Help text */
    --wa-color-text-quiet: var(--wa-color-success-on-quiet);
  }
  /* #endregion */
}



@layer wa-utilities {
  /*
   * Utility to minimize FOUCE and show custom elements only after they're registered
   */
  .wa-cloak:has(:not(:defined)) {
    animation: 2s step-end wa-fouce-cloak;
  }

  @keyframes wa-fouce-cloak {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@layer wa-utilities {
  .wa-visually-hidden:not(:focus-within),
  .wa-visually-hidden-force,
  .wa-visually-hidden-hint::part(hint),
  .wa-visually-hidden-label::part(label),
  .wa-visually-hidden-label::part(form-control-label) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }
}

@layer wa-utilities {
  /* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
  @supports (scrollbar-gutter: stable) {
    .wa-scroll-lock {
      scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
    }

    .wa-scroll-lock body {
      overflow: hidden !important;
    }
  }

  /** This can go away once Safari has scrollbar-gutter support. */
  @supports not (scrollbar-gutter: stable) {
    .wa-scroll-lock body {
      padding-right: var(--wa-scroll-lock-size) !important;
      overflow: hidden !important;
    }
  }
}

@layer wa-utilities {
  .wa-placeholder {
    align-self: stretch;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-3xl);
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure an align-items util produces a visible change */
  :where(
    .wa-align-items-start,
    .wa-align-items-end,
    .wa-align-items-center,
    .wa-align-items-stretch,
    .wa-align-items-baseline
  ) {
    display: flex;
  }

  .wa-align-items-start {
    align-items: flex-start;
  }
  .wa-align-items-end {
    align-items: flex-end;
  }
  .wa-align-items-center {
    align-items: center;
  }
  .wa-align-items-stretch {
    align-items: stretch;
  }
  .wa-align-items-baseline {
    align-items: baseline;
  }

  .wa-align-self-start {
    align-self: flex-start;
  }
  .wa-align-self-end {
    align-self: flex-end;
  }
  .wa-align-self-center {
    align-self: center;
  }
  .wa-align-self-stretch {
    align-self: stretch;
  }
  .wa-align-self-baseline {
    align-self: baseline;
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a justify-content util produces a visible change */
  :where(
    .wa-justify-content-start,
    .wa-justify-content-end,
    .wa-justify-content-center,
    .wa-justify-content-space-around,
    .wa-justify-content-space-between,
    .wa-justify-content-space-evenly
  ) {
    display: flex;
  }

  .wa-justify-content-start {
    justify-content: flex-start;
  }
  .wa-justify-content-end {
    justify-content: flex-end;
  }
  .wa-justify-content-center {
    justify-content: center;
  }
  .wa-justify-content-space-around {
    justify-content: space-around;
  }
  .wa-justify-content-space-between {
    justify-content: space-between;
  }
  .wa-justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a flex wrap util produces a visible change */
  :where(.wa-flex-wrap, .wa-flex-nowrap, .wa-flex-wrap-reverse) {
    display: flex;
  }

  .wa-flex-wrap {
    flex-wrap: wrap;
  }
  .wa-flex-nowrap {
    flex-wrap: nowrap;
  }
  .wa-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@layer wa-utilities {
  .wa-border-radius-s {
    border-radius: var(--wa-border-radius-s);
  }
  .wa-border-radius-m {
    border-radius: var(--wa-border-radius-m);
  }
  .wa-border-radius-l {
    border-radius: var(--wa-border-radius-l);
  }
  .wa-border-radius-pill {
    border-radius: var(--wa-border-radius-pill);
  }
  .wa-border-radius-circle {
    border-radius: var(--wa-border-radius-circle);
  }
  .wa-border-radius-square {
    border-radius: var(--wa-border-radius-square);
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
  :where(
    .wa-gap-0,
    .wa-gap-3xs,
    .wa-gap-2xs,
    .wa-gap-xs,
    .wa-gap-s,
    .wa-gap-m,
    .wa-gap-l,
    .wa-gap-xl,
    .wa-gap-2xl,
    .wa-gap-3xl,
    .wa-gap-4xl,
    .wa-gap-5xl
  ) {
    display: flex;
  }

  .wa-gap-0 {
    gap: 0px;
  }
  .wa-gap-3xs {
    gap: var(--wa-space-3xs);
  }
  .wa-gap-2xs {
    gap: var(--wa-space-2xs);
  }
  .wa-gap-xs {
    gap: var(--wa-space-xs);
  }
  .wa-gap-s {
    gap: var(--wa-space-s);
  }
  .wa-gap-m {
    gap: var(--wa-space-m);
  }
  .wa-gap-l {
    gap: var(--wa-space-l);
  }
  .wa-gap-xl {
    gap: var(--wa-space-xl);
  }
  .wa-gap-2xl {
    gap: var(--wa-space-2xl);
  }
  .wa-gap-3xl {
    gap: var(--wa-space-3xl);
  }
  .wa-gap-4xl {
    gap: var(--wa-space-4xl);
  }
  .wa-gap-5xl {
    gap: var(--wa-space-5xl);
  }
}

@layer wa-utilities {
  /* #region General ~~~~~ */
  [class*='wa-body'] {
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
  }

  [class*='wa-heading'] {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }

  [class*='wa-caption'] {
    color: var(--wa-color-text-quiet);
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-condensed);
  }

  [class*='wa-longform'] {
    font-family: var(--wa-font-family-longform);
    font-weight: var(--wa-font-weight-longform);
    line-height: var(--wa-line-height-normal);
  }

  .wa-font-size-3xs,
  .wa-body-3xs,
  .wa-heading-3xs,
  .wa-caption-3xs,
  .wa-longform-3xs {
    font-size: var(--wa-font-size-3xs);
  }

  .wa-font-size-2xs,
  .wa-body-2xs,
  .wa-heading-2xs,
  .wa-caption-2xs,
  .wa-longform-2xs {
    font-size: var(--wa-font-size-2xs);
  }

  .wa-font-size-xs,
  .wa-body-xs,
  .wa-heading-xs,
  .wa-caption-xs,
  .wa-longform-xs {
    font-size: var(--wa-font-size-xs);
  }

  .wa-font-size-s,
  .wa-body-s,
  .wa-heading-s,
  .wa-caption-s,
  .wa-longform-s {
    font-size: var(--wa-font-size-s);
  }

  .wa-font-size-m,
  .wa-body-m,
  .wa-heading-m,
  .wa-caption-m,
  .wa-longform-m {
    font-size: var(--wa-font-size-m);
  }

  .wa-font-size-l,
  .wa-body-l,
  .wa-heading-l,
  .wa-caption-l,
  .wa-longform-l {
    font-size: var(--wa-font-size-l);
  }

  .wa-font-size-xl,
  .wa-body-xl,
  .wa-heading-xl,
  .wa-caption-xl,
  .wa-longform-xl {
    font-size: var(--wa-font-size-xl);
  }

  .wa-font-size-2xl,
  .wa-body-2xl,
  .wa-heading-2xl,
  .wa-caption-2xl,
  .wa-longform-2xl {
    font-size: var(--wa-font-size-2xl);
  }

  .wa-font-size-3xl,
  .wa-body-3xl,
  .wa-heading-3xl,
  .wa-caption-3xl,
  .wa-longform-3xl {
    font-size: var(--wa-font-size-3xl);
  }

  .wa-font-size-4xl,
  .wa-body-4xl,
  .wa-heading-4xl,
  .wa-caption-4xl,
  .wa-longform-4xl {
    font-size: var(--wa-font-size-4xl);
  }

  .wa-font-size-5xl,
  .wa-body-5xl,
  .wa-heading-5xl,
  .wa-caption-5xl,
  .wa-longform-5xl {
    font-size: var(--wa-font-size-5xl);
  }

  .wa-font-weight-light {
    font-weight: var(--wa-font-weight-light);
  }

  .wa-font-weight-normal {
    font-weight: var(--wa-font-weight-normal);
  }

  .wa-font-weight-semibold {
    font-weight: var(--wa-font-weight-semibold);
  }

  .wa-font-weight-bold {
    font-weight: var(--wa-font-weight-bold);
  }

  .wa-color-text-normal {
    color: var(--wa-color-text-normal);
  }

  .wa-color-text-quiet {
    color: var(--wa-color-text-quiet);
  }

  .wa-color-text-link {
    color: var(--wa-color-text-link);
  }

  .wa-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wa-text-nowrap,
  .wa-text-wrap-nowrap {
    text-wrap: nowrap;
  }

  .wa-text-balance,
  .wa-text-wrap-balance {
    text-wrap: balance;
  }

  @supports (text-wrap: pretty) {
    .wa-text-pretty,
    .wa-text-wrap-pretty {
      text-wrap: pretty;
    }
  }

  .wa-text-uppercase {
    text-transform: uppercase;
  }

  .wa-text-lowercase {
    text-transform: lowercase;
  }

  .wa-text-capitalize {
    text-transform: capitalize;
  }

  .wa-text-start {
    text-align: start;
  }

  .wa-text-center {
    text-align: center;
  }

  .wa-text-end {
    text-align: end;
  }

  .wa-text-justify {
    text-align: justify;
  }
  /* #endregion */

  /* #region Links ~~~~~~~ */
  .wa-link {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
        text-decoration: var(--wa-link-decoration-hover);
        -webkit-text-decoration: var(--wa-link-decoration-hover);
      }
    }
  }

  .wa-link-plain {
    color: var(--wa-color-text-normal);
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
        text-decoration: none;
      }
    }
  }
  /* #endregion */

  /* #region Lists ~~~~~~~ */
  .wa-list-plain:is(ol, ul) {
    list-style: none;
    padding-inline-start: 0;

    > li {
      margin-inline-start: 0;
    }
  }
  /* #endregion */

  /* #region Form Controls */
  .wa-form-control-label {
    color: var(--wa-form-control-label-color);
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: var(--wa-form-control-label-line-height);
  }

  .wa-form-control-value {
    color: var(--wa-form-control-value-color);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
  }

  .wa-form-control-placeholder {
    color: var(--wa-form-control-placeholder-color);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
  }

  .wa-form-control-hint {
    color: var(--wa-form-control-hint-color);
    font-weight: var(--wa-form-control-hint-font-weight);
    font-size: var(--wa-font-size-smaller);
    line-height: var(--wa-form-control-hint-line-height);
  }
  /* #endregion */
}

@layer wa-utilities {
  :is(
      [class*='wa-cluster'],
      [class*='wa-flank'],
      [class*='wa-frame'],
      [class*='wa-grid'],
      [class*='wa-stack'],
      [class*='wa-split']
    )
    > * {
    margin-block: 0;
    margin-inline: 0;
  }

  :where(
    [class*='wa-cluster'],
    [class*='wa-flank'],
    [class*='wa-frame'],
    [class*='wa-grid'],
    [class*='wa-stack'],
    [class*='wa-split']
  ) {
    gap: var(--wa-space-m);
  }

  /* #region Cluster */
  [class*='wa-cluster'] {
    display: flex;
  }

  :where([class*='wa-cluster']) {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* #endregion */

  /* #region Flank */
  [class*='wa-flank'] {
    display: flex;

    --content-percentage: initial;
    --flank-size: initial;
  }

  [class*='wa-flank']:not([class*='\:end']) > :first-child,
  [class*='wa-flank'][class*='\:start'] > :first-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='wa-flank']:not([class*='\:end']) > :last-child,
  [class*='wa-flank'][class*='\:start'] > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  [class*='wa-flank'][class*='\:end'] > :last-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='wa-flank'][class*='\:end'] > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  :where([class*='wa-flank']) {
    align-items: center;
    flex-wrap: wrap;
  }
  /* #endregion */

  /* #region Frame */
  [class*='wa-frame'] {
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  [class*='wa-frame'] > img,
  [class*='wa-frame'] > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  [class*='wa-frame'][class*='\:square'] {
    aspect-ratio: 1 / 1;
  }
  [class*='wa-frame'][class*='\:landscape'] {
    aspect-ratio: 16 / 9;
  }
  [class*='wa-frame'][class*='\:portrait'] {
    aspect-ratio: 9 / 16;
  }

  :where([class*='wa-frame']) {
    align-items: center;
    justify-content: center;
  }
  /* #endregion */

  /* #region Grid */
  [class*='wa-grid'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));

    --min-column-size: initial;
  }

  .wa-span-grid {
    grid-column: 1 / -1;
  }
  /* #endregion */

  /* #region Split */
  [class*='wa-split'] {
    display: flex;
  }

  [class*='wa-split'],
  [class*='wa-split'][class*='\:row'] {
    flex-direction: row;
    block-size: auto;
    inline-size: 100%;
  }

  [class*='wa-split']:not([class*='\:column']) > :first-child {
    flex: 0 1 auto;
  }

  [class*='wa-split'][class*='\:column'] {
    flex-direction: column;
    block-size: auto;
    inline-size: auto;
    align-self: stretch;
  }

  :where([class*='wa-split']) {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* #endregion */

  /* #region Stack */
  [class*='wa-stack'] {
    display: flex;
    flex-direction: column;
  }

  :where([class*='wa-stack']) {
    align-items: stretch;
    justify-content: flex-start;
  }
  /* #endregion */
}

@layer wa-utilities {
  /* `wa-prose` applies hierarchical, asymmetric typographic rhythm to a block
     of long-form content. Builds on `wa-native`'s base block styles instead of
     duplicating them. Em-based spacing scales when composed with `wa-font-size-*`.
     The class and its element selectors are wrapped in `:where()` so every rule
     sits at 0,0,0 specificity — any utility class or element rule the author
     applies inside the container takes precedence without weight tricks. */

  /* @scope is Newly Available in Baseline 2025. As such, it should be reserved for
     non-essential, progressive enhancement features until @scope is established
     as Widely Available. https://caniuse.com/css-cascade-scope */
  @scope (.wa-prose) to (.wa-not-prose) {
    :where(:scope) {
      /* #region Tokens ~~~~~~~~~~~~ */

      /* Em-based rhythm scale: each token resolves at the use site, so margins
        scale with the element's own font-size. `--wa-prose-rhythm-scale` is a
        single knob to tighten or loosen everything at once. */
      --wa-prose-rhythm-scale: 1;
      --wa-prose-rhythm-2xs: calc(0.25em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-xs: calc(0.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-s: calc(0.75em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-m: calc(1em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-l: calc(1.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-xl: calc(2em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-2xl: calc(2.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-3xl: calc(3em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));

      --wa-prose-line-length: 65ch;

      max-inline-size: var(--wa-prose-line-length);

      /* Oldstyle proportional figures for running text; tables reassert
        `tabular-nums` below. Fonts without the OpenType feature fall back. */
      font-variant-numeric: oldstyle-nums proportional-nums;

      /* Inherits to descendants. Safari today; progressive enhancement elsewhere. */
      hanging-punctuation: first last allow-end;
      /* #endregion */

      /* #region Headings ~~~~~~~~~~~~ */

      /* Em sizes inherit through the cascade — re-applying `--wa-font-size-scale`
        here would double-scale. Authors overriding should stay em-based. */
      & :where(h1) {
        font-size: 2.5625em;
      }
      & :where(h2) {
        font-size: 2em;
      }
      & :where(h3) {
        font-size: 1.5625em;
      }
      & :where(h4) {
        font-size: 1.25em;
      }
      & :where(h5) {
        font-size: 1em;
      }
      & :where(h6) {
        font-size: 0.75em;
      }

      /* Slight optical tracking; only the larger sizes need it. */
      & :where(h1, h2) {
        letter-spacing: -0.01em;
      }

      /* Headings hug what they introduce: generous above, tight below. */
      & :where(h1):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & * + :where(h2) {
        margin-block-start: var(--wa-prose-rhythm-2xl);
      }
      & :where(h2):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & * + :where(h3) {
        margin-block-start: var(--wa-prose-rhythm-xl);
      }
      & :where(h3):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & :where(h4, h5, h6):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-xs);
      }

      /* Back-to-back headings tighten so the second reads as subordinate.
        Enumerated explicitly — skipping more than two levels is rare enough
        that the default rhythm reads better. */
      & :where(h1 + h2, h1 + h3, h2 + h3, h2 + h4, h3 + h4, h4 + h5, h5 + h6) {
        margin-block-start: var(--wa-prose-rhythm-m);
      }
      /* #endregion */

      /* #region Body text & lists ~~~~~~~~~~~~ */

      /* Replaces wa-native's rem-based `--wa-content-spacing` with em rhythm. */
      & :where(p, ul, ol, dl):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-l);
      }

      & :where(ul, ol) > :where(li):has(+ li) {
        margin-block-end: var(--wa-prose-rhythm-2xs);
      }

      & :where(dd):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }
      /* #endregion */

      /* #region Captions ~~~~~~~~~~~~ */

      /* Em-based override keeps caption spacing in step with the prose
        container; wa-native sets the visual style. */
      & :where(figcaption) {
        margin-block-start: var(--wa-prose-rhythm-xs);
      }
      /* #endregion */

      /* #region Inline code & long-word breaks ~~~~~~~~~~~~ */

      /* `anywhere` is the right trade-off in prose: long URLs and identifiers
        break instead of overflowing the column. */
      & :where(code, pre) {
        overflow-wrap: anywhere;
      }
      /* #endregion */

      /* #region Section breaks & major non-text blocks ~~~~~~~~~~~~ */

      /* `<hr>`'s own margin defines the gap; the next heading shouldn't double-stack. */
      & :where(hr) {
        margin-block: var(--wa-prose-rhythm-3xl);
      }
      & :where(hr + :is(h1, h2, h3, h4, h5, h6)) {
        margin-block-start: 0;
      }

      /* Major non-text blocks get more air than running prose, but headings
        still hug — so the top-margin rule excludes the heading-to-block case
        (handled separately below with a smaller gap). */
      & :where(pre, figure, table, blockquote, wa-callout, details):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-xl);
      }

      & :where(:not(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
        margin-block-start: var(--wa-prose-rhythm-xl);
      }

      & :where(:is(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
        margin-block-start: var(--wa-prose-rhythm-m);
      }
      /* #endregion */
    }
  }
}





/* Rules shared by all palettes */

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-brand-blue {
    --wa-color-brand-95: var(--wa-color-blue-95);
    --wa-color-brand-90: var(--wa-color-blue-90);
    --wa-color-brand-80: var(--wa-color-blue-80);
    --wa-color-brand-70: var(--wa-color-blue-70);
    --wa-color-brand-60: var(--wa-color-blue-60);
    --wa-color-brand-50: var(--wa-color-blue-50);
    --wa-color-brand-40: var(--wa-color-blue-40);
    --wa-color-brand-30: var(--wa-color-blue-30);
    --wa-color-brand-20: var(--wa-color-blue-20);
    --wa-color-brand-10: var(--wa-color-blue-10);
    --wa-color-brand-05: var(--wa-color-blue-05);
    --wa-color-brand: var(--wa-color-blue);
    --wa-color-brand-on: var(--wa-color-blue-on);
  }

  .wa-brand-red {
    --wa-color-brand-95: var(--wa-color-red-95);
    --wa-color-brand-90: var(--wa-color-red-90);
    --wa-color-brand-80: var(--wa-color-red-80);
    --wa-color-brand-70: var(--wa-color-red-70);
    --wa-color-brand-60: var(--wa-color-red-60);
    --wa-color-brand-50: var(--wa-color-red-50);
    --wa-color-brand-40: var(--wa-color-red-40);
    --wa-color-brand-30: var(--wa-color-red-30);
    --wa-color-brand-20: var(--wa-color-red-20);
    --wa-color-brand-10: var(--wa-color-red-10);
    --wa-color-brand-05: var(--wa-color-red-05);
    --wa-color-brand: var(--wa-color-red);
    --wa-color-brand-on: var(--wa-color-red-on);
  }

  .wa-brand-orange {
    --wa-color-brand-95: var(--wa-color-orange-95);
    --wa-color-brand-90: var(--wa-color-orange-90);
    --wa-color-brand-80: var(--wa-color-orange-80);
    --wa-color-brand-70: var(--wa-color-orange-70);
    --wa-color-brand-60: var(--wa-color-orange-60);
    --wa-color-brand-50: var(--wa-color-orange-50);
    --wa-color-brand-40: var(--wa-color-orange-40);
    --wa-color-brand-30: var(--wa-color-orange-30);
    --wa-color-brand-20: var(--wa-color-orange-20);
    --wa-color-brand-10: var(--wa-color-orange-10);
    --wa-color-brand-05: var(--wa-color-orange-05);
    --wa-color-brand: var(--wa-color-orange);
    --wa-color-brand-on: var(--wa-color-orange-on);
  }

  .wa-brand-yellow {
    --wa-color-brand-95: var(--wa-color-yellow-95);
    --wa-color-brand-90: var(--wa-color-yellow-90);
    --wa-color-brand-80: var(--wa-color-yellow-80);
    --wa-color-brand-70: var(--wa-color-yellow-70);
    --wa-color-brand-60: var(--wa-color-yellow-60);
    --wa-color-brand-50: var(--wa-color-yellow-50);
    --wa-color-brand-40: var(--wa-color-yellow-40);
    --wa-color-brand-30: var(--wa-color-yellow-30);
    --wa-color-brand-20: var(--wa-color-yellow-20);
    --wa-color-brand-10: var(--wa-color-yellow-10);
    --wa-color-brand-05: var(--wa-color-yellow-05);
    --wa-color-brand: var(--wa-color-yellow);
    --wa-color-brand-on: var(--wa-color-yellow-on);
  }

  .wa-brand-green {
    --wa-color-brand-95: var(--wa-color-green-95);
    --wa-color-brand-90: var(--wa-color-green-90);
    --wa-color-brand-80: var(--wa-color-green-80);
    --wa-color-brand-70: var(--wa-color-green-70);
    --wa-color-brand-60: var(--wa-color-green-60);
    --wa-color-brand-50: var(--wa-color-green-50);
    --wa-color-brand-40: var(--wa-color-green-40);
    --wa-color-brand-30: var(--wa-color-green-30);
    --wa-color-brand-20: var(--wa-color-green-20);
    --wa-color-brand-10: var(--wa-color-green-10);
    --wa-color-brand-05: var(--wa-color-green-05);
    --wa-color-brand: var(--wa-color-green);
    --wa-color-brand-on: var(--wa-color-green-on);
  }

  .wa-brand-cyan {
    --wa-color-brand-95: var(--wa-color-cyan-95);
    --wa-color-brand-90: var(--wa-color-cyan-90);
    --wa-color-brand-80: var(--wa-color-cyan-80);
    --wa-color-brand-70: var(--wa-color-cyan-70);
    --wa-color-brand-60: var(--wa-color-cyan-60);
    --wa-color-brand-50: var(--wa-color-cyan-50);
    --wa-color-brand-40: var(--wa-color-cyan-40);
    --wa-color-brand-30: var(--wa-color-cyan-30);
    --wa-color-brand-20: var(--wa-color-cyan-20);
    --wa-color-brand-10: var(--wa-color-cyan-10);
    --wa-color-brand-05: var(--wa-color-cyan-05);
    --wa-color-brand: var(--wa-color-cyan);
    --wa-color-brand-on: var(--wa-color-cyan-on);
  }

  .wa-brand-indigo {
    --wa-color-brand-95: var(--wa-color-indigo-95);
    --wa-color-brand-90: var(--wa-color-indigo-90);
    --wa-color-brand-80: var(--wa-color-indigo-80);
    --wa-color-brand-70: var(--wa-color-indigo-70);
    --wa-color-brand-60: var(--wa-color-indigo-60);
    --wa-color-brand-50: var(--wa-color-indigo-50);
    --wa-color-brand-40: var(--wa-color-indigo-40);
    --wa-color-brand-30: var(--wa-color-indigo-30);
    --wa-color-brand-20: var(--wa-color-indigo-20);
    --wa-color-brand-10: var(--wa-color-indigo-10);
    --wa-color-brand-05: var(--wa-color-indigo-05);
    --wa-color-brand: var(--wa-color-indigo);
    --wa-color-brand-on: var(--wa-color-indigo-on);
  }

  .wa-brand-purple {
    --wa-color-brand-95: var(--wa-color-purple-95);
    --wa-color-brand-90: var(--wa-color-purple-90);
    --wa-color-brand-80: var(--wa-color-purple-80);
    --wa-color-brand-70: var(--wa-color-purple-70);
    --wa-color-brand-60: var(--wa-color-purple-60);
    --wa-color-brand-50: var(--wa-color-purple-50);
    --wa-color-brand-40: var(--wa-color-purple-40);
    --wa-color-brand-30: var(--wa-color-purple-30);
    --wa-color-brand-20: var(--wa-color-purple-20);
    --wa-color-brand-10: var(--wa-color-purple-10);
    --wa-color-brand-05: var(--wa-color-purple-05);
    --wa-color-brand: var(--wa-color-purple);
    --wa-color-brand-on: var(--wa-color-purple-on);
  }

  .wa-brand-pink {
    --wa-color-brand-95: var(--wa-color-pink-95);
    --wa-color-brand-90: var(--wa-color-pink-90);
    --wa-color-brand-80: var(--wa-color-pink-80);
    --wa-color-brand-70: var(--wa-color-pink-70);
    --wa-color-brand-60: var(--wa-color-pink-60);
    --wa-color-brand-50: var(--wa-color-pink-50);
    --wa-color-brand-40: var(--wa-color-pink-40);
    --wa-color-brand-30: var(--wa-color-pink-30);
    --wa-color-brand-20: var(--wa-color-pink-20);
    --wa-color-brand-10: var(--wa-color-pink-10);
    --wa-color-brand-05: var(--wa-color-pink-05);
    --wa-color-brand: var(--wa-color-pink);
    --wa-color-brand-on: var(--wa-color-pink-on);
  }

  .wa-brand-gray {
    --wa-color-brand-95: var(--wa-color-gray-95);
    --wa-color-brand-90: var(--wa-color-gray-90);
    --wa-color-brand-80: var(--wa-color-gray-80);
    --wa-color-brand-70: var(--wa-color-gray-70);
    --wa-color-brand-60: var(--wa-color-gray-60);
    --wa-color-brand-50: var(--wa-color-gray-50);
    --wa-color-brand-40: var(--wa-color-gray-40);
    --wa-color-brand-30: var(--wa-color-gray-30);
    --wa-color-brand-20: var(--wa-color-gray-20);
    --wa-color-brand-10: var(--wa-color-gray-10);
    --wa-color-brand-05: var(--wa-color-gray-05);
    --wa-color-brand: var(--wa-color-gray);
    --wa-color-brand-on: var(--wa-color-gray-on);
  }
}

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-neutral-gray {
    --wa-color-neutral-95: var(--wa-color-gray-95);
    --wa-color-neutral-90: var(--wa-color-gray-90);
    --wa-color-neutral-80: var(--wa-color-gray-80);
    --wa-color-neutral-70: var(--wa-color-gray-70);
    --wa-color-neutral-60: var(--wa-color-gray-60);
    --wa-color-neutral-50: var(--wa-color-gray-50);
    --wa-color-neutral-40: var(--wa-color-gray-40);
    --wa-color-neutral-30: var(--wa-color-gray-30);
    --wa-color-neutral-20: var(--wa-color-gray-20);
    --wa-color-neutral-10: var(--wa-color-gray-10);
    --wa-color-neutral-05: var(--wa-color-gray-05);
    --wa-color-neutral: var(--wa-color-gray);
    --wa-color-neutral-on: var(--wa-color-gray-on);
  }

  .wa-neutral-red {
    --wa-color-neutral-95: var(--wa-color-red-95);
    --wa-color-neutral-90: var(--wa-color-red-90);
    --wa-color-neutral-80: var(--wa-color-red-80);
    --wa-color-neutral-70: var(--wa-color-red-70);
    --wa-color-neutral-60: var(--wa-color-red-60);
    --wa-color-neutral-50: var(--wa-color-red-50);
    --wa-color-neutral-40: var(--wa-color-red-40);
    --wa-color-neutral-30: var(--wa-color-red-30);
    --wa-color-neutral-20: var(--wa-color-red-20);
    --wa-color-neutral-10: var(--wa-color-red-10);
    --wa-color-neutral-05: var(--wa-color-red-05);
    --wa-color-neutral: var(--wa-color-red);
    --wa-color-neutral-on: var(--wa-color-red-on);
  }

  .wa-neutral-orange {
    --wa-color-neutral-95: var(--wa-color-orange-95);
    --wa-color-neutral-90: var(--wa-color-orange-90);
    --wa-color-neutral-80: var(--wa-color-orange-80);
    --wa-color-neutral-70: var(--wa-color-orange-70);
    --wa-color-neutral-60: var(--wa-color-orange-60);
    --wa-color-neutral-50: var(--wa-color-orange-50);
    --wa-color-neutral-40: var(--wa-color-orange-40);
    --wa-color-neutral-30: var(--wa-color-orange-30);
    --wa-color-neutral-20: var(--wa-color-orange-20);
    --wa-color-neutral-10: var(--wa-color-orange-10);
    --wa-color-neutral-05: var(--wa-color-orange-05);
    --wa-color-neutral: var(--wa-color-orange);
    --wa-color-neutral-on: var(--wa-color-orange-on);
  }

  .wa-neutral-yellow {
    --wa-color-neutral-95: var(--wa-color-yellow-95);
    --wa-color-neutral-90: var(--wa-color-yellow-90);
    --wa-color-neutral-80: var(--wa-color-yellow-80);
    --wa-color-neutral-70: var(--wa-color-yellow-70);
    --wa-color-neutral-60: var(--wa-color-yellow-60);
    --wa-color-neutral-50: var(--wa-color-yellow-50);
    --wa-color-neutral-40: var(--wa-color-yellow-40);
    --wa-color-neutral-30: var(--wa-color-yellow-30);
    --wa-color-neutral-20: var(--wa-color-yellow-20);
    --wa-color-neutral-10: var(--wa-color-yellow-10);
    --wa-color-neutral-05: var(--wa-color-yellow-05);
    --wa-color-neutral: var(--wa-color-yellow);
    --wa-color-neutral-on: var(--wa-color-yellow-on);
  }

  .wa-neutral-green {
    --wa-color-neutral-95: var(--wa-color-green-95);
    --wa-color-neutral-90: var(--wa-color-green-90);
    --wa-color-neutral-80: var(--wa-color-green-80);
    --wa-color-neutral-70: var(--wa-color-green-70);
    --wa-color-neutral-60: var(--wa-color-green-60);
    --wa-color-neutral-50: var(--wa-color-green-50);
    --wa-color-neutral-40: var(--wa-color-green-40);
    --wa-color-neutral-30: var(--wa-color-green-30);
    --wa-color-neutral-20: var(--wa-color-green-20);
    --wa-color-neutral-10: var(--wa-color-green-10);
    --wa-color-neutral-05: var(--wa-color-green-05);
    --wa-color-neutral: var(--wa-color-green);
    --wa-color-neutral-on: var(--wa-color-green-on);
  }

  .wa-neutral-cyan {
    --wa-color-neutral-95: var(--wa-color-cyan-95);
    --wa-color-neutral-90: var(--wa-color-cyan-90);
    --wa-color-neutral-80: var(--wa-color-cyan-80);
    --wa-color-neutral-70: var(--wa-color-cyan-70);
    --wa-color-neutral-60: var(--wa-color-cyan-60);
    --wa-color-neutral-50: var(--wa-color-cyan-50);
    --wa-color-neutral-40: var(--wa-color-cyan-40);
    --wa-color-neutral-30: var(--wa-color-cyan-30);
    --wa-color-neutral-20: var(--wa-color-cyan-20);
    --wa-color-neutral-10: var(--wa-color-cyan-10);
    --wa-color-neutral-05: var(--wa-color-cyan-05);
    --wa-color-neutral: var(--wa-color-cyan);
    --wa-color-neutral-on: var(--wa-color-cyan-on);
  }

  .wa-neutral-blue {
    --wa-color-neutral-95: var(--wa-color-blue-95);
    --wa-color-neutral-90: var(--wa-color-blue-90);
    --wa-color-neutral-80: var(--wa-color-blue-80);
    --wa-color-neutral-70: var(--wa-color-blue-70);
    --wa-color-neutral-60: var(--wa-color-blue-60);
    --wa-color-neutral-50: var(--wa-color-blue-50);
    --wa-color-neutral-40: var(--wa-color-blue-40);
    --wa-color-neutral-30: var(--wa-color-blue-30);
    --wa-color-neutral-20: var(--wa-color-blue-20);
    --wa-color-neutral-10: var(--wa-color-blue-10);
    --wa-color-neutral-05: var(--wa-color-blue-05);
    --wa-color-neutral: var(--wa-color-blue);
    --wa-color-neutral-on: var(--wa-color-blue-on);
  }

  .wa-neutral-indigo {
    --wa-color-neutral-95: var(--wa-color-indigo-95);
    --wa-color-neutral-90: var(--wa-color-indigo-90);
    --wa-color-neutral-80: var(--wa-color-indigo-80);
    --wa-color-neutral-70: var(--wa-color-indigo-70);
    --wa-color-neutral-60: var(--wa-color-indigo-60);
    --wa-color-neutral-50: var(--wa-color-indigo-50);
    --wa-color-neutral-40: var(--wa-color-indigo-40);
    --wa-color-neutral-30: var(--wa-color-indigo-30);
    --wa-color-neutral-20: var(--wa-color-indigo-20);
    --wa-color-neutral-10: var(--wa-color-indigo-10);
    --wa-color-neutral-05: var(--wa-color-indigo-05);
    --wa-color-neutral: var(--wa-color-indigo);
    --wa-color-neutral-on: var(--wa-color-indigo-on);
  }

  .wa-neutral-purple {
    --wa-color-neutral-95: var(--wa-color-purple-95);
    --wa-color-neutral-90: var(--wa-color-purple-90);
    --wa-color-neutral-80: var(--wa-color-purple-80);
    --wa-color-neutral-70: var(--wa-color-purple-70);
    --wa-color-neutral-60: var(--wa-color-purple-60);
    --wa-color-neutral-50: var(--wa-color-purple-50);
    --wa-color-neutral-40: var(--wa-color-purple-40);
    --wa-color-neutral-30: var(--wa-color-purple-30);
    --wa-color-neutral-20: var(--wa-color-purple-20);
    --wa-color-neutral-10: var(--wa-color-purple-10);
    --wa-color-neutral-05: var(--wa-color-purple-05);
    --wa-color-neutral: var(--wa-color-purple);
    --wa-color-neutral-on: var(--wa-color-purple-on);
  }

  .wa-neutral-pink {
    --wa-color-neutral-95: var(--wa-color-pink-95);
    --wa-color-neutral-90: var(--wa-color-pink-90);
    --wa-color-neutral-80: var(--wa-color-pink-80);
    --wa-color-neutral-70: var(--wa-color-pink-70);
    --wa-color-neutral-60: var(--wa-color-pink-60);
    --wa-color-neutral-50: var(--wa-color-pink-50);
    --wa-color-neutral-40: var(--wa-color-pink-40);
    --wa-color-neutral-30: var(--wa-color-pink-30);
    --wa-color-neutral-20: var(--wa-color-pink-20);
    --wa-color-neutral-10: var(--wa-color-pink-10);
    --wa-color-neutral-05: var(--wa-color-pink-05);
    --wa-color-neutral: var(--wa-color-pink);
    --wa-color-neutral-on: var(--wa-color-pink-on);
  }
}

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-success-green {
    --wa-color-success-95: var(--wa-color-green-95);
    --wa-color-success-90: var(--wa-color-green-90);
    --wa-color-success-80: var(--wa-color-green-80);
    --wa-color-success-70: var(--wa-color-green-70);
    --wa-color-success-60: var(--wa-color-green-60);
    --wa-color-success-50: var(--wa-color-green-50);
    --wa-color-success-40: var(--wa-color-green-40);
    --wa-color-success-30: var(--wa-color-green-30);
    --wa-color-success-20: var(--wa-color-green-20);
    --wa-color-success-10: var(--wa-color-green-10);
    --wa-color-success-05: var(--wa-color-green-05);
    --wa-color-success: var(--wa-color-green);
    --wa-color-success-on: var(--wa-color-green-on);
  }

  .wa-success-red {
    --wa-color-success-95: var(--wa-color-red-95);
    --wa-color-success-90: var(--wa-color-red-90);
    --wa-color-success-80: var(--wa-color-red-80);
    --wa-color-success-70: var(--wa-color-red-70);
    --wa-color-success-60: var(--wa-color-red-60);
    --wa-color-success-50: var(--wa-color-red-50);
    --wa-color-success-40: var(--wa-color-red-40);
    --wa-color-success-30: var(--wa-color-red-30);
    --wa-color-success-20: var(--wa-color-red-20);
    --wa-color-success-10: var(--wa-color-red-10);
    --wa-color-success-05: var(--wa-color-red-05);
    --wa-color-success: var(--wa-color-red);
    --wa-color-success-on: var(--wa-color-red-on);
  }

  .wa-success-orange {
    --wa-color-success-95: var(--wa-color-orange-95);
    --wa-color-success-90: var(--wa-color-orange-90);
    --wa-color-success-80: var(--wa-color-orange-80);
    --wa-color-success-70: var(--wa-color-orange-70);
    --wa-color-success-60: var(--wa-color-orange-60);
    --wa-color-success-50: var(--wa-color-orange-50);
    --wa-color-success-40: var(--wa-color-orange-40);
    --wa-color-success-30: var(--wa-color-orange-30);
    --wa-color-success-20: var(--wa-color-orange-20);
    --wa-color-success-10: var(--wa-color-orange-10);
    --wa-color-success-05: var(--wa-color-orange-05);
    --wa-color-success: var(--wa-color-orange);
    --wa-color-success-on: var(--wa-color-orange-on);
  }

  .wa-success-yellow {
    --wa-color-success-95: var(--wa-color-yellow-95);
    --wa-color-success-90: var(--wa-color-yellow-90);
    --wa-color-success-80: var(--wa-color-yellow-80);
    --wa-color-success-70: var(--wa-color-yellow-70);
    --wa-color-success-60: var(--wa-color-yellow-60);
    --wa-color-success-50: var(--wa-color-yellow-50);
    --wa-color-success-40: var(--wa-color-yellow-40);
    --wa-color-success-30: var(--wa-color-yellow-30);
    --wa-color-success-20: var(--wa-color-yellow-20);
    --wa-color-success-10: var(--wa-color-yellow-10);
    --wa-color-success-05: var(--wa-color-yellow-05);
    --wa-color-success: var(--wa-color-yellow);
    --wa-color-success-on: var(--wa-color-yellow-on);
  }

  .wa-success-cyan {
    --wa-color-success-95: var(--wa-color-cyan-95);
    --wa-color-success-90: var(--wa-color-cyan-90);
    --wa-color-success-80: var(--wa-color-cyan-80);
    --wa-color-success-70: var(--wa-color-cyan-70);
    --wa-color-success-60: var(--wa-color-cyan-60);
    --wa-color-success-50: var(--wa-color-cyan-50);
    --wa-color-success-40: var(--wa-color-cyan-40);
    --wa-color-success-30: var(--wa-color-cyan-30);
    --wa-color-success-20: var(--wa-color-cyan-20);
    --wa-color-success-10: var(--wa-color-cyan-10);
    --wa-color-success-05: var(--wa-color-cyan-05);
    --wa-color-success: var(--wa-color-cyan);
    --wa-color-success-on: var(--wa-color-cyan-on);
  }

  .wa-success-blue {
    --wa-color-success-95: var(--wa-color-blue-95);
    --wa-color-success-90: var(--wa-color-blue-90);
    --wa-color-success-80: var(--wa-color-blue-80);
    --wa-color-success-70: var(--wa-color-blue-70);
    --wa-color-success-60: var(--wa-color-blue-60);
    --wa-color-success-50: var(--wa-color-blue-50);
    --wa-color-success-40: var(--wa-color-blue-40);
    --wa-color-success-30: var(--wa-color-blue-30);
    --wa-color-success-20: var(--wa-color-blue-20);
    --wa-color-success-10: var(--wa-color-blue-10);
    --wa-color-success-05: var(--wa-color-blue-05);
    --wa-color-success: var(--wa-color-blue);
    --wa-color-success-on: var(--wa-color-blue-on);
  }

  .wa-success-indigo {
    --wa-color-success-95: var(--wa-color-indigo-95);
    --wa-color-success-90: var(--wa-color-indigo-90);
    --wa-color-success-80: var(--wa-color-indigo-80);
    --wa-color-success-70: var(--wa-color-indigo-70);
    --wa-color-success-60: var(--wa-color-indigo-60);
    --wa-color-success-50: var(--wa-color-indigo-50);
    --wa-color-success-40: var(--wa-color-indigo-40);
    --wa-color-success-30: var(--wa-color-indigo-30);
    --wa-color-success-20: var(--wa-color-indigo-20);
    --wa-color-success-10: var(--wa-color-indigo-10);
    --wa-color-success-05: var(--wa-color-indigo-05);
    --wa-color-success: var(--wa-color-indigo);
    --wa-color-success-on: var(--wa-color-indigo-on);
  }

  .wa-success-purple {
    --wa-color-success-95: var(--wa-color-purple-95);
    --wa-color-success-90: var(--wa-color-purple-90);
    --wa-color-success-80: var(--wa-color-purple-80);
    --wa-color-success-70: var(--wa-color-purple-70);
    --wa-color-success-60: var(--wa-color-purple-60);
    --wa-color-success-50: var(--wa-color-purple-50);
    --wa-color-success-40: var(--wa-color-purple-40);
    --wa-color-success-30: var(--wa-color-purple-30);
    --wa-color-success-20: var(--wa-color-purple-20);
    --wa-color-success-10: var(--wa-color-purple-10);
    --wa-color-success-05: var(--wa-color-purple-05);
    --wa-color-success: var(--wa-color-purple);
    --wa-color-success-on: var(--wa-color-purple-on);
  }

  .wa-success-pink {
    --wa-color-success-95: var(--wa-color-pink-95);
    --wa-color-success-90: var(--wa-color-pink-90);
    --wa-color-success-80: var(--wa-color-pink-80);
    --wa-color-success-70: var(--wa-color-pink-70);
    --wa-color-success-60: var(--wa-color-pink-60);
    --wa-color-success-50: var(--wa-color-pink-50);
    --wa-color-success-40: var(--wa-color-pink-40);
    --wa-color-success-30: var(--wa-color-pink-30);
    --wa-color-success-20: var(--wa-color-pink-20);
    --wa-color-success-10: var(--wa-color-pink-10);
    --wa-color-success-05: var(--wa-color-pink-05);
    --wa-color-success: var(--wa-color-pink);
    --wa-color-success-on: var(--wa-color-pink-on);
  }

  .wa-success-gray {
    --wa-color-success-95: var(--wa-color-gray-95);
    --wa-color-success-90: var(--wa-color-gray-90);
    --wa-color-success-80: var(--wa-color-gray-80);
    --wa-color-success-70: var(--wa-color-gray-70);
    --wa-color-success-60: var(--wa-color-gray-60);
    --wa-color-success-50: var(--wa-color-gray-50);
    --wa-color-success-40: var(--wa-color-gray-40);
    --wa-color-success-30: var(--wa-color-gray-30);
    --wa-color-success-20: var(--wa-color-gray-20);
    --wa-color-success-10: var(--wa-color-gray-10);
    --wa-color-success-05: var(--wa-color-gray-05);
    --wa-color-success: var(--wa-color-gray);
    --wa-color-success-on: var(--wa-color-gray-on);
  }
}

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-warning-yellow {
    --wa-color-warning-95: var(--wa-color-yellow-95);
    --wa-color-warning-90: var(--wa-color-yellow-90);
    --wa-color-warning-80: var(--wa-color-yellow-80);
    --wa-color-warning-70: var(--wa-color-yellow-70);
    --wa-color-warning-60: var(--wa-color-yellow-60);
    --wa-color-warning-50: var(--wa-color-yellow-50);
    --wa-color-warning-40: var(--wa-color-yellow-40);
    --wa-color-warning-30: var(--wa-color-yellow-30);
    --wa-color-warning-20: var(--wa-color-yellow-20);
    --wa-color-warning-10: var(--wa-color-yellow-10);
    --wa-color-warning-05: var(--wa-color-yellow-05);
    --wa-color-warning: var(--wa-color-yellow);
    --wa-color-warning-on: var(--wa-color-yellow-on);
  }

  .wa-warning-red {
    --wa-color-warning-95: var(--wa-color-red-95);
    --wa-color-warning-90: var(--wa-color-red-90);
    --wa-color-warning-80: var(--wa-color-red-80);
    --wa-color-warning-70: var(--wa-color-red-70);
    --wa-color-warning-60: var(--wa-color-red-60);
    --wa-color-warning-50: var(--wa-color-red-50);
    --wa-color-warning-40: var(--wa-color-red-40);
    --wa-color-warning-30: var(--wa-color-red-30);
    --wa-color-warning-20: var(--wa-color-red-20);
    --wa-color-warning-10: var(--wa-color-red-10);
    --wa-color-warning-05: var(--wa-color-red-05);
    --wa-color-warning: var(--wa-color-red);
    --wa-color-warning-on: var(--wa-color-red-on);
  }

  .wa-warning-orange {
    --wa-color-warning-95: var(--wa-color-orange-95);
    --wa-color-warning-90: var(--wa-color-orange-90);
    --wa-color-warning-80: var(--wa-color-orange-80);
    --wa-color-warning-70: var(--wa-color-orange-70);
    --wa-color-warning-60: var(--wa-color-orange-60);
    --wa-color-warning-50: var(--wa-color-orange-50);
    --wa-color-warning-40: var(--wa-color-orange-40);
    --wa-color-warning-30: var(--wa-color-orange-30);
    --wa-color-warning-20: var(--wa-color-orange-20);
    --wa-color-warning-10: var(--wa-color-orange-10);
    --wa-color-warning-05: var(--wa-color-orange-05);
    --wa-color-warning: var(--wa-color-orange);
    --wa-color-warning-on: var(--wa-color-orange-on);
  }

  .wa-warning-green {
    --wa-color-warning-95: var(--wa-color-green-95);
    --wa-color-warning-90: var(--wa-color-green-90);
    --wa-color-warning-80: var(--wa-color-green-80);
    --wa-color-warning-70: var(--wa-color-green-70);
    --wa-color-warning-60: var(--wa-color-green-60);
    --wa-color-warning-50: var(--wa-color-green-50);
    --wa-color-warning-40: var(--wa-color-green-40);
    --wa-color-warning-30: var(--wa-color-green-30);
    --wa-color-warning-20: var(--wa-color-green-20);
    --wa-color-warning-10: var(--wa-color-green-10);
    --wa-color-warning-05: var(--wa-color-green-05);
    --wa-color-warning: var(--wa-color-green);
    --wa-color-warning-on: var(--wa-color-green-on);
  }

  .wa-warning-cyan {
    --wa-color-warning-95: var(--wa-color-cyan-95);
    --wa-color-warning-90: var(--wa-color-cyan-90);
    --wa-color-warning-80: var(--wa-color-cyan-80);
    --wa-color-warning-70: var(--wa-color-cyan-70);
    --wa-color-warning-60: var(--wa-color-cyan-60);
    --wa-color-warning-50: var(--wa-color-cyan-50);
    --wa-color-warning-40: var(--wa-color-cyan-40);
    --wa-color-warning-30: var(--wa-color-cyan-30);
    --wa-color-warning-20: var(--wa-color-cyan-20);
    --wa-color-warning-10: var(--wa-color-cyan-10);
    --wa-color-warning-05: var(--wa-color-cyan-05);
    --wa-color-warning: var(--wa-color-cyan);
    --wa-color-warning-on: var(--wa-color-cyan-on);
  }

  .wa-warning-blue {
    --wa-color-warning-95: var(--wa-color-blue-95);
    --wa-color-warning-90: var(--wa-color-blue-90);
    --wa-color-warning-80: var(--wa-color-blue-80);
    --wa-color-warning-70: var(--wa-color-blue-70);
    --wa-color-warning-60: var(--wa-color-blue-60);
    --wa-color-warning-50: var(--wa-color-blue-50);
    --wa-color-warning-40: var(--wa-color-blue-40);
    --wa-color-warning-30: var(--wa-color-blue-30);
    --wa-color-warning-20: var(--wa-color-blue-20);
    --wa-color-warning-10: var(--wa-color-blue-10);
    --wa-color-warning-05: var(--wa-color-blue-05);
    --wa-color-warning: var(--wa-color-blue);
    --wa-color-warning-on: var(--wa-color-blue-on);
  }

  .wa-warning-indigo {
    --wa-color-warning-95: var(--wa-color-indigo-95);
    --wa-color-warning-90: var(--wa-color-indigo-90);
    --wa-color-warning-80: var(--wa-color-indigo-80);
    --wa-color-warning-70: var(--wa-color-indigo-70);
    --wa-color-warning-60: var(--wa-color-indigo-60);
    --wa-color-warning-50: var(--wa-color-indigo-50);
    --wa-color-warning-40: var(--wa-color-indigo-40);
    --wa-color-warning-30: var(--wa-color-indigo-30);
    --wa-color-warning-20: var(--wa-color-indigo-20);
    --wa-color-warning-10: var(--wa-color-indigo-10);
    --wa-color-warning-05: var(--wa-color-indigo-05);
    --wa-color-warning: var(--wa-color-indigo);
    --wa-color-warning-on: var(--wa-color-indigo-on);
  }

  .wa-warning-purple {
    --wa-color-warning-95: var(--wa-color-purple-95);
    --wa-color-warning-90: var(--wa-color-purple-90);
    --wa-color-warning-80: var(--wa-color-purple-80);
    --wa-color-warning-70: var(--wa-color-purple-70);
    --wa-color-warning-60: var(--wa-color-purple-60);
    --wa-color-warning-50: var(--wa-color-purple-50);
    --wa-color-warning-40: var(--wa-color-purple-40);
    --wa-color-warning-30: var(--wa-color-purple-30);
    --wa-color-warning-20: var(--wa-color-purple-20);
    --wa-color-warning-10: var(--wa-color-purple-10);
    --wa-color-warning-05: var(--wa-color-purple-05);
    --wa-color-warning: var(--wa-color-purple);
    --wa-color-warning-on: var(--wa-color-purple-on);
  }

  .wa-warning-pink {
    --wa-color-warning-95: var(--wa-color-pink-95);
    --wa-color-warning-90: var(--wa-color-pink-90);
    --wa-color-warning-80: var(--wa-color-pink-80);
    --wa-color-warning-70: var(--wa-color-pink-70);
    --wa-color-warning-60: var(--wa-color-pink-60);
    --wa-color-warning-50: var(--wa-color-pink-50);
    --wa-color-warning-40: var(--wa-color-pink-40);
    --wa-color-warning-30: var(--wa-color-pink-30);
    --wa-color-warning-20: var(--wa-color-pink-20);
    --wa-color-warning-10: var(--wa-color-pink-10);
    --wa-color-warning-05: var(--wa-color-pink-05);
    --wa-color-warning: var(--wa-color-pink);
    --wa-color-warning-on: var(--wa-color-pink-on);
  }

  .wa-warning-gray {
    --wa-color-warning-95: var(--wa-color-gray-95);
    --wa-color-warning-90: var(--wa-color-gray-90);
    --wa-color-warning-80: var(--wa-color-gray-80);
    --wa-color-warning-70: var(--wa-color-gray-70);
    --wa-color-warning-60: var(--wa-color-gray-60);
    --wa-color-warning-50: var(--wa-color-gray-50);
    --wa-color-warning-40: var(--wa-color-gray-40);
    --wa-color-warning-30: var(--wa-color-gray-30);
    --wa-color-warning-20: var(--wa-color-gray-20);
    --wa-color-warning-10: var(--wa-color-gray-10);
    --wa-color-warning-05: var(--wa-color-gray-05);
    --wa-color-warning: var(--wa-color-gray);
    --wa-color-warning-on: var(--wa-color-gray-on);
  }
}

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-danger-red {
    --wa-color-danger-95: var(--wa-color-red-95);
    --wa-color-danger-90: var(--wa-color-red-90);
    --wa-color-danger-80: var(--wa-color-red-80);
    --wa-color-danger-70: var(--wa-color-red-70);
    --wa-color-danger-60: var(--wa-color-red-60);
    --wa-color-danger-50: var(--wa-color-red-50);
    --wa-color-danger-40: var(--wa-color-red-40);
    --wa-color-danger-30: var(--wa-color-red-30);
    --wa-color-danger-20: var(--wa-color-red-20);
    --wa-color-danger-10: var(--wa-color-red-10);
    --wa-color-danger-05: var(--wa-color-red-05);
    --wa-color-danger: var(--wa-color-red);
    --wa-color-danger-on: var(--wa-color-red-on);
  }

  .wa-danger-orange {
    --wa-color-danger-95: var(--wa-color-orange-95);
    --wa-color-danger-90: var(--wa-color-orange-90);
    --wa-color-danger-80: var(--wa-color-orange-80);
    --wa-color-danger-70: var(--wa-color-orange-70);
    --wa-color-danger-60: var(--wa-color-orange-60);
    --wa-color-danger-50: var(--wa-color-orange-50);
    --wa-color-danger-40: var(--wa-color-orange-40);
    --wa-color-danger-30: var(--wa-color-orange-30);
    --wa-color-danger-20: var(--wa-color-orange-20);
    --wa-color-danger-10: var(--wa-color-orange-10);
    --wa-color-danger-05: var(--wa-color-orange-05);
    --wa-color-danger: var(--wa-color-orange);
    --wa-color-danger-on: var(--wa-color-orange-on);
  }

  .wa-danger-yellow {
    --wa-color-danger-95: var(--wa-color-yellow-95);
    --wa-color-danger-90: var(--wa-color-yellow-90);
    --wa-color-danger-80: var(--wa-color-yellow-80);
    --wa-color-danger-70: var(--wa-color-yellow-70);
    --wa-color-danger-60: var(--wa-color-yellow-60);
    --wa-color-danger-50: var(--wa-color-yellow-50);
    --wa-color-danger-40: var(--wa-color-yellow-40);
    --wa-color-danger-30: var(--wa-color-yellow-30);
    --wa-color-danger-20: var(--wa-color-yellow-20);
    --wa-color-danger-10: var(--wa-color-yellow-10);
    --wa-color-danger-05: var(--wa-color-yellow-05);
    --wa-color-danger: var(--wa-color-yellow);
    --wa-color-danger-on: var(--wa-color-yellow-on);
  }

  .wa-danger-green {
    --wa-color-danger-95: var(--wa-color-green-95);
    --wa-color-danger-90: var(--wa-color-green-90);
    --wa-color-danger-80: var(--wa-color-green-80);
    --wa-color-danger-70: var(--wa-color-green-70);
    --wa-color-danger-60: var(--wa-color-green-60);
    --wa-color-danger-50: var(--wa-color-green-50);
    --wa-color-danger-40: var(--wa-color-green-40);
    --wa-color-danger-30: var(--wa-color-green-30);
    --wa-color-danger-20: var(--wa-color-green-20);
    --wa-color-danger-10: var(--wa-color-green-10);
    --wa-color-danger-05: var(--wa-color-green-05);
    --wa-color-danger: var(--wa-color-green);
    --wa-color-danger-on: var(--wa-color-green-on);
  }

  .wa-danger-cyan {
    --wa-color-danger-95: var(--wa-color-cyan-95);
    --wa-color-danger-90: var(--wa-color-cyan-90);
    --wa-color-danger-80: var(--wa-color-cyan-80);
    --wa-color-danger-70: var(--wa-color-cyan-70);
    --wa-color-danger-60: var(--wa-color-cyan-60);
    --wa-color-danger-50: var(--wa-color-cyan-50);
    --wa-color-danger-40: var(--wa-color-cyan-40);
    --wa-color-danger-30: var(--wa-color-cyan-30);
    --wa-color-danger-20: var(--wa-color-cyan-20);
    --wa-color-danger-10: var(--wa-color-cyan-10);
    --wa-color-danger-05: var(--wa-color-cyan-05);
    --wa-color-danger: var(--wa-color-cyan);
    --wa-color-danger-on: var(--wa-color-cyan-on);
  }

  .wa-danger-blue {
    --wa-color-danger-95: var(--wa-color-blue-95);
    --wa-color-danger-90: var(--wa-color-blue-90);
    --wa-color-danger-80: var(--wa-color-blue-80);
    --wa-color-danger-70: var(--wa-color-blue-70);
    --wa-color-danger-60: var(--wa-color-blue-60);
    --wa-color-danger-50: var(--wa-color-blue-50);
    --wa-color-danger-40: var(--wa-color-blue-40);
    --wa-color-danger-30: var(--wa-color-blue-30);
    --wa-color-danger-20: var(--wa-color-blue-20);
    --wa-color-danger-10: var(--wa-color-blue-10);
    --wa-color-danger-05: var(--wa-color-blue-05);
    --wa-color-danger: var(--wa-color-blue);
    --wa-color-danger-on: var(--wa-color-blue-on);
  }

  .wa-danger-indigo {
    --wa-color-danger-95: var(--wa-color-indigo-95);
    --wa-color-danger-90: var(--wa-color-indigo-90);
    --wa-color-danger-80: var(--wa-color-indigo-80);
    --wa-color-danger-70: var(--wa-color-indigo-70);
    --wa-color-danger-60: var(--wa-color-indigo-60);
    --wa-color-danger-50: var(--wa-color-indigo-50);
    --wa-color-danger-40: var(--wa-color-indigo-40);
    --wa-color-danger-30: var(--wa-color-indigo-30);
    --wa-color-danger-20: var(--wa-color-indigo-20);
    --wa-color-danger-10: var(--wa-color-indigo-10);
    --wa-color-danger-05: var(--wa-color-indigo-05);
    --wa-color-danger: var(--wa-color-indigo);
    --wa-color-danger-on: var(--wa-color-indigo-on);
  }

  .wa-danger-purple {
    --wa-color-danger-95: var(--wa-color-purple-95);
    --wa-color-danger-90: var(--wa-color-purple-90);
    --wa-color-danger-80: var(--wa-color-purple-80);
    --wa-color-danger-70: var(--wa-color-purple-70);
    --wa-color-danger-60: var(--wa-color-purple-60);
    --wa-color-danger-50: var(--wa-color-purple-50);
    --wa-color-danger-40: var(--wa-color-purple-40);
    --wa-color-danger-30: var(--wa-color-purple-30);
    --wa-color-danger-20: var(--wa-color-purple-20);
    --wa-color-danger-10: var(--wa-color-purple-10);
    --wa-color-danger-05: var(--wa-color-purple-05);
    --wa-color-danger: var(--wa-color-purple);
    --wa-color-danger-on: var(--wa-color-purple-on);
  }

  .wa-danger-pink {
    --wa-color-danger-95: var(--wa-color-pink-95);
    --wa-color-danger-90: var(--wa-color-pink-90);
    --wa-color-danger-80: var(--wa-color-pink-80);
    --wa-color-danger-70: var(--wa-color-pink-70);
    --wa-color-danger-60: var(--wa-color-pink-60);
    --wa-color-danger-50: var(--wa-color-pink-50);
    --wa-color-danger-40: var(--wa-color-pink-40);
    --wa-color-danger-30: var(--wa-color-pink-30);
    --wa-color-danger-20: var(--wa-color-pink-20);
    --wa-color-danger-10: var(--wa-color-pink-10);
    --wa-color-danger-05: var(--wa-color-pink-05);
    --wa-color-danger: var(--wa-color-pink);
    --wa-color-danger-on: var(--wa-color-pink-on);
  }

  .wa-danger-gray {
    --wa-color-danger-95: var(--wa-color-gray-95);
    --wa-color-danger-90: var(--wa-color-gray-90);
    --wa-color-danger-80: var(--wa-color-gray-80);
    --wa-color-danger-70: var(--wa-color-gray-70);
    --wa-color-danger-60: var(--wa-color-gray-60);
    --wa-color-danger-50: var(--wa-color-gray-50);
    --wa-color-danger-40: var(--wa-color-gray-40);
    --wa-color-danger-30: var(--wa-color-gray-30);
    --wa-color-danger-20: var(--wa-color-gray-20);
    --wa-color-danger-10: var(--wa-color-gray-10);
    --wa-color-danger-05: var(--wa-color-gray-05);
    --wa-color-danger: var(--wa-color-gray);
    --wa-color-danger-on: var(--wa-color-gray-on);
  }
}



/* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
:where(:root),
:host {
  /**
    * Conditional tokens to check if the key color is >= 60
    * Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
    * The numeric value of the key is isolated as --wa-color-{hue}-key
    * If key < 60, the result is 0%
    * If key >= 60, the result is 100%
    * Intended to be used in the color-mix() functions below
    */

  --wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
  --wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
  --wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
  --wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
  --wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
  --wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
  --wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
  --wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
  --wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
  --wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));

  /**
    * Tokens to set text color with appropriate WCAG 2.1 contrast
    * If key < 60, the text color is white
    * If key >= 60, the text color is {hue}-10
    */

  --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
  --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
  --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
  --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
  --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
  --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
  --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
  --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
  --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
  --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
}



@layer wa-color-palette {
  .wa-palette-bright {
    --wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
    --wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
    --wa-color-red-80: #ffb7b7 /* oklch(84.652% 0.084 18.964) */;
    --wa-color-red-70: #ff8e90 /* oklch(76.896% 0.13677 19.629) */;
    --wa-color-red-60: #f76563 /* oklch(69.077% 0.18003 23.786) */;
    --wa-color-red-50: #d04442 /* oklch(58.513% 0.17687 25.152) */;
    --wa-color-red-40: #a52c2b /* oklch(48.271% 0.15774 25.737) */;
    --wa-color-red-30: #861d1c /* oklch(40.905% 0.1406 26.45) */;
    --wa-color-red-20: #680d0e /* oklch(33.449% 0.1237 26.777) */;
    --wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
    --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
    --wa-color-red: var(--wa-color-red-60);
    --wa-color-red-key: 60;

    --wa-color-orange-95: oklch(96.406% 0.04001 53.476);
    --wa-color-orange-90: oklch(92.395% 0.07984 53.06);
    --wa-color-orange-80: oklch(84.389% 0.12224 47.981);
    --wa-color-orange-70: oklch(76.55% 0.16521 42.512);
    --wa-color-orange-60: #e97331 /* oklch(68.357% 0.16507 46.504) */;
    --wa-color-orange-50: #bf5712 /* oklch(57.834% 0.15197 47.326) */;
    --wa-color-orange-40: oklch(47.62% 0.132 48.51);
    --wa-color-orange-30: oklch(40.38% 0.11554 50);
    --wa-color-orange-20: oklch(32.94% 0.09927 52);
    --wa-color-orange-10: oklch(24.083% 0.07743 54);
    --wa-color-orange-05: oklch(18.817% 0.06098 55);
    --wa-color-orange: var(--wa-color-orange-70);
    --wa-color-orange-key: 70;

    --wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */;
    --wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */;
    --wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */;
    --wa-color-yellow-70: #f29c00 /* oklch(76.127% 0.16443 70.48) */;
    --wa-color-yellow-60: #d08402 /* oklch(67.671% 0.14665 69.482) */;
    --wa-color-yellow-50: #a56804 /* oklch(57.027% 0.1228 69.447) */;
    --wa-color-yellow-40: #7d4f04 /* oklch(46.866% 0.09949 70.54) */;
    --wa-color-yellow-30: #643d03 /* oklch(39.73% 0.08492 68.821) */;
    --wa-color-yellow-20: #4a2c01 /* oklch(32.318% 0.06941 69.3) */;
    --wa-color-yellow-10: #2d1901 /* oklch(23.512% 0.04963 68.776) */;
    --wa-color-yellow-05: #1d0f00 /* oklch(18.392% 0.03939 71.947) */;
    --wa-color-yellow: var(--wa-color-yellow-80);
    --wa-color-yellow-key: 80;

    --wa-color-green-95: #dbfaf0 /* oklch(96.006% 0.03481 174.15) */;
    --wa-color-green-90: #b1f3de /* oklch(91.419% 0.0722 172.95) */;
    --wa-color-green-80: #3fe2b2 /* oklch(81.853% 0.14907 168.5) */;
    --wa-color-green-70: #29c596 /* oklch(73.487% 0.14194 166.89) */;
    --wa-color-green-60: #19a87d /* oklch(65.107% 0.13007 166.01) */;
    --wa-color-green-50: #0a8560 /* oklch(54.742% 0.11293 164.94) */;
    --wa-color-green-40: #036648 /* oklch(45.239% 0.09474 164.51) */;
    --wa-color-green-30: #015038 /* oklch(38.229% 0.08003 164.89) */;
    --wa-color-green-20: #003a28 /* oklch(30.885% 0.06454 165.46) */;
    --wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
    --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
    --wa-color-green: var(--wa-color-green-80);
    --wa-color-green-key: 80;

    --wa-color-cyan-95: #dbf9fc /* oklch(96.146% 0.03142 203.97) */;
    --wa-color-cyan-90: #a6f2fa /* oklch(91.438% 0.07533 204.25) */;
    --wa-color-cyan-80: #51dcee /* oklch(82.7% 0.11986 207.31) */;
    --wa-color-cyan-70: #2fbfd5 /* oklch(74.137% 0.11878 210.5) */;
    --wa-color-cyan-60: #1fa3b9 /* oklch(65.917% 0.10909 212.4) */;
    --wa-color-cyan-50: #118095 /* oklch(55.343% 0.09433 215.17) */;
    --wa-color-cyan-40: #056273 /* oklch(45.726% 0.0795 215.29) */;
    --wa-color-cyan-30: #014c5a /* oklch(38.37% 0.06757 215.53) */;
    --wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
    --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
    --wa-color-cyan-05: #00151a /* oklch(17.995% 0.03161 213.85) */;
    --wa-color-cyan: var(--wa-color-cyan-80);
    --wa-color-cyan-key: 80;

    --wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
    --wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
    --wa-color-blue-80: #93d0ff /* oklch(83.315% 0.09108 242.3) */;
    --wa-color-blue-70: #5bb5fe /* oklch(74.85% 0.13654 245.56) */;
    --wa-color-blue-60: #4a99e4 /* oklch(66.699% 0.13625 249.55) */;
    --wa-color-blue-50: #3178c0 /* oklch(56.346% 0.13216 251.63) */;
    --wa-color-blue-40: #235a96 /* oklch(46.273% 0.11344 253.15) */;
    --wa-color-blue-30: #194777 /* oklch(39.272% 0.09544 252.36) */;
    --wa-color-blue-20: #103359 /* oklch(31.787% 0.07886 253.15) */;
    --wa-color-blue-10: #061e38 /* oklch(23.254% 0.05851 252.8) */;
    --wa-color-blue-05: #031225 /* oklch(18.051% 0.04534 253.25) */;
    --wa-color-blue: var(--wa-color-blue-70);
    --wa-color-blue-key: 70;

    --wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
    --wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
    --wa-color-indigo-80: #bac8ff /* oklch(84.108% 0.07867 273.5) */;
    --wa-color-indigo-70: #95abff /* oklch(75.79% 0.12361 271.99) */;
    --wa-color-indigo-60: #728dff /* oklch(67.658% 0.17035 271.19) */;
    --wa-color-indigo-50: #516ed8 /* oklch(57.136% 0.16529 269.13) */;
    --wa-color-indigo-40: #3851b3 /* oklch(47.273% 0.15818 268.81) */;
    --wa-color-indigo-30: #2a3f8f /* oklch(39.968% 0.13476 268.52) */;
    --wa-color-indigo-20: #1e2d6c /* oklch(32.512% 0.11114 269.2) */;
    --wa-color-indigo-10: #101a45 /* oklch(23.864% 0.08185 269.36) */;
    --wa-color-indigo-05: #080f2f /* oklch(18.545% 0.06467 269.54) */;
    --wa-color-indigo: var(--wa-color-indigo-60);
    --wa-color-indigo-key: 60;

    --wa-color-purple-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
    --wa-color-purple-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
    --wa-color-purple-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
    --wa-color-purple-70: #b8a0fe /* oklch(76.293% 0.13384 294.76) */;
    --wa-color-purple-60: #9e83f2 /* oklch(68.278% 0.16015 292.86) */;
    --wa-color-purple-50: #7b65cb /* oklch(57.62% 0.15206 290.77) */;
    --wa-color-purple-40: #5c4ba7 /* oklch(47.824% 0.14213 288.32) */;
    --wa-color-purple-30: #493590 /* oklch(40.487% 0.14337 288.41) */;
    --wa-color-purple-20: #371f7a /* oklch(33.309% 0.1443 287.97) */;
    --wa-color-purple-10: #250161 /* oklch(25.284% 0.14353 287.73) */;
    --wa-color-purple-05: #150047 /* oklch(19.858% 0.11707 283.68) */;
    --wa-color-purple: var(--wa-color-purple-60);
    --wa-color-purple-key: 60;

    --wa-color-pink-95: #f8effc /* oklch(96.287% 0.01965 315.67) */;
    --wa-color-pink-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
    --wa-color-pink-80: #edb8fa /* oklch(85.148% 0.10592 319.58) */;
    --wa-color-pink-70: #e38ef8 /* oklch(77.16% 0.16992 319.48) */;
    --wa-color-pink-60: #c576db /* oklch(68.843% 0.16426 318.62) */;
    --wa-color-pink-50: #a258b5 /* oklch(58.347% 0.15642 319.13) */;
    --wa-color-pink-40: #823b94 /* oklch(48.331% 0.15299 319.08) */;
    --wa-color-pink-30: #6d247e /* oklch(41.177% 0.1547 319.42) */;
    --wa-color-pink-20: #580a68 /* oklch(34.103% 0.15338 319.6) */;
    --wa-color-pink-10: #370047 /* oklch(24.984% 0.12212 316.48) */;
    --wa-color-pink-05: #240033 /* oklch(19.65% 0.09758 313.47) */;
    --wa-color-pink: var(--wa-color-pink-70);
    --wa-color-pink-key: 70;

    --wa-color-gray-95: #f1f2f5 /* oklch(96.124% 0.00414 271.37) */;
    --wa-color-gray-90: #e4e6eb /* oklch(92.484% 0.00709 268.54) */;
    --wa-color-gray-80: #c5cad5 /* oklch(83.843% 0.01625 266.26) */;
    --wa-color-gray-70: #a8afbf /* oklch(75.353% 0.02424 266.85) */;
    --wa-color-gray-60: #8c95aa /* oklch(66.963% 0.0328 267.07) */;
    --wa-color-gray-50: #6a7591 /* oklch(56.369% 0.04546 268.14) */;
    --wa-color-gray-40: #4a597a /* oklch(46.526% 0.05715 265.38) */;
    --wa-color-gray-30: #384565 /* oklch(39.365% 0.05713 266.86) */;
    --wa-color-gray-20: #26314f /* oklch(31.829% 0.05593 267.86) */;
    --wa-color-gray-10: #131c38 /* oklch(23.46% 0.0555 268.48) */;
    --wa-color-gray-05: #0a1127 /* oklch(18.485% 0.04617 268.36) */;
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;
  }
}




/* refused third-party import: https://fonts.bunny.net/css?family=azeret-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|biorhyme:200,300,400,500,600,700,800|fredoka:300,400,500,600,700|nunito:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap */

@layer wa-theme {
  .wa-theme-playful,
  .wa-theme-playful.wa-light,
  .wa-theme-playful .wa-light,
  .wa-theme-playful.wa-dark .wa-invert,
  .wa-theme-playful .wa-dark .wa-invert,
  .wa-light .wa-theme-playful,
  .wa-dark .wa-theme-playful.wa-invert,
  .wa-dark .wa-theme-playful .wa-invert {
    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: white;
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: var(--wa-color-neutral-95);
    --wa-color-surface-border: var(--wa-color-neutral-80);

    --wa-color-text-normal: var(--wa-color-neutral-10);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    --wa-color-text-link: var(--wa-color-brand-40);

    --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
      transparent
    );

    --wa-color-focus: var(--wa-color-brand-60);

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
    --wa-color-mix-active: oklch(from currentColor 0.1 c h) 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
    --wa-color-brand-fill-normal: var(--wa-color-brand-80);
    --wa-color-brand-fill-loud: var(--wa-color-brand);
    --wa-color-brand-border-quiet: var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-70);
    --wa-color-brand-border-loud: var(--wa-color-brand-50);
    --wa-color-brand-on-quiet: var(--wa-color-brand-30);
    --wa-color-brand-on-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-loud: var(--wa-color-brand-on);

    --wa-color-success-fill-quiet: var(--wa-color-success-90);
    --wa-color-success-fill-normal: var(--wa-color-success-80);
    --wa-color-success-fill-loud: var(--wa-color-success);
    --wa-color-success-border-quiet: var(--wa-color-success-90);
    --wa-color-success-border-normal: var(--wa-color-success-70);
    --wa-color-success-border-loud: var(--wa-color-success-50);
    --wa-color-success-on-quiet: var(--wa-color-success-30);
    --wa-color-success-on-normal: var(--wa-color-success-30);
    --wa-color-success-on-loud: var(--wa-color-success-on);

    --wa-color-warning-fill-quiet: var(--wa-color-warning-90);
    --wa-color-warning-fill-normal: var(--wa-color-warning-80);
    --wa-color-warning-fill-loud: var(--wa-color-warning);
    --wa-color-warning-border-quiet: var(--wa-color-warning-90);
    --wa-color-warning-border-normal: var(--wa-color-warning-70);
    --wa-color-warning-border-loud: var(--wa-color-warning-50);
    --wa-color-warning-on-quiet: var(--wa-color-warning-30);
    --wa-color-warning-on-normal: var(--wa-color-warning-30);
    --wa-color-warning-on-loud: var(--wa-color-warning-on);

    --wa-color-danger-fill-quiet: var(--wa-color-danger-90);
    --wa-color-danger-fill-normal: var(--wa-color-danger-80);
    --wa-color-danger-fill-loud: var(--wa-color-danger);
    --wa-color-danger-border-quiet: var(--wa-color-danger-90);
    --wa-color-danger-border-normal: var(--wa-color-danger-70);
    --wa-color-danger-border-loud: var(--wa-color-danger-50);
    --wa-color-danger-on-quiet: var(--wa-color-danger-30);
    --wa-color-danger-on-normal: var(--wa-color-danger-30);
    --wa-color-danger-on-loud: var(--wa-color-danger-on);

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-70);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-95);
    /* #endregion */
  }

  .wa-theme-playful.wa-dark,
  .wa-theme-playful .wa-dark,
  .wa-theme-playful.wa-invert,
  .wa-theme-playful .wa-invert,
  .wa-dark .wa-theme-playful,
  .wa-light .wa-theme-playful.wa-invert,
  .wa-light .wa-theme-playful .wa-invert {
    /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-20);
    --wa-color-surface-default: var(--wa-color-neutral-10);
    --wa-color-surface-lowered: var(--wa-color-neutral-05);
    --wa-color-surface-border: var(--wa-color-neutral-20);

    --wa-color-text-normal: var(--wa-color-neutral-95);
    --wa-color-text-quiet: var(--wa-color-neutral-60);
    --wa-color-text-link: var(--wa-color-brand-80);

    --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
      transparent
    );

    --wa-color-focus: var(--wa-color-brand-60);

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
    --wa-color-mix-active: oklch(from currentColor 0.1 c h) 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
    --wa-color-brand-fill-normal: var(--wa-color-brand-20);
    --wa-color-brand-fill-loud: var(--wa-color-brand);
    --wa-color-brand-border-quiet: var(--wa-color-brand-20);
    --wa-color-brand-border-normal: var(--wa-color-brand-30);
    --wa-color-brand-border-loud: var(--wa-color-brand-40);
    --wa-color-brand-on-quiet: var(--wa-color-brand-60);
    --wa-color-brand-on-normal: var(--wa-color-brand-70);
    --wa-color-brand-on-loud: var(--wa-color-brand-on);

    --wa-color-success-fill-quiet: var(--wa-color-success-10);
    --wa-color-success-fill-normal: var(--wa-color-success-20);
    --wa-color-success-fill-loud: var(--wa-color-success);
    --wa-color-success-border-quiet: var(--wa-color-success-20);
    --wa-color-success-border-normal: var(--wa-color-success-30);
    --wa-color-success-border-loud: var(--wa-color-success-40);
    --wa-color-success-on-quiet: var(--wa-color-success-60);
    --wa-color-success-on-normal: var(--wa-color-success-70);
    --wa-color-success-on-loud: var(--wa-color-success-on);

    --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
    --wa-color-warning-fill-normal: var(--wa-color-warning-20);
    --wa-color-warning-fill-loud: var(--wa-color-warning);
    --wa-color-warning-border-quiet: var(--wa-color-warning-20);
    --wa-color-warning-border-normal: var(--wa-color-warning-30);
    --wa-color-warning-border-loud: var(--wa-color-warning-40);
    --wa-color-warning-on-quiet: var(--wa-color-warning-60);
    --wa-color-warning-on-normal: var(--wa-color-warning-70);
    --wa-color-warning-on-loud: var(--wa-color-warning-on);

    --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
    --wa-color-danger-fill-normal: var(--wa-color-danger-20);
    --wa-color-danger-fill-loud: var(--wa-color-danger);
    --wa-color-danger-border-quiet: var(--wa-color-danger-20);
    --wa-color-danger-border-normal: var(--wa-color-danger-30);
    --wa-color-danger-border-loud: var(--wa-color-danger-40);
    --wa-color-danger-on-quiet: var(--wa-color-danger-60);
    --wa-color-danger-on-normal: var(--wa-color-danger-70);
    --wa-color-danger-on-loud: var(--wa-color-danger-on);

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
    /* #endregion */
  }

  .wa-theme-playful,
  .wa-theme-playful.wa-light,
  .wa-theme-playful .wa-light,
  .wa-theme-playful.wa-dark,
  .wa-theme-playful .wa-dark,
  .wa-theme-playful.wa-invert,
  .wa-theme-playful .wa-invert {
    font-family: var(--wa-font-family-body);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body: 'Nunito', sans-serif;
    --wa-font-family-heading: 'Fredoka', sans-serif;
    --wa-font-family-code: 'Azeret Mono', monospace;
    --wa-font-family-longform: ui-serif, serif;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --wa-font-size-scale: 1.125;
    --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 11px */
    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 12.375px */
    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 13.5px */
    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 15.75px */
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 18px */
    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 22.5px */
    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 28.125px */
    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 36px */
    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 46.125px */
    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 58.5px */
    --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px); /* 74px */

    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --wa-font-weight-light: 400;
    --wa-font-weight-normal: 500;
    --wa-font-weight-semibold: 600;
    --wa-font-weight-bold: 700;

    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-semibold);
    --wa-font-weight-code: var(--wa-font-weight-light);
    --wa-font-weight-longform: var(--wa-font-weight-light);
    --wa-font-weight-action: var(--wa-font-weight-semibold);

    --wa-line-height-condensed: 1.35;
    --wa-line-height-normal: 1.8;
    --wa-line-height-expanded: 2.25;

    --wa-link-decoration-default: underline color-mix(in oklab, currentColor 60%, transparent) dashed;
    --wa-link-decoration-hover: underline;
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-space-scale: 1;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 80px */

    --wa-content-spacing: var(--wa-space-l);
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-style: solid;

    --wa-border-width-scale: 3;
    --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
    --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
    --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-radius-scale: 2;
    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);

    --wa-border-radius-pill: 9999px;
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.25rem; /* 4px */
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
    --wa-focus-ring-offset: 0.0625rem; /* 1px */
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-shadow-offset-x-scale: 0;
    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);

    --wa-shadow-offset-y-scale: 2;
    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);

    --wa-shadow-blur-scale: 3;
    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);

    --wa-shadow-spread-scale: -0.5;
    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
      var(--wa-shadow-spread-s) var(--wa-color-shadow);
    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
      var(--wa-shadow-spread-m) var(--wa-color-shadow);
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
      var(--wa-shadow-spread-l) var(--wa-color-shadow);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --wa-form-control-background-color: var(--wa-color-surface-default);

    --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: min(var(--wa-border-radius-pill), calc(var(--wa-form-control-height) * 0.6));

    --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
    --wa-form-control-label-line-height: var(--wa-line-height-condensed);

    --wa-form-control-value-color: var(--wa-color-text-normal);
    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
    --wa-form-control-value-line-height: var(--wa-line-height-condensed);

    --wa-form-control-hint-color: var(--wa-color-text-quiet);
    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
    --wa-form-control-hint-line-height: var(--wa-line-height-normal);

    --wa-form-control-placeholder-color: var(--wa-color-gray-50);

    --wa-form-control-required-content: '*';
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: 0.1em;

    --wa-form-control-padding-block: 0.75em;
    --wa-form-control-padding-inline: 1em;
    --wa-form-control-height: round(
      calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
      1px
    );
    --wa-form-control-toggle-size: round(1.25em, 1px);

    /* Buttons */
    --wa-button-transform-hover: scale(1.02);
    --wa-button-transform-active: scale(0.98);

    /* Panels */
    --wa-panel-border-style: var(--wa-border-style);
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: var(--wa-border-radius-l);

    /* Tooltips */
    --wa-tooltip-arrow-size: 0.375rem;

    --wa-tooltip-background-color: var(--wa-color-text-normal);

    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
    --wa-tooltip-border-style: var(--wa-border-style);
    --wa-tooltip-border-width: var(--wa-border-width-s);
    --wa-tooltip-border-radius: var(--wa-border-radius-s);

    --wa-tooltip-content-color: var(--wa-color-surface-default);
    --wa-tooltip-font-size: var(--wa-font-size-s);
    --wa-tooltip-line-height: var(--wa-line-height-normal);
    /* #endregion */
  }
}

@layer wa-theme-dimension {
  .wa-theme-playful {
    button,
    input:is([type='button'], [type='reset'], [type='submit']),
    wa-button,
    a.wa-button {
      &:not([appearance='outlined'], [appearance='plain'], .wa-outlined:not(.wa-filled), .wa-plain) {
        --gradient-top: oklab(from var(--wa-color-fill-loud) calc(l - 0.1) a b);
        --gradient-middle: var(--wa-color-fill-loud);
        --gradient-bottom: oklab(from var(--wa-color-fill-loud) calc(l + 0.1) a b);
        --glow-outer: 0px 0.375em 1em
          color-mix(in oklab, oklab(from var(--wa-color-fill-loud) calc(l + 0.1) a b), transparent 70%);
        --shadow-lower: inset 0 -0.125em 0.5em oklab(from var(--wa-color-fill-loud) calc(l - 0.2) a b);
        --shadow-upper: inset 0 0.125em 0.5em oklab(from var(--wa-color-fill-loud) calc(l + 0.4) a b);

        &:where(:not(wa-button)),
        &::part(base) {
          background: linear-gradient(
            180deg,
            var(--gradient-top) 0%,
            var(--gradient-middle) 51.88%,
            var(--gradient-bottom) 100%
          );
          box-shadow: var(--glow-outer), var(--shadow-lower), var(--shadow-upper);
          text-shadow: 0 0.125em 0.125em oklab(from var(--wa-color-fill-loud) calc(l - 0.1) a b);
        }

        &:is([appearance='filled'], [appearance='filled-outlined'], .wa-filled) {
          --gradient-top: oklab(from var(--wa-color-fill-normal) calc(l - 0.05) a b);
          --gradient-middle: var(--wa-color-fill-normal);
          --gradient-bottom: oklab(from var(--wa-color-fill-normal) calc(l + 0.15) a b);
          --glow-outer: 0px 0.375em 1em
            color-mix(in oklab, oklab(from var(--wa-color-fill-normal) calc(l + 0.1) a b), transparent 70%);
          --shadow-lower: inset 0 -0.125em 0.5em oklab(from var(--wa-color-fill-normal) calc(l - 0.1) a b);
          --shadow-upper: inset 0 0.125em 0.5em oklab(from var(--wa-color-fill-normal) calc(l + 0.5) a b);

          &:where(:not(wa-button)),
          &::part(base) {
            text-shadow: 0 0.125em 0.125em oklab(from var(--wa-color-fill-normal) calc(l - 0.1) a b);
          }
        }

        &:not([appearance='outlined'], [appearance='filled-outlined'], .wa-outlined) {
          &:where(:not(wa-button)),
          &::part(base) {
            padding-inline: calc(var(--wa-form-control-padding-inline) + var(--wa-form-control-border-width));
            border-width: 0px;
          }
        }

        &:not([disabled]) {
          @media (hover: hover) {
            &:hover {
              &:where(:not(wa-button)),
              &::part(base) {
                background: linear-gradient(
                  180deg,
                  var(--gradient-bottom) 0%,
                  var(--gradient-middle) 51.88%,
                  var(--gradient-top) 100%
                );
              }
            }
          }

          &:active {
            &:where(:not(wa-button)),
            &::part(base) {
              background: linear-gradient(
                180deg,
                color-mix(in oklab, var(--gradient-top), var(--wa-color-mix-active)) 0%,
                color-mix(in oklab, var(--gradient-middle), var(--wa-color-mix-active)) 51.88%,
                color-mix(in oklab, var(--gradient-bottom), var(--wa-color-mix-active)) 100%
              );
              box-shadow:
                0 0 transparent,
                var(--shadow-lower),
                var(--shadow-upper);
            }
          }
        }
      }
    }

    input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
    wa-checkbox:is(:state(checked), :state(indeterminate))::part(control),
    wa-tree-item:is(:state(selected), :state(indeterminate))::part(checkbox__control),
    wa-radio:state(checked)::part(control),
    wa-switch:state(checked)::part(control) {
      --gradient-top: oklab(from var(--wa-form-control-activated-color) calc(l - 0.1) a b);
      --gradient-middle: var(--wa-form-control-activated-color);
      --gradient-bottom: oklab(from var(--wa-form-control-activated-color) calc(l + 0.1) a b);

      background: linear-gradient(
        180deg,
        var(--gradient-top) 0%,
        var(--gradient-middle) 51.88%,
        var(--gradient-bottom) 100%
      );
    }

    wa-progress-bar,
    wa-slider {
      --shadow-lower: inset 0 -0.125em 0.5em oklab(from var(--wa-form-control-activated-color) calc(l - 0.2) a b);
      --shadow-upper: inset 0 0.125em 0.5em oklab(from var(--wa-form-control-activated-color) calc(l + 0.4) a b);
    }

    wa-slider::part(thumb) {
      box-shadow: var(--wa-shadow-s), var(--shadow-lower), var(--shadow-upper);
    }

    wa-progress-bar::part(indicator) {
      box-shadow: var(--shadow-lower), var(--shadow-upper);
    }

    wa-switch[checked]::part(thumb) {
      box-shadow: var(--wa-shadow-s);
    }
  }
}

@layer wa-theme-overrides {
  .wa-theme-playful {
    wa-badge,
    wa-button,
    button,
    input:where([type='button'], [type='reset'], [type='submit']),
    a.wa-button {
      &:where(:not(wa-button)),
      &::part(base) {
        font-weight: var(--wa-font-weight-bold);
      }
    }

    wa-badge,
    wa-tag,
    wa-select::part(tag),
    wa-combobox::part(tag) {
      border-width: calc(var(--wa-border-width-s) * 0.67);
    }
    wa-select::part(tag),
    wa-combobox::part(tag) {
      border-radius: var(--wa-form-control-border-radius);
    }

    wa-radio,
    input[type='radio'] {
      --checked-icon-color: var(--wa-color-surface-default);
      --checked-icon-scale: 0.4;

      &:checked,
      &:state(checked)::part(control) {
        background-color: var(--wa-form-control-activated-color);
      }
    }

    wa-rating {
      --symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
    }
  }
}

/*
 * The page's own styles, on top of the Playful theme.
 *
 * Everything here is layout and rhythm. Colours come from the palette through
 * `--wa-color-*`, so the two brand decisions live in the class list on `<html>`
 * rather than in hex codes down here.
 *
 * `<wa-page>` owns the page grid, the sticky header and the mobile drawer.
 * Nothing below reimplements any of that, and the only rules keyed on the
 * viewport are the two `view` ones the header-bar recipe asks for.
 */
@layer wa-site {
  /* `<wa-page>` injects this itself through `:has()`. Written out as well,
     because that is the documented recommendation and it covers a browser
     without `:has()`. */
  html,
  body {
    min-height: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    background: var(--wa-color-surface-default);
  }

  /* The one measurement the site keeps for itself. Web Awesome has no token for
     a content column, and the bar, the page and the footer all have to agree on
     one. */
  wa-page {
    --pp-column: 62rem;
  }

  /*
   * The signed-in pages take more of the screen than the marketing ones.
   *
   * 62rem is a measure for reading, which is what the landing page is. A queue
   * is a diagram of two lists with an arrow between them, and on a wide screen
   * that measure left half the window empty either side while the names inside
   * the box were being clipped to fit a column a third of the width available.
   * Widening the box is what stops the clipping, and it costs nothing, because
   * the longest line of prose on these pages is a hero tagline that holds its
   * own width.
   *
   * The bar and the footer draw from the same value, so all three line up.
   */
  wa-page.pp-app {
    --pp-column: 84rem;
  }

  /*
   * The filled brand button, and the two colours it draws from.
   *
   * `variant="brand"` takes its ground from `--wa-color-brand-fill-loud` and
   * its text from `--wa-color-brand-on-loud`, so these are the two tokens to
   * set. Nothing here reaches into the button.
   *
   * Playful leaves the text to the palette, which answers with green-10 on
   * Bright's green-80. That is near-black on mint, and it reads as unpainted
   * rather than as a decision. White is what it should be.
   *
   * White on green-80 is 1.65:1 and on green-60 is 3.03:1, both under the 4.5:1
   * WCAG AA wants for text this size. The ground is green-50, where white
   * reaches 4.63:1.
   *
   * `white` rather than a token, which is what Web Awesome's own Mellow,
   * Shoelace and Brutalist themes use for this. The text has to stay white in
   * both schemes, and every surface token flips.
   */
  :root {
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-on-loud: white;
  }

  /*
   * No glow, on a button or on its label.
   *
   * Playful decorates a filled button twice over. `--glow-outer` is a coloured
   * halo outside the shape, alongside the two inset shadows that give the shape
   * its depth. A halo wants room around the element to fall on, and a button
   * inside a card, a callout or a bordered panel has none, so it meets the
   * container's edge and stops in a square. Overriding the custom property
   * keeps the inset pair, and Playful's own `:active` state already writes
   * `0 0 transparent` here. This is the pressed button's outer shadow on every
   * state.
   *
   * `text-shadow` is the same idea applied to the label, and it is the one that
   * shows. At a label's size a shadow one eighth of an em below the letters
   * lands inside the counters, which is a blur rather than depth. It reaches
   * further than the buttons, because a chip is a button whose whole job is to
   * read as a line of text.
   */
  button,
  input:is([type="button"], [type="reset"], [type="submit"]),
  wa-button,
  a.wa-button {
    --glow-outer: 0 0 transparent;
    text-shadow: none;
  }

  /*
   * The same again inside a component's shadow root.
   *
   * Playful writes its `text-shadow` on `::part(base)` as well as on the host,
   * and a rule on the host does not reach through. `<wa-button>` is the one
   * that matters, and it is the element the theme names.
   */
  wa-button::part(base) {
    text-shadow: none;
  }

  /*
   * The mark that stands for a source, a queue or a social account.
   *
   * Duotone, so Font Awesome draws two paths of `currentColor` at full and 40%
   * strength. Nothing here sets a colour. The icon takes the one the text
   * beside it has, which is what makes it work on the bar, on a heading and in
   * a card header without three rules.
   *
   * Sized from the font rather than in pixels, so it grows with the heading it
   * sits on and stays put next to a nav link.
   */
  .pp-concept-icon {
    font-size: 1em;
    flex: 0 0 auto;
  }

  /*
   * A nav link with its mark.
   *
   * `inline-flex` rather than leaving the icon inline, which sat it on the
   * baseline and left the label riding high next to it.
   */
  .pp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-xs);
  }

  /*
   * A heading with its mark, on the page and in a card header.
   *
   * The page titles are centred by `.pp-hero`, so this centres too and the
   * pair sits as one unit. `wa-gap-s` would do it on a cluster, but a heading
   * is one element and the gap belongs to it.
   */
  .pp-titled {
    display: flex;
    align-items: center;
    justify-content: inherit;
    gap: var(--wa-space-s);
  }

  /*
   * On a page title the mark is the quieter half of the pair.
   *
   * A `wa-heading-2xl` in the chilli red with a matching icon beside it reads
   * as two titles. The icon steps back to the body colour and the words keep
   * the emphasis.
   */
  .pp-title > .pp-concept-icon {
    color: var(--wa-color-text-normal);
    font-size: 0.8em;
  }

  /*
   * One queue, drawn as a box with its two ends inside it.
   *
   * The one structural representation PeriPost has, and the only place a
   * source, a queue and a social appear together. Four pages used to draw a
   * three-panel diagram apiece with the middle panel naming the queue, which
   * put the queue's name twice on any page that also had a heading for it.
   *
   * The name is on the box now, so what is inside is the two ends and the arrow
   * between them. Content arrives on the left and leaves on the right, and the
   * thing it passes through is the box.
   *
   * A `<wa-card>` draws it. The border, the radius, the ground, the shadow and
   * the rules under the header and over the footer all come from the theme's
   * panel tokens. The four rules this replaced reached for the same ones by
   * hand.
   *
   * The ground is the card's own `--wa-color-surface-default`, and `.pp-picks`
   * on a queue's own page is the same card on the same ground. The box drew
   * `--wa-color-surface-raised` before, and the dark palette gives that token
   * and `--wa-color-surface-border` one colour, so the rules the card draws
   * between its three bands had nothing to show against. On the page's own
   * ground they show, and `--wa-color-text-quiet` inside the box goes from
   * 4.28:1 to 5.59:1. What lifts the box off the page is the border and the
   * card's shadow.
   *
   * The footer band is taller than the strip it replaces, which set no padding
   * above itself because there was no rule up there to clear.
   */

  /*
   * The header, which is the whole way in on the list.
   *
   * A link wrapping a heading and a count, so the target is the width of the
   * box rather than the few words of the name. The rule below `:hover` is what
   * says it is a target at all, since a plain link inside a card reads as
   * decoration.
   *
   * The padding moves off the card's header band and onto the link. The band
   * pads its slot by default. That would inset the link and leave the hover
   * fill floating clear of three of the box's edges. Zero on the band and the
   * same measurement on the link keeps the whole header pressable.
   *
   * `overflow` goes with it. The link's fill is square where the band's top
   * corners are round, and the band already carries the card's inner radius.
   * On the band rather than on the card, so that nothing in the body or the
   * footer is clipped by a rule that is only about the header.
   */
  .pp-queue-box::part(header) {
    padding: 0;
    overflow: hidden;
  }

  .pp-queue-head {
    padding: var(--wa-space-m) var(--wa-space-l);
  }

  /*
   * A veil rather than a flat token, for the reason `.pp-chip` below gives.
   * The dark palette gives `--wa-color-neutral-fill-quiet` and the card's
   * ground one colour, so the flat token painted the ground onto the ground
   * and a hovered header did nothing.
   */
  a.pp-queue-open:hover,
  a.pp-queue-open:focus-visible {
    background-color: color-mix(
      in oklab,
      var(--wa-color-neutral-fill-loud) 10%,
      transparent
    );
  }

  /*
   * What says the band opens something, before anybody hovers it.
   *
   * The veil above answers a pointer already on the header, and a header that
   * only looks like a target once you have found it is a header nobody finds.
   * So the chevron sits on a quiet disc of its own at rest, which is the shape
   * Web Awesome gives a plain icon button and the shape everything else on
   * these pages that opens something already has.
   *
   * The name underlines on hover and on focus. Between the two, the band reads
   * as a link at rest and behaves as one under a pointer.
   */
  .pp-queue-go {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--wa-space-xl);
    block-size: var(--wa-space-xl);
    border-radius: var(--wa-border-radius-circle);
    background-color: color-mix(
      in oklab,
      var(--wa-color-neutral-fill-loud) 12%,
      transparent
    );
    transition: background-color var(--wa-transition-fast);
  }

  a.pp-queue-open:hover .pp-queue-go,
  a.pp-queue-open:focus-visible .pp-queue-go {
    background-color: color-mix(
      in oklab,
      var(--wa-color-neutral-fill-loud) 28%,
      transparent
    );
    color: var(--wa-color-text-normal);
  }

  a.pp-queue-open:hover .pp-queue-name,
  a.pp-queue-open:focus-visible .pp-queue-name {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /*
   * The focus ring turns inwards.
   *
   * The link is the header band edge to edge, and the band clips what leaves
   * it. A ring drawn outside the link is a ring drawn outside the band, and
   * every side of it went. A negative offset the width of the ring puts it
   * flush inside the same edge.
   */
  a.pp-queue-open:focus-visible {
    outline-offset: calc(-1 * var(--wa-focus-ring-width));
  }

  /* `wa-split` gives the first child `flex: 0 1 auto`, and the floor on that is
     min-content. This is what lets a long name shrink past it. */
  .pp-queue-name {
    min-inline-size: 0;
  }

  .pp-queue-aside {
    flex: 0 0 auto;
    color: var(--wa-color-text-quiet);
  }

  .pp-queue-standing {
    color: var(--wa-color-text-quiet);
    white-space: nowrap;
  }

  /*
   * The two ends and the arrow between them.
   *
   * `minmax(0, 1fr)` rather than `1fr`, which floors at min-content and lets a
   * column push the grid wider than its container. A chip holding a long name
   * has a wide min-content, and the right-hand column was hanging off the edge
   * of the card.
   */
  .pp-queue-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--wa-space-l);
  }

  .pp-col {
    min-inline-size: 0;
  }

  /*
   * A column heading.
   *
   * Nothing insets it. Everything in a column takes the column's own left edge,
   * so the heading, the border of every chip under it and the control at the
   * bottom all keep one line. That is the same edge the strip of loose chips
   * keeps, which is what makes a chip look like a chip in both places.
   */
  .pp-col-head {
    margin: 0;
    color: var(--wa-color-text-quiet);
  }

  .pp-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
  }

  .pp-col-empty {
    margin: 0;
    color: var(--wa-color-text-quiet);
    text-wrap: balance;
  }

  /*
   * One source or one social, wherever it appears.
   *
   * One line, and the name is clipped rather than wrapped. The mark this
   * replaced put a second line of detail under the name, which is the line the
   * screenshots showed cut mid-word. It also made every item two lines tall,
   * which is why nothing lined up with anything beside it.
   *
   * The whole detail is in `title` and the dialog behind the chip has it laid
   * out, so nothing is lost by clipping here.
   */
  .pp-chip {
    display: flex;
    align-items: center;
    min-inline-size: 0;
    /*
     * A filled block rather than a bordered one, and a step away from whatever
     * it sits on.
     *
     * A chip drawn as a border around a surface is the shape Web Awesome gives
     * a field somebody types in, and one of these sits directly above the
     * select that adds another. Side by side, an attached source and an empty
     * form control were the same object.
     *
     * The fill is a tenth of `--wa-color-neutral-fill-loud` over whatever is
     * behind it. That token flips with the colour scheme, so the veil lightens
     * a chip in the dark and darkens one in the light, which is a step away
     * from the ground either way. The flat tokens cannot do it. In the dark
     * scheme `neutral-fill-quiet` is the page's own background and
     * `neutral-fill-normal` is the queue box's, so a chip took the colour of
     * one of the two grounds it has to sit on and disappeared into it.
     */
    border: 0;
    border-radius: var(--wa-border-radius-m);
    background-color: color-mix(
      in oklab,
      var(--wa-color-neutral-fill-loud) 10%,
      transparent
    );
    /*
     * Web Awesome's own list styles indent an `<li>`, and a chip that took that
     * indent sat twenty pixels inside the column listing it, which is what put
     * every heading out of line with the things under it.
     */
    margin-inline: 0;
    padding-inline: 0 var(--wa-space-2xs);
  }

  /*
   * The chip's own body, which is the button that opens its dialog.
   *
   * Reset out of a native button rather than made from a `<wa-button>`. There
   * is one of these per source per queue, and the component would be a custom
   * element apiece for something that has to look like text.
   */
  .pp-chip-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    /* A `button` centres its own content. A chip reads as a label. */
    justify-content: flex-start;
    gap: var(--wa-space-xs);
    min-inline-size: 0;
    border: 0;
    background: none;
    /*
     * The playful theme gives every `button` a pair of inset shadows, which is
     * what makes its buttons look pressed into the page. On a chip it drew a
     * second box inside the first one. This is a chip that happens to be a
     * button, so the button's own decoration comes off.
     */
    box-shadow: none;
    font: inherit;
    font-size: var(--wa-font-size-m);
    color: inherit;
    text-align: start;
    /*
     * The theme's body line height is nearly twice the text, which is right in
     * a paragraph and makes a one-line chip forty pixels of air around twenty
     * of letters. Condensed is the token for text that is a label.
     */
    line-height: var(--wa-line-height-condensed);
    /*
     * A button is a form control, and a form control takes a fixed height from
     * a token rather than from what is inside it. That token is set for a field
     * somebody types in, so a chip carrying one line of text came out fifty
     * pixels tall. Everything that reads as a chip says its own height here.
     */
    block-size: auto;
    padding-block: var(--wa-space-xs);
    padding-inline: var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
  }

  button.pp-chip-body {
    cursor: pointer;
  }

  .pp-chip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
   * How many pages one source is giving the queue it sits on.
   *
   * Beside the chip rather than inside it. The body is a name clipped with an
   * ellipsis, so a number in there would be the first thing to go on a phone,
   * and it is the one part of a chip that has to survive the clip.
   *
   * Its own width, so a column of chips lines its numbers up whether they read
   * 3 or 410. Tabular figures, for the same reason.
   */
  .pp-chip-count {
    flex: 0 0 auto;
    min-inline-size: 2.5ch;
    text-align: end;
    padding-inline-end: var(--wa-space-2xs);
    color: var(--wa-color-text-quiet);
    font-variant-numeric: tabular-nums;
    line-height: var(--wa-line-height-condensed);
  }

  /*
   * What the settings on the form above it are keeping out of the queue.
   *
   * Inside the card and under the form, so it reads as a consequence of the
   * controls rather than as a fact about the list further down. It is the one
   * thing that form could not otherwise say, since every control on it narrows
   * and the list below shows only what survives.
   */
  .pp-picks-excluded {
    margin-block-start: var(--wa-space-s);
    color: var(--wa-color-text-quiet);
  }

  /* Quiet, because taking a thing off a queue is the rarer of the two. */
  .pp-chip-form {
    flex: 0 0 auto;
    display: flex;
  }

  /*
   * The cross that takes a thing off a queue.
   *
   * A native button, for the reason the chip's body is one. A `<wa-button>`
   * here is a form control, and a form control takes its height from a token
   * rather than from its contents. At the size a cross wants to be read at that
   * came to sixty-six pixels, which set the height of every chip on the page.
   */
  .pp-chip-off {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: auto;
    border: 0;
    background: none;
    box-shadow: none;
    padding: var(--wa-space-2xs);
    border-radius: var(--wa-border-radius-s);
    font-size: var(--wa-font-size-s);
    line-height: 1;
    color: var(--wa-color-text-quiet);
    cursor: pointer;
  }

  /* The chip's own veil again, a shade deeper. A flat token here has the same
     problem the chip has, and the box's ground is now the one it collides
     with. */
  .pp-chip-off:hover,
  .pp-chip-off:focus-visible {
    color: var(--wa-color-text-normal);
    background-color: color-mix(
      in oklab,
      var(--wa-color-neutral-fill-loud) 18%,
      transparent
    );
  }

  /*
   * The arrow between the two ends.
   *
   * Punctuation rather than content, and `aria-hidden` in the markup. It sits
   * against the column headings on a wide screen, which is where the eye
   * crosses from one to the other.
   */
  .pp-flow-arrow {
    align-self: center;
    font-size: var(--wa-font-size-l);
    color: var(--wa-color-text-quiet);
  }

  /*
   * One column, and the arrow turns to face down.
   *
   * The sequence is the thing worth keeping and the axis is what a phone cannot
   * give. `<wa-page>`'s own breakpoint is 768px and this matches it, so the box
   * folds at the same width the navigation does.
   */
  @media (width < 768px) {
    .pp-queue-flow {
      grid-template-columns: minmax(0, 1fr);
    }

    .pp-flow-arrow {
      transform: rotate(90deg);
    }
  }

  /* What the queue posts, on the list that will not change it. */
  .pp-picks-said {
    margin: 0;
  }

  /* Where a queue's shape is changed, said on the page that will not change it. */
  .pp-queue-change {
    margin: 0;
    color: var(--wa-color-text-quiet);
  }

  /* What the queue has waiting and what it has sent. */
  .pp-standing {
    margin: 0;
    gap: var(--wa-space-xs);
  }

  .pp-standing dd {
    margin: 0;
  }

  .pp-standing-count {
    font-weight: var(--wa-font-weight-semibold);
  }

  /*
   * The two colours the page sets on its own text.
   *
   * `--pp-chilli-text` is the fruit and not an action. The brand is green
   * (`wa-brand-green` on `<html>`), which is what every button, link and focus
   * ring draws from, and red is left to the logo, the wordmark and the title.
   * Red on a control would read as danger.
   *
   * A palette tint is a fixed colour, where a surface flips with the scheme, so
   * a tint chosen against white is the wrong contrast against the dark surface.
   * Both of these were: red-50 falls to 3.67:1 on the dark ground and green-40
   * to 2.40:1, which is unreadable.
   *
   * Web Awesome has no token for either of these on the page's own surface, so
   * they are the site's own, defined once per scheme and used below.
   */
  :root {
    --pp-chilli-text: var(--wa-color-red-50);
    --pp-accent-text: var(--wa-color-brand-40);
  }

  .wa-dark {
    --pp-chilli-text: var(--wa-color-red-70);
    --pp-accent-text: var(--wa-color-brand-60);
  }

  /*
   * The column, and the gutter around it.
   *
   * `<wa-page>` pads the main area itself. This replaces that padding rather
   * than adding to it, so the top and bottom rhythm is set in one place.
   */
  .pp-page {
    max-width: var(--pp-column);
    margin-inline: auto;
    padding: var(--wa-space-2xl) var(--wa-space-l) var(--wa-space-3xl);
    gap: var(--wa-space-3xl);
  }

  /*
   * The header bar.
   *
   * `<wa-page>` makes the header sticky and gives it no ground of its own, so
   * the background and the rule underneath go on the part. The contents line up
   * with the column below.
   */
  wa-page::part(header) {
    background: var(--wa-color-surface-default);
    border-block-end: var(--wa-border-width-s) solid
      var(--wa-color-surface-border);
  }

  .pp-bar-inner,
  .pp-footer-inner {
    max-width: var(--pp-column);
    margin-inline: auto;
    inline-size: 100%;
  }

  /*
   * The two halves of the header-bar recipe.
   *
   * The links are written twice, once in the bar and once for the drawer. These
   * hide each copy in the view it does not belong to. Without the second rule
   * the same links show in the bar and in a desktop sidebar at once, which is
   * the mistake the recipe exists to prevent. `--menu-width` stays at its `auto`
   * default, or the hidden sidebar leaves an empty column behind it.
   */
  wa-page[view="mobile"] .pp-bar-nav {
    display: none;
  }

  wa-page[view="desktop"]::part(navigation) {
    display: none;
  }

  .pp-wordmark {
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-bold);
    color: var(--pp-chilli-text);
    /* The logo and the name are one thing, so they line up on their centres and
       stay on one line however narrow the bar gets. */
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-xs);
    white-space: nowrap;
  }

  /*
   * The logo beside the name.
   *
   * The `width` and `height` attributes are in the markup as well, which is
   * what reserves the space before the file arrives. These hold the drawn size
   * to the text it sits against, so the pair scales together.
   */
  .pp-logo {
    inline-size: calc(var(--wa-font-size-l) * 1.6);
    block-size: auto;
  }

  /*
   * The title, what the page is for, and the row of things it starts.
   *
   * No padding under it. Every hero is the first child of `.pp-page`, which
   * already puts a gap between its children, so a padding here was a second
   * measurement doing the same job and the two of them together left a third of
   * a screen empty above the thing somebody came to look at.
   */
  .pp-hero {
    text-align: center;
    align-items: center;
    gap: var(--wa-space-m);
    padding-block: var(--wa-space-2xl) 0;
  }

  /*
   * The brand green as text, above a title in the chilli's red. Peri-peri is a
   * red pepper that starts green, and the two lines together are where that
   * reads as deliberate rather than as a stray accent.
   */
  .pp-eyebrow {
    color: var(--pp-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
  }

  .pp-title {
    margin: 0;
    color: var(--pp-chilli-text);
    text-wrap: balance;
  }

  /*
   * A site's own title is a link to the site.
   *
   * It keeps the heading's colour rather than taking the link one. The rule for
   * `a` below sits in this layer and outranks `wa-link-plain`, so the colour is
   * named here instead. The underline arrives on hover, which is enough to say
   * it leads somewhere on a word that size.
   */
  .pp-title a {
    color: inherit;
    text-decoration: none;
  }

  .pp-title a:hover,
  .pp-title a:focus-visible {
    text-decoration: underline;
  }

  .pp-tagline {
    margin: 0;
    max-width: 34rem;
    text-wrap: balance;
    color: var(--wa-color-text-quiet);
  }

  .pp-actions {
    justify-content: center;
    padding-block-start: var(--wa-space-s);
  }

  .pp-note {
    margin: 0;
    max-width: 28rem;
    text-wrap: balance;
    color: var(--wa-color-text-quiet);
  }

  .pp-how {
    gap: var(--wa-space-xl);
  }

  .pp-section-title {
    margin: 0;
    text-align: center;
  }

  .pp-steps {
    --min-column-size: 16rem;
    gap: var(--wa-space-l);
    align-items: stretch;
  }

  .pp-step {
    height: 100%;
  }

  .pp-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    /* The quiet fill and its own on-colour, which are a pair the theme flips
       together. The tints these replaced stayed a pale pink circle on the dark
       surface. */
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
  }

  .pp-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: currentColor;
  }

  /*
   * The footer, which sits below the fold rather than at the bottom of the
   * viewport. `<wa-page>` puts it in the last grid row and pads it already, so
   * this only sets the ground and the rhythm inside.
   */
  wa-page::part(footer) {
    background: var(--wa-color-surface-lowered);
    border-block-start: var(--wa-border-width-s) solid
      var(--wa-color-surface-border);
  }

  .pp-footer-inner {
    gap: var(--wa-space-l);
  }

  .pp-footer p {
    margin: 0;
    color: var(--wa-color-text-quiet);
  }

  .pp-colophon {
    gap: var(--wa-space-s);
  }

  /* Unobtrusive on purpose. The credit belongs in the footer and belongs to
     whoever goes looking for it, so it takes the quiet text colour and picks up
     an underline only when it is pointed at. */
  .pp-colophon a {
    color: inherit;
    text-decoration: none;
  }

  .pp-colophon a:hover,
  .pp-colophon a:focus-visible {
    text-decoration: underline;
  }

  a {
    color: var(--wa-color-text-link);
  }

  .pp-colophon-end {
    align-items: center;
  }

  /*
   * The colour scheme switch.
   *
   * Both icons are in the markup and this shows one. The moon while the page is
   * light and the sun while it is dark, so the icon is the scheme being offered
   * rather than the one already on.
   *
   * `:not(.wa-dark)` rather than `.wa-light`, because with scripting off
   * neither class is set and the page is light. That case has to show the moon
   * as well, even though the button it sits on will not do anything.
   */
  .wa-dark .pp-to-dark,
  html:not(.wa-dark) .pp-to-light {
    display: none;
  }

  /*
   * One size for both icons, whichever shell drew them. The site inlines an
   * SVG and takes `.pp-icon` with it; the signed-in pages render a `<wa-icon>`
   * that sizes itself from the font. This settles both on the same measure.
   */
  .pp-scheme .pp-icon,
  .pp-scheme wa-icon {
    inline-size: var(--wa-font-size-l);
    block-size: var(--wa-font-size-l);
  }

  /*
   * The connected accounts, and the button that adds one.
   *
   * Its own block rather than more of `.pp-hero`. That one centres its text for
   * a title and a line beneath it, and a list of rows reads badly centred, so
   * the heading keeps the hero and this starts at the leading edge.
   *
   * The width is the page's column, and this sets no measure of its own. A
   * narrower one left every card and list stopping short of the title over
   * them, with the two right edges disagreeing down the whole page.
   */
  .pp-connected {
    gap: var(--wa-space-l);
    text-align: start;
  }

  /*
   * The empty state, which is a sentence and takes the hero's measure rather
   * than the row's.
   */
  .pp-empty {
    margin: 0;
    color: var(--wa-color-text-quiet);
  }

  /* The rows of a search's proposals, which are read before being agreed to. */
  .pp-proposals {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--wa-space-s);
  }

  /*
   * A proposal is a row somebody reads before agreeing to it, so it is quieter
   * than a source. No border and no raised surface, because it sits inside a
   * card that already has both.
   */
  .pp-proposal {
    gap: var(--wa-space-2xs);
  }

  /*
   * A form on a page rather than in a dialog.
   *
   * A card, so that adding something reads as its own act rather than as more
   * of the list above it. `<wa-input>` carries the label, the focus ring and
   * the invalid state, so there is nothing left for this file to say about it.
   *
   * The measure is `.pp-connected` above, which the list shares. A card that
   * set its own width stopped short of the rows over it and left the two right
   * edges disagreeing.
   */

  /*
   * The block htmx replaces, holding the sources and what they found.
   *
   * A wrapper rather than more of `.pp-page`, so the two sections inside it
   * keep the page's own rhythm while one swap covers both.
   */
  .pp-managed {
    gap: var(--wa-space-3xl);
  }

  /*
   * What the sources found, as a list of things to read.
   *
   * Lighter than a source row on purpose. A source is a thing somebody manages
   * and each one carries buttons, and these are a list of pages with nothing to
   * do to them yet. So they get a rule between them rather than a border
   * around each.
   */
  /*
   * A rule rather than a `<wa-divider>` between rows.
   *
   * The divider is the component for a separator between two things. A list of
   * them wants one between each pair and none at either end, which the
   * `:first-child` rule below does in a line. Through the component it is a
   * divider in every row and a second rule hiding one of them.
   */
  .pp-candidate {
    padding-block: var(--wa-space-m);
    border-block-start: var(--wa-border-width-s) solid
      var(--wa-color-surface-border);
    /* The picture sits against the title rather than against the middle of a
       row whose height the summary decides. `wa-flank` centres by default. */
    align-items: start;
  }

  /*
   * The picture a page offers for sharing, at the shape X will draw it in.
   *
   * 1.91 to 1 is what a large summary card uses, and cropping to it here is
   * what makes this a preview rather than a decoration. The file is fetched
   * from whoever published the page, so a slow host costs a row its picture and
   * costs the rest of the page nothing.
   *
   * The ground underneath is there for the moment before it arrives, and for
   * the picture that is narrower than the space it was given.
   */
  .pp-candidate-image {
    /*
     * Its own width rather than `--flank-size`. A replaced element takes its
     * own width as its minimum, so a picture left to flex against the text
     * claimed the whole row and pushed the text onto a second line.
     */
    flex: 0 0 auto;
    inline-size: 8rem;
    aspect-ratio: 1.91 / 1;
    object-fit: cover;
    border-radius: var(--wa-border-radius-m);
    background-color: var(--wa-color-surface-raised);
  }

  .pp-candidate:first-child {
    border-block-start: none;
  }

  /*
   * The title keeps link colour and loses the rule under it.
   *
   * It is the only way to the article, so it reads as a link. A theme's
   * underline beneath every title in a list of ten is a page of rules, and
   * `--wa-link-decoration-default` is what `wa-link` draws it from. The hover
   * decoration is left alone, so pointing at one still underlines it.
   */
  .pp-candidate-title {
    --wa-link-decoration-default: none;
  }

  /* An address and a summary both run long, and neither may widen the page. */
  .pp-candidate-url,
  .pp-candidate-summary {
    overflow-wrap: anywhere;
  }

  /*
   * The card that says what this queue posts.
   *
   * A `<wa-card>`. The border, the radius and the ground are the theme's own
   * panel, and the queue box above it is the same card saying the same nothing
   * about any of them. `.pp-queue-box` carries why.
   *
   * One thing is set, and that is how much room the card takes inside. The
   * component keeps `--spacing` for it, since the default of `--wa-space-l` all
   * round is more than a row of small controls wants above and below.
   */
  .pp-picks {
    --spacing: var(--wa-space-m);
  }

  /*
   * The controls themselves, as many across as the window has room for.
   *
   * `--min-column-size` is narrower than the utility's default `20ch`, because
   * these are short controls rather than columns of prose, and several across
   * is what keeps them on one line on a wide screen.
   *
   * In `ch` because that is what the default is in, and because it is the unit
   * that tracks the type in the column. The card's own font is a step above the
   * root's, so a length in `rem` would be measured against something this card
   * does not use.
   */
  .pp-picks-fields {
    --min-column-size: 16ch;
  }

  /*
   * The words a queue looks for, as tags inside one field.
   *
   * The tags go in `<wa-input>`'s own `start` slot and are `<wa-tag>` at the
   * size `<wa-select multiple>` gives its own, so everything about how one
   * looks comes from the component. What is left to do here is let the field
   * grow down the page as tags are added.
   *
   * The wrapper is a row that never wraps, which is right for the icon the slot
   * was drawn for and wrong for a dozen tags. Wrapping it, and letting the
   * typing area keep a minimum width, is what puts the cursor on a line of its
   * own once the tags have filled the one above.
   *
   * The gap is set here because the slot was drawn to hold one icon and sets
   * none between several children. Without it the tags sit against each other
   * with no air, which is the one thing the Times control on the card below
   * does not do.
   *
   * `align-items` is set because wrapping changes what the wrapper does with a
   * line that is not full height. A tag is a pill and the cursor beside it is
   * bare text, and without this the word being typed sits above the tags it is
   * about to join.
   */
  .pp-words::part(input-wrapper) {
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: var(--wa-space-2xs);
    block-size: auto;
    min-block-size: var(--wa-form-control-height);
    padding-block: var(--wa-space-2xs);
  }

  .pp-words::part(input) {
    flex: 1 1 8ch;
    min-inline-size: 8ch;
  }

  /*
   * Both of these carry the tags out of the slot and into the wrapper's own
   * row, so one gap and one alignment govern the tags and the cursor together.
   */
  .pp-words::part(start),
  .pp-words-tags {
    display: contents;
  }

  /*
   * The card that says when this queue posts.
   *
   * The same card as `.pp-picks` above it and set the same way, since the two
   * are one setting split into the question of what and the question of when.
   */
  .pp-when {
    --spacing: var(--wa-space-m);
  }

  /*
   * When a failing run happened, under what it says went wrong.
   *
   * Its own line and quieter than the sentence over it. The callout holds one
   * run of text, so a block is what puts the instant underneath rather than
   * trailing off the end of the sentence. The caption class sets the size and
   * this sets the rest.
   */
  .pp-when-failed {
    display: block;
    color: var(--wa-color-text-quiet);
    margin-block-start: var(--wa-space-2xs);
  }

  /*
   * The card that says what this queue is called.
   *
   * The same card as the two under it, set the same way. The field takes the
   * width the row has spare, so the Save beside it sits where the Save on both
   * of those does rather than halfway across the card.
   */
  .pp-named {
    --spacing: var(--wa-space-m);
  }

  .pp-name-field {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  /*
   * The two controls that are chosen from, side by side where there is room.
   *
   * Wider than the selection card's columns, because one of these holds up to
   * three times as chips and a count, and the other holds a zone name. Both
   * grow past the sixteen characters four short controls want.
   */
  .pp-when-fields {
    --min-column-size: 22ch;
  }

  /*
   * What the queue will do, beside the button that changes it.
   *
   * `flex` because this is a sentence and not a label. `wa-split` wraps, and
   * three clauses about hours, a plan and the next slot are wide enough to push
   * the button onto a line of its own and along to the left. Sharing the row
   * lets the sentence wrap inside itself and leaves the button where every
   * other card on the page puts it.
   *
   * The basis is in `ch` for the reason `--min-column-size` above it is. It is
   * a width measured in the type that fills it. Twenty-eight is what makes the
   * sentence take a phone's whole width and push the button below it, where a
   * narrower basis left four lines of prose in a column beside a button.
   */
  .pp-when-said {
    flex: 1 1 28ch;
  }

  /*
   * The control that moves between pages of a list.
   *
   * The host is `display: contents`, so it holds no box of its own and takes
   * neither padding nor margin. The list is a stack and its gap is what sets
   * the space above this. Font size still inherits through, and scaling from
   * it is what the component's own docs say to do in place of a `size`.
   *
   * The summary reads "1–10 of 47" beside the numbers, and it takes the quiet
   * colour the rest of the page gives to text nobody has to read.
   */
  .pp-paging {
    font-size: var(--wa-font-size-s);
  }

  .pp-paging::part(summary) {
    color: var(--wa-color-text-quiet);
  }

  /*
   * A row becomes a card on a narrow screen.
   *
   * The only query in this file, and it is here because the layout changes
   * rather than scales. Eight rems of picture beside the text leaves under
   * three hundred pixels for a row's two buttons, which is a little less than
   * they need, so both wrap and every row costs two lines of chrome. Stacked,
   * the picture gets the width it was drawn for and the buttons sit together.
   *
   * The breakpoint is where the buttons stop fitting beside a picture. A row is
   * the viewport less the page gutters, so 32rem is the first width at which
   * both of them fit on one line.
   */
  @media (width < 32rem) {
    .pp-candidate {
      flex-direction: column;
      align-items: stretch;
    }

    /* `wa-flank` sizes its children across a row. Down a column those same
       declarations size them the wrong way, so both are reset. */
    .pp-candidate > * {
      flex: 0 0 auto;
      min-inline-size: 0;
    }

    .pp-candidate-image {
      inline-size: 100%;
    }
  }

  /* The line that says a source is being read, which is quiet on purpose. */
  .pp-refreshing {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    margin: 0;
    color: var(--wa-color-text-quiet);
  }

  /*
   * The spinner htmx reveals while a source is being read.
   *
   * `htmx-indicator` is htmx's own class and it ships the rule that hides one
   * until the request starts. All this adds is a size, so the row does not
   * change height when the spinner appears.
   */
  .pp-waiting {
    font-size: var(--wa-font-size-l);
    align-self: center;
  }

  /*
   * The three things the queues page starts, on one row above the queues.
   *
   * Three buttons of one shape. A disclosure, a disclosure and a button was
   * three heights and two shapes for three actions of equal standing, and the
   * two disclosures pushed the queues down the page when either was opened. The
   * forms are in dialogs now, which is where a source's and a social's own
   * detail already lives.
   *
   * Centred under a centred hero, so the row and the title share an axis.
   */
  .pp-make {
    justify-content: center;
    padding-block-start: var(--wa-space-s);
  }

  /*
   * One measurement, so no button is wider than its own words by accident.
   *
   * The three labels are different lengths and a pill takes the width of its
   * label. Left alone the row reads as three sizes of the same control, so
   * every one of them is held to the longest.
   */
  .pp-make-button {
    min-inline-size: 12rem;
  }

  /* A dialog is as wide as the dialog, so the form inside it fills it. */
  .pp-make-form {
    max-width: none;
  }

  /*
   * What a new queue joins, one end of it per group.
   *
   * The boxes scroll and the label stays. Somebody on the roomiest plan has
   * twenty sources, and twenty boxes down a dialog put the button that makes
   * the queue below the bottom of the window.
   */
  .pp-make-end::part(form-control-input) {
    max-block-size: 11rem;
    overflow-y: auto;
  }

  /*
   * Putting a source or a social on a queue, at the foot of its own column.
   *
   * One line at the size of the chips above it, so a column ends where its
   * chips end whether or not it has one. The select's label is read out rather
   * than shown, and the placeholder is what it says for itself.
   */
  .pp-queue-add {
    flex-wrap: nowrap;
    align-items: center;
    padding-block-start: var(--wa-space-2xs);
  }

  .pp-queue-pick {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  /*
   * The picker's label, read out and not shown.
   *
   * Taken out of the flow rather than hidden, because `display: none` on a
   * label takes it out of the accessibility tree as well and the control is
   * left with a placeholder for a name. Out of the flow it also takes the
   * required marker with it, which on a label with no visible words was a lone
   * asterisk sitting above the field like a stray bullet.
   */
  .pp-queue-pick::part(form-control-label) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The queue boxes, stacked with room between them so each reads as its own. */
  .pp-queues {
    gap: var(--wa-space-l);
  }

  /*
   * What somebody has that no queue is using.
   *
   * This replaced the onboarding steps. A checklist said the same three things
   * whether somebody was missing a source or had five sources and nothing
   * reading them. A source in no queue is the actual unfinished state, it is
   * visible here as the thing itself, and it stops being visible the moment a
   * queue reaches it.
   *
   * Dashed, because these are not attached to anything. Quiet, because an empty
   * strip is the finished state and a loud one would read as an error.
   */
  .pp-loose {
    padding: var(--wa-space-m) var(--wa-space-l);
    border: var(--wa-border-width-s) dashed var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
  }

  .pp-loose-head,
  .pp-loose-note {
    margin: 0;
    color: var(--wa-color-text-quiet);
  }

  .pp-loose-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-s);
  }

  /* Loose chips sit in a row, so each is only as wide as its own name. */
  .pp-chip-loose {
    flex: 0 1 auto;
    max-inline-size: 100%;
  }

  /*
   * A chip somebody can open, which is every one with a dialog behind it.
   *
   * The fill is quiet enough that a hover has to lift rather than tint, and the
   * whole chip lifts rather than the body inside it, because the body is the
   * part that is pressed and the cross beside it is a different target.
   */
  .pp-chip:has(button.pp-chip-body:hover),
  .pp-chip:has(button.pp-chip-body:focus-visible) {
    background-color: color-mix(
      in oklab,
      var(--wa-color-neutral-fill-loud) 18%,
      transparent
    );
  }

  /*
   * A heading slotted into a card.
   *
   * `<wa-card>` pads its own header, and an `<h2>` put in that slot brings the
   * document's heading margin with it. The two together left an inch of empty
   * card above the rule under the title.
   */
  wa-card > [slot="header"],
  wa-card > [slot="footer"] {
    margin: 0;
  }

  /* A source's or a social's own detail, which is what its page used to hold. */
  .pp-item-dialog {
    --width: 28rem;
  }

  /* Said to somebody with no queue yet, which is somebody with nothing running. */
  .pp-nothing {
    text-align: start;
  }

  /*
   * What went wrong, said above the thing it went wrong on.
   *
   * `role="alert"` in the markup is what a screen reader needs. The colour is
   * the palette's danger token rather than a red of its own.
   */
  .pp-problem {
    margin: 0;
    padding: var(--wa-space-m) var(--wa-space-l);
    border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal);
    border-radius: var(--wa-border-radius-l);
    background-color: var(--wa-color-danger-fill-quiet);
    color: var(--wa-color-danger-on-quiet);
  }

  /* Deleting a site sits apart from everything that adds to it. */
  .pp-danger {
    margin-block-start: var(--wa-space-2xl);
    align-items: start;
  }

  /*
   * The three tiers, side by side and the same height.
   *
   * `--min-column-size` is what `wa-grid` wraps on, the same lever
   * `.pp-steps` pulls on the landing page. Three cards need a wider column than
   * three sentences do, because a tier carries a price and a list.
   *
   * Both pages that show tiers use these. The grid and the card are shared and
   * what goes inside them differs, because the two pages answer different
   * questions. The billing card carries a button and keeps the price quiet
   * beside the tier's name, and the landing card carries no button and leads on
   * the price. What each tier allows is the same list on both, from
   * `src/site/plan-allowances.ts`.
   */
  .pp-plans {
    --min-column-size: 17rem;
    gap: var(--wa-space-l);
    align-items: stretch;
  }

  .pp-plan {
    height: 100%;
  }

  /*
   * The row somebody is already on.
   *
   * A brand border rather than a fill. The card sits on the page's own surface
   * and a filled one would have to pick a colour that works over both grounds,
   * where a border only has to be seen against them.
   *
   * `border-color` and `border-width` outright, not custom properties.
   * `<wa-card>` documents neither, and its `:host` block sets both directly
   * from `--wa-panel-border-*`. A `--border-color` of our own would name
   * nothing and do nothing, which is what the first version of this rule did.
   */
  .pp-plan-current {
    border-color: var(--wa-color-brand-border-loud);
    border-width: var(--wa-border-width-m);
  }

  /* Said on the free card, which has nothing at Stripe to manage. */
  .pp-plan-mine {
    margin: 0;
    color: var(--wa-color-text-quiet);
  }

  /*
   * The price on a marketing card, which is what the section is for.
   *
   * A paragraph rather than a heading, so the card's outline stays the tier
   * name and nothing else. `wa-flank` sits the unit against the amount on a
   * shared baseline, which is the shape Web Awesome's own pricing pattern uses.
   */
  .pp-price {
    margin: 0;
  }

  .pp-plan-price {
    color: var(--wa-color-text-quiet);
    white-space: nowrap;
  }

  /*
   * What a tier allows.
   *
   * The marker is off because these are allowances rather than prose, and Web
   * Awesome's own list styles indent an `li` by a fifth of an inch. D42 found
   * that one on the queue chips.
   */
  .pp-plan-allows {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pp-plan-allows li {
    margin-inline: 0;
  }
}