/* 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));
}
[data-theme] .prompt-builder-v2 a {
  color: var(--accent-text);
  opacity: 0.85;
}
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;
}
[data-theme] .prompt-builder-v2 .\!button {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .prompt-builder-v2 .\!button:hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black));
}
.\!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;
}
[data-theme] .prompt-builder-v2 .button {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .prompt-builder-v2 .button:hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black));
}
.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));
}
[data-theme] .prompt-builder-v2 .button-secondary {
  color: var(--accent-text);
  opacity: 0.85;
}
.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;
}

[data-theme] .prompt-builder-v2 .button-alternative {
  color: var(--fg);
}
.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;
}

[data-theme] .prompt-builder-v2 .pagy a:not(.gap) {
  color: var(--fg);
}
.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;
}
[data-theme] .prompt-builder-v2 .pagy a:not(.gap):not([href]) {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .prompt-builder-v2 .pagy a:not(.gap):not([href]):hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black));
}
.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;
}
[data-theme] .prompt-builder-v2 form.button_to input[type=submit].pagy a:not(.gap):not([href]) {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .prompt-builder-v2 form.button_to input[type=submit].pagy a:not(.gap):not([href]):hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black));
}
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] .nav-user-menu.pagy a:not(.gap):not([href]):not([aria-current]){ 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] .composer-voice-status.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
[data-theme] .editor-topbar-left .tb-iconbtn[data-editor-layout-target="expandButton"].pagy a:not(.gap):not([href]):not([aria-current]) {
  /* Tailwind `.hidden` = `display: none` — keep that for layout, but
     also zero opacity so when the controller removes `.hidden` the
     transition has somewhere to start from. */
  opacity: 0;
}
[data-theme] .editor-topbar .tb-iconbtn.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
[data-theme] .dv.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; }
@media (max-width: 1040px) {
  [data-theme] .nav-mobile-toggle.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
  [data-theme] .nav-drawer-overlay.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] .nav-user-menu.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] .composer-voice-status.bulk-actions.selectable .bulk-action-single { display: none; }
[data-theme] .editor-topbar-left .tb-iconbtn[data-editor-layout-target="expandButton"].bulk-actions.selectable .bulk-action-single {
  /* Tailwind `.hidden` = `display: none` — keep that for layout, but
     also zero opacity so when the controller removes `.hidden` the
     transition has somewhere to start from. */
  opacity: 0;
}
[data-theme] .editor-topbar .tb-iconbtn.bulk-actions.selectable .bulk-action-single { display: none; }
[data-theme] .dv.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; }
@media (max-width: 1040px) {
  [data-theme] .nav-mobile-toggle.bulk-actions.selectable .bulk-action-single { display: none; }
  [data-theme] .nav-drawer-overlay.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;
}
[data-theme] .prompt-builder-v2 .daterangepicker .calendar-table .\!active {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}
[data-theme] .prompt-builder-v2 .daterangepicker .calendar-table .\!active:hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black)) !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;
}
[data-theme] .prompt-builder-v2 .daterangepicker .calendar-table .active {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}
[data-theme] .prompt-builder-v2 .daterangepicker .calendar-table .active:hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black)) !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;
}
.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-2{
  margin-top: -0.5rem;
}
.-mt-4{
  margin-top: -1rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-12{
  margin-bottom: 3rem;
}
.mb-14{
  margin-bottom: 3.5rem;
}
.mb-16{
  margin-bottom: 4rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-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-\[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\(100dvh-6rem\)\]{
  max-height: calc(100dvh - 6rem);
}
.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-\[2\.5em\]{
  min-height: 2.5em;
}
.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-fit{
  width: -moz-fit-content;
  width: fit-content;
}
.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-\[220px\]{
  min-width: 220px;
}
.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;
}
.shrink{
  flex-shrink: 1;
}
.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-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.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-\[\#45E760\]{
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / 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-amber-800{
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / 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-\[\#45E760\]{
  --tw-bg-opacity: 1;
  background-color: rgb(69 231 96 / var(--tw-bg-opacity, 1));
}
.bg-\[\#45E760\]\/10{
  background-color: rgb(69 231 96 / 0.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-600{
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-900{
  --tw-bg-opacity: 1;
  background-color: rgb(120 53 15 / 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\/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-200{
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / 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\/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-50{
  --tw-gradient-to: #fdf2f8 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;
}
.align-middle{
  vertical-align: middle;
}
.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-\[\#202123\]{
  --tw-text-opacity: 1;
  color: rgb(32 33 35 / 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-\[\#45E760\]{
  --tw-text-opacity: 1;
  color: rgb(69 231 96 / 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\)\]{
  color: var(--accent);
}
.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-300{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / 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-300{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.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;
}
.decoration-1{
  text-decoration-thickness: 1px;
}
.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-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-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-\[\#45E760\]{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
}
.ring-\[\#45E760\]\/20{
  --tw-ring-color: rgb(69 231 96 / 0.2);
}
.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;
  }
[data-theme] .prompt-builder-v2 .select2-container .select2-selection__choice {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}
[data-theme] .prompt-builder-v2 .select2-container .select2-selection__choice:hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black)) !important;
}
      .select2-container .select2-selection__choice{
    --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;
}
[data-theme] .prompt-builder-v2 form.button_to input[type=submit].button {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .prompt-builder-v2 form.button_to input[type=submit].button:hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black));
}
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;
}
[data-theme] .prompt-builder-v2 .turbo-progress-bar {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .prompt-builder-v2 .turbo-progress-bar:hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black));
}
/*
  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;
}
/*
 * Offscreen render-skip for chat messages.
 *
 * Long editor sessions accumulate 30-200+ messages, each with deep DOM
 * trees (code blocks, V5 tool-call nodes, syntax highlighting). Without
 * containment, every tab refocus forces the browser to re-layout and
 * re-paint every message in #chat_messages. That's the lag Andrew
 * Culver reported (Slack #prj-overskill-feedback, May 2026): "open a
 * long-running project, switch tabs, come back — considerable re-render
 * time."
 *
 * `content-visibility: auto` tells the browser to skip rendering work
 * for this element while it's offscreen. `contain-intrinsic-size:
 * auto 200px` provides a placeholder height (200px) on first paint;
 * the `auto` keyword then keeps the real measured size cached after
 * the element scrolls into view once, so subsequent skips don't lose
 * geometry. Scrollbar position and Cmd-F search both continue to work
 * (Chromium has a search-light spec that paints find matches even in
 * skipped subtrees).
 *
 * Selector targets direct children of #chat_messages whose id starts
 * with "app_chat_message_" — that catches both the standard
 * `_chat_message.html.erb` wrapper and the `_agent_reply_v5.html.erb`
 * wrapper, while excluding the inner `_content` divs (whose ids end in
 * "_content" and aren't direct children of #chat_messages).
 */
#chat_messages > [id^="app_chat_message_"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}
/* 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);
}

[data-theme] .prompt-builder-v2 .btn-secondary {
  border-color: var(--line);
}
[data-theme] .prompt-builder-v2 .btn-secondary {
  color: var(--fg-2);
}
.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;
}
[data-theme] .nav-bell-wrap .notification-item .btn-ghost{ color: var(--fg-2); }
.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));
}
[data-theme] .nav-bell-wrap .notification-item .btn-ghost:hover{ color: var(--fg); }
[data-theme] .prompt-builder-v2 .btn-ghost:hover {
  color: var(--fg);
}
/* 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;
  }
}
[data-theme] .nav-bell-wrap .notification-item .pill-brand{ color: var(--fg); }
[data-theme] .prompt-builder-v2 .pill-brand {
  color: var(--fg);
}
.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] .prompt-builder-v2 .form-control {
  border-color: var(--line);
}
[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] .prompt-builder-v2 .textarea-control {
  border-color: var(--line);
}
[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] .prompt-builder-v2 .select-control {
  border-color: var(--line);
}
[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 (LEGACY SURFACES ONLY) =====
     Scoped to `html:not([data-theme])` so it applies only to legacy
     pages. V2 design-system surfaces emit `<html data-theme="…">`; on
     those, link color must come from the DS component classes
     (.dash-nav-link, .brand, .dash-foot-link, …) — NOT this OS-driven
     `prefers-color-scheme` override. Before this scope, the bare
     `a { !important }` here leaked into every v2 surface whenever the
     user's macOS was in dark mode, turning all v2 nav/links vibrant
     green regardless of the app's own `[data-theme]` toggle. Keeping
     the legacy behavior intact for non-DS pages (they have no
     `data-theme` so `:not()` still matches them). */
  html:not([data-theme]) a {
    color: #6bec81 !important; /* primary-400: Vibrant green for dark backgrounds */
  }

  html:not([data-theme]) 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;
  /* Optical centering: Grifter's metrics push the glyph mass into the
     UPPER half of the line-box (cap-height region with no descenders,
     so the visible ink sits above the line-box geometric center).
     Without correction, align-items: center aligns the line-box center
     to the squircle center — leaving the visible glyphs sitting too
     high. A positive translateY shifts the ink DOWN until its midline
     meets the squircle's center (verified empirically against
     .brand-mark at 28px, 32px, and 56px). */
  transform: translateY(0.10em);
}
/* 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;
}
/* ===== Auth-aware nav: avatar trigger + dropdown =====
   Rendered when `user_signed_in?` (see landing_v2/_user_menu.html.erb).
   The trigger is a 36px circle echoing .icon-btn dimensions; the dropdown
   is a v2-styled popover. The shared `dropdown` Stimulus controller toggles
   .hidden on [data-dropdown-target="menu"], so the menu is hard-hidden by
   default and only paints when shown. */
[data-theme] .nav-user{ position: relative; }
[data-theme] .nav-avatar{
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-fg);
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
}
[data-theme] .nav-avatar:hover{
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-theme] .nav-avatar:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
[data-theme] .nav-user-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--card-bg);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  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);
  padding: 6px 0;
  color: var(--fg);
}
[data-theme] .nav-user-menu.hidden{ display: none; }
[data-theme] .nav-user-menu-head{
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
[data-theme] .nav-user-menu-name{
  font-size: 13px; font-weight: 600;
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme] .nav-user-menu-team{
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme] .nav-user-menu-item{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  font-size: 13.5px; font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .nav-user-menu-item:hover{ background: var(--hover-bg); color: var(--fg); }
[data-theme] .nav-user-menu-item svg{
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--fg-3);
}
[data-theme] .nav-user-menu-item:hover svg{ color: var(--accent); }
[data-theme] .nav-user-menu-divider{
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}
/* ===== Auth-aware nav: notification bell wrapper =====
   Wraps shared/_notification_bell. The shared partial uses Tailwind utility
   classes (bg-white, p-1, rounded-full, etc.) tuned for the BulletTrain
   layout. Tailwind `dark:` variants don't fire here because v2 uses
   data-theme="dark" (custom attribute), not the .dark class. These
   overrides repaint just the trigger + popover with v2 tokens; notification
   behavior (badge, fetch, mark-read) is reused unchanged. */
[data-theme] .nav-bell-wrap [data-testid="notification-bell"]{ position: relative; }
[data-theme] .nav-bell-wrap [data-testid="notification-bell-button"]{
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
[data-theme] .nav-bell-wrap [data-testid="notification-bell-button"]:hover{
  background: var(--hover-bg);
  color: var(--fg);
  border-color: var(--hover-border);
}
[data-theme] .nav-bell-wrap [data-testid="notification-bell-button"]:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
[data-theme] .nav-bell-wrap [data-testid="notification-bell-button"] svg{
  width: 18px; height: 18px;
}
[data-theme] .nav-bell-wrap [data-testid="notification-badge"]{
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 0 0 2px var(--bg);
}
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"]{
  background: var(--card-bg);
  border: 1px solid var(--line-2);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.35),
              0 1px 2px rgba(0,0,0,0.06);
  color: var(--fg);
}
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] h3{ color: var(--fg); }
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] p{ color: var(--fg-3); }
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] .border-gray-100,
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] .border-b,
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] .border-t{
  border-color: var(--line);
}
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] .divide-gray-100 > * + *{
  border-color: var(--line);
}
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] .bg-gray-50,
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] .bg-blue-50{
  background: var(--bg-1);
}
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] .text-primary-600{
  color: var(--accent-text);
}
[data-theme] .nav-bell-wrap [data-testid="notification-dropdown"] .text-primary-600:hover{
  color: var(--accent);
}
[data-theme] .nav-bell-wrap .notification-item:hover{ background: var(--hover-bg); }
[data-theme] .nav-bell-wrap .notification-item .text-gray-900,
[data-theme] .nav-bell-wrap .notification-item p{ color: var(--fg); }
[data-theme] .nav-bell-wrap .notification-item .text-gray-600{ color: var(--fg-2); }
[data-theme] .nav-bell-wrap .notification-item .text-gray-400,
[data-theme] .nav-bell-wrap .notification-item .text-gray-500{ color: var(--fg-3); }
/* Mobile: dropdown spans width with margin so it doesn't clip the viewport
   on small screens. */
