@charset "UTF-8";
/*! https://github.com/oscarpalmer/oui */
/**
 * Reset
 * ========================
 * 
 * A reset I use for a lot of personal stuff, and elsewhere, of course.
 * It's a mix of a few different resets mixed together with some of my own ideas.
 *
 * When rules are explained, such comments will be suffixed with one ore more square brackets
 * with a two-letter code, all of which are listed below. My own code is "OP", which are my initials.
 *
 * - Andy Bell's "A (more) Modern CSS Reset" [AB]
 *   https://andy-bell.co.uk/a-more-modern-css-reset/
 *
 * - Chris Coyier's "The Coyier CSS Starter" [CC]
 *   https://frontendmasters.com/blog/the-coyier-css-starter/
 *
 * - CSS Remedy [CR]
 *   https://github.com/jensimmons/cssremedy
 *
 * - Harry Roberts [HR]
 * - https://github.com/csswizardry
 *
 * - RESS [RS]
 *   https://github.com/filipelinhares/ress
 *
 * - Sanitize.css [SE]
 *   https://github.com/csstools/sanitize.css
 */
/**
 * Catch-alls
 */
:where(*) {
  padding: 0;
  margin: 0;
}

:where(*),
::after,
::before {
  box-sizing: border-box;
}

/**
 * Document
 */
:where(:root) {
  font-family: system-ui, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  /** Prevent text size inflation (e.g., after orientation change) [AB][RE][SE] */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  word-break: break-word;
}

:where(body) {
  min-height: 100vh;
  font-size: 1rem;
}

/**
 * General
 */
:where(a) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.125em;
}

:where(abbr[title], dfn[title]) {
  cursor: help;
}

