:where([data-webtzm-form], .form-page-preview__body) {
    --wtzm-form-accent: #0068e8;
    --wtzm-form-accent-strong: #004fb8;
    --wtzm-form-accent-soft: #eaf3ff;
    --wtzm-form-ink: #172033;
    --wtzm-form-muted: #64748b;
    --wtzm-form-line: #cbd5e1;
    --wtzm-form-line-strong: #94a3b8;
    --wtzm-form-surface: #ffffff;
    --wtzm-form-subtle: #f8fafc;
    --wtzm-form-disabled: #f1f5f9;
    --wtzm-form-success: #067647;
    --wtzm-form-success-soft: #ecfdf3;
    --wtzm-form-danger: #b42318;
    --wtzm-form-danger-soft: #fff1f0;
    --wtzm-form-warning: #92400e;
    --wtzm-form-warning-soft: #fffbeb;
    color: var(--wtzm-form-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

:where([data-webtzm-form], .form-page-preview__body),
:where([data-webtzm-form], .form-page-preview__body) *,
:where([data-webtzm-form], .form-page-preview__body) *::before,
:where([data-webtzm-form], .form-page-preview__body) *::after {
    box-sizing: border-box;
}

[data-webtzm-form] {
    display: grid;
    inline-size: 100%;
    max-inline-size: 46rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--wtzm-form-line);
    border-radius: 1rem;
    margin-inline: auto;
    color: var(--wtzm-form-ink);
    background: var(--wtzm-form-surface);
    box-shadow: 0 20px 54px rgb(15 23 42 / .08);
}

.form-page-preview {
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--wtzm-form-line, #cbd5e1);
    border-radius: .9rem;
    background: var(--wtzm-form-surface, #ffffff);
}

.form-page-preview__browser {
    min-inline-size: 0;
    padding: .75rem;
    background: var(--wtzm-form-subtle, #f8fafc);
}

.form-page-preview__bar {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: .375rem;
}

.form-page-preview__bar > span {
    inline-size: .5rem;
    block-size: .5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--wtzm-form-line, #cbd5e1);
}

.form-page-preview__bar strong {
    min-inline-size: 0;
    margin-inline-start: .5rem;
    color: var(--wtzm-form-muted, #64748b);
    font-size: .75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.form-page-preview__body {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: clamp(1rem, 4vw, 1.5rem);
    border-block-start: 1px solid var(--wtzm-form-line);
    background: var(--wtzm-form-surface);
}

.form-page-preview__header {
    display: grid;
    gap: .3rem;
    padding-block-end: .25rem;
}

.form-page-preview__header strong {
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -.015em;
}

.form-page-preview__header p {
    margin: 0;
    color: var(--wtzm-form-muted);
    font-size: .875rem;
    line-height: 1.6;
}

.form-page-preview__fields {
    display: grid;
    min-inline-size: 0;
    gap: 1rem;
}

:where([data-webtzm-form] [data-wtzm-field], .form-page-preview__field) {
    display: grid;
    min-inline-size: 0;
    gap: .45rem;
    margin: 0;
}

:where([data-webtzm-form] [data-wtzm-field][hidden], .form-page-preview__field[hidden]),
:where([data-webtzm-form], .form-page-preview__body) input[type="hidden"] {
    display: none;
}

:where([data-webtzm-form] [data-wtzm-field] > label:not(.wtzm-choice), [data-webtzm-form] [data-wtzm-field] > fieldset > legend, .form-page-preview__field > span:first-child, .form-page-preview__field > legend) {
    min-inline-size: 0;
    padding: 0;
    color: var(--wtzm-form-ink);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.4;
}

:where([data-webtzm-form], .form-page-preview__body) fieldset {
    min-inline-size: 0;
    padding: 0;
    border: 0;
    margin: 0;
}

.wtzm-required {
    margin-inline-start: .2rem;
    color: var(--wtzm-form-danger);
    font-weight: 750;
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]), textarea, select) {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    border: 1px solid var(--wtzm-form-line);
    border-radius: .65rem;
    padding: .65rem .8rem;
    color: var(--wtzm-form-ink);
    background-color: var(--wtzm-form-surface);
    box-shadow: 0 1px 2px rgb(15 23 42 / .035);
    font: inherit;
    font-size: .9rem;
    line-height: 1.35;
    outline: 0;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

:where([data-webtzm-form], .form-page-preview__body) textarea {
    min-block-size: 7.5rem;
    resize: vertical;
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input, textarea)::placeholder {
    color: var(--wtzm-form-muted);
    opacity: .82;
}

:where([data-webtzm-form], .form-page-preview__body) select {
    appearance: none;
    padding-inline-end: 2.7rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) calc(50% - .125rem),
        calc(100% - .85rem) calc(50% - .125rem);
    background-repeat: no-repeat;
    background-size: .32rem .32rem;
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]), textarea, select):focus-visible {
    border-color: var(--wtzm-form-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-accent) 18%, transparent);
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]), textarea, select):disabled {
    color: var(--wtzm-form-muted);
    background: var(--wtzm-form-disabled);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .82;
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]), textarea, select):is([aria-invalid="true"], :user-invalid) {
    border-color: var(--wtzm-form-danger);
    background-color: var(--wtzm-form-danger-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-danger) 12%, transparent);
}