@media (max-width: 480px) {
  [data-theme] .nav-avatar{ width: 32px; height: 32px; font-size: 13px; }
  [data-theme] .nav-bell-wrap [data-testid="notification-bell-button"]{ width: 32px; height: 32px; }
  [data-theme] .nav-bell-wrap [data-testid="notification-bell-button"] svg{ width: 16px; height: 16px; }
  [data-theme] .nav-user-menu{
    right: -8px;
    min-width: 220px;
    max-width: calc(100vw - 32px);
  }
  [data-theme] .nav-bell-wrap [data-testid="notification-dropdown"]{
    position: fixed;
    left: 16px; right: 16px;
    width: auto;
    top: 64px;
  }
}
/* 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; }
/* Disabled state — set by voice_input_controller#disableButton when the
   browser can't run Speech Recognition (unsupported, or privacy-hardened
   Chromium variants like Brave/Arc strip the Google speech API key).
   Lighter than the v1 Tailwind `opacity-50` so the button still reads as
   "present but inactive" rather than "broken". `pointer-events: none` is
   key — without it, hover state still fires and confuses users. */
[data-theme] .composer-tool.is-disabled,
[data-theme] .composer-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
[data-theme] .composer-tool.is-disabled:hover {
  /* Override the bg-hover from the rule above; disabled buttons should
     stay flat. */
  background: transparent;
  color: var(--fg-3);
}
[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);
}
/* No vertical padding so the first and last items sit flush against
   the menu-head border / popover bottom — otherwise hovering the
   first or last item leaves a visible strip of un-hovered background
   above/below the hover-bg, which reads as a gap. */
[data-theme] .composer-menu-list { padding: 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 {
  /* `composer-voice-status` is the unified surface for both "🎤 Listening…"
     during a recording AND the error message from `disableButton` when the
     browser can't run Speech Recognition. The disabled-state message can
     be long (e.g. the Brave/Arc explainer), so we give it room to wrap
     and a subtle card surface so it doesn't read as ambient body copy. */
  margin: 12px auto 0;
  max-width: 760px;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
[data-theme] .composer-voice-status.hidden { display: none; }
/* 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` on an open <dialog> centers it in BOTH axes within the
     viewport, so the viewport-relative max-height below caps it centered
     (not top-aligned) and the 32px backdrop margin (viewport minus 85vh,
     plus the 920px ceiling) keeps it off the screen edges top & bottom. */
  margin: auto;
  color: var(--fg);
  max-width: 480px;
  width: calc(100% - 32px);
  /* #832 — systemic cap: tall modals were rendering taller than the
     screen with no internal scroll (body overflow was `visible`), pushing
     the header off the top and jamming the footer at the bottom. Cap the
     container at a viewport-relative max-height and make it a flex column
     so the body scrolls internally while head/foot stay pinned. This is a
     `max`, not a fixed height — short modals still size to their content
     and are NOT stretched to 85vh (regression guard). */
  max-height: min(85vh, 920px);
  display: flex;
  flex-direction: column;
  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;
  /* #832 — stays pinned/visible; never scrolls out of reach. */
  flex-shrink: 0;
}
[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;
  /* #832 — the only region that scrolls when content exceeds the cap.
     `min-height: 0` lets this flex child shrink below its content size so
     the cap actually constrains it (without it the body refuses to shrink
     and the whole modal overflows again). */
  overflow-y: auto;
  min-height: 0;
}
[data-theme] .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--line);
  /* #832 — stays pinned/visible; never scrolls out of reach. */
  flex-shrink: 0;
}
@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 — surface-specific (loaded after components so they can override) */
/* ==========================================================================
   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.
   ========================================================================== */
/* Mobile guard — the wrapper carries `hidden lg:grid` Tailwind utilities so it
   should NOT render below 1024px, but the rules below (`[data-theme]
   .editor-topbar` — specificity 0,1,1) outranked `.hidden` (specificity 0,1,0)
   and forced the topbar to render on mobile, looking broken and intercepting
   taps that the mobile editor header should own. The mobile editor uses its
   own simpler header (see app/views/account/app_editors/show.html.erb lines
   ~21-73), so the desktop topbar has no business being visible below `lg`.
   This `display: none` re-asserts the original `hidden lg:grid` intent at
   higher specificity than the rules below, with `!important` as a belt-and-
   suspenders guard against future component overrides. Regression report:
   PR #893 / #882 (editor v2 reskin, May 2026). */
@media (max-width: 1023.98px) {
  [data-theme] .editor-topbar { display: none !important; }
}
[data-theme] .editor-topbar {
  display: grid;
  /* `auto 1fr auto` (was `1fr auto 1fr`) so the LEFT cell shrinks to its
     content (the chat-header section) rather than ballooning to match the
     right 1fr. With the previous 1fr, the topbar-left's right edge sat
     ~50px past the chat panel's right edge below it — visible misalignment
     of the editor's two stacked left columns.
     The CENTER cell (now 1fr) absorbs the slack between the left chat-
     header column and the right action cluster, and `.editor-topbar-center`
     uses `justify-content: center` so the Dashboard/Preview pill is
     visually centered within the canvas region (i.e. the space right of
     the chat panel), which reads as "centered in the editor canvas" the
     same way it did under 1fr/auto/1fr. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  /* padding-x = 12px matches the editor canvas page padding
     (`lg:px-3 lg:gap-3` on the row below — `lg:px-3` = 12px). With this
     alignment the topbar's left edge sits flush with the chat panel's
     left edge and its right edge sits flush with the preview iframe's
     right edge — the editor reads as three aligned column-spanning
     surfaces (topbar / chat-row / canvas-row) instead of three boxes
     with mismatched insets.

     Previously this was `9px 10px 0 28px`. The 28px claim ("aligns the
     brand-mark with the chat panel's message text which sits at 28px")
     turned out to be stale — chat message text actually starts at
     ~40px (panel x=12 + panel padding + message bubble padding), so
     the brand was never aligned with text anyway. The visible
     misalignment was topbar-left's bounding box right edge sitting
     ~16-50px past the chat panel's right edge (May 2026 report).

     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 12px 0 12px;
  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; }
/* Pill is LEFT-aligned in the middle grid cell — sits flush against the
   left edge of the canvas region (immediately after the chat-column gap)
   rather than floating in the middle of the canvas. Per May 2026 design
   pass: the Dashboard/Preview pill reads as a primary navigation
   affordance, and primary nav left-aligns in the rest of the product
   (account top nav, landing nav, editor LEFT cluster), so centering it
   here was the odd one out. `justify-content: flex-start` is the flex
   default — kept as an explicit rule so the intent is documented (vs.
   silently removed). */
[data-theme] .editor-topbar-center { justify-content: flex-start; }
/* 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;
  /* Transitions match `transition-all duration-300` on `#chat_panel` below
     (see show.html.erb chat_panel div) so the topbar's left cluster
     animates in lockstep with the chat column. Without these, the
     resizable-panel JS mirrored `chat_panel.style.width` onto this
     element as an instant attribute change while the chat panel itself
     animated over 300ms — the topbar snapped open/closed in one frame,
     making the Dashboard/Preview pill jump left on collapse and right
     on expand. May 2026 fix. */
  transition: width 300ms ease-out, opacity 220ms ease-out;
  /* Clip ONLY the horizontal axis so the brand-mark, project switcher,
     star, credit pill, and collapse button clip cleanly as the cell
     shrinks toward 0 during the width transition. overflow-y stays
     visible so the team/app dropdown panels (absolutely positioned,
     opening downward out of this 37px-tall cell) are not clipped away.
     A plain `overflow: hidden` here made both header dropdowns invisible
     (#841 follow-up, May 2026). */
  overflow-x: clip;
  overflow-y: visible;
}
/* Expand button (sibling of chatHeader, shown only when chat is collapsed)
   also fades + tweens its visibility instead of toggling .hidden
   abruptly. The Stimulus controller still adds/removes `.hidden` to
   manage layout participation, but the opacity + visibility transition
   smooths the cross-fade against the collapsing chatHeader next to it. */
[data-theme] .editor-topbar-left .tb-iconbtn[data-editor-layout-target="expandButton"] {
  transition: opacity 200ms ease-out 80ms;
}
[data-theme] .editor-topbar-left .tb-iconbtn[data-editor-layout-target="expandButton"].hidden {
  /* Tailwind `.hidden` = `display: none` — keep that for layout, but
     also zero opacity so when the controller removes `.hidden` the
     transition has somewhere to start from. */
  opacity: 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);
}
/* On laptop / tablet widths the right cluster already carries 6-8 utility
   icon buttons + Share + Publish, and the center cluster's "Dashboard" /
   "Preview" labels eat ~140px of horizontal space that crowds the right
   cluster against the credit pill on the left.

   Breakpoint:
     - >= 1280px (most desktop monitors + 15" laptops at default scaling)
       keep the labels — they're scannable and the canvas has room.
     - < 1280px (most 13-14" laptops, iPad Pro landscape, etc.)
       hide the labels, tighten padding, and let the icons read on their own.
     - The whole topbar is `hidden lg:grid` (Tailwind lg = 1024px+), so this
       icon-only window covers 1024-1279px — every desktop-editor surface
       where horizontal space matters.

   Pixel-tight padding values picked so the icon-only button is visually
   the same height as the labeled one (28px) — only the width changes. */
@media (max-width: 1279px) {
  [data-theme] .editor-topbar .tabs-pill .tab-btn {
    /* Match label-mode height; just trim the inline padding. */
    padding: 0 9px;
    gap: 0; /* No second child to gap to once the span is hidden. */
  }
  [data-theme] .editor-topbar .tabs-pill .tab-btn > span {
    display: none;
  }
}
/* 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;
}
/* ============= Credit pill (right cluster, before Share/Publish) =============
   Compact pill showing the user's today-usage count, opening the Add Credits
   modal on click. Sits between the second tb-divider and Share. Visual model:
   .tb-btn shape (30px tall, 7px radius, hairline border) + monospace number
   like .chip-pill (signals "metric/count, not action label"). Accent-green
   coin icon by default; warning-yellow when balance is estimated-only or low.
   See app/views/shared/design_system/editor/_credit_pill.html.erb. */
