.reactEasyCrop_Container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  cursor: move;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reactEasyCrop_Image,
.reactEasyCrop_Video {
  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */
  max-width: unset; /* prevent global img/video reset rules from constraining the cropper media */
}

.reactEasyCrop_Contain {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.reactEasyCrop_Cover_Horizontal {
  width: 100%;
  height: auto;
}
.reactEasyCrop_Cover_Vertical {
  width: auto;
  height: 100%;
}

.reactEasyCrop_CropArea {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  box-shadow: 0 0 0 9999em;
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.reactEasyCrop_CropAreaRound {
  border-radius: 50%;
}

.reactEasyCrop_CropAreaGrid::before {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  top: 0;
  bottom: 0;
  left: 33.33%;
  right: 33.33%;
  border-top: 0;
  border-bottom: 0;
}

.reactEasyCrop_CropAreaGrid::after {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  top: 33.33%;
  bottom: 33.33%;
  left: 0;
  right: 0;
  border-left: 0;
  border-right: 0;
}

/*
  GENERATED by motorstable-design v3.0.0. Do not edit.
Edit tokens/*.json in the design repo and re-run `npm run build`.
*/

/* Light is the default here: a records tool people stare at wants parchment. */
:root {
  color-scheme: light;

  --parchment: 244 241 234; /* #F4F1EA  Page ground */
  --vellum: 250 248 244; /* #FAF8F4  Raised surfaces, cards */
  --surface-raised: 255 255 255; /* #FFFFFF  Third surface level, above vellum. Marketing site only so far. */
  --sand: 237 233 223; /* #EDE9DF  Recessed fill: hover rows, inset panels */
  --sand-strong: 226 221 208; /* #E2DDD0  Recessed fill, one step deeper */
  --surface-active: 232 227 215; /* #E8E3D7  Selected navigation row */
  --hairline: 218 213 200; /* #DAD5C8  Rules, borders, dividers */
  --hairline-strong: 201 194 176; /* #C9C2B0  Borders needing more weight */
  --faint: 110 104 87; /* #6E6857  Tertiary text, placeholders */
  --muted: 95 91 81; /* #5F5B51  Secondary text. 5.5:1 on parchment. */
  --muted-strong: 74 71 62; /* #4A473E  Secondary text needing more weight */
  --slate: 58 55 47; /* #3A372F  Near-body text, one step under ink */
  --ink: 28 26 22; /* #1C1A16  Primary text. Warm near-black. */
  --accent: 41 104 142; /* #29688E  The accent. Buttons, links, active states. 10:1 on parchment. */
  --accent-deep: 30 75 103; /* #1E4B67  Accent hover, pressed. Goes lighter in dark, not darker. */
  --accent-tint: 233 241 246; /* #E9F1F6  Pale accent wash */
  --accent-tint-strong: 209 225 234; /* #D1E1EA  Accent wash, stronger */
  --on-accent: 250 248 244; /* #FAF8F4  Text and icons on accent fills */
  --brass: 169 138 84; /* #A98A54  Hallmark marks only. NEVER text: ~2.6:1 on parchment. */
  --success: 47 93 67; /* #2F5D43  Registration current */
  --success-bg: 227 237 230; /* #E3EDE6  Success surface */
  --success-fg: 30 62 44; /* #1E3E2C  Success text on success-bg */
  --warning: 130 100 38; /* #826426  Expiring soon. Tobacco, not amber. */
  --warning-bg: 243 235 219; /* #F3EBDB  Warning surface */
  --warning-fg: 92 70 26; /* #5C461A  Warning text on warning-bg */
  --error: 122 43 43; /* #7A2B2B  Expired. Oxblood, not fire-engine red. */
  --error-bg: 244 229 227; /* #F4E5E3  Error surface */
  --error-fg: 88 31 31; /* #581F1F  Error text on error-bg */
  --info: 58 74 82; /* #3A4A52  Slate. Neutral notice. */
  --info-bg: 230 235 237; /* #E6EBED  Info surface */
  --info-fg: 42 54 60; /* #2A363C  Info text on info-bg */
  --scrim: 12 11 9; /* #0C0B09  Modal and lightbox overlay */
}


:root[data-theme='dark'] {
  color-scheme: dark;

  --parchment: 20 19 15; /* #14130F  Page ground */
  --vellum: 30 28 23; /* #1E1C17  Raised surfaces, cards */
  --surface-raised: 36 33 27; /* #24211B  Third surface level, above vellum. Marketing site only so far. */
  --sand: 35 32 25; /* #232019  Recessed fill: hover rows, inset panels */
  --sand-strong: 43 39 33; /* #2B2721  Recessed fill, one step deeper */
  --surface-active: 62 57 48; /* #3E3930  Selected navigation row */
  --hairline: 51 47 39; /* #332F27  Rules, borders, dividers */
  --hairline-strong: 66 61 51; /* #423D33  Borders needing more weight */
  --faint: 143 135 117; /* #8F8775  Tertiary text, placeholders */
  --muted: 154 147 132; /* #9A9384  Secondary text. 5.5:1 on parchment. */
  --muted-strong: 176 169 150; /* #B0A996  Secondary text needing more weight */
  --slate: 200 193 174; /* #C8C1AE  Near-body text, one step under ink */
  --ink: 237 233 223; /* #EDE9DF  Primary text. Warm near-black. */
  --accent: 61 146 199; /* #3D92C7  The accent. Buttons, links, active states. 10:1 on parchment. */
  --accent-deep: 97 166 209; /* #61A6D1  Accent hover, pressed. Goes lighter in dark, not darker. */
  --accent-tint: 19 30 38; /* #131E26  Pale accent wash */
  --accent-tint-strong: 29 44 53; /* #1D2C35  Accent wash, stronger */
  --on-accent: 20 19 15; /* #14130F  Text and icons on accent fills */
  --brass: 196 165 111; /* #C4A56F  Hallmark marks only. NEVER text: ~2.6:1 on parchment. */
  --success: 81 149 114; /* #519572  Registration current */
  --success-bg: 27 42 33; /* #1B2A21  Success surface */
  --success-fg: 156 203 176; /* #9CCBB0  Success text on success-bg */
  --warning: 192 154 74; /* #C09A4A  Expiring soon. Tobacco, not amber. */
  --warning-bg: 44 36 21; /* #2C2415  Warning surface */
  --warning-fg: 224 196 137; /* #E0C489  Warning text on warning-bg */
  --error: 208 104 98; /* #D06862  Expired. Oxblood, not fire-engine red. */
  --error-bg: 46 25 23; /* #2E1917  Error surface */
  --error-fg: 229 169 163; /* #E5A9A3  Error text on error-bg */
  --info: 112 139 152; /* #708B98  Slate. Neutral notice. */
  --info-bg: 28 36 41; /* #1C2429  Info surface */
  --info-fg: 175 194 203; /* #AFC2CB  Info text on info-bg */
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: rgb(var(--hairline) / 1); /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Instrument Sans, ui-sans-serif, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: rgb(var(--faint) / 1); /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: rgb(var(--faint) / 1); /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.-bottom-1\.5 {
  bottom: -0.375rem;
}
.-left-1\.5 {
  left: -0.375rem;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-\[-4px\] {
  bottom: -4px;
}
.bottom-full {
  bottom: 100%;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[-4px\] {
  left: -4px;
}
.left-full {
  left: 100%;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-\[-4px\] {
  right: -4px;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-14 {
  top: 3.5rem;
}
.top-2 {
  top: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.top-\[-4px\] {
  top: -4px;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[60\] {
  z-index: 60;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.\!m-0 {
  margin: 0px !important;
}
.m-0 {
  margin: 0px;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-px {
  margin-top: -1px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[55vh\] {
  max-height: 55vh;
}
.max-h-\[72px\] {
  max-height: 72px;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-14 {
  min-height: 3.5rem;
}
.min-h-\[1\.25rem\] {
  min-height: 1.25rem;
}
.min-h-\[18rem\] {
  min-height: 18rem;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[9\.5rem\] {
  min-height: 9.5rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1 {
  width: 0.25rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[328px\] {
  width: 328px;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-11 {
  min-width: 2.75rem;
}
.min-w-12 {
  min-width: 3rem;
}
.min-w-4 {
  min-width: 1rem;
}
.min-w-\[11rem\] {
  min-width: 11rem;
}
.min-w-\[14rem\] {
  min-width: 14rem;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[20rem\] {
  min-width: 20rem;
}
.min-w-\[5rem\] {
  min-width: 5rem;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[1140px\] {
  max-width: 1140px;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[30rem\] {
  max-width: 30rem;
}
.max-w-\[34rem\] {
  max-width: 34rem;
}
.max-w-\[42ch\] {
  max-width: 42ch;
}
.max-w-\[44ch\] {
  max-width: 44ch;
}
.max-w-\[44rem\] {
  max-width: 44rem;
}
.max-w-\[46ch\] {
  max-width: 46ch;
}
.max-w-\[60ch\] {
  max-width: 60ch;
}
.max-w-\[75ch\] {
  max-width: 75ch;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-prose {
  max-width: 65ch;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-2 {
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-0 {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-crosshair {
  cursor: crosshair;
}
.cursor-default {
  cursor: default;
}
.cursor-move {
  cursor: move;
}
.cursor-nesw-resize {
  cursor: nesw-resize;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-nwse-resize {
  cursor: nwse-resize;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.cursor-wait {
  cursor: wait;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-proximity {
  --tw-scroll-snap-strictness: proximity;
}
.snap-start {
  scroll-snap-align: start;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-hairline > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--hairline) / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 2px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0;
}
.rounded-md {
  border-radius: 2px;
}
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: 2px;
}
.rounded-t-md {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.rounded-t-sm {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--info) / var(--tw-border-opacity, 1));
}
.border-error {
  --tw-border-opacity: 1;
  border-color: rgb(var(--error) / var(--tw-border-opacity, 1));
}
.border-error-fg\/30 {
  border-color: rgb(var(--error-fg) / 0.3);
}
.border-error\/40 {
  border-color: rgb(var(--error) / 0.4);
}
.border-error\/50 {
  border-color: rgb(var(--error) / 0.5);
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--sand) / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--hairline) / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--hairline-strong) / var(--tw-border-opacity, 1));
}
.border-hairline {
  --tw-border-opacity: 1;
  border-color: rgb(var(--hairline) / var(--tw-border-opacity, 1));
}
.border-hairline-strong {
  --tw-border-opacity: 1;
  border-color: rgb(var(--hairline-strong) / var(--tw-border-opacity, 1));
}
.border-info {
  --tw-border-opacity: 1;
  border-color: rgb(var(--info) / var(--tw-border-opacity, 1));
}
.border-on-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--on-accent) / var(--tw-border-opacity, 1));
}
.border-racing {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent) / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--error) / var(--tw-border-opacity, 1));
}
.border-sand {
  --tw-border-opacity: 1;
  border-color: rgb(var(--sand) / var(--tw-border-opacity, 1));
}
.border-slate {
  --tw-border-opacity: 1;
  border-color: rgb(var(--slate) / var(--tw-border-opacity, 1));
}
.border-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--success) / var(--tw-border-opacity, 1));
}
.border-success-fg\/30 {
  border-color: rgb(var(--success-fg) / 0.3);
}
.border-success\/50 {
  border-color: rgb(var(--success) / 0.5);
}
.border-transparent {
  border-color: transparent;
}
.border-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--warning) / var(--tw-border-opacity, 1));
}
.border-warning-fg\/30 {
  border-color: rgb(var(--warning-fg) / 0.3);
}
.border-warning\/50 {
  border-color: rgb(var(--warning) / 0.5);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-l-error {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--error) / var(--tw-border-opacity, 1));
}
.border-l-success {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--success) / var(--tw-border-opacity, 1));
}
.border-l-warning {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--warning) / var(--tw-border-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--info-bg) / var(--tw-bg-opacity, 1));
}
.bg-brass {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brass) / var(--tw-bg-opacity, 1));
}
.bg-brass\/40 {
  background-color: rgb(var(--brass) / 0.4);
}
.bg-error {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--error) / var(--tw-bg-opacity, 1));
}
.bg-error-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--error-bg) / var(--tw-bg-opacity, 1));
}
.bg-error\/20 {
  background-color: rgb(var(--error) / 0.2);
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--sand) / var(--tw-bg-opacity, 1));
}
.bg-hairline {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--hairline) / var(--tw-bg-opacity, 1));
}
.bg-info {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--info) / var(--tw-bg-opacity, 1));
}
.bg-info-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--info-bg) / var(--tw-bg-opacity, 1));
}
.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink) / var(--tw-bg-opacity, 1));
}
.bg-parchment {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--parchment) / var(--tw-bg-opacity, 1));
}
.bg-racing {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-racing-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-tint) / var(--tw-bg-opacity, 1));
}
.bg-racing-tint-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-tint-strong) / var(--tw-bg-opacity, 1));
}
.bg-racing-tint\/90 {
  background-color: rgb(var(--accent-tint) / 0.9);
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--error-bg) / var(--tw-bg-opacity, 1));
}
.bg-sand {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--sand) / var(--tw-bg-opacity, 1));
}
.bg-scrim\/50 {
  background-color: rgb(var(--scrim) / 0.5);
}
.bg-scrim\/60 {
  background-color: rgb(var(--scrim) / 0.6);
}
.bg-scrim\/70 {
  background-color: rgb(var(--scrim) / 0.7);
}
.bg-scrim\/90 {
  background-color: rgb(var(--scrim) / 0.9);
}
.bg-scrim\/95 {
  background-color: rgb(var(--scrim) / 0.95);
}
.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--success) / var(--tw-bg-opacity, 1));
}
.bg-success-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--success-bg) / var(--tw-bg-opacity, 1));
}
.bg-success-fg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--success-fg) / var(--tw-bg-opacity, 1));
}
.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vellum) / var(--tw-bg-opacity, 1));
}
.bg-surface-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--surface-active) / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-vellum {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vellum) / var(--tw-bg-opacity, 1));
}
.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--warning) / var(--tw-bg-opacity, 1));
}
.bg-warning-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--warning-bg) / var(--tw-bg-opacity, 1));
}
.bg-warning-fg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--warning-fg) / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.fill-amber-400 {
  fill: rgb(var(--warning) / 1);
}
.fill-current {
  fill: currentColor;
}
.fill-faint {
  fill: rgb(var(--faint) / 1);
}
.fill-ink {
  fill: rgb(var(--ink) / 1);
}
.fill-muted {
  fill: rgb(var(--muted) / 1);
}
.fill-racing {
  fill: rgb(var(--accent) / 1);
}
.fill-surface {
  fill: rgb(var(--vellum) / 1);
}
.stroke-hairline {
  stroke: rgb(var(--hairline) / 1);
}
.stroke-hairline-strong {
  stroke: rgb(var(--hairline-strong) / 1);
}
.stroke-muted {
  stroke: rgb(var(--muted) / 1);
}
.stroke-racing {
  stroke: rgb(var(--accent) / 1);
}
.stroke-surface {
  stroke: rgb(var(--vellum) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-1\.5 {
  padding-left: 0.375rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-0 {
  padding-right: 0px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, monospace;
}
.font-serif {
  font-family: Instrument Serif, ui-serif, Georgia, serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.95rem\] {
  font-size: 0.95rem;
}
.text-\[0\.9em\] {
  font-size: 0.9em;
}
.text-\[1\.75rem\] {
  font-size: 1.75rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[2rem\] {
  font-size: 2rem;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4 {
  line-height: 1rem;
}
.leading-\[1\.12\] {
  line-height: 1.12;
}
.leading-\[1\.15\] {
  line-height: 1.15;
}
.leading-\[1\.3\] {
  line-height: 1.3;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}
.tracking-catalogue {
  letter-spacing: 0.08em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--warning) / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--warning-fg) / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--info-fg) / var(--tw-text-opacity, 1));
}
.text-brass {
  --tw-text-opacity: 1;
  color: rgb(var(--brass) / var(--tw-text-opacity, 1));
}
.text-error {
  --tw-text-opacity: 1;
  color: rgb(var(--error) / var(--tw-text-opacity, 1));
}
.text-error-fg {
  --tw-text-opacity: 1;
  color: rgb(var(--error-fg) / var(--tw-text-opacity, 1));
}
.text-faint {
  --tw-text-opacity: 1;
  color: rgb(var(--faint) / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(var(--hairline-strong) / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--faint) / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--muted) / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--muted-strong) / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--slate) / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--ink) / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--success-fg) / var(--tw-text-opacity, 1));
}
.text-hairline-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--hairline-strong) / var(--tw-text-opacity, 1));
}
.text-info {
  --tw-text-opacity: 1;
  color: rgb(var(--info) / var(--tw-text-opacity, 1));
}
.text-info-fg {
  --tw-text-opacity: 1;
  color: rgb(var(--info-fg) / var(--tw-text-opacity, 1));
}
.text-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--ink) / var(--tw-text-opacity, 1));
}
.text-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--muted) / var(--tw-text-opacity, 1));
}
.text-muted-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--muted-strong) / var(--tw-text-opacity, 1));
}
.text-on-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--on-accent) / var(--tw-text-opacity, 1));
}
.text-parchment {
  --tw-text-opacity: 1;
  color: rgb(var(--parchment) / var(--tw-text-opacity, 1));
}
.text-racing {
  --tw-text-opacity: 1;
  color: rgb(var(--accent) / var(--tw-text-opacity, 1));
}
.text-racing-deep {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-deep) / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--error) / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--error-fg) / var(--tw-text-opacity, 1));
}
.text-slate {
  --tw-text-opacity: 1;
  color: rgb(var(--slate) / var(--tw-text-opacity, 1));
}
.text-success {
  --tw-text-opacity: 1;
  color: rgb(var(--success) / var(--tw-text-opacity, 1));
}
.text-success-fg {
  --tw-text-opacity: 1;
  color: rgb(var(--success-fg) / var(--tw-text-opacity, 1));
}
.text-warning {
  --tw-text-opacity: 1;
  color: rgb(var(--warning) / var(--tw-text-opacity, 1));
}
.text-warning-fg {
  --tw-text-opacity: 1;
  color: rgb(var(--warning-fg) / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-hairline {
  text-decoration-color: rgb(var(--hairline) / 1);
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.accent-racing {
  accent-color: rgb(var(--accent) / 1);
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-85 {
  opacity: 0.85;
}
.shadow {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_rgba\(0\2c 0\2c 0\2c 0\.4\)\] {
  --tw-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_2px_0_rgb\(var\(--accent\)\)\] {
  --tw-shadow: inset 0 2px 0 rgb(var(--accent));
  --tw-shadow-colored: inset 0 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_2px_0_0_rgb\(var\(--accent\)\)\] {
  --tw-shadow: inset 2px 0 0 rgb(var(--accent));
  --tw-shadow-colored: inset 2px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-racing {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent) / var(--tw-ring-opacity, 1));
}
.ring-racing\/20 {
  --tw-ring-color: rgb(var(--accent) / 0.2);
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.ring-offset-4 {
  --tw-ring-offset-width: 4px;
}
.ring-offset-parchment {
  --tw-ring-offset-color: rgb(var(--parchment) / 1);
}
.ring-offset-surface {
  --tw-ring-offset-color: rgb(var(--vellum) / 1);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c transform\] {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-medium {
  transition-duration: 300ms;
}
.duration-short {
  transition-duration: 200ms;
}
.ease-\[cubic-bezier\(0\.2\2c 0\2c 0\.1\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.2,0,0.1,1);
}
.ease-ms {
  transition-timing-function: cubic-bezier(0.2, 0, 0.1, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
.scrollbar-none::-webkit-scrollbar {
    display: none;
  }
.\[font-variant-numeric\:tabular-nums\] {
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Fonts — self-hosted, Latin subset only (Phase 13.7 DS9)

   DESIGN.md's `next/font/google` advice does not apply here (webpack, not Next),
   so these are downloaded from Google Fonts, trimmed to the Latin unicode-range,
   and emitted by webpack with stable filenames. Total 110 KB across six faces;
   the two preloaded in public/index.html are 44 KB of that.

   Instrument Sans and Instrument Serif were designed together, so the pairing is
   native rather than assembled. IBM Plex Mono is reserved exclusively for
   identifiers — VIN, plate, unit number, fleet number.
   ============================================================================= */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/instrument-sans-400-700-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/instrument-sans-400-700-italic.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/instrument-serif-400-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/instrument-serif-400-italic.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-400-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-500-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   MotorStable design tokens

   The values are NOT here. They are generated from the shared design repo:

       motorstable-design/tokens/color.json  ->  build/generate.mjs
                                             ->  src/styles/tokens.generated.css

   Refresh with `npm run design:sync`, which also refreshes the Tailwind
   fragment in tailwind.tokens.generated.cjs. Never hand-edit either file: the
   next sync silently reverts it, and the site would keep the old value.

   Why generation rather than a copied stylesheet: this app is on Tailwind 3 and
   needs SPACE-SEPARATED RGB CHANNELS so opacity modifiers work (`bg-parchment/80`
   compiles to `rgb(var(--parchment) / 0.8)`; ~30 are in use). The marketing site
   is on Tailwind 4 and takes hex. One canonical value, two emitters.

   Components must reference tokens only — never a raw hex, never a Tailwind
   palette name. That is what makes the dark theme a value swap instead of a
   component-level change.

   The gray-step -> token mapping and its usage evidence live in
   docs/phases/phase-13.7.md (DS3).
   ============================================================================= */

/* =============================================================================
   Base
   ============================================================================= */

body {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--parchment) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--ink) / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Display and section headings. DESIGN.md: sentence case for page titles,
   uppercase + 0.08em tracking for section labels (the auction-catalogue
   treatment). Applied via the `font-serif` utility. */
h1,
h2,
h3,
h4 {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-weight: 400;
}

h1 {
  letter-spacing: -0.015em;
}

/* Form controls default to the raised surface.

   24 of the 31 form controls in the app carry no bg- class and were relying on
   the browser's default white. That was invisible while the app was white too,
   and became a glaring white slab the moment dark mode landed. Setting the
   default here fixes every one of them without hunting through files, and any
   control that wants something else still overrides it with a utility class. */
input,
textarea,
select {
  background-color: rgb(var(--vellum));
  color: rgb(var(--ink));
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: rgb(var(--faint));
}

input::placeholder,
textarea::placeholder {
  color: rgb(var(--faint));
}

/* Identifiers only: VIN, plate number, unit number, fleet number.
   DESIGN.md reserves mono exclusively for these. Nothing else uses it. */
.font-identifier {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-variant-ligatures: none;
}

/* Cost and date columns read better with tabular figures. */
.tabular {
  font-variant-numeric: tabular-nums;
}

/*
  Date inputs, on iOS.

  Safari gives input[type=date] an intrinsic width from the native control it
  draws, and that width is wider than a phone. `w-full` does not save you: a
  grid item defaults to `min-width: auto`, which means it will not shrink below
  its content, so the track grows, the field runs past the right edge and the
  whole page scrolls sideways. Reported on an iPhone against the Service Date
  field, which sits in a grid.

  `min-width: 0` is the whole fix. It removes the floor that `width: 100%` was
  losing to, and the element then sizes to its container like every other input
  on the form. It has to be paired with `min-w-0` on the grid or flex ITEM,
  which carries its own separate auto minimum.

  NOT `appearance: none`. That was here first, as belt-and-braces for the same
  intrinsic width, and it took the mm/dd/yyyy placeholder with it — Safari draws
  that as part of the control, so switching the control off leaves an empty box
  that does not read as a date field at all. On a filled or required field you
  never see it; on an optional one like Next Service Due Date it is all you see.
  The sizing floor is already gone without it, so it was cost with no benefit.

  ::-webkit-date-and-time-value stays: Safari centres the value inside the
  field, and left is how every other field on the form reads.

  The picker is untouched throughout — tapping opens the native wheel.
*/
input[type='date'],
input[type='datetime-local'],
input[type='month'],
input[type='time'] {
  min-width: 0;
}

input[type='date']::-webkit-date-and-time-value,
input[type='datetime-local']::-webkit-date-and-time-value {
  text-align: left;
}

/*
  Money fields: no spinner.

  type="number" earns its place on a money field — it brings the numeric
  keypad on a phone, and the decimal one on iOS via inputMode. What it also
  brings is a pair of step arrows, and stepping money by 0.01 with a mouse is
  not a thing anyone does. They cost horizontal room in a four-column cost
  row, they invite a click that changes a figure by a cent, and a scroll
  wheel over a focused number input silently increments it.

  Firefox needs appearance, WebKit needs the two pseudo-elements, and the
  margin reset matters: WebKit keeps the reserved width otherwise.
*/
.no-spinner {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =============================================================================
   Safe area and keyboard insets — Phase 17 W3 (D8)

   These are named here so components spend a token rather than repeating an
   env() call with its own fallback, and so the keyboard inset — which only
   JavaScript can measure — reads the same way as the four that are pure CSS.

   REQUIRES viewport-fit=cover in public/index.html. Without that attribute
   every env(safe-area-inset-*) resolves to 0px and all four of these are inert.
   The meta tag and these properties only work as a pair.

   The 0px fallbacks matter: env() with no fallback is invalid on browsers that
   do not know the variable, which takes the whole declaration with it.
   ============================================================================= */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Height of the on-screen keyboard, maintained by installKeyboardInsetTracker
     (src/lib/keyboardInset.ts). Stays 0px where interactive-widget is honoured;
     becomes nonzero on iOS Safari, which ignores it. A sticky action bar pads
     its bottom by this so the keyboard cannot cover it. */
  --keyboard-inset: 0px;
}

/* DESIGN.md motion: slow, few, confident. Nothing bounces. */
* {
  --ms-ease: cubic-bezier(0.2, 0, 0.1, 1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
  A strip that scrolls sideways by design — the Phase 17 tab bar (W6/D4).

  Tailwind has no core utility for this, and the three vendor properties are not
  interchangeable: Firefox reads `scrollbar-width`, WebKit only honours the
  pseudo-element, and `-ms-overflow-style` covers pre-Chromium Edge. Miss one and
  the bar gets a scrollbar on exactly one engine, which is the kind of thing that
  only shows up in a screenshot diff.

  The content is still scrollable and still reachable by keyboard — this hides
  the scrollbar, not the overflow.
*/

/*
  Sticky form action bar, above the software keyboard — Phase 17 W7 (D5).

  The one part of that bar Tailwind cannot express. Everything else — sticky,
  bottom-0, the background, the top border, going static again at `md` — is a
  utility; this is the bottom padding, which has to compose three values:

    0.75rem            the bar's own padding
    --safe-bottom      the home indicator on a notched phone (D8)
    --keyboard-inset   the software keyboard on iOS Safari

  The third is the one D5 exists for. On iOS the keyboard shrinks the VISUAL
  viewport and leaves the LAYOUT viewport alone, and `position: sticky` resolves
  against the layout viewport — so a bottom bar ends up behind the keyboard, not
  scrolled away but simply underneath, with no gesture that reveals it. Android
  Chrome honours `interactive-widget=resizes-content` and reflows instead, which
  is why the bug looks device-specific and gets missed in DevTools.
  lib/keyboardInset.ts keeps the value current from the visualViewport API.

  Scoped below `md`: at desktop widths the bar is static and there is no
  software keyboard to clear.
*/
@media (max-width: 767px) {
  .action-bar-inset {
    padding-bottom: calc(0.75rem + var(--safe-bottom) + var(--keyboard-inset));
  }
}

/* ---------------------------------------------------------------------------
   Date inputs on iOS — Phase 17, device pass 2026-08-28.

   REPORTED FROM A REAL PHONE: every date field in Add Registration, Add
   Insurance and Add Maintenance Record grew past its panel and gave the page a
   horizontal scroll.

   ⚠ THE FIRST DIAGNOSIS WAS WRONG, AND IS WORTH RECORDING AS SUCH.

   It looked like `min-width: auto` — a flex or grid ITEM will not shrink below
   its content, and MaintenanceRecordForm already carried a comment saying
   exactly that about two of its date fields. So `min-w-0` went onto the input,
   the Modal body, the field grids and a page column, and it shipped, and the
   field was still 26px too wide on the device.

   A probe run ON THE PHONE measured eight variants of the same field. iPhone,
   iOS 18.7, Safari 26.6, 336px of room:

     production (appearance: auto)   362px wide, 62px tall, min-width 102px
     + appearance: none              336px wide, 44px tall, min-width 0px

   Three things in that table, none of which `min-width` explains:

     1. The author's `min-width: 0` was IGNORED. It computes to 102px while the
        native control is in play — the UA's own minimum wins.
     2. The author's `height: 2.75rem` was ignored too, at 62px. A rule about
        width could never have fixed a box that is wrong in both directions.
     3. `-webkit-appearance: none` fixes all of it, on its own. Every variant
        that included it fit; every variant that did not, overflowed by exactly
        26px, whatever else was applied.

   So the native control was overriding the author's box, and the only thing
   that hands the box back is turning the native control's own styling off. The
   picker still opens on tap: that comes from `type="date"`, not from
   `appearance`. Verified on desktop Chromium too, which renders identically
   with and without it — the calendar indicator is a separate pseudo-element and
   survives — so this is applied everywhere rather than behind a media query.

   `min-width: 0` stays only because it is true and free once the control is no
   longer overriding it. It is NOT what fixes this.

   e2e/date-field-shrink.spec.ts asserts the `appearance` computed value, since
   no desktop engine reproduces the symptom to measure.
*/
input[type='date'],
input[type='datetime-local'],
input[type='month'],
input[type='time'],
input[type='week'] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  min-width: 0;
}

input[type='date']::-webkit-date-and-time-value,
input[type='datetime-local']::-webkit-date-and-time-value,
input[type='month']::-webkit-date-and-time-value,
input[type='time']::-webkit-date-and-time-value,
input[type='week']::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.placeholder\:text-faint::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--faint) / var(--tw-text-opacity, 1));
}

.placeholder\:text-faint::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--faint) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--muted) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--muted) / var(--tw-text-opacity, 1));
}