:where(abbr[title]) {
  /** Add the correct text decoration in Safari [RS][SE] */
  text-decoration: underline;
  /** Ditto */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

:where(b, strong) {
  /** Add the correct font weight in Chrome, Edge, and Safari [RS][SE], without compounding [HR] */
  font-weight: bold;
}

:where(button, h1, h2, h3, h4, h5, h6, input, label, legend) {
  /** Set shorter line heights on headings and interactive elements [AB] */
  line-height: 1.125;
}

:where(button,
input[type=button i],
input[type=checkbox i],
input[type=file i],
input[type=image i],
input[type=radio i],
input[type=reset i],
input[type=submit i],
summary) {
  /** Correct the inability to style clickable types in iOS [HR][RS][SE] */
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  /** Ditto */
  cursor: pointer;
}

:where(code, kbd, output, pre, samp) {
  /** Specify the font family of code elements [HR][RS][SE] */
  font-family: monospace, monospace;
  /** Correct the odd 'em' font sizing in all browsers [HR][RS][SE] */
  font-size: inherit;
}

:where(details > summary:first-of-type) {
  /** Add the correct display in Safari [SE] */
  display: list-item;
}

:where(dl, ol, ul) :where(dl, ol, ul) {
  /** Remove the margin on nested lists in Chrome, Edge, and Safari [SE] */
  margin: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

:where(h1) {
  /** Consistent sizing across browsers [HR] */
  font-size: 2em;
}

:where(hr) {
  /** Add the correct box sizing in Firefox [CR][RS][SE] */
  height: 0;
  /** Show the overflow in Edge and IE [CR][RS] */
  overflow: visible;
  border-style: solid;
  border-width: 1px 0 0;
  /** // Correct the inheritance of border colour in Firefox [CR][RS][SE] */
  color: inherit;
}

:where(ins, u) {
  /** Prevent link styling [HR] */
  text-decoration: none;
}

:where(nav) :where(ol, ul),
:where(ul[class]) {
  list-style-type: none;
  padding: 0;
}

:where(nav li)::before {
  /** Prevent VoiceOver from ignoring list semantics in Safari [SE] */
  content: "​";
  float: left;
}

:where(pre) {
  /** Prevent overflow of the container in all browsers [SE] */
  overflow: auto;
  /** Overflow by default is bad… [CR] */
  white-space: pre-wrap;
}

:where(small, sub, sup) {
  font-size: 0.875rem;
}

:where(sub, sup) {
  vertical-align: baseline;
  line-height: 0;
  position: relative;
}

:where(sub) {
  bottom: -0.25em;
}

:where(sup) {
  top: -0.5em;
}

:where(table) {
  border-collapse: collapse;
  /** Correct table border colour in Chrome, Edge, and Safari [SE] */
  border-color: currentcolor;
  /** Modernized border spacing [HR] */
  border-spacing: 0;
  /** More legible numbers [HR] */
  font-variant-numeric: tabular-nums;
  /** Remove text indentation from table contents in Chrome, Edge, and Safari [RS][SE] */
  text-indent: 0;
}

/**
 * Form-related
 */
:where(button, input, optgroup, select, textarea) {
  /** Correct the font inheritance in Firefox, Edge, and Safari [HR][RS][SE] */
  font: inherit;
}

:where(button, input, select, textarea) {
  /** Change the inconsistent appearance in all browsers [SE] */
  padding: 0.25em 0.5em;
  /** Ditto for all */
  background-color: transparent;
  border: 1px solid WindowFrame;
  color: inherit;
  letter-spacing: inherit;
}

:where(fieldset) {
  /** Change the inconsistent appearance in all browsers [SE] */
  border: 1px solid darkgrey;
}

:where(optgroup) {
  /** Restore the font weight unset by previous rules [RS] */
  font-weight: bold;
}

:where(progress) {
  /** Add the correct vertical alignment in Chrome, Edge, and Firefox [RS][SE] */
  vertical-align: baseline;
}

:where(select, input[list]) {
  /** Change the inconsistent appearance in all browsers [SE] */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /** Ditto for all */
  padding-right: 1em;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
  background-position: right center/1em;
  background-repeat: no-repeat;
  border-radius: 0;
}

:where(select[multiple]) {
  /** Don't show the arrow for multiple choice selects [SE] */
  background-image: none;
}

:where(textarea) {
  /** Change the resize direction in all browsers [RS][SE] */
  resize: vertical;
}

:where([type=color i], [type=range i]) {
  /** Remove the padding in all browsers [SE] */
  padding: 0;
  /** Remove the border in all browsers [SE] */
  border-width: 0;
}

:where([type=search i]) {
  /** Correct the odd appearance in Chrome, Edge, and Safari [RS][SE] */
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  /** Correct the outline style in Safari [RS][SE] */
  outline-offset: -2px;
}

::file-selector-button {
  /** Correct the inability to style upload buttons in iOS and Safari [RS][SE] */
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  color: inherit;
  font: inherit;
  line-height: 1.25;
}

::-moz-placeholder {
  /** Better default text opacity [OP] */
  opacity: 0.67;
  /** Better default text color [HR][SE] */
  color: inherit;
}

::placeholder {
  /** Better default text opacity [OP] */
  opacity: 0.67;
  /** Better default text color [HR][SE] */
  color: inherit;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  /** Correct the cursor style of increment and decrement buttons in Safari [RS][SE] */
  height: auto;
}

::-webkit-search-decoration {
  /** Remove the inner padding in Chrome, Edge, and Safari on macOS [SE] */
  -webkit-appearance: none;
  appearance: none;
}

/**
 * Media-related
 */
:where(audio, canvas, embed, iframe, img, object, picture, svg, video) {
  max-inline-size: 100%;
  vertical-align: middle;
}

:where(audio, canvas, embed, iframe, img, object, svg, video) {
  display: block;
}

:where(audio) {
  /** Better default width [CR] */
  width: 100%;
}

:where(audio:not([controls])) {
  display: none;
}

:where(canvas, img, svg, video) {
  /** Proportional height based on width [HR] */
  block-size: auto;
}

:where(iframe) {
  border-style: none;
}

:where(img) {
  /** CSS magic! [HR] */
  background-repeat: no-repeat;
  /** Ditto */
  background-size: cover;
  /** Offset alt-text if image does not load [HR] */
  font-style: italic;
}

:where(picture) {
  /** Remove the unnecessary wrapping 'picture', while maintaining contents [CR] */
  display: contents;
}

:where(source) {
  /** Source elements have nothing to display, so we hide them entirely [CR] */
  display: none;
}

:where(svg:not([fill])) {
  fill: currentcolor;
}

/**
 * Attributes
 */
:where([disabled], [aria-disabled=true i]) {
  cursor: default;
}

[hidden] {
  display: none !important;
}

:where([aria-busy=true i]) {
  cursor: progress;
}

:where([aria-controls]) {
  cursor: pointer;
}

/**
 * Pseudo-classes
 */
:where(:target) {
  scroll-margin: 2rlh;
}

/**
 * Media queries
 */
@media (prefers-reduced-motion: no-preference) {
  :where(:root) {
    /** Allow for animations on auto-sizes [CC] */
    interpolate-size: allow-keywords;
  }
  :where(:root:focus-within) {
    /** Allow for smooth scrolling to focused elements */
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(:root:focus-within) {
    /** Disable smooth scrolling, when requested */
    scroll-behavior: auto;
  }
  /** Disable animations and transitions, when requested */
  :where(*),
  ::after,
  ::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*! https://github.com/oscarpalmer/oui */
:where(.oui-vh) {
  position: absolute !important;
}

:where(.oui-vh:not(:active, :focus, :focus-within)) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  clip: rect(1px, 1px 1px, 1px) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/*! https://github.com/oscarpalmer/oui */
:where(.oui-pill, .oui-tag) {
  --oui-shadow-mixed: color-mix(
  	in oklab,
  	var(--oui-shadow, var(--oui-gray-6)),
  	transparent 92.5%
  );
  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
  display: inline-flex;
  flex-flow: row nowrap;
  gap: 0.5em;
  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
  color: var(--oui-foreground, var(--oui-gray-8));
  line-height: 1.25;
}

:where(.oui-pill) {
  border-radius: 3em;
  padding: 0.5em 1em;
}

:where(.oui-tag) {
  border-radius: 0.25em;
  padding: 0.5em 0.75em;
}

:where(.oui-pill--small, .oui-tag--small) {
  font-size: 0.875em;
}

:where(.oui-pill--tiny, .oui-tag--tiny) {
  color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
  font-size: 0.75em;
}

:where(.oui-pill--tiny) {
  padding: 0.25em 0.75em;
}

:where(.oui-tag--tiny) {
  padding: 0.25em 0.5em;
}

.oui {
  /* Colors*/
}

:where(.oui-pill--blue, .oui-tag--blue) {
  --oui-background: var(--oui-blue-0);
  --oui-foreground: var(--oui-blue-8);
  --oui-shadow: var(--oui-blue-6);
}

:where(.oui-pill--green, .oui-tag--green) {
  --oui-background: var(--oui-green-0);
  --oui-foreground: var(--oui-green-8);
  --oui-shadow: var(--oui-green-6);
}

:where(.oui-pill--orange, .oui-tag--orange) {
  --oui-background: var(--oui-orange-0);
  --oui-foreground: var(--oui-orange-8);
  --oui-shadow: var(--oui-orange-6);
}

:where(.oui-pill--purple, .oui-tag--purple) {
  --oui-background: var(--oui-purple-0);
  --oui-foreground: var(--oui-purple-8);
  --oui-shadow: var(--oui-purple-6);
}

:where(.oui-pill--red, .oui-tag--red) {
  --oui-background: var(--oui-red-0);
  --oui-foreground: var(--oui-red-8);
  --oui-shadow: var(--oui-red-6);
}

:where(.oui-pill--yellow, .oui-tag--yellow) {
  --oui-background: var(--oui-yellow-0);
  --oui-foreground: var(--oui-yellow-8);
  --oui-shadow: var(--oui-yellow-6);
}

/*! https://github.com/oscarpalmer/oui */
:where(.oui-button) {
  --oui-background-percentage: 25%;
  --oui-foreground-percentage: 0%;
  --oui-outline-percentage: 100%;
  --oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
  --oui-shadow-percentage: 82.5%;
  --oui-shadow-value: color-mix(
  	in oklab,
  	var(--oui-outline-value, var(--oui-gray-6)),
  	transparent var(--oui-shadow-percentage)
  );
  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value);
  padding: 0.5em 0.75em;
  display: inline-flex;
  flex-flow: row wrap;
  gap: 0.75em;
  align-items: center;
  border-radius: 0.25em;
  background-color: color-mix(in oklab, var(--oui-background-value, var(--oui-gray-2)), transparent var(--oui-background-percentage));
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value, var(--oui-gray-6)), transparent var(--oui-outline-percentage));
  border: none;
  color: color-mix(in oklab, var(--oui-foreground-value, var(--oui-gray-8)), transparent var(--oui-foreground-percentage));
  line-height: 1.25;
  transition: 0.125s ease-in-out;
}

:where(.oui-button--blue) {
  --oui-background-value: var(--oui-blue-2);
  --oui-foreground-value: var(--oui-blue-8);
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-button--green) {
  --oui-background-value: var(--oui-green-2);
  --oui-foreground-value: var(--oui-green-8);
  --oui-outline-value: var(--oui-green-6);
}

:where(.oui-button--orange) {
  --oui-background-value: var(--oui-orange-2);
  --oui-foreground-value: var(--oui-orange-8);
  --oui-outline-value: var(--oui-orange-6);
}

:where(.oui-button--purple) {
  --oui-background-value: var(--oui-purple-2);
  --oui-foreground-value: var(--oui-purple-8);
  --oui-outline-value: var(--oui-purple-6);
}

:where(.oui-button--red) {
  --oui-background-value: var(--oui-red-2);
  --oui-foreground-value: var(--oui-red-8);
  --oui-outline-value: var(--oui-red-6);
}

:where(.oui-button--yellow) {
  --oui-background-value: var(--oui-yellow-2);
  --oui-foreground-value: var(--oui-yellow-8);
  --oui-outline-value: var(--oui-yellow-6);
}

:where(.oui-button--rounded) {
  padding: 0.5em 1em;
  flex-wrap: nowrap;
  border-radius: 5em;
  white-space: nowrap;
}

:where(.oui-button--small) {
  font-size: 0.875em;
}

:where(.oui-button--tiny) {
  --oui-foreground-percentage: 12.5%;
  font-size: 0.75em;
}

:where(.oui-button:focus-visible) {
  --oui-outline-percentage: 75%;
}

@media (hover: hover) {
  :where(.oui-button:not([disabled], [aria-disabled=true i]):hover) {
    --oui-background-percentage: 50%;
    --oui-foreground-percentage: 25%;
    --oui-shadow-percentage: 90%;
  }
}
:where(.oui-button:not([disabled], [aria-disabled=true i]):active) {
  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
}

:where(.oui-button[disabled], .oui-button[aria-disabled=true i]) {
  --oui-background-percentage: 80%;
  --oui-foreground-percentage: 20%;
  --oui-shadow-percentage: 95%;
  font-style: italic;
}

/*! https://github.com/oscarpalmer/oui */
:root {
  --oui-absolute: light-dark(white, black);
  --oui-blue-0: light-dark(oklch(99% 0.01 260deg), oklch(20% 0.08 250deg));
  --oui-blue-1: light-dark(oklch(98% 0.02 259deg), oklch(25% 0.09 251deg));
  --oui-blue-2: light-dark(oklch(95% 0.03 258deg), oklch(32% 0.1 252deg));
  --oui-blue-3: light-dark(oklch(90% 0.04 257deg), oklch(40% 0.09 253deg));
  --oui-blue-4: light-dark(oklch(80% 0.06 256deg), oklch(50% 0.08 254deg));
  --oui-blue-5: light-dark(oklch(70% 0.08 255deg), oklch(60% 0.07 255deg));
  --oui-blue-6: light-dark(oklch(60% 0.1 254deg), oklch(70% 0.06 256deg));
  --oui-blue-7: light-dark(oklch(50% 0.12 253deg), oklch(80% 0.05 257deg));
  --oui-blue-8: light-dark(oklch(42% 0.11 252deg), oklch(85% 0.04 258deg));
  --oui-blue-9: light-dark(oklch(35% 0.1 251deg), oklch(90% 0.03 259deg));
  --oui-blue-10: light-dark(oklch(30% 0.09 250deg), oklch(95% 0.02 260deg));
  --oui-green-0: light-dark(oklch(99% 0.01 150deg), oklch(20% 0.08 140deg));
  --oui-green-1: light-dark(oklch(98% 0.02 149deg), oklch(25% 0.09 141deg));
  --oui-green-2: light-dark(oklch(95% 0.03 148deg), oklch(32% 0.1 142deg));
  --oui-green-3: light-dark(oklch(90% 0.04 147deg), oklch(40% 0.09 143deg));
  --oui-green-4: light-dark(oklch(80% 0.06 146deg), oklch(50% 0.08 144deg));
  --oui-green-5: light-dark(oklch(70% 0.08 145deg), oklch(60% 0.07 145deg));
  --oui-green-6: light-dark(oklch(60% 0.1 144deg), oklch(70% 0.06 146deg));
  --oui-green-7: light-dark(oklch(50% 0.12 143deg), oklch(80% 0.05 147deg));
  --oui-green-8: light-dark(oklch(42% 0.11 142deg), oklch(85% 0.04 148deg));
  --oui-green-9: light-dark(oklch(35% 0.1 141deg), oklch(90% 0.03 149deg));
  --oui-green-10: light-dark(oklch(30% 0.09 140deg), oklch(95% 0.02 150deg));
  --oui-orange-0: light-dark(oklch(99% 0.02 60deg), oklch(20% 0.08 50deg));
  --oui-orange-1: light-dark(oklch(98.5% 0.035 59deg), oklch(25% 0.09 51deg));
  --oui-orange-2: light-dark(oklch(97% 0.05 58deg), oklch(32% 0.1 52deg));
  --oui-orange-3: light-dark(oklch(93% 0.07 57deg), oklch(40% 0.09 53deg));
  --oui-orange-4: light-dark(oklch(87% 0.1 56deg), oklch(50% 0.08 54deg));
  --oui-orange-5: light-dark(oklch(76% 0.11 55deg), oklch(60% 0.07 55deg));
  --oui-orange-6: light-dark(oklch(65% 0.12 54deg), oklch(70% 0.06 56deg));
  --oui-orange-7: light-dark(oklch(55% 0.14 53deg), oklch(80% 0.05 57deg));
  --oui-orange-8: light-dark(oklch(45% 0.12 52deg), oklch(85% 0.04 58deg));
  --oui-orange-9: light-dark(oklch(37.5% 0.11 51deg), oklch(90% 0.03 59deg));
  --oui-orange-10: light-dark(oklch(30% 0.09 50deg), oklch(95% 0.02 60deg));
  --oui-purple-0: light-dark(oklch(99% 0.02 300deg), oklch(20% 0.08 290deg));
  --oui-purple-1: light-dark(oklch(98% 0.035 299deg), oklch(25% 0.09 291deg));
  --oui-purple-2: light-dark(oklch(95% 0.05 298deg), oklch(32% 0.1 292deg));
  --oui-purple-3: light-dark(oklch(90% 0.07 297deg), oklch(40% 0.09 293deg));
  --oui-purple-4: light-dark(oklch(80% 0.1 296deg), oklch(50% 0.08 294deg));
  --oui-purple-5: light-dark(oklch(70% 0.11 295deg), oklch(60% 0.07 295deg));
  --oui-purple-6: light-dark(oklch(60% 0.12 294deg), oklch(70% 0.06 296deg));
  --oui-purple-7: light-dark(oklch(50% 0.14 293deg), oklch(80% 0.05 297deg));
  --oui-purple-8: light-dark(oklch(42% 0.12 292deg), oklch(85% 0.04 298deg));
  --oui-purple-9: light-dark(oklch(35% 0.11 291deg), oklch(90% 0.03 299deg));
  --oui-purple-10: light-dark(oklch(30% 0.09 290deg), oklch(95% 0.02 300deg));
  --oui-red-0: light-dark(oklch(99% 0.024 25deg), oklch(20% 0.08 25deg));
  --oui-red-1: light-dark(oklch(98.5% 0.032 24deg), oklch(25% 0.09 24deg));
  --oui-red-2: light-dark(oklch(97% 0.05 23deg), oklch(32% 0.1 23deg));
  --oui-red-3: light-dark(oklch(93% 0.07 22deg), oklch(40% 0.09 22deg));
  --oui-red-4: light-dark(oklch(87% 0.1 21deg), oklch(50% 0.08 21deg));
  --oui-red-5: light-dark(oklch(76% 0.11 20deg), oklch(60% 0.07 20deg));
  --oui-red-6: light-dark(oklch(65% 0.12 19deg), oklch(70% 0.06 19deg));
  --oui-red-7: light-dark(oklch(55% 0.14 18deg), oklch(80% 0.05 18deg));
  --oui-red-8: light-dark(oklch(45% 0.12 17deg), oklch(85% 0.04 17deg));
  --oui-red-9: light-dark(oklch(37.5% 0.11 16deg), oklch(90% 0.03 16deg));
  --oui-red-10: light-dark(oklch(30% 0.09 15deg), oklch(95% 0.02 15deg));
  --oui-yellow-0: light-dark(oklch(99% 0.02 100deg), oklch(20% 0.08 90deg));
  --oui-yellow-1: light-dark(oklch(98.5% 0.035 99deg), oklch(25% 0.09 91deg));
  --oui-yellow-2: light-dark(oklch(97% 0.05 98deg), oklch(32% 0.1 92deg));
  --oui-yellow-3: light-dark(oklch(93% 0.07 97deg), oklch(40% 0.09 93deg));
  --oui-yellow-4: light-dark(oklch(87% 0.1 96deg), oklch(50% 0.08 94deg));
  --oui-yellow-5: light-dark(oklch(78% 0.11 95deg), oklch(60% 0.07 95deg));
  --oui-yellow-6: light-dark(oklch(65% 0.12 94deg), oklch(70% 0.06 96deg));
  --oui-yellow-7: light-dark(oklch(55% 0.14 93deg), oklch(80% 0.05 97deg));
  --oui-yellow-8: light-dark(oklch(45% 0.12 92deg), oklch(85% 0.04 98deg));
  --oui-yellow-9: light-dark(oklch(37.5% 0.11 91deg), oklch(90% 0.03 99deg));
  --oui-yellow-10: light-dark(oklch(30% 0.09 90deg), oklch(95% 0.02 100deg));
  --oui-gray-0: light-dark(oklch(98% 0 0deg), oklch(22% 0 0deg));
  --oui-gray-1: light-dark(oklch(98% 0 0deg), oklch(26% 0 0deg));
  --oui-gray-2: light-dark(oklch(95% 0 0deg), oklch(32% 0 0deg));
  --oui-gray-3: light-dark(oklch(90% 0 0deg), oklch(40% 0 0deg));
  --oui-gray-4: light-dark(oklch(80% 0 0deg), oklch(50% 0 0deg));
  --oui-gray-5: light-dark(oklch(70% 0 0deg), oklch(60% 0 0deg));
  --oui-gray-6: light-dark(oklch(60% 0 0deg), oklch(70% 0 0deg));
  --oui-gray-7: light-dark(oklch(50% 0 0deg), oklch(80% 0 0deg));
  --oui-gray-8: light-dark(oklch(42% 0 0deg), oklch(85% 0 0deg));
  --oui-gray-9: light-dark(oklch(35% 0 0deg), oklch(90% 0 0deg));
  --oui-gray-10: light-dark(oklch(30% 0 0deg), oklch(95% 0 0deg));
  --oui-slate-0: light-dark(oklch(99% 0.0025 255deg), oklch(22% 0.005 255deg));
  --oui-slate-1: light-dark(oklch(98% 0.005 255deg), oklch(26% 0.0075 255deg));
  --oui-slate-2: light-dark(oklch(95% 0.0075 255deg), oklch(32% 0.01 255deg));
  --oui-slate-3: light-dark(oklch(90% 0.01 255deg), oklch(40% 0.0125 255deg));
  --oui-slate-4: light-dark(oklch(80% 0.015 255deg), oklch(50% 0.015 255deg));
  --oui-slate-5: light-dark(oklch(70% 0.02 255deg), oklch(60% 0.02 255deg));
  --oui-slate-6: light-dark(oklch(60% 0.015 255deg), oklch(70% 0.015 255deg));
  --oui-slate-7: light-dark(oklch(50% 0.0125 255deg), oklch(80% 0.0125 255deg));
  --oui-slate-8: light-dark(oklch(42% 0.01 255deg), oklch(85% 0.01 255deg));
  --oui-slate-9: light-dark(oklch(35% 0.0075 255deg), oklch(90% 0.0075 255deg));
  --oui-slate-10: light-dark(oklch(30% 0.005 255deg), oklch(95% 0.005 255deg));
  --oui-stone-0: light-dark(oklch(99% 0.0033 95deg), oklch(22% 0.005 95deg));
  --oui-stone-1: light-dark(oklch(98% 0.0067 95deg), oklch(26% 0.0075 95deg));
  --oui-stone-2: light-dark(oklch(95% 0.01 95deg), oklch(32% 0.01 95deg));
  --oui-stone-3: light-dark(oklch(90% 0.0125 95deg), oklch(40% 0.0125 95deg));
  --oui-stone-4: light-dark(oklch(80% 0.015 95deg), oklch(50% 0.015 95deg));
  --oui-stone-5: light-dark(oklch(70% 0.02 95deg), oklch(60% 0.02 95deg));
  --oui-stone-6: light-dark(oklch(60% 0.015 95deg), oklch(70% 0.015 95deg));
  --oui-stone-7: light-dark(oklch(50% 0.0125 95deg), oklch(80% 0.0125 95deg));
  --oui-stone-8: light-dark(oklch(42% 0.01 95deg), oklch(85% 0.01 95deg));
  --oui-stone-9: light-dark(oklch(35% 0.0075 95deg), oklch(90% 0.0075 95deg));
  --oui-stone-10: light-dark(oklch(30% 0.005 95deg), oklch(95% 0.005 95deg));
}

/*! https://github.com/oscarpalmer/oui */
:where(.oui-card) {
  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 2px 4px -1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%);
  padding: 1em 1.25em;
  background-color: var(--oui-absolute);
  border-radius: 0.5em;
}