[data-theme] .editor-topbar .ed-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
[data-theme] .editor-topbar .ed-credit-pill:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--hover-border);
}
[data-theme] .editor-topbar .ed-credit-pill svg,
[data-theme] .editor-topbar .ed-credit-pill i {
  font-size: 13px;
  color: var(--accent);
}
[data-theme] .editor-topbar .ed-credit-pill.is-low {
  color: var(--warning-fg);
  border-color: color-mix(in srgb, var(--warning-fg) 40%, var(--line));
}
[data-theme] .editor-topbar .ed-credit-pill.is-low svg,
[data-theme] .editor-topbar .ed-credit-pill.is-low i {
  color: var(--warning-fg);
}
[data-theme] .editor-topbar .ed-credit-pill.is-warning {
  color: var(--warning-fg);
  border-color: color-mix(in srgb, var(--warning-fg) 50%, var(--line));
  background: var(--warning-bg);
}
[data-theme] .editor-topbar .ed-credit-pill.is-warning svg,
[data-theme] .editor-topbar .ed-credit-pill.is-warning i {
  color: var(--warning-fg);
}
/* ============= 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;
}
/* --------------------------------------------------------------------------
   Chat suggestions row — horizontal scroll with edge-fade indicators.
   --------------------------------------------------------------------------
   Same affordance as the dashboard starter-tiles
   (see ./_starter_prompt_chips.css). Replaces the earlier 2-col grid +
   `[&>button:nth-child(n+3)]:hidden` clipping pattern from
   _chat_suggestions.html.erb. Scroll-driven discovery is more
   discoverable than the manual "cycle" button for 3-6 suggestions.

   Stimulus integration: the chat-suggestions controller defines
   `wrap`, `fadeLeft`, `fadeRight`, and `container` (the scroller) targets
   and updates the fade opacity on scroll. Fades default to opacity 0 (left)
   and 1 (right) so the right fade hints at scrollable content on first
   paint; the connect() handler immediately corrects both based on actual
   scroll metrics.
   -------------------------------------------------------------------------- */
[data-theme] .chat-suggest-wrap {
  position: relative;
  width: 100%;
}
[data-theme] .chat-suggest-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  padding: 2px;
  /* Hide native scrollbars — fades are the affordance. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
[data-theme] .chat-suggest-row::-webkit-scrollbar { display: none; }
[data-theme] .chat-suggest-card {
  flex: 0 0 220px;
  width: 220px;
  scroll-snap-align: start;
  position: relative;
  /* Animate width + flex-basis when hover-expanded (rules below).
     `flex-basis` and `width` must both transition since we change
     both in the :hover rule (some browsers prefer one or the other
     as the layout source of truth depending on the flex axis). */
  transition: flex-basis 200ms ease-out, width 200ms ease-out, box-shadow 200ms ease-out;
  /* All other visual styling (bg/border/hover/typography) is applied
     inline on the <button> in _chat_suggestions.html.erb so the
     v2 design tokens stay co-located with the markup that uses them.
     This class only owns the LAYOUT (size + snap + shrink) so the
     card holds its width inside the horizontal scroller. */
}
/* Hover-expand — only on devices with a real pointer (skips touch
   devices where hover doesn't make sense; users scroll to discover
   instead). The card grows from 220px to 360px and lifts above its
   neighbors via z-index. The neighbors reflow to make room (flex row
   recalc), so this is a deliberate "push the row" gesture not an
   overlay. (May 2026 — user request: "expand horizontally with
   clean animation on hover to see the full text.")

   Both the title (first div) and the description (last div) get
   `whitespace-nowrap text-ellipsis` in the partial's inline classes,
   so users see "Implement the platform/us..." for the title and
   "Yes, let's do the split. Create t..." for the description — both
   truncated. On hover, swap both to `whitespace: normal` so the full
   multi-line text fills the expanded card. */
@media (hover: hover) and (pointer: fine) {
  [data-theme] .chat-suggest-card:hover {
    flex-basis: 360px;
    width: 360px;
    z-index: 1;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
  }
  [data-theme] .chat-suggest-card:hover > div {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
[data-theme] .chat-suggest-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--t-base);
}
[data-theme] .chat-suggest-fade-left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 70%, transparent) 60%,
    transparent 100%
  );
}
[data-theme] .chat-suggest-fade-right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 70%, transparent) 60%,
    transparent 100%
  );
  /* Hint at scrollable content on first paint — connect() corrects
     this if the row happens to fit entirely (no scroll needed). */
  opacity: 1;
}
/* ==========================================================================
   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;
}
/* Tailwind's `.hidden { display: none }` has specificity (0,0,1,0) — the
   `.dv` rule above is (0,1,1,0) and wins, so a `.dv.hidden` element stays
   visible. Restore the expected `hidden` behavior for any `.dv` section
   that Stimulus toggles via classList (e.g. AI hub sub-sections in
   _ai_hub_panel.html.erb, where sections are `<section class="dv hidden">`
   and ai_hub_subnav_controller.js toggles the `hidden` class). Without
   this rule, all sections render stacked and the top sub-tabs appear to
   "do nothing" because the previous panel never disappears. */
[data-theme] .dv.hidden {
  display: none;
}
/* ============= 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);
  /* Never wrap label text — the button shrinks to its content's natural
     width within the parent flex row, but the label itself stays on
     one line. Without this, when the parent gets squeezed (e.g.
     "Invite Users" card inside a 2-col grid on a narrow dashboard
     panel), labels would wrap to two lines and the buttons would
     become tall odd-shaped chips. (May 2026, user-reported fix.) */
  white-space: nowrap;
  /* Keep natural button width regardless of how packed the row is —
     overflow is preferable to text-wrapping. The .dash-btn--icon-only
     modifier below + container query give us the icon-only escape
     hatch when the row truly can't fit. */
  flex-shrink: 0;
}
[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; }
/* Icon-only variant — hides the .dash-btn-label child (or any direct
   <span> child if no explicit label class) and tightens padding so
   the button collapses to a square 32×32 chip. Pair with title="" on
   the <button> so the affordance survives label loss. */
[data-theme] .dash-btn--icon-only {
  padding: 0 8px;
  gap: 0;
}
[data-theme] .dash-btn--icon-only .dash-btn-label,
[data-theme] .dash-btn--icon-only > span:not([class]) {
  display: none;
}
/* Auto-collapse to icon-only when the parent card is narrow. Container
   queries scope the lookup to the nearest container ancestor — we add
   `container-type: inline-size` to `.dash-card` below so this applies
   per-card, not per-viewport. Breakpoint = 240px chosen from this
   analysis:

     Invite Users card has 2 buttons, each ~100px natural width, plus
     8px gap = 208px minimum content width. Plus 40px card padding
     (18+20 each side, but rounded to outermost 40px) gives a 248px
     critical card width below which the buttons would either wrap
     (default) or overflow (with nowrap). Collapse at 240px keeps a
     small safety margin so the wider buttons inside the matching
     "App Visibility" card (with longer labels like "Make Public")
     also collapse before they hit the squeeze.

   The .dash-actions top action row is NOT inside a .dash-card, so this
   doesn't affect it (it uses its own flex-wrap behavior). */
@container dash-card (max-width: 240px) {
  [data-theme] .dash-card .dash-btn .dash-btn-label,
  [data-theme] .dash-card .dash-btn > span:not([class]) {
    display: none;
  }
  [data-theme] .dash-card .dash-btn {
    padding: 0 8px;
    gap: 0;
  }
}
/* About-app card + visibility/invite cards share this base.
   container-type/name enable @container queries (above) so per-card
   layout can adapt when the card is constrained (e.g. inside a 2-col
   grid on a narrow dashboard panel — invite/visibility row). */
[data-theme] .dash-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  container-type: inline-size;
  container-name: dash-card;
}
[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);
  /* #832 — the editor top bar (`.editor-topbar`) is z-index: 60. The
     scrim was z-index: 50, so even though `.pm` is vertically centered
     the top bar painted OVER the modal's header, clipping the
     "Publish Settings" title above the fold on a laptop viewport. The
     modal + its backdrop must sit above ALL editor chrome — bump the
     scrim above the top bar so the whole modal (header included) is
     visible and the backdrop dims the top bar too. */
  z-index: 70;
  display: grid;
  /* Vertically center the modal. `start center` (the previous value)
     glued `.pm` to the top of the viewport — which sits directly
     behind the editor's top bar (the bar has a higher stacking
     context), clipping the modal header. `.pm` has
     max-height: min(85vh, 920px) so it always fits centered with a
     32px backdrop margin top & bottom (.scrim padding); if it ever
     overflows on very short viewports, .scrim's `overflow: auto`
     still scrolls it. */
  place-items: 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;
  /* #832 — viewport-relative cap (matches the shared `.modal` cap so the
     fix is consistent across all v2 modals). `.scrim` adds 32px padding
     top & bottom for the backdrop margin; the grid rows (auto 1fr auto)
     keep .pm-head / .pm-foot pinned while .pm-body scrolls internally.
     This is a `max` — short publish states still size to content. */
  max-height: min(85vh, 920px);
  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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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%; }
}
/* Dashboard v2 — `/account?ds=v2` surface-specific styles.

   Pairs with `app/views/account/dashboard/index_v2.html.erb`. The view
   originally drew every element with inline `style=""`, which beats
   class-selector specificity — so :hover / :focus rules on shared DS
   classes (`.icon-btn`, `.chip`, etc.) had no effect on the dashboard.

   This file owns the colors / borders / transforms for the dashboard
   chrome that needs interactive states. Inline styles in the view keep
   layout / sizing / typography; the class-driven properties below are
   removed from inline `style=""` so the hover deltas land.

   Tokens only — no raw hex, no Tailwind utility colors, no !important. */
/* --------------------------------------------------------------------------
   NAV
   --------------------------------------------------------------------------
   `.dash-topnav` is the sticky band. Its bottom border spans edge-to-edge;
   `.dash-topnav-inner` is the centered `.ds-container` row inside it.
   Extracted from index_v2.html.erb inline styles (May 2026) so the nav
   chrome can be reasoned about and so adding nav items (notification bell,
   user menu) doesn't force the page template past readable length. */
[data-theme] .dash-topnav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding: 14px 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
[data-theme] .dash-topnav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
[data-theme] .dash-topnav-left {
  display: flex; align-items: center; gap: 28px;
}
[data-theme] .dash-topnav-right {
  display: flex; align-items: center; gap: 12px;
}
[data-theme] .dash-topnav-links {
  display: flex; gap: 2px;
}
@media (max-width: 720px) {
  /* Hide secondary nav links on small screens so credits + actions
     stay visible. A drawer is a deferred follow-up (mirrors the
     landing_v2 mobile-menu pattern). */
  [data-theme] .dash-topnav-links { display: none; }
}
[data-theme] .dash-nav-link {
  text-decoration: none;
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--t-base), background var(--t-base);
}
[data-theme] .dash-nav-link:hover,
[data-theme] .dash-nav-link:focus-visible {
  color: var(--fg);
  background: var(--hover-bg);
  outline: none;
}
[data-theme] .dash-nav-link.is-active {
  color: var(--fg);
  font-weight: 600;
}
[data-theme] .dash-credits-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-size: 13px;
  color: var(--fg-2);
}
/* No pill-level hover state — the pill is a status container, the
   Upgrade button inside is the interactive element. Mixing two
   independent hover feedbacks (pill border + button bg) on what reads
   as one visual component felt incoherent (per sanzone review). */
[data-theme] .dash-credits-pill-count {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--fg);
}
[data-theme] .dash-upgrade-btn {
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--t-base), transform var(--t-fast);
}
[data-theme] .dash-upgrade-btn:hover { background: color-mix(in srgb, var(--fg) 88%, transparent); }
[data-theme] .dash-upgrade-btn:active { transform: scale(0.97); }
[data-theme] .dash-upgrade-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* --------------------------------------------------------------------------
   COMPOSER (hero)
   -------------------------------------------------------------------------- */
