.interactive-editor { min-width: 0; color: var(--er-text); }
.interactive-editor :where(fieldset, .interactive-field, .interactive-editor-add) { min-width: 0; }
.interactive-card { margin-block: 1rem; padding: 1rem; border: 1px solid var(--er-border); border-radius: var(--er-radius-md, .75rem); background: var(--er-surface); }
.interactive-editor legend { float: none; width: auto; font-size: 1rem; font-weight: 650; padding-inline: .25rem; }
.interactive-card > legend > h3 { margin: 0; font-size: 1rem; }
.interactive-editor fieldset { margin-block: .75rem; }
.interactive-row { padding: .75rem; border: 1px solid var(--er-border); background: var(--er-surface-muted); }
.interactive-field { display: grid; gap: .35rem; margin-block: .65rem; }
.interactive-editor :where(input:not([type="checkbox"]), select) { min-height: 44px; width: 100%; max-width: 100%; padding: .6rem; color: var(--er-text); background: var(--er-surface); border: 1px solid var(--er-border-strong); border-radius: .35rem; }
.interactive-choice { display: flex; align-items: flex-start; gap: .5rem; margin-block: .5rem; overflow-wrap: anywhere; }
.interactive-choice input { flex: 0 0 auto; margin-block-start: .3rem; }
.interactive-controls, .interactive-editor-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.interactive-editor :where(button, input, select):focus-visible { outline: 3px solid var(--er-accent); outline-offset: 3px; }
.interactive-editor button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.interactive-editor :where(p, label, legend) { overflow-wrap: anywhere; }
@media (max-width: 420px) { .interactive-card, .interactive-row { padding: .65rem; } .interactive-controls button { width: 100%; } }
@media (forced-colors: active) { .interactive-editor :where(input, select, button, fieldset) { border-color: ButtonText; } .interactive-editor :focus-visible { outline-color: Highlight; } }