:where(.oui-details > summary) {
  display: inline-flex;
  align-items: center;
  list-style: none;
  outline: 4px solid color-mix(in oklab, var(--oui-blue-6), transparent var(--oui-outline-percentage, 100%));
  outline-offset: 0.25em;
  border-radius: 0.125em;
  transition: 0.125s ease-in-out, margin 0s;
  cursor: pointer;
}

:where(.oui-details > summary)::before {
  content: "";
  width: 1em;
  height: 1em;
  margin: 0 0.5em 0 0;
  background-color: currentcolor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: 0.125s ease-in-out;
  transform: rotate(-90deg);
}

:where(.oui-details > summary):focus-visible {
  --oui-outline-percentage: 50%;
  padding: 0 0.5em 0 0.25em;
  color: var(--oui-blue-8);
}

@media (hover: hover) {
  :where(.oui-details > summary):hover {
    color: var(--oui-blue-8);
  }
}
:where(.oui-details[open] > summary) {
  margin: 0 0 1em;
}

:where(.oui-details[open] > summary)::before {
  transform: rotate(0deg);
}

:where(.oui-formatted) {
  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 2px 4px -1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%);
  padding: 1em 1.25em;
  background-color: var(--oui-absolute);
  border-radius: 0.5em;
  color: var(--oui-gray-8);
  font-family: monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