[data-theme] .dash-composer {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* overflow is intentionally visible: the thinking-effort / model-picker
     popovers are position: absolute children that open upward via
     `bottom: calc(100% + 8px)` and need to escape this container. Inner
     children all use transparent backgrounds so the rounded corners
     stay clean without clipping. */
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
[data-theme] .dash-composer:hover { border-color: var(--hover-border); }
[data-theme] .dash-composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--composer-focus-shadow);
}
/* CRITICAL — the legacy `.dark textarea { ... !important }` and
   `.dark input[type="search"] { ... !important }` rules in theme.css
   (~line 1438) apply `var(--ed-surface-3)` background + `var(--ed-border)`
   border to ANY textarea / search input on a page where <html> has both
   `.dark` and any other class. The dashboard v2 layout has to emit
   `class="dark"` so Tailwind `dark:*` utilities work across Turbo nav
   (see dashboard.html.erb), so its composer textarea and apps-grid
   search input would otherwise inherit those editor-token styles.
   These overrides restore the v2 design intent: borderless, transparent
   children that blend into the `.dash-composer` / `.dash-search` shell.
   Specificity (0,2,1) + !important beats `.dark textarea`'s (0,1,1)
   + !important. Mirror this pattern for any new v2 surface that hosts
   <textarea> or <input type="search"> while emitting `.dark` on html. */
[data-theme] .dash-composer textarea,
[data-theme] .dash-search input[type="search"] {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--fg) !important;
}
[data-theme] .dash-composer textarea::-moz-placeholder, [data-theme] .dash-search input[type="search"]::-moz-placeholder {
  color: var(--fg-3) !important;
}
[data-theme] .dash-composer textarea::placeholder,
[data-theme] .dash-search input[type="search"]::placeholder {
  color: var(--fg-3) !important;
}
[data-theme] .dash-composer textarea:focus,
[data-theme] .dash-search input[type="search"]:focus {
  border: 0 !important;
  box-shadow: none !important;
}
[data-theme] .dash-composer-tool {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg-3);
  border-radius: var(--radius-xs);
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .dash-composer-tool:hover { color: var(--fg); background: var(--hover-bg); }
[data-theme] .dash-composer-tool:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme] .dash-composer-submit {
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-fast);
}
[data-theme] .dash-composer-submit:hover { background: var(--primary-hover); }
[data-theme] .dash-composer-submit:active { transform: scale(0.96); }
[data-theme] .dash-composer-submit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* --------------------------------------------------------------------------
   PROMPT CHIPS
   -------------------------------------------------------------------------- */
[data-theme] .dash-prompt-chip {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--chip-bg);
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), transform var(--t-fast);
}
[data-theme] .dash-prompt-chip:hover {
  background: var(--chip-bg-hover);
  border-color: var(--hover-border);
  color: var(--fg);
}
[data-theme] .dash-prompt-chip:active { transform: scale(0.98); }
[data-theme] .dash-prompt-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* --------------------------------------------------------------------------
   SEARCH + TABS (section head)
   -------------------------------------------------------------------------- */
[data-theme] .dash-search {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  transition: border-color var(--t-base);
}
[data-theme] .dash-search:hover,
[data-theme] .dash-search:focus-within { border-color: var(--hover-border); }
[data-theme] .dash-tabs {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}
[data-theme] .dash-tab {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg-3);
  border-radius: var(--radius-xs);
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .dash-tab:hover { color: var(--fg); }
[data-theme] .dash-tab.is-active { background: var(--card-bg); color: var(--fg); }
[data-theme] .dash-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme] .dash-tab-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-4);
}
[data-theme] .dash-tab.is-active .dash-tab-count { color: var(--accent-text); }
/* --------------------------------------------------------------------------
   APP CARDS
   -------------------------------------------------------------------------- */
[data-theme] .dash-app-card {
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
[data-theme] .dash-app-card:hover {
  border-color: var(--hover-border);
  transform: translateY(-2px);
}
[data-theme] .dash-app-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme] .dash-app-card-thumb-initial {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  color: color-mix(in srgb, var(--fg) 25%, transparent);
  letter-spacing: -0.02em;
  transition: color var(--t-slow) var(--ease-out);
}
[data-theme] .dash-app-card:hover .dash-app-card-thumb-initial {
  color: color-mix(in srgb, var(--fg) 40%, transparent);
}
[data-theme] .dash-new-app-card {
  text-decoration: none;
  color: inherit;
  border: 1px dashed var(--line-2);
  background: transparent;
  border-radius: var(--radius-lg);
  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] .dash-new-app-card:hover {
  border-color: var(--hover-border);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  transform: translateY(-2px);
}
[data-theme] .dash-new-app-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme] .dash-new-app-card-icon {
  background: var(--bg-3);
  color: var(--fg-2);
  transition: transform var(--t-base);
}
[data-theme] .dash-new-app-card:hover .dash-new-app-card-icon { transform: scale(1.05); }
/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
[data-theme] .dash-foot-link {
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--t-base);
  border-radius: 2px;
}
[data-theme] .dash-foot-link:hover { color: var(--fg); }
[data-theme] .dash-foot-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ==========================================================================
   Templates / Integrations index v2 — shared components

   Scoped under [data-theme] so they stay inert on legacy pages. These rules
   power /templates?ds=v2 and /integrations?ds=v2 only.

   Naming:
     .tmpl-*  → /templates-specific (grid + card with thumbnail + meta).
     .ti-*    → shared chrome (toolbar, search, category chips, pagination,
                empty + no-match states). "ti" = templates / integrations.

   The /integrations index reuses the existing .integ-card / .integ-grid /
   .integ-pagination styles from surfaces/landing.css; this file adds the
   index-density variant via the `.integ-grid--index` modifier so we don't
   touch the rail-density variant used on the landing page.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Toolbar (search + category chips on a single row)
   -------------------------------------------------------------------------- */
[data-theme] .ti-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
[data-theme] .ti-toolbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
/* --------------------------------------------------------------------------
   2. Search input — same shape as .dash-search but standalone so the
      /templates and /integrations pages don't need to import dashboard CSS.
   -------------------------------------------------------------------------- */
[data-theme] .ti-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  width: 320px;
  max-width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-base);
}
[data-theme] .ti-search:hover,
[data-theme] .ti-search:focus-within { border-color: var(--hover-border); }
[data-theme] .ti-search input[type="search"],
[data-theme] .ti-search input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: 500 13px var(--font-body);
  color: var(--fg);
}
[data-theme] .ti-search input::-moz-placeholder { color: var(--fg-4); }
[data-theme] .ti-search input::placeholder { color: var(--fg-4); }
[data-theme] .ti-search-icon {
  width: 14px;
  height: 14px;
  color: var(--fg-4);
  flex: 0 0 14px;
}
[data-theme] .ti-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  color: var(--fg-4);
  transition: background var(--t-fast), color var(--t-fast);
}
[data-theme] .ti-search-clear:hover { background: var(--hover-bg); color: var(--fg-2); }
/* --------------------------------------------------------------------------
   3. Category chip group — visually echoes .dash-tabs from dashboard v2 but
      doesn't depend on it.
   -------------------------------------------------------------------------- */
[data-theme] .ti-cat-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  background: var(--bg-1);
  border-radius: var(--radius-sm);
}
[data-theme] .ti-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--fg-3);
  font: 500 13px var(--font-body);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
[data-theme] .ti-cat-chip:hover { color: var(--fg); }
[data-theme] .ti-cat-chip.is-active {
  background: var(--card-bg);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}
[data-theme] .ti-cat-chip-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-4);
}
[data-theme] .ti-cat-chip.is-active .ti-cat-chip-count { color: var(--accent-text); }
/* --------------------------------------------------------------------------
   4. Semantic-search badge (Gemini-powered search active)
   -------------------------------------------------------------------------- */
[data-theme] .ti-search-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  color: var(--success-fg);
  font: 600 11px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--success-fg) 30%, transparent);
}
[data-theme] .ti-search-mode svg { width: 11px; height: 11px; }
/* --------------------------------------------------------------------------
   5. Result-summary line under the toolbar
   -------------------------------------------------------------------------- */
[data-theme] .ti-result-line {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  text-transform: uppercase;
}
/* --------------------------------------------------------------------------
   6. Templates grid — visually echoes the dashboard's .dash-app-card.
   -------------------------------------------------------------------------- */
[data-theme] .tmpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
[data-theme] .tmpl-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-slow) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
[data-theme] .tmpl-card:hover {
  border-color: var(--hover-border);
  transform: translateY(-2px);
}
[data-theme] .tmpl-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
[data-theme] .tmpl-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .tmpl-card-thumb-fallback {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, var(--bg-2)) 0%,
    var(--bg-2) 100%);
}
[data-theme] .tmpl-card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  transition: transform var(--t-slow) var(--ease-out);
}
[data-theme] .tmpl-card:hover .tmpl-card-thumb img { transform: scale(1.03); }
[data-theme] .tmpl-card-thumb-initial {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  pointer-events: none;
}
[data-theme] .tmpl-card-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
[data-theme] .tmpl-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme] .tmpl-card-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
[data-theme] .tmpl-card-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-3);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
[data-theme] .tmpl-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-theme] .tmpl-card-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
[data-theme] .tmpl-card-foot-item svg { width: 11px; height: 11px; }
[data-theme] .tmpl-card-foot-item.is-rating { color: var(--warning-fg); }
@media (max-width: 1100px) {
  [data-theme] .tmpl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  [data-theme] .tmpl-grid { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
   7. Integrations grid (index density) — tweaks on top of .integ-grid /
      .integ-card from surfaces/landing.css. The landing rail uses a tighter
      3-col grid at 18px padding; the index page wants the same card shape
      but a touch more breathing room and 4-col at wide widths.
   -------------------------------------------------------------------------- */
[data-theme] .integ-grid--index {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  [data-theme] .integ-grid--index { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 840px) {
  [data-theme] .integ-grid--index { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  [data-theme] .integ-grid--index { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
   8. Numbered pagination — used by both /templates and /integrations index.
      Reuses the .integ-page-btn / .integ-page-info shape from landing.css.
      The extra .ti-pagination wrapper centers the bar and adds the
      ellipsis affordance for very long page counts.
   -------------------------------------------------------------------------- */
[data-theme] .ti-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 36px;
}
[data-theme] .ti-pagination .integ-page-btn { height: 36px; padding: 0 14px; }
[data-theme] .ti-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--fg-2);
  font: 600 13px var(--font-body);
  text-decoration: none;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
[data-theme] .ti-page-num:hover { background: var(--hover-bg); color: var(--fg); }
[data-theme] .ti-page-num.is-current {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
[data-theme] .ti-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--fg-4);
  font-family: var(--font-mono);
}
/* --------------------------------------------------------------------------
   9. Empty state — used when the page has zero items to show.
      - .ti-empty           full-page wrapper
      - .ti-empty-skeleton  row of ghosted cards beneath the message
      - .ti-empty-card      single ghost-card outline
      - .ti-no-match        compact version for "no results for query"
   -------------------------------------------------------------------------- */
[data-theme] .ti-empty {
  padding: 56px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
[data-theme] .ti-empty-eyebrow {
  margin: 0 0 14px;
}
[data-theme] .ti-empty h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--fg);
  max-width: 22ch;
}
[data-theme] .ti-empty p {
  margin: 0 0 28px;
  max-width: 56ch;
  color: var(--fg-3);
  font-size: 15px;
  line-height: 1.55;
}
[data-theme] .ti-empty-cta {
  margin-bottom: 56px;
}
[data-theme] .ti-empty-skeleton {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 960px;
}
[data-theme] .ti-empty-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-2) 60%, transparent) 0%,
    transparent 100%);
  overflow: hidden;
}
[data-theme] .ti-empty-card::before,
[data-theme] .ti-empty-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 8px;
  background: var(--line);
  border-radius: var(--radius-xs);
  opacity: 0.7;
}
[data-theme] .ti-empty-card::before { top: 62%; right: 40%; }
[data-theme] .ti-empty-card::after  { top: 74%; right: 28%; height: 6px; opacity: 0.45; }
[data-theme] .ti-empty-card-thumb {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 50%;
  border-radius: var(--radius-md);
  background: var(--bg-2);
  overflow: hidden;
}
[data-theme] .ti-empty-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 50%,
    transparent 100%);
  animation: ti-shimmer 2.4s ease-in-out infinite;
}
@keyframes ti-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (max-width: 840px) {
  [data-theme] .ti-empty-skeleton { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  [data-theme] .ti-empty-skeleton { grid-template-columns: 1fr 1fr; gap: 12px; }
  [data-theme] .ti-empty-card { aspect-ratio: 3 / 4; }
}
/* No-match compact state */
[data-theme] .ti-no-match {
  padding: 64px 0;
  text-align: center;
}
[data-theme] .ti-no-match-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-3);
  margin: 0 auto 16px;
}
[data-theme] .ti-no-match h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--fg);
}
[data-theme] .ti-no-match p {
  margin: 0 0 20px;
  color: var(--fg-3);
  font-size: 14px;
}
/* --------------------------------------------------------------------------
   10. Section spacing helpers — keep the index pages' rhythm consistent
       with /landing v2 (page-hero 120px top, content 48-80px below).
   -------------------------------------------------------------------------- */
