body{margin:3vw}h1{color:var(--text-color)}.react-aria-TextField+.react-aria-TextField{margin-top:2rem}.log{color:var(--text-color);background-color:var(--field-background);margin-top:2rem;padding:2rem}:root{font-family:system-ui;font-size:14px;line-height:1.5;background:var(--background-color)}:root{--background-color: #f8f8f8;--gray-50: #ffffff;--gray-100: #d0d0d0;--gray-200: #afafaf;--gray-300: #8f8f8f;--gray-400: #717171;--gray-500: #555555;--gray-600: #393939;--purple-100: #d5c9fa;--purple-200: #b8a3f6;--purple-300: #997cf2;--purple-400: #7a54ef;--purple-500: #582ddc;--purple-600: #3c1e95;--red-100: #f7c4ba;--red-200: #f29887;--red-300: #eb664d;--red-400: #de2300;--red-500: #a81b00;--red-600: #731200;--highlight-hover: rgb(0 0 0 / .07);--highlight-pressed: rgb(0 0 0 / .15)}@media (prefers-color-scheme: dark){:root{--background-color: #1d1d1d;--gray-50: #101010;--gray-100: #393939;--gray-200: #4f4f4f;--gray-300: #686868;--gray-400: #848484;--gray-500: #a7a7a7;--gray-600: #cfcfcf;--purple-100: #3c1e95;--purple-200: #522acd;--purple-300: #6f46ed;--purple-400: #8e6ef1;--purple-500: #b099f5;--purple-600: #d5c8fa;--red-100: #721200;--red-200: #9c1900;--red-300: #cc2000;--red-400: #e95034;--red-500: #f08c79;--red-600: #f7c3ba;--highlight-hover: rgb(255 255 255 / .1);--highlight-pressed: rgb(255 255 255 / .2)}}:root{--focus-ring-color: var(--purple-400);--text-color: var(--gray-600);--text-color-base: var(--gray-500);--text-color-hover: var(--gray-600);--text-color-disabled: var(--gray-200);--text-color-placeholder: var(--gray-400);--link-color: var(--purple-500);--link-color-secondary: var(--gray-500);--link-color-pressed: var(--purple-600);--border-color: var(--gray-300);--border-color-hover: var(--gray-400);--border-color-pressed: var(--gray-400);--border-color-disabled: var(--gray-100);--field-background: var(--gray-50);--field-text-color: var(--gray-600);--overlay-background: var(--gray-50);--button-background: var(--gray-50);--button-background-pressed: var(--background-color);--highlight-background: #6f46ed;--highlight-background-pressed: #522acd;--highlight-background-invalid: #cc2000;--highlight-foreground: white;--highlight-foreground-pressed: #ddd;--highlight-overlay: rgb(from #6f46ed r g b / 15%);--invalid-color: var(--red-400);--invalid-color-pressed: var(--red-500)}@media (forced-colors: active){:root{--background-color: Canvas;--focus-ring-color: Highlight;--text-color: ButtonText;--text-color-base: ButtonText;--text-color-hover: ButtonText;--text-color-disabled: GrayText;--text-color-placeholder: ButtonText;--link-color: LinkText;--link-color-secondary: LinkText;--link-color-pressed: LinkText;--border-color: ButtonBorder;--border-color-hover: ButtonBorder;--border-color-pressed: ButtonBorder;--border-color-disabled: GrayText;--field-background: Field;--field-text-color: FieldText;--overlay-background: Canvas;--button-background: ButtonFace;--button-background-pressed: ButtonFace;--highlight-background: Highlight;--highlight-background-pressed: Highlight;--highlight-background-invalid: LinkText;--highlight-foreground: HighlightText;--highlight-foreground-pressed: HighlightText;--invalid-color: LinkText;--invalid-color-pressed: LinkText}}.react-aria-Button{color:var(--text-color);background:var(--button-background);border:1px solid var(--border-color);border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;font-size:1rem;text-align:center;margin:0;outline:none;padding:6px 10px;text-decoration:none}.react-aria-Button[data-pressed]{box-shadow:inset 0 1px 2px #0000001a;background:var(--button-background-pressed);border-color:var(--border-color-pressed)}.react-aria-Button[data-focus-visible]{outline:2px solid var(--focus-ring-color);outline-offset:-1px}.react-aria-Button[data-disabled]{border-color:var(--border-color-disabled);color:var(--text-color-disabled)}.react-aria-TextField{display:flex;flex-direction:column;width:fit-content;color:var(--text-color)}.react-aria-TextField .react-aria-Input,.react-aria-TextField .react-aria-TextArea{padding:.286rem;margin:0;border:1px solid var(--border-color);border-radius:6px;background:var(--field-background);font-size:1.143rem;color:var(--field-text-color)}.react-aria-TextField .react-aria-Input[data-focused],.react-aria-TextField .react-aria-TextArea[data-focused]{outline:2px solid var(--focus-ring-color);outline-offset:-1px}.react-aria-TextField .react-aria-Input[data-invalid],.react-aria-TextField .react-aria-TextArea[data-invalid]{border-color:var(--invalid-color)}.react-aria-TextField .react-aria-FieldError{font-size:12px;color:var(--invalid-color)}.react-aria-TextField [slot=description]{font-size:12px}.react-aria-TextField .react-aria-Input[data-disabled],.react-aria-TextField .react-aria-TextArea[data-disabled]{border-color:var(--border-color-disabled);color:var(--text-color-disabled)}