:where(.oui-meter) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 0.75em;
  padding: 0.125em;
  overflow: hidden;
  background-color: var(--oui-absolute);
  background-image: none;
  border: 1px solid var(--oui-gray-3);
  border-radius: 0.375em;
}

:where(.oui-meter)::-moz-meter-bar {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-blue-5);
  background-image: none;
  border-radius: 0.25em;
}

:where(.oui-meter):-moz-meter-optimum::-moz-meter-bar {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-green-5);
  background-image: none;
  border-radius: 0.25em;
}

:where(.oui-meter):-moz-meter-sub-optimum::-moz-meter-bar {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-yellow-5);
  background-image: none;
  border-radius: 0.25em;
}

:where(.oui-meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-red-5);
  background-image: none;
  border-radius: 0.25em;
}

:where(.oui-meter)::-webkit-meter-bar {
  -webkit-appearance: none;
  appearance: none;
  background: none;
}

:where(.oui-meter)::-webkit-meter-even-less-good-value {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-red-5);
  background-image: none;
  border-radius: 0.25em;
}

:where(.oui-meter)::-webkit-meter-optimum-value {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-green-5);
  background-image: none;
  border-radius: 0.25em;
}

:where(.oui-meter)::-webkit-meter-suboptimum-value {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-yellow-5);
  background-image: none;
  border-radius: 0.25em;
}