[data-webtzm-form] [data-wtzm-field][data-wtzm-validation-state="success"]
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]), textarea, select) {
    border-color: color-mix(in srgb, var(--wtzm-form-success) 52%, var(--wtzm-form-line));
}

.wtzm-choice-grid,
.form-page-preview__choice-row {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .55rem;
}

.wtzm-choice-grid:has(> :only-child) > .wtzm-choice,
.form-page-preview__field--choices > .form-page-preview__inline-choice {
    inline-size: 100%;
    max-inline-size: 20rem;
}

.wtzm-choice,
.form-page-preview__inline-choice,
.form-page-preview__choice-row > label {
    display: grid;
    min-block-size: 44px;
    min-inline-size: 0;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    padding: .65rem .75rem;
    border: 1px solid var(--wtzm-form-line);
    border-radius: .65rem;
    color: var(--wtzm-form-ink);
    background: var(--wtzm-form-surface);
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label):hover {
    border-color: var(--wtzm-form-line-strong);
    background: var(--wtzm-form-subtle);
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label):has(input:checked) {
    border-color: color-mix(in srgb, var(--wtzm-form-accent) 55%, var(--wtzm-form-line));
    background: var(--wtzm-form-accent-soft);
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label):has(input:focus-visible) {
    border-color: var(--wtzm-form-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-accent) 18%, transparent);
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label):has(input:disabled) {
    color: var(--wtzm-form-muted);
    background: var(--wtzm-form-disabled);
    cursor: not-allowed;
    opacity: .82;
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) > input {
    display: grid;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    min-inline-size: 1.25rem;
    min-block-size: 1.25rem;
    appearance: none;
    place-items: center;
    border: 2px solid var(--wtzm-form-line-strong);
    padding: 0;
    margin: 0;
    background: var(--wtzm-form-surface);
    cursor: inherit;
    outline: 0;
}

:where(.wtzm-choice, .form-page-preview__inline-choice) > input[type="checkbox"] {
    border-radius: .35rem;
}

.form-page-preview__choice-row > label > input[type="radio"],
.wtzm-choice > input[type="radio"] {
    border-radius: 999px;
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) > input::after {
    content: "";
    display: block;
    opacity: 0;
}

:where(.wtzm-choice, .form-page-preview__inline-choice) > input[type="checkbox"]::after {
    inline-size: .34rem;
    block-size: .64rem;
    border: solid #ffffff;
    border-width: 0 .13rem .13rem 0;
    transform: translateY(-.05rem) rotate(45deg);
}

:where(.wtzm-choice, .form-page-preview__choice-row > label) > input[type="radio"]::after {
    inline-size: .48rem;
    block-size: .48rem;
    border-radius: 999px;
    background: #ffffff;
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) > input:checked {
    border-color: var(--wtzm-form-accent);
    background: var(--wtzm-form-accent);
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) > input:checked::after {
    opacity: 1;
}

:where([data-webtzm-form] [data-wtzm-field], .form-page-preview__field)[aria-invalid="true"] :where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) {
    border-color: color-mix(in srgb, var(--wtzm-form-danger) 60%, var(--wtzm-form-line));
}