[data-theme] .ti-section { padding: 48px 0 80px; }
[data-theme] .ti-section-tight { padding: 24px 0 64px; }
@media (max-width: 768px) {
  [data-theme] .ti-section { padding: 32px 0 56px; }
  [data-theme] .ti-section-tight { padding: 16px 0 48px; }
}
/* ==========================================================================
   SHOW PAGES (v2) — /integrations/:slug + /templates/:slug

   Two long-form public landing pages share the same chrome (hero with
   identity, facts grid, content sections, FAQ accordion, related grid,
   footer CTA). All .ti-show-* classes live under [data-theme] so v1
   surfaces (sans `data-theme` on <html>) remain untouched.
   ========================================================================== */
/* --- 1. Breadcrumb ----------------------------------------------------- */
[data-theme] .ti-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-7) 0 var(--space-4);
  font: var(--weight-medium) 14px/1.4 var(--font-body);
  color: var(--fg-3);
}
[data-theme] .ti-breadcrumb a {
  color: var(--fg-3);
  text-decoration: none;
  transition: color 0.15s ease;
}
[data-theme] .ti-breadcrumb a:hover { color: var(--fg-1); }
[data-theme] .ti-breadcrumb-sep {
  color: var(--fg-4);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[data-theme] .ti-breadcrumb-current {
  color: var(--fg-1);
  font-weight: var(--weight-semibold);
}
/* --- 2. Hero with logo + facts ---------------------------------------- */
[data-theme] .ti-show-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding: var(--space-8) 0 var(--space-14);
  align-items: start;
}
@media (min-width: 960px) {
  [data-theme] .ti-show-hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}
[data-theme] .ti-show-hero-info { min-width: 0; }
[data-theme] .ti-show-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 12px;
  margin-bottom: var(--space-6);
  overflow: hidden;
}
[data-theme] .ti-show-logo img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
[data-theme] .ti-show-logo-placeholder {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
[data-theme] .ti-show-eyebrow-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
[data-theme] .ti-show-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}
[data-theme] .ti-show-lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}
[data-theme] .ti-show-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 var(--space-7);
}
[data-theme] .ti-show-meta-dot {
  display: inline-block;
  margin: 0 var(--space-2);
  color: var(--fg-4);
}
/* --- 3. Hero CTA row -------------------------------------------------- */
[data-theme] .ti-show-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
[data-theme] .ti-show-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--brand-fg);
  font: var(--weight-semibold) 16px/1 var(--font-body);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-theme] .ti-show-primary-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(69, 231, 96, 0.25);
}
[data-theme] .ti-show-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--weight-medium) 14px/1.4 var(--font-body);
  color: var(--fg-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
[data-theme] .ti-show-secondary-cta:hover { color: var(--fg-1); }
/* --- 4. Facts grid (right column of hero on desktop) ------------------ */
[data-theme] .ti-show-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 1100px) {
  [data-theme] .ti-show-facts { gap: var(--space-4); }
}
[data-theme] .ti-show-fact {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
[data-theme] .ti-show-fact-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--space-2);
}
[data-theme] .ti-show-fact-value {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--fg-1);
  margin: 0;
}
/* --- 5. Generic content section -------------------------------------- */
[data-theme] .ti-show-section {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--line);
}
[data-theme] .ti-show-section-inner { max-width: 760px; }
[data-theme] .ti-show-section h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 var(--space-6);
}
[data-theme] .ti-show-section h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 18px;
  line-height: 1.4;
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
[data-theme] .ti-show-section p { color: var(--fg-2); line-height: 1.6; }
/* Inherit `.prose` rich content (from generated_contents.content_html) */
[data-theme] .ti-show-prose {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-2);
}
[data-theme] .ti-show-prose h2 { margin-top: var(--space-10); }
[data-theme] .ti-show-prose h3 {
  margin-top: var(--space-8);
  font-size: 20px;
  color: var(--fg-1);
}
[data-theme] .ti-show-prose p { margin: 0 0 var(--space-5); }
[data-theme] .ti-show-prose ul,
[data-theme] .ti-show-prose ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
}
[data-theme] .ti-show-prose li { margin: 0 0 var(--space-2); }
[data-theme] .ti-show-prose strong { color: var(--fg-1); font-weight: var(--weight-semibold); }
[data-theme] .ti-show-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}
[data-theme] .ti-show-prose a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* --- 6. Numbered steps (How it works fallback) ------------------------ */
[data-theme] .ti-show-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-6);
}
[data-theme] .ti-show-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-4);
  align-items: start;
}
[data-theme] .ti-show-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--brand-fg);
  font: var(--weight-bold) 15px/1 var(--font-body);
}
[data-theme] .ti-show-step-body p { margin: 0; }
/* --- 7. Features / use-cases grid ------------------------------------- */
[data-theme] .ti-show-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}
[data-theme] .ti-show-feat {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
[data-theme] .ti-show-feat h3 {
  font-size: 16px;
  margin: 0 0 var(--space-2);
}
[data-theme] .ti-show-feat p {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
}
/* --- 8. FAQ accordion (native <details>/<summary>) -------------------- */
[data-theme] .ti-show-faq {
  display: grid;
  gap: var(--space-3);
}
[data-theme] .ti-show-faq-item {
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
[data-theme] .ti-show-faq-item summary {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font: var(--weight-semibold) 16px/1.45 var(--font-body);
  color: var(--fg-1);
  transition: background 0.15s ease;
}
[data-theme] .ti-show-faq-item summary:hover { background: var(--bg-3); }
[data-theme] .ti-show-faq-item summary::-webkit-details-marker { display: none; }
[data-theme] .ti-show-faq-item-icon {
  flex-shrink: 0;
  color: var(--fg-3);
  transition: transform 0.2s ease;
}
[data-theme] .ti-show-faq-item[open] .ti-show-faq-item-icon { transform: rotate(180deg); }
[data-theme] .ti-show-faq-answer {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--fg-2);
  line-height: 1.65;
}
[data-theme] .ti-show-faq-answer > :first-child { margin-top: 0; }
/* --- 9. Comparison table --------------------------------------------- */
[data-theme] .ti-show-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
[data-theme] .ti-show-table {
  width: 100%;
  border-collapse: collapse;
  font: 14px/1.5 var(--font-body);
}
[data-theme] .ti-show-table th,
[data-theme] .ti-show-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
[data-theme] .ti-show-table th {
  font-weight: var(--weight-semibold);
  color: var(--fg-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-theme] .ti-show-table tr:last-child td { border-bottom: 0; }
[data-theme] .ti-show-table td { color: var(--fg-2); }
[data-theme] .ti-show-table-brand { color: var(--fg-1); font-weight: var(--weight-semibold); }
/* --- 10. Related links grid ------------------------------------------ */
[data-theme] .ti-show-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
[data-theme] .ti-show-related-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--fg-1);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
[data-theme] .ti-show-related-card:hover {
  border-color: var(--line-2);
  transform: translateY(-1px);
}
[data-theme] .ti-show-related-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 13px;
  color: var(--fg-2);
  flex-shrink: 0;
  overflow: hidden;
}
[data-theme] .ti-show-related-logo img { max-width: 100%; max-height: 100%; }
[data-theme] .ti-show-related-name {
  font: var(--weight-semibold) 14px/1.3 var(--font-body);
  color: var(--fg-1);
  margin: 0 0 2px;
}
[data-theme] .ti-show-related-desc {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* --- 11. Tags ------------------------------------------------------- */
[data-theme] .ti-show-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
[data-theme] .ti-show-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font: var(--weight-medium) 13px/1 var(--font-body);
  color: var(--fg-2);
}
/* --- 12. Preview panel (templates show) ------------------------------ */
[data-theme] .ti-show-preview {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .ti-show-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
[data-theme] .ti-show-preview-placeholder {
  color: var(--fg-4);
}
/* --- 13. Footer CTA band -------------------------------------------- */
[data-theme] .ti-show-cta {
  margin: var(--space-16) 0 var(--space-20);
  padding: var(--space-12) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  border: 1px solid var(--line);
  text-align: center;
}
[data-theme] .ti-show-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
[data-theme] .ti-show-cta p {
  font-size: 16px;
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
}
/* --- 14. Responsive ------------------------------------------------- */
@media (max-width: 768px) {
  [data-theme] .ti-show-hero { padding: var(--space-6) 0 var(--space-10); }
  [data-theme] .ti-show-section { padding: var(--space-10) 0; }
  [data-theme] .ti-show-cta { margin: var(--space-10) 0 var(--space-12); padding: var(--space-8) var(--space-5); }
  [data-theme] .ti-show-facts { grid-template-columns: 1fr 1fr; }
}
/* Starter prompt chips + tiles — design system v2.

   Component CSS for the "Recommended build types" surface rendered by
   `shared/design_system/_starter_prompt_chips.html.erb`. Two visual variants:

   - `.starter-chips` / `.starter-chip` — compact pill row. Used on the
     marketing hero (landing v2) where horizontal space is tight and we just
     need a quick prefill affordance below the composer.
   - `.starter-tiles` / `.starter-tile` — full-bleed grid with icon + label.
     Used on the signed-in dashboard hero where we have room for a richer
     "what will you build today?" surface.

   Class names are NOT `.chip` / `.chips` because those are taken by the DS
   chip atomic + the landing-surface override (see surfaces/landing.css).
   Keeping starter-* in its own namespace lets both surfaces evolve
   independently. */
/* --------------------------------------------------------------------------
   COMPACT CHIP ROW (marketing hero)
   -------------------------------------------------------------------------- */
[data-theme] .starter-chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
[data-theme] .starter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-base), background var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
[data-theme] .starter-chip:hover {
  color: var(--fg);
  background: var(--hover-bg);
  border-color: var(--hover-border);
}
[data-theme] .starter-chip:active { transform: scale(0.98); }
[data-theme] .starter-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
@media (max-width: 720px) {
  /* Wrap to 3 columns × 2 rows on narrow screens so labels stay readable. */
  [data-theme] .starter-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 420px) {
  /* And 2 columns × 3 rows on phones; the 6th chip wraps below. */
  [data-theme] .starter-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --------------------------------------------------------------------------
   DETAILED TILE ROW (dashboard hero) — single row, scrolls horizontally
   --------------------------------------------------------------------------
   `.starter-tiles-wrap` is the positioned shell that holds two
   pseudo-overlay fades (left + right) + the actual scroller.
   `.starter-tiles` is the scroller — flex, snap, scrollbar-hidden.
   The fade opacity is driven by `starter_prompts_controller.js` based on
   scrollLeft / scrollWidth so the left fade hides at the start and the
   right fade hides at the end. */
[data-theme] .starter-tiles-wrap {
  position: relative;
  margin-top: 18px;
  width: 100%;
  /* No max-width — the row spans the full ds-container width so users
     get a meaningful scroll distance even on wide displays. */
}
[data-theme] .starter-tiles {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 4px;
  padding: 2px 4px;
  /* Hide native scrollbars — fades are the affordance. Inert keyboard
     scrolling still works (Stimulus controller listens for scroll events
     from any source, not just pointer drag). */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
[data-theme] .starter-tiles::-webkit-scrollbar { display: none; }
[data-theme] .starter-tile {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--t-base), background var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
[data-theme] .starter-tile:hover {
  color: var(--fg);
  background: var(--hover-bg);
  border-color: var(--hover-border);
}
[data-theme] .starter-tile:hover .starter-tile-icon { color: var(--accent); }
[data-theme] .starter-tile:active { transform: scale(0.99); }
[data-theme] .starter-tile:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
[data-theme] .starter-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--fg-3);
  transition: color var(--t-base);
}
[data-theme] .starter-tile-icon svg {
  width: 14px;
  height: 14px;
}
[data-theme] .starter-tile-label {
  /* No flex / no truncation — labels stay on one line in their natural
     width so the user can read the full type name. Horizontal scroll
     reveals tiles that don't fit. */
  display: inline-block;
}
/* Fade overlays — sit absolutely over the row's left + right edges.
   `pointer-events: none` so clicks on tiles underneath still register.
   Width tuned to match the fade gradients used on v1 (32-40px on the
   scroller); `--bg` is the surrounding page background so the gradient
   blends correctly when the user toggles light/dark. */
