/* Content: headings, text, links media */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
}

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

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

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

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

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

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

hr {
    border: none;
    border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
    margin: var(--wa-space-xl) 0;
}

em,
i {
    font-style: italic;
}

strong,
b {
    font-weight: var(--wa-font-weight-bold);
}

s {
    text-decoration: line-through;
}

del,
ins,
mark {
    padding: 0.125em 0.25em;
}

ins {
    background-color: var(--wa-color-success-fill-quiet);
    color: var(--wa-color-success-on-normal);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
}

del {
    background-color: var(--wa-color-danger-fill-quiet);
    color: var(--wa-color-danger-on-normal);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    padding: 0.125em 0.25em;
}

mark {
    background-color: var(--wa-color-warning-fill-quiet);
    color: inherit;
    border-radius: var(--wa-border-radius-m);
    padding: 0.125em 0.25em;
}

small {
    font-size: 0.875em; /* relative */
}

sub,
sup {
    position: relative;
    font-size: 0.875em; /* relative */
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

abbr[title] {
    text-decoration: none;
    border-bottom: dashed 1px currentColor;
    cursor: help;
}

/* Links */
a {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);
}

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

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

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

/* Lists */
ul,
ol {
    padding: 0;
    margin: 0 0 var(--wa-space-xl) var(--wa-space-xl);
}

ul {
    list-style: disc;
}

li {
    padding: 0;
}

li > ul,
li > ol {
    margin-block-end: 0;
}

/* Definition lists */
dt {
    font-weight: var(--wa-font-weight-semibold);
}

dd {
    margin-inline-start: var(--wa-space-m);
}

/* Images, videos, iframes, etc. */
img,
svg,
picture,
video {
    max-width: 100%;
    height: auto;
}

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

iframe {
    border: none;
}

/* Print styles */
@media print {
    /* Show URLs for printed links */
    a:not(.anchor-heading)[href]::after {
        content: ' (' attr(href) ')';
    }
}

