@supports (appearance: base-select) {
    .field > select,
    .field > select::picker(select) { appearance: base-select; }

    .field > select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-two);
        height: var(--tap-min);
        padding-inline: var(--space-four);
        border: var(--border-w) solid var(--border-hairline);
        border-radius: var(--radius-s);
        background-color: var(--bg-raised);
        color: var(--text-primary);
        font-family: var(--font-ui);
        font-weight: var(--weight-strong);
        letter-spacing: var(--tracking-control);
    }

    .field > select::select-fallback-button,
    .field > select::select-fallback-button-text { all: unset; }

    .field:has(> select) > svg { display: none; }

    .field > select::picker-icon {
        width: var(--space-four);
        height: var(--space-four);
        flex: none;
        background-color: var(--text-muted);
        color: transparent;
        -webkit-mask: var(--caret-mask) center / contain no-repeat;
        mask: var(--caret-mask) center / contain no-repeat;
        transition: transform var(--t-base) var(--e-standard);
    }

    .field > select:hover::picker-icon { background-color: var(--accent-text); }
    .field > select:open::picker-icon { transform: rotate(var(--turn-half)); }

    .field > select:open {
        border-color: var(--accent-text);
        box-shadow:
            0 0 0 var(--bar-accent)
            color-mix(in srgb, var(--navy) var(--mix-ring), transparent);
    }

    .field > select::picker(select) {
        margin-block-start: var(--space-one);
        padding: var(--space-one);
        max-height: var(--picker-max-h);
        overflow-y: auto;
        overscroll-behavior: contain;
        border: var(--border-w) solid var(--border-hairline);
        border-radius: var(--radius-s);
        background-color: var(--bg-canvas);
        box-shadow:
            0 var(--picker-shadow-y) var(--picker-shadow-blur) var(--picker-shadow-spread)
            color-mix(in srgb, var(--navy) var(--mix-shadow), transparent);
        scrollbar-width: thin;
        scrollbar-color: var(--accent-text) var(--bg-sunken);
        opacity: 0;
        transition:
            opacity var(--t-fast) var(--e-standard),
            display var(--t-fast) var(--e-standard) allow-discrete,
            overlay var(--t-fast) var(--e-standard) allow-discrete;
    }

    .field > select:open::picker(select) { opacity: 1; }

    @starting-style {
        .field > select:open::picker(select) { opacity: 0; }
    }

    .field > select option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-two);
        min-height: var(--tap-min);
        padding: var(--space-two) var(--space-three);
        border-radius: var(--radius-xs);
        background-color: transparent;
        color: var(--text-primary);
        font-family: var(--font-ui);
        font-size: var(--fs-body);
        font-weight: var(--weight-body);
        letter-spacing: var(--tracking-body);
        line-height: var(--lh-compact);
        cursor: pointer;
        transition: background-color var(--t-fast) var(--e-standard);
    }

    .field > select option:hover,
    .field > select option:focus { background-color: var(--bg-sunken); }

    .field > select option:checked {
        background-color: var(--navy);
        color: var(--text-inverse);
        font-weight: var(--weight-strong);
    }

    .field > select option:checked:hover { background-color: var(--navy); }

    .field > select option::checkmark {
        content: "";
        order: 1;
        width: var(--space-two);
        height: var(--space-two);
        flex: none;
        margin-inline-start: auto;
        border-radius: var(--radius-pill);
        background-color: var(--highlighter);
        opacity: 0;
    }

    .field > select option:checked::checkmark { opacity: 1; }
}

.toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--toast-flag-w);
    background: var(--toast-flag);
    clip-path: polygon(0 0, var(--fill) 0, var(--toast-flag-cut) var(--fill), 0 var(--fill));
}

.toast::after {
    content: "";
    position: absolute;
    left: var(--toast-glyph-inset);
    top: var(--half);
    width: var(--toast-glyph-size);
    height: var(--toast-glyph-size);
    transform: translateY(var(--half-back));
    background: var(--toast-glyph);
    -webkit-mask: var(--toast-mask) center / contain no-repeat;
    mask: var(--toast-mask) center / contain no-repeat;
}

:root[data-theme="dark"] .toast {
    --toast-flag: var(--highlighter);
    --toast-glyph: var(--ink);
}

.toast[data-open] {
    display: block;
    animation: toast-enter var(--t-enter) var(--e-emphasis);
    width: min(var(--container-narrow), calc(var(--view-w) - var(--pair) * var(--space-six)));
    padding-right: calc(var(--space-four) + var(--sig-size) + var(--space-four));
    min-height:
        calc(var(--sig-size) + var(--pair) * var(--space-three) + var(--pair) * var(--border-w));
}

@keyframes toast-enter {
    from { opacity: 0; transform: var(--toast-enter-from); }
    to { opacity: 1; transform: none; }
}

.toast b::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: var(--rule-accent);
    width: var(--fill);
    background: var(--border-subtle);
}

.toast b::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: var(--rule-accent);
    width: var(--fill);
    transform-origin: left;
    background: var(--toast-flag);
    animation: toast-drain var(--toast-life) linear forwards;
}

@keyframes toast-drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.toast b svg { display: none; }

.toast b {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    font-weight: var(--weight-strong);
    line-height: var(--lh-compact);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-primary);
}

.toast p {
    margin: var(--space-one) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--weight-body);
    line-height: var(--lh-compact);
    letter-spacing: var(--tracking-body);
    color: var(--text-body);
}

.toast[data-open] p::after {
    content: "";
    position: absolute;
    top: var(--half);
    right: var(--space-four);
    width: var(--sig-size);
    height: var(--sig-size);
    margin-top: calc(var(--sig-size) / var(--pair-back));
    background: var(--sig-art) center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .toast[data-open] { animation: none; }
    .toast b::after { animation: none; transform: scaleX(0); }
}