.react-aria-RadioGroup{display:flex;flex-direction:column;gap:8px;color:var(--text-color)}.react-aria-Radio{display:flex;align-items:center;gap:.571rem;font-size:1.143rem;color:var(--text-color);forced-color-adjust:none}.react-aria-Radio:before{content:"";display:block;width:1.286rem;height:1.286rem;box-sizing:border-box;border:.143rem solid var(--border-color);background:var(--field-background);border-radius:1.286rem;transition:all .2s}.react-aria-Radio[data-pressed]:before{border-color:var(--border-color-pressed)}.react-aria-Radio[data-selected]:before{border-color:var(--highlight-background);border-width:.429rem}.react-aria-Radio[data-selected][data-pressed]:before{border-color:var(--highlight-background-pressed)}.react-aria-Radio[data-focus-visible]:before{outline:2px solid var(--focus-ring-color);outline-offset:2px}.react-aria-Radio[data-invalid]:before{border-color:var(--invalid-color)}.react-aria-Radio[data-invalid][data-pressed]:before{border-color:var(--invalid-color-pressed)}.react-aria-RadioGroup .react-aria-FieldError{font-size:12px;color:var(--invalid-color)}.react-aria-RadioGroup [slot=description]{font-size:12px}.react-aria-RadioGroup[data-orientation=horizontal]{flex-direction:row;align-items:center}.react-aria-Radio[data-disabled]{color:var(--text-color-disabled)}.react-aria-Radio[data-disabled]:before{border-color:var(--border-color-disabled)}.builder{display:grid;gap:1.5rem;margin-inline:auto;max-width:80rem;padding-inline:1.5rem;width:100%}@media (width >= 800px){.builder{grid-template-columns:1fr 2fr}}.builder-setting-label{align-items:center;display:flex;gap:1rem}.builder-settings{display:flex;flex-direction:column;gap:1.5rem}.builder-code{display:flex;flex-direction:column;overflow:hidden}.react-aria-Checkbox{--selected-color: var(--highlight-background);--selected-color-pressed: var(--highlight-background-pressed);--checkmark-color: var(--highlight-foreground);display:flex;align-items:center;gap:.571rem;font-size:1.143rem;color:var(--text-color);forced-color-adjust:none}.react-aria-Checkbox .checkbox{width:1.143rem;height:1.143rem;border:2px solid var(--border-color);border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center}.react-aria-Checkbox svg{width:1rem;height:1rem;fill:none;stroke:var(--checkmark-color);stroke-width:3px;stroke-dasharray:22px;stroke-dashoffset:66;transition:all .2s}.react-aria-Checkbox[data-pressed] .checkbox{border-color:var(--border-color-pressed)}.react-aria-Checkbox[data-focus-visible] .checkbox{outline:2px solid var(--focus-ring-color);outline-offset:2px}.react-aria-Checkbox[data-selected] .checkbox,.react-aria-Checkbox[data-indeterminate] .checkbox{border-color:var(--selected-color);background:var(--selected-color)}.react-aria-Checkbox[data-selected][data-pressed] .checkbox,.react-aria-Checkbox[data-indeterminate][data-pressed] .checkbox{border-color:var(--selected-color-pressed);background:var(--selected-color-pressed)}.react-aria-Checkbox[data-selected] svg,.react-aria-Checkbox[data-indeterminate] svg{stroke-dashoffset:44}.react-aria-Checkbox[data-indeterminate] svg{stroke:none;fill:var(--checkmark-color)}.react-aria-Checkbox[data-invalid] .checkbox{--checkmark-color: var(--gray-50);border-color:var(--invalid-color)}.react-aria-Checkbox[data-invalid][data-pressed] .checkbox{border-color:var(--invalid-color-pressed)}.react-aria-Checkbox[data-invalid][data-selected] .checkbox,.react-aria-Checkbox[data-invalid][data-indeterminate] .checkbox{background:var(--invalid-color)}.react-aria-Checkbox[data-invalid][data-selected][data-pressed] .checkbox,.react-aria-Checkbox[data-invalid][data-indeterminate][data-pressed] .checkbox{background:var(--invalid-color-pressed)}.react-aria-Checkbox[data-disabled]{color:var(--text-color-disabled)}.react-aria-Checkbox[data-disabled] .checkbox{border-color:var(--border-color-disabled)}.react-aria-Form{display:flex;flex-direction:column;align-items:start;gap:8px}.react-aria-Form [role=alert]{border:2px solid var(--invalid-color);background:var(--overlay-background);border-radius:6px;padding:12px;max-width:250px;outline:none}.react-aria-Form [role=alert]:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.react-aria-Form [role=alert] h3{margin-top:0}.react-aria-Form [role=alert] p{margin-bottom:0}.react-aria-CheckboxGroup{display:flex;flex-direction:column;gap:.571rem;color:var(--text-color)}.react-aria-CheckboxGroup .react-aria-FieldError{font-size:12px;color:var(--invalid-color)}.react-aria-CheckboxGroup [slot=description]{font-size:12px}.react-aria-Tooltip{box-shadow:0 8px 20px #0000001a;border-radius:4px;background:var(--highlight-background);color:var(--highlight-foreground);forced-color-adjust:none;outline:none;padding:2px 8px;max-width:150px;transform:translateZ(0)}.react-aria-Tooltip[data-placement=top]{margin-bottom:8px;--origin: translateY(4px)}.react-aria-Tooltip[data-placement=bottom]{margin-top:8px;--origin: translateY(-4px)}.react-aria-Tooltip[data-placement=bottom] .react-aria-OverlayArrow svg{transform:rotate(180deg)}.react-aria-Tooltip[data-placement=right]{margin-left:8px;--origin: translateX(-4px)}.react-aria-Tooltip[data-placement=right] .react-aria-OverlayArrow svg{transform:rotate(90deg)}.react-aria-Tooltip[data-placement=left]{margin-right:8px;--origin: translateX(4px)}.react-aria-Tooltip[data-placement=left] .react-aria-OverlayArrow svg{transform:rotate(-90deg)}.react-aria-Tooltip .react-aria-OverlayArrow svg{display:block;fill:var(--highlight-background)}.react-aria-Tooltip[data-entering]{animation:slide .2s}.react-aria-Tooltip[data-exiting]{animation:slide .2s reverse ease-in}@keyframes slide{0%{transform:var(--origin);opacity:0}to{transform:translateY(0);opacity:1}}.codepanel{position:relative}.codepanel .line{counter-increment:lineno}.codepanel .line:before{content:counter(lineno);display:inline-flex;justify-content:flex-end;opacity:.5;padding-inline-end:1rem;text-align:right;-webkit-user-select:none;user-select:none;width:2.5rem}.codepanel-copy{position:absolute;top:1rem;right:1rem;z-index:50}.filebrowser{--bg: #24273a;--bg-highlight: #c6a0f626;--border: #5b6078;--fg: #cad3f5d0;--fg-highlight: #cad3f5;background:var(--bg);color:var(--fg);display:grid;height:100%;grid-template-columns:min-content auto}.filebrowser-tablist{border-right:1px solid var(--border);list-style:none;margin:0;padding-block:1rem;padding-inline:0;-webkit-user-select:none;user-select:none}.filebrowser-tab{align-items:center;background:var(--bg);border:none;color:var(--fg);display:flex;font-family:inherit;font-size:.875rem;height:2em;line-height:1;padding-inline:1.5rem;padding-block:0;-webkit-user-select:none;user-select:none;width:100%}.filebrowser-tab:hover{background:color-mix(in oklab,var(--bg-highlight),transparent 50%);color:var(--fg-highlight)}.filebrowser-tab:focus-visible{outline:2px solid var(--highlight-background)}.filebrowser-tab[aria-selected=true]{background:var(--bg-highlight);color:var(--fg-highlight)}.filebrowser-code{overflow-x:auto}.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)}@keyframes toggle{0%{opacity:0}to{opacity:1}}.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)}.react-aria-ModalOverlay{position:fixed;top:0;left:0;width:100vw;height:var(--visual-viewport-height);background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.react-aria-ModalOverlay[data-entering]{animation:modal-fade .2s}.react-aria-ModalOverlay[data-exiting]{animation:modal-fade .15s reverse ease-in}.react-aria-Modal{box-shadow:0 8px 20px #0000001a;border-radius:6px;background:var(--overlay-background);color:var(--text-color);border:1px solid var(--gray-400);outline:none;max-width:300px}.react-aria-Modal[data-entering]{animation:modal-zoom .3s cubic-bezier(.175,.885,.32,1.275)}.react-aria-Modal .react-aria-TextField{margin-bottom:8px}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-zoom{0%{transform:scale(.8)}to{transform:scale(1)}}@keyframes mymodal-blur{0%{background:#2d000000;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{background:#2d00004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}@keyframes mymodal-slide{0%{transform:translate(100%)}to{transform:translate(0)}}.react-aria-Dialog{outline:none;padding:30px;max-height:inherit;box-sizing:border-box;overflow:auto}.react-aria-Dialog .react-aria-Heading[slot=title]{line-height:1em;margin-top:0}.react-aria-Switch{display:flex;align-items:center;gap:.571rem;font-size:1.143rem;color:var(--text-color);forced-color-adjust:none}.react-aria-Switch .indicator{width:2rem;height:1.143rem;border:2px solid var(--border-color);background:var(--background-color);border-radius:1.143rem;transition:all .2s}.react-aria-Switch .indicator:before{content:"";display:block;margin:.143rem;width:.857rem;height:.857rem;background:var(--highlight-background);border-radius:16px;transition:all .2s}.react-aria-Switch[data-pressed] .indicator{border-color:var(--border-color-pressed)}.react-aria-Switch[data-pressed] .indicator:before{background:var(--highlight-background-pressed)}.react-aria-Switch[data-selected] .indicator{border-color:var(--highlight-background);background:var(--highlight-background)}.react-aria-Switch[data-selected] .indicator:before{background:var(--field-background);transform:translate(100%)}.react-aria-Switch[data-selected][data-pressed] .indicator{border-color:var(--highlight-background-pressed);background:var(--highlight-background-pressed)}.react-aria-Switch[data-focus-visible] .indicator{outline:2px solid var(--focus-ring-color);outline-offset:2px}.react-aria-Switch[data-disabled]{color:var(--text-color-disabled)}.react-aria-Switch[data-disabled] .indicator{border-color:var(--border-color-disabled)}.react-aria-Switch[data-disabled] .indicator:before{background:var(--border-color-disabled)}.react-aria-Popover{--background-color: var(--overlay-background);border:1px solid var(--border-color);box-shadow:0 8px 20px #0000001a;border-radius:6px;background:var(--background-color);color:var(--text-color);outline:none;max-width:250px}.react-aria-Popover .react-aria-OverlayArrow svg{display:block;fill:var(--background-color);stroke:var(--border-color);stroke-width:1px}.react-aria-Popover[data-placement=top]{--origin: translateY(8px)}.react-aria-Popover[data-placement=top]:has(.react-aria-OverlayArrow){margin-bottom:6px}.react-aria-Popover[data-placement=bottom]{--origin: translateY(-8px)}.react-aria-Popover[data-placement=bottom]:has(.react-aria-OverlayArrow){margin-top:6px}.react-aria-Popover[data-placement=bottom] .react-aria-OverlayArrow svg{transform:rotate(180deg)}.react-aria-Popover[data-placement=right]{--origin: translateX(-8px)}.react-aria-Popover[data-placement=right]:has(.react-aria-OverlayArrow){margin-left:6px}.react-aria-Popover[data-placement=right] .react-aria-OverlayArrow svg{transform:rotate(90deg)}.react-aria-Popover[data-placement=left]{--origin: translateX(8px)}.react-aria-Popover[data-placement=left]:has(.react-aria-OverlayArrow){margin-right:6px}.react-aria-Popover[data-placement=left] .react-aria-OverlayArrow svg{transform:rotate(-90deg)}.react-aria-Popover[data-entering]{animation:popover-slide .2s}.react-aria-Popover[data-exiting]{animation:popover-slide .2s reverse ease-in}@keyframes popover-slide{0%{transform:var(--origin);opacity:0}to{transform:translateY(0);opacity:1}}.infopanel p{font-size:.875rem;line-height:1.5}:root{font-family:Fragment Mono,"ui-monospace",SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;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-Link{color:var(--link-color);font-size:18px;transition:all .2s;text-decoration:underline;cursor:pointer;outline:none;position:relative}.react-aria-Link[data-hovered]{text-decoration-style:wavy}.react-aria-Link[data-pressed]{color:var(--link-color-pressed)}.react-aria-Link[data-focus-visible]:after{content:"";position:absolute;top:-3px;right:-6px;bottom:-3px;left:-6px;border-radius:6px;border:2px solid var(--focus-ring-color)}.react-aria-Link[data-disabled]{cursor:default;color:var(--text-color-disabled)}.header{margin-block:4rem}.header h1{margin-block-start:0}.header-layout{display:grid;gap:1.5rem}@media (width >= 800px){.header-layout{grid-template-columns:1fr 1fr}}.header-link{font-size:.875rem}.header-nav{text-align:right}.header-nav,.header-nav ul,.header-nav li{list-style:none;margin:0;padding:0}.header-nav a{color:var(--color-text);text-decoration:none}.instructions{margin-block-start:6rem;margin-block-end:4rem}.instructions p{line-height:1.6}.instructions a,.footer a{font-size:1em}.instructions-body{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fill,minmax(24em,1fr))}.footer{font-size:.875em;text-align:center;padding-block-end:4rem}.footer a{font-size:1em}@font-face{font-display:swap;font-family:Fragment Mono;font-style:normal;src:url(/assets/fonts/FragmentMono-Regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Fragment Mono;font-style:italic;src:url(/assets/fonts/FragmentMono-Italic.woff2) format("woff2")}:root{--wrapper-width: 80rem}html{height:100%}body{color:var(--text-color);font-size:100%;line-height:100%;margin:0}a{color:var(--link-color)}a:hover{color:var(--highlight-color)}a:focus-visible{outline:2px solid var(--highlight-background)}*,*:before,*:after{box-sizing:border-box}.wrapper{margin-inline:auto;padding-inline:1.5rem;max-width:var(--wrapper-width);width:100%}.shiki{font-size:.875rem;line-height:1.75;margin:0;padding:1rem}*::selection{background-color:var(--highlight-overlay)}