.wa-neutral,
:host([variant='neutral']),
:root {
    --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,
:host([variant='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,
:host([variant='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,
:host([variant='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,
:host([variant='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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    --min-column-size: initial;
}

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

/* #region Split */
[class*='wa-split'] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

[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;
}

/* #endregion */

/* #region Stack */
[class*='wa-stack'] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 0;
    list-style: none;
}

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

.wa-heading-xs,
.wa-heading-s,
.wa-heading-m,
.wa-heading-l,
.wa-heading-xl,
.wa-heading-2xl,
.wa-heading-3xl {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
}

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

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

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

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

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

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

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

.wa-body-xs,
.wa-body-s,
.wa-body-m,
.wa-body-l,
.wa-body-xl {
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
}

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

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

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

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

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

.wa-caption-xs,
.wa-caption-s,
.wa-caption-m,
.wa-caption-l,
.wa-caption-xl {
    color: var(--wa-color-text-quiet);
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-condensed);
}

.wa-caption-xs {
    font-size: var(--wa-font-size-2xs);
}

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

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

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

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

/* @import url('active/color.css'); */
/* @import url('../../color/rudimentary.css'); */
:where(:root),
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-rudimentary {
    --wa-color-red-95: #ffeeee;
    --wa-color-red-90: #ffdddd;
    --wa-color-red-80: #ffb6b8;
    --wa-color-red-70: #fb9191;
    --wa-color-red-60: #f16b5e;
    --wa-color-red-50: #da3c06;
    --wa-color-red-40: #a62c00;
    --wa-color-red-30: #812500;
    --wa-color-red-20: #601a00;
    --wa-color-red-10: #3d0d00;
    --wa-color-red-05: #290600;

    --wa-color-yellow-95: #fff497;
    --wa-color-yellow-90: #ffe571;
    --wa-color-yellow-80: #ffbd31;
    --wa-color-yellow-70: #f09d27;
    --wa-color-yellow-60: #d67f31;
    --wa-color-yellow-50: #b1612d;
    --wa-color-yellow-40: #8b4527;
    --wa-color-yellow-30: #703422;
    --wa-color-yellow-20: #53251c;
    --wa-color-yellow-10: #311613;
    --wa-color-yellow-05: #1f0d0b;

    --wa-color-green-95: #dafadc;
    --wa-color-green-90: #b9f4bc;
    --wa-color-green-80: #64e177;
    --wa-color-green-70: #2ec859;
    --wa-color-green-60: #00ac4a;
    --wa-color-green-50: #008840;
    --wa-color-green-40: #006734;
    --wa-color-green-30: #005128;
    --wa-color-green-20: #003b1c;
    --wa-color-green-10: #00230e;
    --wa-color-green-05: #001607;

    --wa-color-teal-95: #d1f9f1;
    --wa-color-teal-90: #a9f4e6;
    --wa-color-teal-80: #56ddcd;
    --wa-color-teal-70: #29c2ba;
    --wa-color-teal-60: #11a5a8;
    --wa-color-teal-50: #06828e;
    --wa-color-teal-40: #006271;
    --wa-color-teal-30: #004d5a;
    --wa-color-teal-20: #003843;
    --wa-color-teal-10: #002129;
    --wa-color-teal-05: #00151b;

    --wa-color-blue-95: #e1f4ff;
    --wa-color-blue-90: #caebff;
    --wa-color-blue-80: #87d1ff;
    --wa-color-blue-70: #4cb8ff;
    --wa-color-blue-60: #0099ff;
    --wa-color-blue-50: #0072ed;
    --wa-color-blue-40: #0053be;
    --wa-color-blue-30: #00409b;
    --wa-color-blue-20: #002e76;
    --wa-color-blue-10: #001a4e;
    --wa-color-blue-05: #000f36;

    --wa-color-indigo-95: #f1efff;
    --wa-color-indigo-90: #e7e3ff;
    --wa-color-indigo-80: #cbc1ff;
    --wa-color-indigo-70: #b3a3ff;
    --wa-color-indigo-60: #9b81ff;
    --wa-color-indigo-50: #7f56f9;
    --wa-color-indigo-40: #6427e7;
    --wa-color-indigo-30: #5102ca;
    --wa-color-indigo-20: #3a009b;
    --wa-color-indigo-10: #220064;
    --wa-color-indigo-05: #160046;

    --wa-color-violet-95: #f8edfd;
    --wa-color-violet-90: #f2e0fc;
    --wa-color-violet-80: #e3baf6;
    --wa-color-violet-70: #d498f1;
    --wa-color-violet-60: #c76ff2;
    --wa-color-violet-50: #ac44dc;
    --wa-color-violet-40: #862dad;
    --wa-color-violet-30: #6b218a;
    --wa-color-violet-20: #4f1568;
    --wa-color-violet-10: #310a42;
    --wa-color-violet-05: #20052d;

    --wa-color-gray-95: #f2f2f2;
    --wa-color-gray-90: #e6e6e6;
    --wa-color-gray-80: #c9c9c9;
    --wa-color-gray-70: #afafaf;
    --wa-color-gray-60: #959595;
    --wa-color-gray-50: #747474;
    --wa-color-gray-40: #585858;
    --wa-color-gray-30: #454545;
    --wa-color-gray-20: #313131;
    --wa-color-gray-10: #1d1d1d;
    --wa-color-gray-05: #131313;
}

/* @import url('../default/color.css'); */
/**
 * Foundational Colors and Semantic Colors
 */
:where(:root),
:host,
.wa-theme-default,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-light,
.wa-dark .wa-invert {
    color-scheme: light;
    color: var(--wa-color-text-normal);

    /**
    * Foundational Colors
    */

    /* Surfaces are background layers that other content rests on.
    * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
    --wa-color-surface-raised: white;
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: var(--wa-color-gray-95);
    --wa-color-surface-border: var(--wa-color-gray-90);

    /* Text colors are used for standard text elements.
    * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
    --wa-color-text-normal: var(--wa-color-gray-10);
    --wa-color-text-quiet: var(--wa-color-gray-40);
    --wa-color-text-link: var(--wa-color-blue-40);

    /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
    --wa-color-overlay-modal: color-mix(
        in oklab,
        var(--wa-color-gray-05) 50%,
        transparent
    );
    --wa-color-overlay-inline: color-mix(
        in oklab,
        var(--wa-color-gray-80) 20%,
        transparent
    );

    /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
    * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
    * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
    --wa-color-shadow: color-mix(
        in oklab,
        var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
        transparent
    );

    /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
    * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
    --wa-color-focus: var(--wa-color-blue-60);

    /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
    --wa-color-mix-hover: black 10%;
    --wa-color-mix-active: black 20%;

    /**
    * Semantic Colors
    * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
    * Within these groups, each color specifies a role -
    *  *  Fill for background colors or areas larger than a few pixels
    *  *  Border for borders, dividers, and other stroke-like elements
    *  *  On for content displayed on a fill with the corresponding attention
    * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
    */
    --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
    --wa-color-brand-fill-normal: var(--wa-color-blue-90);
    --wa-color-brand-fill-loud: var(--wa-color-blue-50);
    --wa-color-brand-border-quiet: var(--wa-color-blue-90);
    --wa-color-brand-border-normal: var(--wa-color-blue-80);
    --wa-color-brand-border-loud: var(--wa-color-blue-60);
    --wa-color-brand-on-quiet: var(--wa-color-blue-40);
    --wa-color-brand-on-normal: var(--wa-color-blue-30);
    --wa-color-brand-on-loud: white;

    --wa-color-success-fill-quiet: var(--wa-color-green-95);
    --wa-color-success-fill-normal: var(--wa-color-green-90);
    --wa-color-success-fill-loud: var(--wa-color-green-50);
    --wa-color-success-border-quiet: var(--wa-color-green-90);
    --wa-color-success-border-normal: var(--wa-color-green-80);
    --wa-color-success-border-loud: var(--wa-color-green-60);
    --wa-color-success-on-quiet: var(--wa-color-green-40);
    --wa-color-success-on-normal: var(--wa-color-green-30);
    --wa-color-success-on-loud: white;

    --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
    --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
    --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
    --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
    --wa-color-warning-border-normal: var(--wa-color-yellow-80);
    --wa-color-warning-border-loud: var(--wa-color-yellow-60);
    --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
    --wa-color-warning-on-normal: var(--wa-color-yellow-30);
    --wa-color-warning-on-loud: white;

    --wa-color-danger-fill-quiet: var(--wa-color-red-95);
    --wa-color-danger-fill-normal: var(--wa-color-red-90);
    --wa-color-danger-fill-loud: var(--wa-color-red-50);
    --wa-color-danger-border-quiet: var(--wa-color-red-90);
    --wa-color-danger-border-normal: var(--wa-color-red-80);
    --wa-color-danger-border-loud: var(--wa-color-red-60);
    --wa-color-danger-on-quiet: var(--wa-color-red-40);
    --wa-color-danger-on-normal: var(--wa-color-red-30);
    --wa-color-danger-on-loud: white;

    --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
    --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
    --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
    --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
    --wa-color-neutral-border-normal: var(--wa-color-gray-80);
    --wa-color-neutral-border-loud: var(--wa-color-gray-60);
    --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
    --wa-color-neutral-on-normal: var(--wa-color-gray-30);
    --wa-color-neutral-on-loud: white;
}

/** :host-context() is not supported in Safari, so we sync the class via JavaScript instead */
.wa-dark,
.wa-invert,
:host(.wa-dark) {
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    /**
    * Foundational Colors
    */
    --wa-color-surface-raised: var(--wa-color-gray-10);
    --wa-color-surface-default: var(--wa-color-gray-05);
    --wa-color-surface-lowered: color-mix(
        in oklab,
        var(--wa-color-surface-default),
        black 20%
    );
    --wa-color-surface-border: var(--wa-color-gray-20);

    --wa-color-text-normal: var(--wa-color-gray-95);
    --wa-color-text-quiet: var(--wa-color-gray-60);
    --wa-color-text-link: var(--wa-color-blue-70);

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

    /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
    --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-blue-60);

    --wa-color-mix-hover: black 8%;
    --wa-color-mix-active: black 16%;

    /**
    * Semantic Colors
    */
    --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
    --wa-color-brand-fill-normal: var(--wa-color-blue-20);
    --wa-color-brand-fill-loud: var(--wa-color-blue-50);
    --wa-color-brand-border-quiet: var(--wa-color-blue-20);
    --wa-color-brand-border-normal: var(--wa-color-blue-30);
    --wa-color-brand-border-loud: var(--wa-color-blue-40);
    --wa-color-brand-on-quiet: var(--wa-color-blue-60);
    --wa-color-brand-on-normal: var(--wa-color-blue-70);
    --wa-color-brand-on-loud: white;

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

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

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

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

:where(:root),
:host,
.wa-theme-active,
.wa-light,
.wa-dark .wa-invert {
    color-scheme: light;
    color: var(--wa-color-text-normal);

    /**
   * Foundational Colors
   */
    --wa-color-text-normal: var(--wa-color-gray-05);
    --wa-color-text-link: var(--wa-color-green-40);

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

    --wa-color-mix-hover: white 10%;
    --wa-color-mix-active: black 5%;

    /**
   * Semantic Colors
   */
    --wa-color-brand-fill-quiet: var(--wa-color-green-95);
    --wa-color-brand-fill-normal: var(--wa-color-green-90);
    --wa-color-brand-fill-loud: var(--wa-color-green-80);
    --wa-color-brand-border-quiet: var(--wa-color-green-90);
    --wa-color-brand-border-normal: var(--wa-color-green-80);
    --wa-color-brand-border-loud: var(--wa-color-green-70);
    --wa-color-brand-on-quiet: var(--wa-color-green-40);
    --wa-color-brand-on-normal: var(--wa-color-green-30);
    --wa-color-brand-on-loud: black;

    --wa-color-success-fill-quiet: var(--wa-color-green-95);
    --wa-color-success-fill-normal: var(--wa-color-green-90);
    --wa-color-success-fill-loud: var(--wa-color-green-80);
    --wa-color-success-border-quiet: var(--wa-color-green-90);
    --wa-color-success-border-normal: var(--wa-color-green-80);
    --wa-color-success-border-loud: var(--wa-color-green-70);
    --wa-color-success-on-quiet: var(--wa-color-green-40);
    --wa-color-success-on-normal: var(--wa-color-green-30);
    --wa-color-success-on-loud: black;

    --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
    --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
    --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
    --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
    --wa-color-warning-border-normal: var(--wa-color-yellow-80);
    --wa-color-warning-border-loud: var(--wa-color-yellow-70);
    --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
    --wa-color-warning-on-normal: var(--wa-color-yellow-30);
    --wa-color-warning-on-loud: black;

    --wa-color-danger-fill-quiet: var(--wa-color-red-95);
    --wa-color-danger-fill-normal: var(--wa-color-red-90);
    --wa-color-danger-fill-loud: var(--wa-color-red-70);
    --wa-color-danger-border-quiet: var(--wa-color-red-90);
    --wa-color-danger-border-normal: var(--wa-color-red-80);
    --wa-color-danger-border-loud: var(--wa-color-red-70);
    --wa-color-danger-on-quiet: var(--wa-color-red-40);
    --wa-color-danger-on-normal: var(--wa-color-red-30);
    --wa-color-danger-on-loud: black;

    --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
    --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
    --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
    --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
    --wa-color-neutral-border-normal: var(--wa-color-gray-80);
    --wa-color-neutral-border-loud: var(--wa-color-gray-70);
    --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
    --wa-color-neutral-on-normal: var(--wa-color-gray-30);
    --wa-color-neutral-on-loud: black;
}

.wa-dark,
.wa-invert,
:host(.wa-dark) {
    /**
   * Foundational Colors
   */
    --wa-color-surface-lowered: black;

    --wa-color-text-link: var(--wa-color-green-70);

    /**
   * Semantic Colors
   */
    --wa-color-brand-fill-quiet: var(--wa-color-green-10);
    --wa-color-brand-fill-normal: var(--wa-color-green-20);
    --wa-color-brand-fill-loud: var(--wa-color-green-80);
    --wa-color-brand-border-quiet: var(--wa-color-green-20);
    --wa-color-brand-border-normal: var(--wa-color-green-30);
    --wa-color-brand-border-loud: var(--wa-color-green-60);
    --wa-color-brand-on-quiet: var(--wa-color-green-80);
    --wa-color-brand-on-normal: var(--wa-color-green-90);
    --wa-color-brand-on-loud: black;

    --wa-color-success-fill-quiet: var(--wa-color-green-10);
    --wa-color-success-fill-normal: var(--wa-color-green-20);
    --wa-color-success-fill-loud: var(--wa-color-green-80);
    --wa-color-success-border-quiet: var(--wa-color-green-20);
    --wa-color-success-border-normal: var(--wa-color-green-30);
    --wa-color-success-border-loud: var(--wa-color-green-40);
    --wa-color-success-on-quiet: var(--wa-color-green-80);
    --wa-color-success-on-normal: var(--wa-color-green-90);
    --wa-color-success-on-loud: black;

    --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
    --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
    --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
    --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
    --wa-color-warning-border-normal: var(--wa-color-yellow-30);
    --wa-color-warning-border-loud: var(--wa-color-yellow-60);
    --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
    --wa-color-warning-on-normal: var(--wa-color-yellow-90);
    --wa-color-warning-on-loud: black;

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

    --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
    --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
    --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
    --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
    --wa-color-neutral-border-normal: var(--wa-color-gray-30);
    --wa-color-neutral-border-loud: var(--wa-color-gray-60);
    --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
    --wa-color-neutral-on-normal: var(--wa-color-gray-90);
    --wa-color-neutral-on-loud: black;
}

/* @import url('default/space.css'); */
/**
 * Spacing
 */
:where(:root),
:host {
    /* A multiplier is provided to uniformly increase or decrease all spacing. */
    --wa-space-scale: 1;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
    --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
    --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
    --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
}
/* @import url('default/outlines.css'); */
/**
  * Borders and outlines
  */
:where(:root),
:host {
    --wa-border-style: solid;

    /* A multiplier is provided to uniformly increase or decrease all border widths. */
    --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);

    /**
     * Focus
     */
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.1875rem; /* 3px */
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
        var(--wa-color-focus);
    --wa-focus-ring-offset: 0.0625rem; /* 1px */
}
/* @import url('active/typography.css'); */
/* @import url('../default/typography.css'); */
/**
 * Typography
 */
:where(:root),
:host {
    --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;

    /* The default type scale is roughly based on the Major Second scale (x1.125),
    * with each value rounded to the nearest whole pixel based on a 16px root font size.
    * For larger font sizes, every other step on the scale is skipped in order to maximize variation.
    * A multiplier is provided to uniformly increase or decrease all font sizes. */
    --wa-font-size-scale: 1;
    --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
    --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
    --wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
    --wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
    --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
    --wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
    --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
    --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */

    --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-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;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:where(:root),
:host,
.wa-theme-active {
    --wa-font-family-body: 'Inter', sans-serif;

    --wa-font-weight-semibold: 550;
    --wa-font-weight-bold: 650;
}

/* @import url('default/rounding.css'); */
/**
* Rounding
*/
:where(:root),
:host {
    /* A multiplier is provided to uniformly increase or decrease all border radii. */
    --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);

    /* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
    --wa-border-radius-pill: 9999px;
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
}
/* @import url('default/shadows.css'); */
/**
 * Shadows
 * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
 * A multiplier is provided for each shadow quality to uniformly scale all related values.
 */
:where(:root),
:host {
    --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);
}

/* @import url('default/transitions.css'); */
/**
 * Transitions
 */
:where(:root),
:host {
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
}

/* @import url('default/groups.css'); */
/**
 * Component Groups
 */
:where(:root),
:host,
.wa-theme-default,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-light,
.wa-dark,
.wa-invert {
    /* Form controls */
    --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-normal);

    --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-placeholder-color: var(--wa-color-gray-60);

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

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

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

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

    --wa-tooltip-border-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);
}

/* @import url('active/overrides.css'); */
:where(:root),
:host,
.wa-theme-active {
    --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0
            rgb(255 255 255 / 0.2) /* shine */,
        inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2)
            /* inner highlight */,
        inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */,
        var(--wa-shadow-s) /* outer shadow */;
    --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
        inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
        inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */,
        0 0 0 0 transparent /* outer shadow */;

    wa-card {
        box-shadow: var(--wa-theme-active-shadow-pop-out);
    }

    input:not([type='button'], [type='reset'], [type='submit'], :checked),
    select,
    textarea,
    :is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
    wa-input,
    wa-select,
    wa-textarea {
        &:not([appearance='filled']):not([disabled]) {
            --box-shadow: inset var(--wa-shadow-s);
        }
    }

    input[type='radio'],
    wa-radio {
        --background-color-checked: var(--wa-form-control-activated-color);
        --checked-icon-color: var(--wa-color-brand-on-loud);
        --checked-icon-scale: 0.4;
    }

    input[type='range'],
    wa-slider,
    wa-switch {
        --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
    }

    wa-progress-bar {
        box-shadow: inset var(--wa-shadow-s);

        &::part(indicator) {
            box-shadow: inset 0 -0.5em 1em -0.5em
                oklch(from var(--indicator-color) calc(l - 0.1) c h);
        }
    }
}

:where(:root),
:host,
.wa-theme-active,
.wa-dark,
.wa-light,
.wa-invert {
    /**
   * Rounding
   */
    --wa-border-radius-scale: 2;

    /**
   * Component Groups
   */
    --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
}