:where(.oui-progress) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 0.75em;
  padding: 0.125em;
  overflow: hidden;
  background-color: var(--oui-absolute);
  background-image: none;
  border: 1px solid var(--oui-gray-3);
  border-radius: 0.375em;
}

:where(.oui-progress)::-moz-progress-bar {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-blue-5);
  background-image: none;
  border-radius: 0.25em;
}

:where(.oui-progress)::-webkit-progress-bar {
  -webkit-appearance: none;
  appearance: none;
  background: none;
}

:where(.oui-progress)::-webkit-progress-value {
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0.5em;
  background-color: var(--oui-blue-5);
  background-image: none;
  border-radius: 0.25em;
}

/*! https://github.com/oscarpalmer/oui */
:where(.fill) {
  flex: 1;
}

:where(.flow, .stack) {
  display: flex;
}

:where(.flow) {
  flex-flow: row wrap;
  align-items: center;
  gap: var(--flow-gap, 1rem);
}

:where(.flow-large, .flow--large) {
  gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
}

:where(.flow-nowrap, .flow--nowrap) {
  flex-wrap: nowrap;
}

:where(.flow-small, .flow--small) {
  gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
}

:where(.flow-text, .flow--text) {
  gap: var(--flow-gap-text, 1em);
}

:where(.stack) {
  flex-flow: column nowrap;
  gap: var(--stack-gap, 1rem);
}

:where(.stack-large, .stack--large) {
  gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
}

:where(.stack-small, .stack--small) {
  gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
}

:where(.stack-text, .stack--text) {
  gap: var(--stack-gap-text, 1em);
}

:where(.flex-reverse[class^=flow i], .flex-reverse[class*=" flow" i], .flex--reverse[class^=flow i], .flex--reverse[class*=" flow" i]) {
  flex-direction: row-reverse;
}

:where(.flex-reverse[class^=stack i], .flex-reverse[class*=" stack" i], .flex--reverse[class^=stack i], .flex--reverse[class*=" stack" i]) {
  flex-direction: column-reverse;
}

:where(.flex-ac-c, .flex-ac--c) {
  align-content: center;
}

:where(.flex-ac-fe, .flex-ac--fe) {
  align-content: flex-end;
}

:where(.flex-ac-fs, .flex-ac--fs) {
  align-content: flex-start;
}

:where(.flex-ac-s, .flex-ac--s) {
  align-content: stretch;
}

:where(.flex-ai-c, .flex-ai--c) {
  align-items: center;
}

:where(.flex-ai-fe, .flex-ai--fe) {
  align-items: flex-end;
}

:where(.flex-ai-fs, .flex-ai--fs) {
  align-items: flex-start;
}

:where(.flex-ai-s, .flex-ai--s) {
  align-items: stretch;
}

:where(.flex-as-c, .flex-as--c) {
  align-self: center;
}

:where(.flex-as-fe, .flex-as--fe) {
  align-self: flex-end;
}

:where(.flex-as-fs, .flex-as--fs) {
  align-self: flex-start;
}

:where(.flex-as-s, .flex-as--s) {
  align-self: stretch;
}

:where(.flex-ac-sa, .flex-ac--sa) {
  align-content: space-around;
}

:where(.flex-ac-sb, .flex-ac--sb) {
  align-content: space-between;
}

:where(.flex-ac-se, .flex-ac--se) {
  align-content: space-evenly;
}

:where(.flex-jc-c, .flex-jc--c) {
  justify-content: center;
}

:where(.flex-jc-fe, .flex-jc--fe) {
  justify-content: flex-end;
}

:where(.flex-jc-fs, .flex-jc--fs) {
  justify-content: flex-start;
}

:where(.flex-jc-s, .flex-jc--s) {
  justify-content: stretch;
}

:where(.flex-ji-c, .flex-ji--c) {
  justify-items: center;
}

:where(.flex-ji-fe, .flex-ji--fe) {
  justify-items: flex-end;
}

:where(.flex-ji-fs, .flex-ji--fs) {
  justify-items: flex-start;
}

:where(.flex-ji-s, .flex-ji--s) {
  justify-items: stretch;
}

:where(.flex-js-c, .flex-js--c) {
  justify-self: center;
}

:where(.flex-js-fe, .flex-js--fe) {
  justify-self: flex-end;
}

:where(.flex-js-fs, .flex-js--fs) {
  justify-self: flex-start;
}

:where(.flex-js-s, .flex-js--s) {
  justify-self: stretch;
}

:where(.flex-jc-sa, .flex-jc--sa) {
  justify-content: space-around;
}

:where(.flex-jc-sb, .flex-jc--sb) {
  justify-content: space-between;
}

:where(.flex-jc-se, .flex-jc--se) {
  justify-content: space-evenly;
}

/*! https://github.com/oscarpalmer/oui */
:where(.oui-fieldset) {
  padding: 1em;
  border: 1px solid var(--oui-gray-3);
  border-radius: 0.25em;
}

:where(.oui-input) {
  --oui-background-value: var(--oui-absolute);
}

:where(.oui-input:not([type=range i])) {
  --oui-background-percentage: 0%;
  --oui-foreground-percentage: 0%;
  --oui-outline-percentage: 100%;
  --oui-outline-value: var(--oui-blue-6);
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
  outline-offset: 0;
  transition: 0.125s ease-in-out;
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
  padding: 0.5em 0.75em;
  border-radius: 0.25em;
}

:where(.oui-input:not([type=range i], select[multiple], textarea)) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:where(.oui-input:is([list]))::-webkit-calendar-picker-indicator {
  display: none !important;
}

:where(.oui-input:is([type=color i])) {
  padding: 0;
}

:where(.oui-input:is([type=date i],
[type=datetime-local i],
[type=month i],
[type=number i],
[type=tel i],
[type=time i],
[type=url i],
[type=week i])) {
  font-variant-numeric: tabular-nums;
}

:where(.oui-input:is([type=file i])) {
  padding-left: 0.5em;
}

:where(.oui-input:is([type=file i]))::file-selector-button {
  --oui-background-percentage: 25%;
  --oui-foreground-percentage: 0%;
  --oui-outline-percentage: 100%;
  --oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
  --oui-shadow-percentage: 82.5%;
  --oui-shadow-value: color-mix(
  	in oklab,
  	var(--oui-outline-value, var(--oui-gray-6)),
  	transparent var(--oui-shadow-percentage)
  );
  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value);
  padding: 0.5em 0.75em;
  display: inline-flex;
  flex-flow: row wrap;
  gap: 0.75em;
  align-items: center;
  border-radius: 0.25em;
  background-color: color-mix(in oklab, var(--oui-background-value, var(--oui-gray-2)), transparent var(--oui-background-percentage));
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value, var(--oui-gray-6)), transparent var(--oui-outline-percentage));
  border: none;
  color: color-mix(in oklab, var(--oui-foreground-value, var(--oui-gray-8)), transparent var(--oui-foreground-percentage));
  line-height: 1.25;
  transition: 0.125s ease-in-out;
  --oui-background-value: var(--oui-grey-2);
  --oui-outline-value: var(--oui-grey-6);
  margin: 0 0.75em 0 0;
  font-size: 0.75em;
  cursor: pointer;
}

:where(.oui-input:is([type=range i])) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

