.sef {
    --sef-bg: oklch(96.5% .009 88);
    --sef-fg: oklch(14.5% .006 200);
    --sef-muted: oklch(46% .01 200);
    --sef-input: oklch(14.5% .006 200 / .2);
    --sef-flare: oklch(61% .19 31);

    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
    font-family: 'Manrope', sans-serif;
    color: var(--sef-fg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.sef *,
.sef *::before,
.sef *::after {
    box-sizing: border-box;
}

.sef [hidden] {
    display: none !important;
}

.sef p {
    margin: 0;
    padding: 0;
}

.sef .sef-field {
    display: grid;
    gap: .5rem;
}

.sef label {
    margin: 0;
    font-size: .875rem;
    line-height: 1;
    font-weight: 500;
    color: var(--sef-fg);
}

.sef input[type="text"],
.sef select,
.sef textarea {
    display: block;
    width: 100%;
    margin: 0;
    border: 1px solid var(--sef-input);
    border-radius: .375rem;
    background-color: transparent;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    color: var(--sef-fg);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5rem;
    transition: border-color .15s, box-shadow .15s;
}

.sef input[type="text"] {
    height: 2.25rem;
    padding: .25rem .75rem;
}

.sef textarea {
    padding: .75rem;
    resize: vertical;
}

.sef select {
    height: 2.5rem;
    padding: 0 2.25rem 0 .75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sef input::placeholder,
.sef textarea::placeholder {
    color: var(--sef-muted);
    opacity: 1;
}

.sef input[type="text"]:focus,
.sef select:focus,
.sef textarea:focus {
    outline: none;
    border-color: var(--sef-fg);
    box-shadow: 0 0 0 1px var(--sef-fg);
}

/* Validation */
.sef [aria-invalid="true"],
.sef [aria-invalid="true"]:focus {
    border-color: var(--sef-flare);
    box-shadow: 0 0 0 1px var(--sef-flare);
}

.sef .sef-error {
    font-size: .8125rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: oklch(45% .17 31);
}

.sef button.sef-submit,
.sef button.sef-submit:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    justify-self: start;
    height: 2.25rem;
    margin: 0;
    padding: .5rem 1rem;
    border: 0;
    border-radius: .375rem;
    background: var(--sef-fg);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    color: var(--sef-bg);
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s;
}

.sef button.sef-submit:hover {
    background: color-mix(in oklab, var(--sef-fg) 90%, transparent);
    color: var(--sef-bg);
}

.sef .sef-submit svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.sef button:focus-visible,
.sef a:focus-visible {
    outline: 2px solid var(--sef-flare);
    outline-offset: 2px;
}

.sef .sef-status {
    padding: .5rem 0 .5rem 1rem;
    border-left: 2px solid var(--sef-flare);
    font-size: .875rem;
    line-height: 1.5rem;
    color: var(--sef-fg);
}

.sef .sef-note {
    font-size: .75rem;
    line-height: 1.5rem;
    color: var(--sef-muted);
}

.sef .sef-note a,
.sef .sef-note a:link,
.sef .sef-note a:visited {
    color: inherit;
    text-decoration: underline;
}

@media (min-width: 768px) {

    .sef input[type="text"],
    .sef select,
    .sef textarea {
        font-size: .875rem;
    }
}