[data-theme] .starter-tiles-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
  /* Default to invisible — Stimulus controller fades them in/out based on
     scroll state. Without this initial opacity, the left fade would
     briefly flash at page load before `updateFades()` runs in the next
     animation frame. */
  opacity: 0;
  transition: opacity var(--t-base);
}
[data-theme] .starter-tiles-fade-left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 70%, transparent) 60%,
    transparent 100%
  );
}
[data-theme] .starter-tiles-fade-right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 70%, transparent) 60%,
    transparent 100%
  );
  /* Right fade starts visible on first paint as a "scrollable" hint
     (overridden the moment the controller's connect → updateFades runs,
     which is also when it'd properly hide if the row happens to fit). */
  opacity: 1;
}
@media (max-width: 540px) {
  /* On phones, narrow the fades so they don't eat too much of the row. */
  [data-theme] .starter-tiles-fade { width: 32px; }
}
/* Prompt Builder modal — design system v2 overrides.

   Scope: when the shared modal partial (`shared/_prompt_builder_modal`) is
   rendered inside a `.prompt-builder-v2` wrapper on a v2 surface, repaint
   its v1 Tailwind chrome with v2 design tokens. We DO NOT fork the partial
   — same markup, same Stimulus controller, just a different paint job —
   so v1 (untagged) keeps its indigo/primary palette while v2 gets the
   accent-green palette and v2 typography.

   What we override:
     1. The primary accent ring/gradient (v1 = indigo `primary-500`,
        v2 = green `var(--accent)`).
     2. Panel + header surfaces — align with `var(--card-bg)` / `var(--bg-1)`
        so the modal sits flush with the surrounding v2 surface.
     3. Body font — Tailwind defaults to system-ui via BulletTrain; v2
        wants Work Sans / Geist (whichever the surface set as `--font-body`).
     4. Hairline borders — use `var(--line)` so the modal stays in step with
        the rest of the v2 chrome when the user toggles light/dark.

   What we LEAVE ALONE:
     - The Tailwind `dark:` variants. Dashboard + landing v2 layouts both
       set `<html class="dark">` when `design_system_theme == "dark"` (see
       dashboard.html.erb), so `dark:bg-gray-900` etc. already fire. We
       layer on top of that to align colors to v2 tokens — not replace
       Tailwind wholesale.
     - Spacing / sizing / layout. Those work fine as-is.

   If we ever need a full DS-token modal, fork the partial. For now this is
   the minimum-diff path to "feels v2" without touching the 2k-line
   `prompt_builder_controller.js`. */
/* Wrapper marker — applies to every descendant inside the modal panel. */
[data-theme] .prompt-builder-v2 {
  /* Inherit v2 body font into every child element that doesn't pick its
     own (Tailwind's `font-sans` defaults to `system-ui` from BulletTrain). */
  font-family: var(--font-body);
}
/* ---- 1. Primary accent swap (indigo → accent green) ------------------- */
/* The header avatar — `from-primary-500 to-primary-600` becomes the v2
   accent. Specificity battle: Tailwind ships the gradient as
   `bg-gradient-to-br from-primary-500 to-primary-600`, which expands to
   `background-image: linear-gradient(...)`. We override with a flat
   accent fill — the gradient was decorative, not load-bearing. */
[data-theme] .prompt-builder-v2 .from-primary-500.to-primary-600,
[data-theme] .prompt-builder-v2 [class*="from-primary-"][class*="to-primary-"] {
  background: var(--accent) !important;
  background-image: none !important;
}
[data-theme] .prompt-builder-v2 .from-primary-500.to-primary-600 svg,
[data-theme] .prompt-builder-v2 [class*="from-primary-"][class*="to-primary-"] svg {
  color: var(--accent-fg) !important;
}
/* Focus rings on inputs / textareas — `focus:ring-primary-500`. */
[data-theme] .prompt-builder-v2 input:focus,
[data-theme] .prompt-builder-v2 textarea:focus,
[data-theme] .prompt-builder-v2 select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
/* CTA buttons — v1 uses `bg-primary-500 hover:bg-primary-600`. Match the
   v2 `.btn-primary` palette (accent fill, accent-fg text). */
[data-theme] .prompt-builder-v2 .bg-primary-500,
[data-theme] .prompt-builder-v2 .bg-primary-600 {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}
[data-theme] .prompt-builder-v2 .bg-primary-500:hover,
[data-theme] .prompt-builder-v2 .bg-primary-600:hover {
  background: var(--primary-hover, color-mix(in srgb, var(--accent) 90%, black)) !important;
}
/* Text accents — `text-primary-500/600` → accent text token. */
[data-theme] .prompt-builder-v2 .text-primary-500,
[data-theme] .prompt-builder-v2 .text-primary-600,
[data-theme] .prompt-builder-v2 .text-primary-400 {
  color: var(--accent-text) !important;
}
/* Secondary accent (the AI-research/Perplexity callouts use
   `text-secondary-500` for a softer pop). Align with v2's muted-accent. */
[data-theme] .prompt-builder-v2 .text-secondary-500 {
  color: var(--accent-text) !important;
  opacity: 0.85;
}
/* ---- 2. Panel + header surfaces --------------------------------------- */
/* Panel background — `bg-white dark:bg-gray-900` → v2 card surface.
   Targeting the specific panel target keeps us from repainting nested
   white cards inside the panel. */
[data-theme] .prompt-builder-v2 [data-prompt-builder-target="panel"] {
  background: var(--card-bg) !important;
  color: var(--fg);
  /* Drop the gradient header — v2 uses flat surfaces. */
}
/* Header strip — v1 has `bg-gradient-to-r from-gray-50 to-white
   dark:from-gray-800 dark:to-gray-900`. Flatten + use v2 surface-1. */
[data-theme] .prompt-builder-v2 [class*="from-gray-50"][class*="to-white"],
[data-theme] .prompt-builder-v2 [class*="dark:from-gray-800"][class*="dark:to-gray-900"] {
  background: var(--bg-1) !important;
  background-image: none !important;
}
/* ---- 3. Hairlines + dividers ------------------------------------------ */
/* Section borders — `border-gray-200 dark:border-gray-700` are everywhere.
   v2 keeps two hairline tokens; we use `--line` for the standard one. */
[data-theme] .prompt-builder-v2 .border-gray-200,
[data-theme] .prompt-builder-v2 .border-gray-300,
[data-theme] .prompt-builder-v2 .dark\:border-gray-600,
[data-theme] .prompt-builder-v2 .dark\:border-gray-700,
[data-theme] .prompt-builder-v2 .dark\:border-gray-800 {
  border-color: var(--line) !important;
}
/* Empty-state amber callout (the "Try one of these" inspiration block).
   Keep the warm tone — repaint with v2's warning token. */
[data-theme] .prompt-builder-v2 .bg-amber-50,
[data-theme] .prompt-builder-v2 .dark\:bg-amber-900\/20 {
  background: color-mix(in srgb, var(--warning-fg, #c8a64a) 12%, var(--card-bg)) !important;
}
[data-theme] .prompt-builder-v2 .border-amber-200,
[data-theme] .prompt-builder-v2 .dark\:border-amber-800 {
  border-color: color-mix(in srgb, var(--warning-fg, #c8a64a) 40%, transparent) !important;
}
[data-theme] .prompt-builder-v2 .text-amber-500,
[data-theme] .prompt-builder-v2 .text-amber-700,
[data-theme] .prompt-builder-v2 .text-amber-800,
[data-theme] .prompt-builder-v2 .dark\:text-amber-200,
[data-theme] .prompt-builder-v2 .dark\:text-amber-300 {
  color: var(--warning-fg, #c8a64a) !important;
}
/* ---- 4. Body text alignment ------------------------------------------- */
/* v1 sets `text-gray-900 dark:text-white` on most copy. The dark-mode
   variant gets us close, but the light theme should still read as v2 —
   so map both gray-900 + the bare white into the semantic fg token. */
[data-theme] .prompt-builder-v2 .text-gray-900,
[data-theme] .prompt-builder-v2 .dark\:text-white {
  color: var(--fg) !important;
}
[data-theme] .prompt-builder-v2 .text-gray-700,
[data-theme] .prompt-builder-v2 .dark\:text-gray-300 {
  color: var(--fg-2) !important;
}
[data-theme] .prompt-builder-v2 .text-gray-500,
[data-theme] .prompt-builder-v2 .text-gray-400,
[data-theme] .prompt-builder-v2 .dark\:text-gray-400,
[data-theme] .prompt-builder-v2 .dark\:text-gray-500 {
  color: var(--fg-3) !important;
}
/* Backdrop — `bg-black/50 backdrop-blur-sm` is fine; just dial the blur
   to match v2's nav/drawer feel. */
[data-theme] .prompt-builder-v2 [data-prompt-builder-target="backdrop"] {
  background: color-mix(in srgb, var(--bg) 60%, transparent) !important;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
}
/* Phase 7 — surfaces (full pages with their own custom layout) */
/* ==========================================================================
   OverSkill Payments mission control — surface styles (May 2026).
   --------------------------------------------------------------------------
   The /account/payments page. Custom dark surface, white-labeled as
   "OverSkill Payments" (the user-visible name; "Whop" is the upstream
   provider we never surface). All rules scoped under [data-theme] so
   the legacy BulletTrain auth/admin views remain untouched.

   Pattern:
     - .payments-* → page-level surface, header, status banners, KYC
     - .payments-card  → mission-control card shell
     - .payments-table → apps table
     - .payments-row, .payments-stat → repeating row primitives
   ========================================================================== */
[data-theme] .payments-body {
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  font-family: var(--font-body);
}
[data-theme] .payments-shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px var(--container-pad) 96px;
}
@media (max-width: 720px) {
  [data-theme] .payments-shell {
    padding: 20px var(--container-pad-mobile) 64px;
  }
}
/* =========================================================================
   Sub-nav (Overview / Apps / Payments / Withdrawals / Settings)
   May 2026 — splits the page into 5 tabs so we're not stuffing the
   entire surface into one scroll. Horizontal scrolls on narrow widths
   so the labels never wrap. Active state gets the OverSkill brand
   green underline (matches `editor.accent-green`).
   ========================================================================= */
[data-theme] .payments-subnav {
  display: flex;
  gap: 0;
  margin: 0 0 32px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
[data-theme] .payments-subnav::-webkit-scrollbar { display: none; }
[data-theme] .payments-subnav-item {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  margin-bottom: -1px; /* overlap the parent border for the active underline */
  border-bottom: 2px solid transparent;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
[data-theme] .payments-subnav-item:hover {
  color: var(--fg);
}
[data-theme] .payments-subnav-item--active {
  color: var(--fg);
  border-bottom-color: #45e760;
}
[data-theme] .payments-tab-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 720px) {
  [data-theme] .payments-subnav {
    margin-bottom: 20px;
  }
  [data-theme] .payments-subnav-item {
    padding: 10px 14px;
    font-size: 13px;
  }
}
/* =========================================================================
   Header
   ========================================================================= */
[data-theme] .payments-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}
[data-theme] .payments-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
[data-theme] .payments-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.01em;
}
[data-theme] .payments-subtitle {
  font-size: 15px;
  color: var(--fg-3);
  margin: 0;
  max-width: 56ch;
}
[data-theme] .payments-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
[data-theme] .payments-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
[data-theme] .payments-refresh-btn:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--fg);
}
[data-theme] .payments-refresh-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* =========================================================================
   Mode pill (Live / Test / Action required / Setup pending / Not connected)
   ========================================================================= */
[data-theme] .payments-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}
[data-theme] .payments-mode-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-4);
  flex: 0 0 auto;
}
[data-theme] .payments-mode-pill--live { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
[data-theme] .payments-mode-pill--live::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
[data-theme] .payments-mode-pill--test,
[data-theme] .payments-mode-pill--kyc_required {
  color: #f5c245;
  border-color: color-mix(in srgb, #f5c245 40%, var(--line));
}
[data-theme] .payments-mode-pill--test::before,
[data-theme] .payments-mode-pill--kyc_required::before {
  background: #f5c245;
}
[data-theme] .payments-mode-pill--action_required { color: #ff7a7a; border-color: color-mix(in srgb, #ff7a7a 40%, var(--line)); }
[data-theme] .payments-mode-pill--action_required::before { background: #ff7a7a; }
[data-theme] .payments-mode-pill--setup_pending,
[data-theme] .payments-mode-pill--not_connected { color: var(--fg-3); }
/* =========================================================================
   Status banner (action-required CTA above the cards)
   ========================================================================= */
[data-theme] .payments-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning-fg);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}
[data-theme] .payments-banner--rejected { border-left-color: var(--danger-fg); }
[data-theme] .payments-banner--success  { border-left-color: var(--success-fg); }
[data-theme] .payments-banner-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--warning-fg);
  font-size: 18px;
}
[data-theme] .payments-banner--rejected .payments-banner-icon { background: var(--danger-bg); color: var(--danger-fg); }
[data-theme] .payments-banner--success  .payments-banner-icon { background: var(--success-bg); color: var(--success-fg); }
[data-theme] .payments-banner-body { flex: 1; min-width: 0; }
[data-theme] .payments-banner-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  margin: 0 0 2px;
}
[data-theme] .payments-banner-desc {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0;
}
[data-theme] .payments-banner-action {
  flex: 0 0 auto;
}
[data-theme] .payments-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out);
}
[data-theme] .payments-banner-cta:hover { background: var(--primary-hover); }
/* =========================================================================
   Cards (balance + identity + table + recent payments)
   ========================================================================= */