.first\:mt-0:first-child {
  margin-top: 0px;
}

.first\:pl-0:first-child {
  padding-left: 0px;
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.last\:pr-0:last-child {
  padding-right: 0px;
}

.hover\:border-faint:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--faint) / var(--tw-border-opacity, 1));
}

.hover\:border-hairline-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--hairline-strong) / var(--tw-border-opacity, 1));
}

.hover\:border-racing:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent) / var(--tw-border-opacity, 1));
}

.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--warning-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-error:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--error) / var(--tw-bg-opacity, 1));
}

.hover\:bg-error-bg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--error-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-error-fg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--error-fg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-error\/80:hover {
  background-color: rgb(var(--error) / 0.8);
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--sand) / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--parchment) / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--success-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-hairline:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--hairline) / var(--tw-bg-opacity, 1));
}

.hover\:bg-parchment:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--parchment) / var(--tw-bg-opacity, 1));
}

.hover\:bg-racing:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent) / var(--tw-bg-opacity, 1));
}

.hover\:bg-racing-deep:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-deep) / var(--tw-bg-opacity, 1));
}

.hover\:bg-racing-tint:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-tint) / var(--tw-bg-opacity, 1));
}

.hover\:bg-racing-tint-strong:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-tint-strong) / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--error-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-sand:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--sand) / var(--tw-bg-opacity, 1));
}

