/* frontend/styles/index.css */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
@layer wa-base {
  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;
  }
}
@layer wa-utilities {
  .wa-size-xs {
    font-size: round(calc(round(calc(calc(1rem * 1) / 1.125), 1px) / 1.125), 1px);
    font-size: var(--wa-font-size-xs);
  }
  .wa-size-s {
    font-size: round(calc(calc(1rem * 1) / 1.125), 1px);
    font-size: var(--wa-font-size-s);
  }
  .wa-size-m {
    font-size: calc(1rem * 1);
    font-size: var(--wa-font-size-m);
  }
  .wa-size-l {
    font-size: round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px);
    font-size: var(--wa-font-size-l);
  }
  .wa-size-xl {
    font-size: round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    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 {
  html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    background-color: white;
    background-color: var(--wa-color-surface-default);
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #dddddd;
    color: var(--wa-color-text-normal);
    font-family: "Reddit Sans", "Noto Sans CJK KR";
    font-family: var(--wa-font-family-body);
    font-size: calc(1rem * 1);
    font-size: var(--wa-font-size-m);
    font-weight: 400;
    font-weight: var(--wa-font-weight-body);
    line-height: 1.6;
    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;
  }
  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: calc(1 * 1.5rem);
      margin-block-end: var(--wa-content-spacing);
    }
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Reddit Sans", "Noto Sans CJK KR";
    font-family: var(--wa-font-family-heading);
    font-weight: 600;
    font-weight: var(--wa-font-weight-heading);
    line-height: 1.2;
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }
  h1 {
    font-size: round(calc(round(calc(round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    font-size: var(--wa-font-size-3xl);
  }
  h2 {
    font-size: round(calc(round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    font-size: var(--wa-font-size-2xl);
  }
  h3 {
    font-size: round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    font-size: var(--wa-font-size-xl);
  }
  h4 {
    font-size: round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px);
    font-size: var(--wa-font-size-l);
  }
  h5 {
    font-size: calc(1rem * 1);
    font-size: var(--wa-font-size-m);
  }
  h6 {
    font-size: round(calc(round(calc(calc(1rem * 1) / 1.125), 1px) / 1.125), 1px);
    font-size: var(--wa-font-size-xs);
  }
  p {
    text-wrap: wrap;
  }
  @supports (text-wrap: pretty) {
    p {
      text-wrap: pretty;
    }
  }
  blockquote {
    padding: calc(1 * 2rem);
    padding: var(--wa-space-xl);
    color: #545868;
    color: var(--wa-color-text-quiet);
    font-family: "Reddit Sans", "Noto Sans CJK KR";
    font-family: var(--wa-font-family-longform);
    font-size: round(calc(1em * 1.125 * 1.125), 1px);
    font-size: var(--wa-font-size-larger);
    border-inline-start: solid calc(1 * 0.1875rem) #e4e5e9;
    border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
  }
  hr {
    margin: calc(1 * 1.5rem) 0;
    margin: var(--wa-content-spacing) 0;
    border: none;
    border-bottom: solid calc(1 * 0.0625rem) #e4e5e9;
    border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
  }
  figcaption {
    margin-block-start: calc(1 * 0.5rem);
    margin-block-start: var(--wa-space-xs);
    color: #545868;
    color: var(--wa-color-text-quiet);
    font-size: round(calc(1em / 1.125), 1px);
    font-size: var(--wa-font-size-smaller);
    line-height: 1.2;
    line-height: var(--wa-line-height-condensed);
  }
  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 > li::marker {
    color: color-mix(in oklch, currentColor 40%, transparent);
  }
  ol > li::marker {
    color: color-mix(in oklch, currentColor 60%, transparent);
  }
  dt {
    font-weight: 600;
    font-weight: var(--wa-font-weight-bold);
  }
  menu {
    list-style: none;
    margin: 0;
    padding: 0;
    & > li {
      margin: 0;
    }
  }
  strong,
  b {
    font-weight: 600;
    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: #036730;
    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: #b30532;
    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: #8c4602;
    color: var(--wa-color-warning-on-quiet);
    background-color: #fef3cd;
    background-color: var(--wa-color-warning-fill-quiet);
    border-radius: calc(1 * 0.1875rem);
    border-radius: var(--wa-border-radius-s);
  }
  small {
    font-size: round(calc(1em / 1.125), 1px);
    font-size: var(--wa-font-size-smaller);
  }
  sub,
  sup {
    font-size: round(calc(1em / 1.125), 1px);
    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:
      "JetBrains Mono",
      ui-monospace,
      monospace;
    font-family: var(--wa-font-family-code);
    font-size: round(calc(1em / 1.125), 1px);
    font-size: var(--wa-font-size-smaller);
    font-weight: 400;
    font-weight: var(--wa-font-weight-code);
    border: solid calc(1 * 0.0625rem) color-mix(in oklab, currentColor, transparent 50%);
    border-radius: calc(1 * 0.1875rem);
    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;
    }
  }
  @supports (color: color-mix(in lch, red, blue)) {
    kbd {
      border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
    }
  }
  a {
    color: color-mix(in display-p3, #555555, black 19%);
    color: var(--wa-color-text-link);
    text-decoration: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    -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, color-mix(in display-p3, #555555, black 19%), oklch(from currentColor calc(1 - l) c h) 10%);
    text-decoration: underline;
    text-decoration: var(--wa-link-decoration-hover);
    -webkit-text-decoration: underline;
    -webkit-text-decoration: var(--wa-link-decoration-hover);
  }
  @supports (color: color-mix(in lch, red, blue)) {
    a:hover {
      color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
    }
  }
  a:focus,
  button:focus {
    outline: none;
  }
  a:focus-visible,
  button:focus-visible {
    outline: solid 0.1875rem color-mix(in display-p3, #555555, white 23%);
    outline: var(--wa-focus-ring);
    outline-offset: 0.0625rem;
    outline-offset: var(--wa-focus-ring-offset);
  }
  code,
  samp,
  var {
    padding: 0.125em 0.25em;
    font-family:
      "JetBrains Mono",
      ui-monospace,
      monospace;
    font-family: var(--wa-font-family-code);
    font-size: round(calc(1em / 1.125), 1px);
    font-size: var(--wa-font-size-smaller);
    font-weight: 400;
    font-weight: var(--wa-font-weight-code);
    background-color: color-mix(in oklab, #c7c9d0 25%, transparent);
    background-color: var(--wa-color-overlay-inline);
    border-radius: calc(1 * 0.1875rem);
    border-radius: var(--wa-border-radius-s);
  }
  pre {
    padding: calc(1 * 1rem);
    padding: var(--wa-space-m);
    font-family:
      "JetBrains Mono",
      ui-monospace,
      monospace;
    font-family: var(--wa-font-family-code);
    font-size: round(calc(1em / 1.125), 1px);
    font-size: var(--wa-font-size-smaller);
    font-weight: 400;
    font-weight: var(--wa-font-weight-code);
    white-space: pre;
    background-color: color-mix(in oklab, #c7c9d0 25%, transparent);
    background-color: var(--wa-color-overlay-inline);
    border-radius: calc(1 * 0.75rem);
    border-radius: var(--wa-panel-border-radius);
    overflow-x: auto;
    & code,
    & samp,
    & var {
      padding: 0;
      font-size: 1em;
      background-color: transparent;
    }
    @media print {
      background: none;
      border: solid calc(1 * 0.0625rem) #e4e5e9;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
    }
  }
  img,
  svg,
  picture,
  video {
    max-width: 100%;
    height: auto;
  }
  img,
  picture,
  video {
    border-radius: calc(1 * 0.375rem);
    border-radius: var(--wa-border-radius-m);
  }
  embed,
  iframe,
  object {
    max-width: 100%;
  }
  iframe {
    border: none;
  }
  table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    &.wa-tabular-nums,
    & .wa-tabular-nums {
      font-feature-settings: "tnum";
      font-variant-numeric: tabular-nums;
    }
  }
  caption {
    color: #545868;
    color: var(--wa-color-text-quiet);
    font-size: round(calc(1em / 1.125), 1px);
    font-size: var(--wa-font-size-smaller);
    &:has(+ *) {
      margin-block-end: 0.75em;
    }
  }
  tbody {
    tr {
      border-block-start: solid calc(1 * 0.0625rem) #e4e5e9;
      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, #f1f2f3 60%, transparent);
      }
      @supports (color: color-mix(in lch, red, blue)) {
        :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: #f1f2f3;
            background-color: var(--wa-color-fill-quiet);
            &,
            + tr {
              border-block-start-color: #c7c9d0;
              border-block-start-color: var(--wa-color-border-normal);
            }
          }
        }
      }
    }
  }
  td,
  th {
    padding: 0.75em;
    text-align: start;
    vertical-align: top;
  }
  th {
    font-size: round(calc(1em / 1.125), 1px);
    font-size: var(--wa-font-size-smaller);
    font-weight: 600;
    font-weight: var(--wa-font-weight-bold);
    &:not([scope=row]):not(:has(+ td)) {
      border-block-end: solid calc(1 * 0.0625rem) #c7c9d0;
      border-block-end: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-normal);
    }
  }
  details {
    padding: 0;
    background-color: white;
    background-color: var(--wa-color-surface-default);
    border: calc(1 * 0.0625rem) #e4e5e9 solid;
    border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
    border-radius: calc(1 * 0.75rem);
    border-radius: var(--wa-panel-border-radius);
    overflow-anchor: none;
    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(1 * 1rem);
      padding: var(--wa-space-m);
      border-radius: calc(calc(1 * 0.75rem) - calc(1 * 0.0625rem));
      border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
      cursor: pointer;
      -moz-user-select: none;
      user-select: none;
      -webkit-user-select: none;
      > * {
        margin: 0;
      }
      &:focus {
        outline: none;
      }
      &:focus-visible {
        outline: solid 0.1875rem color-mix(in display-p3, #555555, white 23%);
        outline: var(--wa-focus-ring);
        outline-offset: calc(calc(1 * 0.0625rem) + 0.0625rem);
        outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
      }
    }
    &[open] {
      padding: 0 calc(1 * 1rem) calc(1 * 1rem) calc(1 * 1rem);
      padding: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);
      summary {
        margin-inline: calc(-1 * calc(1 * 1rem));
        margin-inline: calc(-1 * var(--wa-space-m));
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }
    &::details-content {
      box-sizing: border-box;
    }
    @media print {
      background: none;
      border: solid calc(1 * 0.0625rem) #e4e5e9;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
      summary {
        list-style: none;
      }
    }
  }
  details summary {
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }
    &::after {
      content: "";
      background-color: #545868;
      background-color: var(--wa-color-text-quiet);
      -webkit-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;
      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;
  }
  dialog {
    flex-direction: column;
    align-items: start;
    width: 32rem;
    max-width: calc(100% - calc(1 * 1.5rem));
    max-width: calc(100% - var(--wa-space-l));
    padding: calc(1 * 1.5rem);
    padding: var(--wa-space-l);
    background-color: white;
    background-color: var(--wa-color-surface-raised);
    border-radius: calc(1 * 0.75rem);
    border-radius: var(--wa-panel-border-radius);
    border: none;
    box-shadow: calc(0 * 0.5rem) calc(1 * 0.5rem) calc(1 * 0.5rem) calc(-0.5 * 0.5rem) color-mix(in oklab, #101219 calc(1 * 4% + 8%), transparent);
    box-shadow: var(--wa-shadow-l);
    transition: 300ms ease;
    transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);
    margin: auto;
    inset: 0;
    &[open] {
      display: flex;
    }
    &:focus {
      outline: none;
    }
  }
  dialog::backdrop {
    background-color: color-mix(in oklab, #101219 50%, transparent);
  }
  @supports (color: rgb(0 0 0 / 0)) {
    dialog::backdrop {
      background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
    }
  }
  label {
    display: inline-block;
    position: relative;
    color: #dddddd;
    color: var(--wa-form-control-label-color);
    font-weight: 500;
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: 1.2;
    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;
    }
  }
  fieldset {
    padding: calc(1 * 1.5rem);
    padding: var(--wa-space-l);
    padding-block-start: calc(calc(1 * 1.5rem) - 0.5em);
    padding-block-start: calc(var(--wa-space-l) - 0.5em);
    border: solid 1px #e4e5e9;
    border: solid 1px var(--wa-color-surface-border);
    border-radius: calc(1 * 0.375rem);
    border-radius: var(--wa-border-radius-m);
  }
  legend {
    padding: 0;
    padding-inline: calc(1 * 0.5rem);
    padding-inline: var(--wa-space-xs);
    font-weight: 500;
    font-weight: var(--wa-form-control-label-font-weight);
  }
  button,
  input[type=button],
  input[type=reset],
  input[type=submit],
  input[type=file],
  a.wa-button {
    &:not(input[type=file]),
    &::file-selector-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: round(calc(2 * 0.75em + 1em * 1.2), 1px);
      height: var(--wa-form-control-height);
      padding: 0 1em;
      padding: 0 var(--wa-form-control-padding-inline);
      font-family: inherit;
      font-size: var(--wa-form-control-value-font-size);
      font-weight: 500;
      font-weight: var(--wa-font-weight-action);
      text-decoration: none;
      vertical-align: middle;
      white-space: nowrap;
      border-style: solid;
      border-style: var(--wa-border-style);
      border-width: max(1px, calc(1 * 0.0625rem));
      border-width: max(1px, var(--wa-form-control-border-width));
      border-start-start-radius: calc(1 * 0.375rem);
      border-start-start-radius: var(--_button-start-start-radius, var(--wa-form-control-border-radius));
      border-start-end-radius: calc(1 * 0.375rem);
      border-start-end-radius: var(--_button-start-end-radius, var(--wa-form-control-border-radius));
      border-end-start-radius: calc(1 * 0.375rem);
      border-end-start-radius: var(--_button-end-start-radius, var(--wa-form-control-border-radius));
      border-end-end-radius: calc(1 * 0.375rem);
      border-end-end-radius: var(--_button-end-end-radius, var(--wa-form-control-border-radius));
      transition-property:
        background,
        border,
        box-shadow,
        color;
      transition-duration: 75ms;
      transition-duration: var(--wa-transition-fast);
      transition-timing-function: ease;
      transition-timing-function: var(--wa-transition-easing);
      cursor: pointer;
      -moz-user-select: none;
      user-select: none;
      -webkit-user-select: none;
      margin-inline-start: var(--_button-horizontal-indent);
      margin-block-start: var(--_button-vertical-indent);
    }
    &.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);
      }
    }
    &:not(input[type=file]) {
      color: white;
      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
      background-color: #2f323f;
      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, #2f323f, oklch(from currentColor calc(1 - l) c h) 10%);
            transform: none;
            transform: var(--wa-button-transform-hover);
          }
          @supports (color: color-mix(in lch, red, blue)) {
            &:hover {
              background-color: color-mix(in oklab, var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)), var(--wa-color-mix-hover));
            }
          }
        }
        &:active {
          background-color: color-mix(in oklab, #2f323f, white 10%);
          transform: scale(0.9875);
          transform: var(--wa-button-transform-active);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &:active {
            background-color: color-mix(in oklab, var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)), var(--wa-color-mix-active));
          }
        }
        @media (prefers-reduced-motion: reduce) {
          &:hover,
          &:active {
            transform: none;
          }
        }
      }
    }
    &:is(input[type=file]) {
      &::file-selector-button {
        color: #424554;
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: #e4e5e9;
        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, #e4e5e9, oklch(from currentColor calc(1 - l) c h) 10%);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &::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, #e4e5e9, white 10%);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &::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));
          }
        }
      }
    }
    &.wa-plain {
      &:not(input[type=file]),
      &::file-selector-button {
        color: #545868;
        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: #545868;
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: #f1f2f3;
          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
        }
        &:not(input[type=file]):active,
        &::file-selector-button:active {
          color: #545868;
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: color-mix(in oklab, #f1f2f3, white 10%);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &:not(input[type=file]):active,
          &::file-selector-button:active {
            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: #545868;
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: transparent;
        border-color: #9194a2;
        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: #545868;
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: #f1f2f3;
          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
        }
        &:not(input[type=file]):active,
        &::file-selector-button:active {
          color: #545868;
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: color-mix(in oklab, #f1f2f3, white 10%);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &:not(input[type=file]):active,
          &::file-selector-button:active {
            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: #424554;
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: #e4e5e9;
        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: #424554;
          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
          background-color: color-mix(in oklab, #e4e5e9, oklch(from currentColor calc(1 - l) c h) 10%);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &:not(input[type=file]):hover,
          &::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));
          }
        }
        &:not(input[type=file]):active,
        &::file-selector-button:active {
          color: #424554;
          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
          background-color: color-mix(in oklab, #e4e5e9, white 10%);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &:not(input[type=file]):active,
          &::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));
          }
        }
      }
      &.wa-outlined {
        &:not(input[type=file]),
        &::file-selector-button {
          border-color: #c7c9d0;
          border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
        }
      }
    }
    &.wa-accent {
      &:not(input[type=file]),
      &::file-selector-button {
        color: white;
        color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
        background-color: #2f323f;
        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, #2f323f, oklch(from currentColor calc(1 - l) c h) 10%);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &: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, #2f323f, white 10%);
        }
        @supports (color: color-mix(in lch, red, blue)) {
          &: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: 9999px;
        border-start-start-radius: var(--_button-start-start-radius, var(--wa-border-radius-pill));
        border-start-end-radius: 9999px;
        border-start-end-radius: var(--_button-start-end-radius, var(--wa-border-radius-pill));
        border-end-start-radius: 9999px;
        border-end-start-radius: var(--_button-end-start-radius, var(--wa-border-radius-pill));
        border-end-end-radius: 9999px;
        border-end-end-radius: var(--_button-end-end-radius, var(--wa-border-radius-pill));
      }
    }
    &:focus {
      outline: none;
    }
    &:focus-visible {
      outline: solid 0.1875rem color-mix(in display-p3, #555555, white 23%);
      outline: var(--wa-focus-ring);
      outline-offset: 0.0625rem;
      outline-offset: var(--wa-focus-ring-offset);
    }
    &:is(::-moz-focus-inner) {
      border: 0;
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      * {
        pointer-events: none;
      }
    }
    & > wa-icon:has(+ *) {
      margin-inline-end: 0.75em;
    }
    & > * + wa-icon {
      margin-inline-start: 0.75em;
    }
  }
  input[type=file] {
    display: block;
    max-inline-size: 100%;
    color: #dddddd;
    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: 400;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: 1.2;
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;
    border-radius: calc(1 * 0.375rem);
    border-radius: var(--wa-border-radius-m);
    cursor: pointer;
  }
  input[type=checkbox],
  label:has(input[type=checkbox]),
  input[type=radio],
  label:has(input[type=radio]) {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    color: #dddddd;
    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: 400;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: 1.2;
    line-height: var(--wa-form-control-value-line-height);
    -moz-user-select: none;
    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] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: round(1.25em, 1px);
    width: var(--wa-form-control-toggle-size);
    height: round(1.25em, 1px);
    height: var(--wa-form-control-toggle-size);
    margin: 0;
    margin-inline-end: 0.5em;
    background-color: color-mix(in display-p3, #555555, black 45%);
    background-color: var(--wa-form-control-background-color);
    border-color: #9194a2;
    border-color: var(--wa-form-control-border-color);
    border-style: solid;
    border-style: var(--wa-border-style);
    border-width: calc(1 * 0.0625rem);
    border-width: var(--wa-form-control-border-width);
    transition:
      background 150ms,
      border-color 75ms,
      box-shadow 75ms,
      color 75ms;
    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: ease;
    transition-timing-function: var(--wa-transition-easing);
    &:focus-visible {
      outline: solid 0.1875rem color-mix(in display-p3, #555555, white 23%);
      outline: var(--wa-focus-ring);
      outline-offset: 0.0625rem;
      outline-offset: var(--wa-focus-ring-offset);
    }
  }
  input[type=checkbox] {
    --checked-icon-color: var(--wa-color-brand-on-loud);
    --checked-icon-scale: 0.8;
    border-radius: min(calc(round(1.25em, 1px) * 0.375), calc(1 * 0.1875rem));
    border-radius: min(calc(var(--wa-form-control-toggle-size) * 0.375), var(--wa-border-radius-s));
    &:checked,
    &:indeterminate {
      color: var(--checked-icon-color);
      background-color: #555555;
      background-color: var(--wa-form-control-activated-color);
      border-color: #555555;
      border-color: var(--wa-form-control-activated-color);
    }
    &:checked::after,
    &:indeterminate::after {
      content: "";
      width: round(1.25em, 1px);
      width: var(--wa-form-control-toggle-size);
      height: round(1.25em, 1px);
      height: var(--wa-form-control-toggle-size);
      scale: var(--checked-icon-scale);
      background-color: currentColor;
    }
    &:checked::after {
      -webkit-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;
      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 {
      -webkit-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;
      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;
    }
  }
  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: #555555;
      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%;
    }
  }
  input:not([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: round(calc(2 * 0.75em + 1em * 1.2), 1px);
    height: var(--wa-form-control-height);
    padding: 0 1em;
    padding: 0 var(--wa-form-control-padding-inline);
    color: #dddddd;
    color: var(--wa-form-control-value-color);
    font-size: var(--wa-form-control-value-size);
    font-family: inherit;
    font-weight: 400;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: 1.2;
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;
    background-color: color-mix(in display-p3, #555555, black 45%);
    background-color: var(--wa-form-control-background-color);
    border-color: #9194a2;
    border-color: var(--wa-form-control-border-color);
    border-style: solid;
    border-style: var(--wa-form-control-border-style);
    border-width: calc(1 * 0.0625rem);
    border-width: var(--wa-form-control-border-width);
    border-radius: calc(1 * 0.375rem);
    border-radius: var(--wa-form-control-border-radius);
    transition:
      background-color 150ms,
      border-color 150ms,
      outline-color 75ms;
    transition:
      background-color var(--wa-transition-normal),
      border-color var(--wa-transition-normal),
      outline-color var(--wa-transition-fast);
    transition-timing-function: ease;
    transition-timing-function: var(--wa-transition-easing);
    outline: solid 0.1875rem transparent;
    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
    outline-offset: 0.0625rem;
    outline-offset: var(--wa-focus-ring-offset);
    cursor: text;
    &::-moz-placeholder {
      color: #717584;
      color: var(--wa-form-control-placeholder-color);
      -moz-user-select: none;
      user-select: none;
      -webkit-user-select: none;
    }
    &::placeholder {
      color: #717584;
      color: var(--wa-form-control-placeholder-color);
      -moz-user-select: none;
      user-select: none;
      -webkit-user-select: none;
    }
    &:focus-visible {
      outline-color: color-mix(in display-p3, #555555, white 23%);
      outline-color: var(--wa-color-focus);
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    &.wa-outlined {
      background-color: color-mix(in display-p3, #555555, black 45%);
      background-color: var(--wa-form-control-background-color);
      border-color: #9194a2;
      border-color: var(--wa-form-control-border-color);
    }
    &.wa-filled {
      background-color: #f1f2f3;
      background-color: var(--wa-color-neutral-fill-quiet);
      border-color: #f1f2f3;
      border-color: var(--wa-color-neutral-fill-quiet);
      &.wa-outlined {
        border-color: #9194a2;
        border-color: var(--wa-form-control-border-color);
      }
    }
    &.wa-pill {
      border-radius: 9999px;
      border-radius: var(--wa-border-radius-pill);
    }
  }
  textarea {
    height: auto;
    min-height: round(calc(2 * 0.75em + 1em * 1.2), 1px);
    min-height: var(--wa-form-control-height);
    scroll-padding-block: 0.75em;
    scroll-padding-block: var(--wa-form-control-padding-block);
    padding: calc(0.75em - ((1lh - 1em) / 2)) 1em;
    padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline);
    line-height: 1.6;
    line-height: var(--wa-line-height-normal);
    resize: vertical;
  }
  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>');
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    min-width: 0;
    background-image: 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>'), 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>');
    background-image: var(--icon-caret), var(--icon-caret);
    background-repeat: no-repeat;
    background-position: center right 1em;
    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(1em + 1rem + calc(1 * 0.5rem));
    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: 1em;
      padding-inline: var(--wa-form-control-padding-inline);
    }
  }
  input[type=color] {
    display: block;
    block-size: round(calc(2 * 0.75em + 1em * 1.2), 1px);
    block-size: var(--wa-form-control-height);
    inline-size: round(calc(2 * 0.75em + 1em * 1.2), 1px);
    inline-size: var(--wa-form-control-height);
    padding: calc(calc(1 * 0.0625rem) * 2);
    padding: calc(var(--wa-form-control-border-width) * 2);
    font-size: 1em;
    background: transparent;
    border: calc(1 * 0.0625rem) solid #9194a2;
    border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
    border-radius: calc(1 * 0.375rem);
    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(calc(1 * 0.375rem) - calc(1 * 0.0625rem) * 3);
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }
    &::-moz-color-swatch {
      border: none;
      border-radius: calc(calc(1 * 0.375rem) - calc(1 * 0.0625rem) * 3);
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }
    &:focus-visible {
      outline: solid 0.1875rem color-mix(in display-p3, #555555, white 23%);
      outline: var(--wa-focus-ring);
      outline-offset: 0.0625rem;
      outline-offset: var(--wa-focus-ring-offset);
    }
  }
  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: 0.5em;
    height: var(--track-size);
    margin: 0;
    font-size: inherit;
    line-height: round(calc(2 * 0.75em + 1em * 1.2), 1px);
    line-height: var(--wa-form-control-height);
    vertical-align: middle;
    background-color: #e4e5e9;
    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: calc(0.5em / 2);
    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: #555555;
      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em white;
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;
      -webkit-transition-property:
        background-color,
        border-color,
        box-shadow,
        color;
      transition-property:
        background-color,
        border-color,
        box-shadow,
        color;
      transition-duration: 150ms;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: ease;
      transition-timing-function: var(--wa-transition-easing);
    }
    &:enabled {
      &:focus-visible::-webkit-slider-thumb {
        outline: solid 0.1875rem color-mix(in display-p3, #555555, white 23%);
        outline: var(--wa-focus-ring);
        outline-offset: 0.0625rem;
        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: #e4e5e9;
      background-color: var(--wa-color-neutral-fill-normal);
      border-radius: 3px;
    }
    &::-moz-range-track {
      width: 100%;
      height: var(--track-size);
      background-color: #e4e5e9;
      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: #555555;
      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em white;
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;
      -moz-transition-property:
        background-color,
        border-color,
        box-shadow,
        color;
      transition-property:
        background-color,
        border-color,
        box-shadow,
        color;
      transition-duration: 150ms;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: ease;
      transition-timing-function: var(--wa-transition-easing);
    }
    &:enabled {
      &:focus-visible::-moz-range-thumb {
        outline: solid 0.1875rem color-mix(in display-p3, #555555, white 23%);
        outline: var(--wa-focus-ring);
        outline-offset: 0.0625rem;
        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;
    }
  }
  progress {
    --indicator-color: var(--wa-color-brand-fill-loud);
    width: 100%;
    height: 1rem;
    overflow: hidden;
    color: white;
    color: var(--wa-color-brand-on-loud);
    background-color: #e4e5e9;
    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: 9999px;
    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);
    }
  }
  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 );
    }
  }
  @keyframes wa-fade-in {
    from {
      opacity: 0;
    }
  }
  @keyframes wa-progress-indeterminate {
    0% {
      padding-inline-end: 100%;
    }
    25%, 100% {
      padding-inline-end: 0%;
    }
    75%, 100% {
      padding-inline-start: 100%;
    }
  }
  .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);
    --wa-color-focus: var(--wa-color-danger-border-loud);
    --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);
    --wa-color-focus: var(--wa-color-success-border-loud);
    --wa-color-text-quiet: var(--wa-color-success-on-quiet);
  }
}
@layer wa-utilities {
  .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 {
  @supports (scrollbar-gutter: stable) {
    .wa-scroll-lock {
      scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
    }
    .wa-scroll-lock body {
      overflow: hidden !important;
    }
  }
  @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: #f1f2f3;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed calc(1 * 0.0625rem) #c7c9d0;
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: calc(1 * 0.75rem);
    border-radius: var(--wa-border-radius-l);
    padding: calc(1 * 3rem);
    padding: var(--wa-space-3xl);
  }
}
@layer wa-utilities {
  :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 {
  :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 {
  :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: calc(1 * 0.1875rem);
    border-radius: var(--wa-border-radius-s);
  }
  .wa-border-radius-m {
    border-radius: calc(1 * 0.375rem);
    border-radius: var(--wa-border-radius-m);
  }
  .wa-border-radius-l {
    border-radius: calc(1 * 0.75rem);
    border-radius: var(--wa-border-radius-l);
  }
  .wa-border-radius-pill {
    border-radius: 9999px;
    border-radius: var(--wa-border-radius-pill);
  }
  .wa-border-radius-circle {
    border-radius: 50%;
    border-radius: var(--wa-border-radius-circle);
  }
  .wa-border-radius-square {
    border-radius: 0px;
    border-radius: var(--wa-border-radius-square);
  }
}
@layer wa-utilities {
  :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: calc(1 * 0.125rem);
    gap: var(--wa-space-3xs);
  }
  .wa-gap-2xs {
    gap: calc(1 * 0.25rem);
    gap: var(--wa-space-2xs);
  }
  .wa-gap-xs {
    gap: calc(1 * 0.5rem);
    gap: var(--wa-space-xs);
  }
  .wa-gap-s {
    gap: calc(1 * 0.75rem);
    gap: var(--wa-space-s);
  }
  .wa-gap-m {
    gap: calc(1 * 1rem);
    gap: var(--wa-space-m);
  }
  .wa-gap-l {
    gap: calc(1 * 1.5rem);
    gap: var(--wa-space-l);
  }
  .wa-gap-xl {
    gap: calc(1 * 2rem);
    gap: var(--wa-space-xl);
  }
  .wa-gap-2xl {
    gap: calc(1 * 2.5rem);
    gap: var(--wa-space-2xl);
  }
  .wa-gap-3xl {
    gap: calc(1 * 3rem);
    gap: var(--wa-space-3xl);
  }
  .wa-gap-4xl {
    gap: calc(1 * 4rem);
    gap: var(--wa-space-4xl);
  }
  .wa-gap-5xl {
    gap: calc(1 * 5rem);
    gap: var(--wa-space-5xl);
  }
}
@layer wa-utilities {
  [class*=wa-body] {
    font-family: "Reddit Sans", "Noto Sans CJK KR";
    font-family: var(--wa-font-family-body);
    font-weight: 400;
    font-weight: var(--wa-font-weight-body);
    line-height: 1.6;
    line-height: var(--wa-line-height-normal);
  }
  [class*=wa-heading] {
    font-family: "Reddit Sans", "Noto Sans CJK KR";
    font-family: var(--wa-font-family-heading);
    font-weight: 600;
    font-weight: var(--wa-font-weight-heading);
    line-height: 1.2;
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }
  [class*=wa-caption] {
    color: #545868;
    color: var(--wa-color-text-quiet);
    font-family: "Reddit Sans", "Noto Sans CJK KR";
    font-family: var(--wa-font-family-body);
    font-weight: 400;
    font-weight: var(--wa-font-weight-body);
    line-height: 1.2;
    line-height: var(--wa-line-height-condensed);
  }
  [class*=wa-longform] {
    font-family: "Reddit Sans", "Noto Sans CJK KR";
    font-family: var(--wa-font-family-longform);
    font-weight: 400;
    font-weight: var(--wa-font-weight-longform);
    line-height: 1.6;
    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: round(calc(round(calc(round(calc(round(calc(calc(1rem * 1) / 1.125), 1px) / 1.125), 1px) / 1.125), 1px) / 1.125), 1px);
    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: round(calc(round(calc(round(calc(calc(1rem * 1) / 1.125), 1px) / 1.125), 1px) / 1.125), 1px);
    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: round(calc(round(calc(calc(1rem * 1) / 1.125), 1px) / 1.125), 1px);
    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: round(calc(calc(1rem * 1) / 1.125), 1px);
    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: calc(1rem * 1);
    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: round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px);
    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: round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    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: round(calc(round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    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: round(calc(round(calc(round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    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: round(calc(round(calc(round(calc(round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    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: round(calc(round(calc(round(calc(round(calc(round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    font-size: var(--wa-font-size-5xl);
  }
  .wa-font-weight-light {
    font-weight: 300;
    font-weight: var(--wa-font-weight-light);
  }
  .wa-font-weight-normal {
    font-weight: 400;
    font-weight: var(--wa-font-weight-normal);
  }
  .wa-font-weight-semibold {
    font-weight: 500;
    font-weight: var(--wa-font-weight-semibold);
  }
  .wa-font-weight-bold {
    font-weight: 600;
    font-weight: var(--wa-font-weight-bold);
  }
  .wa-color-text-normal {
    color: #dddddd;
    color: var(--wa-color-text-normal);
  }
  .wa-color-text-quiet {
    color: #545868;
    color: var(--wa-color-text-quiet);
  }
  .wa-color-text-link {
    color: color-mix(in display-p3, #555555, black 19%);
    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;
  }
  .wa-link {
    color: color-mix(in display-p3, #555555, black 19%);
    color: var(--wa-color-text-link);
    text-decoration: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    -webkit-text-decoration: var(--wa-link-decoration-default);
    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, color-mix(in display-p3, #555555, black 19%) 100%, oklch(from currentColor calc(1 - l) c h) 10%);
        text-decoration: underline;
        text-decoration: var(--wa-link-decoration-hover);
        -webkit-text-decoration: underline;
        -webkit-text-decoration: var(--wa-link-decoration-hover);
      }
      @supports (color: color-mix(in lch, red, blue)) {
        &:hover {
          color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
        }
      }
    }
  }
  .wa-link-plain {
    color: #dddddd;
    color: var(--wa-color-text-normal);
    text-decoration: none;
    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, currentColor, oklch(from currentColor calc(1 - l) c h) 10%);
        text-decoration: none;
      }
      @supports (color: color-mix(in lch, red, blue)) {
        &:hover {
          color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
        }
      }
    }
  }
  .wa-list-plain:is(ol, ul) {
    list-style: none;
    padding-inline-start: 0;
    > li {
      margin-inline-start: 0;
    }
  }
  .wa-form-control-label {
    color: #dddddd;
    color: var(--wa-form-control-label-color);
    font-weight: 500;
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: 1.2;
    line-height: var(--wa-form-control-label-line-height);
  }
  .wa-form-control-value {
    color: #dddddd;
    color: var(--wa-form-control-value-color);
    font-weight: 400;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: 1.2;
    line-height: var(--wa-form-control-value-line-height);
  }
  .wa-form-control-placeholder {
    color: #717584;
    color: var(--wa-form-control-placeholder-color);
    font-weight: 400;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: 1.2;
    line-height: var(--wa-form-control-value-line-height);
  }
  .wa-form-control-hint {
    color: #545868;
    color: var(--wa-form-control-hint-color);
    font-weight: 400;
    font-weight: var(--wa-form-control-hint-font-weight);
    font-size: round(calc(1em / 1.125), 1px);
    font-size: var(--wa-font-size-smaller);
    line-height: 1.6;
    line-height: var(--wa-form-control-hint-line-height);
  }
}
@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: calc(1 * 1rem);
    gap: var(--wa-space-m);
  }
  [class*=wa-cluster] {
    display: flex;
  }
  :where([class*=wa-cluster]) {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  [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: auto;
    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: 50%;
    min-inline-size: var(--content-percentage, 50%);
  }
  [class*=wa-flank][class*=":end"] > :last-child {
    flex-basis: auto;
    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: 50%;
    min-inline-size: var(--content-percentage, 50%);
  }
  :where([class*=wa-flank]) {
    align-items: center;
    flex-wrap: wrap;
  }
  [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%;
    -o-object-fit: cover;
    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;
  }
  [class*=wa-grid] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
    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;
  }
  [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;
  }
  [class*=wa-stack] {
    display: flex;
    flex-direction: column;
  }
  :where([class*=wa-stack]) {
    align-items: stretch;
    justify-content: flex-start;
  }
}
@layer wa-utilities {
  @scope (.wa-prose) to (.wa-not-prose) {
    :where(:scope) {
      --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: 65ch;
      max-inline-size: var(--wa-prose-line-length);
      font-feature-settings: oldstyle-nums proportional-nums;
      font-variant-numeric: oldstyle-nums proportional-nums;
      hanging-punctuation: first last allow-end;
      & :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;
      }
      & :where(h1, h2) {
        letter-spacing: -0.01em;
      }
      & :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);
      }
      & :where(h1 + h2, h1 + h3, h2 + h3, h2 + h4, h3 + h4, h4 + h5, h5 + h6) {
        margin-block-start: var(--wa-prose-rhythm-m);
      }
      & :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);
      }
      & :where(figcaption) {
        margin-block-start: var(--wa-prose-rhythm-xs);
      }
      & :where(code, pre) {
        overflow-wrap: anywhere;
      }
      & :where(hr) {
        margin-block: var(--wa-prose-rhythm-3xl);
      }
      & :where(hr + :is(h1, h2, h3, h4, h5, h6)) {
        margin-block-start: 0;
      }
      & :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);
      }
    }
  }
}
@layer wa-color-variant {
  :where(:root),
  .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),
  .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),
  .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),
  .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),
  .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);
  }
}
:where(:root),
:host {
  --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%));
  --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 {
  :where(:root),
  .wa-palette-default {
    --wa-color-red-95: #fff0ef ;
    --wa-color-red-90: #ffdedc ;
    --wa-color-red-80: #ffb8b6 ;
    --wa-color-red-70: #fd8f90 ;
    --wa-color-red-60: #f3676c ;
    --wa-color-red-50: #dc3146 ;
    --wa-color-red-40: #b30532 ;
    --wa-color-red-30: #8a132c ;
    --wa-color-red-20: #631323 ;
    --wa-color-red-10: #3e0913 ;
    --wa-color-red-05: #2a040b ;
    --wa-color-red: var(--wa-color-red-50);
    --wa-color-red-key: 50;
    --wa-color-orange-95: #fff0e6 ;
    --wa-color-orange-90: #ffdfca ;
    --wa-color-orange-80: #ffbb94 ;
    --wa-color-orange-70: #ff9266 ;
    --wa-color-orange-60: #f46a45 ;
    --wa-color-orange-50: #cd491c ;
    --wa-color-orange-40: #9f3501 ;
    --wa-color-orange-30: #802700 ;
    --wa-color-orange-20: #601b00 ;
    --wa-color-orange-10: #3c0d00 ;
    --wa-color-orange-05: #280600 ;
    --wa-color-orange: var(--wa-color-orange-60);
    --wa-color-orange-key: 60;
    --wa-color-yellow-95: #fef3cd ;
    --wa-color-yellow-90: #ffe495 ;
    --wa-color-yellow-80: #fac22b ;
    --wa-color-yellow-70: #ef9d00 ;
    --wa-color-yellow-60: #da7e00 ;
    --wa-color-yellow-50: #b45f04 ;
    --wa-color-yellow-40: #8c4602 ;
    --wa-color-yellow-30: #6f3601 ;
    --wa-color-yellow-20: #532600 ;
    --wa-color-yellow-10: #331600 ;
    --wa-color-yellow-05: #220c00 ;
    --wa-color-yellow: var(--wa-color-yellow-80);
    --wa-color-yellow-key: 80;
    --wa-color-green-95: #e3f9e3 ;
    --wa-color-green-90: #c2f2c1 ;
    --wa-color-green-80: #93da98 ;
    --wa-color-green-70: #5dc36f ;
    --wa-color-green-60: #00ac49 ;
    --wa-color-green-50: #00883c ;
    --wa-color-green-40: #036730 ;
    --wa-color-green-30: #0a5027 ;
    --wa-color-green-20: #0a3a1d ;
    --wa-color-green-10: #052310 ;
    --wa-color-green-05: #031608 ;
    --wa-color-green: var(--wa-color-green-60);
    --wa-color-green-key: 60;
    --wa-color-cyan-95: #e3f6fb ;
    --wa-color-cyan-90: #c5ecf7 ;
    --wa-color-cyan-80: #7fd6ec ;
    --wa-color-cyan-70: #2fbedc ;
    --wa-color-cyan-60: #00a3c0 ;
    --wa-color-cyan-50: #078098 ;
    --wa-color-cyan-40: #026274 ;
    --wa-color-cyan-30: #014c5b ;
    --wa-color-cyan-20: #003844 ;
    --wa-color-cyan-10: #002129 ;
    --wa-color-cyan-05: #00151b ;
    --wa-color-cyan: var(--wa-color-cyan-70);
    --wa-color-cyan-key: 70;
    --wa-color-blue-95: #e8f3ff ;
    --wa-color-blue-90: #d1e8ff ;
    --wa-color-blue-80: #9fceff ;
    --wa-color-blue-70: #6eb3ff ;
    --wa-color-blue-60: #3e96ff ;
    --wa-color-blue-50: #0071ec ;
    --wa-color-blue-40: #0053c0 ;
    --wa-color-blue-30: #003f9c ;
    --wa-color-blue-20: #002d77 ;
    --wa-color-blue-10: #001a4e ;
    --wa-color-blue-05: #000f35 ;
    --wa-color-blue: var(--wa-color-blue-50);
    --wa-color-blue-key: 50;
    --wa-color-indigo-95: #f0f2ff ;
    --wa-color-indigo-90: #dfe5ff ;
    --wa-color-indigo-80: #bcc7ff ;
    --wa-color-indigo-70: #9da9ff ;
    --wa-color-indigo-60: #808aff ;
    --wa-color-indigo-50: #6163f2 ;
    --wa-color-indigo-40: #4945cb ;
    --wa-color-indigo-30: #3933a7 ;
    --wa-color-indigo-20: #292381 ;
    --wa-color-indigo-10: #181255 ;
    --wa-color-indigo-05: #0d0a3a ;
    --wa-color-indigo: var(--wa-color-indigo-50);
    --wa-color-indigo-key: 50;
    --wa-color-purple-95: #f7f0ff ;
    --wa-color-purple-90: #eedfff ;
    --wa-color-purple-80: #ddbdff ;
    --wa-color-purple-70: #ca99ff ;
    --wa-color-purple-60: #b678f5 ;
    --wa-color-purple-50: #9951db ;
    --wa-color-purple-40: #7936b3 ;
    --wa-color-purple-30: #612692 ;
    --wa-color-purple-20: #491870 ;
    --wa-color-purple-10: #2d0b48 ;
    --wa-color-purple-05: #1e0532 ;
    --wa-color-purple: var(--wa-color-purple-50);
    --wa-color-purple-key: 50;
    --wa-color-pink-95: #feeff9 ;
    --wa-color-pink-90: #feddf0 ;
    --wa-color-pink-80: #fcb5d8 ;
    --wa-color-pink-70: #f78dbf ;
    --wa-color-pink-60: #e66ba3 ;
    --wa-color-pink-50: #c84382 ;
    --wa-color-pink-40: #9e2a6c ;
    --wa-color-pink-30: #7d1e58 ;
    --wa-color-pink-20: #5e1342 ;
    --wa-color-pink-10: #3c0828 ;
    --wa-color-pink-05: #28041a ;
    --wa-color-pink: var(--wa-color-pink-50);
    --wa-color-pink-key: 50;
    --wa-color-gray-95: #f1f2f3 ;
    --wa-color-gray-90: #e4e5e9 ;
    --wa-color-gray-80: #c7c9d0 ;
    --wa-color-gray-70: #abaeb9 ;
    --wa-color-gray-60: #9194a2 ;
    --wa-color-gray-50: #717584 ;
    --wa-color-gray-40: #545868 ;
    --wa-color-gray-30: #424554 ;
    --wa-color-gray-20: #2f323f ;
    --wa-color-gray-10: #1b1d26 ;
    --wa-color-gray-05: #101219 ;
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;
  }
}
@layer wa-theme {
  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark .wa-invert,
  .wa-light .wa-theme-default,
  .wa-dark .wa-theme-default.wa-invert,
  .wa-dark .wa-theme-default .wa-invert {
    color-scheme: light;
    color: #1b1d26;
    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-90);
    --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: var(--wa-color-surface-default) 10%;
    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-80);
    --wa-color-brand-border-loud: var(--wa-color-brand-60);
    --wa-color-brand-on-quiet: var(--wa-color-brand-40);
    --wa-color-brand-on-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-loud: white;
    --wa-color-success-fill-quiet: var(--wa-color-success-95);
    --wa-color-success-fill-normal: var(--wa-color-success-90);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-90);
    --wa-color-success-border-normal: var(--wa-color-success-80);
    --wa-color-success-border-loud: var(--wa-color-success-60);
    --wa-color-success-on-quiet: var(--wa-color-success-40);
    --wa-color-success-on-normal: var(--wa-color-success-30);
    --wa-color-success-on-loud: white;
    --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-90);
    --wa-color-warning-border-normal: var(--wa-color-warning-80);
    --wa-color-warning-border-loud: var(--wa-color-warning-60);
    --wa-color-warning-on-quiet: var(--wa-color-warning-40);
    --wa-color-warning-on-normal: var(--wa-color-warning-30);
    --wa-color-warning-on-loud: white;
    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-90);
    --wa-color-danger-border-normal: var(--wa-color-danger-80);
    --wa-color-danger-border-loud: var(--wa-color-danger-60);
    --wa-color-danger-on-quiet: var(--wa-color-danger-40);
    --wa-color-danger-on-normal: var(--wa-color-danger-30);
    --wa-color-danger-on-loud: white;
    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-on-loud: white;
  }
  .wa-dark,
  .wa-invert,
  .wa-dark .wa-theme-default,
  .wa-light .wa-theme-default.wa-invert,
  .wa-light .wa-theme-default .wa-invert {
    color-scheme: dark;
    color: #f1f2f3;
    color: var(--wa-color-text-normal);
    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-05);
    --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
    --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-70);
    --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: var(--wa-color-surface-default) 20%;
    --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-50);
    --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: white;
    --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-50);
    --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: white;
    --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-50);
    --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: white;
    --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-50);
    --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: white;
    --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);
  }
  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark,
  .wa-invert {
    font-family:
      ui-sans-serif,
      system-ui,
      sans-serif;
    font-family: var(--wa-font-family-body);
    --wa-font-family-body:
      ui-sans-serif,
      system-ui,
      sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: ui-monospace, monospace;
    --wa-font-family-longform: ui-serif, serif;
    --wa-font-size-scale: 1;
    --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px);
    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px);
    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px);
    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px);
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale));
    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px);
    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px);
    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px);
    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px);
    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px);
    --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px);
    --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: 300;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 500;
    --wa-font-weight-bold: 600;
    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);
    --wa-line-height-condensed: 1.2;
    --wa-line-height-normal: 1.6;
    --wa-line-height-expanded: 2;
    --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    --wa-link-decoration-hover: underline;
    --wa-space-scale: 1;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem);
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem);
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem);
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem);
    --wa-space-m: calc(var(--wa-space-scale) * 1rem);
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem);
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem);
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem);
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem);
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem);
    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem);
    --wa-content-spacing: var(--wa-space-l);
    --wa-border-style: solid;
    --wa-border-width-scale: 1;
    --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);
    --wa-border-radius-scale: 1;
    --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;
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.1875rem;
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
    --wa-focus-ring-offset: 0.0625rem;
    --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: 1;
    --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: 1;
    --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);
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    --wa-form-control-background-color: var(--wa-color-surface-default);
    --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: var(--wa-border-radius-m);
    --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);
    --wa-button-transform-hover: none;
    --wa-button-transform-active: scale(0.9875);
    --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);
    --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);
  }
  :is(html, body):has(wa-page) {
    min-height: 100%;
    padding: 0;
    margin: 0;
  }
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-Light-J2FXLGNE.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-Regular-SJGU65WH.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-SemiBold-6EL3WELJ.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-Bold-2NL4X7VX.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-ExtraBold-B77FCCFY.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-LightItalic-GTO4TSQE.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-Italic-6JOSWZZE.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-SemiBoldItalic-DJOTAKYP.woff2") format("woff2");
  font-style: italic;
  font-weight: 600;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-BoldItalic-GTOLWVBG.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
}
@font-face {
  font-family: "Reddit Sans";
  src: url("/_bridgetown/static/RedditSans-ExtraBoldItalic-JUQFM265.woff2") format("woff2");
  font-style: italic;
  font-weight: 800;
}
@font-face {
  font-family: "Bagnard Serif";
  src: url("/_bridgetown/static/bagnard-latin-400-normal-NKDJZSPP.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/_bridgetown/static/JetBrainsMono-Regular-XDEX5OV5.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/_bridgetown/static/JetBrainsMono-Medium-G5OW7LWE.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/_bridgetown/static/JetBrainsMono-Italic-BTB4HDQ2.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/_bridgetown/static/JetBrainsMono-Bold-XTEGTLGW.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/_bridgetown/static/JetBrainsMono-BoldItalic-C3KKG45S.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
}
wll-back-to-top {
  display: block;
  pointer-events: none;
  opacity: 0;
  position: fixed;
  z-index: 99;
  bottom: 20px;
  right: 1px;
  width: 45px;
  height: 45px;
  translate: 10px 0px;
  transition: all 0.3s;
  &[active] {
    translate: 0px 0px;
    opacity: 1;
    pointer-events: auto;
  }
  & button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px 14px;
    background: color-mix(in display-p3, #555555, white 90%);
    background: var(--wa-color-brand-fill-quiet);
    border: 1px solid color-mix(in display-p3, #555555, white 80%);
    border: 1px solid var(--wa-color-brand-border-quiet);
    border-right: none;
    border-radius: calc(1 * 0.375rem) 0px 0px calc(1 * 0.375rem);
    border-radius: var(--wa-border-radius-m) 0px 0px var(--wa-border-radius-m);
    color: #555555;
    color: var(--wll-color-brand);
    box-shadow: -1px 0px 4px rgba(0, 0, 0, 0.08), inset -5px 0px 2px rgba(0, 0, 0, 0.05);
    & wa-icon {
      vertical-align: middle;
    }
  }
}
wll-code {
  display: block;
  margin-block-end: calc(1 * 1.5rem);
  margin-block-end: var(--wa-content-spacing);
  pre {
    border-radius: 0;
    background: color-mix(in display-p3, color-mix(in display-p3, #555555, white 90%), color-mix(in display-p3, #f1f2f3, transparent 70%) 70%);
    overflow: auto;
  }
  @supports (color: color-mix(in lch, red, blue)) {
    pre {
      background: color-mix(in display-p3, var(--wa-color-brand-fill-quiet), color-mix(in display-p3, var(--wa-color-neutral-fill-quiet), transparent 70%) 70%);
    }
  }
}
wll-post-item {
  &[headline-only] {
    display: flex;
    justify-content: space-between;
    gap: calc(1 * 0.75rem);
    gap: var(--wa-space-s);
    > time {
      min-width: 5ch;
      text-align: right;
      margin-block-start: 0.175em;
    }
  }
  &:not([headline-only]) {
    display: block;
    overflow: hidden;
    border: solid 2px color-mix(in display-p3, #555555, white 80%);
    border: solid 2px var(--wa-color-brand-border-quiet);
    border-radius: calc(1 * 0.75rem);
    border-radius: var(--wa-border-radius-l);
    corner-shape: squircle;
    padding: 1rem;
    height: 100%;
    position: relative;
    &::after {
      box-shadow: inset 0px 0px 1.25rem color-mix(in srgb, color-mix(in display-p3, #555555, white 90%), transparent 50%);
      bottom: 0;
      content: "";
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }
    @supports (color: color-mix(in lch, red, blue)) {
      &::after {
        box-shadow: inset 0px 0px 1.25rem color-mix(in srgb, var(--wll-color-glow-shadow), transparent 50%);
      }
    }
  }
  figure {
    margin-block-start: -1rem;
    margin-inline-start: -1rem;
    margin-block-end: 1.5rem;
    width: calc(100% + 2rem);
    border-radius: 0;
  }
  img {
    display: block;
    aspect-ratio: 5 / 3;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center top;
    object-position: center top;
    border-radius: 0;
    &[src^="data:"] {
      width: 64px;
      padding-block-start: calc(9.75vw - 32px);
      padding-block-end: calc(9.75vw - 32px);
      aspect-ratio: initial;
      margin-inline: auto;
      opacity: 0.3;
      @media (max-width: 767px) {
        padding-block-start: 18vw;
        padding-block-end: 18vw;
      }
    }
  }
  h2 {
    font-size: round(calc(round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px) * 1.125 * 1.125), 1px);
    font-size: var(--wa-font-size-xl);
    &:last-child {
      margin-block-end: calc(1 * 0.75rem);
      margin-block-end: var(--wa-space-s);
    }
  }
  hgroup > p {
    margin-block-end: calc(calc(1 * 1.5rem) / 2);
    margin-block-end: calc(var(--wa-content-spacing) / 2);
  }
  time {
    display: block;
    font-size: round(calc(calc(1rem * 1) / 1.125), 1px);
    font-size: var(--wa-font-size-s);
  }
}
.wa-dark wll-post-item:not([headline-only]) {
  box-shadow: inset 0px 0px 1.5rem color-mix(in display-p3, #555555, black 65%);
  box-shadow: inset 0px 0px 1.5rem var(--wa-color-brand-10);
  img[src^="data:"] {
    filter: invert();
  }
}
a:has(> wll-post-item) {
  text-decoration: none;
}
a:has(> wll-post-item:not([headline-only])) {
  color: inherit;
  h2 {
    color: color-mix(in display-p3, #555555, black 19%);
    color: var(--wa-color-text-link);
  }
}
ul:has(li > a > wll-post-item) {
  list-style-type: none;
  > li {
    margin-inline-start: 0;
  }
}
@layer variables {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-group(root) {
    animation-duration: 0.2s;
  }
  :root {
    --wll-color-brand: oklch(0.6117 0.1606 165.28);
    --wll-body-background: var(--wa-color-brand-fill-quiet);
    --wll-main-background: var(--wa-color-surface-default);
    --wll-color-metadata: color-mix(in display-p3, var(--wa-color-neutral-50), var(--wll-color-brand) 15%);
    --wll-color-glow-shadow: var(--wa-color-brand-95);
    --wll-layout-padding: var(--wa-space-l);
    --wll-layout-padding-large: var(--wa-space-2xl);
    --wll-desktop-font-scaling: calc(55% + .75vw);
    --wll-font-weight-major-heading: 400;
  }
  :root {
    --wa-font-family-body:
      "Reddit Sans",
      ui-sans-serif,
      system-ui,
      sans-serif;
    --wa-font-family-longform:
      "Bagnard Serif",
      ui-serif,
      serif;
    --wa-font-family-code:
      "JetBrains Mono",
      ui-monospace,
      monospace;
    --wa-font-weight-heading: 800;
    --wa-color-brand-95: color-mix(in display-p3, var(--wll-color-brand), white 90%);
    --wa-color-brand-90: color-mix(in display-p3, var(--wll-color-brand), white 80%);
    --wa-color-brand-80: color-mix(in display-p3, var(--wll-color-brand), white 65%);
    --wa-color-brand-70: color-mix(in display-p3, var(--wll-color-brand), white 40%);
    --wa-color-brand-60: color-mix(in display-p3, var(--wll-color-brand), white 23%);
    --wa-color-brand-50: var(--wll-color-brand);
    --wa-color-brand-40: color-mix(in display-p3, var(--wll-color-brand), black 19%);
    --wa-color-brand-30: color-mix(in display-p3, var(--wll-color-brand), black 30%);
    --wa-color-brand-20: color-mix(in display-p3, var(--wll-color-brand), black 45%);
    --wa-color-brand-10: color-mix(in display-p3, var(--wll-color-brand), black 65%);
    --wa-color-brand-05: color-mix(in display-p3, var(--wll-color-brand), black 80%);
  }
  .wa-dark {
    --wa-color-surface-default: color-mix(in display-p3, var(--wa-color-brand-10), var(--wa-color-neutral-05) 60%);
    --wa-color-brand-fill-quiet: var(--wa-color-surface-default);
    --wll-color-glow-shadow: var(--wa-color-brand-05);
    --wll-body-background: var(--wa-color-surface-default);
    --wll-main-background: color-mix(in display-p3, var(--wa-color-brand-05), var(--wa-color-neutral-05) 60%);
  }
  @keyframes open-details {
    0% {
      opacity: 0.2;
      translate: 0px -0.2rem;
    }
    100% {
      opacity: 1;
      translate: 0px 0px;
    }
  }
}
@layer layout {
  html {
    background: color-mix(in display-p3, #555555, black 65%);
    background: var(--wll-body-background);
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
  body {
    > :is(main, aside) {
      box-sizing: border-box;
    }
    > header {
      --navbar-gap: var(--wa-space-m);
      --logo-gap: var(--wa-space-xs);
      --logo-height: 55px;
      --logo-height-large: 75px;
      --logo-width: 27vw;
      --logo-font-family: var(--wa-font-family-longform);
      --logo-font-weight: var(--wll-font-weight-major-heading);
      --logo-font-size: var(--wa-font-size-l);
      a[slot=logo] {
        display: flex;
        align-items: center;
        gap: var(--logo-gap);
        line-height: 1.15;
        color: inherit;
        @media (max-width: 767px) {
          flex-direction: column;
          text-align: center;
        }
        > img {
          height: var(--logo-height-large);
          @media (max-width: 767px) {
            height: var(--logo-height);
          }
        }
        > span {
          font-family: var(--logo-font-family);
          font-weight: var(--logo-font-weight);
          font-size: var(--logo-font-size);
          @media (min-width: 768px) {
            width: var(--logo-width);
          }
        }
      }
      a {
        text-decoration: none;
        font-weight: bold;
      }
    }
    > main {
      --wll-body-background: var(--wll-main-background);
      border-radius: calc(1 * 0.75rem);
      border-radius: var(--wa-border-radius-l);
      > main-contents .inline-bleed {
        margin-inline: calc(0rem - var(--layout-padding));
        img {
          border-radius: 0;
          border-radius: initial;
        }
      }
    }
    > main,
    aside {
      height: 100%;
    }
    > main,
    aside {
      background: color-mix(in display-p3, #555555, black 65%);
      background: var(--wll-body-background);
    }
    &.wll-grid-lines {
      > main,
      aside {
        --wll-body-background: var(--wll-main-background);
      }
      > main {
        border-radius: revert;
        border-inline-start: 1px solid #e4e5e9;
        border-inline-start: 1px solid var(--wa-color-surface-border);
        border-inline-end: 1px solid #e4e5e9;
        border-inline-end: 1px solid var(--wa-color-surface-border);
      }
      &:has(> aside[slot=sidebar-end][hidden]) > main {
        border-inline-end: none;
        margin-inline-end: 0;
      }
    }
    &.debug > header {
      background: lightblue;
    }
    &.debug > aside {
      background: lightcoral;
    }
    &.debug > footer {
      background: lightgoldenrodyellow;
    }
  }
  body > aside {
    --wa-form-control-background-color: var(--wll-main-background);
    --wa-form-control-border-color: var(--wa-color-text-link);
    h2 {
      font-size: round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px);
      font-size: var(--wa-font-size-l);
      & + :is(p, nav) {
        margin-block-start: calc(0rem - calc(1 * 0.5rem));
        margin-block-start: calc(0rem - var(--wa-space-xs));
      }
    }
    a {
      text-decoration: none;
      font-weight: bold;
    }
    > details {
      --wa-color-text-quiet: var(--wa-color-brand-on-quiet);
      all: unset;
      display: block;
      &:not(:first-child) {
        margin-block-start: calc(1 * 1rem);
        margin-block-start: var(--wa-space-m);
      }
      > summary {
        margin-inline: 0;
        padding-inline: 0;
        wa-icon {
          margin-inline-start: -0.125em;
          color: #545868;
          color: var(--wa-color-text-quiet);
        }
      }
      > h2 {
        margin-block-start: calc(1 * 1.5rem);
        margin-block-start: var(--wa-space-l);
      }
      > * {
        box-sizing: border-box;
      }
      li > a {
        display: block;
        border-radius: calc(1 * 0.1875rem);
        border-radius: var(--wa-border-radius-s);
      }
      ul:has(> li > a[aria-current=page]) {
        > li > a {
          padding-inline: 2px;
          margin-inline: -2px;
        }
      }
      a[aria-current=page] {
        background: color-mix(in display-p3, #555555, black 65%);
        background: var(--wll-main-background);
      }
    }
  }
  body > footer {
    max-inline-size: 100ch;
    margin-inline: auto;
    padding-block: calc(1 * 4rem);
    padding-block: var(--wa-space-4xl);
  }
  nav > ul,
  ul[slot=nav],
  aside[slot=sidebar-end] ul {
    list-style: none;
    > li {
      margin-inline-start: 0;
      line-height: 1.25;
      padding-block: calc(1 * 0.25rem);
      padding-block: var(--wa-space-2xs);
      &:has(> a) {
        padding-block: 0;
      }
      & > a {
        display: block;
        padding-block: calc(1 * 0.25rem);
        padding-block: var(--wa-space-2xs);
        &.scrolled-in-view {
          background: color-mix(in display-p3, #555555, black 65%);
          background: var(--wll-main-background);
          padding-inline: 2px;
          margin-inline: -2px;
        }
      }
      &[item-depth="2"],
      > ul > li {
        margin-inline-start: calc(1 * 0.5rem);
        margin-inline-start: var(--wa-space-xs);
      }
      &[item-depth="3"] {
        margin-inline-start: calc(1 * 0.75rem);
        margin-inline-start: var(--wa-space-s);
      }
      &[item-depth="4"] {
        margin-inline-start: calc(1 * 1rem);
        margin-inline-start: var(--wa-space-m);
      }
    }
  }
  aside[slot=sidebar-end] ul:last-of-type {
    position: sticky;
    top: calc(1 * 1.5rem);
    top: var(--wa-space-l);
  }
  aside[slot=sidebar-end] ul > li > ul {
    font-size: round(calc(calc(1rem * 1) / 1.125), 1px);
    font-size: var(--wa-font-size-s);
  }
  ul.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(350px, 100%/4)), 1fr));
    grid-gap: calc(1 * 2rem);
    grid-gap: var(--wa-space-xl);
    gap: calc(1 * 2rem);
    gap: var(--wa-space-xl);
    > li {
      margin-block-end: 0;
    }
  }
  ul.pagination {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    gap: calc(1 * 0.75rem);
    gap: var(--wa-space-s);
    align-items: center;
    > li {
      margin-inline-start: 0;
      max-width: 50%;
      &:last-of-type {
        text-align: right;
      }
      > a {
        display: block;
        text-decoration: none;
      }
    }
  }
  main > .show-mid-screen:first-child,
  aside[slot=sidebar-end] > .show-mid-screen:first-child {
    position: absolute;
    right: calc(1 * 1rem);
    right: var(--wa-space-m);
  }
  @media screen and (max-width: 767px) {
    body > main {
      border-radius: revert;
    }
    body.wll-grid-lines {
      > main {
        border: none;
        border-block-start: 1px solid #e4e5e9;
        border-block-start: 1px solid var(--wa-color-surface-border);
      }
    }
    .hide-for-mobile {
      display: none;
    }
    aside > details[open] > summary ~ * {
      animation: open-details 300ms ease;
      animation: open-details var(--wa-transition-slow) var(--wa-transition-easing);
    }
  }
  @media screen and (min-width: 768px) {
    .show-small-screen {
      display: none;
    }
    body:has(> aside[slot=sidebar-start][hidden]) > main {
      margin-inline-start: calc(1 * 1rem);
      margin-inline-start: var(--wa-space-m);
    }
    body:has(> aside[slot=sidebar-end][hidden]) > main {
      margin-inline-end: calc(1 * 1rem);
      margin-inline-end: var(--wa-space-m);
    }
  }
  @media screen and (max-width: 1099px) {
    body.wll-grid-lines {
      > aside[slot=sidebar-end] {
        --wll-body-background: unset;
      }
    }
    aside[slot=sidebar-end] {
      position: absolute;
      transition: transform 300ms ease;
      transition: transform var(--wa-transition-slow) var(--wa-transition-easing);
      right: 9999px;
      will-change: transform;
      transform: translateX(clamp(var(--sidebar-end-min-inline-size), 22vw, var(--sidebar-end-max-inline-size)));
      > h2:first-of-type {
        margin-block-start: calc(1 * 0.75rem);
        margin-block-start: var(--wa-space-s);
      }
    }
    body.sidebar-end-open {
      aside[slot=sidebar-end] {
        right: 0px;
        transform: translateX(0);
        border: 1px solid color-mix(in display-p3, #555555, white 80%);
        border: 1px solid var(--wa-color-brand-border-quiet);
        box-shadow: 0px 5px 25px -5px rgba(0, 0, 0, 0.15);
      }
    }
    main:has(> .show-mid-screen:not([hidden]):first-child) {
      h1 {
        width: calc(100% - 3rem);
      }
    }
  }
  @media screen and (min-width: 1100px) {
    .show-mid-screen {
      display: none;
    }
    body > main {
      --layout-padding: var(--wll-layout-padding-large);
    }
  }
  @media screen and (min-width: 1200px) {
    body:has(> aside[slot=sidebar-start][hidden]) {
      width: 1200px;
      margin-inline: auto;
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1799px) {
    html {
      font-size: calc(55% + .75vw);
      font-size: var(--wll-desktop-font-scaling);
    }
  }
  @media screen and (min-width: 1800px) {
    html {
      font-size: round(calc(calc(1rem * 1) * 1.125 * 1.125), 1px);
      font-size: var(--wa-font-size-l);
    }
    body:not(:has(> aside[slot=sidebar-start][hidden])) {
      width: 1800px;
      margin-inline: auto;
    }
  }
}
@layer content {
  h1 {
    font-family: "Reddit Sans", "Noto Sans CJK KR";
    font-family: var(--wa-font-family-longform);
    font-weight: 600;
    font-weight: var(--wll-font-weight-major-heading);
    letter-spacing: -0.03em;
  }
  h2 {
    overflow-wrap: anywhere;
  }
  strong {
    font-weight: 600;
    font-weight: var(--wa-font-weight-heading);
  }
  blockquote {
    padding-block: calc(1 * 1rem);
    padding-block: var(--wa-space-m);
    padding-inline: calc(1 * 1.5rem) 0;
    padding-inline: var(--wa-space-l) 0;
    font: inherit;
    font-size: 1.05em;
    border-inline-start: calc(calc(1 * 0.1875rem) * 2) solid color-mix(in display-p3, #555555, white 80%);
    border-inline-start: calc(var(--wa-border-width-l) * 2) solid var(--wa-color-brand-border-quiet);
    &.inline-bleed {
      padding-block: var(--layout-padding);
      padding-inline: calc(var(--layout-padding) - calc(1 * 0.1875rem) * 2);
      padding-inline: calc(var(--layout-padding) - var(--wa-border-width-l) * 2);
      border-inline: calc(calc(1 * 0.1875rem) * 2) solid color-mix(in display-p3, #555555, white 80%);
      border-inline: calc(var(--wa-border-width-l) * 2) solid var(--wa-color-brand-border-quiet);
      background: color-mix(in display-p3, #555555, white 90%);
      background: var(--wa-color-brand-fill-quiet);
    }
  }
  li blockquote {
    margin-block-start: calc(1 * 1.5rem);
    margin-block-start: var(--wa-content-spacing);
  }
  article li {
    margin-block-end: calc(calc(1 * 1.5rem) / 2);
    margin-block-end: calc(var(--wa-content-spacing) / 2);
  }
  article figcaption {
    font-size: round(calc(calc(1rem * 1) / 1.125), 1px);
    font-size: var(--wa-font-size-s);
    text-align: right;
    color: color-mix(in display-p3, #717584, #555555 15%);
    color: var(--wll-color-metadata);
    margin-inline: calc(1 * 0.5rem);
    margin-inline: var(--wa-space-xs);
  }
  time,
  wll-post-metadata {
    color: color-mix(in display-p3, #717584, #555555 15%);
    color: var(--wll-color-metadata);
  }
  :not(pre) > code {
    font-weight: 500;
  }
  .heading-anchor {
    font-family:
      "JetBrains Mono",
      ui-monospace,
      monospace;
    font-family: var(--wa-font-family-code);
    font-weight: 600;
    font-weight: var(--wa-font-weight-bold);
    text-decoration: none;
    opacity: 0.2;
    transition: opacity 150ms ease;
    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
  }
  :is(h2, h3):hover {
    .heading-anchor {
      opacity: 1;
    }
  }
  wll-post-metadata {
    display: block;
    margin-block-start: calc(calc(1 * 1.5rem) * 2);
    margin-block-start: calc(var(--wa-content-spacing) * 2);
    padding: calc(1 * 1rem);
    padding: var(--wa-space-m);
    border-radius: calc(1 * 0.375rem);
    border-radius: var(--wa-border-radius-m);
    background: color-mix(in display-p3, color-mix(in display-p3, #555555, white 90%), color-mix(in display-p3, #f1f2f3, transparent 70%) 70%);
    font-size: round(calc(calc(1rem * 1) / 1.125), 1px);
    font-size: var(--wa-font-size-s);
  }
  @supports (color: color-mix(in lch, red, blue)) {
    wll-post-metadata {
      background: color-mix(in display-p3, var(--wa-color-brand-fill-quiet), color-mix(in display-p3, var(--wa-color-neutral-fill-quiet), transparent 70%) 70%);
    }
  }
  wll-post-metadata > wa-icon.wll-decoration {
    float: right;
    margin: .15em;
    margin-inline-end: 0;
    rotate: 3deg;
    color: color-mix(in display-p3, #717584, #555555 15%);
    color: var(--wll-color-metadata);
    opacity: .4;
    font-size: 2.75em;
  }
  wll-post-metadata > p {
    margin-block-end: .2em;
    > wa-icon {
      margin-inline-end: .2em;
    }
  }
  :is(wll-post-tag, wll-post-category) {
    margin-inline-end: calc(1 * 0.25rem);
    margin-inline-end: var(--wa-space-2xs);
  }
  .skip-to-content-link {
    background: #555555;
    background: var(--wll-color-brand);
    color: white;
    font-weight: bold;
    border-bottom-left-radius: calc(1 * 0.375rem);
    border-bottom-left-radius: var(--wa-border-radius-m);
    border-bottom-right-radius: calc(1 * 0.375rem);
    border-bottom-right-radius: var(--wa-border-radius-m);
    width: 18ch;
    height: calc(1 * 1.5rem);
    height: var(--wa-space-l);
    left: calc(50% - 9ch);
    padding: calc(1 * 0.75rem) calc(1 * 0.75rem);
    padding: var(--wa-space-s) var(--wa-space-s);
    position: absolute;
    transform: translateY(calc(0rem - calc(1 * 4rem)));
    transform: translateY(calc(0rem - var(--wa-space-4xl)));
    transition: transform 0.1s, opacity 0.3s;
    top: 0px;
    text-align: center;
    z-index: 1;
    opacity: .3;
  }
  .skip-to-content-link:focus {
    transform: translateY(0%);
    opacity: 1;
  }
}
@layer search {
  wa-dialog {
    box-sizing: border-box;
    wll-search-page {
      display: grid;
      height: 100%;
      max-height: 70vh;
      grid-template-rows: 1fr auto;
    }
  }
  wll-search-results {
    display: block;
    overflow: auto;
    padding-inline: .25em;
    font-size: 0.875em;
    &:has(> ul > li) {
      margin-block-start: calc(1 * 1rem);
      margin-block-start: var(--wa-space-m);
    }
    ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }
    li {
      padding-block: calc(1 * 1rem) 0;
      padding-block: var(--wa-space-m) 0;
      padding-inline: 0;
      margin: 0;
      > p {
        margin: 0;
        > a {
          display: block;
        }
      }
    }
    [data-title] {
      font-weight: bold;
    }
  }
}
@layer syntax.light {
  .highlight table td {
    padding: 5px;
  }
  .highlight table pre {
    margin: 0;
  }
  .highlight .w {
    color: #24292f;
    background-color: #f6f8fa;
  }
  .highlight .k,
  .highlight .kd,
  .highlight .kn,
  .highlight .kp,
  .highlight .kr,
  .highlight .kt,
  .highlight .kv {
    color: #cf222e;
  }
  .highlight .gr {
    color: #f6f8fa;
  }
  .highlight .gd {
    color: #82071e;
    background-color: #ffebe9;
  }
  .highlight .nb {
    color: #953800;
  }
  .highlight .nc {
    color: #953800;
  }
  .highlight .no {
    color: #953800;
  }
  .highlight .nn {
    color: #953800;
  }
  .highlight .sr {
    color: #116329;
  }
  .highlight .na {
    color: #116329;
  }
  .highlight .nt {
    color: #116329;
  }
  .highlight .gi {
    color: #116329;
    background-color: #dafbe1;
  }
  .highlight .kc {
    color: #0550ae;
  }
  .highlight .l,
  .highlight .ld,
  .highlight .m,
  .highlight .mb,
  .highlight .mf,
  .highlight .mh,
  .highlight .mi,
  .highlight .il,
  .highlight .mo,
  .highlight .mx {
    color: #0550ae;
  }
  .highlight .sb {
    color: #0550ae;
  }
  .highlight .bp {
    color: #0550ae;
  }
  .highlight .ne {
    color: #0550ae;
  }
  .highlight .nl {
    color: #0550ae;
  }
  .highlight .py {
    color: #0550ae;
  }
  .highlight .nv,
  .highlight .vc,
  .highlight .vg,
  .highlight .vi,
  .highlight .vm {
    color: #0550ae;
  }
  .highlight .o,
  .highlight .ow {
    color: #0550ae;
  }
  .highlight .gh {
    color: #0550ae;
    font-weight: bold;
  }
  .highlight .gu {
    color: #0550ae;
    font-weight: bold;
  }
  .highlight .s,
  .highlight .sa,
  .highlight .sc,
  .highlight .dl,
  .highlight .sd,
  .highlight .s2,
  .highlight .se,
  .highlight .sh,
  .highlight .sx,
  .highlight .s1,
  .highlight .ss {
    color: #0a3069;
  }
  .highlight .nd {
    color: #8250df;
  }
  .highlight .nf,
  .highlight .fm {
    color: #8250df;
  }
  .highlight .err {
    color: #f6f8fa;
    background-color: #82071e;
  }
  .highlight .c,
  .highlight .ch,
  .highlight .cd,
  .highlight .cm,
  .highlight .cp,
  .highlight .cpf,
  .highlight .c1,
  .highlight .cs {
    color: #6e7781;
  }
  .highlight .gl {
    color: #6e7781;
  }
  .highlight .gt {
    color: #6e7781;
  }
  .highlight .ni {
    color: #24292f;
  }
  .highlight .si {
    color: #24292f;
  }
  .highlight .ge {
    color: #24292f;
    font-style: italic;
  }
  .highlight .gs {
    color: #24292f;
    font-weight: bold;
  }
}
@layer syntax.dark {
  .wa-dark {
    .highlight table td {
      padding: 5px;
    }
    .highlight table pre {
      margin: 0;
    }
    .highlight .w {
      color: #c9d1d9;
      background-color: #161b22;
    }
    .highlight .k,
    .highlight .kd,
    .highlight .kn,
    .highlight .kp,
    .highlight .kr,
    .highlight .kt,
    .highlight .kv {
      color: #ff7b72;
    }
    .highlight .gr {
      color: #f0f6fc;
    }
    .highlight .gd {
      color: #ffdcd7;
      background-color: #67060c;
    }
    .highlight .nb {
      color: #ffa657;
    }
    .highlight .nc {
      color: #ffa657;
    }
    .highlight .no {
      color: #ffa657;
    }
    .highlight .nn {
      color: #ffa657;
    }
    .highlight .sr {
      color: #7ee787;
    }
    .highlight .na {
      color: #7ee787;
    }
    .highlight .nt {
      color: #7ee787;
    }
    .highlight .gi {
      color: #aff5b4;
      background-color: #033a16;
    }
    .highlight .kc {
      color: #79c0ff;
    }
    .highlight .l,
    .highlight .ld,
    .highlight .m,
    .highlight .mb,
    .highlight .mf,
    .highlight .mh,
    .highlight .mi,
    .highlight .il,
    .highlight .mo,
    .highlight .mx {
      color: #79c0ff;
    }
    .highlight .sb {
      color: #79c0ff;
    }
    .highlight .bp {
      color: #79c0ff;
    }
    .highlight .ne {
      color: #79c0ff;
    }
    .highlight .nl {
      color: #79c0ff;
    }
    .highlight .py {
      color: #79c0ff;
    }
    .highlight .nv,
    .highlight .vc,
    .highlight .vg,
    .highlight .vi,
    .highlight .vm {
      color: #79c0ff;
    }
    .highlight .o,
    .highlight .ow {
      color: #79c0ff;
    }
    .highlight .gh {
      color: #1f6feb;
      font-weight: bold;
    }
    .highlight .gu {
      color: #1f6feb;
      font-weight: bold;
    }
    .highlight .s,
    .highlight .sa,
    .highlight .sc,
    .highlight .dl,
    .highlight .sd,
    .highlight .s2,
    .highlight .se,
    .highlight .sh,
    .highlight .sx,
    .highlight .s1,
    .highlight .ss {
      color: #a5d6ff;
    }
    .highlight .nd {
      color: #d2a8ff;
    }
    .highlight .nf,
    .highlight .fm {
      color: #d2a8ff;
    }
    .highlight .err {
      color: #f0f6fc;
      background-color: #8e1519;
    }
    .highlight .c,
    .highlight .ch,
    .highlight .cd,
    .highlight .cm,
    .highlight .cp,
    .highlight .cpf,
    .highlight .c1,
    .highlight .cs {
      color: #8b949e;
    }
    .highlight .gl {
      color: #8b949e;
    }
    .highlight .gt {
      color: #8b949e;
    }
    .highlight .ni {
      color: #c9d1d9;
    }
    .highlight .si {
      color: #c9d1d9;
    }
    .highlight .ge {
      color: #c9d1d9;
      font-style: italic;
    }
    .highlight .gs {
      color: #c9d1d9;
      font-weight: bold;
    }
  }
}
:root {
  --wll-color-brand: #555555;
  --wa-font-family-body: "Reddit Sans", "Noto Sans CJK KR";
  --wa-font-family-longform: "Reddit Sans", "Noto Sans CJK KR";
  --wll-font-weight-major-heading: 600;
  --wa-font-weight-heading: 600;
  --wa-color-text-normal: #dddddd;
  --wll-body-background: var(--wa-color-brand-10);
  --wll-main-background: var(--wa-color-brand-10);
  --wa-form-control-background-color: var(--wa-color-brand-20);
  --wll-layout-padding-large: var(--wa-space-3xl);
}
.meta-pre {
  font-size: round(calc(calc(1rem * 1) / 1.125), 1px);
  font-size: var(--wa-font-size-s);
  text-align: right;
  color: color-mix(in display-p3, #717584, #555555 15%);
  color: var(--wll-color-metadata);
  margin-bottom: 27px;
}
body {
  font-size: 17px;
  word-break: keep-all !important;
  text-align: justify !important;
  max-width: calc(1024px + var(--layout-padding) * 2);
  > header {
    a[slot=logo] {
      display: inline;
      display: initial;
    }
    --logo-font-weight: 700;
    a {
      font-size: round(calc(calc(1rem * 1) / 1.125), 1px);
      font-size: var(--wa-font-size-s);
      font-weight: 400;
    }
    .locale-divider {
      font-size: round(calc(calc(1rem * 1) / 1.125), 1px);
      font-size: var(--wa-font-size-s);
    }
    .locale {
      font-size: round(calc(round(calc(calc(1rem * 1) / 1.125), 1px) / 1.125), 1px);
      font-size: var(--wa-font-size-xs);
    }
  }
  > main {
    --wll-body-background: var(--wa-color-brand-10);
    max-width: calc(720px + var(--layout-padding) * 2);
    margin-inline: auto;
  }
  > footer {
    font-size: round(calc(round(calc(calc(1rem * 1) / 1.125), 1px) / 1.125), 1px);
    font-size: var(--wa-font-size-xs);
    padding-block: calc(1 * 1rem);
    padding-block: var(--wa-space-m);
    text-align: center;
  }
}
wll-search-dialog {
  padding: 0;
}
wll-post-item {
  box-shadow: none !important;
  border: none !important;
  background-color: color-mix(in display-p3, #555555, black 45%);
  background-color: var(--wa-color-brand-20);
  padding: 1.5rem !important;
  > hgroup {
    > h2 {
      color: #dddddd !important;
      color: var(--wa-color-text-normal) !important;
      --wa-content-spacing: var(--wa-space-s);
    }
    > p {
      color: color-mix(in display-p3, #555555, black 19%) !important;
      color: var(--wa-color-text-link) !important;
      font-size: round(calc(calc(1rem * 1) / 1.125), 1px) !important;
      font-size: var(--wa-font-size-s) !important;
      text-indent: 0.5em;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      -line-clamp: 2;
    }
  }
}
article > p {
  text-indent: 0.5em;
}
wll-post-item::after {
  box-shadow: none !important;
}
wll-post-metadata {
  background-color: color-mix(in display-p3, #555555, black 65%) !important;
  background-color: var(--wa-color-brand-10) !important;
}
.profile {
  --wa-content-spacing: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100%;
}
.profile .profile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.profile .profile-inner .socials {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.terms-tags li {
  display: inline-block;
  margin: 10px;
}
.terms-tags a {
  display: block;
  padding: 5px 10px;
  color: #dddddd;
  color: var(--wa-color-text-normal);
  background: color-mix(in display-p3, #555555, black 30%);
  background: var(--wa-color-brand-30);
  border-radius: 6px;
  text-decoration: none;
}
.terms-tags sup {
  font-size: round(calc(round(calc(calc(1rem * 1) / 1.125), 1px) / 1.125), 1px);
  font-size: var(--wa-font-size-xs);
}

/* frontend/styles/syntax-highlighting.css */

/* src/_components/willamette/post_item.css */
wll-post-item {
  &[headline-only] {
    display: flex;
    justify-content: space-between;
    gap: var(--wa-space-s);
    > time {
      min-width: 5ch;
      text-align: right;
      margin-block-start: 0.175em;
    }
  }
  &:not([headline-only]) {
    display: block;
    overflow: hidden;
    border: solid 2px var(--wa-color-brand-border-quiet);
    border-radius: var(--wa-border-radius-l);
    corner-shape: squircle;
    padding: 1rem;
    height: 100%;
    position: relative;
    &::after {
      box-shadow: inset 0px 0px 1.25rem color-mix(in srgb, var(--wll-color-glow-shadow), transparent 50%);
      bottom: 0;
      content: "";
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }
  }
  figure {
    margin-block-start: -1rem;
    margin-inline-start: -1rem;
    margin-block-end: 1.5rem;
    width: calc(100% + 2rem);
    border-radius: 0;
  }
  img {
    display: block;
    aspect-ratio: 5 / 3;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center top;
    object-position: center top;
    border-radius: 0;
    &[src^="data:"] {
      width: 64px;
      padding-block-start: calc(9.75vw - 32px);
      padding-block-end: calc(9.75vw - 32px);
      aspect-ratio: initial;
      margin-inline: auto;
      opacity: 0.3;
      @media (max-width: 767px) {
        padding-block-start: 18vw;
        padding-block-end: 18vw;
      }
    }
  }
  h2 {
    font-size: var(--wa-font-size-xl);
    &:last-child {
      margin-block-end: var(--wa-space-s);
    }
  }
  hgroup > p {
    margin-block-end: calc(var(--wa-content-spacing) / 2);
  }
  time {
    display: block;
    font-size: var(--wa-font-size-s);
  }
}
.wa-dark wll-post-item:not([headline-only]) {
  box-shadow: inset 0px 0px 1.5rem var(--wa-color-brand-10);
  img[src^="data:"] {
    filter: invert();
  }
}
a:has(> wll-post-item) {
  text-decoration: none;
}
a:has(> wll-post-item:not([headline-only])) {
  color: inherit;
  h2 {
    color: var(--wa-color-text-link);
  }
}
ul:has(li > a > wll-post-item) {
  list-style-type: none;
  > li {
    margin-inline-start: 0;
  }
}
/*# sourceMappingURL=/_bridgetown/static/index.5DQEP74B.css.map */