.wtzm-field-help,
.form-page-preview__file-note {
    color: var(--wtzm-form-muted);
    font-size: .75rem;
    font-weight: 450;
    line-height: 1.55;
}

.wtzm-field-error,
.form-page-preview__error {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    color: var(--wtzm-form-danger);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.45;
}

.wtzm-field-error::before,
.form-page-preview__error::before {
    content: "!";
    display: grid;
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    margin-block-start: .05rem;
    color: #ffffff;
    background: var(--wtzm-form-danger);
    font-size: .65rem;
    line-height: 1;
}

.wtzm-submit,
[data-preview-submit] {
    display: inline-flex;
    min-block-size: 44px;
    inline-size: fit-content;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--wtzm-form-accent);
    border-radius: .65rem;
    padding: .7rem 1.15rem;
    color: #ffffff;
    background: var(--wtzm-form-accent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--wtzm-form-accent) 20%, transparent);
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.wtzm-submit:is(:hover, :focus-visible),
[data-preview-submit]:is(:hover, :focus-visible) {
    border-color: var(--wtzm-form-accent-strong);
    background: var(--wtzm-form-accent-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-accent) 20%, transparent);
    outline: 0;
}

.wtzm-submit:active,
[data-preview-submit]:active {
    transform: translateY(1px);
}

.wtzm-submit:disabled,
[data-preview-submit]:disabled {
    border-color: var(--wtzm-form-line);
    color: var(--wtzm-form-muted);
    background: var(--wtzm-form-disabled);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

[data-wtzm-send-status],
.form-page-preview__send-status {
    display: flex;
    min-block-size: 44px;
    align-items: center;
    gap: .55rem;
    padding: .7rem .8rem;
    border: 1px solid var(--wtzm-form-line);
    border-radius: .65rem;
    margin: 0;
    color: var(--wtzm-form-muted);
    background: var(--wtzm-form-subtle);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.45;
}

[data-wtzm-send-status]:empty {
    display: none;
}

:where([data-wtzm-send-status], .form-page-preview__send-status)[data-status-tone="sending"] {
    border-color: color-mix(in srgb, var(--wtzm-form-accent) 35%, var(--wtzm-form-line));
    color: var(--wtzm-form-accent-strong);
    background: var(--wtzm-form-accent-soft);
}

:where([data-wtzm-send-status], .form-page-preview__send-status)[data-status-tone="success"] {
    border-color: color-mix(in srgb, var(--wtzm-form-success) 35%, var(--wtzm-form-line));
    color: var(--wtzm-form-success);
    background: var(--wtzm-form-success-soft);
}

:where([data-wtzm-send-status], .form-page-preview__send-status):is([data-status-tone="review"], [data-status-tone="error"]) {
    border-color: color-mix(in srgb, var(--wtzm-form-danger) 35%, var(--wtzm-form-line));
    color: var(--wtzm-form-danger);
    background: var(--wtzm-form-danger-soft);
}

:where([data-theme="dark"], .dark) :where([data-webtzm-form], .form-page-preview__body) {
    --wtzm-form-accent: #7cb6ff;
    --wtzm-form-accent-strong: #9ac7ff;
    --wtzm-form-accent-soft: #17375e;
    --wtzm-form-ink: #edf4ff;
    --wtzm-form-muted: #aab8cc;
    --wtzm-form-line: #30415b;
    --wtzm-form-line-strong: #526984;
    --wtzm-form-surface: #17243a;
    --wtzm-form-subtle: #111c30;
    --wtzm-form-disabled: #202d43;
    --wtzm-form-success: #75d9b9;
    --wtzm-form-success-soft: #16382f;
    --wtzm-form-danger: #ff9aa5;
    --wtzm-form-danger-soft: #3b2028;
    color-scheme: dark;
}

@media (max-width: 30rem) {
    [data-webtzm-form] {
        gap: 1rem;
        padding: 1rem;
        border-radius: .8rem;
    }

    .form-page-preview__body {
        padding: 1rem;
    }

    .wtzm-submit,
    [data-preview-submit] {
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where([data-webtzm-form], .form-page-preview__body) *,
    :where([data-webtzm-form], .form-page-preview__body) *::before,
    :where([data-webtzm-form], .form-page-preview__body) *::after {
        scroll-behavior: auto;
        transition: none;
    }
}