/* The theme's stylesheet initializes tailwindcss and imports the theme's default styles.

   The $ThemeStylesheet path is evaluated via a postcss resolver, which finds the theme's
   main stylesheet within the theme's gem.

   To control the order of the tailwindcss imports further, you can eject the theme's
   stylesheet locally using the following command, which will take precedence.
   > rake bullet_train:themes:light:eject_css

   Read more: https://bullettrain.co/docs/stylesheets
*/

*, ::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(59 130 246 / 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(59 130 246 / 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.17 | 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: #e5e7eb;
  /* 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: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 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;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='checkbox']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='radio']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

.font-display-semi-condensed {
  letter-spacing: 0 !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Aktiv Grotesk ships multiple figure styles; this turns on Figma's "Proportional
       uppercase/lining" — pnum (proportional spacing — tighter than the default monowidth
       used for column-alignment) + lnum (lining figures — uppercase-height, the modern
       look). Inherits app-wide. Anywhere that NEEDS column-aligned digits (timers, color
       hex, length counters) explicitly applies `tabular-nums`, which only flips the
       spacing axis — the lining-figures inherited from here are preserved. */
  font-variant-numeric: proportional-nums lining-nums;
}

/* Every stroked path inside an icon (the `.icon` class is auto-applied by
     `app/views/themes/atelier/_icon.html.erb`) keeps a constant 1.5px stroke
     no matter how the SVG is scaled. Sets the default so individual icons
     don't need `vector-effect="non-scaling-stroke"` on every path. */

svg.\!icon path[stroke],
  svg.\!icon line[stroke],
  svg.\!icon circle[stroke],
  svg.\!icon rect[stroke],
  svg.\!icon polyline[stroke],
  svg.\!icon polygon[stroke] {
  vector-effect: non-scaling-stroke !important;
}

svg.icon path[stroke],
  svg.icon line[stroke],
  svg.icon circle[stroke],
  svg.icon rect[stroke],
  svg.icon polyline[stroke],
  svg.icon polygon[stroke] {
  vector-effect: non-scaling-stroke;
}

svg.\!icon path[stroke],
  svg.\!icon line[stroke],
  svg.\!icon circle[stroke],
  svg.\!icon rect[stroke],
  svg.\!icon polyline[stroke],
  svg.\!icon polygon[stroke] {
  vector-effect: non-scaling-stroke !important;
}

/* App-wide focus-visible standard: a solid content-primary outline that only
     appears during keyboard navigation (focus-visible), never on mouse click.
     Add the `hide-focus-ring` class to opt an element out.

     Exception: fields styled as `.floating-input-field` or `.text-input` (text inputs,
     textareas, and native <select>s) are excluded. They already show an inset content-primary
     border on `:focus` (identical for click and keyboard), so the extra outer ring is redundant —
     keyboard focus should match the click/active state. */

a:not(.hide-focus-ring):focus-visible,
  button:not(.hide-focus-ring):focus-visible,
  input:not(.hide-focus-ring):not(.floating-input-field):not(.text-input):not(.search-input):focus-visible,
  textarea:not(.hide-focus-ring):not(.floating-input-field):not(.text-input):focus-visible,
  select:not(.hide-focus-ring):not(.floating-input-field):not(.text-input):focus-visible {
  outline: 2px solid var(--content-primary);
  transition: outline 0.2s ease;
}

.\!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;
  }
}

.form-input,.form-textarea,.form-select,.form-multiselect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
  border-color: #2563eb;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

.form-select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}

.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}

.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}

.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}

.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
}

.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.9em;
}

.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}

.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}

.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.5;
}

.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}

.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

/* OTP field validation states — toggled per-box by otp_controller. `!` overrides each box's
     default border/background utilities. Smooth because the boxes carry `.transition`. */

.otp-box-success {
  border-color: var(--brand-secondary-moola) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(239 254 246 / var(--tw-bg-opacity, 1)) !important;
  color: var(--brand-secondary-moola) !important;
}

.otp-box-error {
  --tw-border-opacity: 1 !important;
  border-color: rgb(232 59 71 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 242 243 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(232 59 71 / var(--tw-text-opacity, 1)) !important;
}

a {
  color: var(--secondary-500);
}

a:hover {
  color: var(--secondary-600);
  text-decoration-line: underline;
}

b,
  strong {
  font-weight: 600;
}

.buttons > :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)));
}

/* Button Styles, combines hover, active, focus styles */

/* OL-3343: the legacy `.button-disabled:not(.no-disabled-style)` rule was removed here — it
     applied a stray inset box-shadow (shadow-inner) plus hardcoded richBlack bg/text that
     predate the --background-disabled token. The modern disabled style now lives solely in
     buttons.css (.button-disabled → !bg-background-disabled + text-content-tertiary, no shadow). */

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link-disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link-disabled {
  background-color: var(--background-overlay);
}

.button-link-disabled {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link-disabled,
.floating-input-field.button-link-disabled:focus,
.floating-input-field.button-link-disabled:hover,
.floating-input-field.button-link-disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link-disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link-disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link-disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.button-focusable {
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-focusable:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-focusable {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

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

.button-focusable:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

/* Used in @extend declarations below */

.button-base {
  cursor: pointer;
}

.button-base:hover {
  text-decoration-line: none;
}

.button-base {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-base:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-base {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

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

.button-base:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-base {
  /* set a default "press down" effect for small buttons */
}

.button-base:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

/* inline icons */

[data-select-all-target='wrapper'].button-base svg {
  display: block;
}

.button-base svg {
  display: inline-block;
}

.button-base {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-base:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base:disabled),
  .button-primary-dark:has(.button-base:disabled),
  .button-secondary:has(.button-base:disabled),
  .button-tertiary:has(.button-base:disabled),
  .button-danger:has(.button-base:disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base:disabled):not(.no-disabled-style), .button-primary-dark:has(.button-base:disabled):not(.no-disabled-style), .button-secondary:has(.button-base:disabled):not(.no-disabled-style), .button-tertiary:has(.button-base:disabled):not(.no-disabled-style), .button-danger:has(.button-base:disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base:disabled:hover),
  .button-primary-dark:has(.button-base:disabled:hover),
  .button-secondary:has(.button-base:disabled:hover),
  .button-tertiary:has(.button-base:disabled:hover),
  .button-danger:has(.button-base:disabled:hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base:disabled:hover):not(.no-disabled-style), .button-primary-dark:has(.button-base:disabled:hover):not(.no-disabled-style), .button-secondary:has(.button-base:disabled:hover):not(.no-disabled-style), .button-tertiary:has(.button-base:disabled:hover):not(.no-disabled-style), .button-danger:has(.button-base:disabled:hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base:disabled:active),
  .button-primary-dark:has(.button-base:disabled:active),
  .button-secondary:has(.button-base:disabled:active),
  .button-tertiary:has(.button-base:disabled:active),
  .button-danger:has(.button-base:disabled:active) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base:disabled:active):not(.no-disabled-style), .button-primary-dark:has(.button-base:disabled:active):not(.no-disabled-style), .button-secondary:has(.button-base:disabled:active):not(.no-disabled-style), .button-tertiary:has(.button-base:disabled:active):not(.no-disabled-style), .button-danger:has(.button-base:disabled:active):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

/* transition everything */

/* define defaults for blending modes */

.button-base.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style)),
  .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style)),
  .button-secondary:has(.button-base.disabled:not(.no-disabled-style)),
  .button-tertiary:has(.button-base.disabled:not(.no-disabled-style)),
  .button-danger:has(.button-base.disabled:not(.no-disabled-style)) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-secondary:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-tertiary:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-danger:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style):hover),
  .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style):hover),
  .button-secondary:has(.button-base.disabled:not(.no-disabled-style):hover),
  .button-tertiary:has(.button-base.disabled:not(.no-disabled-style):hover),
  .button-danger:has(.button-base.disabled:not(.no-disabled-style):hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-secondary:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-tertiary:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-danger:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style):active),
  .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style):active),
  .button-secondary:has(.button-base.disabled:not(.no-disabled-style):active),
  .button-tertiary:has(.button-base.disabled:not(.no-disabled-style):active),
  .button-danger:has(.button-base.disabled:not(.no-disabled-style):active) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-secondary:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-tertiary:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-danger:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style)),
  .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style)),
  .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style)),
  .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style)),
  .button-danger:has(.button-base.\!disabled:not(.no-disabled-style)) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-danger:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style):hover),
  .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style):hover),
  .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style):hover),
  .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style):hover),
  .button-danger:has(.button-base.\!disabled:not(.no-disabled-style):hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-danger:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style):active),
  .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style):active),
  .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style):active),
  .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style):active),
  .button-danger:has(.button-base.\!disabled:not(.no-disabled-style):active) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-danger:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light {
  cursor: pointer;
}

.button-base-light:hover {
  text-decoration-line: none;
}

.button-base-light {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-base-light:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-base-light {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-base-light:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-base-light:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-base-light {
  /* set a default "press down" effect for small buttons */
}

.button-base-light:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-base-light svg {
  display: inline-block;
}

.button-base-light {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-base-light:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light:disabled:not(.no-disabled-style):active {
  --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));
}

.button-base-light:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-base-light:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-base-light.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-base-light.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-base-light.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-base-light.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-base-light.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-base-light.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-base-light {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-base-light:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-base-light-hover {
  background-blend-mode: soft-light, normal;
  box-shadow: 0px -1px 1px 0px rgba(255, 255, 255, 0.2) inset,
      0px 6px 12px 0px rgba(255, 255, 255, 0.2) inset,
      0px 8px 2px 0px rgba(0, 0, 0, 0), 0px 5px 2px 0px rgba(0, 0, 0, 0.01),
      0px 3px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.07),
      0px 1px 1px 0px rgba(0, 0, 0, 0.08);
}

.button-base-light-active {
  background-blend-mode: multiply, normal;
  box-shadow: 0px -1px 1px 0px rgba(255, 255, 255, 0.2) inset,
      0px 6px 12px 0px rgba(255, 255, 255, 0.2) inset,
      0px 7.76px 1.94px 0px rgba(0, 0, 0, 0),
      0px 4.85px 1.94px 0px rgba(0, 0, 0, 0.01),
      0px 2.91px 1.94px 0px rgba(0, 0, 0, 0.04),
      0px 0.97px 0.97px 0px rgba(0, 0, 0, 0.07),
      0px 0.97px 0.97px 0px rgba(0, 0, 0, 0.08);
}

.button-base-dark {
  cursor: pointer;
}

.button-base-dark:hover {
  text-decoration-line: none;
}

.button-base-dark {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-base-dark:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-base-dark {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-base-dark:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-base-dark:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-base-dark {
  /* set a default "press down" effect for small buttons */
}

.button-base-dark:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-base-dark svg {
  display: inline-block;
}

.button-base-dark {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-base-dark:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark:disabled:not(.no-disabled-style):active {
  --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));
}

.button-base-dark:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-base-dark:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-base-dark.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-base-dark.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-base-dark.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-base-dark.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-base-dark.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-base-dark.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-base-dark {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-base-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

/* classes for button-{priority}-{type} according to design */

.button-primary-seafoam {
  cursor: pointer;
}

.button-primary-seafoam:hover {
  text-decoration-line: none;
}

.button-primary-seafoam {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-primary-seafoam:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-primary-seafoam {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-primary-seafoam:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-primary-seafoam:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-primary-seafoam {
  /* set a default "press down" effect for small buttons */
}

.button-primary-seafoam:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-primary-seafoam svg {
  display: inline-block;
}

.button-primary-seafoam {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-primary-seafoam:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam:disabled:not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-primary-seafoam {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-primary-seafoam:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-primary-seafoam:hover {
  background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.25) 0%,
          rgba(255, 255, 255, 0.25) 100%
        ),
        var(--button-bg-color);
}

.button-primary-seafoam:hover {
  background-blend-mode: soft-light, normal;
  box-shadow: 0px -1px 1px 0px rgba(255, 255, 255, 0.2) inset,
      0px 6px 12px 0px rgba(255, 255, 255, 0.2) inset,
      0px 8px 2px 0px rgba(0, 0, 0, 0), 0px 5px 2px 0px rgba(0, 0, 0, 0.01),
      0px 3px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.07),
      0px 1px 1px 0px rgba(0, 0, 0, 0.08);
}

.button-primary-seafoam:active {
  background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.02) 0%,
          rgba(0, 0, 0, 0.02) 100%
        ),
        var(--button-bg-color);
}

.button-primary-seafoam:active {
  background-blend-mode: multiply, normal;
  box-shadow: 0px -1px 1px 0px rgba(255, 255, 255, 0.2) inset,
      0px 6px 12px 0px rgba(255, 255, 255, 0.2) inset,
      0px 7.76px 1.94px 0px rgba(0, 0, 0, 0),
      0px 4.85px 1.94px 0px rgba(0, 0, 0, 0.01),
      0px 2.91px 1.94px 0px rgba(0, 0, 0, 0.04),
      0px 0.97px 0.97px 0px rgba(0, 0, 0, 0.07),
      0px 0.97px 0.97px 0px rgba(0, 0, 0, 0.08);
}

/* .button-primary {
    --button-bg-color: theme("colors.salmon.DEFAULT");
  } */

.button-primary-seafoam {
  --button-bg-color: #9ce7c1;
}

/*
    button-secondary is black and white.

    We define separate classes, button-secondary-dark and
    button-secondary-light, and then create a button-secondary
    class that applies both of them
  */

.button-secondary-dark:hover, .button-secondary-light:hover {
  --button-overlay-color-light: rgba(0, 0, 0, 0.03);
  --button-overlay-color-dark: rgba(255, 255, 255, 0.25);
  --button-overlay-color: transparent;
  /* override separately */
  background: linear-gradient(
          0deg,
          var(--button-overlay-color),
          var(--button-overlay-color)
        ),
        var(--button-bg-color);
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01),
        0px 3px 2px rgba(0, 0, 0, 0.04), 0px 1px 1px rgba(0, 0, 0, 0.07),
        0px 1px 1px rgba(0, 0, 0, 0.08),
        inset 0px -1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 6px 12px rgba(255, 255, 255, 0.2);
}

.button-secondary-dark:active, .button-secondary-light:active {
  --button-overlay-color-light: rgba(0, 0, 0, 0.03);
  --button-overlay-color-dark: rgba(255, 255, 255, 0.25);
  --button-overlay-color: transparent;
  /* override separately */
  background: linear-gradient(
          0deg,
          var(--button-overlay-color),
          var(--button-overlay-color)
        ),
        var(--button-bg-color);
  box-shadow: 0px 4.85px 1.94px rgba(0, 0, 0, 0.01),
        0px 2.91px 1.94px rgba(0, 0, 0, 0.04),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.07),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.08),
        inset 0px -1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 6px 12px rgba(255, 255, 255, 0.2);
}

.button-secondary-dark {
  cursor: pointer;
}

.button-secondary-dark:hover {
  text-decoration-line: none;
}

.button-secondary-dark {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-secondary-dark:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-secondary-dark {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-secondary-dark:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-secondary-dark:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-secondary-dark {
  /* set a default "press down" effect for small buttons */
}

.button-secondary-dark:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-secondary-dark svg {
  display: inline-block;
}

.button-secondary-dark {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-secondary-dark:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark:disabled:not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-secondary-dark {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-secondary-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-secondary-dark {
  --button-bg-color: #0B051D;
  --tw-ring-color: var(--tw-ring-color-light);
}

/* TODO: in dark mode, this doesn't work */

.button-secondary-dark:hover {
  --button-overlay-color: var(--button-overlay-color-dark);
  --blend-mode: var(--blend-mode-soft-light-normal);
}

.button-secondary-dark:active {
  --button-overlay-color: var(--button-overlay-color-dark);
  --blend-mode: var(--blend-mode-soft-light-normal);
}

.button-secondary-light {
  cursor: pointer;
}

.button-secondary-light:hover {
  text-decoration-line: none;
}

.button-secondary-light {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-secondary-light:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-secondary-light {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-secondary-light:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-secondary-light:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-secondary-light {
  /* set a default "press down" effect for small buttons */
}

.button-secondary-light:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-secondary-light svg {
  display: inline-block;
}

.button-secondary-light {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-secondary-light:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light:disabled:not(.no-disabled-style):active {
  --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));
}

.button-secondary-light:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-secondary-light:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-secondary-light.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-secondary-light.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-secondary-light.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-secondary-light.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-secondary-light.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-secondary-light.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-secondary-light {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-secondary-light:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-secondary-light {
  --tw-ring-color: var(--tw-ring-color-light);
  background: transparent;
  background-blend-mode: normal;
  box-shadow: none;
  border-width: 1px;
  border-color: rgb(11 5 29 / .08);
}

.button-secondary-light:where(.dark, .dark *) {
  border-color: rgb(248 245 244 / .08);
}

.button-secondary-light:hover,
    .button-secondary-light:active,
    .button-secondary-light:focus {
  --button-bg-color: #322f2814;
  /* opacity-08 */
  background: var(--button-bg-color);
  box-shadow: none;
}

/*
    button-tertiary is a gray button of different shades in light and dark mode.

    Similarly as with button-secondary, we define separate classes, button-tertiary-dark and
    button-tertiary-light, and then create a button-tertiary class that applies both of them.
  */

.button-tertiary-dark {
  cursor: pointer;
}

.button-tertiary-dark:hover {
  text-decoration-line: none;
}

.button-tertiary-dark {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-tertiary-dark:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-tertiary-dark {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-tertiary-dark:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-tertiary-dark:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-tertiary-dark {
  /* set a default "press down" effect for small buttons */
}

.button-tertiary-dark:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-tertiary-dark svg {
  display: inline-block;
}

.button-tertiary-dark {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-tertiary-dark:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark:disabled:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-dark {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-tertiary-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-tertiary-dark {
  --button-bg-color: rgb(248 245 244 / 15%);
  --tw-ring-color: var(--tw-ring-color-dark);
  /* TODO: in dark mode, this doesn't work */
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px 1px 1px rgba(0, 0, 0, 0.11),
      inset 0px 6px 12px rgba(0, 0, 0, 0.04);
}

.button-tertiary-dark:hover {
  background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.25),
          rgba(255, 255, 255, 0.25)
        ),
        var(--button-bg-color);
  background-blend-mode: soft-light, normal;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01),
        0px 3px 2px rgba(0, 0, 0, 0.04), 0px 1px 1px rgba(0, 0, 0, 0.07),
        0px 1px 1px rgba(0, 0, 0, 0.08), inset 0px -1px 1px rgba(0, 0, 0, 0.11),
        inset 0px 6px 12px rgba(0, 0, 0, 0.04);
}

.button-tertiary-dark:active {
  background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.02),
          rgba(0, 0, 0, 0.02)
        ),
        var(--button-bg-color);
  background-blend-mode: multiply, normal;
  box-shadow: 0px 4.85px 1.94px rgba(0, 0, 0, 0.01),
        0px 2.91px 1.94px rgba(0, 0, 0, 0.04),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.07),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.08),
        inset 0px -0.97px 0.97px rgba(0, 0, 0, 0.11),
        inset 0px 6px 12px rgba(0, 0, 0, 0.04);
}

.button-tertiary-light {
  cursor: pointer;
}

.button-tertiary-light:hover {
  text-decoration-line: none;
}

.button-tertiary-light {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-tertiary-light:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-tertiary-light {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-tertiary-light:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-tertiary-light:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-tertiary-light {
  /* set a default "press down" effect for small buttons */
}

.button-tertiary-light:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-tertiary-light svg {
  display: inline-block;
}

.button-tertiary-light {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-tertiary-light:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light:disabled:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-tertiary-light {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-tertiary-light:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-tertiary-light {
  --button-bg-color: #F1EDEA;
  --tw-ring-color: var(--tw-ring-color-light);
  /* TODO: in dark mode, this doesn't work */
  background: linear-gradient(
        180deg,
        rgba(19, 21, 23, 0) 0%,
        rgba(19, 21, 23, 0.04) 100%
      ),
      var(--button-bg-color);
  box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.11);
}

.button-tertiary-light:hover {
  background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.25),
          rgba(255, 255, 255, 0.25)
        ),
        linear-gradient(
          180deg,
          rgba(19, 21, 23, 0) 0%,
          rgba(19, 21, 23, 0.04) 100%
        ),
        var(--button-bg-color);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01),
        0px 3px 2px rgba(0, 0, 0, 0.04), 0px 1px 1px rgba(0, 0, 0, 0.07),
        0px 1px 1px rgba(0, 0, 0, 0.08),
        inset 0px -1px 1px rgba(255, 255, 255, 0.11);
}

.button-tertiary-light:active {
  background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.02),
          rgba(0, 0, 0, 0.02)
        ),
        linear-gradient(
          180deg,
          rgba(19, 21, 23, 0) 0%,
          rgba(19, 21, 23, 0.04) 100%
        ),
        var(--button-bg-color);
  background-blend-mode: multiply, normal, normal;
  box-shadow: 0px 4.85px 1.94px rgba(0, 0, 0, 0.01),
        0px 2.91px 1.94px rgba(0, 0, 0, 0.04),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.07),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.08),
        inset 0px -0.97px 0.97px rgba(255, 255, 255, 0.11);
}

/*
    button-link occupies the same space as a button, but is styled as a link, even if coded as a <button> or <input>
  */

.button-link {
  cursor: pointer;
  font-weight: 500;
  color: var(--content-primary);
  --button-bg-color: transparent;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: underline;
  /* link-looking buttons don't have a "press down" effect */
}

.button-link,
    .button-link.button-large,
    .button-link.button-small {
  padding: 0;
  border-radius: 2px;
}


    .button-link.\!button-small {
  padding: 0 !important;
  border-radius: 2px !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link:disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link:disabled {
  background-color: var(--background-overlay);
}

.button-link:disabled {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link:disabled,
.floating-input-field.button-link:disabled:focus,
.floating-input-field.button-link:disabled:hover,
.floating-input-field.button-link:disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link:disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link:disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link:disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link:disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link:disabled:hover {
  background-color: var(--background-overlay);
}

.button-link:disabled:hover {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link:disabled:hover,
.floating-input-field.button-link:disabled:hover:focus,
.floating-input-field.button-link:disabled:hover:hover,
.floating-input-field.button-link:disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link:disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link:disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link:disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link:disabled:active, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link:disabled:active {
  background-color: var(--background-overlay);
}

.button-link:disabled:active {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link:disabled:active,
.floating-input-field.button-link:disabled:active:focus,
.floating-input-field.button-link:disabled:active:hover,
.floating-input-field.button-link:disabled:active:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link:disabled:active:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link:disabled:active:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link:disabled:active:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.disabled {
  background-color: var(--background-overlay);
}

.button-link.disabled {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link.disabled,
.floating-input-field.button-link.disabled:focus,
.floating-input-field.button-link.disabled:hover,
.floating-input-field.button-link.disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.disabled:hover {
  background-color: var(--background-overlay);
}

.button-link.disabled:hover {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link.disabled:hover,
.floating-input-field.button-link.disabled:hover:focus,
.floating-input-field.button-link.disabled:hover:hover,
.floating-input-field.button-link.disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.disabled:active, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.disabled:active {
  background-color: var(--background-overlay);
}

.button-link.disabled:active {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link.disabled:active,
.floating-input-field.button-link.disabled:active:focus,
.floating-input-field.button-link.disabled:active:hover,
.floating-input-field.button-link.disabled:active:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.disabled:active:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.disabled:active:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.disabled:active:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.\!disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.\!disabled {
  background-color: var(--background-overlay);
}

.button-link.\!disabled {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link.\!disabled,
.floating-input-field.button-link.\!disabled:focus,
.floating-input-field.button-link.\!disabled:hover,
.floating-input-field.button-link.\!disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.\!disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.\!disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.\!disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.\!disabled:hover {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:hover {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link.\!disabled:hover,
.floating-input-field.button-link.\!disabled:hover:focus,
.floating-input-field.button-link.\!disabled:hover:hover,
.floating-input-field.button-link.\!disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.\!disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.\!disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.\!disabled:active, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.\!disabled:active {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:active {
  background-color: transparent;
  --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);
}

.floating-input-field.button-link.\!disabled:active,
.floating-input-field.button-link.\!disabled:active:focus,
.floating-input-field.button-link.\!disabled:active:hover,
.floating-input-field.button-link.\!disabled:active:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.\!disabled:active:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.\!disabled:active:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:active:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.button-link:active {
  --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));
}

.button-exit-process {
  cursor: pointer;
}

.button-exit-process:hover {
  text-decoration-line: none;
}

.button-exit-process {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-exit-process:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-exit-process {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-exit-process:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-exit-process:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-exit-process {
  /* set a default "press down" effect for small buttons */
}

.button-exit-process:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-exit-process svg {
  display: inline-block;
}

.button-exit-process {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-exit-process:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process:disabled:not(.no-disabled-style):active {
  --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));
}

.button-exit-process:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-exit-process:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-exit-process.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-exit-process.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-exit-process.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-exit-process.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-exit-process.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-exit-process.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-exit-process {
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-base);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
  --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);
}

.floating-input-field.button-exit-process,
.floating-input-field.button-exit-process:focus,
.floating-input-field.button-exit-process:hover,
.floating-input-field.button-exit-process:active {
  box-shadow: none;
}

.button-exit-process:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-add-nested-item {
  cursor: pointer;
}

.button-add-nested-item:hover {
  text-decoration-line: none;
}

.button-add-nested-item {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-add-nested-item:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-add-nested-item {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-add-nested-item:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-add-nested-item:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-add-nested-item {
  /* set a default "press down" effect for small buttons */
}

.button-add-nested-item:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-add-nested-item svg {
  display: inline-block;
}

.button-add-nested-item {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-add-nested-item:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item:disabled:not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-add-nested-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  padding: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.0113rem;
  font-weight: 700;
  color: var(--content-primary);
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.button-add-nested-item:hover {
  background-color: var(--grayscale-1);
  text-decoration-line: none;
}

.button-add-nested-item:active {
  --tw-scale-x: 0.995;
  --tw-scale-y: 0.995;
  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));
}

.button-add-nested-item {
  /* box-shadow: 0px 0px 0px 0px #342e26, 0px 0px 0px 0px rgba(52, 46, 38, 0),
      0px 0px 2px 0px rgba(52, 46, 38, 0.08),
      0px 4px 6px 0px rgba(52, 46, 38, 0.04); */
}

.button-add-price-nested-item {
  cursor: pointer;
}

.button-add-price-nested-item:hover {
  text-decoration-line: none;
}

.button-add-price-nested-item {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-add-price-nested-item:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-add-price-nested-item {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-add-price-nested-item:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-add-price-nested-item:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-add-price-nested-item {
  /* set a default "press down" effect for small buttons */
}

.button-add-price-nested-item:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-add-price-nested-item svg {
  display: inline-block;
}

.button-add-price-nested-item {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-add-price-nested-item:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item:disabled:not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-add-price-nested-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  padding: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.0113rem;
  font-weight: 700;
  color: var(--content-primary);
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.button-add-price-nested-item:hover {
  background-color: var(--grayscale-1);
  text-decoration-line: none;
}

.button-add-price-nested-item:active {
  --tw-scale-x: 0.995;
  --tw-scale-y: 0.995;
  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));
}

.button-add-price-nested-item {
  /* box-shadow: 0px 0px 0px 0px #342e26, 0px 0px 0px 0px rgba(52, 46, 38, 0),
      0px 0px 2px 0px rgba(52, 46, 38, 0.08),
      0px 4px 6px 0px rgba(52, 46, 38, 0.04); */
}

.button-add-price-nested-item {
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.button-add-price-nested-item:hover {
  background-color: var(--grayscale-1);
}

/* Original Bullet Train Button Styles */

.\!button {
  cursor: pointer;
}

.\!button:hover {
  text-decoration-line: none;
}

.\!button {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.\!button:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.\!button {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

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

.\!button:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.\!button {
  /* set a default "press down" effect for small buttons */
}

.\!button:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.\!button svg {
  display: inline-block;
}

.\!button {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.\!button:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button:disabled:not(.no-disabled-style):active {
  --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));
}

.\!button:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.\!button:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button:disabled:active:not(.no-disabled-style):active {
  --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));
}

.\!button.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.\!button.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.\!button.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.\!button.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.\!button.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.\!button.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button {
  cursor: pointer;
}

.button:hover {
  text-decoration-line: none;
}

.button {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

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

.button:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button {
  /* set a default "press down" effect for small buttons */
}

.button:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button svg {
  display: inline-block;
}

.button {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button:disabled:not(.no-disabled-style):active {
  --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));
}

.button:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-color {
  cursor: pointer;
}

.button-color:hover {
  text-decoration-line: none;
}

.button-color {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-color:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-color {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

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

.button-color:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.button-color {
  /* set a default "press down" effect for small buttons */
}

.button-color:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.button-color svg {
  display: inline-block;
}

.button-color {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-color:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color:disabled:not(.no-disabled-style):active {
  --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));
}

.button-color:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-color:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color:disabled:active:not(.no-disabled-style):active {
  --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));
}

.button-color.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-color.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-color.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-color.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.button-color.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.button-color.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.button-color {
  background-color: var(--background-overlay);
  text-align: center;
  font-weight: 600;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.button-color {
  /* no inner shadow on any buttons! */
}

.button-color:hover {
  background-color: var(--bg-fill-secondary-hover);
  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: 0.15s;
}

.button-color {
  border-radius: 9999px;
  line-height: 1;
  width: auto;
  aspect-ratio: 1/1;
}

.btn-toggle input[type='checkbox'],
    .btn-toggle input[type='radio'] {
  display: none;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.button-secondary.bg-transparent {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.\!bg-transparent, .btn-toggle input[type='radio']:checked + button.button-secondary.\!bg-transparent {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary span span, .btn-toggle input[type='radio']:checked + button.button-secondary span span {
  color: var(--content-primary);
}

.btn-toggle.btn-color-picker input[type='checkbox']:checked + button, .btn-toggle.btn-color-picker input[type='radio']:checked + button {
  border-radius: 9999px;
  --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);
  --tw-ring-offset-width: 2px;
}

.full {
  display: flex;
  width: 100%;
  justify-content: center;
}

form.\!form > :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));
}

form.form > :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));
}

form.\!form .form-wrapper > :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));
}

form.form .form-wrapper > :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));
}

form.\!form .form-wrapper[disabled] {
  opacity: 0.3 !important;
  position: relative !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

form.form .form-wrapper[disabled] {
  opacity: 0.3;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

form.\!form .form-wrapper[disabled]:before {
  content: '' !important;
  position: absolute !important;
  background-color: transparent !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

form.form .form-wrapper[disabled]:before {
  content: '';
  position: absolute;
  background-color: transparent;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*
    This is the best way I know how to solve the problem of Tailwind's `space-y-5` creating extra space at the top
    because Rails injects hidden fields at the top of our forms. However, we don't need this on `get` forms, because
    no extra element is injected into the form.
    */

form.\!form[method='post' i],
    form.\!form[method='patch' i] {
  margin-top: -1.25rem;
}

form.form[method='post' i],
    form.form[method='patch' i] {
  margin-top: -1.25rem;
}

form.\!form[method='post' i],
    form.\!form[method='patch' i] {
  margin-top: -1.25rem;
}

form.\!form .buttons {
  padding-top: 0.25rem;
}

form.\!form .buttons > :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)));
}

form.form .buttons {
  padding-top: 0.25rem;
}

form.form .buttons > :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)));
}

.table {
  width: 100%;
}

.table > :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));
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
  --tw-divide-opacity: 0.05;
}

.table {
  text-align: left;
}

.table:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}

.table th {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.33;
  letter-spacing: 0;
  font-weight: 600;
  text-transform: uppercase;
}

.table th:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.table th:first-child {
  padding-left: 1.25rem;
}

.table th:last-child {
  padding-right: 1.25rem;
}

.table tbody > :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));
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
  --tw-divide-opacity: 0.05;
}

.table tbody:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}

.table td {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.table td:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.table td:first-child {
  padding-left: 1.25rem;
}

.table td:last-child {
  padding-right: 1.25rem;
}

.table td.buttons {
  padding-right: 0.75rem;
}

.table td.buttons > :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)));
  --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));
}

.table td.buttons {
  text-align: right;
}

/* just having a cell with buttons shouldn't expand the height of a table row. */

.table td.buttons > * {
  /* @apply -mt-5 -mb-5; */
}

.box-table .table th:first-child, .box-table .table td:first-child {
  padding-left: 2rem;
}

.box-table .table th:last-child, .box-table .table td:last-child {
  padding-right: 2rem;
}

.pagy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pagy a:not(.gap) {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-style: none;
  background-color: var(--background-overlay);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--content-primary);
  cursor: pointer;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.pagy a:not(.gap):hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

.pagy a:not(.gap):active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}

.pagy a:not(.gap):not([href]) {
  /* disabled links */
  cursor: not-allowed;
  background-color: var(--background-base);
  color: var(--content-tertiary);
}

.pagy a:not(.gap):not([href]):hover {
  --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));
}

.pagy a:not(.gap).current {
  background-color: var(--brand-primary-brew);
  color: var(--background-elevated);
}

.message .pagy a:not(.gap).current .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

/* Hide page numbers on mobile/tablet, show only prev/next */

@media (max-width: 1023px) {
  .pagy {
    /* Make prev/next buttons larger on small screens */
  }

  .pagy a:not([aria-label='Previous']):not([aria-label='Next']) {
    display: none;
  }

  .pagy a[aria-label='Previous'],
      .pagy a[aria-label='Next'] {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Gap/ellipsis styling */

.pagy .gap {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-style: none;
  cursor: default;
  background-color: var(--background-overlay);
  color: var(--content-primary);
  text-align: center;
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1;
}

.pagy .gap:hover {
  --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));
}

/* Hide gap/ellipsis on mobile/tablet */

@media (max-width: 1023px) {
  .pagy .gap {
    display: none;
  }
}

/* Replace text symbols with SVG icons using CSS */

.pagy a[aria-label='Previous']:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 10L3.5 6L7.5 2' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.pagy a[aria-label='Next']:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 2L8.5 6L4.5 10' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Larger icons on small screens */

@media (max-width: 1023px) {
  .pagy a[aria-label='Previous']:before,
      .pagy a[aria-label='Next']:before {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13.333L5.333 8L10 2.667' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .pagy a[aria-label='Next']:before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2.667L10.667 8L6 13.333' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* Hide the original text symbols */

.pagy a[aria-label='Previous'],
    .pagy a[aria-label='Next'] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  font-size: 0;
  /* Hide the text */
}

/* Style the gap/ellipsis */

.pagy .gap:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 6C1 5.44772 1.44772 5 2 5C2.55228 5 3 5.44772 3 6C3 6.55228 2.55228 7 2 7C1.44772 7 1 6.55228 1 6ZM5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6ZM9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6Z' fill='currentColor'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.pagy .gap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  font-size: 0;
  /* Hide the text */
}

[data-select-all-target='wrapper'].pagy label {
  display: block;
}

.pagy label {
  display: inline-block;
  white-space: nowrap;
  border-radius: 0.5rem;
  background-color: var(--background-overlay);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.pagy label input {
  border-radius: 0.375rem;
  border-style: none;
  background-color: var(--background-elevated);
}

/* Fix Safari issue related to <summary> / <details> arrow */

details > summary.list-none::-webkit-details-marker,
  details > summary.list-none::marker {
  display: none;
}

.field-border-disabled,
    .field-border-disabled:hover,
    .field-border-disabled:focus {
  --border-color: #DCD8DA;
}

.field-border-base {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.field-border-base,
    .field-border-base:hover,
    .field-border-base:focus,
    .field-border-base:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

/* can't @apply field-border-disabled, but it would be cool, so copying its contents */

.field-border-base:disabled,
      .field-border-base:disabled:hover,
      .field-border-base:disabled:focus,
      .field-border-base:disabled:focus-within {
  --border-color: #DCD8DA;
}

.field-border {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.field-border, .field-border:hover, .field-border:focus, .field-border:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.field-border:disabled, .field-border:disabled:hover, .field-border:disabled:focus, .field-border:disabled:focus-within {
  --border-color: #DCD8DA;
}

.field-border:hover,
    .field-border:focus,
    .field-border:focus-within {
  --border-color: rgb(11 5 29 / 36%);
}

.field-border:focus,
    .field-border:focus-within {
  --ring-color: rgb(11 5 29 / 16%);
}

.field-no-border {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.field-no-border, .field-no-border:hover, .field-no-border:focus, .field-no-border:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.field-no-border:disabled, .field-no-border:disabled:hover, .field-no-border:disabled:focus, .field-no-border:disabled:focus-within {
  --border-color: #DCD8DA;
}

.field-no-border:hover,.field-no-border:focus,.field-no-border:focus-within {
  --border-color: rgb(11 5 29 / 36%);
}

.field-no-border:focus,.field-no-border:focus-within {
  --ring-color: rgb(11 5 29 / 16%);
}

.field-no-border {
  border-radius: 0.5rem;
  --border-width: 0;
  --border-color: transparent;
}

.field-no-border:focus {
  --border-width: 1px;
}

.text-input-base {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .text-input-base {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.text-input-base {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.text-input-base::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input-base::placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input-base:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.text-input-base:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input-base:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input-disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.text-input-disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

/*
    Not applied to super_select, so you'll need to adjust super_select.css separately
  */

.text-input {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .text-input {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.text-input {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.text-input::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input::placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.text-input:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input {
  /* OL-3343: keep textarea text + placeholder at 16px on desktop too — text-input-base
       shrinks to 14px at md, but the text-field component (.floating-input-field) is a flat 16px. */
}

@media (min-width: 768px) {
  .text-input {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.text-input {
  /* OL-3343: match the text-field component (.floating-input-field) box exactly — 12px radius,
       1px inset border (content-border-dark), 1px inset content-primary on hover, 2px inset
       content-primary on focus (no outer ring). Token vars (--content-*) are always defined in
       figma.css, so no hardcoded hex fallbacks (they'd only go stale). --rounded-radius-12 is
       not a CSS var, so its 12px fallback is load-bearing — keep it. */
  border: none;
  border-radius: var(--rounded-radius-12, 12px);
  box-shadow: 0 0 0 1px inset var(--content-border-dark);
  transition-property: box-shadow, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.text-input:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary);
}

.text-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary);
}

.text-input:disabled,
    .text-input.disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.text-input:disabled:where(.dark, .dark *),
    .text-input.disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}


    .text-input.\!disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}


    .text-input.\!disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

/* Error state: red-500 inset border (mirrors .floating-input-field.field-border-for-error).
       Higher specificity than :hover/:focus so it persists while focused. Used by the over-limit
       character counter (fields--field#updateLengthIndicator) and server validation errors. */

.text-input.field-border-for-error,
    .text-input.field-border-for-error:hover,
    .text-input.field-border-for-error:focus {
  box-shadow: 0 0 0 2px inset #e83b47;
}

.text-input-label {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--content-primary);
}

.text-input-label:where(.dark, .dark *) {
  color: var(--content-tertiary);
}

/* ── Search input ──────────────────────────────────────────────────────────
     Pill-shaped filter field with a leading search icon. Two variants share the
     same interaction (focus → background-base + keyboard focus-ring from base.css);
     they differ only in their resting background/border. Left padding (pl-12)
     leaves room for the absolutely-positioned leading icon.
       .search-input-neutral  — filled (background-base), borderless
       .search-input-outlined — elevated background + 1px border-dark
     ──────────────────────────────────────────────────────────────────────── */

.search-input {
  height: 2.75rem;
  width: 100%;
  border-radius: 9999px;
  padding-left: 3rem;
  padding-right: 2.25rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--content-primary);
  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;
}

.search-input::-moz-placeholder {
  color: var(--content-secondary);
}

.search-input::placeholder {
  color: var(--content-secondary);
}

.search-input:focus {
  background-color: var(--background-base);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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(0px + 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);
}

.search-input-neutral {
  border-width: 0px;
  background-color: var(--background-base);
}

.search-input-outlined {
  /* focus:border keeps our border from turning blue (the @tailwindcss/forms focus default). */
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
}

.search-input-outlined:focus {
  border-color: var(--content-border-neutral);
}

/* "Connected" verified badge — recolors the shared non-flat award badge in place:
     scallop (1st path) → green-600, checkmark (2nd path) → brand-crisp. CSS fill overrides
     the SVG's hardcoded fill attributes, so no separate asset/restart is needed. */

.badge-connected path:first-of-type {
  fill: #4FAA71;
}

.badge-connected path:last-of-type {
  fill: var(--brand-primary-crisp);
}

/* ────────────────────────────────────────────────────────────────────────
     Row divider — drawn as an inset background-image line (not a border) so it
     spans the content width and ignores the row's horizontal cell padding. A
     full-bleed border runs wider than the content; this gradient line matches
     it. Pattern used by modern settings UIs (e.g. Claude). The last row in a
     group draws no line. Apply to each row + the header row of a list. */

.row-divider {
  background-image: linear-gradient(var(--content-border-neutral), var(--content-border-neutral));
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 1px;
  /* mobile: content is flush, so full-width line */
}

.row-divider:last-child {
  background-image: none;
}

@container (min-width: 36rem) {
  /* @xl: cells gain 8px L/R padding, so inset the line 16px to match content. */

  .row-divider {
    background-size: calc(100% - 16px) 1px;
  }
}

.text-input-no-border {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .text-input-no-border {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.text-input-no-border {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.text-input-no-border::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input-no-border::placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input-no-border:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.text-input-no-border:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input-no-border:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input-no-border {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.text-input-no-border, .text-input-no-border:hover, .text-input-no-border:focus, .text-input-no-border:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.text-input-no-border:disabled, .text-input-no-border:disabled:hover, .text-input-no-border:disabled:focus, .text-input-no-border:disabled:focus-within {
  --border-color: #DCD8DA;
}

.text-input-no-border:hover,.text-input-no-border:focus,.text-input-no-border:focus-within {
  --border-color: rgb(11 5 29 / 36%);
}

.text-input-no-border:focus,.text-input-no-border:focus-within {
  --ring-color: rgb(11 5 29 / 16%);
}

.text-input-no-border {
  border-radius: 0.5rem;
  --border-width: 0;
  --border-color: transparent;
}

.text-input-no-border:focus {
  --border-width: 1px;
  z-index: 50;
}

/* allow ring to be on top of any dividers */

.text-input-no-border:disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.text-input-no-border:disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.field-border-for-error,
    .field-border-for-error:hover,
    .field-border-for-error:focus {
  --border-color: #e83b47;
  --ring-color: #fde3e5;
}

[type='checkbox']:checked {
  background-size: 10px 10px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1.875 4.912 1.667 2.276 4.583-4.375"/></svg>');
}

[type='checkbox']:indeterminate {
  background-size: 10px 10px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-width="1.5" d="M1.563 5h6.875"/></svg>');
}

[type='checkbox']:disabled, [type='radio']:disabled {
  background-color: rgb(11 5 29 / .12);
  opacity: 0.5;
}

.large-button-hover {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--grayscale-1);
  /* background: linear-gradient(
      90deg,
      theme(colors.seafoam.100) 0%,
      theme(colors.offWhite / 0%) 110.35%
    );
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06); */
}

.large-button-hover-border-gradient {
  content: '';
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--grayscale-1);
  inset: -1px;
  z-index: 0;
  /* background: linear-gradient(
      105deg,
      theme(colors.seafoam.200 / 0%) 10%,
      white 40%,
      white 50%,
      theme(colors.seafoam.100) 90%
    ); */
}

/*
    Uses a mask to punch out an overlay that has a background gradient set via Tailwind's bg-gradient-to-*
    e.g.: relative z-0 after:border-gradient after:bg-gradient-to-b after:from-white after:to-white/40
  */

.border-gradient {
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  z-index: -1;
  mask: linear-gradient(black, black) content-box,
      linear-gradient(black, black);
  -webkit-mask: linear-gradient(black, black) content-box,
      linear-gradient(black, black);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding: var(--border-gradient-width, 1px);
  /* Thickness of the border */
  box-sizing: border-box;
}

.wavy-border {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="51" height="5" viewBox="0 0 51 5" fill="none"><path d="M33.945 4.94886H33.9929C38.242 4.94886 38.242 0.948863 42.4911 0.948863C46.7402 0.948863 46.7402 4.94886 50.9893 4.94886V0C46.7402 0 4.24911 0 0 0V4.94886C4.24911 4.94886 4.2491 0.948863 8.49821 0.948863C12.7304 0.948863 12.7473 4.91786 16.9466 4.94886H16.9965C21.2456 4.94886 21.2456 0.948863 25.4947 0.948863C27.5534 0.948863 28.6147 1.88786 29.644 2.85586L29.8435 3.04286C30.8649 4.00286 31.9182 4.93486 33.945 4.94886Z" fill="%230B051D" fill-opacity="0.04"/></svg>');
  background-repeat: repeat-x;
  background-size: 51px 5px;
  background-position: center;
}

svg.stroke-width-1\.5 path,
    svg.stroke-width-1\.5 circle,
    svg.stroke-width-1\.5 rect {
  stroke-width: var(--icon-stroke-width, 1.5);
}

svg.stroke-width-2 path,
    svg.stroke-width-2 circle,
    svg.stroke-width-2 rect {
  stroke-width: var(--icon-stroke-width, 2);
}

svg.stroke-width-3 path,
    svg.stroke-width-3 circle,
    svg.stroke-width-3 rect {
  stroke-width: var(--icon-stroke-width, 3);
}

svg.icon-size-10 {
  height: 2.5rem;
  width: 2.5rem;
}

svg.icon-size-8 {
  height: 2rem;
  width: 2rem;
}

svg.icon-size-7 {
  height: 1.75rem;
  width: 1.75rem;
}

svg.icon-size-6 {
  height: 1.5rem;
  width: 1.5rem;
}

svg.icon-size-5 {
  height: 1.25rem;
  width: 1.25rem;
}

svg.icon-size-4 {
  height: 1rem;
  width: 1rem;
}

svg.icon-size-3\.5 {
  height: 0.875rem;
  width: 0.875rem;
}

svg.icon-size-3 {
  height: 0.75rem;
  width: 0.75rem;
}

svg.icon-size-2\.5 {
  height: 0.625rem;
  width: 0.625rem;
}

svg.icon-size-2 {
  height: 0.5rem;
  width: 0.5rem;
}

.rotate-y-0 {
  transform: rotateY(0deg);
}

.rotate-y-90 {
  transform: rotateY(90deg);
}

/* Toast container is a top-layer popover. Strip the UA popover chrome (inset,
     margin, border, padding, background, clipping) so the toast's own utility
     classes drive its fixed top-center positioning. In @layer components so the
     positioning utilities (later layer) still win for top/left/width. */

.toast-popover {
  inset: auto;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* basic link with thin underline that runs smoothly across descenders */

.button-link {
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.button-link:hover {
  text-decoration-line: underline;
}

.button-link {
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.\!button {
  background-color: var(--background-overlay);
  text-align: center;
  font-weight: 600;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.button {
  background-color: var(--background-overlay);
  text-align: center;
  font-weight: 600;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.\!button {
  /* no inner shadow on any buttons! */
}

.button {
  /* no inner shadow on any buttons! */
}

.\!button:hover {
  background-color: var(--bg-fill-secondary-hover) !important;
  transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 0.15s !important;
}

.button:hover {
  background-color: var(--bg-fill-secondary-hover);
  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: 0.15s;
}

/* Base button styles with states (including medium size by default) */

.btn-internal-layout {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.btn-base {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.btn-base:hover {
  text-decoration-line: none;
}

.btn-base:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.btn-base:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

/* Keep pointer-cursor on input[type=submit] hover. The hover background-color
     comes from their button-* class (e.g. .button-primary-dark) — we intentionally
     do NOT dim with opacity, which would fight the class-driven hover. */

input[type='submit']:hover {
  cursor: pointer;
}

/* Button variants */

.button-primary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-primary:hover {
  text-decoration-line: none;
}

.button-primary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-primary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-primary {
  background-color: var(--brand-secondary-moola);
  color: var(--content-primary-inverse);
}

.button-primary:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-brand-hover);
}

.button-primary-dark {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-primary-dark:hover {
  text-decoration-line: none;
}

.button-primary-dark:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-primary-dark:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-primary-dark {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.message .button-primary-dark .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.button-primary-dark:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

/* Inverse of button-primary-dark: a solid white (background-elevated) surface with
     content-primary text, for a primary action sitting on a dark fill (e.g. the
     sentiment-negative "Stripe disconnected" banner). Subtle background-base hover. */

.button-primary-inverse {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-primary-inverse:hover {
  text-decoration-line: none;
}

.button-primary-inverse:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-primary-inverse:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-primary-inverse {
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.button-primary-inverse:hover {
  color: var(--content-primary);
  background-color: var(--background-base);
}

.button-secondary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-secondary:hover {
  text-decoration-line: none;
}

.button-secondary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-secondary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-secondary {
  background-color: var(--background-overlay);
  color: var(--content-primary);
}

.button-secondary:hover {
  color: var(--content-primary);
  background-color: var(--bg-fill-secondary-hover);
}

.button-tertiary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-tertiary:hover {
  text-decoration-line: none;
}

.button-tertiary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-tertiary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-tertiary {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.btn-toggle input[type='checkbox']:checked + .button-tertiary:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-tertiary:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay) !important;
}

.button-tertiary:hover {
  color: var(--content-primary);
}

.button-tertiary:where(.dark, .dark *) {
  background-color: transparent !important;
}

.button-tertiary:hover {
  background-color: var(--background-overlay);
}

.box-footer .button-secondary,
  .box-actions .button-secondary,
  .buttons .button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.box-footer .button-secondary:hover,
  .box-actions .button-secondary:hover,
  .buttons .button:hover {
  text-decoration-line: none;
}

.box-footer .button-secondary:active,
  .box-actions .button-secondary:active,
  .buttons .button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.box-footer .button-secondary:where(.dark, .dark *),
  .box-actions .button-secondary:where(.dark, .dark *),
  .buttons .button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.box-footer .button-secondary,
  .box-actions .button-secondary,
  .buttons .button {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.box-footer .button-secondary:hover,
  .box-actions .button-secondary:hover,
  .buttons .button:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

.buttons .\!button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.buttons .\!button:hover {
  text-decoration-line: none;
}

.buttons .\!button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.buttons .\!button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .\!button {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.buttons .\!button:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

.box-footer .button-secondary,
  .box-actions .button-secondary,
  .buttons .button {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}


  .buttons .\!button {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.box-actions .bulk-actions-selectable-toggle {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.box-actions .bulk-actions-selectable-toggle:hover {
  text-decoration-line: none;
}

.box-actions .bulk-actions-selectable-toggle:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.box-actions .bulk-actions-selectable-toggle:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.box-actions .bulk-actions-selectable-toggle {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.box-actions .bulk-actions-selectable-toggle:hover {
  color: var(--content-primary);
}

.box-actions .bulk-actions-selectable-toggle:where(.dark, .dark *) {
  background-color: transparent !important;
}

.box-actions .bulk-actions-selectable-toggle:hover {
  background-color: var(--background-overlay);
}

.buttons .button-secondary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.buttons .button-secondary:hover {
  text-decoration-line: none;
}

.buttons .button-secondary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.buttons .button-secondary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .button-secondary {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.buttons .button-secondary:hover {
  color: var(--content-primary);
}

.buttons .button-secondary:where(.dark, .dark *) {
  background-color: transparent !important;
}

.buttons .button-secondary:hover {
  background-color: var(--background-overlay);
}

.button-disabled,
  .button[disabled],
  .button-primary[disabled],
  .button-secondary[disabled],
  .button-tertiary[disabled],
  .button-primary-dark[disabled],
  .button-danger[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}


  .\!button[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-disabled:not(.no-disabled-style), .button[disabled]:not(.no-disabled-style), .button-primary[disabled]:not(.no-disabled-style), .button-secondary[disabled]:not(.no-disabled-style), .button-tertiary[disabled]:not(.no-disabled-style), .button-primary-dark[disabled]:not(.no-disabled-style), .button-danger[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
}

 .\!button[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
}

.button-disabled:not(.no-disabled-style), .button[disabled]:not(.no-disabled-style), .button-primary[disabled]:not(.no-disabled-style), .button-secondary[disabled]:not(.no-disabled-style), .button-tertiary[disabled]:not(.no-disabled-style), .button-primary-dark[disabled]:not(.no-disabled-style), .button-danger[disabled]:not(.no-disabled-style) {
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-disabled:not(.no-disabled-style):active, .button[disabled]:not(.no-disabled-style):active, .button-primary[disabled]:not(.no-disabled-style):active, .button-secondary[disabled]:not(.no-disabled-style):active, .button-tertiary[disabled]:not(.no-disabled-style):active, .button-primary-dark[disabled]:not(.no-disabled-style):active, .button-danger[disabled]:not(.no-disabled-style):active {
  --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));
}

 .\!button[disabled]:not(.no-disabled-style) {
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

 .\!button[disabled]:not(.no-disabled-style):active {
  --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));
}

/* Handle nested button-disabled class on child elements */

.button-primary:has(.button-disabled),
  .button-primary-dark:has(.button-disabled),
  .button-secondary:has(.button-disabled),
  .button-tertiary:has(.button-disabled),
  .button-danger:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-disabled):not(.no-disabled-style), .button-primary-dark:has(.button-disabled):not(.no-disabled-style), .button-secondary:has(.button-disabled):not(.no-disabled-style), .button-tertiary:has(.button-disabled):not(.no-disabled-style), .button-danger:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-danger {
  /* Brighter red (--bg-fill-danger-hover, #d62c38) is the default; sentiment-negative is
       the hover state — flipped from the prior default→hover order. */
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-danger:hover {
  text-decoration-line: none;
}

.button-danger:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-danger:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-danger {
  background-color: var(--bg-fill-danger-hover);
  color: var(--brand-primary-crisp);
}

.button-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1));
  color: var(--brand-primary-crisp);
}

.button-icon {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-icon:hover {
  text-decoration-line: none;
}

.button-icon:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-icon:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-icon {
  aspect-ratio: 1 / 1;
  height: 32px;
  width: 32px;
  background-color: var(--background-overlay);
  padding: 0px !important;
  color: var(--content-primary);
  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;
}

.button-icon:hover {
  color: var(--content-primary);
}

.button-icon {
  /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
  border-radius: var(--rounded-full, 99999px) !important;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
  /* The fill is a translucent overlay, so blur whatever scrolls behind it
       (e.g. content sliding under the sticky marketplace toolbar) instead of
       letting it bleed through. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.button-icon:hover {
  background-color: var(--bg-fill-secondary-hover);
}

/* Focus ring is handled by the app-wide focus-visible standard in base.css
     (2px content-primary outline, keyboard-only). No custom :focus ring here —
     a plain :focus box-shadow would also fire on mouse click. */

/* Circle variant */

.button-icon-circle {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-icon-circle:hover {
  text-decoration-line: none;
}

.button-icon-circle:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-icon-circle:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-icon-circle {
  aspect-ratio: 1 / 1;
  height: 32px;
  width: 32px;
  background-color: var(--background-overlay);
  padding: 0px !important;
  color: var(--content-primary);
  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;
}

.button-icon-circle:hover {
  color: var(--content-primary);
}

.button-icon-circle {
  /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
  border-radius: var(--rounded-full, 99999px) !important;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
  /* The fill is a translucent overlay, so blur whatever scrolls behind it
       (e.g. content sliding under the sticky marketplace toolbar) instead of
       letting it bleed through. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.button-icon-circle:hover {
  background-color: var(--bg-fill-secondary-hover);
}

.button-icon-circle.button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon-circle.\!button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon-circle.button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.button-icon-circle.\!button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.button-icon-circle.button-medium {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.625rem !important;
}

.button-icon-circle.button-medium svg {
  height: 18px;
  width: 18px;
  flex-shrink: 0;
}

.button-icon-circle.button-large {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle.button-large svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-icon-circle.button-icon-pagination svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

.button-icon-circle.wizard-button--next {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle.wizard-button--next svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-icon-circle.wizard-button--previous {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle.wizard-button--previous svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-icon-circle.button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon-circle.\!button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon-circle {
  aspect-ratio: 1 / 1;
  border-radius: 9999px !important;
}

/* Primary dark circle variant */

.button-icon-circle-primary-dark {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-icon-circle-primary-dark:hover {
  text-decoration-line: none;
}

.button-icon-circle-primary-dark:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-icon-circle-primary-dark:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-icon-circle-primary-dark {
  aspect-ratio: 1 / 1;
  height: 32px;
  width: 32px;
  background-color: var(--background-overlay);
  padding: 0px !important;
  color: var(--content-primary);
  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;
}

.button-icon-circle-primary-dark:hover {
  color: var(--content-primary);
}

.button-icon-circle-primary-dark {
  /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
  border-radius: var(--rounded-full, 99999px) !important;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
  /* The fill is a translucent overlay, so blur whatever scrolls behind it
       (e.g. content sliding under the sticky marketplace toolbar) instead of
       letting it bleed through. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.button-icon-circle-primary-dark:hover {
  background-color: var(--bg-fill-secondary-hover);
}

.button-icon-circle-primary-dark.button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon-circle-primary-dark.\!button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon-circle-primary-dark.button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.button-icon-circle-primary-dark.\!button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.button-icon-circle-primary-dark.button-medium {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.625rem !important;
}

.button-icon-circle-primary-dark.button-medium svg {
  height: 18px;
  width: 18px;
  flex-shrink: 0;
}

.button-icon-circle-primary-dark.button-large {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle-primary-dark.button-large svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-icon-circle-primary-dark.button-icon-pagination svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

.button-icon-circle-primary-dark.wizard-button--next {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle-primary-dark.wizard-button--next svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-icon-circle-primary-dark.wizard-button--previous {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle-primary-dark.wizard-button--previous svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-icon-circle-primary-dark.button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon-circle-primary-dark.\!button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon-circle-primary-dark {
  aspect-ratio: 1 / 1;
  border-radius: 9999px !important;
}

.button-icon-circle-primary-dark {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.message .button-icon-circle-primary-dark .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.button-icon-circle-primary-dark:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--brand-primary-brew) !important;
}

/* Inverse variant: for controls sitting over a dark / media background (image,
     video, dark fill). "Inverse" flips the base theme to light colors so the
     control reads on dark surfaces — translucent white at rest, brighter on
     hover, white icon. Reusable wherever a component needs an on-dark variant. */

.button-icon-inverse {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.button-icon-inverse:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.button-icon-inverse {
  background-color: rgba(255, 255, 255, 0.08);
}

.button-icon-inverse:hover,
    .button-icon-inverse:active {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

/* Icon button size variants (box size is border-box, so it includes padding).
     sm: 32px box /  8px padding / 16px icon
     md: 40px box / 10px padding / 18px icon  (was 20 — aligned to the universal
                                               size→icon scale: lg 20, md 18, sm 16)
     lg: 44px box / 12px padding / 20px icon
     shrink-0 keeps the icon at its exact size: the svg is a flex item, so when a
     variant adds a border (e.g. .button-icon-elevated) the content box loses 2px
     and the icon would otherwise shrink on the main axis (e.g. 20→18px wide). */

.button-icon.button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon.\!button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon.button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.button-icon.\!button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.button-icon.button-medium {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.625rem !important;
}

.button-icon.button-medium svg {
  height: 18px;
  width: 18px;
  flex-shrink: 0;
}

.button-icon.button-large {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon.button-large svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

/* Pagination-arrow chevrons sit at 12px — smaller than the default 16px sm
     icon-button glyph. Scoped to this modifier (and placed AFTER the size
     variants so it wins the cascade at equal specificity) so a plain
     .button-icon.button-small stays 16px. */

.button-icon.button-icon-pagination svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

/* Header-toolbar icon buttons step up to md (40px box / 10px padding / 20px icon) on
     mobile for a comfortable touch target, reverting to their authored size on desktop.
     Add `.page-header-toolbar` to the page's header bar; every icon button inside steps up.
     Mirrors the `.button-medium` icon spec; scoped to <lg so desktop is untouched. The
     !important + descendant selector overrides any per-button size variant (e.g. a header
     control authored as `.button-small`) on mobile only. */

@media (max-width: 1023px) {
  .page-header-toolbar .button-icon,
    .page-header-toolbar .button-icon-circle,
    .page-header-toolbar .button-icon-circle-primary-dark {
    height: 2.5rem !important;
    width: 2.5rem !important;
    padding: 0.625rem !important;
  }

  .page-header-toolbar .button-icon svg,
    .page-header-toolbar .button-icon-circle svg,
    .page-header-toolbar .button-icon-circle-primary-dark svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

/* Icon button background variants. Two supported styles:
       • prominent (default `.button-icon`): background-overlay at rest — used in
         navbars / wherever the control should feel present.
       • ghost (`.button-icon-ghost`): transparent at rest; fills with
         background-overlay on hover (desktop) and on :active (mobile tap-and-hold,
         where there is no hover). This is the standard for close/menu triggers. */

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-icon-ghost, .btn-toggle input[type='radio']:checked + button.button-secondary.button-icon-ghost {
  background-color: var(--background-overlay) !important;
}

.button-icon-ghost {
  background-color: transparent !important;
}

.button-icon-ghost:hover,
    .button-icon-ghost:active {
  background-color: var(--background-overlay) !important;
}

/* Elevated variant: a raised white surface — hairline border + soft shadow
     (shadows/sm). More prominent than the default neutral overlay; the standard
     for floating pagination / carousel arrows. Hover lifts slightly; disabled
     collapses to a flat neutral chip (overlay fill, no border/shadow, muted
     icon) — the carousel/horizontal-scroll controllers toggle `disabled`. */

.button-icon-elevated {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  color: var(--content-primary);
}

.button-icon-elevated:hover {
  color: var(--content-primary);
}

.button-icon-elevated {
  background: var(--background-elevated, #ffffff);
  --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Large elevated icon buttons (carousel arrows / floating media controls)
       rest at shadow-sm (matching small/medium) and lift to shadow-md on hover —
       the hover bump signals "press me" without making the control compete with
       imagery in its idle state. */

.button-icon-elevated.button-large:hover:not(:disabled) {
  --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
}

/* The button surface only shifts its fill on hover — it does NOT scale. The
       icon is what lifts, so give the svg a transition for a smooth scale. */

.button-icon-elevated svg {
  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;
}

.button-icon-elevated:hover,
    .button-icon-elevated:active {
  background-color: var(--background-base) !important;
}

.button-icon-elevated:hover:not(:disabled) svg,
    .button-icon-elevated:active:not(:disabled) svg {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.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));
}

.button-icon-elevated:disabled,
    .button-icon-elevated[disabled] {
  cursor: not-allowed;
  border-color: transparent;
  color: var(--content-tertiary);
  background: var(--background-overlay, rgba(104, 67, 0, 0.08)) !important;
  box-shadow: none;
}

/* Size variants - medium is the default.
     Each size sets a DEFAULT glyph size for leading/trailing svgs that matches
     the button height: lg 20px / md 18px / sm 16px (mirrors the .button-icon
     scale so a text and an icon-only button at the same size get the same
     glyph). These are plain defaults — NOT `!important` — so a template that
     genuinely needs a different glyph can still pass an explicit icon class and
     it wins. Buttons that pass no icon class get the right size for free. */

.button-large {
  height: 3rem;
  border-radius: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.button-large svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-medium {
  height: 2.5rem;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.button-medium svg {
  height: 18px;
  width: 18px;
  flex-shrink: 0;
}

.\!button-small {
  height: 2rem;
  border-radius: 0.5625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.button-small {
  height: 2rem;
  border-radius: 0.5625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.\!button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.button-circular {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-circular:hover {
  text-decoration-line: none;
}

.button-circular:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-circular:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-circular {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0px !important;
}

.button-integration {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.button-integration:hover {
  text-decoration-line: none;
}

.button-integration:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.button-integration:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-integration {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.btn-toggle input[type='checkbox']:checked + .button-integration:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-integration:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay) !important;
}

.button-integration:hover {
  color: var(--content-primary);
}

.button-integration:where(.dark, .dark *) {
  background-color: transparent !important;
}

.button-integration:hover {
  background-color: var(--background-overlay);
}

.button-integration[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-integration[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-integration[disabled]:not(.no-disabled-style):active {
  --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));
}

.button-integration:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-integration:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-integration {
  z-index: 0;
  width: 100%;
  border-radius: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Wizard buttons for offers and profile wizards. BEM style */

.wizard-button {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.wizard-button--large {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.5rem;
  color: var(--interactive-control);
}


    .button-link.wizard-button--next {
  padding: 0;
  border-radius: 2px;
}

.wizard-button--next {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.wizard-button--next:hover {
  text-decoration-line: none;
}

.wizard-button--next:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.wizard-button--next:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.wizard-button--next {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.message .wizard-button--next .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.wizard-button--next:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

.wizard-button--next[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--next[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--next[disabled]:not(.no-disabled-style):active {
  --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));
}

.wizard-button--next:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--next:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-icon.wizard-button--next {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon.wizard-button--next svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-icon-elevated.wizard-button--next:hover:not(:disabled) {
  --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
}

.wizard-button--next {
  height: 3rem;
  border-radius: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.wizard-button--next svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}


    .button-link.wizard-button--previous {
  padding: 0;
  border-radius: 2px;
}

.btn-toggle input[type='checkbox']:checked + button.wizard-button--previous.bg-transparent, .btn-toggle input[type='radio']:checked + button.wizard-button--previous.bg-transparent {
  background-color: var(--background-overlay);
}

.btn-toggle input[type='checkbox']:checked + button.wizard-button--previous span span, .btn-toggle input[type='radio']:checked + button.wizard-button--previous span span {
  color: var(--content-primary);
}

.wizard-button--previous {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.wizard-button--previous:hover {
  text-decoration-line: none;
}

.wizard-button--previous:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.wizard-button--previous:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.wizard-button--previous {
  background-color: var(--background-overlay);
  color: var(--content-primary);
}

.wizard-button--previous:hover {
  color: var(--content-primary);
  background-color: var(--bg-fill-secondary-hover);
}

.box-footer .wizard-button--previous,
  .box-actions .wizard-button--previous {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.box-footer .wizard-button--previous:hover,
  .box-actions .wizard-button--previous:hover {
  text-decoration-line: none;
}

.box-footer .wizard-button--previous:active,
  .box-actions .wizard-button--previous:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.box-footer .wizard-button--previous:where(.dark, .dark *),
  .box-actions .wizard-button--previous:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.box-footer .wizard-button--previous,
  .box-actions .wizard-button--previous {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.box-footer .wizard-button--previous:hover,
  .box-actions .wizard-button--previous:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

.box-footer .wizard-button--previous,
  .box-actions .wizard-button--previous {
  @extend .button-primary-dark;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.buttons .wizard-button--previous {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.buttons .wizard-button--previous:hover {
  text-decoration-line: none;
}

.buttons .wizard-button--previous:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.buttons .wizard-button--previous:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .wizard-button--previous {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.buttons .wizard-button--previous:hover {
  color: var(--content-primary);
}

.buttons .wizard-button--previous:where(.dark, .dark *) {
  background-color: transparent !important;
}

.buttons .wizard-button--previous:hover {
  background-color: var(--background-overlay);
}

.wizard-button--previous[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--previous[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--previous[disabled]:not(.no-disabled-style):active {
  --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));
}

.wizard-button--previous:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--previous:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-icon.wizard-button--previous {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon.wizard-button--previous svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.button-icon-elevated.wizard-button--previous:hover:not(:disabled) {
  --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
}

.wizard-button--previous {
  height: 3rem;
  border-radius: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.wizard-button--previous svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.wizard-button--previous {
  border-style: none;
  background-color: var(--background-overlay);
}

.wizard-button--skip {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.5rem;
  color: var(--interactive-control);
  color: var(--content-secondary);
  text-decoration-color: var(--content-secondary);
}

.wizard-button--skip:hover {
  color: var(--content-secondary);
  text-decoration-line: underline;
}

.wizard-button--save-and-exit {
  cursor: pointer;
}

.wizard-button--save-and-exit:hover {
  text-decoration-line: none;
}

.wizard-button--save-and-exit {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.wizard-button--save-and-exit:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.wizard-button--save-and-exit {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.wizard-button--save-and-exit:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.wizard-button--save-and-exit:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.wizard-button--save-and-exit {
  /* set a default "press down" effect for small buttons */
}

.wizard-button--save-and-exit:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.wizard-button--save-and-exit svg {
  display: inline-block;
}

.wizard-button--save-and-exit {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.wizard-button--save-and-exit:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit:disabled:not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit:disabled:active:not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.wizard-button--save-and-exit {
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-base);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
  --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);
}

.floating-input-field.wizard-button--save-and-exit,
.floating-input-field.wizard-button--save-and-exit:focus,
.floating-input-field.wizard-button--save-and-exit:hover,
.floating-input-field.wizard-button--save-and-exit:active {
  box-shadow: none;
}

.wizard-button--save-and-exit:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.wizard-button--save-and-exit {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  letter-spacing: 0em;
  color: var(--content-primary);
}

.wizard-button--save-and-exit:hover {
  background-color: var(--background-elevated);
}

.wizard-button--save-and-exit:active {
  background-color: var(--background-elevated);
}

/* CSS-based loader to replace Lottie spinner */

.ol-loader {
  width: 20px;
  height: 20px;
  aspect-ratio: 2;
  --_gradient: no-repeat
      radial-gradient(circle closest-side, currentColor 80%, transparent);
  background:
      var(--_gradient) 0% 50%,
      var(--_gradient) 50% 50%,
      var(--_gradient) 100% 50%;
  background-size: calc(100%/3 - 2px) 50%;
  animation: l3 1s infinite linear;
  flex-shrink: 0;
}

@keyframes l3 {
  20% {
    background-position: 0% 0%,   50% 50%, 100% 50%;
  }

  40% {
    background-position: 0% 100%, 50% 0%,  100% 50%;
  }

  60% {
    background-position: 0% 50%,  50% 100%,100% 0%;
  }

  80% {
    background-position: 0% 50%,  50% 50%, 100% 100%;
  }
}

/* ── Chip family ───────────────────────────────────────────────────────────
     `.chip` is the visual primitive (a pill). Behavioral variants layer on top:
       • filter  — multi-select toggle            (future)
       • action  — navigates / triggers an action (future)
       • choice  — single-select within a group   (.chip-choice — tab/segmented)

     Interaction (per design): hover fills with background-overlay, active presses
     to scale .98, and keyboard focus uses the app-wide focus-visible outline
     defined in base.css (a:focus-visible) — no per-component ring needed.
     ──────────────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  height: 2rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.5;
  color: var(--content-primary);
  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;
}

.chip:hover {
  background-color: var(--background-overlay);
}

.chip:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

/* Size variants. The base `.chip` is `sm` (32px) for back-compat; `.chip-md`
     upgrades to 40px. Horizontal padding tracks the Figma chip spec (sm 14px,
     md 10px). Any chip style (choice, glassy, …) can be rendered at either size. */

.chip-sm {
  height: 2rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.chip-md {
  height: 2.5rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

/* Glassy chip — the surface (fill, blur, shadow, hover) comes from the reusable
     `.glassy-effect[-active]` utility (see glassy.css). Here we drop the chip's
     solid border, set the semibold label, ensure a smooth `transition`, and use a
     gentler press scale (0.99) than the base chip's 0.98. */

.chip-glassy {
  border-color: transparent;
  font-weight: 600;
  line-height: 1rem;
  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;
}

.chip-glassy:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

/* Secondary meta inside a chip (e.g. a count) — sits 4px after the label. */

.chip-count {
  color: var(--content-secondary);
}

/* Choice chip — single-select group member (tab / segmented behavior).
     Selected = filled background-overlay, borderless (border kept transparent so
     the box doesn't shift size between states). */

.chip-choice[aria-selected="true"] {
  border-color: transparent;
  background-color: var(--background-overlay);
}

/* ── Glassy surface ──────────────────────────────────────────────────────────
     A reusable "frosted glass" treatment: a translucent fill over a backdrop blur,
     plus layered shadows that read as a raised glass tile. Apply `.glassy-effect`
     to any pill/card/button surface; pair with `.glassy-effect-active` for the
     pressed/selected state (see the marketplace category chips).

     Values mirror the Figma spec (OL Collab Builder, node 5158:14612):
       background-screen = rgba(255,255,255,0.8)   background-base = #f7f5f0
     ──────────────────────────────────────────────────────────────────────── */

.glassy-effect {
  background-color: var(--background-screen, rgba(255, 255, 255, 0.8));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.02) 100%);
  backdrop-filter: blur(10px);
  box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      0 0 1px 0 rgba(0, 0, 0, 0.12),
      0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

/* On hover the glass warms to the `--background-base` fill. (Also overrides the
     host component's own hover background — e.g. `.chip`'s — so the glass stays
     in control of its surface.) */

.glassy-effect:hover {
  background-color: var(--background-base, #f7f5f0);
}

/* Pressed / selected glass — warm fill, no outer drop shadow, deep inset shadow.
     The opaque `--background-base` fill covers any host hover background, so no
     hover override is needed here. */

.glassy-effect-active {
  background-color: var(--background-base, #f7f5f0);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 39.77%, rgba(0, 0, 0, 0.04) 100%);
  border-color: transparent;
  backdrop-filter: blur(10px);
  box-shadow:
      inset 0 2px 2px 0 rgba(52, 46, 38, 0.04),
      inset -2px -2px 2px 0 rgba(255, 255, 255, 0.65),
      inset 0 2px 32px 0 rgba(0, 0, 0, 0.08),
      inset 1px 2px 2px 0 rgba(0, 0, 0, 0.04),
      inset 0 2px 1px 0 rgba(0, 0, 0, 0.04),
      inset 2px -4px 20px 0 rgba(0, 0, 0, 0.1),
      0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

/* ── Scrim ───────────────────────────────────────────────────────────────────
     A reusable gradient veil: solid at one edge, easing to transparent at the
     other. Use it anywhere you want content to dissolve into a surface rather than
     cut off at a hard line — sticky headers/nav bars, sticky footers/toolbars, or
     a contrast wash behind text overlaid on an image or video.

     Why the long stop list: a plain 2-stop `linear-gradient(white, transparent)`
     ramps alpha *linearly*, which the eye reads as a hard band partway down. So we
     ease it the way postcss-easing-gradients does
     (https://github.com/larsenwork/postcss-easing-gradients): hold solid to 40%,
     then sample an ease-in-out (smoothstep) curve across the tail as many
     intermediate stops. The alpha eases in and back out symmetrically, so there's
     no visible edge — just a soft dissolve.

     Customise via two CSS variables:
       --scrim-rgb    color channels (default white). Set `0 0 0` for a dark scrim
                      over media — see `.scrim-dark`.
       --scrim-angle  gradient direction (default `to bottom`). The solid edge is
                      the gradient's start, so `to bottom` = solid top, fading down
                      (a sticky header); `to top` = solid bottom (a sticky footer).
                      Use the `.scrim-to-*` modifiers below.
     ──────────────────────────────────────────────────────────────────────────── */

.scrim {
  --scrim-rgb: 255 255 255;
  --scrim-angle: to bottom;
  background-image: linear-gradient(
      var(--scrim-angle),
      rgb(var(--scrim-rgb) / 1) 0%,
      rgb(var(--scrim-rgb) / 1) 40%,
      rgb(var(--scrim-rgb) / 0.987) 44.8%,
      rgb(var(--scrim-rgb) / 0.951) 49.4%,
      rgb(var(--scrim-rgb) / 0.896) 53.6%,
      rgb(var(--scrim-rgb) / 0.825) 57.4%,
      rgb(var(--scrim-rgb) / 0.741) 61.2%,
      rgb(var(--scrim-rgb) / 0.648) 64.7%,
      rgb(var(--scrim-rgb) / 0.55) 68.3%,
      rgb(var(--scrim-rgb) / 0.45) 71.8%,
      rgb(var(--scrim-rgb) / 0.352) 75.3%,
      rgb(var(--scrim-rgb) / 0.259) 78.9%,
      rgb(var(--scrim-rgb) / 0.175) 82.6%,
      rgb(var(--scrim-rgb) / 0.104) 86.6%,
      rgb(var(--scrim-rgb) / 0.049) 90.8%,
      rgb(var(--scrim-rgb) / 0.013) 95.2%,
      rgb(var(--scrim-rgb) / 0) 100%
    );
}

/* Direction — mirrors Tailwind's `bg-gradient-to-*`: the scrim is solid at the
     start and fades toward the named edge. `to-b` (solid top → sticky header) is
     the default; `to-t` flips it for a sticky footer. */

.scrim-to-b {
  --scrim-angle: to bottom;
}

.scrim-to-t {
  --scrim-angle: to top;
}

.scrim-to-r {
  --scrim-angle: to right;
}

.scrim-to-l {
  --scrim-angle: to left;
}

/* Dark scrim — for light text/controls overlaid on imagery or video. */

.scrim-dark {
  --scrim-rgb: 0 0 0;
}

.button-loader {
  position: relative;
  padding-right: 48px;
  text-indent: -999999px;
  min-width: 112px;
}

.button-loader::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 32px 0 #fff, -32px 0 #fff;
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  animation: flash 0.5s ease-out infinite alternate;
}

.bulk-action-unavailable {
  display: none !important;
}

.bulk-actions-selectable-item-checkbox-wrapper {
  display: none;
}

.bulk-actions .bulk-actions-checkbox-cell {
  width: 1rem;
  padding-right: 0px;
}

.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle {
  display: none;
}

.bulk-actions:not(.selectable) td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2) {
  padding-left: 1.25rem;
}

.bulk-actions:not(.selectable) .box-table td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2) {
  padding-left: 2rem;
}

.bulk-actions.selectable-available:not(.selectable) .bulk-action {
  display: none;
}

.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell {
  display: none;
}

.bulk-actions.selectable .bulk-action-single {
  display: none;
}

.rounded-dialog {
  border-radius: 1.75rem;
}

@media (min-width: 1024px) {
  .rounded-dialog {
    border-radius: 2rem;
  }
}

/* match the rounded-dialog */

.rounded-dialog-button {
  border-radius: 0.625rem;
}

@media not all and (min-width: 1024px) {
  .rounded-dialog-button {
    border-radius: 0.75rem;
  }
}

.dialog-button {
  border-radius: 0.625rem;
}

@media not all and (min-width: 1024px) {
  .dialog-button {
    border-radius: 0.75rem;
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button.button-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button.button-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .dialog-button.button-icon-elevated:hover:not(:disabled) {
    --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
    --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button.button-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .dialog-button.button-icon-elevated:hover:not(:disabled) {
    --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
    --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
  }

  .dialog-button {
    height: 3rem;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button.button-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .dialog-button.button-icon-elevated:hover:not(:disabled) {
    --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
    --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
  }

  .dialog-button {
    height: 3rem;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .dialog-button svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }
}

.dialog-bottom-sheet {
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: auto;
  margin-bottom: 0px !important;
  width: 100%;
  max-width: 100% !important;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.dialog-full-sheet {
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: auto;
  margin-bottom: 0px !important;
  width: 100%;
  max-width: 100% !important;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  height: calc(100dvh - 8px);
  max-height: none;
}

.date-input .single-daterange {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .date-input .single-daterange {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.date-input .single-daterange {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.date-input .single-daterange::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.date-input .single-daterange::placeholder {
  color: rgb(11 5 29 / .32);
}

.date-input .single-daterange:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.date-input .single-daterange:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.date-input .single-daterange:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.date-input .single-daterange {
  /* OL-3343: keep textarea text + placeholder at 16px on desktop too — text-input-base
       shrinks to 14px at md, but the text-field component (.floating-input-field) is a flat 16px. */
}

@media (min-width: 768px) {
  .date-input .single-daterange {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.date-input .single-daterange {
  /* OL-3343: match the text-field component (.floating-input-field) box exactly — 12px radius,
       1px inset border (content-border-dark), 1px inset content-primary on hover, 2px inset
       content-primary on focus (no outer ring). Token vars (--content-*) are always defined in
       figma.css, so no hardcoded hex fallbacks (they'd only go stale). --rounded-radius-12 is
       not a CSS var, so its 12px fallback is load-bearing — keep it. */
  border: none;
  border-radius: var(--rounded-radius-12, 12px);
  box-shadow: 0 0 0 1px inset var(--content-border-dark);
  transition-property: box-shadow, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.date-input .single-daterange:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary);
}

.date-input .single-daterange:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary);
}

.date-input .single-daterange:disabled,.date-input .single-daterange.disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.date-input .single-daterange:disabled:where(.dark, .dark *),.date-input .single-daterange.disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.date-input .single-daterange:disabled,.date-input .single-daterange.disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.date-input .single-daterange:disabled:where(.dark, .dark *),.date-input .single-daterange.disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.date-input .single-daterange.field-border-for-error,.date-input .single-daterange.field-border-for-error:hover,.date-input .single-daterange.field-border-for-error:focus {
  box-shadow: 0 0 0 2px inset #e83b47;
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  border-radius: 0.5rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  border-style: none !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect, .daterangepicker .hourselect:hover, .daterangepicker .minuteselect:hover, .daterangepicker .ampmselect:hover, .daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus, .daterangepicker .hourselect:focus-within, .daterangepicker .minuteselect:focus-within, .daterangepicker .ampmselect:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.daterangepicker .hourselect:disabled, .daterangepicker .minuteselect:disabled, .daterangepicker .ampmselect:disabled, .daterangepicker .hourselect:disabled:hover, .daterangepicker .minuteselect:disabled:hover, .daterangepicker .ampmselect:disabled:hover, .daterangepicker .hourselect:disabled:focus, .daterangepicker .minuteselect:disabled:focus, .daterangepicker .ampmselect:disabled:focus, .daterangepicker .hourselect:disabled:focus-within, .daterangepicker .minuteselect:disabled:focus-within, .daterangepicker .ampmselect:disabled:focus-within {
  --border-color: #DCD8DA;
}

.daterangepicker .hourselect:hover, .daterangepicker .minuteselect:hover, .daterangepicker .ampmselect:hover, .daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus, .daterangepicker .hourselect:focus-within, .daterangepicker .minuteselect:focus-within, .daterangepicker .ampmselect:focus-within {
  --border-color: rgb(11 5 29 / 36%);
}

.daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus, .daterangepicker .hourselect:focus-within, .daterangepicker .minuteselect:focus-within, .daterangepicker .ampmselect:focus-within {
  --ring-color: rgb(11 5 29 / 16%);
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  --ring-width: 3px;
  -moz-text-align-last: center;
       text-align-last: center;
}

.daterangepicker .calendar-table .active {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(33 168 117 / var(--tw-bg-opacity, 1)) !important;
}

.daterangepicker .calendar-table .\!active {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(33 168 117 / var(--tw-bg-opacity, 1)) !important;
}

.select2-container {
  width: 100%;
}

.select2-border {
  outline: 0 !important;
  --border-color: rgb(11 5 29 / 36%) !important;
  --ring-color: rgb(11 5 29 / 16%) !important;
  border-style: none !important;
}

.no-edges .select2-border {
  border-style: none !important;
  border-radius: 0.5rem !important;
}

.select2-selection--single {
  height: auto;
}

.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  line-height: inherit;
  min-height: 2.5rem;
}

@media (min-width: 768px) {
  .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    min-height: 2.25rem;
  }
}

.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  /* py-2, text-base md:text-sm => line-height: 1.5rem md:1.25rem */
}

.select2-selection--single,
  .select2-selection--multiple {
  border-radius: 0.5rem !important;
  padding-top: 0px !important;
}

.no-edges .select2-selection--single, .no-edges .select2-selection--multiple {
  --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);
}

.floating-input-field.no-edges .select2-selection--single,
.floating-input-field.no-edges .select2-selection--single:focus,
.floating-input-field.no-edges .select2-selection--single:hover,
.floating-input-field.no-edges .select2-selection--single:active,.floating-input-field .no-edges .select2-selection--multiple,
.floating-input-field .no-edges .select2-selection--multiple:focus,
.floating-input-field .no-edges .select2-selection--multiple:hover,
.floating-input-field .no-edges .select2-selection--multiple:active {
  box-shadow: none;
}

.no-edges .select2-selection--single, .no-edges .select2-selection--multiple {
  border-radius: inherit !important;
}

.select2-selection--single.focus-visible, .select2-selection--multiple.focus-visible {
  outline: 0 !important;
  --border-color: rgb(11 5 29 / 36%) !important;
  --ring-color: rgb(11 5 29 / 16%) !important;
  border-style: none !important;
}

.select2-selection--single:focus, .select2-selection--multiple:focus {
  outline: 0 !important;
}

.select2-selection--single .select2-selection__rendered, .select2-selection--multiple .select2-selection__rendered {
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
}

/* Floating label support for super_select */

.floating-input .select2-container .select2-selection--single,
    .floating-input .select2-container .select2-selection--multiple {
  border-radius: 0.75rem !important;
  box-shadow: 0 0 0 1px inset
        var(--content-border-dark, rgba(52, 46, 38, 0.12));
  border: none;
  background: var(--content-background-elevated, #fff);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.floating-input .select2-container .select2-selection--single:hover:not(:focus), .floating-input .select2-container .select2-selection--multiple:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

.floating-input .select2-container .select2-selection--single .select2-selection__rendered, .floating-input .select2-container .select2-selection--multiple .select2-selection__rendered {
  padding-top: 22px !important;
  /* Space for floating label: 8px (top) + 12px (font-size) + 12px (spacing) */
  padding-bottom: 8px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.floating-input .select2-container.select2-container--focus .select2-selection--single,
      .floating-input .select2-container.select2-container--focus .select2-selection--multiple,
      .floating-input .select2-container.select2-container--open .select2-selection--single,
      .floating-input .select2-container.select2-container--open .select2-selection--multiple {
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
  outline: none;
}

/* Multiple selects need extra height for tags */

.floating-input .select2-container .select2-selection--multiple .select2-selection__rendered {
  min-height: 48px !important;
}

.select2-selection--single .select2-selection__rendered {
  padding-left: 0.875rem !important;
  padding-right: 2rem !important;
}

.select2-selection--multiple .select2-selection__rendered {
  padding-left: 0.875rem !important;
  padding-right: 0.25rem !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.5rem !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
  width: 30px;
  bottom: 0px;
  top: 0px;
  right: 0px;
  height: auto;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow b {
  display: block;
  position: absolute;
  top: 50%;
  left: auto;
  right: 0.875rem;
  transform: translateY(-50%);
  border: none;
  width: 20px;
  height: 20px;
  /* Chevron arrow - larger size (20px) with primary color (#342e26 = --content-primary), stroke-2 to match our icon stroke override */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23342e26' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0;
}

.select2-container--default
    .select2-selection--multiple
    ul.select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 0.25rem;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
  position: relative;
  border: none;
  font-size: inherit;
  float: none;
  padding-right: 0.375rem;
  line-height: 24px;
}

@media (min-width: 768px) {
  .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    line-height: 20px;
  }
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
  /* adjusts the height */
  margin-top: 0.25rem;
  margin-right: 0.25rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  border-radius: 0.25rem;
  background-color: var(--background-neutral) !important;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  font-weight: 600;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice .select2-selection__choice__remove {
  margin-left: 0.5rem;
  font-size: 26px;
  font-weight: normal;
}

.select2-container--open .select2-selection--single,
    .select2-container--open .select2-selection--multiple,
    .select2-container--focus:not(.select2-container--disabled) .select2-selection--single,
    .select2-container--focus:not(.select2-container--disabled) .select2-selection--multiple {
  outline: 0 !important;
  --border-color: rgb(11 5 29 / 36%) !important;
  --ring-color: rgb(11 5 29 / 16%) !important;
  border-style: none !important;
}

.no-edges .select2-container--open .select2-selection--single,
      .no-edges .select2-container--open .select2-selection--multiple,
      .no-edges .select2-container--focus .select2-selection--single,
      .no-edges .select2-container--focus .select2-selection--multiple {
  border: none !important;
  border-radius: 0.5rem !important;
}

.select2-container--disabled .select2-selection--single,
    .select2-container--disabled .select2-selection--multiple {
  background-color: rgb(11 5 29 / .04) !important;
  color: rgb(11 5 29 / .32) !important;
}

.select2-container--disabled .select2-selection--single:where(.dark, .dark *),
    .select2-container--disabled .select2-selection--multiple:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04) !important;
  color: rgb(248 245 244 / .32) !important;
}

.select2-container--disabled .select2-selection--single,
    .select2-container--disabled .select2-selection--multiple,
    .select2-container--disabled .select2-selection--single:hover,
    .select2-container--disabled .select2-selection--multiple:hover,
    .select2-container--disabled .select2-selection--single:focus,
    .select2-container--disabled .select2-selection--multiple:focus {
  --border-color: #DCD8DA;
}

/* Desktop dropdown panel matches the redesigned Popover/menu component (OL-3319):
     white surface, 12px radius, 1px border-neutral, shadow-modal, 6px inset. The
     bottom inset is dropped (padding: 6px 6px 0) so the scrolling list reaches the
     panel's bottom edge instead of being clipped inside a bottom padding band.
     (Mobile bottom-sheet overrides border/radius/shadow + keeps a 2px inset under
     .use-modal-on-mobile below, so these are desktop-only.) */

.select2-container .select2-dropdown {
  overflow: hidden !important;
  --tw-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12) !important;
  --tw-shadow-colored: 0px 4px 24px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  padding: 6px 6px 0;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  width: auto !important;
  min-width: 100%;
}

.select2-container .select2-results {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.select2-container .select2-results > .select2-results__options {
  max-height: none !important;
  width: auto !important;
}

.select2-container .select2-results__option {
  white-space: normal;
  word-break: break-word;
}

.select2-container .select2-results__option .super-select--option-row {
  width: 100%;
}

.select2-container .select2-results__option .super-select--option-label {
  width: 100%;
}

.select2-container .select2-results__option .super-select--option-text {
  width: 100%;
}

.select2-container .select2-dropdown > div:last-child {
  flex-shrink: 0;
}

.hide-prompt .select2-dropdown::after {
  display: none !important;
}

.hide-dropdown .select2-dropdown {
  display: none !important;
}

.hide-preview {
  position: relative;
}

.hide-preview select {
  display: none;
}

.hide-preview .select2-container:has(.select2-selection) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.hide-preview .select2-container--default .select2-results > .select2-results__options {
  max-height: inherit !important;
}

.custom-width .select2-container.select2-container--open .select2-dropdown {
  width: var(--dropdown-width, 10rem) !important;
  min-width: var(--dropdown-min-width, none);
  max-width: var(--dropdown-max-width, none);
  max-height: var(--dropdown-max-height, 200px);
}

.hide-blank-option
    .select2-results__option:has(.super-select--option-row-blank) {
  display: none;
}

.select2-dropdown.select2-dropdown--above {
  --tw-translate-y: -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));
}

.select2-dropdown.select2-dropdown--below {
  --tw-translate-y: 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));
}

.select2-container--default .select2-results__option {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  padding: 2px;
}

.select2-container--default
    .select2-results__option
    .super-select--option-row {
  /* Popover menu-row metrics (OL-3319): 10px/6px padding, 10px radius. */
  padding: 6px 10px;
  border-radius: 0.625rem;
}

@media not all and (min-width: 768px) {
  .select2-container--default
    .select2-results__option
    .super-select--option-row {
    border-radius: 0.75rem;
  }
}

.super-select--single
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-row {
  position: relative;
}

.super-select--single
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-row:after {
  content: '';
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="%230B051D" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m3 7.86 2.667 3.64L13 4.5"/></svg>');
}

.super-select--single
    .select2-container--default
    .select2-results__option
    .super-select--option-row {
  padding-right: 40px;
}

.super-select--single
    .select2-container--default
    .select2-results__option
    .super-select--option-row:after {
  right: 15px;
}

.super-select--single.checkmark-left
    .select2-container--default
    .select2-results__option
    .super-select--option-row {
  padding-left: 40px;
  padding-right: 10px;
}

.super-select--single.checkmark-left
    .select2-container--default
    .select2-results__option
    .super-select--option-row:after {
  left: 15px;
  right: auto;
}

.super-select--single
    .select2-container--default
    .select2-results__option
    .super-select--option-row .super-select--option-checkbox {
  display: none !important;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row {
  padding-left: 40px;
  position: relative;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row
    .super-select--option-checkbox {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row
    .super-select--option-checkbox > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row
    .super-select--option-checkbox.super-select--option-checkbox-not-selected {
  display: block;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row
    .super-select--option-checkbox.super-select--option-checkbox-selected {
  display: none;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-row
    .super-select--option-checkbox.super-select--option-checkbox-not-selected {
  display: none;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-row
    .super-select--option-checkbox.super-select--option-checkbox-selected {
  display: block;
}

.select2-selection__rendered
    .super-select--option-row
    .super-select--option-checkbox {
  display: none !important;
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected]
    .super-select--option-row {
  /* Popover hover/highlight surface. */
  background-color: var(--background-base) !important;
}

/* Typeahead box — matches the floating-label text field component: 32px tall,
     14px text, 8px radius, 1px inset border-dark at rest, content-primary on
     hover, 2px content-primary on focus/active, 150ms ease. */

.select2-search__field {
  height: 2rem !important;
  border-radius: 0.5rem !important;
  border-style: none !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: 0 !important;
  box-shadow: 0 0 0 1px inset var(--content-border-dark, rgba(52, 46, 38, 0.12));
  background: var(--content-background-elevated, #fff);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.select2-search__field:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

.select2-search__field:focus,
    .select2-search__field:active {
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
  outline: none !important;
}

.super-select--option-description,
  .super-select--option-image,
  .super-select--option-color {
  display: none;
}

.select2-results .super-select--option-description,
    .select2-results .super-select--option-text,
    .select2-results .super-select--option-image {
  display: block;
}

.select2-results .super-select--option-row {
  display: flex;
  align-items: center;
}

.select2-results .super-select--option-text {
  flex: 1 1 0%;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.select2-results .super-select--option-image {
  position: relative;
  margin-right: 0.5rem;
  height: 1.25rem;
  width: 1.25rem;
  align-self: center;
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.select2-results .super-select--option-image > i,
      .select2-results .super-select--option-image > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: auto;
  width: 1.25rem;
  --tw-translate-x: -50%;
  --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));
  text-align: center;
}

.select2-results .super-select--option-image > img {
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.125rem;
  -o-object-fit: cover;
     object-fit: cover;
}

[data-select-all-target='wrapper'].select2-results .super-select--option-color {
  display: block;
}

.select2-results .super-select--option-color {
  margin-right: 0.5rem;
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
}

.select2-results .super-select--option-label {
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.select2-results .select2-results__option[aria-disabled='true'] .super-select--option-label,
      .select2-results .select2-results__option[aria-disabled='true'] .super-select--option-description,
      .select2-results .select2-results__option[aria-disabled='true'] .super-select--option-image,
      .select2-results .select2-results__option[aria-disabled='true'] .super-select--option-image svg {
  color: var(--content-tertiary);
}

.select2-results .super-select--option-description {
  display: block;
  color: rgb(11 5 29 / .36);
}

.no-edges .select2-container,
    .no-edges .select2-container > .selection {
  border-radius: inherit !important;
}

/* 
    We're using a modal on mobile to show the select2 dropdown.
    On desktop, we're using the select2 dropdown as a dropdown menu.
  */

/* In the bottom sheet the dropdown is a flex column that fills the sheet
       (container → dropdown → results all flex-1 + min-h-0), so the results list
       — not a fixed 300px box — becomes the scroll area and extends all the way
       to the bottom of the sheet. */

.use-modal-on-mobile dialog:modal[open] .select2-container--open {
  position: static !important;
  display: flex !important;
  min-height: 0px !important;
  width: 100% !important;
  flex: 1 1 0% !important;
  flex-direction: column !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-dropdown {
  position: static !important;
  min-height: 0px !important;
  width: 100% !important;
  flex: 1 1 0% !important;
  overflow: visible !important;
  border-radius: 0 !important;
  border-style: none !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.floating-input-field.use-modal-on-mobile dialog:modal[open] .select2-dropdown,
.floating-input-field.use-modal-on-mobile dialog:modal[open] .select2-dropdown:focus,
.floating-input-field.use-modal-on-mobile dialog:modal[open] .select2-dropdown:hover,
.floating-input-field.use-modal-on-mobile dialog:modal[open] .select2-dropdown:active {
  box-shadow: none !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-dropdown {
  max-height: none !important;
  /* Keep the sheet edge-to-edge: the desktop panel's 8px inset is not wanted
         here (rows manage their own 16px gutter). */
  padding: 2px !important;
  /* Neutralize select2's above/below open-direction translate; in the sheet the
         dropdown is static and full-height, and the -translate-y-1 (--above) just
         shifts the list up, leaving a gap at the bottom of the scroll area. */
  transform: none !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-dropdown::after {
  display: none;
}

.use-modal-on-mobile dialog:modal[open] .select2-container--default .select2-results {
  min-height: 0px !important;
  flex: 1 1 0% !important;
  overflow-y: auto !important;
}

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results
      > .select2-results__options {
  max-height: none !important;
  overflow: visible;
  overflow-y: visible;
}

/* Bottom-sheet menu rows — match the app's dialog-menu pattern.
       The list is edge-to-edge (activeModalBody cancels the body gutters), each
       row is full-width and tappable, the :active / highlighted band spans the
       full width, and content keeps a 16px L/R gutter (so dividers added later
       can honor it too). */

.use-modal-on-mobile dialog:modal[open] .select2-search--dropdown {
  padding: 0 16px 12px !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-container--default .select2-results__option {
  padding: 0 !important;
}

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option
      .super-select--option-row {
  border-radius: 0;
  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;
  padding: 14px 16px;
  background-color: transparent;
}

/* The single-select check (`:after`) lives at the right gutter; the
       `.super-select--single` wrapper is outside the moved dialog, so target the
       selected row directly. Reserve right padding so a long selected label can't
       run under the check, and align the check itself to the 16px gutter. */

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option[aria-selected='true']
      .super-select--option-row {
  padding-right: 44px;
}

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option[aria-selected='true']
      .super-select--option-row:after {
  right: 16px;
}

/* 20px flags with a 12px gap to the label; 14px label text. */

.use-modal-on-mobile dialog:modal[open] .select2-results .super-select--option-image {
  margin-right: 0.75rem;
  height: 1.25rem;
  width: 1.25rem;
}

.use-modal-on-mobile dialog:modal[open] .select2-results .super-select--option-image > img {
  margin-right: 0px;
  height: 1.25rem;
  width: 1.25rem;
}

.use-modal-on-mobile dialog:modal[open] .select2-results .super-select--option-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

/* Tap-and-hold (:active) and keyboard-highlighted rows get a full-width
       background-base band, transitioned smoothly via the row's `transition`. */

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option:active
      .super-select--option-row,
    .use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option--highlighted[aria-selected]
      .super-select--option-row {
  background-color: var(--background-base) !important;
}

/* Allow select2 dropdowns to overflow dialogs */

dialog:has(.select2-container--open) {
  overflow: visible !important;
}

dialog:has(.select2-container--open) > div {
  overflow: visible !important;
}

.super-select--option-label .super-select--option-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.slider {
  position: relative;
  height: 0.5rem;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.5rem;
  background-color: var(--background-overlay);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.slider::before {
  pointer-events: none;
  position: absolute;
  display: block;
  height: 100%;
  border-radius: 0.5rem;
  background-color: var(--content-primary);
  --tw-content: '';
  content: var(--tw-content);
}

.slider:hover {
  opacity: 1;
}

.slider::before {
  width: var(--slider-percentage);
}

.slider::-webkit-slider-thumb {
  position: relative;
  z-index: 2;
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--background-elevated);
  background-color: var(--content-primary);
  background-position: center;
  background-repeat: no-repeat;
  --tw-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px 2px 6px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.slider::-moz-range-thumb {
  position: relative;
  z-index: 2;
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--background-elevated);
  background-color: var(--content-primary);
  background-position: center;
  background-repeat: no-repeat;
  --tw-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px 2px 6px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.switch {
  position: relative;
  z-index: 0;
  display: inline-flex;
  height: 1.5rem;
  width: 2.375rem;
  min-width: 2.375rem;
  align-items: center;
}

.switch__track-base {
  position: absolute;
  inset: 0px;
  z-index: 0;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 237 234 / var(--tw-bg-opacity, 1));
  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: 200ms;
}

.switch__track-base:where(.dark, .dark *) {
  background-color: var(--background-neutral);
}

.switch__track-checked {
  position: absolute;
  inset: 0px;
  z-index: 10;
  border-radius: 9999px;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: var(--brand-secondary-moola) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--brand-secondary-moola) var(--tw-gradient-to-position);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.switch__track-checked[type='checkbox']:disabled,
  .switch__track-checked[type='radio']:disabled {
  cursor: not-allowed;
  background-color: var(--content-border-dark);
}

.switch__track-hover {
  position: absolute;
  inset: 0px;
  z-index: 10;
  border-radius: 9999px;
  background-color: var(--background-overlay);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.switch__thumb {
  position: absolute;
  left: 0.125rem;
  top: 50%;
  z-index: 10;
  height: 1.25rem;
  width: 1.25rem;
  --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));
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.8);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.switch__thumb::after {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.segmented-control__shell {
  position: relative;
  height: 2rem;
  min-width: 2.5rem;
  border-radius: 9999px;
  border-width: 2px;
  border-color: var(--content-border-dark);
  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: 200ms;
}

.segmented-control__box {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 9999px;
  padding: 0.15rem;
  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;
}

.segmented-control__label {
  z-index: 50;
  display: flex;
  height: 1.5rem;
  width: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--content-secondary);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-toggle input[type='checkbox']:checked + .segmented-control__label:has(:checked)button.button-secondary, .btn-toggle input[type='radio']:checked + .segmented-control__label:has(:checked)button.button-secondary {
  background-color: var(--background-overlay);
}

.segmented-control__label:hover {
  background-color: var(--background-overlay);
  color: var(--content-secondary);
}

.segmented-control__label:focus-visible {
  color: var(--content-secondary);
  --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);
  --tw-ring-inset: inset;
  --tw-ring-color: #342e2633;
}

.segmented-control__label:has(:checked) {
  background-color: transparent;
}

.segmented-control__label:has(:selected) {
  color: var(--content-primary) !important;
}

.segmented-control__label:has(:checked) {
  color: var(--content-primary) !important;
  --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(0px + 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);
}

.segmented-control__label input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.segmented-control label:first-of-type:has(input[type='radio']:checked)
      ~ .segmented-control__active {
  transform: translateX(-100%);
}

.segmented-control label:last-of-type:has(input[type='radio']:checked)
      ~ .segmented-control__active {
  transform: translateX(0%);
}

.segmented-control__active {
  background-color: var(--background-overlay);
  color: var(--background-base);
  position: absolute;
  left: 50%;
  height: 1.5rem;
  cursor: pointer;
  border-radius: 9999px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  /* @apply absolute left-1/2 h-9 rounded-radius-12 shadow-md transition-transform segmented-control-slider; */
}

.segmented-control label:first-of-type:has(input[type='radio']:checked)
      ~ .segmented-control-slider {
  transform: translateX(-100%);
}

.segmented-control label:last-of-type:has(input[type='radio']:checked)
      ~ .segmented-control-slider {
  transform: translateX(0%);
}

.segmented-control .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 237 132 / var(--tw-border-opacity, 1));
  background-color: var(--brand-primary-shine);
  padding-left: 5px;
  padding-right: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--content-primary);
}

.segmented-control .\!badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 237 132 / var(--tw-border-opacity, 1));
  background-color: var(--brand-primary-shine);
  padding-left: 5px;
  padding-right: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--content-primary);
}

.segmented-control .badge {
  padding-top: 3px;
  padding-bottom: 3px;
}

.segmented-control .\!badge {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.segmented-control-slider {
  background-color: var(--background-overlay);
  color: var(--background-base);
}

/* Hide dividers adjacent to checked inputs or hovered labels */

[data-controller*="segmented-control"] label:has(input:checked)+div,
  [data-controller*="segmented-control"] label.group:hover+div {
  opacity: 0;
}


  [data-controller*="segmented-control"] label.\!group:hover+div {
  opacity: 0 !important;
}

.read-more-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--read-more-line-clamp, 2);
  line-clamp: var(--read-more-line-clamp, 2);
}

[data-controller='read-more'] [data-read-more-target='toggle'] {
  visibility: hidden;
}

[data-controller='read-more'].truncated [data-read-more-target='toggle'] {
  visibility: visible;
}

.pcr-app[data-controller='read-more'].truncated [data-read-more-target='toggle'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.autocomplete-dropdown[data-controller='read-more'].truncated [data-read-more-target='toggle'] {
  display: block;
}

/* NOTE: not sure why this was here, but it breaks the above display declaration */

/* .read-more-content[style*='--read-more-line-clamp'] {
    display: inline !important;
  } */

/* One-off icon-size override for the sidebar close/expand toggle: the drawer
     glyph reads better at 18px than the 16px default that
     `.button-icon.button-small` enforces. `flex-shrink: 0` keeps the SVG from
     being shrunk to fit the button's 16px content area (it overflows ~1px into
     the 8px padding, which is fine visually). */

.button-icon.button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon.\!button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.\!tooltip {
  /* Dark "data popup" — a small desktop-only info label on certain buttons. A clean rounded
       rectangle (no arrow, see below): 14px/150% medium, -0.48px tracking, white
       (background-elevated) text. 32px-tall pill via min-height + inline-flex; the shortcut
       span sits inline next to the label with an 8px gap. */
}

.tooltip {
  /* Dark "data popup" — a small desktop-only info label on certain buttons. A clean rounded
       rectangle (no arrow, see below): 14px/150% medium, -0.48px tracking, white
       (background-elevated) text. 32px-tall pill via min-height + inline-flex; the shortcut
       span sits inline next to the label with an 8px gap. */
}

.\!tooltip {
  position: absolute;
  border-radius: 0.375rem;
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.03rem;
}

.tooltip {
  position: absolute;
  border-radius: 0.375rem;
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.03rem;
}

.\!tooltip {
  background-color: var(--content-primary);
  color: var(--background-elevated);
}

.tooltip {
  background-color: var(--content-primary);
  color: var(--background-elevated);
}

.\!tooltip:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.tooltip:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.\!tooltip {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
  opacity: 0;
}

.tooltip {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
  opacity: 0;
}

.\!tooltip {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.tooltip {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.\!tooltip[aria-hidden="true"] {
  display: none;
}

.tooltip[aria-hidden="true"] {
  display: none;
}

.\!tooltip {
  top: 0px;
  left: 0px;
}

.tooltip {
  top: 0px;
  left: 0px;
}

.\!tooltip {
  min-height: 2rem;
  width: -moz-max-content;
  width: max-content;
}

.tooltip {
  min-height: 2rem;
  width: -moz-max-content;
  width: max-content;
}

.\!tooltip {
  z-index: 50;
}

.tooltip {
  z-index: 50;
}

.\!tooltip {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 5.5px;
  padding-bottom: 5.5px;
}

.tooltip {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 5.5px;
  padding-bottom: 5.5px;
}

.\!tooltip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tooltip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.\!tooltip {
  max-width: min(calc(100vw - 20px), 200px) !important;
}

.tooltip {
  max-width: min(calc(100vw - 20px), 200px);
}

/* Inline keyboard shortcut hint inside a tooltip. Sits to the right of the label
     with an 8px gap (provided by `.tooltip { gap: 8px }`), rendered at 64% opacity
     to mirror content-secondary's relationship to content-primary in light theme. */

.tooltip-shortcut {
  color: var(--background-elevated);
  opacity: 0.64;
}

.\!tooltip.light .tooltip-shortcut {
  color: var(--content-secondary);
  opacity: 1;
}

.tooltip.light .tooltip-shortcut {
  color: var(--content-secondary);
  opacity: 1;
}

.\!tooltip.light {
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.tooltip.light {
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.\!tooltip.light {
  border-width: 1px;
  border-color: var(--content-border-neutral);
}

.tooltip.light {
  border-width: 1px;
  border-color: var(--content-border-neutral);
}

.\!tooltip.light {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0),
      0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01),
      0 2px 5px 0 rgba(0, 0, 0, 0.06) !important;
}

.tooltip.light {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0),
      0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01),
      0 2px 5px 0 rgba(0, 0, 0, 0.06);
}

.\!tooltip.arrow-hidden .tooltip-arrow {
  --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));
  opacity: 0;
}

.tooltip.arrow-hidden .tooltip-arrow {
  --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));
  opacity: 0;
}

.show-tooltip .tooltip {
  --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));
  opacity: 1;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.show-tooltip .\!tooltip {
  --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));
  opacity: 1;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.tooltip-arrow {
  position: absolute;
  height: 0.5rem;
  width: 0.5rem;
  --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));
  background-color: inherit;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* No arrow on the dark data-popup tooltip — it's a clean rounded rectangle.
     The light variant (used elsewhere) keeps its arrow. */

.\!tooltip:not(.light) .tooltip-arrow {
  display: none;
}

.tooltip:not(.light) .tooltip-arrow {
  display: none;
}

.\!tooltip.light .tooltip-arrow {
  border-color: var(--content-border-neutral);
}

.tooltip.light .tooltip-arrow {
  border-color: var(--content-border-neutral);
}

[data-select-all-target='wrapper'].\!tooltip.light[data-placement='top'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.\!tooltip.light[data-placement='top'] .tooltip-arrow {
  border-right-width: 1px;
  border-bottom-width: 1px;
}

[data-select-all-target='wrapper'].tooltip.light[data-placement='top'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.tooltip.light[data-placement='top'] .tooltip-arrow {
  border-right-width: 1px;
  border-bottom-width: 1px;
}

[data-select-all-target='wrapper'].\!tooltip.light[data-placement='bottom'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.\!tooltip.light[data-placement='bottom'] .tooltip-arrow {
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-select-all-target='wrapper'].tooltip.light[data-placement='bottom'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.tooltip.light[data-placement='bottom'] .tooltip-arrow {
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-select-all-target='wrapper'].\!tooltip.light[data-placement='left'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.\!tooltip.light[data-placement='left'] .tooltip-arrow {
  border-top-width: 1px;
  border-right-width: 1px;
}

[data-select-all-target='wrapper'].tooltip.light[data-placement='left'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.tooltip.light[data-placement='left'] .tooltip-arrow {
  border-top-width: 1px;
  border-right-width: 1px;
}

[data-select-all-target='wrapper'].\!tooltip.light[data-placement='right'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.\!tooltip.light[data-placement='right'] .tooltip-arrow {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-select-all-target='wrapper'].tooltip.light[data-placement='right'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.tooltip.light[data-placement='right'] .tooltip-arrow {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.tooltip-arrow-hidden {
  --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));
  opacity: 0;
}

.tooltip-generated-wrapper {
  display: inline-block;
}

.link-base {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.link-large {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.5rem;
  color: var(--interactive-control);
}

.link-medium {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.25rem;
  color: var(--interactive-control);
}

.button-link-share {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--background-overlay);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-link-share:hover {
  border-color: transparent;
  background-color: var(--background-overlay);
}

.button-link-share:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
  border-color: var(--background-overlay);
  background-color: var(--background-elevated);
}

/* Dotted-underline affordance: signals that a piece of text reveals more detail on
     hover (desktop) / tap (mobile), typically via a tooltip. Pair with a tooltip —
     either `data-create-tooltip` + an `aria-label`, or the custom_tooltip partial —
     and add `tabindex="0"` so a mobile tap can focus→open it.

     `inline-block` + `leading-none` condense the line box so the 2px dotted border
     rides up tight against the text; an inline border otherwise paints down at the
     font's descent line, leaving a visible gap. Color defaults to the content-border-dark
     border token; override with another `border-*` utility where a different tone is needed. */

[data-select-all-target='wrapper'].dotted-hint {
  display: block;
}

.dotted-hint {
  display: inline-block;
  border-bottom-width: 2px;
  border-style: dotted;
  border-color: var(--content-border-dark);
  line-height: 1;
  text-decoration-line: none;
}

.radio-card {
  cursor: pointer;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--background-elevated);
  transition-duration: 0.15s;
  transition-property: transform, background-color, box-shadow;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.radio-card:has(input:checked), .radio-card:active, .radio-card:focus-visible {
  border-color: var(--content-border-neutral);
  box-shadow: 0 0 0 2px var(--content-primary, #342E26) inset;
}

.radio-card:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

.radio-card:hover {
  box-shadow: 0 0 0 2px var(--content-primary, #342E26) inset;
}

input[type='checkbox'] {
  border-radius: 0.25rem !important;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  color: var(--content-primary) !important;
}

input[type='checkbox']:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type='checkbox'].checkout {
  /* try to match Stripe's checkbox style */
  border-radius: 0.3125rem !important;
}

input[type='checkbox'].checkout:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-size: 14px;
}

/* Animated checkbox — reusable. Add `.checkbox-animated transition` to any
     `input[type="checkbox"]`. On check: a content-primary circle scales out from
     the centre to flood the rounded box, then a white tick pops in. On uncheck it
     reverses and the border eases back to the default colour (no lingering fill).
     Selectors are element-qualified so they beat the global `input[type=checkbox]`
     rule above (incl. its `!rounded-radius-4`). */

input.checkbox-animated {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--background-elevated);
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--content-border-input);
  border-radius: 6px !important;
  background-image: none;
}

input.checkbox-animated:hover {
  border-color: var(--content-primary);
}

input.checkbox-animated:checked {
  border-color: var(--content-primary);
  background-image: none;
}

/* Radial fill: a circle larger than the box, scaled 0 → 1 from the centre and
     clipped to the rounded-rect by the host's `overflow: hidden`. */

input.checkbox-animated::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  background-color: var(--content-primary);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input.checkbox-animated:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

/* White tick (our `check-checkmark` icon, stroke 1.5), revealed just after the
     fill lands. */

input.checkbox-animated::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' vector-effect='non-scaling-stroke' d='m4.5 11.79 4 5.46 11-10.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.08s ease, transform 0.12s ease;
}

input.checkbox-animated:checked::after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.1s ease 0.12s,
      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s;
}

.\!checkbox {
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

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

.checkbox {
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

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

/* Hide default checkbox but keep it accessible */

.\!checkbox .custom-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.checkbox .custom-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Custom checkbox container */

.checkbox-label {
  display: flex;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: flex-start;
}

.checkbox-label::before {
  content: '';
  margin-right: 0.5rem;
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.125rem;
}

.checkbox-label::after {
  content: '';
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--background-elevated);
  position: absolute;
  left: 2px;
  top: 2px;
}

/* Focus state */

.\!checkbox .custom-checkbox:focus ~ .checkbox-label::after {
  --tw-shadow: 0px 0px 0px 1px rgba(52,46,38,0.44),0px 0px 0px 4px rgba(11,5,29,0.16);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 0px 0px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.checkbox .custom-checkbox:focus ~ .checkbox-label::after {
  --tw-shadow: 0px 0px 0px 1px rgba(52,46,38,0.44),0px 0px 0px 4px rgba(11,5,29,0.16);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 0px 0px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Checked state */

.\!checkbox .custom-checkbox:checked ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
}

.checkbox .custom-checkbox:checked ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
}

.\!checkbox .custom-checkbox:checked ~ .checkbox-label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: var(--background-elevated) !important;
}

.checkbox .custom-checkbox:checked ~ .checkbox-label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  color: var(--background-elevated);
}

/* Indeterminate state */

.\!checkbox .custom-checkbox:indeterminate ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
}

.checkbox .custom-checkbox:indeterminate ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
}

.\!checkbox .custom-checkbox:indeterminate ~ .checkbox-label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.70837 6.5H10.2917' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: var(--background-elevated) !important;
}

.checkbox .custom-checkbox:indeterminate ~ .checkbox-label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.70837 6.5H10.2917' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  color: var(--background-elevated);
}

/* Disabled state */

.\!checkbox .custom-checkbox:disabled ~ .checkbox-label {
  cursor: not-allowed;
  color: var(--content-tertiary);
}

.checkbox .custom-checkbox:disabled ~ .checkbox-label {
  cursor: not-allowed;
  color: var(--content-tertiary);
}

.\!checkbox .custom-checkbox:disabled ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--background-overlay);
  --tw-shadow: 0px 1px 2px 0px rgba(11,5,29,0.12);
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.checkbox .custom-checkbox:disabled ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--background-overlay);
  --tw-shadow: 0px 1px 2px 0px rgba(11,5,29,0.12);
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Help text styling */

.checkbox-label p {
  color: var(--content-tertiary);
}

/* Multiple checkboxes container */

[data-controller='select-all'] {
  display: flex;
  flex-direction: column;
}

[data-select-all-target='wrapper'] {
  display: none;
}

[data-select-all-target='wrapper'].inline-block {
  display: block;
}

/* Select all section borders */

[data-select-all-target='wrapper'].border-b {
  border-color: var(--content-border-dark);
}

[data-select-all-target='wrapper'].\!border-t {
  border-color: var(--content-border-dark);
}

[data-select-all-target='wrapper'].border-t {
  border-color: var(--content-border-dark);
}

.box_shadow_sm {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
}

.layout {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--screen-margin);
}

/* Break a child out of the .layout gutter so it spans edge-to-edge of the
     container, then pad + scroll-pad it back so its content stays aligned.
     `--edge-bleed` is the bleed distance; it defaults to the responsive gutter,
     but can be overridden — e.g. a centered max-width section overrides it with a
     `cqw`-based value to bleed all the way past the centering offset to the panel
     edge (see the Pricing carousel). Apply to a horizontal scroller for a
     full-bleed carousel whose cards still start at the content's left edge. */

.edge-bleed {
  --edge-bleed: var(--screen-margin, 16px);
  margin-left: calc(-1 * var(--edge-bleed));
  margin-right: calc(-1 * var(--edge-bleed));
  padding-left: var(--edge-bleed);
  padding-right: var(--edge-bleed);
  scroll-padding-left: var(--edge-bleed);
  scroll-padding-right: var(--edge-bleed);
}

/* Same bleed, but only below the first layout breakpoint — for components that
     go full-bleed on phones yet sit boxed within the gutter from there up. */

@media (max-width: 768px) {
  .edge-bleed-mobile {
    --edge-bleed: var(--screen-margin, 16px);
    margin-left: calc(-1 * var(--edge-bleed));
    margin-right: calc(-1 * var(--edge-bleed));
    padding-left: var(--edge-bleed);
    padding-right: var(--edge-bleed);
    scroll-padding-left: var(--edge-bleed);
    scroll-padding-right: var(--edge-bleed);
  }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--background-base);
}

/* Shimmer is a darker (light transparent black) sweep over the base, rather than a white one. */

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.06) 50%,
      rgba(0, 0, 0, 0) 100%
    );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Skeleton "card": a real card (border + shadow + elevated bg) renders in skeleton mode as a
     FLAT background-base block — no border, no shadow — keeping only the rounded radius (set in
     markup). Because the card is itself background-base, `.skeleton` elements inside it would be
     invisible, so they switch to background-overlay (a touch darker) to stay legible. */

.skeleton-card {
  background-color: var(--background-base);
}

.skeleton-card .skeleton {
  background-color: var(--background-overlay);
}

/* Content fade-in when real settings content renders (also covers the skeleton→content
     hand-off: skeleton is discarded on the Turbo Drive body swap, new content fades in). */

.settings-content-fade-in {
  animation: settings-content-fade-in 0.18s ease-out;
}

@keyframes settings-content-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    display: none;
  }

  .settings-content-fade-in {
    animation: none;
  }
}

.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;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.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-\[1px\] {
  inset: -1px;
}

.inset-0 {
  inset: 0px;
}

.inset-auto {
  inset: auto;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.\!top-1\.5 {
  top: 0.375rem !important;
}

.-bottom-2 {
  bottom: -0.5rem;
}

.-bottom-3 {
  bottom: -0.75rem;
}

.-bottom-4 {
  bottom: -1rem;
}

.-bottom-6 {
  bottom: -1.5rem;
}

.-left-1\.5 {
  left: -0.375rem;
}

.-left-2 {
  left: -0.5rem;
}

.-left-4 {
  left: -1rem;
}

.-right-1\.5 {
  right: -0.375rem;
}

.-right-4 {
  right: -1rem;
}

.-right-6 {
  right: -1.5rem;
}

.-right-\[1px\] {
  right: -1px;
}

.-top-0 {
  top: -0px;
}

.-top-1\.5 {
  top: -0.375rem;
}

.-top-4 {
  top: -1rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-12 {
  bottom: 3rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-3 {
  bottom: 0.75rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-5 {
  bottom: 1.25rem;
}

.bottom-52 {
  bottom: 13rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.bottom-8 {
  bottom: 2rem;
}

.bottom-\[-100px\] {
  bottom: -100px;
}

.bottom-\[calc\(4rem\+env\(safe-area-inset-bottom\)\)\] {
  bottom: calc(4rem + env(safe-area-inset-bottom));
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-10 {
  left: 2.5rem;
}

.left-2 {
  left: 0.5rem;
}

.left-3 {
  left: 0.75rem;
}

.left-3\.5 {
  left: 0.875rem;
}

.left-4 {
  left: 1rem;
}

.left-5 {
  left: 1.25rem;
}

.left-9 {
  left: 2.25rem;
}

.left-\[0\.125rem\] {
  left: 0.125rem;
}

.left-\[1\.53px\] {
  left: 1.53px;
}

.left-\[12\.97px\] {
  left: 12.97px;
}

.left-\[14px\] {
  left: 14px;
}

.left-\[18px\] {
  left: 18px;
}

.left-\[22px\] {
  left: 22px;
}

.left-\[6\.75px\] {
  left: 6.75px;
}

.left-\[99\.88px\] {
  left: 99.88px;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-1 {
  right: 0.25rem;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-1\/2 {
  right: 50%;
}

.right-10 {
  right: 2.5rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-6 {
  right: 1.5rem;
}

.right-8 {
  right: 2rem;
}

.right-9 {
  right: 2.25rem;
}

.right-\[1\.9rem\] {
  right: 1.9rem;
}

.right-\[2\.3rem\] {
  right: 2.3rem;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\.5 {
  top: 0.375rem;
}

.top-1\/2 {
  top: 50%;
}

.top-10 {
  top: 2.5rem;
}

.top-2 {
  top: 0.5rem;
}

.top-24 {
  top: 6rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.top-6 {
  top: 1.5rem;
}

.top-8 {
  top: 2rem;
}

.top-\[-4px\] {
  top: -4px;
}

.top-\[120px\] {
  top: 120px;
}

.top-\[183\.05px\] {
  top: 183.05px;
}

.top-\[4\.26px\] {
  top: 4.26px;
}

.top-\[4px\] {
  top: 4px;
}

.top-\[5\.14px\] {
  top: 5.14px;
}

.top-\[6px\] {
  top: 6px;
}

.top-\[7\.76px\] {
  top: 7.76px;
}

.top-full {
  top: 100%;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.-z-\[1\] {
  z-index: -1;
}

.z-0 {
  z-index: 0;
}

.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-\[10000\] {
  z-index: 10000;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[3\] {
  z-index: 3;
}

.z-\[50\] {
  z-index: 50;
}

.z-\[99999\] {
  z-index: 99999;
}

.z-\[9999\] {
  z-index: 9999;
}

.z-\[999\] {
  z-index: 999;
}

.z-\[99\] {
  z-index: 99;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

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

.col-span-12 {
  grid-column: span 12 / span 12;
}

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

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

.col-span-6 {
  grid-column: span 6 / span 6;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-9 {
  grid-column: span 9 / span 9;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.float-right {
  float: right;
}

.-m-2 {
  margin: -0.5rem;
}

.-m-4 {
  margin: -1rem;
}

.m-0 {
  margin: 0px;
}

.m-10 {
  margin: 2.5rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-4 {
  margin: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.m-6 {
  margin: 1.5rem;
}

.m-8 {
  margin: 2rem;
}

.m-auto {
  margin: auto;
}

.\!mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.\!mx-6 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.\!my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.\!my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.\!my-6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-1\.5 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-2\.5 {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}

.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.-my-\[100px\] {
  margin-top: -100px;
  margin-bottom: -100px;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-\[1px\] {
  margin-left: 1px;
  margin-right: 1px;
}

.mx-\[30px\] {
  margin-left: 30px;
  margin-right: 30px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-2\.5 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.my-28 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.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;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.\!-mb-4 {
  margin-bottom: -1rem !important;
}

.\!-mt-6 {
  margin-top: -1.5rem !important;
}

.\!mb-0 {
  margin-bottom: 0px !important;
}

.\!mb-4 {
  margin-bottom: 1rem !important;
}

.\!mr-1 {
  margin-right: 0.25rem !important;
}

.\!mt-0 {
  margin-top: 0px !important;
}

.\!mt-10 {
  margin-top: 2.5rem !important;
}

.\!mt-2 {
  margin-top: 0.5rem !important;
}

.\!mt-5 {
  margin-top: 1.25rem !important;
}

.-mb-1 {
  margin-bottom: -0.25rem;
}

.-mb-1\.5 {
  margin-bottom: -0.375rem;
}

.-mb-4 {
  margin-bottom: -1rem;
}

.-mb-5 {
  margin-bottom: -1.25rem;
}

.-mb-6 {
  margin-bottom: -1.5rem;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.-ml-10 {
  margin-left: -2.5rem;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-ml-4 {
  margin-left: -1rem;
}

.-ml-5 {
  margin-left: -1.25rem;
}

.-ml-6 {
  margin-left: -1.5rem;
}

.-mr-1\.5 {
  margin-right: -0.375rem;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.-mr-4 {
  margin-right: -1rem;
}

.-mr-\[1\.5px\] {
  margin-right: -1.5px;
}

.-mr-\[1px\] {
  margin-right: -1px;
}

.-mt-0\.5 {
  margin-top: -0.125rem;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mt-10 {
  margin-top: -2.5rem;
}

.-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-7 {
  margin-top: -1.75rem;
}

.-mt-\[1px\] {
  margin-top: -1px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-24 {
  margin-bottom: 6rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-\[84px\] {
  margin-bottom: 84px;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-0 {
  margin-left: 0px;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.ml-12 {
  margin-left: 3rem;
}

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

.ml-2 {
  margin-left: 0.5rem;
}

.ml-2\.5 {
  margin-left: 0.625rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-7 {
  margin-left: 1.75rem;
}

.ml-8 {
  margin-left: 2rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-0 {
  margin-right: 0px;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-10 {
  margin-right: 2.5rem;
}

.mr-12 {
  margin-right: 3rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-2\.5 {
  margin-right: 0.625rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mr-\[1px\] {
  margin-right: 1px;
}

.mr-auto {
  margin-right: auto;
}

.mt-0 {
  margin-top: 0px;
}

.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-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-\[10px\] {
  margin-top: 10px;
}

.mt-\[1em\] {
  margin-top: 1em;
}

.mt-\[22px\] {
  margin-top: 22px;
}

.mt-\[70px\] {
  margin-top: 70px;
}

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

.mt-px {
  margin-top: 1px;
}

.box-content {
  box-sizing: content-box;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.\!flex {
  display: flex !important;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

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

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.\!hidden {
  display: none !important;
}

.hidden {
  display: none;
}

.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}

.aspect-\[9\/16\] {
  aspect-ratio: 9/16;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.\!size-10 {
  width: 2.5rem !important;
  height: 2.5rem !important;
}

.\!size-7 {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

.\!size-8 {
  width: 2rem !important;
  height: 2rem !important;
}

.size-0\.5 {
  width: 0.125rem;
  height: 0.125rem;
}

.size-1 {
  width: 0.25rem;
  height: 0.25rem;
}

.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}

.size-12 {
  width: 3rem;
  height: 3rem;
}

.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}

.size-16 {
  width: 4rem;
  height: 4rem;
}

.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}

.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}

.size-20 {
  width: 5rem;
  height: 5rem;
}

.size-22 {
  width: 5.5rem;
  height: 5.5rem;
}

.size-24 {
  width: 6rem;
  height: 6rem;
}

.size-28 {
  width: 7rem;
  height: 7rem;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}

.size-32 {
  width: 8rem;
  height: 8rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}

.size-8 {
  width: 2rem;
  height: 2rem;
}

.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

.size-\[14px\] {
  width: 14px;
  height: 14px;
}

.size-\[18px\] {
  width: 18px;
  height: 18px;
}

.size-\[2px\] {
  width: 2px;
  height: 2px;
}

.size-\[40px\] {
  width: 40px;
  height: 40px;
}

.size-\[42px\] {
  width: 42px;
  height: 42px;
}

.size-\[54px\] {
  width: 54px;
  height: 54px;
}

.size-\[88px\] {
  width: 88px;
  height: 88px;
}

.size-full {
  width: 100%;
  height: 100%;
}

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

.\!h-11 {
  height: 2.75rem !important;
}

.\!h-3\.5 {
  height: 0.875rem !important;
}

.\!h-40 {
  height: 10rem !important;
}

.\!h-8 {
  height: 2rem !important;
}

.\!h-\[380px\] {
  height: 380px !important;
}

.\!h-\[700px\] {
  height: 700px !important;
}

.\!h-auto {
  height: auto !important;
}

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-1\/2 {
  height: 50%;
}

.h-1\/4 {
  height: 25%;
}

.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-2\.5 {
  height: 0.625rem;
}

.h-2\/3 {
  height: 66.666667%;
}

.h-20 {
  height: 5rem;
}

.h-22 {
  height: 5.5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-3\/4 {
  height: 75%;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-56 {
  height: 14rem;
}

.h-6 {
  height: 1.5rem;
}

.h-60 {
  height: 15rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[1\.25rem\] {
  height: 1.25rem;
}

.h-\[1\.5rem\] {
  height: 1.5rem;
}

.h-\[100px\] {
  height: 100px;
}

.h-\[104px\] {
  height: 104px;
}

.h-\[120px\] {
  height: 120px;
}

.h-\[128px\] {
  height: 128px;
}

.h-\[150px\] {
  height: 150px;
}

.h-\[170px\] {
  height: 170px;
}

.h-\[180px\] {
  height: 180px;
}

.h-\[184px\] {
  height: 184px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[200px\] {
  height: 200px;
}

.h-\[207px\] {
  height: 207px;
}

.h-\[212px\] {
  height: 212px;
}

.h-\[21px\] {
  height: 21px;
}

.h-\[24px\] {
  height: 24px;
}

.h-\[306px\] {
  height: 306px;
}

.h-\[320px\] {
  height: 320px;
}

.h-\[32px\] {
  height: 32px;
}

.h-\[3px\] {
  height: 3px;
}

.h-\[4\.5rem\] {
  height: 4.5rem;
}

.h-\[400px\] {
  height: 400px;
}

.h-\[40dvh\] {
  height: 40dvh;
}

.h-\[40px\] {
  height: 40px;
}

.h-\[44px\] {
  height: 44px;
}

.h-\[45px\] {
  height: 45px;
}

.h-\[470px\] {
  height: 470px;
}

.h-\[4px\] {
  height: 4px;
}

.h-\[500px\] {
  height: 500px;
}

.h-\[50px\] {
  height: 50px;
}

.h-\[52px\] {
  height: 52px;
}

.h-\[53px\] {
  height: 53px;
}

.h-\[58px\] {
  height: 58px;
}

.h-\[60px\] {
  height: 60px;
}

.h-\[64px\] {
  height: 64px;
}

.h-\[6px\] {
  height: 6px;
}

.h-\[75px\] {
  height: 75px;
}

.h-\[812px\] {
  height: 812px;
}

.h-\[943px\] {
  height: 943px;
}

.h-\[calc\(100\%\+8rem\)\] {
  height: calc(100% + 8rem);
}

.h-\[calc\(100dvh\)\] {
  height: calc(100dvh);
}

.h-\[calc\(100dvh-1\.5rem\)\] {
  height: calc(100dvh - 1.5rem);
}

.h-\[calc\(100dvh-11rem\)\] {
  height: calc(100dvh - 11rem);
}

.h-\[calc\(100dvh-13\.75rem\)\] {
  height: calc(100dvh - 13.75rem);
}

.h-\[calc\(100dvh-16px\)\] {
  height: calc(100dvh - 16px);
}

.h-\[calc\(100dvh-1rem\)\] {
  height: calc(100dvh - 1rem);
}

.h-\[calc\(100dvh-200px\)\] {
  height: calc(100dvh - 200px);
}

.h-\[calc\(100dvh-28rem\)\] {
  height: calc(100dvh - 28rem);
}

.h-\[calc\(100dvh-3rem\)\] {
  height: calc(100dvh - 3rem);
}

.h-\[calc\(100dvh-4rem\)\] {
  height: calc(100dvh - 4rem);
}

.h-\[calc\(100dvh-6rem\)\] {
  height: calc(100dvh - 6rem);
}

.h-\[calc\(100dvh-8px\)\] {
  height: calc(100dvh - 8px);
}

.h-\[calc\(100dvh-9rem\)\] {
  height: calc(100dvh - 9rem);
}

.h-\[calc\(100vh-10rem\)\] {
  height: calc(100vh - 10rem);
}

.h-\[calc\(100vh-130px\)\] {
  height: calc(100vh - 130px);
}

.h-\[calc\(100vh-88px\)\] {
  height: calc(100vh - 88px);
}

.h-\[calc\(100vh-8rem\)\] {
  height: calc(100vh - 8rem);
}

.h-\[calc\(100vh-90px\)\] {
  height: calc(100vh - 90px);
}

.h-\[calc\(20vh\)\] {
  height: calc(20vh);
}

.h-\[calc\(30dvh\)\] {
  height: calc(30dvh);
}

.h-\[calc\(40dvh\)\] {
  height: calc(40dvh);
}

.h-\[calc\(4rem-1px\)\] {
  height: calc(4rem - 1px);
}

.h-\[calc\(50dvh\)\] {
  height: calc(50dvh);
}

.h-\[calc\(55dvh\)\] {
  height: calc(55dvh);
}

.h-\[calc\(70dvh\+2rem\)\] {
  height: calc(70dvh + 2rem);
}

.h-\[calc\(80dvh\)\] {
  height: calc(80dvh);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.\!max-h-\[calc\(100dvh\)\] {
  max-height: calc(100dvh) !important;
}

.max-h-10 {
  max-height: 2.5rem;
}

.max-h-20 {
  max-height: 5rem;
}

.max-h-28 {
  max-height: 7rem;
}

.max-h-5 {
  max-height: 1.25rem;
}

.max-h-52 {
  max-height: 13rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-7 {
  max-height: 1.75rem;
}

.max-h-8 {
  max-height: 2rem;
}

.max-h-\[124px\] {
  max-height: 124px;
}

.max-h-\[128px\] {
  max-height: 128px;
}

.max-h-\[200px\] {
  max-height: 200px;
}

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

.max-h-\[350px\] {
  max-height: 350px;
}

.max-h-\[360px\] {
  max-height: 360px;
}

.max-h-\[50dvh\] {
  max-height: 50dvh;
}

.max-h-\[544px\] {
  max-height: 544px;
}

.max-h-\[5rem\] {
  max-height: 5rem;
}

.max-h-\[600px\] {
  max-height: 600px;
}

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

.max-h-\[720px\] {
  max-height: 720px;
}

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

.max-h-\[90dvh\] {
  max-height: 90dvh;
}

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

.max-h-\[calc\(100vh-4rem\)\] {
  max-height: calc(100vh - 4rem);
}

.max-h-\[calc\(70dvh-88px\)\] {
  max-height: calc(70dvh - 88px);
}

.max-h-dvh {
  max-height: 100dvh;
}

.max-h-full {
  max-height: 100%;
}

.max-h-none {
  max-height: none;
}

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

.min-h-10 {
  min-height: 2.5rem;
}

.min-h-14 {
  min-height: 3.5rem;
}

.min-h-16 {
  min-height: 4rem;
}

.min-h-20 {
  min-height: 5rem;
}

.min-h-32 {
  min-height: 8rem;
}

.min-h-36 {
  min-height: 9rem;
}

.min-h-40 {
  min-height: 10rem;
}

.min-h-56 {
  min-height: 14rem;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[150px\] {
  min-height: 150px;
}

.min-h-\[160px\] {
  min-height: 160px;
}

.min-h-\[1em\] {
  min-height: 1em;
}

.min-h-\[2rem\] {
  min-height: 2rem;
}

.min-h-\[36px\] {
  min-height: 36px;
}

.min-h-\[4\.5rem\] {
  min-height: 4.5rem;
}

.min-h-\[400px\] {
  min-height: 400px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[4rem\] {
  min-height: 4rem;
}

.min-h-\[70vh\] {
  min-height: 70vh;
}

.min-h-\[calc\(100dvh-3\.75rem\)\] {
  min-height: calc(100dvh - 3.75rem);
}

.min-h-\[calc\(100vh-96px\)\] {
  min-height: calc(100vh - 96px);
}

.min-h-dvh {
  min-height: 100dvh;
}

.min-h-min {
  min-height: -moz-min-content;
  min-height: min-content;
}

.min-h-screen {
  min-height: 100vh;
}

.\!w-1\/12 {
  width: 8.333333% !important;
}

.\!w-3 {
  width: 0.75rem !important;
}

.\!w-3\.5 {
  width: 0.875rem !important;
}

.\!w-3\/12 {
  width: 25% !important;
}

.\!w-7\/12 {
  width: 58.333333% !important;
}

.\!w-8 {
  width: 2rem !important;
}

.\!w-8\/12 {
  width: 66.666667% !important;
}

.\!w-9\/12 {
  width: 75% !important;
}

.\!w-\[132px\] {
  width: 132px !important;
}

.\!w-\[500px\] {
  width: 500px !important;
}

.\!w-auto {
  width: auto !important;
}

.w-0 {
  width: 0px;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-1\/4 {
  width: 25%;
}

.w-1\/5 {
  width: 20%;
}

.w-1\/6 {
  width: 16.666667%;
}

.w-10 {
  width: 2.5rem;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-128 {
  width: 30rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-2\/5 {
  width: 40%;
}

.w-2\/6 {
  width: 33.333333%;
}

.w-20 {
  width: 5rem;
}

.w-22 {
  width: 5.5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/12 {
  width: 33.333333%;
}

.w-4\/5 {
  width: 80%;
}

.w-40 {
  width: 10rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-52 {
  width: 13rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-60 {
  width: 15rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-8\/12 {
  width: 66.666667%;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

.w-\[1\.25rem\] {
  width: 1.25rem;
}

.w-\[100px\] {
  width: 100px;
}

.w-\[104px\] {
  width: 104px;
}

.w-\[112px\] {
  width: 112px;
}

.w-\[120px\] {
  width: 120px;
}

.w-\[175px\] {
  width: 175px;
}

.w-\[180px\] {
  width: 180px;
}

.w-\[185px\] {
  width: 185px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[2\.375rem\] {
  width: 2.375rem;
}

.w-\[200px\] {
  width: 200px;
}

.w-\[220px\] {
  width: 220px;
}

.w-\[224px\] {
  width: 224px;
}

.w-\[240px\] {
  width: 240px;
}

.w-\[246px\] {
  width: 246px;
}

.w-\[252px\] {
  width: 252px;
}

.w-\[260px\] {
  width: 260px;
}

.w-\[264px\] {
  width: 264px;
}

.w-\[280px\] {
  width: 280px;
}

.w-\[30px\] {
  width: 30px;
}

.w-\[320px\] {
  width: 320px;
}

.w-\[32px\] {
  width: 32px;
}

.w-\[370px\] {
  width: 370px;
}

.w-\[375px\] {
  width: 375px;
}

.w-\[38px\] {
  width: 38px;
}

.w-\[390px\] {
  width: 390px;
}

.w-\[3px\] {
  width: 3px;
}

.w-\[4\.5rem\] {
  width: 4.5rem;
}

.w-\[40px\] {
  width: 40px;
}

.w-\[432px\] {
  width: 432px;
}

.w-\[44px\] {
  width: 44px;
}

.w-\[45px\] {
  width: 45px;
}

.w-\[470px\] {
  width: 470px;
}

.w-\[500px\] {
  width: 500px;
}

.w-\[50px\] {
  width: 50px;
}

.w-\[512px\] {
  width: 512px;
}

.w-\[53px\] {
  width: 53px;
}

.w-\[560px\] {
  width: 560px;
}

.w-\[570px\] {
  width: 570px;
}

.w-\[580px\] {
  width: 580px;
}

.w-\[60\%\] {
  width: 60%;
}

.w-\[600px\] {
  width: 600px;
}

.w-\[60px\] {
  width: 60px;
}

.w-\[62px\] {
  width: 62px;
}

.w-\[640px\] {
  width: 640px;
}

.w-\[64px\] {
  width: 64px;
}

.w-\[660px\] {
  width: 660px;
}

.w-\[678px\] {
  width: 678px;
}

.w-\[6px\] {
  width: 6px;
}

.w-\[70\%\] {
  width: 70%;
}

.w-\[75\%\] {
  width: 75%;
}

.w-\[75px\] {
  width: 75px;
}

.w-\[768px\] {
  width: 768px;
}

.w-\[80\%\] {
  width: 80%;
}

.w-\[88px\] {
  width: 88px;
}

.w-\[90\%\] {
  width: 90%;
}

.w-\[943px\] {
  width: 943px;
}

.w-\[calc\(100\%-32px\)\] {
  width: calc(100% - 32px);
}

.w-\[calc\(100\%-3rem\)\] {
  width: calc(100% - 3rem);
}

.w-\[calc\(100dvw-16px\)\] {
  width: calc(100dvw - 16px);
}

.w-\[var\(--content-normal-width\2c auto\)\] {
  width: var(--content-normal-width,auto);
}

.w-\[var\(--ol-picker-width\)\] {
  width: var(--ol-picker-width);
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-min {
  width: -moz-min-content;
  width: min-content;
}

.w-px {
  width: 1px;
}

.w-screen {
  width: 100vw;
}

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

.min-w-10 {
  min-width: 2.5rem;
}

.min-w-12 {
  min-width: 3rem;
}

.min-w-22 {
  min-width: 5.5rem;
}

.min-w-36 {
  min-width: 9rem;
}

.min-w-4 {
  min-width: 1rem;
}

.min-w-44 {
  min-width: 11rem;
}

.min-w-5 {
  min-width: 1.25rem;
}

.min-w-\[10em\] {
  min-width: 10em;
}

.min-w-\[112px\] {
  min-width: 112px;
}

.min-w-\[140px\] {
  min-width: 140px;
}

.min-w-\[160px\] {
  min-width: 160px;
}

.min-w-\[16px\] {
  min-width: 16px;
}

.min-w-\[188px\] {
  min-width: 188px;
}

.min-w-\[2\.375rem\] {
  min-width: 2.375rem;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[208px\] {
  min-width: 208px;
}

.min-w-\[240px\] {
  min-width: 240px;
}

.min-w-\[248px\] {
  min-width: 248px;
}

.min-w-\[260px\] {
  min-width: 260px;
}

.min-w-\[300px\] {
  min-width: 300px;
}

.min-w-\[312px\] {
  min-width: 312px;
}

.min-w-\[3em\] {
  min-width: 3em;
}

.min-w-\[72px\] {
  min-width: 72px;
}

.min-w-\[94px\] {
  min-width: 94px;
}

.min-w-\[calc\(320px\+32px\)\] {
  min-width: calc(320px + 32px);
}

.min-w-full {
  min-width: 100%;
}

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

.\!max-w-\[400px\] {
  max-width: 400px !important;
}

.\!max-w-\[960px\] {
  max-width: 960px !important;
}

.\!max-w-full {
  max-width: 100% !important;
}

.\!max-w-none {
  max-width: none !important;
}

.max-w-0 {
  max-width: 0px;
}

.max-w-20 {
  max-width: 5rem;
}

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

.max-w-3xl {
  max-width: 48rem;
}

.max-w-40 {
  max-width: 10rem;
}

.max-w-48 {
  max-width: 12rem;
}

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

.max-w-5xl {
  max-width: 64rem;
}

.max-w-60 {
  max-width: 15rem;
}

.max-w-64 {
  max-width: 16rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-72 {
  max-width: 18rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-80 {
  max-width: 20rem;
}

.max-w-96 {
  max-width: 24rem;
}

.max-w-\[1024px\] {
  max-width: 1024px;
}

.max-w-\[1264px\] {
  max-width: 1264px;
}

.max-w-\[1280px\] {
  max-width: 1280px;
}

.max-w-\[1680px\] {
  max-width: 1680px;
}

.max-w-\[180px\] {
  max-width: 180px;
}

.max-w-\[188px\] {
  max-width: 188px;
}

.max-w-\[190px\] {
  max-width: 190px;
}

.max-w-\[20px\] {
  max-width: 20px;
}

.max-w-\[21ch\] {
  max-width: 21ch;
}

.max-w-\[240px\] {
  max-width: 240px;
}

.max-w-\[250px\] {
  max-width: 250px;
}

.max-w-\[280px\] {
  max-width: 280px;
}

.max-w-\[300px\] {
  max-width: 300px;
}

.max-w-\[320px\] {
  max-width: 320px;
}

.max-w-\[360px\] {
  max-width: 360px;
}

.max-w-\[375px\] {
  max-width: 375px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[416px\] {
  max-width: 416px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[432px\] {
  max-width: 432px;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[448px\] {
  max-width: 448px;
}

.max-w-\[468px\] {
  max-width: 468px;
}

.max-w-\[472px\] {
  max-width: 472px;
}

.max-w-\[480px\] {
  max-width: 480px;
}

.max-w-\[50\%\] {
  max-width: 50%;
}

.max-w-\[520px\] {
  max-width: 520px;
}

.max-w-\[540px\] {
  max-width: 540px;
}

.max-w-\[560px\] {
  max-width: 560px;
}

.max-w-\[600px\] {
  max-width: 600px;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[64px\] {
  max-width: 64px;
}

.max-w-\[700px\] {
  max-width: 700px;
}

.max-w-\[704px\] {
  max-width: 704px;
}

.max-w-\[768px\] {
  max-width: 768px;
}

.max-w-\[800px\] {
  max-width: 800px;
}

.max-w-\[840px\] {
  max-width: 840px;
}

.max-w-\[90vw\] {
  max-width: 90vw;
}

.max-w-\[960px\] {
  max-width: 960px;
}

.max-w-\[calc\(100dvw-2rem\)\] {
  max-width: calc(100dvw - 2rem);
}

.max-w-\[calc\(100vw-3rem\)\] {
  max-width: calc(100vw - 3rem);
}

.max-w-\[calc\(1280px\+64px\)\] {
  max-width: calc(1280px + 64px);
}

.max-w-\[\2026\] {
  max-width: …;
}

.max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.max-w-full {
  max-width: 100%;
}

.max-w-layout-1000 {
  max-width: 1000px;
}

.max-w-layout-1600 {
  max-width: 1600px;
}

.max-w-layout-540 {
  max-width: 540px;
}

.max-w-layout-640 {
  max-width: 640px;
}

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

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

.max-w-min {
  max-width: -moz-min-content;
  max-width: min-content;
}

.max-w-none {
  max-width: none;
}

.max-w-screen-2lg {
  max-width: 1160px;
}

.max-w-screen-lg {
  max-width: 1024px;
}

.max-w-screen-md {
  max-width: 768px;
}

.max-w-screen-sm {
  max-width: 640px;
}

.max-w-screen-xl {
  max-width: 1264px;
}

.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-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.grow {
  flex-grow: 1;
}

.basis-0 {
  flex-basis: 0px;
}

.basis-3\/5 {
  flex-basis: 60%;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.origin-center {
  transform-origin: center;
}

.origin-top-left {
  transform-origin: top left;
}

.-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-20 {
  --tw-translate-x: -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));
}

.-translate-x-\[100\%\] {
  --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-x-\[calc\(100\%-16px\)\] {
  --tw-translate-x: calc(calc(100% - 16px) * -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));
}

.-translate-x-\[calc\(50\%\+1\.5rem\)\] {
  --tw-translate-x: calc(calc(50% + 1.5rem) * -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));
}

.-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 {
  --tw-translate-y: -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-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-y-full {
  --tw-translate-y: -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-px {
  --tw-translate-y: -1px;
  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\/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-2 {
  --tw-translate-x: 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));
}

.translate-x-4 {
  --tw-translate-x: 1rem;
  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-5 {
  --tw-translate-x: 1.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-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-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-1 {
  --tw-translate-y: 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-5 {
  --tw-translate-y: 1.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-\[calc\(100\%\+2rem\)\] {
  --tw-translate-y: calc(100% + 2rem);
  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-2 {
  --tw-rotate: -2deg;
  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-3 {
  --tw-rotate: -3deg;
  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));
}

.rotate-0 {
  --tw-rotate: 0deg;
  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-1 {
  --tw-rotate: 1deg;
  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-2 {
  --tw-rotate: 2deg;
  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-3 {
  --tw-rotate: 3deg;
  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-90 {
  --tw-rotate: 90deg;
  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-\[16deg\] {
  --tw-rotate: 16deg;
  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-\[4deg\] {
  --tw-rotate: 4deg;
  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-\[5deg\] {
  --tw-rotate: 5deg;
  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-\[8deg\] {
  --tw-rotate: 8deg;
  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-100 {
  --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));
}

.scale-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  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-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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\.58\] {
  --tw-scale-x: 0.58;
  --tw-scale-y: 0.58;
  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\.8\] {
  --tw-scale-x: 0.8;
  --tw-scale-y: 0.8;
  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-x-100 {
  --tw-scale-x: -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));
}

.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));
}

.transform-none {
  transform: none;
}

@keyframes appear-then-fade {
  0% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.animate-appear-then-fade {
  animation: appear-then-fade 3s ease-in-out;
}

@keyframes dialog-avatar-pop {
  0% {
    opacity: 0;
    transform: translateX(calc(-100% + 16px)) rotate(-3deg) scale(0.3);
  }

  70% {
    opacity: 1;
    transform: translateX(calc(-100% + 16px)) rotate(-3deg) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translateX(calc(-100% + 16px)) rotate(-3deg) scale(1);
  }
}

.animate-dialog-avatar-pop {
  animation: dialog-avatar-pop 350ms ease-out 300ms backwards;
}

@keyframes dialog-thumb-pop {
  0% {
    opacity: 0;
    transform: translateX(100%) rotate(4deg) scale(0.3);
  }

  70% {
    opacity: 1;
    transform: translateX(100%) rotate(4deg) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translateX(100%) rotate(4deg) scale(1);
  }
}

.animate-dialog-thumb-pop {
  animation: dialog-thumb-pop 350ms ease-out 430ms backwards;
}

@keyframes otp-shake {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

.animate-otp-shake {
  animation: otp-shake 0.4s ease-in-out;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@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;
}

@keyframes toast-end-animation {
  0% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    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));
    opacity: 1;
  }

  100% {
    --tw-translate-y: 0;
    --tw-translate-x: inherit;
    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));
    opacity: 0;
  }
}

.animate-toast-end-animation {
  animation: toast-end-animation var(--animation-duration, 0.3s) ease-in-out;
}

@keyframes toast-full-animation {
  0% {
    --tw-translate-y: 0;
    --tw-translate-x: inherit;
    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));
    opacity: 0;
  }

  5% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    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));
    opacity: 1;
  }

  95% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    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));
    opacity: 1;
  }

  100% {
    --tw-translate-y: 0;
    --tw-translate-x: inherit;
    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));
    opacity: 0;
  }
}

.animate-toast-full-animation {
  animation: toast-full-animation var(--animation-duration, 4s) ease-in-out;
}

@keyframes toast-partial-animation {
  0% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    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));
    opacity: 1;
  }

  90% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    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));
    opacity: 1;
  }

  100% {
    --tw-translate-y: 0;
    --tw-translate-x: inherit;
    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));
    opacity: 0;
  }
}

.animate-toast-partial-animation {
  animation: toast-partial-animation var(--animation-duration, 2s) ease-in-out;
}

.\!cursor-not-allowed {
  cursor: not-allowed !important;
}

.\!cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

.cursor-grab {
  cursor: grab;
}

.cursor-help {
  cursor: help;
}

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

.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

.touch-manipulation {
  touch-action: manipulation;
}

.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-none {
  resize: none;
}

.resize {
  resize: both;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.scroll-my-4 {
  scroll-margin-top: 1rem;
  scroll-margin-bottom: 1rem;
}

.list-inside {
  list-style-position: inside;
}

.list-outside {
  list-style-position: outside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.columns-\[var\(--column-width\2c _15ch\)_3\] {
  -moz-columns: var(--column-width, 15ch) 3;
       columns: var(--column-width, 15ch) 3;
}

.auto-cols-\[calc\(100\%-32px\)\] {
  grid-auto-columns: calc(100% - 32px);
}

.auto-cols-\[calc\(25\%-12px\)\] {
  grid-auto-columns: calc(25% - 12px);
}

.auto-cols-\[var\(--carousel-item\)\] {
  grid-auto-columns: var(--carousel-item);
}

.auto-cols-fr {
  grid-auto-columns: minmax(0, 1fr);
}

.auto-cols-max {
  grid-auto-columns: max-content;
}

.grid-flow-col {
  grid-auto-flow: column;
}

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

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

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

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

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

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

.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
  grid-template-columns: minmax(0,1fr) auto;
}

.grid-cols-\[minmax\(0\2c 2fr\)_1fr_1fr_auto\] {
  grid-template-columns: minmax(0,2fr) 1fr 1fr auto;
}

.grid-cols-\[repeat\(auto-fill\2c minmax\(calc\(50\%-\.5rem\)\2c 0\.4fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(calc(50% - .5rem),0.4fr));
}

.grid-cols-\[repeat\(auto-fill\2c minmax\(var\(--large-button-min-width\2c 15rem\)\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(var(--large-button-min-width,15rem),1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}

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

.flex-row-reverse {
  flex-direction: row-reverse;
}

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

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-content-center {
  place-content: center;
}

.place-items-center {
  place-items: center;
}

.\!items-start {
  align-items: flex-start !important;
}

.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-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

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

.justify-evenly {
  justify-content: space-evenly;
}

.justify-stretch {
  justify-content: stretch;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-20 {
  gap: 5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-48 {
  gap: 12rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[0\.5rem\] {
  gap: 0.5rem;
}

.gap-\[10px\] {
  gap: 10px;
}

.gap-\[18px\] {
  gap: 18px;
}

.gap-\[3px\] {
  gap: 3px;
}

.gap-\[8px\] {
  gap: 8px;
}

.gap-\[9px\] {
  gap: 9px;
}

.gap-\[var\(--carousel-gap\)\] {
  gap: var(--carousel-gap);
}

.gap-px {
  gap: 1px;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-32 {
  -moz-column-gap: 8rem;
       column-gap: 8rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

.-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-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.625rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.625rem * 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-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-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2.5rem * var(--tw-space-x-reverse));
  margin-left: calc(2.5rem * 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-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-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-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * 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-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * 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-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * 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-7 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * 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));
}

.space-y-\[11px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(11px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(11px * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-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-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
}

.divide-dashed > :not([hidden]) ~ :not([hidden]) {
  border-style: dashed;
}

.divide-dotted > :not([hidden]) ~ :not([hidden]) {
  border-style: dotted;
}

.divide-background-base > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--background-base);
}

.divide-content-border-neutral > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--content-border-neutral);
}

.divide-gray-900 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-divide-opacity, 1));
}

.divide-inherit > :not([hidden]) ~ :not([hidden]) {
  border-color: inherit;
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}

.divide-slate-900 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
}

.divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 0.05;
}

.place-self-end {
  place-self: end;
}

.place-self-center {
  place-self: center;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.overflow-auto {
  overflow: auto;
}

.\!overflow-hidden {
  overflow: hidden !important;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-clip {
  overflow: clip;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.text-clip {
  text-overflow: clip;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.text-wrap {
  text-wrap: wrap;
}

.text-nowrap {
  text-wrap: nowrap;
}

.text-balance {
  text-wrap: balance;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.\!rounded-full {
  border-radius: 9999px !important;
}

.\!rounded-none {
  border-radius: 0 !important;
}

.\!rounded-radius-12 {
  border-radius: 0.75rem !important;
}

.\!rounded-radius-16 {
  border-radius: 1rem !important;
}

.\!rounded-radius-24 {
  border-radius: 1.5rem !important;
}

.\!rounded-radius-32 {
  border-radius: 2rem !important;
}

.\!rounded-radius-4 {
  border-radius: 0.25rem !important;
}

.\!rounded-radius-8 {
  border-radius: 0.5rem !important;
}

.rounded-\[6px\] {
  border-radius: 6px;
}

.rounded-\[var\(--button-border-radius\)\] {
  border-radius: var(--button-border-radius);
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-none {
  border-radius: 0;
}

.rounded-radius-10 {
  border-radius: 0.625rem;
}

.rounded-radius-12 {
  border-radius: 0.75rem;
}

.rounded-radius-16 {
  border-radius: 1rem;
}

.rounded-radius-18 {
  border-radius: 1.125rem;
}

.rounded-radius-2 {
  border-radius: 0.125rem;
}

.rounded-radius-20 {
  border-radius: 1.25rem;
}

.rounded-radius-24 {
  border-radius: 1.5rem;
}

.rounded-radius-28 {
  border-radius: 1.75rem;
}

.rounded-radius-3 {
  border-radius: 0.1875rem;
}

.rounded-radius-30 {
  border-radius: 1.875rem;
}

.rounded-radius-32 {
  border-radius: 2rem;
}

.rounded-radius-36 {
  border-radius: 2.25rem;
}

.rounded-radius-4 {
  border-radius: 0.25rem;
}

.rounded-radius-40 {
  border-radius: 2.5rem;
}

.rounded-radius-5 {
  border-radius: 0.3125rem;
}

.rounded-radius-6 {
  border-radius: 0.375rem;
}

.rounded-radius-60 {
  border-radius: 3.75rem;
}

.rounded-radius-8 {
  border-radius: 0.5rem;
}

.rounded-radius-9 {
  border-radius: 0.5625rem;
}

.\!rounded-b-none {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.\!rounded-t-none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-b-none {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rounded-b-radius-12 {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-b-radius-16 {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-b-radius-24 {
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

.rounded-b-radius-32 {
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
}

.rounded-b-radius-6 {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-b-radius-8 {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-l-radius-12 {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-l-radius-18 {
  border-top-left-radius: 1.125rem;
  border-bottom-left-radius: 1.125rem;
}

.rounded-l-radius-6 {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-l-radius-8 {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.rounded-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rounded-r-radius-12 {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.rounded-r-radius-18 {
  border-top-right-radius: 1.125rem;
  border-bottom-right-radius: 1.125rem;
}

.rounded-r-radius-6 {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-r-radius-8 {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded-t-radius-12 {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-t-radius-16 {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-radius-24 {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.rounded-t-radius-28 {
  border-top-left-radius: 1.75rem;
  border-top-right-radius: 1.75rem;
}

.rounded-t-radius-32 {
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.rounded-t-radius-4 {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-radius-6 {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-t-radius-8 {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.\!rounded-bl-none {
  border-bottom-left-radius: 0 !important;
}

.rounded-bl-full {
  border-bottom-left-radius: 9999px;
}

.rounded-bl-none {
  border-bottom-left-radius: 0;
}

.rounded-bl-radius-24 {
  border-bottom-left-radius: 1.5rem;
}

.rounded-bl-radius-8 {
  border-bottom-left-radius: 0.5rem;
}

.rounded-br-full {
  border-bottom-right-radius: 9999px;
}

.rounded-br-none {
  border-bottom-right-radius: 0;
}

.rounded-br-radius-18 {
  border-bottom-right-radius: 1.125rem;
}

.rounded-br-radius-24 {
  border-bottom-right-radius: 1.5rem;
}

.rounded-br-radius-8 {
  border-bottom-right-radius: 0.5rem;
}

.rounded-tl-full {
  border-top-left-radius: 9999px;
}

.rounded-tl-none {
  border-top-left-radius: 0;
}

.rounded-tl-radius-16 {
  border-top-left-radius: 1rem;
}

.rounded-tl-radius-18 {
  border-top-left-radius: 1.125rem;
}

.rounded-tl-radius-24 {
  border-top-left-radius: 1.5rem;
}

.rounded-tl-radius-32 {
  border-top-left-radius: 2rem;
}

.rounded-tl-radius-8 {
  border-top-left-radius: 0.5rem;
}

.rounded-tr-full {
  border-top-right-radius: 9999px;
}

.rounded-tr-radius-16 {
  border-top-right-radius: 1rem;
}

.rounded-tr-radius-18 {
  border-top-right-radius: 1.125rem;
}

.rounded-tr-radius-32 {
  border-top-right-radius: 2rem;
}

.rounded-tr-radius-8 {
  border-top-right-radius: 0.5rem;
}

.\!border {
  border-width: 1px !important;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-8 {
  border-width: 8px;
}

.border-\[0\.50px\] {
  border-width: 0.50px;
}

.border-\[0\.5px\] {
  border-width: 0.5px;
}

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-\[12px\] {
  border-width: 12px;
}

.border-\[2\.5px\] {
  border-width: 2.5px;
}

.border-\[3px\] {
  border-width: 3px;
}

.\!border-r {
  border-right-width: 1px !important;
}

.\!border-t {
  border-top-width: 1px !important;
}

.border-b {
  border-bottom-width: 1px;
}

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

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b-4 {
  border-bottom-width: 4px;
}

.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-r-2 {
  border-right-width: 2px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-0 {
  border-top-width: 0px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.\!border-none {
  border-style: none !important;
}

.border-none {
  border-style: none;
}

.\!border-brand-secondary-moola {
  border-color: var(--brand-secondary-moola) !important;
}

.\!border-content-border-neutral {
  border-color: var(--content-border-neutral) !important;
}

.\!border-gray-200 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
}

.\!border-red-500 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(232 59 71 / var(--tw-border-opacity, 1)) !important;
}

.border-\[\#342e26\] {
  --tw-border-opacity: 1;
  border-color: rgb(52 46 38 / var(--tw-border-opacity, 1));
}

.border-\[\#e6e6e6\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 230 230 / var(--tw-border-opacity, 1));
}

.border-\[rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  border-color: rgba(0,0,0,0.08);
}

.border-\[rgba\(var\(--base-color-rgb\)\2c 1\)\] {
  border-color: rgba(var(--base-color-rgb),1);
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-background-base {
  border-color: var(--background-base);
}

.border-background-card-bg {
  border-color: var(--background-card);
}

.border-background-disabled {
  border-color: var(--background-disabled);
}

.border-background-elevated {
  border-color: var(--background-elevated);
}

.border-background-neutral {
  border-color: var(--background-neutral);
}

.border-background-overlay {
  border-color: var(--background-overlay);
}

.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}

.border-black\/\[0\.04\] {
  border-color: rgb(0 0 0 / 0.04);
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}

.border-brand-primary-shine {
  border-color: var(--brand-primary-shine);
}

.border-brand-primary-shine-light {
  --tw-border-opacity: 1;
  border-color: rgb(255 237 132 / var(--tw-border-opacity, 1));
}

.border-brand-secondary-moola {
  border-color: var(--brand-secondary-moola);
}

.border-content-border-card {
  border-color: var(--content-border-card);
}

.border-content-border-dark {
  border-color: var(--content-border-dark);
}

.border-content-border-input {
  border-color: var(--content-border-input);
}

.border-content-border-light {
  border-color: var(--content-border-light);
}

.border-content-border-neutral {
  border-color: var(--content-border-neutral);
}

.border-content-focus-outline {
  border-color: var(--content-focus-outline);
}

.border-content-primary {
  border-color: var(--content-primary);
}

.border-content-tertiary {
  border-color: var(--content-tertiary);
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.border-gray-500\/10 {
  border-color: rgb(107 114 128 / 0.1);
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(17 214 129 / var(--tw-border-opacity, 1));
}

.border-green-800 {
  --tw-border-opacity: 1;
  border-color: rgb(14 109 69 / var(--tw-border-opacity, 1));
}

.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.border-inherit {
  border-color: inherit;
}

.border-mint-200 {
  border-color: var(--mint-200);
}

.border-neutral-200\/75 {
  border-color: rgb(229 229 229 / 0.75);
}

.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}

.border-orange-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 239 213 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 220 170 / var(--tw-border-opacity, 1));
}

.border-primary-300 {
  border-color: var(--primary-300);
}

.border-primary-500 {
  border-color: var(--primary-500);
}

.border-primary-600 {
  border-color: var(--primary-600);
}

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(253 227 229 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(252 204 207 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(232 59 71 / var(--tw-border-opacity, 1));
}

.border-richBlack {
  --tw-border-opacity: 1;
  border-color: rgb(11 5 29 / var(--tw-border-opacity, 1));
}

.border-richBlack\/08 {
  border-color: rgb(11 5 29 / .08);
}

.border-richBlack\/12 {
  border-color: rgb(11 5 29 / .12);
}

.border-seafoam-100 {
  --tw-border-opacity: 1;
  border-color: rgb(213 246 227 / var(--tw-border-opacity, 1));
}

.border-sentiment-negative {
  --tw-border-opacity: 1;
  border-color: rgb(149 31 39 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.border-slate-500 {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}

.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}

.border-stone-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1));
}

.border-stone-200 {
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-violet-100 {
  --tw-border-opacity: 1;
  border-color: rgb(237 233 254 / var(--tw-border-opacity, 1));
}

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

.border-yellow-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 247 194 / var(--tw-border-opacity, 1));
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(247 223 174 / var(--tw-border-opacity, 1));
}

.border-l-primary-500 {
  border-left-color: var(--primary-500);
}

.border-t-content-border-neutral {
  border-top-color: var(--content-border-neutral);
}

.border-t-content-primary {
  border-top-color: var(--content-primary);
}

.border-t-transparent {
  border-top-color: transparent;
}

.\!bg-\[\#342E26\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(52 46 38 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-\[\#999999\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(153 153 153 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-\[color-mix\(in_srgb\2c var\(--dominant-color\)_15\%\2c _white\)\] {
  background-color: color-mix(in srgb,var(--dominant-color) 15%, white) !important;
}

.\!bg-\[color\:var\(--base-color\)\] {
  background-color: var(--base-color) !important;
}

.\!bg-\[color\:var\(--button-color\)\] {
  background-color: var(--button-color) !important;
}

.\!bg-background-base {
  background-color: var(--background-base) !important;
}

.\!bg-background-disabled {
  background-color: var(--background-disabled) !important;
}

.\!bg-background-elevated {
  background-color: var(--background-elevated) !important;
}

.\!bg-background-neutral {
  background-color: var(--background-neutral) !important;
}

.\!bg-background-overlay {
  background-color: var(--background-overlay) !important;
}

.\!bg-background-screen {
  background-color: var(--background-screen) !important;
}

.\!bg-brand-primary-shine {
  background-color: var(--brand-primary-shine) !important;
}

.\!bg-brand-secondary-mint {
  background-color: var(--brand-secondary-mint) !important;
}

.\!bg-brand-secondary-moola {
  background-color: var(--brand-secondary-moola) !important;
}

.\!bg-brand-secondary-spice {
  background-color: var(--brand-secondary-spice) !important;
}

.\!bg-content-primary {
  background-color: var(--content-primary) !important;
}

.\!bg-green-100 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(217 255 238 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-red-50 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 242 243 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-sentiment-negative {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-transparent {
  background-color: transparent !important;
}

.\!bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.bg-\[\#342E26\] {
  --tw-bg-opacity: 1;
  background-color: rgb(52 46 38 / var(--tw-bg-opacity, 1));
}

.bg-\[\#342e26\] {
  --tw-bg-opacity: 1;
  background-color: rgb(52 46 38 / var(--tw-bg-opacity, 1));
}

.bg-\[\#3D62D1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(61 98 209 / var(--tw-bg-opacity, 1));
}

.bg-\[\#5338f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(83 56 247 / var(--tw-bg-opacity, 1));
}

.bg-\[\#655AF9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(101 90 249 / var(--tw-bg-opacity, 1));
}

.bg-\[\#B6C9C1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(182 201 193 / var(--tw-bg-opacity, 1));
}

.bg-\[\#DCE7DD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 231 221 / var(--tw-bg-opacity, 1));
}

.bg-\[\#DCE8DD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 232 221 / var(--tw-bg-opacity, 1));
}

.bg-\[\#EFEBFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 235 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F8F5F4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FEEDE4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 237 228 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ffed84\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 132 / var(--tw-bg-opacity, 1));
}

.bg-\[color-mix\(in_srgb\2c var\(--background-base\)_70\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--background-base) 70%,transparent);
}

.bg-\[color\:--code-editor-background\] {
  background-color: var(--code-editor-background);
}

.bg-\[color\:var\(--base-color\)\] {
  background-color: var(--base-color);
}

.bg-\[color\:var\(--button-color\)\] {
  background-color: var(--button-color);
}

.bg-\[color\:var\(--content-sentiment-warning\2c \#D96326\)\] {
  background-color: var(--content-sentiment-warning,#D96326);
}

.bg-\[rgb\(118\2c 176\2c 183\)\]\/\[0\.12\] {
  background-color: rgb(118 176 183 / 0.12);
}

.bg-\[rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  background-color: rgba(0,0,0,0.04);
}

.bg-\[rgba\(243\2c 240\2c 232\2c 0\.12\)\] {
  background-color: rgba(243,240,232,0.12);
}

.bg-\[rgba\(255\2c 255\2c 255\2c 0\.8\)\] {
  background-color: rgba(255,255,255,0.8);
}

.bg-\[rgba\(52\2c 46\2c 38\2c 0\.08\)\] {
  background-color: rgba(52,46,38,0.08);
}

.bg-\[rgba\(var\(--base-color-rgb\)\2c 0\.12\)\] {
  background-color: rgba(var(--base-color-rgb),0.12);
}

.bg-\[rgba\(var\(--base-color-rgb\)\2c 0\.15\)\] {
  background-color: rgba(var(--base-color-rgb),0.15);
}

.bg-\[var\(--bg-fill-danger-hover\)\] {
  background-color: var(--bg-fill-danger-hover);
}

.bg-\[var\(--brand-primary-chocolate\)\] {
  background-color: var(--brand-primary-chocolate);
}

.bg-\[var\(--image-new-color\)\] {
  background-color: var(--image-new-color);
}

.bg-\[var\(--orange-50\2c \#FEEDE4\)\] {
  background-color: var(--orange-50,#FEEDE4);
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.bg-background-base {
  background-color: var(--background-base);
}

.bg-background-disabled {
  background-color: var(--background-disabled);
}

.bg-background-elevated {
  background-color: var(--background-elevated);
}

.bg-background-neutral {
  background-color: var(--background-neutral);
}

.bg-background-overlay {
  background-color: var(--background-overlay);
}

.bg-background-screen {
  background-color: var(--background-screen);
}

.bg-bg-media-overlay-04 {
  background-color: var(--bg-media-overlay-04);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-black\/\[0\.04\] {
  background-color: rgb(0 0 0 / 0.04);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-brand-primary-brew {
  background-color: var(--brand-primary-brew);
}

.bg-brand-primary-crisp {
  background-color: var(--brand-primary-crisp);
}

.bg-brand-primary-shine {
  background-color: var(--brand-primary-shine);
}

.bg-brand-primary-shine-light {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 132 / var(--tw-bg-opacity, 1));
}

.bg-brand-secondary-mint {
  background-color: var(--brand-secondary-mint);
}

.bg-brand-secondary-moola {
  background-color: var(--brand-secondary-moola);
}

.bg-brand-secondary-moola-light {
  --tw-bg-opacity: 1;
  background-color: rgb(38 67 57 / var(--tw-bg-opacity, 1));
}

.bg-brand-secondary-piggy {
  background-color: var(--brand-secondary-piggy);
}

.bg-brand-secondary-spice {
  background-color: var(--brand-secondary-spice);
}

.bg-content-background-modal-overlay {
  background-color: var(--content-background-modal-overlay);
}

.bg-content-border-dark {
  background-color: var(--content-border-dark);
}

.bg-content-border-neutral {
  background-color: var(--content-border-neutral);
}

.bg-content-focus-outline {
  background-color: var(--content-focus-outline);
}

.bg-content-primary {
  background-color: var(--content-primary);
}

.bg-content-secondary {
  background-color: var(--content-secondary);
}

.bg-content-tertiary {
  background-color: var(--content-tertiary);
}

.bg-current {
  background-color: currentColor;
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-grayscale-1 {
  background-color: var(--grayscale-1);
}

.bg-grayscale-10 {
  background-color: var(--grayscale-10);
}

.bg-grayscale-2 {
  background-color: var(--grayscale-2);
}

.bg-grayscale-3 {
  background-color: var(--grayscale-3);
}

.bg-grayscale-4 {
  background-color: var(--grayscale-4);
}

.bg-grayscale-5 {
  background-color: var(--grayscale-5);
}

.bg-grayscale-6 {
  background-color: var(--grayscale-6);
}

.bg-grayscale-7 {
  background-color: var(--grayscale-7);
}

.bg-grayscale-8 {
  background-color: var(--grayscale-8);
}

.bg-grayscale-9 {
  background-color: var(--grayscale-9);
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 255 238 / var(--tw-bg-opacity, 1));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(181 253 220 / var(--tw-bg-opacity, 1));
}

.bg-green-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(123 250 194 / var(--tw-bg-opacity, 1));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 237 159 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 254 246 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 214 129 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 170 113 / var(--tw-bg-opacity, 1));
}

.bg-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 139 84 / var(--tw-bg-opacity, 1));
}

.bg-green-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 109 69 / var(--tw-bg-opacity, 1));
}

.bg-green-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 89 59 / var(--tw-bg-opacity, 1));
}

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

.bg-inherit {
  background-color: inherit;
}

.bg-interactive-control {
  background-color: var(--interactive-control);
}

.bg-interactive-primary {
  background-color: var(--interactive-primary);
}

.bg-interactive-secondary {
  background-color: var(--interactive-secondary);
}

.bg-interactive-tertiary {
  background-color: var(--interactive-tertiary);
}

.bg-isabelline {
  --tw-bg-opacity: 1;
  background-color: rgb(241 237 234 / var(--tw-bg-opacity, 1));
}

.bg-mint-100 {
  background-color: var(--mint-100);
}

.bg-mint-200 {
  background-color: var(--mint-200);
}

.bg-mint-300 {
  background-color: var(--mint-300);
}

.bg-mint-400 {
  background-color: var(--mint-400);
}

.bg-mint-50 {
  background-color: var(--mint-50);
}

.bg-mint-500 {
  background-color: var(--mint-500);
}

.bg-mint-600 {
  background-color: var(--mint-600);
}

.bg-mint-700 {
  background-color: var(--mint-700);
}

.bg-mint-800 {
  background-color: var(--mint-800);
}

.bg-mint-900 {
  background-color: var(--mint-900);
}

.bg-mint-950 {
  background-color: var(--mint-950);
}

.bg-neutral-100\/80 {
  background-color: rgb(245 245 245 / 0.8);
}

.bg-neutral-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}

.bg-neutral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(163 163 163 / var(--tw-bg-opacity, 1));
}

.bg-offWhite {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 239 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 102 13 / var(--tw-bg-opacity, 1));
}

.bg-orange-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(153 60 19 / var(--tw-bg-opacity, 1));
}

.bg-powderBlue\/30 {
  background-color: rgb(220 229 240 / 0.3);
}

.bg-primary-200 {
  background-color: var(--primary-200);
}

.bg-primary-400 {
  background-color: var(--primary-400);
}

.bg-primary-500 {
  background-color: var(--primary-500);
}

.bg-primary-600 {
  background-color: var(--primary-600);
}

.bg-primary-700 {
  background-color: var(--primary-700);
}

.bg-primary-800 {
  background-color: var(--primary-800);
}

.bg-primary-900 {
  background-color: var(--primary-900);
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 227 229 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 243 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(232 59 71 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(214 44 56 / var(--tw-bg-opacity, 1));
}

.bg-richBlack {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
}

.bg-richBlack\/04 {
  background-color: rgb(11 5 29 / .04);
}

.bg-richBlack\/10 {
  background-color: rgb(11 5 29 / 0.1);
}

.bg-richBlack\/12 {
  background-color: rgb(11 5 29 / .12);
}

.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.bg-seafoam-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 231 193 / var(--tw-bg-opacity, 1));
}

.bg-seafoam-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 251 244 / var(--tw-bg-opacity, 1));
}

.bg-seafoam-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(33 168 117 / var(--tw-bg-opacity, 1));
}

.bg-seafoam-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(19 136 95 / var(--tw-bg-opacity, 1));
}

.bg-sentiment-negative {
  --tw-bg-opacity: 1;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1));
}

.bg-sentiment-positive {
  --tw-bg-opacity: 1;
  background-color: rgb(14 109 69 / var(--tw-bg-opacity, 1));
}

.bg-sentiment-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(217 99 38 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.bg-spice-100 {
  background-color: var(--spice-100);
}

.bg-spice-200 {
  background-color: var(--spice-200);
}

.bg-spice-300 {
  background-color: var(--spice-300);
}

.bg-spice-400 {
  background-color: var(--spice-400);
}

.bg-spice-500 {
  background-color: var(--spice-500);
}

.bg-spice-600 {
  background-color: var(--spice-600);
}

.bg-spice-700 {
  background-color: var(--spice-700);
}

.bg-spice-800 {
  background-color: var(--spice-800);
}

.bg-spice-900 {
  background-color: var(--spice-900);
}

.bg-spice-950 {
  background-color: var(--spice-950);
}

.bg-stone-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
}

.bg-stone-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
}

.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}

.bg-stone-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}

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

.bg-violet-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
}

.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}

.bg-violet-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}

.bg-violet-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / 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\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

.bg-whiteSmoke {
  --tw-bg-opacity: 1;
  background-color: rgb(238 232 229 / var(--tw-bg-opacity, 1));
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 194 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 244 228 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 157 32 / var(--tw-bg-opacity, 1));
}

.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}

.bg-opacity-25 {
  --tw-bg-opacity: 0.25;
}

.bg-opacity-60 {
  --tw-bg-opacity: 0.6;
}

.\!bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}

.bg-\[linear-gradient\(180deg\2c _\#F3FCF1_0\%\2c _\#EEFBF4_100\%\)\] {
  background-image: linear-gradient(180deg, #F3FCF1 0%, #EEFBF4 100%);
}

.bg-\[linear-gradient\(180deg\2c rgba\(245\2c 245\2c 245\2c 1\)_0\%\2c rgba\(255\2c 255\2c 255\2c 1\)_31\.02\%\)\] {
  background-image: linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(255,255,255,1) 31.02%);
}

.bg-\[radial-gradient\(\.\.\.\)\] {
  background-image: radial-gradient(...);
}

.bg-\[radial-gradient\(circle_at_bottom_left\2c transparent_28px\2c theme\(colors\.red\.800\)_28px\)\] {
  background-image: radial-gradient(circle at bottom left,transparent 28px,#951f27 28px);
}

.bg-\[radial-gradient\(circle_at_bottom_left\2c transparent_28px\2c var\(--content-primary\)_28px\)\] {
  background-image: radial-gradient(circle at bottom left,transparent 28px,var(--content-primary) 28px);
}

.bg-\[radial-gradient\(circle_at_bottom_right\2c transparent_28px\2c theme\(colors\.red\.800\)_28px\)\] {
  background-image: radial-gradient(circle at bottom right,transparent 28px,#951f27 28px);
}

.bg-\[radial-gradient\(circle_at_bottom_right\2c transparent_28px\2c var\(--content-primary\)_28px\)\] {
  background-image: radial-gradient(circle at bottom right,transparent 28px,var(--content-primary) 28px);
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-none {
  background-image: none;
}

.\!from-yellow-200 {
  --tw-gradient-from: #f7dfae var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 223 174 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-\[\#5FB694\] {
  --tw-gradient-from: #5FB694 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(95 182 148 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#8BA85C\] {
  --tw-gradient-from: #8BA85C var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 168 92 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#8FB8C9\] {
  --tw-gradient-from: #8FB8C9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(143 184 201 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#B6A2C6\] {
  --tw-gradient-from: #B6A2C6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(182 162 198 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#BED1C9\] {
  --tw-gradient-from: #BED1C9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(190 209 201 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#C7C07E\] {
  --tw-gradient-from: #C7C07E var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(199 192 126 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#DED6FF\] {
  --tw-gradient-from: #DED6FF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(222 214 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#E08C7E\] {
  --tw-gradient-from: #E08C7E var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(224 140 126 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#E6A55C\] {
  --tw-gradient-from: #E6A55C var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(230 165 92 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#EEFBF4\] {
  --tw-gradient-from: #EEFBF4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 251 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#EFF9FB\] {
  --tw-gradient-from: #EFF9FB var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 249 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#F8712B\] {
  --tw-gradient-from: #F8712B var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#FFED84\] {
  --tw-gradient-from: #FFED84 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 237 132 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[rgba\(var\(--base-color-rgb\)\2c 0\.2\)\] {
  --tw-gradient-from: rgba(var(--base-color-rgb),0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(var(--base-color-rgb), 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-brand-primary-shine {
  --tw-gradient-from: var(--brand-primary-shine) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-brand-secondary-moola {
  --tw-gradient-from: var(--brand-secondary-moola) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-content-tertiary {
  --tw-gradient-from: var(--content-tertiary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-500 {
  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-700 {
  --tw-gradient-from: var(--primary-700) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-900 {
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-richBlack\/0 {
  --tw-gradient-from: rgb(11 5 29 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 5 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary-200 {
  --tw-gradient-from: var(--secondary-200) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-200 {
  --tw-gradient-from: #f7dfae var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 223 174 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-20\% {
  --tw-gradient-from-position: 20%;
}

.from-\[0\.71\%\] {
  --tw-gradient-from-position: 0.71%;
}

.via-\[\#FEF3F2\] {
  --tw-gradient-to: rgb(254 243 242 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #FEF3F2 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-content-primary {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--content-primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-\[6\.15\%\] {
  --tw-gradient-via-position: 6.15%;
}

.\!to-neutral-300 {
  --tw-gradient-to: #d4d4d4 var(--tw-gradient-to-position) !important;
}

.to-\[\#2E8A6C\] {
  --tw-gradient-to: #2E8A6C var(--tw-gradient-to-position);
}

.to-\[\#4A6B2E\] {
  --tw-gradient-to: #4A6B2E var(--tw-gradient-to-position);
}

.to-\[\#5C8A9C\] {
  --tw-gradient-to: #5C8A9C var(--tw-gradient-to-position);
}

.to-\[\#709186\] {
  --tw-gradient-to: #709186 var(--tw-gradient-to-position);
}

.to-\[\#8A789C\] {
  --tw-gradient-to: #8A789C var(--tw-gradient-to-position);
}

.to-\[\#937DF2\] {
  --tw-gradient-to: #937DF2 var(--tw-gradient-to-position);
}

.to-\[\#969150\] {
  --tw-gradient-to: #969150 var(--tw-gradient-to-position);
}

.to-\[\#C87B2E\] {
  --tw-gradient-to: #C87B2E var(--tw-gradient-to-position);
}

.to-\[\#CB5F4F\] {
  --tw-gradient-to: #CB5F4F var(--tw-gradient-to-position);
}

.to-\[\#D5F6E3\] {
  --tw-gradient-to: #D5F6E3 var(--tw-gradient-to-position);
}

.to-\[\#F8F5F4\] {
  --tw-gradient-to: #F8F5F4 var(--tw-gradient-to-position);
}

.to-\[\#FBA67A\] {
  --tw-gradient-to: #FBA67A var(--tw-gradient-to-position);
}

.to-\[\#FCC713\] {
  --tw-gradient-to: #FCC713 var(--tw-gradient-to-position);
}

.to-brand-secondary-mint {
  --tw-gradient-to: var(--brand-secondary-mint) var(--tw-gradient-to-position);
}

.to-content-tertiary {
  --tw-gradient-to: var(--content-tertiary) var(--tw-gradient-to-position);
}

.to-neutral-300 {
  --tw-gradient-to: #d4d4d4 var(--tw-gradient-to-position);
}

.to-orange-800 {
  --tw-gradient-to: #993c13 var(--tw-gradient-to-position);
}

.to-primary-400 {
  --tw-gradient-to: var(--primary-400) var(--tw-gradient-to-position);
}

.to-primary-600 {
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}

.to-primary-800 {
  --tw-gradient-to: var(--primary-800) var(--tw-gradient-to-position);
}

.to-richBlack\/\[0\.04\] {
  --tw-gradient-to: rgb(11 5 29 / 0.04) var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-white\/0 {
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
}

.to-\[15\.02\%\] {
  --tw-gradient-to-position: 15.02%;
}

.bg-cover {
  background-size: cover;
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.fill-content-primary {
  fill: var(--content-primary);
}

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}

.\!stroke-\[4px\] {
  stroke-width: 4px !important;
}

.stroke-2 {
  stroke-width: 2;
}

.\!object-contain {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-left {
  -o-object-position: left;
     object-position: left;
}

.\!p-0 {
  padding: 0px !important;
}

.\!p-2 {
  padding: 0.5rem !important;
}

.\!p-2\.5 {
  padding: 0.625rem !important;
}

.\!p-4 {
  padding: 1rem !important;
}

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

.p-0 {
  padding: 0px;
}

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

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-16 {
  padding: 4rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-20 {
  padding: 5rem;
}

.p-24 {
  padding: 6rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-9 {
  padding: 2.25rem;
}

.p-\[0\.15rem\] {
  padding: 0.15rem;
}

.p-\[18px\] {
  padding: 18px;
}

.p-\[3px\] {
  padding: 3px;
}

.p-\[9px\] {
  padding: 9px;
}

.p-px {
  padding: 1px;
}

.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.\!px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.\!px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

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

.\!py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

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

.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-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-11 {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

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

.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-20 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.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-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

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

.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}

.px-\[4\.5px\] {
  padding-left: 4.5px;
  padding-right: 4.5px;
}

.px-\[5px\] {
  padding-left: 5px;
  padding-right: 5px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.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-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

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

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

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

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.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-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[104px\] {
  padding-top: 104px;
  padding-bottom: 104px;
}

.py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-\[30px\] {
  padding-top: 30px;
  padding-bottom: 30px;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[5\.5px\] {
  padding-top: 5.5px;
  padding-bottom: 5.5px;
}

.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.\!pb-0 {
  padding-bottom: 0px !important;
}

.\!pb-5 {
  padding-bottom: 1.25rem !important;
}

.\!pb-8 {
  padding-bottom: 2rem !important;
}

.\!pt-12 {
  padding-top: 3rem !important;
}

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

.pb-0 {
  padding-bottom: 0px;
}

.pb-0\.5 {
  padding-bottom: 0.125rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-32 {
  padding-bottom: 8rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-7 {
  padding-bottom: 1.75rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-\[104px\] {
  padding-bottom: 104px;
}

.pb-\[10px\] {
  padding-bottom: 10px;
}

.pb-\[40px\] {
  padding-bottom: 40px;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-1\.5 {
  padding-left: 0.375rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-11 {
  padding-left: 2.75rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-16 {
  padding-left: 4rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-2\.5 {
  padding-left: 0.625rem;
}

.pl-20 {
  padding-left: 5rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-3\.5 {
  padding-left: 0.875rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-7 {
  padding-left: 1.75rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pr-0 {
  padding-right: 0px;
}

.pr-0\.5 {
  padding-right: 0.125rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-1\.5 {
  padding-right: 0.375rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-11 {
  padding-right: 2.75rem;
}

.pr-16 {
  padding-right: 4rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-2\.5 {
  padding-right: 0.625rem;
}

.pr-20 {
  padding-right: 5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-3\.5 {
  padding-right: 0.875rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-7 {
  padding-right: 1.75rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pr-9 {
  padding-right: 2.25rem;
}

.pr-\[58px\] {
  padding-right: 58px;
}

.pr-\[64px\] {
  padding-right: 64px;
}

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

.pt-0\.5 {
  padding-top: 0.125rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

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

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

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

.pt-7 {
  padding-top: 1.75rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-\[4\.5rem\] {
  padding-top: 4.5rem;
}

.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-sans {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-\[\'Media_Sans\'\] {
  font-family: 'Media Sans';
}

.font-\[\'Media_Sans_Semi-Condensed\'\] {
  font-family: 'Media Sans Semi-Condensed';
}

.font-\[\'aktiv-grotesk\'\] {
  font-family: 'aktiv-grotesk';
}

.font-\[system-ui\2c -apple-system\2c \'Segoe_UI\'\2c Roboto\2c sans-serif\] {
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

.font-display {
  font-family: Media Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-display-semi-condensed {
  font-family: Media Sans Semi-Condensed, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-inter {
  font-family: Inter;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-northwell_alt {
  font-family: Northwell Alt;
}

.font-sans {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.\!text-\[32px\] {
  font-size: 32px !important;
}

.\!text-base {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: 0 !important;
}

.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  letter-spacing: 0 !important;
}

.text-13 {
  font-size: 0.8125rem;
  line-height: 1.33;
  letter-spacing: 0;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.0294rem;
}

.text-2xs {
  font-size: 0.6875rem;
  line-height: 1.33;
  letter-spacing: 0;
}

.text-3xl {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.0431rem;
}

.text-3xs {
  font-size: 0.5rem;
  line-height: 1.33;
  letter-spacing: 0;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.0375rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: -0.06rem;
}

.text-6xl {
  font-size: 3.5rem;
  line-height: 1.2;
  letter-spacing: -0.1138rem;
}

.text-7xl {
  font-size: 5rem;
  line-height: 1.2;
  letter-spacing: -0.1625rem;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: -0.195rem;
}

.text-\[0\.65rem\] {
  font-size: 0.65rem;
}

.text-\[0\.75rem\] {
  font-size: 0.75rem;
}

.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[21px\] {
  font-size: 21px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[34px\] {
  font-size: 34px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[72px\] {
  font-size: 72px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.0113rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.text-xl {
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.02rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
}

.\!font-bold {
  font-weight: 700 !important;
}

.\!font-normal {
  font-weight: 400 !important;
}

.font-\[400\] {
  font-weight: 400;
}

.font-\[600\] {
  font-weight: 600;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

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

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.proportional-nums {
  --tw-numeric-spacing: proportional-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.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-\[1\.125\] {
  line-height: 1.125 !important;
}

.leading-10 {
  line-height: 2.5rem;
}

.leading-110 {
  line-height: 1.1;
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-9 {
  line-height: 2.25rem;
}

.leading-\[1\.14\] {
  line-height: 1.14;
}

.leading-\[1\.15\] {
  line-height: 1.15;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.33\] {
  line-height: 1.33;
}

.leading-\[1\.3\] {
  line-height: 1.3;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.leading-\[110\%\] {
  line-height: 110%;
}

.leading-\[120\%\] {
  line-height: 120%;
}

.leading-\[12px\] {
  line-height: 12px;
}

.leading-\[130\%\] {
  line-height: 130%;
}

.leading-\[133\%\] {
  line-height: 133%;
}

.leading-\[140\%\] {
  line-height: 140%;
}

.leading-\[150\%\] {
  line-height: 150%;
}

.leading-\[2\.5rem\] {
  line-height: 2.5rem;
}

.leading-\[21px\] {
  line-height: 21px;
}

.leading-\[24px\] {
  line-height: 24px;
}

.leading-\[30px\] {
  line-height: 30px;
}

.leading-\[48px\] {
  line-height: 48px;
}

.leading-loose {
  line-height: 2;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.33;
}

.leading-tight {
  line-height: 1.2;
}

.\!tracking-normal {
  letter-spacing: 0em !important;
}

.\!tracking-tight-4 {
  letter-spacing: -0.04rem !important;
}

.tracking-\[-0\.32px\] {
  letter-spacing: -0.32px;
}

.tracking-\[-0\.64px\] {
  letter-spacing: -0.64px;
}

.tracking-\[-0\.96px\] {
  letter-spacing: -0.96px;
}

.tracking-\[-2px\] {
  letter-spacing: -2px;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-\[0\.3px\] {
  letter-spacing: 0.3px;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-tight-1 {
  letter-spacing: -0.01rem;
}

.tracking-tight-10 {
  letter-spacing: -0.1625rem;
}

.tracking-tight-2 {
  letter-spacing: -0.02rem;
}

.tracking-tight-3 {
  letter-spacing: -0.03rem;
}

.tracking-tight-4 {
  letter-spacing: -0.04rem;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.\!text-\[color\:var\(--brand-primary\)\] {
  color: var(--brand-primary) !important;
}

.\!text-\[color\:var\(--main-text-color\)\] {
  color: var(--main-text-color) !important;
}

.\!text-\[color\:var\(--secondary-brand-color\)\] {
  color: var(--secondary-brand-color) !important;
}

.\!text-background-base {
  color: var(--background-base) !important;
}

.\!text-background-elevated {
  color: var(--background-elevated) !important;
}

.\!text-black {
  --tw-text-opacity: 1 !important;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}

.\!text-brand-primary-brew {
  color: var(--brand-primary-brew) !important;
}

.\!text-brand-secondary-moola {
  color: var(--brand-secondary-moola) !important;
}

.\!text-content-primary {
  color: var(--content-primary) !important;
}

.\!text-content-tertiary {
  color: var(--content-tertiary) !important;
}

.\!text-red-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(232 59 71 / var(--tw-text-opacity, 1)) !important;
}

.\!text-sentiment-negative {
  --tw-text-opacity: 1 !important;
  color: rgb(149 31 39 / var(--tw-text-opacity, 1)) !important;
}

.\!text-sentiment-positive {
  --tw-text-opacity: 1 !important;
  color: rgb(14 109 69 / var(--tw-text-opacity, 1)) !important;
}

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

.text-\[\#0F6D4E\] {
  --tw-text-opacity: 1;
  color: rgb(15 109 78 / var(--tw-text-opacity, 1));
}

.text-\[\#30313d\] {
  --tw-text-opacity: 1;
  color: rgb(48 49 61 / var(--tw-text-opacity, 1));
}

.text-\[\#342e26\] {
  --tw-text-opacity: 1;
  color: rgb(52 46 38 / var(--tw-text-opacity, 1));
}

.text-\[\#6F7071\] {
  --tw-text-opacity: 1;
  color: rgb(111 112 113 / var(--tw-text-opacity, 1));
}

.text-\[\#6d6e78\] {
  --tw-text-opacity: 1;
  color: rgb(109 110 120 / var(--tw-text-opacity, 1));
}

.text-\[\#76B0B7\] {
  --tw-text-opacity: 1;
  color: rgb(118 176 183 / var(--tw-text-opacity, 1));
}

.text-\[\#D19D20\] {
  --tw-text-opacity: 1;
  color: rgb(209 157 32 / var(--tw-text-opacity, 1));
}

.text-\[color\:var\(--base-color\)\] {
  color: var(--base-color);
}

.text-\[color\:var\(--button-color\)\] {
  color: var(--button-color);
}

.text-\[color\:var\(--content-sentiment-warning\2c \#D96326\)\] {
  color: var(--content-sentiment-warning,#D96326);
}

.text-\[rgba\(var\(--base-color-rgb\)\2c 0\.85\)\] {
  color: rgba(var(--base-color-rgb),0.85);
}

.text-\[var\(--brand-primary-chocolate\)\] {
  color: var(--brand-primary-chocolate);
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-background-base {
  color: var(--background-base);
}

.text-background-elevated {
  color: var(--background-elevated);
}

.text-base-white {
  color: var(--white);
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-brand-primary-brew-light\/40 {
  color: rgb(52 46 38 / 0.4);
}

.text-brand-primary-crisp {
  color: var(--brand-primary-crisp);
}

.text-brand-primary-shine {
  color: var(--brand-primary-shine);
}

.text-brand-secondary-mint {
  color: var(--brand-secondary-mint);
}

.text-brand-secondary-moola {
  color: var(--brand-secondary-moola);
}

.text-brand-secondary-moola-light {
  --tw-text-opacity: 1;
  color: rgb(38 67 57 / var(--tw-text-opacity, 1));
}

.text-brand-secondary-spice {
  color: var(--brand-secondary-spice);
}

.text-content-border-neutral {
  color: var(--content-border-neutral);
}

.text-content-primary {
  color: var(--content-primary);
}

.text-content-primary-inverse {
  color: var(--content-primary-inverse);
}

.text-content-secondary {
  color: var(--content-secondary);
}

.text-content-tertiary {
  color: var(--content-tertiary);
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-grayscale-7 {
  color: var(--grayscale-7);
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(17 214 129 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(79 170 113 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(10 139 84 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(14 109 69 / var(--tw-text-opacity, 1));
}

.text-inherit {
  color: inherit;
}

.text-interactive-control {
  color: var(--interactive-control);
}

.text-interactive-primary {
  color: var(--interactive-primary);
}

.text-interactive-secondary {
  color: var(--interactive-secondary);
}

.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}

.text-offWhite {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(236 102 13 / var(--tw-text-opacity, 1));
}

.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.text-primary-400 {
  color: var(--primary-400);
}

.text-primary-500 {
  color: var(--primary-500);
}

.text-primary-600 {
  color: var(--primary-600);
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(232 59 71 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(214 44 56 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(180 33 43 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(149 31 39 / var(--tw-text-opacity, 1));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(124 32 38 / var(--tw-text-opacity, 1));
}

.text-richBlack {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.text-richBlack\/32 {
  color: rgb(11 5 29 / .32);
}

.text-richBlack\/36 {
  color: rgb(11 5 29 / .36);
}

.text-richBlack\/64 {
  color: rgb(11 5 29 / .64);
}

.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.text-rose-900 {
  --tw-text-opacity: 1;
  color: rgb(136 19 55 / var(--tw-text-opacity, 1));
}

.text-seafoam-500 {
  --tw-text-opacity: 1;
  color: rgb(33 168 117 / var(--tw-text-opacity, 1));
}

.text-seafoam-600 {
  --tw-text-opacity: 1;
  color: rgb(19 136 95 / var(--tw-text-opacity, 1));
}

.text-secondary-300 {
  color: var(--secondary-300);
}

.text-secondary-500 {
  color: var(--secondary-500);
}

.text-secondary-700 {
  color: var(--secondary-700);
}

.text-sentiment-negative {
  --tw-text-opacity: 1;
  color: rgb(149 31 39 / var(--tw-text-opacity, 1));
}

.text-sentiment-positive {
  --tw-text-opacity: 1;
  color: rgb(14 109 69 / var(--tw-text-opacity, 1));
}

.text-sentiment-warning {
  --tw-text-opacity: 1;
  color: rgb(217 99 38 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-50 {
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.text-stone-300 {
  --tw-text-opacity: 1;
  color: rgb(214 211 209 / var(--tw-text-opacity, 1));
}

.text-stone-400 {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.text-stone-500 {
  --tw-text-opacity: 1;
  color: rgb(120 113 108 / var(--tw-text-opacity, 1));
}

.text-stone-600 {
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1));
}

.text-stone-700 {
  --tw-text-opacity: 1;
  color: rgb(68 64 60 / var(--tw-text-opacity, 1));
}

.text-stone-900 {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

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

.text-white\/64 {
  color: rgb(255 255 255 / .64);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(181 123 25 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(145 89 23 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(120 71 27 / var(--tw-text-opacity, 1));
}

.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}

.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}

.\!underline {
  text-decoration-line: underline !important;
}

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

.overline {
  text-decoration-line: overline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.decoration-\[\#9CE7C1\] {
  text-decoration-color: #9CE7C1;
}

.decoration-background-elevated {
  text-decoration-color: var(--background-elevated);
}

.decoration-content-border-neutral {
  text-decoration-color: var(--content-border-neutral);
}

.decoration-content-focus-outline {
  text-decoration-color: var(--content-focus-outline);
}

.decoration-content-secondary {
  text-decoration-color: var(--content-secondary);
}

.decoration-content-tertiary {
  text-decoration-color: var(--content-tertiary);
}

.decoration-green-600 {
  text-decoration-color: #4FAA71;
}

.decoration-solid {
  text-decoration-style: solid;
}

.decoration-dotted {
  text-decoration-style: dotted;
}

.decoration-1 {
  text-decoration-thickness: 1px;
}

.decoration-2 {
  text-decoration-thickness: 2px;
}

.decoration-\[1\.5px\] {
  text-decoration-thickness: 1.5px;
}

.underline-offset-1 {
  text-underline-offset: 1px;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.underline-offset-\[10px\] {
  text-underline-offset: 10px;
}

.underline-offset-\[3px\] {
  text-underline-offset: 3px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-red-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(232 59 71 / var(--tw-placeholder-opacity, 1));
}

.placeholder-red-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(232 59 71 / var(--tw-placeholder-opacity, 1));
}

.\!opacity-0 {
  opacity: 0 !important;
}

.\!opacity-20 {
  opacity: 0.2 !important;
}

.opacity-0 {
  opacity: 0;
}

.opacity-08 {
  opacity: .08;
}

.opacity-100 {
  opacity: 1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.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-\[\.24\] {
  opacity: .24;
}

.opacity-\[0\.64\] {
  opacity: 0.64;
}

.opacity-\[0\.72\] {
  opacity: 0.72;
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

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

.\!shadow-sm {
  --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06) !important;
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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-\[-6px_8px_0px_0px_rgba\(var\(--base-color-rgb\)\2c 1\)\] {
  --tw-shadow: -6px 8px 0px 0px rgba(var(--base-color-rgb),1);
  --tw-shadow-colored: -6px 8px 0px 0px 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-\[0_4px_8px_0_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
  --tw-shadow-colored: 0 4px 8px 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-\[0_8px_24px_0_rgba\(0\2c 0\2c 0\2c 0\.10\)\2c _0_0_0_1px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
  --tw-shadow: 0 8px 24px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.02);
  --tw-shadow-colored: 0 8px 24px 0 var(--tw-shadow-color), 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-\[0px_-1px_15px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\2c 0px_2px_4px_0px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c inset_0px_0px_0px_1px_rgba\(52\2c 46\2c 38\2c 0\.08\)\] {
  --tw-shadow: 0px -1px 15px 0px rgba(0,0,0,0.04),0px 2px 4px 0px rgba(0,0,0,0.06),inset 0px 0px 0px 1px rgba(52,46,38,0.08);
  --tw-shadow-colored: 0px -1px 15px 0px var(--tw-shadow-color), 0px 2px 4px 0px var(--tw-shadow-color), inset 0px 0px 0px 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-\[0px_0\.5px_0\.5px_0px_rgba\(255\2c 255\2c 255\2c 0\.25\)_inset\2c 0px_-0\.5px_0\.5px_0px_rgba\(0\2c 0\2c 0\2c 0\.25\)_inset\] {
  --tw-shadow: 0px 0.5px 0.5px 0px rgba(255,255,255,0.25) inset,0px -0.5px 0.5px 0px rgba(0,0,0,0.25) inset;
  --tw-shadow-colored: inset 0px 0.5px 0.5px 0px var(--tw-shadow-color), inset 0px -0.5px 0.5px 0px 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-\[0px_0px_0px_0px_rgba\(0\2c 0\2c 0\2c 0\.00\)\2c 0px_0px_0px_0px_rgba\(0\2c 0\2c 0\2c 0\.00\)\2c 0px_0px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\2c 0px_8px_28px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0.00),0px 0px 0px 0px rgba(0,0,0,0.00),0px 0px 6px 0px rgba(0,0,0,0.05),0px 8px 28px 0px rgba(0,0,0,0.05);
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 6px 0px var(--tw-shadow-color), 0px 8px 28px 0px 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-\[0px_0px_0px_1px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
  --tw-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02);
  --tw-shadow-colored: 0px 0px 0px 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-\[0px_0px_0px_1px_rgba\(52\2c 46\2c 38\2c 0\.44\)\2c 0px_0px_0px_4px_rgba\(11\2c 5\2c 29\2c 0\.16\)\] {
  --tw-shadow: 0px 0px 0px 1px rgba(52,46,38,0.44),0px 0px 0px 4px rgba(11,5,29,0.16);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 0px 0px 4px 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-\[0px_0px_0px_4px_rgba\(136\2c 168\2c 156\2c 0\.32\)\] {
  --tw-shadow: 0px 0px 0px 4px rgba(136,168,156,0.32);
  --tw-shadow-colored: 0px 0px 0px 4px 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-\[0px_0px_2px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0px 0px 2px 0px rgba(0,0,0,0.05);
  --tw-shadow-colored: 0px 0px 2px 0px 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-\[0px_1px_2px_0px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 1px 2px 0px 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-\[0px_1px_2px_0px_rgba\(11\2c 5\2c 29\2c 0\.12\)\] {
  --tw-shadow: 0px 1px 2px 0px rgba(11,5,29,0.12);
  --tw-shadow-colored: 0px 1px 2px 0px 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-\[0px_1px_4px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0px 1px 4px 0px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px 1px 4px 0px 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-\[0px_2px_4px_0px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px 2px 4px 0px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 2px 4px 0px 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-\[0px_2px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: 0px 2px 6px 0px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0px 2px 6px 0px 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-\[0px_2px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px 2px 6px 0px 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-\[0px_4px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
  --tw-shadow: 0px 4px 6px 0px rgba(0,0,0,0.02);
  --tw-shadow-colored: 0px 4px 6px 0px 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-\[0px_4px_8px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: 0px 4px 8px 0px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0px 4px 8px 0px 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-\[0px_4px_8px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 4px 8px 0px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 4px 8px 0px 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-\[0px_8px_24px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 8px 24px 0px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 8px 24px 0px 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-\[0px_8px_28px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 8px 28px 0px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 8px 28px 0px 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_0px_0px_0px_2px_rgba\(52\2c 46\2c 38\2c 1\.00\)\] {
  --tw-shadow: inset 0px 0px 0px 2px rgba(52,46,38,1.00);
  --tw-shadow-colored: inset 0px 0px 0px 2px 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_0px_0px_0px_2px_var\(--content-primary\2c rgba\(52\2c 46\2c 38\2c 1\.00\)\)\] {
  --tw-shadow: inset 0px 0px 0px 2px var(--content-primary,rgba(52,46,38,1.00));
  --tw-shadow-colored: inset 0px 0px 0px 2px 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-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 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: 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 8px 28px 0px rgba(0,0,0, 0.16);;
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 8px 28px 0px 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-md {
  --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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-menu {
  --tw-shadow: 0px 20px 80px 0px rgba(52, 46, 38, 0.08), 0px 7.3px 29.2px 0px rgba(52, 46, 38, 0.05), 0px 3.5px 14.2px 0px rgba(52, 46, 38, 0.04), 0px 1.7px 6.9px 0px rgba(52, 46, 38, 0.03), 0px 0.7px 2.7px 0px rgba(52, 46, 38, 0.02);
  --tw-shadow-colored: 0px 20px 80px 0px var(--tw-shadow-color), 0px 7.3px 29.2px 0px var(--tw-shadow-color), 0px 3.5px 14.2px 0px var(--tw-shadow-color), 0px 1.7px 6.9px 0px var(--tw-shadow-color), 0px 0.7px 2.7px 0px 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-modal {
  --tw-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
  --tw-shadow-colored: 0px 4px 24px 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-none {
  --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: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0px 2px 8px 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-toast {
  --tw-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 10px 15px -3px rgba(0, 0, 0, 0.08), 0px 4px 6px -4px rgba(0, 0, 0, 0.08);
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 10px 15px -3px var(--tw-shadow-color), 0px 4px 6px -4px 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-xl {
  --tw-shadow: 0 16px 30px 0 rgba(0, 0, 0, 0.00);
  --tw-shadow-colored: 0 16px 30px 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-slate-900 {
  --tw-shadow-color: #0f172a;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-white {
  --tw-shadow-color: #fff;
  --tw-shadow: var(--tw-shadow-colored);
}

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

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

.outline {
  outline-style: solid;
}

.outline-1 {
  outline-width: 1px;
}

.outline-2 {
  outline-width: 2px;
}

.outline-4 {
  outline-width: 4px;
}

.outline-\[3px\] {
  outline-width: 3px;
}

.-outline-offset-1 {
  outline-offset: -1px;
}

.outline-offset-\[-1px\] {
  outline-offset: -1px;
}

.outline-offset-\[-2px\] {
  outline-offset: -2px;
}

.outline-offset-\[-4px\] {
  outline-offset: -4px;
}

.outline-\[rgba\(52\2c 46\2c 38\2c 0\.12\)\] {
  outline-color: rgba(52,46,38,0.12);
}

.outline-background-base {
  outline-color: var(--background-base);
}

.outline-background-elevated {
  outline-color: var(--background-elevated);
}

.outline-background-overlay {
  outline-color: var(--background-overlay);
}

.outline-brand-secondary-moola {
  outline-color: var(--brand-secondary-moola);
}

.outline-content-border-neutral {
  outline-color: var(--content-border-neutral);
}

.outline-content-primary {
  outline-color: var(--content-primary);
}

.outline-current {
  outline-color: currentColor;
}

.outline-gray-300 {
  outline-color: #d1d5db;
}

.outline-mint-100 {
  outline-color: var(--mint-100);
}

.outline-mint-400 {
  outline-color: var(--mint-400);
}

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

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

.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-0 {
  --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(0px + 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-1 {
  --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);
}

.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-inset {
  --tw-ring-inset: inset;
}

.ring-content-border-neutral {
  --tw-ring-color: var(--content-border-neutral);
}

.ring-green-600\/20 {
  --tw-ring-color: rgb(79 170 113 / 0.2);
}

.ring-rose-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity, 1));
}

.ring-stone-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(231 229 228 / var(--tw-ring-opacity, 1));
}

.ring-stone-200\/50 {
  --tw-ring-color: rgb(231 229 228 / 0.5);
}

.ring-stone-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity, 1));
}

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

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

.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);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  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);
}

.backdrop-blur-\[10px\] {
  --tw-backdrop-blur: blur(10px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xs {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.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-\[grid-template-rows\] {
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[opacity\2c max-width\2c visibility\] {
  transition-property: opacity,max-width,visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[opacity_0ms\2c width_300ms\] {
  transition-property: opacity 0ms,width 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[transform\2c width\] {
  transition-property: transform,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\] {
  transition-property: width;
  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;
}

.delay-0 {
  transition-delay: 0s;
}

.delay-1000 {
  transition-delay: 1000ms;
}

.delay-\[inherit\] {
  transition-delay: inherit;
}

.duration-0 {
  transition-duration: 0s;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-\[160ms\] {
  transition-duration: 160ms;
}

.duration-\[400ms\] {
  transition-duration: 400ms;
}

.ease-\[cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\@container {
  container-type: inline-size;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-auto::-webkit-scrollbar {
  display: block;
}

.scrollbar-auto {
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}

.masked-by-image {
  -webkit-mask-image: var(--mask-image-url);
          mask-image: var(--mask-image-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}

/* Soft fade at the top + bottom edges (28px each) of a vertical scroll area, so content
     dissolves into the container instead of stopping on a hard line. Pair with scrollbar-hide. */

.mask-fade-y {
  -webkit-mask-image: linear-gradient(transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
}

.background-fade-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  z-index: -1;
}

.background-fade:before {
  content: "";
  position: absolute;
  z-index: 1;
  background-color: var(--primary-200);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.background-fade {
  position: absolute;
  top: 0px;
  transform: translate(-360px, 0px) rotate(-45deg);
  z-index: -1;
  background-color: var(--primary-400);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.medium-fade:before {
  right: -40px;
  top: -200px;
  width: 1000px;
  height: 600px;
}

.medium-fade {
  right: -800px;
  width: 800px;
  height: 600px;
}

.large-fade:before {
  right: -0px;
  top: -200px;
  width: 1500px;
  height: 800px;
}

.large-fade {
  right: -700px;
  width: 1000px;
  height: 800px;
}

.reveal {
  transition-property: opacity, transform;
  --tw-translate-y: 1.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));
  opacity: 0;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.reveal-from-left {
  --tw-translate-y: 0px;
  --tw-translate-x: -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));
}

.reveal.in {
  transform: none;
  opacity: 1;
  transition-duration: 1000ms;
}

.space-y > :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-x > :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)));
}

.gap-y {
  row-gap: 1.25rem;
}

.gap-x {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

[hidden] {
  display: none !important;
}

.font-size-inherit {
  font-size: inherit;
}

.left-inherit {
  left: inherit;
}

.right-inherit {
  right: inherit;
}

.top-inherit {
  top: inherit;
}

.bottom-inherit {
  bottom: inherit;
}

.translate-x-inherit {
  --tw-translate-x: inherit;
  transform: inherit;
}

.slide-direction-down {
  --initial-direction: 1;
}

.slide-direction-up {
  --initial-direction: -1;
}

.animation-paused {
  animation-play-state: paused;
}

.\[--code-editor-background\:theme\(\'colors\.white\'\)\] {
  --code-editor-background: #fff;
}

.\[--dropdown-max-height\:none\] {
  --dropdown-max-height: none;
}

.\[--dropdown-max-width\:300px\] {
  --dropdown-max-width: 300px;
}

.\[--dropdown-max-width\:none\] {
  --dropdown-max-width: none;
}

.\[--dropdown-min-width\:240px\] {
  --dropdown-min-width: 240px;
}

.\[--dropdown-width\:265px\] {
  --dropdown-width: 265px;
}

.\[--dropdown-width\:max-content\] {
  --dropdown-width: max-content;
}

.\[--large-button-min-width\:100\%\] {
  --large-button-min-width: 100%;
}

.\[--large-button-min-width\:48\%\] {
  --large-button-min-width: 48%;
}

.\[--tw-ring-color\:var\(--tw-ring-color-dark\)\] {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.\[--tw-ring-color\:var\(--tw-ring-color-light\)\] {
  --tw-ring-color: var(--tw-ring-color-light);
}

.\[border-color\:var\(--base-color\)\] {
  border-color: var(--base-color);
}

.\[border-radius\:12px\] {
  border-radius: 12px;
}

.\[border-radius\:20px\] {
  border-radius: 20px;
}

.\[border-radius\:4px\] {
  border-radius: 4px;
}

.\[border-radius\:5px\] {
  border-radius: 5px;
}

.\[border-radius\:6px\] {
  border-radius: 6px;
}

.\[box-shadow\:0px_1px_3px_0px_rgba\(37\2c _122\2c _27\2c _0\.06\)\2c _0px_7px_29px_0px_rgba\(37\2c _122\2c _27\2c _0\.12\)\2c _0px_2px_8px_0px_rgba\(37\2c _122\2c _27\2c _0\.04\)\2c _0px_2px_7px_0px_rgba\(37\2c _122\2c _27\2c _0\.07\)\] {
  box-shadow: 0px 1px 3px 0px rgba(37, 122, 27, 0.06), 0px 7px 29px 0px rgba(37, 122, 27, 0.12), 0px 2px 8px 0px rgba(37, 122, 27, 0.04), 0px 2px 7px 0px rgba(37, 122, 27, 0.07);
}

.\[field-sizing\:content\] {
  field-sizing: content;
}

.\[text-decoration-skip-ink\:none\] {
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

/* not in @layer components */

[data-select-all-target='wrapper']form.button_to {
  display: block;
}

form.button_to {
  display: inline-block;
}

.btn-toggle input[type='checkbox']:checked + buttonform.button-secondary.button_to input[type='submit'], .btn-toggle input[type='radio']:checked + buttonform.button-secondary.button_to input[type='submit'] {
  background-color: var(--background-overlay);
}

form.button_to input[type='submit'] {
  background-color: transparent;
}

form.button_to input[type='submit'].button {
  background-color: var(--primary-800);
}

form.button_to input[type='submit'].button:hover {
  background-color: var(--primary-900);
}

svg:where(.icon) {
  /* still beats tailwind's default of block */
}

[data-select-all-target='wrapper']svg:where(.icon) {
  display: block;
}

svg:where(.icon) {
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: text-bottom;
}

/******************************
  Box modifications
******************************/

.box-inset-left {
  box-shadow: 5px 0px 0px 0px var(--inset-color) inset,
    0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
}

/******************************
  Main area
******************************/

.is-main-area {
  border-radius: 0.75rem;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #EFF9FB var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 249 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-from-position: 0.71%;
  --tw-gradient-to: rgb(254 243 242 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #FEF3F2 var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-via-position: 6.15%;
  --tw-gradient-to: #F8F5F4 var(--tw-gradient-to-position);
  --tw-gradient-to-position: 15.02%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .is-main-area {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.text-placeholder {
  color: var(--grayscale-4);
}

.bg-placeholder {
  background-color: var(--background-overlay);
}

.bg-placeholder:where(.dark, .dark *) {
  background-color: rgba(255,255,255,0.10);
}

/* OL-3343: `.primary/.secondary/.small-screen-width` removed — replaced app-wide by the
   `.layout` root (gutter + centering + outer cap) plus the `max-w-layout-*` width tokens.
   See app/assets/stylesheets/layout.css and tailwind.config.js. */

/* Select-field chevron: render the chevron-bottom icon at a 2px stroke. CSS stroke-width
   beats the SVG's stroke-width="1.5" presentation attribute, and Tailwind's stroke-width
   utilities aren't enabled in this build — so it's a component-level class used by the
   native_select field (and any other select chevron that opts in). */

.select-chevron path {
  stroke-width: 2;
}

/* 
 * Refer to the stimulus-scroll-reveal documentation for details.
 * https://www.stimulus-components.com/docs/stimulus-scroll-reveal/
 */

/* carousel for listing page */

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* @import "./tailwind/dark-mode"; */

:root, .theme-blue {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --secondary-50: #eff6ff;
  --secondary-100: #dbeafe;
  --secondary-200: #bfdbfe;
  --secondary-300: #93c5fd;
  --secondary-400: #60a5fa;
  --secondary-500: #3b82f6;
  --secondary-600: #2563eb;
  --secondary-700: #1d4ed8;
  --secondary-800: #1e40af;
  --secondary-900: #1e3a8a;
}

.theme-slate {
  --primary-50: #f8fafc;
  --primary-100: #f1f5f9;
  --primary-200: #e2e8f0;
  --primary-300: #cbd5e1;
  --primary-400: #94a3b8;
  --primary-500: #64748b;
  --primary-600: #475569;
  --primary-700: #334155;
  --primary-800: #1e293b;
  --primary-900: #0f172a;
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}

.theme-gray {
  --primary-50: #f8fafc;
  --primary-100: #f1f5f9;
  --primary-200: #e2e8f0;
  --primary-300: #cbd5e1;
  --primary-400: #94a3b8;
  --primary-500: #64748b;
  --primary-600: #475569;
  --primary-700: #334155;
  --primary-800: #1e293b;
  --primary-900: #0f172a;
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}

.theme-zinc {
  --primary-50: #fafafa;
  --primary-100: #f4f4f5;
  --primary-200: #e4e4e7;
  --primary-300: #d4d4d8;
  --primary-400: #a1a1aa;
  --primary-500: #71717a;
  --primary-600: #52525b;
  --primary-700: #3f3f46;
  --primary-800: #27272a;
  --primary-900: #18181b;
  --secondary-50: #fafafa;
  --secondary-100: #f4f4f5;
  --secondary-200: #e4e4e7;
  --secondary-300: #d4d4d8;
  --secondary-400: #a1a1aa;
  --secondary-500: #71717a;
  --secondary-600: #52525b;
  --secondary-700: #3f3f46;
  --secondary-800: #27272a;
  --secondary-900: #18181b;
}

.theme-neutral {
  --primary-50: #fafafa;
  --primary-100: #f5f5f5;
  --primary-200: #e5e5e5;
  --primary-300: #d4d4d4;
  --primary-400: #a3a3a3;
  --primary-500: #737373;
  --primary-600: #525252;
  --primary-700: #404040;
  --primary-800: #262626;
  --primary-900: #171717;
  --secondary-50: #fafafa;
  --secondary-100: #f5f5f5;
  --secondary-200: #e5e5e5;
  --secondary-300: #d4d4d4;
  --secondary-400: #a3a3a3;
  --secondary-500: #737373;
  --secondary-600: #525252;
  --secondary-700: #404040;
  --secondary-800: #262626;
  --secondary-900: #171717;
}

.theme-stone {
  --primary-50: #fafaf9;
  --primary-100: #f5f5f4;
  --primary-200: #e7e5e4;
  --primary-300: #d6d3d1;
  --primary-400: #a8a29e;
  --primary-500: #78716c;
  --primary-600: #57534e;
  --primary-700: #44403c;
  --primary-800: #292524;
  --primary-900: #1c1917;
  --secondary-50: #fafaf9;
  --secondary-100: #f5f5f4;
  --secondary-200: #e7e5e4;
  --secondary-300: #d6d3d1;
  --secondary-400: #a8a29e;
  --secondary-500: #78716c;
  --secondary-600: #57534e;
  --secondary-700: #44403c;
  --secondary-800: #292524;
  --secondary-900: #1c1917;
}

.theme-red {
  --primary-50: #fef2f3;
  --primary-100: #fde3e5;
  --primary-200: #fccccf;
  --primary-300: #f9a8ae;
  --primary-400: #f4757e;
  --primary-500: #e83b47;
  --primary-600: #d62c38;
  --primary-700: #b4212b;
  --primary-800: #951f27;
  --primary-900: #7c2026;
  --secondary-50: #fef2f3;
  --secondary-100: #fde3e5;
  --secondary-200: #fccccf;
  --secondary-300: #f9a8ae;
  --secondary-400: #f4757e;
  --secondary-500: #e83b47;
  --secondary-600: #d62c38;
  --secondary-700: #b4212b;
  --secondary-800: #951f27;
  --secondary-900: #7c2026;
}

.theme-orange {
  --primary-50: #fff8ed;
  --primary-100: #ffefd5;
  --primary-200: #fedcaa;
  --primary-300: #fcc275;
  --primary-400: #fa9d3d;
  --primary-500: #f88017;
  --primary-600: #ec660d;
  --primary-700: #c14b0d;
  --primary-800: #993c13;
  --primary-900: #7c3312;
  --secondary-50: #fff8ed;
  --secondary-100: #ffefd5;
  --secondary-200: #fedcaa;
  --secondary-300: #fcc275;
  --secondary-400: #fa9d3d;
  --secondary-500: #f88017;
  --secondary-600: #ec660d;
  --secondary-700: #c14b0d;
  --secondary-800: #993c13;
  --secondary-900: #7c3312;
}

.theme-amber {
  --primary-50: #fffbeb;
  --primary-100: #fef3c7;
  --primary-200: #fde68a;
  --primary-300: #fcd34d;
  --primary-400: #fbbf24;
  --primary-500: #f59e0b;
  --primary-600: #d97706;
  --primary-700: #b45309;
  --primary-800: #92400e;
  --primary-900: #78350f;
  --secondary-50: #fffbeb;
  --secondary-100: #fef3c7;
  --secondary-200: #fde68a;
  --secondary-300: #fcd34d;
  --secondary-400: #fbbf24;
  --secondary-500: #f59e0b;
  --secondary-600: #d97706;
  --secondary-700: #b45309;
  --secondary-800: #92400e;
  --secondary-900: #78350f;
}

.theme-yellow {
  --primary-50: #FCF4E4;
  --primary-100: #FFF7C2;
  --primary-200: #f7dfae;
  --primary-300: #f2ca77;
  --primary-400: #e2b42d;
  --primary-500: #d19d20;
  --primary-600: #b57b19;
  --primary-700: #915917;
  --primary-800: #78471b;
  --primary-900: #673c1c;
  --secondary-50: #FCF4E4;
  --secondary-100: #FFF7C2;
  --secondary-200: #f7dfae;
  --secondary-300: #f2ca77;
  --secondary-400: #e2b42d;
  --secondary-500: #d19d20;
  --secondary-600: #b57b19;
  --secondary-700: #915917;
  --secondary-800: #78471b;
  --secondary-900: #673c1c;
}

.theme-lime {
  --primary-50: #f7fee7;
  --primary-100: #ecfccb;
  --primary-200: #d9f99d;
  --primary-300: #bef264;
  --primary-400: #a3e635;
  --primary-500: #84cc16;
  --primary-600: #65a30d;
  --primary-700: #4d7c0f;
  --primary-800: #3f6212;
  --primary-900: #365314;
  --secondary-50: #f7fee7;
  --secondary-100: #ecfccb;
  --secondary-200: #d9f99d;
  --secondary-300: #bef264;
  --secondary-400: #a3e635;
  --secondary-500: #84cc16;
  --secondary-600: #65a30d;
  --secondary-700: #4d7c0f;
  --secondary-800: #3f6212;
  --secondary-900: #365314;
}

.theme-green {
  --primary-50: #effef6;
  --primary-100: #d9ffee;
  --primary-200: #b5fddc;
  --primary-300: #7bfac2;
  --primary-400: #3bed9f;
  --primary-500: #11d681;
  --primary-600: #4FAA71;
  --primary-700: #0a8b54;
  --primary-800: #0e6d45;
  --primary-900: #0e593b;
  --secondary-50: #effef6;
  --secondary-100: #d9ffee;
  --secondary-200: #b5fddc;
  --secondary-300: #7bfac2;
  --secondary-400: #3bed9f;
  --secondary-500: #11d681;
  --secondary-600: #4FAA71;
  --secondary-700: #0a8b54;
  --secondary-800: #0e6d45;
  --secondary-900: #0e593b;
}

.theme-emerald {
  --primary-50: #ecfdf5;
  --primary-100: #d1fae5;
  --primary-200: #a7f3d0;
  --primary-300: #6ee7b7;
  --primary-400: #34d399;
  --primary-500: #10b981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-800: #065f46;
  --primary-900: #064e3b;
  --secondary-50: #ecfdf5;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-300: #6ee7b7;
  --secondary-400: #34d399;
  --secondary-500: #10b981;
  --secondary-600: #059669;
  --secondary-700: #047857;
  --secondary-800: #065f46;
  --secondary-900: #064e3b;
}

.theme-teal {
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-200: #99f6e4;
  --primary-300: #5eead4;
  --primary-400: #2dd4bf;
  --primary-500: #14b8a6;
  --primary-600: #0d9488;
  --primary-700: #0f766e;
  --primary-800: #115e59;
  --primary-900: #134e4a;
  --secondary-50: #f0fdfa;
  --secondary-100: #ccfbf1;
  --secondary-200: #99f6e4;
  --secondary-300: #5eead4;
  --secondary-400: #2dd4bf;
  --secondary-500: #14b8a6;
  --secondary-600: #0d9488;
  --secondary-700: #0f766e;
  --secondary-800: #115e59;
  --secondary-900: #134e4a;
}

.theme-cyan {
  --primary-50: #ecfeff;
  --primary-100: #cffafe;
  --primary-200: #a5f3fc;
  --primary-300: #67e8f9;
  --primary-400: #22d3ee;
  --primary-500: #06b6d4;
  --primary-600: #0891b2;
  --primary-700: #0e7490;
  --primary-800: #155e75;
  --primary-900: #164e63;
  --secondary-50: #ecfeff;
  --secondary-100: #cffafe;
  --secondary-200: #a5f3fc;
  --secondary-300: #67e8f9;
  --secondary-400: #22d3ee;
  --secondary-500: #06b6d4;
  --secondary-600: #0891b2;
  --secondary-700: #0e7490;
  --secondary-800: #155e75;
  --secondary-900: #164e63;
}

.theme-sky {
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;
  --secondary-50: #f0f9ff;
  --secondary-100: #e0f2fe;
  --secondary-200: #bae6fd;
  --secondary-300: #7dd3fc;
  --secondary-400: #38bdf8;
  --secondary-500: #0ea5e9;
  --secondary-600: #0284c7;
  --secondary-700: #0369a1;
  --secondary-800: #075985;
  --secondary-900: #0c4a6e;
}

.theme-indigo {
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;
  --secondary-50: #eef2ff;
  --secondary-100: #e0e7ff;
  --secondary-200: #c7d2fe;
  --secondary-300: #a5b4fc;
  --secondary-400: #818cf8;
  --secondary-500: #6366f1;
  --secondary-600: #4f46e5;
  --secondary-700: #4338ca;
  --secondary-800: #3730a3;
  --secondary-900: #312e81;
}

.theme-violet {
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;
  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6;
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;
}

.theme-purple {
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7e22ce;
  --primary-800: #6b21a8;
  --primary-900: #581c87;
  --secondary-50: #faf5ff;
  --secondary-100: #f3e8ff;
  --secondary-200: #e9d5ff;
  --secondary-300: #d8b4fe;
  --secondary-400: #c084fc;
  --secondary-500: #a855f7;
  --secondary-600: #9333ea;
  --secondary-700: #7e22ce;
  --secondary-800: #6b21a8;
  --secondary-900: #581c87;
}

.theme-fuchsia {
  --primary-50: #fdf4ff;
  --primary-100: #fae8ff;
  --primary-200: #f5d0fe;
  --primary-300: #f0abfc;
  --primary-400: #e879f9;
  --primary-500: #d946ef;
  --primary-600: #c026d3;
  --primary-700: #a21caf;
  --primary-800: #86198f;
  --primary-900: #701a75;
  --secondary-50: #fdf4ff;
  --secondary-100: #fae8ff;
  --secondary-200: #f5d0fe;
  --secondary-300: #f0abfc;
  --secondary-400: #e879f9;
  --secondary-500: #d946ef;
  --secondary-600: #c026d3;
  --secondary-700: #a21caf;
  --secondary-800: #86198f;
  --secondary-900: #701a75;
}

.theme-pink {
  --primary-50: #fdf2f8;
  --primary-100: #fce7f3;
  --primary-200: #fbcfe8;
  --primary-300: #f9a8d4;
  --primary-400: #f472b6;
  --primary-500: #ec4899;
  --primary-600: #db2777;
  --primary-700: #be185d;
  --primary-800: #9d174d;
  --primary-900: #831843;
  --secondary-50: #fdf2f8;
  --secondary-100: #fce7f3;
  --secondary-200: #fbcfe8;
  --secondary-300: #f9a8d4;
  --secondary-400: #f472b6;
  --secondary-500: #ec4899;
  --secondary-600: #db2777;
  --secondary-700: #be185d;
  --secondary-800: #9d174d;
  --secondary-900: #831843;
}

.theme-rose {
  --primary-50: #fff1f2;
  --primary-100: #ffe4e6;
  --primary-200: #fecdd3;
  --primary-300: #fda4af;
  --primary-400: #fb7185;
  --primary-500: #f43f5e;
  --primary-600: #e11d48;
  --primary-700: #be123c;
  --primary-800: #9f1239;
  --primary-900: #881337;
  --secondary-50: #fff1f2;
  --secondary-100: #ffe4e6;
  --secondary-200: #fecdd3;
  --secondary-300: #fda4af;
  --secondary-400: #fb7185;
  --secondary-500: #f43f5e;
  --secondary-600: #e11d48;
  --secondary-700: #be123c;
  --secondary-800: #9f1239;
  --secondary-900: #881337;
}

.theme-salmon {
  --primary-50: #fef3f2;
  --primary-100: #fee5e2;
  --primary-200: #fed0ca;
  --primary-300: #fba89d;
  --primary-400: #f78272;
  --primary-500: #ee5945;
  --primary-600: #db3c27;
  --primary-700: #b82f1d;
  --primary-800: #982b1c;
  --primary-900: #7e291e;
  --primary-950: #45110a;
  --secondary-50: #fef3f2;
  --secondary-100: #fee5e2;
  --secondary-200: #fed0ca;
  --secondary-300: #fba89d;
  --secondary-400: #f78272;
  --secondary-500: #ee5945;
  --secondary-600: #db3c27;
  --secondary-700: #b82f1d;
  --secondary-800: #982b1c;
  --secondary-900: #7e291e;
  --secondary-950: #45110a;
}

.theme-seafoam {
  --primary-50: #eefbf4;
  --primary-100: #d5f6e3;
  --primary-200: #9ce7c1;
  --primary-300: #7adbb1;
  --primary-400: #44c38f;
  --primary-500: #21a875;
  --primary-600: #13885f;
  --primary-700: #0f6d4e;
  --primary-800: #0f563f;
  --primary-900: #0d4735;
  --primary-950: #06281e;
  --secondary-50: #eefbf4;
  --secondary-100: #d5f6e3;
  --secondary-200: #9ce7c1;
  --secondary-300: #7adbb1;
  --secondary-400: #44c38f;
  --secondary-500: #21a875;
  --secondary-600: #13885f;
  --secondary-700: #0f6d4e;
  --secondary-800: #0f563f;
  --secondary-900: #0d4735;
  --secondary-950: #06281e;
}

.theme-secondary-blue {
  --secondary-50: #eff6ff;
  --secondary-100: #dbeafe;
  --secondary-200: #bfdbfe;
  --secondary-300: #93c5fd;
  --secondary-400: #60a5fa;
  --secondary-500: #3b82f6;
  --secondary-600: #2563eb;
  --secondary-700: #1d4ed8;
  --secondary-800: #1e40af;
  --secondary-900: #1e3a8a;
}

.theme-secondary-slate {
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}

.theme-secondary-gray {
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}

.theme-secondary-zinc {
  --secondary-50: #fafafa;
  --secondary-100: #f4f4f5;
  --secondary-200: #e4e4e7;
  --secondary-300: #d4d4d8;
  --secondary-400: #a1a1aa;
  --secondary-500: #71717a;
  --secondary-600: #52525b;
  --secondary-700: #3f3f46;
  --secondary-800: #27272a;
  --secondary-900: #18181b;
}

.theme-secondary-neutral {
  --secondary-50: #fafafa;
  --secondary-100: #f5f5f5;
  --secondary-200: #e5e5e5;
  --secondary-300: #d4d4d4;
  --secondary-400: #a3a3a3;
  --secondary-500: #737373;
  --secondary-600: #525252;
  --secondary-700: #404040;
  --secondary-800: #262626;
  --secondary-900: #171717;
}

.theme-secondary-stone {
  --secondary-50: #fafaf9;
  --secondary-100: #f5f5f4;
  --secondary-200: #e7e5e4;
  --secondary-300: #d6d3d1;
  --secondary-400: #a8a29e;
  --secondary-500: #78716c;
  --secondary-600: #57534e;
  --secondary-700: #44403c;
  --secondary-800: #292524;
  --secondary-900: #1c1917;
}

.theme-secondary-red {
  --secondary-50: #fef2f3;
  --secondary-100: #fde3e5;
  --secondary-200: #fccccf;
  --secondary-300: #f9a8ae;
  --secondary-400: #f4757e;
  --secondary-500: #e83b47;
  --secondary-600: #d62c38;
  --secondary-700: #b4212b;
  --secondary-800: #951f27;
  --secondary-900: #7c2026;
}

.theme-secondary-orange {
  --secondary-50: #fff8ed;
  --secondary-100: #ffefd5;
  --secondary-200: #fedcaa;
  --secondary-300: #fcc275;
  --secondary-400: #fa9d3d;
  --secondary-500: #f88017;
  --secondary-600: #ec660d;
  --secondary-700: #c14b0d;
  --secondary-800: #993c13;
  --secondary-900: #7c3312;
}

.theme-secondary-amber {
  --secondary-50: #fffbeb;
  --secondary-100: #fef3c7;
  --secondary-200: #fde68a;
  --secondary-300: #fcd34d;
  --secondary-400: #fbbf24;
  --secondary-500: #f59e0b;
  --secondary-600: #d97706;
  --secondary-700: #b45309;
  --secondary-800: #92400e;
  --secondary-900: #78350f;
}

.theme-secondary-yellow {
  --secondary-50: #FCF4E4;
  --secondary-100: #FFF7C2;
  --secondary-200: #f7dfae;
  --secondary-300: #f2ca77;
  --secondary-400: #e2b42d;
  --secondary-500: #d19d20;
  --secondary-600: #b57b19;
  --secondary-700: #915917;
  --secondary-800: #78471b;
  --secondary-900: #673c1c;
}

.theme-secondary-lime {
  --secondary-50: #f7fee7;
  --secondary-100: #ecfccb;
  --secondary-200: #d9f99d;
  --secondary-300: #bef264;
  --secondary-400: #a3e635;
  --secondary-500: #84cc16;
  --secondary-600: #65a30d;
  --secondary-700: #4d7c0f;
  --secondary-800: #3f6212;
  --secondary-900: #365314;
}

.theme-secondary-green {
  --secondary-50: #effef6;
  --secondary-100: #d9ffee;
  --secondary-200: #b5fddc;
  --secondary-300: #7bfac2;
  --secondary-400: #3bed9f;
  --secondary-500: #11d681;
  --secondary-600: #4FAA71;
  --secondary-700: #0a8b54;
  --secondary-800: #0e6d45;
  --secondary-900: #0e593b;
}

.theme-secondary-emerald {
  --secondary-50: #ecfdf5;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-300: #6ee7b7;
  --secondary-400: #34d399;
  --secondary-500: #10b981;
  --secondary-600: #059669;
  --secondary-700: #047857;
  --secondary-800: #065f46;
  --secondary-900: #064e3b;
}

.theme-secondary-teal {
  --secondary-50: #f0fdfa;
  --secondary-100: #ccfbf1;
  --secondary-200: #99f6e4;
  --secondary-300: #5eead4;
  --secondary-400: #2dd4bf;
  --secondary-500: #14b8a6;
  --secondary-600: #0d9488;
  --secondary-700: #0f766e;
  --secondary-800: #115e59;
  --secondary-900: #134e4a;
}

.theme-secondary-cyan {
  --secondary-50: #ecfeff;
  --secondary-100: #cffafe;
  --secondary-200: #a5f3fc;
  --secondary-300: #67e8f9;
  --secondary-400: #22d3ee;
  --secondary-500: #06b6d4;
  --secondary-600: #0891b2;
  --secondary-700: #0e7490;
  --secondary-800: #155e75;
  --secondary-900: #164e63;
}

.theme-secondary-sky {
  --secondary-50: #f0f9ff;
  --secondary-100: #e0f2fe;
  --secondary-200: #bae6fd;
  --secondary-300: #7dd3fc;
  --secondary-400: #38bdf8;
  --secondary-500: #0ea5e9;
  --secondary-600: #0284c7;
  --secondary-700: #0369a1;
  --secondary-800: #075985;
  --secondary-900: #0c4a6e;
}

.theme-secondary-indigo {
  --secondary-50: #eef2ff;
  --secondary-100: #e0e7ff;
  --secondary-200: #c7d2fe;
  --secondary-300: #a5b4fc;
  --secondary-400: #818cf8;
  --secondary-500: #6366f1;
  --secondary-600: #4f46e5;
  --secondary-700: #4338ca;
  --secondary-800: #3730a3;
  --secondary-900: #312e81;
}

.theme-secondary-violet {
  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6;
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;
}

.theme-secondary-purple {
  --secondary-50: #faf5ff;
  --secondary-100: #f3e8ff;
  --secondary-200: #e9d5ff;
  --secondary-300: #d8b4fe;
  --secondary-400: #c084fc;
  --secondary-500: #a855f7;
  --secondary-600: #9333ea;
  --secondary-700: #7e22ce;
  --secondary-800: #6b21a8;
  --secondary-900: #581c87;
}

.theme-secondary-fuchsia {
  --secondary-50: #fdf4ff;
  --secondary-100: #fae8ff;
  --secondary-200: #f5d0fe;
  --secondary-300: #f0abfc;
  --secondary-400: #e879f9;
  --secondary-500: #d946ef;
  --secondary-600: #c026d3;
  --secondary-700: #a21caf;
  --secondary-800: #86198f;
  --secondary-900: #701a75;
}

.theme-secondary-pink {
  --secondary-50: #fdf2f8;
  --secondary-100: #fce7f3;
  --secondary-200: #fbcfe8;
  --secondary-300: #f9a8d4;
  --secondary-400: #f472b6;
  --secondary-500: #ec4899;
  --secondary-600: #db2777;
  --secondary-700: #be185d;
  --secondary-800: #9d174d;
  --secondary-900: #831843;
}

.theme-secondary-rose {
  --secondary-50: #fff1f2;
  --secondary-100: #ffe4e6;
  --secondary-200: #fecdd3;
  --secondary-300: #fda4af;
  --secondary-400: #fb7185;
  --secondary-500: #f43f5e;
  --secondary-600: #e11d48;
  --secondary-700: #be123c;
  --secondary-800: #9f1239;
  --secondary-900: #881337;
}

.theme-secondary-salmon {
  --secondary-50: #fef3f2;
  --secondary-100: #fee5e2;
  --secondary-200: #fed0ca;
  --secondary-300: #fba89d;
  --secondary-400: #f78272;
  --secondary-500: #ee5945;
  --secondary-600: #db3c27;
  --secondary-700: #b82f1d;
  --secondary-800: #982b1c;
  --secondary-900: #7e291e;
  --secondary-950: #45110a;
}

.theme-secondary-seafoam {
  --secondary-50: #eefbf4;
  --secondary-100: #d5f6e3;
  --secondary-200: #9ce7c1;
  --secondary-300: #7adbb1;
  --secondary-400: #44c38f;
  --secondary-500: #21a875;
  --secondary-600: #13885f;
  --secondary-700: #0f6d4e;
  --secondary-800: #0f563f;
  --secondary-900: #0d4735;
  --secondary-950: #06281e;
}

:root {
  /* Base colors */
  --white: #ffffff;
  --black: #000000;
  /* Grayscale */
  --grayscale-1: #faf8f5;
  --grayscale-2: #efebe3;
  --grayscale-3: #e5dfd3;
  --grayscale-4: #bdb6a8;
  --grayscale-5: #a49c8e;
  --grayscale-6: #706a62;
  --grayscale-7: #706a62;
  --grayscale-8: #706a62;
  --grayscale-9: #38342d;
  --grayscale-10: #38342d;
  /* Spice */
  --spice-50: #faf6f6;
  --spice-100: #f4ecec;
  --spice-200: #ebdddd;
  --spice-300: #dcc5c6;
  --spice-400: #c7a2a3;
  --spice-500: #b18283;
  --spice-600: #9a6869;
  --spice-700: #973e3e;
  --spice-800: #7d3737;
  --spice-900: #713636;
  --spice-950: #381717;
  /* Mint */
  --mint-50: #f5f8f6;
  --mint-100: #dfe8e4;
  --mint-200: #bed1c9;
  --mint-300: #88a89c;
  --mint-400: #709186;
  --mint-500: #55776c;
  --mint-600: #435e56;
  --mint-700: #2e5749;
  --mint-800: #264339;
  --mint-900: #253c35;
  --mint-950: #11221d;
  /* Brand */
  --brand-primary-shine: #ffed84;
  --brand-primary-crisp: #f3f0e8;
  --brand-primary-brew: #342e26;
  --brand-primary-chocolate: #4d2f06;
  --brand-secondary-spice: #713636;
  --brand-secondary-piggy: #6D181A;
  --brand-secondary-moola: #264339;
  --brand-secondary-mint: #88a89c;
  /* Background fills — interactive hover states */
  --bg-fill-brand-hover: #314c43;
  --bg-fill-dark-hover: var(--brand-primary-chocolate);
  --bg-fill-secondary-hover: rgba(104, 67, 0, 0.12);
  --bg-fill-danger-hover: #d62c38;
  /* Content */
  --content-primary: var(--brand-primary-brew);
  --content-secondary: rgba(52, 46, 38, 0.64);
  --content-tertiary: rgba(52, 46, 38, 0.44);
  /* Inverse content — light text for elements placed ON dark, saturated, or brand-colored
     surfaces (solid badges, dark banners, colored CTAs, etc.). Reach for these instead of
     pressing a background token (e.g. --background-elevated) into service as a text color,
     which is a semantic mismatch. --content-primary-inverse mirrors --content-primary;
     add --content-secondary-inverse / --content-tertiary-inverse here (and register them in
     tailwind.figma.js) when a placement needs them. */
  --content-primary-inverse: #ffffff;
  --content-focus-outline: rgba(52, 46, 38, 0.2);
  --content-background-modal-overlay: rgba(0, 0, 0, 0.2);
  --content-border-light: rgba(52, 46, 38, 0.04);
  --content-border-neutral: rgba(52, 46, 38, 0.08);
  --content-border-dark: rgba(52, 46, 38, 0.12);
  --content-border-input: var(--grayscale-3);
  --content-border-card: var(--white);
  --content-border-tertiary: var(--content-tertiary);
  /* Background */
  --background-base: #f7f5f0;
  --background-screen: rgba(255, 255, 255, 0.8);
  --background-elevated: #ffffff;
  --background-neutral: var(--brand-primary-crisp);
  --background-overlay: rgba(104, 67, 0, 0.08);
  --background-overlay-hover: rgba(104, 67, 0, 0.16);
  --background-card: rgba(255, 255, 255, 0.8);
  /* Subtle black wash laid over media (product thumbnails, etc.) for contrast. */
  --bg-media-overlay-04: rgba(0, 0, 0, 0.04);
  /* Disabled-control fill: the flat surface for disabled buttons, checkboxes, and
     other inert inputs (e.g. a validation dialog's Save button before it's eligible). */
  --background-disabled: #eeeae4;
  /* Interactive */
  --interactive-primary: var(--brand-primary-brew);
  --interactive-link-underline: var(--content-tertiary);
  --interactive-secondary: var(--content-secondary);
  --interactive-control: var(--brand-primary-brew);
  --interactive-tertiary: rgba(52, 46, 38, 0.36);
  /* Shadows */
  --shadow-main-container: 0px 2px 8px 0px rgba(0, 0, 0, 0.06),
    0px -1px 30px 0px rgba(0, 0, 0, 0.04);
}

.dark {
  /* Base colors remain the same */
  /* Spice - Dark mode */
  --spice-50: #fef3f2;
  --spice-100: #fee5e2;
  --spice-200: #fed0ca;
  --spice-300: #fba89d;
  --spice-400: #f78272;
  --spice-500: #ee5945;
  --spice-600: #db3c27;
  --spice-700: #b82f1d;
  --spice-800: #982b1c;
  --spice-900: #7e291e;
  --spice-950: #45110a;
  /* Mint - Dark mode */
  --mint-50: #eefbf4;
  --mint-100: #d5f6e3;
  --mint-200: #9ce7c1;
  --mint-300: #7adbb1;
  --mint-400: #44c38f;
  --mint-500: #21a875;
  --mint-600: #13885f;
  --mint-700: #0f6d4e;
  --mint-800: #0f563f;
  --mint-900: #0d4735;
  --mint-950: #06281e;
  /* Brand - Dark mode */
  --brand-primary-shine: var(--spice-300);
  --brand-primary-crisp: #eee8e5;
  --brand-primary-brew: #0b051d;
  --brand-secondary-spice: #ffffff;
  --brand-secondary-piggy: #ffffff;
  --brand-secondary-moola: #ffffff;
  --brand-secondary-mint: #ffffff;
  /* Content - Dark mode */
  --content-primary: rgba(248, 245, 244, 1);
  --content-secondary: rgba(248, 245, 244, 0.79);
  --content-tertiary: rgba(248, 245, 244, 0.5);
  --content-focus-outline: rgba(52, 46, 38, 0.2);
  --content-background-modal-overlay: rgba(0, 0, 0, 0.2);
  --content-border-light: rgba(11, 5, 29, 0.04);
  --content-border-neutral: rgba(248, 245, 244, 0.08);
  --content-border-dark: rgba(248, 245, 244, 0.12);
  --content-border-input: #333537;
  --content-border-card: rgba(248, 245, 244, 0.04);
  /* Background - Dark mode */
  --background-base: var(--brand-primary-brew);
  --background-screen: rgba(255, 255, 255, 0.04);
  --background-elevated: var(--brand-primary-brew);
  --background-neutral: rgba(248, 245, 244, 0.04);
  --background-overlay: rgba(248, 245, 244, 0.04);
  --background-card: rgba(255, 255, 255, 0.04);
  /* Interactive - Dark mode */
  --interactive-primary: var(--brand-primary-shine);
  --interactive-link-underline: var(--mint-50);
  --interactive-secondary: var(--content-secondary);
  --interactive-tertiary: var(--content-tertiary);
}

.table-alternative {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1264px;
  text-align: left;
}

.table-alternative thead th {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--content-secondary);
}

.table-alternative thead th.with-icon {
  padding-left: 0.75rem;
}

.table-alternative tbody td {
  height: 3rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.table-alternative tbody td:first-child {
  position: relative;
}

.table-alternative tbody td:first-child > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 0.75rem;
}

.table-alternative:not(.contained-table) tbody td:first-child * {
  position: relative;
  z-index: 20;
}

.table-alternative:not(.contained-table) tbody td:first-child::before {
  content: '';
  pointer-events: none;
  position: absolute;
  left: -0.5rem;
  display: block;
  height: 100%;
  width: 30px;
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  background-color: inherit;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.table-alternative:not(.contained-table) tbody td:first-child:hover::before,
      .table-alternative:not(.contained-table) tbody td:first-child:focus::before,
      .table-alternative:not(.contained-table) tbody td:first-child:active::before,
      .table-alternative:not(.contained-table) tbody td:first-child:focus-within::before,
      .table-alternative:not(.contained-table) tbody td:first-child:focus-visible::before {
  opacity: 1;
}

.table-alternative:not(.contained-table) tbody td:last-child {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

/* additional styles for contained tables */

.contained-table tbody {
  background-color: var(--background-elevated);
}

.contained-table tbody tr {
  position: relative;
}

.contained-table tbody tr:first-child td {
  padding-top: 1rem;
}

.contained-table tbody tr:first-child td:first-child {
  border-top-left-radius: 0.75rem;
}

.contained-table tbody tr:first-child td:last-child {
  border-top-right-radius: 0.75rem;
}

.contained-table tbody tr:last-child td {
  padding-bottom: 1rem;
}

.contained-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.75rem;
}

.contained-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.75rem;
}

.contained-table tbody tr:last-child:after {
  display: none;
}

.contained-table tbody tr:hover td {
  position: relative;
}

.contained-table tbody tr:hover td:before {
  pointer-events: none;
  position: absolute;
  left: 0px;
  width: 100%;
  background-color: var(--background-base);
  content: ' ';
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 8px) !important;
}

.contained-table tbody tr:hover td:first-child:before {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  transform: translateY(-50%) translateX(0.25em);
}

.contained-table tbody tr:hover td:last-child:before {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  transform: translateY(-50%) translateX(-0.25em);
}

.contained-table tbody tr:hover td.no-hover:before {
  display: none;
}

.contained-table tbody tr:hover td > * {
  position: relative;
  z-index: 20;
}

.contained-table tbody tr:first-child td:before {
  /* @apply top-1; */
  /* height: calc(100% - 5px); */
}

.contained-table tbody tr:last-child td:before {
  /* height: calc(100% - 3px); */
}

@keyframes bounceRight {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(20%);
  }
}

.bounce-right {
  display: inline-block;
  animation: bounceRight 1.5s cubic-bezier(0.25, 1.5, 0.5, 1) infinite;
}

@keyframes flash {
  0% {
    background-color: #ffffff20;
    box-shadow: 32px 0 #ffffff20, -32px 0 #fff;
  }

  50% {
    background-color: #fff;
    box-shadow: 32px 0 #ffffff20, -32px 0 #ffffff20;
  }

  100% {
    background-color: #ffffff20;
    box-shadow: 32px 0 #fff, -32px 0 #ffffff20;
  }
}

@keyframes shimmer-slide {
  0% {
    background-position: 100% center, 0% center;
  }

  50% {
    background-position: 0% center, 0% center;
  }

  50.01%,
  100% {
    background-position: 0% center, 0% center;
  }
}

.text-shimmer {
  --spread: 2.5em;
  --base-gradient-color: #ffffff;
  --animation-duration: 2s;
  position: relative;
  display: inline-block;
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-image: linear-gradient(
      100deg,
      transparent calc(50% - var(--spread)),
      var(--base-gradient-color),
      transparent calc(50% + var(--spread))
    ),
    linear-gradient(currentColor, currentColor);
  animation: shimmer-slide var(--animation-duration) linear infinite;
}

/* Register the custom property for modern browsers only */

@property --angle {
  syntax: '<angle>';

  inherits: false;

  initial-value: 0deg;
}

.glow-card {
  position: relative;
  border-radius: var(--rounded-radius-12, 12px);
  background: var(--content-background-elevated, #fff);
  width: 368px;
  /* shadows/sm */
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0),
    0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
    0px 4px 6px 0px rgba(0, 0, 0, 0.02);
  z-index: 1;
  /* Remove overflow hidden to allow glow effect */
}

.glow-card::before {
  content: '';
  position: absolute;
  opacity: 0.75;
  /* Extend beyond card for proper glow effect */
  inset: -1px;
  border-radius: 0.5rem;
  box-sizing: border-box;
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    #ffed84 0deg,
    #bed1c9 72deg,
    #a8c4bc 108deg,
    #d6e8e0 144deg,
    #bed1c9 180deg,
    #9bb8ad 216deg,
    #e6f2df 252deg,
    #d4e6a3 288deg,
    #ffed84 324deg
  );
  filter: blur(0.375rem);
  -webkit-filter: blur(0.375rem);
  z-index: -1;
}

.glow-card.active::before {
  animation: rotate-glow-safari 5s linear infinite;
  -webkit-animation: rotate-glow-safari 5s linear infinite;
}

/* Modern browsers that support CSS custom properties in conic-gradient */

@supports (background: conic-gradient(from var(--angle), red, blue)) {
  .glow-card::before {
    /* Keep extended inset for modern browsers too for consistent glow */
    inset: -1px;
    background-image: conic-gradient(
      from var(--angle) at 50% 50%,
      #ffed84 0deg,
      #bed1c9 72deg,
      #a8c4bc 108deg,
      #d6e8e0 144deg,
      #bed1c9 180deg,
      #9bb8ad 216deg,
      #e6f2df 252deg,
      #d4e6a3 288deg,
      #ffed84 324deg
    );
    border-radius: 20px;
  }

  .glow-card.active::before {
    animation: rotate-glow-modern 5s linear infinite;
    -webkit-animation: rotate-glow-modern 5s linear infinite;
  }
}

.glow-card::after {
  opacity: 1;
  inset: 0.0625rem;
  content: '';
  border-radius: 12px;
  position: absolute;
  background-color: #fff;
  z-index: 0;
}

.content {
  color: #264339;
  font-size: 14px;
  line-height: normal;
  font-weight: 600;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
}

/* Safari/WebKit animation using transform (works in all browsers) */

@keyframes rotate-glow-safari {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

/* Modern browser animation using CSS custom properties */

@keyframes rotate-glow-modern {
  0% {
    --angle: 0deg;
  }

  100% {
    --angle: 360deg;
  }
}

/* Demo content */

.demo-content {
  text-align: left;
}

.demo-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: #264339;
}

/* Connection animation dots — used between two app icons in confirm dialogs */

@keyframes connection-dot-pulse {
  0%, 100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

.connection-dot {
  animation: connection-dot-pulse 1.5s ease-in-out infinite;
}

.connection-dot:nth-child(1) {
  animation-delay: 0s;
}

.connection-dot:nth-child(2) {
  animation-delay: 0.18s;
}

.connection-dot:nth-child(3) {
  animation-delay: 0.36s;
}

.connection-dot:nth-child(4) {
  animation-delay: 0.54s;
}

@media (prefers-reduced-motion: reduce) {
  .connection-dot {
    animation: none;
    opacity: 0.6;
  }
}

/*
 * This takes care of the window's contents shifting when the
 * scrollbar appears and disappears during the turn.css animation
 */

/* Chrome, Safari and Opera */

.devise_layout::-webkit-scrollbar {
  display: none;
}

/* Firefox and Edge */

.devise_layout {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Prevent scrolling while dialog is open */

body:has(dialog[data-dialog-target='dialog'][open]) {
  overflow: hidden;
}

dialog {
  width: 560px;
}

/* No `forwards` on the entrance animations below: the final keyframe is identical
   to the dialog's natural resting state, so letting the animation revert lets the
   leftover `transform` settle back to `none`. A pinned identity transform
   (matrix(1,0,0,1,0,0)) keeps the dialog on its own composited layer; centered
   dialogs land on half-pixel boundaries, so the rasterized text gets interpolated
   and looks fuzzy. Reverting to no transform restores crisp text. */

dialog[open] {
  display: flex;
}

/* Reusable enter/exit motion. Apply `.animation-dialog-enter` / `.animation-dialog-exit`
   to any element to match the modal transition exactly. The dialog itself opts in via its
   [open]/.closing states below. NOTE: this pair is responsive — on mobile it slides as a
   bottom sheet (see the @media block). Popover dropdowns that stay popovers on mobile must
   use `.animation-dropdown-enter`/`-exit` instead (defined below), NOT this. */

.animation-dialog-enter,
dialog[open] {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animation-dialog-exit,
dialog.closing:not(.noslide) {
  animation: slideDown 0.2s forwards;
}

/* Popover dropdowns (dropdown_controller) stay popovers on every viewport, so they keep the
   desktop slideUp/slideDown motion on mobile too — they must NOT inherit the bottom-sheet
   slide from the @media block below (that's only for components that are actually sheets).
   Deliberately defined outside that media query so there is no responsive override. */

.animation-dropdown-enter {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animation-dropdown-exit {
  animation: slideDown 0.2s forwards;
}

dialog.noslide[open] {
  animation: appear 0s forwards;
}

dialog.noslide.closing {
  animation: disappear 0s forwards;
}

/* Popover dropdowns (dropdown_controller) stay popovers on every viewport, so they keep the
   desktop slideUp/slideDown motion on mobile too — they must NOT inherit the bottom-sheet
   slide from the @media blocks below (that's only for components that are actually sheets).
   Deliberately defined outside those media queries so there is no responsive override. */

.animation-dropdown-enter {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animation-dropdown-exit {
  animation: slideDown 0.2s forwards;
}

/* Mobile sheet motion: slide up from the bottom edge + fade (instead of scaling — scaling
   a full-width sheet visibly insets it from the viewport edges mid-animation). This is the
   responsive half of `.animation-dialog-enter`/`-exit`: on mobile they slide as a sheet, on
   desktop they keep the scale motion (rules above). Bottom-sheet and full-sheet dialogs opt
   in via their `max-lg:dialog-*-sheet` classes. */

@media (max-width: 1023px) {
  .animation-dialog-enter,
  dialog.max-lg\:dialog-bottom-sheet[open],
  dialog.max-lg\:dialog-full-sheet[open] {
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .animation-dialog-exit,
  dialog.max-lg\:dialog-bottom-sheet.closing:not(.noslide),
  dialog.max-lg\:dialog-full-sheet.closing:not(.noslide) {
    animation: slideDownSheet 0.2s forwards;
  }
}

/* Same bottom-sheet slide, scoped to mobile only — used by modals that stay a
   centered 2-column dialog at tablet and only become a sheet below md. */

@media (max-width: 767px) {
  dialog.max-md\:dialog-bottom-sheet[open] {
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  dialog.max-md\:dialog-bottom-sheet.closing:not(.noslide) {
    animation: slideDownSheet 0.2s forwards;
  }
}

@keyframes slideUp {
  from {
    scale: 0.9;
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    scale: 1;
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    scale: 1;
    transform: translateY(0);
    opacity: 1;
  }

  to {
    scale: 0.95;
    transform: translateY(4%);
    opacity: 0;
  }
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownSheet {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* Right-slide for desktop modal drawers — the horizontal counterpart of slideUpSheet /
   slideDownSheet (identical 0.3s-in / 0.2s-out timing + easing). Drawers enter from and exit
   to the right edge on desktop; mobile drawers remain bottom sheets. Apply
   `.animation-slide-in-right` to the sliding panel; the drawer controller swaps in
   `.animation-slide-out-right` (and adds `.drawer-closing` to the scrim) on close. */

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Drawer body scroll region: a soft fade mask at the top + bottom edges so content dissolves
   (rather than hard-cutting) as it scrolls under the fixed header / footer. */

.drawer-body-scroll {
  -webkit-mask-image: linear-gradient(transparent 0%, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(transparent 0%, black 80px, black calc(100% - 80px), transparent 100%);
}

/* Backdrop scrim for desktop drawers — paired with the panel slide. A horizontal gradient
   that's DARKEST behind the drawer panel and fades to transparent away from it, so the dim
   visually anchors to wherever the drawer lives. Default `--drawer-scrim-angle` is 90deg
   (right-slide drawers → dark stop on the right); a future left-slide variant overrides it
   to -90deg on the drawer wrapper to flip the gradient.
   Animates `background` between two same-shaped gradients (only the dark stop's alpha
   changes) so the sliding panel — a child — is unaffected. */

@keyframes drawerScrimIn {
  from {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 69.75%);
  }

  to   {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 69.75%);
  }
}

@keyframes drawerScrimOut {
  from {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 69.75%);
  }

  to   {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 69.75%);
  }
}

@media (min-width: 1024px) {
  .animation-slide-in-right {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .animation-slide-out-right {
    animation: slideOutRight 0.2s forwards;
  }

  /* Scrim fades in with the panel on open; .drawer-closing fades it out on close. */

  [data-drawer-target="drawer"] {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 69.75%);
    animation: drawerScrimIn 0.3s ease;
  }

  [data-drawer-target="drawer"].drawer-closing {
    animation: drawerScrimOut 0.2s ease forwards;
  }
}

/* Mobile full-screen drawers (.full-screen-drawer) are full-screen sheets: they reuse the
   bottom-sheet slide-up/down (slideUpSheet / slideDownSheet) below the lg breakpoint, just at
   full height. The controller still toggles the shared animation-slide-in/out-right classes;
   here those map to the vertical sheet motion instead of the desktop horizontal push. */

@media (max-width: 1023px) {
  .full-screen-drawer.animation-slide-in-right {
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .full-screen-drawer.animation-slide-out-right {
    animation: slideDownSheet 0.2s forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animation-slide-in-right,
  .animation-slide-out-right,
  .full-screen-drawer.animation-slide-in-right,
  .full-screen-drawer.animation-slide-out-right,
  [data-drawer-target="drawer"],
  [data-drawer-target="drawer"].drawer-closing {
    animation: none;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes disappear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

#bt-docs-content h1,
#bt-docs-content h2,
#bt-docs-content h3,
#bt-docs-content h4,
#bt-docs-content h5,
#bt-docs-content h6{
  position: relative;
  margin-left: -1.2em;
  padding-left: 1.2em;
}

#bt-docs-content h1 a,
#bt-docs-content h2 a,
#bt-docs-content h3 a,
#bt-docs-content h4 a,
#bt-docs-content h5 a,
#bt-docs-content h6 a{
  text-decoration: none;
  display: none;
  position: absolute;
  float:left;
  margin-left:-1.2em;
  line-height: 1;
  width: 1em;
  height: 100%;
}

#bt-docs-content h1 a::before,
#bt-docs-content h2 a::before,
#bt-docs-content h3 a::before,
#bt-docs-content h4 a::before,
#bt-docs-content h5 a::before,
#bt-docs-content h6 a::before{
  content: "🔗";
}

#bt-docs-content h1:hover a,
#bt-docs-content h2:hover a,
#bt-docs-content h3:hover a,
#bt-docs-content h4:hover a,
#bt-docs-content h5:hover a,
#bt-docs-content h6:hover a{
  display: flex;
  justify-content: center;
  /* Align horizontal */
  align-items: center;
  /* Align vertical */
}

/* Import Electron utilities shared across all Tailwind-based themes. */

/* @import "../tailwind/electron.scss"; */

.electron a, .todesktop a {
  outline-color: var(--tw-ring-color);
  --tw-ring-color: rgba(3, 98, 198, var(--tw-ring-opacity));
  --tw-ring-opacity: 1;
}

.electron .electron-mobile-only, .todesktop .electron-mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .electron .electron-mobile-only, .todesktop .electron-mobile-only {
    display: none;
  }
}

.electron .electron-title-bar, .todesktop .electron-title-bar {
  /* override `md:rounded-radius-8` */
  border-top-left-radius: 0;
}

/* hide logo because it doesn't fit into the ui well. */

.electron .electron-title-bar img, .todesktop .electron-title-bar img {
  display: none;
}

.electron .electron-title-bar, .todesktop .electron-title-bar {
  min-height: 36px;
}

.electron .main-container-padding, .todesktop .main-container-padding {
  padding: 0;
}

.electron .main-container, .todesktop .main-container {
  /* override `md:rounded-radius-8` */
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* `height: 100vh` is for the desktop Electron app shell where the window IS
     the viewport. Scoping this to lg+ stops it from clamping the mobile
     layout to viewport height — that was clipping the marketplace listing's
     ~3550px of content to 812px and breaking page scrolling on every mobile
     viewport (web preview / Chrome devtools mobile mode). Desktop electron
     behavior is unchanged. */

@media (min-width: 1024px) {
  .electron .main-container, .todesktop .main-container {
    /* override `md:h-auto` */
    height: 100vh;
  }
}

/* hide profiler results because they don't fit into the ui well. */

.electron .profiler-results, .todesktop .profiler-results {
  display: none;
}

/* touch up the padding of the breadcrumbs. */

.electron ol.breadcrumb, .todesktop ol.breadcrumb {
  padding-top: 3px;
}

.cloudinary-field button.upload {
  margin: 0;
  border-radius: 4px;
  padding: 0;
  border: 2px solid #dde2ec;
  background: transparent;
  position: relative;
  min-height: 50px;
  min-width: 50px;
}

.cloudinary-field button.upload:not(.present) {
  min-height: 100px;
  min-width: 100px;
}

.cloudinary-field button.upload i {
  display: block;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  line-height: 50px;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  top: 50%;
  left: 50%;
  font-size: 32px;
  color: #dde2ec;
}

.cloudinary-field button.upload + button.clear {
  display: none;
  font-size: 32px;
  color: #dde2ec;
  background: transparent;
  border: 0;
  overflow: visible;
}

.cloudinary-field button.upload + button.clear:focus i, .cloudinary-field button.upload + button.clear:active i {
  color: var(--primary-500);
}

.cloudinary-field button.upload.present i {
  display: none;
}

.cloudinary-field button.upload.present + button.clear {
  display: inline-block;
}

.cloudinary-field button.upload:focus, .cloudinary-field button.upload:active {
  border-color: var(--primary-500);
}

.cloudinary-field button.upload:focus i, .cloudinary-field button.upload:active i {
  color: var(--primary-500);
}

input[type=tel] {
  line-height: 21px;
}

input[type=tel]::-moz-placeholder {
  color: #9ca3af;
}

input[type=tel]::placeholder {
  color: #9ca3af;
}

.select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple,
  .select2-container--default .select2-selection--single:hover,
  .select2-container--default .select2-selection--multiple:hover,
  .select2-container--default .select2-selection--single:focus,
  .select2-container--default .select2-selection--multiple:focus,
  .select2-container--default .select2-selection--single:focus-within,
  .select2-container--default .select2-selection--multiple:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.select2-container--default .select2-selection--single:disabled,
  .select2-container--default .select2-selection--multiple:disabled,
  .select2-container--default .select2-selection--single:disabled:hover,
  .select2-container--default .select2-selection--multiple:disabled:hover,
  .select2-container--default .select2-selection--single:disabled:focus,
  .select2-container--default .select2-selection--multiple:disabled:focus,
  .select2-container--default .select2-selection--single:disabled:focus-within,
  .select2-container--default .select2-selection--multiple:disabled:focus-within {
  --border-color: #DCD8DA;
}

.select2-container--default:not(.select2-container--disabled) .select2-selection--single:hover, .select2-container--default:not(.select2-container--disabled) .select2-selection--multiple:hover {
  --border-color: rgb(11 5 29 / 36%);
}

.no-edges .select2-container--default .select2-selection--single,
    .no-edges .select2-container--default .select2-selection--multiple {
  border-style: none !important;
  --border-width: 1px;
  --border-color: transparent;
  --ring-width: 4px;
}

.no-edges .select2-container--default .select2-selection--single:hover, .no-edges .select2-container--default .select2-selection--multiple:hover {
  --border-color: transparent;
}

.has-error .select2-container--default .select2-selection--single,
    .has-error .select2-container--default .select2-selection--multiple,
    .has-error .select2-container--default .select2-selection--single:hover,
    .has-error .select2-container--default .select2-selection--multiple:hover,
    .has-error .select2-container--default .select2-selection--single:focus,
    .has-error .select2-container--default .select2-selection--multiple:focus {
  --border-color: #e83b47;
  --ring-color: #fde3e5;
}

.select2-selection.select2-selection--single {
  min-height: auto;
  height: auto;
}

.select2-selection.select2-selection--single .select2-selection__rendered {
  padding-left: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  overflow: auto;
  white-space: normal;
  text-overflow: unset;
}

.select2-selection.select2-selection--single .select2-selection__rendered .super-select--option-label {
  display: flex;
  width: 100%;
  justify-content: space-between;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.select2-selection.select2-selection--single .select2-selection__arrow {
  padding-top: 35px;
}

.select2-container .select2-search--inline {
  border-radius: 0 !important;
  display: flex;
  margin-top: 0.25rem;
  height: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .select2-container .select2-search--inline {
    height: 1.75rem;
  }
}

.select2-container .select2-search--inline .select2-search__field {
  font-weight: 300;
  margin-top: 0;
  border-radius: 0 !important;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .select2-container .select2-search--inline .select2-search__field {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.select2 {
  display: block;
}

.select2 img {
  display: none;
}

.select2-results img {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  margin-right: 8px;
}

/* Hide chips inside the property values list wrapper —
   the values list controller renders them as a richer list below */

.property-values-select-wrapper .select2-selection--multiple .select2-selection__choice {
  display: none !important;
}

/* @import './trix_editor'; */

.code-editor .monaco-editor, .code-editor .monaco-editor .overflow-guard {
  border-radius: inherit;
}

.code-editor .monaco-editor, .code-editor .monaco-editor-background, .code-editor .monaco-editor .margin {
  background-color: var(--code-editor-background);
}

.rhino-editor::part(base) {
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
  overflow: hidden;
}

.rhino-editor, .trix-content {
  --role-background-hover-color: red;
  --role-border-focus-color: red;
  --rhino-text-color: unset;
  --rhino-dark-text-color: unset;
  --rhino-border-radius: 12px;
  --rhino-button-active-border-color: unset;
}

.rhino-editor::part(toolbar) {
  border-radius: 0.75rem !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-width: 1px;
  border-color: var(--content-border-input);
  font-weight: 400 !important;
  border-bottom: none !important;
}

.rhino-editor::part(toolbar__base) {
  border-radius: 0.75rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rhino-editor::part(bubble-menu__toolbar) {
  border-radius: 0.75rem;
  background-color: var(--background-elevated);
}

.rhino-editor::part(bubble-menu__toolbar__base) {
  border-radius: 0.75rem;
  background: var(--content-background-elevated, #fff);
  box-shadow: none !important;
}

.rhino-editor::part(bubble-menu__toolbar__base):focus-within {
  border-color: var(--content-border-input);
}

.rhino-editor::part(toolbar__base):focus-within {
  border-radius: 0.75rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-color: var(--content-border-input);
  border-bottom-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.rhino-editor .trix-content.field-border-for-error, .rhino-editor .trix-content.field-border-for-error:hover, .rhino-editor .trix-content.field-border-for-error:focus {
  --border-color: #e83b47;
  --ring-color: #fde3e5;
}

.rhino-editor[data-toolbar-hidden='true'] .trix-content {
  border-radius: 0.75rem;
}

.rhino-editor.single-line .trix-content {
  border-radius: 0.75rem;
  min-height: auto !important;
}

.rhino-editor
  .trix-content
  > *:not(ul, ol, table, media-element).is-empty::before {
  color: var(--rhino-placeholder-text-color);
  color: light-dark(
    var(--rhino-placeholder-text-color),
    var(--rhino-dark-placeholder-text-color)
  );
  content: attr(data-placeholder);
  pointer-events: none;
  height: 0;
  float: left;
}

/* Applies to all toolbar buttons */

.btn-toggle input[type='checkbox']:checked + button.button-secondary.rhino-editor::part(toolbar__button), .btn-toggle input[type='radio']:checked + button.button-secondary.rhino-editor::part(toolbar__button),.btn-toggle input[type='checkbox']:checked + button.button-secondary
.rhino-editor .rhino-toolbar-button, .btn-toggle input[type='radio']:checked + button.button-secondary
.rhino-editor .rhino-toolbar-button {
  background-color: var(--background-overlay);
}

.rhino-editor::part(toolbar__button),
.rhino-editor .rhino-toolbar-button {
  border-radius: 0.5rem;
  border-style: none;
  background-color: transparent;
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.rhino-editor::part(toolbar__button):hover,
.rhino-editor .rhino-toolbar-button:hover {
  border-radius: 0.5rem;
  background-color: var(--background-overlay);
}

/* Applies to &quot;active&quot; buttons which in practical terms is any button highlighted blue due to it being active in the editor. */

.rhino-editor::part(toolbar__button--active) {
  border-style: none;
  background-color: var(--background-overlay);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Applies to &quot;disabled&quot; buttons (buttons which are not currently usable) */

.rhino-editor::part(toolbar__button--disable) {
}

/* Only applies to undo button */

.rhino-editor::part(toolbar__button--undo) {
}

.rhino-editor table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

.rhino-editor table td,
.rhino-editor table th {
  border: 2px solid #ced4da;
  box-sizing: border-box;
  min-width: 1em;
  padding: 3px 5px;
  position: relative;
  vertical-align: top;
}

.rhino-editor table td > *,
.rhino-editor table th > * {
  margin-bottom: 0;
}

.rhino-editor table th {
  background-color: #f1f3f5;
  font-weight: bold;
  text-align: left;
}

.rhino-editor table .selectedCell:after {
  background: rgba(200, 200, 255, 0.4);
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.rhino-editor table .column-resize-handle {
  background-color: #adf;
  bottom: -2px;
  position: absolute;
  right: -2px;
  pointer-events: none;
  top: 0;
  width: 4px;
}

.rhino-editor table p {
  margin: 0;
}

.rhino-editor .tableWrapper {
  padding: 1rem 0;
  overflow-x: auto;
}

.rhino-editor .resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

rich-text-editor.inplace {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

rich-text-editor.inplace .trix-content {
  border: none !important;
  min-height: auto !important;
  padding: 0 !important;
}

rich-text-editor.inplace.rhino-editor {
  display: block !important;
}

/* @apply text-base md:text-sm; */

.trix-content div, .trix-content p {
  margin-bottom: 1rem;
}

.trix-content div:last-child, .trix-content p:last-child {
  margin-bottom: 0px;
}

.trix-content:not([readonly])
  media-element.attachment--preview:is(:focus-within, :focus, .has-focus) {
  outline: transparent;
  box-shadow: var(--rhino-focus-ring);
}

/* Restore numbers for all ordered lists */

.rhino-editor .trix-content ol {
  list-style-type: decimal !important;
  padding-left: 2em;
  margin-left: 0;
}

/* Consistent left padding for all lists */

.rhino-editor .trix-content ul,
.rhino-editor .trix-content ol {
  padding-left: 1.5em;
  margin-left: 0;
}

.rhino-editor
  .trix-content
  ul.checked-list:not([data-section] *):not([data-section]) {
  padding-left: 0;
}

.rhino-editor .trix-content ul.checked-list:not([data-section] *) li,
.rhino-editor .trix-content ul.checked-list:not([data-section] *) ul li {
  position: relative;
  padding-left: 1.5em;
  list-style: none;
}

.rhino-editor .trix-content ul.checked-list:not([data-section] *) li::before,
.rhino-editor
  .trix-content
  ul.checked-list:not([data-section] *)
  ul
  li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1em;
  height: 1em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" > <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="%230B051D" fill-opacity="0.64" /> <path d="M15.0714 9.23381C15.3666 9.04876 15.761 9.09057 16.0112 9.35217C16.2972 9.65179 16.2862 10.1267 15.9866 10.4127L10.8983 15.2701C10.7423 15.419 10.5296 15.4942 10.3147 15.4752C10.0999 15.4561 9.90317 15.3445 9.77567 15.1705L7.92528 12.6451L8.53596 12.2068L9.13466 11.758L10.48 13.5944L14.9518 9.32756L15.0714 9.23381Z" fill="white" /> <path d="M8.087 11.5963C8.42089 11.352 8.88982 11.4246 9.13466 11.758L8.53596 12.2068L7.92528 12.6451C7.6807 12.3111 7.75314 11.8411 8.087 11.5963Z" fill="white" /> </svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.editor-container[data-theme='offerlab'] {
  overflow-x: hidden;
}

.editor-container[data-theme='offerlab'] .form-control {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .editor-container[data-theme='offerlab'] .form-control input[type='text'] {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']::placeholder {
  color: rgb(11 5 29 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  /* OL-3343: keep textarea text + placeholder at 16px on desktop too — text-input-base
       shrinks to 14px at md, but the text-field component (.floating-input-field) is a flat 16px. */
}

@media (min-width: 768px) {
  .editor-container[data-theme='offerlab'] .form-control input[type='text'] {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  /* OL-3343: match the text-field component (.floating-input-field) box exactly — 12px radius,
       1px inset border (content-border-dark), 1px inset content-primary on hover, 2px inset
       content-primary on focus (no outer ring). Token vars (--content-*) are always defined in
       figma.css, so no hardcoded hex fallbacks (they'd only go stale). --rounded-radius-12 is
       not a CSS var, so its 12px fallback is load-bearing — keep it. */
  border: none;
  border-radius: var(--rounded-radius-12, 12px);
  box-shadow: 0 0 0 1px inset var(--content-border-dark);
  transition-property: box-shadow, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:disabled,.editor-container[data-theme='offerlab'] .form-control input[type='text'].disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:disabled:where(.dark, .dark *),.editor-container[data-theme='offerlab'] .form-control input[type='text'].disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:disabled,.editor-container[data-theme='offerlab'] .form-control input[type='text'].disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:disabled:where(.dark, .dark *),.editor-container[data-theme='offerlab'] .form-control input[type='text'].disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'].field-border-for-error,.editor-container[data-theme='offerlab'] .form-control input[type='text'].field-border-for-error:hover,.editor-container[data-theme='offerlab'] .form-control input[type='text'].field-border-for-error:focus {
  box-shadow: 0 0 0 2px inset #e83b47;
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  border-radius: 0.5rem;
}

.editor-container[data-theme='offerlab'] > [data-schemaid='root'] {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
  padding-bottom: 1rem !important;
}

.editor-container[data-theme='offerlab'] [data-schemaid='root'] > .je-header.je-object__title {
  display: none !important;
}

.editor-container[data-theme='offerlab'] [data-schemaid='root'] > p {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  padding-bottom: 1rem;
}

.editor-container[data-theme='offerlab'] [data-schemaid='root'] > .je-header {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 400;
}

.editor-container[data-theme='offerlab'] .je-object__container .je-object__controls {
  display: none !important;
}

.editor-container[data-theme='offerlab'] .je-object__container p {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  color: var(--content-secondary);
}

.editor-container[data-theme='offerlab'] .je-header.je-object__title {
  display: none !important;
}

.editor-container[data-theme='offerlab'] .je-object__container > .je-indented-panel,
  .editor-container[data-theme='offerlab'] > [data-schemapath='root'] > .je-indented-panel {
  margin: 0px !important;
  border-style: none !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.editor-container[data-theme='offerlab'] .je-object__container > .je-indented-panel .je-indented-panel {
  margin: 0px !important;
  padding: 0px !important;
}

.editor-container[data-theme='offerlab'] .je-header {
  margin-bottom: 0.25rem;
  display: flex !important;
  justify-content: space-between;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder {
  display: flex;
  gap: 0.5rem;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  cursor: pointer;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:focus: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);
  --tw-ring-color: var(--content-border-dark);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* set a default "press down" effect for small buttons */
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button svg {
  display: inline-block;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:active:not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --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));
}

.btn-toggle input[type='checkbox']:checked + button.editor-container[data-theme='offerlab'] .je-header .button-holder button.bg-transparent, .btn-toggle input[type='radio']:checked + button.editor-container[data-theme='offerlab'] .je-header .button-holder button.bg-transparent {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + button.editor-container[data-theme='offerlab'] .je-header .button-holder button span span, .btn-toggle input[type='radio']:checked + button.editor-container[data-theme='offerlab'] .je-header .button-holder button span span {
  color: var(--content-primary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--background-overlay);
  text-align: center;
  font-weight: 600;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  /* no inner shadow on any buttons! */
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  background-color: var(--bg-fill-secondary-hover) !important;
  transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 0.15s !important;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--background-overlay);
  color: var(--content-primary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  color: var(--content-primary);
  background-color: var(--bg-fill-secondary-hover) !important;
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button:active,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *),
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  @extend .button-primary-dark;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}


  .buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  color: var(--content-primary);
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: transparent !important;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  background-color: var(--background-overlay);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled]:not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled]:not(.no-disabled-style) {
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled]:not(.no-disabled-style):active {
  --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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0px !important;
}

form.button_to input[type='submit'].editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--primary-800);
}

form.button_to input[type='submit'].editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  background-color: var(--primary-900);
}

.editor-container[data-theme='offerlab'] [data-schemapath='root'] .form-control {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.editor-container[data-theme='offerlab'] .je-object__container .je-indented-panel .row {
  margin-bottom: 1rem !important;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* &:after {
      content: '';
      @apply block -ml-6 border-b border-content-border-neutral;
      width: calc(100% + 4rem);
      height: 1px;
    } */
  /* &:last-child {
      &:after {
        display: none;
      }
    } */
}

.editor-container[data-theme='offerlab'] .je-object__container .je-indented-panel .row .row {
  all: unset;
}

/* .je-object__container button[class*='json-editor-btn'],
  button[class*='json-editor-btn'] {
    @apply button-tertiary !button-small !mr-1 font-normal;
  }

  .je-object__container button.json-editor-btn-delete,
  button[class*='json-editor-btn-delete'] {
    @apply button-secondary text-sentiment-negative button-small;
  } */

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox'] {
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:last-child {
  margin-bottom: 0px;
}

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox'] {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--background-elevated);
}

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:checked {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  color: var(--background-elevated);
}

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus,
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active {
  --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: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-color: transparent !important;
}

.floating-input-field.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus,
.floating-input-field.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus:focus,
.floating-input-field.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus:hover,
.floating-input-field.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus:active,.floating-input-field
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active,
.floating-input-field
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active:focus,
.floating-input-field
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active:hover,
.floating-input-field
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active:active {
  box-shadow: none;
}

.editor-container[data-theme='offerlab'] .je-form-input-label {
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--content-primary);
}

.editor-container[data-theme='offerlab'] .je-object__container > p,
  .editor-container[data-theme='offerlab'] .je-header > span {
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--content-primary);
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] .je-header {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] > .je-indented-panel {
  border-style: none !important;
}

[data-select-all-target='wrapper'].editor-container[data-theme='offerlab'] .row [data-schematype='array'] > .je-indented-panel .je-child-editor-holder {
  border-color: var(--content-border-dark);
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] > .je-indented-panel .je-child-editor-holder {
  margin-bottom: 1rem !important;
  border-top-width: 1px !important;
  border-color: var(--content-border-neutral);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] > .je-indented-panel .je-child-editor-holder:first-child {
  border-top-width: 0px !important;
}

.editor-container[data-theme='offerlab'] .je-object__container .je-object__title > span,
  .editor-container[data-theme='offerlab'] .form-control label.je-form-input-label {
  display: flex !important;
  align-items: center !important;
}

/* Presets */

.preset-panel {
  width: 100%;
  overflow-y: auto;
  padding: 0.25rem;
}

.preset-btn {
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.preset-btn:hover {
  background: #f3f4f6;
}

.preset-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.preset-category-heading {
  font-weight: 600;
}

.preset-heading {
  font-weight: 700;
}

/* Native Color picker */

.editor-container[data-theme='offerlab'] input[type='color' i] {
  border-radius: 50%;
  inline-size: 30px;
  block-size: 30px;
  /* Can set padding between outer circle and color swatch for Firefox here;
   * it doesn't support a color-swarch-wrapper pseudoclass
   */
  padding: 1px !important;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(153, 153, 153);
}

/* Affects area between outer circle and color swatch. Firefox doesn't have an equivalent. */

.editor-container[data-theme='offerlab'] input[type='color' i]::-webkit-color-swatch-wrapper {
  padding: 1px;
}

/* Affects the inner circle, i.e. the current color selection */

.editor-container[data-theme='offerlab'] input[type='color' i]::-webkit-color-swatch {
  border-radius: 50%;
}

.editor-container[data-theme='offerlab'] input[type='color' i]::-moz-color-swatch {
  border-radius: 50%;
}

/*  section menu overrides */

[data-controller='sections--section-menu'] .editor-container[data-theme='offerlab'] {
  margin-top: 0px !important;
}

[data-controller='sections--section-menu'] .editor-container[data-theme='offerlab'] .form-control {
  margin: 0px !important;
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0px !important;
}

[data-controller='sections--section-menu'] .editor-container[data-theme='offerlab'] .je-form-input-label {
  margin-bottom: 0px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* headless */

form.headless {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.editor-container[data-theme='barebones'] label {
  display: none !important;
}

.editor-container[data-theme='barebones'] rich-text-editor {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.editor-container[data-theme='barebones'] rich-text-editor .trix-content {
  border: none !important;
  min-height: auto !important;
}

/* Pickr color-picker popover — restyled to match our popover/dropdown component
   (app/views/themes/atelier/_dropdown.html.erb: shadow-modal + border + rounded-radius-16) and to
   host the controls in-popover (hex input + swatch, eyedropper + copy footer, no Reset).

   Padding lives on the body + actions (not .pcr-app) so the divider between them spans full width. */

.pcr-app {
  border-radius: 1rem !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  --tw-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12) !important;
  --tw-shadow-colored: 0px 4px 24px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  border: 1px solid var(--content-border-neutral) !important;
  padding: 0 !important;
  /* Slide-up + fade matching our dropdown popovers. Transition-based (not the keyframe classes)
     because Pickr toggles `.visible` itself — transitions give us the close animation for free. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s !important;
}

.pcr-app.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Everything above the divider (palette/hue + hex input): top/left/right padding, gap owns the
   vertical rhythm. */

.pcr-app .pcr-ol-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0 0.75rem;
}

.pcr-app .pcr-ol-body > .pcr-interaction {
  margin: 0 !important;
}

.pcr-app .pcr-swatches:empty {
  display: none !important;
}

.pcr-color-palette {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Hide Pickr's default current/last-color bar — the swatch sits inside the hex input instead. */

.pcr-app .pcr-color-preview {
  display: none !important;
}

/* Hex input row → reads like our .text-input, with the swatch pinned to the right. */

.pcr-app .pcr-interaction {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
}

.pcr-app .pcr-interaction .pcr-result {
  display: block !important;
  width: 100% !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  --tw-numeric-spacing: tabular-nums !important;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction) !important;
  height: 2.5rem !important;
  margin: 0 !important;
  padding: 0 2.25rem 0 0.875rem !important;
  /* px-3.5, plus room on the right for the swatch */
  border: none !important;
  border-radius: var(--rounded-radius-12, 12px) !important;
  box-shadow: 0 0 0 1px inset var(--content-border-dark) !important;
  color: var(--content-primary) !important;
  background: transparent !important;
  transition: box-shadow 0.15s !important;
}

.pcr-app .pcr-interaction .pcr-result:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px inset var(--content-primary) !important;
}

.pcr-ol-swatch {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 1px solid var(--content-border-dark);
  pointer-events: none;
}

/* Utility bar: a full-width divider then the eyedropper/copy actions. The divider is a direct child
   with no horizontal padding (so it spans edge-to-edge); the actions row carries the left/right/
   bottom padding. The footer's gap is the space between the divider and the actions. */

.pcr-app .pcr-ol-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  /* space between the hex input above and the divider */
}

.pcr-app .pcr-ol-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--content-border-neutral);
}

.pcr-app .pcr-ol-actions {
  display: flex;
  align-items: center;
  padding: 0 0.75rem 0.75rem 0.75rem;
}

.pcr-app .pcr-ol-copy-wrap {
  position: relative;
  display: inline-flex;
  margin-left: auto;
  /* keep copy at the right even if the eyedropper is absent */
}

/* Copy button: cross-fade between the copy icon and the sentiment-positive checkmark. */

.pcr-app .pcr-ol-copy {
  position: relative;
}

.pcr-app .pcr-ol-copy-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pcr-app .pcr-ol-copy-icon[data-copy-icon="success"] {
  opacity: 0;
  transform: scale(0.6);
}

.pcr-app .pcr-ol-copy.is-copied .pcr-ol-copy-icon[data-copy-icon="default"] {
  opacity: 0;
  transform: scale(0.6);
}

.pcr-app .pcr-ol-copy.is-copied .pcr-ol-copy-icon[data-copy-icon="success"] {
  opacity: 1;
  transform: scale(1);
}

/* "Copied" confirmation — the dark .tooltip, above the copy button, desktop only. */

.pcr-app .pcr-ol-copy-tooltip {
  top: auto;
  left: auto;
  right: 0;
  bottom: calc(100% + 8px);
}

@media (max-width: 1023px) {
  .pcr-app .pcr-ol-copy-tooltip {
    display: none !important;
  }
}

/* Google Places Autocomplete - Custom Dropdown */

.address-autocomplete-wrapper {
  position: relative;
}

.address-autocomplete-wrapper.dropdown-open .floating-input-field {
  box-shadow: 0 0 0 2px inset var(--content-primary, #342E26);
}

.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--content-background-elevated, #FFF);
  border-radius: var(--rounded-radius-16, 16px);
  box-shadow: var(--shadow-modal, 0 20px 80px 0 rgba(0, 0, 0, 0.06), 0 7.3px 29.2px 0 rgba(0, 0, 0, 0.05), 0 3.5px 14.2px 0 rgba(0, 0, 0, 0.04), 0 1.7px 6.9px 0 rgba(0, 0, 0, 0.03), 0 0.7px 2.7px 0 rgba(0, 0, 0, 0.02));
  overflow: hidden;
  margin-top: 4px;
}

.autocomplete-dropdown.visible {
  display: block;
}

.autocomplete-dropdown-item {
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-dropdown-item:hover,
.autocomplete-dropdown-item.active {
  background: var(--content-background-base, #F7F5F0);
}

.autocomplete-dropdown-item-line {
  font-size: var(--size-base, 16px);
  font-weight: 400;
  line-height: 150%;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

.autocomplete-dropdown-item-line .matched {
  font-weight: 600;
  color: var(--content-primary, #342E26);
}

.autocomplete-dropdown-subtitle {
  padding: 12px 14px 4px 14px;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  font-size: var(--size-xs, 12px);
  font-weight: 400;
  line-height: 150%;
}

/* Floating Input Container */

.floating-input {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Floating Input Field Styles */

.floating-input-field {
  padding: 22px 14px 8px 14px;
  font-size: 16px;
  line-height: 1.5;
  background: var(--content-background-elevated, #fff);
  border: none;
  box-shadow: 0 0 0 1px inset var(--content-border-dark, rgba(52, 46, 38, 0.12));
  border-radius: var(--rounded-radius-12, 12px);
  color: var(--content-primary, #342e26);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  width: 100%;
}

.floating-input-field::-moz-placeholder {
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

.floating-input-field::placeholder {
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

/* Add extra left padding when icon is inside */

.floating-input.has-icon .floating-input-field {
  padding-left: 2.5rem;
  /* 40px - matches pl-10 */
}

.floating-input-field:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
}

.floating-input-field:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

/* Error state: reuse the focus treatment (2px inset outline) but in sentiment-negative,
   and turn the entered text red. Higher specificity than :focus/:hover so it persists
   even while the field is focused. */

.floating-input-field.field-border-for-error,
.floating-input-field.field-border-for-error:hover,
.floating-input-field.field-border-for-error:focus {
  box-shadow: 0 0 0 2px inset #e83b47;
  color: #951f27;
}

/* Remove all borders/shadows when hide_border is used (including focus and active states) */

.floating-input-field.shadow-none,
.floating-input-field.shadow-none:focus,
.floating-input-field.shadow-none:hover,
.floating-input-field.shadow-none:active {
  box-shadow: none !important;
}

/* Floating Label Styles - CSS-only using :placeholder-shown and :focus-within */

.floating-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  font-size: 16px;
  font-weight: normal;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  pointer-events: none;
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: top 0.2s ease-out, transform 0.2s ease-out;
}

/* Float label when input is focused, has value, or has a placeholder */

.floating-input .floating-input-field:not(:-moz-placeholder-shown)+.floating-label {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

.floating-input:focus-within .floating-label,
.floating-input .floating-input-field:not(:placeholder-shown)+.floating-label,
.floating-input .floating-input-field[placeholder]:not([placeholder=' '])+.floating-label {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

/* JavaScript-controlled float state for super_select and other dynamic fields */

.floating-label.float {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

/* Account for icon-inside variant: nudge label to the right */

.floating-input.has-icon .floating-label {
  left: 2.5rem;
}

/* Account for phone field country selector: intlTelInput adds .iti wrapper */

/* Target phone inputs specifically - intlTelInput wraps the input in .iti */

.floating-input input[type='tel'].floating-input-field {
  padding-left: 4rem;
  /* Account for country selector width (flag + dropdown arrow) */
}

.floating-input input[type='tel'].floating-input-field+.floating-label,
.floating-input:has(input[type='tel']) .floating-label {
  left: 4rem;
  /* Match input padding */
}

/* Keep phone field label floating when input has value (intlTelInput may modify placeholder) */

/* Use :has() to check if phone input is not showing placeholder - works even when wrapped in .iti */

.floating-input:has(input[type='tel'].floating-input-field:not(:-moz-placeholder-shown)) .floating-label, .floating-input:has(.iti input[type='tel'].floating-input-field:not(:-moz-placeholder-shown)) .floating-label {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

.floating-input:has(input[type='tel'].floating-input-field:not(:placeholder-shown)) .floating-label,
.floating-input:has(.iti input[type='tel'].floating-input-field:not(:placeholder-shown)) .floating-label {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

[data-select-all-target='wrapper'].required > label::after {
  display: block;
}

.required > label::after {
  display: inline-block;
  padding-left: 0.25rem;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(232 59 71 / var(--tw-text-opacity, 1));
  content: '*';
}

/* A label-left / asset-picker-right field row (e.g. the team Logo row) whose alignment + layout
   depend on whether an asset is set. The row itself is items-center (empty state: the compact
   upload button centers against the label). Once a logo is set we key off the filled preview image
   (data-fields--asset-picker-target="filePreviewImage") — which reacts live on upload without a
   re-render, and excludes the asset-picker gallery thumbnails that share the row's DOM:
     • any width → top-align the label beside the tall preview card.
     • mobile (<lg) → stack the preview full-width below the text. */

.field-row-stack-when-filled:has(img[data-fields--asset-picker-target="filePreviewImage"]) {
  align-items: flex-start;
}

@media (max-width: 1023px) {
  .field-row-stack-when-filled:has(img[data-fields--asset-picker-target="filePreviewImage"]) {
    flex-direction: column;
    align-items: stretch;
  }
}

.filter-select.select2-container,
.filter-select .select2-selection.select2-selection--single {
  height: 32px !important;
}

.filter-select .select2-selection.select2-selection--single {
  box-shadow: 0px 0px 0px 1px var(--content-border-neutral);
}

.filter-select
  .select2-selection.select2-selection--single
  .select2-selection__rendered
  .super-select--option-label {
  color: var(--interactive-primary);
}

html .filter-select .select2-selection__rendered {
  padding-top: 5px !important;
}

html .filter-select b[role='presentation'] {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none" class="w-6 h-6 stroke-width-1.5 icon"><path d="M8 10.7393L12 14.7393L16 10.7393" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>') !important;
  background-size: auto !important;
  width: 17px;
  top: 1rem !important;
  opacity: 0.5;
  transform: translateY(-50%) translateX(5px) !important;
}

.select-label-nowrap .super-select--option-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root {
  --icon-fill: transparent;
  --icon-fill-opacity: 0;
}

#sidebar-more .menu form.button_to {
  width: 100%;
}

#sidebar-more .menu a,
#sidebar-more .menu button {
  display: flex;
  width: 100%;
  flex-grow: 1;
  cursor: pointer;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  text-decoration-line: none;
}

#sidebar-more .menu a:hover,
#sidebar-more .menu button:hover {
  background-color: var(--background-base);
  text-decoration-line: none;
}

#sidebar-more .menu a:focus,
#sidebar-more .menu button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Sidebar toggle (drawer) icon. The drawer SVG's second path is the inner
   filled bar; we slide it side-to-side so one icon reads as two states:
     - Expanded (no state class): bar on the LEFT — the "close/collapse" look.
     - Collapsed / peek: bar slides to its authored RIGHT position — the "open" look.
   translateX is in SVG user units (viewBox 0 0 24 24): the interior is centred at
   x=12 and the bar's authored centre is 14.8, so a 5.6-unit shift mirrors it to
   9.2. The transition makes the toggle animate the bar across on click. */

.drawer-toggle-icon path:last-of-type {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(-5.6px);
}

.sidebar-collapsed .drawer-toggle-icon path:last-of-type,
.sidebar-peeking .drawer-toggle-icon path:last-of-type {
  transform: translateX(0);
}

/* Menu rows fill the sidebar width. Most items already carry `w-full` in their
   own class; this also covers `button_to` form wrappers (which Rails renders
   without a width class) and dialog/popover rows that don't set their own.
   Intentionally NOT `!important` so individual buttons can opt out below with a
   higher-specificity selector — no `!important` arms race. */

#menu-wrapper a,
#menu-wrapper button,
#menu-wrapper form.button_to {
  width: 100%;
}

/* Icon buttons (dialog close, etc.) size to their content instead of stretching
   to the full menu width. `#menu-wrapper .x` (1,1,0) outranks the element rule
   above (1,0,1), so plain `width: auto` wins — no `!important`. The bottom
   account pill is intentionally NOT listed here: in the expanded nav it now
   spans the full width (the gift shortcut moved to the collapsed view only). */

#menu-wrapper .button-icon {
  width: auto;
}

/* Expanded nav-item icons are 24px (per Figma). The collapsed state bumps them
     back to 28px below, where they're the only content in a 48px tab. */

#menu-wrapper .item .icon {
  display: none;
}

@media (min-width: 1024px) {
  #menu-wrapper .item .icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
  }
}

#menu-wrapper .item .icon img {
  width: 1.5rem;
  height: 1.5rem;
}

#menu-wrapper .item .icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

#menu-wrapper .item .icon svg path {
  stroke-width: 2 !important;
}

/* Every collapsed nav tab is a fixed 44×44 box with centered content (matching
       the expanded item height: p-2.5 + 24px icon), so a larger inner element
       (e.g. the 32px account avatar) can't change the tab's footprint. Padding is
       dropped since the fixed size + centering handles spacing. Icons inherit the
       24px base size — no collapsed override — so they match the expanded view. */

@media (min-width: 1024px) {
  .sidebar-collapsed #menu-wrapper .item {
    width: 2.75rem;
    height: 2.75rem;
    max-width: none;
    justify-content: center;
    padding: 0px;
  }

  .sidebar-collapsed #menu-wrapper .item .label {
    margin: 0px;
    max-width: 0px;
    opacity: 0;
  }
}

.sidebar-collapsed #menu-wrapper .item .tooltip {
  /* inline-flex (not inline-block) so the tooltip stays a flex container and
         its `items-center` actually vertically centers the label text. */
}

@media (min-width: 1024px) {
  .sidebar-collapsed #menu-wrapper .item .tooltip {
    display: inline-flex;
  }

  .sidebar-collapsed #menu-wrapper .item .secondary-label {
    display: none;
  }
}

@keyframes nil-animation {
  0% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

[data-turn-exit],
[data-turn-enter] {
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);
  animation-fill-mode: forwards;
}

/* Dumb - but any elements with data-tun will force the page to wait until the animation is complete */

/* so we need a dummy animation as a fallback case */

html.turn-exit [data-turn-exit],
html.turn-enter [data-turn-enter] {
  animation-name: nil-animation;
  animation-duration: 0.1;
}

html.turn-exit [data-turn-exit="fade-out"] {
  animation-name: fade-out-left;
  animation-duration: 0.25s;
}

html.turn-exit [data-turn-enter="fade-in"] {
  animation-name: fade-out-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit [data-turn-exit] {
  animation-name: fade-out-up;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit.turn-reverse [data-turn-exit] {
  animation-name: fade-in-up;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter [data-turn-enter] {
  animation-name: fade-in-up;
  animation-duration: 0.6s;
}

html.turn-enabled.turn-enter.turn-reverse [data-turn-enter] {
  animation-name: fade-out-up;
  animation-duration: 0.6s;
}

html.turn-enabled.turn-exit [data-turn-exit="left"] {
  animation-name: fade-out-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit.turn-reverse [data-turn-exit="left"],
html.turn-enabled.turn-exit[data-turbo-visit-direction="back"]
  [data-turn-exit="left"] {
  animation-name: fade-out-right;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit [data-turn-exit="right"] {
  animation-name: fade-out-right;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit.turn-reverse [data-turn-exit="right"],
html.turn-enabled.turn-exit[data-turbo-visit-direction="forward"]
  [data-turn-exit="right"] {
  animation-name: fade-out-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter [data-turn-enter="left"] {
  animation-name: fade-in-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter.turn-reverse [data-turn-enter="left"],
html.turn-enabled.turn-enter[data-turbo-visit-direction="forward"]
  [data-turn-exit="left"] {
  animation-name: fade-in-right;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter [data-turn-enter="right"] {
  animation-name: fade-in-right;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter.turn-reverse [data-turn-enter="right"],
html.turn-enabled.turn-enter[data-turbo-visit-direction="back"]
  [data-turn-enter="right"] {
  animation-name: fade-in-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-before-exit [data-turn-exit],
html.turn-enabled.turn-exit [data-turn-exit] {
  will-change: transform, opacity;
}

@keyframes fade-out-up {
  0% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -2rem, 0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fade-out-left {
  0% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(-20rem, 0, 0);
  }
}

@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(20rem, 0, 0);
  }
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translate3d(20rem, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translate3d(-20rem, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

/* Main-nav popover variant.
   Applied to the dropdown surface via `menu_class:` on themes/atelier/dropdown,
   and to sibling sub-popovers spawned by the nav-submenu controller. Overrides
   the default popover's border + width/spacing so the global nav menu can
   match its own spec without affecting the base popover.

   Note: no `overflow-hidden` on the surface — cascading submenus need to extend
   beyond the parent's bounding box. Inner items have their own padding so
   they don't visually reach the rounded corners. */

.main-nav-popover {
  max-width: 320px;
  border-width: 0px;
}

.main-nav-popover [data-behavior="menu-items"] {
  gap: 0px;
  min-width: 0;
}

/* Items inside the main-nav popover read at full primary color (not dimmed
   like the sidebar nav rows), use the spec's tighter vertical padding, and
   target the 36px row min-height from Figma. */

.main-nav-popover [data-desktop-menu-target="menuItemLink"] {
  min-height: 2.25rem;
  gap: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  color: var(--content-primary);
}

/* Icon-only buttons (back arrow, swap teams) need to stay square — `#menu-wrapper
   a, button, form.button_to { width: 100% !important }` would otherwise stretch
   them full-width. We re-scope under `#menu-wrapper` to beat the id-selector
   specificity. */

#menu-wrapper .main-nav-popover button.popover-icon-button {
  width: 2rem !important;
}

.conversation-input-shadow {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0),
    0px 9px 9px 0px rgba(0, 0, 0, 0.01), 0px 2px 5px 0px rgba(0, 0, 0, 0.06);
}

.message {
  /* why were we doing this? */
  /* @apply !break-all; */
}

.message .bg-brand-primary-brew .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.tool_call {
  /* display: none; */
}

/* Show any .tool_call that is not immediately followed by another .tool_call */

.tool_call:not(:has(+ .tool_call)) {
  /* display: block; */
}

.swiper-slide-thumb-active {
  border-color: var(--content-primary);
}

/* Marketplace listing media gallery — Swiper + mux-player native chrome.
   See app/views/public/offers/partials/_gallery.html.erb +
   app/javascript/controllers/gallery_controller.js. Swiper owns the slider
   layout, transitions, and a11y; this file is the OfferLab-specific surface
   on top of that — the 4% media overlay on image slides, the rounded slide
   container, the thumb rail's responsive scroll-snap rail, edge-bleed on the
   mobile strip, and a couple of mux-player CSS-variable overrides so its
   native chrome matches the listing palette. */

[data-controller~="gallery"] {
  --gallery-radius: 24px;
}

.gallery-container {
  max-width: 667px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Main slider — Swiper-driven.
   ──────────────────────────────────────────────────────────────────────── */

.gallery-main {
  width: 100%;
  /* Fixed 5:4 viewport drives the slide height from the column width so the
     gallery scales with the layout. Desktop fade-effect needs the wrapper to
     have a deterministic height; mobile's free-mode strip just respects its
     slides' intrinsic dimensions inside the same box. */
  aspect-ratio: 5 / 4;
}

.gallery-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Image slide. The button wrap centers the image, hosts the 4% media overlay,
   and is the click target the controller wires to `gallery#openLightbox`. */

.gallery-slide .image-slide-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  border-radius: var(--gallery-radius);
  overflow: hidden;
}

.gallery-slide .image-slide-wrap img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

/* Video slide. Wrap respects the asset's authored aspect ratio (inlined as
   style="aspect-ratio: w / h" from ERB); mux-player fills it. No more
   JS-driven sizing — mux-player + the aspect-ratio style do the work. */

.gallery-slide .video-slide-wrap {
  position: relative;
  width: 100%;
  max-height: 100%;
  border-radius: var(--gallery-radius);
  overflow: hidden;
}

.gallery-slide .video-slide-wrap mux-player {
  width: 100%;
  height: 100%;
  --media-object-fit: contain;
  --media-object-position: center;
  /* mux-player exposes CSS variables for its chrome — these tune the
     accent color toward the OfferLab content-primary so play/pause/scrub
     match the rest of the listing. The rest stays mux's defaults. */
  --media-primary-color: var(--content-primary, #342e26);
  --media-secondary-color: rgba(255, 255, 255, 0.7);
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile-only edge-bleed: extend the swiper container past the page gutter
   so cards bleed off the screen edges during a swipe. Matches the
   pricing-payout carousel pattern.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .gallery-container {
    max-width: none;
    padding: 0;
  }

  .gallery-main.edge-bleed-mobile {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    /* Free-mode strip is per-slide auto-width — strip the aspect ratio so each
       slide hugs its own intrinsic media size. */
    aspect-ratio: auto;
  }

  .gallery-main .swiper-slide {
    width: auto;
    max-width: calc(100vw - 48px);
  }

  .gallery-slide .image-slide-wrap,
  .gallery-slide .video-slide-wrap {
    /* Cap at 5:4 on the mobile strip too, but let portrait media stay taller
       by reading the natural aspect ratio of its inner element. */
    aspect-ratio: 5 / 4;
    height: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Thumbnail rail — desktop only.
   ──────────────────────────────────────────────────────────────────────── */

.thumbnail-nav-wrapper {
  display: none;
}

@media (min-width: 1024px) {
  .thumbnail-nav-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .thumbnail-swiper {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
}

.thumbnail-slide {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  /* Swiper's `watchSlidesProgress` adds `.swiper-slide-thumb-active` to the
     thumb whose main slide is in view — outline it so the active thumb reads
     against the rail without taking layout space (no border shift). */
  outline: 0 solid transparent;
  outline-offset: -2px;
  transition: outline-color 150ms ease;
}

.thumbnail-slide.swiper-slide-thumb-active {
  outline: 2px solid var(--content-primary, #342e26);
}

.thumbnail-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────────
   Lightbox — uses the shared/dialog component for chrome.
   The dialog itself supplies the modal/sheet behavior; this file just sizes
   the inner Swiper so images letterbox cleanly and videos take the full
   visible area.
   ──────────────────────────────────────────────────────────────────────── */

.lightbox-main {
  width: 100%;
  height: 100%;
  min-height: 60vh;
}

.lightbox-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox-slide img {
  max-width: 100%;
  max-height: calc(100dvh - 96px);
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.lightbox-slide mux-player {
  max-width: 100%;
  max-height: calc(100dvh - 96px);
  width: 100%;
  --media-primary-color: var(--content-primary, #342e26);
  --media-secondary-color: rgba(255, 255, 255, 0.7);
}

.markdown-content {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.markdown-content :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.markdown-content :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.markdown-content :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.markdown-content :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.markdown-content :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.markdown-content :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.markdown-content :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.markdown-content :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.markdown-content :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.markdown-content :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.markdown-content :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.markdown-content :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.markdown-content :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.markdown-content :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.markdown-content :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.markdown-content :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.markdown-content :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.markdown-content :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.markdown-content :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.markdown-content :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.markdown-content :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.markdown-content :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.markdown-content :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.markdown-content :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.markdown-content :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.markdown-content :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.markdown-content :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.markdown-content :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.markdown-content :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.markdown-content :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.markdown-content :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.markdown-content :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.markdown-content :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.markdown-content :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.markdown-content :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.markdown-content :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.markdown-content :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.markdown-content :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.markdown-content :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.markdown-content :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.markdown-content :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.markdown-content :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.markdown-content :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.markdown-content :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.markdown-content :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.markdown-content :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.markdown-content :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.markdown-content :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.markdown-content :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.markdown-content :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.markdown-content :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.markdown-content :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.markdown-content :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-content :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.markdown-content {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.markdown-content :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-content :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.markdown-content :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.markdown-content :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.markdown-content :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.markdown-content :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.markdown-content :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.markdown-content :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.markdown-content :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.markdown-content :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.markdown-content :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.markdown-content :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.markdown-content :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.markdown-content :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.markdown-content :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.markdown-content :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.markdown-content :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.markdown-content :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.markdown-content :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.markdown-content p:first-child {
  margin-top: 0px !important;
}

.markdown-content p:last-child {
  margin-bottom: 0px !important;
}

/* Responsive table that displays as cards on mobile and table on desktop */

.table-responsive {
  container-type: inline-size;
}

/* Regular tables should be horizontally scrollable */

.table-responsive:not(.table-cards) {
  overflow-x: auto;
}

.table-responsive table {
  width: 100%;
}

/* OK hide header on mobile - only when table-cards class is present */

.table-responsive.table-cards thead {
  display: none;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards thead {
    display: table-header-group;
  }
}

.table-responsive thead th {
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--content-secondary);
  /* Unified opacities */
}

@container (min-width: 42rem) {
  .table-responsive thead th {
    position: relative;
  }

  .table-responsive thead th:first-child::before {
    position: absolute;
    bottom: 0px;
    left: 1rem;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive thead th:last-child::before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 1rem;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive thead th:not(:first-child):not(:last-child)::before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }
}

.table-responsive.table-cards tbody {
  display: block;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards tbody {
    display: table-row-group;
  }
}

/* Base tbody styling for regular tables */

.table-responsive tbody {
  display: table-row-group;
}

.table-responsive.table-cards tr {
  margin-bottom: 0.75rem;
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--background-elevated);
}

@container (min-width: 42rem) {
  .table-responsive.table-cards tr {
    margin-bottom: 0px;
    display: table-row;
    border-radius: 0;
  }
}

.table-responsive.table-cards tr {
  /* Unified border opacity */
  border-width: 2px;
  border-color: var(--content-border-neutral);
}

@container (min-width: 42rem) {
  .table-responsive.table-cards tr {
    border-style: none;
  }
}

.table-responsive.table-cards tr {
  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;
}

@container (min-width: 42rem) {
  .btn-toggle input[type='checkbox']:checked + .table-responsive.table-cards tr:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .table-responsive.table-cards tr:hoverbutton.button-secondary {
    background-color: var(--background-overlay);
  }
}

.table-responsive.table-cards tr:hover {
  background-color: var(--background-base);
}

@container (min-width: 42rem) {
  .table-responsive.table-cards tr:hover {
    background-color: transparent;
  }
}

.table-responsive.table-cards tr {
  /* Added mobile hover */
}

/* Base tr styling for regular tables */

.table-responsive tr {
  display: table-row;
}

.table-responsive.table-cards td {
  display: block;
  padding: 0.75rem;
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td {
    display: table-cell;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
    flex: none;
  }
}

.table-responsive.table-cards td {
  /* Ensure flex is not applied on larger screens if set below */
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td::before {
    --tw-content: none;
    content: var(--tw-content);
  }

  .table-responsive.table-cards td {
    position: relative;
  }
}

.table-responsive.table-cards td {
  /* On mobile, treat td as a flex container to align label and value */
  display: flex;
  flex-direction: row;
  align-items: center;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td {
    display: table-cell;
  }
}

/* Base td styling for regular tables */

.table-responsive td {
  display: table-cell;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  position: relative;
}

@container (min-width: 42rem) {
  .table-responsive td:first-child::before {
    position: absolute;
    bottom: 0px;
    left: 1rem;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive td:last-child::before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 1rem;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive td:not(:first-child):not(:last-child)::before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }
}

/* OK Only apply data-label styling when the attribute exists - only for table-cards */

.table-responsive.table-cards td[data-label]:not([data-label=''])::before {
  margin-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-secondary);
  --tw-content: attr(data-label);
  content: var(--tw-content);
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td[data-label]:not([data-label=''])::before {
    content: var(--tw-content);
    margin-bottom: 0px;
  }
}

.table-responsive.table-cards td[data-label]:not([data-label='']) {
  /* Increased opacity for data-label */
}

/* OK Adjust the ::before pseudo-element for flex alignment on mobile - only for table-cards */

.table-responsive.table-cards td[data-label]:not([data-label=''])::before {
  width: 6rem;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td[data-label]:not([data-label=''])::before {
    display: none;
  }
}

/* OK Add bottom border for data-label cells on desktop using ::after - only for table-cards */

@container (min-width: 42rem) {
  .table-responsive.table-cards
  td[data-label]:not([data-label='']):first-child::after {
    position: absolute;
    bottom: 0px;
    left: 1rem;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive.table-cards
  td[data-label]:not([data-label='']):last-child::after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 1rem;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive.table-cards
  td[data-label]:not([data-label='']):not(:first-child):not(
    :last-child
  )::after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }
}

/* OK hover - only for table-cards */

@container (min-width: 42rem) {
  .table-responsive.table-cards tr:hover td {
    background-color: var(--background-base);
  }
}

/* OK rounded-radius-4 table rows - only for table-cards */

@container (min-width: 42rem) {
  .table-responsive.table-cards tr:hover td:first-child {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
  }

  .table-responsive.table-cards tr:hover td:last-child {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
  }
}

/* Base hover styling for regular tables */

.table-responsive tr:hover td {
  background-color: var(--background-base);
}

@media (min-width: 1024px) {
  main .page:first-of-type {
    margin-right: 9px;
    margin-top: 9px;
    height: calc(100dvh - 1rem);
    overflow: auto;
    border-width: 1px;
  }
}

@media not all and (min-width: 1024px) {
  main .page:first-of-type {
    border-style: none;
  }
}

[data-select-all-target='wrapper']main .page:first-of-type >.title {
  border-color: var(--content-border-dark);
}

main .page:first-of-type >.title {
  display: flex;
  height: 4rem;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  border-color: var(--content-border-neutral);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.02rem;
  font-weight: 700;
  color: var(--content-primary);
}

/* air-datepicker - RailsBlocks styling */

.air-datepicker {
  --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --adp-font-size: 14px;
  --adp-width: 246px;
  --adp-z-index: 40;
  --adp-padding: 4px;
  --adp-grid-areas: "nav" "body" "timepicker" "buttons";
  --adp-transition-duration: 0.3s;
  --adp-transition-ease: ease-out;
  --adp-transition-offset: 8px;
  --adp-background-color: #fff;
  --adp-background-color-hover: #f0f0f0;
  --adp-background-color-active: #eaeaea;
  --adp-background-color-in-range: rgba(16, 16, 16, 0.1);
  --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2);
  --adp-background-color-selected-other-month-focused: #f1f1f1;
  --adp-background-color-selected-other-month: #e6e6e6;
  --adp-color: #4a4a4a;
  --adp-color-secondary: #9c9c9c;
  --adp-accent-color: #0a0a0a;
  --adp-color-current-date: var(--adp-accent-color);
  --adp-color-other-month: #dedede;
  --adp-color-disabled: #aeaeae;
  --adp-color-disabled-in-range: #939393;
  --adp-color-other-month-hover: #c5c5c5;
  --adp-border-color: rgba(0, 0, 0, 0.1);
  --adp-border-color-inner: #efefef;
  --adp-border-radius: 8px;
  --adp-border-color-inline: #d7d7d7;
  --adp-nav-height: 32px;
  --adp-nav-arrow-color: var(--adp-color-secondary);
  --adp-nav-action-size: 32px;
  --adp-nav-color-secondary: var(--adp-color-secondary);
  --adp-day-name-color: #464646;
  --adp-day-name-color-hover: #f1f1f1;
  --adp-day-cell-width: 1fr;
  --adp-day-cell-height: 32px;
  --adp-month-cell-height: 42px;
  --adp-year-cell-height: 56px;
  --adp-pointer-size: 10px;
  --adp-poiner-border-radius: 2px;
  --adp-pointer-offset: 14px;
  --adp-cell-border-radius: 4px;
  --adp-cell-background-color-hover: var(--adp-background-color-hover);
  --adp-cell-background-color-selected: #1d1d1d;
  --adp-cell-background-color-selected-hover: #303030;
  --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1);
  --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2);
  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
  --adp-btn-height: 32px;
  --adp-btn-color: var(--adp-accent-color);
  --adp-btn-color-hover: var(--adp-color);
  --adp-btn-border-radius: var(--adp-border-radius);
  --adp-btn-background-color-hover: var(--adp-background-color-hover);
  --adp-btn-background-color-active: var(--adp-background-color-active);
  --adp-time-track-height: 1px;
  --adp-time-track-color: #dedede;
  --adp-time-track-color-hover: #b1b1b1;
  --adp-time-thumb-size: 12px;
  --adp-time-padding-inner: 10px;
  --adp-time-day-period-color: var(--adp-color-secondary);
  --adp-mobile-font-size: 16px;
  --adp-mobile-nav-height: 40px;
  --adp-mobile-width: 320px;
  --adp-mobile-day-cell-height: 38px;
  --adp-mobile-month-cell-height: 48px;
  --adp-mobile-year-cell-height: 64px;
}

.air-datepicker-overlay {
  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);
  --adp-overlay-transition-duration: 0.3s;
  --adp-overlay-transition-ease: ease-out;
  --adp-overlay-z-index: 99;
}

/* All cells need position relative for pseudo-elements */

.air-datepicker-cell {
  position: relative;
}

/* Selected cells - show circle */

.air-datepicker-cell.-selected- {
  color: #ffffff;
  background: transparent !important;
}

.air-datepicker-cell.-selected-::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: var(--adp-cell-background-color-selected);
  border-radius: 50%;
  z-index: -1;
}

/* In-range cells show gray background */

.air-datepicker-cell.-in-range- {
  background: var(--adp-cell-background-color-in-range) !important;
}

/* First selected cell in range - gray background only on right half */

.air-datepicker-cell.-selected-.-range-from-::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: var(--adp-cell-background-color-in-range);
  z-index: -2;
}

/* Last selected cell in range - gray background only on left half */

.air-datepicker-cell.-selected-.-range-to-::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  background: var(--adp-cell-background-color-in-range);
  z-index: -2;
}

/* Single day selection - no gray background */

.air-datepicker-cell.-selected-.-range-from-.-range-to-::after {
  display: none;
}

.dark .air-datepicker {
  --adp-background-color: #2d2d2d;
  --adp-background-color-hover: #3a3a3a;
  --adp-background-color-active: #4a4a4a;
  --adp-background-color-in-range: rgba(196, 196, 196, 0.2);
  --adp-background-color-in-range-focused: rgba(196, 196, 196, 0.3);
  --adp-background-color-selected-other-month-focused: #333;
  --adp-background-color-selected-other-month: #444;
  --adp-color: #e0e0e0;
  --adp-color-secondary: #a0a0a0;
  --adp-accent-color: #ffffff;
  --adp-color-other-month: #555;
  --adp-color-disabled: #777;
  --adp-color-disabled-in-range: #888;
  --adp-color-other-month-hover: #666;
  --adp-border-color: #ffffff1a;
  --adp-border-color-inner: #444;
  --adp-border-color-inline: #444444;
  --adp-nav-arrow-color: var(--adp-color-secondary);
  --adp-day-name-color: #c0c0c0;
  --adp-day-name-color-hover: #3a3a3a;
  --adp-cell-background-color-hover: var(--adp-background-color-hover);
  --adp-cell-background-color-selected: #ffffff;
  --adp-cell-background-color-selected-hover: #e9e9e9;
  --adp-cell-background-color-in-range: rgba(175, 175, 175, 0.2);
  --adp-cell-background-color-in-range-hover: rgba(169, 169, 169, 0.3);
  --adp-btn-color: var(--adp-accent-color);
  --adp-btn-color-hover: var(--adp-color);
  --adp-btn-background-color-hover: var(--adp-background-color-hover);
  --adp-btn-background-color-active: var(--adp-background-color-active);
  --adp-time-track-color: #555;
  --adp-time-track-color-hover: #777;
  --adp-time-day-period-color: var(--adp-color-secondary);
}

.dark .air-datepicker-overlay {
  --adp-overlay-background-color: rgba(255, 255, 255, 0.1);
}

.dark .air-datepicker-cell.-selected- {
  color: #1d1d1d;
}

.air-datepicker--navigation {
  width: 100%;
}

.air-datepicker--pointer {
  opacity: 0;
}

.air-datepicker {
  background: var(--adp-background-color);
  border: 1px solid var(--adp-border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: var(--adp-border-radius);
  box-sizing: content-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, max-content);
  grid-template-areas: var(--adp-grid-areas);
  font-family: var(--adp-font-family), sans-serif;
  font-size: var(--adp-font-size);
  color: var(--adp-color);
  width: var(--adp-width);
  position: absolute;
  transition: opacity var(--adp-transition-duration) var(--adp-transition-ease),
    transform var(--adp-transition-duration) var(--adp-transition-ease);
  z-index: var(--adp-z-index);
}

.air-datepicker-cell.-disabled- {
  cursor: not-allowed;
}

/* Time-only picker styles */

.air-datepicker.only-timepicker .air-datepicker--navigation {
  display: none;
}

.air-datepicker.only-timepicker .air-datepicker--content {
  display: none;
}

.air-datepicker.only-timepicker .air-datepicker--time {
  border-top: none;
}

/* Inline mode override */

.air-datepicker.-inline- {
  position: static !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* Preset options styling */

.preset-option,
.preset-option-desktop {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--content-primary);
  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;
}

.preset-option:hover,
.preset-option-desktop:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.preset-option,
.preset-option-desktop {
  background: none;
  border: none;
  cursor: pointer;
}

.preset-option-desktop {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.preset-radio {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  position: relative;
}

.preset-option.active .preset-radio::after,
.preset-option-desktop.active .preset-radio::after {
  content: '';
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  position: absolute;
}

.preset-option.active,
.preset-option-desktop.active {
  font-weight: 500;
}

.preset-option.active .preset-radio,
.preset-option-desktop.active .preset-radio {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

/* Integration Help Video - Minimal Mux video player */

.integration-help-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.integration-help-video--loaded {
  opacity: 1;
}

/* Hide all mux-player default controls */

.integration-help-video mux-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --controls: none;
  --media-object-fit: cover;
  --media-object-position: center;
}

.integration-help-video mux-player::part(gesture-layer) {
  display: none;
}

/* Play/pause button */

.integration-help-video__play-button {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, background-color 0.15s ease-in-out;
  z-index: 10;
  pointer-events: auto;
}

.integration-help-video__play-button:hover {
  background-color: rgba(255, 255, 255, 1);
}

.integration-help-video__play-button svg {
  width: 1rem;
  height: 1rem;
  color: #1a1a1a;
}

/* Show play button on hover or when paused */

.integration-help-video:hover .integration-help-video__play-button,
.integration-help-video--paused .integration-help-video__play-button {
  opacity: 1;
}

/* Icon visibility based on pause state */

.integration-help-video__play-button .icon-play {
  display: block;
}

.integration-help-video__play-button .icon-pause {
  display: none;
}

.integration-help-video--playing .integration-help-video__play-button .icon-play {
  display: none;
}

.integration-help-video--playing .integration-help-video__play-button .icon-pause {
  display: block;
}

/* Styles for the multi-step Publish 2.0 modal.
   Markup lives in `app/views/account/stacks/publish_flow/`. The flow renders
   inside the global `turbo_dialog` frame; `.publish-flow-dialog` is applied
   to the surrounding <dialog> so we can override its width. */

.publish-flow-dialog {
  width: 100%;
  max-width: 640px;
  border-radius: 24px;
  background-color: var(--background-elevated, #ffffff);
  box-shadow:
    0 20px 80px 0 rgba(0, 0, 0, 0.06),
    0 7.3px 29.2px 0 rgba(0, 0, 0, 0.05),
    0 3.5px 14.2px 0 rgba(0, 0, 0, 0.04),
    0 1.7px 6.9px 0 rgba(0, 0, 0, 0.03),
    0 0.7px 2.7px 0 rgba(0, 0, 0, 0.02);
}

.publish-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  width: 100%;
}

/* Top-right close button. The `turbo_dialog` layout already provides its own
   close affordance, but this lives inside the publish-flow controller so the
   Stimulus action can run cleanup before the dialog closes. */

.publish-flow__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: var(--content-primary, #342e26);
  cursor: pointer;
  transition: background-color 0.15s ease;
  z-index: 2;
}

.publish-flow__close:hover {
  background-color: var(--background-overlay, rgba(104, 67, 0, 0.08));
}

.publish-flow__close:focus-visible {
  outline: 2px solid var(--content-focus-outline, rgba(52, 46, 38, 0.2));
  outline-offset: 2px;
}

/* Header: back arrow on the left, step indicator centered.
   Indicator is absolutely centered so the back button toggling visibility
   doesn't shift it horizontally. */

.publish-flow__header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 24px 12px;
  min-height: 56px;
}

.publish-flow__back {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: var(--content-primary, #342e26);
  cursor: pointer;
  transition: background-color 0.15s ease;
  z-index: 1;
}

.publish-flow__back:hover {
  background-color: var(--background-overlay, rgba(104, 67, 0, 0.08));
}

.publish-flow__back.is-hidden {
  visibility: hidden;
}

.publish-flow__step-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
}

.publish-flow__step-indicator-track {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  border-radius: 999px;
  overflow: hidden;
}

.publish-flow__step-indicator-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--content-primary, #342e26);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Body: scrollable content area. */

.publish-flow__body {
  display: flex;
  flex-direction: column;
  padding: 8px 32px 32px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Individual step. Each step is the swap target inside the turbo frame, so
   the fade-up animation runs every transition. */

.publish-flow__step {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: publishFlowFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes publishFlowFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.publish-flow__header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-top: 8px;
}

.publish-flow__title {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--content-primary, #342e26);
  margin: 0;
}

.publish-flow__subtitle {
  font-size: 0.95rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  margin: 0;
  max-width: 440px;
}

/* Destination step: stacked selectable cards. */

.publish-flow__destinations {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.publish-flow__dest-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--content-border-dark, rgba(52, 46, 38, 0.12));
  background-color: var(--background-elevated, #ffffff);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.publish-flow__dest-card:hover {
  border-color: var(--content-primary, #342e26);
}

.publish-flow__dest-card--selected {
  border-color: var(--content-primary, #342e26);
  background-color: var(--background-neutral, #f3f0e8);
  box-shadow: 0 0 0 1px var(--content-primary, #342e26) inset;
}

.publish-flow__dest-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.publish-flow__dest-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--content-primary, #342e26);
}

.publish-flow__dest-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  white-space: nowrap;
}

.publish-flow__dest-card-badge--connected {
  background-color: var(--brand-secondary-moola, #264339);
  color: #ffffff;
}

/* Checklists used inside destination cards. */

.publish-flow__checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.publish-flow__checklist li {
  position: relative;
  padding-left: 20px;
  font-size: 0.875rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  line-height: 1.45;
}

.publish-flow__checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--content-primary, #342e26);
  font-weight: 700;
}

/* Template picker step. */

.publish-flow__template-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.publish-flow__template-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--content-border-dark, rgba(52, 46, 38, 0.12));
  background-color: var(--background-elevated, #ffffff);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.publish-flow__template-item:hover {
  border-color: var(--content-primary, #342e26);
}

.publish-flow__template-item--selected {
  border-color: var(--content-primary, #342e26);
  background-color: var(--background-neutral, #f3f0e8);
  box-shadow: 0 0 0 1px var(--content-primary, #342e26) inset;
}

.publish-flow__template-item-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.publish-flow__template-item-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--content-primary, #342e26);
}

.publish-flow__template-item-meta {
  font-size: 0.8125rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

/* Bundle block step: numbered instructions for installing the OfferLab block. */

.publish-flow__block-instructions {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--content-primary, #342e26);
  line-height: 1.5;
}

.publish-flow__block-instructions li::marker {
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  font-weight: 600;
}

.publish-flow__polling-status {
  font-size: 0.8125rem;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
  text-align: center;
  margin-top: 4px;
}

/* Escape hatch shown after N unsuccessful verify_block polls. Kept visually
   subtle so it doesn't compete with the primary "I've added the block" path,
   but always reachable for merchants whose detection has gone silent. */

.publish-flow__polling-escape {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.12));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.publish-flow__polling-escape-help {
  font-size: 0.8125rem;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
  text-align: center;
  max-width: 380px;
  line-height: 1.4;
}

/* Rotating status copy shown below a slow form submit so the user always
   sees the work alive instead of staring at a static loader label. */

.publish-flow__rotating-status {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
  text-align: center;
  min-height: 1.2em;
  transition: opacity 200ms ease-out;
}

/* Flash alerts surfaced inside the modal (e.g. clone_template failure).
   Without an in-modal placement, controller-side alerts redirected into the
   publish_flow turbo_frame would never reach the merchant. */

.publish-flow__alert {
  margin: 12px 24px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: rgba(220, 78, 65, 0.08);
  color: var(--content-error, #c53932);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Progress list (publish_progress, content_progress, brand_kit_progress). */

.publish-flow__progress-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 16px;
  background-color: var(--background-neutral, #f3f0e8);
}

.publish-flow__progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  transition: color 0.2s ease;
}

.publish-flow__progress-item--active {
  color: var(--content-primary, #342e26);
  font-weight: 500;
}

.publish-flow__progress-item--done {
  color: var(--content-primary, #342e26);
}

.publish-flow__progress-item--failed {
  color: var(--content-danger, #b42318);
  font-weight: 500;
}

.publish-flow__progress-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.publish-flow__progress-label {
  flex: 1 1 auto;
}

/* Spinner used in active progress rows and elsewhere. */

.publish-flow__spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--content-border-dark, rgba(52, 46, 38, 0.12));
  border-top-color: var(--content-primary, #342e26);
  animation: publishFlowSpin 0.8s linear infinite;
}

.publish-flow__pending-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--content-border-dark, rgba(52, 46, 38, 0.12));
}

@keyframes publishFlowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Success step + share-embed step. The big circular check that fades in. */

.publish-flow__success-icon {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background-color: var(--brand-secondary-moola, #264339);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
  animation: publishFlowScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes publishFlowScaleIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* URL box (success step, Shopify path). */

.publish-flow__url-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: var(--background-neutral, #f3f0e8);
}

.publish-flow__url-box-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
}

.publish-flow__url-box-url {
  font-size: 0.9375rem;
  color: var(--content-primary, #342e26);
  word-break: break-all;
  text-decoration: underline;
  text-decoration-color: var(--interactive-link-underline, rgba(52, 46, 38, 0.44));
}

.publish-flow__url-box-url:hover {
  text-decoration-color: var(--content-primary, #342e26);
}

/* Embed block (share_embed step). */

.publish-flow__embed-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background-color: var(--background-neutral, #f3f0e8);
}

.publish-flow__embed-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
}

.publish-flow__embed-code {
  margin: 0;
  padding: 12px 14px;
  background-color: var(--background-elevated, #ffffff);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--content-primary, #342e26);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
}

.publish-flow__embed-input {
  width: 100%;
}

/* Footer (action buttons stacked, 8px gap). */

.publish-flow__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* Review step preview card (repeat-shopify → elsewhere flow). */

.publish-flow__preview-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background-color: var(--background-neutral, #f3f0e8);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
}

.publish-flow__preview-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.publish-flow__preview-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
}

.publish-flow__preview-field-value {
  font-size: 0.9375rem;
  color: var(--content-primary, #342e26);
  line-height: 1.5;
}

/* Error region shown when an action fails inside a progress step. */

.publish-flow__error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: var(--content-primary, #342e26);
  font-size: 0.875rem;
}

.publish-flow__error p {
  margin: 0;
}

/* Empty state (e.g. template picker with no Shopify templates returned). */

.publish-flow__empty {
  padding: 24px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  border-radius: 12px;
  background-color: var(--background-neutral, #f3f0e8);
}

/* Utility: hide an element while keeping its layout space (used on the
   back button on the first step so the step indicator stays centered). */

.is-hidden {
  visibility: hidden;
}

/* hide the first breadcrumb chevron */

ol.breadcrumb li:first-child svg {
  display: none;
}

/* Override Turbo's progress bar color with the application's theme. */

.turbo-progress-bar {
  height: 5px;
  background-color: var(--brand-secondary-moola);
}

/*
  When dragging a sortable table row, only show the first column, usually containing the element's label.
  Can be customize on a per-table basis.
  Remove when updated to Bullet Train version that merges upstream PR https://github.com/bullet-train-co/bullet_train-core/pull/923
*/

tr.gu-mirror > *:not(:first-child) {
  display: none;
}

.ol-accordion-item > summary::-webkit-details-marker,
.ol-accordion-item > summary::marker {
  display: none;
}

a {
  color: var(--content-primary);
  text-decoration-line: none;
}

a:hover {
  color: var(--content-primary);
  text-decoration-line: none;
}

hr {
  border-color: var(--content-border-neutral, rgba(52, 46, 38, 0.08));
}

/* `.shadow-modal` is generated by Tailwind from `boxShadow.modal` in
   tailwind.atelier.config.js — single source of truth, do not redefine here. */

/* Safe area insets for viewport-fit=cover */

/* This ensures content isn't hidden behind the notch/status bar on iOS devices */

/* Only apply when safe area insets are supported (iOS devices with notches) */

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* alias used to support ejecting the file to local */

/* OL-3343 root page-layout system (.layout + --screen-margin + max-w-layout-* support). */

/* Root page-layout system (OL-3343 — Shopify-style).

   `.layout` owns the responsive side gutter + centering + an outer width cap, applied once
   per page. Mobile-first: --screen-margin grows with the viewport. Sections narrow themselves
   with the max-w-layout-* tokens (see tailwind.config.js) or arbitrary max-w-[…]; those are
   max-width-only, so they never re-declare the gutter and can't double-pad inside a .layout.

   Breakpoints (769 / 1357 / 1661 / 1921) intentionally REPLACE Tailwind's default screen scale
   (640 / 768 / 1024 / 1280 / 1536) — the defaults aren't granular enough for the wide-canvas
   responsive controls this layout system needs. NOTE: today these gutter steps run on a scale
   parallel to Tailwind's lg:/xl: utilities, so the gutter and a view's flex/grid reflow can
   change at different widths (most visible 1024–1357px). A follow-up ticket unifies Tailwind's
   `screens` config onto this scale (and adds named utilities for any uncovered breakpoints) so
   the two systems converge; until then, prefer .layout + max-w-layout-* for page width and treat
   lg:/xl: as content-reflow only. */

:root {
  --screen-margin: 16px;
  /* mobile-first default */
  --layout-max: 2000px;
}

@media (min-width: 769px)  {
  :root {
    --screen-margin: 24px;
  }
}

@media (min-width: 1357px) {
  :root {
    --screen-margin: 48px;
  }
}

@media (min-width: 1661px) {
  :root {
    --screen-margin: 64px;
  }
}

@media (min-width: 1921px) {
  :root {
    --screen-margin: 96px;
  }
}

/* Sticky-in-shell rescue.

   `.main-container-padding` (the app shell wrapper in _basic.html.erb) is
   `overflow:hidden` below lg to clip horizontal full-bleed content. But
   `overflow:hidden` makes that element a scroll container, which silently
   breaks `position:sticky` for any descendant — a sticky element (the listing
   header, the marketplace search bar) ends up pinned to the tall wrapper's top
   and scrolls away instead of holding at the viewport top.

   `overflow:clip` clips identically (and on both axes, like hidden) but does NOT
   establish a scroll container, so descendant sticky works. Mark any sticky
   element that lives inside this shell with `.sticky-in-shell`; the `:has()`
   rule then swaps ONLY the shells that actually contain such an element — so
   this doesn't change overflow/BFC behavior for every other page in the app —
   and only <lg, where the bug lives (desktop is already `lg:overflow-visible`).
   Older engines without `overflow:clip`/`:has()` just fall back to the existing
   hidden behavior (sticky stays broken there, but nothing regresses). */

@media (max-width: 1023px) {
  .main-container-padding:has(.sticky-in-shell) {
    overflow: clip;
  }
}

/* ✅ YOUR APPLICATION'S CSS */

/* If you need to customize your application's CSS, this is the place to do it. This helps
   avoid merge conflicts in the future when Rails or Bullet Train update their own CSS.
*/

body .Fade .AccordionItem.p-AccordionItem:first-child {
  border-radius: 12px 12px 0 0 !important;
}

.first-child-full-width {
  width: 100%;
}

.first-child-full-width > div {
  width: 100%;
}

/* Bottom-nav safe-area base strip height (used by app/views/themes/atelier/_with_bottom_bar).
   Passes through the REAL env(safe-area-inset-bottom) — with 3.5rem (56px) as a sanity ceiling —
   so the strip reserves exactly what the browser reports as unsafe, nothing more. 0 on desktop /
   responsive / non-rounded screens (strip and hairline collapse, the bar sits flush).

   Why pass-through and not a flat 56px (the previous `env() * 999` snap): browsers disagree on
   WHEN they report an inset. iOS 26 Safari always insets the layout viewport above its own chrome
   and reports env() = 0 in browser mode (strip hidden — Safari does the work itself). Comet and
   other Chrome-iOS-style wrappers report the ~34px home-indicator inset statically, even while
   their own toolbar already covers that zone — snapping that to a flat 56px produced a tall dead
   band under the tabs (PR #3172 follow-up). Passing env() through matches the standard pattern
   (e.g. Shop): 0 in Safari; a quiet ~34px base in Comet that becomes load-bearing the moment its
   chrome hides on scroll and content runs edge-to-edge.

   Exposed as a custom property so the strip AND the tab-bar content clearance
   (pb-[calc(… + var(--ol-tabbar-safe-strip))]) stay in lockstep — the bar grows by the strip,
   and the clearance below it grows by the same amount. */

:root {
  --ol-tabbar-safe-strip: min(3.5rem, env(safe-area-inset-bottom));
}

.ol-tabbar-safe-strip {
  border-color: var(--content-border-neutral);
  border-top-style: solid;
  border-top-width: min(1px, env(safe-area-inset-bottom));
  padding-bottom: var(--ol-tabbar-safe-strip);
}

/* When there's no real bottom inset, drop the strip out of the flex flow entirely so
   it doesn't reserve the bar's gap-y-3 row-gap above itself (a 12px ghost gap below
   the tabs row on desktop / responsive / non-rounded screens). The .has-safe-area-inset
   class is set on <html> by support/detect_safe_area_inset.js — CSS alone can size the
   strip from env() but can't conditionally toggle display. */

html:not(.has-safe-area-inset) .ol-tabbar-safe-strip {
  display: none;
}

/* Mobile content-fill: make a main-container card stretch to the full mobile
   viewport so its background reaches the bottom tab bar with no gap, even when
   the content is shorter than the screen — without ever producing a page scroll.
   The card fills 100dvh; the page itself can't scroll because the view pairs this
   with @lock_body_scroll_on_mobile (body → overflow-hidden, row → fixed dvh
   height, and the tab-bar padding moves into the card's own content). The floating
   tab bar overlays the filled background; content keeps its own bottom clearance.
   Applied to account/shared/_index's card via @mobile_fill_viewport. */

@media (max-width: 1023px) {
  .ol-mobile-fill {
    min-height: 100dvh;
  }
}

@media (min-width: 1024px) {
  .settings .navigation [data-is-active='true'] {
    background-color: var(--background-base);
  }
}

/* Mobile: settings nav rows are plain navigation links — there's no "currently
   selected tab" the way the desktop sticky sidebar has, so the active row must NOT
   carry a persistent highlight (sidebar_item applies bg-background-overlay inline
   when is_active). Suppress it below lg. `:not(:active)` keeps the tap-and-hold press
   feedback (active:bg-background-base) intact, since that only paints while pressed.
   Desktop is untouched (the lg:bg-background-base rule above still wins there). */

@media (max-width: 1023px) {
  .btn-toggle input[type='checkbox']:checked + button.button-secondary.settings .navigation a.item[data-is-active='true']:not(:active), .btn-toggle input[type='radio']:checked + button.button-secondary.settings .navigation a.item[data-is-active='true']:not(:active) {
    background-color: var(--background-overlay);
  }

  .settings .navigation a.item[data-is-active='true']:not(:active) {
    background-color: transparent;
  }
}

/* Scoped to a.item (menu rows) so non-row links in the nav — e.g. the Profile-tab
   cards (refer card) and the "View profile" button — keep their own card/button
   styling instead of inheriting the row padding/radius/justify. */

.settings .navigation a.item {
  /* transition + max-lg:active: the whole row flips to background-base on tap-and-hold (matches the
     mobile bottom-sheet menu rows, e.g. notification_preferences). No hover bg on touch. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--content-primary);
  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;
}

@media not all and (min-width: 1024px) {
  .btn-toggle input[type='checkbox']:checked + .settings .navigation a.item:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .settings .navigation a.item:hoverbutton.button-secondary {
    background-color: var(--background-overlay);
  }

  .settings .navigation a.item {
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .settings .navigation a.item:hover {
    background-color: transparent;
  }

  .settings .navigation a.item:active {
    background-color: var(--background-base);
  }
}

@media (min-width: 1024px) {
  .settings .navigation a.item:hover {
    background-color: var(--background-base) !important;
  }
}

@media not all and (min-width: 1024px) {
  .settings .navigation a.item span.text-2xl {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.settings .navigation .item {
  display: flex;
  max-width: 100% !important;
  align-items: center;
}

@media (min-width: 1024px) {
  .settings .navigation .item {
    gap: 0.25rem;
    border-radius: 0.75rem;
  }

  .settings-layout .navigation a.item {
    gap: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }

  .settings-layout .navigation a.item span {
    margin-left: 0px !important;
  }
}

/* Sell navigation icon sizing - larger icons for sell layout */

@media not all and (min-width: 1024px) {
  .settings.sell-layout .navigation .item .icon {
    display: flex;
    width: 2rem;
    height: 2rem;
  }
}

@media (min-width: 1024px) {
  .settings.sell-layout .navigation .item .icon {
    width: 2rem;
    height: 2rem;
  }
}

/* Settings navigation icon sizing — 24px on mobile, 20px on the desktop sidebar */

@media not all and (min-width: 1024px) {
  .settings:not(.sell-layout) .navigation .item .icon {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .settings:not(.sell-layout) .navigation .item .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Settings layout label text size override */

@media (min-width: 1024px) {
  .settings-layout .navigation a.item .label {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    letter-spacing: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   Native-style forward/back page transitions (Turbo 8 View Transitions).

   `data-vt-slide` is set per-visit by app/javascript/page_transitions.js (mobile,
   settings↔settings only). Everything animates on the compositor (transform +
   opacity), so it stays at 60fps. With no attribute the transition is a no-op, so
   desktop / non-settings / unsupported browsers fall back to instant navigation.

       forward (drill in):  new covers from the right · old parallaxes ~25% left + dims
       back    (pop):       old slides off the right   · new parallaxes in from the left
   ────────────────────────────────────────────────────────────────────────────── */

/* Default: suppress the UA cross-fade so any view transition we don't opt into is instant. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

@media (max-width: 1023px) {
  /* Keep the fixed bottom tab bar out of the page-level slide so it stays put while the content
     moves (native tab-bar behaviour). Same position old→new ⇒ it doesn't visibly animate. */

  .ol-bottom-nav {
    view-transition-name: ol-bottom-nav;
  }

  /* Forward — drill in. New page on top, covering from the right. */

  html[data-vt-slide="forward"]::view-transition-old(root) {
    animation: vt-slide-out-left 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html[data-vt-slide="forward"]::view-transition-new(root) {
    z-index: 1;
    animation: vt-slide-in-right 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  /* Back — pop. Old page on top, sliding off to the right to reveal the parent. */

  html[data-vt-slide="back"]::view-transition-old(root) {
    z-index: 1;
    animation: vt-slide-out-right 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html[data-vt-slide="back"]::view-transition-new(root) {
    animation: vt-slide-in-left 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
}

@keyframes vt-slide-in-right {
  from {
    transform: translateX(100%);
  }

  to   {
    transform: translateX(0);
  }
}

/* Outgoing (drill-in): parallax left AND fade out hard + early — opacity is front-loaded so the old
   page is clearly dimmed by mid-transition, well before the incoming page finishes covering it. */

@keyframes vt-slide-out-left {
  0%   {
    transform: translateX(0);
    opacity: 1;
  }

  45%  {
    opacity: 0.25;
  }

  100% {
    transform: translateX(-25%);
    opacity: 0.25;
  }
}

@keyframes vt-slide-out-right {
  from {
    transform: translateX(0);
  }

  to   {
    transform: translateX(100%);
  }
}

/* Incoming on a back/pop: mirror of slide-out-left — stays dim, then brightens in as it settles. */

@keyframes vt-slide-in-left {
  0%   {
    transform: translateX(-25%);
    opacity: 0.25;
  }

  55%  {
    opacity: 0.25;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   Earnings-card bar chart entrance (Profile tab). Bars grow up from the baseline on
   first load to draw the eye. Pure CSS keyframes; the `.animate-bars` gate is added
   once per document load by the `earnings-chart` Stimulus controller — a module-
   scoped flag survives Turbo Drive visits, so returning to the Profile tab does NOT
   re-animate (only a real page load does). Bars without the gate render at full
   height, so no-JS and reduced-motion users see the final chart immediately.
   ────────────────────────────────────────────────────────────────────────────── */

.earnings-bar {
  transform-origin: bottom center;
}

.animate-bars .earnings-bar {
  /* fill-mode both: adopt the 0% (collapsed) state the instant the gate is added
     and hold 100% after, so there's no full-height flash or post-animation snap. */
  animation: earnings-bar-grow 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--bar-delay, 0ms);
}

@keyframes earnings-bar-grow {
  from {
    transform: scaleY(0);
  }

  to   {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-bars .earnings-bar {
    animation: none;
  }
}

/* Skeleton / shimmer primitives (settings preloader — see settings_skeleton_controller.js).

   `.skeleton` is the only building block: a neutral filled shape with a subtle left→right
   shimmer sweep. Compose any skeleton by giving an element `.skeleton` + Tailwind sizing
   (h-*, w-*, rounded-*). The shimmer is decorative, so it's disabled under
   prefers-reduced-motion (the static fill alone still reads as "loading"). */

.offers .page:first-of-type {
  margin: 0px;
  border-style: none;
  padding: 0px;
}

.offers .page:first-of-type > .title {
  margin: 0px;
  border-style: none;
  padding: 0px;
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.offers .page:first-of-type > .title h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.0294rem;
}

@media not all and (min-width: 1024px) {
  .settings .navigation a.item span.offers .page:first-of-type > .title h1 {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.offers .page:first-of-type > .body {
  margin: 0px;
  padding: 0px;
}

/* not collection item is a hack to try to solve layout issues. TODO: make better */

[data-select-all-target='wrapper'][data-property-path]:not(.collection-item):not(.optional-item) {
  display: block;
}

[data-property-path]:not(.collection-item):not(.optional-item) {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

[data-property-path]:not(.collection-item):not(.optional-item):hover {
  box-shadow: inset 0 0 0 3px var(--brand-secondary-mint);
}

[data-select-all-target='wrapper'].textarea-tag {
  display: block;
}

.textarea-tag {
  position: relative;
  display: inline-block;
  cursor: text;
}

.textarea-tag:focus-within {
  cursor: text;
}

.collection-controls,
.optional-item-controls {
  pointer-events: auto;
  position: absolute;
  z-index: 9999;
  display: none;
  gap: 0.25rem;
}

.collection-controls button, .optional-item-controls button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.collection-controls button:hover, .optional-item-controls button:hover {
  text-decoration-line: none;
}

.collection-controls button:active, .optional-item-controls button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.collection-controls button:where(.dark, .dark *), .optional-item-controls button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.collection-controls button, .optional-item-controls button {
  aspect-ratio: 1 / 1;
  height: 32px;
  width: 32px;
  background-color: var(--background-overlay);
  padding: 0px !important;
  color: var(--content-primary);
  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;
}

.collection-controls button:hover, .optional-item-controls button:hover {
  color: var(--content-primary);
}

.collection-controls button, .optional-item-controls button {
  /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
  border-radius: var(--rounded-full, 99999px) !important;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
  /* The fill is a translucent overlay, so blur whatever scrolls behind it
       (e.g. content sliding under the sticky marketplace toolbar) instead of
       letting it bleed through. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.collection-controls button:hover, .optional-item-controls button:hover {
  background-color: var(--bg-fill-secondary-hover);
}

.collection-controls button.button-small, .optional-item-controls button.button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.collection-controls button.\!button-small, .optional-item-controls button.\!button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.collection-controls button.button-small svg, .optional-item-controls button.button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.collection-controls button.\!button-small svg, .optional-item-controls button.\!button-small svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

.collection-controls button.button-medium, .optional-item-controls button.button-medium {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.625rem !important;
}

.collection-controls button.button-medium svg, .optional-item-controls button.button-medium svg {
  height: 18px;
  width: 18px;
  flex-shrink: 0;
}

.collection-controls button.button-large, .optional-item-controls button.button-large {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.collection-controls button.button-large svg, .optional-item-controls button.button-large svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.collection-controls button.button-icon-pagination svg, .optional-item-controls button.button-icon-pagination svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

.collection-controls button.wizard-button--next, .optional-item-controls button.wizard-button--next {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.collection-controls button.wizard-button--next svg, .optional-item-controls button.wizard-button--next svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.collection-controls button.wizard-button--previous, .optional-item-controls button.wizard-button--previous {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.collection-controls button.wizard-button--previous svg, .optional-item-controls button.wizard-button--previous svg {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.collection-controls button.button-small svg.icon-18, .optional-item-controls button.button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.collection-controls button.\!button-small svg.icon-18, .optional-item-controls button.\!button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.collection-controls button, .optional-item-controls button {
  aspect-ratio: 1 / 1;
  border-radius: 9999px !important;
}

@media (max-width: 1023px) {
  
    .page-header-toolbar .collection-controls button,
    .page-header-toolbar  .optional-item-controls button {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem;
  }

  
    .page-header-toolbar .collection-controls button svg,
    .page-header-toolbar  .optional-item-controls button svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  
    .page-header-toolbar .collection-controls button,
    .page-header-toolbar  .optional-item-controls button {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem;
  }

  
    .page-header-toolbar .collection-controls button svg,
    .page-header-toolbar  .optional-item-controls button svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.collection-controls button, .optional-item-controls button {
  width: 1.75rem !important;
  height: 1.75rem !important;
  background-color: var(--background-elevated);
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: var(--brand-secondary-moola) !important;
  --tw-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 8px 28px 0px rgba(0,0,0, 0.16);;
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 8px 28px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[data-controller='sections--section-menu'] .collection-controls button,[data-controller='sections--section-menu']  .optional-item-controls button {
  overflow: visible;
}

[data-controller='sections--section-menu'] .collection-controls button:before,[data-controller='sections--section-menu']  .optional-item-controls button:before {
  inset: -1px;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  content: '';
  background-color: white;
  display: block;
  position: absolute;
  z-index: -1;
}

.collection-controls button:hover, .optional-item-controls button:hover {
  background-color: var(--background-overlay) !important;
  color: var(--brand-secondary-moola) !important;
}

.collection-controls button:after, .optional-item-controls button:after {
  inset: -1px;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  border-radius: 9999px !important;
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
}

.collection-item {
  position: relative;
  cursor: pointer;
}

.collection-item:hover {
  box-shadow: inset 0 0 0 3px var(--brand-secondary-mint);
}

.collection-item:focus-within {
  box-shadow: inset 0 0 0 3px var(--brand-secondary-mint);
}

.collection-item-controls,
.optional-item-controls,
.asset-tag-controls {
  position: absolute;
  z-index: 9999;
  display: none;
  width: -moz-max-content;
  width: max-content;
}

.empty-collection-placeholder {
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: dashed;
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  color: var(--content-secondary);
  opacity: 0.5;
}

.empty-collection-placeholder:hover {
  opacity: 1;
}

.optional-item {
  opacity: 0.3;
}

.optional-item > * {
  pointer-events: none;
}

.optional-item[enabled='true'] {
  opacity: 1;
}

.optional-item[enabled='true'] > * {
  pointer-events: auto;
}

.asset-tag {
  position: relative;
  cursor: pointer;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.generating-ai-update {
  position: relative;
}

.generating-ai-update::after {
  content: '';
  position: absolute;
  inset: 0px;
  z-index: 50;
  border-style: none;
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0) 100%
    );
  background-size: 200% 100%;
  animation: shimmer 3.5s infinite ease-in-out;
}

/* OTO Rendering Context */

[data-section].rendering-context-oto {
  pointer-events: none;
  position: relative;
  z-index: 0;
  border-style: none;
}

[data-section].rendering-context-oto:hover {
  pointer-events: none !important;
  border-style: none !important;
}

[data-section].rendering-context-oto:after {
  content: '';
  position: absolute;
  inset: 0px;
  z-index: 10;
  border-style: none;
  background-color: rgba(255, 255, 255, 0.7);
}

[data-section].rendering-context-oto:before {
  display: none !important;
}

[data-section].rendering-context-oto .collection-controls {
  display: none !important;
}

[data-section].rendering-context-oto [data-property-path],
  [data-section].rendering-context-oto .collection-item {
  pointer-events: none;
}

[data-section].rendering-context-oto [data-property-path*='oto_'],
  [data-section].rendering-context-oto [data-property-path*='purchase_block_options'] {
  pointer-events: auto;
  position: relative;
  z-index: 20;
}

[data-section].rendering-context-oto .optional-item:not([enabled='true']) [data-property-path*='oto_'] {
  pointer-events: none;
}

.asset-tag {
  display: block;
  width: 100%;
  height: 100%;
  max-height: inherit;
  -o-object-fit: inherit;
     object-fit: inherit;
  border-radius: inherit;
}

.asset-tag:has(.placeholder).media-element,
  .asset-tag:has(.placeholder) img,
  .asset-tag:has(.placeholder) video {
  height: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--grayscale-2);
}

.asset-tag:has(.placeholder) .asset-tag-controls {
  display: none !important;
  opacity: 0 !important;
}

.asset-tag .placeholder {
  border-radius: 0.75rem;
  background-color: var(--grayscale-2);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  color: var(--content-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0px;
}

.asset-tag .placeholder:hover {
  box-shadow: inset 0 0 0 3px var(--brand-secondary-mint);
}

.asset-tag .placeholder svg {
  min-height: 16px;
  min-width: 16px;
  max-width: 56px;
  max-height: 56px;
  width: 33%;
  height: 33%;
}

.default-overlay-button {
  border-radius: var(--rounded-full, 99999px);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  background-color: var(--content-background-elevated, #fff);
  transition: background-color, border-color, color, fill, stroke ease 150ms;
  /* shadows/sm */
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0),
    0px 0px 2px 0px rgba(0, 0, 0, 0.05), 0px 4px 6px 0px rgba(0, 0, 0, 0.02);
}

.default-overlay-button:hover {
  background-color: var(--content-background-overlay);
}

.default-overlay-button,
.ai-overlay-button:hover {
  background-color: var(--mint-50, #f5f8f6);
}

/* Hack to give studio buttons a white background */

[data-controller='sections--section-menu'] .button-icon-circle {
  overflow: visible;
}

[data-controller='sections--section-menu'] .button-icon-circle:before {
  inset: -1px;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  content: '';
  background-color: white;
  display: block;
  position: absolute;
  z-index: -1;
}

.star-rating-tag .star-rating {
  --star-color: #ccc;
  --star-filled: #ffc107;
}

.star-rating-tag .star-rating input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.star-rating-tag .star-rating label {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  color: var(--star-color);
  padding: 0.125rem;
}

.star-rating-tag .star-rating label:hover,
  .star-rating-tag .star-rating label:hover ~ label,
  .star-rating-tag .star-rating input:checked ~ label {
  color: var(--star-filled);
}

.sticky-purchase-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  /* Below modals (1050) but above other content */
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.sticky-purchase-bar:first-of-type {
  display: block;
}

.sticky-purchase-bar--visible {
  transform: translateY(0);
}

.sticky-purchase-bar__content {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding: 20px;
}

.sticky-purchase-bar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Offer info styles */

.sticky-purchase-bar__info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
}

.sticky-purchase-bar__image {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1),
    0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(0, 0, 0, 0.02);
  border: 2px solid white;
  max-width: none;
}

.sticky-purchase-bar__image.editable:hover {
  cursor: pointer;
  border: 2px solid var(--brand-secondary-mint) !important;
}

.sticky-purchase-bar__details {
  display: flex;
  flex-direction: column;
  justify-items: start;
  gap: 2px;
  max-width: 460px;
}

.sticky-purchase-bar__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  text-align: left;
  line-clamp: 1;
  overflow: ellipsis;
}

.sticky-purchase-bar__creator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-align: left;
  line-clamp: 1;
  overflow: ellipsis;
}

.sticky-purchase-bar__creator-logo {
  height: 20px;
  max-width: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}

.sticky-purchase-bar__creator-name {
  font-weight: 600;
}

/* Pricing section */

.sticky-purchase-bar__pricing {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  min-width: 340px;
  justify-content: space-between;
}

.sticky-purchase-bar__price-info {
  display: flex;
  align-items: center;
}

.sticky-purchase-bar__price-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sticky-purchase-bar__price-label {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}

.sticky-purchase-bar__price-current {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}

/* Form and button */

.sticky-purchase-bar__form {
  display: inline-flex;
}

.sticky-purchase-bar__button {
  min-width: 148px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sticky-purchase-bar__button span {
  line-clamp: 1;
  overflow: ellipsis;
}

.sticky-purchase-bar__button:active {
  transform: translate(1px, 1px);
}

/* Mobile styles - position at bottom */

@media (max-width: 768px) {
  .sticky-purchase-bar {
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    border-bottom: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .sticky-purchase-bar--visible {
    transform: translateY(0);
  }

  .sticky-purchase-bar__content {
    padding: 12px 16px;
  }

  .sticky-purchase-bar__container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .sticky-purchase-bar__info {
    padding: 0;
    gap: 12px;
  }

  .sticky-purchase-bar__image {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .sticky-purchase-bar__details {
    max-width: none;
    gap: 4px;
  }

  .sticky-purchase-bar__title {
    font-size: 14px;
    line-height: 1.2;
  }

  .sticky-purchase-bar__creator {
    font-size: 12px;
  }

  .sticky-purchase-bar__pricing {
    padding: 0;
    min-width: auto;
    gap: 12px;
    flex-wrap: wrap;
  }

  .sticky-purchase-bar__price-label {
    font-size: 16px;
  }

  .sticky-purchase-bar__price-current {
    font-size: 16px;
  }

  .sticky-purchase-bar__form {
    flex: 1;
  }

  .sticky-purchase-bar__button {
    width: 100%;
    min-width: auto;
    padding: 12px 16px;
    font-size: 16px;
  }
}

/* Intercom positioning overrides for mobile devices */

@media (max-width: 1024px) {
  .intercom-lightweight-app-launcher {
    bottom: 72px !important;
  }

  /*localhost*/

  .intercom-dfosxs {
    bottom: 72px !important;
  }

  iframe[name='intercom-notifications-frame'] {
    bottom: 124px !important;
  }
}

/**
 * tom-select.css (v2.4.3)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */

.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
}

.full .ts-control {
  background-color: #fff;
}

.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}

.focus .ts-control {
  box-shadow: none;
}

.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}

.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0 solid #d0d0d0;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0 solid #cacaca;
}

.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: white;
  border: 0 solid white;
}

.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}

.ts-control > input::-ms-clear {
  display: none;
}

.ts-control > input:focus {
  outline: none !important;
}

.has-items .ts-control > input {
  margin: 0 4px !important;
}

.ts-control.rtl {
  text-align: right;
}

.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}

.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}

.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}

.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}

.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}

.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}

.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}

.ts-dropdown .active.create {
  color: #495c68;
}

.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}

.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}

.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}

.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */

.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}

.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}

.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}

.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}

.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}

.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}

.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}

.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}

.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
  color: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}

.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}

.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}

.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}

.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}

.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* Shared animations */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.turbo-frame-fade-in {
  animation: fadeIn 0.05s ease-in-out;
  min-height: 150px;
}

@media (min-width: 1024px) {
  .lg\:font-display-semi-condensed {
    letter-spacing: 0 !important;
  }
}

.before\:box_shadow_sm::before {
  content: var(--tw-content);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
}

.after\:border-gradient::after {
  position: absolute;
  inset: 0px;
  content: var(--tw-content);
  border-radius: inherit;
  z-index: -1;
  mask: linear-gradient(black, black) content-box,
      linear-gradient(black, black);
  -webkit-mask: linear-gradient(black, black) content-box,
      linear-gradient(black, black);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding: var(--border-gradient-width, 1px);
  /* Thickness of the border */
  box-sizing: border-box;
}

.after\:border-b[data-select-all-target='wrapper']::after {
  content: var(--tw-content);
  border-color: var(--content-border-dark);
}

.after\:box_shadow_sm::after {
  content: var(--tw-content);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.hover\:button-link-disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.hover\:button-link-disabled:hover {
  background-color: var(--background-overlay);
}

.hover\:button-link-disabled:hover {
  background-color: transparent;
  --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);
}

.floating-input-field.hover\:button-link-disabled:hover,
.floating-input-field.hover\:button-link-disabled:hover:focus,
.floating-input-field.hover\:button-link-disabled:hover:hover,
.floating-input-field.hover\:button-link-disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .hover\:button-link-disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .hover\:button-link-disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.hover\:button-link-disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.hover\:button-disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.hover\:button-disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.hover\:button-disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.hover\:button-disabled:hover),
  .button-primary-dark:has(.hover\:button-disabled:hover),
  .button-secondary:has(.hover\:button-disabled:hover),
  .button-tertiary:has(.hover\:button-disabled:hover),
  .button-danger:has(.hover\:button-disabled:hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.hover\:button-disabled:hover):not(.no-disabled-style), .button-primary-dark:has(.hover\:button-disabled:hover):not(.no-disabled-style), .button-secondary:has(.hover\:button-disabled:hover):not(.no-disabled-style), .button-tertiary:has(.hover\:button-disabled:hover):not(.no-disabled-style), .button-danger:has(.hover\:button-disabled:hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.hover\:before\:large-button-hover:hover::before {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--grayscale-1);
  content: var(--tw-content);
  /* background: linear-gradient(
      90deg,
      theme(colors.seafoam.100) 0%,
      theme(colors.offWhite / 0%) 110.35%
    );
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06); */
}

.btn-toggle input[type='checkbox']:checked + .focus\:bg-transparent:focusbutton.button-secondary, .btn-toggle input[type='radio']:checked + .focus\:bg-transparent:focusbutton.button-secondary {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.disabled\:button-link-disabled:disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.disabled\:button-link-disabled:disabled {
  background-color: var(--background-overlay);
}

.disabled\:button-link-disabled:disabled {
  background-color: transparent;
  --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);
}

.floating-input-field.disabled\:button-link-disabled:disabled,
.floating-input-field.disabled\:button-link-disabled:disabled:focus,
.floating-input-field.disabled\:button-link-disabled:disabled:hover,
.floating-input-field.disabled\:button-link-disabled:disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .disabled\:button-link-disabled:disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .disabled\:button-link-disabled:disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.disabled\:button-link-disabled:disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.disabled\:button-disabled:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.disabled\:button-disabled:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.disabled\:button-disabled:disabled:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.disabled\:button-disabled:disabled),
  .button-primary-dark:has(.disabled\:button-disabled:disabled),
  .button-secondary:has(.disabled\:button-disabled:disabled),
  .button-tertiary:has(.disabled\:button-disabled:disabled),
  .button-danger:has(.disabled\:button-disabled:disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.disabled\:button-disabled:disabled):not(.no-disabled-style), .button-primary-dark:has(.disabled\:button-disabled:disabled):not(.no-disabled-style), .button-secondary:has(.disabled\:button-disabled:disabled):not(.no-disabled-style), .button-tertiary:has(.disabled\:button-disabled:disabled):not(.no-disabled-style), .button-danger:has(.disabled\:button-disabled:disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.hover\:disabled\:button-link-disabled:disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.hover\:disabled\:button-link-disabled:disabled:hover {
  background-color: var(--background-overlay);
}

.hover\:disabled\:button-link-disabled:disabled:hover {
  background-color: transparent;
  --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);
}

.floating-input-field.hover\:disabled\:button-link-disabled:disabled:hover,
.floating-input-field.hover\:disabled\:button-link-disabled:disabled:hover:focus,
.floating-input-field.hover\:disabled\:button-link-disabled:disabled:hover:hover,
.floating-input-field.hover\:disabled\:button-link-disabled:disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .hover\:disabled\:button-link-disabled:disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .hover\:disabled\:button-link-disabled:disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.hover\:disabled\:button-link-disabled:disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.hover\:disabled\:button-disabled:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.hover\:disabled\:button-disabled:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.hover\:disabled\:button-disabled:disabled:hover:not(.no-disabled-style):active {
  --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));
}

.button-primary:has(.hover\:disabled\:button-disabled:disabled:hover),
  .button-primary-dark:has(.hover\:disabled\:button-disabled:disabled:hover),
  .button-secondary:has(.hover\:disabled\:button-disabled:disabled:hover),
  .button-tertiary:has(.hover\:disabled\:button-disabled:disabled:hover),
  .button-danger:has(.hover\:disabled\:button-disabled:disabled:hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style), .button-primary-dark:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style), .button-secondary:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style), .button-tertiary:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style), .button-danger:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.btn-toggle input[type='checkbox']:checked + .group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:hover\:bg-transparent:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:hover\:bg-transparent:hoverbutton.button-secondary {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + .peer:checked ~ .peer-checked\:bg-transparentbutton.button-secondary, .btn-toggle input[type='radio']:checked + .peer:checked ~ .peer-checked\:bg-transparentbutton.button-secondary {
  background-color: var(--background-overlay) !important;
}

.peer:checked ~ .peer-checked\:button-primary-dark {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.peer:checked ~ .peer-checked\:button-primary-dark:hover {
  text-decoration-line: none;
}

.peer:checked ~ .peer-checked\:button-primary-dark:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.peer:checked ~ .peer-checked\:button-primary-dark:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.peer:checked ~ .peer-checked\:button-primary-dark {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.message .peer:checked ~ .peer-checked\:button-primary-dark .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.peer:checked ~ .peer-checked\:button-primary-dark:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

.peer:checked ~ .peer-checked\:button-primary-dark[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.peer:checked ~ .peer-checked\:button-primary-dark[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.peer:checked ~ .peer-checked\:button-primary-dark[disabled]:not(.no-disabled-style):active {
  --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));
}

.peer:checked ~ .peer-checked\:button-primary-dark:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.peer:checked ~ .peer-checked\:button-primary-dark:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.btn-toggle input[type='checkbox']:checked + .peer:checked ~ .peer-checked\:hover\:bg-transparent:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .peer:checked ~ .peer-checked\:hover\:bg-transparent:hoverbutton.button-secondary {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + .has-\[\:checked\]\:bg-transparent:has(:checked)button.button-secondary, .btn-toggle input[type='radio']:checked + .has-\[\:checked\]\:bg-transparent:has(:checked)button.button-secondary {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + .has-\[\:disabled\]\:hover\:bg-transparent:hover:has(:disabled)button.button-secondary, .btn-toggle input[type='radio']:checked + .has-\[\:disabled\]\:hover\:bg-transparent:hover:has(:disabled)button.button-secondary {
  background-color: var(--background-overlay) !important;
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"] {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"]:hover {
  text-decoration-line: none;
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"]:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"] {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
}

.message .data-\[selected\=true\]\:button-primary-dark[data-selected="true"] .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"]:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"][disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"][disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"][disabled]:not(.no-disabled-style):active {
  --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));
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"]:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.data-\[selected\=true\]\:button-primary-dark[data-selected="true"]:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

@container (min-width: 42rem) {
  .btn-toggle input[type='checkbox']:checked + .\@2xl\:hover\:bg-transparent:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .\@2xl\:hover\:bg-transparent:hoverbutton.button-secondary {
    background-color: var(--background-overlay) !important;
  }
}

@container (min-width: 48rem) {
  .\@3xl\:border-b[data-select-all-target='wrapper'] {
    border-color: var(--content-border-dark);
  }
}

@media not all and (min-width: 1024px) {
  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  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;
  }

  .box-footer .max-lg\:button-secondary:hover,
  .box-actions .max-lg\:button-secondary:hover {
  text-decoration-line: none;
  }

  .box-footer .max-lg\:button-secondary:active,
  .box-actions .max-lg\:button-secondary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
  }

  .box-footer .max-lg\:button-secondary:where(.dark, .dark *),
  .box-actions .max-lg\:button-secondary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
  background-color: var(--brand-primary-brew);
  color: var(--content-primary-inverse);
  }

  .box-footer .max-lg\:button-secondary:hover,
  .box-actions .max-lg\:button-secondary:hover {
  color: var(--content-primary-inverse);
  background-color: var(--bg-fill-dark-hover);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style) {
    /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style) {
    /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
    cursor: not-allowed;
    background-color: var(--background-disabled) !important;
    color: var(--content-tertiary);
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style):active {
    --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));
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style) {
    /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
    cursor: not-allowed;
    background-color: var(--background-disabled) !important;
    color: var(--content-tertiary);
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style):active {
    --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));
  }

  .max-lg\:button-secondary:has(.button-disabled) {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style) {
    /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
    cursor: not-allowed;
    background-color: var(--background-disabled) !important;
    color: var(--content-tertiary);
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style):active {
    --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));
  }

  .max-lg\:button-secondary:has(.button-disabled) {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:has(.button-disabled):not(.no-disabled-style) {
    background-color: var(--background-disabled) !important;
    color: var(--content-tertiary);
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large.button-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large.button-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .max-lg\:button-large.button-icon-elevated:hover:not(:disabled) {
    --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
    --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large.button-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .max-lg\:button-large.button-icon-elevated:hover:not(:disabled) {
    --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
    --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
  }

  .max-lg\:button-large {
    height: 3rem;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large.button-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .max-lg\:button-large.button-icon-elevated:hover:not(:disabled) {
    --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
    --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
  }

  .max-lg\:button-large {
    height: 3rem;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .max-lg\:button-large svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .max-lg\:dialog-bottom-sheet {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto;
    margin-bottom: 0px !important;
    width: 100%;
    max-width: 100% !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }

  .max-lg\:dialog-full-sheet {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto;
    margin-bottom: 0px !important;
    width: 100%;
    max-width: 100% !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    height: calc(100dvh - 8px);
    max-height: none;
  }

  .daterangepicker .calendar-table .max-lg\:active {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(33 168 117 / var(--tw-bg-opacity, 1)) !important;
  }

  .btn-toggle input[type='checkbox']:checked + .max-lg\:hover\:bg-transparent:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .max-lg\:hover\:bg-transparent:hoverbutton.button-secondary {
    background-color: var(--background-overlay) !important;
  }
}

@media not all and (min-width: 768px) {
  .max-md\:dialog-bottom-sheet {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto;
    margin-bottom: 0px !important;
    width: 100%;
    max-width: 100% !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }
}

@media (min-width: 768px) {
  .btn-toggle input[type='checkbox']:checked + button.md\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.md\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .md\:inline-block[data-select-all-target='wrapper'] {
    display: block;
  }

  .md\:border-t[data-select-all-target='wrapper'] {
    border-color: var(--content-border-dark);
  }
}

@media (min-width: 1024px) {
  .lg\:button-small
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .btn-toggle input[type='checkbox']:checked + button.lg\:\!bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.lg\:\!bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.lg\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.lg\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.lg\:\!bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.lg\:\!bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.lg\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.lg\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  svg.lg\:icon-size-8 {
    height: 2rem;
    width: 2rem;
  }

  .lg\:button-icon {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    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;
  }

  .lg\:button-icon:hover {
    text-decoration-line: none;
  }

  .lg\:button-icon:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    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));
  }

  .lg\:button-icon:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .lg\:button-icon {
    aspect-ratio: 1 / 1;
    height: 32px;
    width: 32px;
    background-color: var(--background-overlay);
    padding: 0px !important;
    color: var(--content-primary);
    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;
  }

  .lg\:button-icon:hover {
    color: var(--content-primary);
  }

  .lg\:button-icon {
    /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
    border-radius: var(--rounded-full, 99999px) !important;
    background: var(--background-overlay, rgba(104, 67, 0, 0.08));
    color: var(--content-primary, #342e26);
    /* The fill is a translucent overlay, so blur whatever scrolls behind it
       (e.g. content sliding under the sticky marketplace toolbar) instead of
       letting it bleed through. */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .lg\:button-icon:hover {
    background-color: var(--bg-fill-secondary-hover);
  }

  .lg\:button-icon.button-small {
    height: 2rem;
    width: 2rem;
    padding: 0.5rem !important;
  }

  .lg\:button-small.button-icon {
    height: 2rem;
    width: 2rem;
    padding: 0.5rem !important;
  }

  .lg\:button-icon.button-small svg {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
  }

  .lg\:button-small.button-icon svg {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
  }

  .lg\:button-icon.button-medium {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem !important;
  }

  .lg\:button-medium.button-icon {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem !important;
  }

  .lg\:button-icon.button-medium svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
  }

  .lg\:button-medium.button-icon svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
  }

  .lg\:button-icon.button-large {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .lg\:button-icon.button-large svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
  }

  .lg\:button-icon.button-icon-pagination svg {
    height: 0.75rem !important;
    width: 0.75rem !important;
  }

  @media (max-width: 1023px) {
    .page-header-toolbar .lg\:button-icon {
      height: 2.5rem !important;
      width: 2.5rem !important;
      padding: 0.625rem !important;
    }

    .page-header-toolbar .lg\:button-icon svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }

    .page-header-toolbar .lg\:button-icon {
      height: 2.5rem !important;
      width: 2.5rem !important;
      padding: 0.625rem !important;
    }

    .page-header-toolbar .lg\:button-icon svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }
  }

  .lg\:button-medium {
    height: 2.5rem;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .lg\:button-medium svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
  }

  .lg\:button-small {
    height: 2rem;
    border-radius: 0.5625rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .lg\:button-small svg {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
  }

  .lg\:dialog-full-sheet {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto;
    margin-bottom: 0px !important;
    width: 100%;
    max-width: 100% !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    height: calc(100dvh - 8px);
    max-height: none;
  }

  .lg\:button-icon.button-small svg.icon-18 {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .lg\:button-small.button-icon svg.icon-18 {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .lg\:inline-block[data-select-all-target='wrapper'] {
    display: block;
  }

  .lg\:border-b[data-select-all-target='wrapper'] {
    border-color: var(--content-border-dark);
  }
}

.marker\:text-content-primary *::marker {
  color: var(--content-primary);
}

.marker\:text-content-tertiary *::marker {
  color: var(--content-tertiary);
}

.marker\:text-content-primary::marker {
  color: var(--content-primary);
}

.marker\:text-content-tertiary::marker {
  color: var(--content-tertiary);
}

.placeholder\:text-sm::-moz-placeholder {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.placeholder\:text-sm::placeholder {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.placeholder\:font-medium::-moz-placeholder {
  font-weight: 500;
}

.placeholder\:font-medium::placeholder {
  font-weight: 500;
}

.placeholder\:normal-case::-moz-placeholder {
  text-transform: none;
}

.placeholder\:normal-case::placeholder {
  text-transform: none;
}

.placeholder\:\!text-content-secondary::-moz-placeholder {
  color: var(--content-secondary) !important;
}

.placeholder\:\!text-content-secondary::placeholder {
  color: var(--content-secondary) !important;
}

.placeholder\:text-content-secondary::-moz-placeholder {
  color: var(--content-secondary);
}

.placeholder\:text-content-secondary::placeholder {
  color: var(--content-secondary);
}

.placeholder\:text-content-tertiary::-moz-placeholder {
  color: var(--content-tertiary);
}

.placeholder\:text-content-tertiary::placeholder {
  color: var(--content-tertiary);
}

.placeholder\:text-gray-300::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-300::placeholder {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.placeholder\:text-richBlack\/12::-moz-placeholder {
  color: rgb(11 5 29 / .12);
}

.placeholder\:text-richBlack\/12::placeholder {
  color: rgb(11 5 29 / .12);
}

.placeholder\:text-richBlack\/32::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.placeholder\:text-richBlack\/32::placeholder {
  color: rgb(11 5 29 / .32);
}

.placeholder\:text-stone-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.placeholder\:text-stone-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.backdrop\:bg-content-background-modal-overlay::backdrop {
  background-color: var(--content-background-modal-overlay);
}

.backdrop\:backdrop-blur-xs::backdrop {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.before\:pointer-events-none::before {
  content: var(--tw-content);
  pointer-events: none;
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:inset-\[-1px\]::before {
  content: var(--tw-content);
  inset: -1px;
}

.before\:-left-\[1px\]::before {
  content: var(--tw-content);
  left: -1px;
}

.before\:top-1\/2::before {
  content: var(--tw-content);
  top: 50%;
}

.before\:z-0::before {
  content: var(--tw-content);
  z-index: 0;
}

.before\:mr-2::before {
  content: var(--tw-content);
  margin-right: 0.5rem;
}

.before\:block::before {
  content: var(--tw-content);
  display: block;
}

.before\:hidden::before {
  content: var(--tw-content);
  display: none;
}

.before\:h-\[60\%\]::before {
  content: var(--tw-content);
  height: 60%;
}

.before\:h-full::before {
  content: var(--tw-content);
  height: 100%;
}

.before\:w-px::before {
  content: var(--tw-content);
  width: 1px;
}

.before\:-translate-y-1\/2::before {
  content: var(--tw-content);
  --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));
}

.before\:rounded-radius-16::before {
  content: var(--tw-content);
  border-radius: 1rem;
}

.before\:rounded-radius-20::before {
  content: var(--tw-content);
  border-radius: 1.25rem;
}

.before\:rounded-radius-8::before {
  content: var(--tw-content);
  border-radius: 0.5rem;
}

.before\:border::before {
  content: var(--tw-content);
  border-width: 1px;
}

.before\:border-transparent::before {
  content: var(--tw-content);
  border-color: transparent;
}

.before\:bg-content-border-neutral::before {
  content: var(--tw-content);
  background-color: var(--content-border-neutral);
}

.before\:bg-content-primary::before {
  content: var(--tw-content);
  background-color: var(--content-primary);
}

.before\:text-xs::before {
  content: var(--tw-content);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
}

.before\:font-semibold::before {
  content: var(--tw-content);
  font-weight: 600;
}

.before\:uppercase::before {
  content: var(--tw-content);
  text-transform: uppercase;
}

.before\:tracking-wider::before {
  content: var(--tw-content);
  letter-spacing: 0.05em;
}

.before\:text-content-secondary::before {
  content: var(--tw-content);
  color: var(--content-secondary);
}

.before\:transition-opacity::before {
  content: var(--tw-content);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}

.before\:content-\[attr\(data-label\)\]::before {
  --tw-content: attr(data-label);
  content: var(--tw-content);
}

.after\:pointer-events-none::after {
  content: var(--tw-content);
  pointer-events: none;
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}

.after\:inset-x-2::after {
  content: var(--tw-content);
  left: 0.5rem;
  right: 0.5rem;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:bottom-0::after {
  content: var(--tw-content);
  bottom: 0px;
}

.after\:left-9::after {
  content: var(--tw-content);
  left: 2.25rem;
}

.after\:right-2\.5::after {
  content: var(--tw-content);
  right: 0.625rem;
}

.after\:z-0::after {
  content: var(--tw-content);
  z-index: 0;
}

.after\:hidden::after {
  content: var(--tw-content);
  display: none;
}

.after\:h-px::after {
  content: var(--tw-content);
  height: 1px;
}

.after\:rounded-radius-16::after {
  content: var(--tw-content);
  border-radius: 1rem;
}

.after\:rounded-radius-20::after {
  content: var(--tw-content);
  border-radius: 1.25rem;
}

.after\:rounded-radius-8::after {
  content: var(--tw-content);
  border-radius: 0.5rem;
}

.after\:border-b::after {
  content: var(--tw-content);
  border-bottom-width: 1px;
}

.after\:border-content-border-neutral::after {
  content: var(--tw-content);
  border-color: var(--content-border-neutral);
}

.after\:bg-content-border-neutral::after {
  content: var(--tw-content);
  background-color: var(--content-border-neutral);
}

.after\:bg-gradient-to-b::after {
  content: var(--tw-content);
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.after\:from-black\/0::after {
  content: var(--tw-content);
  --tw-gradient-from: rgb(0 0 0 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.after\:from-white::after {
  content: var(--tw-content);
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.after\:to-black\/04::after {
  content: var(--tw-content);
  --tw-gradient-to: rgb(0 0 0 / .04) var(--tw-gradient-to-position);
}

.after\:to-white\/40::after {
  content: var(--tw-content);
  --tw-gradient-to: rgb(255 255 255 / 0.4) var(--tw-gradient-to-position);
}

.after\:opacity-38::after {
  content: var(--tw-content);
  opacity: .38;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:flex:first-child {
  display: flex;
}

.first\:rounded-t-none:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.first\:pt-4:first-child {
  padding-top: 1rem;
}

.last\:hidden:last-child {
  display: none;
}

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

.last\:pb-4:last-child {
  padding-bottom: 1rem;
}

.last\:after\:hidden:last-child::after {
  content: var(--tw-content);
  display: none;
}

.last\:after\:border-b-0:last-child::after {
  content: var(--tw-content);
  border-bottom-width: 0px;
}

.last-of-type\:rounded-b-radius-6:last-of-type {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

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

.empty\:hidden:empty {
  display: none;
}

.empty\:border-0:empty {
  border-width: 0px;
}

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

.focus-within\:z-10:focus-within {
  z-index: 10;
}

.focus-within\:z-30:focus-within {
  z-index: 30;
}

.focus-within\:border-primary-500:focus-within {
  border-color: var(--primary-500);
}

.focus-within\:border-richBlack\/30:focus-within {
  border-color: rgb(11 5 29 / 0.3);
}

.focus-within\:ring-primary-500:focus-within {
  --tw-ring-color: var(--primary-500);
}

.hover\:z-50:hover {
  z-index: 50;
}

.hover\:z-\[100\]:hover {
  z-index: 100;
}

.hover\:translate-y-\[-1px\]:hover {
  --tw-translate-y: -1px;
  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));
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.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));
}

.hover\:cursor-grab:hover {
  cursor: grab;
}

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

.hover\:cursor-pointer:hover {
  cursor: pointer;
}

.hover\:border-2:hover {
  border-width: 2px;
}

.hover\:border-background-overlay:hover {
  border-color: var(--background-overlay);
}

.hover\:border-content-border-dark:hover {
  border-color: var(--content-border-dark);
}

.hover\:border-content-border-input:hover {
  border-color: var(--content-border-input);
}

.hover\:border-content-focus-outline:hover {
  border-color: var(--content-focus-outline);
}

.hover\:border-content-primary:hover {
  border-color: var(--content-primary);
}

.hover\:border-content-tertiary:hover {
  border-color: var(--content-tertiary);
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-500:hover {
  border-color: var(--primary-500);
}

.hover\:border-richBlack:hover {
  --tw-border-opacity: 1;
  border-color: rgb(11 5 29 / var(--tw-border-opacity, 1));
}

.hover\:border-richBlack\/10:hover {
  border-color: rgb(11 5 29 / 0.1);
}

.hover\:border-richBlack\/12:hover {
  border-color: rgb(11 5 29 / .12);
}

.hover\:border-slate-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.hover\:border-transparent:hover {
  border-color: transparent;
}

.hover\:\!bg-background-base:hover {
  background-color: var(--background-base) !important;
}

.hover\:\!bg-background-overlay:hover {
  background-color: var(--background-overlay) !important;
}

.hover\:\!bg-mint-200:hover {
  background-color: var(--mint-200) !important;
}

.hover\:\!bg-red-100:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(253 227 229 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-\[color\:var\(--base-color\)\]:hover {
  background-color: var(--base-color);
}

.hover\:bg-\[rgba\(104\2c 67\2c 0\2c 0\.08\)\]:hover {
  background-color: rgba(104,67,0,0.08);
}

.hover\:bg-background-base:hover {
  background-color: var(--background-base);
}

.hover\:bg-background-elevated:hover {
  background-color: var(--background-elevated);
}

.hover\:bg-background-neutral:hover {
  background-color: var(--background-neutral);
}

.hover\:bg-background-overlay:hover {
  background-color: var(--background-overlay);
}

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

.hover\:bg-black\/60:hover {
  background-color: rgb(0 0 0 / 0.6);
}

.hover\:bg-blue-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

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

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

.hover\:bg-grayscale-1:hover {
  background-color: var(--grayscale-1);
}

.hover\:bg-mint-50:hover {
  background-color: var(--mint-50);
}

.hover\:bg-primary-600:hover {
  background-color: var(--primary-600);
}

.hover\:bg-primary-700:hover {
  background-color: var(--primary-700);
}

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

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(214 44 56 / var(--tw-bg-opacity, 1));
}

.hover\:bg-richBlack\/04:hover {
  background-color: rgb(11 5 29 / .04);
}

.hover\:bg-sentiment-negative:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-stone-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-yellow-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(181 123 25 / var(--tw-bg-opacity, 1));
}

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

.hover\:\!text-brand-secondary-moola:hover {
  color: var(--brand-secondary-moola) !important;
}

.hover\:text-\[var\(--base-color\)\]:hover {
  color: var(--base-color);
}

.hover\:text-background-elevated:hover {
  color: var(--background-elevated);
}

.hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.hover\:text-brand-primary-crisp:hover {
  color: var(--brand-primary-crisp);
}

.hover\:text-content-primary:hover {
  color: var(--content-primary);
}

.hover\:text-content-secondary:hover {
  color: var(--content-secondary);
}

.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-inherit:hover {
  color: inherit;
}

.hover\:text-interactive-primary:hover {
  color: var(--interactive-primary);
}

.hover\:text-offWhite:hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-600:hover {
  color: var(--primary-600);
}

.hover\:text-richBlack:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary-600:hover {
  color: var(--secondary-600);
}

.hover\:text-sentiment-negative:hover {
  --tw-text-opacity: 1;
  color: rgb(149 31 39 / var(--tw-text-opacity, 1));
}

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

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

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

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

.hover\:text-stone-900:hover {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / 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\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:decoration-2:hover {
  text-decoration-thickness: 2px;
}

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

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

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

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

.hover\:shadow-\[inset_0_0_0_1\.5px_var\(--content-primary\)\]:hover {
  --tw-shadow: inset 0 0 0 1.5px var(--content-primary);
  --tw-shadow-colored: inset 0 0 0 1.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
}

.hover\:shadow-none: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: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm-hover:hover {
  --tw-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 2px 12px 0px rgba(0, 0, 0, 0.04), 0px 9px 9px 0px rgba(0, 0, 0, 0.01), 0px 2px 5px 0px rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 2px 12px 0px var(--tw-shadow-color), 0px 9px 9px 0px var(--tw-shadow-color), 0px 2px 5px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.hover\:ring-0:hover {
  --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(0px + 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);
}

.hover\:brightness-90:hover {
  --tw-brightness: brightness(.9);
  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);
}

.hover\:brightness-\[0\.88\]:hover {
  --tw-brightness: brightness(0.88);
  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);
}

.hover\:animation-paused:hover {
  animation-play-state: paused;
}

.hover\:before\:opacity-0:hover::before {
  content: var(--tw-content);
  opacity: 0;
}

.focus-within\:hover\:border-richBlack\/30:hover:focus-within {
  border-color: rgb(11 5 29 / 0.3);
}

.focus\:rounded-full:focus {
  border-radius: 9999px;
}

.focus\:border:focus {
  border-width: 1px;
}

.focus\:border-0:focus {
  border-width: 0px;
}

.focus\:border-none:focus {
  border-style: none;
}

.focus\:border-blue-400\/50:focus {
  border-color: rgb(96 165 250 / 0.5);
}

.focus\:border-content-primary:focus {
  border-color: var(--content-primary);
}

.focus\:border-gray-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-500:focus {
  border-color: var(--primary-500);
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(232 59 71 / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:bg-background-base:focus {
  background-color: var(--background-base);
}

.focus\:bg-background-elevated:focus {
  background-color: var(--background-elevated);
}

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

.focus\:text-content-primary:focus {
  color: var(--content-primary);
}

.focus\:shadow:focus {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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);
}

.focus\:shadow-\[0px_0px_0px_2px_var\(--content-focus-outline\2c rgba\(52\2c 46\2c 38\2c 0\.20\)\)_inset\]:focus {
  --tw-shadow: 0px 0px 0px 2px var(--content-focus-outline,rgba(52,46,38,0.20)) inset;
  --tw-shadow-colored: inset 0px 0px 0px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:shadow-none:focus {
  --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\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0: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(0px + 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-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-\[0\.5px\]: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(0.5px + 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-\[color\:var\(--button-color\)\]:focus {
  --tw-ring-color: var(--button-color);
}

.focus\:ring-blue-400\/50:focus {
  --tw-ring-color: rgb(96 165 250 / 0.5);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-content-focus-outline:focus {
  --tw-ring-color: var(--content-focus-outline);
}

.focus\:ring-content-primary:focus {
  --tw-ring-color: var(--content-primary);
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--primary-500);
}

.focus\:ring-primary-600:focus {
  --tw-ring-color: var(--primary-600);
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(232 59 71 / var(--tw-ring-opacity, 1));
}

.focus\:ring-slate-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));
}

.focus\:ring-white:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / 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\:placeholder\:\!text-content-secondary:focus::-moz-placeholder {
  color: var(--content-secondary) !important;
}

.focus\:placeholder\:\!text-content-secondary:focus::placeholder {
  color: var(--content-secondary) !important;
}

.focus\:placeholder\:text-content-tertiary:focus::-moz-placeholder {
  color: var(--content-tertiary);
}

.focus\:placeholder\:text-content-tertiary:focus::placeholder {
  color: var(--content-tertiary);
}

.focus\:hover\:text-offWhite:hover:focus {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.hover\:focus\:text-content-primary:focus:hover {
  color: var(--content-primary);
}

.focus-visible\:bg-background-overlay:focus-visible {
  background-color: var(--background-overlay);
}

.focus-visible\:shadow-\[inset_0px_0px_0px_2px_rgba\(11\2c 5\2c 29\2c 0\.40\)\2c 0px_0px_0px_1px_var\(--background-base\)\]:focus-visible {
  --tw-shadow: inset 0px 0px 0px 2px rgba(11,5,29,0.40),0px 0px 0px 1px var(--background-base);
  --tw-shadow-colored: inset 0px 0px 0px 2px var(--tw-shadow-color), 0px 0px 0px 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);
}

.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-content-primary:focus-visible {
  outline-color: var(--content-primary);
}

.focus-visible\:outline-white:focus-visible {
  outline-color: #fff;
}

.focus-visible\:ring-0: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(0px + 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-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-inset:focus-visible {
  --tw-ring-inset: inset;
}

.focus-visible\:ring-\[\#342e2633\]:focus-visible {
  --tw-ring-color: #342e2633;
}

.focus-visible\:ring-\[rgba\(11\2c 5\2c 29\2c 0\.40\)\]:focus-visible {
  --tw-ring-color: rgba(11,5,29,0.40);
}

.focus-visible\:ring-content-primary:focus-visible {
  --tw-ring-color: var(--content-primary);
}

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

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

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

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

.active\:\!scale-\[0\.995\]:active {
  --tw-scale-x: 0.995 !important;
  --tw-scale-y: 0.995 !important;
  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)) !important;
}

.active\:scale-100:active {
  --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));
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}

.active\:scale-\[0\.96\]:active {
  --tw-scale-x: 0.96;
  --tw-scale-y: 0.96;
  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));
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.active\:scale-\[0\.995\]:active {
  --tw-scale-x: 0.995;
  --tw-scale-y: 0.995;
  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));
}

.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.active\:border-background-overlay:active {
  border-color: var(--background-overlay);
}

.active\:bg-background-base:active {
  background-color: var(--background-base);
}

.active\:bg-background-elevated:active {
  background-color: var(--background-elevated);
}

.active\:bg-background-overlay:active {
  background-color: var(--background-overlay);
}

.active\:bg-sentiment-negative:active {
  --tw-bg-opacity: 1;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1));
}

.active\:\!text-yellow-800:active {
  --tw-text-opacity: 1 !important;
  color: rgb(120 71 27 / var(--tw-text-opacity, 1)) !important;
}

.active\:\!opacity-100:active {
  opacity: 1 !important;
}

.active\:shadow-\[inset_0_0_0_2px_rgba\(11\2c 5\2c 29\2c 0\.4\)\2c _0_0_0_1px_var\(--content-background-base\2c \#F3F0E8\)\]:active {
  --tw-shadow: inset 0 0 0 2px rgba(11,5,29,0.4), 0 0 0 1px var(--content-background-base,#F3F0E8);
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color), 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);
}

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

.active\:outline:active {
  outline-style: solid;
}

.active\:outline-2:active {
  outline-width: 2px;
}

.active\:outline-content-primary:active {
  outline-color: var(--content-primary);
}

.active\:focus\:\[--tw-ring-color\:transparent\]:focus:active {
  --tw-ring-color: transparent;
}

.active\:focus\:\[--tw-ring-width\:0px\]:focus:active {
  --tw-ring-width: 0px;
}

.disabled\:hidden:disabled {
  display: none;
}

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

.disabled\:\!bg-white:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:bg-slate-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-white:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.disabled\:text-content-primary:disabled {
  color: var(--content-primary);
}

.disabled\:opacity-0:disabled {
  opacity: 0;
}

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

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

.disabled\:hover\:\!bg-offWhite:hover:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:hover\:bg-offWhite:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
}

.disabled\:hover\:brightness-100:hover:disabled {
  --tw-brightness: brightness(1);
  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);
}

.group:first-of-type .group-first-of-type\:block {
  display: block;
}

.group[open] .group-open\:block {
  display: block;
}

.group[open] .group-open\:inline {
  display: inline;
}

.group[open] .group-open\:hidden {
  display: none;
}

.group\/\--subscription-details[open] .group-open\/--subscription-details\: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[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[open] .group-open\: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));
}

.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  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[open] .group-open\:-scale-y-100 {
  --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));
}

.group[open] .group-open\:grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}

.group[open] .group-open\:bg-background-base {
  background-color: var(--background-base);
}

.group:focus-within .group-focus-within\:visible {
  visibility: visible;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:block {
  display: block;
}

.group:hover .group-hover\:flex {
  display: flex;
}

.group:hover .group-hover\:hidden {
  display: none;
}

.group\/item:hover .group-hover\/item\:translate-x-3 {
  --tw-translate-x: 0.75rem;
  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\:translate-x-3 {
  --tw-translate-x: 0.75rem;
  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\: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));
}

.group:hover .group-hover\:scale-100 {
  --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));
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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\:border-yellow-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 247 194 / var(--tw-border-opacity, 1));
}

.group\/tab:hover .group-hover\/tab\:bg-content-border-dark {
  background-color: var(--content-border-dark);
}

.group:hover .group-hover\:bg-background-base {
  background-color: var(--background-base);
}

.group:hover .group-hover\:bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 244 228 / var(--tw-bg-opacity, 1));
}

.group\/item:hover .group-hover\/item\:text-content-secondary {
  color: var(--content-secondary);
}

.group:hover .group-hover\:text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

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

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

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

.group:hover .group-hover\:decoration-content-tertiary {
  text-decoration-color: var(--content-tertiary);
}

.group:hover .group-hover\:decoration-dotted {
  text-decoration-style: dotted;
}

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

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

.group\/item:focus .group-focus\/item\:opacity-100 {
  opacity: 1;
}

.group\/tab:focus-visible .group-focus-visible\/tab\:text-content-primary {
  color: var(--content-primary);
}

.group\/tab:focus-visible .group-focus-visible\/tab\:opacity-100 {
  opacity: 1;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:bottom-auto {
  bottom: auto;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:top-0 {
  top: 0px;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:block {
  display: block;
}

.group.collaboration-details-hidden .group-\[\.collaboration-details-hidden\]\:flex {
  display: flex;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:contents {
  display: contents;
}

.group\/dropdown.active .group-\[\.active\]\/dropdown\:hidden {
  display: none;
}

.group.collaboration-details-hidden .group-\[\.collaboration-details-hidden\]\:hidden {
  display: none;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:hidden {
  display: none;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:hidden {
  display: none;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:h-6 {
  height: 1.5rem;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:w-20 {
  width: 5rem;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:min-w-\[0px\] {
  min-width: 0px;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:scale-x-100 {
  --tw-scale-x: 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));
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:items-center {
  align-items: center;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:rounded-none {
  border-radius: 0;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:rounded-b-radius-4 {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.group.active .group-\[\.active\]\:border-2 {
  border-width: 2px;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:pt-2\.5 {
  padding-top: 0.625rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:text-base {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:hover\:bg-transparent:hover {
  background-color: transparent;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:active\:bg-background-base:active {
  background-color: var(--background-base);
}

.peer[open] ~ .peer-open\:hidden {
  display: none;
}

.peer:checked ~ .peer-checked\:inline {
  display: inline;
}

.peer:checked ~ .peer-checked\:hidden {
  display: none;
}

.peer:checked ~ .peer-checked\:translate-x-\[0\.875rem\] {
  --tw-translate-x: 0.875rem;
  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));
}

.peer:checked ~ .peer-checked\:border-\[6px\] {
  border-width: 6px;
}

.peer:checked ~ .peer-checked\:border-content-border-neutral {
  border-color: var(--content-border-neutral);
}

.peer:checked ~ .peer-checked\:border-content-primary {
  border-color: var(--content-primary);
}

.peer:checked ~ .peer-checked\:bg-background-elevated {
  background-color: var(--background-elevated);
}

.peer:checked ~ .peer-checked\:bg-content-primary {
  background-color: var(--content-primary);
}

.peer:checked ~ .peer-checked\:bg-interactive-primary {
  background-color: var(--interactive-primary);
}

.peer:checked ~ .peer-checked\:bg-transparent {
  background-color: transparent;
}

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

.peer:checked ~ .peer-checked\:px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.peer:checked ~ .peer-checked\:text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.peer:checked ~ .peer-checked\:text-content-primary {
  color: var(--content-primary);
}

.peer:checked ~ .peer-checked\:text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

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

.peer:checked ~ .peer-checked\:shadow-\[inset_0_0_0_1\.5px_var\(--content-primary\)\] {
  --tw-shadow: inset 0 0 0 1.5px var(--content-primary);
  --tw-shadow-colored: inset 0 0 0 1.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.peer:checked ~ .peer-checked\:outline {
  outline-style: solid;
}

.peer:checked ~ .peer-checked\:outline-2 {
  outline-width: 2px;
}

.peer:checked ~ .peer-checked\:outline-offset-2 {
  outline-offset: 2px;
}

.peer:checked ~ .peer-checked\:outline-white {
  outline-color: #fff;
}

.peer:checked ~ .peer-checked\:before\:border-content-primary::before {
  content: var(--tw-content);
  border-color: var(--content-primary);
}

.peer:checked ~ .peer-checked\:after\:opacity-0::after {
  content: var(--tw-content);
  opacity: 0;
}

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

.peer:checked ~ .peer-checked\:focus\:ring-0: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(0px + 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:-moz-placeholder-shown ~ .peer-placeholder-shown\:border-content-border-dark {
  border-color: var(--content-border-dark);
}

.peer:placeholder-shown ~ .peer-placeholder-shown\:border-content-border-dark {
  border-color: var(--content-border-dark);
}

.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-content-primary {
  --tw-ring-color: var(--content-primary);
}

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

.peer:enabled ~ .peer-enabled\:hover\:bg-background-overlay:hover {
  background-color: var(--background-overlay);
}

.peer:disabled ~ .peer-disabled\:border-0 {
  border-width: 0px;
}

.peer:disabled ~ .peer-disabled\:border-8 {
  border-width: 8px;
}

.peer:disabled ~ .peer-disabled\:border-background-disabled {
  border-color: var(--background-disabled);
}

.peer:disabled ~ .peer-disabled\:border-content-border-neutral {
  border-color: var(--content-border-neutral);
}

.peer:disabled ~ .peer-disabled\:bg-\[\#DFDEDC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(223 222 220 / var(--tw-bg-opacity, 1));
}

.peer:disabled ~ .peer-disabled\:bg-background-disabled {
  background-color: var(--background-disabled);
}

.peer:disabled ~ .peer-disabled\:bg-background-overlay {
  background-color: var(--background-overlay);
}

.peer:disabled ~ .peer-disabled\:bg-content-border-dark {
  background-color: var(--content-border-dark);
}

.peer:disabled ~ .peer-disabled\:text-content-tertiary {
  color: var(--content-tertiary);
}

.peer:disabled ~ .peer-disabled\:text-transparent {
  color: transparent;
}

.peer:disabled ~ .peer-disabled\:\!opacity-0 {
  opacity: 0 !important;
}

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

.peer:disabled ~ .peer-disabled\:before\:opacity-0::before {
  content: var(--tw-content);
  opacity: 0;
}

.peer:disabled ~ .peer-disabled\:after\:opacity-0::after {
  content: var(--tw-content);
  opacity: 0;
}

.peer:disabled ~ .peer-disabled\:after\:opacity-38::after {
  content: var(--tw-content);
  opacity: .38;
}

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

.group:hover .peer:disabled ~ .group-hover\:peer-disabled\:\!opacity-0 {
  opacity: 0 !important;
}

.peer:disabled:checked ~ .peer-disabled\:peer-checked\:bg-background-elevated {
  background-color: var(--background-elevated);
}

.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled) {
  cursor: not-allowed;
}

.has-\[\:checked\]\:border-transparent:has(:checked) {
  border-color: transparent;
}

.has-\[input\:checked\]\:border-content-border-neutral:has(input:checked) {
  border-color: var(--content-border-neutral);
}

.has-\[\:checked\]\:bg-transparent:has(:checked) {
  background-color: transparent;
}

.has-\[\:focus\]\:bg-background-base:has(:focus) {
  background-color: var(--background-base);
}

.has-\[input\:checked\]\:bg-background-elevated:has(input:checked) {
  background-color: var(--background-elevated);
}

.has-\[\:checked\]\:\!text-content-primary:has(:checked) {
  color: var(--content-primary) !important;
}

.has-\[\:selected\]\:\!text-content-primary:has(:selected) {
  color: var(--content-primary) !important;
}

.has-\[input\:checked\]\:text-yellow-400:has(input:checked) {
  --tw-text-opacity: 1;
  color: rgb(226 180 45 / var(--tw-text-opacity, 1));
}

.has-\[input\:hover\]\:text-yellow-600:has(input:hover) {
  --tw-text-opacity: 1;
  color: rgb(181 123 25 / var(--tw-text-opacity, 1));
}

.has-\[\~label\>input\:checked\]\:has-\[input\:hover\]\:text-yellow-600:has(input:hover):has(~label>input:checked) {
  --tw-text-opacity: 1;
  color: rgb(181 123 25 / var(--tw-text-opacity, 1));
}

.has-\[\~label\>input\:checked\]\:text-yellow-400:has(~label>input:checked) {
  --tw-text-opacity: 1;
  color: rgb(226 180 45 / var(--tw-text-opacity, 1));
}

.has-\[\~label\>input\:hover\]\:text-yellow-600:has(~label>input:hover) {
  --tw-text-opacity: 1;
  color: rgb(181 123 25 / var(--tw-text-opacity, 1));
}

.has-\[dialog\[open\]\]\:\!opacity-0:has(dialog[open]) {
  opacity: 0 !important;
}

.has-\[\:checked\]\:shadow-\[inset_0_0_0_2px_black\]:has(:checked) {
  --tw-shadow: inset 0 0 0 2px black;
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.has-\[input\:checked\]\:shadow-\[inset_0_0_0_2px_var\(--content-primary\2c \#342E26\)\]:has(input:checked) {
  --tw-shadow: inset 0 0 0 2px var(--content-primary,#342E26);
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.has-\[input\:focus-visible\]\:outline-1:has(input:focus-visible) {
  outline-width: 1px;
}

.has-\[\:checked\]\:ring-0:has(:checked) {
  --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(0px + 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);
}

.has-\[\:disabled\]\:hover\:bg-transparent:hover:has(:disabled) {
  background-color: transparent;
}

.group:has(:disabled) .group-has-\[\:disabled\]\:text-content-tertiary {
  color: var(--content-tertiary);
}

.aria-hidden\:hidden[aria-hidden="true"] {
  display: none;
}

.aria-selected\:bg-offWhite\/04[aria-selected="true"] {
  background-color: rgb(248 245 244 / .04);
}

.aria-selected\:bg-offWhite\/50[aria-selected="true"] {
  background-color: rgb(248 245 244 / 0.5);
}

.aria-selected\:text-content-primary[aria-selected="true"] {
  color: var(--content-primary);
}

.group\/search[aria-busy="true"] .group-aria-busy\/search\:block {
  display: block;
}

.group\/search[aria-busy="true"] .group-aria-busy\/search\:hidden {
  display: none;
}

.group[aria-selected="true"] .group-aria-selected\:block {
  display: block;
}

.group[aria-selected="true"] .group-aria-selected\:border-\[var\(--base-color\)\] {
  border-color: var(--base-color);
}

.group\/tab[aria-selected="true"] .group-aria-selected\/tab\:bg-brand-secondary-moola {
  background-color: var(--brand-secondary-moola);
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:pointer-events-none {
  pointer-events: none;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:visible {
  visibility: visible;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:block {
  display: block;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:flex {
  display: flex;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:hidden {
  display: none;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:max-w-\[200px\] {
  max-width: 200px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:animate-spin {
  animation: spin 1s linear infinite;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:opacity-0 {
  opacity: 0;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:opacity-100 {
  opacity: 1;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:delay-\[3s\] {
  transition-delay: 3s;
}

.data-\[dragover\]\:border-richBlack[data-dragover] {
  --tw-border-opacity: 1;
  border-color: rgb(11 5 29 / var(--tw-border-opacity, 1));
}

.data-\[state\=all\]\:border-content-primary[data-state="all"] {
  border-color: var(--content-primary);
}

.data-\[state\=some\]\:border-content-primary[data-state="some"] {
  border-color: var(--content-primary);
}

.data-\[dragover\]\:bg-background-overlay[data-dragover] {
  background-color: var(--background-overlay);
}

.data-\[selected\=true\]\:bg-interactive-primary[data-selected="true"] {
  background-color: var(--interactive-primary);
}

.data-\[state\=all\]\:bg-content-primary[data-state="all"] {
  background-color: var(--content-primary);
}

.data-\[state\=some\]\:bg-content-primary[data-state="some"] {
  background-color: var(--content-primary);
}

.data-\[selected\=true\]\:px-3[data-selected="true"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.data-\[selected\=true\]\:text-sm[data-selected="true"] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.data-\[active\=true\]\:ring-2[data-active="true"] {
  --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);
}

.data-\[active\=true\]\:ring-content-primary[data-active="true"] {
  --tw-ring-color: var(--content-primary);
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:invisible {
  visibility: hidden;
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:block {
  display: block;
}

.group\/button[data-spinner-shown="true"] .group-data-\[spinner-shown\=true\]\/button\:w-\[var\(--content-max-width\2c auto\)\] {
  width: var(--content-max-width,auto);
}

.group\/acc[data-expanded="true"] .group-data-\[expanded\=true\]\/acc\:grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:border-richBlack {
  --tw-border-opacity: 1;
  border-color: rgb(11 5 29 / var(--tw-border-opacity, 1));
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:bg-background-overlay {
  background-color: var(--background-overlay);
}

.group[data-selected="true"] .group-data-\[selected\=true\]\:text-background-elevated {
  color: var(--background-elevated);
}

.group\/button[data-spinner-shown="true"] .group-data-\[spinner-shown\=true\]\/button\:opacity-0 {
  opacity: 0;
}

.group\/button[data-spinner-shown="true"] .group-data-\[spinner-shown\=true\]\/button\:opacity-100 {
  opacity: 1;
}

.group\/cbx[data-state="all"] .group-data-\[state\=all\]\/cbx\:opacity-100 {
  opacity: 1;
}

.group\/cbx[data-state="some"] .group-data-\[state\=some\]\/cbx\:opacity-100 {
  opacity: 1;
}

.group[data-dragover="true"] .group-data-\[dragover\=true\]\: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);
}

.group[data-dragover="true"] .group-data-\[dragover\=true\]\:ring-content-primary {
  --tw-ring-color: var(--content-primary);
}

@container (min-width: 32rem) {
  .\@lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .\@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\:flex-row {
    flex-direction: row;
  }

  .\@lg\:items-center {
    align-items: center;
  }

  .\@lg\:justify-between {
    justify-content: space-between;
  }

  .\@lg\:gap-2 {
    gap: 0.5rem;
  }

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

@container (min-width: 36rem) {
  .\@xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .\@xl\:col-start-2 {
    grid-column-start: 2;
  }

  .\@xl\:col-start-3 {
    grid-column-start: 3;
  }

  .\@xl\:col-start-4 {
    grid-column-start: 4;
  }

  .\@xl\:row-start-1 {
    grid-row-start: 1;
  }

  .\@xl\:-mb-2 {
    margin-bottom: -0.5rem;
  }

  .\@xl\:-ml-1\.5 {
    margin-left: -0.375rem;
  }

  .\@xl\:-ml-4 {
    margin-left: -1rem;
  }

  .\@xl\:-mr-4 {
    margin-right: -1rem;
  }

  .\@xl\:-mt-2 {
    margin-top: -0.5rem;
  }

  .\@xl\:block {
    display: block;
  }

  .\@xl\:flex {
    display: flex;
  }

  .\@xl\:grid {
    display: grid;
  }

  .\@xl\:hidden {
    display: none;
  }

  .\@xl\:h-11 {
    height: 2.75rem;
  }

  .\@xl\:w-11 {
    width: 2.75rem;
  }

  .\@xl\:grid-cols-\[minmax\(50\%\2c auto\)_1fr_1fr_auto\] {
    grid-template-columns: minmax(50%,auto) 1fr 1fr auto;
  }

  .\@xl\:grid-cols-subgrid {
    grid-template-columns: subgrid;
  }

  .\@xl\:items-center {
    align-items: center;
  }

  .\@xl\:gap-0 {
    gap: 0px;
  }

  .\@xl\:gap-4 {
    gap: 1rem;
  }

  .\@xl\:p-2 {
    padding: 0.5rem;
  }

  .\@xl\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

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

  .\@xl\:pl-2 {
    padding-left: 0.5rem;
  }

  .\@xl\:pl-3 {
    padding-left: 0.75rem;
  }

  .\@xl\:pr-2 {
    padding-right: 0.5rem;
  }

  .\@xl\:pr-3 {
    padding-right: 0.75rem;
  }

  .\@xl\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

@container (min-width: 42rem) {
  .\@2xl\:absolute {
    position: absolute;
  }

  .\@2xl\:relative {
    position: relative;
  }

  .\@2xl\:bottom-0 {
    bottom: 0px;
  }

  .\@2xl\:left-0 {
    left: 0px;
  }

  .\@2xl\:left-4 {
    left: 1rem;
  }

  .\@2xl\:right-0 {
    right: 0px;
  }

  .\@2xl\:right-4 {
    right: 1rem;
  }

  .\@2xl\:mb-0 {
    margin-bottom: 0px;
  }

  .\@2xl\:table-cell {
    display: table-cell;
  }

  .\@2xl\:table-row {
    display: table-row;
  }

  .\@2xl\:hidden {
    display: none;
  }

  .\@2xl\:size-20 {
    width: 5rem;
    height: 5rem;
  }

  .\@2xl\:size-8 {
    width: 2rem;
    height: 2rem;
  }

  .\@2xl\:h-px {
    height: 1px;
  }

  .\@2xl\:flex-col {
    flex-direction: column;
  }

  .\@2xl\:items-center {
    align-items: center;
  }

  .\@2xl\:gap-3 {
    gap: 0.75rem;
  }

  .\@2xl\:rounded-none {
    border-radius: 0;
  }

  .\@2xl\:rounded-radius-20 {
    border-radius: 1.25rem;
  }

  .\@2xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .\@2xl\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .\@2xl\:text-left {
    text-align: left;
  }

  .\@2xl\:text-center {
    text-align: center;
  }

  .\@2xl\:text-6xl {
    font-size: 3.5rem;
    line-height: 1.2;
    letter-spacing: -0.1138rem;
  }

  .\@2xl\:text-\[26px\] {
    font-size: 26px;
  }

  .\@2xl\:content-\[\'\'\] {
    --tw-content: '';
    content: var(--tw-content);
  }

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

@container (min-width: 48rem) {
  .\@3xl\:block {
    display: block;
  }

  .\@3xl\:flex {
    display: flex;
  }

  .\@3xl\:w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }

  .\@3xl\:max-w-\[390px\] {
    max-width: 390px;
  }

  .\@3xl\:max-w-\[540px\] {
    max-width: 540px;
  }

  .\@3xl\:flex-row {
    flex-direction: row;
  }

  .\@3xl\:items-center {
    align-items: center;
  }

  .\@3xl\:justify-between {
    justify-content: space-between;
  }

  .\@3xl\:gap-20 {
    gap: 5rem;
  }

  .\@3xl\:border-b {
    border-bottom-width: 1px;
  }

  .\@3xl\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

html[data-hotwire-native] .hotwire-native\:hidden {
  display: none;
}

.empty-within\:border-richBlack\/10:has(input:not([placeholder])[data-empty="true"]) {
  border-color: rgb(11 5 29 / 0.1);
}

@media not all and (min-width: 1280px) {
  .max-xl\:mb-20 {
    margin-bottom: 5rem;
  }
}

@media not all and (min-width: 1024px) {
  .max-lg\:absolute {
    position: absolute;
  }

  .max-lg\:sticky {
    position: sticky;
  }

  .max-lg\:left-0 {
    left: 0px;
  }

  .max-lg\:top-0 {
    top: 0px;
  }

  .max-lg\:top-auto {
    top: auto;
  }

  .max-lg\:z-\[2000\] {
    z-index: 2000;
  }

  .max-lg\:z-\[999\] {
    z-index: 999;
  }

  .max-lg\:order-1 {
    order: 1;
  }

  .max-lg\:order-2 {
    order: 2;
  }

  .max-lg\:m-0 {
    margin: 0px;
  }

  .max-lg\:-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .max-lg\:-mx-5 {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .max-lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .max-lg\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .max-lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .max-lg\:mb-0 {
    margin-bottom: 0px;
  }

  .max-lg\:block {
    display: block;
  }

  .max-lg\:flex {
    display: flex;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:size-6 {
    width: 1.5rem;
    height: 1.5rem;
  }

  .max-lg\:size-8 {
    width: 2rem;
    height: 2rem;
  }

  .max-lg\:\!h-dvh {
    height: 100dvh !important;
  }

  .max-lg\:h-\[calc\(100dvh-3\.75rem\)\] {
    height: calc(100dvh - 3.75rem);
  }

  .max-lg\:h-\[calc\(100dvh-5\.75rem\)\] {
    height: calc(100dvh - 5.75rem);
  }

  .max-lg\:h-auto {
    height: auto;
  }

  .max-lg\:h-dvh {
    height: 100dvh;
  }

  .max-lg\:h-full {
    height: 100%;
  }

  .max-lg\:max-h-\[calc\(100dvh-8px\)\] {
    max-height: calc(100dvh - 8px);
  }

  .max-lg\:max-h-none {
    max-height: none;
  }

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

  .max-lg\:min-h-\[100dvh\] {
    min-height: 100dvh;
  }

  .max-lg\:min-h-\[calc\(100dvh-7rem\)\] {
    min-height: calc(100dvh - 7rem);
  }

  .max-lg\:\!w-full {
    width: 100% !important;
  }

  .max-lg\:w-full {
    width: 100%;
  }

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

  .max-lg\:min-w-\[300px\] {
    min-width: 300px;
  }

  .max-lg\:max-w-\[440px\] {
    max-width: 440px;
  }

  .max-lg\:max-w-none {
    max-width: none;
  }

  .max-lg\:flex-1 {
    flex: 1 1 0%;
  }

  .max-lg\:flex-grow {
    flex-grow: 1;
  }

  .max-lg\:grow {
    flex-grow: 1;
  }

  .max-lg\:translate-y-\[calc\(100\%\+2rem\)\] {
    --tw-translate-y: calc(100% + 2rem);
    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));
  }

  .max-lg\:cursor-pointer {
    cursor: pointer;
  }

  .max-lg\:auto-cols-\[calc\(50\%-8px\)\] {
    grid-auto-columns: calc(50% - 8px);
  }

  .max-lg\:flex-col {
    flex-direction: column;
  }

  .max-lg\:items-start {
    align-items: flex-start;
  }

  .max-lg\:items-center {
    align-items: center;
  }

  .max-lg\:justify-center {
    justify-content: center;
  }

  .max-lg\:justify-between {
    justify-content: space-between;
  }

  .max-lg\:gap-3 {
    gap: 0.75rem;
  }

  .max-lg\:gap-4 {
    gap: 1rem;
  }

  .max-lg\:gap-6 {
    gap: 1.5rem;
  }

  .max-lg\:gap-7 {
    gap: 1.75rem;
  }

  .max-lg\:gap-8 {
    gap: 2rem;
  }

  .max-lg\:gap-y-0 {
    row-gap: 0px;
  }

  .max-lg\:overflow-hidden {
    overflow: hidden;
  }

  .max-lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .max-lg\:rounded-full {
    border-radius: 9999px;
  }

  .max-lg\:rounded-none {
    border-radius: 0;
  }

  .max-lg\:rounded-radius-8 {
    border-radius: 0.5rem;
  }

  .max-lg\:\!rounded-b-none {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .max-lg\:rounded-t-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .max-lg\:\!border-none {
    border-style: none !important;
  }

  .max-lg\:\!bg-background-overlay {
    background-color: var(--background-overlay) !important;
  }

  .max-lg\:bg-background-elevated {
    background-color: var(--background-elevated);
  }

  .max-lg\:bg-background-overlay {
    background-color: var(--background-overlay);
  }

  .max-lg\:bg-content-background-modal-overlay {
    background-color: var(--content-background-modal-overlay);
  }

  .max-lg\:p-0 {
    padding: 0px;
  }

  .max-lg\:p-3 {
    padding: 0.75rem;
  }

  .max-lg\:p-4 {
    padding: 1rem;
  }

  .max-lg\:\!px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .max-lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .max-lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .max-lg\:py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .max-lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .max-lg\:\!pb-0 {
    padding-bottom: 0px !important;
  }

  .max-lg\:pb-0 {
    padding-bottom: 0px;
  }

  .max-lg\:pb-4 {
    padding-bottom: 1rem;
  }

  .max-lg\:pb-\[calc\(6rem\+var\(--ol-tabbar-safe-strip\)\)\] {
    padding-bottom: calc(6rem + var(--ol-tabbar-safe-strip));
  }

  .max-lg\:pb-\[calc\(8rem\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(8rem + env(safe-area-inset-bottom));
  }

  .max-lg\:pb-\[calc\(var\(--ol-sticky-footer-height\2c 0px\)\+36px\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(var(--ol-sticky-footer-height,0px) + 36px + env(safe-area-inset-bottom));
  }

  .max-lg\:pb-\[calc\(var\(--ol-sticky-footer-height\2c 8rem\)\+1rem\)\] {
    padding-bottom: calc(var(--ol-sticky-footer-height,8rem) + 1rem);
  }

  .max-lg\:pt-3 {
    padding-top: 0.75rem;
  }

  .max-lg\:pt-4 {
    padding-top: 1rem;
  }

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

  .max-lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.0294rem;
  }

  .max-lg\:text-\[28px\] {
    font-size: 28px;
  }

  .max-lg\:text-base {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .max-lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: -0.0113rem;
  }

  .max-lg\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0;
  }

  .max-lg\:font-normal {
    font-weight: 400;
  }

  .max-lg\:leading-7 {
    line-height: 1.75rem;
  }

  .max-lg\:shadow-none {
    --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);
  }

  .max-lg\:backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  .max-lg\: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;
  }

  .max-lg\:transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:before\:hidden::before {
    content: var(--tw-content);
    display: none;
  }

  .max-lg\:after\:left-4::after {
    content: var(--tw-content);
    left: 1rem;
  }

  .max-lg\:after\:right-4::after {
    content: var(--tw-content);
    right: 1rem;
  }

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

  .max-lg\:active\:bg-background-base:active {
    background-color: var(--background-base);
  }

  .max-lg\:active\:bg-background-overlay:active {
    background-color: var(--background-overlay);
  }

  .group.conversation-selected .group-\[\.conversation-selected\]\:max-lg\:hidden {
    display: none;
  }

  .max-lg\:data-\[revealed\=true\]\:translate-y-0[data-revealed="true"] {
    --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));
  }
}

@media not all and (min-width: 768px) {
  .max-md\:sticky {
    position: sticky;
  }

  .max-md\:bottom-0 {
    bottom: 0px;
  }

  .max-md\:top-0 {
    top: 0px;
  }

  .max-md\:z-20 {
    z-index: 20;
  }

  .max-md\:-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .max-md\:-mb-8 {
    margin-bottom: -2rem;
  }

  .max-md\:block {
    display: block;
  }

  .max-md\:hidden {
    display: none;
  }

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

  .max-md\:h-\[200px\] {
    height: 200px;
  }

  .max-md\:max-h-\[90dvh\] {
    max-height: 90dvh;
  }

  .max-md\:w-\[calc\(100\%\+\(var\(--screen-margin\)\*2\)\)\] {
    width: calc(100% + (var(--screen-margin) * 2));
  }

  .max-md\:flex-col {
    flex-direction: column;
  }

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

  .max-md\:items-stretch {
    align-items: stretch;
  }

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

  .max-md\:overflow-y-auto {
    overflow-y: auto;
  }

  .max-md\:overscroll-contain {
    overscroll-behavior: contain;
  }

  .max-md\:rounded-radius-12 {
    border-radius: 0.75rem;
  }

  .max-md\:bg-background-elevated {
    background-color: var(--background-elevated);
  }

  .max-md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .max-md\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .max-md\:pt-5 {
    padding-top: 1.25rem;
  }
}

@media (min-width: 640px) {
  .sm\:static {
    position: static;
  }

  .sm\:bottom-40 {
    bottom: 10rem;
  }

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

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

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

  .sm\:m-10 {
    margin: 2.5rem;
  }

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

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

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

  .sm\:mt-7 {
    margin-top: 1.75rem;
  }

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:hidden {
    display: none;
  }

  .sm\:min-h-screen {
    min-height: 100vh;
  }

  .sm\:w-1\/4 {
    width: 25%;
  }

  .sm\:w-3\/4 {
    width: 75%;
  }

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

  .sm\:w-full {
    width: 100%;
  }

  .sm\:max-w-\[350px\] {
    max-width: 350px;
  }

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

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

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:auto-cols-\[330px\] {
    grid-auto-columns: 330px;
  }

  .sm\:auto-cols-\[46\%\] {
    grid-auto-columns: 46%;
  }

  .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-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

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

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

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

  .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\: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));
  }

  .sm\: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));
  }

  .sm\:rounded-radius-6 {
    border-radius: 0.375rem;
  }

  .sm\:border-0 {
    border-width: 0px;
  }

  .sm\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

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

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

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

  .sm\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

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

  .sm\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

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

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

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

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

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

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

  .sm\:text-3xl {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.0431rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.0375rem;
  }

  .sm\:text-\[1\.375rem\] {
    font-size: 1.375rem;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

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

  .sm\:text-sm\/6 {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .sm\:text-xl {
    font-size: 1.3125rem;
    line-height: 1.2;
    letter-spacing: -0.02rem;
  }

  .sm\:shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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);
  }
}

@media (min-width: 768px) {
  .md\:absolute {
    position: absolute;
  }

  .md\:relative {
    position: relative;
  }

  .md\:right-0 {
    right: 0px;
  }

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

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

  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:my-2\.5 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  .md\:mr-2\.5 {
    margin-right: 0.625rem;
  }

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

  .md\:mt-8 {
    margin-top: 2rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

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

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

  .md\:h-14 {
    height: 3.5rem;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:h-\[480px\] {
    height: 480px;
  }

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

  .md\:h-full {
    height: 100%;
  }

  .md\:h-screen {
    height: 100vh;
  }

  .md\:max-h-32 {
    max-height: 8rem;
  }

  .md\:max-h-\[60dvh\] {
    max-height: 60dvh;
  }

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

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-14 {
    width: 3.5rem;
  }

  .md\:w-2\/5 {
    width: 40%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-3\/5 {
    width: 60%;
  }

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

  .md\:w-\[350px\] {
    width: 350px;
  }

  .md\:w-\[388px\] {
    width: 388px;
  }

  .md\:w-\[400px\] {
    width: 400px;
  }

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

  .md\:w-full {
    width: 100%;
  }

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

  .md\:min-w-\[165px\] {
    min-width: 165px;
  }

  .md\:max-w-\[calc\(1280px\+64px\)\] {
    max-width: calc(1280px + 64px);
  }

  .md\:max-w-layout-1600 {
    max-width: 1600px;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:shrink-0 {
    flex-shrink: 0;
  }

  .md\:rotate-\[5deg\] {
    --tw-rotate: 5deg;
    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));
  }

  .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-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

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

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

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

  .md\:justify-normal {
    justify-content: normal;
  }

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

  .md\:gap-10 {
    gap: 2.5rem;
  }

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

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

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:overflow-hidden {
    overflow: hidden;
  }

  .md\:overflow-y-scroll {
    overflow-y: scroll;
  }

  .md\:rounded-radius-24 {
    border-radius: 1.5rem;
  }

  .md\:rounded-radius-8 {
    border-radius: 0.5rem;
  }

  .md\:rounded-tl-radius-8 {
    border-top-left-radius: 0.5rem;
  }

  .md\:border {
    border-width: 1px;
  }

  .md\:border-l {
    border-left-width: 1px;
  }

  .md\:border-l-2 {
    border-left-width: 2px;
  }

  .md\:border-r {
    border-right-width: 1px;
  }

  .md\:border-t {
    border-top-width: 1px;
  }

  .md\:border-none {
    border-style: none;
  }

  .md\:border-content-border-neutral {
    border-color: var(--content-border-neutral);
  }

  .md\:border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  .md\:bg-background-base {
    background-color: var(--background-base);
  }

  .md\:bg-background-overlay {
    background-color: var(--background-overlay);
  }

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

  .md\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .md\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

  .md\:p-3 {
    padding: 0.75rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

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

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

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

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

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

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

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

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

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

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

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

  .md\:pb-12 {
    padding-bottom: 3rem;
  }

  .md\:pb-14 {
    padding-bottom: 3.5rem;
  }

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

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

  .md\:pt-12 {
    padding-top: 3rem;
  }

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

  .md\:text-3xl {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.0431rem;
  }

  .md\:text-\[26px\] {
    font-size: 26px;
  }

  .md\:text-\[72px\] {
    font-size: 72px;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

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

  .md\:leading-110 {
    line-height: 1.1;
  }

  .md\:leading-\[20px\] {
    line-height: 20px;
  }

  .md\:leading-tight {
    line-height: 1.2;
  }

  .md\:tracking-tight-10 {
    letter-spacing: -0.1625rem;
  }

  .md\:tracking-tight-4 {
    letter-spacing: -0.04rem;
  }

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

@media (min-width: 1024px) {
  .lg\:visible {
    visibility: visible;
  }

  .lg\:invisible {
    visibility: hidden;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:relative {
    position: relative;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:inset-y-0 {
    top: 0px;
    bottom: 0px;
  }

  .lg\:bottom-0 {
    bottom: 0px;
  }

  .lg\:bottom-4 {
    bottom: 1rem;
  }

  .lg\:bottom-auto {
    bottom: auto;
  }

  .lg\:left-1\/2 {
    left: 50%;
  }

  .lg\:left-4 {
    left: 1rem;
  }

  .lg\:left-6 {
    left: 1.5rem;
  }

  .lg\:left-64 {
    left: 16rem;
  }

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

  .lg\:left-auto {
    left: auto;
  }

  .lg\:right-0 {
    right: 0px;
  }

  .lg\:right-2 {
    right: 0.5rem;
  }

  .lg\:right-4 {
    right: 1rem;
  }

  .lg\:right-auto {
    right: auto;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:top-10 {
    top: 2.5rem;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:top-4 {
    top: 1rem;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-first {
    order: -9999;
  }

  .lg\:order-last {
    order: 9999;
  }

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

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

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

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

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

  .lg\:row-span-full {
    grid-row: 1 / -1;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:m-20 {
    margin: 5rem;
  }

  .lg\:-mx-2\.5 {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
  }

  .lg\:-my-1 {
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .lg\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .lg\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .lg\:my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .lg\:my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .lg\:my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .lg\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .lg\:my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .lg\:\!mt-auto {
    margin-top: auto !important;
  }

  .lg\:-ml-2 {
    margin-left: -0.5rem;
  }

  .lg\:-ml-px {
    margin-left: -1px;
  }

  .lg\:-mr-px {
    margin-right: -1px;
  }

  .lg\:-mt-12 {
    margin-top: -3rem;
  }

  .lg\:-mt-5 {
    margin-top: -1.25rem;
  }

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

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .lg\:mb-4 {
    margin-bottom: 1rem;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:ml-3 {
    margin-left: 0.75rem;
  }

  .lg\:mr-2\.5 {
    margin-right: 0.625rem;
  }

  .lg\:mr-\[9px\] {
    margin-right: 9px;
  }

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

  .lg\:mt-12 {
    margin-top: 3rem;
  }

  .lg\:mt-14 {
    margin-top: 3.5rem;
  }

  .lg\:mt-16 {
    margin-top: 4rem;
  }

  .lg\:mt-2 {
    margin-top: 0.5rem;
  }

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:mt-5 {
    margin-top: 1.25rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:mt-8 {
    margin-top: 2rem;
  }

  .lg\:mt-\[10dvh\] {
    margin-top: 10dvh;
  }

  .lg\:mt-\[120px\] {
    margin-top: 120px;
  }

  .lg\:mt-\[20px\] {
    margin-top: 20px;
  }

  .lg\:mt-\[9px\] {
    margin-top: 9px;
  }

  .lg\:line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:\!flex {
    display: flex !important;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:\!size-8 {
    width: 2rem !important;
    height: 2rem !important;
  }

  .lg\:size-10 {
    width: 2.5rem;
    height: 2.5rem;
  }

  .lg\:size-11 {
    width: 2.75rem;
    height: 2.75rem;
  }

  .lg\:size-14 {
    width: 3.5rem;
    height: 3.5rem;
  }

  .lg\:size-4 {
    width: 1rem;
    height: 1rem;
  }

  .lg\:size-5 {
    width: 1.25rem;
    height: 1.25rem;
  }

  .lg\:size-8 {
    width: 2rem;
    height: 2rem;
  }

  .lg\:size-\[18px\] {
    width: 18px;
    height: 18px;
  }

  .lg\:\!h-\[400px\] {
    height: 400px !important;
  }

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

  .lg\:h-36 {
    height: 9rem;
  }

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

  .lg\:h-7 {
    height: 1.75rem;
  }

  .lg\:h-8 {
    height: 2rem;
  }

  .lg\:h-\[104px\] {
    height: 104px;
  }

  .lg\:h-\[200px\] {
    height: 200px;
  }

  .lg\:h-\[400px\] {
    height: 400px;
  }

  .lg\:h-\[440px\] {
    height: 440px;
  }

  .lg\:h-\[calc\(100dvh-16\.75rem\)\] {
    height: calc(100dvh - 16.75rem);
  }

  .lg\:h-\[calc\(100dvh-1rem\)\] {
    height: calc(100dvh - 1rem);
  }

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

  .lg\:h-dvh {
    height: 100dvh;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:h-screen {
    height: 100vh;
  }

  .lg\:max-h-12 {
    max-height: 3rem;
  }

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

  .lg\:max-h-64 {
    max-height: 16rem;
  }

  .lg\:max-h-\[425px\] {
    max-height: 425px;
  }

  .lg\:max-h-\[456px\] {
    max-height: 456px;
  }

  .lg\:max-h-\[90vh\] {
    max-height: 90vh;
  }

  .lg\:max-h-\[calc\(70dvh-88px\)\] {
    max-height: calc(70dvh - 88px);
  }

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

  .lg\:min-h-\[400px\] {
    min-height: 400px;
  }

  .lg\:min-h-\[600px\] {
    min-height: 600px;
  }

  .lg\:min-h-\[calc\(100vh-1rem\)\] {
    min-height: calc(100vh - 1rem);
  }

  .lg\:\!w-\[398px\] {
    width: 398px !important;
  }

  .lg\:\!w-\[960px\] {
    width: 960px !important;
  }

  .lg\:w-0 {
    width: 0px;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:w-128 {
    width: 30rem;
  }

  .lg\:w-2\/5 {
    width: 40%;
  }

  .lg\:w-3\/4 {
    width: 75%;
  }

  .lg\:w-36 {
    width: 9rem;
  }

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

  .lg\:w-4\/5 {
    width: 80%;
  }

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

  .lg\:w-60 {
    width: 15rem;
  }

  .lg\:w-7 {
    width: 1.75rem;
  }

  .lg\:w-8 {
    width: 2rem;
  }

  .lg\:w-80 {
    width: 20rem;
  }

  .lg\:w-\[104px\] {
    width: 104px;
  }

  .lg\:w-\[144px\] {
    width: 144px;
  }

  .lg\:w-\[232px\] {
    width: 232px;
  }

  .lg\:w-\[264px\] {
    width: 264px;
  }

  .lg\:w-\[30\%\] {
    width: 30%;
  }

  .lg\:w-\[308px\] {
    width: 308px;
  }

  .lg\:w-\[35\%\] {
    width: 35%;
  }

  .lg\:w-\[400px\] {
    width: 400px;
  }

  .lg\:w-\[468px\] {
    width: 468px;
  }

  .lg\:w-\[480px\] {
    width: 480px;
  }

  .lg\:w-\[500px\] {
    width: 500px;
  }

  .lg\:w-\[560px\] {
    width: 560px;
  }

  .lg\:w-\[568px\] {
    width: 568px;
  }

  .lg\:w-\[576px\] {
    width: 576px;
  }

  .lg\:w-\[60\%\] {
    width: 60%;
  }

  .lg\:w-\[600px\] {
    width: 600px;
  }

  .lg\:w-\[72px\] {
    width: 72px;
  }

  .lg\:w-\[736px\] {
    width: 736px;
  }

  .lg\:w-\[748px\] {
    width: 748px;
  }

  .lg\:w-\[860px\] {
    width: 860px;
  }

  .lg\:w-\[90vw\] {
    width: 90vw;
  }

  .lg\:w-\[960px\] {
    width: 960px;
  }

  .lg\:w-\[990px\] {
    width: 990px;
  }

  .lg\:w-\[min\(96vw\2c 1200px\)\] {
    width: min(96vw,1200px);
  }

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

  .lg\:w-full {
    width: 100%;
  }

  .lg\:w-screen {
    width: 100vw;
  }

  .lg\:min-w-\[250px\] {
    min-width: 250px;
  }

  .lg\:min-w-\[420px\] {
    min-width: 420px;
  }

  .lg\:min-w-\[84px\] {
    min-width: 84px;
  }

  .lg\:min-w-full {
    min-width: 100%;
  }

  .lg\:max-w-0 {
    max-width: 0px;
  }

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

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

  .lg\:max-w-5xl {
    max-width: 64rem;
  }

  .lg\:max-w-6xl {
    max-width: 72rem;
  }

  .lg\:max-w-7xl {
    max-width: 80rem;
  }

  .lg\:max-w-\[1200px\] {
    max-width: 1200px;
  }

  .lg\:max-w-\[296px\] {
    max-width: 296px;
  }

  .lg\:max-w-\[300px\] {
    max-width: 300px;
  }

  .lg\:max-w-\[320px\] {
    max-width: 320px;
  }

  .lg\:max-w-\[34\.81\%\] {
    max-width: 34.81%;
  }

  .lg\:max-w-\[380px\] {
    max-width: 380px;
  }

  .lg\:max-w-\[400px\] {
    max-width: 400px;
  }

  .lg\:max-w-\[456px\] {
    max-width: 456px;
  }

  .lg\:max-w-\[528px\] {
    max-width: 528px;
  }

  .lg\:max-w-\[544px\] {
    max-width: 544px;
  }

  .lg\:max-w-\[556px\] {
    max-width: 556px;
  }

  .lg\:max-w-\[560px\] {
    max-width: 560px;
  }

  .lg\:max-w-\[568px\] {
    max-width: 568px;
  }

  .lg\:max-w-\[640px\] {
    max-width: 640px;
  }

  .lg\:max-w-\[660px\] {
    max-width: 660px;
  }

  .lg\:max-w-\[88px\] {
    max-width: 88px;
  }

  .lg\:max-w-\[90vw\] {
    max-width: 90vw;
  }

  .lg\:max-w-layout-1000 {
    max-width: 1000px;
  }

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

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

  .lg\:max-w-min {
    max-width: -moz-min-content;
    max-width: min-content;
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:max-w-screen-sm {
    max-width: 640px;
  }

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

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:-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));
  }

  .lg\:-translate-x-\[70px\] {
    --tw-translate-x: -70px;
    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));
  }

  .lg\: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));
  }

  .lg\:scale-100 {
    --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));
  }

  .lg\:scale-\[0\.3\] {
    --tw-scale-x: 0.3;
    --tw-scale-y: 0.3;
    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));
  }

  .lg\:auto-cols-\[365px\] {
    grid-auto-columns: 365px;
  }

  .lg\:auto-cols-\[calc\(25\%-12px\)\] {
    grid-auto-columns: calc(25% - 12px);
  }

  .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-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[220px_minmax\(0px\2c _1fr\)\] {
    grid-template-columns: 220px minmax(0px, 1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_300px\] {
    grid-template-columns: minmax(0,1fr) 300px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_320px\] {
    grid-template-columns: minmax(0,1fr) 320px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 760fr\)_minmax\(0\2c 64fr\)_minmax\(0\2c 440fr\)\] {
    grid-template-columns: minmax(0,760fr) minmax(0,64fr) minmax(0,440fr);
  }

  .lg\:grid-cols-\[repeat\(auto-fit\2c minmax\(250px\2c 0\.2fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(250px,0.2fr));
  }

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

  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

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

  .lg\:flex-col-reverse {
    flex-direction: column-reverse;
  }

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

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

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

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

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:justify-center {
    justify-content: center;
  }

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

  .lg\:gap-0 {
    gap: 0px;
  }

  .lg\:gap-1 {
    gap: 0.25rem;
  }

  .lg\:gap-1\.5 {
    gap: 0.375rem;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

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

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

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

  .lg\:gap-32 {
    gap: 8rem;
  }

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

  .lg\:gap-5 {
    gap: 1.25rem;
  }

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

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .lg\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .lg\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .lg\:gap-y-6 {
    row-gap: 1.5rem;
  }

  .lg\:gap-y-px {
    row-gap: 1px;
  }

  .lg\:space-y-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3rem * var(--tw-space-y-reverse));
  }

  .lg\: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));
  }

  .lg\: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));
  }

  .lg\: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));
  }

  .lg\: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));
  }

  .lg\:space-y-9 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.25rem * var(--tw-space-y-reverse));
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:overflow-auto {
    overflow: auto;
  }

  .lg\:overflow-hidden {
    overflow: hidden;
  }

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

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:overscroll-contain {
    overscroll-behavior: contain;
  }

  .lg\:\!rounded-radius-24 {
    border-radius: 1.5rem !important;
  }

  .lg\:\!rounded-radius-32 {
    border-radius: 2rem !important;
  }

  .lg\:rounded-none {
    border-radius: 0;
  }

  .lg\:rounded-radius-12 {
    border-radius: 0.75rem;
  }

  .lg\:rounded-radius-16 {
    border-radius: 1rem;
  }

  .lg\:rounded-radius-24 {
    border-radius: 1.5rem;
  }

  .lg\:rounded-radius-28 {
    border-radius: 1.75rem;
  }

  .lg\:rounded-radius-32 {
    border-radius: 2rem;
  }

  .lg\:rounded-radius-8 {
    border-radius: 0.5rem;
  }

  .lg\:rounded-b-none {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .lg\:rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .lg\:rounded-l-radius-16 {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }

  .lg\:rounded-l-radius-32 {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
  }

  .lg\:rounded-r-radius-16 {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  .lg\:rounded-r-radius-32 {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }

  .lg\:rounded-t-\[28px\] {
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
  }

  .lg\:rounded-t-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .lg\:rounded-t-radius-28 {
    border-top-left-radius: 1.75rem;
    border-top-right-radius: 1.75rem;
  }

  .lg\:rounded-tr-none {
    border-top-right-radius: 0;
  }

  .lg\:border {
    border-width: 1px;
  }

  .lg\:border-b {
    border-bottom-width: 1px;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-l-4 {
    border-left-width: 4px;
  }

  .lg\:border-r {
    border-right-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:border-content-border-dark {
    border-color: var(--content-border-dark);
  }

  .lg\:\!bg-transparent {
    background-color: transparent !important;
  }

  .lg\:bg-\[\#F8F5F4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-background-base {
    background-color: var(--background-base);
  }

  .lg\:bg-background-elevated {
    background-color: var(--background-elevated);
  }

  .lg\:bg-background-overlay {
    background-color: var(--background-overlay);
  }

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

  .lg\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-none {
    background-image: none;
  }

  .lg\:\!p-2 {
    padding: 0.5rem !important;
  }

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

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-16 {
    padding: 4rem;
  }

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

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

  .lg\:p-3 {
    padding: 0.75rem;
  }

  .lg\:p-4 {
    padding: 1rem;
  }

  .lg\:p-5 {
    padding: 1.25rem;
  }

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

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

  .lg\:\!px-10 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  .lg\:\!px-2\.5 {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }

  .lg\:\!py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

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

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

  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .lg\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

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

  .lg\:px-9 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

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

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

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

  .lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .lg\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

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

  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:\!pb-10 {
    padding-bottom: 2.5rem !important;
  }

  .lg\:\!pt-0 {
    padding-top: 0px !important;
  }

  .lg\:\!pt-12 {
    padding-top: 3rem !important;
  }

  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .lg\:pb-12 {
    padding-bottom: 3rem;
  }

  .lg\:pb-2\.5 {
    padding-bottom: 0.625rem;
  }

  .lg\:pb-4 {
    padding-bottom: 1rem;
  }

  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }

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

  .lg\:pl-10 {
    padding-left: 2.5rem;
  }

  .lg\:pl-12 {
    padding-left: 3rem;
  }

  .lg\:pl-24 {
    padding-left: 6rem;
  }

  .lg\:pl-4 {
    padding-left: 1rem;
  }

  .lg\:pl-6 {
    padding-left: 1.5rem;
  }

  .lg\:pl-7 {
    padding-left: 1.75rem;
  }

  .lg\:pr-10 {
    padding-right: 2.5rem;
  }

  .lg\:pr-24 {
    padding-right: 6rem;
  }

  .lg\:pr-3 {
    padding-right: 0.75rem;
  }

  .lg\:pr-4 {
    padding-right: 1rem;
  }

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

  .lg\:pt-10 {
    padding-top: 2.5rem;
  }

  .lg\:pt-12 {
    padding-top: 3rem;
  }

  .lg\:pt-16 {
    padding-top: 4rem;
  }

  .lg\:pt-2\.5 {
    padding-top: 0.625rem;
  }

  .lg\:pt-4 {
    padding-top: 1rem;
  }

  .lg\:pt-5 {
    padding-top: 1.25rem;
  }

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

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

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

  .lg\:font-display-semi-condensed {
    font-family: Media Sans Semi-Condensed, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.0294rem;
  }

  .lg\:text-3xl {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.0431rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.0375rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.06rem;
  }

  .lg\:text-6xl {
    font-size: 3.5rem;
    line-height: 1.2;
    letter-spacing: -0.1138rem;
  }

  .lg\:text-7xl {
    font-size: 5rem;
    line-height: 1.2;
    letter-spacing: -0.1625rem;
  }

  .lg\:text-\[21px\] {
    font-size: 21px;
  }

  .lg\:text-\[28px\] {
    font-size: 28px;
  }

  .lg\:text-\[56px\] {
    font-size: 56px;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: -0.0113rem;
  }

  .lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .lg\:text-xl {
    font-size: 1.3125rem;
    line-height: 1.2;
    letter-spacing: -0.02rem;
  }

  .lg\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0;
  }

  .lg\:font-bold {
    font-weight: 700;
  }

  .lg\:font-medium {
    font-weight: 500;
  }

  .lg\:leading-5 {
    line-height: 1.25rem;
  }

  .lg\:leading-9 {
    line-height: 2.25rem;
  }

  .lg\:leading-relaxed {
    line-height: 1.625;
  }

  .lg\:tracking-\[-2\.75px\] {
    letter-spacing: -2.75px;
  }

  .lg\:tracking-normal {
    letter-spacing: 0em;
  }

  .lg\:tracking-tight-1 {
    letter-spacing: -0.01rem;
  }

  .lg\:tracking-tight-8 {
    letter-spacing: -0.125rem;
  }

  .lg\:text-content-primary {
    color: var(--content-primary);
  }

  .lg\:text-content-secondary {
    color: var(--content-secondary);
  }

  .lg\:text-opacity-70 {
    --tw-text-opacity: 0.7;
  }

  .lg\:opacity-0 {
    opacity: 0;
  }

  .lg\:shadow-\[0_4px_8px_0_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
    --tw-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
    --tw-shadow-colored: 0 4px 8px 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);
  }

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

  .lg\:shadow-md {
    --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
    --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 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);
  }

  .lg\:transition-\[max-width\] {
    transition-property: max-width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .lg\:transition-\[width\] {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .lg\:duration-300 {
    transition-duration: 300ms;
  }

  .lg\:slide-direction-down {
    --initial-direction: 1;
  }

  .lg\:\[--read-more-line-clamp\:5\] {
    --read-more-line-clamp: 5;
  }

  .lg\:\[clip-path\:inset\(-12px\)\] {
    clip-path: inset(-12px);
  }

  .lg\:before\:absolute::before {
    content: var(--tw-content);
    position: absolute;
  }

  .lg\:before\:hidden::before {
    content: var(--tw-content);
    display: none;
  }

  .before\:lg\:rounded-radius-12::before {
    content: var(--tw-content);
    border-radius: 0.75rem;
  }

  .lg\:first\:rounded-t-radius-24:first-child {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }

  .lg\:focus-within\:z-30:focus-within {
    z-index: 30;
  }

  .lg\:hover\:\!bg-background-overlay:hover {
    background-color: var(--background-overlay) !important;
  }

  .lg\:hover\:bg-background-overlay:hover {
    background-color: var(--background-overlay);
  }

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

  .lg\:hover\:decoration-solid:hover {
    text-decoration-style: solid;
  }

  .lg\:hover\:decoration-\[1\.5px\]:hover {
    text-decoration-thickness: 1.5px;
  }

  .lg\:hover\:underline-offset-2:hover {
    text-underline-offset: 2px;
  }

  .lg\:active\:scale-\[0\.96\]:active {
    --tw-scale-x: 0.96;
    --tw-scale-y: 0.96;
    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 .lg\:group-hover\:flex {
    display: flex;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:absolute {
    position: absolute;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:inset-y-0 {
    top: 0px;
    bottom: 0px;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:left-0 {
    left: 0px;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:z-50 {
    z-index: 50;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:m-0 {
    margin: 0px;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:flex {
    display: flex;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:hidden {
    display: none;
  }

  .group.collaboration-details-hidden .lg\:group-\[\.collaboration-details-hidden\]\:w-full {
    width: 100%;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:w-\[72px\] {
    width: 72px;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:w-auto {
    width: auto;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:w-\[232px\] {
    width: 232px;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:w-\[72px\] {
    width: 72px;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:max-w-0 {
    max-width: 0px;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:max-w-max {
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:items-start {
    align-items: flex-start;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:rounded-r-radius-28 {
    border-top-right-radius: 1.75rem;
    border-bottom-right-radius: 1.75rem;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:bg-background-elevated {
    background-color: var(--background-elevated);
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:opacity-0 {
    opacity: 0;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:shadow-main-container {
    --tw-shadow: var(--shadow-main-container);
    --tw-shadow-colored: var(--shadow-main-container);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:ring-1 {
    --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);
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:ring-inset {
    --tw-ring-inset: inset;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:ring-content-border-dark {
    --tw-ring-color: var(--content-border-dark);
  }

  .lg\:data-\[expanded\=true\]\:max-w-full[data-expanded="true"] {
    max-width: 100%;
  }

  .group[data-expanded="true"] .lg\:group-data-\[expanded\=true\]\:w-14 {
    width: 3.5rem;
  }

  .group[data-expanded="true"] .lg\:group-data-\[expanded\=true\]\:scale-100 {
    --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));
  }

  @keyframes thumb-pop {
    0% {
      opacity: 0;
      transform: rotate(-2deg) scale(0.3);
    }

    70% {
      opacity: 1;
      transform: rotate(-2deg) scale(1.06);
    }

    100% {
      opacity: 1;
      transform: rotate(-2deg) scale(1);
    }
  }

  .group[data-expanded="true"] .lg\:group-data-\[expanded\=true\]\:animate-thumb-pop {
    animation: thumb-pop 350ms ease-out 160ms backwards;
  }

  .group[data-expanded="true"] .lg\:group-data-\[expanded\=true\]\:opacity-100 {
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:grid {
    display: grid;
  }

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

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

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

  .xl\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1536px) {
  .\32xl\:pl-\[calc\(50\%-576px\+24px\)\] {
    padding-left: calc(50% - 576px + 24px);
  }
}

.dark\:block:where(.dark, .dark *) {
  display: block;
}

.dark\:hidden:where(.dark, .dark *) {
  display: none;
}

.dark\:divide-\[rgba\(255\2c 255\2c 255\2c 0\.08\)\]:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255,255,255,0.08);
}

.dark\:divide-slate-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}

.dark\:border-\[rgba\(255\2c 255\2c 255\2c \.16\)\]:where(.dark, .dark *) {
  border-color: rgba(255,255,255,.16);
}

.dark\:border-\[rgba\(255\2c 255\2c 255\2c 0\.02\)\]:where(.dark, .dark *) {
  border-color: rgba(255,255,255,0.02);
}

.dark\:border-offWhite\/08:where(.dark, .dark *) {
  border-color: rgb(248 245 244 / .08);
}

.dark\:border-offWhite\/12:where(.dark, .dark *) {
  border-color: rgb(248 245 244 / .12);
}

.dark\:border-red-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(180 33 43 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-500:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-600:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-900:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}

.dark\:border-white\/\[0\.04\]:where(.dark, .dark *) {
  border-color: rgb(255 255 255 / 0.04);
}

.dark\:border-opacity-10:where(.dark, .dark *) {
  --tw-border-opacity: 0.1;
}

.dark\:\!bg-\[rgba\(238\2c 232\2c 229\2c 0\.15\)\]:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.dark\:bg-\[\#090A0B\]:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(9 10 11 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.05\)\]:where(.dark, .dark *) {
  background-color: rgba(255,255,255,0.05);
}

.dark\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.10\)\]:where(.dark, .dark *) {
  background-color: rgba(255,255,255,0.10);
}

.dark\:bg-\[var\(--image-new-color-dark\)\]:where(.dark, .dark *) {
  background-color: var(--image-new-color-dark);
}

.dark\:bg-background-elevated:where(.dark, .dark *) {
  background-color: var(--background-elevated);
}

.dark\:bg-black:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.dark\:bg-content-border-dark:where(.dark, .dark *) {
  background-color: var(--content-border-dark);
}

.dark\:bg-offWhite:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
}

.dark\:bg-offWhite\/04:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
}

.dark\:bg-offWhite\/50:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
}

.dark\:bg-red-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(180 33 43 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-700\/40:where(.dark, .dark *) {
  background-color: rgb(180 33 43 / 0.4);
}

.dark\:bg-red-900:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(124 32 38 / var(--tw-bg-opacity, 1));
}

.dark\:bg-richBlack:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
}

.dark\:bg-richBlack\/80:where(.dark, .dark *) {
  background-color: rgb(11 5 29 / 0.8);
}

.dark\:bg-slate-400:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-800:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-900:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.dark\:bg-white:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.dark\:bg-opacity-10:where(.dark, .dark *) {
  --tw-bg-opacity: 0.1;
}

.dark\:bg-opacity-50:where(.dark, .dark *) {
  --tw-bg-opacity: 0.5;
}

.dark\:bg-opacity-80:where(.dark, .dark *) {
  --tw-bg-opacity: 0.8;
}

.dark\:bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c 0\.05\)_0\%\2c rgba\(0\2c 0\2c 0\2c 0\.2\)_100\%\)\]:where(.dark, .dark *) {
  background-image: linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.2) 100%);
}

.dark\:from-primary-900:where(.dark, .dark *) {
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-slate-700:where(.dark, .dark *) {
  --tw-gradient-from: #334155 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-slate-700\/50:where(.dark, .dark *) {
  --tw-gradient-from: rgb(51 65 85 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-slate-800:where(.dark, .dark *) {
  --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:to-primary-600:where(.dark, .dark *) {
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}

.dark\:to-slate-800:where(.dark, .dark *) {
  --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}

.dark\:text-blue-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.dark\:text-content-primary:where(.dark, .dark *) {
  color: var(--content-primary);
}

.dark\:text-offWhite:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.dark\:text-offWhite\/32:where(.dark, .dark *) {
  color: rgb(248 245 244 / .32);
}

.dark\:text-offWhite\/50:where(.dark, .dark *) {
  color: rgb(248 245 244 / 0.5);
}

.dark\:text-offWhite\/64:where(.dark, .dark *) {
  color: rgb(248 245 244 / .64);
}

.dark\:text-offWhite\/79:where(.dark, .dark *) {
  color: rgb(248 245 244 / .79);
}

.dark\:text-primary-300:where(.dark, .dark *) {
  color: var(--primary-300);
}

.dark\:text-red-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 227 229 / var(--tw-text-opacity, 1));
}

.dark\:text-richBlack:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-200:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-800:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

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

.dark\:shadow:where(.dark, .dark *) {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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);
}

.dark\:ring-transparent:where(.dark, .dark *) {
  --tw-ring-color: transparent;
}

.dark\:ring-offset-slate-700:where(.dark, .dark *) {
  --tw-ring-offset-color: #334155;
}

.dark\:\[--tw-ring-color\:var\(--tw-ring-color-dark\)\]:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.dark\:\[border-color\:rgba\(255\2c 255\2c 255\2c 0\.08\)\]:where(.dark, .dark *) {
  border-color: rgba(255,255,255,0.08);
}

.dark\:placeholder\:text-offWhite\/36:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .36);
}

.dark\:placeholder\:text-offWhite\/36:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .36);
}

.dark\:hover\:border-offWhite\/12:hover:where(.dark, .dark *) {
  border-color: rgb(248 245 244 / .12);
}

.dark\:hover\:bg-\[color\:var\(--base-color\)\]:hover:where(.dark, .dark *) {
  background-color: var(--base-color);
}

.dark\:hover\:bg-richBlack:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-slate-400:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.hover\:dark\:bg-offWhite\/04:where(.dark, .dark *):hover {
  background-color: rgb(248 245 244 / .04);
}

.hover\:dark\:bg-slate-700:where(.dark, .dark *):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:text-offWhite:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-richBlack:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.hover\:dark\:text-offWhite:where(.dark, .dark *):hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.disabled\:dark\:bg-slate-700:where(.dark, .dark *):disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.group:hover .dark\:group-hover\:bg-slate-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.group:hover .dark\:group-hover\:bg-opacity-25:where(.dark, .dark *) {
  --tw-bg-opacity: 0.25;
}

.group:hover .dark\:group-hover\:text-slate-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.group:focus .dark\:group-focus\:text-offWhite:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:dark\:bg-background-elevated:where(.dark, .dark *) {
  background-color: var(--background-elevated);
}

.peer:checked ~ .peer-checked\:before\:dark\:border-content-primary:where(.dark, .dark *)::before {
  content: var(--tw-content);
  border-color: var(--content-primary);
}

.peer:disabled ~ .peer-disabled\:dark\:bg-content-border-dark:where(.dark, .dark *) {
  background-color: var(--content-border-dark);
}

.peer:disabled ~ .dark\:peer-disabled\:text-content-tertiary:where(.dark, .dark *) {
  color: var(--content-tertiary);
}

.dark\:aria-selected\:bg-offWhite\/04[aria-selected="true"]:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
}

.data-\[dragover\]\:dark\:border-offWhite:where(.dark, .dark *)[data-dragover] {
  --tw-border-opacity: 1;
  border-color: rgb(248 245 244 / var(--tw-border-opacity, 1));
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:dark\:border-offWhite:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(248 245 244 / var(--tw-border-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:dark\:bg-slate-700:where(.dark, .dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .sm\:dark\:shadow-lg:where(.dark, .dark *) {
    --tw-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 8px 28px 0px rgba(0,0,0, 0.16);;
    --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 8px 28px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.\[\&\:\:-moz-progress-bar\]\:rounded-full::-moz-progress-bar {
  border-radius: 9999px;
}

.\[\&\:\:-moz-progress-bar\]\:bg-brand-secondary-moola::-moz-progress-bar {
  background-color: var(--brand-secondary-moola);
}

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

.\[\&\:\:-webkit-progress-bar\]\:bg-content-border-dark::-webkit-progress-bar {
  background-color: var(--content-border-dark);
}

.\[\&\:\:-webkit-progress-value\]\:rounded-full::-webkit-progress-value {
  border-radius: 9999px;
}

.\[\&\:\:-webkit-progress-value\]\:bg-brand-secondary-moola::-webkit-progress-value {
  background-color: var(--brand-secondary-moola);
}

.\[\&\:has\(\[aria-busy\=true\]\)\]\:pointer-events-none:has([aria-busy=true]) {
  pointer-events: none;
}

.\[\&\:has\(\[aria-busy\=true\]\)\]\:opacity-50:has([aria-busy=true]) {
  opacity: 0.5;
}

.\[\&\>canvas\]\:h-auto>canvas {
  height: auto;
}

.\[\&\>canvas\]\:w-full>canvas {
  width: 100%;
}

.\[\&\>canvas\]\:max-w-full>canvas {
  max-width: 100%;
}

.\[\&_\.button\]\:w-full .button {
  width: 100%;
}

@media not all and (min-width: 768px) {
  .max-md\:\[\&_\.button\]\:w-full .button {
    width: 100%;
  }
}

.\[\&_\.grid\>div\]\:w-full .grid>div {
  width: 100%;
}

.\[\&_\.grid\]\:w-full .grid {
  width: 100%;
}

@media not all and (min-width: 1024px) {
  .max-lg\:\[\&_button\]\:h-12 button {
    height: 3rem;
  }

  .max-lg\:\[\&_button\]\:text-base button {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.\[\&_img\]\:\!w-full img {
  width: 100% !important;
}

@media not all and (min-width: 1024px) {
  .max-lg\:\[\&_input\]\:h-12 input {
    height: 3rem;
  }

  .max-lg\:\[\&_input\]\:text-base input {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.\[\&_path\]\:stroke-1 path {
  stroke-width: 1;
}

.\[\&_path\]\:stroke-2 path {
  stroke-width: 2;
}

.\[\&_svg\]\:open\:-rotate-180[open] svg {
  --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));
}

.peer:checked~* .\[\.peer\:checked\~\*_\&\]\:block {
  display: block;
}

@media(hover:hover) {
  .\[\@media\(hover\:hover\)\]\:hover\:bg-background-overlay:hover {
    background-color: var(--background-overlay);
  }
}

[data-hidden=false] .\[\[data-hidden\=false\]_\&\]\:hidden {
  display: none;
}

[data-hidden=true] .\[\[data-hidden\=true\]_\&\]\:hidden {
  display: none;
}

[open] .\[\[open\]_\&\]\:rotate-90 {
  --tw-rotate: 90deg;
  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));
}

fieldset:disabled .\[fieldset\:disabled_\&\]\:text-base {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

fieldset:disabled .\[fieldset\:disabled_\&\]\:font-normal {
  font-weight: 400;
}

fieldset:disabled .\[fieldset\:disabled_\&\]\:font-semibold {
  font-weight: 600;
}

fieldset:disabled .\[fieldset\:disabled_\&\]\:text-content-tertiary {
  color: var(--content-tertiary);
}

fieldset:disabled .dark\:\[fieldset\:disabled_\&\]\:text-content-tertiary:where(.dark, .dark *) {
  color: var(--content-tertiary);
}

/*# sourceMappingURL=application.atelier.css.map */