@layer reset{h1,h2,h3,h4,h5,h6{margin-block:0}}.interactive-category{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px}.interactive-category h1,.interactive-category h2,.interactive-category h3,.interactive-category h4,.interactive-category h5,.interactive-category h6{color:var(--color-body);font-family:var(--fontface-content);color:var(--color-body-heading);font-weight:700;font-size:1.333rem}.interactive-category{border-bottom:2px solid var(--color-content-separator)}.form{display:contents}.form .button-group{transition:margin-top,var(--duration-base)}.form .button-group{margin-top:var(--spacing-l)}.form .validation-error+.button-group{margin-top:0}@layer reset{h1,h2,h3,h4,h5,h6{margin-block:0}}.validation-error{overflow:hidden;transition:var(--duration-base)}.validation-error .wrapper{display:flex;min-height:2.4em;align-items:center}.validation-error .error-group{margin-top:var(--spacing-s);display:grid;gap:var(--spacing-m)}.validation-error .content{color:var(--color-body);font-family:var(--fontface-content);font-size:.95rem;font-weight:700;color:var(--color-primary);display:flex;gap:var(--spacing-s);align-items:center;padding:var(--spacing-s);padding-right:var(--spacing-m);border-radius:var(--border-radius-input);transition:background var(--duration-base)}.validation-error .text-icon{font-family:system-ui,sans-serif;font-weight:900;flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;font-size:1rem;box-sizing:border-box;width:var(--w);height:var(--w);margin-inline:var(--m);border-width:3px;border-style:solid;border-radius:20px;--w: calc(30px - 2 * var(--m));--m: 2px}.validation-error .error{color:var(--color-error);background:var(--color-error-bg)}.validation-error .error .text-icon{color:var(--color-error);border-color:var(--color-error)}.validation-error .info,.validation-error .unknown{background:var(--color-brand-light)}.validation-error .info .text-icon,.validation-error .unknown .text-icon{color:var(--color-brand-medium);border-color:var(--color-brand-medium)}@layer reset{h1,h2,h3,h4,h5,h6{margin-block:0}}@keyframes active-outline-activate{to{box-shadow:inset 0 0 0 calc(1px + var(--border-width, 2px)) var(--activated-color, var(--highlight-color, var(--color-active))),0 0 0 4px var(--outer-color)}}.text-field{display:flex;flex-direction:column}.text-field:has(.react-aria-Label){gap:var(--spacing-s)}.text-field .label-area{display:flex;justify-content:space-between}.text-field .react-aria-Label{display:flex;gap:var(--spacing-s)}.text-field{color:var(--color-body)}[data-disabled].text-field{opacity:.66}.text-field .react-aria-Label{color:var(--color-body);font-family:var(--fontface-content);font-size:.95rem;font-weight:700;color:var(--color-primary)}.text-field .react-aria-Label .field-detail{color:var(--color-interactive-text-secondary)}.text-field .kind{cursor:default;color:var(--color-body);font-family:var(--fontface-content);font-size:.95rem;font-weight:700;color:var(--color-primary);color:var(--color-interactive-text-secondary)}.text-field .react-aria-Text{color:var(--color-body);font-family:var(--fontface-content);font-size:.95rem;color:var(--color-interactive-text)}.text-field .react-aria-Input{color:var(--color-body);font-family:var(--fontface-content);font-size:1rem;padding:var(--spacing-input-inner);border-radius:var(--border-radius-input);background:var(--color-paper)}.text-field .react-aria-TextArea{color:var(--color-body);font-family:var(--fontface-content);font-size:1rem;display:block;margin-block:0;padding:var(--spacing-input-inner);border-radius:var(--border-radius-input);background:var(--color-paper)}.text-field .react-aria-TextArea,.text-field .react-aria-Input{border:none;outline:none}.text-field .react-aria-TextArea{resize:none;overflow:hidden}.text-field:has([data-focused]) .react-aria-Label{color:var(--color-active)}.text-field .react-aria-Input,.text-field .react-aria-TextArea{transition:var(--easing, var(--easing-base)) var(--duration, var(--duration-base)) box-shadow;--border-width: 1px;--highlight-color: var(--color-interactive);--activated-color: var(--color-active);--outer-color: var(--color-control-glow);box-shadow:inset 0 0 0 var(--border-width, 2px) var(--rest-color, var(--color-control-outline-2))}.text-field .react-aria-Input[data-hovered]:not([data-disabled]),.text-field .react-aria-TextArea[data-hovered]:not([data-disabled]){box-shadow:inset 0 0 0 var(--border-width, 2px) var(--highlight-color, var(--color-control-outline--active)),0 0 0 4px var(--outer-color)}.text-field .react-aria-Input[data-focused],.text-field .react-aria-TextArea[data-focused]{animation:active-outline-activate 0ms forwards}