[data-theme] .payments-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-theme] .payments-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
[data-theme] .payments-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  margin: 0;
  letter-spacing: 0.01em;
}
[data-theme] .payments-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 4px;
}
[data-theme] .payments-card-help {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0;
}
[data-theme] .payments-card-link {
  color: var(--accent-text);
  font-size: 13px;
  text-decoration: none;
}
[data-theme] .payments-card-link:hover { text-decoration: underline; }
/* Two-column row (balance + identity) */
[data-theme] .payments-two-col {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 960px) {
  [data-theme] .payments-two-col { grid-template-columns: 1fr; }
}
/* Balance figure */
[data-theme] .payments-balance-amount {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
[data-theme] .payments-balance-currency {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-left: 6px;
  vertical-align: middle;
}
[data-theme] .payments-balance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
[data-theme] .payments-balance-stat-label {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 0 0 4px;
}
[data-theme] .payments-balance-stat-value {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  margin: 0;
}
[data-theme] .payments-balance-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
[data-theme] .payments-balance-actions-disabled {
  font-size: 12px;
  color: var(--fg-3);
  font-style: italic;
}
/* Embedded Whop component slot — we control surface, Whop renders inside */
[data-theme] .payments-embed-slot {
  background: var(--bg-1);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-md);
  padding: 16px;
  min-height: 120px;
  color: var(--fg-3);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
[data-theme] .payments-embed-slot--loaded {
  border-style: solid;
  padding: 0;
  background: transparent;
  align-items: stretch;
  justify-content: stretch;
  display: block;
}
/* Identity card */
[data-theme] .payments-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
@media (max-width: 540px) {
  [data-theme] .payments-identity-grid { grid-template-columns: 1fr; }
}
[data-theme] .payments-identity-label {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 0 0 2px;
}
[data-theme] .payments-identity-value {
  font-size: 14px;
  color: var(--fg);
  margin: 0;
  font-weight: 500;
  word-break: break-word;
}
[data-theme] .payments-identity-value--muted { color: var(--fg-3); font-weight: 400; font-style: italic; }
[data-theme] .payments-identity-value--mono { font-family: var(--font-mono); font-size: 12px; }
[data-theme] .payments-identity-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
[data-theme] .payments-identity-status--ok  { color: var(--success-fg); }
[data-theme] .payments-identity-status--warn { color: var(--warning-fg); }
[data-theme] .payments-identity-status--err  { color: var(--danger-fg); }
/* =========================================================================
   Apps table — repeating row card UI (table semantics, card visual)
   ========================================================================= */
[data-theme] .payments-section { margin-bottom: 32px; }
[data-theme] .payments-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
[data-theme] .payments-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--fg);
  margin: 0;
}
[data-theme] .payments-section-meta {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--fg-3);
}
[data-theme] .payments-table {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
[data-theme] .payments-table-head,
[data-theme] .payments-table-row {
  display: grid;
  /* 5 columns: App / Status / Bank / 30d revenue / Customers.
     Dropped "KYC" + "Mode" columns per Sanzone steer (2026-05-18) —
     both were redundant with Status. Width ratio rebalanced so App
     and Status get the visible real-estate they need; the three
     numeric columns share the remainder. */
  grid-template-columns: 2.4fr 1.2fr 0.8fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}
[data-theme] .payments-table-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}
[data-theme] .payments-table-row + .payments-table-row {
  border-top: 1px solid var(--line);
}
[data-theme] .payments-table-row {
  transition: background var(--t-base) var(--ease-out);
}
[data-theme] .payments-table-row:hover {
  background: color-mix(in srgb, var(--bg-3) 30%, transparent);
}
[data-theme] .payments-table-app {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
[data-theme] .payments-table-app-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  font-size: 12px;
  flex: 0 0 auto;
}
[data-theme] .payments-table-app-logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}
[data-theme] .payments-table-app-name {
  font-weight: 500;
  color: var(--fg);
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme] .payments-table-app-meta {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}
[data-theme] .payments-table-status {
  font-size: 13px;
}
[data-theme] .payments-table-cell-ok  { color: var(--success-fg); }
[data-theme] .payments-table-cell-err { color: var(--danger-fg); }
[data-theme] .payments-table-cell-muted { color: var(--fg-3); }
[data-theme] .payments-table-cell-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
[data-theme] .payments-table-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--fg-3);
  font-size: 14px;
}
[data-theme] .payments-table-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}
[data-theme] .payments-add-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
[data-theme] .payments-add-app-btn:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
}
/* =========================================================================
   Apps table — search + pagination (added 2026-05-18)
   Renders above + below the table when the team has >APPS_PER_PAGE apps
   or the user is actively searching. Both controls submit/navigate
   through the same `apps_table` Turbo Frame so the rest of the
   dashboard stays static.
   ========================================================================= */
[data-theme] .payments-apps-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
[data-theme] .payments-apps-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
[data-theme] .payments-apps-search input[type="text"] {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  width: 260px;
  max-width: 100%;
  transition: border-color var(--t-base) var(--ease-out);
}
[data-theme] .payments-apps-search input[type="text"]::-moz-placeholder {
  color: var(--fg-4);
}
[data-theme] .payments-apps-search input[type="text"]::placeholder {
  color: var(--fg-4);
}
[data-theme] .payments-apps-search input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
[data-theme] .payments-apps-search-clear {
  color: var(--fg-3);
  font-size: 12px;
  text-decoration: underline;
}
[data-theme] .payments-apps-search-clear:hover { color: var(--fg-2); }
[data-theme] .payments-apps-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}
[data-theme] .payments-apps-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}
[data-theme] .payments-apps-pagination-link {
  color: var(--accent-text);
  font-size: 13px;
  text-decoration: none;
}
[data-theme] .payments-apps-pagination-link:hover { text-decoration: underline; }
[data-theme] .payments-apps-pagination-disabled {
  color: var(--fg-4);
  font-size: 13px;
}
[data-theme] .payments-apps-page-indicator {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}
/* =========================================================================
   Recent payments
   ========================================================================= */
[data-theme] .payments-recent {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
[data-theme] .payments-recent-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr 1fr 0.8fr 0.6fr;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  align-items: center;
  font-size: 13px;
}
[data-theme] .payments-recent-row:first-child { border-top: 0; }
[data-theme] .payments-recent-head {
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}
[data-theme] .payments-recent-amount {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--fg);
}
[data-theme] .payments-recent-receipt {
  color: var(--accent-text);
  text-decoration: none;
}
[data-theme] .payments-recent-receipt:hover { text-decoration: underline; }
[data-theme] .payments-recent-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}
/* =========================================================================
   Developer panel (collapsed)
   ========================================================================= */
[data-theme] .payments-dev {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
[data-theme] .payments-dev-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 500;
  font-size: 14px;
  color: var(--fg);
}
[data-theme] .payments-dev-summary::after {
  content: "›";
  color: var(--fg-3);
  font-size: 18px;
  transition: transform var(--t-base) var(--ease-out);
}
[data-theme] details[open] .payments-dev-summary::after { transform: rotate(90deg); }
[data-theme] .payments-dev-body {
  padding: 0 20px 20px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
[data-theme] .payments-dev-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-theme] .payments-dev-key {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
[data-theme] .payments-dev-value {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  color: var(--fg-2);
  word-break: break-all;
}
/* =========================================================================
   Polling indicator (after Whop hosted onboarding return)
   ========================================================================= */
[data-theme] .payments-poll-spinner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-3);
}
[data-theme] .payments-poll-spinner::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: payments-spin 0.8s linear infinite;
}
@keyframes payments-spin {
  to { transform: rotate(360deg); }
}
/* =========================================================================
   Footer attribution (faint "powered by" mark)
   ========================================================================= */