.hover\:bg-scrim\/70:hover {
  background-color: rgb(var(--scrim) / 0.7);
}

.hover\:bg-scrim\/80:hover {
  background-color: rgb(var(--scrim) / 0.8);
}

.hover\:bg-surface:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vellum) / var(--tw-bg-opacity, 1));
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:bg-vellum:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vellum) / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/30:hover {
  background-color: rgb(255 255 255 / 0.3);
}

.hover\:text-error:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--error) / var(--tw-text-opacity, 1));
}

.hover\:text-error-fg:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--error-fg) / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ink) / var(--tw-text-opacity, 1));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ink) / var(--tw-text-opacity, 1));
}

.hover\:text-muted:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--muted) / var(--tw-text-opacity, 1));
}

.hover\:text-muted-strong:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--muted-strong) / var(--tw-text-opacity, 1));
}

.hover\:text-on-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--on-accent) / var(--tw-text-opacity, 1));
}

.hover\:text-racing:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--accent) / var(--tw-text-opacity, 1));
}

.hover\:text-slate:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--slate) / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-info:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--info) / var(--tw-border-opacity, 1));
}

.focus\:border-racing:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent) / var(--tw-border-opacity, 1));
}

.focus\:bg-sand:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--sand) / var(--tw-bg-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}