:where(.oui-input:is([type=range i]))::-moz-range-track {
  --oui-background-percentage: 0%;
  --oui-foreground-percentage: 0%;
  --oui-outline-percentage: 100%;
  --oui-outline-value: var(--oui-blue-6);
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
  outline-offset: 0;
  transition: 0.125s ease-in-out;
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.75em;
  border-radius: 0.75em;
  position: relative;
}

:where(.oui-input:is([type=range i]))::-ms-track {
  --oui-background-percentage: 0%;
  --oui-foreground-percentage: 0%;
  --oui-outline-percentage: 100%;
  --oui-outline-value: var(--oui-blue-6);
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
  outline-offset: 0;
  transition: 0.125s ease-in-out;
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
  appearance: none;
  width: 100%;
  height: 0.75em;
  border-radius: 0.75em;
  position: relative;
}

:where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track {
  --oui-background-percentage: 0%;
  --oui-foreground-percentage: 0%;
  --oui-outline-percentage: 100%;
  --oui-outline-value: var(--oui-blue-6);
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
  outline-offset: 0;
  transition: 0.125s ease-in-out;
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.75em;
  border-radius: 0.75em;
  position: relative;
}

:where(.oui-input:is([type=range i]))::-moz-range-thumb {
  --oui-background-percentage: 0%;
  --oui-background-value: var(--oui-blue-6);
  --oui-outline-percentage: 100%;
  --oui-outline-value: var(--oui-blue-6);
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
  outline-offset: 0;
  transition: 0.125s ease-in-out;
  -moz-appearance: none;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
  border: 1px solid var(--oui-absolute);
  border-radius: 1.25em;
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
  cursor: pointer;
}

:where(.oui-input:is([type=range i]))::-ms-thumb {
  --oui-background-percentage: 0%;
  --oui-background-value: var(--oui-blue-6);
  --oui-outline-percentage: 100%;
  --oui-outline-value: var(--oui-blue-6);
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
  outline-offset: 0;
  transition: 0.125s ease-in-out;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
  border: 1px solid var(--oui-absolute);
  border-radius: 1.25em;
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
  cursor: pointer;
}

:where(.oui-input:is([type=range i]))::-webkit-slider-thumb {
  --oui-background-percentage: 0%;
  --oui-background-value: var(--oui-blue-6);
  --oui-outline-percentage: 100%;
  --oui-outline-value: var(--oui-blue-6);
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
  outline-offset: 0;
  transition: 0.125s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
  border: 1px solid var(--oui-absolute);
  border-radius: 1.25em;
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
  cursor: pointer;
}

:where(.oui-input:is([type=range i]))::-webkit-slider-thumb {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i])) {
  --oui-border-value: var(--oui-red-5);
  --oui-foreground-value: var(--oui-red-9);
  --oui-outline-percentage: 82.5%;
  --oui-outline-value: var(--oui-red-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i]))::file-selector-button {
  --oui-background-value: var(--oui-red-2);
  --oui-foreground-value: var(--oui-red-8);
  --oui-outline-value: var(--oui-red-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i]))::-moz-range-thumb {
  --oui-background-value: var(--oui-red-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i]))::-ms-thumb {
  --oui-background-value: var(--oui-red-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i]))::-webkit-slider-thumb {
  --oui-background-value: var(--oui-red-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i]))::-moz-range-track {
  --oui-border-value: var(--oui-red-5);
  --oui-foreground-value: var(--oui-red-9);
  --oui-outline-percentage: 82.5%;
  --oui-outline-value: var(--oui-red-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i]))::-ms-track {
  --oui-border-value: var(--oui-red-5);
  --oui-foreground-value: var(--oui-red-9);
  --oui-outline-percentage: 82.5%;
  --oui-outline-value: var(--oui-red-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i]))::-webkit-slider-runnable-track {
  --oui-border-value: var(--oui-red-5);
  --oui-foreground-value: var(--oui-red-9);
  --oui-outline-percentage: 82.5%;
  --oui-outline-value: var(--oui-red-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
[aria-invalid=true i])) > option:checked {
  background-color: var(--oui-red-2);
  color: var(--oui-red-9);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i])) {
  --oui-border-value: var(--oui-green-5);
  --oui-foreground-value: var(--oui-green-9);
  --oui-outline-percentage: 82.5%;
  --oui-outline-value: var(--oui-green-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i]))::file-selector-button {
  --oui-background-value: var(--oui-green-2);
  --oui-foreground-value: var(--oui-green-8);
  --oui-outline-value: var(--oui-green-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i]))::-moz-range-track {
  --oui-border-value: var(--oui-green-5);
  --oui-foreground-value: var(--oui-green-9);
  --oui-outline-percentage: 82.5%;
  --oui-outline-value: var(--oui-green-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i]))::-ms-track {
  --oui-border-value: var(--oui-green-5);
  --oui-foreground-value: var(--oui-green-9);
  --oui-outline-percentage: 82.5%;
  --oui-outline-value: var(--oui-green-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i]))::-webkit-slider-runnable-track {
  --oui-border-value: var(--oui-green-5);
  --oui-foreground-value: var(--oui-green-9);
  --oui-outline-percentage: 82.5%;
  --oui-outline-value: var(--oui-green-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i]))::-moz-range-thumb {
  --oui-background-value: var(--oui-green-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i]))::-ms-thumb {
  --oui-background-value: var(--oui-green-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i]))::-webkit-slider-thumb {
  --oui-background-value: var(--oui-green-6);
}

:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
[aria-invalid=false i])) > option:checked {
  background-color: var(--oui-green-2);
  color: var(--oui-green-9);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator {
  outline: 4px solid transparent;
  outline-offset: 2px;
  border-radius: 2em;
  -webkit-transition: 0.125s ease-in-out;
  transition: 0.125s ease-in-out;
  cursor: pointer;
}

@media (hover: hover) {
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator:hover {
    outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
  }
}
:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator:focus {
  outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus), :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within) {
  --oui-border-value: var(--oui-blue-5);
  --oui-foreground-value: inherit;
  --oui-outline-percentage: 75%;
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::file-selector-button, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::file-selector-button {
  --oui-background-value: var(--oui-blue-2);
  --oui-foreground-value: var(--oui-blue-8);
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-thumb {
  --oui-border-value: var(--oui-blue-5);
  --oui-foreground-value: inherit;
  --oui-outline-percentage: 75%;
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-thumb {
  --oui-border-value: var(--oui-blue-5);
  --oui-foreground-value: inherit;
  --oui-outline-percentage: 75%;
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-thumb {
  --oui-border-value: var(--oui-blue-5);
  --oui-foreground-value: inherit;
  --oui-outline-percentage: 75%;
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-track {
  --oui-border-value: var(--oui-blue-5);
  --oui-foreground-value: inherit;
  --oui-outline-percentage: 75%;
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-track {
  --oui-border-value: var(--oui-blue-5);
  --oui-foreground-value: inherit;
  --oui-outline-percentage: 75%;
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-runnable-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-runnable-track {
  --oui-border-value: var(--oui-blue-5);
  --oui-foreground-value: inherit;
  --oui-outline-percentage: 75%;
  --oui-outline-value: var(--oui-blue-6);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-thumb {
  --oui-background-value: var(--oui-blue-6);
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-thumb {
  --oui-background-value: var(--oui-blue-6);
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
}

:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-thumb {
  --oui-background-value: var(--oui-blue-6);
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
}

@media (hover: hover) {
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover) {
    --oui-border-value: var(--oui-blue-4);
    --oui-foreground-percentage: 0%;
    --oui-foreground-value: inherit;
    --oui-outline-percentage: 90%;
    --oui-outline-value: var(--oui-blue-6);
  }
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::file-selector-button {
    --oui-background-value: var(--oui-blue-2);
    --oui-foreground-value: var(--oui-blue-8);
    --oui-outline-value: var(--oui-blue-6);
  }
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-moz-range-thumb {
    --oui-background-value: var(--oui-blue-5);
  }
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-ms-thumb {
    --oui-background-value: var(--oui-blue-5);
  }
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-webkit-slider-thumb {
    --oui-background-value: var(--oui-blue-5);
  }
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-moz-range-track {
    --oui-border-value: var(--oui-blue-4);
    --oui-foreground-percentage: 0%;
    --oui-foreground-value: inherit;
    --oui-outline-percentage: 90%;
    --oui-outline-value: var(--oui-blue-6);
  }
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-ms-track {
    --oui-border-value: var(--oui-blue-4);
    --oui-foreground-percentage: 0%;
    --oui-foreground-value: inherit;
    --oui-outline-percentage: 90%;
    --oui-outline-value: var(--oui-blue-6);
  }
  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-webkit-slider-runnable-track {
    --oui-border-value: var(--oui-blue-4);
    --oui-foreground-percentage: 0%;
    --oui-foreground-value: inherit;
    --oui-outline-percentage: 90%;
    --oui-outline-value: var(--oui-blue-6);
  }
}
:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i]) {
  --oui-foreground-percentage: 25%;
  font-style: italic;
}

:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::file-selector-button {
  --oui-background-value: var(--oui-gray-1);
  cursor: default;
}

:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-moz-range-thumb {
  --oui-background-value: var(--oui-gray-2);
  cursor: default;
}

:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-ms-thumb {
  --oui-background-value: var(--oui-gray-2);
  cursor: default;
}

:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-webkit-slider-thumb {
  --oui-background-value: var(--oui-gray-2);
  cursor: default;
}

:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]):focus) {
  --oui-outline-percentage: 75%;
}

:where(.oui-input[disabled], .oui-input[aria-disabled=true i]) {
  --oui-background-percentage: 50%;
}

:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-moz-range-thumb {
  --oui-background-value: var(--oui-gray-1);
  cursor: default;
}

:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-ms-thumb {
  --oui-background-value: var(--oui-gray-1);
  cursor: default;
}

:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-slider-thumb {
  --oui-background-value: var(--oui-gray-1);
  cursor: default;
}

:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-moz-range-track {
  --oui-background-percentage: 50%;
  --oui-background-value: var(--oui-gray-0);
}

:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-ms-track {
  --oui-background-percentage: 50%;
  --oui-background-value: var(--oui-gray-0);
}

:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-slider-runnable-track {
  --oui-background-percentage: 50%;
  --oui-background-value: var(--oui-gray-0);
}

:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-calendar-picker-indicator {
  opacity: 0.5;
}

:where(select.oui-input, .oui-input[list]) {
  padding-right: 2em;
  background-position: right 0.5em center;
}

:where(select.oui-input:is([multiple])) {
  --oui-off: attr(oui-off);
  --oui-on: attr(oui-on, '\2713');
  padding: 0;
}

:where(select.oui-input:is([multiple]) > option) {
  padding: 0.5em 0.75em;
}

:where(select.oui-input:is([multiple])[oui-off] > option)::before {
  content: var(--oui-off);
  margin: 0 0.75em 0 0;
}

:where(select.oui-input:is([multiple]) > option:nth-of-type(2n)) {
  background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
}

:where(select.oui-input:is([multiple]) > option:checked) {
  background-color: var(--oui-blue-2);
  color: var(--oui-blue-9);
}

:where(select.oui-input:is([multiple]) > option:checked)::before {
  content: var(--oui-on);
  margin: 0 0.75em 0 0;
}

:where(textarea.oui-input) {
  min-height: 4em;
  resize: vertical;
  transition: all 0.125s ease-in-out, height 0s;
}

:where(.oui-label, .oui-legend) {
  font-size: 0.875rem;
  font-weight: bold;
}

:where(.oui-label) {
  cursor: pointer;
  transition: 0.125s ease-in-out;
}

@media (hover: hover) {
  :where(:where(.oui-label)[for]:hover) {
    color: var(--oui-blue-8);
  }
}
:where(.oui-legend) {
  padding: 0.5em;
  border: 1px solid var(--oui-gray-3);
  border-radius: 0.25em;
}

:where(.oui-switch, .oui-toggle) {
  --oui-background-percentage: 50%;
  --oui-background-value: var(--oui-gray-1);
  --oui-border-value: var(--oui-gray-3);
  --oui-foreground-percentage: 0%;
  --oui-foreground-value: var(--oui-gray-8);
  --oui-outline-percentage: 100%;
  --oui-outline-value: var(--oui-blue-6);
  --oui-shadow-percentage: 85%;
  --oui-shadow-value: var(--oui-gray-10);
  position: relative;
  cursor: pointer;
}

:where(.oui-switch, .oui-toggle)::before, :where(.oui-switch, .oui-toggle)::after {
  display: inline-block;
  font-family: system-ui, sans-serif;
  position: absolute;
  transition: 0.125s ease-in-out;
  pointer-events: none;
}

:where(.oui-switch, .oui-toggle)::before {
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
  outline-offset: 0;
  border: 1px solid var(--oui-border-value);
  box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
}

:where(.oui-switch, .oui-toggle)::after {
  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
}

:where(.oui-switch) {
  padding: 0 3em 0 0;
}

:where(.oui-switch)::before {
  content: "";
  width: 2.5em;
  height: 1.5em;
  border-radius: 3em;
  right: 0;
}

:where(.oui-switch)::after {
  content: attr(oui-off, "✕");
  width: 1.5em;
  height: 1.5em;
  background-color: var(--oui-absolute);
  border-radius: 1.5em;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
  font-size: 0.75em;
  font-weight: bold;
  line-height: 1.5em;
  text-align: center;
  top: 0.25em;
  right: 1.5em;
}

:where(.oui-switch:has(input:checked)) {
  --oui-foreground-percentage: 0%;
  --oui-foreground-value: var(--oui-blue-8);
}

:where(.oui-switch:has(input:checked))::after {
  content: attr(oui-on, "✓");
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
  right: 0.25em;
}

:where(.oui-toggle) {
  --oui-background-percentage: 100%;
  --oui-border-value: var(--oui-gray-4);
  padding: 0 0 0 2em;
}

:where(.oui-toggle)::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  inset: 0 auto auto 0;
}

:where(.oui-toggle)::after {
  opacity: 0;
}

:where(.oui-toggle:has(input[type=checkbox i])) {
  --oui-foreground-percentage: 0%;
  --oui-foreground-value: white;
}

:where(.oui-toggle:has(input[type=checkbox i]))::before {
  border-radius: 0.25em;
}

:where(.oui-toggle:has(input[type=checkbox i]))::after {
  content: attr(oui-on, "✓");
  width: 1.5em;
  height: 1.5em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-weight: bold;
  line-height: 1.5em;
  text-align: center;
  inset: 0 auto auto 0;
}

:where(.oui-toggle:has(input[type=radio i])) {
  position: relative;
}

:where(.oui-toggle:has(input[type=radio i]))::before, :where(.oui-toggle:has(input[type=radio i]))::after {
  border-radius: 50%;
}

:where(.oui-toggle:has(input[type=radio i]))::after {
  content: "";
  width: 0.75em;
  height: 0.75em;
  background-color: var(--oui-absolute);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  inset: 0.375em auto auto 0.375em;
}

:where(.oui-toggle:has(input:checked))::after {
  opacity: 1;
}

:where(.oui-switch:has(input:checked),
.oui-toggle:has(input:checked)) {
  --oui-background-percentage: 25%;
  --oui-background-value: var(--oui-blue-6);
  --oui-border-value: var(--oui-blue-6);
  --oui-shadow-percentage: 50%;
  --oui-shadow-value: var(--oui-blue-8);
}

:where(.oui-switch:focus-within,
.oui-toggle:focus-within) {
  --oui-border-value: var(--oui-blue-6);
  --oui-outline-percentage: 75%;
  color: var(--oui-blue-8);
}

:where(.oui-switch:has(input:not([disabled], [aria-disabled=true i])):focus-within,
.oui-toggle:has(input:not([disabled], [aria-disabled=true i])):focus-within) {
  --oui-background-percentage: 50%;
}

@media (hover: hover) {
  :where(.oui-switch:has(input:not([disabled], [aria-disabled=true i])):hover,
  .oui-toggle:has(input:not([disabled], [aria-disabled=true i])):hover) {
    --oui-border-value: var(--oui-blue-4);
    --oui-outline-percentage: 90%;
    --oui-outline-value: var(--oui-blue-6);
    color: var(--oui-blue-8);
  }
  :where(.oui-switch:has(input:not([disabled], [aria-disabled=true i]):is(:checked)):hover,
  .oui-toggle:has(input:not([disabled], [aria-disabled=true i]):is(:checked)):hover) {
    --oui-background-percentage: 50%;
    --oui-background-value: var(--oui-blue-6);
  }
}
:where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
.oui-toggle:has(input[disabled], input[aria-disabled=true i])) {
  --oui-background-percentage: 50%;
  --oui-background-value: var(--oui-gray-0);
  --oui-border-value: var(--oui-gray-3);
  --oui-foreground-percentage: 25%;
  --oui-foreground-value: currentcolor;
  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
  font-style: italic;
  cursor: default;
}

:where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
.oui-toggle:has(input[disabled], input[aria-disabled=true i]))::after,
:where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
.oui-toggle:has(input[disabled], input[aria-disabled=true i]))::before {
  font-style: normal;
}