[data-theme] .payments-footer-attribution {
  margin-top: 48px;
  text-align: center;
  font-size: 11px;
  color: var(--fg-4);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
/* =========================================================================
   Cross-page KYC banner (editor topbar + dashboard)
   ========================================================================= */
[data-theme] .kyc-action-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 36px;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--warning-fg) 18%, var(--bg-1));
  border-bottom: 1px solid color-mix(in srgb, var(--warning-fg) 35%, var(--line));
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}
[data-theme] .kyc-action-banner-text-short { display: none; }
[data-theme] .kyc-action-banner-text-full { display: inline; }
[data-theme] .kyc-action-banner-link {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  /* Larger tap target on mobile, no visual bloat on desktop */
  padding: 4px 0;
}
[data-theme] .kyc-action-banner-link:hover { text-decoration: underline; }
[data-theme] .kyc-action-banner-dismiss {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  margin-left: 4px;
  border-radius: 4px;
  /* Min 32px tap target while staying compact */
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .kyc-action-banner-dismiss:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--warning-fg) 12%, transparent);
}
[data-theme] .kyc-action-banner-dismiss:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Mobile: swap to short copy, keep single row, tighten spacing */
@media (max-width: 480px) {
  [data-theme] .kyc-action-banner {
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
  }
  [data-theme] .kyc-action-banner-text-full { display: none; }
  [data-theme] .kyc-action-banner-text-short { display: inline; }
  [data-theme] .kyc-action-banner-link {
    font-size: 12px;
    /* Don't let the link wrap underneath on tight viewports */
    white-space: nowrap;
  }
}
/* =========================================================================
   Hash-bucketed app avatars (apps table)
   -------------------------------------------------------------------------
   Sanzone steer (2026-05-18): each row's letter avatar should differ
   from its neighbour. 8 buckets cycled by (app.id % 8). All buckets
   stay within the dark palette — soft tints over the default bg-3 —
   so the page doesn't look like a candy shop. Edit-once if you want
   a different hue family. */
[data-theme] .payments-table-app-logo--bucket-0 { background: color-mix(in srgb, #45e760 18%, var(--bg-3)); color: #45e760; }
[data-theme] .payments-table-app-logo--bucket-1 { background: color-mix(in srgb, #5b9dff 18%, var(--bg-3)); color: #8fbcff; }
[data-theme] .payments-table-app-logo--bucket-2 { background: color-mix(in srgb, #c084fc 18%, var(--bg-3)); color: #d8b4fe; }
[data-theme] .payments-table-app-logo--bucket-3 { background: color-mix(in srgb, #fb923c 18%, var(--bg-3)); color: #fdba74; }
[data-theme] .payments-table-app-logo--bucket-4 { background: color-mix(in srgb, #f472b6 18%, var(--bg-3)); color: #f9a8d4; }
[data-theme] .payments-table-app-logo--bucket-5 { background: color-mix(in srgb, #2dd4bf 18%, var(--bg-3)); color: #5eead4; }
[data-theme] .payments-table-app-logo--bucket-6 { background: color-mix(in srgb, #facc15 14%, var(--bg-3)); color: #fde047; }
[data-theme] .payments-table-app-logo--bucket-7 { background: color-mix(in srgb, #f87171 18%, var(--bg-3)); color: #fca5a5; }
/* =========================================================================
   Apps-table empty-state callout
   -------------------------------------------------------------------------
   Replaces the long list of repeated "KYC required" rows when every
   app on the team is stuck in the same pre-KYC state (Sanzone #6).
   Single amber-tinted action card with a primary CTA. */
[data-theme] .payments-apps-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--warning-fg) 8%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--warning-fg) 28%, var(--line));
  border-radius: var(--radius-lg);
}
[data-theme] .payments-apps-callout-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning-fg) 20%, transparent);
  color: var(--warning-fg);
  font-size: 16px;
}
[data-theme] .payments-apps-callout-body { flex: 1 1 auto; min-width: 0; }
[data-theme] .payments-apps-callout-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
[data-theme] .payments-apps-callout-desc {
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
}
[data-theme] .payments-apps-callout-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--t-base) var(--ease-out);
}
[data-theme] .payments-apps-callout-cta:hover { filter: brightness(1.06); }
/* button_to wraps the button in a <form> — neutralize its default
   block-level margin/padding so the CTA sits flush in the callout. */
[data-theme] .payments-apps-callout form { margin: 0; }
@media (max-width: 720px) {
  [data-theme] .payments-apps-callout {
    flex-direction: column;
    align-items: stretch;
  }
  [data-theme] .payments-apps-callout-cta { justify-content: center; }
}
/* =========================================================================
   Embed slot variants — keep the placeholder height honest per slot so
   the page doesn't reflow violently as each PayoutsSession resolves.
   Removed (May 2026, Sanzone steer): the --status variant. We no longer
   mount Whop's <StatusBannerElement> — see show.html.erb for the
   single-source-of-truth rationale.
   ========================================================================= */
[data-theme] .payments-embed-slot--balance { min-height: 160px; }
[data-theme] .payments-embed-slot--withdrawals { min-height: 200px; }
[data-theme] .payments-embed-slot--settings { min-height: 64px; }
/* Modal-hosted slots — placeholders are short because the modal body
   already reserves its own min-height; we don't want an oversized
   placeholder pushing the action row off the visible viewport before
   the Whop SDK hydrates. */
[data-theme] .payments-embed-slot--modal {
  min-height: 280px;
  background: transparent;
  border: 0;
  padding: 0;
}
/* =========================================================================
   Identity card action row — buttons that trigger the per-element
   <dialog> modals (Verify, AddPayoutMethod, ChangeAccountCountry).
   Wrapping/stacking on narrow screens so we don't squeeze three CTAs
   into one row at 720px wide.
   ========================================================================= */
[data-theme] .payments-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
[data-theme] .payments-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
[data-theme] .payments-card-btn:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
}
[data-theme] .payments-card-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .payments-card-btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
[data-theme] .payments-card-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-2);
}
[data-theme] .payments-card-btn--ghost:hover {
  background: var(--hover-bg);
  color: var(--fg);
  border-color: transparent;
}
/* =========================================================================
   Modal body sizing for Whop embeds
   -------------------------------------------------------------------------
   The hosted embeds can render a tall form (Change Country in particular
   shows a long country picker + a save row). Cap the modal body height so
   it scrolls inside the dialog instead of clipping at the bottom of the
   viewport — the bug that lopped off the "Save" row in Sanzone's screenshot.
   The dialog itself is centered by the design-system .modal margin:auto;
   we don't need extra positioning here.
   ========================================================================= */
[data-theme] .modal .payments-embed-slot--modal {
  max-height: calc(85vh - 96px); /* viewport minus modal head + body padding */
  overflow-y: auto;
}
/* =========================================================================
   Settings panel (advanced expander)
   ========================================================================= */
[data-theme] .payments-settings-panel { margin-top: 24px; }
[data-theme] .payments-settings-expander[open] .payments-settings-chevron {
  transform: rotate(180deg);
}
[data-theme] .payments-settings-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[data-theme] .payments-settings-summary::-webkit-details-marker { display: none; }
[data-theme] .payments-settings-summary .payments-card-eyebrow { margin: 0; }
[data-theme] .payments-settings-summary .payments-card-title { margin: 0; flex: 1 1 auto; }
[data-theme] .payments-settings-chevron {
  color: var(--fg-3);
  font-size: 14px;
  transition: transform var(--t-base) var(--ease-out);
}
[data-theme] .payments-settings-expander > .payments-embed-slot {
  margin-top: 16px;
}
/* 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. */
/* ============= Mobile nav (hamburger + drawer) =============
   .nav-links is hidden ≤1040px (see Responsive section). Without this the
   primary nav simply vanishes on mobile with no replacement. Markup is in
   landing_v2/_nav.html.erb, toggled by the shared mobile_menu_controller
   (toggles `.hidden` on the hamburger / close / panel targets). The
   `.hidden` overrides use 2-class specificity so they beat the 1-class
   `[data-theme] .nav-…` base rules and Tailwind's `.hidden`. */
/* Box-less wrapper: generates no box (no containing block, no stacking
   context, no effect on the sticky header) so the fixed overlay escapes
   .nav's backdrop-filter containing block and fills the viewport. */
[data-theme] .nav-shell { display: contents; }
[data-theme] .nav-mobile-toggle { display: none; }
[data-theme] .nav-drawer-overlay { display: none; }
@media (max-width: 1040px) {
  [data-theme] .nav-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  [data-theme] .nav-mobile-toggle.hidden { display: none; }

  [data-theme] .nav-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
  }
  [data-theme] .nav-drawer-overlay.hidden { display: none; }
}
[data-theme] .nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 55%, transparent);
}
[data-theme] .nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 24px;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px -16px rgba(0, 0, 0, 0.5);
}
[data-theme] .nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
[data-theme] .nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-theme] .nav-drawer-links a {
  text-decoration: none;
  color: var(--fg);
  font-size: 17px;
  font-weight: 500;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .nav-drawer-links a:hover,
[data-theme] .nav-drawer-links a:focus-visible {
  background: var(--hover-bg);
  outline: none;
}
[data-theme] .nav-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}
[data-theme] .nav-drawer-actions .btn {
  width: 100%;
  justify-content: center;
}
/* ============= 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-0\.5::after{
  content: var(--tw-content);
  top: 0.125rem;
}
.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\:border-primary-300:focus-within{
  --tw-border-opacity: 1;
  border-color: rgb(130 239 148 / 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-2: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(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-within\:ring-gray-200:focus-within{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(208 210 212 / var(--tw-ring-opacity, 1));
}
.focus-within\:ring-primary-300:focus-within{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(130 239 148 / 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-\[\#8CE747\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(140 231 71 / 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-50\/40:hover{
  background-color: rgb(236 254 239 / 0.4);
}
.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-700:hover{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / 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-700:hover{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / 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-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(107 236 129 / 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\:bg-white:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-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-\[\#45E760\]:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(69 231 96 / var(--tw-ring-opacity, 1));
}
.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\:bg-gray-300:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(179 185 192 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-primary-400:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(107 236 129 / 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-0\.5{
  --tw-translate-x: 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));
}
.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-100{
  --tw-bg-opacity: 1;
  background-color: rgb(198 248 206 / var(--tw-bg-opacity, 1));
}
.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\(--danger-fg\)_30\%\2c var\(--line\)\)\]:is(.dark *){
  border-color: color-mix(in srgb,var(--danger-fg) 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-400\/40:is(.dark *){
  border-color: rgb(129 140 248 / 0.4);
}
.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-400:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / 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-editor-surface-hover:is(.dark *){
  background-color: var(--ed-surface-hover);
}
.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-500\/15:is(.dark *){
  background-color: rgb(99 102 241 / 0.15);
}
.dark\:bg-indigo-500\/30:is(.dark *){
  background-color: rgb(99 102 241 / 0.3);
}
.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-purple-900\/30:is(.dark *){
  --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);
}
.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-pink-900\/30:is(.dark *){
  --tw-gradient-to: rgb(131 24 67 / 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-700:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity, 1));
}
.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-2:hover:is(.dark *){
  background-color: var(--ed-surface-2);
}
.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-indigo-500\/15:hover:is(.dark *){
  background-color: rgb(99 102 241 / 0.15);
}
.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\/10:hover:is(.dark *){
  background-color: rgb(30 97 40 / 0.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-200:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / 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-200:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / 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\:border-primary-500:focus:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(69 231 96 / var(--tw-border-opacity, 1));
}
.dark\:focus\:bg-gray-900:focus:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(27 28 29 / 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\:focus\:ring-primary-900\/40:focus:is(.dark *){
  --tw-ring-color: rgb(30 97 40 / 0.4);
}
.dark\:focus\:ring-offset-gray-900:focus:is(.dark *){
  --tw-ring-offset-color: #1b1c1d;
}
.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\:bg-primary-900\/30:is(.dark *){
  background-color: rgb(30 97 40 / 0.3);
}
.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-16{
    padding: 4rem;
  }
  .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\:w-auto{
    width: auto;
  }
  .md\:flex-shrink-0{
    flex-shrink: 0;
  }
  .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\:left-0{
    left: 0px;
  }
  .lg\:left-auto{
    left: auto;
  }
  .lg\:right-4{
    right: 1rem;
  }
  .lg\:top-full{
    top: 100%;
  }
  .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\: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\:max-h-\[calc\(100dvh-6rem\)\]{
    max-height: calc(100dvh - 6rem);
  }
  .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\:scale-\[1\.03\]{
    --tw-scale-x: 1.03;
    --tw-scale-y: 1.03;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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-\[\#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-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .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;
}