/* 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: #d0d2d4; /* 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: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: 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: #7f8c99; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #7f8c99; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.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: #25282d;
  --tw-prose-headings: #25282d;
  --tw-prose-lead: #545f6a;
  --tw-prose-links: #45e760;
  --tw-prose-bold: #25282d;
  --tw-prose-counters: #7f8c99;
  --tw-prose-bullets: #b3b9c0;
  --tw-prose-hr: #e0e4ee;
  --tw-prose-quotes: #25282d;
  --tw-prose-quote-borders: #45e760;
  --tw-prose-captions: #7f8c99;
  --tw-prose-kbd: #25282d;
  --tw-prose-kbd-shadows: 37 40 45;
  --tw-prose-code: #25282d;
  --tw-prose-pre-code: #fcfdff;
  --tw-prose-pre-bg: #1b1c1d;
  --tw-prose-th-borders: #d0d2d4;
  --tw-prose-td-borders: #e6e8ea;
  --tw-prose-invert-body: #d0d2d4;
  --tw-prose-invert-headings: #f6f7f9;
  --tw-prose-invert-lead: #d0d2d4;
  --tw-prose-invert-links: #6bec81;
  --tw-prose-invert-bold: #f6f7f9;
  --tw-prose-invert-counters: #d0d2d4;
  --tw-prose-invert-bullets: #818a94;
  --tw-prose-invert-hr: #33404d;
  --tw-prose-invert-quotes: #f6f7f9;
  --tw-prose-invert-quote-borders: #45e760;
  --tw-prose-invert-captions: #d0d2d4;
  --tw-prose-invert-kbd: #f6f7f9;
  --tw-prose-invert-kbd-shadows: 246 247 249;
  --tw-prose-invert-code: #f6f7f9;
  --tw-prose-invert-pre-code: #d0d2d4;
  --tw-prose-invert-pre-bg: #202123;
  --tw-prose-invert-th-borders: #33404d;
  --tw-prose-invert-td-borders: #33404d;
  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;
}
.prose-lg{
  font-size: 1.125rem;
  line-height: 1.7777778;
}
.prose-lg :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}
.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.2222222em;
  line-height: 1.4545455;
  margin-top: 1.0909091em;
  margin-bottom: 1.0909091em;
}
.prose-lg :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  padding-inline-start: 1em;
}
.prose-lg :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 2.6666667em;
  margin-top: 0;
  margin-bottom: 0.8333333em;
  line-height: 1;
}
.prose-lg :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.6666667em;
  margin-top: 1.8666667em;
  margin-bottom: 1.0666667em;
  line-height: 1.3333333;
}
.prose-lg :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.3333333em;
  margin-top: 1.6666667em;
  margin-bottom: 0.6666667em;
  line-height: 1.5;
}
.prose-lg :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7777778em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}
.prose-lg :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}
.prose-lg :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}
.prose-lg :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose-lg :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}
.prose-lg :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8888889em;
  border-radius: 0.3125rem;
  padding-top: 0.2222222em;
  padding-inline-end: 0.4444444em;
  padding-bottom: 0.2222222em;
  padding-inline-start: 0.4444444em;
}
.prose-lg :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8888889em;
}
.prose-lg :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8666667em;
}
.prose-lg :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.875em;
}
.prose-lg :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8888889em;
  line-height: 1.75;
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 0.375rem;
  padding-top: 1em;
  padding-inline-end: 1.5em;
  padding-bottom: 1em;
  padding-inline-start: 1.5em;
}
.prose-lg :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}
.prose-lg :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}
.prose-lg :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.6666667em;
  margin-bottom: 0.6666667em;
}
.prose-lg :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.4444444em;
}
.prose-lg :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.4444444em;
}
.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}
.prose-lg :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
}
.prose-lg :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.3333333em;
}
.prose-lg :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
}
.prose-lg :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.3333333em;
}
.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}
.prose-lg :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}
.prose-lg :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
}
.prose-lg :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.6666667em;
  padding-inline-start: 1.5555556em;
}
.prose-lg :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 3.1111111em;
  margin-bottom: 3.1111111em;
}
.prose-lg :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-lg :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-lg :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-lg :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-lg :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8888889em;
  line-height: 1.5;
}
.prose-lg :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}
.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.75em;
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}
.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose-lg :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}
.prose-lg :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose-lg :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8888889em;
  line-height: 1.5;
  margin-top: 1em;
}
.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}
.prose-gray{
  --tw-prose-body: #25282d;
  --tw-prose-headings: #25282d;
  --tw-prose-lead: #545f6a;
  --tw-prose-links: #45e760;
  --tw-prose-bold: #25282d;
  --tw-prose-counters: #7f8c99;
  --tw-prose-bullets: #b3b9c0;
  --tw-prose-hr: #e0e4ee;
  --tw-prose-quotes: #25282d;
  --tw-prose-quote-borders: #e0e4ee;
  --tw-prose-captions: #7f8c99;
  --tw-prose-kbd: #25282d;
  --tw-prose-kbd-shadows: 37 40 45;
  --tw-prose-code: #25282d;
  --tw-prose-pre-code: #fcfdff;
  --tw-prose-pre-bg: #1b1c1d;
  --tw-prose-th-borders: #d0d2d4;
  --tw-prose-td-borders: #e6e8ea;
  --tw-prose-invert-body: #d0d2d4;
  --tw-prose-invert-headings: #f6f7f9;
  --tw-prose-invert-lead: #d0d2d4;
  --tw-prose-invert-links: #6bec81;
  --tw-prose-invert-bold: #f6f7f9;
  --tw-prose-invert-counters: #d0d2d4;
  --tw-prose-invert-bullets: #818a94;
  --tw-prose-invert-hr: #33404d;
  --tw-prose-invert-quotes: #f6f7f9;
  --tw-prose-invert-quote-borders: #33404d;
  --tw-prose-invert-captions: #d0d2d4;
  --tw-prose-invert-kbd: #f6f7f9;
  --tw-prose-invert-kbd-shadows: 246 247 249;
  --tw-prose-invert-code: #f6f7f9;
  --tw-prose-invert-pre-code: #d0d2d4;
  --tw-prose-invert-pre-bg: #202123;
  --tw-prose-invert-th-borders: #33404d;
  --tw-prose-invert-td-borders: #33404d;
}
.prose-invert{
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
a{
  --tw-text-opacity: 1;
  color: rgb(108 46 188 / var(--tw-text-opacity, 1));
}
a:hover{
  --tw-text-opacity: 1;
  color: rgb(108 46 188 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
b, strong{
  font-weight: 500;
}
.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{
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (prefers-color-scheme: dark) {
  
  a.\!button {
    color: inherit;
  }
}
.\!button {
  color: #052e16;
}
.\!button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
.\!button:focus{
  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(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-opacity: 1;
  --tw-ring-color: rgb(64 210 88 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}
.button{
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (prefers-color-scheme: dark) {
  
  a.button {
    color: inherit;
  }
}
.button {
  color: #052e16;
}
.button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
.button:focus{
  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(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-opacity: 1;
  --tw-ring-color: rgb(64 210 88 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}
.\!button:is(.dark *){
  --tw-ring-offset-color: #334155;
}
.button:is(.dark *){
  --tw-ring-offset-color: #334155;
}
.\!button.button-red{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.\!button.button-red:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.\!button.button-red:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.button.button-red{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.button.button-red:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.button.button-red:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.button-secondary{
  --tw-text-opacity: 1;
  color: rgb(108 46 188 / var(--tw-text-opacity, 1));
}
.button-secondary:hover{
  --tw-text-opacity: 1;
  color: rgb(108 46 188 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
/* @apply dark:text-slate-200; */
.button-secondary.button-increase-contrast{
  --tw-text-opacity: 1;
  color: rgb(84 36 147 / var(--tw-text-opacity, 1));
}
.button-secondary.button-increase-contrast:hover{
  --tw-text-opacity: 1;
  color: rgb(50 21 87 / var(--tw-text-opacity, 1));
}
.button-secondary.button-red{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.button-secondary.button-red:hover{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.button-secondary.button-red.button-increase-contrast{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.button-secondary.button-red.button-increase-contrast:hover{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.\!button{
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.button, .button-secondary, .button-alternative{
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.\!button{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.button, .button-secondary, .button-alternative{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.\!button.button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
@media (prefers-color-scheme: dark) {
  .\!button.button-smaller a {
    color: #6bec81; /* primary-400 */
  }

  .\!button.button-smaller a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
.button.button-smaller, .button-secondary.button-smaller, .button-alternative.button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
@media (prefers-color-scheme: dark) {
  .button.button-smaller a, .button-secondary.button-smaller a, .button-alternative.button-smaller a {
    color: #6bec81; /* primary-400 */
  }

  .button.button-smaller a:hover, .button-secondary.button-smaller a:hover, .button-alternative.button-smaller a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
.button-alternative{
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (prefers-color-scheme: dark) {
  
  p.button-alternative a,.button-alternative a { /* primary-400 */
    color: #6bec81; /* primary-400 */
  }

  
  p.button-alternative a:hover,.button-alternative a:hover { /* primary-300 */
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}

.auth-card p.button-alternative {
  color: #6b7280;
}

.auth-card p.button-alternative a {
  color: #45e760;
}
[data-controller="mobile-navigation"] button.button-alternative {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.button-alternative:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
}
.button-alternative:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.button-alternative:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.full{
  display: flex;
  width: 100%;
  justify-content: center;
}
@media (max-width: 1023px) {
  .modal-content-mobile > div:first-child .full {
    justify-content: space-between;
  }
}
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:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}
.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:is(.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.65rem;
  line-height: 0.9rem;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
}
.table th{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.65rem;
  line-height: 0.9rem;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
}
.\!table th:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.table th:is(.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:first-child{
  padding-left: 1.25rem;
}
.\!table th:last-child{
  padding-right: 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 > :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:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}
.table tbody:is(.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{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.\!table td:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.table td:is(.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:first-child{
  padding-left: 1.25rem;
}
.\!table td:last-child{
  padding-right: 1.25rem;
}
.table td:last-child{
  padding-right: 1.25rem;
}
.\!table td.buttons{
  padding-right: 0.75rem;
}
.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)));
}
.\!table td.buttons{
  text-align: right;
}
.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)));
}
.table td.buttons{
  text-align: right;
}
/* just having a cell with buttons shouldn't expand the height of a table row. */
.\!table td.buttons > *{
  margin-top: -1.25rem;
  margin-bottom: -1.25rem;
}
.table td.buttons > *{
  margin-top: -1.25rem;
  margin-bottom: -1.25rem;
}
.box-table .table th:first-child, .box-table .table td:first-child{
  padding-left: 2rem;
}
.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;
}
.box-table .\!table th:last-child, .box-table .\!table td:last-child{
  padding-right: 2rem;
}
.pagy{
  display: flex;
}
.pagy > :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)));
}
@media (max-width: 1023px) {
  .modal-content-mobile > div:first-child .pagy {
    justify-content: space-between;
  }
}
.pagy a:not(.gap){
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pagy a:not(.gap).button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
@media (prefers-color-scheme: dark) {
  .pagy a:not(.gap).button-smaller a {
    color: #6bec81; /* primary-400 */
  }

  .pagy a:not(.gap).button-smaller a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
.pagy a:not(.gap){
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (prefers-color-scheme: dark) {
  
  p.pagy a:not(.gap) a,.pagy a:not(.gap) a { /* primary-400 */
    color: #6bec81; /* primary-400 */
  }

  
  p.pagy a:not(.gap) a:hover,.pagy a:not(.gap) a:hover { /* primary-300 */
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}

.auth-card p.pagy a:not(.gap) {
  color: #6b7280;
}

.auth-card p.pagy a:not(.gap) a {
  color: #45e760;
}
[data-controller="mobile-navigation"] button.pagy a:not(.gap) {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.pagy a:not(.gap):hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
}
.pagy a:not(.gap):is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pagy a:not(.gap):hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.pagy a:not(.gap):not([href]) { /* disabled links (aka: the current page) */ --tw-bg-opacity: 1; background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
@media (prefers-color-scheme: dark) {
  
  a.pagy a:not(.gap):not([href]) {
    color: inherit;
  }
}
.pagy a:not(.gap):not([href]) {
  color: #052e16;
}
.pagy a:not(.gap):not([href]):hover{
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
.pagy a:not(.gap):not([href]):focus{
  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(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-opacity: 1;
  --tw-ring-color: rgb(64 210 88 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}
.pagy a:not(.gap):not([href]):is(.dark *){
  --tw-ring-offset-color: #334155;
}
.pagy a:not(.gap):not([href]).button-red{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.pagy a:not(.gap):not([href]).button-red:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.pagy a:not(.gap):not([href]).button-red:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.pagy a:not(.gap):not([href]){
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pagy a:not(.gap):not([href]).button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
@media (prefers-color-scheme: dark) {
  .pagy a:not(.gap):not([href]).button-smaller a {
    color: #6bec81; /* primary-400 */
  }

  .pagy a:not(.gap):not([href]).button-smaller a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
form.button_to input[type=submit].pagy a:not(.gap):not([href]){
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
  color: #052e16;
}
form.button_to input[type=submit].pagy a:not(.gap):not([href]):hover{
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
}
@media (prefers-color-scheme: dark) {
  .pagy a:not(.gap):not([href]),.pagy a:not(.gap):not([href]).full,
  input[type="submit"].pagy a:not(.gap):not([href]),
  button.pagy a:not(.gap):not([href]) { /* AXIO: softer dark text on green buttons */ /* AXIO: softer dark text on green buttons */ /* AXIO: softer dark text on green buttons */
    color: #25282d; /* AXIO: softer dark text on green buttons */
    font-weight: 600;
  }

  .pagy a:not(.gap):not([href]):hover,.pagy a:not(.gap):not([href]).full:hover { /* AXIO: softer dark text */
    color: #25282d; /* AXIO: softer dark text */
  }
  .pagy a:not(.gap):not([href]) a,
  a.pagy a:not(.gap):not([href]) {
    color: inherit;
  }
}

.auth-card .pagy a:not(.gap):not([href]).full {
  color: #052e16;
  background-color: #45e760;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.auth-card .pagy a:not(.gap):not([href]).full:hover {
  background-color: #7FED69;
  box-shadow: none;
  color: #052e16;
}
.pagy a:not(.gap):not([href]):not([aria-current]){ /* the prev link when on first page, next link when on last page */ display: none;
        }
[data-theme] .composer-popover-host:has([data-model-selector-target="menu"]:not(.pagy a:not(.gap):not([href]):not([aria-current]))) .composer-tip {
  opacity: 0;
}
[data-theme] .composer-image-preview:not(.pagy a:not(.gap):not([href]):not([aria-current])) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 8px;
}
[data-theme] .editor-topbar .tb-iconbtn.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
[data-theme] .scrim.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
[data-theme] .info-banner.pagy a:not(.gap):not([href]):not([aria-current]),
[data-theme] .url-default.pagy a:not(.gap):not([href]):not([aria-current]),
[data-theme] .customize-callout.pagy a:not(.gap):not([href]):not([aria-current]),
[data-theme] .pm-subdomain-edit.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
[data-theme] .adv-content.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
/* Fix Safari issue related to <summary> / <details> arrow */
details > summary.list-none::-webkit-details-marker,
  details > summary.list-none::marker {
    display: none;
  }
.bulk-actions:not(.selectable) .box-table td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2){
  padding-left: 2rem;
}
.bulk-actions.selectable .bulk-action-single{
  display: none;
}
[data-theme] .composer-popover-host:has([data-model-selector-target="menu"]:not(.bulk-actions.selectable .bulk-action-single)) .composer-tip {
  opacity: 0;
}
[data-theme] .composer-image-preview:not(.bulk-actions.selectable .bulk-action-single) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 8px;
}
[data-theme] .editor-topbar .tb-iconbtn.bulk-actions.selectable .bulk-action-single { display: none; }
[data-theme] .scrim.bulk-actions.selectable .bulk-action-single { display: none; }
[data-theme] .info-banner.bulk-actions.selectable .bulk-action-single,
[data-theme] .url-default.bulk-actions.selectable .bulk-action-single,
[data-theme] .customize-callout.bulk-actions.selectable .bulk-action-single,
[data-theme] .pm-subdomain-edit.bulk-actions.selectable .bulk-action-single { display: none; }
[data-theme] .adv-content.bulk-actions.selectable .bulk-action-single { display: none; }
.daterangepicker .calendar-table .\!active{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1)) !important;
  color: #052e16 !important;
}
.daterangepicker .calendar-table .active{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1)) !important;
  color: #052e16 !important;
}
.select2-selection--single.focus-visible, .select2-selection--multiple.focus-visible {
    }
.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;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.-inset-0\.5{
  inset: -0.125rem;
}
.-inset-px{
  inset: -1px;
}
.inset-0{
  inset: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.inset-x-3{
  left: 0.75rem;
  right: 0.75rem;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-bottom-1{
  bottom: -0.25rem;
}
.-bottom-12{
  bottom: -3rem;
}
.-bottom-40{
  bottom: -10rem;
}
.-left-1{
  left: -0.25rem;
}
.-left-1\.5{
  left: -0.375rem;
}
.-left-1\/2{
  left: -50%;
}
.-left-12{
  left: -3rem;
}
.-left-40{
  left: -10rem;
}
.-right-0\.5{
  right: -0.125rem;
}
.-right-1{
  right: -0.25rem;
}
.-right-12{
  right: -3rem;
}
.-right-2{
  right: -0.5rem;
}
.-right-40{
  right: -10rem;
}
.-top-0\.5{
  top: -0.125rem;
}
.-top-1{
  top: -0.25rem;
}
.-top-10{
  top: -2.5rem;
}
.-top-12{
  top: -3rem;
}
.-top-2{
  top: -0.5rem;
}
.-top-2\.5{
  top: -0.625rem;
}
.-top-3{
  top: -0.75rem;
}
.-top-40{
  top: -10rem;
}
.-top-5{
  top: -1.25rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1{
  bottom: 0.25rem;
}
.bottom-16{
  bottom: 4rem;
}
.bottom-2{
  bottom: 0.5rem;
}
.bottom-20{
  bottom: 5rem;
}
.bottom-24{
  bottom: 6rem;
}
.bottom-28{
  bottom: 7rem;
}
.bottom-3{
  bottom: 0.75rem;
}
.bottom-4{
  bottom: 1rem;
}
.bottom-6{
  bottom: 1.5rem;
}
.bottom-8{
  bottom: 2rem;
}
.bottom-full{
  bottom: 100%;
}
.left-0{
  left: 0px;
}
.left-0\.5{
  left: 0.125rem;
}
.left-1{
  left: 0.25rem;
}
.left-1\/2{
  left: 50%;
}
.left-16{
  left: 4rem;
}
.left-2{
  left: 0.5rem;
}
.left-3{
  left: 0.75rem;
}
.left-4{
  left: 1rem;
}
.left-8{
  left: 2rem;
}
.left-full{
  left: 100%;
}
.right-0{
  right: 0px;
}
.right-1{
  right: 0.25rem;
}
.right-1\/2{
  right: 50%;
}
.right-1\/4{
  right: 25%;
}
.right-12{
  right: 3rem;
}
.right-2{
  right: 0.5rem;
}
.right-20{
  right: 5rem;
}
.right-3{
  right: 0.75rem;
}
.right-4{
  right: 1rem;
}
.right-6{
  right: 1.5rem;
}
.top-0{
  top: 0px;
}
.top-0\.5{
  top: 0.125rem;
}
.top-1{
  top: 0.25rem;
}
.top-1\/2{
  top: 50%;
}
.top-12{
  top: 3rem;
}
.top-14{
  top: 3.5rem;
}
.top-16{
  top: 4rem;
}
.top-2{
  top: 0.5rem;
}
.top-2\.5{
  top: 0.625rem;
}
.top-20{
  top: 5rem;
}
.top-3{
  top: 0.75rem;
}
.top-4{
  top: 1rem;
}
.top-5{
  top: 1.25rem;
}
.top-6{
  top: 1.5rem;
}
.top-full{
  top: 100%;
}
.isolate{
  isolation: isolate;
}
.-z-10{
  z-index: -10;
}
.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-\[100\]{
  z-index: 100;
}
.z-\[200\]{
  z-index: 200;
}
.z-\[60\]{
  z-index: 60;
}
.z-\[61\]{
  z-index: 61;
}
.z-\[70\]{
  z-index: 70;
}
.z-\[90\]{
  z-index: 90;
}
.z-\[9999\]{
  z-index: 9999;
}
.order-1{
  order: 1;
}
.order-2{
  order: 2;
}
.order-3{
  order: 3;
}
.col-span-1{
  grid-column: span 1 / span 1;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.float-right{
  float: right;
}
.-m-1{
  margin: -0.25rem;
}
.-m-2{
  margin: -0.5rem;
}
.m-3{
  margin: 0.75rem;
}
.m-auto{
  margin: auto;
}
.-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-6{
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.mx-0\.5{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.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-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.-mb-px{
  margin-bottom: -1px;
}
.-ml-0\.5{
  margin-left: -0.125rem;
}
.-ml-1{
  margin-left: -0.25rem;
}
.-ml-px{
  margin-left: -1px;
}
.-mr-1{
  margin-right: -0.25rem;
}
.-mt-0\.5{
  margin-top: -0.125rem;
}
.-mt-1{
  margin-top: -0.25rem;
}
.-mt-4{
  margin-top: -1rem;
}
.mb-0{
  margin-bottom: 0px;
}
.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-20{
  margin-bottom: 5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.ml-0{
  margin-left: 0px;
}
.ml-0\.5{
  margin-left: 0.125rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-10{
  margin-left: 2.5rem;
}
.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-auto{
  margin-left: auto;
}
.mr-0\.5{
  margin-right: 0.125rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-1\.5{
  margin-right: 0.375rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-4{
  margin-right: 1rem;
}
.mr-6{
  margin-right: 1.5rem;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-16{
  margin-top: 4rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-20{
  margin-top: 5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-auto{
  margin-top: auto;
}
.box-border{
  box-sizing: border-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;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.\!table{
  display: table !important;
}
.table{
  display: table;
}
.table-cell{
  display: table-cell;
}
.table-row{
  display: table-row;
}
.grid{
  display: grid;
}
.inline-grid{
  display: inline-grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.aspect-\[4\/3\]{
  aspect-ratio: 4/3;
}
.aspect-square{
  aspect-ratio: 1 / 1;
}
.aspect-video{
  aspect-ratio: 16 / 9;
}
.h-0\.5{
  height: 0.125rem;
}
.h-1{
  height: 0.25rem;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-11{
  height: 2.75rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-2\.5{
  height: 0.625rem;
}
.h-2\/3{
  height: 66.666667%;
}
.h-20{
  height: 5rem;
}
.h-24{
  height: 6rem;
}
.h-3{
  height: 0.75rem;
}
.h-3\.5{
  height: 0.875rem;
}
.h-32{
  height: 8rem;
}
.h-4{
  height: 1rem;
}
.h-40{
  height: 10rem;
}
.h-48{
  height: 12rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-64{
  height: 16rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-80{
  height: 20rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[22px\]{
  height: 22px;
}
.h-\[400px\]{
  height: 400px;
}
.h-\[500px\]{
  height: 500px;
}
.h-\[600px\]{
  height: 600px;
}
.h-\[70vh\]{
  height: 70vh;
}
.h-\[80vh\]{
  height: 80vh;
}
.h-\[90vh\]{
  height: 90vh;
}
.h-\[calc\(100vh-4rem\)\]{
  height: calc(100vh - 4rem);
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.h-screen{
  height: 100vh;
}
.max-h-20{
  max-height: 5rem;
}
.max-h-32{
  max-height: 8rem;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-48{
  max-height: 12rem;
}
.max-h-60{
  max-height: 15rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-80{
  max-height: 20rem;
}
.max-h-96{
  max-height: 24rem;
}
.max-h-\[120px\]{
  max-height: 120px;
}
.max-h-\[150px\]{
  max-height: 150px;
}
.max-h-\[300px\]{
  max-height: 300px;
}
.max-h-\[400px\]{
  max-height: 400px;
}
.max-h-\[50vh\]{
  max-height: 50vh;
}
.max-h-\[600px\]{
  max-height: 600px;
}
.max-h-\[70vh\]{
  max-height: 70vh;
}
.max-h-\[800px\]{
  max-height: 800px;
}
.max-h-\[80vh\]{
  max-height: 80vh;
}
.max-h-\[85vh\]{
  max-height: 85vh;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.max-h-\[calc\(90vh-140px\)\]{
  max-height: calc(90vh - 140px);
}
.max-h-full{
  max-height: 100%;
}
.max-h-none{
  max-height: none;
}
.min-h-0{
  min-height: 0px;
}
.min-h-\[100px\]{
  min-height: 100px;
}
.min-h-\[112px\]{
  min-height: 112px;
}
.min-h-\[120px\]{
  min-height: 120px;
}
.min-h-\[200px\]{
  min-height: 200px;
}
.min-h-\[280px\]{
  min-height: 280px;
}
.min-h-\[400px\]{
  min-height: 400px;
}
.min-h-\[44px\]{
  min-height: 44px;
}
.min-h-\[60vh\]{
  min-height: 60vh;
}
.min-h-\[80px\]{
  min-height: 80px;
}
.min-h-\[80vh\]{
  min-height: 80vh;
}
.min-h-\[88px\]{
  min-height: 88px;
}
.min-h-\[8px\]{
  min-height: 8px;
}
.min-h-full{
  min-height: 100%;
}
.min-h-screen{
  min-height: 100vh;
}
.w-0\.5{
  width: 0.125rem;
}
.w-1{
  width: 0.25rem;
}
.w-1\.5{
  width: 0.375rem;
}
.w-1\/12{
  width: 8.333333%;
}
.w-1\/2{
  width: 50%;
}
.w-1\/3{
  width: 33.333333%;
}
.w-1\/4{
  width: 25%;
}
.w-10{
  width: 2.5rem;
}
.w-11{
  width: 2.75rem;
}
.w-12{
  width: 3rem;
}
.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-20{
  width: 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-4{
  width: 1rem;
}
.w-4\/6{
  width: 66.666667%;
}
.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-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-8{
  width: 2rem;
}
.w-80{
  width: 20rem;
}
.w-9{
  width: 2.25rem;
}
.w-96{
  width: 24rem;
}
.w-\[1000px\]{
  width: 1000px;
}
.w-\[1px\]{
  width: 1px;
}
.w-\[200px\]{
  width: 200px;
}
.w-\[600px\]{
  width: 600px;
}
.w-\[800px\]{
  width: 800px;
}
.w-auto{
  width: auto;
}
.w-full{
  width: 100%;
}
.w-max{
  width: -moz-max-content;
  width: max-content;
}
.w-px{
  width: 1px;
}
.w-screen{
  width: 100vw;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[1\.25rem\]{
  min-width: 1.25rem;
}
.min-w-\[16rem\]{
  min-width: 16rem;
}
.min-w-\[200px\]{
  min-width: 200px;
}
.min-w-\[2rem\]{
  min-width: 2rem;
}
.min-w-\[44px\]{
  min-width: 44px;
}
.min-w-full{
  min-width: 100%;
}
.min-w-max{
  min-width: -moz-max-content;
  min-width: max-content;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-48{
  max-width: 12rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-5xl{
  max-width: 64rem;
}
.max-w-6xl{
  max-width: 72rem;
}
.max-w-7xl{
  max-width: 80rem;
}
.max-w-\[100px\]{
  max-width: 100px;
}
.max-w-\[120px\]{
  max-width: 120px;
}
.max-w-\[150px\]{
  max-width: 150px;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[250px\]{
  max-width: 250px;
}
.max-w-\[80\%\]{
  max-width: 80%;
}
.max-w-full{
  max-width: 100%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-none{
  max-width: none;
}
.max-w-prose{
  max-width: 65ch;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.flex-grow-0{
  flex-grow: 0;
}
.grow{
  flex-grow: 1;
}
.table-auto{
  table-layout: auto;
}
.border-collapse{
  border-collapse: collapse;
}
.origin-top-right{
  transform-origin: top right;
}
.-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-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-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-6{
  --tw-translate-x: 1.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-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-2{
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4{
  --tw-translate-y: 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-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));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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-\[25deg\]{
  --tw-rotate: 25deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce{
  0%, 100%{
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50%{
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce{
  animation: bounce 1s infinite;
}
@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;
}
.cursor-col-resize{
  cursor: col-resize;
}
.cursor-default{
  cursor: default;
}
.cursor-help{
  cursor: help;
}
.cursor-move{
  cursor: move;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.cursor-wait{
  cursor: wait;
}
.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-y{
  resize: vertical;
}
.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-mt-20{
  scroll-margin-top: 5rem;
}
.scroll-pl-1{
  scroll-padding-left: 0.25rem;
}
.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;
}
.grid-cols-1{
  grid-template-columns: repeat(1, 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));
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-nowrap{
  flex-wrap: nowrap;
}
.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-around{
  justify-content: space-around;
}
.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-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-px{
  gap: 1px;
}
.gap-x-10{
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-1\.5{
  row-gap: 0.375rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.gap-y-3{
  row-gap: 0.75rem;
}
.gap-y-4{
  row-gap: 1rem;
}
.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.375rem * 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-px > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(-1px * var(--tw-space-x-reverse));
  margin-left: calc(-1px * 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-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(0.375rem * 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-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * 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-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * 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-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));
}
.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-editor-border > :not([hidden]) ~ :not([hidden]){
  border-color: var(--ed-border);
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(224 228 238 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(208 210 212 / var(--tw-divide-opacity, 1));
}
.divide-gray-300 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-divide-opacity, 1));
}
.divide-gray-700 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(37 40 45 / var(--tw-divide-opacity, 1));
}
.divide-red-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-divide-opacity, 1));
}
.divide-red-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-divide-opacity, 1));
}
.divide-slate-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}
.divide-subtle > :not([hidden]) ~ :not([hidden]){
  border-color: var(--border-subtle);
}
.divide-yellow-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(254 249 195 / var(--tw-divide-opacity, 1));
}
.divide-yellow-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-divide-opacity, 1));
}
.self-start{
  align-self: flex-start;
}
.self-end{
  align-self: flex-end;
}
.self-center{
  align-self: center;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-clip{
  overflow: clip;
}
.overflow-visible{
  overflow: visible;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.overflow-x-hidden{
  overflow-x: hidden;
}
.overflow-y-scroll{
  overflow-y: scroll;
}
.overscroll-contain{
  overscroll-behavior: contain;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis{
  text-overflow: ellipsis;
}
.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;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-3xl{
  border-radius: 1.5rem;
}
.rounded-\[10px\]{
  border-radius: 10px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-none{
  border-radius: 0px;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b-2xl{
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-b-xl{
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.rounded-l-md{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-md{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-t-md{
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.rounded-t-xl{
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.rounded-br-none{
  border-bottom-right-radius: 0px;
}
.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-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-l-0{
  border-left-width: 0px;
}
.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-2{
  border-top-width: 2px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-dotted{
  border-style: dotted;
}
.border-double{
  border-style: double;
}
.border-none{
  border-style: none;
}
.border-\[\#001121\]{
  --tw-border-opacity: 1;
  border-color: rgb(0 17 33 / var(--tw-border-opacity, 1));
}
.border-\[\#E8EBED\]{
  --tw-border-opacity: 1;
  border-color: rgb(232 235 237 / var(--tw-border-opacity, 1));
}
.border-\[var\(--accent\)\]{
  border-color: var(--accent);
}
.border-\[var\(--line\)\]{
  border-color: var(--line);
}
.border-\[var\(--line-2\)\]{
  border-color: var(--line-2);
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-500{
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-blue-100{
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}
.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-200\/60{
  border-color: rgb(191 219 254 / 0.6);
}
.border-blue-300{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-500\/20{
  border-color: rgb(59 130 246 / 0.2);
}
.border-blue-500\/30{
  border-color: rgb(59 130 246 / 0.3);
}
.border-blue-500\/50{
  border-color: rgb(59 130 246 / 0.5);
}
.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-blue-600\/30{
  border-color: rgb(37 99 235 / 0.3);
}
.border-blue-700{
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.border-blue-700\/50{
  border-color: rgb(29 78 216 / 0.5);
}
.border-brand-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(255 233 183 / var(--tw-border-opacity, 1));
}
.border-current{
  border-color: currentColor;
}
.border-default{
  border-color: var(--border-default);
}
.border-editor-accent-green{
  border-color: var(--ed-accent-green);
}
.border-editor-border{
  border-color: var(--ed-border);
}
.border-editor-border-subtle{
  border-color: var(--ed-border-subtle);
}
.border-editor-canvas{
  border-color: var(--ed-canvas);
}
.border-editor-surface-1{
  border-color: var(--ed-surface-1);
}
.border-emerald-200{
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/30{
  border-color: rgb(16 185 129 / 0.3);
}
.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(224 228 238 / var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(208 210 212 / var(--tw-border-opacity, 1));
}
.border-gray-200\/50{
  border-color: rgb(208 210 212 / 0.5);
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-border-opacity, 1));
}
.border-gray-400{
  --tw-border-opacity: 1;
  border-color: rgb(127 140 153 / var(--tw-border-opacity, 1));
}
.border-gray-50{
  --tw-border-opacity: 1;
  border-color: rgb(247 249 251 / var(--tw-border-opacity, 1));
}
.border-gray-500{
  --tw-border-opacity: 1;
  border-color: rgb(84 95 106 / var(--tw-border-opacity, 1));
}
.border-gray-500\/20{
  border-color: rgb(84 95 106 / 0.2);
}
.border-gray-600{
  --tw-border-opacity: 1;
  border-color: rgb(51 64 77 / var(--tw-border-opacity, 1));
}
.border-gray-600\/30{
  border-color: rgb(51 64 77 / 0.3);
}
.border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgb(37 40 45 / var(--tw-border-opacity, 1));
}
.border-gray-700\/50{
  border-color: rgb(37 40 45 / 0.5);
}
.border-gray-800{
  --tw-border-opacity: 1;
  border-color: rgb(37 40 45 / var(--tw-border-opacity, 1));
}
.border-gray-800\/50{
  border-color: rgb(37 40 45 / 0.5);
}
.border-gray-900{
  --tw-border-opacity: 1;
  border-color: rgb(27 28 29 / var(--tw-border-opacity, 1));
}
.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-300{
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-green-400{
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.border-green-500{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-green-500\/20{
  border-color: rgb(34 197 94 / 0.2);
}
.border-green-500\/30{
  border-color: rgb(34 197 94 / 0.3);
}
.border-green-500\/40{
  border-color: rgb(34 197 94 / 0.4);
}
.border-green-600\/30{
  border-color: rgb(22 163 74 / 0.3);
}
.border-green-700{
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
}
.border-indigo-200{
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-indigo-300{
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-indigo-500{
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.border-orange-200{
  --tw-border-opacity: 1;
  border-color: rgb(240 169 138 / var(--tw-border-opacity, 1));
}
.border-orange-300{
  --tw-border-opacity: 1;
  border-color: rgb(233 130 84 / var(--tw-border-opacity, 1));
}
.border-orange-400{
  --tw-border-opacity: 1;
  border-color: rgb(229 105 51 / var(--tw-border-opacity, 1));
}
.border-orange-500{
  --tw-border-opacity: 1;
  border-color: rgb(222 68 0 / var(--tw-border-opacity, 1));
}
.border-orange-500\/20{
  border-color: rgb(222 68 0 / 0.2);
}
.border-pink-500\/20{
  border-color: rgb(236 72 153 / 0.2);
}
.border-pink-500\/30{
  border-color: rgb(236 72 153 / 0.3);
}
.border-primary-200{
  --tw-border-opacity: 1;
  border-color: rgb(170 244 182 / var(--tw-border-opacity, 1));
}
.border-primary-300{
  --tw-border-opacity: 1;
  border-color: rgb(130 239 148 / var(--tw-border-opacity, 1));
}
.border-primary-400{
  --tw-border-opacity: 1;
  border-color: rgb(107 236 129 / var(--tw-border-opacity, 1));
}
.border-primary-500{
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
}
.border-primary-500\/30{
  border-color: rgb(69 231 96 / 0.3);
}
.border-primary-500\/40{
  border-color: rgb(69 231 96 / 0.4);
}
.border-primary-500\/50{
  border-color: rgb(69 231 96 / 0.5);
}
.border-primary-600{
  --tw-border-opacity: 1;
  border-color: rgb(64 210 88 / var(--tw-border-opacity, 1));
}
.border-primary-700{
  --tw-border-opacity: 1;
  border-color: rgb(48 164 68 / var(--tw-border-opacity, 1));
}
.border-purple-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
}
.border-purple-200{
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-300{
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.border-purple-500{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-purple-500\/20{
  border-color: rgb(168 85 247 / 0.2);
}
.border-purple-500\/30{
  border-color: rgb(168 85 247 / 0.3);
}
.border-purple-600\/30{
  border-color: rgb(147 51 234 / 0.3);
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-500\/30{
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/40{
  border-color: rgb(239 68 68 / 0.4);
}
.border-red-600{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-red-600\/30{
  border-color: rgb(220 38 38 / 0.3);
}
.border-red-700{
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.border-rose-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-secondary-300{
  --tw-border-opacity: 1;
  border-color: rgb(163 118 223 / var(--tw-border-opacity, 1));
}
.border-secondary-500{
  --tw-border-opacity: 1;
  border-color: rgb(108 46 188 / 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-700{
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-teal-200{
  --tw-border-opacity: 1;
  border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color: transparent;
}
.border-violet-200{
  --tw-border-opacity: 1;
  border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
}
.border-violet-500{
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
}
.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-yellow-300{
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}
.border-yellow-400{
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-yellow-500{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-yellow-500\/30{
  border-color: rgb(234 179 8 / 0.3);
}
.border-yellow-600\/30{
  border-color: rgb(202 138 4 / 0.3);
}
.border-yellow-600\/50{
  border-color: rgb(202 138 4 / 0.5);
}
.border-t-gray-900{
  --tw-border-opacity: 1;
  border-top-color: rgb(27 28 29 / var(--tw-border-opacity, 1));
}
.border-t-transparent{
  border-top-color: transparent;
}
.bg-\[\#0077B5\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 119 181 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1DA1F2\]{
  --tw-bg-opacity: 1;
  background-color: rgb(29 161 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1E293B\]{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-\[\#4267B2\]{
  --tw-bg-opacity: 1;
  background-color: rgb(66 103 178 / var(--tw-bg-opacity, 1));
}
.bg-\[\#4B5563\]{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-\[\#4B5563\]\/40{
  background-color: rgb(75 85 99 / 0.4);
}
.bg-\[\#E6E8EA\]\/80{
  background-color: rgb(230 232 234 / 0.8);
}
.bg-\[\#F2F4F6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FAFBFB\]{
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 251 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--accent\)\]{
  background-color: var(--accent);
}
.bg-\[var\(--bg\)\]{
  background-color: var(--bg);
}
.bg-\[var\(--bg-1\)\]{
  background-color: var(--bg-1);
}
.bg-\[var\(--bg-2\)\]{
  background-color: var(--bg-2);
}
.bg-\[var\(--bg-3\)\]{
  background-color: var(--bg-3);
}
.bg-\[var\(--ed-canvas\)\]{
  background-color: var(--ed-canvas);
}
.bg-\[var\(--info-bg\)\]{
  background-color: var(--info-bg);
}
.bg-\[var\(--warning-bg\)\]{
  background-color: var(--warning-bg);
}
.bg-\[var\(--warning-fg\)\]{
  background-color: var(--warning-fg);
}
.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-200{
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.bg-amber-300{
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / 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-50\/10{
  background-color: rgb(255 251 235 / 0.1);
}
.bg-amber-50\/50{
  background-color: rgb(255 251 235 / 0.5);
}
.bg-amber-500{
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/15{
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/20{
  background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-600{
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-900\/20{
  background-color: rgb(120 53 15 / 0.2);
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/0{
  background-color: rgb(0 0 0 / 0);
}
.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70{
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/80{
  background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-200{
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / 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-400\/30{
  background-color: rgb(96 165 250 / 0.3);
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-50\/40{
  background-color: rgb(239 246 255 / 0.4);
}
.bg-blue-50\/50{
  background-color: rgb(239 246 255 / 0.5);
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/10{
  background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-500\/15{
  background-color: rgb(59 130 246 / 0.15);
}
.bg-blue-500\/20{
  background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-600\/20{
  background-color: rgb(37 99 235 / 0.2);
}
.bg-blue-900{
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.bg-blue-900\/20{
  background-color: rgb(30 58 138 / 0.2);
}
.bg-blue-900\/50{
  background-color: rgb(30 58 138 / 0.5);
}
.bg-brand-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 237 / var(--tw-bg-opacity, 1));
}
.bg-current{
  background-color: currentColor;
}
.bg-cyan-100{
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.bg-cyan-600{
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.bg-editor-accent-blue{
  background-color: var(--ed-accent-blue);
}
.bg-editor-accent-green{
  background-color: var(--ed-accent-green);
}
.bg-editor-border{
  background-color: var(--ed-border);
}
.bg-editor-canvas{
  background-color: var(--ed-canvas);
}
.bg-editor-surface-1{
  background-color: var(--ed-surface-1);
}
.bg-editor-surface-2{
  background-color: var(--ed-surface-2);
}
.bg-editor-surface-3{
  background-color: var(--ed-surface-3);
}
.bg-editor-text-3{
  background-color: var(--ed-text-tertiary);
}
.bg-emerald-100{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-200{
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10{
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15{
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/20{
  background-color: rgb(16 185 129 / 0.2);
}
.bg-emerald-600{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(224 228 238 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(208 210 212 / var(--tw-bg-opacity, 1));
}
.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(179 185 192 / var(--tw-bg-opacity, 1));
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(127 140 153 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgb(84 95 106 / var(--tw-bg-opacity, 1));
}
.bg-gray-500\/10{
  background-color: rgb(84 95 106 / 0.1);
}
.bg-gray-500\/20{
  background-color: rgb(84 95 106 / 0.2);
}
.bg-gray-500\/75{
  background-color: rgb(84 95 106 / 0.75);
}
.bg-gray-500\/90{
  background-color: rgb(84 95 106 / 0.9);
}
.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgb(51 64 77 / var(--tw-bg-opacity, 1));
}
.bg-gray-600\/20{
  background-color: rgb(51 64 77 / 0.2);
}
.bg-gray-600\/90{
  background-color: rgb(51 64 77 / 0.9);
}
.bg-gray-700{
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.bg-gray-700\/50{
  background-color: rgb(37 40 45 / 0.5);
}
.bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.bg-gray-800\/30{
  background-color: rgb(37 40 45 / 0.3);
}
.bg-gray-800\/50{
  background-color: rgb(37 40 45 / 0.5);
}
.bg-gray-800\/90{
  background-color: rgb(37 40 45 / 0.9);
}
.bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgb(27 28 29 / var(--tw-bg-opacity, 1));
}
.bg-gray-900\/30{
  background-color: rgb(27 28 29 / 0.3);
}
.bg-gray-900\/50{
  background-color: rgb(27 28 29 / 0.5);
}
.bg-gray-900\/75{
  background-color: rgb(27 28 29 / 0.75);
}
.bg-gray-900\/80{
  background-color: rgb(27 28 29 / 0.8);
}
.bg-gray-900\/95{
  background-color: rgb(27 28 29 / 0.95);
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-200{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-50\/50{
  background-color: rgb(240 253 244 / 0.5);
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10{
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/15{
  background-color: rgb(34 197 94 / 0.15);
}
.bg-green-500\/20{
  background-color: rgb(34 197 94 / 0.2);
}
.bg-green-500\/90{
  background-color: rgb(34 197 94 / 0.9);
}
.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-green-600\/20{
  background-color: rgb(22 163 74 / 0.2);
}
.bg-green-600\/90{
  background-color: rgb(22 163 74 / 0.9);
}
.bg-green-700{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.bg-green-900{
  --tw-bg-opacity: 1;
  background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
}
.bg-green-900\/20{
  background-color: rgb(20 83 45 / 0.2);
}
.bg-green-900\/30{
  background-color: rgb(20 83 45 / 0.3);
}
.bg-green-900\/50{
  background-color: rgb(20 83 45 / 0.5);
}
.bg-indigo-100{
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500{
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500\/10{
  background-color: rgb(99 102 241 / 0.1);
}
.bg-indigo-600{
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(245 197 176 / var(--tw-bg-opacity, 1));
}
.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgb(252 236 230 / var(--tw-bg-opacity, 1));
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(222 68 0 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/10{
  background-color: rgb(222 68 0 / 0.1);
}
.bg-orange-600{
  --tw-bg-opacity: 1;
  background-color: rgb(202 62 0 / var(--tw-bg-opacity, 1));
}
.bg-orange-900\/30{
  background-color: rgb(93 29 0 / 0.3);
}
.bg-pink-100{
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}
.bg-pink-50{
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));
}
.bg-pink-500{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-pink-500\/10{
  background-color: rgb(236 72 153 / 0.1);
}
.bg-primary-100{
  --tw-bg-opacity: 1;
  background-color: rgb(198 248 206 / var(--tw-bg-opacity, 1));
}
.bg-primary-200{
  --tw-bg-opacity: 1;
  background-color: rgb(170 244 182 / var(--tw-bg-opacity, 1));
}
.bg-primary-300{
  --tw-bg-opacity: 1;
  background-color: rgb(130 239 148 / var(--tw-bg-opacity, 1));
}
.bg-primary-400{
  --tw-bg-opacity: 1;
  background-color: rgb(107 236 129 / var(--tw-bg-opacity, 1));
}
.bg-primary-50{
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 239 / var(--tw-bg-opacity, 1));
}
.bg-primary-50\/100{
  background-color: rgb(236 254 239 / 1);
}
.bg-primary-50\/90{
  background-color: rgb(236 254 239 / 0.9);
}
.bg-primary-500{
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
}
.bg-primary-500\/10{
  background-color: rgb(69 231 96 / 0.1);
}
.bg-primary-500\/20{
  background-color: rgb(69 231 96 / 0.2);
}
.bg-primary-500\/5{
  background-color: rgb(69 231 96 / 0.05);
}
.bg-primary-600{
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
}
.bg-primary-700{
  --tw-bg-opacity: 1;
  background-color: rgb(48 164 68 / var(--tw-bg-opacity, 1));
}
.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-200{
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/10{
  background-color: rgb(168 85 247 / 0.1);
}
.bg-purple-500\/15{
  background-color: rgb(168 85 247 / 0.15);
}
.bg-purple-500\/20{
  background-color: rgb(168 85 247 / 0.2);
}
.bg-purple-600{
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-purple-600\/20{
  background-color: rgb(147 51 234 / 0.2);
}
.bg-purple-900\/50{
  background-color: rgb(88 28 135 / 0.5);
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-100\/30{
  background-color: rgb(254 226 226 / 0.3);
}
.bg-red-200{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/50{
  background-color: rgb(254 242 242 / 0.5);
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10{
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15{
  background-color: rgb(239 68 68 / 0.15);
}
.bg-red-500\/20{
  background-color: rgb(239 68 68 / 0.2);
}
.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-600\/20{
  background-color: rgb(220 38 38 / 0.2);
}
.bg-red-700{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.bg-red-900{
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.bg-red-900\/20{
  background-color: rgb(127 29 29 / 0.2);
}
.bg-red-900\/30{
  background-color: rgb(127 29 29 / 0.3);
}
.bg-red-900\/50{
  background-color: rgb(127 29 29 / 0.5);
}
.bg-rose-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-500{
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-secondary-100{
  --tw-bg-opacity: 1;
  background-color: rgb(212 191 240 / var(--tw-bg-opacity, 1));
}
.bg-secondary-50{
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 250 / var(--tw-bg-opacity, 1));
}
.bg-secondary-500{
  --tw-bg-opacity: 1;
  background-color: rgb(108 46 188 / 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-500{
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
.bg-slate-700{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-800{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-800\/50{
  background-color: rgb(30 41 59 / 0.5);
}
.bg-slate-900{
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/50{
  background-color: rgb(15 23 42 / 0.5);
}
.bg-surface-1{
  background-color: var(--surface-1);
}
.bg-surface-2{
  background-color: var(--surface-2);
}
.bg-teal-100{
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.bg-teal-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color: transparent;
}
.bg-violet-100{
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-50{
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / 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\/20{
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/50{
  background-color: rgb(255 255 255 / 0.5);
}
.bg-white\/80{
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95{
  background-color: rgb(255 255 255 / 0.95);
}
.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-300{
  --tw-bg-opacity: 1;
  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400{
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50\/50{
  background-color: rgb(254 252 232 / 0.5);
}
.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/15{
  background-color: rgb(234 179 8 / 0.15);
}
.bg-yellow-500\/20{
  background-color: rgb(234 179 8 / 0.2);
}
.bg-yellow-600{
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-yellow-600\/20{
  background-color: rgb(202 138 4 / 0.2);
}
.bg-yellow-900{
  --tw-bg-opacity: 1;
  background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1));
}
.bg-yellow-900\/30{
  background-color: rgb(113 63 18 / 0.3);
}
.bg-yellow-900\/50{
  background-color: rgb(113 63 18 / 0.5);
}
.bg-opacity-20{
  --tw-bg-opacity: 0.2;
}
.bg-opacity-30{
  --tw-bg-opacity: 0.3;
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}
.bg-opacity-70{
  --tw-bg-opacity: 0.7;
}
.bg-opacity-75{
  --tw-bg-opacity: 0.75;
}
.bg-opacity-90{
  --tw-bg-opacity: 0.9;
}
.bg-\[radial-gradient\(ellipse_at_center\2c _var\(--tw-gradient-stops\)\)\]{
  background-image: radial-gradient(ellipse at center, var(--tw-gradient-stops));
}
.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));
}
.from-\[rgba\(98\2c 255\2c 124\2c 0\.18\)\]{
  --tw-gradient-from: rgba(98,255,124,0.18) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(98, 255, 124, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--bg\)\]{
  --tw-gradient-from: var(--bg) 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-\[var\(--ed-canvas\)\]{
  --tw-gradient-from: var(--ed-canvas) 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-amber-400{
  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-50{
  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500{
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/20{
  --tw-gradient-from: rgb(245 158 11 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black{
  --tw-gradient-from: #000 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-black\/10{
  --tw-gradient-from: rgb(0 0 0 / 0.1) 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-black\/60{
  --tw-gradient-from: rgb(0 0 0 / 0.6) 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-black\/70{
  --tw-gradient-from: rgb(0 0 0 / 0.7) 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-blue-100{
  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-400{
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-50{
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500{
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500\/20{
  --tw-gradient-from: rgb(59 130 246 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-600{
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-900\/30{
  --tw-gradient-from: rgb(30 58 138 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500\/20{
  --tw-gradient-from: rgb(6 182 212 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-editor-accent-blue{
  --tw-gradient-from: var(--ed-accent-blue) 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-emerald-400{
  --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-50{
  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-100{
  --tw-gradient-from: #e0e4ee var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(224 228 238 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-200{
  --tw-gradient-from: #d0d2d4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(208 210 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-400{
  --tw-gradient-from: #7f8c99 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(127 140 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-50{
  --tw-gradient-from: #f7f9fb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 249 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-700{
  --tw-gradient-from: #25282d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 40 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-900{
  --tw-gradient-from: #1b1c1d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(27 28 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-400{
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-50{
  --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500{
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-400{
  --tw-gradient-from: #818cf8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-500{
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-500\/20{
  --tw-gradient-from: rgb(99 102 241 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-600{
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-400{
  --tw-gradient-from: #e56933 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 105 51 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-50{
  --tw-gradient-from: #fcece6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(252 236 230 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500{
  --tw-gradient-from: #de4400 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(222 68 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500\/20{
  --tw-gradient-from: rgb(222 68 0 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(222 68 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500\/30{
  --tw-gradient-from: rgb(222 68 0 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(222 68 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-900\/50{
  --tw-gradient-from: rgb(93 29 0 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(93 29 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-400{
  --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-100{
  --tw-gradient-from: #c6f8ce var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(198 248 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-400{
  --tw-gradient-from: #6bec81 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(107 236 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-50{
  --tw-gradient-from: #ecfeef var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 254 239 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-500{
  --tw-gradient-from: #45e760 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(69 231 96 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-500\/10{
  --tw-gradient-from: rgb(69 231 96 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(69 231 96 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-500\/20{
  --tw-gradient-from: rgb(69 231 96 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(69 231 96 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-600{
  --tw-gradient-from: #40d258 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(64 210 88 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-900\/30{
  --tw-gradient-from: rgb(30 97 40 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 97 40 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-900\/40{
  --tw-gradient-from: rgb(30 97 40 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 97 40 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-900\/50{
  --tw-gradient-from: rgb(30 97 40 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 97 40 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-400{
  --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-50{
  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500{
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/20{
  --tw-gradient-from: rgb(168 85 247 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/30{
  --tw-gradient-from: rgb(168 85 247 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-600{
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/20{
  --tw-gradient-from: rgb(88 28 135 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/30{
  --tw-gradient-from: rgb(88 28 135 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/40{
  --tw-gradient-from: rgb(88 28 135 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/50{
  --tw-gradient-from: rgb(88 28 135 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-400{
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500{
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary-100{
  --tw-gradient-from: #d4bff0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(212 191 240 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary-400{
  --tw-gradient-from: #925bd9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(146 91 217 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary-50{
  --tw-gradient-from: #f1ebfa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(241 235 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary-500{
  --tw-gradient-from: #6c2ebc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(108 46 188 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-900{
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-950{
  --tw-gradient-from: #020617 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-50{
  --tw-gradient-from: #f5f3ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 243 255 / 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-400{
  --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-50{
  --tw-gradient-from: #fefce8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 252 232 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500{
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-900\/30{
  --tw-gradient-from: rgb(113 63 18 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(113 63 18 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-amber-100{
  --tw-gradient-to: rgb(254 243 199 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fef3c7 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-blue-600{
  --tw-gradient-to: rgb(37 99 235 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2563eb var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-500{
  --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #10b981 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gray-200{
  --tw-gradient-to: rgb(208 210 212 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #d0d2d4 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gray-800{
  --tw-gradient-to: rgb(37 40 45 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #25282d var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gray-900{
  --tw-gradient-to: rgb(27 28 29 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1b1c1d var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-pink-900\/50{
  --tw-gradient-to: rgb(131 24 67 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(131 24 67 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary-200{
  --tw-gradient-to: rgb(170 244 182 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #aaf4b6 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-500\/10{
  --tw-gradient-to: rgb(168 85 247 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(168 85 247 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-red-500{
  --tw-gradient-to: rgb(239 68 68 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-red-500\/20{
  --tw-gradient-to: rgb(239 68 68 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(239 68 68 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-red-900\/50{
  --tw-gradient-to: rgb(127 29 29 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(127 29 29 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-slate-800{
  --tw-gradient-to: rgb(30 41 59 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-slate-900{
  --tw-gradient-to: rgb(15 23 42 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent 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-yellow-100{
  --tw-gradient-to: rgb(254 249 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fef9c3 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[rgba\(27\2c 183\2c 255\2c 0\.18\)\]{
  --tw-gradient-to: rgba(27,183,255,0.18) var(--tw-gradient-to-position);
}
.to-\[var\(--bg\)\]{
  --tw-gradient-to: var(--bg) var(--tw-gradient-to-position);
}
.to-amber-400{
  --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position);
}
.to-amber-50{
  --tw-gradient-to: #fffbeb var(--tw-gradient-to-position);
}
.to-amber-600{
  --tw-gradient-to: #d97706 var(--tw-gradient-to-position);
}
.to-amber-900\/30{
  --tw-gradient-to: rgb(120 53 15 / 0.3) var(--tw-gradient-to-position);
}
.to-black\/40{
  --tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
}
.to-blue-100{
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}
.to-blue-400{
  --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
}
.to-blue-50{
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}
.to-blue-500{
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}
.to-blue-500\/10{
  --tw-gradient-to: rgb(59 130 246 / 0.1) var(--tw-gradient-to-position);
}
.to-blue-500\/20{
  --tw-gradient-to: rgb(59 130 246 / 0.2) var(--tw-gradient-to-position);
}
.to-blue-600{
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-blue-800{
  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}
.to-blue-900\/30{
  --tw-gradient-to: rgb(30 58 138 / 0.3) var(--tw-gradient-to-position);
}
.to-cyan-50{
  --tw-gradient-to: #ecfeff var(--tw-gradient-to-position);
}
.to-cyan-500{
  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
}
.to-cyan-500\/20{
  --tw-gradient-to: rgb(6 182 212 / 0.2) var(--tw-gradient-to-position);
}
.to-cyan-600{
  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}
.to-emerald-50{
  --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);
}
.to-emerald-500\/20{
  --tw-gradient-to: rgb(16 185 129 / 0.2) var(--tw-gradient-to-position);
}
.to-emerald-600{
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.to-emerald-950{
  --tw-gradient-to: #022c22 var(--tw-gradient-to-position);
}
.to-gray-100{
  --tw-gradient-to: #e0e4ee var(--tw-gradient-to-position);
}
.to-gray-200{
  --tw-gradient-to: #d0d2d4 var(--tw-gradient-to-position);
}
.to-gray-50{
  --tw-gradient-to: #f7f9fb var(--tw-gradient-to-position);
}
.to-gray-600{
  --tw-gradient-to: #33404d var(--tw-gradient-to-position);
}
.to-gray-800{
  --tw-gradient-to: #25282d var(--tw-gradient-to-position);
}
.to-gray-900{
  --tw-gradient-to: #1b1c1d var(--tw-gradient-to-position);
}
.to-green-50{
  --tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position);
}
.to-green-600{
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}
.to-green-950{
  --tw-gradient-to: #052e16 var(--tw-gradient-to-position);
}
.to-indigo-50{
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}
.to-indigo-500{
  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}
.to-indigo-600{
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}
.to-indigo-700{
  --tw-gradient-to: #4338ca var(--tw-gradient-to-position);
}
.to-indigo-900\/30{
  --tw-gradient-to: rgb(49 46 129 / 0.3) var(--tw-gradient-to-position);
}
.to-orange-500\/20{
  --tw-gradient-to: rgb(222 68 0 / 0.2) var(--tw-gradient-to-position);
}
.to-orange-600{
  --tw-gradient-to: #ca3e00 var(--tw-gradient-to-position);
}
.to-orange-900\/50{
  --tw-gradient-to: rgb(93 29 0 / 0.5) var(--tw-gradient-to-position);
}
.to-pink-500{
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}
.to-pink-500\/20{
  --tw-gradient-to: rgb(236 72 153 / 0.2) var(--tw-gradient-to-position);
}
.to-pink-500\/30{
  --tw-gradient-to: rgb(236 72 153 / 0.3) var(--tw-gradient-to-position);
}
.to-pink-600{
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}
.to-primary-100{
  --tw-gradient-to: #c6f8ce var(--tw-gradient-to-position);
}
.to-primary-200{
  --tw-gradient-to: #aaf4b6 var(--tw-gradient-to-position);
}
.to-primary-300{
  --tw-gradient-to: #82ef94 var(--tw-gradient-to-position);
}
.to-primary-400{
  --tw-gradient-to: #6bec81 var(--tw-gradient-to-position);
}
.to-primary-400\/5{
  --tw-gradient-to: rgb(107 236 129 / 0.05) var(--tw-gradient-to-position);
}
.to-primary-50{
  --tw-gradient-to: #ecfeef var(--tw-gradient-to-position);
}
.to-primary-500{
  --tw-gradient-to: #45e760 var(--tw-gradient-to-position);
}
.to-primary-600{
  --tw-gradient-to: #40d258 var(--tw-gradient-to-position);
}
.to-primary-700{
  --tw-gradient-to: #30a444 var(--tw-gradient-to-position);
}
.to-primary-800\/30{
  --tw-gradient-to: rgb(39 127 53 / 0.3) var(--tw-gradient-to-position);
}
.to-primary-800\/50{
  --tw-gradient-to: rgb(39 127 53 / 0.5) var(--tw-gradient-to-position);
}
.to-purple-100{
  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
}
.to-purple-50{
  --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);
}
.to-purple-500{
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}
.to-purple-500\/20{
  --tw-gradient-to: rgb(168 85 247 / 0.2) var(--tw-gradient-to-position);
}
.to-purple-600{
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}
.to-purple-900\/50{
  --tw-gradient-to: rgb(88 28 135 / 0.5) var(--tw-gradient-to-position);
}
.to-purple-950{
  --tw-gradient-to: #3b0764 var(--tw-gradient-to-position);
}
.to-red-500{
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}
.to-red-500\/30{
  --tw-gradient-to: rgb(239 68 68 / 0.3) var(--tw-gradient-to-position);
}
.to-red-600{
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}
.to-secondary-100{
  --tw-gradient-to: #d4bff0 var(--tw-gradient-to-position);
}
.to-secondary-200{
  --tw-gradient-to: #c0a1e9 var(--tw-gradient-to-position);
}
.to-secondary-600{
  --tw-gradient-to: #6c2ebc var(--tw-gradient-to-position);
}
.to-slate-50{
  --tw-gradient-to: #f8fafc var(--tw-gradient-to-position);
}
.to-slate-800{
  --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}
.to-slate-900{
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.to-slate-950{
  --tw-gradient-to: #020617 var(--tw-gradient-to-position);
}
.to-teal-50{
  --tw-gradient-to: #f0fdfa var(--tw-gradient-to-position);
}
.to-teal-500{
  --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);
}
.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white{
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.to-yellow-50{
  --tw-gradient-to: #fefce8 var(--tw-gradient-to-position);
}
.to-yellow-500\/20{
  --tw-gradient-to: rgb(234 179 8 / 0.2) var(--tw-gradient-to-position);
}
.to-yellow-600{
  --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
}
.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.object-top{
  -o-object-position: top;
     object-position: top;
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-12{
  padding: 3rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.px-0{
  padding-left: 0px;
  padding-right: 0px;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.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-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-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.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-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0\.5{
  padding-bottom: 0.125rem;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-20{
  padding-bottom: 5rem;
}
.pb-24{
  padding-bottom: 6rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.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;
}
.pl-10{
  padding-left: 2.5rem;
}
.pl-12{
  padding-left: 3rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.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;
}
.pr-1{
  padding-right: 0.25rem;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-12{
  padding-right: 3rem;
}
.pr-16{
  padding-right: 4rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pr-8{
  padding-right: 2rem;
}
.pt-0{
  padding-top: 0px;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-10{
  padding-top: 2.5rem;
}
.pt-14{
  padding-top: 3.5rem;
}
.pt-16{
  padding-top: 4rem;
}
.pt-2{
  padding-top: 0.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;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.text-justify{
  text-align: justify;
}
.text-start{
  text-align: start;
}
.text-end{
  text-align: end;
}
.align-top{
  vertical-align: top;
}
.font-geist{
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.font-serif{
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}
.text-7xl{
  font-size: 4.5rem;
  line-height: 1;
}
.text-8xl{
  font-size: 6rem;
  line-height: 1;
}
.text-9xl{
  font-size: 8rem;
  line-height: 1;
}
.text-\[10\.5px\]{
  font-size: 10.5px;
}
.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-\[6px\]{
  font-size: 6px;
}
.text-\[8px\]{
  font-size: 8px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-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;
}
.font-thin{
  font-weight: 100;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-10{
  line-height: 2.5rem;
}
.leading-3{
  line-height: .75rem;
}
.leading-4{
  line-height: 1rem;
}
.leading-5{
  line-height: 1.25rem;
}
.leading-6{
  line-height: 1.5rem;
}
.leading-7{
  line-height: 1.75rem;
}
.leading-8{
  line-height: 2rem;
}
.leading-9{
  line-height: 2.25rem;
}
.leading-\[1\.1\]{
  line-height: 1.1;
}
.leading-\[18px\]{
  line-height: 18px;
}
.leading-\[20px\]{
  line-height: 20px;
}
.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.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[0\.12em\]{
  letter-spacing: 0.12em;
}
.tracking-normal{
  letter-spacing: 0em;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.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-white{
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#001121\]{
  --tw-text-opacity: 1;
  color: rgb(0 17 33 / var(--tw-text-opacity, 1));
}
.text-\[\#052e16\]{
  --tw-text-opacity: 1;
  color: rgb(5 46 22 / var(--tw-text-opacity, 1));
}
.text-\[\#0A66C2\]{
  --tw-text-opacity: 1;
  color: rgb(10 102 194 / var(--tw-text-opacity, 1));
}
.text-\[\#1877F2\]{
  --tw-text-opacity: 1;
  color: rgb(24 119 242 / var(--tw-text-opacity, 1));
}
.text-\[\#33404D\]\/70{
  color: rgb(51 64 77 / 0.7);
}
.text-\[\#40D258\]{
  --tw-text-opacity: 1;
  color: rgb(64 210 88 / var(--tw-text-opacity, 1));
}
.text-\[\#7F8C99\]{
  --tw-text-opacity: 1;
  color: rgb(127 140 153 / var(--tw-text-opacity, 1));
}
.text-\[\#B4BAC0\]\/70{
  color: rgb(180 186 192 / 0.7);
}
.text-\[\#f5d423\]{
  --tw-text-opacity: 1;
  color: rgb(245 212 35 / var(--tw-text-opacity, 1));
}
.text-\[var\(--accent-fg\)\]{
  color: var(--accent-fg);
}
.text-\[var\(--accent-text\)\]{
  color: var(--accent-text);
}
.text-\[var\(--ed-text-primary\)\]{
  color: var(--ed-text-primary);
}
.text-\[var\(--fg\)\]{
  color: var(--fg);
}
.text-\[var\(--fg-2\)\]{
  color: var(--fg-2);
}
.text-\[var\(--fg-3\)\]{
  color: var(--fg-3);
}
.text-\[var\(--fg-4\)\]{
  color: var(--fg-4);
}
.text-\[var\(--info-fg\)\]{
  color: var(--info-fg);
}
.text-\[var\(--success-fg\)\]{
  color: var(--success-fg);
}
.text-\[var\(--warning-fg\)\]{
  color: var(--warning-fg);
}
.text-amber-200{
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-500{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.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-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-100{
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-200{
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.text-blue-200\/80{
  color: rgb(191 219 254 / 0.8);
}
.text-blue-300{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / 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-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-current{
  color: currentColor;
}
.text-cyan-400{
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-500{
  --tw-text-opacity: 1;
  color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}
.text-cyan-600{
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-cyan-700{
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}
.text-cyan-800{
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}
.text-editor-accent-blue{
  color: var(--ed-accent-blue);
}
.text-editor-accent-green{
  color: var(--ed-accent-green);
}
.text-editor-text-1{
  color: var(--ed-text-primary);
}
.text-editor-text-2{
  color: var(--ed-text-secondary);
}
.text-editor-text-3{
  color: var(--ed-text-tertiary);
}
.text-emerald-100{
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-emerald-200\/80{
  color: rgb(167 243 208 / 0.8);
}
.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600{
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.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-emerald-900{
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-gray-100{
  --tw-text-opacity: 1;
  color: rgb(224 228 238 / var(--tw-text-opacity, 1));
}
.text-gray-200{
  --tw-text-opacity: 1;
  color: rgb(208 210 212 / var(--tw-text-opacity, 1));
}
.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(179 185 192 / var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(127 140 153 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(84 95 106 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(51 64 77 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(37 40 45 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(37 40 45 / var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(27 28 29 / var(--tw-text-opacity, 1));
}
.text-green-100{
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
.text-green-200{
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.text-green-300{
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-green-900{
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}
.text-indigo-100{
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}
.text-indigo-400{
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-indigo-500{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-indigo-800{
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-orange-300{
  --tw-text-opacity: 1;
  color: rgb(233 130 84 / var(--tw-text-opacity, 1));
}
.text-orange-400{
  --tw-text-opacity: 1;
  color: rgb(229 105 51 / var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(222 68 0 / var(--tw-text-opacity, 1));
}
.text-orange-600{
  --tw-text-opacity: 1;
  color: rgb(202 62 0 / var(--tw-text-opacity, 1));
}
.text-orange-700{
  --tw-text-opacity: 1;
  color: rgb(158 48 0 / var(--tw-text-opacity, 1));
}
.text-orange-800{
  --tw-text-opacity: 1;
  color: rgb(122 37 0 / var(--tw-text-opacity, 1));
}
.text-orange-900{
  --tw-text-opacity: 1;
  color: rgb(93 29 0 / var(--tw-text-opacity, 1));
}
.text-pink-400{
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}
.text-pink-500{
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}
.text-pink-600{
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}
.text-pink-800{
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}
.text-primary-100{
  --tw-text-opacity: 1;
  color: rgb(198 248 206 / var(--tw-text-opacity, 1));
}
.text-primary-200{
  --tw-text-opacity: 1;
  color: rgb(170 244 182 / var(--tw-text-opacity, 1));
}
.text-primary-300{
  --tw-text-opacity: 1;
  color: rgb(130 239 148 / var(--tw-text-opacity, 1));
}
.text-primary-400{
  --tw-text-opacity: 1;
  color: rgb(107 236 129 / var(--tw-text-opacity, 1));
}
.text-primary-400\/60{
  color: rgb(107 236 129 / 0.6);
}
.text-primary-500{
  --tw-text-opacity: 1;
  color: rgb(69 231 96 / var(--tw-text-opacity, 1));
}
.text-primary-600{
  --tw-text-opacity: 1;
  color: rgb(64 210 88 / var(--tw-text-opacity, 1));
}
.text-primary-700{
  --tw-text-opacity: 1;
  color: rgb(48 164 68 / var(--tw-text-opacity, 1));
}
.text-primary-800{
  --tw-text-opacity: 1;
  color: rgb(39 127 53 / var(--tw-text-opacity, 1));
}
.text-primary-900{
  --tw-text-opacity: 1;
  color: rgb(30 97 40 / var(--tw-text-opacity, 1));
}
.text-purple-100{
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}
.text-purple-200{
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.text-purple-300{
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-purple-400{
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-500{
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.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-purple-900{
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}
.text-red-100{
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.text-red-200{
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-600\/80{
  color: rgb(220 38 38 / 0.8);
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-rose-500{
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-700{
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800{
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-secondary-500{
  --tw-text-opacity: 1;
  color: rgb(108 46 188 / var(--tw-text-opacity, 1));
}
.text-secondary-600{
  --tw-text-opacity: 1;
  color: rgb(108 46 188 / var(--tw-text-opacity, 1));
}
.text-secondary-700{
  --tw-text-opacity: 1;
  color: rgb(84 36 147 / var(--tw-text-opacity, 1));
}
.text-semantic-primary{
  color: var(--text-primary);
}
.text-semantic-secondary{
  color: var(--text-secondary);
}
.text-semantic-tertiary{
  color: var(--text-tertiary);
}
.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-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-teal-500{
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}
.text-teal-600{
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.text-teal-700{
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.text-teal-800{
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}
.text-teal-900{
  --tw-text-opacity: 1;
  color: rgb(19 78 74 / 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-violet-700{
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-violet-800{
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.text-violet-900{
  --tw-text-opacity: 1;
  color: rgb(76 29 149 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/60{
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70{
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80{
  color: rgb(255 255 255 / 0.8);
}
.text-white\/90{
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-200{
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.text-yellow-300{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-yellow-900{
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.overline{
  text-decoration-line: overline;
}
.line-through{
  text-decoration-line: line-through;
}
.no-underline{
  text-decoration-line: none;
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-editor-text-3::-moz-placeholder{
  color: var(--ed-text-tertiary);
}
.placeholder-editor-text-3::placeholder{
  color: var(--ed-text-tertiary);
}
.placeholder-gray-400::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-400::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-500::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(84 95 106 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-500::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(84 95 106 / var(--tw-placeholder-opacity, 1));
}
.placeholder-red-500::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(239 68 68 / var(--tw-placeholder-opacity, 1));
}
.placeholder-red-500::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(239 68 68 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.opacity-0{
  opacity: 0;
}
.opacity-10{
  opacity: 0.1;
}
.opacity-100{
  opacity: 1;
}
.opacity-20{
  opacity: 0.2;
}
.opacity-25{
  opacity: 0.25;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-5{
  opacity: 0.05;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.opacity-80{
  opacity: 0.8;
}
.opacity-90{
  opacity: 0.9;
}
.opacity-95{
  opacity: 0.95;
}
.opacity-\[0\.05\]{
  opacity: 0.05;
}
.opacity-\[0\.07\]{
  opacity: 0.07;
}
.mix-blend-multiply{
  mix-blend-mode: multiply;
}
.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-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 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-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -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-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: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-\[var\(--shadow-md\)\]{
  --tw-shadow-color: var(--shadow-md);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-amber-400{
  --tw-shadow-color: #fbbf24;
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-amber-500\/30{
  --tw-shadow-color: rgb(245 158 11 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/20{
  --tw-shadow-color: rgb(0 0 0 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/25{
  --tw-shadow-color: rgb(0 0 0 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-500\/30{
  --tw-shadow-color: rgb(59 130 246 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-orange-500\/20{
  --tw-shadow-color: rgb(222 68 0 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary-500\/20{
  --tw-shadow-color: rgb(69 231 96 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary-500\/25{
  --tw-shadow-color: rgb(69 231 96 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary-500\/30{
  --tw-shadow-color: rgb(69 231 96 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/20{
  --tw-shadow-color: rgb(168 85 247 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/25{
  --tw-shadow-color: rgb(168 85 247 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/30{
  --tw-shadow-color: rgb(168 85 247 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/5{
  --tw-shadow-color: rgb(168 85 247 / 0.05);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-500\/20{
  --tw-shadow-color: rgb(239 68 68 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline{
  outline-style: solid;
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-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-4{
  --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(4px + 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-black{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}
.ring-blue-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}
.ring-blue-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-gray-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(208 210 212 / var(--tw-ring-opacity, 1));
}
.ring-gray-300{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(179 185 192 / var(--tw-ring-opacity, 1));
}
.ring-green-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.ring-indigo-400{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1));
}
.ring-orange-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(222 68 0 / var(--tw-ring-opacity, 1));
}
.ring-primary-100{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(198 248 206 / var(--tw-ring-opacity, 1));
}
.ring-primary-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(170 244 182 / var(--tw-ring-opacity, 1));
}
.ring-primary-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
}
.ring-primary-500\/20{
  --tw-ring-color: rgb(69 231 96 / 0.2);
}
.ring-primary-500\/30{
  --tw-ring-color: rgb(69 231 96 / 0.3);
}
.ring-purple-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity, 1));
}
.ring-red-100{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity, 1));
}
.ring-red-300{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1));
}
.ring-red-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.ring-secondary-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(192 161 233 / var(--tw-ring-opacity, 1));
}
.ring-secondary-500\/30{
  --tw-ring-color: rgb(108 46 188 / 0.3);
}
.ring-white{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-opacity-5{
  --tw-ring-opacity: 0.05;
}
.ring-opacity-50{
  --tw-ring-opacity: 0.5;
}
.ring-offset-1{
  --tw-ring-offset-width: 1px;
}
.ring-offset-2{
  --tw-ring-offset-width: 2px;
}
.ring-offset-4{
  --tw-ring-offset-width: 4px;
}
.ring-offset-gray-50{
  --tw-ring-offset-color: #f7f9fb;
}
.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);
}
.blur-3xl{
  --tw-blur: blur(64px);
  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);
}
.blur-\[120px\]{
  --tw-blur: blur(120px);
  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);
}
.blur-\[2px\]{
  --tw-blur: blur(2px);
  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);
}
.blur-sm{
  --tw-blur: blur(4px);
  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{
  --tw-backdrop-blur: blur(8px);
  -webkit-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: 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);
  -webkit-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: 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{
  -webkit-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: 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, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[height\]{
  transition-property: height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[padding\]{
  transition-property: padding;
  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-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100{
  transition-duration: 100ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.duration-500{
  transition-duration: 500ms;
}
.duration-75{
  transition-duration: 75ms;
}
.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);
}
.will-change-transform{
  will-change: transform;
}
.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;
      --tw-bg-opacity: 1;
      background-color: rgb(170 244 182 / var(--tw-bg-opacity, 1));
      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;
    --tw-bg-opacity: 1;
    background-color: rgb(107 236 129 / var(--tw-bg-opacity, 1));
    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);
  color: #052e16;
}
.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)));
}
[hidden] {
    display: none !important;
  }
@media (prefers-color-scheme: dark) {
    /**
     * Custom components
     **/
    /* Color picker */
    .pcr-app{
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }

      .pcr-app .pcr-interaction .pcr-result{
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }

        .pcr-app .pcr-interaction .pcr-result:focus {
          box-shadow: 0 0 0 1px #45e760, 0 0 0 3px #45e760;
        }

    /* Date range picker */
    .daterangepicker{
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }

      .daterangepicker::before {
        border-bottom-color: #0f172a;
      }

      .daterangepicker::after {
        border-bottom-color: #1e293b;
      }

      .daterangepicker .calendar-table{
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }

        /* navigation arrows */
          .daterangepicker .calendar-table .available span{
    --tw-border-opacity: 1;
    border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
  }

      /* Clear and Apply buttons wrapper */
      .daterangepicker .drp-buttons {
        border-top-color: #0f172a;
        --tw-text-opacity: 1;
        color: rgb(203 213 225 / var(--tw-text-opacity, 1));
      }
        .daterangepicker th.available:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
  }
        .daterangepicker td.off{
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
@media (prefers-color-scheme: dark) {
  
  a.daterangepicker td.off {
    color: inherit;
  }
}

        .daterangepicker td.available:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
  }

      .daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect{
    --tw-border-opacity: 1 !important;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1)) !important;
  }

    /* Phone field */
    .iti__country-list{
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }

    /* Select2 */
      .select2-container .select2-selection__rendered{
    --tw-text-opacity: 1 !important;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1)) !important;
  }

      .select2-container .select2-dropdown{
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

      .select2-container .select2-search__field{
    --tw-border-opacity: 1 !important;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  }

      .select2-container .select2-selection--multiple, .select2-container .select2-selection--single{
    --tw-border-opacity: 1 !important;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  }

      .select2-container .select2-selection--multiple:focus, .select2-container .select2-selection--single:focus{
    --tw-ring-opacity: 1 !important;
    --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1)) !important;
  }

      .select2-container .select2-selection--multiple, .select2-container .select2-selection--single{
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }

      /* For the selected options in the multiple select2 component */
      .select2-container .select2-selection__choice{
    --tw-border-opacity: 1 !important;
    border-color: rgb(69 231 96 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1)) !important;
  color: #052e16 !important;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
@media (prefers-color-scheme: dark) {
  
  a.select2-container .select2-selection__choice {
    color: inherit;
  }
}

        .select2-container .select2-selection__choice .select2-selection__choice__remove{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
@media (prefers-color-scheme: dark) {
  
  a.select2-container .select2-selection__choice .select2-selection__choice__remove {
    color: inherit;
  }
}

          .select2-container .select2-selection__choice .select2-selection__choice__remove:hover{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
@media (prefers-color-scheme: dark) {
  
  a.select2-container .select2-selection__choice .select2-selection__choice__remove:hover {
    color: inherit;
  }
}

      .select2-container .select2-results__option{
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }

    /* Trix Editor */
    trix-editor{
    --tw-border-opacity: 1 !important;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  }

      trix-editor:focus, trix-editor:active{
    --tw-border-opacity: 1 !important;
    border-color: rgb(69 231 96 / var(--tw-border-opacity, 1)) !important;
  }

    trix-toolbar{
    opacity: 0.5 !important;
  }

      trix-toolbar.visible{
    opacity: 1 !important;
  }

      trix-toolbar .trix-button-group, trix-toolbar .trix-button{
    --tw-border-opacity: 1 !important;
    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1)) !important;
  }

      trix-toolbar .trix-button:disabled::before{
    opacity: 0.25;
  }

      trix-toolbar .trix-dialog{
    --tw-border-opacity: 1 !important;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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;
    --tw-shadow-color: #0f172a !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
  }

        trix-toolbar .trix-dialog .trix-button--dialog{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
@media (prefers-color-scheme: dark) {
  
  atrix-toolbar .trix-dialog .trix-button--dialog {
    color: inherit;
  }
}

        trix-toolbar .trix-dialog .trix-input--dialog{
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }

        trix-toolbar .trix-dialog .trix-input--dialog:focus{
    --tw-border-opacity: 1;
    border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
  }

        trix-toolbar .trix-dialog .trix-input--dialog:is(.dark *){
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }
      .tribute-container ul{
    --tw-border-opacity: 1 !important;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  }

    .trix-dialogs{
    --tw-border-opacity: 1 !important;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  }

    .trix-content a[href^="bullettrain://"]{
    --tw-bg-opacity: 1;
    background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
@media (prefers-color-scheme: dark) {
  
  a.trix-content a[href^="bullettrain://"] {
    color: inherit;
  }
}

    /* CKEditor */
    .ck {
      --ck-color-base-background: #1e293b;
      --ck-color-base-border: #0f172a;
      --ck-color-toolbar-background: #1e293b;
      --ck-color-toolbar-border: #0f172a;
      --ck-color-text: #cbd5e1;
    }

      .ck .ck-editor__editable:not(.ck-editor__nested-editable){
    --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);
  }

        .ck .ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
    --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);
  }
  }
/* 
 * Refer to the stimulus-scroll-reveal documentation for details.
 * https://www.stimulus-components.com/docs/stimulus-scroll-reveal/
 */
: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: #fef2f2;
  --primary-100: #fee2e2;
  --primary-200: #fecaca;
  --primary-300: #fca5a5;
  --primary-400: #f87171;
  --primary-500: #ef4444;
  --primary-600: #dc2626;
  --primary-700: #b91c1c;
  --primary-800: #991b1b;
  --primary-900: #7f1d1d;

  --secondary-50: #fef2f2;
  --secondary-100: #fee2e2;
  --secondary-200: #fecaca;
  --secondary-300: #fca5a5;
  --secondary-400: #f87171;
  --secondary-500: #ef4444;
  --secondary-600: #dc2626;
  --secondary-700: #b91c1c;
  --secondary-800: #991b1b;
  --secondary-900: #7f1d1d;
}
.theme-orange {
  --primary-50: #fcece6;
  --primary-100: #f5c5b0;
  --primary-200: #f0a98a;
  --primary-300: #e98254;
  --primary-400: #e56933;
  --primary-500: #de4400;
  --primary-600: #ca3e00;
  --primary-700: #9e3000;
  --primary-800: #7a2500;
  --primary-900: #5d1d00;

  --secondary-50: #fcece6;
  --secondary-100: #f5c5b0;
  --secondary-200: #f0a98a;
  --secondary-300: #e98254;
  --secondary-400: #e56933;
  --secondary-500: #de4400;
  --secondary-600: #ca3e00;
  --secondary-700: #9e3000;
  --secondary-800: #7a2500;
  --secondary-900: #5d1d00;
}
.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: #fefce8;
  --primary-100: #fef9c3;
  --primary-200: #fef08a;
  --primary-300: #fde047;
  --primary-400: #facc15;
  --primary-500: #eab308;
  --primary-600: #ca8a04;
  --primary-700: #a16207;
  --primary-800: #854d0e;
  --primary-900: #713f12;

  --secondary-50: #fefce8;
  --secondary-100: #fef9c3;
  --secondary-200: #fef08a;
  --secondary-300: #fde047;
  --secondary-400: #facc15;
  --secondary-500: #eab308;
  --secondary-600: #ca8a04;
  --secondary-700: #a16207;
  --secondary-800: #854d0e;
  --secondary-900: #713f12;
}
.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: #f0fdf4;
  --primary-100: #dcfce7;
  --primary-200: #bbf7d0;
  --primary-300: #86efac;
  --primary-400: #4ade80;
  --primary-500: #22c55e;
  --primary-600: #16a34a;
  --primary-700: #15803d;
  --primary-800: #166534;
  --primary-900: #14532d;

  --secondary-50: #f0fdf4;
  --secondary-100: #dcfce7;
  --secondary-200: #bbf7d0;
  --secondary-300: #86efac;
  --secondary-400: #4ade80;
  --secondary-500: #22c55e;
  --secondary-600: #16a34a;
  --secondary-700: #15803d;
  --secondary-800: #166534;
  --secondary-900: #14532d;
}
.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-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: #fef2f2;
  --secondary-100: #fee2e2;
  --secondary-200: #fecaca;
  --secondary-300: #fca5a5;
  --secondary-400: #f87171;
  --secondary-500: #ef4444;
  --secondary-600: #dc2626;
  --secondary-700: #b91c1c;
  --secondary-800: #991b1b;
  --secondary-900: #7f1d1d;
}
.theme-secondary-orange {
  --secondary-50: #fcece6;
  --secondary-100: #f5c5b0;
  --secondary-200: #f0a98a;
  --secondary-300: #e98254;
  --secondary-400: #e56933;
  --secondary-500: #de4400;
  --secondary-600: #ca3e00;
  --secondary-700: #9e3000;
  --secondary-800: #7a2500;
  --secondary-900: #5d1d00;
}
.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: #fefce8;
  --secondary-100: #fef9c3;
  --secondary-200: #fef08a;
  --secondary-300: #fde047;
  --secondary-400: #facc15;
  --secondary-500: #eab308;
  --secondary-600: #ca8a04;
  --secondary-700: #a16207;
  --secondary-800: #854d0e;
  --secondary-900: #713f12;
}
.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: #f0fdf4;
  --secondary-100: #dcfce7;
  --secondary-200: #bbf7d0;
  --secondary-300: #86efac;
  --secondary-400: #4ade80;
  --secondary-500: #22c55e;
  --secondary-600: #16a34a;
  --secondary-700: #15803d;
  --secondary-800: #166534;
  --secondary-900: #14532d;
}
.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;
}
/* 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;
}
[data-theme] section.electron .electron-mobile-only,[data-theme] section .todesktop .electron-mobile-only { padding: 120px 0; }
[data-theme] section.electron .electron-mobile-only.tight,[data-theme] section .todesktop .electron-mobile-only.tight { padding: 80px 0; }
@media (max-width: 720px) {

  [data-theme] section.electron .electron-mobile-only,[data-theme] section .todesktop .electron-mobile-only { padding: 64px 0; }
  [data-theme] section.electron .electron-mobile-only.tight,[data-theme] section .todesktop .electron-mobile-only.tight { padding: 48px 0; }
}
@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-lg` */
    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-lg` */
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    /* 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; }
/*
 * 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;
}
.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{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.select2-selection.select2-selection--single,
.select2-selection.select2-selection--multiple {
  min-height: 37px;
}
.select2-selection.select2-selection--single .select2-selection__rendered, .select2-selection.select2-selection--multiple .select2-selection__rendered {
    padding-left: 12px;
    min-height: 34px;
    line-height: 34px;
  }
.select2-selection.select2-selection--single .select2-selection__arrow, .select2-selection.select2-selection--multiple .select2-selection__arrow {
    padding-top: 35px;
  }
.select2-container .select2-search--inline .select2-search__field {
  font-weight: 300;
  margin-top: 6px;
  font-size: 1rem;
  line-height: 1.5rem;
}
@media (min-width: 768px){
  .select2-container .select2-search--inline .select2-search__field{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.select2 {
  display: block;
}
.select2 img {
    display: none;
  }
.select2-results img {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    margin-right: 8px;
  }
.select2-results__option--highlighted{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(107 236 129 / var(--tw-bg-opacity, 1)) !important;
  color: #052e16 !important;
}
.trix-content .attachment-gallery > action-text-attachment,
    .trix-content .attachment-gallery > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }
.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
      .trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
      .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
      .trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
/* Override Tailwind's preflight styles */
/* https://github.com/tailwindlabs/tailwindcss/issues/989#issuecomment-506555308 */
.trix-content ul {
    list-style-type: disc;
  }
.trix-content ol {
    list-style-type: decimal;
  }
.trix-content action-text-attachment .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
/* don't show the editor tool bar unless the user is editing the field. */
/* see https://github.com/basecamp/trix/issues/343 and `app/assets/javascripts/account/fields.js` */
trix-toolbar {
  opacity: 0.15;
}
trix-toolbar.visible {
    opacity: 1;
  }
/* Override Tailwind's preflight styles */
/* https://github.com/tailwindlabs/tailwindcss/issues/989#issuecomment-506555308 */
.trix-button:is(.dark *){
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
/* Prevent red ring on Trix Editor */
:-moz-focusring {
  outline-style: none;
}
a[href^="bullettrain://"], span.tribute-reference {
  border-radius: 4px;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 4px;
  margin: -1px 0;
  color: #3E4B5B;
  line-height: 17px;
  text-decoration: none;
  background-color: #ebe2ff;
  border: 1px solid #7147d2;
}
a[href^="bullettrain://users"], a[href^="bullettrain://teams"], span.tribute-users-reference, span.tribute-teams-reference {
  background-color: #e2ebff;
  border: 1px solid #4771d2;
}
.tribute-container ul {
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid var(--primary-500);
    background: white;
    list-style: none;
    padding: 0;
  }
.tribute-container ul:empty {
      display: none;
    }
.tribute-container ul li{
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) {
  .modal-content-mobile > div:first-child .tribute-container ul li {
    justify-content: space-between;
  }
}
.tribute-container ul li span {
        font-weight: normal;
      }
.tribute-container ul li.highlight {
        background-color: #5897fb;
        color: white;
      }
.tribute-container ul li{
      padding: 5px 10px;
}
.tribute-container ul li img {
        height: 30px;
        width: 30px;
        border-radius: 15px;
        margin-right: 5px;
      }
trix-editor [data-trix-cursor-target] {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  /* background-color: red; */
}
.trix-editor * {
    box-sizing: border-box;
  }
trix-editor {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  font-weight: 300;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
trix-editor:focus, trix-editor:active {
    border-color: var(--primary-500);
    box-shadow: inset 0 0 0 1px var(--primary-500);
  }
trix-editor[disabled]{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
trix-editor[disabled]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
trix-editor[disabled]:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
trix-editor[disabled]:is(.dark *):hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.trix-hide-toolbar trix-toolbar {
    display: none !important;
  }
.trix-content{
  font-size: 1rem;
  line-height: 1.5rem;
}
@media (min-width: 768px){
  .trix-content{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
/* The Trix Editor uses SVGs for its buttons, so we manually override them here for dark mode */
/* Icons taken from https://react-icons.github.io/react-icons/icons?name=md */
@media (prefers-color-scheme: dark) {
  .trix-button--icon-bold::before {
    background-image: url('data:image/svg+xml;utf-8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path></svg>') !important;
  }

  .trix-button--icon-italic::before {
    background-image: url('data:image/svg+xml;utf-8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path></svg>') !important;
  }

  .trix-button--icon-strike::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28.77.65 1.46 1.73 1.46 3.24h-3.01c0-.31-.05-.59-.15-.85-.29-.86-1.2-1.28-2.25-1.28-1.86 0-2.34 1.02-2.34 1.7 0 .48.25.88.74 1.21.38.25.77.48 1.41.7H7.39c-.21-.34-.54-.89-.54-1.92zM21 12v-2H3v2h9.62c1.15.45 1.96.75 1.96 1.97 0 1-.81 1.67-2.28 1.67-1.54 0-2.93-.54-2.93-2.51H6.4c0 .55.08 1.13.24 1.58.81 2.29 3.29 3.3 5.67 3.3 2.27 0 5.3-.89 5.3-4.05 0-.3-.01-1.16-.48-1.94H21V12z"></path></svg>') !important;
  }

  .trix-button--icon-link::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M8 11h8v2H8v-2zm12.1 1H22c0-2.76-2.24-5-5-5h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1zM3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM19 12h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3z"></path></svg>') !important;
  }

  .trix-button--icon-heading-1::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z"></path></svg>') !important;
  }

  .trix-button--icon-quote::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"></path></svg>') !important;
  }

  .trix-button--icon-code::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path></svg>') !important;
  }

  .trix-button--icon-bullet-list::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"></path></svg>') !important;
  }

  .trix-button--icon-number-list::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"></path></svg>') !important;
  }

  .trix-button--icon-decrease-nesting-level::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"></path></svg>') !important;
  }

  .trix-button--icon-increase-nesting-level::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"></path></svg>') !important;
  }

  .trix-button--icon-attach::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 015 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 005 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"></path></svg>') !important;
  }

  .trix-button--icon-undo::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"></path></svg>') !important;
  }

  .trix-button--icon-redo::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16a8.002 8.002 0 017.6-5.5c1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"></path></svg>') !important;
  }
}
.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);
  }
.required > label::after{
  display: inline-block;
  padding-left: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  content: "*";
}
[data-turn-exit],
[data-turn-enter] {
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);
  animation-fill-mode: forwards;
}
html.turn-exit [data-turn-exit] {
  animation-name: fade-out-up;
  animation-duration: .3s;
}
html.turn-enter [data-turn-enter] {
  animation-name: fade-in-up;
  animation-duration: .6s;
}
html.turn-before-exit [data-turn-exit],
html.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)
  }
}
#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.2rem;
  padding-left: 1.2rem;
}
#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.2rem;
  line-height: 1;
  width: 1rem;
  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 */
}
@media only screen and (max-width: 640px) {
  #bt-docs-content h1,
  #bt-docs-content h2,
  #bt-docs-content h3,
  #bt-docs-content h4,
  #bt-docs-content h5,
  #bt-docs-content h6{
    margin-left: -1.375rem;
    padding-left: 1.375rem;
  }
  #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{
    margin-left:-1.375rem;
  }
  #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{
    font-size: 1rem;
  }
}
form.button_to{
  display: inline-block;
}
form.button_to input[type=submit]{
  background-color: transparent;
}
form.button_to input[type=submit].button{
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
  color: #052e16;
}
form.button_to input[type=submit].button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
}
/* 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;
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
  color: #052e16;
}
/*
  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.
*/
tr.gu-mirror > *:not(:first-child) {
  display: none;
}
/* alias used to support ejecting the file to local */
/* ✅ 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.
*/
/* Import markdown styles for chat messages */
/* Markdown styling for chat messages */
.message-content h1,
.message-content h2,
.message-content h3 {
  line-height: 1.25;
}
.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child {
  margin-top: 0;
}
/* Lists: flush left, bullet inline with text (no left padding on li) */
.message-content ul,
.message-content ol {
  margin-left: 0;
  padding-left: 0;
}
.message-content li {
  padding-left: 0;
  /* list-disc list-inside (from markdown_helper.rb) handles bullet rendering */
}
.message-content code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  font-size: 0.875rem;
}
.message-content pre {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.message-content pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
/* Smooth transitions for status indicators */
.message-content [data-message-status] {
  transition: all 0.3s ease;
}
/* Animation for processing messages */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Import chat message overflow fixes */
/* Chat Message Content Overflow Fixes */
/* Ensure all content respects the chat container width */
.message-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
/* Code blocks with horizontal scroll */
.message-content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}
.message-content code {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* Inline code should break */
.message-content :not(pre) > code {
  white-space: pre-wrap;
  word-break: break-all;
}
/* Tables with horizontal scroll */
.message-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
/* Long URLs and links */
.message-content a {
  word-break: break-all;
  overflow-wrap: break-word;
}
/* Images should not exceed container */
.message-content img {
  max-width: 100%;
  height: auto;
}
/* Blockquotes */
.message-content blockquote {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* Lists */
.message-content ul,
.message-content ol {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* Horizontal rules */
.message-content hr {
  max-width: 100%;
}
/* Prose (Tailwind Typography) overrides */
.prose {
  max-width: 100% !important;
}
.prose pre {
  max-width: 100%;
  overflow-x: auto;
}
.prose code {
  white-space: pre-wrap !important;
  word-break: break-all;
}
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
/* Specific fix for chat container */
#chat_container {
  overflow-x: hidden;
}
#chat_messages {
  overflow-x: hidden;
  max-width: 100%;
}
/* Ensure flex children don't overflow */
.message-content .flex-1 {
  min-width: 0;
}
/* Import GRIFTER font for overskill branding */
/* GRIFTER Bold Font - Brand font for overskill branding
 * Font by Hanson Method
 *
 * SETUP: Download GRIFTER Bold from:
 *   - https://www.maisfontes.com/grifter-bold.font
 *   - https://befonts.com/grifter-font.html
 *
 * Place the OTF file at: app/assets/fonts/GRIFTER-Bold.otf
 *
 * Optional: Convert to WOFF2 for better web performance using:
 *   - https://cloudconvert.com/otf-to-woff2
 *   - Place at: app/assets/fonts/GRIFTER-Bold.woff2
 */
/* GRIFTER Bold - Primary brand font */
@font-face {
  font-family: 'GRIFTER';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  /* Prefer WOFF2 for web, fallback to OTF - use absolute path from assets root */
  src: url(/assets/GRIFTER-Bold.woff2) format('woff2'),
       url(/assets/GRIFTER-Bold.otf) format('opentype');
}
/* Use GRIFTER Bold for all weights since we only have the bold file */
@font-face {
  font-family: 'GRIFTER';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/GRIFTER-Bold.woff2) format('woff2'),
       url(/assets/GRIFTER-Bold.otf) format('opentype');
}
/* Brand font class for overskill branding - lowercase text transform */
.font-overskill {
  font-family: 'GRIFTER', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-weight: 700 !important;
  font-feature-settings: 'liga' 1, 'kern' 1;
  letter-spacing: 0; /* GRIFTER spec: 0% letter spacing */
  /* line-height inherited from context (e.g. Tailwind text-xl) for proper vertical alignment */
}
/* Specific weight classes */
.font-overskill-light {
  font-family: 'GRIFTER', sans-serif;
  font-weight: 300;
}
.font-overskill-regular {
  font-family: 'GRIFTER', sans-serif;
  font-weight: 400;
}
.font-overskill-semibold {
  font-family: 'GRIFTER', sans-serif;
  font-weight: 600;
}
.font-overskill-bold {
  font-family: 'GRIFTER', sans-serif;
  font-weight: 700 !important;
  letter-spacing: 0; /* GRIFTER spec: 0% letter spacing */
}
/* Import Overskill brand theme and colors */
/* Overskill Brand Colors and Theme Variables */
/* Updated with AXIO.ai visual design tokens (Feb 2026) */
/* Source: AXIO.ai Figma Kit (tGXIC5Cj82yHJTCZzj0HAJ) */
/* ===== LIGHT MODE (default) ===== */
:root {
  /* --- Surfaces (AXIO-inspired warmer tones) --- */
  --surface-default: #ffffff;
  --surface-lv1: #f7f9fb;  /* AXIO: warmer gray background */
  --surface-lv2: #f2f4f6;
  --surface-lv3: #f1f2f3;
  --surface-dark: #25282d;  /* AXIO: softer dark surface */
  --surface-fixed: #45e760;
  --modal-default: #ffffff;
  --modal-lv1: #fcfdff;
  --overlay-default: #ffffff;
  --overlay-hover: #0011210a;
  --overlay-active: #00112114;
  --overlay-active-hover: #00112133;

  /* --- Text (AXIO-inspired softer contrast) --- */
  --text-primary: #25282d;  /* AXIO: softer black (was #001021) */
  --text-primary-fixed: #001021;
  --text-secondary: #545f6a;  /* AXIO: lighter secondary (was #33404d) */
  --text-tertiary: #7f8c99;
  --text-white: #ffffff;
  --text-light: #ffffff;
  --text-disabled: #e6e8ea;

  /* --- Icons (updated to match new text tones) --- */
  --icon-primary: #25282d;
  --icon-secondary: #545f6a;
  --icon-tertiary: #7f8c99;
  --icon-white: #ffffff;
  --icon-disabled: #e6e8ea;

  /* --- Strokes (AXIO-inspired cooler borders) --- */
  --stroke-primary: #e0e4ee;  /* AXIO: cooler border (was #e8eaed) */
  --stroke-secondary: #f6f7f9;
  --stroke-tertiary: #e6e8ea;
  --stroke-white: #ffffff;

  /* --- State: Fade --- */
  --fade-dark: #001021;
  --fade-base: #818a94;
  --fade-light: #e6e8ea;
  --fade-lighter: #f6f7f9;

  /* --- State: Primary (Green) --- */
  --state-primary-dark: #30a444;
  --state-primary-base: #45e760;
  --state-primary-light: #c6f8ce;
  --state-primary-lighter: #ecfeef;

  /* --- State: Information (Purple) --- */
  --state-info-dark: #321557;
  --state-info-base: #6c2ebc;
  --state-info-light: #c0a1e9;
  --state-info-lighter: #d4bff0;

  /* --- State: Pending (Yellow) --- */
  --state-pending-dark: #4c3708;
  --state-pending-base: #ffc84c;
  --state-pending-light: #ffefc9;
  --state-pending-lighter: #fffaed;

  /* --- State: Error (Orange) --- */
  --state-error-dark: #5d1d00;
  --state-error-base: #de4400;
  --state-error-light: #f5c5b0;
  --state-error-lighter: #fcece6;

  /* --- State: Magenta --- */
  --state-magenta-dark: #59004f;
  --state-magenta-base: #d500bb;
  --state-magenta-light: #f2b0ea;
  --state-magenta-lighter: #fbe6f8;

  /* --- State: Success (Purple) --- */
  --state-success-dark: #321557;
  --state-success-base: #542493;
  --state-success-light: #d4bff0;
  --state-success-lighter: #f1ebfa;

  /* --- Primary Green Scale --- */
  --primary-50:  #ecfeef;
  --primary-100: #c6f8ce;
  --primary-200: #aaf4b6;
  --primary-300: #82ef94;
  --primary-400: #6bec81;
  --primary-500: #45e760;  /* LOGO COLOR — do not change */
  --primary-600: #45e760;
  --primary-700: #30a444;
  --primary-800: #277f35;
  --primary-900: #1e6128;

  /* --- Purple (Secondary) Scale --- */
  --secondary-50:  #f1ebfa;
  --secondary-100: #d4bff0;
  --secondary-200: #c0a1e9;
  --secondary-300: #a376df;
  --secondary-400: #925bd9;
  --secondary-500: #6c2ebc;
  --secondary-600: #6c2ebc;
  --secondary-700: #542493;
  --secondary-800: #411c72;
  --secondary-900: #321557;

  /* --- Orange Scale --- */
  --orange-50:  #fcece6;
  --orange-100: #f5c5b0;
  --orange-200: #f0a98a;
  --orange-300: #e98254;
  --orange-400: #e56933;
  --orange-500: #de4400;
  --orange-600: #ca3e00;
  --orange-700: #9e3000;
  --orange-800: #7a2500;
  --orange-900: #5d1d00;

  /* --- Yellow Scale --- */
  --yellow-50:  #fffaed;
  --yellow-100: #ffefc9;
  --yellow-200: #ffe9b7;
  --yellow-300: #ffde94;
  --yellow-400: #ffd370;
  --yellow-500: #ffc84c;
  --yellow-600: #af882e;
  --yellow-700: #745717;
  --yellow-800: #60470f;
  --yellow-900: #4c3708;

  /* --- Magenta Scale --- */
  --magenta-50:  #fbe6f8;
  --magenta-100: #f2b0ea;
  --magenta-200: #ec8ae0;
  --magenta-300: #e354d1;
  --magenta-400: #dd33c9;
  --magenta-500: #d500bb;
  --magenta-600: #c200aa;
  --magenta-700: #970085;
  --magenta-800: #750067;
  --magenta-900: #59004f;

  /* --- Blue Scale --- */
  --blue-50:  #eaf4ff;
  --blue-100: #bddeff;
  --blue-200: #9dceff;
  --blue-300: #70b7ff;
  --blue-400: #54a9ff;
  --blue-500: #2994ff;
  --blue-600: #2586e8;
  --blue-700: #1d69b5;
  --blue-800: #17518c;
  --blue-900: #113e6b;

  /* --- Accent Colors (legacy aliases) --- */
  --accent-green: #10b981;
  --accent-blue: #2994ff;
  --accent-purple: #6c2ebc;
  --accent-pink: #ec4899;

  /* --- Gradients --- */
  --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-300) 0%, var(--secondary-700) 100%);
  --gradient-vibrant: linear-gradient(135deg, var(--primary-500) 0%, var(--blue-500) 100%);

  /* --- Shadows with brand colors (logo green #45e760) --- */
  --shadow-primary: 0 4px 6px -1px rgba(69, 231, 96, 0.2), 0 2px 4px -2px rgba(69, 231, 96, 0.15);
  --shadow-primary-lg: 0 10px 15px -3px rgba(69, 231, 96, 0.25), 0 4px 6px -4px rgba(69, 231, 96, 0.15);
  --shadow-primary-ring: rgba(69, 231, 96, 0.3); /* Focus ring color */

  /* ===================================================
     GLOBAL SEMANTIC TOKENS (Non-Editor Surfaces)
     Feb 2026 - AXIO design system rollout
     =================================================== */

  /* --- Surface Layer System (0-4) --- */
  /* For consistent card/panel layering across dashboard, settings, billing */
  --surface-0: #ffffff;           /* Base/background layer */
  --surface-1: #f7f9fb;           /* Elevated cards/panels (replaces bg-white/bg-gray-50) */
  --surface-2: #f2f4f6;           /* Nested cards/sections (replaces bg-gray-100) */
  --surface-3: #e0e4ee;           /* Input backgrounds (replaces bg-gray-200) */
  --surface-4: #d0d2d4;           /* Pressed/inset states (replaces bg-gray-300) */

  /* --- Interactive State Tokens --- */
  /* For consistent hover/focus/active states across all components */
  --interactive-hover: #f7f9fb;   /* Hover background lift (buttons, cards) */
  --interactive-active: #e0e4ee;  /* Active/pressed background */
  --interactive-focus: #45e760;   /* Focus ring color (brand green) */
  --interactive-disabled: #f6f7f9; /* Disabled background */

  /* --- Border Hierarchy --- */
  /* For consistent borders across cards, inputs, dividers */
  --border-default: #e0e4ee;      /* Default borders (replaces border-gray-200) */
  --border-subtle: #f6f7f9;       /* Subtle dividers (replaces border-gray-100) */
  --border-emphasis: #d0d2d4;     /* Emphasized borders (replaces border-gray-300) */
  --border-focus: #45e760;        /* Focus ring border (brand green) */

  /* --- Component-Specific Tokens --- */
  /* Input field states */
  --input-bg: #ffffff;
  --input-bg-hover: #f7f9fb;
  --input-bg-focus: #ffffff;
  --input-bg-disabled: #f6f7f9;
  --input-border: #e0e4ee;
  --input-border-hover: #d0d2d4;
  --input-border-focus: #45e760;
  --input-text: #25282d;
  --input-placeholder: #7f8c99;

  /* Button states (secondary/ghost) */
  --button-secondary-bg: #f7f9fb;
  --button-secondary-hover: #e0e4ee;
  --button-secondary-active: #d0d2d4;
  --button-ghost-hover: #f7f9fb;

  /* Card hover effects */
  --card-shadow-hover: 0 4px 12px rgba(37, 40, 45, 0.08);
  --card-border-hover: #d0d2d4;
}
/* ===== DARK MODE CSS Variables (.dark class) ===== */
.dark {
  /* --- Surfaces --- */
  --surface-default: #1b1c1d;
  --surface-lv1: #202123;
  --surface-lv2: #292b2d;
  --surface-lv3: #303335;
  --surface-dark: #001021;
  --modal-default: #001021;
  --modal-lv1: #001d39;
  --overlay-default: #001d39;
  --overlay-hover: #001021;
  --overlay-active: #33404d;
  --overlay-active-hover: #33404d;

  /* --- Text --- */
  --text-primary: #f6f7f9;
  --text-primary-fixed: #001021;
  --text-secondary: #d0d2d4;
  --text-tertiary: #818a94;
  --text-light: #001021;
  --text-disabled: #33404d;

  /* --- Icons --- */
  --icon-primary: #f6f7f9;
  --icon-secondary: #d0d2d4;
  --icon-tertiary: #b3b9c0;
  --icon-white: #001021;
  --icon-disabled: #545f6a;

  /* --- Strokes --- */
  --stroke-primary: #2e2e2e;
  --stroke-secondary: #33404d;
  --stroke-tertiary: #818a94;
  --stroke-white: #001021;

  /* --- State: Fade --- */
  --fade-dark: #e6e8ea;
  --fade-base: #b3b9c0;
  --fade-light: #0011211e;
  --fade-lighter: #00112114;

  /* --- State: Primary (Green) --- */
  --state-primary-dark: #6bec81;
  --state-primary-base: #45e760;
  --state-primary-light: #2994ff4c;
  --state-primary-lighter: #2994ff33;

  /* --- State: Info (Purple) --- */
  --state-info-dark: #925bd9;
  --state-info-base: #6c2ebc;
  --state-info-light: #6c2ebc4c;
  --state-info-lighter: #6c2ebc33;

  /* --- State: Pending --- */
  --state-pending-dark: #ffd370;
  --state-pending-base: #ffc84c;
  --state-pending-light: #ffc84c4c;
  --state-pending-lighter: #ffc84c33;

  /* --- State: Error --- */
  --state-error-dark: #e56933;
  --state-error-base: #de4400;
  --state-error-light: #ff692e4c;
  --state-error-lighter: #ff692e33;

  /* --- State: Magenta --- */
  --state-magenta-dark: #dd33c9;
  --state-magenta-base: #d500bb;
  --state-magenta-light: #d500bb4c;
  --state-magenta-lighter: #d500bb33;

  /* --- State: Success --- */
  --state-success-dark: #dd33c9;
  --state-success-base: #d500bb;
  --state-success-light: #6c2ebc4c;
  --state-success-lighter: #6c2ebc33;

  /* ===================================================
     GLOBAL SEMANTIC TOKENS - DARK MODE
     Feb 2026 - AXIO design system rollout
     =================================================== */

  /* --- Surface Layer System (0-4) --- */
  --surface-0: #1b1c1d;           /* Base/background layer (darkest) */
  --surface-1: #202123;           /* Elevated cards/panels */
  --surface-2: #292b2d;           /* Nested cards/sections */
  --surface-3: #2a2c35;           /* Input backgrounds */
  --surface-4: #303335;           /* Pressed/inset states (lightest) */

  /* --- Interactive State Tokens --- */
  --interactive-hover: #292b2d;   /* Hover background lift */
  --interactive-active: #303335;  /* Active/pressed background */
  --interactive-focus: #45e760;   /* Focus ring (brand green, same) */
  --interactive-disabled: #2a2c35; /* Disabled background */

  /* --- Border Hierarchy --- */
  --border-default: #2d2f3a;      /* Default borders (subtle in dark) */
  --border-subtle: #21232c;       /* Hairline dividers */
  --border-emphasis: #343745;     /* Emphasized borders */
  --border-focus: #45e760;        /* Focus ring border (brand green) */

  /* --- Component-Specific Tokens --- */
  /* Input field states */
  --input-bg: #2a2c35;
  --input-bg-hover: #2e3040;
  --input-bg-focus: #2a2c35;
  --input-bg-disabled: #22242c;
  --input-border: #2d2f3a;
  --input-border-hover: #343745;
  --input-border-focus: #45e760;
  --input-text: #e4e6ec;
  --input-placeholder: #555b6e;

  /* Button states (secondary/ghost) */
  --button-secondary-bg: #292b2d;
  --button-secondary-hover: #2e3040;
  --button-secondary-active: #303335;
  --button-ghost-hover: #292b2d;

  /* Card hover effects */
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
  --card-border-hover: #343745;
}
/* ===================================================
   EDITOR DESIGN SYSTEM
   Light mode values (default) — active when .dark is absent
   Dark mode values preserved in .dark scope for future toggle
   =================================================== */
/* --- Editor Light Mode Surface Tokens (default) --- */
:root {
  /* Layer 0: Canvas — outermost page background */
  --ed-canvas: #fafbfb;

  /* Layer 1: Panel surfaces — chat panel, sidebar */
  --ed-surface-1: #fafbfb;

  /* Layer 2: Elevated cards — message bubbles, dropdowns (very light gray) */
  --ed-surface-2: #f9fafb;

  /* Layer 3: Inputs, inset elements — textarea, form fields */
  --ed-surface-3: #f3f4f6;

  /* Layer 4: Hover/active surface lifts */
  --ed-surface-hover: #e5e7eb;

  /* --- Borders --- */
  --ed-border: #e5e7eb;
  --ed-border-subtle: #f3f4f6;
  --ed-border-glow: rgba(69, 231, 96, 0.25);

  /* --- Text hierarchy --- */
  --ed-text-primary: #111827;
  --ed-text-secondary: #6b7280;
  --ed-text-tertiary: #9ca3af;
  --ed-text-disabled: #d1d5db;

  /* --- Icon tones --- */
  --ed-icon-primary: #374151;
  --ed-icon-secondary: #6b7280;
  --ed-icon-muted: #9ca3af;

  /* --- Accent / highlight tones (same in light/dark) --- */
  --ed-accent-green: #45e760;
  --ed-accent-green-glow: rgba(69, 231, 96, 0.12);
  --ed-accent-green-dim: rgba(69, 231, 96, 0.06);
  --ed-accent-blue: #2994ff;
  --ed-accent-blue-glow: rgba(41, 148, 255, 0.12);
  --ed-accent-teal: #3de0c4;

  /* --- Version card (light mode) --- */
  --ed-version-card-from: #ecfdf5;
  --ed-version-card-to: #f0fdf4;
  --ed-version-badge: #3b50db;

  /* --- Scrollbar --- */
  --ed-scrollbar-thumb: #d1d5db;
  --ed-scrollbar-thumb-hover: #9ca3af;

  /* --- Chat message bubbles --- */
  --ed-msg-user-bg: #F2F3F5;
  --ed-msg-user-text: #111827;
  --ed-artifact-bg: #F0FFF4;
  --ed-artifact-border: #bbf7d0;
}
/* --- Editor Dark Mode Surface Tokens (preserved for future toggle) --- */
.dark {
  /* Layer 0: Deepest canvas — outermost container */
  --ed-canvas: #16171a;

  /* Layer 1: Panel surfaces — chat panel, sidebar */
  --ed-surface-1: #1c1d22;

  /* Layer 2: Elevated cards — message bubbles, dropdowns, modals */
  --ed-surface-2: #22242c;

  /* Layer 3: Inputs, inset elements — textarea, form fields */
  --ed-surface-3: #2a2c35;

  /* Layer 4: Hover/active surface lifts */
  --ed-surface-hover: #2e3040;

  /* --- Borders: faint, low-contrast strokes --- */
  --ed-border: #2d2f3a;           /* primary border */
  --ed-border-subtle: #21232c;    /* hairline/separator */
  --ed-border-glow: rgba(69, 231, 96, 0.25); /* green focus glow */

  /* --- Text hierarchy via opacity + weight --- */
  --ed-text-primary: #e4e6ec;     /* high contrast — main content */
  --ed-text-secondary: #9098ad;   /* reduced opacity — descriptions */
  --ed-text-tertiary: #555b6e;    /* small + muted — labels, hints */
  --ed-text-disabled: #363840;    /* disabled states */

  /* --- Icon tones --- */
  --ed-icon-primary: #c4c8d8;
  --ed-icon-secondary: #6e7485;
  --ed-icon-muted: #444858;

  /* --- Accent / Neon highlight tones --- */
  --ed-accent-green: #45e760;               /* brand — do not change */
  --ed-accent-green-glow: rgba(69, 231, 96, 0.12); /* soft glow, not saturated */
  --ed-accent-green-dim: rgba(69, 231, 96, 0.06);
  --ed-accent-blue: #2994ff;                /* AXIO primary blue (was #4a8eff) */
  --ed-accent-blue-glow: rgba(41, 148, 255, 0.12);  /* updated glow for AXIO blue */
  --ed-accent-teal: #3de0c4;                /* neon teal for gradients */

  /* --- Version card gradient --- */
  --ed-version-card-from: #1a2d2a;
  --ed-version-card-to: #1c3030;
  --ed-version-badge: #3b50db;             /* version number pill */

  /* --- Scroll indicator --- */
  --ed-scrollbar-thumb: #2d2f3a;
  --ed-scrollbar-thumb-hover: #3a3d4a;

  /* --- Chat message bubbles --- */
  --ed-msg-user-bg: #22242c;
  --ed-msg-user-text: #e4e6ec;
  --ed-artifact-bg: #1a2d2a;
  --ed-artifact-border: #1f4438;
}
/* ===================================================
   EDITOR COMPONENT STYLES
   Now use CSS vars that adapt to light/dark via :root/.dark
   =================================================== */
/* --- Editor Container --- */
.editor-canvas {
  background-color: var(--ed-canvas);
}
.editor-panel {
  background-color: var(--ed-surface-1);
}
/* --- Editor Header Bar --- */
.editor-header {
  background-color: var(--ed-canvas);
  border-bottom: 1px solid var(--ed-border);
}
/* --- Chat Panel --- */
.editor-chat-panel {
  background-color: var(--ed-surface-1);
  border-right: 1px solid var(--ed-border);
}
/* --- Chat Header (Team/App nav row) --- */
.editor-chat-header {
  background-color: var(--ed-surface-1);
  border-bottom: 1px solid var(--ed-border);
}
/* --- Header Navigation Tabs --- */
.editor-tab {
  color: var(--ed-text-tertiary);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.editor-tab:hover {
  color: var(--ed-text-primary);
}
.editor-tab.active {
  color: var(--ed-text-primary);
  border-bottom-color: var(--ed-text-primary);
}
/* --- Icon Buttons (header, toolbar) --- */
.editor-icon-btn {
  color: #6b7280; /* gray-500 */
  border-radius: 8px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.editor-icon-btn:hover {
  color: #111827; /* gray-900 */
  background-color: #f3f4f6; /* gray-100 */
}
/* --- Share Button (clean outline style) --- */
.editor-btn-share {
  background-color: transparent;
  color: #374151; /* gray-700 */
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.editor-btn-share:hover {
  background-color: #f9fafb; /* gray-50 */
  color: #111827; /* gray-900 */
  border-color: #9ca3af; /* gray-400 */
}
/* --- Publish Button (dark/black fill) --- */
.editor-btn-publish {
  background-color: #111827; /* gray-900 */
  color: #ffffff;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.editor-btn-publish:hover {
  background-color: #1f2937; /* gray-800 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.editor-btn-publish:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.2);
}
/* --- Chat Messages Area --- */
.editor-messages-area {
  background-color: var(--ed-surface-1);
}
/* --- User Message Bubble --- */
.editor-message-user {
  background-color: var(--ed-surface-2);
  color: var(--ed-text-primary);
  border-radius: 12px;
  border: 1px solid var(--ed-border);
}
/* --- Assistant Message --- */
.editor-message-assistant {
  color: var(--ed-text-primary);
}
/* --- Tool/Status Indicator Row --- */
.editor-tool-row {
  color: var(--ed-text-tertiary);
}
.editor-tool-badge {
  background-color: var(--ed-surface-2);
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  color: var(--ed-text-secondary);
  font-size: 0.7rem;
}
/* --- Version Card (AI console style) --- */
.editor-version-card {
  background: linear-gradient(135deg, var(--ed-version-card-from) 0%, var(--ed-version-card-to) 100%);
  border: 1px solid rgba(61, 224, 196, 0.12);
  border-radius: 10px;
  transition: box-shadow 0.2s ease;
}
.editor-version-card:hover {
  box-shadow: 0 0 16px rgba(61, 224, 196, 0.08);
}
/* Figma 278:271: white bg, 4px radius, Inter SemiBold 10/20, color #33404D @ 80% */
.editor-version-badge {
  background-color: #ffffff;
  color: rgba(51, 64, 77, 0.8);
  border-radius: 4px;
  font-size: 10px;
  line-height: 20px;
  font-weight: 600;
  padding: 0 8px;
}
/* Version card in-progress */
.editor-version-card-progress {
  background: linear-gradient(135deg, #1a2038 0%, #1c2540 100%);
  border: 1px solid rgba(41, 148, 255, 0.15);
}
/* Version card completed */
.editor-version-card-complete {
  background: linear-gradient(135deg, var(--ed-version-card-from) 0%, var(--ed-version-card-to) 100%);
  border: 1px solid rgba(61, 224, 196, 0.12);
}
/* --- Suggestion Chips --- */
.editor-suggestions-bar {
  background-color: #ffffff;
  border-top: 1px solid #f3f4f6;
}
.editor-suggestion-chip {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.editor-suggestion-chip:hover {
  background-color: #ffffff;
  border-color: #d1d5db;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.editor-suggestion-chip:active {
  transform: scale(0.98);
}
.editor-suggestion-title {
  color: #111827;
  font-size: 0.875rem;
  font-weight: 500;
}
.editor-suggestion-desc {
  color: #6b7280;
  font-size: 0.75rem;
}
/* --- Starter Prompt Chips (Empty Chat State) --- */
.starter-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.starter-chip:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.starter-chip:active {
  transform: scale(0.97);
}
.starter-chip-icon {
  font-size: 1rem;
  line-height: 1;
}
.starter-chip-label {
  color: #111827;
  font-size: 0.8125rem;
  font-weight: 500;
}
/* --- Chat Input Area --- */
.editor-chat-input-wrapper {
  background-color: #ffffff;
  border-top: 1px solid #f3f4f6;
}
.editor-chat-input {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  color: #111827;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.editor-chat-input:hover {
  background-color: #ffffff;
  border-color: #d1d5db;
}
.editor-chat-input:focus-within {
  background-color: #ffffff;
  border-color: #9ca3af;
  box-shadow: 0 0 0 1px #e5e7eb;
  outline: none;
}
/* Prevent global focus-visible outline from stacking with chat input focus ring */
.editor-chat-input:focus-visible,
.editor-chat-input textarea:focus-visible,
.editor-chat-input-wrapper *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Keep focus treatment on container only, never textarea itself */
.editor-chat-input textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}
.editor-chat-input textarea {
  /* Override generic .dark textarea styles to prevent nested/stacked input appearance */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #111827 !important;
  caret-color: #45e760;
  outline: none !important;
  box-shadow: none !important;
}
.editor-chat-input textarea::-moz-placeholder {
  color: #9ca3af;
}
.editor-chat-input textarea::placeholder {
  color: #9ca3af;
}
/* --- Chat Input Send Button --- */
.editor-send-btn {
  background-color: #16a34a; /* solid green-600 — clearly active */
  color: #ffffff;
  border-radius: 9999px;
  transition: background-color 0.15s ease;
  box-shadow: none;
}
.editor-send-btn:hover:not(:disabled) {
  background-color: #15803d; /* green-700 on hover */
  box-shadow: none;
  filter: none;
}
.editor-send-btn:disabled {
  background-color: #222222; /* dark gray when disabled/empty */
  color: #555555;
  box-shadow: none;
  filter: none;
}
/* --- Input Toolbar Icons (image, doc, edit mode) --- */
.editor-toolbar-icon {
  color: var(--ed-icon-secondary);
  transition: color 0.15s ease, background-color 0.15s ease;
  border-radius: 6px;
}
.editor-toolbar-icon:hover {
  color: var(--ed-text-secondary);
  background-color: var(--ed-surface-3);
}
/* --- Preview Panel --- */
.editor-preview-panel {
  background-color: var(--ed-canvas);
}
/* --- Dropdown Menus --- */
.editor-dropdown {
  background-color: var(--ed-surface-2);
  border: 1px solid var(--ed-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.editor-dropdown-item {
  color: var(--ed-text-secondary);
  transition: background-color 0.1s ease, color 0.1s ease;
}
.editor-dropdown-item:hover {
  background-color: var(--ed-surface-3);
  color: var(--ed-text-primary);
}
/* --- Sidebar / Activity Monitor --- */
.editor-modal-panel {
  background-color: var(--ed-surface-1);
  border: 1px solid var(--ed-border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
/* --- Custom Scrollbar (dark editor) --- */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--ed-scrollbar-thumb);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--ed-scrollbar-thumb-hover);
}
/* --- Collaborator Avatar --- */
.editor-avatar {
  background-color: var(--ed-surface-3);
  border: 2px solid var(--ed-canvas);
  color: var(--ed-text-secondary);
}
/* --- Status Dots --- */
.editor-status-dot-live {
  background-color: var(--ed-accent-green);
  box-shadow: 0 0 6px var(--ed-accent-green-glow);
}
.editor-status-dot-building {
  background-color: var(--ed-accent-blue);
  box-shadow: 0 0 6px var(--ed-accent-blue-glow);
}
/* --- Thought/Reasoning Indicator --- */
.editor-thought-row {
  color: var(--ed-text-tertiary);
  font-size: 0.7rem;
  font-style: italic;
}
/* --- Divider --- */
.editor-divider {
  width: 1px;
  background-color: var(--ed-border);
  opacity: 0.7;
}
/* ===================================================
   KEYBOARD SHORTCUT HINTS
   =================================================== */
.editor-kbd {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  color: #6b7280;
  font-size: 0.65rem;
  padding: 1px 4px;
}
/* ===================================================
   QUEUE / BANNER
   =================================================== */
/* Queue banner: shown above the chat input when AI is processing OR when
   messages are queued. The previous blue-tinted treatment clashed with the
   editor's neutral dark palette and clashed harder with the green
   "primary-400" override that .text-amber-800 picks up in dark mode (see
   the .dark { .text-amber-800 } rule further down this file). Now uses DS
   tokens so the banner reads as a quiet info row, with semantic accent only
   on the spinner (signalling activity) and danger on Stop. */
.editor-queue-banner {
  background-color: var(--bg-2, var(--ed-surface-2));
  border: 1px solid var(--line, var(--ed-border));
  border-radius: 8px;
  color: var(--fg-2, var(--ed-text-secondary));
}
/* ===================================================
   MOBILE NAVIGATION BAR
   =================================================== */
.editor-mobile-nav {
  background-color: var(--ed-surface-1);
  border-top: 1px solid var(--ed-border);
}
.editor-mobile-tab {
  color: var(--ed-text-tertiary);
  transition: color 0.15s ease;
}
.editor-mobile-tab.active {
  color: var(--ed-text-primary);
  background-color: var(--ed-surface-2);
}
/* ===================================================
   QUICK SUGGESTION CHIPS (inline in messages)
   =================================================== */
.editor-quick-chip {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  border-radius: 6px;
  font-size: 0.75rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.editor-quick-chip:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
}
/* ===================================================
   AI MESSAGE CARD (Batch 4 — structured AI responses)
   =================================================== */
/* Batch 6: Card chrome removed so AI text flows freely.
   Class kept as a JS hook for clipboard copy selectors.
   Version summary cards get their own border treatment inline. */
.editor-ai-card {
  /* intentionally empty — no border/bg/padding */
}
/* Strip Tailwind Typography's auto-inserted backtick decorations around <code> */
.editor-ai-card .prose code::before,
.editor-ai-card .prose code::after,
.agent-loop-message .prose code::before,
.agent-loop-message .prose code::after,
.agent-reply-container .prose code::before,
.agent-reply-container .prose code::after {
  content: "" !important;
}
/* Figma chat typography spec — Inter 12/20 Medium, color #33404D
   Figma renders Inter with ligatures+calt OFF and antialiased smoothing.
   Match those so on-screen rendering aligns with the design. */
.editor-ai-card .prose,
.editor-ai-card .prose p,
.editor-ai-card .prose li,
.editor-ai-card .prose ul,
.editor-ai-card .prose ol,
.agent-loop-message .prose,
.agent-loop-message .prose p,
.agent-loop-message .prose li,
.agent-loop-message .prose ul,
.agent-loop-message .prose ol {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #33404D;
  font-feature-settings: 'liga' off, 'calt' off;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Dark mode override (May 2026, :editor_v2): the Figma chat-text colour
   #33404D above is hardcoded for light mode and barely readable on
   the dark canvas (luminance contrast ~0.03 against --bg). Promote it
   to a DS body-secondary tone in dark. dark:prose-invert covers the
   `<strong>` / `<h*>` / `<code>` weights via --tw-prose-invert-*. */
.dark .editor-ai-card .prose,
.dark .editor-ai-card .prose p,
.dark .editor-ai-card .prose li,
.dark .editor-ai-card .prose ul,
.dark .editor-ai-card .prose ol,
.dark .agent-loop-message .prose,
.dark .agent-loop-message .prose p,
.dark .agent-loop-message .prose li,
.dark .agent-loop-message .prose ul,
.dark .agent-loop-message .prose ol {
  color: var(--fg-2);
}
/* Match Figma rendering on the user message bubble too */
.message-content .bg-\[\#E6E8EA\]\/80,
.message-content .bg-\[\#E6E8EA\]\/80 p {
  font-feature-settings: 'liga' off, 'calt' off;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Mobile: ensure agent-reply-container also gets 14px (matches editor-ai-card) */
@media (max-width: 768px) {
  .agent-reply-container .prose,
  .agent-reply-container .prose p,
  .agent-reply-container .prose li,
  .agent-reply-container .prose ul,
  .agent-reply-container .prose ol {
    font-size: 14px;
    line-height: 22px;
  }
}
/* Tighter spacing for AI message prose blocks */
.editor-ai-card .prose p,
.agent-loop-message .prose p {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.editor-ai-card .prose ul,
.editor-ai-card .prose ol,
.agent-loop-message .prose ul,
.agent-loop-message .prose ol {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding-left: 0;
}
.editor-ai-card .prose li,
.agent-loop-message .prose li {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
.editor-ai-card .prose h3 {
  margin-top: 0.65em;
  margin-bottom: 0.2em;
}
.editor-ai-card .prose h4 {
  margin-top: 0.5em;
  margin-bottom: 0.15em;
}
.editor-ai-card .prose pre {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.editor-ai-card .prose blockquote {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
/* Standalone prose blocks inside agent replies — match Figma spec (12/20 Medium #33404D) */
.agent-reply-container .prose,
.agent-reply-container .prose p,
.agent-reply-container .prose li,
.agent-reply-container .prose ul,
.agent-reply-container .prose ol {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #33404D;
  font-feature-settings: 'liga' off, 'calt' off;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dark .agent-reply-container .prose,
.dark .agent-reply-container .prose p,
.dark .agent-reply-container .prose li,
.dark .agent-reply-container .prose ul,
.dark .agent-reply-container .prose ol {
  color: var(--fg-2);
}
.agent-reply-container .prose p {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.agent-reply-container .prose ul,
.agent-reply-container .prose ol {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding-left: 0;
}
.agent-reply-container .prose li {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
.agent-reply-container .prose h3 {
  margin-top: 0.65em;
  margin-bottom: 0.2em;
}
/* Tighten conversation flow item spacing */
.agent-reply-container .space-y-2 > * + * {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
}
.editor-ai-card-header {
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
}
/* Operation badges */
.editor-badge-edit {
  background-color: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
}
.editor-badge-created {
  background-color: #d1fae5;
  color: #065f46;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
}
.editor-badge-updated {
  background-color: #dbeafe;
  color: #1e40af;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
}
/* --- Reaction / Action Row --- */
.editor-reaction-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.375rem;
}
.editor-reaction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  color: #9ca3af;
  transition: color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}
.editor-reaction-btn:hover {
  color: #374151;
  background-color: #f3f4f6;
}
.dark .editor-reaction-btn {
  color: var(--ed-text-3);
}
.dark .editor-reaction-btn:hover {
  color: var(--ed-text-1);
  background-color: var(--ed-surface-hover);
}
/* --- Feedback row (May 2026) — 👍/👎/copy with persisted state --- */
/* Active 👍 — green pill */
.editor-feedback-active {
  color: #059669;
  background-color: rgba(16, 185, 129, 0.12);
}
.editor-feedback-active:hover {
  color: #047857;
  background-color: rgba(16, 185, 129, 0.18);
}
.dark .editor-feedback-active {
  color: #34d399;
  background-color: rgba(52, 211, 153, 0.15);
}
/* Active 👎 — red pill */
.editor-feedback-active-negative {
  color: #dc2626;
  background-color: rgba(239, 68, 68, 0.12);
}
.editor-feedback-active-negative:hover {
  color: #b91c1c;
  background-color: rgba(239, 68, 68, 0.18);
}
.dark .editor-feedback-active-negative {
  color: #f87171;
  background-color: rgba(248, 113, 113, 0.15);
}
/* Reason picker chips inside expanded 👎 panel */
.editor-reason-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.15s ease;
}
.editor-reason-chip:hover {
  border-color: #d1d5db;
  background-color: #f3f4f6;
}
.dark .editor-reason-chip {
  border-color: var(--ed-border);
  background-color: var(--ed-surface-2);
  color: var(--ed-text-2);
}
.dark .editor-reason-chip:hover {
  background-color: var(--ed-surface-hover);
  color: var(--ed-text-1);
}
.editor-reason-chip-active {
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.dark .editor-reason-chip-active {
  border-color: rgba(248, 113, 113, 0.5);
  background-color: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
/* --- Metadata Line (tool count, duration, thinking) --- */
.editor-metadata-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #9ca3af;
}
.editor-metadata-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.editor-metadata-link {
  color: var(--ed-accent-blue);
  cursor: pointer;
  font-size: 0.75rem;
}
.editor-metadata-link:hover {
  text-decoration: underline;
}
/* --- Status Dots --- */
.editor-status-dot-completed {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #45e760;
  flex-shrink: 0;
}
.editor-status-dot-active {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #eab308;
  flex-shrink: 0;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.editor-status-dot-failed {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #ef4444;
  flex-shrink: 0;
}
/* ===================================================
   SUBTLE INNER GLOW OVERLAY (for depth on surfaces)
   =================================================== */
.editor-surface-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  pointer-events: none;
}
/* Custom utility classes */
.bg-gradient-primary {
  background: var(--gradient-primary);
}
.bg-gradient-secondary {
  background: var(--gradient-secondary);
}
.bg-gradient-vibrant {
  background: var(--gradient-vibrant);
}
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.shadow-primary {
  box-shadow: var(--shadow-primary);
}
.shadow-primary-lg {
  box-shadow: var(--shadow-primary-lg);
}
/* Custom button styles */
.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background: linear-gradient(135deg, #45e760 0%, #45e760 100%); /* Brand green gradient */
  color: #052e16 !important; /* Dark text for WCAG AA contrast */
  text-shadow: none;
  box-shadow: none;
}
.btn-primary:hover {
  background: #7FED69 !important;
  transform: none;
  filter: none;
  box-shadow: none;
}
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 231, 96, 0.5); /* Bold green focus ring */
}
.btn-primary:disabled{
  cursor: not-allowed;
  opacity: 0.7;
}
.btn-secondary{
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(37 40 45 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
[data-controller="mobile-navigation"] button.btn-secondary {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.btn-secondary:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 251 / var(--tw-bg-opacity, 1));
}
.btn-secondary:focus{
  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(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-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}
/* Card hover effects */
.card-hover{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.card-hover:hover{
  --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));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 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);
}
/* Brand-specific animations */
@keyframes pulse-primary {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
.animate-pulse-primary {
  animation: pulse-primary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Ghost link/button for clean navigation hovers */
.btn-ghost{
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 64 77 / var(--tw-text-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: 150ms;
}
.btn-ghost:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(224 228 238 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(27 28 29 / var(--tw-text-opacity, 1));
}
/* Brand pill for small accents */
.pill-brand{
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(27 28 29 / var(--tw-text-opacity, 1));
}
@media (prefers-color-scheme: dark) {
  .pill-brand a {
    color: #6bec81; /* primary-400 */
  }

  .pill-brand a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
.pill-brand {
  background-color: var(--primary-500);
}
/* ===== Form Controls (SaaS-standard sizing) ===== */
.form-control{
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
.form-control::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.form-control::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.form-control{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
[data-controller="mobile-navigation"] button.form-control {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
[data-theme] section.form-control { padding: 120px 0; }
[data-theme] section.form-control.tight { padding: 80px 0; }
@media (max-width: 720px) {

  [data-theme] section.form-control { padding: 64px 0; }
  [data-theme] section.form-control.tight { padding: 48px 0; }
}
.form-control:focus{
  border-color: transparent;
  --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-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
}
/* Bullet Train form field height fix */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="search"],
input[type="time"],
input[type="week"],
select,
textarea {
  min-height: 2.75rem; /* 44px - better touch target */
  padding: 0.625rem 0.75rem; /* py-2.5 px-3 equivalent */
}
.dark .form-control{
  --tw-border-opacity: 1;
  border-color: rgb(51 64 77 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark .form-control::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.dark .form-control::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
@media (prefers-color-scheme: dark) {
  
  a.dark .form-control {
    color: inherit;
  }
}
/* ===== Class-based Dark Mode for Form Inputs ===== */
/* Works with Tailwind's darkMode: 'class' configuration */
/* Using !important to override browser defaults and other stylesheets */
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="text"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="month"],
.dark input[type="search"],
.dark input[type="time"],
.dark input[type="week"],
.dark select,
.dark textarea {
  background-color: var(--ed-surface-3, #292b2d) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--ed-border, #33404d) !important;
  color: var(--ed-text-primary, #f6f7f9) !important;
}
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="text"]:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: #45e760;
  box-shadow: 0 0 0 3px rgba(69, 231, 96, 0.2);
}
.dark input::-moz-placeholder, .dark textarea::-moz-placeholder {
  color: var(--ed-text-tertiary, #818a94) !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--ed-text-tertiary, #818a94) !important;
}
/* Composer chat textarea — escapes the global `.dark textarea` styling so it
   can blend transparently into its parent composer card. The global rule
   above uses !important + (0,1,1) specificity (class `.dark` + element
   `textarea`); to beat it we need at least (0,2,1). Selector below scores
   (0,2,1): class `.dark` + attribute `[data-chat-form-target]` + element
   `textarea`. Plain `[data-attr]` alone is (0,1,0) and LOSES even with
   !important. Triggered by `data-chat-form-target="textarea"` which is
   already on both desktop and mobile chat inputs (see _chat_form.html.erb).
   Light-mode pair: also reset border under the same selector minus `.dark`. */
textarea[data-chat-form-target="textarea"],
.dark textarea[data-chat-form-target="textarea"] {
  background-color: transparent !important;
  border-color: transparent !important;
}
.textarea-control{
  min-height: 112px;
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
.textarea-control::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.textarea-control::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.textarea-control{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
[data-controller="mobile-navigation"] button.textarea-control {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
[data-theme] section.textarea-control { padding: 120px 0; }
[data-theme] section.textarea-control.tight { padding: 80px 0; }
@media (max-width: 720px) {

  [data-theme] section.textarea-control { padding: 64px 0; }
  [data-theme] section.textarea-control.tight { padding: 48px 0; }
}
.textarea-control:focus{
  border-color: transparent;
  --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-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
}
.dark .textarea-control{
  --tw-border-opacity: 1;
  border-color: rgb(51 64 77 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark .textarea-control::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.dark .textarea-control::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
@media (prefers-color-scheme: dark) {
  
  a.dark .textarea-control {
    color: inherit;
  }
  .textarea-control {
    background-color: #292b2d; /* surface-lv2 dark */
    border-color: #33404d; /* gray-600 / stroke-secondary dark */
    color: #f6f7f9; /* gray-50 / text-primary dark */
  }

  .textarea-control:focus {
    border-color: #45e760;
    box-shadow: 0 0 0 3px rgba(69, 231, 96, 0.25);
  }
}
.select-control{
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
.select-control::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.select-control::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.select-control{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
[data-controller="mobile-navigation"] button.select-control {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
[data-theme] section.select-control { padding: 120px 0; }
[data-theme] section.select-control.tight { padding: 80px 0; }
@media (max-width: 720px) {

  [data-theme] section.select-control { padding: 64px 0; }
  [data-theme] section.select-control.tight { padding: 48px 0; }
}
.select-control:focus{
  border-color: transparent;
  --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-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
}
.dark .select-control{
  --tw-border-opacity: 1;
  border-color: rgb(51 64 77 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark .select-control::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.dark .select-control::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
@media (prefers-color-scheme: dark) {
  
  a.dark .select-control {
    color: inherit;
  }
  .select-control {
    background-color: #292b2d; /* surface-lv2 dark */
    border-color: #33404d; /* gray-600 / stroke-secondary dark */
    color: #f6f7f9; /* gray-50 / text-primary dark */
  }

  .select-control:focus {
    border-color: #45e760;
    box-shadow: 0 0 0 3px rgba(69, 231, 96, 0.25);
  }
}
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    /* --- Surfaces --- */
    --surface-default: #1b1c1d;
    --surface-lv1: #202123;
    --surface-lv2: #292b2d;
    --surface-lv3: #303335;
    --surface-dark: #001021;
    --modal-default: #001021;
    --modal-lv1: #001d39;
    --overlay-default: #001d39;
    --overlay-hover: #001021;
    --overlay-active: #33404d;
    --overlay-active-hover: #33404d;

    /* --- Text --- */
    --text-primary: #f6f7f9;
    --text-primary-fixed: #001021;
    --text-secondary: #d0d2d4;
    --text-tertiary: #818a94;
    --text-light: #001021;
    --text-disabled: #33404d;

    /* --- Icons --- */
    --icon-primary: #f6f7f9;
    --icon-secondary: #d0d2d4;
    --icon-tertiary: #b3b9c0;
    --icon-white: #001021;
    --icon-disabled: #545f6a;

    /* --- Strokes --- */
    --stroke-primary: #2e2e2e;
    --stroke-secondary: #33404d;
    --stroke-tertiary: #818a94;
    --stroke-white: #001021;

    /* --- State: Fade --- */
    --fade-dark: #e6e8ea;
    --fade-base: #b3b9c0;
    --fade-light: #0011211e;
    --fade-lighter: #00112114;

    /* --- State: Primary (Green) --- */
    --state-primary-dark: #6bec81;
    --state-primary-base: #45e760;
    --state-primary-light: #2994ff4c;
    --state-primary-lighter: #2994ff33;

    /* --- State: Info (Purple) --- */
    --state-info-dark: #925bd9;
    --state-info-base: #6c2ebc;
    --state-info-light: #6c2ebc4c;
    --state-info-lighter: #6c2ebc33;

    /* --- State: Pending --- */
    --state-pending-dark: #ffd370;
    --state-pending-base: #ffc84c;
    --state-pending-light: #ffc84c4c;
    --state-pending-lighter: #ffc84c33;

    /* --- State: Error --- */
    --state-error-dark: #e56933;
    --state-error-base: #de4400;
    --state-error-light: #ff692e4c;
    --state-error-lighter: #ff692e33;

    /* --- State: Magenta --- */
    --state-magenta-dark: #dd33c9;
    --state-magenta-base: #d500bb;
    --state-magenta-light: #d500bb4c;
    --state-magenta-lighter: #d500bb33;

    /* --- State: Success --- */
    --state-success-dark: #dd33c9;
    --state-success-base: #d500bb;
    --state-success-light: #6c2ebc4c;
    --state-success-lighter: #6c2ebc33;

    /* --- Primary Green (stays same in dark mode) --- */
    --primary-500: #45e760; /* Logo color unchanged */
    --primary-600: #45e760;
  }

  /* ===== BulletTrain Button Dark Mode Fix ===== */
  /* Override button text color for better contrast on green mint background */
  .button,
  .button.full,
  input[type="submit"].button,
  button.button {
    color: #25282d !important; /* AXIO: softer dark text on green buttons */
    font-weight: 600;
  }

  .button:hover,
  .button.full:hover {
    color: #25282d !important; /* AXIO: softer dark text */
  }

  /* ===== Custom btn-primary Dark Mode ===== */
  .btn-primary {
    background: linear-gradient(135deg, #45e760 0%, #30a444 100%); /* Green gradient for dark mode */
    color: #052e16 !important; /* Dark text for WCAG AA contrast */
    box-shadow: none;
  }

  .btn-primary:hover {
    background: #7FED69 !important;
    filter: none;
    box-shadow: none;
  }

  /* ===== Link Colors Dark Mode Fix ===== */
  /* Override default link color for dark mode - more aggressive targeting */
  a {
    color: #6bec81 !important; /* primary-400: Vibrant green for dark backgrounds */
  }

  a:hover {
    color: #82ef94 !important; /* primary-300: Lighter green on hover */
  }

  /* Preserve button link colors (white text on dark bg) */
  .button a,
  .button-secondary a,
  a.button,
  a.button-secondary,
  a[class*="btn-"],
  a[class*="bg-primary"],
  a.text-white,
  a[class*="inline-flex"][class*="bg-"],
  a[class*="inline-flex"][class*="border-"] {
    color: inherit !important;
  }

  /* ===== BulletTrain Form Help Links ===== */
  /* Help text links (Don't have account, Forgot password, etc.) */
  .help a,
  [class*="help"] a,
  .field-help a,
  p.text-slate-500 a,
  p.text-slate-400 a,
  .text-slate-500 a,
  .text-slate-400 a,
  .text-xs a {
    color: #6bec81 !important; /* primary-400 */
  }

  .help a:hover,
  [class*="help"] a:hover,
  .field-help a:hover,
  p.text-slate-500 a:hover,
  p.text-slate-400 a:hover,
  .text-slate-500 a:hover,
  .text-slate-400 a:hover,
  .text-xs a:hover {
    color: #82ef94 !important; /* primary-300 */
    text-decoration: underline;
  }

  /* ===== Divider/Separator Colors ===== */
  .divider,
  [class*="divider"],
  hr {
    border-color: #33404d; /* gray-600 / stroke-secondary dark */
  }

  .divider span,
  [class*="divider"] span {
    color: #d0d2d4; /* gray-200 */
    background-color: #202123; /* surface-lv1 dark */
  }

  /* Decision line "OR" text - override lime color */
  .decision-line span,
  [class*="decision"] span,
  .text-lime-500,
  .text-lime-600,
  .text-primary-500,
  .text-primary-600 {
    color: #6bec81 !important; /* primary-400 */
  }

  /* ===== Pill/Badge Dark Mode ===== */
  .pill-brand {
    color: #25282d; /* AXIO: softer dark text on light green */
  }

  /* ===== Form Control Dark Mode Enhancements ===== */
  .form-control,
  input[type="email"],
  input[type="password"],
  input[type="text"],
  select,
  textarea {
    background-color: #292b2d; /* surface-lv2 dark */
    border-color: #33404d; /* gray-600 / stroke-secondary dark */
    color: #f6f7f9; /* gray-50 / text-primary dark */
  }

  .form-control:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="text"]:focus {
    border-color: #45e760;
    box-shadow: 0 0 0 3px rgba(69, 231, 96, 0.25);
  }

  /* ===== Alert/Notice Box Dark Mode ===== */
  /* BulletTrain alert boxes - softer red for dark mode */
  .bg-red-100,
  .bg-red-900,
  [class*="bg-red-100"],
  [class*="bg-red-900"] {
    background-color: rgba(153, 27, 27, 0.25) !important; /* Muted dark red */
  }

  .border-red-200,
  .border-red-700,
  [class*="border-red"] {
    border-color: rgba(185, 28, 28, 0.5) !important; /* Softer red border */
  }

  .text-red-900,
  .text-red-100,
  [class*="text-red-900"],
  [class*="text-red-100"] {
    color: #fca5a5 !important; /* Soft pink-red text for readability */
  }

  .flash-notice,
  .notice,
  .bg-amber-100 {
    background-color: rgba(69, 231, 96, 0.15) !important;
    border-color: #45e760 !important; /* primary-600 */
  }

  .text-amber-800 {
    color: #6bec81 !important; /* primary-400 */
  }
}
/* ===================================================
   GLOBAL UTILITY CLASSES (Non-Editor Surfaces)
   Feb 2026 - AXIO design system rollout
   =================================================== */
/* --- Semantic Input Classes --- */
/* Replace inline dark mode overrides with semantic classes */
.input-default {
  background-color: var(--input-bg);
  border-width: 1px;
  border-style: solid;
  border-color: var(--input-border);
  color: var(--input-text);
  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.625rem 0.75rem; /* py-2.5 px-3 */
  min-height: 2.75rem; /* 44px touch target */
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-default::-moz-placeholder {
  color: var(--input-placeholder);
}
.input-default::placeholder {
  color: var(--input-placeholder);
}
.input-default:hover {
  background-color: var(--input-bg-hover);
  border-color: var(--input-border-hover);
}
.input-default:focus {
  outline: none;
  background-color: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(69, 231, 96, 0.15);
}
.input-default:disabled {
  background-color: var(--input-bg-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
/* --- Semantic Card Classes --- */
/* Consistent card styling across dashboard, apps, settings */
.card-base {
  background-color: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 0.75rem; /* rounded-xl */
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-base-hover {
  background-color: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.card-base-hover:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}
/* --- Semantic Button Classes (Secondary/Ghost) --- */
/* Primary button already defined earlier in file */
.btn-secondary-semantic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background-color: var(--button-secondary-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.btn-secondary-semantic:hover {
  background-color: var(--button-secondary-hover);
  border-color: var(--border-emphasis);
}
.btn-secondary-semantic:active {
  background-color: var(--button-secondary-active);
}
.btn-secondary-semantic:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-ghost-semantic{
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--text-secondary);
  background-color: transparent;
}
.btn-ghost-semantic:hover {
  background-color: var(--button-ghost-hover);
  color: var(--text-primary);
}
/* --- Status Badge Classes --- */
/* Semantic state badges (success, error, warning, info) */
.badge-success {
  background-color: var(--state-success-lighter);
  color: var(--state-success-dark);
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .badge-success a {
    color: #6bec81; /* primary-400 */
  }

  .badge-success a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
.badge-error {
  background-color: var(--state-error-lighter);
  color: var(--state-error-dark);
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .badge-error a {
    color: #6bec81; /* primary-400 */
  }

  .badge-error a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
.badge-warning {
  background-color: var(--state-pending-lighter);
  color: var(--state-pending-dark);
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .badge-warning a {
    color: #6bec81; /* primary-400 */
  }

  .badge-warning a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
.badge-info {
  background-color: var(--state-info-lighter);
  color: var(--state-info-dark);
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .badge-info a {
    color: #6bec81; /* primary-400 */
  }

  .badge-info a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
/* --- Divider/Separator Classes --- */
.divider-default {
  border-top: 1px solid var(--border-default);
}
.divider-subtle {
  border-top: 1px solid var(--border-subtle);
}
/* Section separator with gradient fade effect */
.section-separator {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
  opacity: 0.6;
}
/* Centered dot separator variant */
.section-separator-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.section-separator-dot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
  opacity: 0.4;
}
.section-separator-dot::after {
  content: '';
  position: relative;
  width: 4px;
  height: 4px;
  background-color: var(--border-default);
  border-radius: 50%;
  z-index: 1;
}
/* --- Interactive List Items (for tables, menus, etc.) --- */
.list-item-interactive {
  transition: background-color 0.15s ease;
}
.list-item-interactive:hover {
  background-color: var(--interactive-hover);
}
.list-item-interactive:active {
  background-color: var(--interactive-active);
}
/* --- Section Header Classes --- */
.section-header {
  color: var(--text-primary);
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  margin-bottom: 1rem;
}
.section-description {
  color: var(--text-secondary);
  font-size: 0.875rem; /* text-sm */
  margin-bottom: 1.5rem;
}
/* --- Modal/Dialog Classes --- */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-panel {
  background-color: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* --- Table Classes --- */
.table-header {
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
}
.table-row {
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.15s ease;
}
.table-row:hover {
  background-color: var(--interactive-hover);
}
.table-cell {
  color: var(--text-primary);
  padding: 1rem;
}
/* --- Navigation Classes --- */
.nav-item {
  color: var(--text-secondary);
  transition: color 0.15s ease, background-color 0.15s ease;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}
.nav-item:hover {
  color: var(--text-primary);
  background-color: var(--interactive-hover);
}
.nav-item-active {
  color: var(--text-primary);
  background-color: var(--interactive-active);
  font-weight: 600;
}
/* --- Focus Visible (Keyboard Navigation) --- */
/* Better keyboard focus rings using semantic tokens */
*:focus-visible {
  outline: 2px solid var(--interactive-focus);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--interactive-focus);
  outline-offset: 2px;
}
/* ===================================================
   AUTH PAGES — Dark Charcoal Design System
   Matches landing page aesthetic (#050505 to #0A0A0A)
   =================================================== */
/* --- Auth Card Container --- */
.auth-card {
  background-color: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2rem 2.5rem 2.5rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.2);
}
/* --- Auth Beta Badge --- */
.auth-beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #45e760;
  background-color: rgba(69, 231, 96, 0.08);
  border: 1px solid rgba(69, 231, 96, 0.2);
}
/* --- Auth Divider Line --- */
.auth-divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent);
}
/* --- Auth Primary CTA Button --- */
.auth-btn-primary {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  color: #052e16 !important;
  background-color: #45e760;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.auth-btn-primary:hover {
  background-color: #7FED69;
  box-shadow: none;
  transform: none;
}
.auth-btn-primary:active {
  transform: translateY(0);
  background-color: #7FED69;
}
.auth-btn-primary:focus-visible {
  outline: 2px solid #45e760;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(69, 231, 96, 0.2);
}
/* --- Auth Card Submit Buttons (override BulletTrain .button.full) --- */
.auth-card input[type="submit"],
.auth-card button[type="submit"],
.auth-card .button.full {
  color: #052e16 !important;
  background-color: #45e760 !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}
.auth-card input[type="submit"]:hover,
.auth-card button[type="submit"]:hover,
.auth-card .button.full:hover {
  background-color: #7FED69 !important;
  box-shadow: none !important;
  color: #052e16 !important;
}
/* --- Global: Dark text on solid mid-shade primary buttons (WCAG AA) ---
   FIXED Apr 2026: Was [class*="bg-primary"] which matched EVERYTHING — including
   `bg-primary-500/20` (20% opacity overlay backgrounds where the underlying page
   color shows through and dark text becomes invisible) and `bg-primary-700/800/900`
   (dark shades that already need LIGHT text). Now scoped to specific solid mid
   shades where #052e16 dark text is actually the right WCAG-AA pairing. */
.bg-primary-400,
.bg-primary-500,
.bg-primary-600,
[style*="background: #45e760"],
[style*="background-color: #45e760"] {
  color: #052e16 !important;
}
/* --- Auth Social/OAuth Icon Buttons (3-col row, logo only) --- */
.auth-social-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 3.5rem !important;
  border-radius: 12px !important;
  background-color: #1a1a1a !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  color: inherit !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.auth-social-icon-btn:hover {
  background-color: #252525 !important;
  background: #252525 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.auth-social-icon-btn:focus-visible {
  outline: 2px solid #45e760;
  outline-offset: 2px;
}
/* --- Auth Social/OAuth Buttons (legacy full-width) --- */
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #d1d5db !important;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.auth-social-btn:hover {
  background-color: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e5e7eb !important;
}
.auth-social-btn:focus-visible {
  outline: 2px solid #45e760;
  outline-offset: 2px;
}
/* --- Auth Links (green accent) --- */
.auth-link {
  color: #45e760 !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
.auth-link:hover {
  color: #7FED69 !important;
  text-decoration: underline;
}
/* --- Auth Form Input Overrides (within .auth-card) --- */
/* Override the global .dark input styles for auth-specific darker surfaces */
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  background-color: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  color: #f3f4f6 !important;
  padding: 0.75rem 0.875rem !important;
  min-height: 2.875rem !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
.auth-card input[type="email"]::-moz-placeholder, .auth-card input[type="password"]::-moz-placeholder, .auth-card input[type="text"]::-moz-placeholder {
  color: #6b7280 !important;
}
.auth-card input[type="email"]::placeholder,
.auth-card input[type="password"]::placeholder,
.auth-card input[type="text"]::placeholder {
  color: #6b7280 !important;
}
.auth-card input[type="email"]:hover,
.auth-card input[type="password"]:hover,
.auth-card input[type="text"]:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="text"]:focus {
  border-color: #45e760 !important;
  box-shadow: 0 0 0 3px rgba(69, 231, 96, 0.15) !important;
  outline: none !important;
  background-color: #0a0a0a !important;
}
/* --- Auth Labels --- */
.auth-card label {
  color: #d1d5db !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
/* --- BulletTrain Field Help Text within Auth Card --- */
.auth-card .help,
.auth-card [class*="help"],
.auth-card p.text-slate-500,
.auth-card p.text-slate-400 {
  color: #6b7280 !important;
}
.auth-card .help a,
.auth-card [class*="help"] a,
.auth-card p.text-slate-500 a,
.auth-card p.text-slate-400 a {
  color: #45e760 !important;
}
.auth-card .help a:hover,
.auth-card [class*="help"] a:hover {
  color: #7FED69 !important;
  text-decoration: underline;
}
/* --- Auth Checkbox (Remember me) --- */
/* .auth-checkbox-dark added to element in _option.html.erb to win specificity */
input.auth-checkbox-dark,
input.auth-checkbox-dark[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-height: auto !important;
  border-radius: 5px !important;
  border: 2px solid rgba(255, 255, 255, 0.22) !important;
  background-color: #111315 !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
       appearance: none !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
input.auth-checkbox-dark:checked,
input.auth-checkbox-dark[type="checkbox"]:checked {
  background-color: #45e760 !important;
  border-color: #45e760 !important;
  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") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
input.auth-checkbox-dark:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
}
input.auth-checkbox-dark:focus-visible {
  outline: 2px solid #45e760;
  outline-offset: 2px;
}
/* --- Auth Password Toggle (eye icon) --- */
.auth-card [data-action*="password"] button,
.auth-card .password-toggle,
.auth-card button[aria-label*="password"],
.auth-card button[aria-label*="Password"] {
  color: #6b7280 !important;
  min-width: 2.5rem;
  min-height: 2.5rem;
}
.auth-card [data-action*="password"] button:hover,
.auth-card .password-toggle:hover {
  color: #d1d5db !important;
}
/* --- Auth Resend Confirmation Link --- */
.auth-card .text-blue-600,
.auth-card .text-blue-400 {
  color: #45e760 !important;
}
.auth-card .text-blue-600:hover,
.auth-card .text-blue-400:hover {
  color: #7FED69 !important;
}
/* --- Auth Error/Notice Messages --- */
.auth-card .bg-red-100,
.auth-card [class*="bg-red"] {
  background-color: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  border-radius: 10px;
}
.auth-card .text-red-900,
.auth-card .text-red-600,
.auth-card [class*="text-red"] {
  color: #fca5a5 !important;
}
/* --- Auth Flash Notices --- */
.devise_layout .flash-notice,
.devise_layout .notice {
  background-color: rgba(69, 231, 96, 0.1) !important;
  border: 1px solid rgba(69, 231, 96, 0.25) !important;
  border-radius: 10px;
  color: #7FED69 !important;
}
/* ===== Homepage Generator Input — Preserve transparent background =====
   The .dark textarea rule overrides bg-transparent with !important.
   This undoes that for the homepage prompt input specifically. */
.dark #custom-prompt,
#custom-prompt {
  background-color: transparent !important;
  color: #ffffff !important;
}
/* ===== Global smooth-scroll for anchor navigation (Apr 2026) =====
   Eliminates the jarring scroll-snap users saw after sign-in: Devise
   redirect → home page → browser restored a previous `#apps` history
   hash → instant snap-scroll to the apps section. Smooth behavior makes
   any anchor jump (TOC links, section nav, history-restored hashes) ease
   instead of teleporting. Respects prefers-reduced-motion for a11y. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* ===== Color Swatch — auto-rendered hex codes in chat (Apr 2026) =====
   Replaces inline `#0a0a14`-style hex codes the LLM emits with a small
   colored square. The hex itself is sr-only (still announced by screen
   readers and available to text-extraction) and shown via tooltip on
   hover via the title attribute.
   Wired up by app/javascript/controllers/color_swatch_controller.js.
   See: docs/ultrathink/ chat color swatches (issue #62) */
.color-swatch {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 3px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  vertical-align: -0.15em;
  margin: 0 0.2em;
  cursor: help;
  /* Subtle inner ring helps very-light swatches stand out against light bg */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dark .color-swatch {
  border-color: var(--editor-border, rgba(255, 255, 255, 0.15));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
/* Dashboard subnav: active item icon is green to match the May 2026 design.
   The button gets `bg-editor-surface-2` when active (set by both the ERB
   template's initial state and the JS controller's class swap on click),
   so we color its child icon via that hook. Keeping this in CSS instead
   of the Stimulus controller means the styling stays in sync with the
   button class regardless of how the active state was applied (template
   render vs JS toggle vs external `dashboard:switch-view` event). */
button[data-dashboard-nav].bg-editor-surface-2 > i {
  color: var(--ed-accent-green);
}
/* Import mobile editor styles */
/* Mobile Editor Specific Styles */
/* Mobile modal (bottom sheet) styles */
.mobile-modal {
  max-height: 90vh;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-modal.active {
  transform: translateY(0);
}
/* Adjust main content for mobile bottom navigation */
body.mobile-editor {
  padding-bottom: 64px; /* Height of bottom nav */
}
/* Mobile-specific chat panel adjustments */
@media (max-width: 1023px) {
  /* Full screen chat panel on mobile */
  [data-mobile-navigation-target="chatPanel"] {
    position: fixed;
    top: 3.5rem; /* Height of top header */
    bottom: 4rem; /* Height of bottom nav */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 20;
  }
  
  /* Ensure preview takes full space */
  [data-mobile-navigation-target="previewPanel"] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  /* Preview controls positioning */
  [data-mobile-navigation-target="previewControls"] {
    top: 3.5rem; /* Below header */
  }
  
  /* Hide desktop-specific elements */
  .lg\\:flex:not([data-mobile-navigation-target]) {
    display: none !important;
  }
}
/* Bottom navigation styling */
[data-controller="mobile-navigation"] {
  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1);
}
/* Active tab styling for mobile */
[data-controller="mobile-navigation"] button.bg-white {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
/* Preview control overlay style */
[data-mobile-navigation-target="previewControls"][class*="backdrop-blur"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Smooth transitions for panel switching */
[data-mobile-navigation-target$="Panel"] {
  transition: opacity 0.2s ease-in-out;
}
/* Mobile dropdown styling */
.mobile-dropdown {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-dropdown.active {
  transform: translateY(0);
}
/* Ensure proper z-index stacking */
/* Header */
.mobile-editor > div:first-child {
    z-index: 30;
  }
/* Bottom nav */
.mobile-editor [data-controller="mobile-navigation"] {
    z-index: 40;
  }
/* Modals */
.mobile-editor .mobile-modal {
    z-index: 60;
  }
/* Mobile modal positioning fix */
.mobile-modal {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  display: flex !important;
  align-items: flex-end !important;
}
/* Touch-friendly button sizing */
@media (max-width: 1023px) {
  [data-controller="mobile-navigation"] button {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Version history mobile improvements */
  .modal-content-mobile .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Better scroll indicator for version list */
  .modal-content-mobile [data-version-history-target="content"] {
    position: relative;
  }
  
  .modal-content-mobile [data-version-history-target="content"]::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to top, rgba(249, 250, 251, 0.9), transparent);
    pointer-events: none;
    z-index: 10;
  }
  
  .dark .modal-content-mobile [data-version-history-target="content"]::after {
    background: linear-gradient(to top, rgba(17, 24, 39, 0.9), transparent);
  }
}
/* Mobile-responsive modals */
@media (max-width: 1023px) {
  /* Standard modal container adjustments */
  .modal-mobile-responsive {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  
  /* Modal content slides up from bottom */
  .modal-mobile-responsive > div > div:last-child,
  .modal-content-mobile {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    max-height: 85vh !important;
    margin: 0 !important;
    animation: slideUp 0.3s ease-out;
    padding-bottom: env(safe-area-inset-bottom) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Ensure only top header is rounded on mobile sheets */
  .modal-content-mobile > div:first-child {
    border-radius: 1.5rem 1.5rem 0 0 !important;
    overflow: hidden !important;
  }
  
  /* Keep header layout intact - don't center close button */
  .modal-content-mobile > div:first-child .flex {
    justify-content: space-between !important;
  }
  
  /* Modal footer styling - no rounded corners, with background */
  .modal-content-mobile > div:last-child,
  .modal-content-mobile .bg-gray-50,
  .modal-content-mobile .px-6.py-4.border-t,
  .modal-content-mobile .px-6.py-4 {
    border-radius: 0 !important;
    background-color: rgb(249 250 251) !important; /* bg-gray-50 */
  }
  
  /* Dark mode modal footer */
  .dark .modal-content-mobile > div:last-child,
  .dark .modal-content-mobile .bg-gray-50,
  .dark .modal-content-mobile .px-6.py-4.border-t,
  .dark .modal-content-mobile .px-6.py-4 {
    background-color: rgb(17 24 39) !important; /* bg-gray-900 */
  }
  
  /* Ensure modal content area is scrollable */
  .modal-content-mobile > div:last-child {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Animation for modal slide up */
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  /* Ensure backdrop covers full screen */
  .modal-mobile-responsive > div:first-child {
    position: fixed !important;
    inset: 0 !important;
  }
}
/* Design system v2 (May 2026 handoff). Inert until a layout sets
   data-theme="dark|light" on <html>. See app/assets/stylesheets/design_system/
   for the source of truth. */
/* ==========================================================================
   OverSkill Design System v2 — entry point
   --------------------------------------------------------------------------
   Phase 0: tokens + typography only. Components added in Phase 1+.

   IMPORTANT — opt-in model:
     The design system is INERT until a layout sets `data-theme="dark"` or
     `data-theme="light"` on <html>. Loading this stylesheet globally is
     therefore safe — semantic tokens, the body reset, and element defaults
     all gate on `[data-theme]`. The only things that apply unconditionally
     are brand-invariant tokens (--brand, --space-*, --radius-*) and type
     utility classes (.text-display-lg, .grifter, .mono) which need to be
     usable from any partial regardless of opt-in.

   Authoring rules — see handoff_design_system/00-START-HERE.md:
     - Tokens, not literals (no hex/px/rem in components — always var(--...))
     - 7px is the default radius (--radius-sm)
     - Three font families only: Grifter, Work Sans, JetBrains Mono
     - Body weight is 500 (intentional)
   ========================================================================== */
/* ==========================================================================
   OverSkill Design System — Tokens
   --------------------------------------------------------------------------
   Drop this file into app/assets/stylesheets/design_system/_tokens.css and
   @import it from design_system.css FIRST, before any other rule.

   Theme is set by `data-theme="dark" | "light"` on <html>.
   Dark is the default. Both themes redefine SEMANTIC tokens only — raw
   scales (--brand, --surge-*, etc.) do NOT change between themes.

   ──────────────────────────────────────────────────────────────────────────
   Token tiers:
     1. Brand        — theme-invariant identity (--brand-*)
     2. Primitive    — raw color/space scales (--gray-*, --space-*)
     3. Semantic     — what the UI references (--bg, --fg, --line, --accent)
     4. Component    — derived per component (--composer-shadow, --btn-*)
   Components MUST consume semantic tokens, never primitives or hexes.
   ========================================================================== */
/* ---------------------------------------------------------------------------
   1. BRAND (theme-invariant)
   --------------------------------------------------------------------------- */
:root {
  --brand:        #45E760;   /* OverSkill green — never derived, never themed */
  --brand-fg:     #0a0e0a;   /* near-black — always paired with --brand bg */

  /* Type families */
  --font-display: "Grifter", system-ui, sans-serif;
  --font-body:    "Work Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Radii — 7px is the OverSkill signature radius */
  --radius-xs:   4px;
  --radius-sm:   7px;     /* default — buttons, chips, icon-buttons, nav links */
  --radius-md:   10px;    /* small cards, inputs */
  --radius-lg:   14px;    /* cards, composer, matrix tiles */
  --radius-xl:   18px;    /* modals */
  --radius-pill: 999px;

  /* Spacing — 4px grid + half-steps where required */
  --space-0:   0;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;

  /* Container */
  --container-max:       1240px;
  --container-max-wide:  1440px;
  --container-pad:       32px;
  --container-pad-mobile: 20px;

  /* Section rhythm */
  --section-pad:       120px;
  --section-pad-tight: 80px;
  --section-pad-mobile: 64px;

  /* Motion */
  --t-fast:    0.10s;
  --t-base:    0.15s;
  --t-slow:    0.20s;
  /* Theme swap is now driven by either the View Transitions API or the
     `.theme-changing` transition-flush trick in design_theme_controller.js,
     both of which make the swap visually instant. This value is kept short
     for the few legacy code paths still applying it directly. */
  --t-theme:   0.12s;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Z-index scale */
  --z-base:     0;
  --z-sticky:   50;
  --z-dropdown: 100;
  --z-modal:    1000;
  --z-tooltip:  1500;
  --z-toast:    2000;
}
/* ---------------------------------------------------------------------------
   2. SEMANTIC TOKENS — DARK THEME (default when data-theme="dark")
   Scoped to [data-theme="dark"] only — the bare :root selector from the
   handoff is intentionally omitted so loading this file globally does NOT
   override semantic tokens on legacy BulletTrain layouts. Layouts opt in
   to the design system by setting data-theme on <html>.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Accent (CTAs, focus, active states) */
  --accent:        #45E760;
  --accent-2:      #2ec84a;
  --accent-fg:     #0a0e0a;
  --accent-text:   #45E760;   /* same hue, used as text/icon color on dark surfaces */
  --primary-hover: #84F573;

  /* Surfaces (lower number = recessed, higher = raised) */
  --bg:    #202123;   /* page canvas */
  --bg-1:  #1b1c1d;   /* nav, footer, recessed wells, code blocks */
  --bg-2:  #292b2d;   /* raised cards, composer */
  --bg-3:  #34363a;   /* hover surface, deeper raise */

  --card-bg: #292b2d;
  --code-bg: #1b1c1d;

  /* Lines */
  --line:    #2e3033;   /* default hairline */
  --line-2:  #3a3d41;   /* stronger border, button outline */

  /* Foreground */
  --fg:    #f1f2f4;     /* primary text */
  --fg-2:  #c4c6cb;     /* body text */
  --fg-3:  #8a8c92;     /* secondary, eyebrow */
  --fg-4:  #5b5e64;     /* tertiary, captions, placeholder */

  /* Hover states */
  --hover-bg:        #34363a;
  --hover-bg-strong: #41444a;
  --hover-border:    #54585f;

  /* Decorative */
  --hero-grid:     rgba(255,255,255,0.035);
  --chip-bg:       rgba(255,255,255,0.04);
  --chip-bg-hover: rgba(255,255,255,0.08);

  /* Status (semantic) */
  --success-fg: #45E760;
  --success-bg: rgba(69,231,96,0.10);
  --danger-fg:  #ff7a7a;
  --danger-bg:  rgba(255,92,92,0.10);
  --warning-fg: #f5c245;
  --warning-bg: rgba(245,194,69,0.10);
  --info-fg:    #67b8ff;
  --info-bg:    rgba(103,184,255,0.10);

  /* Shadows (dark theme uses contrast, not elevation — keep subtle) */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.30);
  --shadow:        0 4px 14px rgba(0,0,0,0.45);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.50);
  --shadow-lg:     0 16px 40px rgba(0,0,0,0.55);
  --shadow-xl:     0 30px 60px -30px rgba(0,0,0,0.60);

  /* Component-derived */
  --composer-shadow:
    0 1px 0 0 rgba(255,255,255,0.02) inset,
    0 30px 60px -30px rgba(0,0,0,0.50);
  --composer-focus-shadow:
    0 0 0 1px var(--accent),
    0 30px 60px -30px rgba(0,0,0,0.50);
  --focus-ring:
    0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* ---------------------------------------------------------------------------
   3. SEMANTIC TOKENS — LIGHT THEME
   --------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  /* Accent */
  --accent:        #45E760;
  --accent-2:      #2ec84a;
  --accent-fg:     #0a0e0a;
  --accent-text:   #1a8730;   /* ⚠ darkened for WCAG AA on light bg */
  --primary-hover: #8CE746;

  /* Surfaces */
  --bg:    #f5f6f7;
  --bg-1:  #eef0f2;
  --bg-2:  #fafbfc;
  --bg-3:  #e4e7ea;

  --card-bg: #fafbfc;
  --code-bg: #eef0f2;

  /* Lines */
  --line:    #dde1e5;
  --line-2:  #ccd2d8;

  /* Foreground */
  --fg:    #0b1220;
  --fg-2:  #2c3340;
  --fg-3:  #6b7280;
  --fg-4:  #9aa1ac;

  /* Hover */
  --hover-bg:        #e4e7ea;
  --hover-bg-strong: #d6dbdf;
  --hover-border:    #b1b8bf;

  /* Decorative */
  --hero-grid:     rgba(0,0,0,0.045);
  --chip-bg:       #fafbfc;
  --chip-bg-hover: #eef0f2;

  /* Status */
  --success-fg: #1a8730;
  --success-bg: rgba(69,231,96,0.12);
  --danger-fg:  #c4252b;
  --danger-bg:  rgba(196,37,43,0.08);
  --warning-fg: #b27300;
  --warning-bg: rgba(245,194,69,0.18);
  --info-fg:    #0e6dd0;
  --info-bg:    rgba(14,109,208,0.08);

  /* Shadows (light theme can use subtle elevation) */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.05);
  --shadow:        0 4px 12px rgba(15,23,42,0.06);
  --shadow-md:     0 8px 20px rgba(15,23,42,0.08);
  --shadow-lg:     0 16px 40px rgba(15,23,42,0.10);
  --shadow-xl:     0 24px 48px rgba(15,23,42,0.12);

  /* Component-derived */
  --composer-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 16px 40px -16px rgba(0,0,0,0.10);
  --composer-focus-shadow:
    0 0 0 1px var(--accent),
    0 16px 40px -16px rgba(0,0,0,0.10);
  --focus-ring:
    0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* ---------------------------------------------------------------------------
   4. RESET / ELEMENT DEFAULTS
   Scoped to design-system opt-in (`<html data-theme="...">`) so we don't
   fight with BulletTrain's own resets on legacy pages. We wrap the scope
   in :where() so it contributes ZERO specificity — otherwise rules like
   `[data-theme] button {...}` would beat single-class component selectors
   like `.btn-primary` and silently break theming.
   --------------------------------------------------------------------------- */
:where([data-theme]) *,
:where([data-theme]) *::before,
:where([data-theme]) *::after { box-sizing: border-box; }
:where([data-theme]) body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-theme) ease, color var(--t-theme) ease;
}
:where([data-theme]) ::-moz-selection { background: var(--accent); color: var(--accent-fg); }
:where([data-theme]) ::selection { background: var(--accent); color: var(--accent-fg); }
:where([data-theme]) a { color: inherit; }
:where([data-theme]) button { font: inherit; color: inherit; background: transparent; border-width: 0; padding: 0; cursor: pointer; }
/*
  Why border-width: 0 instead of border: 0 (May 2026):
  ----------------------------------------------------
  The `border` shorthand zeroes ALL three border sub-properties:
    border-width: 0; border-style: none; border-color: currentColor
  That `border-style: none` would then beat Tailwind's `.border` utility
  (which only sets border-width: 1px), causing any v2 button that opts in
  to a border (suggestion card, share/publish buttons, etc.) to render
  invisibly even with the class applied.

  Switching to `border-width: 0` keeps the zero-by-default behavior but
  preserves Tailwind's preflight `border-style: solid` and `border-color`
  so `.border` "just works" on buttons under [data-theme]. Verified
  against the chat-suggestion cards (May 2026) — they no longer need an
  explicit `.border-solid` class.
*/
@media (prefers-reduced-motion: reduce) {
  :where([data-theme]) *,
  :where([data-theme]) *::before,
  :where([data-theme]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ---------------------------------------------------------------------------
   5. THEME-SWAP MOTION
   Two fixes applied by app/javascript/controllers/design_theme_controller.js
   when the user toggles dark/light:

   (a) Transition-flush — when the View Transitions API is unavailable, the
       controller adds `.theme-changing` to <html> right before flipping the
       data-theme attribute, then removes it on the next animation frame.
       Every CSS transition under the page is suppressed for that single
       paint so the ~49 component-level `transition: background var(--t-base)`
       declarations don't ripple-fade independently and produce a staggered
       "slow" feel.

   (b) View Transitions API — when supported (Chromium 111+, Safari 18+),
       the controller wraps the attribute swap in `document.startViewTransition`
       and the browser snapshots+crossfades the page in one GPU pass. The
       default ::view-transition-old/new(root) animation duration is 250ms;
       we trim it for the same "snappy swap" goal.

   `:where()` keeps specificity at zero so component-level transition
   declarations still win for hover/focus states once .theme-changing is
   removed.
   --------------------------------------------------------------------------- */
:where(html.theme-changing) *,
:where(html.theme-changing) *::before,
:where(html.theme-changing) *::after {
  transition: none !important;
}
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 120ms;
    animation-timing-function: ease-out;
  }
}
/* ==========================================================================
   OverSkill Design System — Typography
   --------------------------------------------------------------------------
   Three families. Three jobs. Don't add more.
     - Grifter Bold   (display / wordmark / hero headlines)
     - Work Sans      (body / UI / buttons / labels)
     - JetBrains Mono (eyebrows / tags / kbd / mono / code)

   Grifter is self-hosted (already in app/assets/fonts/). Work Sans + JetBrains
   Mono load from Google Fonts in _head.html.erb.
   ========================================================================== */
/* ---------------------------------------------------------------------------
   1. Grifter Bold (self-hosted) — face declaration aliased as "Grifter".
   The legacy app already ships GRIFTER-Bold.{otf,woff2} via fonts/grifter.css
   under the family name "GRIFTER" (uppercase). The design system tokens use
   `--font-display: "Grifter"` (mixed case), so we alias the same files here.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Grifter";
  src: url(/assets/GRIFTER-Bold.woff2) format("woff2"),
       url(/assets/GRIFTER-Bold.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ---------------------------------------------------------------------------
   2. Type-scale utility classes
   Body weight is 500 (not 400) — intentional, gives copy a more confident read.

   All scoped under [data-theme] so they're inert on legacy BulletTrain pages
   that don't opt in. Without this scoping, classes like .text-eyebrow that
   reference var(--fg-3) would render with empty/inherited color when
   accidentally used outside the design system.
   --------------------------------------------------------------------------- */
[data-theme] .text-display-xl { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 72px);   line-height: 0.98; letter-spacing: -0.025em; }
[data-theme] .text-display-lg { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -0.025em; }
[data-theme] .text-display-md { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 48px);   line-height: 1.05; letter-spacing: -0.025em; }
[data-theme] .text-heading-lg { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px);   line-height: 1.10; letter-spacing: -0.020em; }
[data-theme] .text-heading-md { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.20; letter-spacing: -0.020em; }
[data-theme] .text-heading-sm { font-family: var(--font-body);    font-weight: 600; font-size: 20px; line-height: 1.30; letter-spacing: -0.005em; }
[data-theme] .text-title-lg   { font-family: var(--font-body);    font-weight: 600; font-size: 18px; line-height: 1.30; letter-spacing: -0.005em; }
[data-theme] .text-title-md   { font-family: var(--font-body);    font-weight: 600; font-size: 16px; line-height: 1.40; }
[data-theme] .text-title-sm   { font-family: var(--font-body);    font-weight: 600; font-size: 14px; line-height: 1.40; }
[data-theme] .text-body-lg    { font-family: var(--font-body);    font-weight: 500; font-size: 18px; line-height: 1.50; }
[data-theme] .text-body-md    { font-family: var(--font-body);    font-weight: 500; font-size: 15px; line-height: 1.50; }
[data-theme] .text-body-sm    { font-family: var(--font-body);    font-weight: 500; font-size: 13px; line-height: 1.50; }
[data-theme] .text-eyebrow    { font-family: var(--font-mono);    font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
[data-theme] .text-eyebrow-sm { font-family: var(--font-mono);    font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
[data-theme] .text-mono       { font-family: var(--font-mono);    font-weight: 500; font-size: 12px; letter-spacing: 0.06em; color: var(--fg-3); }
[data-theme] .text-caption    { font-family: var(--font-body);    font-weight: 400; font-size: 12px; line-height: 1.50; color: var(--fg-3); }
[data-theme] .grifter { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
[data-theme] .mono    { font-family: var(--font-mono); }
/* ---------------------------------------------------------------------------
   3. Element defaults
   Apply ONLY inside a design-system root (`[data-theme]` on <html>) so we
   don't override BulletTrain typography on legacy surfaces. Wrapped in
   :where() for zero specificity — otherwise these would beat single-class
   utilities like .text-display-lg and break overrides.
   --------------------------------------------------------------------------- */
:where([data-theme]) h1, :where([data-theme]) .h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 0.4em; }
:where([data-theme]) h2, :where([data-theme]) .h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px);   line-height: 1.10; letter-spacing: -0.020em; margin: 0 0 0.5em; }
:where([data-theme]) h3, :where([data-theme]) .h3 { font-family: var(--font-body);    font-weight: 600; font-size: 20px; line-height: 1.30; margin: 0 0 0.5em; }
:where([data-theme]) h4, :where([data-theme]) .h4 { font-family: var(--font-body);    font-weight: 600; font-size: 18px; line-height: 1.30; margin: 0 0 0.5em; }
:where([data-theme]) h5, :where([data-theme]) .h5 { font-family: var(--font-body);    font-weight: 600; font-size: 16px; line-height: 1.40; margin: 0 0 0.5em; }
:where([data-theme]) p { font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.50; color: var(--fg-2); margin: 0 0 1em; }
:where([data-theme]) code,
:where([data-theme]) pre,
:where([data-theme]) kbd { font-family: var(--font-mono); font-size: 0.9em; }
/* Phase 1 — brand atomics */
/* Brand mark — green squircle + Grifter wordmark. Inline SVG so it inherits
   currentColor for theming. */
[data-theme] .brand{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--fg);
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.01em;
  transition: color var(--t-base);
}
[data-theme] .brand:hover{ color: var(--accent); text-decoration: none; }
[data-theme] .brand-mark{
  width: var(--mark-size, 28px); height: var(--mark-size, 28px);
  display: inline-flex; flex: 0 0 auto;
}
[data-theme] .brand-mark svg{ width: 100%; height: 100%; display: block; }
/* Wordmark: lowercase "overskill" is the production brand presentation
   (the source ERB writes "OverSkill" for case-preservation, but visually
   it always renders lowercase). The handoff spec was silent on case;
   we lock it to lowercase here so every consumer of the DS partial
   gets the consistent brand rendering. */
[data-theme] .brand-word{
  font-size: calc(var(--mark-size, 28px) * 0.78);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.005em;
}
/* Button — three variants × three sizes. 7px radius is the OverSkill default. */
[data-theme] .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[data-theme] .btn:active:not(:disabled){ transform: scale(0.98); }
[data-theme] .btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
[data-theme] .btn:disabled,
[data-theme] .btn[aria-disabled="true"]{ opacity: 0.5; cursor: not-allowed; }
[data-theme] .btn-block{ width: 100%; }
[data-theme] .btn-sm{ height: 32px; padding: 0 12px; font-size: 13px; }
[data-theme] .btn-md{ height: 40px; padding: 0 18px; font-size: 14px; }
[data-theme] .btn-lg{ height: 48px; padding: 0 24px; font-size: 16px; }
[data-theme] .btn-primary{ background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
[data-theme] .btn-primary:hover:not(:disabled){ background: var(--primary-hover); border-color: var(--primary-hover); }
[data-theme] .btn-ghost{ background: transparent; color: var(--fg); border-color: var(--line-2); }
[data-theme] .btn-ghost:hover:not(:disabled){ background: var(--hover-bg); border-color: var(--hover-border); }
[data-theme] .btn-link{ background: transparent; color: var(--fg-2); border-color: transparent; padding-left: 0; padding-right: 0; }
[data-theme] .btn-link:hover:not(:disabled){ color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
[data-theme] .btn-icon{ width: 1em; height: 1em; flex: 0 0 auto; }
[data-theme] .btn-spinner{
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
[data-theme] .visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Icon button — square (default) or circular. 36px (md) / 28px (sm). */
[data-theme] .icon-btn{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg-2);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
[data-theme] .icon-btn:hover{ background: var(--hover-bg); border-color: var(--hover-border); color: var(--fg); }
[data-theme] .icon-btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
[data-theme] .icon-btn:active{ transform: scale(0.96); }
[data-theme] .icon-btn[aria-pressed="true"]{ background: var(--hover-bg); color: var(--accent-text); border-color: var(--line-2); }
[data-theme] .icon-btn svg{ width: 18px; height: 18px; }
[data-theme] .icon-btn-circle{ border-radius: 50%; }
[data-theme] .icon-btn-square{ border-radius: var(--radius-sm); }
[data-theme] .icon-btn-sm{ width: 28px; height: 28px; border-radius: var(--radius-xs); }
[data-theme] .icon-btn-sm svg{ width: 14px; height: 14px; }
/* Chip — small interactive token. 7px radius (NOT pill). */
[data-theme] .chip{
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
[data-theme] .chip:hover{ background: var(--chip-bg-hover); color: var(--fg-2); }
[data-theme] .prompt-chip{
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-fast);
}
[data-theme] .prompt-chip:hover{ background: var(--chip-bg-hover); border-color: var(--hover-border); color: var(--fg); }
[data-theme] .prompt-chip:active{ transform: scale(0.98); }
[data-theme] .prompt-chip-icon{ width: 12px; height: 12px; color: var(--fg-3); }
[data-theme] .prompt-chip:hover .prompt-chip-icon{ color: var(--accent-text); }
[data-theme] .link-chip{
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--fg-2); text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
}
[data-theme] .link-chip:hover{ color: var(--fg); border-color: var(--hover-border); }
/* Eyebrow — mono-uppercase label above section headings. The .text-eyebrow
   utility in _typography.css does most of the work; this just adds the
   accent variant. */
[data-theme] .eyebrow--accent{ color: var(--accent-text); }
/* Status pill — pill-shaped, dot + label. Semantic state communication. */
[data-theme] .status-pill{
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-2);
}
[data-theme] .status-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-4); flex: 0 0 auto;
}
[data-theme] .status-pill--live    .status-dot{ background: var(--accent); animation: ds-status-pulse 2s ease-in-out infinite; }
[data-theme] .status-pill--beta    .status-dot{ background: var(--info-fg); }
[data-theme] .status-pill--warn    .status-dot{ background: var(--warning-fg); }
[data-theme] .status-pill--down    .status-dot{ background: var(--danger-fg); }
[data-theme] .status-pill--neutral .status-dot{ background: var(--fg-4); }
/* Namespaced — used to be `@keyframes pulse`, which collided with the global
   `pulse` keyframe Tailwind's `.animate-pulse` utility binds to. The DS
   variant pulses box-shadow spread (intended for the small 6px circular
   status dot where `border-radius: 50%` makes the shadow circular). When it
   leaked onto every `.animate-pulse` consumer across the app, square
   elements (e.g. the OverSkill loader `<img>` in the preview overlays) got
   a square pulsing shadow instead of Tailwind's opacity pulse. */
@keyframes ds-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%,  transparent); }
}
/* Phase 2 — layout chrome (nav + footer + container) */
/* Container — design-system wrapper that constrains content to
   --container-max with side padding.

   Named .ds-container (design-system container) instead of plain .container
   to avoid collision with the Tailwind / BulletTrain `.container` utility,
   which has different responsive breakpoints. The `ds-` prefix is reserved
   for layout primitives that would otherwise collide with framework
   utilities — components like .btn, .chip, .nav are unique enough to skip
   the prefix. */
[data-theme] .ds-container{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  width: 100%;
}
[data-theme] .ds-container-wide{ max-width: var(--container-max-wide); }
@media (max-width: 768px) {
  [data-theme] .ds-container {
    padding-left: var(--container-pad-mobile);
    padding-right: var(--container-pad-mobile);
  }
}
/* Top nav — sticky, blurs on scroll. Three slots: brand · links · actions.
   Variants: .nav--public (marketing), .nav--app (authenticated), .nav--editor
   (collapsed brand + app name + back). */
[data-theme] .nav{
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition: border-color var(--t-base), background var(--t-base);
  border-bottom: 1px solid transparent;
}
[data-theme] .nav.is-scrolled{ border-bottom-color: var(--line); }
[data-theme] .nav-inner{
  display: flex; align-items: center; gap: 32px;
  height: 64px;
}
[data-theme] .nav-links{
  display: flex; gap: 4px; flex: 1;
  margin-left: 16px;
}
[data-theme] .nav-links a{
  padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--t-base), background var(--t-base);
}
[data-theme] .nav-links a:hover,
[data-theme] .nav-links a:focus-visible{ color: var(--fg); background: var(--hover-bg); outline: none; }
[data-theme] .nav-links a.active{ color: var(--fg); background: var(--hover-bg); }
[data-theme] .nav-actions{
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
[data-theme] .nav-mobile-toggle{ display: none; }
[data-theme] .nav--editor .nav-inner{ gap: 16px; }
[data-theme] .nav--editor .nav-app-name{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  [data-theme] .nav-inner { gap: 16px; height: 56px; }
  [data-theme] .nav-links { display: none; }
  [data-theme] .nav-mobile-toggle {
    display: inline-flex;
    margin-left: auto;
    margin-right: 8px;
  }
  [data-theme] .nav-actions .btn-link { display: none; }
}
/* Mobile sheet — full-screen overlay with the same links + actions */
[data-theme] .nav-mobile-sheet{
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: var(--z-modal);
  display: none;
  flex-direction: column;
  padding: 24px;
}
[data-theme] .nav-mobile-sheet[data-open="true"]{ display: flex; }
[data-theme] .nav-mobile-sheet-header{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
}
[data-theme] .nav-mobile-sheet-links{
  display: flex; flex-direction: column; gap: 4px;
}
[data-theme] .nav-mobile-sheet-links a{
  padding: 14px 12px;
  font-size: 18px; font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
[data-theme] .nav-mobile-sheet-links a:hover{ background: var(--hover-bg); }
[data-theme] .nav-mobile-sheet-actions{
  margin-top: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 32px;
}
/* Foot — site footer with 4-col link grid + base bar. */
[data-theme] .foot{
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: 64px 0 0;
  margin-top: 120px;
}
[data-theme] .foot-cols{
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 48px;
}
[data-theme] .foot-tagline{
  color: var(--fg-3);
  font-size: 14px;
  max-width: 240px;
  margin: 12px 0 0;
}
[data-theme] .foot-col h6{
  margin: 0 0 16px;
  color: var(--fg-3);
}
[data-theme] .foot-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme] .foot-col a{
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--t-base);
}
[data-theme] .foot-col a:hover{ color: var(--fg); }
[data-theme] .foot-base{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 20px var(--container-pad);
  gap: 16px;
}
[data-theme] .foot-base-left,
[data-theme] .foot-base-right{
  display: flex;
  align-items: center;
  gap: 12px;
}
[data-theme] .foot-sep{ color: var(--fg-4); }
@media (max-width: 880px) {
  [data-theme] .foot-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  [data-theme] .foot-brand { grid-column: 1 / -1; }
  [data-theme] .foot-base { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
  [data-theme] .foot-cols { grid-template-columns: 1fr; }
  [data-theme] .foot-brand { grid-column: 1; }
}
/* Phase 3 — composer + page hero (the centerpiece) */
/* Composer — the centerpiece. The big "what do you want to build?" input
   that anchors the landing hero and the dashboard "new app" panel.

   Three contexts share the same component (hero, dashboard, editor mini),
   selectable via .composer--<context>. The :focus-within ring goes on
   the SURFACE, not the textarea — keeps the textarea visually clean. */
[data-theme] .composer{
  position: relative; /* positioned ancestor for popovers/autocomplete */
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--composer-shadow);
  transition: box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  /* No overflow:hidden — tooltips on toolbar buttons + the model-picker
     and capability-menu popovers need to render outside the composer's
     bounds. The rounded corners clip via border-radius alone, which is
     enough because no child has edge-to-edge solid backgrounds that
     would visibly bleed past the corner radius. */
}
[data-theme] .composer:focus-within{
  border-color: var(--accent);
  box-shadow: var(--composer-focus-shadow);
}
[data-theme] .composer-input-wrap{
  position: relative;
  padding: 20px 20px 8px;
}
[data-theme] .composer-input{
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg);
  resize: none;
  min-height: 88px;
  padding-right: 48px; /* leave room for the submit button */
}
[data-theme] .composer-input::-moz-placeholder{ color: var(--fg-4); }
[data-theme] .composer-input::placeholder{ color: var(--fg-4); }
[data-theme] .composer-submit{
  position: absolute; right: 16px; top: 16px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
[data-theme] .composer-submit:hover:not(:disabled){ background: var(--primary-hover); }
[data-theme] .composer-submit:active:not(:disabled){ transform: scale(0.96); }
[data-theme] .composer-submit:disabled{
  background: var(--bg-3);
  color: var(--fg-4);
  cursor: not-allowed;
}
[data-theme] .composer-submit svg{ width: 18px; height: 18px; }
/* Loading state — swap the arrow for a spinner, lock the input */
[data-theme] .composer.is-loading .composer-input{ color: var(--fg-3); cursor: wait; }
[data-theme] .composer.is-loading .composer-submit svg{ display: none; }
[data-theme] .composer.is-loading .composer-submit::before{
  content: "";
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
[data-theme] .composer-rail{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 12px;
  gap: 12px;
}
[data-theme] .composer-rail-actions{ display: flex; gap: 4px; }
[data-theme] .composer-rail-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
}
[data-theme] .composer-rail-meta strong{ color: var(--fg-2); font-weight: 600; }
[data-theme] .composer-suggestions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}
/* Editor mini variant — slimmer, denser, no max-width */
[data-theme] .composer--editor{
  max-width: none;
  border-radius: var(--radius-md);
}
[data-theme] .composer--editor .composer-input-wrap{ padding: 14px 14px 6px; }
[data-theme] .composer--editor .composer-input{ font-size: 15px; min-height: 56px; }
[data-theme] .composer--editor .composer-submit{ top: 12px; right: 12px; width: 32px; height: 32px; }
[data-theme] .composer--editor .composer-submit svg{ width: 16px; height: 16px; }
[data-theme] .composer--editor .composer-rail{ padding: 6px 10px 10px; }
@media (max-width: 540px) {
  [data-theme] .composer-input { font-size: 16px; min-height: 72px; }
  [data-theme] .composer-input-wrap { padding: 16px 16px 6px; }
  [data-theme] .composer-rail { padding: 6px 10px 10px; }
}
/* Composer extras — rich variant additions on top of base .composer in
   _composer.css. Use these when the composer needs a full toolbar (image
   upload, voice, model picker, capability menu, autocomplete) — i.e. the
   landing-page composer or anywhere reproducing the editor's rich chat
   input.

   The base .composer in _composer.css gives you the card chrome
   (background, border, focus ring, shadow). These rules add:
     - .composer-input-row           input-row slot (alternative to
                                     _composer.css's .composer-input-wrap)
     - .composer-foot                toolbar row (alternative to
                                     _composer.css's .composer-rail)
     - .composer-tools / -right      toolbar segments
     - .composer-tool                toolbar icon button
     - .composer-tool-pill           pill-shaped toolbar trigger w/ chevron
     - .send                         submit button (alternative to
                                     _composer.css's .composer-submit)
     - .composer-tip                 DOM-based tooltip (dynamic label)
     - [data-tooltip]:hover::after   CSS-only tooltip (static label)
     - .composer-popover{,-host}     upward popover container
     - .composer-autocomplete        autocomplete dropdown above textarea
     - .composer-menu*               popover menu content (model picker etc.)
     - .composer-image-preview       image upload thumbnails
     - .composer-voice-status        voice recording status text
     - [data-prompt-autocomplete-target] overrides — fight inline styles
                                     emitted by the legacy controller

   All scoped to [data-theme] so they're inert on legacy pages. */
/* ============= Composer rich layout ============= */
[data-theme] .composer-input-row {
  display: flex;
  align-items: flex-start;
  padding: 18px 18px 6px;
  gap: 12px;
}
[data-theme] .composer textarea {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  resize: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  min-height: 56px;
  padding: 0;
}
[data-theme] .composer textarea::-moz-placeholder { color: var(--fg-4); }
[data-theme] .composer textarea::placeholder { color: var(--fg-4); }
[data-theme] .composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 12px;
}
[data-theme] .composer-tools { display: flex; gap: 2px; }
[data-theme] .composer-right { display: flex; align-items: center; gap: 8px; }
[data-theme] .composer-tool {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .composer-tool:hover { color: var(--fg); background: var(--hover-bg); }
[data-theme] .composer-tool svg { width: 16px; height: 16px; }
[data-theme] .composer-tool-pill {
  width: auto !important;
  padding: 0 9px;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}
[data-theme] .composer-tool-chevron { width: 11px; height: 11px; opacity: 0.65; }
[data-theme] .send {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base), transform var(--t-fast);
}
[data-theme] .send:hover { background: var(--primary-hover); transform: translateY(-1px); }
[data-theme] .send svg { width: 14px; height: 14px; }
/* ============= Tooltips ============= */
/* CSS-only tooltip via data-tooltip="..." — used for static labels.
   Specificity (0,2,0). Pseudo-element approach beats group-hover divs
   that the legacy editor used (no extra DOM). */
[data-theme] .composer-tool[data-tooltip],
[data-theme] .send[data-tooltip] { position: relative; }
[data-theme] .composer-tool[data-tooltip]:hover::after,
[data-theme] .send[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-tooltip);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.25);
}
/* DOM-based tooltip — used when the label is dynamic (e.g. model
   selector that updates the inner span when the user picks an option).
   Visibility driven by host hover. */
[data-theme] .composer-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-tooltip);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity var(--t-base);
}
[data-theme] .composer-popover-host:hover .composer-tip { opacity: 1; }
/* Hide the tooltip when the model menu is open so it doesn't overlap the
   dropdown. :has() is widely supported now; older browsers see the
   tooltip on top of the menu — minor UX issue, not broken. */
[data-theme] .composer-popover-host:has([data-model-selector-target="menu"]:not(.hidden)) .composer-tip {
  opacity: 0;
}
/* ============= Popover menus ============= */
[data-theme] .composer-popover-host { position: relative; }
[data-theme] .composer-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: var(--card-bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow:
    0 12px 32px -12px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.06);
  overflow: hidden;
  z-index: var(--z-dropdown);
  color: var(--fg);
}
[data-theme] .composer-autocomplete {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  max-height: 280px;
  overflow-y: auto;
}
/* Defenders against the prompt_autocomplete Stimulus controller's hardcoded
   inline hex colors (#181818 header, #c1c1c1 text, #282828 borders, etc.)
   tuned for the always-dark editor. Overriding inline styles requires
   !important — the controller's JS-injected style="..." is specificity
   1,0,0,0, so we match with attribute selectors and !important. */
[data-theme] [data-prompt-autocomplete-target="suggestions"] {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg);
}
[data-theme] [data-prompt-autocomplete-target="suggestions"] > div:first-child {
  background: var(--bg-1) !important;
  border-color: var(--line) !important;
}
[data-theme] [data-prompt-autocomplete-target="suggestions"] [style*="#7a7a7a"] {
  color: var(--fg-3) !important;
}
[data-theme] [data-prompt-autocomplete-target="suggestions"] [style*="#c1c1c1"] {
  color: var(--fg) !important;
}
[data-theme] [data-prompt-autocomplete-target="suggestions"] [style*="#606060"] {
  color: var(--fg-4) !important;
}
[data-theme] [data-prompt-autocomplete-target="suggestions"] button[style*="#282828"] {
  border-bottom-color: var(--line) !important;
}
[data-theme] [data-prompt-autocomplete-target="suggestions"] button[style*="#282828"]:hover {
  background-color: var(--hover-bg) !important;
}
[data-theme] [data-prompt-autocomplete-target="suggestions"] [style*="background-color: #181818"] {
  background-color: var(--bg-1) !important;
}
[data-theme] [data-prompt-autocomplete-target="suggestions"] button[type="button"]:has(svg) {
  color: var(--fg-3);
}
[data-theme] .composer-menu { width: 320px; }
[data-theme] .composer-menu-narrow { width: 260px; }
[data-theme] .composer-menu-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
[data-theme] .composer-menu-list { padding: 6px 0; max-height: 320px; overflow-y: auto; }
[data-theme] .composer-menu-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--fg);
  transition: background var(--t-base);
}
[data-theme] .composer-menu-item:hover { background: var(--hover-bg); }
[data-theme] .composer-menu-item.is-selected { background: var(--bg-1); }
[data-theme] .composer-menu-icon {
  flex: 0 0 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent);
}
[data-theme] .composer-menu-body { flex: 1; min-width: 0; }
[data-theme] .composer-menu-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
[data-theme] .composer-menu-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
[data-theme] .composer-menu-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
}
/* Hex literals here are intentional — these are tag colors that map to
   semantic concepts (cost = orange, intelligence = blue) but don't
   exist as semantic tokens. If we ever add semantic --tag-cost-fg /
   --tag-intel-fg tokens, swap these. */
[data-theme] .composer-menu-tag-cost {
  color: #d97706;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
}
[data-theme] .composer-menu-tag-intel {
  color: #2563eb;
  background: color-mix(in srgb, #3b82f6 18%, transparent);
}
[data-theme] .composer-menu-desc {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme] .composer-menu-check {
  flex: 0 0 16px;
  margin-top: 2px;
  color: var(--accent);
}
[data-theme] .composer-menu-check svg { width: 16px; height: 16px; display: block; }
/* ============= Image preview + voice status ============= */
/* `:not(.hidden)` so the chat-image-upload controller's initial markup
   — `<div class="hidden composer-image-preview">` — actually stays hidden
   until a thumbnail is appended. Without it the `display: flex` rule
   would override Tailwind's `.hidden` (specificity 0,2,0 vs 0,1,0,
   plus source-order after Tailwind) and leave a stray empty preview row. */
[data-theme] .composer-image-preview:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 8px;
}
[data-theme] .composer-image-preview img,
[data-theme] .composer-image-preview .preview-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--line);
}
[data-theme] .composer-voice-status {
  margin: 12px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-3);
}
/* Mobile: pin popovers to the viewport edges so 260-320px menus don't
   blow past the right edge on narrow screens. */
@media (max-width: 480px) {
  [data-theme] .composer-popover {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 96px;
    width: auto;
    min-width: 0;
  }
  [data-theme] .composer-menu,
  [data-theme] .composer-menu-narrow { width: auto; }
}
/* Page hero — opening surface of marketing pages.
   Anatomy: dotgrid bg → eyebrow → display headline → subhead → composer
   (or CTA buttons) → optional trust strip. */
[data-theme] .page-hero{
  position: relative;
  padding: 120px 0 80px;
  overflow: hidden;
}
[data-theme] .page-hero.align-center{ text-align: center; }
[data-theme] .page-hero.align-center .page-hero-text{ margin: 0 auto; }
[data-theme] .page-hero.align-center .page-hero-actions{ justify-content: center; }
[data-theme] .page-hero-text{ max-width: 760px; }
[data-theme] .page-hero-text h1{ margin: 12px 0 0; }
[data-theme] .page-hero-subhead{
  color: var(--fg-3);
  margin-top: 20px;
}
[data-theme] .page-hero-composer{
  margin: 40px auto 0;
  max-width: 760px;
}
[data-theme] .page-hero-actions{
  margin: 32px 0 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
[data-theme] .page-hero-trust{ margin: 56px 0 0; }
@media (max-width: 768px) {
  [data-theme] .page-hero { padding: 64px 0 48px; }
  [data-theme] .page-hero-composer { margin-top: 28px; }
  [data-theme] .page-hero-actions { margin-top: 24px; }
  [data-theme] .page-hero-trust { margin-top: 40px; }
}
/* Dotgrid background — radial dots faded out at the edges via a mask.
   Place .dotgrid on the section that wants the texture. Children get
   z-index: 1 so they sit above the pseudo-element. */
[data-theme] .dotgrid{ position: relative; }
[data-theme] .dotgrid::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--hero-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 40%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 60% at center, black 40%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
[data-theme] .dotgrid > *{ position: relative; z-index: 1; }
/* Phase 4 — cards, feature grid, templates rail, marquee */
/* Card — most-reused container in the system. Surface + border + radius.
   Variants: .card-padded, .card-hoverable, .card-ghost, .matrix-tile,
   .feature-card. */
[data-theme] .card{
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--t-slow) var(--ease-out),
              background var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
[data-theme] .card-padded{ padding: 24px; }
[data-theme] .card-ghost{ background: transparent; }
[data-theme] .card-hoverable{ cursor: pointer; }
[data-theme] .card-hoverable:hover{
  border-color: var(--hover-border);
  transform: translateY(-2px);
}
[data-theme] .card-hoverable:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Matrix tile (templates, integrations) */
[data-theme] .matrix-tile{ display: flex; flex-direction: column; }
[data-theme] .matrix-tile-img{
  aspect-ratio: 16 / 10;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
[data-theme] .matrix-tile-img img{
  width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
[data-theme] .card-hoverable.matrix-tile:hover .matrix-tile-img img{ transform: scale(1.03); }
[data-theme] .matrix-tile-body{
  padding: 16px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
[data-theme] .matrix-tile-tag{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}
[data-theme] .matrix-tile-title{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
  margin: 0;
  line-height: 1.3;
}
[data-theme] .matrix-tile-meta{
  font-size: 13px;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 8px;
}
[data-theme] .matrix-tile-meta-dot{
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg-4);
}
/* Feature card — icon + title + body */
[data-theme] .feature-card{
  padding: 28px 24px;
  display: flex; flex-direction: column;
  gap: 16px;
}
[data-theme] .feature-card-icon{
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  flex: 0 0 auto;
}
[data-theme] .feature-card-icon svg{ width: 20px; height: 20px; }
[data-theme] .feature-card-title{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--fg);
  margin: 0;
  line-height: 1.3;
}
[data-theme] .feature-card-body{
  margin: 0;
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.55;
}
/* Templates rail — horizontal scroll, snap to start */
[data-theme] .rail{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin: 0 calc(-1 * var(--container-pad));
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  scrollbar-color: var(--line-2) transparent;
}
[data-theme] .rail > .card{ flex: 0 0 320px; scroll-snap-align: start; }
[data-theme] .rail::-webkit-scrollbar{ height: 6px; }
[data-theme] .rail::-webkit-scrollbar-track{ background: transparent; }
[data-theme] .rail::-webkit-scrollbar-thumb{
  background: var(--line-2);
  border-radius: var(--radius-pill);
}
@media (max-width: 540px) {
  [data-theme] .rail > .card { flex: 0 0 260px; }
}
/* Feature grid — 3-up at desktop, fluid */
[data-theme] .feature-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Marquee — endless horizontal scroll of partner/customer logos.
   The trick: render the logo set TWICE inside .marquee-track, then animate
   `transform: translate3d(-50%)`. Loop appears seamless because the second
   set is identical and starts where the first ends. Pauses on hover. */
[data-theme] .marquee{
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
[data-theme] .marquee-track{
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
[data-theme] .marquee:hover .marquee-track{ animation-play-state: paused; }
[data-theme] .marquee-row{
  display: flex; align-items: center; gap: 56px;
  padding: 0 28px;
  margin: 0;
  list-style: none;
}
[data-theme] .marquee-item img{
  height: 28px; width: auto;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity var(--t-base), filter var(--t-base);
}
[data-theme] .marquee-item:hover img{ opacity: 1; filter: grayscale(0); }
/* Logo-as-text fallback for the showcase (when no SVGs available) */
[data-theme] .marquee-item-text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--fg-3);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--t-base);
}
[data-theme] .marquee-item:hover .marquee-item-text{ color: var(--fg); }
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 768px) {
  [data-theme] .marquee-track { animation-duration: 28s; }
  [data-theme] .marquee-row { gap: 36px; padding: 0 18px; }
  [data-theme] .marquee-item img { height: 22px; }
  [data-theme] .marquee-item-text { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme] .marquee-track { animation: none; }
}
/* Phase 5 — forms, modals, toasts */
/* Form controls — text inputs, textarea, select, checkbox, radio, toggle.
   Custom-style native inputs (don't replace them with divs — accessibility
   regresses). All scoped to [data-theme] so they don't apply on legacy
   pages where BulletTrain handles form chrome. */
[data-theme] .input,
[data-theme] .textarea,
[data-theme] .select {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
[data-theme] .input::-moz-placeholder, [data-theme] .textarea::-moz-placeholder { color: var(--fg-4); }
[data-theme] .input::placeholder,
[data-theme] .textarea::placeholder { color: var(--fg-4); }
[data-theme] .input:hover,
[data-theme] .textarea:hover,
[data-theme] .select:hover { border-color: var(--hover-border); }
[data-theme] .input:focus,
[data-theme] .textarea:focus,
[data-theme] .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
[data-theme] .input:disabled,
[data-theme] .textarea:disabled,
[data-theme] .select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-1);
}
[data-theme] .input[aria-invalid="true"],
[data-theme] .textarea[aria-invalid="true"] { border-color: var(--danger-fg); }
[data-theme] .input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-fg) 25%, transparent);
}
[data-theme] .textarea {
  height: auto;
  padding: 12px 14px;
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
/* Native select arrow — encoded inline. The chevron stroke color is
   per-theme: dark uses #8a8c92 (= --fg-3 dark), light uses #6b7280
   (= --fg-3 light). Previous implementation hardcoded only the dark
   value, which rendered the wrong color in light theme.

   Why hex literals here despite the "no hex in components" rule: data
   URIs cannot reference CSS custom properties, and the `mask-image`
   alternative would require either compositing tricks (pseudo-element)
   or markup changes. Two literal stroke values is the smallest fix. */
[data-theme="dark"] .select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8c92' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
[data-theme="light"] .select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
/* Field group (label + input + help/error) */
[data-theme] .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-theme] .field-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-2);
}
[data-theme] .field-help { font-size: 12px; color: var(--fg-3); margin: 0; }
[data-theme] .field-error { font-size: 12px; color: var(--danger-fg); margin: 0; display: none; }
[data-theme] .field[data-invalid="true"] .field-error { display: block; }
/* Checkbox + Radio — custom-styled native inputs. Padding-aware so they
   line up with .field-label baselines. */
[data-theme] .checkbox,
[data-theme] .radio {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  flex: 0 0 auto;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base);
  margin: 0;
}
[data-theme] .checkbox { border-radius: 4px; }
[data-theme] .radio    { border-radius: 50%; }
[data-theme] .checkbox:hover,
[data-theme] .radio:hover { border-color: var(--hover-border); }
[data-theme] .checkbox:checked,
[data-theme] .radio:checked {
  background: var(--accent);
  border-color: var(--accent);
}
[data-theme] .checkbox:checked::after {
  content: "";
  width: 10px; height: 6px;
  border: 2px solid var(--accent-fg);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
[data-theme] .radio:checked::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-fg);
}
[data-theme] .checkbox:focus-visible,
[data-theme] .radio:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Toggle (switch) */
[data-theme] .toggle {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 36px; height: 20px;
  background: var(--bg-3);
  border: 0;
  border-radius: var(--radius-pill);
  position: relative;
  cursor: pointer;
  transition: background var(--t-base);
  flex: 0 0 auto;
  margin: 0;
}
[data-theme] .toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--fg);
  border-radius: 50%;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base);
}
[data-theme] .toggle:checked { background: var(--accent); }
[data-theme] .toggle:checked::after {
  transform: translateX(16px);
  background: var(--accent-fg);
}
[data-theme] .toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme] .toggle:disabled { opacity: 0.5; cursor: not-allowed; }
/* Inline checkbox/radio + label row */
[data-theme] .check-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Search input — icon left, optional kbd hint right */
[data-theme] .search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
[data-theme] .search-input {
  width: 100%;
  height: 40px;
  padding: 0 56px 0 40px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
[data-theme] .search-input::-moz-placeholder { color: var(--fg-4); }
[data-theme] .search-input::placeholder { color: var(--fg-4); }
[data-theme] .search-input:hover { border-color: var(--hover-border); }
[data-theme] .search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
[data-theme] .search-icon {
  position: absolute;
  left: 12px;
  width: 16px; height: 16px;
  color: var(--fg-3);
  pointer-events: none;
}
[data-theme] .search-kbd {
  position: absolute;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  padding: 2px 6px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  pointer-events: none;
}
/* Modal / Dialog — uses native <dialog>. a11y-correct, supports Esc, stacks
   via the top layer. */
[data-theme] .modal {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 0;
  margin: auto;
  color: var(--fg);
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.2s var(--ease-out);
}
[data-theme] .modal--wide { max-width: 720px; }
[data-theme] .modal--narrow { max-width: 360px; }
/* Backdrop scoping note: ::backdrop is its own pseudo-element on the
   <dialog> and isn't a descendant — so we keep this rule scoped via the
   parent .modal selector chain (which DOES scope to [data-theme]). */
[data-theme] .modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: backdrop-in 0.2s var(--ease-out);
}
[data-theme] .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
  gap: 16px;
}
[data-theme] .modal-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--fg);
}
[data-theme] .modal-body {
  padding: 16px 24px 24px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
}
[data-theme] .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--line);
}
@keyframes modal-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme] .modal,
  [data-theme] .modal::backdrop {
    animation: none;
  }
}
@media (max-width: 540px) {
  [data-theme] .modal-head { padding: 20px 20px 0; }
  [data-theme] .modal-body { padding: 14px 20px 20px; }
  [data-theme] .modal-foot { padding: 14px 20px 20px; }
}
/* Toast — transient status messages, top-right corner, auto-dismiss after 5s.
   Stacking is vertical with 8px gap. Don't stack >3; replace older toasts. */
[data-theme] .toast-region {
  position: fixed;
  top: 80px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
[data-theme] .toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 360px;
  max-width: calc(100vw - 48px);
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: toast-in 0.25s var(--ease-out);
  color: var(--fg);
}
[data-theme] .toast--success { border-left: 3px solid var(--success-fg); }
[data-theme] .toast--danger  { border-left: 3px solid var(--danger-fg); }
[data-theme] .toast--warn    { border-left: 3px solid var(--warning-fg); }
[data-theme] .toast--info    { border-left: 3px solid var(--info-fg); }
[data-theme] .toast-icon {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--fg-3);
}
[data-theme] .toast--success .toast-icon { color: var(--success-fg); }
[data-theme] .toast--danger  .toast-icon { color: var(--danger-fg); }
[data-theme] .toast--warn    .toast-icon { color: var(--warning-fg); }
[data-theme] .toast--info    .toast-icon { color: var(--info-fg); }
[data-theme] .toast-body { flex: 1; min-width: 0; }
[data-theme] .toast-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  margin: 0;
}
[data-theme] .toast-msg {
  font-size: 13px;
  color: var(--fg-3);
  margin: 2px 0 0;
  line-height: 1.5;
}
[data-theme] .toast-close {
  flex: 0 0 auto;
  color: var(--fg-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin: -2px -4px 0 0;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: color var(--t-base), background var(--t-base);
}
[data-theme] .toast-close:hover { color: var(--fg); background: var(--hover-bg); }
[data-theme] .toast-close svg { width: 14px; height: 14px; }
@keyframes toast-in {
  from { transform: translateX(12px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toast-out {
  to   { transform: translateX(12px); opacity: 0; }
}
[data-theme] .toast.is-leaving { animation: toast-out 0.2s var(--ease-out) forwards; }
@media (prefers-reduced-motion: reduce) {
  [data-theme] .toast { animation: none; }
  [data-theme] .toast.is-leaving { animation: none; opacity: 0; }
}
/* Phase 6 — editor surfaces (May 2026, :editor_v2 reskin) */
/* ==========================================================================
   Editor topbar — Design System v2 (Phase 1, May 2026).
   --------------------------------------------------------------------------
   Component classes for the editor desktop header. Mirrors the mock's CSS
   (handoff_design_system/reference/Editor.html lines 36-202) one-for-one
   on visual language, scoped under `.editor-topbar` so the class names
   don't collide with the global `.brand-mark` partial.

   All rules gated on `[data-theme]` so they're inert without DS opt-in.
   ========================================================================== */
[data-theme] .editor-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  /* padding-left 28px aligns the brand-mark with the chat panel's message
     text (which sits at 28px from the page edge). Previous 8px left the
     logo hugging the window chrome.
     height 60px + padding-top 9px (with 0 bottom) shifts the centered
     content down to compensate for the 9px gap below this topbar
     (created by `.lg:pt-2` + `.lg:border` on the content wrapper that
     immediately follows it — see show.html.erb main content area).
     Without this shift the tabs pill SITS at 12px from the topbar's top
     edge, but only 12px above the actual chat/preview surface below —
     so the "visible header zone" is 69px tall (topbar 60 + gap 9) and
     the pill looks top-heavy. With pt:9 pb:0 the pill ends up at
     ≈16.5 above / 7.5+9 = 16.5 below — visually centered in the zone. */
  padding: 9px 10px 0 28px;
  height: 60px;
  background: var(--bg);
  position: relative;
  /* z-60 (was z-10) so topbar dropdowns (page selector, app nav, theme,
     version history, team menu) sit above the preview pane's deployment
     progress bar (z-50) and sprite-waking overlay (z-20) when they extend
     down into the preview area. Stays below database_setup_overlay (z-90)
     and error popup (z-100) — those should keep blocking navigation. */
  z-index: 60;
}
[data-theme] .editor-topbar-left,
[data-theme] .editor-topbar-center,
[data-theme] .editor-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
[data-theme] .editor-topbar-right { justify-content: flex-end; }
/* The collapsible chat-header content is an inner flex row inside the LEFT
   cluster. When the editor-layout Stimulus controller adds .hidden (or sets
   display:none on this element via its `chatHeader` target), the toggle
   button — which is a SIBLING of this div — stays visible so the user can
   still un-collapse chat. */
[data-theme] .editor-topbar-left-content {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* ============= Brand trigger (clickable launcher: logo + caret) =============
   The clickable wrapper that opens the team dropdown. Visually composes the
   32px brand-mark square + a small caret to signal "this is a menu trigger".

   The OverSkill logo SVG/PNG already contains the green accent square +
   dark glyph (#45E760 bg, #0E2F13 glyph). The .brand-mark child here is a
   transparent inline-flex container — DO NOT add a background-color to it,
   or you'll get a green-on-green sandwich and the glyph will appear shrunken.

   If the mock's spec is ever extended to use a separate inline-SVG glyph
   *without* its own background rect, the .brand-mark rule needs to add
   `background: var(--accent)` + center the glyph at 18×18. Today's logo
   asset is self-contained so we let it fill the 32px square edge-to-edge. */
[data-theme] .editor-topbar .brand-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 0 4px 0 0;
  cursor: pointer;
  transition: filter var(--t-base), background var(--t-base);
}
[data-theme] .editor-topbar .brand-trigger:hover { background: var(--bg-2); }
[data-theme] .editor-topbar .brand-trigger:hover .brand-mark { filter: brightness(1.08); }
[data-theme] .editor-topbar .brand-trigger-caret {
  font-size: 10px;
  line-height: 1;
  color: var(--fg-4);
  flex-shrink: 0;
  transition: color var(--t-base);
}
[data-theme] .editor-topbar .brand-trigger:hover .brand-trigger-caret { color: var(--fg-2); }
[data-theme] .editor-topbar .brand-trigger[aria-expanded="true"] .brand-trigger-caret { color: var(--fg-2); }
[data-theme] .editor-topbar .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden; /* clip in case SVG's own rx differs slightly from 8px */
  transition: filter var(--t-base);
}
[data-theme] .editor-topbar .brand-mark svg,
[data-theme] .editor-topbar .brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
/* ============= Project switcher pill ============= */
[data-theme] .editor-topbar .proj-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  min-width: 0;
  max-width: 220px;
  transition: background var(--t-base), border-color var(--t-base);
}
[data-theme] .editor-topbar .proj-switch:hover {
  background: var(--bg-2);
  border-color: var(--line);
}
[data-theme] .editor-topbar .proj-switch .proj-mark {
  position: relative; /* anchor for the absolutely-positioned <img> overlay */
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, #7c5cff 0%, #4a32d6 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
/* Logo overlays the first-letter fallback. If the img fails to load (404 or
   zero-dimension blob), inline onerror/onload handlers remove it and the
   first-letter text content shows through. */
[data-theme] .editor-topbar .proj-switch .proj-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
[data-theme] .editor-topbar .proj-switch .proj-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
[data-theme] .editor-topbar .proj-switch .proj-caret {
  width: 10px;
  height: 10px;
  opacity: 0.5;
  flex-shrink: 0;
}
/* ============= Chip pill (favorite star, branch/version count) ============= */
[data-theme] .editor-topbar .chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
[data-theme] .editor-topbar .chip-pill:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line);
}
[data-theme] .editor-topbar .chip-pill svg,
[data-theme] .editor-topbar .chip-pill i { font-size: 11px; }
/* Icon-only variant — square-ish, no gap, slightly tighter padding. Used by the
   favorite star (a boolean — no count to render alongside). */
[data-theme] .editor-topbar .chip-pill.chip-pill--icon-only {
  padding: 0;
  gap: 0;
  width: 26px;
  justify-content: center;
}
[data-theme] .editor-topbar .chip-pill.chip-pill--icon-only svg,
[data-theme] .editor-topbar .chip-pill.chip-pill--icon-only i { font-size: 13px; }
/* Gold star when favorited. Color cascades to icon glyph (Font Awesome <i>) via
   currentColor; hover state stays gold (don't recolor on hover when already
   active — would look like a regression). */
[data-theme] .editor-topbar .chip-pill.is-starred,
[data-theme] .editor-topbar .chip-pill.is-starred:hover { color: #f5d423; }
[data-theme] .editor-topbar .chip-pill.is-starred svg,
[data-theme] .editor-topbar .chip-pill.is-starred i { color: currentColor; }
[data-theme] .editor-topbar .chip-pill.is-starred svg { fill: currentColor; }
/* ============= Center segmented tabs (Dashboard / Preview) ============= */
[data-theme] .editor-topbar .tabs-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
[data-theme] .editor-topbar .tabs-pill .tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .editor-topbar .tabs-pill .tab-btn i,
[data-theme] .editor-topbar .tabs-pill .tab-btn svg { font-size: 13px; }
[data-theme] .editor-topbar .tabs-pill .tab-btn:hover { color: var(--fg); }
[data-theme] .editor-topbar .tabs-pill .tab-btn.is-active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .editor-topbar .tabs-pill .tab-btn.is-active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Page selector dropdown icon variants —
   The _page_selector_options partial is broadcast from
   AppFile after-commit callbacks, so it can render in test contexts where
   strict Flipper stubs reject the `Flipper.enabled?(:design_system_v2)`
   call from `use_design_system_v2?`. We dropped the Ruby branch and now
   render BOTH icons (FA v1 + Lucide v2) in the partial, gated entirely by
   CSS based on the `[data-theme]` ancestor. */
.page-selector-icon-v2 { display: none; }
[data-theme] .page-selector-icon-v1 { display: none; }
[data-theme] .page-selector-icon-v2 { display: inline-flex; }
/* ============= Right-side icon button cluster ============= */
[data-theme] .editor-topbar .tb-group {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2px;
  gap: 1px;
}
[data-theme] .editor-topbar .tb-icon {
  width: 26px;
  height: 24px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .editor-topbar .tb-icon i,
[data-theme] .editor-topbar .tb-icon svg { font-size: 13px; }
[data-theme] .editor-topbar .tb-icon:hover {
  color: var(--fg);
  background: var(--bg-2);
}
[data-theme] .editor-topbar .tb-icon.is-active {
  background: var(--bg-2);
  color: var(--fg);
}
[data-theme] .editor-topbar .tb-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}
[data-theme] .editor-topbar .tb-iconbtn {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .editor-topbar .tb-iconbtn i,
[data-theme] .editor-topbar .tb-iconbtn svg { font-size: 13px; }
[data-theme] .editor-topbar .tb-iconbtn:hover {
  color: var(--fg);
  background: var(--bg-2);
}
[data-theme] .editor-topbar .tb-iconbtn:disabled {
  opacity: 0.3;
  cursor: default;
}
[data-theme] .editor-topbar .tb-iconbtn:disabled:hover {
  background: transparent;
  color: var(--fg-3);
}
/* Specificity fix: my `.tb-iconbtn { display: inline-flex }` rule has
   selector-specificity (0,3,0) and beats Tailwind's `.hidden { display: none }`
   (0,1,0), so a `.tb-iconbtn.hidden` button kept rendering. This rule restores
   the expected hidden behavior — used by the chat-expand button which should
   only show when the editor-layout controller marks chat as collapsed. */
[data-theme] .editor-topbar .tb-iconbtn.hidden { display: none; }
/* ============= Action buttons (Share, Publish) ============= */
[data-theme] .editor-topbar .tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base), border-color var(--t-base);
  position: relative;
}
[data-theme] .editor-topbar .tb-btn:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: var(--hover-border);
}
[data-theme] .editor-topbar .tb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
[data-theme] .editor-topbar .tb-btn.is-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}
[data-theme] .editor-topbar .tb-btn.is-primary:hover {
  background: var(--primary-hover);
}
[data-theme] .editor-topbar .tb-btn i,
[data-theme] .editor-topbar .tb-btn svg { font-size: 13px; }
/* Unpublished-changes pulse dot on Publish button */
[data-theme] .editor-topbar .tb-btn .pulse-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--warning-fg);
  border: 1px solid var(--bg);
}
@keyframes ed-topbar-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}
[data-theme] .editor-topbar .tb-btn .pulse-dot.is-pulsing {
  animation: ed-topbar-pulse 1.6s var(--ease-in-out) infinite;
}
/* ============= Avatar (right-side user/team menu trigger) ============= */
[data-theme] .editor-topbar .tb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, #000);
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 0;
  transition: filter var(--t-base);
}
[data-theme] .editor-topbar .tb-avatar:hover { filter: brightness(1.08); }
/* ============= Team-nav dropdown fly-out submenu =============
   Used by the Appearance row (Light / Dark / System). Pure CSS — opens on
   :hover and :focus-within so keyboard tabbing also reveals it. Positioned
   to the right of the host item so it doesn't crowd the dropdown's contents. */
[data-theme] .ed-flyout-host {
  position: relative;
}
[data-theme] .ed-flyout {
  position: absolute;
  top: 0;
  left: calc(100% - 4px);
  min-width: 180px;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 51; /* above the parent dropdown panel (z-50) */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s linear var(--t-base);
  pointer-events: none;
}
[data-theme] .ed-flyout-host:hover .ed-flyout,
[data-theme] .ed-flyout-host:focus-within .ed-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
[data-theme] .ed-flyout-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding: 6px 8px 4px;
}
[data-theme] .ed-flyout-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .ed-flyout-item:hover { background: var(--hover-bg); color: var(--fg); }
[data-theme] .ed-flyout-item.is-active { color: var(--fg); }
/* ============= Collaborator stack (overlapping avatars) ============= */
[data-theme] .editor-topbar .collab-stack {
  display: inline-flex;
  align-items: center;
}
[data-theme] .editor-topbar .collab-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 2px solid var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-2);
  margin-left: -8px;
  text-transform: uppercase;
}
[data-theme] .editor-topbar .collab-avatar:first-child { margin-left: 0; }
[data-theme] .editor-topbar .collab-avatar.collab-overflow { color: var(--fg-3); background: var(--bg-3); }
/* ==========================================================================
   Editor chat panel — Design System v2 (Phase 2, May 2026).
   --------------------------------------------------------------------------
   Targeted overrides for the chat-panel chrome that's still rendered through
   v1 partials but needs to blend with the v2 canvas. All rules gated on
   `[data-theme]` so they're inert without DS opt-in (v1 editor untouched).

   Each rule here is a deliberate override of a legacy theme.css rule. The
   v1 rule is left in place — we just beat its specificity when v2 is on.
   ========================================================================== */
/* Chat input wrapper (theme.css:702) — defaults to bg-white with a near-white
   border-top. In v2 it blends seamlessly with the canvas (no border) so the
   composer, suggestions, and chat messages all read as one continuous gray
   surface. Border-width: 0 wins over theme.css's `border-top: 1px solid`
   because of the [data-theme] specificity boost. */
[data-theme] .editor-chat-input-wrapper {
  background-color: var(--bg);
  border-top-width: 0;
}
/* ==========================================================================
   Editor Dashboard pane — Design System v2 (Phase 2, May 2026).
   --------------------------------------------------------------------------
   Per handoff_editor_dashboard/00-layout-shell.md. The Dashboard view
   renders inside the Editor's main canvas when the user clicks the
   "Dashboard" tab in the topbar. It's a 220px nav / 1fr main grid with
   16 sections (Overview, Code, Tables, … Settings).

   Two layers of classes:
     - .dash-*  → the shell grid + nav (this file)
     - .dv-*    → shared section primitives (cards, tabs, empty states,
                  meta tags, dividers) reused across every section's content

   All rules scoped under [data-theme] so the legacy editor dashboard
   (v1) is untouched when :editor_v2 is off.
   ========================================================================== */
/* ==========================================================================
   Legacy --ed-* token aliases (Phase 2, May 2026)
   --------------------------------------------------------------------------
   The editor dashboard's ~30 v1 panel partials reference Tailwind utilities
   like `bg-editor-canvas`, `text-editor-text-1`, `border-editor-border`
   (defined in tailwind.config.js mapped to `var(--ed-*)` CSS vars).
   Migrating every partial to v2 tokens is high-effort and high-risk.

   Cheaper + safer: alias the legacy `--ed-*` vars to DS v2 tokens here,
   scoped under [data-theme]. The existing Tailwind utilities automatically
   resolve to v2 values on v2-opted-in surfaces while v1 surfaces (no
   data-theme on <html>) keep their original definitions from theme.css.

   This is intentionally a shim — once individual panels get their dedicated
   v2 migrations (handoff specs 02-15), the alias for that section's
   particular variables can be retired. Until then, every partial reads
   correctly without touching its markup. */
[data-theme] {
  --ed-canvas:        var(--bg);
  --ed-surface-1:     var(--bg);
  --ed-surface-2:     var(--bg-2);
  --ed-surface-3:     var(--bg-3);
  --ed-surface-hover: var(--bg-2);

  --ed-border:         var(--line);
  --ed-border-subtle:  var(--line);

  --ed-text-primary:   var(--fg);
  --ed-text-secondary: var(--fg-2);
  --ed-text-tertiary:  var(--fg-3);
  --ed-text-disabled:  var(--fg-4);

  --ed-icon-primary:   var(--fg);
  --ed-icon-secondary: var(--fg-2);
  --ed-icon-muted:     var(--fg-3);

  --ed-accent-green:   var(--accent);
  --ed-accent-blue:    var(--info-fg);
}
/* ============= SHELL ============= */
[data-theme] .dash {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
/* Below 1024px (mobile_navigation_controller still surfaces the dashboard
   as a full-width mobile view), collapse the nav to an icon rail so the
   content pane gets room to breathe — without this, a 375px viewport
   leaves ~155px for content after the nav reserves its 220px. Mirrors
   the legacy v1 dashboard's w-12 / w-48 responsive nav. */
@media (max-width: 1023px) {
  [data-theme] .dash { grid-template-columns: 48px 1fr; }
  [data-theme] .dash-nav { padding: 8px 4px; }
  [data-theme] .dash-nav-item {
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 36px;
  }
  [data-theme] .dash-nav-item > span,
  [data-theme] .dash-nav-item .dash-nav-badge { display: none; }
}
[data-theme] .dash-nav {
  border-right: 1px solid var(--line);
  background: var(--bg);
  padding: 12px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Main pane recesses to --bg-1 so cards (--bg) read as raised above
   the surrounding canvas. The left nav stays at --bg so it blends
   with the editor canvas chrome around it — that's intentional:
   only the pane gets the recessed treatment, not the whole dashboard.
   Per handoff_editor_dashboard/00-layout-shell.md. */
[data-theme] .dash-main {
  overflow-y: auto;
  padding: 24px 28px 80px;
  background: var(--bg-1);
}
/* ============= NAV ITEM ============= */
[data-theme] .dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border-width: 0;
  border-radius: 6px;
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .dash-nav-item:hover {
  background: var(--bg-2);
  color: var(--fg);
}
[data-theme] .dash-nav-item.is-active {
  background: var(--bg-2);
  color: var(--fg);
  font-weight: 600;
}
[data-theme] .dash-nav-item svg,
[data-theme] .dash-nav-item i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}
[data-theme] .dash-nav-item.is-active svg,
[data-theme] .dash-nav-item.is-active i {
  opacity: 1;
  color: var(--accent-text);
}
/* Badge (e.g. file count next to "Code") */
[data-theme] .dash-nav-item .dash-nav-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--fg-3);
  border: 1px solid var(--line);
}
[data-theme] .dash-nav-item.is-active .dash-nav-badge {
  background: var(--bg-3);
  border-color: var(--line-2);
  color: var(--fg-2);
}
/* ============= SECTION WRAPPER ============= */
/* Every section inside .dash-main wraps in `.dv` so they get a consistent
   vertical rhythm. Sections read as stacks of cards/banners separated by 16px. */
[data-theme] .dv {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* ============= SHARED HEADER ============= */
[data-theme] .dv-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
}
[data-theme] .dv-title {
  font-family: var(--font-display), var(--font-body);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Small accent icon paired with a dv-title (e.g. AI hub's brain glyph).
   Uses a subtle accent-mixed background so it reads as a section badge
   rather than competing with the title weight. */
[data-theme] .dv-title-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-text);
  flex-shrink: 0;
}
[data-theme] .dv-sub {
  margin: 0;
  font-size: 13px;
  color: var(--fg-3);
}
[data-theme] .dv-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* ============= SHARED EMPTY STATE ============= */
[data-theme] .dv-empty {
  text-align: center;
  padding: 40px 20px;
}
[data-theme] .dv-empty-icon {
  display: inline-flex;
  margin-bottom: 12px;
}
[data-theme] .dv-icon-lg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
}
[data-theme] .dv-empty-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  margin-bottom: 4px;
}
[data-theme] .dv-empty-body {
  font-size: 12.5px;
  color: var(--fg-3);
  max-width: 420px;
  margin: 0 auto;
}
/* ============= SHARED CARD ============= */
[data-theme] .dv-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
}
[data-theme] .dv-card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  margin: 0 0 4px;
}
[data-theme] .dv-card-sub {
  font-size: 12.5px;
  color: var(--fg-3);
  margin: 0;
}
[data-theme] .dv-divider {
  height: 1px;
  background: var(--line);
  margin: 14px -20px;
}
[data-theme] .dv-divider.light {
  margin: 14px 0;
}
[data-theme] .dv-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
[data-theme] .dv-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  [data-theme] .dv-grid-2 {
    grid-template-columns: 1fr;
  }
}
/* Meta tag (e.g. "3 fields", "1 entities") */
[data-theme] .dv-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}
[data-theme] .dv-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--fg-4);
}
[data-theme] .dv-dot.live {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
/* Mini-pill (counts beside section labels) */
[data-theme] .dv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/* Skeleton loader primitives — shimmer placeholder shown while a lazy
   turbo frame fetches its panel. The shimmer animation is intentionally
   slow + low-amplitude so it doesn't compete with the post-load content. */
[data-theme] .dv-skeleton-line,
[data-theme] .dv-skeleton-block {
  background: linear-gradient(
    90deg,
    var(--bg-2) 0%,
    var(--bg-3) 50%,
    var(--bg-2) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: dv-skeleton-pulse 1.6s ease-in-out infinite;
}
[data-theme] .dv-skeleton-block {
  border-radius: 8px;
}
@keyframes dv-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
[data-theme] .dv-skeleton-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0 4px;
  font-size: 12px;
  color: var(--fg-3);
}
[data-theme] .dv-skeleton-spin {
  animation: dv-skeleton-rotate 0.9s linear infinite;
  transform-origin: center;
}
@keyframes dv-skeleton-rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
/* Icon-only action button — used inside .dv-actions for destructive
   or quiet actions (Clear logs, Refresh, etc.). Same visual weight as
   the topbar's .tb-iconbtn so the eye reads them as the same family. */
[data-theme] .dv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
[data-theme] .dv-icon-btn:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line);
}
/* ============= SHARED TABS (inside sections) ============= */
/* Underlined (default) and subtle-pill (time-range pickers) variants. */
[data-theme] .dv-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: -2px;
}
[data-theme] .dv-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  background: transparent;
  border-width: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}
[data-theme] .dv-tab:hover { color: var(--fg); }
[data-theme] .dv-tab.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
[data-theme] .dv-tabs.subtle {
  border-bottom: 0;
  gap: 4px;
  margin-bottom: 0;
}
[data-theme] .dv-tabs.subtle .dv-tab {
  border: 1px solid var(--line);
  border-radius: 7px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}
[data-theme] .dv-tabs.subtle .dv-tab.is-active {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line-2);
}
/* ============= OVERVIEW SECTION ============= */
/* Per handoff_editor_dashboard/01-overview.md. The default landing screen
   when the user opens the Dashboard tab. Vertical stack: actions row →
   about-app card → 2-col visibility/invite grid → 4-up stats → credit-usage. */
[data-theme] .dash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
[data-theme] .dash-actions .right { margin-left: auto; }
[data-theme] .dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base), border-color var(--t-base);
}
[data-theme] .dash-btn:hover {
  background: var(--bg-2);
  border-color: var(--hover-border);
}
[data-theme] .dash-btn svg,
[data-theme] .dash-btn i { width: 13px; height: 13px; opacity: 0.7; font-size: 13px; }
/* About-app card + visibility/invite cards share this base. */
[data-theme] .dash-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
[data-theme] .dash-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
[data-theme] .dash-card .ico {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c5cff 0%, #4a32d6 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
[data-theme] .dash-card h3 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--fg);
}
[data-theme] .dash-card .sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-3);
}
/* Ghost link button (Edit, Change, View Details, etc.) */
[data-theme] .link-btn {
  background: transparent;
  border-width: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  color: var(--accent-text);
  padding: 6px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: background var(--t-base);
}
[data-theme] .link-btn:hover { background: var(--bg-2); }
[data-theme] .link-btn svg,
[data-theme] .link-btn i { width: 12px; height: 12px; font-size: 12px; }
/* 2-col grid for visibility + invite */
[data-theme] .dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  [data-theme] .dash-grid-2 { grid-template-columns: 1fr; }
}
/* Public/private flag with pulsing dot */
[data-theme] .public-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
}
[data-theme] .public-flag .pulse {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
[data-theme] .visibility-state {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
[data-theme] .visibility-state .sub {
  color: var(--fg-3);
  font-weight: 500;
  font-size: 11.5px;
}
/* Stats grid (4-up tiles) */
[data-theme] .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  [data-theme] .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
[data-theme] .stat-tile {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
[data-theme] .stat-tile .icobox {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  flex-shrink: 0;
}
[data-theme] .stat-tile .num {
  font-family: var(--font-display), var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
[data-theme] .stat-tile .lbl {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 4px;
}
/* Credit usage card */
[data-theme] .credit-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
}
[data-theme] .credit-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
[data-theme] .credit-head .ico {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: color-mix(in srgb, #f5d423 22%, transparent);
  color: #f5d423;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .credit-head h4 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
}
[data-theme] .credit-head .sub {
  margin: 0;
  font-size: 11.5px;
  color: var(--fg-3);
}
[data-theme] .credit-head .right { margin-left: auto; }
[data-theme] .credit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  [data-theme] .credit-grid { grid-template-columns: repeat(2, 1fr); }
}
[data-theme] .credit-cell {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
[data-theme] .credit-cell .big {
  font-family: var(--font-display), var(--font-body);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
[data-theme] .credit-cell .lbl {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}
[data-theme] .credit-cell .delta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--accent-text);
  margin-top: 4px;
}
[data-theme] .credit-empty {
  margin-top: 14px;
  padding: 22px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  text-align: center;
}
[data-theme] .credit-empty .ico {
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  color: var(--fg-3);
}
[data-theme] .credit-empty .t {
  font-size: 12.5px;
  color: var(--fg-2);
  margin-bottom: 2px;
}
[data-theme] .credit-empty .s {
  font-size: 11px;
  color: var(--fg-4);
}
/* ============= SCHEMA SECTION ============= */
/* Schema Overview tab. Each table renders as a raised card with flat
   inline header/footer regions — no recessed strip, no double borders.
   Per handoff_editor_dashboard/04-schema.md. */
[data-theme] .dv-schema-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  [data-theme] .dv-schema-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  [data-theme] .dv-schema-grid { grid-template-columns: 1fr 1fr 1fr; }
}
/* Schema cards are lifted one elevation above the default .dv-card so they
   pop against the recessed pane. The .dv-card base provides --bg + 1px
   border; we override the background to --bg-2 (raised). Borders stay
   single hairline — the previous design layered a recessed strip on top
   of a bordered card, which read as a thick double-frame. */
[data-theme] .dv-card.dv-schema-card {
  background: var(--bg-2);
  padding: 0;
}
/* Header + footer rows inside the schema card. They share the card body
   background (no recessed dip), separated from the column list by a
   single hairline. The strip is just a layout container — its visual
   weight comes only from the hairline. */
[data-theme] .dv-schema-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border-color: var(--line);
  border-style: solid;
  border-width: 0;
}
[data-theme] .dv-schema-strip-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-width: 1px;
}
[data-theme] .dv-schema-strip-bottom {
  justify-content: space-between;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-width: 1px;
  font-size: 11px;
  color: var(--fg-3);
  padding: 10px 16px;
}
[data-theme] .dv-schema-strip-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  /* --bg gives a subtle inset against the card body's --bg-2 surface
     without competing with the 1px border. */
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme] .dv-schema-table-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  letter-spacing: -0.005em;
}
[data-theme] .dv-schema-scope {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 2px;
}
[data-theme] .dv-schema-scope-public { color: var(--fg-4); }
[data-theme] .dv-schema-body {
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
[data-theme] .dv-schema-col {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--fg);
  transition: background var(--t-base);
}
/* Hover state uses a foreground-mix overlay so it reads as a subtle lift
   in both light mode (slightly darker than --bg-2 body) and dark mode
   (slightly brighter than --bg-2 body) — no theme-specific override needed. */
[data-theme] .dv-schema-col:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
[data-theme] .dv-schema-col-pk {
  background: color-mix(in srgb, #f5d423 12%, transparent);
}
[data-theme] .dv-schema-col-pk:hover {
  background: color-mix(in srgb, #f5d423 18%, transparent);
}
[data-theme] .dv-schema-col-scope {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
[data-theme] .dv-schema-col-scope:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
[data-theme] .dv-schema-col-muted { color: var(--fg-4); }
[data-theme] .dv-schema-col-glyph {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  flex-shrink: 0;
}
[data-theme] .dv-schema-col-pk .dv-schema-col-glyph { color: #f5d423; }
[data-theme] .dv-schema-col-scope .dv-schema-col-glyph { color: var(--accent-text); }
[data-theme] .dv-schema-col-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: inherit;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme] .dv-schema-col-pk .dv-schema-col-name { font-weight: 600; }
[data-theme] .dv-schema-col-type {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
[data-theme] .dv-schema-col-required {
  color: var(--danger-fg);
  margin-left: 2px;
  font-weight: 700;
}
[data-theme] .dv-schema-footer-count {
  font-family: var(--font-mono);
}
[data-theme] .dv-schema-footer-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success-fg);
}
/* Schema legend — dense inline list of glyph + label pairs. */
[data-theme] .dv-schema-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  font-size: 11.5px;
  color: var(--fg-3);
  padding: 14px 20px;
}
[data-theme] .dv-schema-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-theme] .dv-schema-legend-glyph {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
/* ==========================================================================
   Editor — Publish Settings modal (DS v2, Phase 2, May 2026).
   --------------------------------------------------------------------------
   Per handoff_publish_modal/README.md. All rules scoped under [data-theme]
   so the legacy v1 modal markup (when :editor_v2 is off) is untouched.

   Naming map (matches the handoff prototype exactly):
     .scrim                 backdrop overlay
     .pm                    modal shell (640px, sticky head/foot)
     .pm-head / .pm-body / .pm-foot   sticky regions
     .pm-section            vertical-stacked content groups
     .pm-sec-head / .pm-sec-title     section header + title
     .pm-eyebrow            uppercase mono label (CUSTOM DOMAINS, etc.)
     .status-pill           [.pending | .notyet | .ready | .live]
     .deploy-cta            56px accent-filled hero button (+ .notif-dot)
     .info-banner           empty-state banner (orange "i" + text)
     .url-field             locked monospace URL row + icon buttons
     .customize-callout     cyan-tinted "Customize your URL" / "Connect domain"
     .an-card / .an-bars / .an-stats   Analytics card + 7-day bar chart + stats
     .adv-toggle / .feature-row / .feature-btn  Advanced Features collapsible
     .pm-foot-btn           equal-width footer Share / Open buttons
   ========================================================================== */
[data-theme] .scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 10, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 50;
  display: grid;
  place-items: start center;
  padding: 32px;
  overflow: auto;
}
/* CRITICAL: `[data-theme] .scrim` has specificity (0,2,0) and would beat
   Tailwind's `.hidden` (0,1,0) — meaning the publish_modal_controller's
   open/close toggle on the `hidden` class wouldn't actually hide the
   modal. Adding `.scrim.hidden` at (0,3,0) restores the toggle. Mirror
   this pattern for any other [data-theme]-scoped display rule that
   needs Tailwind .hidden to work. */
[data-theme] .scrim.hidden { display: none; }
/* CRITICAL — same `display:` vs `.hidden` specificity gotcha applies to
   every v2 primitive that publish_modal_controller (or custom_domains_
   controller) toggles via `classList.add('hidden')`. `.info-banner` (set
   to `display: flex` below), `.url-default`, `.customize-callout`,
   `.pm-subdomain-edit` all live at (0,2,0) and would otherwise beat
   Tailwind's `.hidden` (0,1,0). Without these overrides the
   `deployStatus` indicator, `customDomainsHint`, `defaultUrlSection`,
   `addForm`, `dnsInstructions`, and the inline subdomain editor stay
   visible after the controller tries to hide them. Add new
   `.foo.hidden` rules here for any future [data-theme]-scoped display
   primitive that needs Stimulus-driven show/hide.

   Found via Codex review on the PR (May 2026) — same pattern as the
   .tb-iconbtn / .scrim / .adv-content fixes earlier in this PR. */
[data-theme] .info-banner.hidden,
[data-theme] .url-default.hidden,
[data-theme] .customize-callout.hidden,
[data-theme] .pm-subdomain-edit.hidden { display: none; }
[data-theme="light"] .scrim {
  background: rgba(20, 22, 25, 0.42);
}
@media (max-width: 640px) {
  [data-theme] .scrim { padding: 0; align-items: end; }
}
/* ============= SHELL ============= */
[data-theme] .pm {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 64px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    0 8px 24px -8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) {
  [data-theme] .pm {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 14px 14px 0 0;
    border-bottom-width: 0;
  }
}
[data-theme] .pm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
[data-theme] .pm-head-title {
  font-family: var(--font-display), var(--font-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0;
}
[data-theme] .pm-close {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .pm-close:hover {
  background: var(--bg-2);
  color: var(--fg);
}
[data-theme] .pm-body {
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* ============= SECTIONS ============= */
[data-theme] .pm-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme] .pm-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
[data-theme] .pm-sec-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
}
[data-theme] .pm-eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
/* ============= STATUS PILLS ============= */
[data-theme] .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
[data-theme] .status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
[data-theme] .status-pill.pending {
  color: #f5a13a;
  background: color-mix(in srgb, #f5a13a 12%, var(--bg-2));
  border-color: color-mix(in srgb, #f5a13a 28%, var(--line));
}
[data-theme] .status-pill.pending .dot { background: #f5a13a; }
[data-theme] .status-pill.notyet {
  color: color-mix(in srgb, #f5a13a 80%, var(--fg-3));
  background: color-mix(in srgb, #f5a13a 8%, var(--bg-2));
  border-color: color-mix(in srgb, #f5a13a 22%, var(--line));
}
[data-theme] .status-pill.ready {
  color: #d6a610;
  background: color-mix(in srgb, #f5d423 14%, var(--bg-2));
  border-color: color-mix(in srgb, #f5d423 30%, var(--line));
}
[data-theme="dark"] .status-pill.ready { color: #f5d423; }
[data-theme] .status-pill.live {
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
[data-theme] .status-pill.live .dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* ============= DEPLOY CTA ============= */
[data-theme] .deploy-cta-wrap { position: relative; }
[data-theme] .deploy-cta {
  width: 100%;
  height: 56px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent);
}
[data-theme] .deploy-cta:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}
[data-theme] .deploy-cta:active { transform: translateY(0); }
[data-theme] .deploy-cta[disabled],
[data-theme] .deploy-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
[data-theme] .deploy-cta .notif-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #f5a13a;
  border: 2px solid var(--bg);
}
/* ============= INFO BANNER ============= */
[data-theme] .info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 12.5px;
  line-height: 1.5;
}
[data-theme] .info-banner .ico {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f5a13a;
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 10px;
}
[data-theme] .info-banner .ico svg { width: 10px; height: 10px; }
/* ============= URL FIELD ============= */
[data-theme] .url-field {
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  height: 44px;
  padding: 0 4px 0 14px;
  gap: 6px;
}
[data-theme] .url-field .lock {
  color: var(--fg-4);
  flex-shrink: 0;
  display: inline-flex;
}
[data-theme] .url-field input,
[data-theme] .url-field .url-text {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
[data-theme] .url-field .icobtn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .url-field .icobtn:hover {
  background: var(--bg-3);
  color: var(--fg);
}
[data-theme] .url-field .icobtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Default-URL sub-row (only visible when a custom domain is the primary). */
[data-theme] .url-default {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0 2px;
  font-size: 11.5px;
  color: var(--fg-3);
}
[data-theme] .url-default .label { flex-shrink: 0; }
[data-theme] .url-default .text {
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme] .url-default .icobtn {
  margin-left: auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .url-default .icobtn:hover { background: var(--bg-2); color: var(--fg); }
/* ============= CUSTOMIZE CALLOUT ============= */
[data-theme] .customize-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, #6cd4f5 8%, var(--bg-2));
  border: 1px solid color-mix(in srgb, #6cd4f5 22%, var(--line));
}
[data-theme] .customize-callout-text { min-width: 0; }
[data-theme] .customize-callout-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: #6cd4f5;
  margin-bottom: 2px;
}
[data-theme="light"] .customize-callout-title { color: #2284c8; }
[data-theme] .customize-callout-sub {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}
[data-theme] .btn-primary-sm {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-base);
}
[data-theme] .btn-primary-sm:hover { background: var(--primary-hover); }
[data-theme] .btn-secondary-sm {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-base), border-color var(--t-base);
}
[data-theme] .btn-secondary-sm:hover {
  background: var(--bg-3);
  border-color: var(--hover-border);
}
/* ============= ANALYTICS CARD ============= */
[data-theme] .an-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
[data-theme] .an-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
[data-theme] .an-row .ico {
  width: 22px;
  height: 22px;
  color: #6cd4f5;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .an-row .title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg);
  margin: 0;
  flex: 1;
}
[data-theme] .an-row .num {
  font-family: var(--font-display), var(--font-body);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
[data-theme] .an-row .num-label {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
  text-align: right;
}
[data-theme] .an-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--fg-3);
  margin-bottom: 6px;
}
[data-theme] .an-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  height: 26px;
  align-items: end;
}
[data-theme] .an-bar {
  height: 100%;
  background: var(--bg-3);
  border-radius: 4px;
  min-height: 4px;
}
[data-theme] .an-bar.active { background: #3b82f6; }
[data-theme] .an-bar-axis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--fg-4);
  text-align: center;
  margin-top: 6px;
}
[data-theme] .an-divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0 14px;
}
[data-theme] .an-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: center;
}
[data-theme] .an-stats .v {
  font-family: var(--font-display), var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--fg);
}
[data-theme] .an-stats .l {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 4px;
}
/* ============= ADVANCED FEATURES ============= */
[data-theme] .adv-toggle {
  width: 100%;
  padding: 12px 4px;
  background: transparent;
  border-width: 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: left;
}
[data-theme] .adv-toggle .lead-ico {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .adv-toggle .caret {
  margin-left: auto;
  color: var(--fg-3);
  width: 12px;
  height: 12px;
  transition: transform var(--t-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .adv-toggle[aria-expanded="true"] .caret,
[data-theme] .adv-toggle.is-open .caret { transform: rotate(90deg); }
[data-theme] .adv-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}
[data-theme] .adv-content.hidden { display: none; }
[data-theme] .feature-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
}
[data-theme] .feature-row-text { min-width: 0; }
[data-theme] .feature-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
[data-theme] .feature-row-head .ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .feature-row-head .ico.security { color: var(--accent-text); }
[data-theme] .feature-row-head .ico.perf { color: var(--accent); }
[data-theme] .feature-row-head .ico.seo { color: #b87cf7; }
[data-theme] .feature-row-head .ico.github { color: var(--fg-3); }
[data-theme] .feature-row-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg);
}
[data-theme] .feature-row-desc {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.45;
  margin: 0;
}
[data-theme] .feature-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--t-base), opacity var(--t-base);
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme] .feature-btn.security,
[data-theme] .feature-btn.perf {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .feature-btn.security:hover,
[data-theme] .feature-btn.perf:hover { background: var(--primary-hover); }
[data-theme] .feature-btn.seo {
  background: #b87cf7;
  color: #1a0a2e;
}
[data-theme] .feature-btn.seo:hover {
  background: color-mix(in srgb, #b87cf7 88%, white);
}
[data-theme] .feature-btn.github {
  background: #15171a;
  color: #f1f2f4;
  border: 1px solid #2e3033;
}
[data-theme="light"] .feature-btn.github {
  background: #1f2329;
}
/* ============= FOOTER ============= */
[data-theme] .pm-foot {
  border-top: 1px solid var(--line);
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
}
[data-theme] .pm-foot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
[data-theme] .pm-foot-btn {
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
[data-theme] .pm-foot-btn:hover:not(:disabled) {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line-2);
}
[data-theme] .pm-foot-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
[data-theme] .pm-foot-hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-3);
  margin: 0;
}
/* ============= SUBDOMAIN EDIT FORM ============= */
[data-theme] .pm-subdomain-edit {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme] .pm-subdomain-edit-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  color: var(--fg-2);
}
[data-theme] .pm-subdomain-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme] .pm-subdomain-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  height: 34px;
}
[data-theme] .pm-subdomain-input-wrap input {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
[data-theme] .pm-subdomain-input-suffix {
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}
/* ============= RESPONSIVE TWEAKS ============= */
@media (max-width: 640px) {
  [data-theme] .pm-body { padding: 16px; gap: 18px; }
  [data-theme] .pm-head { padding: 14px 16px; }
  [data-theme] .pm-foot { padding: 12px 16px 14px; }
  [data-theme] .feature-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  [data-theme] .feature-btn { width: 100%; justify-content: center; }
  [data-theme] .customize-callout { flex-direction: column; align-items: stretch; }
  [data-theme] .customize-callout .btn-primary-sm,
  [data-theme] .customize-callout .btn-secondary-sm { width: 100%; }
}
/* Surface stylesheets — page-specific compositions of design system atoms.
   These are inert on legacy pages (rules scoped to [data-theme]) but
   active on layouts that opt into the design system. */
/* ==========================================================================
   Surfaces — landing
   --------------------------------------------------------------------------
   Marketing-section styles for the v2 landing page (rendered through
   layouts/landing.html.erb when Flipper.enabled?(:landing_page_v2) or
   ?lp=v2 is set).

   These styles consume design system tokens (--bg, --accent, --line, etc.)
   and reference design system class names (.btn, .composer, .chip,
   .icon-btn, .brand-mark, etc.) without redefining them. The design system
   provides the atoms; this file provides the marketing-page composition
   on top.

   Why a separate file vs adding to the design system: these sections
   (release pill, hero grid background, integrations card grid, how-it-works
   numbered steps, ready-CTA banner, capabilities row) are landing-specific
   compositions. Putting them in the design system would force the design
   system to absorb every marketing layout — defeating its purpose as a
   primitive library. Surface stylesheets are the right home for
   page-specific compositions of design system atoms.

   All rules scoped to [data-theme] for inert-on-legacy isolation.
   ========================================================================== */
/* ============= Eyebrow with leading dot =============
   Landing-specific eyebrow variant — the DS provides .text-eyebrow as a
   typography utility, but landing's marketing eyebrows include a small
   leading accent dot (◦ CONNECT EVERYTHING). The dot is part of the
   marketing visual vocabulary, not a generic atom — kept here as a
   landing surface composition on top of the .text-eyebrow type. */
[data-theme] .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-3);
}
[data-theme] .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
/* ============= Layout primitive — landing nav ============= */
[data-theme] .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme] .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
[data-theme] .nav-left { display: flex; align-items: center; gap: 28px; }
[data-theme] .nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
[data-theme] .nav-links { display: flex; gap: 2px; }
[data-theme] .nav-links a {
  text-decoration: none;
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .nav-links a:hover { color: var(--fg); background: var(--hover-bg); }
[data-theme] .nav-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  padding-left: 18px;
  border-left: 1px solid var(--line);
  margin-left: 4px;
  white-space: nowrap;
}
[data-theme] .nav-status .pulse {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: landing-pulse 2s infinite;
}
@keyframes landing-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Theme toggle icon swap — nav button shows moon in dark, sun in light */
[data-theme] .theme-toggle .sun  { display: none; }
[data-theme] .theme-toggle .moon { display: block; }
[data-theme="light"] .theme-toggle .sun  { display: block; }
[data-theme="light"] .theme-toggle .moon { display: none; }
/* Brand chrome — landing uses the DS .brand / .brand-mark / .brand-word
   classes directly via shared/design_system/_brand_mark partial. No
   landing-specific overrides needed. */
/* ============= Hero ============= */
[data-theme] .hero {
  position: relative;
  padding: 88px 0 96px;
  /* overflow:clip clips visually without trapping mobile scroll events
     (overflow:hidden does on iOS Safari) */
  overflow: clip;
  isolation: isolate;
}
[data-theme] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, var(--hero-grid) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}
[data-theme] .hero-top { display: flex; justify-content: center; margin-bottom: 28px; }
[data-theme] .release-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-1);
  font-size: 13px;
  color: var(--fg-2);
  text-decoration: none;
  transition: border-color var(--t-base), background var(--t-base);
}
[data-theme] .release-pill:hover { border-color: var(--line-2); background: var(--bg-2); }
[data-theme] .release-pill .tag {
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
[data-theme] .release-pill .arrow { color: var(--fg-3); transition: transform var(--t-base); }
[data-theme] .release-pill:hover .arrow { transform: translateX(3px); }
[data-theme] h1.headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 auto 20px;
  max-width: 18ch;
  color: var(--fg);
  text-wrap: balance;
}
@media (max-width: 600px) {
  [data-theme] h1.headline { max-width: 12ch; }
}
[data-theme] .headline .accent { color: var(--accent); position: relative; }
[data-theme] .subhead {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--fg-3);
  max-width: 580px;
  margin: 0 auto 44px;
  line-height: 1.5;
}
[data-theme] .composer-wrap { max-width: 760px; margin: 0 auto; }
/* ID-targeted defenders — application.light.css carries BulletTrain
   form-input rules with `!important` (e.g. `.dark textarea { color:
   white !important }`) and editor-chat input baselines that compute to
   white in some load orders. ID specificity (1,0,0) + !important beats
   all of them and forces the textarea to honor v2 tokens regardless. */
[data-theme] #custom-prompt {
  color: var(--fg) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  caret-color: var(--accent);
}
[data-theme] #custom-prompt::-moz-placeholder { color: var(--fg-4) !important; }
[data-theme] #custom-prompt::placeholder { color: var(--fg-4) !important; }
/* ============= Starter-prompt chips below composer =============
   The DS .chip is a 28px mono token with 7px radius — designed for
   small interactive metadata. Landing's chips below the composer are
   starter prompts (Sales CRM / Booking App / etc.) — a different
   visual: pill-shaped, body font, single-line ellipsis. Override the
   DS .chip styling INSIDE the .chips grid to give landing's
   starter-prompt chips their marketing presentation while leaving
   the DS .chip untouched everywhere else. */
[data-theme] .chips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
}
[data-theme] .chips .chip {
  height: auto;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: normal;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  cursor: pointer;
}
[data-theme] .chips .chip:hover {
  border-color: var(--hover-border);
  color: var(--fg);
  background: var(--hover-bg);
}
/* ============= Trust line ============= */
[data-theme] .trust {
  margin-top: 56px;
  text-align: center;
  color: var(--fg-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
[data-theme] .trust .stars { color: var(--accent); letter-spacing: 0.1em; }
/* ============= Section shell (heading + intro pattern) ============= */
[data-theme] section.block { padding: 120px 0; }
[data-theme] section.block.tight { padding: 80px 0; }
[data-theme] .section-head { max-width: none; margin-bottom: 56px; }
[data-theme] .section-head h2,
[data-theme] .section-head .subhead { white-space: nowrap; }
@media (max-width: 900px) {
  [data-theme] .section-head h2,
  [data-theme] .section-head .subhead { white-space: normal; }
}
[data-theme] .section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
  text-wrap: balance;
}
[data-theme] .section-head p {
  color: var(--fg-3);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 560px;
}
/* ============= Integrations grid =============
   Replaces the v2 prototype's logo marquee with a denser card grid that
   carries actual integration metadata (logo + name + tagline + category).
   Designer May 2026: a static grid converts better than a scrolling band
   when you want users to know which tools you actually integrate with. */
[data-theme] .integ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
[data-theme] .integ-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color var(--t-slow), transform var(--t-fast);
  min-height: 84px;
}
[data-theme] .integ-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
[data-theme] .integ-logo {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}
[data-theme] .integ-logo img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
[data-theme] .integ-meta { flex: 1; min-width: 0; padding-right: 60px; }
[data-theme] .integ-meta h4 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 3px;
  color: var(--fg);
}
[data-theme] .integ-meta p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
[data-theme] .integ-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
}
/* Prev/next pagination — designer chose simpler over numbered pages. */
[data-theme] .integ-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
[data-theme] .integ-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base);
}
[data-theme] .integ-page-btn:hover { background: var(--hover-bg); border-color: var(--hover-border); }
[data-theme] .integ-page-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
[data-theme] .integ-page-info {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  min-width: 80px;
  text-align: center;
}
/* ============= How it works ============= */
[data-theme] .how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
[data-theme] .how-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  transition: border-color var(--t-slow);
}
[data-theme] .how-card:hover { border-color: var(--line-2); }
[data-theme] .how-num {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 18px;
}
[data-theme] .how-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
[data-theme] .how-card p {
  color: var(--fg-3);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}
/* The animated illustrations inside how-cards (typed cursor, progress bars,
   mock window) — landing-specific micro-illustrations. */
[data-theme] .how-illus {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 24px;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  height: 140px;
  overflow: hidden;
  position: relative;
}
[data-theme] .how-illus .typed { color: var(--fg); }
[data-theme] .how-illus .cur {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--accent);
  vertical-align: -2px;
  animation: landing-blink 1s steps(1) infinite;
}
@keyframes landing-blink { 50% { opacity: 0; } }
[data-theme] .how-illus .row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
[data-theme] .how-illus .row:last-child { border-bottom: 0; }
[data-theme] .how-illus .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
[data-theme] .how-illus .bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  position: relative;
}
[data-theme] .how-illus .bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent);
  border-radius: 3px;
}
[data-theme] .how-illus .bar.b1::after { width: 30%; }
[data-theme] .how-illus .bar.b2::after { width: 65%; }
[data-theme] .how-illus .bar.b3::after { width: 95%; }
[data-theme] .how-illus .ship-window {
  position: absolute;
  inset: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
[data-theme] .how-illus .ship-bar {
  height: 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}
[data-theme] .how-illus .ship-bar i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-2);
  display: inline-block;
  font-style: normal;
}
[data-theme] .how-illus .ship-bar i:first-child { background: var(--accent); }
[data-theme] .how-illus .ship-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
}
/* ============= Ready CTA ============= */
[data-theme] .ready {
  text-align: center;
  padding: 120px 32px;
  border-top: 1px solid var(--line);
}
[data-theme] .ready h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 16px 0 32px;
}
[data-theme] .ready-cta-btn {
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
  gap: 8px;
}
/* ============= Capability row ============= */
[data-theme] .caps-section { padding-top: 80px; }
[data-theme] .caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
[data-theme] .cap-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color var(--t-slow);
}
[data-theme] .cap-card:hover { border-color: var(--line-2); }
[data-theme] .cap-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
[data-theme] .cap-icon svg { width: 20px; height: 20px; display: block; }
[data-theme] .cap-card h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--fg);
}
[data-theme] .cap-card p {
  margin: 0;
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.5;
}
/* ============= Footer ============= */
[data-theme] footer.foot {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
}
[data-theme] .foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 56px;
}
[data-theme] .foot-brand p {
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.5;
  max-width: 280px;
  margin: 16px 0 0;
}
[data-theme] .foot h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin: 0 0 16px;
  font-weight: 600;
}
[data-theme] .foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
[data-theme] .foot ul a {
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14px;
}
[data-theme] .foot ul a:hover { color: var(--fg); }
[data-theme] .foot-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-3);
  font-size: 13px;
  font-family: var(--font-mono);
}
[data-theme] .socials { display: flex; gap: 8px; }
[data-theme] .socials a {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--fg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
[data-theme] .socials a:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line-2);
}
/* ============= Responsive ============= */
@media (max-width: 1180px) {
  [data-theme] .nav-status { display: none; }
}
@media (max-width: 1040px) {
  [data-theme] .nav-links { display: none; }
}
@media (max-width: 920px) {
  [data-theme] .how-grid { grid-template-columns: 1fr; }
  [data-theme] .caps-grid { grid-template-columns: 1fr 1fr; }
  [data-theme] .integ-grid { grid-template-columns: 1fr 1fr; }
  [data-theme] .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  [data-theme] .nav-inner { height: 56px; }
  [data-theme] .nav-right .btn:not(.btn-primary) { display: none; }
  [data-theme] .nav-right .btn-primary { height: 32px; padding: 0 12px; font-size: 13px; }
  [data-theme] .icon-btn { width: 32px; height: 32px; }

  [data-theme] .hero { padding: 56px 0 64px; }
  [data-theme] .release-pill { font-size: 12px; padding: 4px 12px 4px 4px; }
  [data-theme] .release-pill .tag { font-size: 9px; padding: 3px 7px; }
  [data-theme] h1.headline { font-size: clamp(30px, 9vw, 42px); margin-bottom: 16px; }
  [data-theme] .subhead { font-size: 15px; margin-bottom: 28px; padding: 0 4px; }

  [data-theme] .composer-input-row { padding: 14px 14px 4px; }
  [data-theme] .composer textarea { font-size: 15px; min-height: 72px; }
  [data-theme] .composer-foot { padding: 8px 8px 8px; flex-wrap: wrap; gap: 6px; }

  [data-theme] .chips { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
  [data-theme] .chip { font-size: 12px; padding: 7px 10px; }
  [data-theme] .chip:nth-child(n+5) { display: none; }

  [data-theme] section.block { padding: 64px 0; }
  [data-theme] section.block.tight { padding: 48px 0; }
  [data-theme] .section-head { margin-bottom: 32px; }
  [data-theme] .section-head h2 { font-size: 26px; }
  [data-theme] .section-head p { font-size: 15px; }

  [data-theme] .how-card { padding: 22px; }
  [data-theme] .how-illus { height: 110px; }

  [data-theme] .caps-grid { grid-template-columns: 1fr; }
  [data-theme] .cap-card { padding: 20px; }

  [data-theme] .integ-grid { grid-template-columns: 1fr; }
  [data-theme] .integ-card { padding: 14px; }

  [data-theme] .ready { padding: 64px 20px; }
  [data-theme] .ready h2 { font-size: 28px; margin-bottom: 24px; }

  [data-theme] footer.foot { padding: 48px 0 28px; }
  [data-theme] .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 32px; }
  [data-theme] .foot-brand { grid-column: 1 / -1; }
  [data-theme] .foot-bottom {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    padding-top: 18px;
  }
}
@media (max-width: 420px) {
  [data-theme] .foot-grid { grid-template-columns: 1fr; }
}
/* Import social proof bar styles */
/* Smooth scrolling for anchor navigation (e.g. #apps, #integrations) so
   in-page jumps animate instead of instant-snapping after sign-in. */
html {
  scroll-behavior: smooth;
}
/* Remove default link underlines */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
/* Custom scrollbar styles - hidden by default, visible on hover */
/* Webkit browsers (Chrome, Safari, Edge) */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 3px;
}
/* Show scrollbar on hover */
.custom-scrollbar:hover {
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.3);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.5);
}
/* Dark mode scrollbar colors */
.dark .custom-scrollbar:hover {
  scrollbar-color: rgba(75, 85, 99, 0.3) transparent;
}
.dark .custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(75, 85, 99, 0.3);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(75, 85, 99, 0.5);
}
/* Utility class to completely hide scrollbar (use sparingly) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
/* Apply custom scrollbar to all textareas and inputs by default */
/* Hidden by default, subtle appearance on hover */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"] {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
textarea::-webkit-scrollbar,
input[type="text"]::-webkit-scrollbar,
input[type="email"]::-webkit-scrollbar,
input[type="password"]::-webkit-scrollbar,
input[type="search"]::-webkit-scrollbar,
input[type="url"]::-webkit-scrollbar,
input[type="tel"]::-webkit-scrollbar,
input[type="number"]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
textarea::-webkit-scrollbar-track,
input[type="text"]::-webkit-scrollbar-track,
input[type="email"]::-webkit-scrollbar-track,
input[type="password"]::-webkit-scrollbar-track,
input[type="search"]::-webkit-scrollbar-track,
input[type="url"]::-webkit-scrollbar-track,
input[type="tel"]::-webkit-scrollbar-track,
input[type="number"]::-webkit-scrollbar-track {
  background: transparent;
}
textarea::-webkit-scrollbar-thumb,
input[type="text"]::-webkit-scrollbar-thumb,
input[type="email"]::-webkit-scrollbar-thumb,
input[type="password"]::-webkit-scrollbar-thumb,
input[type="search"]::-webkit-scrollbar-thumb,
input[type="url"]::-webkit-scrollbar-thumb,
input[type="tel"]::-webkit-scrollbar-thumb,
input[type="number"]::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 3px;
}
/* Show scrollbar on hover */
textarea:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover {
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}
textarea:hover::-webkit-scrollbar-thumb,
input[type="text"]:hover::-webkit-scrollbar-thumb,
input[type="email"]:hover::-webkit-scrollbar-thumb,
input[type="password"]:hover::-webkit-scrollbar-thumb,
input[type="search"]:hover::-webkit-scrollbar-thumb,
input[type="url"]:hover::-webkit-scrollbar-thumb,
input[type="tel"]:hover::-webkit-scrollbar-thumb,
input[type="number"]:hover::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.3);
}
textarea::-webkit-scrollbar-thumb:hover,
input[type="text"]::-webkit-scrollbar-thumb:hover,
input[type="email"]::-webkit-scrollbar-thumb:hover,
input[type="password"]::-webkit-scrollbar-thumb:hover,
input[type="search"]::-webkit-scrollbar-thumb:hover,
input[type="url"]::-webkit-scrollbar-thumb:hover,
input[type="tel"]::-webkit-scrollbar-thumb:hover,
input[type="number"]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.5);
}
/* Dark mode scrollbar colors for inputs/textareas */
.dark textarea:hover,
.dark input[type="text"]:hover,
.dark input[type="email"]:hover,
.dark input[type="password"]:hover,
.dark input[type="search"]:hover,
.dark input[type="url"]:hover,
.dark input[type="tel"]:hover,
.dark input[type="number"]:hover {
  scrollbar-color: rgba(75, 85, 99, 0.3) transparent;
}
.dark textarea:hover::-webkit-scrollbar-thumb,
.dark input[type="text"]:hover::-webkit-scrollbar-thumb,
.dark input[type="email"]:hover::-webkit-scrollbar-thumb,
.dark input[type="password"]:hover::-webkit-scrollbar-thumb,
.dark input[type="search"]:hover::-webkit-scrollbar-thumb,
.dark input[type="url"]:hover::-webkit-scrollbar-thumb,
.dark input[type="tel"]:hover::-webkit-scrollbar-thumb,
.dark input[type="number"]:hover::-webkit-scrollbar-thumb {
  background-color: rgba(75, 85, 99, 0.3);
}
.dark textarea::-webkit-scrollbar-thumb:hover,
.dark input[type="text"]::-webkit-scrollbar-thumb:hover,
.dark input[type="email"]::-webkit-scrollbar-thumb:hover,
.dark input[type="password"]::-webkit-scrollbar-thumb:hover,
.dark input[type="search"]::-webkit-scrollbar-thumb:hover,
.dark input[type="url"]::-webkit-scrollbar-thumb:hover,
.dark input[type="tel"]::-webkit-scrollbar-thumb:hover,
.dark input[type="number"]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(75, 85, 99, 0.5);
}
.\*\:focus-visible > *.select2-selection--single,.\*\:focus-visible > * .select2-selection--multiple {
    }
.dark\:prose-invert:is(.dark *){
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
.marker\:text-\[var\(--info-fg\)\] *::marker{
  color: var(--info-fg);
}
.marker\:text-\[var\(--info-fg\)\]::marker{
  color: var(--info-fg);
}
.file\:mr-4::file-selector-button{
  margin-right: 1rem;
}
.file\:cursor-pointer::file-selector-button{
  cursor: pointer;
}
.file\:rounded-lg::file-selector-button{
  border-radius: 0.5rem;
}
.file\:rounded-md::file-selector-button{
  border-radius: 0.375rem;
}
.file\:rounded-xl::file-selector-button{
  border-radius: 0.75rem;
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-blue-50::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.file\:bg-gray-100::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgb(224 228 238 / var(--tw-bg-opacity, 1));
}
.file\:px-4::file-selector-button{
  padding-left: 1rem;
  padding-right: 1rem;
}
.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button{
  font-weight: 500;
}
.file\:text-blue-700::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.file\:text-gray-700::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(37 40 45 / var(--tw-text-opacity, 1));
}
.placeholder\:text-gray-400::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(127 140 153 / var(--tw-text-opacity, 1));
}
.placeholder\:text-gray-400::placeholder{
  --tw-text-opacity: 1;
  color: rgb(127 140 153 / var(--tw-text-opacity, 1));
}
.backdrop\:bg-black\/50::backdrop{
  background-color: rgb(0 0 0 / 0.5);
}
.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}
.after\:left-\[2px\]::after{
  content: var(--tw-content);
  left: 2px;
}
.after\:top-\[2px\]::after{
  content: var(--tw-content);
  top: 2px;
}
.after\:h-5::after{
  content: var(--tw-content);
  height: 1.25rem;
}
.after\:w-5::after{
  content: var(--tw-content);
  width: 1.25rem;
}
.after\:rounded-full::after{
  content: var(--tw-content);
  border-radius: 9999px;
}
.after\:border::after{
  content: var(--tw-content);
  border-width: 1px;
}
.after\:border-gray-300::after{
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-border-opacity, 1));
}
.after\:bg-white::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.after\:transition-all::after{
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}
.last\:border-0:last-child{
  border-width: 0px;
}
.last\:border-r-0:last-child{
  border-right-width: 0px;
}
.focus-within\:border-gray-400:focus-within{
  --tw-border-opacity: 1;
  border-color: rgb(127 140 153 / var(--tw-border-opacity, 1));
}
.focus-within\:ring-1:focus-within{
  --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-within\:ring-gray-200:focus-within{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(208 210 212 / var(--tw-ring-opacity, 1));
}
.hover\:h-2:hover{
  height: 0.5rem;
}
.hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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\:-translate-y-1:hover{
  --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));
}
.hover\:scale-105: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));
}
.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\:scale-\[1\.02\]:hover{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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\:border-b-2:hover{
  border-bottom-width: 2px;
}
.hover\:border-\[var\(--line-2\)\]:hover{
  border-color: var(--line-2);
}
.hover\:border-amber-500\/50:hover{
  border-color: rgb(245 158 11 / 0.5);
}
.hover\:border-blue-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-500\/50:hover{
  border-color: rgb(59 130 246 / 0.5);
}
.hover\:border-cyan-500\/50:hover{
  border-color: rgb(6 182 212 / 0.5);
}
.hover\:border-editor-border:hover{
  border-color: var(--ed-border);
}
.hover\:border-editor-border-subtle:hover{
  border-color: var(--ed-border-subtle);
}
.hover\:border-editor-text-3:hover{
  border-color: var(--ed-text-tertiary);
}
.hover\:border-emerald-500\/50:hover{
  border-color: rgb(16 185 129 / 0.5);
}
.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(127 140 153 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-600:hover{
  --tw-border-opacity: 1;
  border-color: rgb(51 64 77 / var(--tw-border-opacity, 1));
}
.hover\:border-orange-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(229 105 51 / var(--tw-border-opacity, 1));
}
.hover\:border-primary-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(130 239 148 / var(--tw-border-opacity, 1));
}
.hover\:border-primary-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(107 236 129 / var(--tw-border-opacity, 1));
}
.hover\:border-primary-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
}
.hover\:border-primary-500\/30:hover{
  border-color: rgb(69 231 96 / 0.3);
}
.hover\:border-primary-500\/50:hover{
  border-color: rgb(69 231 96 / 0.5);
}
.hover\:border-purple-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}
.hover\:border-purple-500\/50:hover{
  border-color: rgb(168 85 247 / 0.5);
}
.hover\:border-secondary-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(163 118 223 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#006399\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 99 153 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#006ba1\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 107 161 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#0F172A\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1a8cd8\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(26 140 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1a91da\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(26 145 218 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#365899\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(54 88 153 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#374151\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#E8EBED\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(232 235 237 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[var\(--bg-2\)\]:hover{
  background-color: var(--bg-2);
}
.hover\:bg-\[var\(--bg-3\)\]:hover{
  background-color: var(--bg-3);
}
.hover\:bg-\[var\(--hover-bg\)\]:hover{
  background-color: var(--hover-bg);
}
.hover\:bg-amber-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/5:hover{
  background-color: rgb(0 0 0 / 0.05);
}
.hover\:bg-black\/80:hover{
  background-color: rgb(0 0 0 / 0.8);
}
.hover\:bg-blue-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500\/20:hover{
  background-color: rgb(59 130 246 / 0.2);
}
.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-600\/30:hover{
  background-color: rgb(37 99 235 / 0.3);
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.hover\:bg-editor-accent-blue:hover{
  background-color: var(--ed-accent-blue);
}
.hover\:bg-editor-accent-green:hover{
  background-color: var(--ed-accent-green);
}
.hover\:bg-editor-surface-2:hover{
  background-color: var(--ed-surface-2);
}
.hover\:bg-editor-surface-3:hover{
  background-color: var(--ed-surface-3);
}
.hover\:bg-editor-surface-hover:hover{
  background-color: var(--ed-surface-hover);
}
.hover\:bg-emerald-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(224 228 238 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(208 210 212 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(179 185 192 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(127 140 153 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 64 77 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-600\/30:hover{
  background-color: rgb(51 64 77 / 0.3);
}
.hover\:bg-gray-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-900:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(27 28 29 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(134 239 172 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600\/30:hover{
  background-color: rgb(22 163 74 / 0.3);
}
.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 197 176 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(240 169 138 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(202 62 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(158 48 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-pink-500\/20:hover{
  background-color: rgb(236 72 153 / 0.2);
}
.hover\:bg-primary-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(198 248 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(107 236 129 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 239 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-500\/10:hover{
  background-color: rgb(69 231 96 / 0.1);
}
.hover\:bg-primary-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(48 164 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-600\/30:hover{
  background-color: rgb(147 51 234 / 0.3);
}
.hover\:bg-purple-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600\/30:hover{
  background-color: rgb(220 38 38 / 0.3);
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 205 211 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(212 191 240 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(192 161 233 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / 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-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/20:hover{
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/30:hover{
  background-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-white\/50:hover{
  background-color: rgb(255 255 255 / 0.5);
}
.hover\:bg-white\/\[0\.02\]:hover{
  background-color: rgb(255 255 255 / 0.02);
}
.hover\:bg-yellow-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-600\/30:hover{
  background-color: rgb(202 138 4 / 0.3);
}
.hover\:bg-yellow-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(161 98 7 / var(--tw-bg-opacity, 1));
}
.hover\:from-blue-700:hover{
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-orange-400:hover{
  --tw-gradient-from: #e56933 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 105 51 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-primary-100:hover{
  --tw-gradient-from: #c6f8ce var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(198 248 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-primary-600:hover{
  --tw-gradient-from: #40d258 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(64 210 88 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-primary-700:hover{
  --tw-gradient-from: #30a444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(48 164 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-purple-400:hover{
  --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-purple-600:hover{
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-purple-700:hover{
  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-secondary-100:hover{
  --tw-gradient-from: #d4bff0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(212 191 240 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-yellow-600:hover{
  --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-blue-700:hover{
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.hover\:to-cyan-700:hover{
  --tw-gradient-to: #0e7490 var(--tw-gradient-to-position);
}
.hover\:to-indigo-700:hover{
  --tw-gradient-to: #4338ca var(--tw-gradient-to-position);
}
.hover\:to-pink-400:hover{
  --tw-gradient-to: #f472b6 var(--tw-gradient-to-position);
}
.hover\:to-primary-200:hover{
  --tw-gradient-to: #aaf4b6 var(--tw-gradient-to-position);
}
.hover\:to-primary-400:hover{
  --tw-gradient-to: #6bec81 var(--tw-gradient-to-position);
}
.hover\:to-primary-800:hover{
  --tw-gradient-to: #277f35 var(--tw-gradient-to-position);
}
.hover\:to-purple-500:hover{
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}
.hover\:to-purple-700:hover{
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}
.hover\:to-red-400:hover{
  --tw-gradient-to: #f87171 var(--tw-gradient-to-position);
}
.hover\:to-secondary-200:hover{
  --tw-gradient-to: #c0a1e9 var(--tw-gradient-to-position);
}
.hover\:to-yellow-700:hover{
  --tw-gradient-to: #a16207 var(--tw-gradient-to-position);
}
.hover\:text-\[\#001121\]:hover{
  --tw-text-opacity: 1;
  color: rgb(0 17 33 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#33404D\]:hover{
  --tw-text-opacity: 1;
  color: rgb(51 64 77 / var(--tw-text-opacity, 1));
}
.hover\:text-\[var\(--fg\)\]:hover{
  color: var(--fg);
}
.hover\:text-\[var\(--fg-2\)\]:hover{
  color: var(--fg-2);
}
.hover\:text-amber-600:hover{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-800:hover{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-900:hover{
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-300:hover{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-500:hover{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-700:hover{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-900:hover{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.hover\:text-editor-text-1:hover{
  color: var(--ed-text-primary);
}
.hover\:text-editor-text-2:hover{
  color: var(--ed-text-secondary);
}
.hover\:text-editor-text-3:hover{
  color: var(--ed-text-tertiary);
}
.hover\:text-emerald-200:hover{
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-300:hover{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-900:hover{
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-200:hover{
  --tw-text-opacity: 1;
  color: rgb(208 210 212 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-300:hover{
  --tw-text-opacity: 1;
  color: rgb(179 185 192 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover{
  --tw-text-opacity: 1;
  color: rgb(84 95 106 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(51 64 77 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgb(37 40 45 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover{
  --tw-text-opacity: 1;
  color: rgb(37 40 45 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(27 28 29 / var(--tw-text-opacity, 1));
}
.hover\:text-green-200:hover{
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.hover\:text-green-600:hover{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.hover\:text-green-700:hover{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.hover\:text-green-800:hover{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.hover\:text-green-900:hover{
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-600:hover{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-800:hover{
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.hover\:text-orange-700:hover{
  --tw-text-opacity: 1;
  color: rgb(158 48 0 / var(--tw-text-opacity, 1));
}
.hover\:text-orange-800:hover{
  --tw-text-opacity: 1;
  color: rgb(122 37 0 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-300:hover{
  --tw-text-opacity: 1;
  color: rgb(130 239 148 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-400:hover{
  --tw-text-opacity: 1;
  color: rgb(107 236 129 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-500:hover{
  --tw-text-opacity: 1;
  color: rgb(69 231 96 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-600:hover{
  --tw-text-opacity: 1;
  color: rgb(64 210 88 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-700:hover{
  --tw-text-opacity: 1;
  color: rgb(48 164 68 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-800:hover{
  --tw-text-opacity: 1;
  color: rgb(39 127 53 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-900:hover{
  --tw-text-opacity: 1;
  color: rgb(30 97 40 / var(--tw-text-opacity, 1));
}
.hover\:text-purple-300:hover{
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.hover\:text-purple-700:hover{
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.hover\:text-purple-800:hover{
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.hover\:text-purple-900:hover{
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}
.hover\:text-red-200:hover{
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.hover\:text-red-300:hover{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:text-red-800:hover{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.hover\:text-red-900:hover{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.hover\:text-secondary-700:hover{
  --tw-text-opacity: 1;
  color: rgb(84 36 147 / var(--tw-text-opacity, 1));
}
.hover\:text-semantic-secondary:hover{
  color: var(--text-secondary);
}
.hover\:text-slate-400:hover{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-600:hover{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-400:hover{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-600:hover{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-700:hover{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-800:hover{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-900:hover{
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:no-underline:hover{
  text-decoration-line: none;
}
.hover\:opacity-100:hover{
  opacity: 1;
}
.hover\:opacity-40:hover{
  opacity: 0.4;
}
.hover\:opacity-70:hover{
  opacity: 0.7;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 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);
}
.hover\:shadow-md:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -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);
}
.hover\:shadow-sm:hover{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xl:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-primary-500\/30:hover{
  --tw-shadow-color: rgb(69 231 96 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-primary-500\/40:hover{
  --tw-shadow-color: rgb(69 231 96 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-red-500\/30:hover{
  --tw-shadow-color: rgb(239 68 68 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:brightness-95:hover{
  --tw-brightness: brightness(.95);
  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\:file\:bg-blue-100::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.hover\:file\:bg-gray-200::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(208 210 212 / var(--tw-bg-opacity, 1));
}
.focus\:border-\[var\(--accent\)\]:focus{
  border-color: var(--accent);
}
.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-editor-accent-green:focus{
  border-color: var(--ed-accent-green);
}
.focus\:border-emerald-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.focus\:border-green-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.focus\:border-indigo-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.focus\:border-primary-300:focus{
  --tw-border-opacity: 1;
  border-color: rgb(130 239 148 / var(--tw-border-opacity, 1));
}
.focus\:border-primary-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
}
.focus\:border-purple-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.focus\:border-red-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.focus\:border-transparent:focus{
  border-color: transparent;
}
.focus\:border-yellow-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:outline-offset-0:focus{
  outline-offset: 0px;
}
.focus\:ring: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(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);
}
.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-inset:focus{
  --tw-ring-inset: inset;
}
.focus\:ring-\[var\(--accent\)\]:focus{
  --tw-ring-color: var(--accent);
}
.focus\:ring-amber-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-cyan-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity, 1));
}
.focus\:ring-editor-accent-green:focus{
  --tw-ring-color: var(--ed-accent-green);
}
.focus\:ring-gray-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(179 185 192 / var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-900:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(27 28 29 / var(--tw-ring-opacity, 1));
}
.focus\:ring-green-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.focus\:ring-indigo-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.focus\:ring-orange-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(222 68 0 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(170 244 182 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(130 239 148 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 236 129 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary-500\/20:focus{
  --tw-ring-color: rgb(69 231 96 / 0.2);
}
.focus\:ring-purple-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity, 1));
}
.focus\:ring-purple-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus\:ring-secondary-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(108 46 188 / 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-yellow-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity, 1));
}
.focus\:ring-opacity-50:focus{
  --tw-ring-opacity: 0.5;
}
.focus\:ring-offset-1:focus{
  --tw-ring-offset-width: 1px;
}
.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}
.focus\:ring-offset-gray-800:focus{
  --tw-ring-offset-color: #25282d;
}
.focus\:ring-offset-gray-900:focus{
  --tw-ring-offset-color: #1b1c1d;
}
.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-primary-600:focus-visible{
  outline-color: #40d258;
}
.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\.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\:border-primary-300:active{
  --tw-border-opacity: 1;
  border-color: rgb(130 239 148 / var(--tw-border-opacity, 1));
}
.active\:bg-gray-50:active{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 251 / var(--tw-bg-opacity, 1));
}
.active\:bg-primary-800:active{
  --tw-bg-opacity: 1;
  background-color: rgb(39 127 53 / var(--tw-bg-opacity, 1));
}
.active\:shadow-md:active{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -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);
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:cursor-wait:disabled{
  cursor: wait;
}
.disabled\:bg-blue-400:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-gray-300:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(179 185 192 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-slate-200:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.disabled\:from-gray-400:disabled{
  --tw-gradient-from: #7f8c99 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(127 140 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.disabled\:to-gray-500:disabled{
  --tw-gradient-to: #545f6a var(--tw-gradient-to-position);
}
.disabled\:opacity-40:disabled{
  opacity: 0.4;
}
.disabled\:opacity-45:disabled{
  opacity: 0.45;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:shadow-none:disabled{
  --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);
}
.disabled\:hover\:translate-y-0:hover:disabled{
  --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[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-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:hover .group-hover\:visible{
  visibility: visible;
}
.group:hover .group-hover\:block{
  display: block;
}
.group:hover .group-hover\:flex{
  display: flex;
}
.group:hover .group-hover\:translate-x-1{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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\:scale-110{
  --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));
}
.group:hover .group-hover\:scale-\[1\.02\]{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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-editor-accent-green{
  border-color: var(--ed-accent-green);
}
.group:hover .group-hover\:border-primary-400{
  --tw-border-opacity: 1;
  border-color: rgb(107 236 129 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:border-secondary-400{
  --tw-border-opacity: 1;
  border-color: rgb(146 91 217 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
}
.group:hover .group-hover\:bg-primary-200{
  --tw-bg-opacity: 1;
  background-color: rgb(170 244 182 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-primary-50{
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 239 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-primary-500\/20{
  background-color: rgb(69 231 96 / 0.2);
}
.group:hover .group-hover\:text-\[var\(--fg\)\]{
  color: var(--fg);
}
.group:hover .group-hover\:text-\[var\(--fg-2\)\]{
  color: var(--fg-2);
}
.group:hover .group-hover\:text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(51 64 77 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(27 28 29 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-indigo-500{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary-300{
  --tw-text-opacity: 1;
  color: rgb(130 239 148 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary-400{
  --tw-text-opacity: 1;
  color: rgb(107 236 129 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary-500{
  --tw-text-opacity: 1;
  color: rgb(69 231 96 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary-600{
  --tw-text-opacity: 1;
  color: rgb(64 210 88 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary-700{
  --tw-text-opacity: 1;
  color: rgb(48 164 68 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary-800{
  --tw-text-opacity: 1;
  color: rgb(39 127 53 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:underline{
  text-decoration-line: underline;
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.group:hover .group-hover\:opacity-80{
  opacity: 0.8;
}
.group:hover .group-hover\:shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -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);
}
.group:hover .group-hover\:ring-primary-400{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 236 129 / var(--tw-ring-opacity, 1));
}
@media (prefers-color-scheme: dark) {
    /**
     * Custom components
     **/
    /* Color picker */

    /* Date range picker */

        /* navigation arrows */

      /* Clear and Apply buttons wrapper */

    /* Phone field */

    /* Select2 */

      /* For the selected options in the multiple select2 component */

    /* Trix Editor */

      .group:hover .group-hover\:visibletrix-toolbar{
    opacity: 1 !important;
  }

    /* CKEditor */
  }
.peer:checked ~ .peer-checked\: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));
}
.peer:checked ~ .peer-checked\:border-primary-500{
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
}
.peer:checked ~ .peer-checked\:border-transparent{
  border-color: transparent;
}
.peer:checked ~ .peer-checked\:bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:bg-editor-accent-green{
  background-color: var(--ed-accent-green);
}
.peer:checked ~ .peer-checked\:bg-primary-500{
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:bg-purple-600{
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:bg-secondary-600{
  --tw-bg-opacity: 1;
  background-color: rgb(108 46 188 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:after\:translate-x-full::after{
  content: var(--tw-content);
  --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));
}
.peer:checked ~ .peer-checked\:after\:border-white::after{
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.peer:focus ~ .peer-focus\:outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.peer:focus ~ .peer-focus\: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 ~ .peer-focus\:ring-4{
  --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(4px + 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 ~ .peer-focus\:ring-blue-300{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}
.peer:focus ~ .peer-focus\:ring-primary-500\/30{
  --tw-ring-color: rgb(69 231 96 / 0.3);
}
.peer:focus ~ .peer-focus\:ring-purple-300{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity, 1));
}
.peer:focus ~ .peer-focus\:ring-secondary-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(108 46 188 / var(--tw-ring-opacity, 1));
}
.peer:focus-visible ~ .peer-focus-visible\:ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.dark\:divide-gray-600:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(51 64 77 / var(--tw-divide-opacity, 1));
}
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(37 40 45 / var(--tw-divide-opacity, 1));
}
.dark\:divide-red-800:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-divide-opacity, 1));
}
.dark\:divide-red-900\/30:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(127 29 29 / 0.3);
}
.dark\:divide-yellow-800:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-divide-opacity, 1));
}
.dark\:divide-yellow-900\/30:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(113 63 18 / 0.3);
}
.dark\:border:is(.dark *){
  border-width: 1px;
}
.dark\:border-\[color-mix\(in_srgb\2c \#b87cf7_30\%\2c var\(--line\)\)\]:is(.dark *){
  border-color: color-mix(in srgb,#b87cf7 30%,var(--line));
}
.dark\:border-\[color-mix\(in_srgb\2c \#f5c245_30\%\2c var\(--line\)\)\]:is(.dark *){
  border-color: color-mix(in srgb,#f5c245 30%,var(--line));
}
.dark\:border-\[color-mix\(in_srgb\2c var\(--accent\)_30\%\2c var\(--line\)\)\]:is(.dark *){
  border-color: color-mix(in srgb,var(--accent) 30%,var(--line));
}
.dark\:border-\[color-mix\(in_srgb\2c var\(--info-fg\)_30\%\2c var\(--line\)\)\]:is(.dark *){
  border-color: color-mix(in srgb,var(--info-fg) 30%,var(--line));
}
.dark\:border-\[color-mix\(in_srgb\2c var\(--info-fg\)_32\%\2c var\(--line\)\)\]:is(.dark *){
  border-color: color-mix(in srgb,var(--info-fg) 32%,var(--line));
}
.dark\:border-\[color-mix\(in_srgb\2c var\(--warning-fg\)_30\%\2c var\(--line\)\)\]:is(.dark *){
  border-color: color-mix(in srgb,var(--warning-fg) 30%,var(--line));
}
.dark\:border-\[var\(--accent\)\]:is(.dark *){
  border-color: var(--accent);
}
.dark\:border-\[var\(--line\)\]:is(.dark *){
  border-color: var(--line);
}
.dark\:border-amber-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}
.dark\:border-amber-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}
.dark\:border-amber-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}
.dark\:border-amber-800\/40:is(.dark *){
  border-color: rgb(146 64 14 / 0.4);
}
.dark\:border-amber-900\/50:is(.dark *){
  border-color: rgb(120 53 15 / 0.5);
}
.dark\:border-blue-400:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-500:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-500\/30:is(.dark *){
  border-color: rgb(59 130 246 / 0.3);
}
.dark\:border-blue-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-700\/40:is(.dark *){
  border-color: rgb(29 78 216 / 0.4);
}
.dark\:border-blue-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800\/40:is(.dark *){
  border-color: rgb(30 64 175 / 0.4);
}
.dark\:border-blue-800\/50:is(.dark *){
  border-color: rgb(30 64 175 / 0.5);
}
.dark\:border-blue-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}
.dark\:border-brand-yellow-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(96 71 15 / var(--tw-border-opacity, 1));
}
.dark\:border-editor-border:is(.dark *){
  border-color: var(--ed-border);
}
.dark\:border-editor-border-subtle:is(.dark *){
  border-color: var(--ed-border-subtle);
}
.dark\:border-emerald-500\/30:is(.dark *){
  border-color: rgb(16 185 129 / 0.3);
}
.dark\:border-emerald-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-500:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(84 95 106 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(51 64 77 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-600\/50:is(.dark *){
  border-color: rgb(51 64 77 / 0.5);
}
.dark\:border-gray-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(37 40 45 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(37 40 45 / var(--tw-border-opacity, 1));
}
.dark\:border-green-400:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.dark\:border-green-500:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.dark\:border-green-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.dark\:border-green-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
}
.dark\:border-green-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}
.dark\:border-green-800\/50:is(.dark *){
  border-color: rgb(22 101 52 / 0.5);
}
.dark\:border-green-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(20 83 45 / var(--tw-border-opacity, 1));
}
.dark\:border-indigo-400:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.dark\:border-indigo-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(67 56 202 / var(--tw-border-opacity, 1));
}
.dark\:border-indigo-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(55 48 163 / var(--tw-border-opacity, 1));
}
.dark\:border-orange-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(158 48 0 / var(--tw-border-opacity, 1));
}
.dark\:border-orange-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(122 37 0 / var(--tw-border-opacity, 1));
}
.dark\:border-orange-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(93 29 0 / var(--tw-border-opacity, 1));
}
.dark\:border-primary-500:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
}
.dark\:border-primary-500\/60:is(.dark *){
  border-color: rgb(69 231 96 / 0.6);
}
.dark\:border-primary-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(64 210 88 / var(--tw-border-opacity, 1));
}
.dark\:border-primary-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(48 164 68 / var(--tw-border-opacity, 1));
}
.dark\:border-primary-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(39 127 53 / var(--tw-border-opacity, 1));
}
.dark\:border-purple-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
}
.dark\:border-purple-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(126 34 206 / var(--tw-border-opacity, 1));
}
.dark\:border-purple-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));
}
.dark\:border-purple-800\/40:is(.dark *){
  border-color: rgb(107 33 168 / 0.4);
}
.dark\:border-purple-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(88 28 135 / var(--tw-border-opacity, 1));
}
.dark\:border-red-500:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.dark\:border-red-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.dark\:border-red-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.dark\:border-red-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.dark\:border-red-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(127 29 29 / var(--tw-border-opacity, 1));
}
.dark\:border-red-900\/50:is(.dark *){
  border-color: rgb(127 29 29 / 0.5);
}
.dark\:border-rose-500\/30:is(.dark *){
  border-color: rgb(244 63 94 / 0.3);
}
.dark\:border-secondary-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(108 46 188 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.dark\:border-teal-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(17 94 89 / var(--tw-border-opacity, 1));
}
.dark\:border-violet-400:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}
.dark\:border-violet-500\/30:is(.dark *){
  border-color: rgb(139 92 246 / 0.3);
}
.dark\:border-violet-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(91 33 182 / var(--tw-border-opacity, 1));
}
.dark\:border-yellow-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(161 98 7 / var(--tw-border-opacity, 1));
}
.dark\:border-yellow-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}
.dark\:border-yellow-800\/30:is(.dark *){
  border-color: rgb(133 77 14 / 0.3);
}
.dark\:border-yellow-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(113 63 18 / var(--tw-border-opacity, 1));
}
.dark\:border-yellow-900\/50:is(.dark *){
  border-color: rgb(113 63 18 / 0.5);
}
.dark\:bg-\[color-mix\(in_srgb\2c \#b87cf7_10\%\2c var\(--bg-2\)\)\]:is(.dark *){
  background-color: color-mix(in srgb,#b87cf7 10%,var(--bg-2));
}
.dark\:bg-\[color-mix\(in_srgb\2c var\(--accent\)_10\%\2c var\(--bg-2\)\)\]:is(.dark *){
  background-color: color-mix(in srgb,var(--accent) 10%,var(--bg-2));
}
.dark\:bg-\[color-mix\(in_srgb\2c var\(--danger-fg\)_14\%\2c var\(--bg-2\)\)\]:is(.dark *){
  background-color: color-mix(in srgb,var(--danger-fg) 14%,var(--bg-2));
}
.dark\:bg-\[color-mix\(in_srgb\2c var\(--info-fg\)_14\%\2c var\(--bg\)\)\]:is(.dark *){
  background-color: color-mix(in srgb,var(--info-fg) 14%,var(--bg));
}
.dark\:bg-\[var\(--bg\)\]:is(.dark *){
  background-color: var(--bg);
}
.dark\:bg-\[var\(--bg-1\)\]:is(.dark *){
  background-color: var(--bg-1);
}
.dark\:bg-\[var\(--bg-2\)\]:is(.dark *){
  background-color: var(--bg-2);
}
.dark\:bg-\[var\(--bg-3\)\]:is(.dark *){
  background-color: var(--bg-3);
}
.dark\:bg-amber-500\/15:is(.dark *){
  background-color: rgb(245 158 11 / 0.15);
}
.dark\:bg-amber-500\/20:is(.dark *){
  background-color: rgb(245 158 11 / 0.2);
}
.dark\:bg-amber-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
}
.dark\:bg-amber-800\/50:is(.dark *){
  background-color: rgb(146 64 14 / 0.5);
}
.dark\:bg-amber-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1));
}
.dark\:bg-amber-900\/10:is(.dark *){
  background-color: rgb(120 53 15 / 0.1);
}
.dark\:bg-amber-900\/20:is(.dark *){
  background-color: rgb(120 53 15 / 0.2);
}
.dark\:bg-amber-900\/30:is(.dark *){
  background-color: rgb(120 53 15 / 0.3);
}
.dark\:bg-amber-900\/40:is(.dark *){
  background-color: rgb(120 53 15 / 0.4);
}
.dark\:bg-amber-900\/50:is(.dark *){
  background-color: rgb(120 53 15 / 0.5);
}
.dark\:bg-amber-950\/20:is(.dark *){
  background-color: rgb(69 26 3 / 0.2);
}
.dark\:bg-amber-950\/40:is(.dark *){
  background-color: rgb(69 26 3 / 0.4);
}
.dark\:bg-black:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-400:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-900\/10:is(.dark *){
  background-color: rgb(30 58 138 / 0.1);
}
.dark\:bg-blue-900\/20:is(.dark *){
  background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/30:is(.dark *){
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-blue-900\/40:is(.dark *){
  background-color: rgb(30 58 138 / 0.4);
}
.dark\:bg-blue-900\/50:is(.dark *){
  background-color: rgb(30 58 138 / 0.5);
}
.dark\:bg-brand-yellow-900\/20:is(.dark *){
  background-color: rgb(76 55 8 / 0.2);
}
.dark\:bg-cyan-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(21 94 117 / var(--tw-bg-opacity, 1));
}
.dark\:bg-cyan-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 78 99 / var(--tw-bg-opacity, 1));
}
.dark\:bg-cyan-900\/30:is(.dark *){
  background-color: rgb(22 78 99 / 0.3);
}
.dark\:bg-cyan-900\/40:is(.dark *){
  background-color: rgb(22 78 99 / 0.4);
}
.dark\:bg-cyan-900\/50:is(.dark *){
  background-color: rgb(22 78 99 / 0.5);
}
.dark\:bg-editor-canvas:is(.dark *){
  background-color: var(--ed-canvas);
}
.dark\:bg-editor-surface-1:is(.dark *){
  background-color: var(--ed-surface-1);
}
.dark\:bg-editor-surface-2:is(.dark *){
  background-color: var(--ed-surface-2);
}
.dark\:bg-editor-surface-3:is(.dark *){
  background-color: var(--ed-surface-3);
}
.dark\:bg-emerald-500\/15:is(.dark *){
  background-color: rgb(16 185 129 / 0.15);
}
.dark\:bg-emerald-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(6 78 59 / var(--tw-bg-opacity, 1));
}
.dark\:bg-emerald-900\/40:is(.dark *){
  background-color: rgb(6 78 59 / 0.4);
}
.dark\:bg-emerald-900\/50:is(.dark *){
  background-color: rgb(6 78 59 / 0.5);
}
.dark\:bg-gray-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 64 77 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700\/30:is(.dark *){
  background-color: rgb(37 40 45 / 0.3);
}
.dark\:bg-gray-700\/50:is(.dark *){
  background-color: rgb(37 40 45 / 0.5);
}
.dark\:bg-gray-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-800\/50:is(.dark *){
  background-color: rgb(37 40 45 / 0.5);
}
.dark\:bg-gray-800\/80:is(.dark *){
  background-color: rgb(37 40 45 / 0.8);
}
.dark\:bg-gray-800\/95:is(.dark *){
  background-color: rgb(37 40 45 / 0.95);
}
.dark\:bg-gray-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(27 28 29 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-900\/20:is(.dark *){
  background-color: rgb(27 28 29 / 0.2);
}
.dark\:bg-gray-900\/30:is(.dark *){
  background-color: rgb(27 28 29 / 0.3);
}
.dark\:bg-gray-900\/40:is(.dark *){
  background-color: rgb(27 28 29 / 0.4);
}
.dark\:bg-gray-900\/50:is(.dark *){
  background-color: rgb(27 28 29 / 0.5);
}
.dark\:bg-gray-900\/80:is(.dark *){
  background-color: rgb(27 28 29 / 0.8);
}
.dark\:bg-gray-900\/90:is(.dark *){
  background-color: rgb(27 28 29 / 0.9);
}
.dark\:bg-green-400:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-500:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-900\/10:is(.dark *){
  background-color: rgb(20 83 45 / 0.1);
}
.dark\:bg-green-900\/20:is(.dark *){
  background-color: rgb(20 83 45 / 0.2);
}
.dark\:bg-green-900\/30:is(.dark *){
  background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-green-900\/40:is(.dark *){
  background-color: rgb(20 83 45 / 0.4);
}
.dark\:bg-green-900\/50:is(.dark *){
  background-color: rgb(20 83 45 / 0.5);
}
.dark\:bg-indigo-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 48 163 / var(--tw-bg-opacity, 1));
}
.dark\:bg-indigo-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(49 46 129 / var(--tw-bg-opacity, 1));
}
.dark\:bg-indigo-900\/20:is(.dark *){
  background-color: rgb(49 46 129 / 0.2);
}
.dark\:bg-indigo-900\/30:is(.dark *){
  background-color: rgb(49 46 129 / 0.3);
}
.dark\:bg-indigo-900\/40:is(.dark *){
  background-color: rgb(49 46 129 / 0.4);
}
.dark\:bg-indigo-900\/50:is(.dark *){
  background-color: rgb(49 46 129 / 0.5);
}
.dark\:bg-orange-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(122 37 0 / var(--tw-bg-opacity, 1));
}
.dark\:bg-orange-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(93 29 0 / var(--tw-bg-opacity, 1));
}
.dark\:bg-orange-900\/20:is(.dark *){
  background-color: rgb(93 29 0 / 0.2);
}
.dark\:bg-orange-900\/30:is(.dark *){
  background-color: rgb(93 29 0 / 0.3);
}
.dark\:bg-orange-900\/40:is(.dark *){
  background-color: rgb(93 29 0 / 0.4);
}
.dark\:bg-orange-900\/50:is(.dark *){
  background-color: rgb(93 29 0 / 0.5);
}
.dark\:bg-pink-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(157 23 77 / var(--tw-bg-opacity, 1));
}
.dark\:bg-pink-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(131 24 67 / var(--tw-bg-opacity, 1));
}
.dark\:bg-pink-900\/20:is(.dark *){
  background-color: rgb(131 24 67 / 0.2);
}
.dark\:bg-primary-500:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
}
.dark\:bg-primary-500\/10:is(.dark *){
  background-color: rgb(69 231 96 / 0.1);
}
.dark\:bg-primary-500\/20:is(.dark *){
  background-color: rgb(69 231 96 / 0.2);
}
.dark\:bg-primary-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
}
.dark\:bg-primary-700:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(48 164 68 / var(--tw-bg-opacity, 1));
}
.dark\:bg-primary-700\/30:is(.dark *){
  background-color: rgb(48 164 68 / 0.3);
}
.dark\:bg-primary-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(39 127 53 / var(--tw-bg-opacity, 1));
}
.dark\:bg-primary-800\/30:is(.dark *){
  background-color: rgb(39 127 53 / 0.3);
}
.dark\:bg-primary-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 97 40 / var(--tw-bg-opacity, 1));
}
.dark\:bg-primary-900\/20:is(.dark *){
  background-color: rgb(30 97 40 / 0.2);
}
.dark\:bg-primary-900\/30:is(.dark *){
  background-color: rgb(30 97 40 / 0.3);
}
.dark\:bg-primary-900\/90:is(.dark *){
  background-color: rgb(30 97 40 / 0.9);
}
.dark\:bg-purple-700\/30:is(.dark *){
  background-color: rgb(126 34 206 / 0.3);
}
.dark\:bg-purple-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity, 1));
}
.dark\:bg-purple-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1));
}
.dark\:bg-purple-900\/10:is(.dark *){
  background-color: rgb(88 28 135 / 0.1);
}
.dark\:bg-purple-900\/20:is(.dark *){
  background-color: rgb(88 28 135 / 0.2);
}
.dark\:bg-purple-900\/30:is(.dark *){
  background-color: rgb(88 28 135 / 0.3);
}
.dark\:bg-purple-900\/40:is(.dark *){
  background-color: rgb(88 28 135 / 0.4);
}
.dark\:bg-purple-900\/50:is(.dark *){
  background-color: rgb(88 28 135 / 0.5);
}
.dark\:bg-red-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-900\/10:is(.dark *){
  background-color: rgb(127 29 29 / 0.1);
}
.dark\:bg-red-900\/20:is(.dark *){
  background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-red-900\/30:is(.dark *){
  background-color: rgb(127 29 29 / 0.3);
}
.dark\:bg-red-900\/40:is(.dark *){
  background-color: rgb(127 29 29 / 0.4);
}
.dark\:bg-red-900\/50:is(.dark *){
  background-color: rgb(127 29 29 / 0.5);
}
.dark\:bg-red-950\/20:is(.dark *){
  background-color: rgb(69 10 10 / 0.2);
}
.dark\:bg-red-950\/40:is(.dark *){
  background-color: rgb(69 10 10 / 0.4);
}
.dark\:bg-rose-500\/10:is(.dark *){
  background-color: rgb(244 63 94 / 0.1);
}
.dark\:bg-rose-500\/20:is(.dark *){
  background-color: rgb(244 63 94 / 0.2);
}
.dark\:bg-rose-900\/40:is(.dark *){
  background-color: rgb(136 19 55 / 0.4);
}
.dark\:bg-secondary-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(65 28 114 / var(--tw-bg-opacity, 1));
}
.dark\:bg-secondary-900\/20:is(.dark *){
  background-color: rgb(50 21 87 / 0.2);
}
.dark\:bg-secondary-900\/30:is(.dark *){
  background-color: rgb(50 21 87 / 0.3);
}
.dark\:bg-slate-700\/50:is(.dark *){
  background-color: rgb(51 65 85 / 0.5);
}
.dark\:bg-slate-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:bg-teal-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(17 94 89 / var(--tw-bg-opacity, 1));
}
.dark\:bg-teal-800\/50:is(.dark *){
  background-color: rgb(17 94 89 / 0.5);
}
.dark\:bg-teal-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(19 78 74 / var(--tw-bg-opacity, 1));
}
.dark\:bg-teal-900\/20:is(.dark *){
  background-color: rgb(19 78 74 / 0.2);
}
.dark\:bg-teal-900\/30:is(.dark *){
  background-color: rgb(19 78 74 / 0.3);
}
.dark\:bg-violet-800\/50:is(.dark *){
  background-color: rgb(91 33 182 / 0.5);
}
.dark\:bg-violet-900\/30:is(.dark *){
  background-color: rgb(76 29 149 / 0.3);
}
.dark\:bg-violet-900\/50:is(.dark *){
  background-color: rgb(76 29 149 / 0.5);
}
.dark\:bg-white:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dark\:bg-yellow-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1));
}
.dark\:bg-yellow-800\/50:is(.dark *){
  background-color: rgb(133 77 14 / 0.5);
}
.dark\:bg-yellow-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1));
}
.dark\:bg-yellow-900\/10:is(.dark *){
  background-color: rgb(113 63 18 / 0.1);
}
.dark\:bg-yellow-900\/20:is(.dark *){
  background-color: rgb(113 63 18 / 0.2);
}
.dark\:bg-yellow-900\/30:is(.dark *){
  background-color: rgb(113 63 18 / 0.3);
}
.dark\:bg-yellow-900\/40:is(.dark *){
  background-color: rgb(113 63 18 / 0.4);
}
.dark\:bg-yellow-900\/50:is(.dark *){
  background-color: rgb(113 63 18 / 0.5);
}
.dark\:bg-opacity-80:is(.dark *){
  --tw-bg-opacity: 0.8;
}
.dark\:from-blue-400:is(.dark *){
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-blue-900\/20:is(.dark *){
  --tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-blue-900\/30:is(.dark *){
  --tw-gradient-from: rgb(30 58 138 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-emerald-900\/20:is(.dark *){
  --tw-gradient-from: rgb(6 78 59 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-gray-700:is(.dark *){
  --tw-gradient-from: #25282d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 40 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-gray-800:is(.dark *){
  --tw-gradient-from: #25282d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 40 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-gray-800\/50:is(.dark *){
  --tw-gradient-from: rgb(37 40 45 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 40 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-gray-900:is(.dark *){
  --tw-gradient-from: #1b1c1d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(27 28 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-green-900\/20:is(.dark *){
  --tw-gradient-from: rgb(20 83 45 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-orange-900\/20:is(.dark *){
  --tw-gradient-from: rgb(93 29 0 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(93 29 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-primary-400:is(.dark *){
  --tw-gradient-from: #6bec81 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(107 236 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-primary-900\/20:is(.dark *){
  --tw-gradient-from: rgb(30 97 40 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 97 40 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-primary-900\/30:is(.dark *){
  --tw-gradient-from: rgb(30 97 40 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 97 40 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-primary-900\/40:is(.dark *){
  --tw-gradient-from: rgb(30 97 40 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 97 40 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-purple-900\/20:is(.dark *){
  --tw-gradient-from: rgb(88 28 135 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-secondary-900\/20:is(.dark *){
  --tw-gradient-from: rgb(50 21 87 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(50 21 87 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-secondary-900\/30:is(.dark *){
  --tw-gradient-from: rgb(50 21 87 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(50 21 87 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-yellow-900\/30:is(.dark *){
  --tw-gradient-from: rgb(113 63 18 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(113 63 18 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:via-gray-700:is(.dark *){
  --tw-gradient-to: rgb(37 40 45 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #25282d var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:via-gray-800:is(.dark *){
  --tw-gradient-to: rgb(37 40 45 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #25282d var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:via-gray-900:is(.dark *){
  --tw-gradient-to: rgb(27 28 29 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1b1c1d var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:via-primary-800\/30:is(.dark *){
  --tw-gradient-to: rgb(39 127 53 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(39 127 53 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:to-amber-900\/30:is(.dark *){
  --tw-gradient-to: rgb(120 53 15 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-blue-500:is(.dark *){
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}
.dark\:to-blue-900\/20:is(.dark *){
  --tw-gradient-to: rgb(30 58 138 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-cyan-900\/20:is(.dark *){
  --tw-gradient-to: rgb(22 78 99 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-emerald-900\/20:is(.dark *){
  --tw-gradient-to: rgb(6 78 59 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-gray-600:is(.dark *){
  --tw-gradient-to: #33404d var(--tw-gradient-to-position);
}
.dark\:to-gray-800:is(.dark *){
  --tw-gradient-to: #25282d var(--tw-gradient-to-position);
}
.dark\:to-gray-900:is(.dark *){
  --tw-gradient-to: #1b1c1d var(--tw-gradient-to-position);
}
.dark\:to-indigo-900\/20:is(.dark *){
  --tw-gradient-to: rgb(49 46 129 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-indigo-900\/30:is(.dark *){
  --tw-gradient-to: rgb(49 46 129 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-primary-700\/30:is(.dark *){
  --tw-gradient-to: rgb(48 164 68 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-primary-800\/20:is(.dark *){
  --tw-gradient-to: rgb(39 127 53 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-primary-800\/30:is(.dark *){
  --tw-gradient-to: rgb(39 127 53 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-primary-900\/30:is(.dark *){
  --tw-gradient-to: rgb(30 97 40 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-purple-400:is(.dark *){
  --tw-gradient-to: #c084fc var(--tw-gradient-to-position);
}
.dark\:to-purple-900\/20:is(.dark *){
  --tw-gradient-to: rgb(88 28 135 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-purple-900\/30:is(.dark *){
  --tw-gradient-to: rgb(88 28 135 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-secondary-800\/20:is(.dark *){
  --tw-gradient-to: rgb(65 28 114 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-secondary-800\/30:is(.dark *){
  --tw-gradient-to: rgb(65 28 114 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-secondary-900\/30:is(.dark *){
  --tw-gradient-to: rgb(50 21 87 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-slate-800\/50:is(.dark *){
  --tw-gradient-to: rgb(30 41 59 / 0.5) var(--tw-gradient-to-position);
}
.dark\:to-teal-900\/20:is(.dark *){
  --tw-gradient-to: rgb(19 78 74 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-yellow-900\/20:is(.dark *){
  --tw-gradient-to: rgb(113 63 18 / 0.2) var(--tw-gradient-to-position);
}
.dark\:text-\[\#b87cf7\]:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(184 124 247 / var(--tw-text-opacity, 1));
}
.dark\:text-\[var\(--accent\)\]:is(.dark *){
  color: var(--accent);
}
.dark\:text-\[var\(--accent-text\)\]:is(.dark *){
  color: var(--accent-text);
}
.dark\:text-\[var\(--danger-fg\)\]:is(.dark *){
  color: var(--danger-fg);
}
.dark\:text-\[var\(--fg\)\]:is(.dark *){
  color: var(--fg);
}
.dark\:text-\[var\(--fg-2\)\]:is(.dark *){
  color: var(--fg-2);
}
.dark\:text-\[var\(--fg-3\)\]:is(.dark *){
  color: var(--fg-3);
}
.dark\:text-\[var\(--fg-4\)\]:is(.dark *){
  color: var(--fg-4);
}
.dark\:text-\[var\(--info-fg\)\]:is(.dark *){
  color: var(--info-fg);
}
.dark\:text-\[var\(--warning-fg\)\]:is(.dark *){
  color: var(--warning-fg);
}
.dark\:text-amber-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.dark\:text-cyan-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(207 250 254 / var(--tw-text-opacity, 1));
}
.dark\:text-cyan-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.dark\:text-cyan-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.dark\:text-editor-accent-blue:is(.dark *){
  color: var(--ed-accent-blue);
}
.dark\:text-editor-text-1:is(.dark *){
  color: var(--ed-text-primary);
}
.dark\:text-editor-text-2:is(.dark *){
  color: var(--ed-text-secondary);
}
.dark\:text-editor-text-3:is(.dark *){
  color: var(--ed-text-tertiary);
}
.dark\:text-emerald-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(224 228 238 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(208 210 212 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(179 185 192 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(127 140 153 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(84 95 106 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-600:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(51 64 77 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-900:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(27 28 29 / var(--tw-text-opacity, 1));
}
.dark\:text-green-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
.dark\:text-green-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.dark\:text-green-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-green-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(245 197 176 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(240 169 138 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(233 130 84 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(229 105 51 / var(--tw-text-opacity, 1));
}
.dark\:text-pink-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
.dark\:text-pink-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}
.dark\:text-primary-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(170 244 182 / var(--tw-text-opacity, 1));
}
.dark\:text-primary-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(130 239 148 / var(--tw-text-opacity, 1));
}
.dark\:text-primary-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(107 236 129 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.dark\:text-red-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.dark\:text-red-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400\/80:is(.dark *){
  color: rgb(248 113 113 / 0.8);
}
.dark\:text-red-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.dark\:text-secondary-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(163 118 223 / var(--tw-text-opacity, 1));
}
.dark\:text-secondary-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(146 91 217 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.dark\:text-teal-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(204 251 241 / var(--tw-text-opacity, 1));
}
.dark\:text-teal-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(153 246 228 / var(--tw-text-opacity, 1));
}
.dark\:text-teal-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}
.dark\:text-teal-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(237 233 254 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-white\/60:is(.dark *){
  color: rgb(255 255 255 / 0.6);
}
.dark\:text-yellow-100:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.dark\:placeholder-gray-400:is(.dark *)::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(127 140 153 / var(--tw-placeholder-opacity, 1));
}
.dark\:placeholder-gray-500:is(.dark *)::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(84 95 106 / var(--tw-placeholder-opacity, 1));
}
.dark\:placeholder-gray-500:is(.dark *)::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(84 95 106 / var(--tw-placeholder-opacity, 1));
}
.dark\:mix-blend-lighten:is(.dark *){
  mix-blend-mode: lighten;
}
.dark\:shadow-lg:is(.dark *){
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 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);
}
.dark\:shadow-gray-900\/15:is(.dark *){
  --tw-shadow-color: rgb(27 28 29 / 0.15);
  --tw-shadow: var(--tw-shadow-colored);
}
.dark\:ring-blue-900:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity, 1));
}
.dark\:ring-gray-600:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(51 64 77 / var(--tw-ring-opacity, 1));
}
.dark\:ring-gray-700:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 40 45 / var(--tw-ring-opacity, 1));
}
.dark\:ring-gray-800:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 40 45 / var(--tw-ring-opacity, 1));
}
.dark\:ring-primary-700:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(48 164 68 / var(--tw-ring-opacity, 1));
}
.dark\:ring-primary-900\/40:is(.dark *){
  --tw-ring-color: rgb(30 97 40 / 0.4);
}
.dark\:ring-purple-700:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity, 1));
}
.dark\:ring-red-900\/40:is(.dark *){
  --tw-ring-color: rgb(127 29 29 / 0.4);
}
.dark\:ring-secondary-700:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(84 36 147 / var(--tw-ring-opacity, 1));
}
.dark\:ring-secondary-800:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(65 28 114 / var(--tw-ring-opacity, 1));
}
.dark\:ring-offset-gray-800:is(.dark *){
  --tw-ring-offset-color: #25282d;
}
.dark\:ring-offset-gray-900:is(.dark *){
  --tw-ring-offset-color: #1b1c1d;
}
.dark\:file\:bg-blue-900\/30:is(.dark *)::file-selector-button{
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:file\:bg-gray-700:is(.dark *)::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.dark\:file\:text-blue-400:is(.dark *)::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:file\:text-gray-300:is(.dark *)::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(179 185 192 / var(--tw-text-opacity, 1));
}
.dark\:after\:border-gray-500:is(.dark *)::after{
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(84 95 106 / var(--tw-border-opacity, 1));
}
.dark\:focus-within\:border-\[var\(--hover-border\)\]:focus-within:is(.dark *){
  border-color: var(--hover-border);
}
.dark\:focus-within\:ring-\[var\(--line-2\)\]:focus-within:is(.dark *){
  --tw-ring-color: var(--line-2);
}
.dark\:hover\:border-blue-400:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-blue-500:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-blue-600:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-gray-500:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(84 95 106 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-gray-600:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(51 64 77 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-gray-700:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(37 40 45 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-primary-500:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-primary-600:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(64 210 88 / var(--tw-border-opacity, 1));
}
.dark\:hover\:bg-\[var\(--bg-2\)\]:hover:is(.dark *){
  background-color: var(--bg-2);
}
.dark\:hover\:bg-\[var\(--bg-3\)\]:hover:is(.dark *){
  background-color: var(--bg-3);
}
.dark\:hover\:bg-\[var\(--danger-bg\)\]:hover:is(.dark *){
  background-color: var(--danger-bg);
}
.dark\:hover\:bg-\[var\(--hover-bg\)\]:hover:is(.dark *){
  background-color: var(--hover-bg);
}
.dark\:hover\:bg-amber-500\/30:hover:is(.dark *){
  background-color: rgb(245 158 11 / 0.3);
}
.dark\:hover\:bg-amber-800\/30:hover:is(.dark *){
  background-color: rgb(146 64 14 / 0.3);
}
.dark\:hover\:bg-blue-500:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-blue-800:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-blue-900\/20:hover:is(.dark *){
  background-color: rgb(30 58 138 / 0.2);
}
.dark\:hover\:bg-blue-900\/30:hover:is(.dark *){
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:hover\:bg-blue-900\/40:hover:is(.dark *){
  background-color: rgb(30 58 138 / 0.4);
}
.dark\:hover\:bg-blue-900\/50:hover:is(.dark *){
  background-color: rgb(30 58 138 / 0.5);
}
.dark\:hover\:bg-editor-surface-hover:hover:is(.dark *){
  background-color: var(--ed-surface-hover);
}
.dark\:hover\:bg-gray-100:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(224 228 238 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-500:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(84 95 106 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-600:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 64 77 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-600\/50:hover:is(.dark *){
  background-color: rgb(51 64 77 / 0.5);
}
.dark\:hover\:bg-gray-700:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-700\/30:hover:is(.dark *){
  background-color: rgb(37 40 45 / 0.3);
}
.dark\:hover\:bg-gray-700\/40:hover:is(.dark *){
  background-color: rgb(37 40 45 / 0.4);
}
.dark\:hover\:bg-gray-700\/50:hover:is(.dark *){
  background-color: rgb(37 40 45 / 0.5);
}
.dark\:hover\:bg-gray-800:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-900:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(27 28 29 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-900\/30:hover:is(.dark *){
  background-color: rgb(27 28 29 / 0.3);
}
.dark\:hover\:bg-gray-900\/40:hover:is(.dark *){
  background-color: rgb(27 28 29 / 0.4);
}
.dark\:hover\:bg-green-700:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-green-900\/30:hover:is(.dark *){
  background-color: rgb(20 83 45 / 0.3);
}
.dark\:hover\:bg-green-900\/40:hover:is(.dark *){
  background-color: rgb(20 83 45 / 0.4);
}
.dark\:hover\:bg-green-900\/50:hover:is(.dark *){
  background-color: rgb(20 83 45 / 0.5);
}
.dark\:hover\:bg-orange-900\/50:hover:is(.dark *){
  background-color: rgb(93 29 0 / 0.5);
}
.dark\:hover\:bg-primary-500:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-primary-500\/20:hover:is(.dark *){
  background-color: rgb(69 231 96 / 0.2);
}
.dark\:hover\:bg-primary-600:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(64 210 88 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-primary-900\/20:hover:is(.dark *){
  background-color: rgb(30 97 40 / 0.2);
}
.dark\:hover\:bg-primary-900\/30:hover:is(.dark *){
  background-color: rgb(30 97 40 / 0.3);
}
.dark\:hover\:bg-purple-800:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-purple-900\/20:hover:is(.dark *){
  background-color: rgb(88 28 135 / 0.2);
}
.dark\:hover\:bg-purple-900\/30:hover:is(.dark *){
  background-color: rgb(88 28 135 / 0.3);
}
.dark\:hover\:bg-purple-900\/40:hover:is(.dark *){
  background-color: rgb(88 28 135 / 0.4);
}
.dark\:hover\:bg-purple-900\/50:hover:is(.dark *){
  background-color: rgb(88 28 135 / 0.5);
}
.dark\:hover\:bg-red-800:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-red-900\/10:hover:is(.dark *){
  background-color: rgb(127 29 29 / 0.1);
}
.dark\:hover\:bg-red-900\/20:hover:is(.dark *){
  background-color: rgb(127 29 29 / 0.2);
}
.dark\:hover\:bg-red-900\/30:hover:is(.dark *){
  background-color: rgb(127 29 29 / 0.3);
}
.dark\:hover\:bg-red-900\/40:hover:is(.dark *){
  background-color: rgb(127 29 29 / 0.4);
}
.dark\:hover\:bg-red-900\/50:hover:is(.dark *){
  background-color: rgb(127 29 29 / 0.5);
}
.dark\:hover\:bg-rose-500\/30:hover:is(.dark *){
  background-color: rgb(244 63 94 / 0.3);
}
.dark\:hover\:bg-secondary-900\/20:hover:is(.dark *){
  background-color: rgb(50 21 87 / 0.2);
}
.dark\:hover\:bg-secondary-900\/30:hover:is(.dark *){
  background-color: rgb(50 21 87 / 0.3);
}
.dark\:hover\:bg-secondary-900\/50:hover:is(.dark *){
  background-color: rgb(50 21 87 / 0.5);
}
.dark\:hover\:bg-white\/10:hover:is(.dark *){
  background-color: rgb(255 255 255 / 0.1);
}
.dark\:hover\:bg-yellow-900\/20:hover:is(.dark *){
  background-color: rgb(113 63 18 / 0.2);
}
.dark\:hover\:bg-yellow-900\/30:hover:is(.dark *){
  background-color: rgb(113 63 18 / 0.3);
}
.dark\:hover\:from-primary-900\/30:hover:is(.dark *){
  --tw-gradient-from: rgb(30 97 40 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 97 40 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:hover\:from-secondary-900\/30:hover:is(.dark *){
  --tw-gradient-from: rgb(50 21 87 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(50 21 87 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:hover\:to-primary-900\/40:hover:is(.dark *){
  --tw-gradient-to: rgb(30 97 40 / 0.4) var(--tw-gradient-to-position);
}
.dark\:hover\:to-secondary-800\/30:hover:is(.dark *){
  --tw-gradient-to: rgb(65 28 114 / 0.3) var(--tw-gradient-to-position);
}
.dark\:hover\:text-\[var\(--danger-fg\)\]:hover:is(.dark *){
  color: var(--danger-fg);
}
.dark\:hover\:text-\[var\(--fg\)\]:hover:is(.dark *){
  color: var(--fg);
}
.dark\:hover\:text-amber-100:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-amber-400:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-blue-100:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-blue-200:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-blue-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-blue-400:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-editor-text-1:hover:is(.dark *){
  color: var(--ed-text-primary);
}
.dark\:hover\:text-editor-text-2:hover:is(.dark *){
  color: var(--ed-text-secondary);
}
.dark\:hover\:text-emerald-100:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-100:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(224 228 238 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-200:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(208 210 212 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(179 185 192 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-400:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(127 140 153 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-green-100:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-green-200:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-green-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-indigo-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-indigo-400:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-orange-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(233 130 84 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-primary-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(130 239 148 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-primary-400:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(107 236 129 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-purple-100:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-purple-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-red-100:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-red-200:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-red-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-red-400:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-slate-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-white:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-yellow-100:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-yellow-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-yellow-400:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.dark\:hover\:opacity-80:hover:is(.dark *){
  opacity: 0.8;
}
.dark\:hover\:file\:bg-blue-900\/50:is(.dark *)::file-selector-button:hover{
  background-color: rgb(30 58 138 / 0.5);
}
.dark\:hover\:file\:bg-gray-600:is(.dark *)::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 64 77 / var(--tw-bg-opacity, 1));
}
.dark\:focus\:ring-primary-400:focus:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 236 129 / var(--tw-ring-opacity, 1));
}
.dark\:focus\:ring-primary-600:focus:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(64 210 88 / var(--tw-ring-opacity, 1));
}
.dark\:active\:border-primary-600:active:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(64 210 88 / var(--tw-border-opacity, 1));
}
.dark\:active\:bg-gray-700:active:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.disabled\:dark\:bg-slate-700:is(.dark *):disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.group:hover .dark\:group-hover\:border-primary-500:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
}
.group:hover .dark\:group-hover\:bg-primary-800\/50:is(.dark *){
  background-color: rgb(39 127 53 / 0.5);
}
.group:hover .dark\:group-hover\:bg-primary-900\/20:is(.dark *){
  background-color: rgb(30 97 40 / 0.2);
}
.group:hover .dark\:group-hover\:text-\[var\(--fg\)\]:is(.dark *){
  color: var(--fg);
}
.group:hover .dark\:group-hover\:text-blue-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:text-editor-text-1:is(.dark *){
  color: var(--ed-text-primary);
}
.group:hover .dark\:group-hover\:text-editor-text-2:is(.dark *){
  color: var(--ed-text-secondary);
}
.group:hover .dark\:group-hover\:text-gray-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(179 185 192 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:text-primary-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(130 239 148 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:text-primary-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(107 236 129 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:ring-primary-500:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
}
.peer:focus ~ .dark\:peer-focus\:ring-blue-800:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity, 1));
}
@media (min-width: 640px){
  .sm\:absolute{
    position: absolute;
  }
  .sm\:inset-x-auto{
    left: auto;
    right: auto;
  }
  .sm\:bottom-full{
    bottom: 100%;
  }
  .sm\:left-0{
    left: 0px;
  }
  .sm\:left-auto{
    left: auto;
  }
  .sm\:right-4{
    right: 1rem;
  }
  .sm\:order-2{
    order: 2;
  }
  .sm\:order-3{
    order: 3;
  }
  .sm\:col-span-4{
    grid-column: span 4 / span 4;
  }
  .sm\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }
  .sm\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }
  .sm\:my-8{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .sm\:mb-0{
    margin-bottom: 0px;
  }
  .sm\:mb-10{
    margin-bottom: 2.5rem;
  }
  .sm\:mb-12{
    margin-bottom: 3rem;
  }
  .sm\:mb-14{
    margin-bottom: 3.5rem;
  }
  .sm\:mb-2{
    margin-bottom: 0.5rem;
  }
  .sm\:mb-4{
    margin-bottom: 1rem;
  }
  .sm\:mb-6{
    margin-bottom: 1.5rem;
  }
  .sm\:mb-8{
    margin-bottom: 2rem;
  }
  .sm\:ml-2{
    margin-left: 0.5rem;
  }
  .sm\:ml-3{
    margin-left: 0.75rem;
  }
  .sm\:ml-4{
    margin-left: 1rem;
  }
  .sm\:ml-8{
    margin-left: 2rem;
  }
  .sm\:mr-2{
    margin-right: 0.5rem;
  }
  .sm\:mt-0{
    margin-top: 0px;
  }
  .sm\:mt-3{
    margin-top: 0.75rem;
  }
  .sm\:block{
    display: block;
  }
  .sm\:inline{
    display: inline;
  }
  .sm\:flex{
    display: flex;
  }
  .sm\:inline-flex{
    display: inline-flex;
  }
  .sm\:grid{
    display: grid;
  }
  .sm\:contents{
    display: contents;
  }
  .sm\:hidden{
    display: none;
  }
  .sm\:h-10{
    height: 2.5rem;
  }
  .sm\:h-12{
    height: 3rem;
  }
  .sm\:h-16{
    height: 4rem;
  }
  .sm\:h-2\.5{
    height: 0.625rem;
  }
  .sm\:h-20{
    height: 5rem;
  }
  .sm\:h-24{
    height: 6rem;
  }
  .sm\:h-32{
    height: 8rem;
  }
  .sm\:h-6{
    height: 1.5rem;
  }
  .sm\:h-7{
    height: 1.75rem;
  }
  .sm\:h-\[500px\]{
    height: 500px;
  }
  .sm\:h-\[600px\]{
    height: 600px;
  }
  .sm\:max-h-72{
    max-height: 18rem;
  }
  .sm\:max-h-\[200px\]{
    max-height: 200px;
  }
  .sm\:min-h-\[80vh\]{
    min-height: 80vh;
  }
  .sm\:w-10{
    width: 2.5rem;
  }
  .sm\:w-12{
    width: 3rem;
  }
  .sm\:w-16{
    width: 4rem;
  }
  .sm\:w-20{
    width: 5rem;
  }
  .sm\:w-24{
    width: 6rem;
  }
  .sm\:w-32{
    width: 8rem;
  }
  .sm\:w-6{
    width: 1.5rem;
  }
  .sm\:w-7{
    width: 1.75rem;
  }
  .sm\:w-80{
    width: 20rem;
  }
  .sm\:w-96{
    width: 24rem;
  }
  .sm\:w-auto{
    width: auto;
  }
  .sm\:w-full{
    width: 100%;
  }
  .sm\:max-w-lg{
    max-width: 32rem;
  }
  .sm\:max-w-md{
    max-width: 28rem;
  }
  .sm\:max-w-none{
    max-width: none;
  }
  .sm\:max-w-sm{
    max-width: 24rem;
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:flex-row-reverse{
    flex-direction: row-reverse;
  }
  .sm\:items-start{
    align-items: flex-start;
  }
  .sm\:items-end{
    align-items: flex-end;
  }
  .sm\:items-center{
    align-items: center;
  }
  .sm\:justify-start{
    justify-content: flex-start;
  }
  .sm\:justify-end{
    justify-content: flex-end;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
  .sm\:gap-0{
    gap: 0px;
  }
  .sm\:gap-10{
    gap: 2.5rem;
  }
  .sm\:gap-3{
    gap: 0.75rem;
  }
  .sm\:gap-4{
    gap: 1rem;
  }
  .sm\:gap-6{
    gap: 1.5rem;
  }
  .sm\:gap-8{
    gap: 2rem;
  }
  .sm\:gap-x-4{
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
  .sm\: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)));
  }
  .sm\: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)));
  }
  .sm\: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)));
  }
  .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .sm\: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));
  }
  .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\:self-auto{
    align-self: auto;
  }
  .sm\:whitespace-nowrap{
    white-space: nowrap;
  }
  .sm\:rounded-lg{
    border-radius: 0.5rem;
  }
  .sm\:bg-slate-800{
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }
  .sm\:bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .sm\:p-0{
    padding: 0px;
  }
  .sm\:p-12{
    padding: 3rem;
  }
  .sm\:p-3{
    padding: 0.75rem;
  }
  .sm\:p-4{
    padding: 1rem;
  }
  .sm\:p-5{
    padding: 1.25rem;
  }
  .sm\:p-6{
    padding: 1.5rem;
  }
  .sm\:p-8{
    padding: 2rem;
  }
  .sm\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }
  .sm\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .sm\:px-2\.5{
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  .sm\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .sm\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .sm\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .sm\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .sm\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .sm\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .sm\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .sm\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .sm\:py-32{
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .sm\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .sm\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .sm\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .sm\:pb-0{
    padding-bottom: 0px;
  }
  .sm\:pb-32{
    padding-bottom: 8rem;
  }
  .sm\:pb-4{
    padding-bottom: 1rem;
  }
  .sm\:pb-6{
    padding-bottom: 1.5rem;
  }
  .sm\:pl-16{
    padding-left: 4rem;
  }
  .sm\:pl-6{
    padding-left: 1.5rem;
  }
  .sm\:pl-9{
    padding-left: 2.25rem;
  }
  .sm\:pt-20{
    padding-top: 5rem;
  }
  .sm\:pt-3{
    padding-top: 0.75rem;
  }
  .sm\:pt-6{
    padding-top: 1.5rem;
  }
  .sm\:text-left{
    text-align: left;
  }
  .sm\:text-right{
    text-align: right;
  }
  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .sm\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .sm\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .sm\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }
  .sm\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }
  .sm\:text-8xl{
    font-size: 6rem;
    line-height: 1;
  }
  .sm\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .sm\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .sm\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .sm\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .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);
  }
  .sm\:shadow-lg{
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 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);
  }
  .sm\:dark\:bg-slate-700:is(.dark *){
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }
  .sm\:dark\:shadow-lg:is(.dark *){
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 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);
  }
}
@media (min-width: 768px){
  .md\:absolute{
    position: absolute;
  }
  .md\:inset-auto{
    inset: auto;
  }
  .md\:right-0{
    right: 0px;
  }
  .md\:top-full{
    top: 100%;
  }
  .md\:order-1{
    order: 1;
  }
  .md\:order-2{
    order: 2;
  }
  .md\:order-3{
    order: 3;
  }
  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .md\:col-span-4{
    grid-column: span 4 / span 4;
  }
  .md\:-my-2{
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
  }
  .md\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }
  .md\:mt-2{
    margin-top: 0.5rem;
  }
  .md\:block{
    display: block;
  }
  .md\:inline{
    display: inline;
  }
  .md\:flex{
    display: flex;
  }
  .md\:inline-flex{
    display: inline-flex;
  }
  .md\:grid{
    display: grid;
  }
  .md\:hidden{
    display: none;
  }
  .md\:h-0{
    height: 0px;
  }
  .md\:max-h-80{
    max-height: 20rem;
  }
  .md\:max-h-\[80vh\]{
    max-height: 80vh;
  }
  .md\:w-96{
    width: 24rem;
  }
  .md\: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));
  }
  .md\: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));
  }
  .md\:scale-110{
    --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));
  }
  .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-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:flex-row{
    flex-direction: row;
  }
  .md\:flex-wrap{
    flex-wrap: wrap;
  }
  .md\:items-start{
    align-items: flex-start;
  }
  .md\:items-center{
    align-items: center;
  }
  .md\:justify-between{
    justify-content: space-between;
  }
  .md\: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)));
  }
  .md\:self-center{
    align-self: center;
  }
  .md\:rounded-xl{
    border-radius: 0.75rem;
  }
  .md\:rounded-b-xl{
    border-bottom-right-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
  }
  .md\:p-8{
    padding: 2rem;
  }
  .md\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }
  .md\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .md\:pb-0{
    padding-bottom: 0px;
  }
  .md\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }
  .md\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }
  .md\:text-7xl{
    font-size: 4.5rem;
    line-height: 1;
  }
  .md\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 1024px){
  .lg\:relative{
    position: relative;
  }
  .lg\:inset-auto{
    inset: auto;
  }
  .lg\:bottom-24{
    bottom: 6rem;
  }
  .lg\:bottom-4{
    bottom: 1rem;
  }
  .lg\:bottom-auto{
    bottom: auto;
  }
  .lg\:left-0{
    left: 0px;
  }
  .lg\:left-auto{
    left: auto;
  }
  .lg\:right-4{
    right: 1rem;
  }
  .lg\:right-auto{
    right: auto;
  }
  .lg\:top-full{
    top: 100%;
  }
  .lg\:z-auto{
    z-index: auto;
  }
  .lg\:order-1{
    order: 1;
  }
  .lg\:order-2{
    order: 2;
  }
  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .lg\:mx-4{
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .lg\:mr-1{
    margin-right: 0.25rem;
  }
  .lg\:mt-1{
    margin-top: 0.25rem;
  }
  .lg\:mt-2{
    margin-top: 0.5rem;
  }
  .lg\:line-clamp-none{
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none;
  }
  .lg\:block{
    display: block;
  }
  .lg\:inline{
    display: inline;
  }
  .lg\:flex{
    display: flex;
  }
  .lg\:inline-flex{
    display: inline-flex;
  }
  .lg\:grid{
    display: grid;
  }
  .lg\:hidden{
    display: none;
  }
  .lg\:h-\[600px\]{
    height: 600px;
  }
  .lg\:h-auto{
    height: auto;
  }
  .lg\:h-full{
    height: 100%;
  }
  .lg\:max-h-48{
    max-height: 12rem;
  }
  .lg\:max-h-\[600px\]{
    max-height: 600px;
  }
  .lg\:max-h-\[85vh\]{
    max-height: 85vh;
  }
  .lg\:max-h-\[90vh\]{
    max-height: 90vh;
  }
  .lg\:w-48{
    width: 12rem;
  }
  .lg\:w-64{
    width: 16rem;
  }
  .lg\:w-72{
    width: 18rem;
  }
  .lg\:w-80{
    width: 20rem;
  }
  .lg\:w-96{
    width: 24rem;
  }
  .lg\:w-auto{
    width: auto;
  }
  .lg\:max-w-sm{
    max-width: 24rem;
  }
  .lg\: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));
  }
  .lg\:transform-none{
    transform: none;
  }
  .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-7{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:flex-row{
    flex-direction: row;
  }
  .lg\:items-start{
    align-items: flex-start;
  }
  .lg\:items-center{
    align-items: center;
  }
  .lg\:justify-start{
    justify-content: flex-start;
  }
  .lg\:justify-between{
    justify-content: space-between;
  }
  .lg\:gap-0{
    gap: 0px;
  }
  .lg\:gap-10{
    gap: 2.5rem;
  }
  .lg\:gap-12{
    gap: 3rem;
  }
  .lg\:gap-16{
    gap: 4rem;
  }
  .lg\:gap-2{
    gap: 0.5rem;
  }
  .lg\:gap-3{
    gap: 0.75rem;
  }
  .lg\:gap-6{
    gap: 1.5rem;
  }
  .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\:overflow-visible{
    overflow: visible;
  }
  .lg\:whitespace-normal{
    white-space: normal;
  }
  .lg\:rounded{
    border-radius: 0.25rem;
  }
  .lg\:rounded-2xl{
    border-radius: 1rem;
  }
  .lg\:rounded-xl{
    border-radius: 0.75rem;
  }
  .lg\:border{
    border-width: 1px;
  }
  .lg\:border-l{
    border-left-width: 1px;
  }
  .lg\:border-t-0{
    border-top-width: 0px;
  }
  .lg\:border-\[\#E5E7EB\]{
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  }
  .lg\:p-3{
    padding: 0.75rem;
  }
  .lg\:p-4{
    padding: 1rem;
  }
  .lg\:p-6{
    padding: 1.5rem;
  }
  .lg\:p-8{
    padding: 2rem;
  }
  .lg\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lg\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .lg\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .lg\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .lg\:py-28{
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .lg\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .lg\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .lg\:pb-3{
    padding-bottom: 0.75rem;
  }
  .lg\:pb-36{
    padding-bottom: 9rem;
  }
  .lg\:pt-0{
    padding-top: 0px;
  }
  .lg\:pt-2{
    padding-top: 0.5rem;
  }
  .lg\:pt-24{
    padding-top: 6rem;
  }
  .lg\:pt-3{
    padding-top: 0.75rem;
  }
  .lg\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }
  .lg\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }
  .lg\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .lg\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .lg\:opacity-0{
    opacity: 0;
  }
  .lg\:transition-opacity{
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .dark\:lg\:border-\[var\(--line\)\]:is(.dark *){
    border-color: var(--line);
  }
}
@media (min-width: 1280px){
  .xl\:flex{
    display: flex;
  }
  .xl\:hidden{
    display: none;
  }
  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .xl\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@media print{
  .print\:hidden{
    display: none;
  }
}
.\[\&\:not\(\.lg\\\\\:flex\)\]\:\!w-full:not(.lg\\:flex){
  width: 100% !important;
}
.\[\&\>\*\:first-child\]\:mt-0>*:first-child{
  margin-top: 0px;
}
.\[\&\>\*\:last-child\]\:mb-0>*:last-child{
  margin-bottom: 0px;
}
.\[\&\>button\:nth-child\(n\+3\)\]\:hidden>button:nth-child(n+3){
  display: none;
}
.\[\&\>p\]\:mb-0>p{
  margin-bottom: 0px;
}
.\[\&\>p\]\:inline>p{
  display: inline;
}