:where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
.oui-toggle:has(input[disabled], input[aria-disabled=true i]))::after {
  box-shadow: 0 0 0 1px var(--oui-gray-3);
  text-shadow: none;
}

:where(label.oui-switch, label.oui-toggle) {
  display: inline-block;
  line-height: 1.5;
}

:where(.oui-switch input, .oui-toggle input) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  clip: rect(1px, 1px 1px, 1px) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/*! https://github.com/oscarpalmer/oui */
:where(.oui-message) {
  --oui-shadow-mixed: color-mix(
  	in oklab,
  	var(--oui-shadow-value, var(--oui-gray-6)),
  	transparent 92.5%
  );
  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
  padding: 1em 1.25em;
  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
  border-radius: 0.5em;
  max-width: -moz-fit-content;
  max-width: fit-content;
  display: inline-flex;
  flex-flow: column nowrap;
  gap: 1em;
  color: var(--oui-foreground, var(--oui-gray-8));
  line-height: 1.25;
}

:where(.oui-message h2, .oui-message h3, .oui-message h4, .oui-message h5, .oui-message h6) {
  font-size: 1em;
  font-weight: bold;
}

:where(.oui-message hr) {
  height: 1px;
  margin: 0 -1.25em;
  background-color: var(--oui-border, var(--oui-gray-2));
  border: none;
}

:where(.oui-message p) {
  max-width: 32rem;
  max-width: 64ch;
  display: inline-flex;
  flex-flow: row wrap;
  gap: 1em;
}

:where(.oui-message--blue, .oui-message--info) {
  --oui-background: var(--oui-blue-0);
  --oui-border: var(--oui-blue-2);
  --oui-foreground: var(--oui-blue-8);
  --oui-shadow-value: var(--oui-blue-6);
}

:where(.oui-message--green, .oui-message--success) {
  --oui-background: var(--oui-green-0);
  --oui-border: var(--oui-green-2);
  --oui-foreground: var(--oui-green-8);
  --oui-shadow-value: var(--oui-green-6);
}

:where(.oui-message--orange, .oui-message--warning) {
  --oui-background: var(--oui-orange-0);
  --oui-border: var(--oui-orange-2);
  --oui-foreground: var(--oui-orange-8);
  --oui-shadow-value: var(--oui-orange-6);
}

:where(.oui-message--purple, .oui-message--special) {
  --oui-background: var(--oui-purple-0);
  --oui-border: var(--oui-purple-2);
  --oui-foreground: var(--oui-purple-8);
  --oui-shadow-value: var(--oui-purple-6);
}

:where(.oui-message--red, .oui-message--error) {
  --oui-background: var(--oui-red-0);
  --oui-border: var(--oui-red-2);
  --oui-foreground: var(--oui-red-8);
  --oui-shadow-value: var(--oui-red-6);
}

:where(.oui-message--yellow, .oui-message--notice) {
  --oui-background: var(--oui-yellow-0);
  --oui-border: var(--oui-yellow-2);
  --oui-foreground: var(--oui-yellow-8);
  --oui-shadow-value: var(--oui-yellow-6);
}

:root {
  --spacing: clamp(.5rem, 2vw, 2rem);
  --flex-gap: var(--spacing);
  --stack-gap: var(--spacing);
  background-color: light-dark(var(--oui-stone-0), var(--oui-slate-0));
  color: light-dark(var(--oui-stone-9), var(--oui-slate-8));
  color-scheme: light dark only;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-flow: column nowrap;
}

/** */
.flow [role=separator] {
  width: 1px;
  height: 1rem;
  background-color: light-dark(var(--oui-stone-3), var(--oui-slate-3));
}

.actions {
  padding: 0 var(--spacing) var(--spacing);
  margin: 0 calc(-1 * var(--spacing));
  border-bottom: 1px solid light-dark(var(--oui-stone-3), var(--oui-slate-3));
}

.content,
.footer,
.header {
  padding: var(--spacing);
}

.content {
  flex: 1;
}

.footer,
.header {
  background-color: light-dark(var(--oui-stone-1), var(--oui-slate-1));
}

.footer {
  border-top: 1px solid light-dark(var(--oui-stone-3), var(--oui-slate-3));
  color: light-dark(var(--oui-stone-8), var(--oui-slate-8));
  font-size: 0.875rem;
}

.header {
  border-bottom: 1px solid light-dark(var(--oui-stone-3), var(--oui-slate-3));
}
.header__description {
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.125;
}
.header__title {
  color: light-dark(var(--oui-stone-7), var(--oui-slate-7));
  font-size: 1rem;
}