.focus\:ring-info:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--info) / var(--tw-ring-opacity, 1));
}

.focus\:ring-racing:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent) / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-offset-4:focus-visible {
  outline-offset: 4px;
}

.focus-visible\:outline-racing:focus-visible {
  outline-color: rgb(var(--accent) / 1);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-racing:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-white:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-parchment:focus-visible {
  --tw-ring-offset-color: rgb(var(--parchment) / 1);
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:hover\:bg-scrim\/60:hover:disabled {
  background-color: rgb(var(--scrim) / 0.6);
}

.disabled\:hover\:bg-white\/10:hover:disabled {
  background-color: rgb(255 255 255 / 0.1);
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-racing {
  --tw-text-opacity: 1;
  color: rgb(var(--accent) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-50 {
  opacity: 0.5;
}

.peer:checked ~ .peer-checked\:border-racing {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent) / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-racing {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:opacity-100 {
  opacity: 1;
}

.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-racing {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent) / var(--tw-ring-opacity, 1));
}

.peer:focus-visible ~ .peer-focus-visible\:ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-40 {
  opacity: 0.4;
}

.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}

@media (min-width: 640px) {

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-52 {
    width: 13rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:max-w-xs {
    max-width: 20rem;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 768px) {

  .md\:static {
    position: static;
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:ml-16 {
    margin-left: 4rem;
  }

  .md\:ml-60 {
    margin-left: 15rem;
  }

  .md\:mt-auto {
    margin-top: auto;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:contents {
    display: contents;
  }

  .md\:hidden {
    display: none;
  }

  .md\:aspect-auto {
    aspect-ratio: auto;
  }

  .md\:h-10 {
    height: 2.5rem;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-4 {
    height: 1rem;
  }

  .md\:h-9 {
    height: 2.25rem;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:max-h-\[85vh\] {
    max-height: 85vh;
  }

  .md\:min-h-0 {
    min-height: 0px;
  }

  .md\:w-10 {
    width: 2.5rem;
  }

  .md\:w-24 {
    width: 6rem;
  }

  .md\:w-4 {
    width: 1rem;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:min-w-0 {
    min-width: 0px;
  }

  .md\:max-w-2xl {
    max-width: 42rem;
  }

  .md\:max-w-4xl {
    max-width: 56rem;
  }

  .md\:max-w-lg {
    max-width: 32rem;
  }

  .md\:max-w-md {
    max-width: 28rem;
  }

  .md\:flex-none {
    flex: none;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1fr_2fr\] {
    grid-template-columns: 1fr 2fr;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:rounded-md {
    border-radius: 2px;
  }

  .md\:bg-transparent {
    background-color: transparent;
  }

  .md\:p-0\.5 {
    padding: 0.125rem;
  }

  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .md\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .md\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:pt-14 {
    padding-top: 3.5rem;
  }

  .md\:pt-6 {
    padding-top: 1.5rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:font-sans {
    font-family: Instrument Sans, ui-sans-serif, system-ui, sans-serif;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-display-m {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:font-semibold {
    font-weight: 600;
  }

  .md\:leading-8 {
    line-height: 2rem;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:max-w-\[36rem\] {
    max-width: 36rem;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.15fr_0\.85fr\] {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media print {

  .print\:hidden {
    display: none;
  }

  .print\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .print\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .print\:overflow-visible {
    overflow: visible;
  }

  .print\:p-0 {
    padding: 0px;
  }
}

.\[\&\+\&\]\:border-t-0+.\[\&\+\&\]\:border-t-0 {
  border-top-width: 0px;
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.peer:checked ~ .peer-checked\:\[\&\>span\]\:scale-100>span {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}

.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}

.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}

.\[\&\>svg\]\:text-error-fg>svg {
  --tw-text-opacity: 1;
  color: rgb(var(--error-fg) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-ink>svg {
  --tw-text-opacity: 1;
  color: rgb(var(--ink) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-success-fg>svg {
  --tw-text-opacity: 1;
  color: rgb(var(--success-fg) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-warning-fg>svg {
  --tw-text-opacity: 1;
  color: rgb(var(--warning-fg) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}

.\[\&_code\]\:bg-transparent code {
  background-color: transparent;
}

.\[\&_code\]\:p-0 code {
  padding: 0px;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.peer:checked ~ .peer-checked\:\[\&_svg\]\:opacity-100 svg {
  opacity: 1;
}


/*# sourceMappingURL=main.f0fc5f65c124f15fbc5b.css.map*/